DESARROLLO WEB (IS-454) UNSCH 2015

Laboratorio N 02:Maquetacin Web con Bootstrap

1. OBJETIVOS: Afianzar al estudiante la construccin de la maquetacin web usando el framework bootstrap. Afianzar en el estudiante conocimientos sobre sistema de rejilla. Realizar una primera interaccin responsive design para mviles, tabletas y desktops.

2. Conceptos TericosSistema de Rejilla: Bootstrap incluye responsive design nativament, un modelo fluido para mviles escalado apropiadamente en 12 columnas. El sistema de rejilla esta formado por contenedores flotantes divididos en filas y columnas con soporte a media querys.

El sistema de rejilla trabaja para mltiples dispositivos segn la siguiente definicin.Extra small devicesPhones (Hola,Bootstrap!

Sistema rejilla 12 columnasdiv{border:1pxsolid}datosdepruebadatosdepruebadatosdeprueba
datosdepruebadatosdepruebadatosdepruebadatosdepruebadatosdepruebadatosdeprueba

Columnas responsive design div{ border:1pxsolid }datosdepruebadatosdepruebadatosdeprueba

Columnas Offset: Agrega columnas en blanco a la izquierda sin solapamiento

div{border:1pxsolid}

datosdepruebadatosdepruebadatosdeprueba

Columnas push pull : push agrega columnas en blanco a la izquierda, pull agrega columnas en blanco a la derecha con solapamientodiv{border:1pxsolid}pruebaizquierdapruebaderecha

Rejillas Anidadas

div{border:1pxsolid}datosdepruebadatosdeprueba

datosdepruebadatosdeprueba

Tablas Bsicas

IDNOMBREAPELLIDOS1RichardZapataCasaverde2CarlosPerezPerex3PabloGuerraCastillo

Tablas Responsive IDNOMBREAPELLIDOS1RichardZapataCasaverde2CarlosPerezPerex3PabloGuerraCastillo

Formas Verticales

EmailaddressPasswordFileinputExampleblock-levelhelptexthere.CheckmeoutSubmit

Formas Horizontales

EmailPasswordRemembermeSignin

Practica 1

Maqueta Desktop

Maqueta Tablet

Maqueta Celular

Trabajo Grupal: Desarrollar una maqueta web para un sistema de comercio electrnico, debe incluir 5 pginas web como mnimo

Ayuda en http://getbootstrap.com

Probar la aplicacin y manos a la obra!!!

ING. RICHARD ZAPATA CASAVERDE