Scribd Logo
Upload

Welcome to Scribd!

  • Desarrolloweb Bootstrap

    Uploaded by

    cacapedo2
    191 views51 pages
    *

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    *

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    191 views51 pages

    Desarrolloweb Bootstrap

    Uploaded by

    cacapedo2
    *

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 51

    DESARROLLO WEB

    BOOTSTRAP

    QUIENES SOMOS
    GERARDO 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.

    TEMAS
    HTML para principiantes
    Bootstrap

    HTML
    UN 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
    Etiqueta que abre

    <p>Hola Workshop Digital</p>


    Etiqueta que cierra
    Elemento P

    SINTAXIS
    Atributo

    Atributo

    <p id=contenedor class=intro>Hola Workshop Digital</p>


    Valor

    Valor

    SINTAXIS

    <p><strong>Hola Workshop</strong> Digital</p>

    Elemento <p> tiene en su interior un <strong>

    SINTAXIS
    Elemento <p>

    Hola Workshop Digital

    Elemento <strong>

    ESTRUCTURA

    <html>

    HEAD
    TITLE

    BODY
    P

    <html>

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Sitio de ejemplo</title>
    </head>
    <body>
    <p>Texto de ejemplo</p>
    </body>
    </html>

    TAGS RECURRENTES
    Da a da utilizamos etiquetas en html que se repiten continuamente

    Ttulos

    h1, h2, h3, h4, h5, h6

    Cajas

    div

    Textos e imgenes

    p, a, strong, em e img

    Listas

    ul y ol
    li

    TAGS RECURRENTES
    Da a da utilizamos etiquetas en html que se repiten continuamente

    Formularios

    input, textarea, label

    TALLER #1
    Identifica 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 SYSTEM
    Contenedor de columnas fijo

    <div class=container>
    <div class=row>

    </div>
    </div>

    CONTENEDOR FIJO

    GRID SYSTEM
    Contenedor de columnas fluido

    <div class=container-fluid>
    <div class=row>

    </div>
    </div>

    CONTENEDOR FLUIDO

    GRID SYSTEM
    Ejemplos 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 SYSTEM
    Ejemplos 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 SYSTEM
    Ejemplos 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 SYSTEM
    Ejemplos 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 SYSTEM
    Ejemplo de grillas

    TALLER #2
    Identifica las columnas de tu diseo.
    Tiempo: 30 minutos

    GRID SYSTEM
    Osets

    <div class=container>
    <div class=row>
    <div class=col-md-4>.col-md-4</div>
    <div class=col-md-4 col-md-oset-4>.col-md-4 .col-md-oset-4</div>
    </div>
    </div>

    GRID SYSTEM
    Osets

    <div class=container>
    <div class=row>
    <div class=col-md-3 col-md-oset-3>.col-md-3 .col-md-oset-3</div>
    <div class=col-md-3 col-md-oset-3>.col-md-3 .col-md-oset-3</div>
    </div>
    </div>

    GRID SYSTEM
    Osets

    <div class=container>
    <div class=row>
    <div class=col-md-6 col-md-oset-3>.col-md-6 .col-md-oset-3</div>
    <div class=col-md-6 col-md-oset-3>.col-md-6 .col-md-oset-3</div>
    </div>
    </div>

    TALLER #3
    Identifica los espacios entre columnas de tu diseo.
    Tiempo: 30 minutos

    MEDIA QUERIES
    Variables de CSS que utiliza para lograr la visualizacin que quiero obtener segn el
    dispositivo

    TIPOGRAFA
    Cabeceras

    TIPOGRAFA
    Alineacin

    TIPOGRAFA
    Citas

    BOTONES

    BOTONES

    IMGENES

    COMPONENTES
    Dropdowns

    COMPONENTES
    Tabs

    Tooltips

    COMPONENTES
    Ventana Modal

    Tooltips

    COMPONENTES
    Carrusel

    REFERENCIAS

    Bootstrap

    Ingls

    Espaol

    Bootstrap OReilly Media

    Amazon

    TALLER #4
    MANOS A LA OBRA!

    GRACIAS :)

    You might also like