bloque4_4_pautas_estilo

8/2/2019 bloque4_4_pautas_estilo

1/11

Pautas de estilo para sitios web

Pautas de estiloRecogemos aqu, como

resumen de algunos de losapartados vistos en este bloquede contenidos y en bloqueanteriores, algunos consejos queesperamos que os sean tiles noslo durante el proceso deconstruccin de vuestraspginas web, sino tambindurante su mantenimiento.

Posiblemente muchos deestos consejos os parezcanobvios, pero no por ello hemosdejado de apuntarlos aqu.

Como veris la mayora deestos consejos estnrelacionados con la usabilidad yla accesibilidad y son deaplicacin a las pginas y los contenidos que podis crear en cualquier otro sitiopero trataremos de remitiros, si lo consideramos conveniente, a las pautas para eldesarrollo de un sitio web en EducaMadrid.

Imagen tomada de la Wikimedia Commons.

1. Consejos de usabilidad para empezar a disear una webPa u t a g e n e r a lEl objetivo de nuesto espacio web debe

estar claramente definido y visible. Yasea en la cabecera de las pginas omediante algn tipo de texto en la homede nuestro sitio, debemos exponer a losvisitantes de forma breve y clara qu eslo que van a encontrar en las pginasque pueden visitar. Recordad que lamayor parte de las visitas a pginas webno pasan de la pgina de entrada. Siqueremos que los posibles visitantenavegen por nuestras pginas deberemos
http://upload.wikimedia.org/wikipedia/commons/7/7f/Multimedia_usability_-_Advanced_upload_workflow_01262010.JPGhttp://upload.wikimedia.org/wikipedia/commons/7/7f/Multimedia_usability_-_Advanced_upload_workflow_01262010.JPG


2/11

informarles claramente de cul es elcontenido que pueden encontrar en ellas. En este sentido, es muy convenienteevitar la pginas de introduccin que no aportan nada al sitio. El usuario buscainformacin, no florituras o demostraciones grficas de que se dominan lasherramientas de diseo.

Un poco de sentido comn

A c r c at e a l a s n o r m a s

Una de las cosas ms importantes que debes recordar cuando diseasun sitio es que la rueda ya ha sido inventada. La verdad es que, ancuando seas un diseador experimentado, no sers capaz de disear unnuevo tipo de interfaz que funcione realmente bien. No digo que no seaposible, pero es muy poco probable. Cuando se trata de interfaces, sernico y destacar no es siempre lo mejor.

Pi d e p r e s t a d o

chale una vistazo a algunos grandes sitios. Generalmente, se gastamucho tiempo y dinero en construirlos y generalmente (no siempre)aplican el sentido comn. Toma nota en cmo lo hacen los dems.

Er e s m e n o s i n t e r e s an t e d e l o q u e p i e n s a s

Existen mas de 100 millones de sitios en Internet. La gente no tienetodo el tiempo del mundo para echarle una vistazo al tuyo. Por lo tanto,se breve y ve al grano. Como dice el clich: Menos es ms.

Fragmento de Introduction to good usability de Peter Conradie[Consultado el 12/11/2010]

1.1 Sobre la navegabilidadSo b r e l a N a v eg a b i l id a d e n n u e st r o s i t i o w e b

El usuario debe saber siempre dnde se encuentra. Si queremos que nuestros
http://www.peterpixel.nl/projects/ebook/introduction_to_good_usability.pdfhttp://www.peterpixel.nl/projects/ebook/introduction_to_good_usability.pdf


3/11

visitantes se centren en el contenido y se olviden de la navegacin, los elementosque le indiquen dnde se encuentra y cmo desandar el camino iniciado deben serevidentes. Para conseguir esto disponemos de varios recursos:

1. Si usamos logotipos, que estn siempre presentes.2. Disear un men de navegacin bien organizado. Con nombres de

enlaces significativos. Conviene evitar los mens anidados porquepuede resultar difcil navegar a travs de ellos. Si es imprescindible su

