You are on page 1of 62

Mejores Prcticas en el Desarrollo de Sitios Web & ASP.

NET Ajax

&
Nuevas funcionalidades de ASP.NET 4
Gonzalo Prez C. Web Developer Corobori MVP ASP/ASP.NET http://www.chalalo.cl Twitter:chalalo chalalo@hotmail.com Juan Carlos Olamendy Turruellas Arquitecto Principal, Exynko Mster en Informtica Empresarial Microsoft MVP Oracle ACE
johnx_olam@fastmail.fm

Agenda de Hoy
Optimizacin Web
Networking HTML CSS JavasCript Marshalling ASP.NET AJAX

Lo Nuevo de ASP.NET 4.0


Cach extensible Redireccin de pginas Compresin del Session State Uso de etiquetas Metas Mejor control del ViewState Enrutamiento en pginas Web Forms Uso de identificadores del cliente Control Chart Expresiones con soporte Html Encoding Mejoras en ASP.NET MVC 2
2

Optimizacin Web
En la mayora de las pginas web, menos del 10 - 20% del tiempo de carga de una pgina , corresponde a la descarga del documento html, existe entonces un 80-90% que podemos intentar reducir
- Steve Souders

Networking

HTML

CSS

Puntos de Optimizacin

JavaScript

Marshalling

ASP.NET Ajax

Optimizaciones - Networking

Response

