Categoría: Eventos

Roslyn en el Gusenet

El pasado sábado 26 de abril estuve en Torrevieja en el mayor evento de comunidad que se hace en España: Gusenet, con un nivel y número enorme de ponentes y no ponentes.
Tengo que agradecer a Pedro por convencerme la invitación a participar y a él, a Eladio y a Oscar por el currazo que se han pegado organizando y acompañando a tanta gente de un lado a otro.
Había un montón de charlas y todos los que ya han escrito sobre el Gusenet han comentado las que más les han gustado. El resumen es que todas eran muy buenas así que yo os voy a contar las que me perdí y me gustaría haber visto: llegué tarde a la charla de Luis Ruiz Pavón que al final fue sobre Clean Code y también a la de Isa y Toni sobre optimización de JavaScript, aunque vi algún teaser-tocino antes, espero poder ver esa charla algún día.

Isa, Toni y algunos más 🙂 (Foto de @g_perales)


Sigue leyendo

Anuncios

Evento sobre la guerra de los drones

La guerra de los drones

Desde la comunidad técnica Netsaimada os proponemos un reto al que será difícil resistirse… desarrollar aplicaciones Windows 8 y Windows Phone para un AR.Drone 2.0. Tenemos el cuadricóptero para que podáis probar las apps. Para concursar sólo tenéis que registrar una idea en la web de la guerra de los drones antes de día 24 de noviembre y publicarla en la tienda antes del 16 de diciembre.

En la comunidad hicimos un evento el pasado miércoles 30 y aquí os dejo algunos de los vídeos usando el AR.Drone 2.0 dentro de la sala donde hicimos la presentación:

Vuelve el Megathon


Hoy ha empezado la formación online para el Megathon 2013 que tendrá lugar los días 12, 13 y 14 de abril en múltiples ciudades. El año pasado un servidor junto con Netsaimada y el MICTT y con la colaboración de edib, UIB, Microsoft DPE, SD Assessors, IBLabs, el ParcBit que nos dejaba el auditorio e IBRed que nos puso la WiMAX hicimos dos hackathones de desarrollo de aplicaciones de Windows 8. Hubo una participación enorme y un nivel muy bueno, más teniendo en cuenta que Windows 8 era una completa novedad y teníamos que explicarlo todo desde cero y en muy poco tiempo.
megathon

Si os gustó el Megathon del año pasado, este año será mucho mejor. Además de los mentores que estaremos durante el evento para resolveros vuestras dudas, DPE ha organizado toda una serie de sesiones de formación online programadas hasta el día antes del Megathon. Encontraréis sesiones de Windows Phone y de Windows 8 con los mejores tutores que hay en España, para que estéis completamente preparados y poder darlo todo para crear la mejor aplicación de Windows Phone o Windows 8 en un fin de semana.

Tendremos entre nosotros a expertos en XAML/C#, C++ e incluso alguno de HTML5/JavaScript 🙂 para las dudas que puedan salir y alguna demo de aparatos voladores controlados por un Windows 8. Si queréis ver todo esto y mucho más, nos vemos en el Megathon. Apuntaos ya antes de que se acaben las plazas!

Hackathones, Megathones y contenidos

Hace casi dos meses que no he escrito nada en mi blog, pero no significa que haya dejado de escribir y de hacer cosas, sino todo lo contrario.

Estuvimos hasta arriba organizando el Hackathon Windows 8 “Con 8 Basta” de Palma. Para los asistentes a los hackathones escribí un tutorial de aplicaciones Metro en JavaScript que está disponible como material de formación en la web del Megathon Windows 8, consta de 13 capítulos, pero prometo más en breve. Por ahora os dejo dos anexos en el sitio Desarrollo Web: contenido web dinámico en aplicaciones metro y este otro sobre listas heterogéneas en Windows 8.

Recordad que se acerca el Megathon Windows 8 y en Palma habrá un gran movimiento, tenemos una sala para 140 personas, la misma que para Con 8 Basta y la gente que asistió dejó el listón muy alto. Reservad los días 7, 8 y 9 de septiembre para desarrollar una aplicación ganadora. Os podéis registrar en la siguiente url http://hackathonw8palma.eventbrite.com/

¡Que disfrutéis del verano!

Cuenta Atrás en Windows 8

Descarga el código del ejemplo en codeplex.

