Bootstrap

 

Que es Bootstrap ?



Bootstrap es una biblioteca multiplataforma o conjunto de herramientas de código abierto para diseño de sitios y aplicaciones web. Contiene plantillas de diseño con tipografía, formularios, botones, cuadros, menús de navegación y otros elementos de diseño basado en HTML y CSS, así como extensiones de JavaScript adicionales. A diferencia de muchos frameworks web, solo se ocupa del desarrollo front-end.

Bootstrap es el segundo proyecto más destacado en GitHub​ y es usado por la NASA y la MSNBC, entre otras organizaciones


Origen


Bootstrap, originalmente llamado Blueprint de Twitter, fue desarrollado por Mark Otto y Jacob Thornton de Twitter, como un marco de trabajo (framework) para fomentar la consistencia entre las herramientas internas. Antes de Bootstrap, se usaron varias bibliotecas para el desarrollo de interfaces de usuario, lo que generó inconsistencias y una gran carga de trabajo en su mantenimiento. Según el desarrollador de Twitter, Mark Otto, frente a esos desafíos:

un grupo súper pequeño de desarrolladores y yo nos reunimos para diseñar y construir una nueva herramienta interna y vimos la oportunidad de hacer algo más. A través de ese proceso, nos vimos construyendo algo mucho más sustancial que otra herramienta interna. Meses después terminamos con una primera versión de Bootstrap como una manera de documentar y compartir activos y patrones de diseño comunes dentro de la compañía.


Caracteristicas


Bootstrap tiene un soporte relativamente incompleto para HTML5 y CSS3, pero es compatible con la mayoría de los navegadores web. La información básica de compatibilidad de sitios web o aplicaciones está disponible para todos los dispositivos y navegadores. Existe un concepto de compatibilidad parcial que hace disponible la información básica de un sitio web para todos los dispositivos y navegadores. Por ejemplo, las propiedades introducidas en CSS3 para las esquinas redondeadas, gradientes y sombras son usadas por Bootstrap a pesar de la falta de soporte de navegadores antiguos. Esto extiende la funcionalidad de la herramienta, pero no es requerida para su uso.

Desde la versión 2.0 también soporta diseños web adaptables. Esto significa que el diseño gráfico de la página se ajusta dinámicamente, tomando en cuenta las características del dispositivo usado (computadoras, tabletas o teléfonos móviles).


Funciones y Estructura


Bootstrap es modular y consiste esencialmente en una serie de hojas de estilo LESS que implementan la variedad de componentes de la herramienta. Una hoja de estilo llamada bootstrap.less incluye los componentes de las hojas de estilo. Los desarrolladores pueden adaptar el mismo archivo de Bootstrap, seleccionando los componentes que deseen usar en su proyecto.

Los ajustes son posibles en una medida limitada a través de una hoja de estilo de configuración central. Los cambios más profundos son posibles mediante las declaraciones LESS.

El uso del lenguaje de hojas de estilo LESS permite el uso de variables, funciones y operadores, selectores anidados, así como clases mixin.

Desde la versión 2.0, la configuración de Bootstrap también tiene una opción especial de «Personalizar» en la documentación. Por otra parte, los desarrolladores eligen en un formulario los componentes y ajustes deseados, y de ser necesario, los valores de varias opciones a sus necesidades. El paquete consecuentemente generado ya incluye la hoja de estilo CSS compilada previamente.



Ejemplo de Bootstrap


<!DOCTYPE html>
<html>
  <head>
    <title>Ejemplo de Bootstrap</title>

    <!-- Bootstrap CSS -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  </head>
 
  <body>
    <div class="container">
      <h1>Búsqueda</h1>
      <label>Ejemplo de un formulario de búsqueda sencillo</label>

      <!-- Formulario de búsqueda con un campo de entrada (input) y un botón -->
      <form class="well form-search">
        <input type="text" class="input-medium search-query">
        <button type="submit" class="btn btn-primary">Buscar</button>
      </form>
 
      <h2>Resultados</h2>
 
      <!-- Tabla con celdas de color de fondo alternantes y con marco -->
      <table class="table table-striped table-bordered">
        <thead>
          <tr>
            <th>#</th>
            <th>Título</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>Lorem ipsum dolor sit amet.</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Consetetur sadipscing elitr.</td>
          </tr>
          <tr>
            <td>3</td>
            <td>At vero eos et accusam.</td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

    <!-- Bootstrap JS -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  </body>
