Sep 25, 2011

jorgeu

Implementando paginado continuo al estilo google images con JQuery+PHP+JSON

De hace un tiempo hemos visto el principio del fin de las páginas que muestran información de la página 1 y ofrecen ir a la siguiente, la 2, la 3... la última. Uno de los casos más vistosos es Google Images. Al finalizar la página de resultados se ofrece un botón para cargar más en sitio sin abrir otra página.

En este post veremos una manera de implementar algo parecido con JQuery. Del lado del servidor se simplificará con PHP+JSON. Del lado de la página usaremos rutinas JavaScript+jQuery lo más sencilla posible.

Seguir leyendo...

Tags: html javascript php json jquery

Dec 27, 2010

hugorincong

Top 10 javascript frameworks del 2010

Los Frameworks de JavaScript se han convertido en un elemento primordial para el diseño web. Casi todos los sitios web utilizan JavaScript o Ajax en la actualidad, para el diseño, así como el desarrollo. Este es probablemente uno de los principales elementos para mejorarel setilo de la Web 2.0.

Antes de que puedas adherirte a un Framework en particular de Javascript que pueda ajustarse a sus necesidades, tienes que analizar en los Frameworks de JavaScript disponibles.

Top 10 de los Frameworks Javascript de 2010 son:

1. jQuery

Jquery es un Framework rapido, compacto y muy facil de usar, simplifica la manera de recorrer documentos HTML, añadiendo interacciones Ajax, la gestión de eventos, realizar y visualizar animaciones en páginas Web. JQuery esta desarrollado para cambiar y abrir una nueva forma de escribir JavaScript por ti.Sitio oficial: http://jquery.com/

2. Prototype

Para el desarrollo de aplicaciones web dinámicas, este marco de Java Script se utiliza para aliviar las dificultades de desarrollo. Cuenta con la mejor colección de Ajax, herramienta fácil de usar para el desarrollo de prototipos y además se está convirtiendo en una opción de base para desarrollar aplicaciones web.Sitio oficial: http://www.prototypejs.org/

3. Script.aculo.us

Script.aculo.us te es una bibliotecas de JavaScript ofrece interfaz de usuario y es una aplicación fácil de utilizar para convertir su sitio web de estática a dinámica. Script.aculo.us no es un Framework, sino que es un complemento para Prototype.Sitio oficial: http://script.aculo.us/

4. Moo Tools

Moo Tools es modular, un Framework JavaScript compacto que ha sido diseñado para desarrolladores JavaScript desde principiantes a profesionales.Sitio oficial: http://mootools.net/

5. JavaScriptMVC

Es un Framework de código abierto que contiene las mejores ideas sobre el desarrollo de JavaScript Enterprise . Mediante la promoción de rigorous practice, el mantenimiento que le guiará para completar los proyectos de una manera sencilla.Sitio oficial: http://www.javascriptmvc.com/

6. Developer. Yahoo

La biblioteca de YUI es un paquete de utilidades y controles que se escriben con JavaScript y CSS para construir ricas, interactivas, atractiva y muy dinámicas aplicaciónes web, con la ayuda de la DMO, la técnica de DHTML.Sitio oficial: http://developer.yahoo.com/yui/

7. Qooxdo

Este es un Framework innovadora y muy completo para crear aplicaciones web enriquecidas. Permite a los desarrolladores crear aplicaciones muy interesantes.Sitio oficial: http://qooxdoo.org/

8. MochiKit

MochiKit es muy documentado y testeado para satisfacer los requerimientos de JavaScript. Puedes definir como necesita actuar tu codigo, definir su representación de programación, comparaciones, etc.Sitio oficial: http://mochi.github.com/mochikit/

9. Rialto

El objetivo de Rialto es sitios corporativos de Internet y no sitios web generales. Esta es una librería de widgets Javascript, Lo ideal sería que un desarrollador de Rialto no se requiera aprender DHTML, AJAX, DOM, etcSitio oficial: http://rialto.improve-technologies.com/wiki/

10. Sproutcore

Se trata de un Framework de aplicacion web HTML 5 para hacerlo atractivo, aplicación de escritorio que funciona en cualquier navegador reciente, sin ningún tipo de plug-in. SproutCore está lleno de codificados con javascript y funciones.Sitio oficial: http://www.sproutcore.com/

Tags: javascript

Dec 27, 2010

uokesita

Contador en un boton

Alguna vez has querido hacer un botón que lleve la cuanta hacia atrás, y que al terminar la cuenta te permita ir a otra pagina, o descargar algún archivo?

Bien, crearemos nuestro formulario con un botón llamado contador, que estará desabilitado mientras no se haya cumplido el tiempo establecido... En el cuerpo de la página llamaremos a la función JavaScript cuenta atras()

              <html>
              <head></head>
              <body onload="cuentaatras()">
                 <form action="#">
                    <input type="button" id="contador" disabled="disabled"/>
                 </form>
              </body>
              </html>

Ahora la función JavaScript puede ir en la cabecera de la pagina o en un archivo aparte que luego debemos enlazar.

En esta función cuentaatras(), el valor de la variable cuenta indicará la cantidad de tiempo a esperar. Al cumplirse el tiempo, el botón se activará y mostrará un texto para continuar.

              <script language="javascript">
              cuenta = 5;
              function cuentaatras() {
                 document.getElementById('contador').value = "espera " + cuenta + " seg.";
                 if (cuenta > 0) {
                 setTimeout("cuentaatras()", 1000);
                 } else {
                    document.getElementById('contador').value = "continuar...";
                    document.getElementById('contador').disabled = false;
                 }
                 cuenta = cuenta - 1
              }
              </script>

Tags: html javascript