Fundamentos de diseño web

Conceptos básicos de diseño web

Cuando hablamos de un sitio web nos estamos refiriendo en realidad a un conjunto de archivos, pueden ser de texto, audio, gráficos, etc., que está unidos mediante un lenguaje de marcas denominado HTML.

Este lenguaje nos permite crear las llamadas páginas web, que no son más que archivos con la extensión htm ó html. Las mismas, se alojan en servidores web, que son computadoras adaptadas especialmente, y que están conectadas en forma permanente a Internet.

La ventaja del HTML es que nos deja presentar varios archivos en forma simultánea (texto junto con un video, gráficos en forma de botones, etc.) y además, cuenta con la posibilidad de crear enlaces o hipervínculos (hyperlinks en idioma inglés), que se encargan de conectar las páginas web entre sí. Esto significa que podemos “saltar” de una página web ubicada en USA, a otra que está en España o japón en forma inmediata, haciendo que las distancias geográficas desaparezcan en la red.

Para poder acceder a los sitios web utilizaremos un navegador, que es el software encargado de presentarnos esa información en forma amigable.

• Sitio Web: conjunto de archivos
• Página Web: archivo en formato HTML o HTM
• Hipervínculo: objeto que se utiliza para enlazar archivos (páginas Web, imágenes, audio, etc.)
• Servidor Web: computadora conectada a internet que aloja Sitios Web o archivos que pueden ser solicitados a través de la red

Programación Web

Con el desarrollo de la web surgieron nuevos lenguajes de programación tendientes a presentar páginas que permiten mayor interacción, son más rápidas, contienen animaciones, etc.

Entre ellos, podemos mencionar al asp y php, que en líneas generales, permiten generar páginas en base a los pedidos de los usuarios del sitio, es decir, buscan en una base de datos la información solicitada, y crean una página en forma instantánea.

Las bases de datos más utilizadas son MySQL (open source), Oracle, Informix de IBM, y Microsoft SQL.

El DHTML (HTML dinámico) y el CSS (hojas de estilo) sirven para hacer más interactivas las páginas HTML, por ej. botones que cambian de color, texto que agranda o disminuye su tamaño, etc.; aliados al JavaScript, pueden también poner la hora y la fecha a la página, mostrar texto que se desplaza, y más.

Un software que se está utilizando mucho en la web para hacer animaciones con audio, texto, imágenes, etc., es el Macromedia Flash, ya que en sus últimas versiones cuenta con herramientas que hacen relativamente fácil crear una presentación web.

El lenguaje Java en cambio, crea archivos ejecutables que se instalan en el ordenador del navegante y se utiliza para animaciones o para crear pequeños programas (calculadoras, juegos, etc.). Aunque cabe aclarar que cada vez se está utilizando menos.

• ASP/PHP formatos para páginas web dinámicas
• Bases de datos: MySQL, Oracle, Informix, y Microsoft SQL
• DHTML/CSS lenguajes dinámicos de HTML
• Javascript: lenguaje de programación
• Flash: Software que sirve para hacer animaciones
• Java: lenguaje de programación

Peso de las páginas y formato de imágenes

El peso de las páginas es conveniente que no exceda de los 50 kb.; esto se debe a que todavía las conexiones a Internet son lentas, y hay estudios hechos en los EE.UU. que demuestran que los usuarios no suelen esperar más de 30 segundos para ver la información de una página.

En este tema es fundamental el tratamiento de las imágenes, es decir, muchas veces se pueden acondicionar las mismas para que bajen sustancialmente de peso, mantenimiento de todas formas una calidad aceptable. Los software de edición de imágenes digitales vienen ya preparados para la optimización de imágenes a montar en la web.

• Peso de las páginas
• Formato de imágenes

Consistencia

Es necesario lograr que el sitio web obtenga consistencia y una imagen distintiva, mediante el uso de fondos, gráficos y logos, colores uniformes en el texto y los enlaces, barras de navegación en el mismo lugar, etc.; de la misma manera que una tienda comercial mantiene una estética única, tanto para su casa central como para sus sucursales.

• Fondo y gráficos distintivos
• Color de texto y enlaces
• Barras de navegación en el mismo lugar

Para ampliar infromación acerca de como hacer una web, consulta el manual empezar a hacer webs desde cero.