0
00:00:00,000 --> 00:00:10,000
Hola, os voy a presentar el módulo diseño de interfaces web, bueno, interfaces,

1
00:00:10,000 --> 00:00:18,000
bueno, esto es interesantísimo porque la interfaz es lo que nos permite

2
00:00:18,000 --> 00:00:24,000
la comunicación entre la máquina, el ordenador, la aplicación y el humano,

3
00:00:24,000 --> 00:00:32,000
por lo tanto estamos constantemente rodeados de interfaces, así que es un

4
00:00:32,000 --> 00:00:38,000
módulo pues muy básico, muy interesante y muy vital.

5
00:00:39,000 --> 00:00:47,000
Yo diría, centrándolo en las interfaces web, en los servicios web, en los sitios

6
00:00:47,000 --> 00:00:57,000
web, en general son horribles, yo diría que el 98% de las interfaces web son

7
00:00:57,000 --> 00:01:05,000
malísimas, malísimas y horrorosas, bueno, pues ya explicaré o ya veremos

8
00:01:05,000 --> 00:01:14,000
por qué digo esto y por eso la importancia de tener una buena visión,

9
00:01:14,000 --> 00:01:21,000
unos buenos principios, un buen proceso de diseño de interfaces web, porque

10
00:01:21,000 --> 00:01:27,000
constantemente nos estamos comunicando con las máquinas y cada vez más es en

11
00:01:27,000 --> 00:01:30,000
el formato web.

12
00:01:30,000 --> 00:01:38,000
Les recomiendo dos películas que son interesantes para lo que son las

13
00:01:38,000 --> 00:01:44,000
interfaces, una es Her,

14
00:01:44,000 --> 00:01:50,000
esta es, bueno, iba a decir reciente, bueno, no tan

15
00:01:50,000 --> 00:02:00,000
reciente, pero bueno, muy interesante la película, de cómo el protagonista

16
00:02:00,000 --> 00:02:07,000
se enamora de su sistema operativo y otra película también interesante para el

17
00:02:07,000 --> 00:02:15,000
tema de las interfaces es Ex Máquina, bueno, pues ahí nos puede dar ideas,

18
00:02:15,000 --> 00:02:25,000
ideas de lo que va esta asignatura y les traigo también, bueno, tres ejemplos

19
00:02:25,000 --> 00:02:34,000
de interfaces, este es un iPod, es un iPod ya bastante antiguo y bueno, pues la

20
00:02:34,000 --> 00:02:44,000
interfaz se hace a través de una pantalla gráfica visual, ¿vale?

21
00:02:44,000 --> 00:02:52,000
Esta es una forma que nos permite de comunicarnos con la máquina, por

22
00:02:52,000 --> 00:03:01,000
ejemplo, para escuchar música, pero también fijaros esta interfaz,

23
00:03:01,000 --> 00:03:12,000
esta ya es diferente, bueno, con la primera podré hacer más cosas y

24
00:03:12,000 --> 00:03:18,000
posiblemente de forma más fácil, bueno, con esta a lo mejor ya no puedo hacer

25
00:03:18,000 --> 00:03:25,000
tantas cosas y después lo que me gustó es que lo que hizo Steve Jobs y si lo

26
00:03:25,000 --> 00:03:31,000
cortamos por la mitad, pues si lo cortamos por la mitad

27
00:03:31,000 --> 00:03:35,000
nos vamos a éste.

28
00:03:36,000 --> 00:03:41,000
¡Ah, qué interesante! O sea, ¿y con esto yo puedo manejar

29
00:03:41,000 --> 00:03:47,000
toda mi biblioteca de música? Pues sí, también puedo manejarlo, bueno, pues son

30
00:03:47,000 --> 00:03:57,000
tres ejemplos de interfaces y las interfaces tienen que ser usables,

31
00:03:57,000 --> 00:04:05,000
accesibles, funcionales, etcétera, etcétera, bueno, pues temas así como estos son los

32
00:04:05,000 --> 00:04:11,000
que en este módulo se ven, insisto, es un módulo vital porque una vez que se

33
00:04:11,000 --> 00:04:19,000
estudia esto y se comprende, pues se ve que, con pensamiento crítico, que todas

34
00:04:19,000 --> 00:04:26,000
las interfaces, el 98% de las interfaces, según mi opinión, de los servicios web

35
00:04:26,000 --> 00:04:33,000
son horrorosas. Bien, pero ¿qué se va a ver en este módulo llamado Diseño de

36
00:04:33,000 --> 00:04:42,000
Interfaces Web? Bueno, la unidad uno es la usabilidad, eso es fundamental, con eso

