Rotatory Ads: Haz Rotar tus anuncios de AdSense.

Rotary Ads es un pequeño JavaScript que se encarga de publicar varios bloques de AdSense con la misma apariencia pero con distintos anuncios. El script se encarga de cambiar con un fundido agradable de un bloque a otro cada cierto número de segundos ofreciendo a los usuarios que permanecen mucho tiempo en una misma página web mayor cantidad de anuncios y ampliando así las posibilidades de que alguno de ellos pueda interesarle.

En la página habilitada para compartir el código hay un enlace a un generador de codigo para Rotary Ads. El Funcionamiento es sencillo, simplemente se indica cuantos bloques de anuncios quieren ir alternándose y cada cuantos segundos tiene que hacerse el cambio. Entonces a partir del código de AdSense que ya se está usando en tu web el generador crea un nuevo código que hará que tus anuncios roten con el tiempo.

Aún falta la que Google de su opinión sobre este Script ya que si hablamos de dinero es necesario asegurarnos de que no vamos a ser baneados por intentar ampliar un poco nuestros beneficios... Veremos que pasa.

Mete AdSense aunque no quepa. Parte I.

Muchas veces llega la hora de incorporar un poco de adsense a nuestra página para mejorar un poco su productividad. Llegado ese momento muchas páginas no pueden ponerlo sin reestructurar todo el diseño y la plantilla css. Para aquellos que han encargado el diseño a terceros o basan su web en una solución ya creada (por ejemplo wordPress) esto puede suponer un problema.

En esta primera parte trataremos como incorporar una columna de AdSense de 120x600px a webs de 800px de ancho. En una posterior entrada comentaremos como hacer algo parecido en webs de 100% de ancho.

Incorporando AdSense a webs con 800px de ancho.

Muchas veces, si la web es muy vistosa o si el diseñador no se maneja bien con medidas relativas recurrimos a realizar una web de 800px de ancho que quede centrada en la pantalla. Así nos aseguramos que la página se vea bien en cualquier resolución.

¿Como lo incorporamos?

Pues tenemos una página web a 800px de ancho cuando hoy por hoy la mayor parte de nuestros usuarios van a verla con una resolución mucho mayor.

Eso quiere decir que tenemos muchos pixeles de sobra en los lados de la página para la mayor parte de los casos. ¿porque no usamos ese espacio para nuestro AdSense?

Lo que vamos a hacer es crear una capa oculta al final del documento que contenga una columna de AdSense. Si la resolución es suficiente entonces con JavaScript modificaremos esa capa y la pondremos al lado de nuestro documento. El resultado será ver nuestra pagina con una columna de AdSense añadida a la derecha de la misma.

Para saber si debe o no mostrar el AdSense el codigo que sigue lo que hará es sumarle 240px (120px a cada lado de la pagina) al ancho que le indiquemos y sigue cabiendo todo en pantalla entonces colocará la columna en su sitio. Sólo en ese caso se mostrará el AdSense al usuario. Los usuarios con resoluciones más bajas no serán "molestados".

El código. (a insertar justo antes del cierre del body)

<div id="adSenseLateral" style="display:none">
METER AQUÍ CODIGO PARA COLUMNA ADSENSE
DE 120PX DE ANCHO (google_ad_format = "120x600_as";)
</div>
<script type="text/javascript">

var ancho_original_de_pagina=768;
//puedes poner aquí el tuyo.(en pixeles)

var altura_de_la_cabecera=50;
//margen desde el tope de la pagina hasta el adSense. (en pixeles)

//El código que sigue no lo cambies.
if (window.innerWidth) ancho=window.innerWidth; else ancho=screen.availWidth;
if (ancho>=(240+ancho_original_de_pagina))
document.getElementById("adSenseLateral").style.cssText="display:block; position:absolute; top:"+altura_de_la_cabecera+"px; left:"+((ancho-ancho_original_de_pagina)/2+ancho_original_de_pagina)+"; width:120px; margin:0px; padding:0px; border:0px; z-index:50"
</script>

