aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Si alguna vez has intentado generar un mail en formato HTML sabrás los problemas con los que nos encontramos al visualizar dicho correo en los diferentes cliente disponibles, ya sean Offline u Online.

Para estos casos, es bueno tener una lista como esta con los estilos disponibles para cada unos de los clientes de correo, que pese a no cubrir todos los disponibles (imagino que debe de haber millones, entre offline y online) nos consigue dar una idea realmente clara de que estilos podemos usar y cuales no.

Si trabajamos con ello a diario, podremos descargarlo en formato PDF o en un formato Excel.

Mediante el uso de la propiedad CSS (-webkit-transform), propuesta por el equipo de WebKit para transformar la salida por pantalla del HTML, podremos girar cualquier página usando un pequeño enlace javascript.

javascript:document.body.style['-webkit-transform']='rotate(180deg)';
javascript:document.body.style['-webkit-transform']='rotate('+prompt('degrees',180)+'deg)';

Guarda estos bookmarks entre tus marcadores y podrás girar cualquier página (solo en Safari y WebKit).

Flip / Flip2

Via

Desde SitePoint nos traen dos propiedades ocultas de Firefox 3. Dos más a añadir a las que ya conocemos y que nos gustan tanto.

1) Soft hyphens

En los navegadores actuales, podemos tener problemas con los tamaños de los elementos y el texto que tenga dentro. Si una palabra es demasiado larga, no ajusta correctamente el tamaño del elemento al valor que le hemos indicado.

<div style="width: 10em; border: 1px solid red;">
	  Supercalifragilisticexpialidocious
</div>

Ahora con la nueva versión, tenemos la propiedad soft hyphens, que se encarga de acortarnos la palabra en al tamaño que le indicamos al elemento contenedor.

<div style="width: 10em; border: 1px solid red;">
	  Supercalifragilistic&shy;expialidocious
</div>

2) Inline Block

Otro problema que tenemos con los navegadores actuales, es el problema de posicionamiento de elementos de inline.

//HTML
<ul class="gallery">
  <li>
    <div class="caption">A short caption</div>
    <div class="thumb"><img src="thumb1.jpg"/></div>
  </li>
  <li>
  	<div class="caption">A short caption</div>
  	<div class="thumb"><img src="thumb2.jpg"/></div>
	</li>
</ul>
//CSS
.gallery li {
  float: left;
  width: 100px;
}

Con la nueva versión y usando la propiedad inline-block, podremos solucionar este problema fácilmente.

//HTML
<ul class="gallery">
	  <li>
     <div class="caption">A short caption</div>
	    <div class="thumb"><img src="thumb1.jpg"/></div>
	  </li><li>
	    <div class="caption">A short caption</div>
	    <div class="thumb"><img src="thumb2.jpg"/></div>
	  </li><li>
	  …
	</ul>
//CSS
.gallery li {
	  display: inline-block; 
	  width: 100px;
	} 

	/* In an IE-only style sheet */
	.gallery li {
	  display: inline;
	}

Con vertical-align, podremos elegir hacia donde se ha de alinear (verticalmente) el conjunto de elementos.

Alex me avisa de un nuevo Changeset (el 7938) en el que podemos ver como la próxima versión de Wordpress, la 2.6, integrará la posibilidad de trabajar offline con los contenidos de tu blog.

Una vez actualizado a la última versión, te encuentras la pantalla anterior informandote de que disponemos de esta funcionalidad y que si la activamos Google Gears empezará a almacenar las CSS, contenidos y ficheros necesarios para trabajar offline, que podemos llegar a notar el aumento de tiempo en la carga de la página. La primera vez si que tarde, despues no es tan exagerado.

Si no queremos instalar esta funcionalidad, Wordpress no deja un enlace en la parte destinada a la información del Blog en el cual podremos instalar Google Gears. Por si queremos dejarlo para más adelante.

Si hemos aceptado la instalación de Gears, al entrar en nuestro Panel Administrador nos encontraremos con una ventana de Google Gears que nos solicitará permiso para empezar a registrar datos, si aceptamos no nos volverá a solicitar esta activación.

