FotoFlexer: Completa edición online

Fotoflexer es uno de los mejores sitios donde podemos editar imágenes online ya sea que estén en nuestra PC o en Photobucket, MySpace, Facebook, Flickr, Picasa y otras redes sociales.

Es una de los servicios online más completos que he visto. La cantidad de opciones realmente asombra:

Una vez que terminamos la edición podemos guardar la imagen en sus servidores, agregarla alguna de las redes o descargarla. Para todo esto es necesario registrarse pero, vale la pena probarlo.

REFERENCIAS:

MicroZulo

Cuando hablaba de los problemas al cambiar la plantilla, un comentario de Eulalia me permite ampliar el tema y comentar una idea que ella propone y explica en un post reciente.

En términos generales, los problemas siempre surgen con los elementos (widgets) agregados ya que Blogger los maneja a su voluntad, numerándolos consecutivamente sin importar nuestros deseos. Por ejemplo, si tenemos:

<b:widget id='HTML2' locked='false' title='' type='HTML'/>

y lo cambiamos por:

<b:widget id='HTML100' locked='false' title='' type='HTML'/>

al guardar la plantilla, el atributo id='HTML100' cambiará otra vez.

Esto es lo que hace las cosas complicadas. Nuestra plantilla tiene una serie de elementos numerados que no coincidirán, salvo un milagro, con los elementos de la nueva plantilla ¿Podemos compatibilizarlas? ¿Podemos agregar a la plantilla nueva los elementos que deseamos conservar y así ahorrarnos problema? La respuesta es sí.

El método que explica Eulalia es correcto; en resumen, creamos un blog auxiliar de pruebas, subimos la plantilla nueva y vamos agregando los elementos que vamos a necesitar, verificando que IDs de cada uno de ellos coincida con la plantilla original.

Algo similar podemos hacer desde el mismo código HTML. Supongamos que la plantilla es sencilla, que sólo tenemos una sidebar que es la que debemos preservar.

Siempre, usamos un blog auxiliar y allí ponemos la plantilla nueva. Ahora, vamos a la Edición de HTML y NO expandimos los artilugios para reducir la cantidad de código. Buscamos la sección de la sidebar que es algo así:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
  [aquí están los elementos o widgets]
</b:section>
</div>

Al no estar expandido el código, cada elemento se muestra en una sola línea, por ejemplo:

<b:widget id='CustomSearch1' locked='false' title='Buscar este blog' type='CustomSearch'/>
<b:widget id='HTML2' locked='false' title='BUSCADOR' type='HTML'/>
<b:widget id='HTML1' locked='false' title='TRADUCTOR' type='HTML'/>
<b:widget id='Feed1' locked='false' title='ULTIMOS POSTS' type='Feed'/>
<b:widget id='Label1' locked='false' title='ETIQUETAS' type='Label'/>
<b:widget id='BlogArchive1' locked='false' title='ARCHIVOS' type='BlogArchive'/>

Bastaría copiar esas líneas y pegarlas en la nueva plantilla, reemplazando las que ya tiene para que ambas sidebars quedarán igual.

¿Posibles problemas? Claro, esto es Blogger; por ejemplo, si los elementos son muchos, saldrá un mensaje de error y en ese caso, habrá que hacerlo en varias etapas.

Aunque es un método sencillo, puede ser engorroso porque en ciertas circunstancias el número de los IDs cambia al guardarse pero eso no afectará al contenido sino sólo al título, el TRADUCTOR contendrá al BUSCADOR y viceversa pero, eso se soluciona cambiando el texto.

La base de todo es saber que lo que hacemos en Elementos de la página, agregando, reordenando o eliminando elementos también lo podemos hacer directamente en el código, agregando, reordenando o eliminando líneas.

El perro ventilado.

La carnada menos pensada.

La tortuga guerrera.

Mucha, mucha, mucha gente.

Strix es un generador de imágenes donde podemos poner un fondo y un texto y el resultado será una mezla de ambos con un efecto tipo collage.

REFERENCIAS:

Gema Blog

El idioma español ha multiplicado su presencia en internet y ya es el tercer idioma más usado, superado sólo por el inglés y el chino [más información]

Según las última evaluaciones, el número de usuarios en todo el planeta ha crecido en 2007 hasta 1.400 millones registrando un crecimiento del 21% respecto al año anterior aunque, comparado con la difusión de los servicios de telefonía móvil, estas cifras parecen casi ridículas: en el mismo año se alcanzaron los 3.285 millones de clientes lo que significa un 20% de aumento en un solo año.

Si la aritmética no falla, la mitad de la población mundial usa teléfonos celulares.

No sé por qué, me acorde de Aldous Huxley y su Mundo Feliz: "una democracia que al mismo tiempo es una dictadura perfecta; una cárcel sin muros en la cual los prisioneros no sueñan con evadirse. Un sistema de esclavitud donde, gracias al sistema de consumo y al entretenimiento, los esclavos aman su servidumbre."

Tendré que volver a leerlo; de pronto, me he sentido uno de los "salvajes".

