Saltar al contenido

1

Seguro que estas cansado de ver en PageSpeed Insights que tu web no esta optimizada por: "Quitar el JavaScript que bloquea la visualización de contenido"

De forma predeterminada, el código JavaScript bloquea la generación de DOM, lo que retrasa el primer renderizado. Por tanto, para que el código JavaScript no bloquee los analizadores, te recomendamos que introduzcas secuencias de comandos externas con el atributo HTML async. Por ejemplo:

<script async src="my.js">


Pero no todo es oro lo que reluce, la carga de ficheros javascript se genera de forma aleatoria y si tienes ficheros propios normalmente son más livianos que los que pertenecen al framework como puede suceder con jQuery provocando errores de ejecución al ejecutarse primer tu script antes de tener cargado jQuery.

Para ello la solución que se proponer es la siguiente,
empezamos con la carga del js de forma async:

<!DOCTYPE html>
<html>
    <head>
        <title>Prueba</title>
        <link href="hojadeestilos.css" rel="stylesheet" type="text/css">
        <script src="js/load_plus.js" type="text/javascript" <strong>async="async"</strong>></script>
    </head>
    <body>
        <div class="content">
        </div>
    </body>
</html>

Contenido del fichero load_plus.js:

function addEvent(element, event, fn) {
    if (element.addEventListener) {
        element.addEventListener(event, fn, false);
    } else if (element.attachEvent) {
        element.attachEvent('on' + event, fn);
    }
}
 
function loadScript(src, callback)
{
  var s,
      r,
      t,
      write;
 
  write = src.split("/");
  r = false;
  s = document.createElement('script');
  s.type = 'text/javascript';
  s.src = src;
  s.onload = s.onreadystatechange = function() {
    if ( !r && (!this.readyState || this.readyState == 'complete') )
    {
      r = true;
      if (callback !== undefined) {
        callback();
      }
    }
  };
  t = document.getElementsByTagName('script')[0];
  t.parentNode.insertBefore(s, t);
}
 
addEvent(window, 'load', function(){ loadScript(
        'http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js', 
        function () { loadScript('<strong>js/tu_script.js</strong>'); } );
});

Y el contenido de tu_script.js tendría que tener esta inicialización:

$(document).ready(function() {
    //funciones o ejecuciones utilizando jQuery $(...)...
});

En ocasiones vemos páginas, normalmente presentaciones de hoteles, casas rurales o otras que tienen que ser muy visuales y las resuelven con un fondo de pantalla que cambia constantemente y que da igual el tamaño porque se va redimensionando. Para conseguir este efecto podemos utilizar el plugin "Vegas" para jQuery.

Os dejo el enlace: http://vegas.jaysalvat.com/

Pinchar en "Documentation" donde os explica como ponerlo en vuestra web, es muy sencillo.

 

vegas

1

facebook-logo

 

Facebook no permite seleccionar de golpe todos los amigos que tienes para un evento, esta opción sería muy interesante para cuando tienes gran cantidad de amigos, por ejemplo en páginas donde te interesa promocionar algo a lo grande.

Existe una forma muy sencilla.

1- Crea el evento e indica que asistirás (siempre con la cuenta de administrador del evento)

2- Abre el cuadro de dialogo de amigos, bájalo hasta el fin

3- Utiliza Google Chrome, o Firefox con extensión Firebug y incluye en la barra de navegador

javascript: ema=document.getElementsByName("checkableitems[]" );for (count=0;count&lt;ema.length;count++){if (ema[count].type="checkbox" )ema[count].click()};

4- Espera a que se procesen y incluye el código de validación

5- Poco a poco, refrescando la página te aparecerán todos como invitados



			

La mejor forma de conectar los usuarios de Facebook con tu web y viceversa es con los plugins que existen en la API que proporciona Facebook, su uso es muy sencillo y prácticamente es copiar y pegar. No dejes de ponerlos si tienes una cuenta para tu web en Facebook, el Marketing 2.0 esta a la orden del día.

http://developers.facebook.com/docs/plugins/

Captura1

En ocasiones se nos plantea que en vez de dar el visto bueno con un mensaje, tengamos que redirigir un formulario con Contact Form 7 de WordPress a otra página de gracias.

Muy fácil, en ‘Additional Settings’  incluir:

on_sent_ok: "location = 'http://www.example.com/thank-you/';"

Pues este problema me traía de cabeza el otro día, y no es un problema de programación sino es porque el Firebug de Chrome esta a años luz del de Firefox... simplemente desactivalo y ya verás como funciona.

Imagínate que este el código que te falla:

$("#souper_fancy").focus(function() { $(this).select() });

Lo puedes solucionar así:

$("#souper_fancy").mouseup(function(e){
        e.preventDefault();
});

Además parece ser que sucede lo mismo con el método Onblur() y que también sucede en el navegador Safari

Captura

Dejo unos enlaces para construir las típicas cabeceras o galerias que se van moviendo... pero en JavaScript, concretamente utilizando jQuery. Y pongo puntos suspensivos porque no son en flash... odio el flash y eso que no soy Steve Jobs 🙂

páginas con jQuery:

 

Y una página con un Top23: http://www.geeksucks.com/toolbox/23-jquery-fade-in-fade-out-effect.htm

Es posible que en ocasiones con algun script de carga con ajax y habiéndolo mezclado con los "maravillosos" controles de .Net haga por algún sitio un postback, con lo que la carga inicial se vuelva a realizar...

pues bien para este caso y otros casos que sea necesario controlar el PostBack con Javascript, os dejo como controlarlo:

 

var prm = Sys.WebForms.PageRequestManager.getInstance();
if(!prm.get_isInAsyncPostBack()) {
// llamada
}

Dejo la página web:

http://www.pixeline.be/experiments/jqUploader/

Tiene demos.

Más de lo mismo:

http://www.phpletter.com/Our-Projects/AjaxFileUpload/

http://www.arzion.com/empresa-de-internet/posts/Subiendo-archivos-con-ajax-a-traves-de-JQuery