Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Maquetación rápida con Emmet, Stylus y Sublime Text

Maquetación rápida con Emmet, Stylus y Sublime Text

Charla para el Wordcamp 2014

More Decks by César J. Aquino Maximiliano

Other Decks in Education

Transcript

  1. MAQUETACION RAPIDA CON EMMET,
    STYLUS Y SUBLIME TEXT
    César Aquino Maximiliano - @jovenred

    View full-size slide

  2. DISPONIBLE EN UNOS CUANTOS NAVEGADORES
    emmet.io/download

    View full-size slide

  3. ¿Los dos puntos?
    ¿Las llaves?
    ¿El punto y coma?
    ¿Una variable?
    Funciones
    Código organizado
    Mixins

    View full-size slide

  4. Un preprocesador es un programa que procesa sus
    datos de entrada para producir una salida que se
    utiliza como entrada a otro programa.

    View full-size slide

  5. VARIABLES
    MIXINS

    View full-size slide

  6. MIXINS
    FUNCTIONS, CONDITIONALS

    View full-size slide

  7. FUNCTIONS, CONDITIONALS
    FOR, INTERPOLATION

    View full-size slide

  8. FOR, INTERPOLATION
    @EXTEND

    View full-size slide

  9. @EXTEND
    @MEDIA

    View full-size slide

  10. INSTALAR STYLUS
    Instalar NodeJS
    http://nodejs.org/
    Ingresar al terminal y escribes:
    npm install stylus
    Más información visitar:
    http://learnboost.github.io/stylus/

    View full-size slide

  11. ¿DÓNDE ESTÁ EL CÓDIGO?

    View full-size slide

  12. Ctrl+P -> Goto Anything

    View full-size slide

  13. Paleta de comandos
    (Que puedes cambiarlos si gustas)

    View full-size slide

  14. Snippets
    Códigos guardados en archivos individuales que te permitirán insertar de
    forma fácil y rápida partes de código simplemente escribiendo una palabra y
    pulsando TAB, o bien asignándole una combinación de teclas.

    View full-size slide

  15. Package Control

    View full-size slide

  16. SUBLIME TEXT Y WORDPRESS

    View full-size slide

  17. Search WordPress Codex:
    Te permite revisar el codex (la biblia) de wordpress desde el
    mismo Sublime Text.
    https://github.com/welovewordpress/SublimeWordPressCodex

    View full-size slide

  18. WordPress New Project Config:
    Este plugin puede crear una nueva carpeta con el nombre del
    proyecto, instalar la última versión de WordPress y descargar
    e instalar un tema.
    https://github.com/jeremycastelli/Wordpress-new-project-config

    View full-size slide

  19. Sublime Text 2 WordPress:
    Este plugin tiene una colección de snippets precargados con
    códigos de WordPress.
    https://github.com/purplefish32/sublime-text-2-wordpress

    View full-size slide

  20. ¿Preguntas?

    View full-size slide

  21. ¿Preguntas?
    Busquen en ;)

    View full-size slide

  22. ¿Preguntas?
    Muchas gracias!
    César J. Aquino Maximiliano (@jovenred)
    Busquen en ;)

    View full-size slide