105
[email protected] | @soreygarcia | blog.soreygarcia.me

JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript

Embed Size (px)

Citation preview

Page 1: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript

[email protected] | @soreygarcia | blog.soreygarcia.me

Page 2: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 3: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 4: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 5: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 6: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript

Escuela de Arte Bahaus - Simplicidad

Page 7: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript

Swiss Style – Experiencias comunes

Page 8: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript

Kinetic typography – Movimiento / Tipografía

Page 9: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 10: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 11: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 12: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 13: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 14: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 15: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 16: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 17: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 18: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 19: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript

10” 1024x76813” 1400x105020” 1920x108030” 2560x160011.6” 1366x768

Page 20: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 21: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 22: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 23: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 24: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 25: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 26: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 27: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript

42pt

20pt

11pt

11pt

11pt

9pt

Page 28: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 29: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 30: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 31: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 32: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 33: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 34: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 35: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 36: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 37: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 38: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 39: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 40: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 41: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 42: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 43: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 44: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 45: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 46: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 47: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 48: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 49: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 50: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 51: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 52: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 53: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 54: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 55: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 56: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 57: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 58: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript

HTML5, CSS3 y JS

Page 59: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 60: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 61: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 62: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 63: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript

Diferencias de uso HTML Web y HTML Nativo

App Container

HTML Host Process

Internet Explorer

Web

Platform

TAB

App Code

Web Platform

Windows

Runtime

App Code

Page 64: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript

Running app

Windows

Runtime

Page 65: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript

Running app

Windows

Runtime

Page 66: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript

App Container

App Code

Web Platform

HTML App Host Process

Running app

Windows

Runtime

Page 67: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript

App Container

App Code

Web Platform

HTML App Host Process

Running app

Windows Runtime

Page 68: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript

App

launch

Splash

screen

Page 69: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 70: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript

¿Windows 8.1?

Page 71: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript

Geo-location

Proximity

Direct3D Direct2D Direct Write

PlayTo

Contracts

Bing

Azure Mobile

HTML5/CSS XAMLInput Controls

Authentication

Portable

Sensors Playback Capture

Printing

SVGCanvas

Local storage

SMS

StreamsBackground

transfer

Syndication Networking

XML and JSON

Skydrive

Live tiles and toast

Accessibility Data binding

Application services

Threading/timersMemory

managementGlobalization Cryptography

Xbox Live

Page 72: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript

Geo-location

Proximity

Direct3D Direct2D Direct Write

PlayTo

Contracts

Bing

Azure Mobile

HTML5/CSS XAMLInput Controls

Authentication

Portable

Sensors Playback Capture

Printing

SVGCanvas

Local storage

SMS

StreamsBackground

transfer

Syndication Networking

XML and JSON

Skydrive

Live tiles and toast

Accessibility Data binding

Application services

Threading/timersMemory

managementGlobalization Cryptography

Xbox Live

Page 73: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript

Geo-location

Proximity

Direct3D Direct2D Direct Write

PlayTo

Contracts

Bing

Azure Mobile

HTML5/CSS XAMLInput Controls

Authentication

Bluetooth

USB

HID WiFi direct

Point of service

3Dprinting

Scanning

WebGL

HTTP

Contacts

Appoint-ments

PDF

Speech synthesis

Diagnostics

Portable

Sensors Playback Capture

Printing

SVGCanvas

Local storage

SMS

StreamsBackground

transfer

Syndication Networking

XML and JSON

Skydrive

Live tiles and toast

Accessibility Data binding

Application services

Threading/timersMemory

managementGlobalization Cryptography

Xbox Live

Page 74: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 75: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 76: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 77: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 78: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 79: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript

http://msdn.microsoft.com/en-us/library/windows/apps/hh700404.aspx

window.returnValue Not supported.

window.sessionStorage This property appears to

work, but data is lost

when the app is

terminated. Do not use

this property to store

app state.

window.showHelp Not supported.

window.showModalDial

og

Not supported.

window.showModeless

Dialog

Not supported.

xhr.responseBody Not supported.

En general, las API de HTML y DOM

funcionan del mismo modo que lo harían

en Windows Internet Explorer en modo

estándar. Pero hay algunas diferencias.

Algunas de ellas se producen por

ejecutarse dentro del shell de Windows,

que controla qué tipos de ventanas puedes

abrir. Otras diferencias son el resultado de

la aplicación de la Tienda Windows con el

modelo de seguridad de JavaScript.

Page 80: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 81: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript

// Omitted code

Hace que sea más sencillo evitar conflictos

de nomenclatura o situaciones donde

accidentalmente modifiques un valor que

no tenías intención de modificar.

Además, mantiene a los identificadores

innecesarios lejos del espacio de nombres

global, lo que ayuda al rendimiento.

http://msdn.microsoft.com/es-

es/library/windows/apps/br230269.aspx

Page 82: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 83: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 84: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 85: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 86: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 87: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 88: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript

Puedes dividir la aplicación en varios

archivos; pero en lugar de desplazarse de

página a página, la aplicación carga otros

documentos en la página principal. Dado

que la página principal de la aplicación

nunca se descarga, los scripts tampoco lo

hacen y eso facilita la administración del

estado, las transiciones y las animaciones.

Para ayudar a crear aplicaciones que usan

el modelo de navegación de una página, la

biblioteca de Windows para JavaScript

proporciona el objeto

WinJS.UI.Pages.PageControl.

Page 89: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 90: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 91: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 92: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 93: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 94: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 95: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 96: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 97: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript

Trusted content

from local package

Untrusted content from

web or must interact with such

http://

Local context Web context

http://ms-appx:/// ms-appx-web:///

Page 98: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 99: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript

@media (min-width: 500px) and (max-width: 1023px) {/* CSS styles to change layout based on window width */

}@media (min-width: 1024px) {

/* CSS styles to change layout based on window width */}

Page 100: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 101: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript

Azure Mobile Services

Page 102: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript

Windows Store iOS

Android

Windows Phone 8

iOS

Android

HTML 5/JS

SDKs

Server-Side

Scripts

&

Scheduler

Page 103: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript
Page 104: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript

Además de miles de tutoriales y todo el contenidoen MSDN, se encuentra esteeBook gratuito que puede serdescargado en Mobi, EPUB, PDF y desde la tienda de Amazon Gratis.

http://blogs.msdn.com/b/microsoft_p

ress/archive/2012/10/29/free-ebook-

programming-windows-8-apps-with-

html-css-and-javascript.aspx

Page 105: JSConfCo: Desarrollo de Aplicaciones para Windows Store con HTML5 y Javascript

Gracias@soreygarcia