Se ha denunciado esta presentación.
Se está descargando tu SlideShare. ×
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Próximo SlideShare
S5 ds2
S5 ds2
Cargando en…3
×

Eche un vistazo a continuación

1 de 33 Anuncio

Más Contenido Relacionado

Presentaciones para usted (20)

Similares a S6 ds2 (20)

Anuncio

Más de Luis Fernando Aguas Bucheli (20)

Más reciente (20)

Anuncio

S6 ds2

  1. 1. Desarrollo de Software 2 Tema: 3 Frameworks UI Java Mg. Luis Fernando Aguas Bucheli +593 984015184 @Aguaszoft Laguas@uisrael.edu.ec
  2. 2. Deséalo, espéralo, suéñalo, pero por todos los medios… ¡Hazlo!
  3. 3. Objetivo 1. Adquirir los conceptos básicos relacionados con la programación web 2. Reconocer las características de la programación web ● 3.2. Bootstrap Contenido
  4. 4. Objetivos de Desarrollo Sostenible 4.7 De aquí a 2030, asegurar que todos los alumnos adquieran los conocimientos teóricos y prácticos necesarios para promover el desarrollo sostenible, entre otras cosas mediante la educación para el desarrollo sostenible y los estilos de vida sostenibles, los derechos humanos, la igualdad de género, la promoción de una cultura de paz y no violencia, la ciudadanía mundial y la valoración de la diversidad cultural y la contribución de la cultura al desarrollo sostenible
  5. 5. 3.2. Bootstrap
  6. 6. ¿Qué es?  Framework de Twitter para desarrollo de aplicaciones Web.  Sencillo y lijero: basta con arichivo CSS y un JS.  Basado en HTML5, CSS y jQuery.  Arquitectura basada en Less.js  Compatible con todos los navegadores.  Plugins jQuery para validar datos de entrada, tablas, grafos y formularios.  Abierto al publico en 2011 con licencia Apache
  7. 7. Ejemplos
  8. 8. Distribución básica: http://getboostrap.com/
  9. 9. Pantalla básica
  10. 10. Viewport
  11. 11. Grid de 12 columnas
  12. 12. Grid de 12 columnas….
  13. 13. Tipografía
  14. 14. Imágenes redimensionables
  15. 15. Utilidades para responsive design
  16. 16. Utilidad para responsive design
  17. 17. VENTAJAS  Utiliza componentes y servicios creados por la comunidad web.  Utiliza un conjunto de buenas prácticas que perdurarán en el tiempo.  Utiliza HTML5 y CSS3  Implementa un sistema de rejillas, que por defecto incluye 12 columnas.  Utiliza LESS, un preprocesador CSS. (Ahora también soporta Saas).  Es OOCSS, o sea CSS Orientado a Objetos: organizado por módulos independientes y reutilizables.
  18. 18. VENTAJAS  Hay una enorme comunidad detrás.  Herramienta sencilla y ágil para construir sitios web e interfaces.  Tiene un theme por defecto bastante optimizado y que puedes modificar fácilmente.
  19. 19. DESVENTAJAS  Es necesario adaptarse a su forma de trabajo, si bien su curva de aprendizaje es liviana, deberás comprender y familiarizarte con su estructura y nomenclatura.  Debes adaptar tu diseño a un grid de 12 columnas.  Trae anchos y márgenes por defecto, que a veces son un poco tediosos de cambiar.  Es complicado cambiar de versión si has realizado modificaciones profundas sobre el core.  Si necesitas añadir componentes que no existen, debes hacerlos tú mismo en CSS y cuidar de que mantenga coherencia con tu diseño y cuidando el responsive.  A veces hacer implementar un diseño impuesto, puede llegar a resultar bastante difícil, al menos si eres un perfeccionista.
  20. 20. MOBILE FIRST  Desde la versión 3, Boostrap es Mobile first.  Para garantizar un buen renderizado y un buen funcionamiento del zoom:
  21. 21. DESACTIVAR ZOOM  Se puede desactivar el zoom con user-scalable=no  Hace que el sitio se parezca más una aplicación nativa, pero también lo hace menos accesible. En general, no se recomienda.
  22. 22. NORMALIZE.CSS  Para un mejor renderizado en varios navegadores, Boostrap usa Normalize.css, un proyecto desarrollado por Nicolas Gallagher y Jonathan Neal: http://necolas.github.io/normalize.css/
  23. 23. GRID SYSTEM  Bootstrap incluye un sistema de rejilla responsive y mobile first de 12 columnas.  El sistema de rejilla de Bootstrap funciona así: Se deben colocar .row dentro de un .container (ancho fijo) o .container-fluid (ancho completo).  Utilice .row para crear grupos horizontales. El contenido se debe colocar entre .row y deben de ser hijos inmediatos.  Si hay más de 12 columnas en una .row, esta son desplazadas abajo.
  24. 24. Ejemplo de 1 columna de un tamaño de 12
  25. 25. Ejemplo de 2 columnas de un tamaño de 6
  26. 26. Ejemplo de 3 columnas de un tamaño de 4
  27. 27. MULTIDISPOSITIVO  1 columna para xs (<768px)  2 columnas para sm (≥768px)  3 columnas para md (≥992px)  4 columnas para lg (≥1200px)
  28. 28. NORMAL
  29. 29. CLEARFIX  Problema cuando una capa tiene un alto mayor que la de los demás
  30. 30. MEDIAQUERIES
  31. 31. MEDIAQUERIES A veces también usan max-witdh para limitar ciertas reglas
  32. 32. Gracias Responsabilidad con pensamiento positivo

×