El pasado día 22 de Marzo se realizó en el ParcBit, organizado por el grupo de usuarios Netsaimada, un gran evento sobre ALM donde participaban Luis Fraile y Rodrigo Corral. Aproveché el evento, ya que me dejaron “colarme”, para explicar el desarrollo de aplicaciones Metro en Windows 8.
En los eventos suele ocurrir que el ponente tiene más cosas que contar que tiempo en una sesión. Para evitar que las sesiones se vayan comiendo el tiempo de las siguientes, suele haber alguien de la organización que avisa al ponente cuando está agotando el tiempo.
Si esa persona soy yo es un desastre, porque se me olvida mirar el reloj, pierdo el papel con el horario de las sesiones y otras cosas por el estilo. Así que Darío me propuso hacer un cronómetro para una tableta Acer Iconia que traía con Windows 8 y pensé que no me costaría mucho desarrollar una aplicación sencilla con una cuenta atrás y un botón de iniciar y parar.




Es una aplicación hecha en pocos minutos y sin muchas pretensiones, pero nos servirá para demostrar unas cuantas características interesantes del Windows 8.

¿Qué características vamos a usar?

Para desarrollar una aplicación así tenemos que tener en cuenta unas cuantas cosas:

  • Las aplicaciones metro sólo se están ejecutando mientras están en primer plano
  • Cuando una aplicación metro pasa a segundo plano puede ocurrir que se cierre completamente
  • Las aplicaciones metro no pueden instalar nada en el sistema, todo lo que utilice la aplicación debe desplegarse con la misma. Si queremos usar una fuente de letras personalizada la debemos distribuir con la aplicación
  • Para mejorar la usabilidad de nuestra aplicación, esta debe adaptarse a los diferentes tamaños de pantalla. Añadiendo una vista acoplada podremos conseguir que nuestra aplicación sea utilizada durante más tiempo

El desarrollo

Como es una aplicación muy sencilla y queremos comprobar cómo de fácil es crear una aplicación en HTML5/Javascript, vamos a crear una aplicación con la plantilla más sencilla, la Blank Application:



Una vez creado el proyecto, vamos a programar todo en los ficheros default.html, default.js y default.css. Lo primero vamos a crear el contenedor para los dígitos, el cuadro para introducir el tiempo y los botones de start y stop dentro del body:

<body>
    <div id="timer">
        <p class="timer-time" id="time">00:00:00</p>
        <div class="timer-config" style="height: 228px;">
            <label for="length">Minutes:</label>
            <input type="number" id="length" min="1" value="60" />
            <button>Start</button>
            <button>Stop</button>
        </div>
    </div>
</body>

Y ahora podemos programar nuestro reloj, primero nos creamos una clase que nos permita inicializar un timer a una hora en concreto y saber cuánto tiempo ha pasado desde entonces. Como no tengo demasiada experiencia con JavaScript, he buscado un poco por allí y por allá y con algunos retazos de lo que me he encontrado me he creado mi propio objeto:

var downTimer = {
    time: 0,
    length: 0,
    now: function () { return (new Date()).getTime(); },
    start: function (length) { this.time = this.now(); this.length = length*1000; },
    since: function () { return this.now() - this.time; },
    last: function () {
        var l = this.length - this.since();
        if (l < 0) return this.msToTime(0);
        else
            return this.msToTime(l);
    },
    stop: function () { this.time = this.length = 0; },
    msToTime: function (s) {
            var ms = s % 1000;
            s = (s - ms) / 1000;
            var secs = s % 60;
            s = (s - secs) / 60;
            var mins = s % 60;
            var hrs = (s - mins) / 60;
            return (hrs<10?'0':'')+ hrs + ':' + (mins<10?'0':'') + mins + ':' + (secs<10?'0':'') + secs;
        }
}

Como en Javascript no tenemos clases, pero es un lenguaje dinámico, podemos crear objetos complejos sin complicarnos demasiado. En el caso anterior es un objeto singleton donde declaramos directamente las variables y funciones que vamos a utilizar. Las importantes en este objeto son las funciones start, stop y last que son las que harán todo el trabajo.

Ahora, dentro del evento app.onactivated, llamaremos a un timeout de javascript para que ejecute de manera cíclica un método de refresco para nuestro contador, cada 33 milisegundos para simular un ciclo de 30 frames por segundo, aunque con 12 o incluso 3 frames nos bastaría:

//execute at 30fps (enough)
setInterval(refresh, 33);

Definiremos la función refresh para que refresque el elemento time con el contenido de nuestra clase downtimer:

function refresh() {
    var element = document.getElementById("time");
    element.textContent = downTimer.last();
}

Para que nuestra cuenta atrás funcione sólo nos falta que los botones de start y stop tengan funcionalidad. Para hacerlo más elegante definiremos dos métodos en un espacio de nombres y así los podremos llamar bien desde la página:

WinJS.Namespace.define("defaultPage",{
    startClick: function () {
        var length = document.getElementById("length").value;
        downTimer.start(length * 60);
    },
    stopClick: function () {
        downTimer.stop();
    }
});

Una vez tenemos las funciones dentro de un espacio de nombres modificamos los botones en el default.html para que al pulsarlos se llame a las funciones que hemos definido:

<button onclick="defaultPage.startClick()">Start</button>
<button onclick="defaultPage.stopClick()">Stop</button>

Probamos la aplicación así y ya tenemos una cuenta atrás funcionado:



Aunque la pantalla nos queda algo vacía, vamos a darle un poco de estilo.

Cambiar el UI con CSS

Hasta ahora nos hemos preocupado sólo por la funcionalidad, vamos a cambiar el aspecto con unos pocos trucos de css.
Vamos primero a por el contador, me gustaría más una fuente estilo reloj digital, pero no podemos asegurarnos que el Windows 8 donde se instale la aplicación vaya a tenerla instalada, así que tendremos que encontrar una fuente que podamos distribuir con nuestra aplicación. Como estamos haciendo una aplicación HTML, lo más fácil es encontrar alguna fuente gratuita, convertirla en formato woff y distribuirla con la aplicación. Para ello añadimos la fuente a una carpeta del proyecto:

Y una vez allí, la configuramos en el default.css:

@font-face {
    font-family: 'dsdigital';
    src: url('/fonts/dsdigital.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

#timer .timer-time {
        font-family: 'dsdigital';
        font-size: 190px;        
        text-align: center;
    }

Ahora ya empieza a parecer algo más serio:



Sólo nos queda darle algo más de estilo al cuadro de texto y a los botones para que sean más adecuados para utilizar de forma táctil. Un poco más de CSS, utilizar el id de los elementos dentro del CSS no es muy adecuado, pero para hacer una demo rápida nos valdrá:

#timer .timer-config {
    position: relative;
    width: 580px;
    margin-left: auto;
    margin-right: auto;
    display: block;        
}
#timer label {
            font-size: 1.45em;
}
#timer input {
    border: #000 1px;
    height: 2em;
    font-size: 2.45em;
    text-align: right;
}
#timer button {
        width: 2em;
        background: #000;
        color: #eee8d2;
        border: #fff 1px;
        height: 2em;
            font-size: 2.45em;
            font-weight: 300;
    }

 #timer button:active {
            background: #00f;
        }

Otra cosa que me gustaría es que los botones tengan un glyph en lugar de un texto, para que se entienda en cualquier idioma. Una primera idea sería poner una imagen, pero para no tener problemas con el escalado podemos usar algunos caracteres Unicode como el Black Rectangle (25A0) y el Black Right-Pointing Pointer (25B6):

<button onclick="defaultPage.startClick()">▶</button>
<button onclick="defaultPage.stopClick()">■</button>

Y así ya tendremos la aplicación básica.

Vista Acoplada

Una de las características de las aplicaciones Metro en Windows 8 es que son a pantalla completa, pero en los dispositivos que tengan la resolución suficiente el usuario puede tener una vista acoplada a un lado de la aplicación. Esto nos ayudará a que los usuarios utilicen nuestra aplicación durante más tiempo.
En nuestro caso, crear la vista acoplada no necesitará de código javascript, nos bastará con adaptar la hoja de estilos para la que la vista quede más compacta. En la misma hoja de estilos de la página tenemos unas reglas para las diferentes vistas, editamos la vista snapped así:

@media screen and (-ms-view-state: snapped) {
    body {
        font-size: 10px;
    }
    #timer .timer-time {
        font-size: 50px;
    }
    #timer .timer-config {
        height: 230px;
        width: 315px;
        margin: 5px;
        padding: 5px;
        text-align: center;
    }
}

Y ya tenemos una vista ajustada a la ventana acoplada:


Itinerancia de datos

Ahora que nuestra aplicación ya tiene el contador, funciona y se ve bonita, le podemos añadir muy fácilmente una pequeña funcionalidad que nos vendrá bien cuando paremos nuestra aplicación o utilicemos la aplicación en varios dispositivos. Podemos guardar la información importante de nuestro temporizador en la configuración de itinerancia, que se copiará automáticamente entre los diferentes dispositivos que tengamos con Windows 8 y utilicemos con la misma cuenta LiveID.

var appdata = Windows.Storage.ApplicationData;

WinJS.Namespace.define("defaultPage",{
    startClick: function () {
        var length = document.getElementById("length").value;
        downTimer.start(length * 60);
        //store roaming
        appdata.current.roamingSettings.values["time"] = downTimer.time;
        appdata.current.roamingSettings.values["length"] = downTimer.length;
    },
    stopClick: function () {
        downTimer.stop();
        //clear roaming
        appdata.current.roamingSettings.values["time"] = null;
        appdata.current.roamingSettings.values["length"] = null;
    }
});

Ahora sólo nos queda leer el dato al arrancar la aplicación en el evento app.onactivated:

app.onactivated = function (eventObject) {
    if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
        var time = appdata.current.roamingSettings.values["time"];
        if (time) {
            downTimer.time = time;
            downTimer.length = appdata.current.roamingSettings.values["length"];
        }
...

Al activar la aplicación leemos la configuración, si existe, y así nuestro contador seguirá como si nada hubiera pasado.
Este ejemplo costó menos de media hora de desarrollo, me ha costado muchísimo más describirlo que hacerlo 🙂

¿Qué hemos visto?

  • Algunas características que nos proporciona Windows 8, como la vista acoplada y la configuración de itinerancia, para dar un punto de calidad a nuestra aplicación, de manera muy sencilla pues Windows 8 nos proporciona la mayor parte de la funcionalidad “out of the box”.
  • La creación de espacios de nombres (namespaces) nos ayuda a organizar el código de nuestra aplicación, y nos facilita la escritura de código gracias al intellisense.
  • La integración del código HTML5/JavaScript estándar con el código específico de la plataforma Windows 8
  • Cómo incorporar fuentes de letras con nuestra aplicación
  • Uso de caracteres especiales Unicode para tener glyphs escalables
  • La separación del diseño y la lógica del interfaz
  • Las media queries de css para adaptar la interfaz a los diferentes tamaños y orientaciones del dispositivo

Y todo esto sólo con un cronómetro, imaginad lo que podéis llegar a hacer con vuestras aplicaciones.

Descarga el código del ejemplo en codeplex.

El efecto Kinect en Imagine Cup

Kinect desensamblado

Este año voy a seguir Imagine Cup con especial interés, pues acompaño como mentor a un equipo de estudiantes de Illes Balears. Han decidido participar en las categoría de Game Design: Phone, también participarán en algún reto y estoy seguro que harán un buen papel.

Uno de los retos que a mi más me gustan y a algún que otro compañero es el de Kinect Fun Labs. Para añadirle más emoción, los 100 primeros de la primera ronda recibirán un dispositivo Kinect For Windows!

Hay hasta el 6 de marzo para presentar ideas para la primera ronda y mañana día 14 de febrero habrá un Live Meeting donde podremos resolver nuestras dudas sobre el concurso.

¡Quién fuera estudiante! Nos vemos en Australia 🙂

Más recursos útiles para Windows Phone 7

Microsoft Patterns & PracticesHace unos días hicimos unos laboratorios de Windows Azure para Windows Phone. Para los que os picó el gusanillo del cloud, los chicos de Patterns & Practices han creado una guía llena de documentos y ejemplos que nos ayudarán a hacer aplicaciones de WP7 con tecnología cloud. Se puede descargar del codeplex o podemos leerla online en el msdn.
Es una guía muy interesante aunque no vayamos a usar Azure, pues ya sabéis que los servicios WCF que hacemos en Azure son casi los mismos que los que podemos hacer en casa.

Y para compensar tanto post de programación hoy os pongo un enlace para para diseñadores y “devigners”, la escuela de diseño de Microsoft incluye un montón de tutoriales nuevos para Windows Phone 7:

Tutoriales de Windows Phone 7 para diseñadores

http://www.microsoft.com/design/toolbox/school/tutorials.aspx

¡Que los disfrutéis!

Recursos útiles para aprender a programar en WP7

Muchos de los que habéis estado en las últimas presentaciones de Windows Phone 7 nos habéis preguntado sobre qué recursos hay disponibles para aprender a programar para el dispositivo y cual sería el camino de aprendizaje.

Como ya sabéis, en el App Hub hay mucha documentación y laboratorios para empezar a programar en WP7, aunque a veces nos podemos perder entre tanto material. Yo recomiendo empezar por la base, el lenguaje C#, y luego continuar con algún buen libro de Windows Phone que se pueda seguir de principio a fin. Aquí tenéis enlaces a algunos libros muy útiles que os podéis descargar. La ruta de aprendizaje habitual es C#, Silverlight y XNA, al que habría que añadir algo de programación en la nube para tener una base sobre el almacenamiento y la computación en la nube, por si vamos a utilizar datos en nuestra aplicación.

Estos libros son gratuitos, pero están en inglés. Para los que prefieran tener algo en castellano, en el MSDN tenéis estupendos recursos para aprender C#, Windows Phone 7 y Azure, y también son gratuitos:

Además tenemos el grupo de Desarrolladores de Windows Phone 7 en LinkedIn, donde podréis manteneros informados.

Nos vemos en los próximos eventos!

Primer aniversario de Baleares on Net

El pasado viernes participé en el Community Launch y aniversario del grupo de usuarios Baleares on Net. Mi charla fué sobre Ado .Net Data Services, espero que os gustara tanto como me ha gustado a mi prepararla. Dentro de poco estarán disponibles las diapositivas y demos para descarga.

Gracias a todos por asistir y a los ponentes por ser tan majos y dispuestos a venir tan lejos.