Estándares para textos e imágenes

Por PACIE conocemos la importancia de la presencia y de los estándares en

nuestras aulas y esto toma mucho más relevancia al ser miembros de VGCORP.
Acontinuación encontraremos los principales estándares que debemos seguir.

Estándares web para imágenes

Los estándares web para el uso de imágenes toman en cuenta los siguientes
parámetros:

 Tamaño físico
 Peso del archivo
 Resolución
 Tipo de archivo
 Nombre del archivo

Tamaño físico
Nos permite determinar el espacio que ocupará la imagen dentro de nuestro sitio
web. Este tamaño se mide en píxeles con las dimensiones de ancho y alto
limitadas por el autor de la página, según el diseño requerido. Existe una
categorización de imágenes por su tamaño:

 Imágenes grandes, usadas como fondos del sitio web, banners,

encabezados de página o para efectos de animación de imágenes
centrales. Normalmente su dimensión excede el estándar de 1.024 px de
ancho por 768 px de alto.
 Imágenes medianas, consideradas como elementos clave dentro de
nuestro diseño, son aquellas imágenes de tamaño normal o convencional,
cuya dimensión es superior a los 256px. e inferior a 1.024px. La mayor
cantidad de imágenes en nuestro diseño se encuentran en esta sección.
 Imágenes pequeñas, usadas en iconografía, miniaturas de fotografías o
imágenes complementarias. Su dimensión es inferior a los 256px.
 Microimágenes, imágenes cuya dimensión es inferior a 16px y que suelen
apoyar al diseño complementario del sitio o enganchar el diseño a la
estructura del navegador web.

Peso del archivo

Directamente proporcional al tamaño físico de la imagen, éste estándar permite al
diseñador evitar que su sitio web sea muy pesado y no se muestre
adecuadamente en las conexiones a internet lentas o inestables. La relación
adecuada según el tamaño es:

 grandes - 200kb
 medianas - 50 kb
 pequeñas e íconos - 30 kb
 micro - 8 kb

Aparentemente el peso es demasiado pequeño, pero una página web tiene varias
imágenes y varios archivos que deben cargar cada vez que el usuario ingresa al
sitio y la suma del peso de todos los archivos es lo que da la velocidad de carga de
nuestra página web. De allí la importancia de cuidar este estándar.

Resolución
Determina la claridad y calidad de la imagen, sin embargo, también es
directamente proporcional al peso del archivo. A mayor calidad o mejor resolución
de la imagen, mayor el peso del archivo. La clave es determinar un equilibrio entre
la calidad y su peso y se logra con la ayuda de programas de manipulación o
edición de imágenes digitales.

Es necesario señalar en este punto que las imágenes del diseño gráfico
convencional para impresión no son las adecuadas para ser usadas en la web. No
hay que confundir diseño gráfico con diseño web, los estándares son diferentes.
Aún cuando una imagen generada para diseño gráfico puede adaptarse a los
estándares web, el proceso inverso resulta complejo y normalmente requiere
volver a crearse.

Tipo de archivo
Este estándar es fijado por el uso más popular de los archivos usados en la web y
actualmente los tipos aceptados por los navegadores modernos son:

 .jpg
Imágenes de fotografías de calidad y buena resolución. Este formato
permite eliminar varios detalles del archivo de imagen en un proceso de
compresión, pero manteniendo su calidad, lo que da como resultado una
excelente imagen de bajo peso y gran calidad.
 .gif
Imágenes de baja calidad usadas como complemento al diseño global del
sitio web, como líneas, íconos, bordes, logos, etc.
 .png
Imágenes usadas como principal o complementaria, no pierde detalles en
un proceso de compresión ocasionando que su peso sea mayor al de un
jpg. Algunos navegadores no soportan ciertas características del formato
png, como la transparencia.
 .ico
Imágenes usadas para el favicon o archivo de imagen corporativa del sitio
embebido en el navegador web.

Nombre de archivo
Cumpliendo con los estándares web y para que las imágenes y archivos puedan
visualizarse correctamente, los nombres de archivos deben cumplir con las reglas
de los 5 sin:

 Sin espacios
 Sin tildes o acentos
 Sin eñes (enies)
 Sin símbolos especiales como  , ; : / & % $ " @ # + * ? ( [ { etc.  (tampoco
es adecuado usar puntos intermedios, estos deben quedar solamente para
separar el nombre de la extensión del archivo)
 Sin mayúsculas
 Estos estándares también aplican para el nombre de las carpetas.

Para los nombres de archivos, considerar:

o Imágenes de títulos, anteceder al nombre del archivo el prefijo  t-

