View
270
Download
2
Category
Preview:
DESCRIPTION
*
Citation preview
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
Hola Workshop Digital
Atributo
Valor
Atributo
Valor
SINTAXIS
Hola Workshop Digital
Elemento tiene en su interior un
SINTAXIS
Hola Workshop Digital
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
GRID SYSTEMEjemplos de columnas
.col-md-8 .col-md-4
GRID SYSTEMEjemplos de columnas
.col-md-4 .col-md-4 .col-md-4
GRID SYSTEMEjemplos de columnas
.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
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 :)
Recommended