desarrolloweb bootstrap

DESARROLLO WEBBOOTSTRAP

QUIENES SOMOSGERARDO MORALES Diseador Grfico especialista en desarrollo front-end Actualmente trabaja en Digital Bond, agencia especializada en campaas de marketing digital en donde desarrolla sitios web.

RODRIGO ACEVEDO Comunicador Multimedia, desarrollador web Se desempea como director Digital de EspinacaBWF, donde estratgicamente lidera campaas de marketing digital.

TEMASHTML para principiantes

Bootstrap

HTMLUN REPASO RPIDO A HTML

DESDE EL COMIENZO

Es un lenguaje para la elaboracin de sitios web, se caracteriza por utilizar una estructura y sintaxis simple.

SINTAXIS

Hola Workshop Digital

Etiqueta que abre

Etiqueta que cierra

Elemento P

SINTAXIS


Atributo

Valor

Atributo

Valor

SINTAXIS


Elemento tiene en su interior un

SINTAXIS


Elemento

Elemento

ESTRUCTURA

HEAD

TITLE

BODY

P

Sitio de ejemplo

Texto de ejemplo

TAGS RECURRENTESDa a da utilizamos etiquetas en html que se repiten continuamente

Ttulos

Cajas

Textos e imgenes

h1, h2, h3, h4, h5, h6

div

p, a, strong, em e img

Listas ul y ol

li

TAGS RECURRENTESDa a da utilizamos etiquetas en html que se repiten continuamente

Formularios input, textarea, label

TALLER #1Identifica los elementos de tu diseo.

Tiempo: 20 minutos

BOOTSTRAP

Twitter Bootstrap es un framework para diseo de sitios y aplicaciones web basado en HTML y CSS.

VENTAJAS

Utiliza un conjunto de buenas prcticas.

Utiliza HTML5 y CSS3.

Utiliza una grilla de 12 columnas.

Es una herramientas sencilla y gil para

construir sitios web e interfaces.

PLANTILLA BSICA

GRID SYSTEM

GRID SYSTEMContenedor de columnas fijo

CONTENEDOR FIJO

GRID SYSTEMContenedor de columnas fluido

CONTENEDOR FLUIDO

GRID SYSTEMEjemplos de columnas

.col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1


.col-md-8 .col-md-4


.col-md-4 .col-md-4 .col-md-4


.col-md-6 .col-md-6

GRID SYSTEMEjemplo de grillas

TALLER #2Identifica las columnas de tu diseo.

Tiempo: 30 minutos

GRID SYSTEMOsets

.col-md-4 .col-md-4 .col-md-oset-4

GRID SYSTEMOsets

.col-md-3 .col-md-oset-3 .col-md-3 .col-md-oset-3

GRID SYSTEMOsets

.col-md-6 .col-md-oset-3 .col-md-6 .col-md-oset-3

TALLER #3Identifica los espacios entre columnas de tu diseo.

Tiempo: 30 minutos

MEDIA QUERIESVariables de CSS que utiliza para lograr la visualizacin que quiero obtener segn el

dispositivo

TIPOGRAFACabeceras

TIPOGRAFAAlineacin

TIPOGRAFACitas

BOTONES

IMGENES

COMPONENTESDropdowns

COMPONENTESTabs

Tooltips

Ventana Modal

Tooltips

COMPONENTES

Carrusel

COMPONENTES

REFERENCIAS

Bootstrap Ingls Espaol

Bootstrap OReilly Media Amazon

TALLER #4MANOS A LA OBRA!

GRACIAS :)

desarrolloweb bootstrap

Documents