Scribd Logo
Загрузить

Добро пожаловать в Scribd!

  • Zen Coding PDF

    Загружено:

    Rútbel Román Aroste
    203 просмотров33 страницы

    Оригинальное название

    Zen Coding.pdf

    Авторское право

    © Attribution Non-Commercial (BY-NC)

    Доступные форматы

    PDF, TXT или читайте онлайн в Scribd

    Этот документ был вам полезен?

    Это неприемлемый материал?

    Пожаловаться на этот документ

    Авторское право:

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    203 просмотров33 страницы

    Zen Coding PDF

    Загружено:

    Rútbel Román Aroste

    Авторское право:

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    из 33

    Introduccin al desarrollo web

    http://idesweb.es/

    ZEN CODING

    Zen Coding para HTML y CSS


    Laura Sirvent Collado Estudiante de Ingeniera Multimedia Universidad de Alicante (Espaa)

    Introduccin al desarrollo web


    http://idesweb.es/

    Contacto
    ZEN CODING

    http://www.7-days.es laurasirco@gmail.com

    Introduccin al desarrollo web


    http://idesweb.es/

    Zen Coding
    ZEN CODING
    Plugin para editores de codigo Creado por Sergey Chikuyonok en 2009 Acelera escribir HTML y CSS Sintaxis basada en selectores CSS Pagina del proyecto: http://code.google.com/p/ zencoding/

    Introduccin al desarrollo web


    http://idesweb.es/

    Ejemplo
    <div id="page"> <div class="logo"></div> <ul id="navigation"> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </div>

    ZEN CODING

    div#page>div.logo+ul#navigation>li*5>a

    Introduccin al desarrollo web


    http://idesweb.es/

    Editores
    Notepad ++ Sublime Text 2 Coda Dreamweaver NetBeans
    ZEN CODING

    Introduccin al desarrollo web


    http://idesweb.es/

    Instalacin en Notepad++
    ZEN CODING

    1. Desde Plugin Manager 2. De forma manual

    Introduccin al desarrollo web


    http://idesweb.es/

    Desde Plugin Manager


    ZEN CODING

    Iniciar Notepad++ e ir a Plugins > Plugin Manager > Show Plugin Manager

    Introduccin al desarrollo web


    http://idesweb.es/

    Desde Plugin Manager


    ZEN CODING

    Buscar Zen Coding Python en el listado y pulsar Instalar

    Introduccin al desarrollo web


    http://idesweb.es/

    Desde Plugin Manager


    ZEN CODING

    Tras reiniciar Notepad++, tendremos la opcin Zen Coding en el men Plugins

    Introduccin al desarrollo web


    http://idesweb.es/

    Desde Plugin Manager


    Podemos cambiar las combinaciones de teclas de los comandos a nuestro gusto, desde Configuracin > Gestor de atajos de teclado
    ZEN CODING

    Introduccin al desarrollo web


    http://idesweb.es/

    Desde Plugin Manager


    Pulsar Plugins commands, buscar los que se refieren a Zen Coding, y cambiarlos pulsando el botn Modify
    ZEN CODING

    Introduccin al desarrollo web


    http://idesweb.es/

    Manualmente
    Entrar en la pgina del proyecto y descargar Zen Coding for Notepad++ 0.7 http://code.google.co m/p/zencoding/downloads
    ZEN CODING

    Introduccin al desarrollo web


    http://idesweb.es/

    Manualmente
    ZEN CODING

    Copiar el contenido del .zip en la carpeta plugins, que se encuentra en el directorio de instalacin de Notepad++

    Introduccin al desarrollo web


    http://idesweb.es/

    Manualmente
    ZEN CODING

    Reiniciar Notepad++. Aparecer la opcin Zen Coding en el men superior.

    Introduccin al desarrollo web


    http://idesweb.es/

    Comando bsico
    ZEN CODING

    Ctrl + Alt + Enter


    (Plugin Manager)

    Ctrl + E
    (Manual)

    Introduccin al desarrollo web


    http://idesweb.es/

    Selectores expandibles
    ZEN CODING

    Etiquetas: html, head, body, h1h6, ul, li, p, form


    html <html></html>

    Con atributos entre corchetes [ ]


    span[title=Hello rel] <span title=Hello rel=></span>

    Introduccin al desarrollo web


    http://idesweb.es/

    Esqueleto base HTML


    ZEN CODING
    HTML 4.01
    html:4s html:4t (variante estricta o transacional)

    XHTML 1.01
    html:xs html:xt (variante estricta o transacional)

    XHTML 1.1
    html:xxs

    HTML 5
    html:5

    Introduccin al desarrollo web


    http://idesweb.es/

    Esqueleto base HTML


    ZEN CODING

    html:xs
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> </head>


    <body></body> </html>

    Introduccin al desarrollo web


    http://idesweb.es/

    Etiquetas anidadas
    ZEN CODING

    Con el smbolo >


    div>h1 <div> <h1></h1> </div>

    Introduccin al desarrollo web


    http://idesweb.es/

    Ms de una etiqueta en el mismo nivel


    ZEN CODING

    Con el smbolo +
    div>h1+p <div>
    <h1></h1> <p></p> </div>

    Introduccin al desarrollo web


    http://idesweb.es/

    Asignar clases e identificadores


    ZEN CODING

    Con el smbolo . para clases Con el smbolo # para identificadores

    Introduccin al desarrollo web


    http://idesweb.es/

    Asignar clases e identificadores


    ZEN CODING
    ul#name>li.item <ul id="name"> <li class="item"></li> </ul>

    Introduccin al desarrollo web


    http://idesweb.es/

    Asignar clases e identificadores


    ZEN CODING
    div#name>p.one+p.two <div id="name"> <p class="one"></p> <p class="two"></p> </div>

    Introduccin al desarrollo web


    http://idesweb.es/

    Repetir etiquetas
    ZEN CODING

    Smbolo * y el nmero de repeticiones


    ul>li*3 <ul>
    <li></li> <li></li> <li></li> </ul>

    Introduccin al desarrollo web


    http://idesweb.es/

    Ms selectores
    ZEN CODING

    PDF Cheat Sheet


    http://zencoding.googlecode.com/files/ZenCodingCheatSheet.pdf

    Introduccin al desarrollo web


    http://idesweb.es/

    Abreviaturas en CSS
    fl:n float:none; fl:l float:left; fl:r float:right; pos:a position:absolute; pos:r position:relative; bgc background-color:#FFF; bgi background-image:url();

    ZEN CODING

    Introduccin al desarrollo web


    http://idesweb.es/

    Desplazarse entre etiquetas


    (Plugin Manager) Alt + Ctrl + Flecha Derecha (derecha) Alt + Ctrl + Flecha Izquierda (izquierda) (Manual) Alt + Ctrl + ] (derecha) Alt + Ctrl + [ (izquierda)
    ZEN CODING

    Introduccin al desarrollo web


    http://idesweb.es/

    Etiquetas despus de contenido


    ZEN CODING
    Escribir el contenido, por ejemplo, un prrafo o una lista Seleccionarlo Pulsar
    Ctrl + Alt + Shift + Enter (Plugin Manager) Ctrl + Shift + A (Manual)

    Escribir la abreviatura, si es una lista de varios elementos, la etiqueta de los elementos con el asterisco pero sin el nmero de repeticiones

    Introduccin al desarrollo web


    http://idesweb.es/

    Etiquetas despus de contenido


    ZEN CODING

    Inicio Blog Contacto

    ul#menu>li.item-$*

    <ul id="menu"> <li id="item-1">Inicio</li> <li id="item-2">Blog</li> <li id="item-3">Contacto</li> </ul>

    Introduccin al desarrollo web


    http://idesweb.es/

    ZEN CODING

    DEMOSTRACIN

    Introduccin al desarrollo web


    http://idesweb.es/

    Enlaces (I)
    ZEN CODING

    Artculo en Smashing Magazine


    http://coding.smashingmagazine.com/ 2009/11/21/zen-coding-a-new-way-to-write- htmlcode/

    Demostracin del autor


    http://vimeo.com/7405114

    Introduccin al desarrollo web


    http://idesweb.es/

    Enlaces (II)
    ZEN CODING

    Editor online para probar Zen Coding


    http://zen-coding.ru/demo/

    Demostracin del autor


    http://code.google.com/p/zencoding/wiki/ZenHTMLSelectorsEn http://code.google.com/p/zen-coding/wiki/Actions

    Introduccin al desarrollo web


    http://idesweb.es/

    ZEN CODING

    http://idesweb.es/ idw@idesweb.es @idesweb

    Вам также может понравиться