CAPÍTULO l

DISEÑO DE PÁGINAS WEB

CAPÍTULO l

DISEÑO DE PAGINAS WEB

1.1 DEFINICIONES DE WEB Y HTML.

La World Wide Web, más conocida comúnmente con Web, es una de las áreas

de internet que se ha desarrollado más rápidamente. Nació en 1989, como parte

de un proyecto del CERN de suiza y con el objetivo de mejorar el intercambio de

información dentro de internet, y vea en lo que se ha convertido actualmente…

De ser un lugar en el que se podía encontrar información, ha pasado a ser un

gran centro comercial. En muy pocos años, las sencillas paginas de la Web han

evolucionado hasta convertirse en sofisticados sitios (sites) donde se pueden

comprar, de forma segura, bienes y otros servicios. Mientras tanto, han nacido

nuevas compañías que realizan sus negocios exclusivamente atravez de la web,

como por ejemplo la dedicada a la venta de libros www.amazon.com.

Crear una página Web es muy sencillo y, una vez instalada la red, queda

disponible para que puedan verla los millones de usuarios en internet. Para una

compañía representa una importante estrategia de marketing y una magnífica

oportunidad de realizar nuevos negocios, y para el usuario domestico la

bienvenida a una enorme audiencia.

La información de la World Wide Web está contenida en las páginas Web. La

primera página es la que se suele llamar homes page, o pagina de presentación,

y es desde la que se da referencia a todas las demás que forman parte de un

sitio. Una página Web personal puede contener lo que su autor quiera, aunque

muchos proveedores insistan en que no se incluya en ella anuncios comerciales.

Igual a que una casa, cada página de internet también tiene una dirección. Esta

dirección es el URL (Uniform Resource Locator) y gracias a ella todo el mundo

puede acceder a la página Web. El esquema exacto del nombre de la página

Web se puede anunciar en el administrador de la Web o en el proveedor de

servicios. Normalmente, suele contener la dirección de una organización y a

continuación un identificador. Por ejemplo, la pagina de presentación del autor de

este libro, cuyo proveedor de servicios es Claranet, puede encontrarse en la

dirección http://home.clara.net/Imhobbs, donde home.clara.net inicia el sitio

Claranet e Imhobbs es la pagina concreta dentro del sitio.

Por último, otro componente importante y que hay que mencionar es el

navegador Web, impredecible para visualizar las páginas Web en pantalla, y hoy

existen un gran número de ellos, y los más utilizados son Netscape Navigator y

Microsoft Internet Explore. Decidirse por uno u otro dependerá de las

preferencias personales de cada uno y de grado de compatibilidad del navegador

con su lenguaje HTML.

Fig. 1.1 Muestra de un sitio Web visualidad en Netscape Navigator.

http://soporte.udg.mx/tutoriales/navegadores/netscape-navigator/imagenes/netscape.gif

¿Qué es HTML? .

La páginas Web están escritas siguiendo el lenguaje HTML (Hyper Text Markeup

Language), el cual se mantiene en constante desarrollo a fin de atender todas las

demandas de crecimiento de internet. Este libro se centra básicamente en la

creación de páginas Web utilizando el lenguaje HTML. Java y JavaScript en los

documentos HTML.

Si bien el lenguaje HTML se utiliza para crear las paginas que se ven después

en el navegador. Así, ¿Qué es HTML? Es un sistema de escritura que

comprende etiquetas, siendo una etiqueta una instrucción contenida entre

corchetes angulares, por ejemplo. <HTLM> es una etiqueta que define el inicio de

un documento en lenguaje HTLM. La inmensa mayoría de las etiquetas contienen

también una etiqueta de cierre, por ejemplo </HTML> define el final del

documento.

HTML, de Hyper Text Markeup Language, es el método más utilizado para

publicar documentos en el WEB. Se suele traducir del ingles como “lenguaje de

Marca de Hipertexto”, “Lenguaje de Marcas Hipertextual”.

1.2 HISTORIA DEL DISEÑO DE PAGINAS WEB.

En un principio las páginas Web eran sólo texto, pero a medida que ha evolucionado

la tecnología, tanto los ordenadores como las redes de telecomunicaciones, se ha

generado nuevas formas de desarrollar la Web. 

La inclusión de imágenes fue la evolución más significativa, pero también debemos

mencionar el video y la animación, o los espacios 3D, lo que aporta valores

estilísticos, de diseño y de interactividad jamás imaginados antes.

El diseño de páginas Web se ha desarrollado a medida que ha evolucionado Internet.

