Potencia Tu Sitio Web De La Mano De Internet Explorer 8
65
Potencia tu sitio web de la mano de Internet Explorer 8 Gonzalo Pérez MVP ASP.NET chalalo@hotmail. com www.chalalo.cl Martín Cabrera Gerente de Arquitectura y Desarrollo Microsoft Chile [email protected] http://blogs.msdn.com/mcabre ra Andrés Iturralde Senior Consultant aiturralde@ultragest ion.cl www.ikom.cl
-
Upload
andres-iturralde -
Category
Documents
-
view
1.171 -
download
2
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 [email protected]
Martín CabreraGerente de Arquitectura y DesarrolloMicrosoft [email protected]://blogs.msdn.com/mcabrera
Andrés IturraldeSenior [email protected]
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}&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 [email protected]
Martín CabreraGerente de Arquitectura y DesarrolloMicrosoft [email protected]://blogs.msdn.com/mcabrera
Andrés IturraldeSenior [email protected]
