1 Diseño periodístico para la web 3 • 11 • 2022 9 - 11 horas Aula HA1220AA, FCHS Universitat Jaume I, Castelló (PE0925)

2 Bienvenid@

3 Gerard James Diseñador en Cuatroochenta

4 Diseño periodístico para la web Una breve e incompleta introducción

5 La tipografía según la RAE De tipógrafo. 1. f. imprenta (arte de imprimir). 2. f. imprenta (taller donde se imprime). 3. f. Modo o estilo en que está impreso un texto. 4. f. Clase de tipos de imprenta. “La computadora permite una tipografía muy variada”. *En la web, ‘impreso’ significa que aparece en el navegador

6 Tipografía: nociones generales Puntos esenciales: legibilidad, legibilidad y legibilidad Fuentes: usar dos o tres como máximo, utilizar más puede resultar en una cacafonía visual Es inevitable que el diseño se complique, así que hay que empezar desde la sencillez Esto se aplica a los colores también. Tiene que haber contraste entre texto y fondo suficiente para una lectura adecuada El tamaño del texto debería ser de un tamaño legible para la mayoría... unos 16px o más Un interlineado que facilita la lectura. En cabeceras, unos 1,2% y parrafos, 1,4-1,5 aunque puede variarse según la fuente Un ancho de la caja o cuerpo de texto debería ser entre 50 y 70 caracteres. Cuando el ojo llega al fin de la línea, ha de encontrar la siguiente línea, lo cual es difícil si hay mucha distancia

7 Tipografía: nociones generales Puntos esenciales: legibilidad, legibilidad y legibilidad Fuentes: usar dos o tres como máximo, utilizar más puede resultar en una cacafonía visual Es inevitable que el diseño se complique, así que hay que empezar desde la sencillez Esto se aplica a los colores también. Tiene que haber contraste entre texto y fondo suficiente para una lectura adecuada El tamaño del texto debería ser de un tamaño legible para la mayoría... unos 16px o más Un interlineado que facilita la lectura. En cabeceras, unos 1,2% y parrafos, 1,4-1,5 aunque puede variarse según la fuente Un ancho de la caja o cuerpo de texto debería ser entre 50 y 70 caracteres. Cuando el ojo llega al fin de la línea, ha de encontrar la siguiente línea, lo cual es difícil si hay mucha distancia

8 Tipografía: nociones generales Puntos esenciales: legibilidad, legibilidad y legibilidad Fuentes: usar dos o tres como máximo, utilizar más puede resultar en una cacafonía visual Es inevitable que el diseño se complique, así que hay que empezar desde la sencillez Esto se aplica a los colores también. Tiene que haber contraste entre texto y fondo suficiente para una lectura adecuada El tamaño del texto debería ser de un tamaño legible para la mayoría... unos 16px o más Un interlineado que facilita la lectura. En cabeceras, unos 1,2% y parrafos, 1,4-1,5 aunque puede variarse según la fuente Un ancho de la caja o cuerpo de texto debería ser entre 50 y 70 caracteres. Cuando el ojo llega al fin de la línea, ha de encontrar la siguiente línea, lo cual es difícil si hay mucha distancia

9 Tipografía: nociones generales Puntos esenciales: legibilidad, legibilidad y legibilidad Fuentes: usar dos o tres como máximo, utilizar más puede resultar en una cacafonía visual Es inevitable que el diseño se complique, así que hay que empezar desde la sencillez Esto se aplica a los colores también. Tiene que haber contraste entre texto y fondo suficiente para una lectura adecuada El tamaño del texto debería ser de un tamaño legible para la mayoría... unos 16px o más Un interlineado que facilita la lectura. En cabeceras, unos 1,2% y parrafos, 1,4-1,5 aunque puede variarse según la fuente Un ancho de la caja o cuerpo de texto debería ser entre 50 y 70 caracteres. Cuando el ojo llega al fin de la línea, ha de encontrar la siguiente línea, lo cual es difícil si hay mucha distancia

10 Tipografía: nociones generales Puntos esenciales: legibilidad, legibilidad y legibilidad Fuentes: usar dos o tres como máximo, utilizar más puede resultar en una cacafonía visual Es inevitable que el diseño se complique, así que hay que empezar desde la sencillez Esto se aplica a los colores también. Tiene que haber contraste entre texto y fondo suficiente para una lectura adecuada El tamaño del texto debería ser de un tamaño legible para la mayoría... unos 16px o más Un interlineado que facilita la lectura. En cabeceras, unos 1,2% y parrafos, 1,4-1,5 aunque puede variarse según la fuente Un ancho de la caja o cuerpo de texto debería ser entre 50 y 70 caracteres. Cuando el ojo llega al fin de la línea, ha de encontrar la siguiente línea, lo cual es difícil si hay mucha distancia

