Día: 28 de Febrero de 2012.
Lugar: Barcelona.
Precio: Gratis!!!

Sí, finalmente un encuentro de los desarolladores de Titanium Appcelerator en España y gratis. El plazo de inscripción está abierto desde el día 25, hay 90 plazas disponibles y puedes obtener tu invitación aquí: http://appc-mwc.eventbrite.com/

La lista de los ponentes aun no está finalizada pero cuando la tenga, la pondré aquí tambien.

Te recomendamos:

1. Transparencias de la presentación de Titanium Appcelerator en The Event 2011
2. Módulo Generador QR para Titanium Appcelerator

Despues de que Appcelerator lanzara su Marketplace logré crear y publicar un módulo sólo para iOS capaz de crear códigos QR directamente en el dispositivo sin necesidad de utilizar servicios en línea.

Puede generar todo tipo de códigos (de 1 a 40) y con cualquier nivel de corrección (L, M, Q, H). Puedes además personalizar el tamaño de código QR resultante y el mismo tratará de adaptarse a dicho tamaño para mantenerse perfectamente enfocado y completamente visible.

De momento, puede generar estos tipos de contenido:

• Texto Puro
• SMS (número de teléfono, mensaje)
• llamada telefónica (número de teléfono)
• email (para, subject, message)
• geo (latitud, longitud)
• url

Puedes adquirirlo en el Marketplace: QR Generator module.

Te recomendamos:

1. Transparencias de la presentación de Titanium Appcelerator en The Event 2011
2. Siete días con Titanium – día 7 – orientación y acelerómetro
3. Siete días con Titanium – día 6 – animaciones y transformaciones

Recientemente me Certifiqué como Desarrollador de Aplicaciones Titanium (Titanium Certified Application Developer – TCAD) y pensé en darles mi opinión acerca del examen a los que deseen tomarlo.

El examen cubre las áreas que existen en el proceso de desarrollo de una aplicación con Titanium Appcelerator:

• Preguntas de código,
• Contactos y APIs Sociales,
• Desarrollo Multi-Platadorma en Titanium,
• Contenido Web Integrado,
• Media y Sistema de Archivos,
• Uso de Servicios de Localización,
• Trabajo con Datos Locales,
• Trabajo con Datos Remotos,
• Ahora que eres un Desarrollador de Aplicaciones Nativas,
• Recap “Zero To App”,
• Fundamentos de Interfaz de Usuarios
• Entrega y Distribución

Para pasar este examen vas a necesitar por supuesto experiencia pero el equipo de Appcelerator ha colocado en linea en Wiki los laboratorios para cada parte del examen. Les sugiero que le den una buena leída, incluso aquellos puntos que quizás ya conozcas porque podrías encontrar cosas realmente útiles.

Algunos de los cursos tienen videos y enlaces a proyectos descargables.

Los proyectos son un buen punto de inicio para aprender cómo hacer las cosas “correctamente” y los mismos explican muy bien algunos principios para aplicar en una App de Appcelerator.

No dejes que la palabra “examen” te asuste porque realmente no es difícil – algunas preguntas son de sentido común.

A por el!

Te recomendamos:

1. Transparencias de la presentación de Titanium Appcelerator en The Event 2011
2. Siete días con Titanium – día 6 – animaciones y transformaciones

La mayoría de los dispositivos de hoy en día vienen con un acelerómetro que detecta la orientación del dispositivo o los movimientos que hace el usuario.

Titanium expone esta funcionalidad a través de sus APIs así que tomemos ventajas de eso

La orientación

El dispositivo puede reportar 7 estados de orientación, los cuales son definidos en Titanium a continuación:

• Ti.UI.UNKNOWN – la app no puede detectar la posición
• Ti.UI.PORTRAIT
• Ti.UI.UPSIDE_PORTRAIT
• Ti.UI.LANDSCAPE_LEFT
• Ti.UI.LANDSCAPE_RIGHT
• Ti.UI.FACE_DOWN – como reposando en una mesa con la pantalla hacia abajo
• Ti.UI.FACE_UP – como reposando en una mesa con la pantalla hacia arriba

Aunque tenemos todas estas constantes definidas, hay situaciones en las que quizás no se encuentren disponibles: en iOs cuando el usuario bloquea la orientación, el dispositivo reportará dicha orientación sin importar cómo sea sostenido el dispositivo. En Android, muchos dispositivos pueden detectar sólo las orientaciones PORTRAIT y LANDSCAPE_LEFT.

Desde la versión 1.7.2 del SDK el API de orientación cambió y es establecido por ventana (o actividad). Puedes hacerlo utilimzando la propiedad orientationModes que acepta un arreglo con la orientación permitida para esa ventana. Mira este post en el Blog de Appcelerator.

win.orientationModes = [Ti.UI.PORTRAIT, Ti.UI.LANDSCAPE_RIGHT];

