Posts Tagged ‘javascript’

DHTMLX Touch – Framework para dispositivos touch

Escrito por en 14/01/2011

Si alguna vez has pensado en desarrollar alguna aplicación móvil la cual tiene que tener una interfaz “touch” y no has sabido como empezar sin una interficie base, aquí ha llegado la solución.

DHTMLX Touch es una librería en Javascript y HTML5 que nos da todas las herramientas para generar una aplicación web para móvil. Aseguran que el framework es compatible con la mayoría de las plataformas móviles, además de funcionar sin problemas en dispositivos iPhone, iPad, telefonos basados en Android y otros dispositivos populares.

Cabe decir que el framework aun está en Alfa, pero no paran de lanzar mejoras y nuevas funcionalidades al framework. Y la documentación no está nada mal. Por lo que promete ser una buena herramienta para todos aquellos que queráis comenzar con este tipo de aplicaciones.

Podéis ver ejemplos en funcionamiento y probarlo en vuestros móviles desde la web oficial [en].

Entendiendo las Cookies con jQuery

Escrito por en 30/12/2010

Nunca había tocado el tema cookies con Javascript, para ser realistas, pocas veces he tocado cookies, pero aun menos en Javascript hasta hoy.

Y por la tozudez que me caracteriza, no paro hasta que no saco lo que tengo en mente. Y quería gestionar el uso de cookies con Javascript y PHP para acabar de hacer unos retoques a la pagina de inicio que estoy haciendo. Al final ha resultado ser una tontería, pero como muchas otras… son tonterías con las que a veces perdemos un tiempo cada vez más importante. Así que comparto el conocimiento y me lo auto recuerdo.

Objetivo

El objetivo es que al seleccionar el estilo que queremos ver en la pagina de inicio, blanco, negro o normal, este se guarde en una cookie y de esta forma, al volver a acceder a la pagina recuperamos este valor evitando que el visitante tenga que volver a seleccionar el color o el estilo que le gusta.

Para facilitar el trabajo, como que ya estoy familiarizado con la librería de jQuery, me ayudo de esta para gestionar también las cookies desde JS. Aquí podemos ver y descargar el código de la librería jquery.cookie.js.

Implementación

Para asignarle un valor a la cookie, es tan sencillo como poner lo siguiente:

/*-----------------------
* ASIGNAR VALOR COOKIE
*----------------------*/

$.cookie('nombre_cookie', 'valor_cookie');

// Para declararla, como vemos, le asignamos un nombre, seguido de una coma y el valor que le queremos dar o la variable que le pasamos.

Y si ya la hemos declarado y queremos recibirla, lo hacemos de esta forma:

/*-----------------------
* RECOGER VALOR COOKIE
*----------------------*/

$.cookie('nombre_cookie');

// Así no estamos asignando el valor a nada ni lo mostramos, pero lo podemos usar dentro de alguna función
// O la asignamos a una variable para trabajar más cómodamente

var galleta = $.cookie('nombre_cookie');

Claro que una vez declarada… llega el momento en que no la necesitamos… vamos a destruirla:

/*-----------------------
* DESTRUIR COOKIE
*----------------------*/

$.cookie('nombre_cookie', null);

// Asignandole un null al valor de la cookie, esta se destruye.

Y por último lo que nos queda es gestionar el tiempo de vida de la cookie y el alcance que queremos que tenga, etc… veamos las opciones:

/*----------------------
* OPCIONES COOKIE
*---------------------*/

$.cookie('nombre_cookie', 'valor_cookie', { expires: 7, path: '/', domain: '2novatos.com', secure: true });

/* Aqui nos encontramos con distintos parámetros además del nombre y del valor de la cookie, veamos como funciona cada uno.
* Param expires: Fecha en la que expira la cookie o un entero que especifica la fecha de caducidad desde ahora en días. (En el ejemplo son 7 días) También se puede hacer usando un objeto Date.
* Si a la cookie se le asigna un NULL al parametro expires se la considerará una cookie de sesión y se destruirá en abandonar la pagina.
* Si el parametro expires contiene un valor negativo o una fecha en el pasado, la cookie se destruirá.
* Param path: El valor de la ruta que se le da a la cookie (Por defecto la ruta de la pagina que la creó)
* Param domain: El valor del atributo de dominio de la cookie (Por defecto el dominio de la pagina que la creó)
* Param secure: Si true, requiere del protocolo HTTPS para la transmisión segura de datos y de la cookie.
*/

Y por ahora esto es todo, es bastante sencilla la forma de gestionar las cookies con Javascript. Si tenéis alguna duda con esto, os responderemos encantados!

Genera estadísticas de tus descargas

Escrito por en 11/08/2010

Hoy en día las estadísticas son muy importantes, por no decir imprescindibles. “Tenemos un 74% de visitas nuevas”, “el 11% es trafico directo”, “…noticia tiene un 12% de las visitas de la web”,… exacto, todo son números, porcentajes,… al fin y al cabo, es lo que al cliente le interesa. Lo importante para el cliente o empresario que nos contrata es el objetivo de conversión.

Y que es esto del objetivo de conversión? Cualquier página, archivo o documento descargable es un documento de conversión. Pero os damos unos ejemplos para que quede más claro:

  • Una página de “agradecimiento” que aparece tras introducir datos en un formulario. Estas páginas permiten realizar un seguimiento de los registros para la recepción de boletines informativos, suscripciones a listas de correo electrónico, envío de solicitudes de trabajo o formularios con información de contacto.
  • Una página de confirmación de compra o página de recibo.
  • Una página “Acerca de nuestra empresa”.
  • Un determinado artículo o una noticia.
  • Cualquier otra página a la que intente conducir a los usuarios que visitan su sitio.

