Esta tecnología la descubrí leyendo el blog de Paul Irish, al principio no la entendí y pensaba que era un framework para desarrollar páginas web pero luego de ver varios tutoriales comprendí que realmente es una plantilla en HTML5 que incluye (en mi opinión) las mejores herramientas de detección de características del navegador, compresión de código HTML, CSS y Javascript; métodos para acelerar la carga de librerías de Javascript, entre otros.

¿Por qué usar Boilerplate?

Si eres desarrollador web (frontend) especializado en la parte visual debes usar esta herramienta para tus proyectos, la idea es ofrecer una plantilla o página web usando HTML5 sin perder compatibilidad con navegadores antiguos que no lo soportan (o solo parcialmente). Además utiliza las mejores prácticas e incluye las mejores herramientas para tener una buena página como: utiliza Modernizr para detectar las funcionalidades soportadas por los navegadores y aplicar solo ha ellos ciertos efectos CSS3 por dar un ejemplo, no reinicia los estilos de los navegadores sino que los normaliza, incluye compatibilidad con la mayoría de servidores web para aplicar técnicas de compresión de datos y pequeñas reglas de seguridad, compatibilidad con dispositivos móviles, herramientas para comprimir el código Javascript entre otros.

Con esto te ahorras mucho tiempo en implementar todas estas cosas, ademas garantiza tener una páginas que usa lo mejor de la tecnología actual sin romper compatibilidad con los navegadores antiguos. Cabe destacar que es solo para crear la plantilla inicial, es una base para ir agregando tu markup, librerías, reglas CSS, etc. Si utilizas un CMS puedes hacer tu propia plantilla o buscar en Internet plantillas ya optimizadas con Boilerplate.

Mi experiencia

Utilicé Boilerplate para MiguelUseche.com (mi sitio profesional) y me ayudó a realizar una página que carga en poco tiempo, funciona en casi todos los navegadores, me ahorro tiempo al dar soporte a Internet Explorer 6 y 7, y la adaptación a dispositivos móviles requirió poco trabajo. Obviamente no todo se hizo automático, sino su base de código me permitió ahorrar mucho tiempo al dar soporte a distintos navegadores.

Boilerplate funciona con una plantilla base, la cual vamos agregando nuestro markup y vamos creando nuestra página/aplicación web. Luego a través de unos scripts «construimos» el sitio optimizado el cual se guarda en la carpeta build, durante este proceso, se comprimen las reglas CSS, el código HTML, los archivos de Javascript, los une si están separados en varios archivos, optimiza las imágenes para ser vistas en la web, actualiza las rutas para incluir estos scripts y mas. Todo lo que debemos hacer es configurar un archivo donde le indicamos todo lo que queremos hacer.

Conclusión

Si quieres hacer un sitio con HTML5 y realizar ciertas acciones con los navegadores que no lo soporten, utiliza Boilerplate. Con todas la base ya optimizada que trae permite crear buenos sitios en menos tiempo, y si son como yo: desarrolladores web especializados en la programación del sitio y no en la parte visual; les ayudará mucho esta tecnología al realizar cosas que no comprendemos mucho. Sin embargo, si eres desarrollador front-end supongo que te ayudará a ahorrar tiempo y te ofrece configuración para adaptarse a tus requisitos o forma de trabajar.

Si quieres comenzar a utilizar esta tecnología pueden ver el siguiente video que está en inglés:

Para descargarlo, entren a la página oficial: https://html5boilerplate.com/

En algunos casos, necesitamos subir por medio de la interfaz de WordPress archivos de gran tamaño pero nos encontramos que no podemos hacelro porque existe un límite de tamaño, sin embargo, si tenemos los permisos necesarios en el servidor podemos hacerlo fácilmente.

Primero debemos modificar unas opciones globales de PHP, para ello debemos crear un archivo llamado php.ini en la carpeta /wp-admin con el siguiente contenido:

