Por Stephanie Taylor, Open Source Programs


Hoy lanzamos el tercer Google Code-in, un concurso internacional que presenta a jóvenes estudiantes (pre-universitarios) de 13 a 17 años al mundo de desarrollo de software de código abierto. La meta del concurso es dar a los estudiantes la oportunidad de explorar los varios tipos de proyectos y tareas involucrados en el desarrollo de software de código abierto. Globalmente, el desarrollo de software de código abierto se está convirtiendo en un factor importante en todas las industrias y gobiernos, desde salud pública y tareas de ayuda humanitaria, hasta juegos y grandes compañías de tecnología.

Cuando escuchas el término "código abierto", te preguntas:
  • Qué es exactamente código abierto
  • Cómo puedo involucrarme en el desarrollo de software de código abierto si apenas estoy aprendiendo a programar
  • Qué tipo de trabajo realizan los proyectos de código abierto
  • Me encantaría participar en código abierto, pero no programo, qué otras cosas puedo hacer
  • Nunca he trabajado en un proyecto global utilizando IRC y grupos de discusión; ¿alguien puede ayudarme?
Si alguna vez te has cuestionado cualquiera de estas preguntas, eres estudiante pre-universitario (de entre 13 y 17 años), entonces deberías unirte a la fiesta en el concurso Google Code-in que empieza el 26 de noviembre de 2012.

Desde finales de noviembre y hasta mediados de enero, los estudiantes podrán trabajar con 10 proyectos de código abierto en una variedad de tareas. Estos proyectos han servido exitosamente, como organizaciones mentoras, a estudiantes universitarios en nuestro programa Google Summer of Code.

Los tipos de tareas en los que trabajarás caen en una de las siguientes categorías:
  1. Programar: Escribir o refactorizar código
  2. Documentación/entrenamiento: Creación y edición de documentos, así como ayudar a otros a aprender más
  3. Vinculación/investigación: Administración de comunidades, vinculación / mercadeo, o estudiar problemas y recomendar soluciones
  4. Aseguramiento de la calidad: probar y asegurar que el código es de alta calidad
  5. Interfaz de usuario: investigación de experiencia de usuario o diseño de interfaz de usuario e interacción
En los dos años anteriores tuvimos 904 estudiantes de 65 países compitiendo en el concurso. En enero pasado anunciamos a los 10 Ganadores del Gran Premio del Google Code-in 2011. En junio, trajimos tanto a los ganadores como a sus padres o tutores legales a la sede de Google en Mountain View, California; para un disfrutar de un viaje 5 días / 4 noches, la ceremonia de premiación, platicar con ingenieros de Google, un tour por nuestro campus y un día lleno de diversión en San Francisco.

Para mayores informes e instrucciones para registrarte y participar en el concurso, visita la sección de preguntas frecuentes (y respuestas), en el sitio de Google Code-in. Ayudamos pasando la voz a tus amigos alrededor del mundo. Si eres profesor y quieres invitar a tus estudiantes a participar, por favor envía un correo a nuestro equipo a la dirección ospoteam@gmail.com y con gusto responderemos cualquier duda que tengas.

Sintoniza el sitio del concurso y suscríbete a nuestra lista de correo para enterarte de lo último. Anunciaremos las 10 organizaciones de código abierto que participarán en el concurso el 12 de noviembre. El concurso Google Code-in inicia el 26 de noviembre de 2012 y estamos ansiosos por recibir a cientos de estudiantes de todo el mundo en la gran familia de código abierto.

Escrito por Stephanie Taylor, Open Source Programs

Versión original publicada por Scott Knaster, Editor
Publicado en español por Francisco Solsona, Google Developer Program Manager

El desarrollo de soluciones web desde siempre se ha enfrentado a diversos desafíos de implementación pero la llegada de HTML5 dió una frescura a estos diversos ambientes como es el almacenamiento desconectado.
El desarrollo de soluciones web desde siempre se ha enfrentado a diversos desafíos de implementación pero la llegada de HTML5 dió una frescura a estos diversos ambientes como es el almacenamiento desconectado.

El nivel de interacción de las soluciones Web actuales requiere sin lugar a dudas de estas características de almacenamiento desconectado. La idea es poder implementar mecanismos semi-conectados o desconectados de una forma mucho más flexible.

En este artículo vamos a abordar el tema de IndexedDB, donde resolveremos una simple implementación paso a paso de un administrador de tareas que independiente de la conexión sigue funcionando.

Para realizar la solución propuesta tendremos que pensar en abrir el repositorio de datos y generar los objetos de persistencia, luego establecer el mecanismo para agregar y visualizar los datos, finalmente establecer la estrategia de eliminación de los objetos.

Construyendo la solución

Para ejemplificar de la mejor manera posible vamos a implementar un caso concreto de implementación en donde pondremos en práctica la tecnología de IndexedDB para el manejo del almacenamiento desconectado.

Diseño de la interfaz de usuario

En esta sección haremos un diseño a muy alto nivel de lo que queremos lograr para el usuario final.
Fig. 1 - Diseño de alto nivel de la interfaz de usuario.
Este diseño será el representado en nuestro HTML genérico para generar la solución propuesta.
Abrir el modelo de datos y creando los objetos de persistencia

Completo el diseño de alto nivel de la solución, vamos a generar los scripts necesarios para interactuar con el modelo IndexedDB para abrir el repositorio de datos y dejar establecido el mecanismo para generar los objetos, que en este ejemplo serán Tareas.

html5redtask.indexedDB.open = function() {
var request = indexedDB.open("Redtask","Nuestras tareas en rojo como el día laboral");
//Si la operación para abrir es correcta.
request.onsuccess = function(e) {
var v = "1.99";
html5redtask.indexedDB.db = e.target.result;
var db = html5redtask.indexedDB.db;
if (v!= db.version) {
            var setVrequest = db.setVersion(v);
            setVrequest.onerror = html5redtask.indexedDB.onerror;    
            setVrequest.onsuccess = function(e) 
              {
                  if(db.objectStoreNames.contains("task")) 
                  {
                    db.deleteObjectStore("task");
                }
              var store = db.createObjectStore("task",
                {keyPath: "timeStamp"});
             e.target.transaction.oncomplete = function() {
                 html5redtask.indexedDB.getTaskItems();
                 };
             };
          }
          else {
           request.transaction.oncomplete = function() {
            html5redtask.indexedDB.getTaskItems();
          };
          }
        };
        request.onerror = html5redtask.indexedDB.onerror;
      }
Código 1 - Escenario de apertura de los datos y mecanismo de creación de objetos. 

Tengan en cuenta que utilizamos otro método html5redtask.indexedDB.getTaskItems(); como muestra el Código 1 para ir al repositorio actual y verificar si existen elementos en el inicio de la operación de la solución.

Agregando datos al contenedor y visualizando resultados

Al recibir el estímulo de botón de agregar tarea debemos generar el mecanismo de generación de un nuevo objeto Tarea. Esta función se muestra en el Código 2. Esta función recibe un parámetros “todoText” que utiliza para establecer en "text": todoText,. Luego se construye la solicitud y se impacta en el repositorio mediante store.put(data);

// Agregar una tarea
      html5redtask.indexedDB.addTask = function(todoText) {
        var db = html5redtask.indexedDB.db;
        var trans = db.transaction(["task"], "readwrite");
        var store = trans.objectStore("task");
      
        var data = {
          "text": todoText,
          "timeStamp": new Date().getTime()
        };
      
        var request = store.put(data);
      
        //Si todo salió bien
        request.onsuccess = function(e) {
          html5redtask.indexedDB.getTaskItems();
        };      
        //Si ocurrieron errores
        request.onerror = function(e) {
          console.log("Error: ", e);
        };
      };
Código 2 - Escenario insertando objetos

Eliminando elementos del repositorio

También debemos planificar el mecanismo de eliminación de los objetos del repositorio, para esta actividad la fucnión deleteTask recibe como parámetros el id de la tarea que se dese eliminar y se procede con las mismas simples actividades genéricas de minipulación del repositorio de datos, manejo de la transacción y el objectstore para finalmente impactar la operación con store.delete(id);

 //Para Borrar una tarea 
      html5redtask.indexedDB.deleteTask = function(id) {
        var db = html5redtask.indexedDB.db;
        var trans = db.transaction(["task"], "readwrite");
        var store = trans.objectStore("task");
      
        var request = store.delete(id);
      
        //La operación de borrado es correcta
        request.onsuccess = function(e) {
          html5redtask.indexedDB.getTaskItems();
        };
      
        //La operación de borrado o eliminación no es correcta
        request.onerror = function(e) {
          console.log("Error: ", e);
        };
Código 3 - Escenario de eliminación de objetos

Luego de la eliminación se hace una llamada a la visualización genérica de  html5redtask.indexedDB.getTaskItems();  como muestra el Código 3 para recargar y actualizar la interfaz del usuario final.

Esta tecnología muestra una simpleza y flexibilidad muy interesante que permite iniciar el camino en donde las aplicaciones Web se transforman en aplicaciones muy amigables para los escenarios de persistencia.

Nicolás Bortolotti   Perfil | Twitter | Blog

Nicolás es director de relaciones para desarrolladores en latinoamérica región sur para Google. El ha desarrollado comunidades académicas y de investigación en varios países de Latinoamérica sobre la plataforma de desarrollo web y mobile de Google. Además Nicolas es profesor universitario, donde trabaja fuertemente en arquitecturas de software, ambientes emergentes e innovación en modelos de ingeniería de software


Hemos abordado el tema en detalle en nuestra sesión semanal de Developers Live para desarrolladores en español. La Web del mañana HTML5, persistencia fuera de línea.

Nivel: Intemedio
Les dejo el video de implementación con la demostración paso a paso:

Referencias



Nuestros desarrolladores frecuentemente piden oportunidades para monetizar sitios que utilizan el API de Google Maps. Por años hemos provisto una forma de agregar AdSense a sus mapas por medio de ...
Nuestros desarrolladores frecuentemente piden oportunidades para monetizar sitios que utilizan el API de Google Maps. Por años hemos provisto una forma de agregar AdSense a sus mapas por medio de Maps Ad Unit y hoy le agregamos dos nuevas extensiones. Esto significa más opciones para anuncios en tus mapas y una experiencia mejorada para tus usuarios.

La primera extensión añade seis nuevos formatos de anuncios que requieren una unidad ligada en lugar de un anuncio directo. Las unidades ligadas despliegan una lista de temas que son relevantes al contenido de tu página. Cuando un usuario hace click en un tema, Google le muestra una página de anuncios relacionados. Dado que estas unidades ligadas utilizan menos espacio en la pantalla que los anuncios directos, son una buena opción cuando tienes espacio limitado.

La segunda extensión permite personalizar el diseño de Maps Ad Unit. Ahora soportamos colores personalizados para el fondo de la unidad, borde, liga, texto y URL; lo que te permite asignar un esquema de color que complemente el diseño de tu sitio.


Puedes probar inmediatamente estas nuevas características en el siguiente demo. Si bien el demo ilustra un subconjunto de los formatos soportados con un número limitado de estilos predefinidos y posicionamiento en el mapa, tienes más libertad creativa sobre tu ad unit.


Cuando estés listo para probar esto en tu sitio, revisa la documentación para desarrolladores y la referencia del API de Mapas para obtener instrucciones sobre cómo utilizar estas características con tu ad unit.

Versión original publicada por Jorrit Herder, Software Engineer, Google Maps API
Publicado en español por Francisco Solsona, Google Developer Program Manager