Diseño web. Maquetación web

[pic 1][pic 2]

ÍNDICE

ÍNDICE        2

INTRODUCCIÓN        3

DISEÑO WEB        3

MAQUETACIÓN WEB        3

SEMANTICA HTML        4

ESTRUCTURAR CONTENIDO HTML        5

<HEADER>        5

<FOOTER>        5

<NAV>        5

<MAIN>        5

<SECTION>        5

<ARTICLE>        5

<ASIDE>        5

DESARROLLO        6

CONCLUSIÓN        6

BIBLIOGRAFIA:        6

INTRODUCCIÓN

El diseño web en si es la planeación y creación de la parte visual de una página web, desde lo mas general, para luego trasladarlo a código ayudándote de distintas herramientas como la maquetación web, y usando la semántica HTML para tener el mayor orden posible.

DISEÑO WEB

El diseño web es una actividad creativa enfocada en realizar la parte visual de entornos y materiales digitales. Se encarga de layouts e interfaces de plataformas digitales como un sitio web o una App y realiza una configuración visible y funcional para el usuario al distribuir y conceptualizar diversos elementos.

Todo proyecto debe respetar los principios básicos de diseño web para que sea funcional, compatible y vistoso.

El diseño web es útil para la atracción y retención de la atención de los usuarios y visitantes de un sitio web. Además, mediante sus composiciones facilita la navegación en las diferentes partes y páginas de un sitio web.

MAQUETACIÓN WEB

La maquetación web es la transformación del diseño de una web en código HTML, CSS y JS para que los navegadores web puedan interpretarlos y reproducirlos de forma que puedan verse en diferentes dispositivos conectados. Es una parte importante del Front end Development.

Para poder maquetar una página web necesitamos planificar, conceptuar y organizar todo el contenido que queramos incluir en la página web, siempre pensando en el beneficio de la experiencia del usuario.

Para llevar a cabo la maquetación de una web, debemos tener claro que son varios los tipos de maquetación que podemos implementar en nuestra web.

• Maquetación web fija. Este tipo de maquetación te ahorra sorpresas, ya que desde el principio se sabe cómo se va a ver en diferentes dispositivos. A pesar de su nombre, es uno de los modos de maquetar más flexibles.
• Maquetación web elástica. Es uno de los tipos de maquetación web más utilizados para diseñar y estructurar los contenidos de una página web. Tiene un alto grado de escalabilidad y funciona mejor cuando se usan textos que con imágenes.
• Maquetación web escalado. Gracias a este tipo de maquetación se puede modificar la orientación visual de una web, no solo dependiendo del dispositivo con el que se vea, sino que, además, permite una variación basada en la posición en la que tengamos el dispositivo que estamos usando.
• Maquetación web híbrida. En este tipo de maquetación lo que se hace es utilizar todas las anteriores para conseguir un equilibrio que se adapte a las necesidades del proyecto.

SEMANTICA HTML

El HTML semántico, también conocido como marcado semántico, engloba las etiquetas HTML que transmiten el significado (o semántica) de su contenido.

Al añadir etiquetas HTML semánticas a tus páginas, proporcionas información adicional a los buscadores sobre la funcionalidad e importancia de las secciones de tus páginas.

(A diferencia del HTML no semántico, que utiliza etiquetas que no transmiten directamente su significado).

[pic 3]

ESTRUCTURAR CONTENIDO HTML

Para estructurar el contenido de una página no hay una metodología exacta, ya que depende completamente de lo que se este buscando, sin embargo, sí que hay elementos estandarizados que nos facilitan la tarea de estructurar nuestras páginas web, como son las etiquetas semánticas de HTML, como, por ejemplo: <header>, <main>, <footer>, <article>, etc.

...