Clase 8: Imágenes + Acessibilidad / SEO

Uso de Imágenes

Formatos comunes para web:

• jpg.= Imagen de trama. Sistema de compresión ideal.
• png.= Pesa más pues tiene un sistema distinto de compresión. Es ideal para logos.
• gif.= Baja resolución porque sólo acepta 256 colores. Se recomienda más usar vídeos que gifs.
• svg.= Código xml. Se puede moficiar con CSS. Es bueno para icónos.magen de trama. Sistema de compresión ideal.
• webp.= Novedoso. Viene a remplazar a jpg con imágenes más livianas por su mejor compresión.

Rasgos importantes en imágenes

Optimización= Comprimir para alivianar la imagenes y que se descargue rapidamente y bien.

Escoger bien el formato de la imagen según el tipo y uso.

Que la imagen esté siempre el máximo tamaño que queramos utilizar.

Imágenes adaptables

Para ayudar a la responsividad del sitio y que la imagen se descargue en su tamaño apropiado, una buena opción es embeber diferentes tamaños de imagenes.

• PPI - PPP= Pixeles por pulgada --} Densidad de pixeles de una imagen. No es un dato de la imagen, si no que se relaciona con el número total de pixeles en la pantalla.
• SVG= Graphic Vector Scalable --} Formato vectoral. Al ser escalable permite responisividad pues "nunca se va a pixelear". Es código, por lo que puede ser intervenido.

Para el uso de íconos, estos se escriben en el HTML y se editan en el CSS.

*La carpeta de icons debe estar separada de la de imágenes.

Accesibilidad

Busca comprender las discapacidades así como situaciones que nos afectan a todos. ¿Cómo puedo navegar un sitio si no tengo teclado?

Hay 4 principios de Accesibilidad:

• Perceptible= Fácil de entender lo que se ve y lo que es.
• Operable= Debe por der utilizarse.
• Comprensible= Que se entienda lo que la interfaz muestra.
• Robusto= El código está bien construido. Para ello se puede validar con W3C u otros validadores de HTML y CSS.

Además, hay 3 niveles de Conformidad:

• A= Uso de color y control de audio.
• AA= Constraste 4:5:1. Cambio de tamaño del texto y texto en lugar de imágenes de texto.
• AAA= Constraste 7:1. Sonido de fondo bajo o ausente. Presentación visual y texto en lugar de imágenes.

Técnicas básicas para la Accesibilidad

• En el Código:
  1. Utilización del atributo -alt- en imágenes.
  2. Utilizar marcado estándar y válido.
  3. Validar datos de formulario e indicar forma de solucionar problemas.
• En el Diseño:
  1. Utilización colores con un constraste suficiente.
  2. Permitir que los usuarios controlen el tamaño de los textos sin desarmar la estructura de la página.
• En el Contenido:
  1. No mostrar información relevante unicamente a través de imágenes o videos.
  2. Utilizar lenguaje adecuado al público objetivo del sitio.
  3. Añadir subtítulos y transcripciones paraa vídeos y audio.
• En la Interactividad:
  1. Verificar que cada página del sitio es navegable con el teclado.
  2. Siempre añadir controles para contenidos interactivos, animaciones, etc.

SEO Search Engine Optimization
Optimización para motores de búsqueda

¿Cómo funciona?
1.-rastreo ----> 2.-indexación ----> 3.-ranking
En este proceso se recorren todos los enlaces.

Técnicas básicas para la Optimización

• robots.txt= Permite definir cuanto de un sitio no es indexable.
• Metadatos= Permite al buscador tener una perspectiva general del contenido de la pagina y al autor, una perpectiva general del contenido a posiciones sus palabras claves.
  Etiqueta -title- (máx. 70-75 caracteres).
  Meta descripción con la etiqueta -meta- (máx. 160 caracteres).
• Atributo -alt- en imágenes= Especifica el texto alternativo de la imagen.
• Estructura y utilización correcta de títulos (h1-h6).
• sitemaps.xml= Archivos que proporcionan toda la información sobre las rutas del sitio (páginas, vídeos, etc.)
• URL Canónica= Es necesario en Google para indexar, pues es la versión "oficial". No se precede necesariamente con "www" pero es lo recomendable.
• Definir el idioma del documento --}-html lang="es-CL"-
• URLS Amigables= Uso de minúsculas, 0-9, guión como medio separador de palabras.