php

Cómo crear aplicaciones en PHP con Laravel

por

Laravel PHP

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...

html5

Quick Tip: Cómo aprovechar al máximo los atributos data en HTML5

por

HTML5 Data

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...

php

Slim, mini framework REST para PHP

por

Slim PHP

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...

css

Responsive Design con CSS3 Media Queries

por

Responsive Design

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...

javascript

Backbone.js, una intro rápida y furiosa

por

Backbone.js

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...

bootstrap

X-editable, edit in place para Bootstrap

por

xEditable con Bootstrap

Supongamos que en algún proyecto pequeño tenemos que mostrar un listado de items y ofrecer la posibilidad de editarlos, manteniendo persistencia con el servidor a través de llamadas HTTP.

Como los datos no son muchos y no van a ser actualizados masivamente, no vale la pena crear una gran estructura, quizás ni siquiera una vista de formulario para cada item... es ahí donde nos conviene utilizar un plugin edit in place para simplificar y agilizar la actualización.

Para esto (y mucho más) existe X-editable, un excelente plugin de jQuery para crear listados con edit in place, disponible en tres sabores: Bootstrap, jQuery UI o jQuery simple. ¡Con un POST al servidor en cada cambio!

Continuar leyendo...

templating

Mustache, templates para cualquier lenguaje

por

Mustache Templates

Las librerías de templating sirven para generar HTML al mezclar dos ingredientes: una plantilla y un set de datos. La plantilla contiene espacios que serán ocupados por los datos.

Hay muchas opciones según el lenguaje que utilicemos, pero hoy vamos a ver Mustache, un conjunto de reglas para crear templates especialmente efectivas ya que pueden ser interpretadas por cualquier lenguaje, desde PHP hasta Javascript. ¿Y por qué se llama así? Porque los espacios a reemplazar por datos se encierran, justamente, entre {{bigotes}}.

Supongamos que tenemos estos datos:

{
    name: "John",
    age: 25
}

... y la siguiente template escrita en Mustache:

<p>Hello, my name is {{name}} and I'm {{age}} years old.</p>

Al parsearlo obtendremos lo siguiente:

<p>Hello, my name is John and I'm 25 years old.</p>

Como ven, Mustache reemplaza las variables entre bigotes por los correspondientes valores del hash que le hayamos pasado.

¿Parece simple? ¡Lo es! Pero tiene muchos más trucos bajo la manga.

Continuar leyendo...

patterns

¡MVC para todo el mundo! · Primera parte

por

Model View Controller

En Whatever Code vamos a compartir muchos recursos que siguen la filosofía MVC: Modelo, Vista, Controlador. Por eso antes que nada vamos a hacer un repaso general por el concepto, sus partes y cómo se aplican tanto en el backend como en el desarrollo frontend.

Sin meternos mucho en la historia, MVC surge por la necesidad de diferenciar a los principales actores de un sistema determinado. Cada parte va a cumplir un rol específico para evitar el código desordenado y promover la separación de responsabilidades:

Modelo

El modelo será el encargado de administrar la información. Será el único que se comunique con el sistema de almacenamiento de los datos - por ejemplo, un archivo de texto o una base de datos - tanto para leer como para actualizar su contenido.

Vista

La vista se encarga de mostrar esa información al usuario, la mayoría de las veces a través de una interfaz gráfica como un sitio web, una aplicación mobile o la pantalla de un cajero automático. Por no sólo muestran si no que escuchan, porque son quienes capturan las órdenes del usuario: desde un click hasta el envío de un formulario.

Controlador

En medio de esas dos instancias se encuentra el controlador. Actúa como intermediario: toma las órdenes del usuario capturadas por la vista, se encarga de las validaciones necesarias y pide los datos al modelo. Una vez que los recibe, los adapta en caso de ser necesario y los despacha hacia la vista para que sean mostrados al usuario.

Continuar leyendo...

jquery

Disponible jQuery 2.0 BETA, el primero en no soportar Internet Explorer 6, 7 y 8

por

jQuery 2

Internet Explorer nos ha dado infinidad de dolores de cabeza.

