Tu navegador no soporta las características necesarias para impress.js, por lo que estás viendo una versión reducida de la presentación.

Para una experiencia de usuario mucho mejor usa Chrome, Safari o Firefox, gracias.

Zen Coding

by #nak

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

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

¿Qué es Zen Coding?

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

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

Selectores

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

Uno a uno

E

Nombre del elemento
div
p
ul
...

E#id

Elemento con identificador

div#content
p#intro

                
    

E.class

Elemento con clases

div.header
p.error.critical

                
    

E#id.class

También se pueden combinar clases e IDs

div#content.column.width


    

E>N

Elemento hijo

div>p
div#footer>p>span

     

E+N

Elemento del mismo nivel

h1+p
div#header+div#content+div#footer

    

Otro uso del E+

Añadir hijos(si los tiene)

  • ul+
  • ol+
  • table+
  • tr+
  • dl+
  • select+

    

E*N

Multiplicar elementos

ul.nav>li*3>a


    

E$*N

Introducir numeración

ul#nav>li.item$*3


        
         

E|

Crear filtros

p.title|e


        <p class="title"></p> 
       
         

E[]

Añadir atributos

p[title]


    

E:V

Añadir valor en CSS

pos:a


    position:absolute;
       
         

Key Bindings

Ctrl+Alt+Enter

Tab

Dos conceptos

Expandir y envolver

Demo

La teoría está muy bien

¿pero qué tal un poco de movimiento?

Abre tu mente

Zen Coding v0.5 from Sergey Chikuyonok on Vimeo.

 

¡Ok, lo quiero probar ya!

¿Qué es lo que necesito?

Instala el plugin

para tu editor de texto, descargalo aquí

Y por supuesto

The source

https://github.com/sergeche/zen-coding

+ todo lo que necesitas saber

Y ¿ahora qué?

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

Para eso toca estudiar un pelín

Ahí va la chuleta maxi de 7 páginas

Don´t worry

Que nadie se asuste, que Alexander Shabunevich nos ha preparado una "cheat sheet" en condiciones.

Aquí la tienes

¿Quién ha sido el genio?

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

¿Cuándo?

en 2009, es decir que ya llevo 3 años perdiéndomelo.

About

Soy Naiara Abaroa,
diseñadora web y front-end developer.
@nabaroa www.naknak.me

Recursos

¿Cómo he hecho esta web?

Creative Commons

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

Licencia Creative Commons

The end

Eskerrik asko etortzeagatik

;)

Usa la barra espaciadora o las flechas para navegar