Problemas con scripts y SkyDrive

JMiur [E]

Este post está desactualizado ya que SkyDrive no permite utillizar los archivos de manera directa
Otras alternativas

Hay problemas serios con los archivos alojados en SkyDrive. Otra vez sopa, diría Mafalda.

Los archivos están allí pero han cambiado las direcciones URL y por lo tanto, los scripts dejan de funcionar. Basta cambiar esas direcciones para que se solucione pero, parecería que al acabo de cierto tiempo, cambian otra vez.

Lo importante, es saber que esto no tiene nada que ver con la plantilla. Lo digo porque solemos creer que la culpa siempre es nuestra y muchas veces, al tratar de arreglar algo empeoramos las cosas.

Para comprobar si un archivo funciona o no, lo más sencillo es copiar la dirección URL, pegarla en la barra de direcciones del navegador y luego ENTER. Si lo que vemos en una página web, o una página en blanco, quiere decir que algo está mal. Si se trata de un script, el navegador mostrará su contenido como texto o bien nos pedirá autorización para descargarlo.

Sugeriría tener paciencia y esperar a ver si esto es sólo un problema temporal o si se trata de alguna clase de cambio en la política de SkyDrive. Por el momento, no hay ningún tipo de información oficial lo cual no es extraño porque los usuarios sólo somos un cero a la izquierda.

REFERENCIAS:Gem@ Blog

Aplicaciones para Adobe Air

Me da la impresión que Adobe está pisando fuerte en la web. La nueva (por lo menos nueva para mi) herramienta online que nos da 5GB de espacio para compartir archivos y trabajar de manera cooperativa con otros usuarios es muy interesante y llama la atención el esfuerzo que han puesto en su diseño.

Algo similar es lo que ofrecen las aplicaciones creadas para Adobe Air, un entorno multiplataforma que combina distintos lenguajes que normalmente están asociados a la web para crear software de escritorio que puede usarse sin estar conectado a internet.

Cada vez hay más y más de estas aplicaciones y claro, hay de todo, algunas funcionan bien, otras mal pero no dejan de ser interesantes y por lo general, son pequeñas así que no cuesta mucho probarlas hasta encontrar aquellas que nos gusten.

En hongkiat.com nos dan una lista de 60 aplicaciones recomendadas y algo similar podemos ver directamente en el marketplace de Adobe mismo.

GMDesk Gmail, Google Calendar, Google Docs y Google Maps como aplicaciones de escritorio
ReadAir cliente de escritorio para Google Reader
ImageDropr herramienta para subir imágenes a Flickr
Snoto navegador de imágenes
FLVPlay HD reproductor de archivos FLV y MP4 locales o remotros, incluyendo videos de YouTube
AIRTube Video Downloader reproduce y descarga videos de YouTube en formatoFLV
RichFLV editor de videos FLV, permite cortarlos, convertirlos a SWF o extraer el audio en formato MP3
Adobe Media Player es el reproductor multimedia de Adobe; permite gerenciar y descargar contenido de TV
DeskTube es una aplicación completa con todas las opciones de YouTube disponibles en el escritorio
Shrink-O-Matic permite redimensionar imágeness JPG, GIF y PNG
Colorpicker selector de colores
Font Picker selector de fuentes tipográficas
WebKut captura de páginas web
TweetDeck una aplicación para Twitter
Alert Thingy una aplicación para FriendFeed
Posty permite envios a diferentes servicio de microblogging y redes sociales
Facedesk una aplicación para Facebook
AIR iPhone simula la interfaz de un iPhone y permite efectuar y recibir llamados, chequear mensajes de voz, etc
KonoLive es una herramienta para trabajos grupales
Bookmash aplicacicón que permite buscar, descargar y organizar videos y música de diferentes servicios
Jigsawlite crea puzzles a partir de imágenes
Wikipedia Desktop Widget acceso a la Wikipedia desde el escritorio
MyDesktopNotes creación de notas rápidas
JavaScript Example referencias a métodos y propiedades

Títulos en la sidebar

Hace unos dias, Sidhe and Darky Dragonseeker preguntaba la forma de colocar los títulos tal como se ven en la sidebar, utilizando dos colores o dos tipos distintos de fuentes. Es una técnica bastante simple. Basta agregarle una etiqueta extra al encabezado.

Gem@

se suma a la pregunta y, curiosamente, da la respuesta cuando en su último artículo, habla de la etiqueta span y los estilos porque, en realidad, de eso se trata.

En HTML, hay dos etiquetas que podrían llamarse de usos multiples, que no hacen nada por si solas pero que sirven para "contener cosas", especialmente estilos CSS. La que siempre vemos es DIV pero hay otra similar llamada SPAN. La diferencia entre una y otra es que DIV es un bloque (crea un salto de línea) y SPAN no, es lo que se llama una etiqueta inline así que si uno escribe:

un texto con una <span>etiqueta span</span> no veremos nada particular

