El documento presenta las nuevas características de Internet Explorer 10 y Windows 8, incluyendo sitios fijados, compartir sitios, prepararse para la vista dividida, vincular sitios web con tiendas, y soporte mejorado para HTML5, CSS3, y eventos táctiles. También discute herramientas como Compat Inspector y Modern.ie para probar sitios web en diferentes versiones de Internet Explorer.

1. @chalalo
www.chalalo.cl
MVP
ASP.NET/IIS
Características de Internet
Explorer 10

2. Agenda
• Odio IE
• Preparando mis sitios para IE 10 y W8
• Pinned Sites
• Share Site
• Prepararse para el Snap View
• Vincular mi WebSite Con la tienda
• IE10 y HTML5
• Grandes Experiencias de usuario
• Demos HTML5
• IE10 en WP8
• HTM5 Template
• Soporte CSS3
• Eventos Touch
• IE10 Testing
• IE Developer Toolbar
• Compat Inspector
• Moder.Ie
• Consejos para desarrollar para la Web

3. ODIO IE!!!

4. El browser que amamos odiar!
• http://www.browseryoulovedtohate.com/

5. Los tabs estan en el top
de la pantalla, en una
posición familiar

6. La barra de
direcciones, ahora se
encuentra en la parte
inferior de la
pantalla, aparece
cuando lo necesite, y
desaparece cuando
no lo
hacen, manteniendo
su enfoque en el
contenido que te
interesa.
Pase desde la parte superior o inferior de la pantalla.
Haga clic derecho en cualquier parte de la pantalla.
Para mostrar la
barra de
direcciones:

7. La barra de navegación
agrupa controles fáciles de
usar para las acciones
comunes como
Atrás, Adelante, Actualizar, co
locación de clavos sitios a la
pantalla de Inicio y, a obtener
una aplicación.
Refrescar adelante
Anclar sitio
Herramient
as
Atrás Auto-complete touch keyboard

8. Internet Explorer 10, navegador totalmente nuevo de Windows 8. Rápido y
fluido, la interfaz de usuario completamente rediseñada hace que Internet
Explorer 10 sea más rápido para las actividades diarias.
Internet Explorer 10 soporta Adobe Flash y los standar web modernos como
HTML5, para que pueda ver los sitios Web de la forma en que están destinados a
ser.
Internet Explorer 10 reinventa el navegador para el tacto al hacer la interfaz de
usuario más fácil para la navegación con tecnología táctil y con grandes
características como pestañas, botones de control, y flip ahead.

9. Preparando mis sitios para Windows 8 e
Internet Explorer 10
• Pinned Sites
• Share Site
• Prepararse para el Snap View
• Vincular mi WebSite con la tienda

10. Nuevas Características de IE10

11. • Pruebas de prototipos para las especificaciónes
que aún estan en draft.
Microsoft comparte estos prototipos con la
comunidad de desarrolladores, recibiendo
importante feedback
Ejemplos y librerias descargables listas para
testar.
html5labs.com

12. DEMO
Prometeus
Ejemplos de uso de características de HTML5

14. Por que construir aplicaciones basadas
en HTML5???
Internet Explorer 10 & WP8

15. Por que los desarrolladores cool lo estan
haciendo!!

16. No, pero realmente, con HTML5
podemos
•Re – usar nuestro conocimiento existente sobre HTML, CSS y
Javascript
•Reducir los costos de desarrollo liberando un solo product
para distintas plataformas
•Podemos combinar con C# para aprovechar el acceso al
resto de las posibilidades de la plataforma.

17. Y el impulso no se detiene
•1 Billón de dispositivos con browser modernos el 2013
•2 Millones de desarrolladores web en 2013
•79% de los desarrolladores de apps móviles estan ya explorando HTML5
•80% de las apps móviles utilizarán HTML5 para el 2015
IDC - http://www.idc.com/getdoc.jsp?containerId=prUS23480612

18. • Aplicacion de Windows
Phone que aprovecha el
control WebBrowser, se
potencia con Internet
Explorer 10

19. •Creando nuestra
primera app HTML5
en Windows Phone
Todas las grandes cosas empiezan desde el
principio

20. DEMO

21. • Acelerado por Hardware
• Optimizado para Touch
• Rápido para las
aplicaciones
• Preparado para las
aplicaciones offline!
Internet Explorer 10

22. IE10 Plataforma Web Acelerada por
HardwareCSS 2D Transforms
CSS 3D Transforms
CSS Animations
CSS Backgrounds &
Borders
CSS Color
CSS Device Adaptation*
CSS Flexbox*
CSS Fonts
CSS Grid*
CSS Image Values
(Gradients)
CSS Media Queries
CSS Multi-Column
Layout*
CSS Namespaces
CSS OM Views
CSS Regions And
Exclusions*
CSS Selectors
CSS Transitions
CSS Values And Units
Data URI
DOM Element Traversal
DOM HTML
DOM Level 3 Core
DOM Level 3 Events
DOM Style
DOM Traversal And Range
DOMParser And
XMLSerializer
ECMAScript 5
Formdata
HTML5 Application Cache
HTML5 Async Scripts
HTML5 BlobBuilder
HTML5 Canvas
HTML5 Drag And Drop
HTML5 Forms And
Validation
HTML5 Geolocation
HTML5 History API
HTML5 Parser
HTML5 Sandbox
HTML5 Selection
HTML5 Semantic
Elements
HTML5 Video And Audio
JavaScript Typed Array
ICC Color Profiles
IndexedDB
Page Visibility
Pointer (Mouse, Pen, And
Touch) Events*
RequestAnimationFrame
Navigation Timing
Selectors API Level 2
SVG Filter Effects
SVG, Standalone And In
HTML
Web Messaging
Web Sockets
Web Workers
XHTML/XML
XHR (Level 2)
XHR CORS

