Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009




Manual de accesibilidad y buenas prácticas
         -Gestor de Con...
Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009




Índice:


Manual de accesibilidad y buenas prácticas.................
Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009




1. Introducción

El presente manual pretende ofrecer una serie de ...
Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009



Directrices Prioridad 1
4.2.1. Se debe organizar el contenido de la...
Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009




4.6.3. Se debe proporcionar una descripción sonora de la informaci...
Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009




4.2.9. Si se utilizan tablas para maquetar, no debe utilizarse nin...
Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009


4.5.8. Se deben utilizar los mecanismos de navegación de manera cons...
Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009




2. Crear Información

2.1 Orden y consistencia

Usted maneja grand...
Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009


              La Pirámide Invertida: este método consiste en colocar...
Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009


Los usuarios pueden no conocer el lugar donde se desarrolla el hecho...
Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009


Procure no utilizar acrónimos y abreviaturas y si se ve abocado a el...
Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009


otros como “métodos de inscripción”, “inscripción”, “fase de inscrip...
Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009


               -   Normal
               -   Encabezado de primer ni...
Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009



Encabezados:

 Proceso de inscripción
 Normativa para el proceso de...
Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009




Por razones de accesibilidad utilice los encabezados para crear un...
Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009



3. Edición y formato de la información

Antes de nada, recordar que...
Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009




                                                                  ...
Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009


Se recomienda escribir y editar el texto directamente sobre el campo...
Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009


Herramientas de formato:
 Texto visible: 
        Una vez finalizado...
Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009


Pegar como texto plano:




                                      Pe...
Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009


Si se desea resaltar un texto se recomienda el uso de cursivas y neg...
Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009




-   Desordenadas: están destinadas a marcar listados desordenados,...
Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009




                                              SI




Los contenido...
Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009




     SI




3.1.5 Enlaces
Palabras o frases situadas dentro del te...
Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009


En otras ocasiones los enlaces se añaden como frases sueltas, genera...
Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009


Redacción de enlaces:
 Mala práctica:
       “Nuevo master en Relaci...
Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009


El campo “Desea abrir este link en una nueva ventana del navegador”
...
Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009



 Mala práctica: 
       Texto: Ir al sitio web del gabinete de pren...
Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009


Ventana de inserción de anclas:




Puede añadir tantas anclas como ...
Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009


Las anclas se usan habitualmente para crear un menú secundario en la...
Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009



3.1.7 Página anterior y página siguiente


Otra manera de organizar...
Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009



El botón             nos permite realizar una previsualización del ...
Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009


Ventana de configuración de tabla:




“Size” permite determinar el ...
Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009


Uso de tablas:
 Mala práctica:

  
                          Master ...
Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009




Por otro lado, también se debe rellenar el apartado de Accesibilid...
Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009




La sección Abbreviation tiene dos usos:
   • Abreviar contenidos l...
Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009




3.2. Información gráfica

Las informaciones gráficas son las fotog...
Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009


Ventana de inserción de imagen:




El campo “File Selection” le per...
Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009


Redacción de texto alternativo de imágenes:
 Ejemplo:




 Mala prác...
Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009


3.3. Ficheros no web.

Los ficheros no web se deberán abrir siempre ...
Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009




 Mala práctica: 
       Descargar la solicitud de admisión


 Buen...
Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009


Buena práctica:




3.3.3 Uso del euskera


El Decreto de Modelo de ...
Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009


De no seguirse esta norma, es posible que surjan problemas para acce...
Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009


Conviene, también, rellenar el resto de apartados de la Descripción ...
Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009


los casos en que los buscadores muestran el término buscado en su
co...
Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009




Para ver cómo está ordenado el documento, en Avanzadas > Accesibil...
Upcoming SlideShare
Loading in …5
×

Manual de accesibilidad y buenas prácticas

4,559 views
4,454 views

Published on

manual sobre la accesibilidad de los contenidos, webs, pdf, etc, así como el uso en sus correctas prácticas

Published in: Education, Design, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
4,559
On SlideShare
0
From Embeds
0
Number of Embeds
160
Actions
Shares
0
Downloads
59
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Manual de accesibilidad y buenas prácticas

  1. 1. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009 Manual de accesibilidad y buenas prácticas -Gestor de Contenidos- 1
  2. 2. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009 Índice: Manual de accesibilidad y buenas prácticas........................................................1 -Gestor de Contenidos-.........................................................................................1 Índice:................................................................................................................. ..2 . 1. Introducción......................................................................................................3 Directrices Prioridad 2...........................................................................................5 2. Crear Información ............................................................................................8 2.1 Orden y consistencia ................................................................................8 2.2 Redacción .................................................................................................8 2.2.1 Utilización de un lenguaje claro y sencillo............................................8 2.2.2 Terminología.......................................................................................12 2.3 Generar una estructura dentro de la página web ...................................12 3. Edición y formato de la información...............................................................16 3.1. Edición de texto........................................................................................17 3.1.1 Herramientas de formato....................................................................18 3.1.2 Cortar y pegar.....................................................................................18 3.1.3 Destacar un texto ..............................................................................20 3.1.4 Listas .................................................................................................21 3.1.5 Enlaces...............................................................................................24 3.1.6 Anclas.................................................................................................28 3.1.7 Página anterior y página siguiente.....................................................31 3.1.8 Tablas.................................................................................................32 3.2. Información gráfica...................................................................................37 3.3.1 Formato..............................................................................................40 3.3.2 Tamaño...............................................................................................41 3.3.3 Uso del euskera..................................................................................42 3.3.4 Etiquetar correctamente los archivos .pdf..........................................43 2
  3. 3. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009 1. Introducción El presente manual pretende ofrecer una serie de directrices y pautas a seguir, desde el punto de vista de la usabilidad y accesibilidad, a la hora de generar información para los sitios web de los portales de EHU/UPV. A partir del 31-12-2008 tanto las páginas como los contenidos deben cumplir, por ley, la prioridad 2 de la norma UNE 139803:2004 (que es compatible con la certificación AA WCAG -Web Content Accesibility Guidelines- del W3C -Consorcio World Wide Web-, aunque también incluye 3 directrices que en las WCAG son AAA). Así pues, este manual recopila todas las directrices de esta norma y, las que afectan a la edición de contenidos, enlazan a explicaciones de cómo hay que aplicarlas. Así, debemos tener en cuenta en todo momento lo que se dice en este manual a la hora de crear y editar contenidos. Uso del manual: Las directrices marcadas con N/A (No Aplicable) y gris clarito, en principio, no son aplicables a la gestión de contenidos; las demás, tienen un enlace a la parte del manual en la que se trata en profundidad el ámbito y aplicación de la directriz. De todos modos, conviene leerse el manual completo de manera lineal de principio a fin, ya que hay secciones que son necesarias para la accesibilidad pero no han sido enlazadas desde las directrices. 3
  4. 4. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009 Directrices Prioridad 1 4.2.1. Se debe organizar el contenido de la página de forma que conserve su significado si se presenta sin hojas de estilo. [ver 2.1] 4.2.2. Toda la información expresada a través del color debe estar también disponible sin color. [ver información sobre el uso del color en el punto 3.1.3] 4.2.3. No debe provocarse el parpadeo de la pantalla. (N/A) 4.3.1. Se deben especificar, con los marcadores adecuados, un título significativo para cada marco. (N/A) 4.3.2. En las tablas de datos se deben identificar con los marcadores apropiados los encabezados de fila y de columna. [ver 3.1.8.] 4.3.3. En las tablas de datos que tengan dos o más niveles lógicos de encabezados de fila o columna, se deben utilizar marcadores para asociar las celdas de datos con las celdas de encabezado. [ver 3.1.8.] 4.4.1. Los equivalentes para el contenido dinámico deben actualizarse siempre que cambie ese contenido dinámico. (N/A) 4.4.2. Se debe utilizar un lenguaje que sea lo más claro posible y que resulte apropiado para el propósito del contenido. [ver 2.2 y 3] 4.4.3. Se debe proporcionar un texto semánticamente equivalente para todo elemento no textual. [ver información sobre textos alternativos de imágenes en el punto 3.2.] 4.4.4. Se debe especificar el idioma general de la página web. (N/A) 4.4.5. Se deben identificar con marcadores los cambios en el idioma de cualquier texto (respecto al idioma definido como principal del documento) que pueda ser presentado al usuario. [ver información sobre cambios de idioma] 4.5.1. El texto de los enlaces debe identificar claramente su destino y ser lo más conciso y explícito posible. [ver 3.1.5.] 4.5.2. Se deben proporcionar mapas de imagen controlados por el cliente en vez de por el servidor salvo que sea estrictamente necesario. (N/A) 4.5.3. Se deben proporcionar enlaces redundantes en formato texto para cada área activa de un mapa de imagen del servidor. (N/A) 4.6.1. Las páginas deben poder utilizarse aunque los scripts y objetos de programación estén desconectados o no sean soportados. (N/A) 4.6.2. Los scripts que ofrecen una funcionalidad importante que, además, no se ofrece a través de otro medio accesible, deben ser directamente accesibles o compatibles con las ayudas técnicas. (N/A) 4
  5. 5. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009 4.6.3. Se debe proporcionar una descripción sonora de la información importante de la pista visual de toda presentación multimedia. [consultar el manual específico sobre cómo insertar contenido multimedia en la página de documentación del proyecto web] 4.6.4. Se deben presentar los equivalentes alternativos de una presentación multimedia de forma sincronizada con dicha presentación. [consultar el manual específico sobre cómo insertar contenido multimedia en la página de documentación del proyecto web] 4.7.1. Si, a pesar de esforzarse, no se consigue [...], enlace a página accesible con información (o funcionalidad) equivalente y actualizada a la vez que la original. (N/A) Directrices Prioridad 2 4.1.1. Se deben utilizar las tecnologías publicadas de manera oficial por los organismos internacionales relevantes, cuando estén disponibles y sean apropiadas para la tarea, y las últimas versiones en cuanto sean soportadas. [relacionado con esto, leer el punto 3.1.] 4.1.2. Se deben crear documentos conformes con la sintaxis de las gramáticas formales publicadas de manera oficial por los organismos relevantes a escala internacional. [relacionado con esto, leer el punto 3.1.] 4.1.3. Se debe evitar el uso de características obsoletas y desaconsejadas de las tecnologías del W3C. [relacionado con esto, leer el punto 3.1.] 4.1.4. Se deben proporcionar metadatos para añadir información semántica a las páginas y los sitios Web, incluidos el elemento “title”, el elemento “address”, el elemento “meta”, la declaración de tipo de documento, el elemento “link” y elementos “del” e “ins”, así como los atributos “title” y “cite”. (N/A) 4.2.4. Se deben usar unidades relativas en vez de absolutas en los valores de los atributos del lenguaje de marcado y en los valores de las propiedades de las hojas de estilo. [usuarios avanzados] 4.2.5. Se deben usar hojas de estilo para controlar la disposición y la apariencia de los elementos de la página. [usuarios avanzados] 4.2.6. Si existe un lenguaje de marcado apropiado para transmitir información, se deben utilizar marcadores en vez de imágenes. [ver 3.2.] 4.2.7. Las combinaciones de color del fondo y del primer plano de las imágenes deben contrastar lo suficiente. [ver información sobre color y contraste] 4.2.8. No se deben usar tablas para maquetar, a menos que el contenido de la tabla tenga sentido cuando se represente de manera lineal. [ver 3.1.8.] 5
  6. 6. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009 4.2.9. Si se utilizan tablas para maquetar, no debe utilizarse ningún marcado estructural para conseguir un efecto visual de formato. [ver 3.1.8.] 4.2.10. Los elementos de una página no deben parpadear. 4.2.11. Si se incluyen elementos con movimiento, el usuario debe poder detenerlo. [consultar el manual específico sobre cómo insertar contenido multimedia en la página de documentación del proyecto web] 4.3.4. Se debe describir el propósito de los marcos y cómo se relacionan entre sí, si no resulta obvio sólo con los títulos de marco. (N/A) 4.3.5. Se deben usar elementos de encabezado o título para transmitir la estructura del documento. [ver 2.3.] 4.3.6. Se deben dividir los bloques de información largos en fragmentos más manejables por donde resulte natural y apropiado. [ver 3.1.6. y 3.1.7.] 4.3.7. Se deben marcar correctamente las listas y los elementos de lista. [ver 3.1.4.] 4.3.8. Se deben marcar correctamente las citas. No debe usarse el marcado de citas (blockquote, q, cite) para simular efectos de formato tales como la sangría. [usuarios avanzados] 4.3.9. Se deben proporcionar resúmenes de las tablas de datos usando los marcadores apropiados. [ver 3.1.8.] 4.4.6. Los contenidos dinámicos deben ser accesibles. (N/A) 4.4.7. Siempre se deben asociar de forma explícita las etiquetas a sus controles de los formularios. (N/A) 4.4.8. Los controles de formulario con etiquetas asociadas implícitamente deben tener las etiquetas colocadas de forma adecuada. (N/A) 4.5.4. Si se definen páginas que se auto-refresquen periódicamente, el usuario debe poder evitar el refresco automático. (N/A) 4.5.5. No deben usarse marcadores para redirigir automáticamente las páginas. (N/A) 4.5.6. Debe evitarse provocar que aparezcan otras ventanas del navegador, como expositores o ventanas emergentes, sin informar antes al usuario y darle opciones para que controle esa aparición. [ver información sobre textos alternativos de enlaces a página nueva] 4.5.7. Se debe proporcionar información sobre la estructura general de un sitio. (N/A) 6
  7. 7. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009 4.5.8. Se deben utilizar los mecanismos de navegación de manera consistente. (N/A) 4.5.9. Se debe mantener un orden lógico de tabulación a través de los enlaces, controles de formulario y objetos. (N/A) 4.6.5. Los scripts que ofrecen una funcionalidad no importante que, además, no se ofrece a través de otro medio accesible, deben ser directamente accesibles o compatibles con las ayudas técnicas. (N/A) 4.6.6. La ejecución de los scripts debe ser independiente del tipo de dispositivo de entrada utilizado por el usuario. (N/A) 4.6.7. Cualquier elemento que tenga su propia interfaz debe poder manejarse de forma independiente del tipo de dispositivo. (N/A) 7
  8. 8. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009 2. Crear Información 2.1 Orden y consistencia Usted maneja grandes volúmenes de información por lo que debe prestar especial atención a la organización y orden en el que suministra su información. Antes de empezar a editar la información defina qué va a incluir en cada apartado y procure mantenerse fiel a sus criterios iniciales. Modifíquelos si considera, a partir de la experiencia, que puede hacerlos aún más útiles. Procure introducir la información en el apartado previsto para ello. No incluya una información en un apartado que no corresponde ni repita información en diversos apartados. Equilibre la información de manera que no haya secciones con demasiada o poca información. Si una sección apenas tiene información plantéese si es necesaria o si la información puede introducirse en otros apartados. Si por el contrario una sección tiene demasiada información compruebe si puede dividirla en varias secciones. La consistencia de criterios es muy importante, al usuario le gusta saber qué está viendo y que la información se corresponda con lo que le han prometido. No incluya elementos que no son pertinentes o que no se correspondan con lo anunciado. 2.2 Redacción 2.2.1 Utilización de un lenguaje claro y sencillo. Algunos usuarios tienen problemas cognitivos y no entienden los textos complejos. En la medida de lo posible, no utilice construcciones complicadas ni lenguaje excesivamente técnico. Procure dirigirse a todos los usuarios en lugar de a los usuarios entendidos en la materia. Tenga en cuenta que la lectura en un monitor de ordenador es más cansada, incómoda y lenta que en un texto impreso. En Internet prima la rapidez y el usuario realiza mucho menos esfuerzo sobre cada texto. Si un texto, le aburre o le resulta complejo es probable que busque otro más útil en otra página. Utilice técnicas como la pirámide invertida para la construcción de los textos. Es posible que el usuario no lea la información completa por lo que debe poner los datos esenciales en el primer párrafo. 8
  9. 9. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009 La Pirámide Invertida: este método consiste en colocar el núcleo de la información en el primer párrafo y los detalles que complementan la noticia se redactan a continuación en orden de mayor a menor importancia. La pirámide invertida sirve para ayudar al lector a seleccionar los datos más importantes de cada información. En el caso de que redacte hechos puede emplear la técnica de las 6W utilizada habitualmente por los periodistas. - QUÉ: implica los acontecimientos. - QUIÉNES: son los personajes que aparecen en la noticia. - CUÁNDO: sitúa la acción en un tiempo. - DÓNDE: delimita dónde se han desarrollado los hechos. - POR QUÉ: explica las razones de que se den los hechos. - CÓMO: describe las circunstancias. Los párrafos deben contener una única idea principal. Procure no introducir demasiada información en un solo párrafo. Si un concepto es demasiado complejo, divídalo en varios párrafos donde tratar los diferentes aspectos. Redacción de párrafos: Mala práctica:  Una vez finalizado el plazo de preinscripción, la Universidad hará público un  listado citando a los alumnos con día y hora para que acudan a matricularse.  Dicho listado también podrá ser conocido por Internet. El alumno, con  independencia de las opciones elegidas en su preinscripción, podrá  matricularse en cualquier titulación que en el momento de su citación disponga  de plazas libres. El listado con las horas aparecerá en Internet diez días  después de la finalización del plazo de preinscripción.  Buena práctica:  Una vez finalizado el plazo de preinscripción, la Universidad hará público un  listado citando a los alumnos con día y hora para que acudan a matricularse.  Dicho listado también podrá ser conocido por Internet. El alumno, con  independencia de las opciones elegidas en su preinscripción, podrá  matricularse en cualquier titulación que en el momento de su citación disponga  de plazas libres.  El listado con las horas aparecerá en Internet diez días después de la  finalización del plazo de preinscripción. Contextualice la información, aporte datos sobre dónde se produce el hecho, cuándo se produce, desde dónde publica, cuándo se publica y quién publica. 9
  10. 10. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009 Los usuarios pueden no conocer el lugar donde se desarrolla el hecho, la estructura del organismo al que usted pertenece o la cúpula directiva. Tenga en cuenta que conceptos como ayer, mañana, dentro de dos semanas, carecen de sentido en una publicación que no se actualiza diariamente. Si no va a actualizar diariamente utilice fechas concretas del tipo “lunes, 17 de diciembre de 2006”. Redacción de fechas y localizaciones: Mala práctica:  Los alumnos podrán comenzar a inscribirse dentro de diez días hábiles en la  secretaría técnica. Buena práctica:  Los alumnos podrán comenzar a inscribirse a partir del 10 de septiembre de  2006. La inscripción se realizará en la Secretaría de cada Centro.  Consulte aquí la dirección de Secretaria de su Centro. No utilice expresiones locales o que comprendan sólo los expertos en la materia. Internet abarca un gran público, de diferentes edades, lugares y profesiones, no tienen por que conocer “las expresiones locales”. Por ejemplo si se refiere al Guggenheim, hágalo como “El museo Guggenheim de Bilbao”, piense que en total hay cinco museos Guggenheim en el mundo. Considere que los usuarios pueden proceder de diferentes lugares geográficos y diferentes contextos culturales. Use negritas para facilitar la lectura y el escaneo de la página. Procure transmitir la palabra o concepto esencial de un párrafo o página a través de este efecto tipográfico. También puede emplear cursivas para indicar las citas. Siempre que sea necesario utilice listas y viñetas para organizar la información. Evite las listas de un solo elemento. Redacción de listas: Mala práctica: Documentos necesarios: Fotocopia DNI, Carnet de estudiante, Recibo, Solicitud. Buena práctica: Documentos necesarios: • Fotocopia del DNI (Documento Nacional de Identidad). • Carnet de estudiante. • Recibo del pago de las tasas de inscripción. • Solicitud cumplimentada. 10
  11. 11. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009 Procure no utilizar acrónimos y abreviaturas y si se ve abocado a ello debe indicar el nombre al que se refieren la primera vez que lo utiliza en el texto: UE (Unión Europea). No utilice palabras en otro idioma y si lo hace ofrezca traducciones o explicaciones del término entre paréntesis. Por ejemplo: Ferroutage (Proyecto Europeo de Conexión Intermodal Ferroviaria). Si utilizamos palabras en otro idioma, deberemos marcar el cambio de idioma en el código fuente de la página, salvo en los casos siguientes: nombres propios, términos técnicos, palabras de idioma indeterminado, y palabras o frases que, aunque no pertenezcan al idioma general de la página, su uso esté ampliamente extendido. Al existir un variado número de preferencias o de circunstancias culturales o de idioma, es importante utilizar identificadores basados en el idioma y lugar como referente para recoger información sobre las preferencias de los usuarios. XML utiliza el atributo xml:lang con ese objetivo. Es importante marcar cualquier cambio de idioma que se pueda producir a lo largo del texto en una página Web (salvo en los casos concretos mencionados anteriormente). Un ejemplo sería: <p>Mañana empieza el congreso <span xml:lang="en">V International Conference on Science and Technology of Composite Materials</span></p> <p>El concierto de esta edición es una celebración del espíritu navideño a través de músicas de todas las épocas y villancicos tradicionales de diversos países, entre ellos piezas muy populares como <span xml:lang="eu">Aurtxo Txikia</span>, <span xml:lang="fr">Cantique de Noël</span> o <span xml:lang="eu">Mesias sarritan</span>, entre otros.</p> Los idiomas se especifican a través de un código estándar (ISO 639), como se aprecia en los ejemplos anteriores. No hay que olvidar tampoco indicar, si incluimos un enlace a otra página, el idioma en el que esa página se va a mostrar, esta vez se indicará con hreflang <a href="http://www.w3.org/International/questions/" hreflang="en"> Preguntas frecuentes sobre Internacionalización</a> Utilice correctamente las palabras o frases en mayúsculas. No utilice mayúsculas cuando no sea necesario gramaticalmente ni para aplicar efectos de formato. Las mayúsculas dificultan la lectura de los textos. No llame la atención del usuario mediante signos de exclamación, mayúsculas o uso incorrecto de la puntuación (Por ejemplo: ¡Matrícula abierta!, ………… MATRICULA ABIERTA……….., M A T R I C U L A A B I E R T A, M.A.T.R.I.C.U.L.A A.B.I.E.R.T.A, ). No impacte a los usuarios, infórmelos. 2.2.2 Terminología Procure utilizar siempre la misma terminología. Si se refiere por ejemplo a un “proceso de inscripción”, utilice en todo momento el mismo término y no 11
  12. 12. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009 otros como “métodos de inscripción”, “inscripción”, “fase de inscripción”. Diferentes términos para un mismo concepto lo convierten en un proceso complejo. En Internet se utilizan a menudo diferentes términos técnicos y metáforas para referirse a un mismo concepto. Así por ejemplo se utilizan los términos “la web” o “el WWW” para referirse a Internet o “hipervínculos” para referirse a enlaces. También es habitual el uso de anglicismos como “home” o “link”. El uso de diferentes términos para referirse a un mismo concepto puede confundir al usuario. No todos los usuarios hablan inglés o comprenden las “metáforas de la web”. Use términos estandarizados y a poder ser recogidos en el diccionario. Defina en un documento de terminología el rotulado y la terminología a utilizar en el sitio web. Procure utilizar términos en el idioma empleado en el sitio web en lugar de anglicismos. Si tiene dudas con algún término consulte los diccionarios oficiales, por ejemplo, EUSKALTERM: http://www1.euskadi.net/euskalterm/indice_c.htm A continuación le proponemos un ejemplo de documento de terminología: Documento de terminología: Usar En lugar de… Para referirse a … Sitio web Web, página web, sitio, la web Un sitio web. Página web La web, página. Una página, un HTML en concreto. Enlace Link Más información +Info, Más…, leer más, ver más…, sobre información Internet internet, la web, el WWW. 2.3 Generar una estructura dentro de la página web Al aplicar formato a un texto indicamos visualmente las relaciones jerárquicas dentro del mismo. Así, al título principal le aplicamos un cuerpo de letra más grande que a un título secundario. De la misma manera un párrafo lleva un formato y una nota al pie lleva otro formato. Los lectores de ciegos y determinados dispositivos de acceso no muestran estas diferencias de formato que jerarquizan el texto por lo que el usuario percibe toda la información al mismo nivel. Para evitar esto, es necesario crear una estructura dentro de la página web que indique que un texto actúa como párrafo normal o como encabezado. Usted puede emplear 8 categorías para indicar la estructura de la página: 12
  13. 13. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009 - Normal - Encabezado de primer nivel - Encabezado de segundo nivel - Encabezado de tercer nivel - Encabezado de cuarto nivel - Encabezado de quinto nivel - Encabezado de sexto nivel - Dirección Encabezados: Mala práctica:  Texto normal: Proceso de inscripción. Normativa para el proceso de  inscripción. Una vez finalizado el plazo de preinscripción, la Universidad hará  público un listado citando a los alumnos con día y hora para que acudan a  matricularse. Normativa del proceso de inscripción: En el presente documento  puede encontrarse todo lo referente a la normativa del proceso de inscripción.  Buena práctica:  Encabezado de primer nivel: Proceso de inscripción.  Encabezado de segundo nivel: Normativa para el proceso de inscripción. Texto normal: Una vez finalizado el plazo de preinscripción, la Universidad  hará público un listado citando a los alumnos con día y hora para que acudan a  matricularse.  Encabezado de segundo nivel: Información del proceso de inscripción Texto normal: En el presente documento puede encontrarse todo lo referente a  la normativa del proceso de inscripción. En el gestor el texto con encabezados se visualizará de la siguiente manera: 13
  14. 14. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009 Encabezados: Proceso de inscripción Normativa para el proceso de inscripción Una vez finalizado el plazo de preinscripción, la Universidad hará público un listado  citando a los alumnos con día y hora para que acudan a matricularse.  Información del proceso de inscripción En el presente documento puede encontrarse todo lo referente a la información del  proceso de inscripción. Puede definir la estructura de texto empleando el segundo desplegable de la barra inferior: Encabezados. Menú desplegable: No se aconseja el uso de las herramientas de formato para aplicar jerarquía a la página web, ya que recargan el peso de la página y sólo muestran la jerarquía visualmente. Los lectores de ciegos no diferencian un tipo de letra o un tamaño o un color diferente: Herramientas de formato: Tampoco se aconseja el uso de estilos porque aplican un mismo formato a diferentes textos pero no lo identifican semánticamente. Así un estilo “título” define el formato que llevarán todos los títulos pero no indicará al lector de ciegos que este texto tienen la función de “titulo”: Estilos: 14
  15. 15. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009 Por razones de accesibilidad utilice los encabezados para crear una estructura dentro de la página web y mostrar las diferentes jerarquías dentro de la información. 15
  16. 16. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009 3. Edición y formato de la información Antes de nada, recordar que cuando generamos un documento, bien sea en castellano o en euskera, es necesario que el título y la descripción del mismo sean claros. En el ejemplo podemos observar como una mala notación del título y el no poner descripción da por resultado…. NO …. que cuando un usuario introduzca, por ejemplo, la palabra “vivienda” en el buscador general obtenga un resultado que le dice bien poco sobre el contenido que se va a encontrar: NO Si, por el contrario, se hubieran introducido los datos con mayor precisión el resultado de búsqueda hubiera sido mucho más rico y preciso, como se puede apreciar en el mismo contenido una vez realizado el cambio oportuno: Cambio en el Gestor de Contenidos: 16
  17. 17. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009 SI Resultado de búsqueda del Contenido con el buscador: SI Además no sólo debemos tener cuidado en designar bien un documento. También resulta muy importante que los documentos NO tengan el mismo nombre para evitar casos como el de la imagen: NO 3.1. Edición de texto 17
  18. 18. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009 Se recomienda escribir y editar el texto directamente sobre el campo de edición de texto. Si no fuera posible es obligatorio seguir las indicaciones sobre cómo pegar texto de otros editores. 3.1.1 Herramientas de formato El gestor dispone de diferentes herramientas para aplicar formato visual al texto. Por razones de accesibilidad se desaconseja el uso de las siguientes herramientas de formato: Tipografía. No genera código accesible. Tamaño de fuente. No genera código accesible. Color. No genera código accesible. Subrayado. El subrayado debe ser utilizado exclusivamente para los enlaces y debe estar predeterminado por la hoja de estilo. Márgenes. No genera código accesible. Alineación. No genera código accesible. 3.1.2 Cortar y pegar Al escribir sobre programas de edición de texto como Word, QuarkXpress, Adobe InDesign, etc., el programa anota de manera oculta junto a los textos etiquetas con el formato. El usuario no puede verlas, sin embargo estas etiquetas quedan incrustadas junto al texto. Si copiamos un texto escrito en un programa de edición de texto sobre el área de trabajo del gestor, las etiquetas con el formato son arrastradas junto a él. Estas etiquetas se insertan en el código HTML de la página web convirtiéndola en una página no accesible. 18
  19. 19. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009 Herramientas de formato: Texto visible:  Una vez finalizado el plazo de preinscripción, la Universidad hará público un  listado citando a los alumnos con día y hora para que acudan a matricularse.  En el presente documento puede encontrarse todo lo referente a la normativa  del proceso de inscripción.  Código del texto pegado incorrectamente: <p style="margin: 0pt 0pt 0pt 35.4pt; text­align: left" class="MsoNormal"  align="left"><font size="2">Una vez finalizado el plazo de  preinscripci&oacute;n, la Universidad har&aacute; p&uacute; lico un listado  b citando a los alumnos con d&iacute;a y hora para que acudan a matricularse.  En el presente documento puede encontrarse todo lo referente a la normativa  del proceso de inscripci&oacute;n. </font></p> Código del texto pegado como texto plano:  Una vez finalizado el plazo de preinscripci&oacute;n, la Universidad  har&aacute; p&uacute;blico un listado citando a los alumnos con d&iacute;a y  hora para que acudan a matricularse. En el presente documento puede  encontrarse todo lo referente a la normativa del proceso de inscripci&oacute;n. Lo mismo ocurre cuando pegamos un texto que hemos copiado de otra página web. El texto arrastra unas etiquetas de formato ocultas en el código de la página web que pueden no ser accesibles. Las etiquetas se incrustarán en el código de su página convirtiéndola en no accesible. Para evitar esto, siempre que se pegue texto procedente de otras aplicaciones, es obligatorio convertir el texto en texto plano antes de pegarlo en el gestor. Un método para pegar un texto como texto plano es utilizar el menú contextual, opción pegar como texto plano (“Paste Text”). 19
  20. 20. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009 Pegar como texto plano: Pegar como texto plano Otro método consiste en utilizar un editor de texto plano como el bloc de notas de Windows para eliminar el formato. Para ello hay que seleccionar el texto y pegarlo en el bloc de notas. A continuación se vuelve a copiar el texto desde el bloc de notas y se pega en el editor del gestor. Pegar como texto plano: Bloc de notas Editor de información UPV … 3.1.3 Destacar un texto Por razones de accesibilidad no utilice mayúsculas, colores, subrayados o textos de mayor o menor tamaño para enfatizar un texto o transmitir información (por ejemplo para marcar una diferencia o para agrupar dentro de una categoría). Se debe evitar el uso indiscriminado de mayúsculas en los contenidos, ya que dificultan la lectura de los textos. Y se debe tener en cuenta que es obligatorio el uso de la tilde en las mayúsculas. Los subrayados se pueden confundir con enlaces e inducir a error. Determinados dispositivos como algunos móviles, lectores de ciegos, etc. y personas con deficiencias visuales, no diferencian los colores por lo que no percibirán la información destacada a través del color (esto también afecta a imágenes o iconos que informen por el color). Por ejemplo: palabras clave de un texto resaltadas con un color concreto, verde/bien – rojo/mal... 20
  21. 21. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009 Si se desea resaltar un texto se recomienda el uso de cursivas y negritas. Resaltar texto: Mala práctica: “Nuevo master en Relaciones Laborales. Haga clic aquí para  inscribirse.” “Nuevo master en Relaciones Laborales. Haga clic aquí para inscribirse.” “Nuevo master en Relaciones Laborales. Haga clic aquí para inscribirse.”    Buena práctica: “Nuevo master en Relaciones Laborales. Haga clic aquí para inscribirse.” “Nuevo master en Relaciones Laborales. Haga clic aquí para inscribirse.” “Nuevo master en Relaciones Laborales. Haga clic aquí para inscribirse.” Si utiliza un color de texto asegúrese de que existe suficiente contraste entre el fondo y el texto. Para analizar el contraste entre fondo y texto puede usar las siguientes herramientas: http://juicystudio.com/services/colourcontrast-es.php http://www.wat-c.org/tools/CCA/1.1/index.html#download Los colores y tipografías vienen definidos en el libro de estilo. 3.1.4 Listas En el gestor de contenidos hay dos tipos de listas que pueden emplearse: - Ordenadas: son usadas para listados en los que el orden de los elementos es importante, como por ejemplo un listado de noticias ordenado por fecha, un listado de documentos impresos a entregar por orden, un procedimiento secuencial. Lista ordenada: Ejemplo: Procedimiento de solicitud de beca 1. Realizar la Preinscripción 2. Recibir la confirmación de admisión 3. Realizar la matrícula 4. Realizar la solicitud de beca 5. Entregar la documentación 21
  22. 22. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009 - Desordenadas: están destinadas a marcar listados desordenados, en las que sólo nos interesa resaltar el hecho de que los elementos forman una lista, independientemente del orden de dichos elementos. Lista desordenada: Ejemplo: Documentación a entregar: - Fotocopia del Carnet de identidad - Declaración de recursos - Certificado de la renta - Fotocopia de la matrícula - Fotocopia del carnet de estudiante El gestor permite introducir listas ordenadas numéricamente y listas desordenadas seleccionando el texto y pulsando en los iconos correspondientes. Iconos de listas: Listas ordenadas Listas desordenadas Es aconsejable que utilice las listas correctamente, es decir las listas ordenadas numéricamente para procedimientos o procesos en los que el orden es importante y las listas desordenadas para enumerar elementos donde el orden no es importante. Las listas deben poder ser leídas de forma lineal. NO 22
  23. 23. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009 SI Los contenidos susceptibles de ir en listas DEBEN ir en listas con viñetas. NO 23
  24. 24. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009 SI 3.1.5 Enlaces Palabras o frases situadas dentro del texto pueden actuar como enlaces. Para que el usuario comprenda que son enlaces se aconseja subrayarlos (la herramienta lo hace automáticamente al crear el enlace). No utilice frases excesivamente largas como enlaces, ni demasiados enlaces por párrafo. Si un enlace se repite varias veces basta con que lo indique la primera vez. Procure no señalar más de un enlace por párrafo. No redacte URL’s como enlaces ni las incluya entre paréntesis. Redacción de enlaces: Mala práctica:  Una vez finalizado el plazo de preinscripción, la Universidad hará público un  listado citando a los alumnos con día y hora para que acudan a matricularse.  Dicho listado(http://www.ehu.net/matricula.asp) también podrá ser conocido  por Internet. El alumno, con independencia de las opciones elegidas en su  preinscripción, podrá matricularse en cualquier titulación que en el momento  de su citación disponga de plazas libres. El listado con las horas aparecerá en  Internet diez días después de la finalización del plazo de preinscripción.  Buena práctica:  Una vez finalizado el plazo de preinscripción, la Universidad hará público un  listado citando a los alumnos con día y hora para que acudan a matricularse.  Dicho listado también podrá ser conocido por Internet. El alumno, con  independencia de las opciones elegidas en su preinscripción, podrá  matricularse en cualquier titulación que en el momento de su citación disponga  de plazas libres.  24
  25. 25. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009 En otras ocasiones los enlaces se añaden como frases sueltas, generalmente para ampliar información o indicar acciones. Redacte enlaces suficientemente significativos y que puedan comprenderse fuera de contexto. Tenga en cuenta que a veces los usuarios no leen los párrafos y clican directamente a los enlaces. Lo enlaces del tipo “haga clic aquí.” o “más información.” o “leer más.” no son aconsejables por que no describen suficientemente el enlace. Algunos dispositivos leen sólo los enlaces y encabezados de las páginas a la hora de navegar, obviando el texto “normal”. Así mismo, los buscadores utilizan los enlaces para interpretar y clasificar la página. Redacción de enlaces: Mala práctica:  Una vez finalizado el plazo de preinscripción, la Universidad hará público un  listado citando a los alumnos con día y hora para que acudan a matricularse.  + info Más… Información Inscripción Buena práctica:  Una vez finalizado el plazo de preinscripción, la Universidad hará público un  listado citando a los alumnos con día y hora para que acudan a matricularse.  Más información sobre el proceso de inscripción. Realizar la inscripción on­line. Mala práctica: “Nuevo master en Relaciones Laborales. Haga clic aquí para inscribirse.” “Nuevo master en Relaciones Laborales. Haga clic aquí para inscribirse.” “Nuevo master en Relaciones Laborales. Haga clic aquí para inscribirse.” “Nuevo master en Relaciones Laborales. Haga clic aquí.”    Buena práctica: “Nuevo master en Relaciones Laborales. Haga clic aquí para inscribirse.” “Nuevo master en Relaciones Laborales. Haga clic aquí para inscribirse.” Cuando usted ofrece un enlace interno o externo dirige al usuario a una página diferente. Debe por tanto indicarle correctamente donde va antes de que el usuario haga clic en el enlace. 25
  26. 26. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009 Redacción de enlaces: Mala práctica: “Nuevo master en Relaciones Laborales. Haga clic aquí.”  Buena práctica: “Nuevo master en Relaciones Laborales. Haga clic aquí para inscribirse.” Para insertar un enlace correctamente utilice el botón correspondiente que abre una ventana nueva donde etiquetar el enlace. Icono de insertar enlace: Insertar enlace Ventana de edición del enlace: El bloque “Tipos de URL” le permite seleccionar el tipo de información al que enlaza. El campo “Texto” recoge el texto del enlace, el texto que aparecerá en la página web. El campo “Texto alternativo” recoge el texto que aparece junto al cursor al posarse en el enlace. El texto alternativo debe incluir información complementaria sobre el enlace. Procure no introducir información redundante o incompleta como texto alternativo. 26
  27. 27. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009 El campo “Desea abrir este link en una nueva ventana del navegador” ofrece la opción de abrir el enlace en ventana nueva. Se recomienda usar esta opción cuando se enlace con documentos no web, como por ejemplo ficheros de texto rtf o pdf o si enlaza con una página web externa a la UPV. Texto alternativo de los enlaces: Mala práctica: Texto: Haga clic aquí para inscribirse. Texto alternativo: Haga clic aquí para inscribirse. Texto alternativo: Inscríbase. Buena práctica: Texto: Haga clic aquí para inscribirse. Texto alternativo: Abre un formulario de inscripción en el master de Relaciones Laborales. Texto alternativo: Abre en ventana nueva un fichero PFD con un formulario de inscripción en el master de Relaciones Laborales. Mala práctica: Texto: Ir al sitio web del gabinete de prensa. Texto alternativo: www.gabinetedeprensa.ehu.com Texto alternativo: gabinete. Buena práctica: Texto: Ir al sitio web del gabinete de prensa. Texto alternativo: Acceda al gabinete de prensa para consultar las últimas noticias de la UPV. Si un texto alternativo no aporta nada al texto del enlace quizás esté mal redactado. Si un texto de enlace es suficientemente descriptivo por sí mismo quizás no sea necesario incluir un texto alternativo. Siempre que pueda indique la información sobre la página a la que enlaza, si hay cambio de idioma y si la página es accesible. Para considerar una página accesible busque en ella los logotipos de la WAI. Logotipos de WAI: El sitio web puede haberlos “personalizado”: 27
  28. 28. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009 Mala práctica:  Texto: Ir al sitio web del gabinete de prensa. Texto alternativo: www.gabinetedeprensa.ehu.com   Texto alternativo: gabinete. Buena práctica:  Texto: Ir al sitio web del gabinete de prensa (en euskera). Texto alternativo: Sitio web accesible. En la medida de lo posible evite los enlaces complejos o direcciones dinámicas. Simplifique las direcciones reenviando a la página de inicio del web y no a páginas secundarias o temporales. Por ejemplo: en lugar de reenviar al usuario a la página http://www.educación.net/index.php envíelo a http://www.educación.net/ Verifique siempre la existencia del sitio enlazado y plantéese si realmente aporta algo al usuario. 3.1.6 Anclas Las anclas permiten enlazar con una sección o palabra en concreto dentro de la página web. Para insertar un ancla sitúe el cursor en el lugar donde desea insertarla y haga clic en el botón ancla. Icono de insertar anclas: Ancla A continuación se abre la ventana de edición de ancla donde puede dar un nombre al ancla y añadirlo a la lista de anclas de la página. 28
  29. 29. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009 Ventana de inserción de anclas: Puede añadir tantas anclas como sea necesario. Una vez introducida el ancla en la página debe crear un enlace que al pulsarlo lleve al usuario directamente al ancla. Para ello seleccione el texto que desea que actúe como enlace, sitúe el cursor sobre él y haga clic en el botón derecho para que se despliegue el menú contextual. Seleccione después “hyperlink” para que se abra la ventana de enlace. En la sección “Quick Linck” puede seleccionar el ancla a la que desea enlazar. Ventana de enlace a las anclas: 29
  30. 30. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009 Las anclas se usan habitualmente para crear un menú secundario en la parte superior de la página. Si una información es demasiado extensa puede dividirla en secciones e insertar un ancla dentro de cada sección. Después basta con incluir un menú con todos los títulos de sección en la parte superior y enlazar con cada ancla correspondiente. Buena práctica: Información de la página web:  1.   Introducción.   (Enlace a ancla1) 2.   Marco teórico.  (Enlace a ancla2) 3.   Estudios de caso.  (Enlace a ancla3) 4.   Conclusiones.  (Enlace a ancla4) 1. Introducción  (ancla1) Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis venenatis, massa sit amet tincidunt tristique, sem lacus  tincidunt elit, eu laoreet risus eros id eros. Donec erat augue, porta et, dignissim nec, egestas sed, ipsum. Donec nulla.  Vivamus ac mi a diam viverra interdum. Donec blandit, tortor non nonummy dapibus, erat dolor sodales nibh, egestas  fermentum ante enim eget est. Praesent consectetuer lacus eget arcu. Praesent sollicitudin gravida risus. Vivamus  convallis sagittis lacus. Curabitur id mauris sodales tortor tristique placerat. Nulla mauris erat, volutpat eget, sollicitudin  eget, laoreet sed, sem. Morbi pharetra volutpat lorem.  2. Marco teórico (ancla2) Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis venenatis, massa sit amet tincidunt tristique, sem lacus  tincidunt elit, eu laoreet risus eros id eros. Donec erat augue, porta et, dignissim nec, egestas sed, ipsum. Donec nulla.  Vivamus ac mi a diam viverra interdum. Donec blandit, tortor non nonummy dapibus, erat dolor sodales nibh, egestas  fermentum ante enim eget est. Praesent consectetuer lacus eget arcu. Praesent sollicitudin gravida risus. Vivamus  convallis sagittis lacus. Curabitur id mauris sodales tortor tristique placerat. Nulla mauris erat, volutpat eget, sollicitudin  eget, laoreet sed, sem. Morbi pharetra volutpat lorem.  3. Estudios de caso (ancla3) Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis venenatis, massa sit amet tincidunt tristique, sem lacus  tincidunt elit, eu laoreet risus eros id eros. Donec erat augue, porta et, dignissim nec, egestas sed, ipsum. Donec nulla.  Vivamus ac mi a diam viverra interdum. Donec blandit, tortor non nonummy dapibus, erat dolor sodales nibh, egestas  fermentum ante enim eget est. Praesent consectetuer lacus eget arcu. Praesent sollicitudin gravida risus. Vivamus  convallis sagittis lacus. Curabitur id mauris sodales tortor tristique placerat. Nulla mauris erat, volutpat eget, sollicitudin  eget, laoreet sed, sem. Morbi pharetra volutpat lorem.  4. Conclusiones (ancla4) Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis venenatis, massa sit amet tincidunt tristique, sem lacus  tincidunt elit, eu laoreet risus eros id eros. Donec erat augue, porta et, dignissim nec, egestas sed, ipsum. Donec nulla.  Vivamus ac mi a diam viverra interdum. Donec blandit, tortor non nonummy dapibus, erat dolor sodales nibh, egestas  fermentum ante enim eget est. Praesent consectetuer lacus eget arcu. Praesent sollicitudin gravida risus. Vivamus  convallis sagittis lacus. Curabitur id mauris sodales tortor tristique placerat. Nulla mauris erat, volutpat eget, sollicitudin  eget, laoreet sed, sem. Morbi pharetra volutpat lorem.  30
  31. 31. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009 3.1.7 Página anterior y página siguiente Otra manera de organizar los textos demasiado largos es usar esta opción que ofrecen la mayoría de las plantillas del Gestor de Contenidos. Accederemos a la pantalla de introducción de datos y en los campos Página anterior y Página siguiente cargaremos los archivos (páginas) que queramos enlazar desde el primer archivo visualizado del documento. Al pulsar el botón Browse, escogeremos el documento HTML con el nombre del archivo que carguemos como página anterior o siguiente (en este caso: not_soport_port.html), y pulsaremos el botón OK, como aparece en la imagen de ejemplo. 31
  32. 32. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009 El botón nos permite realizar una previsualización del contenido tal y como se podría ver en Internet. Correspondería con el área que se enmarca en la imagen de ejemplo. En las bandas grises podemos ver el resultado de haber enlazado archivos (páginas) Anterior y Siguiente: 3.1.8 Tablas La regla general es no usar tablas y en ningún caso utilice tablas para lograr efectos de formato (columnas, entradillas, etc.). Si resulta imprescindible, se permite su uso únicamente para marcar información tabular (tablas de datos). Icono para insertar tabla: Insertar tabla Pulse en el icono “Insertar tabla” y a continuación se abre una ventana en la que puede configurarse la nueva tabla. 32
  33. 33. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009 Ventana de configuración de tabla: “Size” permite determinar el número de filas (“rows”) y columnas (“columns”). “Layout” establece el tamaño de la tabla (“Width”) y el alineamiento (“Horizontal Alignment”) “Borders” > “Border Size” establece el tamaño del borde. “Custom Background” permite introducir un color de fondo o una imagen. No se recomienda el uso de imágenes de fondo en las tablas porque reduce la visibilidad del texto. Si emplea colores como fondos de tablas asegúrese de que existe suficiente contraste entre el texto y el fondo y que los colores que se usen estén aprobados en el Libro de Estilo. Las tablas mal empleadas presentan especiales dificultades para los usuarios de lectores de pantalla. Algunas aplicaciones de usuario navegan entre las celdas de las tablas y acceden a los encabezamientos y otras informaciones de las celdas. A menos que marquemos apropiadamente las tablas, éstas no proporcionarán a la aplicación de usuario la información necesaria. 33
  34. 34. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009 Uso de tablas: Mala práctica:   Master en Relaciones laborales Ya están disponibles los diferentes documentos para inscribirse en el nuevo  master de Relaciones Laborales ofertado por la Universidad del País Vasco.  Los interesados pueden consultar la documentación en el sitio web del  programa.  Otros datos de interés:    Fotografía  Datos técnicos: Programa sectorial Requisitos mínimos: Licenciatura Calendario: 10 de septiembre a 25 de  mayo  Buena práctica: Tabla 1: Datos educativos de Euskadi Estudiantes por  Profesores Colegios por zona Aula Gipuzkoa 35 45 48 Bizkaia 20 37 48 Araba 26 52 39 Titule las tablas y utilice celdas de encabezado para identificar los datos. Utilice la alineación superior en las tablas. Algunos lectores tienen dificultad para leer las tablas centradas vertical y horizontalmente. Los encabezados de una tabla son las primeras celdas de las columnas o filas y su función es identificar los datos de esa columna o fila. Así en nuestro ejemplo los encabezados de columna son: Estudiantes por aula, Profesores, Colegios por zona. Los encabezados de fila son: Gipuzkoa, Bizkaia y Alaba. Ejemplo de cómo hacer las tablas accesibles: Cuando se crea una tabla usando el editor de texto del gestor debemos entrar en la sección de Accesibilidad y especificar si la tabla tiene encabezados (Heading Rows y Heading Columns), rellenar el Summary (esta información no se verá pero sirve para explicar el contenido de la tabla a los lectores de pantalla; en el caso del ejemplo debería ser algo así: “Datos de Estudiantes por aula, Profesores y Colegios por Zona en Gipuzkoa, Bizkaia y Álava”) y escribir el título de la tabla en la sección Caption: 34
  35. 35. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009 Por otro lado, también se debe rellenar el apartado de Accesibilidad de las celdas de encabezamiento. Haciendo click con el botón derecho del ratón sobre el encabezado, seleccionar Table y después Cell Properties... En la ventana que se abrirá deberemos rellenar la parte sobre accesibilidad: 35
  36. 36. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009 La sección Abbreviation tiene dos usos: • Abreviar contenidos largos: Este atributo debería usarse para proporcionar una forma abreviada del contenido de la celda; los agentes de usuario pueden representar esta forma abreviada en lugar del contenido de la celda cuando sea apropiado. Los nombres abreviados deberían ser cortos, ya que los agentes de usuario pueden representarlos repetidas veces. Por ejemplo, los sintetizadores de voz pueden representar los encabezados abreviados relacionados con una celda en particular antes de representar el contenido de esa celda. En el ejemplo que nos ocupa, podríamos usar como forma abreviada: estudiantes, colegios... para que las herramientas no repitan todo el texto cada vez que lean una celda. • Expandir formas abreviadas: si el contenido de una celda es una abreviatura, deberemos dar la forma expandida rellenando este campo. Por ejemplo, si hemos usado L, M, X, J, V, S, D deberemos especificar en el campo Abbreviation la forma expandida (Lunes, Martes, etc...) La sección Categories sólo es necesario rellenarla en tablas muy complejas. Sirve para relacionar celdas entre sí asignándoles una categoría concreta. En la tabla del ejemplo, aunque no sería necesario usar este atributo, se podría asignar la categoría “provincia” para la primera columna. Conviene usarlo cuando hay muchos encabezados que interactúan, como podría ser el caso de una tabla en la que se muestren datos por campus, centro, fecha... 36
  37. 37. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009 3.2. Información gráfica Las informaciones gráficas son las fotografías, imágenes y gráficos que se introducen en una página para ampliar o ilustrar la información. Procure utilizar informaciones gráficas de calidad. Evite las fotografías no enfocadas u oscuras. Utilice imágenes que transmitan ideas o conceptos. Las imágenes hacen que la página pese más y tarde en descargarse. No utilice las informaciones gráficas como decoración; asegúrese de que aporten algo a los textos que acompañan. Antes de insertar la imagen en el gestor tiene que redimensionarla y ajustarla mediante un programa de retoque para asegurar la mejor calidad visual y de compresión. El gestor ofrece la posibilidad de redimensionar las imágenes pero no se aconseja utilizar esta opción. No pegue la imagen directamente en el campo de edición de texto, utilice el icono “insertar imagen” para añadir una imagen que previamente habremos subido al servidor. Icono de inserción de imágenes: Insertar imagen 37
  38. 38. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009 Ventana de inserción de imagen: El campo “File Selection” le permite localizar la imagen. Las opciones de “Layout” y “Spacing” permiten redimensionarla y alinearla en la página. Se recomienda no usar la opción “Layout”. El campo “Title” permite introducir una descripción de la fotografía (el texto alternativo; se puede ver pasando el ratón sobre la imagen). Por razones de accesibilidad está obligado a describir la información de la imagen si ésta aporta información. No está obligado a describir elementos decorativos (iconos, fondos de menú, etc.) pero sí aquellos elementos que transmiten información (logotipos, fotografías, etc.). El texto debe ser suficientemente descriptivo para que los usuarios que no pueden ver la imagen se hagan una idea precisa de la información que transmite. 38
  39. 39. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009 Redacción de texto alternativo de imágenes: Ejemplo: Mala práctica:  Tiltle: Inscripción alumnos.  Buena práctica:  Tiltle: Alumnos de la UPV realizando el proceso de inscripción.  Si introduce un elemento decorativo (una línea, icono, etc.) no rellene el campo Title para que los dispositivos de accesibilidad puedan saltar estas imágenes dado que no aportan valor informativo. Redacción de texto alternativo de imágenes: Ejemplo: Mala práctica:  Tiltle: Línea de separación horizontal.  Buena práctica:  Tiltle: Si la imagen contiene un enlace a otra página, se debe incluir la leyenda “Acceso a...” 39
  40. 40. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009 3.3. Ficheros no web. Los ficheros no web se deberán abrir siempre en una ventana nueva. 3.3.1 Formato Si lo desea puede realizar un enlace a un fichero no web adjunto. En la medida de lo posible intente siempre ofrecer la información en formato html a través del gestor. Si fuera necesario incluir una información en otro formato (Pdf, Rtf, Doc..) siga siempre las siguientes recomendaciones. Debe usar formatos estándares no propietarios, como el RTF, PDF y los Open Documents (documentos creados con el Open Office, versión no propietaria del Microsoft Office). Los formatos propietarios no son accesibles para las personas que no dispongan del visor Microsoft en cuestión instalado y para los dispositivos de ayuda a personas discapacitadas. Debe usar formatos no propietarios. Si utiliza un formato RTF, DOC (formato propietario) o PDF, debe etiquetar estrictamente todo el texto con los Estilos y Formatos ya que éstos determinarán la estructura del documento de texto. Como norma general, ofrezca siempre Open Documents además de los típicos Word, PowerPoint y Excel. Para pasar los archivos DOC, PPT y XLS a formato Open Document, sólo hay que instalar el Open Office*, abrir los documentos con el programa que corresponda y guardarlo en el formato estándar: Word (DOC) OpenOffice Writer OpenDocument Text (ODT) PowerPoint(PPT) OpenOffice Impress OpenDocument Presentation(ODP) Excel (XLS) OpenOffice Calc OpenDocument Spreadsheet (ODS) Si se usa algún otro programa, si se desea, se puede ofrecer un enlace a la página de Ayuda de ehu.es donde se recogerán enlaces a todos los lectores o reproductores que permitan visualizar todos los contenidos incorporados en las páginas web. El texto a incorporar será el siguiente: Si no dispone del programa necesario para visualizar este archivo puede descargarlo desde nuestra Página de Ayuda. No se recomienda, por tanto, incluir enlaces a los reproductores desde las páginas de los diferentes portales sino centralizar todo este tráfico en la página de Ayuda de ehu.es destinada a tal efecto. Utilice nombres de ficheros descriptivos de los mismos. Además, TODOS los ficheros adjuntos (pdf, rtf o doc, ppt, excel –no recomendados–), cualquiera que sea su naturaleza, deben llevar entre paréntesis el tipo de fichero y su tamaño en KB o MB.  Se puede descargar de la siguiente dirección web: http://es.openoffice.org/programa/index.html * 40
  41. 41. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009 Mala práctica:  Descargar la solicitud de admisión Buena práctica:  Descargar la solicitud de admisión. (pdf, 45 KB) 3.3.2 Tamaño Además se indicará, entre paréntesis, utilizando la nomenclatura propuesta e indicando el tamaño en “KB” cuando éste sea inferior a 1 Mega y “MB” cuando sea igual o superior. En este sentido no se debe redactar una frase referida al link, del tipo “haz clic aquí para más información”. Escribe la frase como lo harías normalmente y coloca la referencia de enlace en la palabra o palabras que mejor describen los contenidos adicionales con los que enlazan. Mala práctica:  Para ver el organigrama pincha aquí. Buena práctica:  Organigrama del Departamento (pdf, 1,4 MB) Se recomienda encarecidamente incluir comentarios a los enlaces, es decir, que el usuario tenga no sólo la posibilidad de descargar un determinado documento sino que antes de descargarlo obtenga una breve explicación sobre su contenido. Se trata de evitar situaciones como la de la imagen siguiente: 41
  42. 42. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009 Buena práctica: 3.3.3 Uso del euskera El Decreto de Modelo de Presencia en Internet de ehu.es obliga a que todos los contenidos DEBAN aparecer tanto en castellano como en euskera. En este sentido, todos los textos que aparezcan en la sección de euskera deberán estar en este idioma y los adjuntos deberán estar también traducidos al euskera. Actualmente gran cantidad de contenidos no cumplen en absoluto con esta norma obligatoria. Hasta que se llegue al total cumplimiento de este punto, para los archivos adjuntos aún sin traducir, se propone mantener el nombre en el idioma original del documento y especificar el idioma en el que está. Por ejemplo: Mala práctica:  Informe general, (pdf, 480 KB) Txosten orokorra, (pdf, 480 KB) Txosten orokorra, Gazteleraz, (pdf, 480 KB) Buena práctica:  Informe general, Gazteleraz, (pdf, 480 KB) NOTA: Al subir los archivos adjuntos al servidor con el Gestor de Contenidos, ha de tenerse en cuenta que los nombres de los archivos no deben contener caracteres extraños : blancos, @, comas, comillas, acentos, etc… 42
  43. 43. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009 De no seguirse esta norma, es posible que surjan problemas para acceder a los adjuntos, produciéndose errores al abrirlos o guardarlos. 3.3.4 Etiquetar correctamente los archivos .pdf Al crear un archivo PDF con Adobe Acrobat hay que tener en cuenta varias cosas para optimizar su presencia en Internet. Por motivos de accesibilidad y para que los buscadores encuentren estos archivos convenientemente se deben seguir estos pasos: - Rellenar correctamente los datos que describen el archivo: en Archivo > Propiedades de documento... Es muy importante poner un Título coherente y significativo, ya que es un dato público que aparecerá en muchos buscadores (google, por ejemplo, usa este dato como título –texto azul subrayado– en sus resultados de búsqueda). 43
  44. 44. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009 Conviene, también, rellenar el resto de apartados de la Descripción con datos precisos y explicativos. Ésta será la única información visible para los buscadores en el caso de los PDFs creados con imágenes escaneadas, así que es la única manera de que puedan ser encontrados por los buscadores. Aún así, se recomienda no hacer PDFs de este tipo, ya que no son en absoluto accesibles. Si se quiere añadir aún más información al documento, elegir la opción “Metadatos adicionales...” en la misma ventana de la Descripción y rellenar los campos que interese. - Lo siguiente a tener en cuenta es la especificación PDF. Parece ser que algunos buscadores no indexan documentos con la especificación 1.6 (que es la que en principio usa el Acrobat 7). Para comprobar esto se puede usar el Optimizador de PDF en el Acrobat 7 Professional (Avanzadas > Optimizador PDF...), donde se puede cambiar la versión del PDF a 1.5 ó 1.4 (Hacer compatible con: Acrobat 5.0 y posterior) para que sea compatible con todos los motores de búsqueda. - Si es de vital importancia que los buscadores indexen el documento por completo habrá que tener en cuenta el tamaño del mismo, ya que algunos motores de búsqueda dejan de leerlo pasado cierto límite, que oscila entre los 100 y los 500 KB. En estos casos conviene partir los documentos grandes en varios de menor tamaño. De esta manera los buscadores leerán cada palabra del documento. Obviamente, esto sólo es aplicable a los PDFs de texto, ya que los buscadores no pueden leer imágenes (en esos casos sólo tendrán en cuenta los datos de la Descripción). - Si queremos optimizar y controlar la manera en la que los motores de búsqueda indexan nuestro documento PDF, nos interesa el orden en el que los buscadores extraen la información de él. Esto puede ser interesante en 44
  45. 45. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009 los casos en que los buscadores muestran el término buscado en su contexto. Lo primero que hay que hacer para empezar a definir el orden de los contenidos es comprobar si el documento está etiquetado (en Archivo > Propiedades de documento...): Si pone que no, es una muestra evidente de que el documento no es accesible. Para etiquetarlo deberemos ir al menú Avanzadas > Accesibilidad > Agregar etiquetas al documento. Si queremos que un asistente de Acrobat nos ayude a comprobar la accesibilidad del documento, en Avanzadas > Accesibilidad > Comprobación completa... se puede crear un informe de accesibilidad que identifique los errores y nos indique cómo solucionarlos (cómo poner texto alternativo a las imágenes, cómo definir el idioma del documento, etc...) De esta manera estructuraremos correctamente el PDF para hacerlo accesible. 45
  46. 46. Francisco Javier Gallego Orellana Ed.1 V.1 Año 2009 Para ver cómo está ordenado el documento, en Avanzadas > Accesibilidad, seleccionaremos la opción “Retocar orden de lectura”. 46

×