@chalalowww.chalalo.clMVP ASP.NET/IIS

Características de Internet Explorer 10

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

ODIO IE!!!

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

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

Internet Explorer 10 es perfecto para touch.

531 2 Touch

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:

Internet Explorer 10 es perfecto para touch.

La barra de navegación agrupa controles fáciles de usar para las acciones comunes como Atrás, Adelante, Actualizar, colocación de clavos sitios a la pantalla de Inicio y, a obtener una aplicación.

Refrescar adelante

Anclar sitio

Herramientas

Atrás Auto-complete touch keyboard

Internet Explorer 10 es perfecto para touch.

Puntos relevantes

1 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.

2 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.

3Internet 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.

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

Nuevas Características de IE10

• 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

DEMOPrometeus

Ejemplos de uso de características de HTML5

Por que construir aplicaciones basadas en HTML5???

Internet Explorer 10 & WP8

Por que los desarrolladores cool lo estan haciendo!!

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.

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

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

Qué es una app HTML5 en WP8?

•Creando nuestra primera app HTML5 en Windows Phone

Drag picture to placeholder or click icon to add

Todas las grandes cosas empiezan desde el principio

DEMO

•Acelerado por Hardware

•Optimizado para Touch

•Rápido para las aplicaciones

•Preparado para las aplicaciones offline!

Internet Explorer 10

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

• Tranformaciones 2D & 3D

• Transiciones• Animaciones• Sombras• Gradientes• Fuentes

Efectos CSS3

DEMOAgregar live title en la APP IE10 y Windows

Phone

• 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

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

DEMO

Agregar soporte de touch a la app.

• Multiples columnas

• Posicionamiento Flotante

• Regiones

• Grids

• Flexbox

Soporte CSS3 para el contenido

DEMO

Uso de HTML5 Flex-box

Layout Viewport WidthLa

yout

Vie

wpo

rt H

eigh

t

Visual Viewport

•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

• Elementos posicionados fijos se colocan en relación a la viewport

position:fixed

Una palabra sobre los elementos posicionados fijos

DEMO

Posicionamiento Fijo

•App cache• IndexedDB•History•WebWorkers•WebSockets

Otras características HTML5 de gran ayuda

•Todo lo que necesitamos es HTML5 ….

En un mundo perfecto

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

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))

Y si, es bastante rapido…

I E 1 0 ( WP 8 ) H T M L 5 A pp ( WP 8 ) i P hone 5 Sa f a r i i P hone 5 H T M L 5 A pp 0

500

1000

1500

2000

2500

3000

3500

4000

Sunspider 0.9.1 ScoreLower is bett er

Diferencias entre IE10 W8 y IE10 WP8Aparte 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

Y herramientas de Testing???

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

IE Developer Toolbar

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

DEMOCompat Inspector

Modern.ie

PREGUNTAS?

@chalalowww.chalalo.clMVP ASP.NET/IIS