Zarpele! Linux and Software Libre » Webmaster

Mr.Icons, excelente buscador de iconos

Zarpele — Mon, 19 Apr 2010 13:20:12 +0000

Mr.Icons es un interesante motor de búsqueda que cuenta con una base de datos con mas de 125.000 iconos organizados en 400 packs.

Posee una interfaz muy sencilla y fácil de usar, además nos permite configurar la cantidad de imágenes que deseamos ver por pagina.

Enlace | http://www.mricons.com/
Visto en | Ubuntronics

PHP: Implementar ReCaptcha facilmente… [Parte 2]

Zarpele — Sun, 25 Oct 2009 04:08:54 +0000

Seguimos con la segunda parte de Implementar ReCaptcha fácilmente, si llegaste desde Google hasta aquí, te recomiendo que leas la primera parte http://www.zarpele.com.ar/2009/10/php-implementar-recaptcha-facilmente-parte-1/

Implementación

Que vamos a implementar?, vamos a hacer un pequeño formulario de contacto, con nombre, asunto, y texto.
Para ello tenemos documentación en recaptcha.net, una wiki y un foro.

Vale la pena aclarar, que la implementación que vamos a realizar es pura en PHP sin utilizar ningún CMS de por medio. Si utilizas algún CMS como WordPress o phpBB podes bajarte algún plugin para facilitar la implementación.

Ahora para realizar lo dicho anteriormente tenemos que Descargar librerías necesarias desde re-captcha.net, que se conectan con el site y validan el captcha…

1
2
3

 require_once('recaptchalib.php');
 $publickey = "your_public_key"; // nuestra clave publica, ojo con los espacios...
 echo recaptcha_get_html($publickey);

Debemos incluir dentro de nuestro formulario el siguiente codigo en php, donde $publickey es la clave publica que nos dieron al principio, en este caso la nuestra es:
6Ldf2wgAAAAAAGo7WRwiheGTwKEFIs5DiTmxzNQK

Nuestro formulario quedaría mas o menos así…

contacto.php

  
 
    
        Nombre: 
        Asunto: 
        Mensaje:         


require_once('recaptchalib.php');
$publickey = "6Ldf2wgAAAAAAGo7WRwiheGTwKEFIs5DiTmxzNQK"; // Este es nuestra clave publica
echo recaptcha_get_html($publickey);
?>

Listo nuestro formulario fue impreso con el código de re-captcha, suponemos que el fichero recaptchalib.php esta en el mismo directorio que contacto.php

verificarContacto.php

