Hola alumnos de Espai y seguidores del blog,<\/p>\n
Muchos de vosotros me hab\u00e9is preguntado sobre c\u00f3mo hacer abreviaturas en Sublime Text para generar un c\u00f3digo de una forma \u00e1gil y r\u00e1pida. Para eso necesitamos una herramienta de sublime llamada Emmet basada en la sintaxis del CSS, \u00e9sta interpreta el c\u00f3digo a\u00f1adido y lo sustituye por \u00a0html o \u00a0CSS si se da el caso.<\/p>\n
Vamos a ver unos ejemplos de abreviaturas en html y su resultado.<\/p>\n
! -> Nos genera el Doctype de html5<\/p>\n
<!DOCTYPE html><\/p>\n
<html lang=\u00bben\u00bb><\/p>\n
<head><\/p>\n
<meta charset=\u00bbUTF-8″><\/p>\n
<title>Document<\/title><\/p>\n
<\/head><\/p>\n
<body><\/p>\n
<\/body><\/p>\n
<\/html><\/p>\n
<\/p>\n
+ -> Nos genera un hermano<\/p>\n
C\u00f3digo:<\/p>\n
h1+p<\/p>\n
Resultado:<\/p>\n
<h1><\/h1><\/p>\n
<p><\/p><\/p>\n
<\/p>\n
> -> Nos genera un hijo<\/p>\n
C\u00f3digo:<\/p>\n
h1>a<\/p>\n
Resultado:<\/p>\n
<h1><a href=\u00bb\u00bb><\/a><\/h1><\/p>\n
<\/p>\n
^ -> Desciende un nivel<\/p>\n
C\u00f3digo:<\/p>\n
h1>a^p<\/p>\n
Explicaci\u00f3n: generamos el nivel \u201ch1\u201d e introducimos un nivel \u201ca\u201d volvemos al nivel del \u201ch1\u201d (descendemos) y a\u00f1adimos una \u201cp\u201d<\/i><\/p>\n
Resultado:<\/p>\n
<h1><a href=\u00bb\u00bb><\/a><\/h1><\/p>\n
<p><\/p><\/p>\n
<\/p>\n
*n -> Nos genera una cantidad de un elemento n<\/i> veces<\/i><\/p>\n
C\u00f3digo:<\/p>\n
div*3<\/p>\n
Resultado:<\/p>\n
<div><\/div><\/p>\n
<div><\/div><\/p>\n
<div><\/div><\/p>\n
<\/p>\n
() -> agrupaciones<\/p>\n
C\u00f3digo:<\/p>\n
(h1>a)+ul>li*3<\/p>\n
Resultado:<\/p>\n
<h1><a href=\u00bb\u00bb><\/a><\/h1><\/p>\n
<ul><\/p>\n
<li><\/li><\/p>\n
<li><\/li><\/p>\n
<li><\/li><\/p>\n
<\/ul><\/p>\n
<\/p>\n
# -> genera el atributo id en una etiqueta<\/p>\n
C\u00f3digo:<\/p>\n
div#wrapper<\/p>\n
Resultado:<\/p>\n
<div id=\u00bbwrapper\u00bb><\/div><\/p>\n
<\/p>\n
. -> genera el atributo class en una etiqueta<\/p>\n
C\u00f3digo:<\/p>\n
div.menu<\/p>\n
Resultado:<\/p>\n
<div class=\u00bbmenu\u00bb><\/div><\/p>\n
<\/p>\n
[x] -> genera el atributo x en una etiqueta m\u00e1s los atributos propios del elemento<\/p>\n
C\u00f3digo:<\/p>\n
img[title]<\/p>\n
Resultado:<\/p>\n
<img src=\u00bb\u00bb alt=\u00bb\u00bb title=\u00bb\u00bb><\/p>\n
<\/p>\n
$ -> numerar atributos de un elemento m\u00faltiples veces<\/p>\n
C\u00f3digo:<\/p>\n
ul>li.menu$*5<\/p>\n
Resultado:<\/p>\n
<ul><\/p>\n
<li class=\u00bbmenu1″><\/li><\/p>\n
<li class=\u00bbmenu2″><\/li><\/p>\n
<li class=\u00bbmenu3″><\/li><\/p>\n
<li class=\u00bbmenu4″><\/li><\/p>\n
<li class=\u00bbmenu5″><\/li><\/p>\n
<\/ul><\/p>\n
Si queremos que empiece por 001<\/p>\n
C\u00f3digo:<\/p>\n
ul>li.menu$$$*5<\/p>\n
Resultado:<\/p>\n
<ul><\/p>\n
<li class=\u00bbmenu001″><\/li><\/p>\n
<li class=\u00bbmenu002″><\/li><\/p>\n
<li class=\u00bbmenu003″><\/li><\/p>\n
<li class=\u00bbmenu004″><\/li><\/p>\n
<li class=\u00bbmenu005″><\/li><\/p>\n
<\/ul><\/p>\n
Explicaci\u00f3n: tantos $ como caracteres queremos al empezar.<\/i><\/p>\n
<\/p>\n
@ -> modifica el orden de la herramienta $<\/p>\n
C\u00f3digo:<\/p>\n
ul>li.menu$@-*5<\/p>\n
Resultado:<\/p>\n
<ul><\/p>\n
<li class=\u00bbmenu5″><\/li><\/p>\n
<li class=\u00bbmenu4″><\/li><\/p>\n
<li class=\u00bbmenu3″><\/li><\/p>\n
<li class=\u00bbmenu2″><\/li><\/p>\n
<li class=\u00bbmenu1″><\/li><\/p>\n
<\/ul><\/p>\n
\u00a0<\/i><\/p>\n
{} -> generar texto<\/p>\n
C\u00f3digo:<\/p>\n
a{inicio}<\/p>\n
Resultado:<\/p>\n
<a href=\u00bb\u00bb>inicio<\/a><\/p>\n
Otro ejemplo de a con un span en su interior<\/p>\n
C\u00f3digo:<\/p>\n
a>{inicio}+span{pagina}<\/p>\n
Resultado:<\/p>\n
<a href=\u00bb\u00bb>inicio<span>pagina<\/span><\/a><\/p>\n
<\/p>\n
loremn<\/i> -> generar texto simulado lorem ipsum<\/i> de n palabras<\/p>\n
C\u00f3digo:<\/p>\n
Lorem5<\/p>\n
Resultado:<\/p>\n
Lorem ipsum dolor sit amet.<\/p>\n
<\/p>\n
Entendidos estos conceptos podemos generar pr\u00e1cticamente toda una p\u00e1gina en una sola l\u00ednea, probad este c\u00f3digo en Sublime en un archivo html.<\/p>\n
header[role=\u00bbbanner\u00bb]>h1>a>lorem3^^nav[role=\u00bbnavigation\u00bb]>ul>li.menu$*5>a>{menu $}^^^^^main[role=\u00bbmain\u00bb]>h2>lorem9^p*3>lorem15^^footer[role=\u00bbcontentinfo\u00bb]>p{© Espai SL}<\/p>\n