0

Diseo web Vigo / Blog / Responsive web design: que es y como usarlo

El responsive web design (RWD) o diseo sensible es el reto para los diseadores en este ao 2012. El trfico web va mviles y tablets crece de forma exponencial, actualmente est en torno a un 10% y se prevee que llegue al 30% para el ao que viene. Entoces la pregunta es, tus pginas son navegables en una tablet o mvil? la mayora no estn adaptadas y ah es donde el responsive design entra en juego. El concepto del diseo sensible es que la web se visualice acorde al tamao de pantalla que tiene el usuario. En la imagen inicial podemos observar un ejemplo de como una misma web se visualiza de tres formas diferentes segn el dispositivo que se use: PC, Tablet y Smartphone. El principal concepto a tener en cuenta en esto son los CSS Media Queries.Una herramienta que nos permite activar y desactivar partes del CSS de nuestro diseo segn el tamao de la pantalla:

1 2 3 4 5 6 7 8 9

@media screen and (max-width: 980px) {

/* CSS ventanas de menos de 980px */

} @media screen and (max-width: 650px) {

/* CSS ventanas de menos de 650px */

} @media screen and (max-width: 480px) {

/* CSS ventanas de menos de 480px */

Mediante la etiqueta @import podemos cargar archivos de CSS externos:

1 2 3

<style> @import url(tablet.css) screen and (min-width: 650px); </style>

CSS Media Queries funciona con todos los navegadores modernos, vease que los de la vieja escuela que aun tienen IE7 instalado en su XP pues igual ven un churro.

Otro de los pilares bsicos responsive design es trabajar con porcentajes en vez de con pixels. Los grids de tu plantilla deben ser flexibles y poder adaptarse. La herramienta jQuery tambin puede ayudar de forma notable a los diseos sensibles explora su infinidad de opciones.

Progreesbar Te explico a groso modo. Primero debes indicar la maxima posicion de tu hpb, q por defecto lo pone en 100 hpb_1.maxposition = 100 Luego cambiar la propiedad setstep de 10 a 0, esto es para que la barra comience de cero (este en blanco). hpb_1.setstep = 0 Por ultimo indicar la posicion (incrementar la barra) hpb_1.position = ... Esta ultima propieda es la que llena la barra hasta el final, Una idea para que puedas hacer esto es utilizando un for hp_1.maxposition = 100 for k=1 to 100 hp_1.position = k next Trata de adaptar este cdigo a tu necesidad.