Entonces ¿para que sirve? Por ejemplo, para cambiar el estilo de cierto texto:

un texto con una <span style="color:red;">etiqueta span</span> que se verá diferente

Usamos SPAN para cambiar las propiedades de una parte sin cambiar las del resto.

Lo mismo ocurrirá con los encabezados de la sidebar aunque allí, lo que deberíamos hacer primero es quitarle el código que pone Blogger.

Cuando agregamos un elemento siempre nos da la posibilidad de agregarle un título. Aunque no nos interese mostrarlo, es útil ponerlo porque de esa manera, identificamos los distintos elementos cuando los queremos editar. Si no queremos que se vean, lo que debemos hacer es ir a la plantilla y editarla expandiendo los artilugios. Por defecto, suele verse esto:

<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
    <h2 class='title'><data:title/></h2>
</b:if>

Lo único que hace eso es mostrar el título del elemento si es que existe. La clase class='title' suele no estar definida jamás y <data:title/> es el texto del título que le colocamos al elemento. Si no queremos mostrarlo, basta eliminar ese código y listo.

Si lo vamos a mostrar, podemos cambiarlo utilizando el criterio anterior, por ejemplo, cambiamos todo y lo reemplazamos por una línea más simple:

<h2>este es <span>mi título</span></h2>

Ahora, lo que faltaría es agregar o modificar las definiciones CSS genéricas que suelen encontrarse en alguna parte entre <b:skin> y </b:skin>:

.sidebar h2 {
.......
}

Necesitamos dos definiciones:

.sidebar h2 {
... serán las propiedades generales del título ...
}
.sidebar h2 span {
... serán las propiedades de esa parte modificada ...
}

¿Qué propiedades podemos usar? Las que que quieran, imágenes de fondo, colores, tipos de fuente, etc. Por ejemplo, podríamos usara algo así:

.sidebar h2 {
color: DarkSalmon;
font-size: 30px;
font-weight: normal;
letter-spacing: -1px;
}
.sidebar h2 span {
color: Tomato;
}

este es mi título

Hay propiedades que no solemos usar frecuentemente, una de ellas es letter-spacing que establece la distancia extra entre las letras de un texto.

Como esta propiedad acepta valores negativos, con ciertas tipografías se logran efectos interesantes colocando valores de -1 o -2 pixeles para "acercar" las letras entre si. Claro que nada impide hacer cosas más extrañas como colocar valores muy altos, tan altos que el texto se ve invertido:

letras
letras

Más ejemplos:

.sidebar h2 {
-moz-border-radius: 5px;
background-color: DarkRed;
color: yellow;
font-family: 'Century Gothic';
font-size: 30px;
font-weight: normal;
height: 40px;
line-height: 40px;
text-align:center;
width: 300px;
}
.sidebar h2 span {
color: YellowGreen;
font-family: Arial;
font-size: 40px;
}

este es otro título

.sidebar h2 {
-moz-border-radius: 5px;
background-color: #444;
color: white;
font-family: 'Century Gothic';
font-size: 30px;
font-weight: normal;
height: 45px;
line-height: 41px;
text-align: center;
width: 300px;
}
.sidebar h2 span {
-moz-border-radius: 5px;
background-color: #000;
color: #BB0;
font-family: Arial;
padding: 0 5px;
}

y este es otro título

Otra propiedad poco común que podemos usar es line-height. Con ella es posible controlar la posición de las letras con respecto a un fondo:

.sidebar h2 {
background-color: #345;
color: #999;
font-family: 'Times New Roman';
font-size: 24px;
height: 30px;
line-height: 5px;
text-align: center;
width: 370px;
}
.sidebar h2 span {
color: #CCC;
font-size: 56px;
}

otro título más

Respuestas rápidas sobre las hojas de estilo

Hay dos métodos para insertar una hoja de estilo externa, podemos usar la etiqueta LINK o la propiedad @import:

<link href='URL_archivo.css' type='text/css' />

<style type='text/css'>@import url(URL_archivo.css);</style>

Aunque se suele utilizar LINK cuando la incluimos en el HEAD de nuestra página, ambos métodos son correctos y el resultado será el mismo.

¿Para qué sirve entonces @import? Generalmente, se utiliza para importar hojas de estilo dentro de una hoja de estilo y en Blogger en particular, ese es el método que debemos usar si queremos agregar un archivo CSS externo en un post ya que la etiqueta LINK no es aceptada.

¿Y para qué agregar una hoja de estilo en un post? Porque si las agregamos en la plantilla se cargarán siempre aunque no la utilicemos así que, por ejemplo, si estamos mostrando algo eventual, algo que sólo se se verá en un post o en muy pocos, lo mejor es "importarla" cuando realmente se necesite.

En esos caso, la única condición a seguir para no tener problemas es que el código esté escrito en una sola línea.

