AJAX ¿y cómo se come eso?
by _TheAway on Jun.20, 2009, under Web
Esta entrada es otra de tantas que intentan explicar que es exactamente AJAX, aunque ya tiene unos 6 años aun hay quien no lo entiende, y para que sirve.
AJAX es un acrónimo de los que tanto le gustan a los angloparlantes quiere decir Asynchronous JavaScript And XML y la explicación de andar por casa es: Usar Javascript y XML para comunicar distintas aplicaciones web.
Pero vayamos por partes, primero ¿qué es Javascript? , y ¿qué es XML? muchos lo debéis de saber ya pero otros no así que lo explico:
-
Javascript es un lenguaje de programación que esta integrado en la mayoría de navegadores desde 1995. En el que apareció en Netscape en 1996 aparecería JScript para Internet Explorer. El 90% de los formularios webs lo usaban y usan para comprobar que los datos que insertas son validos y que está todo. También se usaba para generar animaciones en la web, presentar datos, etc.. A partir del año 2000 que se terminó de definir el modelo de web basado en contenido y presentación el HTML con los datos y el CSS con la presentación empezó a usarse para modificar la presentación dinámicamente. Apareciendo por la web paginas en las que el texto se esconde, pulsas una imagen y se abre al lado la descripción, …. Es lo que se dio a conocer como DHTML o Web Dinámica.
Desgraciadamente mucha gente confunde DHTML con AJAX, AJAX es coger los datos que quieres presentar de otra web, o de otro agente web, o de un servidor perdido de la mano de dios que devuelve datos en XML. DHTML es poner bonitas las webs. La causa de la confusión es que todo lo que usa AJAX hoy en día también lo presenta usando las técnicas de DHTML. Pero son cosas distintas.
-
XML son las siglas de eXtended Markup Language cuya traducción seria lenguaje de marcas extensible ¿alguien se ha enterado? los lenguajes de marcas/etiquetas son aquellos en los que la información que quieres insertar esta encapsuladas entre etiquetas del estilo <html></html>. Por ejemplo las paginas webs están escritas usando un lenguaje de marcas, lo del extensible solo quiere decir que tu puedes definir tus propias marcas y un diccionario para decir que tiene que haber dentro de cada marca.
Ya sabemos que es cada cosa, ahora ¿cómo lo unimos para hacer funcionar el AJAX este ? La mayoría ya ha tenido que pensar:
Usando Javascript llamo a alguna aplicación web que me devolverá el resultado en un XML y que usando otra vez Javascript lo presentaré de forma bonita.
Si eso es lo que has pensado enhorabuena, por que es precisamente lo que hay que hacer, si no lo has pensado pues lo estas haciendo ahora mismo xD. La cuestión es ¿cómo? y la respuesta tiene un nombre XMLHttpRequest()
Es una clase de Javascript, para ser exactos es una interfaz pero lo dejamos como clase, que permite a los navegadores hacer peticiones a otros servidores, o al mismo, una vez establecida la comunicación le mandamos o los datos de un formulario, o de una búsqueda o cualquier cosa. Como resultado cuando el servidor lo haya procesado nos devolverá en un XML lo que le hemos pedido. Ahora lo bueno el HTML con el que escribimos las webs es también un XML, luego en muchos casos lo que devuelve es los datos en HTML para insertarlos tal cual.
Pongamos un ejemplo:
function nuevoAjax(){
var xmlhttp=false;
try {
xmlhttp = new ActiveXObject(”Msxml2.XMLHTTP”);
} catch (e) {
try {
xmlhttp = new ActiveXObject(”Microsoft.XMLHTTP”);
} catch (E) {
xmlhttp = false;
}
}if (!xmlhttp && typeof XMLHttpRequest!=’undefined’) {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}function cargaDatos(id){
var t1, t2, contenedor;
contenedor = document.getElementById(’datos’);
ajax=nuevoAjax();
ajax.open(”POST”, “ajax1.php”,true);
contenedor.innerHTML = “<div id=\”conectando\”><img src=\”img/proceso.gif\” /></div>”;
ajax.onreadystatechange=function() {
if (ajax.readyState==4) {
contenedor.innerHTML = ajax.responseText;
}
}ajax.send(”ID=”+id);
}
La función nuevoAjax() lo que hace es devolver la clase que implementa la interfaz XMLHttpRequest() y funciona para la inmensa mayoría de navegadores.
cargaDatos(id) tiene más chicha. Iré paso a paso.
- contenedor = document.getElementById(’datos’);
En el HTML de la web existe un <div id=”datos”></div> pues eso se asigna a contenedor.
- ajax=nuevoAjax();
Creamos el XMLHttpRequest.
- ajax.open(”POST”, “ajax1.php”,true);
Le decimos que cree una nueva conexión con el fichero ajax1.php, este fichero espera una ID enviada como POST y devuelve ‘<span> Datos de la ID </span>’
- contenedor.innerHTML = “<div id=\”conectando\”><img src=\”img/proceso.gif\” /></div>”;
Insertamos en el <div id=”datos”></div> una imagen para indicar que estamos esperando. Le estoy insertando directamente el HTML. - ajax.onreadystatechange=function() {
if (ajax.readyState==4) {
contenedor.innerHTML = ajax.responseText;
}
}
XMLHttpRequest tiene un atributo interno que es readyState, segun el valor indica:0=no estoy conectado; 1=me estoy conectando; 2=le mando las cabeceras; 3=le mando los datos; 4=acabé aquí tienes la respuesta.Luego arriba estamos diciendo que cuando haya acabado inserte los datos en el <div>
- ajax.send(”ID=”+id);
En 3 decía que esperaba una variable ¿no? pues se manda aquí.
Lo que se os estará pasando por la cabeza es ¿y para esto tanta chorrada? pues, si la verdad es que si. Más que nada porque estos ejemplos están muy limitados. No comprueba que el fichero falle o los datos no sean los que deben. Esto se puede complicar mucho y para terminar de rematar la faena hay dos tonterías más.
Primero habéis visto que todo el tema de asíncrono me lo he comido con patatas. Esto se debe a que aunque en la mayoría de casos si que es asíncrono tu haces algo, el ajax llama a un servidor. Tu sigues a lo tuyo y cuando el servidor acaba la web lo presenta. Sin embargo hay muchos ejemplos por internet en los que deja de ser tan asíncrono. Le das a un botón para editar un post pero hasta que el ajax no acabe y te lo presente no puedes hacer nada. Eso es común hoy en día y eso para mi no es asíncrono.
Otra tontería es que para usar el concepto de AJAX no hace falta Javascript ni XML. Puedes usar cualquier cosa para enviar los datos. JSON como usa Google, uno propio, HTML, lo que quieras. Y aun así el concepto es el mismo y hoy en día se le llama AJAX a eso también.
Incluso en vez de Javascript puedes usar un Flash o Silverlight o JavaFX. Sin necesidad de Javascript para realizar la llamada al servidor ni presentar los datos.
Karaoke 1.3.6
by _TheAway on Jun.14, 2009, under Scripts
Un pequeño añadido al Karaoke que me han pedido por el IRC.
Al generar un karaoke estático permite además con un boton aparte hacerlo gradual. Esto quiere decir que activando Estatico y Gradual podeis hacer que las silabas de los karaokes varien su posición y tamaño gradualmente y toda la silaba entera. Hasta ahora lo hacia letra a letra.
De momento este cambio gradual es circular. O sea si pones que la silaba aumente hasta 120% lo que hará es: ir de 100% a 120% y volver a 100%. Más adelante haré distintos valores según me pongais en los comentarios.
Ya pondré en un futuro un ejemplo gráfico.
Asi que añadidos:
- En Script con tiempo estático puedes ponerlos de forma que el cambio sea gradual de forma circular, vuelve a como estaba al principio.
Arreglado
- Ya no pone Posisicion de la Silaba en el script xD
Necesita el plugin TextLayerBounds para funcionar correctamente.
Como en todos los Karaoke anteriores solo pido una cosa, si lo usais poner a _TheAway en los creditos.
Vídeo tutorial: Keying muy simple
by _TheAway on Jun.02, 2009, under Tutoriales
Dado que más de uno me ha preguntado al respecto he hecho este vídeo tutorial para que sepais como se usa en el After Effects. Es solo demostrativo pero para que os hagais una idea de por donde van los tiros.
El vídeo contiene:
- Uso de los modos de las capas para hacer máscaras.
- Corrección de color.
- Uso del plug-in Linear Color Keying.
- Fallos del AE en general
P.D. El vídeo está a 640×480 como siempre.
Vídeo tutorial: Cómo usar el Karaoke 1.3.5 y III
by _TheAway on May.12, 2009, under Tutoriales
De momento el último vídeo tutorial de la trilogía Karaoke
El tutorial trata:
- Reintrepretar videos insertados en AE.
- Uso y aplicación del TextLayerBounds para que un objeto siga al karaoke.
- Expresiones, concretamente movimientos levemente circulares.
- Insertar y usar un Control Point.
- Dislexia (aka SDD).
- Algo de unas partículas.
P.D. El vídeo está a 640×480, se ve mejor a pantalla completa.
Vídeo tutorial: Cómo usar el Karaoke 1.3.5 y II
by _TheAway on May.12, 2009, under Tutoriales
Este es un añadido al vídeo tutorial anterior que explica un poco mejor como afectan las opciones a las capas.
El tutorial trata:
- Buenas costumbres, organízate.
- Tiempos del karaoke, presílaba, sílaba, postsílaba.
- Pérdida de tiempo por errores del After Effects el Windows y el Camtasia.
- Creación de una composición con sólo la silaba cantada.
El video está en realidad a 640×480 si lo pones a pantalla completa se ve mejor.
Vídeo tutorial: Cómo usar el Karaoke 1.3.5
by _TheAway on May.12, 2009, under Tutoriales
Es un tuto muy simplón y que se ve bastante mal pero basta y sobra para lo que seria lo más basico.
El tutorial trata:
- Presentación del formato de karaoke.
- Breve comentario de como se instala.
- Ejecución del script.
- Presentación de las pantallas de configuración.
- Presentación de las opciones de los layers (capas) generados.
- Tu amigo el Master.
El video está en realidad a 640×480 si lo pones a pantalla completa se ve mejor.
P.D. perdonad la mala calidad de encodeo que se ven en ocasiones unos macrobloques que dan miedo xD
Karaoke 1.3.5
by _TheAway on May.10, 2009, under Scripts
Y como lo prometido es deuda aquí está el Karaoke para After Effects versión completa.
Necesita el plugin TextLayerBounds para funcionar correctamente.
Dado que he perdido lo que tenia el 1.3.0-lite no puedo haceros una lista de cambios. Asi que os diré por encima que es lo que permite. Más adelante os pondre videotutoriales para saber usarlo y aprender, si no sabeis, a hacer karaokes.
- En Master->Efectos contiene una entrada que te dice en un array de dos dimensiones la posición con respecto al video de la silaba cantada. Esto significa que con una simple expresión puedes hacer que cualquier objeto siga al karaoke.
- En Master->Efectos contiene una entrada que cambia de 0 a 100 según la silaba. Es útil para hacer algo entre las silabas.
- Si lo usas sin tener nada en el proyecto puedes definir el tamaño y los fps de la composición que tendrá el karaoke
- Tienes la opción de crear karaokes con distintas transiciones entre keys, rampas triangulares, circulares, estáticas,…
Como en todos los Karaoke anteriores solo pido una cosa, si lo usais poner a _TheAway en los creditos.
Plugin TextLayerBounds para AE
by _TheAway on May.10, 2009, under Plugins
Como dije antes libero algunas cosas.
Este plugin extrae los puntos de control de las capas de texto y es llamado automaticamente por el Karaoker tiene ya un año y algo y ha sido ampliamente testeado en Anime Underground.
Solo has de copiarlo en la carpeta de plugins. Solo debe usarse en AE CSn y en Windows.
Próximamente en este blog…
by _TheAway on May.10, 2009, under Uncategorized
Estoy pasando algunos videotutoriales a algun sitio que se vean bien, y los pondré por aquí. Aparte de alguno nuevo que estoy en proceso, deje uno a medias por el pete del server. Y tengo otro que estoy intentando acortarlo a 10 minutos, es de casi 2 horas xD.
Sacaré una versión mas moderna del Karaoke y liberaré los plugins, ya que en su concepción eran gpl tenerlos escondidos no vale para nada xD.
Nos vemos en breve con novedades.
Versión del Karaoke 1.3.0 liberada para todos aquellos que no tienen el TextLayersBounds
by _TheAway on May.10, 2009, under Scripts
Karaoke es un script para After Effects (.jsx) que permite a partir de un fichero .ASS o .SSA timeado con \K \k \kf y sin efectos generar una composición con el karaoke
Posee los mismos defectos y mejoras que la versión 1.3.0 normal pero sin llamar al Efecto TextLayersBounds.
Se encuentra aquí
Sólo pido una cosa, si lo vas a usar en un fansub pon a _TheAway en agradecimientos.
