DESARROLLO WEB BOOTSTRAP
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
DESARROLLO WEBBOOTSTRAP
QUIENES SOMOSGERARDO MORALES Diseñador Gráfico especialista en desarrollo front-end Actualmente trabaja en Digital Bond, agencia especializada en campañas de marketing digital en donde desarrolla sitios web.
RODRIGO ACEVEDO Comunicador Multimedia, desarrollador web Se desempeña como director Digital de EspinacaBWF, donde estratégicamente lidera campañas de marketing digital.
TEMAS•HTML para principiantes
•Bootstrap
HTMLUN REPASO RÁPIDO A HTML
DESDE EL COMIENZO
Es un lenguaje para la elaboración de sitios web, se caracteriza por utilizar una estructura y sintaxis simple.
SINTAXIS
<p>Hola Workshop Digital</p>
Etiqueta que abre
Etiqueta que cierra
Elemento P
SINTAXIS
<p id=“contenedor” class=“intro”>Hola Workshop Digital</p>
Atributo
Valor
Atributo
Valor
SINTAXIS
<p><strong>Hola Workshop</strong> Digital</p>
Elemento <p> tiene en su interior un <strong>
SINTAXIS
Hola Workshop Digital
Elemento <p>
Elemento <strong>
ESTRUCTURA
<html>
<html>
HEAD
TITLE
BODY
P
<!DOCTYPE html> <html lang="en">
<head> <title>Sitio de ejemplo</title>
</head> <body>
<p>Texto de ejemplo</p> </body>
</html>
TAGS RECURRENTESDía a día utilizamos etiquetas en html que se repiten continuamente
Títulos
Cajas
Textos e imágenes
h1, h2, h3, h4, h5, h6
div
p, a, strong, em e img
Listas ul y ol
li
TAGS RECURRENTESDía a día utilizamos etiquetas en html que se repiten continuamente
Formularios input, textarea, label
TALLER #1Identifica los elementos de tu diseño.
Tiempo: 20 minutos
BOOTSTRAP
Twitter Bootstrap es un framework para diseño de sitios y aplicaciones web basado en HTML y CSS.
VENTAJAS
•Utiliza un conjunto de buenas prácticas.
•Utiliza HTML5 y CSS3.
•Utiliza una grilla de 12 columnas.
•Es una herramientas sencilla y ágil para
construir sitios web e interfaces.
PLANTILLA BÁSICA
GRID SYSTEM
GRID SYSTEMContenedor de columnas fijo
<div class=“container”> <div class=“row”>
… </div>
</div>
CONTENEDOR FIJO
GRID SYSTEMContenedor de columnas fluido
<div class=“container-fluid”> <div class=“row”>
… </div>
</div>
CONTENEDOR FLUIDO
GRID SYSTEMEjemplos de columnas
<div class=“container”> <div class=“row”>
<div class=“col-md-1”>.col-md-1</div> <div class=“col-md-1”>.col-md-1</div> <div class=“col-md-1”>.col-md-1</div> <div class=“col-md-1”>.col-md-1</div> <div class=“col-md-1”>.col-md-1</div> <div class=“col-md-1”>.col-md-1</div> <div class=“col-md-1”>.col-md-1</div> <div class=“col-md-1”>.col-md-1</div> <div class=“col-md-1”>.col-md-1</div> <div class=“col-md-1”>.col-md-1</div> <div class=“col-md-1”>.col-md-1</div> <div class=“col-md-1”>.col-md-1</div>
</div> </div>
GRID SYSTEMEjemplos de columnas
<div class=“container”> <div class=“row”>
<div class=“col-md-8”>.col-md-8</div> <div class=“col-md-4”>.col-md-4</div>
</div> </div>
GRID SYSTEMEjemplos de columnas
<div class=“container”> <div class=“row”>
<div class=“col-md-4”>.col-md-4</div> <div class=“col-md-4”>.col-md-4</div> <div class=“col-md-4”>.col-md-4</div>
</div> </div>
GRID SYSTEMEjemplos de columnas
<div class=“container”> <div class=“row”>
<div class=“col-md-6”>.col-md-6</div> <div class=“col-md-6”>.col-md-6</div>
</div> </div>
GRID SYSTEMEjemplo de grillas
TALLER #2Identifica las columnas de tu diseño.
Tiempo: 30 minutos
GRID SYSTEMOffsets
<div class=“container”> <div class=“row”>
<div class=“col-md-4”>.col-md-4</div> <div class=“col-md-4 col-md-offset-4”>.col-md-4 .col-md-offset-4</div>
</div> </div>
GRID SYSTEMOffsets
<div class=“container”> <div class=“row”>
<div class=“col-md-3 col-md-offset-3”>.col-md-3 .col-md-offset-3</div> <div class=“col-md-3 col-md-offset-3”>.col-md-3 .col-md-offset-3</div>
</div> </div>
GRID SYSTEMOffsets
<div class=“container”> <div class=“row”>
<div class=“col-md-6 col-md-offset-3”>.col-md-6 .col-md-offset-3</div> <div class=“col-md-6 col-md-offset-3”>.col-md-6 .col-md-offset-3</div>
</div> </div>
TALLER #3Identifica los espacios entre columnas de tu diseño.
Tiempo: 30 minutos
MEDIA QUERIESVariables de CSS que utiliza para lograr la visualización que quiero obtener según el
dispositivo
TIPOGRAFÍACabeceras
TIPOGRAFÍAAlineación
TIPOGRAFÍACitas
BOTONES
BOTONES
IMÁGENES
COMPONENTESDropdowns
COMPONENTESTabs
Tooltips
Ventana Modal
Tooltips
COMPONENTES
Carrusel
COMPONENTES
REFERENCIAS
Bootstrap • Inglés • Español
Bootstrap O’Reilly Media
• Amazon
TALLER #4¡MANOS A LA OBRA!
GRACIAS :)
Related Documents