upload_max_filesize=280M ;tamaño máximo del archivo
max_execution_time=600 ;tiempo de ejecución del script, si es muy corto no da tiempo de subir el archivo
memory_limit=1024M ;limite de memoria, en mi caso esta alto porque se ejecutan unos scripts al subir el archivo
post_max_size=280M ;tamaño de la llamada POST, debe ser un tamaño igual o ligeramente superior al tamaño máximo del archivo

Y agregar la siguiente línea en el archivo /wp-config:

define(’WP_MEMORY_LIMIT’, ’64M’);

¡Listo! Ya puedes subir archivos de mayor tamaño. Si tienes una instalación multisitio, entonces debes cambiar en las opciones de la red (Network options) el tamaño máximo permitido para los archivos.

Netbeans es mi IDE favorito desde hace años y últimamente me ha tocado realizar varios proyectos usando el framework Yii. Para todo desarrollador / programador es una realidad que no conocemos en totalidad un lenguaje o framework y por ello siempre estamos acudiendo a la documentación  para repasar sintaxis y nombre de métodos, sobre todo de las variables u objetos manipulados en cierto momento. Por eso, es bueno configurar el IDE para que autocomplete el código y muestre la documentación de funciones para leer conocer el funcionamiento sin tener que cambiar de ventana.

