Desarrollo Metro con Windows 8 UPM

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#

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:

Metro para desarrolladores
•  Nueva API
•  Nuevos dispositivos
•  Contratos
•  Plantillas por defecto
•  Interfaz adaptable
•  App Bar
•  App Store
•  Herramientas y Recursos

Use what you know
Nueva API
Do what you’ve always imagined

Hola mundo: C# + XAML
<UserControl
>
private
void
changeText(object
sender,

<Grid
x:Name="LayoutRoot“
RoutedEventArgs
e)

Background="#FF0C0C0C">
{

<BuCon
Name="myBuCon"

myTextBox.Text
=
“Hola
mundo
C#";

Click="changeText">Click
Me!</BuCon>

}

<TextBox
Grid.Row="1"
Name="myTextBox"
/
>

</Grid>

</UserControl>

Hola mundo: HTML + JavaScript
<!DOCTYPE
html>
document.addEventListener("click",

<html>

<head>

func`on(){

<meta
charset="u]-‐8"
/>

<`tle>MyFirstMetroApp</`tle>
myText.innerText=“Hola
Mundo
JS";

<!-‐-‐
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>

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
•  Contratos
–  Collection
–  File Picker
–  Collection Summary
–  Search
–  Grouped Collection
–  Share
–  Item Detail
–  Split

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
Menú contextual
•  Interacción global
•  Máximo 5 opciones
•  Iconos desplazados a •  Sin iconos
los laterales
•  Mayor superficie
•  Oculta por defecto
(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

Recursos (also for free!)
•  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

Proyecto: MetroTask
•  Aplicación real con características Metro
–  Charms
–  App Bar
–  Tiles & Notificaciones

•  En desarrollo actualmente
•  Disponible en: http://
metrotask.codeplex.com

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

Gracias

http://robertoluis.wordpress.com/w8
roberto.luis@amby.net
@rlbisbe

Desarrollo Metro con Windows 8 UPM

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (16)

Similar a Desarrollo Metro con Windows 8 UPM

Similar a Desarrollo Metro con Windows 8 UPM (20)

Más de Roberto Luis Bisbé

Más de Roberto Luis Bisbé (15)

Último

Último (10)

Desarrollo Metro con Windows 8 UPM