En 1992 sólo había alrededor de 50 sitios Web. Las últimas estadísticas nos

confirmaban que actualmente rondan los 8.000 millones de sitios Web, a los que

diariamente se les suma a raíz de 4400 por día.

Rápidamente, su importancia alcanzará las mismas cotas que la televisión o el

teléfono. Datos recientes estiman que hay alrededor de 2 mil millones de páginas

colgadas y se espera que en los próximos años llegue a los 8 mil millones,

excediendo el número de habitantes del planeta. Sin embargo, sólo una fracción de

este número es visitado habitualmente por la mayoría de los usuarios (sólo alrededor

de 15.000 sitios Webs, el 0,4% del total).

A partir de estos datos se puede entender la necesidad de concentrar los esfuerzos

para atraer y mantener la atención de los usuarios. Junto con un desarrollo efectivo

de la estructura Web y del contenido, el diseño y el uso del color son la llave para

atraer y ser identificado, formando vínculos en el subconsciente del usuario y generar

esquemas para captar y fidelidad a nuevos visitantes.

Al mismo tiempo que la evolución de los aparatos y de su introducción en los

hogares, también ha aumentado la calidad de las transmisiones a través internet y ha

bajado su precio. A medida que la tecnología ha solventado estas dificultades, ya no

nos encontramos con problemas de forma sino de contenido.

1.3 EVOLUCIÓN DEL HTML.

El HTML tiene su origen en el trabajo de team bearner –Lee en el CERN

(Laboratorio Europeo de partículas físicas) de ginebra en 1989.

En poco tiempo y en buena medida gracias a la popularización del navegador

mosaic el Web se convirtió en el servicio de internet que ha hecho extenderse de

manera vertiginosa el acceso a la red. HTML 2 fue desarrollado en 1993 y aceptado

como un estándar por la IETF (internet Engineering Task Force) la siguiente versión

HTML 3 o HTML +, no llego a convertirse en una recomendación oficial en este

camino el HTML se había alejado de su filosofía original la clara distinción entre

descripción del contenido y presentación. El Web había salido del circulo originario,

la distribución de documentos entre la comunidad científica y se había convertido en

un fenómeno sociológico mundial. Los autores de página Web demandaba mayor

control sobre el aspecto de sus documentos, mayor potencialidad en el manejo de

recursos multimedia y mayor interactividad con el usuario. Se introdujeron etiquetas

orientadas a de este fin y se utilizaron técnicas y trucos de diseño para mejorar la

presentación Visual de los documentos.

La Existencia de un estándar es de importancia capital dado que los programas

navegadores se desarrollan implementando una versión determinada de HTML. Si

proliferan las versiones no normalizadas los fabricantes les añaden extensiones

propietarias, el autor se verá obligado escribir para un determinado navegador o

escribir varias versiones de un mismo documentos por otra parte, aun si HTML

evolucionara idealmente mediante una sucesión de versiones estandarizadas el

navegador que implementa una determinada versión no podrá interpretar los

componentes añadidos a las versiones posteriores.

Los navegadores se crean previendo esta evolución en el sentido que ignoran los

componentes nuevos para los que no están preparados así la legibilidad mínima de

un documento creado de acuerdo a una determinación versión estará garantizada

aunque se utiliza para presentarlo un navegador que implementa una versiona

anterior o posterior . Esta compatibilidad, junto a la orientación a la descripción del

contenido y ala inclusión por parte de los fabricantes de extensiones propietarias

explica las diferencias que encontramos a visualizar un mismo documento por

diversos navegadores.

Fig: 1.2 Muestra como es el diseño de HTML.

Evolucion de diseño web: 1991 fue el año en que se publicó la primera página web,

publicada por Tim Bernecs-Lee, físico británico quien es considerado uno de los

padres de la Web. Dicho sitio tenía como único fin informar qué era la “World Wide

Web”. Hoy, más de 20 años después, existen muchos más usos para la web, y el

diseño de las páginas ha cambiado considerablemente, desde uno prácticamente

inexistente en sus inicios, hasta las más nuevas técnicas donde está ganando

terreno el diseño adaptable. Sin embargo, de cada época del diseño web podemos

rescatar algo, ya sea extremadamente bueno (que debemos usar), o

extremadamente malo (a evitar totalmente), para un mejor avance de estas técnicas

en la actualidad.

Fig: 1.3 Muestra el primer diseño web

En 1996 no solamente se introdujo el lenguaje CSS, también Flash, aunque este no

ganó popularidad sino hasta 1998. La razón por la que comenzó a ser utilizado cada

