====== 9. Imágenes, fuentes, audio y vídeo ======

  * Fuentes en la Web
  * Formatos de Imagenes
  * Formatos de Audio
  * Formatos de Video


  * [[https://jakearchibald.com/2020/avif-has-landed/|Formatos de imágenes con compresión]]

===== Material =====

==== Tipografías ====
{{serif.png?400|}}

Para fuentes grandes (títulos) que sea menor la altura de las minúsculas (x-height) y menos espaciado entre letras.
Para fuentes pequeñas que sea mayor la altura de las minúsculas (x-height) y mas espaciado entre letras.
{{ titulo.png |}}


  * Herramienta:
    * [[https://app.typeanything.io/|Type Anything]]: Herramienta para ver como queda una página según la tipografía
    * [[https://learnui.design/tools/typography-tutorial.html#|Interactive Typography Tutorial – Learn UI Design]]
  * Diseño
    * [[http://www.mitziweb.com/blog/eleccion-fuentes-diseno-pagina-web/|Elección de las fuentes para el diseño de una página web]]
    * [[https://samuparra.com/mi-metodo-para-elegir-y-combinar-tipografias/|Mi método para elegir y combinar tipografías]]
    * [[https://universalsans.com/|Universal Sans]]: Permite diseñar de forma exacta una fuente sin serif ((Es de pago)) . Pero vale como ejemplo para ver que se puede cambiar en una fuente.

  * Fuentes en la Web
    * [[http://fontawesome.io/|Font Awesome, the iconic font and CSS toolkit]]
    * [[https://www.whatfontis.com/|Indica la fuente a partir de una foto]]
    * [[http://www.creativosonline.org/blog/10-fuentes-gratuitas-enorme-calidad.html|10 fuentes gratuitas de 8 estilos distintos de enorme calidad]]
    * [[https://www.w3schools.com/css/css3_fonts.asp|Usando fuentes descargadas en una página Web]]
    * {{.:creating_and_implementing_your_own_icon_font_a_tutorial_-_the_media_temple_blog.pdf}}: Crear tu propia fuente de iconos (([[https://mediatemple.net/blog/tips/creating-implementing-icon-font-tutorial/|Creating and Implementing Your Own Icon Font – A Tutorial]]))
    * {{.:ejemplo_fuentes.zip|}}: Ejemplo de creación de fuente con iconos y uso de fuentes descargadas

{{:clase:daw:diw:2eval:ejemplo_de_fuente.png|}}

{{reglas-fuente-correcta.png?600|}}

=== Peso de las fuentes ===
Enfatizar algo no es solo hacer la letra más grande sino usar una fuente con más peso (Weight)

{{ :clase:daw:diw:2eval:tipo_fuente_peso.jpeg?direct |}}

==== Audio-Video ====

  * Formatos de Imagenes
    * [[https://www.sitepoint.com/gif-jpg-png-whats-difference/|GIF, JPG and PNG – What’s the Difference?]]
  * Formatos de Audio
    * [[https://www.emezeta.com/articulos/formatos-de-audio-todo-lo-que-deberias-saber|Formatos de audio: Todo lo que deberías saber]]
    * [[https://www.w3schools.com/html/html5_audio.asp|HTML5 Audio]]
  * Formatos de Video
    * [[https://www.emezeta.com/articulos/formatos-de-video-todo-lo-que-deberias-saber|Formatos de video: Todo lo que deberías saber]]
    * [[https://www.w3schools.com/html/html5_video.asp|HTML5 Video]]

===== Material complementario =====
  * El tipo de fuente de la película AVATAR
    * [[https://designforhackers.com/blog/papyrus-font/|In Defense of Papyrus: Avatar Uses the World’s Second-Most-Hated Font to Signal the Downfall of Civilization]]
    * [[https://www.youtube.com/watch?v=2UtD2j2aDdE|"Papyrus" Ryan Gosling en SNL (subtítulos en español)]]