Artículos relacionados

• Chuleta HTML5
• Un preview al HTML5
• HTML 5 Working Draft publicado
• El circo del HTML5, peligro para el estandar
• Implementando <video /> de HTML5 con Javascript

• Gestión de eventos
• Delegación de eventos

HTML

<ul id="nav">
 <li><a href="#hola">Hola</a></li>
 <li><a href="#hola2">Hola2</a></li>
 <li><a href="#hola3">Hola3</a></li>
 <li><a href="#hola4">Hola4</a></li>
 <li><a href="#hola5">Hola5</a></li>
</ul>

Gestión de eventos

<script type="text/javascript">
   var nav = document.getElementById("nav");
   var as = nav.getElementsByTagName("a");
   for (var x = 0; x < as.length; x++) {
     as[x].onclick = function(){
        alert(this.innerHTML);
     }
   }
</script>

Delegación de eventos

<script type="text/javascript">
   var nav = document.getElementById("nav");
   nav.onclick = function(e){
      var e = e || window.event; // Obtenemos el evento
      var el = e.target || e.srcElement; // Obtenemos el elemento que lanza el evento
      alert(el.innerHTML);
   }
</script>

Rendimiento

• Tiempo en aplicar los eventos
• Tiempo en ejecutar el evento

Conclusiones

Más información

1. Javascript Event Delegation is Easier than you think
2. Javascript Event Delegation and Event Handlers
3. Event Delegation with jQuery
4. Event Delegation made Easy
5. Event Delegation with javascript

Artículos relacionados

• Gestión de eventos en Javascript con Prototype
• Cancelar eventos mediante Javascript
• Textarea tools, con ensanchamiento del textarea
• Los eventos de teclado en Javascript
• live() en jQuery 1.3

(Ver Imagen) Para hacer frente a las nuevas aplicaciones web, cargadas de Javascript, IE8 mejoró algo el tiempo de proceso frente a los resultados obtenidos por su versión anterior, como vemos en la imagen. Por otro lado, el más importante, la adopción de estándares asoma un triste 32/100 en los resultados actuales de Acid3 con la versión de desarrollo, que aunque se trata de un resultado muy inferior a sus contrincantes (que hace ya tiempo lo pasaron al 100%), nos permite vislumbrar una pequeña mejoría que quiero coger con ilusión :D

(Ver Imagen) Como vemos en la imagen, border-radius pasará a formar parte de las nuevas funcionalidades disponibles en esta última versión que junto a los selectores CSS3 y el almacenamiento DOM hará que IE9 parezca hasta un navegador :D

Artículos relacionados

• Internet Explorer 8 beta 2 disponible para descargar
• Internet Explorer 8 eliminará las expresiones CSS en el modo estandar
• Confirmado: Internet Explorer 8 hoy, apartir de las 18:00
• Internet Explorer 8 disponible en el Windows Server Update Services (WSUS)
• Internet Explorer 8 en 20 idiomas más

1) Permitir la funcionalidad

add_theme_support( 'post-thumbnails' );

(Ver Imagen) Allí podremos seleccionar una imagen que será asociada al post.

2) Usar la funcionalidad

the_post_image($size)

<?php while( have_posts() ) : the_post(); ?>
 <div>
 <h1><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h1>
 <?php the_post_image() ?>
 <?php the_content() ?>
</div>
<?php endif; ?>

• thumbnail
• medium
• full

has_post_image()

<?php
	if ( has_post_image() )
		the_post_image( 'thumbnail' );
	else
		echo '<img src="default-image.png" alt="Example Image" title="Example" />';
?>

get_post_image_id()

$image_id = get_post_image_id();

get_the_post_image( $id, $size )

$image = get_the_post_image( $post->ID, 'thumbnail' );

3) Filtros y actions

//Filters
 - post_image_size
 - post_image_html
// Actions
 - begin_fetch_post_image_html
 - end_fetch_post_image_html

add_filter( 'post_image_html', 'my_post_image_html', 10, 3 );
function my_post_image_html( $html, $post_id, $post_image_id );
	$html = '<a href="' . get_permalink( $post_id ) . '" title="' . esc_attr( get_post_field( 'post_title', $post_id ) ) . '">' . $html . '</a>';
	return $html;

}

Artículos relacionados

• Nueva funcionalidad de Wordpress 2.9 en la edición de imágenes
• Envíate notificaciones cuando las imagenes no carguen
• Como usar los custom fields en Wordpress
• Class.image, imagenes más fáciles con PHP
• Problema con Wordpress 2.2 y posts largos que no cargan

(Ver Imagen) El script nos permite configurar los aspectos básicos de un selector de fechas y además nos permite usar el formato de fechas similar al usado por DateJS.

<script type="text/javascript" charset="utf-8">
      //<![CDATA[
        new Timeframe('calendars', {
          startField: 'start',
          endField: 'end',
          earliest: new Date(),
          resetButton: 'reset' });
      //]]>
</script>

Parámetros

months

Número de meses que mostramos (default: 2).

format

Formato para las fechas en los elementos <input /> (default: %b %d, %Y)

weekOffset

Fecha de inicio de la semana (usa 1 para empezar la semana en Lunes).

startField, endField

Declara un rango de inicio y fin. (por defecto lo genera automáticamente)

previousButton, todayButton, nextButton, resetButton

Declara los botones de navegación (por defecto lo genera automáticamente)

