You are on page 1of 18

CONCEPTOS BASICOS

DE DISEO WEB
Material recopilado por
Lic. Alejandra Ruiz Moreno

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 video.
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.

Para ver ms:


http://es.wikipedia.org/wiki/Dise%C3%B1o_web
http://es.wikipedia.org/wiki/World_Wide_Web_Consortium

DISEO WEB APLICADO

2. Estructura y relacin jerrquica de las pginas del sitio web. Una


vez que se tiene el boceto se pasa a escribir la pgina web. Para esto,

El diseo de pginas web se trata bsicamente de realizar un documen-

y fundamentalmente para manejar los vnculos entre documentos, se

to con informacin hiperenlazado con otros documentos y asignarle cre el lenguaje de marcacin de hipertexto o HTML. Los enlaces que
una presentacin para diferentes dispositivos de salida (en una panta-

aparecen subrayados en este documento y otros de Wikipedia son

lla de computadora, en papel, en un telfono mvil, etc).

ejemplos de hipertexto, puesto que al pulsar sobre ellos conducen a

Estos documentos o pginas web pueden ser creados:

otras pginas con informacin relacionada. La importancia de la estruc-

A partir de archivos de texto en HTML, PHP, Asp, Aspx, JavaScript, JSP, tura y arborescencia web radica en que los visitantes no siempre entran
Python, Ruby.

por la pgina principal o inicial y en ese caso el sitio debe darle la res-

Utilizando un programa WYSIWYG o WYSIWYM de creacin de pginas.

puesta a lo que busca rpido, adems de permitirle navegar por el sitio.

Utilizando lenguajes de programacin del lado servidor, para generar

3. Posicionamiento en buscadores o SEO. sta consiste en optimizar

la pgina web.

la estructura del contenido para mejorar la posicin en que aparece la


pgina en determinada bsqueda. Etapa no gustosa por los diseado-

Etapas

res grficos, porque a diferencia del texto, no se pueden tener buenos

Para el diseo de pginas web debemos tener en cuenta tres etapas:

resultados en los buscadores con sitios muy grficos.

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

El HTML consta de una serie de elementos que estructuran el texto y

documentos y otros objetos multimedia que se consideren pertinentes.

son presentados en forma de hipertexto por agente de usuario o na-

Es importante que, antes de trabajar en la computadora, se realice un

vegadores. Esto se puede hacer con un simple editor de textos (debe

boceto o prediseo sobre papel. Esto facilitar tener un orden claro

guardarse como texto plano, sin ningn tipo de formato y con extensin

sobre el diseo.

html o htm). Aprender HTML es relativamente fcil, as que es sencillo

crear pginas web de este modo. Esta era la nica manera de generar La web semntica, por otra parte, aboga por un uso lgico de los elepginas hasta que aparecieron, a mediados de 1996, algunos editores mentos segn el significado para el que fueron concebidas. Por ejemvisuales de HTML, como MS FrontPage y Adobe Dreamweaver. Con es-

plo se utilizar el elemento <P> para marcar prrafos, y <TABLE> para

tas herramientas no es necesario aprender HTML (aunque s aconseja-

tabular datos (nunca para disponer de manera visual los diferentes ele-

ble), con lo cual el desarrollador se concentra en lo ms importante, el

mentos del documento). En su ltima instancia, esto ha supuesto una

diseo del documento.

autntica revolucin en el diseo web puesto que apuesta por separar


totalmente el contenido del documento de la visualizacin.

Todo esto teniendo en cuenta el nivel de programacin en el diseo


de las aplicaciones y del impacto visual que se quiere generar en el

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

usuario.

organizar y estructurar la informacin y las hojas de estilo CSS para


indicar como se mostrar dicha informacin en los diferentes medios

Fundamentos

(como por ejemplo, un monitor de computadora, un telfono mvil, la

Un correcto diseo web implica conocer cmo se deben utilizar cada

impresin en un papel, la lectura por un sintetizador de voz, etc.). Por

uno de los elementos permitidos en el HTML, es decir, hacer un uso

lgica, esta metodologa beneficia enormemente la accesibilidad del

correcto de este lenguaje dentro de los estndares establecidos por la documento.


W3C y en lo referente a la web semntica. Debido a la permisibilidad
de algunos navegadores web como Internet Explorer, esta premisa ori-