Existe también un evento que dispara los cambios de orientación permitiéndote hacer los cambios que puedas necesitar (adaptar la interfaz de usuario a la nueva orientación por ejemplo.)

Ti.Gesture.addEventListener('orientationchange',function(e) {
    alert(e.orientation);
});

La alerta mostrará un número entre 1 y 7 debido a que las constantes definidas arriba en este artículo son de tipo INT. Una buena práctica es comparar la orientación reportada por el evento con la constante y no directamente con el número. En caso de que algo cambie en el futuro, esto te asegurará que el código seguirá funcionando.

Puedes encontrar más acerca de esto en las páginas de documentación para Titanium.Gesture

El acelerómetro

El acelerómetro es una pieza de hardware que te dará la posición actual del dispositivo en coordenadas 3D (vector x, y, z). Esto te permite por ejemplo controlar los movimientos de un elemento en la pantalla.

Para obtener este vector, todo lo que tienes que hacer es capturar la actualización del evento Titanium.Accelerometer API. Esto retornará el vector del cual estamos hablando.

Ti.Accelerometer.addEventListener('update', function(e) {
    lbl.text = 'x: ' + e.x + 'y:' + e.y + 'z:' + e.z;
});

Nuevamente, es una buena práctica eliminar el evento cuando no lo necesitemos para ahorrar algunos ciclos de CPU.

Eso es todo para el día 7. Code strong y nos vemos en Mobile con Galicia el 9 de Diciembre.

Te recomendamos:

1. Siete días con Titanium – día 6 – animaciones y transformaciones

Hace unos días escribí este post para la Comunidad de Titanium Appcelerator en Español y quiero copiarlo aquí para los que ya no se enteraron de nuestra idea.

Estaba pensando en hacer un pequeño hackathon donde podríamos poner en marcha un proyecto a elegir para aprender cosas nuevas y compartir experiencia. Lo ideal sería que la gente que venga tuviera por lo menos “algo” de experiencia en trabajar con Titanium para que el evento sea un intercambio de ideas y para que cada uno aprenda algo nuevo.

Como es sólo es una idea y depende si la gente quiere participar todavía no tengo muy claro como hacerlo y cuando. Propongo que cada uno que quiere participar deje un comentario con una idea de app que se podría hacer en una noche. Al final hacemos una encuesta y establecemos el tema. Igual con la fecha.

Como no tenemos patrocinadores, para ahorrar un poco, si el número de los participantes no pasa de 6-7 estaba pensando como lugar el salón de mi casa – la tengo en un entorno natural muy bonito a 35km de Oviedo . Lo que si hay que pagar sería el transporte desde vuestra casa hasta Oviedo, una noche en una casa rural o hotel y claro la comida en un restaurante. Desde y hasta Oviedo me encargo yo del transporte.

¿Qué os parece la idea?

Espero sus comentarios en la página Hackathon Titanium de TitaniumES.

Inspirado en el mundo de la impresión, gente de Adobe y Microsoft vienen nuevas características que podrían (o quizás no) ser incluidas en futuras especificaciones CSS. Estas nuevas características – Regiones CSS y Exclusiones CSS - permitirán al texto fluir en las páginas web de manera muy parecida a como lo hacen en los diarios y revistas.

Recuerda que la idea del que el texto fluya en forma de columnas es otra propuesta del CSS3: Las Capas Multi-Columnas en CSS y la de páginas que imitan las revistas ya están en el módulo CSS3 Paged Media

Veamos algunos ejemplos que ADOBE ha implementado:

Hilos de Contenido usando formas y regiones CSS

El texto podría fluir fácilmente de una región a otra y nosotros podríamos escoger intercalar regiones o darles diferente ancho, alto y posiciones en la capa (ver figura siguiente)

Si puedes establecer regiones rectangulares, por que no hacerlo con formas a discreción del usuario?

El texto también fluye de una región (una figura en este caso) a otra.

La idea es súper estupenda y hemos esperado mucho por ellas, pero yo me pregunto sobre su usabilidad si pensamos en la manera en la que la gente lee contenido web versus texto impreso (eso podría cambiar la forma actual de lectura de abajo hacia arriba en forma de L que se ha observado con métodos de eye-tracking).

Exclusión de Contenido

La idea opuesta es excluir texto de una cierta región o regiones. (rectangulares o figuras personalizadas)

Posibles implementaciones en el mundo real

Adobe ha mostrado ejemplos más complejos (que funcionan en su propia versión de navegadores basados en WebKit debido a que estas características son aún un borrador y altamente experimentales).

El texto puede fluir en áreas con formas personalizadas y nos permitirá crear gráficos accesibles con CSS con complejas capas que involucren imágenes y textos que se comportarán bien en dispositivos con diferentes tamaños de pantalla y resoluciones.

Os pongo aquí los slides de la ponencia de @dan_tamas en The Event 2011 Cáceres. Espero poder ponerlos tambien en formato HTML e incluir el video de la presentación lo antes posible.