37
00:04:42,000 --> 00:04:49,000
os recomiendo que hagáis el esfuerzo de entender bien qué es

38
00:04:49,000 --> 00:04:55,000
usabilidad, esto es básico, no solamente para la web, sino para cualquier máquina,

39
00:04:55,000 --> 00:05:04,000
para cualquier sistema, algo fundamentalísimo, la usabilidad.

40
00:05:04,000 --> 00:05:08,000
Dentro de la usabilidad hay muchos factores, voy a mencionar algunos solos,

41
00:05:08,000 --> 00:05:18,000
como la facilidad de uso de algo, de un aparato, la accesibilidad, etcétera, etcétera,

42
00:05:18,000 --> 00:05:25,000
o, por ejemplo, ¿y si dividimos la usabilidad en función de la edad?

43
00:05:25,000 --> 00:05:34,000
No es lo mismo diseñar un sitio web para un niño, para un adolescente, para un

44
00:05:34,000 --> 00:05:43,000
joven, para un adulto o para un senior, como yo, no es lo mismo.

45
00:05:43,000 --> 00:05:50,000
Por ejemplo, bueno, todos sabemos que hay características muy diferentes, pero voy

46
00:05:50,000 --> 00:05:55,000
a poner dos extremos, un niño y un senior. Un niño,

47
00:05:55,000 --> 00:05:58,000
una de las características es la impaciencia,

48
00:05:58,000 --> 00:06:04,000
entonces, si no consigue rápidamente lo que está buscando, eso lo deja, ese sitio

49
00:06:04,000 --> 00:06:09,000
lo abandona. En cambio, un senior, como yo,

50
00:06:10,000 --> 00:06:16,000
las características que tenemos es la paciencia, bueno, no nos importa,

51
00:06:16,000 --> 00:06:21,000
estamos ahí buscando una y otra vez hasta dar con el tema.

52
00:06:21,000 --> 00:06:25,000
Bueno, esas son dos características de las muchas que hay,

53
00:06:25,000 --> 00:06:29,000
bueno, pues esos son aspectos básicos de la usabilidad.

54
00:06:29,000 --> 00:06:33,000
La unidad dos, hojas de estilo, el estilo.

55
00:06:33,000 --> 00:06:40,000
Bueno, el estilo es otro aspecto muy importante, porque se separó,

56
00:06:40,000 --> 00:06:44,000
en vez de, igual que con los datos se hizo en los programas,

57
00:06:44,000 --> 00:06:48,000
antes los programas informáticos, los datos estaban mezclados con las

58
00:06:48,000 --> 00:06:53,000
instrucciones y llega un momento en que se separan y entonces los datos se mandan

59
00:06:53,000 --> 00:06:57,000
a una base de datos, eso, qué gran avance.

60
00:06:57,000 --> 00:07:02,000
Bueno, pues con el estilo pasó lo mismo, antes en los sitios web, las páginas,

61
00:07:02,000 --> 00:07:08,000
el estilo estaba mezclado con las etiquetas, bueno, pues a partir de un momento

62
00:07:08,000 --> 00:07:16,000
se separa el estilo y entonces con un estilo que está separado de ese código HTML,

63
00:07:16,000 --> 00:07:21,000
pues lo que conseguimos es, primero, una organización muy buena

64
00:07:21,000 --> 00:07:26,000
y más facilidad de entender y de diseñar.

65
00:07:26,000 --> 00:07:31,000
Y además el estilo, con el estilo controlamos cosas como tipografía,

66
00:07:31,000 --> 00:07:38,000
color de figura, color de fondo, pero también algo importantísimo que lleva el estilo,

67
00:07:38,000 --> 00:07:42,000
que es el posicionamiento de los elementos web.

68
00:07:42,000 --> 00:07:52,000
De cómo se coloca un elemento dentro de la página, el responsable de eso es el estilo.

69
00:07:52,000 --> 00:07:58,000
Eso es lo que a los principiantes les cuesta mucho al comienzo, porque no entienden muy bien

70
00:07:58,000 --> 00:08:01,000
las diferentes formas de posicionar.

71
00:08:01,000 --> 00:08:05,000
Vale, el 3 es la accesibilidad.

72
00:08:05,000 --> 00:08:14,000
Otro aspecto que podríamos incluir o no, depende de los criterios dentro de la usabilidad.

73
00:08:14,000 --> 00:08:26,000
Bueno, la accesibilidad, claro, de qué facilidad tengo para llegar a esa información,

74
00:08:26,000 --> 00:08:29,000
llegar y entenderla.

75
00:08:29,000 --> 00:08:36,000
Entonces para eso tengo que tener en cuenta quiénes son mis usuarios.

