jQuery

Vista previa del material en texto

Materia: Desarrollo Web
TICASI
Mstro: Luis Fernando Perea Gallozo
25/07/2018
jQuery
¿Qué es?
JQuery es una librería de JavaScript (JavaScript es un lenguaje de programación muy usado en desarrollo web). Esta librería de código abierto, simplifica la tarea de programar en JavaScript y permite agregar interactividad a un sitio web sin tener conocimientos del lenguaje.
Basados en esta librería, existe una infinita cantidad de plugins (gratis y pagos) creados por desarrolladores de todo el mundo. Estos plugins resuelven situaciones concretas dentro del maquetado de un sitio, por ejemplo: un menú responsive, una galería de fotos, un carrousel de imágenes, un slide, un header que cambia de tamaño, el deslizamiento del scroll al hacer clic en un botón (anclas HTML), la transición entre páginas y miles de efectos más.
¿Cómo se usa?
Se usa mediante el uso de Font-face de CSS3 y la etiqueta HTML5 , este te da acceso a muchos iconos a escala.
Su uso está preparado para que funcione y se fusione fácilmente con el framework Bootstrap, pero se puede usar esta fuente en otros proyectos que se desligan de este. 
Ventajas
⦁	JQuery es flexible y rápido para el desarrollo web
⦁	Viene con licencia MIT y es Open Source
⦁	Tiene una excelente comunidad de soporte
⦁	Tiene Plugins
⦁	Bugs son resueltos rápidamente
⦁	Excelente integración con AJAX
Desventajas
⦁	JQuery es fácil de instalar y aprender, inicialmente. Pero no es tan fácil si lo comparamos con CSS
⦁	Si JQuery es implementado inapropiadamente como un Framework, el entorno de desarrollo se puede salir de control
⦁	Una de las principales desventajas de JQuery es la gran cantidad de versiones publicadas en el corto tiempo.
Origenes
jQuery fue publicado por primera vez en Enero del 2006 en “BarCamp NYC” por John Resign. Soporte para AJAX fue agregado un mes después, y el modelo de licenciamiento open source del MIT fue adoptado en Mayo de ese mismo año.
Doce meses después, en Septiembre del 2007, jQuery ya mostraba una nueva interfaz de usuario y ya adquiría gran popularidad, y exactamente un año después, en Septiembre 2008, Microsoft y Nokia anunciaron su soporte. Microsoft ha tratado de adoptar jQuery para usarlo en Visual Studio (integrándolo en el Framework AJAX de ASP.NET), y Nokia lo ha integrado en la plataforma de desarrollo de widgets.
¿Cómo se implementa?
Luego de realizar la búsqueda y comparar los diferentes demos, elegimos el plugin que queremos instalar en nuestro sitio y descargamos los archivos que lo componen. Dependiendo de la complejidad, algunos plugins están compuestos por un sólo archivo .js como por ejemplo el deslizamiento del scroll y otros se componen de un grupo de archivos relacionados entre sí: html, css, js e imágenes con es el caso de una galería de fotos.
Cada plugin tiene sus instrucciones de instalación propias, escritas por su autor, pero vamos enumerar los puntos que hay que tener en cuenta durante el proceso:
1) Librería JQuery
Todos los plugins de JQuery necesitan la librería de JQuery para funcionar. La librería es un archivo .js que se puede descargar desde el sitio oficial: https://jquery.com/ colocar en una carpeta js y luego vincular con una etiqueta <script>, por ejemplo:
<script src="js/jquery-3.2.1.min.js"></script>
Otra forma de vincular la librería es utilizando el servidor de Google. De esta manera no necesitamos descargarla ni subirla a nuestro servidor. En ese caso, el código es el mismo pero con ruta absoluta:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
2) Archivo .js del plugin
Este es el archivo principal del plugin y se obtiene descargando del sitio. Habitualmente el nombre del archivo coincide con el nombre del plugin, por ejemplo:
<script src="js/responsiveslides.min.js"></script>
Hay que tener en cuenta que si copiamos este código de las instrucciones de instalación tenemos que chequear las rutas de los archivos, especialmente el nombre de las carpetas.
3) Estructura HTML
En algunos casos las instrucciones del plugin sugieren una estructura determinada en HTML, por ejemplo que una galería de fotos esté resuelta con listas o con divs o que un elemento sea identificado con class o con ID. Si en el momento de instalar el plugin ya tenemos escrito nuestro HTML, es conveniente adaptarlo a la estructura que sugiere el plugin para asegurarnos de que funcione y no tener que modificar otros elementos como reglas CSS.
4) Función
La función es un bloque de código JavaScript que contiene instrucciones que necesita el plugin para ejecutarse. Se escribe dentro del body entre las etiquetas <script></script>. Puede ir inmediatamente debajo de la estructura HTML del plugin o antes de que cierre la etiqueta body. Si es posible es mejor colocarla hacia el final del documento para que la descarga de la página sea más rápida.
<script>
$(document).ready(function() {
$("#owl").owlCarousel({
autoPlay: 3000,
items : 3,
itemsDesktop : [1199,3],
itemsDesktopSmall : [979,3]
});
});
</script>
Ejemplo:
Vincularlo
Efectos y animaciones
En los primeros ejemplos usamos varios métodos de efectos de JQuery, para mover, ocultar y mostrar elementos, usando animaciones.
En el primero de ellos al dar clic en el botón "Ocultar bloque" usamos el evento "click()" para ocultar con la función "hide()" el bloque de ejemplo que posee el identificador "cont1".
Usamos el siguiente código.
<script>
$("#c1").click(function() {
$("#cont1").hide(1500);
});
</script>