Eliseos.net

CSS3 Selectors para Internet Exploerer con Selectivizr

Alexis — Mon, 06 Sep 2010 20:02:45 +0000

Selectivizr es una librería con la cual podemos emular muchos de los pseudo elementos y selectores presentes en CSS3 dentro de Internet Explorer 6-8. Como bien los debes saber el soporte para CSS3 dentro de IE es casi nulo, por lo que esta es una buena opción a tener en cuenta a la hora de desarrollar un sitio y brindar la máxima compatibilidad entre navegadores posible.

Solo debemos incluir la libreria en nuestro proyecto y Selectivizr realizar todo el trabajo por nosotros, añadiendo soporte para 19 pseudo classes y pseudo elementos. Selectivizr trabaja automáticamente una vez incluido y no necesita de ningun tipo de conocimiento en javascript para su funcionamiento, pero depende de fondo de otra librería, como ser jQuery, Mootools, etc.

En caso de que javascript se encuentre desactivado, podemos realizar un fallback mediante el tag

Si te encuentras trabajando con múltiples librerías, Selectivizr seleccionara la más conveniente para brindar la mayor compatibilidad posible para los usuarios de Internet Explorer.

bxCarousel: Un carrusel para jQuery Alexis — Fri, 03 Sep 2010 23:24:47 +0000 bxCarousel es otro carousel para jQuery bastante avanzado y simple de implementar a la vez. Con este plugin podemos controlar el numero de elementos a mostrar, cuantos elementos se animaran al mismo tiempo, especificar el auto arranque del carousel y manejar los controles que se mostraran en él. bxCarousel debe ser aplicado a una lista desordenada para que funcione, y po supuesto puede animar cualquier elemento, no solo imágenes. Implementación HTML <ul id="example1"> <li>first piece of content</li> <li>second piece of content</li> <li>third piece of content</li> <li>fourth piece of content</li> <li>bxCarousel can accept an unlimited number of elements</li> </ul> jQuery $(document).ready(function(){ $('#example1').bxCarousel({ display_num: 4, move: 2, prev_image: 'images/icon_arrow_left.png', next_image: 'images/icon_arrow_right.png', margin: 10 }); }); Por ultimo bxCarousel se encuentra bajo una Licencia GPL. Efecto llamativo en el hover con CSS3 Alexis — Fri, 03 Sep 2010 00:03:07 +0000 Hace unos días atrás un lector me preguntaba como lograba el efecto que utilizo en el hover en cada link aquí en Eliseos.net. No se utiliza jQuery ni nada por el estilo, es solamente CSS3 lisa y llanamente. Por eso me decidí a escribir este tutorial. Demo | Descargar CSS3 Hover (8) Primer ejemplo Vamos a recrear el efecto que utilizo aquí en mi blog, esquinas redondeadas y un color en el background con una sutil transición. Para este efecto solo vamos a necesitar hacer uso de: transition-duration y border-radius. Nuestro estilo: #hover1 a{ transition-duration: .85s; -o-transition-duration: .85s; -moz-transition-duration: .85s; -webkit-transition-duration: .85s; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; background: #F5F4EB; color: #996633; text-decoration: underline; display: inline-block; padding: 2px 4px; } #hover1 a:hover{ background: #996633; color: #fff; text-decoration: none; } Como queremos que se aprecie el color de fondo en la transición lo importante es darle un poco de espacio al link a través del padding. Segundo Ejemplo Para este caso vamos a buscar un efecto “lupa” es decir que la animación en el hover muestre el link en una escala superior en un 20%. Solo tenemos que usar: transition con ease-out y transform: scale. Nuestro estilo: #hover2 a{ color: #996633; padding: 0px 5px; -webkit-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; background: none; display: inline-block; overflow: visible; } #hover2 a:hover{ color: #996633; -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); text-decoration: none; z-index: 120; } La animación permitirá ver un efecto lupa al posicionar el mouse y volverá a su estado original con un sutil transición. Notas Estos efectos no son compatibles con todos los navegadores ya que CSS3 no se encuentra estandarizado, de momento solo es compatible con Firefox 4.0, Chrome 8.0, Safari 5 y Opera 10.7. Si lo ves con otro navegador no podrás apreciar las transiciones y solo veras un hover comun, por asi llamarlo. Podes experimentar cambiando los valores en las transiciones para ajustar los tiempos y el comportamiento a tu gusto. Utiliza tus librerias favoritas con Cached Commons Alexis — Tue, 31 Aug 2010 23:47:42 +0000 Cached Commons es una colección de librerías en javascript hosteadas en Github con la gran ventaja de ya encontrarse comprimidas, optimizadas y posiblemente ya se encuentran en tu cache. La idea de fondo es linkear directamente estas librerías en nuestro proyecto y usar Github como un CDN. Con todo esto estaremos ganando estabilidad y performance. Cada libreria se encuentra optimizada y comprimida con Gzip. El proyecto cuenta con mas de 100 librerías listas para usar, en el caso que no encuentres la que necesitas siempre puedes pedirle a Cached Commons que la incluyan en un futuro. Un Tweet Button mas rapido Alexis — Mon, 30 Aug 2010 20:04:59 +0000 Como lo debes saber hace ya unas semanas atrás salio el botón oficial de Twitter para compartir tus entradas a lo largo de la red, es mas aquí en Eliseos ya he hablado de como como insertar el Tweet button oficial en WordPress. Esta ves desde webresourcesdepot nos acercan una versión no oficial que gana en performance. Como el botón oficial hace un request por cada impresión, puede resultar un poco “no practico” cuando queremos tener una sitio lo más veloz posible. Este nuevo botón no realiza ningún request hasta que no se hace click. Una vez hecho click el botón, este enviá desde el lado del servidor el titulo y la URL a Twitter para que el lector envié su Tweet. Sus ventajas son que no carga ningún tipo de JS extra en tu sitio y actuá de forma pasiva hasta que se hace click, lo que nos da una mejor performance. El botón al momento de enviar el tweet crea un URL corta con el API de Bit.ly si existe algun tipo de error, creara otra URL con Tinyurl, y en caso de que surja otro error enviara la URL original de la entrada. Por el otro lado como no trabaja con ningún script no es posible mostrar el numero de retweets. En webresourcesdepot encontraras un Demo, junto con el código necesario para implementar el botón y también las instrucciones para que lo implementes en tu instalación de WordPress. Muestra tus entradas fuera de la instalacion de WordPress Alexis — Thu, 26 Aug 2010 03:09:02 +0000 Hay veces que necesitamos mostrar data de una instalación de WordPress pero nos encontramos fuera de WordPress. Por ejemplo en nuestro index tenemos un archivo HMTL con la presentación de nuestra empresa, y en la carpeta Blog tenemos la instalación de WordPress. Y lo que necesitamos mostrar es en nuestro index los últimos post que escribimos en el Blog. Una salida poco elegante seria embeber el feed de nuestro Blog y luego hacer el pasaje, pero los chicos Cool hacemos otra cosa, lo hacemos mas simple, usamos: wp-load.php que nos permite acceder a la info de WordPress sin sobresaltos. Supongamos que en nuestro index queremos mostrar las ultimas 6 entradas que se escribieron en el Blog, solo necesitamos incluir estas lineas donde necesitamos mostrar las entradas: require( '../blog/wp-load.php' ); //ruta a wp-load.php // Asegurate que la ruta sea la correcta echo 'Últimos post desde el Blog '; echo ''; $number = 6; // cantidad de entradas a mostrar $recent_posts = wp_get_recent_posts($number); // obtener los post por ID y ordenar de manera descendente foreach($recent_posts as $post){ echo '.get_permalink($post["ID"]).'">'.$post["post_title"].' '.$post["post_excerpt"].' '; } echo ' '; ?> Como lo podes ver estoy incluyendo solo la intro de cada post, es decir el excerpt, pero si lo necesitas podes cargar todo el contenido del post, solo debes reemplazar post_excerpt por post_content. Este método responde a todas las variables localizadas dentro de la funcion get post() por lo que podemos mostrar casi cualquier data que necesitemos, por ejemplo: la fecha, los tags, cantidad de comentarios, etc. Código ligeramente modificado de Snipplr Fechas relativas y español dentro de Tumblr Alexis — Tue, 24 Aug 2010 02:07:30 +0000 Una de las desventajas de trabajar en Tumbrl es que no contamos con la posibilidad de trabajar en Español nativamente, por lo que las fechas y otras secciones se encontraran siempre en ingles (también creo que en otros idiomas, pero nunca en español). Justo hoy @AGUCAMPOS preguntaba como tener fechas en español dentro Tumblr. Hace unos días les comentaba de la tenencia a usar fechas relativas en lugar de las fechas comunes, es decir mostrar “hace 4 dias” en lugar de “19 de Agosto” por decir un ejemplo. En Tumblr contamos con el bloque {TimeAgo} pero como lo mencione arriba, siempre se encuentra en ingles. La idea es obtener esa fecha relativa en español. Una manera nativa de lograrlo seria a través del API de Tumblr e ir obteniendo los valores de las fechas y traducirlos “on the go”, pero podría ser un tanto confuso para algunos. Por ese decidí usar el plugin Timeago para jQuery que nos sirve para lo que vamos a buscar. Consideraciones Previas Como saben Tumblr trabaja en bloques, por lo que una fecha puede lucir de la siguiente forma: <span> Hoy es {DayOfWeek}, {DayOfMonth} {Month} {Year} </span> Lo que se leería: <span> Hoy es Wednesday, 23 July 2010 </span> Como buscamos trabajar con fechas relativas, lo ideal seria que podamos leer (en español): <span> hace un mes atrás </span></p> Una vez que entendemos como trabaja Tumblr con las fechas podemos continuar. Primer paso El plugin Timeago para poder darnos fechas relativas exactas necesita que se le proporcione un timestamp ISO 8601. Como Tumblr no lo proporciona, lo vamos a crear. Un timestamp ISO_8601 luce de la siguiente forma: YYYY-MM-DDTHH:MM:SSZ | 2010-08-22T21:20:42Z Lo primero que vamos necesitar, es hacer una ligera modificación al formato de la fecha que queremos mostrar dentro de tu Theme. Para esto solo debemos seguir el siguiente formato: <span class="timeago" title="{Year}-{MonthNumberWithZero}-{DayOfMonthWithZero}T{24HourWithZero}:{Minutes}:{Seconds}Z"> {Month} {DayOfMonth}, {Year} </span> Lo importante aquí es declarar un class .timeago y respetar el formato de la fecha en la etiqueta title. Dentro del anchor volví a declarar la fecha para que en caso de que Javascript se encuentre desactivado podamos ver la fecha original (en ingles). Segundo paso Una ves hechos los ajustes a nuestro titulo, necesitaremos hacer el llamado correspondiente al plugin: dentro de nuestro <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"> </script> //jQuery <script src="http://timeago.yarp.com/jquery.timeago.js" type="text/javascript"></script> //Timeago.js Y la configuración necesaria para que las fechas nos figuren en español <script type="text/javascript"> jQuery(document).ready(function () { jQuery.timeago.settings.strings = { prefixAgo: "hace", prefixFromNow: "dentro de", suffixAgo: "", suffixFromNow: "", seconds: "menos de un minuto", minute: "un minuto", minutes: "unos %d minutos", hour: "una hora", hours: "%d horas", day: "un día", days: "%d días", month: "un mes", months: "%d meses", year: "un año", years: "%d años" }; jQuery("span.timeago").timeago();//definimos nuestro anchor, para este ej: }); script> Solo debes indicar que anchor estarás usando, guardar los cambios en tu Theme y ahora tus fechas deberían estar en un formato relativo y en español. Ahora cada vez que entres a Tumblr veras una fecha como: <span> hace menos de un minuto </span> <span> hace 3 días </span> <span> hace un mes atrás </span> <span> hace un año atrás </span> A mi entender esto es una solución temporaria, ya que creo que dentro de poco podremos contar con Tumblr en español, dado ya hay varios idiomas oficializados aparte del ingles, solo falta el español. Un CAPTCHA condicional para WordPress Alexis — Mon, 23 Aug 2010 21:16:37 +0000 Seguramente en tu Blog tendrás algun tipo de plugin Anti-Spam, en mi caso uso desde que comencé aquí en Eliseos utilizo Akismet. Uno de los problemas de Akismet o Typad AntiSpam es que ocasiones nos suelen dar “falsos positivos” es decir comentarios que son marcados como Spam, pero en realidad no lo son. Generalmente los que usamos Akismet tendemos a revisar los comentarios marcados como Spam de ves en cuando para ver si existen estos “falsos positivos”. Con el plugin Conditional CAPTCHA nos evitamos de tener comentarios marcados como Spam, cuando no lo son. Como? Simple, el plugin introduce un CAPTCHA condicional, es decir: Si Akismet o TypePad AntiSpam detectan un comentario como Spam, el plugin mostrara un CATPCHA para verificar que el que comenta es humano. Si fallan en el CAPTCHA el plugin moverá el comentario a la papelera o lo borrara (configurable). Si se introduce el CAPTCHA correcto el comentario se aprobara o quedara en la cola de revision (configurable). Y aquellos “comentadores” validos no verán ningún tipo de CAPTCHA. El CAPTCHA que utiliza este plugin es uno muy simple, pero si lo queremos podes usar el famoso reCAPTCHA para contar con mas seguridad. El único requerimiento que debes cumplir es contar con Akismet o TypePad AntiSpam instalados para que el plugin pueda funcionar. Akismet and TypePad AntiSpam Fechas mas amigables en WordPress Alexis — Fri, 20 Aug 2010 22:54:37 +0000 Hay una pequeña tendencia en la red a usar fechas relativas en lugar de fechas comunes para hacer nuestro sitio un poco mas user-friendly. Hace un tiempo atrás les explicaba como trabajar con fechas relativas en WordPress mediante un método muy sencillo, pero quizás un tanto limitado. Hoy, desde WPCandy nos comentan sobre un plugin para llevar esas fechas relativas a un escalón más, y así tener mas control sobre las mismas. La idea de este plugin es cambiar el formato de la fecha original, por ejemplo: Posted August 19, 2010 A una mas amigable: Posted yesterday Una vez instalado el plugin y hecho su llamado correspondiente, la fecha se reflejara según el periodo de tiempo transcurrido, por ejemplo: Más de 3 años = "quite a long while ago..." Más de 6 meses = "about half a year ago" Más de una hora = "freshly baked" Y asi en adelante. Para integrarlo en nuestro Theme solo debemos reemplazar la fecha original que queremos sobre-escribir, generalmente: the_time('d M, Y'); ?> Por nuestra nueva fecha: wp_date_in_a_nice_tone(); ?> Este es un plugin básico, pero poderoso. Digo básico por que no cuenta con un panel de control, por lo cual para tener nuestras fechas en castellano, vamos a necesitar editar el plugin por nosotros mismos; pero es algo que solo nos lleva unos minutos. Eliminar tags en desuso dentro de WordPress Alexis — Wed, 18 Aug 2010 03:52:49 +0000 Una de las buenas costumbres que hay que tener en cuenta para preservar y mantener en buena salud de la instalación de WordPress es la usar la menor cantidad de Tags posibles. Para algunos personas esto es muy fácil de llevar, pero otras personas tienden a etiquetar en cantidades astronómicas y con esto llenar la base de datos con excesivas tablas. Con esta pequeña consulta SQL lo que va a hacer es deshacernos de todos aquellos Tags que no se encuentran en uso para contribuir al bienestar de nuestra base de datos. Una vez logueado en phpMyAdmin y dentro de la base de datos de nuestra instalación generaremos la siguiente consulta: DELETE a,b,c FROM wordpress.wp_terms AS a LEFT JOIN wordpress.wp_term_taxonomy AS c ON a.term_id = c.term_id LEFT JOIN wordpress.wp_term_relationships AS b ON b.term_taxonomy_id = c.term_taxonomy_id WHERE ( c.taxonomy = 'post_tag' AND c.count = 0 ) En el ejemplo de arriba estoy haciendo referencia a una base de datos llamada simplemente wordpress y cuyo prefijo de instalación es wp_ Obviamente vas a necesitar reemplazar el nombre de la base de datos por la tuya, como así también el prefijo (en caso que lo hallas cambiado durante la instalación de WordPress). Como se puede apreciar count = 0 hace referencia a Tags que no están en uso, si lo querés poder cambiar este valor a 1 y así eliminara Tags que solo se usaron una sola vez. Como siempre digo: Cuando trabajamos con este tipo de consultas SQL siempre, pero siempre realiza un backup de la base datos en caso de que algo no salga como lo esperamos. Visto en los foros de WordPress