máxima potencia en el desarrollo de sitios web

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]

http://www.chalalo.cl/

mailto:johnx_olam@

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

«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

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

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

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

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

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

Optimizaciones - NetworkingNunca redimesionar las imágenes solo en escala.

<html><head>

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

…<img src=“logo.gif" width="50" height="40" />…

</body>

</html>

width="50" height="40"500 x 400

Optimizaciones - Networking Nunca redimesionar las imágenes solo en escala.

<html><head>


…<img src=“logo.gif" width="50" height="40" />…

</body>

</html>

width="50" height="40"

50 x 40

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>

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>

Optimizaciones - NetworkingUsar Image Sprites

<html><head>


…<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

Optimizaciones - Networking Usar Image Sprites

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 }

Internet Explorer 9 Network ToolsMedir las mejoras de rendimiento a nivel de Networking

- Mitificación de Script :Microsoft Ajax Minifier- Images Script

Gonzalo Pérez C.

MVP ASP/ASP.NET

http://www.chalalo.cl

Twitter: chalalo

[email protected]

DEMO




mailto:[email protected]

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

Optimizaciones - HTMLEvitar JavaScript embebido

<html><head>

<title>Test</title><script type="text/javascript"> 

</script></head><body>

…</body>

</html>

<script type="text/javascript"> </script>

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>

<html><head>


………

</body>

</html>

<script src=“myscript.js” … ></script>

Optimizaciones - HTMLReferenciar o escribir JavaScript al final de la página.

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">


Netw

ork

ing

HTM

L

JavaS

cri

pt

Mars

halli

ng

AS

P.N

ET

Aja

x

Netw

ork

ing

CSS

Optimizaciones - CSSEvitar Estilos Embebidos

<html><head>


<style> </style>

… … …

</body>

</html>

<style> </style>

Optimizaciones - CSSEvitar referenciar CSS al final de la página

<html><head>


……

…</body>

</html>

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

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" />


Netw

ork

ing

HTM

L

JavaS

cri

pt

Mars

halli

ng

AS

P.N

ET

Aja

x

Netw

ork

ing

CSS

Optimizaciones - JavascriptMinimizar la resolución de símbolos

Global

Local

Intermediate

Scopes

DOM

Instance

PrototypeChainCosto

var foo obj.foo

Optimizaciones - Javascript Minimizar la Resolución de Símbolos

function TrabajarConVariableLocal(){

variableLocal = 5;return (variableLocal + 1 );

}

variableLocalvariableLocal

function TrabajarConVariableLocal2(){

var variableLocal= 5;return (variableLocal+ 1 );

}

variableLocal

var variableLocal

Optimizaciones - Javascript Minimizar la Resolución de Símbolos

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

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

<html><head>


………<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>

<html><head>


……<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>

Netw

ork

ing

HTM

L

JavaS

cri

pt

Mars

halli

ng

AS

P.N

ET

Aja

x


Netw

ork

ing

CSS

Trident (MSHTML)

JScript Engine

Optimizaciones: MarshallingMinimizar la interacción con el DOM

DOM

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

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

Netw

ork

ing

HTM

L

JavaS

cri

pt

Mars

halli

ng

AS

P.N

ET

Aja

x


Netw

ork

ing

CSS

Optimización – ASP.NET AJAXOptimizaciones a Nivel de ScriptManager

ScriptReferenceProfiler + CompositeScriptScriptModeEnablePartialRerenderingLoadScriptBeforeUIEnableCDNToolScriptManager

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>

Optimizaciones a nivel de ASP.NET AJAX

Gonzalo Pérez C.

MVP ASP/ASP.NET

http://www.chalalo.cl

Twitter: chalalo

[email protected]

DEMO




mailto:[email protected]

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

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

Caché extensible



Microsof MVP

Oracle ACE

[email protected]

DEMO

mailto:johnx_olam@

mailto:johnx_olam@

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")

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"

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"

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"

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.


http://website/products/category/12

Enrutamiento



Microsof MVP

Oracle ACE

[email protected]

DEMO

mailto:johnx_olam@

mailto:johnx_olam@

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 %>');

Uso de la propiedad ClientID



Microsof MVP

Oracle ACE

[email protected]

DEMO

mailto:johnx_olam@

mailto:johnx_olam@

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.


Control Chart



Microsof MVP

Oracle ACE

[email protected]

DEMO

mailto:johnx_olam@

mailto:johnx_olam@

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>") %>

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) %>

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.


Mejoras en la validación



Microsof MVP

Oracle ACE

[email protected]

DEMO

mailto:johnx_olam@

mailto:johnx_olam@

¿Preguntas?

62

Recursos

• Links Comunidades (Noticias, Eventos, Contenidos, Videos)

www.facebook.com/comunidadesmswww.twitter.com/comunidadesms

www.youtube.com/comunidadesms

http://www.facebook.com/comunidadesms

http://www.twitter.com/comunidadesms

http://www.youtube.com/comunidadesms

máxima potencia en el desarrollo de sitios web

Technology