MARKETING ONLINE: Bootstrap JQuery para desarrollo Web

JQuery Bootstrap, Bootstrap JQuery, son 2 herramientas de desarrollo Web Fron-end, que combinadas llegan a cubrir diversos requerimientos a la hora de crear productos para entorno Web e incluso Mobile.

Lo que se puede hacer es: Todo lo que los navegadores modernos permiten bajo HTML5, CSS3 y funcionalidades Javascript.

Bootstrap

Es un Framework HTML, CSS y Javascript para desarrollo Web responsivo. Contiene plantillas de diseño con tipografía, formularios, botones, cuadros, menús de navegación y otros elementos de diseño basados en HTML y CSS, así como, extensiones de JavaScript adicionales. 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. Los creadores son Mark Otto y Jacbod Thornton de Twitter.

JQuery

Es una biblioteca JavaScript rápida en procesamiento y con muchas funcionalidades. Hace cosas como recorrido y manejo de documentos HTML, gestiona eventos, animación, y Ajax de una forma más simple, con una API fácil de usar que funciona practicamente en todos los navegadores. Creada inicialmente por John Resig, fue presentada el 14 de enero de 2006 en el evento BarCamp NYC (Nueva York).

Bootstrap JQuery, Como incluir en un proyecto

Podemos obtener Bootstrap desde este enlace y JQuery de este otro enlace. Vamos a ver la estructura sugerida para un proyecto. Creamos una carpeta con el nombre proyecto y copiamos las carpetas necesarias del paquete de Bootstrap, además copiamos el archivo jquery.min.js (cambiando previamente el nombre del archivo) y adicionamos el archivo index.html como muestra las líneas resaltadas. Debe quedar de esta forma:

proyecto/

├── index.html

├── css/

│   ├── bootstrap.css

│   ├── bootstrap.min.css

│   ├── bootstrap-theme.css

│   └── bootstrap-theme.min.css

├── js/

│   ├── bootstrap.js

│   └── bootstrap.min.js

│   └── jquery.min.js

└── fonts/

    ├── glyphicons-halflings-regular.eot

    ├── glyphicons-halflings-regular.svg

    ├── glyphicons-halflings-regular.ttf

    └── glyphicons-halflings-regular.woff

Aclarar que los archivos con extensión .min.css y .min.js son los archivos minificados (reducidos en tamaño para dar mayor rapidez en descarga). Es decir, por ejemplo, bootstrap.css y bootstrap.min.css son lo mismo, con la única diferencia que es su tamaño en KB.

Ejemplo en código HTML

El código a continuación, es un modelo de como incluir los archivos CSS y JS en el documento HTML. Las líneas resaltadas muestran donde y como se incluyen estos archivos. (Las líneas 12 hasta la 17, son para dar compatibilidad con navegadores de Internet Explorer)

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Ejemplo Bootstrap y JQuery</title>

    <!-- Bootstrap CSS -->

    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>

      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>

      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

    <![endif]-->

  </head>

  <body>

    <h1>Hola mundo!</h1>

    <!-- jQuery es necesario para plugins de Bootstrap) -->

    <script src="js/jquery.min.js"></script>

    <script src="js/bootstrap.min.js"></script>

  </body>

</html>

Luego ya podemos utilizar todos los componentes de Bootstrap y JQuery. Por ejemplo para crear un menú superior, colocamos el siguiente código a continuación de <body>

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">

    <div class="container">

        <div class="navbar-header">

          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">

            <span class="sr-only">Navegacion</span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

          </button>

          <a class="navbar-brand" href="#">Proyecto</a>

        </div>

        <div id="navbar" class="navbar-collapse collapse">

          <ul class="nav navbar-nav">

            <li class="active"><a href="#">Home</a></li>

            <li><a href="#about">About</a></li>

            <li><a href="#contact">Contact</a></li>

            <li class="dropdown">

              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>

              <ul class="dropdown-menu" role="menu">

                <li><a href="#">Action</a></li>

                <li><a href="#">Another action</a></li>

                <li><a href="#">Something else here</a></li>

                <li class="divider"></li>

                <li class="dropdown-header">Nav header</li>

                <li><a href="#">Separated link</a></li>

                <li><a href="#">One more separated link</a></li>

              </ul>

            </li>

          </ul>

        </div><!--/.nav-collapse -->

      </div>

    </nav>

En las páginas de Bootstrap y Jquery se encuentran ejemplos de toda la enorme cantidad de componentes y funcionalidades que podemos ir practicando, probando y mejorando.

Conclusión

Para un desarrollo web Front-end eficiente con resultados de calidad, existen diversas herramientas, entre las que se destacan estas dos que fueron presentadas. Miles de páginas, aplicaciones web y mobile que vemos diariamente, utilizan estas dos herramientas, presentando efectos y resultados visuales excelentes. Alguien que se dedique al desarrollo Web Front-end, con seguridad encontrará como buenas alternativas el uso de Bootstrap y JQuery, siendo de gran ayuda para aumentar la productividad y con más énfasis en la creatividad.

MARKETING ONLINE

FREEDOM GLOBAL NET

¡¡Lo nunca visto!!

martes, 4 de noviembre de 2014

Bootstrap JQuery para desarrollo Web

Bootstrap

JQuery

Bootstrap JQuery, Como incluir en un proyecto

Ejemplo en código HTML

Conclusión

No hay comentarios:

Publicar un comentario