Todos estos casos son objetivos de conversión, y como tal, es posible que nos interese tener un número de veces que se visitan, o se descargan.

Es posible que haya secciones de nuestra web que no se estén siguiendo en analytics dada su situación, como pueden ser formularios paginados, o descargas de archivos y se nos pida averiguar el número de visitas que se realizan. A día de hoy lo que más he usado y visto, son funciones en PHP que en cuanto se carga la pagina deseada se ejecuta una función que aumenta un número en una base de datos, haciendo así una estadística interna. Eso no está mal, pero si lo queremos unificar todo en la herramienta de Google Analytics, tenemos una herramienta para poder hacerlo.

Una forma más sencilla de hacer el seguimiento de estos datos, si contamos ya con las estadísticas de Google Analytics, es de la forma que os enseñaremos a continuación.

Si leemos los artículos de ayuda de Google Analytics, veremos que nos facilitan la función “_trackPageview“. Esta función permite realizar el seguimiento de los eventos del sitio que no generen una visita de página, es decir, a las descargas de archivos, a los enlaces salientes, etc.

Por ejemplo, para registrar todos los clics que se realizan a un enlace determinado, www.ejemplo.com/descargas/tutorial1.zip, como visita de pagina de /descargas/tutorial1 deberemos añadir el siguiente atributo a la etiqueta <a> del enlace:

<a href="http://www.ejemplo.com/descargas/tutorial1.zip" onClick="javascript: pageTracker._trackPageview('/descargas/tutorial1'); ">

Una vez colocada la función en nuestra web, en 24/48 horas, podremos ver los resultados en nuestra cuenta de Google Analytics.

Soluciona tus incompatibilidades con Internet Explorer

Escrito por en 30/04/2010

¿Eres desarrollador o maquetador Web y estás harto de las incompatibilidades de Internet Explorer? En éste mundillo es algo que a todos nos ocurre, por todos es sabido que no cumple muchos de los estándares Web, lo que complica la vida a los que nos dedicamos a ello.

Hace unos meses descubrí una librería en Javascript que soluciona ciertas incompatibilidades de IE y hace cumplir los estándares Web. Aunque está claro que ésto no lo solucionará todo, pero si que en parte nos evitará algún que otro dolor de cabeza.

Si queréis que las versiones de IE ( 5 a 8 ) se comporten como los demás navegadores, es decir, respetando los estándares Web y reparando sus fallos. Es tan simple como introducir este JS en vuestro proyecto, aunque yo os recomiendo descargarlo y subirlo en vuestro servidor.

<!-- Author: Dean Edward -->

<!--[if IE]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta3)/IE9.js"></script>
<![endif]--></a>

En la web del proyecto tenéis más explicaciones sobre la utilización del mismo.
Por lo que he podido ver en las últimas semanas, el proyecto está en constante desarrollo. No hay más que entrar en el repositorio del proyecto y ver las recientes actualizaciones del mismo.

Si tenéis un Internet Explorer a mano, podéis entrar en la página de demos, y ver las cosas que arregla éste JS, y por tanto, funcionan como deberían.

Sin duda es algo que nos ayudará en ciertos proyectos y que habrá que tener en cuenta.

TipTip, elegante tooltip en jQuery

Escrito por en 29/04/2010

Si queremos mostrar el titulo de un enlace, o el texto de un <acronym> dando la definición u otro texto… podemos usar este pequeño y elegante plugin de jQuery.

ENLACE DIRECTO

Haz funcionar HTML5 en todos los navegadores

Escrito por en 23/04/2010

HTML5

Últimamente se está hablando mucho de HTML5, y los navegadores se preparan para el futuro, de hecho muchos de ellos ya soportan HTML5 en sus últimas versiones. Pero… ¿que ocurre con los navegadores que en sus versiones antiguas no soportan HTML5?

Todos sabemos que mucha gente sigue trabajando con navegadores antiguos durante mucho tiempo, y ahí está el problema. ¿Pasamos nuestra página web a HTML5 o esperamos?
Vamos a investigar para que puedas lanzarte y implementar HTML5 dentro de lo posible y que funcione en todos los navegadores, incluido en los antiguos que actualmente no soportan HTML5.

Xiph.Org Ogg Codecs
Es un ejecutable que solo funciona para Internet Explorer y le permite ver al cliente vídeos de HTML5 (tag video)

Realmente no es lo que buscamos… buscamos no depender del cliente, que nuestra propia página web en HTML5 sea visible en todos o la mayoría de los navegadores.

HTML5-Now
Es un simple archivo JS incluido en tu proyecto web, que permitirá a los navegadores antiguos visualizar tags HTML5, la mayoría de ellos.

¿Queréis probarlo? Abrid un navegador que sepáis que no soporta HTML5 y entrad aquí.
Visualizaréis un video con un tag HTML5. Tenéis más ejemplos aquí.

Como vosotros mismos podéis ver, le queda mucho camino por recorrer, por ahora solo está una muestra de lo que será el proyecto. Pero creemos que dará mucho que hablar.
Contad que el cambio a HTML5 no será cosa de 2 días, herramientas de este tipo nos pueden ayudar mucho.

Xiph.Org Ogg Codecs
HTML5-Now [en]