Tambin existen pginas dinmicas, las cuales permiten interaccin

ginal se ha perdido. Por ejemplo, este navegador permite que no sea

entre la web y el visitante, proporcionndole herramientas tales como

necesario cerrar las etiquetas del marcado, utiliza cdigo propietario, buscadores, chat, foros, sistemas de encuestas, etc. y poseen un panel
etc. Esto impide que ese documento web sea universal e independiente de control de administracin de contenidos, que permite crear, actualidel medio que se utilice para ser mostrado.

zar y administrar cantidades ilimitadas de contenido.

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.

Para ver ms:


http://es.wikipedia.org/wiki/Dise%C3%B1o_web

DISEo WEB ADAPTABLE

mao de pantalla, resolucin, potencia de CPU, capacidad de memoria,


etc. Esta tecnologa pretende que con un solo diseo web tengamos
una visualizacin adecuada en cualquier dispositivo.

Para ver ms:


http://es.wikipedia.org/wiki/Dise%C3%B1o_web_adaptativo

El diseo web adaptable o adaptativo, conocido por las siglas RWD


(del ingls, Responsive Web Design) es una filosofa de diseo y desarrollo cuyo objetivo es adaptar la apariencia de las pginas web al
dispositivo que se est utilizando para visualizarla. Hoy da las pginas
web se visualizan en multitud de tipos de dispositivos como tablets,
smartphones, libros electrnicos, porttiles, PCs,... Adems, an dentro
de cada tipo, cada dispositivo tiene sus caractersticas concretas: Ta-

Tamaos de sitios web

En muchas ocasiones se toma un tamao mnimo como base para el


diseo inicial y a pesar de que ya no es el estndar se sigue desarrollando como base el formato mnimo 1024768, ya que no se puede despreciar a un 10-15% de los usuarios (no sucede lo mismo con

800600).

Durante muchos aos el desarrollo web se ha basado en la resolucin


estndar de 1024768 (hace apenas 3 aos aproximadamente el 40%

de los usuarios tena esta resolucin). En la actualidad la resolucin


ms utilizada en Internet es la de 1366768, que es la resolucin estndar de Windows 8.

Estadsticas de las resoluciones de pantalla ms usadas en Internet (las


fuentes de datos coinciden en su tendencia):

Es fundamental tener en cuenta este tamao mnimo de 1024768 para


la usabilidad y el primer impacto del usuario. Cmo las barras de navegacin y scrolls tienen un tamao, el rea visible y til de esta resolucin sera 990580 aproximadamente (muy utilizado en la antigedad

con Flash). Es en esta rea donde se mostrar el primer mensaje, lo


imprescindible del producto, el botn de compra, etc.

Como podemos ver, no hay frmulas aqu, es una decisin que debemos tomar en base a diferentes aspectos, pero sobre todo pensando a
quin est dirigido el sitio, o qu tipo de usuarios lo navegarn.

Para ver ms:


http://www.lostiemposcambian.com/blog/usabilidad/estadisticas-resolucion-de-pantallas-mas-utilizadas-en-la-web/
http://punchcut.com/perspectives/expanding-universe-toolset-managing-screen-resolutions/

Elementos bsicos que debera


tener toda Web

distintos tamaos de tipografas para presentar un concepto, un orden


jerrquico en la organizacin de secciones (las ms importantes, siempre primero) o un correcto uso del color para la atraccin visual del

1. Orientada al Usuario:

usuario, siempre de un modo claro y conciso.

Primero al Usuario (s, las personas que visitaran la pgina Web) y,


como consecuencia, al pblico objetivo. Que en un primer vistazo se

3. Aprovechar el Contenido:

sepa quin eres y qu haces. Puedes apoyarte en elementos creativos

Este es uno de los elementos bsicos que cuesta ms encontrar, ya que

como ilustraciones, colores, fotografas, etc., pero nunca hay que ol-

supone una carga de trabajo extra. Nos referimos a que si una empresa

vidar que si se ha generado una visita, es por algo Tambin en este

tiene un know-how adquirido en algn campo por qu no lo aprovecha

punto es interesante observar que no todas tus visitas sern mediante

tambin en su web? Un contenido relacionado, profesional, actualiza-

Firefox, por ejemplo. Cuidar los detalles segn los navegadores y dis-

