¿hasta donde podre llegar?

hector2c, mi bitacora

Archive for the ‘javascript’ Category

que es ajax

leave a comment »

segun mi estimado amigo wikipedia, ajax es:

AJAX, acrónimo de Asynchronous JavaScript And XML (JavaScript asíncrono y XML), es una técnica de desarrollo web para crear aplicaciones interactivas o RIA (Rich Internet Applications). Estas aplicaciones se ejecutan en el cliente, es decir, en el navegador de los usuarios mientras se mantiene la comunicación asíncrona con el servidor en segundo plano. De esta forma es posible realizar cambios sobre las páginas sin necesidad de recargarlas, lo que significa aumentar la interactividad, velocidad y usabilidad en las aplicaciones.

Ajax es una tecnología asíncrona, en el sentido de que los datos adicionales se requieren al servidor y se cargan en segundo plano sin interferir con la visualización ni el comportamiento de la página. JavaScript es el lenguaje interpretado (scripting language) en el que normalmente se efectúan las funciones de llamada de Ajax mientras que el acceso a los datos se realiza mediante XMLHttpRequest, objeto disponible en los navegadores actuales. En cualquier caso, no es necesario que el contenido asíncrono esté formateado en XML.

Ajax es una técnica válida para múltiples plataformas y utilizable en muchos sistemas operativos y navegadores dado que está basado en estándares abiertos como JavaScript y Document Object Model (DOM).

pues, no puedo criticar el concepto, es el correcto, ajax, viene a ser en simples palabras “un conjunto de tecnologías que hacen posible el requerimiento de algun ‘dato’ desde el cliente al servidor sin necesidad de recargar la página”…

el enlace completo de wikipedia y ajax esta en el siguiente enlace.

en todo caso el concepto que “si”, puedo criticar, es el de un compañero que encontre caminando por el centro, solia decir: “las aplicaciones actuales son modernas al usar ‘tecnologías’ como ajax”, de lo que puedo decir lo siguiente: ajax, no es una nueva tecnología, ajax es un conjunto de tecnologías ya existentes.

segun wikipedia: AJAX es una combinación de cuatro tecnologías ya existentes:

XHTML (o HTML) y hojas de estilos en cascada (CSS) para el diseño que acompaña a la información.

Document Object Model (DOM) accedido con un lenguaje de scripting por parte del usuario, especialmente implementaciones ECMAScript como JavaScript y JScript, para mostrar e interactuar dinámicamente con la información presentada.

El objeto XMLHttpRequest para intercambiar datos asincrónicamente con el servidor web. En algunos frameworks y en algunas situaciones concretas, se usa un objeto iframe en lugar del XMLHttpRequest para realizar dichos intercambios.

XML es el formato usado generalmente para la transferencia de datos solicitados al servidor, aunque cualquier formato puede funcionar, incluyendo HTML preformateado, texto plano, JSON y hasta EBML.

Como el DHTML, LAMP o SPA, AJAX no constituye una tecnología en sí, sino que es un término que engloba a un grupo de éstas que trabajan conjuntamente.

ajax, simplemente son peticiones sin refresco completo de la página, a lo que mi compañero contesto, con ajax, puedo dar animaciones a las cajas de texto, saltar una por una, crear marcos con animaciones, textarea con formato, etc etc… pues, eso es javascript, o cualquier otro lenguaje de lado del cliente que de efectos de movimientos u otras cosillas, y no es ajax.

el tema inicial fue el toolkit de desarrollo que se puede integrar en visual studio .net 2005 & 2008, tiene el mal nombre de “Ajax toolkit”, digo mal nombre, por que se suele confundir el termino ajax con efectos en aplicaciones web.

puedo decir que existen frameworks de javascript que tienen clases para trabajar con ajax, un buen ejemplo es el framework mootools, contiene infinidad de efectos javascript, css, xhtml, etc etc, ademas de la facilidad de dar peticiones al servidor por el cliente sin necesidad de refrescar la página por completo, en si, ajax.

