Diseo web

El diseo web es una actividad que consiste en la planificacin, diseo e implementacin de sitios web. No es simplemente una aplicacin de diseo convencional, ya que requiere tener en cuenta la navegabilidad, interactividad, usabilidad,arquitectura de la informacin y la interaccin de medios como el audio, texto, imagen, enlaces y vdeo. La unin de un buen diseo con una erarqua 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 elconsumidor de contenidos. El diseo web !a visto amplia aplicacin en los sectores comerciales de "nternet especialmente en la #orld #ide #eb. $ menudo la web se utili%a como medio de expresin pl&stica en s. $rtistas y creadores !acen de las p&ginas en "nternet un medio m&s para ofrecer sus producciones y utili%arlas como un canal m&s de difusin de su obra.

ndice 'ocultar(
o o o

) *iseo web aplicado ).) Etapas ).+ ,undamentos ).- $ccesibilidad + .istoria - ./0L 1 2 34ase tambi4n

Diseo web aplicado'editar(

El diseo de p&ginas web se trata b&sicamente de reali%ar un documento con informacin !iperenla%ado con otros documentos y asignarle una presentacin para diferentes dispositivos de salida 5en una pantalla de computador, en papel, en un tel4fono mvil, etc6. Estos documentos o p&ginas web pueden ser creadas7

creando arc!ivos de texto en ./0L, 8.8, $sp, $spx, 9ava:cript, 9:8, 8yt!on, ;uby. utili%ando un programa #<:"#<= o #<:"#<0 de creacin de p&ginas. utili%ando lengua es de programacin del lado servidor, para generar la p&gina web.

Etapas'editar(
8ara el diseo de p&ginas web debemos tener en cuenta tres etapas7

). El diseo visual de la informacin que se desea editar. En esta etapa se traba a distribuyendo el texto, los gr&ficos,
los vnculos a otros documentos y otros ob etos multimedia que se consideren pertinentes. Es importante que antes de traba ar sobre el computador se realice un boceto o prediseo sobre el papel. Esto facilitar& tener un orden claro sobre el diseo. +. Estructura y relacin er&rquica de las p&ginas del sitio web. >na ve% que se tiene el boceto se pasa a ?escribir? la p&gina web. 8ara esto, y fundamentalmente para mane ar los vnculos entre documentos, se cre el lengua e de marcacin de !ipertexto o ./0L. Los enlaces que aparecen subrayados en este documento y otros de #i@ipediason e emplos de !ipertexto, puesto que al pulsar sobre ellos conducen a otras p&ginas con informacin relacionada. La importancia de la estructura y arborescencia web radica en que los visitantes no siempre entran por la p&gina principal o inicial y en ese caso el sitio debe darle la respuesta a lo que busca r&pido, adem&s permitirle navegar por el sitio.

-. 8osicionamiento en buscadores o :EA. Bsta consiste en optimi%ar la estructura del contenido para me orar la
posicin en que aparece la p&gina en determinada bCsqueda. Etapa no gustosa por los diseadores gr&ficos, porque a diferencia del texto, aCn para el ao +D)2 no se pueden tener nuevos resultados en los buscadores con sitios muy gr&ficos. El ./0L consta de una serie de elementos que estructuran el texto y son presentados en forma de !ipertexto por agente de usuario o navegadores. Esto se puede !acer con un simple editor de textos 5debe guardarse como texto plano, sin ningCn tipo de formato y con extensin .html o .htm6. $prender ./0L es relativamente f&cil, as que es sencillo crear p&ginas web de este modo. Esta era la Cnica manera de generarlas !asta que aparecieron, a mediados de )EEF, algunos

editores visuales de ./0L, como MS FrontPage y Adobe Dreamweaver. Gon estas !erramientas no es necesario aprender ./0L 5aunque s aconse able6, con lo cual el desarrollador se concentra en lo m&s importante, el diseo del documento. /odo esto teniendo en cuenta el nivel de programacin en el diseo de las aplicaciones y del impacto visual que se quiere generar en el usuario.

Fundamentos'editar(
>n correcto diseo web implica conocer cmo se deben utili%ar cada uno de los elementos permitidos en el ./0L, es decir, !acer un uso correcto de este lengua e dentro de los est&ndares establecidos por la #-G y en lo referente a la web sem&ntica. *ebido a la permisibilidad de algunos navegadores web como "nternet Explorer, esta premisa original se !a perdido. 8or e emplo, este navegador permite que no sea necesario cerrar las etiquetas del marcado, utili%a cdigo propietario, etc. Esto impide que ese documento web sea universal e independiente del medio que se utilice para ser mostrado. La web sem&ntica, por otra parte, aboga por un uso lgico de los elementos segCn el significado para el que fueron concebidas. 8or e emplo se utili%ar& el elemento <P> para marcar p&rrafos, y <TABLE> para tabular datos 5nunca para disponer de manera visual los diferentes elementos del documento6. En su Cltima instancia, esto !a supuesto una aut4ntica revolucin en el diseo web puesto que apuesta por separar totalmente el contenido del documento de la visuali%acin. *e esta forma se utili%a el documento ./0L Cnicamente para contener, organi%ar y estructurar la informacin y las !o as de estilo G:: para indicar como se mostrar& dic!a informacin en los diferentes medios 5como por e emplo, una monitor de computadora, un tel4fono mvil, impreso en papel, leda por un sinteti%ador de vo%, etc.6. 8or lgica, esta metodologa beneficia enormemente la accesibilidad del documento. /ambi4n existen p&ginas din&micas, las cuales permiten interaccin entre la web y el visitante, proporcion&ndole !erramientas tales como buscadores, c!at, foros, sistemas de encuestas, etc. y poseen de un panel de control de administracin de contenidos. Este permite crear, actuali%ar y administrar cantidades ilimitadas de contenido en la misma.

Accesibilidad'editar(
El diseo web debe seguir unos requerimientos mnimos de accesibilidad web que !aga que sus sitios web o aplicaciones puedan ser visitados por el mayor nCmero de personas. 8ara conseguir estos ob etivos de accesibilidad se !an desarrollado pautas como las del #-G7 8autas de accesibilidad al contenido #eb ).D #G$=.

Historia'editar(
En un principio era slo texto, pero a medida que !a evolucionado la tecnologa, tanto los ordenadores como las redes de telecomunicaciones, se !a generado nuevas formas de desarrollar la web. La inclusin de im&genes fue la m&s significativa, pero tambi4n debemos mencionar el vdeo y la animacin, o los espacios -*, lo que aporta valores estilsticos, de diseo y de interactividad am&s imaginados antes. El diseo de p&ginas web se !a desarrollado a medida que !a evolucionado "nternet. En )EE+ slo !aba alrededor de 1D sitios web'cita requerida(. Estadsticas 5+DD16 nos afirmaban que la cantidad de sitios web ronda los H.DDD millones de sitios, a los que diariamente se les suma a ra% de 22DD por da'cita requerida(. ;&pidamente, su importancia alcan%ar& las mismas cuotas que la televisin o el tel4fono. *atos recientes estiman que !ay alrededor de + mil millones de p&ginas colgadas y se espera que en los prximos aos llegue a los H mil millones, excediendo el nCmero de !abitantes del planeta. :in embargo, slo una fraccin de este nCmero es visitado !abitualmente por la mayora de los usuarios 5slo alrededor de )1.DDD sitios webs, el D,2I del total6. $ partir de estos datos se puede entender la necesidad de concentrar los esfuer%os para atraer y mantener la atencin de los usuarios. 9unto 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 fideli%ar a nuevos visitantes. $l mismo tiempo que la evolucin de los aparatos y de su introduccin en los !ogares, tambi4n !a aumentado la calidad de las transmisiones a trav4s "nternet y !a ba ado su precio. $ medida que la tecnologa !a solventado estas dificultades, ya no nos encontramos con problemas de forma sino de contenido.

HTML 5'editar(
La Cltima versin de este lengua e b&sico corresponde al ./0L1, donde se introducen nuevos elementos que me oran la navegacin y la usabilidad de los sitios web en los distintos navegadores, como por e emplo el uso de JcanvasK, JvideoK o JfooterK. Esta nueva versin no se trata solamente de cambiar y eliminar etiquetas. 3a muc!o m&s all&. En todo sitio web !ay elementos que se utili%an. El encabe%ado 5!eader6, barras laterales 5sidebars6, el pie de p&gina 5footer6, los menCs de navegacin, se utili%ar&n en esta nueva versin como etiquetas ya establecidas, brindando una me ora en la intuicin para el desarrollo. $s mismo una de las mayores me oras es la utili%acin de LGanvasL o marcos de traba o, que sirven para utili%ar animaciones sin necesidad de instalar plugins ni usar un reproductor $dobe ,las! para videos web, est&ndar consideradode facto. Esta opcin es un gran avance, ya que ,las! tiene grandes desventa as en los gr&ficos web, como que losmotores de bCsqueda no puedan leer el texto dentro, que pesan muc!o y tardan en cargar. $l implementarse con canvas, se usar& Cnicamente cdigo 9avascript, aligerando el peso de la p&gina. /ambi4n quedan obsoletos algunos elementos del ./0L 2, ra%n por la cual es conveniente repasar acerca de las novedades que incluye ./0L1, cuyo lengua e es regulado por #-G.

Vase tambin'editar(

*iseo web adaptativo

#$" #orld #ide #eb Gonsortium $ccesibilidad web #-G