Daniel Mota / IceBeat

Mi vida en formato CSS3

Estás en la bitácora de IceBeat, una página sobre diseño y desarrollo web.

Gracias a Paul Streise, alguien que no tiene web, ha dedicado parte de su tiempo a portar el código de Window.Growl a Mootools 1.2 Beta 2.

Sin duda Window.Growl y Packito son las dos joyas de esta casa y ambas las tengo un poco descuidadas, aun así tengo planes para actualizarlas pero gracias a Paul ya me he ahorrado el 50%.

Por mis refers he encontrado una versión en Prototype, esto quiere decir que hay versiones adaptadas para Mootools, jQuery y Prototype, nada mal.

Tengo que decir que tambien un usuario ha añadido mejoras a class.image y que pronto intentare postearlo.


Remote ID3 función

Ayer echando un vistazo a muxtape, un servicio muy minimalista y sencillo me di cuenta que subiendo la canción ya obtenía el titulo y el arista. La verdad es que me llamo la atención y estuve jugando un poco con las funciones ID3, pero al probar en un archivo remoto me decía que nanai de la china. Estuve buscando y encontré unas clases que usaban fseek y claro tampoco me valían.Al final por phpclassess di con una que buscaba en archivos remoto, pero como ya tenia el gusanillo decidí crear una función.

function ID3($mp3='') {
    //etiquetas ID3
    $ID3 = array(
        'title' => 'TIT2', 
        'artist' => 'TPE1', 
        'album' => 'TALB'
    );
    //miramos si es un archivo mp3
    if(substr($mp3, -3, 3) != 'mp3') return false;
    //abrimos parte del archivo y leemos
    $fp = fopen($mp3, 'r'); 
    $data = fread($fp, 3000); 
    fclose($fp);
    //comprobamos que tiene ID3
    if(substr($data, 0, 3) != 'ID3') return false;
    //parseamos los tags
    foreach($ID3 as $type => $key) {
        //existe el tag?
        if(strpos($data, $key)) {
            //existe entre tags o es el ultimo?
            if(!preg_match('!'.$key.'(.*)[A-Z]{3}[A-Z1-4]{1}!Us', $data, $tag)) $tag = explode($key, $data);
            //algo raro pasa con los caracteres asi que limpiamos
            $info = $tag[1];
            $info = str_replace(' ', '...', $info);
            $info = preg_replace('![^A-Za-z0-9./'()]+!','',$info);
            $info = str_replace('...', ' ', $info);
            $ID3[$type] = $info;
        } else {
            //si no lo encontramos lo borramos
            $ID3[$type] = '';
        }
    }
    //devolvemos el nuevo array
    return $ID3;
}

//print_r(ID3('http://algunaweb.com/mp3.mp3'));

La función devuelve el titulo, el artista y el álbum de la canción, en caso de no poder parsear devuelve false. He tenido bastantes problemas dando con la solución para arreglar un poco los textos, asi que es posible que más de una vez te encuentres con 7 o caracteres extraños.


Framework iui

iui (User Interface (UI) Library for Safari development on iPhone) es un framework que he estado usando hace poco, toqueteandolo y probandolo, la verdad es que montas una pagina en un plis, pero deja mucho que desear si quieres interactuar con el codigo javascript, con el CSS es más facil y puedes añadir estilos y cambiar los listados.

Se hace un poco dificil saber cuando se disparan los eventos y controlarlos, y editar ciertas partes del diseño que cambian cuando pulsas un enlace.

Tienen pensando renovarlo un poco y adaptarlo a las nuevas capacidades que ofrece safari, CSS3, querySelector, animaciones CSS, base de datos.


Evitar el cache de los css y js

Muchas veces nos ha pasado que hacemos cambios en las hojas de estilos pero no se ven reflejados o se ven a medias y te hacen una especie de mezcla de lo antiguo y lo nuevo. Para evitarlo hay una forma muy sencilla y es el poner la fecha de modificación del archivo como variable, con esto consigues que el navegador fuerce el cache solo cuando ha sido modificado.

function version($file) {
    return $file.'?'.filemtime($file);
}

<link href="<?php echo version('css.css'); ?>" rel="stylesheet" type="text/css" />

YouTube.php

Siempre me ha gustado parsear las paginas web, es algo que me encanta, puede ser muy friki pero uso las expresiones como pasatiempo. En uno de los proyectos he tenido que buscar vídeos en youtube, como era una simple búsqueda en vez de usar su API hice una pequeña función.

Devuelve un array con lo mínimo para mostrar: ID, imagen y titulo del vídeo.

function youtube($q='') {
    $videos = array();
    $url = 'http://youtube.com/results?search_query='.urlencode(strtolower($q));
    $pagina = @file_get_contents($url);
    //!<a href="/watch?v=([^"]+)">[s]+<img src="(.*)" class="vimg120" title="(.*)"!Usi
    if(preg_match_all('!<as+href="/watch?v=([^"&]+)"[^<]+<imgs+src="([^"]*)"s+class="vimg120"s+title="([^"]*)"!Usi', $pagina, $info, PREG_SET_ORDER)) {
        foreach($info as $video) {
            $videos[] = array(
            'id' => $video[1],
            'image' => $video[2],
            'text' => $video[3]
            );
        } 
    }
    return $videos;
}

//youtube('chikichiki');

Se puede hacer mas compleja, pero tal como esta cumple su función perfectamente. Si necesitas hacer una busqueda dentro de las categorias puedes añadir en url el parametro search_category.

Actualizado: DrSlump propone una expresión más eficiente :).

Página 2 de 22 · Mostrar 5 más