Llevo ya un buen rato jugando con netrenderer, la utilidad que se supone que tiene es ver una web desde otra ip, pero el modo de superponer IE6 y IE7 es simplemente dios, en especial para comparar algunos sitios como menéame:

Si cada vez que quieres publicar en menéame alguna noticia te da pereza ir a introducir la url, esta cosa te será util, cada vez que cliques en el bookmarlet te aparecerá la pagina de enviar con la url introducida.

Bookmarlet

Para IE, firefox, Safari o cualquier navegador (Arrastra el enlace a la barra de favoritos)

Botón para Opera

S te apetece tenerlo con un bonito icono personalizado y usas opera, simplemente pulsa aqui u arrastra tu bonito botón y donde quieras.

(Respecto al titulo: Era una extensión para opera)

Una de las mayores ventajas del iPod frente a las cosas-que-reproducen-mp3-de-mediamarkt^TM es su gran calidad de audio, pero es una pena que no mucha gente no geek sepa que el iPod se puede conectar a cualquier cosa que reproduzca audio sin comprar un dock carísimo.

Paso 1: Componentes

-Un iPod (Aunque también sirve cualquier otra cosa, incluso una ds)
-Un equipo Hifi / TV con entrada RCA (Amarillo/Rojo/Blanco)
-Este cable (Stereo/RCA)

Paso 2: Montaje

El cabe trae tres salidas, negra, roja y blanca, buscamos en el equipo dos conectores de dichos colores (Rojo y blanco) y los enchufamos, el tercer cable (Negro) Lo conectamos al puerto de auriculares del iPod, quedará algo asi:

Paso 3: Audición

A falta de una palabra más coloquial, ahora solo te queda encender el equipo, pulsa el botón source hasta llegar a aux, y luego, desde tu iPod, elige la música.

Una de las cosas mas moletas de los blogs son los infinitos iconos de enviar a sitios sociales, etc, por eso, tras investigar un rato, me di cuenta de que la mejor manera de ponerlos de forma no molesta es asi, imaginemos a un usuario:

-Hmmm, este post sobre Sony me hizo gracia, voy a menearlo
-A ver, clic con el botón derecho en el tit…
-Anda! si ha aparecido un icono del gallifante solo!

En ese caso no serviría de nada porque no hay gallifante, solo abrir en nueva página y delicious, pero no hay problema en ponerlo.

Paso 1

Lo más importante son los iconos, por lo que haz unos que peguen con el estilo de tu blog o famfamfamizate.

Paso 2

Asumiendo que tus títulos están puestos de la forma h2 a, coloca el siguiente código justo entre a y h2:

<a href="<?php the_permalink() ?>" target="_blank"><img class="nwti nuevav" src="url-del-icono" alt="Nueva ventana/tab" /></a>

Si todo funciona, cambiando url-del-icono por su url, deberias tener un bonito icono, en este caso de nueva ventana al lado de cada titulo.

Paso 3

Como puedes ver, el código ya tenia unas clases css definidas, puedes llamarlas de otra forma si también las cambias en el css.

Ahora copia y pega esto en tu hoja de estilos:

.nwti {
display: none;
}
h2:hover > a .nwti {
display: inline;
}

Con la primera clase estamos escondiendo .nwti, es decir, la imagen.

Y en la segunda clase, estamos usando un selector de hijo, su funcionamiento es muy sencillo, El estilo solo afectará a las etiquetas exactas (Derecha) que estén dentro de las de la izquierda, en un principio, parece estúpido usarlo ya que eso se puede conseguir escribiendo los nombres seguidos.

Pero la magia es que en la izquierda podemos incluir la subclase que queramos (en este caso, :hover) para conseguir un efecto solo obtenible con javascript, la aparición de elementos.

Hace unos minutos por poco tengo que formatear el ordenador gracias a ese explendido navegador que a todos nos encanta, me explic por si a alguien le pasa lo mismo:

Instalo IE7 final desde microsoft, como es lógico, no reseteo, lo dejo para luego.

Tras unas bonitas 30 horas de uptime (hibernación, no soy tan friki) se me ocurre la feliz idea de reiniciar para testear Cosas Poposas, mientras lo dejo reiniciando voy as la consola a jugar al Contra. Mientras eso oigo la musiquilla de arranque de XP, asi que tras 15 muertes bajo a verlo.

Wiii!, no hay escritorio, tras un par de minutos sale el administrador de tareas y un mensajito de adress violation, al rato sale otro de que explorer no se pudo abrir porque necesitaba normaliz.dll.

Intento abrir opera, el mismo error, pero abre, al final consigo bajarlo de milagro, pero ¡oh! viene en un rar.

Hora de abrir Winrar, descomprimo y queda semicolgado, pasa un minuto y sigue igual, ya no se mueve el cursor.

De repente, mientras estaba buscando mi cd de XP Media Center, veo que los marcos de las ventanas se han puesto otra vez en royale (no en el estilo clásico) y que la barra de inicio empieza a salir.

En fin, menos mal que al xp le queda muy poco en este ordenador

Una de las pocas cosas que los de wordpress-es no pueden hacer (Limitaciones técnicas) es traducir las fechas, dejando un efecto bastante malo en la plantilla, afortunadamente, tiene una solución fácil, incluso desde el Tablero.

Paso 1

En el wp-admin pulsa en Manage/Files, y bajo Other Files escribe wp-includes/locale.php, si todo va bien, deberías tener las fechas en inglés, ahora solo tienes que traducirlas.

Ayudita

Si usas WP 2.0.1 (O uno superior debería valer), Aquí tienes el archivo completo para copiar y pegar
Wow, esta entrada es larga, pulsa aquí para seguir leyéndola

