Manual y guías para la administración y uso del sitio web. by Juan Dimuro

Manual y gu铆as para la administraci贸n y uso del sitio web. Versi贸n preliminar

Manual y guías Bienvenidos al Manual para la administración y gestión del sitio. Este pretende ser una guía para el uso de la plataforma, su administración y gestión. Se trata de una serie de documentos y presentaciones que buscan dar asistencia a las personas que utilizan el sistema. Estos documentos están redactados en un lenguaje “coloquial” sin descuidar los conceptos técnicos explicados en la sección Glosario. En este sentido, esta sección está dividida en 6 secciones donde en cada una se trata de forma específica las distintas funcionalidades de los sitios agregando al final un glosario para aclarar algunos conceptos. El mismo ha sido desarrollado por el equipo de Diseño y Desarrollo de la Unidad de Comunicación de la Universidad de la República (UCUR).

Índice Introducción página 6 página 6 página 8 página 9 -

Escritorio página 10 -

Administrar Noticias página 11 página 12 página 14 página 15 -

Administrar Paginas página 16 página 17 -

- página 6

Sistema de gestión de contenidos Por qué ese sistema Uso del manual En caso de problemas - página 10

El Escritorio en partes - página 11

Publicar una noticia El editor de páginas y noticias Espacio noticias Estado y visibilidad de una página o noticia - página 16

Espacio de Páginas El editor de páginas y noticias

página 17 página 18 -

Editar textos página 19 página 21 página 23 página 24 página 25 página 26 página 27 -

Administración y edición página 29 página 31 página 33 -

Accesibilidad página 34 página 35 página 36 -

Crear una página Estado y visibilidad de una página o noticia - página 19

Insertar Imagen Insertar Enlace Insertar Tabla Insertar un Video Pegar texto sin formato Insertar una cita Atajos de teclado - página 29

Administrar menús Administrar banners Librería Multimedia - página 34

Por qué Accesibilidad Mitos sobre la accesibilidad Uso de imágenes

página 37 página 38 página 39 página 39 -

Audio y video Estructura de encabezados Navegación Buenas formas

página 40 página 40 página 40 página 40 página 41 página 41 página 41 página 42 página 42 página 43 página 43 página 43 página 44 -

Glosario

Crear PDFs accesibles Uso de tablas Web semántica Otros idiomas Abrir en ventana nueva Ventanas emergentes Uso de las mayúsculas sostenidas Texto justificado Menús desmenuzados Cómo se lee Animaciones Manténgalo actualizado Escribir para la web - página 45

índice

Introducción Sistema de gestión de contenidos El sistema de gestión de contenido o CMS (por sus siglas en inglés, Content Management System) que se utiliza es WordPress. Desarrollado en PHP para entornos que ejecuten MySQL y Apache, bajo licencia GPL y código modificable. WordPress nació del deseo de construir un sistema de publicación personal, elegante y con una buena arquitectura («Código es poesía»). Basado en PHP, MySQL y con licencia GPL, WordPress pone especial atención a la estética, estándares web y usabilidad.

Por qué usamos WordPress WordPress es una poderosa herramienta para crear y gestionar sitios en la web. Permite la publicación de contenidos de una forma fácil a través de una serie de funcioalidades diseñadas para hacer tan fácil, placentera y atractiva como sea posible la experiencia de publicar en Internet. De esta forma, se trata de un sistema de publicación personal distribuido libremente, basado en estándares web, rápido, ligero y gratis; con una configuración y características muy bien pensadas, y un núcleo extremadamente personalizable. Las características más destacadas de WordPress son: • Aplicación de Libre Distribución (GPL). Se puede utilizar y modificar de forma gratuita. • Creación de contenidos. Admite proteger la lectura de un artículo con una contraseña; crear un artículo y que se publique al llegar una fecha; vista previa de artículos sin necesidad de publicarlo; subir e insertar imágenes propias y miniaturas; subir y enlazar distintos tipos de archivos (pdf, zip, doc, etc); organizar los artículos en categorías o secciones; gestionar borradores de artículos que se pueden guardar para retomarlos más adelante y publicarlos cuando se estime conveniente, etcétera.

índice • Archivo histórico. 7

Muestra de forma organizada en el tiempo los artículos anteriores. • El que busca encuentra. Integra una herramienta de búsqueda que permite a los visitantes buscar en todo el sitio por un término que se introduce como dato. • No importa dónde se instale. WordPress fue diseñado para ser instalado en su servidor web (no importando si es dedicado o compartido), y le otorga poder absoluto de su bitácora. A diferencia de los servicios de bitácora externos, puede estar seguro que será capaz de acceder y modificar cualquier aspecto de su bitácora, en caso de que lo necesite. WordPress también puede ser instalado en su computador, o incluso en una Intranet. • Núcleo Flexible. Puede elegir tener el conjunto de archivos de WordPress, que es la trastienda de lo que muestra su bitácora, en el mismo directorio de éste o en un directorio diferente. Por ejemplo, puede desear que su bitácora se muestre en http://ejemplo.com (o el directorio public_html cuando se accede por FTP), y desea almacenar los archivos relacionados con WordPress en http://example.com/wordpress (public_html/wordpress). • Todas las fechas son UTC. Permite fijar la hora como diferencia del Tiempo Universal Coordinado, para que así todos los elementos relacionados con el tiempo (hora y fecha de los comentarios, por ejemplo) sean guardados con la hora GMT, que es un estándar universal. Entre algunas ventajas, esto ayuda a mostrar la hora correcta en su bitácora, incluso si el servidor donde está su sitio se encuentra ubicado en otra zona horaria. • Administración de usuarios. Para limitar el acceso a partes sensibles, usa el sistema de niveles de usuario; por lo que puede restringir la capacidad de usuarios individuales de crear o modificar contenido de su bitácora, cambiando sus niveles de usuario. • Perfiles de usuario. Cada usuario registrado de su bitácora puede definir un perfil, con detalles como su dirección de correo electrónico, cuentas de mensajería instantánea, etcétera, si ellos desean hacerlo público. Los usuarios también pueden controlar la forma en que su información es mostrada en la bitácora. •

Fácil instalación y actualización. La famosa instalación de WordPress, que dura 5 minutos, no puede ser derrotada por su simplicidad y facilidad de uso. Actualizar su bitá-

índice cora a la última versión también es sencillo, y debería tomarle menos tiempo que la instalación. 8

•

Generación dinámica de páginas. No es necesario reconstruir todas sus páginas cada vez que actualiza su bitácora, o cambia algún detalle de la misma. Todas las páginas son generadas al utilizar la base de datos y las plantillas cada vez que su bitácora es solicitada por un visor. Esto significa que actualizar su bitácora, o su diseño es tan rápido como sea posible, y el espacio de almacenamiento requerido en el servidor es mínimo.

•

Links permanentes libres de estorbos. Las direcciones para todas las páginas del sitio pueden estar de acuerdo a un estándar libre de estorbos; y todos los vínculos entre páginas son cambiados automáticamente y de forma transparente, y de una forma entendible tanto para humanos como para máquinas (incluyendo motores de búsqueda). Direcciones limpias son esenciales para la optimización de resultados en los motores de búsqueda, y para la comodidad del lector.

•

Carga de archivos/imágenes. Puede cargar (subir) archivos e imágenes, y vincularlos a sus artículos o colocarlos en ellos.

Uso del manual Cada sección de este manual abarca una temática diferente aunque en muchos casos las formas y métodos se repiten. Dentro de cada sección nos encontraremos con una introducción y luego una serie de títulos seguidos por una flecha, estos son botones que al hacerles clic se despliegan mostrado la información requerida. Cada uno de estas subsecciones se encarga de presentar un punto específico: un procedimiento, una sección, etcétera. La mayoría de estos se estructuran en una introducción y una imagen interactiva, para activar esta imagen debemos hacer clic en el botón “Mostrar guías”, este mostrara una serie de marcas sobre la imagen que, cuando colocamos el puntero del mouse sobre ellas, despliegan una explicación sobre la región de la imagen donde se ubica.

índice

En caso de problemas que no están en este manual Accedes como cada día a tu web y te encuentras con un minimalista, relajante, celestial y prístino blanco por toda la pantalla. Tras unos segundos de relajación ante tanta pureza de estilo y contenido, sin logos ni colores estridentes, por supuesto sin faltas de ortografía, empiezas a sentir cierta desazón, quizás desasosiego, hasta pánico… “¿Donde está mi web, que ha pasado con mis colores y titulares impactantes? ¿por qué mi sitio no me ama?” A lo que nosotros te contestaríamos ¿por qué no amas tu a tu sitio? Luego simplemente contáctanos: Portal - Unidad de Comunicación Universidad de la República Avenida 18 de Julio 1824, Subsuelo (sobre Eduardo Acevedo) Tel.: (598) 2408 2906, 2408 5714 Correo electrónico: portal@universidad.edu.uy Montevideo - Uruguay

Recomendamos leer este manual no sólo para aprender el funcionamiento del gestor de contenidos, sino porque en este también se incluyen consejos, atajos, etcétera que hacen más

funcional al sitio así como más dinámica la gestión y administración de contenidos.

índice

El Escritorio En el escritorio (primera pantalla que se ve tras iniciar sesión) se muestra información acerca de la actividad reciente en el sitio web, así como avisos de actualizaciones o información relevante de la comunidad WordPress. El menú para navegar en el panel de administración se encuentra en la parte izquierda de la pantalla. Es un menú de navegación intuitivo y flexible, permitiendo llegar a todas las funciones con pocos clics.

u u u

El Escritorio en partes

El Escritorio es un espacio para acceder rápidamente a las áreas más utilizadas de administración del sitio. Este espacio presenta la información en bloques llamados módulos. Cada usuario, en función de sus tareas y de las especificidades de su sitio, verá una serie de módulos parecidos a los de la imagen.

u u

Permite gestionar las noticias del gestor de contenidos de UCUR. Se encuentran todos los archivos que subidos y listados en la Librería Multimedia. Las subidas más recientes se encuentran listadas primero.

Las páginas son similares a los artículos en que tienen un título, cuerpo y metadatos asociados. Son diferentes en que no son parte de la corriente cronológica del blog, siendo una especie de artículos permanentes. Las páginas no están categorizadas o etiquetadas, pero pueden tener jerarquía. Se puede anidar páginas bajo otras páginas haciendo que una sea “Padre” de otra, creando así grupos de páginas.

Contiene información sobre ti (tu “cuenta”) así como algunas opciones personales relacionadas con el uso del sitio.

índice

Administración de Noticias Las entradas o noticias son objetos orientados en el tiempo. Se escriben en un tiempo específico, y ese tiempo define su contexto. Ejemplos de noticias serían las actividades del mes que viene, boletín mensual o un hecho puntual que ocurrió o va a ocurrir e el corto plazo. En este sentido, las noticias son un tipo de entrada de información que, como principales características, cuentan con fechas de publicación y despublicación y una herramienta de categorización que cumple la función de mostrar la noticia en los espacios que uno quiera o haya planificado previamente.

Publicar una noticia Publicar una noticia es tan sencillo como mandar un e-mail. Con las imágenes podemos seguir las instrucciones.

1. Nos dirigimos a la pestaña Noticias en el panel de administración. 2. Hacemos clic en Agregar nueva. 3. Ingresamos al editor de la noticia de tipo WYSIWYG (en inglés: What You See Is What You Get). Ahí, ingresa el título de la noticia y en la caja de texto la información. Puedes añadir enlaces, negritas, viñetas, entre otros. 4. Añadimos categorías que definen a esta entrada. En muchos casos la categoría es útil para colocar un acceso a la noticia en espacios previamente determinados; por ejemplo, a una noticia se le puede asigna la categoría Portada para que esta se vea en el índex del sitio. 5. Seleccionamos una imagen destacada para cuando existe un listado de noticias donde sólo se muestra título de la noticia, resumen e imagen destacada.

índice

