Potencia tu sitio web de la mano de Internet Explorer 8<br />Gonzalo Pérez<br />MVP ASP.NET<br />chalalo@hotmail.com<br />...
Agenda<br />Conociendo Internet Explorer 8<br />Compatibilidad<br />Web Accelerators<br />DeveloperToolbar<br />SearchProv...
Conociendo Internet Explorer 8<br />DEMO<br />
Compatibilidad<br />
IE8 estábasado en estándares<br />CSS 2.1 compliance<br />DOM Improvements<br />HTML Improvements<br />Acid2 Test complian...
¿Quéhacen los desarrolladores hoy?<br />1. Identify browser<br />2. Serve right page<br />Page Built For IE7<br />Page Bui...
Un solo site, cualquiernavegador<br />1. Identify browser<br />2. Serve right page<br />Page Built To Standards<br />I’m S...
Soporte de Compatibilidad<br />Compatibilidad<br />Estándares<br />4. Rely on the Compatibility List<br />2. Implement the...
Compatibilidad con IE7 y anteriores<br />Se puede implementar a distintos niveles<br />Por site<br />Por página<br />Botón...
Compatibilidad por site<br /><system.webServer><br />  <httpProtocol> <br />	<customHeaders> <clear /><br />		 <add name="...
Compatibilidad por página<br /><html><br /><head><br /><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /><br />...
Botón de compatibilidad<br />
Web Accelerators<br />
Web Accelerators<br />Simplifican y potencian el acceso a los sitios web<br />Sensible al texto seleccionado<br />
¿Cómo se implementa un Web Accelerator?<br />Creamos un descriptor (archivo xml)<br />Creamos la página de preview<br />Cr...
Crear descriptor<br /><openServiceDescriptionxmlns="http://www.microsoft.com/schemas/openservicedescription/1.0"><br />  <...
Crearpágina preview 1/2<br /><html><br /><body><br />    <form id="form1" runat="server"><br />    <div><br />        <asp...
Crear página preview 2/2<br />protected void Page_Load(object sender, EventArgs e)<br />{<br />stringtextoSeleccionado =<b...
Crear página ejecución<br />Idem página preview<br />
Crearpágina de instalación<br />// El accelerator yaestainstalado?<br />window.external.IsServiceInstalled<br />	(http://l...
Web Accelerator<br />DEMO<br />
IE8 DeveloperToolbar<br />
IE8 DeveloperToolbar<br />
SearchProviders<br />
SearchProviders<br />Tu motor de búsqueda favorito pero con sugerencias!<br />
DEMO<br />SearchProviders<br />
Open Search Descriptor<br /><?xml version="1.0" encoding="UTF-8"?><br /><OpenSearchDescriptionxmlns="http://a9.com/-/spec/...
Agregando tu SearchProvider<br />//Verificasi el clientees MSIE 8.0<br />//paramásinformación: http://msdn2.microsoft.com/...
DEMO<br />SearchProviders<br />
Recursos<br />Crea tu propio SearchProvider (Asistente)<br />http://www.ieaddons.com/es/createsearch.aspx<br />Crea tu pro...
Web Slices<br />
WebSlices<br />Permiten adherir actualizaciones en un sector de una página<br />
DEMO<br />Web Slices<br />
Web Slices Básico<br />
AlternateUpdateSource<br />
AlternateDisplaySource<br />
Ejemplo básico<br /><div class=”hslice” id=”1” ><br />	<p class=”entry-title”>Amazon Kindle, Unopened</p><br />	<div class...
Parametros del Web Slice<br />Hslice<br />Entry-title– El título del ítem<br />Entry-content– El contenido del ítem<br />T...
Manejo de la red	<br />El motor de descarga de fuentes busca actualizaciones una vez al día por default (15 min. Max.)<br ...
Privacidad y autenticación	<br />Las fuentes permiten obtener la data de la web para usuarios y aplicaciones<br />Web slic...
DEMO<br />Web Slices<br />
ResúmenWebSlices<br />Son una forma liviana para que los usuarios puedan mantenerse en contacto con la información de tu s...
Cómo prevenir fraudes más frecuentes<br />
Fraudes más comunes<br />Conexiones inseguras<br />Descarga de archivos maliciosos (malware)<br />Dominio falso<br />Phish...
Conexiones inseguras<br />Se produce cuando intercambiamos datos sensibles contra sitios no seguros<br />
Conexiones inseguras – cómo evitarlo<br />Verificar que exista siempre una conexión segura (https://...)<br />No proceder ...
Conexiones inseguras<br />DEMO<br />
Descarga de archivos maliciosos (malware)<br />Software desarrollado para robar información confidencial o dañar el sistem...
Descarga de archivos maliciosos (malware) -  cómo evitarlo<br />No descargar archivos de sitios no conocidos<br />Tener si...
Malware<br />DEMO<br />
Dominio falso<br />Nos llega un mail de una dirección aparentemente correcta con un link para actualizar información<br />...
Dominio falso -  cómo evitarlo<br />Prestar mucha atención a la url del sitio al cual nos conecta el link<br />Tener siemp...
Dominio falso<br />DEMO<br />
Phishing<br />Similar al anterior<br />Se intenta adquirir información confidencial de manera fraudulenta<br />
Phishing – cómo evitarlo<br />No confiar en correos que nos invitan a actualizar nuestros datos<br />Tener siempre activa ...
Phishing<br />DEMO<br />
Clickjacking<br />Se produce cuando un sitio malicioso se oculta detrás de un sitio legitimo<br />Por lo general se implem...
Clickjacking – cómo evitarlo<br />Nunca acceda a su sito de confianza desde links publicados en sitios desconocidos<br />D...
Clickjacking<br />DEMO<br />
Cross-sitescripting<br />Es el más sofisticado de todos<br />Se produce sobre el sitio real (legítimo)<br />La trampa se b...
Cross-site scripting – cómo evitarlo<br />Evitar el acceso a sitios sensibles a través de links no confiables<br />Program...
Cross-site scripting<br />DEMO<br />
El navegador es nuestro aliado<br />Cuanto más nos ayude mejor<br />Fuente: Informe Web Browser Security desarrollado por ...
Todos somos protagonistas<br />Los invitamos a difundir esta iniciativa y a colaborar compartiendo experiencias de fraude<...
Potencia tu sitio web de la mano de Internet Explorer 8<br />Gonzalo Pérez<br />MVP ASP.NET<br />chalalo@hotmail.com<br />...
Upcoming SlideShare
Loading in...5
×

Potencia Tu Sitio Web De La Mano De Internet Explorer 8

1,175

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
1,175
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • The goal with IE8 is to ensure greater browser fidelity - write once and render
  • Internet Explorer 8 improves rendering behavior for content authored to various web standards using the default Internet Explorer 8 standards mode. In order to maintain backwards compatibility, sites can easily opt to use Internet Explorer 7-like handling of content by inserting a special meta element into the web page, which will trigger the &quot;IE7 standards mode“.While the behavior of the browser is unchanged from Internet Explorer 7 in &quot;IE7 Standards Mode&quot;, the new standards based rendering and layout engine in Internet Explorer 8 (the default Internet Explorer 8 rendering mode) supports Data: URIs, the abbr tag, CSS generated content, the display: table CSS properties, in addition to fixing CSS and HTML parsing bugs. By default Internet Explorer 8 uses the new Standard Mode layout engine to display pages adhering to standards including HTML, CSS 2.1, DOM L2. In addition, Internet Explorer 8 renders the Acid2 test correctly – by default. This results in Internet Explorer 8 supporting and displaying more web pages correctly. This also results in a greater developer experience – increased interoperability for web pages viewed on all browsers, resulting in a “write once, run anywhere” scenario. Additionally, sites written specifically for Internet Explorer 7, can elect to use the Internet Explorer 7 emulation mode to show pages without making any layout changes and still enjoy a smooth browsing experience.By including both the Internet Explorer 7 and Internet Explorer 8 layout engines, Internet Explorer 8 provides a highly compatible browser while not breaking sites specifically written to take advantage of Internet Explorer 7 layout engine. In addition to making the web developers life much easier in dealing with a new browser release, this alleviates user frustration and leads to a better overall browsing experience.Code SnippetsIn past versions of Internet Explorer, developers and designers have found inconsistencies between Internet Explorer and defined standards with respect to the way the browser handles HTML, CSS, scripting, etc. In some cases, these inconsistencies arise because Internet Explorer supports standards prior to their finalization. If those standards change when they are ratified, the implementation Internet Explorer uses can be different from the standards. The Internet Explorer team has traditionally decided to support the legacy Internet Explorer model, so that sites developed to it would continue to behave as expected in newer versions of Internet Explorer. Moving forward, the decision to support legacy behaviors versus strict standards will be put in the hands of Web developers because they can select the rendering mode – all the way down to a page-by-page basis.Windows Internet Explorer 8 Beta 2 ships with multiple rendering modes which the developer can select by using the X-UA-Compatible header.This value may be set server-wide as an HTTP response header or at the document level by adding it directly after to the head tag, such as:&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=8&quot; &gt; By default, Windows Internet Explorer 8 uses the Internet Explorer 8 Standards mode. Developers who want to continue to have their sites render in Internet Explorer 7’s Standards mode should add this immediately after HEAD tag : &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=“IE=EmulateIE7&quot;&gt; Note that the setting in the document always overrides the HTTP header.Interoperability with other browsersNone of the improvements or new features in Internet Explorer 8 will matter if websites look bad or work poorly. Since Internet Explorer 8 adheres to web standards by default, there is greater interoperability with all browsers as well as full compatibility with the existing Internet Explorer 7 web sites by including the Internet Explorer 7 layout engine in addition to the new engine. This means that developers can focus on innovation rather than creating special cases to achieve browser compatibility.One browser for developersAdditionally, by including both layout engines as well as default standard compliance, developers only need Internet Explorer 8 to create, update, test, and deploy new and existing websites. This leads to higher productivity and more efficient development cycles. This also reduces corporate resource requirements because additional physical or virtual machines become less necessary.
  • Potencia Tu Sitio Web De La Mano De Internet Explorer 8

    1. 1. Potencia tu sitio web de la mano de Internet Explorer 8<br />Gonzalo Pérez<br />MVP ASP.NET<br />chalalo@hotmail.com<br />www.chalalo.cl<br />Andrés Iturralde<br />SeniorConsultant<br />aiturralde@ultragestion.cl<br />www.ikom.cl<br />Martín Cabrera<br />Gerente de Arquitectura y Desarrollo<br />Microsoft Chile<br />mcabrera@microsoft.com<br />http://blogs.msdn.com/mcabrera<br />
    2. 2. Agenda<br />Conociendo Internet Explorer 8<br />Compatibilidad<br />Web Accelerators<br />DeveloperToolbar<br />SearchProviders<br />Web Slices<br />Cómo prevenir fraudes más frecuentes<br />
    3. 3. Conociendo Internet Explorer 8<br />DEMO<br />
    4. 4. Compatibilidad<br />
    5. 5. IE8 estábasado en estándares<br />CSS 2.1 compliance<br />DOM Improvements<br />HTML Improvements<br />Acid2 Test compliance<br />This means<br />Data URI Support<br />Improved Namespace Support<br />And more<br />CSS 2.1<br />HTML<br />ACID 2<br />
    6. 6. ¿Quéhacen los desarrolladores hoy?<br />1. Identify browser<br />2. Serve right page<br />Page Built For IE7<br />Page Built To Standards<br />Page Built For IE6<br />I’m Safari<br />I’m Firefox<br />I’m IE6<br />I’m IE7<br />7<br />6<br />
    7. 7. Un solo site, cualquiernavegador<br />1. Identify browser<br />2. Serve right page<br />Page Built To Standards<br />I’m Safari<br />I’m Firefox<br />I’m IE8<br />8<br />
    8. 8. Soporte de Compatibilidad<br />Compatibilidad<br />Estándares<br />4. Rely on the Compatibility List<br />2. Implement the X-UA-Compatible Tag<br />1. Code to IE8 Standards<br />3. Display Intranet Sites in Compatibility Mode or rely on group policy settings<br />5. Rely on User Pressing Compat Button<br />
    9. 9. Compatibilidad con IE7 y anteriores<br />Se puede implementar a distintos niveles<br />Por site<br />Por página<br />Botón de compatibilidad<br />
    10. 10. Compatibilidad por site<br /><system.webServer><br /> <httpProtocol> <br /> <customHeaders> <clear /><br /> <add name="X-UA-Compatible" value="IE=EmulateIE7" /> <br /> </customHeaders><br /> </httpProtocol> <br /></system.webServer><br />
    11. 11. Compatibilidad por página<br /><html><br /><head><br /><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /><br /></head><br /></html><br />
    12. 12. Botón de compatibilidad<br />
    13. 13. Web Accelerators<br />
    14. 14. Web Accelerators<br />Simplifican y potencian el acceso a los sitios web<br />Sensible al texto seleccionado<br />
    15. 15. ¿Cómo se implementa un Web Accelerator?<br />Creamos un descriptor (archivo xml)<br />Creamos la página de preview<br />Creamos la página de ejecución (click)<br />Creamos una página de instalación<br />
    16. 16. Crear descriptor<br /><openServiceDescriptionxmlns="http://www.microsoft.com/schemas/openservicedescription/1.0"><br /> <homepageUrl>http://localhost/MyWebAccelerator</homepageUrl><br /> <display><br /> <name>Mi Demo Web Accelerator</name><br /> <icon>http://localhost/MyWebAccelerator/myaccelerator.ico</icon><br /> </display><br /> <activitycategory="Others"><br /> <activityActioncontext="selection"><br /> <previewaction= "http://localhost/MyWebAccelerator/Preview.aspx"><br /> <parametername="TextoSeleccionado" value="{selection}"/><br /> <parametername="clean" value="true"/><br /> <parametername="w" value="320"/><br /> <parametername="h" value="240"/><br /> </preview><br /> <executeaction="http://localhost/MyWebAccelerator/Preview.aspx"><br /> <parametername="TextoSeleccionado" value="{selection}" type="text" /><br /> </execute><br /> </activityAction><br /> </activity><br /></openServiceDescription><br />
    17. 17. Crearpágina preview 1/2<br /><html><br /><body><br /> <form id="form1" runat="server"><br /> <div><br /> <asp:TextBox ID="MostrarTextoTextBox" runat="server" Height="245px" Rows="5" <br />Width="550px"></asp:TextBox> <br /> </div><br /> </form><br /></body><br /></html><br />
    18. 18. Crear página preview 2/2<br />protected void Page_Load(object sender, EventArgs e)<br />{<br />stringtextoSeleccionado =<br />Request["TextoSeleccionado"];<br />MostrarTextoTextBox.Text = textoSeleccionado;<br />}<br />
    19. 19. Crear página ejecución<br />Idem página preview<br />
    20. 20. Crearpágina de instalación<br />// El accelerator yaestainstalado?<br />window.external.IsServiceInstalled<br /> (http://localhost/myaccelerator.xml);<br />// Instalar accelerator<br />window.external.AddService<br /> (http://localhost/myaccelerator.xml);<br />
    21. 21. Web Accelerator<br />DEMO<br />
    22. 22. IE8 DeveloperToolbar<br />
    23. 23. IE8 DeveloperToolbar<br />
    24. 24. SearchProviders<br />
    25. 25. SearchProviders<br />Tu motor de búsqueda favorito pero con sugerencias!<br />
    26. 26. DEMO<br />SearchProviders<br />
    27. 27. Open Search Descriptor<br /><?xml version="1.0" encoding="UTF-8"?><br /><OpenSearchDescriptionxmlns="http://a9.com/-/spec/opensearch/1.1/"><br /> <ShortName>My Custom Search</ShortName><br /> <Url type="text/html”<br /> template="http://example.com/?q={searchTerms}&amp;source=IE"/> <br /> <Image height="16" width="16“ type="image/icon"><br />http://example.com/mycustom.ico<br /> </Image><br /> <Url type="application/x-suggestions+json”<br /> template="http://suggestions.example.com/?q={searchTerms}"/><br /> <Url type="application/x-suggestions+xml”<br /> template="http://suggestions.example.com/?q={searchTerms}"/><br /> <ie:PreviewUrl type="text/html”<br /> template="http://example.com/search?q={searchTerms}&ei=utf-8"/><br /></OpenSearchDescription><br />
    28. 28. Agregando tu SearchProvider<br />//Verificasi el clientees MSIE 8.0<br />//paramásinformación: http://msdn2.microsoft.com/en-us/library/ms537509.aspx <br />//Verificasi el servicioyaestáinstalado<br />window.external.IsSearchProviderInstalled(‘http://example.com/SearchProvider.xml’);<br />//Si esalgo, muestra el botónparaagregar el proveedor<br />window.external.AddSearchProvider(‘http://example.com/SearchProvider.xml’) ;<br />
    29. 29. DEMO<br />SearchProviders<br />
    30. 30. Recursos<br />Crea tu propio SearchProvider (Asistente)<br />http://www.ieaddons.com/es/createsearch.aspx<br />Crea tu propio SearchProvider (Manual)<br />http://msdn.microsoft.com/en-us/library/cc848862(VS.85).aspx<br />Más info. sobre archivos OpenSearch Descriptor<br />http://www.opensearch.org<br />
    31. 31. Web Slices<br />
    32. 32. WebSlices<br />Permiten adherir actualizaciones en un sector de una página<br />
    33. 33. DEMO<br />Web Slices<br />
    34. 34. Web Slices Básico<br />
    35. 35. AlternateUpdateSource<br />
    36. 36. AlternateDisplaySource<br />
    37. 37. Ejemplo básico<br /><div class=”hslice” id=”1” ><br /> <p class=”entry-title”>Amazon Kindle, Unopened</p><br /> <div class=”entry-content”><br /> <imgsrc=”pic.jpg”><br /> <p>Current bid: <b>US $282.11</b></p><br /> </div><br /></div><br />
    38. 38. Parametros del Web Slice<br />Hslice<br />Entry-title– El título del ítem<br />Entry-content– El contenido del ítem<br />Ttl – Valor time-to-live<br />Feedurl– Path alternativo donde conseguir las actualizaciones<br />Endtime– La fecha en el cual el ítem ya no es relevante<br />
    39. 39. Manejo de la red <br />El motor de descarga de fuentes busca actualizaciones una vez al día por default (15 min. Max.)<br />Configurando el valor time-to-value<br /> <div>Actualizarcada<span class=”ttl”>60</span>mins</div><br />Poniendo a disponibilidad una fuente alternativa de actualización<br /> <a rel=”feedurl” href=”www.foo.com/feed.xml”>Suscribir</a><br />
    40. 40. Privacidad y autenticación <br />Las fuentes permiten obtener la data de la web para usuarios y aplicaciones<br />Web slices son lo mismo que las fuentes RSS<br />La data es cacheada en la maquina del usuario<br />Expone data privada mediante autenticación<br />Soporte de autenticación de la plataforma:<br />Autenticación basada en cookie persistente<br />En cookies expiradas, presiona sobre la pagina para re autenticar<br />Autenticación basada en HTTP (Basic & Digest)<br />Autenticación básica vía SSL<br />Usuarios guardan credenciales para descargas en background<br />En caso de error, los usuarios pueden presionar en la página para resolverlo<br />NTLM (Escenarios corporativos)<br />
    41. 41. DEMO<br />Web Slices<br />
    42. 42. ResúmenWebSlices<br />Son una forma liviana para que los usuarios puedan mantenerse en contacto con la información de tu sitio<br />Empieza hoy:<br />No necesita código en el cliente!<br />Notificación a los usuarios de actualizaciones<br />Atrae usuarios mediante la vista previa<br />
    43. 43. Cómo prevenir fraudes más frecuentes<br />
    44. 44. Fraudes más comunes<br />Conexiones inseguras<br />Descarga de archivos maliciosos (malware)<br />Dominio falso<br />Phishing<br />Clickjacking<br />Cross-site scripting<br />
    45. 45. Conexiones inseguras<br />Se produce cuando intercambiamos datos sensibles contra sitios no seguros<br />
    46. 46. Conexiones inseguras – cómo evitarlo<br />Verificar que exista siempre una conexión segura (https://...)<br />No proceder si el certificado del sitio reporta errores<br />Certificado emitido por entidad desconocida<br />Certificado emitido para otro sitio<br />Certificado vencido<br />
    47. 47. Conexiones inseguras<br />DEMO<br />
    48. 48. Descarga de archivos maliciosos (malware)<br />Software desarrollado para robar información confidencial o dañar el sistema<br />Se enmascaran detrás de software aparentemente inofensivo<br />
    49. 49. Descarga de archivos maliciosos (malware) - cómo evitarlo<br />No descargar archivos de sitios no conocidos<br />Tener siempre activa la protección del navegador<br />
    50. 50. Malware<br />DEMO<br />
    51. 51. Dominio falso<br />Nos llega un mail de una dirección aparentemente correcta con un link para actualizar información<br />El link nos lleva a un sitio cuyo dominio no coincide con el de la empresa<br />
    52. 52. Dominio falso - cómo evitarlo<br />Prestar mucha atención a la url del sitio al cual nos conecta el link<br />Tener siempre activas las alertas de los navegadores<br />Reportar sitios no confiables<br />
    53. 53. Dominio falso<br />DEMO<br />
    54. 54. Phishing<br />Similar al anterior<br />Se intenta adquirir información confidencial de manera fraudulenta<br />
    55. 55. Phishing – cómo evitarlo<br />No confiar en correos que nos invitan a actualizar nuestros datos<br />Tener siempre activa la protección del browser<br />Reportar siempre los nuevos sitios fraudulentos<br />
    56. 56. Phishing<br />DEMO<br />
    57. 57. Clickjacking<br />Se produce cuando un sitio malicioso se oculta detrás de un sitio legitimo<br />Por lo general se implementa utilizando iframes<br />
    58. 58. Clickjacking – cómo evitarlo<br />Nunca acceda a su sito de confianza desde links publicados en sitios desconocidos<br />Dichos links lo pueden conducir fácilmente al sitio malicioso que muestra solo el sitio legítimo<br />Tener siempre activas las alertas del navegador<br />
    59. 59. Clickjacking<br />DEMO<br />
    60. 60. Cross-sitescripting<br />Es el más sofisticado de todos<br />Se produce sobre el sitio real (legítimo)<br />La trampa se basa en inyectar código script a través de links que aprovechan defectos de programación de las aplicaciones web<br />
    61. 61. Cross-site scripting – cómo evitarlo<br />Evitar el acceso a sitios sensibles a través de links no confiables<br />Programar las aplicaciones controlando el input de los usuarios.<br />
    62. 62. Cross-site scripting<br />DEMO<br />
    63. 63. El navegador es nuestro aliado<br />Cuanto más nos ayude mejor<br />Fuente: Informe Web Browser Security desarrollado por NSS Labs<br />
    64. 64. Todos somos protagonistas<br />Los invitamos a difundir esta iniciativa y a colaborar compartiendo experiencias de fraude<br />Más info en:<br />http://www.microsoft.com/security/<br />http://microsoft.com/ie<br />http://www.microsoft.com/windows/internet-explorer/features/safer.aspx<br />
    65. 65. Potencia tu sitio web de la mano de Internet Explorer 8<br />Gonzalo Pérez<br />MVP ASP.NET<br />chalalo@hotmail.com<br />www.chalalo.cl<br />Andrés Iturralde<br />SeniorConsultant<br />aiturralde@ultragestion.cl<br />www.ikom.cl<br />Martín Cabrera<br />Gerente de Arquitectura y Desarrollo<br />Microsoft Chile<br />mcabrera@microsoft.com<br />http://blogs.msdn.com/mcabrera<br />
    1. A particular slide catching your eye?

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

    ×