Este sitio utiliza cookies propias y de terceros. Si continúa navegando consideramos que acepta el uso de cookies. OK Más Información.

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

  • 1 Respuestas
  • 2624 Vistas

0 Usuarios y 1 Visitante están viendo este tema.

Desconectado francoalejandrog

  • *
  • Underc0der
  • Mensajes: 1
  • Actividad:
    0%
  • Reputación 0
    • Ver Perfil
    • Email
« en: Diciembre 23, 2012, 02:22:58 am »
¿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 página oficial

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:

Código: [Seleccionar]
ul.ninjacode>li*5>a[]>{HTML5FACIL}

Representa todo este código:
Código: [Seleccionar]
<ul class="ninjacode">
<li><a href="">HTML5FACIL</a></li>
<li><a href="">HTML5FACIL</a></li>
<li><a href="">HTML5FACIL</a></li>
<li><a href="">HTML5FACIL</a></li>
<li><a href="">HTML5FACIL</a></li>
</ul>


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:

Código: [Seleccionar]
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'
Ahora solamente queda reiniciar el editor de texto, cerramos y volvemos a abrirlo. También puedes acceder a wbond.net 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

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.

Código: [Seleccionar]
<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:

Código: [Seleccionar]
<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í:

Código: [Seleccionar]
<a href="http://" title="Titulo del enlace"></a>
Hay muchos atributos que debes aprender, para ello visita el sitio oficial 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 Medgarin 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 @medgarin, é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 github.com/medgarin/NinjaCodeTv

Desconectado ANTRAX

  • *
  • Administrator
  • Mensajes: 5499
  • Actividad:
    16.67%
  • Reputación 36
  • ANTRAX
    • Ver Perfil
    • Underc0de
    • Email
  • Skype: underc0de.org
  • Twitter: @Underc0de
« Respuesta #1 en: Diciembre 23, 2012, 04:05:05 am »
Excelente aporte!
Muchas gracias!


 

¿Te gustó el post? COMPARTILO!



Ubuntu Builder 2.0.1, o como crear tu propia distro basada en Ubuntu

Iniciado por Stiuvert

Respuestas: 5
Vistas: 5058
Último mensaje Mayo 26, 2012, 07:13:48 am
por dilux
Tutorial: Como instalar Linux "Ubuntu" junto a Windows

Iniciado por Stiuvert

Respuestas: 1
Vistas: 3385
Último mensaje Agosto 24, 2011, 02:25:17 pm
por Comandante Linux
(Partición) Como desinstalar Ubuntu (Back-Track) y dejar solo ah Windows

Iniciado por REC

Respuestas: 2
Vistas: 4101
Último mensaje Octubre 05, 2012, 12:20:00 pm
por Sheyk871
Como deshabilitar la tarjeta nvidia en laptops de graficos hibridos en linux

Iniciado por S t Ø r M d ∆ r k

Respuestas: 2
Vistas: 3454
Último mensaje Mayo 18, 2013, 11:59:35 am
por D4rkC0d3r
Como usar la tecla de Windows para abrir el menu de Gnome

Iniciado por kity54

Respuestas: 1
Vistas: 3154
Último mensaje Noviembre 18, 2011, 03:01:37 am
por lordorlando