sitios responsivos con adaptive theme

CREAR SITIOSRESPONSIVOS CONADAPTIVE THEME

DRUPAL CAMP BOLIVIA 2014Created by / chris @cmtp_k52

¿QUE ES UN TEMA EN DRUPAL?Un tema (Theme en ingles) es un conjunto de archivos que

permite cambiar el aspecto gráfico del sitio.

Podemos instalar un unico tema en el sitio o varios temas.

Cambiando un tema por otro es posible modificar el aspectocompleto de la web, sin cambiar con ello las funcionalidades

implementadas y los contenidos creados.

COMO INSTALAR UN TEMAFORMA TRADICIONAL

Los temas se descargan de la pagina oficial de drupal en formato zip o tar.gzhttp://drupal.org/project/themes

Descomprime el tema en la carpeta misitio/sites/all/themes/

Una vez llegado a este paso el sitio estará disponible en nuestrositio, solo necesitas activarlo y que sea el tema por defecto

DESDE DRUSHDrush es la linea de comandos de Drupal,mas info .

Solo necesitas ejecutar el siguiente comando:aqui

[marcelo@localhost misitioDrupal]$ drush dl nuevo_theme

Y para activarlo[marcelo@localhost misitioDrupal]$ drush en -y nuevo_theme

ADAPTIVE THEMEMas que un tema es un framework para desarrollar subtemas

en drupal.

¿QUE ES UN SUBTEMA?Es un tema de drupal que hereda caracterizticas de temas base,

podemos crear un subtema a partir de un tema 'padre' sinnecesidad de alterar su funcionamiento

ENTONCES.. ¿COMO CREAMOS UN SUBTEMACON ADAPTIVE THEME?

Lo primero seria descargar el tema desde ya sea mediante

la forma tradicional o mediante Drushhttps://www.drupal.org/project/adaptivetheme

Una vez descargado podemos seguir la forma tradicional (Muylento) o Mediante drush (Lo mas optimo)

FORMA TRADICIONALDentro la carpeta adaptivetheme se encuentra la carpeta

at_core, at_admin, at_subtheme

Copiamos la carpeta at_subtheme a la carpeta donde seencuentran nuestros temas de drupal

Renombramos la carpeta por el nombre que queramos asignarlea nuestro subtema

Dentro de la carpeta de nuestro subtema se encuentra elarchivo El cual tendremos que

modificar como:adaptivetheme_subtheme.info

nombre_subtema.info

Luego abrimos el archivo y tenemos que modificar los siguientescampos:

name = El nombre que queramos darledescription = La descripcion que queramos hacer de nuestrosubtema

Con esto tendremos listo nuestro nuevo subtema para usarlo ennuestro sitio drupal

MEDIANTE DRUSHDrush te provee de un comando automaticamente para crear un

subtema

[marcelo@localhost misitioDrupal]$ drush adaptivetheme "Your theme name" yourthemename

¿QUE ES DISEÑO RESPONSIVO?Una Forma de desarrollar sitios asegurando, que el diseño estáoptimizado para que el formato se ajuste en relación al tamaño

del dispositivo

¿COMO PUEDO USAR ADAPTIVETHEME PARAQUE MI SITIO SEA RESPONSIVO?

Adaptive theme provee de hojas de estilo en cascada(css) queusaremos para modificar el tema de nuestro sitio

GLOBAL.BASE.CSS - GLOBAL.STYLES.CSSEstos archivos contienen los estilos genericos que seran usados

en el sitio

Cualquier estilo que sea escrito en estos archivos se cargara enel sistema en cualquier resolucion o dispositivo

RESPONSIVE.DESKTOP.CSSLos estilos que vayamos colocando en este archivo solo se veran

en dispositivos grandes como ser laptop, pc de escritorios, etc.

RESPONSIVE.SMALLTOUCH.LANDSCAPE.CSS -RESPONSIVE SMALLTOUCH.PORTRAIT.CSS

Adaptive theme maneja una logica de "primero el dispositivomas pequeño", es decir que cargara el archivo correspondiente

segun a su tamaño.

