4. TEORÍA DISEÑO RESPONSIVE

Después de esta lección, usted podrá:

  1. Conocer el concepto Responsive (RWD) y sus técnicas
    1. Técnicas generales usadas
    2. La importancia del diseño Responsive
    3. Medidas Responsive
    4. Las medidas relativas
    5. Media Queries
  2. Utilidades
  3. Boostrap
    1. Framework
    2. Biblioteca en ASP.Net
    3. Sistema de columnas -Gridx12
    4. Móvil first!
       
  4. Cross-Browsers
    1. Detectar características del navegador
    2. Identificar las extensiones de los proveedores para cada navegador
    3. Crear aplicaciones para múltiples navegadores (videos Practica Ya!)
  5. Paleta de colores (Hexadecimal)
  6. Aplicar los aspectos teóricos en cada video tutorial

TIEMPO ESTIMADO: 18 MINUTOS


RESPONSIVE (adaptativo)– DISEÑAR PARA DISTINTOS DISPOSITIVOS  3

La experiencia del usuario será diferente para las personas que usan computadoras de escritorio en comparación con los dispositivos móviles.

Los usuarios de dispositivos móviles obtendrán una versión muy pequeña de la página completa que se muestra en sus dispositivos, o una página que se muestra en el tamaño normal con barras de desplazamiento verticales y horizontales. Y no existirá una buena experiencia de usuario.

El diseño incluido con la plantilla de proyecto MVC predeterminada es compatible con los navegadores de escritorio que se ejecutan en una vista de paisaje típica.

Para mostrar la vista de retrato en computadoras de escritorio o para admitir dispositivos móviles navegadores, puede incluir consultas @media con diseños específicos para varias resoluciones. Estas consultas le permiten usar diferentes versiones de CSS basadas en la información de visualización del hardware que solicita la página.

Si se orienta a pantallas más pequeñas, debe crear una página maestra optimizada para dispositivos móviles, así como diseños y diseños optimizados para dispositivos móviles.

CSS + HTML5 + JQuery Mobile: sus herramientas para diseño multidispositivo 3

Para crear un diseño optimizado para dispositivos móviles, copie el archivo de diseño principal (_Layout.cshtml) y renómbrelo como _Layout.Mobile.cshtml.

TÉCNICAS GENERALES  4

Como parte de las técnicas para crear layouts Responsive, se encuentran:

Reposición :Puede modificar la ubicación y la posición de los elementos de la interfaz de usuario para aprovechar al máximo el tamaño de la ventana. (Fuente de las figuras: Microsoft Corporation)

Resize: Puede optimizar el tamaño de la ventana ajustando los márgenes y el tamaño del elemento de la interfaz de usuarios.

Reflow: Al cambiar el flujo de elementos de la interfaz de usuario en función del dispositivo y la orientación, su aplicación puede ofrecer una visualización óptima del contenido

Mostrar ocultar: Puede mostrar u ocultar elementos de la interfaz de usuario en función del espacio de la pantalla o cuando el dispositivo admita funciones adicionales, situaciones específicas o orientaciones de pantalla preferidas.

Reemplazar: Esta técnica le permite cambiar la interfaz de usuario para un punto de interrupción específico.

Rearquitectura: Puede colapsar o bifurcar la arquitectura de su aplicación para apuntar mejor a dispositivos específicos. En este ejemplo, expandir la ventana muestra todo el patrón maestro / detalles.

PORQUÉ ES IMPORTANTE EL DISEÑO (RWD) RESPONSIVE WEB DESIGN?

 La experiencia de usuario debe ser prioritaria a la hora de pensar en tu estrategia SEO (tema a estudiar en el nivel avanzado II).

Las webs con mejor experiencia de usuario gustarán más, serán más compartidas, mejor valoradas, más populares. Y eso en SEO es muy importante. 5

