Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Destacado
Destacado (20)
Similar a Desarrollo web con Bootstrap
Similar a Desarrollo web con Bootstrap (20)
Último
Último (16)
Desarrollo web con Bootstrap
- 2. QUIENES SOMOS GERARDO 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.
- 4. HTML UN REPASO RÁPIDO A HTML DESDE EL COMIENZO
- 5. Es un lenguaje para la elaboración de sitios web, se caracteriza por utilizar una estructura y sintaxis simple.
- 6. SINTAXIS <p>Hola Workshop Digital</p> Etiqueta que abre Etiqueta que cierra Elemento P
- 7. SINTAXIS <p id=“contenedor” class=“intro”>Hola Workshop Digital</p> Atributo Valor Atributo Valor
- 8. SINTAXIS <p><strong>Hola Workshop</strong> Digital</p> Elemento <p> tiene en su interior un <strong>
- 9. SINTAXIS Hola Workshop Digital Elemento <p> Elemento <strong>
- 10. ESTRUCTURA
- 12. <!DOCTYPE html> <html lang="en"> <head> <title>Sitio de ejemplo</title> </head> <body> <p>Texto de ejemplo</p> </body> </html>
- 14. TAGS RECURRENTES Dí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
- 15. TAGS RECURRENTES Día a día utilizamos etiquetas en html que se repiten continuamente Formularios input, textarea, label
- 16. TALLER #1 Identifica los elementos de tu diseño. Tiempo: 20 minutos
- 18. BOOTSTRAP
- 19. Twitter Bootstrap es un framework para diseño de sitios y aplicaciones web basado en HTML y CSS.
- 20. 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.
- 21. PLANTILLA BÁSICA
- 22. GRID SYSTEM
- 23. GRID SYSTEM Contenedor de columnas fijo <div class=“container”> <div class=“row”> … </div> </div>
- 24. CONTENEDOR FIJO
- 25. GRID SYSTEM Contenedor de columnas fluido <div class=“container-fluid”> <div class=“row”> … </div> </div>
- 27. 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>
- 28. 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>
- 29. 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>
- 30. 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>
- 31. GRID SYSTEM Ejemplo de grillas
- 32. TALLER #2 Identifica las columnas de tu diseño. Tiempo: 30 minutos
- 33. GRID SYSTEM Offsets <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>
- 34. GRID SYSTEM Offsets <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>
- 35. GRID SYSTEM Offsets <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>
- 36. TALLER #3 Identifica los espacios entre columnas de tu diseño. Tiempo: 30 minutos
- 37. MEDIA QUERIES Variables de CSS que utiliza para lograr la visualización que quiero obtener según el dispositivo
- 40. TIPOGRAFÍA Citas
- 41. BOTONES
- 42. BOTONES
- 43. IMÁGENES
- 48. REFERENCIAS
- 49. Bootstrap • Inglés • Español Bootstrap O’Reilly Media • Amazon
- 50. TALLER #4 ¡MANOS A LA OBRA!
- 51. GRACIAS :)