MejoresPrácticasen el Desarrollo de SitiosWeb & ASP.NET Ajax <br />&<br />Nuevas funcionalidades de ASP.NET 4<br />Gonzalo...
Agenda de Hoy<br />Optimización Web<br />Networking<br />HTML<br />CSS<br />JavasCript<br />Marshalling<br />ASP.NET AJAX<...
Optimización Web<br />«En la mayoría de las páginas web, menos del 10 - 20% del tiempo de carga de una página , correspond...
Puntos de Optimización<br />Networking<br />Networking<br />HTML<br />JavaScript<br />Marshalling<br />ASP.NET Ajax<br />C...
Optimizaciones - NetworkingComprimir el tráfico en la red<br />Response<br />Request<br />GET / HTTP/1.1<br />Accept:  */*...
Optimizaciones - NetworkingProveerContenido Cacheable<br />Primer Request<br />GET /images/banner.jpg HTTP/1.1<br />Host: ...
Response<br />Request<br />GET /images/banner.jpg HTTP/1.1<br />Host:  www.microsoft.com<br />If-Modified-Since:<br />Sun,...
Optimizaciones - NetworkingMinimizar  JavaScript ( no escompresión)<br />JavaScript Original<br />JavaScript Minimizado<br...
Optimizaciones - NetworkingNuncaredimesionarlasimágenes solo en escala.<br /><html><br /><head><br /><title>Test</title><b...
Optimizaciones - Networking Nuncaredimesionarlasimágenessolo en escala.<br /><html><br /><head><br /><title>Test</title><b...
Optimizaciones- NetworkingCombinarJavascript & CDN<br /><script src=“miScript1.js” … ></script><br /><script src=“miScript...
Optimizaciones- NetworkingCombinarJavascript & CDN<br /><script src=“miScript1.js” … ></script><br /><script src=“miScript...
13<br />Optimizaciones: NetworkingCombinarJavascript & CDN<br /><script src=“miScript.js” … ></script><br /><script src=“a...
Optimizaciones - NetworkingUsar Image Sprites<br /><html><br /><head><br /><title>Test</title><br /></head><br /><body><br...
Optimizaciones - Networking Usar Image Sprites<br />
Optimizaciones - NetworkingUsar Image Sprites<br /><head><br /><title>Test</title><br /><style type="text/css"><br />.a, ....
Internet Explorer 9 Network ToolsMedirlasmejoras de rendimiento a nivel de Networking<br />
- Mitificación de Script :Microsoft Ajax Minifier- Images Script<br />DEMO<br />Gonzalo Pérez C.<br />MVP ASP/ASP.NET<br /...
Puntos de Optimización<br />Networking<br />Networking<br />HTML<br />JavaScript<br />Marshalling<br />ASP.NET Ajax<br />C...
Optimizaciones - HTMLEvitarJavaScript  embebido<br /><html><br /><head><br /><title>Test</title><br /><script type="text/j...
Optimizaciones- HTMLEvitarreferenciar o escribir JavaScript en el Head <br /><html><br /><head><br /><title>Test</title><b...
<html><br /><head><br /><title>Test</title><br /></head><br /><body><br />…<br />…<br />…<br /></body><br /></html><br /><...
Optimizaciones - HTMLPerosi lo haces, utiliza el tag defer (Solo IE)<br /><html><br /><head><br /><title>Test</title><br /...
Puntos de Optimización<br />Networking<br />Networking<br />HTML<br />JavaScript<br />Marshalling<br />ASP.NET Ajax<br />C...
Optimizaciones - CSSEvitarEstilosEmbebidos<br /><html><br /><head><br /><title>Test</title><br /></head><br /><body><br />...
Optimizaciones- CSSEvitarreferenciar CSS al final de la página<br /><html><br /><head><br /><title>Test</title><br /></hea...
Optimizaciones - CSSReferenciar  el archivo de estilos en el head.<br /><html><br /><head><br /><title>Test</title><br /><...
Puntos de Optimización<br />Networking<br />Networking<br />HTML<br />JavaScript<br />Marshalling<br />ASP.NET Ajax<br />C...
Optimizaciones - JavascriptMinimizar la resolución de símbolos<br />varfoo<br />obj.foo<br />Costo<br />DOM<br />Global<br...
Optimizaciones - JavascriptMinimizar la Resolución de Símbolos<br />function TrabajarConVariableLocal()<br />{<br />variab...
function TrabajarConVariableLocal2()<br />{<br />varvariableLocal= 5;<br />return (variableLocal+ 1 );<br />}<br />varvari...
Optimizaciones - JavascriptMinimizar la Resolución de Símbolos: Funciones<br />function IterarSobreColeccionWork()<br />{<...
Optimizaciones - JavascriptMinimizar la Resolución de Símbolos: Funciones<br />function IterarSobreColeccionWork2()<br />{...
<html><br /><head><br /><title>Test</title><br /></head><br /><body><br />…<br />…<br />…<br /><script src=“myscript.js” …...
<html><br /><head><br /><title>Test</title><br /></head><br /><body><br />…<br />…<br /><script src=“jquery.js” … ></scrip...
Networking<br />Networking<br />HTML<br />JavaScript<br />Marshalling<br />ASP.NET Ajax<br />Puntos de Optimización<br />C...
Trident (MSHTML)<br />JScript Engine<br />Optimizaciones: MarshallingMinimizar la interacción con el DOM<br />DOM<br />
Optimizaciones: MarshallingMinimizar la interacción con el DOM<br />function CalcularSuma()<br />{<br />// ObtenerValores<...
Optimizaciones: MarshallingMinimizar la interacción con el DOM<br />function CalcularSuma2()<br />{<br />// Cachear la col...
Networking<br />Networking<br />HTML<br />JavaScript<br />Marshalling<br />ASP.NET Ajax<br />Puntos de Optimización<br />C...
Optimización – ASP.NET AJAXOptimizaciones a Nivel de ScriptManager<br /><ul><li>ScriptReferenceProfiler + CompositeScript
ScriptMode
EnablePartialRerendering
LoadScriptBeforeUI
EnableCDN
ToolScriptManager</li></li></ul><li>Optimizaciones: ASP.NET AjaxCompresión y Cache a nivel de Web.Config<br />  <system.we...
Optimizaciones a nivel de ASP.NET AJAX<br />DEMO<br />Gonzalo Pérez C.<br />MVP ASP/ASP.NET<br />http://www.chalalo.cl<br ...
Resumen Optimización<br />1)Usar Compresión2)Usar Request3)Condicionales4)Proveer Contenido Cacheable5)MinificarJavascript...
Nuevas funcionalidades de ASP.NET 4<br />Caché extensible<br />Problema: Si hay mucho tráfico, la necesidad de memoria aum...
Caché extensible<br />DEMO<br />Juan Carlos OlamendyTurruellas<br />Máster en InformáticaEmpresarial<br />Microsof MVP<br ...
Redirección de páginas<br />Problema: Al mover páginas u otros recursos, se usaba Response.Redirectemitiendo una respuesta...
Comprensión del Estado de Sesión<br />Problema: Se almacena una gran cantidad de objetos en el estado de sesión.<br />Solu...
Uso de etiquetasMetas<br />Problema: Queremos generar dinámicamente meta-información sobre nuestra página. Una técnica Sea...
Mejormanejo del ViewState<br />Problema: Queremos mejor control del ViewState.<br />Solución: Uso de la nueva propiedad Vi...
Enrutamiento<br />Problema: Queremos normalizar las URLs de manera descriptibles http://website/products/category/12. Otra...
Enrutamiento<br />DEMO<br />Juan Carlos OlamendyTurruellas<br />Máster en InformáticaEmpresarial<br />Microsof MVP<br />Or...
Uso de la propiedadClientID<br />Problema: Es necesario conocer el identificador de los elementos HTML generados. El antig...
Uso de la propiedadClientID<br />DEMO<br />Juan Carlos OlamendyTurruellas<br />Máster en InformáticaEmpresarial<br />Micro...
Control Chart<br />Problema: Se quiere visualizar datos de una manera comprensible. Ejemplo, un reporte de ventas.<br />So...
Control Chart<br />DEMO<br />Juan Carlos OlamendyTurruellas<br />Máster en InformáticaEmpresarial<br />Microsof MVP<br />O...
SoporteHTML Encoding automático<br />Problema: El desarrollo en ASP.NET está lleno de sentencias <%= expression %> para en...
HTML Helpersfuertementetipiados<br />Problema: En ASP.NET MVC, se quiere tener HTML Helpers tipiados para detectar errores...
Upcoming SlideShare
Loading in …5
×

Máxima potencia en el desarrollo de sitios web

1,787 views
1,712 views

Published on

PPT Charla MSDN:
Máxima potencia en el desarrollo de sitios web

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,787
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Máxima potencia en el desarrollo de sitios web

  1. 1. MejoresPrácticasen el Desarrollo de SitiosWeb & ASP.NET Ajax <br />&<br />Nuevas funcionalidades de ASP.NET 4<br />Gonzalo Pérez C.Web Developer CoroboriMVP ASP/ASP.NEThttp://www.chalalo.clTwitter:chalalochalalo@hotmail.com<br />Juan Carlos OlamendyTurruellas<br />Arquitecto Principal, Exynko<br />Máster en InformáticaEmpresarial<br />Microsoft MVP<br />Oracle ACE<br />johnx_olam@fastmail.fm<br />
  2. 2. Agenda de Hoy<br />Optimización Web<br />Networking<br />HTML<br />CSS<br />JavasCript<br />Marshalling<br />ASP.NET AJAX<br />Lo Nuevo de ASP.NET 4.0<br />Caché extensible<br />Redirección de páginas<br />Compresión del Session State<br />Uso de etiquetasMetas<br />Mejor control del ViewState<br />Enrutamiento en páginas Web Forms<br />Uso de identificadores del cliente<br />Control Chart<br />Expresiones con soporte Html Encoding<br />Mejoras en ASP.NET MVC 2<br />2<br />
  3. 3. Optimización Web<br />«En la mayoría de las páginas web, menos del 10 - 20% del tiempo de carga de una página , corresponde a la descarga del documento html, existe entonces un 80-90% que podemos intentar reducir»<br />- Steve Souders<br />
  4. 4. Puntos de Optimización<br />Networking<br />Networking<br />HTML<br />JavaScript<br />Marshalling<br />ASP.NET Ajax<br />CSS<br />
  5. 5. Optimizaciones - NetworkingComprimir el tráfico en la red<br />Response<br />Request<br />GET / HTTP/1.1<br />Accept: */*<br />Accept-Language: en-us<br />UA-CPU: x86<br />Accept-Encoding: gzip, deflate<br />User-Agent: Mozilla/4.0 (compatible…)<br />Host: www.live.com<br />Response<br />HTTP/1.1 200 OK<br />Content-Length: 3479<br />Expires: -1<br />Date: Sun, 14 Mar 2010 21:30:46 GMT<br />Content-Type: text/html; charset=utf-8<br />Pragma: no-cache<br />Content-Encoding: gzip<br />Accept-Encoding: gzip, deflate<br />Content-Encoding: gzip<br />…Habilitadodesde el WebServer<br />… Revisarque y cuantocomprimir<br />
  6. 6. Optimizaciones - NetworkingProveerContenido Cacheable<br />Primer Request<br />GET /images/banner.jpg HTTP/1.1<br />Host: www.chalalo.cl<br />PrimerResponse<br />HTTP/1.1 200 OK<br />Content-Type: image/jpeg<br />Expires: Fri, 19 Sep 2010 00:00:00 GMT<br />Expires: Fri, 19 Sep 2010 00:00:00 GMT<br />Segundo Request<br />GET /images/banner.jpg HTTP/1.1<br />Host: www.chalalo.cl<br />No se necesita Response<br />
  7. 7. Response<br />Request<br />GET /images/banner.jpg HTTP/1.1<br />Host: www.microsoft.com<br />If-Modified-Since:<br />Sun, 22 Jul 2010 21:30:46 GMT<br />Response<br />HTTP/1.1 304 Not Modified<br />Content-Type: image/jpeg<br />Last-Modified: <br />Sun, 22 Jul 2010 21:30:46 GMT<br />Last-Modified: <br />Sun, 22 Jul 2010 21:30:46 GMT<br />If-Modified-Since:<br />Sun, 22 Jul 2010 21:30:46 GMT<br />Optimizaciones - NetworkingRequest Condicionales<br />
  8. 8. Optimizaciones - NetworkingMinimizar JavaScript ( no escompresión)<br />JavaScript Original<br />JavaScript Minimizado<br /> function CreateBoard() {<br /> images = [];<br />board.innerHTML = '';<br />var c = 1;<br />vari = count / 2 - .5;<br /> for (var x = -i; x <= i; x++)<br /> {<br /> for (var z = -i; z <= i; z++)<br /> {<br />varimg = document.createElement('img');<br />img.setAttribute("name", "rotatingimage");<br />img.style.left = '5000px';<br /> img.x3d = x;<br /> img.z3d = z;<br /> if (useBrowserLogos == true)<br /> {<br /> switch (c)<br /> {<br /> case 1:<br /> img.src = IEIMAGE;<br /> c ++;<br /> break;<br /> case 2:<br /> img.src = LOGO2;<br /> c ++;<br /> break;<br /> case 3:<br /> img.src = LOGO1;<br /> c ++;<br /> break;<br /> case 4:<br /> img.src = LOGO4;<br /> c ++;<br /> break; <br /> case 5:<br /> img.src = LOGO3;<br /> c = 1;<br /> break;<br /> }<br /> }<br /> else<br /> {<br /> img.src = IMAGE;<br /> }<br />board.appendChild(img);<br />images.push(img);<br /> }<br /> }<br />countimages.innerHTML = images.length;<br /> }<br />e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp(''+e(c)+'','g'),k[c])}}return p}('y v(){a=[];b.e='';9 c=1;9 i=D/2-.5;d(9 x=-i;x<=i;x++){d(9 z=-i;z<=i;z++){9 0=l.H('0');0.o("n","p");0.q.s='r';0.m=x;0.f=z;g(h==k){j(c){8 1:0.6=t;c++;7;8 2:0.6=F;c++;7;8 3:0.6=G;c++;7;8 4:0.6=J;c++;7;8 5:0.6=w;c=1;7}}C{0.6=I}b.B(0);a.A(0)}}E.e=a.u}')<br />
  9. 9. Optimizaciones - NetworkingNuncaredimesionarlasimágenes solo en escala.<br /><html><br /><head><br /><title>Test</title><br /></head><br /><body><br />…<br /><!-- logo.gif dimensiones 500 x 400 --><br /><imgsrc=“logo.gif" width="50" height="40" /><br />…<br /></body><br /></html><br />500 x 400<br />width="50" height="40"<br />
  10. 10. Optimizaciones - Networking Nuncaredimesionarlasimágenessolo en escala.<br /><html><br /><head><br /><title>Test</title><br /></head><br /><body><br />…<br /><!-- logo.gif dimensiones: 50 x 40 --><br /><imgsrc=“logo.gif" width="50" height="40" /><br />…<br /></body><br /></html><br />50 x 40<br />width="50" height="40"<br />
  11. 11. Optimizaciones- NetworkingCombinarJavascript & CDN<br /><script src=“miScript1.js” … ></script><br /><script src=“miScript2.js” … ></script><br /><script src=“miScript3.js” … ></script><br /><script src=“animater.js” … ></script><br /><script src=“extjs.js” … ></script><br /><script src=“yahooui.js” … ></script><br /><script src=“miScript4.js” … ></script><br /><script src=“jQuery.js” … ></script><br />
  12. 12. Optimizaciones- NetworkingCombinarJavascript & CDN<br /><script src=“miScript1.js” … ></script><br /><script src=“miScript2.js” … ></script><br /><script src=“miScript3.js” … ></script><br /><script src=“animater.js” … ></script><br /><script src=“extjs.js” … ></script><br /><script src=“yahooui.js” … ></script><br /><script src=“miScript4.js” … ></script><br /><script src=“jQuery.js” … ></script><br />
  13. 13. 13<br />Optimizaciones: NetworkingCombinarJavascript & CDN<br /><script src=“miScript.js” … ></script><br /><script src=“animater.js” … ></script><br /><script src=“extjs.js” … ></script><br /><script src=“yahooui.js” … ></script><br /><script src=“http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js” … ></script><br />
  14. 14. Optimizaciones - NetworkingUsar Image Sprites<br /><html><br /><head><br /><title>Test</title><br /></head><br /><body><br />…<br /><imgsrc="a.gif" /> Item 1<br /><imgsrc="b.gif" /> Item 2<br /><imgsrc=“c.gif" /> Item 3<br /><imgsrc=“d.gif" /> Item 4<br /><imgsrc=“e.gif" /> Item 5<br /><imgsrc=“f.gif" /> Item 6<br />…<br /></body><br /></html><br /><imgsrc="a.gif" /> Item 1<br /><imgsrc="b.gif" /> Item 2<br /><imgsrc=“c.gif" /> Item 3<br /><imgsrc=“d.gif" /> Item 4<br /><imgsrc=“e.gif" /> Item 5<br /><imgsrc=“f.gif" /> Item 6<br />
  15. 15. Optimizaciones - Networking Usar Image Sprites<br />
  16. 16. Optimizaciones - NetworkingUsar Image Sprites<br /><head><br /><title>Test</title><br /><style type="text/css"><br />.a, .b { width: 10; height: 10 }<br />.a, .b { background-image: "abc.gif" }<br />.a { background-position: 0 0 }<br />.b { background-position: 0 -10 }<br /></style><br /></head><br /><body><br />…<br /><div class="a"></div> Item 1<br /><div class="b"></div> Item 2<br />…<br /></body><br />.a, .b { width: 10; height: 10 }<br />.a, .b { background-image: "abc.gif" }<br />.a { background-position: 0 0 }<br />.b { background-position: 0 -10 }<br /><div class="a"></div><br /><div class="b"></div><br />
  17. 17. Internet Explorer 9 Network ToolsMedirlasmejoras de rendimiento a nivel de Networking<br />
  18. 18. - Mitificación de Script :Microsoft Ajax Minifier- Images Script<br />DEMO<br />Gonzalo Pérez C.<br />MVP ASP/ASP.NET<br />http://www.chalalo.cl<br />Twitter: chalalo<br />chalalo@hotmail.com<br />
  19. 19. Puntos de Optimización<br />Networking<br />Networking<br />HTML<br />JavaScript<br />Marshalling<br />ASP.NET Ajax<br />CSS<br />
  20. 20. Optimizaciones - HTMLEvitarJavaScript embebido<br /><html><br /><head><br /><title>Test</title><br /><script type="text/javascript">  <!--    function helloWorld() {      alert('Hello World!') ;    }  // --><br /></script><br /></head><br /><body><br />…<br /></body><br /></html><br /><script type="text/javascript">  <!--    function HolaMundo() {      alert('HolaMundo!') ;    }  // --><br /></script><br />
  21. 21. Optimizaciones- HTMLEvitarreferenciar o escribir JavaScript en el Head <br /><html><br /><head><br /><title>Test</title><br /><script src=“myscript.js” … ></script><br /></head><br /><body><br />…<br /></body><br /></html><br /> <script src=“myscript.js” … ></script><br />
  22. 22. <html><br /><head><br /><title>Test</title><br /></head><br /><body><br />…<br />…<br />…<br /></body><br /></html><br /><script src=“myscript.js” … ></script><br />Optimizaciones- HTMLReferenciar o escribir JavaScript al final de la página.<br />
  23. 23. Optimizaciones - HTMLPerosi lo haces, utiliza el tag defer (Solo IE)<br /><html><br /><head><br /><title>Test</title><br /><script src=“myscript.js” … ></script><br /></head><br /><body><br />…<br /></body><br /></html><br />defer="defer"><br />
  24. 24. Puntos de Optimización<br />Networking<br />Networking<br />HTML<br />JavaScript<br />Marshalling<br />ASP.NET Ajax<br />CSS<br />
  25. 25. Optimizaciones - CSSEvitarEstilosEmbebidos<br /><html><br /><head><br /><title>Test</title><br /></head><br /><body><br /><style> <br /> <!--<br /> .green { color:#009900;}<br /> .red { color:#660000;}<br /> --><br /></style><br /> …<br /> …<br /> …<br /></body><br /></html><br /><style> <br /> <!--<br /> .verde { color:#009900;}<br /> .rojo { color:#660000;}<br /> --><br /></style><br />
  26. 26. Optimizaciones- CSSEvitarreferenciar CSS al final de la página<br /><html><br /><head><br /><title>Test</title><br /></head><br /><body><br />…<br />…<br />…<br /></body><br /></html><br /><link rel="stylesheet" type="text/css" href=“mystyles.css" /><br />
  27. 27. Optimizaciones - CSSReferenciar el archivo de estilos en el head.<br /><html><br /><head><br /><title>Test</title><br /></head><br /><body><br />…<br />…<br />…<br /></body><br /></html><br /><link rel="stylesheet" type="text/css"href="class.css" /> <br />
  28. 28. Puntos de Optimización<br />Networking<br />Networking<br />HTML<br />JavaScript<br />Marshalling<br />ASP.NET Ajax<br />CSS<br />
  29. 29. Optimizaciones - JavascriptMinimizar la resolución de símbolos<br />varfoo<br />obj.foo<br />Costo<br />DOM<br />Global<br />Prototype<br />Chain<br />Intermediate<br />Scopes<br />Instance<br />Local<br />
  30. 30. Optimizaciones - JavascriptMinimizar la Resolución de Símbolos<br />function TrabajarConVariableLocal()<br />{<br />variableLocal= 5;<br />return (variableLocal+ 1 );<br />}<br />variableLocal<br />variableLocal<br />
  31. 31. function TrabajarConVariableLocal2()<br />{<br />varvariableLocal= 5;<br />return (variableLocal+ 1 );<br />}<br />varvariableLocal<br />variableLocal<br />Optimizaciones - JavascriptMinimizar la Resolución de Símbolos<br />
  32. 32. Optimizaciones - JavascriptMinimizar la Resolución de Símbolos: Funciones<br />function IterarSobreColeccionWork()<br />{<br />var length = myCollection.length;<br />for(vari = 0; i < length; i++)<br />{<br />Work(myCollection[i]);<br />}<br />}<br />Work<br />
  33. 33. Optimizaciones - JavascriptMinimizar la Resolución de Símbolos: Funciones<br />function IterarSobreColeccionWork2()<br />{<br />varfuncWork = Work;<br />var length = myCollection.length;<br />for(vari = 0; i < length; i++)<br />{<br />funcWork(myCollection[i]);<br />}<br />}<br />varfuncWork = Work;<br />funcWork<br />
  34. 34. <html><br /><head><br /><title>Test</title><br /></head><br /><body><br />…<br />…<br />…<br /><script src=“myscript.js” … ></script> <br /><script src=“navigation.js” … ></script><br /><script src=“jquery.js” … ></script><br /><script src=“jquery.js” … ></script><br /></body><br /></html><br />Optimizacion: JavasScriptRemover referencias y códigosrepetidos<br /><script src=“jquery.js” … ></script><br /><script src=“jquery.js” … ></script><br />
  35. 35. <html><br /><head><br /><title>Test</title><br /></head><br /><body><br />…<br />…<br /><script src=“jquery.js” … ></script><br /><script src=“prototype.js” … ></script><br /><script src=“dojo.js” … ></script><br /><script src=“animater.js” … ></script><br /><script src=“extjs.js” … ></script><br /><script src=“yahooui.js” … ></script><br /><script src=“mochikit.js” … ></script><br /><script src=“lightbox.js” … ></script><br /><script src=“jslibs.js” … ></script><br /><script src=“qooxdoo.js” … ></script><br />Optimizaciones - JavascriptRemover Script Duplicados…Librerías<br /><script src=“jquery.js” … ></script><br /><script src=“prototype.js” … ></script><br /><script src=“dojo.js” … ></script><br /><script src=“animater.js” … ></script><br /><script src=“extjs.js” … ></script><br /><script src=“yahooui.js” … ></script><br /><script src=“mochikit.js” … ></script><br /><script src=“lightbox.js” … ></script><br /><script src=“jslibs.js” … ></script><br /><script src=“qooxdoo.js” … ></script><br />
  36. 36. Networking<br />Networking<br />HTML<br />JavaScript<br />Marshalling<br />ASP.NET Ajax<br />Puntos de Optimización<br />CSS<br />
  37. 37. Trident (MSHTML)<br />JScript Engine<br />Optimizaciones: MarshallingMinimizar la interacción con el DOM<br />DOM<br />
  38. 38. Optimizaciones: MarshallingMinimizar la interacción con el DOM<br />function CalcularSuma()<br />{<br />// ObtenerValores<br />var nume1 = document.body.all.nume1.value;<br />var nume2 = document.body.all.nume2.value;<br />// CalcularResultado<br />document.body.all.resultado.value = nume1 + nume2;<br />}<br />document.body.all<br />document.body.all<br />document.body.all<br />9 Búsquedas en el DOM<br />
  39. 39. Optimizaciones: MarshallingMinimizar la interacción con el DOM<br />function CalcularSuma2()<br />{<br />// Cachear la colección de elementos<br />var elms = document.body.all;<br />// Obtener los valores<br />var nume1 = elms.nume1.value;<br />var nume2 = elms.nume2.value;<br />// CalcularResultado<br />elms.result.value = lSide + rSide;<br />}<br />var elms = document.body.all;<br />elms<br />elms<br />3 Búsquedas al Dom<br />elms<br />
  40. 40. Networking<br />Networking<br />HTML<br />JavaScript<br />Marshalling<br />ASP.NET Ajax<br />Puntos de Optimización<br />CSS<br />
  41. 41. Optimización – ASP.NET AJAXOptimizaciones a Nivel de ScriptManager<br /><ul><li>ScriptReferenceProfiler + CompositeScript
  42. 42. ScriptMode
  43. 43. EnablePartialRerendering
  44. 44. LoadScriptBeforeUI
  45. 45. EnableCDN
  46. 46. ToolScriptManager</li></li></ul><li>Optimizaciones: ASP.NET AjaxCompresión y Cache a nivel de Web.Config<br /> <system.web.extensions><br /> <scripting><br /> <scriptResourceHandlerenableCompression="true"enableCaching="true"/><br /> </scripting><br /> </system.web.extensions><br />
  47. 47. Optimizaciones a nivel de ASP.NET AJAX<br />DEMO<br />Gonzalo Pérez C.<br />MVP ASP/ASP.NET<br />http://www.chalalo.cl<br />Twitter: chalalo<br />chalalo@hotmail.com<br />
  48. 48. Resumen Optimización<br />1)Usar Compresión2)Usar Request3)Condicionales4)Proveer Contenido Cacheable5)MinificarJavascript6)No escalar imágenes7)Usar ImageSprites8)Referenciar JScript al final9)Agregar deferTag10)Referenciar Hojas de Estilo arriba11)Disminuir las búsquedas en el Dom12)Cachear los referencias a funciones13)Remover Script repetidos14)Remover funciones repetidas15)Utilizar CDN16)Utilizar Mejoras de ScriptManager<br />
  49. 49. Nuevas funcionalidades de ASP.NET 4<br />Caché extensible<br />Problema: Si hay mucho tráfico, la necesidad de memoria aumenta, y existe competencia por la memoria que es un recurso limitado.<br />Solución: La caché extensible permite configurar uno o más proveedores de caché ( asociados a mecanismo de almacenamiento).<br />Estrategia de implementación: (Demo)<br />
  50. 50. Caché extensible<br />DEMO<br />Juan Carlos OlamendyTurruellas<br />Máster en InformáticaEmpresarial<br />Microsof MVP<br />Oracle ACE<br />johnx_olam@fastmail.fm<br />
  51. 51. Redirección de páginas<br />Problema: Al mover páginas u otros recursos, se usaba Response.Redirectemitiendo una respuesta HTTP 302 (temporary moved) para enviar al cliente a la nueva dirección.<br />Solución: ASP.NET 4 usa el nuevo método eResponse.RedirectPermanent("newlocation/page.aspx")para emitir respuestas HTTP 301 (permanent moved).<br />Response.Redirect<br />Response.RedirectPermanent("newlocation/page.aspx")<br />
  52. 52. Comprensión del Estado de Sesión<br />Problema: Se almacena una gran cantidad de objetos en el estado de sesión.<br />Solución: ASP.NET 4 incorpora la opción de compresión del estado de sesión. Los datos se comprimen (descomprimidos) usando la clase System.IO.Compression.GZipStream.<br />Estrategía de implementación: <br /><sessionState mode="SQLServer" sqlConnectionString="data source=dbserver;Initial Catalog=aspnetstate" allowCustomSqlDatabase="true" compressionEnabled="true"/><br />compressionEnabled="true"<br />
  53. 53. Uso de etiquetasMetas<br />Problema: Queremos generar dinámicamente meta-información sobre nuestra página. Una técnica SearchEngineOptimization (SEO).<br />Solución: ASP.NET 4 incluye las propiedades MetaKeywords y MetaDescription a la clase Page. Además se incluyen los atributos Keywords y Description en la directiva @Page.<br />Estrategia de implementación:<br /><%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"<br />CodeBehind="Default.aspx.cs" Inherits="_01WebAppOutputCacheDemo._Default" Keywords="This is the default page" Description="This is the default page" %><br />Keywords="This is the default page"<br />Description="This is the default page"<br />
  54. 54. Mejormanejo del ViewState<br />Problema: Queremos mejor control del ViewState.<br />Solución: Uso de la nueva propiedad ViewStateMode en los controles. Posibles valores: Enabled, Disabled, Inherit.<br />Estrategia de implementación:<br /><%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"<br />CodeBehind="Default.aspx.cs" Inherits="WebAppViewStateDemo._Default" ViewStateMode="Disabled" %><br />ViewStateMode="Disabled"<br />
  55. 55. Enrutamiento<br />Problema: Queremos normalizar las URLs de manera descriptibles http://website/products/category/12. Otra técnica SEO.<br />Solución: Configurar patrones del enrutamiento para asociar URL con las páginas Web Forms físicas.<br />Estrategia de implementación: (Demo)<br />
  56. 56. Enrutamiento<br />DEMO<br />Juan Carlos OlamendyTurruellas<br />Máster en InformáticaEmpresarial<br />Microsof MVP<br />Oracle ACE<br />johnx_olam@fastmail.fm<br />
  57. 57. Uso de la propiedadClientID<br />Problema: Es necesario conocer el identificador de los elementos HTML generados. El antiguo algoritmo hacía que esto no fuese predecibles.<br />Solución: <br />Alternativa 1.<br />Alternativa 2.<br />La nueva propiedad ClientIdMode de los controles Web. Posible valores AutoID, Static, Predictable y Inherit.<br />varbtn = document.getElementById("<% =Button1.ClientID %>");<br />varbtn = $('<% =Button1.ClientID %>');<br />
  58. 58. Uso de la propiedadClientID<br />DEMO<br />Juan Carlos OlamendyTurruellas<br />Máster en InformáticaEmpresarial<br />Microsof MVP<br />Oracle ACE<br />johnx_olam@fastmail.fm<br />
  59. 59. Control Chart<br />Problema: Se quiere visualizar datos de una manera comprensible. Ejemplo, un reporte de ventas.<br />Solución: Se introdujo el nuevo control Chart con varias opciones de visualización. En tiempo de ejecución se genera una imagen referenciado por el usuario.<br />Estrategia de implementación: (Demo)<br />
  60. 60. Control Chart<br />DEMO<br />Juan Carlos OlamendyTurruellas<br />Máster en InformáticaEmpresarial<br />Microsof MVP<br />Oracle ACE<br />johnx_olam@fastmail.fm<br />
  61. 61. SoporteHTML Encoding automático<br />Problema: El desarrollo en ASP.NET está lleno de sentencias <%= expression %> para enviar texto a la salida. Si no se utiliza el método HttpUtility.HtmlEncode, se puede inyectar código JavaScript o HTML. Ataque conocido como XSS (Cross Site Scripting).<br />Solución: Se introdujo la sentencia <%: expression %> generando <%= HttpUtility.HtmlEncode(expression) %>.<br /> Si el texto está formateado, entonces se utiliza:<br /> <%: new HtmlString("<div>This is already encoded<<br /><%: expression %><br /><%= HttpUtility.HtmlEncode(expression) %><br /><%: new HtmlString("<div>This is already encoded</div>") %><br />
  62. 62. HTML Helpersfuertementetipiados<br />Problema: En ASP.NET MVC, se quiere tener HTML Helpers tipiados para detectar errores de compilación y mejor soporte de IntelliSense.<br />Solución: Se introdujeron los HTML Helpers fuertemente tipiados siguiendo la convención Html.HelperNameFor(,<br /> pasando como parámetro una expresión lambda.<br />Estrategias de implementación:<br /><%= Html.TextBoxFor(model=>model.ProductName) %><br />Html.HelperNameFor()<br /><%= Html.TextBoxFor(model=>model.ProductName) %><br />
  63. 63. Mejoras en la validación<br />Problema: La validación de la entrada de los usuarios es un requerimiento de las aplicaciones empresariales.<br />Solución: La infraestructura de validación en ASP.NET MVC 2 está diseñada para tomar ventajas de la validación mediante DataAnnotations, así como integrarse fácilmente con otros marcos de trabajo como CastleValidator o EntLibValidation.<br />Estrategia de implementación: (Demo)<br />
  64. 64. Mejoras en la validación<br />DEMO<br />Juan Carlos OlamendyTurruellas<br />Máster en InformáticaEmpresarial<br />Microsof MVP<br />Oracle ACE<br />johnx_olam@fastmail.fm<br />
  65. 65. ¿Preguntas?<br />
  66. 66. 62<br />Recursos<br /><ul><li>Links Comunidades (Noticias, Eventos, Contenidos, Videos)</li></ul>www.facebook.com/comunidadesms<br />www.twitter.com/comunidadesms<br />www.youtube.com/comunidadesms<br />

×