do tiene un valor extremadamente alto. Ya sea en formato blog corpo-

positivos debera ser un must!

rativo o en la continua actualizacin de secciones/novedades/ofertas/


etc. No hay nadie mejor que t para vender tu propio producto-servicio.

2. Usabilidad en la Navegacin:
Los usuarios escanean visualmente una Web a una velocidad dema-

4. La famosa conversin:

siado elevada. Son ya famosos los estudios sobre el Tringulo de Oro

Entramos en un elemento clave, la conversin. Primero, ser necesario

en Google (resultado patrocinado y 1-2 resultados naturales), sobre la

definirla: conseguir un nuevo cliente, un nuevo lead, una recomenda-

importancia de las esquinas superiores en la izquierda o sobre el zig- cin, un click a la seccin clave Tiene tanta importancia su definicin
zag de los ojos: los patrones en forma de F. Existen distintos elementos

como su propia consecucin (y anlisis posterior con Google Analytics).

que pueden ayudar a mejorar la Usabilidad en la Navegacin que no

De lo contrario, sera ir a ciegas. Podemos utilizar recursos creativos

deberan quedarse en el olvido. Algunos de ellos podran ser el uso de

que obliguen al cerebro del visitante a prestar un poco ms de atencin

para acabar atrayndolo dnde nos interese. El uso de negritas, cursi- eran 5. El escaneo del usuario es cada vez ms rpido. Entendemos la
vas, imgenes, vdeos, contrastes y, sobretodo, botones, hacen que la Web como un eje principal de todas aquellas acciones de Marketing
conversin ocurra de un modo casi natural y til para el usuario.

Online, como una herramienta propia a la que se le puede sacar mucho


rendimiento, aunque

5. Pensando en los Buscadores:


Si el usuario no te encuentra en los buscadores, tenemos un problema.

7. Tenemos en cuenta las Redes Sociales?

Diseamos para el usuario y programamos para el buscador. Habitual-

Tampoco podemos dejar de lado las herramientas (externas) sociales,

mente, los buscadores generan un porcentaje elevadsimo del total de

como Facebook, Twitter, Youtube, Google+, Pinterest Indudablemen-

visitas, as que ms vale optimizar todos aquellos detalles que generen te, hay que tenerlas presentes y las mostraremos en la Web segn el
una visita de calidad. Es decir, si busco un tipo de servicio concreto, no

grado de importancia que les queramos otorgar. En este punto, es in-

me gustara llegar a la pgina de inicio de un proveedor me gustara

teresante remarcar que, si hemos atrado una visita a nuestra Web, es

llegar directamente hacia aquello que estoy buscando. Todos los ele-

realmente necesario enviarlo a una plataforma externa? Somos par-

mentos internos de la Web deben remar en la misma direccin, deben

tidarios de que una visita a nuestra Web sea ya un objetivo cumplido.

sumar.
Para ver ms:
6. El Primer impacto:

http://www.departamentodeinternet.com/7-elementos-basi-

No tendremos una segunda ocasin de causar un buen primer impacto,

cos-que-deberia-tener-toda-web/

as que hay que cuidar estos detalles. Desde los primeros inputs que
presentamos hasta el tiempo de carga de la Web. Existen distintos estudios que explican que el tiempo de decisin de permanencia en una
Web son 7 segundos. Hace poco sali otro estudio que comentaba que

ETIQUETAS BASICAS DE HTML

<table>...</table>
Define una tablea

<HTML>...</HTML>
Delimita y engloba toda la pgina web, que consta de cabecera y cuerpo. <tr>...</tr>
Define una fila
<HEAD>...</HEAD>
Delimita y engloba la cabecera de una pgina, que contiene un conjun-

<th>...</th>

to de informaciones que no se muestran en la ventana, entre ellas el Define un encabezamiento


ttulo de la pgina, pero que pueden ayudar a los navegadores y a los
buscadores para interpretar o a encontrar correctamente la pgina.

<td>...</td>
Define una celda

<TITLE>...</TITLE>
Dentro de la cabecera (HEAD), lo que se incluye aqu se muestra en la

Formatos de parrafos:

barra del ttulo de la ventana del navegador.

El texto de la pgina se puede estructurar en encabezamientos de los


diferentes apartados de la pgina, que pueden tener distintos niveles

