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.

HTML5 y CSS3... 572 días

Después de varios intentos hoy os presento el nuevo rediseño de icebeat.

1

¿Qué tiene de especial este diseño?

  1. Todo está escrito en html5
  2. No utilizo classes para maquetar con CSS
  3. Ahora existen 4 temas básicos
  4. Paginado con AJAX
  5. Avatares de twitter
  6. Versión para navegadores que no acepten html5
  7. Resaltado de comentarios

Mi prioridad era escribir el blog en html y maquetar usando herencias, esto me limita bastante a la hora de añadir nuevas funcionalidades pero normalmente no solemos añadir cosas nuevas. he reducido las peticiones de las imágenes usando base64.

He intentado simplificar las etiquetas, ahora con 4 temas (código, diseño, internet y offtopic) acaparo la mayoría de las anotaciones.

He añadido la paginación infinita como hace itunes, sigue siendo compatible si desactivas javascript.

Ahora obtengo la información del usuario gracias al usuario de twitter, antes lo hacíamos con gravatar.

Para no comerme mucho la cabeza he creado 2 diseños, uno con html5 y otro para buscadores o navegadores dificiles de maquetar, me resulta más rápido lidiar con varias plantillas que intentar hacer crossbrowsing (para eso ya tengo el curro).

1

Está es la joyita de la casa, es un sistema para resaltar comentarios y los replies que se hacen. Al utilizar el usuario de twitter tienes un autocompletado en el textarea, si escribes @ puedes tabular y buscar. Para ver el resaltado tienes que hacer click en el avatar o en el reply del mensaje.

1


Cosas por hacer

Ultimamente ando muy liado, la verdad es que aunque disfruto en mi trabajo no consigo tener esa linea de experimentación que antes tenia. Todos con los que he hablado me dicen lo mismo, son etapas de la vida en que entras en depresión tecnológica y empiezas a resentirlo. Aunque estoy muy activo socialmente en twitter y en bitacoras.com, no es lo mismo con el blog.

Para no abandonar mi camino, durante estas semanas he aceptado un par de miniproyectos, para volver a entrar en calor.

Espero volver a dar caña al blog, y sobre todo, experimentar y probar cosas nuevas, hello jQuery?


Sistema de captcha

He tenido que añadir un sistema de captcha en el blog porque el spam me esta matando, mira que he creado filtros personales que más o menos no son el estándar en los blogs, pero sin utilizar akismet he podido retenerlos un tiempo.

Ahora las anotaciones inferiores a un ID 150 (te das cuenta del ID en la url cuando comentas) tienen que escribir al inicio del comentario el numero del indentificador, si no se hace el comentario no es guardado. Es un sistema un poco tonto, lo suyo seria un captcha en condiciones pero teniendo en cuenta que muy poca gente suele escribir en las anotaciones antiguas tampoco es tan molesto.


Aplicación 1.9

La verdad es que no se cuantas aplicaciones 2.0 salen al día, todas ellas con mucha ilusión intentando buscar la necesidad perdida. Esto es de cajón, nos intentan demostrar que nos hacen falta para vivir en internet. Algunas ya cumplen su papel y otras poco a poco van ganando nuestra confianza.

Yo soy de las personas que tengo mil cosas en la cabeza, nunca paro, pero me cuesta la vida utilizar una aplicación para anotar mis ideas y tareas pendientes. Creo que eso me pasa por ser más de papel, me encanta utilizar mi libreta o incluso un folio doblado por la mitad, es como si fuera mi inbox temporal jeje.

A cuento de todo esto viene porque me gustaría preguntar que aplicación echáis de menos en la red y que por muy tonta que sea aun no se ha implementado?.

Yo echo de menos un catalogador de series.


Sistema de refers

Es cosa mía o el sistema de refers de google-analytics es un poco espeso?, la verdad que como sistema para saber cuantas visitas tienes esta bastante bien, pero luego deja de contar. Así que me puesto manos a la obra y me he creado un sistema de refers, inspirado en MINT y en google, de esta forma puedo poner el log.js en cualquier pagina.

Montarse un sistema de MVC te ahorra bastante trabajo.

El modelo

class Log extends AppModel {
    //hereda las funcionas de AppModel y linkea a la tabla logs
}

El controlador

<?php
//url: log/save
class LogController extends AppController {
function save() {
    $title = p('title');
    $refer = strtolower(p('refer'));
    if($refer) {
        $url = @parse_url($refer);
        $host = isset($url['host']) ? preg_replace('!^[w]{3,}.!','',$url['host']) : '' ;
        $myhost = @$_SERVER['HTTP_HOST'];
        if($myhost != $host) {
            $log = new Log;
            $log->save(array(
                'page' => $title,
                'host' => $host,
                'time' => time_timestampToMysql(time()),
                'refer' => $refer
            ));
        }
    }
    exit;
}
}
?>

Y por ultimo el disparador que envia los datos al controlador.

var Log = {
    save: function() {
        new Ajax('/log/save', {postBody: {'refer':document.referrer,'title':document.title}}).request();
    }
};
Window.onDomReady(Log.save);

Es muy sencillo pero menos da una piedra jeje.

Página 1 de 13 · Mostrar 5 más