WebEstudio :: Blog de Diseño Web » SCRIPTS

10 plugins jQuery Muy útil para desarrolladores Web

Jorge Bravo — Wed, 14 Oct 2009 12:27:28 +0000

jQuery como plataforma de desarrollo es grande y vemos el resultado de esto cada día. Casi es difícil de creer pero cada vez que decido buscar un nuevo plugin jQuery para resolver una tarea concreta en mi trabajo me doy cuenta de que la comunidad proporciona constantemente nuevas soluciones de alta calidad de forma gratuita.

El número de contribuciones es muy alto y a mi como desarrollador esto me hace volver cada vez a por más. Supongo que a muchos desarrolladores les ocurrirá algo similar. A veces no somos conscientes del trabajo que todo esto implica y las horas de duro trabajo que conlleva. Muchas gracias a todos por gastar su precioso tiempo en la creación de cosas que todos podemos utilizar. A continuación una lista de 10 plugins de gran ayuda, que te puedes encontrar actualmente.

Form extensions
jQuery Form extensions es un pequeño plugin para ayudar en forma rapida en las tareas relacionadas con jQuery. Realmente simple, pero para muy útil para cualquier desarrollador, es muy bueno tener a mano para llevar a cabo tareas, especialmente si ya están encapsulados como este.

SimplePager – jQuery paging plugin
La premisa detrás de SimplePager es permitir la creación de la paginación o la configuración con el menor esfuerzo posible. Este plugin localiza los divs, párrafos, elementos de la lista o casi cualquier otro contenido. Simple pero muy poderoso!

El articulo original se encuentra en Ingles pero para el caso de este tipo de plugins, las guías son muy sencillas de seguir. En todo caso si hay alguno que os interese y necesitan alguna ayuda, postearla aquí en los comentarios para ver si les puedo ayudar de alguna manera.

Via: www.tripwiremagazine.com (Ingles)

Usar PHP para comprimir ficheros CSS

Jorge Bravo — Mon, 17 Aug 2009 08:33:47 +0000

Existen varias técnicas que usan PHP para optimizar los ficheros CSS y reducir el número de peticiones HTTP en el caso de que dispongamos de varios. La siguiente técnica es una variación de la de Reinhold Weber. Los CSS son incluidos pero no son eliminados los espacios en blancos, lo que facilita la depuración y el acceso al contenido mediante herramientas como Firebug.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

if(extension_loaded('zlib')){
ob_start('ob_gzhandler');
}
header ("content-type: text/css; charset: UTF-8");
header ("cache-control: must-revalidate");
$offset = 60 * 60;
$expire = "expires: " . gmdate ("D, d M Y H:i:s", time() + $offset) . " GMT";
header ($expire);
ob_start("compress");
function compress($buffer) {
// remove comments
$buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
return $buffer;
}
// list CSS files to be included
include('baseline.css');
include('styles.css');

if(extension_loaded('zlib')){
ob_end_flush();
}
?>

Via: www.webintenta.com

5 SNIPPETS muy útiles para PHP.

Jorge Bravo — Sun, 16 Aug 2009 08:01:45 +0000

Cinco Snippets sencillos pero bastante útiles para PHP. Todos los webmasters en general a medida que realizamos proyectos vamos acumulando trozos de código que solemos re utilizar a menudo en multitud de proyectos, estos trozos de código comúnmente llamados Snippets (En programación, snippet es una pequeña porción de código o texto de programación. Son utilizadas generalmente para minimizar la repetición de códigos, hacer más claros los algoritmos o permitir que una aplicación genere el código automáticamente.), son muy útiles y hay muchas webs incluso que se dedican a recolectar estos snippets y a separarlos en categorías.
algunos ejemplos ejemplo:
http://www.recortex.com
http://snippets.com
http://snippets.webeame.net

Mostrar una imagen aleatoria

1
2
3
4
5
6
7
8
9
10
11
12
13

