CAPTULO l

DISEO DE PGINAS WEB

CAPTULO l
DISEO DE PAGINAS WEB

1.1 DEFINICIONES DE WEB Y HTML.

La World Wide Web, ms conocida comnmente con Web, es una de las reas
de internet que se ha desarrollado ms rpidamente. Naci en 1989, como parte
de un proyecto del CERN de suiza y con el objetivo de mejorar el intercambio de
informacin dentro de internet, y vea en lo que se ha convertido actualmente
De ser un lugar en el que se poda encontrar informacin, ha pasado a ser un
gran centro comercial. En muy pocos aos, 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 compaas que realizan sus negocios exclusivamente atravez de la web,
como por ejemplo la dedicada a la venta de libros www.amazon.com.
Crear una pgina Web es muy sencillo y, una vez instalada la red, queda
disponible para que puedan verla los millones de usuarios en internet. Para una
compaa representa una importante estrategia de marketing y una magnfica

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

bienvenida a una enorme audiencia.
La informacin de la World Wide Web est contenida en las pginas Web. La
primera pgina es la que se suele llamar homes page, o pagina de presentacin,
y es desde la que se da referencia a todas las dems que forman parte de un
sitio. Una pgina 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 pgina de internet tambin tiene una direccin. Esta
direccin es el URL (Uniform Resource Locator) y gracias a ella todo el mundo
puede acceder a la pgina Web. El esquema exacto del nombre de la pgina
Web se puede anunciar en el administrador de la Web o en el proveedor de
servicios. Normalmente, suele contener la direccin de una organizacin y a
continuacin un identificador. Por ejemplo, la pagina de presentacin del autor de
este libro, cuyo proveedor de servicios es Claranet, puede encontrarse en la
direccin 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 pginas Web en pantalla, y hoy
existen un gran nmero de ellos, y los ms 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 pginas Web estn 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 bsicamente en la
creacin de pginas 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 despus en
el navegador. As, Qu es HTML? Es un sistema de escritura que comprende
etiquetas, siendo una etiqueta una instruccin contenida entre corchetes

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

documento en lenguaje HTLM. La inmensa mayora de las etiquetas contienen
tambin una etiqueta de cierre, por ejemplo </HTML> define el final del
documento.
HTML, de Hyper Text Markeup Language, es el mtodo ms 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 DISEO DE PAGINAS WEB.

En un principio las pginas Web eran slo texto, pero a medida que ha evolucionado
la tecnologa, tanto los ordenadores como las redes de telecomunicaciones, se ha
generado nuevas formas de desarrollar la Web.

La inclusin de imgenes fue la evolucin ms significativa, pero tambin debemos

mencionar el video y la animacin, o los espacios 3D, lo que aporta valores
estilsticos, de diseo y de interactividad jams imaginados antes.

El diseo de pginas Web se ha desarrollado a medida que ha evolucionado Internet.

En 1992 slo haba alrededor de 50 sitios Web. Las ltimas estadsticas nos

confirmaban que actualmente rondan los 8.000 millones de sitios Web, a los que
diariamente se les suma a raz de 4400 por da.

Rpidamente, su importancia alcanzar las mismas cotas que la televisin o el