6. Luego debemos considerar las fechas de la noticias: “Publicado desde” edita desde cuando se verá la noticia en la web, “Publicado hasta” se trata de la fecha en la que la noticia desaparecerá de los lugares donde se lista con las categorías aunque no desaparecerá del sitio (podrá ser encontrada por medio de buscadores o un historial), ”Fecha del evento” implica, en caso de ser necesario, de evidenciar cuándo sucederá el evento, hecho, etcétera de la noticia, es un dato que se uso sólo cuando la información lo requiere. 7. Por último, podemos seleccionar si la noticia estará protegida por contraseña, si es privada (solo el autor o personas admitidas pueden verla) o si se publica. Así mismo, podemos seleccionar la fecha en que aparecerá publicada por si se desea que aparezca en el futuro, o si por el contrario se publica con algo de retraso. En la mayoría de los casos sólo es necesario añadir el título y el texto de la noticia, seleccionar categorías, colocar una imagen destacada y pulsar el botón Publicar, los demás campos pueden quedarse tal y como están.

u u

u Título u u

Insertar imagen, galería u otro objeto

de herrau Barra mientas

u Espacio de texto

índice

Cuando pegas contenido directamente de otra web, los resultados pueden ser inconsistentes y variables dependiendo de tu navegador y de la página desde la que pegues. El editor intentará corregir los códigos HTML no válidos que pongas, pero para obtener un mejor resultado mira Editar textos / Pegar texto sin formato. Si sueles usar el editor, la mayoría de las combinaciones de teclas básicas funcionan como en cualquier otro editor de texto. Por ejemplo: Shift + Enter inserta un salto de línea, Ctrl + C = copiar, Ctrl + X = cortar, Ctrl + Z = deshacer, Ctrl + Y = rehacer, Ctrl + A = seleccionar todo, etc (en Mac usar la tecla Comando en lugar de Ctrl). Puedes ver la lista de teclas rápidas para todos los atajos de teclado en Administración y edición / Atajos de teclado. Veamos de forma detallada las diferentes herramientas y funciones del editor de noticias, entradas y páginas. ta ple om c ce e a l c a l a n l l r en omper e esumen Panta ltar ntas R Crea R Ocurramie he

a nad da orde ordena s e a d a v a i t t a i s t s r r i a s i g t L L Cu Ne Ci

Sub raya

For mat o de l tex

Bor

rar

Des Inse hac r er/r form tar car eha a ato ctér cer espe cial

Ayu d

Menú de Formato del texto

• • • • • • • • • • • •

Negrita: se escribe el texto con una variante del tipo de letra utilizado que tenga los rasgos más gruesos. Cursiva: estilo de escritura cuyas características más comunes son la inclinación de sus letras y la concatenación de las mismas en una palabra. Lista: Las listas originalmente están pensadas para citar, numerar y definir cosas a través de características, o al menos así lo hacemos en la escritura de textos. Cita: resalta cuando el texyo en cuestión es una cita textual. Enlace (o hipervínculo): es un elemento de un documento electrónico que hace referencia a otro recurso, por ejemplo, otro documento o un punto específico del mismo o de otro documento. Resumen: podemos seleccionar las frases del textos que queremos sea el resumen o copete. Formato del texto: despliega el menú donde señalamos que un texto determinado es un título, su nivel o un párrafo. Subrayado: se dibuja una linea bajo el texto seleccionado. Borrar formato: elimina el formato preestablecido de un texto. Insertar caractér especial: coloca caracteres específicos Deshacer/rehacer: herramientas que permiten dar un paso atrás en la realización de algo, o volver a realizar una acción. Ayuda: algunos tópicos guía.

índice

Espacio noticias Cuando accedemos a la sección de noticias (haciendo clic en Noticias en el panel de administración) se nos despliega el historial completo; es decir, presentada por defecto en orden cronológico, se listan absolutamente todoas las noticias creadas en el sitio. Además se les agregan otros datos y enlaces a espacios para, por ejemplo, editar la noticia, eliminarla, volver a publicarla, buscar, etcétera. Veamos de forma detallada este espacio.

u u

u u u

u Agregar noticia nueva.

u Historial de noticias

u Estadísticas

u Ordenar por fecha

u Buscador de noticias

u Acceso a herramientas

noticia para u Seleccionar “aplicaciones en lote”

u Edición rápida abierta

índice

Estado y visibilidad de una página o noticia

En el recuadro “Publicar” podemos seleccionar una serie de opciones que determinarán la visibilidad de la página, entrada o noticia. Podemos seleccionar si la entrada estará protegida por contraseña, que sea privada (solo personas autorizadas pueden verla), publicarla en el futuro o simplemente publicarla. Así como también tener una vista preliminar de lo creado, mover a la papelera o actualizar una entrada ya creada.

1u Recuadro publicar 2u 1u 1u

clic para, una vez finali-

3u zada la edición, aplicar

1u 4u

Clic para, una vez ter2u minado, hacer una vista previa de los cambios realizados.

los cambios.

Clic para enviar la noticia, página, etcétera a la papelera.

Clic en editar para cambiar el Estado de la noticia, página, etcétera.

Seccionar el estado de la 2u noticia, página, etcétera: Publicada: el post se publicará. Esperando revisión: el post queda a espera que otro administrado apruebe su publicación. Borrador: el post queda guardado pero sin publicar.

Clic en editar para cambiar la visibilidad de la noticia, página, etcétera. Visibilidad refiere a quién y cómo se ve el post. Público: cualquier persona podrá ver el post. Protegida con contraseña: para poder ver el post se deberá poseer una contraseña que quien crea el post determinará. Privada: se debe poseer autorización para ver el post. Clic en editar para cambiar la fecha de publicación de la noticia, página, etcétera. Programación de la fecha y hora de publicación de un post, ingresando en los campos los campos correspondientes.

índice

Administración de Páginas Las páginas, al contrario que las noticias, se usan la mayor parte de las veces para presentar la información atemporal sobre la fecha o el sitio web (información atemporal). Ejemplos de páginas a incluir serían “Acerca de”, “Contacto”, “copyright”, etcétera; es decir, información estática. Resumiendo, las páginas: •

Son para el contenido que es menos dependiente del tiempo que las Entradas.

•

Pueden organizarse en páginas y subpáginas.

•

Pueden usar diferentes Plantillas de Página que pueden incluir Archivos de Plantilla, Etiquetas de Plantilla y otro código PHP.

Espacio de Páginas u

Cuando accedemos a la sección páginas (haciendo clic en Páginas en el panel de administración) se nos despliega el historial completo; es decir, presentada por defecto en orden cronológico, se listan absolutamente todas las Páginas creadas en el sitio. Además se les agregan otros datos y enlaces a espacios para, por ejemplo, editar la página, eliminarla, volver a publicarla, buscar, etcétera.

u u u

Crear página nueva u

Luego de seleccionar las páginas haciendo clic en el check box de la izquierda, se podrán u aplicar acciones en lote como editar o borrar.

Ordenar páginas por título, autor y fecha u Edición Rápida abierta: presenta de forma ágil algunas opciones para editar la página u Menú rápido de acceso a editar la página, eliminarla o verla. Este menú se abre cuando pasamos el puntero del mouse por encima del nombre de la página o le damos foco u Buscador de páginas. u

índice

El editor de páginas y noticias La edición visual, también llamada WYSIWYG por What You See Is What You Get (en inglés, Lo Que Ves Es Lo Que Obtendrás), consiste en dar formato al texto a medida que lo escribes. El editor visual va creando el código HTML tras las bambalinas mientras tú te centras en escribir. Debemos tener en cuenta que no se puede mostrar el control de los elementos estructurales, lo que significa que, por ejemplo, la inserción de varios saltos de línea después de un párrafo no da lugar a espacios en blanco en la página web final, el sistema limpia el código y sólo deja un salto de línea al final del párrafo. Cuando pegas contenido directamente de otra web, los resultados pueden ser inconsistentes y variables dependiendo de tu navegador y de la página desde la que pegues. El editor intentará corregir los códigos HTML no válidos que pongas, pero para obtener un mejor resultado mira Editar textos / Pegar texto sin formato.

Si sueles usar el editor, la mayoría de las combinaciones de teclas básicas funcionan como en cualquier otro editor de texto. Por ejemplo: Shift + Enter inserta un salto de línea, Ctrl + C = copiar, Ctrl + X = cortar, Ctrl + Z = deshacer, Ctrl + Y = rehacer, Ctrl + A = seleccionar todo, etc (en Mac usar la tecla Comando en lugar de Ctrl). Puedes ver la lista de teclas rápidas para todos los atajos de teclado en Administración y edición / Atajos de teclado.

Crear una página Publicar una página es tan sencillo como mandar un e-mail siguiendo los estos pasos: 1. Seleccionamos Páginas en el menú principal. 2. Clic en “Añadir nueva”, tenemos 2 lugares donde hacer clic, los 2 hacen los mismo a así que es indiferente seleccionar uno u otro. 3. Ingresamos la información: título y contenido. 4. Sólo de ser necesario, editamos los atributos de la página. En

índice

estos se editan datos como la ubicación de la misma en función de las demás páginas; por ejemplo si es hija o padre de otra. También se edita la plantilla: esta sirve para determinar el formato de la página. Para cambiar esta consultar a los programadores de la UCUR. 5. Seleccionamos una imagen destacada. Esta imagen, Como su propio nombre indica, es una imagen que eliges tú y que quieres que se destaque sobre el resto.El punto importante de esto es que puede ser una de las imágenes que tiene tu post, o bien otra totalmente distinta que no aparezca en el interior del mismo (ni siquiera tiene por qué aparecer en otra parte de la web), haciendo así que puedas jugar con las impresiones del lector y usarla como foto de atracción. 6. Editar el estado de la página y/o publicarla.

Estado y visibilidad de una página o noticia En el recuadro “Publicar” podemos seleccionar una serie de opciones que determinarán la visibilidad de la página, entrada o noticia. Podemos seleccionar si la entrada estará protegida por contraseña, que sea privada (solo personas autorizadas pueden verla), publicarla en el futuro o simplemente publicarla. Así como también tener una vista preliminar de lo creado, mover a la papelera o actualizar una entrada ya creada.

índice

Editar textos Para ingresar información no hay necesidad de usar esas molestas etiquetas HTML en el editor WYSIWYG (What you see is what you get), las imágenes pueden ser insertadas directamente y se cargan automáticamente e incluso la inserción de tablas y vídeos de Youtube es muy simple. Entonces, ingresar información es simple, pero se vuelve complicado y requiere mucho tiempo. En esta sección se podrán encontrar guías, consejos y buenas prácticas para el ingreso y edición del contenido de entradas, noticias, páginas, etcétera.

Insertar Imagen Insertar imágenes en las entradas es un proceso muy simple, para realizar esta acción los pasos son los siguientes: 1. Lo primero a tener en cuenta es que la imagen se ubicará en el lugar donde está ubicado el cursor. Una vez seleccionado el lugar hacemos clic en “Añadir objeto”.

Nota: se puede subir cualquier tipo de archivo, aunque es recomendable tener en cuenta el tamaño del mismo, sobre todo si se trata de imágenes que aparecerán en las entradas para no ralentizar la carga del mismo. Asimismo, es importante que el archivo tenga un nombre coherente una buena descripción ya que el repositorio es común para todos los administradores y sino se gestiona adecuadamente puede resultar tedioso encontrar cualquier archivo.

Ahora debemos seleccionar desde dónde voy a tomar la imagen 2. “Insertar Objeto”: se insertan imágenes desde la librería de medios del sitio. Si la imagen que queremos está nuestra PC, usamos esta opción para colocarla en la librería del sitio.

índice 3. “Fijar imagen destacada”: podemos seleccionar esta imagen aquí. 20

4. Cuando la imagen se encuentra en la web, ingresamos acá y pegamos las url de la imagen. 5. Cuando seleccionamos “Insertar Objeto” se carga la librería multimedia del sitio a la derecha. Si la imagen ya se encuentra en el sitio seguimos con el paso 7. Si la imagen no se encuentra en esta librería, simplemente hacemos clic en Subir archivos; se abrirá el navegador y ahí buscamos la imagen o las imágenes que queremos subir. Nota: En este paso lo que se está haciendo es subir al sitio la o las imágenes seleccionadas; es decir, una vez subida una imagen no será necesario subirla de vuelta para colocarla en otra página o entrada.