//Crear una array con las distintas imagenes
$imagenes[0]='/imagenes/Cabecera1.gif';
$imagenes[1]='/imagenes/Cabecera2.gif';
$imagenes[2]='/imagenes/Cabecera3.gif';
$imagenes[3]='/imagenes/Cabecera4.gif';
$imagenes[4]='/imagenes/Cabecera5.gif';
$imagenes[5]='/imagenes/Cabecera6.gif';
// Elegimos un valor entre 0 y 5
$i=rand(0,5);
// Mostramos la imagen
print '.$imagenes[$i].'">';
?>

Función para quitar tildes de una cadena

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

function limpiar_acentos($s)
{
$s = ereg_replace(”[áàâãª]”,”a”,$s);
$s = ereg_replace(”[ÁÀÂÃ]”,”A”,$s);
$s = ereg_replace(”[ÍÌÎ]”,”I”,$s);
$s = ereg_replace(”[íìî]”,”i”,$s);
$s = ereg_replace(”[éèê]”,”e”,$s);
$s = ereg_replace(”[ÉÈÊ]”,”E”,$s);
$s = ereg_replace(”[óòôõº]”,”o”,$s);
$s = ereg_replace(”[ÓÒÔÕ]”,”O”,$s);
$s = ereg_replace(”[úùû]”,”u”,$s);
$s = ereg_replace(”[ÚÙÛ]”,”U”,$s);
$s = str_replace(”ç”,”c”,$s);
$s = str_replace(”Ç”,”C”,$s);
$s = str_replace(”[ñ]”,”n”,$s);
$s = str_replace(”[Ñ]”,”N”,$s);

return $s;
}
?>

Obtener la IP real de un visitante en nuestra Web

1
2
3
4
5
6
7
8
9
10
11

function getRealIP() {
if (!emptyempty($_SERVER['HTTP_CLIENT_IP']))
return $_SERVER['HTTP_CLIENT_IP'];

if (!emptyempty($_SERVER['HTTP_X_FORWARDED_FOR']))
return $_SERVER['HTTP_X_FORWARDED_FOR'];

return $_SERVER['REMOTE_ADDR'];
}
?>

Alternar colores con PHP

1
2
3
4
5
6
7
8
9
10
11

function row_color($i)
{
$bgcolor1 = "white";
$bgcolor2 = "yellow";

if ( ($i % 2) == 0 ) {
return $bgcolor1;
} else {
return $bgcolor2;
}
}

Aplicado en una función

