jueves, 31 de marzo de 2011

Oloblogger

Oloblogger


Problemillas con los enlaces de navegación

Posted: 30 Mar 2011 07:24 AM PDT

Esta entrada es sólo para comentar que desde hace unos días, existe algún tipo de problema con los enlaces de navegación Entradas más recientes/Entradas antiguas, que provoca que el sistema de sumarios no funcione. El caso es que no ocurre en todos los blogs y tras muchas comprobaciones, no he encontrado la causa.

En un principio, lo único que se aprecia es que cuando pinchamos en uno de estos enlaces, si bien el rótulo del title nos indica que nos va a enviar a una página del tipo...

http://oloblogger.blogspot.com/search?updated-max=2011-02-09T12%3A40%3A00-08%3A00&max-results=5

...que es la que corresponde a este tipo de navegación por fechas, lo que realmente aparece en el navegador, es la dirección de Inicio del blog:

http://oloblogger.blogspot.com



He restaurado por completo, sin éxito, el gadget nextprev original, que es el que controla el funcionamiento de estos enlaces. Incluso he copiado literalmente el código de un blog que sí me funciona bien, por si acaso, pero nada. El problema persiste.

Viendo con más detalle el código de este artilugio (nextprev), he visto que los enlaces a este tipo de direcciones, están controlados por una etiqueta data de esas que contienen datos internos de Blogger sobre nuestro blog, que nosotros no podemos manipular (data:widget.instanceId). Así que si es eso, ya vamos listos hasta que no lo arreglen.

Otra comprobación que me ha resultado muy extraña, es que si abría el enlace en nueva ventana, no daba el más mínimo problema. Las pegas surgen cuando se hace en la misma ventana. Esto realmente me desconcierta.

¿Y dónde se nota que algo va mal aparte de en la barra de direcciones? Pues por ejemplo, en las cosas que hayamos metido en condicionales. Parece que esa página extraña que tiene la dirección de Inicio, pero que sin embargo corresponde visualmente a una de navegación por fechas, no coincide con ninguno de los tipos que usamos en dichos condicionales.

He hecho también pruebas con todos los tipos de condiciones, visualizando los distintos tipos de páginas y la que se abre al pinchar en Entradas antiguas, me sale que es tipo Home. Evidentemente da ese resultado porque eso es lo que reza en la propia barra de direcciones del navegador, pero como por otra parte no es así, pues eso casi seguro que es fuente de conflicto.

De esta manera, no se ejecuta bien el código que a través de condiciones esté asociado a una página de navegación.

Así las cosas, si se tiene un sistema de sumarios hecho con condiciones y si tu blog es de los que falla, podrás ver que hay elementos que no se muestran correctamente en este tipo de páginas. Cada uno en su propio blog, sabrá apreciar qué es lo que falla. En mi caso, las entradas no se muestran resumidas y tampoco se ven algunos botones que tengo condicionados sólo para las direcciones de entradas.

Por último, la navegación por etiquetas funciona correctamente.

Llevo ya un par de días con el tema y no doy con la tecla correcta, así que si alguien descubre algo, por favor que lo diga. Mientras tanto a ver si me las apaño para reordenar las condiciones de alguna manera que no de problemas.

Actualización: Probado en blogs hechos con el nuevo diseñador, en plantillas clásicas, modificadas, no modificadas... El error parece no tener un patrón por ese lado.


Un poco más sobre las transiciones con CSS - Vagabundia


Habíamos visto que las transiciones en CSS tienen cuatro propiedades que las controlan de manera individual:



transition-property la utilizamos para listar las propiedades que se cambiarán, separadas por comas; por ejemplo:
transition-property: background;
transition-property: background-color;
transition-property: background, width;
Ese lista no es obligatoria ya que, por defecto, el valor es all lo que significa que, salvo que lo indiquemos expresamente, la transición se hará sobre todas las propiedades que cambien. Por ejemplo, si tengo este DIV con un texto:
<div class="demoT">CSS3</div>

