Avisar de contenido inadecuado

Codificando XHTML y CSS más rapido con Zen-Coding

{
}

Zen Coding es un plugin que está disponible para casi todos los editores del mercado y con el que podras codificar HTML/XML/CSS a gran velocidad.

Este plugin nos ofrece dos funcionalidades:

  • Expansión de abreviaciones: con unas abreviaciones determinadas (muy sencillas, ya que son muy parecidas a los selectores de CSS) podremos generar gran cantidad código HTML/XML/CSS con una simple combinación de teclas.
  • Selección de bloques (pares de tags): Pudiendo realizar una serie de acciones como seleccionar pares de tags, ir a zonas editables de los tags, envolver (wrap) un bloque con otras abreviaciones, comentar/borrar bloques y más cosas.

Para que veais lo que se puede hacer con este plugin os dejo aquí un video.

También hay disponible una demo online desde la que podeis probar su funcionamiento via web (CTRL+E para expandir, requiere Javascript)

Ejemplos

Veamos un ejemplo sencillo. Esta abreviación :


	div#page>div.logo+ul#navigation>li*5>a

Nos generaria lo siguiente (con una combinación de teclas que depende del editor, pero normalmente CTRL + ,)


	<div id="page">
		 <div></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>

Otro ejemplo mas completo. La siguiente abreviación:


   html:xs>(div#header.header>img.logo[src="http://www.google.es" title="logo" alt=
   "logo"])+(div#content.content>h1+p*5)+(div#footer.footer>ul>li*5>a[href="./"])

Nos generaria el siguiente código:



  <!DOCTYPE html PUBLIC 
  "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
	  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	  <title></title>
    </head>
    <body>
	  <div id="header">
	    <img src="http://www.google.es" alt="logo" class="logo" title="logo" />
	  </div>
	  <div id="content">
		<h1></h1>
		<p></p>
		<p></p>
		<p></p>
		<p></p>
		<p></p>
	  </div>
	  <div id="footer">
		<ul>
			<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>
    </body>
  </html>

Mola , eh?

Editores

Hay una serie de plugins oficiales (desarrollados por el equipo de Zen Coding y con todas las caracteristicas de Zen Coding)

  • Aptana/Eclipse (crossplatform)
  • TextMate (Mac).
  • Coda (Mac)
  • Espresso (Mac)
  • Komodo Edit/IDE (crossplatform)
  • Notepad++ (Windows)
  • PSPad (Windows)
  • <textarea> (browser-based)
  • editArea (browser-based)

Pero ademas hay plugins desarrollados por terceros (en los que no se garantiza que esten disponibles todas las funcionalidades de Zen Coding) como pueden ser los de Dreamweaver o los de Vim

Puedes acceder a todos los plugins disponibles para los editores desde aquí o desde aquí 

Enlaces y mas

En definitiva, esta es una herramienta de las que dices “¿Dónde has estado toda mi vida?”. Se acostumbra uno muy rapido a utilizarla ya que te ahorra muuuuuucho tiempo a la hora de codificar HTML/XML/CSS. Dentro de poco os vereis haciendo "CTRL + ," en cualquier editor de textos  ;-)

¿Qué os parece esta herramienta? ¿La conocíais? ¿Conoceis alguna herramienta similar?

Esperamos vuestros comentarios.

{
}
{
}

Deja tu comentario Codificando XHTML y CSS más rapido con Zen-Coding

Identifícate en OboLog, o crea tu blog gratis si aún no estás registrado.

Avatar de usuario Tu nombre