DISEO WEB DE UNA TIENDA VIRTUAL

TWITTERBOOTSTRAP

1. Como primer paso debemos descargar de la direccin 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 diseo 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 extensin .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 diseo ya creado por bootstrap.
Hagamos la prueba para un esquema base de la estructura de una pgina HTML.
Primero copiemos el HTML tmplate que tiene bootstrap.

Copiamos el cdigo 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 imgenes 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 seccin de componentes y seleccionar la opcin navbar y veras barras
de navegacin bsica y profesional, agreguemos una barra de navegacin bsica.

Copiamos el cdigo HTML del recuadro rojo y lo pegamos dentro del body de nuestro tmplate HTML.

Ahora nuestro cdigo ha crecido y si nos fijamos solo fue necesario copiar el cdigo. Aqu fcilmente podemos editar los
nombre de la barra de navegacin o agregar ms tems, ahora veamos como quedo nuestro ejercicio, veamos el
navegador y actualicemos la pgina con f5.

Podemos ver que se ha creado una barra de men con estilo minimalista y bonito, si deseas ms estilos de barras de
navegacin, puedes seguir buscando dentro de la pgina de bootstrap y seleccionar los elementos que necesites.
Un ejemplo.

Ahora que pasara si queremos agregar ms 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 resolucin del navegador o pantalla. Para esto podemos agregar algo llamado container-fluid, veamos la
imagen.

Copiamos el cdigo continuo a la barra de men siempre dentro del body, y editamos como veremos a continuacin.

De esta forma estaremos creando un contenedor y una fila que se adapte a los cambios segn 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 prediseado. Veamos cmo
quedara nuestro cdigo 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 podran ser categoras o lista de productos, o cualquier otra opcin, ese
listado que aparece en la imagen fue tomado de:

En el recuadro rosado est indicado el cdigo 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 cdigo
HTML, las clases del css si no deben ser tocadas.

Agreguemos un rea de contenido principal.

Copiamos el cdigo 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 deseramos agregar tems de productos deberemos agregar
una fila que nos permita fluidez en lo tems (row-fluid), agregarlos despus del hero-unit.

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

Si nos fijamos solo fue necesario digitar el HTML de los h3 los prrafos y vnculos y gracias a las clases prediseadas de
bootstrap logramos crear un pequeo bosquejo de un sitio muy amigable y vistoso.

En la seccin del base CSS puedes encontrar la tipografa o tipos de letras que usa bootstrap para que se te haga ms
fcil usar las clases, adems de mostrarte las diferentes formas de imagen que puedes colocar, tablas diseadas de
forma amigable y minimalista, formulario, y hasta animaciones java script.

Como ltimo detalle que te parecera que cuando damos clic en la opcin leer ms apareciera un ventana flotante sobre
el sitio que te mostrara todos los detalles del producto, veamos cmo hacer, primero debemos ir a la seccin 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 cdigo de recuadro morado y pegumoslo como se muestra en la siguiente imagen.

Actualicemos nuestro navegador y damos clic en leer ms 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 categoras y mens que tenga la tienda virtual,
deber agregar 3 productos por cada categora que desee, y 4 categoras de productos. Puede agregar ms detalles si lo desea.