El arte de Billy Chasen

JMiur [E]

Human Clock

Click para abrir en una ventana modal.

Monitor Fish Tank

Click para ver el video.

REFERENCIAS:

Art of Billy Chasen

Integrated Gmail: Todo en la cuenta de correo

Día Mundial de Comentar en Blogs

margin VS padding (again)

Suele haber alguna confusión respecto a las diferencias entre las propiedades margin y padding. Es cierto que a veces parecen ser lo mismo o dar el mismo resultado pero son absolutamente diferentes y deben ser usadas adecuadamente para evitar problemas u obtener un resultado correcto (más información).

Un ejemplo donde colocamos dos rectángulos, uno dentro de otro. El exterior tendrá un color de fondo y el interior otro:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

<div style="width: 100%;">
  <div style="padding: 30px; width: 170px;">
    ... el texto o el contenido ...
  </div>
</div>

El ancho del rectángulo exterior es 100%, ocupa todo el ancho disponible, dependiendo de dónde esté, será más corto o más largo. El ancho del rectángulo interior es fijo y tiene un valor cualquiera; además tiene agregada la propiedad padding que hace que eso que está dentro de él, se separe de los cuatro bordes.

Si en lugar de padding usáramos margin, el resultado no sería el mismo:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

<div style="width: 100%;">
  <div style="margin: 30px; width: 170px;">
    ... el texto o el contenido ...
  </div>
</div>

La diferencia entre ambas propiedades podría resumirse así: margin actua hacia afuera, separa el rectángulo de aquel otro que lo contiene; padding actua hacia adentro, separa el contenido de ese rectángulo de sus propios bordes.

Pero ¿no lo separa de abajo ni de arriba? Lo hace, pero no lo vemos. Para que el margen sea visible sobre los cuatro lados, el DIV contenedor debe "flotar":

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

<div style="float: left; width: 100%;">
  <div style="margin: 30px; width: 170px;">
    ... el texto o el contenido ...
  </div>
</div>

Entonces, si quisiera separar el rectángulo del contenedor y además, separar el contenido, debería usar ambas propiedades:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

<div style="float: left; width: 100%;">
  <div style="margin: 30px; padding: 30px; width: 170px;">
    ... el texto o el contenido ...
  </div>
</div>

Bien. Ahora podemos agregarle un segundo rectángulo y les ponemos la propiedad float a todos ellos así los vemos juntos:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

<div style="float: left; width: 100%;">
  <div style="float: left; margin: 30px; padding: 30px; width: 170px;">
    ... el texto o el contenido ...
  </div>
  <div style="float: right; margin: 30px; padding: 30px; width: 170px;">
    ... el texto o el contenido ...
  </div>
</div>

Uno, flota hacia un lado y el otro flota hacia el otro.

Ahora vamos a tratar de verlo con un ejemplo práctico sobre el que muchas veces me han preguntado. Imaginemos que tenemos un rectángulo (un DIV) del que desconocemos su ancho (o varía) y queremos incluir en su interior varios rectángulos más con cierto contenido y que se muestren del mismo tamaño. Por ejemplo, que quede algo como esta imagen:

Pongamos entonces cuatro rectángulos a los que les damos un ancho fijo:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

<div style="float: left; width: 100%;">
  <div style="float: left; margin: 30px; padding: 30px; width: 100px;"> ... </div>
  <div style="float: left; margin: 30px; padding: 30px; width: 100px;"> ... </div>
  <div style="float: left; margin: 30px; padding: 30px; width: 100px;"> ... </div>
  <div style="float: left; margin: 30px; padding: 30px; width: 100px;"> ... </div>
</div>

Obviamente, si quedan bien será un milagro ya que desconocemos los tamaños pero, nos queda la aritmética así que pensamos, bueno, dividamos el total en cuatro partes iguales y en lugar de colocar un valor absoluto para width, usemos porcentajes (25%):

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

<div style="float: left; width: 100%;">
  <div style="float: left; margin: 30px; padding: 30px; width: 25%;"> ... </div>
  <div style="float: left; margin: 30px; padding: 30px; width: 25%;"> ... </div>
  <div style="float: left; margin: 30px; padding: 30px; width: 25%;"> ... </div>
  <div style="float: left; margin: 30px; padding: 30px; width: 25%;"> ... </div>
</div>

No funciona ¿Qué pasa?

Es que el ancho de width no incluye el padding, así que se lo saco y sólo dejo margin:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Seguimos en la misma. Entonces, le saco margin y dejo padding:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Vemos que uno hace una cosa y otro hace otra pero ninguno resuelve el problema así que le quito ambos:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