Margen negativo

Una cosa de css que no muchos conocen es la posibilidad de poner un margen negativo a los objetos, solucionando caso todos los problemas que suele haber, como por ejemplo:

Listas con borde

Si os fijáis en esta foto de blobal, el menu tiene un borde de 1 pixel por abajo de cada elemento y por arriba, es tan sencillo como añadir un borde por arriba y abajo, y en la misma clase poner un ligero:

margin-top: -1

Con lo que todos los elementos subirán un pixel de donde están, superponiéndose los bordes y dando el efecto de continuidad.

“Ese” Navegador

Casi la mitad del css de plax está reescrito para IE, a veces he ido aun mas allá y he tenido que cambiarlo completamente para que funcione, y la mayoría de veces es porque los elementos no salen bien colocados, cuando están demasiado pegados no es un problema, pero cuando es lo contrario?

Por ejemplo, el footer de plax (Esta plantilla), IE desplazaba el contenido 30 pixeles para abajo, tan sencillo como hacer:

margin-top: 0
_margin-top: -30
*margin-top: 0

Una pequeña explicación:
La primera linea simplemente ubica el footer arriba, debería sobrar, pero nunca está de mas remarcar lo obvio
La segunda (Precedida de _) Hace que IE suba el footer 30 pixeles, si lo que queremos es putear a los que usen IE, simplemente se ponen un par de ceros detrás
La tercera (Precedida de *) Corrige el fix para IE en IE7, ya que esta versión si respeta el css (Al menos ahí)

El próximo viernes, la parte 2

Requerimientos

Separador (Ver abajo)
Wordpress

Inciso - El separador

Si no quieres separar tus categorias, simplemente pon un   para separarlas, es posible que el código se confunda.

Paso 1, 2 y 3

Abrimos /wp-includes/template-functions-category.php, y mas o menos en la linea 99 nos encontraremos con la función the_category, la reemplazamos por

function the_category($separator = ”, $parents=”) {
$categoriiiiaslolwii2211 = get_the_category_list($separator, $parents);
if ( strrchr ( $categoriiiiaslolwii2211, “separadordetuscategorias” ) ) { $pluralsip = “s”; }
echo “Categoria$pluralsip: “;
echo $categoriiiiaslolwii2211;
echo $thelist;
}

Parece obvio lo que hay que poner en vez de separadordetuscategorias, pero por si no, es el separador que hayas aplicado a tus categorias.

En Wordpress, cuando estamos navegando por un post monopágina, arriba veremos unos enlaces a los siguientes posts, una de las cosas que se echan en falta es un link a la portada cuando se han acabado los posts.

Paso 1

Abre tu ftp, descarga el archivo /wp-includes/template-functions-links.php y ábrelo con un editor de texto cualquiera

Paso 2

En la linea 324 encontrarás la función referida a los últimos posts, haz un backup, aunque si algo falla siempre puedes bajar wordpress y subir ese archivo, asegúrate de que sea esa función y cambiala por:

function next_post_link($format=’%link &raquo;’, $link=’%title’, $in_same_cat = false, $excluded_categories = ”) {
$post = get_next_post($in_same_cat, $excluded_categories);
$title = apply_filters(’the_title’, $post->post_title, $post);
$string = ‘<a href="’.get_permalink($post->ID).’">’;
$link = str_replace(’%title’, $title, $link);
$link = $string . $link . ‘</a>’;
$format = str_replace(’%link’, $link, $format);
if ( !$post ) { $postsiguiente = ‘ <a href="http://cosaspoposas.com">Portada</a>’; }
echo $postsiguiente;
echo $format;
if ( !$post ) {
return; }
}

Obviamente, cambia cosaspoposas.com por donde esté tu blog, si tu navegación es al estilo de esta ( Los marcadores en el centro, en vez de a los lados), coloca echo $postsiguiente; debajo de echo $format;

Explicación

Además de incorporar mi xploit para dominar la blogosfera, Este código busca que exista un post (if ( !$post…), si no existe (O sea, si estamos viendo el último post), genera una variable con el texto que vamos a introducir ($postsiguiente =…) y por último la inserta en el código, si no hay variable no inserta nada, si la hay, añade “Portada”.

Pequeña pregunta al googlebot sobre los adsense de la foto

Desde cuando se ha hablado de “el fútbol españ” por aquí?

“Últimos Comentarios” Contraído

En vez de mostrar el nombre entero, solo muestra las siete primeras letras, para conseguirlo tienes que usar la función substr($titulopost, 0, 7); donde $titulopost es la variable que recibe el titulo del post, por ejemplo, en zap recent commented:

$posttitulono = $comm->post_title;
$posttitulowii = substr($posttitulono, 0, 7);
echo ‘<li title="’.$zeit.’"><a href="’.$comment_link.’" title="’.$zeit.’">’.$posttitulowii.’…</a> / ‘.$comm->comment_author.’</li>’;

[ironia]Nota: Los comentarios respecto al nombre que le he puesto a las variables serán borrados, y la ip del enviante baneada[/ironia]

Footer tableless

Ahora plax ya es 100% CSS y semántica, siempre que no contemos los align=center, claro :D, las columnas en css son unas listas desordenadas en bloque, lo cual hace el efecto de columnas, el html es el de una lista y el css es

li {
float: left;
width: 170px;
display: block;
}
ul {
margin-left: 0px;
padding-left: 0px;
list-style-type: none;
}

Cambia 170 por el ancho al que las quieras limitar, ya profundizaré mas en otro momento

Justify go home

He intentado leer uno de los posts, y la verdad, aunque justificado quede bonito, lo importante es la legibilidad, por eso la alineación vuelve a la normalidad.