codeando.net

BestWebFonts

Jose — 2012-09-20T16:31:00+01:00

Hoy os recomendamos una excelente herramienta que nos facilitará la tarea de escoger tipografías o fuentes para nuestros proyectos web: BestWebFonts.

Aquí podremos navegar por las mejores tipografías de Google Fonts, además de visualizarlas y descargar el código necesario para utilizarlas.

Una excelente idea y una herramienta realmente útil.

http://www.bestwebfonts.com/

Freetile.js: Crea muros estilo Pinterest de una forma r�pida y sencilla

Jose — 2012-09-13T09:40:00+01:00

Hoy presentamos otro plugin jQuery que nos permitirá crear diseños al más puro estilo Pinterest, con apenas unas pocas líneas de código: Freetile.js

http://yconst.com/web/freetile/

Avgrund Modal: un plugin jQuery para popups diferente

Jose — 2012-09-04T18:15:00+01:00

Os presento un plugin jQuery para generar diálogos o popups con unos interesantes efectos:

http://labs.voronianski.com/jquery.avgrund.js/

Todo sobre jQuery: Plugins, Tutoriales y Recursos

Jose — 2010-10-15T16:44:00+01:00

Una excelente recopilación de plugins, tutoriales y técnicas de jQuery:

http://www.noupe.com/jquery/all-about-jquery-plugins-tutorials-and-resources.html

Ultimate CSS Gradient Generator

Jose — 2010-10-11T13:22:00+01:00

Desde ColorZilla nos traen un estupendo generador de gradientes CSS(3):

Disfrutadlo

Formulario de login desplegable con jQuery y CSS

Jose — 2009-02-03T15:50:00+01:00

Hola de nuevo, esta vez hemos estado más tiempo del que habríamos querido sin actualizar, pero aquí estamos de nuevo. Hoy vamos a explicar cómo hemos implementado el nuevo formulario de login (y de registro) que podéis ver si pulsais sobre el enlace que deberíais ver en la parte derecha de la cabecera y que está basado en el que podéis encontrar en este estupendo post de NETTUTS.

Bueno, para empezar crearemos la estructura HTML:

<div id="wrapper">

    <div id="panel">

        <div id="panel_contents">

        </div>

    </div>

    <div id="show_button"><a href="#">Login</a></div>

    <div id="hide_button"><a href="#">Esconder</a></div>

</div>

Como podéis ver, el código HTML es totalmente limpio, ni siquiera los enlaces llaman a funciones javascript (esto lo arreglamos luego gracias a las virtudes de jQuery). El contenido del panel irá, como ya habreis supuesto, en #panel_contents; en codeando.net hemos decidido incluir dos formularios, el de login y el de registro, pero cada uno puede colocar lo que desee.

El siguiente paso, será definir los estilos básicos (visibilidad, tamaño y posicionamiento):

#wrapper{

	text-align: center;

}

 

#toppanel {

	position: absolute;

	top: 134px;

	width: 612px;

	z-index: 25;

	text-align: center;

	margin-left: auto;

	margin-right: auto;

}

 

#panel {

	width: 612px;

	position: relative;

	top: 1px;

	height: 400px;

	margin-left: auto;

	margin-right: auto;

	height: 0px;

	z-index: 10;

	overflow: hidden;

	text-align: left;

}

 

#panel_contents {

	height: 100%;

	width: 616px;

	position: absolute;

	z-index: -1;

}

 

#show_button {

	position: relative;

	top: -30px;

	left: 460px;

}

 

#hide_button {

	position: relative;

	font-size: 90%;

	font-weight: bold;

	z-index: 26;

	margin-top: -36px;

}

Por supuesto, el aspecto y el posicionamiento final dependerá de vuestras necesidades de diseño; este ejemplo está basado en la implementación que hemos hecho en codeando.net.

Y por último el código javascript que hará que funcione nuestro panel desplegable:



<script type="text/javascript"><!--

	$(document).ready(function() {

		$("div#show_button").click(function(){

			$("div#show_button").toggle();

			$("div#panel").animate({

				height: "460px"

			}, "fast", "swing", function() {$("div#hide_button").toggle();});

 

		});

 

		$("div#hide_button").click(function(){

			$("div#hide_button").toggle();

			$("div#panel").animate({

				height: "0px"

			}, "fast", "swing", function(){$("div#show_button").toggle();});

 

		});

 

	});

--></script>

Y con esto ya deberíamos tener nuestro panel funcionando, todo comentario será bien recibido. En otra entrega veremos cómo implementar un sistema de registro de usuarios con activación por email.

Abstracci�n de bases de datos (II)

Jose — 2008-12-17T15:58:00+01:00

En la segunda entrega de esta serie, vamos a implementar métodos para la extracción y manipulación de datos. Comenzaremos con las funciones de acceso a datos, que serán las siguientes:

getrow() nos devuelve un array con todos los campos de un registro determinado.

getassoc() como getrow() pero los índices del array son una cadena con el nombre del campo.

getarrayassoc() nos devuelve un array multidimensional que contiene un rango de registros, cada uno de los cuales con todos sus campos en un array asociativo.

<?php

 

	public function getrow( $row = 0, $query = \'main\' ) {

 

		$return = false;

 

		for ($ct=0;$ct<$this->queries[$query][\'numfields\'];$ct++) {

			$return[$ct] = $this->get($row, $ct);

		}

 

		return $return;

 

	}

 

	public function getassoc( $row = 0, $query = \'main\' ) {

 

		$return = false;

 

		for ($ct=0;$ct<$this->queries[$query][\'numfields\'];$ct++) {

			$return[$this->queries[$query][\'fields\'][$ct][\'name\']] = $this->get($row, $ct);

		}

 

		return $return;

 

	}

 

	public function getarrayassoc( $start = 0, $end = 0, $query = \'main\' ) {

 

		$return = false;

 

		if ($end == 0) {

			$end = $this->queries[$query][\'numrows\'];

		}

 

		for ($ctr=$start;$ctr<=$end;$ctr++) {

			$return[$ctr] = $this->getassoc($ctr, $query);

		}

 

		return $return;

 

	}

 

?>

Con estas funciones ya tenemos solucionados nuestros requerimientos de acceso a datos, ahora vamos con las funciones que nos permitirán manipularlos:

insert() nos facilitará la tarea de insertar nuevos datos en una tabla.

Con update() podremos modificar registros.

delete() será la función que utilizaremos para eliminar registros.

<?php

 

	public function insert( $table, $fields, $values = false, $query = \'main\' ) {

 

		$return = false;

 

		if ($table !== false) {

			if (!$values) {

				$qry = \'INSERT INTO \' . $table . \' VALUES ( "\' . implode( \'", "\', $fields ) . \'" )\';

			} else {

				$qry = \'INSERT INTO \' . $table . \' ( "\' . implode( \'", "\', $fields ) . \'" )\' . \' VALUES ( "\' . implode( \'", "\', $values ) . \'" )\';

			}

			$return = $this->query( $qry, $query )

		}

 

		return $return;

 

	}

 

	public function update( $table, $fields, $values, $where = \'1=1\', $query = \'main\' ) {

 

		$return = false;

 

		if ($table !== false) {

			$qry = \'UPDATE \' . $table . \' SET \';

			$tot = count( $fields );

			for ($ct=0;$ct<$tot;$ct++) {

				if ($ct > 0) $qry .= \', \';

				$qry .= $fields[$ct] . \'=\' . \'"\' . $values[$ct] . \'"\';

			}

			$qry .= \' \' . $where;

			$return = $this->query( $qry, $query )

		}

 

		return $return;

 

	}

 

	public function delete( $table, $where = \'1=1\', $query = \'main\' ) {

 

		$return = false;

 

		if ($table !== false) {

			$qry = \'DELETE FROM \' . $table . \' \' . $where;

			$return = $this->query( $qry, $query );

		}

 

		return $return;

 

	}

 

?>

Gracias a estas funciones, nuestra clase comienza a ser operativa y ya podemos empezar a usarla en nuestros proyectos (de momento, sólo contra bases de datos MySQL; en las siguientes entregas, entre otras cosas, veremos lo sencillo que resulta añadir otros motores de bases de datos)

Hoy, para terminar, vamos a mostrar algún ejemplo de uso de nuestra nueva clase:

<?php

 

	require \'dblib.php\';

 

	#

	# Nos conectamos al servidor "host", con el usuario "usuario" y password "password"

	# y seleccionamos la base de datos "base_de_datos". El cuarto parámetro de la

	# cadena de conexión le dice a la clase que debe realizar la conexión con el servidor

	# en el momento de ser creada.

	#

	$db = new MyDBLayer( \'base_de_datos\', \'host@usuario@password@true\' );

 

	#

	# Lanzamos un query sobre la base de datos y recibimos los datos en un array.

	#

	$db->query( \'SELECT * FROM coches\' );

 

	if ($db->queries[\'main\'][\'numrows\']) {

		$coches = $db->getarrayassoc();

	}

 

	#

	# Generamos una tabla con los datos recogidos en el query.

	#

	$out = "<table>\\n";

	$out .= "\\t<thead>\\n";

	$out .= "\\t\\t<tr>\\n";

	for ($ctf=0;$ctf<$db->queries[\'main\'][\'numfields\'];$ctf++) {

		$out .= "\\t\\t\\t<th>&lt;{$db->queries[\'main\'][\'fields\'][$ctf][\'name\']}&gt;</th>\\n";

	}

	$out .= "\\t\\t</tr>\\n";

	$out .= "\\t</thead>\\n";

	$out .= "\\t<tbody>\\n";

	for ($ctr=0;$ctr<$db->queries[\'main\'][\'numrows\'];$ctr++) {

		$out .= "\\t\\t<tr>\\n";

		foreach ($coches[$ctr] as $key => $val) {

			$out .= "\\t\\t\\t<td>$val</td>\\n";

		}

		$out .= "\\t\\t</tr>\\n";

	}

	$out .= "\\t</tbody>\\n";

	$out .= "</table>\\n";

 

	echo $out;

 

?>

Este código podría servirnos para generar una tabla como la siguiente:

<id>	<marca>	<modelo>	<color>
1	Ford	Mondeo	Negro
2	Renault	Megane	Rojo
3	Citroen	C4	Gris

Nos vemos en la siguiente entrega.

Descargar el código fuente.

Abstracci�n de bases de datos (I)

Jose — 2008-11-26T17:57:00+01:00

Hola de nuevo, hoy vamos a comenzar una clase de artículos en los que crearemos una librería de abstracción de bases de datos ¿que qué es eso? pues vamos a verlo.

De entrada, una capa de abstracción de bases de datos, nos permitirá cambiar el motor de la base de datos, de forma fácil y sencilla, de forma que la aplicación continúe funcionando de forma normal y sin efectuar ningún cambio en ella. Esto significa, que también podremos desarrollar aplicaciones que trabajen contra cualquier motor de bases de datos, sin cambiar nuestra sintaxis ni las funciones a utilizar.

Además, podemos implementar métodos para realizar selects, inserts, updates y deletes, entre otros, con lo que nuestro código podría quedar limpio de sentencias SQL (personalmente, es una práctica que prefiero no usar; a mí me es muy útil leer mis sentencias SQL de forma literal, pero para gustos... colores)

Bueno, pongámonos manos a la obra, lo primero que debemos hacer es crear la clase y establecer una conexión con la base de datos:

class MyDBLayer {

 

	private $db = \'\';				// Base de datos.

	private $host = \'localhost\';	// Servidor.

	private $user = \'user\';			// Usuario.

	private $password = \'password\';	// Password.

 

	public $handler = null;			// Handler de la conexión.

 

	private $engine = \'mysql\';		// Motor de base de datos.

	private $autoconnect = false;	// Indica si debemos autoconectar al crear el objeto.

	private $connected = false;		// Indica si estamos conectados.

	private $queries = array();		// Contiene los queries ejecutados.

 

	public function __construct( $db, $host, $user = \'\', $password = \'\', $connect = false, $engine = \'mysql\' ) {

 

		//

		// Inicializamos variables

		//

		$this->db = $db;

		$this->host = $host;

		if (strpos($host,\'@\') !== false) {

			$tmp = explode( \'@\', $host );

			$this->host = $tmp[0];

			$this->user = $tmp[1];

			if (count($tmp) > 2) {

				$this->password = $tmp[2];

			}

			if (count($tmp) > 3) {

				$this->autoconnect = (in_array($tmp[4],array(\'yes\',\'true\',\'1\') ? true : false;

			}

		} else if (is_array($host)) {

			$this->host = $host[0];

			$this->user = $host[1];

			$this->password = $host[2];

			if (count($host) > 3) {

				$this->autoconnect = (in_array($host[4],array(\'yes\',\'true\',\'1\') ? true : false;

			}

		} else {

			$this->user = $user;

			$this->password = $password;

			$this->autoconnect = $connect;

		}

 

		if ($engine != \'mysql\') $this->engine = $engine;

 

		if ($this->autoconnect) {	// Si debemos conectar al inicio lo hacemos...

			$this->connect();

		}

 

	}

 

	public function connect() {

 

		if ($this->engine == \'mysql\') {

			$this->handler = @mysql_connect( $this->host, $this->user, $this->password );

		}

 

		if ($this->handler) {

			if (!mysql_select_db($this->db, $this->handler)) {

				$this->errors[] = \'Error de selección de base de datos: \' . mysql_error();

				return false;

			}

			$this->connected = true;

			return true;

		} else {

			$this->errors[] = \'Error de conexión con el servidor: \' . mysql_error();

			return false;

		}

 

	}

Bien, como vereis, el constructor lo hemos montado de forma que sea capaz de recibir los parámetros de distintas formas: le podemos pasar los parámetros de forma tradicional o podemos agrupar los parámetros de conexión en el parámetro $host, ya sea como una cadena con el caracter "@" como separador (ej: host@usuario@password[@autoconectar[@motor]]) o como un array numérico, mantiendo el mismo orden de parámetros (host, usuario, password, autoconectar y motor) y una vez ha establecido las propiedades base de la clase, es capaz de realizar la conexión llamando a la función "connect", si se lo especificamos, claro.

En la función "connect", realizamos la conexión al servidor y seleccionamos la base de datos, comprobando el motor seleccionado, lo que nos da la posibilidad de extender nuestra clase para que sea capaz de trabajar sobre cualquier motor, ya sea mysql, postgre, mssql, odbc, etc...

Y para acabar con la primera entrega de esta serie, vamos a darle un poco de funcionalidad a la clase, implementando los métodos necesarios para extraer datos:

public function query( $sql, $query = \'main\' ) {

 

	if (!$this->connected) {		// Comprobamos si estamos conectados, si no lo hacemos.

		$this->connect();

	}

 

	if ($this->connected) {

 

		if ($this->engine == \'mysql\') {

 

			//

			// Realizamos el query y almacenamos el resultado en el array "queries"

			//

			$this->queries[$query][\'query\'] = $sql;

			$this->queries[$query][\'result\'] = mysql_query( $this->queries[$query][\'query\'], $this->db ) || $this->SendError();

 

			if ($this->queries[$query][\'result\']) {

 

				//

				// Si el query ha tenido éxito, extraemos información del resultado.

				//

				$this->queries[$query][\'recno\'] = 0;

 

				if ((substr( strtoupper(trim($this->queries[$query][\'query\'])), 0, 6 ) == "SELECT") || (substr( strtoupper(trim($this->queries[$query][\'query\'])), 0, 7 ) == "EXPLAIN") || (substr( strtoupper(trim($this->queries[$query][\'query\'])), 0, 4 ) == "SHOW")) {

 

					$this->queries[$index][\'numfields\'] = mysql_num_fields( $this->queries[$index][\'result\'] );

					$this->queries[$index][\'numrows\']   = mysql_num_rows( $this->queries[$index][\'result\'] );

 

					for ($ct=0;$ct<$this->queries[$index][\'numfields\'];$ct++) {

						$this->queries[$index][\'fields\'][$ct][\'name\'] = mysql_field_name( $this->result, $ct );

						$this->queries[$index][\'fields\'][$ct][\'type\'] = mysql_field_type( $this->result, $ct );

						$this->queries[$index][\'fields\'][$ct][\'size\'] = mysql_field_len( $this->result, $ct );

					}

 

				}

 

			}

 

			return $this->queries[$index][\'result\'];

 

		}

 

	}

 

}

 

public function get( $row, $col, $query = \'main\' ) {

 

	$return = false;

 

	if ($this->engine == "mysql") {

		$return = mysql_result( $this->queries[$query][\'result\'], $row, $col );

	}

 

	return $return;

 

}

Como se puede observar, el método "query" realiza una consulta sobre la base de datos y la almacena en un array con un índice definido por nosotros, o usando uno por defecto. Además, si la consulta debe devolver resultados (es decir, no es un UPDATE ni un INSERT) extrae y almacena información sobre el resultado, como número de registros o número de campos, así como el nombre, tipo y tamaño de los mismos.

El método "get", símplemente extrae y devuelve un valor del resultado de cualquiera de las consultas realizadas o false si hay algún error.

Y aquí terminamos la entrega de hoy, en las siguientes iremos implementando nuevos métodos de acceso a datos y agregaremos nuevos motores de bases de datos a nuestra clase.

Mi m�vil me cae mal

mquinteiro — 2008-11-20T22:10:00+01:00

Pues si, lo odio, hoy he estado pensando un poco acerca de el, y de lo que podía hacer con mi Nokia 8310 (nada). Me mensajeaba con mis amigos, hacia las llamadas que tenia que hacer y solo las justas por que constaban un congo.....

Por el contrario hoy puedo hacer de todo, mi N95 es un pequeño disco duro, tiene 8G que funcionan como si fuese un lápiz de memoria,es un walkman a lo bestia, las nuevas generaciones ya no aprenderán ni las letras de las canciones, antes teníamos que oír la misma puñetera cinta hasta que se daba de si y se oía como si el que cantaba estuviese en la montaña rusa, tengo un GPS integrado, por lo que ya no me aprendo el nombre de una p. calle, ni presto atención a los caminos y casi casi ni miro la carretera, tengo una conexión permanente a San Google, con lo que cualquier duda cultural, social o moral es consultada en el instante, por lo que no voy a aprender nada de nada por que tardo menos en mirarlo que en recordarlo, y ya puestos no me voy a aprender ni los nombres de mis amigos por que cuando me llaman ademas de salir su nombre les veo el careto, hago fotos y bla bla, bla bla. Resultado, la cojo batería de mi super N95-8G de 1200mA me dura en pleno rendimiento 1.5h aprox.

Pero no, no odio la telefonía solo por eso. Lo de hoy ha sido espeluznante, he tenido que cargar el teléfono 2 veces y antes de ponerme a escribir estas lineas me ha dado por echar un vistazo al registro de actividad. Entre mensajes SMS, llamadas recibidas y enviadas y correos electrónicos recibidos (sin SPAM) y enviados 163, muy fuerte, o como diaria mi amiga la rana, molt fort. En fin, no tengo que decir nada más para que entendáis el porqué del nombre del Post.

Pero en realidad no estoy siendo totalmente sincero, excepto por el problema de la la batería estoy encantado, calculo que el tiempo necesario para hacer lo que he hecho sin estos mecanismos habría sido de una semana o más.

Y a estas alturas os preguntareis... ¿Que tiene que ver este pastin que me estoy tragando con Codeando.net? Lo mas parecido a un lenguaje de programacion ha sido ... nada. Pues si, si que tiene que ver, los dispositivos actuales nos dan una versatilidad brutal, y desde luego no salen así de la arena con que se fabrican los integrados, no, tienen horas y horas de programación. Y aun se le puede sacar mas partido de lo que les sacamos.

En realidad este articulo es una continuación del tributo a las librerías libres, y en concreto de la descripción del pjsip, una librería de código abierto que combinada con sus hermanas pjsua y pjmedia pueden hacer la labor de crear un teléfono sip realmente rapido, con este tipo de herramientas tenemos el mundo a nuestro alcance. Por ejemplo.... con un iphone, la librería pjsip portada a arm, un asterisk (centralita de código abierto multi protocolo) podemos convertir nuestro teléfono móvil en una autentica central de comunicaciones, podemos reconducir todas las llamadas entrantes de nuestro puesto fijo de la oficina via UMTSo wifi a nuestro móvil..... aunque estemos en nuestra casa, podemos ver y operar con un portero automático SIP, podemos salir por distintos puntos de la oficina para conseguir la mejor tarifa, etc... Espectacular.

En el próximo post sobre pjsip os pondré un código de como implementaría un portero automático.

Sigamos con los móviles... ya tenemos un cojo teléfono sip en un Mac os X ups digo en un iphone, pero o abrimos una consola o lo ejecutamos o lo tendremos dificil.... Y aquí me quedo, no se como solucionar este problemilla.... por ahora.... Nokia compra Trolltech o lo que es lo mismo Qt!

Qt es un framework, conjunto de clases, entorno de programación, llámalo X, sobre el que se ha realizado KDE, entorno de ventanas, alias escritorio, alias M$ Vista killer, que se ha convertido en multi-plataforma, una aplicación realizada en Qt puede compilarse en Visual C para windows, en Mac, y por supuesto con gcc, pero no se queda ahí, existe el Qt embedded (formalmente Qtopia) que virtualiza también los sistemas operativos móviles, en concreto Linux embedded (un linux con framebuffer en vez de X11) y Windows Mobile y, tachan, en breve Symbian S60!!!

Flipo.

Flipo mucho.

Algunos enlaces

Jose — 2008-11-13T11:44:00+01:00

Font Linking

jQuery LightBox plugin

Are You Making These 10 CSS Mistakes?

5 CSS Tips Every Web Developer Should Know About

Free Glossy Modern Web Browsers Icons Download

48 Snow, Ice, Snowflake and Christmas Brushes

50 Must-Have Photoshop Brushes

Creando un men� de navegaci�n s�lo con XHTML y CSS

Jose — 2008-11-07T11:09:00+01:00

Uno de los elementos clave en una página web es el menú de navegación. Hay muchos factores que influyen en el diseño de un menú, pero ante todo:

Debe ser bien visible a primera vista.

Debe ser claro.

Ha de estar bien formado y ser accesible.

Debe cumplir los estándares del W3C.

Bien, para construir nuestro menú, primero crearemos la estructura, usando una lista desordenada (<ul>). Muchos de vosotros direis ¿porqué todo el mundo se empeña en que tengo que utilizar listas para construir un menu? La respuesta es bien sencilla: el XHTML es un lenguaje diseñado para estructurar datos, y un menú no deja de ser una lista de enlaces, por lo que lo más natural sería representarlo como lo que es, una lista.

Como ejemplo real, cogeré una web que desarrollé hace poco, www.almirantelibros.com. Lo primero, como decíamos es crear la estructura del menú:

<ul id="lmenu">
<li id="lmenu1"><span class="selected">Inicio</span></li>
<li id="lmenu2"><a href="http://www.almirantelibros.com/almirante/">Quienes somos</a></li>
<li id="lmenu3"><a href="http://www.almirantelibros.com/coleccion/">La colecci&oacute;n</a></li>
<li id="lmenu4"><a href="http://www.almirantelibros.com/blog/">El Blog</a></li>
<li id="lmenu5"><a href="http://www.almirantelibros.com/noticias/">Noticias</a></li>
<li id="lmenu6"><a href="http://www.almirantelibros.com/contacto/">Contacto</a></li>
</ul>

Esto nos daría como resultado algo parecido a lo siguiente:

Inicio

Quienes somos

La colección

El Blog

Noticias

Contacto

Ya tenemos un menú que, aunque completamente funcional, necesita que le demos forma, lo cual haremos a continuación utilizando CSS y una imagen que habremos preparado previamente. Lo primero es preparar la lista para mostrarla de forma horizontal:

ul#lmenu {
padding: 0;
margin: 0;
}
 
ul#lmenu li {
list-style-type: none; /* Eliminamos el punto de los elementos de la lista */
float: left;           /* Con esta línea ya tenemos el menú en horizontal */
height: 38px;          /* Establecemos el alto, para adaptarlo a la imagen */
}

Una vez tenemos el menú en horizontal, cargaremos la imagen del menú, y digo "la imagen" porque utilizaremos una técnica llamada "CSS Sprites" que ya revisaremos a fondo, y que consiste en cargar una sola imagen como si fuera un "mapa" con todas las imágenes que vamos a utilizar, en este caso en el menú:

Y ahora vamos con el código CSS:

ul#lmenu li a,
ul#lmenu li span {
display: block;                           /* Convertimos los enlaces y el "span" en bloques */
background-image: url(/images/menu.jpg);  /* Les asignamos a todos la misma imagen, así sólo la cargamos una vez */
background-repeat: no-repeat;
text-indent: -24000px;                    /* Escondemos el texto, indentándolo fuera de la página hacia la izquierda */
}
 
/* A continuación, con "background-position" y "width", posicionamos la imagen de fondo para cada elemento del menú */
 
li#lmenu1 a {
background-position: left 1px;
width: 72px;
}
 
li#lmenu1 a:hover {
background-position: left -37px;
}
 
li#lmenu1 span {
background-position: left -75px;
width: 72px;
}
 
li#lmenu2 a {
background-position: -100px 1px;
width: 166px;
}
 
li#lmenu2 a:hover {
background-position: -100px -37px
}
 
li#lmenu2 span {
background-position: -100px -75px;
width: 166px;
}
 
li#lmenu3 a {
background-position: -292px 1px;
width: 105px;
}
 
li#lmenu3 a:hover {
background-position: -292px -37px
}
 
li#lmenu3 span {
background-position: -292px -75px;
width: 105px;
}
 
li#lmenu4 a {
background-position: -423px 1px;
width: 78px;
}
 
li#lmenu4 a:hover {
background-position: -423px -37px
}
 
li#lmenu4 span {
background-position: -423px -75px;
width: 78px;
}
 
li#lmenu5 a {
background-position: -528px 1px;
width: 92px;
}
 
li#lmenu5 a:hover {
background-position: -528px -37px
}
 
li#lmenu5 span {
background-position: -528px -75px;
width: 92px;
}
 
li#lmenu6 a {
background-position: -645px 1px;
width: 105px;
}
 
li#lmenu6 a:hover {
background-position: -645px -37px
}
 
li#lmenu6 span {
background-position: -645px -75px;
width: 105px;
}

Y con esto, ya tenemos terminado el menú, el ejemplo lo teneis en: www.almirantelibros.com

jQuery: Tags con autocomplete (II)

Jose — 2008-11-05T11:04:00+01:00

Sigamos con el ejercicio que empezamos la semana pasada, hoy vamos a retocar el ejemplo para que nuestro script no nos muestre las etiquetas ya seleccionadas. Para ello, modificaremos las opciones del plugin "autocomplete" para que envíe el contenido ya seleccionado a nuestro script PHP, quedando así nuestro código en javascript:

<script type="text/javascript"><!--
$().ready(function(){
$("#tags").autocomplete(\'gettags.php\', { multiple: true, cacheLength: 0, autoFill: true, selectFirst: true, extraParams: { t: function() { return $("#tags").val() } }, formatItem: formatItem, formatResult: formatResult } );
});
function formatItem(row) {
return row[0] + " (" + row[1] + ")";
}
function formatResult(row) {
return row[0];
}
--></script>

Como vereis, hemos añadido un nuevo parámetro en la llamada a la función autocomplete:



extraParams: { t: function() { return $("#tags").val() } }

Con esto, hacemos que el plugin entregue el valor del campo "#tags" en el parámetro "t" en cada llamada (para que esto funcione, debemos también desactivar la caché con el parámetro: cacheLength: 0) el cual utilizaremos para crear un filtro en nuestra sentencia SQL:

<?php
 
$db = mysql_connect( \'localhost\', \'user\', \'password\' );
mysql_select_db( \'my_db\', $db );
if ($_GET[\'t\'] > \'\') {
$filter = \' AND tag NOT IN ("\' . str_replace( \', \', \'", "\', $_GET[\'t\'] ) . \'")\';
} else {
$filter = \'\';
}
$result = mysql_query( \'SELECT tag, COUNT(tag) FROM blogs_arts_tags WHERE tag LIKE "\' . $_GET[\'q\'] . \'%"\' . $filter . \' GROUP BY tag ORDER BY tag\', $db );
while ($row = mysql_fetch_row( $result )) {
echo $row[0], "|", $row[1], "\\n";
}
mysql_close($db);
 
?>

Y ya lo tenemos, podéis volver a pasar por la página de demostración para comprobar su funcionamiento, espero que lo disfrutéis ;)

Ver demostración.

Librer�a de iconos freeware: The Graphs.

Jose — 2008-11-03T12:19:00+01:00

Me he encontrado en Smashing Magazine con una estupenda librería de iconos sobre gráficos.

Disfrutadla.

Bienvenidos!!!

mquinteiro — 2008-10-30T23:00:00+01:00

Mi primer blog!!!! Y no se me ocurre nada mejor que hablar de tecnología... dos errores en uno. Bueno, espero estar a la altura y si se puede no aburrir mucho.

Esta sección que creo y estreno pretende ser un tributo a todas aquellas librerias que voy usando en el día a día y que merecen mi gratitud y agradecimiento.

Como en estas fechas estoy metido en VoIP y flirteando con el procesamiento de audio digital empezare con algunas de estas librerias.

Algunas de ellas...

clam: http://www.clam.iua.upf.edu/ Brutal, procesamiento digital de audio, todo tipo de operadores, intrumentación, análisis, codificación, en realidad de este frame work poco voy a decir, se me queda grande por todos lados, pero desde luego puede servir a cualquier navegante que caiga por estos lares.

libsamplerate Estupenda libreria para modificar samples rates, como transformo una señal pcm de 44100Hz a 48000?? aqui tienes la solución, aunque siempre tienes la posibilidad de hacer tu las interpolaciones etc, el tiempo que te ahorrara sera importante. Muy recomendada.

pjsip El otro dia tenia una necesidad imperiosa de hacer de escribir en un fichero mp3 las conversaciones de una extension VoIP, era una cuestion de vida o muerte, lo tenia clarisimo, solo tenia que hacer un parser de SIP, meter el protocolo SDP y finalmente con un poco de imaginación hacer mi propia implementación de RPT, obiamente una misión facilisima pero en mi tesitura de vida o muerte se me antojaba que el destino final iba a ser la muerte. Para ventura de mis familiares y amigos me tope con esta librería, o framework, o aplicacion completa,pjlib, pjsua, pjsip pj-nat. Entre todas ellas te dan todo lo necesario para crear tu propia implementación de VoIP con SIP, pero no solo se queda ahi, el conjunto de librerias incluyen librerias de Media con abscracción de hardware, puedes realizar tu implementación casi en cualquier cosa, amd, i386, windows, linux, S60!!! si, symbian. flipo. Gracias! gracias, gracias. Sus cualidades son tan grandes que posiblemente me quedo corto, descubre sus prestaciones tu mismo

Sox, lame (liblame0), mpg123, asterisk, ekiga, uff mañana mas. He utilizado tantas que ni me acuerdo, por lo que me propongo en este momento escribir una reseña cada vez que use una libreria de software libre.

jQuery: Tags con autocomplete

Jose — 2008-10-27T23:00:00+01:00

En el primer artículo técnico de codeando.net vamos a explicar como hemos implementado en el motor de este blog un sistema de "tags" o "etiquetas", utilizando un "autocomplete" (en este caso un plugin para jQuery).

El primer paso es incluir los ficheros necesarios para la librería y el plugin:

<link rel="stylesheet" type="text/css" href="/javascript/jquery/plugins/jquery-autocomplete/jquery.autocomplete.css" />
<script type="text/javascript" src="/javascript/jquery.js"></script>
<script type="text/javascript" src="/javascript/jquery/plugins/jquery-autocomplete/lib/jquery.bgiframe.min.js"></script>
<script type="text/javascript" src="/javascript/jquery/plugins/jquery-autocomplete/jquery.autocomplete.pack.js"></script>

Ahora inicializaremos el plugin para el campo deseado:

$().ready(function(){
$("#tags").autocomplete(\'gettags.php\', { multiple: true, autoFill: true, selectFirst: true, formatItem: formatItem, formatResult: formatResult } );
});
function formatItem(row) {
return row[0] + " (" + row[1] + ")";
}
function formatResult(row) {
return row[0];
}

Pasemos ahora a explicar las opciones que definimos en el segundo parámetro que pasamos a la función autocomplete:

multiple: true

Permite que la función sea llamada múltiples veces en un mismo campo, utilizando un separador, que por defecto es ", ".

autoFill: true

Completa la palabra con texto resaltado, de manera que si pulsamos intro o tabulador se inserta el tag automáticamente.

selectFirst: true

Automáticamente selecciona el primer elemento de la lista al pulsar intro o tabulador, aunque no haya ninguno seleccionado.

formatItem: formatItem

Llama a la función especificada (en este caso "formatItem") en la que se puede manipular el texto visible en el desplegable del autoselect.

formatResult: formatResult

Como el anterior, pero aplicable al valor de la opción.

Con esto queda hecha la parte del cliente, ahora pasemos al lado del servidor: el fichero gettags.php. Este fichero está recibiendo los caracteres tecleados por el usuario en el parámetro GET "q", que utilizaremos para realizar una consulta a la base de datos y devolver el resultado:

$db = mysql_connect( \'localhost\', \'user\', \'password\' );
mysql_select_db( \'my_db\', $db );
$result = mysql_query( \'SELECT tag, COUNT(tag) FROM tags WHERE tag LIKE "\' . $_GET[\'q\'] . \'%" GROUP BY tag ORDER BY tag\', $db );
while ($row = mysql_fetch_row( $result )) {
echo $row[0], "|", $row[1], "\\n";
}
mysql_close($db);

Y ya sólo queda mostraros el resultado final:

Ver demostración

Bienvenidos

Jose — 2008-10-22T22:00:00+01:00

Hola a todos y bienvenidos a este humilde espacio donde intentaremos ir publicando artículos sobre programación para la web, la llamada Web 2.0, tecnologías de la información y otros temas que ya irán saliendo... Desde codeando.net esperamos poder ofreceros contenidos interesantes, generar discusiones y ¿porqué no? aprender también de vuestras aportaciones.

Un saludo y nos vemos en el siguiente post.