Hace unos días descubrí en la documentación oficial como configurar Netbeans para trabajar con Yii. Y les explico aquí como realizarlo:

  • Entra al menu File (Archivo), luego a Project properties (Propiedades del proyecto) y finalmente a PHP Include Path (Ruta de cabeceras de PHP) e incluimos la ruta donde se guarda el framework de yii, de hecho la carpeta se llama «framework».
  • Luego entramos a Tools (Herramientas), luego a Options (Opciones), hacemos clic en la pestaña superior de Miscellaneous (Misceláneas) y hacemos clic en Files (Archivos), luego del paréntesis agregamos «yiilite\.php» para que quede algo como «^(yiilite\.php|CVS|SCCS|….»
  • Reiniciamos Netbeans y veremos como ahora se autocompleta el código, al momento de instaciar clases accederemos a sus métodos y documentación.

Para el caso de algunas vistas parciales donde recibimos objetos que no están declarados en el archivo, podemos decirle al IDE que tipo es cada variable usando la siguiente sintaxis:

/* @var $this MyController */
/* @var $model MyObject */
$this->metodo() // se puede escribir usando auto completación
$model->id; // se puede escribir usando auto completación

Con estos sencillos pasos se hará mas fácil la escritura de código php usando Yii en Netbeans.

Completado de código PHP con Yii en Netbeans

Completado de código PHP con Yii en Netbeans

El pasado jueves liberé la nueva versión de mi plugin para mostrar los archivos de un blog wordpress de manera compacta, con efectos de animación jQuery al momento de expandirlos y navegar sobre ellos. Si tienen un blog wordpress por muchos años y les molesta el tamaño del widget de archivos, les recomiendo utilizar este plugin.

En esta versión 1.2, ahora los archivos se expanden automáticamente dependiendo de la página que estemos visitando. Esta funcionalidad fué agregada en gran parte a un parche enviado por Michel Westergaard que me ayudó mucho a programar esta funcionalidad.

Para mas información pueden ver la página del plugin en WordPress.org o aquí en mi blog. Si les gusta, por favor le dan 5 estrellas o hacen una donación para contribuir con el desarrollo del mismo.

Esta fue una tarea que me tocó realizar en mi trabajo, debido a la poca documentación existente (me parece incompleta o no explican bien) y lo que me costó, decidí realizar una breve guía de como instalar solr y configurar varios índices; con el fin de ayudar a otras personas con el mismo problema o no tienen posibilidad de documentarse en inglés.

Para quienes no conocen Solr, es un motor de búsqueda de código abierto escrito en Java para tener un mayor rendimiento en las búsquedas o consultas muy grandes, es recomendable usarlo al momento de tener consultas a base de datos con mucho tiempo para obtener resultados y que estos sean constantes, por nombrar un caso.

Como está hecho en Java y corre sobre plataforma web, es necesario tener instalado y configurado Tomcat en el servidor. En esta guía se asume eso, si no saben, pueden buscar tutoriales en Internet para ver como hacerlo para su Sistema Operativo. Además, para este ejemplo se va a realizar un indice de una consulta a un servidor SQL Server para traer los datos y crear un índice con ello.

Instalación de Solr

  1. Primero vamos a http://lucene.apache.org/solr/ y descargamos la versión zip y la descomprimen en una carpeta temporal.
  2. Dentro de la carpeta comprimida, entren a la carpeta dist y renombrar el archivo apache-solr-x.x.x.war a solr.war
  3. Luego copian ese archivo en la carpeta lib de Tomcat.
  4. Como en este ejemplo usamos SQL Server para traer los datos, descargamos el driver jdbc de Sql Server (o el correspondiente para su gestor de Base de Datos) y se copia dentro de la carpeta lib de Tomcat.

Registro de una WebApp

El siguiente paso es crear cada  instacia ó aplicación web, por cada una de ellas se deben repetir los siguientes pasos:

  1. Desde la carpeta descomprimida en el paso 1 de la sección anterior (debería llamarse algo como apache-solr-x.x.x), copiar la carpeta example a la localidad deseada para guardar al configuración e indices (ejemplo /home/user/solr_indices ó C:\solr_indices)
  2. Ir a la carpeta /conf/Catalina/localhost dentro de Tomcat, allí crear un archivo .xml con el nombre de la aplicación (este nombre de la carpeta es el que saldrá en la URL) con el contenido a continuación, recuerden cambiar RUTA_TOMCAT por la ruta de instalación de Tomcat y RUTA_WEBAPP por la ruta de la carpeta creada en el paso anterior:
  3. <Context docBase="RUTA_TOMCAT/lib/solr.war" debug="0" crossContext="true" >
    <Environment type="java.lang.String" value="RUTA_WEBAPP" override="true" />
    <Valve className="org.apache.catalina.valves.RemoteAddrValve" allow="(127\.0\.0\.1)|(10\.2\.*)"/>
    </Context>

La cadena Valve, es opcional y sirve para restringir el acceso a la aplicación, en este caso permite acceso a la ip local y cualquiera de la red privada de clase A. El atributo allow (deny para denegar) permite expresiones regulares para las ips. Si desean bloquear nombres de dominio, usen RemoteHostValve.

Configuración de la WebApp con Solr

Les recuerdo, en este caso se estará usando SQL Server y se importarán los datos del indice desde una consulta al servidor de Base de Datos, si necesitan leer documentos XML u otra cosa, lean la wiki de Solr.

  1. Editar RUTA_WEBAPP/conf/solrconfig.xml y agregar el siguiente bloque:
    <requestHandler name="/dataimport" class="org.apache.solr.handler.dataimport.DataImportHandler">
    <lst name="defaults">
    <str name="config">data-config.xml</str>
    </lst>
    </requestHandler>
  2. Buscar en ese mismo archivo, la sección donde dice dataDir para renombrar el nombre de la carpeta donde se guardará el índice para evitar sobreescritura por parte de los demas índices, sustituir NOMBRE_WEBAPP por el nombre de la aplicación:
    <dataDir>${solr.data.dir:./solr/data-NOMBRE_WEBAPP}</dataDir>
  3. Crear en la misma carpeta (RUTA_WEBAPP/conf/) un archivo con el nombre data-config.xml con el siguiente contenido, recuerden modificar las credenciales de la conexión de la base de datos por las usadas en su caso:
    <dataConfig>
    <dataSource type="JdbcDataSource" name="solr"
    driver="com.microsoft.sqlserver.jdbc.SQLServerDriver"
    url="jdbc:sqlserver://IP_SERVIDOR_BD;databaseName=NOMBRE_BD"
    user="NOMBRE_USUARIO" password="CONTRASENA"/>
    <document name="NOMBRE_BUSQUEDA">
    <entity name="NOMBRE_BUSQUEDA" dataSource="NOMBRE_BUSQUEDA" query="SELECT id,content AS Txt FROM TableTest">
    <field column="id" name="DataID"/>
    <field column="Txt" name="Txt"/>
    </entity>
    </document>
    </dataConfig>

    En este paso se deben explicar algunas cosas, las cadenas dataSource,entity y document deben tener el atributo name, con ello Solr identifica esta fuente de datos con el indice, es recomendable usar el mismo para evitar problemas. La cadena entity debe tener el atributo dataSource, con el nombre de la fuente, con esto relaciona ambos. Ademas si observan la sentencia SQL, la misma devuelve 2 columnas: id y Txt (Txt la forzamos a llamarse asi mediante AS), las cuales serán usadas para crear el índice, por ello se deben crear tantas etiquetas field como columnas tengamos en la consulta, el nombre es personal y no es obligatorio llamarlas como el nombre de la columna.

  4. Editar el archivo schema.xml, buscar el bloque fieldsets por:
    <fields>
    <field name="DataID" type="string" indexed="true" stored="true"/>
    <field name="Txt" type="text" indexed="true" stored="true" />
    </fields>
    <uniqueKey>Txt</uniqueKey>

    Aquí se coloca una cadena field por cada cadena declarada en el archivo del paso anterior, cabe destacar la importancia del atributo type, no entro en detalles pero en este mismo archivo pueden leer los existentes, por ejemplo, string no permite búsqueda parcial a diferencia de text, así que analicen los tipos necesarios para cada columna.

  5. Deben reiniciar el servicio de Apache Tomcat con el fin de actualizar la información de la webapp y Solr pueda crear los índices.

Una vez realizado estos pasos, se puede proceder a indexar el contenido. Si desean agregar mas índices, repitan los pasos de Configuración de la Webapp con Solr, cambiando el nombre de la aplicación, carpeta donde almacenar los indices, nombre de consulta, entre otros.

Espero que esta guía les haya servido de gran ayuda.

Hace unas semanas hice un plugin para wordpress, donde se imprime una lista de las categorías de forma compacta y expandible mediante animaciones  jQuery, pues hoy he liberado la versión 1.1 del mismo, con la novedad que ahora pueden excluir del listado las categorías que deseen. Esta característica fue agregada debido a la solicitud de varios usuarios del plugin y expandir las posibilidades de uso de este plugin.

Para instalarlo pueden ir a su página oficial o actualizar desde el mismo gestor de actualizaciones de WordPress. Si no lo han probado, se los recomiendo y recuerden votar por él.

Este es mi segundo plugin para WordPress, creado por solicitud de varios usuarios quienes pidieron tener un plugin similar a jQuery Archive List pero para mostrar las categorías de un blog. Básicamente es el mismo plugin a diferencia que muestra las categorías y la configuración es un poco distinta. Entre las características que ofrece son:

  • Incluye un Widget para mostrar las categorías, con opciones para desplegar en caso de la existencia de subcategorías.
  • Filtro para llamar mostrar el listado usando [ jQuery Categories List ]
  • Utiliza la librería de jQuery incluida en WordPress.
  • Código JS separado en un archivo para mejorar el rendimiento.
  • Opciones para mostrar cantidad de entradas, seleccionar como se ordenan las categorías, simbolos a usar, etc.
  • Soporte para i18n, aunque actualmente solo esta disponible en: Español, Inglés.

Si quieren ver como lucen, simplemente miren como ésta página muestra las categorías y chequeen la compatibilidad del mismo. Si les gustó, voten por 5 estrellas, voten por la compatibilidad y donen para seguir trabajando en estos plugin.

Actualizacion v1.1

  • Soporte para excluir categorías de la lista.

Para descargalo, utilicen el gestor de plugins incluido en su instalación WordPress o desde la página oficial.

Contribuye con la creación de este plugin