1. No category

Manual y guías para la administración
y uso del sitio web.
2
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).
3
Í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
4
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
5
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
6
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
9
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
10
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
u
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.
u
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.
u
Contiene información sobre ti (tu “cuenta”) así como algunas opciones
personales relacionadas con el uso del sitio.
índice
11
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
12
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.
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.
u
u
u Título
u
u
u
Insertar imagen,
galería u otro
objeto
de herrau Barra
mientas
u Espacio de texto
índice
13
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
to
do
Bor
rar
Des
Inse
hac
r
er/r
form tar car
eha
a
ato
ctér
cer
espe
cial
Ayu
d
a
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
14
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
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
15
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
1u Recuadro publicar
2u
1u
1u
2u
clic para, una vez finali-
3u zada la edición, aplicar
1u
4u
2u
Clic para, una vez ter2u minado, hacer una vista
previa de los cambios
realizados.
los cambios.
3u
2u
4u
Clic para enviar la noticia, página, etcétera a la
papelera.
1u
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.
1u
2u
1u
2u
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
16
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
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.
u
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
u
u
índice
17
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
18
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
19
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
21
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
22
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
23
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
24
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
25
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 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
26
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
27
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
28
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
29
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
30
u
Ficha: Editar menú
u
u
u
u Ficha: Gestionar lugares.
u Lista de menús ya creados.
u
u
u
u
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
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
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ú”.
u
índice
31
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
32
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
33
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.
u
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.
u
u
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
u
u
u
u
u
índice
34
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
35
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
37
Ø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
38
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
39
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
45
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…
A
B
C
D
E
F
G
H
I
J
L
M
N
P
R
S
T
U V W
índice
glosario
46
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
47
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
48
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
49
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
50
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
51
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
52
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
53
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
54
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
55
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
56
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
57
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
58
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
59
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
61
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
62
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
65
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
66
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
67
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
68
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
69
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
70
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
71
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
73