Computación y Robótica

SEGUNDO TRIMESTRE

1.INTRODUCCIÓN A LAS PÁGINAS WEB

Hoy en día, Internet se ha convertido en una "ventana al mundo", todas las empresas e instituciones tienen su propia página web que les sirve para presentarse al resto del mundo. Por eso, el desarrollo web es actualmente una de las profesiones con más auge.

Una página web es un documento que puede contener texto, sonido, vídeo, programas, enlaces, imágenes, hipervínculos y muchas otras cosas, adaptada para la llamada World Wide Web (WWW) y a la que se puede acceder mediante un navegador web.

Esta información se encuentra generalmente en formato HTML y puede proporcionar acceso a otras páginas web mediante enlaces de hipertexto.

Frecuentemente también incluyen otros recursos como pueden ser hojas de estilo en cascada, scripts, imágenes digitales, entre otros.

Las páginas web pueden estar almacenadas en un ordenador local o en un servidor web remoto. El acceso a las páginas web es realizado mediante una transferencia desde servidores, utilizando el protocolo de transferencia de hipertexto (HTTP).

En el siguiente vídeo veremos qué es el protocolo HTTP y qué son las cookies.


Para acceder a una pagina web almacenada en la web, necesitamos conocer su URL (Uniform Resource Locator) e introducirla en la barra de direcciones de un navegador web.

Cada página web tiene su propia URL. Las URL están compuestas de varias partes que permiten al navegador localizarlas dentro de un servidor.

partes url.png
  • Protocolo: Reglas que debe seguir el navegador para encontrar la página web.

  • Subdominio: Para el protocolo http suele ser www, aunque existen otros.

  • Dominio: Es el nombre donde se almacena el sitio web.

  • Subdirectorio: Es una carpeta alojada dentro del dominio indicado.

  • Archivo: Es el archivo o página que nos va a mostrar el navegador web. Está dentro del subdirectorio indicado.

1.1. SERVIDORES WEB

Cuando visitas una página web, los datos por los que navegas han de estar almacenados en algún sitio para que puedas acceder. En lugar de guardarlos en el ordenador del creador del sitio (esto supondría muchos problemas para el mismo), lo que se hace es utilizar servidores web en los que se alojan todos los datos, así que te vendrá bien saber aumentar velocidad de un ordenador.

Por tanto, un servidor web es un ordenador especialmente preparado para estar encendido las 24 horas del día los 365 días del año.

En el siguiente vídeo se nos explica qué es un servidor web.

ACTIVIDADES 1

Realiza las siguientes actividades intentando contestar con tus propias palabras:

  1. ¿Qué es una página web?

  2. ¿En qué consiste el protocolo HTTP?

  3. ¿Para qué utilizan las Cookies los navegadores web?

  4. ¿Qué es la dirección URL y de qué partes se compone?

  5. Busca nombres de protocolo distintos de http.

  6. ¿Qué es un servidor web y para qué se utilizan?


1.2. ESTRUCTURA BÁSICA DE UNA PÁGINA WEB

En la estructura de una página web tenemos tres partes diferenciadas: cabecera, cuerpo y pie de página. O, por sus términos en inglés: header, body y footer.

Cabecera o header

La cabecera es la parte superior de la página web. Aquí suele incluirse la información básica de la empresa o marca y es consistente en todo el sitio, es decir, se repite en cada página de la web por la que navegas.

Los elementos que se incluyen en la cabecera son:

  • Logo de la empresa

  • El menú de navegación

  • Un cuadro de búsqueda

  • Una pequeña descripción de la web

Cuerpo o body

Esta es la parte de la web que alberga el contenido principal de tu página. Esta parte sí es diferente en cada página de tu sitio. Es decir, no será el mismo contenido el que incluyes en tu página de contacto que en la página principal.

Pie de página o footer

El pie de página o footer es la parte inferior de una página web. Al igual que la cabecera, se repite y es consistente en cada página. En el footer podemos encontrar los siguientes elementos:

  • Menú simplificado

  • Información de contacto

  • Botones de redes sociales

  • Logo de la empresa

  • Enlace a la política de privacidad


estructura página web.png

1.3. HERRAMIENTAS PARA DESARROLLADORES WEB

