martes, 8 de enero de 2013

FanBox de Facebook personalizado V1.0

1/08/2013

varias web que e visitado encuentro los widgets de distintas redes sociales pero casisiempreson las mismas ,los mismos colores la mismapresentaciónen fin me gusta la originalidad y dar un mejor aspecto a todo lo que este a mialcanceasíque les presento una forma de como poder personalizar el FanBox de Facebook asu gusto, loúnicoque tienen que hacer es modificar el archivo CSS cuyo nombre esstyle_face.css

Instalación
vaya a Diseño- añadir un gadget y escoja laopción HTML/JAVASCRIPT y pegue el siguientecódigo

script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US"/script
script src="http://connect.facebook.net/en_US/all.js#xfbml=1"/script
fb:fan profile_id="166082340135951" stream="0" connections="10" logobar="0" width="300" css="https://sites.google.com/site/javafaceblogger/fileblogger/style_face.css?12450"/fb:fan
div style="font-size:10px; padding-left:10px; text-align:left"Add Widget/
a href="http://javaface-elblogdelprogramador.com/"By JavaFace-elblogdelprogramador/a/div

Parametros
tenga en cuenta lo siguiente:

profile_id: aqui debera de colocar el ID de su FanPage.
css: aqui colocara ladirecciónde donde esta alojado su archivo css,una cosa importante comopodráobservar al finalizar la extencion de archivo .css notara un el signo ? y un numero cada prueba que hagadeberácambiar el numero ya que facebook almacena en la cache y si no llegara a cambiar el numero no vera cambio alguno por que mostrara el estilo anterior.
Si llegaran a tener algun problemaavísenme.


domingo, 6 de enero de 2013

Menú estilo ModernUI con Ajax y JQuery para blogger

1/06/2013

EsteMenúde navegación para blogger es muy nuevo widget creado por Harish(way2blogging) en la plataforma de Blogger que utiliza JSON feed Blogger API y AJAX. yo lo he mejoradodándoleuna apariencia ModernUI ,este menu sigue siendo un menunormal con capacidad desplegable donde podemos mostrar los postsegúnsea lacategoríao etiqueta pueden ver un ejemplo en esteeste Blog de Pruebas,comohabránobservado al pasar el cursor sobre el MenuCategoríase despliega las etiquetas y las ultimas entradas de cada una mostrando una imagen y el titulo de la entrada.

Instalación
nos dirigimos a Pantilla EdiciónHTML una vez dentro ,CTRL-F y buscamos /b:skin antes de esta linea peque lo siguiente .
.modern *{margin: 0;padding: 0;}
ul.modern {list-style: none;line-height: 1;}
ul.modern:after{margin: 0;padding: 0;content: ' ';display: block;height: 0px;clear: both;}
ul.modern li{
 position:relative;
 float: left;
 margin: 0 !important;
 padding: 0 !important;
}
ul.modern li a{/*estilo del texto menu y items*/
 text-decoration:none;
 margin: 5px;
 padding: 12px 18px !important;
 color: #fefcff !important;
 font:20px Georgia;
 display: block !important;
 border: 0 none !important;
 background: #2d85f2;
 
 }

