DevAcademy.la

Desarrollo Frontend

@lshimokawa@bryamrr

Motivacin

Qu herramientas y libreras de desarrollo frontend conocen?

Logro

Al finalizar la sesin el participante maqueta una aplicacin web utilizando HTML5, CSS3 y herramientas de Frontend.

Agenda

Maquetacin con HTML5 y CSS3 Responsive Web Design, Mobile First

y Media Queries Precompiladores CSS con SASS,

Bourbon (mixins) y Neat (grids)

MaquetacinHTML5 y CSS3

HTML: Hypertext Markup Language HTML5: nueva versin de HTML y

tecnologas web asociadas Semntica: nuevos tags, forms Conectividad: Web Sockets Offline: Local Storage, Web SQL Multimedia: Audio/Video, 2D/3D,

Canvas Local Storage, Local SQL

HTML5

Nuevas etiquetas

header nav article section aside footer

CSS3

Cascading Style Sheets Transformaciones 2D/3D Transiciones y animaciones Media Queries, Responsive Web Design

Nuevas propiedades

border-radius box-shadow, text-shadow gradients filters multiple backgrounds fontface transform

Responsive Web DesignMobile First y Media Queries

We can quarantine the mobile experience on separate subdomains from the non-iPhone website. But whats next? An iPad website? An N90 website?

Ethan MarcottePionero del RWD

Responsive Design

Diseo adaptable a mltiples dimensiones: mviles, tablets, desktops, Smart TV

Mobile First

Desarrollar primero para el mvil Empezar de menos a ms Los layouts ms complejos (Desktop)

dejarlos al final

Progressive Enhancement

Tcnicas RWD

Grid Fluidos Layout Shifter Off Canvas Media Queries

Grid Fluidos

Se ajustan a la resolucin de la pantalla.

Ayudan a dar estructura y forma a nuestra web.

http://static.lukew.com/md-patterns1.png

Layout Shifter

http://www.kaoyodstudio.co.th/uploads//2012/12/layout-shifter-3.png

Off Canvas

http://www.elmastudio.de/wp-content/uploads/2012/10/off-canvas-webdesign-02.jpg

viewport

Etiqueta meta Permite configurar cmo el navegador

mvil debe interpretar una pgina til para definir el ancho del

viewport igual al ancho del dispositivo.

Media Queries

Los media queries dejan que el display se adapte a distintas resoluciones especificando las propiedades CSS ledas en un determinado ancho o alto

Las medidas especificadas son los conocidos breakpoints

Responsive Design con JS

window.onresize && window.matchMedia

enquire.js Simple State Manager

Precompiladores CSSSASS, Bourbon (mixins) y Neat (grids)

Por qu usar un precompilador?

Es tedioso escribir CSS vanilla Modularidad y portabilidad Reutilizar cdigo Desarrollo ms rpido

Precompiladores CSS

Aaden capacidades a CSS como: Variables, funciones predefinidas, anidacin de selectores, Mixins, etc

Sass, Less, Stylus, etc

Sass vs Less vs Stylus

El 80% de las caractersticas son las mismas: Variables Funciones predefinidas Anidacin de selectores Mixins Loops & condicionales Manejo de colores Importing

La comunidad de Sass es la ms grande entre las 3.

Cmo funcionan?

1. Escribe cdigo en la sintaxis del precompilador

2. El cdigo se compila a CSS normal3. Listo!

http://www.nosleepforsheep.com/development/using-a-css-preprocessor/

Sass

Sass is the most mature, stable and powerful professional grade CSS extension language in the world.

Sass

Lenguaje basado en CSS Integra funcionalidades de lenguaje

de programacin como variables, mixins y funciones

Se aade a hojas de estilo .sass o .scss

Variables

Guardan informacin para reusar en las hojas de estilo.

Anidacin

Jerarqua visual en CSS al igual que HTML.

Import

Permite dividir el cdigo en porciones ms pequeas y fciles de mantener (mdulos).

@import 'archivo';

Mixins

Permite agrupar cdigo CSS para que sea reutilizado a lo largo del site.

Ideal para agregar prefijos propietarios

Extend/Herencia

Permite compartir un conjunto de propiedades CSS de un selector a otro

Ayuda a mantener el cdigo limpio

Operadores

Usar matemtica en el CSS puede ser muy til

Operadores estndar: +, -, *, / y %.

Libreras de Mixins

Coleccin de estilos comunes en Sass Libreras de Mixins:

Bourbon: bourbon.io Compass: compass-style.org

Bourbon

Librera de mixins Sass Olvida los prefijos propietarios Escribe CSS ms rpido y fcil $ gem install bourbon

Neat

Framework de Bourbon para trabajar con grids semnticos

$ gem install neat

Neat

Mixins: outer-container span-columns omega

Variables: gutter

Funciones: breakpoints

outer-container

Centra el elemento y asigna un ancho mximo (max-width)

@include outer-container;

span-columns

Especifica el nmero de columnas que un elemento debera abarcar

span-columns

Si el selector est anidado, el nmero de columnas del elemento padre debe pasar como argumento

omega Remueve el margen derecho Ideal para diseos con mltiples

filas.

breakpointRetorna una media query que se puede guardar en una variable y pasar como argumento a media().

Refills

Conjunto de componentes y patrones construidos sobre Bourbon y Neat

Incluye navbar, tipografa, cards, pestaas verticales, entre otros.

Web: refills.bourbon.io

Conclusiones