manual de diseño web

7/26/2019 Manual de Diseño Web

http://slidepdf.com/reader/full/manual-de-diseno-web 1/132

Manual de Diseño WebCómo elegir una Tipografía para una página web

Cuando se trata del diseño de una página web, la elección de la tipografíaes un paso decisivo y fundamental en el proceso.

La tipografía, es decir, la fuente o el formato de las letras que conforman el

teto, tendrá un impacto directo en como la página será recibida por suslectores.

!na tipografía enrevesada y poco legible agotará a quien visite el sitio web"los mensa#es no son claros y por tanto el visitante pre$ere salir del sitio.

%i bien es cierto que no &ay un m'todo establecido sobre cómo elegir unatipografía adecuada para una web, sí &ay ciertos criteriosfundamentales a ser tomados en cuenta.

Legibilidad de la tipografíaLa legibilidad es un principio básico y necesario cuando se va a elegir latipografía para una página web.

(arece obvio, pero no es poco com)n entre diseñadores web pocoeperimentados que privilegien una tipografía aparentemente másinteresante, original o comple#a sobre tipografías tradicionales y cuyo uso escasi generali*ado en el mundo web.

+&ora bien, las tipografías del primer tipo tienden a tener dos problemas

por un lado, son poco legibles pues están llenas de adornos. -n este sentidodemandan un mayor esfuer*o y una mayor atención de parte del lector. (orotro lado, suelen distraer al lector del mensa#e que se trata de transmitir.

uentes tradicionales como +rial, /erdana, o 0elv'tica son las másutili*adas, #ustamente, porque son fácilmente legibles. 1e nada sirveparecer original o tratar de que la web se destaque por el uso de fuentescomple#as si la información no se transmite fácilmente.

+ parte está, el &ec&o de que tipografías poco comunes no se verán igual endiferentes ordenadores. -n el ordenador donde no est'n instaladas, se

sustituirán automáticamente por una tipografía que sí tenga el sistema. %iquieres que una tipografía se vea igual en todos los ordenadores, la tengano no instaladas, tendrías que usar el reempla*o de imágenes, nadarecomendable por la sobrecarga de imágenes que puede generar en unaweb, o alternativas más modernas y óptimas como 2oogle 3eb on1irectory y font4face.

Combinaciones de tipografías!na página web no se &ace con una sola tipografía. Ciertamente se puedepero no es lo deseado ni lo recomendable.

http://www.lawebera.es/como-hacer/ejemplos-css/google-font-directory-tipografias-web-libres.php






2eneralmente se utili*an distintas tipografías dentro de un mismo sitio web.%e diferencia con la tipografía y el tamaño de la misma a los títulos, oencabe*ados, del cuerpo del teto o de la barra de men), por e#emplo.

1ebido a esto es que es muy importante el que se &agan combinacionesadecuadas en donde las fuentes utili*adas no sean discordantes entre sí.

(ara que esto no suceda es recomendable utili*ar distintas tipografías de unmismo diseñador. +sí, si se utili*a para el cuerpo del teto la fuente 5eta

%ans para los títulos y encabe*ados, se podría utili*ar 5eta %erif para elcuerpo del teto.

Lo importante en las combinaciones es crear un contraste notorio pero no alpunto en el que las tipografías pare*can radicalmente distintas.

El Sentido del Teto(ara elegir una tipografía adecuada para la web es indispensableprestarle especial atención al sentido del teto. -s decir, a quien se dirige ya nombre de quien lo &ace.

0ay fuentes que tienden a asociarse a un contenido serio mientras que &ayotras asociadas más a un teto l)dico o #uvenil. -#emplos del primer casosería la tipografía Times 6ew 7oman, mientras que para el segundo casopodría funcionar una tipografía como 8mpact.

%i se está diseñando la página web de una aseguradora o institución$nanciera, por e#emplo, la tipografía a utili*ar será aquella que sea másformal pues será me#or recibida por quienes se interesan en los servicios deeste tipo de empresas. La tipografía no puede estar desligada del teto quecon ella se escribe y el conteto del mismo.

La 8nterfa* de la página web

La interfa*, o el 9molde: de la página web, in;uye directamente en latipografía. +mbos aspectos deberían ser traba#ados en con#unto pues lainterfa* de$nirá cómo la tipografía es presentada en cuestión de espacios,locación, y diseño.

!na interfa* mal diseñada, desproporcionada o desordenada, podríaarruinar la tipografía por más cuidado que &aya &abido en su selección.

(or esto, es recomendable traba#ar la tipografía #unto con la interfa* a ser

desarrollada en la página web.

Conse#os de diseño web para móviles < (arte =

+ctualmente en la empresa en la que traba#o estamos desarrollando laversión móvil de una aplicación web bastante comple#a >una me*cla entreaceboo? y @rain TrainingA. -sto me &a obligado a investigar más a fondo eltema, puesto que la aplicación y el diseño son más comple#os que la

mayoría de webs móviles que &e reali*ado. +lgunas de las cosas que estoyaprendiendo están en este y el siguiente artículo.

http://www.lawebera.es/manual-diseno-web/diseno-visual-de-una-pagina-web.php

http://www.lawebera.es/manual-diseno-web/el-diseno-de-la-interfaz.php

http://www.lawebera.es/manual-diseno-web/diseno-visual-de-una-pagina-web.php

http://www.lawebera.es/manual-diseno-web/el-diseno-de-la-interfaz.php



Entender la web mó!ilLa web móvil requiere saber condensar la información en espaciospequeños, primar la usabilidad y saber comprender qu' es loverdaderamente importante en una web. 0ay una gran diferencia entrediseñar una página web que será visible en un ordenador y diseñar una queserá visible en un dispositivo móvil. -sta diferencia es cuantiosa ya que nose puede establecer un formato especí$co para móvil, debido a la grancantidad de modelos, tamaños y grandes diferencias de resolución en los

diferentes tipos de dispositivos móviles.+nte esta situación, la me#or opción es que tomemos como referencia a la&ora de diseñar nuestro sitio web para mó!iles, la mayor cantidadposible de dispositivos móviles, de tal manera que nuestro diseño pueda servisto desde casi cualquiera de estos dispositivos. (ara ello debemosasegurarnos principalmente de &acer un diseño ;uido, que pueda adaptarsea diferentes anc&uras sin romperse o desaprovec&ar espacio.

Conse"os de diseño web para mó!iles-n el futuro, se espera que la navegación web en tel'fonos móviles seconvierta en la plataforma más importante de acceso a internet, por lo querecomiendo tener en cuenta algunos conse#os que &arán nuestro traba#omás simple, fácil y atractivo para los usuarios

#esolución de pantallaComo &emos indicado, la resolución de pantalla cambia seg)n el dispositivomóvil en el que vayamos a visuali*ar una web, por lo tanto necesitamosadecuarnos a un estándar de resolución para que la web móvil se adapte ala mayoría de pantallas.

$segurarnos %ue el desarrollo del contenido sea el adecuado1ebemos utili*ar lengua#es de programación comunes y formatos dedocumentos conocidos por los usuarios, asegurarnos de la correctacodi$cación de los caracteres y utili*ar &o#as de estilo.

Es con!eniente no poner muc&a información en una pantalla %erecomienda dividir el contenido de la página en pequeñas porciones fácilesde entender, resumir tetos y &acer bien visibles las llamadas a la accion,tales como botones y enlaces.

Desarrollar un diseño sencillo para facilitar el uso-s muy importanteque la visuali*ación de la web en un dispositivo móvil sea simple y claro,pues esto signi$cará que el usuario vea atractivo y fácil navegar por la web.

Dinamismo en los enlaces 1arle al usuario la opción de poder volver a lapágina inicial de la web, &aciendo clic en un botón que aparecer en cadapágina a la que acceda. -sto &ará que el usuario retome rápidamente elrumbo de la navegación en caso de &aberlo perdido.+demás que el usuario pueda siempre diferenciar, por e#emplo mediante uncolor diferente, los enlaces que ya &aya visitado de lo que no, para que la

navegación sea más clara y dinámica.'ue el usuario necesite escribir lo mínimo (ara &acer más ágil lanavegación web en un dispositivo móvil, es conveniente que el usuario nose vea obligado a escribir teto.



Lo recomendable es utili*ar opciones de men) desplegable que muestrenlas diferentes alternativas de acceso a los diferentes niveles del recorridoweb

(o utili)ar páginas emergentes *pop+us,- Los navegadores móviles nosoportan las ventanas emergentes y si así fuera, el espacio para mostrarlosería muy reducido. %e recomienda no utili*arlos para la comodidad delusuario y para una me#or est'tica del diseño web móvil.

Ser lo más claro posible en la na!egación del usuario Cuando elusuario accede a internet a trav's de un dispositivo móvil, busca algoespecí$co y urgente, por lo tanto el diseño que desarrollemos debe sermuc&o más simple que el desarrollado para un sitio web estándar. 1e estamanera podremos contribuir en el presente al desarrollo del futuro, unfuturo llamado Web mó!il.

Conse#os de diseño web para móviles < (arte B

Continuamos con los conse#os de diseño web para móviles.

6o &a pasado muc&o tiempo desde que para promocionarte o promocionartu negocio y estar al día, solamente necesitabas tener una buena páginaweb. +&ora, con lo rápido que &a avan*ado la tecnología, &ace falta muc&omás que eso, &ace falta tener actividad en las principales redes sociales y,sobretodo, contar con un sitio web compatible con dispositi!osmó!iles.

+ctualmente un alto porcenta#e de las b)squedas en motores tales como2oogle y a&oo, se &acen desde dispositivos móviles como i(ads ysmartp&ones, y solamente el =D de los sitios web del mundo pueden servisuali*ados en un dispositivo móvil sin ning)n problema.

-n la (arte = de este artículo, dimos algunos conse#os para que tu sitioweb sea totalmente compatible con dispositi!os mó!iles, acontinuación te damos algunos más que &arán que tu sitio web móvil seaa)n me#or

.l!ida el auto+pla/ / la auto+descarga- Los dispositivos móviles tienenmenos capacidades t'cnicas que los ordenadores y no pueden mane#ar elmismo ;u#o de datos. La regla de oro es &acerlo simple.

E!ita la sobrecarga de imágenes- %i utili*as menor cantidad deimágenes será me#or para tu sitio web móvil, ya que esto no solamentefacilitará la rapide* de las descargas, sino tambi'n &ará que las imágenesque si sean necesarias sean muc&o más fáciles de ver. EFuieres un datot'cnicoG 5ant'n tus imágenes aproimadas a los HB dpi, IJKp en IK dealtura.

$"ustar los elementos !isuales- 7educir los tamaños de los tetos y eltamaño de las imágenes para que tu sitio web móvil tenga un correctofuncionamiento y sea rápido al cargar no es lo )nico que necesitas. Tambi'n



es importante que utilices imágenes de menor resolución, videos más cortosy elementos visuales muc&o más sencillos.

(a!egación !ertical- %iempre utili*a una misma dirección para elscrolling, pues si ya es bastante incómodo mane#ar un scrolling en dobledirección en una página web estándar, lo será muc&o más en un sitio webmóvil.

.l!ídate del 0las& o 1a!ascript- 6o todos los dispositivos móviles son

compatibles con las& o Mavascript, así que la recomendación es que toda tuinformación se encuentre en 0T5L N C%% para lograr la me#or funcionalidadde tu sitio web en los dispositivos móviles. 0ay que primar la usabilidad yaccesibilidad más si cabe que en un ordenador.

Decide correctamente los colores %ue usarás- -n una web estándar loscolores son de importancia para resaltar el contenido de tu información,pero recuerda que la pantalla de algunos dispositivos móviles puede ser deba#o contraste y eso &ará que los colores y, por consiguiente, tu sitio web nose visualice tal como lo esperabas. +segurate de que los tetos y colores

que utili*as son los adecuados y tengan un buen contraste. Teniendo en cuenta que la tecnología 3+( está en constante desarrollo ycrecimiento, es inevitable que requiera de sitios web diseñados cumpliendotodos los requisitos básicos para complacer a la creciente cantidad deusuarios que día a día se &ace más etensa.

1iseñar sitios web para dispositivos móviles eige un gran desafío yrequiere un enfoque estrat'gico del diseñador web y el desarrollador.

La mayor venta#a del internet móvil es que puedes acceder a 'l desde

cualquier lugar que te encuentres desde el coc&e, el autob)s, elsupermercado, el campo de f)tbol o los lugares menos pensados. (or estara*ón estamos seguros que, en poco tiempo, aquel =D de sitios webtotalmente visibles en dispositivos móviles crecerá de tal manera, quellegará el momento en que la gran mayoría de accesos a internet serámediante estos dispositivos y entonces el porcenta#e de sitios web móvilesserá incluso mayor al de sitios webs convencionales. este futuro no esle#ano.

Conse#os sobre 0T5L para principiantes, (arte =

+l comien)o de nuestra carrera como diseñador web2 puede resultarbastante frustrante el &ec&o de buscar tutoriales en la red y encontrarnos)nicamente con información bastante avan*ada sobre el desarrollo deaplicaciones, eventualmente sabemos que llegaremos al punto de necesitardic&os tutoriales pero por el momento deseamos una base sobre la cualempe*ar.

(ensando en esos usuarios / programadores principiantes, &emosreali*ado este artículo que recopila un n)mero de conse#os y buenas

prácticas que nos ayudarán a adquirir costumbres adecuadas queaplicaremos al momento de estructurar e idear proyectos con 0T5L.

7ecuerda que nadie nace sabiendo, muc&as veces omitimos esta clase deartículos pensando que ya sabemos todo sobre un tema cuando en realidad



las bases no fueron adquiridas de manera adecuada. %i t) sientes que estosconse#os son poco )tiles para ti en este momento entonces terecomendamos que revises otros artículos de nuestro sitio y empieces apracticar con temas que representen más reto. (or otro lado si sientes quenecesitas refor*ar la manera en que desarrollas te invitamos a continuar.

Cierra todas las eti%uetas 3TML

%i ya &as leído algo sobre 0T5L y la manera de crear sitios con 'l, ya sabrasque es un lengua#e basado en etiquetas. 1ic&as etiquetas te permitenestructurar el documento de la manera en que tu desees, nos ayudan ade$nir elementos y a delimitar secciones.

La manera de mane#ar dic&as etiquetas &a variado desde la creación deeste lengua#e, desde sus inicios &asta la actualidad &an eistido evolucionespropias de cualquier lengua#e de programación, conceptos como O0T5L y0T5LP pueden empe*ar a sonar en tu cabe*a, pero para no confundirnos eneste momento de#aremos la eplicación de estos t'rminos para otro

momento.2racias a esta misma evolución, reglas &an surgido para su uso, en elpasado no importaba muc&o si mane#abas may)sculas o min)sculas paralos nombres, si olvidabas cerrar alguna etiqueta o simplemente si omitías eluso de ellas. -n la actualidad 0T5L sigue siendo noble en este sentido, peroeige más colaboración por parte del diseñador, es por ello que una de lasreglas primordiales al momento de usar el lengua#e es siempre cerrar lasetiquetas que usamos.

Con cerrar la etiqueta no referimos a que por cada una que abras debes

agregar su contraparte al momento que de#es de utili*arla, agregando unadiagonal al inicio del nombre de la etiqueta. (or e#emplo, si tuvi'ramos unalista desordenada en nuestro documento tendríamos que abrir y cerrar unaetiqueta 4li5 para cada elemento perteneciente.

-n el pasado era muy com)n encontrarnos con casos como este

<li>Elemento 1

<li>Elemento 2

<li>Elemento 3

<li>

Elemento 31onde ning)n elemento contenía el cerrado de su etiqueta, eincluso ni siquiera contaba con la etiqueta 4ul5 predecesora que indicaba elinicio de la lista. 5ane#ar un código así actualmente es totalmenteincorrecto, puesto que ninguna validación de 0T5L lo pasaría por alto, unalista bien formada se presentaría de la siguiente manera

<ul>

<li>Elemento 1</li>

<li>Elemento 2</li>

<li>Elemento 3</li>



</ul>

6tili)a min7sculas para nombrar las eti%uetas T'cnicamente &ablando, no eiste ninguna diferencia en el resultadoobtenido cuando utili*amos letras may)sculas en el nombre de nuestrasetiquetas, ya que como mencionamos antes, 3TML sigue siendo nobleen muc&os sentidos y el &ec&o de mane#ar may)sculas no &a sido

pro&ibido del todo. -ste factor &ace que obtengamos el mismo resultado simane#amos este código

<DIV><SPAN>Hola Mundo</SPAN></DIV>

Q este otro

<div><span>Hola Mundo</span></div>

-l &ec&o de mane#ar min)sculas en muc&as ocasiones es simplemente una

buena práctica, algo que al convertirse en costumbre &ará que nuestrocódigo lu*ca estandari*ado e incluso est'tico, pero por otro lado, eistiránocasiones en las que el mane#o de min)sculas sí sea obligatorio, comocuando utili*amos un doctype de tipo &tml, o cuando el uso de O5L ennuestro sitio sea constante, ya que este lengua#e si &ace diferencia entre lasmay)sculas y las min)sculas.

%i esto te causa problemas y quieres seguir utili*ando may)sculas en tusdocumentos, puedes &acerlo, simplemente ten en mente que muyprobablemente en un futuro tendrás que editar tus arc&ivos para &acer estecambio.

Elige bien el Doct/pe de tu página-l 1octype es una etiqueta que va al principio de nuestro código 0T5L, lacual es utili*ada para indicar al navegador el tipo de página que se estaabriendo, para que de esta manera se encargue de interpretar el código demanera adecuada. -sta sentencia indicará si el contenido es de tipo 0T5L,O0T5L o una me*cla de los dos.

-s muy com)n olvidar dar un 1octype a nuestros sitios, ya que al ser un

factor t'cnico de creación relativamente reciente es muy fácil de omitir,aunado al &ec&o de que sin un 1octype de$nido nuestro sitio siguefuncionando, aunque qui*ás no lo &aga de manera correcta.

+quí mostramos ciertos tipos de 1octype

<!D"#PE H"M$ P%&$I '(//)3//D"D H"M$ *+,1//EN-

'.ttp//000+03+o/"/.tml*/sti4t+dtd ->

<!D"#PE .tml P%&$I '(//)3//D"D 5H"M$ 1+, Sti4t//EN-

'.ttp//000+03+o/"/6.tml1/D"D/6.tml1(sti4t+dtd ->

<!D"#PE H"M$ P%&$I '(//)3//D"D H"M$ *+,1 "ansitional//EN-

'.ttp//000+03+o/"/.tml*/loose+dtd ->

<!D"#PE .tml P%&$I '(//)3//D"D 5H"M$ 1+, "ansitional//EN-

'.ttp//000+03+o/"/6.tml1/D"D/6.tml1 ("aditional+dtd->

http://www.lawebera.es/de0/html-doctype-version-documento-pagina-web.php

http://www.w3.org/TR/html4/strict.dtd

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd

http://www.w3.org/TR/html4/loose.dtd

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd


http://www.w3.org/TR/html4/strict.dtd

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd

http://www.w3.org/TR/html4/loose.dtd




-n caso de que mane#emos un 1octype de tipo erróneo el sitio nofuncionará de la manera en que esperamos, si decidimos utili*ar O0T5L demanera estricta debemos apegarnos totalmente las convencionesestablecidas para esta estandari*ación. Como ya mencionábamos antes, sien este caso usáramos letras may)sculas en nuestras etiquetas el sitio notendrá el desempeño adecuado.

Conse#os sobre 0T5L para principiantes, (arte B

Continuamos con esta serie de conse#os que buscan ayudar a diseñadoresweb principiantes, recalcando costumbres de traba#o adecuadas yrecomendando buenas prácticas para llevar a cabo una programación webcorrecta con 0T5L.

-n caso de que no &ayas leído la primera parte de esta serie te

recomendamos que la consultes antes de empe*ar a leer este artículo.

(o uses estilos en las eti%uetas 3TML Trata siempre de evitar utili*ar la declaración de estilos dentro de lasetiquetas 0T5L. 0asta &ace relativamente poco el incluir atributosrelacionados al diseño y estilo de los elementos era una práctica com)n enel desarrollo de aplicaciones para la 3eb, por ello no es de etrañarseencontrarnos con tutoriales que a)n mane#an este tipo de declaraciones enel código.

Con la introducción y epansión de C%% esta costumbre &a ido quedando

obsoleta. La de$nición de los estilos, colores y el diseño est'tico de un sitioquedaron como función eclusiva de las &o#as de estilo, por lo que losatributos que fueron de$nidos en los inicios de 0T5L para llevar a caboestas tareas &an de#ado de ser utili*ados.

-n el pasado era muy com)n encontrar sentencias como la siguiente

<7od8 74olo9:;,,,,,,:></7od8>

La cual se utili*aba para de$nir el color de fondo de nuestra página, en laactualidad para reali*ar esto se debe de$nir, en una &o#a de estilo, un

bloque de código como el siguiente

7od8

7a4=ound ;,,,,,,

?

1e esta manera nos evitamos utili*ar el atributo 9bgcolor: para de$nir unaspecto correspondiente )nicamente al diseño.

-iste otra manera de de$nir estilos la cual tambi'n debemos evitar,aunque sea en menor medida, esta es la de$nición de estilos dentro de las



etiquetas 0T5L mediante el atributo 9style:. -s muy com)n que porcuestiones de comodidad o simplemente por no conocer el correcto uso yestandari*ación del código, de$namos una sentencia de estilo de lasiguiente forma

<7od8 st8le9:7a4=ound ;,,,,,,:></7od8>

Como se puede apreciar, en esta ocasión sí utili*amos lengua#e C%% parade$nir el color del fondo de nuestro sitio, sin embargo seguimos mane#ando

la de$nición dentro de una etiqueta lo cual puede causar con;icto con elcódigo que establecimos por separado en la &o#a de estilo. -s me#ormantener tus asuntos en orden y simplemente saber crear un entorno detraba#o más adecuado.

Mane"a el código CSS en arc&i!os separados del 3TML1esde un punto de vista t'cnico t) puedes colocar un bloque C%% encualquier parte del código 0T5L que desees, funcionará de manera correctay similar a cualquiera de las otras opciones que puedes eligir. +l $nal no&abrá repercusiones en el resultado ya que el código será el mismo sea

donde sea que se coloque, e#ecutará las mismas acciones e instruccionesque tu diste por lo que cumplirá su función t'cnica por igual, sin embargo si&abrá variación en el tiempo de respuesta.

%e recomienda mane#ar el código de estilo es un arc&ivo por separado paramantener una me#or organi*ación del sitio, com)nmente el mane#ararc&ivos )nicos y eclusivos para las &o#as de estilo &ace que se facilite suedición y administración, además de que muc&os editores de código pueden&acer una me#or depuración.

-ntre los principales bene$cios de mane#ar un arc&ivo eterno para

depositar nuestro código C%%, se encuentra el &ec&o de que este arc&ivo sepuede utili*ar para varios sitios y páginas de manera simultánea, sinnecesidad de transcribir el código de un lado a otro, bastando con suad&erencia entre las etiquetas 9&ead: para su correcto funcionamiento.

1e igual manera, el mane#ar un arc&ivo C%% representa un a&orro tiempo almomento de la e#ecución y despliegue de las páginas 0T5L. +l utili*ar)nicamente un arc&ivo para todo el sitio, este se guarda en el cac&' delnavegador lo que conlleva a un tiempo menor de respuesta y una carga másrápida.

-s importante recalcar el &ec&o de que las &o#as deben incluirse dentro delas etiquetas 9&ead:, de la siguiente manera

<.ead>

<title>Mi sitio de pue7a</title>

<lin= el9:st8les.eet: t8pe9:te6t/4ss: .e@9:miestilo+4ss: />

</.ead>



a que esto tambi'n in;uye para me#orar el tiempo de respuesta, o por lomenos eso nos &ace creer. -l &ec&o de llamar a los estilos en la etiqueta9&ead: &ace que la página se cargue progresivamente, lo que crea laimpresión de que el sitio se carga más rápido.

Coloca los scripts al 8nal del 3TML+ntes se acostumbraba cargar los arc&ivos relacionado a Mava%cript en el

mismo espacio donde se incluían las &o#as de estilo, es decir entre lasetiquetas 9&ead: del código, esto provocaba una demora en el tiempo derespuesta del sitio, ya que el navegador debía cargar primero todos losscripts con sus funciones antes de empe*ar a desplegar los elementos delsitio.

-s por esta ra*ón que en la actualidad se recomienda agregar esta clase dearc&ivos al $nal de nuestro código 0T5L, con esto lograremos que la páginase cargue más rápido y el usuario obtenga una respuesta casi inmediata.

<7od8>

<p>Este es mi sitio de pue7a</p>

<s4ipt t8pe9:te6t/Bavas4ipt: s49:mis4ipt+Bs:></s4ipt>

</7od8>

Como puedes apreciar &asta a&ora &emos mencionado el uso de arc&ivoseternos para crear los scripts, si deseas incluirlos en el mismo código0T5L, tambi'n es válido, pero eso sí, no lo &agas dentro de una etiqueta0T5L, no cometas errores como este

<im id9:miIm: s49:miimaen+pn: on4li4=9:aletC.ola usuaio:/>

Trata de aplicar el uso de funciones y eventos por separado para llamar alscript, o me#or a)n &a* uso de framewor?s como #Fuery para crear códigosclaros y bien estructurados como este

BFue8C;miIm+4li4=C@un4tionC

aletC.ola usuaio

http://www.lawebera.es/manuales/javascript

http://www.lawebera.es/manual-de-jquery


http://www.lawebera.es/manual-de-jquery



?

1onde mediante un evento 9clic?: mandamos llamar la misma funcionalidadque en la sentencia pasada.

1iseño web en 0T5LP

0T5LP promete ser el futuro del diseño web. 6os abre un repertorio deposibilidades que en algunos casos &asta a&ora sólo podían usarse conlengua#es propietarios como las&, o m'todos no demasiado ortodoos,como es el caso de los embed para incrustar elementos multimedia comovideos.

Lo cierto es que el diseño web en 3TML9 todavía está en pañales. 0aceapenas unos años que empie*a a surgir su desarrollo y aunque cada ve*está calando con más fuer*a en la comunidad de desarrolladores y losnavegadores empie*an a darle soporte, a)n no está su$cientemente

etendido y sobretodo soportado, como para usarlo a la ligera.6o s' si es el momento de lan*ar proyectos en 0T5LP, o esperar a ver quepasa con las especi$caciones y los modos de interpretarlas que vayanconsolidándose por los navegadores. 1e lo que sí es el momento es deempe*ar a aprender y a eperimentar con 'l. o personalmente lo estoyprobando en alguno de mis proyectos.

El diseño web en 3TML9 es más semántico

(ersonalmente me gusta muc&o toda la parte de semántica que se le &aañadido al código 0T5L con la llegada de 0T5LP. -sa simplicidad por mediode etiquetas como R&eaderS RarticleS o RfooterS va a a&orrar a muc&osdiseñadores web la famosa divitis, o lo que es lo mismo, el usar divs paratodo de manera ecesiva. a no va a &acer falta poner algo como

<div id9:.eade:>

ontenido del en4a7eGado de la pina

</div>

-n 0T5LP será esto lo que usemos

<.eade>

ontenido del en4a7eGado de la pina

</.eade>

Como vemos, el diseño de una página web en 0T5LP va a dotar al código

fuente de mayor simplicidad y signi$cado. a tan sólo el doctype que se usaal diseñar en 3TML9 nos puede dar una idea de lo que &an buscado conesta nueva versión &acer las cosas sencillas, y sobre todo sencillas deentender.





-l doctype típico en 0T5L o O0T5L es este

<!D"#PE .tml P%&$I :(//)3//D"D 5H"M$ 1+, "ansitional//EN:

:.ttp//000+03+o/"/6.tml1/D"D/6.tml1(tansitional+dtd :>

<.tml 6mlns9:.ttp//000+03+o/1/6.tml:>

este es el que se usa al diseñar con 0T5LP

<!D"#PE .tml>Como se puede apreciar, claramente simpli$cado.

Ser un diseñador web preparado para 3TML9-l caso es que los diseñadores web, las agencias de diseño web profesionaltienen que empe*ar a adaptarse a los cambios e ir integrando con cautelaesta valiosa &erramienta en sus desarrollos, en los servicios que se ofrecen

a los clientes. + la mayoría les dará igual con qu' lengua#e se desarrolla suproyecto, lo importante es el resultado, pero con el tiempo agradecerán versus páginas web más veloces o me#or posicionadas en 2oogle.

Los diseñadores web debemos prepararnos para diseñar en 0T5LP, así quepara abrir boca, os de#o el lin? a una c&eats&eet >c&uletaA de 0T5LP con lasetiquetas principales, su uso y atributos, o esta otra en la que estánresaltadas las diferencias con 0T5LJ. o la tengo imprimida desde &acemes.

Como no, no podemos olvidarnos de los maravillosos, resets de C%%, que

nos &acen la vida muc&o más fácil a la &ora de maquetar una web. -n estecaso, ya tenemos reset para 0T5LP.

(o ol!idarse de CSS:-l uso de 0T5LP va a ir de la mano de C%%, así que no &ay que olvidarsetampoco de preparase para este lengua#e que nos trae cosas tan )tilescomo bordes redondeados, degradados o tetos animados, tetossombreados, simplemente con C%% puro. Cosas que &asta a&oranecesitaban de uso de imágenes, #avascript o incluso ;as&, ralenti*andonuestras páginas web.

7edacción de tetos para páginas web

-l contenido más importante de todas las páginas web se encuentra en lostetos, a)n en aquellos casos en los que las imágenes ocupan un porcenta#emuc&o mayor respecto del espacio de la página. -sto &ace que el diseñadorweb deba poner especial atención en cómo dispone de los tetos.

La web es una &erramienta que tiene características especiales. Llevadospor un ra*onamiento simplista, podríamos suponer que la disposición de los

textos en el diseño de una página web, podría ser similar que la que tienen loslibros o las revistas. %in embargo, la lectura en los medios impresos esdiferente a la de un monitor .


http://www.w3.org/1999/xhtml

http://www.lawebera.es/manuales/html/


http://www.w3.org/1999/xhtml

http://www.lawebera.es/manuales/html/



-studios cientí$cos indican que el cansancio que se eperimenta en lalectura de tetos en un ordenador es muc&o mayor que en los mediosimpresos, y que la velocidad de lectura es más rápida en los )ltimos.

+demás, debido a las epectativas que se tienen sobre uno y otro medio >unusuario de internet espera que todo sea instantáneoA, el tiempo de atención de los

usuarios de estos dos medios es diferente, siendo muc&o más corta en losusuarios de páginas web.

-stas características tan especiales de las páginas web, &ace que laproducción, disposición y la forma en que se presentan los tetos, deba serespecialmente cuidada, ya que descuidar este aspecto podría provocar unapérdida de usuarios.

#edacción de tetos para la webLo más importante al redactar de textos para páginas web, es que se debeemplear aproimadamente la mitad de las palabras que se emplean en losmedios impresos para desarrollar un tema, teniendo en cuenta lo ya dic&osobre el tiempo de atención de los usuarios de internet.

Cada párrafo, debe contener tan solo una idea. -sto agili*a notablemente lalectura y simpli$ca la comprensión del teto en general. +sí como disminuyeel tiempo de atención, la calidad de la misma es sensiblemente menor enlos medios electrónicos.

Cada tema o subtema, debe estar separado del resto mediante la aplicación

de subtítulos claros y que contengan información de utilidad sobre elcontenido que los lectores encontrarán en los párrafos siguientes. -stopermite una esquemati*ación de los tetos que simpli$ca la comprensión ydan una mayor velocidad a la lectura, además de aumentar la atención del

lector.

Cantidad / calidad de los tetos en la webLa etensión de los tetos en una página web puede ser variable. 1epende,como es de suponerse, del tema que trata la misma. La cantidad de tetoque es necesario emplear en una página destinada a #uegos es totalmentediferente a la que necesita una web sobre literatura. -n este tipo deevaluaciones, debe intervenir necesariamente el sentido com)n.

-n una página en la que se desarrolla un tema >como estaA en la cual el texto

es el elemento fundamental, la etensión de los tetos será considerable y

probablemente sea lo que buscan los usuarios. %in embargo, en la páginade presentación del sitio, en la presentación de un tema, una página deofertas o una de descripción de productos, lo más indicado es colocar tetoscortos y especí$cos, con frases llamativas que atraigan la atención de losusuarios.

-n los casos en que la etensión de los tetos que se deben emplear superelas dos páginas, lo conveniente no es etender inde$nidamente la página&acia aba#o, ya que el uso de las barras de scroll en forma permanente noresulta del agrado de los usuarios de internet. -n este caso, cabría

considerar la posibilidad de dividir el tema en dos o más páginas, empleandoun buen sistema de navegación que permita a los usuarios navegar entreellas con facilidad.

http://www.lawebera.es/manuales/html/struct/text.html

http://www.lawebera.es/manuales/html/struct/text.html



La calidad de la producción de textos debe ser óptima. %implicidad en laelaboración de frases y oraciones, buena sintais, ortografía sin errores yestilo cuidado, pueden &acer que el lector llegue al $nal de los tetos,mientras que de no cuidarse estos aspectos, posiblemente el porcenta#e delectores que $nalicen la lectura sea muy ba#o

