Desarrollo Metro con Windows 8 UPM
-
Upload
roberto-luis-bisbe -
Category
Technology
-
view
1.046 -
download
2
Transcript of Desarrollo Metro con Windows 8 UPM
![Page 1: Desarrollo Metro con Windows 8 UPM](https://reader033.fdocuments.net/reader033/viewer/2022052900/5560b61cd8b42afe3b8b4a22/html5/thumbnails/1.jpg)
Desarrollo Metro con Windows 8
Escuela Técnica Superior de Ingenieros deTelecomunicación Universidad Politécnica de Madrid
Roberto Luis Bisbé
Microsoft Student Partner
![Page 2: Desarrollo Metro con Windows 8 UPM](https://reader033.fdocuments.net/reader033/viewer/2022052900/5560b61cd8b42afe3b8b4a22/html5/thumbnails/2.jpg)
¿Quién soy yo?
• Estudiante de 4º Ingeniería Informática UAM • Microsoft Student Partner 2010-12 • Desarrollador independiente (C#, Java, PHP) • Y tengo un blog! http://robertoluis.wordpress.com
![Page 3: Desarrollo Metro con Windows 8 UPM](https://reader033.fdocuments.net/reader033/viewer/2022052900/5560b61cd8b42afe3b8b4a22/html5/thumbnails/3.jpg)
¿De qué voy a hablar?
• Novedades para usuarios • Oportunidades para desarrolladores • Ejemplo de aplicación hecha en C#
![Page 4: Desarrollo Metro con Windows 8 UPM](https://reader033.fdocuments.net/reader033/viewer/2022052900/5560b61cd8b42afe3b8b4a22/html5/thumbnails/4.jpg)
<- Bienvenidos a Metro
![Page 5: Desarrollo Metro con Windows 8 UPM](https://reader033.fdocuments.net/reader033/viewer/2022052900/5560b61cd8b42afe3b8b4a22/html5/thumbnails/5.jpg)
Metro para usuarios
• Charms – Funcionalidad común
• Tiles – Iconos vivos
• Pantalla completa – Interacción sin el marco, enfocada a contenido
• Multi-touch
![Page 6: Desarrollo Metro con Windows 8 UPM](https://reader033.fdocuments.net/reader033/viewer/2022052900/5560b61cd8b42afe3b8b4a22/html5/thumbnails/6.jpg)
Charms
• Settings: Menú inicio y preferencias
• Devices: Dispositivos e impresoras
• Share: Compartir con otras aplicaciones
• Search: Búsqueda local y global
![Page 7: Desarrollo Metro con Windows 8 UPM](https://reader033.fdocuments.net/reader033/viewer/2022052900/5560b61cd8b42afe3b8b4a22/html5/thumbnails/7.jpg)
Tiles
Información con aplicación cerrada Tamaño simple: Tamaño doble:
![Page 8: Desarrollo Metro con Windows 8 UPM](https://reader033.fdocuments.net/reader033/viewer/2022052900/5560b61cd8b42afe3b8b4a22/html5/thumbnails/8.jpg)
Pantalla Completa
![Page 9: Desarrollo Metro con Windows 8 UPM](https://reader033.fdocuments.net/reader033/viewer/2022052900/5560b61cd8b42afe3b8b4a22/html5/thumbnails/9.jpg)
DEMO Metro para usuarios
![Page 10: Desarrollo Metro con Windows 8 UPM](https://reader033.fdocuments.net/reader033/viewer/2022052900/5560b61cd8b42afe3b8b4a22/html5/thumbnails/10.jpg)
Metro para desarrolladores
• Nueva API • Nuevos dispositivos • Contratos • Plantillas por defecto • Interfaz adaptable • App Bar • App Store • Herramientas y Recursos
![Page 11: Desarrollo Metro con Windows 8 UPM](https://reader033.fdocuments.net/reader033/viewer/2022052900/5560b61cd8b42afe3b8b4a22/html5/thumbnails/11.jpg)
Nueva API Use what you know Do what you’ve always imagined
![Page 12: Desarrollo Metro con Windows 8 UPM](https://reader033.fdocuments.net/reader033/viewer/2022052900/5560b61cd8b42afe3b8b4a22/html5/thumbnails/12.jpg)
Hola mundo: C# + XAML <UserControl > <Grid x:Name="LayoutRoot“ Background="#FF0C0C0C"> <BuCon Name="myBuCon" Click="changeText">Click Me!</BuCon> <TextBox Grid.Row="1" Name="myTextBox" /> </Grid> </UserControl>
private void changeText(object sender, RoutedEventArgs e) { myTextBox.Text = “Hola mundo C#"; }
![Page 13: Desarrollo Metro con Windows 8 UPM](https://reader033.fdocuments.net/reader033/viewer/2022052900/5560b61cd8b42afe3b8b4a22/html5/thumbnails/13.jpg)
Hola mundo: HTML + JavaScript <!DOCTYPE html> <html> <head> <meta charset="u]-‐8" /> <`tle>MyFirstMetroApp</`tle> <!-‐-‐ 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> <!-‐-‐ WinWebApp1 references -‐-‐> <link rel="stylesheet" href="/css/default.css" /> <script src="/js/default.js"></script> </head> <body> <buCon onClick="click">Click me!</buCon> <p id="myText" /> </body> </html>
document.addEventListener("click", func`on(){ myText.innerText=“Hola Mundo JS"; });
![Page 14: Desarrollo Metro con Windows 8 UPM](https://reader033.fdocuments.net/reader033/viewer/2022052900/5560b61cd8b42afe3b8b4a22/html5/thumbnails/14.jpg)
Nuevos dispositivos
• Tablets < 10’’ (ARM) • Netbooks (10’’ -> 13’’) • Portátiles convencionales (13’’ -> 17’’) • PC Clásicos (17 -> 30) • Media Centers (>30’’)
![Page 15: Desarrollo Metro con Windows 8 UPM](https://reader033.fdocuments.net/reader033/viewer/2022052900/5560b61cd8b42afe3b8b4a22/html5/thumbnails/15.jpg)
Contratos
• Búsqueda – Buscar en nuestra aplicación desde otras, y
desde la nuestra en otras. • Compartir – Acceder a datos de otras aplicaciones y
compartir con terceras. • Picker – Compartir ficheros
![Page 16: Desarrollo Metro con Windows 8 UPM](https://reader033.fdocuments.net/reader033/viewer/2022052900/5560b61cd8b42afe3b8b4a22/html5/thumbnails/16.jpg)
Plantillas por defecto
Plantillas de proyecto • Proyecto vacío • Grid Application – 2 páginas: 1 maestro y 1 detalles
• Split Application – 1 página maestro/detalles
![Page 17: Desarrollo Metro con Windows 8 UPM](https://reader033.fdocuments.net/reader033/viewer/2022052900/5560b61cd8b42afe3b8b4a22/html5/thumbnails/17.jpg)
Plantillas por defecto
Plantillas de fichero • Páginas – Collection – Collection Summary – Grouped Collection – Item Detail – Split
• Contratos – File Picker – Search – Share
![Page 18: Desarrollo Metro con Windows 8 UPM](https://reader033.fdocuments.net/reader033/viewer/2022052900/5560b61cd8b42afe3b8b4a22/html5/thumbnails/18.jpg)
Interfaz adaptable
Mínima resolución: 1024x768 3 Opciones • Horizontal (por defecto, requerido) • Snapped a partir de 1336x768+ (requerido) • Vertical (opcional) Las plantillas por defecto ya tienen soporte para estas interfaces
![Page 19: Desarrollo Metro con Windows 8 UPM](https://reader033.fdocuments.net/reader033/viewer/2022052900/5560b61cd8b42afe3b8b4a22/html5/thumbnails/19.jpg)
Interacción
Application Bar • Interacción global • Iconos desplazados a
los laterales • Oculta por defecto
Menú contextual • Máximo 5 opciones • Sin iconos • Mayor superficie
(touch)
![Page 20: Desarrollo Metro con Windows 8 UPM](https://reader033.fdocuments.net/reader033/viewer/2022052900/5560b61cd8b42afe3b8b4a22/html5/thumbnails/20.jpg)
Microsoft Store
• Opciones – Gratuitas – Gratuitas con compras in-app – Versiones de prueba – Versiones de pago
• Windows App Certification Kit – Simular el proceso de certificación
![Page 21: Desarrollo Metro con Windows 8 UPM](https://reader033.fdocuments.net/reader033/viewer/2022052900/5560b61cd8b42afe3b8b4a22/html5/thumbnails/21.jpg)
Herramientas (for free!)
• Windows Developer Preview • Visual Studio 11 Express • Expression Blend 5 • Windows App Certification Kit
![Page 22: Desarrollo Metro con Windows 8 UPM](https://reader033.fdocuments.net/reader033/viewer/2022052900/5560b61cd8b42afe3b8b4a22/html5/thumbnails/22.jpg)
• Herramientas y Sistema operativo: – http://msdn.microsoft.com/en-us/windows/apps/
br229516 • Código de ejemplo: – http://code.msdn.microsoft.com/windowsapps
• Documentación: – http://msdn.microsoft.com/en-us/library/windows/
apps/ • Hands-on Labs: – http://www.buildwindows.com/Labs
Recursos (also for free!)
![Page 23: Desarrollo Metro con Windows 8 UPM](https://reader033.fdocuments.net/reader033/viewer/2022052900/5560b61cd8b42afe3b8b4a22/html5/thumbnails/23.jpg)
DEMO Hola mundo, de verdad
![Page 24: Desarrollo Metro con Windows 8 UPM](https://reader033.fdocuments.net/reader033/viewer/2022052900/5560b61cd8b42afe3b8b4a22/html5/thumbnails/24.jpg)
• Aplicación real con características Metro – Charms – App Bar – Tiles & Notificaciones
• En desarrollo actualmente • Disponible en: http://
metrotask.codeplex.com
Proyecto: MetroTask
![Page 25: Desarrollo Metro con Windows 8 UPM](https://reader033.fdocuments.net/reader033/viewer/2022052900/5560b61cd8b42afe3b8b4a22/html5/thumbnails/25.jpg)
DEMO Proyecto MetroTask
![Page 26: Desarrollo Metro con Windows 8 UPM](https://reader033.fdocuments.net/reader033/viewer/2022052900/5560b61cd8b42afe3b8b4a22/html5/thumbnails/26.jpg)
Resumen
• Windows 8 tiene buen aspecto • Reutilizar técnicas de programación y
lenguajes => innovar con lo que ya sabemos • Interfaz común para muchas tareas • Aprender es fácil, y gratis. • Estar el primero puede marcar la diferencia
![Page 27: Desarrollo Metro con Windows 8 UPM](https://reader033.fdocuments.net/reader033/viewer/2022052900/5560b61cd8b42afe3b8b4a22/html5/thumbnails/27.jpg)
Ahora os toca a vosotros