desarrollo frontend
TRANSCRIPT
-
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