Planet Webdev

Maestros del Web (Editorial): GeeksOnAPlane: emprendimientos de Miami y México DF

Thu, 17 May 2012 14:54:45 +0000

No hay mejor manera de abrir este articulo que citando a uno de los emprendedores y organizadores que hicieron que Geeks On A Plane llegara a tierras Aztecas:

Lo que esta ahora sucediendo en la casa del Embajador de Estados Unidos en México pasara a la historia como un momento clave para el emprendimiento en Latino América – Cesar Salazar – Cofundador de Mexican.vc

Estoy completamente de acuerdo con Cesar, pero creo que no solo ha sido ese momento lo que ha marcado un hito en el ecosistema de emprendimiento de América Latina; ha sido el esfuerzo colectivo de todas las diferentes iniciativas de emprendedores de Latino América durante un periodo de 5 años que ha logrado que estemos ahora pasando por una de las mejores etapas en países como México, Chile, Colombia, Argentina y Brasil.

Como todo, no siempre los primeros exploradores han sido los que han recibido el mérito y el reconocimiento que se merecen, estoy hablando de gente como Tomas Pollak, Nicolas Orellana, Leo Prieto, Juan Francisco Diez, Adan Vecindad, Carlos Mondragon, Santiago Siri, Damian Voltes, Ivan Sosa, Juan David Vargas y muchos otros que han tenido éxito en sus emprendimientos, pero a pesar de ello tenemos que reconocer que nunca hemos dejado de ser un “grupo de geeks” o “frikis” con ganas de cambiar el mundo.

El esfuerzo de plantar la semilla emprendedora esta dando sus frutos con Startups como Welcu, Yogome, Fontacto, Ovia, PreyProject, Frogtek y muchas otras mas que tienen a emprendedores Latino Americanos como fundadores.

Miami como punta de lanza para conectar con Hispanos en Estados Unidos.

Quede muy impresionado con la versatilidad de esa ciudad, a pesar de tener la etiqueta de “turística”; esta haciendo un esfuerzo para hacer uso de lo mejor que tiene: una conexión con dos mundos dentro de un mismo país – contacto con la población inmigrante latina y anglosajona de Estados Unidos.

Nadie conoce mejor a la población hispana en Estados Unidos y Latino Americana que la comunidad de Miami – Adriana Cisneros – CEO de Corporativo Cisneros.

Sin embargo aunque esta ofreciendo muchos incentivos por parte de la Asociación de Empresarios del Condado de Miami y varios grupos de Meetups de Tecnología; no vi un hub de talento para alimentar tu Startup. Esta es una pieza fundamental para cualquier empresa tecnológica pueda crecer en un mercado tan demandante como el de Internet, esto no lo vi reflejado en este viaje; espero en algún momento regresar con mas tiempo para tener esto mas claro.

Definitivamente hay capital en la ciudad, aunque no veo que sea un capital inteligente en el sentido que tenga la experiencia de fondear Startups y entiendan la tolerancia al riesgo que se requiere de un inversor en tecnología. Esto no quiere decir que no se pueda recibir inversión de capital riesgo o algún business ángel, en años venideros aterrizaran muchas empresas Latino Americanas en aquella hermosa ciudad que nos hechiza con sus playas y su ambiente Latino que se respira en cada esquina.

Miami será una excelente opción cuando lleguen a tener suficientes Startups y empresas de tecnología en los alrededores para poder auto-abastecerse para que entre ellas mismas se puedan sustentar; sobre todo la necesidad de talento que requiere un ecosistema de emprendimiento tecnológico.

StartupWeekend Mexico DF, el pais Azteca despertando el interes de geeks de Silicon Valley.

Algo que se ha venido trabajando desde el 2009 con el primer evento de emprendimiento en la Ciudad de Mexico por parte de la iniciativa de iWeekend, varias reuniones de hackers Mexicanos como el SuperHappyDevHouse y MobilecampMX. Ha culminado con 4 eventos de StartupWeekend en México (Guadalajara, Aguascalientes, Morelia y Tijuana) con rotundo éxito y que se proyecta hacer más de 15 en todo el país.

Lo que hace memorable esta tercera edición de México DF sea espectacular, es que tuvo un jurado estelar con figuras como David Weekly, Dave McClure, Allen Taylor, e integrantes de GeeksOnAPlane y mas juzgando a 11 proyectos con un potencial de primer nivel. Se reunieron los líderes de todas la comunidades de tecnología de México desde Guadalajara hasta San Luis Potosí, trajeron a su mejor talento y se vio claro en lo que son los 3 primeros lugares del evento.

Estamos buscando proyectos que podamos fusionar con Startups en SiliconValley y el ganador de StartupWeekend tiene muchas sinergias con TaskRabbit una empresa de nuestro portafolio – Dave McClure hablando de Encarguitos.

Con el primer lugar que fue Encarguitos, así como Legal You (2do lugar) se vio claro como se pudo identificar una necesidad a nivel global, poder ejecutar a nivel local y como poderla escalar de manera orgánica. Esa fue la propuesta de valor que tuvo Encarguitos, que merecidamente ganaron en StartupWeekend México DF.

Me llamo la atención Instareal que es una app para colocar bienes inmuebles de manera sencilla y sindicalizarlos en varias plataformas de búsqueda de bienes raíces. La mención honorífica de RockMob fue para una app que te ayuda a poder quitar la “frustración” de aprender a tocar un instrumento musical y pudieron hacer una demostración en vivo para que alguien pudiera tocar una guitarra.

Convivencia de emprendedores, hackers e inversores en América Latina.

Lo mejor que esta haciendo Geeks On A Plane, es habilitar eventos donde se reúne gente clave de las diferentes comunidades y provoca que puedan establecer una conexión que aunque sea momentánea, tenga el potencial de habilitar futuras conversaciones. Hemos visto eventos como Traweln y La Red Innova que han permitido mediante conferencias hacer estas conexiones en Chile y España, con representación por parte de iniciativas Ibéricas como Digital Asset Deployment (DAD – fondo de inversión) y Smartup (firma de marketing digital).

Ya que en un periodo de 10 días sabemos que la intimidad de compartir cuartos de hotel, comidas, cenas, almuerzos y como no, algunas bebidas “refrescantes” permitirá generar la confianza necesaria para que se pueda trabajar en futuros proyectos.

La confianza que genera un emprendedor en el inversor, es la misma que tiene que generar un fondo de inversión con sus inversores. Es una pieza clave para que cualquier ecosistema de emprendimiento pueda florecer a pesar esta crisis global que se esta viviendo; por eso es clave encontrar a estas “figuras de confianza” para crearlo – Paul Ahlstrom – fundador de Alta Ventures.

Así que no se pierdan lo que se publica diariamente en el hashtag #GOAP en twitter para estar al tanto de lo que acontece en esta gira por Latino America de los Geeks On A Plane.

Claudio Cossio para Maestros del Web.
Agrega tu comentario | Enlace permanente al artículo

Síguenos en: @maestros | Fan page

Variable not found: [Auges] Webcast sobre SignalR: ¡uau!

noreply@blogger.com (José M. Aguilar) — Wed, 16 May 2012 14:36:31 +0000

