Este documento explica cómo crear sitios web responsivos utilizando el tema Adaptive Theme en Drupal. Describe cómo instalar Adaptive Theme de forma tradicional o mediante Drush, y cómo crear subtemas con este framework. También explica cómo usar las hojas de estilo incluidas para lograr diseños responsivos, e introduce el preprocesador Sass para acelerar el desarrollo con variables, anidamiento, importaciones y otras funciones.

1. CREAR SITIOS
RESPONSIVOS CON
ADAPTIVE THEME
DRUPAL CAMP BOLIVIA 2014
Createdby /chris @cmtp_k52

2. ¿QUE ES UN TEMA EN DRUPAL?
Un tema (Theme en ingles) es un conjunto de archivos que
permite cambiar elaspecto gráfico delsitio.

3. Podemos instalar un unico tema en elsitio o varios temas.

4. Cambiando un tema por otro es posible modificar elaspecto
completo de la web, sin cambiar con ello las funcionalidades
implementadas ylos contenidos creados.

5. COMO INSTALAR UN TEMA
FORMA TRADICIONAL
Los temas se descargan de la pagina oficialde drupal
en formato zip o tar.gzhttp://drupal.org/project/themes

6. Descomprime eltema en la carpeta misitio/sites/all/themes/

7. Una vezllegado a este paso elsitio estará disponible en nuestro
sitio, solo necesitas activarlo yque sea eltema por defecto

9. DESDE DRUSH
Drush es la linea de comandos de Drupal,mas info .
Solo necesitas ejecutar elsiguiente comando:
aqui
[marcelo@localhostmisitioDrupal]$drushdlnuevo_theme
Y para activarlo
[marcelo@localhostmisitioDrupal]$drushen-ynuevo_theme

10. ADAPTIVE THEME
Mas que un tema es un framework para desarrollar subtemas
en drupal.
¿QUE ES UN SUBTEMA?
Es un tema de drupalque hereda caracterizticas de temas base,
podemos crear un subtema a partir de un tema 'padre' sin
necesidad de alterar su funcionamiento

11. ENTONCES.. ¿COMO CREAMOS UN SUBTEMA
CON ADAPTIVE THEME?
Lo primero seria descargar eltema desde
ya sea mediante
la forma tradicionalo mediante Drush
https://www.drupal.org/project/adaptivetheme

13. Una vezdescargado podemos seguir la forma tradicional(Muy
lento) o Mediante drush (Lo mas optimo)

14. FORMA TRADICIONAL
Dentro la carpeta adaptivetheme se encuentra la carpeta
at_core, at_admin, at_subtheme

15. Copiamos la carpeta at_subtheme a la carpeta donde se
encuentran nuestros temas de drupal

16. Renombramos la carpeta por elnombre que queramos asignarle
a nuestro subtema

17. Dentro de la carpeta de nuestro subtema se encuentra el
archivo Elcualtendremos que
modificar como:
adaptivetheme_subtheme.info
nombre_subtema.info

18. Luego abrimos elarchivo ytenemos que modificar los siguientes
campos:
name = Elnombre que queramos darle
description = La descripcion que queramos hacer de nuestro
subtema

19. Con esto tendremos listo nuestro nuevo subtema para usarlo en
nuestro sitio drupal

20. MEDIANTE DRUSH
Drush te provee de un comando automaticamente para crear un
subtema
[marcelo@localhostmisitioDrupal]$drushadaptivetheme"Yourthemename"yourthemename

21. ¿QUE ES DISEÑO RESPONSIVO?
Una Forma de desarrollar sitios asegurando, que eldiseño está
optimizado para que elformato se ajuste en relación altamaño
deldispositivo

22. ¿COMO PUEDO USAR ADAPTIVETHEME PARA
QUE MI SITIO SEA RESPONSIVO?
Adaptive theme provee de hojas de estilo en cascada(css) que
usaremos para modificar eltema de nuestro sitio

23. GLOBAL.BASE.CSS - GLOBAL.STYLES.CSS
Estos archivos contienen los estilos genericos que seran usados
en elsitio
Cualquier estilo que sea escrito en estos archivos se cargara en
elsistema en cualquier resolucion o dispositivo

24. RESPONSIVE.DESKTOP.CSS
Los estilos que vayamos colocando en este archivo solo se veran
en dispositivos grandes como ser laptop, pc de escritorios, etc.

25. RESPONSIVE.SMALLTOUCH.LANDSCAPE.CSS -
RESPONSIVE SMALLTOUCH.PORTRAIT.CSS
Adaptive theme maneja una logica de "primero eldispositivo
mas pequeño", es decir que cargara elarchivo correspondiente
segun a su tamaño.
Por ejemplo elarchivo se
cargara en los dispositivos smartphone cuando se encuentren
en posición horizontal
responsive.smalltouch.landscape.css
en cambio elarchivo se
cargara en los dispositivos smartphone cuando esten en una
posición vertical
responsive.smalltouch.portrait.css