El tema del tiempo de carga de una página web no es un tema menor. En Blogger es aún peor porque hay una serie de "cosas" que se cargan sin que nosotros intervengamos y sus 45KB no son pocos. Si a eso le sumamos unos 30KB de Google Analytics, Feedburner y Technorati que son agregados habituales, ya estamos en un tercio del total del tiempo de carga mínimo. Seguimos sumando scripts de Json para comentarios o posts relacionados, estadísticas, etc, etc y fácilmente llegamos a 100KB. El tiempo que eso representa variará con cada conexión pero, es sustancial.

Una de las preocupaciones entonces es ¿agrego tal o cual script? si pongo Prototype, MooTools o cualquier otro de esos "monstruitos" ¿afectará la carga? Obviamente, la respuesta es sí. Cada cosa que agreguemos influye y la decisión de usarlas es muy subjetivo y hay para todos los gustos.

Supongamos entonces que las uso, que no quiero privarme de ellas y he evaluado que hay una buena relación costo/beneficio ¿puedo hacer algo para optimizarlas?

Por ejemplo, prototype.js (1.5.1.1), scriptaculous.js (1.7.1_beta2) y effects.js (1.7.1_beta2) que son las que yo uso, pesan un poco menos de 145KB; las versiones más modernas pesan 160KB o más así que si en alguna parte dicen: "Protoculous es un archivo de JavaScript que combina Prototype y Scriptaculous y los comprime para reducir su tamaño y por lo tanto, el tiempo de carga", voy a ver de que se trata porque suena interesante.

El ZIP que bajamos dice que incluye las versiones de prototype 1.5.1 y scriptaculous 1.7.1 beta 3. Lo abrimos y vemos que hay varios archivos, poca información ... y está en inglés:

• scriptaculous-1.7.1-beta2.js es una versión comprimida de scriptaculous y es bastante grande porque contiene todos los componentes, builder,controls,dragdrop,effects,slider y sound (77 KB)
• protoculous-1.0.0-shrinked.js es una versión comprimida de prototype + scriptaculous con todos sus componentes (143KB)
• protoculous-1.0.1.js es una versión mínima de 56 KB

La primera prueba que hice es usar protoculous-1.0.0-shrinked.js y reemplazar mis tres scripts: prototype.js + scriptaculous.js + effects.js. Evidentemente, en este caso, no hay una diferencia en cuanto a tamaños sino que estoy usando más o menos la misma cantidad de bytes para actualizar las librerías pero cargarlas completas y no de manera parcial. El resultado es bueno, Protoculous funciona bien y el hecho de tener sólo un archivo y no tres ya es una mejora porque hay que recordar que en estos casos, siempre es mejor tener un solo archivo "grande" a varios archivos pequeños.

Hasta aquí, podríamos decir que es una mejora pero no tan sustancial.

Leyendo un poco más, tratando de encontrar algo de información, veo que hablan de un sitio llamado Bananascript.com que se define como una herramienta online para comprimir scripts. Esto, dicen, lo hace eliminando comentarios, espacios innecesarios, etc pero además, lo comprime en modo "real", cambiando secuencias de bytes largos por secuencias más cortas.

¿Probamos?

Es sencillo, entramos en la página y subimos un archivo que debe tener extensión JS y más de 4KB. Hacemos click en el botón Compress y esperamos unos segundos. Cuando está listo, descargamos el nuevo archivo generado.

Primero, subí protoculous-1.0.0-shrinked.js. Los 143KB originales se redujeron a 64KB. La diferencia es importante así que subí el archivo para ver qué pasaba y, efectivamente, funciona sin problemas.

Lo único que aclara la página es que el charset del sitio debe ser iso-8859-1 ya que no se ha probado en otros modos pero, eso no es problema, no es necesario cambiar nuestro sitio, basta indicarlo en la llamada al script así que estos archivos comprimidos los cargamos así:

<script type="text/javascript" charset="ISO-8859-1" src="URL_archivoComprimido.js"></script>

Me entusiasme así que empecé a hacer pruebas. Por fin, me decidí a hacerlo en serio:

prototype.js + scriptaculous.js + effects.js (145KB) usando Protoculous fue comprimido a 63KB
lightwindow.js (65KB) fue comprimido a 16KB
VagaSidebar.js (10KB) fue comprimido a 4KB

En resumen, los 220KB originales quedaron reducidos a 82KB. Los alojé otra vez en mi servidor y allí estan desde hace varias horas. Parece que todo sigue en su lugar pero, cualquier problema, avisen.

La forma en que Blogger maneja la fecha de los posts es bastante exótica, no sé si será porque le resulta fácil debido a la estructura de su base de datos o simplemente porque no se les ocurrió algo distinto y continúan haciendo lo mismo. En teoría, cada post tiene una fecha, de hecho, la vemos cuando abrimos una página individual pero, en la página principal, si hay varios posts publicados el mismo día, sólo vemos una.