6. 7 La imagen está en la galería, ahora sólo debemos encontrarla, si no está a la vista, arriba a la derecha contamos con un buscador. Nota: El buscado indaga en el nombre del archivo y en los metadatos del mismo, entonces, en caso de tener muchas imágenes el buscador se vuelve importante, por lo tanto el ingreso de los metadatos (paso 10) es fundamental. 8. Seleccionamos la imagen o las imágenes que necesitemos haciendo clic sobre ella. Las seleccionadas quedaran enmarcadas en color y con un “tic” sobre ella. Nota: A medida que se van seleccionando las imágenes se van listado abajo a la izquierda donde haciendo clic en “borrar” podemos deseleccionarlas. 9. Detalle de información de la imagen además de un acceso a una edición simple de la misma o borrarla. 10. Metadatos: Es necesario completarlos siempre ya que con ellos los motores de búsqueda funcionan mejor además de ser necesario para

índice

cuestiones de accesibilidad y usabilidad. ► Título: Esta etiqueta o atributo se debe utilizar tanto en imágenes como en enlaces, y es la encargada de ofrecer una descripción emergente (tooltip) de la imagen o enlace. (algunos navegadores utilizan el atributo «alt» en lugar de «title» para mostrar esta información) ► Leyenda: La leyenda es lo que comúnmente conocemos como el “pie de foto”, o “caption”. ► Texto alternativo: Con el texto alternativo, cuando una imagen no puede ser visualizada en el navegador, podemos hacer que aparezca el texto que nosotros deseemos. Es también útil en cuanto la accesibilidad; es decir, las herramientas asistivas leen ese texto para comunicarle al usuario de qué trata la imagen. Al mismo tiempo, es un poderoso metadato para los buscadores. ► Descripción: Texto breve que explica de qué se trata la imagen, o “keywords” sobre la misma. Fundamental para los motores de búsqueda.

11. Clic para insertar la imagen.

Insertar Enlace Los enlaces puedes ser dirigidos a páginas, entradas y noticias del propio sitio, sitios externos o a archivos para descargar o ver online.

Para insertar un enlace, lo primero que debemos hacer es seleccionar el texto (1) que será enlazado; es decir, será el texto que al hacer clic nos dirigirá al destino seleccionado. Luego hacemos clic en el ícono de enlace (2). Al hacer clic se abre una ventana (3) donde podemos insertar o editar enlaces. En esta ventana tenemos varios campos: URL (4): Espacio donde se coloca la dirección destino. Título (5): Es el título del enlace. Es el texto que aparece sobre el enlace cuando colocamos el puntero del mouse sobre él. Abrir en ventana nueva (6): Si está seleccionado, al hacer clic en el enlace, el mismo se abre en otra ventana o pestaña: debemos tener en

índice

cuenta que de estar seleccionado se está forzando a que un vínculo se abra en una página diferente y rompa el flujo del botón Atrás. La nueva ventana no retiene el historial del navegador de la ventana previa, así que el botón “Atrás” está deshabilitado. Esto es increíblemente confuso, sobre todo para personas que utilizan herramientas asistivas, personas con baja visón o ciegas, etcétera. Buscar (7): Herramienta de búsqueda para cuando se quiere enlazar hacia una página, notica, documento, etcétera del sitio. Listado (8): Lista de todas las páginas, noticas, documentos, etcétera del sitio y espacio donde aparecerá el resultado de la búsqueda. Añadir enlace (9). Cancelar y cerrar la ventana (10). Finalmente el texto enlazado (11) quedará resaltado con un color, subrayado o algún otro elemento.

índice

Insertar Tabla Las tablas son una poderosa herramienta a la hora de mostrar y relacionar cierto tipo de información. Aún cuando muchos sitios son construidos (por su naturaleza) sin usar una simple tabla, existen algunas ocasiones en que el valor de las tablas se vuelve esencial. Para insertar una tabla sigamos los siguientes pasos:

1. Para insertar una tabla debemos hacer clic en el ícono correspondiente. 2. Debemos tener en cuenta es que la tabla se ubicará en el lugar donde está ubicado el cursor. 3. Haciendo clic sobre el dibujo del ícono pasamos directamente al punto 4 ya que se abre la ventana que vemos en la imagen; haciendo clic en la flecha se despliegan una serie de opciones útiles para la edición de la tabla (haciendo clic en mostrar guías veremos de qué trata cada una de esas opciones). 4. Ventana que debemos completar para insertar la tabla. 5. Propiedades Generales: No todos los campos son obligatorios; es decir, los únicos que deben estar completos son Columns (columnas) y Rowos (filas) (haciendo clic en mostrar guías veremos de qué trata cada una de esas opciones). 6. Propiedades Avanzadas: Haciendo clic en mostrar guías veremos de qué trata cada una de esas opciones. 7. Clic en “insertar”. 8. La tabla se inserta en el lugar determinado.

Las tablas NO fueron creadas.

NO fueron creadas para darle forma al diseño de una página web.

Así que se debe usar tablas SOLO para mostrar datos tabulares.

índice

Insertar un Video Para cuando se desea incluir un video en una entrada, noticia o página, se propone subir este a YouTube, y llamarlo desde ahí. Si no se esta familiarizado con subir un video a YouTube, recurrir a este manual: Subir videos. Incrustar vídeos de YouTube en entradas es sencillo y no cuenta con largas listas con etapas engorrosas a cumplir; es decir, se trata de 3 simples pasos: 1. Una vez subido el video o encontrado uno que necesite insertar, nos dirigimos a la barra de direcciones, seleccionamos y copiamos la url. 2. Vamos al editor y en el lugar donde queremos que se vea el video pegamos la url antes copiada. 3. Clic en actualizar o publicar. 4. El video se ubica en el lugar elegido.

índice

Pegar texto sin formato Cuando se pega contenido directamente de otra web, los resultados pueden ser inconsistentes y variables dependiendo del navegador y de la página desde la que se pegue. El editor intentará corregir los códigos HTML no válidos que se coloquen, pero para obtener un mejor resultado existen funciones que evitan correr determinados “riesgos”. En este sentido, usando los botones de pegar que hay en la segunda fila podemos insertar texto dependiendo del lugar donde se copió: Ø El primero de los 3 botones sirve para pegar sin formato, es decir, si el texto copiado contiene esa información que puede resultar inconsistente, cuando se pega usando esta herramienta, borra esos datos. Ø Si se pega contenido de otra aplicación, como Word o Excel, se hace mucho mejor con el botón “Pegar desde Word”. Ø Si se ha pegado un texto con un formato predefinido que no se va del modo predeterminado o deseado, con esta herramienta se puede borrar ese formato y dejar el texto plano. Para esto, debemos seleccionar la herramienta y pintar el texto que muestre este problema.

u u

Si quieres pegar contenido de otra aplicación, como Word o Excel, se hace mucho mejor con este botón: “Pegar desde Word”

u u u

Pegar texto sin formato o texto plano.

Si se ha pegado un texto con un formato predefinido, con esta herramienta se puede borrar ese formato y dejar el texto plano.

índice

Insertar una cita A las cosas hay que llamarlas por su nombre, por eso cuando citamos a alguien debemos evidenciar que es una cita, por lo tanto el texto que corresponde a esa referencia debe estar marcado como tal. Para eso existe la herramienta “cite”. En este sentido, cuando queremos señalar que un texto se trata de una cita o referencia, lo primero que debemos hacer es: • seleccionar ese texto (1), • luego nos dirigimos a la herramienta cita (2), ubicada en la parte superior de la barra de herramientas, • hacemos clic sobre el ícono (3), • inmediatamente el texto seleccionado cambiará su forma generando un margen a la izquierda y colocando la letra en cursiva (4). • En la web se verá también de forma visualmente destacada (5).

índice

Atajos de teclado Si sueles usar editores de texto, seguramente ya conozcas la mayoría de las combinaciones de teclas básicas. Así, en lugar de mover el ratón para hacer clic en la barra de herramientas, usas teclas de acceso rápido. Veamos una lista de teclas rápidas para atajos de teclado básicos y avanzados

Básicos:

Para Windows y Linux usa Ctrl+letra. En Macintosh usa Comando+letra. Letra c v x

Acción Copiar Pegar Cortar

b i u

Negrita Cursiva Subrayado

a z y

Seleccionar todo Deshacer Rehacer

a z y

Seleccionar todo Deshacer Rehacer

Número 1 2 3 4 5 6 9

Acción Título 1 Título 2 Título 3 Título 4 Título 5 Título 6 Dirección

índice

Avanzados: Los siguientes atajos utilizan claves de acceso diferentes: Alt + Shift + letra. Letra

Acción

d q n

Tachado Cita Comprobar ortografía

u o

Lista desordenada Lista ordenada

a s

Insertar enlace Borrar enlace

m p

Insertar imagen Insertar salto de página

índice

Administración y edición Existe toda una serie de configuraciones básicas de los sitios, desde cuestiones sobre la arquitectura web hasta la organización de los archivos subidos, pasando por la creación y administración de banners o editar el perfil propio. Así, en esta sección se encontrarán secciones que plantean guías, consejos y buenas prácticas en lo que refiere a la creación de menús y su administración, la creación de grupos de banners, el espacio de la librería multimedia, etcétera.

Administrar menús Los menús son el esqueleto del sitio, las rutas de navegación que debemos planificar y construir para que el usuario, a la hora de buscar algo específico o de recorrer el sitio, no se pierda y abandone el mismo ofuscado por la poca amabilidad del mismo. Al mismo tiempo, estos caminos deben ser sencillos y estables; es decir, no es aconsejable colocar más de 2 o 3 niveles de menús y es bueno no cambiar la estructura de menú muy seguido, es más, cuanto menos se cambie, mejor es. En este sentido, es preciso tener en cuenta que estos menús que veremos a continuación son de navegación interna; o sea, los vínculos son siempre a páginas del propio sitio, no son enlaces a páginas externas (para eso usamos banners) ni son vínculos a archivos (para eso usamos los enlaces en los cuerpos de paginas y noticias). Por lo tanto, los menús contienen enlaces a páginas. Ø Para crear un menú primero debemos heces clic en el vínculo “crea un nuevo menú”. Ø La ventana debajo (a la derecha) de este se recompone pidiéndonos en primer lugar el nombre del menú. Ø Luego debemos centrarnos en la estructura del mismo, entonces lo que debemos hacer es encontrar las páginas que lo compondrán en la caja expandible de la columna izquierda. Seleccionamos la o las páginas que integraran el menú en cuestión y luego hacemos clic en el botón “Añadir menú”. Ø Para crear submenús debemos arrastrar los bloques dentro de ”Estructura de menú” hacia la derecha. Ø Seguidamente debemos dirigirnos al final de esta pantalla y seleccionar la ubicación del menú (“Ubicación del tema”). esta selección es muy importante por que determina dónde se va a mostrar el menú. Los lugares disponibles son creados programáticamente, así que por cualquier duda comunicarse con el equipo de desarrolladores de la UCUR. Ø Finalmente clic en “Guardar menú”.

índice

Ficha: Editar menú

u u

u Ficha: Gestionar lugares. u Lista de menús ya creados.

u Botón para crear un nuevo menú. u

Selección de los ítem de menú. Pueden ser páginas, enlaces, categorías, formato...

u u

u Enumeración las páginas del sitio u

Luego de seleccionar las páginas que se incluirán en el menú, clic en “Añadir al menú”.

u Nombre del menú.

u u

Ítems de menú ya seleccionados y

u añadidos. u

Arrastrando los bloques, podemos cambiar el orden de los mismos así como crear submenús. Abriendo el menú se puede cambiar el

u nombre del ítem y el título. u

Cada menú está relacionado a un lugar, esos lugares ya fueron determinados programaticamente.

u No olvides guardar el menú.