Medidas usadas en el diseño Responsive 10

  1. «Ems» (em):  el «em» es una unidad escalable que se utiliza en medios de documentos web. Un em es igual al tamaño de letra actual, por ejemplo, si el tamaño de fuente del documento es 12pt, 1em equivale a 12pt. Los Ems son escalables por naturaleza, por lo que 2em equivaldrían a 24pt, .5em equivaldrían a 6pt, etc. Los Ems son cada vez más populares en los documentos web debido a la escalabilidad y su naturaleza amigable para dispositivos móviles.
  2. Píxeles (px): los  píxeles son unidades de tamaño fijo que se utilizan en medios de pantalla (es decir, para leer en la pantalla de la computadora). Un píxel equivale a un punto en la pantalla de la computadora (la división más pequeña de la resolución de su pantalla). Muchos diseñadores web usan unidades de píxeles en documentos web para producir una representación perfecta de píxeles de su sitio a medida que se representa en el navegador. Un problema con la unidad de píxeles es que no escala hacia arriba para lectores con discapacidad visual o hacia abajo para adaptarse a dispositivos móviles.
  3. Puntos (pt): los  puntos se usan tradicionalmente en los medios impresos (todo lo que se va a imprimir en papel, etc.). Un punto es igual a 1/72 de pulgada. Los puntos se parecen mucho a los píxeles, ya que son unidades de tamaño fijo y no pueden escalar en tamaño.
  4. Porcentaje (%):  la unidad de porcentaje es muy parecida a la unidad «em», salvo por algunas diferencias fundamentales. En primer lugar, el tamaño de letra actual es igual al 100% (es decir, 12pt = 100%). Al usar la unidad de porcentaje, el texto sigue siendo totalmente escalable para dispositivos móviles y para el acceso.

Distinga las Ventajas&Desventajas&Diferencias AQUÍ

MEDIDAS RELATIVAS

CSS3 le permite tomar decisiones de diseño basadas en las reglas del navegador con respecto al ancho máximo de pantalla.

Por ejemplo, puede proporcionar automáticamente un menú horizontal para navegadores que admiten más de 800 píxeles y un menú vertical para navegadores cuyo tamaño de ventana máximo es inferior a 800 píxeles. Para implementar esto correctamente, tendrá que usar un diseño completamente basado en CSS.

La idea básica de un grid fluido es utilizar la fórmula que nos provee Ethan Marcotte para
convertir dimensiones absolutas basadas en pixeles en unidades relativas.

Ejemplo:

Si nuestra área del Layout ocupa 900 pixeles de ancho para dos columnas, una de ellas 680px y la otra de 220px, y deseamos transformar estas medidas a porcentajes, debemos de dividir el objetivo entre el contexto padre, para este ejemplo:

680/900=75,5%
220/900=24,4%

En el código CSS se deben emplear estos porcentajes:

#column1 { width: 75.5%; }
#column2 { width: 24.4%; }

IMAGENES RESPONSIVE

Respecto a las imágenes, Ethan Marcote propone el uso del atributo max-width.

img { max-width: 100%;}

Así, el ancho de la imagen, nunca superará el ancho de su contenedor.

Por otra parte, se pueden incluir otro tipo de objetos adaptables a la declaración del atributo. Por ejemplo, para el caso de un vídeo:

img, object, embed, video { max-width: 100%}

El siguiente ejemplo, muestra el encapsulamiento dentro de una capa que es formateado en nuestro archivo de Estilo:

Ahora en el archivo de MiEstilos.css, tenderemos este código:

#imgResponsive
{
   width: 80%;
   margin: 0 0;
}

Y este será el máximo permitido:

img
{
   max-width: 100%;
}

En ASP.Net, Se debe instalar de los paquetes Nuget, el jQuery Mobile framework. Su funcionalidad es crear automáticamente diseños específicos para dispositivos móviles, para una aplicación MVC, si los diseños no existieran antes de instalar el paquete. Finalmente, debe modificarse el archivo Global.asax para acomodar varios navegadores móviles.

MEDIA QUERIES

Módulo introducido en CSS para adaptar el contenido a cualquier dispositivo

Consiste de un media type y una o más expresiones, que implican media features, que se resuelve en true o false.  8

Una media query nos permite apuntar no sólo a ciertas clases de dispositivos, sino realmente inspeccionar las características físicas del dispositivo que está renderizando nuestro trabajo. 7

Por ejemplo, siguiendo el reciente crecimiento de los dispositivos móbiles, las media queries se han convertido en una técnica del lado del cliente para entregar una hoja de estilos a medida para el iPhone, los teléfonos con Android y sus semejantes. Para hacerlo, podemos incorporar una query al atributo media de una hoja de estilos linkeada:

<link rel="stylesheet" type="text/css" media="screen and 
(max-device-width: 480px)" href="MoviliPhone.css" />

La anterior query contiene dos componentes:

  1. un media type (screen), y
  2. la consulta entre paréntesis, conteniendo una característica a inspeccionar (max-device-width) seguida por el valor al que apuntamos (480px).

