Hoy vamos a hacer un curso de HTML desde cero.
HTML, os voy a decir una cosa,
es el lenguaje más importante que existe en Internet.
Hay gente que puede estar de acuerdo o no,
pero yo creo que es objetivo.
Porque todo lo que veis, cualquier página web
que estáis viendo a día de hoy, casi el 99,9%,
tienen HTML.
Sin HTML no veríais absolutamente nada.
Al final es el lenguaje de marcado
que se está utilizando para elaborar a día de hoy
las páginas web.
Es una especificación que existe ya desde hace bastante tiempo.
De hecho, es desde el 1993 y hace poco ha cumplido 30 años.
O está a punto de cumplir 30 años.
30 años desde que Tim Berners-Lee empezó,
ya empezó a describir en el 90, 91 los primeros elementos,
pero el lanzamiento inicial y oficial de HTML es en el 93.
Así que 30 años ya que tiene HTML,
el lenguaje de marcado de la web.
HTML son las siglas de Hypertext Markup Language,
que significa lenguaje de marcado de hipertexto.
Es un lenguaje de marcado y lo que trata es simplemente
de que nos enfoquemos de cómo se marca nuestro contenido.
¿Qué quiere decir esto de marcar el contenido?
Lo que quiere decir es cómo describir el contenido.
Entonces, no se dedica a cómo se interactúa con el contenido,
para eso tenemos JavaScript.
No se dedica a cómo se ve el contenido,
para eso tenemos CSS, que lo veremos la semana que viene.
Esto básicamente lo que hace es definir el contenido.
Si hay una imagen, si hay una negrita,
si es contenido importante, si es un párrafo, si es un titular,
todo esto.
Pero no cómo se ve visualmente,
sino como describiendo el contenido.
Describimos la estructura y el contenido de nuestra página web.
Y en eso nos vamos a enfocar hoy,
y vais a ver que es súper importante.
Es súper importante porque hace toda la diferencia.
Toda, toda la diferencia.
El cómo nosotros estructuramos nuestra página web
es súper importante porque quitándole todo el estilo,
podríamos ver cómo funciona o cómo entender nuestra página web,
aunque no tenga estilos.
Lo vais a ver que es muy interesante
y así vais a ver la importancia que tiene la HTML.
Para seguir el curso tenemos unos requerimientos mínimos
y os los voy a decir.
Lo primero, para seguir el curso necesitáis un editor de código.
Podéis utilizar el que queráis.
De hecho, podéis utilizar el blog de notas, si queréis.
Podéis utilizar el blog de notas, Notepad++,
vuestro editor favorito, Legendbrains, el que queráis.
Lo que voy a usar yo, lo que vamos a utilizar aquí en este curso,
es Visual Studio Code,
que es el editor que yo diría que a día de hoy es el más utilizado.
Se puede utilizar para HTML, para Python, JavaScript,
para un montón de lenguajes de programación,
pero vamos a utilizar este.
Es totalmente gratuito.
Está disponible para Windows, para Linux, para MacOS,
para lo que queráis.
Así que Visual Studio Code va a ser el editor que vamos a utilizar
y os podéis descargar si no lo tenéis todavía.
Y ahora bien, lo que vamos a utilizar con Visual Studio Code
es una extensión que marca mucho la diferencia.
Es una extensión que nos va a permitir ver nuestra página web
sin necesidad de hacer nada.
Así que voy a crear una carpeta que le voy a llamar curso.html.
Entramos a curso.html y vamos a abrir ya nuestro editor favorito,
el que queráis.
Si quieres utilizar Microsoft Word, pues bueno, ánimo con eso,
pero lo podríais llegar a utilizar.
Muy bien, este es nuestro editor.
Ahora, si utilizáis este editor,
que es el que yo os recomiendo y con el que vamos a seguir el curso,
hay una extensión que nos va a facilitar la vida
para seguir el curso y para hacerlo todo, ¿vale?
Esta extensión se llama Live Preview.
Así que entramos aquí en las extensiones,
que es este puzzle, el trozo del puzzle,
y buscáis aquí Live Preview.
Live Preview, ¿vale?
Ves que lo tengo aquí.
Yo lo tengo desactivado, pero lo tengo instalado.
Así que lo habilito y ya lo tendría activado.
Es este.
Es de Microsoft, oficial de Microsoft, ¿vale?
Aquí lo tendréis, Live Preview y ya está.
Yo utilizo Live Preview, ¿vale?
Pero podéis utilizar Live Server
o incluso podéis no utilizar ninguna extensión.
No te preocupes si no utilizas este editor
y no tienes esta extensión o lo que sea.
Te voy a enseñar cómo podrías hacerlo también
sin ninguna extensión y hacerlo de otra forma.
Es un poco más lento, es un poco más rollo,
pero vas a poder seguir utilizándolo perfectamente, ¿vale?
Así que muy bien.
Pues aquí tenéis la extensión Live Preview de Microsoft,
pero ya os digo que podéis utilizar diferentes opciones.
Pues vamos a empezar con el curso de HTML.
A mí lo que me gusta mucho de los cursos es que sean prácticos.
O sea, no estar aquí dos horas contándoos toda la historia,
sino que mientras vamos haciendo y vamos codeando, ¿vale?
Pues ir viendo qué es HTML, para qué funciona y todo esto.
Ya os he dicho que HTML, este curso,
aunque esté pensado para gente que quiera desarrollar web desde cero,
también le va a ayudar mucho a gente que crea que sabe HTML,
porque lo cierto es que HTML tiene más de 100 etiquetas.
Etiquetas que son las que te permiten estructurar el código.
No solo nos vamos a centrar en entender y aprender el lenguaje,
sino también a entender el por qué, ¿no?
A utilizar las etiquetas más importantes y las que se usan mal,
porque hay muchas etiquetas que se usan mal.
Te voy a explicar también algunos trucos a tener en cuenta,
algunos recursos que te pueden ayudar y todo eso lo vamos a estar viendo
en estas dos horas de directo.
Como he dicho, HTML son las siglas, ¿vale?
HTML de Hyper...
Vamos a poner esto para aquí.
Hypertext.
Hypertext, ¿vale?
Hypertext, fíjate que la H es de Hypertext, ¿vale?
Luego tendríamos Markup Language.
Esto sería un lenguaje.
O sea, no hay ninguna duda de que es un lenguaje.
¿Ok?
Es un lenguaje de marcado de Hypertexto.
O sea, es que es lenguaje para marcar la web.
Nos permite indicar la estructura de nuestro documento mediante etiquetas.
Tiene una gran adaptabilidad, una estructuración lógica
y es muy fácil de interpretar tanto por humanos como por máquinas, ¿vale?
Importante.
Vamos a poner aquí de lo que no se ocupa, ¿vale?
No se ocupa, no se ocupa de la presentación.
Esto es cosa...
Vamos a poner esto más pequeño.
Esto es cosa de CSS.
La presentación es cosa de otro lenguaje que vamos a ver la semana que viene.
De hecho, lo tenéis aquí.
Lo tenéis aquí.
Curso de CSS desde cero.
Lo vamos a hacer la semana que viene
donde estaremos dando el estilo a lo que vamos a hacer hoy.
Que hoy encima vamos a estar empezando a hacer nuestro porfolio.
Vamos a hacer un porfolio con HTML
y la semana que viene lo estilaremos, ¿vale?
Así que de la presentación se encarga...
De esto se encarga CSS, ¿vale?
CSS que es otro lenguaje, en este caso, para estilar, ¿vale?
De la presentación CSS y de la interactividad
se encarga, en este caso, JavaScript, ¿vale?
De la interactividad, JavaScript.
Entonces, ¿de qué se encarga esto?
Pues de lo que se encarga aquí, lo vamos a poner aquí, ¿vale?
Es de describir el contenido.
Describir el contenido.
Describir el contenido.
Ya está.
Vamos a empezar con el lenguaje...
O sea, es que HTML fue crucial para la invención,
el desarrollo y la expansión de la web.
Así que estate atento y atenta porque lo vamos a disfrutar mucho.
A mí me encanta HTML porque es, por desgracia,
uno de los lenguajes en mundo de la programación web
que más poco la gente lo valora y debería estar mejor valorado.
Pues venga, vamos a escribir ya HTML
y vamos a ir paso a paso de qué trata HTML.
¿Cómo tiene que funcionar HTML?
Normalmente, HTML, para poder escribirlo y tal,
tenemos que escribir y crear un archivo
que tenga la extensión .html.
Vamos a crear ya aquí un index.html, ¿vale?
Fíjate que ya ha detectado que esto es un archivo HTML
y nosotros podríamos llamarle normalmente al archivo
como queramos, index, prueba.html, lo que sea.html.
¿Pero por qué se le llama index.html?
Porque normalmente y de forma automática
cuando entramos en las páginas web
y sobre todo de forma clásica,
hoy en día ya es diferente porque podemos tener servidores
y un montón de cosas,
pero de forma clásica,
cuando entrábamos a una página web,
lo que hacía por defecto era ir a buscar
el archivo index.html.
Y esto era una forma de tener como una regla
de que cuando entrábamos a una página web
buscase algún archivo como un punto de entrada para entrar.
Así que vamos a utilizar nosotros también el index.html
para que esto lo sigamos haciendo.
Para empezar con HTML,
lo primero que tenemos que tener en cuenta
son las etiquetas, ¿vale?
Y con las etiquetas lo que creamos son elementos.
En HTML al final lo que se trata
es de ir creando elementos.
Por ejemplo, imaginad que queremos poner un título.
Los títulos se pondrían con los headings,
con la etiqueta heading,
que sería h1, h2, h3.
Entonces, tenemos que empezar con la etiqueta, ¿vale?
Empezamos con la etiqueta y lo hacemos así.
Fíjate que en cuanto ya he escrito la etiqueta,
me ha puesto la de cierre.
¿Cómo se hace aquí?
Tenemos que utilizar comillas angulares, ¿vale?
Luego, el nombre de la etiqueta
y aquí, casi todas las etiquetas,
casi todas las etiquetas,
luego veremos algunas que no,
podemos ponerle el contenido.
En este caso, pues el porfolio de Midudev.
Este sería nuestro primer elemento.
Y para que esto lo tengan muy claro,
porque incluso hay gente que tiene años de experiencia
que no sabe cómo se llama cada cosa,
lo cual es bastante sorprendente,
pero que no entienden
cada una de las partes que tendríamos aquí.
Por ejemplo, y es muy importante,
y sé que mucha gente dice,
ah, bueno, pero ¿qué más da?
La semántica es importante
cuando estáis hablando de ciertas cosas.
Por ejemplo, esta parte de aquí,
esta parte de aquí, ¿vale?
Vamos a poner esto más gordito, de color rojo.
Por ejemplo, esta parte de aquí sería lo que estaríamos hablando
de la etiqueta.
Esta es la etiqueta, ¿vale?
Esta parte de aquí es la etiqueta.
Pero si hablamos de todo esto,
de lo que estamos hablando es del elemento, ¿vale?
Esto sería el elemento.
Así que hay que diferenciar entre elementos HTML,
¿vale?
Y etiquetas HTML.
Esta parte de aquí sería la etiqueta.
De hecho, podríamos hablar aquí de etiqueta de abertura
y etiqueta de cierre.
Esta sería la etiqueta.
Y todo sería un elemento HTML
cuando ya tiene incluso lo que está envolviendo, ¿vale?
Es importante que ya, como estamos viendo,
la sintaxis puede ser un poco parecida,
si estás habituado o habituada, a XML.
De hecho, el nombre como que se parece,
XML, HTML.
Durante un tiempo hubo la posibilidad
de escribir HTML como si fuese XML.
Pero no es el caso a día de hoy.
Y, de hecho, HTML es mucho más sencillo
porque no es tan cuadriculado como lo que es XML, ¿vale?
Entonces, ya tendríamos aquí
nuestro primer elemento HTML delimitado por etiquetas, ¿vale?
Se abre aquí y se cierra aquí.
Importante, cuando abrimos una etiqueta
se tiene que cerrar exactamente igual.
Si aquí lo cerramos con, por ejemplo,
aquí le ponemos un H1
y aquí le ponemos un H, lo que sea, ¿vale?
Algo así, esto es incorrecto, ¿vale?
No estamos utilizándolo correctamente.
Siempre tenemos que abrir y cerrar exactamente igual, ¿vale?
Entonces, ahora que ya sabemos la diferencia
entre etiqueta y elemento,
muy importante porque vamos a seguir hablando de esto,
vamos a ver cómo funciona HTML
y a partir de aquí vamos a ir creando nuestra página web, ¿vale?
Lo que os decía es que tenéis dos formas de conseguir esto.
Podéis hacer esto, lo podéis hacer aquí
con Portfolio Midudev y tal, ¿vale?
Pues tendríamos esto, perfecto.
Ahora, si queréis abrir esta página,
fijaos que podéis hacer esto.
Le podéis dar aquí al botón derecho,
podéis abrirlo en el Finder, por ejemplo, aquí.
Aquí tendríamos el fichero
y le podéis dar doble clic.
Ya está.
¿Ves?
Que pone Portfolio de Midudev, ¿vale?
Pues ya está.
Con esto ya podríais estar trabajando
y cada vez que hacéis un cambio,
vais aquí, vais aquí
y aquí vamos a cambiar aquí de Midudev,
le voy a poner de Miguel Ángel Durán.
Miguel Ángel, ¿vale?
Muy bien.
Volvemos aquí, refrescamos, ¿vale?
Y ya lo tendríamos.
Esto funcionar funciona, no hay ningún problema,
pero por eso os decía que esto es un poco rollo
porque cada vez que hacéis un cambio
vais a tener que refrescar otra vez
y, hombre, no es que sea muy cómodo.
Otra cosa que podéis hacer es justamente,
si no me equivoco, es mostrar vista previa, ¿vale?
Si le dais aquí al mostrar vista previa,
cuando tengáis la extensión,
vais a ver que ya aparece aquí como la vista previa
y cada vez que hagamos un cambio,
y lo vamos a ver, ¿ves?
Cada vez que vais escribiendo,
de forma totalmente automática,
se va actualizando lo que vamos haciendo, ¿vale?
Así que, de nuevo,
si tenéis la extensión de Live Preview de Microsoft,
la oficial, ya tenéis esto
y, en mi opinión, funciona de maravilla.
Si os gusta más Live Server,
también la podéis utilizar,
pero podéis utilizar la que queráis
porque esto está tremendo
y vais a ver que en tiempo real,
vamos a ver todos los cambios que vamos haciendo.
Vale, ya tendríamos esta parte de aquí.
Ahora vamos a conocer más etiquetas.
Aquí hemos conocido la etiqueta H1,
que es una de las etiquetas más importantes
porque es la etiqueta que lo que está hablando
es que es de un título principal.
Tenemos del H1 al H6, ¿vale?
Y cada uno lo que va a describir
es cómo de importante es ese título.
Si es un título, subtítulo,
un subtítulo, el subtítulo, ¿vale?
Los niveles de los títulos.
Ahora vamos a poner un párrafo,
que es con la P.
La P, al final, lo que sirve justamente
es para poner un texto
que vamos a poder ir separando con párrafos.
O sea, que si necesitamos poner un texto, párrafo, ¿vale?
¿Qué pondríamos aquí?
Pues, por ejemplo,
más 15 años de experiencia
como ingeniero de software, ¿vale?
Y podemos poner aquí también
punto creador y divulgador de programación.
Bueno, ya tenemos aquí la segunda etiqueta,
que es la de párrafo, perfecto.
Pero vamos a ver ahora los elementos anidados.
Y es que HTML, obviamente,
no solo vamos a tener elementos con contenido y ya está,
sino que dentro de los elementos
vamos a poder tener otros elementos más.
Vamos a poder tener un nivel más de elementos.
¿Cómo lo podemos hacer?
Pues, por ejemplo, imaginad aquí.
Lo que tenemos aquí es que ingeniero de software
me parece que es lo suficiente importante
como para darle un énfasis, ¿no?
Porque lo que queremos es que realmente
esa parte del texto tiene más importancia.
Es algo que queremos destacar.
¿Cómo lo haríamos que se destaque?
Podemos utilizar un strong, ¿vale?
Con el strong, lo que vamos a conseguir aquí
es decir que esa parte, ¿vale?
Tiene como más importancia.
Ya estamos destacando esa parte.
Más 15 años de experiencia como ingeniero de software.
Y aquí podemos ya ver que estamos anidando
un elemento dentro de otro.
Aquí ya tenemos un texto.
Anidamos este strong dentro de un párrafo.
Y ojo, porque lo importante es que cerremos la etiqueta
justo donde esperamos.
Si esto no lo cerramos correctamente
y aquí cerramos la P y aquí cerramos el strong,
pues ya empezamos a tener problemas, ¿vale?
Así que siempre es súper importante
que tengamos bien buena sanidad, ¿vale?
Buena salud a la hora de cerrar las etiquetas, ¿ok?
Siempre tienen que cerrarse en orden.
Si estamos aquí con strong,
tenemos que cerrar el strong
antes de poder cerrar el párrafo que tenemos aquí, ¿vale?
Entonces, cuando anides los elementos
es importante que los anides correctamente
y que vaya cerrando, ¿vale?
Te habrás dado cuenta de una cosa
que es bastante importante el HTML.
Aunque tú aquí trabajas con etiquetas,
las etiquetas no se muestran.
O sea, nosotros cuando pones aquí una etiqueta
no mostramos la etiqueta,
sino que esto, el navegador,
ya sabe cómo lo tiene que transformar.
No le pone aquí un H1,
sino que simplemente lo transforma
y luego veremos cómo y por qué
estás viendo estos estilos así.
¿Por qué este H1 es más grande?
¿Por qué esto es tan negrita?
Eso lo vamos a ver después
y te lo explicaré, ¿vale?
Entonces, vamos a poner...
Vamos a seguir con esto
porque a mí me gustaría también
explicar la experiencia que tengo.
Vamos a poner aquí la experiencia.
Como es algo que no es tan importante
como el título principal,
lo vamos a poner ya con un H2
porque vamos a empezar como una sección
que está separada de la parte de arriba.
Y en la experiencia vamos a listar
pues la experiencia que tengo,
todos los trabajos en los que he estado.
Como es una lista desordenada,
tendríamos que utilizar el elemento ul.
Ul viene de un ordered list,
una lista que está desordenada.
Y en cada lista, cada elemento,
tenemos que utilizar el li, ¿vale?
Que sería un list item,
un elemento de la lista.
Y aquí podríamos decir
las empresas en las que hemos trabajado.
Por ejemplo, una de Vinta,
que estuve en 2022.
Podríamos decir también
que estuve en Hubie.
Me voy a inventar las fechas, ¿vale?
En Hubie, que estuve en 2020.
Y podríamos decir
que también estuve en Nacencia,
¿vale?
Que fue 2015, ¿vale?
Bueno, pues así haríamos una lista desordenada.
Pero fíjate en una cosa muy importante
de cómo funciona HTML
y por qué no es tan jodido como lo es XML,
que aquí sí que podemos tener una diferencia.
Fíjate, si elimino esta etiqueta,
¿qué pasa?
No pasa absolutamente nada.
No pasa nada.
¿Por qué?
Porque HTML, dentro de lo que cabe,
es un lenguaje
que te permite obviar algunas etiquetas.
No es recomendable.
Yo no te lo voy a recomendar.
Pero sí que en este caso
puedes encontrarte alguna vez
que esto funciona.
Y como puedes ver,
funciona correctamente.
Lo que está ocurriendo aquí
es que HTML
no necesita la etiqueta de cierre
del list item.
Y automáticamente,
cuando encuentre la siguiente,
va a decir,
vale, pues voy a cerrar la anterior.
Esto, que tú lo puedes ver aquí así
y que funciona correctamente,
si abres el explorador,
y esta es una herramienta muy importante,
¿vale?
es darle al botón derecho,
inspeccionar, ¿vale?
Y aquí vamos a poder ver
un montón de cosas.
Esta herramienta
la vamos a estar utilizando constantemente
porque tiene muchas cosas interesantes
sobre HTML
que muy poca gente conoce
y tú lo vas a conocer.
Pero fíjate que si vamos aquí,
aquí sí que ha detectado el navegador
que la etiqueta está cerrada.
Pero fíjate que aquí no está, ¿vale?
Esto HTML lo hace bastante, ¿vale?
Puedes tener un montón de etiquetas
sin la etiqueta de cierre
y automáticamente va a detectar
donde la tiene que cerrar.
Pero, recomendación,
no lo hagas.
Intenta siempre que puedas controlar tú
dónde se cierran las etiquetas
porque si no,
hay veces que puedes tener problemas
que no te esperas.
Es una cosa que soporta HTML,
esto está en la especificación,
de hecho,
qué etiquetas y qué no etiquetas
son las que necesitas cerrar
y que se permite hacer esto,
pero yo te recomiendo,
de verdad,
que esto lo obvies, ¿vale?
Y que siempre estés haciéndolo correctamente,
más que nada porque además
te va a ayudar de forma visual, ¿vale?
Yo no te lo recomiendo,
pero que sepas que se puede hacer
y que de hecho en la especificación
se puede hacer.
Para que veáis
que no me lo estoy inventando,
¿vale?
Ahí veis que pone aquí
certain tags can be omitted, ¿vale?
O sea, está en la especificación,
habla de esto justamente,
de que hay etiquetas
que las podéis obviar totalmente
y que no hay ningún problema.
Así que ahí veis
que obviamente te dice,
pero ten cuidado
que hay otras que si lo haces
la vas a liar.
Por eso mejor
tener una regla única
y nos lo quitamos.
Muy bien.
Hasta aquí
ya tenemos un poquito,
vamos avanzando en nuestro porfolio
y fijaos que todavía
no he puesto ni un solo DIP.
No he puesto ni un solo DIP.
Luego veremos los DIPs.
Pero ahora te voy a explicar
otro elemento
que además es muy interesante
porque es un elemento
de reemplazo.
Vamos a ver
que en HTML
y hay mucha gente
que esto no lo sabe,
pero en realidad
hay como tres tipos
de elementos.
Tendríamos los elementos
normales,
que son los que hemos utilizado
hasta ahora.
Luego tenemos
los elementos reemplazables,
que son elementos
que se reemplazan
y estos normalmente
vamos a ver
que no tienen apertura
y cierre,
sino que son elementos
que directamente
lo que va a ocurrir
es que se reemplazan
ya sea por un widget,
por algo multimedia
y cosas así.
Como por ejemplo
las imágenes.
La imagen
no tiene apertura
y cierre
porque es un elemento
reemplazable
y por lo tanto
no va a utilizar
el contenido
de la etiqueta.
Así que normalmente
ni siquiera hace falta
cerrarlo,
sino que le tenemos
que indicar
cuál es el source.
Vamos a utilizar,
por ejemplo,
para que veamos esto,
mira,
vamos a utilizar
mi imagen,
esta,
¿vale?
Voy a guardar
esta imagen
y así vamos a utilizar
siempre esta imagen,
voy a llamarle yo
y esta imagen de yo
la voy a subir aquí
a images,
¿vale?
Y vamos a poner yo,
¿vale?
Aquí la tengo,
aquí dentro.
Entonces,
ahora,
cierro esto,
lo que voy a hacer
es cargar esta imagen
en barra images
barra yo.jpg,
¿vale?
Lo que podemos ver
es que ya tenemos
ahí la imagen,
pero fíjate
que aquí no hace falta
cerrar esto,
esto no hace falta
cerrarlo,
no es necesario
y lo que está ocurriendo
aquí es que este elemento
se está reemplazando
por un contenido multimedia.
Verás,
y es totalmente opcional,
que hay gente
que hace esto,
o sea,
que hace una etiqueta
de autocierre,
pero realmente
no es necesario
porque es que esta etiqueta
no tiene cierre,
no funciona así.
Esto es importante,
esto es HTML.
Es verdad,
si utilizas JSX,
¿vale?
JSX sería una cosa
para utilizar React.
Si no sabes lo que es,
no te preocupes,
pero la gente que sí que lo sepa
que sí que es verdad
que en JSX
sí que necesita cerrarlo
sí o sí,
pero en HTML
no es necesario,
no es obligatorio
y esto funciona
y es totalmente correcto,
¿vale?
De hecho,
hay mucha discusión
y mucha gente
que habla de que
ojalá esto
no existiese
porque al final
mucha gente entiende
incorrectamente
cómo funcionan
las etiquetas image.
No es la única etiqueta
reemplazable,
hay un montón de etiquetas
que se reemplazan,
por ejemplo,
los inputs.
Los inputs,
que pasa exactamente lo mismo,
¿vale?
A ver si...
Voy a ponerle...
A ver si...
Voy a poner esto,
pero esto
solo es para poner
aquí unas separaciones
y que lo podáis ver,
¿vale?
¿Veis?
Aquí tenemos un input.
Este elemento input
es como para introducir datos
en nuestro documento
y hay un montón de tipos.
Por ejemplo,
tendríamos el tipo de...
Yo qué sé.
Tendríamos el tipo
daytime, ¿no?
Y entonces cuando lo cambiamos,
ves,
al final es como un widget
que cambia totalmente
y como ves,
tampoco tiene una etiqueta
de apertura
y de cierre.
Así que los elementos
reemplazables
normalmente ocurre esto,
que son un poquito especiales.
Hay un montón,
por ejemplo,
también está el de color
y para elegir el color
también tendríamos...
Yo qué sé.
Tendríamos el de archivo
para subir un archivo.
Si le damos aquí,
podemos seleccionar un archivo
y detecta qué archivo
hemos subido.
Tendríamos también
el de rango, ¿vale?
Para tener aquí un rango.
Pero fíjate,
son como widgets.
Por eso pasa justamente esto.
Así tienes como una regla
que esto muchas veces
le pasa a mucha gente
que no entiende
por qué se cierra
o no se cierra
y pasa por esto
porque normalmente
cuando son etiquetas
o elementos reemplazables
no necesita
que se tengan que cerrar.
Vamos a quitar
el input este por ahora.
Esto lo voy a poner para atrás.
Vamos a hablar
de una cosa bastante importante
en HTML
que son los atributos.
Y es que te habrás dado cuenta
que hasta ahora
todos los elementos HTML
que hemos hecho aquí
pues, vale,
yo te he dicho el h1
que era el heading,
el párrafo,
el strong,
todo esto.
Pero cuando he utilizado
la imagen
no te he explicado una cosa
y seguramente habrás dicho
bueno,
¿pero esto qué es?
Y es este source, ¿no?
Este source
que puedes ver aquí
esto es un atributo.
Los atributos en HTML
proporcionan información adicional
a los elementos HTML.
Claro,
si tú quieres cargar una imagen
y haces esto,
pues aquí no hay imagen.
Necesitamos de alguna forma
informarle
de que queremos cargar
la imagen en específico.
Y eso lo hacemos
a través de atributos.
El atributo source
lo que nos permite
es decir,
oye,
quiero que cargues
esta imagen.
Pero hay un montón
de atributos
que puedes utilizar.
Ten en cuenta
que tenemos dos tipos
de atributos.
Tenemos atributos
que son globales
que podéis utilizar
en cualquier etiqueta HTML
como por ejemplo
el class,
el id
y muchos más.
Y también hay atributos
que son específicos
de etiquetas.
Por ejemplo,
en la imagen
el source
es específico.
¿Por qué?
Porque tenemos que pasarle
la imagen.
Hay otros elementos
que también utiliza el source
pero será para pasarle
por ejemplo
un audio,
un vídeo,
una URL.
Son más específicos
y no podemos pasarle
al URL este
el source.
¿Vale?
Luego veremos más ejemplos.
Podemos ver
para que veáis
por ejemplo
en el image
podríamos ponerle
el alt.
El alt es una forma
de describir
la imagen.
Define una descripción
alternativa
en formato texto
en el caso
de que la imagen
no se pueda cargar.
En este caso
podríamos poner
una fotografía
de Miguel Ángel Durán
sonriendo
y mirando
a cámara
con las manos
cruzadas.
¿Vale?
Algo así.
¿Por qué es importante
que a veces pongamos
el alt?
Porque imagínate
que por lo que sea
no se puede cargar
esta imagen.
¿Vale?
Imagínate que hemos puesto
una URL incorrecta
y ¿qué es lo que ocurre?
Que nos dice
que la imagen está rota
pero al menos
nos está dando
un contexto
donde dice
aquí debería aparecer
una fotografía
de Miguel Ángel Durán
sonriendo y mirando
a cámara
con las manos cruzadas.
Entonces le estamos dando
ya algún tipo
de feedback
y esto es importante
también para la gente
que no puede ver
la imagen.
Hay mucha gente
que por lo que sea
por problemas de vista
porque no está
en un dispositivo
que lo pueda ver
por lo que sea
que le pueda describir
la imagen
sin necesidad de verla.
Por eso muchas veces
es importante
y también este atributo
alt es importante
para los buscadores.
Google
ahora ya cada vez
con inteligencia artificial
están haciendo
más y mejores cosas
y pueden llegar
a leer la imagen
pero hasta hoy
lo que utiliza
mucho Google
para saber
cómo tiene
que guardar
esta imagen
en su buscador
es utilizar
la descripción
que le ponemos.
Así que por eso
muchas veces
es importante.
Otro atributo
que es muy interesante
es el de title.
El de title
no es tanto
para hacer una descripción
sino que es información
que está relacionada
con la imagen.
Podríamos poner
foto de Miguel
no hace falta
que sea tan descriptivo
o podemos darle
alguna cosita
que sea más opcional
y esto es lo que
uno que sirve
el title
es cuando nos ponemos
encima
aparece
bueno debería aparecer
no sé si aparece
veis ahora
que ahí aparece
foto de MidDep
¿vale?
Es como una información
anexa
o para darle
un poquito más de
más de contexto
a la imagen
¿ok?
Una cosa muy importante
de esto
de los atributos
es que hay un error
muy típico
que hay mucha gente
que piensa
que es así
y no es así.
Voy a separar un poquito
voy a separar un poquito
los atributos
¿vale?
Bueno
los atributos
como podemos ver
tendríamos
la llave
el igual
que sería como una asignación
y luego tendríamos aquí
lo que podríamos decir
una cadena de texto
pero ojo cuidado
porque no es obligatoria
la cadena de texto
por diferentes motivos
lo primero
porque
no sé si sabías
que
por ejemplo
imagínate que en title
ponemos solo
MidDep
¿vale?
o mejor todavía
vamos a dejar
voy a enseñaros más atributos
podéis poner también
el ancho
vamos a poner que sea 250
para que no sea tan grande
y el alto
¿vale?
250
lo hemos hecho un poquito
más pequeñito
pero ¿sabéis qué pasa?
que las comillas
no son obligatorias
las comillas
son opcionales
y esto funciona
perfectamente
de hecho
que tengáis en cuenta
que esto de quitarle
las comillas
es lo que hace muchas veces
los minificadores
de HTML
cuando detectan
que se pueden quitar
las comillas
¿vale?
pues las quitan
para ahorrarse
ahí dos bytes
así que
no son
obligatorias
a no ser que
tengas
obviamente
un espacio
¿vale?
si tienes aquí
un espacio
obviamente
aquí
sí que necesitamos
que tenga las comillas
porque necesitas saber
que es todo ese valor
entonces
tampoco os recomiendo
que no pongáis las comillas
pero solo que sepáis
que son opcionales
que no son 100% obligatorias
que hay mucha gente
que se cree que son obligatorias
sí, sí, sí, sí
y no lo son
son opcionales
pero obviamente
cuando tienes una cadena de texto
sí que necesitas ponerlo
luego por otro lado
que sepáis que también existen atributos
que son boleanos
y que por lo tanto
no necesitan un valor
por ejemplo
hay un atributo
muy poco conocido
pero muy interesante
que se llama hidden
¿vale?
que simplemente lo que hace
es ocultar
la imagen
el elemento
lo que sea
este atributo
lo podéis utilizar
en cualquier elemento
esto sería
por ejemplo
un atributo que es global
y el navegador
no va a renderizar
ese elemento
¿para qué se utiliza?
pues esto muchas veces
se puede utilizar
para con javascript
si quieres ocultar
rápidamente un elemento
no hace falta
que hagas nada
sino simplemente
añadirle el atributo
hidden
a ese elemento
entonces fíjate
que este atributo
es un poquito especial
porque es un atributo
boleano
los atributos boleanos
es que
si el atributo está
pues simplemente
desaparece
y ojo cuidado
porque si le ponéis aquí
por ejemplo este true
pues va a funcionar
pero es que si le pones
pepito
también va a funcionar
porque fíjate
que este elemento
hidden
cuando le pones pepito
ya detecta que es true
así que hay mucha gente
ves si le pones false
pues tampoco funciona
ten cuidado con los atributos
que sean boleanos
porque no funciona
con los típicos
true
false
y todo esto
sino que realmente funciona
solo porque aparezca
y esto lo que quiere decir
es que
este elemento
está oculto
y ya está
es true
punto
no da igual lo que le pases aquí
que al final
ya está oculto
ahora
este elemento
obviamente
aunque no aparece
visualmente
si vamos a nuestro explorador
y buscamos aquí
vamos a ver
que ahí sí que está
el elemento
aquí tenemos la imagen
simplemente está hidden
está oculta
y cómo funciona esto
porque está hidden
y de dónde ha salido
esta magia
bueno
este hidden
obviamente
ha venido
porque los navegadores
ya tienen unos estilos
por defecto
luego te comento
un poco más sobre esto
pero solo para que lo sepas
así es como está funcionando
este hidden
lo quitamos por ahora
y continuamos
una cosa que también os recomiendo
aunque aquí
como podréis ver
esto realmente funciona
¿vale?
veis que esto funciona
y podéis poner la imagen también
esto lo podéis poner en mayúscula
la recomendación
es que lo utilicéis todo
en minúscula
no es case sensitive
HTML
pero la recomendación
es que utilicéis todo
en minúscula
si sois ya viejos
como yo
seguramente recordaréis
que a los inicios
del HTML
la gente lo hacía
todo en mayúsculas
¿vale?
no sé por qué
pero por suerte es algo que se quitó
y ahora siempre se utiliza
siempre en minúscula
pero no te preocupes
porque es case sensitive
o sea puedes mezclar
puedes hacerlo
no haber ningún tipo de problema
de que no le va a afectar
pero siempre que puedas
utiliza las minúsculas
entonces
hablando de atributos globales
hay dos atributos
que son clave
en HTML
que no vamos a darle
mucha importancia
a la clase de hoy
pero sí que son importantes
en el mundo del desarrollo web
que son
el atributo
id y class
¿vale?
id que es el que nos permite
identificar la imagen
en este caso
podríamos poner
avatar
o photo image
¿vale?
es un identificador
y este atributo
aunque es global
y lo pueden tener todos
el valor que le ponemos
solo puede utilizarse
una vez
o sea
solo puede haber
un elemento HTML
en todo nuestro documento
que tenga
este valor
de photo image
porque si no
no sería un identificador
un identificador
es para identificar
algo de forma única
e inequívoca
y de forma singular
por lo tanto
una idea
solo puede existir
con un valor
una vez
no podemos empezar
a poner photo image
en todos lados
lo que podemos utilizar
en su lugar
es otro atributo
que se llama
class
el class
es una forma
de identificar
elementos
que se repiten
por ejemplo
esto puede ser
list item
¿vale?
puede ser una forma
de decir
este
este li
este li
y este li
¿vale?
si quiero
pues de alguna forma
referirme a ellos
puedo utilizar
esta clase
todos están utilizando
la misma clase
y como ves
se puede repetir
¿vale?
estos son atributos
globales
porque todos los elementos
pueden utilizar
y pueden tener
id y clase
¿vale?
lo importante
es que la id
tiene que ser única
no se puede repetir
como he hecho
para escribir tres a la vez
os ha volado la cabeza
¿eh?
vale
lo que
lo que hago aquí
es un clic
y luego
dejando pulsado
el botón
option
le doy otro clic
y otro clic
y fíjate que ahora
tengo como tres cursores
y ahora aquí
pues ya
directamente
cada vez que escriba
estoy escribiendo
los tres a la vez
diferencias entre strong
y b
que b está de prequete
de hecho
hoy no vamos a poder ver
todos los elementos
html
porque hay más de 100
pero una cosa
que os recomiendo mucho
es que utilicéis
mdn
mdn
podéis buscar cualquier elemento
por ejemplo
el b
¿vale?
html
y aquí tenéis
b de bold
negrita
indica que el texto
debe ser representado
con una variable
bold o negrita
de tipografía
como os he dicho
antiguamente
el problema es que
html tenía etiquetas
que sí que tenían que ver
con la representación
¿no?
el cómo se veían
y eso estaba mal
por lo tanto
muchas de esas etiquetas
ya no se recomiendan
por ejemplo
b de bold
que sería de negrita
ya no se recomienda
porque sería como
pensado más
en cómo se ve
no cómo describe
el texto
¿vale?
por lo tanto
la b
ya no sería algo
¿ves?
el w3c
y nosotros
les aconseja
el uso de este elemento
para manejar el estilo de texto
es mejor utilizar
css
lo que se utiliza
en su caso
sería
strong
¿vale?
strong o em
strong
sí que se puede utilizar
hasta ahora
porque el strong
sería como para
poner énfasis en algo
en una parte del texto
que sea algo
importante
por lo tanto
strong
sí que tiene sentido
aunque nosotros
lo veamos en negrita
pero no sólo porque
es negrita
porque eso es una cosa
que ahora veremos
por qué
el navegador
ha decidido
renderizarlo así
sino porque
tiene un
significado
semántico
el utilizar esa etiqueta
significa algo
y vais a ver
que a lo mejor
hay etiquetas
muy antiguas
como por ejemplo
también existía
la etiqueta
center
pero esta ya no se recomienda
¿por qué ves?
center
obsoleto
center era una etiqueta
que servía para
centrar el texto
y eso no tenía
ningún tipo de sentido
¿no?
porque
centrar el texto
no tiene nada que ver
de describir el contenido
sino de cómo se representa
el contenido
entonces ya veréis
que esto
si hay una etiqueta
html
que era para
cómo se veía
entonces ya no se recomienda
center es otro ejemplo
entonces tendríamos
el strong
que sería para poner
como la importancia
del texto
o em
que em
también sería como para
énfasis
en partes importantes
del texto
son un poquito
parecidas
el strong y el em
o sea que depende
aunque normalmente
el em
se suele hacer
como algo que pueda ser
más incursiva
o sea que sea algo
que se le quiera poner
énfasis
pero que no se le quiera
dar tanto énfasis
como se quiere poner
a strong
que sean como partes
más importantes
del texto
voy a hablarte un momento
de los estilos
por defecto
porque fíjate
que el ht1
se ve así
porque el strong
se ve así
porque la experiencia
no porque tenemos
estilos ya por defecto
porque ya este html
se ve por defecto así
entonces os estoy diciendo
que justamente
el html
no tiene que ver
con la representación
y resulta que se está
viendo de alguna forma
lo que está pasando aquí
es que los navegadores
el problema
entre comillas problema
es que tienen unos estilos
por defecto
a esto se le llaman
stylesheet
user agent
¿vale?
y lo podéis ver muy fácil
si inspeccionamos
un elemento
vais a ver aquí
¿ves?
que pone
user agent
stylesheet
estos son los estilos
por defecto
que tiene como un css
como los estilos
que ya tiene el navegador
y dice
cuando vea un h1
ya le voy a poner
todos estos estilos
por defecto
durante mucho tiempo
el problema que ha habido
con esto
es que claro
pues en unos navegadores
los estilos
por defecto
eran unos
en otros
se veía de una forma
en otros de otra
y esto fue el origen
de crear
el css reset
¿no?
como para resetear
estos estilos
por defecto
y que así
se viesen igual
los estilos
en todos los navegadores
también luego existió
en normalize
y un montón
pero solo para que sepáis
que esta es la razón
por la que se ve
de alguna forma
un poquito diferente
¿no?
y por eso cuando decimos
oye
que no tiene nada que ver
con los estilos
es porque el navegador
ya le está poniendo
algunos estilos
¿vale?
y los podemos resetear
los podemos
sobreescribir
así que no hay que
preocuparse para nada
de esto
el tema de reset
y normalizer
lo hablaremos en css
que en el curso
de la semana que viene
así que no os preocupéis
por ahora
seguimos con html
y ahora vamos a hablar
de la estructura básica
de un documento html
primero vamos a hablar
de los comentarios
¿vale?
que sepáis que para poner
comentarios en html
podéis con las comillas
angulares
¿vale?
aquí le ponéis
como una exclamación
guión y guión
y aquí
aquí tu comentario
y tenéis que terminar
para terminar
guión guión
y cerrar
y aquí podéis poner
así los comentarios
¿vale?
podéis poner los comentarios
y estos comentarios
se ignoran totalmente
en el html
y no se ven
¿vale?
¿por qué os explico
los comentarios?
bueno porque os voy a explicar
la estructura básica
y lo que vamos a hacer
es ir poniendo comentarios
lo primero de cualquier documento
html
que tienes que tener en cuenta
es un nodo
no un elemento
ni una etiqueta
un nodo
especial y específico
que se pone al principio
del documento
para especificar
la versión del lenguaje
html
que el documento
que estamos haciendo
está utilizando
y esta declaración
es importante
porque le está diciendo
al navegador
cómo debe interpretar
y renderizar
el código html
de la página
entonces
abrimos las llaves
estas
las cerramos
exclamación
¿vale?
doc
type
lo puedes poner
todo en mayúscula
html
esto lo primero
¿qué pasa?
¿pasa algo
si no lo pones?
a ver
en realidad
hoy en día
hoy en día
ya los navegadores
si no pones ninguno
como que
utilizan este por defecto
pero todavía
hay algún navegador
que entonces
se pone en un modo
si no tiene esto
se pone con un modo
especial
en el que no utiliza
el modo estándar
y tal
entonces te recomiendo
que al final
son unas pocas líneas
que lo pongas
¿vale?
luego ¿qué tendríamos?
luego tendríamos que poner
la etiqueta html
y dentro de la etiqueta html
es donde tendríamos que poner
todo nuestro contenido
ahora veremos que todavía
nos falta otra etiqueta
pero esta etiqueta html
sería como la declaración
del principio
de nuestro documento
en la que
tiene todo el contenido
¿no?
pero el contenido
de este elemento raíz
se divide en dos
por un lado
el head
¿vale?
y por otro lado
el cuerpo
que sería el body
y dentro de body
es donde realmente va
lo que queremos
renderizar en nuestra página
¿vale?
así que tendríamos aquí dentro
dentro de body
tendríamos todo
nuestro código html
lo tendríamos aquí
¿para qué sirve el head
y para qué sirve el body?
el head
es al final
un elemento
donde vamos a poner
metadatos
información extra
donde le vamos a indicar
qué tipo de archivos
CSS
tenemos que cargar
es como
un sitio
que no se va a renderizar
nada de lo que pongamos
en el head
se va a renderizar
y que nos sirve
como para darle
más información
a nuestra página
metadatos
por ejemplo
uno importante
es poner aquí
el meta
chart set
vtf8
¿vale?
y esto lo que está haciendo
es decirle
la codificación
que tiene que utilizar
en muchos sitios
por defecto
es vtf8
pero si no utilizáis esta
o si no ponéis
esta etiqueta
podéis tener problemas
con emojis
por ejemplo
si ponéis un emoji
o si ponéis un acento
¿vale?
puede ser que lo veáis mal
porque la codificación
por defecto
no acepta esto
así que hay que poner
el chart set
la codificación
que utiliza
también
a veces queremos poner
que sea adaptable
el viewport
de nuestra página
y por eso veréis muchas veces
este meta
name
viewport
y aquí el content
y lo que le estamos poniendo aquí
es width
igual
device width
¿y para qué sirve esto?
¿y por qué lo vais a encontrar
en todos los sitios?
esto lo que quiere decir
es que
el sitio
queremos que sea adaptable
y vamos a empezar
haciendo que el ancho
del contenido
sea el ancho
de la pantalla
¿por qué?
porque si no
lo que ocurría
en muchas páginas web
cuando ibas al móvil
es que solo veías
un trozo
a lo mejor veías un trozo
y no veías el resto
pues con esto
lo que nos aseguramos
es que el ancho
de nuestra página
sea el ancho del móvil
y a partir de ahí
pues ya se adapte ese ancho
se pachurre
digamos el contenido
y nosotros podamos adaptar
mejor cómo funciona
luego por supuesto
el título
el title es clave
el title lo que quiere decir
es el título
que va a tener
nuestro documento
por ejemplo
porfolio de Midudev
el título
¿veis?
aparece en la pestaña
de hecho si vamos aquí
y abrimos el explorador
ves aquí este título
y también tiene
implicaciones importantes
en SEO
si buscáis por ejemplo
Midudev
¿vale?
este título que veis aquí
¿ves?
Midudev, Frontend, JavaScript
no sé qué
este título
es justo
lo que tenemos dentro
de la etiqueta title
¿vale?
si veis el title
este título que aparece aquí
es el título que ha aparecido
en Google
justamente aquí
así que es importante
poner un título llamativo
que tenga las palabras clave
si dejáis el título vacío
que muchas veces lo veo
cada vez en los porfolios
¿no?
que los porfolios lo dejáis vacío
y no lo utilizáis
o no le dais importancia
pues da muy mala imagen
así que es importante
que también pongáis
el título
¿vale?
más etiquetas
que son interesantes
y que pueden ser especiales
vamos a ver unas cuantas
pero no las vamos a poder ver todas
luego explicaré algunas más
para temas de SEO
¿vale?
vamos a
hay una que es la de robots
que esta es una
un metadato importante
para Google
y para otros buscadores
donde le vamos a indicar
si tiene que indexar la página
y si
tiene que seguir los enlaces
¿vale?
y también podemos decirle
un metadato bastante interesante
para poner un ejemplo
es el del theme color
el theme color
es porque vais a encontraros
que hay un montón de metadatos
que son para navegadores
en concreto
hay algunos metadatos
que a lo mejor sirven
para una página web
en concreto
para una red social
para un navegador
en este caso
el theme color
os lo voy a enseñar
que está muy chulo
el theme color
es un metadato
que si vais a Safari
ay
veo que no lo ha cargado
espérate
porque pensaba que
a ver si es porque
lo tengo
a ver si es que tengo
la versión compacta
ahora
es que solo funciona
con la versión compacta
¿veis?
solo funciona con la versión compacta
pero ¿veis que está así
con color azulito?
este color azulito
en realidad
se lo he puesto yo
si aquí le cambiamos
este color
y le pongo rojo
¿vale?
bueno rojo
así no lo pilla
pero yo que sé
vamos a inventarnos un color
un color
que sea este
¿vale?
¿veis?
el color cambia
le puedes poner aquí
el color que queráis
y entonces cambiará el color
y esto queda muy bien
porque esto le da como
una calidad
a tu página
que tenga que ver
ese color arriba
con el de abajo
también pasa en móvil
en muchos móviles
en Android
también funciona esto
bueno
para que lo tengáis en cuenta
¿no?
y luego finalmente
luego hablaremos de otros
de SEO
pero uno de los más importantes
también que tenéis que tener en cuenta
es el fabicon
el fabicon
es uno de tipo link
y se le pone link
y no metadato
porque al final
está enlazando
a un recurso
¿no?
aquí el rel
sería la relación
que tiene aquí
este enlace
y la relación
que le vamos a decir
es que es el icono
que tiene que utilizar
le decimos
qué tipo de imagen es
en este caso
una imagen
creo que era jpeg
¿no?
sí jpeg
y aquí le pondríamos
el href
el href
que decimos
barra images
barra yo jpeg
cerramos aquí
y ahora
si vamos a nuestra página
bueno este no tiene
no tiene fabicon
pero si vamos aquí
¿vale?
fijaos
¿veis esta imagen de aquí?
este es el fabicon
si no ponéis esta etiqueta
la etiqueta es totalmente opcional
¿por qué?
porque si no ponéis esta etiqueta
fijaos en una cosa
si quitamos esta etiqueta
obviamente ahora
no va a aparecer nada
pero si abrimos
las herramientas de desarrollo
vais a ver que por defecto
ha intentado
o va a intentar
cargar
ah no
no aparece
pensaba que iba
no aparece
pero por defecto
debería intentar cargar
el fabicon.ico
¿vale?
por defecto intenta
fabicon.ico
y si no lo encuentra
pues nada
entonces no te muestra esto
pero pensaba que íbamos a poder ver eso
pero no
si no le tenéis que poner uno
que es bastante importante
y así tenéis un fabicon asegurado
esto es un poco para enseñaros
el tema de las etiquetas
vamos con las del SEO
porque es que de SEO
hay un montón
os he explicado la de title
pero obviamente
una de las más importantes
también es la meta
name description
la descripción de nuestra página
entonces tenemos el nombre
y de nuevo también el contenido
porfolio de Midudev
15 años de experiencia
como ingeniero de software
¿por qué es importante la descripción?
la descripción es importante
por diferentes motivos
uno
porque describe nuestro contenido
y dos
porque la descripción
es lo que aparece aquí
es lo que puede aparecer aquí
no siempre
hay que decir
que no siempre aparece aquí
porque Google a veces
se hace muy enlisto
y dice
ah no
yo sé una descripción
que es mejor que esto
que me has dicho
y entonces te la cambia
pero normalmente
la descripción que encontráis aquí
es la que ponéis
en esta etiqueta
así que es súper importante
que tengáis una meta descripción
otras etiquetas
que son importantes
por temas de SEO
también pueden ser
todas las que tienen que ver
con el
Open Graph
¿vale?
Open Graph
es como un conjunto
de etiquetas
que creó en su día
Facebook
para cuando compartís
un contenido
que se vea bien
y seguro que os ha pasado
alguna vez
cuando
mira
Open Graph
X, Y, Z
esta herramienta
está muy chula
aquí cuando compartís
una página
por ejemplo
voy a compartir mi página
este artículo
¿vale?
este artículo
imagínate que lo quieres compartir
en una red social
¿vale?
pues vamos a chequear
este sitio
y aquí nos dice
cómo se vería
en las redes sociales
aquí podemos ver
pues que por ejemplo
este artículo
no se ve bien
porque le falta la imagen
no sé por qué falta la imagen
seguramente porque ha petado
lo que hacía
aquí tenemos
todas las etiquetas
que ha detectado
y aquí nos dice
mira en Facebook
se vería
una página aquí en blanco
y con este título
con esta descripción
vamos a ver
por ejemplo
uno que sí que esté bien
porque veo que yo
en mi caso
en mi caso veo que
no estoy generando bien
las imágenes
mal por mí
¿vale?
pero veis aquí
aquí sí que tenemos
por ejemplo
se está generando
las imágenes
correctamente
y cuando compartas esto
vas a tener esta imagen
con este título
esta descripción
y esto es gracias
a todas estas etiquetas
tendríamos
las de Open Graph
las de Open Graph
para hacerlas
tendríamos
por ejemplo
meta property
org title
org title
este sería el título
que queremos que aparezca
en esa
en esa cart
¿vale?
y le ponemos el contenido
y normalmente
se le puede poner la misma
o no
se le puede poner otra
por folio midudev
y vamos a poner aquí
ingeniero
de software
software
con 15 años
de experiencia
también es interesante
que a veces
le podéis poner emojis
y aparecen
pero a lo mejor
por lo que sea
queréis poner
una etiqueta diferente
en la cart
porque a lo mejor
es demasiado largo
¿no?
pues por ejemplo
por folio
de un ingeniero
de software
por decir algo
para cambiarlo
si no le ponéis
esta etiqueta
si no ponéis
este metadato
por defecto
va a hacer un fallback
al título
¿vale?
para que lo sepáis
luego aparte del title
también tendríamos una
para la description
que podríamos poner
exactamente lo mismo
sería como
lo que aparece
justo debajo
¿vale?
la descripción
sería lo que tenemos aquí
la única central eléctrica
¿vale?
eso sería lo de abajo
y luego tendríamos también
la posibilidad
de poner un
ok image
que esta sería la imagen
que se va a compartir
¿vale?
y lo mismo
en contenido
pondríamos
barra images
barra yo.jpg
o sea tendríamos que poner
donde tienen que enseñar
esa imagen
y la descripción
de la imagen
image
alt
¿vale?
y podemos describir
la imagen
y ya está
pues la imagen
una fotografía
de Miguel Ángel Durán
¿vale?
hay un montón
o sea estas no son todas
porque obviamente
hay contenido
que pueden ser vídeos
y tal
si vais a open graph
el protocolo de open graph
aquí vais a encontrar
toda la información
de todas las que podéis decir
por ejemplo
podéis decir
cuál es el idioma
del contenido
cuál es el creador
del contenido
qué tipo de contenido
es
si es un artículo
si es un evento
si es el ancho
y el alto
de la imagen
del vídeo
del audio
hay un montón
como podéis ver
hay un montón
obviamente
no vais a necesitar
utilizarlas todas
¿vale?
pero estas
diría yo
que son las más importantes
que normalmente
os van a cambiar la vida
y en temas de SEO
también hay dos
que son bastante importantes
y que no se suelen utilizar mucho
y que deberías
una es la de
link
real
alternate
¿no?
esto lo que estamos diciendo
es enlazar
a un recurso externo
que sería la alternativa
de nuestra página
¿y qué quiere decir
esto de que sea la alternativa?
bueno
que sea la alternativa
no quiere decir
que vamos a poner
otra página
sino lo que le queremos
decir aquí
es
por ejemplo
imaginad que tenemos
una página
esta página está en inglés
y en español
pues lo que podemos decir
es
https
midu.d
barra en
y le decimos
que esta es la página
que tiene la traducción
en inglés
¿vale?
o sea
por eso es alternate
¿por qué?
porque esto lo que le está
diciendo a google
de alguna forma es
oye
que sepas
que realmente
la página que estás viendo
también
si la encuentras en inglés
sería esta
y es el mismo contenido
pero traducido
a inglés
del reino unido
o podemos decir
a español
de méxico
¿vale?
o de españa
o lo que queráis
así que
tenerlo en cuenta
que esta es bastante interesante
porque si no
os puede detectar
que tenéis contenido duplicado
y otra
bastante importante
también para eso
es la de canonical
canonical
lo que quiere decir
es que le estamos
indicando cuál es
la página
que realmente
es la principal
de nuestro sitio
¿no?
y esto
¿por qué es importante?
porque en canonical
lo que va a hacer
es que si google
entra a
www.midu.dev
o a midu.dev
va a saber
que estas dos
si tiene esta etiqueta
las va a tratar
como si fuese
la misma página
o sea
no va a tener
ningún problema
obviamente
normalmente
y lo correcto
es que esto
deberíais evitarlo
y hacer que redireccione
directamente
a midu.dev
¿vale?
que eso es lo que
se tiene que hacer
por ejemplo
si vosotros
entráis a
www.midu.dev
vais a ver
que esta página
ha redireccionado
y le ha quitado
las tres w
eso sería lo correcto
pero hay veces
que hay páginas
que por lo que sea
te interesa
que no las detecte
como contenido duplicado
y le tenéis que decir
cuál sería
la página real
o cómo tiene que tratar
o sea
cuál es la original
así que esta es otra etiqueta
que es bastante importante
lo que tenemos aquí
en el head
antes de terminar
con el head
es que también aquí
es donde por ejemplo
se pondrían los estilos
si queremos poner
estilar
esto lo veremos
la semana que viene
en el curso de CSS
pero aquí podemos decirle
quiero que el body
tenga por ejemplo
un background 0.9f
¿ves?
y aquí lo podemos poner
no solo podemos poner
estilos en línea
podemos poner
scripts en línea
estilos en línea
podemos cargar
estilos externos
también scripts externos
se pueden hacer
un montón de cosas más
obviamente en el head
pero ya lo iremos viendo
los estilos
los vamos a ver
la semana que viene
así que nada
por ahora vamos a dejar
este f0
f0
cf0
para bueno
como para ponerle
ahí un colorcito
más o menos
ah bueno
una cosa muy chula
que tiene el visual
studio code
es que si os ponéis
encima
os aparece esto
lo digo por si no lo sabíais
y entonces así podéis
pues pillar un colorcito
así a mano
y os lo ponéis
¿vale?
para que lo sepáis
vamos a seguir
con HTML semántico
¿vale?
el HTML semántico
es súper importante
¿por qué?
porque el HTML semántico
es la clave
de saber utilizar
HTML correctamente
un error muy típico
que existe
cuando la gente
se cree que sabe HTML
es utilizar
DIP para todo
DIP es una etiqueta
que es muy interesante
que significa
dividir
y que sirve de
y que lo que te permite
es dividir el contenido
luego lo veremos
¿vale?
hay dos etiquetas
no semánticas
en HTML
que simplemente sirven
para agrupar
ya sea en línea
o en bloque
el contenido
no te preocupes
que luego esto
lo entenderán mejor
por ejemplo
el SPAN
es una etiqueta
para agrupar
el contenido en línea
y el DIP
sería para agrupar
el contenido en bloque
pero no tiene
un significado semántico
¿vale?
pero tened en cuenta
que HTML
tiene más de
100 elementos
y la posibilidad
incluso de crear
elementos personalizados
o sea
existen infinitas formas
de marcar tu contenido
y para algunos aspectos
pues algunos serán mejores
que otros
estos elementos
¿qué significa
HTML semántico?
¿por qué es vital
y por qué es importante?
HTML semántico
significa
con significado
algo con semántica
lo que quiere decir
es que tiene
un significado
¿no?
así que el HTML semántico
lo que va a conseguir
es describir
el contenido
de forma correcta
por ejemplo
el elemento P
describe el significado
de un párrafo
y por lo tanto
si tenemos un párrafo
y utilizamos la P
vamos a entender
incluso visualmente
que se está tratando
de esto
lo mismo que una imagen
o incluso con otras etiquetas
como article
que la vamos a ver después
os voy a poner un ejemplo
para que veamos
qué significa esto
de HTML semántico
y cómo funciona
mira
tengo aquí
como una parte
de algo que he hecho
con HTML
para no hacerlo aquí
a mano
¿vale?
a ver
vamos a poner esto
en diferentes líneas
para que no moleste
¿vale?
esto por aquí
esto por acá
vale
mira
voy a pegar aquí
un HTML
que tengo
que no es semántico
¿vale?
pum
fíjate
voy a guardar
y aquí abajo
pues fíjate
cómo se ve
¿no?
proyectos realizados
mis tecnologías favoritas
HTML, CSS
esto
lo veis bien
no lo veis bien
¿no?
se cuesta
¿no?
de entender
incluso
fíjate solo
en la parte esta
de la izquierda
y te voy a
vamos a hacer un repaso
un poco
de lo que
de lo que he copiado
fíjate que tenemos
un span
que pone proyectos realizados
un dip
y esto
mis tecnologías favoritas
otro dip
span
span
span
dip
dip
o sea
si tú
visualmente
si visualmente
tú tuvieras que ver esto
tú entenderías
más o menos
cuál es la semántica
cuál es el significado
que tiene
y cómo
tú te imaginarías
en la cabeza
más o menos
de
de cómo
cómo funciona realmente
o sea
realmente entenderías
cómo
cómo se está estructurando
este contenido
la verdad
es que no
o sea
lo único que estás viendo aquí
es
bueno
sí que vas viendo aquí
algún texto
pero te cuesta mucho
seguir el flujo
del contenido
¿vale?
y esto es súper importante
este es el mayor error
que mucha gente comete
y hay gente pues
que aprende
desarrollo web con python
con javascript
con php
con lo que sea
y no saben html
y que cuando crean
sus páginas web
cometen estos errores
y están creando pues
experiencias
que no son buenas
en muchos porfolios
y muchas veces
os pasa esto
de que ponéis un montón
de dips
porque no sabéis
realmente otras etiquetas
o de hacer un html semántico
bueno
vamos a ver
cómo arreglarlo esto
vamos a ver paso a paso
cómo sería un poquito
el html semántico
pero para que veáis
el impacto que tiene esto
fijaos
vamos a abrir el navegador
aparte de que se ve fatal
vamos a abrir
las herramientas de desarrollo
y te voy a enseñar
una herramienta
que te puede ayudar
un montón
mira
aquí
si inspeccionamos esto
vamos a inspeccionar
esto por aquí
¿vale?
vale
aquí tenemos
dip dip dip
vale
todo dip
todo dip
vale
si le das a mayúscula
comando p
vais a ver que tenéis esto
aquí buscamos accesibilidad
¿vale?
que pone show accessibility
si no lo tenéis aquí
lo podréis buscar
me parece
aquí
me parece
en algún sitio
se puede buscar
ahora no caigo
pero en algún sitio
se puede buscar
yo siempre es que lo busco así
y me cuesta menos
pero estoy bastante seguro
ah aquí
en more tools
se puede buscar por ahí
en more tools
se puede llegar a encontrar
y si no
aquí
¿veis aquí
que pone accessibility
aquí
¿vale?
le podéis dar aquí
y ya lo tendríais
aquí
hay un tema
que es como experimental
todavía
que es enable full page
accessibility tree
esto está muy chulo
porque cuando le das
¿vale?
vamos a tener que reiniciar esto
y ahora
cuando le das a elementos
¿ves que aquí ahora
sale una personita?
pues le das a esta personita
¡pum!
y esto
lo que va a hacer es
darte a entender
cómo está
comprendiendo el contenido
y fíjate
en la parte que hemos copiado
esto de proyectos realizados
que pone
static text
static text
static text
o sea
todo el rato
solo está viendo
como el texto
no está entendiendo
no está entendiendo
qué les quiere decir
si hay un título
simplemente está viendo
el texto
todo el rato
ahí repetido
o sea
le falta esa semántica
que sí que tiene
la parte de arriba
fíjate aquí
heading
static text
paragraph
no sé qué
o sea
ahí sí que lo está
entendiendo perfectamente
así que
vamos a arreglarlo
para darle semántica
a esto
¿cómo lo podemos hacer?
bueno
lo primero
vamos a ir aquí
esto
en lugar de un spam
pues ya tenemos aquí
un h2
pues tendría que ser también
un h2
¿no?
vale
proyectos realizados
luego esta parte
en realidad parece
un contenido
que es como un anexo
del resto del contenido
y por lo tanto
no es como lo básico
aquí tendríamos que poner
que sea una site
¿vale?
como contenido
que está dándole
como más contexto
que tiene que ver
pero no es exactamente
el flujo principal
¿vale?
incluso aquí
le podríamos poner
que esto sea un header
y aquí ponerle el título
vamos a poner
que esto sea en el título
y esto tendría que ser
un h3
fíjate que tenemos
que seguir un poco
los niveles de los títulos
si hemos empezado
con h1
que sería como el más importante
y en h2
h2
aquí este tiene que ser
obviamente
un poquito más pequeño
ya hemos visto antes
cómo crear la lista
con el ul
y obviamente
si tenemos una lista
pues podemos tener aquí
todos los
los li
¿vale?
esto lo hemos visto antes
y podríamos utilizar otro
que sería la lista ordenada
que es all
y que luego te enseñaré
algunos atributos
bastante interesantes
una vez pasado esto
cuando bajamos aquí
ves que pone aquí
sitio web corporativo
¿vale?
yo entiendo
que esta parte aquí
de sitio web corporativo
parecen los proyectos
y parece una sección
así que este div
lo podríamos cambiar
y ponerle
que sea una sección
¿vale?
y todo esto
que englobamos
es una sección
ahora
en cada una
de las secciones aquí
lo que vemos
fíjate que este div
sería como un bloque
este es otro bloque
y esto otro bloque
o sea
cada una de estas partes
y elementos
que tienen información
que está
como
englobada
y que se podría sacar
y ya tendría la misma información
serían como artículos
¿vale?
sería un article
pero no entiendes
no piensas en un artículo
como que tiene que ser un artículo
o todo ¿no?
un article
lo que tienes que pensar
es que sería
un elemento
con información propia
contenida
que si tú
extraes
esa parte
ese elemento
a otro sitio
sigue teniendo sentido
por ejemplo
esto es un article
¿vale?
porque esto es un article
porque este article
tú lo sacas
a otro sitio
y sigue teniendo
el mismo sentido
¿vale?
o sea
no pierde
la razón
tiene un título
es un bloque
totalmente independiente
que no depende
del resto
y por lo tanto
al sacarlo
funcionaría exactamente igual
piensa en una película
por ejemplo
un pequeño artículo
donde tuvieses el título
de la película
con una descripción
y una imagen
pues también funcionaría
otro error muy común
es que hay gente
que cree que dentro
de un article
o sea
que el header
que todavía no hemos hecho
y luego lo haremos
solo se puede utilizar una vez
y lo cierto es que un article
puede tener un header
que de hecho lo vamos a poner
aquí con un header
vamos a poner aquí el header
y dentro
podemos tener el título
vamos a poner un h4
porque obviamente
el título
cada vez va siendo
menos importante
va teniendo
va teniendo
menos peso
¿no?
aquí
este div
pues no sería un div
sino que tendríamos
que tener un párrafo
y esto
que sería como una parte
que tendríamos abajo
podríamos utilizar
un footer
porque lo tenemos que tener
abajo
no porque esté abajo
sino más bien
porque es una información
que queda como
más secundaria abajo
e incluso la parte de dentro
y esto
que te voy a comentar
es importante
podemos utilizar small
el small
no solo quiere decir
que se va a ver más pequeño
¿vale?
que como puedes ver
se va a ver más pequeño
no es que se vaya a ver
más pequeño
sino que se suele utilizar
como por ejemplo
se puede utilizar
para temas de copyright
para hacer
dar algún tipo
de explicación
que sea como
muy secundaria
algo que no tiene
tanta importancia
o sea
no lo pienses de small
como de pequeño
sino que piénsalo
como de
contenido anexo
para dar
algo
de información
que no sea tan importante
como el resto
¿vale?
por eso le podemos dar
small
pues bueno
como hacer hincapié
bueno puede ser
¿no?
puede ser algo así
también a veces
se puede utilizar
incluso para poner
referencias
y este tipo de cosas
también se puede poner
para temas de
una aclaración cortita
me gusta
aclaración cortita
esa buena
muy bien
como contexto
puede ser
una información
muy secundaria
cosas así
entonces con esto
fijaos ¿no?
que ya está tomando
un poquito de forma
para ir más rápido
¿no?
no repetir
lo que hemos hecho
pues me lo voy a copiar
¿vale?
en realidad se supone
que son tres
tres diferentes
pero fíjate ahora
la diferencia
¿no?
la diferencia
de lo que teníamos antes
seguimos sin utilizar
ningún deep
ningún span
pero lo que estamos
haciendo es
pues
y encima
ya incluso con los estilos
por defecto
es mucho más
más fácil de leer
y esto puede ser
un buen ejercicio
que muchas veces
os puedo invitar
a hacer ¿no?
el hecho de decir
oye
voy a quitar todos los estilos
voy a utilizar los estilos
por defecto
a ver cómo se ve mi página
y a ver si así
lo puedo entender
eso puede ser un buen ejercicio
para ver si realmente
estés utilizando
algún tipo de semántica
en vuestro html
porque fijaos que
solo con esto
que hemos hecho
lo que estamos haciendo aquí
es simplemente
que se entienda mucho mejor
leer el contenido
aquí mucha gente
como que no entiende
lo de la site
y todo esto
el aside
es como algo
que está totalmente
separado del contenido principal
aquí visualmente
no lo veáis
pero el aside
que estamos teniendo aquí
sería como algo
que está como anexo
a este contenido
¿no?
o sea tenemos proyectos realizados
y aquí obviamente
los proyectos realizados
lo que tenemos
y lo que queremos hablar
son de los proyectos realizados
pero nosotros
de una forma
un poco anexa a esto
queremos decir también
oh pues aquí tenemos
todas nuestras tecnologías favoritas
¿vale?
y entonces lo ponemos en un
aunque pueda sonar
que se pone al lado
porque visualmente
lo pondríamos al lado
lo que tenemos que pensar más
es que es una cosa
que no
que le está dando
como una información
suplementaria
al contenido
que está trabajando
podría ser también
una navegación
que sería suplementario
al contenido
que estamos mostrando
una navegación
que acompaña
ese contenido
que tiene que ver
con el contenido
pero no es el contenido principal
¿vale?
por eso lo ponemos
como en un lateral
como en un lateral
en cuanto a contenido
no visualmente
aunque normalmente
lo pondríamos al lateral
para que lo entendáis
¿no?
ahora
nos falta la etiqueta main
efectivamente
hay otra etiqueta
que solo puede haber una
¿vale?
que solo tiene que haber una
nunca vi que usen tantos headers
bueno
porque eso
si lo podéis ver
los headers
hay mucha gente
que se cree
que el header
es solo para ponerlo arriba
que lo vamos a hacer
¿vale?
pero los headers
también pueden ir
en secciones
y en otro tipo de elementos
un header
no significa top header
eso es un error
bastante común
que la gente se cree
que solo se puede poner arriba
sino que también
se pueden poner
en otros sitios
entonces
el aside
contenido que se relaciona
indirectamente
o tangencialmente
con el contenido principal
del documento
el article
un contenido
que podría ser
como un bloque
independiente
de información
que se podría
copiar y pegar
en otro sitio
y no perdería
su significado
y el section
que sería para abarcar
secciones independientes
genéricas
de un documento
¿vale?
y puede haber secciones
dentro de una sección
¿vale?
tampoco hay que abusar
de ello normalmente
pero puede haber secciones
y subsecciones
¿vale?
no habría ningún tipo
de problema
y luego
otro muy importante
sería el tema
del main
vamos a ver esto
para que lo entendamos
hay una etiqueta
que es muy especial
en html
porque solo puede haber
una
en todo el documento
que es la del main
y la del main
lo que debería englobar
es ese contenido
que es el principal
de la página
por ejemplo
aquí
si el main
lo vamos a poner
de aquí
hasta
hasta aquí
¿vale?
hasta el final este
y aquí
fuera de este main
podríamos poner
por ejemplo
el header
de toda nuestra página
podemos tener
un header
en toda nuestra página
aquí
header
¿vale?
donde vamos a poner
el h1
e incluso aquí
podemos poner
una nap
de navegación
y en la navegación
vamos a descubrir
otra etiqueta nueva
que es la de A
de anchor
el anchor
lo que nos permite
es navegar
no siempre navegar
hacia afuera
sino que también
podemos navegar
hacia adentro
que es súper importante
el anchor
es uno de los elementos
más importantes
y vitales
de html
así que en el nap
podemos poner
a href
y aquí le indicamos
hacia dónde
tenemos que ir
por ejemplo
podemos decirle
que vaya a la experiencia
experiencia
podemos decirle
que vaya a
los proyectos
proyectos
¿vale?
proyectos
que se me ha olvidado
esto
y
que me han añadido
automáticamente
¿vale?
esto serían
lo que se le llaman
enlaces
internos
¿vale?
porque queremos navegar
dentro de la misma página
y obviamente
también podemos tener
enlaces externos
por ejemplo
podemos tener
uno que navegue
a twitch
aquí
vamos a ver
un error
bastante común
y cómo arreglarlo
¿vale?
esto sería el header
de nuestra página
y esto sería
el main
porque este es el contenido
principal
por ejemplo
si a alguien le quieres decir
oye
quiero que veas
el contenido de mi página
¿qué es lo que le dirías?
le dirías
empieza por aquí
o empieza por aquí
pues normalmente le dirías
empieza por aquí
si pensáis
por ejemplo
en un periódico
en un periódico
o en un blog
si pensáis en un blog
¿dónde debería estar el main?
si entramos aquí
¿dónde debería estar el main?
¿debería estar aquí?
no
¿debería estar aquí?
tampoco
aquí
no
el main al final
va a ser ese contenido
que va a cambiar
en cada url
por ejemplo
si entras en genbeta
ves que toda esta parte
más o menos
se repite
en todas las páginas
por lo tanto
eso no puede ser el main
el main va a ser eso
que lo hace única
esta página
así que esto sería el main
y aquí también
esto sería el main
todo ese contenido
que es replicable
y que se repite constantemente
no puede ser el main
por lo tanto
¿qué no debe estar
en el main tampoco?
el footer este
esta parte de aquí
tampoco puede ir en el main
así que si nosotros
tenemos aquí el main
aquí también
podríamos poner un footer
con el copyright
que os encanta poner
que no tiene mucho sentido
pero lo vamos a poner
copyright 2023
el porfolio
más bello del mundo
¿vale?
más bello del mundo
por lo tanto
el main sería ese contenido
que hace a esa página
especial y única
¿vale?
muy bien
volvemos con los enlaces
que teníamos aquí en el header
teníamos estos anchors
el href sería
el destino
de ese enlace
y aquí le ponemos
el texto
que va a aparecer
y aquí los tenemos
experiencia
proyectos y twitch
pero fíjate
que hay un problema
cuando le das a experiencia
no pasa nada
le das a proyectos
no pasa nada
o sea
estos dos enlaces
no funcionan
y lo que es peor todavía
cuando estamos aquí
y le damos a twitch
¿vale?
sí que funciona
pero nos está
alejando
de nuestra página
o sea
nos ha echado
de nuestra página
bueno
¿qué es lo que tenemos
que hacer aquí al respecto?
para las navegaciones internas
en este caso
experiencia
lo que tenemos que hacer
es indicar
a dónde tiene que ir
así que
aquí que le ponemos
este hash
y la palabra experiencia
esto lo que va a hacer
es buscar
el elemento
id
que tiene
la palabra experiencia
así que
¿dónde queremos que llegue?
queremos que llegue
a este h2
por lo tanto
ponemos aquí
id
experiencia
y ahora
cuando cliquemos aquí
nos dirigirá aquí
y lo mismo
para proyectos
en este caso
lo vamos a poner aquí
proyectos
¿vale?
esto lo hacemos
a partir de la idea
ahora si volvemos
a la página
refrescamos
y le doy a experiencia
¿veis?
ahora sí que salta
sobre el contenido
y se va
a la parte más cercana
que está
experiencia
o proyectos
y ahora vamos a arreglar
lo otro
lo de Twitch
fijaos que si le doy a Twitch
me saca de mi página
y me lleva a Twitch
esto es una cosa
que siempre vamos a querer evitar
porque siempre queremos
que nuestra página
se quede ahí
para que nuestros usuarios
no se olviden de nosotros
así que aquí
en este anchor
podemos utilizar
otros atributos
donde le podemos decir
cuál es el target
en este caso
dónde queremos
que vaya el usuario
lo que queremos es decirle
que vaya una página nueva
a dirigirse
a esta URL
o sea le queremos decir
oye lo que quiero es
que esta pestaña
la dejes tranquila
y el target
donde tienes que abrir
esta URL
sea una página nueva
¿vale?
a mí me dejas esta
que es mía
luego aquí le puedes poner
rel
y puedes decirle
no referer
¿por qué?
esto lo que va a hacer
es por un tema de seguridad
no va a enviar
la cabecera de referer
¿por qué referer?
porque en el referer
muchas veces
lo que se puede hacer
es un problema de seguridad
porque le está dando
mucha información
a la siguiente página
le está diciendo
el useragen
le está diciendo
oye pues este usuario
no le da la persona
pero sí que te dice
la versión del navegador
y todo esto
y le está dando información
incluso en la URL
podrías saber
de qué página vienes
imagínate que en la página
que vienes
tienes en la URL
todo tu token
o tu password
o una página
que nadie quiere
que sepa
que ha sido
por ejemplo
pues el YouTube naranja
vale
pues el tema
es que así lo evitas
si le pones no referer
así no vas a enviar
esa información
¿ok?
muy bien
pues con esto ahora
si vamos aquí
fíjate la diferencia
que le doy click
y ahora sí
vale
estoy aquí en Twitch
pero me ha dejado
la pestaña
¿vale?
y este soy yo
pero me está dejando
la pestaña justamente
¿vale?
muy bien
pues ahí tendríamos
los enlaces
vamos a hablar
ahora de un atributo
muy importante
también para el tema
de HTML semántico
que es el atributo
rol
y por qué
a veces
lo podéis utilizar
y tal
porque os estaba hablando
de un montón
de etiquetas semánticas
fijaos que todavía
no utilizamos ningún
dip
ningún span
ni nada
que no significa
que un dip
o un span
no se pueda utilizar
¿vale?
es una cosa muy importante
dip y span
se pueden utilizar
porque hay veces
que necesitamos
agrupar los elementos
para poder estilarlos
entonces ahí
si no hay un significado
semántico
tiene sentido utilizar un dip
no pasa nada
no está prohibido
¿vale?
pero siempre que podáis
hacer semántica
lo hacéis
si por ejemplo
por lo que sea
en este caso
yo que sé
pues este
favoritas
lo queréis estilar
pues podéis
envolverlo
con un span
y ya está
tiene sentido
punto
no hay ningún tipo
de problema
pero siempre que podáis
utilizáis lo semántico
y ya está
el no opener
ya no hace falta
ponerlo en los navegadores
modernos
¿vale?
este de no opener
esto ya es algo
que por defecto
los navegadores modernos
ya lo añaden
cuando utilizáis
el no referer
para que lo sepáis
¿vale?
muy bien
entonces
ya tenéis
el tema este
vamos con el atributo
role
hay un atributo
muy interesante
que se llama role
que básicamente
es para temas
de accesibilidad
por defecto
cada elemento
html
obviamente
tiene
un role
por ejemplo
el aside
ya os he explicado
cuál es su role
el header
el h3
todos tienen un role
pero hay veces
que por lo que sea
pues dices
vale
voy a poner un dip
vale
entonces
claro
pero este dip
resulta que es
haz clic aquí
esto no es una cosa
que deberíais utilizar
porque ya existe
un elemento
que te puede ayudar
que es botón
¿vale?
el button
es un elemento
que pone un botón
de hecho lo veis
haz clic aquí
y ya tienes el botón
y aparece
perfecto
pero hay veces
que por lo que sea
necesitáis que
ciertos elementos
tengan un role
en concreto
por ejemplo
podéis hacer un dip
y ponerle un role
y fijaos
todos los roles
que podéis hacer
hay un montón de roles
y esto le da como
semántica también
a todo esto
o sea
podéis decirle
que esto sea
un contenido
con información
una definición
un diálogo
una celda
una alerta
por ejemplo
una alerta
hay un montón
de roles
que podéis hacer
también está
el role de botón
pero obviamente
siempre
os recomiendo
que utilicéis
el elemento
correcto
y si queréis
la lista
de todos
y cada uno
de los atributos
role
que tenéis
por si hay
alguno
que se adecua
os invito
a que vayáis
a MDN
y aquí vais a ver
que hay un montón
pero vais a ver
que muchos
por ejemplo
article
pues usa article
no utilices
el role article
porque ya hay
una etiqueta
que tiene ese role
siempre intentad
utilizar
el elemento
antes de poner
un role
muy bien
ya tenemos
los enlaces
ya tenemos esto
vamos a
os voy a comentar
una cosa
de los enlaces
que hemos dejado
voy a dejar
aquí en el footer
hay unos enlaces
especiales
que están muy
interesantes
imaginad
que queréis
aquí decir
envíame un correo
hay unos
ancos
especiales
que utilizan
un protocolo
diferente
al de http
por ejemplo
tienes el de enviar
un email
mail to
miduga
gmail.com
este es muy conocido
pero hay otros
por ejemplo
el de llamar
por teléfono
y aquí podéis
llamar
por ejemplo
a más 3
4
6
8
8
8
8
8
8
9
9
y este
y este
sería
para
llamar
por teléfono
y por sorprendente
que te parezca
esto funcionar
funciona
vale
o sea
le das aquí
llamar por teléfono
ves
y esto lo que va a intentar
es abrir
el facetime
o sea
está detectándolo
para hacer
directamente
la llamada
hay un montón
de protocolos
especiales
que los podéis
revisar
en internet
seguro que
encontráis una lista
por ejemplo
también tenéis
el de whatsapp
que el de whatsapp
si no me equivoco
es con 2.000
barra barra
send
y aquí podéis poner
hola
y Udeb
vale
y esto lo que hace
es abrirte el whatsapp
y directamente
así que
tenéis un montón
esto lo he hecho mal
esto lo he hecho mal
porque esto
debería ser
text igual
y me faltaría
el número de teléfono
pero bueno
también lo podéis mirar
que hay un montón
que son especiales
que están bastante bien
y que os recomiendo
que le echéis un vistazo
de hecho
de los anchors
os voy a explicar
también un atributo
que es un poquito especial
imaginad
que queréis descargar
esta imagen
vale
normalmente la gente diría
vale
pues dale al botón derecho
botón derecho
guardar imagen como
pero hay una forma
de hacer
y de obligar
que puedas descargar
un recurso
si por ejemplo
imaginad
que este image
lo vamos a envolver
con un anchor
lo vamos a envolver
con un anchor
porque podemos
anidar los elementos
podemos hacer
que esta imagen
sea clicable
y vamos a hacer
que esta imagen
vaya aquí
source
sea este
el image
es yo
vale
pero claro
lo que quiero
no es tanto
que vaya la imagen
lo que quiero
es descargar
la imagen
pues lo que podéis hacer
para forzar eso
es utilizar
el atributo
download
entonces cuando lo añadáis
cuando haga clic
el usuario
vais a ver
que directamente
le está saliendo
ya la carpeta
para descargarlo
es una forma de forzar
descargar recursos
imágenes
vídeos
audios
lo que queráis
o sea lo que queráis
lo podéis hacer así
ahora bien
un tema bastante importante
sobre esto
es que
el download
solo funciona
con recursos
que tengas
en tu propio dominio
por temas obvios
¿vale?
por temas obvios
¿por qué?
porque si intento hacer
que se descargue
la imagen esta
de twitter
no lo va a hacer
¿vale?
no lo va a hacer
¿por qué?
por un tema de seguridad
¿vale?
si yo le pongo
que el href
es un recurso externo
vais a ver
que esto lo va a ignorar
tiene sentido
¿vale?
y lo que va a hacer
es llevarme a la imagen
¿ok?
así que tenedlo en cuenta
el download
solo funciona con recursos
vuestros propios
de vuestro servidor
ya hemos visto
la etiqueta main
vamos a darle un repaso
a esta etiqueta
veis aquí que he puesto
mis tecnologías favoritas
un, dos, tres, cuatro
y todo esto
esto está muy bien
ya lo hemos cambiado
con un all
y fijaos la diferencia
¿no?
cuando es ordenado
o desordenado
desordenado
salen puntos
ordenado
sale un, dos, tres, cuatro
el tema de all
además
es que puedes cambiar
el tipo
podemos poner aquí
que sea con
con letras
podemos hacer
que sean
con letras pequeñas
puedes hacer un montón
de cosas
pero también podéis hacer
que vaya en reversa
por ejemplo
¿vale?
que sea como al revés
o que empiece
a través de uno en concreto
por ejemplo
vamos a decir que sea con números
y le decimos que empiece en el 10
porque por lo que sea
pues también podéis hacer
que empiece en el 10
la verdad es que
las etiquetas de HTML
tienen un montón de atributos
que son muy interesantes
y que te pueden volar la cabeza
también incluso podéis forzar
que un last list item
tenga un número en concreto
le podéis poner un valor
¿veis?
y aunque aquí le hemos puesto
que empiece por 10
aquí como le hemos puesto
el valor de 5
le hemos dicho
que sea en reversa
pues fijaos lo que pasa
también podríamos ponerle
el valor aquí
y entonces lo que va a pasar
va a ser más interesante
empieza por el 10
pero luego se lo salta
y aquí sigue con el 5
o sea que ya veis
que hay un montón de atributos
que tienen un montón de cosas
pero si hay unos
hay unas etiquetas HTML
que es que
son mega necesarias
vamos a crear una sección
que va a ser
nuestro formulario
de contacto
¿vale?
vamos a crear formularios
y es que los formularios
son clave
clave para nuestros sitios
para que la gente
pueda ponerse en contacto
con nosotros
pueda enviar información
al servidor
mil millones de cosas
para crear un formulario
tenemos que utilizar
la etiqueta form
tiene dos atributos
que son muy importantes
uno
el método
esto ya es un tema más
de cómo funcionan
servidores y tal
normalmente se hace
con el método post
y la acción
que sería
a qué URL
tiene que enviar
todos los datos
aquí vamos a ponerle esto
aunque normalmente
si utilizas
React y todo esto
puedes evitar
este comportamiento
por defecto
y tú hacer las llamadas
de la API
de otra forma
pero esto sería
una forma nativa
en la que funcionaría
en los formularios
¿vale?
ahora mismo
tenemos aquí el formulario
bastante vacío
lo que vamos a hacer
es ver algunas etiquetas
que están interesantes
de formulario
por ejemplo
vamos a tener
un field set
¿vale?
que sería como una agrupación
de los diferentes inputs
que vamos a tener
y aquí al field set
le podemos poner una leyenda
que sea información personal
para pedirle
información personal
al usuario
que se quiera poner
en contacto
con nosotros
le vamos a poner
un label
y te voy a explicar
una cosa importante
de los labels
le vamos a poner aquí
nombre
dos puntos
input
type
text
id
name
y el name
le ponemos name
también
es un poco raro
pero hay que diferenciar
el nombre
del atributo
con el valor
¿vale?
es que aquí estamos pidiendo
el nombre
y tiene sentido
así que aquí tendríamos
el nombre
también le podéis poner
un playholder
y poner aquí
Miguel Ángel
Duran
¿ok?
muy bien
entonces ya tendríamos aquí
nuestro primer input
tendríamos aquí el label
y ojo aquí con esto
que es bastante importante
fíjate que el label
que lo he puesto al lado
si le das click
no pasa nada
y esto es porque me falta
un atributo muy importante
con el label
lo que vamos a querer
siempre de las etiquetas
es que cuando se haga click
en la etiqueta
te lleve al input
si eso no pasa
está mal
le pasa algo
y hay dos formas de hacer esto
que son bastante interesantes
una es utilizando
el atributo for
¿vale?
donde vamos a decirle
for name
¿vale?
para el input
que es name
esta etiqueta
es para ese input
y ahora sí
veréis que le hago click
¿vale?
y ves que ahora automáticamente
ya lo ha hecho
le hago click
y ahora lo ha llevado
esa sería una forma
y es la forma más extendida
y más típica
pero hay otra forma
que también es bastante interesante
que es sin utilizar el for
¿vale?
lo que puedes hacer
le puedes quitar también
el id entonces
es meter
el label
y envolver
el input
y esto
automáticamente
lo que va a hacer
es
fíjate
¿vale?
lo que está haciendo
y esto es correcto
y está en la especificación
explicado
y no hay ningún problema
hay mucha gente
que esto le vuela a la cabeza
puedes envolver
con el label
el input
y automáticamente
ese label
se va a estar
relacionando
con ese input
¿vale?
así que si por lo que sea
no quieres utilizar
todo el asidez
que a veces es un poco rollo
y lo tienes al lado
el label
pues puedes hacer esto
y ya te funcionaría
ahora le das al label
y ya lo tienes relacionado
¿vale?
¿cuál es mejor práctica?
depende
depende
porque al final
yo en general
si lo tienes cerca
lo mejor es hacer esto
porque te evitas utilizar la id
y así pues te
es como más sencillo
el HTML
pero por otro lado
si el input
está más lejos
o lo que sea
pues normalmente
te puede venir bien
utilizar la id
así que yo no te diría
que hay una mejor o peor
simplemente a veces
es cuestión incluso
de gustos
a veces por estilar
te puede venir bien
que estén separados
es que depende
un poquito
de un poco de todo
pero incluso
te puede venir bien
el label
que sea todo
porque entonces
el label
le puedes poner
que tenga
un display block
y así ya
te da el salto de línea
si no
lo que vamos a tener
que hacer ahora
ahora lo veréis
cuando pongamos
el otro input
¿no?
si aquí por ejemplo
hemos hecho este
pero vamos a poner otro
vamos a poner otro
que sea el del email
¿vale?
¿veis?
aquí este problema
que el email
como estos son
todo en línea
lo que está pasando
es que la dirección
va de izquierda a derecha
no es
que hace un salto de línea
y por lo tanto
aparece aquí
aquí
esto es un ejemplo
en el que podrías
utilizar un div
un div
al final
lo que nos estaría ayudando
es a decirle
oye
quiero envolver
esto
este elemento
como si fuese un bloque
¿vale?
va a tener un salto de línea
va a ser un display block
y ya tendríamos el salto
esto no estaría mal
lo correcto
lo mejor
en este caso
sería que este label
le pusiéramos unos estilos
que la semana que viene
veremos cómo hacerlo
¿no?
pondremos aquí
display block
y nos quitamos
eso
y ya está
lo tendríamos así
podríamos utilizar la clase
y ya tendríamos todo
bien estilado
sin ningún problema
de hecho
lo vamos a hacer con el div
solo para que veáis
que usamos el div
pero yo creo que lo correcto
sería estilarlo
¿vale?
solo para que lo sepáis
y fijaos que ya tenemos el email
le cambiamos aquí
email
y aquí
en lugar de esto
tenemos que poner
pues el email
midudep
arroba gmail.com
¿vale?
muy bien
con esto tendríamos una parte
podríamos ponerle
información adicional
por ejemplo
pues otro
field set
legend
legend
información
adicional
todo lo que veis
es estilable
o sea quiero decir
todo lo que veis
se puede estilar
y realmente
se puede dejar
mucho más bonito
no tiene por qué ser así de feo
¿vale?
lo digo porque hay veces
que la gente dice
¡ay!
que feo es
bueno pues no es por eso
teléfono
aquí podríamos poner
si no me equivoco
tendríamos phone
no
ya hubiera sido la leche
tel
¿vale?
y esto es importante
igual que tenemos semántica
en
de hecho aquí me he equivocado
ves que he puesto text
esto está mal
esto es email
¿y por qué?
igual que los
el html tiene una semántica
los inputs
hay que siempre intentar utilizar
el input correcto
idóneo
¿vale?
aquí hemos utilizado
el de tipo text
porque tiene sentido
que sea un texto libre
pero en el de email
lo tenía que haber cambiado
porque lo más correcto
es poner de tipo email
¿por qué de tipo email
y qué hace de interesante?
bueno
lo que va a hacer de interesante
el tipo email
son dos cosas
uno
este input
se puede estilar
de una forma diferente
en algunos navegadores
y dos
y lo más importante
en algunos medios
y dispositivos
cuando entres
a este input
te va
a facilitar
el teclado
o el cómo
introduces los datos
porque te va a poner
la arroba más fácil
va a detectar
que ahí tienes que poner
el email
y te lo va a autocompletar
así que al ponerle un email
le estamos dando
como una pista
cómo tiene que tratar
este contenido
y le va a ayudar
al usuario
y entonces
esto seguro que te ha pasado
alguna vez
que te ha dado mucha rabia
que has ido a una página web
y el input
al final
por lo que sea
dices
¿por qué este input
que es un email
por qué no me facilita
el teclado
el hecho de
que es un email
y que me ponga la arroba
súper fácil?
pues eso es por culpa
de que la gente
no hace el HTML
correctamente
y no le está poniendo
el type email
si tú pones un type email
como lo ves en el navegador
va a ser diferente
¿vale?
y lo mismo pasa
con si es numérico
si tú tienes que poner
un número
por ejemplo
si tienes que poner
un teléfono
al poner el type tel
lo que va a ocurrir
es que
cuando abra
el teclado
le va a decir
oye es un número de teléfono
por lo tanto
le enseño directamente
el teléfono
o podrás seleccionar
directamente un contacto
lo que sea
y esto
es súper importante
que lo hagamos siempre
para que ayudemos
a que sea mejor
la experiencia
y fijaos
que es tan fácil
como cambiar
un atributo
tan fácil
como cambiar
un atributo
hay un montón más
por ejemplo
ahora
no los puedo enseñar todos
pero imaginaos
que esto es para una fecha
pues fijaos
ves que cambia también
la fecha
es muy interesante
porque html
aunque es
como para describir
el contenido
tened en cuenta
que es muy potente
muchas veces
por ejemplo
tenéis validaciones
de formularios
que ya están integradas
aquí
aquí en este input
podríais poner
que este campo
es requerido
por lo tanto
si vais aquí
y por lo que sea
pues hacéis esto
no
bueno claro
aquí
no
claro
es que tendríamos que poner
cuando haga el submit
cuando haga el submit
vale
cuando haga el submit
vamos a poner todos los requires
vamos a decir
que son requeridos
y podéis hacer hasta validaciones propias
vamos a poner aquí también
requerido
vale
y vamos a añadir en el formulario
vamos a poner aquí
un input
type
submit
vale
submit
y aquí directamente
con el value
que sea
enviar contacto
ok
entonces
si hacemos esto
fíjate que le doy aquí
al enviar contacto
y me dice
oye
completa este campo
porque es requerido
ostras
vale vale
perdona
miguel
enviar contacto
hostia
completa este campo
vale pues
pongo asda asda
ojo
te dice
incluye un signo
arroba en la dirección de correo
¿por qué?
porque sabe que es de tipo correo
vaya pues
bueno
aquí pongo asda asda
vale pues pongo aquí
a
arroba
punto com
vale
asda asda
bueno
ahora sí que ha ido ya
porque el teléfono
no me está haciendo ningún tipo de
de
de chequeo
pero bueno
el tema es que sí que es importante
que según lo que utilicemos
vamos a tener diferentes
validaciones
que le podemos decir
que es requerido
incluso le podéis poner patrones
aquí en el pattern
creo que tengo que jacopile
lo he quitado
voy a ponerlo para que me ponga un pattern
ahí re chulón
así lo tengo
mira
lo habilitamos
y que me
que me chive aquí un pattern
seguro que si le pongo aquí pattern
a ver
pattern
a ver si me lo dice
¿ves?
ya me ha hecho un patrón
no es el mejor de todos
pero es un patrón
que al menos va a revisar
que el teléfono
esté siguiendo ese patrón
un patrón en concreto
¿no?
si ahora le pongo asda asda
¿ves?
utiliza un formato que coincida
o sea le puedes poner un patrón
para intentar validar
los datos que se le está pasando
así que es bastante importante
podríamos
tenemos un montón
los voy a copiar
para no perder mucho tiempo
¿vale?
y os los reviso
y os los comento todos
¿vale?
los más campos
para que no perdamos mucho tiempo
mira
he puesto aquí una sección de otros
por ejemplo
tendríamos aquí
uno con el select
para poder seleccionar
¿por qué quieres contactar?
trabajo, duda
más información
y aquí tendríamos las opciones
o tendríamos también uno
de checkbox
podríamos tener un radio button
podríamos tener diferentes
pero uno muy interesante
para que vean lo potente
que es HTML
es el de
el de data list
data list
es un elemento
que te permite hacer
como un autocomplete
imagínate
que en el formulario de contacto
quieres que la gente
te indique
cuál es el idioma
que te gustaría
trabajar
el lenguaje de programación
que te gustaría trabajar
por ejemplo
pues javascript
será
bueno javascript
vamos a tener python también
python
y vamos a tener java
y vamos a tener pues
csharp
¿vale?
bueno
este data list
lo que puedes hacer aquí
es decir
¿con qué?
vamos a poner label
¿con qué lenguaje
quieres que te ayude?
¿ok?
y le ponemos un input
que en lugar de ser de un tipo
le decimos que va a ser
como con la lista
language
languages
y le ponemos que el data list
tenga la id
de languages
¿vale?
tenemos que ponerle la id
vamos a tener la lista
y en el nombre
languages
y fíjate
la maravilla
que pasa con esto
y es que ahora
si vamos aquí
¿con qué lenguaje
quieres que te ayude?
fíjate que aparece aquí
como una flechita
y es que si le das
¿vale?
bueno no sé por qué aparece aquí
no sé por qué aparece aquí
me imagino que es tema del editor
vamos a abrirlo aquí
para que lo veáis
pero fijaos aquí
que le doy a la flechita
¿vale?
y ya te aparecen los lenguajes
pero además
es como un input
pero puede escribir
y va saliendo
como un autocomplete
y lo puede añadir
con el autocomplete
y así pues es mucho más fácil
sin tener que hacer nada
de ningún tipo
de javascript
ni nada
o sea lo tendríamos
de forma totalmente nativa
también
un tema
por ejemplo
que los porfolios
puede ir muy bien
imaginad que queremos
hacer aquí una sección
vamos a poner
proyecto realizado
sitio web corporativo
antes del formulario
de contacto
vamos a poner aquí
preguntas frecuentes
y en preguntas frecuentes
también hay un elemento
que lo que te permite
es tener una caja desplegable
así que podéis poner aquí
por ejemplo
¿cuánto cuesta un sitio web?
bueno, eso no
pero podemos decirle
¿dónde has estudiado?
o ¿qué estudios tienes?
¿no?
imagínate esto
en vuestro porfolio
¿qué estudios tienes?
y entonces
aquí
en el sumario
vamos a poner una P
y le vamos a poner
estudié
en la universidad
de
en la universidad
de Vilanova
una ingeniería
de informática
durante cinco años
¿vale?
vamos a poner
alguna más
a ver si
¿qué estudios tienes?
no, otra vez
¿qué estudios tienes?
no
¿qué estudios tienes?
no
¿cuáles son tus hobbies?
¿vale?
y aquí pues otra vez
lo mismo
me gusta mucho el deporte
vale, a ver si me
me crea uno que esté bien
vale, ¿cuál es tu lenguaje favorito?
vale, pues esto
si lo miramos aquí
fíjate cómo lo ha traducido
preguntas frecuentes
¿ves?
aquí tendríamos el details
si le das click
se abre
si le das click
se abre
si le das click
se abre
esto también se puede estilar
se pueden mejorar mucho
los estilos
pero esto al final
lo que estamos haciendo
es como
tenemos unos detalles
este sería el sumario
y aquí tendríamos
el contenido
si por lo que sea
pues de nuevo
con los atributos
podríamos decirle
que nos abra uno
¿ves?
ponemos este open
y por defecto
vamos a ver que
este
¿qué estudios tienes?
como le he puesto
que esté abierto
pues está abierto
por defecto
si le quitamos el open
pues se quitará
no estará abierto
todo por defecto
y le tenemos que dar
pero podríamos decidir
cuáles están abiertos
y cuáles no están abiertos
desde el principio
¿vale?
hay un montón de páginas
que hacen este tipo de cosas
por ejemplo
no sé si Vercel
pero hay un montón de páginas
es que claro
Vercel ya estoy
hay un montón
pero un montón de
mira
¿qué es esto?
¿qué es esto?
¿qué es esto?
¿qué es esto?
¿esto?
o sea
hay un montón de veces
que la gente
se pone a hacer cosas
que ya están hechas
que ya están hechas
y que se pueden estilar
mira en Google
esto es justamente
el summary
y el details
¿vale?
entonces ellos han podido
utilizar un deep
seguramente han utilizado
un deep
pero lo cierto
es que se podría
eso mismo
se podría hacer
de forma nativa
con exactamente lo mismo
con el details
y el summary
y muchas veces
por desgracia
es que
es un tema
de desconocimiento
que no se sabe
y tiene todo el sentido
porque al final
ayuda a la semántica
y además
a hacértelo
mucho más fácil
¿se podría estilar
el listado de data list?
no se puede estilar
una pena
pero funciona
bastante bien
para cosas
muy simples
es verdad
que el data list
no es lo más correcto
o sea
lo más potente
del mundo
pero bueno
no está mal
a mi parecer
siempre es mejor
hacer las cosas nativas
sin usar javascript
por lo que he aprendido
es como si fuera
el último recurso
totalmente
o sea
siempre
siempre
siempre
que podáis
utilizar
HTML
HTML
es que es la base
y os va a simplificar
siempre un montón
cuando vosotros
estáis utilizando
todo el rato
deep
todo el rato deep
al final lo que vais a pasar
es que os va a costar
crear las cosas
el problema de usar deep
quizás es culpa de los frameworks
no
no es culpa de cosas
es culpa de nosotros
o sea
el problema de usar deep
es culpa nuestra
los frameworks CSS
no te obligan a usar dips
no te obligan
entonces
no creo que sea correcto
nos tenemos que responsabilizar
en eso
muchos preguntan
por qué
input submit
versus button submit
vale
a ver
lo cierto
y buena pregunta
para la gente que lo ha hecho
mirad
os voy a explicar una cosa
muy interesante
de HTML y button
en los formularios
mirad
cuando tenemos un formulario
como este aquí
este formulario de contacto
yo he puesto aquí
un input type submit
vale
y fijaos que ha salido aquí
un botón
aquí
hoy en día
los botones
también pueden ser
de tipo submit
y funcionan exactamente igual
solo que
hay que cambiar el atributo
ya no se tiene que poner
en el value
y se puede poner así
de hecho
si me preguntáis
yo siempre hago esto
¿por qué?
porque me gusta más
la semántica que veo
del button
que no de un input
es como raro
a día de hoy
yo utilizaría el botón
con el tipo submit
pero os digo más
y es que
por defecto
los botones
que están dentro
de un formulario
son de tipo submit
o sea
no hace falta
ni siquiera poner nada
y lo podéis ver
porque veis
que le doy
y me lo estaba validando
los botones
que ponéis dentro
de un formulario
a no ser que pongáis
tip type button
a no ser que pongáis esto
por defecto
van a ser
de tipo submit
o sea
si ponéis un botón
va a ser un submit
para que lo sepáis
dentro de un formulario
dentro de un formulario
dentro de un form
¿ok?
¿es importante la semántica
de una SPA?
es importante la semántica
en todo
en todo
una SPA
una MPA
una RPA
en lo que tú quieras
la semántica es importante
siempre
una SPA también
y es porque
hay un error muy común
de que la gente se cree
que la semántica
solo tiene que ver con SEO
y amigos
mirad
para ver la semántica
la podéis
lo he explicado antes aquí
¿no?
con el elements
le dais aquí
y aquí podéis ver un poco
la semántica
y es bastante interesante
porque así os vais a dar cuenta
cómo están vuestras páginas
pero el tema
es que hay mucha gente
que por desgracia
pues ya tiene problemas de vista
auditivos
cognitivos
lo que sea
que tu página sea semántica
le puede ayudar un montón
y hay mucha más gente
de la que crees
que puede tener problemas visuales
y de hecho
hay un montón de estadísticas
así que
también es una forma
de intentar
que tu página
sea universal
y que llegue
al máximo número
de personas posible
vamos a continuar
que hay todavía
más cositas
de hecho
os voy a enseñar
dos etiquetas
muy importantes
porque son muy interactivas
la primera
es la de vídeo
lo vamos a poner arriba
para que lo veáis fácil
¿vale?
por ejemplo
vamos a ponerlo aquí
tenemos una etiqueta
que se llama vídeo
¿vale?
que te permite cargar vídeos
y para cargar un vídeo
lo que tienes que hacer
es poner un source
y en el source
decirle el vídeo
yo tengo aquí
un vídeo mp4
¿vale?
que me va a ayudar
lo vamos a poner aquí
¿vale?
fijaos que aquí
ya nos aparece el vídeo
pero no me hace nada
el vídeo
¿no?
se queda ahí en negro
¿qué ha pasado con este vídeo?
es un poco extraño
este vídeo es un poco polémico
no aparece nada
bueno
hay una etiqueta
que te permite
añadirle controles
a la página
al vídeo
¿vale?
entonces cuando hagáis esto
veis ahora aparecen unos controles
y por lo tanto
le podéis dar al play
¿vale?
y entonces se ejecutaría
hay un montón de atributos
muy interesantes
en el vídeo
por ejemplo
podéis quitar los controles
y poner autoplay
pero
¿qué pasa con esto?
vale
ahora se había ejecutado
pero fíjate que ahora no funciona
o sea
he actualizado
y no funciona
¿por qué pasa esto?
porque el autoplay
es un atributo
que no funciona
a no ser que el usuario
el usuario
le haya dado
haya interaccionado
con la página
si no ha interaccionado
no se ejecuta automáticamente
¿por qué?
porque si no
imaginaos la de páginas
que habría por ahí
con un vídeo ejecutándose
y ¡ah!
Dios mío
a mí me pondría los nervios
pero sí que podéis hacer
que se reproduzca
pero sin sonar
entonces tenéis que poner
muted
¿vale?
para que entonces
esté muteado
para que esté silenciado
y entonces sí
si refresco
¿veis?
sí que se está ejecutando
¿para qué puede ser interesante esto?
es bastante interesante
por ejemplo
para ponerlo de fondo
seguro que habéis encontrado
un montón de páginas
que ponen un vídeo de fondo
y que pensáis
oye ¿cómo lo han hecho?
pues lo que hacen es poner
este vídeo
de fondo
¿no?
con CSS
que eso lo haremos
lo mutean
y ya está
se cargan
lo ponen autoplay
y ya está
también podéis poner
que esto tenga
esté en loop
una vez que termine
que vuelva a empezar
e incluso le podéis cambiar
el póster
el póster es la imagen
que aparece al inicio
yo en este caso
le voy a poner otra vez
la misma
no tiene mucho sentido
como tiene autoplay
pues no aparece
pero ¿veis?
le podéis poner
que el vídeo
tenga un póster
y podéis poner el póster
que queráis
mientras sea una imagen
así que fijaos
la de cosas
que se pueden hacer
en un momento
solo con la etiqueta vídeo
y si hay una etiqueta vídeo
pues por lo tanto
también hay una etiqueta audio
¿vale?
que sería un poco
exactamente lo mismo
vamos a ponerlo por aquí
voy a poner aquí
autoplay
solo para que lo veamos
y el audio
lo voy a mover arriba
para que lo veamos
¿vale?
lo mismo sería con el audio
también puede tener un autoplay
pero pasaría lo mismo
tiene que haber interactuado
el usuario
y si le ponéis los controles
pues fijaos
¿vale?
le puedes cambiar y tal
pero ten en cuenta una cosa
estos controles
que veis aquí
esto cambia según el navegador
¿vale?
según el navegador
veréis que puede ser
de una forma
puede ser de otra
por lo tanto
no os garantiza
que vaya a ocupar
ese espacio
que se vaya a ver así
si vais a Safari
si vais a un navegador
diferente
¿vale?
tenerlo en cuenta
obviamente estas etiquetas
se pueden personalizar bastante
pero que sepáis
que también tiene
bastantes límites
algo interesante
de la imagen
ya que estamos por aquí
vamos a poner esto por acá
fijaos que tenemos aquí
una imagen
pero imaginad
que teníamos aquí
en el sitio web corporativo
o este ¿no?
teníamos aquí
como sitio web corporativo
¿vale?
imaginad que yo he creado
la página de Tesla
que esto es un error
que veo mucho
en los porfolios
y que al final
es muy fácil de solucionar
imaginad que he hecho
la página de Tesla
y la quiero mostrar
así que
¿vale?
hacemos una captura
de pantalla
y aquí en imágenes
digo vale
pues images
y pongo aquí
tesla.jpeg
perfecto
nos vamos por aquí
y cuando bajo
en los proyectos
imagínate que aquí
en lugar de sitio web
digo
la página de Tesla
y ponemos aquí
que
Elon Musk
me llamó
y
hice
bueno
e hice
en una tarde
esta página
desde cero
¿vale?
entonces ponemos aquí
pues la imagen
que
barra images
barra
tesla.jpeg
una fotografía de Tesla
no es el alt
bueno
vamos a poner una captura
captura
de pantalla
de la página web
de Tesla
¿vale?
muy bien
entonces
cuando entramos
en nuestra página
¿vale?
bueno
aparte de que la imagen
es enorme
y ahora te enseñaré
cómo arreglarlo también
pero
imagínate
que tenemos esta página
así
¿vale?
cuando entramos
en esta página así
ahora mismo
la única
la única imagen
que vemos
es esta
pero si
abro las herramientas
de desarrollo
y esto es un error
que tenéis en muchos
porfolios
¿vale?
abrimos aquí
las herramientas de desarrollo
¿ves?
solo veo
esta imagen de aquí
esta de aquí
pero abriendo las herramientas
de desarrollo
y mirando las imágenes
vamos a ver
a ver
quitamos el overview
que está cargando
la imagen de Tesla
y que además
carga medio mega
pero todavía no aparece
o sea
no está aquí
no debería cargarla
porque no la estamos necesitando
es verdad que al menos
le está dando una prioridad baja
algo es algo
pero nada
necesitamos
por suerte
otro atributo
que podéis utilizar
aquí en las imágenes
es la de loading
y le podéis indicar
que sea lazy
esto
te digo una cosa
no te garantiza
que vaya a hacer el lazy
y ahora te explico por qué
pero vamos a intentar
a ver si
si que pasa
¿vale?
vale
aquí podemos ver
que sigue cargando
exactamente igual la imagen
¿vale?
aunque yo lo estoy haciendo aquí
ves que sigue cargando la imagen
la sigue cargando y tal
pero
te estarás dando cuenta
que la está cargando
como mucho más tarde
ves que la está cargando
como después
ves que la está cargando después
lo que está haciendo aquí
ay no
no lo estás viendo
pero espérate
acá te lo enseño
vale
aquí puedes ver el waterfall
y lo que está ocurriendo
es que la imagen de Tesla
la está cargando
después de lo rojo
ahora
antes lo estaba cargando
justo justo igual
y ahora lo está cargando después
¿qué es lo que está pasando?
¿y por qué está cargando la imagen?
¿y por qué crees que no funciona
pero sí que funciona?
te explico
el tema
es que
el loading lazy
lo que hace es
cargar la imagen
solo cuando
realmente la necesita
¿no?
y el cálculo
de la distancia
la hace dependiendo
de tu conexión
cuanto mejor sea
la conexión
puede ser que diga
oye
voy a intentar cargar
la imagen
aunque no la veas
para que cuando bajes
pues igualmente
la tengas
o sea
va a hacer una optimización
de cargar solo
cuando sea interesante
pero no la carga
desde el principio
sino que va a decir
oye
cuando ya he cargado
todos los recursos
entonces cargo la imagen
¿vale?
o también
si por lo que sea
no me ha dado tiempo
a cargarla
lo que voy a hacer
es cuando esté scrolleando
y se acerque
a ver la imagen
entonces la cargo
lo podríamos también
ver también
claro
cuando tienes
una peor conexión
por ejemplo
vamos a poner aquí
slow 3G
y vamos a poner
que esto sea
iPhone así
claro
es que así
sí que se ve
ah pues
porque no tengo
el tema este
a ver
no sé si así
seguramente
con el 3G
que sería bastante lento
¿veis?
primero carga esta imagen
y luego
al rato
va a cargarla de Tesla
y esto lo está haciendo
justamente por eso
pero
al final
lo que podemos hacer aquí
y si le quitamos esto
podríamos ver
que las va a cargar
mucho más rápido
¿vale?
que aunque
¿ves?
aquí la estaría cargando aquí
una al lado de la otra
si le ponemos el lazy
aparte de
la cargaría después
y lo haría también
dependiendo de los recursos
que tenga
como esto es una página
muy sencilla
pues la carga justo
cuando puede
pero si no
cuando se hace el scroll
lo estaría haciendo
eso sí
una cosa muy importante
no utilicéis
el loading lazy
en imágenes
que aparecen muy arriba
por ejemplo
esta imagen
del porfolio
que está muy arriba
no lo hagáis
¿vale?
no lo utilicéis ahí
porque entonces
no tiene mucho sentido
y vais a tener
a lo mejor un parpadeo
y esta imagen
que sí que se va a ver
nada más entrar a la página
es importante
que se cargue cuanto antes
¿vale?
otro problema que vemos aquí
fijaos
es esta pedazo de imagen
¿veis que nos ha cargado
aquí una imagen enorme?
bueno
esto lo podemos arreglar fácil
si vamos aquí a Tesla
esta imagen
podemos arreglarlo
esto es con un poquito
de CSS
pero bueno
podríamos ponerle
cuál es la longitud
el ancho
podríamos decirle 250
ahora desaparece
porque tendríamos que darle también
cuál sea la altura
pero si ponemos esto
vais a ver
que la relación de aspecto
se rompe
lo ideal en estos casos
es saber la relación de aspecto
una forma de saberlo
que está bastante chulo
es que si vais aquí a la imagen
a ver si lo encuentro
no
aquí
ostras
¿dónde era esto?
aquí en preview
sí aquí
¿veis aquí?
aquí podéis ver
la relación de aspecto
os dice
638
317
entonces
una vez que sabéis
la relación de aspecto
con los estilos en línea
que la semana que viene
lo veremos
podéis decirle
que ocupe el 100%
y le decís
el aspect ratio
el aspect ratio
lo teníais justamente aquí
638
dividido
entre
317
y esto lo que va a hacer
es decir
vale
voy a utilizar
el 100% del ancho
y voy a guardar
la relación de aspecto
y ahora
pues tendríamos esto
está utilizando el 100%
y por más que yo lo vaya haciendo
¿ves?
cambia
y guarda la relación de aspecto
esto la semana que viene
más y mejor
otra etiqueta que está muy interesante
es la de los iFrames
los iFrames
vamos a quitar el Tesla
imaginad que queréis cargar
un vídeo de YouTube
si nos vamos a Middle Life
por ejemplo
Middle Life
vale
nos vamos aquí
Middle Life
vamos aquí
y imaginad que queremos este
que está súper chulo este vídeo
y decimos
ostras
cuando le damos a compartir
y le damos a insertar
¿veis que aparece esto aquí?
tenemos la etiqueta iFrame
y ya nos aparece aquí
como un ancho
un alto
y todo esto
y un montón de cosas
vamos a echarle un vistazo
a ver realmente
que hace todo esto
y le echamos un vistazo
mira
el iFrame
es una etiqueta especial
que lo que te permite
es incrustar
otra página web
o sea
lo que ves aquí
en realidad
es una página web
porque podemos acceder
automáticamente
y ves
lo que pasa es que es una página web
que lo que hace es que no tenga bordes
que no tenga todo el contenido de YouTube
y así
pues lo integras directamente
¿vale?
¿qué hacemos con esto?
lo que podemos hacer aquí
por ejemplo
sería integrar cualquier página web
o sea
puedes integrar
midu.dev
¿vale?
y aquí
ojo
esta es la página de midu.dev
hay algunas páginas
que no te permiten ser integradas
por ejemplo
Google
si intentas integrar Google
creo que no te va a dejar
¿ves?
no aparece nada
y esto te va a dar un error de seguridad
porque puedes limitar
que la gente intente
añadirte en un iFrame
esto lo puedes hacer justamente
en el head
utilizando unos metadatos
puedes decirle
oye
no quiero
por temas de seguridad
que nadie me meta en un iFrame
¿vale?
así que sepas
que esto lo puedes evitar
ahora bien
como lo teníamos en YouTube
voy a darle para atrás
el de YouTube
en midu.dev
¿vale?
el de YouTube
¿vale?
lo que tenemos aquí
fijaos que este es el típico problema
de que ocupa más ancho
esto también lo vamos a arreglar
con Aspire Ratio
pero lo que vemos es
también ancho y alto
el source
y tenemos un montón de cosas más
el title
este lo hemos visto ¿no?
que si te pones encima
te dice
el frame border
esto porque por defecto
aparece este borde
esto es una cosa muy antigua
pero no la han cambiado
justamente por un tema
de retrocompatibilidad
y aquí
donde tenemos el allow
lo que significa
son los permisos
a los que va a poder acceder
el contenido interno
de este iFrame
o sea
esta página web
va a poder acceder
al acelerómetro
al autoplay
a poder escribir
en el clipboard
a medios encriptados
al giroscopio
de nuestro dispositivo
o sea
que ten cuidado
con lo que permitís
cuando añadáis un iFrame
sobre todo
si es una URL
que no
no tiene buena pinta
¿vale?
y allow screen
sería para que
este vídeo
cuando le demos
al pantalla completa
aparezca
y otra vez lo mismo
para arreglar
veis que el problema
este
este es un problema
muy típico
de cuando tenemos
un iFrame
no se ajusta
o sea
no se está ajustando
aquí tendríamos que hacer
exactamente lo mismo
que hemos hecho antes
con lo de Tesla
en Tesla
habíamos hecho esto
de que ocupe el 100%
y el ask per ratio
pero en el caso
de los vídeos de YouTube
es mucho más sencillo
porque lo que tenemos que hacer
esto es CSS
pero sería 16-9
16-9
que son la relación
de aspecto
que tienen normalmente
los vídeos de YouTube
¿vale?
ahora aquí en el width
y tal
esto ya no lo necesitamos
¿vale?
y ya tendríamos esto
ahora sí
se estaría ajustando
cada vez que vamos cambiando
¿ves?
automáticamente se ajusta
esto anteriormente
en el pasado
esto era súper complicado
súper complicado
pero por suerte
esto se ha simplificado
y ahora sí que aparecería
correctamente esto
¿vale?
brujería
si no
menos mal que esto
ha cambiado
vi tu vídeo haciendo Tetris
¿cómo funciona el canvas?
sí así
¿cómo funciona el canvas?
ya está
bueno pues el canvas
es un elemento
HTML más
otra etiqueta más
que te permite
dibujar en él
y que puedes dibujar
lo que quieras
y en planos
en 2D
y en 3D
lo cual es increíble
una etiqueta
que acaba de aparecer
hace poco
y para que veáis
como de potente
pues es HTML
es la etiqueta
Dialog
¿vale?
imaginad que queremos
tener una modal
¿vale?
así que vamos a poner aquí
Dialog
lo vamos a
voy a comentar
este iframe
¿vale?
imaginad que queremos
una etiqueta Dialog
y la etiqueta Dialog
va a ser pues
una modal
y dentro quiero que poner
¿sabías que puedes
abrir una modal
así?
¿vale?
y vamos a tener pues
información
y es totalmente
nativo
fijaos que puedes poner
etiquetas HTML
¿no?
y poner incluso
botones dentro
salir
o cerrar
cerrar modal
cerrar modal
¿vale?
ahora bien
si miramos
este Dialog
aquí no aparece
en ningún sitio
o sea
¿dónde está este Dialog?
bueno
podríamos decirle
que esté abierto
y fíjate que por defecto
cuando le he dicho
que esté abierto
ya me aparece aquí
pero fíjate
que está apareciendo
por encima
del contenido
o sea
está como encima
del contenido
si miramos
¿ves?
no es que ocupe espacio
es que está encima
o sea que te tienes que imaginar
que esto es como
la típica modal
que ponemos cuando
queremos hacer
no sé
cuando abrimos algo
de alguna información
y se abre
¿vale?
con el atributo
Open
obviamente lo ideal
sería que esto
se abriese
cuando le des a un botón
o sea cuando digas
abrir modal
o ver más información
ver más información
ver más información
que cuando alguien
le dé al ver más información
que aparezca la modal
pues esto en realidad
lo podemos hacer
bastante fácil
puedes añadir
etiquetas script
donde quieras
y estas etiquetas script
que añadimos aquí
que normalmente
se añaden
y de hecho lo podemos hacer
¿vale?
normalmente se añaden aquí
en el head
se añaden aquí
y esto lo que te permite
es escribir aquí
javascript
¿vale?
puedes escribir javascript
y esto se ejecuta
y tal
pero aunque no lo sepas
o mejor te resulte raro
lo cierto es que
etiquetas script
puedes poner donde te dé la gana
la puedes poner
justo en el body
dentro
no se va a ver
aquí en medio
y vas a poder utilizarlo
igualmente
entonces lo vamos a hacer
para tener el dialog al lado
y para que lo puedas ver
vamos a poner que el dialog
sea con la id
de identificador de dialog
o vamos a poner
mi
o si
modal
vamos a poner modal
y por otro lado
este botón
vamos a poner
close
close modal
bueno close
vamos a ponerle close
¿vale?
pues lo que podemos hacer
muy rápidamente
con javascript
sería
y esto es lo que muchas veces
tiene html
que html
pues te da
el marcado
pero es javascript
el que te da la interactividad
pero vas a ver
que al utilizar html
nos va a permitir
que en muy pocas líneas de código
podamos darle
esa interactividad
a nuestras etiquetas html
por ejemplo
ahora que tenemos este dialog
que estamos marcando
que es el dialog
que tiene esta modal
que tiene este botón
lo que podemos hacer
es decir
vale
pues mira
voy a poner que este sea
open
¿vale?
open
y ya tendríamos
tres botones
o sea
dos botones
y el dialog
tres identificaciones
lo que podemos hacer
es window.open.atvlistener
y que cuando hacemos clic
abrimos
window.modal.showmodal
y si le damos aquí
no funciona
me ha dejado fatal
a ver
si he puesto
voy a hacer
es que open
puede ser polémico
puede ser que open
si open
es que a lo mejor ya está pillado
y ahora te explico por qué
¿vale?
ahora te explico por qué
showmodal.showmodal
no, esto está bien
vamos a ver que falla
vamos a ver que falla
ya os explico
el truco este
que he hecho pirata
de esto
¿vale?
no puede leer showmodal
ah
porque le llamamos dialog
al final
vale
el problema
vale
ahora sí que funciona
el problema
¿qué está pasando aquí?
¿qué magia oscura es esta?
¿y cómo funciona?
a ver
el tema
y esto es una cosa
para que tengáis en cuenta
¿vale?
para que tengáis en cuenta
el tema
es que cada vez
que añadís
un identificador
en vuestras etiquetas
HTML
cada vez que añadís
añadís una ID
¿vale?
cada vez que haces una ID
te va a crear
te va a crear
una propiedad
en el window
con el nombre
de esa ID
por ejemplo
¿ves que he puesto
window.show?
window.show
se refiere a este botón
entonces le digo
el botón show
que es este
porque tiene este identificador
creo que cuando
escuches el evento
de click
entonces
que muestres la modal
a ver
yo esto
no lo haría
¿vale?
no lo haría normalmente
pero sí que es una cosa
a tener en cuenta
porque hay mucha gente
que abusa
de las identificaciones
y los identificadores
tienen un coste
en javascript
porque lo que va a ocurrir
es que por cada
identificador
que tengas
se va a crear
una propiedad
en el objeto window
esto no lo sabe
mucha gente
y me he encontrado
verdaderas barbaridades
en las que
se crean
ideas constantes
incluso aleatorias
para todos los elementos
y cosas así
entonces que sepáis
que cada vez
que tú tienes un elemento
con un identificador
se crea una propiedad
en el window
que puedes acceder
directamente a ese elemento
así que
puedes hacer
window.show.atmListener
y esto
se refiere a este botón
¿por qué no me funcionaba antes?
porque claro
¿qué pasa?
que le he puesto open
¿y qué pasa con open?
que window.open
es un método nativo
de window
y por lo tanto
ha existido
una colisión
pero bueno
por eso también
hay que tener cuidado
que no existan colisiones
pero en este caso
ya estamos refiriendo
window.show
que es este botón
cuando hacemos clic
que muestre la modal
¿vale?
y ahora para cerrar la modal
pues sería exactamente lo mismo
window.close
claro
el close sería
vamos a ponerle hide
hide.atmListener
cuando hacemos clic
¿vale?
pues window.dialog
punto
y esto sería
hideModal
ah no me acuerdo
no me acuerdo
si es hideModal
o es
ah no es close
close
¿vale?
y ya está
ya tendríamos esto
así
vale
espérate que esto
hide
este sí que lo he puesto aquí
creo que era close
lo he hecho bien esto
a ver
cerrar modal
vamos a ver el error
vamos a ver el error otra vez
ah aquí sí que funciona
no sé por qué aquí no funciona
no sé por qué aquí no funciona
pero funciona
ah ahora sí que funciona
vale
o sea estaba bien
lo que pasa es que no sé por qué no estaba funcionando
pero aquí sí que estaba funcionando
correctamente
bueno pues ya veis que con un poquito de javascript
imaginad si tenéis que hacer esto desde cero
sin el html
y sin nada de esto
¿no?
pues vais a ver que va a ser mucho más complicado
vais a tener que picar un montón de javascript
vais a tener que hacer el html
con muchos dips
con muchas cosas y tal
y esta
este es el mensaje final
que quiero que os quedéis
quiero que os quedéis
con el mensaje
de que html es súper potente
y saber utilizar html
lo que os va a permitir
es que cuando tengáis que hacer javascript
pues seguramente sea un javascript
mucho más sencillo
porque hay cosas
que no tendréis que crear desde cero
también quiero que os quedéis
con el mensaje
de que hacer html semántico
no es difícil
es un tema de interés
y de tener un poquito
de cuidado
fijaos
que al final hemos utilizado
el dip
en muy pocos sitios
y la
la de cosas
y de etiquetas
y elementos
que hemos hecho
solo en este ejemplo
pues ya veis que os puede
volar la cabeza
así que la semana que viene
lo que vamos a hacer
va a ser el curso de css
desde cero
y lo que vamos a hacer
la semana que viene
es estilar todo esto
esto lo hemos dejado
ahora mismo aquí así
vamos a estilarlo todo
vamos a darle forma
a nuestro porfolio
para que quede más bonito
y vamos a ver css
desde cero
partiendo del mismo html
para que tengáis el html
todo esto
mira voy a hacer una cosa
en el discord
vámonos
aquí al html
tenemos un canal
de html
html
este
html css
este de aquí
y os lo dejo
por aquí
vale
os dejo por aquí
el contenido
del curso
para que le deis
cañitas
vale
y así pues lo tenéis
totalmente aquí
y le podéis echar un vistazo
y lo podéis comentar
y os podéis ayudar
y todo esto
así que nada amigos
espero y deseo
que os haya gustado
la clase de html
que hayáis aprendido
algo nuevo
espero que
que de alguna forma
pues que
que os haya llamado
la atención
para que veáis
html al final
en dos horitas
no es que aprendes
todo lo que hay
al final es cuestión
de mirar etiquetas
y probar y tal
pero si sobre todo
que tengáis esa sensibilidad
de intentar
de buscar esa etiqueta
de buscar esos elementos
de entender
los atributos
de como utilizando
html
y describiendo mejor
nuestro contenido
como eso nos puede ayudar
a simplificar nuestro código
y hacer más accesible
para todo el mundo
lo que estamos haciendo
vale
y