No es Ajax todo lo que reluce.

Hoy por hoy es imposible estar mínimamente relacionado con el mundo web y no haber oído hablar de Ajax. Sin embargo, la tendencia lleva a pensar que cualquier tipo de carga asíncrona es Ajax. Nada podía ser más falso; ya había cargasasíncronas antes de que la gente usase Ajax y hoy por hoy sigue habiendo métodos interesantes para hacer estas cargas que son más útiles para algunas cosas que el método Ajax.

Delimitando Ajax.

Ajax es sólo una forma de llevar a cabo una petición de carga de un objeto XML. Utiliza el objeto xmlHttpRequest y caga directamente objetos XML o textos planos. Cualquier otra forma de cargar contenidos o el uso de este objeto para cargar cosas distintas a XML o texto plano NO ES AJAX. Podemos hacer prácticamente lo mismo de otras formas: poner iconitos de "cargando" y apliar informaciones en la página... pero toda esa parafernalia no pertenece al método Ajax sino a la unión de tecnologías que vulgarmente se conoce también como Ajax.


Flash también trabaja de forma asíncrona.

Antes de que Ajax se pusiese de moda Flash ya hacía estas viguerías. Bueno, Ajax también existe desde hace tiempo pero la gente no lo conocía (y yo tampoco, que soy muy gente). Al ser un plugin externo al navegador nos quedamos aquí: si ves que es Flash y carga contenidos no pienses que ha usado Ajax, sigue siendo Flash.

Cargando objetos JSON.

Ajax va muy bien cuando nuestro lenguaje por parte del servidor maneja objetos XML (como puede ser XSL, por ejemplo). Pero para los dos lenguajes de programación de servidor más usados: PHP y ASP, la creación de objetos XML es incomoda... y, por qué no decirlo, inútil. JSON es un modelo de creación de objetos y matrices que es mucho más fácil de crear y que JavaScript entiende sin ninguna ayuda ya que es uno de sus métodos propios para crear objetos.

Podéis encontrar más información sobre como crear objetos JSON que JavaScript entienda en este link.

Utilizando el objeto XmlHttpRequest para cargar texto plano podemos lanzar una interpretación de lo cargado como si fuesen ordenes javascript para crear un objeto (funcióneval() ) y de esta forma cargar un objeto javascript.

Ventajas:

• No necesita crear objetos XML.
• Su redacción es rápida.
• Puedes cargar objetos pero estos pueden contener además matrices e incluso funciones.
• Para objetos repetitivos el tamaño del texto a cargar es menor.

Inconvenientes:

• Hay que aprender a escribir JSON.
• Las funciones DOM no son útiles porque no son objetos Document. Debemos conocer bien el objeto cargado sin poder acceder a cualquier punto de sus ramas por id o tag.
• Para objetos grandes es menos legible por una persona.

Creando objetos que utilizan documentos externos para ser visualizados. (Imágenes, Flash, Videos, Musica...)

No puedo evitar sonreír cuando veo clasificado como Ajax un slideShow o cualquier tipo de preview de imágenes de los que pasa a cargarte la imagen mas grande y de mayor resolución en la misma pagina cuando clickas la pequeña. No tiene ningún sentido ya que Ajax carga objetos de texto y no interfiere en la forma gráfica de la página. Es el navegador el que tiene que ir interpretando el DOM final para mostrar lo que queremos ver.

Este método es muy simple si conocemos un poco DOM. Simplemente tenemos que buscar una imagen y cambiar su valor SRC. El navegador tendrá que volver a interpretar el código HTML y buscar la nueva imagen a cargar dentro de la etiqueta "img".

Si ya dominamos un poco más el manejo del DOM podemos crear capas nuevas enteras con la etiqueta "img" dentro y ya está... sin ningún misterio. El resto de objetos de este tipo suelen usar la etiqueta "embed" lo cual no cambia nada de lo anteriormente dicho...

