Zen Coding.pdf
-
Upload
rutbel-roman-aroste -
Category
Documents
-
view
57 -
download
0
Transcript of Zen Coding.pdf
![Page 1: Zen Coding.pdf](https://reader034.fdocuments.ec/reader034/viewer/2022051213/55cf9bd3550346d033a78372/html5/thumbnails/1.jpg)
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)
![Page 2: Zen Coding.pdf](https://reader034.fdocuments.ec/reader034/viewer/2022051213/55cf9bd3550346d033a78372/html5/thumbnails/2.jpg)
ZEN
CO
DIN
G
Introducción al desarrollo web http://idesweb.es/
Contacto
• http://www.7-days.es
![Page 3: Zen Coding.pdf](https://reader034.fdocuments.ec/reader034/viewer/2022051213/55cf9bd3550346d033a78372/html5/thumbnails/3.jpg)
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/
![Page 4: Zen Coding.pdf](https://reader034.fdocuments.ec/reader034/viewer/2022051213/55cf9bd3550346d033a78372/html5/thumbnails/4.jpg)
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>
![Page 5: Zen Coding.pdf](https://reader034.fdocuments.ec/reader034/viewer/2022051213/55cf9bd3550346d033a78372/html5/thumbnails/5.jpg)
ZEN
CO
DIN
G
Introducción al desarrollo web http://idesweb.es/
Editores
• Notepad ++
• Sublime Text 2
• Coda
• Dreamweaver
• NetBeans
• …
![Page 6: Zen Coding.pdf](https://reader034.fdocuments.ec/reader034/viewer/2022051213/55cf9bd3550346d033a78372/html5/thumbnails/6.jpg)
ZEN
CO
DIN
G
Introducción al desarrollo web http://idesweb.es/
Instalación en Notepad++
1. Desde Plugin Manager
2. De forma manual
![Page 7: Zen Coding.pdf](https://reader034.fdocuments.ec/reader034/viewer/2022051213/55cf9bd3550346d033a78372/html5/thumbnails/7.jpg)
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
![Page 8: Zen Coding.pdf](https://reader034.fdocuments.ec/reader034/viewer/2022051213/55cf9bd3550346d033a78372/html5/thumbnails/8.jpg)
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
![Page 9: Zen Coding.pdf](https://reader034.fdocuments.ec/reader034/viewer/2022051213/55cf9bd3550346d033a78372/html5/thumbnails/9.jpg)
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
![Page 10: Zen Coding.pdf](https://reader034.fdocuments.ec/reader034/viewer/2022051213/55cf9bd3550346d033a78372/html5/thumbnails/10.jpg)
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
![Page 11: Zen Coding.pdf](https://reader034.fdocuments.ec/reader034/viewer/2022051213/55cf9bd3550346d033a78372/html5/thumbnails/11.jpg)
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
![Page 12: Zen Coding.pdf](https://reader034.fdocuments.ec/reader034/viewer/2022051213/55cf9bd3550346d033a78372/html5/thumbnails/12.jpg)
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
![Page 13: Zen Coding.pdf](https://reader034.fdocuments.ec/reader034/viewer/2022051213/55cf9bd3550346d033a78372/html5/thumbnails/13.jpg)
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++
![Page 14: Zen Coding.pdf](https://reader034.fdocuments.ec/reader034/viewer/2022051213/55cf9bd3550346d033a78372/html5/thumbnails/14.jpg)
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.
![Page 15: Zen Coding.pdf](https://reader034.fdocuments.ec/reader034/viewer/2022051213/55cf9bd3550346d033a78372/html5/thumbnails/15.jpg)
ZEN
CO
DIN
G
Introducción al desarrollo web http://idesweb.es/
Ctrl + Alt + Enter (Plugin Manager)
Ctrl + E (Manual)
Comando básico
![Page 16: Zen Coding.pdf](https://reader034.fdocuments.ec/reader034/viewer/2022051213/55cf9bd3550346d033a78372/html5/thumbnails/16.jpg)
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>
![Page 17: Zen Coding.pdf](https://reader034.fdocuments.ec/reader034/viewer/2022051213/55cf9bd3550346d033a78372/html5/thumbnails/17.jpg)
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
![Page 18: Zen Coding.pdf](https://reader034.fdocuments.ec/reader034/viewer/2022051213/55cf9bd3550346d033a78372/html5/thumbnails/18.jpg)
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>
![Page 19: Zen Coding.pdf](https://reader034.fdocuments.ec/reader034/viewer/2022051213/55cf9bd3550346d033a78372/html5/thumbnails/19.jpg)
ZEN
CO
DIN
G
Introducción al desarrollo web http://idesweb.es/
Etiquetas anidadas
• Con el símbolo “>”
div>h1 <div>
<h1></h1>
</div>
![Page 20: Zen Coding.pdf](https://reader034.fdocuments.ec/reader034/viewer/2022051213/55cf9bd3550346d033a78372/html5/thumbnails/20.jpg)
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>
![Page 21: Zen Coding.pdf](https://reader034.fdocuments.ec/reader034/viewer/2022051213/55cf9bd3550346d033a78372/html5/thumbnails/21.jpg)
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
![Page 22: Zen Coding.pdf](https://reader034.fdocuments.ec/reader034/viewer/2022051213/55cf9bd3550346d033a78372/html5/thumbnails/22.jpg)
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>
![Page 23: Zen Coding.pdf](https://reader034.fdocuments.ec/reader034/viewer/2022051213/55cf9bd3550346d033a78372/html5/thumbnails/23.jpg)
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>
![Page 24: Zen Coding.pdf](https://reader034.fdocuments.ec/reader034/viewer/2022051213/55cf9bd3550346d033a78372/html5/thumbnails/24.jpg)
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>
![Page 25: Zen Coding.pdf](https://reader034.fdocuments.ec/reader034/viewer/2022051213/55cf9bd3550346d033a78372/html5/thumbnails/25.jpg)
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
![Page 26: Zen Coding.pdf](https://reader034.fdocuments.ec/reader034/viewer/2022051213/55cf9bd3550346d033a78372/html5/thumbnails/26.jpg)
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();
• …
![Page 27: Zen Coding.pdf](https://reader034.fdocuments.ec/reader034/viewer/2022051213/55cf9bd3550346d033a78372/html5/thumbnails/27.jpg)
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)
![Page 28: Zen Coding.pdf](https://reader034.fdocuments.ec/reader034/viewer/2022051213/55cf9bd3550346d033a78372/html5/thumbnails/28.jpg)
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
![Page 29: Zen Coding.pdf](https://reader034.fdocuments.ec/reader034/viewer/2022051213/55cf9bd3550346d033a78372/html5/thumbnails/29.jpg)
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>
![Page 30: Zen Coding.pdf](https://reader034.fdocuments.ec/reader034/viewer/2022051213/55cf9bd3550346d033a78372/html5/thumbnails/30.jpg)
ZEN
CO
DIN
G
Introducción al desarrollo web http://idesweb.es/
DEMOSTRACIÓN
![Page 31: Zen Coding.pdf](https://reader034.fdocuments.ec/reader034/viewer/2022051213/55cf9bd3550346d033a78372/html5/thumbnails/31.jpg)
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
![Page 32: Zen Coding.pdf](https://reader034.fdocuments.ec/reader034/viewer/2022051213/55cf9bd3550346d033a78372/html5/thumbnails/32.jpg)
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
![Page 33: Zen Coding.pdf](https://reader034.fdocuments.ec/reader034/viewer/2022051213/55cf9bd3550346d033a78372/html5/thumbnails/33.jpg)
ZEN
CO
DIN
G
Introducción al desarrollo web http://idesweb.es/
http://idesweb.es/
[email protected] @idesweb