Archivos de la categoría ‘javascript’

Para mejorar el tiempo de respuesta cuando un usuario realiza la petición de una página larga o de gran tamaño, si esa página tiene imágenes que solo se verán si el usuario mueve la barra de desplazamiento “scroll”, he visto esta técnica en la página de Mashable.com, la han implementado con un plugin de jquery llamado Lazy Loader, hace todo lo opuesto a una precarga de imagenes, sino que realiza las peticiones al servidor de esas imagenes a medida que el usuario requiere verlas, segun se comenta el plugin esta inspirado en el YUI: Image Loader, que es un componente de YUI (como todos sabemos el Yahoo User Interface Library), si tienes un blog en wordpress te recomiendo estos sencillos tutoriales:

http://brandontreb.com/dynamically-load-wordpress-post-images-like-mashable-com/

http://www.hackingethics.com/blog/2010/04/12/how-to-add-lazy-loading-to-wordpress-page-fading-like-mashable/

Pero si lo quieres implementar sin tener wordpress aqui te dejo un tutorial (en ingles) muy bien explicado:

http://www.appelsiini.net/projects/lazyload

+info

Plugin JQuery Lazy Loader:
http://plugins.jquery.com/project/lazyload

YUI 2: Image Loader
http://developer.yahoo.com/yui/imageloader/

Fancy Form (Mootools) | Demo

Colorpicker (jQuery)

Smooth Scroll (JavaScript) | Demo

Upload Form (JavaScript)

jsvalidate (prototype and scriptaculous) | Demo

Unobtrusive Expand and Collapse Navigation | Demo

Y por si fuera poco aqui nos deja unos enlaces dignos de revisar:

80+ Ajax JavaScript Solutions or Professional Coding
http://www.smashingmagazine.com/2007/06/20/
ajax-javascript-solutions-for-professional-coding/

7 Tutorials to Design Modern
http://woork.blogspot.com/2008/09/
7-stunning-tutorials-to-design-modern.html

300 jQuery css, Mootools and js Navigation Menus
http://www.1stwebdesigner.com/recources/
300-jquery-css-mootools-and-js-navigation-menus/

75 Useful JavaScript Techniques
http://www.smashingmagazine.com/2008/09/11/
75-really-useful-javascript-techniques/

50 Amazing jQuery Examples
http://www.noupe.com/jquery/50-amazing-jquery-examples-part1.html

10 Cool jquery Plugins
http://www.invisiblewindow.com/web-development/
10-ber-cool-jquery-plugins

25 Ways to Improve your Site
http://fadtastic.net/2007/06/10/
25-ways-to-improve-your-site-today/

60+ Ajax dhtml and JavaScript libraries
http://www.smashingmagazine.com/2006/11/15/
ajax-dhtml-and-javascript-libraries/

Exploring Design Outstanding Start Pages
http://www.smashingmagazine.com/2007/07/17/
exploring-design-outstanding-start-pages/

Via:

http://www.myinkblog.com/2008/09/20/
enhance-your-web-designs-with-javascript-fuctionality/

Mike Malone escribio en su blog personal http://immike.net/blog/ un interesante post (traducido al castellano) “5 expresiones regulares que todo programador web debería saber” de la que yo destaco:

Encontrar un tag XHTML/XML
Reemplazar “tag” por el literal del nombre de la etiqueta

Encontrar un tag XHTML/XML con un atributo especifico
Reemplazar “tag” por el literal del nombre de la etiqueta y “attribute” por el literal del nombre del atributo

Un caso especial seria las etiquetas que no las cierran (siguiendo los estandares si deberia tener su etiqueta de cierre), como las imagenes:

regexp_matching_tag_img

Hace poco tuve que realizar una tarea para reemplazar un determinado tag y me fue muy útil. Si quieres verlas todas y en castellano puedes verlas en sentido web

Si quieres un ejemplo de utilizar expresiones regulares en javascript, aqui un documento de Mozilla

