Alumno: Unidad3. Actividadindividual1.

Asignatura:

JuanAlfaroMrquez Analizarconunaltoniveldedetalle,lautilizacindelas distintastecnologasdelladoclientede"Amazon.es" ProgramacinWeb

Enunciado
Analizar el rol de las tecnologas del lado cliente en un sitio de comercio electrnico con un elevado nivel de trfico, como puedean ser Amazon, Pixmania, Redcoon, Bubok, o incluso clubes privados de venta como Privalia, BuyVip, o sitios de cuponeo como Groupon. Comprender con profundidad las tecnologas del lado cliente, as como las implicaciones en la interconexin de las mismas. Analizar con un alto nivel de detalle, la utilizacin de las distintas tecnologas del lado cliente, haciendo especial nfasis en la interconexin de las mismas, y el rol que ejerce cada una de ellas en el sitio web elegido. En mi caso el sitio a analizar es:

www.amazon.es

Introduccin
Amazon.com, Inc. (NASDAQ: AMZN) es una compaa estadounidense de comercio electrnico con sede en Seattle, Estado de Washington. Su lema es and you're done (Traducido al espaol: y listo). Fue una de las primeras grandes compaas en vender bienes a travs de Internet. Amazon tambin posee Alexa Internet, a9.com, Shopbop, Kongregate, Internet Movie Database (IMDb), Zappos.com y DPreview.com. Amazon ha establecido sitios web separados para Canad, el Reino Unido, Alemania, Austria, Francia, China, Japn, Italia y Espaa para poder ofrecer los productos de esos pases. En la actualidad est totalmente diversificada en diferentes lneas de productos, ofreciendo DVD, CD de msica, software, videojuegos, electrnica, ropa, muebles, comida, libros, etc.
Wikipedia

Funcionamiento bsico de Amazon Amazon.es vende muchas cosas. La relacin directa de venta por parte de Amazon a sus clientes realmente no es muy diferente de otras compaas de ventas en la red, excepto por su lnea de productos. Se pueden encontrar cosas tan diferentes como ropa, joyas, comida, accesorios deportivos, libros, ordenadores, juguetes, y prcticamente cualquier cosa que quieras comprar, como en un centro comercial. Lo que hace que Amazon sea especial son los detalles y la innovacin continua en su forma de interactuar con la gente. Aparte de su tremenda lnea de productos, la compaa intenta por todos los medios personalizar la experiencia de compra del cliente. Cuando se llega a la pgina de Amazon, no solo encuentras ofertas especiales y una amplia gama de productos, sino algunas recomendaciones que van dirigidas expresamente al que les visita, adapta su contenido al perfil de visitante. Una vez que uno se registra en Amazon con su nombre y algunos datos, le visitante ser tratado de forma personal como si tuviera su propio vendedor asignado.

ProgramacinWebU3.Anlisisdelportal"amazon.es"

Las tcnicas de marketing usadas por Amazon se basan en la personalizacin de la experiencia del visitante, es quiz el mejor ejemplo del acercamiento que tiene la compaa a sus ventas. El seguimiento de clientes es uno de los puntos fuertes de Amazon. Si se permite que Amazon aloje una cookie en el ordenador, se reciben toda clase de consejos, como por ejemplo recomendaciones basadas en anteriores compras y listas de revisiones y guas de usuarios que ya han comprado el producto que andas buscando. Otra caracterstica que pone a Amazon en otros niveles, es la estrategia multi-nivel que realiza. Amazon permite vender casi cualquier cosa a cualquier persona dentro de su plataforma. Como se ha comentado, se empez vendiendo libros en pequeas cantidades que se fueron incrementando con el paso del tiempo, pero a partir del ao 2000 se pueden encontrar terceras compaas vendiendo productos, como individuos, pequeas negocios, empresas al por menor.

ProgramacinWebU3.Anlisisdelportal"amazon.es"

Descripcin de la estructura de la pgina.

Portal Web
Productos clasificados y zona de bsqueda. Identificacin de clientes y cesta de compras.

rea de Men principal

Producto destacado

Distintas secciones de productos que se adaptan a nuestro y estructurados por estrategia de marketing. Productos ms vendidos.

Previsualizacin Mvil

ProgramacinWebU3.Anlisisdelportal"amazon.es"

