// HTML
<ul>
 <li id="long1">Long, gradual transition...</li>
 <li id="fast1">Very fast transition...</li>
 <li id="delay1">Long transition with a 2-second delay...</li>
 <li id="easeout">Using ease-out timing...</li>
 <li id="linear">Using linear timing...</li>
 <li id="cubic1">Using cubic-bezier(0.2, 0.4, 0.7, 0.8)...</li>
</ul>

// CSS
#delay1 {
 position: relative;
 -moz-transition-property: font-size;
 -moz-transition-duration: 4s;
 -moz-transition-delay: 2s;
 font-size: 14px;
}

#delay1:hover {
 -moz-transition-property: font-size;
 -moz-transition-duration: 4s;
 -moz-transition-delay: 2s;
 font-size: 36px;
}

Artículos relacionados

• 10 extensiones para Firefox con las que mejorar nuestra privacidad
• Mozilla Firefox 3.6 está entre nosotros
• Disponible la RC1 de Firefox 3
• Firefox 3.6 RC2 disponible para descargar
• Firefox 3 RC 2 disponible “extraoficialmente”

// Ejemplo jQuery
<script src="jquery.js"></script>
<script src="jquery-json.js"></script>
<script src="domcached.js"></script>
<script>
// Leemos el valor de "key"
var value = $.DOMCached.get("key");
if(!value){
	// Si no está disponible lo cargamos desde el servidor
 	value = load_data_from_server()
 	// Lo añadimos al DOM para futuros usos
	$.DOMCached.set("key",value);
}
</script>

Artículos relacionados

• jQuery 1.0 ha salido para mostrarnos la luz
• Crea DOM directamente con jQuery y Prototype
• Prototype vs jQuery
• Prototype 1.6.1 RC2, compatibilidad con IE8
• jQuery Easing, un plugin para facilitar nuestros efectos

(Ver Imagen)

Actualización (23/02/2010 10:19):

Artículos relacionados

• Microsoft reconoce que Vista es una m…
• Windows 3.11 en tu navegador
• Prueba Windows Mobile 6.1.4 desde tu escritorio
• Añade un WYSIWYG a tu web
• Internet Explorer 8 disponible en el Windows Server Update Services (WSUS)

Al igual que Google Gears SQL, con HTML5 será posible realizar peticiones complejas mediante SQL. Los chicos de HTML5Rocks ha creado una pequeña aplicación de ejemplo que funciona sobre Google Chrome y de la que he podido crear una pequeña versión reutilizable que podremos usar en nuestras aplicaciones web.

var webdb = {};
webdb.db = null;

// Función para crear la base de datos
webdb.open = function(options) {
	if (typeof openDatabase == "undefined") return;

	// Opciones por defecto
   	var options = options || {};
	options.name = options.name || 'noname';
	options.mb = options.mb || 5;
	options.description = options.description || 'no description';
	options.version = options.version || '1.0';

	// Definimos el tamaño en MB
   	var dbSize = options.mb * 1024 * 1024;

	// Cargamos la base de datos
   	webdb.db = openDatabase(options.name, options.version, options.description, dbSize);
}
// ExecuteSql
webdb.executeSql = function(sql, data, onSuccess, onError){
	if (!webdb.db) return;
	webdb.db.transaction(function(tx){tx.executeSql(sql, data,onSuccess,onError);});
}

Este código, nos permite realizar peticiones SQL tales como crear una nueva tabla, leer, borrar o modificar de ella, está claro que únicamente en los navegadores que lo permitan.

// Ejemplo
var opt = {
	name: "ejemplo",
	mb: 1,
	description: "Base de datos de ejemplo",
	version: "1.0"
};

// Abrimos la base de datos
webdb.open(opt);

// Creamos la tabla
webdeb.executeSql('CREATE TABLE IF NOT EXISTS ejemplo (ID INTEGER PRIMARY KEY ASC, texto TEXT, added_on DATETIME"', [],
			function(tx, r){
				alert("Tabla creada");
			},
			function(tx, e){
				alert("Se ha producido un error: "e.message);
			});