Además si tienes instalado la extensión para Firefox “Find Bar” creado por Dave Townsend, te permite buscar con expresiones regulares desde la barra de búsqueda:

Un articulo publicado en microsoft por Andy González nos da unos ejemplos de expresiones regulares como estas:

Original:
http://immike.net/blog/2007/04/06/
5-regular-expressions-every-web-programmer-should-know/

Via:
http://sentidoweb.com/2007/07/23/
5-expresiones-regulares-utiles-para-desarrollo-web.php

Guia Javascript: Expresiones Regulares
http://developer.mozilla.org/es/docs/
Gu%C3%ADa_JavaScript_1.5:Expresiones_Regulares

Guía Javascript: Trabajar con expresiones regulares (Mozilla Developer Center):
http://developer.mozilla.org/es/docs/
Gu%C3%ADa_JavaScript_1.5:Trabajar_con_expresiones_regulares

Sitio oficial de Find Bar:
http://www.oxymoronical.com/web/firefox/FindBarRX

Find Bar en Mozilla Firefox Add-ons:
https://addons.mozilla.org/es-ES/firefox/addon/6534

Ejemplos de Andy González en microsoft:
http://www.microsoft.com/spanish/msdn/articulos/archivo/
201205/voices/regex.mspx

Hace un tiempo la gente de Microsoft decidio que para usar un control flash (hablando con propiedad serían los elementos APPLET, EMBED y OBJECT) en internet explorer primero habia que activarlo, se mostraba un mensaje “Click to activate and use this control” (en inglés) y “Haga click para activar y usar este control” (en castellano) tal como lo muestran estas imagenes:

Click to activate and use this control Haga click para activar y usar este control

Según Microsoft sacarian en Abril del 2008 un parche para no hacer este click. Por ahora nos dan un preview (para ir probando las aplicaciones), si descargas e instalas este parche de microsoft ya no será necesario que actives un control flash antes de usarlo.

Descargar el parche:

http://support.microsoft.com/kb/945007

Información acerca del componente ActiveX:

http://msdn2.microsoft.com/en-us/bb969055.aspx

Aunque algunos de nosotros ya sabiamos que usando javascript podiamos esquivar esta previa activación del control, de la siguientes formas:

Usando document.write:


var obHTML = '<object ...>' +
  '<param name="URL" value="example.mpeg">'+
  '<embed src="example.mpeg" ...>'+
  '<\/object>';
//the next line needs to be in an external file
document.write(obHTML);

Usando innerHTML


var obHTML = '<object ...>' +
  '<param name="URL" value="example.mpeg">'+
  '<embed src="example.mpeg" ...>'+
  '<\/object>';
//the next line needs to be in an external file
document.getElementById('containobj').innerHTML = obHTML;

Usando DOM


var newOb = document.createElement('object');
//the next line needs to be in an external file
document.getElementById('containobj').appendChild(newOb);
newOb.width = '100';
newOb.height = '100';
newOb.URL = 'example.mpeg';

También habia código de software propietario como Dreamweaver (antes Macromedia ahora Adobe). Insertaba una JS en tú página web:


<script src="AC_RunActiveContent.js" language="javascript"></script>

y luego insertaba las siguientes lineas donde querias insertar el objeto flash:


<script language="javascript">
if (AC_FL_RunContent == 0) {
alert("This page requires AC_RunActiveContent.js");
} else {
AC_FL_RunContent(
'codebase', 'https://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0',
'width', '200',
'height', '200',
'src', 'yourswffile',
'quality', 'high',
'pluginspage', 'https://www.macromedia.com/go/getflashplayer',
'align', 'middle',
'play', 'true',
'loop', 'false',
'scale', 'noscale',
'wmode', 'window',
'devicefont', 'false',
'id', 'flash-animations',
'bgcolor', '#eeeeee',
'name', 'yourswffile',
'menu', 'false',
'allowScriptAccess','sameDomain',
'movie', 'yourswffile',
'salign', ''
);
}
</script>
<noscript>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="https://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="200" height="200" id="flash-animations" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="flash-animations.swf" />
<param name="loop" value="false" />
<param name="menu" value="false" />
<param name="quality" value="high" />
<param name="bgcolor" value="#eeeeee" />
<embed src="flash-animations.swf" loop="false" menu="false" quality="high" bgcolor="#eeeeee" width="200" height="200" name="flash-animations" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="https://www.macromedia.com/go/getflashplayer" />
</object>
</noscript>

