Cargar scripts de manera dinámica

Pese a que este artículo de El MicoX fue publicado hace ya varios años, no deja de ser muy interesante y una técnica útil. Se trata de cargar archivos de JavaScript de manera condicional, es decir, sólo cuando nosotros queremos y, de esta manera, aliviar la carga general de nuestro sitio.

Muchas veces, usamos tal o cual truco o tal o cual script en una determinada entrada o bien en ciertas páginas; lo mismo podría ocurrir cuando a un visitante se le dan opciones de alguna clase y esas opciones requieren funciones diferentes. Las alternativas son muchas y esto, sólo es una idea genérica.

La teoría de esto es muy simple, sólo requerimos un poco de código:

<script type='text/javascript'>
//<![CDATA[
function include(archivo) {
var nuevo = document.createElement('script');
nuevo.setAttribute('type', 'text/javascript');
nuevo.setAttribute('src', archivo);
document.getElementsByTagName('head')[0].appendChild(nuevo);
}
//]]>
</script>

Tomorrow again es el primer script de dhteumeuleu que vi y es uno de esos hallazgos de Gem@ que a muchos nos tienen entretenidos (y delirando) en estos últimos dias.

Para adaptarlo a Blogger debemos hacer algún cambio en el script original que puede verse en la página del desarrollador.

¿Qué se necesita hacer?

Primero que nada el script que, podemos agregarlo directamente en una entrada:

<script type='text/javascript' src='URL_tomorrowagain.js' ><script>

O podemos agregarlo a la plantilla antes de </head>:

<script type='text/javascript'>
//<![CDATA[
  ... y aquí copiamos y pegamos el contenido del archivo tomorrowagain.js ...
//]]>
</script>

Luego, el CSS con estas definiciones mínimas:

<style type='text/css'>
#screen { /* el contenedor */
margin: 0 auto;
overflow: hidden;
/* el ancho y el alto debemos calcularo en funcíon del tamaño definido en panel */
height: VALORpx;
width: VALORpx;
}

/* las imágenes */
.panel {
float: left;
margin: 5px;
overflow: hidden;
position: relative;
/* este es el ancho y el alto de cada cuadrado donde se producirá el efecto */
height: VALORpx; 
width: VALORpx;
}
.imgPanel {
border: none;
position: absolute;
text-decoration: none;
}

/* la  imagen que veremos debajo */
#imagenREAL {
display:block;
margin:0 auto;
/* si no queremos limitar el tamaño de las imágenes, eliminamos esto */
max-height: VALORpx;
max-width: VALORpx;
}
</style>

En el ejemplo a descargar hay otras propiedades agregadas, bordes, colores, sombras, efectos varios que son personales y que pueden ser definidos a gusto y piacere de cada uno.

Ahora, el HTML que, si va en un post, recuerden que siempre debe ser escrito en una sola línea lo mismo que el CSS si es también lo colocamos allí:

<div id="screen">
<img class="panel" src="URL_imagen1">
<img class="panel" src="URL_imagen2">
<!-- y seguimos agregando etiquetas IMG con todas las que se nos ocurra mostrar -->
</div>
<img id="imagenREAL" src="URL_imagen1" />
<script type="text/javascript"> window.onload= function(){panel.init();} </script>

Como se ve, sólo es un DIV donde agregamos etiquetas IMG con la clase panel. Debajo, he puesto otra imagen extra con un ID específico y es allí donde se mostrará la imagen original cuando hagamos click sobre alguna de las miniaturas.

El script final es el que ejecuta la función del efecto cuando se termina de cargar nuestra página.

El ancho y el alto del DIV screen es lo que nos permite establecer la forma en que veremos nuestra galería y lo calculamos usando aritmética elemental. Si decimos que cada panel tendrá 150x150, entrarán 3 en un ancho de 450 pixeles a lo que le sumamos el margen y padding si es que los tienen y así obtenemos un valor aproximado. Luego lo ajustamos; si vemos que la tercera se va para abajo, es que necesitamos aumentarlo. De ese modo, lograremos armar cualquier diseño.