En otras palabras, le estamos preguntando al dispositivo si su resolución horizontal (max-device-width) es igual o menor que 480px. Si la pregunta pasa -en otras palabras, si estamos viendo nuestro trabajo en un dispositivo con una pantalla pequeña como el iPhone- entonces el dispositivo cargará MoviliPhone.css. De lo contrario, el link es completamente ignorado.

Pero las media queries no solo se pueden manejar con un link. Se pueden incluir en el archivo CSS, así:

@media screen and (max-device-width: 480px) {
.column {
float: none;
}
}

Además, para el caso de ASP.Net, se podrá agregar usando una directiva de tipo import:

@import url("shetland.css") screen and (max-device-width: 480px);

A la hora de utilizar los media queries debemos de tener en cuenta el ancho de ventana del navegador y no la resolución de pantalla del dispositivo. Por ejemplo si definimos una media query como la siguiente:

<link rel="stylesheet" media="screen and (min-device-width: 960px)"
href="960.css” />

El atributo min-device-width tiene en cuenta la resolución del dispositivo a la hora de ejecutar el CSS, esto quiere decir que si reducimos el ancho del navegador, seguirá mostrándose de la misma manera ya que la resolución seguirá manteniéndose, por lo que no se adaptará al nuevo ancho de ventana. Por lo tanto, lo más adecuado es parametrizar estas acciones teniendo en cuenta el ancho de ventana del navegador y no de la resolución del dispositivo.

La siguiente media querie, permite ajustar el contenido acorde al ancho que adopte la ventana, como mínimo de 960px:

@media screen and (min-width: 960px) {
/* Código CSS*/
}

La siguiente tabla, recoge las media queries más usadas: 8

AtributoValorMin/Max
colorintegersi
color-indexintegersi
device-aspect-ratiointeger/integersi
device-heightlengthsi
device-widthlengthsi
gridintegerno
heightlengthsi
monochromeintegersi
resolutionresolution («dpi» or «dpcm»)si
scan«progressive» or «interlaced»no
widthlengthsi

LOS NAVEGADORES Y LAS MEDIA QUERIES

Los navegadores actuales soportan el uso de media queries.

Para el caso de Internet Explorer 8, 7 y 6 se deben usar Javascript,o en su caso  Modernizr, que generalmente viene incluida en los proyectos de ASP:Net.

Esta biblioteca, incorpora código para la detección de navegador.

  if (Modernizr.awesomeNewFeature) {
    showOffAwesomeNewFeature();
  } else {
    getTheOldLameExperience();
  }

Para conocer sus futuras característas a implementar, Aquí..

UTILIDADES

Para probar y testear sus diseños Responsive, encontrará algunas utilidades en la Web.

Aunque usted puede probar su aplicación ajustando manualmente las ventas, para observar el comportamiento en otros dispositivos como tablets, móviles, etc., puede hacer uso de las siguientes utilidades:

  1. Quirktools.com / Screenfly:  Permite redimensionar con resoluciones de terminales conocidos en el mercado. También cambiar la orientación del dispositivo, activar el scroll o ajustar a las dimensiones que requeridas.
  2. Responsinator:  Ajusta el diseño mostrando cómo se visualizarían en dispositivos conocidos como IPhone, Ipad o dispositivos Android.
  3. Resize my Browser:  Herramienta online que ofrece resoluciones conocidas para ciertos dispositivos haciendo que se abra una nueva ventana del navegador con el tamaño seleccionado para probar en esas dimensiones la url que se necesiten.

¿Y Boostrap?

Boostrap es un Framework completo, que se carga con cada nuevo proyecto en ASP.Net. Su estructura esta conformada así:

  1. CSS: Esta carpeta contiene dos ficheros css más sus versiones minimizadas. Los
    ficheros son bootstrap.css y bottstrap-responsive.css. Estos ficheros se emplean
    para estimular los elementos de la web. La versión responsive incluye todos los
    componentes necesarios para incluirlos en el proyecto.
  2. JS: Esta carpeta incluye el fichero bootstrap.js además de su versión minimizada
    donde se encuentra todo el código javascript necesario para el correcto
    funcionamiento de los widgets de bootstrap.
  3. IMG: Esta carpeta incluye los sprites empleados para emplear los iconos de
    Bootstrap cedidos por Glyphicons.

En general, se tiene:

  • bootstrap/
    — css/
    — bootstrap.css
    — bootstrap.min.css
    — bootstrap-responsive.css
    — bootstrap-responsive.min.css
    — js/
    — bootstrap.js
    — bootstrap.min.js
    — img/
    — glyphicons-halflings.png
    — glyphicons-halflings-white.png

BOOSTRAP EN ASP.NET

El siguiente código, es una muestra de  inclusión de la biblioteca Boostrap en un proyecto ASP.Net:

<html>
<head>
   <link href="~/Content/bootstrap-theme.css" rel="stylesheet" />
   <link href="~/Content/bootstrap.css" rel="stylesheet" />
   <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
   <title></title>
</head>

SISTEMA DE COLUMNAS-GRID BOOSTRAP  2

El sistema se basa en un grid de 12 columnas y cubre un ancho de 940 pixels en su versión estática y entre 724 pixles y 1170 pixeles en su versión fluida.

La siguiente tabla, muestra los puntos de ruptura entre cada dispositivo:

span 1span 1span 1span 1span 1span 1span 1span 1span 1span 1span 1span 1
 span 4 span 4 span 4
span 4span 8
span 6span 6
span 12

En porcentajes se tiene:

TIPOS DE CUADRÍCULAS  2

El sistema de grilla Bootstrap tiene cuatro clases:

  • xs (para teléfonos – pantallas de menos de 768px de ancho)
  • sm (para tabletas – pantallas iguales o mayores que 768px de ancho)
  • md (para laptops pequeñas – pantallas iguales o mayores a 992px de ancho)
  • lg (para computadoras portátiles y de escritorio: pantallas de un ancho igual o superior a 1200 px)

Las clases anteriores se pueden combinar para crear diseños más dinámicos y flexibles.

Características
Bootstrap 3 Grid System
Dispositivos extra pequeños
Teléfonos (<768px)
Dispositivos pequeños
Tablets (≥768px)
Escritorios dedispositivos medianos
(≥992px)
Equiposgrandes de
sobremesa (≥1200px)
Ancho máximo del contenedorNinguno (automático)750px970px1170px
Comportamiento de rejillaHorizontal en todo momentoSe derrumbó para comenzar, horizontales por encima de los puntos de interrupción
Prefijo de clase.col-xs-.col-sm-.col-md-.col-lg-
Ancho máximo de columnaAuto~ 62 px~ 81 px~ 97px
Ancho de canal15px en cada lado de una columna (es decir, 30px)

MOVIL FIRST!

Mobile First es una filosofía desarrollada por Luke Wroblewski, la cual señala la priorización del entorno móvil frente al escritorio a la hora de desarrollar experiencias de usuario.

Mobile First se trata de la práctica de desarrollar un diseño desde su forma más básica planteándolo primeramente para la pequeña pantalla de un Smartphone, basándose en un crecimiento iterativo que aporte cimientos al diseño para otros dispositivos de mayor resolución.

La página web es creada inicialmente para dispositivos con menor capacidad y después se añaden nuevas características empleando Media Queries y CSS3. Los navegadores que no soporten esta tecnología recibirán el contenido simplificado (la versión mobile), y los navegadores avanzados trabajaran con las media queries definidos. 6

Con el sistema de cuadrícula móvil de Bootstrap, puede controlar fácilmente cómo se renderizará su sitio web en diferentes tipos de dispositivos que tienen diferentes tamaños de pantalla, como teléfonos celulares, tabletas, computadoras de escritorio, etc., como se observa en la sigueinte ilustración.

Así, el sistema de 12 columnas por 1 fila, se presenta en dispositivos móviles como 1 columna por 12 filas. Para los dispositivos tipo tablet, la configuración se redimensiona a 2 columnas por 6 filas. para el caso de los portátiles, se obtendrá un maquetado de 3 columnas por 4 filas. Y para los PC’s, se obtendrán hasta las 12 columnas por 1 fila.

Ahora, se realiza una introducción a la detección de los navegadores y la implementación de código para su funcionalidad en proyectos ASP.Net.

LOS NAVEGADORES –  cross-browsers o multi-browsers

Existen una gran variedad de navegadores. Microsoft, por ejemplo, advierte lo siguiente:

» El soporte de múltiples navegadores es un problema recurrente y persistente para los desarrolladores web. A medida que los estándares cambian y se lanzan nuevas versiones de navegadores (a veces ofreciendo nuevas características sin compatibilidad hacia atrás), los trabajos de los desarrolladores web se vuelven más difíciles. No solo deben proporcionar una mayor funcionalidad en sus aplicaciones web, sino que también deben garantizar que esas aplicaciones sean accesibles para la mayor audiencia posible. » 3

Por tal motivo, se han desarrollado varias utilidades o bibliotecas, para la detección del navegador donde se correrá su aplicación.

Entre otras, como ilustración, se tiene la biblioteca de JavaScript, para la creación de objetos tipo navigator, con sus propiedades appName , appCodeName , appVersion y userAgent. Lade más fácil implementación es appName.

Por ejemplo, si el usuario estuviera usando el navegador Mozilla, se administrarían las hojas estilos así:

  if ( navigator.userAgent.indexOf("MSIE")>0 )
  {
    // Código personalizado para este navegador...
}

En el siguiente ejemplo, se detecta si el navegador es IE. Además, se puede utilizar el operador gte  como parte del condicional:

<!--[if gte IE 7]>
  <style TYPE="text/css">
    @import url(ie7.css);
  </style>
<![endif]-->

Diseño acorde al navegador

Se deben detectar incoherencias en los navegadores y desarrollar la solución para cada caso

Debido a que algunos navegadores interpretan el código HTML y CSS distinto

Así, si se detecta que el cliente hace uso del navegador Mozilla, se podría crear un condicional para impedir que se cargue cierta utilidad o un archivo CSS que representa una vista

«La detección de funciones es un mejor método que puede eliminar las funciones no compatibles con HTML5 y actuar según los requisitos de la aplicación. La detección de funciones es especialmente útil al admitir clientes móviles porque la compatibilidad de funciones puede cambiar por dispositivo en lugar de por tipo de navegador. Dependiendo únicamente de la identificación del navegador, se pueden obtener resultados diferentes de la detección de características .» 3

Consejo: Diseñe una vista distinta o genérica por cada dispositivo móvil

System.Web.Mvc. VirtualPathProviderViewEngine.DisplayModeProvider,  son proveedores que registran el tipo de navegador/móvil.

Si el servidor recibe una solicitud «iemobile», el sistema primero buscará la vista Index.iemobile.cshtml. Como también se admite el respaldo, si no se encuentra Index.iemobile.cshtml, la aplicación buscará Index.Mobile.cshtml. Este proceso le permite crear versiones personalizadas de todas las vistas o solo las vistas seleccionadas, según sea necesario. 3

Use archivos CSS especializados para controlar las dimensiones que deben ejecutarse en cada dispositivo

EXTENSIONES DE PROVEEDORES CSS

Si un navegador no es compatible con una función que necesita su aplicación, es posible que necesite agregar bibliotecas o código JavaScript para crear la función que falta.

Al desarrollar o modificar una aplicación, debe determinar la audiencia objetivo y los navegadores que podrían usar. Esta es una tarea fácil si la aplicación será utilizada solo por un grupo selecto de personas que usan el mismo navegador. Si está creando una aplicación externa que pretende ser muy atractiva, debe asegurarse de que su aplicación se pueda utilizar en múltiples versiones de múltiples navegadores.

Para ayudar a garantizar que las características de CSS3 funcionen correctamente en diferentes navegadores web, puede usar nombres de propiedades alternativos como parte del estilo. Estas soluciones agregan una extensión específica del proveedor (también llamada prefijo de proveedor), que es una palabra clave rodeada más comúnmente por guiones, al principio de un nombre de propiedad. Para utilizar una extensión específica del proveedor, copie una línea de código que contenga una propiedad que no sea compatible con un navegador y luego agregue la extensión del proveedor al principio del nombre. Esta es la construcción típica que ve en una aplicación ASP.NET MVC, en la que necesita el mismo comportamiento en varios navegadores para lograr la misma experiencia de usuario. 3

Las extensiones específicas del proveedor comienzan con un guión (-) o un guión bajo (_) y están en uno de los siguientes formatos:

- identificador de proveedor - nombre significativo

Por ejemplo:

PrefijoFamilia de navegadores a los que aplica
-webkit-Chrome, Safari, Android, iOs
-moz-Firefox
-o-Opera
-ms-Microsoft Internet Explorer

Hasta la fecha de esta publicación, las propiedades de CSS3 han sido agregadas por la mayoría de los navegadores modernos, para lograr compatibilidad.