<BODY>...</BODY>

de 1 a 6 (siendo 1 el ms importante) y prrafos normales.

Delimita y engloba el cuerpo de la pgina, que son el conjunto de informaciones (texto e imgenes) que se muestran en la pgina, as como <H1> ... </H1> o <H2> ... </H2> (hasta 6)
las indicaciones de cmo deben mostrarse. Admite atributos.

Prrafos que son encabezamientos (con distintos niveles).

<P>...</P>
Prrafos normales.

<P align=center>...</P>
El atributo align permite alinear el texto del prrafo. Se puede aplicar
igual a las etiquetas <H1>, <H2>, etc ...

<BR>
Permite partir un prrafo empezando una lnea nueva pero sin dejar
espacio.

<HR>
Pone una linea horizontal de separacin. (admite atributos)

<BLOCKQUOTE>...</BLOCKQUOTE>
Sangra el prrafo.

Para ver ms:


http://www.uv.es/cerveron/paginasweb/notashtml.html
http://www.virtualnauta.com/html-etiquetas-basicas

HTML5

Tambin quedan obsoletos algunos elementos del HTML 4, razn por


la cual es conveniente repasar acerca de las novedades que incluye

La ltima versin de este lenguaje bsico corresponde al HTML5, don-

HTML5, cuyo lenguaje es regulado por W3C.

de se introducen nuevos elementos que mejoran la navegacin y la


usabilidad de los sitios web en los distintos navegadores, como por

Para ver ms:

ejemplo el uso de <canvas>, <video> o <footer>.

http://es.wikipedia.org/wiki/Dise%C3%B1o_web

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 (sidebars), 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 de facto. Esta opcin es un gran avance, ya que
Flash tiene grandes desventajas en los grficos web, como que los motores 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.

OPTIMIZAR LAS IMGENES PARA LA WEB

.GIF
Un formato obsoleto, ya prcticamente se utiliza solamente para im-

Por qu optimizar?

genes animadas.

La navegacin mvil. Con datos de 2013, la navegacin mvil supone


un 17,4% de la navegacin total, y la tendencia es a aumentar. Desgra- .PNG
ciadamente la velocidad de las redes 3G o incluso 4G no puede equipa- El sustituto de Gif, porque tambin permite transparencia. Es ideal para
rarse con la banda ancha que tenemos en casa, nuestros usuarios m-

imgenes planas o con grandes espacios blancos, como capturas de

viles nos agradecern que nuestra web no tarde demasiado en cargar.

pantalla, logotipos, etc. PNG es un formato de imagen sin prdidas,

No perder usuarios. Una web lenta y pesada es sinnimo de un por-

por lo que aunque no reduce tanto el tamao como el JPG, la calidad

centaje de rebote muy alto, y por supuesto t no quieres eso. No hagas

siempre ser mayor.

esperar a tus usuarios, optimiza el peso de tu web.


Posicionamiento SEO. Google dispone de un tiempo limitado para

.JPG

rastrear tu web, por lo que cuanto menos pese, ms pginas podr ras- Ideal para fotografas con detalles y muchos colores. Es un formato
trear y tendrs ms posibilidades de posicionarte mejor, ya que adems

de compresin con prdidas, es decir, que pierde calidad para reducir

ahora sabemos que Google da mucha importancia a la velocidad de

el tamao, y con ello pierde nitidez, por lo que pueden aparecer aberra-

carga entre sus factores de posicionamiento.

ciones cromticas en determinadas zonas.

Cmo optimizar?

RESUMEN: En general usaremos PNG para todas las imgenes que

Lo primero es saber elegir el formato de imagen adecuado a tus nece-

componen nuestra web (logotipos, iconos, botones) y JPG slo

sidades. Seguro que alguna vez te has preguntado qu formato elegir:

para las fotografas, sobre todo las grandes.


Adems de estos, cada vez es ms normal utilizar formatos vecto-

riales (.EPS o .SVG) para logotipos e iconos, ya que son totalmente


escalables a todas las resoluciones.

Para ver ms:


http://www.40defiebre.com/optimizar-imagenes-web/

CSS

Cmo funciona?
CSS funciona a base de reglas, es decir, declaraciones sobre el estilo

Qu es CSS?

de uno o ms elementos. Las hojas de estilo estn compuestas por una