require_once('recaptchalib.php');
//Aqui pondremos nuestra clave privada, esta la obtenemos a la hora de registrar la cuenta en re-captcha
$privatekey = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
 
           if ($_POST["recaptcha_response_field"])
        {
                $resp = recaptcha_check_answer ($privatekey,
                                                $_SERVER["REMOTE_ADDR"],
                                                $_POST["recaptcha_challenge_field"],
                                                $_POST["recaptcha_response_field"]);
 
                if ($resp->is_valid) {
                        echo 'Re-Captcha correcto...';
 
                        // El texto ingresado es valido, aquí pondremos el código de mandar mensaje...
 
                } else {
                        // El texto ingresado es invalido, informamos el error al usuario...
                        echo 'El reCAPTCHA no se ha escrito correctamente. Intentelo de nuevo.';
                }

Listo deberíamos tener todo andando, aunque faltan algunos retoques…
Nota: Se debe verificar al integridad de las demás variables, para no sufrir algún error de tipo, SQL Injection, etc.

Cambiando el Tema y el Lenguaje

Para hacer estos cambios vamos a modificar un poco las librerías que bajamos anteriormente…
Abrimos el fichero recaptchalib.php, vamos a la linea 122 reemplazaremos este fragmento de codigo…

cambiamos esto…

        return '
 
	';

por esto…

        return '
        
        
	';

Y listo tenemos un theme distinto al aburrido default y en español la interfaz, no así las palabras del captcha.
Si quieren darle mas personalidad a su captcha les recomiendo que vean esta pagina oficial en la parte Look & Feel Customization

Saludos…

PHP: Implementar ReCaptcha facilmente… [Parte 1]

Zarpele — Fri, 16 Oct 2009 10:58:22 +0000

Este es un Tuto para Implementar un Captcha en Php con el servicio de ReCaptcha, ultima (si no es de las ultimas) compra de Google!
Disculpen la falta de frecuencia de las entradas, es que tengo muy poco tiempo mucho laburo y facultad.

Que es un Captcha?

Captcha es el acrónimo de Completely Automated Public Turing test to tell Computers and Humans Apart (Prueba de Turing pública y automática para diferenciar máquinas y humanos).

La típica prueba consiste en que el usuario introduzca un conjunto de caracteres que se muestran en una imagen distorsionada que aparece en pantalla. Se supone que una máquina no es capaz de comprender e introducir la secuencia de forma correcta por lo que solamente el humano podría hacerlo.

entonces…

Que es Re-Catpcha?

ReCAPTCHA es un herramienta que permite proteger nuestros proyectos web de script automatizados por la maquina, al ofrecernos una interfaz para poder combatir el SPAM, como les comente al principio, ultima adquisición importante de quiere utilizar ésta tecnología para ayudar en el proceso de digitalización de los servicios que ofrece como son: Google Books y Google News Archive Search.

Ingresando en la web www.recaptcha.net

Solo ingresamos a Re-Catpcha e ingresamos en https://admin.recaptcha.net/accounts/signup/ para registrar una nueva cuenta.

Registrándonos al site

Bueno, nada que decir acá, los datos están en ingles y son bastantes faciles…

Creando reCAPTCHA key

En este caso ingresamos el dominio de nuestra web, en este caso www.zarpele.com.ar.
La opción debajo Enable this key on all domains (global key), signfica que queremos usar la misma key para distintos proyectos web, en esta caso lo dejamos desactivado.

Tips:

De forma predeterminada, la clave de reCAPTCHA se limita al dominio especificado, y los subdominios para seguridad adicional. Una de las claves para las obras en foo.com test.foo.com.
Si usted desea utilizar su clave a través de un gran número de dominios (por ejemplo, si usted es un proveedor de hosting, OEM, etc), seleccione la opción clave global. Es posible que desee utilizar un nombre de dominio descriptivo, como “global-key.mycompany.com”
Si usted es dueño de varios nombres de dominio (foocars.com y footrucks.com), usted puede inscribirse en varias claves, o utilizar una clave global.

Los Tips, son bastantes claros no voy hacer mas inca pie en esto…

Clave Publica y Clave Privada

Los siguientes datos es importante tenerlos anotado en algún lugar ya que lo vamos a utilizar mas adelante, sino en el perfil (profile) de nuestra cuenta, podremos volver a verlos nuevamente.

Implementando…

Como va a quedar muy largo decidí hacerlo en dos partes, así que no te pierdas la segunda parte con la implementación y muchas mas cosas.

PARTE 2:

http://www.zarpele.com.ar/2009/10/php-implementar-recaptcha-facilmente-parte-2/

Redimensionar imagenes sin PHP

Zarpele — Thu, 24 Sep 2009 21:22:06 +0000

Esta entrada es opuesta a la anterior, para la gente que no quiere lidiar con PHP hay una solución quizás mas fácil y efectiva utilizando CSS

/*
  *@autor: Chuecko
  *@url: Zarpele.Com.Ar
  *Redimensionar Imagenes por ancho con CSS
*/
 
#imagen {
max-width:740px;
}

y listo si la imagen rebasa los 740 de ancho, nos mostrara la imagen con el mismo; en caso contrario nos mostrara la imagen con sus dimensiones normales.

Así deberán poner las imágenes que quieran redimensionar en caso de ser muy grandes…

Si interpretan un poco el código también pueden hacerlo con el alto (heigth), el código se los dejo a ustedes.

Aunque piensen que es un ejemplo boludo, no es muy conocido este método y lo quería compartir con todos los visitantes.

Saludos, comenta si te sirvió.

Url’s amigables con php y .htaccess

Zarpele — Sun, 06 Sep 2009 21:13:24 +0000

Esto es un mini tutorial para poder implementar url’s amigables con php y .htaccess de manera fácil y sencilla aplicable a cualquier ejemplo, si te sirvió o te gustó comenta que te pareció el aporte, bueno ahora el tuto…

A la hora de utilizar variables $_GET en php, como por ejemplo http://www.mipagina.com.ar/vernota.php?id=numero&title=titulo, nos damos cuenta que esta forma de acceder a nuestras paginas dinámicas traen una serie de inconvenientes.

Algunas ventajas

