FullCalendar: cómo insertar un calendario con este plugin jQuery. También sincronizable con Google Calendar.

Creado por Adam Shaw,  FullCalendar es, como dice en su sitio web (con varios ejemplos incluídos), un plugin jQuery que proporciona un completo calendario que se puede alimentar por AJAX (o no, si definimos los eventos en el momento de su creación), y que nos permite incluso arrastrar y soltar eventos, o incluso sincronizarlo con Google Calendar.

Además es ampliamente customizable visualmente, y proporciona controles para capturar eventos tales como el click o el drag and drop (ésto último utilizando jQueryUI) de eventos.

En el sitio web hay muchísima documentación sobre el funcionamiento del plugin, pero vamos a ver cómo incorporar rápidamente este calendario a nuestra página web.

Sigue leyendo

Curso de jQuery (I): Selectores básicos

JavaScript está de moda, eso es un hecho. Y esto es así debido a librerías como jQuery, que simplifican mucho la forma de trabajar con él. Todo lo que se puede hacer con jQuery se puede lograr también con JavaScript directamente, pero teniendo que teclear mucho más código y sufriendo adaptándolo para que funcione en todos los navegadores; jQuery nos libera de ésto y de mucho más.

No soy ningún experto en jQuery, ni mucho menos, pero con este pequeño curso básico intentaré enseñar, de manera práctica, a dar los primeros pasos y de paso pondré en orden lo que he aprendido hasta ahora. Iré mezclando jQuery y también jQueryUI, mostrando cosas básicas de uno y cómo trabajar con controles del otro.

En éste primer post veremos cómo utilizar los selectores básicos de jQuery para interactuar con los diferentes elementos de una página HTML. En la siguiente entrada mostraré otros selectores más avanzados, para no hacer de cada entrada un libro. Pero lo primero de todo es saber cómo incluir jQuery en nuestra web, y qué opciones tenemos. Vamos a ello:

Sigue leyendo

Javascript: Conocer si una variable u objeto existe (diferencia entre null y undefined)

Actualizado: Si trabajas con jQuery y quieres saber si un selector existe en la página, revisa esta entrada.

Trabajar en Javascript implica, entre otras cosas, acceder a variables y objetos. Y siempre que accedemos a éstos nos hemos de asegurar de que existen, o correremos el riesgo de provocar un error que impida que se ejecute el resto del script.

Javascript tiene dos formas de avisarnos de que algo pasa con la variable u objeto al que deseamos acceder: las palabras null y undefined. La diferencia entre ambas radica en que mientras que undefined nos informa que el objeto o variable no está definido, null es un objeto vacío. Entonces, un objeto o variable contendrá algún valor, o será null o undefined. Pero, ¿cuándo es null y cuándo undefined? El siguiente ejemplo nos lo dejará más claro:

Sigue leyendo

Redimensionar los campos de una tabla con jQuery UI

Gracias a jQuery UI podemos realizar acciones o efectos Javascript que normalmente nos costarían muchas líneas de código con un par de simples líneas. En este caso vamos a ver un sencillo ejemplo de cómo poder redimensionar los campos de una tabla.

Para este ejemplo he creado una página simple y he incluido jQuery y jQuery UI enlazándolos en el código desde su página principal (no olvidemos que lo deseable es descargarlos y linkarlos desde nuestra misma página):

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

Lo siguiente es crear una tabla HTML, tan básica o llena de estilos como se desee, para posteriormente añadir en la cabecera de la página el siguiente código javascript:

$(document).ready(function(){
    $(".head_1").resizable();
    $(".head_2").resizable({resize: function(event, ui) { ui.size.height = ui.originalSize.height;},handles:'e'});
    $(".head_3").resizable({resize: function(event, ui) { ui.size.height = ui.originalSize.height;},handles:'e'});
    $(".head_4").resizable({resize: function(event, ui) { ui.size.height = ui.originalSize.height;},handles:'e'});
});

Tras el salto seguiremos explicando qué hace cada cosa.

Sigue leyendo

JavaScript: Fundamentos de JSON

JSON (JavaScript Object Notation) es un formato ligero de intercambio de datos basado en un subconjunto de la especificación de JavaScript, y es ampliamente utilizado debido a su simplicidad y a su ligereza, ya que comparado con XML, genera archivos de intercambio de datos menos pesados, al no contener etiquetas. Este estándar es ampliamente utilizado en aplicaciones web para conexiones asíncronas con el servidor en busca de datos mediante AJAX. Entre muchos otros usos, claro.

Existen dos estructuras básicas que conforman las estructuras de datos que se pasan a través de JSON:

  • Las listas ordenadas de valores,
  • Las colecciones de pares nombre-valor, más conocidas como estructuras o objetos.

Combinando estos dos tipos básicos de estructuras podemos representar cualquier dato o colección de datos que se nos ocurra, independientemente de su complejidad. En este post veremos los fundamentos de JSON en JavaScript y cómo tratar con estructuras de datos de este tipo.

Sigue leyendo