Probando en entorno de desarrollo de Windows 8 ,Metro con jQuery!
Bueno, este post va a ser breve, más imágenes que explicaciones, ya descargué la Windows 8 desde dev.windows.com, el preview con las herramientas de desarrollo.
Lo configuré para entrar con mi cuenta de Windows Live, virtualizado obviamente:
Entonces podemos ver el “escritorio” de Windows 8, basado en estas baldosas que nos permiten mostrar distintas menú y aplicaciones.
Lo primero que probé fue obviamente Visual Studio 11, debido a que se puede utilizar HTML5 , CSS y Javascript para desarrollar aplicaciones de escritorio, quise probarlo de inmediato.
Vemos una interfaz bastante familiar , casi idéntica a la de Visual Studio 2010
Voy a crear un nuevo proyecto, con la plantilla “Blank Application” como puedes ver de los templates JavaScript –>Windows Metro Style. La estructura del proyecto es la siguiente (Notar que agregué JQUERY)
Es una buena practica seguir esta estructura, sin embargo podemos crear nuestras propias carpetas para css, js, etc. El template nos propone referencias por defecto
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Prueba2</title>
<!-- WinJS references -->
<link rel="stylesheet" href="/winjs/css/ui-dark.css" />
<script src="/winjs/js/base.js"></script>
<script src="/winjs/js/wwaapp.js"></script>
<script src="js/jquery-1.6.4.min.js"></script>
<!-- Prueba2 references -->
<link rel="stylesheet" href="/css/default.css" />
<script src="/js/default.js"></script>
</head>
<body>
<h1>Mi Primera App Metro!!</h1>
<img src="images/small_logo1.png" /></br>
Esto esta muy bueno! </br>
<button id="boton">Click me!</button>
<div id="texto"></div>
</body>
</html>
Al modificar el CSS podemos ver la ayuda visual que nos propone Visual Studio 11:
Agregué el siguiente CSS:
body {
background-color:#0094ff
}
h1
{
font-family:Arial;
color:#fff;
}
.cuadro
{
width: 300px;
height:100px;
border:1px solid red;
background-color:#ceebc2;
color:Black;
}
El código en nuestro default.js, será el siguiente:
(function () {
'use strict';
// Uncomment the following line to enable first chance exceptions.
// Debug.enableFirstChanceException(true);
WinJS.Application.onmainwindowactivated = function (e) {
if (e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
// TODO: startup code here
}}
$(document).ready(function(e) {
$("#texto").html("Con jQuery Ready!");
$("#boton").click(function (e) {
$("#texto").addClass("cuadro");
$("#texto").html("Saludos desde el click y con Jquery!!");
});
});
WinJS.Application.start();
})();
Puedes ver que utilizamos código Jquery para la manipulación de los elementos del DOM, algo bastante sencillo, es solo para demostrar!.
Como puedes ver objecto WinJS hace toda la magia, más adelante vamos a hablar sobre esta API.
Pantalla de propiedades del proyecto, en donde podemos setear la pagina de inicio, la descripción los logos de la aplicación dependiendo del tamaño y la orientación del dispositivo.
Ahora al ejecutar la aplicación: 
Al presionar sobre el botón(notar que por defecto tiene el estilo de Metro)
Y si vemos nuestro pantalla, vemos que la imagen seteada como small logo es la que se ve en la pantalla inicial.
Que más puedo decir…
EXCELENTE WINDOWS 8 a descargarlo!!!