Desarrollo Web: HTML + Bootstrap

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=“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 SYSTEMEjemplo de grillas

TALLER #2Identifica las columnas de tu diseño.

Tiempo: 30 minutos

GRID SYSTEMOffsets


<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=“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=“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

IMÁGENES

COMPONENTESDropdowns

COMPONENTESTabs

Tooltips

Ventana Modal

Tooltips

COMPONENTES

Carrusel

COMPONENTES

REFERENCIAS

Bootstrap • Inglés • Español

Bootstrap O’Reilly Media

• Amazon

http://www.apple.com

http://www.oneskyapp.com/es/docs/bootstrap

http://www.amazon.com/Bootstrap-Jake-Spurlock/dp/1449343910/ref=sr_1_1?ie=UTF8&qid=1421371562&sr=8-1&keywords=bootstrap+oreilly&pebp=1421371563784&peasin=1449343910

TALLER #4¡MANOS A LA OBRA!

GRACIAS :)

Desarrollo Web: HTML + Bootstrap

Internet

Transcript of Desarrollo Web: HTML + Bootstrap