Tecnologas utilizadas.
La pgina http://www.amazon.es emplea una CODIFICACIN de caracteres "ISO-8859-1" dentro de la etiqueta meta de HTML, y que se encuentra en la cabecera.
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

HTML como lenguaje de marcado, utilizando como versin la 4.0.

HTML, siglas de HyperText Markup Language (lenguaje de marcado de hipertexto), es el lenguaje de marcado predominante para la elaboracin de pginas web. Es usado para describir la estructura y el contenido en forma de texto, as como para complementar el texto con objetos tales como imgenes. El HTML se escribe en forma de etiquetas, rodeadas por corchetes angulares (<,>). HTML tambin puede describir, hasta un cierto punto, la apariencia de un documento, y puede incluir un script (por ejemplo JavaScript), el cual puede afectar el comportamiento de navegadores web y otros procesadores de HTML.1 HTML tambin es usado para referirse al contenido del tipo de MIME text/html o todava ms ampliamente como un trmino genrico para el HTML, ya sea en forma descendida del XML (como XHTML 1.0 y posteriores) o en forma descendida directamente de SGML (como HTML 4.01 y anteriores). Wikipedia

JAVASCRIPT
JavaScript es un lenguaje de programacin interpretado, dialecto del estndar ECMAScript. Se define como orientado a objetos,3 basado en prototipos, imperativo, dbilmente tipado y dinmico. Se utiliza principalmente en su forma del lado del cliente (client-side), implementado como parte de un navegador web permitiendo mejoras en la interfaz de usuario y pginas web dinmicas, en bases de datos locales al navegador. Su uso en aplicaciones externas a la web, por ejemplo en documentos PDF, aplicaciones de escritorio (mayoritariamente widgets) es tambin significativo. JavaScript se dise con una sintaxis similar al C, aunque adopta nombres y convenciones del lenguaje de programacin Java. Sin embargo Java y JavaScript no estn relacionados y tienen semnticas y propsitos diferentes. Todos los navegadores modernos interpretan el cdigo JavaScript integrado en las pginas web. Para interactuar con una pgina web se provee al lenguaje JavaScript de una implementacin del Document Object Model (DOM). Tradicionalmente se vena utilizando en pginas web HTML para realizar operaciones y nicamente en el marco de la aplicacin cliente, sin acceso a funciones del servidor. JavaScript se interpreta en el agente de usuario, al mismo tiempo que las sentencias van descargndose junto con el cdigo HTML. Wikipedia

Utiliza adems "JQuery" que es una biblioteca JavaScript que simplifica el recorrido documento HTML, manejo de eventos, animacin y la interaccin de Ajax.

CSS
El nombre hojas de estilo en cascada viene del ingls Cascading Style Sheets, del que toma sus siglas. CSS es un lenguaje usado para definir la presentacin de un documento estructurado escrito en HTML o XML2 (y por extensin en XHTML). El W3C (World Wide Web Consortium) es el encargado de formular la especificacin de las hojas de estilo que servirn de estndar para los agentes de usuario o navegadores. La idea que se encuentra detrs del desarrollo de CSS es separar la estructura de un documento de su presentacin.

ProgramacinWebU3.Anlisisdelportal"amazon.es"

La informacin de estilo puede ser adjuntada como un documento separado o en el mismo documento HTML. En este ltimo caso podran definirse estilos generales en la cabecera del documento o en cada etiqueta particular mediante el atributo "<style>". Wikipedia

AJAX
Ajax, acrnimo de Asynchronous JavaScript And XML (JavaScript asncrono y XML), es una tcnica de desarrollo web para crear aplicaciones interactivas o RIA (Rich Internet Applications). Estas aplicaciones se ejecutan en el cliente, es decir, en el navegador de los usuarios mientras se mantiene la comunicacin asncrona con el servidor en segundo plano. De esta forma es posible realizar cambios sobre las pginas sin necesidad de recargarlas, lo que significa aumentar la interactividad, velocidad y usabilidad en las aplicaciones. Ajax es una tecnologa asncrona, en el sentido de que los datos adicionales se solicitan al servidor y se cargan en segundo plano sin interferir con la visualizacin ni el comportamiento de la pgina. JavaScript es el lenguaje interpretado (scripting language) en el que normalmente se efectan las funciones de llamada de Ajax mientras que el acceso a los datos se realiza mediante XMLHttpRequest, objeto disponible en los navegadores actuales. En cualquier caso, no es necesario que el contenido asncrono est formateado en XML. Ajax es una tcnica vlida para mltiples plataformas y utilizable en muchos sistemas operativos y navegadores dado que est basado en estndares abiertos como JavaScript y Document Object Model (DOM). Wikipedia