Para editar una página web se necesitan varias herramientas variadas, ya que se trata de mezclar letras, colores, fondos, fotos, dibujos, vídeos, etc. en una sola pagina, por eso, un editor de páginas web debe tener y dominar varias herramientas digitales, como son:

  • Repositorio de plantillas: Sitio web con plantillas de páginas web, para utilizarlas o basarse en las mismas.

  • Editor de paleta de colores: Programa creador de la paleta de colores de la página.

  • Repositorio de tipografías: Sitio de fuentes o tipos de letra.

  • Banco de imágenes: Páginas desde las que exportar imágenes para la página web (Hay sitios de pago y sitios gratuitos)

  • Banco de iconos: Página repleta de icono para la página clasificados en distintas categorías y diseños.

  • Banco de vídeos: Recopilatorio de vídeos y animaciones (También podemos encontrar vídeos de pago y vídeos gratuitos).

  • Editor de imágenes: Programa manipulador de imágenes (Para recortarlas, girarlas, cambiar colores, incluir letreros, etc.).

  • Creador de prototipos: Webs donde podemos hacer un boceto de la estructura de la web (Mookup).

  • Maquetador visual: Es el sitio donde creamos la página (Page builder).

  • Diseñador de logotipos: Webs donde podemos crear el logotipo de la web o empresa fácilmente.


1.4. LENGUAJES DE EDICIÓN DE PÁGINAS WEB

Aunque actualmente existen sitios en la web donde construir páginas arrastrando boques de texto, imágenes, etc. como Google Sites, Wix, weebly..., son sitios con opciones muy cerradas, que no permiten hacer páginas personalizadas ni originales, sino que todas tienen un aspecto similar.

Si lo que se quiere es crear una página web a medida, original y distinta a las demás, hay que construirla mediante un lenguaje de edición. Los lenguajes de edición de páginas web más utilizados hoy en día son:

  • HTML (Hyper Text Markup Language, lenguaje de etiquetado de hipertexto) es el más sencillo y el más antiguo, se trata de un documento de texto que integra el contenido de la página web mediante etiquetas.

  • XML (Extensible Markup Language, lenguaje de marcas extensible) es un estándar para el intercambio de datos estructurados entre distintas plataformas, y tiene un formato muy sencillo.

  • XHTML (Extensible Hypertext Markup Language, lenguaje extensible de etiquetado de hipertexto) es una reformulación del HTML 4.0 combinado con la versión 1.0. de XML. Complementa las cualidades del HTML agregando la extensibilidad del XML.

  • HTML5 es la quinta revisión del lenguaje HTML y fue publicada a fines del año 2014. Dispone de dos alternativas de sintaxis: una tradicional y otra combinada con XHTML. Es el lenguaje recomendado actualmente para páginas web porque brinda mejor accesibilidad.

  • CSS (Cascade Style Sheets, Hojas de Estilo en Cascada) es un lenguaje que se utiliza para separar el contenido (los datos ) del diseño. De este modo, al cambiar las definiciones de algún parámetro en el archivo CSS, se modifica la apariencia de todos los archivos HTML de un sitio.

  • Flash: este programa originalmente se usaba para realizar animaciones vectoriales, pero paulatinamente se ha convertido en uno de los mejores proveedores de experiencias interactivas, gracias a su propio lenguaje de programación, el ActionScript. Se integra dentro de un documento HTML como parte de la página o constituye la página completa, puede integrar todos los medios y combinarse con bases de datos. Los editores de gráficos, sonido y video en línea generalmente están diseñados con Flash.

ACTIVIDADES 2

Realiza las siguientes actividades intentando contestar con tus propias palabras:

  1. ¿Qué es la cabecera de una página web y qué suele contener?

  2. ¿Qué es el cuerpo de una página web y qué suele contener?

  3. ¿Qué es el pie de página de una página web y qué suele contener?

  4. Busca en Internet cada una de las herramientas de desarrollo web vistas e indica el nombre de al menos una de cada tipo.

  5. Indica los nombres de los principales lenguajes de edición de páginas web.

  6. Entra en Canva, que es una aplicación online gratuita para crear logos y otras cosas.

Mira los logotipos de ejemplo de la izquierda y crea tu propio logotipo (Con tu nombre).

https://www.canva.com/es_es/crear/logos/