DISEO DE LA WED

El diseo web es una actividad que consiste en la planificacin, diseo, implementacin y

mantenimiento de sitios web. No es simplemente la implementacin del diseo convencional
ya que se abarcan diferentes aspectos como el grfico web; diseo de interfaz y experiencia
de usuario, como la navegabilidad, interactividad, usabilidad, arquitectura de la informacin;
interaccin de medios, entre los que podemos
mencionar audio, texto, imagen, enlaces, video y la optimizacin de motores de bsqueda. A
menudo muchas personas trabajan en equipos que cubren los diferentes aspectos del
proceso de diseo, aunque existen algunos diseadores independientes que trabajan solos. 1
El diseador web comprende perfectamente que el sitio online no es solo "no faltar en la web",
sino una herramienta que se alinea perfectamente con los lineamientos culturales de la
entidad que representa... La unin de un buen diseo con una jerarqua bien elaborada de
contenidos, aumenta la eficiencia de la web como canal de comunicacin e intercambio de
datos, que brinda posibilidades como el contacto directo entre el productor y el consumidor de
contenidos.
El diseo web ha visto amplia aplicacin en los sectores comerciales de Internet
especialmente en la World Wide Web. A menudo la web se utiliza como medio de expresin
plstica en s. Artistas y creadores hacen de las pginas en Internet un medio ms para
ofrecer sus producciones y utilizarlas como un canal ms de difusin de su obra.

DISEO WED APLICADO: El diseo de pginas web es la construccin de documentos

de hipertexto para su visualizacin en diferentes navegadores. As como asignarle una
presentacin para diferentes dispositivos de salida (en una pantalla de computador, en papel,
en un telfono mvil, etc.).
Estos documentos o pginas web pueden ser creados:

Creando archivos de texto en HTML, Asp, Aspx, JavaScript, JSP, Python, Ruby.

Utilizando un programa visual WYSIWYG o WYSIWYM de creacin de pginas.

Utilizando lenguajes de programacin del lado servidor, para generar la pgina web.

ETAPAS: Para el diseo de pginas web debemos tener en cuenta tres etapas:
1. El diseo visual de la informacin que se desea editar. En esta etapa se trabaja
distribuyendo el texto, los grficos, los vnculos a otros documentos y otros
objetos multimedia que se consideren pertinentes. Es importante que antes de
'escribir' la pgina web se realice un boceto o pre diseo. Esto facilitar tener un orden
claro sobre el diseo.
2. Estructura y relacin jerrquica de las pginas del sitio web. Para esto, y
fundamentalmente para manejar los vnculos entre documentos, se cre el lenguaje
de marcacin de hipertexto o HTML. Los enlaces que aparecen subrayados en este
documento y otros de Wikipedia son ejemplos de hipertexto, puesto que al pulsar
sobre ellos conducen a otras pginas con informacin relacionada. La importancia de
la estructura y arborescencia web radica en que los usuarios no siempre entran por la
pgina principal o inicial y en ese caso el sitio debe darle la respuesta a lo que busca
rpido, adems permitirle navegar por el sitio.
3. Posicionamiento en buscadores o SEO. sta consiste en optimizar la estructura del
contenido para mejorar la posicin en que aparece la pgina en determinada

bsqueda. Etapa no gustosa por los diseadores grficos, porque a diferencia del
texto, an para el ao 2014 no se pueden tener nuevos resultados en los buscadores
con sitios muy grficos.
El HTML consta de una serie de elementos que estructuran el texto y son presentados en
forma de hipertexto por agente de usuario o navegadores. Esto se puede hacer con un
simple editor de textos (debe guardarse como texto plano, sin ningn tipo de formato y con
extensin .html o .htm). Aprender HTML es relativamente fcil, as que es sencillo crear
pginas web de este modo. Esta era la nica manera de generarlas hasta que aparecieron, a
mediados de 1996, algunos editores visuales de HTML, como MS FrontPage y Adobe
Dreamweaver. Con estas herramientas no es necesario aprender HTML (aunque s
aconsejable), con lo cual el desarrollador se concentra en lo ms importante, el diseo del
documento.
Un buen diseo web es aquel que considera dentro de su desarrollo tanto los elementos
bsicos del diseo grfico (la diagramacin, el color, los grficos y las fuentes) como los
fundamentos tcnicos (estructura, compatibilidad, funcionalidad e interactividad) para crear
tanto el impacto visual como la experiencia de usuario ptima para la asimilacin del
contenido.

