[MÚSICA]
En estos días, en el mundo del desarrollo web, a menudo escuchamos a la gente
mencionar los términos «diseño responsivo» y «enfoque móvil».
Intentemos comprender qué se entiende por estos términos y
cómo afectan a la forma en que diseñas tus sitios web y tus aplicaciones web.
Su pregunta obvia será ¿por qué considerar el diseño receptivo?
Para ayudarnos a entender esto, consideremos cómo la gente accede a los sitios web en estos días?
Tradicionalmente, cuando los sitios web se diseñaron por primera vez, se podría suponer
que las personas navegarán por sus sitios web desde un ordenador.
En estos días, sus sitios web pueden ser visitados desde un smartphone, una tableta o
un ordenador con diferentes tamaños de pantalla y resoluciones de pantalla.
¿ Cómo renderizamos nuestros sitios web consistentemente en dispositivos de diferentes tamaños de pantalla?
El único tamaño se adapta a todos los enfoques que
los diseñadores de sitios web tradicionales han tomado ya no factura fija.
Necesitamos un enfoque mejor, un enfoque que
adapte automáticamente su sitio web al tamaño de la pantalla en la que se está visualizando.
Aquí es donde tenemos que adoptar un enfoque para adaptarnos al puerto de vista del usuario.
Esto tiene que ser incorporado en el diseño y desarrollo de su sitio web para
que se adapte automáticamente a la ventana gráfica del dispositivo del usuario.
Para ayudarle a apreciar mejor la necesidad de
abordar dispositivos de diferentes tamaños de pantalla.
Estoy tomando la ayuda de las opciones de desarrollador que podría Safari navegador
proporciona que me permite ver el sitio web con pantallas de diferentes tamaños.
Así que espero convencer de usted de por qué hemos hecho un diseño web sensible.
Así que aquí se ve que Coursera sitio web se
renderiza en un 1920 por 1080 sitios de pantalla.
Esto sería un escritorio grande típico o una pantalla portátil de alta resolución.
Entonces vamos a considerar el mismo sitio web que se está viendo usando una pantalla más pequeña como.
Así que verá automáticamente su diseño de pantalla se
ajusta ligeramente al tamaño de la ventana gráfica de su dispositivo,
lo mismo en 800 por 600.
Así que vamos a bajar en tamaños de pantalla, esta es una vista cercana del iPad del mismo sitio.
Este es un tamaño iPad Air 2, este es un tamaño iPad Mini 4,
tenga en cuenta la transición de un
tamaño iPad Mini 4 a un iPhone 6S Plus en modo vertical.
Ahora notarás que el robot de navegación se ha contraído en un botón aquí,
que al hacer clic revelará las opciones de tu Navegación Bash.
Y veamos lo mismo en nuestro iPhone 6S
en modo horizontal, observe cómo la pantalla se adopta a sí misma.
Del mismo modo para un iPhone 6S en modo horizontal y
vaya a un iPhone SE, y verá cómo el sitio web
ha cambiado la forma en que se está renderizando.
Así que, con suerte, este ejemplo te ha ilustrado cómo y
por qué necesitamos un diseño web sensible.
El segundo concepto relacionado que escucharás es el móvil primero.
El primer enfoque móvil en su lugar se centra
primero en diseñar un sitio web para un dispositivo móvil.
Por lo tanto, considere cómo satisfaría las limitaciones de pantalla de su dispositivo móvil.
Y luego, a medida que el tamaño de la pantalla se expande, usted
iniciaría automáticamente una aplicación a su sitio web a los tamaños de pantalla más grandes y más grandes.
Tal vez, usted está dispuesto más y más del contenido.
Con el fin de aprovechar el aumento de la pantalla de bienes raíces.
Por lo tanto, el mismo sitio web cuando se ve en un dispositivo móvil puede tener sólo
partes de la información que se revela al usuario.
Pero luego, cuando se representa en un escritorio completo,
podría mostrar una versión mucho más detallada del sitio web.
Ahora esto tiene que ser adaptado automáticamente en función de la información
que obtiene del dispositivo desde el que se está viendo su sitio web.
Entonces, ¿cómo obtenemos esta información?
Afortunadamente, hacer un diseño web adaptable es compatible con
muchos de los marcos de interfaz de usuario web front-end modernos, incluyendo Bootstrap.
Así que cuando miramos la definición de Bootstrap en su página web, dice,
enfoque móvil sensible primero.
Sí, ¿cómo vamos haciendo un diseño web sensible?
Por lo tanto, hay varios conceptos que están integrados en sus
marcos de interfaz de usuario web de tiempo de fotograma que vienen en la ayuda cuando necesita hacer un diseño web sensible.
En primer lugar, lo que se llama es un sistema de cuadrícula?
Vamos a ver el sistema de Grid de Bootstrap con más detalle en la próxima
conferencia.
Para que entendamos exactamente cómo podemos aprovechar eso para poder hacer un
diseño web sensible.
El segundo aspecto son las imágenes fluidas, de modo que las imágenes que incluya en su
sitio web se adaptarán automáticamente al tamaño de la pantalla.
Y la tercera parte es lo que se llama consultas de medios CSS desde su código CSS.
Puede consultar el tamaño de los medios y, a continuación, ajustar adecuadamente sus clases CSS
para ajustarse al tamaño de la pantalla del dispositivo.
Ahora, ¿cómo funcionan las consultas de medios?
Veamos eso a continuación.
Las consultas de medios son compatibles con CSS como este.
Por lo tanto, la tecnología le permite hacer una consulta de medios para especificar el ancho mínimo
de la pantalla bajo la cual este conjunto particular de clases CSS estará activo.
Entonces esto se especificaría en su archivo CSS como @media, y
luego dentro del corchete, especifique, por ejemplo, min-width.
Hay muchas más opciones para las consultas de medios que las que estoy mostrando aquí.
Este es solo un ejemplo de cómo construiría una consulta de medios en su código CSS.
Echando un vistazo al código CSS de Bootstrap
en sí, vamos a ver cómo Bootstrap está utilizando las consultas de medios.
Así que aquí puede ver un ejemplo de una consulta de medios donde dice @media y un
ancho mínimo de 576 píxeles.
Y luego especifica que los contenedores de llamadas de clase CSS en particular,
sobre el que aprenderemos más en la próxima conferencia,
y también en el ejercicio que sigue.
Veremos que el ancho del contenedor se establece en función del ancho de la pantalla.
Del mismo modo, para una pantalla de mayor ancho, el ancho del contenedor se ajusta automáticamente.
Entonces, esto es lo que permite que su marco de interfaz de usuario web
admita el diseño web receptivo.
Por lo tanto, haciendo consultas de medios, su marco de interfaz de usuario web puede
establecer en qué tipo de dispositivo está renderizando su sitio web.
Y, en consecuencia, ajuste las clases CSS para
adaptarse a ese tamaño de pantalla de dispositivos en particular.
Entonces, obviamente, la siguiente pregunta que va a surgir en su mente es ¿cómo
hacemos esto en la práctica?
Afortunadamente, si comienza con un
marco de interfaz de usuario web front-end bien diseñado como Bootstrap, las cosas se vuelven muy sencillas.
Aprenderemos más sobre esto en la próxima conferencia y el ejercicio que sigue.
[ MÚSICA]