WorkShop Básico – Página de libros

La maquetación web ha crecido tanto en los últimos años para dejar el uso de imágenes en diseño a un lado. Pero los aprendices actuales es muy común quedarse estancado en este proceso; ya que en las instituciones educativas o entes de aprendizaje están dejando atrás la enseñanza de practicas antiguas con el Colocar una imagen de colocar sólido y bordes redondeados para darle estilo a una caja de búsqueda, y ahora con solo aplicar una propiedad de CSS3 ya lo hacemos.

La importancia del NO hacer este tipo de practicas, es que ayuda al rendimiento del sitio web. Se sabe que el navegador descarga los archivos de manera temporal (en la cache) para poder tener una visualización del sitio web. Por ende mientras menos imágenes usemos para el diseño del mismo más rápido se ejecutaran los procesos requeridos.

Ahora, el diseño que haremos en este workshop sera básico, es decir solo sera un maquetado el cual podrá ser mejorado después, ya se por un vídeo más o por su preferencia.

En el primer vídeo haremos el marcado estructurado por parte del HTML, tomando en cuenta la guía de una captura de pantalla que se mostrará a continuación.

pagina_mitad1 pagina_mitad2

Si denotan bien el diseño consta de:

1 encabezado cuyo dentro tiene un Logo, un Buscador interno, y un Menú de navegación. 1 imagen simulando una galería o “slider” con unos botones para mover la galería y comprar un libro. Un contenido divido en dos, los cuales son artículos y artículos relacionados o agregados recientemente. Un pie de página con “Widget’s” los cuales contienen enlaces de libros por diferente categorías, un menú de navegación puede ser diferente al principal o el mismo, y la información legal de nuestro sitio web.

A continuación el código HTML.

A continuación código CSS

Tutorial parte I

Tutorial parte II

Descarga las imágenes dando Click Aquí

Descargar fuente personalizada Click Aquí.