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

Jim Jeffers ha publicado un artículo a modo de ejemplo para mostrar una forma de mejorar la legibilidad de los comentarios de su blog.

Como podemos ver en la imagen se añaden una serie de opciones que enlazan un comentario con otro dentro del mismo hilo, estos comentarios son respuestas a este y nos ayudarán a seguir el hilo de los mismo más fácilmente. Tambíen nos ofrece la posibilidad de citar una porción del texto del comentario seleccionando el texto que queremos citar, una vez seleccionado nos mostrará un botón para responder dicho comentario.

Una propuesta interesante de la que disponemos el código fuente para implementarlo en nuestros proyectos (requiere bastante modificaciones).

Via Ajaxian, descubro un método de obtener el estado de tus usuarios al entrar en tu página mediante sus cuentas de Twitter. Si estos están logueados en Twitter podrás obtener información de su último tweet y mostrarlo en tu página.

<div id="twitteruser"></div>
<script type="text/javascript">
  function ohaitwitter(data){
    var container = document.getElementById('twitteruser');
    out = '<ul>'+
          '<li>'+
          '<img src="' + data[0].user['profile_image_url'] + '"'+
               'alt="' + data[0].user.name + '"><strong>'
           + data[0].user.screen_name +
           '</strong></li>'+
           '<li>' + data[0].user.name + '</li>' +
           '<li>' + data[0].user.location + '</li>' +
           '<ul>' +
             '<li>' + data[0].text +'</li>' +
          '</ul></li></ul>';
    container.innerHTML = out;
  }
</script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline.json?count=1&amp;callback=ohaitwitter"></script>

La llamada al timeline de Twitter viene condicionada por el parámetro count, el que podemos alterar y recibir X últimos tweets del usuario. Como parámetro, la función que indicamos en callback recibirá el objeto json procedente de Twitter.

Detectar si el usuario dispone de Twitter sería tan sencillo como esto:

function hasTwitter(data){
  if(data.error){
    // No tiene Twitter
  } else {
    // Si tiene Twitter
  }
}

Veamos algunos de los parámetros disponibles.

data.in_reply_to_user_id
data.truncated
data.created_at
data.user
data.followers_count
data.profile_image_url
data.url
data.name
data.protected
data.screen_name
data.location
data.id
data.favorited
data.in_reply_to_screen_name
data.text
data.in_reply_to_status_id
data.source

La posibilidad de obtener datos datos procedentes de twitter ha abierto muchos hilos de discusiones entre los desarrolladores ya que atenta contra la privacidad de los usuarios de Twitter.

El problema reside en que para obtener estos datos, el usuario debe estar loguado en Twitter lo que permite cargar el script desde nuestra página, si el usuario no está logueado en Twitter nos saltará un error indicando que este no está loguado.

¿Cuantas veces nos hemos encontrado con una ventana como la de abajo al ejecutar un bucle realmente largo?

Seguramente muchas, pero ¿alguna vez te habías planteado que criterios iba a usar el navegador para lanzar dicho mensaje? Pues al parecer hay gente que si lo ha hecho y ha sacado las siguientes conclusiones:

• Internet Explorer salta si se sobrepasan los 5 millones de declaraciones javascript. Puede modificarse directamente desde el registro de Windows.
• Firefox interpreta que un script se ha vuelto inestable a los 10 segundos de ejecución. También podemos cambiarlo desde about:config.
• Safari/WebKit indica en su código que el mensaje nos lo mostrará tras 5 segundos de ejecución de un script. Podemos incrementar este tiempo desde el menú desarrollo.
• Chrome no especifica un tiempo concreto, pero se ha detectado que está entre los 5 y los 10 segundos de ejecución. Además es el más salvaje de todos ya que en lugar de parar el script no cierra la página completa.
• Opera no tiene limitación de tiempo de scripts, algunas pruebas alcanzaron minutos de ejecución y Opera seguía ejecutando el script.

