Zen Coding para HTML y CSS

Tamaño: px

Comenzar la demostración a partir de la página:

Download "Zen Coding para HTML y CSS"

Ángeles López García
hace 6 años
Vistas:

1 Zen Coding para HTML y CSS Laura Sirvent Collado Estudiante de Ingeniería Multimedia Universidad de Alicante (España)

2 Contacto

3 Zen Coding Plugin para editores de co digo Creado por Sergey Chikuyonok en 2009 Acelera escribir HTML y CSS Sintaxis basada en selectores CSS Pa gina del proyecto: zencoding/

4 Ejemplo div#page>div.logo+ul#navigation>li*5>a <div id="page"> <div class="logo"></div> <ul id="navigation"> </ul> </div> <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>

5 Editores Notepad ++ Sublime Text 2 Coda Dreamweaver NetBeans

6 Instalación en Notepad++ 1. Desde Plugin Manager 2. De forma manual

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

8 Desde Plugin Manager Buscar Zen Coding Python en el listado y pulsar Instalar

9 Desde Plugin Manager Tras reiniciar Notepad++, tendremos la opción Zen Coding en el menú Plugins

10 Desde Plugin Manager Podemos cambiar las combinaciones de teclas de los comandos a nuestro gusto, desde Configuración > Gestor de atajos de teclado

11 Desde Plugin Manager Pulsar Plugins commands, buscar los que se refieren a Zen Coding, y cambiarlos pulsando el botón Modify

12 Manualmente Entrar en la página del proyecto y descargar Zen Coding for Notepad m/p/zencoding/downloads

13 Manualmente Copiar el contenido del.zip en la carpeta plugins, que se encuentra en el directorio de instalación de Notepad++

14 Manualmente Reiniciar Notepad++. Aparecerá la opción Zen Coding en el menú superior.

15 Comando básico Ctrl + Alt + Enter (Plugin Manager) Ctrl + E (Manual)

16 Selectores expandibles Etiquetas: html, head, body, h1 h6, ul, li, p, form html <html></html> Con atributos entre corchetes [ ] span[title= Hello rel] <span title= Hello rel= ></span>

17 Esqueleto base HTML 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

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

18 Esqueleto base HTML html:xs <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> <html xmlns=" xml:lang="en"> <head> <title></title> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> </head> <body></body> </html>

19 Etiquetas anidadas Con el símbolo > div>h1 <div> </div> <h1></h1>

20 Más de una etiqueta en el mismo nivel Con el símbolo + div>h1+p <div> <h1></h1> <p></p> </div>

21 Asignar clases e identificadores Con el símbolo. para clases Con el símbolo # para identificadores

22 Asignar clases e identificadores ul#name>li.item <ul id="name"> </ul> <li class="item"></li>

23 Asignar clases e identificadores div#name>p.one+p.two <div id="name"> <p class="one"></p> </div> <p class="two"></p>

24 Repetir etiquetas Símbolo * y el número de repeticiones ul>li*3 <ul> <li></li> <li></li> <li></li> </ul>

25 Más selectores PDF Cheat Sheet

26 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();

27 Desplazarse entre etiquetas (Plugin Manager) Alt + Ctrl + Flecha Derecha (derecha) Alt + Ctrl + Flecha Izquierda (izquierda) (Manual) Alt + Ctrl + ] (derecha) Alt + Ctrl + [ (izquierda)

28 Etiquetas después de contenido Escribir el contenido, por ejemplo, un párrafo 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 número de repeticiones

29 Etiquetas después de contenido 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>

30 DEMOSTRACIÓN

31 Enlaces (I) Artículo en Smashing Magazine /11/21/zen-coding-a-new-way-to-write- htmlcode/ Demostración del autor

32 Enlaces (II) Editor online para probar Zen Coding Demostración del autor

33 @idesweb