Hojas de Estilo en Cascada (Cascading Style Sheets), es un mecanismo

o ms de esas reglas aplicadas a un documento HTML o XML. La regla

simple que describe cmo se va a mostrar un documento en la pantalla, tiene dos partes: un selector y la declaracin. A su vez la declaracin
o cmo se va a imprimir, o incluso cmo va a ser mostrada la informa-

est compuesta por una propiedad y el valor que se le asigne.

cin presente en ese documento a travs de un dispositivo de lectura. Esta forma de descripcin de estilos ofrece a los desarrolladores el

h1 {color: red;}

control total sobre estilo y formato de sus documentos.

h1 es el selector
{color: red;} es la declaracin

Para qu sirve?
CSS se utiliza para dar estilo a documentos HTML y XML, separando el

El selector funciona como enlace entre el documento y el estilo, especi-

contenido de la presentacin. Los Estilos definen la forma de mostrar

ficando los elementos que se van a ver afectados por esa declaracin.

los elementos HTML y XML.

La declaracin es la parte de la regla que establece cul ser el efecto.


En el ejemplo anterior, el selector h1 indica que todos los elementos h1

CSS permite a los desarrolladores Web controlar el estilo y el formato

se vern afectados por la declaracin donde se establece que la propie-

de mltiples pginas Web al mismo tiempo. Cualquier cambio en el es- dad color va a tener el valor red (rojo) para todos los elementos h1 del
tilo marcado para un elemento en la CSS afectar a todas las pginas

documento o documentos que estn vinculados a esa hoja de estilos.

vinculadas a esa CSS en las que aparezca ese elemento.


Las tres formas ms conocidas de dar estilo a un documento son las
siguientes:

Utilizando una hoja de estilo externa que estar vinculada a un documento a travs del elemento <link>, el cual debe ir situado en la seccin <head>.
Utilizando el elemento <style>, en el interior del documento al que
se le quiere dar estilo, y que generalmente se situara en la seccin
<head>. De esta forma los estilos sern reconocidos antes de que la
pgina se cargue por completo.
Utilizando estilos directamente sobre aquellos elementos que lo permiten a travs del atributo <style> dentro de <body>. Pero este tipo de
definicin del estilo pierde las ventajas que ofrecen las hojas de estilo
al mezclarse el contenido con la presentacin.

Para ver ms:


http://www.w3c.es/Divulgacion/GuiasBreves/HojasEstilo

Publicacin de un sitio web

ticiones de conexin por FTP para la subida de archivos. Si el servidor


web es del CNICE puede ser uno de estos: roble.pntic.mec.es, ficus.pn-

La prctica habitual es disear las pginas web de nuestro sitio web

tic.mec.es, centros5.pntic.mec.es, etc. Si es Yahoo ser: ftp.es.geocities.

en el disco duro del equipo para luego enviarlos al servidor web jun-

com

to con los archivos multimedia referenciados (imgenes, animaciones,

Usuario y Contrasea: Son los datos de la cuenta que es necesario

audios, etc). A este proceso se le llama publicacin web. Mediante este

introducir para realizar una subida autentificada de recursos y que estos

procedimiento se pone a disposicin de cualquier usuario con acceso a recursos se alojen en la ubicacin correcta del servidor.
Internet las pginas web del centro o proyecto, al pasar a estar alojadas

Direccin del servidor HTTP: Es la URL del servidor web que nos per-

fsicamente en un ordenador servidor con acceso permanente desde

mitir acceder a nuestras pginas usando el navegador web. Ejemplo:

Internet.

http://roble.pntic.mec.es/usuario/

La subida de archivos desde el equipo local al servidor se puede rea-

Para ver ms:

lizar mediante un programa que utiliza el protocolo FTP (File Transfer

http://www.ite.educacion.es/formacion/materiales/107/cd/html/

Protocol = Protocolo de Transmisin de Archivos). Esta transferencia html1501.html


de archivos se realiza en modo autentificado, es decir, introduciendo un
nombre de usuario y contrasea para evitar que otras personas puedan
publicar en nuestro espacio web.

En consecuencia antes de afrontar la tarea de publicacin ser necesario obtener los siguientes datos del administrador del servidor web:
Direccin del servidor FTP: Es la URL del servidor que atiende pe-