<div style="float: left; width: 100%;">
  <div style="float: left; width: 25%;"> ... </div>
  <div style="float: left; width: 25%;"> ... </div>
  <div style="float: left; width: 25%;"> ... </div>
  <div style="float: left; width: 25%;"> ... </div>
</div>

No es lo que quiero pero al menos ahora está dividido en partes iguales.

Esto es lo fundamental: el ancho es el definido por width + border + padding + margin con ciertas variantes según sea el navegador pero cada una de esas propiedades, hace que el rectángulo sea cada vez más grande así que hay que recurrir a la solución mágica para la mayoría de los problemas de este tipo. Si no podemos alinear un DIV, pongámoslo en otro.

Yo quiero que esos rectángulos interiores se vean con estas características, que se separen entre si y que el contenido también se separe:

<div style="margin: 10px; padding: 10px;"> ... </div>

Así que debo meterlos dentro de otros que son los que flotarán y que medirán el 25% del ancho total:

<div style="float: left; width: 25%;">
  <div style="margin: 10px; padding: 10px;"> ... </div>
</div>

Por último, meteré todo eso en el primer rectángulo:

<div style="width: 100%; float: left;">
  <div style="float: left; width: 25%;">
    <div style="margin: 10px; padding: 10px;"> ... </div>
  </div>
  <div style="float: left; width: 25%;">
    <div style="margin: 10px; padding: 10px;"> ... </div>
  </div>
  <div style="float: left; width: 25%;">
    <div style="margin: 10px; padding: 10px;"> ... </div>
  </div>
  <div style="float: left; width: 25%;">
    <div style="margin: 10px; padding: 10px;"> ... </div>
  </div>
</div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Si quiero distribuirlos de manera pareja, en lugar de colocar en todos ellos un margen igual para los cuatro lados, coloco un margen derecho igual a 0 en los tres primeros:

margin: 10px 0 10px 10px;

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

La propiedad margin me permite ubicarlos sin problemas, más arriba o más abajo si fuera necesario.

La propiedad padding me permite manejar el contenido sin que cambien los anchos y nada se descoloque.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

El post paranoico

¿Qué sabe Google de nosotros?

Si se usa Adwords: nuestro perfil de comprador y nuestros planes de marketing
Si se usa Adsense: con que sitios ganamos dinero (o perdemos), cómo segmentar los anuncios y cuánto pagarnos
Si se usan las Alertas: saben qué cosas nos importan saber
Si se usa Analytics: conocen los sitios que monitoreamos, sus variaciones y sus tendendencias
Si se usa Blogger: saben sobre lo que escribimos, cada palabra, cada frase, cada enlace ... TODO
Si se usa Calendar: saben a dónde fuimos o a dónde iremos, qué haremos y qué dejaremos de hacer
Si se usa Google Directorio: saben que queremos y que compramos
Si se usa Chrome: conocen cada sitio por el que navegamos en internet
Si se usa Google Desktop: conocen todo lo que tenemos en nuestra computadora
Si se usa Google Docs: saben que estamos escribiendo un programa de codigo abierto que compertirá con ellos y nos ofrecerán U$S30 por él ya que también saben que en nuestra cuenta de banco estamos sobregirados
Si se usa Google Earth: saben dónde nos gustaría estar o si pensamos lanzar misiles
Si se usa FeedBurner: saben todo sobre nuestros sitios y nuestros lectores
Si se usa Google Finanzas: conocen nuestro patrimonio y lo que haremos con él
Si se usa Gmail: saben todo, simplemente todo ... sí ... eso también
Si se usan los Grupos de Google: saben de nuestros miedos, nuestras penas y si creemos en platos voladores
Si se usa la búsqueda de imágenes: saben de nuestra debilidad por Britney Spears, el chocolate amargo y eso no es nada, saben todo eso que ya se imaginan
Si se usa la búsqueda local: saben donde estamos y pueden seguirnos
Si se usa Google Maps: saben donde deberíamos estar
Si se usa Google Reader: conocen nuestros intereses
Si se usa el buscador (cualquiera de ellos): conocen todas y cada una de las búsquedas que hemos realizado
Si se usa Google Talk: saben quienes son nuestros amigos y qué decimos a sus espaldas
Si se usa Google Toolbar: conocen todos los sitios que visitamos
Si se usa Google Translate: saben que no sabemos inglés ni alemán ni chino
Si se usa Google Video o YouTube: saben los géneros que nos gustan, incluyendo esos que no nos atrevemos a mostrar a nadie