26. RESPONSIVE.TABLET.LANDSCAPE.CSS -
RESPONSIVE.TABLET.PORTRAIT.CSS
Cuando elsitio se este visualizando desde una tableto un
smartphone de una resolución muygrande cargara estos
archivos igualmente ya sea segun su posición
=> horizontal
=> vertical
responsive.tablet.landscape.css
responsive.tablet.portrait.css

27. ¿SI MI NAVEGADOR ES IE8 O IE9?
Adaptive Theme te ofrece un archivo que puedes ir modificando
para asignarle tu propia guia de estilos a internetexplorer ya sea
en su version 8 o 9
Internetexplorer 9 =>
Internetexplorer 8 =>
lt-ie9.css
lt-ie8.css

28. ¿PUEDO ACELERAR MI PROCESO DE
DESARROLLO CON ADAPTIVE THEME?
Como Adaptive theme utiliza cascading styles sheets (css)
Entonces ¿Por que no usar un lenguaje precompilador que me
permita escribir codigo css mas rapido?

29. SASS (SYNTACTICALLY AWESOME
STYLESHEETS)

30. Sass es un metalenguaje pre-procesado de css, nos permite
acelerar eldiseño responsivo a la hora de escribir archivos css

31. ¿COMO INSTALARLO?
Sass es una "gema" de rubyasique tenemos que instalar
primero rubyen nuestras computadoras
En la pagina oficialde rubyse muestra los enlaces de descarga
para diferentes sistemas operativos ysu manualde instalación
https://www.ruby-lang.org/es/downloads/

32. Una vezinstalado Rubyprocedemos a instalar las gemas
necesarias para utilizar sass en drupal
[marcelo@localhostmisitioDrupal]$sudogeminstallsass
[marcelo@localhostmisitioDrupal]$sudogeminstallzen-grids
[marcelo@localhostmisitioDrupal]$sudogeminstallsassy-buttons
[marcelo@localhostmisitioDrupal]$sudogeminstallcompass

33. Para verificar sise ha instalado bien realizamos los siguientes
comandos
[marcelo@localhostmisitioDrupal]$cd/var/www/html/yourproject
[marcelo@localhostmisitioDrupal]$compasscreate//creaunproyectoSass
[marcelo@localhostmisitioDrupal]$compasswatch
Sino devuelve ningun error hemos instalado Sass
correctamente

34. UTILIZAR SASS EN ADAPTIVE THEME
Adaptive Theme ya tiene Sass incorporado en su proyecto, si
queremos usar Sass en lugar de css solo debemos borrar todos
los archivos deltema ycompilar los archivos que es el
formato de Sass
css .scss

35. Para ello utilizamos los siguientes comandos
[marcelo@localhostmisitioDrupal]$compassclean//borratodoslosarchivoscss
[marcelo@localhostmisitioDrupal]$compasscompile//compilalosarchivos.scssyge
Ya podemos usar sass en nuestro proyecto adaptive theme.

36. ¿QUE NOS PROVEE SASS?
Podemos Crear variable reutilizables con Sass
$font-stack: Helvetica,sans-serif;
$primary-color:#333;
body{
font:100%$font-stack;
color:$primary-color;
}

37. ¿QUE NOS PROVEE SASS?
Podemos realizar anidamientos de css con Sass
nav{
ul{
margin:0;
padding:0;
list-style:none;
}
li{display:inline-block;}
a{
display:block;
padding:6px12px;
text-decoration:none;
}
}

38. ¿QUE NOS PROVEE SASS?
Podemos realizar importaciones de archivos con Sass
@import'reset';
body{
font:100%Helvetica,sans-serif;
background-color:#efefef;
}

39. ¿QUE NOS PROVEE SASS?
Podemos utilizar Mixin (funciones) con Sass
@mixinborder-radius($radius){
-webkit-border-radius:$radius;
-moz-border-radius:$radius;
-ms-border-radius:$radius;
border-radius:$radius;
}
.box{@includeborder-radius(10px);}

40. ¿QUE NOS PROVEE SASS?
Podemos ampliar funcionalidades con @extend con Sass
.message{
border:1pxsolid#ccc;
padding:10px;
color:#333;
}
.success{
@extend.message;
border-color:green;
}
.error{
@extend.message;
border-color:red;
}
.warning{
@extend.message;
border-color:yellow;
}

41. ¿QUE NOS PROVEE SASS?
Podemos usar operadores +,-,*,/y%con Sass
.container{width:100%;}
article[role="main"]{
float:left;
width:600px/960px*100%;
}
aside[role="complimentary"]{
float:right;
width:300px/960px*100%;
}}

42. ¡GRACIAS!
DrupalCamp Bolivia 2014
Christian Marcelo Tola Pacheco |@cmtp_k52
https://www.drupal.org/u/cmtp.k52
Contacto:christian@koala-soft.com