//barrabarra

JAVIER ROMERO
Programación web y escritorio
 

Our blog, keeping you up-to-date on our latest news.

 

Generar distintos CSSs para versiones de escritorio y móvil con SASS

septiembre 28, 2011 at 7:42 pm | Blog, Django, Sass | No comment

 

En los últimos trabajos que he realizado he utilizado “diseños sensibles” (responsive design en inglés) para que las webs se adaptaran a los dispositivos en los que iban a ser vistos.

Así, ver la web en una pantalla de gran tamaño como puede ser la de un ordenador o un televisor mostraba la versión normal extendida, mientras que había otras versiones con imágenes de menor tamaño o con el contenido en una única columna en lugar de dividirlo en 2 para netbooks y por último versiones especialmente reducidas para facilitar la navegación en smartphones y no utilizar muchos datos.

Pero me quedaba la espinita de que realmente no le daba la opción al usuario de ver la versión “completa” si así lo quería, y no quería seguir así, de modo que en el proyecto que tengo entre manos actualmente he utilizado dos herramientas estupendas para esto:

De Sass ya hablé un poco en una entrada anterior, pero gracias a @TheSassWay sigo alucinando con lo potente que es. La base de Sass es que permite crear ficheros con reglas a partir de otros ficheros más pequeños a los que se llama partials.

Un fichero full.scss puede ser así:

@import "partials/more";
@import "partials/global";
@import "partials/default";
@import "partials/tablet";
@import "partials/mobile";
@import "partials/wide-mobile";
@import "partials/high-px-ratio";

Y otro fichero desktop.scss ser así:

@import "partials/more";
@import "partials/global";
@import "partials/default";

Los archivos _more.scss, _global.scss y _default.scss serán los mismos, y cuando se les pase el intérprete Compass, se generarán dos archivos distintos full.css y desktop.css con tan sólo los contenidos de los parciales indicados. Sólo se compilan los archivos *.scss que no tienen un _ como inicio del nombre, y pueden tenerse tantos archivos *.scss como se necesiten. ¿No es una maravilla? No había pensado en que se podían crear varios hasta que no me lo indicó @TheSassWay :-D

¿Qué se consigue con esto? Evidentemente, tienes un css “sensible” y uno no sensible para la versión completa. Por defecto mostramos el “sensible”, pero si no piden expresamente la versión completa de la web, podremos servirla sin tener que andarnos copiando el css generado y eliminando líneas (que era lo que hacía hasta el consejo de @TheSassWay U_U)

Ahora sólo queda servir el css apropiado. Para eso utilizaremos Django-mobile. Django-mobile entiende de “sabores” y por defecto interpreta las peticiones mediante un middleware y las clasifica en “full” o “mobile”. Yo lo he modificado para incluir también un sabor “tablet”.

Mirando un poco la documentación, nos encontramos con que en nuestras plantillas podemos utilizar la variable {{ flavour }} para identificar qué “sabor” se está sirviendo. Y además podemos elegir el sabor manualmente añadiendo un parámetro GET a la url del tipo ?flavour=full

Con lo que en nuestra plantilla podemos añadir algo del tipo:

{% if flavour != 'full' %}
    <a href="?flavour=full">Ver versión estándar</a>
{% else %}
    <a href="?flavour=mobile">Ver versión móvil</a> 
{% endif %}

para cambiar el “sabor” actual y variar el CSS que se sirve con:

{% if flavour == "full" %}
    <link rel="stylesheet" type='text/css' href="{{ STATIC_URL }}css/desktop.css?v=2">
{% else %}
    <link rel="stylesheet" type='text/css' href="{{ STATIC_URL }}css/full.css?v=2">
{% endif %}

en la sección <head> de nuestra plantilla base.

Además de para esto, también aprovecho django-mobile para generar imágenes de distinto tamaño gracias a sorl-thumbnail según vayan a servirse a un dispositivo u a otro, o para ocultar completamente alguna sección.

Por ejemplo, en un listado de productos no tiene sentido para un móvil que se conecta a la web vía 3G descargar fotos de 1024×682 pixels, cuando para el diseño sensible que se ha utilizado basta con una imagen 240×160: consumo de datos que se ahorra el visitante y página que carga más rápido con algo como:

{% load thumbnail %}