Y si no sufrimos aún más fue gracias a jQuery: nuestra librería Javascript favorita hace mucho trabajo detrás de escena para que las viejas versiones de Internet Explorer se comporten más o menos como un navegador moderno... con un gran costo: cientos de líneas de código están dedicadas a corregir bugs de IE6 y sus amigos.

Por eso, tal como habían anunciado para el principio de este año, han lanzado la versión 1.9: la última en soportar Internet Explorer 6, 7 y 8. Y como si fuera poco, la beta de la versión 2.0, que les dice adiós de forma definitiva. ¡Hasta siempre!

Continuar leyendo...

css

Foundation Framework te salva la vida

por

Foundation

Hoy vamos a ver Foundation, de Zurb, un completo set de CSS y Javascript para utilizar como punto de partida en nuestros diseños.

El CSS trae definidos estilos para botones, tablas, barras de carga, paneles, tabs y mucho más. El Javascript opcional nos permite crear componentes como slideshows, modal y galerías de imágenes.

Además, está pensado para ser adaptativo: cuenta con una grilla que adapta su tamaño a las diferentes resoluciones de pantalla, teniendo en cuenta los dispositivos móviles como smartphones, tables y más.

Continuar leyendo...

css

Switch ON – OFF estilo iPhone en CSS3

por

CSS3 iPhone Switch Button

Hoy vamos a crear un switch ON – OFF al estilo iPhone utilizando sólo CSS, sin utilizar imágenes ni Javascript. En el proceso, vamos a repasar algunos selectores de CSS muy útiles: como apuntar a un objeto adyacente, de cierto tipo o estado. ¡Let’s go!

Continuar leyendo...

placeholders

LoremPixel, el Lorem Ipsum de las imágenes

por

La vida sería más fácil si existiera un Lorem Ipsum de fotos... Eso mismo pensó la gente de LoremPixel, un servicio web de fotografías aleatorias listas para usar en el proyecto que necesitemos.

No necesitamos instalar nada para comenzar a usarlo: sólo tenés que insertar un tag img como siempre apuntando a lorempixel.com seguido del ancho y el alto deseado, de la siguiente forma:

<img src="http://lorempixel.com/900/275/">

... y obtendremos una imagen random de 900px de ancho por 275px de alto, por ejemplo:

Continuar leyendo...

css

CSS3 PIE · Efectos CSS3 en Internet Explorer

por

CSS3 en Internet Explorer

Desde que CSS3 anda dando vueltas por la web podemos disfrutar de bordes redondeados, sombras y degradados sin tener que recurrir a imágenes, Javascript o contenido no semántico en nuestro HTML. Todo era paz y felicidad hasta que alguien preguntaba: ¿esto compatible con Internet Explorer?

Si bien no afecta demasiado que un borde redondeado se muestre cuadrado en IE – sobretodo cuando sus usuarios están acostumbrados a ver todo de forma ligeramente diferente – a veces nos vemos obligados a que nuestro sitio se muestre igual en todos los navegadores y eso nos hacía caer en los mismos recursos de antes, duplicando nuestro trabajo. ¡Hasta ahora!

Para aliviar nuestras penas surge CSS3 Pie, un plugin que nos permite usar CSS3 en Internet Explorer, desde su versión 6 en adelante. Sí, es verdad, podemos hacer que el temido IE6 muestre correctamente los atributos CCS3. ¡It’s magic!

Continuar leyendo...

templating

Crear HTML simple con Markdown

por

Markdown

Markdown es un tipo sintaxis muy simple para dar formato a un texto plano y exportarlo como HTML.

Por ejemplo, si en Markdown escribimos:

# Este es un título

Este es un párrafo con **negritas**.

- Y esta es una lista
- de varios elementos

... obtendremos el siguiente HTML:

<h1>Este es un título</h1>
<p>Este es un párrafo con <strong>negritas</strong>.</p>
<ul>
    <li>Y esta una lista</li>
    <li>de varios elementos</li>
</ul>

Los archivos Markdown, entonces, no son más que texto plano guardado con la extensión .md.