Request
GET / HTTP/1.1
Accept: */* Accept-Language: en-us UA-CPU: x86 Accept-Encoding: gzip, deflate Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (compatible) Host: www.live.com

Response
HTTP/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 Content-Encoding: gzip

Habilitado desde el WebServer Revisar que y cuanto comprimir

Optimizaciones - Networking

Primer Request
GET /images/banner.jpg HTTP/1.1 Host: www.chalalo.cl

Primer Response
HTTP/1.1 200 OK Content-Type: image/jpeg Expires: Fri, 19 Sep 2010 00:00:00 GMT Expires: Fri, 19 Sep 2010 00:00:00 GMT

Segundo Request
GET /images/banner.jpg HTTP/1.1

No se necesita Response

Host: www.chalalo.cl

Optimizaciones - Networking

Response

Request
GET /images/banner.jpg HTTP/1.1
Host: www.microsoft.com If-Modified-Since: If-Modified-Since: Sun, 22 Jul 2010 21:30:46 GMT Sun, 22 Jul 2010 21:30:46 GMT

Response
HTTP/1.1 304 Not Modified
Content-Type: image/jpeg Last-Modified: Last-Modified: Sun, 22 Jul 2010 21:30:46 GMT Sun, 22 Jul 2010 21:30:46 GMT

Optimizaciones - Networking
JavaScript Original
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;

JavaScript Minimizado
e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromChar Code(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}')

Optimizaciones - Networking

<html> <head> <title>Test</title> </head> <body> x 400 <!-- logo.gif dimensiones 500 x 400 --> <img src=logo.gif" width="50" height="40" /> width="50" height="40" </body> </html>

Optimizaciones - Networking

<html> <head> <title>Test</title> </head> <body> <!-- logo.gif dimensiones:50 x x40 --> 50 40 <img src=logo.gif" width="50" height="40" /> width="50" height="40" </body> </html>

Optimizaciones - Networking

<script <script <script <script <script <script <script <script

src=miScript1.js ></script> src=miScript2.js ></script> src=miScript3.js ></script> src=animater.js ></script> src=extjs.js ></script> src=yahooui.js ></script> src=miScript4.js ></script> src=jQuery.js ></script>

Optimizaciones - Networking

<script <script <script <script <script <script <script <script

src=miScript1.js ></script> src=miScript2.js ></script> src=miScript3.js ></script> src=animater.js ></script> src=extjs.js ></script> src=yahooui.js ></script> src=miScript4.js ></script> src=jQuery.js ></script>

Optimizaciones: Networking

<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/jquery1.4.2.min.js ></script>

13

Optimizaciones - Networking

<html> <head> <title>Test</title> </head> <body> <img src="a.gif" />/>Item 1 <img src="a.gif" Item <img src="b.gif" />/>Item 2 <img src="b.gif" Item <img src=c.gif" />/>Item 3 <img src=c.gif" Item <img src=d.gif" />/>Item 4 <img src=d.gif" Item <img src=e.gif" />/>Item 5 <img src=e.gif" Item <img src=f.gif" />/>Item 6 <img src=f.gif" Item </body> </html>

1 2 3 4 5 6

Optimizaciones - Networking

Optimizaciones - Networking

<head> <title>Test</title> <style type="text/css"> .a, .b { width: 10; height: 10 } .a, .a, { width: 10; height: 10 "abc.gif" } .b .b { background-image: } .a, .a {{ background-position: 0 .b background-image: "abc.gif" } 0 } .a { background-position: 0 0 } .b { background-position: 0 } .b { background-position: 0 -10 -10 } </style> </head> <body> <div class="a"></div> <div class="a"></div> <div class="b"></div> <div class="b"></div> </body>

Item 1 Item 2

Internet Explorer 9 Network Tools

- Mitificacin de Script :Microsoft Ajax Minifier - Images Script

Gonzalo Prez C. MVP ASP/ASP.NET http://www.chalalo.cl Twitter: chalalo chalalo@hotmail.com

Networking

HTML

Puntos de Optimizacin

CSS

JavaScript

Marshalling

ASP.NET Ajax

Optimizaciones - HTML

<html> <head> <title>Test</title> <script type="text/javascript"> <script type="text/javascript"> <!-<!-function HolaMundo() { { function helloWorld() alert('Hola Mundo!') ; ; alert('Hello World!') }} // --> // --> </script> </script> </head> <body> </body> </html>

Optimizaciones - HTML

<html> <head> <title>Test</title> <script src=myscript.js ></script> <script src=myscript.js ></script> </head> <body> </body> </html>

Optimizaciones - HTML

<html> <head> <title>Test</title> </head> <body> <script src=myscript.js ></script> </body> </html>

Optimizaciones - HTML

<html> <head> <title>Test</title> <script src=myscript.js ></script> defer="defer"> </head> <body> </body> </html>

Networking

HTML

Puntos de Optimizacin

CSS

JavaScript

Marshalling

ASP.NET Ajax

Optimizaciones - CSS

<html> <head> <title>Test</title> </head> <body> <style> <!-.green { color:#009900;} .verde { color:#009900;} .red { { color:#660000;} .rojo color:#660000;} --> </style> </body> </html>

Optimizaciones - CSS

<html> <head> <title>Test</title> </head> <body> </body>


<link rel="stylesheet" type="text/css" href=mystyles.css" />

</html>

Optimizaciones - CSS

<html> <head> <title>Test</title> <link rel="stylesheet" type="text/css"href="class.cs </head> <body> </body> </html>

Networking

HTML

Puntos de Optimizacin

CSS

JavaScript

Marshalling

ASP.NET Ajax

Optimizaciones - Javascript

var foo
Global

obj.foo
DOM Prototype Chain Instance

Intermediate Scopes
Local

Costo

Optimizaciones - Javascript

function TrabajarConVariableLocal() { variableLocal variableLocal = 5; variableLocal return (variableLocal + 1 ); }

Optimizaciones - Javascript

function TrabajarConVariableLocal2() { variableLocal= var variableLocal 5; variableLocal return (variableLocal+ 1 ); }

Optimizaciones - Javascript

function IterarSobreColeccionWork() { var length = myCollection.length; for(var i = 0; i < length; i++) { Work(myCollection[i]); Work } }

Optimizaciones - Javascript

function IterarSobreColeccionWork2() { var funcWork = Work; var funcWork = Work; var length = myCollection.length; for(var i = 0; i < length; i++) { funcWork(myCollection[i]); funcWork } }

Optimizacion: JavasScript

<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> <script src=jquery.js ></script> <script src=jquery.js ></script> </body> </html>

Optimizaciones - Javascript

<html> <head> <title>Test</title> </head> <body> <script src=jquery.js ></script> <script src=jquery.js ></script> <script src=prototype.js ></script> <script src=prototype.js ></script> <script src=dojo.js ></script> <script src=dojo.js ></script> <script src=animater.js ></script> <script src=animater.js ></script> <script src=extjs.js ></script> <script src=extjs.js ></script> <script src=yahooui.js ></script> <script src=yahooui.js ></script> <script src=mochikit.js ></script> <script src=mochikit.js ></script> <script src=lightbox.js ></script> <script src=lightbox.js ></script> <script src=jslibs.js ></script> <script src=jslibs.js ></script>

Networking

HTML

Puntos de Optimizacin

CSS

JavaScript

Marshalling

ASP.NET Ajax

Optimizaciones: Marshalling

Trident (MSHTML)
DOM

JScript Engine

Optimizaciones: Marshalling

function CalcularSuma() { // Obtener Valores document.body.all var nume1 = document.body.all.nume1.value; var nume2 = document.body.all.nume2.value; document.body.all

// Calcular Resultado document.body.all.resultado.value = nume1 document.body.all + nume2;


}

Optimizaciones: Marshalling

function CalcularSuma2() { // Cachear la coleccin de elementos var elms = document.body.all; var elms = document.body.all; // Obtener los valores var nume1 = elms elms.nume1.value; var nume2 = elms elms.nume2.value; // Calcular Resultado elms.result.value = lSide + rSide; elms }

Networking

HTML

Puntos de Optimizacin

CSS

JavaScript

Marshalling

ASP.NET Ajax

Optimizacin ASP.NET AJAX


ScriptReferenceProfiler + CompositeScript ScriptMode EnablePartialRerendering LoadScriptBeforeUI EnableCDN ToolScriptManager

Optimizaciones: ASP.NET Ajax

<system.web.extensions> <scripting> <scriptResourceHandler enableCompression="true" enableCaching="true"/> </scripting> </system.web.extensions>

Optimizaciones a nivel de ASP.NET AJAX

Gonzalo Prez C. MVP ASP/ASP.NET http://www.chalalo.cl Twitter: chalalo chalalo@hotmail.com

Resumen Optimizacin
1)Usar Compresin 2)Usar Request 3)Condicionales 4)Proveer Contenido Cacheable 5)Minificar Javascript 6)No escalar imgenes 7)Usar Image Sprites 8)Referenciar JScript al final 9)Agregar defer Tag 10)Referenciar Hojas de Estilo arriba 11)Disminuir las bsquedas en el Dom 12)Cachear los referencias a funciones 13)Remover Script repetidos 14)Remover funciones repetidas 15)Utilizar CDN 16)Utilizar Mejoras de ScriptManager

Nuevas funcionalidades de ASP.NET 4 Cach extensible


Problema: Si hay mucho trfico, la necesidad de memoria aumenta, y existe competencia por la memoria que es un recurso limitado. Solucin: La cach extensible permite configurar uno o ms proveedores de cach ( asociados a mecanismo de almacenamiento).

Estrategia de implementacin: (Demo)

Cach extensible

Juan Carlos Olamendy Turruellas Mster en Informtica Empresarial Microsof MVP Oracle ACE johnx_olam@fastmail.fm

Redireccin de pginas

Problema: Al mover pginas u otros recursos, se usaba Response.Redirect emitiendo una respuesta HTTP 302 Response.Redirect (temporary moved) para enviar al cliente a la nueva direccin. Solucin: ASP.NET 4 usa el nuevo mtodo eResponse.RedirectPermanent("newlocation/page.aspx") Response.RedirectPermanent("newlocation/page.aspx") para emitir respuestas HTTP 301 (permanent moved).

Comprensin del Estado de Sesin


Problema: Se almacena una gran cantidad de objetos en el estado de sesin. Solucin: ASP.NET 4 incorpora la opcin de compresin del estado de sesin. Los datos se comprimen (descomprimidos) usando la clase System.IO.Compression.GZipStream. Estratega de implementacin: <sessionState mode="SQLServer" sqlConnectionString="data source=dbserver;Initial Catalog=aspnetstate" allowCustomSqlDatabase="true" compressionEnabled="true"/> compressionEnabled="true"

Uso de etiquetas Metas


Problema: Queremos generar dinmicamente meta-informacin sobre nuestra pgina. Una tcnica Search Engine Optimization (SEO). Solucin: ASP.NET 4 incluye las propiedades MetaKeywords y MetaDescription a la clase Page. Adems se incluyen los atributos Keywords y Description en la directiva @Page. Estrategia de implementacin: <%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="_01WebAppOutputCacheDemo._Default" Keywords="This the default page" Keywords="This is is the default page" Description="This is thepage" Description="This is the default default page" %>

Mejor manejo del ViewState

Problema: Queremos mejor control del ViewState. Solucin: Uso de la nueva propiedad ViewStateMode en los controles. Posibles valores: Enabled, Disabled, Inherit. Estrategia de implementacin: <%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebAppViewStateDemo._Default" ViewStateMode="Disabled" ViewStateMode="Disabled" %>

Enrutamiento

Problema: Queremos normalizar las URLs de manera descriptibles http://website/products/category/12. Otra tcnica SEO. Solucin: Configurar patrones del enrutamiento para asociar URL con las pginas Web Forms fsicas. Estrategia de implementacin: (Demo)

Enrutamiento

Juan Carlos Olamendy Turruellas Mster en Informtica Empresarial Microsof MVP Oracle ACE johnx_olam@fastmail.fm

Uso de la propiedad ClientID

Problema: Es necesario conocer el identificador de los elementos HTML generados. El antiguo algoritmo haca que esto no fuese predecibles. Solucin: Alternativa 1.
var btn = document.getElementById("<% =Button1.ClientID %>"); var btn = $('<% =Button1.ClientID %>');

Alternativa 2. La nueva propiedad ClientIdMode de los controles Web. Posible valores AutoID, Static, Predictable y Inherit.

Uso de la propiedad ClientID

Juan Carlos Olamendy Turruellas Mster en Informtica Empresarial Microsof MVP Oracle ACE johnx_olam@fastmail.fm

Control Chart

Problema: Se quiere visualizar datos de una manera comprensible. Ejemplo, un reporte de ventas. Solucin: Se introdujo el nuevo control Chart con varias opciones de visualizacin. En tiempo de ejecucin se genera una imagen referenciado por el usuario. Estrategia de implementacin: (Demo)

Control Chart

Juan Carlos Olamendy Turruellas Mster en Informtica Empresarial Microsof MVP Oracle ACE johnx_olam@fastmail.fm

Soporte HTML Encoding automtico

Problema: El desarrollo en ASP.NET est lleno de sentencias <%= expression %> para enviar texto a la salida. Si no se utiliza el mtodo HttpUtility.HtmlEncode, se puede inyectar cdigo JavaScript o HTML. Ataque conocido como XSS (Cross Site Scripting).
<%: expression Solucin: Se introdujo la sentencia <%: expression %> %> generando <%= HttpUtility.HtmlEncode(expression) %>. <%= HttpUtility.HtmlEncode(expression) %> Si el texto est formateado, entonces se utiliza:
<%: new HtmlString("<div>This is already encoded< <%: new HtmlString("<div>This is already encoded</div>") %>

HTML Helpers fuertemente tipiados

Problema: En ASP.NET MVC, se quiere tener HTML Helpers tipiados para detectar errores de compilacin y mejor soporte de IntelliSense. Solucin: Se introdujeron los HTML Helpers fuertemente Html.HelperNameFor() tipiados siguiendo la convencin Html.HelperNameFor(, pasando como parmetro una expresin lambda.

Estrategias de implementacin: <%= Html.TextBoxFor(model=>model.ProductName) %> <%= Html.TextBoxFor(model=>model.ProductName) %>

Mejoras en la validacin

Problema: La validacin de la entrada de los usuarios es un requerimiento de las aplicaciones empresariales. Solucin: La infraestructura de validacin en ASP.NET MVC 2 est diseada para tomar ventajas de la validacin mediante DataAnnotations, as como integrarse fcilmente con otros marcos de trabajo como Castle Validator o EntLib Validation. Estrategia de implementacin: (Demo)

Mejoras en la validacin

Juan Carlos Olamendy Turruellas Mster en Informtica Empresarial Microsof MVP Oracle ACE johnx_olam@fastmail.fm

Recursos
Links Comunidades (Noticias, Eventos, Contenidos, Videos) www.facebook.com/comunidadesms www.twitter.com/comunidadesms www.youtube.com/comunidadesms

62

You might also like