Algunas herramientas para diseñar web para móvil

A la hora de diseñar web para móvil me gusta tener hojas de estilo a parte especificas para estos dispositivos. Cuando digo móvil también incluyo tablets. Ademas si es posible también me gusta tener un subdominio a parte en plan http://mobile.miweb.com si es posible (que no siempre lo es).

Partiendo de ahí, lo primero que uso es la opción de simular resoluciones de móvil del debugger de google chrome. Y luego por su puesto testearlo en cuantos móviles pueda y tenga a mi alcance. Algunos desarrolladores tienen guardados una pequeña colección de móviles antiguos para testear.

Para los que no los tenemos, esta web puede ser útil: http://mobiletest.me/

Teniendo una web online, simula que se esta viendo desde un dispositivo que selecciones, desde iphones a moviles samsung, etc. Esta bien, como una herramienta de apoyo más a complementar el debugger para moviles de chrome. Pero hay que tener la web online, trabajando en localhost, no funciona.

Ademas en este otro enlace, podemos encontrar una cosa que vale su peso en oro: una hoja de estilo preconfigurada para multitud de dispositivos y sus respectivas resoluciones, ademas tanto en orientación vertical y horizontal.

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

 

 

Anuncios

Css browser selector

http://rafael.adm.br/css_browser_selector

Esta librería me ha encantado. Es el fin de tener que usar los css hacks. Lo que hace es que según detecte el navegador y versión que estas usando, añade una clase a la etiqueta <html>. Entonces para aplicar un css especifico para un navegador solo tienes que  apuntar a la clase que te esta añadiendo.

Primero hay que poner el fichero js de la librería en nuestro directorio de librerías del proyecto. Segundo hay que importarlo con la etiqueta javascript (o de otra forma según el entorno de programación de proyecto). Y por ultimo usar las clases que detecta dentro del css.

En cada navegador, usando el inspector de código, o ver codigo fuente, con la libreria funcionando, podéis ver en el html, al principio del codigo en la etiqueta <html> las clases que os esta añadiendo, a las que tenéis que dirigir vuestro css especifico para según que navegador.

Yo lo estoy usando así:

@media all and (max-width:1269px) and (min-width:1000px){ /*desde 1024×768 a 1280×1024*/
.chrome #contentLayout{
width: 95% !important;
}
.gecko #contentLayout{
width: 95.1% !important;
}

.ie #contentLayout{
width: 94.9% !important;
}
}

La recomiendo especialmente. Desde que la uso se acabo pelearme con los hacks de css.

Media query para resoluciones de pantalla más comunes

A modo de recordatorio, dejo aquí las media querys para las resoluciones de pantalla de escritorio mas comunes que he podido testear durante mi trabajo maquetando. A mi personalmente son las que mejor resultado me han dado. No se incluye 800×600. Es una resolución tan en desuso hoy día, que si se usa estamos hablando de máquinas muy antiguas, tablets o móviles y eso es otro tema que da para muchos mas post.

@media all and (max-width:1269px) and (min-width:1000px){/*desde 1024×768 a 1280×1024*/

}
@media all and (max-width:1550px) and (min-width:1270px){ /*1280×1024**/

}

@media all and (max-width:1750px) and (min-width:1551px){ /*1600 px de ancho a 1750px*/

}

@media all and (min-width:1751px){ /*1750 px de ancho y superior*/

}

Script para pasar el ancho de pantalla al backend en primefaces

A veces es necesario que el backend sepa el ancho de pantalla que tienes, para pintar un numero de columnas u otro en función del ancho de pantalla disponible. El responsive tiene un limite y me lo puedo hacer mas fácil si un componente tipo grid ya le digo por defecto que pinte 1, 2 o n columnas.

Meto un input hidden en mi contenido html inicialmente vacio.

Y este script en jquey/javascript recoge el tamaño de pantalla actual al cargar la pagina, o al redimensionarla.

<h:outputScript>
$(document).ready(function() {
/*deteccion del ancho para pasar parametro a backend*/
$(“#resolutionWidth”).val($( window ).width());

/*se ejecuta al redimensionar*/
$(window).on(‘resize’, function(){

$(“#resolutionWidth”).val($( window ).width());
/*refresco al redimensionar*/
window.location.href = window.location.href;
});

/*se ejecuta al finalizar la carga de pantalla*/
$( window ).load(function() {
$(“#resolutionWidth”).val($( window ).width());
});
});
</h:outputScript>

Así desde el backed puedo leer el valor que tengo en el input hidden y actuar en consecuencia. Eso podéis ver como se hace aquí: http://stackoverflow.com/questions/21370176/dynamically-set-the-number-of-columns-in-primefaces-datagrid-using-javascript

El refrescar la pantalla es un añadido personal, en mi proyecto he tenido que refrescar, aunque según proyecto, puede no ser necesario.

Tips de maquetación y diseño sobre jsf con primefaces

Últimamente me ha tocado rediseñar una aplicación ya hecha que corre sobre JSF con primefaces.

Hay dos tips que me han salvado el cuello en alguna que otra situación peleándome con el navegador, el html y el css:

1) Spacers de primefaces.

Primefaces tiene una etiqueta spacer que le pasa el ancho y el alto, y te mete el espacio en blanco que quieres. Por ejemplo:

<p:spacer width=”100%” height=”15″ />

Más info aqui:

http://www.primefaces.org/showcase/ui/misc/spacer.xhtml

2) Inserción de imagenes en primefaces.

<p:graphicImage id=”login-icon” library=”images” name=”icons/login-icon.jpg”/>

El tag graphicImage creara un img con ruta /images/icons/login-icon.jpg

3) Añadir tu propia hoja de estilo a una pagina.

<h:outputStylesheet library=”primefaces-theme” name=”theme.css” />

Library es el directorio, o nombre del tema de estilo de primefaces.

4) Añadir estilos css personalizados a un elemento definido con tag de primefaces.

<p:column colspan=”2″ styleClass=”center”>

Usamos el atributo styleClass en el cual nombramos la clase que habremos definido previamente en nuestra hoja de estilos.