Ventajas:

• Simple, sencillo, directo.
• Puede integrarse el cambio en el documento.
• No requiere conocer nada más que DOM y eventos HTML.

Inconvenientes:

• No cargas texto, no puedes dar ordenes que no hayan sido establecidas como posibilidad en la primera carga del documento.
• Para detectar cuando empieza y acaba la carga del objeto necesitamos modificar los eventos onload y onerror lo cual complica un poco más el código que la generación de una etiqueta directamente formada con los eventos ya incluidos.

Creando Iframes Ocultos

Hasta hace un tiempo se forzaba así la carga de contenidos ocultos. Un iframe es una pagina web contenida dentro del propio documento. Si este es oculto significa que el usuario no lo ve, pero no por eso deja de cargarlo. LosIframes nos permiten hacer más cosas que Ajax (el ejemplo más claro lo tenemos en el envío de archivos por formularios: Ajax no puede hacerlos y los iframes si). Sin embargo el acceso a los contenidos de Iframes está más restringido que el acceso a los contenidos cargados por Ajax lo que hace más difícil su manejo.

Ventajas:

• Aumenta algunas de las posibilidades de Ajax.
• Carga directamente HTML completo.
• El navegador ya maneja el proceso de carga de iframes (y cambios de pagina) de la misma forma que a la propia pagina.

Inconvenientes:

• Es mucho más complicado manejar iframes que Ajax.
• Los navegadores no los manejan de la misma forma.
• Al tratar el navegador su carga como de pagina es imposible hacer cargas nuevas sin que el usuario las vea.
• Es preciso crear un documento HTML para el iframe.

Creando y modificando etiquetas SCRIPT

Y es que con javascript no solo podemos modificar el body de nuestro documento. Podemos modificarlo casi todo. Este es un gran ejemplo: este método se encarga de cambiar las llamadas a librerías javascript borrando algunas y añadiendo otras. El navegador al ver el cambio se ve forzado a interpretar lo que pone la librería. Si esa nueva librería contiene ordenes o funciones referentes alDOM ya tenemos otra forma de hacer cambios en nuestra página.

Podéis tener más información sobre este método aquí

Ventajas:

• Lo que cargas es JavaScript directo: puede permitirte cambios mucho más drásticos en el documento.
• Te permite crear varios objetos (por JSON por ejemplo), Funciones nuevas, y dar ordenes directas.

Inconvenientes:

• No existe una forma directa para ver el estado de la carga (ningún indicador que te diga cuando ha terminado). Para detectarlo debemos manipular nuestra librería de forma que de una orden dentro de si misma que nos indique que ha terminado de cargar.
• El contenido cargado puede ser luego borrado pero no manipulado.

Creando y modificando etiquetas LINK

Si lo único que queremos cargar de forma asíncrona son valores del aspecto de nuestro documento podemos usar el mismo método anterior pero aplicado a la creación de etiquetasLink que caguen librerías CSS. SIendo incluso más rebuscados podríamos cargar esas librerías y acceder a sus propiedades (width, height, border) como si de datos se tratasen.

Ventajas:

• Lenguaje nativo si lo que quieres cambiar es el aspecto.

Inconvenientes.

• Es difícil de manipular su contenido.
• Es complicado usar sus valores como variables.
• No hay forma de controlar el estado de carga.
• En realidad, no es útil para nada que no se realmente CSS.

Cargando archivos que generan Cookies.

Cualquiera de los sistemas anteriores (menos flash) tiene un posible añadido. Como podemos generar cookies desde el servidor podemos cargar datos con ellas. Cuando yo accedo a un nuevo archivo ya sea por ajax, ajax-json, carga asíncrona de librerías javascript, etc. Si el servidor genera una cookie desde ese mismo momento esta es accesible en mi documento actual.

Ventajas:

• La cookie se mantendrá además de una página a otra.
• La cookie es silenciosa, nada indica que se haya generado ni si una carga además la ha generado o no.
• La cookie es independiente del archivo cargado (pueden cargarse entonces 2 cosas a la vez).

Inconvenientes.

• Debe ser lanzado otro método asíncrono para generar la cookie (ella sola no puede pedirse).
• Los datos son siempre texto plano (ni XML, ni JSON ni ordenes).
• La cookie será accesible por usuarios del mismo ordenador.
• Las cookies pueden ser desactivadas o borradas por el usuario.

(Gracias a Marborack de forosDelWeb por la recopilación y explicaciones)

¿Qué es Ajax? Parte II: La tecnología Ajax.

La verdad es que saber que es teoricamente una cosa normalmente no nos sirve de mucho. En este caso no sólo necesitamos más información sino que la teoría no va muy acompañada de la prácica. Para diferenciar lo que es el método Ajax de la tecnología Ajax nos puede venir bien hacer un simil con caso del televisor y la televisión: El primero es un aparato que nos permite ver imagen y sonido, el segundo es una plataforma que gestiona qué se ve en el primero y define el uso principal y casi exclusivo del aparato.

Ajax desde sus inicios dejó de ser sólo un método para cargar contenidos de forma asincrona y se convirtió en una unión de tecnologías que, haciendo uso de la parte fundamental del método Ajax transformaban radicalmente la web. Es preciso, entonces, que demos un repaso a que añadimos y que no tenemos realmente en cuenta sobre Ajax cuando lo usamos en internet actualmente.

Redefinición del método Ajax.

Ajax no usa XML: Si antes deciamos que ajax era la carga y uso de objetos XML mediante javascript la práctica nos demuestra que en la mayor parte de los casos no llega a usarse ni un objeto XML en muchas de las webs catalogadas como estandares del AJAX.

Y esto es porque el objeto XmlHttpResponse (el encargado de hacer las cargas asincrónicas) tiene entre sus opciones la de devolver directamente el texto cargado sin importarle si era o no un XML. Esto a llevado a que la mayor parte de los desarrolladres empiecen por cargar textos planos y sólo carguen objetos XML cuando realmente las operacines son lo suficientemente complejas como para necesitarlos. En realidad esta es la opción lógica ya que se necesita gastar mucho menos ancho de banda para cargas de texto que para cargas de objetos enteros.

Ajax no necesita documentos XHTML: Si bien el DOM tendría que ser valido sólo para documentos XML o XHTML en la práctica javascript es capaz de manipular perfectamente HTML normal y corriente con las mismas funciones que manipulan XHTML. Eso lleva a que los desarrolladores no se preocupen por tener un XHTML estricto. Sí, muchos usan "<br/>" en vez de "<br>" pero eso no sirve de nada si luego no cierras bien todas las etiquetas...

En definitiva, ajax sólo necesita javascript y un navegador moderno para funcionar sobre cualquier tipo de documento HTML y eso es hoy por hoy lo que la mayoría entienden sobre el método ajax.

Ajax no es sólo un método sino también una técnología.

Ajax no está sólo en el mundo y existen otras tecnologías sin las cuales su uso es posible pero realmente incomodo y desaconsejado. Hasta tal punto se ha hecho obvia esta necesidad de usar otras técnologias que ha pasado a hablarse de Ajax como una tecnología nueva surgida de la union de todas las necesarias para que la cosa funcione.

El método Ajax.

De sobras entendido ya y explicado en un anterior post de este blog. Recordemos que aun no siendo extrictos con la necesidad de cargar documentos XML el método Ajax ya hace necesarios estos elementos:

JavaScript y el conocimiento de su objeto XmlHttpRequest

El DOM y su manejo con JavaScript

DHTML

El llamado "HTML Dinamico" también es hijo directo de JavaScript y de DOM. Fué el paso de la concepción de una página web como una hoja estatica a una pantalla que era capaz de interactuar con el usuario. DHTML detecta eventos basados en las acciones del usuario o en el propio tiempo y modifica la web como resultado de estos eventos.