al terminar de conversar con dicho compañero, decidi escribir algo al respecto, bueno, espero lea un poco mas al respecto.

Written by hector2c

septiembre 7, 2008 at 3:02 am

Publicado en ajax

Tagged with , ,

fx.slide – toogle

with one comment

fx.slide esta desarrollado para mootools, esta clase nos permite dar efectos para poder ocultar divs con movimientos, horizontales, verticales.

mas información la encuentras en fx.slide desde mootools en el siguiente enlace.

pues, el ejemplo que les tengo agregado, les sirve para tener que evitar generar bloques de código javascript para cada div que deseen dar este efecto.

el efecto que estoy aplicando es toggle, es un efecto de ocultación y muestreo con movimiento.

requisitos: framework mootools, lo puedes descargar desde la misma pagina de mootools en el siguiente enlace.

primeramente incluimos el .js de mootools:

<script type="text/javascript" charset="utf-8" src="extras/js/mootools/mootools.svn.js"></script>

seguidamente agregamos la función para instanciar la clase fx.slide y dar el valor toggle

<script>
var Collapsables = {
init:function(){
var list = $$("a.encendedor");
list.each(function(e){
target = e.href.split("#")[1];
e.fx = new Fx.Slide(target);
e.addEvent('click', function(el){
ev = new Event(el);
this.fx.toggle();
ev.stop();
});
e.fx.hide();
});
}
}
window.addEvent('domready', Collapsables.init);
</script>

finalmente agregamos html, para dar a ejecutar nuestro ejemplo:

<a href="#noticia" class="encendedor">noticia</a>
<div id="noticia">
<p>las ultimas noticias disponibles</p>
<p>contenido</p>
<p>contenido</p>

</div>
<a href="#importante" class="encendedor">importante</a>
<div id="importante">
<p>es importante, recordar lo dificil al caminar.</p>
<p>contenido</p>
<p>contenido</p>
</div>

como ven, en las etiquetas que seran los encendedores del toggle se les da como atributo class=’encendedor’, y se les enlace el nombre del div a mostrar y ocultar con href=’#nombre_del_div’

simplemente eso. como ven no es nada dificil, ahi ustedes con su imaginación, aplicaria css, para dar mas atractivo visual, pero el código es limpio, para su mejor compresión, css sera otro tema.

Written by hector2c

agosto 31, 2008 at 5:25 am

Publicado en javascript, mootools

Tagged with , , ,

TinyMCE

with one comment

mmm, usualmente existe la necesidad de almacenar gran cantidad de texto, ya sean descriptivos, comentarios, noticias, etc, etc. en donde hay necesidad de darle un formato especial como: texto en negrita, cursiva, alineaciòn, items.

que con formato plano, no se pueden llegar a realizar (al menos que se almacenen en formato html, de lo cual es muy fatigoZo.).

para necesidades como esa existe TinyMCE, un editor WYSIWYG desarrollado en javascript, su función es agregar funcionalidades ya mencionadas (y otras muuchas mas) a todos los textarea agregados en la página.

para agregar en la página seleccionada a trabajar, solo se necesita llamar al fichero .js desde el directorio donde fue descargando, ejemplo:

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

una vez enlazada el .js, se necesitan dar los atributos a los textarea, existen distintos modos de presentación, desde los mas básicos, hasta los mas complejos, con opciones que nuunca usare jeje, para mas info puedes ver este enlace.

en mi caso agrego los atributos simples con el siguiente código:

<script type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "simple"
});
</script>

todos los textarea de la página tomaran los atributos simples del TinyMCE. librerias como esta, hacen que buenas aplicaciones sean rápidas en desarrollar, atractivas, efectivas y que dan mucho valor agregado a trabajos hogareños o de trabajo.

pueden ver un acabado sencillo, pero muy util.

para mas información pueden visitar su web oficial en el siguiente enlace.

Written by hector2c

agosto 21, 2008 at 5:00 am

Publicado en javascript