Diseño Web de Una Tienda Virtual Con Twitter Bootstrap

DISEÑO WEB DE UNA TIENDA VIRTUAL TWITTERBOOTSTRAP

1. Como primer paso debemos descargar de la dirección http://getbootstrap.com

2. Descomprimir la carpeta que se descargó y renombrarla con un nombre deseado o de su preferencia, con un editor de texto como bloc de notas o para hacerlos especializado en el diseño web podemos usar dreanweaver o notepad++ en este caso usaremos notepad++ por su ligereza. Abrimos el notepad++ y creamos un archivo en blanco que lo guardaremos como index.html o cualquier otro nombre siempre con la extensión .HTML, dentro de la carpeta que descargaste guarda este archivo índex, vale recalcar que no importa si es .php solo deberá estar dentro de un servidor apache, el HTML puede correr sin necesidad de apache. Cuando ya hayas creado tu documento en blanco puede empezar a probar al diseño ya creado por bootstrap. Hagamos la prueba para un esquema base de la estructura de una página HTML. Primero copiemos el HTML témplate que tiene bootstrap.

Copiamos el código HTML que está en el recuadro rojo y lo pegamos en nuestro archivo en blanco lo guardamos y lo abrimos desde el navegador. Ver las imágenes siguientes.

Este será nuestro hola mundo en twitter bootstrap, ágamos cambios, agreguemos por ejemplo una barra de menú.

Para agregar la barra de menú, debemos irnos a la sección de componentes y seleccionar la opción navbar y veras barras de navegación básica y profesional, agreguemos una barra de navegación básica.

Copiamos el código HTML del recuadro rojo y lo pegamos dentro del body de nuestro témplate HTML.

Ahora nuestro código ha crecido y si nos fijamos solo fue necesario copiar el código. Aquí fácilmente podemos editar los nombre de la barra de navegación o agregar más ítems, ahora veamos como quedo nuestro ejercicio, veamos el navegador y actualicemos la página con f5.

Podemos ver que se ha creado una barra de menú con estilo minimalista y bonito, si deseas más estilos de barras de navegación, puedes seguir buscando dentro de la página de bootstrap y seleccionar los elementos que necesites. Un ejemplo.

Ahora que pasaría si queremos agregar más elementos como una barra lateral o sidebar y contenidos principales al centro de sitio web, deberemos agregar un contenedor para estos que permita la fluidez des los elementos del sitio y se adapte a la resolución del navegador o pantalla. Para esto podemos agregar algo llamado container-fluid, veamos la imagen.

Copiamos el código continuo a la barra de menú siempre dentro del body, y editamos como veremos a continuación.

De esta forma estaremos creando un contenedor y una fila que se adapte a los cambios según se vayan agregando elementos o contenido a las secciones. Ahora como creamos el sidebar y el área de contenidos principal debemos usara algo llamado span que los da bootstrap, creamos un span 3 y un span 9 para el sidebar y el contenido, estos span son clases del css prediseñado. Veamos cómo quedaría nuestro código con los span.

Agregamos el sidebar.

Para agregar nuestro sidebar, debemos agregar siempre un div que le indique al navegador que esa será una barra lateral, y creamos un listado de ítems que podrían ser categorías o lista de productos, o cualquier otra opción, ese listado que aparece en la imagen fue tomado de:

En el recuadro rosado está indicado el código usado para nuestro listado del sidebar, ahora vemos nuestro sitio web demos en actualizar.

Vemos que nos aparece un listado ya con estilo y contenido, el contenido del listado puede ser editado desde el código HTML, las clases del css si no deben ser tocadas.

Agreguemos un área de contenido principal.

Copiamos el código que nos muestra la imagen en el recuadro morado, y pegamos en nuestro archivo de prueba, deberá pegarse dentro de nuestro espa9 que es el que hace referencia a nuestra área de contenido. Vemos la siguiente imagen.

Hora siguiendo el ejemplo que fuese una tienda virtual y deseáramos agregar ítems de productos deberemos agregar una fila que nos permita fluidez en lo ítems (row-fluid), agregarlos después del hero-unit.

Ahora dentro de esta fila podemos agregar los ítems, un span4 nos permitirá dividir este contendor en 3 o 4 partes según el espacio que necesiten los ítems. Ver la imagen.

Si nos fijamos solo fue necesario digitar el HTML de los h3 los párrafos y vínculos y gracias a las clases prediseñadas de bootstrap logramos crear un pequeño bosquejo de un sitio muy amigable y vistoso.

En la sección del base CSS puedes encontrar la tipografía o tipos de letras que usa bootstrap para que se te haga más fácil usar las clases, además de mostrarte las diferentes formas de imagen que puedes colocar, tablas diseñadas de forma amigable y minimalista, formulario, y hasta animaciones java script.

Como último detalle que te parecería que cuando damos clic en la opción leer más apareciera un ventana flotante sobre el sitio que te mostrara todos los detalles del producto, veamos cómo hacer, primero debemos ir a la sección de JavaScript de bootstrap. Para agregar estas funciones JavaScript debes tener agregado el archivo base de JavaScript.

Usamos un modal para crear nuestra ventana flotante.

Copemos el código de recuadro morado y peguémoslo como se muestra en la siguiente imagen.

Actualicemos nuestro navegador y damos clic en leer más del producto que tenemos.

Veamos lo que pasa.

Ahora que ya conoces como trabajar con esta herramienta, puedes empezar a probar con tus ideas para crear un sitio web o tienda virtual totalmente minimalista y vistosa.

TAREA: Crea un sitio web como el siguiente, el estilo debe ser como este pero usted debe agregar una lista de posibles categorías y menús que tenga la tienda virtual, deberá agregar 3 productos por cada categoría que desee, y 4 categorías de productos. Puede agregar más detalles si lo desea.