Simplemente informaros de que el próximo jueves 24 de mayo a las 19:00h (hora peninsular española), participaré en una charla con AUGES sobre SignalR, esa pequeña maravilla de la que ya os he hablado por aquí en varias ocasiones, una ayuda imprescindible a la hora de crear sistemas interactivos, multiusuario y en tiempo real para la web.

El “cartel” oficial del evento es el siguiente:

SIGNALR: APLICACIONES MULTIUSUARIO, ASÍNCRONAS, Y EN TIEMPO REAL. ¡UAU!

¿Te has preguntado alguna vez cómo es posible que en una aplicación web como Google Docs varios usuarios puedan interactuar de forma simultánea? ¿Te interesa la tecnología que usan los grandes como Facebook o Twitter para informarte en tiempo real de que algo ha ocurrido? ¿Piensas que crear un chat basado puramente en ASP.NET no es tarea sencilla? ¿Te gustaría que el servidor pudiera enviar información a los clientes en cualquier momento, sin esperar a que éstos soliciten una página o recurso?

Si has respondido que sí a alguna de estas preguntas, SignalR te entusiasmará. Es un marco de trabajo open source que permite saltarse las barreras impuestas por HTTP y su clásico modelo de petición/respuesta para conseguir aplicaciones más interactivas, dinámicas y colaborativas, en las que el servidor toma la iniciativa.

No te pierdas este evento y aprende a poner un factor “¡uau!” en tus desarrollos.

Os recuerdo que se trata de un Webcast, o sea, que podéis asistir a este evento desde vuestro sillón favorito, acompañados de una buena cerveza y un saco de palomitas. Y por supuesto, es totalmente gratuito.

Lo único que debéis hacer para poder asistir es registraros:

Día: jueves 24 de mayo, 19:00h (hora peninsular española)
URL del registro: https://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032512978&Culture=es-ES

No me faltéis, que paso lista ;-)

Maestros del Web (Editorial): Curso Symfony 2: Instalando Bundles de Terceros

Wed, 16 May 2012 14:13:07 +0000

En reiteradas ocaciones existe la necesidad de implementar librerías de terceros en nuestros proyectos con el objetivo primordial de aprovecharlas, reutilizar código y mejorar nuestros tiempos de entrega; como ya saben en Symfony 2 todo se distribuye en forma de “Bundles” y las librerías de terceros no son la excepción, además en symfony2bundles.org (actualmente http://knpbundles.com/) podrás encontrar miles de bundles que podrías necesitar.

En este capítulo nos concentraremos en la instalación de uno de los Bundles más atractivos para incluir en nuestros proyectos, se trata del StofDoctrineExtensionsBundle por Christophe Coevoet el cual hace una implementación del complemento Doctrine2 behavioral extensions creado por Gediminas Morkevicius, cuyo propósito es proveer de los aclamados Comportamientos (behaviors) de Doctrine; en general explicaremos la configuración de 3 comportamientos ampliamente utilizados, como lo son Timestampable, Sluggable y Loggable, reiteramos que el objetivo del capítulo es la instalación de Bundles de Terceros en Symfony2 y no el de profundizar en todos los comportamientos que provee el StofDoctrineExtensionsBundle.

Paso 1: Instalando el Bundle

En Symfony 2 existen varias formas para la instalación de los bundles de terceros, entre ellas (y la más práctica) es la instalación por medio de submodule en GIT, si no sabes que es GIT te recomiendo visitar http://progit.org/book/es/ y tratar de instalarlo en tu sistema.

Comenzamos instalando la librería principal de Doctrine Behavioral Extensions, para ello accedemos a nuestra consola, nos ubicamos en la raíz del proyecto de symfony y ejecutamos:

~$ git submodule add git://github.com/l3pp4rd/DoctrineExtensions.git vendor/gedmo-doctrine-extensions

Nota

Si tienes problemas puedes descargar manualmente el paquete, sólo debes descomprimir su contenido y copiarlo al directorio /ruta_hacia_proyecto/vendor/gedmo-doctrine-extensions

Ahora si añadimos el StofDoctrineExtensionsBundle:

~$ git submodule add git://github.com/stof/StofDoctrineExtensionsBundle.git vendor/bundles/Stof/DoctrineExtensionsBundle

Nota

Si tienes problemas puedes descargar manualmente el paquete, sólo debes descomprimir su contenido y copiarlo al directorio /ruta_hacia_proyecto/vendor/bundles/Stof/DoctrineExtensionsBundle.

Registramos los Namespaces en nuestro app/autoload.php:

<?php

use Symfony\Component\ClassLoader\UniversalClassLoader;
use Doctrine\Common\Annotations\AnnotationRegistry;

$loader = new UniversalClassLoader();
$loader->registerNamespaces(array(
    'Symfony'          => array(__DIR__.'/../vendor/symfony/src', __DIR__.'/../vendor/bundles'),
    'Sensio'           => __DIR__.'/../vendor/bundles',
    'JMS'              => __DIR__.'/../vendor/bundles',
    'Doctrine\\Common' => __DIR__.'/../vendor/doctrine-common/lib',
    'Doctrine\\DBAL'   => __DIR__.'/../vendor/doctrine-dbal/lib',
    'Doctrine'         => __DIR__.'/../vendor/doctrine/lib',
    'Monolog'          => __DIR__.'/../vendor/monolog/src',
    'Assetic'          => __DIR__.'/../vendor/assetic/src',
    'Metadata'         => __DIR__.'/../vendor/metadata/src',
    // Aquí registramos:
    'Stof'  => __DIR__.'/../vendor/bundles',
    'Gedmo' => __DIR__.'/../vendor/gedmo-doctrine-extensions/lib',
));
// ... resto del archivo

Añadimos el Bundle a nuestro app/AppKernel.php:

<?php

use Symfony\Component\HttpKernel\Kernel;
use Symfony\Component\Config\Loader\LoaderInterface;

class AppKernel extends Kernel
{
    public function registerBundles()
    {
        $bundles = array(
            new Symfony\Bundle\FrameworkBundle\FrameworkBundle(),
            new Symfony\Bundle\SecurityBundle\SecurityBundle(),
            new Symfony\Bundle\TwigBundle\TwigBundle(),
            new Symfony\Bundle\MonologBundle\MonologBundle(),
            new Symfony\Bundle\SwiftmailerBundle\SwiftmailerBundle(),
            new Symfony\Bundle\DoctrineBundle\DoctrineBundle(),
            new Symfony\Bundle\AsseticBundle\AsseticBundle(),
            new Sensio\Bundle\FrameworkExtraBundle\SensioFrameworkExtraBundle(),
            new JMS\SecurityExtraBundle\JMSSecurityExtraBundle(),
            new MDW\BlogBundle\MDWBlogBundle(),
            new MDW\DemoBundle\MDWDemoBundle(),
            // Aquí Añadimos:
            new Stof\DoctrineExtensionsBundle\StofDoctrineExtensionsBundle(),
        );
// ... resto del archivo

Básicamente es todo lo que se realiza para incluir un Bundle.

Paso 2: Configurando el Bundle

En nuestro caso el StofDoctrineExtensionsBundle para funcionar requiere agregar configuración adicional al archivo app/config/config.yml de la aplicación (la mayoría de los bundles pueden detallar tales configuraciones en su documentación), para ello agregamos estos segmentos:

En la sección Doctrine Configuration, añadimos al final el mapping para StofDoctrineExtensions Bundle:

# Doctrine Configuration
doctrine:
    dbal:
        driver:   %database_driver%
        host:     %database_host%
        port:     %database_port%
        dbname:   %database_name%
        user:     %database_user%
        password: %database_password%
        charset:  UTF8

    orm:
        auto_generate_proxy_classes: %kernel.debug%
        auto_mapping: true
        # Añadimos el Mapping para StofDoctrineExtensionsBundle: -------------
        mappings:
            StofDoctrineExtensionsBundle: ~
# ... resto del archivo

Luego añadimos al final del mismo archivo la siguiente configuración:

# Añadimos las configuraciones específicas para el StofDoctrineExtensionsBundle
stof_doctrine_extensions:
    default_locale: en_US
    orm:
        default:
            sluggable: true
            timestampable: true
            loggable: true
            #demás behaviors para activar

Donde default: representa la configuración para todos los entornos, eso quiere decir que puedes añadir una configuración específica para cada entorno.

Paso 3: Utilizando los Comportamientos (Behaviors) en los modelos

En este tutorial nos concentraremos en los comportamientos sluggable, timestampable y loggable, para hacer las cosas más fáciles se recomienda añadir el siguiente Namespace a cada una de nuestras entidades en donde queramos añadir los comportamientos:

// añadimos luego del Namespace de la Entidad:
use Gedmo\Mapping\Annotation as Gedmo;

Algunos Behaviors como Loggable disponen de Entidades propias que requieren crearse en base de datos, para garantizar ello solo debemos ejecutar en consola el comando siguiente, de este modo Doctrine creará las tablas necesarias para almacenar los datos generados por los comportamientos que lo requieran:

~$ php app/console doctrine:schema:update --force

Sluggable: Permite que Doctrine cree automáticamente el “slug” o la típica cadena optimizada para buscadores utilizada comúnmente al indexar artículos de un blog. Para definir el slug debemos tener un campo destino que es donde se almacenará y uno o más campos origen (los Sluggable) de los cuales se construirá el slug y es tan simple como agregar los siguientes Metadatos a nuestros campos del modelo:

    // … dentro de una Entidad
    // Campo origen:
    /**
     * @var string $title
     *
     * @ORM\Column(name="title", type="string", length=255)
     * @Gedmo\Sluggable()
     */
    private $title;

    // … otras variables

    // Campo Destino:
    /**
     * @var string $slug
     *
     * @ORM\Column(name="slug", type="string", length=255)
     * @Gedmo\Slug(style="camel", separator="_", updatable=false, unique=true)
     */
    private $slug;
    // … dentro de una Entidad

Note que el campo desde donde se creará el slug ($title) tiene el Metadato @Gedmo\Sluggable(), de hecho puede definir más de uno. En cambio el campo de destino ($slug) tiene el Metadato @Gedmo\Slug(…) y por convención debe ser uno solo, los argumentos style, separator, updatable y unique son opcionales y se detallan en la documentación propia del autor, en este ejemplo se tiene una forma básica de configuración.

Cada vez que se cree un registro de la entidad, Doctrine automáticamente generará el slug y lo aplicará al campo destino, en el caso de modificaciones depende del valor del argumento updatable.

Timestampable: permite que Doctrine gestione la actualización del Timestamp en campos específicos al realizar operaciones de inserción y/o actualización. Para definir un campo con Timestampable solo debemos añadir el Metadato Gedmo\Timestampable(on=”action”), donde action puede ser created o updated respectivamente.

    // … dentro de una Entidad
    // Campo created:
    /**
     * @var date $created
     *
     * @ORM\Column(name="created", type="date")
     * @Gedmo\Timestampable(on="create")
     */
    private $created;
    // Campo updated:
    /**
     * @var datetime $updated
     *
     * @ORM\Column(name="updated", type="datetime")
     * @Gedmo\Timestampable(on="update")
     */
    private $updated;
    // … dentro de una Entidad

Doctrine automáticamente aplicará un nuevo Date al campo definido on=”create” al crear un nuevo registro de la entidad y actualizará el Timestamp del campo definido on=”update” al actualizar el registro de la entidad.

Loggable: permite que Doctrine lleve un control de Versiones sobre los campos indicados, permitiendo consultar las versiones y revertir hacia una versión anterior.
Para crear campos con log (control de versión) solo debemos añadir a cada campo el Metadato @Gedmo\Versioned(), además de añadir el Metadato @Gedmo\Loggable() a la Entidad correspondiente:

// ... encabezados del archivo
// definimos el Metadato @Gedmo\Loggable() a la Entidad:
/**
 * MDW\BlogBundle\Entity\Articles
 *
 * @ORM\Table()
 * @ORM\Entity(repositoryClass="MDW\BlogBundle\Entity\ArticlesRepository")
 * @Gedmo\Loggable()
 */
class Articles
{
    // … dentro de una Entidad
    // Campo $content será Versionable:
    /**
     * @var text $content
     *
     * @ORM\Column(name="content", type="text")
     * @Gedmo\Versioned()
     */
    private $content;
    // … demás contenido de la entidad

Doctrine automáticamente supervisará los updates hacia los atributos marcados como Versioned de la entidad y llevará un control de versiones en la Entidad (Stof\DoctrineExtensionsBundle\Entity\LogEntry), y gracias al Repositorio de dicha entidad (\Gedmo\Loggable\Entity\Repository\LogEntryRepository) podremos consultar las Versiones e incluso Revertir los cambios (función $logRepositoryInstance->revert($Entity, $version);), aquí apreciamos un ejemplo de un controlador que lista los cambios:

    // Ejemplo dentro de un Controller:
    public function updateArticleAction($id) {
      $em = $this->getDoctrine()->getEntityManager();

      $article = $em->getRepository('MDWBlogBundle:Articles')->findOneBy(array('id' => $id));

      $article->setContent('editado');
      $em->persist($article);
      $em->flush();

      $content = '';
      // ver cambios
      $log = $em->getRepository('Stof\DoctrineExtensionsBundle\Entity\LogEntry');
      /* @var $log \Gedmo\Loggable\Entity\Repository\LogEntryRepository */

      $query_changues = $log->getLogEntriesQuery($article); //use $log->getLogEntries() para un result directo
      $changues = $query_changues->getResult();
      /* @var $version Stof\DoctrineExtensionsBundle\Entity\LogEntry */
      foreach ($changues as $version) {
        $fields = $version->getData();
        $content.= ' fecha: ' .
            $version->getLoggedAt()->format('d/m/Y H:i:s') .
            ' accion: "'  . $version->getAction() . '"'.
            ' usuario: "' . $version->getUsername() . '"'.
            ' objeto: "'  . $version->getObjectClass() . '"'.
            ' id: "'      . $version->getObjectId() . '"'.
            ' Version: "' . $version->getVersion() . '"'.
            ' datos:';
            foreach ($fields as $field => $value) {
              $content.= "-- " . $field . ': '. $value . '';
            }
      }
      // generamos una salida básica
      $r = new \Symfony\Component\HttpFoundation\Response();
      $r->setContent($content);
      return $r;
    }

De esta forma podemos aprovecharnos de algunos de los comportamientos más utilizados de Doctrine, reutilizar código y automatizar tareas en nuestros modelos.

Resumen Final

Como pudimos apreciar con Symfony2 disponemos de una amplia variedad de bundles de terceros a incluir para extender las capacidades de nuestras aplicaciones, aprovechar y reutilizar código mejorando considerablemente el tiempo en el desarrollo de nuestros proyectos; aprendimos que existen diversas formas de incluir nuestros bundles y que en dado caso podemos hacer instalaciones a mano, también de lo importante que es seguir la documentación de cada bundle para agregarlo en el Autoload o Kernel según corresponda y aplicar las configuraciones requeridas por el mismo.

Maycol Alvarez para Maestros del Web.
Agrega tu comentario | Enlace permanente al artículo

Síguenos en: @maestros | Fan page

Anieto2k: dynamo.js, añade un curioso efecto a tu HTML con jQuery

Wed, 16 May 2012 11:50:48 +0000

Dynamo.js es un plugin jQuery que nos permite añadir un curioso efecto a nuestros contenidos HTML. El efecto me recuerda al reloj de la película "Atrapado en el tiempo" de Bill Murray, ya que nos permite definir una serie de palabras que irán solapándose unas sobre las otras como si de el paso de minutos se tratara... no sé como explicarlo mejor, así que será mejor que lo veáis vosotros mismos :D

//HTML
<p>I wish I could 
   <span class="dynamo" data-lines="modify,mutate,morph,switch">change</span>
the text here.</p>

// Javascript
$(function() {
  $('.dynamo').dynamo();
});

Además dispone de solo 4 atributos para personalizar el efecto y todos ellos los indicaremos en el elemento HTML mediante atributos data-* haciendo que este se programe a si mismo.

data-lines: Reemplazos separados por comas, el texto inicial no está incluido.
data-speed: Velocidad de la transición (default: 350ms)
data-delay: Retardo entre ciclos (default: 3000ms)
data-center: Centrar el texto en contenedor dynamo (default: false)

Sencillo, ¿verdad?

Anieto2k: Node.js para yayodesarrolladores web

Wed, 16 May 2012 10:48:26 +0000

Me considero yayodesarrollador web, no por que sea viejo sino por que soy de esa generación de desarrolladores que conocieron la web en su fase 1.0 y que formaron parte de la estandarización de la web 2.0. Soy un desarrollador web que se encuentra más cómodo desarrollando en Javascript "puro" que usando jQuery y que aún recuerda como hacer una petición Ajax "a pelo", usando el objeto XMLHTTPRequest y el odiado ActiveX para que IE no se queje. De esa generación de desarrolladores que acababan de conocer Ajax y lo usaban para todo, hasta para lo que ahora te da vergüenza admitir, que descubrieron que los selectores CSS3 iban a revolucionar el Javascript que conocían y que vieron como Google Chrome, con su motor de Javascript V8 entraba en el mercado para literalmente darle la vuelta. Y aquí es donde entre Node.js, que está basado en el uso de V8 como motor de procesamiento de javascript, pero a diferencia de lo que habíamos visto en nuestros tiempo mozos, hace 10 años, esta vez se usa en el servidor... ¿!EN EL SERVIDOR!?, si si, como lo oyes, puedes programar en Javascript pero en el servidor...O.o. La idea no es nueva, por allá en el 2008 aparecía Jaxer que intentaba hacer algo parecido, y poco más he leido después de él. Y lo que se consigue es acercar las maravillas de un lenguaje como Javascript, con capacidad de orientarse a eventos permitiendo programar de forma asíncrona fácilmente al servidor, todo ello por que este tipo de programación consigue unos resultados de rendimiento espectaculares al estar básicamente en estado latente esperando a que se ejecute el evento X o el evento Y.

Vale vale, pero ¿nos ponemos a ello?

Lo primero es instalarlo, para ello, lo descargamos de la página oficial y lo instalamos (doble click en Windows y en Mac, make && make install en Linux). Una vez instalado ya podemos ponernos a tocar código que es lo que nos gusta!

// Cargamos el módulo HTTP
var http = require('http');

// Creamos un servidor HTTP que devolverá "Hola Mundo!" en cualquier petición
var server = http.createServer(function (request, response) {
  response.writeHead(200, {"Content-Type": "text/plain"});
  response.end("Hola Mundo!\n");
});

// Escuchamos el puerto 8000
server.listen(8000);

// Mostramos un mensaje en la terminal
console.log("Server running at http://127.0.0.1:8000/");

El típico "Hola Mundo" nos muestra ya por donde van a ir los tiros en cuenta al asincronismo que os comentaba. El objeto server, queda asociado al puerto 8000 que ejecutará el callback definido unas líneas por encima. Ahora para ejecutar esto en tu máquina, tendrás que guardar este código dentro de un fichero .js para ser llamado por node.js de la siguiente forma.

node fichero.js

El resultado, en la consola que hemos ejecutado el comando debería parecerse a esto:
(Ver Imagen) Y como la consola indica, nos dirigiremos al enlace http://127.0.0.1:8000/ y veremos el texto "Hola Mundo!". Sencillo, rápido y funcional.

Módulo, módulos y más módulos

Parte del éxito de Node.js reside en la comodidad para trabajar con módulos, y la facilidad de incluirlos a tu proyecto, traído de otros lenguajes se adhiere a nuestros proyectos de forma tan eficiente y práctica que no da pereza generar nuevos y nuevo módulos. De ahí que la comunidad se haya puesto las pilas y haya generado implementaciones de casi todos los componentes que te puedas imaginar.

`npm install package`

El comando npm, se instala con Node.js y mediante esa sencilla sintaxis podemos añadir un módulo a nuestro proyecto o al repositorio global de node.js dejándolo disponible para todos los proyectos dentro de esa máquina (node install -g package).

`package.json`

Para hacernos aún la vida más fácil, podemos especificar el fichero package.json, en el que definiremos el nombre de nuestra aplicación y las dependencias que este necesita.

{
    "name": "application-name"
  , "version": "0.0.1"
  , "private": true
  , "dependencies": {
      "express": "2.5.8"
      , "stylus" : "0.27.0"
      , "coffee-script": "1.3.2"
      , "swig": "0.11.2"
  }
}

Luego, como si de magia se tratara solicitamos que se instalen todas las dependencias del proyecto.

npm install -d

Y automáticamente empiezan a descargar los paquetes y guardarlos en la carpeta node_modules/ del proyecto.
(Ver Imagen) Simplemente eso, cargamos lo que necesitamos y lo empezamos a usar en nuestro proyecto, así de sencillo. Esto da lugar a que un proyecto node.js, incluya frameworks para casi cualquier cosa, para escribir HTML más rápido (jade), para hacer un Javascript más eficiente (CoffeeScript) o para que las CSS's se comporten como un lenguaje de programación (Stylus), o como he dicho antes, para hacer casi cualquier cosa. Incluso, proyectos que juntan estos y otros frameworks/módulos y definen una forma ágil y robusta de trabajar como ExpressJS o Meteor que merecen la pena tratar con más detalle en otra serie de posts.

Línea de código: Poner música en tu web con HTML5

Wed, 16 May 2012 06:00:52 +0000

Una de las cosas que ya está estandarizada en HTML5 es la reproducción de elementos de audio. Es decir, podemos poder música en la web de una forma estándar.

Para poder poner música en las webs, HTML5 ha estandarizado el elemento AUDIO. Así que, lo que tendremos que hacer, para poner un archivo de música será insertar la siguiente etiqueta:

<audio src="cancion"></audio>

Por lo tanto, si nuestra canción es "micancion.mp3" el código a utilizar será:

<audio src="micancion.mp3"></audio>

Si escribimos solamente este código no llegaremos muy lejos ya que, por defecto, el elemento de audio no se muestra. Por lo tanto no podremos utilizar los botones de play, stop, pause,... Así, si queremos que el elemento de AUDIO controls.

<audio src="micancion.mp3" controls></audio>

Así ya tendremos el reproductor que nos permita poner la música en nuestra web con HTML5</a.>

Los formatos que podemos reproducir mediante el elemento AUDIO de HTML5

MPEG-1 audio layer 3, que son los más que de sobra conocidos como MP3 y extensión .mp3.
Advanced Audio Coding, mejoraban la calidad de sonido de los MP3 y es un formato promovido por Apple. Su extensión es .acc. Este formato funciona bajo pantentes
Vorbis, o conocido como Ogg Vorbis. Es un formato libre de patentes. La extensión que utilizan es .ogg

Similar Posts:

Berriart: Ejecutar crons y evitar que se solapen

Tue, 15 May 2012 21:29:09 +0000

En más de una ocasión he tenido problemas de solapamiento a la hora de ejecutar scripts desde el crontab. Porque si decidimos usar un cron job para ejecutar scripts periódicamente con intervalos pequeños de tiempo, o también scripts con mucho tiempo de ejecución (a veces incluso mezclamos ambas cosas) es probable que corramos el riesgo de que los scripts se solapen y se cargue demasiado el servidor, o que incluso ‘se cuelgue’. Pienso además que nos pasa más a menudo a los programadores de PHP (sobretodo porque seguramente ese cron job no debería estar hecho en PHP, pero somos así de monolingüistas).

Una posible solución, y que es la que usaba hasta hace poco, es la de crear un fichero de control: Al iniciar la ejecución del script lo primero sería comprobar si ese fichero existe y comenzar solo si no está creado, si todo va bien lo siguiente sería crearlo para evitar el solapamiento y borrarlo justo al finalizar la ejecución.

Esta solución no me gustaba del todo porque si por cualquier razón el script no acababa de ejecutarse, el fichero de control no se borraba y entonces nunca más se volvía a ejecutar hasta que te dabas cuenta y borrabas el fichero de control manualmente. Por eso he pensado que lo mejor es comprobar directamente si el script está en ejecución antes de lanzar el siguiente sin usar fichero de control.

Para probarlo he usado un script que seguro se va a solapar:

<?php
while(1) {
    $zero = 0;
}

Para ejecutarlo desde el cron lo que he hecho es un pequeño shell script que también va a ser el encargado de evitar el solapamiento:

#!/bin/bash
PHP_EXECUTABLE="/usr/bin/php"
SCRIPT_DIRECTORY="/home/alberto"
SCRIPT_NAME="test.php"
if ps -fea | grep $SCRIPT_NAME | grep -v grep
then
    date
    echo "Overlaping message end"
else
    cd $SCRIPT_DIRECTORY
    $PHP_EXECUTABLE $SCRIPT_DIRECTORY"/"$SCRIPT_NAME > /dev/null 2>&1
fi

Como podéis ver lo que hago es comprobar con el comando ps si el script está en ejecución antes de lanzarlo de nuevo. Lo que hay que hacer luego simplemente es añadirlo al crontab, en mi caso dejando un pequeño log para poder comprobar si se solapa o no:

* * * * * /home/alberto/test.sh > /home/alberto/test.log

¿Qué os parece el método? ¿Qué habéis hecho vosotros si alguna vez os ha pasado?

Anieto2k: LESS.js, CSS enriquecido en el cliente

Tue, 15 May 2012 18:00:07 +0000

Hace unos días vimos SASS, una herramienta pensada para agilizar la maquetación CSS de nuestros proyectos. Vimos que ofrecía una serie de herramientas que nos permitía trabajar con una versión enriquecida de CSS con variables, funciones, anidamiento de selectores,...

LESS.js

Pues LESS.js, nos ofrece más de lo mismo, usando una sintaxis similar a que vimos con SASS, y nos ofrece las mismas maravillas que ya hemos visto.

Variables

@color: #4D926F;

#header {
  color: @color;
}
h2 {
  color: @color;
}

Mixins

.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

Anidamiento de selectores

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

Funciones y operaciones

@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}
#footer { 
  color: @base-color + #003300;
  border-color: desaturate(@red, 10%);
}

Como podemos ver, nuestros CSS's cogen una aspecto de lenguaje de programación que permite dinamizarlas fácilmente.

Compilación en el cliente

A diferencia de SASS, LESS.js permite compilar las hojas de estilos dinámicas (.less) directamente en el navegador mediante una librería JS que cargaremos en nuestras páginas (para Chrome, Safari y Firefox).

<head>
	<link rel="stylesheet/less" type="text/css" href="styles.less">
	<script src="less.js" type="text/javascript"></script>
</head>

Es importante poner las hojas de estilos antes de añadir la librería javascript e indicar que mediante el atributo rel que el tipo de stylesheet del que se trata es uno de los que se han de compilar. Además, nos añade la capacidad de refrescar los estilos mediante el Watch Mode, que podremos activarlo mediante un parámetro en la URL a la que accedemos (#!watch) o desde la consola de Firebug ejecutando less.watch().

Anieto2k: La vuelta a las buenas costumbres y de como han cambiado las cosas

Tue, 15 May 2012 17:43:36 +0000

Dicen que a veces hay que dejar de hacer algo un tiempo para luego volver con más ganas e ilusiones, no sé si será mi caso, pero creo que es el momento de volver. aNieto2k nació para solucionar una carencia de mi memoria, incapaz de almacenar de forma ordenada la cantidad de nuevos conocimientos que estaba absorbiendo en mi evolución como desarrollador, nació con la intención de servirme como hemeroteca de cosillas que probaba, y que explicada con mis palabras me sirviera para volver algún día a revisar como hacer esto o lo otro. Una forma de mantenerme al día en el frenético sector en el que estamos metidos, donde de un día para otro las cosas cambian radicalmente. Y ahora, casi 7 años después, quiero volver a coger las riendas de esa idea. Como todos sabemos y asumimos, las cosas cambian y las personas no son un excepción, lo que hoy te puede parecer lo más interesante de repente te aburre y se vuelve rutinario, a veces sin ningún motivo y otros por que te satura. En mi caso, he sufrido ambos, pasaron los años y lo que hacía con pasión y dedicación cada día se convirtió en una obligación y en ese momento dejó de ser todo lo divertido que parecía en un principio. Creo que ha pasado el tiempo suficiente para volver a cogerlo con ganas y disfrutar como lo hacía antes sin caer en los errores del pasado, tomándomelo con más calma y definir un poco más el camino que quiero que siga el blog.

¿Que ha pasado durante este tiempo?

Personalmente muchas cosas y laboralmente muchas más, pero aunque crea que son muchas no son nada con lo que me he encontrado cuando me he puesto a investigar. En el TODO list, tenía pendiente hacer cositas con Node.js, y cuando he empezado a tirar de la manta se ha destapado todo lo que Node.js ofrece, ya publicaré algunos artículos más concretos para los rezagados como yo que aún no le han metido mano, pero os puedo decir que viendo el código de alguna aplicaciones que hay por internet hace sentirse un abuelo de la programación que aún se sabe de memoria como definir una llamada Ajax usando el objeto XMLHttpRequest, a pelo o hacer los border-radius con una cantidad ingente de div's para incrustar imágenes con los bordes. Como persona que se haya en la mediana edad (si, aunque no nos guste como suene es donde estamos trentañeros :D) tengo sentimientos enfrentados al respecto, unos de rechazo frente a lo nuevo y otros de admiración por los cambios, espero que con el uso se vayan disipando. Así que bueno, pongamos la rueda a rodar a ver hasta donde nos lleva. Gracias por estar ahí!

Línea de código: Listas anidadas con jQuery Mobile

Mon, 14 May 2012 17:52:02 +0000

Ya vimos como hacer una lista simple de elementos y algunos atributos data para modificar esta lista con jQuery Mobile.

En este caso vamos a ver como podemos crear listas anidadas. Es decir una lista que, cuando seleccionemos una opción, nos muestre subopciones de dicha opción. Algo claro si pensamos en ciudades/regiones/países.

En nuestro caso vamos a utilizar ciudades y comunidades autónomas de España. Algo que quedaría de la siguiente forma:

Para crear listas anidadas con jQuery Mobile solo tenemos que seguir la implementación que haríamos directamente en HTML. Ya que será el formateador de jQuery Mobile quien se encargue de realizar la anidación de la lista.

Así el código quedaría de la siguiente forma:

 
<ul data-role="listview" data-inset="true" data-filter="true">
<li>
<h3>Castilla y León</h3>
<ul>
<li><a href="#">Avila</a></li>
<li><a href="#">Burgos</a></li>
<li><a href="#">León</a></li>
<li><a href="#">Palencia</a></li>
<li><a href="#">Salamanca</a></li>
<li><a href="#">Segovia</a></li>
<li><a href="#">Soria</a></li>
<li><a href="#">Valladolid</a></li>
<li><a href="#">Zamora</a></li>
</ul>
</li>
<li>
<h3>Extremadura</h3>
<ul>
<li><a href="#">Badajoz</a></li>
<li><a href="#">Caceres</a></li>
</ul>
</li>
</ul>

Un punto importante para el formato que utiliza jQuery Mobile es que el elemento de la lista superior lo maquetemos mediante un elemento H3.

Este simple código nos ayuda a tener listas anidadas con jQuery Mobile. Pero podemos añadir alguna cosa y es que al entrar en la lista anidada perdemos la referencia a la lista padre. Y es por ello que vamos a insertar un elemento back en la cabecera de la lista anidada.

Para esto nos vamos a apoyar en el API de jQuery Mobile y en concreto en el atributo $.mobile.page.prototype.options.addBackBtn. Y es que inicializando este atributo a true nos aparecerá el botón de back al entrar en la anidación de las listas.

Para configurarlo deberemos de hacerlo al arrancar el framework jQuery. Es en este momento cuando se lanza el evento mobileinit. Por lo cual nos vamos a suscribir a este evento mediante un método .bind() para realizar la inicialización.

$(document).bind("mobileinit", function(){
    $.mobile.page.prototype.options.addBackBtn = true;
});

Y ya tenemos el ejemplo de las listas anidadas con jQuery Mobile montado. Eso sí, una de las cosas que veremos es que se pierden las cabeceras header y footer de la lista inicial. ¿Alguien sabe como resolverlo?Similar Posts:

Maestros del Web (Editorial): Curso Django: El Shell de Django

Mon, 14 May 2012 17:14:50 +0000

En el capítulo anterior, vimos lo fácil que es crear un modelo con Django, en este capítulo veremos que podemos hacer con los modelos. Si llegaste a este capítulo y no leiste los anteriores, quizas lo encuentres un poco dificil de entender, así que dale un vistazo a los capítulos anteriores.

Los modelos nos van a permitir manipular los datos: registrarlos, editarlos, actualizarlos, consultarlos, eliminarlos y realizar procesos con ellos. Toda está manipulación se reflejará luego en las vistas y posteriormente en las plantillas para mostrar los resultados en el navegador, esta manipulación se le conoce generalmente como: Consultas.

El Shell

El Shell es el interprete interactivo de Python, que nos permitirá probar los modelos, hacer consultas, analizar resultados, antes de elaborar las vistas. Es muy útil si queremos ahorrar tiempo al momento de responder a los requerimientos que los usuarios de la aplicación puedan necesitar.

Para poder acceder a la shell, abrimos una terminal o ventana de comandos, y nos ubicamos en la carpeta de proyecto (en donde se encuentre el archivo manage.py) y digitamos:

python manage.py shell

Debemos visualizar el siguiente resultado:

Shell

Lo importante es reconocer los elementos: el prompt se representa por >>> y el resultado de nuestras instrucciones se visualizarán en nuevas líneas (sin ningún símbolo previo a ellas)

Las consultas

Las consultas en base a los modelos de Django son la base de todo el desarrollo en este framework estas consultas nos pueden permitir saber, por ejemplo, la lista de usuarios, los correos electronicos de los que hacen comentarios, el primero comentario de un artículo, los artículos del mes de mayo, y la lista de posiblidades es larga.

Las consultas están descritas muy claramente en la documentación oficial, para poder hacer esto más simple aquí también usaremos esta pequeña chuleta o cheat sheet como también es conocido.

Django Queryset CheatSheet

La referencia de todos estos métodos se encuentran también en la documentación oficial.

Ejemplos

Ahora pasamos a lo divertido, seguimos trabajando con nuestro proyecto de ejemplo, para poder realizar algunos ejemplos tenemos que modificar y corregir el models.py y dejarlo así: (ya no existe el modelo Bebida, ya no es necesario, también se debe eliminar cualquier rastro del modelo Bebida de admin.py)

models.py

Una vez que tenemos listo el models.py , reiniciamos el modelo (si no recuerdas como reiniciar revisa el capítulo: El modelo de datos)

python manage.py reset principal

Una vez con los modelos listos, es hora de probar el interprete interactivo (shell). No olvidar que la siguiente instrucción se debe lanzar desde el directorio donde se encuentra el archivo manage.py

python manage.py shell

Una vez dentro del shell, empezamos a importar los modelos, para ello digitamos

from principal.models import Receta, Comentario

Esta instrucción importa todo el modelo al shell. Aquí es donde podemos consultar el contenido de los modelos y otras consultas, la sintaxis es del tipo:

Nombre_de_modelo.objects.metodo()

Donde podemos reemplazar Nombre_de_modelo y método por las diversas opciones que están en el cheatsheet (chuleta)

all()

En la imagen vemos como resultado una lista vacia [], entonces vamos a agregar elementos, para ello también necesitamos al modelo usuario que ya lo tiene Django, una vez que lo importamos sacamos al usuario cuya llave primaria (pk) sea 1.

User.objects.get(pk=1)

Ahora si introducimos datos a los modelos: (la r es solo una variable cualquiera)

create()

Y comprobamos que se ha registrado:

Receta.objects.all()

Agregamos un comentario a la receta anterior: (la c es solo una variable cualquiera)

create() en Comentario

Agregamos una receta mas: (Se puede escribir todo en una sola línea, yo lo hago para que se vea bien en la imagen)

create() podría ir en una sola línea

Sigamos jugando, ahora mostraremos las recetas cuyos ingredientes no empiecen con la letra A: (notar que luego de ingredientes hay dos guiones bajos)

exclude y startswith

Ahora las recetas, que mencionen en su preparación la palabra ‘tetera’:

filter y contains

Y si queremos ordenar alfabéticamente por titulo de receta:

order_by()

Ahora lo invertimos:

order_by y reverse

Mostramos los comentarios de cada receta:

filter()

Ahora me gustaría actualizar el titulo ‘Huevo Frito’ a la de ‘Huevito Frito’:

update()

Sigo agregando comentarios a la primera receta y deseo saber cuantos comentarios hay hasta el momento en ambas recetas:

count()

Agrego un comentario a la segunda receta (un comentario troll) y luego lo elimino:

delete()

Ahora deseo saber el nombre de usuario y correo electrónico del usuario que agregó la receta con el título exacto de ‘Agua hervida’:

Todo está orientado a objetos

Como verán hacer consultas en Django es simple, sin embargo siempre es bueno tener la documentación a la mano, ya que recordar tantos métodos puede ser tedioso al principio.

Nota:

Las consultas que se realizan en el Shell no se guardan en el proyecto, es por ello que si revisan el repositorio del proyecto de ejemplo, sólo encontraran cambios en models.py y admin.py (retirando la clase Bebida, que ya no es necesaria)

Las consultas son el paso previo a trabajar con las vistas y las plantillas, nos permitirán entregar a los usuarios del proyecto, la información que requieran. El próximo capítulo será: Las vistas.

Práctica tus propias consultas, juega con los modelos, diviértete, que el momento de aplicarlas serán en el próximo capítulo.

Sergio Infante Montero para Maestros del Web.
Agrega tu comentario | Enlace permanente al artículo

Síguenos en: @maestros | Fan page

Variable not found: Enlaces interesantes 82

noreply@blogger.com (José M. Aguilar) — Mon, 14 May 2012 07:15:00 +0000

Estos son los enlaces publicados en Variable not found en Facebook y Twitter del 7 al 13 de mayo de 2012. Espero que os resulten interesantes :-)

Y no olvidéis que podéis seguir esta información en vivo y en directo desde Variable not found en Facebook, o a través de Twitter.

Publicado en Variable not found

Línea de código: Conversaciones sobre Programación. Build 2012.02

Sun, 13 May 2012 21:34:14 +0000

Segunda entrega del resumen en los grupos de conversación de Facebook sobre lenguajes de programación en español. La verdad es que no dejo de estar sorprendido de la cantidad y calidad de las conversaciones en los grupos. Y muy agradecido de toda la gente que está participando en ellos.

Esta semana hemos lanzado uno nuevo, el grupo de conversación sobre Bases de Datos. Y así, de la nada, ya hay 100 miembros conversando. Una pasada.

Pero echemos un vistazo a las últimas conversaciones de los grupos sobre programación en español...

HTML5 en Español
https://www.facebook.com/groups/html5.es/
106 miembros (+31)

Documento de trabajo HTML Polyglot, o lo que quiere hacer la W3C para que los documentos sean multi-idioma.
Un artículo que habla de las 7 tecnologías que sostienen Facebook, de los chicos de Genbeta.
Pregunta sobre cómo poner el Favicon en una página web.
¿Alguién conoce un hosting con soporte de Phyton con Django?
Dudas sobre cómo subir un fichero con un input file y el lenguaje Perl.

Además se están manteniendo varios documentos:

Java en Español
https://www.facebook.com/groups/java.es/
156 miembros (+66)

Lo más importante es que hemos lanzando una encuesta sobre qué IDE utilizarías para empezar a aprender el lenguaje de Java. No dejes de contestar y añadir tus comentarios.

Cómo resolver el método de ordenación de Arrays con el método burbuja
Páginas con tutoriales para empezar con Java (y 2)
Se pedía ayuda sobre cómo resolver el algoritmo del Número Feliz.... y ya está resuelto y publicado.
Se ha comentado y resuelto como construir un programa para calcular la serie de Taylor.
Ayuda para encontrar información y ejemplo de la anotación @Intercepts.
Pablo Ruiz está publicando artículos muy interesantes con los ejercicios de la Certificación Java en su blog.
¿Sirven los tutoriales de Eclipse para Netbeans?
Primeros pasos de JSF, Primera pantalla con JSF y Manejando ManageBean en JSF por Julio Pari.
Ing Guillermo Gonzalez propone ir publicando algoritmos básicos e irles resolviendo para ayudar a la gente que empieza. (y 2)
¿Quieres material de certificación Java?... Ya se ha publicado algunos ejemplos.
Un poco de ayuda en un código con el manejo de Scanner.
Ayuda con Java Server Faces.
¿Qué arquitectura seguir para construir una aplicación web?
Pastebin una buena aplicación para compartir código fuente.
Algoritmos y cia, un buen blog para compartir algoritmos básicos.
Ayuda para declarar un array dónde puedas insertar cualquier tipo de objeto.
Crear ventanas personalizadas con Substances
Aunque no te lo creas, se busca un emulador de MSDOS.
Cómo separar a un número en dígitos.
Capas de persistencia de datos que no sean el típico manejo de sentencias de un modelo E/R.

Javascript en Español
https://www.facebook.com/groups/javascript.es/
84 miembros (+18)

Una chuleta sobre Javascript, bastante interesante.

jQuery en Español
https://www.facebook.com/groups/jquery.es/
99 miembros (+17)

El Hola Mundo con jQuery Mobile

PHP en Español
https://www.facebook.com/groups/HypertextPreprocessor.es/
89 miembros (+26)

Un vídeo sobre la gente de Linux.
El framework CodeIgniter.
Ayuda a Raúl para montar el código que consulta una base de datos y muestra un listado de libros. (y 2)
¿Cómo configurar el PHP en Aptana?
Programación Orientada a Aspectos en PHP
Problemas con el localhost y Drupal.
Algunas novedades de lo que encontramos en PHP 5.4.0

Bases de Datos en Español
https://www.facebook.com/groups/basesdedatos.es/
100 miembros

Una gran acogida del grupo sobre bases de datos en español con una cifra de 100 usuarios desde el inicio.

Similar Posts:

Otro blog más: Los tuits de la semana (45)

Sun, 13 May 2012 18:07:46 +0000

Tampoco ha sido esta una semana especialmente interesante en @chechar…

Los de autobombo

RT @UOCsevilla En el blog -> el 16/05 3a sesión de #debateSIC sobre prospectiva tecnológica con @chechar y Jesús Pérez de @vodafone_es http://territori.blogs.uoc.edu/es/2012/05/sic-prospectiva-tecnologica/

Pues sí, el Miércoles estaré en Sevilla intentando adivinar un poco el futuro… Y el contenido de mi presentación aún puede cambiar:

lo que pienso contar la semana que viene en Sevilla en #debateSIC. se admiten propuestas de mejora ;-) http://j.mp/IGZOzy

Los de diseño y desarrollo web

RT @kazuhito Check out this presentation : For a Future-Friendly Web (Mobilism 2012) http://www.slideshare.net/bradfrostweb/for-a-futurefriendly-web-mobilism-2012

presentación: Polyfills For The Pragmatist http://j.mp/IMfLj5

Apañao, el artículo de Wired sobre A/B testing http://j.mp/IYHSkR

Test Everything: Notes on the A/B Revolution http://j.mp/JeGaYI

RT @lucascepeda Principles of User Interface Design http://bit.ly/J0mfNY #UX #UI

Mozilla Shrinks Memory Use in Firefox (de momento sólo en las nightly) http://j.mp/IFEzsU

impresionante índice de las tecnologías que mueven la plataforma web: http://platform.html5.org/

Y uno de visualización de la información

impresionante selección de herramientas #infoviz de datavisualization.ch http://j.mp/J9JyV2

La semana que viene, más y mejor (esperemos).

Share/Bookmark

Línea de código: Detectar la rotación del dispositivo con jQuery Mobile

Sun, 13 May 2012 18:00:28 +0000

Una de las capacidades de los dispositivos móviles, ya sean smartphones o tablets, es que podemos girar el dispositivo y visualizar el contenido en dos posiciones.

Las dos posiciones son conocidas como landscape (apaisado u horizontal) y portrait (retrato o vertical).

Cuando estamos contruyendo nuestra aplicación para dispositivos móviles es interesante el conocer cuándo el usuario ha decidido rotar el dispositivo. Ya que puede ser que necesitemos reajustar algo en la visualización de nuestra página.

Es por ello que jQuery Mobile nos proporciona un mecanismo para detectar la rotación del dispositivo. Este mecanismo es un evento, el evento orientationchange. Entonces lo que tenemos que hacer es escuchar al evento orientationchange y asignar una función para cuando se produzca dicho evento. Esto lo conseguimos mediante el método .bind().

$(window).bind("orientationchange", function(event){...});

Dentro de la información del evento nos viene la orientación en la que el usuario ha puesto al dispositivo. En concreto viene en event.orientation. Los valores de event.orientation son "landscape" y "portrait".

Así, lo que haremos será, si viene el valor de event.orientation, asignaremos ese valor al contenido de una capa que hemos añadido en el contenido de la página

$(window).bind("orientationchange", function(event){
  if (event.orientation)
    $("#contenido").html("Me han reorientado a " + event.orientation);
});

La capa sería:

 
<div data-role="content">
  Ejemplo que controla la rotaci&oacute;n del dispositivo movil.
  <span id="contenido">Inicio de la Aplicación</span>
</div>

Para la gestión del evento deberemos de esperar a que se haya cargado todo el contenido de la página. Es por ello que pondremos el código de gestión del evento para detectar la rotación del dispositivo dentro del evento .ready() de jQuery.

$(document).ready(function(){
  $(window).bind("orientationchange", function(event){
    if (event.orientation)
      $("#contenido").html("Me han reorientado a " + event.orientation);
  });
});

Por último deberemos de hacer es lanzar, por nosotros mismos, el evento orientationchange para que se calcule la orientación inicial del dispositivo. Pera esto nos apoyamos en el método .trigger().

$(window).trigger("orientationchange");

Similar Posts:

Planet Webdev

Maestros del Web (Editorial): GeeksOnAPlane: emprendimientos de Miami y México DF

Miami como punta de lanza para conectar con Hispanos en Estados Unidos.

StartupWeekend Mexico DF, el pais Azteca despertando el interes de geeks de Silicon Valley.

Convivencia de emprendedores, hackers e inversores en América Latina.

Variable not found: [Auges] Webcast sobre SignalR: ¡uau!

SIGNALR: APLICACIONES MULTIUSUARIO, ASÍNCRONAS, Y EN TIEMPO REAL. ¡UAU!

Maestros del Web (Editorial): Curso Symfony 2: Instalando Bundles de Terceros

Paso 1: Instalando el Bundle

Nota

Nota

Paso 2: Configurando el Bundle

Paso 3: Utilizando los Comportamientos (Behaviors) en los modelos

Resumen Final

Anieto2k: dynamo.js, añade un curioso efecto a tu HTML con jQuery

Artículos relacionados

Anieto2k: Node.js para yayodesarrolladores web

Vale vale, pero ¿nos ponemos a ello?

Módulo, módulos y más módulos

npm install package

package.json

Artículos relacionados

Línea de código: Poner música en tu web con HTML5

Berriart: Ejecutar crons y evitar que se solapen

Anieto2k: LESS.js, CSS enriquecido en el cliente

LESS.js

Variables

Mixins

Anidamiento de selectores

Funciones y operaciones

Compilación en el cliente

Artículos relacionados

Anieto2k: La vuelta a las buenas costumbres y de como han cambiado las cosas

¿Que ha pasado durante este tiempo?

Artículos relacionados

Línea de código: Listas anidadas con jQuery Mobile

Maestros del Web (Editorial): Curso Django: El Shell de Django

El Shell

Las consultas

Ejemplos

Nota:

Variable not found: Enlaces interesantes 82

.Net

Asp.net

Azure / Cloud

Conceptos

Data access

Html/Css/Javascript

Visual Studio/Complementos/Herramientas

Otros

Línea de código: Conversaciones sobre Programación. Build 2012.02

HTML5 en Español https://www.facebook.com/groups/html5.es/ 106 miembros (+31)

Java en Español https://www.facebook.com/groups/java.es/ 156 miembros (+66)

Javascript en Español https://www.facebook.com/groups/javascript.es/ 84 miembros (+18)

jQuery en Español https://www.facebook.com/groups/jquery.es/ 99 miembros (+17)

PHP en Español https://www.facebook.com/groups/HypertextPreprocessor.es/ 89 miembros (+26)

Bases de Datos en Español https://www.facebook.com/groups/basesdedatos.es/ 100 miembros

Otro blog más: Los tuits de la semana (45)

Los de autobombo

Los de diseño y desarrollo web

Y uno de visualización de la información

Línea de código: Detectar la rotación del dispositivo con jQuery Mobile

`npm install package`

`package.json`

HTML5 en Español
https://www.facebook.com/groups/html5.es/
106 miembros (+31)

Java en Español
https://www.facebook.com/groups/java.es/
156 miembros (+66)

Javascript en Español
https://www.facebook.com/groups/javascript.es/
84 miembros (+18)

jQuery en Español
https://www.facebook.com/groups/jquery.es/
99 miembros (+17)

PHP en Español
https://www.facebook.com/groups/HypertextPreprocessor.es/
89 miembros (+26)

Bases de Datos en Español
https://www.facebook.com/groups/basesdedatos.es/
100 miembros