juantomas Hacking the planet

28 febrero, 2013

lista de frameworks css

Filed under: Proyectos — Etiquetas: , , , , , , — juantomas @ 10:53 am

He encontrado esta lista de framewoks css3 en github. Es impresionante el avance que se ha producido en este último año. Organizar y desarrollar el CSS de un proyecto web es una de las tareas que lleva más tiempo y que merece la pena hacer bien desde el principio.

En esta lista, que se va actualizando en tiempo real en github, se indica la licencia, si es responsive o no y la url del proyecto. Por supuesto están algunos de mis favoritos como twitter bootstrap o boilerplate.

Por otro lado me encanta los otros usos de github aparte del tradicional de mantener versiones de código. Yo he empezado a utilizarla incluso para configuraciones que uso a menudo y que ya copio de servidor en servidor si no simplemente hago un git clone al principio y cada vez que la modifico hago un git pull en los servidores/ordenadores.

 

 

 

4 agosto, 2010

Como usar CSS3 para cambiar dinámicamente tus diseños web

No es nuevo pero cada día es más complicado resolver como diseñas una página web y/o presentas información.

Hace muchos años el mayor problema era a que resolución te iban a ver y esto era básicamente una cuestión de la resolución del monitor más o menos. Con la proliferación de iPhones/iPads/Androids y el resto de la familia de teléfono inteligentes ahora el problema es mayor. Ya no es solo es una cuestión de resolución es una cuestión de usabilidad: es un pecado «mostrar» un interface en un nexus one o un iPhone que en un iPad o cualquiera que sea la siguiente tableta que salga al mercado. Pero no solo esto la pantalla «retina» del iPhone4 muestra horrorosamente los gráficos que no han sido diseñados para tanta resolución.

La solución es el CSS3 que nos permite interrogar al dispositivo y cambiar lo que queramos: cual es la página de estilos que se va a seleccionar, cambiar solo algunas cosas de la actual y una larga lista de posibilidades incluido afinar las fotos para que se bien el el iPhone4.

Algunos de los trucos son del estilo:

<link rel=»stylesheet» media=»all and (max-device-width: 480px)» href=»iphone.css»>
<link rel=»stylesheet» media=»all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)» href=»ipad-portrait.css»>
<link rel=»stylesheet» media=»all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)» href=»ipad-landscape.css»>
<link rel=»stylesheet» media=»all and (min-device-width: 1025px)» href=»ipad-landscape.css»>

para aplicar hojas distintas dependiendo de la anchura.

O este que es unos de mis favoritos para el iPhone4 y en general para cualquier dispositivo que tiene mucha resolución:

<link
    rel="stylesheet"
    type="text/css"
    href="/css/retina.css"
    media="only screen and (-webkit-min-device-pixel-ratio: 2)" />


Los artículos que me han inspirado y que realmente merecen la pena verlos y revisar el sitio son:

Retina Display en el iPhone4.

Using CSS Media Queries to Style Your iPhone and iPad HTML By Elisabeth Robson

Actualización: Acabo de encontrar este artículo del maestro Icaza también sobre los displays de alta densidad y las aplicaciones.


Powered by WordPress