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

Potencia Tu Sitio Web De La Mano De Internet Explorer 8

on

  • 1,603 views

 

Statistics

Views

Total Views
1,603
Views on SlideShare
1,602
Embed Views
1

Actions

Likes
0
Downloads
3
Comments
0

1 Embed 1

http://www.slideshare.net 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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: 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 :  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 Potencia Tu Sitio Web De La Mano De Internet Explorer 8 Presentation Transcript

  • 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
  • Agenda
    Conociendo Internet Explorer 8
    Compatibilidad
    Web Accelerators
    DeveloperToolbar
    SearchProviders
    Web Slices
    Cómo prevenir fraudes más frecuentes
  • Conociendo Internet Explorer 8
    DEMO
  • Compatibilidad
  • 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
  • ¿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
  • 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
  • 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
  • Compatibilidad con IE7 y anteriores
    Se puede implementar a distintos niveles
    Por site
    Por página
    Botón de compatibilidad
  • Compatibilidad por site
    <system.webServer>
    <httpProtocol>
    <customHeaders> <clear />
    <add name="X-UA-Compatible" value="IE=EmulateIE7" />
    </customHeaders>
    </httpProtocol>
    </system.webServer>
  • Compatibilidad por página
    <html>
    <head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    </head>
    </html>
  • Botón de compatibilidad
  • Web Accelerators
  • Web Accelerators
    Simplifican y potencian el acceso a los sitios web
    Sensible al texto seleccionado
  • ¿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
  • 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>
  • 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>
  • Crear página preview 2/2
    protected void Page_Load(object sender, EventArgs e)
    {
    stringtextoSeleccionado =
    Request["TextoSeleccionado"];
    MostrarTextoTextBox.Text = textoSeleccionado;
    }
  • Crear página ejecución
    Idem página preview
  • Crearpágina de instalación
    // El accelerator yaestainstalado?
    window.external.IsServiceInstalled
    (http://localhost/myaccelerator.xml);
    // Instalar accelerator
    window.external.AddService
    (http://localhost/myaccelerator.xml);
  • Web Accelerator
    DEMO
  • IE8 DeveloperToolbar
  • IE8 DeveloperToolbar
  • SearchProviders
  • SearchProviders
    Tu motor de búsqueda favorito pero con sugerencias!
  • DEMO
    SearchProviders
  • 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>
  • 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’) ;
  • DEMO
    SearchProviders
  • 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
  • Web Slices
  • WebSlices
    Permiten adherir actualizaciones en un sector de una página
  • DEMO
    Web Slices
  • Web Slices Básico
  • AlternateUpdateSource
  • AlternateDisplaySource
  • 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>
  • 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
  • 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>
  • 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)
  • DEMO
    Web Slices
  • 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
  • Cómo prevenir fraudes más frecuentes
  • Fraudes más comunes
    Conexiones inseguras
    Descarga de archivos maliciosos (malware)
    Dominio falso
    Phishing
    Clickjacking
    Cross-site scripting
  • Conexiones inseguras
    Se produce cuando intercambiamos datos sensibles contra sitios no seguros
  • 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
  • Conexiones inseguras
    DEMO
  • 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
  • Descarga de archivos maliciosos (malware) - cómo evitarlo
    No descargar archivos de sitios no conocidos
    Tener siempre activa la protección del navegador
  • Malware
    DEMO
  • 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
  • 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
  • Dominio falso
    DEMO
  • Phishing
    Similar al anterior
    Se intenta adquirir información confidencial de manera fraudulenta
  • 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
  • Phishing
    DEMO
  • Clickjacking
    Se produce cuando un sitio malicioso se oculta detrás de un sitio legitimo
    Por lo general se implementa utilizando iframes
  • 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
  • Clickjacking
    DEMO
  • 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
  • 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.
  • Cross-site scripting
    DEMO
  • El navegador es nuestro aliado
    Cuanto más nos ayude mejor
    Fuente: Informe Web Browser Security desarrollado por NSS Labs
  • 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
  • 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