Archive for octubre, 2012

CSS3: media queries

Un punto importante si queremos hacer un website utilizando el “Responsive Design” es trabajar los estilos y el diseño en sí mismo. Para ayudarnos a la hora de mostrar nuestro site es diferentes medios y dispositivos tenemos las “media queries”.

Las “Media queries” amplían el atributo “media” llevando la separación de estilos por medio (pantalla o impresora) a un nivel superior al tener en cuenta las resoluciones de los diferentes dispositivos. Las “media queries” son soportadas por los principales navegadores Internet Explorer 9+, Firefox 3.5+, Safari 3+, Opera 7+, Chrome así como por la mayoria de los smartphones, tablets y otros dispositivos móviles.

Por lo general con el atributo media, se pueden usar al definir los enlaces a ficheros de estilos:

<link rel="stylesheet" type="text/css" media="screen" href="screen.css">
<link rel="stylesheet" type="text/css" media="print" href="print.css">

O se pueden definir dentro de un fichero de estilos :

@media screen {
/* Estilos para mostrar en pantalla */
}
@media print{
/* Estilos para mostrar en impresora */
}

Al introducir las “media queries” en el atributo media las definiciones quedan de la siguiente manera:

&lt;link rel="stylesheet" type="text/css" media="screen <strong>and (max-width:480px)</strong>" href="screen.css"&gt;

O en el fichero de estilos

@media screen <strong>and (max-width:480px)</strong> {
/* Estilos para mostrar en pantalla */
}

La siguiente tabla muestra las características que se pueden usar en el atributo media:

Característica valor Permite Min/Max Descripción
width ancho Ancho del área visible
height alto Alto del área visible
device-width ancho Ancho del dispositivo
device-height alto Alto del dispositivo
orientation “portrait” o “landscape” No Orientación del dispositivo
aspect-ratio Ratio (w/h) Ratio entre el ancho y el alto, expresado en 2 números separados por una barra (16/9)
device-aspect-ratio Ratio (w/h) Ratio entre el ancho y el alto del dispositivo, expresado en 2 números separados por una barra (16/9)
color Número Número de bits por componente de color (si no el color, el valor es 0)
color-index Número Número de entradas en la tabla de color del dispositivo
monochrome Número Número de bits por píxel en la memoria de vídeo monocromo (blanco y negro si no, el valor es 0)
resolution Resolución Densidad de los píxeles de dispositivo de salida, como se expresa entero seguido de dpi o dpcm.
scan “progressive” o “interlace” No Proceso de digitalización utilizada por los dispositivos de TV
grid 0 o 1 No Si se establece en 1, el dispositivo está basado en red, tal como un terminal de teletipo o pantalla del teléfono con una sola fuente fija (todos los otros dispositivos son 0)

En la práctica, lo que nos va a interesar son las definiciones básicas para los dispositivos más usados:

/* Smartphones (landscape) */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* Desktops and laptops */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
/* iPads (landscape) */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
Share

Android: Botones con imagenes y texto

En un layout de una aplicación Android tenemos la posibilidad de colocar un control de tipo ”Button” o de tipo  ”ImageButton“.

El botón simple “Button” tiene toda la funcionalidad de un botón pero la parte de presentación es únicamente de texto.

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/button_text"
    />

El botón imagen “ImageButton” es una imagen que tiene toda la funcionalidad de un botón. La parte de presentación es una imagen.

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/button_icon"
    />

Cuando queremos combinar en un botón una imagen con un texto, podriamos pensar que el control “ImagenButton” tiene una propiedad tipo “android:text” a la que le pasamos el String que necesitamos. Pues no, es al revés. A un control “Button” de solo texto le indicamos que tiene una imagen. La imagen se puede colocar en uno de los cuatro lados del botón:

  • android:drawableLeft
  • android:drawableTop
  • android:drawableBottom
  • android:drawableRight

Por ejemplo:

<Button
 android:id="@+id/button1"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:contentDescription="@string/button_text"
 android:drawableLeft="@drawable/button_icon"
 android:drawablePadding="15dp"
 android:gravity="left|center_vertical"
 android:text="@string/button_text" />

Otros elementos útiles a la hora de manejar los botones de imagen y texto son:

  • android:drawablePadding” que indica la distancia entre la imagen y el texto.
  • android:gravity” que indica la alineación del texto en el botón, particularmente interesante si nuestro botón ocupa todo el ancho de la pantalla ya que por defecto el texto queda centrado y la imagen queda alineada según la definición anterior.
Una imagen de muestra:
Botones con imagenes y texto

Botones con imagenes y texto

 

 

 

 

Share