\"".row_color($i)."\">\n";
print"\n";
print"\n";
print"\n";
print"\n";
}
}

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17	function display_workers() { global $db; for ($i=0, $n=count($db); $i< $n; $i++) { $worker_data = $db[$i]; $worker_name = $worker_data[0]; $worker_address = $worker_data[1]; $worker_phone = $worker_data[2]; print "
$worker_name	$worker_address	$worker_phone

Generar una contraseña aleatoria con PHP

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

/**
* function texto_aleatorio (integer $long = 5, boolean $lestras_min = true, boolean $letras_max = true, boolean $num = true))
*
* Permite generar contrasenhas de manera aleatoria.
*
* @$long: Especifica la longitud de la contrasenha
* @$letras_min: Podra usar letas en minusculas
* @$letras_max: Podra usar letas en mayusculas
* @$num: Podra usar numeros
*
* return string
*/
function texto_aleatorio ($long = 5, $letras_min = true, $letras_max = true, $num = true) {
$salt = $letras_min?'abchefghknpqrstuvwxyz':'';
$salt .= $letras_max?'ACDEFHKNPRSTUVWXYZ':'';
$salt .= $num?(strlen($salt)?'2345679':'0123456789'):'';

if (strlen($salt) == 0) {
return '';
}

$i = 0;
$str = '';

srand((double)microtime()*1000000);

while ($i < $long) {
$num = rand(0, strlen($salt)-1);
$str .= substr($salt, $num, 1);
$i++;
}

return $str;
}
?>

Efecto de despliege con CSS y JQuery

Jorge Bravo — Thu, 06 Aug 2009 21:49:41 +0000

Muchas veces necesitamos crear sitios atractivos para obtener mayores visitas. Podemos crear sitios atractivos de muy distintas formas; Diseñando páginas con un estilo extravagante, siendo muy minimalista, innovadores, o, utilizando únicamente JQuery y CSS.

En esta entrada os explicaré como crear un sencill0 efecto de “despliege” en una página, para mostrar, el feed RSS, por ejemplo, únicamente con CSS y JQuery.

Via : www.cssblog.es

Imágenes con esquinas redondeadas utilizando javascript

Jorge Bravo — Sat, 01 Aug 2009 10:44:56 +0000

Glossy.js 1.3 es una pequeña librería Javascript que nos permite agregar instantáneamente esquinas redondeadas a las imágenes de nuestra web, evitando de esta forma tener que caer en la edición individual de cada una de ellas. El efecto que lograremos será el de la imagen del post.

Este script ya es antiguo y seguro muchos ya lo conoceran pero no esta de mas hacer repaso para los que aun no lo han probado.

Utilización:

Primero descargamos la librería Glossy.js y la alojamos en nuestro servidor.
Hacemos el llamado a la librería agregando en nuestro encabezado, antes de la etiqueta < / header> lo siguiente:

1	<script src="glossy.js" type="text/javascript"></script>

Modo de uso:
Cuando deseamos usarla agregamos a nuestras imágenes la clase “glossy”
EJ:

1	<img class="glossy" src="images/foto.jpg" alt="" />

Otros Parámetros:
Radios
Podremos varias el radio del efecto agregando “iradius” seguido por el radio deseado en porcentaje clase “iradius25” (min=20 max=50 default=25 del radio) La foto que acompaña el post posee un radio de 50.
Ej:

1	<img class="glossy iradius25" src="images/foto.jpg" alt="" />

Color de fondo:
Podremos variar el color de fondo agregando “ ibgcolor” seguido por el color deseado expresado en hexadecimal: (max=ffffff min=000000 default=0)
EJ:

1	<img class="glossy ibgcolor000000" src="images/foto.jpg" alt="" />

Color de gradiente:
Podremos variar el color del gradiente agregando” igradient” seguido por el color deseado
(Max=ffffff min=000000 default=0)

1	<img class="glossy igradient000000" src="images/foto.jpg" alt="" />

Sitio Web: glossy.zip
Descarga: www.netzgesta.de

Panel de control deslizante con jQuery

Jorge Bravo — Tue, 28 Jul 2009 11:00:57 +0000

Panel de control deslizante con jQuery es XHTML totalmente valido y esta nueva versión trae soporte para transparencias PNG de serie, para IE6 con lo cual nos ahorrara unos cuantos dolores de cabeza a la hora de insertar en nuestro proyecto.

A diferencia de versiones anteriores de este mismo script, al deslizar el cuadro este no desplaza el contenido de nuestro sitio sino que lo solapa que a mi me parece mas vistoso que el desplazamiento de todo el contenido del sitio. También se a agregado el botón de login | registro que es que activa o desactiva la función de Slide.

Enlace: www.web-kreation.com
Demo: Slide demo

60 blogs de programación y diseño web en Español (I)

Jorge Bravo — Sun, 26 Jul 2009 16:12:53 +0000

Pues bien para todos los programadores y diseñadores web que anden buscando recursos, inspiración y snippets de código, esta lista de blogs de programación y diseño web que seguro les encantara.

Aquí les dejo los primeros 20 de esta serie de 3 partes 60 Blogs de programación y diseño web en Español.
El orden usado no refleja necesariamente su importancia o relevancia en el mundo del desarrollo o el diseño web. E intentado que la lista sea lo mas equitativa en cuanto a nacionalidades y tipos de aportaciones ya que todos entregan de algún modo información y/o algún tipo de recurso para diseñadores y programadores.

	URL de la Web	Autor

1	www.maestrosdelweb.com	Alma Fernández
2	www.anieto2k.com	Andrés Nieto
3	www.webmasterlibre.com	Alma Fernández
4	www.disenorama.com	Kemie Guaida
5	www.frogx3.com	Jorge Aldana
6	www.sentidoweb.com	Luis Sacristán
7	www.3wmk.com	Miguel Orense
8	www.labrujulaverde.com	Guillermo Carvajal
9	www.tufuncion.com	Manuel Gutiérrez Heredia
10	www.digilicious.cl	Juan Paulo Madriaza y COO.
11	www.htmllife.com	Walter Kobylanski
12	www.inconcientecolectivo.cl	Richard González
13	www.recortex.com	Juanjo Navarro
14	www.webintenta.com	Francisco López
15	www.martinpulido.com	Santiago Martin Pulido
16	www.creativosonline.org	actualidadblog.com
18	www.espinosa.nom.es	José Antonio Espinosa
19	www.blogvecindad.com	Adan Avelar Islas
20	www.blogmundi.com	Dimas

En el transcurso de la semana agregare los 20 siguientes, espero les sea de utilidad.

Ejemplo sencillo con Ajax – Comprobar disponibilidad de un nick

Jorge Bravo — Sun, 19 Jul 2009 21:45:40 +0000

Este es un ejemplo sencillo de ajax para comprobar si ya existe el nick del usuario en la base de datos cuando se va a registrar. El ejemplo claramente puede ampliarse para dejarlo mas profesional, pero lo realmente importantes es que apreciemos el potencial de este tipo de scripts.

La única librería que necesitamos descargar es prototype.js y llamarla en el HEAD de nuestra web:

1	<script src="/js/prototype.js" type="text/javascript"></script>

En el formulario, en el INPUT donde hay que introducir el nick de usuario pondremos un evento javascript onKeyUp llamando a nuestra función para comprobar si existe el nick. Usamos el evento onKeyUp para que se llame a la función cada vez que se introduzca una letra. También insertamos una sección SPAN, donde se escribirá si existe el usuario o no.

1	<input onkeyup="comprobar(this.value)" name="nickname" />

Aqui nuestra etiqueta SPAN para que muestre el resultado

1	<span id=”comprobar_mensaje” ></span>

Ahora definimos también la función “comprobar” dentro del HEAD:

1
2
3
4
5
6
7
8
9

La variable “url” es la dirección donde se encuentra el archivo php que comprobará si existe el nick en la base de datos.
En la variable “pars” escribimos las diferentes varibles que vamos a pasar al anterior php.
El primer parámetro de Ajax.Updater es la etiqueta html que se va a actualizar con el resultado de la función (diciendo si existe el usuario o no). El segundo parámetro es la variable “url” con la dirección del archivo php que ya hemos definido antes. En el tercer parámetro decimos el método por el que pasar las variables a la función (normalmente GET) y las variables que vamos pasar (que hemos definido en la variable “pars”).

El archivo ajax_comprobar_nick.php tendrá el siguiente contenido:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

// Que no se nos olvide incluir nuestro fichero con la conexion a la base de datos.
include("conexion.php");
$nick=$_REQUEST['nickname'];
$sql="SELECT nick FROM usuarios WHERE nick='$nick'";
$res=mysql_query($sql);
$total=mysql_num_rows($res);
if($total>0)
{
// El usuario existe en la Base de Datos
echo "Este nick está ocupado";
}
else
{
// Ese nick esta libre
echo "Nick libre";
}
>

Ahora cada vez que se escriba una letra en el campo nick del formulario, se llamará al fichero php anterior para comprobar si existe el nick en la base de datos y se actualizará el campo SPAN “comprobar_mensaje” con el resultado.

Archivos del ejercicio (673)
Articulo Original : NotasWeb