Tranquilos. La mayor parte de esas cosas, no les interenesan absloutamente a nadie.

REFERENCIAS:

Google Discovery

Probando Zoundry Raven a pedido de Anahí

Aprovechando el sábado, el fin de semana largo y a solicitud de Anahí, probemos el programa.

Lo primero que hice fue descargar las actualizaciones cosa que está haciendo sin problemas mientras escribo esto. Como todo editor, hay dos formas de usarlo, desde la pestaña DESIGN o desde la pestaña XHTML que es lo que suelo hacer normalmente por el tipo de entradas de mi blog ya que sino, es casi imposible escribir o probar códigos complejos pero ... veremos.
Primero, usamos los formatos comunes, negrita, itálica, subrayado, ~~tachado~~. Eso no debería tener problemas o lo tendríamos que tirar a la basura antes de empezar. Lo mismo debería ocurrir con la selección de fuentes donde hay muchísimas más posibilidades que en Blogger ya que podemos agregar cualquier fuente de nuestra PC (aunque no todas se verán online) y además, establecer un color de fondo:

Y ya que estamos, probamos la opción FORMAT/INSERT HTML TAGS; al desplegarla, nos muestra una lista de etiquetas comunes que podemos insertar, elijo PRE para mostrar el código y se agrega sin problemas.

<span style="BACKGROUND-">fuentes</span>

Como se ve, el código insertado es normal y utiliza SPAN y el atributo style. También hay otra opción que permite insertar etiquetas de bloque como encabezados. Un detalle importante es que desde DESIGN, los símbolos < y > se transformarán en las entities < y > de manera automática, lo cual hace sencillo escribirlos. La alineación tampoco es problema y usa etiquetas P en lugar de DIV.

Para citas está la etiqueta BLOCKQUOTE como en cualquier otro editor y en todos los casos podemos editar el XHTML para agregar atributos class, ID o cualquier otro.

Ahora, agregamos un enlace y vemos que tiene una buena cantidad de opciones como establecer class, target, title y otros atributos. Eventualmente, también podemos agregar enlaces a ciertos sitios buscadores como Goggle y YouTube. Por ejemplo, puedo colocar un enlace a la Wikipedia que me dirija a una cierta palabra como internet, simplemente señalando la palabra.

Para quienes hacer tablas es engorroso, nos permite crearlas con un par de clicks aunque el tema de los saltos de linea deberá ser corregido manualmente:

celda 1	celda 2
celda 3	celda 4

Faltarían las imágenes. En mi caso es más complicado porque suelo alojarlas en Blogger mismo pero, no importa, ahora usaré una que ya existe así que la opción es INSERT IMAGE TAG:

Si quisiera utilizar una de mi PC y subirla directamente a un servicio de alojamiento, elegiría INSERT IMAGE FILE y, en este caso, se alojaría automáticamente en ImageShack que es la opción que elegí.

Las imágenes pueden mostrarse normalmente o bien transformarlas en miniaturas desde el mismo editor

Por último lo publico como borrador y veo el resultado. Enseguida aparecerá en la lista así que voy a editarlo un poco desde el programa pero, esta vez desde el código mismo que es lo que acostumbro a hacer.

Mi problema con estos editores es encontrar un equilibrio entre los saltos de línea automáticos que suelen agregarse y mis propias opciones en la configuración. Aparentemente, eso es algo que tratan de corregir en el nuevo editor que puede usarse desde Blogger Draft pero que aún no está completamente desarrollado. De todas maneras, una vez terminada la edición, vuelvo a publicarlo y este es el resultado con una serie de detalles corregidos desde el mismo Blogger.

En resumen, Zoundry Raven es una buena herramienta y cada cuál verá que uso pude darle. No hay ninguna perfecta pero tampoco ninguna absolutamente inútil. No hay mejores ni peores, sólo unas que nos resultan más cómodas o más incómodas, que sabemos manejar o que nos resultan complicadas. El resultado es lo que cuenta y las decisiones son individuales.

En lo personal, no podría usarla para este blog pero eso es subjetivo, sin embargo, pese a eso, me resulta útil para otras cosas como mantener un backup, buscar enlaces o imágenes que no recuerdo donde están y cosas por el estilo. Lo ideal sería que Blogger incorporara algunas de las opciones para ampliar las posibilidades de los enlaces y las imágenes ya que para muchos, resulta engorroso escribir código HTML.

Zoundry Raven: Edición de blogs