earliest, latest

Permite espeficiar los rangos de fechas anteriores o posteriores que no podrán ser seleccionadas

maxRange

Limita el máximo de días a la vez

Demo y Descarga

Artículos relacionados

• input type=”file” para ficheros múltiples por fin en versión nativa
• Fechas más elegantes con CSS
• Mejoras el aspecto de tus fechas con CSS
• querySelectorAll() nativo para Firefox 3.1
• Otra de enlaces rápido

Artículos relacionados

• ¿La lista definitiva para los usuarios de Wordpress?
• Quick Thumbnail, una solución al problema de las miniaturas
• La guia definitiva sobre GET vs POST
• Me voy!! Ya no aguanto más
• WP-SuperCache, nueva versión 0.6

(Ver Imagen) Entre las mejoras que nos encontramos en esta versión, nos encontramos:

• Búsqueda de datos en la tabla
• Promedios de columna y totales
• Efecto onhover
• Cambio de clases de cabecera
• Reconocimiento automático del tipo
• ... más

var sorter = new TINY.table.sorter('sorter','table',{
 headclass:'head', // Header Class //
 ascclass:'asc', // Ascending Class //
 descclass:'desc', // Descending Class //
 evenclass:'evenrow', // Even Row Class //
 oddclass:'oddrow', // Odd Row Class //
 evenselclass:'evenselected', // Even Selected Column Class //
 oddselclass:'oddselected', // Odd Selected Column Class //
 paginate:true, // Paginate? (true or false) //
 size:10, // Initial Page Size //
 colddid:'columns', // Columns Dropdown ID (optional) //
 currentid:'currentpage', // Current Page ID (optional) //
 totalid:'totalpages', // Current Page ID (optional) //
 startingrecid:'startrecord', // Starting Record ID (optional) //
 endingrecid:'endrecord', // Ending Record ID (optional) //
 totalrecid:'totalrecords', // Total Records ID (optional) //
 hoverid:'selectedrow', // Hover Row ID (optional) //
 pageddid:'pagedropdown', // Page Dropdown ID (optional) //
 navid:'tablenav', // Table Navigation ID (optional) //
 sortcolumn:1, // Index of Initial Column to Sort (optional) //
 sortdir:1, // Sort Direction (1 or -1) //
 sum:[8], // Index of Columns to Sum (optional) //
 avg:[6,7,8,9], // Index of Columns to Average (optional) //
 columns:[{index:7, format:'%', decimals:1},{index:8, format:'$', decimals:0}], // Sorted Column Settings (optional) //
 init:true // Init Now? (true or false) //
});

Artículos relacionados

• TinyTable, 2.5kb para unas tablas profesionales
• 10 diseños de tablas espectaculares
• TableKit, más gestión de tablas mediante Javascript
• MooTables, tablas con funcionalidad
• Manual de Tablas semánticas

(Ver Imagen) Básicamente la idea es comparar el tamaño de un elemento que contega un texto de una fuente usada como base frente a la que queremos testear. Evidentemente este sistema no es infalible, ya que podemos encontrarnos con diferentes fuentes que tengan el mismo tamaño.

jQuery FontAvailable

$(document).ready(function() {
 if($.fontAvailable('tahoma')) {
 // código aquí
 }
});

MooTools FontChecker Plugin

var fc = new FontChecker();
if (fc.check('Tahoma')) {
 ....
}

¿Cuando usar esta técnica?

$(document).ready(function() {
 if(!$.fontAvailable('Optimer')) {
 Cufon.replace('h1');
 }
});

Artículos relacionados

• Muestra código en tus posts
• Internet Explorer 8, ahora disponible en 43 idiomas
• TTF Group Sex, una fuente cachonda
• typeface.js, esperando font-face con javascript
• Ajedrez con AI en Javascript

1) the_post_image()

<?php while( have_posts() ) : the_post(); ?>
 <div>
 <h1><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h1>
 <?php the_post_image() ?>
 <?php the_content() ?>
</div>
<?php endif; ?>

//Filters
 - post_image_size
 - post_image_html
// Actions
 - begin_fetch_post_image_html
 - end_fetch_post_image_html

2) add_theme_support()

if (function_exists('require_if_theme_supports'))
 require_if_theme_supports('funcionalidad','/path/to/funcionalidad.php');

if ( function_exists( 'add_theme_support' ) )
 add_theme_support( 'funcionalidad' );

3) Papelera de reciclaje

4) Edición de imágenes

5) Metadata API

// Wordpress 2.8-
add_comment_meta(12345, 'twitter_id', 'someyoungpunk');
//Wordpress 2.9
add_metadata('comment', 12345, 'twitter_id', 'someyoungpunk');

6) Reparar base de datos

Artículos relacionados

• Nuevos cambios en Gravatar
• Preparate para la llegada de Wordpress 2.7
• ShortCode API, otra novedad de Wordpress 2.5
• Preparándonos para la llegada de Wordpress 2.5
• Con todos ustedes!! Wordpress 2.7, Coltrane

Gracias!

Artículos relacionados

• Manifestación contra los guardarraíles, 4 de Noviembre en Madrid
• El arte es un arma cargada de futuro
• GreyBox 4.0 ha visto la luz
• IE6 Update, la forma más sutil de sugerir que se actualizen
• Diferencias CSS entre Internet Explorer 6,7 y 8