Programando con Rupert

Cuando la programación es una forma vida...

Month: mayo 2014 (page 2 of 2)

La razón de AJAX – AJAX Parte I

Las aplicaciones web, en cuestión de 10 años, han pasado a convertirse en verdaderas aplicaciones empresariales, robustas y seguras. En muchas ocasiones, incluso, se ha llegado a sustituir una aplicación de escritorio por una intranet. Eso implica que la lógica de negocio, es decir, el núcleo de la aplicación se encuentra en un servidor.

Este artículo que vais a leer es aplicable a cualquier tecnología de páginas web dinámicas, así que intentaré abarcar a lo largo de diferentes artículos, modos de trabajo específicos para cada tecnología. Como primera parte de dos artículos que haré, explicaré la razón por la que surge la necesidad de AJAX, en el siguiente artículo ya veremos como implementar el sistema AJAX en una página. ¡Comencemos!

Modelo Web “Clásico”

El modelo web “clásico” es el que utilizan las tecnologías de servidor (JSP, PHP, ASP, .NET…) para realizar la comunicación entre el navegador del usuario y el servidor. Lo que nos dice este modelo, es que siempre que se necesite ejecutar una porción de código en el servidor o bien se necesite una página, el navegador realizará una petición (GET, POST…) y el servidor devolverá una respuesta, que será interpretada por el navegador.

De esta manera, si un navegador hace una petición mediante GET a una página (por ejemplo mediante un enlace de HTML), dicha página se mostrará en el navegador. Pero también implica que si el navegador hace una petición a un fichero XML, el xml se renderizará en el navegador.

Por lo tanto, esas llamadas al servidor se traducen en barras de carga, parpadeos de pantalla y en lo que yo llamo “El Efecto Web“.

El Efecto Web

El Efecto Web es un término que hace referencia a la experiencia del usuario en nuestra página. Para explicar este efecto, lo mejor es tener un ejemplo en mente.

Supongamos que estamos desarrollando una intranet, es decir, una aplicación que los empleados de una empresa van a utilizar para gestionar su trabajo. Y creamos un módulo de registro de clientes en dicha intranet. El formulario de registro tiene tres desplegables (País, Provincia, Población)

Cuando se seleccione el país, se deberá acceder al servidor a recuperar las provincias correspondientes a ese país. Y lo mismo ocurrirá con las poblaciones. Al tratarse de grandes cantidades de datos, este sistema, según el modelo web “clásico”, se traducirá en una barra de carga o incluso en un parpadeo de pantalla. Lo que puede hacer que una persona trabajando 8 horas al día con nuestra aplicación acabe con ataques epilépticos 😉

Otro problema del efecto web, es la poca comunicación con el usuario. Muchas veces, el propio usuario no sabe si la barra de carga sigue dando vueltas por que está haciendo algo en el servidor o por que va a dar un error. E incluso, debido al diseño de los navegadores actuales, puede que el usuario no vea la barra de carga. Así que se puede dar el caso del “usuario metralleta“, que es el que hace click en un botón, y al no ver resultados al momento en el navegador dice “Esto no funciona!” y tacatacataca a hacer click repetidas veces en el botón. Y todo es por culpa de la falta de comunicación con el usuario.

Modelo web AJAX

Es posible leer por internet algo así como “Tecnología AJAX“, pero eso es incorrecto, ya que AJAX no es una tecnología en sí, si no que estamos hablando de una metodología a la hora de utilizar tecnologías ya existentes.

AJAX es el acrónimo de Asynchronous Javascript And Xml. Por lo tanto, las tecnologías que deberíamos conocer (en mayor o menor medida) son:

  • HTML + CSS – Diseño de la página
  • Javascript – Lógica de la página
  • XML – Manejo de datos

