Contenido

WordPress 2.8 con un editor de código decente

21 Feb

+ 1

WordPress 2.8 integrará CodePress, una mejora visual al editor de plugins/themes que nos permitirá visualizar más claramente el código de nuestros plugins y themes desde el panel administrador. Por el momento, podemos seguir usando el plugin del que salió dicha funcionalidad o alguna alternativa que hicimos por aquí hace ya más de un año.

Simulador de iPhone para Windows

20 Feb

+ 2

Los que desarrollamos para el iPhone, estamos de enhorabuena ya que Backbaud Labs nos ha desarrollado un simulador de iPhone para Windows. Usando el motor gráfico de Safari para Windows podremos ver nuestros diseños como si en un iPhone los estuvieramos viendo.

IETester v.0.3

20 Feb

+ 8

Mi amigo Edu, desde la distancia nos informa de la salida de la versión 0.3 de IETester.

ietester-03

Se trata de una herramienta que nos permite testear nuestros diseños en diferentes versiones de Internet Explorer a la vez. Similar a lo que nos ofrecía CSSVista pero con versiones de Internet Explorer. En esta versión se han corregido una serie de errores para conseguir mayor compatibilidad con Windows Vista y aprovechando, se ha integrado Internet Explorer 8 RC1 entre las versiones disponibles.

Ordenación del CSS

19 Feb

+ 25

Recuerdo que hace ya mucho tiempo hablamos con Daniel Mota sobre la cantidad de comentarios en nuestros CSS, pero aún podemos ser más meticulosos con estos ficheros. Podemos definir una ordenación básica que usemos para todos los elementos de nuestros CSS.

En Aloe Studio han dividido las propiedades en una serie de secciones (bastánte obvias) que engloban las propiedades ordenadas:

  1. Display y flujo
  2. Posición
  3. Dimensiones
  4. Margenes, Padding, Border,…
  5. Tipografía
  6. Background
  7. Opacidad,Cursores,…

De esta forma obtenemos un listado de propiedades ordenadas como esta:

el {
	display: ;
	visibility: ;
	float: ;
	clear: ;

	position: ;
	top: ;
	right: ;
	bottom: ;
	left: ;
	z-index: ;

	width: ;
	min-width: ;
	max-height-width: ;
	height: ;
	min-height: ;
	max-height: ;
	overflow: ;

	margin: ;
	margin-top: ;
	margin-right: ;
	margin-bottom: ;
	margin-left: ;

	padding: ;
	padding-top: ;
	padding-right: ;
	padding-bottom: ;
	padding-left: ;

	border: ;
	border-top: ;
	border-right: ;
	border-bottom: ;
	border-left: ;

	border-width: ;
	border-top-width: ;
	border-right-width: ;
	border-bottom-width: ;
	border-left-width: ;

	border-style: ;
	border-top-style: ;
	border-right-style: ;
	border-bottom-style: ;
	border-left-style: ;

	border-color: ;
	border-top-color: ;
	border-right-color: ;
	border-bottom-color: ;
	border-left-color: ;

	outline: ;

	list-style: ;

	table-layout: ;
	caption-side: ;
	border-collapse: ;
	border-spacing: ;
	empty-cells: ;

	font: ;
	font-family: ;
	font-size: ;
	line-height: ;
	font-weight: ;
	text-align: ;
	text-indent: ;
	text-transform: ;
	text-decoration: ;
	letter-spacing: ;
	word-spacing: ;
	white-space: ;
	vertical-align: ;
	color: ;

	background: ;
	background-color: ;
	background-image: ;
	background-repeat: ;
	background-position: ;

	opacity: ;

	cursor: ;

	content: ;
	quotes: ;
	}

Al igual que en el artículo, nunca me ha gustado ordenar las propiedades CSS alfabéticamente, no le encontraba lógica a definir antes el border: antes que la posición.

¿Y tu? ¿Como ordenas tus ficheros CSS?

Actualización

Para complementar la lectura, recomiendo echarle un vistazo a las buenas maneras propuestas por Deziner Folio, son bastánte obvias pero importantes de conocer.

Rendimiento de las técnicas de POO en Javascript

18 Feb

+ 10

Hace unos días hablamos de programación orientada a objetos en Javascript y vimos que es una técnica interesante y las diferentes opciones usadas para conseguirla. Pero ¿cual de ellas es más eficiente en cuanto a rendimiento?

class_performance_javascript

En Broofa.com (y via Ajaxian) descubro que han hecho una prueba de rendimiento a las declaraciones en diferentes navegadores haciendo 100.000 llamadas al constructor de cada uno de estos métodos, ha generado subclases y ha llamado a métodos de dichas clases parada despues comparar la memoria usada en el proceso y los tiempos usados en dichos procesos.

Viendo los resultados observamos que Base2 se corona como técnica más rápida y más eficiente en cuanto a consumo de memoria seguida de la propuesta por John Resig. Por otro lado el rendimiento de Prototype llega a ser hasta 20x inferior que sus competidores.

¿Y MooTools?

Como no han incluido a MooTools en las pruebas me he tomado la libertad de añadirla yo y los resultados son realmente buenos.

mootools_class_performance

Podeis ver los resultados en diferentes navegadores en este script de ejemplo.

Actualización

He tenido un fallo en la comprensión del funcionamiento de JSLitmus y di por supuesto que a menor «amarillo» mejor cuando es diferente ya que esto mide el número de operaciones por segundo y no el número de segundos en realizar N operaciones.

Desde este punto, Prototype me sorprende con la potencia que obtenemos, dejando muy atrás a MooTools y Base2 que pasarían a ser los más lentos de los mostrados. Por otro lado el script de John Resig se mentiene al frente de la comparativa.

live() en jQuery 1.3

18 Feb

+ 10

jQuery añadió, con la versión 1.3 de jQuery, un método para gestionar los eventos llamado live(). Dicho evento nos permite controlar los eventos de los elementos existentes y de los que están por crear.

Hasta ahora con jQuery teníamos que volver a añadir los eventos al crear nuevos elementos en nuestros scripts.

jQuery('<a href="...">Ejemplo</a>');
jQuery('a').bind('click', function(){ ... });

Con live() esto es mucho más sencillo. Ya que únicamente se tendrá que lanzar una vez y al generar nuevos eventos que cumplan la condición del selector que indiquemos contendrán los eventos y funcionalidades especificadas para estos elementos.

jQuery('a').live('click', function(){ ... });
...
jQuery('body').append('<a href="...">Ejemplo</a>');

En este caso, el <a /> que generamos despues de live() poseerá la funcionalidad descrita anteriormente mediante live().

Por desgracia, tenemos una limitación y es que no todos los eventos están soportados por la función y tendremos que conocer los que no son posible extender.

Soportados

  • click
  • dblclick
  • mousedown
  • mouseup
  • mousemove
  • mouseover
  • mouseout
  • keydown
  • keypress
  • keyup

No soportados

  • blur
  • focus
  • mouseenter
  • mouseleave
  • change
  • submit

die() es el opuesto y se encarga de cortar la propagación de los eventos a nuevos elementos.

jQuery('a').live('click', function(){ ... });
...
jQuery('a').die('click', function(){ ... });
...
jQuery('body').append('<a href="...">Ejemplo</a>');

MaestrosdelWeb y ForosdelWeb han sido robados

17 Feb

+ 29

Pues eso, esta mañana via Meneame he leido la noticia y no tengo más que palabras de apoyo para Christian que debe estar pasandolo francamente mal.

Devuélvanle a Christian lo que tanto ha sudado para construir

Actualización

Parece que vía Twitter se está solucionando todo y parece que GoDaddy acaba de darle a Christian el dominio de nuevo.

Más info en los comentarios.

19:32 (Hora Española): Christian recupera el control sobre sus dominios. Enhorabuena!!!

Bookmarklets para desarrolladores web

17 Feb

+ 5

Los Bookmarklets son ejecuciones de Javascript sobre la barra de navegación de tu navegador que nos permite ejecutar código y podemos añadir funcionalidades extras al navegador sin tener que insertar una extensión o plugin.

En Specky Boy han recolectado una serie de estos marcadores exclusivos para desarrolladores web, estos son algunos de los que más me han gustado. (Copia la URL del enlace y ejecútalo donde lo necesites)

  1. Grid Layout, añade un grid sobre tu página web para pulir los últimos detalles.
  2. Quick Accessibility Page Tester, rápido test de accesibilidad para tus páginas.
  3. Slayer Office MouseOver DOM inspector, pasando sobre los elementos de tu página veremos sus propiedades.
  4. XRAY, ya lo vimos hace tiempo y por eso no podemos olvidarnos de él.

Más en Specky Boy.

iCal Archive para WordPress

17 Feb

+ 13

Ya podemos descargar iCal Archive para WordPress. Se trata de de una adaptación sobre WordPress del script que vimos hace unos días con el que podiamos crear un calendario al estilo iCal (del iPhone) con jQuery.

ical_archive_wordpress

Ver Demo

Instalación

  1. Descargamos el ficheros
  2. Descomprimimos y colocamos el directorio completo en la raiz de WordPress.
  3. Modificamos el HTML si queremos adaptarlo al diseño del blog.

Descargar

Versión 0.1

La iniciativa Dharma creó el unicode

16 Feb

+ 6

Los más fanáticos de LOST (Perdidos) sabrán hasta donde pueden llegar las raices de la iniciativa Dharma… pero seguro que no sabían que tambien creó el Unicode.

dharma

(Rueda del dharma ☸)Gracias JuanRa.

Post que me ha parecido gracioso, no hacer mucho caso 😛