.

Disposición de los tetos en una página web

Todo teto debe estar iniciado por un título perfectamente visible y claramentediferenciado del resto de los tetos. -ste encabe*ado del teto, deberesultar llamativo y lo su$cientemente eplícito como para que los usuariostengan una idea acabada del tema tratado en los párrafos siguientes.

Tal como se di#o en el apartado anterior, es necesaria la disposición del texto

en párrafos, separados por un interlineado visible, de forma tal que un tetono de la impresión de tratarse de un gran bloque que nunca termina.

Los párrafos no deben ser muy etensos, ya que los bloques de textos demuc&as líneas, &ace que muc&os usuarios se pierdan al cambiar de línea,algo que resulta etremadamente frustrante y &ace que se pierda laconcentración y la atención.

1entro de los párrafos, los conceptos más importantes y las palabras clave esconveniente que est'n más visibles que el resto del teto, por lo que debenser remarcados. La me#or forma de &acerlo es la utili*ación de negritas. Latipografía en itálica tambi'n es empleada para este $n, pero el aumento de lavisibilidad es menor que cuando se emplean las negritas, por lo que espreferible emplear el primer m'todo.

-n cambio, el subrayado es totalmente desaconse#ado, ya que provocaalgunas di$cultades en la lectura de las palabras" además, generalmente laspalabras subrayadas suelen ser empleadas para los enlaces, lo que puedegenerar confusión en los usuarios.

-l color en el teto

-l empleo del color en los tetos debe cumplir con algunas reglas básicas quedeben ser seguidas en forma estricta, a los efectos de evitar que el p)blicotenga di$cultad para leer o para mantener la atención.

-ltexto en un solo color

, suele ser monótono, lo que puede provocar que elusuario encuentre poco atractiva la propuesta. (or lo general, para &acerque el teto de#e de ser algo monótono, basta con incluir colores diferentes a

los títulos y subtítulos para que la apariencia general se muestre en formaatractiva.

-n otros casos, el empleo de varios colores está dado por el tipo de página quese está &aciendo. !na página destinada a los grá$cos, la pintura o cualquierotro tema relacionado con el color, puede &acer necesario que los bloquesde teto tengan colores diferentes. -sto tambi'n es empleado confrecuencia en páginas corporativas, ya que el teto puede llevar los colores

que identi$can a la compañía.

-l empleo del color suele ser de relevancia tambi'n en el contraste del texto

sobre el fondo sobre el cual se encuentra. -sto es particularmenteimportante en el caso de las páginas que tienen imágenes como fondo, ya que



en esos casos, la lectura es a)n más comple#a que en las páginas quetienen un color sólido de fondo.

-n todos los casos, los colores empleados en los tetos deben sercompatibles con la gama de colores de la página, ya que los bloques de tetoforman parte de la propuesta visual de la página. Los tetos deben seguirlos mismos principios de diseño que el resto de la página.

;uenas prácticas en los tetosUso correcto de las mayúsculas, negritas e itálicas. -n algunos casos, las palabrasescritas totalmente con mayúsculas se emplea para remarcar un teto, lo queresulta efectivo %in embargo, un uso abusivo de este recurso puede &acerque el teto se vea monótono, ya que las may)sculas son más uniformesque las letras min)sculas. +lgo similar sucede con el empleo de las negritas>el uso abusivo &ace que el teto adquiera demasiada relevancia en eldiseñoA y las itálicas >notoriamente más difíciles de leer que las letrasnormalesA.

No utiliar efectos en los textos. Los efectos de marquesina, el tetoparpadeante o tetos móviles logrados con algunos scripts, por lo generaldeben ser evitados, ya que tienen efectos contraproducentes.

!sar un máximo de tres fuentes diferentes y dos o tres colores para el teto.

0acer !ue los enlaces se distingan muy bien del resto del teto.

!sar un espaciado apropiado entre líneas, párrafos, títulos y subtítulos,sangrías, etc.

Qptimi*ación de imágenes para páginas web

+ pesar del me#oramiento en el ancho de banda y las me#oras en losprocesadores, aun sigue siendo recomendable que las páginas web tenganun peso reducido para evitar que tengan problemas o demoren en cargar .

%in lugar a dudas, una de las di$cultades mayores frente a la que se

enfrentan los diseñadores web es en la utiliación de imágenes. -l empleo deimágenes, tanto para el decorado de la página como para que forme parte delcontenido, es indispensable.

Teniendo en cuenta esto, la )nica opción con que cuentan los diseñadoresweb es la optimiación de las imágenes para su empleo en sus páginas. (araque el diseño tenga la vista que su creador &a plani$cado, es necesario queel largo y anc&o de las imágenes no se modi$que, por lo que la )nica opcióncon que se cuenta es con la reducción de la calidad.

La reducción de la calidad de una imagen, no necesariamente afectará su

vista en la página web. -sto se debe a que generalmente las imágenesobtenidas de una cámara, un escáner u otro medio, tienen una resoluciónóptima para su impresión o revelado, que es muy superior al mínimonecesario para que se vea bien en el monitor de un ordenador.



<'u= se modi8ca en una imagen para su optimi)ación>Las imágenes a ser utili*adas en el dise"o de una página web, puede sermodi$cada en varios parámetros a los efectos de reducir su peso.

-l parámetro más empleado para modi$car el peso de una imagen es laresolución, cuya medida es en ppp >pieles por pulgada cuadradaA. !nacámara digital obtiene resoluciones de unas KK ppp, y una impresión de

buena calidad >aunque pueden obtenerse impresiones de mayor calidadA esde BKK ppp.

-stas resoluciones no son necesarias en una imagen que va a ser mostradaen una página web, ya que una resolución de HB ppp es lo que serecomienda para su uso en este medio, debido a que la gran mayoría de losmonitores no tienen resoluciones superiores.

Qtro parámetro modi$cable es el color . !na imagen de alta calidad >denominadocolor verdadero, ya que se acerca a la capacidad del o#o &umano en ladetección de coloresA tiene una profundidad de color de B bits por piel, delos cuales BJ bits son para el color >casi =H.KKK.KKK de coloresA y U bits sondestinados a las transparencias.

7educiendo la escala de profundidad del color a =I bits >color de altadensidadA, se obtiene tambi'n una reducción del peso de la imagen. (araimágenes que emplean pocos colores, pueden utili*arse escalas menores,como BPI colores o menos.

-l formato #$% va más allá, ya que cada imagen guarda su propia escala decolores, lo que reduce notoriamente la cantidad de información >y por

consiguiente el pesoA que contiene un arc&ivo de imagen.Los arc&ivos de imagen pueden contener datos adicionales >metadatosA,que tambi'n in;uyen en el peso del mismo, por lo que en muc&asocasiones, los programas de optimi*ación de imágenes los quitan, comom'todo de reducir la cantidad de información contenida en el arc&ivo.

<Cómo optimi)ar una imagen>0ay varias formas de optimi*ar una imagen para su empleo en páginas web.

+lgunos programas de edición de imágenes tienen plug&ins para laoptimi*ación y otros tienen esas funcionalidades incorporadas. 'dobe

()otos)op presenta &erramientas que permiten de$nir algunos parámetrosde calidad para optimi*ar las imágenes, tanto reduciendo su calidad para suutili*ación en la web, como para aumentarla para su uso en impresiones.#$*( no posee funciones que permitan de$nir la calidad de las imágenestratadas, pero en el guardado permite la modi$cación de algunos de ellos>seg)n el formatoA para reducir su tamaño.

Qtra opción es la utili*ación de &erramientas especí$cas, tanto programas

como )erramientas online, algunas de las cuales describiremos a continuación. Tambi'n es posible emplear algunos trucos con buenos resultados.



#?.T- Software gratuito para optimi)ar imágenes

RI! es un software de optimiación de imágenes gratuito de muy ba+o peso y portable

"puede e#ecutarse desde un dispositivo de memoria $%&'( que presenta dos ventanas en las

cuales se visuali)an la imagen original y el resultado tras los a#ustes que se van reali)ando*

