1
00:00:01,330 --> 00:00:04,309
Curso de edición digital y publicación en línea.

2
00:00:06,179 --> 00:00:08,759
Pilula sobre diseño web adaptativo.

3
00:00:13,259 --> 00:00:23,640
Si vamos de nuevo al libro digital del lector móvil, en el capítulo siente hay un último apartado dedicado al diseño web adaptativo.

4
00:00:27,289 --> 00:00:34,469
Los diseñadores web estaban en aprietos porque la profusión de pantallas le resultaba un reto

5
00:00:34,469 --> 00:00:38,689
porque lo que se veía bien en una se veía mal en otra.

6
00:00:38,689 --> 00:00:42,189
ordenadores, tabletas, teléfonos móviles

7
00:00:42,189 --> 00:00:45,850
al principio se duplicaban los sitios y los diseños

8
00:00:45,850 --> 00:00:50,890
de manera que había una versión para escritorio y una versión móvil

9
00:00:50,890 --> 00:00:53,109
mobile, para las pantallas pequeñas

10
00:00:53,109 --> 00:01:01,039
pero la inercia a continuar como antes era muy grande

11
00:01:01,039 --> 00:01:04,480
así que el 21 de abril de 2015

12
00:01:04,480 --> 00:01:08,680
Google estableció el Mobile Geddon

13
00:01:08,680 --> 00:01:14,359
la fecha en que su buscador, el algoritmo del buscador, iba a dar prioridad a los sitios web

14
00:01:14,359 --> 00:01:18,920
que se mostraran bien en teléfonos inteligentes y en otros dispositivos móviles,

15
00:01:19,620 --> 00:01:24,379
moviendo a los sitios web no optimizados hacia abajo en la lista de resultados.

16
00:01:26,140 --> 00:01:31,579
Creo además una web para optimizar esos sitios web.

17
00:01:31,579 --> 00:01:57,329
Aquí la tenemos. Un sitio web que en un monitor se vería bien con este detalle del menú lateral, en el teléfono móvil se ve nano, pequeñísimo y muy mal. Así que hay que migrarlo a otro diseño, más en columna.

18
00:01:57,329 --> 00:02:05,170
donde había varias columnas aquí una lo que en el monitor ha paisado se ve de

19
00:02:05,170 --> 00:02:10,810
una forma hay que transformarlo a otra para que en el monitor en la pantalla

20
00:02:10,810 --> 00:02:17,550
del teléfono móvil vertical o de una tableta se vea de esta otra forma el

21
00:02:17,550 --> 00:02:27,270
periódico que en el ordenador se ve así hay que encontrar una manera en la que

22
00:02:27,270 --> 00:02:36,349
su diseño se convierta de varias columnas a una sola, que es la más adecuada para pantallas

23
00:02:36,349 --> 00:02:47,229
pequeñas. Fijaos el Washington Post, tres columnas, incluso seis, tres, cuatro columnas.

24
00:02:47,229 --> 00:02:58,340
Al ir variando el tamaño de pantalla, se reordena y se coloca a una o dos columnas

25
00:02:58,340 --> 00:03:11,300
en este caso. ¿Cómo se consigue eso? Pues eso se consigue utilizando lo que se denomina

26
00:03:11,300 --> 00:03:18,729
el diseño web adaptativo, el responsive web design. No responsivo, que no es un término

27
00:03:18,729 --> 00:03:25,650
que no existe en castellano. La Fundeu recomienda diseño web adaptativo, que es crear mediante

28
00:03:25,650 --> 00:03:32,310
unas órdenes de hojas de estilo, las queries, las media queries, decirle que se comporte

29
00:03:32,310 --> 00:03:36,550
de distinta manera según la pantalla que lo está renderizando.

30
00:03:39,569 --> 00:03:44,150
Esas órdenes, arroba media, son muy poderosas y sirven para muchos aspectos,

31
00:03:44,229 --> 00:03:47,930
por ejemplo, para la accesibilidad, para el disfrute de la web a personas

32
00:03:47,930 --> 00:03:51,389
con discapacidades auditivas, conectivas o de otro tipo.

33
00:03:53,949 --> 00:03:57,210
Así que la prensa primero y las webs empresariales e institucionales

34
00:03:57,210 --> 00:03:59,629
han ido migrando al diseño web adaptativo.

35
00:03:59,810 --> 00:04:00,310
¿Qué remedio?

36
00:04:01,750 --> 00:04:05,289
Y los ciudadanos nos hemos acostumbrado a que hay varias maneras de ver

37
00:04:05,289 --> 00:04:13,069
el mismo sitio web. Así que recuerda un poco al periódico de papel que se puede leer compaginado,

38
00:04:13,210 --> 00:04:21,730
doblado o plegado. Los navegadores móviles tienen una opción para ver la versión para

39
00:04:21,730 --> 00:04:29,149
ordenador que te convence de seguida de que no es lo mejor. Los navegadores tienen una

40
00:04:29,149 --> 00:04:34,089
opción, los inspectores, que permiten simular cómo una página web se vería en una pantalla

41
00:04:34,089 --> 00:04:49,660
móvil, algo absolutamente crucial. El vport, la ventana del navegador. Por último, ese acceso web, la lectura web, está creciendo en importancia de una manera exponencial

42
00:04:50,240 --> 00:05:03,600
y ese acceso se demuestra, por ejemplo, en esta estadística que se refiere al 2019, imaginaos el 2020. Gente que se conecta a Internet a través del dispositivo móvil,

43
00:05:03,600 --> 00:05:11,779
A través del teléfono móvil, a través del ordenador portátil, a través de la tableta, a través de dispositivos, otros dispositivos.

44
00:05:12,339 --> 00:05:13,620
Observar cómo va creciendo.