Activa JavaScript para disfrutar de los vídeos de la Mediateca.
Presentación Diseño Interfaces - Contenido educativo
Ajuste de pantallaEl ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:
Presentación del módulo Diseño de Interfaces
Hola, os voy a presentar el módulo diseño de interfaces web, bueno, interfaces,
00:00:00
bueno, esto es interesantísimo porque la interfaz es lo que nos permite
00:00:10
la comunicación entre la máquina, el ordenador, la aplicación y el humano,
00:00:18
por lo tanto estamos constantemente rodeados de interfaces, así que es un
00:00:24
módulo pues muy básico, muy interesante y muy vital.
00:00:32
Yo diría, centrándolo en las interfaces web, en los servicios web, en los sitios
00:00:39
web, en general son horribles, yo diría que el 98% de las interfaces web son
00:00:47
malísimas, malísimas y horrorosas, bueno, pues ya explicaré o ya veremos
00:00:57
por qué digo esto y por eso la importancia de tener una buena visión,
00:01:05
unos buenos principios, un buen proceso de diseño de interfaces web, porque
00:01:14
constantemente nos estamos comunicando con las máquinas y cada vez más es en
00:01:21
el formato web.
00:01:27
Les recomiendo dos películas que son interesantes para lo que son las
00:01:30
interfaces, una es Her,
00:01:38
esta es, bueno, iba a decir reciente, bueno, no tan
00:01:44
reciente, pero bueno, muy interesante la película, de cómo el protagonista
00:01:50
se enamora de su sistema operativo y otra película también interesante para el
00:02:00
tema de las interfaces es Ex Máquina, bueno, pues ahí nos puede dar ideas,
00:02:07
ideas de lo que va esta asignatura y les traigo también, bueno, tres ejemplos
00:02:15
de interfaces, este es un iPod, es un iPod ya bastante antiguo y bueno, pues la
00:02:25
interfaz se hace a través de una pantalla gráfica visual, ¿vale?
00:02:34
Esta es una forma que nos permite de comunicarnos con la máquina, por
00:02:44
ejemplo, para escuchar música, pero también fijaros esta interfaz,
00:02:52
esta ya es diferente, bueno, con la primera podré hacer más cosas y
00:03:01
posiblemente de forma más fácil, bueno, con esta a lo mejor ya no puedo hacer
00:03:12
tantas cosas y después lo que me gustó es que lo que hizo Steve Jobs y si lo
00:03:18
cortamos por la mitad, pues si lo cortamos por la mitad
00:03:25
nos vamos a éste.
00:03:31
¡Ah, qué interesante! O sea, ¿y con esto yo puedo manejar
00:03:36
toda mi biblioteca de música? Pues sí, también puedo manejarlo, bueno, pues son
00:03:41
tres ejemplos de interfaces y las interfaces tienen que ser usables,
00:03:47
accesibles, funcionales, etcétera, etcétera, bueno, pues temas así como estos son los
00:03:57
que en este módulo se ven, insisto, es un módulo vital porque una vez que se
00:04:05
estudia esto y se comprende, pues se ve que, con pensamiento crítico, que todas
00:04:11
las interfaces, el 98% de las interfaces, según mi opinión, de los servicios web
00:04:19
son horrorosas. Bien, pero ¿qué se va a ver en este módulo llamado Diseño de
00:04:26
Interfaces Web? Bueno, la unidad uno es la usabilidad, eso es fundamental, con eso
00:04:33
os recomiendo que hagáis el esfuerzo de entender bien qué es
00:04:42
usabilidad, esto es básico, no solamente para la web, sino para cualquier máquina,
00:04:49
para cualquier sistema, algo fundamentalísimo, la usabilidad.
00:04:55
Dentro de la usabilidad hay muchos factores, voy a mencionar algunos solos,
00:05:04
como la facilidad de uso de algo, de un aparato, la accesibilidad, etcétera, etcétera,
00:05:08
o, por ejemplo, ¿y si dividimos la usabilidad en función de la edad?
00:05:18
No es lo mismo diseñar un sitio web para un niño, para un adolescente, para un
00:05:25
joven, para un adulto o para un senior, como yo, no es lo mismo.
00:05:34
Por ejemplo, bueno, todos sabemos que hay características muy diferentes, pero voy
00:05:43
a poner dos extremos, un niño y un senior. Un niño,
00:05:50
una de las características es la impaciencia,
00:05:55
entonces, si no consigue rápidamente lo que está buscando, eso lo deja, ese sitio
00:05:58
lo abandona. En cambio, un senior, como yo,
00:06:04
las características que tenemos es la paciencia, bueno, no nos importa,
00:06:10
estamos ahí buscando una y otra vez hasta dar con el tema.
00:06:16
Bueno, esas son dos características de las muchas que hay,
00:06:21
bueno, pues esos son aspectos básicos de la usabilidad.
00:06:25
La unidad dos, hojas de estilo, el estilo.
00:06:29
Bueno, el estilo es otro aspecto muy importante, porque se separó,
00:06:33
en vez de, igual que con los datos se hizo en los programas,
00:06:40
antes los programas informáticos, los datos estaban mezclados con las
00:06:44
instrucciones y llega un momento en que se separan y entonces los datos se mandan
00:06:48
a una base de datos, eso, qué gran avance.
00:06:53
Bueno, pues con el estilo pasó lo mismo, antes en los sitios web, las páginas,
00:06:57
el estilo estaba mezclado con las etiquetas, bueno, pues a partir de un momento
00:07:02
se separa el estilo y entonces con un estilo que está separado de ese código HTML,
00:07:08
pues lo que conseguimos es, primero, una organización muy buena
00:07:16
y más facilidad de entender y de diseñar.
00:07:21
Y además el estilo, con el estilo controlamos cosas como tipografía,
00:07:26
color de figura, color de fondo, pero también algo importantísimo que lleva el estilo,
00:07:31
que es el posicionamiento de los elementos web.
00:07:38
De cómo se coloca un elemento dentro de la página, el responsable de eso es el estilo.
00:07:42
Eso es lo que a los principiantes les cuesta mucho al comienzo, porque no entienden muy bien
00:07:52
las diferentes formas de posicionar.
00:07:58
Vale, el 3 es la accesibilidad.
00:08:01
Otro aspecto que podríamos incluir o no, depende de los criterios dentro de la usabilidad.
00:08:05
Bueno, la accesibilidad, claro, de qué facilidad tengo para llegar a esa información,
00:08:14
llegar y entenderla.
00:08:26
Entonces para eso tengo que tener en cuenta quiénes son mis usuarios.
00:08:29
Y en mis usuarios tengo muchas variaciones,
00:08:36
tengo muchos estilos, muchos modelos mentales, muchas preferencias distintas, requisitos diferentes.
00:08:42
Entonces, bueno, eso es lo apasionante de las interfaces.
00:08:54
Es un tema complejo y la complejidad se ve en lo mala que son el 98% de las interfaces.
00:09:01
La unidad 4, Responsive Web Design, diseño adaptativo.
00:09:11
Bueno, claro, nuestras interfaces las vamos a ver en muchos dispositivos con pantallas muy diferentes tamaños.
00:09:16
Un reloj, una televisión, el tamaño es diferente y eso nos lleva a problemas distintos.
00:09:26
Bueno, ¿cómo hacer que nuestro diseño se adapte a los diferentes tamaños de las pantallas?
00:09:37
Eso es un problema importante, que antes no se hacía.
00:09:45
Bueno, pues ahora sí, ahora nuestros diseños tienen que ser adaptativos, tienen que ser responsive design.
00:09:50
También llaman diseño responsivo, que suena muy mal, yo prefiero diseño adaptativo.
00:09:58
Bueno, la unidad 5, Bootstrap.
00:10:04
Bueno, este es un marco, un framework de facilidades, de componentes que ya están prefabricados
00:10:06
y que yo los cojo y los utilizo para mis interfaces.
00:10:17
No tengo que partir de cero.
00:10:20
Ah, bien, esto es cocina precocinada.
00:10:23
Vale, yo tengo ya muchos elementos de interfaces dentro de este marco de referencia, dentro de este framework
00:10:26
y me facilita el tema.
00:10:33
Vale, que quiero hacer una tabla que se pliegue, despliegue, no lo tengo que programar en HTML y CSS.
00:10:36
Ya está, la cojo y la utilizo y la configuro.
00:10:45
El 6, Imágenes.
00:10:49
Bueno, claro, esto está claro que es vital en la época en la que estamos, el mundo de las imágenes.
00:10:51
Bueno, pues saber manejar las imágenes, las características que tienen las imágenes,
00:11:00
los distintos tipos de imágenes que hay, los formatos y para utilizarlo en mis sitios web.
00:11:05
¿Cómo debo de utilizar esas imágenes? ¿Cómo las debo de configurar para que el sitio esté bien diseñado?
00:11:14
Bueno, la 7 es Audio y Vídeo, pues lo mismo que las imágenes.
00:11:22
¿Qué características, qué formatos deben de tener esos audios, esos vídeos para que sean estándares
00:11:27
y para que sean accesibles, usables, etcétera, etcétera?
00:11:34
Y finalmente la unidad 8 es SaaS, es el software como servicio.
00:11:39
Bueno, el software es así como realmente hay que verlo, como un servicio que puede venir a través de una aplicación,
00:11:47
puede venir a través de una página web o, como seguramente será más próximamente en el futuro,
00:11:56
a través de un enchufe, que yo tendré la pared de mi casa, la habitación,
00:12:05
y ahí me enchufo y ahí tendré el servicio web, es decir, mis aplicaciones ya no las tendré en mi computadora,
00:12:10
sino que me vendrán por la red.
00:12:20
Bueno, pues este es el módulo, espero que os guste y que os divierta mucho.
00:12:23
Hasta luego.
00:12:31
- Autor/es:
- Rafael Cañadas Martínez
- Subido por:
- Rafael C.
- Licencia:
- Dominio público
- Visualizaciones:
- 17
- Fecha:
- 11 de noviembre de 2022 - 16:16
- Visibilidad:
- Público
- Centro:
- C. DOC. MILITAR Academia de Ingenieros del Ejercito de Tierra
- Duración:
- 12′ 32″
- Relación de aspecto:
- 1.78:1
- Resolución:
- 1920x1080 píxeles
- Tamaño:
- 1.65
