Upload
ruben
View
52
Download
0
Embed Size (px)
Citation preview
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