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)
Maquetacin
HTML5 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 Design
Mobile 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 Marcotte
Pionero 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.
<meta name="viewport"
content="width=device-width;
initial-scale=1.0" />
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 CSS
SASS, 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 normal
3. 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)
<body>
@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.
breakpoint
Retorna 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