Aqui les dejo a mi entender las ventajas mas importantes de utilizar URL amigables de mayor a menor.

Si bien Google nos informa que su robot Googlebot puede indexar hasta dos variables a través de la URL, esto no es muy recomendable según expertos en el área de posicionamiento SEO.
Le mostramos información irrelevante y difícil de entender al usuario que usa la aplicación web, no es muy expresivo utilizar http://www.mipagina.com.ar/vernota.php?id=1552.
Son fáciles de recordar.
Son fáciles de escribir.
Y varios mas pero los antes descriptos son los mas importantes…

Manos a la obra

URL que tenemos: http://www.mipagina.com.ar/vernota.php?id=numero&title=titulo
URL que queremos: http://www.mipagina.com.ar/vernota/numero/titulo.html

Lo primero que vamos a hacer es entrar en esta pagina que te ayuda a configurar tu .htaccess mod_rewrite generator un Wizard para crear reglas Rewrite.

Una vez que ingresamos en la pagina nos pedirá la URL que tenemos como lo describimos mas arriba, y solo clickear en Generated It

Ahora nos aparecera The original URL (que es la recien ingresada) y The rewritten URL(que es la nueva URL amigable).

The original URL: http://www.mipagina.com.ar/vernota.php?id=numero&title=titulo
The rewritten URL: http://www.mipagina.com.ar/numero/titulo.html.html

Ahora explicare brevemente las opciones que aparecen debajo de las URL.

Parameters

Seleccione los parámetros que deben estar presentes en la dirección URL reescrita. De forma predeterminada, sólo se incluyen los valores de los parámetros. Puede añadir el nombre y valor a la dirección URL reescrita o eliminar un parámetro por completo.

Aquí no tocamos nada (en este caso), ya que en nuestro ejemplo aparecen los dos parámetros a utilizar…

Prefix

Es una herramienta para mejorar la forma de la dirección URL reescrita y aumentando su relevancia.

Aquí ingresamos dentro de la casilla vernota/ , ya que tenemos que llegar a la forma enunciada mas arriba.

Delimiters

Seleccionamos los delimitadores de acuerdo a su gusto.

Aqui lo dejamos como esta, ya que nuestro delimitador es la barra / .

Suffix

Puede usar el sufijo para hacer cumplir la extensión al resto de su sitio. También puede incluir una o más palabras clave.

En este caso dejamos el .html, tambien le podemos poner .php, .htm, .asp, .cualquiercosa. Pero por lo que e probado .html lo indexa bien los buscadores y me quede con este.

Finalizando

Listo ya hemos creado nuestra regla de reescritura, podemos observar mas abajo de la pagina nos muestra las dos URL con los parámetros coloreados, para evitar malos entendidos.

The original URL: http://www.mipagina.com.ar/vernota.php?id=numero&title=titulo
The rewritten URL: http://www.mipagina.com.ar/vernota/numero/titulo.html

Ahora solo nos queda hacer click en Done y copiar el texto que aparece en el textarea y agregarlo a nuestro .htaccess.

Les dejo la traducción aquí…

La regla mod_rewrite para su sitio está hecha. Por favor, siga las siguientes instrucciones para instalarlo.

Primero tendrá que comprobar si el archivo .htaccess existe en la raíz de su sitio web.
Si el archivo. htaccess existe, puede descargarlo desde su sitio web, añada las siguientes líneas al final del archivo, y cargar el archivo modificado de nuevo a su sitio. Por favor, haga una copia del archivo original. htaccess. Así que si algo sale mal, puede restaurar el archivo original.
Si el archivo .htaccess no existe, crear un nuevo archivo .htaccess y agregar las siguientes líneas a la misma. Luego subirlo a la raíz de su sitio web. Usted puede eliminar si algo va mal.

Añada las siguientes líneas de responsabilidad .htaccess:

RewriteEngine On
RewriteRule ^vernota/([^/]*)/([^/]*)\.html$ /vernota.php?id=$1&title=$2 [L]

Listo

Y listo ya tiene la regla creada y si URL amigable funcionando.
También les dejo una función en PHP para utilizarla en la parte de title.

/*
 
  *@autor: Chuecko
  *@url: Zarpele.Com.Ar
  *Devuelve un valor String para utilizarlo como URL amigable. 
 
 */ 