23. • Tranformaciones 2D
& 3D
• Transiciones
• Animaciones
• Sombras
• Gradientes
• Fuentes
Efectos CSS3

24. DEMO
Agregar live title en la APP IE10 y Windows
Phone

25. • Abstracción con el modelo de MSPointer
• Sigue el patron familiar de los eventos DOM del mouse
• Soporta múltiples puntos de contacto
• Requiere solo algunos cambios para los sitios ya existentes que
utilicen touch
Creado para Touch y gestos

26. Eventos de Gestos
• Facilidad para capturar gestos sobre uno o varios elementos del
DOM
• Reconoce la inercia en los pan y los pinch!
• Entrega a los desarroladores de Windows Phone 8 un “lenguaje
touch”
• Permite multiples gestos que pueden ser reconocidos
concurrentemente

27. DEMO
Agregar soporte de touch a la app.

28. • Multiples columnas
• Posicionamiento
Flotante
• Regiones
• Grids
• Flexbox
Soporte CSS3 para el contenido

29. DEMO
Uso de HTML5 Flex-box

31. • Define el tamaño inicial del layout en
pixels
• Tomar en consideración para la vista
SNAP
<META name=“viewport”/>
@-ms-viewport
Dimensionando el viewport

32. • Elementos posicionados fijos se colocan
en relación a la viewport
position:fixed
Una palabra sobre los elementos
posicionados fijos

33. DEMO
Posicionamiento Fijo

34. • App cache
• IndexedDB
• History
• WebWorkers
• WebSockets
Otras características HTML5 de gran
ayuda

35. • Todo lo que necesitamos es
HTML5 ….
En un mundo perfecto

36. Cuando necesitamos más, XAML al
rescate!
• Usar InvokeScript para llamadas a funciones Javascript desde el host (C#)
• webBrowser.InvokeScript(“myFunction", “myArg1”);
• webBrowser.InvokeScript(“eval”, “document.body.offsetHeight.toString()”);
• webBrowser.InvokeScript(“execScript”, myScript.ToString());
• Use ScriptNotify to call host (C#) from JavaScript async
• Usar ScriptNotify para llamar al host (C#) desde JavaScript Asincronamente
• XAML: <WebBrowser ScriptNotify=“Browser_ScriptNotify” />
• JavaScript: window.external.notify(parameter);
• C#: private void Browser_ScriptNotify(object sender, NotifyEventArgs e)
// use e.value to retrieve parameter

37. Pero hay más
• Setear default background color
• webBrowser.Background=“#ffff00”;
• Navegación backward/forward
• if (webBrowser.CanNavigateBack) webBrowser.GoBack();
• if (webBrowser.CanNavigateForward) webBrowser.GoForward();
• Limpiar el cache y las cookies
• await webBrowser.ClearCookiesAsync();
• await webBrowser.ClearInternetCacheAsync();
• Cargar archivos directamente del XAP
• webBrowser.Navigate(new Uri("test.html", UriKind.Relative))

38. Y si, es bastante rapido… 
0
500
1000
1500
2000
2500
3000
3500
4000
IE10 (WP8) HTML5 APP (WP8) IPHONE 5 SAFARI IPHONE 5 HTML5 APP
SUNSPIDER 0.9.1 SCORE
LOWER IS BETTER

39. Diferencias entre IE10 W8 y IE10 WP8
Aparte de la P
• Video en línea
• Audio HTML5 multi-task
• ActiveX y VBScript <-!
• Api de Drag & Drop
• File Upload via <input type=“file”> y algunas api de acceso a archivos.
• Comunicación Cross-tab via script
• Navigator.msLaunchUri
• Características de integración de Windows 8
• IE10 para WP8, window.open no devuelve un ojeto de ventana válida, ya
que se aisla cada ventana en su propio sandbox

40. Y herramientas de Testing???

41. Compat Inspector
Compat Inspector es una herramienta
JavaScript que realiza una batería de
test contra el sitio web y nos presenta
un informe sobre la compatibilidad del
sitio con Internet Explorer 10
Posibilidad de Verificar y Debugear los
problemas detectados

42. IE Developer Toolbar

43. Modern.ie
modern.IE es un centro de desarrollo con herramientas y recursos gratuitos creado para que
puedas emplear menos tiempo en la realización de tests con las distintas versiones de Internet
Explorer y más tiempo creando lo que de verdad te interesa de la Web actual.
http://www.browserstack.com/
Browser reales, no Fakes 
Posibilidad de testear
localmente
Rápido, acceso y procesamiento
basado en la nube
Emuladores móviles oficiales
Herramientas de desarrollo
preinstaladas
Multiples sistemas operativo

45. DEMO
Compat Inspector
Modern.ie

46. PREGUNTAS
?
@chalalo
www.chalalo.cl
MVP ASP.NET/IIS