Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

¿QUÉ ES BOOTSTRAP Y CÓMO FUNCIONA EN EL DISEÑO WEB?

No description
by

miguel sanabria

on 12 April 2016

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of ¿QUÉ ES BOOTSTRAP Y CÓMO FUNCIONA EN EL DISEÑO WEB?

¿QUÉ ES BOOTSTRAP Y CÓMO FUNCIONA EN EL DISEÑO WEB?
FONTS
Como se usa
Bootstrap es un popular framework de desarrollo frontend, también podemos clasificarlo como un framework CSS con algunos valiosos elementos adicionales, que definen patrones de código HTML (snippet) que van más allá del CSS. Podemos usar estos Snippet HMTL para incluir controles en la interfaz web, por ejemplo: Barras de navegación, Botones, Elementos de Navegación, entre otros.
¿Cual es la forma de usar Twitter Boostrap?
Twitter Bootstrap, facilita el maquetado de páginas web HTML5 y está conformado por varios archivos, y a la hora de usarlo Bootstrap en el HTML sólo debemos hacer las llamadas sólo a tres (3) archivos para su funcionamiento:

bootstrap.css: Una hoja de estilo (CSS3), con los recursos css del framework.

bootstrap.js: Un archivo Javascript que le da vida a los distintos widget o patrones de código HTML que define Bootstrap, como se ha mencionado en la introducción del artículo.

jquery.js : Esta es la librería base que requiere el archivo bootstrap.js, para lograr los comportamientos interactivos que estarán disponibles a la hora de diseñar una página web usando este framework.
¿Cuando Se Creo?
Bootstrap fue desarrollado por Mark Otto y Jacbod Thornton de Twitter, como un marco de trabajo (framework) para fomentar la consistencia a través de herramientas internas. Antes de Bootstrap, se usaban varias librerías para el desarrollo de interfaces de usuario, las cuales guiaban a inconsistencias y a una carga de trabajo alta en su mantenimiento. Según el desarrollador de Twitter Mark Otto, frente a esos desafíos:

"...un pequeño grupo de desarrolladores y yo nos reunimos a diseñar y construir una nueva herramienta interna y vimos una oportunidad de hacer más. A través de ese proceso, nos vimos construir algo mucho más sustancial que otra herramienta interna más. Meses después, terminamos con una primera versión de Bootstrap como una manera de documentar y compartir bienes y patrones de diseño comunes dentro de la compañía."
Mark Otto4
El primer desarrollo en condiciones reales ocurrió durante la primera "Semana de Hackeo" (Hackweek) de Twitter."5 Mark Otto mostró a algunos colegas como acelerar el desarrollo de sus proyectos con la ayuda de la herramienta de trabajo. Como resultado, decenas de temas se han introducido en el marco de trabajo.

En agosto del 2011, Twitter liberó a Bootstrap como código abierto. En febrero del 2012, se convirtió en el proyecto de desarrollo más popular de GitHub.
El beneficio de usar responsive design en un sitio web, es principalmente que el sitio web se adapta automáticamente al dispositivo desde donde se acceda. Lo que se usa con más frecuencia, y que a mi opinión personal me gusta más, es el uso de media queries, que es un módulo de CSS3 que permite la representación de contenido para adaptarse a condiciones como la resolución de la pantalla y si trabajás las dimensiones de tu contenido en porcentajes, puedes tener una web muy fluida capaz de adaptarse a casi cualquier tamaño de forma automática.
¿Que Es?
Bootstrap, es un framework originalmente creado por Twitter, que permite crear interfaces web con CSS y JavaScript, cuya particularidad es la de adaptar la interfaz del sitio web al tamaño del dispositivo en que se visualice. Es decir, el sitio web se adapta automáticamente al tamaño de una PC, una Tablet u otro dispositivo. Esta técnica de diseño y desarrollo se conoce como “responsive design” o diseño adaptativo.
- El código fuente de Bootstrap está programado en LESS y Javascript, LESS es un lenguaje de preproceso de CSS, facilitando muchísimo la creación de hojas de estilo.
Full transcript