uso, no es conveniente desarrollar ms de un nivel de anidamiento,usad las opciones de ocultar pginas y dentro de las secciones quecontienen pginas ocultas usad el porlet "navegador" o un portetmapa del web configurado para que muestre slo el contenido de esaseccin.

3. Usar caminos de migas, pero recordad que su funcin principal es quelos usuarios sepan dnde estn no servir como men de navegacin.

4. Disponer de un mapa del web.

So b r e l a N a v e g a b i l i d a d d e n t r o d e l o s co n t e n i d o s :

B ar r a s d e d e s p l a za m i e n t o :1. Evitar el d e sp l a za m i e n t o h o r i z o n t a l : los usuarios no estn

habituados a usar la barra de desplazamiento horizontal. Si al leer untexto parte de su contenido se pierde en la pantalla por la derecha, esmuy posible que el usuario no haga el esfuerzo de leerlo. Al usar eleditior de contenidos de EducaMadrid este error no se producir sitenis en cuenta unas normas bsicas que casi se pueden reducir ados: no insertar imgenes con unas dimensiones muy grandes y noinsertar tablas con una definicin de ancho muy grande.

2. Si es posible, evitar tambin los d e sp l a za m i e n t o s v e r t i ca l e s . Paraello sera deseable que los contenidos se diseen para que quepan enpantalla, sin que el usuario tenga que usar la barra de desplazamientovertical o la rueda del ratn para desplazarse arriba y abajo.

Enlaces:

1. Los en laces dentro de los contenidos deben ser claramenteidentificables. Es conveniente que se ajusten a la norma, es decir, quetengan un color diferente al resto del texto, el color azul es elestandar, y que estn subrayados. Tambin es conveniente que los

enlaces a sitios o pginas ya visitados aparezcan en otro color, eneste caso el rojo es el estandar.2. Si estamos proporcionando a los usuarios una l i s t a d e en lace s

debemos asegurarnos de que existe suficiente espacio entre ellos paraevitar que se pueda pulsar sobre un enlace no deseado.

3. Los en laces deben abrirse e n u n a n u e v a v en t a n a o en unapestaa diferente? Si los enlaces remiten a otra seccin o pgina denuestro sitio web debemos evitar que se abran nuevas ventanas opestaas. En el caso de que enlacemos a documentos pdf, la normaaceptada es que se abran en una nueva ventana. Si enlazamos aotras pginas web deberemos decidir qu opcin tomamos teniendoen cuenta si importa o no que el usuario pierda la referencia denuestro sitio web.

4. Si los enlaces apuntan a un documento o archivo que se va descargaro que tiene un tamao muy grande es conveniente indicar hacia


4/11

dnde nos remite el enlace (archivo zip, hoja de clculo, documentode texto, mp3, etc.), con ello facilitamos que los usuarios sepan deantemano si quieren o no realizar esta accin, puesto que al hacer clicsobre el enlace el navegador posiblemente les pedir que confirmen ladescarga o les pida que seleccionen un programa para abrir eldocumento o archivo.

Pes taas :

1. Si dentro de un pgina queremos m o st r a r v a r i o s co n t e n i d o s , queestn claramente separados y que el usuario pueda acceder a ellosrpidamente sin tener que navegar por unos y otros hasta encontrarel que le interesa lo mejor es usar pes t aas . En EducaMadrid exite laposibilidad de organizar los contenidos en petaas usando el porlet"men de contenidos" cuyo uso se ha descrito anteriormente.

2. En el caso de que decidamos usar pestaas, es conveniente queocupen una sola fila para que el usuario no tenga que empleardemasiado tiempo en navegar y distinguir entre ellas. Tambin esconveniente que tengan un ttulo significativo y que no seaexcesivamente largo para que el aspecto de las pestaas seahomogneo.

1.2. Sobre el diseo de contenidosAnteriormente comentbamos que Jakob Nielsen dice que los usuarios no leen laspginas web del mismo modo que los textos impresos. Raramente leen una pginaweb completa y suelen realizar una parte de la lectura en vertical buscando palabrasclave o elementos que llamen su atencin. Ello no impide que algunas de las pautassobre el diseo de contenidos de la pginas web sean muy similares a las que

