Zen Coding.pdf
-
Upload
rutbel-roman-aroste -
Category
Documents
-
view
61 -
download
0
Transcript of Zen Coding.pdf
ZEN
CO
DIN
G
Introducción al desarrollo web http://idesweb.es/
Zen Coding para HTML y CSS
Laura Sirvent Collado
Estudiante de Ingeniería Multimedia
Universidad de Alicante (España)
ZEN
CO
DIN
G
Introducción al desarrollo web http://idesweb.es/
Contacto
• http://www.7-days.es
ZEN
CO
DIN
G
Introducción al desarrollo web http://idesweb.es/
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/ zen-coding/
ZEN
CO
DIN
G
Introducción al desarrollo web http://idesweb.es/
Ejemplo
div#page>div.logo+ul#navigation>li*5>a
<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
CO
DIN
G
Introducción al desarrollo web http://idesweb.es/
Editores
• Notepad ++
• Sublime Text 2
• Coda
• Dreamweaver
• NetBeans
• …
ZEN
CO
DIN
G
Introducción al desarrollo web http://idesweb.es/
Instalación en Notepad++
1. Desde Plugin Manager
2. De forma manual
ZEN
CO
DIN
G
Introducción al desarrollo web http://idesweb.es/
Desde Plugin Manager
• Iniciar Notepad++ e ir a Plugins > Plugin Manager > Show Plugin Manager
ZEN
CO
DIN
G
Introducción al desarrollo web http://idesweb.es/
Desde Plugin Manager
• Buscar Zen Coding – Python en el listado y pulsar Instalar
ZEN
CO
DIN
G
Introducción al desarrollo web http://idesweb.es/
Desde Plugin Manager
• Tras reiniciar Notepad++, tendremos la opción Zen Coding en el menú Plugins
ZEN
CO
DIN
G
Introducción al desarrollo web http://idesweb.es/
Desde Plugin Manager
• Podemos cambiar las combinaciones de teclas de los comandos a nuestro gusto, desde Configuración > Gestor de atajos de teclado
ZEN
CO
DIN
G
Introducción al desarrollo web http://idesweb.es/
Desde Plugin Manager
• Pulsar Plugins commands, buscar los que se refieren a Zen Coding, y cambiarlos pulsando el botón Modify
ZEN
CO
DIN
G
Introducción al desarrollo web http://idesweb.es/
Manualmente
Entrar en la página del proyecto y descargar Zen Coding for Notepad++ 0.7
http://code.google.com/p/zen-coding/downloads
ZEN
CO
DIN
G
Introducción al desarrollo web http://idesweb.es/
Manualmente
Copiar el contenido del .zip en la carpeta plugins, que se encuentra en el directorio de instalación de Notepad++
ZEN
CO
DIN
G
Introducción al desarrollo web http://idesweb.es/
Manualmente
Reiniciar Notepad++. Aparecerá la opción Zen Coding en el menú superior.
ZEN
CO
DIN
G
Introducción al desarrollo web http://idesweb.es/
Ctrl + Alt + Enter (Plugin Manager)
Ctrl + E (Manual)
Comando básico
ZEN
CO
DIN
G
Introducción al desarrollo web http://idesweb.es/
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>
ZEN
CO
DIN
G
Introducción al desarrollo web http://idesweb.es/
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
ZEN
CO
DIN
G
Introducción al desarrollo web http://idesweb.es/
Esqueleto base HTML
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>
ZEN
CO
DIN
G
Introducción al desarrollo web http://idesweb.es/
Etiquetas anidadas
• Con el símbolo “>”
div>h1 <div>
<h1></h1>
</div>
ZEN
CO
DIN
G
Introducción al desarrollo web http://idesweb.es/
Más de una etiqueta en el mismo nivel
• Con el símbolo “+”
div>h1+p <div>
<h1></h1>
<p></p>
</div>
ZEN
CO
DIN
G
Introducción al desarrollo web http://idesweb.es/
Asignar clases e identificadores
• Con el símbolo “.” para clases
• Con el símbolo “#” para identificadores
ZEN
CO
DIN
G
Introducción al desarrollo web http://idesweb.es/
Asignar clases e identificadores
ul#name>li.item <ul id="name">
<li class="item"></li>
</ul>
ZEN
CO
DIN
G
Introducción al desarrollo web http://idesweb.es/
Asignar clases e identificadores
div#name>p.one+p.two <div id="name">
<p class="one"></p>
<p class="two"></p>
</div>
ZEN
CO
DIN
G
Introducción al desarrollo web http://idesweb.es/
Repetir etiquetas
• Símbolo “*” y el número de repeticiones
ul>li*3 <ul>
<li></li>
<li></li>
<li></li>
</ul>
ZEN
CO
DIN
G
Introducción al desarrollo web http://idesweb.es/
Más selectores
• PDF Cheat Sheet http://zen-coding.googlecode.com/files/ZenCodingCheatSheet.pdf
ZEN
CO
DIN
G
Introducción 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
CO
DIN
G
Introducción 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
CO
DIN
G
Introducción al desarrollo web http://idesweb.es/
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
ZEN
CO
DIN
G
Introducción al desarrollo web http://idesweb.es/
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>
ZEN
CO
DIN
G
Introducción al desarrollo web http://idesweb.es/
DEMOSTRACIÓN
ZEN
CO
DIN
G
Introducción al desarrollo web http://idesweb.es/
Enlaces (I)
• Artículo en Smashing Magazine
http://coding.smashingmagazine.com/ 2009/11/21/zen-coding-a-new-way-to-write- html-code/
• Demostración del autor
http://vimeo.com/7405114
ZEN
CO
DIN
G
Introducción al desarrollo web http://idesweb.es/
Enlaces (II)
• Editor online para probar Zen Coding http://zen-coding.ru/demo/
• Demostración del autor http://code.google.com/p/zen-coding/wiki/ZenHTMLSelectorsEn
http://code.google.com/p/zen-coding/wiki/Actions
ZEN
CO
DIN
G
Introducción al desarrollo web http://idesweb.es/
http://idesweb.es/
[email protected] @idesweb