Entradas de] admin

Maquetación Semántica

HTML 5 nos brinda una variedad de nuevas etiquetas que combinadas con la utilización de CSS nos permite crear estructuras más inteligentes y ordenadas.

La maquetación consta de dos etapas: la primera se realiza sólo con HTML 5 y se trata de crear una estructura de etiquetas para albergar todo el contenido y las distintas secciones. La segunda etapa se realiza sólo con CSS, y consiste en darle a la página el aspecto visual que queramos así como determinar la colocación en pantalla de todos los elementos.

Una de las novedades de HTML 5 es que permite una maquetación semántica gracias a sus nuevas etiquetas. ¿Qué es maquetación semántica? Significa que las etiquetas, pese a comportarse de la misma forma, significan cosas diferentes.

En versiones anteriores de HTML sólo había una etiqueta “contenedor” básica: <div>. Un menú, un artículo, un banner, una foto… Se enmarcaban dentro de la etiqueta <div> en casi todos los casos. Era muy cómodo de aprender, pero muy difícil de procesar con programas u otras páginas web.

Piensa en cuando compartes contenido en Twitter, Facebook o Google+, éstos automáticamente reconocen el texto del artículo e ignoran los menús de la página, seleccionan una foto para ilustrar el artículo y suelen acertar con cuál elegir, generan una descripción corta… Todo eso es posible porque en las páginas que compartes se utiliza probablemente una maquetación semántica junto con otras técnicas.

En otras palabras, la maquetación semántica aumenta la dimensión social de Internet. Y desde el punto de vista técnico, es más fácil leer y entender un código con etiquetas que tienen significado que no un batiburrillo de etiquetas <div> sin sentido alguno.

Conceptos AQUI

  • <header>: Usada para contener el encabezado.

  • <footer>: Contiene el pie de página del sitio.

  • <main>: Define el bloque central de contenidos del sitio.
  • <nav>: Contiene las funciones de navegabilidad.

  • <article>: Contiene una pieza de contenido independiente, como una noticia.

  • <section>: Utilizada para agrupar diferentes articulos o sub grupos de elementos, o definir una sección.

  • <aside>: Define un bloque lateral del main.

Wireframe

Un website wireframe, también conocido como un esquema de página o plano de pantalla, es una guía visual que representa el esqueleto o estructura visual de un sitio web.

El wireframe esquematiza el diseño de página u ordenamiento del contenido del sitio web, incluyendo elementos de la interfaz y sistemas de navegación, y cómo funcionan en conjunto.

Usualmente este esquema carece de estilo tipográfico, color o aplicaciones gráficas, ya que su principal objetivo reside en la funcionalidad, comportamiento y jerarquía de contenidos. En otras palabras, se enfoca en “qué hace la pantalla, no cómo se ve.”

Los esquemas pueden ser dibujados con lápiz y papel o esquemas en una pizarra, o pueden ser producidos con medios de diseño de aplicaciones de software libre o comerciales.

Grilla de 12 columnas

Dominio

https://nic.ar/

https://www.freenom.com/

https://ar.godaddy.com/domains

 

WHOIS:

https://lookup.icann.org/

https://nic.ar/whois

https://www.whoisdominio.com/