76
00:08:36,000 --> 00:08:42,000
Y en mis usuarios tengo muchas variaciones,

77
00:08:42,000 --> 00:08:54,000
tengo muchos estilos, muchos modelos mentales, muchas preferencias distintas, requisitos diferentes.

78
00:08:54,000 --> 00:09:01,000
Entonces, bueno, eso es lo apasionante de las interfaces.

79
00:09:01,000 --> 00:09:11,000
Es un tema complejo y la complejidad se ve en lo mala que son el 98% de las interfaces.

80
00:09:11,000 --> 00:09:16,000
La unidad 4, Responsive Web Design, diseño adaptativo.

81
00:09:16,000 --> 00:09:26,000
Bueno, claro, nuestras interfaces las vamos a ver en muchos dispositivos con pantallas muy diferentes tamaños.

82
00:09:26,000 --> 00:09:37,000
Un reloj, una televisión, el tamaño es diferente y eso nos lleva a problemas distintos.

83
00:09:37,000 --> 00:09:45,000
Bueno, ¿cómo hacer que nuestro diseño se adapte a los diferentes tamaños de las pantallas?

84
00:09:45,000 --> 00:09:50,000
Eso es un problema importante, que antes no se hacía.

85
00:09:50,000 --> 00:09:58,000
Bueno, pues ahora sí, ahora nuestros diseños tienen que ser adaptativos, tienen que ser responsive design.

86
00:09:58,000 --> 00:10:04,000
También llaman diseño responsivo, que suena muy mal, yo prefiero diseño adaptativo.

87
00:10:04,000 --> 00:10:06,000
Bueno, la unidad 5, Bootstrap.

88
00:10:06,000 --> 00:10:17,000
Bueno, este es un marco, un framework de facilidades, de componentes que ya están prefabricados

89
00:10:17,000 --> 00:10:20,000
y que yo los cojo y los utilizo para mis interfaces.

90
00:10:20,000 --> 00:10:23,000
No tengo que partir de cero.

91
00:10:23,000 --> 00:10:26,000
Ah, bien, esto es cocina precocinada.

92
00:10:26,000 --> 00:10:33,000
Vale, yo tengo ya muchos elementos de interfaces dentro de este marco de referencia, dentro de este framework

93
00:10:33,000 --> 00:10:36,000
y me facilita el tema.

94
00:10:36,000 --> 00:10:45,000
Vale, que quiero hacer una tabla que se pliegue, despliegue, no lo tengo que programar en HTML y CSS.

95
00:10:45,000 --> 00:10:49,000
Ya está, la cojo y la utilizo y la configuro.

96
00:10:49,000 --> 00:10:51,000
El 6, Imágenes.

97
00:10:51,000 --> 00:11:00,000
Bueno, claro, esto está claro que es vital en la época en la que estamos, el mundo de las imágenes.

98
00:11:00,000 --> 00:11:05,000
Bueno, pues saber manejar las imágenes, las características que tienen las imágenes,

99
00:11:05,000 --> 00:11:14,000
los distintos tipos de imágenes que hay, los formatos y para utilizarlo en mis sitios web.

100
00:11:14,000 --> 00:11:22,000
¿Cómo debo de utilizar esas imágenes? ¿Cómo las debo de configurar para que el sitio esté bien diseñado?

101
00:11:22,000 --> 00:11:27,000
Bueno, la 7 es Audio y Vídeo, pues lo mismo que las imágenes.

102
00:11:27,000 --> 00:11:34,000
¿Qué características, qué formatos deben de tener esos audios, esos vídeos para que sean estándares

103
00:11:34,000 --> 00:11:39,000
y para que sean accesibles, usables, etcétera, etcétera?

104
00:11:39,000 --> 00:11:47,000
Y finalmente la unidad 8 es SaaS, es el software como servicio.

105
00:11:47,000 --> 00:11:56,000
Bueno, el software es así como realmente hay que verlo, como un servicio que puede venir a través de una aplicación,

106
00:11:56,000 --> 00:12:05,000
puede venir a través de una página web o, como seguramente será más próximamente en el futuro,

107
00:12:05,000 --> 00:12:10,000
a través de un enchufe, que yo tendré la pared de mi casa, la habitación,

108
00:12:10,000 --> 00:12:20,000
y ahí me enchufo y ahí tendré el servicio web, es decir, mis aplicaciones ya no las tendré en mi computadora,

109
00:12:20,000 --> 00:12:23,000
sino que me vendrán por la red.

110
00:12:23,000 --> 00:12:31,000
Bueno, pues este es el módulo, espero que os guste y que os divierta mucho.

111
00:12:31,000 --> 00:12:33,000
Hasta luego.