desarrolloweb bootstrap
DESCRIPTION
*TRANSCRIPT
-
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 :)