DHTML es vital para manejar ajax ya que por un lado nos sirve para detectar cuando y como hacer las cargas y por otro nos permite modificar nuestra página en función de lo cargado.

CSS

Las hojas de estilo en cascada (Cascading Style Sheets, CSS) son quizás las menos necesarias para que Ajax pueda empezar a funcionar pero también es la tecnología que más simplifica el trabajo de los desarrolladores. CSS nos permite definir el estilo visual de cualquier contenido de forma externa al HTML. Esto para trabajar con DHTML y con Ajax es esencial ya que nos permite directamente asignar la forma visual de los nuevos contenidos y no tener que trabajarla paso por paso sólo con DHTML.

Lenguaje de Preproceso de lado del Servidor

PHP, ASP, XSQL o cualquiera que sea el lenguaje; para que Ajax tenga sentido no debemos cargar páginas estaticas sino contenidos generados por distintas funciones o extraidos de base de datos. La carga de páginas estaticas no sacaría ningún provecho a esta tecnología.


Ajax no es Dificil, pero usarlo llega a serlo.

El uso de Ajax no es realmente complicado. El objeto XmlHttpRequest puede ser un poco distinto al resto de objetos de javaScript pero no deja de ser un sólo objeto con unos pocos métodos y propiedades asociados.

La dificultad de Ajax viene de que para poder sacarle partido es preciso dominar la tecnología ajax completa y eso implica el dominio de todas las teconologías explicadas anteriormente por separado. Ese el el motivo por el que aprender Ajax a muchos se les antoja dificil: Deben aprender JavaScript a fondo, comprender bien el DOM y tener al menos unas nociones de CSS. Aprender sólo Ajax no sirve.

A todo hay que sumarle, como siempre que hablamos de programar de lado del cliente, que todos estos elementos son tratados de forma distinta por los distintos navegadores (sobretodo por internet explorer). Y no los busques porque que no hay manuales en castellano que expliquen bien como hacer un codigo que valga para todos los navegadores.

La Función de Referencia.

Esta es una de mis funciones javascript preferidas... o al menos a la que más partido le saco mientras desarrollo. Me gusta por tres motivos distintos:

Lo fácil que te hace referirte a cualquier objeto del DOM.

La gran cantidad de lineas de código que te permite ahorrar.

Que te permita crear funciones que sean independientes de si les entra un 'id' o un elmento.

Aquí la teneis:

function $$(id_el_tag){
var el;
if (typeof id_el_tag=='object') el=id_el_tag; else {
if ((arguments[1])||(arguments[1]==0))
el=document.getElementsByTagName(id_el_tag)[arguments[1]];
else el=document.getElementById(id_el_tag); }
return el;}

¿Qué es lo que hace?

Es sencilla...

Si la llamamos introduciendole como variable un elemento devuelve el mismo elemento.

Si la llamamos introduciendole sólo un id devuelve el elemento con ese id

Si la llamamos introduciendole un nombre de etiqueta (div, span, table) y como segunda variable un numero devuelve el numero de elemento indicado con esa etiqueta

¿Como usarla?

Siempre que queramos referirnos a un elemento del DOM llamamos directamente a esta función como si ya se tratase directamente del objeto.

Así pasamos de esto:

el=document.getElementById("mi_elemento");
el.innerHTML="Nuevo contenido de mi elemento";
el="";

a esto:

$$("mi_elemento").innerHTML="Nuevo contenido de mi elemento"

Cuando creemos funciones en vez de decidir si la función necesita recibir un elemento directamente o su id llamamos a esta función para que pueda recibir cualquier de las dos cosas.

Por ejemplo esta función admitiría recibir un elemento o un id:

function cambiar_contenido(elemento,contenidoNuevo){
$$(elemento).innerHTML=contenidoNuevo;}

