Introducción a las Páginas Web

¡Hola de nuevo internauta!,

     Para cambiar un poco de tema y hacer más amena la lectura del blog voy a empezar a introducir otras entradas sobre otros campos de la informática. Debido al auge de la web me centraré en principio en las páginas web: su estructura, diseño y programación. ¡Pero no os preocupéis porqué habrá más entradas sobre otros temas!. Así que vamos al meollo.



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

La pregunta del millón desde la que surgió todo este mundo virtual. Una página web es un documento adaptado para la World Wide Web y que puede incluir varias cosas tales como gráficos, imágenes, texto, vídeos, etc para interactuar con ella o hacerla más atractiva visualmente. Permite navegar entre distintas páginas gracias a los enlaces de hipertexto formando así lo que se conoce como sitio web(en realidad el sitio web posee más documentos como hojas de estilo pero lo veremos en futuras entradas). Su formato es el conocidísimo HTML o XHTML.

Hay dos tipos de páginas web:

• Estáticas: Su contenido es predeterminado y no permite interactuar con la página web. No se requiere ningún tipo de programación ni de bases de datos por lo que sólo se usa el HTML. Se usan generalmente para informar sobre las actividades que ofrece la empresa o persona. Posee varias ventajas como:
• Coste económico.
• Tiempos de acceso rápidos.
• Facilitan el posicionamiento.
Por contra  son difíciles de mantener y no ofrecen interactividad con el usuario más allá de la navegación mediante enlaces de hipertexto.

• Dinámicas: La información presentada es generada por la petición del usuario como al hacer una consulta sobre la base de datos. Su estructura y diseño puede modificarse. Para programarlas se usan las etiquetas HTML, algún lenguaje de programación del lado del servidor(aquellos que ejecutan su código en el servidor y no en el navegador del cliente) como PHP, ASP, JSP, PERL CGI, etc. y gestores de base de datos como MySQL, Orecle SQL, etc. Posee varias ventajas como
• Interacitividad con el usuario.
• Fácil actualización.
• Coste de mantenimiento bajo.

No hay que confundir contenido dinámico con contenido multimedia ya que una página estática puede contener multimedia.

2. Elementos de una página web

Una página web está formada por los siguientes elementos:

• Texto: Estático o en movimiento. Es lo más básico y fundamenta en una página web ya que es el encargado de informar al usuario sobre la misma. Lo más importante es que sea legible permitiendo así una cómoda lectura de la página web, esto, que parece muy obvio no lo es tanto porque la legibilidad viene dada tanto por la fuente usada, su tamaño, sangrado, interlineado, espacios entre párrafos y tabulaciones. Es también muy importante el uso de los colores con la letra, una cosa es resaltar una palabra
Ya sé que es muy bonito usar fuentes propias o divertidas pero aconsejo encarecidamente que sean legibles, además de usar alguna fuente de texto predeterminada, ya que, por ejemplo, en el caso de fuentes propias, si el usuario no la tiene instalada(y no todos los usuarios saben hacerlo) pueda seguir leyendo la página.

• Imágenes: Fijas o animadas. Son de gran ayuda para hacer más amena la página o resumir la información de la misma aprovechando la memoria visual. Es muy importante usar mediante la propiedad "alt" de la etiqueta HTML para imágenes el texto alternativo pues aparecerá en la página en caso de cargarse la imagen o de una carga lenta, además, los lectores de páginas web para personas con problemas visuales son capaces de leer dicha propiedad. Los formatos más usados son .gif, .jpg/.jpeg y .png y su formato para una buena carga es de 72 píxeles por pulgadas.
En otras entradas hablaremos sobre la diferencia entre los formatos anteriormente descritos.
• Sonidos.
• Secuencia de vídeos.

3. Partes de una página web

Este apartado no hay que confundirlo con el anterior ya que vamos a hablar de la estructura de una página web y no de sus componentes. Los elementos que suelen mostrarse en una página web son:

• Marca(optativo): Mediante un logotipo generalmente. Suele ponerse en el encabezado de la página.
• Navegación global: Indicada mediante el menú principal.
• Navegación de subsección(optativo): Son los menús independientes o menús desplegables del menú principal. De cualquier forma sus enlaces hacen referencias a otras páginas del sitio web relacionadas con la opción seleccionada en la navegación global.
• Encabezado o título de la página: Es donde se muestra el nombre la empresa.
• Cuerpo de la página: Donde se añadirá la información que se desea mostrar al usuario.
• Opción de búsqueda en el sitio: Habilitado mediante un cuadro de texto y un botón. En los últimos años se está incluyendo mucho debido a los CMS por lo que no lo indico como optativo. En caso de añadirse se hará por encima del encabezado.
• Barra lateral(optativo): Son el resto de columnas de la página web denominadas right-content/left-content(de manera semántica) o sidebar(de manera estructural). En otras entradas hablaremos sobre las maneras semántica y estructural.
• Pié de página: Demarca el fin del a página y es donde suelen situarse por norma general los derechos de autor, enlaces a las distintas redes sociales y correo electrónico y enlaces equivalentes al menú principal. 

Todas estas partes de una página están estructuradas en ciertos lugares de la misma dando diferentes diseños como se indica en la siguiente imagen:

¡Gracias por leerme!.