Nota 1: El orden de las páginas dentro de la “Estructura del menú” los podemos cambiar simplemente arrastrando los bloques de arriba hacia abajo. Nota 2: Haciendo clic en la flecha de la derecha de los bloques, se despliegan una serie de opciones donde se puede cambiar el nombre del ítem y el título. Nota 3: en la pestaña “Gestionar lugares” podemos hacer lo mismo que en la sección de la ventana “Ubicación del tema” pero con la diferencia que se muestran todos los menús y lugares disponibles para insertarlos. Nota 4: Podemos eliminar el menú seleccionando “Eliminar menú”.

índice

Administrar banners Entendemos por banner a un botón o enlace en forma de botón que al seleccionarlo redirige al usuario a un sitio web previamente determinado. En este sentido, el uso del banner se reduce a enlaces a sitios externos al que estamos navegando. No usamos los banners para creer un vínculo interno en el sitio (para eso están los menús). Insertar y administrar banners consiste en una serie de pasos básicos: 1. Seleccionar en el panel de administración “Banners dinámicos”. 2. En la ventana que se despliega, seleccionamos “Agregar nuevo”. 3. De existir banners creados se listan en orden cronológico y plausibles de ser editados. Nota: Se agregará un conjunto de banners, aunque si es necesario se puede agregar uno sólo.

4. Se abre una nueva ventana (“Agregar nuevo ítem”) donde lo primero que nos pide es el título del grupo de banners.

índice

5. Nos pide el slug de este grupo de banners: slug (babosa en inglés) es un término adaptado del periodismo anglosajón y hace referencia al título del grupo de banners en el que se han sustituido los espacios en blanco por guiones y se han eliminado todos los caracteres que no sean letras o números. Este slug determinará en qué lugar se colocarán los banners de este grupo, los lugares disponibles son creados programáticamente, así que por cualquier duda comunicarse con el equipo de desarrolladores de la UCUR. 6. Luego debemos comenzar a crear los banners, se hacen de a uno a la vez. Comenzando en la zona de carga de la imagen del banner desde la PC (si la imagen del banner ya está en el sitio, pasar al punto 7). Para subir la imagen, primero colocarle un título y luego subir la imagen correspondiente desde el botón examinar. Para que la imagen suba se debe dar clic en publicar (aunque hasta no llegar al paso 9 los banners no se verán). 7. Si las imágenes a utilizar se encuentran en la librería del sitio, usamos el campo de búsqueda para encontrarlo. 8. Cuando las imágenes son seleccionadas y subidas aparecerán listadas donde se pueden eliminar de la selección, marcar como imagen fija, agregarle url, etcétera. Nota: la imagen que tenga seleccionada “marcar como imagen fija” no rotará y se mostrará siempre. Nota: Podremos colocarle una url, es decir un vínculo, sólo cuando en el paso 9 está seleccionado “habilitar enlaces en los banners”. 9. Seguidamente debemos configurar el área de banners donde debemos definir si los banners tendrán enlaces, el número de banners que se mostrarán (se trata de la cantidad de banenrs que se ven más allá de los que se hallan subido), si rotarán y el tamaño de los mismos. 10. Finalmente, clic en publicar.

índice

Librería Multimedia Todos los archivos subidos están listados en la Librería Multimedia, con las subidas más recientes listadas primero. Utilizando la pestaña de Opciones de Pantalla puedes personalizar la visualización de esta pantalla. Para reducir el listado se puede depurar por tipo o estado usando los filtros en la parte superior de la pantalla. Al mismo tiempo, se puede refinar la búsqueda por fecha usando el menú desplegable junto a la tabla de multimedia. Por otro lado, pasar con el puntero del mouse sobre una fila revela los enlaces de acción: Editar, Borrar Permanentemente y Ver. Haciendo clic en Editar o en los nombres de los archivos multimedia se mostrará una pantalla simple para editar los metadatos de ese archivo. Haciendo clic en Borrar Permanentemente se borrará el archivo de la librería multimedia, así como de todos los artículos en los que estuviera adjuntada. Ver te llevará a la página de visualización de ese archivo.

Menú rápido de acceso a editar el medio, eliminarlo o verlo. Este menú se abre cuando pasamos el puntero del mouse por encima del nombre del archivo o cuando el damos foco con el teclado.

Casilla para seleccionar el medio. Haciendo clic

u en la de arriba se seleccionan todos. u Previsualización del medio. u Estadísticas. Ordenar los medios por tipo de archivo y nombre, u autor, fecha, ubicación... u Nombre del archivo. u Cantidad de medios que existen en el sitio. u Buscador de Medios. u Fecha en que fue subido el archivo.

u u

índice

Accesibilidad y usabilidad La accesibilidad web tiene como objetivo lograr que los sitios web sean utilizables por el máximo número de personas, independientemente de sus conocimientos o capacidades personales e independientemente de las características técnicas del equipo utilizado para acceder a la Web. La necesidad de que la Web sea universal y accesible por cualquier persona está presente desde el principio de la Web, ya que era un requisito contemplado en su diseño por su creador Tim Berners-Lee: “El poder de la Web está en su universalidad. El acceso por cualquier persona, independientemente de la discapacidad que presente es un aspecto esencial.” Tim Berners-Lee, Director del W3C e inventor de la World Wide Web.

Por qué Accesibilidad No todos los usuarios acceden a la Web con los mismos medios técnicos y no todos percibimos los contenidos de la misma forma.

Las personas con discapacidades motoras que no pueden sostener un periódico o girar sus páginas pueden tener acceso a medios informativos en línea, usando ciertas ayudas técnicas que adaptan la interfaz del ordenador a sus discapacidades. Algunas veces las adaptaciones son simples, como que la persona se coloque un palo en la boca y lo utilice para manejar el teclado. En otros casos, las adaptaciones son más sofisticadas, como en el uso de teclados especiales o software de seguimiento del ojo (eye-tracking) que permite a la gente a usar un ordenador con simplemente el movimiento de los ojos. Las personas sordas siempre han tenido la posibilidad de leer los periódicos por su cuenta, por lo que puede parecer que Internet no ofrece el mismo tipo de emancipación que para los que son ciegos o para aquellos con discapacidades motoras, pero pueden leer en línea transcripciones de discursos importantes o ver el contenido multimedia que ha sido totalmente subtitulado. Muchas personas con discapacidades cognitivas también se pueden beneficiar en gran medida de la estructura y la flexibilidad de los contenidos web. En este sentido, las personas con diferentes tipos de discapacidad pueden experimentar dificultades para utilizar la web debido a la combinación de barreras en la información de las páginas, con las barreras de las “aplicaciones de usuario” ( navegadores, dispositivos multimedia o ayudas técnicas). Estas pautas tienen relación específicamente con la reducción de barreras en las páginas web.

índice

Entonces, con el fin de que quienes están encargados de subir información a la web y administrar sitios, y los desarrolladores web sepan cómo diseñar y construir sitios web accesibles, diferentes conjuntos de pautas o guías de accesibilidad han sido desarrolladas por diversos organismos. En la actualidad, las pautas más importantes son las pautas de accesibilidad al contenido web desarrolladas por el W3C (WCAG 1.0 y WCAG 2.0) El equipo de la Unidad de Comunicación de la Universidad de la república (UCUR) promueve la accesibilidad universal en todos sus desarrollos y propone a los administradores de los sitios se incorporen a esta iniciativa. Para esto, desde la unidad se han desarrollado una serie de pautas (basadas estrictamente en las de la W3C - WCAG 1.0 y WCAG 2.0 ) que cumplen con los estándares de accesibilidad y por lo tanto garantizarán que el contenido pueda ser accedido por TODOS los que quieran. Por más información:

World Wide Web Consortium (W3C) Pautas de Accesibilidad de Contenido Web 2.0 Introducción a Comprender las WCAG 2.0 (“Web Content Accessibility Guidelines”) Estándares especificaciones técnicas y directrices Accesibilidad Web - Universidad de Alicante Accesibilidad en la Web: El camino para construir sitios accesibles

Mitos sobre la accesibilidad Fomentado por una falta de información, desde el comienzo de la accesibilidad web existen una serie de mitos sobre este tema que en muchos casos persisten. Ø El mito principal es creer que la accesibilidad de un sitio web se resuelve creando una versión alternativa de “sólo texto”, sin imágenes ni colores y que, por tanto, si quieres tener una única versión de un sitio web y que sea accesible, tendremos que renunciar al empleo de imágenes y colores y el sitio web será “feo y aburrido”. Este argumento es totalmente falso. Ø Del mismo modo, otro mito gira en torno a la creencia en que los sitios web accesibles matan la creatividad. Trabajar en función de una web accesible no limita en ninguna forma el espacio para las ideas nuevas. Ø Otro mito dice que las personas con discapacidad no utilizan la Web. Es exactamente lo contrario, ya que las nuevas tecnologías e Internet ha permitido a un gran número de personas con discapacidad llevar una vida autónoma e independiente. Ø Por otro lado, se dice que las páginas web con solo texto son accesibles: falso. Las páginas web que sólo contienen texto pueden ser

índice difíciles de entender por personas con discapacidad cognitiva o con dificultades con el lenguaje como las personas sordomudas. 36

Ø En este sentido, otro mito dice que la accesibilidad es sólo para ciegos. Es falso ya que existen usuarios con diferentes tipos de discapacidad que pueden experimentar distintos problemas de acceso y uso del contenido de las páginas web. Ø La accesibilidad es cara y costosa: falso. Evidentemente, el proceso de aprendizaje y la posterior adaptación a los sitios web ya existentes suponen un coste, pero igual que aprender una nueva tecnología y adaptar los sitios web a la nueva tecnología. Ø Finalmente, la accesibilidad es sólo para las personas con discapacidad: totalmente falso. Aunque las personas con discapacidad pueden ser los usuarios que más se beneficien al aplicar la accesibilidad web, en realidad se beneficia todo el mundo, ya que también ayuda a cualquier usuario que se encuentre en circunstancias especiales como puede ser entornos con baja iluminación, ambientes ruidosos, acceso a Internet con conexiones y equipos con capacidades limitadas, etcétera. En muchas situaciones no se crean sitios web debido a estos mitos. Sin embargo, en muchas otras situaciones es simplemente por un rechazo directo y frontal o por negarse a aprender a hacer las cosas de forma diferente a la que las hacen.

Uso de imágenes

Veamos 3 cuestiones fundamentales a tener en cuenta:

Ø Los contenidos no textuales (Cualquier contenido que no está formado por una secuencia de caracteres) deben tener alternativas en texto que comuniquen el propósito que tienen esos elementos no-textuales: ejemplo, imágenes, vídeos, flashs. Se trata del texto alternativo de una imagen (atributo alt). El atributo alt se emplea para proporcionar un texto alternativo que sustituya a una imagen en aquellos casos que la imagen no pueda ser empleada por ciertos usuarios, como por ejemplo los usuarios ciegos que utilizan un lector de pantallas. Se recomienda que el texto alternativo no supere los 100 caracteres y que no contenga información compleja como tablas o listas.

Ø Imágenes de texto: hace años, era muy normal encontrar páginas web donde el texto se ponía en imágenes, porque por aquel entonces no se disponía de la tecnología necesaria para modificar la tipografía del texto al gusto del diseñador. En este sentido, usar texto en imágenes, más allá de usar texto alternativo, es un gran error, ya que ocasionaría muchos problemas de accesibilidad y usabilidad. Existen excepciones como son los logos, afiches o casos donde el administrador considere que no existe otra posibilidad; siempre colocando el texto alternativo correspondiente.

índice

Ø La presentación visual del texto y las imágenes de texto tienen una relación de contraste de al menos 4.5:1, es decir, deben presentar un contraste “correcto”. deben tener un tamaño prudente para el espacio destinado en el diseño de la página.

Audio y video Veamos 5 cuestiones fundamentales a tener en cuenta:

Ø Complementando multimedia: cuando se colocan audios y videos es buena práctica colocar una alternativa textual a ellos; se trata de un documento de texto que presenta la transcripción del diálogo y todo sonido de fondo relevante a la información comunicada. Se insertará un enlace a dicho documento en inmediatamente después del reproductor. Al mismo tiempo, es recomendable colocar antes de cada contenido multimedia una introducción a este, explicando que es audio o video y haciendo una pequeña descripción del mismo. Ø Problemas con flash: para que un sitio cumpla condiciones básicas de accesibilidad debe poder ser navegado sólo con el teclado, utilizando lo que se llama el foco del teclado. En este sentido, las presentaciones en formato flash generan las llamadas trampa de teclado; es decir, cuando el foco cae dentro del flash no sale más, imposibilitando la navegación. Entonces, se recomienda evitar el uso del flash o, en caso que sea necesario usarlo, introducirlo aclarando esa cuestión.

Ø Pausar videos: para cualquier información que se mueva, parpadee o se desplace, y que comience automáticamente, dure más de cinco segundos, y se presente paralelamente a otro contenido, existe un mecanismo que permite al usuario pausar, detener u ocultar la información, a menos que ese movimiento, parpadeo o desplazamiento sea esencial para la actividad. Igualmente, no es recomendable que videos, audios, etcétera comiencen automáticamente (existen excepciones como los slides, siempre que tengan la posibilidad de pausa) Ø 3 destellos sobre el umbral: las páginas web no contienen nada que destelle más de tres veces en cualquier periodo de un segundo, o el destello está por debajo de los umbrales de destello general y de destello rojo. (Nivel A) Este criterio se orienta a un tipo particular de epilepsia, que la epilepsia fotosensitiva. Ocasionada por parpadeos o destellos regularmente de la luz roja con frecuencia mayores a 5 por segundo. Sobre todo en videos. Si se duda de un video con este problema se puede testear con UW Trance Center Photosensitive Epilepsy Tool (PEAT). Software libre y descargable acá

índice

Estructura de encabezados Las páginas web, desde un punto de vista programático, conceptual y visual (para el usuario) deben mantener una estructura lógica para transmitir un orden jerárquico en la estructura del documento. Ese es el caso de los encabezados, cuando ingresamos título y subtítulos, debemos evidenciar y respetar el orden jerárquico de estos. Para esto usamos en el editor de textos el menú formato, donde seleccionaremos “título 1” a “título 6” dependiendo de su estructura.

u 2 u 3 u 4 u 5 u 1

Este título es siempre “Título 1” ya que está configurado programáticamente para que así sea.

1 u 2 u

Estructura de la entrada.

3 u

Seleccionamos/Pintamos el título. En el menú desplegable seleccionamos “Título 2” Inmediatamente cambia el formato.

Notas:

4 u

Ø nunca deberá aparecer “título 2” antes que “título 1”. Ø se debe mantener el orden consecutivo. Ø no se puede pasar de “título 1” a “título 6” y viceversa Ø debe existir contenido textual entre encabezados consecutivos (“título 1” a “título 6”) del mismo nivel, entre encabezados consecutivos (“título 1” a “título 6”) cuando el segundo sea de mayor nivel que el primero; y entre el último encabezado y el final de página.

5 u

índice

Navegación Veamos 3 cuestiones fundamentales a tener en cuenta:

Ø Términos espaciales: no referirse a la navegación en la página con términos espaciales, como por ejemplo: “el menú de la derecha”, “abajo”. En ese sentido, no debemos hacer referencia a un mecanismo de interacción para la activación de los mismos. Por ejemplo, “hacer clic aquí”. Ø Medios visuales: el color no se emplea como el único medio visual para transmitir una información, indicar una acción, provocar una respuesta o distinguir visualmente un elemento; es decir, la referencia al color no debe ser la única indicación para cumplir con cierto objetivo o para proponer interactuar con los elementos de una página. Ø Propósito de un vínculo (en su contexto): el propósito de cada vínculo puede determinarse con el texto del vínculo descontextualizado, excepto donde el propósito del vínculo puede ser ambiguo para los usuarios en general; es decir, cuando leemos el texto de un enlace deberíamos tener una idea del lugar al que nos está llevando ese link. En este sentido, cuando agregamos un enlace, debemos colocarle un título que evidencie el destino del enlace o la razón del mismo en no más de 100 caracteres.

Buenas formas Existen normas de convencía que no son leyes, que no están escritas… son formas voluntarias de actuar establecidas y aceptadas por la mayoría. La web también tiene estas normas: la Netiqueta (Netiquetate - Netiqueta) facilita la connivencia en la red. Internet es un medio de comunicación, el más extendido y en constante proyección, un poderoso medio de edición y de relación interpersonal, una herramienta de trabajo grupal, y un medio de comunicación de masas. Como tal, existe la necesidad sobre la creación de requerimientos que regulen la comunicación y su lenguaje, como los tienen otros medios. Pensemos en los libros de estilo en la prensa escrita o audiovisual, o con carácter más general pensemos en la sintaxis, la ortografía, etcétera para los medios escritos y hablados. Pero además, Internet, por su carácter, tiene necesidades de regular la comunicación interindivudal y grupal, derivadas no del hecho de ser un fenómeno en la comunicación sino de su propia naturaleza, de sus rasgos tecnológicos y de la especificidad con que se realiza la comunicación sea ésta la que sea. Estas necesidades, simplificando mucho, se han agrupado en algunas recomendaciones de “buen uso” basadas en manuales de Netiqueta o convenciones sobre Las buenas maneras en Internet.

índice

Crear PDFs accesibles 40

Un fichero PDF no es simplemente lo que vemos en pantalla, sino que detrás del documento existe una estructura lógica que incluye etiquetas similares a las html, el correcto uso de estas etiquetas, en ambos casos, permite que, por ejemplo, a la hora de utilizar un lector de pantalla o cualquier herramienta asistida, éste leerá el documento respetando sus etiquetas y evidenciando cuando se encuentra con un título, con una cita, con una lista, etcétera. Nota: guía para la creación de documentos PDFs accesibles a partir de un procesador de texto.

Uso de tablas

Cuando tenemos datos tabulares a mostrar debemos presentarlos en una tabla. Esta no sólo constará de filas y columnas, sino que también deberá colocarse anteriormente una descripción de la misma y, de ser compleja, una pequeña guía o manual de cómo se lee. Asimismo, cuando se crea la misma, en la herramienta de edición debemos recordar ponerle un título. Por otro lado, es importante recordar que las tablas no se usan con fines de maquetación o estructuración de la web; es decir, no son usadas para darle forma al diseño de una página web.

Web semántica

Cuando se ingresa un texto se colocan citas, listas ordenadas, listas desordenadas, etcétera. Entonces, para respetar los principios de una web semántica, cada vez que colocamos una lista, una cita, etcétera, debemos colocarlo como tal; es decir, si es una cita usar el ícono que corresponde (ver Editar textos/Insertar una cita), lo mismo con las listas.

Otros idiomas

Cuando es necesario ingresar texto en otro idioma, o graficas, imágenes, adjuntos que estén en un idioma que no sea el español, debemos aclararlo en un texto o introducción previo.

índice

Abrir en ventana nueva 41

La única cosa que podemos decir todos los usuarios de Internet entienden a plenitud es el botón “Atrás”. Es parte integral de la navegación: sigue un vínculo, vuelve atrás; explora el resultado de un buscador, vuelve atrás. Entonces, cada una las páginas internas del sitio debe permitir al usuario navegar hacia cualquier otra ubicación y regresar a pasos previos con el botón de “Atrás”. Para esto es aconsejable evitar “abrir en ventana nueva” ya que al hacerlo así, no se podrá usar el botón atrás; al mismo tiempo, una persona con problemas de visión no notará que se abre una nueva ventana y para ellos es fundamental el botón “Atrás”. Tomemos en cuenta que si alguien quiere abrir algo en una nueva ventana lo hará por su cuenta, no es aconsejable obligarlo a eso. Si es necesario que el vínculo abra en una nueva ventana, evidéncielo en el texto del enlace o en un párrafo previo.

Ventanas emergentes

En la misma línea que “abrir en ventana nueva”, esta forma de proceder desconcierta a muchos usuarios. Las personas que no ven su pantalla y están navegando mediante un lector de pantalla o navegador por voz no saben que acaban de abrir una nueva ventana y si tratan de regresar, mediante el botón “Atrás” de su navegador, descubren que han perdido el hilo de su navegación y lo deberán encontrar entre las páginas abiertas en su ordenador. También las personas con problemas cognitivos o aquellas que tienen poco hábito de navegar por la Web pueden encontrar sorprendente que no puedan regresar a la página de origen que les llevó a la página que visualizan en ese momento.

Uso de las mayúsculas sostenidas

Muchos piensan que la mejor manera de hacer sobresalir un párrafo, o una palabra en su contenido escrito es usar las mayúsculas sostenidas, que según estos, podrían darle una mayor importancia a “esa” palabra. La realidad es que se equivocan, en la Web (y por lo general en cualquier medio) la lectura, si se utiliza esta mal llamada “estrategia”, dificulta la comprensión del texto para el visitante. Asimismo, las normas de “etiqueta” de la web indican que el uso de mayúsculas tiene como significado “GRITAR LO QUE UNO DICE”, enfatizando el mensaje, el uso de minúsculas significa una charla normal. En este sentido, en el caso de los títulos, si se quiere usar mayúsculas sostenidas, se deberá llegar al un conceso entre todos los administradores del sitio en el cual todos se comprometen a crear todos los títulos con mayúsculas sostenidas.

índice

Texto justificado 42

El texto justificado se utiliza en libros, boletines, periódicos y revistas en papel, para crear un ritmo horizontal que guía a los ojos por la página. Pero una buena justificación requiere una cuidada elección de elementos que ofrecen las herramientas profesionales con las que se crean estas publicaciones: tipo y tamaño de letra, ancho de la página, longitud del bloque de texto, separación de sílabas, idioma, el propio texto del contenido, etcétera. Desafortunadamente, en una página web no se puede controlar ninguno de estos elementos, por lo que las justificaciones de texto rara vez están justificadas, ya que es más fácil que el resultado sea peor de lo esperado. Los navegadores no están preparados para justificar textos, no pueden partir palabras y crean unos ríos de espacios en blanco (efecto conocido como “rivers of white”). Aquí no hablamos sólo de razones estéticas, sino de accesibilidad. En este sentido, la mayoría de los usuarios con dificultades de lectura, encuentran problemas con el texto justificado. El irregular espacio en blanco que se produce entre palabras, causa los mencionados ‘ríos de espacios blancos’ hacia abajo, provocando una lectura difícil y en algunos casos imposible para algunos lectores. Igualmente, un estudio realizado por la Universidad del Estado de Wichita (EE.UU.) sobre dos grupos de usuarios a los que se dio a leer un texto por pantalla justificado a ambos lados, y otro justificado sólo a la izquierda; demostró que la justificación de texto a ambos lados dificultaba la lectura en la mayoría de los casos.

Menús desmenuzados

Una óptima arquitectura web logra un buen posicionamiento y generan visitas, algo fundamental para cualquier página web. En este sentido, cuanto más sencilla sea la navegación, más fácil va a ser para el usuario y, por lo tanto, se generará más fidelidad con la web. Así, existen una serie de buenas formas para tomar en cuenta a la hora de construí, por ejemplo, un menú: Ø no saturar los menús con innumerables opciones. Ø no generar menús con más de 2 o 3 niveles. Ø no variar la estructura del menú de forma seguida. En definitiva, se trata de generar menús simples, lo más estáticos posibles, amigables y que faciliten la exploración más que la compliquen; recordemos que, fundamentalmente, los menús son el esqueleto de los sitios. Dependiendo del contenido y la información, Limite la navegación de su web a 6 y 8 páginas como mucho. Mantenga una navegación constante. No fuerce a los visitantes a aprender diversos caminos o esquemas para la navegación en diversas partes de su sitio.

índice

Cómo se lee 43

