Archive

August 2010

Archivos

HTML5 Rocks!


Desde hace unos días ya está a disposición de los desarrolladores la página HTML5 Rocks. El objectivo de esta página es proporcionar recursos para todas aquellas personas implicadas en cualquier proyecto web, especialmente de aplicaciones web.

Aquellos que hayan estado desarrollando con HTML/JS/CSS hasta ahora, encontrarán en HTML5 nuevas etiquetas y una serie de nuevas APIs para implementar ciertas funcionalidades que hasta ahora sólo era posible con el uso de librerías externas o extraños hacks en el código. Estas APIs incluyen nuevos métodos para controlar acciones de “soltar y arrastrar", histórico de navegacion, renderizado gráfico (canvas), base de datos en el cliente, nuevos cache para uso offline, geolocalización, y mucho más.

De hecho, en HTML5 rocks se tratan no sólo las tecnologías puramente de HTML5 sino que también CSS3 y otras APIs Javascript que todos los navegadores modernos están soportando actualmente. A todo este grupo de tecnologías también se les refiere esporadicamente como HTML5++.

El primer paso para poner tu aplicación o pagina al día es tan sencillo como simplificar un poco la estructura de tus etiquetas a HTML5. Si antes una página, en su versión mas simple, tenía la siguiente estructura:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">...</style>
</head>
<body>
<!-- body content -->
<script type="text/javascript">...</script>
</body>
</html>

Ahora con HTML5 puedes escribirlo así (sobretodo la primera línia de doctype):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>...</style>
</head>
<body>
<!-- body content -->
<script>...</script>
</body>
</html>

A partir de aquí, échale un vistazo a los recursos disponibles en estas diapositivas para ver cuales podrían ser útiles para tu aplicación. Con el editor de código interactivo puedes experimentar con cada una de las características HTML5 para aprender como utilizar el código necesario en segundos. Para ejemplos mas avanzados que utilizan varias tecnologías a la vez, hay una galería de ejemplos para descargar y aprender del código.

Si además eres de los que aprende mejor con un tutorial paso a paso, hay una serie de 14 tutoriales disponibles que enseñan como empezar a utilizar las tecnologías de HTML5 (o HTML5++), tales como geolocalización, Web Workers o HTML5 video.

Si deseas contribuir con código, demos o sugerencias utiliza el bug tracker o la cuenta de twitter @ChromiumDev. Estaremos encantados de incorporar tus ejemplos.

Ernest Delgado, Developer Programs Engineer de Google Chrome

Read More

Iniciando en App Inventor

Por segunda semana tenemos a Nicolas Bartolotti para hablarnos de un tema de candente actualidad para los desarolladores de Android. Al final de este tutorial hay tambien un par de enlaces a articulos relacionados con este tema por Israel Ferrer.

En este artículo vamos a trabajar con App Inventor for Android, esta plataforma que provee Google abre la posibilidad de crear soluciones a desarrolladores independientemente de sus conocimientos de programación informática. Para docentes y profesores de las ramas de ingeniería y desarrollo móbil, Inventor se ha convertido en una poderosa herramienta para introducir a los estudiantes al mundo de la programación y ayudarlos a convertirse en creadores de la tecnología y no sólo consumidores de la tecnología. App Inventor entre tantas cosas, nos permite compartir las aplicaciones desarrolladas de una forma muy simple e intuitiva.

Totalmente basado en la web App Inventor se convierte en algo muy atractivo para cualquier persona amante y seguidor de la tecnología.

¿Le damos una visita al escenario de desarrollo?

Actualmente App Inventor se encuentra en fase experimental y por este motivo debemos recibir una invitación para utilizarlo.



Fig.1 Escenario Inicial App Inventor


Como se puede observar en la Fig.1 ingresamos al site y generamos un nuevo proyecto. Así de simple empezamos a desarrollar.


Fig.2 Marco de diseño de la solución Mobile


En la Fig.2 podemos visualizar el marco de diseño que se puede proporcionar a nuestro desarrollo Android, el entorno de diseño se compone de una Palette (caja de controles), un Viewer (visualizador) donde puedo visualizar el diseño sobre la muestra de teléfono Android y una guía de componentes y propiedades de cada uno de los controles que se están manipulando.

Con estas opciones rápidamente sin conocer mucho de la tecnología Android puede diseñar nuestra solución, arrastrando controles por ejemplo un botón, una imagen, cambiar colores y demás.

Ahora la preocupación llega en como codificar el comportamiento de la interfaz, socorro!! Necesito un profesional del software es lo primero que llegaría a sus mentes.

App Inventor propone un entorno de programación por bloques muy simple de manipular por alguien ajeno al software. ¿Lo vemos?


Fig. 3 – Editor de Código Fuente


El editor de código fuente que se muestra en la Fig.3 propone dos opciones que se pueden visualizar en el vértice superior izquierdo, en donde podemos optar por seleccionar los bloques propios (ellos se derivan de los controles diseñados en la interfaz mobile) y los bloques de construcción tradicionales para aplicar comportamiento en general a nuestra solución.

Bien, ahora el requerimiento de prueba sería:

"Necesito que al pulsar sobre un botón en la interfaz de mi solución Android Mobile se cambie el fondo de pantalla a color gris."

Paso 1:

Buscar en los bloques de construcción propios como el control del botón:


Fig.4 – Opciones sobre el control de botón


Como podemos observar en la Fig.4 al seleccionar el botón se nos proponen opciones muy intuitivas,

Paso 2:

Seleccionamos el bloque de "Click". Esta es la operación donde se requiere una acción.


Fig. 5 – Selección del Bloque de Click


Paso 3:

Vamos a arrastrar otro bloque que reaccione con una actividad a este evento de "Click". No debemos preocuparnos mucho porque App Inventor con las figuras de los bloques ya nos guía. Esto quiere decir que según su forma encajarán.


Fig. 6 – Acoplado de Bloques


Como se muestra en la Fig.6 hemos codificado que al hacer Click en el botón cambiamos el fondo de la pantalla a… nos resta definir el color.

Paso 4:

Seleccionamos de los bloques generales que provee App Inventor, un color.


Fig. 7 Selección de un bloque de color.


Listo!!

Nuestra aplicación está completa, y así de simple la podemos realizar

Simple ¿no?

Les dejo un video de implementación.

Hasta la próxima!
Publicado por Ing. Nicolas Bortolotti


Articulos relacionados:

Read More