Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

2 Bienvenid@

Slide 3

Slide 3 text

3 Gerard James Diseñador en Cuatroochenta

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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.

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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...

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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