FICHEROS DE IMGENES JPEG (Joint Photographic Experts Group) es un mtodo de compresin con prdida adecuado para almacenar imgenes fotogrficas. JPEG GIF (Graphics Interchange Format) es un formato de compresin de imgenes sin prdida, introducido originalmente por CompuServe y adecuada a los grficos, logotipos tiendas y animaciones simples. GIF PNG (Portable Network Graphics) es un formato de compresin de imgenes sin prdida, adecuado para almacenar los grficos con reas de color uniforme, y originalmente se present como un pas libre, de cdigo abierto sucesor del GIF. Papa Nueva Guinea FLASH No utiliza esta tecnologa, al menos en la pgina principal. Tambin cabe destacar que una vez identificado el usuario, el portal realiza toda la interaccin mediante tecnologa segura a travs "https". HTTPS
El sistema HTTPS utiliza un cifrado basado en SSL/TLS para crear un canal cifrado (cuyo nivel de cifrado depende del servidor remoto y del navegador utilizado por el cliente) ms apropiado para el trfico de informacin sensible que el protocolo HTTP. De este modo se consigue que la informacin sensible (usuario y claves de paso normalmente) no pueda ser usada por un atacante que haya conseguido interceptar la transferencia de datos de la conexin, ya que lo nico que obtendr ser un flujo de datos cifrados que le resultar imposible de descifrar. El puerto estndar para este protocolo es el 443. Wikipedia

ProgramacinWebU3.Anlisisdelportal"amazon.es"

Algunos detalles de cdigo de las tecnologas utilizadas.

El anlisis del portal lo he hecho a travs las herramientas que tienen el navegador "Chrome", tanto la opcin de ver el cdigo fuente de la pgina, como la herramienta para desarrolladores que trae entre sus opciones:

Dada la amplitud de cdigo y sobre todo lo repetitivo, me voy a centrar en algunos elementos de la pgina principal. Ver con detalle la utilizacin de las tecnologas anteriormente descritas. Aunque al principio de la pgina hace referencia a funciones de Javascript, voy a empezar por la informacin de cabecera, y que sirve para identificar la codificacin de la pgina, palabras que utilizar los buscadores para indexar la pgina, ttulos, etc. Mediante la etiqueta <meta> de HTML se define y delimita esta informacin:
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <meta name="description" content="Descubre nuestra tienda: libros, fotografa, lectores MP3, msica, DVD, videojuegos, informtica, TV y mucho ms. Amplia variedad a precios bajos."/> <meta name="keywords" content="Amazon, libros, DVD, videojuegos, TV, software, ordenador"/> <title>Amazon.es: libros, cine, electrnica, videojuegos y ms.</title>

Para estructurar la pgina correctamente, utiliza la etiqueta html <div>. <div> se utiliza para la divisin de la pgina, normalmente se recomienda utilizar junto con las etiquetas de css. Es recomendable utilizarla en vez de <table>, aunque la pgina tambin lo hace, porque adems de tener algunos problemas de accesibilidad tiene el mismo potencial para alinear contenido. A continuacin pongo 2 ejemplos, pero son innumerables los distintos sitios de la pgina donde se utiliza:
<div id="navSwmMainHdgDiv" style="padding-bottom: 3px;"> <a id="navSwmMainHeading" href="/gp/redirect.html/ref=nav_swm_kindle?location=http://www.amazon.es/dp/B0051QVF7A&token=0F2C5755FA012A4FE7 BB12703202BBAD28BA2DF6&pf_rd_p=276362167&pf_rd_s=nav-sitewide-msg&pf_rd_t=4201&pf_rd_i=navbar4201&pf_rd_m=A1AT7YVPFBWXBL&pf_rd_r=1CZTCW6ADT5FFW2TYEPQ"> El nuevo Kindle por slo 99 </a> </div> <div id="navbar" style="padding:0;" class="navbar"> <table border="0" cellspacing="0" cellpadding="0" width="100%"> <tr> <td rowspan="2" align='left' width="180" valign="bottom"> <a id="navLogo" class="gateway" href="/ref=gno_logo"> <span id="navLogoPrimary" class="navSprite"><span>amazon.es</span></span> <span id="navLogoSecondary" class="navSprite nonPrime"></span> </a> </td> <td width="100%" align='left' height="26">

ProgramacinWebU3.Anlisisdelportal"amazon.es"

<table width="100%" id="welcomeRowTable" cellspacing="0" cellpadding="0" border="0" ><tr> <td align="left" valign="bottom" class="navGreetingBkg"> <div id="navidWelcomeMsg" style="white-space: normal;"> <span class="navGreeting">Hola.</span> <span class="navMessage" style="white-space: nowrap;">Identifcate para recibir <a href="https://www.amazon.es/ap/signin?_encoding=UTF8&openid.assoc_handle=esflex&openid.return_to=https%3A%2F%2F www.amazon.es%2Fgp%2Fyourstore%2Fhome%3Fie%3DUTF8%26ref_%3Dgno_signin&openid.mode=checkid_setup&openi d.ns=http%3A%2F%2Fspecs.openid.net%2Fauth%2F2.0&openid.claimed_id=http%3A%2F%2Fspecs.openid.net%2Fauth%2 F2.0%2Fidentifier_select&openid.pape.max_auth_age=0&openid.ns.pape=http%3A%2F%2Fspecs.openid.net%2Fextensions %2Fpape%2F1.0&openid.identity=http%3A%2F%2Fspecs.openid.net%2Fauth%2F2.0%2Fidentifier_select" rel="nofollow">recomendaciones personalizadas</a>.</span> <span class="navMessage" style="white-space: nowrap;">Eres un cliente nuevo? <a href="https://www.amazon.es/ap/signin?_encoding=UTF8&openid.assoc_handle=esflex&openid.return_to=https%3A%2F%2F www.amazon.es%2Fgp%2Fyourstore%2Fhome%3Fie%3DUTF8%26ref_%3Dgno_newcust&openid.mode=checkid_setup&op enid.ns=http%3A%2F%2Fspecs.openid.net%2Fauth%2F2.0&openid.claimed_id=http%3A%2F%2Fspecs.openid.net%2Fauth %2F2.0%2Fidentifier_select&openid.pape.max_auth_age=0&openid.ns.pape=http%3A%2F%2Fspecs.openid.net%2Fextensio ns%2Fpape%2F1.0&openid.identity=http%3A%2F%2Fspecs.openid.net%2Fauth%2F2.0%2Fidentifier_select" rel="nofollow">Empieza aqu</a>.</span> </div>

La etiqueta de html <style> nos permite definir formatos de texto, tablas, etc. a continuacin voy a poner un ejemplo de utilizacin en texto, pero se puede definir bloques muchos ms complejos incluso incluyendo referencia a funciones de javascript para facilitar el dinamismo en la definicin de estilos. La utilizacin de <style> tambin se puede vincular a un archivo externo utilizando la etiqueta <link>.
<style> .tcg h2, .tcg h2 a, .tcg h2 a:active, .tcg h2 a:hover, .tcg h2 a:visited{ font-family:Arial,Verdana,Helvetica,sans-serif; } .tcg1 .hdlnblk h2, .tcg2 .hdlnblk h2 { font-size:37px; line-height:1em; } .tcg1 .subhed { font-size:23px; } .tcg4 .hdlnblk h2 { font-size:29px; } .tcg4 .subhed { font-size:1.6em; } </style>

