Comencemos por lo básico, ¿Que es un Framework?

Un framework o infraestructura digital, es una estructura conceptual y tecnológica de soporte definido, normalmente con artefactos o módulos de software concretos, con base a la cual otro proyecto de software puede ser más fácilmente organizado y desarrollado.

En un lenguaje un poco más ameno, podríamos definir a un Framework como un soporte, una capa intermedia entre un lenguaje de programación crudo y el programador, útil para agilizar el proceso de desarrollo, brindando a los programadores de una serie de funciones y métodos para evitar perder tiempo programando soluciones ya escritas.

Es así que dentro de los lenguajes más populares, por ejemplo, podemos citar:

En mi caso hago un uso bastante intensivo del framework para JavaScript jQuery, también hice varias pruebas con otros framework para PHP (Cake, Zend y un poquito de Symfony), y finalmente comencé hace unos meses a jugar un poco con el framework para Ruby de moda,estoy hablando de Rails. Las conclusiones que obtuve son variadas.

Ventajas de utilizar un framework

• Velocidad de desarrollo. Una vez que aprendemos los aspectos básicos de utilización de un framework, la velocidad de desarrollo aumenta considerablemente. Frameworks como Ruby on Rails son increíblemente rápidos y ágiles, sin exagerar Rails utiliza como uno de sus principios el paradigma CoC (Convención sobre Configuración) ganando simplicidad, a la vez que no perdemos flexibilidad. Solo con esa mentalidad y el soporte provisto por todo el framework, desarrolla un sitio convencional (y no tanto) es cuestión de horas.
• Código optimizado. Si bien esto no es una ley, en general un framework que cuenta con una comunidad importante siempre se encuentra optimizado, al menos, sabemos que hay personas trabajando en mejoras constantemente. Lo mismo ocurre con aspectos fundamentales como la seguridad. Utilizar un framework puede ahorrarnos muchos dolores de cabeza. Obviamente queda en nosotros también hacer un buen uso de esta plataforma, pero en general y si programamos con cierta logica y cuidado, no tendremos demasiados problemas.
• Reducción de costos. Utilizar un framework muchas veces nos permite abstraernos a un nivel de programación low-level. No tenemos que preocuparnos de los aspectos de desarrollo más básicos, de esta manera podemos centrarnos en los aspectos más esenciales que se encuentran relacionados directamente con el trabajo que debemos realizar. Esto no siempre va a ocurrir, pero en general si el proyecto no es sobre algo muy especifico el framework va a tener mucho del trabajo resuelto.
• Estándares y convención de código. Dos aspectos que tranquilamente podemos utilizar en nuestras aplicaciones sin la necesidad de un framework. No obstante tener que utilizarlos de manera casi obligatoria nos empujan a mejorar nuestros programas. Y perdón que vuelva con Rails, pero programar para este frameworks es un placer, código limpio y sencillo, fácil de mantener y todo gracias a la implementación de convenciones.

Desventajas de utilizar un framework

• Tiempo de aprendizaje. Aprender a utilizar un framework no necesariamente es algo que podamos hacer en un par de días. En mi experiencia si bien ahorramos mucho tiempo, también tenemos que dedicar muchísimas horas en aprender los aspectos básicos y no tanto. A mayor conocimiento del framework, más jugo le podemos sacar.
• Dependencia. Una vez que escribimos un programa para determinado framework es casi imposible migrar a otro sin tener que reescribir todo el código. En ese sentido cuando comenzamos un proyecto con un framework prácticamente nos estamos casando con él.
• Falsa sensación de conocer el lenguaje. Esto es importantísimo porque veo que mucha gente esta confundida en este aspecto. Programar para determinado un framework no nos hace conocedores del lenguaje para el que esta creado. El mejor ejemplo: Saber programar con jQuery no significa saber programar en JavaScript. Mi recomendación, aprendan el lenguaje y luego aprendan el framework.

Conclusión

Decidan en base al proyecto a realizar. Los frameworks son cada día más potentes, sin embargo nada va a reemplazar al programador con amplios conocimientos sobre determinado lenguaje.

Creo que existe un equilibrio justo a la hora de decidir si usar o no un framework, en mi caso evalúo:

• Si el proyecto es MUY simple. No utilizo un framework, no tiene sentido cargar toda una estructura, un esqueleto con cientos de funciones, si el trabajo a realizar no requiere más que unas lineas de programación. Por ejemplo, si van a realizar un sitio con un formulario para recibir consultas y nada más, utilizar un framework ni merece la pena.
• Si el proyecto tiene una complejidad baja-intermedia. Es probable que utilice un framework. Sitios del tipo institucionales podemos crearlos en cuestión de horas. Me animo a decir que minutos, obviamente sacando de lado la parte gráfica. Un framework para un proyecto de una complejidad intermedia es realmente una bendición.
• Si el proyecto es complejo. Si el proyecto es complejo, no es algo común, probablemente no utilizaría un framework, aunque en este punto en particular habría que evaluar que tan útil es el framework en base a nuestros requerimientos. Es solo cuestión de analizar las ventajas y desventajas en cada caso en particular.

Mi consejo más honesto, utilicen el sentido común. No caigan en el simplismo de aquel que dice “los frameworks son para programadores vagos”, ni en el fanatismo de aquel que programa todos sus bibliotecas y repudia a aquellos que utilizan herramientas para economizar y valorar su tiempo. Los frameworks son herramientas que bien utilizadas son de gran ayuda.

Este parser puede brindar muchísima información interesante acerca de un documento en formato PSD, por ejemplo podemos extraer datos como: tamaño, modos de colores, recursos, capas, contenidos, etc.

Ejemplo de uso:

{PSD} = require 'psd.js'

psd = PSD.fromFile './path/to/file.psd'
psd.parse()

for layer in psd.layerMask.layers
	console.log "Layer: #{layer.name}"
	console.log "Size: width=#{layer.cols}, height=#{layer.rows}"
	console.log "Position: top=#{layer.top}, left=#{layer.left}"

En el apartado de Github del proyecto pueden ver una demostración de uso. La misma utiliza HTML5 y su API para arrastrar y soltar. Les sugiero probarla para descubrir toda la información que brinda este script acerca de los PSD que le enviamos.

Web: Psd.js

A diferencia de otros plugins similares que utilizan como fuente de información servicios de terceros como Google Maps, este pequeño, pero potente plugin, mapea una imagen de forma simple y rápida, sin ningún tipo de complicaciones.

Craftmap ademas de ser un plugin muy útil cuenta con la gran ventaja de ser extremadamente liviano, apenas 6KB en su versión simplificada. Al igual que Google Maps el autor de este plugin creo un mecanismo muy sencillo para agregar marcadores.

Ejemplo de uso:

JavaScript:

$('.map').craftmap({
	cookies: false, // (bool) remember position
	fullscreen: false, // (bool) fullscreen
	container: {
		name: 'imgContent'
	},
	image: {
		width: 1475, // (int) image width
		height: 1200, // (int) image height
		name: 'imgMap' // (string) class name for an image
	},
	map: {
		position: 'center'
	},
	marker: {
		name: 'marker', // (string) class name for a marker
		center: true, // (bool) set true to pan the map to the center
		popup: true, // (bool) set true to show a popup
		popup_name: 'popup', // (string) class name for popup
		onClick: function(marker, popup){},
		onClose: function(marker, popup){}
	},
	controls: {
		init: true,
		name: 'controls',
		onClick: function(marker){}
	},
	preloader: {
		init: true, // (bool) set true to preload an image
		name: 'preloader',
		onLoad: function(img, dimensions){}
	}
});

HTML

<div class="map">
	<img src="path_to_the_image.jpg" class="imgMap" />
	<div class="marker" id="ID" data-coords="x, y">
		<!-- HTML CONTENT -->
	</div>
	<!-- etc. -->
</div>

<div class="controls">
	<a href="#" rel="ID">text</a>
	<!-- etc. -->
</div>

El plugin tiene una demostración online para que lo puedan ver en funcionamiento.

Web: Craftmap

Un titular alineado con el plugin conserva perfectamente la geometría y cuerpo del documento, para lograrlo utiliza un pequeño algoritmo por el cual calcula el tamaño indicado de las distintas palabras para que el resultado sea un bloque de texto visualmente organizado.

Por ejemplo, yo hice una pequeña prueba, el resultado fue el siguiente titular:

El plugin requiere modificar mínimamente nuestras hojas de estilo, el cambio que debemos realizar es el siguiente:

.slabtexted .slabtext { display:inline-block white-space:nowrap; }
.slabtextinactive .slabtext { display:inline; white-space:normal }
.slabtextdone .slabtext { display:block }

Finalmente debemos inicializar el plugin, aquí el autor sugiere un pequeño hack para demorar un poco la ejecución permitiendo la correcta carga de las tipografias externas:

<script>
function slabTextHeadlines() {
	$("h1").slabText({
		"viewportBreakpoint":380
	});
};

$(window).load(function() {
	setTimeout(slabTextHeadlines, 1000);
});
</script>

slabText es un plugin sencillo, liviano y que no requiere una gran configuración, muy recomendable para webs con un porcentaje de texto importante y con pocas imágenes, en donde una correcta organización y distribución tipográfica marca la diferencia entre una web normal y una web visualmente muy atractiva.

Web: slabText

Podríamos decir que Scrollorama es una pequeña suite de utilidades para asistirnos en la manipulación de acciones que se encuentran estrechamente vinculadas con la posición de la barra de desplazamiento del navegador. Es así de sencillo que podemos decidir, por ejemplo, que cuando el visitante acceda mediante el scroll a la mitad de nuestro documento se dispare una animación, o bien, se ancle determinada div.

Si se encuentran interesados no duden en visitar la pagina oficial del proyecto, en donde van a encontrar decenas de buenos ejemplos.

Modo de uso:

$(document).ready(function() {
    var scrollorama = $.scrollorama({
        blocks:'.scrollblock'
    });
});

Scrollrama es un proyecto creado por John Polacek, que a su vez utilizó como base del proyecto a Lettering, otro plugin jQuery del que hablamos en Kabytes, y que sirve principalmente para manipular el aspecto de las tipografías.

