Diferencias

Muestra las diferencias entre dos versiones de la página.

--- clase:daw:diw:2eval:tema11 [2025/11/03 11:37] – creado - editor externo 127.0.0.1
+++ clase:daw:diw:2eval:tema11 [2026/10/23 23:04] (actual) – Reorganización del módulo: contenido movido a las páginas nuevas de clase:daw:diw claude
@@ Línea 1: / Línea 1: @@
-====== 11. 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]]
-Mas información:
-  * [[https://youtube.com/shorts/dHJqKvBLqa8?si=-zJc-4fibGnO-wkh]]
-===== 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|}}
-  * El tipo de la letra "a" hace que sea más formal o informal.
-{{:clase:daw:diw:2eval:letra_a_estilo.png|}}
-=== 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)]]