<style>
.demoT {
  /* todas las propiedades normales que quiera poner */
  background-color:#101921;
  border: 6px solid #89A;
  border-radius: 10px;
  color: #EEE;
  cursor: pointer;
  font-size: 16px;
  height: 50px;
  margin: 0 auto;
  padding-top: 20px;
  text-align: center;
  width: 100px;
  /* acá irá la transición */
}
.demoT:hover {
  /* estas son las propiedades que van a cambiar */
  background-color: #606971;
  border-radius: 150px;
  color: #000;
  font-size:64px;
  height: 200px;
  padding-top: 100px;
  width: 300px;
  /* acá irá la transición */
</style>
en lugar de agrega esto para animarlo un poco:
transition-property: background-color, border-radius; color, font-size, height, padding-top, width;
transition-duration: 2s;
puedo simplificarlo así:
transition-property: all;
transition-duration: 2s;
o utilizar una sóla línea, separando los valores con un espacio, de manera similar a lo que hacemos con otras propiedades:
transition: all 2s;
El orden es:
transition: transition-property, transition-duration transition-timing-function transition-delay;
Así que en ese ejemplo, sólo habría que agregar los prefijos de los distintos navegadores lo que daría esto:
-moz-transition: all 2s;
-webkit-transition: all 2s;
-o-transition: all 2s;



CSS3


Cuando queremos anular la transición lo que utilizamos es el valor none:
transition: none;
transition-duration es lo que indica la velocidad, o sea, el tiempo que durará la transición y por defecto es cero; al igual que la anterior, si ponemos varios valores, estos se separan con comas:
transition-duration: 1s;
transition-duration: 1s, 2s;
transition-timing-function es la más complicada de comprender; lo que hace es definir el modo en que se ejecutará esa transición; la curva de tiempo que se usa para calcular los diferente estados entre el inicio y el final. Por defecto, tiene el valor ease pero pueden usarse otros: linear, ease-in, ease-out, ease-in-out, cubic-bezier()




Ese valor por defecto genera una animación suave; digamos que, comienza despacio y luego se va ascelerando. El valor linear lo hace de modo constante y usando cubic-bezier() podemos llegar a controlar esa velocidad de manera exacta aunque compleja. Pueden ver y experimentar esto en Ceaser, una herramienta online para probar valores y posibles alternativas. Mientras tanto, en este ejemplo, basta poner el cursor encima para ver como, aún utilizando en todos ellos el mismo valor de tiempo, el resultado final cambia haciendo que algunas se ejecuten más rápido que otras:


ease
linear
ease-in
ease-out
ease-in-out
cubic



Por último:



transition-delay determina el tiempo que transcurrirá antes de comenzar la transición y su valor inicial es cero.



Demasiada cosa, demasiado detalle pero todo es mucho más simple de lo que parece ya que, en realidad, para usos normales, basta saber que sólo necesitamos esto y nada más:
-moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s;
ABCDEFGHIJKLMNÑOPQRSTUVWXYZ



















TABLA - FUENTES - FONTS


SOUV2BalaramScaGoudyFOLIO 4.2Biblica Font








free counters


Disculpen las Molestias




TABLA - INFORMÁTICA - UTILIDADES

miércoles, 30 de marzo de 2011

Oloblogger

Oloblogger


La propiedad overflow de CSS

Posted: 29 Mar 2011 10:13 AM PDT

La propiedad overflow de CSS sirve para indicar cómo se debe comportar el navegador, cuando se encuentre con una caja cuyo contenido desborda su contenedor. Es decir, cómo se vera algo que por tener una mayor medida, no cabe dentro del espacio reservado para ello.

Las capas (div) normalmente se van redimensionando para ajustar su tamaño a lo que pongamos en su interior.
Ocupan todo el ancho disponible y van creciendo en altura según haga falta. Si limitamos el ancho con un width, este se ajustará a nuestra exigencia pero la altura seguirá ajustándose automáticamente. Es el caso de esta caja de 300px de ancho y el de la de la izquierda, que tiene asignados sólo 200px.
width: 200px;
width: 300px;

Pero veamos que ocurre cuando fijamos un ancho y un alto y el contenido no cabe dentro de la caja:

width: 400px; height:100px;
Now at the time we could not understand these things, but later I was to learn the meaning of these ominous kopjes that gathered in the twilight. Each of the Martians, standing in the great crescent I have described, had discharged, by means of the gunlike tube he carried, a huge canister over whatever hill, copse, cluster of houses, or other possible cover for guns, chanced to be in front of him.



Lo que podemos comprobar es que la capa mantiene la posición y medidas que le hemos asignado, pero el texto desborda la caja. Nótese que si no hubiéramos dejado intencionadamente un espacio lo suficientemente grande tras ese div, estas líneas estarían solapadas con las que rebosan de la caja:

width: 400px; height:100px;
Now at the time we could not understand these things, but later I was to learn the meaning of these ominous kopjes that gathered in the twilight. Each of the Martians, standing in the great crescent I have described, had discharged, by means of the gunlike tube he carried, a huge canister over whatever hill, copse, cluster of houses, or other possible cover for guns, chanced to be in front of him.

Lo que podemos comprobar es que la capa mantiene la posición y medidas que le hemos asignado, pero el texto desborda la caja...

Este es el comportamiento por defecto y que sería el equivalente a asignarle a esa capa, una propiedad overflow con el valor visible. Por tanto, los valores más interesantes, son los que todavía nos quedan por ver y estos son: hidden, scroll y auto.


El primero se entiende bastante bien si sabemos inglés: escondido, oculto. Lo que hace el valor hidden es recortar el contenido allí dónde le marcan los límites de las dimensiones de la capa. Es como si la caja fuera una ventana y pusiéramos algo por detrás; sólo veríamos lo que la transparencia de los cristales nos dejara ver y el resto quedaría tapado por la pared que la circunda. En el caso de una página web, el texto se va escribiendo con normalidad, pero cuando llegamos al límite inferior, este desaparece:

width: 280px; height:100px; overflow: hidden;
Now at the time we could not understand these things, but later I was to learn the meaning of these ominous kopjes that gathered in the twilight. Each of the Martians, standing in the great crescent I have described, had discharged, by means of the gunlike tube he carried, a huge canister over whatever hill, copse, cluster of houses, or other possible cover for guns, chanced to be in front of him.

Un pequeño alto para comentar que el texto siempre se imprimirá según el ancho disponible, pero con una imagen la cosa cambia un poco, ya que estas son elementos de bloque y no pueden ser automáticamente adaptadas. Por tanto, se desbordan tanto por abajo, como por la derecha:

width: 200px; height:100px;

Precisamente por este comportamiento de la imágenes, la mayoría de plantillas incluyen un overflow: hidden; en la capa correspondiente a las entradas. Así evitamos desbordamientos accidentales que se solaparían con el contenido adyacente, como por ejemplo, la sidebar. Si alguien tiene algún problema de este tipo, ya sabe la solución:

width: 200px; height:100px; overflow: hidden;


El valor scroll también nos sirve para que se oculte el contenido desbordado, pero a diferencia del anterior, siempre se generarán automáticamente unas barras de desplazamiento. Si el desplazamiento horizontal no es necesario, como ocurre en el caso del texto, la correspondiente barra aparecerá desactivada.

width: 400px; height:100px; overflow: scroll;
Now at the time we could not understand these things, but later I was to learn the meaning of these ominous kopjes that gathered in the twilight. Each of the Martians, standing in the great crescent I have described, had discharged, by means of the gunlike tube he carried, a huge canister over whatever hill, copse, cluster of houses, or other possible cover for guns, chanced to be in front of him.

En el caso de imágenes, se activarán la vertical, la horizontal o ambas, según sea necesario. Hay que tener en cuenta que la barra vertical ocupa también espacio en la capa. Esto último quiere decir que si por ejemplo una imagen es de 300px y el div es de 300px, al ocupar la barra vertical algunos pixels, la imagen no cabrá en el ancho disponible, activándose también la barra horizontal aunque a priori pareciera que no era necesario:

width: 300px; height:100px; overflow: scroll;

width: 350px; height:100px; overflow: scroll;


Por último, nos queda el valor auto, pero este es el más fácil de imaginar. Siempre oculta el contenido que pueda desbordar, pero sólo muestra las barras de desplazamiento si es necesario. Además, no muestra siempre ambas, sino sólo aquella que se necesita:

width: 200px; height:100px; overflow: auto;

width: 400px; height:100px; overflow: auto;
Now at the time we could not understand these things, but later I was to learn the meaning of these ominous kopjes that gathered in the twilight. Each of the Martians, standing in the great crescent I have described, had discharged, by means of the gunlike tube he carried, a huge canister over whatever hill, copse, cluster of houses, or other possible cover for guns, chanced to be in front of him.

width: 400px; height:150px; overflow: auto;
Now at the time we could not understand these things, but later I was to learn the meaning of these ominous kopjes that gathered in the twilight. Each of the Martians, standing in the great crescent I have described, had discharged, by means of the gunlike tube he carried, a huge canister over whatever hill, copse, cluster of houses, or other possible cover for guns, chanced to be in front of him.

Como podéis imaginar, el valor auto soluciona también diversos problemas de una tacada.


Un valor adicional que podéis ver en un overflow, es el valor inherit. Este es una especie de  valor comodín que hará que la capa que lo lleve, herede el valor que tenga la capa padre. Supongo que tendrá su interés, pero hasta la fecha yo no lo he necesitado nunca.


Pixlr: Editor de imágenes online - Vagabundia


La mayoría de los editores de imágenes online comienzan con la letra P y pixlr no es la excepción. Claro, eso sólo es un detalle sin importancia. Lo interesante es que es uno de los mejores que he probado y está en español.




Posee dos aplicaciones, Pixlr Editor es el editor completo y Pixlr Express es un editor con menos opciones, útil cuando lo que necesitamos es hacer retoques rápidos. Ambos utiliza Flash pero son bastante rápidos y además, disponen de un API que puede ser utilizado por desarrolladores de manera gratuita.






Podemos usarlos sin necesidad de registro aunque esto último nos permite enviar las imagenes directamente a alguna red social como Facebook o Picasa. Admite crerar imágenes nuevas, seleccioanrlas desde nuestra PC o desde cualquier web y es bastante intuitivo, parecio al Photoshop. Unos videos muestran el modo de uso de sus características principales.




También resulta interesante la herramienta Grabber que no es otra cosa que una extensión para para Firefox o para Chrome por medio de la cual, tenemos acceso al editor simplemente haciendo click y con el botón derecho sobre cualquier imagen que veamos; de esta manera, podemos adaptarla, recortarla o guardarla.




Ambos servicios tamboén se pueden incluir en cualquier sitio mediante un IFRAME:
<iframe id="pixlr" type="text/html" width="100%" height="100%" src="http://pixlr.com/editor/" frameborder="0"></iframe>

<iframe id="pixlr" type="text/html" width="100%" height="100%" src="http://pixlr.com/express/" frameborder="0"></iframe>
Y acá puse esos IFRAMES en unos enlaces para que se muestren en una ventana modal si es que alguien quiere probar cómo funcionan:




















TABLA - FUENTES - FONTS


SOUV2BalaramScaGoudyFOLIO 4.2Biblica Font








free counters


Disculpen las Molestias




TABLA - INFORMÁTICA - UTILIDADES

Correo Vaishnava

Archivo del blog