sitios responsivos con adaptive theme
DESCRIPTION
Mi presentación de como crear sitios responsivos en drupal con AT DrupalCamp Bolivia 2014TRANSCRIPT
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:[email protected]