Responsi... qué?

Todo comenzó con Responsive Web Design, un artículo escrito por Ethan Marcotte en A List Apart.

En esencia, el artículo propone abordar el paisaje siempre cambiante de los dispositivos, navegadores, tamaños de pantalla y orientaciones mediante la creación flexible y fluido y sitios web adaptativos. En lugar de responder a las necesidades de hoy en día para una versión web de escritorio adaptado a la resolución de pantalla más común, junto con una versión móvil particular (a menudo específicos de un solo dispositivo móvil), la idea es abordar el problema al revés: usar flexibilidad y diseños fluidos que se adaptan a casi cualquier pantalla.

El uso de dispositivos móviles para navegar por Internet está creciendo a un ritmo astronómico, pero lamentablemente gran parte de la web no está optimizado para los dispositivos móviles. Los dispositivos móviles suelen estar limitadas por el tamaño de pantalla y requieren un enfoque diferente a cómo se presenta el contenido en la pantalla.

Tres características técnicas principales son el corazón del diseño web de respuesta:

• Consultas de los medios de comunicación y los medios de comunicación de los oyentes de consulta 
• Un diseño basado en cuadrícula flexible que utiliza el tamaño relativo 
• Imágenes y medios flexibles, a través de cambio de tamaño dinámico o CSS

¿Qué es eso de jQuery?

Antes de jQuery, los desarrolladores creaban sus propios pequeños frameworks (pedazos de código), esstos permitirían a los desarrolladores trabajar en torno a todos los bugs (errores en código) y les darían más tiempo para trabajar en funciones, así nacieron los frameworks de JavaScript.

Luego vino la etapa de colaboración, grupos de desarrolladores en lugar de escribir su propio código le daría de forma gratuita y crearía código JavaScript estable que todos pudieran utilizar. Eso es lo que jQuery es, una biblioteca de código JavaScript. La mejor manera de explicar jQuery y su misión bien aparece en la página principal del sitio web de jQuery que dice: jQuery es una biblioteca de JavaScript rápida y concisa que simplifica el documento HTML manejando eventos, animación, y las interacciones Ajax para el desarrollo web rápido.

Como se pueden ver jQuery es, es JavaScript.

Pero, ¿qué es ajax?

Según wikipedia (fuente confiable por excelencia en internet).

http://www.wikiwand.com/en/Ajax_(programming)

Básicamente lo que dice es que ajax, por el contrario de lo que al principio podrás creer, no es lenguaje de programación sino una técnica usada para crear aplicaciones web asíncronas. La palabra "asíncrona" significa que el navegador no necesita recargar el sitio, o volver a visitar el servidor, o hacer un nuevo requerimiento de información (request) para obtener más datos.

Para realizar este método, lo puedes hacer tomando nota de lo siguiente:

• Haciendo uso de un framework
• Codificándolo por tus propios medios

Sinceramente, y no es porque sea difícil, no es necesario codificar todo desde cero, es mejor hacer uso de algún framework pues llegarás a la misma Roma pero en menos tiempo.

Los diferentes framework que tenemos para esto son:

• jQuery

Para hacer ajax con jQuery, haz lo siguiente:

$.ajax({
 url: "http://fiddle.jshell.net/favicon.png",
 beforeSend: function( xhr ) {
   xhr.overrideMimeType( "text/plain; charset=x-user-defined" );
} })
.done(function( data ) {
  if ( console && console.log ) {
    console.log( "Sample of data:", data.slice( 0, 100 ) );
  }
});

• Vanilla

Para usar ajax con Vanilla, debes usar:

var r = new XMLHttpRequest();
r.open("POST", "path/to/api", true);
r.onreadystatechange = function () {
  if (r.readyState != 4 || r.status != 200) return;
  alert("Success: " + r.responseText);
};
r.send("banana=yellow");

• MooTools

Para usar ajax con MooTools, sólo debes hacer lo siguiente:
var myRequest = new Request({
 url: 'image.jpg',
 onProgress: function(event, xhr){
   var loaded = event.loaded,
   total = event.total;
   console.log(parseInt(loaded / total * 100, 10));
}
});
myRequest.send();