6563184
Description
Mind Map by Ing Carmine, updated more than 1 year ago
|
Created by Ing Carmine
over 7 years ago
|
|
Maquetación semantica en
HTML5
- La etiqueta <BODY>
- Nuevas etiquetas con modelo semantico
- En HTML4 solo se usaba el contenedor genérico <div>
- Gracias al modelo semántico los buscadores son mas eficientes
- Esto aumenta lo llamado "Dimensión social de internet"
- Esto aumenta lo llamado "Dimensión social de internet"
- Nuevas etiquetas con modelo semantico
- Wireframing
- El maquetamiento básico contesta de "Estructura HTML" y "Diseño y colocación de CSS"
- ¿Que es?
- Básicamente un boceto o esquema de nuestra pagina web
- Que en un principio puede o no tener todos los elementos que pensamos
- El objetivo de esto es identificar los principales elementos de nuestra página
- Identificamos una estructura jerarquica implícita
- En base a esto sabremos que etiquetas usar y donde
- En base a esto sabremos que etiquetas usar y donde
- Identificamos una estructura jerarquica implícita
- Que en un principio puede o no tener todos los elementos que pensamos
- Básicamente un boceto o esquema de nuestra pagina web
- El maquetamiento básico contesta de "Estructura HTML" y "Diseño y colocación de CSS"
- La etiqueta <HEADER>
- Su función semantica es delimitar el encabezado de la pagina
- Normalmente se suele incluir el titulo, una imagen destacada o algo importante
- Normalmente se suele incluir el titulo, una imagen destacada o algo importante
- Su función semantica es delimitar el encabezado de la pagina
- Titulos <H1>, <H2>, etc.
- Generalmente usado para poner el titulo de la página junto con el encebzado
- De <H1> a <H6> se va reduciendo el impacto e importancia de estos.
- No es necesario ocupar todos los <H...>, aunque por lo regular con el <H1> es suficiente
- No es necesario ocupar todos los <H...>, aunque por lo regular con el <H1> es suficiente
- De <H1> a <H6> se va reduciendo el impacto e importancia de estos.
- Generalmente usado para poner el titulo de la página junto con el encebzado
- Etiqueta <NAV>
- Delimita los menús de navegación
- Esta etiqueta no nos limita a solo usar listas como menú, pero es lo recomendable
- Esta etiqueta no nos limita a solo usar listas como menú, pero es lo recomendable
- Delimita los menús de navegación
- Etiqueta <MAIN>
- Aumenta la accesibilidad de la página
- Aumenta la accesibilidad de la página
- Etiqueta < ARTICLE>
- Delimita una unidad independiente de contenido
- Delimita una unidad independiente de contenido
- Etiqueta <SECTION>
- Hace referencia a una parte del <ARTICLE>
- En resumen, son los apartados y subapartados de un artículo
- En resumen, son los apartados y subapartados de un artículo
- Hace referencia a una parte del <ARTICLE>
- Etiqueta <ASIDE>
- Se podrian considerar como contenidos "Relacionados" a nuestra pagina principal
- Se podrian considerar como contenidos "Relacionados" a nuestra pagina principal
- Etiqueta <FOOTER>
- Permite incluir información adicional depediendo del lugar donde este
- Permite incluir información adicional depediendo del lugar donde este
- Etiqueta <DIV<
- Como ya se habia dicho, hace referencia a un contenedor Genérico
- Cuando nuestro contenido no caiga sobre algúna otra etiqueta semántica
- Cuando nuestro contenido no caiga sobre algúna otra etiqueta semántica
- Se puede usar para aplicar un estilo CSS en particular
- Tambien usado para englobar varios elementos
- Como ya se habia dicho, hace referencia a un contenedor Genérico
- Errores comunes
- Utilizar mas de un <HEADER> o uso excesivo de la etiqueta
- Usar el contenedor <DIV> cuando hay una etiqueta semántica destinada
- Utilizar mas de un <HEADER> o uso excesivo de la etiqueta
Want to create your own Mind Maps for free with GoConqr? Learn more.