- Desde
- 24 May 2014
- Mensajes
- 45
Este es mi primer tutorial, así que espero poder explicarme bien para que todo se entienda de la manera más clara posible.
Hoy os traigo un pequeño tutorial de iniciación a una herramienta que nos va a permitir construir de una manera rápida estructuras HTML, EMMET.
¿Qué es EMMET?
EMMET es una herramienta en forma de plugin que nos permite generar estructuras HTML a partir de abreviaciones. Es decir, con una sola palabra o línea de código, podremos generar un documento HTML en poco tiempo, reduciendo así el tiempo de construcción de nuestras aplicaciones, siendo este el principal objetivo perseguido.
Pongámonos manos a la obra!
- Preparación del entorno
En el tutorial vamos a utilizar el editor Sublime Text 3, aunque EMMET es compatible con la gran mayoría de editores que existen en la actualidad. Aquí podéis ver una lista: Download
Si alguien ya está usando la versión 2 de Sublime, que no se preocupe porque los pasos son los mismos
Vamos a instalar dos plugins para la ocasión. Uno que nos permita trabajar con HTML5 y el otro el propio plugin de EMMET.- Nos descargamos e instalamos Sublime Text 3: Sublime Text - Download
- Ejecutamos Sublime Text. Para poder instalar EMMET, necesitamos tener acceso al control de paquetes de Sublime, que no viene por defecto. Para habilitarlo, abrimos la consola de Sublime (View -> Show Console) y pegamos lo siguiente:
Para aquellos que vayan a usar la versión 2 de Sublime, la sentencia a ejecutar varia un poco. Es la siguiente:Insertar CODE, HTML o PHP:import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)
Insertar CODE, HTML o PHP:import urllib2,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; 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()) ); by = urllib2.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')
IMPORTANTE: Aseguraros de que copiáis la sentencia sin espacios al principio y al final para evitar algún tipo de error.
Una vez ejecutado, podemos ocultar la consola ya que no la vamos a utlizar más (View -> Hide Console).
- Para instalar los plugins, vamos a Preference -> Package Control (antes no aparecía esta opción) y nos aparecerá un lista de opciones. Seleccionamos la opción Install Package.
.
- Nos aparece una nueva lista con todos los plugins que tenemos disponibles en el repositorio de Sublime. Vamos a introducir en el buscador la palabra HTML5, y pulsamos en la primera opción que nos sale. La instalación tarda pocos segundos. Podéis ver el progreso en la parte inferior del editor.
.
- Repetimos los pasos del punto anterior pero esta vez introducimos en el buscador la palabra EMMET y seleccionamos la primera opción.
.
- Listo!! Ya tenemos todo preparado. Ahora debemos reiniciar Sublime Text para que el editor pille los cambios.
- Antes de empezar
Lo primero que vamos a hacer es crearnos un nuevo documento. Para ello, sólo tendremos que pulsar Ctrl+N (o File -> New File) y nos aparecerá una nueva pestaña.
Para que EMMET nos proporcione todo su potencial, tenemos que indicar que el documento en el que vamos a trabajar es de tipo HTML. Para ello, pulsamos Ctrl+Shift+P y nos aparecerá un listado con todas las opciones de Sublime. Escribimos HTML en el buscador y seleccionaremos cualquiera de las opciones de sintaxis HTML. En mi caso usaré HTML5.
.
- EMMET in action!
Vamos a crearnos una estructura básica HTML5. Para ello en nuestro documento escribimos 'html5' y le damos al tabulador. Automáticamente se nos genera una estructura sencilla. Fácil y rápido. A que mola!!!
Vamos a añadirle estructura al cuerpo. Le vamos a indicar a EMMET que queremos una cabecera, además de una sección con el identificado 'contenido' y un footer que contenga un párrafo con el texto '2014. Todos los derechos reservamos'. Algo sencillo, verdad? Bien, pues nos situamos dentro del body. Y escribimos lo siguiente:
Le damos al tabulador y obtendremos algo como esto:Insertar CODE, HTML o PHP:header+section#conenido+footer>p{2014.todos los derechos reservados}
Analicemos un poco la sentencia diseccionándola por partes:- header+section+footer: Utilizando el operador '+' indicamos que queremos tres elementos seguidos uno del otro. Es decir, que serán hermanos y a su vez hijos del body.
- section#contenido: Con '#' indicamos que el elemento que la precede, tendrá como id el texto que la sigue.
- footer>p: con el símbolo '>' indicamos que el elemento que le sigue va a ser hijo del elemento que precede al símbolo.
- p{2014.todos los derechos reservados}: Con esto indicamos que el elemento al que le sigue unas llaves con un texto, contendrá dicho texto.
Sigamos. Vamos a crearnos un menú dentro del header que contenga 4 opciones con hipervínculo. Para ello, nos situamos dentro del header e introducimos lo siguiente y le damos nuevamente al tabulador:
Obtendremos como resultado lo siguiente:Insertar CODE, HTML o PHP:div.menu>ul>li*4>a[href='#']{Opcion$}
Vamos a analizar los nuevos protagonistas que aparecen en esta sentencia:- div.menu: con el punto estamos indicando que al elemento que le precede se le va a aplicar la clase CSS que le sigue al punto, en este caso, menu.
- li*4: El operador '*' va a multiplicar por el número indicado, las veces que queramos que aparezca el elemento. En este caso le estamos indicando que queremos imprimir 4 opciones de la lista.
- a[href='#']: Con los corchetes establecemos valores a las atributos del elementos. En este caso, estamos estableciendo el valor predeterminado que va a tener el atributo href del elemento 'a'. Podemos indicar dentro de los corchetes todos los atributos que sean necesarios, separados por un espacio. Por ejemplo:
Obtendremos como resultado:Insertar CODE, HTML o PHP:a[href='#' title='titulo']
Insertar CODE, HTML o PHP:<a href="#" title="titulo"></a> - {Opcion$}: El símbolo del dólar es un contador que se irá incrementado según el número de veces que hayamos indicado que se repita un elemento. Como en este caso hemos indicado que queremos 4 opciones en la lista, el contador comenzará desde 1, y se irá incrementado hasta tener el total de elementos deseados.
Esta misma sentencia podríamos realizarla mediante agrupación. Por ejemplo, vamos a ejecutar lo siguiente:
Como veis, el resultado es el mismo.Insertar CODE, HTML o PHP:div.menu>ul>(li>a[href='#']{Opcion$})*4
La diferencia con la sentencia anterior es que mediante los paréntesis agrupamos un conjunto de abreviaciones que se van a repetir las veces que queramos, en este caso 4.
También podremos rellenar el contenido de los elementos con el típico 'Lorem Ipsum' para que nuestras estructuras vayan cogiendo forma.
Vamos a hacer una pequeña prueba. No situamos dentro del elemento 'section' e introducimos lo siguiente:
Obtendremos como resultado lo siguiente:Insertar CODE, HTML o PHP:p*5>lorem20
.
En esta sentencia estamos indicando que queremos generar 5 párrafos, y que los rellene con el típico texto 'lorem ipsum'. El valor 20 indica que queremos dibujar 20 palabras por cada párrafo.
Como broche final, vamos a crear una estructura simple con una sola línea:
Obtendremos como resultado:Insertar CODE, HTML o PHP:html>(head>title{Mi página con Emmet})+body>(header>(div.menu>ul>li*4>a[href='#']{Opcion$}))+(section#conenido>(p*5>lorem20))+(footer>p{2014.todos los derechos reservados})
Y con esto, termino este tutorial de introducción a EMMET. EMMET nos proporciona muchas más abreviaciones que nos facilitan la construcción de estructuras HTML, pero eso os lo dejo a vosotros para que practiquéis e investiguéis qué más os puede ofrecer EMMET. Además, también nos proporciona funcionalidades para CSS.
Como repaso a los puntos importantes para que todo funcione correctamente:- Package Control: Aseguraros que para instalar el control de paquetes no introducís espacios en la consola a la hora de pegar la sentencia.
- Aseguraros de que habéis instalado los dos plugins, el de HTML5 y el de EMMET.
- Aseguraros de que una vez instalador los plugins, habéis reiniciado Sublime Text para que coja los cambios.
- Aseguraros de que cuando creéis un nuevo documento, le indicáis que es de tipo HTML (o HTML5).
Bueno, y con esto me despido.
Este ha sido mi primer tutorial así que espero haberlo explicado con la mayor claridad posible, aunque si tenéis cualquier duda, podéis dejarla indicada aquí.
Saludos!!
- Enlace a EMMET: Emmet — the essential toolkit for web-developers
- Cheat Sheet : Cheat Sheet
- Sentencias para instalar el Package Control de Sublime: https://sublime.wbond.net/installation#st3
