![Page 1: Máxima potencia en el desarrollo de sitios web](https://reader038.vdocuments.mx/reader038/viewer/2022102823/548e24c8b47959cb708b479a/html5/thumbnails/1.jpg)
Mejores Prácticas en el Desarrollo de Sitios Web & ASP.NET Ajax
Gonzalo Pérez C.Web Developer CoroboriMVP ASP/ASP.NEThttp://www.chalalo.clTwitter:[email protected]
Nuevas funcionalidades de ASP.NET 4
&
Juan Carlos Olamendy Turruellas
Arquitecto Principal, Exynko
Máster en Informática Empresarial
Microsoft MVP
Oracle [email protected]
![Page 2: Máxima potencia en el desarrollo de sitios web](https://reader038.vdocuments.mx/reader038/viewer/2022102823/548e24c8b47959cb708b479a/html5/thumbnails/2.jpg)
2
Agenda de Hoy• Optimización Web
• Networking• HTML• CSS• JavasCript• Marshalling• ASP.NET AJAX
• Lo Nuevo de ASP.NET 4.0• Caché extensible• Redirección de páginas• Compresión del Session State• Uso de etiquetas Metas• Mejor control del ViewState• Enrutamiento en páginas Web Forms• Uso de identificadores del cliente• Control Chart• Expresiones con soporte Html Encoding• Mejoras en ASP.NET MVC 2
![Page 3: Máxima potencia en el desarrollo de sitios web](https://reader038.vdocuments.mx/reader038/viewer/2022102823/548e24c8b47959cb708b479a/html5/thumbnails/3.jpg)
«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»- Steve Souders
Optimización Web
![Page 4: Máxima potencia en el desarrollo de sitios web](https://reader038.vdocuments.mx/reader038/viewer/2022102823/548e24c8b47959cb708b479a/html5/thumbnails/4.jpg)
Puntos de OptimizaciónN
etw
ork
ing
HTM
L
JavaS
cri
pt
Mars
halli
ng
AS
P.N
ET
Aja
x
Netw
ork
ing
CSS
![Page 5: Máxima potencia en el desarrollo de sitios web](https://reader038.vdocuments.mx/reader038/viewer/2022102823/548e24c8b47959cb708b479a/html5/thumbnails/5.jpg)
Optimizaciones - NetworkingComprimir el tráfico en la red
RequestGET / HTTP/1.1
Accept: */*
Accept-Language: en-us
UA-CPU: x86
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible…)
Host: www.live.com
Response
ResponseHTTP/1.1 200 OK
Content-Length: 3479
Expires: -1
Date: Sun, 14 Mar 2010 21:30:46 GMT
Content-Type: text/html; charset=utf-8
Pragma: no-cache
Content-Encoding: gzip
Accept-Encoding: gzip, deflate
Content-Encoding: gzip
…Habilitado desde el WebServer… Revisar que y cuanto comprimir
![Page 6: Máxima potencia en el desarrollo de sitios web](https://reader038.vdocuments.mx/reader038/viewer/2022102823/548e24c8b47959cb708b479a/html5/thumbnails/6.jpg)
Optimizaciones - NetworkingProveer Contenido Cacheable
Primer RequestGET /images/banner.jpg HTTP/1.1
Host: www.chalalo.cl
Primer ResponseHTTP/1.1 200 OK
Content-Type: image/jpeg
Expires: Fri, 19 Sep 2010 00:00:00 GMTExpires: Fri, 19 Sep 2010 00:00:00 GMT
Segundo RequestGET /images/banner.jpg HTTP/1.1
Host: www.chalalo.cl
No se necesita Response
![Page 7: Máxima potencia en el desarrollo de sitios web](https://reader038.vdocuments.mx/reader038/viewer/2022102823/548e24c8b47959cb708b479a/html5/thumbnails/7.jpg)
Last-Modified: Sun, 22 Jul 2010 21:30:46 GMT
RequestGET /images/banner.jpg HTTP/1.1
Host: www.microsoft.com
If-Modified-Since:
Sun, 22 Jul 2010 21:30:46 GMTIf-Modified-Since: Sun, 22 Jul 2010 21:30:46 GMT
Optimizaciones - NetworkingRequest Condicionales
Response
ResponseHTTP/1.1 304 Not Modified
Content-Type: image/jpeg
Last-Modified:
Sun, 22 Jul 2010 21:30:46 GMT
![Page 8: Máxima potencia en el desarrollo de sitios web](https://reader038.vdocuments.mx/reader038/viewer/2022102823/548e24c8b47959cb708b479a/html5/thumbnails/8.jpg)
Optimizaciones - NetworkingMinimizar JavaScript ( no es compresión)
function CreateBoard() { images = []; board.innerHTML = ''; var c = 1; var i = count / 2 - .5; for (var x = -i; x <= i; x++) { for (var z = -i; z <= i; z++) { var img = document.createElement('img'); img.setAttribute("name", "rotatingimage"); img.style.left = '5000px'; img.x3d = x; img.z3d = z; if (useBrowserLogos == true) { switch (c) { case 1: img.src = IEIMAGE; c ++; break; case 2: img.src = LOGO2; c ++; break; case 3: img.src = LOGO1; c ++; break; case 4: img.src = LOGO4; c ++; break; case 5: img.src = LOGO3; c = 1; break; } } else { img.src = IMAGE; } board.appendChild(img); images.push(img); } } countimages.innerHTML = images.length; }
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'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','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}')
JavaScript Original JavaScript Minimizado
![Page 9: Máxima potencia en el desarrollo de sitios web](https://reader038.vdocuments.mx/reader038/viewer/2022102823/548e24c8b47959cb708b479a/html5/thumbnails/9.jpg)
Optimizaciones - NetworkingNunca redimesionar las imágenes solo en escala.
<html><head>
<title>Test</title></head><body>
…<!-- logo.gif dimensiones 500 x 400 --><img src=“logo.gif" width="50" height="40" />…
</body>
</html>
width="50" height="40"500 x 400
![Page 10: Máxima potencia en el desarrollo de sitios web](https://reader038.vdocuments.mx/reader038/viewer/2022102823/548e24c8b47959cb708b479a/html5/thumbnails/10.jpg)
Optimizaciones - Networking Nunca redimesionar las imágenes solo en escala.
<html><head>
<title>Test</title></head><body>
…<!-- logo.gif dimensiones: 50 x 40 --><img src=“logo.gif" width="50" height="40" />…
</body>
</html>
width="50" height="40"
50 x 40
![Page 11: Máxima potencia en el desarrollo de sitios web](https://reader038.vdocuments.mx/reader038/viewer/2022102823/548e24c8b47959cb708b479a/html5/thumbnails/11.jpg)
Optimizaciones - NetworkingCombinar Javascript & CDN
<script src=“miScript1.js” … ></script><script src=“miScript2.js” … ></script><script src=“miScript3.js” … ></script><script src=“animater.js” … ></script><script src=“extjs.js” … ></script><script src=“yahooui.js” … ></script><script src=“miScript4.js” … ></script><script src=“jQuery.js” … ></script>
![Page 12: Máxima potencia en el desarrollo de sitios web](https://reader038.vdocuments.mx/reader038/viewer/2022102823/548e24c8b47959cb708b479a/html5/thumbnails/12.jpg)
Optimizaciones - NetworkingCombinar Javascript & CDN
<script src=“miScript1.js” … ></script><script src=“miScript2.js” … ></script><script src=“miScript3.js” … ></script><script src=“animater.js” … ></script><script src=“extjs.js” … ></script><script src=“yahooui.js” … ></script><script src=“miScript4.js” … ></script><script src=“jQuery.js” … ></script>
![Page 13: Máxima potencia en el desarrollo de sitios web](https://reader038.vdocuments.mx/reader038/viewer/2022102823/548e24c8b47959cb708b479a/html5/thumbnails/13.jpg)
13
Optimizaciones: NetworkingCombinar Javascript & CDN
<script src=“miScript.js” … ></script><script src=“animater.js” … ></script><script src=“extjs.js” … ></script><script src=“yahooui.js” … ></script><script src=“http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js” … ></script>
![Page 14: Máxima potencia en el desarrollo de sitios web](https://reader038.vdocuments.mx/reader038/viewer/2022102823/548e24c8b47959cb708b479a/html5/thumbnails/14.jpg)
Optimizaciones - NetworkingUsar Image Sprites
<html><head>
<title>Test</title></head><body>
…<img src="a.gif" /> Item 1<img src="b.gif" /> Item 2<img src=“c.gif" /> Item 3<img src=“d.gif" /> Item 4<img src=“e.gif" /> Item 5<img src=“f.gif" /> Item 6…
</body>
</html>
<img src="a.gif" /> Item 1<img src="b.gif" /> Item 2<img src=“c.gif" /> Item 3<img src=“d.gif" /> Item 4<img src=“e.gif" /> Item 5<img src=“f.gif" /> Item 6
![Page 15: Máxima potencia en el desarrollo de sitios web](https://reader038.vdocuments.mx/reader038/viewer/2022102823/548e24c8b47959cb708b479a/html5/thumbnails/15.jpg)
Optimizaciones - Networking Usar Image Sprites
![Page 16: Máxima potencia en el desarrollo de sitios web](https://reader038.vdocuments.mx/reader038/viewer/2022102823/548e24c8b47959cb708b479a/html5/thumbnails/16.jpg)
Optimizaciones - NetworkingUsar Image Sprites
<head><title>Test</title><style type="text/css">
.a, .b { width: 10; height: 10 }
.a, .b { background-image: "abc.gif" }
.a { background-position: 0 0 }
.b { background-position: 0 -10 }</style>
</head>
<body>…<div class="a"></div> Item 1<div class="b"></div> Item 2…
</body>
<div class="a"></div><div class="b"></div>
.a, .b { width: 10; height: 10 }
.a, .b { background-image: "abc.gif" }
.a { background-position: 0 0 }
.b { background-position: 0 -10 }
![Page 17: Máxima potencia en el desarrollo de sitios web](https://reader038.vdocuments.mx/reader038/viewer/2022102823/548e24c8b47959cb708b479a/html5/thumbnails/17.jpg)
Internet Explorer 9 Network ToolsMedir las mejoras de rendimiento a nivel de Networking
![Page 18: Máxima potencia en el desarrollo de sitios web](https://reader038.vdocuments.mx/reader038/viewer/2022102823/548e24c8b47959cb708b479a/html5/thumbnails/18.jpg)
- Mitificación de Script :Microsoft Ajax Minifier- Images Script
Gonzalo Pérez C.
MVP ASP/ASP.NET
http://www.chalalo.cl
Twitter: chalalo
DEMO
![Page 19: Máxima potencia en el desarrollo de sitios web](https://reader038.vdocuments.mx/reader038/viewer/2022102823/548e24c8b47959cb708b479a/html5/thumbnails/19.jpg)
Puntos de Optimización
Netw
ork
ing
HTM
L
JavaS
cri
pt
Mars
halli
ng
AS
P.N
ET
Aja
x
Netw
ork
ing
CSS
![Page 20: Máxima potencia en el desarrollo de sitios web](https://reader038.vdocuments.mx/reader038/viewer/2022102823/548e24c8b47959cb708b479a/html5/thumbnails/20.jpg)
Optimizaciones - HTMLEvitar JavaScript embebido
<html><head>
<title>Test</title><script type="text/javascript"> <!-- function helloWorld() { alert('Hello World!') ; } // -->
</script></head><body>
…</body>
</html>
<script type="text/javascript"> <!-- function HolaMundo() { alert('Hola Mundo!') ; } // --></script>
![Page 21: Máxima potencia en el desarrollo de sitios web](https://reader038.vdocuments.mx/reader038/viewer/2022102823/548e24c8b47959cb708b479a/html5/thumbnails/21.jpg)
Optimizaciones - HTMLEvitar referenciar o escribir JavaScript en el Head
<html><head>
<title>Test</title><script src=“myscript.js” … ></script>
</head><body>
…</body>
</html>
<script src=“myscript.js” … ></script>
![Page 22: Máxima potencia en el desarrollo de sitios web](https://reader038.vdocuments.mx/reader038/viewer/2022102823/548e24c8b47959cb708b479a/html5/thumbnails/22.jpg)
<html><head>
<title>Test</title></head><body>
………
</body>
</html>
<script src=“myscript.js” … ></script>
Optimizaciones - HTMLReferenciar o escribir JavaScript al final de la página.
![Page 23: Máxima potencia en el desarrollo de sitios web](https://reader038.vdocuments.mx/reader038/viewer/2022102823/548e24c8b47959cb708b479a/html5/thumbnails/23.jpg)
Optimizaciones - HTMLPero si lo haces, utiliza el tag defer (Solo IE)
<html><head>
<title>Test</title><script src=“myscript.js” … ></script>
</head><body>
…</body>
</html>
defer="defer">
![Page 24: Máxima potencia en el desarrollo de sitios web](https://reader038.vdocuments.mx/reader038/viewer/2022102823/548e24c8b47959cb708b479a/html5/thumbnails/24.jpg)
Puntos de Optimización
Netw
ork
ing
HTM
L
JavaS
cri
pt
Mars
halli
ng
AS
P.N
ET
Aja
x
Netw
ork
ing
CSS
![Page 25: Máxima potencia en el desarrollo de sitios web](https://reader038.vdocuments.mx/reader038/viewer/2022102823/548e24c8b47959cb708b479a/html5/thumbnails/25.jpg)
Optimizaciones - CSSEvitar Estilos Embebidos
<html><head>
<title>Test</title></head><body>
<style> <!--
.green { color:#009900;}
.red { color:#660000;} --></style>
… … …
</body>
</html>
<style> <!-- .verde { color:#009900;} .rojo { color:#660000;} --></style>
![Page 26: Máxima potencia en el desarrollo de sitios web](https://reader038.vdocuments.mx/reader038/viewer/2022102823/548e24c8b47959cb708b479a/html5/thumbnails/26.jpg)
Optimizaciones - CSSEvitar referenciar CSS al final de la página
<html><head>
<title>Test</title></head><body>
……
…</body>
</html>
<link rel="stylesheet" type="text/css" href=“mystyles.css" />
![Page 27: Máxima potencia en el desarrollo de sitios web](https://reader038.vdocuments.mx/reader038/viewer/2022102823/548e24c8b47959cb708b479a/html5/thumbnails/27.jpg)
Optimizaciones - CSS Referenciar el archivo de estilos en el head.
<html><head>
<title>Test</title>
</head><body>
………
</body>
</html>
<link rel="stylesheet" type="text/css"href="class.css" />
![Page 28: Máxima potencia en el desarrollo de sitios web](https://reader038.vdocuments.mx/reader038/viewer/2022102823/548e24c8b47959cb708b479a/html5/thumbnails/28.jpg)
Puntos de Optimización
Netw
ork
ing
HTM
L
JavaS
cri
pt
Mars
halli
ng
AS
P.N
ET
Aja
x
Netw
ork
ing
CSS
![Page 29: Máxima potencia en el desarrollo de sitios web](https://reader038.vdocuments.mx/reader038/viewer/2022102823/548e24c8b47959cb708b479a/html5/thumbnails/29.jpg)
Optimizaciones - JavascriptMinimizar la resolución de símbolos
Global
Local
Intermediate
Scopes
DOM
Instance
PrototypeChainCosto
var foo obj.foo
![Page 30: Máxima potencia en el desarrollo de sitios web](https://reader038.vdocuments.mx/reader038/viewer/2022102823/548e24c8b47959cb708b479a/html5/thumbnails/30.jpg)
Optimizaciones - Javascript Minimizar la Resolución de Símbolos
function TrabajarConVariableLocal(){
variableLocal = 5;return (variableLocal + 1 );
}
variableLocalvariableLocal
![Page 31: Máxima potencia en el desarrollo de sitios web](https://reader038.vdocuments.mx/reader038/viewer/2022102823/548e24c8b47959cb708b479a/html5/thumbnails/31.jpg)
function TrabajarConVariableLocal2(){
var variableLocal= 5;return (variableLocal+ 1 );
}
variableLocal
var variableLocal
Optimizaciones - Javascript Minimizar la Resolución de Símbolos
![Page 32: Máxima potencia en el desarrollo de sitios web](https://reader038.vdocuments.mx/reader038/viewer/2022102823/548e24c8b47959cb708b479a/html5/thumbnails/32.jpg)
Optimizaciones - Javascript Minimizar la Resolución de Símbolos: Funciones
function IterarSobreColeccionWork(){
var length = myCollection.length;
for(var i = 0; i < length; i++){
Work(myCollection[i]);}
}
Work
![Page 33: Máxima potencia en el desarrollo de sitios web](https://reader038.vdocuments.mx/reader038/viewer/2022102823/548e24c8b47959cb708b479a/html5/thumbnails/33.jpg)
Optimizaciones - Javascript Minimizar la Resolución de Símbolos: Funciones
function IterarSobreColeccionWork2(){
var funcWork = Work;var length = myCollection.length;
for(var i = 0; i < length; i++){
funcWork(myCollection[i]);}
}
var funcWork = Work;
funcWork
![Page 34: Máxima potencia en el desarrollo de sitios web](https://reader038.vdocuments.mx/reader038/viewer/2022102823/548e24c8b47959cb708b479a/html5/thumbnails/34.jpg)
<html><head>
<title>Test</title></head><body>
………<script src=“myscript.js” … ></script> <script src=“navigation.js” … ></script><script src=“jquery.js” … ></script><script src=“jquery.js” … ></script>
</body>
</html>
Optimizacion: JavasScriptRemover referencias y códigos repetidos
<script src=“jquery.js” … ></script><script src=“jquery.js” … ></script>
![Page 35: Máxima potencia en el desarrollo de sitios web](https://reader038.vdocuments.mx/reader038/viewer/2022102823/548e24c8b47959cb708b479a/html5/thumbnails/35.jpg)
<html><head>
<title>Test</title></head><body>
……<script src=“jquery.js” … ></script><script src=“prototype.js” … ></script><script src=“dojo.js” … ></script><script src=“animater.js” … ></script><script src=“extjs.js” … ></script><script src=“yahooui.js” … ></script><script src=“mochikit.js” … ></script><script src=“lightbox.js” … ></script><script src=“jslibs.js” … ></script><script src=“qooxdoo.js” … ></script>
Optimizaciones - JavascriptRemover Script Duplicados…Librerías
<script src=“jquery.js” … ></script><script src=“prototype.js” … ></script><script src=“dojo.js” … ></script><script src=“animater.js” … ></script><script src=“extjs.js” … ></script><script src=“yahooui.js” … ></script><script src=“mochikit.js” … ></script><script src=“lightbox.js” … ></script><script src=“jslibs.js” … ></script><script src=“qooxdoo.js” … ></script>
![Page 36: Máxima potencia en el desarrollo de sitios web](https://reader038.vdocuments.mx/reader038/viewer/2022102823/548e24c8b47959cb708b479a/html5/thumbnails/36.jpg)
Netw
ork
ing
HTM
L
JavaS
cri
pt
Mars
halli
ng
AS
P.N
ET
Aja
x
Puntos de Optimización
Netw
ork
ing
CSS
![Page 37: Máxima potencia en el desarrollo de sitios web](https://reader038.vdocuments.mx/reader038/viewer/2022102823/548e24c8b47959cb708b479a/html5/thumbnails/37.jpg)
Trident (MSHTML)
JScript Engine
Optimizaciones: MarshallingMinimizar la interacción con el DOM
DOM
![Page 38: Máxima potencia en el desarrollo de sitios web](https://reader038.vdocuments.mx/reader038/viewer/2022102823/548e24c8b47959cb708b479a/html5/thumbnails/38.jpg)
Optimizaciones: Marshalling Minimizar la interacción con el DOM
function CalcularSuma(){
// Obtener Valoresvar nume1 = document.body.all.nume1.value;
var nume2 = document.body.all.nume2.value;
// Calcular Resultadodocument.body.all.resultado.value = nume1 + nume2;
}
document.body.alldocument.body.all
document.body.all 9 Búsquedas en el DOM
![Page 39: Máxima potencia en el desarrollo de sitios web](https://reader038.vdocuments.mx/reader038/viewer/2022102823/548e24c8b47959cb708b479a/html5/thumbnails/39.jpg)
Optimizaciones: MarshallingMinimizar la interacción con el DOM
function CalcularSuma2(){
// Cachear la colección de elementosvar elms = document.body.all;
// Obtener los valoresvar nume1 = elms.nume1.value;var nume2 = elms.nume2.value;
// Calcular Resultadoelms.result.value = lSide + rSide;
}
var elms = document.body.all;
elmselms
elms
3 Búsquedas al Dom
![Page 40: Máxima potencia en el desarrollo de sitios web](https://reader038.vdocuments.mx/reader038/viewer/2022102823/548e24c8b47959cb708b479a/html5/thumbnails/40.jpg)
Netw
ork
ing
HTM
L
JavaS
cri
pt
Mars
halli
ng
AS
P.N
ET
Aja
x
Puntos de Optimización
Netw
ork
ing
CSS
![Page 41: Máxima potencia en el desarrollo de sitios web](https://reader038.vdocuments.mx/reader038/viewer/2022102823/548e24c8b47959cb708b479a/html5/thumbnails/41.jpg)
Optimización – ASP.NET AJAXOptimizaciones a Nivel de ScriptManager
ScriptReferenceProfiler + CompositeScriptScriptModeEnablePartialRerenderingLoadScriptBeforeUIEnableCDNToolScriptManager
![Page 42: Máxima potencia en el desarrollo de sitios web](https://reader038.vdocuments.mx/reader038/viewer/2022102823/548e24c8b47959cb708b479a/html5/thumbnails/42.jpg)
Optimizaciones: ASP.NET AjaxCompresión y Cache a nivel de Web.Config
<system.web.extensions> <scripting> <scriptResourceHandler enableCompression="true" enableCaching="true"/> </scripting> </system.web.extensions>
![Page 43: Máxima potencia en el desarrollo de sitios web](https://reader038.vdocuments.mx/reader038/viewer/2022102823/548e24c8b47959cb708b479a/html5/thumbnails/43.jpg)
Optimizaciones a nivel de ASP.NET AJAX
Gonzalo Pérez C.
MVP ASP/ASP.NET
http://www.chalalo.cl
Twitter: chalalo
DEMO
![Page 44: Máxima potencia en el desarrollo de sitios web](https://reader038.vdocuments.mx/reader038/viewer/2022102823/548e24c8b47959cb708b479a/html5/thumbnails/44.jpg)
1)Usar Compresión2)Usar Request 3)Condicionales4)Proveer Contenido Cacheable5)Minificar Javascript6)No escalar imágenes7)Usar Image Sprites8)Referenciar JScript al final9)Agregar defer Tag10)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
Resumen Optimización
![Page 45: Máxima potencia en el desarrollo de sitios web](https://reader038.vdocuments.mx/reader038/viewer/2022102823/548e24c8b47959cb708b479a/html5/thumbnails/45.jpg)
Caché extensible
Problema: Si hay mucho tráfico, la necesidad de memoria aumenta, y existe competencia por la memoria que es un recurso limitado.
Solución: La caché extensible permite configurar uno o más proveedores de caché ( asociados a mecanismo de almacenamiento).
Estrategia de implementación: (Demo)
Nuevas funcionalidades de ASP.NET 4
![Page 46: Máxima potencia en el desarrollo de sitios web](https://reader038.vdocuments.mx/reader038/viewer/2022102823/548e24c8b47959cb708b479a/html5/thumbnails/46.jpg)
Caché extensible
Juan Carlos Olamendy Turruellas
Máster en Informática Empresarial
Microsof MVP
Oracle ACE
DEMO
![Page 47: Máxima potencia en el desarrollo de sitios web](https://reader038.vdocuments.mx/reader038/viewer/2022102823/548e24c8b47959cb708b479a/html5/thumbnails/47.jpg)
Redirección de páginas
Problema: Al mover páginas u otros recursos, se usaba Response.Redirect emitiendo una respuesta HTTP 302 (temporary moved) para enviar al cliente a la nueva dirección.
Solución: ASP.NET 4 usa el nuevo método eResponse.RedirectPermanent("newlocation/page.aspx") para emitir respuestas HTTP 301 (permanent moved).
Response.Redirect
Response.RedirectPermanent("newlocation/page.aspx")
![Page 48: Máxima potencia en el desarrollo de sitios web](https://reader038.vdocuments.mx/reader038/viewer/2022102823/548e24c8b47959cb708b479a/html5/thumbnails/48.jpg)
Comprensión del Estado de Sesión
Problema: Se almacena una gran cantidad de objetos en el estado de sesión.
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.
Estrategía de implementación: <sessionState mode="SQLServer" sqlConnectionString="data source=dbserver;Initial Catalog=aspnetstate" allowCustomSqlDatabase="true" compressionEnabled="true"/>compressionEnabled="true"
![Page 49: Máxima potencia en el desarrollo de sitios web](https://reader038.vdocuments.mx/reader038/viewer/2022102823/548e24c8b47959cb708b479a/html5/thumbnails/49.jpg)
Uso de etiquetas Metas
Problema: Queremos generar dinámicamente meta-información sobre nuestra página. Una técnica Search Engine Optimization (SEO).
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.
Estrategia de implementación:
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="_01WebAppOutputCacheDemo._Default" Keywords="This is the default page" Description="This is the default page" %>
Keywords="This is the default page"Description="This is the default page"
![Page 50: Máxima potencia en el desarrollo de sitios web](https://reader038.vdocuments.mx/reader038/viewer/2022102823/548e24c8b47959cb708b479a/html5/thumbnails/50.jpg)
Mejor manejo del ViewState
Problema: Queremos mejor control del ViewState.
Solución: Uso de la nueva propiedad ViewStateMode en los controles. Posibles valores: Enabled, Disabled, Inherit.
Estrategia de implementación:
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="WebAppViewStateDemo._Default" ViewStateMode="Disabled" %>
ViewStateMode="Disabled"
![Page 51: Máxima potencia en el desarrollo de sitios web](https://reader038.vdocuments.mx/reader038/viewer/2022102823/548e24c8b47959cb708b479a/html5/thumbnails/51.jpg)
Enrutamiento
Problema: Queremos normalizar las URLs de manera descriptibles http://website/products/category/12. Otra técnica SEO.
Solución: Configurar patrones del enrutamiento para asociar URL con las páginas Web Forms físicas.
Estrategia de implementación: (Demo)
![Page 52: Máxima potencia en el desarrollo de sitios web](https://reader038.vdocuments.mx/reader038/viewer/2022102823/548e24c8b47959cb708b479a/html5/thumbnails/52.jpg)
Enrutamiento
Juan Carlos Olamendy Turruellas
Máster en Informática Empresarial
Microsof MVP
Oracle ACE
DEMO
![Page 53: Máxima potencia en el desarrollo de sitios web](https://reader038.vdocuments.mx/reader038/viewer/2022102823/548e24c8b47959cb708b479a/html5/thumbnails/53.jpg)
Uso de la propiedad ClientID
Problema: Es necesario conocer el identificador de los elementos HTML generados. El antiguo algoritmo hacía que esto no fuese predecibles.
Solución:
Alternativa 1.
Alternativa 2.
La nueva propiedad ClientIdMode de los controles Web. Posible valores AutoID, Static, Predictable y Inherit.
var btn = document.getElementById("<% =Button1.ClientID %>");var btn = $('<% =Button1.ClientID %>');
![Page 54: Máxima potencia en el desarrollo de sitios web](https://reader038.vdocuments.mx/reader038/viewer/2022102823/548e24c8b47959cb708b479a/html5/thumbnails/54.jpg)
Uso de la propiedad ClientID
Juan Carlos Olamendy Turruellas
Máster en Informática Empresarial
Microsof MVP
Oracle ACE
DEMO
![Page 55: Máxima potencia en el desarrollo de sitios web](https://reader038.vdocuments.mx/reader038/viewer/2022102823/548e24c8b47959cb708b479a/html5/thumbnails/55.jpg)
Control Chart
Problema: Se quiere visualizar datos de una manera comprensible. Ejemplo, un reporte de ventas.
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.
Estrategia de implementación: (Demo)
![Page 56: Máxima potencia en el desarrollo de sitios web](https://reader038.vdocuments.mx/reader038/viewer/2022102823/548e24c8b47959cb708b479a/html5/thumbnails/56.jpg)
Control Chart
Juan Carlos Olamendy Turruellas
Máster en Informática Empresarial
Microsof MVP
Oracle ACE
DEMO
![Page 57: Máxima potencia en el desarrollo de sitios web](https://reader038.vdocuments.mx/reader038/viewer/2022102823/548e24c8b47959cb708b479a/html5/thumbnails/57.jpg)
Soporte HTML Encoding automático
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).
Solución: Se introdujo la sentencia <%: expression %> generando <%= HttpUtility.HtmlEncode(expression) %>.
Si el texto está formateado, entonces se utiliza: <%: new HtmlString("<div>This is already encoded<
<%: expression %>
<%= HttpUtility.HtmlEncode(expression) %>
<%: new HtmlString("<div>This is already encoded</div>") %>
![Page 58: Máxima potencia en el desarrollo de sitios web](https://reader038.vdocuments.mx/reader038/viewer/2022102823/548e24c8b47959cb708b479a/html5/thumbnails/58.jpg)
HTML Helpers fuertemente tipiados
Problema: En ASP.NET MVC, se quiere tener HTML Helpers tipiados para detectar errores de compilación y mejor soporte de IntelliSense.
Solución: Se introdujeron los HTML Helpers fuertemente tipiados siguiendo la convención Html.HelperNameFor(,
pasando como parámetro una expresión lambda.
Estrategias de implementación:
<%= Html.TextBoxFor(model=>model.ProductName) %>
Html.HelperNameFor()
<%= Html.TextBoxFor(model=>model.ProductName) %>
![Page 59: Máxima potencia en el desarrollo de sitios web](https://reader038.vdocuments.mx/reader038/viewer/2022102823/548e24c8b47959cb708b479a/html5/thumbnails/59.jpg)
Mejoras en la validación
Problema: La validación de la entrada de los usuarios es un requerimiento de las aplicaciones empresariales.
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 Castle Validator o EntLib Validation.
Estrategia de implementación: (Demo)
![Page 60: Máxima potencia en el desarrollo de sitios web](https://reader038.vdocuments.mx/reader038/viewer/2022102823/548e24c8b47959cb708b479a/html5/thumbnails/60.jpg)
Mejoras en la validación
Juan Carlos Olamendy Turruellas
Máster en Informática Empresarial
Microsof MVP
Oracle ACE
DEMO
![Page 61: Máxima potencia en el desarrollo de sitios web](https://reader038.vdocuments.mx/reader038/viewer/2022102823/548e24c8b47959cb708b479a/html5/thumbnails/61.jpg)
¿Preguntas?
![Page 62: Máxima potencia en el desarrollo de sitios web](https://reader038.vdocuments.mx/reader038/viewer/2022102823/548e24c8b47959cb708b479a/html5/thumbnails/62.jpg)
62
Recursos
• Links Comunidades (Noticias, Eventos, Contenidos, Videos)
www.facebook.com/comunidadesmswww.twitter.com/comunidadesms
www.youtube.com/comunidadesms