11 Tipografía: nociones generales Puntos esenciales: legibilidad, legibilidad y legibilidad Fuentes: usar dos o tres como máximo, utilizar más puede resultar en una cacafonía visual Es inevitable que el diseño se complique, así que hay que empezar desde la sencillez Esto se aplica a los colores también. Tiene que haber contraste entre texto y fondo suficiente para una lectura adecuada El tamaño del texto debería ser de un tamaño legible para la mayoría... unos 16px o más Un interlineado que facilita la lectura. En cabeceras, unos 1,2% y parrafos, 1,4-1,5 aunque puede variarse según la fuente Un ancho de la caja o cuerpo de texto debería ser entre 50 y 70 caracteres. Cuando el ojo llega al fin de la línea, ha de encontrar la siguiente línea, lo cual es difícil si hay mucha distancia

12 Tipografía: nociones generales Puntos esenciales: legibilidad, legibilidad y legibilidad Fuentes: usar dos o tres como máximo, utilizar más puede resultar en una cacafonía visual Es inevitable que el diseño se complique, así que hay que empezar desde la sencillez Esto se aplica a los colores también. Tiene que haber contraste entre texto y fondo suficiente para una lectura adecuada El tamaño del texto debería ser de un tamaño legible para la mayoría... unos 16px o más Un interlineado que facilita la lectura. En cabeceras, unos 1,2% y parrafos, 1,4-1,5 aunque puede variarse según la fuente Un ancho de la caja o cuerpo de texto debería ser entre 50 y 70 caracteres. Cuando el ojo llega al fin de la línea, ha de encontrar la siguiente línea, lo cual es difícil si hay mucha distancia

13 Algunas tecnologías que se usan en la web HTML HyperText Markup Language > Lenguaje de Formato de Documentos para Hipertexto CSS Cascading StyleSheets > Hojas de estilo en cascada. Se utiliza para añadir estilos a elementos HTML o etiquetas incluidas dentro del HTML Javascript Un lenguaje de programación que, entre otras cosas, se usa para controlar el comportamiento de los elementos de un documento de HTML PHP Un lenguaje de scripting que se ejecuta en el servidor de forma dinámica. Envía al usuario el código en HTML. Wordpress se basa en PHP

14 HTML Nos permite formatear los textos de un documento H1 > encabezado H2 > encabezado H3> encabezado H4 > encabezado H5 > encabezado H5 > encabezado Estas cabeceras permiten estructurar el documento de una forma lógica y que facilita el SEO natural que premia documentos bien formulados

15

• • Lista sin ordenar
• • Lista sin ordenar
• • Lista sin ordenar

1. 1. Lista ordenada
2. 2. Lista ordenada
3. 3. Lista ordenada

HTML Otros formatos útiles

Soy un párrafo de texto. Sed posuere consectetur est at lobortis. Etiam porta sem malesuada magna mollis euismod.

Una cita de una persona realmente importante. Aenean lacinia bibendum nulla sed consectetur.Maecenas sed diam eget risus varius blandit sit amet non magna. Nombre de persona realmente importante

16 HTML Otros formatos ‘en línea’ Texto en negrita Texto en cursiva Texto azul *Un ‘span’ es una etiqueta útil para hacer cambios dentro de un texto sin afectar al resto. Wordpress los usa bastante para cambios de color o para alinear texto

17 Diseño periodístico Elementos portada Observar: Distintas secciones, cada una con una maquetación ligeramente diferente aunque con muchos elementos comunes. Así se logra uniformidad pero que ofrece variedad.

18 Diseño periodístico Elementos portada Observar: Una gran variedad de módulos sobre una base de 5 columnas. Utilza una mezcla de ítems con y sin imágenes para lograr un equilibrio visual. Usa color para distinguir diferentes tipos de noticia

19 Diseño periodístico Páginas interiores Observar: En las páginas de opinión se suele utilizar una maquetación más atrevida, en este caso, bastante asimétrica pero incorporando las buenas prácticas sobre tipografía que hemos mencionado anteriormente: longtidud de línea bastante corta, buen tamaño de letra, interlineado, etc...

20 Diseño periodístico Páginas interiores Observar: Otro ejemplo de opinión, aquí dando protagonismo al comentarista. En el cuerpo de texto, buena legibilidad, y los enlaces dentro del texto, bien distinguidos con otro color y subrayados. En ambos casos, se inluye la fecha e incluso la hora de publicación, algo imprescindible para la credibilidad de cualquier medio

21 Wordpress.com URL de trabajo Imágenes Comprobador de contraste ¡Gracias!