Escribe códigos más rápido con Emmet

1. Escribir código más rápido con Emmet: Hola a todos. Estoy muy emocionado de estar hablando hoy con ustedes sobre Emmet. Mi nombre es Sandra. Soy Diseñador Digital y trabajo tanto en proyectos impresos como en web. Mi objetivo es compartir con ustedes la mejor práctica que he aprendido en el camino, Emmet es uno de mis mejores consejos a la hora de aprender a codificar. En esta clase, te mostraré cómo usar Emmet para que luego puedas usarlo por ti mismo y convertirte en codificadores mucho más eficientes. Emmet es realmente útil. Tan útil, eso es la mayoría de los editores web modernos te permitirán usarlo? Para esta clase, he usado la plataforma que uso casi a diario, y se llama Code pen. Pero siéntete libre de usar el editor web con el que te sientas más cómodo. Esta clase está dirigida a personas que ya tienen algunos conocimientos básicos sobre HTML y es para personas que quieran aprender más sobre cómo optimizar la codificación. Si esto es para ti, ponte la tetera y empecemos. 2. Qué es Emmet: Entonces empecemos con El principio de Emmet. Por ejemplo, si quisieras crear un párrafo en HTML, lo que harías es crear una etiqueta de apertura para el párrafo y luego una etiqueta de cierre para el párrafo. Entonces esto es lo que vas a estar escribiendo. Entonces habrías creado un párrafo. Con Emmets, puedes hacerlo mucho más sencillo. Lo único que tienes que decirle a Emmet es, quieres un párrafo y luego generará automáticamente la etiqueta de apertura y de cierre con sólo pulsar tab. Entonces probémoslo. Escribo P y luego hago clic en pestaña. Después tenemos la etiqueta de apertura y de cierre para el párrafo. Esto se puede hacer con cualquier etiqueta disponible en HTML. Se puede hacer esto por el lapso, se puede hacer esto con encabezado. Puedes hacer esto con un div, o puedes hacerlo con una mesa o cualquier cosa. Funcionará exactamente igual. Entonces ves que es muy sencillo, pero tiene mucho potencial para ayudarte a acelerar con tu codificación. 3. Siblings: Cuando digo hermanos, esto significa etiquetas que están en el mismo nivel. Se trata de una etiqueta seguida de otra etiqueta seguida de otra. Diga si tiene un encabezado uno H1 seguido de un párrafo, luego seguido de una tabla están todos en el mismo nivel y son hermanos. Diga por ejemplo, si tiene un encabezado H1 y luego quiere un párrafo, hay diferentes formas en que puede hacerlo. Podrías hacer H1 y luego presionas tabulador y has creado tu H1. Después ve al final de la línea, presiona B, y luego presiona tabulador y luego tienes tu encabezado uno y tu párrafo. No había mucho mecanografiando ahí porque tenía que ir al final de mi etiqueta de cierre de H1 para crear mi siguiente etiqueta. Solo necesitas hacer H1 más P y luego presionas tabulador, y luego te creó el H1 seguido de la etiqueta P. Estos son los hermanos. 4. Nesting: Cuando digo anidación, me refiero a un elemento que está encerrado dentro de un elemento. Diga si tiene un párrafo y dentro del párrafo tiene un lapso. Entonces el lapso se anida dentro del párrafo. El párrafo es el padre de ahí que el lapso sea el hijo. Por ejemplo, si tienes un párrafo y dentro del párrafo tienes un lapso. Esto es un anidamiento. Para eso con Emmet utilizas el mayor que signo. Echemos un vistazo. Tienes tu párrafo y luego quieres dentro de un párrafo un lapso. Hacemos p mayor que y luego tipeas span. Presionas “Enter” y ahí lo tienes. Tienes tu lapso que está encerrado dentro de tu párrafo. 5. Agrupación: Ahora sabemos hacer a los hermanos, sabemos hacer la anidación. Entonces intentemos agrupar estos juntos. Si tuviera un encabezamiento y entonces quería que fuera seguido de un párrafo que tenga un lapso dentro de él. Lo que harías es h1, y luego el párrafo es un hermano p. Dentro del párrafo, por lo que haces el mayor que, haces el lapso. Presionas tabulador. Ahora tienes tu rubro con el párrafo. Dentro del párrafo tienes el lapso. Ahora imagina que querías abarcar dentro de la h1, y luego querías el párrafo después de eso, así que lo haces h1 y dentro de la h1, quieres tu span. Quieres tu párrafo como hermano, así lo haces más p. Presionas tabulador. Ahora puedes ver que tu párrafo se ha puesto dentro de tu encabezamiento uno. Esto se debe a la agrupación. Lo que hace ML es que dice el lapso y la p están en el mismo nivel y ambos son hijos del Rumbo uno. Lo que hay que hacer es agrupar. En esta instancia, quiero poner corchetes entre mi h1 y el span y quiero que el h1 y el párrafo estén en el mismo nivel, por lo que son hermanos. Ahora que he puesto mis corchetes presiono tabulador, y ahora se puede ver que mi lapso está dentro de mi encabezamiento uno, y luego va seguido del párrafo. 6. Multiplicación: Echemos un vistazo a la situación en la que queremos crear diez párrafos. Entonces lo que podrías hacer es saber crear hermanos. Entonces creamos pueblos. Diez es bastante y di que si quieres hacer 100, eso sería demasiado. Entonces lo que necesitas usar son los diámetros de la función multiplicadora. Y es igual que en una calculadora, solo necesitas presionar estrella en tu pantalla. Entonces si quisiera 10 párrafos, pondría p y luego la estrella, y luego 10. Presiona Tab, y ahora tengo 10 párrafos que se han creado. Trabaja también con las agrupaciones. Entonces di si tengo un párrafo y luego dentro del párrafo quiero abarcar, y los agrupé y digo si quería tres de esos, solo pongo estrella tres, y luego presiono Tab. Entonces se puede ver que tengo tres veces un párrafo, y dentro de cada uno de estos párrafos, tengo un lapso. Entonces ahora si lo hice sin el agrupamiento e hice la p, y luego con el try span veces tres, lo que haría es crear tres tramos dentro del párrafo. Entonces por eso es importante entender la agrupación al usar un [inaudible]. 7. Challenge 01: Entonces ahora es tiempo de desafío. Descarga el reto número uno. Cómo miramos el marco de alambre que estoy proponiendo e intentamos encontrar una manera rápida de crear este diagrama usando MS Así que tenemos un encabezado, y dentro del encabezado Tienes un div y un nav, dentro del div tienes un span, y dentro de un nav tienes una lista desordenada y dentro de esta lista desordenada, tienes cinco LI's. Entonces tenemos el encabezado, un encabezado insider tienes a todos tus hijos. Yo sólo voy al grupo. Sólo para que sea más fácil. Tienes un div y al mismo nivel, también lo es un hermano. Ya has hecho nav. Ahora dentro del div, tienes el lapso. Por lo que tienes dentro del div, que es un niño se usa el mayor que signo si eso es span. Entonces agruparemos esto juntos y luego dentro del nav, tienes un ul y dentro del ul tienes cinco LI's. Deja agrupar esto también, presiona tab y lo tienes, tienes tu encabezado y dentro tienes tu div y luego el span y luego el nav adentro y luego dentro de nav tienes ul con todos tus cinco LI's. Entonces ahora te voy a dejar entrar en secreto. No tienes que crear un código completo y luego presionar tab para tener todo escrito. Puedes hacerlo paso a paso si te resulta más fácil, y luego es más fácil posiblemente solucionar si hay algún problema en alguna parte. Primero crea un encabezado y luego dentro del encabezado tienes tu div y tu nav. Entonces div y nav. Dentro del div tienes un lapso. Dentro del nav, tienes un ul, y dentro del ul, tienes cinco LI's. Es muy importante entender la agrupación y la anidación, etcétera. Pero no hay que crear una frase larga para luego presionar tab y ver todo y porque si hay algún problema, entonces hay que volver a ella y tratar de averiguar, ya sabes, dónde estaba el tema con la agrupación en alguna parte o en lugar de un hermano sobre ellos de anidar o cosas así. Por lo que es simplemente más rápido hacerlo paso a paso. Es sólo una buena cosa saber. Todas las diferentes funciones que emite pueden mostrarse y luego solo es cuestión de que juegues con él y te sientas cómodo con él y sepas con qué manera prefieres trabajar. 8. Clases e ID: Ahora que entendemos el principio de Emmet y sabemos crear hermanos, anidando, multiplicando. Echemos un vistazo a otras funciones que podrían ser muy útiles cuando estás escribiendo tu código. Entonces una cosa útil a saber es cómo agregar una clase y cómo agregar un ID a una etiqueta. Por lo que es muy sencillo con Emmet, funciona como CSS. Entonces si tienes un párrafo y quieres que este párrafo tenga una clase llamada MyClass. Solo necesitas decir p y luego punto para clase, como en CSS y aclama MyClass, y luego presiono “Tab”. Ahora tengo un párrafo que tiene una clase llamada MyClass. misma manera, si quieres crear un ID, también usas lo mismo que CSS y mediante el uso del hash. Si tienes p y luego tienes hash y MyID, y luego presionas “Tab”. Ahora tienes un párrafo, que consiguió una identificación, MyID. Por lo que ahora puedes combinarlo juntos. Entonces tienes tu párrafo que tiene una clase llamada MyClass, y luego quieres que tenga una identificación. Entonces pones un hash y luego myID, y presionas “Tab”. Entonces tienes un párrafo que tiene una clase y que tiene una identificación. 9. Numerado de objetos: También puedes tener múltiples clases, y para esto solo necesitas agregar el punto y el nombre de la segunda clase, etcétera hasta que tengas todos los nombres de tus clases. Tienes p punto clase uno, clase punto dos, clase de punto tres, y presionas tabulador. Y puedes ver ahora que tienes un párrafo que tiene múltiples clases. También funciona con el multiplicador. Si tienes tres párrafos que tiene una clase llamada “myclass”, solo necesitas hacer p dot myclass, y luego multiplicarlo por tres, y luego presionas tabulador, y luego puedes ver que tienes tres párrafos que tiene un clase llamada “myclass”, lo cual es realmente bueno. Pero, ¿y si quisieras hacer esto con el DNI? Obviamente tendrías p y luego hash myID, y luego veces tres, y presionas tab, y luego tendrías tres párrafos, pero el problema ahí es que todos tienen el mismo ID, y obviamente se supone un ID para ser único, por lo que no puedes tener tres elementos que tengan el mismo ID. Para esto, se necesita la numeración del artículo. Si tienes p, y luego tienes el hash, y luego voy a crear MyID, y luego usé el signo $, y el signo $ es qué? Es la numeración del artículo. Y luego lo multiplico por tres, y cuando presiono tab, ves que tienes p ID, MyID uno, MyID dos, MyID tres. Entonces lo que hiciste fue, dijiste, quiero que todos mis párrafos tengan una identificación que comience con myID tres veces, y contarás de una a tres. El primero será MyID uno, el segundo será MyID dos, y el tercero será MyID tres. Esto es muy útil cuando quieres contenido único para cada vez. 10. Atributos: Ahora sabemos agregar una clase, sabemos agregar un ID, ¿ y si quisiéramos agregar otros atributos a una etiqueta, a un elemento? Esto es muy sencillo con MX. Lo que necesitas usar es el Corchete Cuadrado. Diga por ejemplo, que tiene un párrafo y dentro del párrafo, le gustaría poner un estilo. Entonces haces P, y luego pones los corchetes y haces Estilo, Igual. Y luego abres las comillas. Y luego se puede decir, “Color: azul”, por ejemplo. Y luego vas al final, y presionas Tab. Y ahora tienes tu párrafo que tiene un estilo, un estilo en línea. El color de la fuente será azul. Hay algunos elementos que la imagen dará atributos automáticamente también. Entonces si empezaste con solo una imagen, si presionas Tab, verás que la imagen pondría automáticamente la fuente y la etiqueta alt en los elementos de la imagen. Similar con el anker [inaudible]. Si tienes A y luego presionas Tab, verás que el Href estaría automáticamente ahí. Pero puedes escribir a la fuente de manera recta. Por ejemplo, para la imagen. Entonces si tienes la imagen y entonces usas corchetes para agregar los atributos. Y luego pones fuente igual, luego pones “myimage.jpg”. También puedes agregar múltiples atributos ahí. Solo tienes que presionar Space en el siguiente. Entonces, por ejemplo, podrías poner el Ancho igual a 100. Y luego vas al final y presionas Tab. Y verás que la imagen creará la imagen con la fuente y con el ancho. Pero eso lo verás en la etiqueta alt, porque es importante agregar la etiqueta alt y puedes escribir de forma recta en ella. Mi texto alternativo que describiría la imagen. 11. Challenge 02: Ahora es otro momento de desafío. Te invito a descargar el Desafío Número 2. Echa un vistazo al marco de alambre, intenta averiguar cómo hacerlo usando tu Emmet y luego vuelve a ver cómo lo abordaría. Tienes un DIV que tiene dos clases y una identificación. Dentro del DIV tienes tres imágenes que se llaman imagen uno, imagen dos, e imagen tres, y tienen atributos de ancho y alto. Entonces, empecemos por crear tu DIV. Tienes tu DIV y tiene dos clases, punto clase uno, así que punto clase dos. Tiene un DNI llamado mi DNI. Si presiono tab, he creado mi DIV. Algo que es interesante notar es que si creas una clase vacía, Emmet va a asumir que es un DIV. Si pongo punto clase uno, punto clase dos y luego hash, mi ID y presiono tab, automáticamente creará un DIV. Entonces eso es algo lindo de saber. Ahora tenemos tres imágenes. Tenemos la etiqueta de imagen y luego, tenemos atributos dentro de ella. He puesto los corchetes y luego tengo a fuente. Y se llama imagen 123 JPEG. Voy a estar usando un multiplicador. El número de artículos sería el $ sign dot JPEG. Entonces, tiene un ancho que es 100 y una altura que es 100. Yo quiero tres de ellos. Yo sí multiplico por tres y presiono tabulador. Ahora, tengo mis tres imágenes a las que llamaré image1.jpeg, dos, tres puntos JPEG. 12. Numerado de texto: Ahora vamos a aprender a agregar texto cuando creas código usando emmet. Digamos que quieres crear un enlace que solo diga 'Click me'. Lo que hay que hacer con emmet es usar los corchetes rizados. Tienes tu ancla, escribes a, y luego tienes tu HREF que puedes usar con los atributos, que son los corchetes. Tenemos HREF igual, solo lo voy a poner vacío por el momento. Quieres algunos textos, así que tendrías los corchetes rizados, y luego puedes ingresar el texto que quieras ahí dentro, 'Clic me' Presiono tabulador. Ahora tienes tu ancla que tiene un enlace a ella y tiene un texto dentro, 'Click me'. El texto también funciona con multiplicadores. Por ejemplo, si tenías lista desordenada, tu UL, y luego dentro de la lista, tienes cinco elementos de lista. Será LI veces cinco y luego cada uno de esos ítems, quieres que tengan un texto al mismo. Simplemente pondré en el elemento de lista. Voy al final y presiono tab. Intentemos eso otra vez. El tema es que pongo plus por lo que el plus significa que sus hermanos, lo que significa que la UL y LI son del mismo nivel, pero realmente quiero que la etiqueta LI esté dentro de la UL. Lo que queremos es lo siguiente. En lugar del plus, tenemos el mayor que signo. Vamos a intentarlo de nuevo. Presionar tabulador. Ahora tienes tu lista, y dentro de la lista, cada ítem de lista tiene el ítem de lista de texto. Ahora si querías que el texto fuera diferente y tener lista ítem uno, lista ítem dos, lista ítem tres, es muy sencillo. Ya hemos aprendido a hacerlo antes. Es con la numeración del artículo. Volvamos a ello. Tienes elemento de lista, y luego podemos poner el signo $ al final y luego cuando presionas tabulador, puedes ver que tienes lista ítem uno, lista ítem dos, tres, cuatro y cinco. 13. Lorem Ipsum: Entonces ahora ¿y si quisieras generar texto aleatorio? El famoso Lorem Ipsum. Emmet tiene esta función donde en realidad se puede usar esto. Si tienes tu párrafo y luego dentro del párrafo quieres tu texto Lorem. Presionas “Tab” y luego tienes tu párrafo, y generaste un pequeño párrafo con algún texto aleatorio en él. Ahora puedes controlar también el número de palabras que puedes poner. Entonces, di si tienes el encabezamiento y solo quieres unas palabras en él. Todo lo que necesitas hacer es “H1", y luego quieres tu “Lorem”. Y quieres tres palabras. Entonces, haces “Lorem3", presionas “Tab”, y ahora tienes tu H1 que tiene tres palabras usando el generador de texto aleatorio Lorem Ipsum. 14. Challenge 03: Este es el reto final. Descarga el Desafío número 3, echa un vistazo a la forma en que encuadras. Intenta usar Emmet para crear esto para tu marco lo más rápido posible y luego regresa y te mostraré cómo abordaría este reto. En este último reto, tienes un encabezado que tiene una clase. Dentro del encabezado tienes un div. Dentro de un div obtienes una imagen, y luego al mismo nivel que el div, tienes un nav y dentro de eso tienes una URL que tiene cinco elementos de lista, LI que tienen ideas diferentes y diferentes cinco palabras dentro de ella. Empecemos con el contenedor principal que es tu encabezado, luego clase uno, y presionas tabulador y tienes esto. Ahora voy a crear mi div en el que tienes una imagen que tiene una fuente. Eso se llama imagen uno el jpeg, y consiguió una pila vieja que se llama mi imagen. Ahora tienes un div con la imagen dentro, y luego tienes tu nav. Y dentro del nav tienes tu lista desordenada. Y luego tienes tus artículos de lista por cinco. Quieres que cada uno de esos LI's tenga un id, así que pones hash y luego lo llamas id-1, id-2, etc Sería id y luego el signo de dólar, y luego quieres dentro de cada uno de esos LI's tener un texto lorem que es de cinco palabra larga. Ahora presionas tabulador y ahora tienes tu navegación con tus listas dentro ahí. Eso tiene diferentes identificaciones uno, dos, tres, cuatro y luego tiene cinco estaba dentro de cada uno de esos ítems de la lista. 15. ¡Gracias!: Gracias por unirte hoy a esta clase. Espero que lo hayan disfrutado. De verdad te animo a que vayas al sitio web de documentación de Emmet para saber más una vez que te familiarices más con este proceso. Si tienes alguna pregunta o si tienes algún comentario, por favor siéntete libre de contactarme para avisarme y verte pronto.