No pretendemos en este artículo determinar cuál es el índice más ‘fiable’, si no confeccionar una lista formada por 10 rankings que hemos seleccionado por su popularidad o por tener características que hemos considerado interesantes. En conjunto, nos pueden dar una visión más objetiva y completa que analizando solo uno de ellos.

Nota: hemos actualizado algunos enlaces y datos de este artículo (enero 2017), pero hemos mantenido los mismos rankings y redacción del original. Publicaremos un nuevo artículo si podemos revisarlo más a fondo.

Por regla general, estos rankings o índices se realizan a partir de información disponible en la Web y se basan en algunos de estos parámetros:

• Análisis de consultas que se realizan en los motores de búsqueda más utilizados
• Actividad en comunidades de programadores (proyectos, discusiones…)
• Demanda de conocimientos/experiencia de programación en el mercado de trabajo
• Volumen de libros vendidos (datos de editoriales especializadas)
• Encuestas realizadas en Internet entre programadores

Comenzamos la lista, indicando que no está ordenada por calidad o popularidad de estos índices, si no más bien, por los métodos de cálculo que emplean:
Nota: en aquellos lenguajes de los que ofrecemos cursos, hemos incluído un link a su página de información

1. Tiobe

Quizás el más conocido. Lo elabora la empresa Tiobe, especializada en evaluación de calidad de programas software.

Según indican en su propia página establece la popularidad de los lenguajes en función del número de resultados que se producen en los 25 buscadores más utilizados (según Alexa) con la consulta: +”<language> programming” (por ejemplo +”Javascript programming”) . Todo ello con una serie de premisas que puedes leer en su web

Este índice se publica cada mes, y en la imagen puedes ver la evolución del índice hasta 2016, de los distintos lenguajes a lo largo de los últimos años.

Evolución índice Tiobe hasta diciembre 2016

Como comentábamos, hay detractores o personas que al menos ponen objeciones serias al método de cálculo. Encontrarás ejemplos en la web que describen alteraciones de los resultados (aunque sean temporales) por acciones concertadas de comunidades de programadores, robots  o artículos donde se argumenta contra el posicionamiento de determinados lenguajes (ver un par de ejemplos en las referencias al final de este post), lo que nos lleva al siguiente índice que trata de corregir eso.

2. PYPL PopularitY of Programming Language index

El PYPL o Indice de Popularidad de los Lenguajes de Programación, se elabora analizando el número de búsquedas en Google de tutoriales sobre un determinado lenguaje. Obtiene los datos de Google Trends, por lo que argumentan que es mucho más transparente en su cálculo ya que cualquiera podría elaborarlo para su país o lengua, por ejemplo. También es cierto, que el análisis, al ser exclusivo en un solo buscador, aunque sea el líder, puede ser más limitado.

Diagrama de PyPL con licencia Creative Commons Attribution 3.0 Unported License

Con este método de analizar consultas sobre tutoriales, se trata de establecer un término de búsqueda consistente e igual para todos los lenguajes, con probabilidades parecidas de utilización en todos ellos, y que suelen dar pocos falsos positivos (es decir, resultados que no tienen que ver con lo que queríamos buscar).

También reseñar que no son consultas totales, sino que se calculan proporciones. Es decir, del total de búsquedas sobre tutoriales de esos lenguajes, calculan el porcentaje que representa cada uno. Por eso, aunque haya menos consultas sobre tutoriales Java a lo largo del tiempo, si en el resto también caen, el % puede mantenerse estable.

De esta manera se evitan fallos cómo:

• Analizar la búsqueda por el nombre solo del lenguaje, ya que algunos pueden tener varios significados y dar muchos falsos positivos, como por ejemplo ‘Python’ ó  ‘Java’.
• La objeción sobre el uso del cualificador ‘programming’, porque consideran que es más probable utilizarlo en lenguajes como ‘C’, que en otros como PHP ó Javascript, por tener nombres que los identifican de manera inequívoca
• Por último, indicar que al analizar las búsquedas por ‘tutorial’ se está teniendo en cuenta también las búsquedas en español  al ser igual el término en nuestro idioma y en inglés (hasta donde sabemos ha sido una casualidad).

3. The Transparent Languaje Popularity Index

El Índice Transparente de Popularidad de Lenguajes es una herramienta open-source que puedes descargar en sourceforge y que establece su clasificación de manera automática.

