Jonathan Garcia Centurion
Valencia Jahaira
Javi Johan Rodríguez Giraldo
¿Qué estructura tendremos que crear en nuestro header? Vamos a analizar el diseño en Figma para determinar las etiquetas que necesitamos en el archivo HTML del proyecto en curso.
Cómo hacer la maquetación en Figma
Lo primero es crear una etiqueta img dentro del header para el logo. Luego un contenedor div que contenga:
Tendríamos un código así:
<header> <img src="" alt=""> <div> <h1>La próxima revolución en el intercambio de criptomonedas</h1> <p>Batatabit te ayuda a navegar entre los diferentes precios y tendencias.</p> <a href="">Conoce nuestros planes <span></span></a> </div> </header>
El siguiente paso es aplicar clases para llamarlas desde CSS y empezar a aplicar estilos.
Contribución creada por: José Miguel Veintimilla (Platzi Contributor).
Jonathan Garcia Centurion
Valencia Jahaira
Javi Johan Rodríguez Giraldo
Carlos Javier Bazan Huaman
Axel Yaguana
Team PlatziVictor Andres Castillo Zambrano
Obed Paz
Victor Andres Castillo Zambrano
Percy Buendia
Iván Arcos
DANIEL FERNANDO GRANADOS REY
Efraín Hernández García
Ignacio Basilio
Juan Christopher
Reynaldo Francisco Moreno Briceño
emanuel
Juan Christopher
Juan Jiménez
Jairo Alberto Perez Guerrero
Roger Carlos Ariel Alba
Rodrigo Rodriguez
José Rafael Hernández Barboza
Fredy Reyes
Magalí Acevedo
Nerio José Balza Durán
German Enrique Ceballos Garcia
Jesús Andrés Monge Loor
Jose Luis Grande Acevedo
Jose Luis Grande Acevedo
Alejandra Hincapie
Jose Luis Grande Acevedo
Luis Martín
Leandro Cosme Tomassini
Leonardo Esteban Omeara Garzon
Carlos Eduardo Gomez García
Gerardo Castillo
Johan Echeverri
Israel Gutierrez
Jhon Alexander Mondragon Trinidad
Aldo Miguel Ortiz Parodi
Anfernee Valera
para agilizar el trabajo al momento de poner los textos de figma, con darle click al texto al lado derecho tenemos la opción de copy en content.
¡Gracias! :)
Me ahorraste 10 segundos de escritura. Eres un héroe sin capa jaja
solo un H1 por pagina, eso no sabia, buen dato.
Exacto, es por SEO. Además, se recomienda que no tenga más de 50 o 60 caracteres.
yo tambien me sorprendi
Para los que estamos trabajando con Git y GitHub, y aun tienen dudas acerca de la mala practica de subir archivos binarios al repo, les dejo este enlace que me ayudo a entender cuando NUNCA subirlos, y cuando no hay problema en subirlos.
--
En este caso concluyo que no hay problema, ya que nuestros SVG pesan NADA y ademas no es un proyecto que vamos a estar cambiando mucho en el futuro. Lo que podemos hacer es crear un archivo .gitignore ignorando todos los tipos de imagenes, asi git los ignora y no los commiteamos, pero si podemos subirlos al repo remoto directamente desde GitHub.
muchisimas gracias
Es correcto que el gitignore es importante para no versionar las imágenes y no aumentar el peso en nuestro repo. Sin embargo es mejor tener las imágenes siempre fuera de nuestro repo en un servidor y llamarlas a través de su link. Esto es una buena práctica y se explica en el curso de git y github
Para ahorrar tiempo, les dejo un ejemplo de lo que hace Emmet en VSCode y el link para más trucos
<header> img>div>h1+p+a>span </header>
En la primera parte debes hacer una correcion...
<header> img+div>h1+p+a>span <header>
Tremendo trucazo para ahorrar tiempo
Aqui tienen todo y la imagen en un URL para los que estemos usando GitHub! <3
<header> <img src="https://i.postimg.cc/5yRRYxRd/logotipo-vertical.png" alt=""> <div> <h1>La próxima revolución en el intercambio de criptomonedas.</h1> <p>Batatabit te ayuda a navegar entre los diferentes precios y tendencias.</p> </div> <a href="">Conoce Nuestros Planes <span>i</span></a> </header>```
Gracias, por el aporte.
Para una mejor semantica, la etiqueta "img", debe ir dentro de una etiqueta "figure" asi.
<figure> <img src=" " alt=" "/> </figure>
Buen aporte!
Buen Aporte.
Composición de header:
Código de header:
<img src="" alt="" /> <div> <h1></h1> <p></p> <a href=""><span></span></a> </div>
Saludos, ¿La etiqueta img no debería estar en una etiqueta picture como fue enseñado en el curso definitivo de html y css? y si no es asi ¿Cuándo debería utilizar la etiqueta picture y cuando no?
Hola,
Tanto picture como figure son más de valor semántico, así que es una muy buena práctica más no obligatorio.
Aquí te dejo una lectura acerca de picture
Saludos
Tengo la misma pregunta y la misma duda , ya que como dices en el curso definitivo de html y css se recomienda embeber el img en picture como una buena practica .
Para que solo copien y peguen el texto del (h1, p y a) del header :).
Gracias
En el inspector de elementos de figma, se puede copiar el texto.
<a href=''></a>, nos permiten utilizar su atributo href para navegar entre las diferentes secciones.<span></span>, es una etiqueta comodin que podemos utilizarla para incluir iconos.<h1> por temas de SEO.Gracias por el resumen crack! 💚
Por buenas prácticas cualquier página, pantalla solo puede tener un h1 por temas de SEO. El ícono lo meteremos dentro de la etiqueta span, es una etiqueta comodín que nos ayuda justo para ese tipo de textos o iconos que incluso van adentro de una etiqueta.
<a href="">Conoce Nuestros Planes <span></span></a>```
¿Qué es SEO?, ya que Diego mencionó que por temas de SEO solo puede ir un h1.
hola. es el posicionamiento en buscadores; los motores de búsqueda posicionan mejor a las paginas que, entre otras muchas cosas, cumplen con las reglas de semántica. el h1 es como el titulo del libro, solo debe haber uno. Curso de Buenas Prácticas de SEO
muchas gracias por la explicación :D
No es mejor poner el logo en svg? pesaría mucho menos.
Si, yo creí lo mismo seria mucho mas liviana en formato .svg.
¿En que casos es mejor envolver la etiqueta <img> en <figure>? pregunto esto ya que en cursos pasados el profesor hacia mucho enfasis en usar html semantico sin embargo durante los cursos en varias imágenes solo utiliza la etiqueta <img>,
Cuando necesitas SEO, por ejemplo, si una imagen es muy importante para tu texto, lo mejor es que la envuelvas en una etiqueta <figure> porque incluso hasta le puedes poner un pie de página usando <figcaption>, un ejemplo claro son las imágenes que salen en Wikipedia :D
Adicionalmente puedes envolver la etiqueta
con su respectiva etiqueta <picture> para incluir distintas versiones de la imagen... y todo dentro de si lo deseasMauqetacion del Header
<header> <img src="" alt=""> <div> <h2>La próxima revolución en el intercambio de criptomonedas.</h2> <p>Batatabit te ayuda a navegar entre los diferentes precios y tendencias.</p> <a href="">Conoce Nuestros Planes <span>i</span></a> </div> </header>
Aquí es donde vemos más el uso del div, si no llevas toda la.vida usandolo, para mí que nunca lo había usado se.usa más como etiqueta contenedora que por defecto tiene display block
Como buena practica se recomienda comentar el código, esto facilita la comunicación con el equipo ya que tus compañeros no perderán el tiempo preguntándote para la funciona del código.
El botón lo vas a usar cuando quieras ese efecto de presionar, sino puedes usar un <a> o un <div>.
A la hora de Maquetar una de las manera que tenemos, es separar el contenido en etiquetas contenedoras.
La imagen va junto al texto? ¿Tienen relación? se puede tomar esto como una de las tantas maneras para poder dar forma al código.
Esto ayudará cuando se apliquen estilos para hacer un display, por ejemplo con flexbox, es necesario aplicarle a un padre el display flex para que sus hijos se vuelvan item flexibles, y poder manipularlos con facilidad.