FUNDAMENTOS: El diseo web implica conocer cmo se deben utilizar cada uno de los
elementos permitidos en el HTML, es decir, hacer un uso correcto de este lenguaje dentro de
los estndares establecidos por la W3C y en lo referente a la web semntica. Debido a la
permisibilidad de algunos navegadores web como Internet Explorer, esta premisa original se
ha perdido. Por ejemplo, este navegador permite que no sea necesario cerrar las etiquetas del
marcado, utiliza cdigo propietario, etc. Esto impide que ese documento web sea universal e
independiente del medio que se utilice para ser mostrado.
La web semntica, por otra parte, aboga por un uso lgico de los elementos segn el
significado para el que fueron concebidas. Por ejemplo se utilizar el elemento <P> para
marcar prrafos, y <TABLE> para tabular datos (nunca para disponer de manera visual los
diferentes elementos del documento). En su ltima instancia, esto ha supuesto una autntica
revolucin en el diseo web puesto que apuesta por separar totalmente el contenido del
documento de la visualizacin.
De esta forma se utiliza el documento HTML nicamente para contener, organizar y
estructurar la informacin y las hojas de estilo CSS para indicar como se mostrar dicha
informacin en los diferentes medios (como por ejemplo, una monitor de computadora, un
telfono mvil, impreso en papel, leda por un sintetizador de voz, etc.). Por lgica, esta
metodologa beneficia enormemente la accesibilidad del documento.
Tambin existen pginas dinmicas, las cuales permiten interaccin entre la web y el visitante,
proporcionndole herramientas tales como buscadores, chat, foros, sistemas de encuestas,
etc. y poseen de un panel de control de administracin de contenidos. Este permite crear,
actualizar y administrar cantidades ilimitadas de contenido en la misma.

ACCESIBILIDAD: El diseo web debe seguir unos requerimientos mnimos

de accesibilidad web que haga que sus sitios web o aplicaciones puedan ser visitados por el
mayor nmero de personas. Para conseguir estos objetivos de accesibilidad se han
desarrollado pautas como las del W3C: Pautas de accesibilidad al contenido Web 1.0 WCAG.

HISTORIA: En un principio era 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 ms significativa, pero tambin
debemos mencionar el vdeo 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.2 Estadsticas (2005) nos afirmaban que la cantidad de

sitios web ronda los 8.000 millones de sitios, a los que diariamente se les suma a raz de 4400
por da.3
Rpidamente, su importancia alcanzar las mismas cuotas 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 fidelizar
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.

HTML 5: La ltima versin de este lenguaje bsico corresponde al HTML5, donde se

introducen nuevos elementos que mejoran la navegacin y la usabilidad de los sitios web en
los distintos navegadores, como por ejemplo el uso de <canvas>, <video> o <footer>.
Esta nueva versin no se trata solamente de cambiar y eliminar etiquetas. Va mucho ms all.
En todo sitio web hay elementos que se utilizan. El encabezado (header), barras laterales
(sidecar), el pie de pgina (footer), los mens de navegacin, se utilizarn en esta nueva
versin como etiquetas ya establecidas, brindando una mejora en la intuicin para el
desarrollo.
As mismo una de las mayores mejoras es la utilizacin de "Canvas" o marcos de trabajo, que
sirven para utilizar animaciones sin necesidad de instalar plugins ni usar un reproductor Adobe
Flash para videos web, estndar considerado d facto. Esta opcin es un gran avance, ya que
Flash tiene grandes desventajas en los grficos web, como que losmotores de bsqueda no
puedan leer el texto dentro, que pesan mucho y tardan en cargar. Al implementarse con
canvas, se usar nicamente cdigo JavaScript, aligerando el peso de la pgina.
Tambin quedan obsoletos algunos elementos del HTML 4, razn por la cual es conveniente
repasar acerca de las novedades que incluye HTML5, cuyo lenguaje es regulado por W3C.