vez más en diseño web, fue que CSS y HTML no eran tan poderosos para generar

gráficos que para ese entonces no tenían precedentes, como formas redondeadas,

que cambiaban de color, con efecto tridimensional mediante el manejo de

tonalidades.

Sin embargo, al utilizarlo en exceso (como sucedía con los GIFs), la experiencia de

usuario iba en detrimento y este se confundía, entre páginas splash y sitios web mal

optimizados visualmente, e incluso tan pesados que podían llegar a consumir todo el

ancho de banda (que aún era muy poco) y “crashear” el navegador.

El mayor problema de Flash: los buscadores, ya que estos “indexan” el HTML, lo cual

genera que sitios diseñados puramente en Flash difícilmente aparezcan en los

resultados de búsqueda. Actualmente, a pesar de que se puede optimizar Flash para

efectos de SEO por medio de técnicas como dividir el archivo flash en varios

pequeños archivos, cada uno con su respectivo documento HTML en que se

inserten, no se recomienda su uso, pues se puede igualar y mejorar la experiencia

mediante el uso de HTML y JavaScript, e incluso muchos efectos ya se pueden

aplicar a partir de CSS3.

A inicios de la decada de los 2000, las tendencias de diseño web cambiaron de

nuevo, gracias a que la industria notó que Flash no era tan prometedor, y sobre todo

a que las especificaciones para CSS se ampliaron. Ahora no solamente el texto tenía

links, también las imágenes, con el uso de HTML y CSS, nada de Flash ni scripts.

Los matices y tonalidades tipo “neón” o chillantes cayeron en desuso, en favor de

colores más agradables a la vista. Las resoluciones de pantalla y el tamaño de los

elementos recobraron importancia, de nuevo el diseño web se enfocaba en

usabilidad y no en solamente llamar la atención, a la vez que los motores de

búsqueda podían indexar mejor a cada sitio.

La Web 2.0: Tal vez el término “Web 2.0″ suene un poco extremo, pero en verdad

los cambios totales y duraderos del diseño web se comenzaron a ver en esta época,

aproximadamente de 2005 a 2010.Interfaces más bonitas a la vez que permitían alta

usabilidad, la muerte casi total de Flash, el verdadero inicio del SEO y técnicas

cambiantes para posicionar las páginas web (algunas ya en desuso ya que no

favorecían al buen contenido original).

Era la primera vez que conocíamos, o mejor dicho, descubríamos de pies a cabeza

de qué se trataba un diseño web bien hecho, que pensara tanto en usuarios/clientes,

como en buscadores: excelente distribución y tamaño de bloques de contenido,

favorecimiento de HTML, CSS y JavaScript, SEO, fácil uso de páginas web,

experiencia agradable para los usuarios mediante el diseño, y mayor facilidad para

vender un producto/servicio directa, o mejor aún, indirectamente.

Actualidad: Diseño Web Limpio, Minimalista y Adaptable

Fig: 1.4 Muestra el diseño web de la actualidad

¿Creían que era todo? ¡No! Algo que cambió de nuevo la manera de hacer páginas

web, aproximadamente desde 2011, fue el auge de los dispositivos móviles

inteligentes, empezando por los smartphones, después las tablets, y más

recientemente las phablets (smartphones con tamaños de pantalla cercanos a los de

una tablet). Pero en vez de diseñar por separado un sitio para escritorios y otro para

móviles, llegó una tendencia -o técnica- llamada diseño adaptable, que consiste en

un solo sitio (idealmente un solo HTML y un solo CSS) en que, dependiendo del

tamaño de la ventana, el contenido se acomoda a su tamaño.

Esto permite utilizar imágenes del ancho completo de la pantalla, y aunado a ello,

permitió que surgiera un diseño web minimalista, en parte propiciado por el tamaño

tan pequeño de las pantallas y la dificultad para presionar botones pequeños en

páginas web. En esta ocasión los botones y los bloques se han tornado en

elementos de mayor tamaño, menos tridimensionales y más cuadrados, con colores

y apariencias muy limpias, uso de simples líneas para íconos, así como texto

integrado en las imágenes, algo simplemente hermoso a la vista, y que permite

visualizar el contenido importante de manera muy fácil.

Estas técnicas aún se encuentran en evolución, y bien podría sorprendernos lo que

se genere en los próximos años. Sin duda el panorama cambiante de dispositivos

que, entre otras cosas, se utilizan para navegar la web -incluyendo la muy anticipada

por expertos muerte de la PC- jugará un papel muy importante en el futuro del diseño

web.