Eliseos.net

Validatious Validar tus formularios sin Js

Alexis — Sat, 07 Nov 2009 23:24:06 +0000

Validatious es un forma de validar tus formularios sin necesidad de Javascript, aunque si ya cuentas con alguna librería, como jQuery o Mootols Validatious se puede integrar muy fácilmente con ellas.

Validatious puede validar un e-mail, URL’s, cantidad de caracteres mínimos y máximos y también validar campos personalizados.

Su implementación recae en el viejo querido y semántico HMTL por lo que lo encontraras muy fácil de utilizar.

La librería ya cuenta con soporte multi lenguaje y por lo tanto los controles y mensajes de errores son personalizables.

Multiples links en forma Drop Down con Pluralink

Alexis — Wed, 04 Nov 2009 20:39:28 +0000

Pluralink es un simple javscript plugin con un solo objetivo en mente: mostrar múltiples links dentro de un mismo anchor. Supongamos que tenes un oración en la que necesitas incluir tres links como referencia. La forma clasica seria crear tres links dentro de la oración. Pero con Pluralink lo que hacemos es incluir esos tres links dentro de uno solo con un bonito menu Drop Down.

Su integración es de lo mas sencilla, como así también su implementación. Una forma correcta de implementar Pluralink seria:

El poder de pluralink

Y por ultimo Pluralink cuenta con Plugin para Wordpress, por lo que su integración e implementación seran aun mucho mas sencillas.

Logra un codigo HTML valido en todas tus entradas

Alexis — Mon, 02 Nov 2009 23:02:45 +0000

Muchas veces cuando diseñas un Theme para un cliente y este no esta acostumbrado al lenguaje HTML es muy común que cometa errores un su sintaxis, como ser no abrir o cerrar las etiquetas correctamente o usar incorrectamente algunos elementos como div o span. Lo que trae como resultado un XHTML que no valida.

Mattvarone ha desarrollado una pequeña gran función que se encargara de limpiar y purificar el HTML que se genera en cada entrada por medio de htmLawed, un pequeño modulo que se encargara de limpiar el output de cada entrada.

Para llevar a cabo esta integracion solo debemos insertar estas lineas en nuestro archivo functions.php

include_once ( TEMPLATEPATH . '/htmLawed.php' ); // Este archivo tiene que residir en la carpeta de tu Theme.
function clean_the_content( $content )
{
$szPostContent = $content;
$szRemoveFilter = array( "~]*>\s?
~", "~]*>\s?~", "~]*>~", "~<\/font>~", "~]*>\s?~" );
$szPostContent = preg_replace( $szRemoveFilter, '' , $szPostContent);
$szPostContent = htmLawed($szPostContent);
return $szPostContent;
}
add_filter('the_content', 'clean_the_content');

Y por ultimo solo tenes que conseguir una copia de htmLawed y subir el archivo htmLawed.php a la carpeta en la que se encuentra tu Theme.

Ahora cada entrada sera purificada de errores gramaticales (HTML) y mostrara un código valido.

Un nuevo CSS Framework: The Fluid Grid system

Alexis — Fri, 30 Oct 2009 22:38:30 +0000

Día a día nos topamos con nuevos CSS Framework, hoy en día nos encontramos hablando de The Fluid Grid system un sistema que nos permite diseñar como con cualquier otro Framework, pero en este caso pensado en diseño fluido (Fluid).

Otro de los puntos fuertes de este Framework es el tema de la Tipografía, ya que en él tenemos incluidas todas las reglas y propiedades para mantener lo que se llama horizontal and vertical rhythm, osea co-relacion en nuestra tipografía horizontal y verticalmente.

En cuanto a su uso, tengo que decir que tienen mucha lógica, ya que trabaja con lenguaje semántico: Armamos un Grid basado en seis columnas solo con mencionar la clase six_column y a su vez dentro de esta, la cantidad de columnas que necesitamos. De esta forma siempre tendremos una lógica y estética en el diseño logrando un diseño fluido.

Socializa tu Blog al estilo Mashable con prettySociable

Alexis — Thu, 29 Oct 2009 00:32:34 +0000