+n pruebas reali)adas con este programa( los resultados son muy buenos* +n una imagen de

alta calidad con formato (#( se logró una reducción del peso de las imágenes de hasta ,-.(

lo que quiere decir que una imagen de ,//0& quedar1a en .//0& aproximadamente( con una

reducción de la calidad que no resulta visible empleando los parámetros por defecto*

+n imágenes (#N con transparencias( la reducción es menor( aunque los números siguen

siendo igualmente buenos( ya que se logra una reducción del peso de la imagen hasta algo

menos que 2-.*

tra de las caracter1sticas del programa es que solo traba#a con formatos (#( (#N y #$%(

permitiendo el cambio de formato( lo que quiere decir que( si estamos optimi)ando una imagen

(#( podremos guardarla como 3I4 o 563* 7demás( el programa presenta la opción de

establecer el peso que se desea que la imagen tenga( reduciendo la calidad hasta obtener el

peso deseado*

+s posible aumentar la proporción de disminución del peso de la imagen( as1 como modificar

los parámetros* 8a interfa) es extremadamente sencilla( aunque se encuentra en inglés y no

existe una versión en español*

Ser!icios en línea+xisten diversos sitios que reali)an optimiación de imágenes* $no de ellos es

%iteReport9ard( una página que además de otros servicios y herramientas para diseñadores

web( ofrece la optimiación de imágenes en línea* +sta optimi)ación se reali)a ba#ando la

calidad de los colores y la definición de la imagen* 8a página muestra la opción de optimi)ar

una imagen que se encuentra en una web( para lo cual el usuario de introducir en un campo la

$R8 de la imagen "por e#emplo( http-::www*misitio*com:imagenes:imagen;.*gif' o de subir una

imagen desde el ordenador del usuario* +n cualquiera de los dos casos( la página devuelve

cinco copias de la imagen inicial en diferentes tamaños "y lógicamente diferentes calidades'(las que pueden ser descargadas al ordenador del usuario*

tro sitio( con caracter1sticas similares es <inamicdrive* +l servicio es muy similar( aunque

<inamicdrive ofrece algunas copias más que en el caso anterior y un servicio adicional( que es

http://tools.dynamicdrive.com/imageoptimizer/

http://tools.dynamicdrive.com/imageoptimizer/



convertir las imágenes a otros formatos* 8os formatos admitidos para su conversión u

optimi)ación son =53( 563 y 3I4*

@uardar imágenes para web de A&otos&op$na de las grandes maravillas que tiene 5hotoshop es la herramienta para guardar imágenes

optimi)adas para web "archivo > guardar para web'*

+sta herramienta resulta indispensable una ve) la conoces* !e permite reducir el peso de las

imágenes de forma espectacular manteniendo su calidad*

-stili*ar la tipografía de las páginas web con C%%

La tipografía, además de ser el contenido verbal, tiene tambi'n uncomponente !isual que se integra al diseño. La primera impresión de losvisitantes de una página web es estrictamente visual, y luego, en caso desentirse atraído, entra en contacto con el material escrito.

Qtra característica de la tipografía es que establece las #erarquías entre losdistintos niveles del contenido tetual, algo que todo diseñador debereali*ar en forma correcta, a $n de lograr el inter's de sus visitantes.

La tipografía es uno de los elementos más variables entre los quecomponen una página web. !n diseñador web debe tener siempre encuenta los m)ltiples problemas que pueden surgir desde el momento quedecide establecer las diferentes tipografías.

-l proceso de visuali*ación de una página web por parte de los usuarios,implica una relación comple#a entre el servidor, el navegador y el sistema

operati!o, lo que puede &acer que no siempre el usuario $nal tenga unavista de la página tal como el diseñador la &a pensado.

%i bien es cierto que las diferencias entre los distintos sistemas operativos ylos diferentes navegadores se &an limado muc&o en los )ltimos tiempos,eisten a)n diferencias que pueden &acer comple#a la tarea del diseñadorweb. +demás, siempre se debe contar con que una parte de los usuarios deinternet no actuali)an con frecuencia su software, por lo que loscambios producidos recientemente es posible que no tengan efectosinmediatos en la mayoría de los usuarios.

Tipografía en pantalla !sB tipografía impresaLa tipografía de las páginas web tienen diferencias sustanciales con latipografía impresa. La resolución de las tipografías de las páginas web estámuy limitada por la cantidad de puntos por pulgada >pppA, que en lossistemas de impresión, a)n los de menor resolución, son muy superiores.

%in embargo, gracias al sistema 9anti+alias: que los sistemas operativosaplican a sus fuentes, es posible me#orar la visibilidad de las mismas. -l9anti4alias: es el suavi*ado de los bordes mediante la aplicación de ungradiente. -n la siguiente imagen, veremos una comparación de fuentes con

y sin anti4alias.



5uc&os diseñadores novels tienden a "usti8car el teto en pantalla,aunque &ablaremos más adelante en este artículo de esto, tener en cuentadesde el principio que un teto #usti$cado no se ve igual en pantalla queimpreso. -l modo de renderi*ar este tipo de alineación no es óptima enpantallas de ordenador. -l navegador tiende a #usti$car el teto a costa deestablecer espacios irregulares entre las palabras, algunas aparecen más

#untas, otras claramente ale#adas provocando saltos bruscos dentro de lasfrases lo que di$culta su lectura. Lo más usable es de#ar el teto alineado ala i*quierda.

La tipografía / las &o"as de estilo en cascada *CSS,1entro de las muc&as venta#as que tiene desde varios puntos de vista elempleo de las &o#as de estilo en cascada >CSSA, una de las más interesanteses la facilidad que da al diseñador en el mane#o de las tipografías. +ntes dela generali*ación del uso del C%%, las características de los diferenteselementos de una página debían establecerse en el 0T5L. +demás de que

el 0T5L no está diseñado para esto, el empleo de las características del0T5L para dar estilo a los elementos del diseño tiene el graveinconveniente de que se debe especi$car para cada una de las etiquetasincorporadas, los elementos particulares de estilo.

-sto quiere decir que, si no se emplean las &o#as de estilo en cascada, cadave* que se establece, por e#emplo, un nuevo párrafo, se deben establecerlas características de la tipografía. -sto se resuelve en forma muc&o mássencilla en C%%, ya que basta con establecer una ve* las característicastipográ$cas del párrafo, para que cada ve* que se coloque la etiqueta RpSen el 0T5L, queden establecidos automáticamente los atributos.

/eamos un e#emplo. Los siguientes códigos corresponden a ambos m'todos.-n el primero, se establecen los atributos de la tipografía en el 0T5L,



mientras que en el segundo, primero se establecen los atributos en la &o#ade estilo y luego aparece el código 0T5L notoriamente simpli$cado.

<.tml><.ead><title>H"M$ de eBemplo</title></.ead><7od8><p alin9:4ente:><@ont 4olo9:ed: @a4e9:aialJ .elveti4a: siGe9:*:><7><i>Esta esuna @ase de eBemplo</i></7></@ont></p><p alin9:4ente:><@ont 4olo9:ed: @a4e9:aialJ .elveti4a: siGe9:*:><7><i>Esta esota @ase de eBemplo</i></7></@ont></p><p alin9:4ente:><@ont 4olo9:ed: @a4e9:aialJ .elveti4a: siGe9:*:><7><i># a.oaesta7le4emos una @ase @inal</i></7></@ont></p></7od8></.tml>

<st8le t8pe9:te6t/4ss:>p te6t(alin 4ente@ont itali4 7old 1Kp6 aialJ .elveti4a4olo ed?</st8le><.tml><.ead><title>H"M$ de eBemplo</title>

<lin= el9:st8les.eet: .e@9:estilo+4ss: t8pe9:te6t/4ss: /></.ead><7od8><p>Esta es una @ase de eBemplo</p><p>Esta es ota @ase de eBemplo</p><p># a.oa esta7le4emos una @ase @inal</p></7od8>

</.tml>

Como puede apreciarse en el e#emplo anterior, el código 0T5L aparecemuc&o más limpio y simple, lo que, además del bene$cio que implica en ela&orro de tiempo en la escritura de código, favorece notablemente la

optimi*ación de la página para los buscadores. Qtra ganancia adicional conel empleo de las &o#as de estilo, es la posibilidad de establecer algunascaracterísticas que son imposibles de instrumentar en el 0T5L, como ladistancia entre caracteres, distancia entre líneas, color de fondo, etc.

Cada día, son más las venta#as que aparecen para el uso de &o#as de estilo.!n e#emplo de ello, son las nuevas características de algunos navegadores,que permiten a los usuarios establecer &o#as de estilo personali*adas,&aciendo que las personas con di$cultades visuales puedan establecer otrostipos de contraste y tamaños de fuente, por e#emplo, me#orandonotoriamente la visibilidad de los tetos. -sto solo es posible mediante la

aplicación de &o#as de estilo, ya que resulta imposible instrumentar cambiosen el código 0T5L.

si se desea agregar una venta#a más de las &o#as de estilo en cascada,podemos decir que mediante su empleo se pueden establecer diferentesdiseños seg)n el medio en el que se visuali*arán, modi$cando, entre otrascosas, las tipografías.

Legibilidad de los tetos en la web2 alineación / espacios

(ara obtener una buena legibilidad de los tetos, se deben tener en cuentavarios factores. La legibilidad afecta notoriamente el inter's del usuario. %ise tienen di$cultades para leer un teto, la atención ba#ará rápidamente,&aciendo que el usuario pierda inter's en el contenido.



!no de los factores que afectan la legibilidad de un teto es la alineación.Los tetos con alineación a la derec&a2 centrados o "usti8cados, tienenutilidad en algunos tipos de tetos muy especiales, pero para bloques deteto más o menos etensos, es me#or que se encuentren alineados a lai)%uierda. -sto se debe a que para el lector es más sencillo ubicar losprincipios de línea, lo que resulta muc&o más difícil cuando el teto seencuentra alineado a la derec&a, debido a la irregularidad de los comien*osde línea ubicados a la derec&a. (or otra parte, los tetos #usti$cados

necesitan modi$car el espacio entre palabras para que tanto los comien*oscomo los $nales se encuentren alineados, como di#imos un poco más arriba,esto que provoca una fuerte asimetría que per#udica la lectura y lapresentación de la página. -l código C%% para alinear el teto es elsiguiente

te6t(alin 4ente /L te6to 4entado L/te6t(alin le@t /L te6to alineado a la iGuiedaJ po de@e4to L/te6t(alin i.t /L te6to alineado a la dee4.a L/te6t(alin Busti@8 /L te6to Busti@i4ado L/

Qtro aspecto que me#ora la legibilidad y la est'tica, es la utili*ación correctade espacios en blanco. -stablecer márgenes a los lados del teto sirvecomo m'todo de establecer separación entre contenidos y proporcionaalivio visual. La utili*ación correcta del interlineado favorece la lectura de lostetos, ya que es muc&o más sencillo ubicar la siguiente línea.

(ara que el usuario no se canse de la lectura, es una buena medidaestablecer párrafos relativamente cortos y con espacios en blanco entreellos, de forma tal que se produ*ca un descanso visual. Qtro factor queprovoca cansancio visual y di$cultades para encontrar la siguiente línea, esestablecer anc&os de párrafo de muc&a longitud, siendo preferible que elteto se etienda más en lo vertical con anc&os de línea más reducidos.

1iseño visual de una página web

1entro de las etapas en las que debe desarrollarse el dise"o de un sitio web, eldiseño visual es una de las )ltimas, ya que muc&os de los aspectos visualesde la página dependen en gran medida de determinaciones tomadas en

otras etapas del diseño.

-sto no quiere decir en modo alguno, que el dise"o visual sea algo super$cialo secundario. (or el contrario, al igual que otros aspectos del diseño de unsitio web, el aspecto visual puede in;uir en la popularidad del mismo.

Tengamos en cuenta que los aspectos visuales pueden influir psicológicamente

en un visitante, y que el diseñador debe tener en cuenta esto y tratar dein;uenciar al visitante para que tome determinaciones o al menos tengauna cierta tendencia a ello.

%i el sitio web que nos encontramos desarrollando se trata de una tiendavirtual, el visitante no sólo deberá sentirse atraído por los productosofertados, sino que además deberá desear acceder a uno de ellos. Losdiseños visuales, tanto para elementos impresos como web, en la actualidad



se encuentran conformados por una serie de blo!ues o módulos dispuestos enuna forma más o menos estandari*ada, que permiten a los usuarios captarcon simples recorridos visuales donde se encuentran los diferenteselementos que componen una página. -sta disposición estandari*ada,responde a modelos de lógica visual que están relacionados con elcomportamiento de los usuarios.

-n base a esto, los diseñadores grá$cos deben plantearse como ob#etivos lacreación de una +erar!uía visual que permita al usuario de una página webdetectar de inmediato cuales elementos son importantes y cuales sonsecundarios, de$nir cuáles serán las regiones funcionales del sitio y formargrupos de elementos relacionados de forma tal que los visitantes puedanver claramente la estructura del contenido.

-n el diseño de páginas web, deben emplearse modelos que a los usuariosles resulten familiares, lo que colabora en la ubicación por parte de losmismos de las áreas funcionales y los contenidos importantes.

Los diseños ecesivamente llenos de elementos, con fondos cargados o con

ba#os contrastes, pueden di$cultar el establecimiento de puntos dereferencia visual que &agan comprensible la organiación del contenido.

Co&erencia del diseño+l navegar por diferentes páginas de un sitio, el visitante debe tener lasensación de que las diferentes páginas que visitan pertenecen a un mismo

sitio. -sto se logra mediante la repetición de algunos elementos, que dan un estilode$nido al sitio. -sta repetición, además de dar una unidad visual a todo elsitio, permite a los visitantes ubicar los elementos más importantes, ya que

se encontrarán con la misma distribución >o similarA en todos los puntos delsitio. -n el siguiente e#emplo, podemos apreciar la página web de la!niversidad de @uenos +ires, donde la co)erencia en el dise"o de las páginasinteriores es evidente presentando muc&os aspectos similares entre ellas,por lo que los usuarios saben que se trata de páginas de un mismo sitio.

http://www.lawebera.es/manual-diseno-web/estructura-paginas-web-como-hacer-importante-aparezca-primero.php




-n el e#emplo anterior, puede apreciarse además, que la repetición noquiere decir que no se puedan &acer ligeras variaciones, como en el caso delcolor de los encabe*ados de las páginas interiores del e#emplo. -sto, enmuc&os casos, es deseable, ya que estas variaciones pueden resultaratractivas y bene$ciar la est-tica del sitio.

Empleo del principio del contraste en el diseño8a creación de +erar!uías entre los diferentes elementos de una página web( es una de las

tareas más importantes de un diseñador* $no de los principios de diseño web que pueden

emplearse para ellos( es el principio del contraste* 9uando un visitante llega a una página

web( se encuentra con una gran cantidad de información visual( la cual debe ser clasificada por

su cerebro para poder acceder a los diferentes elementos*

8a utili)ación de contrastes hace posible diferenciar los elementos principales de los

secundarios y a estos del campo de fondo* 8os visitantes tienen tendencia a seguir una

secuencia lógica en la visuali)ación de los elementos* +n una primera instancia se visuali)an

los elementos gráficos "imágenes( videos( animaciones( etc*'( para luego ver los textos*

El color / el contraste en la tipografía8os textos en s1 mismos son elementos que pueden considerarse de ba+a visibilidad( a menos

que se tomen algunas medidas que permitan que los visitantes detecten con facilidad ciertos

elementos textuales y estos los condu)can al resto*

8os usuarios de internet tienen( en promedio( una ba#a tendencia a leer los textos por mucho

tiempo* +sto es algo que todos los diseñadores deben tener en cuenta( ya que la mayor parte

de la información relevante de la página se encuentra en forma de texto*

Qtro aspecto importante, es que de acuerdo a los dispositivos de visualiación

que se emplee, estos elementos pueden sufrir variaciones más o menosimportantes. +sí por e#emplo, los móviles tienen ba#a resolución de pantallay la de$nición de colores es muc&o menor que en los ordenadores deescritorio. +lgunos ordenadores portátiles tambi'n tienen di$cultades a la&ora de mostrar colores. inalmente, los proyectores dan una imagen



9lavada: y con un brillo y un contraste diferente al que se emplea en unordenador.

(or esto, es conveniente que los diseños sean testeados en diferentesdispositivos, a los efectos de poder corregir posibles diferencias en lavisuali*ación de las páginas, ya sea en el color u otros tipos.

Estilo de una página webCada diseño debe tener un estilo propio. -sto signi$ca que no alcan*ará conque se tomen elementos de otros sitios y tratar de imitarlos. l dise"o es un

arte, y como tal implica la creación de todo lo que compone una página web.+demás de las consideraciones 'ticas, cabe destacar que la est-tica propia deun sitio es lo que lo distingue del resto de las páginas web del mundo.

-l estilo del diseño web debe ser simple >no carente de estiloA para que losusuarios no encuentren di$cultades con el contenido. La simplicidad noquiere decir que se deba tener un diseño con una est'tica pobre, sino quedebe ser de sencilla interpretación, a)n cuando presente elementos dediseño comple#os y llamativos.

1iseño de páginas web 1iseño del documento

6ormalmente pensamos que el diseño de páginas web está referido aldiseño de las versiones que usualmente vemos en los monitores de losordenadores personales, tanto de escritorio como portátiles >en realidad setrata del mismo medioA. %in embargo, el diseño de las páginas tambi'ndebe comprender a los usuarios de los mó!iles, y algo bastante frecuente,

las páginas en modo de impresión.

5uc&as páginas ofrecen tetos o imágenes que posiblemente los usuariosnecesiten o deseen imprimir. -s muy frecuente que cuando tratamos deimprimir una página en su diseño original, esta no tiene las medidasadecuadas y la impresión no se vea en forma correcta. (or ello, muc&aspáginas ofrecen a sus usuarios y visitantes la posibilidad de acceder a una!ersión imprimible del documento.

1el mismo modo, un usuario que desea acceder a una página web desde un

mó!il, encontrará que las versiones para ordenadores de las páginas webpresentan dimensiones inadecuadas para este medio, debiendo emplear lasmolestas barras de despla*amiento &ori*ontal para acceder al todos loscontenidos. 1ebido al notorio incremento del empleo de móviles paraacceder a la web, muc&as páginas ofrecen actualmente versiones de suspáginas que se adaptan a las resoluciones de pantalla de los mismos.

Documentos adaptables al medio desde el %ue se !isuali)aLa opción de crear un documento para cada tipo de medio, si bien es viable,realmente resulta difícil de implementar por dos ra*ones. La primera es queconstituye una verdadera p'rdida de tiempo y energía por parte del

diseñador. -n segundo lugar, la creación de varios documentos para cadauna de las páginas de un sitio implica ocupar muc&o espacio en elser!idor, con el consiguiente aumento de los costos del mismo.

http://www.lawebera.es/manual-diseno-web/empleo-color-diseno-paginas-web.php

http://www.lawebera.es/manual-diseno-web/empleo-color-diseno-paginas-web.php



La me#or solución es la implementación de &o#as de estilo eternas, es decir,separadas del documento 0T5L o O0T5L para cada uno de los medios quese desea implementar y vinculadas al documento principal a trav's de laetiqueta Rlin?S en el R&eadS del documento.

<lin= el9:st8les.eet: .e@9:s4een+4ss: media9:s4eenJ .and.eld: /><lin= el9:st8les.eet: .e@9:pint+4ss: media9:pint: /> <lin=el9:st8les.eet: .e@9:.and.eld+4ss: media9:.and.eld: />

-stas etiquetas tienen la facultad de que una ve* que el navegador &adetectado el medio a trav's del atributo 9media: >mediaV:screen: para losordenadores normales, mediaV:print: para el diseño de la páginaimprimible y mediaV:&and&eld: para los diferentes dispositivos móvilesA,determina cual de las &o#as de estilo es la que debe aplicar. -l siguientee#emplo es una muy conocida página >3i?ipediaA, la cual ofrece a susvisitantes la posibilidad de acceder a una página imprimible. +quí puedenobservarse las diferencias entre un diseño y otro.

.rden del documento5uc&os motores de b7s%ueda indean las páginas web teniendo encuenta cuáles son los elementos que aparecen desplegados en los primeroslugares del documento 3TML, lo que no indica necesariamente que sea elorden en el que se visuali*an, ya que esto puede modi$carse empleando elCSS.

+demás, siempre es conveniente dar un orden lógico a los contenidos, demodo que la página no apare*ca como algo confuso compuesto por

elementos inconeos. +demás de la importancia real de los elementos deldocumento >tanto los visibles como los no visiblesA, los diferentescomponentes tienen un orden de importancia relativa, es decir, una

#erarquía en el orden en que son visuali*ados. 1esde este punto de vista, es

http://www.lawebera.es/de0/compatibilidad-web-navegadores.php

http://es.wikipedia.org/wiki/Wikipedia:Portada

http://www.lawebera.es/de0/compatibilidad-web-navegadores.php

http://es.wikipedia.org/wiki/Wikipedia:Portada



importante que los diferentes contenidos apare*can ordenados de acuerdocon esta #erarquía, y su visuali*ación corresponda con la misma.

Selección de los elementos !isuali)ablesLa presentación de un documento en varios formatos para su visuali*aciónen diferentes medios, tambi'n conlleva la selección de elementos. Cuandose diseña una página web, algunos elementos de este formato soncompatibles con los diseños de impresión, mientras que otros pueden ydeben ser obviados, dado que no aportan ninguna utilidad al usuario ypuede ocupar un espacio que, en los formatos de impresión, pueden resultar)tiles para epandir tetos o imágenes.

+lgunos e#emplos de elementos que pueden ser de#ados de lado, son pore#emplo, los men7s y las columnas >siempre y cuando no tengancontenidos relevantes y relacionados con el resto del documentoA. Los linsno serán visuali*ables en un formato de impresión, pero si se puede colocaruna dirección web para que pueda ser visible en el documento impreso.

6tili)ación de tetos alternati!osLa etiqueta Rimg NS, la cual determina la ubicación de una imagen en undocumento web, tiene la posibilidad de insertar un teto alternati!o atrav's del atributo alt5teto alternati!o5. +lgunos buscadores le danimportancia a los tetos alternativos de las imágenes, por lo que esaprovec&ado en el posicionamiento de una página web en los mismos. %inembargo, este atributo tiene una importancia que va muc&o más allá decolaborar en la tarea de indeación de una página por las palabras claveempleadas en este atributo. %e trata de la accesibilidad.

-ste teto alternativo es el que los medios destinados a las personas condi$cultades visuales utili*an para la descripción de lo que se muestra en unapágina web. Tambi'n los videos tienen la posibilidad de agregardescripciones en forma de teto, los cuales pueden ser interpretados por losmedios para discapacitados.

$daptación al medio empleadoLas personas que navegan por la web, emplean los sitios web de formasdiferentes, de acuerdo a sus necesidades, gustos o posibilidades. -l &ec&o

de que un porcenta#e de los usuarios de 8nternet tengan di$cultadesvisuales o ausencia completa de la visión, debe orientar una buena parte delos contenidos a su uso por parte del software de lectura. Qtro porcenta#eimportante de los internautas, acceden la mayor parte del tiempo a la web atrav's de los m)ltiples dispositi!os mó!iles, por lo que las páginasdeberían contar con un diseño especí$co para este tipo de dispositivos, quepermita la visuali*ación de los contenidos en ba#as resoluciones de pantalla.

lo más importante, todo esto, no debe requerir un esfuer*o desmesuradopor parte del diseñador, el cual cuenta con medios a su alcance para que

esta tarea resulte sencilla y sin tener que reali*ar modi$caciones en eldocumento original, tanto si está escrito en 0T5L como en O0T5L.



-structura de una página web diseño de plantilla

!n sitio web no es una unidad real, sino que se trata de una serie depáginas independientes. -l concepto de unidad de un sitio está dado porla unidad conseguida a trav's del diseño. -sta unidad implicanecesariamente que el diseño tenga co&erencia !isual. -n la práctica,además de ser deseable, salvo pequeños detalles en la estructura y algunospequeños cambios visuales, es poco práctico y una gran p'rdida de tiempoestablecer diseños diferentes para páginas o secciones de un mismo sitio.

1entro de los ob#etivos que debe tra*arse un diseñador a la &ora de iniciarel diseño de un sitio web, está la identidad institucional, o lo que esigual, lograr que los usuarios identi$quen cada página del sitio como partede una unidad.

-sto se logra empleando plantillas de diseño, o sea, la repetición de unmismo diseño con variación casi en forma eclusiva en los contenidos. %inembargo, eiste la posibilidad de que algunas secciones o páginas del sitio

requieran un tratamiento especial, por lo que seguramente el diseñadornecesitará reali*ar más de una plantilla, que generalmente son variacionesde una misma plantilla original.

Dónde comen)ar el diseño de la plantilla Todo diseñador novato tiene la tendencia natural de iniciar el diseño de unsitio construyendo la página inicial. %in embargo, la página inicial es unapágina con características especiales, por lo que si lo que se desea esestablecer una unidad visual del sitio, lo correcto sería comen*ar por laspáginas cuyo diseño se repetirá. -sto quiere decir, que lo me#or escomen*ar diseñando las páginas interiores. Luego, el m'todo debería

continuar con las variaciones que algunas de las páginas interioresrequieren, para $nali*ar en el diseño de la página inicial.

Las páginas interiores deben ser diseñadas teniendo en cuenta cuáles sonsus funciones, las que para todos los sitios son las mismas

(a!egación local e inserción de la página dentro de la estructura #erárquica del sitio.

4-stablecer el marco del diseño, introduciendo los contenidos en formaco&erente con el resto del sitio.

4-stablecer el marco grá8co, dándole al sitio una co&erencia visual,aunque lo su$cientemente ;eible como para adaptarse a las necesidadesde cada sección o contenido

+n casos de sitios muy comple#os( puede ser necesario establecer plantillas secundarias para

diferentes niveles de estructura* !ambién es conveniente en estos casos( establecer páginas de

submenú( que facilitan la navegación interna dando al usuario nuevos puntos de apoyo para

la navegación*

7lgunas páginas web( por ra)ones de mar0eting necesitan establecer ?entradas alternativas@

al sitio* 5or e#emplo( la página web de una cadena de supermercados( durante el per1odo quedura una oferta especial( necesita que sus visitantes ingresen por otra página de inicio( quecontiene los detalles de la oferta* +sta página que funciona como entrada alternativa( necesitatener una clara vinculación visual con el resto del sitio( y además debe orientar al visitantepara que acceda a la página principal del sitio*



+n sitios de grandes corporaciones internacionales o negocios con varias sucursales( tambiénes posible que deseen que cada una de las ramas tenga una sección destinada a cada una desus divisiones* +sto puede reali)arse estableciendo secciones o sitios independientes( los quedeben( al igual que en los casos anteriores( mantener una unidad visual con el sitio principal(además de la mayor vinculación que sea posible*

La página de inicio-l diseño de la página de inicio, si bien tiene características especiales que

&ay que tener en cuenta, una ve* que los pasos anteriores ya &an sidoresueltos, resultará sensiblemente más sencilla de reali*ar que si se &ubieracomen*ado el diseño por ella. esto está relacionado con que gran partedel traba#o de diseño ya &a sido reali*ado.

La página de inicio tiene cuatro elementos por los que está compuesta.Cada uno de estos elementos es importante, aunque la importancia y larelación que tienen entre ellos es variable de un tipo de sitio a otro. Loselementos son los siguientes

Arincipio de identidad

(a!egación

Enfo%ue del contenido

3erramientas

-l diseño de una página de inicio debe siempre contemplar estos cuatroelementos constitutivos, aunque la importancia que debe darse a cada unode ellos está relacionada con lo que el visitante querrá encontrar en el sitiocuando ingrese. !n e#emplo notable es la diferencia que eiste entre las

páginas de inicio de los buscadores 2oogle y a&ooW. 5ientras que la páginade inicio del buscador de 2oogle se centra casi eclusivamente a lana!egación, la página de inicio de a&oo destaca otros elementos, comonoticias destacadas >contenidoA y otros servicios >&erramientasA.

Qtras páginas se deben centrar más en la imagen corporati!a >principiode identidadA, aunque en el caso de que no se trate de marcas plenamenteidenti$cables por tener una gran presencia, debe agregarse además brevescomentarios eplicati!os que orienten al usuario en lo que encontraránen el sitio. %i no se posee una marca reconocible a simple vista porcualquier usuario, la simple presencia de un logotipo, por bien diseñado queest', no será su$ciente para que el usuario sepa que es lo que encontraráen el resto del sitio.

Distribución de los contenidos en la página principal+lgunos sitios, como los destinados a las noticias, necesitan introducir unagran cantidad de contenidos de todo tipo en su página de inicio. -stonecesariamente requiere que &aya una distribución ordenada de formatal que los principales contenidos se encuentren en los lugares más

destacados. %iguiendo con el e#emplo de una página de noticias, las noticiasprincipales deberían tener acceso desde un lugar cercano a la esquinasuperior i*quierda.



-n cambio, en los sitios en cuya página principal puede introducirse poco oning)n contenido, en los lugares más relevantes debería colocarseelementos que generen un impacto !isual en el usuario, de forma que sesienta atraído a buscar contenidos en páginas secundarias.

6so de men7s desplegables(ara la mayoría de los usuarios normales, los men7s desplegables suelen

ser difíciles de mane#ar, y en muc&os casos ni siquiera descubren que seencuentran allí. -ste tipo de men)s por lo general implican que el usuariodebe posar el puntero en una *ona de espacio bastante limitado, lo quepuede generar alguna complicación a usuarios inepertos o personas conalg)n tipo de problema motri*.

5enos aconse#able a)n es el empleo de men)s desplegables que usan #avascript o similares, ya que los enlaces contenidos en estos men)s no sondetectados por los motores de b)squeda, que no e#ecutan los scripts.

Contenido de los men7sLos men7s principales, aquellos más visibles, generalmente ubicadoscerca de la cabecera de la página, debe estar destinado a mostrar lassecciones más apetecibles por los visitantes que ingresan a la página porprimera ve*. -sto se debe a que los usuarios &abituales de un sitio,generalmente conocen en qu' secciones pueden encontrar la informaciónque buscan, mientras que los usuarios que ingresan por primera ve*, debenser rápidamente orientados a las secciones que necesitan.

Aáginas de bien!enida%alvo algunos sitios muy especiales, la mayoría de los sitios no solonecesitan una página de bien!enida >muc&o menos con imágenesgrandes o animaciones ;as& que llevan muc&o tiempo de carga u obliganal usuario a buscar un botón de salida y &acer clic? en 'lA, sino queconstituye un verdadero problema, ya que se trata de la misma página a laque llegarán los motores de b7s%ueda, donde no encontrarán contenidoscon información clasi$cable y muy pocos enlaces.

-l equilibrio en el diseño web

-l diseño de una página web incluye el empleo de varias disciplinas, entrelas que se encuentra el diseño grá$co. La presentación visual de una páginaweb es una representación grá8ca y como tal sigue los lineamientosgenerales del diseño grá$co. Los elementos componentes de una páginaweb deben ser combinados de forma tal que el ob#etivo con el que se diseñasea logrado. Cada componente de la página web tiene una "erar%uíarespecto de los otros, por lo que es necesario buscar la combinación deelementos que &aga posible que esta #erarquía se vea resaltada. -ldiseñador debe lograr que la página tenga la máima e8cienciacomunicati!a que sea posible. -sto solo es posible mediante el impactovisual, logrado con la correcta disposición de los elementos.



(ara que el mensa#e llegue al usuario, todos los elementos deben estarequilibrados. -ste equilibrio tiene una serie de reglas básicas que tododiseñador de páginas web y diseñador grá$co debe conocer. %in embargo,un error frecuente en el diseño es reali*ar el mismo para luego introducir loscomponentes, cuando en realidad el diseño debe estar pensado para quelos componentes se vean de tal forma que el mensa#e llegue en formacorrecta al usuario.

E%uilibrio de las proporcionesCada componente de una página web tiene un peso !isual, el cualdepende de sus atributos, como forma, color, tamaño, etc. -ste peso visual,es la proporción. Lo primero que se nos ocurre al &ablar de proporción, esel tamaño relativo del ob#eto en cuestión. !n elemento más grande queotro, tiene una atracción !isual superior que el segundo. (ero además, lacarga visual de un elemento tambi'n depende de otros atributos, como elcolor. !n ob#eto de color saturado, tiene un peso visual superior que otrocuyo color tiene una saturación menor. Las formas tienen tambi'n

in;uencia en la proporción de los elementos. +sí pues, un elemento deforma irregular tiene mayor atracción visual que un ob#eto de forma regular.

Todos estos atributos deben guardar una proporción tal que los elementosque se desee resaltar sean más visibles que otros, pero de forma tal quetampoco los elementos secundarios 9desapare*can:. 0ay muc&as formas deconseguir que las proporciones de los diferentes ob#etos se adec)en al $nperseguido.

E%uilibrio de las escalasLas proporciones de los diferentes elementos de un diseño tienen unarelación entre sí que denominamos escala. -sta escala, que en principiopensamos eclusivamente en relación al tamaño de los ob#etos, abarca atodos los atributos de los mismos. -sto quiere decir, que deben tenerse encuenta las escalas de tamaño, de forma, de color. Cada uno de los atributosde un ob#eto, tiene una dimensión, la cual no es absoluta, sino relati!a, yaque depende de los atributos de los demás ob#etos. (or e#emplo, uncuadrado de =BK pieles de lado es grande si se encuentra #unto a otro deIK pieles, pero es c&ico si se le relaciona con uno de BKK pieles. Lo mismo

sucede con los colores. !n ob#eto de color amarillo sobre fondo negro esmás llamativo que uno de color gris ubicado a su lado" sin embargo, elmismo elemento amarillo, sobre fondo blanco es muc&o menos llamativoque un ob#eto de color ro#o ubicado tambi'n a su lado.

La escala, en de$nitiva, es muy importante para relacionar ob#etos dediferentes proporciones. Todo diseño equilibrado debe estar integradopor elementos que mantienen una cierta relación entre sus proporciones. !ne#emplo práctico lo vemos en el siguiente diseño, donde >solo por tomar larelación eistente entre algunos de sus elementosA la escala del encabe*adoy del men), tienen una relación tal que la atención ;uye rápidamente &aciael primero, pero con una diferencia tal que &ace posible que el men) seavisible para los usuarios y dar una buena navegabilidad a la página. -lequilibrio de las escalas, en este e#emplo, puede apreciarse en el tamaño,en el color y en las formas.



+grupación deelementos

1entro de las reglas del equilibrio deun diseño, debe tenerse muy presente queuna de las formas de lograr un

me#or

equilibrio entre losdiferentes elementos, es laagrupación de los mismos. La

agrupación, además, consigue otro factor importante en un diseño, que esel orden. La agrupación de elementos es natural en el ser &umano, quetiene la tendencia a colocar #untos a ob#etos a$nes. -sto, en el diseño depáginas web, tiene como $nalidad darle lógica y racionalidad a laubicación de los diferentes elementos, de forma tal que la comunicación delmensa#e sea efectiva.

Los componentes de una página pueden agruparse de acuerdo a varios

criterios

Aor proimidad, la forma más elemental de agrupar los ob#etos, queconsiste en agruparlos de acuerdo a su cercanía física.

+Aor seme"an)a, que consiste en agrupar ob#etos de acuerdo a su parecidovisual.

+Aor continuidad, es decir, de acuerdo al signi$cado de los elementos.

+Aor simetría, que es agrupar ob#etos de manera tal que den la sensación

de conformar una $gura conocida o sim'trica.

La agrupación es uno de los equilibrios más sencillos de ver en un diseñoweb. -s muy com)n, por e#emplo, ver agrupaciones de imágenes, o que lostetos se encuentren en un lugar determinado de la página, los botones denavegación siempre están agrupados en un men), etc.

$lineación del diseño(ara que la composición no apare*ca como caótica, los diferentes elementos

y grupos de elementos deben aparecer ordenados de acuerdo al tra*ado delíneas imaginarias, tanto verticales como &ori*ontales, que se denominanreticulado. La alineación es importante, debido a que cuando se colocanmuc&os ob#etos dentro de un diseño, la forma más sencilla de que losusuarios logren ubicarlos e identi$carlos es que se encuentren alineados.-sto se ve acentuado por el &ec&o de que la propia forma de los monitoreses rectangular, por lo que el ordenamiento seg)n líneas rectas es algonatural. -n la imagen siguiente, vemos una página alineada, tanto verticalcomo &ori*ontalmente y donde resulta muy sencillo tra*ar líneasimaginarias sobre las que se encuentran los componentes



La alineación de los tetos, es además, un aspecto importante en lacomunicación. Lo usual, siguiendo la tradición escrita, es que los mismos seencuentren alineados a la i*quierda, aunque ecepcionalmente y debido aciertas circunstancias, los tetos pueden aparecer alineados a la derecha(

centrados o #ustificados( aunque lo recomendable( para facilitar la lectura( es que se emplee laprimera de las alineaciones*

E%uilibrio de contenidos Toda página web está integrada por elementos tetuales, grá$cos yocasionalmente con contenidos de otros medios. 1esde el punto de vista deldiseño de una página web, y dado la relevancia de los dos primeros, nosreferiremos al equilibrio entre los elementos grá$cos y tetuales. Loselementos tetuales son indispensables, ya que aportan la mayor partede la información que se desea transmitir. Los elementos grá8cos,además de tambi'n &acer aportes de información, suministran lassensaciones visuales necesarias para acompasar y resaltar el sentido delmensa#e de la web.

-l abuso de cualquiera de los dos tipos de elementos es contraproducente,ya que los usuarios necesitan la información por la que llegan a la página,pero tambi'n necesitan sentirse atraídos por el lengua#e visual. (orconsiguiente, el equilibrio entre estos tipos de componentes de una página,es fundamental.

1erar%uía !isual!na página web e%uilibrada debe mantener una cierta "erar%ui)ación

de los contenidos, de forma tal que la vista del usuario sea guiada enforma adecuada a trav's de los mismos. La #erarqui*ación de loscomponentes comien*a con la ubicación de los mismos. 1ado que elsistema de lectura empleado en occidente es de i*quierda a derec&a y dearriba &acia aba#o, eiste una tendencia natural en los individuos a recorrerlos ob#etos grá$cos en ese orden. (or consiguiente, es natural que elelemento más importante de una página web >su logotipoA se encuentreubicado en la es%uina superior i)%uierda o muy cerca de ella, seguido&acia la derec&a por el título de la página.

La #erarqui*ación de los elementos componentes de una web, puedereali*arse tambi'n empleando colores y contraste. Todo contenido de unapágina web debe tener establecida su #erarquía en la misma, empleandopara ello cualquier t'cnica de diseño.



%elección de la paleta de colores para un diseño web

La selección de una adecuada paleta de colores para el diseño de unapágina web, puede ser factor decisivo en el 'ito o el fracaso. %i bien escierto que los colores y sus combinaciones dependen en cierta medida de la

moda y de factores sub"eti!os, eisten ciertas reglas elementales quedeben conocerse. La combinación de colores intenta provocar una reacciónemocional en el observador. 6o todas las personas tienen el mismo gustopor los colores, aunque es posible establecer una tendencia de acuerdo conel grupo social al que el posible usuario pertenece.

1entro de la selección de los colores de una página, &ay que tener encuenta varios factores, como el tipo de página, la estructura del diseño y latemática de la misma. Cada uno de estos factores puede alterarsustancialmente los criterios para la selección. Como se podrán imaginar, lapágina de una empresa de seguros y otra de ventas de #uguetes debenemplear combinaciones de colores basados en criterios muy diferentes.Qtro factor a tener en cuenta es la armonía de los colores que se deseaemplear. Los tipos de armonía son varios, y cada uno de ellos arro#aresultados muy dispares.

Tipos de combinaciones de color

Las combinaciones del color &a sido motivo de investigación por parte deartistas y diseñadores por milenios. 1esde las primitivas pinturas rupestrespuede verse la preocupación de los artistas y diseñadores de todos lostiempos por armoni*ar y combinar los colores para lograr los efectosdeseados en el observador.

Combinaciones monocromáticas

La primera y más sencilla de las combinaciones de color es lamonocromática. -n estas combinaciones las )nicas variaciones estándadas por la lu*. %i se toma un color base y se le agrega blanco o negro

>que es la forma de agregar o quitar lu*A en diferentes proporciones, seobtiene una gama del mismo color. -stas combinaciones pueden abarcar alblanco y el negro, dando una gama de grises, algo que es posible apreciaren algunas páginas web.

Las combinaciones monocromáticas empleadas en el diseño web, suelenemplearse en páginas en la que se busca un efecto de sobriedad / deelegancia. -videntemente si lo que se pretende es llamar la atención de losusuarios, este tipo de combinaciones no son las indicadas. %e emplean en



páginas en las que se desea provocar una sensación de tranquilidad yseriedad. +nalicemos el e#emplo siguiente

-sta página corresponde a la edición digital de un periódico. La paleta decolores empleada tiene como base el color a*ul, cuyos matices puedenverse en el color de fondo, el encabe*ado, el men) y la tipografía.(osiblemente el motivo de la selección de esta combinación se deba a quese desea presentar un diseño sobrio >el e#emplo lo es en etremoA yelegante. -sto puede deberse a varios motivos. -l primero es queposiblemente su p)blico est' conformado por personas de mediana aavan*ada edad y con tendencias más o menos conservadoras. Qtro efectoconseguido con el establecimiento de una paleta de coloresmonocromática es que el contenido grá$co y tetual adquiere unarelevancia muc&o mayor al no verse opacado por la coloración del diseño.

Combinación de colores análogos

%e denominan colores análogos a aquellos que, ubicados en la rueda decolores, se encuentran en lugares próimos. -ste tipo de combinaciones se

dan muy frecuentemente en ambientes naturales. %i se observa un bosqueo una pradera, veremos que los colores que se combinan son amarillos,verdes y celestes, colores que se encuentran próimos en la rueda decolores.

-s frecuente encontrar este tipo de paleta de colores en páginas webdestinadas a los productos naturales o se desea ealtar la vinculación de loque se publica con los ambientes naturales. -n el e#emplo siguiente, seutili*a una paleta de colores que incluye naran#a, amarillo y verde como



base >con diferentes grados de luminosidadA para dar un toque natural alestilo.

Combinación de colores opuestos

Cuando lo que se desea generar es un alto impacto !isual a trav's delcolor, una de las formas de lograrlo es utili*ando una paleta de colores queincluya colores opuestos. Los colores opuestos son aquellos que se

encuentran en oposición dentro de la rueda de colores, como por e#emploro#o y celeste, verde y violeta, amarillo y a*ul. -stas combinaciones suelenemplearse en el diseño de carteles para la vía p)blica, dado que consiguenatrapar la atención de los usuarios de las mismas.

-l siguiente es un e#emplo de utili*ación de colores opuestos en la paleta deuna página web. -n este sencillo pero llamativo diseño, se pretende atraerla atención del p)blico &acia los contenidos con fuertes colores opuestos,además de distinguir claramente unos de otros gracias a que los coloresopuestos tambi'n generan contraste.

Qtra forma de emplear los colores opuestos es &acer una tríada decolores, empleando dos colores complementarios y uno opuesto deforma que se obtiene las venta#as de ambos sistemas, aunque el impactovisual conseguido es algo menor que en el empleo de combinaciones deopuestos. Tal es el caso de la web que &emos tomado como e#emplo, dondela combinación incluye dos colores análogos, como el naran#a y el amarillo,que se encuentran opuestos al verde, incluido en la paleta de colores deeste sitio.



5odelos de paletas de colores

+ pesar de que las posibilidades de combinar los diferentes colores son casiin$nitas, no todas las combinaciones resultan efecti!as en su utili*ación enel diseño de páginas web. -iste una gran cantidad de paletas de colorescuya efectividad y atractivo se encuentran probados gracias a su uso.

1entro de las posibilidades de aplicación del color, tambi'n se debe

distinguir algunos elementos que son importantes. (or e#emplo, los colorespueden ser tomados tal como se encuentran en el círculo de colores, dandocomo resultado una combinación de colores !i!os muy llamativos. %inembargo, tambi'n es posible emplear matices con variaciones en laluminosidad, dando colores pasteles o apagados.

Qtras formas de combinación emplean el blanco y el negro, ya que amboscolores se combinan con muc&a facilidad con cualquiera de los demáscolores. -sta facilidad de combinación del blanco / el negro &a &ec&o quesean incluidos en la mayoría de las paletas de colores.

+ continuación, les mostramos algunos e#emplos de paletas de colores delas muc&as posibles, aunque animamos a la eperimentación como m'todode obtener las paletas adecuadas para el sitio web que se encuentra encreación

0erramientas para diseñadores web -ditores 0T5L

%i bien &oy en día contin)a la discusión acerca de la conveniencia o no deemplear editores 3%8%2 o no, sin entrar en &acer argumentaciones sobreello, pasaremos a describir una de las &erramientas indispensables paratodo diseñador web los editores 0T5L.

+lgunos diseñadores pre$eren seguir escribiendo el código directamentesobre un editor de teto plano, al estilo del @loc de 6otas de 5icrosoft,otros pre$eren los editores de teto especiali*ados en lengua#es web y de

programación, otros pre$eren los editores de teto con ventana de vistaprevia, mientras que otros emplean la opción más avan*ada, que son loseditores WS?W@.



Los primeros generan el arc&ivo 0T5L, las &o#as de estilo y los scripts sobreuna o varias &o#as de teto plano y valoran los resultados directamentesobre el o los navegadores. -ste m'todo es el más primitivo, aunque no &aperdido vigencia. 1urante el aprendi*a#e de los lengua#es de diseño web yde programación, todos los centros de enseñan*a inician el estudio de3TML, O0T5L y C%% con este rudimentario m'todo. la ra*ón es que es elme#or m'todo para conocer a fondo los lengua#es de diseño y programación.La generación de código a partir de editores de teto plano implica

necesariamente la comprensión plena del funcionamiento del sistema.-l segundo grupo de diseñadores emplean editores de teto, pero quetienen algunas funciones especiali*adas en los lengua"es de diseño web/ programación, como autocompletado de etiquetas de cierre, coloreadode acuerdo a la sintais del lengua"e, posibilidad de seleccionar lasetiquetas de una barra de &erramientas y otras muy variadas. (or e#emplo,cuando se escribe una línea de código, 'sta no adquiere los diferentescolores correspondientes a la sintais &asta que no está correctamenteescrita. (ara visuali*ar los resultados, emplean uno o más na!egadores, alos que, tras cada cambio, se le &ace clic? en el botón 9refrescar: para verlos mismos.

-l grupo de diseñadores que optan por la tercera opción, cuenta con una&erramienta en el editor que &ace las veces de na!egador, por lo quepueden ir viendo los cambios que van efectuando a medida que los van&aciendo.

Los editores WS?W@ son algo bastante más comple#o, y consiste en>tal como indica la sigla que les da nombre What You See Is What You Get –

Lo que ves es lo que obtienesA la creación de páginas web arrastrando y

colocando, completado por elementos que permiten modi$car los atributosde los elementos que se van colocando.

-ditores de teto plano y navegador

Los diseñadores web que emplean esta opción desec&an la ayuda queconstituye el software especiali*ado. 6o tiene muc&as venta#as sobre elresto de los m'todos, solo la certe*a de que quienes lo &acen tienen unpleno dominio de los diferentes lengua#es. Como m'todo de aprendi*a#e,seguramente sea el me#or, ya que el conocimiento del lengua#e de#a de seruna opción para ser absolutamente obligatorio. %iempre, y no solo paraquienes optan por este sistema de traba#o, es necesario contar con !ariosna!egadores, siendo el mínimo recomendado de tres, ya que lasdiferencias en la interpretación del código por parte de los navegadores,obliga a visuali*ar las páginas en más de un navegador.

-ditores de teto especiali*ados en 0T5L y C%%

-l desarrollo del diseño web y el creciente n)mero de diseñadores &aplanteado la posibilidad de crear &erramientas especiali*adas en la escritura

de códigos. La cantidad de editores de este tipo eistentes es enorme,siendo en su mayoría gratuitos, aunque algunos son de pago o forman partede paquetes de software para diseñadores web. Qtra característica que losdiferencia a unos de otros, es la especiali*ación en los diferentes lengua#es.+lgunos editores tienen soporte casi eclusivamente para 3TML, aun



cuando colorean varios lengua#es más, mientras que otros editores tienen&erramientas especiales para diferentes tipos de lengua#es, incluyendo loslengua#es de programación.

-ditores de teto especiali*ados con ventana de vista previa

Comparten muc&as de las características descriptas para el grupo deeditores anteriores, con el elemento distintivo de poseer entre sus&erramientas un !isor en tiempo real >generalmente en la misma ventana

que se escribe el códigoA que permite al diseñador web observar elresultado de lo que se encuentra escribiendo sin tener que ir a la ventanadel navegador y refrescar la página.

-ditores 3%8382

Tambi'n cuenta entre sus &erramientas la edición de los códigos sobre tetoplano, aunque su me#or &erramienta es la ventana donde el diseñadorreali*a las modi$caciones arrastrando y soltando con el ratón, en un sistemasimilar al que se emplea en procesadores de teto como 5icrosoft 3ord o3riter.

+lgunos de estos editores son de mane#o tan sencillo, que para muc&as delas tareas propias del diseño de páginas web no se requiere conocimientode lengua#e 0T5L. %in embargo, a la &ora de darle atributos a los diferentescomponentes de la página, el diseñador deberá contar con conocimientosbásicos de 0T5L y C%%.

-lección del editor 0T5L

Cada diseñador debe desarrollar su m'todo de traba#o, aquel con el que sesienta más cómodo. 6o eisten recetas preestablecidas y &ay tantas formasde traba#ar como diseñadores. Lo mismo sucede con el software que se &ade seleccionar. -n una primera instancia, el diseñador debe elegir el m'todoque empleará y luego probar &erramientas &asta encontrar una que losatisfaga.

+ continuación damos lasdescripciones de algunos delos programas más

conocidos, pero solo sonalgunos de una muy ampliagama.

+lgunos editores de tetoespeciali*ados

;lue8s&

1esarrollado inicialmente para Linu, en la actualidad &ay versiones paraotros sistemas operativos como %olaris, 5acQ%4O y otros, aunque no eisteuna versión para 5icrosoft 3indows.



La )ltima versión estable es la =.KH de mar*o de BKKU.

%oporta varios arc&ivos abiertos a la ve*

5arcado de sintais personali*able para 0T5L, (0(, M%(, %FL, O5L, C%%, Mavascript, (yt&on, (erl, (ascal y otros.

+sistentes para creación de documentos.

+sistentes para la creación de tablas y marcos.

%oporta diferentes #uegos de caracteres.

1iálogos para la inserción de imágenes.

Traducido a BB idiomas, entre los que se encuentra el español.

2ratuito.

Licencia 2(L.

Wea!ersla!e

1esarrollado para 3indows, es compatible con todas las versiones de estesistema operativo desde 3indows P.

Totalmente portable

Xltima versión estable ..=U de noviembre de BKKP.

(uede traba#ar con varios arc&ivos a la ve*.

5arcado con colores de sintais para 10T5L, C%%, M%, (0( >J y PA, 5y%FL,(-7L, C, CYY y otros.

/entana de colores.

8nspector de etiquetas.

6avegador de arc&ivos e imágenes.

Traducido a varios idiomas >incluidosA entre los que está el español.

2ratuito.%oftware propietario.

-ditores de teto con ventanas de vista previa

$ptana

3indows, 5acQ%4O y Linu.

Cliente T(.



(osibilidad de instalar un plug4in que permite la escritura en el lado delservidor.

(anel de vista previa irefo e 8nternet -plorer.

%oporte principal para 0T5L, O0T5L y C%%, aunque tambi'n cuenta con&erramientas para (&p, (yt&on, 7uby, C%%, +#a, 0T5L y +dobe +87.

Xltima versión B.K.B de BKK.

5arcado de sintais por colores.

!na muy variada serie de &erramientas y diálogos.

2ratuito.

26! N 2(L.

$rac&nop&ilia

!ni, Linu, 5acQ%4O y 3indows

Xltima versión P.J >Qctubre de BKKA

/entana de vista previa.

0T5L, C%%, M%, CYY, C28, (-7L, Mava y otros.

5arcado de sintais en colores.

2ratuito.

%oftware propietario.

3TML+it

• -ste software solo es compatible con5icrosoft 3indows P en adelante.

• /entana de vista previa m)ltiple.

• /alidación de código.

• Cliente T(.

• 0T5L, O0T5L, O5L, C%%, O%L, (0(, +%(, /@, CNCYY, %FL, Mava, Mavascript, 1elp&i, (erl

• %ugerencias y sistema de corrección de errores.

• 2ratis.

• %oftware propietario.

Editores WS?W@Adobe Dreamweaver



• /ersiones para 3indows y 5acQ%4O.

• Xltima versión estable C%J >=K.KA deBKKU.

• %e le considera el editor más potente, pero tambi'n el más pesado>PJ 5@ antes de instalarA y el de mayores requerimientos de&ardware.

• 7equerimientos mínimos procesador de más de = 20*, 3indows O( osuperior o 5ac Q% O v=K.J.==<=K.P.J, P=B 5@ de 7+5, = 2@ deespacio libre en el disco, pantalla =BUK HIJ con tar#eta de =I bits,1/147Q5, banda anc&a para servicios en línea.

• /entana de visuali*ación.

• %ugerencias de código.

• 0erramientas avan*adas para imágenes de (&otos&op >(%1A.

• !tili*a C%%.

• 1atos dinámicos >sencillosA sin empleo de O5L ni bases de datos.

• 1iseño sin escritura de código >aunque el usuario puede modi$car elcódigo manualmenteA.

• +lto costo > !%1A

• %oftware propietario.

NVU

• 5ultiplataforma

• Xltima versión estable =.K de #unio deBKKP. -n la actualidad se &a abandonado sudesarrollo.

• Cliente T(.

• -dición de código fuente.

• 5arcos, formularios, tablas, plantillas de diseño, &o#as de estilo C%%,etc.

• 2ratis.

• 5(L N 2(L N L2(L.

Amaya

• 5ultiplataforma



• Xltima versión ==.= de enero de BKK.

• 6avegador.

• 2enera páginas 0T5L J.K=, O0T5L =.K, O0T5L @asic, O0T5L =.=,0TT( =.=, 5at&5L B.K, muc&as características C%% B.

• 7enderi*ado de imágenes.

• 0erramientas para imágenes vectoriales >%/2A.

• -dición 3%832.

• 2ratuito.

• Licencia 3C.

-structura de una página web -structura del diseño

Fu' es un sitio webG !n sitio web es una serie de páginas indi!iduales,que pueden o no tener alguna coneión temática. %in embargo, tendemos apensar en los sitios web como si se tratara de una unidad. -sto estásustentado en base a dos grandes criterios, que son los enlaces quepermiten la formación de cierta co&esión, y la unidad visual, que ende$nitiva es lo que brinda al usuario la sensación de unidad del sitio.

(ara &acernos una idea de estos conceptos, imaginemos una colección delibros de una editorial. -stas colecciones suelen estar formadas por libroscon dimensiones y encuadernación id'nticas, para que se tenga la

sensación !isual de que se trata de una unidad, por más que se trate deuna serie de libros independientes, de autores y temáticas disímiles. Lomismo sucede con los sitios web. Los grandes portales suelen emplearcierta unidad visual para dar a entender al usuario que se encuentra en unsitio determinado.

+l igual que en otras disciplinas, el diseño web &a ido evolucionando &astallegar a ciertos criterios estándares. 1esde el punto de vista del usuario,tiene la venta#a &acer predecibles a los sitios, permitiendo un rápido accesoa todo sin necesidad de reali*ar b)squedas por toda la página. 1esde el

punto de vista de los diseñadores, salvo pequeños cambios que puedenreali*arse, por regla general esta importante parte del diseño ya seencuentra prácticamente resuelta.

-structura del diseño web

La gran mayoría de las páginas web tienen divisiones o seccionessimilares. Lo usual es que, en la parte superior de la página se encuentre unencabe)ado, seguido de un cuerpo principal que suele estar ;anqueado

por una columna lateral >tanto a la i*quierda como a la derec&aA o doscolumnas laterales, seguidas al $nal de la página por un pie de página. Laimagen siguiente es un esquema típico de una página web. %e debe teneren cuenta que este esquema sufre variaciones, aunque normalmente sonpequeñas.



-l encabe*ado

1e todas las partes de la estructura del diseño web, el encabe*ado es laque mayor tendencia tiene a repetirse entre páginas de un mismo sitio. +uncuando el sitio tenga grandes diferencias en estructura y contenido entresus páginas, si mantiene una unidad en su encabe*ado los usuariospercibirán la sensación de unidad que el sitio requiere.

-l encabe)ado es una fa#a &ori*ontal que ocupa todo el anc&o de la página

en la parte superior de la misma. + la i*quierda del encabe*ado sueleubicarse el logotipo del sitio, que ocupa un área importante dentro delmismo, aunque suelen &aber diferencias importantes de un sitio a otro. -staimagen debe tener un enlace a la página principal del sitio, ya que es unode los estándares más respetados por los diseñadores y una de las formasque tienen los usuarios de volver al inicio.

1esde el $nal del logotipo, ocupando el centro y la *ona derec&a delencabe)ado, frecuentemente se sit)an una serie de fran#as de diferentesgrosores. -n la fa#a superior, se encuentran algunos enlaces generales de la

página, como acceso a usuarios registrados, registros de usuarios nuevos,acceso a per$les, salidas, etc., así como ayudas y buscadores internos. La*ona más anc&a generalmente se encuentra ocupada por el título de lapágina, nombre de empresa, slogan, etc.

La *ona inferior del encabe*ado se emplea para ubicar los lin?s denavegación y las etiquetas de navegación, uno de los elementos másimportantes a la &ora de ayudar a los usuarios a encontrar las páginascomponentes del sitio web. 1ependiendo de la comple#idad del sitio, puedeencontrarse solo uno de estos sistemas de navegación o los dos" pore#emplo, cuando el sitio está dividido en secciones, uno de ellos está

destinado a estas divisiones, mientras que el otro sirve para navegar dentrode cada sección, aunque pueden emplearse otros m'todos de clasi$caciónde los contenidos y por consiguiente, otros m'todos de organi*ar lanavegación interna.

Qtra forma de colaborar con la eploración del sitio por parte de losusuarios es la instalación de un buscador interno. Tambi'n es aquí dondelos usuarios buscan este tipo de elementos, ya que convencionalmente esaquí donde la mayoría de los diseñadores los ubican, aunque en algunoscasos, puede encontrarse en la parte superior de alguna de las columnas

laterales. + continuación, mostramos un e#emplo de la aplicación de unbuscador interno en el encabe*ado.

Columnas de eploración-l cuerpo principal de una página web, en el diseño moderno se leencuentra dividido. !na de estas divisiones, consiste una o dos columnas



de eploración. -ste tipo de columnas, se le emplea para ubicar algunoselementos importantes de la página, como enlaces eternos, na!egacióninterna, publicidad, informaciones adicionales y contenidos secundarios.

Cuando se emplea una )nica columna, es indistinto para los usuarios, deacuerdo a estudios sobre el comportamiento de usuarios de sitios web, yaque su ubicación no plantea di$cultad alguna. -n el caso de que el diseñorequiera el empleo de dos columnas, pueden ubicarse una a cada lado delcuerpo principal de la página o ambas a uno de los lados, siendo tambi'nindiferente en este caso si se ubican a la derec&a o a la i*quierda delcontenido principal.

Los usuarios, dado el uso continuo de estos elementos para esta función,suelen buscar la información de contacto en este tipo de columnas, porlo que resulta uno de los me#ores lugares para ubicar los datos de contacto.+ continuación, vemos algunos e#emplos de columnas de eploración

Frea de contenido-sta *ona del diseño de la página, es la que menos reglas tiene respecto desu diseño, ya que el &ec&o de que en ella se encuentren los contenidosprincipales de la página, el diseño depende en gran medida de los mismos,sobre todo en lo que respecta al tipo de contenidos, la cantidad, ladisposición que se desea emplear, etc. %in embargo, &ay que consideraralgunas reglas importantes y que, salvo muy raras ocasiones, deben serseguidas al pie de la letra.

-n la parte superior de esta área se debe empla*ar el título entre etiquetasR&=S, ya que este título tiene las palabras clave que los usuarios luegoemplearán en sus b)squedas y será de gran importancia para que losbuscadores indeen la página en forma correcta. +demás, los usuarios



buscarán en este punto el título de lo que se epone, siendo de etremaimportancia que el mismo sepa a qu' contenidos está accediendo.

-n caso de que los contenidos sean muc&os y &aya que &acerdespla*amientos importantes &acia aba#o, es de muc&a utilidad colocar al$nal del área alg)n tipo de salto al inicio, para evitar que el usuario debareali*ar grandes despla*amientos. -n el caso de que se empleen variaspáginas para albergar contenidos relacionados, tanto al inicio de la páginacomo al $nal de la misma es de gran utilidad colocar un navegador depáginas >del tipo Página anterior 1 – 2 – 3 … Página siguienteA para que lana!egabilidad entre ellas sea sencilla.

Aie de páginaFinalmente, debajo de todas las secciones, se coloca una faja horizontal en cuyo interior

se colocan algunos elementos importantes, como el autor, copyright, acceso a diversas

políticas del sitio y asuntos legales, datos de contacto, enlaces a sitios relacionados,

enlaces internos, etc.

-structura de una página web Como estructurar los arc&ivos

Cuando nos iniciamos en el diseño de páginas web, tendemos a pensar quela estructura de los arc&i!os / directorios en que se encuentraorgani*ada nuestra página, resulta de importancia menor. %in embargo,como veremos en este artículo, a la &ora de optimi*ar una página webresulta muy importante seguir una serie de medidas respecto de laorgani*ación de la estructura de los arc&ivos.

+demás, resulta importante tambi'n para quien administra el sitio, teneruna estructura ordenada, ya que a la &ora de introducir cambios, agregarnuevos contenidos, etc., la tarea puede resultar muc&o más simple, con elconsiguiente bene$cio en tiempo y costos. -sto indirectamente bene$cia alos usuarios, dado que todo el tiempo que se a&orre en tareas que puedensimpli$carse, puede invertirse en contenidos. %i en alg)n momento sepretende &acer una reforma en la página, aumentar sus secciones, etc., latarea se ve enormemente simpli$cada si los arc&ivos que componen el sitiose encuentran ordenados y su contenido puede ser fácilmenteidenti8cable a trav's del nombre del arc&ivo o del directorio. Comoveremos más adelante, tambi'n tiene bene$cios en el posicionamiento de lapágina.

Semántica de los arc&i!osLa organi)ación semántica de un sitio web tiene como $nalidad facilitarla tarea de acceder a los diferentes arc&ivos y directorios que lo componen,de forma tal que cualquier persona, incluyendo al propio creador, no tengaque &acer grandes esfuer*os para locali*ar cada uno de los componentesdel sitio. Fui*á para una pequeña página web con unas pocas páginas, estopueda parecer ecesivo, pero no lo es para un sitio con miles de páginas. -l

problema de no plani$car un sitio web de pequeñas dimensiones aparececuando con el paso del tiempo el sitio aumenta de tamaño. La falta de unaplani8cación y estructuración de los arc&ivos del sitio en sus inicios,



puede &acer muy comple#a la administración del mismo con el paso deltiempo.

!na buena medida, es &acer la estructura del sitio siguiendo un sistema, deforma tal que, teniendo en cuenta las bases del sistema empleado en laestructura, cualquier persona pueda entender la misma y acceder a cadauno de los arc&ivos que componen la página.

6ombre de las páginas, arc&ivos y directorios

!na t'cnica poco recomendable, es utili*ar nombres de páginas2 arc&i!os/ directorios que nada tengan que ver con el contenido de la página o nodescriban lo que contienen. -sta costumbre tiene su origen en los antiguosarc&ivos de programación, que tenían nombre casi encriptados. 0oy en día,emplear nombres abreviados, siglas, o comple#as elaboraciones semánticasque incluyen símbolos y n)meros, no tiene ning)n sentido, ya que losmodernos ordenadores tienen la capacidad de aceptar cualquier tipo denombre en cualquiera de los sistemas operativos que se emplee.

-sto &a permitido que los programadores y diseñadores web puedan colocarnombres descriptivos a cada elemento que crean, de forma tal que la tarearesulta muc&o más sencilla. %e podrá alegar que quien reali*a la páginapuede conocer lo que contienen los arc&i!os y directorios que &a creado.%in embargo, parece bastante difícil de creer que alguien cree algunosdirectorios con nombres tales como DyiuUJH, yiuUHU e #dlgK, cargados dearc&ivos con nombres de similar comple#idad, a los dos o tres años de&aberlos creado recuerde cada uno de ellos.

-n la actualidad se recomienda inclusive, agregar comentariosdescripti!os a los códigos, de forma que cualquier tarea posterior, tanto

para el creador como para cualquiera que por cualquier motivo deba rever ocorregir dic&o código, sepa donde se encuentra y como está compuesto ylas modi$caciones puedan reali*arse en forma sencilla y lo más intuitiva quese pueda.

%e debe tener en cuenta que una página web no es más que un código quecontiene tetos y enlace a otros componentes >imágenes, !ideos,sonidos, etc.A con su ubicación para que el servidor envíe dic&oscontenidos y el navegador lo interprete y &aga una visuali*ación delresultado. Como enlaces >debemos tener en cuenta que un código como elque ponemos en el e#emplo siguiente no es más que un enlaceA, debencumplir con ciertas normas, como por e#emplo que no debe estar compuestopor más de una palabra" esto no quiere decir que no empleemos variaspalabras, sino que debemos buscar un recurso que &aga que un nombrecompuesto por varias palabras sea interpretado como si fuera una sola. -stoes posible gracias al empleo de guiones, tanto normales como ba#os, comoseparadores en lugar de espacios en blanco. -l siguiente es un e#emplo decómo lograr esto y de nombres descriptivos, tanto para el directorio comopara una imagen

G

=<im s49-imenesdepaina0e7/imaen(aGul+Bp- alt9-;- />

http://www.lawebera.es/manual-diseno-web/estructura-de-una-pagina-web-como-estructurar-los-archivos.php

http://www.lawebera.es/manual-diseno-web/estructura-de-una-pagina-web-como-estructurar-los-archivos.php



De esta forma se facilita la comprensión de los archivos y directorios componentes de

una página web.

Estructura e8ciente / facilidad de mantenimiento@a#o ninguna circunstancia es aceptable que un sitio se &aga en formacomple#a cuando es posible evitarlo. !na de las complicaciones que estetipo de formas de traba#ar trae apare#ada es la di$cultad que se encuentracuando se pretende reali*ar el mantenimiento de la página web. %i quien se

encarga de reali*ar el mantenimiento se encuentra con nombresdescriptivos para los arc&ivos y directorios, su tarea tendrá una di$cultadmenos para reali*arse.

+lgo que su uso se &a visto notablemente incrementado en los )ltimos años,es la utili*ación de arc&i!os separados y en tanta cantidad comofunciones deban cumplir. -sto tambi'n tiene la $nalidad de facilitar sumantenimiento, a lo que se agrega la posibilidad de reali*ar traba#os porsecciones sin que la totalidad de la página se vea afectada. (or e#emplo, unsitio web compuesto por muc&as páginas, puede requerir varios estilosdiferentes, lo que a)n en los casos cuyas diferencias sean menores, se

emplean varios arc&ivos.

-sto se aplica principalmente a las &o#as de estilo en cascada >C%%A, dondese pueden establecer estilos diferentes para partes del sitio concaracterísticas especiales e inclusive , estilos diferentes para diferentespartes de una misma página.

-ste tipo de arc&ivos ad#untos, son frecuentes en CSS, aunque tambi'n seemplean para #avascript, p&p, asp, etc. Todo esto favorece enormemente laorgani*ación de los arc&ivos del sitio y reduce la cantidad de código quedebe escribirse.

ambi!n resulta muy importante, la colocación de los archivos en directorios "ue se

encuentren en un orden lógico, ya "ue esto tambi!n colabora en la simplificación de los

trabajos de mantenimiento y reforma.

8mportancia de las !7L descriptivas

Qtra ra*ón para emplear nombres descriptivos en arc&ivos y directorios, esque todos ellos forman parte de la !7L, elemento que tienen muy en cuentalos rastreadores de los buscadores. -sto agrega la posibilidad de emplear la!7L como lugar donde colocar las palabras cla!e de nuestros contenidos,lo que facilita la clasi$cación por parte de los buscadores, y porconsiguiente, colabora en el posicionamiento del sitio en ellos.

8maginemos dos !7LZs bien diferentes, una compuesta por el nombre delsitio y una serie de directorios y arc&ivos con nombres comple#os, y otra!7L con nombre del sitio, los arc&ivos y directorios con títulos descriptivos

&ttpNNwwwsitiocomple#oPJU.comNefsPJN#lv.&tml

&ttpNNwwwsitio [simpleNarc&ivosNestilo[web.&tml

ECon cuál de las dos creen ustedes que los buscadores tendrán menosdi$cultades para clasi$car los contenidos, y por tanto indearla y colocarlaen los listadosG -videntemente, la segunda opción es la más correcta. Los



buscadores pueden emplear la !7L como primer elemento a anali)ar yes una de las me#ores formas de incluir palabras clave.

Cuando nos iniciamos en el diseño de páginas web, tendemos a pensar quela estructura de los arc&i!os / directorios en que se encuentraorgani*ada nuestra página, resulta de importancia menor. %in embargo,como veremos en este artículo, a la &ora de optimi*ar una página webresulta muy importante seguir una serie de medidas respecto de laorgani*ación de la estructura de los arc&ivos.

+demás, resulta importante tambi'n para quien administra el sitio, teneruna estructura ordenada, ya que a la &ora de introducir cambios, agregarnuevos contenidos, etc., la tarea puede resultar muc&o más simple, con elconsiguiente bene$cio en tiempo y costos. -sto indirectamente bene$cia alos usuarios, dado que todo el tiempo que se a&orre en tareas que puedensimpli$carse, puede invertirse en contenidos. %i en alg)n momento sepretende &acer una reforma en la página, aumentar sus secciones, etc., latarea se ve enormemente simpli$cada si los arc&ivos que componen el sitiose encuentran ordenados y su contenido puede ser fácilmente identi$cable

a trav's del nombre del arc&ivo o del directorio. Como veremos másadelante, tambi'n tiene bene$cios en el posicionamiento de la página.

-structura de páginas web Cómo &acer para que lo importante apare*caprimero

Cuando nos encontramos optimi*ando una página web para los buscadores,una de las cosas que debemos tener en cuenta es que aquellos contenidosde mayor importancia deben ser los primeros en aparecer, no solovisualmente, sino además en el código 0T5L. -sto está relacionado con elfuncionamiento de los robots de b7s%ueda.

Los buscadores necesitan clasi$car las páginas web de acuerdo a sucontenido, lo que implica necesariamente un análisis de los mismos. (eroestos robots que &urgan en las páginas web no anali*an la totalidad delcódigo de cada página, sino que tienen un límite y solo anali*an los

primeros contenidos.

-s por ello que resulta muy importante que las páginas web cuenten dentrode sus primeras líneas aquellos contenidos que resulten más relevantes.%in embargo, esto que parece sencillo, muc&as veces c&oca con la intensiónde los diseñadores de maquetar la página siguiendo cierto orden.

(or e#emplo, si un diseñador desea que la página tenga una cabecera, doscolumnas a la i*quierda y el cuerpo principal con el contenido a la derec&a,podría parecer que es imposible &acer que el contenido principal apare*caentre las primeras líneas del código 3TML. %in embargo, empleando

algunas características de C%%, esto es posible.

http://www.lawebera.es/como-hacer/ejemplos-css

http://www.lawebera.es/como-hacer/ejemplos-css



Cómo ma%uetar una página para %ue el contenido importanteapare)ca primero+ continuación mostraremos como es posible &acer que los contenidos másrelevantes de la página apare*can en los primeros lugares del código3TML, empleando para ello el ;oat de C%%. %in entrar en demasiadosdetalles, ya que no es la $nalidad de este artículo eplicar como funciona lapropiedad ;oat, podemos resumir que esta propiedad &ace que el elementosalga del Gu"o del 3TML para posicionarse a la i*quierda o derec&a de

otros elementos adyacentes, alterando el orden en que se encuentranescritos en el código 0T5L.

(ara poder eplicarlo de me#or forma, escribiremos un código de e#emplo ysu resultado visual, que podrán probarlo utili*ando el mismo código escritoen bloc de notas, guardando el arc&ivo como .&tml o .&tm y abrirlo en sunavegador para visuali*ar los resultados.

Código básico#o primero "ue haremos será ordenar los contenidos dentro del HTML en el orden "ue

deseamos. #uego, empleando CSS le daremos el orden visual. $l código de ejemplo es

el siguiente%

G

=

B

J

P

I

H

U

=K

==

=B

=

=

J

=P

<.tml>

<.ead>

<title>Pina de eBemplo</title>

<!(( Vn4ulo al a4.ivo SS ((>

<lin= el9:st8les.eet: t8pe9:te6t/4ss:

.e@9:estilo+4ss: />

</.ead>

<7od8>

<div id9:4ontenedo:>

<div id9:4a7e4ea:>





=I

=H

=U

=

BK

B=

BB

B

BJ

BP

BI

BH

BU

B

K

<.3>a7e4ea</.3>

</div>

<div id9:4ontenido:>

<div id9:4aBa:>

<div id9:pimeo:>

ontenido pin4ipal

</div>

<div id9:seundo:>

ontenido de seundo oden

</div>

</div>

<div id9:te4eo:>

ontenido de te4e oden

</div>

</div>

<div id9:pie:>

Pie de pina



</div>

</div>

</7od8>

</.tml>

Como se puede apreciar, además del código 3TML, deberemos escribir, enotro arc&ivo aparte, una &o#a de estilo independiente, a la que llamaremosestilo.css y que contendrá el código CSS. -n este código 3TML podemosver que el contenido principal de la página, se encuentra inmediatamentedespu's de la cabecera, es decir, en los primeros lugares del código.

-n el arc&i!o CSS, daremos los primeros atributos a los diferentes di!Hs, de

forma que la página adquiera una forma visible y donde los contenidosapare*can separados. -l siguiente código es el que aparecerá en el arc&ivoestilo.css

G

=

B

J

P

I

H

U

=K

==

=B

=

=J

=

/L A4.ivo 7ase 4ss de eBemplo L/

/L $o siuiente se emplea paa esetea los valoes po de@e4to de los

naveadoes L/

.tmlJ 7od8 main, paddin, 7odenone ?

/L De@ini4iOn de los estilos 7si4os L/

/L ontenedo eneal+ Se detemina el an4.o 8 los menes automti4os

L/

;4ontenedo

0idt.K,

main auto





P

=I

=H

=

U=

BK

B=

BB

B

BJ

BP

BI

BH

BU

B

K

=

?

/L Estilo de los otos 4ontenedoes L/

;4a7e4eaJ ;pie

7a4=ound ;474747

?

;pie

4lea 7ot.

?

;pimeo

7a4=ound ;@7@@

?

;seundo

7a4=ound ;@d4,K7

?

;te4eo

7a4=ound ;@de7K7

?

;4a7e4eaJ ;pieJ ;pimeoJ ;seundoJ ;te4eo



paddin 1+2Qem 2

main ,+*em ,

?

;4a7e4ea main(7ottom , ?

;4ontenido paddin , ?

Con esto, ya es posible visuali*ar la página, la que encontraremos que seencuentra diagramada en una )nica columna y los diferentes contenidosaparecen alineados en forma vertical. -sto se debe a que el proceso demaquetación a)n no &a comen*ado, y la página se verá de la siguiente

manera

-mpleando el e#emplo anterior, si deseáramos maquetar la página con unacolumna a la i*quierda y el contenido principal a la derec&a, deberíamosde#ar el tercer contenedor deba#o de los anteriores y ocupando todo elanc&o de, para lo que podríamos escribir, deba#o del CSS básico que ya&emos escrito, las siguientes líneas de código >debe observarse que en cadauno de los e#emplos que daremos, el código 3TML no será modi$cadoA.

G

=

B

/L DiseRo a dos 4olumnas 4on el 4ontenido pin4ipal a la dee4.a L/





J

P

I

H

U

=K

==

=B

=

=J

=P

=I

=

H

=U

;pimeo

@loat i.t

0idt. Q

main(le@t 1

displa8 7lo4=

.ei.t 1,p6

?

;seundo

@loat le@t

0idt. 2

displa8 7lo4=

.ei.t 1,p6

?

;te4eo

4lea 7ot.

0idt.

?

La siguiente imagen es el resultado del código descrito. -n la ca#a de colorrosa aparece el contenido principal, aunque visualmente no ocupe esaposición, ya que la columna de la i*quierda aparece antes.



+ continuación veremos un e#emplo donde la columna aparece a la derec&ay el contenido principal de la página estará a la i*quierda

G

=

B

J

P

I

H

U

=K

==

=B

=

=

/L DiseRo a dos 4olumnas 4on el 4ontenido pin4ipal a la iGuieda L/

;pimeo

@loat le@t

0idt. Q

main(i.t 1

displa8 7lo4=

.ei.t 1,p6

?

;seundo





J

=P

=I

=H

=U

@loat i.t

0idt. 2

displa8 7lo4=

.ei.t 1,p6

?

;te4eo

4lea 7ot.

0idt.

?

Teniendo en cuenta que los contenidos se encuentran #erarqui*ados en tresescalas diferentes, es posible organi*arlos en tres columnas, como en losdos casos que eponemos a continuación, donde las dos columnas secolocan sobre uno de los lados >en un e#emplo a la derec&a y en el otro a lai*quierdaA y el contenido principal en el opuesto



G

=

B

J

P

I

H

U

=K

==

=B

=

=

J

=P

=I

=H

=U

=

BK

B=

/L DiseRo a tes 4olumnas 4on el 4ontenido pin4ipal a la iGuieda

L/

;pimeo

@loat le@t

0idt. Q,

main(i.t 1

displa8 7lo4=

.ei.t 2,p6

?

;seundo

@loat le@t

0idt. 1K

main(i.t 1

displa8 7lo4=

.ei.t 2,p6

?

;te4eo





@loat le@t

0idt. 1K

displa8 7lo4=

.ei.t 2,p6

?

G

=

B

J

P

I

HU

/L DiseRo a tes 4olumnas 4on el 4ontenido pin4ipal a la dee4.a L/

;pimeo

@loat i.t

0idt. Q,

main(le@t 1





=K

==

=B

=

=J

=P

=I

=H

=U

=

BK

B

=

displa8 7lo4=

.ei.t 2,p6

?

;seundo

@loat i.t

0idt. 1K

main(le@t 1

displa8 7lo4=

.ei.t 2,p6

?

;te4eo

@loat i.t

0idt. 1K

displa8 7lo4=

.ei.t 2,p6

?



La forma en que se decida ma%uetar la página, no impide en modoalguno que podamos colocar los contenidos en el orden que creamos másconveniente. -mpleando adecuadamente las propiedades C%%, es posibleestablecer el diseño deseado sin necesidad de reali*ar grandesmodi$caciones en el código 3TML.

-structura de páginas web 5arcado semántico de contenidos

-l orden en la estructura de un sitio web es tan importante como elestado de orden en que se encuentre una &abitación. +l comien*o, cuandolos muebles y ob#etos que se encuentran en la &abitación son escasos, nonos ocasionará mayores di$cultades encontrar y emplear cualquiera de losob#etos que &ay en ella. %in embargo, en la medida que la cantidad deob#etos que se encuentren en la &abitación cre*ca, las di$cultades seráncada ve* mayores &asta que sea prácticamente imposible acceder o utili*arun ob#eto.

Lo mismo sucede con las páginas web. Cuando los sitios son pequeños, lafalta de una estructura ordenada posiblemente pueda pasar desapercibida olos inconvenientes originados sean menores. (ero a medida que el sitiocrece, la aparición de nuevos arc&ivos, contenidos, secciones, formularios,etc., &ará &aciendo cada ve* más comple#a la funcionalidad del sitio.

%in embargo, es posible &acer una plani$cación de la estructura del sitio

web desde los inicios, de forma que el crecimiento del mismo se &aga enforma ordenada y sin generar di$cultades, tanto a los usuarios como alwebmaster.

5arcado semántico de los contenidos



%i observamos un libro, veremos en 'l una estructura lógica ordenada delcontenido del mismo. -sto se consigue mediante la aplicación de algunoselementos que permiten al editor &acer que los contenidos se vean en undeterminado orden que facilita el acceso a los mismos por parte de loslectores.

1el mismo modo, las páginas web se encuentran escritas en lengua#e 0T5L,que tiene una serie de etiquetas que permiten clasi$car y ordenar endiferentes niveles y estructuras al contenido. -sto es lo que denominamos elmarcado semántico de los contenidos.

La aplicación de etiquetas 0T5L en los contenidos, muc&o más allá de suutilidad desde el punto de vista est'tico, tiene la $nalidad fundamental depermitir ordenar los contenidos. +sí por e#emplo, la posibilidad de aplicarelementos como títuloI, títuloJ, título:, párrafos, listas, etc.

G

=

B

J

P

I

H

U

=K

==

=

B

<.1>"tulo pin4ipal o de pimea manitud</.1>

<.2>"tulo se4undaio o de seunda manitud</.2>

<.3>"tulo de te4ea manitud</.3>

<p><em>Pa@o</em> o divisiOn de te6to ue temina en un punto 8 apateJ

es de4iJ di@eente de la oa4iOn o enun4iado ue temina en un punto 8

seuido+ %n <ston>Pa@o</ston>J 4omo es este 4asoJ puede esta

@omado po vaias oa4iones+</p>

<ul>$ista sin oden

<li>NinTn tem se en4uenta numeado</li>

<li>Se emplea 4uando el 4ontenido no tiene po ue tene un oden

deteminado</li>

</ul>

<ol>$ista odenada

http://www.lawebera.es/manual-diseno-web/estructura-paginas-web-marcado-semantico-contenidos.php

http://www.lawebera.es/manual-diseno-web/estructura-paginas-web-marcado-semantico-contenidos.php



<li>"odos los tems apae4en numeados</li>

<li>Se usa 4uando el 4ontenido de7e tene un oden deteminado</li>

</ol>

-l orden que se impone a trav's de las diferentes eti%uetas 3TMLcorresponde a una #erarqui*ación de los diferentes contenidos. +sí pore#emplo, la frase contenida en una etiqueta &I es la más importante detodo el contenido, ya que de$ne al contenido mismo, por ser su título. -l0T5L fue pensado desde su origen como una &erramienta para #erarqui*arlos contenidos web. -n el e#emplo anterior, vemos un código 0T5L donde se&a dado una #erarqui*ación a tetos de e#emplo. -l resultado es el siguiente,en el que se ve como diferentes partes del contenido adquieren diferentes

#erarquías gracias al empleo de las eti%uetas 3TML

Título principal o de primera magnitud

Título secundario de segunda magnitud

Título de tercera magnitudPárrafo o división de teto que termina en un punto y aparte, es decir,diferente de la oración o enunciado que termina en un punto y seguido. !npárrafo, como es este caso, puede estar formado por varias oracionesdiferentes.

Lista sin orden

4Cada ítem no se encuentra numerado

4%e emplea cuando el contenido no tiene por qu' tener un ordendeterminado

Lista ordenada

4Los ítems aparecen numerados

4%e usa cuanto el contenido tiene un orden especí$co

-sta #erarqui*ación, además de facilitar la lectura de los contenidos porparte de los usuarios, posibilita a los motores de b)squeda encontrar lainformación más relevante para clasi$car y ordenar la página web, lo quetiene gran importancia para el posicionamiento de la misma.

Estructura del documento 3TML o K3TMLCada documento 0T5L o O0T5L debe contar con los siguientes elementos

4-structura del documento en 0T5L >R&eadS, RbodyS, RdivS, RspanS,

RpS, etc.A4Contenido del documento >principalmente tetos, pero tambi'n imágenes,videos, m)sica, etc., que se encuentran alo#ados en el propio sitioA.



45arcado semántico de los contenidos, para dar #erarquía a cada uno de loscontenidos, darle una estructura determinada y transmitir un signi$cadológico.

4(resentación visual de los contenidos >empleando &o#as de estilo encascada o C%%A, para que los contenidos lu*can de una forma determinada.

4-nlaces a otros contenidos, propios de la página o eternos.

4+plicación de elementos interactivos en otros lengua#es >#avascript, a#a,p&p, asp, etc.A.

Estructura del documento

Todo documento 3TML o K3TML está dividido en dos partesfundamentales. -sta división es invisible para los usuarios, los que reciben)nicamente lo que se encuentra contenido en una de estas divisiones. Laprimera es el encabe)ado, que se encuentra enmarcado por las etiquetasR&eadS y RN&eadS, cuyo contenido no es visible para los usuarios, pero

que representa una parte fundamental para el correcto funcionamiento delsitio, ya que tiene toda la información necesaria para los navegadores y losmotores de b)squeda.

-n el encabe*ado de la página se declara la norma de código en la que seencuentra escrito el documento >3TML o K3TML, la versión de los mismos,si su aplicación es estricta o transicional, etc.A, el tipo de dispositivo parael cual fue creado >navegador web, tel'fono móvil, i(odA, contiene el títulodel documento, los enlaces a las &o"as de estilo o la &o#a de estilo en si,enlaces a scripts o los scripts mismos en otros lengua"es de

programación, además de otras informaciones importantes para losnavegadores o los motores de b)squeda, como el lengua#e de loscontenidos >español, ingl's, etc.A, descripción, palabras clave, etc.

-l cuerpo del documento es donde se encuentra la parte visible del mismo,o sea, donde se encuentran los contenidos destinados a los usuarios delsitio. -s en el cuerpo del documento donde se produce la estructuracióndel contenido mediante el empleo de las eti%uetas 3TML. +demás de la

#erarqui*ación de los contenidos, se reali*a aquí, mediante el empleo deCSS, la estructuración visual de la página y la presentación visual de loscontenidos, es decir, dónde y cómo se verán cada uno de los contenidos.

Marcado semántico del contenido

Cuando el diseñador toma los contenidos y los introduce en el cuerpo deldocumento, mediante el empleo de etiquetas 3TML o K3TML marca laestructura del contenido y #erarqui*a los mismos.

5ediante el empleo de las etiquetas &I, &J, &:, etc., podrá establecertítulos y diferentes grados de subtitulado para cada una de las secciones delteto. 5ediante el empleo de la etiqueta p &ará las divisiones necesarias

en el teto, y dará 'nfasis a las partes más importantes del mismo medianteel uso de etiquetas elaboradas para esa $nalidad, como strong yem.



La estructuración semántica del contenido tiene una importancia crucial,tanto en la presentación del contenido como en la optimi)ación para losmotores de b)squeda, por lo que debe ser cuidadosamente plani$cada yelaborada.

1iseño de la interface web diseño de la información

Cuando accedemos a una fuente de información de cualquier tipo, 'sta nosmuestra una serie de informaciones que nos indica la obra, el autor, eleditor, la fec&a y el lugar de publicación, además de otrasinformaciones accesorias. -sto es absolutamente necesario, dado queservirá para que los usuarios tengan toda la información necesaria acercade la publicación.

Cuando se trata de libros u otros materiales impresos, eisten una serie de

convenciones, muc&as de las cuales están regidas por la costumbre, trasvarios siglos de uso. (or e#emplo, todos sabemos que a la &ora de acceder aun libro, nos encontraremos en primer lugar con el lomo del mismo, y yadesde allí, el libro nos da información, como el título, su autor y laeditorial.

Todo lector sabe que en las primeras páginas se encontrará con informaciónadicional, y que en las primeras páginas o en las )ltimas, &allará un índiceque le servirá para indicarle en que parte de la obra encontrará losdiferentes contenidos del material impreso.

Toda esta información se encuentra clasi$cada y ordenada de acuerdo aestándares que todos conocemos, lo que simpli$ca enormemente la tareade las personas que acceden a ellos. 1ado que las características de laspáginas web son diferentes, estas informaciones tienen otrascaracterísticas.

?nformación de una página web@ásicamente podríamos decir que la información necesaria a ser introducidaen una página web debe decir a quien accede a ella como se llama la obra,quien o quienes son sus autores, cuando fue publicado el material contenido

y el lugar de publicación. Toda esta información resulta relevante, a)ncuando en una primera instancia nos pare*ca no tenerla.

El título de la web

-l título de la página no solo tiene importancia para que quien llega a ellasepa como se llama el sitio a donde llega, sino que es vital para que losusuarios regresen. La más usual de las formas de acceder a una página webes a trav's de los buscadores. +demás de que en los resultados de lasb)squedas el título de una página sea lo primero que ve el usuario, contieneen sí mismo una información que tiene gran importancia para el

posicionamiento de la página y que los buscadores emplean para &acer suran?ing.

El autor del sitio web



-l conocimiento por parte del usuario del autor del material que se publica,tiene importancia en la medida que 'ste busque conocer la autenticidad delmaterial que se ofrece. La web está llena de mensa#es y contenidosengañosos, de los que nadie se &ace responsable. %i el contenido de unaweb presenta el nombre de la persona o institución responsable de laautenticidad y calidad del mismo, el usuario se sentirá más con$ado quecuando se encuentre frente a un contenido del que nadie se responsabili*ani se dice su autor.

ec&a de publicación

+ pesar de que no lo pare*ca, que el usuario tenga conocimiento de la fec&ade publicación de un contenido puede tener importancia. Como es desuponerse, este elemento adquiere o pierde algo de relevancia de acuerdoal tipo de contenidos que se publican. (or e#emplo, para un sitio de noticias,la fec&a de publicación es un elemento primordial, mientras que para unsitio de arte medieval, tiene bastante menos importancia.

+demás de la fec&a de publicación, otro elemento que resulta relevante

para el usuario y está relacionado con el tiempo, es la !ersión del materialque se ofrece. La valide* y actualidad de los contenidos tiene granimportancia para el usuario, por lo que el mismo debe tener acceso a estetipo de informaciones. -sto da seguridad al usuario, elemento muyimportante para determinar si el mismo volverá o no a visitarnos.

%i un documento web publicado, además de contener la fec&a depublicación, periódicamente aparece con una fec&a de re!isión, en la cualse &a &ec&o una actuali)ación, 'ste ganará en con$abilidad, ya quemuestra una preocupación por parte del autor por mantenerlo vigente,

.tras informaciones

+demás de servir de guía para los usuarios, la información que se incluya enella tiene importancia desde el punto de vista del posicionamiento en losbuscadores y tambi'n tiene relevancia en lo que respecta a los derec&osde autor.

Toda página web debe de#ar bien claro quien es el autor de loscontenidos y el tipo de licencia que tiene. -sta información debe ser muyclara, ya que es imprescindible a la &ora de reali*ar reclamos.

Qtras informaciones tienen importancia desde el punto de vista de lanavegabilidad, como por e#emplo el logotipo y el nombre del sitio en ellugar más visible de la página >generalmente arriba y a la i*quierdaA. -n laspublicaciones editoriales, este tipo de información no es necesaria, ya queel propio formato de los libros, revistas, etc., &acen posible que el lectorsiempre sepa donde se encuentra.

%in embargo, en la web esto es diferente. 1ado que un sitio web es unacolección de páginas independientes a las cuales se puede tener acceso sinpasar por la 9portada:, cada página debe tener elementos que la vinculencon el resto del sitio. (or e#emplo, debe &aber al menos un enlace >bienvisibleA con la página de inicio del sitio.

-sto tiene la misma importancia que la que tiene para un lector de libros elsaber donde se encuentra el índice. +demás, cada página debe tener los

http://www.lawebera.es/de0/actualizar-pagina-web.php

http://www.blog.lawebera.es/logotipos-con-estilo/

http://www.lawebera.es/comunidad/articulos/diseno-web/html-xhtml/como-crear-enlaces-hipertexto.php

http://www.lawebera.es/de0/actualizar-pagina-web.php

http://www.blog.lawebera.es/logotipos-con-estilo/

http://www.lawebera.es/comunidad/articulos/diseno-web/html-xhtml/como-crear-enlaces-hipertexto.php



!ínculos necesarios para que el usuario pueda acceder al menos a lassecciones más importantes del sitio, de forma tal que no solo tenga accesoal material que se encuentra buscando, sino que pueda recorrer el sitio yacceder a otros contenidos desde allí mismo.

Todas las páginas web deberían contar tambi'n con un breve resumen delcontenido, de forma que los usuarios puedan evaluar rápidamente si lapágina contiene los elementos que busca en ella. 7esulta frustrante buscarpor todo el contenido de una página algo que no se encuentra en ella.

Qtro elemento que sirve para que los usuarios tengan una me#orcomprensión de los elementos que se encuentran en la página, y que a lave*, tiene una gran importancia para el posicionamiento de la página, es lacolocación de tetos alternativos en las imágenes a trav's de la etiqueta9alt:.

(ara brindar una forma de acceder a una comunicación directa con el autorde los contenidos o con los responsables de la publicación, todas las páginasdeberían contener un enlace al correo electrónico de alguno de ellos. -sto

puede incluirse en el pie de página, en un enlace bien visible, o a trav's deun formulario de contacto. Las páginas web tienen la posibilidad depermitir la interactividad de los usuarios, algo que los usuarios de 8nternetcada día valoran más.

#esumen de informaciones necesarias en un sitio web+ continuación damos una lista de las informaciones que todo sitio webdebería brindar a sus usuarios

!n título >que tambi'n se convierte en el teto de cualquier enlace a lapáginaA

La identidad del creador >el autor o la instituciónA

La fec&a de creación y las posteriores revisiones

1eclaración de derec&os de autor para proteger su derec&o de propiedadintelectual

+l menos un enlace a una página de inicio o men)

!n logotipo o nombre de la organi*ación cerca de la esquina superiori*quierda, con un enlace a la página de inicio

-nlaces de navegación a otras secciones importantes del sitio

!n breve resumen para identi$car y aclarar el contenido de la página

1irección de correo e información de contacto o un enlace a estainformación o un formulario de contacto

Teto alternativo >9alt:A para identi$car todos los grá$cos de la página

-lementos de diseño web la forma

Qtro de los elementos de diseño web >al igual que en diseño grá8co yotros tipos de diseñoA es la forma. %u importancia radica en la estrec&a



relación que tiene este elemento con el mundo real. @asta con mirar ennuestro rededor para notar que la forma es el elemento más fácilmentedistinguible y el más abundante. +demás, resulta muc&o más sencilla lainterpretación de los mensa#es visuales que otros, y la forma es el de mássencilla captación de todos los elementos !isuales.

Como forma nos referimos a la $gura espacial de los cuerpos, por lo quenecesariamente tiene dos o tres dimensiones. -n el diseño web puedenrepresentarse las formas en su estado natural a trav's de las imágenes, oemplearse representaciones abstractas de las mismas. -sto se logra graciasa la capacidad &umana de abstraer. + pesar de que el diseño web tiene dosdimensiones, gracias a la utili*ación de luces y sombras un elemento de dosdimensiones puede brindar la sensación de un elemento de tresdimensiones o representarlo en forma abstracta.

La forma es empleada en muc&as ocasiones como m'todo de lograr unacomunicación sencilla y de fácil interpretación. -n el diseño web muc&asveces es necesario transmitir mensa#es en forma rápida, para lograr atraerla atención del usuario &acia ciertos puntos o darle a entender donde se

encuentran determinados ob#etos con facilidad.

-l empleo etendido de la forma por parte de diseñadores y programadores&a &ec&o que muc&os símbolos e íconos basados en la forma sean decomprensión sencilla, facilitando de esta manera el acceso de los usuarios alos diferentes medios, opciones y servicios que contiene la web.

Tipos de forma / su utili)ación en el diseño webLas formas pueden dividirse en tres tipos básicos las formasgeom=tricas, las formas naturales y las formas abstractas. Lasformas geom=tricas es en lo primero que pensamos cuando se &abla de

formas. 6o son frecuentes en la naturale*a dada la regularidad de lasmismas. Los cristales son uno de los pocos e#emplos de formas geom'tricasnaturales. -l empleo de la forma geom'trica en todo tipo de diseño es muyfrecuente, dado que generalmente se trata de ob#etos sim'tricos yregulares, lo que brinda a quien lo contempla, sensación de seguridad,orden y proli#idad. Las formas geom'tricas más usuales en el diseño webson el cuadrado, el rectángulo, el triángulo y el círculo. La página quemostramos a continuación es un e#emplo de empleo de la formageom'trica.

Las formas naturales tambi'n tienen un empleo frecuente, ya que permiteuna rápida asociación con un mensa#e. La mayoría de las formas naturalesempleadas en el diseño web son etraídas de imágenes. La siguiente páginaweb nos muestra un e#emplo de ello



como elemento decorativo puede &acer que el lector no pierda el inter's aletenderse en la lectura. Las listas no ordenadas, llevan al inicio de cadaítem alg)n tipo de forma. Lo más frecuente en este tipo de decoraciones esel uso de formas geom'tricas, aunque tambi'n pueden emplearse formasnaturales >una &o#a, una ;or, un animal, etc.A.

Qtra función aplicable a la forma es la de organi*ar o separar elementos. Laseparación entre contenidos y secciones se ve enormemente enriquecidacon la aplicación de formas. +sí el diseñador puede organi*ar la página ensecciones y separar los elementos entre si, algo que resulta imprescindiblepara brindar, además de dar un aspecto ordenado, una división entre losdiferentes elementos que permita una me#or !isibilidad de los mismos.

+lgo que resulta imprescindible en todo buen diseño, es dirigir la !ista delusuario por las secciones que el diseñador entiende que son másimportantes. La utili*ación de formas como elemento para dirigir la vista delusuario es muy recurrente en el diseño de páginas web, ya que losatributos de la forma son ideales para llamar la atención de los lectores&acia aquellas secciones de mayor inter's. La colocación de una forma

colorida y llamativa #unto a un teto, dirigirá fácilmente la atención delusuario &acia el mismo.

La forma tiene una serie de atributos que permiten al diseñador eploraruna gran cantidad de posibilidades, tanto desde el punto de vista decorativocomo medio para entregar un mensa#e al usuario. -sto se debe en parte aque tenemos la tendencia natural a interpretar me#or los contenidos!isuales. 1e todos los elementos de diseño, la forma es el que mayorcantidad de posibilidades ofrece al diseñador.

H Conse#os para diseñar tu web de forma e$ca*

+quí te presento algunos conse#os básicos a seguir a la &ora de diseñaruna página web. %i sigues estos conse#os en el diseño de tu sitio web,estarás en buen camino para conseguir que tus visitantes se conviertan enclientes.

4Sitios Web de carga rápida- este es el punto n)mero uno que todo

diseño web debe respetar. 0emos &ablado en varias ocasiones de estepunto en lawebera.es, pero conviene insistir para no perderlo de vista. -sfundamental conseguir que tus páginas sean veloces como el rayo, porqueasí se mueve la información en la web actual, y si no eres capa* de seguir elritmo, tus visitantes simplemente abandonarán tu sitio en busca de websque les den lo que quieren en el menor tiempo posible. 7ecuerda, puedestener un gran diseño, pero pocas personas se pararán a admirarlo si tardademasiado en cargar, procura que tu web no tarde más de unos pocossegundos en mostrarse en el navegador. %i no es así, algo estásoptimi*ando mal.

+(a!egación clara- una ve* que un visitante entra a tu web, necesitas&acerlo pasar por una serie de rutas &asta que llegue al ob#etivo del sitio>comprar un producto, suscribirse a un boletín, registrarse en un foro, etc.A.(ara ello es necesario tener una navegación clara y sencilla, de forma que

http://www.lawebera.es/manual-diseno-web/como-hacer-un-diseno-web-de-carga-rapida.php

http://www.lawebera.es/manual-diseno-web/como-hacer-un-diseno-web-de-carga-rapida.php



toda la información se encuentre a menos de clic?s de ratón. +lgunaspautas que a mí siempre me &an funcionado

5en) &ori*ontal principal un grupo de enlaces en la cabecera del sitio web,con las secciones principales, ayuda muc&o al navegante a encontrar lainformación que desea, est' donde est' dentro de tu sitio web. !n e#emplolo puedes ver en esta misma web, las secciones más importantes se

encuentran destacadas en la cabecera, así cualquier usuario puedeconsultarlas desde cualquier sitio.

45en)s verticales a derec&a e i*quierda antes de los blogs ya se usaba este

tipo de organi*ación de la información vertical, pero gracias a ellos su usoestá muc&o más etendido y se &a vuelto universal, más usable. Todo elmundo espera encontrar un listado de enlaces dispuestos verticalmente a laderec&a o i*quierda del documento 0T5L. Trata de vincular a tantaspáginas de tu sito como sea posible, pero sin recargarlo, más vale tener unaweb sencilla y limpia que una maraña de enlaces que no se entienden.

45en)s a pie de página no subestime el poder de tu pie de página. -s unlugar importante para colocar enlaces tambi'n importantes. +parte de lostípicos vínculos a la política de privacidad y avisos legales varios, el pie de

página puede contener al igual que la cabecera enlaces a las secciones másrelevantes de tu web. -sto ayuda a los usuarios y tambi'n a los buscadores,identi$cando áreas con mayor peso en tu sitio web.

4@ienvenidas sean todas las resoluciones de pantalla &oy en día, comoya &emos dic&o y redic&o en lawebera.es, &ay gran diversidad deresoluciones de pantalla usadas. Como puede que sepas, &oy en día imperala resolución =KBJ\HIU, pero tambi'n se usan muc&o otras resolucionesdiferentes que &ay que tener en cuenta a la &ora de &acer una páginaweb. 5ira el siguiente grá$co con información de los usuarios delawebera.es

Como ves, actualmente el JKD utili*a una resolución de =KBJ\HIU,quedando obsoleta la clásica UKK\IKK, que sólo usa un PD de los usuarios.-l resto, usa resoluciones mayores a =KBJ\HIU, lo que nos indicaclaramente la necesidad de diseñar pensando en resoluciones grandes,como mínimo de esas magnitudes >=KBJ\HIUA.

+ Compatibilidad multina!egador- otro tema &arto conocido, &acernuestras páginas web compatibles con los diferentes navegadores

eistentes en el mercado. @ásicamente, cuando diseñes un sitio web,preocupate de que se vea bien en $refo, C&rome, %afari y Qpera] menciónaparte merece internet eplorer, el cual te dará muc&os quebraderos decabe*a para conseguir que tu web se vea igual en 'l que en el resto de

http://www.lawebera.es/manual-diseno-web/disenar-pagina-web-varias-resoluciones-pantalla.php

http://www.lawebera.es/de0


http://www.lawebera.es/manual-diseno-web/disenar-pagina-web-varias-resoluciones-pantalla.php





navegadores. +lgunos conse#os al respecto en el siguiente artículo diseñapara $refo, &ac?ea para eplorer. 1e cualquier manera, aquí te de#o unasgrá$cas para que saques tus propias conclusiones

&ersiones de 'nternet $(plorer%

+ Cuidado con los colores / las tipografías de tu web un aspectobásico para que tu página web lu*ca profesional es el uso correcto del colory la tipografía. 6o uses colores c&illones, fuentes tipo Comic %ans osimilares. 7estarán credibilidad a tu sitio web.

+ Minimi)a el uso de imágenes las imágenes añaden un poderosoimpacto a cualquier diseño web, pero &ay que saber #ugar bien con ellas yno saturar las páginas con imágenes o iconos innecesarios. La clave está enel equilibrio, y en usar lo necesario para &acer un diseño web vistoso, peroe$ca*.

4 6so del espacio en blanco al igual que no se recomienda saturar deimágenes una página web, acercar demasiado las estructuras de la mismatampoco es bueno. -l diseño tiene que airearse, mantenerse simple,rela#ado, no apelotonarse] %i los elementos se encuentran muy #untos da

http://www.blog.lawebera.es/iconos-gratis-para-tu-pagina-web/

http://www.lawebera.es/manual-diseno-web/utilizacion-espacio-en-blanco.php

http://www.blog.lawebera.es/iconos-gratis-para-tu-pagina-web/

http://www.lawebera.es/manual-diseno-web/utilizacion-espacio-en-blanco.php



una sensación de agobio nada agradable, que lo que invita es a salircorriendo. Los espacios en blanco dan sensación de amplitud y de limpie*a.+prende a usarlos correctamente.

-lementos de diseño web la tetura

La tetura es aplicable a todo tipo de diseño. -n el arte, en la decoraciónde interiores, en la vestimenta, en la construcción de edi$cios y en generalen todo tipo de diseños, desde siempre se &a empleado la tetura comoelemento decorativo. 1esde siempre se &a contado con la tetura como unelemento importante a la &ora de embellecer una obra. +rtesanos, artistas,arquitectos, &an sabido emplearla en sus obras con resultados admirablesen muc&os casos. -isten dos tipos de tetura, la táctil y la visual. -sta)ltima se re$ere al efecto que los grá$cos adquieren cuando imitan unaimagen en tres dimensiones, gracias a efectos de luces / sombras.

-l diseño web no &a escapado a esta tendencia a decorar elementos opáginas enteras empleando la tetura. -n el caso del diseño web, latetura es solo un elemento visual y no táctil, como en otros casos, y tienesu precedente en la aplicación de la tetura en la pintura.

%i bien se &a empleado desde siempre en el diseño web, en los )ltimosaños &a &abido una tendencia al aumento del empleo de la tetura, no solocomo elemento decorativo, sino como forma de resaltar otros ob#etos.@asta con &acer un recorrido por la web, para comprobar que la utili*aciónde este elemento de diseño &a ido en aumento, no solo por la cantidad de

páginas que lo emplean, sino por la multiplicidad de formas en que se &ace. esto está relacionado con la !ersatilidad que presenta la tetura comoelemento de diseño, ya que abarca a todo tipo de ob#etos y en una granvariedad de aplicaciones diferentes. Fui*á la forma más simple y másempleada de utili*ación de la tetura, sea en los fondos de las páginasweb. -ste fue el primer campo de pruebas para la aplicación de esteelemento, para luego ir incorporándose a casi todo lo que sea imaginable.

+plicación de teturas como fondo de páginas web

-sta es la forma más sencilla, a)n más desde la aparición de las &o#as deestilo en cascada >CSSA, de aplicar tetura en el diseño web. (ara laaplicación de un fondo con tetura, basta con tener una imagen que,repetida, da al visitante la sensación de estar frente a un fondo &ec&o conun material con tetura. -s bastante sencillo simular un fondo de madera,piedra, papel o tela, bastando para ello con tener la imagen adecuada.

La aparición de potentes programas de edición de imágenes y creación degrá$cos >+dobe (&otos&op, 285(, 8n?scape, +dobe 8llustrator, Corel1raw y

Oara O, entre muc&os otrosA, no solo &a dado a los diseñadores web laposibilidad de crear sus propios fondos, sino que &an aparecido una grancantidad de colecciones descargables de gran calidad, tanto pagas comogratuitas. -sto &a contribuido enormemente a la epansión del uso deteturas como recurso decorativo. -ste tipo de imágenes son muy comunes



y se encuentran muc&os sitios donde se pueden descargar gratis, como pore#emplo

http%))s"uidfingers.com)patterns)

http%))www.*ollermedia.at)pattern+u)

http%))www.dinpattern.com)

algunos e#emplos de imágenes que pueden ser empleadas como fondos y

que dan un aspecto teturado a las páginas web

%i tenemos algunas imágenes de fondo >patternsA, emplearlas como fondode la web es muy sencillo, bastando para ello incorporarlo al C%% >tanto sise emplea embebido en el 0T5L como si se emplea una &o#aindependienteA. 1aremos un e#emplo práctico. %i subimos una imagen de

fondo de nombre fondo.#pg a una carpeta 9images: en nuestro servidor,bastará con colocar el siguiente código

<7od8 st8le9-7a4=ound(imae ulCimaes/@ondo+Bp->

6o &abrá necesidad de indicar que se repita, ya que ese es el modo pordefecto. 1e esta forma, tendremos un fondo formado por la repetición de unpatrón. Cuando este patrón da la sensación de tetura, estaremos aplicandoel elemento del que es ob#eto este artículo. La siguiente página web es une#emplo de la utili*ación de fondo con tetura

http://www.blog.lawebera.es/galeria-de-disenos-web-para-inspirarte/

http://www.blog.lawebera.es/galeria-de-disenos-web-para-inspirarte/



La tetura en la tipografía%i bien en los tetos normales no es recomendable la utili*ación deornamentaciones, debido a la di$cultad que puede encontrarse un usuariopara leerlos, en los títulos y logotipos es posible encontrar muc&os e#emplosdonde se emplean teturas para decorarlos. Las posibilidades son in$nitas ysolo se puede contar como límite la imaginación propia.

La utili*ación de tetura en la tipografía no es una novedad, ya que desde laantigua roma &asta nuestros días pueden verse e#emplos de ello. -n laspáginas web podemos encontrar numerosos e#emplos de ello. -n la páginaque &emos seleccionado como e#emplo, encontramos un par de e#emplos deutili*ación de la tetura en la tipografía.

La tetura como forma de resaltar ob"etos+demás de ser un ecelente medio de decorar una página web, resultatambi'n muy interesante su utili*ación como modo de obtener contrastepara diferenciar y resaltar algunos elementos importantes. %u uso en estesentido, &a aumentado muc&o en los )ltimos años, gracias al incremento dela potencia de los programas de edición de grá$cos.

1esde la simple aplicación de una sombra &asta la confección de ob#etos entres dimensiones, la aplicación de la tetura se &a convertido en uno delos recursos más empleados en el diseño web de alta calidad. La siguienteimagen es un e#emplo de ello, donde el elemento principal, una imagen, sesale de las dos dimensiones y adquiere volumen.



6tili)ación adecuada de la teturaComo todo elemento de diseño, la tetura no siempre tiene cabida. Cuandonos enfrentamos a la posibilidad de incorporar elementos con teturadebemos preguntarnos en primera instancia, si está de acuerdo con el restode los elementos. Luego, debemos preguntarnos si el tema de la web seadec)a a la colocación de elementos teturados. al $nal, en caso de queambas respuestas son a$rmativas, anali*ar que clase de tetura y en queelementos debemos colocarla.

(or novedoso que sea un efecto, no siempre es bueno emplearlo. %onmuc&as las ocasiones en que encontraremos que un diseño plano seadec)a más a lo que pretendemos. Como cualquier otro elemento, tienegran importancia y su utili*ación puede generar efectos satisfactorios, perosiempre que se le utilice en forma adecuada y concordante con el resto deldiseño.

-l diseño de la interfa*

Cuando accedemos a alguna de las muc&as fuentes de información, desdelos simples libros &asta los ordenadores, encontramos que la informacióncontenida está organi*ada de forma tal que puede accederse a loscontenidos con facilidad. -n algunos casos, como en los libros, pore#emplo, el uso continuo por generaciones &a &ec&o que dic&a organi*aciónse encuentre estandari*ada y sea muy sencillo para los lectores encontrar

cada uno de los elementos que lo constituyen.%iguiendo el e#emplo de los libros, el orden en que aparecen los contenidosestá descrito en el índice, que generalmente se encuentra al principio o al$nal del mismo. +demás, la propia forma física del libro, la forma en que seencuentran ordenadas las páginas, &acen que la interfa) sea muy sencillae intuitiva.

-n las páginas web, esta forma de ordenar las páginas no es posible, por loque el empleando otros m'todos, pero que permitan acceder a cada uno deellos con la misma facilidad.

E'u= es la interfa)>

-l concepto de interfa) es muy amplio y se re$ere a todo sistema quepermite el contacto y la funcionalidad entre dos sistemas diferentes. (ore#emplo, los botones y la pantalla del tel'fono celular conforman la interfa*,ya que permite que el usuario pueda emplear las funciones que esteaparato ofrece.

%in embargo, en este artículo nos referiremos eclusivamente a la interfa)web, que es un sistema grá8co que permite a los usuarios acceder a los

contenidos, reali*ar tareas, comprender las funcionalidades y navegar porlas diferentes páginas del sitio.

-n de$nitiva, la interfa) web es el con#unto grá$co que permite lapresentación y la navegación del sitio. -sto se consigue con la inclusión de



elementos grá8cos comunes a toda la web que son estándares, &aciendoque los usuarios tengan completo control sobre las funcionalidades del sitiodesde el momento mismo de entrar a 'l sin que para ello deba teneramplios conocimientos ni preparación anterior alguna.

!na página web puede contar con los me#ores contenidos en el g'nero quese desarrolla, pero indefectiblemente fracasará si su interfa) no permite unrápido y cómodo acceso a los mismos por parte de los usuarios. (or elcontrario, una página web cuyos contenidos sean de menor calidad >sin que'stos sean malos, por supuestoA pero cuya interfa* permite que sus usuariosnaveguen en forma sencilla, tengan acceso en forma inmediata al contenidoque desean e interactuen en forma sencilla, tendrá un mayor 'ito.

Simplicidad / co&erenciaLa facilidad y comodidad con que los usuarios acceden a los servicios quebrinda una web está fundado en dos principios fundamentales para eldesarrollo de una interfa* efectiva la simplicidad y la co&erencia.

La simplicidad con que se desarrolle esta interfa) es crucial para

determinar que un usuario se sienta satisfec&o y desee regresar a un sitio.-l &ec&o de que una persona deba reali*ar una etensa navegación por elsitio para &allar lo que busca en 'l es totalmente contraproducente. (or elcontrario, si alguien que visita un sitio cuenta con varias &erramientas quele permiten acceder rápidamente a aquello que le interesa, seguramentevolverá.

La simplicidad está dada por varios factores a tener en cuenta. -l primerconcepto importante es que los elementos grá8cos o tetuales quecomponen la interfa* deben ser claros y de fácil identi$cación. !n e#emploel ;u#o de ve&ículos por las calles de una ciudad se encuentra regulado por

una serie de sencillos elementos grá$cos >la interfa*A que permiten untránsito ordenado. EFu' sucedería si dic&os elementos grá$cos fueran decomprensión comple#aG -l caos dominaría el trá$co de la ciudad, ya que,mientras algunos conductores no respetarían la señali*ación, otros sedetendrían a intentar adivinar que signi$ca cada uno de aquellos

#eroglí$cos. Con el mismo e#emplo, si en esa ciudad se encontrara uno conuna autopista cuyos símbolos fueran de difícil comprensión y una angostacalle pero con elementos grá$cos que permitan un tránsitodescongestionado y ordenado, muc&os de los usuarios optarían por esta)ltima opción. !n e#emplo de simplicidad lo encontramos en la página

principal del buscador @oogle.

http://www.blog.lawebera.es/index.php?s=botones

http://www.blog.lawebera.es/index.php?s=botones



%i un usuario llega a un sitio cuya na!egación se le &ace comple#a,terminará por volver al buscador para seleccionar otro sitio que trate detemas similares.

Tambi'n es importante que la relación que eista entre los diferenteselementos que componen el sitio, como títulos, subtítulos, enlaces,men7s, etc., sea co&erente. Todos los elementos que permitan al usuarioidenti$car y navegar deben ser co&erentes con el cometido quedesempeñan, de forma que la comprensión y b)squeda de los contenidossean accesibles por el usuario sin que deba reali*ar comple#osra*onamientos. -n el siguiente e#emplo, vemos una página cuyana!egabilidad es muy sencilla e identi$cable, gracias a un simple peroefectivo men), un buscador y lin?s a varias secciones importantes

Calidad del diseño / estabilidad funcional%i ingresamos a un salón comercial y nos encontramos con que el piso está

sucio, cuelgan telas de araña del tec&o y los dependientes se encuentrandesaliñados, seguramente permane*camos poco tiempo, no compraremosnada y no volveremos a entrar. Lo mismo sucede con los sitios web.

La primera impresión que un usuario recibe de un sitio web esetremadamente importante, por lo que el diseño debe ser cuidado enetremo, de forma tal que logremos convencerlo de que se trata de un sitioordenado, cuidado y profesional.

Lo mismo sucede con el funcionamiento del sitio. 6ada más desagradableque encontrarse con un sitio donde abundan los mensa#es de error, tiene

enlaces rotos, formularios que no funcionan, etc. La funcionalidad del sitiodebe permanecer siempre en o cercana al cien por ciento. -l usuario debetener claro que siempre que reali*a una acción, esta tiene la respuesta quedesea.

Conclusión(ara que un diseño web sea efectivo, debe lograr que los usuarios del sitiopuedan acceder con facilidad a los contenidos, interactuar con e$cacia contodos los componentes y sentirse cómodo en forma permanente, y todo ellosin siquiera pensarlo. -l elemento que consigue que esto sea posible es la

interfa*, en cuya preparación y diseño se debe poner especial atención. !naparte importante de los 'itos o fracasos de los sitios depende en granmedida de este elemento del diseño.



-lementos de diseño web la línea

-l diseño web se encuentra compuesto por varios elementos, cuyaprocedencia y destino son variados y todos ellos son parte importante detodo diseño. La línea, la forma, el color, la tetura y la tipografía &acen

que cada diseño se vea en una forma particular y participan de la ideageneral que se quiere dar.

Cada uno de estos elementos puede colaborar en el mensa"e que se quieretransmitir. Todo elemento colocado en un diseño debe colaborar en la ideaque se desea transmitir. La línea, como cualquiera de los demás elementos,debe estar acorde con el resto del diseño, de forma tal que se acompasecon la idea.

+ pesar de la simple*a de la línea, este elemento es esencial en tododiseño y por sí misma puede transmitir sentimientos e ideas, lo que &ace

que pueda formar parte del mensa#e general. /eamos algunos e#emplos.

-n la vida cotidiana recibimos muc&os mensa#es transmitidos a trav's de laslíneas, como señales de tránsito, alertas y a!isos. Las siguientesimágenes son una muestra de ello, las que seguramente todos conocemos ypocas veces somos capaces de advertir que se trata de sencillos mensa#estransmitidos a trav's de líneas.

-n los símbolos que aparecen en la imagen anterior, podemos ver símbolosnacionales >o de idiomasA, matemáticos, astrológicos, religiosos, señales de

tránsito y símbolos monetarios, todos los cuales son fácilmenteidenti8cables a pesar de estar compuestos por líneas, en su mayoríaetremadamente simples. (ara la mayoría de la gente estas simples líneastienen un signi$cado e inclusive pueden representar sentimientos.



-n el diseño de páginas web, la línea adquiere además otras connotaciones,ya que pueden servir como elementos que contribuyan con laestructuración y organi*ación, resaltado y destaque de diferentescontenidos, como veremos a continuación.

La línea en la estructura del diseñoLa separación de los contenidos es esencial para conseguir claridad en elmensa#e. 1os contenidos de características similares que se encuentrenpróimos, corren el riesgo de perder !isibilidad, lo que requiere que eldiseñador separe estos elementos. !na de las formas más simples pero a lave* más efectivas de &acer esto es a trav's de líneas.

La estructura de una página web puede ser marcada con muc&a mayorclaridad cuando se emplean líneas para separar los diferentes componentesde la estructura. -n la siguiente captura de pantalla podremos ver une#emplo claro

-n este ecelente diseño, la simplicidad es el motivo principal. (araconseguir resaltar algunos elementos y separar otros, el diseñador empleólíneas &ori)ontales, algunas sencillas y otras dobles, consiguiendo unefecto minimalista que &oy en día se encuentra de moda. -n otros diseñospodremos apreciar tambi'n el empleo de líneas !erticales para separarcolumnas o como bordes para separar y estructurar los diferentescontenidos.

Empleo de líneas para resaltar ob"etos+ la &ora de resaltar o destacar algunos contenidos, eisten muc&as formas

de &acerlo. !na de ellas es la utili*ación de líneas, que pueden simplementeestar subrayando un teto o formando un contorno en torno a cualquiercontenido. -s una práctica bastante &abitual, en la que los diseñadoresseleccionan un tipo de línea para conseguir un contraste con el resto de loscontenidos de la página.

0emos seleccionado la siguiente imagen >una captura de pantallaA paramostrar como un diseñador web &a empleado líneas para conseguir quealgunos elementos de esta página se destaque del resto de los contenidos.



-n la página que &emos tomado como e#emplo, en la parte superiorencontramos un sencillo men) de navegación. -ncima de cada uno de loslin?s que allí encontramos, puede apreciarse una línea bastante anc&a decolor, cuya $nalidad es atraer la atención de los usuarios &acia el men7 yfacilitar de esta forma la na!egación.

-n el mismo e#emplo, cada una de las imágenes que se muestra en lapágina se encuentra bordeada por una gruesa línea blanca, que provoca

una clara separación visual del fondo. 1e no &aberse empleado esterecurso, la !isibilidad de las imágenes &abría disminuidoconsiderablemente, afectando la est'tica general de la página.

Como emplear los atributos de las líneasComo elemento simple que es, la línea posee pocos atributos, por lo que lasvariaciones que pueden aplicarse en ella son pocas. %in embargo, el &ec&ode que la línea sea un elemento simple, la variación de cualquiera de susatributos genera diferencias muy notorias y, por consiguiente, efectos muydisímiles.

Longitud / grosor de la línea

+ la &ora de seleccionar una línea para incluir en un diseño, podremosoptar por diferentes longitudes para conseguir el mismo efecto, pero conuna notable variación est'tica. !na línea que atraviese la página en todo suanc&o puede ser empleada para dividir en secciones o separar elencabe)ado del resto de la página, mientras que una línea con igualesatributos, ecepto porque su longitud es muc&o más corta, puede serempleada para determinar el $nal de un teto.

Lo mismo sucede con los grosores. -n el e#emplo siguiente, una línea gruesatiene un cometido diferente del resto de las líneas que en este diseñopodemos apreciar. La línea gruesa es la que se emplea para separar alencabe*ado de la página del resto de los contenidos, mientras que líneasmás $nas separan los diferentes contenidos entre si.



El color de la línea

+l igual que otros elementos, el atributo color sirve en las líneas comoelemento decorativo y como elemento diferenciador. -l contraste es unprincipio de diseño que puede emplearse a)n en aquellos elementos mássimples que componen una página web, por lo que el contraste conseguidoa trav's del color, puede &acer que ciertos elementos decorados oseparados con líneas puedan obtener una diferenciación.

Tipo de línea

Las líneas pueden ser simplemente una secuencia de puntos ordenados,que en un golpe de vista identi$caremos como una línea. -s el caso de laslíneas punteadas o compuestas por guiones, empleadas con muc&afrecuencia en el diseño de páginas web. Qtro tipo de línea, aunqueempleado con muc&o menos frecuencia, es la línea irregular, como lasque veremos en el e#emplo siguiente, acompañadas de líneas regulares

1iseñar una página web para varias resoluciones de pantalla

!na de las di$cultades más importantes a la que se enfrentarán losdiseñadores web es la cantidad de resoluciones de pantalla diferentes queemplean los usuarios de 8nternet. -l diseñador empleará un monitor y unnavegador que se encuentran adaptados a sus necesidades y posibilidades,pero esto no debe ser motivo para interpretar que todos los usuariospueden llegar a emplear la misma resolución.



5uy por el contrario, los usuarios de 8nternet emplean una gama bastanteamplia de resoluciones de pantalla. Las resoluciones pueden ser NOP OQP2QPP NPP2 IPJO RNQ2 IJQP IPJO o superiores . %e podría suponerque bastaría con tomar la resolución de pantalla más empleada y diseñarnuestra página web para que se vea bien en esta resolución. %in embargo,el tema no es tan sencillo. La siguiente estadística muestra la evolucióndel empleo de las distintas resoluciones de pantalla desde el año BKKK&asta el BK=K.

Estadística de uso de resoluciones de pantalla

ec&a %uperior =KBJ\HIUUKK\IKK IJK\JUK 1esconocido

eneroBK=K

HID BKD =D KD D

eneroBKK

PHD ID JD KD D

eneroBKKU UD JUD UD KD ID

eneroBKKH

BID PJD =JD KD ID

eneroBKKI

=HD PHD BKD KD ID

eneroBKKP

=BD PD KD KD PD

eneroBKKJ

=KD JHD HD =D PD

eneroBKK

ID JKD JHD BD PD

eneroBKKB

ID JD PBD D PD

enero

BKK=

PD BD PPD ID PD

eneroBKKK

JD BPD PID ==D JD

Como puede apreciarse en la tabla anterior, el uso de resoluciones depantalla de NOP OQP es en la actualidad nulo o un valor muy cercano aello, mientras que la tendencia a emplear una resolución de QPP NPPviene descendiendo y los usuarios que la emplean ya son muy poco más del=D. La tendencia general es de un aumento del empleo de resoluciones depantalla superiores a IPJO RNQ. Teniendo en cuenta esto, podríamos

pensar que lo correcto sería diseñar páginas web para que se vean bien eneste tipo de resoluciones. %in embargo, no es posible despreciar a losmillones de usuarios >más del BKDA que todavía emplean la resolución de



pantalla =KBJ HIU, aunque si es despreciable las cifras de usuarios conresoluciones menores.

-l ob"eti!o de una página web debe ser alcan*ar a conformar a la mayorcantidad de usuarios posibles, por lo que de#ar de lado al BKD de losusuarios parece una medida poco recomendable. -l diseñador web deberá&acer su traba#o de forma tal que le permita llegar con un buen diseño a losusuarios con diferentes resoluciones de pantalla.

Aosibles soluciones!na de las soluciones posibles, aunque no la me#or, es reali*ar la páginapara la menor de las resoluciones de pantalla >en la actualidad, teniendo encuenta que puede despreciarse el n)mero de usuarios que empleanresoluciones menores, sería de =KBJ HIUA y de#ar márgenes auto en C%%.

Con este código CSS, el contenedor principal de la página web queestaremos diseñando tendrá un anc&o de UKK píeles y se ubicará en elcentro, mientras que el espacio restante de la pantalla, cuyo tamañodependerá de la resolución de pantalla del usuario, estará ocupado con el

fondo que &ayamos establecido para toda la página a uno y otro lado delcontenedor. -sta solución, si bien es bastante sencilla y efectiva, no siempreresulta del agrado de los diseñadores, debido a que en resoluciones depantalla muy grandes, los espacios que quedan a ambos lados delcontenedor principal son mu/ grandes, pudiendo per#udicar la est'ticageneral del sitio. + continuación se verá un e#emplo donde una página webque emplea este m'todo se ve en dos resoluciones de pantallas diferentes.La primera captura de pantalla corresponde a una resolución de =KBJ HIUpieles, mientras que la segunda corresponde a una resolución superior

-iste otra solución, la que si bien es la más efectiva, puede resultar algocomplicada, sobre todo para los principiantes. %in embargo, la efectividadde su empleo &ace que sea necesario que todo aspirante a diseñador webcono*ca el funcionamiento y consiga, mediante la práctica, el dominio deeste sistema. %e trata de los denominados diseños elásticos. Tal como sunombre indica, este tipo de diseños tiene la capacidad de adaptarse adiferentes resoluciones de pantalla.

-l principio de funcionamiento es bastante sencillo, aunque llevarlo a la

práctica puede resultar bastante más complicado. %e trata de basar lasdimensiones de los diferentes elementos en porcenta"es. -sto quiere decirque si le damos a una ca#a un anc&o de BKD, esta ocupará un espacio igualal referido porcenta#e. 1e esta forma, cada uno de los elementos podrá



verse en el mismo lugar sea cual sea la resolución de la pantalla. Lasiguiente captura de pantalla pertenece a un sitio web que emplea este tipode diseño

Aasos básicos a seguir para &acer un diseño elástico-l primer paso es seleccionar la resolución de pantalla mínima para la cual

se diseñará la página web. Teniendo en cuenta los datos estadísticospresentados más arriba, lo conveniente es que se diseñe para IPJO RNQpieles. !na ve* reali*ado el layout, comen*amos a proceder tal como&aríamos para reali*ar un diseño de dimensiones $#as, solo que debemosestablecer las dimensiones de las ca#as y las imágenes en porcenta#es. -staes el secreto de los diseños elásticos. %in embargo, queda un aspectoimportante para resolver las fuentes.

-l problema de las fuentes es que no es posible o muy di$cultoso el empleode porcenta#es para establecer su tamaño. -n este caso, lo conveniente esel uso de una unidad llamada 9em: cuya medida está relacionada con la

altura de la fuente empleada. Como = em es igual a la altura de la fuente,su dimensión real dependerá del tamaño del elemento padre. (or e#emplo,si establecemos en el 9bod/: un tamaño de fuente, = em será igual a altamaño determinado, mientras que =.B em será un BKD mayor y K.U emserá un UKD del tamaño de la fuente original. -sta unidad de medida, puedeser empleada en otros elementos, aunque su uso más frecuente estárelacionado con el tamaño de las fuentes.

Conclusión

%iempre debemos pensar en nuestros futuros usuarios a la &ora decomen*ar un diseño web. -sto implica necesariamente pensar que no todosemplean los mismos ordenadores ni los mismos monitores, lo que &ace queno todos puedan ver del mismo modo un sitio diseñado con parámetros$#os. -s bastante frustrante abrir un sitio y ver que no se encuentradiseñado para que nuestro equipamiento lo muestre en forma correcta. !nvisitante conforme puede volver.

!n elemento clave en el 'ito de una página web la navegabilidad



!na de las ra*ones por las que los usuarios de 8nternet seleccionan los sitiosde su preferencia es la facilidad con la que pueden acceder a los diferentescontenidos y poder navegar en forma sencilla entre las diferentes páginas,secciones, etc.

Todo diseñador debe tener en cuenta que el usuario debe sentirse cómodomientras permanece en el sitio. -sta facilidad de mane#o del sitio es una delas ra*ones por las cuales las personas deciden volver o no a un sitiodeterminado.

8maginemos que ingresamos en un sitio de ventas. %eleccionamos lasección a la cual queremos ir, el artículo que deseamos ver, buscamos laforma de pago que más nos convenga, y nos encontramos con que esteproducto no nos interesa. Cuando decidimos volver a buscar otro producto,nos encontramos con que estamos en un calle#ón sin salida. Luego depensarlo unos segundos, decidimos emplear el botón 9volver: de nuestronavegador. %eguramente nos sentiremos incómodos y posiblemente nisiquiera iniciemos una segunda b)squeda, por lo que abandonaremos delsitio sin &aber comprado absolutamente nada.

-sta situación no es $cticia. 5uc&os usuarios de 8nternet se ven enfrentadosa este tipo de situaciones, cuyo resultado siempre es el mismo lafrustración del usuario y la b)squeda en otro sitio de lo que seencontraba buscando.

%i no queremos que nuestro sitio tambi'n resulte un fracaso, deberemosseguir algunos preceptos básicos de na!egabilidad, asegurando de estaforma que nuestros futuros usuarios sepan siempre donde se encuentran ycomo ir a cualquier parte de nuestro sitio.

Men7 de na!egación Todos conocemos la importancia de los menus de navegación. %uimportancia radica en que permite que los usuarios pueden seleccionar laparte de nuestro sitio que desean visitar. La na!egabilidad de un sitio seve ampliamente bene$ciada con la aplicación de uno de estos menus encada una de las páginas de nuestro sitio, ya que permite al usuariodespla*arse al menos por las principales secciones del mismo.

-n las imágenes del e#emplo, vemos que a pesar de ser capturas depantallas de distintas páginas y secciones de un mismo sitio, el men) de lacolumna i*quierda se encuentra en todas ellas, elemento que nos permitirádespla*arnos a cualquier otra parte del mismo sitio cuando lo deseemos.

E!itar el empleo de botones 4!ol!er5-n algunos sitios se puede ver que cuando se llega a ciertas secciones opáginas, la )nica alternativa que se presenta al usuario que se encuentra enella es la de &acer clic? en un botón 9!ol!er: o 9atrás:. -ste tipo de



navegación termina siendo desagradable para la mayoría de los usuarios, yaque para leer otro artículo debe seguir al menos dos pasos. /eamos une#emplo

8maginemos que cada una de las páginas tuvieran como alternativa desalida el botón 9volver:, si &ubi'ramos accedido a la página = y nosquisi'ramos despla*ar a la página J, deberemos &acer clic? en el botónvolver de la página =, otro en el de la página 9sección =:, para luegoretomar la ruta.

Toda esta peripecia pudo &aber sido evitada si el diseñador del sitio &ubieratenido en cuenta los principios elementales de la navegabilidad.

ol!er en un clic a la página principal+lgo que resulta particularmente )til para &acer sencilla la navegabilidad de

un sitio y que no requiere implementaciones importantes, es incluir alg)nenlace a la página de inicio desde todas las demás páginas del sitio. -sto daseguridad al usuario y facilita el reinicio de la navegación por el sitio en casode &aberse etraviado.

!na de las formas más sencillas de &acer esto es &acer que el logotipotenga un enlace a la página principal del sitio. -ste m'todo es conocido porcasi todos los usuarios de 8nternet, por lo que los mismos esperarán que ellogotipo de todos los sitios se comporten de esta forma.

Tambi'n puede implementarse alg)n botón especial para esta función, el

que es conveniente se encuentre en un lugar fácilmente !isible y cuyafunción sea reconocible al primer golpe de vista por los usuarios.



6na sección2 un men7Cuando el contenido de la web se encuentra distribuido en secciones devarias páginas, además de implementar un men) principal es conveniente&acer un men) secundario para na!egar por cada una de las secciones.

+lgunas páginas tienen en una de sus columnas laterales un amplio men),el cual puede ser desplegable o no, que permite ver como se ordena elcontenido de la sección donde se encuentra. La siguiente imagen nosmuestra una página donde se &a implementado un men) de este tipo.

-n esta tienda virtual, el acceso a cada sección del sitio se encuentra en laparte superior, a la derec&a del logotipo. (ara facilidad de los visitantes, se&a implementado en este sitio un men) lateral a la i*quierda, que permitenavegar por las diferentes páginas de las secciones.

Qtra forma de conseguir algo similar es el empleo de menus desplegables.-sta solución debe ser cuidadosamente empleada, ya que es bastante

frecuente ver sitios donde el empleo de estos menus es di$cultoso.

#egla de los tres clics!na forma de ver si la na!egabilidad de un sitio es lo su$cientementebuena, es veri$car cuantos clics se deben &acer para llegar a cualquierparte del sitio. %i se superan los tres clics, es porque la navegabilidadnecesita me#oras.

%in embargo, a pesar de que con &acer tres clic?s se llegue a cualquierparte del sitio, el paradigma de la navegabilidad es poder acceder desdecualquier parte del sitio a otro con solo &acer un clic , aunque no siemprees posible. -n este )ltimo caso, recordar la regla antes descrita será lo másprudente.

Carga de los lins%eguramente todos tenemos algunos sitios favoritos, a los cualesaccedemos con frecuencia. -n estos casos, generalmente tratamos deingresar lo más rápidamente que sea posible a la sección que nos interesa,lo que &acemos empleando el sistema de navegabilidad implementado. -ltiempo que demora en cargar la página nos encuentra con la vista $#a en ellugar donde estará el lin? sobre el que &aremos clic?.

%i &emos eperimentado esto, sabremos por eperiencia propia que algoque resulta muy agradable a usuarios frecuentes es que los lins sea loprimero que aparece ante la vista. (or lo tanto, es conveniente que en los



sitios web se desplieguen en primer lugar los lin?s, algo que los usuariosfrecuentes agradecemos muc&o.

Conclusión-l diseño de una página web no solo tiene como cometido presentarbuenos contenidos en una presentación bella. Tambi'n debe &acer quedic&os contenidos sean fácilmente accesibles por el p)blico que la visita.!na buena navegabilidad puede ser la diferencia entre tener usuariosfrecuentes o no. -s posible que una persona, en el afán de obtener ciertoscontenidos, soporte algunas peripecias en la web. Lo que seguramente nolograremos con una mala navegabilidad es que este usuario desee volver anuestro sitio.

Cómo &acer un diseño web de carga rápida

odos los que navegan asiduamente por la web, &abrán visto algunos sitios

cuya carga se &ace particularmente lenta. -sto es algo que resulta muymolesto a la mayoría de los internautas, quienes suelen emplear muy pocotiempo, tan solo unos segundos, para decidir su siguiente acción.

La posibilidad de que un potencial usuario decida abrir otro sitio al demorarvarios segundos la carga de una página web es alta. -l usuario de 8nternetpromedio pre$ere los sitios donde todas las acciones, incluyendo la aperturade la página, sea casi instantánea, elemento que todo diseñador web debetener muy presente.

La demora en la carga está relacionada con el 9peso: o 9tamaño: de la

página. -sto nos indica que si queremos que nuestros usuarios accedanrápidamente a los contenidos de nuestro diseño, debemos &acer que loselementos incluidos en el diseño no tengan demasiado peso y desec&araquellos que &aga que el tiempo de carga de la página se eleve.

-n La3ebera.es, tenemos una &erramienta que resultará muy )til paraevaluar el tiempo de carga de nuestro diseño. (ara ello debemos &acer clic?en el siguiente enlace >Calcular el tiempo que tarda en cargar una páginawebA y colocar el tamaño de nuestra web >se debe incluir el arc&ivo quecontiene el código, los arc&ivos C%%, #avascript, ;as&, imágenes, sonidos,

etc.A. +llí veremos el tiempo en segundos que demorará nuestro diseño encargar para todos las velocidades de coneión.

(ara &acer que nuestra futura web cargue en forma rápida presentamos acontinuación una serie de conse#os que pueden resultar )tiles si se pretendeque nuestros visitantes se sientan a gusto y regresen.

.ptimi)ar el uso de imágenes%ería imposible de concebir una página web que no utilice imágenes. Tantopara &acer que la parte est=tica del diseño resulte atractiva como parailustrar los contenidos, es imprescindible el uso de imágenes. %in

embargo, las imágenes son unos de los elementos que puedencomprometer más el tiempo de carga de una página web.

-l uso de imágenes debe limitarse a lo indispensable para que la página seafuncional y atractiva.

http://www.lawebera.es/de0/accesibilidad2.php


http://www.lawebera.es/de0/accesibilidad2.php




Las imágenes de fondo, botones, íconos, logotipos, etc., son indispensablesen cualquier diseño, por lo que su empleo no puede ser desec&ado. %inembargo, es posible &acer que dic&os elementos no resulten demasiado!oluminosos.

Los siguientes íconos son realmente livianos, a pesar de que susdimensiones no son pequeñas y su calidad es muy buena

-l tamaño de las imágenes puede ser modi$cado en forma muy sencilla,tanto en sus dimensiones >largo y anc&oA como en su calidad, &aciendo deesta forma que las mismas tengan menor peso en el diseño. -stasalternativas pueden resultar muy )tiles si el diseño de la página requiereque se incluyan !arias imágenes, tal como puede suceder en muc&oscasos.

-n ocasiones, los íconos y botones pueden ser sustituidas por elementos

diseñados con CSS. -sta sustitución resulta muy conveniente, ya queestamos sustituyendo imágenes por unas pocas líneas de código, lo que enel caso de que los íconos o botones sean varios, representa una buenacantidad de ?b reducidos.

#educción de traba"os en 0las& pesar de "ue los trabajos en páginas web hechos en Flash resultan muy agradables a

la vista, !stos se cargan en forma muy lenta ya "ue su volumen suele ser bastante

grande.

-ada más tedioso "ue esperar frente al monitor mientras vemos una barra "ue nos

indica el tiempo de carga, cuando lo "ue deseamos es acceder a otros contenidos "ue no

se encuentran incluidos en estas animaciones.

i es posible, hay "ue evitar "ue los dise/os web tengan este tipo de animaciones, "ue

no redundan en grandes beneficios, ya "ue seguramente el usuario no ingrese a la

página para ver este tipo de elementos y si los contenidos "ue incluimos.

in embargo, es posible "ue algunos tipos de dise/o re"uieran "ue se empleen

aimacioes Flash para resaltar las virtudes de lo "ue estamos publicando, en cuyo

caso es aconsejable "ue los mismos sean cortos y "ue no se incluyan otros elementos de

peso en la página.

#as páginas más importantes de la web no emplean este tipo de recursos, ya "ue su

!(ito está basado en la !"cioalidad. Debemos tener en cuenta "ue, por bonitos "ue

resulten, debemos limitar el uso de elementos decorativos "ue aporten poca o nada a las

funciones para las cuales se crea la página web.

$nfócate en lo importante, nadie "uiere ver tu increible intro hecha en flash, sino lo "ue

ofreces al los usuarios, ya sean productos, servicios o contenido.

(o utili)ar @?0s animados

Los @?0s animados son una secuencia de imágenes, por lo que su peso esigual a la suma de todas ellas. Cuanto mayor sea la calidad del 28



animado, mayor cantidad de imágenes serán necesarias para componerlo ypor consiguiente, ma/or será su peso.

(ara que un 28 animado resulte atractivo, debe tener una buena calidad, loque necesariamente retardará sensiblemente la carga de la página web. Laopción de ba"ar la calidad del 28 animado no es viable dado que suempleo puede ba#ar muc&o la calidad del diseño. (or consiguiente, elempleo de este tipo de animaciones no es aconse#able.

0ay que resaltar que cada día es menor el empleo de 28s animados, yaque se consiguen iguales resultados con imágenes $#as de me#or calidad yde muc&o menor peso.

6tili)ar &o"as de estilo en cascada *CSS,1esde que las &o#as de estilo en cascada se &an empleado, se &a logradoreducir sensiblemente el tiempo de carga de las páginas web. 1ado que setrata de simples líneas de código, su peso en la página, tanto si estáincluido en el 3TML como si se emplea un arc&ivo separado, es muyreducido.

-l empleo de CSS &ace que no &aya que incluir en el código los atributos decada uno de los elementos que incluimos en la página, lo que implica unareducción muy considerable de líneas de código 0T5L y como consecuenciade ello, una reducción importante del peso del arc&i!o 3TML.

+demás, el empleo de CSS tiene otras virtudes que pueden verse en elsiguiente artículo (rimeros pasos con C%%. %u empleo, más queaconse#able, es necesario.

Tambi'n te puede interesar leer el artículo como acelerar la carga de un

sitio web.

%imbolismo de los colores y su uso en el diseño web

-l diseñador de páginas web debe tener en cuenta que el color es muc&omás que un elemento decorativo. -n el diseño web, siempre se debe pensar

que la creación que se está llevando adelante tiene como $nalidad gustar aldestinatario, el usuario de la página web, y no simplemente satisfacer elgusto del propio creador o de su cliente.

+l elaborar una página web debemos tener en cuenta el tipo de usuario quela misma va a tener. -l gusto por los colores y sus diferentescombinaciones se encuentra íntimamente relacionado con la edad, ni!elsocio+económico, la cultura a la que pertenece, ni!el educati!o eincluso el país o región del mundo a la cual se pertenece.

Todos estos elementos deben ser tenidos en cuenta a la &ora de diseñar una

página web, no solo para de$nir los colores que se emplearán en el diseño.Los colores tienen diferente simbología seg)n la cultura a la que sepertene*ca y el gusto por los mismos es variable con la edad.



Los colores tambi'n in;uyen en el estado de ánimo de las personas.5ientras que algunos colores tienden a dar sensación de pa* y tranquilidad,otros resultan irritantes o estimulantes.

6o se debe despreciar el efecto psicológico que los colores de nuestrapágina web tendrán sobre nuestros usuarios. La mayoría de los usuarios deinternet basan su navegación en la web en aspectos que están más ligadosal sub+consiente que a aspectos racionales, sobre todo si la navegaciónestá relacionada con el ocio.

6so de los colores enfocado en los usuarios seg7n su edad6o &ay que ser un gran observador para ver cuales son los colorespreferidos por las personas de acuerdo a su edad.

%i observamos a un grupo de #óvenes, veremos que se visten con coloresfuertes o tienen algunos elementos de este tipo de colores. Los niñostambi'n se sienten atraídos por los colores fuertes. %i observamos loscolores con los que se diseñan los #uguetes, veremos que en 'stospredominan esta clase de colores.

%i nos encontramos diseñando una página web destinada a niños oadolescentes, debemos tener en cuenta este gusto por los colores fuertes.%i diseñáramos una página web destinada al p)blico infantil con colorespastel o con gran in;uencia de los grises, seguramente los usuarios nisiquiera terminarán la carga de la misma cuando ya est'n buscando otra.

-l siguiente es un e#emplo de una página web diseñada para p)blico infantilcuyos colores son los adecuados

-l empleo de colores fuertes y un marcado contraste caracteri*an a estapágina, que es notoriamente destinada a un p7blico infantil. -n laspáginas destinadas a los adolescentes, si bien los colores pueden sertambi'n llamativos, puede apreciarse el empleo de otros colores.

-l p7blico adulto tiene por lo general una tendencia a disfrutar de coloresmás sobrios. -n las páginas destinadas a este tipo de p)blico, la gama decolores muestra una clara tendencia a ale#arse de los colores estridentes. +modo de e#emplo, mostramos la siguiente página



-l empleo del color gris acompañado de verdes en tonos opacos, &ace queesta página sea mayoritariamente del gusto de un p)blico adulto. Laausteridad del diseño tambi'n denota claramente el tipo de p)blico para elcual está destinada.

6so de los colores enfocado en los usuarios seg7n el g=nero

+)n a edades tempranas, &ay diferencias en la predilección de coloresseg)n el g'nero. -n el caso de los adultos, mientras que las mu#eres tienentendencia a preferir colores sua!es / fríos o una combinación de estos,en los &ombres la tendencia indica que pre$eren los colores cálidos, como

el ro#o o el naran#a.-sto es aplicado en muc&os tipos de páginas web. (or e#emplo, es notorioque las páginas destinadas a los deportes tienen combinaciones de colorescuya base son los colores cálidos, mientras que en páginas cuyo p)blicopredominante es el femenino, como páginas de cocina, #ardín, &ogar ymodas, las preferencias de los diseñadores profesionales se inclinan por loscolores suaves y fríos.

6sos de los colores seg7n otros tipos de p7blico

-l nivel socio4cultural tambi'n in;uye en la preferencia de colores. 5ientrasque el p)blico con un nivel educativo y económico entre medio y ba#o tienenuna marcada tendencia a gustar de los diseños confeccionados con coloresprimarios y fuertes, el p)blico con mayor nivel educativo y económicopre$ere los colores más apagados.

-l signi$cado de los colores es muy variable entre diferentes culturas, por loque la ubicación geográ8ca de los usuarios tambi'n debe ser tenida encuenta a la &ora de seleccionar la paleta de colores.

(or e#emplo, mientras que en occidente las bodas y las vestimentas de lasnovias tienen una íntima relación con el color blanco, el mismo color enculturas orientales está vinculado con los funerales.



<Cómo &acer %ue la paleta de colores tenga el efecto deseado>

!na ve* de$nida la paleta de colores para la página, debemos ver como&acemos para lograr que estos colores tengan el efecto visual deseado. 6obasta con colocar el color en los diferentes elementos de la página web, sinoque además debemos &acer que estos elementos sean fácilmente visibles,empleando uno de los principios básicos del diseño web el contraste.

(ara ello es absolutamente necesario el empleo de otros colores, quepueden ser neutros u opuestos a los colores que integran la paleta. (ore#emplo, si empleamos imágenes con colores fuertes, estas imágenespueden ser distribuidas sobre un fondo negro o de colores pálidos, &aciendoque sea sencillo contrastar y separar cada uno de los elementos. -n elsiguiente e#emplo &emos tomado una página de #uegos para niños, la cualestá diseñada con elementos de colores fuertes y llamativos.

(ara lograr que estos elementos se destaquen y sean de sencillavisuali*ación, el diseñador &a empleado un fondo que va desde el blanco&asta el gris pálido, lo que &ace que los elementos, sobre todo lasimágenes, se vean perfectamente de$nidas.

-n una palabra, además de de$nir el tipo de color de nuestra página,debemos pensar en como resaltar los elementos coloreados empleandocolores opuestos para, por contraste, marcar, de$nir y resaltar cada uno de

los elementos.

Tipografía aplicada al diseño web

-n el diseño de páginas web se emplean muc&as clases de componentes.Las páginas web tienen como $nalidad principal transmitir uno o variosmensa#es al usuario de internet, para lo que debe emplear elementosadecuados para lograr este ob#etivo. Las imágenes y el teto son loselementos más empleados para la mencionada transmisión de ideas,aunque con la aplicación de nuevas tecnologías adquieren cada ve* másfuer*a otros tipos de elementos, como los sonidos y los !ideos.



-sta transmisión de ideas en imágenes y teto se produce en formatotalmente diferente. 5ientras que a trav's de la imagen puede accederseen forma muc&o más rápida al mensa#e o la idea que se quiere transmitir, elvolumen y la profundidad de conceptos que pueden transmitirse con ellengua#e escrito en un mismo espacio es muc&ísimo mayor, por lo queambos elementos resultan necesariamente complementarios para lograruna buena comunicación.

?ntegración de los tetos en el diseño-s frecuente encontrar en las páginas web un párrafo precedido de unelemento grá$co, generalmente una imagen. -ste tipo de con$guración esmuy e$ca* y consiste en llamar la atención del usuario sobre el elementográ$co para luego completar la eposición de la idea mediante el empleodel lengua#e escrito. /eamos un e#emplo

+preciarán que lo primero que se distingue en este diseño, es cada una delas imágenes dispuestas #unto a cada teto. %in embargo, para podercomprender adecuadamente lo que se pretende transmitir, luego de &aber

sido seducidos por la imagen debemos leer el teto que se encuentra #untoa ella.

/ista una página desde el punto de vista est'tico y en su con#unto, lostetos se comportan tambi'n como un elemento grá8co, y poseen,además, algunos atributos que comparten con 'stos, como color, tamañoy forma. -s muy frecuente que elementos grá$cos como imágenes ofotografías, cuenten con teto como parte de los mismos. Teniendo encuenta todo esto, es obvio que no debemos considerar a los tetos solocomo el m'todo de desarrollar una idea, sino que además debemos incluirloen el diseño de la página desde el punto de vista grá$co. -n la antig^edad,la escritura estaba formada por la representación de ob#etos, y en muc&oscasos, como las pinturas y relieves del antiguo -gipto, la escritura yaformaba parte del diseño est'tico de muc&as obras de arte.

Tamaño2 tipoB legibilidad / color de la tipografía

Tamaño de las fuentesLa escala para determinar los tamaños de las fuentes tiene una &istoria tanlarga como la &istoria de la imprenta. -n el diseño web, así como en el usode fuentes en programas informáticos, se emplean los siguientes tipos de

escalas para determinar el tamaño de las fuentes o tipografías como puedeverse en el siguiente artículo. -n el mismo artículo se puede ademásobservar cómo se pueden determinar otros atributos de las fuentes, como latipografía, el color y el grosor.

http://www.lawebera.es/manuales/css1/fuente.php

http://www.lawebera.es/manuales/css1/fuente.php



La determinación correcta del tamaño de las fuentes es muy importante,tanto para obtener una buena legibilidad de los tetos, como desde el puntode vista est'tico. -isten muc&as formas de establecer los tamaños de lasfuentes, pero la más recomendable es establecer un tamaño de fuentepara toda la página y luego &acer variaciones del tamaño empleandoporcenta#es o ems.

Las medidas más aconse#ables para los tetos, es de == puntos para lafuente y = puntos para el interlineado, ya que brindan una lecturadescansada.

Tipos de fuentes1adas las características especiales de la visuali*ación de tetos enmonitores, eisten algunas consideraciones a tener en cuenta a la &ora deestablecer los tipos de fuentes con los que se visuali*arán los tetos denuestra web. -iste controversia entre los especialistas en el tipo de fuenteque es más legible. 5ientras que algunos sostienen que las fuentes del tipo%erif >Times 6ew 7oman o 2eorgiaA son más legibles, mientras que otros, lamayoría, sostienen que lo son las fuentes del tipo %ans %erif >arial, verdana,

ta&omaA.

Lo más conveniente es el empleo de una sola fuente, o dos, para toda lapágina para luego modi$car los atributos de la misma, de forma de poderestablecer diferencias entre los diferentes tipos de teto >títulos, subtítulos,párrafos, etc.A que se establecerán en la página. -n algunas ocasiones, dadoque el diseño lo requiere, es posible que se deban establecer más de un tipode letras, pero a)n en este caso es conveniente limitar al mínimo lacantidad de fuentes utili*adas.

%e debe tener en cuenta que los na!egadores y sistemas operati!os

soportan tipos de letras diferentes, por lo que será necesario establecer untipo de letras y algunos suplentes. -sto se establece en el C%% de lasiguiente manera

@ont : itali4 7old 1Kp6 aialJ .elveti4aJ vedana ;

1ebe tenerse en cuenta que cada tipo de letra designado debe estarseparada de las otras por una coma. -stableciendo las fuentes de estaforma, si el navegador no encuentra una fuente, establecerá la siguiente. %i

el diseño requiere un tipo de letra determinado, el suplente debe tenercaracterísticas similares.

Legibilidad de la tipografía

!n aspecto importante en el diseño web es la legibilidad de los tetos, yaque la di$cultad para leerlos puede &acer que el visitante opte por retirarsede la página.

(or norma general se acepta que aquellas tipografías diseñadas parame#orar la legibilidad en los tetos impresos no son convenientes para los

tetos de la web, ya que contienen elementos que necesitan deresoluciones ma/ores que las que ofrecen los monitores.

(ara esto se &an diseñado algunas tipografías que resultan particularmente)tiles para ser aplicadas en el diseño de elementos que se van a visuali*ar



en monitores, entre ellos las páginas web. -stas tipografías son, pore#emplo, Ta&oma, erdana y @eorgia, que permiten una fácil lectura a)ncuando se empleen tamaños pequeños. /eamos dos e#emplos de teto contipografías de atributos iguales >pequeño tamañoA con ecepción del tipo defuente. -n el primero se emplea Times 6ew 7oman, mientras que en elsegundo es +rial

$ste es un te(to

escrito en letras

de pe"ue/o tama/o

-ste es un tetoescrito en letrasde pequeño tamaño

Tampoco resulta conveniente el empleo de tipografías diseñadas conornamentaciones, ya que las mismas pueden resultar de di$cultosa lecturaen tamaños normales o pequeños. -ste tipo de fuentes ornamentales son)tiles solo para emplear en los títulos y como parte de los grá$cos.

Tambi'n es importante recordar que muc&as tipografías, a pesar de estardiseñadas para su empleo en informática, no se encuentran estandari*adas,por lo que algunos ordenadores podrían no visuali*arlas, empleando en sulugar la tipografía que viene 9por defecto: en el navegador.

Qtro aspecto que in;uye en la legibilidad del teto en una página web es eluso de ma/7sculas. 0ay diseñadores web, generalmente novatos, quetienden a usar las may)sculas como recurso para enfati*ar tetos en laspáginas web. (ara palabras sueltas es un recurso respetable, pero parafrases o párrafos enteros, más que enfati*ar di$culta la lectura por lo que elefecto se pierde. 5ira este e#emplo

L-- -%T- T-OTQ -%C78TQ -6 5+X%C!L+% /+LQ7+ TX 58%5Q %8 C!-%T+5_% L--7LQ F!- !6 T-OTQ 6Q75+L Q 6Q.

Color de la tipografía de una web

-l color de las tipografías, si bien deben integrarse con el resto del diseño,no debe reba#ar la visibilidad de los tetos. (ara obtener una buenalegibilidad de los tetos que se publican en una página web, el color que seemplea en las fuentes debe contrastar nítidamente con el color del fondodonde es colocado. !n ba#o contraste, &ace que el teto se vuelva difícil de

leer.

-n el siguiente e#emplo, el color de los tetos resalta claramente del fondo,de forma que se vuelve muy sencilla su lectura, &aciendo que los usuariospuedan acceder a estos contenidos con total comodidad.



Las fuentes pueden tener diferentes grosores, pero las letras cuyo grosor esmayor a lo normal, solo deben ser empleadas en caso de que se quieraresaltar una parte del teto, ya que su uso continuo tambi'n resulta seruna di$cultad para la lectura.

Disposición de los tetos en una página web-n aquellos sitios donde se debe colocar tetos de gran etensión, esconveniente que el mismo se encuentre dividido en párrafos no muy

largos, de modo que el usuario pueda reali*ar un rápido recorrido por elteto y no se 9pierda: con facilidad.

+demás es aconse#able la utili*ación de diferentes niveles de titulación>R&=S R&BS R&S, etc.A para ordenar la secuencia de los tetos, lo quetambi'n facilita al usuario encontrar aquellas partes del teto que leresulten más atractivas.

!n e#emplo de ello es este mismo artículo, en el cual puede apreciarse ladivisión en párrafos y la colocación de subtítulos, de forma que searealmente sencillo orientarse en el teto, &acerse un resumen de los temasque se tratan y encontrar los mismos con facilidad.

La disposición en párrafos sirve además como elemento decorativo. Lainclusión de un teto de grandes dimensiones puede &acer que el con#untopierda est'tica. La inclusión de títulos y subtítulos con fuentes, tamaños ycolores diferentes al resto del teto, no solo &ace que sea más sencillo yagradable leerlos, sino que además, &aciendo una correcta utili*ación deestos atributos, se colabora en el embellecimiento de la página.

Tambi'n es )til la creación de listas, ya sean ordenadas N numeradas RolS o

desordenadas N sin numeración RulS. Las listas se leen muy bien enpantalla, son fáciles de escanear y atraen la atención de visitante.

-mpleo del color en el diseño de páginas web

8maginemos por un instante que en este momento nos estamos conectandoa la web y comen*amos nuestra navegación abriendo una página web.ECuál es la primera impresión que recibe nuestro cerebro de los órganos

sensibles a la lu*, nuestros o#osG La respuesta será casi inmediata el color.



5uc&o antes de que nuestra mente comience a descifrar los contenidos quetiene la página, lo primero que se percibe es una sensación a trav's delcolorB

El color tiene el poder de transmitir sensaciones. -s sabido que losro"os, amarillos y naran"as resultan estimulantes e inclusive irritantes,mientras que los !erdes y los a)ules brindan una sensación detranquilidad y sosiego.

-s por esta ra*ón que los diseñadores web emplean las diferentescombinaciones de colores >en adelante denominaremos paleta de coloresApara que sean el complemento del mensa#e que los contenidos de la página.

La adecuación de la paleta de colores al mensa#e que la página debetransmitir a sus usuarios, es una de las claves del 'ito de cualquier diseño.Los usuarios de internet dedican muy poco tiempo a decidir si se quedan ono en una página, por lo que esta primera impresión resulta fundamental.

<'u= es el color / cómo lo percibimos>6uestro cerebro tiene la capacidad de recibir las señales que le envían loso#os, cuya función es recibir la lu* que llega del entorno. Los diferentesmateriales tienen la capacidad de re;e#ar y absorber diferentes colores >queen de$nitiva son diferentes longitudes de ondaA y los re;e#os de losmateriales estimulan los terminales nerviosos de nuestros o#os que es loque nuestro cerebro recibe.

+sí por e#emplo, cuando un material no re;e#a ninguno de los colores,nosotros percibimos el color negro" por el contrario, cuando un materialre;e#a todos o casi todos los colores, tenemos la percepción del colorblanco. Cuando un cuerpo absorbe los colores ro#os y a*ules, lo vemos de

color !erde" cuando un cuerpo absorbe los colores verdes y a*ules, lovemos ro"o. Los diferentes grados de re;eión de los colores de la lu* porparte de los materiales son los que nos dan los diferentes matices.

Combinación de coloresCuando un ob#eto o $gura de un color dado se encuentra en contacto conotro ob#eto de color diferente, se produce lo que llamamos combinación decolores. -n el diseño web, el contraste entre los diferentes coloresempleados para decorar y los colores propios de las imágenes, resultadeterminante a la &ora de de$nir la est'tica de la página.

Las propiedades de los colores >luminosidad, !alor, temperatura ysaturaciónA, &ace que &aya muc&as variedades de colores y, por ende,muc&as posibilidades de combinaciones y contrastes.

-l contraste entre elementos con diferencias en la luminosidad de loscolores, puede verse muy claramente en la combinación del color blancocon el negro, ya que estos son los etremos de la luminosidad.

-l contraste por luminosidad es uno de los más empleados en el diseño depáginas web, fundamentalmente en el destaque de los tetos sobre elfondo sobre el que se colocan. -n la siguiente $gura, podremos apreciarcombinación de colores cuya diferencia radica en la luminosidad.



Tambi'n es posible emplear los demás tipos de contrastes de colores, comolos contrastes por el valor, por la saturación, etc.

Cuando el contraste se produce entre colores complementarios, lasdiferencias son muy nítidas, aunque las diferencias que se producen son

etremas, lo que &ace que debamos emplear este tipo de contraste de colorcon sumo cuidado, porque se pueden producir estridencias que pueden darproblemas est'ticos importantes al diseño en su con#unto.

0asta &ace unos años, era frecuente encontrar diseños web en los que seempleaba una combinación de colores seleccionados de una paleta muyeigua, de apenas BPI colores, dada la tecnología que se empleaba paraformar colores en los monitores. Con el avance tecnológico de los )ltimosaños, esto se &a resuelto y los diferentes &ardware y software pueden

crear e interpretar una gama de colores de varios millones de ellos, lo quepermite una gran libertad a los diseñadores web.

E"emplos de utili)ación de coloresLas combinaciones que se pueden &acer entre los muc&os colores paradecorar la página y alentar a los posibles usuarios a quedarse en ella sonmuc&as. %in embargo, los estudios indican que a las personas les gustanciertas combinaciones más que otras.

+sí como en los restos de los elementos de una página web, el diseñadordebe tener presente el tipo de p)blico al que va dirigida la página parade$nir la combinación de colores que predominará en su página

-n el e#emplo que sigue es sencillo de ver que se quiso dar unacombinación tal que diera sensación de formalidad, elegancia ymodernidad.

La formalidad está dada en los colores por la falta de colores cálidos, loscuales brindan por lo general sensaciones más informales. La elegancia delblanco del encabe*amiento y la tipografía tambi'n contribuyen a crear esteefecto.

La modernidad está e#empli$cada por el empleo del a*ul, que no es un a*ulopaco ni oscuro. (or el contrario, tiene una tendencia a ser brillante.!so dedegradados, simulación de metali*ados, etc.



+quí tambi'n podemos ver que la combinación de colores empleados es deun contraste muy elevado, lo que permite destacar los contenidos escritospor encima de otros elementos.

-l siguiente e#emplo, tiene una paleta de colores suaves y pastel, cuya$nalidad es la de brindar a los visitantes una sensación de placide*,

comodidad y familiaridad. Qbservemos la escasa cantidad de colorescálidos. (or el contrario, los colores empleados en abundancia son los a*ulesclaros y los verdes.

5uy por el contrario, en la siguiente página podemos apreciar que casi latotalidad del diseño está dominado por uno de los colores cálidos elnaran#a. -sta es una página de alto impacto visual. La intención essorprender >y vaya si lo lograA al visitante, dándole además un aspecto

auda*, atrevido y trasgresor. -l altísimo contraste &ace que cada uno de loselementos componentes de la página se encuentren perfectamentede$nidos, &aciendo muy sencilla su visibilidad.



Conclusión0omo puede verse, la combinación de colores en las páginas web está íntimamente

ligada a los fines "ue se persiguen con las mismas y los efectos "ue se pretende

ocasionar al visitante. De la elección de la paleta de colores y del buen uso "ue se haga

de ella, depende en gran medida el !(ito del dise/o.

!tili*ación del espacio en blanco en el diseño de una web

-l espacio en blanco es uno de los componentes de todo diseño grá$co ydiseño web, con la misma importancia desde el punto de vista del diseño ensu con#unto que el que tienen los tetos, las imágenes y los videos.

Cuando nos iniciamos en el diseño de páginas web, normalmentedesconocemos este importante componente, empleándolo solo como el

espacio que separa otros elementos. 6o nos damos cuenta que cadaespacio vacío forma parte del con#unto visual de nuestro diseño.

-s frecuente ver como los diseñadores web se esmeran en ocupar la mayorparte del espacio de la página con diferentes contenidos, tratando de evitarque queden espacios en blanco. -sto da como resultado páginassobrecargadas y con elementos difíciles de ver y distinguir.

El espacio en blanco / los principios de diseño web-n artículos anteriores &emos detallado cuales son los principios en loscuales se basa el diseño web. -stos principios son el balance, el contraste,

el 'nfasis, el ritmo y la proimidad.

-n la aplicación de estos principios básicos de diseño la utili*ación de losespacios en blanco es fundamental. -l espacio en blanco contribuye conel balance de los diferentes elementos componentes de una página web,sirve para real*ar elementos por contraste, colabora y provoca el ritmo ysirve para dar sensación de proimidad en elementos seme#antes.

(or esta ra*ón resulta imprescindible considerar al espacio en blanco comoun elemento más en la página web. -l empleo de lugares vacío colaboraen la #erarqui*ación de los contenidos de la web y en la organi*ación de losmismos.

%i se quiere distinguir entre diferentes grupos de información relacionada, lomás adecuado es el empleo de espacios en blanco, de forma que losdiferentes grupos queden bien de$nidos.

-n el siguiente e#emplo, podemos ver como se &an separado los diferentesgrupos de información empleando espacios en blanco



Cuando se pretende real*ar un elemento por encima de otros, tambi'n losespacios en blanco pueden ser muy )tiles. -n el siguiente e#emplo, eldiseñador &a rodeado el título de la página de abundantes espacios enblanco, lo que colabora en gran medida en el contraste de este elemento.%i se &ubieran puesto menos espacios, su destaque sería muc&o menor.

-l ritmo o repetición de elementos en diseño web, conlleva

necesariamente la utili*ación de espacios en blanco para lograr el efectodeseado.

-n la siguiente página web, las imágenes empleadas forman un patrón derepetición. -ste ritmo es destacado por el necesario espacio en blanco entrecada una de ellas, &aciendo que se note claramente que se trata deimágenes repetidas y no una )nica imagen.

ormar grupos de información relacionada es un ecelente m'todo deorgani*ar la información para facilitar el acceso a la misma por parte de los

usuarios. 6ecesariamente, estos grupos deben estar diferenciados unos deotros, por lo que se &ace necesario el empleo de espacios en blanco paraconseguirlo.

http://www.lawebera.es/manual-diseno-web/ritmo-repeticion-disenos-web.php






-n el siguiente diseño, se &an separado cada grupo de información en formanítida con espacios.

El temor a los espacios en blanco-s com)n que quienes quieren tener una página web, piensen eneconomi*ar el espacio con que cuentan, colocando una gran cantidad deinformación en ella. -sto &ace que se piense en el espacio en blanco comoun desperdicio, por lo que muc&as veces se rellenan los mismos o seminimi*an. Como consecuencia de ello, la acumulación de información &aceque la mayor parte de estos contenidos pierdan su visibilidad y sean difícilesde ver en un primer golpe de vista, algo que resulta muy importanteteniendo en cuenta que los usuarios de las páginas web emplean muy pocotiempo en la locali*ación de ob#etos.

-isten e#emplos notables de páginas web cuyo diseño se basa en eldestaque de unos pocos elementos, de#ando el resto del espacio vacío.Fui*á el más paradigmático de esos e#emplos sea el siguiente

EFui'n no conoce esta páginaG Todo el diseño se centra solo en el cometido

principal de la página, por lo que el usuario no tiene que reali*ar unab)squeda entre otros contenidos para llegar a lo que realmente le interesa.-l resto de la página, un gran espacio en blanco.

%i una de las web más importantes y visitadas del mundo no tiene ning)ntemor por emplear los espacios en blanco de esta forma, E(or qu'&abríamos de tenerlo nosotros a la &ora de reali*ar nuestros diseñosG

<Aor %u= son necesarios los espacios en blanco>(ara dar respuesta a esta pregunta, debemos imaginarnos a un oradordirigi'ndose a su p)blico. EFu' sucedería si no &iciera pausas en sudiscursoG +demás de as$iarse, el orador no lograría que sus palabrasfueran entendidas adecuadamente por su p)blico, ya que el sentido de lasfrases está marcado en gran medida por los espacios vacíos, que en ellengua#e escrito están marcados por las diferentes puntuaciones.



Lo mismo sucede con los diseños web. %i no separamos los contenidos porespacios en blanco, el diseño no 9respira:. Los contenidos pierdenvisibilidad y destaque y el mensa#e que el con#unto del diseño pretendetransmitir se pierde.

(or otro lado, el empleo de márgenes &ace que el recorrido de la vista seamás corto, por lo que le resultará más cómodo. (or esta ra*ón, son muc&oslos diseñadores que emplean márgenes amplios, logrando que el con#untodel diseño se vea claramente. La siguiente página es un claro e#emplo

-l diseñador &a dado buenos márgenes a i*quierda y derec&a del cuerpoprincipal, por lo que el usuario logrará acceder a todos los contenidos de lapágina con un breve recorrido de la vista. +demás este diseño gananotoriamente en claridad con la utili*ación de los muy amplios espacios enblanco que podemos ver en el mismo.

Conclusión+ la &ora de reali*ar un diseño, debemos tener en cuenta desde un principiola utili*ación de espacios en blanco, no solo como forma de mantenerseparados los elementos de la página, sino que debemos tomarlos comoelementos en si mismos.

-l espacio en blanco bien empleado, es tan importante para un diseño webcomo cualquiera de los demás elementos que se deseen utili*ar.

-l principio de la proimidad en el diseño web

Como se &a mencionado en otros artículos, el tiempo que emplea un usuariode la web en determinar si el contenido de la página en la que se encuentraes lo que busca es mu/ corto, no pasando más allá de unos pocossegundos. -sto &ace imprescindible que todo buen diseño &aga que elusuario encuentre con facilidad y con solo unos pocos golpes de vistaaquello que ofrecemos.

-ste principio de diseño web, si bien puede ser empleado para lograrefectos sobre la est'tica de la página, tiene como principal cometidofacilitar el acceso a los contenidos por parte de los usuarios.

(ara ello es necesario que los diferentes contenidos se encuentrenordenados y que aquellos elementos relacionados entre sí se encuentren



próimos, de forma tal que el usuario tenga no más de tres o cuatro gruposde ob#etos.

-stos grupos deben estar relacionados por similitud, concepto quedesarrollaremos a continuación.

Similitud de elementos en Diseño Web Tan importante es que los elementos similares se encuentren próimoscomo que los elementos diferentes se encuentren ale#ados. -l correcto

balance de estos dos aspectos son los que contribuyen en la me#or!isibilidad de los contenidos.

+demás de colaborar en el ordenamiento de los contenidos de forma desimpli$car la !isuali)ación de los mismos, la proimidad puede serempleada como forma de decorar la página, ya que la distribución de loselementos puede generar unidades !isuales. !tili*ando los atributos delos diferentes ob#etos >tetos, imágenes o videosA se puede &acer quecontribuyan en el embellecimiento de la página.

Cabe destacar que este principio de diseño web solo es aplicable enaquellas páginas que presentan más de cinco o seis elementos, ya que encaso de que los contenidos no superen estas cantidades >por e#emplo enpáginas de presentaciónA, la formación de grupos puede resultar imposible,y en el caso de que lo sea, puede originar otros inconvenientes, comoeceso de espacios en blanco o la necesidad de incorporar nuevoscontenidos para rellenar.

La similitud(ara presentar el contenido en forma co&erente, debemos tener en cuentala similitud entre los diferentes componentes que se encuentran próimos.

(ara que un usuario identi$que un grupo de elementos como relacionadosentre sí, 'stos deben presentar algunas características comunes quepermita la relación con solo un vista*o.

(ara conseguir esto, podemos igualar algunos de los atributos de estoselementos >tamaño, forma, color, etc.A de forma que con solo una pasadade la vista se pueda identi$car la relación eistente entre ellos.

(ara que el concepto quede más claro, veamos un e#emplo

-n esta página podemos ver que los contenidos se agrupan de acuerdo asimilitudes. -n la parte superior se encuentra el logotipo y una brevepresentación. -n el centro y a la i*quierda, una serie de imágenes quemuestran los )ltimos traba#os reali*ados, agrupados en una misma *ona dela página con similitud temática y de forma. -n el centro y a la derec&a, se



encuentra el men), tambi'n agrupado por similitud temática, de forma,color, tamaño y disposición. +quí se puede apreciar que con una brevepasada de la vista por la página, podemos identi$car claramente cada unode los grupos de contenidos de la misma.

Los diferentes elementos pueden ser similares en uno o más tipos deatributos. Los atributos usados con mayor frecuencia son la forma, el colory el tamaño. %in embargo, en muc&as ocasiones es necesario reali*ar'nfasis en alguno de los elementos que componen el grupo, para lo cualbasta con alterar uno solo de los atributos para conseguirlo y a)n así lograrmantener la unidad del grupo.

Clases de proimidad-isten varios tipos de proimidad que pueden ser empleados de acuerdocon el diseño que se est' llevando a cabo.

Aroimidad por menor distancia

%e llama así cuando los diferentes elementos de un grupo se encuentranseparados por un espacio que resulta menor que el espacio que los separade otros grupos.

-n este tipo de proimidades, es importante que la diferencia de separaciónentre los elementos del grupo sean notoriamente inferiores que laseparación entre los diferentes grupos, de forma que se note al primer golpede vista cuales ob#etos forman parte del grupo y cuales no. /eamos une#emplo

-n los párrafos, es sencillo encontrar qu' parte del teto forma parte de unou otro párrafo, ya que la separación entre los diferentes renglones de cadapárrafo es visiblemente menor que la separación entre párrafos.

Aroimidad por contacto

!na forma de agrupar ob#etos es evitar que eista separación entre ellos.-sto solo es posible en los casos en que los ob#etos pueden estar #untos ydistinguirse claramente unos de otros y sean compatibles visualmente.



-n el centro de la página se encuentran tres elementos que formanclaramente un grupo, cuya separación entre ellos es nula. -n este caso seemplea el color para lograr diferenciar un elemento de otro.

Aroimidad por superposición

-n algunos casos, puede emplearse un leve solapamiento >superposiciónAde los elementos para aumentar la sensación de proimidad entre ellos, lo

que agrega un bonito efecto visual. Tal es el caso del siguiente e#emplo

+ la i*quierda de la página web, se muestra una imagen con sudescripción, formando claramente un grupo de elementos que tienensimilitud temática. La descripción se &a superpuesto a la imagen de formatal que altere muy poco a ambos elementos.

0ormación de grupos de elementos en diseño web-n el diseño web los grupos deben estar conformados por elementos queformen unidades temáticas. (or e#emplo, el logotipo de una página, el título

y el subtítulo, deben próimos entre sí, formando una unidad temática yvisual a la ve*. Qtro e#emplo son los men)s, cuyos componentes tienen queestar muy próimos para facilitar su visibilidad y contribuir en lanavegabilidad de la página.

Los grupos pueden estar conformados por elementos diferentes >pore#emplo, tetos e imágenes, tetos y !ideos, etc.A, ordenados de formatal que pueda identi$carse su relación con solo un golpe de vista.

La diferenciación entre los diferentes grupos de elementos tambi'n resultaimportante, ya que esto permite que los usuarios perciban claramente que

se trata de elementos temáticamente diferentes con solo una breveobservación.



7itmo o repetición en los diseños web

%i preguntamos por ritmo, la gran mayoría de las personas lo relacionan conla m)sica. -sto se debe a que es muc&o más sencillo percibir el ritmo atrav's del oído que a trav's de la vista. 5ientras que en la observación de

obras visuales los atributos más sencillos de detectar son la forma y el color,en la m)sica lo es el ritmo.

El ritmo es la repetición o alternancia de elementos, con frecuencia conintervalos de$nidos entre ellos. -l empleo del ritmo en el diseño web para la creación de ob#etos visuales >por e#emplo una página webA esfundamental y por ello se le considera uno de los principios del diseño web.

+a trav's de la repetición se consigue una regularidad que es importantepara conseguir ciertos efectos en el usuario, como sensación demovimiento, facilidades de b)squeda y navegación, sensación de

rela#amiento, orden y co&erencia, patrones y teturas, etc.

-l ritmo colabora en la presentación co&erente de los contenidos de lapágina, ordenándolos de forma tal que facilitan la visibilidad de los mismos.

Tambi'n sirven para embellecer la página, empleando repeticiones comoelemento decorativo. -ste tipo de ornamentaciones tienen antecedentesmilenarios, pudiendo apreciarse este ordenamiento del diseño desde lapre&istoria.

-l ritmo en los elementos visuales se consigue estableciendo un patrón basado en la forma, posición, color o una combinación de estos atributos. -s

posible establecer un ritmo con elementos disímiles, dado que eistendiferentes tipos de ritmo.

La variación en el espacio que separa los ob#etos no debe ser tan grandeque impida ver la repetición. -ste concepto es fundamental, ya que larepetición resulta efectiva siempre y cuando el usuario pueda distinguirla.Cuando la magnitud de la separación entre los elementos repetidos esecesiva, se pierde el ritmo, ya que 'ste solo puede ser considerado comotal cuando es posible apreciarlo.

!na misma página puede emplear distintos tipos de ritmo, ya que se puedediseñar una página pensando en dar aspectos diferentes a cada sección dela misma.

Clasi8cación del ritmo-isten tres tipos de repeticiones o ritmos, clasi$cados de acuerdo a laregularidad con que se producen

• #epetición o ritmo regular

• #epetición o ritmo sincopado

• #epetición o ritmo no armónico

#epetición o ritmo regular



-s la forma más sencilla de repetir elementos. %e trata de colocar elementoscon atributos similares a espacios regulares. Las )nicas variacionespermitidas en este tipo de repeticiones es la magnitud de los espacios entrelos elementos y la orientación en que se produce esta repetición.

La orientación de la repetición puede ser vertical, &ori*ontal o tener unadisposición en ambos planos. Los siguientes e#emplos muestran los trestipos de disposición que pueden emplearse en la repetición regular.

#epetición o ritmo &ori)ontal-

7epetición o ritmo vertical

7epetición o ritmo &ori*ontal y vertical

-n el primer e#emplo, la disposición repetida y regular de elementossimilares del men) en forma &ori)ontal, colabora con la facilidad denavegación de la página, manteniendo un orden que permite la fácil

visuali*ación de cada uno de los elementos que componen dic&o men).

-n el segundo caso, el diseño completo está basado en repeticionesregulares !erticales. -sto permite que los usuarios puedan despla*ar la



vista y encontrar todos los elementos que están dispuestos seg)n unpatrón ordenado.

-l tercer e#emplo muestra una forma de ordenar los diferentes elementos aintervalos regulares, tanto en el plano vertical como en el &ori*ontal. Laforma en que se encuentran dispuestas las imágenes, brinda una sensaciónde orden y facilita la visuali*ación de los elementos.

#epetición o ritmo sincopado *alternancia,

-ste tipo de repeticiones muestra un orden algo más comple"o que larepetición regular, ya que se trata de repetir grupos de elementos que a suve* se encuentran ordenados en forma regular, brindando una sensación deorden similar a la conseguida con el tipo de repetición anterior pero con unageometría de mayor comple#idad.

@ásicamente, se trata de repetir una secuencia de elementos.

Las páginas diseñadas con elementos ordenados con este tipo derepeticiones se muestran más rítmicas que las repeticiones regulares.

+ continuación, vemos un e#emplo de repetición sincopada, aplicada alfondo de la página. (odemos ver que un grupo de cuatro $guras repiten enforma ordenada, pero no regular, formando un ritmo más elaborado que enlos e#emplos anteriores.

La síncopa en la elaboración de obras visuales, al igual que en la m)sica,presenta diseños más comple"os que las repeticiones simples, por lo quesuele ser empleado como forma de evitar que el diseño resulte demasiadoestándar.

#epetición o ritmo no armónico

%e emplea para dar una sensación discordante, aumentando el mensa#eemocional del diseño.

-n el siguiente e#emplo, a pesar de que el orden se encuentra alterado entrelos diferentes elementos que componen el men), la sensación de orden se encuentra dada por la igualdad de colores y tonos. -l diseñador dio unasensación de desorden, aun cuando no perdió la armonía del diseño,empleando otros atributos.



-ste tipo de repeticiones se puede apreciar tambi'n en la disposición delcontenido de algunas páginas, tanto tetos como imágenes. 1isponer losob#etos de esta forma pretende dar un aire informal al diseño y es muyfrecuente encontrarlo en páginas musicales y de arte. -ste tipo de diseño seencuentra relacionado con el arte abstracto, en el que se inspira.

La repetición no armónica no tiene por qu' presentarse como desorden, yaque en este tipo de ordenamientos se aplican patrones irregulares, estandoel orden dado por otros atributos de los elementos presentados.

ConclusiónComo puede verse en los e#emplos presentados, resulta importante para lapresentación de los contenidos el empleo de la repetición o ritmo, deforma tal que el usuario que ingresa a la página pueda orientarse confacilidad y tenga un acceso rápido a los elementos más importantes.

Colabora en gran medida tambi'n con la est=tica del diseño, ya que la

formación de patrones ordenados, además de facilitar la visibilidad y elacceso a los mismos, forman en sí parte del diseño artístico de la página.

-l uso adecuado del ritmo es, por tanto, un elemento crucial en el correctodiseño de una página web. -plorar las posibilidades que brinda el ritmoresulta indispensable para quienes est'n adentrándose en este fascinantemundo del diseño web.

`nfasis en el diseño web

-n muc&os diseños web, la simple disposición de tetos, imágenes, videos ycualquier otro elemento no es su$ciente para conseguir que el usuario diri#ala atención &acia los elementos que consideremos más importantes.

La atención de las personas que navegan por 8nternet es de apenasalgunos segundos, lo que implica que el diseñador debe lograr captar la

atención del usuario, que 'ste se sienta atraído y no se retire de la páginaen unos segundos. -ste es uno de los motivos para emplear el 'nfasis ennuestros diseños.



Qtro motivo para aplicar este principio del diseño es diferenciar elementosseme#antes entre sí, resaltando aquellos que, dentro de su misma especie,se desee destacar de los otros.

(or e#emplo, si tuvi'ramos que incluir un teto con gran etensión, laatención del usuario seguramente no pasará de las tres o cuatroprimeras líneas, por lo que la lectura deberá simpli$carse y agregarseelementos destacados para que el lector pueda &acer una rápida recorrida.

-s muy probable que, tras esta breve recorrida empleando las ayudasaplicadas en el teto, el usuario considere que lo que allí se encuentra es loque necesita y prosiga con una lectura más detenida del teto.Lo mismo sucede con las imágenes. !na larga colección de imágenessimilares difícilmente pueda atraer la atención de un internauta, por lo queserá necesario destacar alguna o algunas de estas imágenes para que quieningrese en nuestra página tenga una idea resumida del tipo de contenidosque allí encontrará.-l =nfasis es uno de los m'todos más adecuados para conseguir elnecesario resaltado de algunos elementos de un grupo de elementos

&omog'neos. (ero tambi'n la tendencia a dar 'nfasis a demasiadoselementos de la página web es un error muy com)n, sobre todo dediseñadores web inepertos.

Clasi8cación de elementos seg7n el =nfasis1e acuerdo al 'nfasis que el diseñador emplee en los diferentes elementosque componen una página, 'stos se pueden clasi$car en tres grupos

Elementos dominantes

Elementos sub+dominantes

Elementos subordinados

Elementos dominantes

%on aquellos elementos que, dada su importancia respecto del resto de loscontenidos, se destacan aplicando 'nfasis por encima del resto. +continuación mostramos un e#emplo de elemento dominante

-n este e#emplo, podemos apreciar dos elementos que por su 'nfasis

pueden considerarse como dominantes el título 9creative services: y laimagen de la botella. %eguramente, al ver esta imagen, estos dos elementos&ayan sido los primero en los que &ayamos detenido nuestra atención, loque &a sido el deseo del diseñador de la página. -l mismo &a logrado este



efecto gracias al correcto empleo del =nfasis, consiguiendo colocar estoselementos en el primer plano de la composiciónB

(ara lograr convertir a un teto como elemento dominante, el diseñadorpuede emplear varios atributos sobre los cuales aplicar la diferencia, comotamaño, color, tipografía, posición o una combinación de ellos.-n cuanto a las imágenes, al igual que con el teto, basta con variar algunosde los atributos de las mismas, como tono, color, tamaño, posición o unacombinación de las mismas, para convertirla en uno de los elementosdominantes de la página.

0ay que destacar que la cantidad de elementos resaltados tambi'n resultamuy importante. Cuantos más elementos con atributos similarescoloquemos en una página, menos se destacarán unos de otros. %i en laimagen anterior colocáramos una cantidad mayor de teto resaltado, elteto que es dominante de#aría de serlo ya que estaríamos &aci'ndolo&omog=neo con otros elementos.

Elementos sub+dominantes

+ la &ora de interesar al visitante de la página, es necesario que luego deconseguir su atención gracias a los elementos dominantes, podamos guiarloa trav's de los restantes elementos de forma tal que mantenga el inter=sen lo que eponemos y se interese por ver otros contenidos.

(ara ello utili*amos otros =nfasis menores que los de los elementosdominantes, pero mayores que los que empleamos en el resto de loselementos de la página. -n el caso de los tetos, podríamos de$nirlos comosubtítulos y tetos resaltados. -n la siguiente imagen vemos una páginaweb donde se &a distribuido el teto en varios párrafos, cada uno con su

subtítulo.

-n esta página web >lawebera.esA, tambi'n encontrarán una gran cantidadde e#emplos de utili*ación de elementos sub4dominantes. 6otarán que estoselementos resaltados colaboran en la visuali*ación de los elementosimportantes y facilitan la ubicación de cada sección. -n una página dondetodos los elementos resultan &omog'neos, resulta etremadamente difícilubicar cuales son los elementos más atractivos o importantes, por lo que laatención del visitante pronto se perderá, con grandes posibilidades de queel mismo abandone la página.

Elementos subordinados

Llamamos elementos subordinados a dos tipos de elementos. !nos sonaquellas informaciones anunciadas por los elementos dominantes y sub4



dominantes, como tetos complementarios o ampliatorios. Qtros sonelementos que completan una composición de imágenes, embelleciendo lapágina o ayudando a resaltar a los elementos principales.

-stos elementos subordinados deben tener atributos de menor resalte quelos de los tipos anteriores, de forma que la diferencia con aquellos colaboreen resaltar su importancia.

-l 'nfasis conseguido en los elementos dominantes y sub4dominantes

depende en gran medida de la correcta utili*ación de los atributos de loselementos subordinados. -n la imagen que empleamos en el e#emploanterior, vemos que el tamaño de los tetos subordinados es muc&o menor,lo que permite que los subtítulos y títulos se destaquen.

%in embargo, &ay que tener presente que los elementos subordinadoscontienen información necesaria para completar el mensa#e que se deseaentregar, por lo que su legibilidad debe ser muy buena.

<$ %u= dar =nfasis / a %u= no> <%u= es lo realmente importante>(recisamente, contestando a la segunda pregunta obtienes la respuesta a laprimera. Cada página web tiene un ob#etivo, c'ntrate en ese ob#etivo a la&roa de crear su diseño y su estructura.

(or e#emplo, si estás vendiendo productos por internet, en la página deproducto muy probablemente te interese destacar la foto del producto y suprecio, si &ay descuento te interesa que est' señali*ado y sea bien visiblepara atraer la atención. por )ltimo y no menos importante, necesitas dar'nfasis al botón de comprar, para incitar al visitante a reali*ar latransacción.

<Cómo dar =nfasis>0ay varios recursos, en los que al $nal se resume prácticamente toda lamagia del diseño web

Tamaño- cuanto más grande un elemento, más 'nfasis N importancia leestás dando. +quí está muy relacionado el contraste de tamaño o escala.

6bicación- los usuarios navegan por la página desde arriba &acia aba#o.Los elementos que necesiten ser enfati*ados deben situarse arriba de tuweb, preferiblemente antes del pliegue para asegurarte de que el visitantelos verá sin necesidad de &acer scroll.

Color- el uso del contraste del color de forma adecuada ayudaenormemente a #erarqui*ar la importancia de los elementos de una web.(ero &ay que tener cuidado de no usar demasiados colores para mantenerun diseño limpio y agradable.

ConclusiónLa aplicación de diferentes grados de 'nfasis resulta de etremaimportancia en el diseño web. 2racias a ello la página en construcciónpuede verse &eterog=nea, llamando la atención de los usuarios sobreaquello que puede &acer que el mismo decida quedarse viendo el resto de

los contenidos o salir corriendo en la otra dirección.

-l 'nfasis contribuye en gran medida tambi'n a la est=tica de la página./eamos un e#emplo donde la aplicación de diferentes grados de 'nfasis sonel elemento principal del diseño



-n este diseño se puede apreciar que la aplicación de diferentes grados de'nfasis en el teto conforma la est=tica del diseño de la página. Lautili*ación de diferentes tamaños, colores y tipografías &acen a la totalidaddel diseño, además de dar el mensa#e tetual. + la i*quierda aparecen loselementos dominantes, mientras que a la i*quierda los elementos sub+dominantes conforman el logotipo, el men) y algunos subtítulos, mientrasque los elementos subordinados completan el mensa#e.

+demás de dar un mensa#e claro, cada tipo de elemento tiene importanciadesde el punto de vista est'tico. -sto demuestra claramente que el 'nfasisque se da a cada elemento resulta importante, tanto en el diseño est'ticode la página como en la claridad del mensa#e.

-l contraste en el diseño web

%e llama contraste a las diferencias que eisten entre dos elementosrelacionados y es uno de los principios de diseño web. -l contraste puede

ser mayor o menor en la medida que mayores o menores sean lasdiferencias de estos elementos. -sto quiere decir que dos elementos quetienen pocas diferencias entre sus atributos tienen un contraste ba#o,mientras que dos elementos cuyos atributos se diferencias muc&o, tienenun alto contraste.

-l empleo del contraste en el diseño web resulta muy importante paraatraer la atención del usuario. !na página web cuyos elementos tienen pococontraste no atraerá la atención de los posibles usuarios, mientras que unaweb que emplea un contraste evidente para destacar sus elementos más

importantes, atraerá fácilmente la atención. -l contraste es uno de losm'todos empleados para dirigir la atención del usuario de la página &aciadeterminados elementos. -n el siguiente e#emplo, una misma imagen semuestra con dos contrastes diferentes. -s fácil determinar que, a pesar deser la misma imagen y tener el mismo tamaño y color, la primera en llamarla atención es la imagen de la derec&a, cuyo contraste es más marcado queel de la imagen de la i*quierda.



%i en una página web se desea resaltar un ob#eto contrastándolo con losdemás elementos que lo circundan, no necesariamente &ay que oscurecerlo,agrandarlo, deformarlo o cambiar su color. -l contraste, tal como ya lode$nimos, es la diferencia entre los distintos elementos, por lo que tambi'nes posible cambiar los atributos de los elementos circundantes, de formaque a pesar de no &aber reali*ado cambios en el ob#eto logramos destacarlopor contraste.

Tipos de contraste-isten cuatro tipos de contraste

• Contraste de tono

• Contraste de color

• Contraste de contorno

• Contraste de alineación

•

Contraste de escala o tamaño

Contraste de tono

1e todas las propiedades de color >tono, mati* y cromaA, el tono es el quebrinda mayores posibilidades de empleo para mane#ar el contraste entrediferentes elementos, por lo que tambi'n resulta el más usado. !n e#emplonotable de la utili*ación de variaciones de tono para destacar los diferenteselementos podemos verlo en la siguiente imagen

-n la imagen anterior puede apreciarse que el men) se encuentradistribuido por toda la página y tienen la misma forma y tamaño que elresto de los cuadros en que se encuentra dividida la misma. Ladiferenciación de los elementos del men) está basada en variaciones detono. %i posamos el puntero en alguno de estos elementos, podremos ver

http://www.lawebera.es/de0/menu-navegacion.php

http://www.lawebera.es/de0/menu-navegacion.php



que para destacar el elemento que se está por seleccionar, tambi'n losdiseñadores &an empleado variaciones tonales.

Contraste de color

7elacionado con el anterior tipo de contraste, pero diferente, está elcontraste de color. 5ientras que el contraste de tono #uega con variacionesdentro del mismo color para lograr ese impacto visual deseado, el contrastede color produce variaciones precisamente en color.

Como decíamos, el contraste en color es otra de las posibilidades decontrastar ob#etos es a trav's del empleo de diferentes colores. -ste tipo decontraste, bien empleado, da muy buenos resultados, pero tambi'n puededar lugar a resultados desagradables si no se emplea con buen criterio.

La combinación de colores en diferentes elementos en una web no solotiene la $nalidad de embellecer el con#unto, sino que además posibilitadestacar elementos. La combinación de elementos con colores fríos ycálidos es la forma más corriente de lograr el mencionado destaque.

5ientras que los colores fríos >verdes y a*ulesA tienden a dar pasividad ydan un aspecto regresivo al ob#eto, los colores cálidos >ro#os y amarillosAson más agresivos y brindan a los ob#etos un aspecto epansivo. -sto quieredecir que si empleamos adecuadamente la combinación de colores fríos ycálidos, podemos lograr que un ob#eto se destaque sobre los demás.

-n el siguiente e#emplo podemos apreciar una página web que se encuentradiseñada sobre un fondo de color neutro, cuyo logotipo no presenta grandesdiferencias de tamaño ni de tono respecto de los demás elementos de lapágina. Los diseñadores &an logrado resaltar el logotipo de la página web

mediante el empleo del contraste de color.

Contraste de contorno

!na forma sencilla de destacar los elementos entre sí, es el empleo devariaciones en el contorno. Las formas irregulares o abstractas atraenmás la atención visual que las $guras sencillas y geom'tricas.

%i colocáramos algunas imágenes con un contorno geom'trico >cuadrado,

círculo, rectángulo, etc.A #unto a una imagen cuyo contorno es irregular y sinotro tipo de diferencias entre ellas, lograremos que la vista de quien observeel con#unto se pose en primer lugar en el elemento irregular.



-l siguiente es un e#emplo notable del empleo del contraste de contorno.-n la imagen aparece una página web en cuyo diseño aparecen varioselementos con colores llamativos, alto contraste y tamaños similares. %inembargo, el logotipo es lo primero que llama la atención, debido a su formairregular que contrasta claramente con el resto de la página que tienetra*ados marcadamente geom'tricos.

Contraste de alineación

Lograr una correcta alineación de los elementos de una página web es unade las cosas más importantes que debemos tener en cuenta en su diseño.Las cosas lucen me#or cuando están correctamente alineadas, y el impactovisual de ver algo 9en su sitio: a verlo descolocado es notablemente me#or.

-n el siguiente e#emplo vemos una alineación pareada, basada en dos ca#asiguales alineadas, cuyos elementos interiores tambi'n se encuentranalienados. + pesar de que el tamaño de letra de los encabe*ados no es muysuperior al del resto del teto, debido a su estructura resulta un elemento

claramente diferenciado e importante.

Contraste de escala o tamaño

La utili*ación de escala o tamaño diferente para resaltar determinadoselementos es una de las formas más conocidas y sencillas de conseguir el

contraste. -s lógico que si colocamos un elemento de mayor tamaño queotros, a)n cuando sean similares en otros atributos, 'ste elemento sedestacará del resto, y que cuanto mayor sea la diferencia de escala, mayorserá el contraste.



-n el siguiente e#emplo, vemos la imagen de una página web en la que elnombre del #uego promocionado logra destacarse >con algunos perosA delresto, debido a que se encuentra a una escala mayor que el resto de loselementos que componen esta página.

6n mal uso *o abuso, del contraste%i volvemos al e#emplo anterior, vemos un uso ecesivo del contraste en sudiseño, demasiado contraste de color y contorno entre los elementos, lo queen con#unto vuelve al diseño en algo caótico e incluso agobiante. 1e la

intención inicial de crear una página )til y agradable, el resultado $nalacaba siendo un sitio desorgani*ado y con sobre carga de información.

+sí, se ve que aunque el contraste es un recurso muy potente que debemostener en cuenta a la &roa de diseñar una página web, &ay que tener elsu$ciente conocimiento como para saber aplicarlo adecuadamente y en su

#usta medida.

ConclusiónLos e#emplos anteriores muestran la aplicación de un tipo de contraste paradiferenciar elementos entre sí. %in embargo, lo más frecuente es que elrealce de los elementos más importantes se &aga a trav's del empleo demás de un tipo de contraste combinados.

(ero &ay que destacar, como vimos en el anterior apartado, que es muyfácil emplear incorrectamente el contraste. !no de los errores másfrecuentes es el ya comentado de emplear contrastes ecesivos,desfavoreciendo la est'tica general de la página. Qtro error frecuente esque, por desconocimiento de estos conceptos, terminan destacándoseelementos que no son los más importantes de la página. -l uso delcontraste, como cualquier otra t'cnica, debe ser practicado para conseguir

buenos resultados.

-l balance en el diseño web

-ste principio del diseño web se re$ere al equilibrio que guardan loselementos que componen la página. La forma en que se disponen loselementos de la página in;uye notoriamente en el estilo y el carácter de lapágina.



-isten tres tipos de balance

Sim=trico < -ste tipo de balance se ve en los casos en que los diferenteselementos componentes de la página web se encuentran dispuestos deacuerdo a alguna de las clases de simetría.

$sim=trico < -s cuando los elementos componentes se colocanbalanceados pero sin seguir ninguna simetría.

0uera de balance < -n estos casos, los elementos son colocados en formadesbalanceada dentro de la página.

;alance sim=trico

%i bien eisten muc&os tipos de simetría, el diseño web tiene algunasparticularidades que &acen poco )tiles algunas de ellas. -stascaracterísticas particulares del diseño web están referidas básicamente ala forma en que se muestran las mismas en los na!egadores, lo que &aceque los diseñadores web tengan la necesidad de adaptarse a estos

requerimiento, adoptando solo aquellos elementos aplicables a este tipo devisuali*ación. -l empleo de simetrías proporciona sobriedad, elegancia yclaridad a los diseños.

La resolución de pantalla más empleada en la actualidad es de =KBJ HIUpíeles. + estas dimensiones se deben quitar las barras de &erramientas, lasbarras de despla*amiento >scrollbarA, etc., lo que &ace imposible incluir todoel contenido de una página en este espacio >para esta resolución se diseñacon anc&os de IK pielesA. -sto quiere decir que los usuarios de la mayoríade las páginas web se deban despla*ar en forma vertical por la misma, así

que resulta fácilmente comprensible que emplear una simetría &ori*ontal enla web es bastante difícil.

Características del balance sim=trico

1isponer de los elementos de una página web en forma sim'trica brindauna sensación de orden. Qtra característica importante es que permiteque la disposición de estos elementos sea 9predecible:, &aciendo que eldiseñador pueda guiar al !isitante por la página en la forma que deseepara asegurarse la me#or visibilidad de los elementos más importantes de lamisma.

Simetría &ori)ontal

Como está descrito anteriormente, la simetría &ori*ontal es bastante rara enel diseño web. %in embargo, en algunos casos en que, como en una páginaprincipal >&omeA, todo el contenido de la misma puede ser incluida sinnecesidad de que el usuario deba emplear las barras de despla*amiento, eldiseñador puede basar su creación en la simetría &ori*ontal.

+ continuación les mostramos un e#emplo de una página inicialcompletamente sim'trica en el plano &ori*ontal.

http://www.lawebera.es/de0/organizar-pagina-web.php






-n ella vemos que el men) está compuesto por líneas &ori*ontales queabarcan la totalidad del anc&o de la página y que el logotipo se encuentraubicado en el pie de la página y tambi'n se encuentra dispuesto de acuerdoa la simetría &ori*ontal del resto de la composición.

%imetría vertical

+l igual que en el caso anterior, es bastante difícil que un diseñador base su

creación en la simetría vertical eclusivamente. %in embargo, se puedenapreciar algunos casos en que ecelentes diseños son construidos en base aeste tipo de ordenamiento de los contenidos.

!na página web basada en simetría vertical implica que sus contenidos seencuentran distribuidos en dos o más columnas más o menos de$nidas queocupan todo el largo de la página. -n algunos casos, luego de establecer unencabe*ado &ori*ontal se emplean columnas para ordenar el contenido. Tales el caso del siguiente e#emplo, donde puede verse claramente que elcontenido principal de la página se encuentra dividido en dos columnassim'tricas, deba#o de un encabe*ado &ori*ontal.

!n caso llamativo es el siguiente e#emplo, donde el contenido de la páginatiene un encabe*ado con el logotipo en el centro, lo que permite tra*ar une#e que dividiría la pagina en dos mitades, mientras que más aba#o, lasimágenes tienen las mismas dimensiones y permiten dividir la página entres secciones sim'tricas en el plano vertical



Como puede verse, el contenido de la página puede dividirse en seccionescon simetrías diferentes, como el caso anterior.

Simetrías !ertical / &ori)ontal combinadas

Tambi'n es posible observar e#emplos de diseños web &ec&os combinandolas simetrías &ori*ontal y vertical, siendo 'sta la más com)n de lassimetrías.

!n e#emplo donde el empleo de la combinación de la simetría vertical y la&ori*ontal se ve muy claramente lo tenemos en la siguiente imagen

-ste diseño nos muestra una página dividida en cuadros perfectamentesim'tricos, tanto en el plano &ori*ontal como en el vertical. -ste tipo dediseños se emplean en forma más asidua en los )ltimos años.

Simetría radial

-n algunos casos, los diseñadores optan por otro tipo de simetría paraordenar los componentes de las páginas, como la simetría radial. Ladisposición de los elementos en este tipo de simetrías es en forma circularen torno a un centro ocupado por una imagen o teto o en forma de espiral.1ado la naturale*a de este tipo de simetrías, solo se emplea en casos enque la página no supere las dimensiones de una pantalla, ya que en casocontrario, gran parte del diseño se pierde.

-l siguiente e#emplo pertenece a una captura de pantalla de una página de

inicio, donde se puede apreciar claramente el centro ocupado por unaimagen, los rayos de sol que marcan nítidamente el diseño circular, y eltítulo, que acompaña la simetría radial con que está diseñada la página.



;alance asim=tricoCon este nombre designamos al tipo de balance en el que los diferenteselementos que componen una página web se encuentran equilibrados obalanceados pero sin seguir un patrón sim'trico. -ste tipo de balance esuno de los preferidos en la actualidad, ya que otorga gran libertad decreación, pero tambi'n constituye un gran desafío para el diseñador, ya queequilibrar elementos sin compensación sim'trica es más difícil al no contar

con el apoyo de elementos que balanceen el diseño por contraposición.%in embargo, a pesar de los retos que este sistema de equilibrio plantea,permite al diseñador colocar los componentes de una página en sitios másadecuados para dirigir el o#o del visitante &acia los puntos de la página quemás le interese mostrar, cumpliendo de esta forma con otro de losrequisitos que todo buen diseño debe cumplir.

-n la siguiente imagen podemos ver un diseño en el que, si bien cuenta conuna estructura geom'trica de$nida, no se cumple ninguna de las simetrías.

0uera de balance endo a)n más le#os en la libertad de diseño se encuentran las páginasfuera de balance o sin equilibrio. -sto se &ace en forma deliberada,buscando el impacto visual. -s un verdadero desafío lograr que una páginaque no tiene balance o equilibrio se vea bien, siendo un concepto muyavan*ado en el diseño y que requiere gran eperiencia por parte deldiseñador web.

!n e#emplo de página sin balance es el siguiente, donde el creador &adecidido romper el equilibrio tanto &ori*ontal como vertical, consiguiendo unefecto informal y abstracto muy llamativo.



ConclusiónCada uno de los m'todos de balancear o no una página web es válido. -ldiseñador debe tener en cuenta el tipo de página web que está creandopara elegir si su página será balanceada o no, si será sim'trica o no. 6oeisten reglas de$nidas en ninguna clase de creación, por lo que sólonuestra capacidad de imaginación puede ser el límite. +lgunos e#emplos deecelentes diseños pueden verse en la siguiente página y tambi'n en este

sitio.

(rincipios de diseño web

La cantidad de páginas web eistentes se pueden contar en miles demillones. %in embargo, un ba#o porcenta#e de ellas tienen un buen diseño,

debido fundamentalmente a que muc&os diseñadores web no siguen losprincipios básicos del diseño web, y asumamoslo, la mayoría no sonprofesionales ni saben bien lo que &acen.

(odría pensarse que es nada más que la aplicación del buen gusto. %inembargo, el diseño web es una t'cnica que se basa en una serie de reglasmás o menos de$nidas que sirven para crear algo que resulte )til yatractivo a la ve*.

de la mano del diseño puramente grá$co del sitio, va toda unaplani$cación de los contenidos del sitio, las estructura de los men)s, cómo

será la interacción con el usuario, rutas de navegación, arquitectura deinformación y en de$nitiva, todo un diálogo que &a de establecerse entre elsitio web y el visitante, que debe pensarse y plani$carse para que 'steultimo entiende de qu' va el sitio y sepa usarlo y n sabe &acer cualquiera>v'ase usabilidadA. -l diseño web es muc&o más que darle color y estilo auna página web.

1urante la plani$cación de un proyecto, debe tenerse en cuenta que es muyprobable que eista algo similar en la web, lo que &ace que el diseñador sevea obligado a &acer un buen diseño para poder competir. -l diseño web

tiene dos partes bien diferenciadas la funcionalidad o usabilidad y laest=tica. +mbas son imprescindibles, ya que una página funcional pero conmala est'tica no atraerá la atención de posibles usuarios o visitantes,mientras que una página muy bonita pero que funciona mal &ará que los



visitantes que lleguen atraídos por la buena est'tica del sitio no regresen a'l por no encontrar lo que necesitan o les resulte difícil.

-n este artículo nos referiremos eclusivamente al diseño web desde elpunto de vista est=tico, lo que equivale a decir que eplicaremos cualesson los criterios que se deben seguir para reali*ar una página atracti!a /efecti!a.

Selección del tipo de diseño

-l diseño de una página web debe estar acorde con el contenido de lamisma. -sto quiere decir que la selección del tipo de diseño que va allevar nuestra web debe estar acorde con lo que el usuario busca en ella ycon el producto o servicio ofrecido por la misma.

!na página destinada a #uegos >&ttpNNwww.#uegos.comNA y un periódicodigital >&ttpNNwww.elpais.comNglobalNA implican est'ticas totalmentediferentes, ya que mientras que en la primera prevalecerán los coloresfuertes y estará basada en imágenes, el periódico digital deberá ofrecer unaspecto más sobrio, elegante, ordenado y se basará en imágenes ycontenidos escritos.

-l diseñador deberá anali*ar estos factores y plani8car su traba"o,&aciendo una maqueta. -sta maqueta no es más que un dibu#o de lo queprogramará posteriormente.

(ara &acer una maqueta primero se piensan y deciden los contenidos queva a tener el sitio, con papel y lápi* se estructuran y bocetan las seccionesprincipales, posicionando cada elemento de la página en el sitio que se

considere apropiado, y una ve* se tiene en papel un boceto de como será lapágina web, se pasa a diseñar la parte grá$ca empleando programas dedibu#l. -l (&otos&op es muy usado para tal efecto, pero 2imp cumpleperfectamente su función y es gratis.

-sta maqueta &ec&a en (&otos&op tendrá además otra funcionalidad, yaque podrá etraerse de ella las imágenes para crear fondos, men)s,botones, etc.

<Cuáles son los principios del diseño web>+nte esta pregunta, debemos comentar que el diseño web debe seguir los

mismos principios que rigen cualquier clase de diseño. !na página web, laportada de un libro, una revista, un periódico o cualquier otra publicacióndeben estar diseñados ba#o los mismos principios, entendiendo lasdiferencias que corresponden a cada medio.

-sto quiere decir que, para tener e"emplos de buenos diseños, podemosobservar y anali*ar publicaciones eitosas y atractivas para saber cómo sedeben ordenar / decorar los elementos componentes de nuestra web.Qtra forma de observar buenos diseños es visitar páginas que se destaquenpor ello, como puede verse en las siguientes páginas

http%))www.webbyawards.com)

http%))www.webdesignerwall.com)trends)best1of1css1design12334)

http%))designdisease.com)



Los principios %ue rigen el diseño web son

;alance < -s el equilibrio que debe eistir entre los diferentes elementosque componen la página. 8mágenes y teto, elementos grandes y pequeños,*onas oscuras y claras, etc., deben estar balanceadas de forma tal que lapágina no solo resulte atractiva, sino que además logre enfocar la atencióndel usuario sobre aquellos elementos que nos interesa que lo &aga.

Contraste < -l contraste es una forma de distinguir los elementos que

deseamos resaltar. 1iferencias en la tipografía, diferencias en las formas>círculos, cuadrados, rectángulos, etc.A, diferencias de tamaño >una imagenmás grande con otras más pequeñas, por e#emploA, teturas y fondosdiferentes, etc., son algunos de los contrastes que pueden emplearse paraenfocar la atención del usuario sobre los elementos más importantes de lapágina

nfasis < -s una forma de distinguir algo dentro de un elemento. !ne#emplo de esto es lo que sucede con este teto, donde los títulos seencuentran resaltados así como algunas palabras o frases, de forma que

facilita la comprensión de lo que se quiere transmitir.#epetición o ritmo < -l ritmo o repetición es una forma de establecerpatrones con los que se ordenan los elementos de la página. %i loselementos de una página web siguen un patrón determinado, es muc&o mássencillo para las personas comprender el contenido y acceder a la mayorparte del mismo en poco tiempo. -ste punto es clave para mantener lausabilidad del sitio.

Aroimidad o unidad < -ste concepto se re$ere a colocar #untos opróimos los elementos que est'n relacionados, formando unidades visuales

que brindan co&erencia al contenido de la página.

6tilidad de los principios de diseño web-l diseño de una página web debe &acer que el usuario que ingresa a lamisma sea guiado &acia la información que nos interesa que vea.

-l logo de una página web suele colocarse en el etremo superior i*quierdodebido a que &ay estudios que indican que ese es el sitio que miran losinternautas cuando ingresan a la página, y al que vuelven a mirar parasaber dónde están. +demás, los logotipos suelen ser grandes y llamativos.1e a&í en más, el usuario debería ser guiado mediante una secuencia de

pasos por las *onas del documento que nos interesa que vea.

La atención que prestan quienes navegan por internet a cada página quevisitan es apenas de unos pocos segundos, por lo que cada instante que elusuario de la página desvíe su atención de lo que nos interesa comunicar,estaremos perdiendo la oportunidad de mostrarle lo que realmente nosinteresa que vea. !n aspecto importante a tener en cuenta es la legibilidady la amenidad de los contenidos aplicados en el diseño.

-sta atención sobre las partes esenciales del contenido es la meta que debeseguir todo diseño. -n los breves segundos que el usuario presta atenciónantes de irse de la página, el diseño debe lograr que se quede y guiarlo porel contenido de la página para cumplir los ob#etivos de la misma.



Qtra misión importante del diseño web es colaborar en con!encer alusuario de la página que el servicio o el producto ofrecido es lo %uenecesita o le con!iene. (ara ello es necesario que el diseño web se a#ustea los requerimientos del producto o servicio, sin descuidar los principios deldiseño.

Todo esto, que parece comple#o, resultará muc&o sencillo en la medida quese vaya a&ondando en el diseño de páginas web, ya que la puesta enpráctica de estos principios &ará muc&o más sencilla su comprensión.

@reve guía para iniciarse en el diseño web

E'u= se necesita para ser diseñador web>

8niciarse en el diseño web implica necesariamente un proceso deaprendi*a#e. Todo diseñador web debe conocer al menos dos lengua#es deprogramación web >3TML y CSS son indispensables y complementariosA,saber como elegir un servidor, contratar un dominio, pagar y cobrar pormedios electrónicos, emplear editores 3TML, editar imágenes, usareditores WS?W?@ y una larga lista de etc'teras. (ero a no desanimarseW5uc&as de estas tareas son realmente sencillas, y las que no lo son,resultan realmente muy divertidas, por lo que no les costará ning)n traba#oaprender todo esto.

La primera tarea que se debe emprender, es aprender el lengua"e 3TML,

para lo que recomendamos leer la guía que pueden encontrar en elsiguiente enlace conceptos básicos de 0T5L.

+ pesar de que posteriormente se tome la decisión de emplear editoresWS?W@ como 1reamweaver >que para personas inepertas facilitanmuc&o la tarea, puesto que tiene un editor visual que te permite crear tupágina web sin necesidad de tocar códigoA. 1e todas formas no te &agasmuc&as ilusiones, pues conocer el lengua"e 3TML es indispensable ya querara ve* el diseñador web no tiene que retocar el código producido por estoseditores.

!na ve* que se &an obtenido los conocimientos fundamentales de 0T5L, elsiguiente paso es aprender a utili*ar C%% >Cascading St/le S&eets <3o"as de Estilo en CascadaA. C%% es un lengua#e que permite aldiseñador web dar la apariencia visual desea a sus páginas. Con un correctomarcado &tml, puedes crear páginas muy diferentes usando tan solo C%%.+demás, C%% permite mantener separados los contenidos de lapresentación, emplear el mismo código en varias páginas, modi$car lapresentación de la página sin afectar a los contenidos y viceversa y da unmayor control al diseñador sobre los estilos y formatos de sus páginas.

!na breve descripción de C%% la pueden encontrar en 2uía breve de C%%.-l lengua"e CSS es algo más difícil que 0T5L, pero a la ve* es másdivertido. Llegar a tener un conocimiento avan*ado sobre C%% requieremuc&a eperiencia y tiempo, uno se da cuenta conforme va aprendiendo



que en realidad le queda muc&o por entender y a veces el límite sólo lopone la imaginación. %e pueden &acer cosas increíbles sólo con C%%.

Como decíamos, conseguir tener control total sobre C%% es algo que va allevar más tiempo, muc&a práctica y requerirá constancia. -l aprendi*a#e dellengua"e CSS tiene una utilidad adicional, y es que puede considerarse unpaso intermedio antes de comen*ar a estudiar otros lengua#es másavan*ados.

<'u= es 3TML>

-l lengua"e 3TML consta de una serie de comandos u órdenes que losnavegadores pueden interpretar, por lo que puede decirse que una páginaweb es un documento donde se escriben contenidos y una serie deinstrucciones para indicarle al navegador como debe mostrarlos.

+ trav's del lengua#e 0T5L podemos comen*ar los primeros pasos en eldiseño web. Tal como se describe en conceptos básicos sobre 3TML,para comen*ar a reali*ar nuestras primeras prácticas solo es necesarioemplear un editor de teto y un navegador.

-l lengua#e 0T5L está compuesto por etiquetas que no son más queinstrucciones que le indican al navegador qu' &acer. +lgunas de estasetiquetas son instrucciones puntuales, por lo que se componen de una solainstrucción o etiqueta, mientras que otras pueden tener una etensiónilimitada, por lo que es necesario introducir una etiqueta de apertura y otrade cierre, limitando la etensión de la instrucción.

+ la mayoría de las eti%uetas 3TML se le puede agregar atributos y un

valor para 'ste. (ara poder comprender me#or estos conceptos, daremos une#emplo sencillo. La etiqueta

<.>

produce una línea &ori*ontal que se etiendo por todo el anc&o deldocumento y que tendrá un grosor de = píel. %in embargo, es posible crearlíneas de distintos grosores empleando esta etiqueta, para lo quedeberemos agregar el atributo %8-, al que le podremos dar el valor quedeseemos

Todos estos conceptos se verán más claros en la medida que nos vayamosintroduciendo en el aprendi*a#e del lengua#e 0T5L.



-s aconse#able tener a mano >impreso o en el propio ordenador, como lesresulte más cómodoA un listado de las eti%uetas 3TML para reali*arcuantas consultas necesitemos. Les puedo asegurar que lo van a &acerpermanentemente, &asta tanto no memoricen las principales y más usadas,y en forma ocasional a)n cuando con el tiempo se vuelvan epertos.

<'u= es CSS>

+l igual que el lengua#e 0T5L, el lengua"e CSS solo requiere el empleo deun editor de teto simple y un navegador, si bien es cierto que resultan demuc&a utilidad algunos programas que están creados eclusivamente paracrear &o#as de estilo. 0T5L y C%% son lengua#es complementarios, ya que, apesar de que pueden reali*arse páginas web sólo con 0T5L, esto no es lomás conveniente ni lo más aconse#able, la presentación visual del sitiode#ará muc&o que desear.

-l lengua#e C%% se emplea eclusivamente para de$nir como se va apresentar el contenido de la página. -sto puede llevarse a cabo dentro del

documento 0T5L, dentro de cada etiqueta de ese documento o bien comoparte de un documento aneo a la página web.

5ediante el empleo de C%%, se puede organi*ar la página disponiendo ellugar y la etensión que ocupará cada elemento y el formato de los mismose incluir imágenes, videos y sonidos >como conse#o, no uses sonidos en laspáginas web, son molestos, resultan poco profesionales y no aportan nadaal sitioA y de$nir como se mostrarán cada uno de ellos.

.tros lengua"es-n la medida que las eigencias del diseño van avan*ando, se &ará

necesaria la inclusión de otros lengua#es, como "a!ascript, p&p, asp yotros, ya que con 0T5L y C%% se consiguen páginas estáticas, donde elusuario se encuentra limitado a ver o escuc&ar el contenido.

+lgunas páginas web requieren que los usuarios interact)en, envíen datos,llenen formularios, etc., lo que solo es posible incluyendo otros lengua#es, almenos en parte de las páginas.

%i bien es cierto que &oy en día la mayoría de páginas web funcionangracias a gestores de contenido >C5%A, que son aplicaciones prefabricadasen las que la parte de programación y diseño está ya creada por defecto, y

normalmente se personali*anNmodi$can para usarse. (or e#emplo, esteportal está creado ba#o 3ord(ress, que es la plataforma de blogs másconocido actualmente. -l diseño es propio y gran parte de la programaciónque trae la aplicación está modi$cada, pero el dinamismo del sitio y sucomple#idad no serían posibles sin el uso de 3ord(ress, y 3ord(ressfunciona con (0( y 5y%FL.

-n este punto el diseñador puede plantearse dar el salto al desarrollo web, yaprender estos lengua#es de programación, o bien puede comen*ar atraba#ar mano a mano con programadores que tendrán muc&os más

conocimientos que 'l en estos lengua#es, y dedicar todo ese valioso tiempoque emplearía en aprender a programar para ser me#or diseñador, oimpulsar su negocio.



Conclusión+ pesar de que la lista pare*ca un poco etensa, una ve* que se introdu*canen el mundo del diseño web, el aprendi*a#e de cada uno de estos lengua#eslos irá llevando a introducirse en otros, por lo que el conocimiento lo iránadquiriendo en la medida que lo vayan necesitando y no como m'todofor*ado de estudio.

-l aprendi*a#e del diseño web se produce en una forma muy entretenida, yaque normalmente los que nos acabamos dedicando a esto lo &acemos porpura vocación y muc&os de forma autodidacta. La práctica les &ará ver losresultados de lo que se va aprendiendo, aplicando los conocimientosadquiridos desde el mismo momento en que este aprendi*a#e se inicia, loque resulta muy estimulante y satisfactorio.

U Conse#os para el diseño de un buen layout o estructura web

+l crear un diseño de web, uno de los aspectos más importantes es eldiseño del layout >estructuraA. 5uc&a gente tiene en cuenta la importanciade &acer un buen layout y como &acerlo >C%%, tablas, frames, etcA, pero losconceptos básicos de diseño web son a menudo ignorados porcompleto.

El espacio / el espacio en blanco en el la/out

=. 5ant'n una resolución de pantalla como ob#etivo, pero no te cierres+unque la mayoría de los usuarios se &an ale#ado &ace tiempo de la clásicaresolución de UKK\IKK, no la pierdas de vista cuando &agas el layout oestructura de tu diseño web, procura que tu web tambi'n se vea bien enella aunque diseñes para resoluciones de =KBJ\HIU o mayores. %i no tienesen cuenta resoluciones de navegador inferiores puedes estar de#ando delado a un porcenta#e de usuarios nada despreciable.

B. !tili*a todo el espacio disponible, pero se ;eible -l uso de un tamañorelativo >;uidoA en determinadas secciones del diseño de tu páginas web

>por e#emplo en la *ona principal del contenidoA, de modo que se epanda ycontraiga para adaptarse a la ventana del navegador, lo &ace más usable,me#orando la eperiencia del usuario.

. !sa el color para de$nir los espacios si quieres diseñar una página conanc&os $#os, Epor qu' no centrar la web en la pantalla del navegador yme#orar así su presentaciónG 5ira el e#emplo que se propuso en una guíaanterior, Equ' te parece me#orG



+ la ve* que centras la página en el navegador, puedes ponerle un color defondo diferente al sitio, como se ve en el e#emplo. -sto me#orará laapariencia de tu web con los cambios de resolución que se producen de un

usuario a otro. Las grandes resoluciones >por encima de =KBJ\HIUAmostrarán una parte de la ventana de navegación con el color de fondo que&ayas elegido, mientras que los navegadores con resoluciones máspequeñas mostrarán menos o ning)n color de fondo.

?mágenes / grá8cos en tu estructura webJ. +linea las imágenes !no de los errores de diseño más comunes endiseñadores novatos es insertar las imágenes en una página de cualquiermanera sin pensar en el layout >estructuraA. -sto visualmente no queda muybien, puesto que por defecto las imágenes se alinean a la i*quierda, resulta

muc&o más agradable verlas centradas. Con un simple código de un par delíneas puedes centrar tus imágenes. -ste código va en tu &o#a de estilosC%%

im displa8 7lo4= main auto ?

P. (roporción de los grá$cos y teto en una página -s fácil de#arse llevarpor la gran cantidad de imágenes y animaciones disponibles, pero si tepasas añadiendo imágenes a tu web, puedes &acer que resulte muy difícilde leer o incluso molesto.

$nc&o del tetoI. (iensa en el anc&o del teto con esto me re$ero a cuántas palabras semuestran como promedio en una línea de teto. La mayoría de personas



pueden leer cómodamente alrededor de H a == palabras en una línea. Conmás palabras el teto se vuelve difícil de leer, con menos se vuelveinco&erente y distraen los saltos de línea.

H. 6o te recomiendo que centres el teto !na de las t'cnicas que primerose aprenden cuando se construyen páginas web es el uso de la etiquetacenter >para centrar estructurasA, y lo típico es empe*ar a centrar todo sinmedida. %in embargo, centrar un teto en 3TML y que quede bien escomplicado, y además conseguir que se lea con facilidad muc&o más. !nconse#o, no centres el teto, utili*a el #usti$cado o me#or, simplemente no lotoques >d'#alo alineado a la i*quierda como viene por defectoA. (rueba con

#usti$car el teto, tal ve* sacies tu ansia por centrar y centrar

p te6t(alin Busti@8?

$lineación del la/outU. Cuida la alineación de cada parte de tu sitio La mayoría de losdesarrolladores web, cuando piensan en la alineación piensan en el atributoalign o en la propiedad C%% ;oat y similares. (ero la alineación de loselementos de la página es más que #usti$car o no el teto o ;otar un men)a la i*quierda o a la derec&a. La alineación proporciona el marco estructuralde un diseño web. La alineación puede afectar a la eperiencia delnavegante en tu web y a la efectividad de la misma en lograr sus ob#etivos.

+ continuación tienes los e#emplos más típicos de alineación en los layouts.5ira estos e#emplos y #u*ga por ti mismo cuál es el tipo de alineación para laestructura de tu sitio web más adecuado >o que m ás te gustaA

manual de diseño web

Documents