En varias oportunidades se habló de Editores de blogs de escritorio. Ya lo repetí muchas veces: sigo usando ScribeFire que no es otra cosa que una extensión para Firefox y, aunque reconozco que Windows Live Writer es un buen soft, siempre tuve una debilidad por Zoundry Raven que funcionaba muy bien en WordPress pero que para Blogger era limitado y problemático.

Hoy, me he decidio a probarlo otra vez instalando la nueva versión 1.0.375 para Windows a ver que pasaba y hay buenas noticias. La fundamental, para mi gusto, es que ya no existe la limitación en cuanto a cantidad de posts y es posible descargar y por lo tanto editar y manejar, el contenido íntegro del blog, en mi caso, las 2001 entradas (publicadas y borradores), las 6850 imágenes y los 14140 enlaces lo que no es poca cosa.

¿Que es un editor de blogs de escritorio? Un programa que instalamos y que nos permite majear un blog sin necesidad de usar el navegador o ingresar en los servicios. La mayor ventaja es que nos permite administrar varios con una sola aplicación, estén o no en la misma cuenta o en la misma plataforma. Podemos acceder a Blogger, WordPress o cualquier otro de los servicios admitidos que son muchos y, desde el programa, editar o publicar directamente.

Una vez que hemos decidido si lo instalamos normalmente o en su versión portable, nos pedirá que creemos un perfil (puede haber varios) y aparecerá una pantalla de bienvenida. Conviene entonces que miremos las opciones generales en TOOLS | PREFERENCES para cambiarlas si es necesario o queremos hacerlo.

Ahora, es tiempo de agregar las cuentas que queremos manejar desde TOOLS | ACCOUNT MANAGER. Colocamos la URL del blog y esperamos que sea detectado. Si todo está bien, nos mostrará una ventana con la mayor parte de los datos completados y sólo deberemos agregar nuestro ID de usuario y la contraseña.

Habiendo ingresado correctamente, nos mostrará la lista de blogs asociados a esa cuenta y seleccionaremos los que queremos descargar. Eventualmente, haciendo click en MEDIA MANAGER podemos seleccionar algunos de los servicios disponibles asociados si queremos utilizar el programa para subir las imágenes directamente.

Todo listo y el programa comienza a descargar nuestro blog.

Por defecto, descargará un máximo de 200 posts así que luego deberemos descargar el resto.

Ahora que ya está todo listo, veremos una carpeta para cada blog y dentro de ella, subcarpetas que nos permiten acceder a las entradas mediante ciertos filtros.

POSTS

no mostrará la lista ordenada por título o por fecha, haciendo click en cada uno de ellos, veremos un sumario (incluyendo las imágenes) y con doble click podremos editarlos. Lo mismo ocurrirá con TAGS que nos lista las etiquetas y podemos ver/editar las entradas asociadas.

Las funciones interesantes son las que se muestran como IMAGES

y LINKS

Con la primera, lo que veremos será un listado de imágenes ordenadas según el servidor donde estén alojadas y haciendo click en cada una, nos mostrarán una miniatrura, los datos de la imagen y en que entrada se encuentran. Lo mismo pasará con los enlaces de los posts; aparecerán ordenados y nos indicará donde están de tal manera que es muy sencillo encontrar un error y editarlo.

Para cargar el resto de las entradas, simplemente nos colocamos en la cuenta y con el botón derecho, seleccionamos DOWNLOAD POSTS y la cantidad a descargar. El proceso llevará más o menos tiempo de acuerdo a nuestro contenido pero, podemos dejarlo trabajar en el fondo y hacer otra cosa.

Esto, sólo lo haremos una vez, luego en cualquier momento, podemos usar la opción REFRESH/SYNC para recargar modificaciones o agregados.

El editor es relativamente sencillo pero tiene una buena cantidad de opciones, etiquetas varias, atributos para imágenes y enlaces, tablas, la posibilidad de validar el código y eliminar de forma automática las etiquetas inútiles e incluso, la opción de publicar un mismo artículo en varios blogs de manera simultánea

REFERENCIAS:

Zoundry Raven Blog

How To

Zoundry Raven Forum

Suscribirse a la entradas

Vagabundia

El arte de Billy Chasen

Integrated Gmail: Todo en la cuenta de correo

Día Mundial de Comentar en Blogs

margin VS padding (again)

El post paranoico

Probando Zoundry Raven a pedido de Anahí

Zoundry Raven: Edición de blogs

últimas entradas

la puerta abierta

las etiquetas

Páginas