El nuevo sistema de comentarios anidados de Wordpress 2.7 está dando mucho de que hablar por que es algo completamente nuevo y desde mi punto de vista bastante lioso y complejo. Por ese motivo los posts informativos sobre como adaptar tus themes/plugins a él no paran de aparecer exclareciendo poco a poco esta nueva funcionalidad.

Chriss Harrison ha aislado los estilos CSS que afectan a los comentarios default de nuestro Wordpress 2.7. Recordemos que gracias al parámetro callback podemos personalizar nuestros comentarios, pero si no lo pasamos Wordpress nos genera una estructura “default” que es con la que Chris ha trabajado.

ol.commentlist {}
ol.commentlist li {}
ol.commentlist li.alt {}
ol.commentlist li.bypostauthor {}
ol.commentlist li.byuser {}
ol.commentlist li.comment-author-admin {}
ol.commentlist li.comment {}
ol.commentlist li.comment div.comment-author {}
ol.commentlist li.comment div.vcard {}
ol.commentlist li.comment div.vcard cite.fn {}
ol.commentlist li.comment div.vcard cite.fn a.url {}
ol.commentlist li.comment div.vcard img.avatar {}
ol.commentlist li.comment div.vcard img.avatar-32 {}
ol.commentlist li.comment div.vcard img.photo {}
ol.commentlist li.comment div.vcard span.says {}
ol.commentlist li.comment div.commentmetadata {}
ol.commentlist li.comment div.comment-meta {}
ol.commentlist li.comment div.comment-meta a {}
ol.commentlist li.comment * {} - (p, em, strong, blockquote, ul, ol, etc.)
ol.commentlist li.comment div.reply {}
ol.commentlist li.comment div.reply a {}
ol.commentlist li.comment ul.children {}
ol.commentlist li.comment ul.children li {}
ol.commentlist li.comment ul.children li.alt {}
ol.commentlist li.comment ul.children li.bypostauthor {}
ol.commentlist li.comment ul.children li.byuser {}
ol.commentlist li.comment ul.children li.comment {}
ol.commentlist li.comment ul.children li.comment-author-admin {}
ol.commentlist li.comment ul.children li.depth-2 {}
ol.commentlist li.comment ul.children li.depth-3 {}
ol.commentlist li.comment ul.children li.depth-4 {}
ol.commentlist li.comment ul.children li.depth-5 {}
ol.commentlist li.comment ul.children li.odd {}
ol.commentlist li.even {}
ol.commentlist li.odd {}
ol.commentlist li.parent {}
ol.commentlist li.pingback {}
ol.commentlist li.pingback div.comment-author {}
ol.commentlist li.pingback div.vcard {}
ol.commentlist li.pingback div.vcard cite.fn {}
ol.commentlist li.pingback div.vcard cite.fn a.url {}
ol.commentlist li.pingback div.vcard span.says {}
ol.commentlist li.pingback div.commentmetadata {}
ol.commentlist li.pingback div.comment-meta {}
ol.commentlist li.pingback div.comment-meta a {}
ol.commentlist li.pingback * {} - (p, em, strong, blockquote, ul, ol, etc.)
ol.commentlist li.pingback div.reply {}
ol.commentlist li.pingback div.reply a {}
ol.commentlist li.pingback ul.children {}
ol.commentlist li.pingback ul.children li {}
ol.commentlist li.pingback ul.children li.alt {}
ol.commentlist li.pingback ul.children li.bypostauthor {}
ol.commentlist li.pingback ul.children li.byuser {}
ol.commentlist li.pingback ul.children li.comment {}
ol.commentlist li.pingback ul.children li.comment-author-admin {}
ol.commentlist li.pingback ul.children li.depth-2 {}
ol.commentlist li.pingback ul.children li.depth-3 {}
ol.commentlist li.pingback ul.children li.depth-4 {}
ol.commentlist li.pingback ul.children li.depth-5 {}
ol.commentlist li.pingback ul.children li.odd {}
ol.commentlist li.thread-alt {}
ol.commentlist li.thread-even {}
ol.commentlist li.thread-odd {}

