iUI es una librerÃa Javascript/CSS creada por Joe Hewitt, co-fundador de Firefox y creador de Firebug, que permite emular el lenguaje nativo visual del iPhone.
Entre las caracterÃsticas que nos ofrece encontramos:
VÃa / Ajaxline
La verdad es que Firefox4 está de lujo, y las demos que ofrece Mozilla son increíbles. De una de ellas he sacado cómo hacer clipping en vídeos usando HTML5 y la posibilidad de incrustar SVG (sólo funciona en Firefox4).
El método es sencillo, tengo un SVG que muestra el contorno y los botones de play y pausa, además tiene un clipPath que se usará para el estilo clip-path del vídeo:
SVG
Vídeo
Javascript
var play = document.getElementById('play');
var pause = document.getElementById('pause');
var video = document.getElementById('video');
play.addEventListener('click', function() {
play.style.display = 'none';
pause.style.display = 'block';
video.play();
}, true);
pause.addEventListener('click', function() {
play.style.display = 'block';
pause.style.display = 'none';
video.pause();
}, true);
video.addEventListener("ended", function() {
play.style.display = 'block';
pause.style.display = 'none';
video.pause();
}, true);El vídeo es el mismo que el de la demo de Mozilla, he puesto el borde semi-transparente para que se vea el clipping como va.
Vía / Project London Trailer
Curioso script que nos permite añadir variables a nuestras CSS usando para ello PHP y htaccess. No es algo que recomendaría hacer por tema de rendimiento, pero sí para proyectos en los que quienes realicen las páginas no tenga demasiado conocimiento de desarrollo web.
El proceso es sencillo, las css mediante Apache se redireccionan a un script PHP, en las CSS se crean variables del siguiente modo $color: #FFF; y luego el nombre de la variable se usa en cada estilo. El PHP parsea el fichero CSS y sustituye cada aparición de la variable por su correspondiente valor. Se cachea el resultado y se muestra.
Puede que haya modos más eficientes, como que el archivo CSS realmente no exista, y cuando sea así, se ejecute el script y se cachee, así la próxima vez que se acceda, no se pasa por el script PHP.
How to Add Variables to Your CSS Files
Vía / CSS Globe
Aunque el HTML5 no está disponible en todos los navegadores, no es mala idea ir incluyendo en nuestras webs aplicaciones que hagan uso de HTML5, e ir dándole un poco de vidilla al asunto y no estar pendientes de Internet Explorer. Por ello, este script nos puede venir muy bien:
function detectBrowserCapabilities(){
var res = new Array();
res["userAgent"] = navigator.userAgent;
var hasWebWorkers = !!window.Worker;
res["workersFlag"] = "" + hasWebWorkers;
var hasGeolocation = !!navigator.geolocation;
res["geoFlag"] = "" + hasGeolocation;
if (hasGeolocation) {
document.styleSheets[0].cssRules[1].style.display = "block";
navigator.geolocation.getCurrentPosition(function(location) {
res["geoLat"] = location.coords.latitude;
res["geoLong"] = location.coords.longitude;
});
}
var hasDb = !!window.openDatabase;
res["dbFlag"] = "" + hasDb;
var videoElement = document.createElement("video");
var hasVideo = !!videoElement["canPlayType"];
var ogg = false;
var h264 = false;
if (hasVideo) {
ogg = videoElement.canPlayType('video/ogg; codecs="theora, vorbis"') || "no";
h264 = videoElement.canPlayType('video/mp4;
codecs="avc1.42E01E, mp4a.40.2"') || "no";
}
res["videoFlag"] = "" + hasVideo;
if (hasVideo){
var vStyle = document.styleSheets[0].cssRules[0].style;
vStyle.display = "block";
}
res["h264Flag"] = "" + h264;
res["oggFlag"] = "" + ogg;
return res;
}$fx() es una librería que nos permite realizar animaciones de elementos HTML de forma sencilla. Altera las propiedades CSS a lo largo del tiempo pasando solo una pequeña configuración. Además se pueden combinar efectos, grupos de ellos, encadenarlos o ejecutarlos en paralelo, incluso indicar diferentes callbacks para dar una mayor flexibilidad.
Para aquellos que necesiten tan solo hacer animaciones y no quieran cargar todo el core de jQuery o Mootools, les puede venir muy bien.
$fx()
Vía / Script & Style
Hace unos días comentábamos sobre cómo realizar márgenes redondeados, prometimos al final de la entrada que íbamos a explicar paso a paso el proceso, por si hubiera alguien que le pudiera parecer insuficiente lo que se contaba en el artículo.
Se trata de colocar una imagen como fondo de un párrafo, si es necesario, se retocará para que tenga el fondo transparente o del mismo color que el fondo de la página, luego se crearán elementos html que se colocarán encima de la imagen del fondo, para evitar que se escriba el texto encima.
Muchas veces nuestra forma de aprender Javascript (o cualquier otra cosa) es encontrándonos con cosas desconocidas en scripts que estamos viendo e intentando comprender.
Una de estas nuevas posibilidades que nos ofrece Javascript son los “obtect literal”. Que sustituyen la falta de clases en Javascript, y nos facilita el uso de variables globales entre otras cosas.
Alguna vez te habrás encontrado con algo parecido al siguiente código y lo habrás querido comprender, una sencilla explicación nos la ofrece Wait till I come.
miObjeto={
miVariable:'valor',
init:function(){
},
hazAlgo:function(){
}
}Show love to the object literal
Vía / DOM Scripting Task Force