media queries en CSS3 de una vez por todas

Una media query consiste en un media type y en 0 o más expresiones que comprueban las condiciones de media features particulares, entre las cuales width, height o color, y lanzan un true o false según si se cumplen o no.
Si estas condiciones se cumplen, el contenido de estas media queries se aplica, si no, no.

Para elaborar este tutorial nos hemos basado principalmente en las indicaciones oficiales sobre media queries de W3.

 

@media types

Utilizando los media types podemos establecer diferentes estilos dependiendo del medio en que se esté mostrando nuestra página. Son:

  • all – used for all media type devices
  • speech – used for speech and sound synthesizers
  • braille – used for braille tactile feedback devices
  • embossed – used for paged braille printers
  • handheld – used for small or handheld devices
  • print – used for printers
  • projection – used for projected presentations, like slides
  • screen – used for computer screens
  • tty – used for media using a fixed-pitch character grid, like teletypes and terminals
  • tv – used for television-type devices

Podemos definirlos en el header como links o dentro de los estilos:

<link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css">
<link rel="stylesheet" type="text/css" media="print" href="serif.css">
@media screen {
* { font-family: sans-serif }
}

Para establecer una relación entre los media types y los media featuires que se les puede aplicar debemos tener en cuenta esta tabla de www.w3.org entre media types y media groups:

Media Types Media Groups
 continuous/paged  visual/audio/speech/tactile  grid/bitmap  interactive/static
braille continuous tactile grid both
embossed paged tactile grid static
handheld both visual, audio, speech both both
print paged visual bitmap static
projection paged visual bitmap interactive
screen continuous visual, audio bitmap both
speech continuous speech N/A both
tty continuous visual grid both
tv both visual, audio bitmap both

Elementos de expresión

En la sintaxis de media queries una coma representa OR y el and respresenta AND.
NOT se expresa mediante not al principio de la media query:

<link rel="stylesheet" media="not screen and (color)" href="example.css" />

 

Shorthands

Si una media expression se refiere a all, no es necesario especificarlo:

@media (orientation: portrait) { … }
@media all and (orientation: portrait) { … }

Se puede combinar varias media queries en una media query list:

@media screen and (color), projection and (color) { … }

 

@media features

Son las expresiones de una media query, que pueden ser 0 o más, y que comprueban diferentes tipos de características valorándose mediante true o false. Por ejemplo para cargar determinada .css si se muestra el contenido por una pantalla en color:

<link rel="stylesheet" type="text/css" media="screen and (color)" href="sample.css">

Son las siguientes:

  • width
  • height
  • device-width
  • device-height
  • orientation
  • aspect-ratio
  • device-aspect-ratio
  • color
  • color-index
  • monochrome
  • resolution
  • scan
  • grid

 

width

Se aplica a media types visuales o táctiles.
Describe el ancho del área en que se muestra nuestra página del aparato de salida.
Este media query establece que se aplicará el estilo en impresiones más anchas de 25cm:

<link rel="stylesheet" media="print and (min-width: 25cm)" href="http://…" />

Este media query establece que se aplicará el estilo en aparatos con un viewport (la parte de la pantalla o papel en la que el documento se muestra) de anchura de entre 400px y 700px:

@media screen and (min-width: 400px) and (max-width: 700px) { … }

Este media query establece que se aplicará el estilo en pantallas o handled con anchura de viewport mayor de 20em (o veinte veces el tamaño inicial del font-size):

@media handheld and (min-width: 20em), screen and (min-width: 20em) { … }

height

Se aplica a todos los media types visuales o táctiles.
Describe el alto del área del aparato o medio en que se muestra nuestra página.

device-width

Se aplica a todos los media types visuales o táctiles.
Describe el ancho del aparato o medio en que se muestra nuestra página.
Por ejemplo, este media query establece que se aplicará el estilo en pantallas que muestren 800px:

@media screen and (device-width: 800px) { … }

device-height

Se aplica a todos los media types visuales o táctiles.
Describe el alto del aparato o medio en que se muestra nuestra página.

orientation

Se aplica a todos los bitmap media types.
La característica orientation es portrait cuando el valor de la media feature height es mayor o igual que el valor de la media feature width; si no, orientation es landscape:

@media all and (orientation:portrait) { … }
@media all and (orientation:landscape) { … }

aspect-ratio

Se aplica a todos los bitmap media types.
Se define como la proporción entre el valor del media feature width y el valor del media feature height.

device-aspect-ratio

Se aplica a todos los bitmap media types.
Se define como la proporción entre el valor del media feature device-width y el valor del media feature device-height:

@media screen and (device-aspect-ratio: 16/9) { … }
@media screen and (device-aspect-ratio: 1280/720) { … }

color

Se aplica a todos los media types visuales.
Describe el número de bits por componente de color del aparato; si el aparato no es en color, el valor es cero:

@media all and (color) { … }
@media all and (min-color: 1) { … }

color-index

Se aplica a todos los media types visuales.
Describe el número de entradas en la tabla de colores del aparato; si el aparato no usa tabla de colores el valor es cero.