Estas 63 líneas hacen que cada elemento del sistema de comentarios pueda tener un aspecto personalizado. Para los desarrolladores de themes estas líneas pueden servirles como base para maquetar desde el CSS el theme para Wordpress 2.7.

Martin Ivanov ha hecho una recopilación de 10 hacks CSS que seguro nos pueden servir en algún que otro momento.

1) Mejorando el escalado y resampleado de las imagenes en Internet Explorer

En Internet Explorer 7 la propiedad de escalado por el método bicubic está deshabilitada por defecto y debemos activarla nosotros desde nuestro CSS indicando que los elementos <img /> recibirán ese estilo:

img {
  -ms-interpolation-mode: bicubic;
}

-ms-interpolation-mode, especifica el método de resampleado de imagenes del navegador.

2) Añade opacidad a Internet Explorer 8

Pese a que la lógica nos decía que Internet Explorer 8 iba a soportar opacity en nuestros CSS, tendremos que esperar a la versiñon final para ver si esta será definitivamente soportada por el navegador, por el momento podemos especificarlo en nuestros CSS:

element {
  -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=80)”;
}

3) 32 hojas de estilo como máximo para Internet Explorer

Internet Explorer limita a 32 el número de hojas de estilo invocadas por página, ya sea mediante el uso de <link /> o @import url;. Si se pasa este número, las siguientes no serán procesadas. Es importante tener esto en cuenta si algun día te encuentras con esto.

4) Cargando en CSS no obstructivo

Los cargando son útiles para indicar al usuario que algo se está procesando y que debe esperar a que esto termine. Cuando se trata de cargar imagenes, es recomendable usar la propiedad background de nuetro CSS para mostrar una imagen de fondo que será reemplazada por la imagen que deseamos mostrar en el momento que esta esté cargada completamente.

img {
   background: white url(’Images/Loading.gif’) no-repeat center;
}

5) Distingir entre Google Chrome y Safari con CSS

Detectar si nuestro usuario está usando Google Chrome o Safari es dificil desde nuestro CSS, pero no imposible. Ahora con este hack podemos distinguir que navegador está usando nuestro usuario pese a que los dos estén usando el mismo motor de renderizado (WebKit).

/* Google Chrome hack */
body:nth-of-type(1) .elementOrClassName {
/* properties go here */
}

/* Safari hack */
body:first-of-type .elementOrClassName{
/* properties go here */
}

6) Resetear las transperiencias de los hijos de padres transparentes en Internet Explorer

Cuando hacemos un contenedor transparente los hijos de este absorven la transpariencia del padre convirtiendose en transperentes ellos tambien, para corregir esto debemos resetear la opacidad del elemento:

.parent{
...
filter: alpha(opacity=30);
}

.child{
...
position: relative;
// En caso de tener una opacidad diferente
filter: alpha(opacity=50);
}

7) $style, obtén cualquier propiedad CSS de cualquier Objeto

$style es una función crossbrowser que permite obtener cualquier propiedad CSS especificada en nuestro CSS sobre cualquier elemento.

function $style(ElementId, CssProperty) {
	function $(stringId) {
		return document.getElementById(stringId);
		}
		if($(ElementId).currentStyle) {
			var convertToCamelCase = CssProperty.replace(/\-(.)/g, function(m, l){return l.toUpperCase()});
			return $(ElementId).currentStyle[convertToCamelCase];
		}
		else if (window.getComputedStyle) {
			var elementStyle = window.getComputedStyle($(ElementId), “”);
			return elementStyle.getPropertyValue(CssProperty);
		}
}

8 ) Emulando border-color: transparent en Internet Explorer 6

Por suerte en Internet Explorer 7 ya está soportada este propiedad, pero en Internet Explorer 6 no, y por desgracia aún tenemos que darle soporte. Por suerte podemos solventarlo:

.testDiv {
	...
	border: solid 10px transparent;
}
// IE Hack
*html .testDiv {
	border-color: pink;
	filter: chroma(color=pink);
}

9)  Exótico hack CSS para Internet Explorer

