desarrollo metro con windows 8 upm
TRANSCRIPT
Desarrollo Metro con Windows 8
Escuela Técnica Superior de Ingenieros deTelecomunicación Universidad Politécnica de Madrid
Roberto Luis Bisbé
Microsoft Student Partner
¿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
¿De qué voy a hablar?
• Novedades para usuarios • Oportunidades para desarrolladores • Ejemplo de aplicación hecha en C#
<- Bienvenidos a Metro
Metro para usuarios
• Charms – Funcionalidad común
• Tiles – Iconos vivos
• Pantalla completa – Interacción sin el marco, enfocada a contenido
• Multi-touch
Charms
• Settings: Menú inicio y preferencias
• Devices: Dispositivos e impresoras
• Share: Compartir con otras aplicaciones
• Search: Búsqueda local y global
Tiles
Información con aplicación cerrada Tamaño simple: Tamaño doble:
Pantalla Completa
DEMO Metro para usuarios
Metro para desarrolladores
• Nueva API • Nuevos dispositivos • Contratos • Plantillas por defecto • Interfaz adaptable • App Bar • App Store • Herramientas y Recursos
Nueva API Use what you know Do what you’ve always imagined
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#"; }
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"; });
Nuevos dispositivos
• Tablets < 10’’ (ARM) • Netbooks (10’’ -> 13’’) • Portátiles convencionales (13’’ -> 17’’) • PC Clásicos (17 -> 30) • Media Centers (>30’’)
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
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
Plantillas por defecto
Plantillas de fichero • Páginas – Collection – Collection Summary – Grouped Collection – Item Detail – Split
• Contratos – File Picker – Search – Share
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
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)
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
Herramientas (for free!)
• Windows Developer Preview • Visual Studio 11 Express • Expression Blend 5 • Windows App Certification Kit
• 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!)
DEMO Hola mundo, de verdad
• Aplicación real con características Metro – Charms – App Bar – Tiles & Notificaciones
• En desarrollo actualmente • Disponible en: http://
metrotask.codeplex.com
Proyecto: MetroTask
DEMO Proyecto MetroTask
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
Ahora os toca a vosotros
