Whatever Code

Laravel es un framework MVC diferente. Cuando pensabamos que ya no había forma de innovar PHP, Laravel apareció para salvar el mundo. Bueno, quizás no tanto como eso, pero sí para ofrecernos muchas ventajas:

• Instalación sencilla
• Routers con parámetros de URL
• Controladores completamente REST
• Modelos con Eloquent, un ORM muy fácil de usar
• Vistas en Blade, un sistema de templating opcional
• Artisan, un cliente de consola para automatizar tareas
• Y bundles, módulos que podemos descargar para extender nuestra aplicación

Y si bien muchos frameworks ofrecen algo o todo lo anterior, Laravel pone el acento en mantener el código simple y legible:

// Definimos la ruta al perfil de un usuario
Route::get('/users/(:num)', function($id = 1) {

    // Obtenemos los datos del usuario de la base
    $data = Users::where_id($id)->get();

    // Imprimimos una template utilizando esos datos
    return View::make('profile')->with($data);
});

Hoy vamos a dar los primeros pasos en su amplio mundo. Siéntanse como en casa.

Continuar leyendo...

Muchas veces en nuestro HTML queremos almacenar información complementaria sobre un elemento, que no necesariamente sea visible para el usuario.

Supongamos que tenemos un listado de películas y queremos marcar con un atributo común todas aquellas que pertenecen a la categoría acción, para luego poder acceder a esas películas de forma unificada.

Lo que mucha gente hace es utilizar una clase CSS:

<li class="action">Die Hard</li>
<li class="action">Rambo</li>

Este método resulta útil porque podemos encontrar todos esos elementos desde jQuery al buscar por $('.action').

Pero... no es una buena idea. Si la clase CSS funciona como una simple marca o referencia... entonces no debería ser una clase.

No sólo no es adecuado en términos semánticos: en la práctica, podemos perder de vista esta clase ficticia entre otras que sí aportan estilo:

<li class="action red-box">Rambo</li>

... y pronto terminaríamos agregando más clases para más categorías:

<li class="sci-fi">Star Trek</li>

¡Comienza el caos! ¿Cómo reconocemos las clases que alteran el estilo del elemento y las que guardan información? Vamos a ver una solución más elegante.

Utilizando atributos data en HTML

En HTML5 disponemos de los atributos data, que vienen a cumplir con lo que necesitamos: especificar ciertos datos arbitrarios para un elemento.

<li data-category="action">Die Hard</li>
<li data-category="action" class="red-box">Rambo</li>
<li data-category="sci-fi">Star Trek</li>
<li data-category="sci-fi, action">Matrix</li>

Comienzan con el prefijo data- y continúan con cualquier string que querramos, en este caso category.

Un mismo elemento puede tener muchos atributos data:

<li data-category="sci-fi" data-rating="5" data-lightsabers="no">Star Trek</li>

Y no sólo evitamos utilizar clases si no que nuestro código resultará mucho más ordenado y legible.

A continuación, veamos como seleccionar y obtener data desde jQuery.

Continuar leyendo...

Si necesitamos crear el backend para algún proyecto sencillo en PHP, quizás no necesitemos un gran framework con miles de opciones como CodeIgniter o Laravel. Pero quizás tampoco convenga escribir el sistema de cero, para no reinventar la rueda.

A mitad de camino se encuentra Slim, un micro framework PHP para crear aplicaciones REST con una sintaxis muy simple. Desde el router asociamos cierta pedido HTTP con funciones anónimas, de esta manera:

<?php

// Instanciamos nuestra aplicación
$app = new \Slim\Slim();

// Asociamos una URL a una función deduciendo el parámetro name
$app->get('/hello/:name', function ($name) {
    echo "Hello, $name";
});

// Ponemos en marcha el router
$app->run();

Al ingresar en /hello/world se ejecutará la función y entonces veremos en pantalla el mensaje.

A continuación, vamos a repasar cómo instalar Slim, trabajar con parámetros de URL, probar su sistema de templates y construir un sencillo API REST.

Continuar leyendo...

Todo era más fácil tiempo atrás, cuando la mayoría de los monitores tenían una definición de 1024 x 768. Hacer un website que se viera bien en cualquier pantalla se traducía a hacerlo de 960px de ancho, con 12 o 16 columnas de 60px o 40px respectivamente. Por eso se popularizaron las grillas 960, como 960gs.

Pero luego se popularizaron las pantallas widescreen, se incrementó la navegación vía smartphones y las tables hicieron su aparición estelar. De diseñar para una resolución casi fija pasamos a tener que tener en cuenta decenas, multiplicadas por la orientación: no es lo mismo la pantalla de un iPhone en vertical (portrait) que en horizontal (landscape).

¿Cómo hacemos que nuestro sitio se vea bien sin importar el tamaño de la pantalla? Una opción es desarrollar otro sitio especialmente para dispositivos móbiles, pero implica duplicar el trabajo.

Para nuestra salvación, existen las media queries, condiciones que nos permiten agregar porciones de código CSS sólo ante determinadas características del dispositivo, por ejemplo, cuando el tamaño de la pantalla es inferior a cierta medida.

Por ejemplo, si el ancho de la pantalla no supera los 320px, quiero que el tamaño de letra sea de 18px:

@media screen and (max-width: 320px) {
    body {
        font-size: 18px;
    }
}

¡Yeah! Media queries a la orden. Pero hay mucho más para descubrir, vamos a verlo a continuación.

Continuar leyendo...

Si la primera vez que visitaste la documentación de Backbone saliste corriendo, este es el tutorial que buscabas. Hoy vamos a dar un vistazo rápido por las características principales de este framework Javascript, sin sumergirnos en detalles complicados, aplicando lo que repasemos en un proyecto concreto. ¡Adelante!

¿Para qué?

Para crear aplicaciones web de una sóla página que actualicen sus datos vía Ajax. ¿No lo podemos hacer con jQuery? Sí, pero sin un framework terminarías con un spaghetti code de aquellos.

¿MV qué?

Backbone y otros frameworks Javascript similares adaptan al frontend la arquitectura MVC, pero casi nunca completamente. En general tienen modelos, vistas... y algunos reemplazan el controlador por un router, otros por colecciones, otros los descartan. Por eso se los denomina frameworks MV*.

¿Por qué Backbone?

Es el framework más popular en la actualidad. Su autor es creador de CoffeScript. Tiene una gran integración REST y se lleva perfecto con los frameworks del lado del servidor como Laravel o Rails.

Manos al código

Para utilizarlo necesitamos Underscore.js, que es su única dependencia directa, más alguna librería para consultar el DOM como jQuery o Zepto. No es obligatorio, pero si nos va a servir para aprovechar al máximo la capacidad de Backbone.

<script src="js/jquery.min.js"></script>
<script src="js/underscore-min.js"></script>
<script src="js/backbone-min.js"></script>

Vamos a crear nuestro primer Modelo:

superhero = Backbone.Model.extend();

¡Tadam! Ya estamos usando Backbone. Pero... ¿qué acabamos de hacer?

Continuar leyendo...