El modelo web AJAX nos dice que ahora no va a ser el navegador directamente el que realice las peticiones al servidor, si no que habrá un Motor AJAX que será el encargado de enviar las peticiones y recibir las respuestas. Este motor es un bloque de código en Javascript. Aunque para nosotros en muchos casos será transparente, internamente está enviando las peticiones y recibe las respuestas en XML y de manera asíncrona, lo que quiere decir que el motor solicitará un elemento al servidor y, cuando éste le devuelva el elemento, recogeremos dicha respuesta con un Callback, donde le indicaremos qué hemos de hacer con la respuesta por medio de Javascript.

¿Qué conseguimos con AJAX? Pues combinar la funcionalidad de servidor con la capacidad de Javascript para modificar el HTML en tiempo real. Así, para empezar, se elimina el efecto web y en el ejemplo anterior podríamos, por ejemplo, indicar con un gif que se están recuperando las provincias al seleccionar un país. Con lo que habremos ganado comunicación con el usuario.

Pues con esto ya hemos visto la teoría de cómo funciona AJAX y por qué es importante en nuestras aplicaciones. En el siguiente artículo ya pasaremos a hacer algo de código.

¡Hasta la próxima!

Rupert.

Animaciones en JQuery

En el artículo anterior expuse un listado de los diferentes selectores que podemos utilizar para trabajar con JQuery. En este artículo veremos algunas de las funciones que nos aporta JQuery para crear ciertas animaciones en nuestro HTML.

Como suele ocurrir con la mayoría de estos frameworks, vamos a tener animaciones integradas en JQuery y podremos crear las nuestras.

Animaciones integradas

Estas funciones permiten mostrar y ocultar un elemento alterando su valor de opacidad. Se les indica el tiempo que tarda en realizar la transición en milisegundos, o bien un string (‘slow‘ o ‘fast‘).

Algunas de las animaciones integradas son:

  • .fadeIn() – El elemento va apareciendo lentamente
  • .fadeOut() – El elemento va desapareciendo lentamente
  • .hide() – Oculta el elemento
  • .show() – Muestra el elemento
  • .slideDown() – El elemento se va desplegando de manera vertical

Animaciones Personalizadas

Para crear animaciones personalizadas, tenemos el método .animate(), que lo que hace es crear una transición entre los atributos css iniciales del elemento y los nuevos atributos css que se establezcan como opciones del método.

Orden de Animaciones

De manera predeterminada JQuery empieza a ejecutar las animaciones a la vez, ya que lo considera una tarea asíncrona. Por lo tanto, a no ser que se ejecuten dos animaciones sobre el mismo elemento (que en ese caso encolará las animaciones sobre el mismo elemento), siempre se ejecutarán a la vez las diferentes animaciones.

Así que si queremos encadenar animaciones entre diferentes elementos, deberemos utilizar los callbacks. Todos los métodos de animación (incluido el .animate()), tienen un parámetro que hace referencia al callback, es decir, la función que se ejecutará cuando la animación termine.

Teniendo esto en cuenta, vamos a modificar el primer ejemplo haciendo que el contenido2 se muestre sólo cuando se oculte el contenido1.

Con esto hemos visto algunas de las animaciones básicas y cómo podemos crear nuestras animaciones.

¡Hasta la próxima!

Rupert.

Selectores CSS – JQuery

En el artículo anterior, escribí acerca de las funciones básicas de JQuery con respecto al documento HTML. Todas ellas se aplican sobre elementos HTML. Lo que voy a escribir en este artículo, es precisamente una recopilación de selectores que podemos utilizar para recuperar elementos del documento HTML.

Mientras que Javascript tiene cuatro selectores:

  • getElementById(id) – Recupera un elemento por su id
  • getElementsByName(name) – Recupera un array de elementos por su nombre
  • getElementsByTagName(tagname) – Recupera un array de elementos por su etiqueta
  • getElementsByClassName(classname) – Recupera un array de elementos por su clase css

JQuery utiliza el amplio abanico de selectores de CSS. De tal manera que si necesitamos aplicar un color de fondo azul a todas las etiquetas <li> dentro de un elemento con el id “listaProductos“, sólo tendríamos que aplicar esta instrucción:

