Escribe código como un maestro zen con Zen Coding en Sublime Text 2

¿Qué es Sublime Text 2?

Sublime Text 2 es el editor de texto donde estaremos trabajando por lo que es muy importante lo tengas ya instalado en tu equipo, en caso contrario te recomendamos ampliamente lo descargues de la .

Pero… ¿Qué es Zen Coding?

Zen Coding es un plugin para editores de texto el cual permite una escritura altamente rápida en HTML, XML y CSS.

Una simple línea de código como esta:

Representa todo este código:

Ya que tenemos la introducción, sabemos los términos y funciones, podemos darnos cuenta que Zen Coding suena más que genial.

¿Cómo instalar Sublime Text 2?

Lo primero que necesitamos es un gestor de paquetes, el cual nos haga fácil la instalación de plugins, así que acudiremos al PACKAGE CONTROL para Sublime Text 2.

Instalando de Package Control

Para su instalación tenemos que ir a la consola de nuestro editor de texto de la siguiente manera:

Accediendo al menú View > Show Console.

Una vez estando en la consola pegamos el siguiente código:

import urllib2,os; pf=’Package Control.sublime-package’; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),’wb’).write(urllib2.urlopen(‘http://sublime.wbond.net/’+pf.replace(‘ ‘,’%20’)).read()); print ‘Please restart Sublime Text to finish installation’

De manera que quede así:

Ahora solamente queda reiniciar el editor de texto, cerramos y volvemos a abrirlo. También puedes acceder a donde explican otra forma de instalarlo.

Instalación de Zen Coding

La instalación de Zen Coding es muy sencilla, sigue los siguientes pasos:

Accede al menu Preferences > Package Control

Veras una ventana como esta:

Una vez allí, seleccionamos la opción Package Control: Install Package. Abrirá otra ventana donde filtraremos las palabras Zen Coding, presiona enter y listo, habrá quedado instalado.

La Magía que nos permite Zen Coding

Debido a que es un plugin que acelera el maquetado en HTML y CSS tiene algunos elementos con los cuales debemos familiarizarnos para obtener el mejor provecho. Este símbolo Matemático (“>”) nos sirve para decirle a alguna etiqueta que tiene un elemento dentro de ella.

Ejemplo:

Tenemos un NAV el cual vamos a suponer que es el elemento padre, si ponemos después de dicha etiqueta el signo “>” le indicamos que tendrá un elemento hijo el cual se encontrara dentro de ella, por esta ocasión un UL.

<nav>

<ul></ul>

</nav>

El operador numérico (“+”) nos permite separar, a diferencia del símbolo anterior funciona para decirle que tiene una etiqueta que ira junto a ella, más no dentro de ella.

Ejemplo:

Tenemos el mismo NAV pero vemos que ahora no está solo, sino que junto a él hay un SECTION. Se indicaría de esta manera.

nav+section, el resultado es:

<nav>

</nav>

<section>

</section>

Los corchetes (“[  ]”) sirven para poner un atributo dentro de una etiqueta.

Ejemplo:

Tenemos un A pero queremos dentro una dirección href y un title.

Lo indicaremos de la siguiente manera.

a[href=”http://” title=”Titulo de tu enlace”], nos quedará así:

<a href="http://" title="Titulo del enlace"></a>

Hay muchos atributos que debes aprender, para ello visita el de Zen Coding.

Muy recomendable que la descargues, la imprimas y empieces a jugar un poco más con este maravilloso plugin.

Si te ha gustado todo esto puedes ver la charla que se tuvo en NinjaCode.tv  a cerca del tema.

O bien puedes seguir el canal de Youtube de en donde encontrarás dos tutoriales sobre Zen Coding y otras cosas muy interesantes.

Cualquier duda que tengas al respecto envíale un tweet a , él podrá apoyarte y darte algunos consejos, también podrás localizarlo en su correo personal de Gmail si es que requieres una asesoría más a fondo.

El código del Ninja Code TV sobre Zencoding esta en