Actualización: este es un índice que ya no se actualiza tal como explican en su página. En cualquier caso es interesante conocer su filosofía y datos publicados.

Realiza sus consultas (la misma que en Tiobe: +”<language> programming”) en  buscadores y sitios destacados (Google, Bing, Yahoo, Youtube, Amazon, Wikipedia) y los publica directamente en tablas, sin ningún filtro.

Se puede pinchar en cada celda para verificar el query realizado y los resultados obtenidos

Extracto de los 10 primeros lenguajes ‘clasificados’ en el Transparent Index Language Popularity Index (Julio de 2013)

4. Redmonk

El ranking de Redmonk  se basa en la actividad que se detecta en dos comunidades muy populares entre los programadores:

• número de proyectos en el repositorio de GitHub
• número de preguntas en la web de StackOverflow

Como reconocen los propios creadores de este ranking, aunque ambos sitios presentan una correlación alta, puede haber lenguajes que estén minusvalorados en estas comunidades. Por ejemplo hay lenguajes que no suelen emplearse en proyectos Open Source o personales, algo característico de GitHub, o sean más proclives a utilizar otros repositorios como SourceForge.
Igual puede ocurrir en cuanto a búsqueda de ayuda donde StackOverflow no sea el sitio de referencia para determinados lenguajes.

En cualquier caso, es interesante como método de cálculo distinto al de las consultas realizadas en los buscadores.

Ranking Redmonk en enero 2014 para popularidad e lenguajes de programación

5. Trendyskills

Trendyskills se basa en las ofertas de empleo que se registran para los diferentes lenguajes de programación. Es más una herramienta interactiva que un índice, donde podemos realizar nuestras propias consultas, y ver las tendencias en el mercado laboral de diversos paises (USA, UK, Alemania, España, Suecia y Grecia) lo que es una aproximación diferente y complementaria a los rankings que hemos visto anteriormente.

Gráfico de Trendy Skills con lenguajes de programación más populares por ofertas de trabajo. Podemos modificarlo dinámicamente realizando otras consultas

6. Job trends (Indeed.com)

En esta misma línea de analizar de forma dinámica los conocimientos que se solicitan en las ofertas de empleo, hay otros, como la utilidad ‘Job Trend‘ (tendencias de empleo) del buscador especializado en ofertas de trabajo Indeed.com

Entre otras diferencias, nos da por ejemplo datos de lenguajes o sistemas que no son exactamente lenguajes de programación pero en los que podemos estar interesados (por ejemplo HTML y CSS ó AJAX). En la imagen hemos capturado una búsqueda por Android, que no es un lenguaje en sí, y que en otros índices o rankings puede estar incluído en los resultados de Java.