Para convertirlos en el HTML que terminamos mostrando, utilizamos algún plugin de los cientos disponibles para para PHP, Ruby, Javascript, Python, Java o el lenguaje de nuestra preferencia.

¡También podemos convertirlo online!

Continuar leyendo...

apps

Sublime Text, el editor de código que buscabas

por

Sublime Text

Sublime Text es un editor de texto con muchas herramientas que lo convierten en la mejor opción cuando pensamos en escribir código fuente de manera veloz.

Antes de Sublime Text yo utilizaba otro conocido editor llamado Notepad++. Me había acostumbrado mucho a ese programa, estaba cómodo, era como estar en casa. Pasar a Sublime Text fue como mudarme a una mansión con todos los lujos: no me costó mucho adaptarme y disfrutar de todas sus ventajas.

En este repaso, algunas de las razones por las cuales Sublime Text es un editor que vale la pena probar.

Continuar leyendo...

javascript

Moment.JS: fechas legibles, timeago y más

por

Moment JS

Moment.js es un librería Javascript que nos permite parsear, manipular y dar formato legible a todo tipo de fechas.

Es decir, poder pasar de un timestamp:

var date = moment.unix(1357366882);

... a una fecha legible:

date.format('MMMM D, YYYY, h:mm:ss a'); // January 5, 2013, 3:21:22 am

O incluso calcular el tiempo transcurrido desde esa fecha:

date.fromNow(); // 10 minutes ago

... en el idioma que elijamos:

moment.lang('es');
date.fromNow() // hace 10 minutos

Continuar leyendo...

bootstrap

Editor WYSIWYG con Bootstrap y HTML5

por

Editor HTML5

Los editores WYSIWYG - What you see is what you get - son muy utilizados para darle formato enriquecido a un texto online, por ejemplo un post de un blog.

Permiten que el usuario pueda editar contenido como si de Word se tratara y crear el código HTML acorde detrás de escena. En cierto sentido reemplazan y mejoran la experiencia de los clásicos textarea.

Quizás los más conocidos sean TinyMCE (utilizado por Wordpress) o el CKEditor. ¡Pero hay opciones más modernas!

Continuar leyendo...

bootstrap

Bootstnip: Snippets útiles para Bootstrap

por

Bootsnip

Bootsnipp es un sitio donde encontraremos una gran galería de snippets para Twitter Bootstrap. Contiene maquetados listos de tipos de páginas muy utilizadas, como por ejemplo:

Cada layout utiliza los estilos de Bootstrap a los que ya estamos acostumbrados y que siempre nos hacen la vida más fácil.

Continuar leyendo...

bootstrap

Twitter Bootstrap: estilo rápido para tus aplicaciones

por

Twitter Bootstrap

Supongan que programan su primer sitio: parten de cero y de a poco le dan estilo a los botones, los formularios, las tablas, los títulos... Luego, hacen otro sitio: recorren el mismo camino, pero cambian algunos colores. Y luego otro desarrollo, y otro... Hay mucho código que se va a repetir, el estilo básico sobre el que podemos construir. ¿No sería genial tener ese CSS base y algunos plugins de jQuery para poder maquetar un sitio rápidamente? De eso se trata Twitter Bootstrap.

Si los raptaron los extraterrestres el último año y todavía no lo utilizaron, corran a descargarlo porque hoy vamos a analizar sus principales características.

¿Qué es? Es un conjunto de estilos CSS que podemos integrar a cualquier proyecto web para darle el estilo moderno y atractivo de Twitter a todos los elementos de nuestra página (como botones, formularios, tablas, listas y más).

Siguiendo el markup HTML indicado y aplicando las clases de CSS incluídas, podrán obtener grandes resultados en poco tiempo: desde crear un menu horizontal de tabs hasta hacer que tus tablas se vean lindas.

Continuar leyendo...

blog

New Year's Revolution

por

¡Bienvenidos a Whatever Code! Un blog sobre tecnología, programación y cultura en general: cine, libros, comics y música. En resumen: voy a tratar de hacer el blog que yo leería. Espero que me acompañen en este año que recién empieza, prometo no abandonarlos a mitad de camino. ¡Adelante!