Nomad–Extensión para VS2010 para crear apps móviles cross-plataforms

image

Hola que tal? , quería compartir este interesante plugin para crear aplicaciones móviles multiplataforma. Puedes descargar este plugin en el sitio oficial: http://www.vsnomad.com/

Lo primero que debemos hacer el registrarnos en el sitio para tener acceso a la beta del producto. El funcionamiento de este plugin era algo que ya hechaba de menos en una herramienta tan potente co visual studio, pero que ya estaba en Dreamweaver hace un tiempo, el cual permite generar plantillas con jquerymobile y luego compilar en la nube y obtener los instalables para Android y IOS (Para IOS debes ser parte del IOS developer Program),de la ayuda de la librería Cordova (derivada de PhoneGap)

Una vez que nos registramos nos va a llegar al correo el login y password para poder acceder al servicio. Luego vamos a poder ver en nuestra pantalla de selección de proyectos:

image

Le damos Ok y vemos el código que genera  es HTML5 junto a las librerías de jquerymobile:

image

Si lo probamos en el emulador de IPhone para VS2010 (que funciona también en Webmatrix, mira este articulo si quieres saber como instalarlo http://geeks.ms/blogs/gperez/archive/2012/06/15/simular-un-browser-de-un-iphone-o-ipad-con-webmatrix-2-rc.aspx)

image

Ahora bien, si vemos la carpeta del proyecto podemos ver el archivo de cordova.js, proyecto que deriva de PhoneGap que hoy en día es propiedad de Adobe, y nos provee de una libería javascript que permite la comunicación desde html5 al sdk del dispositivo. Revisa más sobre cordova: https://github.com/sebbie1o1/cordova-jquerymobile-boilerplate

image

Luego podemos compilar para cualquier para Android o IPhone

image

Selecciono Android y despues de unos segundos la compilación ya está lista y podemos abrir la carpeta de generación:

image

Y acá está el APK!

image

Puedes definir también una splash screen para ambas plataformas:

image

Voy a probar la aplicación en el Emulador que provee el SDK de Android, descargo la APP (me la envié por correo y desde el emulador entre a mi cuenta para descargar el APK)

image image

Puedes ver que cordova está haciendo lo suyo, teniendo acceso a parametros de telefono (en mi caso emulador), datos que cuando probé en el emulador Web de IPhone no aparecián ya que este emulador es solo una interfaz web).

Excelente! ya podemos crear app con HTML5 y Phonegap desde nuestro visual studio!

Importante, no es necesario tener el SDK de Android instalado, ya que nomad compila en nube, si vas a necesitas conexión a internet.

Revisa la documentación y un video explicativo acá:

http://www.vsnomad.com/documentation/

Espero que te sirva!
@chalalo

Simular un browser de un IPhone o IPad con WebMatrix 2 RC

Hola que tal?  hoy quiero mostrarles un pequeño tips que les va a ser de utilidad en sus desarrollos para Móviles, y es que podemos instalar un simulador para IPad o IPhone desde  WebMatrix 2 RC (revisa que versión tienes). El Simulador del mundo IOS viene de la mano de la compañía electricplum http://www.electricplum.com/dlsim.html , en donde puedes ver cuales solas diferencias de la versión Lite a la Pro y si estas metido de lleno en el desarrollo móvil, tal vez no sea mala idea comprar la versión pro, ya que solo son 30 dólares. Bajé la versión Lite y lo estoy probando con un sitio y se ve bastante bien, y seriamente estoy pensando en comprar la versión completa, ya que tiene interacción con el acelerómetro y  drag  & Scroll.

image

Pero veamos ahora como integrarlo a WebMatrix RC. Primero que nada debemos ir al menú de Ejecutar y seleccionamos Agregar nuevo:

image

Luego se nos presenta la pantalla de las extensiones para instalar:

image

Y obviamente instalamos el simulador de iPhone, te va a mostrar dos pantallas adicionales y como sabemos ok ok siguiente siguiente ok si si acepto…. Luego aparece el clásico Espere (en esta versión dice “Aguarde” Confundido)

Luego estamos ok para comenzar a probar:

image

Para probar, voy a ver una página que tiene el siguiente código para ver cual es la respuesta del objeto navigator.appVersion:

function browserVersion(){
     alert(navigator.appVersion);
}

image

Podemos ver que realmente simula el el user agent, bueno su documentación así lo decía, pero solo era para comprobar:

“Test iOS detection on your Web site with full iOS user agent string simulation.”

Ahora a probar un prototipo que estaba haciendo (para ver las capacidades JavaScript)

image

Funciona relativamente bien, y digo relativamente debido a que el botón volver que se maneje mediante una función JavaScript no siempre funcionó como corresponde, de todas maneras, puedo reemplazar la función.

Para finalizar, sin duda esto es una gran ayuda, y más encima gratis!, así que si todavía no te decides por WebMatrix, que esperas?? está de pelos!.

Baja Microsoft WebMatrix 2 RC

Saludos,

@chalalo

[WebCast] JavaScript, jQuery y AJAX pragmáticos con ASP.NET

image

Hola!, los quería invitar al WebCast que voy a dictar el 27 de Junio, sobre tecnologías que me apasionan, que son ASP.NET & jQuery, les dejo el abstract.

JQuery hizo girar al mundo a su alrededor. ¿Todavía escribimos en JavaScript o solo en jQuery? Veremos nuevas técnicas de JavaScript y AJAX, así como algunas sorpresas de plugins de jQuery para potenciar nuestros desarrollos. ¿Cuáles son las mejores bibliotecas y prácticas para el uso de jQuery y JavaScript con ASP.NET? ¿Cómo deben diseñarse aplicaciones equilibradas para hacer el mejor uso de la potencia del servidor y del cliente?.

Fecha: 27/06/2012
Hora: 02:00 PM (GMT-05:00 Colombia).
Hora: 03:00 PM (GMT-04:00 Chile).

Inscríbete acá!:
https://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032515133&Culture=es-AR

Nos vemos!

[HTML5] Uso del elemento Output

Hola que tal, hace un tiempo que no hablaba de los nuevos elementos de HTML5, y ya era hora. En este post vamos a ver el nuevo elemento Output.  Hoy hay bastantes sitios que tienen formularios que realizan cálculos, como calculo de porcentajes, descuentos, recargos, etc. Hasta hora no existía un tag semántico que  soportara este tipo de operaciones, es por eso que vamos a revisarlo.

La definición

Este es un elemento relacionado con los formularios (tag form). De hecho en la especificación se define “el elemento output representa el resultado de una operación”.

Los atributos que acepta son los siguientes:

for :A una lista separada por espacios que contiene el ID de los elementos cuyos valores participan en el calculo.

form: Corresponde el Id del form al que se asociará el elemento <output>, el formulario debe estar en la misma página. Este tag se usa cuando elemento <output> no está contenido dentro del formulario

name: El nombre del elemento.

Implementación

Esto es bastante sencillo, veamos un ejemplo:

<!doctype html>
<html>
<head>
   <meta charset="utf-8">
</head>
     <body>
      <form onsubmit="return false" oninput="result.value= num1.valueAsNumber
                                   + num2.valueAsNumber">
          <input name="num1" id="num1" type="number" step="any">
       + <input name="num2" id="num2" type="number" step="any">
           <output name="result" for="a b"></output>
     </form>
  </body>
</html>

Puedes ver que tenemos un atributo del formulario oninput, que indica cual es la formula cuyo resultado vamos a exponer en el resultado. Puedes utilizar valueAsNumer o parseInt Con valueAsNumber no debemos especificar parseInt o parseFloat, sin embargo no todos los navegadores han implementado valueAsNumber.

<form onsubmit="return false" oninput="result.value= parseInt(num1.value) + parseInt(num2.value)">

image

Puedes ver que a medida que escribes dentro de las cajas de texto se va calculando inmediatamente.

El soporte de los navegadores respecto a este tag es el siguiente:

Browser

Soporte

Chrome

13+

Safari

5.1+

Firefox* (no soporta valueAsNumber)

6+

Opera

9.20+

Internet Explorer

10+

Espero que te sirva!

Chao!