Este navegador no soporta las características necesarias para ver esta presentación. ;(

Para su correcta visulización es necesario verlo en chrome o firefox.

Emmet.io

web-developer’s toolkit

improve your
HTML & CSS
workflow

About

Diseñadora web y Front-end developer

busy with...

  • #cssPreprocessors
  • #ResponsiveWebDesign

more info in www.naknak.me

¿Utilizas
HTML & CSS
en tu día a día?

¿Qué es
Emmet?

Es un método de abreviaturas de código para
volar
con el HTML y CSS

Ventajas

unas cuantas

La diferencia entre ir
andando o volando

tu elijes

Optimiza tu tiempo

Usa tu tiempo para trabajar en tu web,

no lo pierdas marcándo código

Lo mejor

Es super intuitivo

Sintaxis sencilla

¡Al grano!

Empezamos

Sintaxis

Para todos

Sirve para el novato
como para el más pro

Operadores

Es bueno que nos vayan sonando

  • #
  • .
  • >
  • +
  • *
  • $
  • I
  • []
  • {}
  • :

Uno a uno

HTML

Elementos

div
p
ul
...
    
    

    Cualquier elemento se convierte en etiqueta, de hecho cualquier palabra

    HackForGood
        
        
        
        

    Operadores de anidación

    Hijo >

    div>ul>li

        
        

    Hermano +

    h1+div+p
        
        

    Subir nivel

    div>ul>li^^p
        
        

    Multiplicar *

    ul>li*5
        
        

    Agrupar ()

    div>(header>ul>li*2>a)+footer>p
        
    

    Operadores de atributo

    ID y CLASS # .

    div#header+div.page+div#footer.class1.class2
        
        
        

    Atributos personalizados []

    a[title="Hello world!"]

        
        
        
        

    Artículo de numeración $

    ul>li.item$*5
        
        

    Texto {}

    a{Click me}
    a{click}+b{here}
    
    clickhere
    
    
    a>{click}+b{here}

    Etiquetas implícitas

    .wrap>.content
        
        div.wrap>div.content
        
        
    em>.info
        
        em>span.info
        
        
    ul>.item*3
        
        ul>li.item*3
        
        
    table>#row$*4>[colspan=2]
        
        table>tr#row*4>td[colspan=2]
        
        

    “Lorem Ipsum”

    p*2>lorem5
        
    

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    Quis ratione animi fugit alias.

    ul.generic-list>lorem4.item*2
        
    
    • Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    • Hic officia sapiente ea!

    CSS

    m
        
    margin: ;
        
        
    m10
        
    margin: 10px;
        
        
    m10-20
        
    margin: 10px 20px ;
        
        
    m-10--20
        
    margin: -10px -20px ;
        
        
    m1.5
        
    margin: 1.5em;
        
        
    m10p-5
     
        
    margin: 10% -5px;
        
        
    p → %
    e → em
    x → ex

    Prefijos propietarios

    -bdrs
        
        -webkit-border-radius: ;
        -moz-border-radius: ;
        border-radius: ;
        
        

    Degradados

    lg(left, #fco 30%, red)
        
    background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.3, #fco), to(red));
    background-image: -webkit-linear-gradient(left, #fco 30%, red);
    background-image: -moz-linear-gradient(left, #fco 30%, red);
    background-image: -o-linear-gradient(left, #fco 30%, red);
    background-image: linear-gradient(left, #fco 30%, red);
        
        

    Acciones

    Toma el camino
    más corto

    Atajos de teclado

    Acción
    Mac
    PC

    Expandir abreviatura

    Tab

    Ctrl+E

    Tab

    Ctrl+E

    Envolver con abreviatura

    ⌃W

    Shift+Ctrl+G

    Selección hacia el exterior

    ^D

    Ctrl+,

    Ir al punto de edición

    Ctrl+Alt+→ or Ctrl+Alt+←

    Ctrl+Alt+→ or Ctrl+Alt+←

    Seleccionar item

    ⇧⌘. or ⇧⌘,

    Shift+Ctrl+. or Shift+Ctrl+,

    Comentar

    ⇧⌘/

    Shift+Ctrl+/

    Eliminar etiqueta

    ⌘'

    Shift+Ctrl+;

    Actualizar tamaño de imagen

    ⇧⌃I

    Ctrl+U

    Incrementar/disminuir número

    Incrementar 1: Ctrl+↑

    Disminuir 1: Ctrl+↓

    Incrementar 0.1: Alt+↑

    Disminuir 0.1: Alt+↓

    Incrementar 10: ⌥⌘↑ / Shift+Alt+↑

    Disminuir 10: ⌥⌘↓ / Shift+Alt+↓

    ¡Ok, lo quiero
    probar ya!

    ¿Qué es lo que necesito?

    Instala el plugin

    para tu editor de texto, en este enlace http://docs.emmet.io/

    Y por supuesto

    The source y doc

    http://docs.emmet.io/

    + todo lo que necesitas saber

    Y ¿ahora qué?

    Practica y practica,
    hasta que sientas que
    el código fluye
    bajo tus dedos.

    Te recomiendo que lo imprimas

    Pero sobre todo
    disfruta

    ¡Es un juego de niños!

    ¿Quién ha sido el genio?

    Sergey Chikuyonok,
    front-end developer de Rusia. @chikuyonok

    ¿Cuándo?

    en 2012 agosto, es decir que está recien sacado del horno.

    Creative Commons

    Y por supuesto puedes difundir, compartir, copiar, modificar, trastear, regalar,... cuanto quieras

    Licencia Creative Commons

    Thnx!