@media all and (color-index) { … }
@media all and (min-color-index: 256) { … }

monochrome

Se aplica a todos los media types visuales.
Describe el número de bits por píxel en una memoria de vídeo monocromática; si el aparato no es monocromático el valor es cero.

@media all and (min-monochrome: 2) { … }
<link rel="stylesheet" media="print and (color)" href="http://…" />
<link rel="stylesheet" media="print and (monochrome)" href="http://…" />

resolution

Se aplica a todos los bitmap media types.
Describe la resolución (densidad de píxeles) del aparato de salida (hay que utilizar min- y max- con los aparatos con píxeles no cuadrados):

@media print and (min-resolution: 300dpi) { … }

scan

Se aplica a todos los media types tipo tv.
Describe el proceso de digitalización en tv:

@media tv and (scan: progressive) { … }

grid

Se aplica a todos los media types visuales o táctiles.
Se utiliza para detecatr si el aparato de salida es grid o bitmap; si el aparato se basa en grid (un terminal tty o un teléfono con pantalla con solo una fuetne fija) el valor es 1, si no, es 0:

media handheld and (grid) and (max-width: 15em) { … }
@media handheld and (grid) and (device-max-height: 7em) { … }

 

Crear juegos para móvil con HTML5: Construct 2

Hoy en día decir ‘móvil’ en el mundo de las nuevas tecnologías es decir ‘negocio’ y ‘oportunidades’. Una de las maneras más interesante de empezar es con el estándar HTML5.

En este tutorial os presentamos Construct 2, una herramienta para construir muy fácilmente juegos sobre el canvas de HTML5 (en w3schools tenéis una muy buena introducción al Canvas). Si bien no es la única opción, en nuestra opinión es una de las mejores para iniciarse en el mundo del diseño de juegos.

Este tutorial se basa en nuestra experiencia personal. Hemos trabajado bastante con este programa y, si bien tiene algunas limitaciones, es muy recomendable y nos ha dado bastante ventajas con una curva de aprendizaje muy corta.

 

Construct 2

Construct 2

 

Cuánto cuesta

Hay una versión gratuita con algunas limitaciones (pero suficiente para hacer juegos relativamente complejos) y una de pago con todas las funcionalidades, ideal para juegos de gran complejidad. Nosotros finalmente tuvimos que ir a la de pago, pero pudimos hacer bastante con la gratuita.

Cómo empezar

En la página de tutoriales de Construct 2 encontraréis varios tutoriales de iniciación que os permitirán, en muy poco tiempo, crear un juego clásico de disparos y uno de plataforma.

Tutorial de iniciación

Tutorial de iniciación

 

Cómo funciona

Construct 2 genera un Canvas muy complejo, pero su uso es sencillo: se trata de escoger objetos, arrastrarlos al área de juego, y otorgarles, en el área de comandos, comportamientos, variables, tiempo, física, efectos, comportamientos, interacción con mouse, tacto o teclado, y un largo, largo etc.

Área de gráficos

Área de gráficos

El área de comandos es también muy sencilla de usar, dado que todas las opciones están convenientemente explicadas y listadas. Simplemente hay que saber qué queremos hacer y buscar la opción correspondiente.

Área de comandos

Área de comandos

Qué hago con mi juego

Constuct 2 os da la posibilidad de publicar vuestro canvas en varias plataformas, entre ellas iOS, Android o Facebook, ya sea mediante una siomple exportación o mediante precisas instrucciones.

Plataformas

Plataformas

 

Problemas

Como decíamos en la introducción, este programa no está exento de errores o problemas. El principal es que no siempre respeta una lógica aplastante. Al generar javascript, algunas veces puede traerproblemas con la asincronía, de manera que hay que hacer diversas comprobaciones antes de estar seguro que se respetará el orden de los eventos que hemos marcado. Si bien esto se ha solventado en parte en una actualización reciente mediante el uso de funciones, siguen habiendo problemas. Otro porblema es la incapacidad casi total de interactuar con el códigogenerado, dada su complejdiad. En definitiva, es un programa que a los programadores con experiencia puede llegar a irritar bastante.

Actualizaciones y comunidad

Dos puntos a favor: las actualizaciones son muy diversas y se generan a menudo, con incidencia casi nula en los proyectos en marcha. Por otra parte, la comunidad que crea con este programa es muy activa en la creación de plugins y en la participación en foros y creación de tutoriales.

 

Cómo crear un layout básico para un proyecto PhoneGap con jQuery Mobile

En este pequeño tutorial se os muestra un ejemplo básico de layout con jQuery Mobile. Es sencillo, pero no debemos olvidar los dos apartados que debemos tener siempre en cuenta: una buena configuración y una buena comprensión de la arquitectura. En este tutorial abordamos ambas cosas.

jQuery Mobile: configuración

Id a http://jquerymobile.com/download/ y bajaos el código en .zip (a no ser que queráis utilizar Content Distribution Network (CDN), aunque no es recomendable si no estamos seguros de tener siempre internet).
Continue reading