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


Contacto

• http://www.7-days.es

• [email protected]

http://www.7-days.es



ZEN

CO

DIN

G


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/

http://code.google.com/p/ zen-coding/






ZEN

CO

DIN

G


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>





</ul>

</div>

ZEN

CO

DIN

G


Editores

• Notepad ++

• Sublime Text 2

• Coda

• Dreamweaver

• NetBeans

• …

ZEN

CO

DIN

G


Instalación en Notepad++

1. Desde Plugin Manager

2. De forma manual

ZEN

CO

DIN

G


Desde Plugin Manager

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

ZEN

CO

DIN

G



• Buscar Zen Coding – Python en el listado y pulsar Instalar

ZEN

CO

DIN

G



• Tras reiniciar Notepad++, tendremos la opción Zen Coding en el menú Plugins

ZEN

CO

DIN

G



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

ZEN

CO

DIN

G



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

ZEN

CO

DIN

G


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


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


Manualmente

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

ZEN

CO

DIN

G


Ctrl + Alt + Enter (Plugin Manager)

Ctrl + E (Manual)

Comando básico

ZEN

CO

DIN

G


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


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


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


Etiquetas anidadas

• Con el símbolo “>”

div>h1 <div>

<h1></h1>

</div>

ZEN

CO

DIN

G


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


Asignar clases e identificadores

• Con el símbolo “.” para clases

• Con el símbolo “#” para identificadores

ZEN

CO

DIN

G



ul#name>li.item <ul id="name">

<li class="item"></li>

</ul>

ZEN

CO

DIN

G



div#name>p.one+p.two <div id="name">

<p class="one"></p>

<p class="two"></p>

</div>

ZEN

CO

DIN

G


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


Más selectores

• PDF Cheat Sheet http://zen-coding.googlecode.com/files/ZenCodingCheatSheet.pdf

http://zen-coding.googlecode.com/files/ZenCodingCheatSheet.pdf







ZEN

CO

DIN

G


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


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


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


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


DEMOSTRACIÓN

ZEN

CO

DIN

G


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


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

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



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











ZEN

CO

DIN

G


http://idesweb.es/

[email protected] @idesweb

http://idesweb.es/

Documents

Zen Coding.pdf