seguimos para componer textos impresos.Ta m a o d e l o s p r r a f o s y o r g a n i z ac i n : siguiendo las pautas dadas porJakob Nielsen es conveniente que los parrafos sean cortos y que seorganicen para que primero aparezcan las ideas principales y despus sudesarrollo. Para la lectura en pantalla es preferible una organizacinanaltica del contenido a una organizacin sinttica.

T tu lo s de pg in a , encabezad o s de con ten idos , apa r t ados ,subapa r t ados . . .

1. El tamao de la fuente utilizada o los elementos de realce (negrilla,subrayado, cambio de color), deben permitir que se distinga laorganizacin y la jerarqua de los contenidos. Es conveniente usar lasopciones de estilo que nos ofrece el editor HTML.


5/11

2. Como es obvio, el ttulo de la pgina debe de estar en la partesuperior, lo ms cerca posible de la cabecera.

Fuen t e s de l et r a s :

1. En este apartado s hay diferencia con los textos impresos. Para lalectura en pantalla se recomienda el uso de fuente sans-serif porquese muestran mejor pantalla, mientras que para los textos impresos larecomendacin es usar fuentes serif (Garamond, Times new-Roman,Georgia).

2. Es conveniente usar fuentes cuya implementacin en los ordenadoresde los usuarios es casi segura. Si utilizamos un tipo de fuente pocohabitual, es posible que no est en la lista de fuentes del ordenadorde usuario y en ese caso el navegador utilizar otra fuente parareemplazarla con lo que cabe la posibilidad de que el documento nose vea tal y como lo hemos diseado. La fuentes ms utilizadas parapginas web son Verdana, Arial, Tahoma y Trebuchet, todas ellas detipo sans-serif. Si queremos utilizar una fuente serif pensada paraque se vea bien en pantalla lo mejor es recurrir al tipo Georgia.

I n t e r l i n e a d o : los editores de texto web suelen ajustar el interlineado a lostamaos de fuente utilizadas por s solos. De todos modos no est de mscomprobar que las lneas de texto no aparecen ni muy juntas ni muyseparadas. La pauta a seguir es aqu la misma que en los textos impresos.Es conveniente que el interlineado guarde con respecto al tamao de textouna proporcin de un 120%, es decir, si usamos un tamao de fuente de1.0 em (10 pxeles), el interlineado adecuado ser de 1.2 em (12 px.).


6/11

Tablas : deben usarse para ofrecer datos tabulados no para organizar loscontenidos dentro de las pginas. Detallaremos esto en los consejos sobreaccesibilidad. Slo recordar que la organizacin en columnas o de otrasmaneas no lineles de los contenidos puede hacerse mediante CSS.

C on t ra s t e : Es necesario que entre el color usado para el texto y el fondo

de pgina exista suficiente contraste, de no ser as reduciremossignificativamente la legibilidad de los contenidos.

1.3 Sobre elementos grficos y multimedia

I m g en e s y g r f i co s: "una imagen vale ms que mil palabras", perotambin es potencialmente ms ambigua. En la medida de lo posible hayque usar imgenes que aporten valor aadido al contenido o al menos queno se lo quiten porque sean una fuente de distraccin que no aporte nadasignificativo.V d e o s y o t r o s e l em e n t o s m u l t i m e d i a em b e b i d o s :

1. Al igual que con las imgenes debemos preguntarnos si aportaninformacin o por el contrario pueden ser una fuente de distraccin.

2. Y hablando de distraccin, si tenemos claro que el vdeo integrado esimportante, debemos tener en cuenta que verlo y escucharlo requieretoda la atencin del usuario y por tanto no debe estar rodeado deotros elementos que puedan distraer su atencin.

3. Tambin es importante recordar que el usuario debe ser quien tomelas decisiones sobre qu consultar y qu no. En el caso de los vdeoso de las presentaciones debe tener la opcin de reproducirlos o no. Nodebemos por tanto configurarlos para que se reproduzcanautomticamente.

4. Por ltimo debemos recordar que hoy por hoy el estandar es flash ytodos los navegadores disponen de plugin para reproducir este tipo deformato. Si usamos otros formatos corremos el riesgo de que elelemento multimedia no pueda verse.