Te recomendamos:

1. The Evnt 2011 – 2 días de charlas sobre nuevas tecnologías
2. Módulo Generador QR para Titanium Appcelerator
3. Siete días con Titanium – día 6 – animaciones y transformaciones

Inicio: Viernes13 de Mayo 2011.
Fin: Sábado 14 de Mayo.
Lugar: Cáceres.
Precio: 90 Euros.

Charlas

• OpenData – Pro Bono Público
• Análitica Web – Como vender más y mejor midiendo
• Mumumio: Caso de éxito
• Redes sociales
• La apertura de datos, ¿Hacia dónde vamos?
• Como afrontar un proyecto web
• Gestión eficaz del tiempo
• Jobsket: Caso de éxito
• La Technicienta: De programador a empresario
• Seguridad Web en CMS’s
• Appcelerator Titanium – Desarollo rápido de aplicaciones multiplataforma. Dan Tamas habla sobre las ventajas de Appcelerator frente a Objective C a la hora de desarollar para iPhone y Android.
• Como optimizar y desarrollar el frontend de un servicio masivo
• ¿El futuro es Javascript? Node.js
• LESS ? CSS3
• Viviendo en la Nube – 
Tu servidor elástico
• Lighting Talks: Lleva tus temas a la mesa

Más información se puede encontrar en la web The Evnt.

Te recomendamos:

1. Transparencias de la presentación de Titanium Appcelerator en The Event 2011

Fecha: 17 – 18 de Mayo de 2011.
Lugar: Bilbao.
Precio: entre 325 Euros y 650 Euros.

Bilbao Web Summit 2011 es un evento que tendrá lugar en paralelo con la reunión del World Wide Consortium (W3C) y reunirá los nombres más destacados de W3C y emprendedores con el fin de debatir y diseñar el futuro de las tecnologias web.

Aunque el programa no se ha publicado se conocen algunos ponentes: Sir Tim Berners-Lee, Jeff Jaffe, (CEO W3C), T.V. Raman(el experto en accesibilidad web de Google), Bert Boss (el inventor del CSS al que tuvimos el honor de conocer el año pasado en Oviedo), Shawn Henry (experta en accesibilidad web) y muchos otros invitados de W3C, Oracle, Opera, etc.

Más información se puede encontrar en la web de Bilbao Web Summit 2011.

Titanium Appceletaror Mobile ha implementado el protocolo de redes Bonjour para iOs (o ZeroConf si lo prefieres) que te permite conectarte a otro dispositivo que se encuentre en la misma red.

Antes de comenzar con la parte aburrida – quiero decir código – veamos un vídeo con una pequeña demostración que nos muestra a 3 dispositivos jugando juntos

Trabajando en Redes con Titanium Mobile en iOs

Me gustaría mencionar que el iPod es de segunda generación – por lo tanto menos capaz (los retrasos son visibles en el vídeo) y de alguna manera, algunas veces parece perder paquetes. Probé la misma aplicación con un iPad en vez de un iPod y todo funcionó bien.

Bonjour

Basandome en el código que se consigue en KitchenSink he creado una pequeña función que crea la conexión por nosotros y nos retorna un objeto que te permite iniciarlo, cerrarlo y escribir en el socket.

Bonjour es un poco extraño para entender por aquellos con menos experiencia pero en resumen, la cosa es así:

• Necesitamos un socket en modo lectura-escritura que será usado por localService para publicar su presencia.
• Cada localService tiene que tener su propio y único nombre para poder identificarse en la red.

Aparte de esto, necesitamos un serviceBrowser para encontrar a los demás dispositivos alrededor (que hayan publicado su presencia por supuesto).

Como todo funciona asíncronamente, tendremos que confiar en los eventos para capturar los datos enviados por alguien o los cambios en el número de dispositivos conectados.

El serviceBrowser tiene el evento updatedServices donde podemos capturar los servicios publicados. En esta función intentaremos capturar el evento de lectura de cada servicio que es el que nos dice qué datos son enviados por la red.

Advertencia: Cierra la conexión de red en el momento en que no la necesites más.

La Función de Conexión de Red

La función que he creado se encarga de esto, de manera que tu solo tienes que usarla como se encuentra el ejemplo debajo:

Titanium.include('bj.js');
 
var connection = bjnet('my_unique_name', function(data){
	var json_data = JSON.parse(data);
	//do something with this data;
});
 
connection.start();

En otro punto de tu app, donde quieras enviar el mensaje, solo tienes que hacer esto:

	connection.write('my_message');

Como dije antes, no olvides limpiar todo:

win.addEventListener('close', function(e) {
	connection.stop();
});

Que sucede en el demo?

El ejemplo en el video es bastante sencillo. Dependiendo de que bola toques (roja, verde o azul) creas una nueva conexión con ese nombre y la inicias. En este momento cualquier mensaje proveniente de la red es parseado en JSON y una pequeña bola es creada con las coordenadas y color específico.

