DISEÑO WEB RESPONSIVO (Responsive Web Design).

Mer av detta

¿Qué es el Software y el Hardware?

av Verónica Vázquez García

CONSTRUCCIÓN DE PRUEBAS OBJETIVAS

av Nolainis Ramos Luque

TEORIA DEL CAOS

av Ana Victoria Lancheros

MECANICA DEL SISTEMA RESPIRATORIO

av Jasmin Tolentino

DISEÑO WEB RESPONSIVO (Responsive Web Design).

Orientacion

portrait: Ventana gráfica orientación vertical, es decir, la altura es mayor o igual que el ancho. landscape: Ventana gráfica orientación horizontal, es decir, el ancho es mayor que la altura.

CSSGridLayout, es un sistema de diseño bidimensional basado en cuadrículas que tiene como objetivo cambiar completamente la forma en que diseñamos las interfaces de usuario basadas en cuadrículas.

❑grid- genera una cuadrícula a nivel de bloque. ❑inline-grid- genera una cuadrícula de nivel en línea. ❑Para dejar una celda de la cuadrícula vacía se usa el carácter de punto final, '.'

Flexbox

Tiene como objetivo proporcionar una forma más eficiente de diseñar, alinear y distribuir el espacio entre los elementos en un contenedor, incluso cuando su tamaño es desconocido y/o dinámico. Para activar el uso de flexbox en un ítem, es necesario asignarle la propiedad display:flex Este será el contenedor en el cual centraremos o distribuiremos elementos.

Tipos: flex-wrap: •nowrap: en una línea, •wrap: varias líneas, de arriba a abajo. •wrap-reverse: varias líneas de abajo hacia arriba. flex-direction: •row: muestra los contenedores en fila, •row-reverse: muestra la fila en reversa, •column: muestra los contenedores en columna, •column-reverse: muestra los contenedores en columna y de forma reversa.

Overflow

Establece el comportamiento deseado para el desbordamiento de un elemento, es decir, cuando el contenido de un elemento es demasiado grande para caber en su contexto de formato de bloque, en ambas direcciones. 1.Visible. El contenido no se recorta y se puede representar fuera del cuadro de relleno. 2.Hidden. El contenido se recorta si es necesario para que ajuste en la caja de relleno. No se proporcionan barras de desplazamiento y no se permite el soporte para que el usuario se desplace. 3.Scroll. El contenido se recorta si es necesario para que se ajuste en la caja de relleno. Los navegadores siempre muestran barras de desplazamiento independientemente de que el contenido esté recortado o no, lo que evita que las barras de desplazamiento aparezcan o desaparezcan a medida que cambia el contenido. 4.Auto. Depende de la gente de usuario. Si el contenido cabe dentro del cuadro de relleno, tiene el mismo aspecto que visible, pero aún establece un nuevo contexto de formato de bloque. Los navegadores de escritorio proporcionan barras de desplazamiento si el contenido se desborda.

Media Queries

Es una regla o conjunto de reglas que se introducen en una hoja de estilo CSS con el objetivo de definir propiedades específicas para distintos tipos de medios. Las Media Queries son la base del diseño responsivo o adaptable esto significa que, con una misma maquetación HTML, nuestro diseño se adaptará a diferentes dispositivos y tipos de pantalla. Orientadas a configurar el ancho, alto y resolución dependiendo de las características del dispositivo donde se consulte el sitio. Por ejemplo, una consulta que responde con un ancho máximo de 450 píxeles estaría dirigida a los navegadores móviles solamente, por lo que el CSS haría referencia a la siguiente condición.

Tipos

all: Coincide con todos los dispositivos. Se utiliza para todos los tipos de medios o dispositivos. print: Coincide con los documentos que se ven en una vista previa de impresión o cualquier me dio que divida el contenido en páginas destinadas a imprimir. Se utiliza para impresoras.

Operadores

and: Las dos condiciones deben cumplirse para que se evalúe como verdadera. not: Es una negación de una condición. Cuando esa condición no se cumpla se aplicarán las mediaqueries. only: Se aplican las reglas solo en el caso que se cumpla cierta circunstancia.

Función de desplazamiento y puntero

Puntero (pointer): Un mouse o un lápiz de dibujo es muy preciso por lo cual el puntero se define con el valor de "fine". Un dedo tiene una precisión limitada y toma el valor del puntero como "coarse"(grueso). Desplazamiento (hover): Un dispositivo de pantalla táctil, donde el sistema de puntero principal es el dedo y no puede desplazarse, tomará el valor de "none". Un dispositivo en el que la entrada principal es un mouse y puede desplazarse fácilmente sobre partes de la página toma el valor de "hover".

Técnica de diseño y desarrollo web que, mediante el uso de estructuras e imágenes fluidas, así como de media-queryen la hoja de estilo CSS, consigue adaptar el sitio. En otras palabras el diseño responsivo es un enfoque del diseño web que hace que el contenido de la web se adapte a los diferentes tamaños de pantalla y ventana de una variedad de dispositivos.

Elementos: 1-Esquema tipográfico flexible. 2- Maquetación adaptable usando MediaQueries (MediaQuery). 3- Imágenes,objetos,videos o medios similares flexibles. 4- Navegación adaptable, optimizada para touch en pantallas pequeñas