Curso HTML5 y CSS3 [Parte 1]

[youtube]https://www.youtube.com/watch?v=f1P4ZDRVeMI[/youtube]

Bueno hoy empezaremos con nuestro curso de HTML5 y CSS3, antes que nada quiero aclarar que yo recién empiezo a utilizar HTML5 y CSS3 asi que si me equivoco en algo, por favor dejenme un comentario para corregirlo.

 

Nota: Para ver el video ir hasta la parte inferior de la entrada o click aqui

Bien antes de abrir nuestro editor de textos preferido y empezar a maquetar o escribir código, lo primero que vamos a hacer es hacer un boceto de como es que queremos que se muestre el contenido de nuestro sitio, no tiene que ser algo muy específico con colores, imágenes, etc, etc, simplemente vamos a hacer un boceto que tomaremos como base para ir maquetando nuestro sitio.

Bueno, lo primero que hay que decidir sera la estructura que tendra nuestra plantilla que haremos, la estructura básica de un sitio es la siguiente:

Estructura básica
1. Estructura básica

Elementos de la Estructura

  • Encabezado: En esta sección se puede ubicar el logo y nombre del sitio.
  • Menú: Este es el menú de navegación principal del sitio.
  • Contenido: Aqui aparecerá el contenido del sitio, imagenes, artículos, videos, etc.
  • Pie de página: Aqui se suele poner información referente al copyright, el mapa del sitio entre otras cosas.

Bueno esta es la estructura básica del sitio que vamos a hacer, pero ahora nos falta decidir como distribuir el espacio del contenido, ya que existen 3 maneras de hacerlo, la primera es como se muentra en la estructura básica, es decir, tomar todo el espacio para el contenido del sitio, otra opcion es usar barras laterales como se muentra en las siguientes imágenes:

Estructura con barra laterial izquierda
2. Estructura con barra laterial izquierda
Estructura con barra lateral derecha
3. Estructura con barra lateral derecha
Estructura con barras laterales
4. Estructura con dos barras laterales

Distribución del Espacio

  • Barra lateral: En este espacio pueden ponerse formularios de inicio de sesion, publicidad, articulos recientes, enlaces a sitios recomendados, etc, etc.
  • Contenido: Aqui irá el contenido principal del sitio, es decir, los artículos que redactemos, información sobre los productos o servicios que ofrecemos, etc, etc.

La estructura que utilizaremos para el sitio que construiremos para este curso sera la que tiene barra lateral derecha (Imagen 3), si tu quieres hacer alguna de las otras dos opciones (barra lateral izquierda o dos barras) no te preocupes, el procedimiento es el mismo, solo cambian unos valores, incluso me parece buena idea que construyas la estructura que elegimos para el curso y practiques construyendo las otras dos también una ves que termines la que usaremos nosotros.

Bien, ahora que ya decidimos la estructura que usaremos hay que definir los elementos que deseamos mostrar y su posicion, recordando que es un boceto, puede no ser el mismo que tendremos al final.

En este caso yo he optado por la siguiente configuración de elementos.

Estructura a construir durante el curso
5. Estructura a construir durante el curso

Bien, con esto hemos terminado la primera parte de nuestro curso de HTML5 y CSS3, hagan su boceto, no es necesario que lo hagan en editores de imágenes, puede ser a papel y lápiz, de esta forma lo pueden tener a la mano cuando comencemos a maquetar nuestro sitio.

Sin más por el momento me despido, los espero en la próxima entrega de este curso de HTML5 y CSS3.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

÷ 1 = 5