Maquetación Web: Preparando la barra de navegación

HTML5, CSS3, .js: Maquetando la barra de navegación

En la entrada anterior hicimos un repaso general sobre algunas etiquetas html y propiedades css vistas en clases con las que generamos algunos diseños preliminares para nuestra página web, usando las etiquetas header, div y footer, entre otras; toca el turno ahora de crear un barra de navegación (menu) para nuestro sitio para lo cual partiremos de los siguientes supuestos y condiciones:

Lunes, 22 Agosto 2016 11:28

Introducción a la maquetación web (ii)

Primeros contenedores en html

Diseñando una página web: Primeros estilos y contenedores

En una entrada anterior vimos las etiquetas básicas necesarias en la creación de una página web vacía; continuaremos ahora con la creación de los primeros contenedores (html) y los primeros estilos (css) para dar estructura a los primeros contenidos y elementos de navegación y diseño de nuestra página web.

Visualmente, lograremos algo similar a lo que vemos en la siguiente imagen:

Lunes, 22 Agosto 2016 09:35

Introducción a la maquetación web (i)

Cabezal art. Introducción a la maquetación web

Conceptos básicos: Códigos de una página en blanco

Antes de comenzar con la codificación necesaria para la maquetación de una página web, debemos entender cual es la estructura básica de un documento html vacío. - Lectura recomendada: Introducción al HTML y CSS (i)

Así, todo documento comienza con una declaración que indicará de qué tipo de documento se trata; para un documento HTML5, esta declaración se reduce al código correspondiente a la línea 1 del siguiente código:

Mobirise

Diseño web (casi) sin códigos

Hace ya un tiempo descubrí Mobirise, una aplicación de escritorio gratuita, desarrollada para Windows y Mac, que permite crear sitios web páginas web responsivas de forma visual, generando de forma automática los códigos necesarios.

Algunos componentes de ejemplo en HTML5 y CSS3

Construyendo con HTML5 y CSS3

Esta lista de códigos de ejemplo son un complementario a los apuntes y tutoriales sobre diseño web, algunos ejemplos de maquetación de distintos componentes estructurales, visuales y de navegación utilizando HTML5 y CSS3. Bajo el entendido de que se trata de material de apoyo para estudiantes iniciales de diseño los ejemplos se irán publicando en la medida de que las consultas y el desarrollo de las clases lo vayan requiriendo.