En realidad, hay dos lugares donde definimos la forma de ver las fechas, en Diseño | Añadir y organizar elementos de la página, si editamos el elemento Entradas del blog, podemos establecer el formato de la fecha y eso es lo que se mostrará en el footer de los posts, por lo general, dentro de un bloque como este:

<div class='post-footer-line post-footer-line-1'>
  .......
  <span class='post-timestamp'>
    <b:if cond='data:top.showTimestamp'>
      <data:top.timestampLabel/>
      <b:if cond='data:post.url'>
        <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'>
          <abbr class='published' expr:title='data:post.timestampISO8601'>
            <data:post.timestamp/>
          </abbr>
        </a>
      </b:if>
    </b:if>
  </span>
  .......
</div>

Esa zona es fácilmente configurable ya sea con las herramientas de edición o modificando el código HTML; pero la fecha también se establece en la Configuración | Formato, allí es donde definimos la forma en que se verá la fecha, encima de cada entrada:

Formato de cabecera de fecha 23-jun-2008 23 de junio de 2008 lunes 23 de junio de 2008 23/06/08 lunes, junio 23, 2008 6/23/2008 6.23.2008 20080623 2008/06/23 2008-06-23 23.6.08 lunes lunes, junio 23 junio 23, 2008 23 junio 2008 23 junio, 2008

Y es esa el área que se hace difícil de manejar. En una plantilla típica, ese dato se muestra así:

<b:includable id='main' var='top'>
  .......
  <b:loop values='data:posts' var='post'>
    <b:if cond='data:post.dateHeader'>
      <h2 class='date-header'>
        <data:post.dateHeader/>
      </h2>
    </b:if>
  .......
  <!-- este es el loop de los posts -->
  <b:include data='post' name='post'/>
  .......
</b:includable>

La variable <data:post.dateheader/> es la que posee el dato y se encuentra justo antes del bucle que muestra los posts así que, como está ubicada allí, la fecha se muestra siempre arriba de los títulos.

Hace unos días, Alfonsete me preguntaba si era posible mostrar la fecha debajo del título y, en realidad, cambiarla de lugar es sencillo. Primero, buscamos el código:

<h2 class="date-header"><data:post.dateheader/></h2>

y para evitar problemas en el caso de querer restaurarlo, no lo eliminamos sino que lo "comentamos" para que no se ejecute:

<!-- <h2 class='date-header'><data:post.dateHeader/></h2> -->

Ahora, debemos "moverlo" para ponerlo justo debajo de los títulos así que buscamos este tipo de código:

<b:includable id='post' var='post'>
  .......
  <b:if cond='data:post.title'>
    <h3 class='post-title'>
      .......
      <data:post.title/>
      .......
    </h3>
    <!-- y justo aquí pegamos el código de la fecha -->
    <b:if cond='data:post.dateHeader'>
      <h2 class='date-header'><data:post.dateHeader/></h2>
    </b:if>
    .......
</b:includable>

Simplemente pegamos el código resaltado, debajo del título.

Si queremos modificar cómo se ve, buscamos las definiciones CSS del elemento y modificamos las propiedades:

h2.date-header {
  .......
}

Ahora bien, uno podría suponer que haciendo esto, todas las entradas tendrán la fecha pero no es así, seguirá viéndose una sola vez. Es Blogger quien maneja esto y parece que no hay forma de cambiarlo a menos que usemos JavaScript.

Hace tiempo, luego de escribir sobre la forma de personalizar las fechas agregando calendarios, surgieron varias "quejas" respeto a que, esa limitación de Blogger hacía que los calendarios mostrados en los posts de igual fecha, quedaban vacíos o aparecía un texto que decía UNDEFINED. El problema, terminó por solucionarse modificando el script y podemos basarnos en eso para hacer lo mismo con la fecha cuando esta es un texto.

La idea es sencilla, vamos a usar esa limitación; ya que data:post.dateHeader es la fecha y, cuando el post tiene la misma fecha que otro anterior, data:post.dateHeader no contiene nada, lo que haremos es guardarlo cada vez que tiene un dato para que, si no lo tiene usar ese dato previamente guardado.

Otra vez buscamos el código sin importar dónde esté:

<b:if cond='data:post.dateHeader'>
  <h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

Y lo reemplazaremos por esto:

<b:if cond='data:post.dateHeader'>
  <script>var ultimaFecha = '<data:post.dateHeader/>';</script>
  <h2 class='date-header'><data:post.dateHeader/></h2>
<b:else/>
  <h2 class='date-header'>
    <script>document.write(ultimaFecha);</script>
  </h2>
</b:if>

Allí, si se cumple la primera condición (b:if) significa que es el primer post así que tiene una fecha por lo tanto, la guardamos en una variable llamada ultimaFecha. Luego, se muestra normalmente.

Si no se cumple la primera condición (b:else) significa que no es el primer post de ese día y por lo tanto para Blogger no tiene fecha así que usamos JavaScript para escribir la que habíamos guardado previamente:

document.write(ultimaFecha);

De esta manera, en todos los posts se mostrará la fecha de publicación.