7 generadores de gráficos de espera para Ajax

2 COMENTARIOS -  Publicado hace 11 meses -  Clasificado en: , ,

Con la proliferación de AJAX en las webs han venido apareciendo toda una serie de gráficos animados para informar que una petición está siendo procesada. Estos siete generadores te pueden resultar de utilidad para crear tu gráfico personalizado de espera.

7 Ajax Loading Icon Generators » »

Algunas entradas relacionadas:

 

AIE: Editor de imágenes Ajax Open Source

0 COMENTARIOS -  Publicado hace 12 meses -  Clasificado en: , , ,

AIE (Ajax Image Editor) es una interesante aplicación para manipular imágenes online. La aplicación es gratuita, distribuida bajo una licencia GPL, por lo que la podremos incluir como una parte de nuestros desarrollos web. La aplicación está desarrollada utilizando Ext JS, ImageMagick y PHP. Entre sus características principales podemos destacar:

- Redimensionamiento de imágenes.
- Recorte de imágenes.
- Rotación y volteo.
- Aplicación de filtros.
- Herramienta de Texto para añadir textos a las imágenes.
- Aplicación de marcas de agua.

Ajax Image Editor

En la web oficial indica que funciona tanto para Firefox como para Internet Explorer. Desconozco si en otros navegadores la aplicación no funciona correctamente o simplemente es que no ha sido testada en los mismos.

AIE (Ajax Image Editor) » »

Vía Web Resources Depot » »

 

Ajax con jQuery: el método load()

17 COMENTARIOS -  Publicado hace 12 meses -  Clasificado en: , ,

jQuery ofrece bastantes funcionalidades Ajax que nos pueden facilitar mucho la tarea de enviar y recoger peticiones asíncronas al servidor. Quizá la sentencia más simple de JQuery para cargar contenido mediante Ajax es load(). Este post trata de ofrecer una explicación sencilla de este comando, así como de unos cuantos ejemplos sencillos pero representativos de su uso. Sintaxis: 

load(url,parametros,callback)

Inicia una solicitud Ajax a la URL especificada con parámetros opcionales. Se puede especificar una función de callback que puede ser invocada cuando la solicitud se completa. El texto de respuesta reemplaza el contenido de todos los elementos coincidentes.

Argumentos:

  • url: La URL a la que la solicitud es enviada.
  • parámetros: Un objeto cuyas propiedades son serializadas en una serie de parámetros codificados correctamente y que se pasan a la solicitud. Se utiliza si se especifica, que la petición se hace utilizando el método POST. Se omite si se utiliza el método GET.
  • callback: Una función invocada después de que la solicitud ha sido procesada.

Por ejemplo 

$("#contenido").load("archivo.html");

Cargaría el contenido de "archivo.html" en el div "contenido". Un ejemplo un poco más elaborado y completo podría ser el siguiente: 

<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>JQuery Ajax</title>
  <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
  <script type="text/javascript">

  $(document).ready(function() {
$(".boton").click(function(event) {
$("#caja").load('carga.html',aviso());
});
});
function aviso(){
alert('La solicitud ha sido procesada');
}
</script>
</head>
<body>
<p><input name="bt1" type="button" value="CARGA CONTENIDO" class="boton"/></p>
<div id="caja" style="padding:5px;border:1px solid #CCC;">
</div>
</body>
</html>

Ver ejemplo en funcionamiento » »

Aunque fácil de usar, este comando tiene algunos matices importantes. Por ejemplo, cuando se alimenta el argumento "parámetros" la solicitud se realiza mediante el método HTTP POST, de lo contrario, se realiza mediante una petición GET. Si queremos realizar una solicitud GET con los parámetros, podemos incluirlos en la URL. En este último caso deberemos asegurarnos de que la url esté correctamente codificada.

En el siguiente ejemplo utilizamos el valor del atributo "value" de tres botones para pasarle a un archivo .php la acción que desearíamos ejecutar. El archivo que invoca mediante Ajax el archivo .php sería: 

<?php
if($_POST['acc']=='EDITAR'){
	// ACCIONES DE EDICION
	echo 'LA ACCION SOLICITADA ES EDITAR';
}elseif($_POST['acc']=='NUEVO'){
	// ACCIONES DE CREACION
	echo 'LA ACCION SOLICITADA ES NUEVO';
}else{
	// ACCIONES DE ELIMINACION
	echo 'LA ACCION SOLICITADA ES BORRAR';
}
?>

Y el archivo "solicitud.php" se encargaría de recoger los parámetros por POST y asignar las acciones pertinentes: 

<?php
if($_POST['acc']=='EDITAR'){
	// ACCIONES DE EDICION
	echo 'LA ACCION SOLICITADA ES EDITAR';
}elseif($_POST['acc']=='NUEVO'){
	// ACCIONES DE CREACION
	echo 'LA ACCION SOLICITADA ES NUEVO';
}else{
	// ACCIONES DE ELIMINACION
	echo 'LA ACCION SOLICITADA ES BORRAR';
}
?>

Ver ejemplo en funcionamiento » »