---

A m p l i a r i n f o r m a ci n :

Ocho errores habituales que debemos evitar cuando diseamos una webLas 75 directrices de accesibilidad de Jakob Nielsen
http://www.blogdelaweb.com/8-errores-usuales-que-debemos-evitar-cuando-disenamos-una-web/http://olgacarreras.blogspot.com/2007/02/las-75-directrices-de-accesibilidad-de.htmlhttp://olgacarreras.blogspot.com/2007/02/las-75-directrices-de-accesibilidad-de.htmlhttp://www.blogdelaweb.com/8-errores-usuales-que-debemos-evitar-cuando-disenamos-una-web/


7/11

35 consejos sobre usabilidad

2. Consejos sobre accesibilidadDebemos recordar que estamos trabajando con un gestor de contenidos en el que

delegamos una gran parte de la organizacin y diseo de nuestro sitio web. Estegestor de contenidos que para nosotros es EducaMadrid se llama realmente Liferay.Sobre todos aquellos aspectos relacionados con el diseo y la organizacin denuestro sitio web que delegamos en el gestor de contenidos no podemos controlar sicumplen o no las pautas de accesibilidad.

Nos garantiza EducaMadrid la accesibilidad de las pginas alojadas en el portal?Si accedemos a la home de EducaMadrid veremos que abajo tenemos un enlace

que pone Accesibilidad. Cuando pulsamos sobre este enlace accedemos a una pginaen la que podemos encontrar este texto:

http://www.educa2.madrid.org/accesibilidadUna pgina o sitio web es accesible cuando est diseada y codificada

para que sus contenidos y serv icios estn disponibles para cualquier persona, con independencia de su contexto de navegacin.

La C onse je r a de E d u cac in de l a C omun idad de Madr id ha adquirido el compromiso de garantizar la calidad y el nivel de accesibilidad de estas pginas web desarrollndolas conforme al nivel AA(doble A) de las Directr ices de Accesibilidad definidas por el grupo de trabajo permanente Web Accessibility Initiative (WAI), perteneciente al Consorcio para la World Wide Web (W3C).

Todas las pginas de este sitio cumplen las directrices de Nivel A y AAde las WCAG 2.0 excepto Retransmisiones , ya que, en la mayora de los casos, no se ofrecen subttulos o una transcripcin textual de los vdeos.

Las pginas se han desarrollado utilizando XHTML (eXtensible Hypert ext Markup Language) cump liendo con la especificacin XHTML 1.0 Transitional.

La presentacin - el diseo de las pginas- se ha realizado ut ilizando CSS (Cascading Style Sheets). La apariencia y el t amao del text o pueden ser fcilment e m odificados por el usuario desde su navegador.

En est as pginas, JavaScr ip t se utiliza para mejorar la experiencia de

usuario, pero no es una necesidad.Hemos trabajado por conseguir una n a v e g a ci n c o h er e n t e y f ci l

de u sa r .
http://www.theinternetdigest.net/es/consejos-de-usabilidad-web.htmlhttp://www.educa2.madrid.org/educamadrid/accesibilidadhttp://www.educa2.madrid.org/educamadrid/retransmisioneshttp://validator.w3.org/check?uri=refererhttp://www.educa2.madrid.org/educamadrid/retransmisioneshttp://www.w3.org/WAI/WCAG2AA-Conformancehttp://www.educa2.madrid.org/educamadrid/accesibilidadhttp://www.theinternetdigest.net/es/consejos-de-usabilidad-web.html


8/11

No parece por tanto debemos preocuparnos del cumplimiento de pautas deaccesibilidad que afectan al diseo y a la navegabilidad de nuestras pginas. Pero s deberemos de preocuparnos de que estas pautas tambin se cumplan, en la medidade lo posible, en los contenidos que creemos y que embebamos y que pongamos adisposicin de los usuarios en nuestras pginas.

Ampliar informacinI n t r o d u c c i n a l a e A cc es i b i li d a d

View more presentations from Olga Carreras .

