Javascript y PHP: recursos y explicaciones - por IUGO http://www.iugo.com.uy/blog PHP y JavaScript claro y sencillo, por IUGO software & design studio Thu, 17 Nov 2011 20:49:58 +0000 en hourly 1 http://wordpress.org/?v=3.1.3 IUGO estrena web! http://www.iugo.com.uy/blog/index.php/estrenamos-nueva-web/ http://www.iugo.com.uy/blog/index.php/estrenamos-nueva-web/#comments Thu, 17 Nov 2011 20:49:04 +0000 alfonso http://www.iugo.com.uy/blog/?p=392 Re-diseñamos por completo nuestra web, esperamos sus comentarios!

www.iugo.com.uy

]]> http://www.iugo.com.uy/blog/index.php/estrenamos-nueva-web/feed/ 0 Precargar imágenes con jQuery http://www.iugo.com.uy/blog/index.php/precargar-imagenes-con-jquery/ http://www.iugo.com.uy/blog/index.php/precargar-imagenes-con-jquery/#comments Tue, 08 Nov 2011 20:49:10 +0000 gonzalo http://www.iugo.com.uy/blog/?p=268 Muchas veces nuestros sitios web tienen imágenes que necesitamos precargar, un claro ejemplo en el que resulta útil hacer esto es cuando nuestro sitio tiene efectos de “rollover” sobre las imágenes. Resulta bastante molesto cuando pasamos el mouse sobre una imágen y ésta queda en blanco hasta que termina de descargarse la imágen que debería verse al hacer rollover. Y cuando hablamos de rollover no sólo nos referimos a efectos realizados utilizando funciones en javascript, tambien se incluye, por ejemplo, cuando cambiamos el “background” de algo, en su estado hover

a.linkConRollover:hover {
background-image: url(imagen-over.jpg);
}

En este caso, sería bueno precargar la imagen “imagen-over.jpg” para que al pasar el mouse por primera vez sobre un  hipervínculo con estilo “linkConRollover” no debamos esperar a que se cargue dicha imagen.  Para eso podemos usar una función muy muy muy sencilla:

jQuery.precargarImg = function() {
for(var i=0; i
jQuery("").attr("src", arguments[i]);
}

 

El código completo a incluir en nuestra etiqueta head sería:


<script src="jquery.min.js" language="javascript"></script>
<script>
jQuery.preloadImages = function() {
for(var i = 0; i<arguments.length; i++){
jQuery("<img>").attr("src", arguments[i]);
}
$.preloadImages("pics/pic1.jpg","pics/pic2.jpg","pics/pic3.jpg");
</script>

]]> http://www.iugo.com.uy/blog/index.php/precargar-imagenes-con-jquery/feed/ 1 Nos renovamos! http://www.iugo.com.uy/blog/index.php/nos-renovamos/ http://www.iugo.com.uy/blog/index.php/nos-renovamos/#comments Tue, 08 Nov 2011 20:47:16 +0000 alfonso http://www.iugo.com.uy/blog/?p=382 Para estar a tono con la próxima versión de la web de IUGO, renovamos la imagen del blog. Espramos que sea más cómodo para leer. Dejen su opinión!

]]> http://www.iugo.com.uy/blog/index.php/nos-renovamos/feed/ 0 Ventanas modales con jQuery, de manera simple http://www.iugo.com.uy/blog/index.php/ventanas-modales-con-jquery-de-manera-simple/ http://www.iugo.com.uy/blog/index.php/ventanas-modales-con-jquery-de-manera-simple/#comments Mon, 07 Feb 2011 00:20:35 +0000 admin http://www.iugo.com.uy/blog/?p=375

Reveal es un plugin para jQuery que permite implementar ventanas modales elegantes de manera muy sencilla.

Las ventanas modales pueden ser customizadas si se desea, aunque el diseño por defecto es muy bueno. El plugin es compatible con todos los navegadores modernos, y muy liviano (1.75 KB).

]]> http://www.iugo.com.uy/blog/index.php/ventanas-modales-con-jquery-de-manera-simple/feed/ 0 Filtrar resultados en jQuery http://www.iugo.com.uy/blog/index.php/filtrar-resultados-en-jquery/ http://www.iugo.com.uy/blog/index.php/filtrar-resultados-en-jquery/#comments Tue, 01 Feb 2011 18:55:46 +0000 alfonso http://www.iugo.com.uy/blog/?p=362 Hoy les presentamos un script realmente útil a la hora de darle al usuario la posibilidad de filtrar resultados en una lista...

