Responsive Web Design

Responsive Web Design, o el diseño web adaptativo en la traducción al español que más se usa, es una técnica de diseño y desarrollo web cuyo objetivo es dar al usuario una experiencia óptima, adaptándose a los diferentes dispositivos, desde ordenadores de sobremesa hasta teléfonos inteligentes.

Un buen ejemplo de diseño adaptativo es la web thenextweb.com cuando el tamaño de pantalla se reduce al de un móvil la interfaz cambia para permitir un acceso adecuado al contenido. En la página Media Queries hay otros muchos ejemplos de diseños adaptativos geniales.

La principal herramienta para crear sitios web adaptativos son las media queries. Las media queries son parte de la versión 3 de la especificación de CSS y permiten definir estilos condicionales que se aplican en función de parámetros de la pantalla en la que se está visualizando el sitio web. Los parámetros más usados son los que hacen referencia al ancho de la pantalla. Es una herramienta sencilla pero muy poderosa para cambiar el diseño de los sitios web adaptándolos al dispositivo que esté usando el usuario.

Como siempre, la mejor forma de aprender es haciendo, así que he modificado el diseño del blog para que al verlo en un teléfono móvil tenga esta pinta:

Otros recursos:

Instalando Ruby y Jekyll

Vamos a instalar Ruby y Jekyll en Ubuntu usando Ruby Version Manager (RVM).

Lo primero es instalar RVM. La url get.rvm.io redirige al script de instalación que está en https://raw.github.com/wayneeseguin/rvm/master/binscripts/rvm-installer.

$ sudo apt-get update
$ sudo apt-get install curl
$ curl -L get.rvm.io | bash -s stable 

  % Total    % Received % Xferd  Average Speed   Time    Time           Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100   184  100   184    0     0    268      0 --:--:-- --:--:-- --:--:--   542
100 19549  100 19549    0     0   6814      0  0:00:02  0:00:02 --:--:-- 18961
Downloading https://github.com/wayneeseguin/rvm/archive/stable.tar.gz

Installing RVM to /home/miguel/.rvm/
    Adding rvm PATH line to /home/miguel/.bashrc /home/miguel/.zshrc.
    Adding rvm loading line to /home/miguel/.bash_profile /home/miguel/.zlogin.
Installation of RVM in /home/miguel/.rvm/ is almost complete:

  * To start using RVM you need to run `source /home/miguel/.rvm/scripts/rvm`
    in all your open shell windows, in rare cases you need to reopen all shell windows.

# Miguel,
#
#   Thank you for using RVM!
#   We sincerely hope that RVM helps to make your life easier and more enjoyable!!!
#
# ~Wayne, Michal & team.

In case of problems: http://rvm.io/help and https://twitter.com/rvm_io

Para no tener que ejecutar source ~/.rvm/scripts/rvm cada vez que usamos RVM o Ruby hay que seguir los pasos indicados en Integrating RVM with gnome-terminal y marcar el checkbox ‘Run command as login shell’ en la pestaña ‘Title and Command’ dentro de Preferencias del perfil del Terminal de Gnome (pestaña ‘Título y comando’ y checkbox ‘Ejecutar el comando como un intérprete de conexión’ si tienes la traducción al español de Ubuntu). Para entender bien lo que estamos haciendo podemos leer What shell login means (‘bash -l’).

Una vez hecho esto al ejecutar type rvm | head -n 1 debemos leer el mensaje rvm: es una función.

Ya tengo instalado RVM, lo compruebo con:

$ rvm --version
rvm 1.24.6 (stable) by Wayne E. Seguin <wayneeseguin@gmail.com>, Michal Papis <mpapis@gmail.com> [https://rvm.io/]

Para comprobar si tengo instalados todos los paquetes necesarios en mi Ubuntu ejecuto:

$ rvm requirements	    

Ahora instalo Ruby y compruebo que funciona.

$ rvm install 2.0.0
$ ruby -v
ruby 2.0.0p353 (2013-11-22 revision 43784) [x86_64-linux]

Instalo RubyGems y por último Jekyll

$ rvm rubygems current
$ gem install jekyll 

Listo para ejecutar mi blog con Jekyll

$ cd enlosdetalles-blog	
$ jekyll serve -w
Configuration file: /home/miguel/enlosdetalles-blog/_config.yml
            Source: /home/miguel/enlosdetalles-blog
       Destination: /home/miguel/enlosdetalles-blog/_site
      Generating... done.
 Auto-regeneration: enabled
    Server address: http://0.0.0.0:4000
  Server running... press ctrl-c to stop.

MediaTomb, espera un poquito por favor.

MediaTomb es un servidor multimedia de código abierto.

El servicio de MediaTomb (en mi Ubuntu 12.10) no arranca correctamente y en el log vemos los siguientes errores:

2013-03-13 18:44:52   ERROR: Could not determine interface address: Cannot assign requested address
2013-03-13 18:44:52   ERROR: Could not find interface: wlan0

El problema se produce porque he configurado MediaTomb para que use la interfaz wifi wlan0, pero cuando arranca todavía no está disponible.

Para conseguir que MediaTomb no arranque hasta que no haya red wifi modificamos el fichero de configuración del servicio upstart /etc/init/mediatom.conf. Cambiamos la condición de arranque IFACE!=lo por IFACE=wlan0.