{"id":157,"date":"2013-07-03T01:13:38","date_gmt":"2013-07-03T01:13:38","guid":{"rendered":"http:\/\/blog.espol.edu.ec\/seadtoha\/?p=157"},"modified":"2013-07-03T01:17:34","modified_gmt":"2013-07-03T01:17:34","slug":"biblioteca-de-javascript-jquery","status":"publish","type":"post","link":"https:\/\/blog.espol.edu.ec\/seadtoha\/2013\/07\/03\/biblioteca-de-javascript-jquery\/","title":{"rendered":"Biblioteca de JavaScript JQuery"},"content":{"rendered":"<p>Es necesario tener nociones sobre el desarrollo de sitios web para entender a la perfecci\u00f3n sobre que trata JQuery, empecemos por describir los componentes de un sitio web normal:<\/p>\n<ul>\n<li>HTML<\/li>\n<li>CSS<\/li>\n<li>Javascript<\/li>\n<\/ul>\n<p>Toda p\u00e1gina web puede ser separada en 3 capas y cada una con un rol especifico y que se muestran a continuaci\u00f3n:<\/p>\n<p><strong>HTML:<\/strong> Nuestro archivos HTML son los encargados de tener el contenido de la pagina que ser\u00e1 le\u00eddo e interpretado por nuestros navegadores, todos los navegadores soportan lenguaje HTML, as\u00ed que nuestros contenidos podr\u00e1n ser vistos en cualquier navegador.<\/p>\n<p><strong>CSS:<\/strong> Los archivos CSS no manipulan el contenido de nuestro sitio, su rol es dar estilos y para ello contienen el c\u00f3digo con las instrucciones de c\u00f3mo debe mostrarse todo el contenido que hemos escrito dentro del documento HTML, todos los navegadores actuales soportan CSS as\u00ed que nunca nos preocuparemos porque nuestro dise\u00f1o no se cargue en alg\u00fan navegador web.<\/p>\n<p><strong>Javascript:<\/strong> La ultima capa de nuestro website y esta se encarga espec\u00edficamente de los efectos y comportamientos de la pagina, pero esto tiene 2 desventajas enormes. La primera es que no todos los navegadores soportan o interpretan lenguaje Javascript y la segunda desventaja es que para lograr buenos efectos la programaci\u00f3n era demasiado larga y complicada.<\/p>\n<h2>\u00bfQu\u00e9 es Javascript?<\/h2>\n<p><iframe loading=\"lazy\" src=\"\/\/www.youtube.com\/embed\/VRnQOcVclS8\" frameborder=\"0\" width=\"560\" height=\"315\"><\/iframe><br \/>\nEs un lengua de programaci\u00f3n implementado originalmente para navegadores web en el lado del cliente para que pudiera interactuar con el usuario, \u00faltimamente usado en el desarrollo de juegos y aplicaciones de escritorio. Su sintaxis fue influenciada del lenguaje C y usa nombres de lenguaje JAVA, pero no est\u00e1n relacionados entre ellos y cada uno es independiente. Su uso mas com\u00fan fue escribir funciones que serian mostradas o incluidas en el documento HTML, entre esos usos:<\/p>\n<ul>\n<li>Cargar o enviar nuevos datos al servidor v\u00eda AJAX sin tener que volver a cargar el website.<\/li>\n<li>Animaci\u00f3n de elementos dentro de la pagina<\/li>\n<li>Contenido interactivo<\/li>\n<li>Validar datos en los formularios web, confirmando que el dato era aceptable antes de ser enviado<\/li>\n<li>Transmitir informaci\u00f3n sobre los h\u00e1bitos de lectura y navegaci\u00f3n del usuario, lo cual se hac\u00eda con el fin de web anal\u00edticas y seguimiento.<\/li>\n<\/ul>\n<p>Javascript no necesitaba de un servidor que interpretara sus comandos e instrucciones, ya que corr\u00eda dentro del navegador, respondiendo de una manera r\u00e1pida a las acciones del usuario.<\/p>\n<h2>\u00bfQue es JQuery?<\/h2>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"http:\/\/ejohn.org\/apps\/workshop\/adv-talk\/jquery_logo.png\" alt=\"Logo Jquery\" width=\"523\" height=\"192\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Una vez que tenemos claro que es Javascript y de la gran cantidad de bondades que ofrece para los websites, es cuando empezamos a darnos cuenta que deseamos simplificar tantas l\u00edneas de c\u00f3digo para lograr mejores efectos y m\u00e1s dinamismo a nuestros websites.<\/p>\n<p>Jquery es una peque\u00f1a y r\u00e1pida librer\u00eda javascript. Cosas como\u00a0 manipulaci\u00f3n, manejo de eventos, animaciones y AJAX se vuelven mucho mas f\u00e1ciles de usar y no solo eso, sino que tambi\u00e9n toma en cuenta el problema de la compatibilidad entre navegadores creando est\u00e1ndares que puedan ser le\u00eddos en la mayor\u00eda de navegadores, es la combinaci\u00f3n entre versatilidad y extensibilidad, haciendo que m\u00e1s personas escriban javascript de una manera f\u00e1cil y r\u00e1pida.<\/p>\n<p>Son todas estas caracter\u00edsticas que hacen de JQuery una herramienta muy poderosa al momento de agregar efectos o comportamientos a nuestras p\u00e1ginas web, su compatibilidad es de las m\u00e1s altas que se puede tener, garantizando as\u00ed que lo que programemos pueda ser visualizado sin problema alguno y usado por mega corporaciones como Google, Wikipedia, WordPress, Amazon, Twitter, entre otros.<\/p>\n<table width=\"100%\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td valign=\"top\" width=\"12%\"><\/td>\n<td valign=\"top\" width=\"10%\">Internet Explorer<\/td>\n<td valign=\"top\" width=\"16%\">Chrome<\/td>\n<td valign=\"top\" width=\"19%\">Firefox<\/td>\n<td valign=\"top\" width=\"20%\">Safari<\/td>\n<td valign=\"top\" width=\"19%\">Opera<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\" width=\"12%\">\n<p align=\"center\">jQuery 1.x<\/p>\n<\/td>\n<td valign=\"top\" width=\"10%\">\n<p align=\"center\">6+<\/p>\n<\/td>\n<td valign=\"top\" width=\"16%\">\n<p align=\"center\">Current \u2212 1 version<\/p>\n<\/td>\n<td valign=\"top\" width=\"19%\">\n<p align=\"center\">Current \u2212 1 version<\/p>\n<\/td>\n<td valign=\"top\" width=\"20%\">\n<p align=\"center\">Current \u2212 1 version<\/p>\n<\/td>\n<td valign=\"top\" width=\"19%\">\n<p align=\"center\">Current \u2212 1 version<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\" width=\"12%\">\n<p align=\"center\">jQuery 2.x<\/p>\n<\/td>\n<td valign=\"top\" width=\"10%\">\n<p align=\"center\">9+<\/p>\n<\/td>\n<td valign=\"top\" width=\"16%\">\n<p align=\"center\">Current \u2212 1 version<\/p>\n<\/td>\n<td valign=\"top\" width=\"19%\">\n<p align=\"center\">Current \u2212 1 version<\/p>\n<\/td>\n<td valign=\"top\" width=\"20%\">\n<p align=\"center\">Current \u2212 1 version<\/p>\n<\/td>\n<td valign=\"top\" width=\"19%\">\n<p align=\"center\">Current \u2212 1 version<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>Conclusi\u00f3n<\/h2>\n<p>JQuery est\u00e1 facilitando en todo el mundo el uso de Javascript a los desarrolladores web, reduciendo las instrucciones largas, en unas m\u00e1s peque\u00f1as que pueden ser aprendidas y mejoradas, se pueden crear diferentes plug-ins y estos pueden luego ser mejorados o personalizados, hay una comunidad enorme de desarrolladores que siempre est\u00e1 respondiendo dudas de los usuarios y una nunca esta solo al momento de programar, es un lenguaje extremadamente popular que ha estandarizado la capa de comportamientos y\u00a0 efectos para lograr websites din\u00e1micos que puedan ser visto desde cualquier navegador.<\/p>\n<p>Recomiendo antes de entrar a programar con JQery tener conocimientos de HTML y CSS, ya que son las 2 capas principales de nuestro website, JQuery solos les agregara mas dinamismo y funcionalidad a los que ya hemos creado. y revisar dentro de www.jquery.com la documentaci\u00f3n \u00a0porque es muy importante entender la sintaxis y palabras reservadas del lenguaje junto con algunos demos y c\u00f3digo de ejemplo. al momento de descargarnos la librer\u00eda nos daremos cuenta de que se nos presenta 2 opciones:<\/p>\n<ul>\n<li>Developer<\/li>\n<li>Producction<\/li>\n<\/ul>\n<p><strong>Developer:<\/strong> al descargarnos la versi\u00f3n DEVELOPER estamos descargando la versi\u00f3n pesada de JQuery, es pesada debido a que dentro podremos ver el c\u00f3digo de JQuery de una manera m\u00e1s extensa y detallada, entender c\u00f3mo funciona JQuery e intentar programar o trastear con el c\u00f3digo, con el fin de crear algo nuevo.<\/p>\n<p><strong>Production:<\/strong> es la versi\u00f3n ligera de la librer\u00eda, esta no es f\u00e1cil de entender y pesa menos, este se usa como librer\u00eda del sitio web, ya que carga r\u00e1pido y tiene todas las instrucciones, adem\u00e1s de esto Jquery nos da la opci\u00f3n de no descargar la librer\u00eda, sino simplemente con 1 l\u00ednea de c\u00f3digo llamarlo directamente de internet, ahorr\u00e1ndonos as\u00ed unos Kb de informaci\u00f3n en el website o aplicaci\u00f3n de m\u00f3vil.<\/p>\n<p>El lema de JQuery es: \"Hacer mas escribiendo menos\" lo cual es necesario en el mundo digital, internet esta por todas partes y las paginas est\u00e1ticas son cosas del pasado, nuestros proyectos web deben tener elementos interactivos y efectos agradables al usuario, cosas que llamen la atenci\u00f3n y eso es precisamente JQuery.<\/p>\n<h2>Bibliografia:<\/h2>\n<ul>\n<li>http:\/\/en.wikipedia.org\/wiki\/JavaScript<\/li>\n<li>http:\/\/youtu.be\/mwVuURFNX0E<\/li>\n<li>http:\/\/youtu.be\/VRnQOcVclS8<\/li>\n<li>www.jquery.com<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Es necesario tener nociones sobre el desarrollo de sitios web para entender a la perfecci\u00f3n sobre que trata JQuery, empecemos por describir los componentes de un sitio web normal: HTML CSS Javascript Toda p\u00e1gina web puede ser separada en 3 &hellip; <a href=\"https:\/\/blog.espol.edu.ec\/seadtoha\/2013\/07\/03\/biblioteca-de-javascript-jquery\/\">Sigue leyendo <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":6024,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,296],"tags":[9426,2205,1956,3949,15],"class_list":["post-157","post","type-post","status-publish","format-standard","hentry","category-espol","category-tecnologia","tag-css","tag-html","tag-javascript","tag-jquery","tag-web"],"_links":{"self":[{"href":"https:\/\/blog.espol.edu.ec\/seadtoha\/wp-json\/wp\/v2\/posts\/157","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.espol.edu.ec\/seadtoha\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.espol.edu.ec\/seadtoha\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.espol.edu.ec\/seadtoha\/wp-json\/wp\/v2\/users\/6024"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.espol.edu.ec\/seadtoha\/wp-json\/wp\/v2\/comments?post=157"}],"version-history":[{"count":10,"href":"https:\/\/blog.espol.edu.ec\/seadtoha\/wp-json\/wp\/v2\/posts\/157\/revisions"}],"predecessor-version":[{"id":167,"href":"https:\/\/blog.espol.edu.ec\/seadtoha\/wp-json\/wp\/v2\/posts\/157\/revisions\/167"}],"wp:attachment":[{"href":"https:\/\/blog.espol.edu.ec\/seadtoha\/wp-json\/wp\/v2\/media?parent=157"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.espol.edu.ec\/seadtoha\/wp-json\/wp\/v2\/categories?post=157"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.espol.edu.ec\/seadtoha\/wp-json\/wp\/v2\/tags?post=157"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}