Por ejemplo el archivo secargara en los dispositivos smartphone cuando se encuentren

en posición horizontal

responsive.smalltouch.landscape.css

en cambio el archivo secargara en los dispositivos smartphone cuando esten en una

posición vertical

responsive.smalltouch.portrait.css

RESPONSIVE.TABLET.LANDSCAPE.CSS -RESPONSIVE.TABLET.PORTRAIT.CSS

Cuando el sitio se este visualizando desde una tablet o unsmartphone de una resolución muy grande cargara estos

archivos igualmente ya sea segun su posición

=> horizontal => vertical

responsive.tablet.landscape.cssresponsive.tablet.portrait.css

¿SI MI NAVEGADOR ES IE8 O IE9?Adaptive Theme te ofrece un archivo que puedes ir modificandopara asignarle tu propia guia de estilos a internet explorer ya sea

en su version 8 o 9

Internet explorer 9 => Internet explorer 8 =>

lt-ie9.csslt-ie8.css

¿PUEDO ACELERAR MI PROCESO DEDESARROLLO CON ADAPTIVE THEME?

Como Adaptive theme utiliza cascading styles sheets (css)

Entonces ¿Por que no usar un lenguaje precompilador que mepermita escribir codigo css mas rapido?

SASS (SYNTACTICALLY AWESOMESTYLESHEETS)

Sass es un metalenguaje pre-procesado de css, nos permiteacelerar el diseño responsivo a la hora de escribir archivos css

¿COMO INSTALARLO?Sass es una "gema" de ruby asi que tenemos que instalar

primero ruby en nuestras computadoras

En la pagina oficial de ruby se muestra los enlaces de descargapara diferentes sistemas operativos y su manual de instalación

https://www.ruby-lang.org/es/downloads/

Una vez instalado Ruby procedemos a instalar las gemasnecesarias para utilizar sass en drupal

[marcelo@localhost misitioDrupal]$ sudo gem install sass [marcelo@localhost misitioDrupal]$ sudo gem install zen-grids [marcelo@localhost misitioDrupal]$ sudo gem install sassy-buttons [marcelo@localhost misitioDrupal]$ sudo gem install compass

Para verificar si se ha instalado bien realizamos los siguientescomandos

[marcelo@localhost misitioDrupal]$ cd /var/www/html/yourproject [marcelo@localhost misitioDrupal]$ compass create // crea un proyecto Sass [marcelo@localhost misitioDrupal]$ compass watch

Si no devuelve ningun error hemos instalado Sasscorrectamente

UTILIZAR SASS EN ADAPTIVE THEMEAdaptive Theme ya tiene Sass incorporado en su proyecto, si

queremos usar Sass en lugar de css solo debemos borrar todoslos archivos del tema y compilar los archivos que es el

formato de Sasscss .scss

Para ello utilizamos los siguientes comandos [marcelo@localhost misitioDrupal]$ compass clean // borra todos los archivos css [marcelo@localhost misitioDrupal]$ compass compile // compila los archivos .scss y genera los archivos css a partir de ello

Ya podemos usar sass en nuestro proyecto adaptive theme.

¿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; }

¿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: 6px 12px; text-decoration: none; }}

¿QUE NOS PROVEE SASS?Podemos realizar importaciones de archivos con Sass

@import 'reset';

body { font: 100% Helvetica, sans-serif; background-color: #efefef;}

¿QUE NOS PROVEE SASS?Podemos utilizar Mixin (funciones) con Sass

@mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius;}

.box { @include border-radius(10px); }

¿QUE NOS PROVEE SASS?Podemos ampliar funcionalidades con @extend con Sass.message { border: 1px solid #ccc; padding: 10px; color: #333;}

.success { @extend .message; border-color: green;}

.error { @extend .message; border-color: red;}

.warning { @extend .message; border-color: yellow;}

¿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%;}}

¡GRACIAS!Drupal Camp Bolivia 2014

Christian Marcelo Tola Pacheco | @cmtp_k52https://www.drupal.org/u/cmtp.k52

Contacto:christian@koala-soft.com