guia de brostpas

Creando una página Responsive con Twitter Bootstrap
Creando el menú

DPW-2013

Crearemos una página en la cual se hará uso del framework Bootstrap de Twitter que de este momento
lo abreviaremos como Bootstrap3 ya que nos basaremos en la nueva versión de esta librería que nos
servirá para minimizar las tareas de diseño
Nota: en este caso debemos de tomar en cuenta que debemos estudiar ladocumentación de los componentes y la librería ya que podemos
caer en un gran problema por no saber el comportamiento de esta librería.

Primero debemos descargar las librerías necesarias para la implementación y su uso, buscamos los
componentes en la siguiente dirección
https://github.com/twbs/bootstrap/archive/v3.0.0.zip
Del archivo zip utilizaremos solo los archivos que se encuentran en lacarpeta dist la cual está compuesta
por los siguientes archivos.

Los cuales definen el comportamiento de los elementos, asi como los estilos y skins (temas que se pueden
utilizar para mejorar nuestros diseños de página), además agrega un tipo de fuente que sirve para definir
iconos o sprites que se pueden usar en nuestros diseños.
ESCENARIO.
La empresa “Capsule Corp.” Lo ha contratadopara que diseñe su página web desde 0 para ello se tiene
que apegar a las nuevas tecnologías del mercado actual (HTML5), su empresa de diseño “Ryuzanpaku
Ltd.” A investigado y a verificado cual es la mejor solución para solventar el requisito de la empresa y ha
tomado la decisión de utilizar como herramienta de diseño el boostrap de Twitter.
Su empresa le ha definido la tarea de crear la páginaprincipal del sitio para la empresa Capsule corp.
Apegarse a los siguientes requerimientos.



La página debe de ser adaptable a la mayoría de dispositivos del mercado (PC, Tablet,
Smartphone).
Debe de poseer su menú de navegación adaptable.

Elaborada por Tec. José Antonio Henríquez Chavarría

Creando una página Responsive con Twitter Bootstrap
Creando el menú




DPW-2013Todo el contenido debe ser adaptable y poder ser leído en la mayoría de dispositivos sin ningún
problema.
Manejar iconos que permitan o sugieran elementos de navegación (menús emergentes, cerrar).
Categorizar de forma adecuada los menús, mostrar las categorías principales en la barra de
navegación y en formato de submenú o menú desplegable las opciones de cada categoría.

Entonces acomenzar.
Tarea1.
Cree la página base incluyendo cada uno de las librerías necesarias se le proporciona la carpeta base
“proyecto” la cual posee la librerías necesarias para desarrollar la primera tarea.
1- Cree una página web con nombre index.html dentro de la carpeta proyecto.
a. Abra sublime u otro editor de texto.
b. Cree un nuevo archivo y guárdelo con el nombre index.html dentro dela carpetaproyecto.
c. Agregue el siguiente código a su página.

2- Agregue una meta que nos servirá para definir el comportamiento de adaptabilidad para los
dispositivos (responsive design) y otra para poder usar la página de caracteres UTF-8.
a. Después de la etiqueta agregar lo siguiente.

3- Agregue las referencias a las librerías de estilos del framework.
a. Después de la etiquetas metaagregue la etiqueta link para la referencia de estilos

4- Agregue las referencias a las librerías de js necesarias para la funcionalidad del framework una
de ellas está incluida en el paquete la otra debe descargarla desde el sitio http://jquery.com, la

Elaborada por Tec. José Antonio Henríquez Chavarría

Creando una página Responsive con Twitter Bootstrap
Creando el menú

DPW-2013librería de jquery ya está incluida en los archivos que se le han proporcionado se encuentra
dentro de la carpeta js de la carpeta proyecto.
a. Agregue las siguientes referencias antes de la etiqueta , como parte de las
buenas prácticas de desarrollo los scripts se deben de colocar antes del cierre del
cuerpo del documento web para que no generen errores si no se logran cargar y
entorpezcan el...