¿Y qué es una hoja de estilo? Un archivo de texto plano, sin formato, que podemos crear con el block de notas y que NO INCLUYE etiquetas. Esto es fundamental, es el error más común. Esta restricción también es válida para agregar definiciones de estilo en la plantilla. Las etiquetas de Blogger <b:skin> y </b:skin> son similares a <style> y </style>; dentro de ellas no debe haber otras etiquetas:

<b:skin>
  ... propiedades ...
  <style>
    ... propiedades ...
  </style> 
  ... propiedades ...
</b:skin>

Eso resaltado es un error y hará que el resultado sea imprevisible. Lo mismo ocurrirá si comentamos el código como lo hacemos en el resto del HTML:

<b:skin>
  ... propiedades ...
  <!-- este comentario es un error -->
    ... propiedades ...
  /* este comentario es válido */
  ... propiedades ...
</b:skin>

Una hoja de estilo es una lista de definiciones que contiene propiedades y tiene una sintaxis estricta; las propiedades deben terminar con un punto y coma o no tendrán efecto:

<style>
  /* el color no se mostrará */
  color: #FFF
  font-size: 20px;
</style>

Como en Blogger no podemos alojar archivos, tener hojas de estilo externas no es demasiado práctico, tardarán en cargarse y editarlas es complejo ya que habrá que descargarlas, cambiarlas y volverlas a subir. Siempre es mejor agregarlas directamente en la plantilla.

También es buena idea organizarlas y agruparlas, no tiene mucho sentido tener una serie de etiquetas STYLE, una sola es suficiente y nada impide que usemos la que ya está incluida por defecto (b:skin) así que en lugar de algo así:

<b:skin>
  ... propiedades generales ...
</b:skin>

<style>
  ... propiedades para el truco XXX ...
</style>

<style>
  ... propiedades para el truco YYY ...
</style>

<style>
  ... propiedades para el truco ZZZ ...
</style>

Podemos escribir:

<b:skin>
  ... propiedades generales ...

  /* el truco XXX */
  ... propiedades ...

  /* el truco YYY */
  ... propiedades ...

  /*el truco ZZZ */
  ... propiedades ...
</b:skin>

Apocalipsis

El fin de la humanidad no será esa fantasmagoría ideada por San Juan. Ni ángeles con trompetas, ni monstruos ni batallas en el cielo y en la tierra. El fin de la humanidad será lento, gradual, sin ruido, sin patetismo: una agonía progresiva. Los hombres se extinguirán uno a uno. Los aniquilarán las cosas, la rebelión de las cosas, la resistencia, la desobediencia de las cosas. Las cosas, después de desalojar a los animales y a las plantas e instalarse en todos los sitios y ocupar todo el espacio disponible, comenzarán a mostrarse arrogantes, despóticas, volubles de humor caprichoso.

Su funcionamiento no se ajustará a las instrucciones de los manuales. Modificarán, por sí solas, sus mecanismos. Luego funcionarán cuando se les antoje. Por último se insubordinarán, se declararán en franca rebeldía, se desmandarán, harán caso omiso de las órdenes del hombre.

El hombre querrá que una máquina sume, y la máquina restará. El hombre intentará poner en marcha un motor, y el motor se negará. Operaciones simples y cotidianas como encender la televisión o conducir un automóvil se convertirán en maniobras complicadísimas, costosas, plagadas de sorpresas y de riesgos.

Y no sólo las máquinas y los motores se amotinarán: también los simples objetos. El hombre no podrá sostener ningún objeto entre las manos porque se le escapará, se le caerá al suelo, se esconderá en un rincón donde nunca lo encuentre. Las cerraduras se trabarán. Los cajones se aferrarán a los montantes y nadie logrará abrirlos. Modestas tijeras mantendrán el pico tenazmente apretado. Y los cuchillos y tenedores, en lugar de cortar la comida, cortarán los dedos que los manejen.

No hablemos de los relojes: señalarán cualquier hora. No hablemos de los grandes aparatos electrónicos: provocarán catástrofes. Pero hasta el bisturí se deslizará, sin que los cirujanos puedan impedirlo, hacia cualquier parte, y el enfermo morirá con sus órganos desgarrados.

La humanidad languidecerá entre las cosas hostiles, indóciles, subversivas. El constante forcejeo con las cosas irá minando sus fuerzas. Y el exterminio de la raza de los hombres sobrevendrá a consecuencia del triunfo de las cosas.

Cuando el último hombre desaparezca, las cosas frías, bruñidas, relucientes, duras, metálicas, sordas, mudas, insensibles, seguirán brillando a la luz del sol, a la luz de la luna, por toda la eternidad.
Marco Denevi (Falsificaciones)

Pués sí, es que cuando uno pasa un fin de semana entre apagones y apagones que nos llevan al siglo 18 con todas sus desventajas y ninguno de sus beneficios, comienza pensar en cuán dependientes somos de las cosas inmateriales.

Bah, frente a eso, sólo queda dormir y dormir hasta que alguien encuentre el cable roto, baje la palanca y diga ¡hágase la luz!.