telfono. Datos recientes estiman que hay alrededor de 2 mil millones de pginas
colgadas y se espera que en los prximos aos llegue a los 8 mil millones,
excediendo el nmero de habitantes del planeta. Sin embargo, slo una fraccin de
este nmero es visitado habitualmente por la mayora de los usuarios (slo 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 atencin de los usuarios. Junto con un desarrollo efectivo
de la estructura Web y del contenido, el diseo y el uso del color son la llave para
atraer y ser identificado, formando vnculos en el subconsciente del usuario y generar
esquemas para captar y fidelidad a nuevos visitantes.

Al mismo tiempo que la evolucin de los aparatos y de su introduccin en los

hogares, tambin ha aumentado la calidad de las transmisiones a travs internet y ha

bajado su precio. A medida que la tecnologa ha solventado estas dificultades, ya no

nos encontramos con problemas de forma sino de contenido.

1.3 EVOLUCIN DEL HTML.

El HTML tiene su origen en el trabajo de

team bearner Lee en el CERN

(Laboratorio Europeo de partculas fsicas) de ginebra en 1989.

En poco tiempo y en buena

medida gracias a la popularizacin 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 estndar por la IETF (internet Engineering Task Force) la siguiente versin
HTML 3 o HTML +, no llego a convertirse en una recomendacin oficial en este
camino el HTML se haba alejado de su filosofa original la clara distincin entre
descripcin del contenido y presentacin. El Web haba salido del circulo originario,
la distribucin de documentos entre la comunidad cientfica y se haba convertido en
un fenmeno sociolgico mundial. Los autores de pgina 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 tcnicas y trucos de diseo para mejorar la
presentacin Visual de los documentos.

La Existencia de un estndar es de importancia capital dado que los programas

navegadores se desarrollan implementando una versin determinada de HTML. Si
proliferan las versiones no normalizadas los fabricantes les aaden 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 sucesin de versiones estandarizadas el
navegador que implementa una determinada versin no podr interpretar los
componentes aadidos a las versiones posteriores.

Los navegadores se crean previendo esta evolucin en el sentido que ignoran los
componentes nuevos para los que no estn preparados as la legibilidad mnima de
un documento creado de acuerdo a una determinacin versin estar garantizada
aunque se utiliza para presentarlo un navegador que implementa una versiona
anterior o posterior . Esta compatibilidad, junto a la orientacin a la descripcin del
contenido y ala inclusin por parte de los fabricantes de extensiones propietarias
explica las diferencias
diversos navegadores.

que encontramos a visualizar un mismo documento por

Fig: 1.2 Muestra como es el diseo de HTML.

Evolucion de diseo web: 1991 fue el ao en que se public la primera pgina web,
publicada por Tim Bernecs-Lee, fsico britnico quien es considerado uno de los
padres de la Web. Dicho sitio tena como nico fin informar qu era la World Wide
Web. Hoy, ms de 20 aos despus, existen muchos ms usos para la web, y el
diseo de las pginas ha cambiado considerablemente, desde uno prcticamente
inexistente en sus inicios, hasta las ms nuevas tcnicas donde est ganando
terreno el diseo adaptable. Sin embargo, de cada poca del diseo web podemos
rescatar

algo,

ya

sea

extremadamente

bueno

(que

debemos

usar),

extremadamente malo (a evitar totalmente), para un mejor avance de estas tcnicas

en la actualidad.

Fig: 1.3 Muestra el primer diseo web

En 1996 no solamente se introdujo el lenguaje CSS, tambin Flash, aunque este no

gan popularidad sino hasta 1998. La razn por la que comenz a ser utilizado cada
vez ms en diseo web, fue que CSS y HTML no eran tan poderosos para generar
grficos que para ese entonces no tenan precedentes, como formas redondeadas,
que cambiaban de color, con efecto tridimensional mediante el manejo de
tonalidades.

Sin embargo, al utilizarlo en exceso (como suceda con los GIFs), la experiencia de
usuario iba en detrimento y este se confunda, entre pginas splash y sitios web mal
optimizados visualmente, e incluso tan pesados que podan llegar a consumir todo el
ancho de banda (que an 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 diseados puramente en Flash difcilmente aparezcan en los
resultados de bsqueda. Actualmente, a pesar de que se puede optimizar Flash para
efectos de SEO por medio de tcnicas como dividir el archivo flash en varios
pequeos 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 diseo 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 tena
links, tambin las imgenes, con el uso de HTML y CSS, nada de Flash ni scripts.
Los matices y tonalidades tipo nen o chillantes cayeron en desuso, en favor de
colores ms agradables a la vista. Las resoluciones de pantalla y el tamao de los

elementos recobraron importancia, de nuevo el diseo web se enfocaba en

usabilidad y no en solamente llamar la atencin, a la vez que los motores de
bsqueda podan indexar mejor a cada sitio.

La Web 2.0: Tal vez el trmino Web 2.0 suene un poco extremo, pero en verdad
los cambios totales y duraderos del diseo web se comenzaron a ver en esta poca,
aproximadamente de 2005 a 2010.Interfaces ms bonitas a la vez que permitan alta
usabilidad, la muerte casi total de Flash, el verdadero inicio del SEO y tcnicas
cambiantes para posicionar las pginas web (algunas ya en desuso ya que no
favorecan al buen contenido original).

Era la primera vez que conocamos, o mejor dicho, descubramos de pies a cabeza
de qu se trataba un diseo web bien hecho, que pensara tanto en usuarios/clientes,
como en buscadores: excelente distribucin y tamao de bloques de contenido,
favorecimiento de HTML, CSS y JavaScript, SEO, fcil uso de pginas web,
experiencia agradable para los usuarios mediante el diseo, y mayor facilidad para
vender un producto/servicio directa, o mejor an, indirectamente.

Actualidad: Diseo Web Limpio, Minimalista y Adaptable

Fig: 1.4 Muestra el diseo web de la actualidad

Crean que era todo? No! Algo que cambi de nuevo la manera de hacer pginas
web, aproximadamente desde 2011, fue el auge de los dispositivos mviles
inteligentes,

empezando

por

los smartphones,

despus

las tablets,

ms

recientemente las phablets (smartphones con tamaos de pantalla cercanos a los de

una tablet). Pero en vez de disear por separado un sitio para escritorios y otro para
mviles, lleg una tendencia -o tcnica- llamada diseo adaptable, que consiste en
un solo sitio (idealmente un solo HTML y un solo CSS) en que, dependiendo del
tamao de la ventana, el contenido se acomoda a su tamao.

Esto permite utilizar imgenes del ancho completo de la pantalla, y aunado a ello,
permiti que surgiera un diseo web minimalista, en parte propiciado por el tamao
tan pequeo de las pantallas y la dificultad para presionar botones pequeos en
pginas web. En esta ocasin los botones y los bloques se han tornado en
elementos de mayor tamao, menos tridimensionales y ms cuadrados, con colores
y apariencias muy limpias, uso de simples lneas para conos, as como texto
integrado en las imgenes, algo simplemente hermoso a la vista, y que permite
visualizar el contenido importante de manera muy fcil.

Estas tcnicas an se encuentran en evolucin, y bien podra sorprendernos lo que

se genere en los prximos aos. 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 diseo
web.