El código tras el salto.

El código:

El siguiente código funciona buscando el texto vayamos generando, en cada elemento de la lista, y de esa manera elimina los elementos que no coincidan.

Clic para ver Texto Plano
JAVASCRIPT:
  1. (function ($) {
  2. jQuery.expr[':'].Contains = function(a,i,m){
  3. return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())&gt;=0;
  4. };
  5.  
  6. function filterList(header, list) {
  7. var form = $("
  9. <form>").attr({"class":"filterform","action":"#"}),
  10. input = $("
  12. <input />").attr({"class":"filterinput","type":"text"});
  13. $(form).append(input).appendTo(header);
  14.  
  15. $(input)
  16. .change( function () {
  17. var filter = $(this).val();
  18. if(filter) {
  19.  
  20. $matches = $(list).find('a:Contains(' + filter + ')').parent();
  21. $('li', list).not($matches).slideUp();
  22. $matches.slideDown();
  23.  
  24. } else {
  25. $(list).find("li").slideDown();
  26. }
  27. return false;
  28. })
  29. .keyup( function () {
  30. $(this).change();
  31. });
  32. }
  33.  
  34. $(function () {
  35. filterList($("#form"), $("#list"));
  36. });
  37. }(jQuery));

El HTML:

Clic para ver Texto Plano
HTML:
  1. <div id="wrap">
  2. <div class="product-head">
  3. <h1>Product Search</h1>
  4. </div>
  5. <ul id="list">
  6.     <li><img src="products/apple.png" alt="" width="30" height="30" align="absmiddle" /> <a href="#/Apple/">Apple</a></li>
  7.     <li><img src="products/acorn_squash.png" alt="" width="30" height="30" align="absmiddle" /> <a href="#/Squash/">Acorn Squash</a></li>
  8.     <li><img src="products/broccoli.png" alt="" width="30" height="30" align="absmiddle" /> <a href="#/Broccoli/">Broccoli</a></li>
  9.     <li><img src="products/carrot.png" alt="" width="30" height="30" align="absmiddle" /> <a href="#/Carrot/">Carrot</a></li>
  10.     <li><img src="products/celery.png" alt="" width="30" height="30" align="absmiddle" /> <a href="#/Celery/">Celery</a></li>
  11.     <li><img src="products/lettuce.png" alt="" width="30" height="30" align="absmiddle" /> <a href="#/Lettuce/">Lettuce</a></li>
  12.     <li><img src="products/mushroom.png" alt="" width="30" height="30" align="absmiddle" /> <a href="#/Mushroom/">Mushroom</a></li>
  13.     <li><img src="products/onion.png" alt="" width="30" height="30" align="absmiddle" /> <a href="#/Onion/">Onion</a></li>
  14.     <li><img src="products/potato.png" alt="" width="30" height="30" align="absmiddle" /> <a href="#/Potato/">Potato</a></li>
  15.     <li><img src="products/pumpkin.png" alt="" width="30" height="30" align="absmiddle" /> <a href="#/Pumpkin/">Pumpkin</a></li>
  16.     <li><img src="products/radish.png" alt="" width="30" height="30" align="absmiddle" /> <a href="#/Radish/">Radish</a></li>
  17.     <li><img src="products/squash.png" alt="" width="30" height="30" align="absmiddle" /> <a href="#/Squash/">Squash</a></li>
  18.     <li><img src="products/strawberry.png" alt="" width="30" height="30" align="absmiddle" /> <a href="#/strawberry/">Strawberry</a></li>
  19.     <li><img src="products/sugar_snap.png" alt="" width="30" height="30" align="absmiddle" /> <a href="#/SugarSnaps/">Sugar Snaps</a></li>
  20.     <li><img src="products/tomato.png" alt="" width="30" height="30" align="absmiddle" /> <a href="#/tomato/">Tomato</a></li>
  21. </ul>
  22. </div>

DEMO

Visto en PaperMashup

]]> http://www.iugo.com.uy/blog/index.php/filtrar-resultados-en-jquery/feed/ 0 jQuery 1.5: disponible http://www.iugo.com.uy/blog/index.php/jquery-1-5-disponible/ http://www.iugo.com.uy/blog/index.php/jquery-1-5-disponible/#comments Tue, 01 Feb 2011 18:21:00 +0000 alfonso http://www.iugo.com.uy/blog/?p=365

La versión 1.5 de jQuery ya esta disponible para descargar.

Entre sus principales mejoras encontramos 83 bugs solucionados y la reescritura completa de su módulo Ajax.

Descargas:

- jQuery Regular
- jQuery Minified

Visto en blog.jQuery

]]> http://www.iugo.com.uy/blog/index.php/jquery-1-5-disponible/feed/ 0 LibreOffice 3.3 cobra vida http://www.iugo.com.uy/blog/index.php/libreoffice-3-3-cobra-vida/ http://www.iugo.com.uy/blog/index.php/libreoffice-3-3-cobra-vida/#comments Thu, 27 Jan 2011 15:49:09 +0000 alfonso http://www.iugo.com.uy/blog/?p=358 The Document Fundation anuncia la liberación de LibreOffice 3.3.


La opinión general es que, aunque no se han encontrado grandes novedades, la performance en este nuevo release ha mejorado considerablemente, aunque aconsejan no hacerse muchas ilusiones...

Quien lo pruebe podría contarnos!

DESCARGAR LibreOffice 3.3

]]> http://www.iugo.com.uy/blog/index.php/libreoffice-3-3-cobra-vida/feed/ 0 Pop-ups en Chrome para notificaciones de chat y correos Gmail http://www.iugo.com.uy/blog/index.php/pop-ups-en-chrome-para-notificaciones-de-chat-y-correos-gmail/ http://www.iugo.com.uy/blog/index.php/pop-ups-en-chrome-para-notificaciones-de-chat-y-correos-gmail/#comments Thu, 27 Jan 2011 15:33:41 +0000 alfonso http://www.iugo.com.uy/blog/?p=355 Sacándole jugo a la compatibilidad de su navegador con HTML 5, Google ha añadido a Chrome la posibilidad de recibir mediante pop-ups, notificaciones de chat y coreos nuevos en Gmail.

Esta funcionalidad ya está disponible para todos los usuarios de Gmail que utilicen Chrome. Dichas notificaciones se pueden activar o desactivar desde la pestaña General.

Momentáneamente, esta funcionalidad solo está disponible para Chrome, pero desde Google aseguran que están trabajando para que esta característica sea propia de Gmail y no dependa del navegador en cuestión.

Visto en ALT1040

]]> http://www.iugo.com.uy/blog/index.php/pop-ups-en-chrome-para-notificaciones-de-chat-y-correos-gmail/feed/ 0 BlueGriffon: nuevo editor Wysiwyg que soporta CSS3 y HTML5 http://www.iugo.com.uy/blog/index.php/bluegriffon-nuevo-editor-wysiwyg-que-soporta-css3-y-html5/ http://www.iugo.com.uy/blog/index.php/bluegriffon-nuevo-editor-wysiwyg-que-soporta-css3-y-html5/#comments Thu, 27 Jan 2011 14:41:07 +0000 alfonso http://www.iugo.com.uy/blog/?p=350

BlueGriffon hace su aparición en el conjunto de aplicaciones para el desarrollo.
Se trata de un editor multiplataforma OpenSource que nos permite la edición visual de nuestras páginas en html, con soporte CSS3 y HTML5.

Página oficial

Desde ACÁ se puede descargar su instalador para Windows, Linux u OSX.

Visto en: Ubuntu Life

]]> http://www.iugo.com.uy/blog/index.php/bluegriffon-nuevo-editor-wysiwyg-que-soporta-css3-y-html5/feed/ 0 El nuevo logo de HTML 5 http://www.iugo.com.uy/blog/index.php/el-nuevo-logo-de-html-5/ http://www.iugo.com.uy/blog/index.php/el-nuevo-logo-de-html-5/#comments Thu, 27 Jan 2011 14:30:55 +0000 alfonso http://www.iugo.com.uy/blog/?p=346 El W3C presentó la pasada semana el logotipo para la nueva revisión del lenguaje. Es la primera vez que HTML tiene un logotipo, y la última en tener un número de versión, es decir, no habrá HTML 6 en un futuro, será solamente HTML.

La idea del Consorcio Internacional World Wide Web es que este logo represente, además de a HTML, a CSS, SVG y WOFF entre otras.

En este LINK podés comprar remeras y stickers para apoyar a la plataforma web abierta!

]]> http://www.iugo.com.uy/blog/index.php/el-nuevo-logo-de-html-5/feed/ 0