Ya vimos hace tiempo los diferentes CSS hacks que existían y este es uno de los no recomendados ya que nos evita validar nuestros CSS, pero en situaciones no nos queda otro remedio que sucumbir y mirar para otro lado:

h1{
 color: green;
.color: red;
}

10) Marca de agua en CSS

Una marca de agua nos añade un texto definido por nosotros sobre una imagen, en este caso mediante CSS podemos añadirselo para que el efecto visual sea el de usar una marca de agua, pero no lo añade a la imagen, por lo que no solucionaría problemas de copia de contenido. Ver un ejemplo.

En un momento de aburrimiento he estado implementado una versión de Cron para Javascript. Para los que no lo sepan, Cron es una utilidad del sistema Unix que permite programar tareas a lo largo del tiempo. Una de las utilidades más usadas para tareas como copias de seguridad, envío de mails, …

Para Javascript he pensado que sería interesante usar la misma estructura cron usa en el fichero crontab, donde se almacena la lista de tareas programadas.

35 17 * * * hola()

Hagamos un pequeño repaso a los parámetros de Cron (por orden):

1. minuto [0-59]
2. hora [0-23]
3. dia del mes [0-31]
4. mes [0-12]
5. dia semana [0-7]
6. ejecutable

Los * indican cualquier, por lo tanto en el ejemplo anterior indicamos que cada día a las 17:35 se ejecutará el script hola().

La hora especificada será la del navegador del usuario

Veamos unos ejemplos más:

* 16 * * * hola()

Cada día desde las 16:00 a las 16:59 se ejecutará hola().

30 6 1 * * showHola()

Ejecutamos showHola() el día 1 de cada mes a las 6:30 de la mañana.

Se trata de un sistema bastante rudimentario, pero funciona y aunque operadores como (/2) no están contemplados, dan mucho juego.

Codigo

var jsCron = {
		items:[],
		interval: null,
		parse: function(strUnix) {
				return strUnix.match(/^(\d+|\*) (\d+|\*) (\d+|\*) (\d+|\*) (\d|\*) +(\w+)/);
		},
		check: function() {
				var hoy = new Date();
				var test = [new Date(), hoy.getMinutes(), hoy.getHours(), hoy.getDate(), hoy.getMonth(), hoy.getDay()];

				for (var i in this.items) {
					var exec = 0;
					var t = this.parse(this.items[i][1]);
					for (var x in t)
				    if (t[x] && (t[x] == test[x] || t[x] == "*"))exec++;
					if (exec == 5 && this.items[i][0] == 0) {
							eval(t[6]).call();
							this.items[i][0] = 1;
					} else if (exec < 5 && this.items[i][0] == 1) {
						this.items[i][0] = 0;
					}
				}
		},
		set: function(strUnix) {
			if (!/^(\d+|\*) (\d+|\*) (\d+|\*) (\d+|\*) (\d|\*) +(\w+)/.test(strUnix)) return new Error("Formato invalido");
			this.items.push([0, strUnix]);
		},
		init: function(seg) {
			var seg = seg || 1000;
			this.interval = setInterval("jsCron.check()", seg);
		}
};
jsCron.init();

Modo de uso

Al igual que de un crontab debemos especificar un listado de tareas a programar, para ello usaremos el método set() e introduciremos la sentencia en el formato explicado anteriormente.

// Función hola();
function hola() {
   alert("Hola");
}

// Tarea programada
jsCron.set("35 17 * * * hola()");

Descargar Fichero JS (jscron)

Inspector es el Firebug de WebKit/Safari y hace ya tiempo que vamos viendo su evolución y la adquisición de nuevas mejoras que completaban esta herramienta del navegador. 

Alvaro Videla ha extendido las posibilidades añadiendole un juego que ha portado de uno hecho en ActionScript del concurso de 25lines.com. 

El resultado, poco útil, permite ver las posibilidades y la facilidad de extender esta herramienta para ofrecernos ayudas y mejoras propias con el fin de personalizar y facilitar nuestra tarea.

Via