Programacion Del lado Del clienteTecnologa WEBProgramacin en el lado del cliente

3 Programacin en el lado del cliente3.1 IntroduccinUno de los principales problemas de la ejecucin de aplicaciones distribuidas a travs deInternet se refiere a la velocidad de transmisin, y ms en concreto, a la cantidad de informacin quecircula por la Red. Esa velocidad se traduce en lentitud de respuesta a los comandos introducidos porel cliente en los mltiples interfaces de datos que se presentan en los documentos HTML, como sonlos formularios, enlaces, imgenes etc.Para reducir los dos problemas que se plantean (saturacin y lentitud), se plantean solucionesen el entorno del cliente Web, capaces de manejar los objetos contenidos en las pginas HTML, ascomo atender a las acciones realizadas por el cliente, sin necesidad alguna de transmisin hacia elservidor (que, en estos casos, sera incapaz de ofrecer respuesta a los comandos tratados a nivel local).La rpida respuesta ofrecida por el programa local permite dar una sensacin ms realistadentro del navegador, dejando al protocolo nicamente los aspectos relacionados con el envo deinformacin. Se permite as mejorar el aspecto de presentacin de la aplicacin, adems de gestionarde forma rpida y sencilla algunos aspectos hasta ahora centralizados en el servidor (con el aumentode demoras que ello provoca).Tecnologa Web3-2Figura 3-1 : Programacin en el navegadorLas tecnologas tpicas que permiten la codificacin de pequeas aplicaciones a ejecutar en elentorno local del navegador son: Lenguajes de Script Applets Java3.2 Lenguajes de ScriptLos lenguajes de script estn diseados para la manipulacin de los eventos y objetoscontenidos en una pgina Web, de forma local y sin necesidad de transmisin alguna por la Red. Sonprogramas incluidos en la pgina HTML y que son interpretados por el navegador, mejorando lainteraccin con el usuario. Permiten realizar algunas tareas simples en la parte del cliente: Algunos clculos simples Validacin de los datos de los formularios Mensajes de alertaPor lenguaje Script entendemos lenguajes orientados al documento; nunca ser posible realizarun programa completo en l, sino que el mbito de actuacin quedar restringido al documento en elque se ejecuta, y donde va inmerso el cdigo script.Ante las acciones realizadas por el usuario, el programa captura el evento relacionado con laaccin, y ejecuta el cdigo de atencin. Mediante esta tcnica, es posible la ejecucin de cdigo enmuchas acciones comunes en un entorno Web, como pueden ser:Programacin en el lado del cliente3-3 apertura de nuevos documentos Pulsacin de botones Introduccin y envo de datos en formularios ...y que son controlados mediante la interceptacin de los mtodos asociados a cada objeto(pulsacin, enfoque, paso por encima, ...).La manipulacin de los objetos de la pgina se realiza de forma directa, es decir, en sudefinicin (en HTML) cada objeto lleva asociado un nombre, que ser el que se utilice para acceder asus propiedades (definidas en la jerarqua de objetos propia de cada lenguaje).De forma resumida, se puede decir que se trata de lenguajes de programacin sencillos, conrestricciones de acceso a los recursos locales de la mquina (disco duro, memoria), y en los que esposible realizar pequeas aplicaciones cliente/servidor; aunque el principal mbito de aplicacin eslocal.3.2.1 Lenguajes orientados a objetosLos lenguajes de Script usados en entorno WEB estn diseados para la manipulacin de losobjetos contenidos en un documento HTML (visualizado a travs del navegador). Dichos objetos sedefinen dentro de una jerarqua de objetos, propia de cada navegador (cada uno define la suya propia,aunque muy parecida entre ellos). Esto causa algunos problemas, por ejemplo el mismo cdigo servalido un navegador y producir errores de ejecucin en otro. Una accin inicial muy tpica es detectarel tipo de navegador usado y actuar en consecuencia.3.2.2 Insercin en HTMLSe utilizar la etiqueta de la forma siguiente:

donde se puede ver como se utilizan los comentarios de HTML (), para aquellosnavegadores que no sean capaces de interpretarlo.Los lenguajes ms comunes son: JavaScript: Desarrollado por Netscape para su navegador Mozilla. Microsoft InternetExplorer soporta una versin propia muy parecida denominada JScript. VBScript: Desarrollado por Microsoft y soportado por Internet Explorer.Tecnologa Web3-43.2.3 JavaScriptEn las lneas siguientes se har un pequeo repaso de la sintaxis de JavaScript. En primerlugar hay que destacar que este lenguaje no tiene nada que ver con Java, aparte del nombre y lasintaxis. El mbito de utilizacin, la ejecucin y los objetivos de ambos lenguajes son totalmentedistintos.Al igual que sucede en C/C++ las sentencias terminan con un punto y coma y se formansentencias compuestas mediante llaves; Los operadores son similares, por no decir los mismos, a losya conocidos en C/C++: + (que sirve tambin para concatenar cadenas), -, *, /, %, ++, --, =, ==,!=,,,>=, &&, ||, etc.Los comentarios se escriben usando la doble barra ( // ) que indica que el resto de la lnea nose interpreta.3.2.3.1 VariablesEn JavaScript se usa la palabra reservada var para declarar variables. A diferencia de unlenguaje compilado, no es necesario indicar el tipo de la variable. Esto se deduce del contexto, al usarla variable el interprete ya sabr de que tipo es.Ejemplo:var variable;variable = 37; //la uso como si fuera de tipo enterovariable = hola; //la uso como una cadena de caracteresLos arrays se construyen en tiempo de ejecucin, no siendo necesario especificar su tamao.var arrayDeCadenas = new Array();arrayDeCadenas[1] = "Primera cadena";arrayDeCadenas[2] = "Segunda cadena";//Los elementos del array pueden ser de cualquier tipo3.2.3.2 Estructuras de controlEn JavaScript disponemos de las estructuras de control tpicas de C/C++ y adems con lamisma sintaxis. Como se suponen ya conocidas por el lector se har un breve repaso de las mismas. Estructura if...elseif (numero==0){numero+=10;}else{numero--;}Programacin en el lado del cliente3-5 Estructura forfor(contador=1; contadorCada vez que se cargue la pgina se ejecuta la funcinbienvenida.-->

La lista de eventos disponible es bastante amplia, en la tabla siguiente se muestran algunos deellos.Tecnologa Web3-6Evento AccinOnLoad Terminar de cargarse una pginaOnUnLoad Salir de una pgina (descargarla)OnMouseOver Pasar el ratn por encimaOnMouseOut Que el ratn deje de estar encimaOnSubmit Enviar un formularioOnClick Pulsar un elementoOnBlur Perder el cursorOnChange Cambiar contenido o perder el cursorOnFocus Conseguir el cursorOnSelect Seleccionar texto3.2.3.4 Objetos predefinidosEn el lenguaje existen una serie de objetos predefinidos que representan distintos elementos,tanto del navegador como de la pgina que se est presentando actualmente. Cada uno de estos objetospuede tener propiedades que pueden ser a su vez otros objetos. Por ejemplo el objeto window querepresenta una ventana tiene una propiedad llamada document que representa el documento HTMLque se est presentando y este a su vez contiene un objeto form que contiene todos los formularios deesa pgina. A continuacin se har una pequea descripcin de los objetos ms tpicos y se remite allector a la gua de referencia para una completa descripcin de todos los objetos disponibles y suspropiedades y mtodos. Window: Representa la ventana sobre la que estamos actuando.. open : Permite abrir una nueva ventana. close : Cierra la ventana. alert : Abre una ventana con un mensaje Document: Representa el documento html. write : Escribe en la pgina. form : array con los formularios de la pgina History: Pginas visitadas anteriormente.. back : Retrocede en la lista de pginas visitadas. forward : Avanza en la lista de pginas visitadas Otros objetos:. Date : Fecha actual. Navigator: Tipo de navegador. Screen : Propiedades de la pantallaProgramacin en el lado del cliente3-73.2.3.5 Ejemplos completosEl ejemplo siguiente muestra un script que crea una tabla con los nombres de los das de lasemana, crea un objeto que representa la fecha actual e imprime en la pgina HTML la fecha actual.

Hoy es:

// array con los nombres de los diasvar nombreDias = new Array();nombreDias[0] = "Domingo";nombreDias[1] = "Lunes";nombreDias[2] = "Martes";nombreDias[3] = "Miercoles";nombreDias[4] = "Jueves";nombreDias[5] = "Viernes";nombreDias[6] = "Sabado";// Creamos el objeto fechavar fecha = new Date();// Escritura en el documento actual// El mtodo getDay retorna el da de la semana// y el mtodo getDate retorna el da del mesdocument.write( nombreDias[ fecha.getDay() ] );document.write( " y " + fecha.getDate());

Y la apariencia del cdigo en el navegador es la siguiente:Figura 3-2 : Fecha actualHay que dejar claro que el texto que se muestra depender del da que se ejecute el script y elejemplo que se muestra es solamente ilustrativo de la apariencia que tendra la pgina.Tecnologa Web3-8El siguiente ejemplo muestra la creacin de distintas ventanas de alerta, confirmacin ypeticin de datos en funciones que se ejecutan como respuesta a un evento, en este caso la pulsacinde un botn.

function aviso() {alert("He dicho que no me pinches");}function confirmacion() {var resp = confirm("Estas seguro ?");if ( resp == true )alert("Has respondido ACEPTAR");elsealert("Has respondido CANCELAR");}function pregunta() {var resp = prompt("Dime algo","Valor por defecto");alert("Has respondido " + resp );}

Mensaje de alerta

Y la apariencia del cdigo en el navegador es la siguiente:Figura 3-3 : Mensajes de alerta, confirmacin, ...Programacin en el lado del cliente3-9Al pulsar el primer botn se abrir una ventana de alerta:Al pulsar el botn de confirmacin se abrir la siguiente ventana:El resultado de la pulsacin se puede recoger en una variable tal y como se muestra en elejemplo. Con el ltimo botn se abre una ventana donde el usuario puede realizar una entrada dedatos. En la llamada se especifica el texto a presentar en la ventana y el valor por defecto que debepresentar la entrada.En este otro ejemplo, se ejecuta una funcin en respuesta a la pulsacin de un botn que creauna nueva ventana y escribe en ella una pequea pgina HTML.

// rutina de atencin al eventofunction NuevaVentana() {MiVentana=open("","MiPropiaVentana","toolbar=no,menubar=no,resizable=yes,status=yes");MiVentana.document.write("Una nuevaventana");MiVentana.document.write("Aqu puedesponer lo que quieras");}

en su navegador hay un increble editor enhttp://w3schools.comque le permite editar algo de cdigo para ver que pasa. Tambin puede echar un vistazo al artculocmo agregar un reproductor de audio HTML5 en su sitio.VideoVeamos ahora el elemento element.

Your browser does not support the video tag.

Como hemos dicho anteriormente, el elemento de vdeo cuenta con el apoyo de mltiples fuentes, que intentar en orden y luego seguir con la siguiente opcin.Al igual que el audio, el video tiene un atributocontrols. Aqu est una captura de pantalla de los controles de vdeo en Internet Explorer:

Otros atributos divertidos en el elemento de video incluyen:Ads bySuperRadioAdOptionsATRIBUTOVALORES POSIBLESDESCRIPCIN

AUDIOmutedEstablece el estado predeterminado del audio (actualmente, "silenciado" es la nica opcin)

AUTOPLAYautoplaySe inicia la reproduccin de video tan pronto como est listo

CONTROLScontrolsMuestra los controles de reproduccin de video en la pgina

HEIGHT(valor en pxeles)Establece la altura del reproductor de vdeo

LOOPloopHace que el audio se repita cada vez que termina

POSTER(algn URL)Especifica la direccin URL de una imagen para representar el vdeo cuando no se dispone de datos de vdeo

PRELOADauto, metadata, noneDetermina si se debe cargar el video cuando se carga la pgina. El valor auto cargar el video, metadata cargar slo metadatos asociados con el archivo de video, y none evitar la precarga del video. (Este atributo ser ignorado si la reproduccin automtica est especificada)

SRC(algn URL)Especifica la direccin URL del archivo de video a reproducir

WIDTH(valor en pxeles)Establece el ancho del reproductor de vdeo

Una vez ms, para jugar con el elemento , utilice el editor enhttp://w3schools.comque le permite editar algo de cdigo de ejemplo y ver qu sucede.Para obtener ms informacin acerca de video y audio revise: 5 Cosas que usted necesita saber para empezar a usar y hoy Cmo agregar un reproductor de audio HTML5 en su sitio W3C Schools HTML5 videoDesarrolle con HTML5 manteniendo a la vez soporte para los navegadores ms antiguosHemos hablado mucho de las nuevas y geniales capacidades de HTML5, incluidos los nuevos elementos semnticos, la etiqueta canvas para dibujar, y el soporte de audio y video.Tal vez crea que esto es realmente genial, pero no puede adoptar HTML5 cuando muchos de los usuarios no tienen navegadores compatibles con HTML5 todava.Sin mencionar que los navegadores que S soportan HTML5 admiten diferentes piezas del mismo; no todas las nuevas funcionalidades de HTML5 son compatibles con todos los navegadores y las diferentes funcionalidades pueden ser aplicadas de manera diferente.Pero hay una manera de utilizar las nuevas caractersticas sin que su sitio ya no sea accesible para los usuarios con navegadores antiguos. Puede utilizar polyfills .SegnPaul Irish, un polyfill es "una correccin que imita una futura API, proporcionando funcionalidad para navegadores antiguos." Un polyfill llena los vacos en navegadores antiguos que no soportan las funciones de HTML5 en su sitio. Aprender a utilizar polyfills le permitir utilizar HTML5 hoy sin olvidarse de los usuarios con navegadores antiguos.Una manera de conseguir soporte polyfill es la biblioteca JavaScriptModernizr(pero haymuchos polyfills disponibles). Modernizr agrega capacidad de deteccin para que usted pueda comprobar concretamente si un explorador tiene soporta para, por ejemplo, el elemento canvas y ofrecer una opcin de copia de seguridad si no lo tiene.Veamos un ejemplo. Recuerda el ejemplo de cdigo que he utilizado cuando se introducen elementos semnticos y diseo de pgina ? Aqu est de nuevo:

Title

Header in h1

Subheader in h2

Menu Option 1

Menu Option 2

Menu Option 3

Article #1

Este es el primer artculo. This is highlighted.

Article #2

Este es el segundo artculo. Estos artculos pueden ser secciones del blog, etc.

Links

Link 1

Link 2

Link 3

Jennifer Marsman

Footer - Copyright 2011

Este cdigo contiene una serie de nuevos elementos HTML5 que no son soportadas en navegadores antiguos. Recuerde que en Internet Explorer 9 se vea as:

Podemos usar Internet Explorer developer tools para ver cmo se vera en versiones anteriores de IE. En Internet Explorer, presione la tecla F12 para acceder a las herramientas de programador.

Tenga en cuenta que el modo de navegacin (en la barra de men gris en la parte superior) est configurada ahora para IE9. Haga clic en el Modo Navegacin, y en el men desplegable que aparece, seleccione "Internet Explorer 8" (que no tiene soporte HTML5).

Despus de hacer este cambio y cambiar a un navegador no compatible con HTML5, esto es lo que aparece en mi pgina web:

Aunque parece que es un problema enorme, no es realmente tan malo. La razn por la que esto no funciona es que IE8 no reconoce los nuevos elementos HTML5 que estoy usando, as que no los agrega al DOM, por lo que no se pueden aplicar estilos mediante CSS.Sin embargo, con solo agregar una referencia a Modernizr (sin hacer ningn otro cambio en el cdigo!) entonces obligar a meter estos elementos en el DOM. Descrguelo dehttp://www.modernizr.com/download/y agregue una referencia en la seccin de este modo:

Title

Agregu dos referencias de script, uno para jQuery y uno Modernizr. No necesito realmente la referencia jQuery en este punto, pero sin duda las necesitaremos para el siguiente script, as que por eso la agrego ahora.Con este simple cambio ahora mi sitio se ve en Internet Explorer 8:

No es perfecto, pero est muy cerca de la versin original que vemos en Internet Explorer 9. Modernizr agreg estos nuevos elementos HTML5 que IE8 no ha entendido en el DOM y ya que estn en el DOM podramos formatearlos mediante CSS.Pero Modernizr hace mucho ms que eso!Tenga en cuenta que una de las diferencias entre nuestras versiones IE8 e IE9 de la pgina web es que la versin IE9 tiene una bonita esquina redondeada en los dos artculos y la figura, y la versin IE8 no. Tambin podemos utilizar Modernizr para corregir esto.

if (!Modernizr.borderradius) {

$.getScript("script/jquery.corner.js", function() {

$("article").corner();

$("figure").corner();

});

}

En este script, estamos comprobando el objeto Modernizr para ver si hay soporte para "borderradius" (una caracterstica CSS3). Si no, yo uso un script jQuery llamado jquery.corner.js (que est disponible para su descarga enhttp://jquery.malsup.com/corner/y requiere esa referencia adicional a jQuery que hice antes). A continuacin, simplemente llamo el mtodoesquinadel script de mis artculos y cifras para darles esquinas redondeadas.O bien, puede hacer esto una forma ligeramente diferente. Modernizr tiene un cargador de recursos condicional (no incluido) llamado Modernizr.load(), basado enYepnope.js. Esto le permite cargar slo los scripts polyfilling que necesitan sus usuarios, y cargar scripts de forma asncrona y en paralelo que a veces puede ofrecer una mejora de rendimiento. Para obtener Modernizr.load, tiene que incluirlo en una versin personalizada de Modernizr que usted tiene que crear enhttp://www.modernizr.com/download/; no est incluido en la versin de desarrollo. Con Modernizr.load, podemos escribir un script similar a este:

Modernizr.load({

test: Modernizr.borderradius,

nope: 'script/jquery.corner.js',

callback: function () {

$('article').corner();

$('figure').corner();

}

});

En resumen, este implementa la misma funcionalidad que la secuencia anterior. Modernizr.load primero prueba la propiedad booleana "Modernizr.borderradius" para ver si es compatible. Luego,nopedefine los recursos para cargar sitestes falso. Dado que IE8 no soporta la propiedad CSS3 "borderradius", cargar jquery.esquina.js script. Por ltimo,callbackespecifica una funcin para que se ejecute cada vez que la secuencia de comandos haya terminado de cargar, por lo que invocamos el mtodo "corner" en mis artculos y figuras como hicimos antes. Hay un breve tutorial sobre Modernizr.load enhttp://www.modernizr.com/docs/#loadsi quiere ir ms a fondo.Ahora, utilizando cualquiera de estos scripts, nuestro Internet Explorer versin 8 (que no soporta HTML5) se ve as:

Por lo tanto, usando polyfills y herramientas como Modernizr podr utilizar la nueva funcionalidad HTML5 y an as dar una buena experiencia para navegadores antiguos. Para obtener ms informacin, consulte la seccinhttp://www.diveintohtml5.net/detect.htmlque describe en detalle cmo detecta Modernizr caractersticas HTML5.ResumenEn esta introduccin a HTML5, cubrimos el marcado semntico, lienzo, audio y video, y utilizar HTML5 manteniendo el soporte a los navegadores ms antiguos. Pero tambin observamos que hay muchas cosas que no cubrimos: microdatos, almacenamiento, CSS3, etc. Aqu hay algunos recursos para continuar aprendiendo sobre HTML5:IE Test Drive incluso si usted no usa Internet Explorer, este es un sitio increble. Contiene muchasdemostraciones: Demostraciones rpidas, Demostraciones HTML5, Demostraciones grficas y Demostraciones de Navegador . Prubelas en su navegador favorito! Este sitio tambin tiene enlaces a otros recursos.Beauty of the Web muestralos mejores sitios en la web que sacan provecho de la aceleracin de hardware de HTML5 y las caractersticas de anclado de Internet Explorer 9BuildMyPinnedSite todo el cdigo, ideas, y las muestras que usted necesita para usar anclado e integracin con WindowsHTML5 Labses un sitio donde Microsoft prueba especificaciones anticipadas e inestables de los cuerpos de normalizacin web tales como W3C. Puede jugar con prototipos como IndexedDB, WebSockets, FileAPI y Media Capture API.VideosBrandon Satrom's "Application Development with HTML5" talk at TechEd 2011 de Brandon Satrom es una fabulosa charla de una hora que le muestra lo que tiene que saber para desarrollar con HTML5Charlas sobre HTML5 en MIX 2011 una pltora de sesiones HTML5HerramientasMuchas herramientas de desarrollo ya son compatibles con HTML5. Pruebe estas: Visual Studio 2010 SP1 el SP1 aade HTML5 bsico, CSS3 IntelliSense y validacin. Para mayor informacin consultehttp://blogs.msdn.com/b/webdevtools/archive/2011/01/27/html5-amp-css3-in-visual-studio-2010-sp1.aspx. Actualizacin de estndares web para Microsoft Visual Studio 2010 SP1 esta es una extensin que Visual Studio agrega actualizando HTML5, IntelliSense y validacin CSS3 en Visual Studio 2010 SP1, sobre la base de la actual especificacin W3C. WebMatrix HTML5 es soportado por defecto (aadiendo una nueva pgina HTML utiliza el doctype HTML5 por defecto y cdigo de plantilla) Actualizacin de herramientas ASP.NET MVC 3 El dilogo Nuevo Proyecto incluye una casilla de verificacin para activar las plantilla de de proyecto de HTML5. Estas plantillas aprovechan Modernizr 1.7 para proporcionar soporte de compatibilidad para HTML5 y CSS3 en exploradores de nivel inferior.

http://elcentrohtml5.sourceforge.net/Aprenda-HTML5-en-5-minutos#