function urls_amigables($url) {
    // Transformamos todo a minúsculas
    $url = strtolower($url);
    //Reemplazamos caracteres especiales latinos
    $find = array('á', 'é', 'í', 'ó', 'ú', 'ñ');
    $repl = array('a', 'e', 'i', 'o', 'u', 'n');
    $url = str_replace ($find, $repl, $url);
    // Añadimos los guiones
    $find = array(' ', '&', '\r\n', '\n', '+');
    $url = str_replace ($find, '-', $url);
    // Eliminamos y Reemplazamos demás caracteres especiales
    $find = array('/[^a-z0-9\-<>]/', '/[\-]+/', '/<[^>]*>/');
    $repl = array('', '-', '');
    $url = preg_replace ($find, $repl, $url);
    return $url;
}

Paginas que no usan URL amigables

Estas paginas argentinas y del mundo no usan URL amigables, no se dan cuenta del potencial que estan perdiendo a la hora de Optimizacion SEO y en hacer una URL mas amigable al usuario…

http://www.lanacion.com.ar/nota.asp?nota_id=1171498&pid=7258991&toi=6476
http://diariocronica.com.ar/noticia.php?idnota=150498
http://www.atp.com.ar/verpost.asp?ID=125600
http://www.ucr.org.ar/nota.php?NOTAID=4139
http://www.diario.com.mx/nota.php?notaid=a8207b909217cef5686a7849ae671568
http://www.gacemail.com.ar/Detalle.asp?NotaID=10277
http://www.enplenitud.com/nota.asp?notaid=10744
http://www.latinspots.com/website/nota.php?notaid=13240
http://www.catamarcaya.com/notas.php?id_nota=12610

DIARIOS DE MI CIUDAD:

http://www.elheraldo.com.ar/ver_noticias.php?id_nota=34017
http://www.diarioelsol.com/noticias.php?ed=13842&di=0&no=64946
http://www.diariojunio.com.ar/noticias.php?ed=1&di=0&no=35278
http://www.horadigital.com.ar/noticia.asp?id=13632

Entradas Relacionadas:

Borrar Extensión .PHP con .htaccess

Saludos,
Si te sirvió deja un comentario…

Gestor de tipografías en linea

Zarpele — Thu, 27 Aug 2009 15:43:59 +0000

Una de las características comunes a casi todos los que realizan labores de diseño es haber juntado una enorme colección de tipografías instaladas en el sistema.

Para muchos, las herramientas que nos proveen los sistemas operativos se quedan cortas y muchas veces es complicado gestionar correctamente todas las fuentes.

myFontBook es un gestor gratuito de tipografías que podrás utilizar desde cualquier sistema operativo gracias a que se trata de una aplicación web.

Con myFontBook podrás visualizar todas tus tipografías, agregarles etiquetas para encontrarlas más cómodamente, marcar favoritas y visualizar datos importantes (kerning, baseline…).

myFontBook es gratuito pero aún así podrás probar la aplicación sin necesidad de registrarte, eso si, para guardar tus etiquetas, valoraciones y catálogo tendrás que crearte una cuenta.

Link:
http://www.myfontbook.com/

Google quiere que hagamos la web más rápida

Zarpele — Sat, 27 Jun 2009 19:30:56 +0000

Supongo que todos hemos tratado alguna vez de optimizar nuestros tiempos de carga para evitar que nuestros usuarios puedan irse a comer mientras cargan nuestros sitios ¿no?.

Ya hablamos hace tiempo de que los usuarios cada vez se esperan menos por un sitio, primero eran hasta 7 segundos pero el tiempo ha ido bajando.

Google quiere ahora animarnos a hacer la web más rápida, tanto como pasar las páginas de una revista, para ello han creado un sitio en el que podremos leer artículos sobre optimización, ver vídeos y descargar herramientas para ayudarnos.

El equipo de Google, además, ha creado una extensión para Firebug con la que evaluar la velocidad de nuestros sitios, al estilo de YSlow (creada por Yahoo!).

Si quieres ayudar a hacer la web más rápida puedes pasarte por el sitio de la campaña y aprender con algunos expertos, eso si tendrás que tener un nivel bueno de inglés para entender los tutoriales y artículos.

Visto en | Webmaster Libre

jQuery minimalista: 11 infaltables plugins con menos de 4K

Zarpele — Wed, 13 May 2009 14:49:25 +0000

jQuery hace que la vida de todo diseñador y desarrollador sea más sencilla. Pero esta razón muchas veces nos tentamos a utilizarlo todo el tiempo, haciendo más pesada la carga del sitio.

Combinar, comprimir y entregar los scripts al final de nuestra página ayuda mucho al departamento de requests HTTP. Para alivianar el peso puedes probar con estos 11 plugins jQuery de menos de 4k cada uno…

1. idTabs

Tamaño: 2.1K
Lo que hace: Permite realizar interfaces de pestañas simples y flexibles.
Descargar idTabs »

2. jCarousel Lite

Tamaño: 2.1K
Lo que hace: Ofrece un carousel (slider) con múltilples opciones.
Descargar jCarousel Lite »

3. Lazy Loader

Tamaño: 530B
Lo que hace: Plugin de cargador On-demand.
Descargar Lazy Loader »

4. Single Drop-Down Menu

Tamaño: 584B
Lo que hace: Menús de navegación desplegables básicos.
Descargar Single Drop-Down Menu »

5. jQModal

Tamaño: 2.8K
Lo que hace: Ventanas modales, también conocidas como “lightboxes”.
Descargar jQModal »

6. AutoTab

Tamaño: 1.6K
Lo que hace: Filtra las entradas de los formularios y nos lleva a los próximos campos.
Descargar AutoTab »

7. CSS Globe Tooltip

Tamaño: 479B
Lo que hace: Insinuaciones de planeo muertas sencillas.
Descargar CSS Globe Tooltip »

8. jGrowl

Tamaño: 4.1K
Lo que hace: Notificaciones estilo Growl para OS X.
Descargar jGrowl »

9. Cycle Lite

Tamaño: 3.5K
Lo que hace: Rota banners/imágenes.
Descargar Cycle Lite »

10. ToggleVal

Tamaño: 1.1K
Lo que hace: Borrar valores de las pistas de los elementos de los formularios al hacer clic.
Descargar ToggleVal »

11. Pop!

Tamaño: 872B
Lo que hace: Desplegables fáciles y accesibles.
Descargar Pop! »

Visto en | elwebmaster

6 soluciones libres para Galerías de imágenes

Zarpele — Wed, 31 Dec 2008 08:45:24 +0000

Si quieres montar tu propia galería alojada en tu servidor y completamente controlada por tí existen soluciones igualmente excelentes, gratis y libres. Hoy te traigo una pequeña selección de sistemas para alojar y mostrar tus imágenes online.

Gallery

Gallery, en cualquiera de sus dos ramas, es una galería muy configurable y completa. Dispone de múltiples opciones para editar tus fotos directamente en línea, mostrar presentaciones, ofrece un feed RSS para que la gente pueda suscribirse a tus galerías y dispone de varios módulos para integrarse con otros gestores de contenido.

http://gallery.menalto.com/

ZenPhoto

ZenPhoto es otro sistema muy completo, con soporte para imágenes y vídeo y numerosas características avanzadas pero con un interfaz muy sencillo e intuitivo.

http://www.zenphoto.org/

Plogger

Plogger es otra solución muy sencilla de utilizar pero bastante potente, genera miniaturas automáticamente de gran calidad, te permite visualizar tus imágenes en una cómoda presentación con javascript, genera URL bonitas y optimizadas tanto para visitantes como para buscadores…

http://www.plogger.org/

SPGM

Como su nombre indica, Simple Picture Gallery Manager es un sistema muy sencillo. Sólo subir las fotos a directorios y listo. Eso si, no realiza thumbnails automáticamente ni tiene demasiadas características extra, no obstante existen plugins que pueden extender sus funcionalidades un poco.

http://spgm.sourceforge.net

Coppermine Gallery

Coppermine es el gran behemot de las galerías de imágenes, infinitas características y funcionalidades que pueden hacerla menos atractiva debido a su peso y su inicial dificultad de manejo.

http://coppermine-gallery.net/

Pixelpost

Pixelpost más que una galería es un sistema de para crear fotologs, muy cómodo y sencillo de usar te permite subir tus imágenes, recibir comentarios y facilitar la suscripción a tus visitantes mediante RSS. Sin duda no tiene nada que envidiar a los servicios alojados por terceros y todas la ventajas de gestionarlo tu mismo, sobre todo la de personalizar absolutamente tu diario en imágenes.

http://www.pixelpost.org/

Visto en | Marvin & Familia

Saludos, se libre…