<link type='text/css' href='http://z-ecx.images-amazon.com/images/G/01/browser-scripts/es-site-wide-1.2.6/site-wide8945140482._V1_.css' rel='stylesheet'> <link type='text/css' href='http://z-ecx.imagesamazon.com/images/G/01/nav2/gamma/websiteGridCSS/websiteGridCSS-websiteGridCSS-10698._V1_.css' rel='stylesheet'> <link type='text/css' href='http://z-ecx.images-amazon.com/images/G/01/s9-campaigns/s9-widget._V147960110_.css' rel='stylesheet'> <style type="text/css"> <style type="text/css"><!-.navSprite, .navSaJs li.navSaMenuItem { background-image: url(http://g-ecx.images-amazon.com/images/G/30/gno/images/orangeBlue/navPackedSprites-ES03._V156600418_.png); } .navSpritePopoverH { background-image: url(http://g-ecx.images-amazon.com/images/G/30/gno/popover/sprites-h2._V169814323_.gif); }

ProgramacinWebU3.Anlisisdelportal"amazon.es"

.navSpritePopoverV { background-image: url(http://g-ecx.images-amazon.com/images/G/30/gno/popover/sprites-v2._V169814322_.gif); } ...... .nav_popover .body .l { background: url(http://g-ecx.images-amazon.com/images/G/30/gno/popover/sprites-v2._V169814322_.gif) 0px 0px repeat-y; } .nav_popover .body .r { background: url(http://g-ecx.images-amazon.com/images/G/30/gno/popover/sprites-v2._V169814322_.gif) -7px 0px repeat-y; } #navCartButton a.count { background: url(http://g-ecx.images-amazon.com/images/G/30/x-locale/common/transparent-pixel._V164978876_.gif) 0px 0px no-repeat; } --></style>

La utilizacin de la etiqueta <script> permite la definicin de funciones de javascript en la pgina, en este caso su uso es bastante amplio en todo el cdigo. <script>: incrusta un script en una web, o se llama a uno mediante src="url del script". Se recomienda incluir el tipo MIME en el atributo type, en el caso de JavaScript text/javascript. Desde el inicio del cdigo donde se definen parmetros iniciales y funciones que van a servir para el resto del portal:
<script type="text/javascript">var ue_t0=ue_t0||+new Date();</script> <script type='text/javascript'> var ue_id='1CZTCW6ADT5FFW2TYEPQ', ue_sid='276-6577202-8734437', ue_mid='A1RKKUPIHCS9HS', ue_url='/uedata/276-6577202-8734437/NoPageType', ue_furl='fls-eu.amazon.com', ue_pr=0, ue_navtiming=0, ue_rnt=1, ue_tm=0, ue_wn=0, ue_tags=0; var ueinit=(ueinit||0)+1;var ue={t0:ue_t0,id:ue_id,url:ue_url,a:"",b:"",e:"",ec:0,h:{},r:{ld:0,oe:0,ul:0},s:1,t:{},sc:{},iel:[]};if(window.ue_tags&&window.ue_tags= =1){ue.tagC=function(){var a=[];return function(b){if(b){a.push(b)}return a.slice(0)}};ue.tag=ue.tagC()}function uet(c,e,g){var f=(new Date()).getTime();var a=!e&&typeof g!="undefined";if(a){return}if(c){var d=e?ues("t",e)||ues("t",e,{}):ue.t;d[c]=f;for(var b in g){ues(b,e,g[b])}}return f}function ues(b,c,d){var e,a;if(b){e=a=ue;if(c&&c!=e.id){a=e.sc[c];if(!a){a={};d?(e.sc[c]=a):a}}e=d?(a[b]=d):a[b]}return e}function ueh(e,f,d,b,a){var c="on"+d;var g=f[c];if(typeof(g)=="function"){if(e){ue.h[e]=g}}else{g=function(){}}f[c]=a?function(h){b(h);g(h)}:function(h){g(h);b(h)};f[c].isUeh= 1}function uex(i,e,h){function d(G,E){var C=[G],w=0,D={};if(E){C.push("m=1");D[E]=1}else{D=ue.sc}var u;var z;for(var v in D){var x=ues("wb",v),B=ues("t",v)||{},A=ues("t0",v)||ue.t0;if(E||x==2){var F=x?w++:"";C.push("sc"+F+"="+v);for(var y in B){if(y.length<=3&&B[y]){C.push(y+F+"="+(B[y]A))}}C.push("t"+F+"="+B[i]);if(ues("ctb",v)||ues("wb",v)){u=1}x==2&&(z=1)&&delete ue.sc[v]}}if(!f&&u){C.push("ctb=1")}if(!E){return z?C.join("&"):""}return C.join("&")}function k(v,u){if(v==""){return}var w=new Image();if(ue.b){w.onload=function(){if(ue.b==""){return}var x=ue.b;ue.b="";k(x)}}ue.iel.push(w);w.src=v;if(window.ue_err&&!ue_err.ts){ue_err.startTimer()}}function q(u){if(!ue.collected){var w=u.timing;if(w){ue.t.na_=w.navigationStart;ue.t.ul_=w.unloadEventStart;ue.t._ul=w.unloadEventEnd;ue.t.rd_=w.redirectStart;u e.t._rd=w.redirectEnd;ue.t.fe_=w.fetchStart;ue.t.lk_=w.domainLookupStart;ue.t._lk=w.domainLookupEnd;ue.t.co_=w.connectSt art;ue.t._co=w.connectEnd;ue.t.sc_=w.secureConnectionStart;ue.t.rq_=w.requestStart;ue.t.rs_=w.responseStart;ue.t._rs=w.re sponseEnd;ue.t.dl_=w.domLoading;ue.t.di_=w.domInteractive;ue.t.de_=w.domContentLoadedEventStart;ue.t._de=w.domCont entLoadedEventEnd;ue.t._dc=w.domComplete;ue.t.ld_=w.loadEventStart;ue.t._ld=w.loadEventEnd}var v=u.navigation;if(v){ue.t.ty=v.type+ue.t0;ue.t.rc=v.redirectCount+ue.t0}ue.collected=1}}var t=!e&&typeof h!="undefined";if(t){return}for(var a in h){ues(a,e,h[a])}uet("pc",e,h);var m=ues("id",e)||ue.id;var g=ue.url+"?"+i+"&v=19&id="+m;var f=ues("ctb",e)||ues("wb",e);if(f){g+="&ctb="+f}if(ueinit>1){g+="&ic="+ueinit}var p;if(document.ue_backdetect&&document.ue_backdetect.ue_back){p=document.ue_backdetect.ue_back;if(p.value>1){g+="&b f="+(p.value-1)}}if(ue._fi&&i=="at"&&(!e||e==m)){g+=ue._fi()}var b;if((i=="ld"||i=="ul")&&(!e||e==m)){var o=window.performance||window.webkitPerformance;if(i=="ld"){if(!window.ue_tm){if(window.onbeforeunload&&window.onbefor eunload.isUeh){window.onbeforeunload=null}}else{var s=g;setInterval(function(){k(d(s,null))},ue_tm)}if(p){p.value++}if(window._uess){b=_uess()}if(window.ue_navtiming&&o&&o.timin

ProgramacinWebU3.Anlisisdelportal"amazon.es"

g){ues("ctb",m,"1");if(ue_navtiming==1){ue.t.tc=o.timing.fetchStart}else{if(ue_navtiming==3){ue.t.tc=o.timing.navigationStart}els e{if(ue_navtiming==4){ue.t.tc=o.timing.requestStart}}}}}if(window.ue_rnt&&o){q(o)}}uet(i,e,h);var l=(i=="ld"&&e&&ues("wb",e));if(l){ues("wb",e,2)}var n=1;var c=0;for(var j in ue.sc){if(!window.ue_tm){if(ues("wb",j)==1){n=0;break}}else{if(ues("wb",j)==2){c++}}}window.ue_tm&&(n=c>=ue_wn?1:0);if(l){if (ue.s!=0||!n){return}g=d(g,null)}else{if(n||i=="ul"){var r=d(g,null);if(r!=g){ue.b=r}}if(b){g+=b}g=d(g,e||ue.id)}if(!l){ue.s=0;if(!window.ue_wl_jserr&&ue.e){g+="&ec="+ue.ec+ue.e;ue.e="" ;ue.ec=0}if(window.ue_wl_jserr&&window.ue_err&&ue_err.ec>0){g+="&ec="+ue_err.ec}ues("t",e,{})}if(window.ue_tags&&wind ow.ue_tags==1){if(g&&ue.tag&&ue.tag().length>0){g+="&csmtags="+ue.tag().join("|");ue.tag=ue.tagC()}}ue.a=g;k(g,i)}function uei(){var c=ue.r;function b(e){return function(){if(!c[e]){c[e]=1;uex(e)}}}window.onLd=b("ld");window.onLdEnd=b("ld");var a={beforeunload:b("ul"),error:function(j,h,i){ue.ec++;if(!ue.r.oe){ue.r.oe=1;ue.e+="&em="+escape(j)+"&eu="+escape(h)+"&el=" +i}return false},stop:function(){uex("os")}};for(var d in a){ueh(0,window,d,a[d])}if(window.addEventListener){window.addEventListener("load",window.onLd,false)}else{if(window.attac hEvent){window.attachEvent("onload",window.onLd)}}ue._uep=function(){new Image().src=(window.ue_md?ue_md:"http://uedata.amazon.com/uedata/?tp=")+(+new Date)};if(window.ue_pr&&(ue_pr==2||ue_pr==4)){ue._uep()}uet("ue")}uei(); </script>

Hasta su utilizacin ms simple y sencilla durante toda la ejecucin del cdigo:

<script type='text/javascript'> ue.rid=ue_id;ue.sid=ue_sid;ue.mid=ue_mid;ue.furl=ue_furl;ue.lr=[];ue.log=function(c,b,a){if(ue.lr.length==500){return}ue.lr.pus h(["l",c,b,a,ue.d(),ue.rid])};ue.reset=function(b,a){if(!b){return}window.ue_cel&&ue_cel.reset();ue.t0=ue.d(1);ue.rid=b};ue.d=func tion(a){return +new Date-(a?0:ue.t0)}; </script>

Podra pararme mucho ms en las distintas etiquetas de HTML que se utilizan en el resto del cdigo, pero adems de lento y poco operativo voy a poner algunas pinceladas de utilizacin de algunas etiquetas: <a>: hipervnculo o enlace, dentro o fuera del sitio web. Debe definirse el parmetro de pasada por medio del atributo href.
<a href="/b/ref=sa_menu_pcvid5?ie=UTF8&node=665498031" class="navSaChildItem">Juegos para PC</a>

<img>: imagen. Requiere del atributo src, que indica la ruta en la que se encuentra la imagen. Por ejemplo: <img src="./imgenes/mifoto.jpg" />. Es conveniente, por accesibilidad, poner un atributo alt="texto alternativo".
<img src="http://g-ecx.images-amazon.com/images/G/30/gno/images/orangeBlue/navPackedSprites-ES03._V156600418_.png" style="display:none" alt=""/> <img src="http://g-ecx.images-amazon.com/images/G/30/x-locale/common/transparent-pixel._V164978876_.gif" style="display:none" alt="" id="nav_trans_pixel"/>

<b>: texto en negrita (etiqueta desaprobada. Se recomienda usar la etiqueta <strong>).

<b><span style="color: rgb(204, 153, 0); font-weight: bold; font-size: 13px;"> &#8250; </span> <a href="/gp/yourstore/pym/ref=pd_pyml_rhf">Ver y modificar mi historial de navegacin</a> </b>

Tambin hay AJAX hacia el final de la pgina, aunque aqu s que hace referencia al contenido que se ha de recuperar desde el servidor. Vemos como accede a diferentes contenedores dentro de la pagina, asignndoles el contenido de manera dinmica usando $(#..). Cada contenedor al que hace referencia dentro de la funcin, mostrara un valor determinado, tras evaluar la respuesta obtenida en la funcin. El responseText, se mostrara en el panel correspondiente segn sea su valor, que ha sido devuelto con el XMLHttpRequest. Si el valor devuelto fuese error, vemos que lo que le dice al panel es que se oculte, invocando el mtodo hide, muestra un panel de error.

amznJQ.onReady('JQuery', function() { (function($) { window.RECS_rhfShvlLoading = false; window.RECS_rhfShvlLoaded = false; $("#rhf_container").show(); var rhfShvlEventHandler = function () {

ProgramacinWebU3.Anlisisdelportal"amazon.es"

if ( ! window.RECS_rhfShvlLoaded && ! window.RECS_rhfShvlLoading && $('#rhf_container').size() > 0 ) { var yPosition = $(window).scrollTop() + $(window).height(); var rhfElementFound = $('#rhfMainHeading').size(); var rhfPosition = $('#rhfMainHeading').offset().top; if (/webkit.*mobile/i.test(navigator.userAgent)) { rhfPosition -= $(window).scrollTop(); } if (rhfElementFound && ( rhfPosition - yPosition < 400 )) { window.RECS_rhfShvlLoading = true; $.ajax({ url: '/gp/history/external/full-rhf-rec-handler.html', type: "POST", timeout: 30000, data: { shovelerName : 'rhf', key : 'rhf', numToPreload : '5', isGateway : 1, refTag : 'pd_rhf_shvl', parentSession : '175-9771941-5854966', excludeASIN : '', renderPopover : 0, forceSprites : 0 }, success: function(responseText, textStatus, XMLHttpRequest) { $("#rhf_container").html(responseText); $("#rhfShvl").trigger("render-shoveler"); window.RECS_rhfShvlLoaded = true; }, error: function(responseText, textStatus, XMLHttpRequest) { $("#rhf_container").hide(); $("#rhf_error").show(); return; . $(document).ready(rhfShvlEventHandler); $(window).scroll(rhfShvlEventHandler); })(jQuery); });

ProgramacinWebU3.Anlisisdelportal"amazon.es"

10

Mediante la herramienta de anlisis de Chrome se puede profundizar bastante ms, se puede ver cada lnea de cdigo relacionada con el rea de pantalla. Pero para terminar ya solo he querido destacar la utilizacin de cookies por parte de la pgina que permitirn recordar datos que adapten el contenido segn el visitante:
session-token TBOh+/s4F5MV9KN+K1DTRVruTb1uOXuXir+Zu2bwwf0/GTA16U0ACjMnlhuwY8pN7obSiZHeP5cucI7/gCrnMpw0bLR7Z7vNe skcEAEA436JIG9fb0gjYFRdU2cT4F82bwGFm77szHqJn/xIE/cJFf4ZOHqq3ctIMvIjwOafgY6WIFO8audlu/8wqOy0jGm9o5BfjEY ijS8D6/neQazPVjR8/A+wXZwPAfS0QrIxXUxHtDDZc9eBSRBhIaW910WA0+AmAEKToxw= .amazon.es Sat, 08 May 2032 11:39:56 GMT ubid-acbes 277-1861653-5992204 .amazon.es Mon, 31 Dec 2035 23:00:01 GMT session-id-time 2082754801l .amazon.es Mon, 31 Dec 2035 23:00:01 GMT session-id 276-6577202-8734437 .amazon.es Mon, 31 Dec 2035 23:00:01 GMT

ProgramacinWebU3.Anlisisdelportal"amazon.es"

11

Detalle sobre la Accesibilidad de la Pgina.

Para terminar simplemente he querido comprobar la accesibilidad de la pgina. En general no presenta grandes problemas, pero si algunos que seran recomendable solucionar, ya que un portal de estas caractersticas e importancia debera cuidar ms esta faceta. Lo he realizado mediante el portal: http://www.tawdis.net/. A ttulo informativo a continuacin aado las capturas de pantallas tras el anlisis sin entrar en detalles.

ProgramacinWebU3.Anlisisdelportal"amazon.es"

12

ProgramacinWebU3.Anlisisdelportal"amazon.es"

13

ProgramacinWebU3.Anlisisdelportal"amazon.es"

14

Conclusiones
Al igual que la mayora de pginas Web actuales, puedo decir que la pagina de Amazon, usa HTML, CSS, JavaScript, libreras de JQuery, y AJAX. Pero sobre todo, hay que dejar claro, que aunque podamos analizar el cdigo de parte del cliente, que es bastante complicado, y podemos tener una idea general de su composicin, averiguar exactamente los que hace cada componente es complejo. Otro tema a destacar es el uso de mucho cdigo CSS incluido dentro del propio cdigo HMTL. Normalmente se tiende a externalizar a travs de archivos CSS, que en un futuro facilitan la reconversin de cdigo. Adems, utiliza ms de lo recomendable para distribuir el espacio de la pgina las tablas, esto no es recomendable a nivel de accesibilidad. Para terminar, queda claro que hoy por hoy es imposible hablar de hacer una pgina Web, ya sea portal de navegacin o portal de comercio electrnico, sin emplear estas tecnologas. Van todas de la mano, y hacer que el contenido sea dinmico mediante AJAX o JSON. Estas tecnologas facilitan sobre todo, como he comentado anteriormente, que se pueda adaptar el contenido de la misma al perfil de visitante y que incluso vaya variando conforme realiza distintas operaciones de bsqueda o consulta. Est claro que hay una estrecha lnea entre las tecnologas del lenguaje Web y las del Marketing. A todo esto hay que aadir el incremento de integracin de todos los portales con las redes sociales, que en este caso es totalmente inexistente.

ProgramacinWebU3.Anlisisdelportal"amazon.es"

15