Saltar al contenido

Categoría: Desarrollo y Programación

HTML5 ★ Boilerplate una plantilla para crear nuestras páginas

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:

An introduction to HTML5 Boilerplate v4.0

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

2 comentarios

Como aumentar el límite del tamaño permitido para la subida de archivos en WordPress

En algunos casos, necesitamos subir por medio de la interfaz de WordPress archivos de gran tamaño pero nos encontramos que no podemos hacerlo 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 multi-sitio, entonces debes cambiar en las opciones de la red (Network options) el tamaño máximo permitido para los archivos.

9 comentarios

Auto-completación de código PHP con YII en Netbeans

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 auto-complete 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
5 comentarios

Code Complete: Excelente libro para toda persona involucrada en el desarrollo de software

Hace unos días logré luego de unos meses terminar este libro tan largo pero muy valioso. Empecé a leer este libro por un artículo que vi por ahí donde recomendaban 10 libros indispensables para el desarrollo de software, este fué el segundo que escogí para leer y realmente me gustó porque cubre todo los aspectos del desarrollo de software: recolección de datos del cliente, diseño, arquitectura, desarrollo, pruebas, mejoramiento de procesos, trabajo en equipo, y mas.

A diferencia de «El programador pragmático«, Code Complete esta enfocado no solo a desarrolladores sino a cualquier persona que trabaje en esta rama, tiene capítulos dedicado al puro diseño del software, otros a diseño de interfaces gráficas, otro a como trabajar en equipo y tratar con los clientes. Sin embargo, si eres programador o desarrollador este libro es obligatorio que lo leas, te enseña a como programar mejor con ejemplos de código, como realizar pruebas automatizadas para mejorar tu productividad, como hacer código mantenible y entendible, selección de herramientas y tecnologías, etc.

Portada de Code Complete
Portada de Code Complete

Realmente vale la pena leer el libro, son casi 1000 páginas pero cada una de ellas lo vale. Incluso si dominamos los temas expuestos allí sirve de repaso volver a leerlos, o como me pasó a mi en muchos capítulos de temas que «conocía»: aprendí nuevas cosas y aprendí a mejorar hábitos existentes. Si eres una persona graduada o con experiencia en desarrollo de software, debes leer este libro de lo contrario es mejor esperar porque el libro exige tener cierta experiencia, para alguien nuevo puede ser muy útil pero mas difícil de comprender el contenido.

Si desean adquirirlo, pueden descargarlo o comprar Code Complete desde Amazon.

3 comentarios