En tu turno, cuando tocas la pantalla, envías tus coordenadas y color por la red para que los demás dispositivos sepan que dibujar. Cada mensaje es un Objeto JSON expreso en texto como el que sigue:

	{coords:{x:100,y:200},player:{name:'red', color:'#f00'}}

Como nota adicional, el demo usa cero imágenes. Ninguna. Todo es nativo y planeo un futuro tutorial sobre cómo hacer esto.

El código

El código está en Github Github y puedes descargarlo desde aquí.

Todo se encuentra bajo licencia MIT pero me gustaría escuchar lo que tengan que decir.

Casi cualquier elemento de la interfaz de usuario puede ser animado y transformado, permitiéndote añadir a tu aplicación ciertas mejoras visuales o simplemente aprovechar las ventajas de los elementos predefinidos y darles un nuevo rol. Para aquellos familiarizados con las animaciones CSS3 esto se les hará fácil porque los conceptos son prácticamente los mismos.

Animaciones

Está de más decir que una animación cambiará uno o más propiedades de la forma de un elemento del actual estado a otro (establecido por nosotros) en un período de tiempo.

var my_view =  Titanium.UI.createView({
    backgroundColor:'#f00',
    height:20
});
my_view.animate({height:100});

El código de arriba animará el alto de la forma My_view de 20 a 100.

Puedes complicar las cosas más al añadirle más propiedades que animar (como el fondo, color, opacidad, etc), una duración (que tiene que ser en ms) y una curva (como ease-out o lineal, etc)

Algunos ejemplos

var view = Titanium.UI.createView({
	width:100,
	height:20,
	backgroundColor:'#f00'
});
 
win.add(view);
 
view.animate({
	height:300, 
	backgroundColor:'#00f', 
	duration:3000, 
	curve:Titanium.UI.ANIMATION_CURVE_EASE_IN_OUT
});

Si necesitas hacer una animación para hacer volver los elementos a su estado original y repetirlo varias veces, hay dos propiedades que podrían interesarte: repeat y autoreverse.

El código siguiente hará que la vista “pulse” 3 veces.

var view = Titanium.UI.createView({
	width:100,
	height:100,
	backgroundColor:'#f00'
});
 
win.add(view);
 
view.animate({
	height:130,
	width:130,
	repeat:3,
	autoreverse:true,
	curve:Titanium.UI.ANIMATION_CURVE_EASE_IN_OUT
});

Las animaciones tienen 2 eventos: start (iniciar) y complete (completo). El evento complete es muy útil porque podemos encadenar más animaciones, una detrás de la otra, o iniciar algunas otras acciones cuando la actual finalice.

Transformaciones

Similar a las transformaciones CSS3, en Titanium puedes usar transformaciones en 2D o 3D.

Básicamente puedes crear una matriz 2D o 3D para la transformación o usar los “atajos” predeterminados – (como escalar “scale” o rotar “rotate“) y pasar esta transformación al objeto que estás creando o a la animación.

Un ejemplo de transformaciones

var tr_start = Titanium.UI.create2DMatrix();
tr_start = tr_start.rotate(30);
 
var tr_end = Titanium.UI.create2DMatrix();
tr_end = tr_end.rotate(-30);
tr_end = tr_end.scale(2);
 
var view = Titanium.UI.createView({
	width:100,
	height:100,
	transform:tr_start,
	backgroundColor:'#f00',
});
 
win.add(view);
 
view.animate({
	transform:tr_end,
	repeat:3,
	autoreverse:true,
	duration:500,
	curve:Titanium.UI.ANIMATION_CURVE_EASE_IN_OUT
});

Los mejores recursos para ver cómo todo funciona son los ejemplos provistos por el equipo de Appceletaror en el KitchenSink:http://bit.ly/eiow0B

Estas animaciones y transformaciones no son apropiadas para un uso intenso (como juegos) pero pueden ser utilizadas exitosamente para mejorar la apariencia de las apps – y con esto, la experiencia del usuario.

Como siempre, espero sus preguntas, sugerencias y lo que se les ocurra

Te recomendamos:

1. Siete días con Titanium – día 7 – orientación y acelerómetro

Esto no necesita ningún tipo de introducción. Puedes usar la localización de los dispositivos para saber donde se encuentran los usuarios y actuar en consecuencia. Es bueno que sepas que necesitas la aprobación del usuario, y para los iOs > 3.2 necesitas establecer la propiedad “propósito” para hacer saber a Apple para que lo necesitas.

Titanium.Geolocation.purpose = "GPS user coordinates";

Cómo funciona la Geolocalización

Cuando inicias la app, las coordenadas son las que se encuentren en el caché del dispositivo, en otras palabras, las que fueron detectadas la última vez que utilizaste la geolocalización en tu dispositivo. Detectar la posición actual lleva tiempo de manera que si tienes una app basada en geolocalización quizás quieras tomar esto en cuenta para mejorar la experiencia del usuario y evitar dar falsos resultados.

Titanium.Geolocation provee los métodos necesarios para manejar la geolocalización.

En general, el método más usado es getCurrentPosition que te da la posición actual y dispara una vez el evento “location” que se dispara repetidamente al cambiar de posición. Para ser más claro, piensa que quieres un registrar la ruta que sigue el usuario: cuando la app comience, obtienes su posición de inicio entonces mientras camine, puedes obtener puntos de la ruta con una distribución granular ajustable.

 
Titanium.Geolocation.distanceFilter = 10; // set the granularity of the location event
 
	Titanium.Geolocation.getCurrentPosition(function(e)
	{
		if (e.error)
		{
                // manage the error
                return;
		}
 
		var longitude = e.coords.longitude;
		var latitude = e.coords.latitude;
		var altitude = e.coords.altitude;
		var heading = e.coords.heading;
		var accuracy = e.coords.accuracy;
		var speed = e.coords.speed;
		var timestamp = e.coords.timestamp;
		var altitudeAccuracy = e.coords.altitudeAccuracy;
 
                // we use the above data the way we need it
	});
 
	Titanium.Geolocation.addEventListener('location',function(e)
	{
		if (e.error)
		{
                // manage the error
		return;
		}
 
		var longitude = e.coords.longitude;
		var latitude = e.coords.latitude;
		var altitude = e.coords.altitude;
		var heading = e.coords.heading;
		var accuracy = e.coords.accuracy;
		var speed = e.coords.speed;
		var timestamp = e.coords.timestamp;
		var altitudeAccuracy = e.coords.altitudeAccuracy;
 
               // again we use the gathered data
      });

Hay otros métodos que pueden ser usados como reverseGeocoder, forwardGeocoder y getCurrentHeading – para brújulas. Porque no todos los dispositivos tienen localización por GPS (como el iPod) o la brújula y porque el usuario puede tener los servicios de localización deshabilitados, tienes que verificar si existe, si está habilitado se lo haces saber al usuario.

Como la página de documentación no está completa aún, sugiero que le eches un vistazo al ejemplo de geolocalización que muestra muy bien como usarlo.

Mapas

Los mapas son creados usando los métodos Titanium.Map Los mapas con un poco más complicados pero te permiten hacer hacer estupendas interfaces de usuario. Puedes usar un Mapview y añadirle una ruta o colocar marcadores y a los mismos adjuntarle imágenes, títulos e incluso enlaces a otras ventanas para una vista más detallada del lugar especificado o lo que sea que necesites.

Crear un mapa

var mapview = Titanium.Map.createView({
	top:20,
	height:300,
	mapType: Titanium.Map.STANDARD_TYPE,
	region:{latitude:33.74511, longitude:-84.38993, latitudeDelta:0.5, longitudeDelta:0.5},
	animate:true,
	regionFit:true,
	userLocation:true
});

Nada complicado: el constructor puede recibir diferentes argumentos incluyendo las anotaciones o marcadores (pins), pero por su puesto tendrás que declararlo primero.

Y esto se hace así:

var apple = Titanium.Map.createAnnotation({
	latitude:37.33168900,
	longitude:-122.03073100,
	title:"Steve Jobs",
	subtitle:'Cupertino, CA',
	pincolor:Titanium.Map.ANNOTATION_GREEN,
	animate:true,
	rightButton: 'apple_logo.jpg',
	myid:2 // CUSTOM ATTRIBUTE THAT IS PASSED INTO EVENT OBJECTS
});
 
var atlanta = Titanium.Map.createAnnotation({
		latitude:33.74511,
		longitude:-84.38993,
		title:"Atlanta, GA",
		subtitle:'Atlanta Braves Stadium\nfoo',
		animate:true,
		leftButton:'atlanta.jpg',
		rightButton: Titanium.UI.iPhone.SystemButton.DISCLOSURE,
		myid:3 // CUSTOM ATTRIBUTE THAT IS PASSED INTO EVENT OBJECTS
	});

y el constructor del mapa obtiene

	annotations:[atlanta,apple]

mas tarde puedes añadir esta anotación usando

	mapview.addAnnotation(atlanta);

Eventos de mapas

Una cosa que necesitas saber es que los eventos son registrados al nivel del mapa. De manera que no puedes obtener un evento clic en un marcador. Tendrás que obtener el evento click del mapview y usar las propiedad clicksource y la propiedad personalizada (myId) para detectar las anotaciones y a lo que se le ha hecho click (pin, botón izquierdo, título, subtítulo).

	if (evt.source.myid == 3 && evt.clicksource == 'rightButton') {
        // do your stuff
        }

MapRoute

Otra de las cosas que puedes hacer con un mapa es añadirle una ruta (por ahora sólo en iOs). Básicamente puedes dibujar una linea en el mapa especificando los puntos (puntos gdp) que necesita para trazarla.

Una ruta se puede ver así:

var route = {
	name:"some name",
	points:points,
	color:"red",
	width:2
};

Donde points es un arreglo de objetos que contienen coordenadas en latitud y longitud.

Ejemplo – añadir una ruta a un Mapview

Debajo se encuentra un ejemplo que añade una ruta a un mapview usando algunas coordinadas previamente establecidas. Generará algo similar a la captura en la derecha.

var center = {latitude:42.30,longitude:-71.18,latitudeDelta:0.03, longitudeDelta:0.1};
 
var mapview = Titanium.Map.createView({
	mapType: Titanium.Map.STANDARD_TYPE,
	region: center,
	animate:true,
	regionFit:true
});
 
points = [
	{latitude:42.31,longitude:-71.11},
	{latitude:42.32,longitude:-71.13},
	{latitude:42.31,longitude:-71.22},
	{latitude:42.28,longitude:-71.26}
]
 
// route object
var route = {
	name:"some name",
	points:points,
	color:"#00f",
	width:2
};
 
// add a route
mapview.addRoute(route);

¿Que sigue?

Un buen ejercicio podría ser crear una aplicación que se encuentre mirando tu posición mientras manejas o caminas y te la muestre en un mapa. Todo lo que necesitarías hacer es usar los eventos location y usar el valor retornado para añadir un nuevo elemento al arreglo de puntos.

¿Alguien quiere intentarlo?

Fecha: 18 de Marzo de 2011.
Lugar: Barcelona.
Precio: entre 49 Euros y 199 Euros.

Dev Up es el “Primer encuentro para desarrolladores iOS en España”.

Programa

• Presente y futuro de las aplicaciones móviles
• De la idea a la AppStore: cómo se gesta una aplicación para iPhone
• El uso de apps como valor añadido para tu marca
• Usabilidad y experiencia de usuario en aplicaciones móviles
• Móviles y redes sociales: una conexión que funciona
• El éxito partiendo del fracaso
• Cómo migrar tu aplicación en iOS a la MacStore
• Pagos y micropagos móviles
• Rentabiliza tu app: redes de publicidad
• Aplicaciones iOS con HTML5
• Desarrollando para iPhone: problemas y ventajas
• Caso de éxito
• Geolocalización como servicio
• El valor de las reviews
• iPhone y iPad, un mundo de posibilidades para juegos
• Cómo crear juegos de éxito para iOS
• Entrega de los Premios Ideateca para la mejor aplicación móvil: puedes votar en la página del concurso

Más información se puede encontrar en la web de Dev Up.

Despues de ver cómo AT lee un contenido generado con pseudo-elementos CSS estaba pensando en pasar a HTML5. Y como hay muchas personas diciendo que deberíamos mezclar HTML5 con ARIA para incrementar la accesibilidad de un sitio web, entonces, ¿por qué no probar y ver lo que pasa?

Un poco de código…

...
 
<header id="header" role="banner">  
    <div id="logo">Logo</div>
    <nav role="navigation">
        <ul id="mainnav">........</ul>
    </nav>
</header>
 
<section id="content" role="main">  
 
    <h1>A level one heading here please</h1>
 
    <div role="application"><p>Here is where an application will be coded. </p></div> 
 
    <article role="article">             
            <h2 class="index-headings">Blog entry no 1</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    </article>
 
    <article role="article">
            <h2 class="index-headings">Blog entry no 2</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    </article>
 
</section> 
 
<aside role="complementary">  
    <h2>Sidebar</h2>
    <ul>......................</ul>
</aside>
 
<footer id="footer"  role="contentinfo">This is where the footer will stay.</footer>     
...

Esta es la página con ambos elementos HTML5:

• header
nav
• section
• article
• aside
• footer

y los roles ARIA (aprende más sobre ARIA):

• role=”banner” – para el elemento header
• role=”navigation” – para el elemento nav
• role=”main” – anexo a section
• role=”application” – en caso de que necesite añadir un widget
• role=”article” – para el elemento article
• role=”complementary” – para aside
• role=”contentinfo” – para footer

Cómo NVDA, JAWS y Windoes Eyes leyeron la versión con sólo HTML5

Para hacer la historia corta, ningún lector de pantalla notó los elementos HTML5 – como se esperaba. Todos se comportaron como si esos elementos fuesen simples DIVs y leyeron la página web de acuerdo a esto.

Cómo NVDA, JAWS y Windoes Eyes leyeron la versión HTML5 + ARIA

Mucho mejor esta vez, ARIA está haciendo maravillas aunque no entiendo por qué Windows Eyes ni siquiera pronuncia la existencia de estos encabezados… Soy un novato en este campo así que, ¿tal vez hice algo malo? No quiero cometer una injusticia con WE así que digamos que los resultados fueron inconclusos en relación con este software.

La Diferencia

Así que cuál era la diferencia entre las dos versiones? Qué aportó ARIA desde este punto de vista?

El área del banner: role=”banner”

NVDA – “banner landmark logo here navigation landmark list with 4 items visited link home……. ”
JAWS – “banner landmark logo here navigation landmark list with 4 items visited link home……. ” Al principio también dijo que habían 8 marcas, muy bien!!!

El área principal: role=”main”

NVDA – “main landmark heading level one …”
JAWS – “main landmark heading level one …”

El área de aplicación: role=”application”

NVDA – no se leyó el rol de aplicación.
JAWS – “application landmark here is where….”

Los Artículos: role =”article”

NVDA – el artículo no fue mencionado en lo absoluto.
JAWS – “article landmark heading level….”

La Barra lateral: role=”complementary”

NVDA la barra lateral fue leída de esta manera: “complementary landmark heading level 2…..”
JAWS – “complementary landmark heading level 2…..”

El pié: role=”contentinfo”

- y el pie de pagina: “content info landmark this is where the….”
JAWS – “content info landmark this is where the….”

Hasta ahora JAWS fue el único capaz de leer todas las marcas mientras que NVDA falló en el artículo y la aplicación. Como mencioné antes, Windows Eyes no leyó los elementos ARIA pero tal vez soy sólo yo siendo un novato… Aprecio mucho tu opinión, quizás juntos podamos hacer que funcione.

Te recomendamos:

1. Probando la accesibilidad del contenido generado por CSS

Este artículo es acerca de cómo los lectores de pantalla leen el contenido añadido con pseudo elementos CSS :before y :after (en CSS3 son ::before y ::after).

Estoy tratando de aprender a usar tecnología asistiva cuando desarrollo sitios web y recientemente vi como no importa cuanto W3C quiera que usemos ciertos elementos CSS, siempre habrá desarrolladores/diseñadores quienes intentarán probar los límites de las especificaciones.

Mientras que te aconsejo que NO uses pseudo elementos para generar contenido útil (limitate a generar citas o elementos de diseño), sólo en caso de que alguien piense que lo estupendo resida en generar contenido con CSS porque todo lo demás ya es viejo, veamos cómo las personas que usan los lectores de pantalla se “beneficiarán” de la idea.

Un pedazo de código… Ok, quizás dos…

El HTML es realmente simple, un inocente párrafo de texto:

<h1>Example of content added with CSS pseudo-elements</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..and so on.</p>

y el CSS es también algo simple:

#content p:before {
content:"This is before the text, you can style it";
}
 
#content p:after{
content:"This is after the text";
}

Escuchemos voces

El vídeo muestra cómo NVDA, Jaws y Window Eyes leen la página – Configuré NVDA para leer a un ritmo más lento para que pudiesen seguirlo, pero los otros 2 están un poco más rápidos.

En conclusión

No hay necesidad de decirles cuán mala es la idea, NO usen pseudo elementos para generar contenido útiles, limiten su uso a generar citas, iconos pequeños, copos de nieve esponjosos o lo que sea. Pero mantenganlo presentable para que otras personas tengan acceso a cosas útiles.

Te recomendamos:

1. Cómo leen los lectores de pantalla una página con HTML5 y ARIA

Encontré este útil enlace y decidí buscar información acerca del uso de los navegadores en Espana durante los ultimos 6 meses. Admito que quería saber si aun se usa Internet Explorer 6

Sorpresa en los navegadores para móviles

iPhone está muy arriba en el gráfico (Android tambien sube deprisa), sorpresa? O no?

Source: StatCounter Global Stats – Mobile Browser Market Share

Te recomendamos:

1. The Evnt 2011 – 2 días de charlas sobre nuevas tecnologías

Me gustaría colocar aquí una sección de recursos que podrían ser de ayuda para que comiencen a usar ARIA en sus aplicaciones web o sitios web – y aunque ARIA sea aún un prospecto, puedes comenzar a usarlo y algunos AT sabrán cómo leerlo.

Introducción a WAI ARIA

Escrito por Gez Lemon para Desarrolladores de Opera, este artículo es el mejor post para comenzar. Entenderás por qué fue creado ARIA y entenderás algunos de los términos básicos como roles, estados, propiedades y mi favorito, las regiones.

ARIA Roles 101

Ahora que sabes lo básico de ARIA, puedes comenzar a implementar los roles de ARIA en tus aplicaciones. Una lista completa de las definiciones de roles pueden ser vista aquí en el sitio W3C WAI ARIA 1.0.

Estados y propiedades soportados

Aprender acerca de las propiedades de ARIA es el siguiente paso lógico y las especificaciones W3C WAI ARIA son realmente útiles, aunque la primera impresión es que estuvieses leyendo la Constitución o algo parecido

Prueba algunos demos: ARIA Live Regions Screen Reader Demo

Un vídeo muy útil por Aaron Cannon (cannonaccess.com) acerca del uso de las regiones vivas de ARIA de una manera correcta, la diferencia entre aria-live=”polite” y aria-live=”rude” es cómo funciona todo esto. Necesitas saber que ahora aria-live=”rude” no es parte de las especificaciones (era en realidad demasiado rudo) y nos quedamos con “off”, “polite” y “assertive”.

Quizás quieras leer ARIA and Progressive Enhancement escrito por Derek Featherstone para A List Apart porque los pequeños ejemplos que encontrarás ahí te ayudarán a entender mejor los roles y las propiedades de ARIA.

Si quieres ir de vuelta a leer la Constitución, WAI-ARIA 1.0 Authoring Practices – An author’s guide to understanding and implementing Accessible Rich Internet Applications es el próximo paso, una página llena de ejemplos para que aprendas las mejores prácticas en lo que respecta a la implementación de ARIA – presta atención especial a la Sección 3: Navegación Estructural por Teclado, Sección 4: Relaciones y Sección 5: Manejando Cambios Dinámicos, los cuales son realmente importantes.

Aprende con ejemplos

JQuery Widget Samples – una colección de widgets JQuery accesibles con ARIA.

jQuery-Accessible-RIA – más ejemplos.

Update: más minutos de WAI ARIA

Aaron Gustafson colgó un video con NVDA leyendo su famoso TabInterface.

TabInterface in Firefox using NVDA screenreader from Aaron Gustafson on Vimeo.

Te recomendamos:

1. Cómo leen los lectores de pantalla una página con HTML5 y ARIA

La Fundación Ciencias de la Documentación ofrece a los profesionales de la información, programas formativos altamente especializados que permitan mantenerse actualizados compartiendo experiencias y conocimientos gracias al uso de las tecnologías de la información en el campo de la educación.

Curso de accessibilidad web

Inicio: 22 de Febrero de 2011.
Fin: 25 de Febrero de 2011.
Lugar: online.
Precio: 50 Euros.

Programa

• Introducción a la accesibilidad: limitaciones de acceso.
• Definición de accesibilidad: por qué es importante.
• Leyes y políticas en accesibilidad: España, Europa, Iberoamérica y EE.UU.
• Pautas de Accesibilidad Web.
• Validación de la accesibilidad: herramientas disponibles.
• Normas generales y consejos prácticos para diseñar páginas web accesibles.
• Resumen final.
• Bibliografía.

Más información se puede encontrar en la web del curso de accesibilidad web.

Curso de usabilidad web

Inicio: 7 de Junio de 2011.
Fin: 10 de Junio de 2011.
Lugar: online.
Precio: 50 Euros.

Programa

• Introducción.
• Origen del término y definiciones.
• Cualidades del Profesional de la Usabilidad.
• ¿Por qué es importante la Usabilidad?
• Usabilidad y Experiencia de Usuario: aspectos que debemos considerar.
• Técnicas de evaluación de la Usabilidad Web: los test de usuarios y la evaluación heurística.
• “Los diez mayores errores”.
• Normas generales y consejos prácticos sobre la Usabilidad Web.
• Resumen final.
• Bibliografía.

Más información se puede encontrar en la web del curso de usabilidad web.

Inicio: 22 de Marzo de 2011.
Fin: 24 de marzo de 2011.
Lugar: Bilbao.
Precio: 160 Euros.

Creativity Meeting Point es un forum internacional de las industrias creativas que pretende aumentar y consolidar la creatividad afianzando la estrategia de desarrollo de las Industrias Creativas. Su propósito es facilitar un punto de encuentro de creativos y creativas locales y las mejores prácticas a nivel estatal e internacional.

Más información se puede encontrar en la web de Creativity Meeting Point.

Fecha 23 de Febrero de 2011
Lugar: Madrid, Hotel NH Príncipe de Vergara (C/ Príncipe de Vergara, 92).
Precio: 999 Euros.

Una charla sobre técnicas, trucos y experiencias exitosas para la gestión avanzada de estrategias Web con directores de: Infojobs, Telecinco, Fiat, BBVA, Technosite, Sanitas, etc.

Programa Web Forum Up to date 2011

• Posicionamiento en buscadores como factor clave en época de crisis
• Analítica web: Estudio de rentabilidad, medición de resultados y planificación estratégica
• Economía de escala en contenidos para maximizar la rentabilidad
• Web y Redes Sociales: ¿Cómo aumentar la presencia web y sacarle partido a tu contenido en las redes sociales?
• Mash up: Integración de servicios para un acceso universal
• Promoción online con costes controlados
• Gestión web multicanal y control de costes: el reto de gestionar hoy contenidos digitales
• WebMobile: browsing vs aplicaciones nativas
• La gestión estratégica de la transparencia de contenidos web. Gestión transparente en ayuntamientos
• Trucos y claves para optimizar la usabilidad web para mejorar la experiencia del usuario
• Cómo optimizar el contenido con la herramienta analítica
• Gestión interna vs Externalización: costes, rentabilidad y control
• ¿Redacción integrada?: una cuestión de rendimiento

Más información se puede encontrar en la: pagina de iiR España