El dise�o web es una actividad que consiste en la planificaci�n, dise�o,

implementaci�n y mantenimiento de sitios web. No es simplemente la implementaci�n

del dise�o convencional ya que se abarcan diferentes aspectos como el dise�o
gr�fico web, dise�o de interfaz y experiencia de usuario, como la navegabilidad,
interactividad, usabilidad, arquitectura de la informaci�n; interacci�n de medios,
entre los que podemos mencionar audio, texto, imagen, enlaces, video y la
optimizaci�n de motores de b�squeda. A menudo muchas personas trabajan en equipos
que cubren los diferentes aspectos del proceso de dise�o, aunque existen algunos
dise�adores independientes que trabajan solos.

La uni�n de un buen dise�o con una jerarqu�a bien elaborada de contenidos, aumenta
la eficiencia de la web como canal de comunicaci�n e intercambio de datos, que
brinda posibilidades como el contacto directo entre el productor y el consumidor de
contenidos.

El dise�o web ha visto amplia aplicaci�n en los sectores comerciales de Internet

especialmente en la World Wide Web. A menudo la web se utiliza como medio de
expresi�n pl�stica en s�. Artistas y creadores hacen de las p�ginas en Internet un
medio m�s para ofrecer sus producciones y utilizarlas como un canal m�s de difusi�n
de su obra.

�ndice
1 Dise�o web aplicado
2 Etapas
2.1 Fundamentos
2.2 Accesibilidad
3 Historia
4 HTML 5
5 CMS
6 Dise�o web adaptable
7 V�ase tambi�n
8 Referencias
9 Enlaces externos
Dise�o web aplicado
El dise�o de p�ginas web es la construcci�n de documentos de hipertexto para su
visualizaci�n en diferentes navegadores. As� como asignarle una presentaci�n para
diferentes dispositivos de salida (en una pantalla de computador, en papel, en un
tel�fono m�vil, etc).

Estos documentos o p�ginas web pueden ser creadas:

Creando archivos de texto en HTML, Asp, Aspx, JavaScript, JSP, Python, Ruby.
Utilizando un programa visual WYSIWYG o WYSIWYM de creaci�n de p�ginas.
Utilizando Script del lado del servidor, para generar la p�gina web.
Etapas
Para el dise�o de p�ginas web debemos tener en cuenta tres etapas:

El dise�o visual de la informaci�n que se desea editar. En esta etapa se trabaja

distribuyendo el texto, los gr�ficos, los v�nculos a otros documentos y otros
objetos multimedia que se consideren pertinentes. Es importante que antes de
'escribir' la p�gina web se realice un boceto o predise�o. Esto facilitar� tener un
orden claro sobre el dise�o.
Estructura y relaci�n jer�rquica de las p�ginas del sitio web. Para esto, y
fundamentalmente para manejar los v�nculos entre documentos, se cre� el lenguaje de
marcaci�n 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 p�ginas con informaci�n relacionada. La importancia de
la estructura y arborescencia web radica en que los usuarios 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.
Posicionamiento en buscadores o SEO: consiste en optimizar la estructura del
contenido para mejorar la posici�n en que aparece la p�gina en los motores de
b�squeda web por una o varias palabras clave.
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 ning�n tipo de
formato y con extensi�n .html o .htm). Aprender HTML es relativamente f�cil, as�
que es sencillo crear p�ginas 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 m�s importante, el dise�o del documento.

Un buen dise�o web es aquel que considera dentro de su desarrollo tanto los
elementos b�sicos del dise�o gr�fico (la diagramaci�n, el color, los gr�ficos y las
fuentes) como los fundamentos t�cnicos (estructura, compatibilidad, funcionalidad e
interactividad) para crear tanto el impacto visual como la experiencia de usuario
�ptima para la asimilaci�n del contenido.

Fundamentos
El dise�o web implica conocer c�mo se deben utilizar cada uno de los elementos
permitidos en el HTML, es decir, hacer un uso correcto de este lenguaje dentro de
los est�ndares establecidos por la W3C y en lo referente a la web sem�ntica. 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 c�digo 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 l�gico de los elementos seg�n el
significado para el que fueron concebidas. Por ejemplo se utilizar� el elemento <P>
para marcar p�rrafos, y <TABLE> para tabular datos (nunca para disponer de manera
visual los diferentes elementos del documento). En su �ltima instancia, esto ha
supuesto una aut�ntica revoluci�n en el dise�o web puesto que apuesta por separar
totalmente el contenido del documento de la visualizaci�n.

De esta forma se utiliza el documento HTML �nicamente para contener, organizar y

estructurar la informaci�n y las hojas de estilo CSS para indicar como se mostrar�
dicha informaci�n en los diferentes medios (como por ejemplo, una monitor de
computadora, un tel�fono m�vil, impreso en papel, le�da por un sintetizador de voz,
etc.). Por l�gica, esta metodolog�a beneficia enormemente la accesibilidad del
documento.