// Insertamos un nuevo elemento
webdb.executeSql('INSERT INTO ejemplo (texto, added_on) VALUES (?,?)', ['Mensaje de ejemplo', new Date()],
			function(tx, r){
				alert("Elemento introducido");
			},
			function(tx, e){
				alert("Se ha producido un error: "e.message);
			});

Esto nos permitirá crear aplicaciones más complejas gracias al almacenamiento de datos en la capa del cliente. Eso si, será mucho más útil cuando todos los navegadores lo incorporen :D

Artículos relacionados

• WebKit ya integra almacenamiento en el cliente
• Wordpress 2.9 te ayudará a cuidar tu base de datos
• Enviate copias de seguridad de tu base de datos a tu email
• MyJDB, base de datos en Javascript para todos los navegadores
• DOMCached, librería para facilitar el almacenamiento DOM con jQuery y Prototype

// Mozilla
-moz-border-radius:1em;

// WebKit
-webkit-border-radius:1em;

// W3C
border-radius:1em;

(Ver Imagen)

Código

#wrapper{
 width: 1000px;
 margin: auto;
 position: relative;
}
#circle{
 position: absolute;
 top: 100px;
 left: 0;
 z-index: 0;
 width: 200px;
 height: 200px;
 background-color: #a72525;
 -webkit-border-radius: 100px;
}

#circle1{
 position: absolute;
 top: 105px;
 left: 5px;
 z-index: 1;
 width: 200px;
 height: 200px;
 background-color: #efefef;
 -webkit-border-radius: 100px;
}

Artículos relacionados

• Bordes redondeados en Internet Explorer
• Microsoft Internet Explorer 8 y los prefijos CSS
• Border-imagen en Firefox 3.1
• Bordes redondeados con CSS Sprites
• Firefox + Firebug vs IE8 + Developer Toolbar

Google Buzz API

http://buzz.googleapis.com/feeds/{userID}/public/posted

http://buzz.googleapis.com/feeds/103886688219972755999/public/posted

Añadir sitios y a sitios

Vínculos a tu perfíl desde sitios externos

<head>
 <!-- ... -->
 <link rel="me" type="text/html" href="http://www.google.com/profiles/your.username"/>
 <!-- ... -->
</head>

Opinión

Artículos relacionados

• Google Buzz, el friendfeed de Google
• Google Chrome para Mac y Linux
• Google OpenSocial libera su API
• Ext Core disponible desde Google Ajax Libraries
• Google DocType, documentación para desarrolladores web

(Ver Imagen)

• Uso de degradados
• Uso de patrones
• Paleta de colores
• Historial de modificaciones
• Posibilidad de salvar el dibujo con Data URI

Artículos relacionados

• El Paint de windows versión on-line
• Dibujar con CSS, puro y duro
• Adobe se apunta al retoque fotográfico online con Adobe Remix
• HTML5 Glosary
• Chuleta HTML5

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<script type="text/javascript" src="../gordon.js"></script>
		<script type="text/javascript">
 			window.onload = function(){
 				// Opciones
 				var opt = { id: 'stage', // ID del contenedor
 					width: 500,
 					height: 400};

 				// Definimos la nueva película
 				new Gordon.Movie('blue.swf', opt);
 			}
		</script>
	</head>
 	<body>
 		<div id="stage"></div>
 	</body>
</html>

Artículos relacionados

• jQuery Flash Plugin
• 33 galerías de imagenes javascript y flash
• ¿Donde esta la línea entre Flash y Javascript?
• Google comienza a indexar fichero Flash
• 16 ejemplo de Javascript que intenta acabar con Flash

Consola

(Ver Imagen)

Usándola en PHP

// Definimos la consulta
$query = 'select * from flickr.photos.interestingness(20)';

// Concatenamos con la consulta
$url = 'http://query.yahooapis.com/v1/public/yql?format=json&q=' . urlencode($query);

// Creamos la conexión cURL
$c = curl_init();
curl_setopt($c, CURLOPT_URL, $url);
curl_setopt($c, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($c, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($c, CURLOPT_SSL_VERIFYHOST, false);

// Lanzamos la petición
$rawdata = curl_exec($c);
curl_close($c);

// Convertimos el JSON en un objeto
$data = json_decode($rawdata);

// Mostramos la información
echo '<pre>';
print_r($data);
echo '</pre>'

<?php
 $results = $data->query->results->results;
 for ($i = 0; i$i < count($results); $i++) :
 $item = $results[$i]->item->item;
 $link = $results[$i]->item->resource;
 ?>
 <li>
 <a href="<?=$link?>"><?=$item?></a>
 </li>
<?php endfor; ?>

Artículos relacionados

• Jawi Script, el nuevo lenguaje de programación
• Top 20 lenguajes de programacion
• La popularidad de los lenguajes de programación (oct 08)
• Tutoriales de Javascript
• LOLCODE, un lenguaje de programación diferente

Soporte

(Ver Imagen)

Forma de uso

Declarando nuestra fuente

@font-face {
 font-family: miFuente; /* required */
 src: source;                        /* required */
 font-weight: weight;                /* optional */
 font-style: style;                /* optional */
}

Aplicando nuestras fuentes

h3 {
 font-family: miFuente, arial, helvetica, sans-serif;
}

Detectar la propiedad

/*!
 * isFontFaceSupported - v0.9 - 12/19/2009
 * http://paulirish.com/2009/font-face-feature-detection/
 *
 * Copyright (c) 2009 Paul Irish
 * MIT license
 */

var isFontFaceSupported = (function(){

    var fontret,
        fontfaceCheckDelay = 100;

		// IE supports EOT and has had EOT support since IE 5.
		// This is a proprietary standard (ATOW) and thus this off-spec,
		// proprietary test for it is acceptable.
    if (!(!/*@cc_on@if(@_jscript_version>=5)!@end@*/0)) fontret = true;

    else {

    // Create variables for dedicated @font-face test
      var doc = document, docElement = doc.documentElement,
          st  = doc.createElement('style'),
          spn = doc.createElement('span'),
          wid, nwid, body = doc.body,
          callback, isCallbackCalled;

      // The following is a font, only containing the - character. Thanks Ethan Dunham.
      st.textContent = "@font-face{font-family:testfont;src:url(data:font/opentype;base64,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)}";
      doc.getElementsByTagName('head')[0].appendChild(st);

      spn.setAttribute('style','font:99px _,serif;position:absolute;visibility:hidden'); 

      if  (!body){
        body = docElement.appendChild(doc.createElement('fontface'));
      } 

      // the data-uri'd font only has the - character
      spn.innerHTML = '-------';
      spn.id        = 'fonttest';

      body.appendChild(spn);
      wid = spn.offsetWidth;

      spn.style.font = '99px testfont,_,serif';

      // needed for the CSSFontFaceRule false positives (ff3, chrome, op9)
      fontret = wid !== spn.offsetWidth;

      var delayedCheck = function(){
        if (isCallbackCalled) return;
        fontret = wid !== spn.offsetWidth;
        callback && (isCallbackCalled = true) && callback(fontret);
      }

      addEventListener('load',delayedCheck,false);
      setTimeout(delayedCheck,fontfaceCheckDelay);
    }

    function ret(){  return fontret || wid !== spn.offsetWidth; };

    // allow for a callback
    ret.ready = function(fn){
      (isCallbackCalled || fontret) ? fn(fontret) : (callback = fn);
    }  

    return ret;
})();

if (!!window.CSSFontFaceRule) ...

Alternativas

1. sIFR 2.0
2. cufón
3. P+C DTR
4. FLIR
5. SIIR
6. DTR
7. sIFR 3
8. Typeface.js
9. IFR
10. PHP+CSS DTR
11. CSS Image Replacement [static]
12. swfir

Más información

• Sintaxis de @font-face
• Web Fonts with @font-face
• @font-face - MDC

Artículos relacionados

• Firefox 3.1 incorporará @font-face
• @font-face en profundidad
• @font-face en Internet Explorer
• Detector de Tsunamis para el movil
• FontJazz, usa cualquier fuente en tus aplicaciones web.