2.1. La accesibilidad en nuestros contenidos

Como decamos anteriormente debemos intentar que las pautas bsicas deaccesibilidad se cumplan en los contenidos que creemos y que pongamos adisposicin de los usuarios en nuestras pginas.

En este sentido y como resumen podemos tener en cuenta la pautas de la guabreve para crear sitios web accesibles de la W3C.

I m g en e s y a n i m a c i on e s : Use el atr ibuto alt para describir la funcin de cada elem ento visual . Esto quiere decir que cuando insertemos una imagen en algncontenido no debemos olvidarnos de al menos poner un ttulo signficativo a laimagen y tambin una descripcin.
http://www.slideshare.net/olgacarreras/introduccin-a-la-eaccesibilidadhttp://www.slideshare.net/http://www.slideshare.net/olgacarrerashttp://www.w3.org/WAI/References/QuickTips/qt.es.htmhttp://www.w3.org/WAI/References/QuickTips/qt.es.htmhttp://www.w3.org/WAI/References/QuickTips/qt.es.htmhttp://www.w3.org/WAI/References/QuickTips/qt.es.htmhttp://www.slideshare.net/olgacarrerashttp://www.slideshare.net/http://www.slideshare.net/olgacarreras/introduccin-a-la-eaccesibilidad


9/11

Fi g u r a s y d i a g r a m a s : Describalos brevement e en la pagina o use el atribut o longdesc . En tanto que las figuras y diagramas se insertarn como imgenes lapauta es la misma que en el punto anterior, pero ahora se recomienda que ladescripcin larga est presente.

M u l t i m e d i a : Proporcione subttulos y transcripcin del sonido, y descripcin del vdeo .En l a ce s d e h i p e r t e x t o : Use text o que tenga sentido ledo fuera de context o.Por ejemplo, evite "pincha aqu".Org a n i z a ci n i n t e r n a d e l o s c o n t e n i d o s : Use encabezados, listas y

estructura consistente. Use CSS para la maquetacin donde sea posible .Tablas : Facilite la lectura lnea a lnea. Resuma . Hay que evitar el uso detablas para organizar los contenidos. En el editor de contenidos de Educamadriddisponemos de la posibilidad de usar plantillas para organizar los contenidos,esto organizar el contenido mediante las etiquetas , esta opcin es


10/11

preferible a utiliar tablas.

En caso de tener que usar tablas, para facilitar su lectura, esconveniente que no haya ms de una columna, para que el textopueda ser ledo por filas. Tambin es conveniente incluir unresumen de la tabla.

----Ms informacin:

Gua breve para crear sitios web accesible [Consultado el 09/11/2010]

Tcnicas Fundamentales para las Pautas de Accesibilidad al Contenido en la Web [Consultado el09/11/2010]

Este artculo est licenciado bajo Creative Commons Attribution Non-commercial ShareAlike 3.0 License

"Jess Trejo Fernndez"

Esta obra est bajo una licencia de Creative Commons .
http://www.w3.org/WAI/References/QuickTips/qt.es.htmhttp://www.discapnet.es/web_accesible/tecnicas/core/WCAG10-CORE-TECHS-20001106.htmlhttp://creativecommons.org/licenses/by-nc-sa/3.0/http://creativecommons.org/licenses/by-nc-sa/3.0/http://creativecommons.org/licenses/by-nc-sa/3.0/es/http://creativecommons.org/licenses/by-nc-sa/3.0/es/http://creativecommons.org/licenses/by-nc-sa/3.0/es/http://creativecommons.org/licenses/by-nc-sa/3.0/es/http://creativecommons.org/licenses/by-nc-sa/3.0/es/http://creativecommons.org/licenses/by-nc-sa/3.0/http://creativecommons.org/licenses/by-nc-sa/3.0/http://www.discapnet.es/web_accesible/tecnicas/core/WCAG10-CORE-TECHS-20001106.htmlhttp://www.w3.org/WAI/References/QuickTips/qt.es.htm


11/11

Departamento de TICCRI F " Las Acac ias"

Documents

bloque4_4_pautas_estilo