Introducción al Desarrollo Web

1. Páginas y sitios web

Una página web es un documento electrónico en formato html que puede ser visualizado mediante un navegador.

Se trata de un archivo de texto, en código html, que tiene vínculos a los archivos externos que se colocan en ella (imágenes, videos, audios,...).

1.1 ¿Cómo funciona una página web?

Un sitio web es un conjunto de páginas web vinculadas mediante “hipervínculos". Cuando accedemos a una dirección de internet, estamos accediendo a la página principal de un sitio web en el que todas sus páginas pertenecen al mismo sitio o dominio. Por tanto, un sitio web es un conjunto de documentos “html" con sus correspondientes archivos vinculados.

1.2 La carpeta raíz de un sitio web

Un sitio web es un conjunto de páginas web (documentos HTML) y otros archivos (imágenes, audios, estilos,…).

Todos esto archivos deben alojarse en una carpeta que se denomina carpeta raíz, en cuyo interior deben estar correctamente organizados.

Es importante tener clara esta idea: SITIO WEB = CARPETA

2. La evolución del diseño web

EL código HTML nació en 1990 surgiendo la primera página web en 1991. En la actualidad es el tipo de documento más empleado en el mundo. Se trata de un lenguaje bastante sencillo en el que cualquier persona podía escribir documentos, sin apenas necesidad de conocimientos informáticos. Esta es una de las razones de su éxito.

En su evolución se han ido produciendo muchos cambios que han llegado a lo que actualmente conocemos como HTML5.

En los siguientes videos puedes conocer más sobre el nacimiento y la evolución del lenguaje HTML hasta la llegada a HTML5.

2.1 La necesidad del diseño en la web. Aparición del código CSS

En sus inicios, internet tenía como objetivo intercambiar y transmitir la información limpia y legible y sólo eran necesarias unas pocas etiquetas: para definir párrafos, titulares, integrar imágenes, enlazar con otros documentos y poco más.

Poco a poco el uso de internet se popularizó y empezó a ser relevante la forma de presentar el contenido. Surgieron entonces necesidades de diseño para dar formato a la información y aparecieron nuevas etiquetas: alineación, márgenes, tamaños, color, tipografías, maquetación,...

Esto provocó conflictos a la hora de interpretar el código por los diferentes navegadores y surgió el XHTML. Se trata del mismo lenguaje HTML pero mucho más simple y estricto, que eliminaba del código todo lo relativo al formato, dejando un HTML perfectamente interpretable por cualquier navegador. Todo lo relacionado con el diseño y formato del documento se dejaba para un nuevo lenguaje llamado “CSS".

3. Fundamentos del lenguaje HTML

El HTML es un lenguaje de marcado basado en etiquetas que permite dar estructura al contenido del documento y a su presentación. No es un lenguaje de programación ya que no tiene funciones aritméticas o variables, ni permite una comunicación directa con la máquina.

Si abrimos cualquier página web en un navegador, lo que vemos es el contenido gráfico de la misma.

Pero si buscamos la opción de “mostrar el código fuente", se abrirá una nueva ventana llena de texto con el código de la misma.

Una página web es un documento de texto en código HTML procesado por el navegador que nos muestra lo que finalmente vemos. Este tipo de archivos tiene la extensión “.htm" o “html".

Las imágenes y el resto de archivos integrados no se incrustan en la página web y por tanto son archivos externos. Es muy importante tener todo el contenido perfectamente organizado y asegurar que los vínculos a los archivos externos se realizan de forma correcta, ya que de lo contrario, el contenido no se mostrará.

3.1 La sintaxis básica del lenguaje HTML

Aunque vayamos a realizar el desarrollo web usando editores visuales, gestores de contenidos u otra plataforma en la que no sea necesario escribir el código HTML desde 0, será fundamental tener conocimiento de la sintaxis básica así como de otros aspectos importantes, ya que en algunos casos vamos a tener que intervenir directamente en el código.

La etiqueta HTML

El lenguaje HTML se basa en un elemento llamado etiqueta. El contenido de un documento HTML se mostrará de forma ordenada siguiendo la estructura de etiquetas escrita. Una etiqueta HTML tiene una “apertura"(<…>), un “contenido" y un “cierre"(</…>).

Cada elemento o “bloque de contenido" que queramos incluir en un documento HTML tendrá su propia etiqueta. Por ejemplo, para indicar al navegador que queremos incluir un párrafo de texto existe una etiqueta específica. Veamos el ejemplo del código de un párrafo:

<p>Este será el contenido del párrafo.</p>

La mayoría de las etiquetas HTML constan de etiqueta de apertura y de cierre, aunque ya veremos que algunas (las que no encierran contenido en sí) únicamente tienen la etiqueta de apertura. Es posible que en algunos casos veas estas etiquetas “autocerradas (<… />" pero en HTML5 esto no sería correcto, aunque funcione igualmente. Veamos unos ejemplos:

<meta charset="UTF-8" > - <img … > - <br >

Atributos de las etiquetas HTML

Dentro de la etiqueta de apertura de cualquier “bloque de contenido" se pueden incluir atributos que afecten al elemento. Por ejemplo si queremos indicar que un determinado párrafo queda alineado en el centro. Podemos hacerlo mediante un atributo incluido dentro de la etiqueta de apertura del párrafo.

<p align="center">Este párrafo quedaría centrado.</p>

3.2 La estructura básica de un documento HTML

Vamos a ver las etiquetas básicas que van a dar la estructura al código de la página.

• <!doctype>: Es la etiqueta de apertura y aporta información al navegador de la versión HTML en la que está escrito el documento a interpretar. Desde HTML5, se simplificó esta etiqueta : <!doctype html>

• <html>: Son las etiquetas que abren y cierran el propio documento HTML. La de apertura, <html>, estará al “principio", después del <!doctype> y la de cierre, </html>, al final de todo el contenido. La etiqueta de apertura, debe contener un atributo indicando el leguaje de la web <html lang=”es”>

Más adelante veremos la forma en la que podremos estructurar los contenidos dentro de un documento HTML, pero funcionalmente un documento HTML estará organizado en 2 bloques claramente diferenciados:

• <head>: Contiene etiquetas “informativas” y enlaces que no forman parte del contenido visual de la página. Se abre, <head>, después de la apertura del "html" y se cierra, </head>, antes de iniciar el "body". En su interior se colocan etiquetas de “metadatos” (<meta … >) con información diversa del archivo (tipo de codificación, autor, descripción,…), la etiqueta del título (<title>) de la página, etiquetas de enlace (<link … >) entre el documento y otros documentos y algunas otras cosas que iremos viendo más adelante.

• <body>: Engloba todo el contenido visual de la página. Es donde se incluirán las etiquetas de “contenido" que quedarán encerradas entre la etiqueta de apertura <body> y la etiqueta de cierre </body>.

4. Páginas web estáticas y páginas web dinámicas

4.1 Páginas web estáticas

Las páginas web estáticas solo “sirven información" al usuario sin ofrecerle ningún tipo de interacción (salvo hipervínculos) con la aplicación. En las páginas web estáticas, el contenido que se muestra (interfaz gráfica y contenidos) es igual para todos los usuarios, ya que no existen elementos que permitan reconocer a un tipo de usuario concreto.

En el sentido estricto, una página “estática" puede incluir contenidos animados. Sin embargo aquí nos estamos refiriendo al concepto de que un servidor envía una página al navegador sin modificaciones según el usuario.

4.2 Páginas web dinámicas

Por otro lado, nos encontramos con “páginas web" que permiten una interacción directa por parte del usuario. En las páginas web dinámicas es posible adaptar el diseño de la interfaz, el contenido o la propia funcionalidad de la aplicación según el perfil del usuario. En este tipo de páginas es imprescindible un control de acceso (registro previo) que permite identificar al usuario y adaptar en consecuencia la interfaz, el contenido y la propia funcionalidad  de las página.

Esta adaptación de las páginas se produce en un servidor, que al identificar al usuario interpreta las páginas y el contenido que debe “servirle" en función de los datos que tenga almacenados. Todo esto es posible gracias a la integración dentro del HTML de lenguajes como ASP, PHP, JSP, Perl u otros que permiten la comunicación con las base de datos.

Procesamiento de páginas dinámicas

Cuando un servidor web recibe una petición para mostrar una página estática, el servidor la envía directamente al navegador que la solicita. Cuando el servidor web recibe una petición para mostrar una página dinámica, sin embargo, reacciona de distinta forma: transfiere la página a un software especial encargado de finalizar la página. Este software especial se denomina servidor de aplicaciones.

El servidor de aplicaciones lee el código de la página, finaliza la página en función de las instrucciones del código y elimina el código de la página. El resultado es una página estática que el servidor de aplicaciones devuelve al servidor Web, que a su vez la envía al navegador solicitante. Lo único que el navegador recibe cuando llega la página es código HTML puro. A continuación se incluye una vista de este proceso: