/*
[Link]
Modelo de Caja: Es la forma en que CSS ve a los elementos HTML y ¿cómo los ve? como si
fueran cajas con las siguientes propiedades:
1. El contenido (content): El contenido (texto) del elemento HTML, tomando en cuanta sus
dimensiones (width & height)
2. El borde (border): Lo que delimita cada uno de los elementos HTML
3. El relleno (padding): Son las distancias internas (La distancia del borde al contenido)
3. El márgen (margin): Son las distancias externas (La distancia entre el elemento html y sus
elementos hermaynos o padres)
Dentro del modelo de caja hay que considerar que una caja tendrá 4 lados:
1. Arriba (top)
2. Derecha (right)
3. Abajo (bottom)
4. Izquierda (left)
*/
/*
Esto aplica para margin y padding
1 valor = aplicar a los 4 lados
2 valores =
primer valor es para los lados verticales (t/b)
segundo valor es para los lados horizontales (l/r)
3 valores =
primer valor es para top
segundo valor es para los lados horizontales (l/r)
tercer valor es para bottom
4 valores = Piensa en las manecillas del reloj
primer valor es para top (12)
segundo valor es para right (3)
tercer valor es para bottom (6)
cuarto valor es para left (9)
*/
/*
Caja de Línea
- Ocupan el espacio necesario para mostrar su contenido.
- No tienen dimensiones modificables (alto, ancho).
- Permiten otros elementos a su lado.
- Padding y margin solo empujan a elementos adyacentes en horizontal, NUNCA EN VERTICAL.
Caja de Bloque
- Ocupan todo el ancho disponible, lo que genera saltos de línea.
- Tienen dimensiones modificables (alto, ancho).
- No permiten otros elementos a su lado (aunque especifique un ancho, siguen ocupando todo el
espacio disponible a lo ancho, generando saltos de línea).
*/
/*
Propiedad Display
inline
block
inline-block - Se comporta como un elemento de línea pero acepta modificar sus dimensiones
(alto y ancho)
none
table
list-item
flex - ve mi curso de Flexbox CSS
grid - ve mi curso de Grid CSS
*/
/*
[Link]
apply a natural box layout model to all elements, but allowing components to change
*/
/* Colapso de Márgenes Verticales */
/* Centrado de Cajas */
/*
Comentario en CSS
Regla CSS consta de 2 partes
1) el selector
2) bloque de declaraciones: {
atributo: valor;
atributo-de-mas-dos-palabras: otro-valor;
}
*/
/* Son mala práctica por que son bloqueantes a la hora de que el navegador lee esta instrucción */
@import url("[Link]");
/*
Links de referencia y documentación
[Link]
[Link]
[Link]
[Link]
[Link]
[Link]
[Link]
[Link]
*/
/*
Selectores Básicos
1) Etiquetas - son elementos html
2) Identificadores - atributo id - #
3) Clases - atributo class - .
*/
/* Dar estilos con Id se considera un AntiPatrón */
/* Dar estilos con clases nos permite reutilizar nuestro código CSS */
/* Los selectores de hermanos van a aplicar a los elementos que son hermanos y que estén por
debajo del elemento de referencia */
.hermanos-general ~ li {
background-color: thistle;
}
.hijos-directos > li {
background-color: thistle;
}
.hijos-descendientes b {
background-color: thistle;
}
/* Selectores de atributos */
.selectores-atributos a[href] {
color: orangered;
}
.hermanos-adyacentes + li {
background-color: thistle;
}
.selectores-atributos a[target="_blank"] {
font-weight: bold;
}
/* El comodín del * aplica el estilo si contiene el texto en cuestión en cualquier parte */
.selectores-atributos a[href*="jonmircha"] {
font-size: 24px;
}
/* El comodín del ^ aplica el estilo si contiene el texto en cuestión al inicio */
.selectores-atributos a[href^="[Link]
{
text-decoration: none;
}
/* El comodín del $ aplica el estilo si contiene el texto en cuestión al final */
.selectores-atributos a[href$=".com"] {
background-color: black;
}
/* El comodín del ~ aplica el estilo si contiene el texto en cuestión en una lista separada por
espacios */
.selectores-atributos a[class~="cursos"] {
background-color: midnightblue;
}
/* El comodín del | aplica el estilo si contiene el texto en cuestión en una lista separada por
espacios y que despues del texto en cuestión venga un guión medio - */
.selectores-atributos a[class|="menu"] {
font-style: italic;
}
/* Selector Universal */
*{
font-family: sans-serif;
}
.selector-universal * {
font-size: 24px;
}
/*
Pseudoclases - Dan estilos dependiendo del contexto, posición o estado del elemento
[Link]
*/
.form-pseudoclases *:required {
border-color: yellow;
}
.form-pseudoclases *:valid {
border-color: green;
}
.form-pseudoclases *:invalid {
border-color: red;
}
.form-pseudoclases *:focus {
background-color: skyblue;
}
.form-pseudoclases *:disabled {
background-color: pink;
}
.menu-pseudoclases a:visited {
color: olive;
}
.menu-pseudoclases a:hover {
color: orange;
}
.p-pseudoclases:hover {
font-size: 20px;
}
#temario-css:target {
background-color: lightgreen;
}
.lista-pseudoclases li:first-child {
color: green;
}
.lista-pseudoclases li:last-child {
color: violet;
}
.lista-pseudoclases li:nth-child(3) {
color: navy;
}
.lista-pseudoclases li:nth-child(4n) {
font-size: 20px;
}
.lista-pseudoclases li:nth-child(3n + 1) {
font-weight: bold;
}
.lista-pseudoclases li:nth-child(even) {
background-color: yellow;
}
.lista-pseudoclases li:nth-child(odd) {
background-color: orange;
}
.articulo-pseudoclases p:first-of-type {
background-color: pink;
}
.articulo-pseudoclases p:last-of-type {
background-color: violet;
}
.articulo-pseudoclases p:nth-of-type(3) {
background-color: fuchsia;
}
.articulo-pseudoclases *:not(p) {
background-color: beige;
}
/*
Pseudoelementos - Dan estilos a partes específicas de un elemento, se usa el :: para diferenciarlos
de las pseudoclases
[Link]
*/
.saga-geminis::before {
content: "🤼♂️";
}
.saga-geminis::after {
content: "♊";
}
.saga-precio::before {
content: "$";
font-weight: bold;
}
.saga-precio::after {
content: "USD";
font-weight: bold;
}
.p-pseudoelementos::first-letter {
font-weight: bold;
font-size: 32px;
}
.p-pseudoelementos::first-line {
color: coral;
}
.p-pseudoelementos::selection {
color: greenyellow;
background-color: black;
}
.input-pseudoelementos::placeholder {
color: green;
}
/* Agrupar Selectores */
.form-agrupar-selectores input[type="text"],
.form-agrupar-selectores input[type="email"],
.form-agrupar-selectores textarea {
border-color: yellow;
border-width: 2px;
border-style: dashed;
background-color: black;
font-size: 20px;
display: block;
width: 300px;
}
/*
El Algoritmo de CSS: Es la forma en que el navegador aplica los estilos al documento HTML. Es
vital entender este concepto para que entiendas como se aplican y en algunas ocasiones se
sobreescriben las reglas CSS.
1) La Cascada.
2) La Especificidad.
3) La Herencia.
La Cascada es el mecanismo en que el navegador aplica los estilos. Y toma en cuenta lo siguiente
en este orden:
1) El Origen del Código:
- El User Agent (los estilos por defecto del navegador)
- Personalizaciones del usuario.
- Los estilos del autor.
2) La Especificidad del Selector
3) Orden de Aparición
La Especificidad es el peso que tiene un selector cuando hay conflicto de estilos. Se calcula de la
siguiente forma:
Etiquetas y pseudoelementos -------------- 0,0,0,1
Clases, atributos y pseudoclases ------------0,0,1,0
Identificadores -------------------------------0,1,0,0
Estilos en línea--------------------------------1,0,0,0
!important ------------------Rompe la especificidad
La Herencia, es la capacidad de un selector de obtener (heredar) los valores de sus ancestros más
cercanos, para aplicarla se usa el valor inherit, si queremos evitarla podemos asignar otro valor o
inicializar la propiedad en cuestión con el valor initial
[Link]
*/
/* El comodín del * aplica el estilo si contiene el texto en cuestión en cualquier parte */
.selectores-atributos a[href*="jonmircha"] {
font-size: 24px;
}
/* El comodín del ^ aplica el estilo si contiene el texto en cuestión al inicio */
.selectores-atributos a[href^="[Link]
{
text-decoration: none;
}
/* El comodín del $ aplica el estilo si contiene el texto en cuestión al final */
.selectores-atributos a[href$=".com"] {
background-color: black;
}
/* El comodín del ~ aplica el estilo si contiene el texto en cuestión en una lista separada por
espacios */
.selectores-atributos a[class~="cursos"] {
background-color: midnightblue;
}
/* El comodín del | aplica el estilo si contiene el texto en cuestión en una lista separada por
espacios y que despues del texto en cuestión venga un guión medio - */
.selectores-atributos a[class|="menu"] {
font-style: italic;
}
/* Selector Universal */
*{
font-family: sans-serif;
}
.selector-universal * {
font-size: 24px;
}
/*
Pseudoclases - Dan estilos dependiendo del contexto, posición o estado del elemento
[Link]
*/
.form-pseudoclases *:required {
border-color: yellow;
}
.form-pseudoclases *:valid {
border-color: green;
}
.form-pseudoclases *:invalid {
border-color: red;
}
.form-pseudoclases *:focus {
background-color: skyblue;
}
.form-pseudoclases *:disabled {
background-color: pink;
}
.menu-pseudoclases a:visited {
color: olive;
}
.menu-pseudoclases a:hover {
color: orange;
}
.p-pseudoclases:hover {
font-size: 20px;
}
#temario-css:target {
background-color: lightgreen;
}
.lista-pseudoclases li:first-child {
color: green;
}
.lista-pseudoclases li:last-child {
color: violet;
}
.lista-pseudoclases li:nth-child(3) {
color: navy;
}
.lista-pseudoclases li:nth-child(4n) {
font-size: 20px;
}
.lista-pseudoclases li:nth-child(3n + 1) {
font-weight: bold;
}
.lista-pseudoclases li:nth-child(even) {
background-color: yellow;
}
.lista-pseudoclases li:nth-child(odd) {
background-color: orange;
}
.articulo-pseudoclases p:first-of-type {
background-color: pink;
}
.articulo-pseudoclases p:last-of-type {
background-color: violet;
}
.articulo-pseudoclases p:nth-of-type(3) {
background-color: fuchsia;
}
.articulo-pseudoclases *:not(p) {
background-color: beige;
}
/*
Pseudoelementos - Dan estilos a partes específicas de un elemento, se usa el :: para diferenciarlos
de las pseudoclases
[Link]
*/
.saga-geminis::before {
content: "🤼♂️";
}
.saga-geminis::after {
content: "♊";
}
.saga-precio::before {
content: "$";
font-weight: bold;
}
.saga-precio::after {
content: "USD";
font-weight: bold;
}
.p-pseudoelementos::first-letter {
font-weight: bold;
font-size: 32px;
}
.p-pseudoelementos::first-line {
color: coral;
}
.p-pseudoelementos::selection {
color: greenyellow;
background-color: black;
}
.input-pseudoelementos::placeholder {
color: green;
}
/* Agrupar Selectores */
.form-agrupar-selectores input[type="text"],
.form-agrupar-selectores input[type="email"],
.form-agrupar-selectores textarea {
border-color: yellow;
border-width: 2px;
border-style: dashed;
background-color: black;
font-size: 20px;
display: block;
width: 300px;
}
/*
El Algoritmo de CSS: Es la forma en que el navegador aplica los estilos al documento HTML. Es
vital entender este concepto para que entiendas como se aplican y en algunas ocasiones se
sobreescriben las reglas CSS.
1) La Cascada.
2) La Especificidad.
3) La Herencia.
La Cascada es el mecanismo en que el navegador aplica los estilos. Y toma en cuenta lo siguiente
en este orden:
1) El Origen del Código:
- El User Agent (los estilos por defecto del navegador)
- Personalizaciones del usuario.
- Los estilos del autor.
2) La Especificidad del Selector
3) Orden de Aparición
La Especificidad es el peso que tiene un selector cuando hay conflicto de estilos. Se calcula de la
siguiente forma:
Etiquetas y pseudoelementos -------------- 0,0,0,1
Clases, atributos y pseudoclases ------------0,0,1,0
Identificadores -------------------------------0,1,0,0
Estilos en línea--------------------------------1,0,0,0
!important ------------------Rompe la especificidad
La Herencia, es la capacidad de un selector de obtener (heredar) los valores de sus ancestros más
cercanos, para aplicarla se usa el valor inherit, si queremos evitarla podemos asignar otro valor o
inicializar la propiedad en cuestión con el valor initial
[Link]
*/
/*
background-color: define el color de fondo del elemento
background-image: define la imagen de fondo del elemento
background-size: define el tamaño de la imagen de fondo, primer valor x, segundo y
- cover: cambia el tamaño de la imagen de fondo para asegurarse de que permanezca
completamente visible
- contain: cambia el tamaño de la imagen de fondo para asegurarse de que el elemento esté
completamente cubierto
background-repeat: define cómo se repite la imagen de fondo en el elemento
background-position:
define la posición de la imagen de fondo, primer valor x, segundo y, si no se especifica un
segundo valor éste será center
aparte de valores numéricos podemos indicar el posicionamiento con las palabras: center, top,
bottom, left and right
background-clip: define cuánto debe extenderse el fondo dentro del elemento.
background-origin: define el origen de la imagen de fondo.
background-attachment: define cómo se comportará la imagen de fondo al desplazarse por la
página
*/
.bg-art {
width: 1000px;
height: 700px;
background: url("../assets/[Link]") no-repeat center bottom,
url("../assets/[Link]") no-repeat center bottom,
url("../assets/[Link]") no-repeat center top;
}
/*
Sistema Hexadecimal
0123456789ABCDEF
RedGreenBlue (Medios Digitales) vs CyanMagentaYellowKey (Medios Impresos)
Colores en HEX va a ser colores de 6 dígitos
#ff6600
*/
Sistema RGB
Acepta 8 bits por canal de color
Bit (0/1) 2 elevado a la potencia 8 = 2*2*2*2*2*2*2*2 = 256
Por cada canal de color tenemos valores que van del 0 al 255
*/
/*
Sistema HSL
HueSaturationLightness (Tono-Saturación-Luminosidad)
El primer es Hue (Círculo Cromático)
0° -> red
60° -> yellow
120° -> green
180° -> cyan
240° -> blue
300° -> magenta
El segundo valor es Saturation (Intensidad del Color)
0% -> Escala de grises
100% -> Color puro
El tercer valor es Lightness (Luminosidad del Color)
0% -> negro
50% -> color puro
100% -> blanco
*/
/*
Valor transparent: color transparente es igual a aplicar rgba(0,0,0,0)
Valor currentColor: Hereda el valor por defecto o asignado de la propiedad color, del ancestro que
tenga definida esta propiedad, busca del ancestro más cercano al más alejado
*/
/*
Estilos de la Fuente
font-family
font-size
font-weight
font-style
font-variant
line-height
font
*/
/*
Formato woff o woff2 - Web Open Font Format
font-display:
auto - permite que el navegador utilice el método predeterminado que suele ser block
block - oculta brevemente el texto hasta que la fuente haya sido descargada por completo
swap - indica al navegador que utilice la fuente alternativa para mostrar el texto hasta que la
fuente personalizada se haya cargado por completo
fallback - es una mezcla de auto y swap
optional -ocultará el texto, luego lo cargará con la fuente alternativa y finalmente aplicará la fuente
personalizada
*/
@font-face {
font-family: "Pecita";
src: url("../assets/[Link]") format("woff");
font-display: swap;
}
.pecita {
font-family: "Pecita", cursive;
font-size: 2rem;
}
.raleway {
font-family: "Raleway", sans-serif;
font-size: 2rem;
}
/*
text-align
text-decoration
text-indent
text-overflow
overflow: hidden;
white-space: nowrap;
text-transform
letter-spacing
white-space
word-break
word-spacing
writing-mode
*/
*
Unidades de Medida
1) Absolutas (Su valor no cambia, son unidades del mundo real)
pc, cm, mm, in, Q
pt (1/72in)
px (1/96in)
2) Relativas (Su valor es relativo a un contexto)
em, rem, ex, ch - al tamaño de la fuente
em - basada en la anchura de la "m" de la fuente del elemento
rem - basada en la anchura de la "m" de la fuente del elemento raíz (html)
ex - basada en la altura de la "x" de la fuente del elemento
ch - basada en la anchura del "0" de la fuente del elemento
% - al tamaño del contenedor
vw, vh, vmin, vmax - al tamaño del viewport
vw - ancho del viewport van de 1 a 100
vh - alto del viewport van de 1 a 100
vmax - entre vw y vh toma el que tenga mayor valor
vmin - entre vw y vh toma el que tenga menor valor
Conversiones entre unidades - [Link]
*/
/* Recuerda que la etiqueta body tiene margenes por defecto y recuerda que las barras de scroll
del navegador también forman parte del viewport */
/* box-shadow: mov-x mov-y blur-radius spread-blur color inset/outset; */
/* text-shadow: mov-x mov-y blur-radius color; */
.drop-shadow img {
max-width: 100%;
height: auto;
/* filter: drop-shadow(mov-x mov-y blur-radius color); */
box-shadow: 1rem 1rem 1rem 1rem #f00;
filter: drop-shadow(1rem 1rem 1rem orangered);
filter: drop-shadow(1rem 1rem 1rem steelblue);
}
/* scroll-snap-type: [x | y | inline | block | both] [mandatory | proximity]; */
Prefijos CSS
Los principales navegadores usan los siguientes prefijos:
-webkit- (Chrome, Safari, nuevas versiones de Opera, casi todos los
navegadores iOS (incluyendo Firefox for iOS); basicamente,
cualquier navegador basado en WebKit)
-moz- (Firefox)
-o- (Versiónes antiguas, pre-Webkit, de Opera)
-ms- (Internet Explorer y Microsoft Edge)
4.613 pts
Antes:$1.299.000 COP
$597.540 COP/año
Renovar
Termina en:
05d
03h
30m
22s
Curso de Debugging con Chrome DevTools
80
Funcionalidades útiles de Chrome devtools no
cubiertas en el curso
eperedo
66549
En este post te voy a mostrar algunas funcionalidades que posee chrome devtools y que no
fueron cubiertas en el curso.
💻 Variables $1 al $4
En el curso vimos como podemos usar $0 para acceder al actual elemento seleccionado
en Elements, pero adicionalmente existen otros shortcuts como $1, $2, $3, $4. En estas
variables el devtools guardará los últimos 4 elementos que selecciones en el tab Elements.
🔍 Shortcuts para querySelector y querySelectorAll
Imagina que quieres saber cuantos botones hay en tu html, puedes usar querySelectorAll para
averiguarlo:
var buttons = [Link]('button');
[Link]([Link])
// muestra el total de elementos
Gracias a devtools puedes rápidamente reemplazar esta funcion por el doble dolar $$
var buttons = $$('button');
[Link]([Link])
// muestra el total de elementos
Tener en cuenta que $$ al ser una utilidad del devtools retornará un arreglo, mientras
que querySelectorAll retorna un NodeList. Pueden comprobarlo con el siguiente código:
var buttons = $$('button');
[Link](buttons) // retorna true
//
var buttons = [Link]('button');
[Link](buttons) // retorna false
Para el caso de querySelector, su alias es $ y también es una función a la que debemos pasarle
un selector, ambas funciones retornan un elemento del dom y no hay un cambio en el tipo de
dato como en querySelectorAll
Tener en cuenta que al ser variables globales pueden ser reemplazadas fácilmente, por
ejemplo si tienes jQuery en tu html el $ será jQuery y no querySelector
✏️Copiar una variable
Vamos a suponer que tenemos una función que tras realizar una llamada http retorna un objeto
que representa la información de un usuario
function fetchUser() {
var user = {
id: 1,
name: 'Eduardo',
age: 33,
country: 'Peru',
salary: 100
};
return user;
}
Ahora imagina que necesitas todo ese objeto para pegarlo en otra herramienta y hacer algún
proceso con esa información, lo normal sería hacer un [Link] al objeto, seleccionarlo y
copiarlo. !Aburrido! Devtools te ahorra ese proceso con su función copy
function fetchUser() {
var user = {
id: 1,
name: 'Eduardo',
age: 33,
country: 'Peru',
salary: 100
};
copy(user) // ahora tienes este objeto en tu porta
papeles
return user;
}
Listo, cuando ejecutes la función podrás hacer ctrl/cmd + V y pegar el objeto en cualquier lado.
Seleccionar elementos vía código con inspect
Buscar y seleccionar un elemento es muy simple con devtools, simplemente haces click en el
icono de la flecha con el cuadradito y luego vas al html y haces click sobre el elemento que
deseas, fácil. Pero hay una manera fancy de hacerlo desde código gracias al método inspect.
Este método acepta como parámetro un elemento del dom.
var button = [Link]('#my-button');
inspect(button);
Al ejecutarse la función inspect automaticamente el devtools cambiará al tab Elements y te
mostrará el elemento que corresponda al selector my-button.
👀 Monitorear una función
¿Heredaste un código larguísimo y difícil de entender? ¿Las funciones y variables tienen
nombres de letras como x, z? ¿Estás leyendo esto con voz de vendedor de teleferia? No te
preocupes, con la función monitor devtools te avisará cuando alguna función de tu código ha
sido llamada.
En el siguiente código veremos a una función que retorna un simple objeto
function fetchUser() {
var user = {
id: 1,
name: 'Eduardo',
age: 33,
country: 'Peru',
salary: 100
};
return user;
}
Si deseo que devtools me avise cada vez que se ha ejecutado la función solo debo hacer lo
siguiente:
monitor(fetchUser);
// Ejecutamos la función
fetchUser();
// Nos aparecerá el siguiente mensaje:
// function fetchUser called
📷 Tomar screenshots
Quieres pasarle un screenshot a alguien de un elemento del DOM específico. Pues simple,
selecciono el elemento del DOM usando el devtools, y luego presiono ctrl + shit + p se abrirá
un modal con un listado de comandos de acciones del devtools, escribimos “capture node
screenshot” y automaticamente se guardará la imagen del nodo seleccionado. Adicionalmente se
puede generar screenshot de toda la pantalla o incluso dar la opción de una seleccionar una parte
en específico.
Y así como estás funcionalidades hay muchas más. ¿Conoces alguna otra funcionalidad?
¡Compártela en los comentarios!
15
hace 4 años
Escribe tu comentario
+2
Ordenar por:
Top
2
djcubillos
6993 Puntos
Que gran aporte. He podido agilizar un montón de tareas con esta información. Especialmente
con “monitor”.
Responder
+2
1
joseluiscdc
51822 Puntos
Excelente 😃
Responder
+2
1
Sergio1729
42141 Puntos
Me ha encantado!!!.
En especial la ultima funcionalidad :3.
Responder
+2
1
cecilia-riveros
10568 Puntos
Muy buen aporte. Hay varias cosas que no sabia.
Responder
+2
1
IronMaiden
19944 Puntos
Muchas gracias por el aporte!! 🤘🏻
Responder
+2
1
germanceballos
7827 Puntos
Excelente tutorial, Gracias por compartirlo!
Responder
+2
1
EmichanCode
15738 Puntos
Wow quede impresionado por la nueva forma de tomar screenshots
Responder
+2
1
sephirot-avellan
43633 Puntos
muy bien
Responder
+2
1
juanpablo1204
36401 Puntos
Excelente aporte! Muchísimas gracias!
Responder
+2
1
diegopagini
15464 Puntos
Gran aprote!
Responder
+2
1
luisrangelc
36881 Puntos
Que gran post!!!
Responder
+2
0
DaneSanchz
42413 Puntos
Gran aporte, no conocía muchas de estas funcionalidades, sobretodo el shortcut $$ 😀
Responder
+2
0
higueraDev
22641 Puntos
¡Muchas gracias!
Responder
+2
0
JuanChristopher001
27292 Puntos
Interesantisimo. ¡Gracias!
Responder
+2
0
juanjose23
14925 Puntos
Buena información, gracias
Responder
+2
Entradas relacionadas
2
¿Qué significa Minificar tu código?
En la clase 16 el profesor explica en el minuto 4:54 la diferencia de tamaño de un archivo
que se observa en la columna Size del tab Network
felixrvasquez
7
Resumen curso de Debugging con Chrome DevTools
Resumen curso de Debugging con Chrome DevTools Instruido por el gran: Diego De Granda
Enlaces de Interés: Documentación oficial DevTools
felixrvasquez
3
Una lista de cosas geniales que puedes hacer con las DevTools de
Chrome:
Aqui hay una lista de cosas que puedes hacer con las herramientas que Google Chrome
provee: Arrastrar elementos de HTML en el panel de
ruben-vigil