Al entrar en por primera vez en nuestro Panel de Administrador despues de haber instalado Google Gears automáticamente comenzará a almacenar en local los ficheros y contenidos para usarlos offline. Una vez terminado podremos continuar con nuestra tarea diaría.

Esta opción es ideal para gente que como a mi, los fines de semana me voy a la casa de campo y no puedo actualizar con artículos pendientes que me gustaría ir editando. Así, podré llevar en el portatil almacenado todo el contenido del blog, para intentar actualizarlo con mayor frecuencia. Nos vendrá de perlas hasta que los navegadores integren Almacenamiento DOM y se haya de migrar todo esto

La propia página de Google Doctype, lo resume en una sola línea.

Google Doctype is an open encyclopedia and reference library. Written by web developers, for web developers.[...]

Osea

Google Doctype es una enciclopedia abierta y una librería de referencia. Escrita por desarrolladores web, para desarrolladores web.[...]

Con esa línea nos deja entrever lo que nos vamos a encontrar en su interior:

• Artículos sobre seguridad
• Artículos sobre Javascript
• Artículo sobre CSS
• …

Todo ello 100% libre bajo la licencia Creative Commons 3.0 Attribution, osea que podremos usarlos simplemente linkando la fuente de donde los hemos sacado.

Si echamos un vistazo algo más exhaustivo, nos encontramos una pantalla en la que navegar por los artículos además de fácilmente asombra la rapideza con la que aparecen los artículos. Desde HOWTO’s en los que nos muestran código de como hacer algunas de las tareas comunes de cada día (Reconocer el navegador, Verificar la definición de una variable, …) y tareas no tan comunes (Detectar el TextResize, Calcular el espacio de scroll, …)

Otra sección interesante es la recopilación de referencias a los diferentes elementos de los diferentes lenguajes usados en la capa cliente externa del desarrollo web (HTML, CSS, Javascript(DOM)), allí se reunen la documentación necesaria para que no tengas que rebuscar por toda internet.

Personalmente solo puedo decir que ya tengo otro acceso directo formando parte de la barra de marcadores de Firefox

Los que me leen a diario saben las maravillas que siempre hablo de Firebug y saben que para mi es la mejor aplicación para Firefox y con la que cada día me ahorro horas de trabajo debugueando aplicaciones.

Lamentablemente no siempre puedo disponer de ella, mucha veces navegadores como IE, Safari, Opera me limitan su uso y he de buscar alternativas. Son muchas las herramientas que hay para todos esos navegadores, pero ninguna tan parecida a Firebug.

pi.debugger, es una herramienta muy completa, desarrollada en Javascript que nos emula el funcionamiento de Firebug. En la imagen vemos las opciones básicas con las que Firebug nos asombraba en aquella versión 0.x. Pudiendo ver la estructura HTML de la página, el contenido CSS y el DOM de la página.

[Descargar][Demo]

Hoy la gente de Webkit, anuncia que la última versión de su navegador dispone de CSS Masks, una nueva funcionalidad CSS que permite aplicar un estilo de máscara a imágenes y elementos.

-webkit-mask (background)
-webkit-mask-attachment (background-attachment)
-webkit-mask-clip (background-clip)
-webkit-mask-origin (background-origin)
-webkit-mask-image (background-image)
-webkit-mask-repeat (background-repeat)
-webkit-mask-composite (background-composite)
-webkit-mask-box-image (border-image)

Estas propiedades, pronto formarán parte del núcleo de Safari, así que no estaría de más ir echandole un vistazo.

Los nuevos tags

WebKit, es bastante famoso por seguir los estándares web y ser pionero (cogido de la mano con Opera) en integrarlos en las versiones beta de su navegador, además es el componente usado de base del navegador predeterminado de los sistemas operativos de Apple, pero con la creación de estos tags creo que está entrando en un terreno delicado, ya que a las pruebas me remito para recordar al querido Internet Explorer, el cual empezó integrando ActiveX, y los problemas que ha causado.

Por el momento están desarrolladas como posibles mejoras para un futuro navegador, a modo de propuestas para ir poniendo los dientes largos a más de uno, pero …