PÁGINAS WEB PARA MÓVIL.

Presentación del tema: "PÁGINAS WEB PARA MÓVIL."— Transcripción de la presentación:

1 PÁGINAS WEB PARA MÓVIL

2 Web Móvil Se hace referencia a un sitio en el que el usuario puede acceder a cualquier información desde cualquier dispositivo que use. ¿Para que sirve? ¿Cómo funciona? ¿Qué se debe de tomar en cuenta?

3 Conceptos Básicos

4 Resolución de Pantalla
Es el numero de pixeles que pueden ser mostrado en pantalla Comparación de dispositivos

5 Resolución de Monitores

6 PPI (pixels per inch ) – Pixeles Por Pulgada
Es una medida de resolución de vídeo relacionada al tamaño del monitor en pulgadas y del número total de pixeles en la dirección horizontal y en la dirección vertical

7 Calidad - PPI

8

9 Diseño y desarrollo cuyo objetivo es adaptar la apariencia de las páginas web al dispositivo que se esté utilizando para visitarlas

10 Medidas Comunes

11 ¿ Media Query ? Media Query consiste en un tipo de medio y al menos una consulta que limita las hojas de estilo utilizando características del medio como ancho, alto y color. Se entiende como un módulo CSS3 que nos permite adaptar la representación del contenido a características del dispositivo. las media queries dejan que la presentación del contenido se adapte a un rango específico de dispositivos de salida sin tener que cambiar el contenido en sí. Para usar Diseño Responsive se debe colocar un meta en el header del documento para activar <meta name="viewport" content="width=device-width,initial-scale=1">

12 Funciones Media Atributo Valor Descripción Min/Max color integer
Numero de bits x componente de color del dispositivo si color-index Indica el numero de entradas en la tabla de colores device-aspect-ratio integer/integer Describe el aspecto de una zona a mostrar en el dispositivo ej. ratio: 16/9 device-height length Describe la altura del dispositivo de salida device-width Describe el ancho del dispositivo de salida grid El dispositivo de salida es un dispositivo de cuadrícula o de mapa de bits (1 = solo Texto) no height la altura de la superficie a renderizar en el dispositivo orientation landscape / Portrait número de bits por pixel en un dispositivo monocromático (escala de grises) resolution resolution ("dpi" or "dpcm") Indica la resolución (densidad de pixeles) del dispositivo width describe el ancho de la superficie a renderizar en el dispositivo