Tambi�n existen p�ginas din�micas, las cuales permiten interacci�n entre la web y
el visitante, proporcion�ndole herramientas tales como buscadores, chat, foros,
sistemas de encuestas, etc. y poseen de un panel de control de administraci�n de
contenidos. Este permite crear, actualizar y administrar cantidades ilimitadas de
contenido en la misma.

Accesibilidad
El dise�o web debe seguir unos requerimientos m�nimos de accesibilidad web que haga
que sus sitios web o aplicaciones puedan ser visitados por el mayor n�mero 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.a

Historia
En un principio era 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 m�s significativa,
pero tambi�n debemos mencionar el v�deo 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.1? Estad�sticas (2005) nos afirmaban
que la cantidad de sitios web ronda los 8000 millones de sitios, a los que
diariamente se les suma a ra�z de 4400 por d�a.

R�pidamente, su importancia alcanzar� las mismas cuotas que la televisi�n o el

tel�fono. Datos recientes estiman que hay alrededor de dos mil millones de p�ginas
colgadas y se espera que en los pr�ximos a�os llegue a los ocho 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 fidelizar 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.

HTML 5
La �ltima versi�n de este lenguaje b�sico corresponde al HTML5, donde se introducen
nuevos elementos que mejoran la navegaci�n y la usabilidad de los sitios web en los
distintos navegadores, como por ejemplo el uso de <header>, <canvas>, <video>,
<section>, <article>, <nav> y <footer>2?.

Esta nueva versi�n no se trata solamente de cambiar y eliminar etiquetas. Va mucho

m�s all�.

En todo sitio web hay elementos que se utilizan. El encabezado (header), barras
laterales (sidebars), el pie de p�gina (footer), los men�s de navegaci�n (nav), se
utilizar�n en esta nueva versi�n como etiquetas ya establecidas, brindando una
mejora en la intuici�n para el desarrollo.

As� mismo una de las mayores mejoras es la utilizaci�n 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, est�ndar considerado de facto.
Esta opci�n es un gran avance, ya que Flash tiene grandes desventajas en los
gr�ficos web, como que los motores de b�squeda no puedan leer el texto dentro, que
pesan mucho y tardan en cargar. Al implementarse con canvas, se usar� �nicamente
c�digo Javascript, aligerando el peso de la p�gina.

Tambi�n quedan obsoletos algunos elementos del HTML 4, raz�n por la cual es
conveniente repasar acerca de las novedades que incluye HTML5, cuyo lenguaje es
regulado por W3C.

CMS
Los CMS o sistema de gesti�n de contenido son plataformas web que estandarizan
procesos y que permiten a los usuarios que no poseen mucho conocimiento t�cnico en
lenguaje de programaci�n crear y maquetar contenido f�cilmente para su pagina web a
trav�s de un backend o gestor de contenido . Entre los CMS m�s completos y famosos
del mercado encontramos a Wordpress y Joomla. Detr�s de varios CMS existe una gran
comunidad de desarrolladores de complementos o plugins que realizar trabajos
espec�ficos como administraci�n de contenido. Estas plataformas son famosas por la
versatilidad de dise�os que se pueden implementar a trav�s de plantillas. Lo cual
por su parte abarata los costos de realizaci�n de la p�gina, ya que se elimina un
eslab�n de la cadena de publicaci�n, el maquetador, y agrega la capacidad de
replicar contenido con facilidad.

El lenguaje de programaci�n utilizado normalmente por estas plataformas es PHP,

HMTL5, CSS Java Script y JQuery. El usuario puede tener acceso a la programaci�n
del sitio, lo cual vuelve muy vers�tiles a estas plataformas de creaci�n de
contenido web. Son bastante escalables por su estandarizaci�n de contenidos y su
gesti�n din�mica de usuarios y permisos .3?

Dise�o web adaptable

Dise�o-web
El dise�o web adaptable (en ingl�s, responsive, a veces mal adaptado como
�responsivo�) es una filosof�a de dise�o web que tiene como objetivo adaptar una
misma p�gina web a distintos tama�os de pantalla, dispositivos y orientaciones.
Aunque el c�digo HTML que env�a el servidor sea el mismo, la apariencia del sitio
cambiar� de acuerdo con las especificaciones (denominadas media queries) de las
hojas de estilo en cascada CSS.4?

V�ase tambi�n
Dise�o web adaptativo
WAI
World Wide Web Consortium
Accesibilidad web
W3C
Posicionamiento en buscadores
Dominio de Internet
Alojamiento web
Correo corporativo
Referencias
Riojweb. �Historia Web: 1992 con algo menos de 50 webs�. Consultado el 8 de
diciembre de 2014.
�Dise�o web: Definici�n e Historia�. Consultado el 19 de enero de 2016.
�Que es un CMS y su historia�. Consultado el 18 Octubre 2017.
�Responsive Web Design | Search�. Google Developers. Consultado el 17 de diciembre
de 2018.
Enlaces externos