<div id="work_list">
    {% for work in object_list %}
            <div class="work">
            <a href="{{ work.get_absolute_url }}">
                {% if flavour == "mobile" %}
                    {% thumbnail work.main_image "240x160" crop="center" as img %}
                    <img src="{{ img.url }}" alt="{{ work.name }}" height="{{ img.height }}" width="{{ img.width }}" />
                    {% endthumbnail %}
                {% else %}{% if flavour == "tablet" %}
                    {% thumbnail work.main_image "640x426" crop="center" as img %}
                    <img src="{{ img.url }}" alt="{{ work.name }}" height="{{ img.height }}" width="{{ img.width }}" />
                    {% endthumbnail %}
                {% else %}
                    {% thumbnail work.main_image "1024x682" crop="center" as img %}
                    <img src="{{ img.url }}" alt="{{ work.name }}" height="{{ img.height }}" width="{{ img.width }}" />
                    {% endthumbnail %}
                {% endif %}{% endif %}   
            </a>
            <a class="product" href="{{ work.product.get_absolute_url }}">{{ work.product }}</a>
            </div>
    {% endfor %}
</div>
 

Instalar y configurar un entorno virtual con Django y Compass para utilizar SASS

septiembre 26, 2011 at 9:51 am | Blog, Django, Sass, virtualenv | No comment

 

Guía breve para instalar y configurar Django + Compass bajo un entorno virtual en Archlinux.

En primer lugar me parece una herramienta indisplensable VirtualEnv y la utilidad virtualenvwrapper, que nos permitirá tener nuestros entornos de desarrollo separados para cada proyecto. Por lo tanto lo primero es instalarlo:

sudo pacman -Sy python-virtualenvwrapper

Una vez descargado e instalado, vamos a configurar el entorno creando la carpeta ~/.envs y añadiendo a nuestro ~/.bashrc las líneas

export WORKON_HOME=~/.envs
source /usr/bin/virtualenvwrapper.sh 

Refresca la terminal (source ~/.bashrc) y ya podemos empezar a utilizar nuestros entornos separados. Fácil ¿no?
Vamos a crear un primer entorno:

mkvirtualenv -p /usr/bin/python2.7 --no-site-packages nombre

El parámetro -p nos permitirá indicarle qué versión de Python debe usarse, útil si tienes versiones más antiguas en servidores en producción que no puedes actualizar y debes instalar el entorno de desarrollo con las mismas características. El otro parámetro –no-site-packages indica al entorno que no utilice el directorio site-packages general del sistema operativo. Con eso tendremos entornos limpios y verdaderamente independientes. Por último se le indica el nombre del entorno.

Hecho eso nos movemos a nuestro entorno simplemente con:

workon nombre

Ya está. Si te fijas, el prompt habrá cambiado a algo parecido a (nombre)usuario@maquina ~ $, el (nombre) denota que estamos dentro del entorno virtual. Vamos a empezar a instalar programas:

pip install django hg+https://bitbucket.org/slafs/django-compass

Añadimos django-compass a nuestras INSTALLED_APPS y para utilizar compass y poder generar nuestro css a partir de SASS vamos a instalar ruby

sudo pacman -S ruby

Y configurarlo para que instale las gemas en el directorio de nuestro entorno virtual, añadiendo al archivo ~/.envs/postactivate las líneas:

export GEM_HOME=$VIRTUAL_ENV/gems
export GEM_PATH=""

A continuación, salimos y volvemos a entrar al entorno para que tenga en cuenta los últimos cambios: esto se hace con los comandos “deactivate” y “workon nombre” de nuevo. Y ya podemos instalar las gemas compass y compass-less-plugins (que me parece un maravilloso framework para poder obtener diseños “responsivos”)

gem install compass compass-less-plugin

Hay un problemilla con compass-less-plugin y es que creo que no se registra correctamente, así que vamos a ~/.envs/nombre/gems/compass-(version)/frameworks y creamos la carpeta less, dentro de ella pegamos las carpetas stylesheets y templates de ~/.envs/nombre/gems/compass-less-plugin-(version).
Y ahora tenemos que configurar compass para que trabaje en las carpetas que queramos:

~/.envs/nombre/gems/bin/compass create -r less estilos --using less
mv estilos/sass sass
mv estilos/config.rb config.rb
rm -rf estilos

Abre config.rb y adáptalo a la configuración particular de tu proyecto. Configuraremos también el settings.py de nuestro proyecto añadiendo algo como:

COMPASS_INPUT = os.path.join(SITE_ROOT, 'static_media', 'sass') # adáptalo
COMPASS_OUTPUT = os.path.join(SITE_ROOT, 'static_media', 'css') # adáptalo
COMPASS_STYLE = 'compact'
COMPASS_EXECUTABLE = '/home/javi/.envs/nombre/gems/bin/compass'

Por último, sólo queda arrancar el servidor de pruebas y poner compass en modo vigilante para compilar los cambios que hagamos a los archivos .scss automáticamente:

En una terminal: python manage.py runserver
En otra: python manage.py compass watch

Fuentes:
Este artículo se basa en la estupenda exposición “Responsive web design with Django, Compass and the Less framework“, de Idan Gazit en la DjangoCon 2011

 

Categorias:

Archivo: