Cómo hacer que Yii 1.x cargue automáticamente las clases de Composer

Hoy en día si programas una aplicación en PHP, es muy probable que utilices composer para instalar y manejar las dependencias de tu programa; sin embargo, aunque es fácil de utilizar e instalar dependencias, muchas veces tenemos problemas para instanciarlas en nuestra aplicación por los distintos formatos existentes (debido a la distintas versiones de PHP) utilizados para la carga de clases.

Con Yii framework es posible configurar para que cargue todas las clases instaladas con composer automáticamente, para ello, debes comenzar agregando lo siguiente en tu archivo composer.json

"config": {
  "vendor-dir": "protected/external" //definimos la carpeta de instalación
},
"autoload": {
  "psr-0": {  //definimos el estándar a usar
   "config": "./",
    "": "src"
  },
  "classmap": ["protected/"] //CREO que define el namespace raíz de las clases
},
"require": {
  "php": ">=5.3.2", //la versión de php a usar
  "yiisoft/yii": "1.1.*", //la última versión de Yii 1.1
}

En tu archivo /index.php modificamos el atributo classMap de la aplicación Yii, para incluir las rutas de los componentes externos que han sido instalados con composer:

require_once($yii);
$loader = require(__DIR__ . '/protected/external/autoload.php');
Yii::$classMap = $loader->getClassMap();
Yii::createWebApplication($config)->run();

¡Listo! A partir de ahora se cargaran automáticamente, las clases ubicadas en las rutas definidas en /protected/config/main.php y todas las ubicadas en la carpeta protected/external. De esta forma, puedes instalar componentes/clases/liberías desde composer y automáticamente se integrarán a tu aplicación Yii.

Hace 7 años en esa fecha: LinuxTube: El Youtube de Linux

Hace 9 años en esa fecha: Mi primer theme de Splashy (para Debian)

Aumenta la seguridad de tu sesión en WordPress

Una de las principales preocupaciones de los usuarios de WordPress es el acceso al panel de administración, pues por defecto se encuentra en la ruta /wp-admin y está compuesto de un simple formulario que puede ser atacado por fuerza bruta. Por eso les voy a recomendar dos complementos para aumentar la seguridad de inicio de sesión de WordPress, al implementar autenticación de dos factores (Two Factor Authentication) y cambiar la ruta por defecto del formulario de inicio de sesión:

  • Rename WP Login: es un plugin muy liviano y sencillo, simplemente te permite definir una url personalizada para el formulario de inicio de sesión en la pantalla de enlaces permanentes, como por ejemplo http://tusitio.org/entrar-al-admin/. Aunque en el título dice que el plugin no tiene soporte, el autor se refiere a que no posee tiempo para resolver cualquier duda que se presente en los foros , sin embargo, acepta parches de código, nuevas funcionalidades, correcciones de bugs, entre otros. Por lo que puedes instalarlo sin preocuparte de que esté obsoleto.
  • Clef: un plugin recomendado por Manuel Camacho, consiste en una autenticación de 2 factores, es decir, aparte de brindar una información que solo tú conoces, debes dar información generada de un objeto que tienes contigo (el móvil o una tarjeta por ejemplo). En este caso, una vez que instalas el plugin la pantalla de inicio de sesión cambia a una especie de QR dinámico, el cual debes escanear con tu teléfono móvil a través de la aplicación Clef, una vez que reconoce el patrón único automáticamente inicia sesión en el sitio, lo chévere es que desde el teléfono controlas el tiempo de sesión e inclusive cerrarla remotamente. También se configurar para usar el inicio tradicional como respaldo en caso de que no tengas el teléfono contigo.

 

Clef en el blog

Ejemplo de como funciona Clef

Con estos 2 sencillos plugines que puedes instalar y configurar en poco tiempo, podrás aumentar la seguridad en tu sitio con WordPress, o mejor aún, el de tus clientes. Finalmente, si conocen alguna alternativa o desean compartir información adicional, no duden en dejar un comentario para mejorar la seguridad de nuestros sitios.

Hace 7 años en esa fecha: Record Mundial de Guitar Hero 3

Optimiza el HTML, CSS, JS e imágenes de tu sitio web con Gulp

Uno de los retos de los desarrolladores web al momento de crear páginas web, es encontrar el equilibrio perfecto entre ofrecer un sitio con excelente apariencia visual y usabilidad, pero cuyo tamaño sea lo menor posible para que la carga sea rápida. Pues un sitio web rápido permite: tener mas visitas con el rendimiento actual del servidor, se ahorran costos de ancho de banda, los usuarios sienten que es una buena página y navegan mas tiempo por ella, entre otras. Este procedimiento incluye varias tareas que realizan muchos desarrolladores web como: usar las versiones reducidas (comprimidas) de Javascript, comprimir y ofuscar nuestro código del lado del cliente,  optimizar las imágenes del sitio, comprimir los archivos CSS, combinar todos los archivos CSS y Javascript en un sólo archivo (para cada tecnología) para reducir el número de conexiones, etc. Algo que no es complicado pero consume tiempo y que se debe repetir cada vez que se hacen cambios en el sitio.

Gulp

Como este proceso es repetitivo y consume tiempo, lo mejor es hacer un script que automatice cada etapa, pero hoy en día existen herramientas como que nos permite facilitar todo lo mencionado anteriormente. En este artículo hablaré sobre Gulp, una herramienta para automatizar tareas que hace lo mismo que GruntJS pero es mas fácil de usar y entender.

¿Cómo empezar?

Para instalarlo, lo hacemos a través Node Package Manager de forma global para que se instale como un comando del sistema y poder ejecutarlo en cualquier parte:

npm install -g gulp

Luego en la raíz del proyecto creamos un archivo gulpfile.js donde especificaremos las tareas a realizar:

var gulp = require('gulp');
gulp.task('default', function() {
});

Añadir una tarea

Una tarea es un conjunto de procesos, por ejemplo, optimizar el código JS consiste en: reemplazar algunas liberias por sus versiones CDN, utilizar las versiones minificadas de librerías de terceros, luego concatenar los archivos, minificar y actualizar las referencias en el HTML. Cada uno de estos procesos podemos encontrarlos en el buscador de complementos de Gulp (en caso de no existir alguna puedes crearla y publicarla en Github) y se instalan con npm.

Gulp posee una importante característica: su sistema de flujos entre tareas. Cada una de ellas recibe un conjunto de data (generalmente archivos), realiza un proceso en ella y produce nueva data para ser enviada como entrada a otro flujo. Esto permite a tareas que modifiquen gran de archivos, hacer este procedimiento en RAM y solo escribir en el disco cuando ya se ha terminado de procesar todos los archivos, por lo que se ejecutará muy rápido.

Para verlo en acción, haremos una tarea para reducir el tamaño de los archivos JS como ejemplo, entonces nuestro primer paso es instalar el plugin uglify con NPM:

npm install --save-dev gulp-uglify

Luego se deben hacer dos cosas en el archivo gulpfile.js, una es importar esta el complemento en las dependencias y asignarla a una variable, luego con esta variable podemos ejecutar la función que se encargará de (en este caso) reducir el tamaño del código javascript. Para ello debemos hacer lo siguiente:

var uglify = require('gulp-uglify');
gulp.task('comprimir', function() {
gulp.src('lib/*.js')
.pipe(uglify())
.pipe(gulp.dest('dist'))
});

Como podrás observar, hemos creado una tarea llamada comprimir , que recibe un conjunto de archivos (los archivos JS ubicados dentro de /lib), crea una tubería y ejecuta uglify que se encargará de comprimir cada uno de los archivos, finalmente entrega el resultado a la tubería que se enviará a la ruta de destino (esta se puede definir a donde uno desee). Así sucesivamente podemos ir creando procesos como los mencionados anteriormente y luego agruparlo en unas tareas mas generales, por ejemplo, tareas para generar una versión para depurar (cuya fuente no este comprimida), una versión para producción, una versión de producción para pruebas, entre otros. Esto lo puedes hacer al final haciendo algo como esto:

gulp.task('produccion', ['comprimir', 'copiar','cdn', 'less']);

Ejecutar las tareas

Finalmente puedes ejecutar el comando gulp en la raíz de tu proyecto y empezará a realizar todas las tareas de forma automática. En caso de que quieras ejecutar solo una tarea, puedes pasar por parámetro el nombre de la tarea:

gulp produccion

Con esto generas la versión de producción, o  por ejemplo, si tienes una tarea llamada less para generar los archivos CSS desde LESS, simplemente ejecuta:

gulp less

Tareas recomendadas

Para optimizar un sitio web, generalmente utilizo imagemin, jshint, minify-css, notify, imagemin-pngquant, uglify, usemin. Con estas puedo comprimir imágenes, mejorar el código javascript, concatenar archivos, reducir el tamaño, entre otros. Aunque te recomiendo leer un artículo de Addy Osmani sobre optimización de webs, pues lista una gran cantidad de tareas que puedes ir probando para usar al momento de mejorar tus sitios.

Finalmente, como te darás cuenta con Gulp puedes crear sitios web mas óptimos y ahorrando mucho tiempo. Existen una gran cantidad de tareas existentes que puedes agregar a tu proyecto y facilitar tu trabajo, por eso te recomiendo chequearlas en el buscador de plugins de Gulp y si no existe, puedes crearla y ayudar a otros programadores que necesiten algo similar.

Hace 3 años en esa fecha: Google Chrome para Android

La evolución de la web

Llevo muchos años haciendo desarrollo web, aproximadamente en 1999 hice mi primera página web en el extinto Geocities y de allí hice páginas por entretenimiento hasta que en el 2003, con esta página (antes de ser un blog) y otra de skate he estado involucrando en el mundo web.

Desde entonces ha habido muchos cambios en la web, por una parte, antes solo existía un navegador como tal pues Internet Explorer ocupaba como el 95% de la cuota y pocas personas usaban Netscape, limitando a los desarrolladores a solo crear cosas disponibles en esta aplicación que Microsoft había abandonado. Esto ocasionó el despliegue de complementos de terceros como Flash y Java, que traían a la web mayor interacción, animaciones a cambio de menor seguridad y lentitud. Pero al hacer un sitio con esas tecnologías, estabas seguro que funcionaba en cualquier computadora y que eventualmente tus lectores iban a sufrir vulnerabilidades de seguridad.

Por otra parte, en el año 2004 salió el navegador Mozilla Firefox que logró brindar una alternativa a los usuarios de la web y abrir la posibilidad de nuevos navegadores como Google Chrome que salió en 2008, para así destronar a Internet Explorer y fomentar una sana competencia por ganar usuarios a través de calidad, permitiendo el avance de tecnologías abiertas y el impulso de HTML5/CSS3. Con estas alternativas, los programadores y diseñadores tuvieron que adaptarse a los nuevos tiempos y actualizar o crear sus páginas para funcionar en cada navegador del mercado, pues dar soporte a uno solo no es opción, porque olvidas a sector importante de usuarios de Internet.

Con el lanzamiento de dispositivos móviles ahora la web estaba disponible en todas partes, desde cualquier lado puedes acceder a ella y fuera de tu computadora personal. Creando un nuevo reto pues una página no solo debía funcionar bien en todos los navegadores sino también en múltiples tamaños de pantalla y resoluciones, aumentando un poco el trabajo de los desarrolladores pero creando sitios dinámicos que funcionan en cualquier tamaño de pantalla.

Podría decirse que la evolución de la web siempre pone retos a los desarrolles y a quienes ejercen el diseño de sitios web, pero a su vez, permite a los usuarios disfrutar de una mejor plataforma, cada vez con mas posibilidades audiovisuales de forma nativa, tener videojuegos 2D y 3D en el navegador, contar con sistemas operativos como Chrome OS y Firefox OS que ejecutan aplicaciones web y muchas cosas mas por venir. Demostrando que tenemos a la web por mucho tiempo y seguirá siendo el principal medio de comunicación en el mundo.

Cómo desactivar algunos módulos de Jetpack mejorar la cargar de un sitio

Para quienes tienen alojado un sitio WordPress en un servidor propio, probablemente estén usando el plugin Jetpack para aprovechar muchas de las funcionalidades de WordPress.org: estadísticas de visitas, botones para compartir, mejores comentarios, versión móvil, entre otros. Sin embargo, este plugin añade muchos archivos (innecesarios muchas veces) Javascript al sitio, aumentando el tamaño del sitio y ralentizando la carga del sitio.

Para evitar esto, podemos instalar adicional el plugin Jetpack Lite que elimina todos los módulos exceptuando el de estadísticas y enlaces cortos de wp.com, pero con pequeñas modificaciones en el ćodigo podemos controlar cuáles módulos cargar:

  • Abrimos el archivo jetpack-lite.php  y nos ubicamos en la linea 32.
  • Si observamos, hay una funcion llamada Leave_only_JetpackLite_modules que se llama en el hook jetpack_get_available_modules, esta función devuelve un arreglo con los módulos a activar, por eso debemos simplemente agregar nuevas entradas al arreglo $return desde $modules para activar módulos, por ejemplo:
    $return['stats'] = $modules['stats']; //Estadísticas
    $return['shortcodes'] = $modules['shortcodes']; //Código corto para vídeos
    $return['sharedaddy'] = $modules['sharedaddy']; //Botones para compartir en redes sociales
    $return['comments'] = $modules['comments'];//Mejoras en la caja de comentarios
  • Para obtener la lista de módulos, simplemente navega hasta la ruta /wp-content/plugins/jetpack/modules/ y cada carpeta representa a un módulo, si sabes inglés entenderás que hace cada uno de ellos por su nombre y debes agregarlo al vector comentado en el paso anterior.
  • Una vez agregado todos los módulos al vector $return, debes agregar cada uno de ellos en el array declarado en la función Activate_only_JetpackLite_modules:
    return array( 'stats', 'shortcodes', 'sharedaddy', 'comments','publicize' );
  • Una vez que subas los cambios y recargues el sitio, solo deberías tener activado los módulos necesarios y los archivos Javascript que se requieren sólo para las funcionalidades activas.

Nota: Al instalar Jetpack Lite debes tener instalado Jetpack. Pues el plugin no es un fork sino un pequeño código para eliminar la carga de todos los módulos. Y si tienes alguna duda o problema, no dudes en dejar un comentario para ayudarte.

Hace 5 años en esa fecha: La historia del Hacking

Hace 9 años en esa fecha: Compilación en Linux, Dia del Software Libre