Descargar ejemplo y archivos javascript de adobe (macromedia):
http://download.macromedia.com/pub/developer/activecontent_samples.zip

Información de Adobe:
http://www.adobe.com/devnet/activecontent/articles/devletter.html

Información de microsoft:
http://msdn2.microsoft.com/en-us/library/ms537508.aspx

Post de IEBlog:
http://blogs.msdn.com/ie/archive/2007/11/08/
ie-automatic-component-activation-changes-to-ie-activex-update.aspx
click_to_activate_calendar

Información de adobe:
http://kb.adobe.com/selfservice/viewContent.do?externalId=7c29e252&sliceId=1

Links de referencia:
http://www.amarasoftware.com/flash-problem.htm
http://www.howtocreate.co.uk/noclicktoactivate.html

Tal parece que algunos han tenido problemas con el javascript del dreamweaver y usan como alternativa el:

SWFObject: Javascript Flash Player detection and embed script

Incluir la cabecera del JS

<script type="text/javascript" src="swfobject.js"></script>

Poner un div en caso no se pueda visualizar contenido en flash

<div id="flashcontent">
  This text is replaced by the Flash movie.
</div>

y luego utilizar la función javascript para mostrar flash:

<script type="text/javascript">
   var so = new SWFObject("movie.swf", "mymovie", "400", "200", "8", "#336699");
   so.write("flashcontent");
</script>

Descargar:
http://blog.deconcept.com/swfobject/swfobject.zip

Página oficial:
http://blog.deconcept.com/swfobject/

JSLint es una herramienta escrita por Douglas Crockford para validar nuestro código javascript, nos muestra advertencias, errores y mensajes de como reemplazar una linea de codigo por otro más robusto, es el caso de los operadores de comparación (en inglés: comparison operators) también llamados operadores condicionales, el caso concreto de “es igual” y de “no es igual”.

Para dar un poco más de información de JSLint se debe decir que también fue incluida en la pestaña “Tools” de la extensión YSlow (extensión para firebug).

Bueno sigamos con los operadores de comparación, JSLint nos recomienda que cuando comparemos una variable con un valor booleano ó null ó undefined debemos hacerlo con los operadores de “igualdad absoluta” y la de “no igualdad absoluta”, en los dos comparadores anteriores se compara tanto en valor como en tipo, mientras que en los comparadores “es igual” y “no es igual” solo se compara por valor, para demostrarlo hagase un pequeño ejemplo:

var x = 5;
var y = "5";

alert( x == y );        // true
alert( x === y );       // false

Esto sucede debido a que en la primera comparación verifica que tienen el mismo valor, y en la segunda comparación verifica ademas de su valor el tipo.Es por este motivo que JSLint nos recomienda que debemos usar la comparación absoluta, cuando deseamos que un valor booleano se corresponda con lo que nosotros esperamos de la comparación. Otros ejemplos más avanzados serian:

var x = undefined;

alert( x == null );        // true
alert( x === null );       // false

Por esta razón dependendiendo del resultado de esta condición que necesitemos nos convendrá segun que operador utilizar. Por supuesto apostando por las buenas practicas se recomienda, que al comparar con boolenaos, null y undefined se utilice la comparación absoluta, sobre todo cuando tenemos un “else” que depende de la condicion del “if” es decir:

if ( x === true)
if ( x === false)
if ( x === "" )
if ( x === null )
if ( x === undefined )

if ( x !== true)
if ( x !== false)
if ( x !== "" )
if ( x !== null )
if ( x !== undefined )

Pagina Oficial de JSLint:
http://www.jslint.com/Página de Douglas Crockford:
http://www.crockford.com/