0
@chalalowww.chalalo.clMVPASP.NET/IISCaracterísticas de InternetExplorer 10
Agenda• Odio IE• Preparando mis sitios para IE 10 y W8• Pinned Sites• Share Site• Prepararse para el Snap View• Vincular m...
ODIO IE!!!
El browser que amamos odiar!• http://www.browseryoulovedtohate.com/
Los tabs estan en el topde la pantalla, en unaposición familiar
La barra dedirecciones, ahora seencuentra en la parteinferior de lapantalla, aparececuando lo necesite, ydesaparece cuando...
La barra de navegaciónagrupa controles fáciles deusar para las accionescomunes comoAtrás, Adelante, Actualizar, colocación...
Internet Explorer 10, navegador totalmente nuevo de Windows 8. Rápido yfluido, la interfaz de usuario completamente redise...
Preparando mis sitios para Windows 8 eInternet Explorer 10• Pinned Sites• Share Site• Prepararse para el Snap View• Vincul...
Nuevas Características de IE10
• Pruebas de prototipos para las especificaciónesque aún estan en draft.Microsoft comparte estos prototipos con lacomunida...
DEMOPrometeusEjemplos de uso de características de HTML5
Por que construir aplicaciones basadasen HTML5???Internet Explorer 10 & WP8
Por que los desarrolladores cool lo estanhaciendo!!
No, pero realmente, con HTML5podemos•Re – usar nuestro conocimiento existente sobre HTML, CSS yJavascript•Reducir los cost...
Y el impulso no se detiene•1 Billón de dispositivos con browser modernos el 2013•2 Millones de desarrolladores web en 2013...
• Aplicacion de WindowsPhone que aprovecha elcontrol WebBrowser, sepotencia con InternetExplorer 10
•Creando nuestraprimera app HTML5en Windows PhoneTodas las grandes cosas empiezan desde elprincipio
DEMO
• Acelerado por Hardware• Optimizado para Touch• Rápido para lasaplicaciones• Preparado para lasaplicaciones offline!Inter...
IE10 Plataforma Web Acelerada porHardwareCSS 2D TransformsCSS 3D TransformsCSS AnimationsCSS Backgrounds &BordersCSS Color...
• Tranformaciones 2D& 3D• Transiciones• Animaciones• Sombras• Gradientes• FuentesEfectos CSS3
DEMOAgregar live title en la APP IE10 y WindowsPhone
• Abstracción con el modelo de MSPointer• Sigue el patron familiar de los eventos DOM del mouse• Soporta múltiples puntos ...
Eventos de Gestos• Facilidad para capturar gestos sobre uno o varios elementos delDOM• Reconoce la inercia en los pan y lo...
DEMOAgregar soporte de touch a la app.
• Multiples columnas• PosicionamientoFlotante• Regiones• Grids• FlexboxSoporte CSS3 para el contenido
DEMOUso de HTML5 Flex-box
• Define el tamaño inicial del layout enpixels• Tomar en consideración para la vistaSNAP<META name=“viewport”/>@-ms-viewpo...
• Elementos posicionados fijos se colocanen relación a la viewportposition:fixedUna palabra sobre los elementosposicionado...
DEMOPosicionamiento Fijo
• App cache• IndexedDB• History• WebWorkers• WebSocketsOtras características HTML5 de granayuda
• Todo lo que necesitamos esHTML5 ….En un mundo perfecto
Cuando necesitamos más, XAML alrescate!• Usar InvokeScript para llamadas a funciones Javascript desde el host (C#)• webBro...
Pero hay más• Setear default background color• webBrowser.Background=“#ffff00”;• Navegación backward/forward• if (webBrows...
Y si, es bastante rapido… 05001000150020002500300035004000IE10 (WP8) HTML5 APP (WP8) IPHONE 5 SAFARI IPHONE 5 HTML5 APPSU...
Diferencias entre IE10 W8 y IE10 WP8Aparte de la P• Video en línea• Audio HTML5 multi-task• ActiveX y VBScript <-!• Api de...
Y herramientas de Testing???
Compat InspectorCompat Inspector es una herramientaJavaScript que realiza una batería detest contra el sitio web y nos pre...
IE Developer Toolbar
Modern.iemodern.IE es un centro de desarrollo con herramientas y recursos gratuitos creado para quepuedas emplear menos ti...
DEMOCompat InspectorModern.ie
PREGUNTAS?@chalalowww.chalalo.clMVP ASP.NET/IIS
Charla ie
Charla ie
Charla ie
Upcoming SlideShare
Loading in...5
×

Charla ie

4,361

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
4,361
On Slideshare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Charla ie"

  1. 1. @chalalowww.chalalo.clMVPASP.NET/IISCaracterísticas de InternetExplorer 10
  2. 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. 3. ODIO IE!!!
  4. 4. El browser que amamos odiar!• http://www.browseryoulovedtohate.com/
  5. 5. Los tabs estan en el topde la pantalla, en unaposición familiar
  6. 6. La barra dedirecciones, ahora seencuentra en la parteinferior de lapantalla, aparececuando lo necesite, ydesaparece cuandono lohacen, manteniendosu enfoque en elcontenido que teinteresa.Pase desde la parte superior o inferior de la pantalla.Haga clic derecho en cualquier parte de la pantalla.Para mostrar labarra dedirecciones:
  7. 7. La barra de navegaciónagrupa controles fáciles deusar para las accionescomunes comoAtrás, Adelante, Actualizar, colocación de clavos sitios a lapantalla de Inicio y, a obteneruna aplicación.Refrescar adelanteAnclar sitioHerramientasAtrás Auto-complete touch keyboard
  8. 8. Internet Explorer 10, navegador totalmente nuevo de Windows 8. Rápido yfluido, la interfaz de usuario completamente rediseñada hace que InternetExplorer 10 sea más rápido para las actividades diarias.Internet Explorer 10 soporta Adobe Flash y los standar web modernos comoHTML5, para que pueda ver los sitios Web de la forma en que están destinados aser.Internet Explorer 10 reinventa el navegador para el tacto al hacer la interfaz deusuario más fácil para la navegación con tecnología táctil y con grandescaracterísticas como pestañas, botones de control, y flip ahead.
  9. 9. Preparando mis sitios para Windows 8 eInternet Explorer 10• Pinned Sites• Share Site• Prepararse para el Snap View• Vincular mi WebSite con la tienda
  10. 10. Nuevas Características de IE10
  11. 11. • Pruebas de prototipos para las especificaciónesque aún estan en draft.Microsoft comparte estos prototipos con lacomunidad de desarrolladores, recibiendoimportante feedbackEjemplos y librerias descargables listas paratestar.html5labs.com
  12. 12. DEMOPrometeusEjemplos de uso de características de HTML5
  13. 13. Por que construir aplicaciones basadasen HTML5???Internet Explorer 10 & WP8
  14. 14. Por que los desarrolladores cool lo estanhaciendo!!
  15. 15. No, pero realmente, con HTML5podemos•Re – usar nuestro conocimiento existente sobre HTML, CSS yJavascript•Reducir los costos de desarrollo liberando un solo productpara distintas plataformas•Podemos combinar con C# para aprovechar el acceso alresto de las posibilidades de la plataforma.
  16. 16. 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 2015IDC - http://www.idc.com/getdoc.jsp?containerId=prUS23480612
  17. 17. • Aplicacion de WindowsPhone que aprovecha elcontrol WebBrowser, sepotencia con InternetExplorer 10
  18. 18. •Creando nuestraprimera app HTML5en Windows PhoneTodas las grandes cosas empiezan desde elprincipio
  19. 19. DEMO
  20. 20. • Acelerado por Hardware• Optimizado para Touch• Rápido para lasaplicaciones• Preparado para lasaplicaciones offline!Internet Explorer 10
  21. 21. IE10 Plataforma Web Acelerada porHardwareCSS 2D TransformsCSS 3D TransformsCSS AnimationsCSS Backgrounds &BordersCSS ColorCSS Device Adaptation*CSS Flexbox*CSS FontsCSS Grid*CSS Image Values(Gradients)CSS Media QueriesCSS Multi-ColumnLayout*CSS NamespacesCSS OM ViewsCSS Regions AndExclusions*CSS SelectorsCSS TransitionsCSS Values And UnitsData URIDOM Element TraversalDOM HTMLDOM Level 3 CoreDOM Level 3 EventsDOM StyleDOM Traversal And RangeDOMParser AndXMLSerializerECMAScript 5FormdataHTML5 Application CacheHTML5 Async ScriptsHTML5 BlobBuilderHTML5 CanvasHTML5 Drag And DropHTML5 Forms AndValidationHTML5 GeolocationHTML5 History APIHTML5 ParserHTML5 SandboxHTML5 SelectionHTML5 SemanticElementsHTML5 Video And AudioJavaScript Typed ArrayICC Color ProfilesIndexedDBPage VisibilityPointer (Mouse, Pen, AndTouch) Events*RequestAnimationFrameNavigation TimingSelectors API Level 2SVG Filter EffectsSVG, Standalone And InHTMLWeb MessagingWeb SocketsWeb WorkersXHTML/XMLXHR (Level 2)XHR CORS
  22. 22. • Tranformaciones 2D& 3D• Transiciones• Animaciones• Sombras• Gradientes• FuentesEfectos CSS3
  23. 23. DEMOAgregar live title en la APP IE10 y WindowsPhone
  24. 24. • 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 queutilicen touchCreado para Touch y gestos
  25. 25. Eventos de Gestos• Facilidad para capturar gestos sobre uno o varios elementos delDOM• Reconoce la inercia en los pan y los pinch!• Entrega a los desarroladores de Windows Phone 8 un “lenguajetouch”• Permite multiples gestos que pueden ser reconocidosconcurrentemente
  26. 26. DEMOAgregar soporte de touch a la app.
  27. 27. • Multiples columnas• PosicionamientoFlotante• Regiones• Grids• FlexboxSoporte CSS3 para el contenido
  28. 28. DEMOUso de HTML5 Flex-box
  29. 29. • Define el tamaño inicial del layout enpixels• Tomar en consideración para la vistaSNAP<META name=“viewport”/>@-ms-viewportDimensionando el viewport
  30. 30. • Elementos posicionados fijos se colocanen relación a la viewportposition:fixedUna palabra sobre los elementosposicionados fijos
  31. 31. DEMOPosicionamiento Fijo
  32. 32. • App cache• IndexedDB• History• WebWorkers• WebSocketsOtras características HTML5 de granayuda
  33. 33. • Todo lo que necesitamos esHTML5 ….En un mundo perfecto
  34. 34. Cuando necesitamos más, XAML alrescate!• 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
  35. 35. 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))
  36. 36. Y si, es bastante rapido… 05001000150020002500300035004000IE10 (WP8) HTML5 APP (WP8) IPHONE 5 SAFARI IPHONE 5 HTML5 APPSUNSPIDER 0.9.1 SCORELOWER IS BETTER
  37. 37. 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, yaque se aisla cada ventana en su propio sandbox
  38. 38. Y herramientas de Testing???
  39. 39. Compat InspectorCompat Inspector es una herramientaJavaScript que realiza una batería detest contra el sitio web y nos presentaun informe sobre la compatibilidad delsitio con Internet Explorer 10Posibilidad de Verificar y Debugear losproblemas detectados
  40. 40. IE Developer Toolbar
  41. 41. Modern.iemodern.IE es un centro de desarrollo con herramientas y recursos gratuitos creado para quepuedas emplear menos tiempo en la realización de tests con las distintas versiones de InternetExplorer 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 testearlocalmenteRápido, acceso y procesamientobasado en la nubeEmuladores móviles oficialesHerramientas de desarrollopreinstaladasMultiples sistemas operativo
  42. 42. DEMOCompat InspectorModern.ie
  43. 43. PREGUNTAS?@chalalowww.chalalo.clMVP ASP.NET/IIS
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×