</html>





Aqui se crea una cuadrilla Fija


<div class="row">
      <div class="col-md-4">...</div>
      <div class="col-md-8">...</div>
    </div>

Creando una cuadrilla de diseño fija con una cuadrilla de diseño fluida anidada[editar]

    <div class="row">
      <div class="col-md-12">
        <div class="4">...</div>
        <div class="4">...</div>
        <div class="4">...</div>
      </div>
      <div class="col-md-8">...</div>
    </div>



Javascript

         Que es JavaScript  ?

    


JavaScript es un lenguaje de programacion interpretaado a objeto  Se define como 

orientado a objetos,2​ basado en prototipos, imperativo, débilmente tipado y dinámico.

Se utiliza principalmente del lado del cliente, implementado como parte de un navegador web permitiendo mejoras en la interfaz de usuario y páginas web dinámicas3​ y JavaScript del lado del servidor Server-side JavaScript o SSJS). Su uso en aplicaciones externas a la web, por ejemplo en documentos PDF, aplicaciones de escritorio (mayoritariamente widgets) es también significativo.

Desde 2012, todos los navegadores modernos soportan completamente ECMAScript 5.1, una versión de JavaScript. Los navegadores más antiguos soportan por lo menos ECMAScript 3. La sexta edición se liberó en julio de 2015.

JavaScript se diseñó con una sintaxis similar a C++ y Java,56​ aunque adopta nombres y convenciones del lenguaje de programación Java. Sin embargo, Java y JavaScript tienen semánticas y propósitos diferentes. Su relación es puramente comercial, tras la compra del creador de Java (Sun Microsystems) de Nestcape Navigator (creador de LiveScript) y el cambio de nombre del lenguaje de programación.


    Historia


JavaScript fue desarrollado originalmente por Brendan Eich de Netscape con el nombre de Mocha, el cual fue renombrado posteriormente a LiveScript, para finalmente quedar como JavaScript. El cambio de nombre coincidió aproximadamente con el momento en que Netscape agregó compatibilidad con la tecnología Java en su navegador web Netscape Navigator en la versión 2002 en diciembre de 1995. La denominación produjo confusión, dando la impresión de que el lenguaje es una prolongación de Java, y fue considerada por muchos como una estrategia de mercadotecnia de Netscape para obtener prestigio e innovar en el ámbito de los nuevos lenguajes de programación web.910

«JAVASCRIPT» es una marca registrada de oracle corporation​ Es usada con licencia por los productos creados por Netscape Communications y entidades actuales como la Fundacion mosilla

Microsoft dio como nombre a su dialecto de JavaScript «JScript», para evitar problemas relacionadas con la marca. JScript fue adoptado en la versión 3.0 de Internet Explorer, liberado en agosto de 1996, e incluyó compatibilidad con el Efecto 2000 con las funciones de fecha, una diferencia de los que se basaban en ese momento. Los dialectos pueden parecer tan similares que los términos «JavaScript» y «JScript» a menudo se utilizan indistintamente, pero la especificación de JScript es incompatible con la de ECMA en muchos aspectos.

Para evitar estas incompatibilidades, el World Wide Web Consortium diseñó el estándar Document Object Model (DOM, o Modelo de Objetos del Documento en español), que incorporan Konqueror, las versiones 6 de Internet Explorer y Netscape NavigatorOpera la versión 7, Mozilla Application Suite y Mozilla Firefox desde su primera versión

JavaScript en el lado servidor



Netscape introdujo una implementación de scrip del lado del servidor con Nescape server, lanzada en diciembre de 1994 (poco después del lanzamiento de JavaScript para navegadores web. ​A partir de mediados de la década de los 2000, ha

habido una proliferación de implementaciones de JavaScript para el lado servidor. Node.js es uno de los notables ejemplos de JavaScript en el lado del servidor, siendo usado en proyectos importantesdespués del lanzamiento de JavaScript para navegadores web. ​A partir de mediados de la década de los 2000, ha

JavaScript se ha convertido en uno de los lenguajes de programación más populares en internet y más usados. Al principio, sin embargo, muchos desarrolladores renegaban del lenguaje porque el público al que va dirigido lo formaban publicadores de artículos y demás aficionados, entre otras razones.


Desarrollos posteriores


JavaScript se ha convertido en uno de los lenguajes de programación más populares en internet y más usados. Al principio, sin embargo, muchos desarrolladores renegaban del lenguaje porque el público al que va dirigido lo formaban publicadores de artículos y demás aficionados, entre otras razones La llegada de Ajax devolvió JavaScript a la fama y atrajo la atención de muchos otros programadores. Como resultado de esto hubo una proliferación de un conjunto de frameworks y bibliotecas de ámbito general, mejorando las prácticas de programación con JavaScript, y aumentado el uso de JavaScript fuera de los navegadores web, como se ha visto con la proliferación de entornos JavaScript del lado del servidor. En enero de 2009, el proyecto CommonJS fue inaugurado con el objetivo de especificar una biblioteca para uso de tareas comunes principalmente para el desarrollo fuera del navegador web.

En junio de 2015 se cerró y publicó el estándar ECMAScript 62122​ con un soporte irregular entre navegadoresy que dota a JavaScript de características avanzadas que se echaban de menos y que son de uso habitual en otros lenguajes como, por ejemplo, módulos para organización del código, verdaderas clases para programación orientada a objetos, expresiones de flecha, iteradores, generadores o promesas para programación asíncrona.

La versión 7 de ECMAScript se conoce como ECMAScript 2016,24​ y es la última versión disponible, publicada en junio de 2016. Se trata de la primera versión para la que se usa un nuevo procedimiento de publicación anual y un proceso de desarrollo abierto. 



Imperativo y estructurado


JavaScript es compatible con gran parte de la estructura de programación de C por ejemplo, sentencias if, bucles for, sentencias switch, etc.. Con una salvedad, en parte: en C, el ámbito de las variables alcanza al bloque en el cual fueron definidas; sin embargo JavaScript no es compatible con esto, puesto que el ámbito de las variables es el de la función en la cual fueron declaradas. Esto cambia con la versión de ECMAScript 2015, ya que añade compatibilidad con block scoping por medio de la

 palabra clave let. Como en C, JavaScript hace distinción entre expresiones y sentencias. Una diferencia sintáctica con respecto a C es la inserción automática de punto y coma, es decir, en JavaScript los puntos y coma que finalizan una sentencia pueden ser omitidos.


/* Busca el mínimo común múltiplo (MCM) de dos números */
function LCMCalculator(x, y) { // función constructora
    var checkInt = function (x) { // función interior
        if (x % 1 !== 0) {
            throw new TypeError(x + " no es un entero"); // lanza una excepción
        }
        return x;
    };
    this.a = checkInt(x) // puntos y coma son opcionales
    this.b = checkInt(y);
}

Ejemplos sencillos

var x; // define la variable x, aunque no tiene ningún valor asignado por defecto

var y = 2; // define la variable y y le asigna el valor 2 a ella

A considerar los comentarios en el ejemplo de arriba, los cuales van precedidos con 2 barras diagonales.

No existen funcionalidades para I/O incluidas en el lenguaje; el entorno de ejecución ya lo proporciona. La especificación ECMAScript en su edición 5.1 hace mención:​

... en efecto, no existen provisiones en esta especificación para entrada de datos externos o salida para resultados computados.

Sin embargo, la mayoría de los entornos de ejecución tiene un objeto41​ llamado console que puede ser usado para imprimir por el flujo de salida de la consola de depuración. He aquí un simple programa que imprime “Hello world!”:

console.log("Hello world!");

Una función recursiva:

function factorial(n) {

    if (n === 0) {

        return 1;

    }

    return n * factorial(n - 1);

}


Tipado dinámico




Como en la mayoría de lenguajes de scripting, el tipo está asociado al valor, no a la variable. Por ejemplo, una variable x en un momento dado puede estar ligada a un número y más adelante, religada a una cadena. JavaScript es compatible con varias formas de comprobar el tipo de un objeto, incluyendo duck typing. Una forma de saberlo es por medio de la palabra clave typeof
.


Objetual


JavaScript está formado casi en su totalidad por objetos. Los objetos en JavaScript son arrays asociativos, mejorados con la inclusión de prototipos (ver más adelante). Los nombres de las propiedades de los objetos son claves de tipo cadena: obj.x = 10 y obj['x'] = 10 son equivalentes, siendo azúcar sintáctico la notación con punto. Las propiedades y sus valores pueden ser creados, cambiados o eliminados en tiempo de ejecución. La mayoría de propiedades de un objeto y aquellas que son incluidas por la cadena de la herencia prototípica) pueden ser enumeradas por medio de la instrucción de bucle for... in. JavaScript tiene un pequeño número de objetos predefinidos como son Function y Date.




Ejemplos del script:


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Ejemplo sencillo</title>
</head>
<body>
    <h1 id="header">Esto es JavaScript</h1>

    <script>
        document.body.appendChild(document.createTextNode('Hola Mundo!'));
    
        var h1 = document.getElementById('header'); // contiene la referencia al tag <h1>
        h1 = document.getElementsByTagName('h1')[0]; // accediendo al mismo elemento <h1>
    </script>

    <noscript>Tu navegador no admite JavaScript, o JavaScript está deshabilitado.</noscript>
</body>
</html>

Funciones
de primera clase

            A las funciones se les suele llamar ciudadanos de primera

clase; son objetos en sí mismos. Como tal, poseen propiedades y métodos,
como .call() y .bind().​ Una función anidada es una función definida dentro
de otra. Esta es creada cada vez que la función externa es invocada. Además,
cada función creada forma una clausura; es el resultado
de evaluar un ámbito conteniendo en una o más variables dependientes de otro
ámbito externo, incluyendo constantes, variables locales y argumentos de la
función externa llamante. El resultado de la evaluación de dicha clausura forma
parte del estado interno de cada objeto función, incluso después de que la
función exterior concluya su evaluación.


Prototípico


Un modulo puede contener una clase o biblioteca de funciones para un propósito en especifico

Un motor de JavaScript (también conocido como intérprete de JavaScript o implementación JavaScript) es un intérprete que interpreta el código fuente de JavaScript y ejecuta la secuencia de comandos en consecuencia. El primer motor de JavaScript fue creado por Brendan Eich en Netscape Communications Corporation, para el navegador web Netscape Navigator. El motor, denominado SpiderMonkey, está implementado en C. Desde entonces, ha sido actualizado (en JavaScript 1.5) para cumplir con el ECMA-262 edición 3. El motor Rhino, creado principalmente por Norris Boyd (antes de Netscape, ahora en Google) es una implementación de JavaScript en java. Rhino, como SpiderMonkey, es compatible con el ECMA-262 edición 3.

Un navegador web es, con mucho, el entorno de acogida más común para JavaScript. Los navegadores web suelen crear objetos no nativos, dependientes del entorno de ejecución, para representar el Document Object Model (DOM) en JavaScript. El servidor web es otro entorno común de servicios. Un servidor web JavaScript suele exponer sus propios objetos para representar objetos de petición y respuesta HTTP, que un programa JavaScript podría entonces interrogar y manipular para generar dinámicamente páginas web.