Tendencia en ofertas de empleo donde se solicitan skills relacionados con Android (http://www.indeed.com/jobtrends/Android.html)

7. Langpop (programming Languaje popularity)

La web Langpop nos ha llamado la atención, ya que se establecen rankings por diversos parámetros. Luego combina todos ellos y mediante una interfaz interactiva, podemos darles distintos pesos a cada criterio según nos interese, para que recalcule las posiciones. Está actualizado con datos hasta 2013.

Actualización: parece que la web langpop.com dejó de funcionar, aunque se puede consultar aquí.

Los parámetros que maneja son:

• Consultas en Google (del tipo “language programming”)
• Número de ficheros con una determinada extensión (prima excesivamente los lenguajes de la Web)
• Ofertas de empleo (publicadas en Craiglist)
• Número de proyectos de desarrollo (GitHub y Ohloh/OpenHub)
• Discusiones sobre lenguajes (Lamda the Ultimate, programing.reddit.com, Slashdot)

Langpop.com: ranking dinámico de lenguajes de programación. Puedes configuralo dando diferentes pesos a cada factor que tiene en cuenta.

8. IEEE Spectrum’s Ranking

En la línea del anterior, pero más potente, otro ranking con una gran interfaz gráfica interactiva que nos permite obtener distintas clasificaciones en función de los distintos parámetros que utiliza para el cálculo de las clasificaciones:

• General (lo que denomina IEEE Spectrum)
• Tendencia (Trending)
• Ofertas empleo (Jobs)
• Personalizado (Custom: nos permite hacernos un ranking a medida eligiendo el peso de cada parámetro)
• Web / Móvil / Empresa / Embebido (podemos filtrar por cualuqiera de estos entornos)

Interfaz gráfica del ranking IEEE Spectrum. Podemos elegir diversas categorías, hacer comparaciones o elaborar uno personalizado

La verdad es que es una de las herramientas que más nos ha gustado de todas las que presentamos, por el diseño que tiene y la filosofía con la que está construida, que nos da muchas posibilidades de personalización como mostramos en la siguiente imagen:

Podemos personalizar los rankings ponderando nosotros mismos los paramétros de cálculo

9. Ranking venta de libros (O’Reilly)

Traemos este ejemplo de índice de popularidad basado en volumen de venta de libros. Hemos escogido a O’Reilly, por ser una conocida editorial especializada en TIC y que publica cada cierto tiempo algún análisis sobre la venta de sus libros:

Análisis venta de libros sobre lenguajes de programación (O’Reilly)

10. Twitter programming languaje survey

Por último, terminamos esta lista con otro método de clasificación, en este caso una encuesta realizada en Twitter a lo largo de 2013 denominada #Code2013.

Nota: puedes ver la última actualización al año 2015 aquí: #Code2015

El volumen de datos no es comparable a las consultas automáticas, pero como muestra puede ser interesante. Para hacernos una idea, Javascript, el lenguaje más mencionado, obtuvo 2.769 menciones.

Además, esta encuesta introduce el sesgo que puede haber en la utilización de Twitter, ya que este uso puede no ser uniforme entre los distintos perfiles de programadores.

En cualquier caso es interesante porque son contestaciones reales a a la pregunta del lenguaje que se utiliza y las ‘respuestas’ pueden comprobarse pinchando en cada hashtag, viendo los usuarios y tuits donde se ha mencionado.

Diagrama popularidad lenguajes según encuesta en Twitter (#Code2013). Datos de enero 2014

Conclusión

Esta lista te puede dar una buena idea del panorama de rankings y herramientas para conocer la popularidad de los lenguajes de programación, aunque lógicamente hay más. Como verás, hay discrepancias, pero también puntos en común entre muchas de ellas, a pesar de emplear métodos diferentes.

En resumen, puede ser una información orientativa muy interesante, útil, e incluso ‘divertida’ de analizar, pero de la que tampoco debemos esperar una precisión y fiabilidad absolutas.

Ahora es tu turno: ¿Conoces algún ranking que no hayamos presentado aquí? ¿Alguna herramienta que consideren otros idiomas además del  inglés? ¿Ves útil alguno en especial? ¿Utilizarías alguno de estos rankings para decidir que lenguaje aprender o te basas en otros criterios? Esperamos tus comentarios!

En el anterior post, citamos a los dos lenguajes básicos de la web por los que comenzar: HTML y CSS. Deberíamos estar bastante familiarizados con ellos, tanto si queremos ser ‘todoterrenos’ como especialistas en algún área concreta del desarrollo web. A estos dos lenguajes añadiríamos conocimientos sobre los fundamentos de Accesibilidad, Usabilidad y SEO (en este último caso, técnicas de optimización ‘in-page’), es decir,  adquirir buenas prácticas en diseño web desde el principio, teniendo caro la importancia de los estándares, evitando el ‘código basura’  en nuestras páginas y que éstas sean amigables para los visitantes, sean personas (con algún tipo de discapacidad o no) o robots de buscadores. Creemos que es un fallo en la formación de diseñadores o programadores web empezar con herramientas como Dreamweaver o tecnologías como Flash, sin conocer esos mínimos fundamentos que comentamos.  Puede que obtengamos buenos resultados visuales, pero sin esa base, posiblemente no sabremos emplearlas o aplicarlas adecuadamente.

Y con este bagaje técnico ¿cómo seguimos avanzando en nuestro aprendizaje? Para algunos, los conocimientos transversales se acaban en las áreas que hemos comentado y a partir de ahora entraríamos en un campo de especialización: programación ‘front-end’ (en el cliente-navegador) o en el servidor, profundizar en diseño de arquitectura web, accesibilidad, interfaces, diseño gráfico en el entorno web,… Sin embargo nosotros incorporaríamos un lenguaje más a nuestros conocimientos básicos: JavaScript. No significa que sea cual sea nuestro papel en el proceso de creación de webs tengamos que ser expertos programadores en este lenguaje, pero si ser capaces de entender cómo funciona y estar familiarizados con él lo más posible.

Si no has programado nunca, y necesitas empezar desde cero, paso a paso, con un lenguaje muy sencillo, te aconsejamos nuestro curso “Aprende a Programar (con JavaScript)“. Verás que es más fácil (¡y divertido!) de lo que creías.

¿Por qué JavaScript? En un post dimos 10 razones para aprenderlo Es el lenguaje de programación de los navegadores, el estándar abierto (en realidad es el ECMAScript, pero todos lo conocemos por JavaScript) que puede funcionar en todos ellos sin necesidad de plugins adicionales. Es cierto que hay otras tecnologías como Flash (propietaria y cerrada, con lo que ello conlleva) y los Applets de Java que permiten dotar de interactividad y dinamismo al cliente web, pero ni son lenguajes nativos de este medio ni sobre todo estaban pensados para realizar una web con ellos. JavaScript se ha impuesto a la hora de dotar de interactividad a la web y en el apartado de animaciones gráficas, banners y diseños gráficos similares, aunque Flash era una buena herramienta, su falta de soporte en cada vez más plataformas (smartphones, varios navegadores importantes…) hace que se vaya sustituyendo por una nueva alternativa como HTML5 combinado con JavaScript.

Y más en detalle, ¿qué aporta JavaScript?. Pues muchas cosas, pero destacamos su capacidad para manipular e interactuar con el DOM de la página. El DOM (Document Object Model, estándar de la W3C) representa la página HTML y sus diferentes partes, como un conjunto de objetos relacionados en una estructura ramificada en forma de árbol, con nodos interconectados jerárquicamente. Es decir, si un ‘párrafo’ (un nodo o una hoja en ese símil del árbol ) está contenido en un ‘div’ (otro nodo), áquel será una rama de éste como puede verse en la imagen. Eso sí, la imagen suele representarse invertida, con el objeto del documento que contiene a todos los demás arriba.

Imagen: representación del árbol del DOM (este tendría como raíz el objeto ‘document’, no incluido aquí). Para simplificarlo solo se ha ‘desarrollado’ la rama de cuadros azules.

Mientras HTML pertenece a la familia de los lenguaje de marcado, el DOM es de la familia de la Programación Orientada a Objetos (POO). HTML trata con elementos que pueden tener atributos con unos determinados valores (por ejemplo,  un elemento ‘párrafo’ que tiene  el atributo de identificación ‘id’ con un valor ‘inicio’: <p id=”inicio”>), y en el DOM esos elementos y atributos se convierten en objetos y los valores de esos atributos son propiedades (si no conoces o no estás familiarizado con la terminología de la POO, puedes consultar este post). Todo ello puede ser manipulado por un lenguaje de programación a través de las API que expone el DOM, es decir, métodos que pueden ser llamados por ese lenguaje para crear, eliminar o alterar dichos objetos.

Aunque lo anterior puede sonar farragoso para alguien sin experiencia en programación, el concepto es sencillo. El navegador cuando ‘lee’ la página HTML, además de presentarla en la pantalla construye un DOM, un mapa que proporciona a JavaScript (o a otros lenguajes como PHP, Java…) una interfaz para llamar a funciones que manipulen dinámicamente sus objetos y las propiedades de estos.  Además, también le da una intefaz para trabajar con eventos, es decir, le permite a JavaScript capturar cambios que se producen en el navegador o provocados por el usuario y dar una respuesta realizando cualquier tipo de acción de las que hemos comentado antes. Es decir, en HTML el párrafo es una etiqueta descriptiva, un elemento estático, pero con JavaScript podemos acceder a ellos y cambiar su contenido, aplicarle estilos de presentación, eliminarlos o crear unos nuevos modificando incluso la estructura de la página.

Para visualizarlo, mostramos un ejemplo en el cuadro de abajo. En él, hemos creado con HTML un par de párrafos, identificando el primero con el atributo id=”inicio” y un botón, con el identificativo “cambiar”.  Con JavaScript, en la 1ª línea de código, seleccionamos al boton por su identificativo (getElementById=”cambiar”) y lo asociamos a un objeto ‘boton’. En la 2ª línea, asociamos  la propiedad ‘onclick’ (ser pinchado) del objeto ‘boton’ a una función, en este caso anónima.  ¿Y qué hace esa función? Pues es la 3ª línea vemos que selecciona el primer párrafo de forma similar a como hicimos con el botón,  y en las 4ª  y 5ª líneas le aplica a ese párrafo escogido un estilo de tamaño de fuente mayor y le cambia el texto que contiene, respectivamente. Si pinchas en la pestaña ‘html’ verás los dos elementos ‘párrafos’ y el botón que hemos comentado y si pinchas en ‘result’ se ejecutará el código mostrando la página. Pincha en el botón y verás el resultado. Aunque es un ejemplo muy simple, nos puede dar una idea de la potencia que nos proporciona la combinación de JavaScript con el DOM.

¿Qué otras cosas podemos hacer con JavaScript? Pues citamos algunas:

• Acceder a los objetos propios del navegador, no solo del documento, y manipular  ventanas (si obtiene permiso) u obtener información detallada del propio navegador del usuario o de la resolución de su pantalla por poner unos ejemplos.
• A partir del input del usuario, procesar esos datos y devolver un resultado. Por ejemplo comprobar que el formato de una dirección email o un NIF que se ha introducido en un formulario es correcto o realizar cualquier tipo de cálculo a partir de unos números que haya introducido el usuario. En definitiva, procesar cadenas de texto, números, arrays, etc… como haríamos con cualquier lenguaje de programación de propósito general, eso sí, limitado al entormo del navegador y sin  acceder a los ficheros y discos del usuario.
• Transmitir y recibir información de un servidor en background, utilizando el objeto XMLHttpRequest, sin necesidad de refrescar toda la página, implementando Ajax en nuestras páginas. Un ejemplo conocido: presentar sugerencias al usuario mientras escribe en un casillero de búsqueda. Cada letra adicional que escribe, hace variar dichas sugerencias.
• Sacar partido de las posibilidades que nos ofrece HTML5 para crear ‘Aplicaciones Web’ y acceder a todas las nuevas API que nos trae este nuevo estándar. Este punto lo ampliaremos en el próximo artículo donde hablaremos precismente de él.

Como ‘extra’ os animaríamos a conocer alguna de la librerías que facilitan mucho la programación con JS y la compatibilidad del código entre navegadores. Podréis realizar cosas avanzadas en cuanto tengáis un poco de dominio. Hay varias muy buenas, pero recomendaríamos jQuery por su popularidad.

Para ver sus posibilidades, mostramos un ejemplo con jQuery también muy simple: una lista de párrafos que se modifican al pulsar el botón ‘cambiar’:

Si quieres ver algo más ‘animado’, puedes ver esta carrera de coches que realizamos como ejemplo en nuestro curso.

En el próximo post hablaremos sobre HTML5 y verás porque es tan importante JavaScript en este nuevo estándar.

Credits: imagen superior ‘Website under construction’ by © Spectral-Design-Fotolia.com / imagen ‘DOM’, elaboración propia

En esta continuación, veremos que la creación de un objeto XMLHttpRequest no es del todo trivial, dado que hay incompatibilidades entre los navegadores de Microsoft (esto es, las distintas versiones de Internet Explorer) y todos los demás.

Existen distintas técnicas para determinar qué navegador se está usando y en qué modo se debe crear el objeto que posteriormente permitirá hacer las peticiones de información. El código que indicamos a continuación es de los más utilizados en la web hoy en día:

function crearConexion () {
 var httpRequest;
 if (window.XMLHttpRequest)
    {
    //El explorador implementa la interfaz de forma nativa
   httpRequest = new XMLHttpRequest();
    }
 else if (window.ActiveXObject)
    {
     //El explorador permite crear objetos ActiveX
       try {
           httpRequest = new ActiveXObject("MSXML2.XMLHTTP");
           } catch (e) {
                        try {
                             httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
                            } catch (e) {}
                       }
   }
 if (!httpRequest)
      {
      alert( "No ha sido posible crear una instancia de XMLHttpRequest" );
      return 0;
      }
 else {
       return httpRequest;
      }
 }

Como puede observarse, hemos creado una función que devuelve un objeto con el que es posible crear la conexión. Por tanto, debemos , podemos cambiar el código de nuestro primer ejemplo de la siguiente forma:

// 1. Instanciamos el objeto para establecer la conexión
conexion= crearConexion();

En esencia, la función creada intenta detectar la existencia del objeto XMLHttpRequest, en cuyo caso estaríamos tratando con un navegador del tipo Firefox, Opera, Safari, Chrome, etc. En caso de que no exista, estaríamos navegando con un cliente Internet Explorer, en el cual es necesario distinguir entre versiones. Las versiones más modernas deben ser instanciadas mediante un objeto ActiveXObject, indicándole que se usa la versión 2 de MSXML: MSXML2.XMLHTTP; por su parte, las versiones más antiguas utilizan la versión anterior, Microsoft.XMLHTTP.

Una versión alternativa intenta crear el objeto con la versión más reciente del MSXML, en caso de estar navegando con Internet Explorer:

function crearConexion() {
 if (typeof XMLHttpRequest != “undefined” )
    {
     return new XMLHttpRequest();
     }
 else if( window.ActiveXObject )
    {
     var versions=[“MSXML2.XMLHttp.5.0”,
      “MSXML2.XMLHttp.4.0”,
      “MSXML2.XMLHttp.4.0”,
      “MSXML2.XMLHttp”,
      “Microsoft.XMLHttp”];
      for ( var i=0; i<versions.length; ++i )
         {
           try {
                var tmpObject=new ActiveXObject( versions[i] );
                return tmpObject;
                } catch( error ) {
                                  // No hacer nada
                                 }
        }
    }
 alert( “No se pudo crear la conexión”;
 return 0;
}

Los problemas debidos a incompatibilidades entre navegadores son una de las principales razones por las que es conveniente recurrir al uso de bibliotecas estandarizadas disponibles en la web (muchas de ellas libre y sin coste alguno: jQuery, Dojo, etc.).

Definición de AJAX

AJAX es el acrónimo de Asynchronous Javascript and XML, es decir: Javascript y XML Asincrono. Este acrónimo fue utilizado por primera vez por Jesse James Garret en 2005, en su publicación Ajax: a New Approach to Web Applications si bien los componentes en que se basan y los recursos técnicos de que hace uso ya existían desde muchos años antes.

Normalmente, AJAX se define como una técnica para el desarrollo de páginas (sitios) web que implementan aplicaciones interactivas. No obstante, analicemos un poco cada una de las palabras que la forman:

• Javascript es un lenguaje de programación conocido por ser interpretado por los navegadores de páginas web.
• XML es un lenguaje de descripción de datos pensado fundamentalmente para el intercambio de datos entre aplicaciones, más que entre personas.
• Asíncrono: en el contexto de las comunicaciones (y la visualización de una página web no deja de ser una acto de comunicación entre un servidor y un cliente) significa que el emisor emite un mensaje y continúa son su trabajo, dado que no sabe (ni necesita saberlo) cuándo le llegará el mensaje al receptor.

Es decir, que podemos refinar un poco nuestra definición indicando que AJAX es una técnica que permite, mediante programas escritos en Javascript, que un servidor y un navegador intercambien información, posiblemente en XML, de forma asíncrona.

Como veremos en el tema 4, la información intercambiada entre cliente y servidor puede hacerse en múltiples formatos: texto, HTML, JSON y, por supuesto, XML. Además (como veremos en el tema 3, la comunicación puede ser también síncrona, de modo que el cliente espere a que le llegue la información del servidor. En todo caso, los programas que realizamos para lograr este tipo de conexiones se hacen con el lenguaje Javascript.

¿Para qué sirve AJAX?

En esencia, AJAX permite que una página web que ya ha sido cargada solicite nueva información al servidor. Dicho así, no supondría en realidad ningún invento novedoso. Una página web que contiene un enlace permite que se solicite al servidor nueva información cada vez que se pincha dicho enlace. Una página web que contiene un formulario envía información al servidor y recibe de él nueva información, normalmente la respuesta ante los datos que se han enviado. En ambos casos hay una conexión entre el cliente y el servidor.

¿Cuál es la diferencia cuando usamos AJAX? La diferencia es que con AJAX no es necesario recargar toda la página web, como ocurre cuando pinchamos en un enlace o cuando pulsamos el botón submit de un formulario. Con AJAX es posible realizar una conexión a un servidor desde dentro de una página web usando un programa Javascript. Dicho servidor enviará una respuesta; esta respuesta se almacenará en una variable del programa Javascript y, una vez almacenada en la variable, podremos hacer con ella lo que deseemos.

Compración de Modelos de Aplicación Web clásico y basado en Ajax (imagen original de Adaptive Path)
Por ejemplo, podemos pedirle al servidor que nos indique qué hora tiene y mostrar dicha hora en el cliente, en una capa dedicada sólo para visualizar este dato. De esta forma, el usuario podría ver la hora correcta que hay en el servidor (posiblemente sincronizada por NTP) y esta sería la misma para todos los usuarios conectados a dicho servidor, sin tener en cuenta la hora que tengan en su ordenador (posiblemente errónea o susceptible de ser modificada por el usuario). Si actualizamos la hora cada minuto, sin usar AJAX, tendremos que recargar toda la página cada 60 segundos. Sin embargo, con AJAX, simplemente actualizaremos la capa que hemos dedicado a imprimir la hora sin necesidad de alterar el resto de la página.

Primer ejemplo en AJAX

Antes de explicar en detalle cómo funciona AJAX, veamos un ejemplo al cual realizaremos posteriormente sucesivas mejoras.

El código que mostramos a continuación podemos almacenarlo en un fichero llamado ajax.2.1.1.html. Una vez guardado, podemos abrirlo en nuestro navegador sin necesidad de tener ningún servidor de páginas web instalado, sino utilizando la opción “Abrir fichero” que poseen los navegadores.

Realicemos no obstante un par de aclaraciones necesarias antes de verlo:

a) para que el ejemplo funcione, es necesario tener un fichero llamado hola_mundo.txt en el mismo directorio en el que pongamos el fichero ajax.2.1.1.html

b) el siguiente puede no funcionar en navegadores antiguos y en navegadores de la familia de Internet Explorer (en el post siguiente veremos cómo solucionar estos problemas de compatibilidad).

<!--
- FICHERO ajax.2.1.1.html
- ======================
-->
<html>
<head>
<title>Primer ejemplo con AJAX</title>
</head>
<body>
<h2>Primer ejemplo con AJAX</h2>
<script>
 // 1. Instanciamos el objeto XMLHttpRequest
 conexion= new XMLHttpRequest(); 
 // 2. Indicamos un manejador de eventos para cuando llegue la información
 conexion.onreadystatechange=function() {
   if (this.readyState == 4 ) {
   // Va mostrar la información obtenida en la llamada
   alert( this.responseText );
   }
 } 
 // 3. Hacemos la llamada
 conexion.open("GET", "hola_mundo.txt" );
 conexion.send(null);
</script>
</body>
</html>
FICHERO hola_mundo.txt
======================
Hola mundo!

El funcionamiento es bastante simple: si abrimos nuestro fichero ajax1.html en el navegador, obtendremos un mensaje de alerta con el texto “Hola mundo!”, es decir, justo el texto que hemos puesto dentro del fichero hola_mundo.txt.

Pasemos a diseccionar poco a poco el código del ejemplo anterior. En primer lugar hemos de crear un objeto XMLHttpRequest:

// 1. Instanciamos el objeto XMLHttpRequest
conexion= new XMLHttpRequest();

El nombre ya es bastante aclaratorio con respecto a la misión del objeto: sirve para hacer peticiones de información que llegará en formato XML a través del protocolo HTTP.

El objeto, al que hemos llamado conexion actúa como un “mini-navegador” dentro del cliente en el que se ha cargado nuestra página web.

Seguidamente, y para poder obtener información del servidor, abrimos una conexión y le enviamos los datos necesarios para completarla. En este caso, la conexión es de tipo GET, intenta recuperar un fichero llamado hola_mundo.txt y no necesita muchos más datos, por lo que enviamos la petición sin datos adicionales.

// 3. Hacemos la llamada
conexion.open("GET", "hola_mundo.txt" );
conexion.send(null);

Por motivos de seguridad, la URL que indiquemos en la llamada al método open() debe pertenecer obligatoriamente al mismo servidor desde el cual se ha descargado la página web que está realizando la llamada. Es decir, aunque supiéramos que el fichero “hola mundo.txt” está disponible en la URL http://www.otrodominio.es/hola_mundo.txt, no podremos hacer llamadas a él con AJAX si nuestra página web no está alojada también en dicho dominio. En el siguiente tema, al hablar del formato XML, veremos cómo podemos usar información de terceros sitios en el nuestro usando AJAX.

Finalmente, dentro del proceso de realizar la conexión mediante AJAX describimos brevemente el paso 2; lo hemos colocado en esta explicación después del paso 3 intencionadamente, aunque por supuesto es imprescindible que se encuentre en segunda posición. En este paso 2, indicamos al objeto creado qué debe hacer cada vez que cambie el estado en que se encuentra, es decir, indicamos un manejador de eventos.

// 2. Indicamos un manejador de eventos para cuando llegue la información
conexion.onreadystatechange=function() {
          if (this.readyState == 4 ) {
          // Va mostrar la información obtenida en la llamada
          alert( this.responseText );
          }
}

A lo largo de la creación y realización de la nueva llamada, el objeto conexion sufrirá varias veces el evento onreadystatechange por lo que es necesario dotarlo de una función manejadora para este evento. Es imprescindible que el manejador esté declarado antes de que suceda el evento, y es por ello que antes de iniciar la conexión AJAX realizamos la declaración de esta función.

Cada vez que se activa el evento onreadystatechange, la función manejadora toma el control; dentro de ella podemos saber en qué estado concretamente está la llamada gracias a la propiedad readyState. Cuando dicha propiedad toma el valor 4, podemos determinar que se ha realizado correctamente la transacción y acceder a la información que ha llegado gracias a la propiedad responseText.

El ejemplo anterior es, posiblemente, el ejemplo más conciso que podemos escribir para comprobar el funcionamiento de AJAX. No obstante, la programación de sitios web utilizando AJAX requiere de un mayor conocimiento del objeto XMLHttpRequest, así como de los atributos y métodos que posee. En el siguiente post “¿qué es AJAX (II)?”, veremos un poco más sobre él y cómo solucionar los problemas de incompatibilidad con el navegador Internet Explorer.

Estos Packs se han diseñado con materias muy relacionadas que han sido elaboradas por un mismo Autor, que Tutoriza dicha formación. El mejor conocimiento del perfil del alumno permite al Tutor realizar una labor más personalizada. A su vez, el alumno puede relacionar las materias y resolver mejor sus dudas. Por ejemplo, si el alumno tiene una consulta sobre la utilización de JavaScript en el curso de AJAX, o sobre cuestiones de administración Linux en el curso de Apache, va a obtener todas las respuestas de forma rápida y directa por parte del Tutor.

El otro componente del Pack es lógicamente acceder a esta formación a un precio más reducido que si se contratan los cursos de forma separada. Estos precios especiales se aplican también a los alumnos que acceden a nuestro descuento del 50%.

Los Packs, no están disponibles para la formación bonificada a empresas, dada la mecánica propia que tiene, tanto en la forma de acceder a ella, como en la formación de grupos, comunicación de acciones formativas, etc…

Por último, decir que el periodo para realizar los cursos se amplia, contando el alumno con 6 meses para completarlos.

Os describimos a continuación los 3 packs que hemos lanzado:

• Pack “Diseño Gráfico”: con esta promoción puedes matricularte en los Cursos “Diseño Gráfico con Inkscape” y “Diseño 3D con Blender“.  Ambos cursos son Tutorizados por el Diseñador Joaquín Herrera (Joaclint Istgud).
• Pack ” Programación Web”: en esta promoción te matriculas en los Cursos “Programación Web con JavaScript” y “Programación con AJAX“. El Tutor de estos dos cursos es el Profesor Víctor Rivas.
• Pack “Técnico de Sistemas”: esta promoción esta compuesta por los Curso “Administración de Linux” y “Administración Servidor Web Apache“. Los dos cursos están tutorizados por el Administrador de Sistemas Francisco Illeras.

• Desarrollo Web con AJAX
• Administración de Servidor Web Apache
• Administración Linux – Fundamentos

En cualquier caso, tenéis toda la información  con una descripción detallada en sus respectivas fichas a las que hemos enlazado. Todos están en nuestra Plataforma online en modalidad ‘matrícula siempre abierta‘ para poder realizarlos en el momento que querías y a vuestro ritmo. Los tres son bonificable 100% si trabajáis en una empresa, y si no, podéis acceder a un estupendo descuento de 50%.

Esperamos que sean de vuestro interés.