Por ultimo en vez de ir creando Matrices con todos los tags del DOM, si sabemos exactamente que número ocupa el que buscamos podemos referirnos a él de esta manera.

$$("div",3).innerHTML="Soy el div número 4";
// el 4 porque las matrices empiezan a contar desde 0.

Y básicamente eso es todo lo que hace. Espero que os sea tan útil como me lo es a mi siempre.

La función de Referencia: ikReferencia.js

¿Qué es Ajax? Parte I: Definición

Ajax ya lleva mucho tiempo con nosotros con lo que la mayor parte de los interesados en desarrollos web ya saben de que va. Sin embargo no debería empezar este blog sin exponer una explicación de que es hoy en día ajax para los desarrolladores.

AJAX: Asincronic Javascript and Xml.

Carga asincrona de conenidos en formato XML mediante Javascript. Y es que por definicion Ajax es sólo eso, el método por el cual conseguir cargar mediante JavaScript contenidos XML de forma asincrona para luego incorporarlos al documento HTML e ir danto más y más información al usuario.

Pasemos a describir mejor cada una de las partes de la definición y a incorporar otra más DOM (Document Object Model) sin el cual la carga de contenidos por Ajax no tiene ningún sentido.

Asincronía.

Por lo general los contenidos web se cargan siempre tras una petición del usuario. Este, ya sea escribiendo una dirección en su navegador, clickando en un link o mandando un formulario, pide una pagina completa a un servidor y su navegador la interpreta mostrándosela en un entorno gráfico más o menos agradable. La asincronía se refiere a romper este modo de trabajo y es la gran virtud de ajax; usandolo podemos hacer que el usuario pida y reciba nuevos contenidos desde el servidor sin cambiar la página sino como añadidos que pueden ser luego usados de la forma que sea.

JavaScript.

JavaScript es un (más bien el) lenguaje de programación de lado del cliente. Eso quiere decir que sus scripts se cargan con la página y que es el navegador el que los procesa. Normalmente es usado para dar cualidades a los documentos que el HTML por si solo no tiene. Por ejemplo todos esos botones que se pueden encontrar en varias webs que consiguen que aparezcan y desaparezcan cosas del documento suelen ser JavaScript. Este lenguaje es además el que posee entre sus objetos el famoso XmlHttpRequest que es el encargado de hacer las llamadas asincronas. En otras palabras Javascript es el lenguaje encargado de manejar ajax.

Xml.

XML es un formato abierto de documentos por etiquetas. Su forma nos permite abrir etiquetas del tipo "contenido" que terminan formando un árbol de documento al anidarse unas etiquetas dentro de otras:

<caja>
  <contenido1>mi Contenido</contenido1>
  <contenido2>
    <subcontenido1>mi Contenido</subcontenido1>
    <subcontenido2>mi Contenido</subcontenido2>
  </contenido2>
  <contenido3>mi Contenido</contenido3>
</caja>

Sí, HTML bien formado (con todo bien abierto y cerrado) es un documento XML. Al HTML valido que sea además XML se le llama XHTML.

DOM: Document Object Model
Modelo de Objetos del Documento.

Este modelo es el que marca la forma de los contenidos XML y trata a cada una de estas etiquetas como "nodos de un árbol de DOM". En el ejemplo anterior CONTENIDO2 según el DOM sería un nodo que tendría como nodo-padre a CAJA y como nodos-hijos a SUBCONTENIDO1 y SUBCONTENIDO2.

JavaScript, aparte de ser el motor de ajax, tiene varias funciones que nos permiten encontrar y colocar cosas en objetos que respondan al esquema de DOM. Como además un documento HTML bien formado (XHTML) también responde a este tipo de estructura nos encontramos con infinidad de posibilidades al poder cargar un XML sacar de él lo que queramos e insertarlo en nuestro XHTML.

Esta es la base teórica de la incorporación de contenidos mediante Ajax: Cargarlos de forma asíncrona y alterar el documento segun lo cargad mediante las funciones de DOM.