Web: Scrollorama

Visualmente estos tooltip son muy lindos, sin embargo, y en caso de no estar conformes con el diseño por defecto, podemos cambiarlo de forma muy simple por medio de hojas de estilo. En el sitio oficial pueden ver varias demostraciones de uso que utilizan distintos estilos.

Un ejemplo de tooltip creado con Poshy:

A nivel programación, utilizar este plugin es muy simple, un ejemplo simple de instalación sería el siguiente:

$('#demo-basic').poshytip();

El plugin contempla distintos aspectos básicos, como por ejemplo la ubicación del tooltip, mediante parámetros podemos indicarle al plugin donde ubicar el tooltip en relación al enlace, podemos ubicarlo a cualquiera de los lados y en prácticamente cualquier ángulo.

Un detalle importante es que también podemos utilizar este plugin con campos del tipo input, excelente para formularios en donde debemos, o deseamos, ampliar la información para ayudar al visitante en la tarea de completar el formulario en cuestión.

Les recomiendo visitar la web del proyecto para conocer más acerca de este fantástico tiptop.

Web: Poshy Tip ~ Visto en Webappers

Específicamente los navegadores que soportan a la perfección el uso de este plugin son: IE8, Safari, Firefox, Chrome, Opera, tanto en Windows como en OSX.

Las barras de scroll modificadas se ven de la siguiente manera:

Modo de uso

1. Incluir la ruta completa al script

<script type="text/javascript" src="jquery.lionbars.0.3.min.js"></script>

2. Incluir las hojas de estilo necesarias

@include 'lionbars.css';

3. Finalmente llamar al plugin para que haga su trabajo

$('#box').lionbars();

El plugin no tiene demasiada ciencia, no obstante es un lindo detalle para utilizar en nuestros sitios web y darle un toque de distinción a nuestro diseño

Web: LionBars

LittleAcordeon hace perfecto honor a su nombre, siendo un slider que pesa apenas 4 KB en su versión normal, y sorprende con el peso de su versión simplificada que tiene un tamaño inferior a los 1.6 KB, increíble.

Si bien la idea inicial del creador era utilizar este slider solo para imágenes, es importante aclarar que puede ser utilizado con otros archivos, por ejemplo textos, vídeos, o bien cualquier elemento que coloquemos dentro de las divs utilizadas en su estructura esqueleto.

Inicialmente el plugin muestra un slider de 960px de ancho, esto puede ser fácilmente modificado mediante parámetros de configuración a la hora de inicializar el plugin, ademas de obviamente unas pocas lineas en las hojas de estilo.

Ejemplo de uso:

$('#slider').liteAccordion({
        onTriggerSlide : function() {
            this.find('figcaption').fadeOut();
        },
        onSlideAnimComplete : function() {
            this.find('figcaption').fadeIn();
        },
        autoPlay : true,
        pauseOnHover : true,
        theme : 'stitch',
        rounded : true,
        enumerateSlides : true
}).find('figcaption:first').show();

Actualmente el slider esta probado en las ultimas versiones de los navegadores más populares, eso incluye Firefox, Chrome, Safari y Opera, tanto en Windows 7 y OSX. El navegador que no es soportado, y como muchos están sospechando, es el Internet Explorer 6.

Utilizar este plugin es gratuito tanto en sitios personales, como comerciales, el autor aclara que no desea, ni tiene planeado, vender este plugin, aunque no desprecia ningún tipo de donaciones o contribuciones con el proyecto

No olviden visitar la demostración online, de paso pueden leer un poco más acerca de las opciones disponibles a la hora de configurar este fantástico plugin.

Web: liteAccordion

Font.js cuenta con una potente API, aceptando distintas y diversas formas de configuración. Algo interesante es que este pequeño toolkit JavaScript realiza la carga asincrónica de las tipografías mediante llamadas AJAXs. Una vez descargados los archivos con las tipografías, las mismas pueden ser empleadas sin ningún inconveniente utilizando la propiedad CSS @font-face.

Ejemplo de uso de Font.js

var font = new Font();
font.onload = function() {
    // measure some text
    console.log(font.measureText("some text", 14));

    // style an element
    document.querySelector("p").style.fontFamily = "'" + font.fontFamily + "'";
}

font.onerror = function(e) {
   alert(e);
}

// kick off the actual loading
font.fontFamily = "My Font";
font.src = "acmesa.ttf";

Pueden ver una demostración en linea de Font.js directamente desde la pagina del proyecto. En la misma van a encontrar mucha información sobre como utilizar este pequeño toolkit.

Web: Font.js

Entre las principales características podemos destacar:

• Instalación sencilla.
• Fácil personalización del contador.
• Bloqueo por IP’s.
• Vista rápida de la información más importante.
• Integración sencilla con MySQL.
• Gráficos diseñados simplemente con CSS.

Al momento de escribir esta entrada la versión vigente del sistema es la 3.0, en la cual se mejoraron y agregaron muchas de las principales características del sistema de estadísticas.

Pueden ver una demostración totalmente funcional en la web oficial de ChiliScripts.

Web: ChiliStats ~ Via: PixelCo