Grupo de Usuarios Adobe

La web es un mundo en constante movimiento, donde los cambios se dan vertiginosamente y en el que mantener el espíritu de siempre aprendiz es vital para mantenerse al ritmo.

La aparición del primer iPhone, y con él la era de los smartphones con navegadores de verdad fue una nueva vuelta de tuerca en una web donde nuestro querido CSS 2.1 y su atributo “media” (que nos permite aplicar una hoja de estilos específica para impresión, “handsets”, etc.) no pudo responder a los retos que se le planteaban, básicamente porque los fabricantes hacían poco o ningún esfuerzo por implementarlo correctamente.

Los dispositivos comenzaron a salir y el reto se hacía cada vez mayor: ¿Cómo adaptar nuestro sitio para que se vea bien en la mayor cantidad de dispositivos posibles? ¿Hago un sitio fijo y que cada quién lo vea como pueda? ¿Un layout líquido/elástico que se adapte a las distintas pantallas y resoluciones? ¿Mejor un diseño para cada dispositivo (móvil, tablet, monitor) y redirigir al que corresponda? Sí, las cosas se complicaron, y aún se complican.

En mayo de 2010, Ethan Marcotte escribió un artículo en A List Apart (y más tarde un libro con el mismo nombre que no me canso de recomendar) sobre lo que llamó: Responsive Web Design, inspirado por una tendencia de la arquitectura moderna, conocida como responsive architecture y el, en mi opinión, brillante artículo escrito en el 2000 por John Allsopp: A Dao of Web Design. En él presenta su propuesta de crear un sistema que permita adaptar nuestro sitio a los distintos dispositivos en los que será visualizado. Para ello, Ethan hace uso de tres técnicas:

1. Fluid Grids (Cuadrículas fluídas/líquidas).
2. Fluid Images (Imágenes fluídas/líquidas).
3. Media Queries.

La intención detrás del Responsive Design no es simplemente crear un sitio que pueda ser visto correctamente independientemente del dispositivo sino que además pueda ser también accesible, legible y usable en diferentes ambientes, sobre todo en un mundo donde la proliferación de tamaños, resoluciones y modos de uso aumenta cada vez más haciendo imposible predecir desde dónde será leída la información de nuestro sitio y por tanto crear una interfaz para cada caso una tarea insostenible o, cuando menos, sumamente costosa.

Por supuesto, a medida que aumentó la adopción de CSS3, RWD ha ido creciendo en popularidad, saltando incluso del campo de CSS hacia Javascript, para superar las dificultades que se han ido presentando en la implementación de un sitio responsivo.

En los siguientes artículos de esta serie profundizaremos en las técnicas de CSS que conforman el Responsive Web Design, al final hablaremos también de sus ventajas, sus desventajas, la forma óptima de aplicarlo y veremos luego algunos recursos que la comunidad frontend ha desarrollado a su alrededor.

Nota: La imagen que encabeza este post es tomada de Beginners Intro: Considering Responsive Web Design, por Harry Wiseman para Inspiration Feed.

The Fricky! es Web Developer, Aikidoka y entusiasta de la web. También escribe en su blog El Aprendiz… y en Twitter como @the_fricky

Continuamos con nuestros invitados especiales, en esta ocasión se trata de Karelia Espinoza (@kareta), con quien conversamos sobre la ley SOPA y el blackout realizado en su contra el 18 de enero, por supuesto, conversamos también sobre los otros intentos (algunos de ellos con éxito) de censurar internet.

También tuvimos la oportunidad de conversar sobre su más reciente proyecto, Barquisimeto Móvil (@barquisimovil), un emprendimiento de cobertura de eventos en vivo a través de los social media. Karelia nos comentó acerca de su experiencia piloto en la cobertura del Día de la Divina Pastora y sus proyecciones a futuro.

En esta ocasión abrimos con la banda Los Mesoneros con su tema Sol Rojo y cerramos con Los Henry Zakka y su versión de Sálvame, de Karina (sí, leíste bien, Karina, pero no te asustes… mucho )

Comunidad, no quiero que piensen que me he olvidado de ustedes y para demostrarlo les dejo un corto artículo de cómo hacer búsquedas utilizando el API de Twitter y utilizarlas en nuestras aplicaciones hechas en PHP.

Obviamente necesitas conocimientos en PHP para realizar esto, los métodos que vamos a utilizar de PHP para realizar este ejemplo son:

• file_get_contents
• json_decode

El API de Twitter no es algo de otro mundo, las llamadas al API para obtener información de tweets, usuarios, etc se hacen vía HTTP y en este ejemplo vamos a utilizar el URL http://search.twitter.com/search.json el cual nos retornará un archivo en formato JSON con la información de nuestra búsqueda.

NOTA: Twitter nos provee de una consola en donde podemos probar las búsquedas y ver que valores no regresa en https://dev.twitter.com/console

Los parámetros para realizar nuestra búsqueda lo vamos a realizar vía GET y los parámetros que vamos a utiliza son:

• rpp: indica el numero de tweets a retornar, el valor máximo que puede retornar con 100 tweets que contengan el hashtag utilizado.
• q: termino o hashtag que queremos buscar.

NOTA: También para realzar búsquedas se puede utilizar el método POST, pero eso les queda de tarea para la casa. Para mas parámetros pueden consultar en el sitio de developers de Twitter

Como hacer la búsqueda de un hashtag via GET en Twitter con PHP

Bueno ahora si, vamos al grano. El ejemplo de este artículo es muy sencillo, lo que vamos a realizar un archivo PHP que reciba el contenido del URL http://search.twitter.com/search.json los decodifique y lo transformemos en un arreglo para obtener la información:

Ejemplo:

<?php

// URL con los parametros de busqueda
$url =  'http://search.twitter.com/search.json?rpp=50&q=enchingatown';

// Hacemos el llamado del URL el archivo lo almacenamos en una variable
$json = file_get_contents( $url );

// Convertimos el archivo retornado en un arreglo
$decode = json_decode($json, true);

// Por cada tweet obtenemos su informacion un lo mostramos
foreach( $decode['results'] as $result )
{
    echo '<p>';
    echo '<pre>';

    echo 'created_at: ' . $result['created_at'].'<br />';
    echo 'from_user: ' . $result['from_user'].'<br />';
    echo 'from_user_id: ' . $result['from_user_id'].'<br />';
    echo 'from_user_id_str: ' . $result['from_user_id_str'].'<br />';
    echo 'id: ' . $result['id'].'<br />';
    echo 'id_str: ' . $result['id_str'].'<br />';
    echo 'iso_language_code: ' . $result['iso_language_code'].'<br />';
    echo 'profile_image_url: ' . $result['profile_image_url'].'<br />';
    echo 'source: ' . $result['source'].'<br />';
    echo 'text: ' . $result['text'].'<br />';

    echo '</pre>';
    echo '</p>';
}