Hoy vamos a hablar de los Microformats, un conjunto de “buenas costumbres” apliamente aceptadas y extendidas y que posiblemente acaben convirtiéndose en un estándar en Internet, que nos permiten remarcar datos de contacto, eventos de calendario, etc, entendible por humanos y robots de búsquedas.

¿Qué son los Microformats?

Los Microformats son un conjunto de formatos, simple y apliamente aceptados, construido sobre las normas existentes de HTML. En lugar de deshechar aquello que hoy en día funciona y está firmemente implantado, los Microformats intentan solucionar problemas nuevos utilizando las herramientas existentes.

Los Microformats NO SON un nuevo lenguaje de programación web. Simplemente añaden una nueva funcionalidad al lenguaje existente utilizando sus propiedades.

¿Para qué sirven los Microformats?

Los Microformats nos permiten remarcar o destacar dentro del contenido de nuestra web aquellos datos de contacto, eventos de calendario o descripciones de productos de forma sencilla, no intrusiva para el usuario que lee la información y muy clara para los robots de buscadores como Google, el cual lo reconoce a la perfección en incluso premia en su cálculo de PageRank a aquellos sitios que los utilizan adecuadamente.

Ejemplos de Microformats

Datos de contacto

Para los datos de contactos podemos crear un div con la clase “vcard”, el cual contendrá todos los datos personales que queramos mostrar. Una tarjeta de contacto tipo hCard podría ser algo así:

<div id="hcard-Juan-López" class="vcard">
 <span class="fn">Juan López</span>
 <div class="org">Google Corp.</div>
 <a class="email" href="mailto:jlopez@server.com">jlopez@server.com</a>
 <div class="adr">
  <div class="street-address">Main St.</div>
  <span class="locality">Palo Alto</span>, 
  <span class="region">California</span>, 
  <span class="postal-code">CA1234</span>
  <span class="country-name">Estados Unidos</span>
 </div>
 <div class="tel">123456789</div>
</div>

Podemos observar que todo se basa en añadir clases a los distintos elementos del documento. Por ejemplo:

  • vcard. Para indicar que definiremos un bloque de datos personales.
  • fn (full name). Para destacar el nombre completo del contacto.
  • org. Para destacar la organización en la que trabaja.
  • Puedes encontrar más documentación sobre vcard en hCard 1.0

Eventos de calendario

Para los datos de un evento podemos crear un div con la clase “vevent”, el cual contendrá todos los datos del evento de calendario que queramos mostrar. Una evento de calendario tipo hCalendar podría ser algo así:

<div id="hcalendar-Reunion-con-cliente" class="vevent">
<abbr class="dtstart" title="2011-05-24T10:00Z00">May 24, 2011  10</abbr> – 
<abbr class="dtend" title="2011-05-24T13:00Z">1pm</abbr>:  
<span class="summary">Reunion con cliente</span> at <span class="location">Sala de reuniones</span>
<div class="description">Reunión con nuestro mejor cliente</div>
</div>

En este caso, utilizamos otras clases diferentes para remarcar los datos del evento. Por ejemplo:

  • vevent. Para indicar que vamos a comenzar un bloque de datos relativos a un evento de calendario.
  • dtstart o dtend. Para indicar la fecha y hora de inicio y fin del evento.
  • Puedes encontrar más información sobre vevent en hCalendar 1.0

A tener en cuenta…

  • Los principales sitios de referencia en Internet como Facebook, Twitter o Google hacen uso de Microformats para especificar datos de contacto o eventos.
  • Los principales buscadores de Internet reconocen los microformats a la hora de indexar páginas que los contengan.
  • Para más información sobre Microformats puedes visitar microformats.org
Anuncios

You can read the English version of this post in http://phpsblog.agustinvillalba.com/hmvc-modular-applications-codeigniter/

Hoy vamos a hacer una introducción a la modularización de aplicaciones en el framework CodeIgniter, utilizando para ello la extensión HMVC (Hierarchical Model View Controller o Modelo Vista Controlador Jerárquicos), de forma que nuestra aplicación gana en flexibilidad y podemos paralelizar el desarrollo entre varios desarrolladores una vez los módulos han sido diseñados, con el valiosísimo tiempo que ganamos.

Instalando HMVC en CodeIgniter

Lo primero que necesitamos para modularizar nuestra aplicación es descargarnos la extensión HMVC. Una vez la hemos descomprimido, nos encontramos con 2 carpetas:

core

third_party

colocamos la carpeta third_party (tal cual) dentro de la carpeta application de nuestra aplicación CodeIgniter. La ubicación final de la carpeta core dependerá de la versión de CodeIgniter que tengamos instalada. Por lo tanto, el contenido de la carpeta core irá en:

Si tenemos CodeIgniter 2.0

application/core

Si tenemos CodeIgniter 1.7.2

colocaremos el contenido de la carpeta core (3 archivos) dentro de la carpeta application/libraries
Leer el resto de esta entrada »


You can read the English version of this post in http://phpsblog.agustinvillalba.com/how-to-distinguish-upper-lowercase-and-utf8-characters-mysql/

En esta ocasión vamos a hablar sobre cómo generar una sencilla query de selección de datos en una base de datos MySQL, cuyo charset ha sido establecido como utf8_general_ci pero necesitamos distinguir entre datos con acentos y datos sin acentos, y yendo un poco más allá, si fuera posible, que no distinga entre palabras que empiecen con mayúsculas o minúsculas pero sí los acentos. Veamos cómo podríamos implementarlo.

Definición de nuestro problema

Expliquemos un poco mejor cuál es nuestro problema. Tenemos una base de datos MySQL en la que tenemos a su vez una tabla, por ejemplo, “usuarios”, con varios campos: id, nombre y apellido. Esta base de datos fue creada con un charset utf8_general_ci. Pero, ¿qué significa esto? Obviamente, utf8 es el charset que nuestra base de datos va a gestionar. En segundo lugar, “general” indica que no utilizaremos el juego de caracteres propio de un idioma en concreto, (podríamos tener “utf8_spanish_ci”, para el juego de carácteres propios del español), sino el utf8 de forma genérica. En último lugar, “ci” significa “Case Insensitive”, de forma que en nuestras búsquedas, el motor de MySQL no hará distinciones entre “MAYÚSCULA”, “Mayúscula” o “mayúscula”. Lo que no es tan conocido es que el ser Case Insensitive también implica que no distinga los acentos del español, de forma que tampoco hace distinciones entre “mayúscula” o “mayuscula”.

De forma que si tenemos 3 registros en nuestra tabla usuarios, en los cuales tenemos los siguientes valores para el campo nombre: “José”, “Jose” y “JOSÉ”, y ejecutamos la siguiente query:

SELECT * FROM `usuarios` WHERE `nombre` = 'jose'

Ésta nos devolverá los 3 registros de nuestra base de datos, sin distinciones.
Leer el resto de esta entrada »


You can read the English version of this post in http://phpsblog.agustinvillalba.com/javascript-css-minified-carabiner-codeigniter/

Hoy vamos a hablar de una potente librería disponible para el framework CodeIgniter, es: Carabiner. Esta librería nos permite incluir de forma específica para cada vista de nuestro sitio los archivos JavaScript y CSS que son necesarios, ahorrándonos tener que incluirlos todos, y además, los envía al usuario en un único archivo “.js” y “.css” con todos los que hemos ido incluyendo pero minimizados, con lo que el tamaño del “.js” y “.css” que se envía al usuario es mucho menor, con la consiguiente mejora de tiempo de carga del sitio que ello implica.

Instalando Carabiner en nuestro proyecto

Lo primero para instalar Carabiner en nuestro proyecto es descargarlo, podemos hacerlo desde su hilo en el foro de CodeIgniter. Para instalarlo simplemente hemos de colocar los archivos carabiner.php, cssmin.php y jsmin.php en el directorio /application/libraries de nuestro proyecto. Una vez hecho esto, hemos de colocar el archivo de configuración carabiner.php en el directorio application/config. En este archivo hemos de especificar la ruta de los directorios que contendrán nuestros archivos “.js” y “.css”.
Leer el resto de esta entrada »


You can read the English version of this post in http://phpsblog.agustinvillalba.com/upload-progress-bar-in-codeigniter-without-flash/

Hoy vamos a ver cómo podemos crearnos una barra de progreso de subida de archivos en CodeIgniter sin la necesidad de recurrir a librerías o plug-ins hechos en Flash (del tipo SWFUpload, etc) que escapan a nuestro control, dado que habitualmente estas librerías nos ofrecen los archivos .swf ya compilados, por lo que nos es imposible modificar nada en ellos, en el caso de que tengamos conocimientos de programación en ActionScript 2 o 3.

Antes que nada hemos de decir que crear una barra de progreso de subida de archivos en PHP no es tan sencillo como pudiera parecer. El primer problema es que las versiones de PHP anteriores a la 5.2 no ofrecen las herramientas necesarias para poder ofrecer información sobre cómo la subida del archivo en cada momento. El segundo problema es que AJAX, por sí solo, no nos permite consultar el estado de la subida del archivo, dado que, por razones de seguridad obvias, JavaScript no tiene acceso a los archivos del sistema operativo del cliente, por lo que necesitaremos un “truco” utilizando un iframe.

Leer el resto de esta entrada »


You can read the English version of this post in http://phpsblog.agustinvillalba.com/scrollto-jquery-plug-in-css/

Hoy vamos a hablar un poco del plug-in para jQuery scrollTo y su dependencia “oculta” con la carga de nuestros archivos CSS.

scrollTo de jQuery

El plug-in scrollTo de jQuery (desarrollado por Ariel Flesler) nos permite que nuestra página web realice un scroll (desplazamiento de la barra vertical) hasta cualquier elemento de nuestro documento web que necesitemos, de esta forma podemos centrar la atención del usuario en dicho elemento cada vez que se recarga la página (por ejemplo, una entrada del menú de la izquierda en nuestra web), evitándole al usuario tener que hacerlo él manualmente. En la web del proyecto del plug-in podrás encontrar toda (o casi toda) la documentación necesaria para integrarlo en tu proyecto web. De más está decir que para poder utilizarlo has de incluir también en tu proyecto el propio framework JavaScript jQuery. A este plug-in que tan útil me ha sido sólo le encontré un pequeño fallo de documentación…
Leer el resto de esta entrada »


You can read the English version of this post in http://phpsblog.agustinvillalba.com/bug-fix-imageflow-1-3/

Hoy vamos a solucionar un bug que encontré en la actualización de ImageFlow, pasando de la versión 1.2.1 a la 1.3. La nueva versión, pretende entre otras cosas solucionar el problema que había en Internet Explorer cuando únicamente había una imagen en la galería. Este problema era que no se mostraba nada si sólo teníamos una imagen en la galería en IE. Pues bien, la versión 1.3 ya muestra la imagen si sólo tenemos una, pero si además esa imagen tiene un “caption” (pie de foto), pues resulta que el caption no nos los muestra, ni en Internet Explorer ni en ningún otro navegador. Pues bien, aquí les dejo la solución al bug para aquellos que deseen (y se atrevan) a meterle mano al código de la librería.

Solucionando el bug

Para solucionar el problema hemos de abrir el archivo imageflow.js que nos encontramos en el .zip que nos hemos descargado. Vamos a la línea 526 aproximadamente donde nos encontramos el siguiente bloque de código:
Leer el resto de esta entrada »