CONSISTENCIA ENTRE BROWSERS: ALGUNAS TÉCNICAS

Para realizar la detección y gestión de propiedades, imagines, etc, en distinto navegadores, se han desarrollado varias utilidades y técnicas. Aquí las más usadas, que se ilustran en los videos «Practica Ya!

Los algorítmos Reset CSS y Meyer

Esta alternativa permite inicializar los componentes que tienen un manejo distinto dependiendo del navegador. Dentro de las propiedades más comunes se encuentran las listadas dentro del algorítmo de Reseteo como por ejemplo el siguiente bloque que constituye una parte de este algorítmo. Observe la inicialización a cero (0) de algunas propiedades:

table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}

body {
line-height: 1;
}

ol, ul {
list-style: none;
}

Prefix

Esta biblioteca free, se agrega a la carpeta Scripts. Basicamente se se encarga de gestionar todo lo relacionado con los distintos navegadores. Y solo se requiere relacionarla en el encabezado de la página:

http://~/Scripts/Prefix.js

Tiene algunas limitantes pero ahorra gran cantidad de código de control.

Para conocer y descargar Prefix …AQUÍ

Detección de funciones:

Para la detección de la admisión de funciones, eventos, propiedades, etc, se debe verificar mediante código si estas son aceptadas por el navegador.

Por ejemplo, el siguiente código (script) verifica si el navegador permite o implementa el evento window.addEventListener, de lo contrario, implementa la función window.attachEvent:

  if(window.addEventListener) {
    // El navegador si lo admite...
    window.addEventListener("load", myFunction, false);
  } else if(window.attachEvent) {
    // No lo admitió, e implementa esta función
    window.attachEvent("onload", myFunction);
  }

Además, puede hacer uso de estas condiciones, dentro de las etiquetas HTML así:

<video>
    <source src="video.mp4" type="video/mp4" />
    <source src="video.avi" type="video/"avi />
    <p>Su navegador no permite videos mp4, avi!</p>
</video>

Propiedades no reconocidas

Existen un buen número de propiedades CSS que no se verán igual en todos los navegadores.

  • Propiedades como
  • Tab Size
  • Text Rendering
  • Font Stretch
  • Text Overflow
  • Writing Mode
  • Pointers Events
  • Image orientation
  • Image Rendering

Entre otras.

Un ejemplo del control de este inconveniente de diseño, es implementar código CSS, haciendo uso de los prefijos:

<style type="text/css">
    .target
    {
        -moz-border-radius: 20px; //para Mozilla, Firefox
        -webkit-border-radius: 20px; //Para IE
        border-radius: 10px; Para el resto o de lo contrario....
    }
</style>

F12

Para la administración de las diferencias entre navegadores, se ha desarrollado la herramienta F12 Developer Tools to Debug, que permite realizar pruebas en caliente del código de las páginas a estandarizar.

Pluggin Cross-Browser, es otra herramienta que ahorra la codificación de archivos CSS para detectar las inconsistencias con IE

Profundiza y aprende a manejar F12 Tool …AQUÍ

Para conocer acerca del pluggin de Microsoft IE … AQUÍ

En la mayoría de los casos, un sitio de MVC debe tener en cuenta las vistas horizontal y vertical y asegurarse de que la IU funcione en ambas orientaciones sin pérdida de funcionalidad 3

Los dispositivos con tableta de Windows 8, por ejemplo, pueden ver una aplicación web en cuatro modos de resolución diferentes porque el navegador que se ejecuta en el sistema operativo se puede ver en modos de captura, relleno, paisaje de pantalla completa y pantalla completa.

Paleta de colores (Hexadecimal) 2

Como ayuda, se deja la siguiente tabla que permite visualizar la mezcla y definición de colores actuales a desplegar en un dispositivo:

Recomendamos ver los ejemplos de prefijos …AQUÍ

En los Videos tutoriales de esta lección, «Aplique Ya!», podrá implementar código para el diseño Responsive Cross Browser


Fuentes:

  1. techterms.com/definition/javascript
  2. www.w3schools.com
  3. www.microsoft.com/es-co/
  4. docs.microsoft.com/en-us/windows/uwp/design/layout/responsive-design
  5. www.emenia.es/diseno-web-adaptable-o-responsive-web-design/
  6. ebuah.uah.es
  7. xn--diseowebresponsive-q0b.org/
  8. es.wikipedia.org
  9. es.ubergizmo.com/2017/01/02
  10. kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/