$(“#listaProductos li”).css(“background-color”,”blue”);

A continuación muestro un listado de los selectores CSS más importantes, basándome en la tabla creada en W3Schools (http://www.w3schools.com/cssref/css_selectors.asp), así que si queréis más información podéis acceder al enlace:

Selector
Ejemplo
Descripción del Ejemplo
.intro
Selecciona elementos de la clase “intro”
#firstname
Selecciona elementos con el id=”firstname”
*
*
Selecciona todos los elementos
p
Selecciona los elementos <p>
div,p
Selecciona los elementos <p> y los elementos <div>
div p
Selecciona los elementos <p> dentro de las etiquetas <div>
div>p
Selecciona los elementos <p> cuya etiqueta padre es un <div>
div+p
Selecciona los elementos <p> que se encuentren directamente después de un <div>
p~ul
Selecciona todos los <ul> que van precedidos de un <p>
[target]
Selecciona todos los elementos con el atributo “target”
[target=_blank]
Selecciona todos los elementos con el atributo target=”_blank”
[title~=flower]
Selecciona todos los elementos cuyo title contenga la palabra “flower”
[lang|=en]
Selecciona todos los elementos cuyo atributo lang comience por “en”
a[src^="https"]
Selecciona todos los <a> cuyo src comienza por “https”
a[src$=".pdf"]
Selecciona todos los <a> cuyo src termina con “.pdf”
a[src*="w3schools"]
Selecciona todos los <a> cuyo src contiene “w3schools”
a:active
Selecciona los enlaces activos
input:checked
Selecciona los input checked
input:disabled
Selecciona los input deshabilitados
p:empty
Selecciona los <p> vacíos
input:enabled
Selecciona los input habilitados
p:first-child
Selecciona los <p> que son el primer hijo del padre
p::first-letter
Selecciona la primera letra de los <p>
p::first-line
Selecciona la primera línea de los <p>
input:focus
Selecciona los input que tienen el foco
a:hover
Selects links on mouse over

Esta tabla os puede servir de referencia al crear vuestros selectores, ya que si se trabaja correctamente con ellos nos pueden ahorrar muchísimo código.

Aunque también es posible que obtengamos elementos de HTML por medio de Javascript básico. Por ejemplo, si queremos crear un elemento mediante Javascript y tratarlo después con JQuery.

Con esto ya hemos visto lo básico para poder comenzar a utilizar selectores en nuestras páginas.

¡Hasta la próxima!

Rupert.

Comenzando con JQuery

En el artículo anterior hice una pequeña introducción a JQuery y cómo implantarlo en nuestro proyecto. Lo que vamos a ver en este artículo son algunos de los conceptos y funciones básicas de JQuery. Para los ejemplos que vamos a ver aquí, sólo es necesario tener referenciada la librería core de JQuery. Se puede descargar en jquery.com

Una vez descargada y añadida a nuestra página, ya podemos comenzar con lo básico.

Objeto jQuery – $

JQuery es una librería de Javascript, eso quiere decir que es una apoyo a Javascript, no una sustitución. Por lo tanto, si nos resulta más cómodo realizar ciertas tareas con Javascript clásico, no vamos a tener ninguna pega.

Pero en el momento en el que necesitemos utilizar JQuery lo deberemos hacer con el objeto jQuery.

Ese objeto jQuery tiene un alias que es el símbolo $. Por lo tanto, cada vez que necesitemos utilizar el objeto jQuery, podremos utilizar $. A no ser que tengamos otra librería de Javascript diferente a JQuery que utilice el mismo símbolo. En ese caso deberíamos acceder al objeto jQuery explícitamente.

Funciones “onload”

La mayoría de funcionalidades JQuery se tendrán que realizar cuando la página esté cargada, es decir, cuando el navegador conozca los diferentes elementos del HTML. Para ello, en Javascript teníamos varias opciones, por ejemplo, añadir un evento “onload” a la etiqueta <body>.

Mediante JQuery, tenemos estas opciones:

Ambas realizan lo mismo, así que sólo hemos de decidir cuál nos resulta más cómoda o amigable.

Funciones .text() y .html()

En Javascript, los elementos que recuperábamos por medio de “document.getElementBy…” tenían dos propiedades que permitían cambiar el texto interno (innerText), en el caso de que el contenido de la etiqueta sólo fuese texto, y el html (innerHTML), en el caso de tener que renderizar etiquetas HTML.

Con estos métodos, si se quiere trabajar con el texto a una etiqueta con el id “titulo” se especificaría con el método .text() y si queremos trabajar con el html de una etiqueta con el id “contenido” se especificaría con el método html()

Función .css()

Con esta función se puede cambiar uno o varios atributos css de un selector, o bien extraer el valor de un atributo css.

Función .attr()

Con esta función se puede cambiar uno o varios atributos de la etiqueta html de un selector, o bien extraer el valor de un atributo html.

Función .val()

Con esta función se puede establecer o recuperar el atributo value de los diferentes elementos html.

Con esto ya hemos visto las funciones básicas para comenzar a trabajar con JQuery. En el siguiente artículo haré un listado de los selectores que utiliza JQuery ( $(“selector”) ) para aplicar estas funciones a los elementos que nos interesen.

¡Hasta la próxima!

Rupert.

Implantación de JQuery

En las aplicaciones web de hoy en día no es de extrañar encontrarnos con páginas totalmente dinámicas de cara a la interacción con el usuario, acercándose cada vez más a las aplicaciones de escritorio.

Es cierto que con la llegada de HTML5 y CSS3, las páginas adquieren ya un dinamismo y una funcionalidad de cliente bastante grande. Peeeero… como pasa casi siempre en estos casos, no hay unanimidad entre los diferentes navegadores. Un ejemplo de esta situación es el tipo de dato “date” de HTML5:

Fecha: <input type=”date” id=”fecha” name=”fecha”>

Si realmente estuviéramos hablando de un estándar, esto facilitaría muchas cosas a los diseñadores, ya que simplemente estableciendo ese atributo, ya tendríamos un calendario. Así que:

  • Problema 1: No todos los navegadores interpretan estas funcionalidades (A día de hoy)
  • Problema 2: No hay unanimidad en cuanto al funcionamiento y el diseño de los que lo implementan

Por esa razón y algunas otras más viene la imperiosa necesidad de utilizar JQuery.

JQuery es una librería de Javascript, cuyo lema es “Write less, do more” (Escribe menos, haz más). Y una de las razones de que tenga tanto éxito es que reduce en gran medida el código Javascript necesario para realizar operaciones con el DOM y peticiones AJAX. Ya que trabajar con Javascript básico no es que sea difícil, simplemente es tedioso.

Descarga de JQuery

JQuery se puede descargar de la página oficial y vamos a tener tres proyectos clave:

  • JQuery – Esta librería es el core de JQuery y es imprescindible que esté referenciada en todas las páginas que vayan a utilizar cualquier funcionalidad de JQuery
  • JQueryUI – Esta librería proporciona una serie de funcionalidades y de controles que facilitan mucho el trabajo con la interfaz de usuario
  • JQuery Mobile – Esta librería proporciona funcionalidades específicas para el diseño de aplicaciones web para dispositivos móviles.

Implantación en el Proyecto

Una vez descargadas las librerías que necesitamos, sólo hay que copiar los archivos *.js y los archivos *.css a una carpeta en nuestro directorio web.

Debido a que el código Javascript forma parte del código HTML de nuestra página, hemos de tener en cuenta que el navegador irá leyendo las etiquetas (incluyendo la etiqueta <script>) de manera jerárquica y descendente. Eso quiere decir que es muy importante el orden en el que se declara el acceso a los diferentes ficheros *.js de JQuery que podamos necesitar en nuestra página. El primer fichero que deberemos referenciar será siempre el Core de JQuery.

Con esto ya podremos utilizar JQuery en nuestra página.

¡Hasta la próxima!

Rupert.

Entradas posteriores

© 2019 Programando con Rupert

Sé cambiar el Footer, pero me apetece decir que este tema es de Anders NorenParriba' ↑