ul.modern li a:hover{background: #c638ef !important;}/*hover menus*/
ul.modern ul{
  position: absolute;
  display: none;
  top: 100%;
  border:1px solid #ccc;
}
ul.modern ul li{
 float: none;
 min-width: 160px;
 background:#f03d46;
 text-shadow: none;
 }
ul.modern ul li a{
padding: 12px 14px;
font-weight: normal;
}

ul.modern ul li a:hover{/*hover items*/
 background: #c638ef !important; 
}
ul.modern ul ul{display: none;left: 100%;top: 0;}
/* MENU TIPO AJAX */
ul.menumodern li div.submenu {/*estilo contenedor de los post*/
display: none;position: absolute;
width: 600px;
z-index: 90;
left: -1px;
top: 100%;
overflow: hidden;
min-height: 150px;
background: #f2f2f2;
border:1px solid #cccccc;
border-top: 0 none;
}
ul.menumodern li:hover div.submenu {display: block;background: #e3e2e2;box-shadow: 0px 0px 2px #000;}
ul.menumodern ul ,ul.menumodern ul li{
display: block !important;border: 0 none !important;margin: 0 !important;padding:0 !important;}
ul.menumodern ul li{
 background: none !important;
 float: none !important;
}

ul.menumodern ul.verticlemenu{/*estilo contenedor de las categorias o items*/
 position: absolute;
 width: 33%;
 left:0;
 top:0;
 bottom: 0;
 background: #f2f2f2;
 }
ul.menumodern ul.postslist {
 position: relative;
 display: block;
 width:65%;
 float: right;margin: 8px 0 !important;
 background: none;
 }

ul.menumodern ul.postslist li{
display: block;
overflow: hidden;
border-bottom: 1px #eee solid;
position: relative;min-height: 60px;
padding: 8px 8px 8px 110px !important;
}
ul.menumodern ul.postslist li:last-child{border-bottom: none 0;}

ul.menumodern ul.postslist li .imgCont{
position: absolute;
left: 0;
top:8px;
width: 100px;
height: 60px;
overflow: hidden;
border:1px solid #dcdcdc;
font-size: 0;line-height: 0;
box-shadow: 0px 0px 2px #000;
}
ul.menumodern ul.postslist li .imgCont img{
  position: relative;
  top:-20px;
  padding: 0;
  width: 100px;
  height: 100px;
  }
ul.menumodern ul.postslist li a{
 font:17px Georgia;
 display: block;
 line-height: 1.4;
 padding: 0 !important;
 background: #6907b5;
 text-align:left;
 }

ul.menumodern ul.postslist li a:after{
   content:"";
   position:absolute;
   top:13px;
   left:106px;
   width:0;
   border-top:10px solid #6907b5;
   border-left:10px solid transparent; 
}
ul.menumodern ul.postslist li a:hover:after{
   content:"";
   position:absolute;
   top:13px;
   left:106px;
   width:0;
   border-top:10px solid #c638ef;
   border-left:10px solid transparent; 
}
ul.menumodern .loader{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcHET74QitnQeklrtVGD03E4GbA-EMtayWtUkwZ0rsUKdSg4Md-BOn6q9aE7sGoK19SlCjVOY4XmLdAEqtiBhrgRjzFi_HhU4A_xlwf1_iQN_Wlh7C80pwtHYpX5HuyQlXX-6Azg5KFD8/s16/ajax-loader.gif') no-repeat scroll 0 0 transparent;
width:22px;
height:22px;
position: absolute;
top:50%;
margin-top: -11px;right:5px;
}
ul.menumodern .menuArrow {
border-bottom: 4px solid transparent;
border-top: 4px solid transparent;
border-left: 4px solid #999999;
display: block;height: 0;
margin-top: -4px;
position: absolute;
right: 11px;top: 50%;width: 0;
}
#menumodern {
overflow:visible; 
display:inline-block; 
position: fixed;
top: -2%;
left:0%;
width: 100%;
background: #1d70f8;
box-shadow: 0px 0px 2px #000;
}

este es el estilo del menu si los colores no son de su agrado hay partes comentadas donde podrá cambiar cada parte del menu.
ahora busque la siguiente etiqueta/head y antes de esta pegue el siguiente script(no olvide tener instalado el JQuery para que pueda funcionar el menu sin problemas).
script type="text/javascript"
//![CDATA[
(function(e){var t=function(e,t){this.elem=e;this.settings=t;this.addAjaxHtml();this.ajaxcall=null;this.lielem=this.elem.find(".verticlemenu li a");this.menuHelper(this.elem);this.addEvents()};t.prototype={regex:{islabel:new RegExp("/search/label/","g"),issearch:new RegExp("[?&]q=","g"),labelsearch:new RegExp("(http://[^/]+)/search/label/([^/?&]+).*[?&]q=([^$&]+)(?:[^$]+)?","g"),label:new RegExp("(http://[^/]+)/search/label/([^/?&$]+)","g"),search:new RegExp("(http://[^/]+)/search/?[?&]q=(.*)","g")},addEvents:function(){var t=this;this.lielem.hover(function(){if(e(this).data("menuloaded")!=="true"){t.li=e(this);t.url=t.li.attr("href");t.container=t.li.closest("ul").siblings("ul");t.hoverOver()}},function(){t.hoverOut()})},hoverOver:function(){var t=this;this.getAJAXUrl();if(!this.ajaxUrl)return;this.ajaxcall=e.ajax({type:"GET",url:t.ajaxUrl,dataType:"jsonp",data:t.ajaxData,beforeSend:function(){t.showLoader()},success:function(e){t.hideLoader();t.addArrow();t.showPosts(e)},error:function(e){t.showError(e)}})},hoverOut:function(){this.ajaxcall.abort();this.hideLoader()},getAJAXUrl:function(){if(this.url){var e=this;this.ajaxData={alt:"json","max-results":this.settings.numPosts};this.url.search(this.regex.islabel)!==-1&&this.url.search(this.regex.issearch)!==-1?this.ajaxUrl=this.url.replace(this.regex.labelsearch,function(t,n,r,i){e.ajaxData.q=i;return[n,"/feeds/posts/default/-/",r,"/"].join("")}):this.url.search(this.regex.islabel)!==-1&&this.url.search(this.regex.issearch)===-1?this.ajaxUrl=this.url.replace(this.regex.label,function(t,n,r){delete e.ajaxData.q;return[n,"/feeds/posts/default/-/",r,"/"].join("")}):this.url.search(this.regex.islabel)===-1&&this.url.search(this.regex.issearch)!==-1?this.ajaxUrl=this.url.replace(this.regex.search,function(t,n,r){e.ajaxData.q=r;return[n,"/feeds/posts/default"].join("")}):this.ajaxUrl=!1}else this.ajaxUrl=!1},showLoader:function(){e("span/span",{"class":"loader"}).appendTo(this.li.closest("li"))},hideLoader:function(){this.li.closest("li").find("span.loader").remove()},showPosts:function(t){var n=this,r=[],i,s,o;t.feed.openSearch$totalResults.$t0?e.each(t.feed.entry,function(t,u){i=u.title.$t;e.each(u.link,function(e,t){t.rel==="alternate"?s=t.href:s="#"});o=u.media$thumbnail?u.media$thumbnail.url.replace(//s72-c//,"/s100-c/"):n.settings.defaultImg;r.push('lispan class="imgCont"img alt="',i,'" src="',o,'"//spana rel="nofollow" title="',i,'" href="',s,'"',i,"/a/li")}):r.push("h5","Sorry!!,No hay post que cargar","/h5");this.container.html(r.join(""));this.lielem.removeData("menuloaded");this.li.data("menuloaded","true")},showError:function(e){if(e.statusText==="error"){this.hideLoader();this.addArrow();this.container.html("h5Error!! No se pudo obtener las publicaciones de blog!/h5")}},addArrow:function(){this.lielem.closest("li").find("span").remove();this.lielem.removeClass("hoverover");this.li.addClass("hoverover");e("span/span",{"class":"menuArrow"}).appendTo(this.li.closest("li"))},menuHelper:function(t){var n=this;t.find("li").hover(function(){var t=e(this);t.find("a:first").addClass("hoverover");var r=e(this).find("ul.verticlemenu li").height()*e(this).find("ul.verticlemenu li").length;t.find("ul.postslist").css({"min-height":r+"px"});n.requestFirstAjax(t)},function(){e(this).find("a:first").removeClass("hoverover")})},addAjaxHtml:function(){this.elem.find("ul ul").remove();this.elem.addClass("menumodern").find("li").find("ul:first").addClass("verticlemenu").wrap(e("div/div",{"class":this.settings.divClass}));e("ul.verticlemenu").after(e("ul/ul",{"class":"postslist"}))},requestFirstAjax:function(e){e=e.find(".verticlemenu li:first-child a");this.url=e.attr("href");this.container=e.closest("ul").siblings("ul");this.li=e;this.hoverOver()}};e.fn.ajaxBloggerMenu=function(n){var r={numPosts:4,divClass:"submenu",postsClass:"postslist",defaultImg:"/default.png"},i=e.extend({},r,n);return this.each(function(){var n=new t(e(this),i)})}})(jQuery);
//
/script
script type="text/javascript"
jQuery(document).ready(function($) {
 jQuery.noConflict();
 jQuery('#menumodern').ajaxBloggerMenu({
  numPosts : 6, // numeros de post o entradas a mostrar
  defaultImg : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsXRLIOIgXYUX4OLzapD9jTcOdv-3BSOIZgk0UzqUxhZTTr30km_bW3d5L0NHu0UAXMd6lyiiLRkrIWzHzOu_K3HoDmB7Ex_-pSq2vWs7f815qTyrAsVSjTH4be7xsBLKZaOaPslP_4Ss/s90/no-avatar.png' // 
  //imagen por defecto
 });
});
/script

Si llegara a teneralgúnproblema con elmenúque no despliega su contenido elimine elcódigojQuery.noConflict(); y reemplaze el jQuery por la variable $

Construcciónde losMenúsy las Etiquetas
una vez ya instalado el estilo(Css) y los script, procedemos a crear el menu para ello busque la etiqueta/body , recuerde realizar la busqueda con CTRL-F.despuésde esta etiqueta peque el siguientecódigo.

ul id="menumodern" class="modern"
 li
  a expr:href='data:blog.homepageUrl' title='Inicio'Inicio/a
 /li
 li
  a href="#"Categorias/a
  ul
   lia href="http://www.javaface-elblogdelprogramador.com/search/label/JAVA"Java/a/li
   lia href="http://www.javaface-elblogdelprogramador.com/search/label/Programas"Programas/a/li
   lia href="http://www.javaface-elblogdelprogramador.com/search/label/Tutoriales"Tutoriales/a/li
   lia href="http://www.javaface-elblogdelprogramador.com/search/label/Blogger"Blogger/a/li
        /ul
 /li
  
/ul

comopodráobservar en losvínculosde laseccióncategoríacolocamos ladirecciónde la etiqueta ocategoríaque desee mostrar en elmenú¿Como obtenemos estasdirecciónes?. solo basta que tenga instalado en su blogg el gadget etiquetas y dar clic a una de ellas en la parte superior del navegadorapareceráladirecciónque necesitamos.
Si se desea colocar masmenússolo deben de añadir el siguientecódigo.
li
a href='#' title='Contactame'Contactos/a
/li

Ahora si desea colocar mas secciones que muestren entradas solo debe de hacer lo siguiente
li
a href="#"Programacion/a
ul
li
a href="http://www.javaface-elblogdelprogramador.com/search/label/JAVA"Java/a/li
li
a href="http://www.javaface-elblogdelprogramador.com/search/label/C#"C#/a/li
/ul
/li


miércoles, 2 de enero de 2013

Descargate este MegaPack de tutoriales J2ME mas 17 ejmplos

1/02/2013

Java 2 Micro Edition (J2ME), es una especificación de un subconjunto de la plataforma Java orientada a proveer una colección certificada de APIs de desarrollo de software para dispositivos con recursos restringidos. Está orientado a productos de consumo comoPDAs,teléfonos móviles oelectrodomésticos.

Contenido del MegaPack
Manual de eclipse para desarrollo de aplicaciones ME
Programacion J2ME con Netbeans
MGMaps J2ME mapping lib tutorial
Java a Tope (J2ME)
J2ME: Step by step
Tutorial para aplicaciones móviles J2ME con NetBeans y Mobility Pack
J2ME-Tutorial
como crear una aplicación J2ME en netbeans(Video)
crear una calculadora en J2ME con netbeans (Video)
17 ejemplos

DESCARGAR

Como aumentar la Velocidad de nuestro Blogg o Web

1/02/2013

Eldíade ayer me di cuenta que varios servicio comoGoogle Site, SkyDriver entre otros no permiten almacenar archivos o script para nuestras webs por elsimplehecho que poseen licencia bueno aya ellos con sus normas les voy a enseñar unasoluciónpara no depender de servidores como estos y aumentar la velocidad de su blogg.

Como la granmayoríade los Webmaster utilizamosJQuery como un script indispensables para tener efectos agradables pero estalibreríatenemos que alojarla en un servidor de archivos y como no se puede subir archivos con licencia podemos hacer lo siguiente :

script type='text/javascript'
//![CDATA[
el contenido

//
/script
Con la sección CDATA que es una norma del XML podemos crear documentos con cualquier tipo de caracteres es decir , que es ideal para colocar cualquier contenido en este caso el JQuery, de esta manera tendremos estalibreríaen la plantilla y ya no dependeremos de alojarlo en servidores lo cual pone un poco lento a nuestro blogg. ladesventaja de utilizar estemétodoes que la Plantilla va a crecer.

Ahora lasimágenes!.

entre masimágenestenga tu blogg o web mas va a demorar la carga de este. entonces una posible idea seria de combertir lasimágenesa base64(que es un sistema de cifrado que utiliza unanumeraciónposicional que usa 64 como base),estemétodode cifrado podemos usarlo en Html, Css, y JS gracias alDATA URL.
pero antes de usarlo tenemos que transformar la imagen puede ir a unConversor Base64


añaden la imagen que van a convertir y clic en elbotónconvertiryobtendránrápidamenteelcódigoBase64,lo copian completamente ypodráncolocarlo en su blogg como si fuera ladirecciónde una imagen.
ejemplo:
img src=" data:image/png;base64,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" alt="Mi maravillosa imagen"
eso seria en codigo Html y en css seria asi:

background-image: url(data:image/png;base64,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);

Comopodránobservaruna de las desventajas de utilizar estemétodoes que elcódigoes demasiado grande y la imagen entre mas grande sea mas grande sera elcódigoles recomiendo queutilicenestemétodoen el fondo de su blogg o web.

Utilizando el Plugin Lazy Load (Ultimaversión2012)
este plugin lo que hace es cargar lasimágenessolo cuando el visitante ingrese a un determinado post o entrada aumentando la carga del blog.

Instalación

script type='text/javascript'
//![CDATA[
(function(a,b){var c=a(b);a.fn.lazyload=function(d){function h(){var b=0;e.each(function(){var c=a(this);if(g.skip_invisible&&!c.is(":visible"))return;if(!a.abovethetop(this,g)&&!a.leftofbegin(this,g))if(!a.belowthefold(this,g)&&!a.rightoffold(this,g))c.trigger("appear"),b=0;else if(++bg.failure_limit)return!1})}var e=this,f,g={threshold:0,failure_limit:0,event:"scroll",effect:"show",container:b,data_attribute:"original",skip_invisible:!0,appear:null,load:null};return d&&(undefined!==d.failurelimit&&(d.failure_limit=d.failurelimit,delete d.failurelimit),undefined!==d.effectspeed&&(d.effect_speed=d.effectspeed,delete d.effectspeed),a.extend(g,d)),f=g.container===undefined||g.container===b?c:a(g.container),0===g.event.indexOf("scroll")&&f.bind(g.event,function(a){return h()}),this.each(function(){var b=this,c=a(b);b.loaded=!1,c.one("appear",function(){if(!this.loaded){if(g.appear){var d=e.length;g.appear.call(b,d,g)}a("img /").bind("load",function(){c.hide().attr("src",c.data(g.data_attribute))[g.effect](g.effect_speed),b.loaded=!0;var d=a.grep(e,function(a){return!a.loaded});e=a(d);if(g.load){var f=e.length;g.load.call(b,f,g)}}).attr("src",c.data(g.data_attribute))}}),0!==g.event.indexOf("scroll")&&c.bind(g.event,function(a){b.loaded||c.trigger("appear")})}),c.bind("resize",function(a){h()}),a(document).ready(function(){h()}),this},a.belowthefold=function(d,e){var f;return e.container===undefined||e.container===b?f=c.height()+c.scrollTop():f=a(e.container).offset().top+a(e.container).height(),f=a(d).offset().top-e.threshold},a.rightoffold=function(d,e){var f;return e.container===undefined||e.container===b?f=c.width()+c.scrollLeft():f=a(e.container).offset().left+a(e.container).width(),f=a(d).offset().left-e.threshold},a.abovethetop=function(d,e){var f;return e.container===undefined||e.container===b?f=c.scrollTop():f=a(e.container).offset().top,f=a(d).offset().top+e.threshold+a(d).height()},a.leftofbegin=function(d,e){var f;return e.container===undefined||e.container===b?f=c.scrollLeft():f=a(e.container).offset().left,f=a(d).offset().left+e.threshold+a(d).width()},a.inviewport=function(b,c){return!a.rightofscreen(b,c)&&!a.leftofscreen(b,c)&&!a.belowthefold(b,c)&&!a.abovethetop(b,c)},a.extend(a.expr[":"],{"below-the-fold":function(b){return a.belowthefold(b,{threshold:0})},"above-the-top":function(b){return!a.belowthefold(b,{threshold:0})},"right-of-screen":function(b){return a.rightoffold(b,{threshold:0})},"left-of-screen":function(b){return!a.rightoffold(b,{threshold:0})},"in-viewport":function(b){return!a.inviewport(b,{threshold:0})},"above-the-fold":function(b){return!a.belowthefold(b,{threshold:0})},"right-of-fold":function(b){return a.rightoffold(b,{threshold:0})},"left-of-fold":function(b){return!a.rightoffold(b,{threshold:0})}})})(jQuery,window)
//
/script
script type="text/javascript"
jQuery.noConflict();
  jQuery("img.lazy").lazyload({
    effect: "fadeIn"
  }); 
/script


Recuerden tener instalado la ultimaversióndel JQuery para que pueda funcionar el plugin y colocarlo antes de la etiqueta/head.

de esta forma aumentarasconsiderablementela carga tu tu sitio web si llegaran a saber otras formas por favordíganmelas ,el conocimiento es de todos :).



martes, 1 de enero de 2013

Custom FanBox de Twitter con JQuery y Css V1.0

1/01/2013
Hay varios Gadgets para mostrar los seguidores deTwitter unos simples y otros como este bastantes llamativos y configurables (personalizables), este FanBox lo saqueJobysBlog el cual lo he personalizado ami gustodándoleotro aspecto,ustedestambiénpueden hacerlo sinningúnproblema modificando el archivo Css cuyo nombre escss-twitter.

Instalación (vinculos actualizados por problema con GoogleSite)

Paso 1)

ir aPlantilla clic enpersonalizar , CTRL-F y buscaremos la etiqueta/head y pegar justo arriba de ella el siguientecódigo.






Previamente debera tener instalado el JQuery en su sitio,clic enGuardar Plantilla, ahora vaya aDiseño ,clic en añadir un gadget y agregue un gadget tipoHtml/JavaScript y pegue el siguiente codigo.

div id="fanboxTwitter"
/div


ParámetrosJS (Personalización)
por defecto el gadget vendra con colores ya establecidos pero usted lo puede modificarsegúnsea su gusto ycombinaciónde los colores de su web o blogg

user : nombre del usuario de twitter.
skin:deberáde colocar custom para que funcione los de masparámetros.
height: alto del gadget.
width: ancho del gadget.
bg_color: color de fondo.
bg_image: si se desea colocar una imagen de fondo.
title_color_user: color del nombre del usuario.
total_count_color: color del contador de seguidores.
follower_name_color: color del nombre de los seguidores.
titlefirst: recibe cualquier texto que se desee colocardespuésdel numero de seguidores.
titlefirst_color: color del texto que se añadedespuésdel numero de seguidores.
titlelast: recibe cualquier textodespuésdel nombre del usuario.
titlelast_color: color del texto que se añadedespuésdel nombre del usuario.

Nota : para copiar el codigo CTRL-C




Cosas que debes de saber antes de instalar JQuery en tu web o Blogg

1/01/2013

jQuery es una librería de JavaScript, su principal utilidad es dar un acceso más claro y sencillo a los elementos de la web,esfácilde instalar solo debes de ir ala pagina oficialJQUERY y descargar el fichero js y subirlo a un servidor .
y colocar la siguiente linea decódigoantes odespuésde la etiqueta/head



¿Pero que hay que saber antes de instalar el JQuery?

Paso 1 (Actualización)

Asegúresede utilizar la ultimaversiónJQuery,asícomo van existiendo navegadores mas actualizados usteddeberáde tener en su web o Blogg la ultimaversiónJquery con el fin de solucionar cualquier error que se aya presentado anteriormente.

Paso 2(Evitar Replicas)

Varios efectos o script ,ejemplos,que usted observe en la webpodrádarse cuenta que cada uno de estos ya posee la linea decódigoJQuery , esto no quiere decir que deba de colocar varias lineas jquery en su web No! solo basta con colocar una sola linea antes odespuésde la etiqueta/head ,esto es con el fin de evitar mas carga de archivos(volver lento al blogg ),posibles errores de compatibilidad con los script que utilizan JQuery para poder funcionar.

Paso 3 (Protocolos)

Si llegara usted a subir el JQueryalgúnservidor de archivos pueda queexistala posibilidad al momento de obtener el link odireccióndel archivo con el protocolo HTTPS,modifique lodeinmediatopor el protocolo HTTP solo tiene que eliminar la S,pero por que?daríaserios problemas al momento de guardarciertosdatos en la cache y por experiencia yo ya he tenido problemas hace poco coloque el script del jquery sin eliminar la S por lo que me bloqueo el ingreso a mi sitiodándomedolores de cabeza para poder ingresar.

Paso 4(URL Relativa)(Opcional)

como vimos en el paso 3 los protocolestambiénpodemos eliminarlos completamente dejando aladirecciónde en donde esta alojado el JQuery sinningúnprotocolo a esto se le llama url relativa es decir ladirecciónquedaria asi : //ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js

Paso 5 (Incompatibilidad)

cuando ya se tenga instalado Jquery y tenga la necesidad de agregar mas script o otraslibreríascomoScriptaculous, Prototype ,Mootools, Jindocombinacionescomoeasyslider ,lightbox , sonincompatiblescon JQuery y dan problemas pero existe unafunciónque se llamajQuery.noConflict();
¿Pero que hace estafunción?
lo que hace escederel control al JQuery sustituyendo la variable $ por JQuery ejemplo:
Script original




Script Modificado


Des esta forma con lafunciónnoConflict() no setendránproblemas y la granmayoríade laslibreríasseráncompatibles y funcionaran correctamente,yo en lo personal lo utilizo siempre con lafunciónnoConflict() uno como programador nunca sabe si va a utilizar otralibreríaen sus proyectos por eso siempre lo uso.

Suscribirse a: Entradas (Atom)