lunes, 25 de febrero de 2013

Como instalar Emmet en Sublime Text 2

Hoy nos vamos a centrar en como instalar el plugin Emmet en el editor multilenguaje Sublime Text 2. Para crear páginas web, hojas de estilos CSS, trabajar con Sublime Text 2 resulta muy interesante. Como indica Roxana Falasco, "es un editor ligero, rápido y fácilmente configurable".
Para trabajar mejor con él se puede instalar un gestor de paquetes denominado Package Control. Nos permitirá instalar distintos paquetes entre los que se encuentra Emmet que sustituye a otro plugin exitoso, Zen Coding. Presenta un autocompletado muy interesante. Basta escribir una etiqueta y pulsar la tecla TAB para que se complete la entrada de la etiqueta. En aprendiendoando tenemos la posibilidad de ver un video en castellano que nos va a ayudar a generar código con más facilidad gracias a emmet. Voy a deciros ahora los pasos para instalar emmet, tal como he hecho en mi ordenador.

Pasos


1º Vamos a la página wbond para descargar el paquete:

2º Pulsamos en installation.
3º Copiamos el todo el código que tiene fondo gris:

4º Vamos a Sublime Text 2. Pulsamos en el menú View (Vista) donde seleccionamos Mostrar consola (Show console):


Ahora, en la fila de la parte inferior de la pantalla lo pegamos con CTRL + V.



Hacemos clic.
5º Sublime nos pide que reiniciemos el programa. Lo cerramos y lo volvemos a abrir.
6º Presionamos las teclas Ctrl + Shift + P
7º Aparece una ventana flotante donde escribiremos install. Conforme vamos escribiendo sublime va autocomplentando de acuerdo a lo que tecleamos. Cuando aparezca Package Control ya podemos hacer clic sobre el mismo.

8º Ahora tenemos otra ventana donde escribimos el plugin que queremos instalar, Emmet, lo escribimos y hacemos clic sobre el primero que aparezca (veremos dos, pinchamos en el primero).

En esta imagen solo hay uno, pues lo instalé antes. Ya lo tenemos instalado.  A partir de ahora podemos utilizar todas las posibilidades del plugin.

Algunas características que ofrece emmet

a) Por ejemplo, para crear rápidamente la estructura de una página Web escribimos html:5 y pulsamos la tecla TAB. El resultado es el que sigue:


Tenemos la estructura más sencilla para empezar en la elaboración de la página. Esto ha sido posible gracias a que acabamos de instalar el plugin. Tiene muchas más características que es interesante conocer. Podremos generar código con más rapidez sin equivocarnos.

b) Si colocamos las etiquetas de la siguiente forma:

ul>li
y pulsamos en la tecla tabulador el resultado será:


Nos genera la apertura y cierre de ambas etiquetas, además como hemos colocado un símbolo > hace que la etiqueta li esté dentro de ul.

c) Escribir en varios lugares a la vez:
En primer lugar hacemos que la etiqueta li aparezca 5 veces:



Damos a tab y tenemos:


Ahora ya podemos hacer lo que queremos. Hacemos clic dentro de la primera etiqueta li, y ahora con la tecla control pulsada hacemos clic en el resto de etiquetas li. El cursor parpadea en las 5 etiquetas. Empezamos a escribir la palabra elemento y se irá escribiendo en todas al mismo tiempo tal como se aprecia  en la figura.


d) También podemos teclear un par de etiquetas de la siguiente forma:

ol+div

Provocará la siguiente respuesta:



Concatenamos dos etiquetas con el signo +. Ahora ya nos podemos centrar en el contenido de cada una de ellas para escribir lo que le hace falta a cada una de ellas.
Resumiendo, es altamente recomendable hacer uso del plugin. La generación de código es más limpia, rápida y ayuda a evitar errores de escritura, no tenemos necesidad de teclear la apertura y cierre de las etiquetas. Si te gusta y quieres aprender más, puedes ir a la página de Iván Prego que te permitirá profundizar en un mayor conocimiento.
Un saludo a todos!!

1 comentario:

  1. HOLA, SOMOS ALUMNOS DE LAURO IKASTOLA Y TENEMOS UN BLoG SI QUEREIS VISITARLO. SE LLAMA:
    odiseaa-1.blogspot.com

    ResponderEliminar