Retrorock

Gran parte de la versatilidad de un buen framework radica en la capacidad de permitirnos reusar código, así vamos creando nuestro propio framework con una biblioteca de funciones y clases que podemos volver a usar y volver a usar y volver a usar …

Para poder escribir código reusable, debemos abstraer los procesos lo más posible, de modo que no tengamos que cambiar los archivos originales para encontrar la solución a nuevos problemas.

Para explicar mejor este concepto, un buen ejemplo sería crear un Helper para añadir el tracking code de Google Analytics.

El problema con Google Analytics es que el te da un código que ponemos antes de </body> en cada una de las paginas de nuestro website. así que sería una buena idea tener una función que nos permita escribir google_analytics(). Esto ayudaría a la portabilidad. Si el código de analytics cambia, solo tendríamos que cambiar el archivo de configuración o el Helper en vez de cambiar manualmente todos los templates.

El primer paso es definir lo que queremos:

• Un Helper que  nos permita llamarlo para que nos imprima el código de Google Analytics con su tracking code.
• Que verifique en un archivo de configuración, si queremos que se imprima el código y el tracking code.
• Que opcionalmente se le pueda pasar el tracking code a la función y tome el tracking code de este argumento y no del archivo de configuración.

Comenzamos por crear un archivo de configuracion y añadir los items ( como explica la guía de codeigniter¹ ) que vamos a usar en la funcion de Google Analytics

Para crear el Helper hay que tener en cuenta dos reglas:

1. Los nombres de los archivos de helpers deben tener el prefijo _helper para ser correctamente cargados.
2. Para utilizar el superobjecto de CodeIgniter ($this) debemos asignarlo a una variable con la función get_instance()

En el archivo analytics_helper.php

El resto es simplemente verificar si hay un tracking code como argumento, sino existe se busca el tracking code del archivo de configuración y se imprime el código de Analytics interpolando el valor del tracking code.

Pueden descargar una copia de los archivos utilizados en este ejemplo aquí. Para aprender o para usarlo en sus proximos proyectos con CodeIgniter.

Modo de uso

Copie analytics.php a la carpeta application/config y sustitúya $config['tracking_code'] por el tracking code correcto.
Copie analytics_helper.php a la carpeta application/helpers
Despues de haber llamado cada uno de estos archivos en config/autoload.php puede llamar la funcion google_analytics(); en el template y el se encarga del resto.

1. http://codeigniter.com/user_guide/libraries/config.html [↩]

Los minipost son entradas cortas, generalmente con enlaces interesantes que uno suele ver intercalado entre los posts regulares en algunos blogs.

Algunos ejemplos de blogs que utilizan miniposts incluyen blogpocket, Duarte 101 y ALT1040

En resumen hay que realizar 3 pasos:

• Crear una categoría para los miniposts (miniposts)
• Modificar el index.php del template
• Publicar los miniposts como un posts cualquiera, solo hay que asignarle la categoría (miniposts)

Haciendolo

Primero hay que crear una categoría para guardar los miniposts, yo uso miniposts, pero se puede elegir cualquier nombre, lo importante es anotar el numero de id de la categoría (ID).

Ahora hay que modificar la plantilla para que cuando WP vaya a mostrar un post que pertenezca a la categoría “miniposts” lo muestre de forma diferente a como mostraría cualquier post de otra categoría.

Hay que encontrar la linea que dice:
<?php if (have_posts()) :  while (have_posts()) : the_post(); ?>

Justo debajo de esta linea introducir el siguiente codigo:

<?php if (in_category(35) && !is_single()): ?>
<ul class="miniposts">
  <li id="p<?php the_ID(); ?>">
    <?php echo wptexturize($post->post_content); ?>
    <!--
    <?php trackback_rdf(); ?>
    -->
  </li>
</ul>
<?php else: ?>

Y debajo continuamos el Loop con los elementos que no pertenecen a nuestra categoría de miniposts.

Optimizando

Según el método que llevamos, si publicamos dos miniposts seguidos se van a crear dos listas. así que para perfeccionar eso vamos a introducir el código de una función llamada stupid_hack que busca mediante una expresión regular  que busca los </ul> que estén seguidos de un <ul class=”miniposts”> para así unir todas las listas continuas de miniposts en una sola que contenga tantos miniposts seguidos como los hayan

function stupid_hack($str) {
  return preg_replace(’|</ul>\s*</ul class=”linklog”>|’, ”, $str);
}
ob_start(’stupid_hack’);

Este codigo puede ser llamado desde cualquier lugar del documento.

Dandole estilo

Se pueden personalizar los miniposts aplicandoles a las listas una clase como .miniposts y cambiar el tamaño, el color o la tipografia.

Estaba trabajando en una aplicación web para un cliente, un website inmobiliario. Luego de que todo estaba listo, funcionando perfecto en mi servidor local y en un servidor que uso para probar. Había un problema con las URLs en el servidor de Godaddy de mi cliente.

Las requests estaban dando un error: “No input file specified”, cosa que resolví poniendo “index.php” en el archivo de configuración. Pero quería remover el index.php de la URL.

Aquí hay un simple método para remover el “index.php” de las URLs en las aplicaciones en desarrolladas Codeigniter.

Hay que tener en cuenta que este método solo funciona para aplicaciones desarrolladas con Codeigniter, y aunque explica como quitar el “index.php” de las URLs, no quita la necesidad del archivo index.php, que es el Front Controller. Aunque index.php no aparezca en el URL debe estar presente el nivel del root de la aplicación.

Para que esto funcione debemos estar seguros de que nuestro Apache use el mod_rewite y que acepte configuraciones por medio de .htaccess, luego de estar seguros de esto debemos ejecutar los siguientes pasos:

• Crear un .htaccess para configurar el engine de escritura de URLs (rewrite engine)
• Asignar un string vacio a $config['index_page'] en el archivo config.php
• Reiniciar el Apache y probar

1- Crear el archivo .htaccess

Crea un nuevo archivo llamado .htaccess y colocalo en tu directorio web.

2- Asignar un string vacio a $config['index_page'] en el archivo config.php

abre tu system/application/config/config.php

busca la linea que asigna $config['index_page'], usualmente:

$config['index_page'] = 'index.php';

y cambiala a:

$config['index_page'] = '';

Graba el archivo.

3- Reiniciar el Apache y probar

funciono??

Si no funciono, no te rindas, llenate de paciencia, prueba de nuevo todos los pasos y si aún así no funciona, postea en el foro con todos los detalles de tu instalación.

Javascript y AJAX nos brindan la capacidad de hacer aplicaciones web dinámicas, que no tienen que cargar una pagina completa para mostrar un fragmento de información, sino que simulan una carga inmediata, lo que significa menos carga para el servidor, menos ancho de banda e información más accesible.

Hoy en día, los diseñadores web están tan enfocados trabajando en sus aplicaciones web dinámicas que se olvidan de que la mayoría del tráfico es proveniente de los buscadores, que pasan mucho trabajo, o no pueden indexar los enlaces hechos con AJAX.

En otras palabras, muchas de tus páginas en AJAX están escondidas para los buscadores. Para completar el problema, la mayoría de los websites en AJAX tienen un solo link, el buscador tiene menos páginas que indexar.

La idea es optimizar nuestros sitios para que el javascript no haga que nuestros links no sean indexados. Aquí hay una pequeña guía para crear u optimizar un website con Javascript/AJAX que sea totalmente amigable con Google.

Diseña tu websites usando Javascript Degradable, de forma que el website sea totalmente navegable para un visitante sin Javascript y para otro con Javascript.

Cuando tengas un website navegable completamente sin Javascript, entonces puedes comenzar a incluir las partes de AJAX en algunos lugares.

Es bueno ir revisando el desarrollo del diseño en un browser de texto, como Lynx o SEO Browser

Detecta si los objetos existen, o si es un browser con capacidad de ejecutar Javascript, para que solo sirvas AJAX a quienes pueden usarlo.

Aparte de esos pasos es de  suma importancia enviar un sitemap completo del website. El sitemap solo no es suficiente, todo el conjunto es necesario para que funcione perfectamente.

De esta forma es posible utilizar Javascript y AJAX en nuestros websites de forma que sean accesibles y que sean visibles para los buscadores.

He estado envuelto últimamente, durante todo el tiempo que tenía sin escribir aquí, en dos proyectos usando el Framework de PHP, Code Igniter. Siempre hé encontrado que los frameworks son rígidos, Codeigniter es todo lo contrario, que es lo que más me gusta. Se instala en un folder en el root de tu proyecto web, provee un framework MVC, una amplia gama de helpers y una gran cantidad de documentación.

Codeigniter hace que muchas cosas sean automáticas, pero no todo, lo que también es bueno. Para mi ha sido muy claro donde van las cosas y como hacerlas para lograr lo que he querido. También a sido muy fácil integrar fragmentos de código que tenía guardados aquí y allá.

Me parece lo suficientemente maduro para producción, es rapido, facilita las cosas para desarrollar agilmente y tiene una gran comunidad de usuarios, por lo que tengo planeado seguirlo usando para algunos proyectos que vienen por ahí, luego seguiré escribiendo sobre esto… y pronto pongo links a los proyectos.

jQuery es una librería que nos ayuda a simplificar la programación en javascript y AJAX. A diferencia de otras librerías de javascript, jQuery nos permite expresar un código muy complejo de la forma más sencilla y corta posible.

La metodología es simple: Encuentra cosas, y actúa sobre ellas. Encontramos los elementos con el objeto jQuery $(), que funciona básicamente como document.getElementById, excepto que no solo soporta ids sino también selectores de CSS y xPath, en vez de retornar solo un elemento, puede retornar un array de elementos.

Aquí una pequeña muestra del impacto que jQuery puede tener en tu código. Para una tarea sencilla como añadir un evento al click en los links de una región en una página, usarías javascript y métodos del DOM asi:

Con jQuery vamos directo al punto y nos ahorramos tener que hacer un loop sobre todos los elementos, no hay necesidad de usar múltiples métodos del DOM, solo con un pequeño string tenemos lo que necesitamos.

Cuando este listo … $(document).ready()

Es lo primero que hay que aprender de jQuery. Si quieres que un evento funcione en la página hay que llamarlo dentro de $(document).ready(), todo lo que este dentro de esta llamada, será ejecutado justo cuando el DOM este listo y antes de que el contenido de la página se cargue.

La ventaja de $(document).ready() es que se pueden tener tantos llamados a este método como sea necesario, aparte de que se ejecuta antes de que el contenido de la página este disponible, permitiendo que una cantidad de efectos de esconder, mostrar y otros, estén listas inmediatamente cuando el usuario ve por primera vez los elementos de la página.

Añadiendo contenido

Con jQuery tenemos acceso de forma pragmática al Dom, navegar el documento, tomar y modificar los atributos de los elementos y podemos quitar e insertar contenido.

Este fragmento aparte de mostrar la facilidad para insertar contenido al DOM, un efecto fadeIn, y aplicarle un estilo CSS al nuevo elemento, es un ejemplo de otra de las ventajas de jQuery, el encadenamiento de los llamados a los métodos.

Cada vez que se llama un método de jQuery, esta retorna el mismo objecto jQuery, lo que nos permite volverlo a utilizar sin tener que repetir el selector.

Efectos

jQuery cuenta con un grupo importante de efectos como show(“speed”), hide(“speed”), fadeIn(), fadeOut(), slideUp(), slideDown(), aparte de algunos efectos que sirven para cambiar el estado visible o invisible de un elemento dependiendo de su estado actual toggle().

Cuando son llamados sin el parametro de velocidad los metodos show() y hide(), muestran o esconden inmediatamente el elemento en cuestion. Todos el resto de este grupo de metodos llamados sin parametro de velocidad, usan la velocidad por defecto 400ms.

… Despues de jQuery …

Solo hé tratado una minúscula introducción sobre lo que es posible con jQuery. jQuery es divertido, porque siempre se aprenden nuevos trucos que resultan increíblemente naturales. jQuery simplifica tu código javascript desde la primera vez que lo usas, cada vez que aprendes algo tu código es un poco más simple.

Algunos links importantes:

• http://docs.jquery.com
• http://visualjquery.com
• http://15daysofjquery.com

Una forma sencilla para lograr rápidamente esos menús con jQuery…

… Una lista sencilla en HTML , un poco de jQuery y CSS

… un ejemplo.