Your SlideShare is downloading. ×
Potencia Tu Sitio Web De La Mano De Internet Explorer 8
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Potencia Tu Sitio Web De La Mano De Internet Explorer 8

1,148
views

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,148
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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 "IE7 standards mode“.While the behavior of the browser is unchanged from Internet Explorer 7 in "IE7 Standards Mode", 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:<meta http-equiv="X-UA-Compatible" content="IE=8" > 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 : <meta http-equiv="X-UA-Compatible" content=“IE=EmulateIE7"> 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.
  • Transcript

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