Algunas de las propiedades del CSS3 pueden ser simuladas en Internet Explorer, utilizando sus filtros exclusivos. No todos ellos darán el mismo resultado pero tampoco el resto de los navegadores lo hacen y por ahora, cada uno tiene alguna particularidad distintiva.

En todos los casos, la propiedad tiene la misma sintaxis:

filter: progid:DXImageTransform.NOMBRE(valores);

O en IE8:

-ms-filter: "progid:DXImageTransform.NOMBRE(valores)";

Aunque, en realidad, da lo mismo agregarla o no ya que sólo es una forma de escribir filter así que podemos obviarla.

La opacidad es la más sencilla de implementar

/* para IE, el valor varía entre 0 y 100 */
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
/* para el resto, el valor varía entre 0 y 1 */
opacity: .7;

Opacidad

Aenean eu lorem nec elit semper ullamcorper nec sed neque. Etiam sit amet turpis eros. Nullam ut felis dui. Proin ac nulla et eros semper bibendum. Quisque pharetra erat eget nunc lobortis semper metus.

Las sombras no son lo que mejor se ve en IE; se muestran "duras", sin esfumado:

/* para IE */
filter: progid:DXImageTransform.Microsoft.Shadow(color='#FFFFFF', Direction=135, Strength=10);
/*  para Firefox */
-moz-box-shadow: 10px 10px 5px #FFFFFF;
/* para Chrome y Safari */
-webkit-box-shadow: 10px 10px 5px #FFFFFF;
/* para Opera */
box-shadow: 10px 10px 5px #FFFFFF;

Una alternativa mejor es el filtro dropshadow ya que permite más flexibilidad:

filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=10, OffY=10, Color='#FFFFFF', Positive='true');

Sombras

Aenean eu lorem nec elit semper ullamcorper nec sed neque. Etiam sit amet turpis eros. Nullam ut felis dui. Proin ac nulla et eros semper bibendum. Quisque pharetra erat eget nunc lobortis semper metus.

La rotación es limitada ya que en IE sólo es posible usar tres valores:

/* para IE puede ser 0,1, 2 o 3 */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
/*  para Firefox */
-moz-transform: rotate(180deg);
/* para Chrome y Safari */
-webkit-transform: rotate(180deg);
/* para Opera */
-o-transform: rotate(180deg);

Rotación

Aenean eu lorem nec elit semper ullamcorper nec sed neque. Etiam sit amet turpis eros. Nullam ut felis dui. Proin ac nulla et eros semper bibendum. Quisque pharetra erat eget nunc lobortis semper metus.

Las gradientes funcionan perfectamente y podemos conseguir resultados casi perfectos aunque en este caso, las versiones para los navegadores varían mucho:

/* para IE */
filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#112233', endColorstr='#AABBCC');
/*  para Firefox */
background-image: -moz-linear-gradient(top, #112233, #AABBCC);
/* para Chrome y Safari */
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #AABBCC),color-stop(1, #112233));

Gradientes

Aenean eu lorem nec elit semper ullamcorper nec sed neque. Etiam sit amet turpis eros. Nullam ut felis dui. Proin ac nulla et eros semper bibendum. Quisque pharetra erat eget nunc lobortis semper metus.

Más información::

• Chrome/Safari
• Internet Explorer
• Mozilla Firefox

REFERENCIAS:GIF Anime

SigMirror es otro sitio para alojar archivos y, si bien aparenta aceptar sólo imágenes, esa es una restricción que no tienen los usuarios registrados así que basta crear una cuenta gratuita para disponer de 2.5 GB de espacio disponible y 7.0 GB de ancho de banda mensuales.

Como muchos otros, el servicio admite la posibilidad de subir archivos y mantenerlos como privados o públicos; en este último caso, lo interesante es que permite el hotlink, es decir, los podemos usar en cualquier sitio web y para eso, nos proporcionan la dirección URL de cada uno.

No hay una descripción detallada de los tipos de archivos aceptados pero aseguran que son casi todos. He probado imágenes, videos, documentos, zips, íconos, scripts, xml, html y hojas de estilo sin problemas. Este es un ejemplo de un archivo HTML simple

Panoramio es un sitio donde los usuarios pueden explorar el mundo a través de fotografias subidas por los miembros de la comunidad. Hace tiempo fue comprado por Google y en estos días, Blogger in Draft ha anunciado que hay un API que nos permite integrar un widget a cualquier blog.

A decir verdad, el código final es bastante simple de insertar, sólo hay que copiar y pegar pero todas las explicaciones están en ingles y, aunque son amplias, pueden ser un poco confusas; a diferencia de otros, no he visto (o no he encontrado) que haya algún tipo de página que nos ayude a seleccionar los parámetros; de todos modos, puede intentarse usar lo que ellos llaman Templates es decir, widgets prediseñados y hay cuatro de ellos: photo, slideshow, list y photo_list ; con eso vamos armando la URL necesaria para luego, insertar un IFRAME:

http://www.panoramio.com/wapi/template/photo.html?opcion1&opcion2&opcion3 ...
http://www.panoramio.com/wapi/template/slideshow.html?opcion1&opcion2&opcion3 ...
http://www.panoramio.com/wapi/template/list.html?opcion1&opcion2&opcion3 ...
http://www.panoramio.com/wapi/template/photo_list.html?opcion1&opcion2&opcion3 ...

La primera opción es la unica obligatoria y la más importante: el tipo de fotos a mostrar y para eso, podemos seleccionar un usuario (user=IDusuario), una categoría (tag=categoria) o simplemente seleccionamos alguna palabra genérica como set=all, set=public, set=recent. Algunos ejemplos:

http://www.panoramio.com/wapi/template/photo.html?tag=sea
http://www.panoramio.com/wapi/template/slideshow.html?user=98350
http://www.panoramio.com/wapi/template/list.html?set=public
http://www.panoramio.com/wapi/template/photo_list.html?set=recent

El resto de las opciones definen la forma de mostrar el widget y son optativas:

• width y height establecen el tamaño
• bgcolor es el color de fondo (formato hexadecimal donde reemplazamos el caracter # por %23; por ejemplo, %23FFFFFF es el color blanco)
• columns y rows son la cantidad de columnas y filas en los widgets de tipo lista
• orientation indica si se las listas se mostrarán de manera vertical u horizontal
• list_size es la cantidad de imágenes en el widget de tipo photo_list
• position es la posición de la foto en el widget de tipo photo_list
• delay es el tiempo del efecto en el widget de tipo slideshow

Así que, seguimos agregando las opciones para construir la URL final:

http://www.panoramio.com/wapi/template/photo.html?tag=sea&bgcolor=%23101921
http://www.panoramio.com/wapi/template/slideshow.html?user=98350&opcion2&delay=1.5
http://www.panoramio.com/wapi/template/list.html?set=public&width=280&height=140&rows=2&columns=4&orientation=horizontal
http://www.panoramio.com/wapi/template/photo_list.html?set=recent&position=right&list_size=8&bgcolor=%23223344

Ya está, ahora, podemos insertar el IFRAME:

<iframe src="la_URL_generada" allowtransparency="true" frameborder="0" scrolling="no" marginwidth="0" marginheight="0" width="valor" height="valor"></iframe>

WIDGET PHOTO

<iframe src="http://www.panoramio.com/wapi/template/photo.html?tag=sea&amp;bgcolor=%23101921" frameborder="0" width="400" height="400" allowtransparency="true" frameborder="0" scrolling="no" marginwidth="0" marginheight="0"></iframe>

WIDGET SLIDESHOW

<iframe src="http://www.panoramio.com/wapi/template/slideshow.html?user=98350&amp;delay=1.5&amp;bgcolor=%23101921" allowtransparency="true" frameborder="0" scrolling="no" marginwidth="0" marginheight="0" width="400" height="400"></iframe>

WIDGET LIST

<iframe src="http://www.panoramio.com/wapi/template/list.html?set=public&amp;width=280&amp;height=140&amp;rows=2&amp;columns=4&amp;orientation=horizontal&amp;bgcolor=%23101921" allowtransparency="true" frameborder="0" scrolling="no" marginwidth="0" marginheight="0"></iframe>

WIDGET PHOTO LIST

<div style="-moz-border-radius:10px;-moz-box-shadow:0 0 10px #DDD inset;background-color:#234;border:2px solid #ABC;height:425px;margin:0 auto;padding:15px 15px 0;width:425px;"><iframe src="http://www.panoramio.com/wapi/template/photo_list.html?set=recent&amp;position=right&amp;list_size=8&amp;bgcolor=%23223344" width="425" height="410" allowtransparency="true" frameborder="0" scrolling="no" marginwidth="0" marginheight="0"></iframe></div>

REFERENCIAS:Dicas Blogger

Button Maker es muy simple de usar. Permite que creemos botones con estilo, usando una serie de opciones que, al ir cambiando, podemos ver en una previsualización instantánea lo que lo hace muy intuitivo y fácil de manejar.

Una vez que nos hemos decidido, basta hacer click en el mismo botón generado para que nos de las definiciones CSS necesarias; por ejemplo:

.button {
  background: #384954;
  background: -webkit-gradient(linear, left top, left bottom, from(#93BDD9), to(#384954));
  background: -moz-linear-gradient(top, #93BDD9, #384954);
  border-top: 1px solid #96D1F8;
  color: white;
  font-size: 20px;
  font-family: Helvetica, Arial, Sans-Serif;
  padding: 13px 26px;
  text-decoration: none;
  vertical-align: middle; 
  -moz-border-radius: 14px;
  -webkit-border-radius: 14px;
  border-radius: 14px;
  -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
  -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
  box-shadow: rgba(0,0,0,1) 0 1px 0;
  text-shadow: rgba(0,0,0,.4) 0 1px 0;
}
.button:hover {
  background: #28597A;
  border-top-color: #28597A;
  color: #bab337;
}
.button:active {
  background: #719BB8;
  border-top-color: #719BB8;
}

ejemplo

Simplemente son tres definiciones de clases CSS que podemos agregar en cualquier parte, ya sea entre <b:skin> y </b:skin> o bien entre etiquetas <style> y </style>

Por supuesto, podemos cambiarle el nombre y en lugar de llamarlas button ponerle cualquier otro, editarlo y modificar los detalle o basarnos en ese modelo para crear otros.

Para utilizarlos, basta agregar el atributo class en la etiqueta de un enlace:

<a href="una_URL" class="button">, texto del enlace <,/a>,

Como muchas plantillas tienen definiciones de estilo que afectan a TODOS los enlaces o a los enlaces de una sección del blog, a veces es necesario reforzar la definición y para eso agregamos la palabra !important; por ejemplo:

color: white !important;
font-size: 20px !important;

Es una pena que se sigan olvidando que Internet Explorer existe y que algunas de esas propiedades pueden ser utilizadas con limitaciones. En este caso, usando filtros:

.button {
  background: #384954;
  background: -webkit-gradient(linear, left top, left bottom, from(#93BDD9), to(#384954));
  background: -moz-linear-gradient(top, #93BDD9, #384954);
  border-top: 1px solid #96D1F8;
  color: white;
  display: block;
  font-size: 20px;
  font-family: Helvetica, Arial, Sans-Serif;
  height: 50px;
  line-height: 50px;
  position: relative;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  width: 125px; 
  -moz-border-radius: 14px;
  -webkit-border-radius: 14px;
  border-radius: 14px;
  -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
  -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
  box-shadow: rgba(0,0,0,1) 0 1px 0;
  text-shadow: rgba(0,0,0,.4) 0 1px 0;
  filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF93BDD9', EndColorStr='#FF384954');
}
.button:hover {
  background: #28597A;
  border-top-color: #28597A;
  color: #bab337;
  filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#0093BDD9', EndColorStr='#00384954');
}
.button:active {
  background: #719BB8;
  border-top-color: #719BB8;
}

versión IE

REFERENCIAS:Gem@ Blog