La mayoría de veces utilizaremos el comando load() para inyectar el contenido completo de la respuesta, pero puede ocurrir que deseemos filtrar la respuesta. jQuery nos permite especificar un selector en la URL para filtrar los elementos que van a ser inyectados. Por ejemplo: 

$('#contenido').load('recurso.html #bloque_1')

La respuesta contenida en el div "bloque_1" del fichero "recurso.html", será cargada en el div "contenido".

En el siguiente ejemplo se cargan unicamente los enlaces contenidos en el fichero "carga_filtrada.html". 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>JQuery Ajax
<script type="text/javascript" src="jquery-1.3.2.min.js">
<script type="text/javascript">
$(document).ready(function() {
	$(".boton").click(function(event) {
			  $("#caja").load('carga_filtrada.html a');
	});
});
</script>
<style type="text/css">
a {display:block;}
</style>
</head>
<body>




</div>
</body>
</html>

Y el fichero "carga_filtrada.html" sería: 

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum sed diam nonumy eirmod tempor invidunt ut labor. Stet clita kasd gubergren consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua

Ver ejemplo en funcionamiento » »

Algunas entradas relacionadas:

 

AjaXplorer: Gestor de archivos gratuito en PHP

3 COMENTARIOS -  Publicado hace 12 meses -  Clasificado en: , ,

AjaXplorer es un gestor de archivos Ajax muy interesante para incluir en algunas de nuestras aplicaciones web. Sobre todo en aquellas que por una razón u otra no podamos ofrecer un servicio FTP. Posee una funcionalidad bastante potente y una interfaz de fácil uso. Está desarrollado con PHP y no requiere de base de datos para funcionar. Algunas de las características más interesantes son:

AjaXplorer: Gestor de archivos

  • Podemos realizar tanto sobre carpetas como archivos las siguientes acciones: renombrar, copiar, mover, eliminar, descargar.
  • Carga de archivos múltiples con barra de progreso.
  • Posibilidad de editar archivos de texto (con resaltado de sintaxis para JS, PHP, HTML, Java, SQL y PERL).
  • Las imágenes se pueden ver de antemano y en un pase de diapositivas.
  • Los archivos MP3 se pueden escuchar sin descargarlos.
  • Los vídeos de Flash también se pueden ver sin necesidad de descargarlos.
  • Los archivos ZIP pueden ser navegados y extraidos desde el propio gestor de archivos.
  • Sistema de favoritos para llegar a los archivos que uno desea de un modo más fácil.
  • Multilenguaje, con soporte para el español.
  • Búsqueda recursiva.
  • Entorno multi-usuario. El administrador puede crear nuevos usuarios y permite asignar los directorios y derechos a los usuarios.
  • Drag'n Drop, Atajos de teclado, Capacidad para seleccionar múltiples archivos / carpetas.

AjaXplorer es gratuito.

AjaXplorer » »

Algunas entradas relacionadas:

 

Los 10 frameworks más populares de Javascript

1 COMENTARIO -  Publicado hace 12 meses -  Clasificado en: , ,

Mi preferencia está clara, jQuery, pero si estáis pensando en iniciaros en un entorno de trabajo para Javascript "10 Most Popular JavaScript Frameworks" puede resultaros un artículo muy interesante. Analiza los 10 frameworks de Javascript más usados en este momento y ofrece una información en forma de ficha que abarca una serie de aspectos a considerar antes de decantarse por uno de estos entornos de trabajo: Documentación, Comunidad, Licencia, Tamaño, Interfaz, ... Los frameworks analizados son los siguientes: jQuery, Prototype, script.aculo.us, MooTools, ExtJS, Qooxdoo, Yahoo! UI Library (YUI), MochiKit, Midori y The Dojo Toolkit.

Algunas entradas relacionadas:

 

Preloaders

1 COMENTARIO -  Publicado hace 13 meses -  Clasificado en: ,

Preloaders es otra web en la que a través de la personalización de unos cuantos parámetros podemos generar un precargador para cuando el sistema se encuentre ocupado realizando, por ejemplo, transacciones Ajax. El generador, además de bien realizado y con múltiples opciones de personalización, posee la novedad de incorporar gráficos en 3D.

Preloaders

Preloaders.net » »

Algunas entradas relacionadas:

 

Google Ajax API Playground

0 COMENTARIOS -  Publicado hace 14 meses -  Clasificado en: , , , ,

Google ha lanzado Ajax API Playground, una aplicación desarrollada en App Engine que resulta muy interesante para los desarrolladores que trabajan con las API de Google. Es una consola online donde podemos probar fácilmente nuestros scripts basados en las APIs de AJAX de Google y donde además donde tenemos acceso a más de 170 ejemplos de las siguientes APIS.

  • Visualization API
  • Search API
  • Language API
  • Blogger Data API
  • Libraries API
  • Maps API
  • Google Earth API
  • Feeds API
  • Calendar Data API

Los distintos ejemplos se pueden editar y ejecutar lo que nos permite obtener de una forma rápida una visión de lo que podemos llegar a obtener de las distintas APIs. Una vez hayamos realizado nuestro propio script podremos guardarlo para una posterior edición o exportarlo.

Google AJAX APIs Playground » »

 
Páginas: 1 2 3 4 5 Siguiente >