Charla ie
Transcript of Charla ie
@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