o Íconos, anteceder al nombre del archivo el prefijo  i-
o Banner o imagen fotográfica, anteceder al nombre del archivo el
prefijo b-
o Documento pdf, anteceder al nombre del archivo el prefijo d-

Ubicación de archivos

En FATLA utilizamos un diseño de aulas que busca aligerar la carga del servidor y
facilitar los procesos operativos y técnicos. Las aulas se diseñan de tal manera que
"dentro" de ellas se almacene solamente texto, los códigos de diseño de todos los
recursos y las configuraciones de cada uno, mientras que las imágenes y cualquier
archivo que se requiera se alojan en repositorios externos. Esto nos ayuda también
a evitar duplicidades pues tenemos varias fraternidades y varios programas de
experto... si cada plataforma alojara todos sus contenidos, tendríamos todas las
imágenes generales (íconos, logotipos y otros elementos comunes a todas las
plataformas) repetidos en cada plataforma y los archivos específicos de cada
módulo estarían igualmente repetidos en cada fraternidad.

Así, todos los archivos de un aula deben estar ubicados en un solo directorio,
organizados en carpetas según el bloque académico. Esto nos permite tenerlo
todo debidamente organizado.

Consideraciones para aulas en Moodle 3.X

Moodle 3.x incorpora ya por defecto comportamientos responsivos para imágenes.

Incluye configuraciones CSS que facilitan mucho el trabajo, aunque con el
inconveniente que en ocasiones los códigos CSS tienen supremacía sobre otras
configuraciones, de manera que si queremos por ejemplo fijar el tamaño de una
imagen deberemos realizar ajustes al código.

Al trabajar con imágenes responsivas debemos tomar en cuenta que el

comportamiento responsivo debe funcionar "hacia abajo". Esto es, debe achicar
las imágenes,  no agrandarlas, pues si hacemos lo último la imagen pierde calidad,
afectando a la visualización y por lo tanto a la Presencia. De esta manera, la imgen
a utilizar deberá estar formateada o diseñada conforme al tamaño máximo con el
que deberá visualizarse.

Plantillas de Moodle 3.X como las que FATLA utiliza en sus plataformas utilizan el
archivo resumen del curso no solamente para identificarlo en el listado de cursos
de la plataforma, sino también como imagen o banner de cabecera del aula, de
manera que el archivo que debemos utilizar se recomienda sea de 1200 x 600
píxeles.

Si la imagen no presenta un comportamiento responisivo predeterminado,

podemos configurarlo incluyendo una etiqueta class en el código de la imagen:
<img
src="https://comunidad.planetafatla.org/oficinas/pluginfile.php/233/course/overviewf
iles/b-noticias-informacion.jpg" alt="noticias" class="img-responsive" style="display:
block; margin-left: auto; margin-right: auto;" width="800" height="400" />

Si queremos restringir el tamaño máximo de la imagen, podemos definir ese valor

en el código. Por ejemplo, la imagen anterior tiene un tamaño de 1200x600, sin
embargo se la limitó a un tamaño máximo de 800x600. Si se omite esos valores, la
imagen se expandirá hasta su tamaño máximo conforme se incrementa el tamaño
de la ventana.

Otra forma de colocar la configuración responsiva es directamente desde el cuadro

de insertar imágen. En la pestaña "Apariencia", abrimos la lista desplegable
"clase", seleccionamos "(valor)" y habilitará un cuadro de texto donde debemos
escribir "img-responsive" (sin las comillas). con ello automáticamente se inserta la
configuración responsiva.

Tamaños de fuente

Debemos también estandarizar los textos y evitar tamaños de letra muy grandes.
Los estilos CSS y los formatos de las plantillas de Moodle hacenque los textos que
se visualiza en las páginas sean mayores a los que se ve en el editor de texto, de
manera que si formateamos los textos según cómo los vemos en el editor,
podremos tener como resultado textos con tamaños excesivamente grandes en la
visualización final.

Por ello, a menos que se quiera resaltar justamente eso: el formateo de textos y
los tamaños de letra, lo más recomendable esno cambiar el tamaño del texto,
manteniendo el tamaño estándar de los estilos de texto, usar el estilo "Párrafo"
para el texto regular y para los títulos, utilizar los estilos "Encabezado x" evitando
utilizar los más grandes; normalmente con "Encabezado 3" es más que suficiente
para un título principal.

En esta página, por ejemplo, se usa Encabezado 3 para el título principal y

Encabezado 4 para los subtítulos.

Colores

Hay mucho de qué hablar sobre la teoría y uso del color. Al respecto nos limitamos
a recomendar el uso de un máximo de 4 colores en los textos, con una adecuada
armonia de color.