Diseño responsive - Introducción

Loading...

来自 Universidad Austral 的课程

Diseñando páginas web con Bootstrap 4

个评分

Universidad Austral

Diseñando páginas web con Bootstrap 4

个评分

Este curso te enseñará conceptos generales de desarrollo web del lado cliente, metodologías de trabajo y herramientas. Aprenderás sobre diseño responsive, grillas, y componentes CSS y Javascript de Bootstrap. Practicarás con preprocesadores de CSS, Less y Sass. También aplicarás conceptos básicos de Node.js y NPM para gestionar tus sitios web. Al finalizar este curso, habrás practicado con todas esas herramientas y serás capaz de diseñar una página web e implementar ese diseño con Bootstrap, crear un diseño responsive y preparar tu sitio web para salir a producción.

从本节课中

Presentación de Bootstrap 4.0

Este módulo te dará una introducción a la programación web full stack y una rápida visión del curso completo en general. Aprenderás conceptos básicos de Bootstrap, inicializar un proyecto utilizando NPM, configurar tu repositorio utilizando Git y Bitbucket. Aprenderás sobre diseño responsive y sistemas de grillas de Bootstrap.

Diseño responsive - Introducción5:02

Diseño responsive - Introducción B2:46

Sistema de grillas9:31

Utilizando Flex30:07

与讲师见面

Ezequiel Lamónica
Licenciado en Ciencias de la Computación (UBA), IAE EMBA Candidate 2018.

[MÚSICA] [MÚSICA]

[MÚSICA] El

diseño web responsive o receptivo, término sugerido por Google,

se comenzó a gestar a mediados del 2018 en la World Wide Web Consortium W3C,

con la recomendación de Mobile Web Best Practices bajo el título One Web.

Las ideas originales de este concepto de página única que se adapta a cualquier

dispositivo se debe a Ethan Marcotte, que se encargó de difundir en una serie de

artículos en A list apart, una publicación especializada en diseño y desarrollo web.

Estos artículos se extenderían luego en su libro Responsive web design.

Aquí hablamos de desarrollar una web que se adapte al formato del dispositivo en

que se ve, tanto si es una tableta Apple o Android o un celular Apple o Android

de cualquier fabricante o una computadora de escritorio.

Es necesario que sea así porque deseamos darle una experiencia agradable a nuestro

usuario más allá de que sea utilizable nuestro sitio.

Pero, ¿qué necesitamos para lograr eso?

Buscamos que un texto se vea con un tamaño mayor en una pantalla pequeña

y que escale proporcionalmente en una pantalla más grande.

Buscamos que una imagen se vea proporcionalmente al dispositivo

y que se adapte al contexto donde se muestra.

Buscamos contenedores de texto e imágenes flexibles

para que se modifiquen de acuerdo a nuestras necesidades.

Para ello, debemos podemos indicarle al navegador qué tamaño de fuentes,

de imágenes de elementos utilizar de acuerdo al dispositivo.

Una forma de hacerlo podría ser especificar

todos los estilos posibles para cada tipo de dispositivo existente en la actualidad.

Pero esto parece un poco costoso y arduo.

Hay cientos de miles de dispositivos y cada vez surgen nuevos formatos.

No parece ser muy mantenible esta idea.

Una idea mejor sería ajustar los elementos de acuerdo al

ancho y alto de nuestra página.

Acá se asume que los dispositivos son rectangulares.

Hoy en día esto no es un problema, pero seguramente si las pantallas cambian de

forma, habrá que pensar otra manera de especificar los formatos.

Idealmente, buscamos que nuestro contenido se adapte proporcionalmente al tamaño de

la pantalla.

¿Dónde definimos esto?

Ciertamente va a ser en la sección de estilos, en los CSS.

Veamos brevemente cómo fue evolucionando históricamente este concepto.

En la versión CSS 2.1 se incorporó el atributo media type,

que nos permite ajustar el contenido al formato de visualización que queremos.

Teníamos una lista de valores para definir de acuerdo a nuestra necesidad.

La primera línea se carga solo si se ve en una pantalla

y la segunda solo si es en la vista de impresión.

De esta forma, podíamos especificar estilos de impresión que se adapten a la

hoja a imprimir y diferenciarlos del formato de pantalla del dispositivo.

Si bien fue un avance, no todos los navegadores implementaron correctamente

los media types y la lista de valores definidos tampoco eran suficientes.

Notá que por ejemplo el media type screen

no alcanza para definir el tamaño de pantalla.

Más tarde, la

W3C creó el CSS3 incorpora los media query mejorando notablemente los media type.

Los media query permiten escribir cláusulas lógicas en el atributo media

para especificar el criterio de aplicación del CSS.

Veamos un ejemplo.

En esa línea se especifica que el CSS colores se aplica solo si el dispositivo

es una pantalla y el tamaño máximo de su resolución horizontal es de 480 píxeles.

Claramente podrás notar que la expresividad de las queries

permiten ser muy específicas con los estilos que deseamos aplicar y,

por lo tanto, lograr una capacidad de adaptación suficientemente genérica para

utilizar en cualquier dispositivo.

Hay una sintaxis particular y determinados tipos de clave

que podemos utilizar para armar las queries.

Las iremos viendo a lo largo del curso.

También podés utilizar las queries en reglas.

Resumiendo, los enfoques receptivos aplican a tipos de dispositivo,

tamaños de dispositivo, imágenes y fuentes.

Tenemos que tener en cuenta que no siempre es necesario pensar

en hacer un diseño responsive.

Más que nada por el costo que esto implica y porque muchas veces

puede ser que la necesidad sea hacer una página

que aplique solamente a un tipo de dispositivo concreto.

Pero está claro, de todas formas, que el camino a seguir en el diseño web

es el diseño responsive.

[MÚSICA] [MÚSICA]

探索我们的目录

免费加入并获得个性化推荐、更新和优惠。

Coursera 致力于普及全世界最好的教育，它与全球一流大学和机构合作提供在线课程。

© 2018 Coursera Inc. 保留所有权利。

通过 App Store 下载

通过 Google Play 获取