Las páginas web fáciles de leer juegan un papel importante para conseguir la lealtad de los visitantes, para mantenerlos en tu sitio y para leer tus contenidos. Las pruebas de usabilidad del diseño web muestran que la mayoría de los usuarios no leen las páginas web, las “exploran” buscando los títulos, negritas, textos resaltados o listas. Los estudios de seguimiento del ojo realizados por Jakob Nielsen, muestran que los usuarios leen el contenido de un diseño web en una forma semejante a la “F”, lo que significa que inician la lectura en la parte superior izquierda de la página web, se mueven un poco de lado hacia abajo, y terminan del lado izquierda nuevamente y señala las implicaciones de este patrón de lectura: Ø Los usuarios no leen el contenido de una página web palabra por palabra, ellos van a extraer los párrafos importantes, el texto en negrita, etcétera. Ø Los dos primeros párrafos son esenciales en una página web y deben contener la información más importante que tus visitantes están buscando. Ø Los subtítulos y las listas se destacan de los párrafos normales. Utilízalos para notificarle a los usuarios la información más importante.

Animaciones

No abuse de la utilización de la animación, esto puede abrumar y cansar a la vista. En este sentido, debemos permitir al usuario detener o pausar las animaciones. Las animaciones pueden retrasar la carga de la página; a los que utilizamos Internet de manera habitual no nos gusta esperar por una página web, a no ser que por la razón que sea nos interese muchísimo acceder a su información. Lo habitual es que nos vayamos pulsando el botón “Atrás” de nuestro navegador (y es un hecho demostrado). Si hay que escoger entre una web cargada de imágenes grandes, animaciones flash, efectos visuales, etcétera. y una web más sobria y con menos ornamentos: el consejo es buscar un equilibrio razonable.

Manténgalo actualizado

La manera más rápida para que un web pierda credibilidad es contener información anticuada o desfasada. Del mismo modo, cuando el usuario accede a información incompleta tiende a abandonar el sitio, es por eso que si una sección no está completa, no la publiques.

índice

Escribir para la web 44

Escribir para web no es lo mismo que para otros soportes, los textos largos no son bienvenidos, por eso se recomienda que, en la medida de lo posible, los textos sean lo más concisos posible, y si no se puede, crear introducciones a estos. Al mismo tiempo, las listas y las tablas con bulleted o numeradas se pueden hojear mucho más rápidamente que si alineamos el texto tradicional. En la misma línea, atomizar el texto en secciones con subtítulos dándole una estructura lógica al documento dinamiza y facilita la lectura. Es importante lo que se haga para mejorar la accesibilidad del texto identificando los elementos ya que, por ejemplo, los navegadores de voz exploran el Web buscando títulos y referencias para ayudar al usuario a orientarse y a ganar una sinopsis del contenido de la página. Otra ayuda a la accesibilidad es utilizar texto en vez de imágenes donde sea posible.

índice

Glosario En este glosario encontrarás definiciones de algunos términos técnicos y no tanto, lo más sencillas que resulte humanamente posible, tanto de lo que refiere a la administración de tu sitio como de la navegación en la Web. Si consideras que este glosario debería ampliarse con determinados conceptos, no dudes en comunicarte y hacernos llegar la propuesta. Navega por…

U V W

índice glosario

A Accesibilidad

La accesibilidad o accesibilidad universal es el grado en el que todas las personas pueden utilizar un objeto, visitar un lugar o acceder a un servicio, independientemente de sus capacidades técnicas, cognitivas o físicas. Es indispensable e imprescindible, ya que se trata de una condición necesaria para la participación de todas las personas independientemente de las posibles limitaciones funcionales que puedan tener. Mas información: Accesibilidad

Accesibilidad web

En la actualidad, no existe una definición formal y totalmente aceptada del concepto de accesibilidad web, igualmente podemos acercarnos a una definición definitiva diciendo que la accesibilidad web tiene como objetivo lograr que las páginas web sean utilizables por el máximo número de personas, independientemente de sus conocimientos o capacidades personales e independientemente de las características técnicas del equipo utilizado para acceder a la Web. Mas información: Ø Accesibilidad Web - Universidad de Alicante Ø Accesibilidad Web - Agesic Ø Web Accessibility Initiative - WAI (en inglés) Ø Accesibilidad Web

Alt

El atributo alt proporciona información alternativa para una imagen u objeto si un usuario por alguna razón no puede verlo (a causa de conexión lenta, un error en el atributo src, o si el usuario utiliza una herramienta asistiva). Es conocido también como el texto alternativo de un objeto.

Arquitectura web

Se utiliza el término Arquitectura web para definir un área que se especializa en el desarrollo y aplicación de conocimientos técnicos de

índice glosario

construcción, funciónales y de diseño para sitios o páginas web. En este sentido, trabaja en torno a la estructura de la web, la organización de la información, el esqueleto del sitio, en definitiva, la arquitectura de la información.

Audiovisual

El concepto audiovisual significa la integración e interrelación plena entre lo auditivo y lo visual para producir una nueva realidad o lenguaje. La percepción es simultánea. Se crean así nuevas realidades sensoriales mediante mecanismos como la armonía (a cada sonido le corresponde una imagen), complementariedad (lo que no aporta lo visual lo aporta lo auditivo), refuerzo (se refuerzan los significados entre sí) y contraste (el significado nace del contraste entre ambos).

índice glosario

B Banner

Un Banner es un gráfico, generalmente usado para incluir una pieza publicitaria o un enlace externo dentro de una página web. En efecto, la característica principal de los banners es que nos redirigen a otros sitios. También se le llama banners a las imágenes que en distintos sitios se usan como encabezados o simplemente tienen el objetivo de llamar la atención, resaltar notorios y comunicar un mensaje deseado.

Borrador

Uno de los estados de publicación de una entrada que, en vez de publicarla en el momento prefieres dejar para mejorar o ampliar más adelante.

Breadcrumbs, Migas de pan o Guía de navegación

Es una guía en texto y enlaces que indica dónde te encuentras de acuerdo a la distribución del contenido en la web. En los sitios diseñados por la UCUR, las breadcrumbs se encuentran en la parte superior del sitio.

índice glosario

C Caption

Closed Caption (abreviado CC, subtitulado oculto o subtitulado no incrustado1 ) es el nombre en inglés del sistema de tipo subtítulo de programas de televisión y video destinado a permitir que las personas sordas o con dificultades para captar la señal de audio, puedan comprender lo que se dice. La diferencia, el subtítulo se utiliza para entender otro idioma y el Closed Caption describen los diálogos en el mismo idioma, además incluyendo música de fondo y efectos de sonido mediante palabras y símbolos. No sólo lo usan personas con problemas de audición, sino también personas que están aprendiendo un idioma, que están en un entorno demasiado ruidoso como para oír el programa o en lugares donde es conveniente que haya silencio.

CMS

Acrónimo de la palabra en inglés “Content Management System” que, en español significaría “Sistema de Gestión de Contenidos“. También nos podemos referir a él como SGC. En definitiva, es un software que permite administrar una página web de manera sencilla, gestionando por áreas las distintas funcionalidades de la misma: contenidos, diseño, utilidades, administración, usuarios, etcétera. Lista de sistemas de gestión de contenidos (en inglés).

Contenido no textual Cualquier contenido que no está formado por una secuencia de caracteres que puede ser determinado por software o donde la secuencia no expresa nada en ningún idioma. Esto incluye el arte ASCII (que es un patrón de caracteres), los emoticones, imágenes que representan texto, mapas de imagen, animaciones (Por ejemplo, GIFs animados), “applets” y objetos programados, marcos, scripts, imágenes usadas como viñetas en las listas, espaciadores, botones gráficos, sonidos (ejecutados con o sin interacción del usuario), archivos exclusivamente auditivos, banda sonora del vídeo y vídeos. Recordemos que a este tipo de contenido Siempre se debe proveer una alternativa textual, por ejemplo, a través del atributo “alt”, en una descripción previa o en el contenido del elemento.

Contraste

El contraste se define como la diferencia relativa en la intensidad entre un punto de una imagen y sus alrededores. Un ejemplo sim-

índice glosario

ple es el contraste entre un objeto de brillo constante sobre un fondo de un brillo constante. Si ambas superficies tienen el mismo brillo, el contraste será nulo y si el conjunto está en tonos de gris, el objeto será tanto física como perceptiblemente indistinguible del fondo. Según se incrementa la diferencia en brillo el objeto será perceptiblemente distinguible del fondo una vez alcanzado el umbral de contraste, que se sitúa alrededor del 0,3 % de diferencia.

Descarga aquí el Colour Contrast Analyser 2.2 for Web Pages (Licencia Creative Commons), herramienta para el control de las combinaciones de primer plano y color de fondo para determinar si ofrecen una buena visibilidad de color. También contiene la funcionalidad para crear simulaciones de ciertas condiciones visuales como la ceguera al color.

índice glosario

D Datos tabulares

Son datos presentados en recopilaciones bien estructuradas y fáciles de interpretar, de las que nos valemos para sintetizar la información obtenida con el fin de hacer un uso sencillo de ella o bien para darla a conocer de forma comprensible. Es una ordenación de datos, los cuales se representan en una tabla, en donde se colocan las variables de acuerdo a intervalos por medio de los cuales se analizan los datos.

Descripción de imagen

Utilizada en la subida de imágenes, se usa en el caso que se quiera dar una descripción más extensa y detallada que la que se da con el atributo “alt” de la imagen. Lo ideal sería que de alguna manera se presentase información en este campo con metadatos como puede ser el autor de la imagen, ubicación, etcétera.

Determinado programáticamente

Algo que ha sido determinado programáticamente es un elemento que se a creado, configurado o desarrollado por medio de programación.

Dominio

Un dominio de Internet es una red de identificación asociada a un grupo de dispositivos o equipos conectados a la red Internet. El propósito principal de los nombres de dominio en Internet y del sistema de nombres de dominio (DNS), es traducir las direcciones IP de cada nodo activo en la red, a términos memorizables y fáciles de encontrar. Esta abstracción hace posible que cualquier servicio (de red) pueda moverse de un lugar geográfico a otro en la red Internet, aún cuando el cambio implique que tendrá una dirección IP diferente. Sin la ayuda del sistema de nombres de dominio, los usuarios de Internet tendrían que acceder a cada servicio web utilizando la dirección IP del nodo (por ejemplo, sería necesario utilizar http://192.0.32.10 en vez de http://example.com). Además, reduciría el número de webs posibles, ya que actualmente es habitual que una misma dirección IP sea compartida por varios dominios.

índice glosario

E Enlace permanente

Es la URL que archivará un contenido y por el que se podrá acceder al mismo desde cualquier otra web. Pueden ser de varios tipos; semánticas, numéricas, feas, etcétera. También se le conoce como permalink.

Enlace

Los enlaces son también contenido, pues son texto que enlazan a una dirección web, por lo que son semánticamente completos.

Entrada

Es el modo en que en WordPress se denomina a las publicaciones, artículos, posts, noticias o como los quieras llamar. Es la base fundamental del contenido de los sitios.

Escritorio

La pantalla de inicio de la zona de administración del sitio, la primera que se accede nada más ingresar desde donde se puede empezar a crear, organizar, personalizar el sitio.

Etiquetas de plantilla

O en inglés “template tags“. Son funciones PHP que recuperan información de la base de datos MySQL para crear código resultante en HTML que se mostrará en tu web.

Metadatos

Son elementos relacionados con las entradas, que ofrecen información relativa a las mismas, como por ejemplo el autor, la fecha en que se publicó, etc. La mayoría de los temas WordPress muestran metadatos de entrada antes o después del loop.

Extracto – resumen

Parte de contenido que puedes elegir mostrar en el loop en vez del contenido completo de una entrada o página.

índice glosario

F Flash

Es un formato de archivo de gráficos vectoriales que también incorporan audio y vídeo (en diferentes formatos Flash Video) y multitud de formas diferentes de interacción con el usuario, creado por la empresa Macromedia (actualmente Adobe Systems). Si bien es muy popular, el flash es altamente cuestionado, entre las principales críticas destacamos: • Es un software 100% propietario, es decir, cerrado a los aportes de terceros. • Hay un formato más moderno, H.264. • Tiene un antiguo historial de problemas de seguridad no resueltos. • Requiere decodificación por hardware, lo que puede aumentar hasta en un 100% el uso de la batería de dispositivos móviles. • Descuida cuestiones básicas de accesibilidad y usabilidad.

FTP

Acrónimo de “File Transfer Protocol” o “Protocolo de transferencia de ficheros“. Es un protocolo de red utilizado para transferir archivos desde tu ordenador a un servidor web. Es el método habitual para subir archivos a tu alojamiento, instalar WordPress, etcétera. El proceso se realiza con software especializado, llamados “Clientes FTP“, muy similares al Explorador de Windows o el Finder de Mac OSX, en los que dispones de ventanas donde se muestran tus carpetas y las del servidor remoto, pudiendo “arrastrar y soltar” archivos de un sitio a otro.

índice glosario

G Galería

Las galerías de archivos son una gran manera de compartir fotos, documentos, audios, etcétera con los usuarios. En una galería se mostrará una serie de pequeñas imágenes y archivos adjuntos en una determinada entrada o en una página. Los lectores pueden hacer usar un carrusel que les permite desplazarse a través de la galería, abrir las imágenes en tamaño completo o descargar los documentos disponibles.

GPL

Licencia Pública General de GNU o más conocida por su nombre en inglés GNU General Public License (o simplemente sus siglas del inglés GNU GPL) es la licencia más ampliamente usada1 en el mundo del software y garantiza a los usuarios finales (personas, organizaciones, compañías) la libertad de usar, estudiar, compartir (copiar) y modificar el software. Su propósito es declarar que el software cubierto por esta licencia es software libre y protegerlo de intentos de apropiación que restrinjan esas libertades a los usuarios. Mas información: • Varias licencias y comentarios acerca de las mismas • The GNU General Public License (en inglés) • Creative Commons (en inglés) • Software libre

índice glosario

H Herramientas asistivas

Para poder llevar a cabo algunas tareas, las Personas en situación de Discapacidad pueden recurrir a Tecnologías Asistivas, las cuales corresponden a todo tipo de objetos, equipos, sistemas, máquinas, herramientas, productos, instrumentos, programas y/o servicios que puede ser usado para aumentar, mantener, compensar, mejorar o reemplazar las capacidades funcionales de personas con alguna dificultad en su desempeño o Discapacidad (de cualquier tipo). Más información: • Tecnologías asistivas y estrategias adaptativas

Hipertexto

Una o varias palabras de un texto que se presentan en forma de enlace y al hacer clic en ella(s) te llevan a otra página web donde puedes encontrar información complementaria. Estas palabras a menudo aparecen subrayadas, muchas veces en color azul, pero siempre en un color diferente al resto del texto.

Hoja de estilos

Archivo denominado style.css, donde usando el lenguaje de programación CSS se definen los estilos visuales del tema elegido. Los sitios tienen al meno 1 hoja de estilos.

HTML

Es la sigla del nombre del “idioma” que se utiliza para crear páginas web y otro tipo de publicaciones en Internet (como blogs, comentarios en foros, etc.) El nombre de este lenguaje es “Lenguaje de Etiquetado de Hipertexto”, que en inglés es HyperText Markup Language, de ahí la sigla. El HTML funciona en base a instrucciones en un código especial compuesto por las llamdas “tags” (etiquetas) que se le da al navegador y éste, al interpretar estas instrucciones, presenta al lector la página web como la vemos normalmente.

índice glosario

I Imagen de texto

El texto que ha sido presentado en forma no textual (por ejemplo, una imagen) para conseguir un efecto visual determinado. Esto no incluye el texto que forma parte de una imagen que contiene otros elementos visuales significativos. Por ejemplo: La etiqueta con el nombre de la persona que aparece en una fotografía.

Imagen destacada

Una imagen destacada es la foto de inicio de algunas de la entradas o paginas, al mismo tiempo, es una imagen en miniatura que normalmente se usa en paginas que visualizan listas de entradas.

Internet

Es una red mundial compuesta por cientos de miles de redes que interconectan millones de computadoras mediante procedimientos llamados protocolos. Contrario a lo que se piensa comúnmente, Internet no es sinónimo de World Wide Web, también llamada “la Web”. La World Wide Web (un sistema de publicación y navegación de documentos y páginas web) es uno de los muchos servicios que ofrece Internet, como el correo electrónico, los boletines electrónicos, las conversaciones en línea, la mensajería instantánea, e incluso los juegos en línea. El término Internet viene del inglés interconnected networks: redes interconectadas.

índice glosario

J Jakob Nielsen

“El rey de la Usabilidad”, Jakob Nielsen es asociado con el término de Usabilidad en la web, tiene un Ph.D en la carrera de Interacción de los humanos y las computadoras, escribió el libro Homepage Usability en el cual realiza críticas de la usabilidad y diseño de 50 páginas web, es fundador de Nielsen Norman Group y ha sido nombrado como el rey y guru de la usabilidad. Más información: • Jakob Nielsen • Jakob Nielsen “El rey de la Usabilidad”

índice glosario

L Leyenda de imagen

Una leyenda es un texto conciso, breve y descriptivo ubicado debajo o al lado de una fotografía que se usa a manera de etiqueta, título o explicación de la imagen que aparece en la misma. A menudo, una leyenda incluirá fechas, nombres, títulos, ubicaciones e información acerca de la ocasión o la importancia de la imagen.

Link

Es una herramienta de navegación que permite a un usuario ir de una locación web a otro haciendo clic sobre él. Generalmente están subrayados o aparecen con otro color.

índice glosario

M Menú de navegación

Los menús de navegación son elemento esencial en un sitio web. De su buen diseño y organización dependerá en buena medida que nuestros visitantes encuentren fácilmente la información que buscan en nuestro sitio y que tengan una buena experiencia como usuarios. En este sentido, a través de un menú de navegación se estructuran las diferentes subpáginas de un sitio. Los menús se organizan siguiendo el principio de los árboles, esto quiere decir que un menú puede tener menús hijos y menús padres.

Metadatos

Son datos que describen otros datos. En general, un grupo de metadatos se refiere a un grupo de datos, llamado recurso. El concepto de metadatos es análogo al uso de índices para localizar objetos en vez de datos. Por ejemplo, en una biblioteca se usan fichas que especifican autores, títulos, casas editoriales y lugares para buscar libros. Así, los metadatos ayudan a ubicar datos. Para varios campos de la informática, como la recuperación de información o la web semántica, los metadatos en etiquetas son un enfoque importante para construir un puente sobre el intervalo semántico.

También hay muchas otras definiciones como «informaciones sobre datos», «datos sobre informaciones», «informaciones sobre informaciones», «descripciones estructuradas y opcionales que están disponibles de forma pública para ayudar a localizar objetos» o «datos estructurados y codificados que describen características de instancias conteniendo informaciones para ayudar a identificar, descubrir, valorar y administrar las instancias descritas».

Motor de búsqueda

También llamado “buscador”, es una inmensa base de datos con información sobre el contenido de los sitios que integran la web. Por ejemplo, el buscador más popular actualmente, Google, tiene información sobre más de 3 mil millones de sitios web. Cuando tú introduces una frase o palabra, el motor buscará en su base de datos y te devolverá los resultados en un orden determinado. Los motores de búsqueda emplean arañas (del inglés spiders) para recopilar la información. Las arañas están continuamente rastreando los sitios web, recopilando datos y siguiendo los enlaces de las páginas para mantener sus resultados al día. Los motores de búsqueda enfatizan diferentes componentes de un sitio web. De esta manera, determinan el orden en el que los sitios web deben aparecer en los resultados de una búsqueda.

índice glosario

Multimedia 60

El término multimedia se utiliza para referirse a cualquier objeto o sistema que utiliza múltiples medios de expresión físicos o digitales para presentar o comunicar información. Los medios pueden ser variados, desde texto e imágenes, hasta animación, sonido, video, etc. También se puede calificar como multimedia a los medios electrónicos u otros medios que permiten almacenar y presentar contenido multimedia. Multimedia es similar al empleo tradicional de medios mixtos en las artes plásticas, pero con un alcance más amplio.

índice glosario

N Navegador

Es un programa para los usuarios puedan visualizar, en forma de páginas web, documentos escritos en códigos especiales para Internet. Algunos de los navegadores más conocidos son Firefox, Chrome, Internet Explorer, Safari y Opera. Los navegadores permiten visualizar y ejecutar gráficos, videos, sonido y animaciones, además de los textos y los enlaces.

Netiqueta

Es el nombre que recibe el conjunto de convenciones que ordenan el comportamiento en espacios virtuales. Más información: • Netiqueta • Netiquetate

índice glosario

P Página

Es otro tipo de publicación que se puede crear en WordPress para enlazarlo desde los menús o enlaces personalizados. Están pensadas para contener información que no suele variar habitualmente.

Panel de administración

Esta es la pantalla que verás cuando inicies sesión en tu sitio, que te da acceso a todas las funciones de gestión de tu sitio.

PDF accesible

Los archivos en formato PDF también deben ser compatibles con los lectores de pantalla y requieren unas características muy similares a las que requieren las páginas web (texto alternativo para imágenes, enlaces que describan su destino, lenguaje sencillo, buen contraste de colores, etcétera).

Además de estas cuestiones, hay algunas específicas para documentos PDF. La más importante, es organizar la información usando etiquetas. El contenido ordenado de forma jerárquica, dividido, por ejemplo, en capítulos o temas, facilita mucho la comprensión y lectura del texto. Usaremos por tanto, las funciones del procesador de textos que permiten insertar, títulos, cabeceras, pies de página, viñetas, etc., así como los estilos. Más información: • Guía para la creación de documentos PDFs accesibles a partir de un procesador de texto. • Creating Accesible Adobe PDF files (en inglés) • Lectura de documentos PDF con reflujo y funciones de accesibilidad

Pendiente de revisión

Otro estado de publicación, similar al borrador pero que queda marcado para que lo revise otro usuario responsable del contenido. Es el estado de publicación por defecto para el usuario con rol de Colaborador, pues requiere la revisión de un usuario con rol de Editor o Administrador.

índice glosario

PHP 63

Lenguaje de programación de uso general de código del lado del servidor originalmente diseñado para el desarrollo web de contenido dinámico. PHP es un acrónimo recursivo que significa PHP Hypertext Pre-processor (inicialmente PHP Tools, o, Personal Home Page Tools). Fue creado originalmente por Rasmus Lerdorf; sin embargo la implementación principal de PHP es producida ahora por The PHP Group y sirve como el estándar de facto para PHP al no haber una especificación formal. Publicado bajo la PHP License, la Free Software Foundation considera esta licencia como software libre. Puede ser desplegado en la mayoría de los servidores web y en casi todos los sistemas operativos y plataformas sin costo alguno. El lenguaje PHP se encuentra instalado en más de 20 millones de sitios web y en un millón de servidores. El enorme número de sitios en PHP ha visto reducida su cantidad a favor de otros nuevos lenguajes no tan poderosos desde agosto de 2005. Más información: • The PHP Group (en inglés).

pixel - píxel - px

Es el nombre que se le ha dado a la unidad más pequeña de una imagen digital. El nombre proviene del inglés Picture Element (elemento de la imagen). Ampliando cualquier imagen lo suficiente, finalmente se verá que está formada por cientos de miles de pequeños cuadrados alineados, cada uno de un diferente color. Cada uno de estos cuadraditos es un pixel. En una imagen los pixeles pueden ser más grandes o más pequeños. Mientras más grandes son, la imagen es más borrosa, mientras más pequeños, es más nítida y tiene más detalles.

Plantillas de página

Distintas distribuciones de diseño que puede tener una página creada con WordPress.

Plugin

Pequeña aplicación que puedes instalar para mejorar, cambiar o añadir funcionalidades a WordPress.

Popup window

El término denomina a las ventanas que emergen automáticamente (generalmente sin que el usuario lo solicite). A menudo, las ventanas emergentes se utilizan con el objeto de mostrar un aviso publicitario de manera intrusiva. Una técnica relacionada a esta es la denominada pop-under (que consiste en abrir de manera intempestiva nuevas ventanas que se sitúan detrás de la ventana en uso).

índice glosario

Programáticamente determinado 64

Algo que ha sido programáticamente determinado es un elemento que se a creado, configurado o desarrollado por medio de programación.

índice glosario

R Ríos Blancos

Habitualmente, cuando la columna de texto justificado es estrecha en relación al tamaño del mismo, el navegador no parte las palabras, así que se limitará a igualar los espacios blancos entre palabras sin más control. Es posible que quede bien, pero en la mayoría de los casos se producirán esos ríos blancos que estropearán el diseño. La mayoría de los usuarios con dificultades de lectura, encuentran problemas con el texto justificado a ambos lados, y justificado a la derecha. El irregular espacio en blanco que se produce entre palabras, puede causar ‘ríos de espacios blancos’ hacia abajo, provocando una lectura difícil y en algunos casos imposible para algunos lectores. Más información: • River - typography (en inglés).

Rol de usuario

WordPress es un CMS multiusuario, y cada usuario puede tener un perfil y capacidades distintas. Los roles de usuario estándar de WordPress son, en orden descendente de capacidades: Administrador – Editor – Autor – Colaborador – Suscriptor. En este sentido, el equipo de desarrollo de la UCUR construye los roles de los usuarios en función de las necesidades de los distintos sitios.

índice glosario

S Shortcode

Códigos cortos utilizados en el editor de texto para “invocar” funciones previamente definidas en plugins u otras funciones.

Sistema de Gestión de Contenidos

También llamado “gestor de contenidos”. Es un sistema que permite crear y administrar contenidos principalmente en páginas web. Este tipo de sistema permite manejar de modo independiente el contenido y el diseño. Así, es posible editar el contenido y darle en cualquier momento un diseño distinto al sitio sin tener que volver a construírlo. Además, permite que varios editores publiquen, de manera fácil y controlada. El propio WordPress es uno de los Sistemas de Gestión de Contenido más conocidos y usados. (Abreviatura: CMS, del inglés Content Management System.)

Sitio web

Es un conjunto de páginas colocadas en Internet. Forman un todo coherente en cuanto a tema y, generalmente, a diseño. Se accede a ellas a través de un mismo dominio en Internet. De acuerdo a Netcraft, en febrero de 2012 había más de 612 millones de sitios web en el mundo. Todos los sitios web públicamente accesibles constituyen una gigantesca “World Wide Web” (red mundial, abreviado www) de información.

Slug

Es la parte única de una dirección web o URL. Por ejemplo, en la URL http://ayuda.com/ayuda-slug/ el slug es la parte ayuda-slug.

Software libre

El software libre (en inglés “free software”, aunque esta denominación a veces se confunde con “gratis” por la ambigüedad del término “free” en el idioma inglés, por lo que también se usa “libre software”) es la denominación del software que respeta la libertad de todos los usuarios que adquirieron el producto y, por tanto, una vez obtenido el mismo puede ser usado, copiado, estudiado, modificado, y redistribuido libremente de varias formas. Según la Free Software Foundation, el software libre se refiere a la libertad de los usuarios para ejecutar, copiar, distribuir, y estudiar el mismo, e incluso modificar el software y distribuirlo modificado. El software libre suele estar disponible gratuitamente, o al precio de costo de la distribución a través de otros medios; sin embargo no es obligatorio que sea así, por lo tanto no hay que asociar software libre a “software gratuito” (denominado usualmente freeware), ya que,

índice glosario

conservando su carácter de libre, puede ser distribuido comercialmente (“software comercial”). Análogamente, el “software gratis” o “gratuito” incluye en ocasiones el código fuente; no obstante, este tipo de software no es libre en el mismo sentido que el software libre, a menos que se garanticen los derechos de modificación y redistribución de dichas versiones modificadas del programa. Más información: • The Open Source Initiative (en inglés). • Mapa conceptual del software libre (imagen). • Categorías de software libre y software que no es libre. • Varias licencias y comentarios acerca de las mismas. • Fundación Software Libre América Latina. • Guía práctica sobre software libre: su selección y aplicación local en América Latina y el Caribe.

índice glosario

T Texto alternativo

El texto alternativo (atributo alt) proporciona información alternativa para una imagen u objeto si un usuario por alguna razón no puede verlo (a causa de conexión lenta, un error en el atributo src, o si el usuario utiliza una herramienta asistiva).

Texto sin formato

Es sólo texto. Es un formato que crea un mensaje sólo con texto, es decir, sólo caracteres. Es lo opuesto al formato enriquecido: este formato permite aplicar formato al texto y mostrar imágenes; entonces, por ejemplo, cuando se pega en un editor de textos un párrafo con formato enriquecido, se pegará en el mismo al tamaño de la tipografía, colores, imágenes, etcétera. Si queremos que ese párrafo se coloque manteniendo el formato que está en el editó de texto, debemos pegarlo sin formato; es decir, sólo texto, sin estilos.

Título de imagen

Prácticamente todos los elementos de un sitio pueden llevar titulo. Se usa para describir enlaces, imágenes, tablas y otros elementos HTML estructurales. Son más versátil que el atributo ALT y muchos motores de búsqueda lean el texto del título atributos como contenido regular de las páginas.

Título de enlace

Prácticamente todos los elementos de un sitio pueden llevar titulo. Se usa para describir enlaces, imágenes, tablas y otros elementos HTML estructurales. El titulo permite introducir una descripción que se muestra cuando se coloca el puntero del mouse sobre el enlace. Es importante colocarlo cuando el enlace en sí o su contexto no da cuenta de su destino o uso.

índice glosario

U URL

Un localizador de recursos uniforme, más comúnmente denominado URL (sigla en inglés de uniform resource locator), es una secuencia de caracteres, de acuerdo a un formato modélico y estándar, que se usa para nombrar recursos en Internet para su localización o identificación, como por ejemplo documentos textuales, imágenes, vídeos, presentaciones digitales, etc. Los localizadores uniformes de recursos fueron una innovación en la historia de la Internet. Fueron usadas por primera vez por Tim Berners-Lee en 1991, para permitir a los autores de documentos establecer hiperenlaces en la World Wide Web. Desde 1994, en los estándares de la Internet, el concepto de URL ha sido incorporado dentro del más general de URI (Uniform Resource Identifier, en español identificador uniforme de recurso), pero el término URL aún se utiliza ampliamente para que los usuarios que entren en ella tengan una buena visión para ellos.

Usabilidad

Facilidad con que las personas pueden utilizar una herramienta particular o cualquier otro objeto fabricado por humanos con el fin de alcanzar un objetivo concreto. El modelo conceptual de la usabilidad, proveniente del diseño centrado en el usuario, no está completo sin la idea utilidad. En inglés, utilidad + usabilidad es lo que se conoce como usefulness. Jakob Nielsen definió la usabilidad como el atributo de calidad que mide lo fáciles que son de usar las interfaces Web. El autor señana que existen 5 reglas principales que adaptadas a una web, se les puede considerar como un web “usable”: 1. Rápido - Las páginas deben cargarse en una media de 4 segundos. En promedio, no se espera más de 10 segundos para ver el contenido de una página web. La mayoría de los usuarios disponen de módem para su acceso a Internet, por lo que nuestras páginas deben de ser lo menos pesadas posibles con el fin de que los usuarios no esperen mucho tiempo, porque de lo contrario cancelarán la visita. 2. Simple - Mantenga una navegación constante. No fuerce a los visitantes a aprender diversos caminos o esquemas para la navegación en diversas partes de su site. - No abuse de la utilización de la animación, esto puede abrumar y cansar la vista. 3. Investigable - Los motores de búsqueda buscan el texto real. No prestan ninguna atención a los gráficos y al código de programación (como el Javascript). Evite estas situaciones si desea que su web esté bien posicionada en los buscadores. 4. Para la mayoría - Los Sitios Web necesitan ser compatibles con todos los navegadores y ordenadores para su fácil usabilidad. - Utilice HTML simple y llano siempre que sea posible, es el código más compatible con todos los navegadores. 5. Manténgalo actualizado - La manera más rápida para que una web pierda credibilidad es contener la información anticuada.

índice glosario

V Ventana emergente

Son ventanas que emergen automáticamente (generalmente sin que el usuario lo solicite). A menudo, las ventanas emergentes se utilizan con el objeto de mostrar un aviso publicitario de manera intrusiva. Son llamadas también Popup Windows. Una técnica relacionada a esta es la denominada pop-under, que consiste en abrir de manera intempestiva nuevas ventanas que se sitúan detrás de la ventana en uso.

índice glosario

W W3C

World Wide Web Consortium, abreviado W3C, es un consorcio internacional que produce recomendaciones para la World Wide Web. es una comunidad internacional donde las organizaciones Miembro, personal a tiempo completo y el público en general trabajan conjuntamente para desarrollar estándares Web. Más información: • Página oficial de la W3C en español.

WCAG

En español: pautas de accesibilidad del contenido web y móvil. Se componen de un conjunto de directrices para hacer el contenido web accesible para todos los usuarios pero, sobre todo para los usuarios con discapacidad. La versión actual, 2.0, también es una norma ISO, ISO / IEC 40500:2012. Más información: • Web Content Accessibility Guidelines (WCAG) 2.0 (en inglés). • Web Content Accessibility Guidelines (WCAG) Overview (en inglés). • Web Content Accessibility Guidelines (WCAG) 2.0 - W3C Recommendation (en inglés). • SO/IEC 40500:2012 - Information technology - W3C Web Content Accessibility Guidelines (WCAG) 2.0 (en inglés).

Web semántica

La Web semántica es un conjunto de actividades desarrolladas en el seno de World Wide Web Consortium tendente a la creación de tecnologías para publicar datos legibles por aplicaciones informáticas (máquinas en la terminología de la Web semántica). Se basa en la idea de añadir metadatos semánticos y ontológicos a la World Wide Web. Esas informaciones adicionales (que describen el contenido, el significado y la relación de los datos) se deben proporcionar de manera formal, para que así sea posible evaluarlas automáticamente por máquinas de procesamiento. El objetivo es mejorar Internet ampliando la interoperabilidad entre los sistemas informáticos usando “agentes inteligen-

índice glosario tes”. Agentes inteligentes son programas en las computadoras que buscan información sin operadores humanos. 72

Más información: • Entendiendo La web semántica. • The Semantic Web: An Introduction (en inglés). • Biblioteca Digital y Web Semántica. • Procedimiento para transformar la web en web semántica.

WordPress

WordPress es un sistema de gestión de contenido o CMS (por sus siglas en inglés, Content Management System). Ha sido desarrollado en PHP para entornos que ejecuten MySQL y Apache, bajo licencia GPL y código modificable. WordPress se ha convertido junto a Movable Type en el CMS más popular con respecto a cualquier otro CMS de aplicación general. Las causas de su enorme crecimiento son, entre otras, su licencia, su facilidad de uso y sus características como gestor de contenidos. Otro motivo a considerar sobre su éxito y extensión es la enorme comunidad de desarrolladores y diseñadores, encargados de desarrollarlo en general o crear complementos y temas para la comunidad. En agosto de 2011 era usado por el 14,7 % de todos los sitios existentes en internet. Más información: • WordPress.org (en inglés). • WordPress.com.

WYSIWYG

WYSIWYG es el acrónimo de What You See Is What You Get (en español, “lo que ves es lo que obtienes”). Se aplica a los procesadores de texto y otros editores de texto con formato (como los editores de HTML) que permiten escribir un documento viendo directamente el resultado final. En el área de diseño web existen también herramientas WYSIWYG, dentro de los llamados CMS (Content Management System); aunque un CMS no tiene porqué ser WYSIWYG, es decir puede ser un gestor de contenidos cuyo panel de gestión no se corresponda con el diseño final, sino que en este caso se utiliza un back-end o panel de gestión para crear-modificar los contenidos, que serán reflejados en el frontend o parte final que ven los usuarios. En el grupo de los CMS WYSIWYG hay varias aplicaciones, incluso alguna de ellas con tecnología flash, como por ejemplo Easy Site Manager.

Ăndice