Potencia Tu Sitio Web De La Mano De Internet Explorer 8

Post on 10-Jun-2015

1.176 views 2 download

Transcript of Potencia Tu Sitio Web De La Mano De Internet Explorer 8

Potencia tu sitio web de la mano de Internet Explorer 8Gonzalo PérezMVP ASP.NETchalalo@hotmail.comwww.chalalo.cl

Martín CabreraGerente de Arquitectura y DesarrolloMicrosoft Chilemcabrera@microsoft.comhttp://blogs.msdn.com/mcabrera

Andrés IturraldeSenior Consultantaiturralde@ultragestion.clwww.ikom.cl

Agenda

Conociendo Internet Explorer 8CompatibilidadWeb AcceleratorsDeveloper ToolbarSearch ProvidersWeb SlicesCómo prevenir fraudes más frecuentes

Conociendo Internet Explorer 8

DEMO

Compatibilidad

IE8 está basado en estándares

HTML

ACID 2

CSS 2.1

CSS 2.1 complianceDOM ImprovementsHTML ImprovementsAcid2 Test compliance

This meansData URI SupportImproved Namespace SupportAnd more

Page Built To Standards

¿Qué hacen los desarrolladores hoy?

Page Built For IE7

7

Page Built For IE6

6

1. Identify browser

2. Serve right page

I’m IE6 I’m Firefox I’m IE7I’m Safari

Page Built To Standards

Un solo site, cualquier navegador

1. Identify browser

2. Serve right page

I’m FirefoxI’m Safari

8I’m IE8

Soporte de Compatibilidad

1. Code to IE8 Standards

4. Rely on the Compatibility

List2. Implement

the X-UA-Compatible Tag

5. Rely on User Pressing Compat

Button

Estándares

3. Display Intranet Sites in Compatibility

Mode or rely on group policy settings

Compatibilidad

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<openServiceDescription xmlns="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> <activity category="Others"> <activityAction context="selection"> <preview action= "http://localhost/MyWebAccelerator/Preview.aspx"> <parameter name="TextoSeleccionado" value="{selection}"/> <parameter name="clean" value="true"/> <parameter name="w" value="320"/> <parameter name="h" value="240"/> </preview> <execute action="http://localhost/MyWebAccelerator/Preview.aspx"> <parameter name="TextoSeleccionado" value="{selection}" type="text" /> </execute> </activityAction> </activity></openServiceDescription>

Crear pá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) { string textoSeleccionado = Request["TextoSeleccionado"]; MostrarTextoTextBox.Text = textoSeleccionado;}

Crear página ejecución

Idem página preview

Crear página de instalación

// El accelerator ya esta instalado?window.external.IsServiceInstalled

(http://localhost/myaccelerator.xml);

// Instalar acceleratorwindow.external.AddService

(http://localhost/myaccelerator.xml);

Web Accelerator

DEMO

IE8 Developer Toolbar

IE8 Developer Toolbar

Search Providers

Search Providers

Tu motor de búsqueda favorito pero con sugerencias!

Search Providers

DEMO

Open Search Descriptor

<?xml version="1.0" encoding="UTF-8"?><OpenSearchDescription xmlns="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 Search Provider//Verifica si el cliente es MSIE 8.0//para más información: http://msdn2.microsoft.com/en-us/library/ms537509.aspx

//Verifica si el servicio ya está instaladowindow.external.IsSearchProviderInstalled(‘http://example.com/

SearchProvider.xml’);

//Si es algo, muestra el botón para agregar el proveedorwindow.external.AddSearchProvider(‘http://example.com/SearchProvider.xml’) ;

Search Providers

DEMO

Recursos

Crea tu propio Search Provider (Asistente)http://www.ieaddons.com/es/createsearch.aspx

Crea tu propio Search Provider (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

Web Slices

DEMO

Web Slices Básico

Alternate Update Source

Alternate Display Source

Ejemplo básico<div class=”hslice” id=”1” >

<p class=”entry-title”>Amazon Kindle, Unopened</p><div class=”entry-content”>

<img src=”pic.jpg”><p>Current bid: <b>US $282.11</b></p>

</div></div>

Parametros del Web Slice

HsliceEntry-title – El título del ítemEntry-content – El contenido del ítemTtl – Valor time-to-liveFeedurl – Path alternativo donde conseguir las actualizacionesEndtime – La fecha en el cual el ítem ya no es relevante

Manejo de la redEl motor de descarga de fuentes busca actualizaciones una vez al día por default (15 min. Max.)

Configurando el valor time-to-value <div>Actualizar cada<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 RSSLa data es cacheada en la maquina del usuarioExpone 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 SSLUsuarios guardan credenciales para descargas en backgroundEn caso de error, los usuarios pueden presionar en la página para resolverlo

NTLM (Escenarios corporativos)

Web Slices

DEMO

Resúmen WebSlices

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 actualizacionesAtrae usuarios mediante la vista previa

Cómo prevenir fraudes más frecuentes

Fraudes más comunesConexiones 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 desconocidaCertificado emitido para otro sitioCertificado 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 evitarloNo 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-site scripting

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/iehttp://www.microsoft.com/windows/internet-explorer/features/safer.aspx

Potencia tu sitio web de la mano de Internet Explorer 8Gonzalo PérezMVP ASP.NETchalalo@hotmail.comwww.chalalo.cl

Martín CabreraGerente de Arquitectura y DesarrolloMicrosoft Chilemcabrera@microsoft.comhttp://blogs.msdn.com/mcabrera

Andrés IturraldeSenior Consultantaiturralde@ultragestion.clwww.ikom.cl