prettySociable es una excelente opción para añadir un poco de interacción con tus usuarios. Si has visitado Mashable en este ultimo tiempo notaras que en cada link e imagen al posicionar el mouse sobre ellos nos permiten arrastrarlos a donde queremos compartir el link, como por ejemplo Twitter o Facebook.

prettySociable nos facilita lograr esta integración sin dolores de cabeza, solo debemos incluir a prettySociable y darles las instrucciones de como debe comportarse.

Si todavía no sabes de lo que estoy hablando podes ver este Demo y ver de que se trata.

Su uso es muy sencillo, solo debemos hacernos con una copia de prettySociable, jQuery y la hoja de estilo:

Para brindar un poco de soporte a IE6 incluiremos

Ahora solo resta inicializar prettySociable:

Para cada link que queramos compartir vía prettySociable solo debemos añadir rel=”prettySociable” que es su presentación por defecto. Por ejemplo:

Link a Compartir

Si queremos un Titulo personalizado solo debemos escribir:

Link a Compartir

Si indagamos un poco más podemos añadir mas sitios para compartir y personalizar las animaciones dentro de los siguientes parámetros:

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$.prettySociable({
animationSpeed: 'fast', /* fast/slow/normal */
opacity: 0.90, /* Value between 0 and 1 */
share_label: 'Drag to share', /* Text displayed when a user rollover an item */
share_on_label: 'Share on ', /* Text displayed when a user rollover a website to share */
hideflash: false, /* Hides all the flash object on a page, set to TRUE if flash appears over prettySociable */
hover_padding: 0,
websites: {
facebook : {
'active': true,
'encode':true, // If sharing is not working, try to turn to false
'title': 'Facebook',
'url': 'http://www.facebook.com/share.php?u=',
'icon':'images/prettySociable/large_icons/facebook.png',
'sizes':{'width':70,'height':70}
},
twitter : {
'active': true,
'encode':true, // If sharing is not working, try to turn to false
'title': 'Twitter',
'url': 'http://twitter.com/home?status=',
'icon':'images/prettySociable/large_icons/twitter.png',
'sizes':{'width':70,'height':70}
},
delicious : {
'active': true,
'encode':true, // If sharing is not working, try to turn to false
'title': 'Delicious',
'url': 'http://del.icio.us/post?url=',
'icon':'images/prettySociable/large_icons/delicious.png',
'sizes':{'width':70,'height':70}
},
digg : {
'active': true,
'encode':true, // If sharing is not working, try to turn to false
'title': 'Digg',
'url': 'http://digg.com/submit?phase=2&url=',
'icon':'images/prettySociable/large_icons/digg.png',
'sizes':{'width':70,'height':70}
},
linkedin : {
'active': true,
'encode':true, // If sharing is not working, try to turn to false
'title': 'LinkedIn',
'url': 'http://www.linkedin.com/shareArticle?mini=true&ro=true&url=',
'icon':'images/prettySociable/large_icons/linkedin.png',
'sizes':{'width':70,'height':70}
},
reddit : {
'active': true,
'encode':true, // If sharing is not working, try to turn to false
'title': 'Reddit',
'url': 'http://reddit.com/submit?url=',
'icon':'images/prettySociable/large_icons/reddit.png',
'sizes':{'width':70,'height':70}
},
stumbleupon : {
'active': true,
'encode':false, // If sharing is not working, try to turn to false
'title': 'StumbleUpon',
'url': 'http://stumbleupon.com/submit?url=',
'icon':'images/prettySociable/large_icons/stumbleupon.png',
'sizes':{'width':70,'height':70}
},
tumblr : {
'active': true,
'encode':true, // If sharing is not working, try to turn to false
'title': 'tumblr',
'url': 'http://www.tumblr.com/share?v=3&u=',
'icon':'images/prettySociable/large_icons/tumblr.png',
'sizes':{'width':70,'height':70}
}
},
tooltip: {
offsetTop:0,
offsetLeft: 10
},
popup: {
width: 900,
height: 500
},
callback: function(){} /* Called when prettySociable is closed */
});
});
script>

También podemos des-habilitar algunos sitios que necesitemos, por ejemplo:

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$.prettySociable();
$.prettySociable.settings.websites.facebook.active=false;
$.prettySociable.settings.websites.twitter.active=false;
$.prettySociable.settings.websites.delicious.active=false;
$.prettySociable.settings.websites.digg.active=false;
$.prettySociable.settings.websites.linkedin.active=false;
$.prettySociable.settings.websites.reddit.active=false;
$.prettySociable.settings.websites.stumbleupon.active=false;
$.prettySociable.settings.websites.tumblr.active=false;
});
script>

Y por ultimo, pero no menos importante prettySociable es compatible con la mayoría de los navegadores modernos (IE6 inclusive)

Mostrar las estadisticas de tus Feed con PHP

Alexis — Wed, 28 Oct 2009 23:42:16 +0000

Si estas buscando una forma rápida y sencilla de mostrar a tus lectores las estadísticas de tus Feeds, Theodin nos presenta una pequeña función que nos permitirá mostrarles a nuestros lectores una serie de datos y estadísticas de un Feed (Feedburner) dado.

Esta función trabaja PHP5 y utiliza simplexml_load_file para poder interpretar el XML que genera Feedburner.

Como primer paso para mostrar las estadísticas, debes tener “tildado” tu Feed como publico desde la pestaña publicize y activar el contador de Feed.

Ahora solo resta incluir nuestra función para mostrar las estadísticas:

function feedburner_stats($feed, $attribute) {
if ( !$feed ) { echo('[No Feed]'); } //user must pass in their URI
if ( !$attribute ) { echo('[No Attribute]'); }//user must pass in their attribute
$xmlobj = simplexml_load_file("http://feedburner.google.com/api/awareness/1.0/GetFeedData?uri=".$feed);
echo($xmlobj->feed->entry->attributes()->$attribute);
}
?>

El segundo argumento nos mostrara:

date
La fecha en la que el feed fue compilado
circulation
Cuantos lectores están suscritos
hits
La cantidad de Hits que recibio el feed
reach
A cuantos suscriptores llego el Feed

Y por ultimo tenemos que hacer la llamada:

<h1>Tengo<i> feedburner_stats('EliseosNey', 'circulation'); ?>i> suscriptores!<h1>

Listo, ahora tenemos un completo análisis de nuestro Feed en muy pocos pasos.

Por ultimo, te recomiendo que visites la pagina del autor donde encontraras un Demo de esta función junto con los archivos necesarios para personalizar tus estadísticas.

Compimi tu HTML en Worpdress

Alexis — Mon, 26 Oct 2009 22:56:42 +0000

Wordpress por defecto no comprime el HTML que “devuelve” a todos los que acceden a tu sitio. Por lo que el Output que envía se encuentra intacto. Una buena idea es comprimir ese output con la libreria zlib, con lo que lograras una compresión del orden del 75% aproximadamente.

Para lograr esto solo debes contar con zlib en tu servidor. Si no estas seguro de contar con esta extension, crea un archivo llamado test.php e incluye esta linea:

phpinfo(); ?>

Subí ese archivo a la raíz d tu directorio y dirígete a esa ruta, por ejemplo: mistio.com/test.php Cerciórate que zlib se encuentre habilitado (enable).

Por ultimo solo tienes que incluir este código en tu header.php (arriba de DOCTYPE)

ini_set('zlib.output_compression', 'On');
ini_set('zlib.output_compression_level', '1');
?>

Listo, Wordpress ahora enviara tu HTML comprimido. Para asegurarte que esto es verdad, puedes dirigirte a Port80Software.com para hacer un Test.

Visto en: WP Recipes

+130 Iconos para tus Aplicaciones de Iphone

Alexis — Mon, 26 Oct 2009 22:14:42 +0000

Glyphish nos acerca una colección de más de 130 iconos pensados para aplicaciones de Iphone. El Set cuenta con diseño muy cuidado y orientado a las Toolbars y Tabs dentro de las aplicaciones para Iphone.

Encontraras todos los iconos en un formato PNG con diferentes estilos para lograr una buena transicion con los efectos hover y select. Como bonus, este Set también incluye los archivos AI y PSD para que los adaptes a tus necesidades.

AD Gallery: Otra Galeria basada en jQuery

Alexis — Wed, 21 Oct 2009 23:01:00 +0000

AD Gallery es un plugin para jQuery que nos ofrece la posibilidad de crear una galería/showcase con innumerables opciones, un plugin ideal si tenes que mostrar una seguidilla de imágenes en tu sitio.

Básicamente AD Gallery tomo un lista desordenada y la transforma en esta increíble galería. Entre la cantidad de opciones que cuenta, vale la pena mencionar:

Posibilidad de elegir los métodos de transición de las imágenes
Interacción con las flechas del teclado para pasar imágenes
Botón para Anterior/Siguiente en la galería
Posibilidad de incluir el titulo y descripción de la imagen añadiendo simples atributos
Las imágenes se auto ajustan al DIV de la galería.

Podes encontrar un Demo de AD Gallery y todo la documentación necesaria en la pagina del autor.

Consejos para crear una hoja de impresion en CSS

Alexis — Wed, 21 Oct 2009 22:36:36 +0000

Muchas veces cuando se diseña un sitio uno de los detalles que se pasa por alto es preocuparnos por como lucirá una impresión del mismo. El diseño de impresión va a estar controlado por una hoja de estilo aparte en donde colocaremos todas nuestras reglas.

Una pregunta que muchos se hacen es si es realmente necesario contar con esta hoja de estilo. Si me preguntan a mi, la respuesta es sí, es necesario en cada sitio. Muchas veces nuestros lectores tienen intenciones de retener la información que les ofrecemos, y para esto recurren a la impresión. Por eso que mejor que brindarles una impresión amigable.

Introducción

Lo primero que debemos hacer es insertar nuestra hoja de estilo en nuestro Header de la siguiente forma:

Lo que esto significa es que la print.css solo sera “llamado” cuando se requiera una impresión.

Ok, pero que incluyo en esta hoja de estilo?

Básicamente esta hoja de estilo va a re-escribir las reglas de nuestra hoja original, podremos borrar todo lo que no consideremos redundante de imprimir, como por ejemplo (en Eliseos.net) el Sidebar, definir el tamaño de la fuente base, en lugar de usar px (pixel) usaremos pt (points).

Darle formato a nuestra fuentes.

Quizás el paso mas importante, en este paso vamos a decirle a nuestra hoja de estilo que haga las fuentes lo mas legible posible, para eso podemos usar usar:

body {

font:12pt "times new roman",times,serif;
background:none ! important;
color:#111 ! important
}

De esta forma nos aseguramos que el color siempre sea el negro y un tamaño base legible de 12pt.

Definir el tamaño de la impresión

Este es un paso optativo, ya que lo que vamos a definir el tamaño de container o wrapper. Tené en cuenta que los siguientes valores no son universales, tendrás que ajustarlos a tu diseño.

#content,#wrapper {

width:auto;
border:0;
margin:0 5%;
padding:0;
float:none !important
}

Le estaremos dando a nuestro wrapper un tamaño total de pagina ya que mas adelante eliminaremos nuestra Sidebar. Por eso que antes te mencione que este paso es optativo y debes tener cuidado cuando lo trabajes.

Remover lo innecesario

Como lo mencione anteriormente una acertada medida es no imprimir todo aqello que no sea necesario. Para llevarlo acabo solo tenemos que usar la propiedad display:none por ejemplo:

#nav,#sidebar,#header {

display:none
}

Saltos de pagina

Otra muy buena idea es usar los saltos de pagina para un mejor legibilidad. Estos saltos los podemos usar para que los comentario de una entrada se impriman en la hoja siguiente, o también que las notas de pie de paginas vallan a otra hoja.

#comments,#notas_al_pie {

page-break-before:always
}

Un poco de estilo a los encabezados.

Otro detalle mas para aumentar la legibilidad podría ser centrar nuestros encabezados y darles otra familia de fuente para resaltar.

h6,h5,h4,h3,h2,h1 {

font-family:"Helvetica Neue",Arial,"Lucida Grande",sans-serif
}
#header h1 {
text-align:center;
font-size:42pt;
font-style:italic;
margin:0
}

Hoja Final

Luego de ver cada estilo y sus propiedades nuestra hoja de impresión lucirá de la siguiente manera: