Genesis Vargas J

Como hacer una aplicación de Windows Phone con HTML5 (Tutorial muy fácil)

Comparte:

Hola amigos, esta vez les traigo a ustedes un tutorial sobre el desarrollo de aplicaciones móviles para Windows Phone de una forma muy fácil (utilizando HTML).

Primero tenemos que tener instalado Windows 8/8.1 y Visual Studio 2013 (pueden usar la versión comercial o la versión community) http://www.visualstudio.com/en-us/downloads/download-visual-studio-vs.aspx ¿porque recomiendo esta versión y no anteriores? sencillo, Visual Studio 2013 ya trae Windows Phone SDK (Aplica lo mismo para Visual Studio 2015) y todas las herramientas juntas (cosa que en la versión 2010 no).

Abrimos visual studio y creamos una applicación de tipo: HTML5 App Windows Phone Silverlight, el proyecto lo vamos a llamar: AplicacionHTML5.

Al momento de crearse seleccionamos la versión miníma de windows phone (8.0). Como vemos en el proyecto nos muestra de un lado el diseñador el emulador de windows phone con el componente de internet explorer y al lado la muestra de código del archivo xaml, también se crean automáticamente una carpeta HTML donde hay un archivo index.html y una carpeta css donde se van a guardar las hojas de estilo. Cabe decir que en esta carpeta vamos a guardar nuestros archivos javascript, html y css que usemos en nuestro proyecto.

Para este ejemplo vamos a crear una app de una calculadora sencilla: que haga operaciones con dos numeros en INPUTS diferentes. Vamos a editar el archivo index.html que trae por default y le vamos a cambiar el titulo y el titulo de la aplicación y seguidamente vamos a añadir el codigo del formulario de la calculadora.

INDEX.HTML

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" type="text/css" href="/html/css/phone.css" />
        <title>Aplicación HTML5</title>
        <script> 
        //esta funcion realiza el calculo (elegido) entre los dos numeros
        function calculo(operacion)
        {
            var num1 = document.calc.numero1.value 
            var num2 = document.calc.numero2.value 
            var result = eval(num1 + operacion + num2) 
            document.calc.resultado.value = result
        }
        </script>
    </head>
    <body>
        <div>
            <p>Aplicación HTML5</p>
        </div>
        <div id="page-title">
            <p>calculadora</p>
        </div>
        <form name="calc">
            <p>Digita el 1 numero</p> 
            <input name="numero1" size="12" type="number">
            <p>Digita el 2 numero</p> 
            <input name="numero2" size="12" type="number">
            <p>Elije la Operacion</p>
            <input name="" value=" + " onclick="calculo('+')" type="button"> 
            <input name="" value=" - " onclick="calculo('-')" type="button"> 
            <input name="" value=" x " onclick="calculo('*')" type="button"> 
            <input name="" value=" / " onclick="calculo('/')" type="button">
            <p>Aqui tienes el resultado</p> <input name="resultado" value="" size="10" type="text" readonly>
            <p><input type="reset" name="borrar" value="Borrar todo" onclick="javascript:document.calc.numero1.focus();"></p>
        </form>
    </body>
</html>

El archivo index.html debería estar así con ese código; allí hemos declarado en el script una función llamada calculo que recibe como parámetro el tipo de operación que se va a realizar y muestra el resultado en el input de abajo, mas abajo en el código vemos un formulario con dos inputs que vendrían siendo los que recibirán los valores del número 1 y el número 2 y los respectivos botones de cada operación que llaman a la función calculo.

Habiendo terminado este paso procedemos a depurar el proyecto (por default esta el emulador WVGA, también podemos escoger otros emuladores o si tenemos un celular NOKIA LUMIA podemos depurandolo en el mismo escogiendo la opcion DEVICE). Así deberia  quedar nuestro proyecto finalizado desde el emulador o smartphone windows phone.

Ya hemos probado nuestro proyecto ¿y ahora donde encuentro el instalador o ejecutable de mi app? Sencillo, en nuestro proyecto hay una carpeta llamada Bin y dentro de ella hay otra llamada Debug, dentro de ella encontramos ese archivo (en windows phone esos archivos son los que tienen las extensiones .XAP).

Bueno eso es todo espero que les sirva mucho para aprender y practicar

Comentarios


genesis vargas

Soy Genesis Vargas Jiménez, autor de éste blog. Me gusta desarrollar software en todas las plataformas (web, móvil y desktop) y compartir conocimiento para ayudar a muchas personas.

Desde el 2015 soy MVP Microsoft en Visual Studio y tecnologías de desarrollo, reconocimiento que me enorgullece mucho.

MVP Genesis Vargas J

A PHP Error was encountered

Severity: Core Warning

Message: Module 'timezonedb' already loaded

Filename: Unknown

Line Number: 0

Backtrace: