Download pdf - Material MVC Basico en español

DESARROLLO DE APLICACIONES WEB CON

ASP.NET MVC 4

NDICE

[1] Overview Web Applications ...................................................................................................3

[2] ASP.NET MVC 4 Architecture ................................................................................................9

[3] Javascript and jQuery ..........................................................................................................17

[4] Working with HTML5 and CSS3 Features ...........................................................................23

[5] Handling File Upload ...........................................................................................................38

[6] Integrating with SSRS .........................................................................................................42

[7] Web Application Vulnerabilities ..........................................................................................44

Captulo

1

Overview Web

Applications


ASP.NET MVC4 PLURALSOFT

4

Existen varias consideraciones que deben tomarse en cuenta para el Diseo de Aplicaciones

Web:

El diseo debe estar basado en funcin a un Framework robusto y escalable, que se encuentre alineado a un Patrn sustentado para la construccin de Aplicaciones Web.

Debe tener una estructura que permita la extensibilidad de la aplicacin para la gestin de cambios e implementacin de nuevas funcionalidades con el menor esfuerzo posible.

Debe tener secciones completamente diferenciadas entre el contenido dinmico y esttico para la respectiva localizacin de componentes y crecimiento horizontal.

Debe tener un alto grado de personalizacin a travs de configuracin.

ASP.NET tuvo un gran impacto cuando fue lanzado, no solamente por ser una plataforma

multilenguaje, sino en que llenaba el hueco existente entre las aplicaciones Windows

Forms, con estado y orientadas a objetos, y las aplicaciones web orientadas a HTML,

intrnsecamente sin estado.

Microsoft intent ocultar tanto el protocolo HTTP (que es intrnsecamente sin estado)

como el cdigo HTML generado (que en el momento no era conocido por muchos

desarrolladores) modelando una arquitectura de interfaz de usuario que abstraa esos

conceptos a un conjunto de controles. Cada control gestionaba su propio estado a travs

de las diferentes llamadas al servidor, conectaba los diferntes eventos de cliente y servidor,

y se encargaba de generar el html correspondiente.

De esta manera, los desarrolladores no tenan que trabajar con una serie de peticiones

HTTP independientes y sus consiguientes respuestas. De esta manera nos olvidabamos de

la web, y construamos nuestro interfaz usando un diseador de "arrastrar y soltar", y nos

imaginbamos que todo suceda en el servidor.



5

Aunque la intencin fue buena al pincipio, la realidad result poco ms complicada. A lo

largo de los aos ASP.NET webforms ha demostrado tener una serie de debilidades:

ViewState: El mecanismo para mantener estado a travs de peticiones web, normalmente resultaba en bloques gigantes de cdigo que eran innecesariamente transferidos entre cliente y servidor (muchas veces llegaban a ser cientos de Kb), ralentizando la experiencia del visitante cada vez que clicaban un botn de nuestra aplicacin web. ASP.NET Ajax adolece del mismo problema, aun suponiendo que este era el problema que Ajax deba de solucionar.

Ciclo de vida de la pgina: El mecanismo que conectaba eventos de cliente y servidor, parte del ciclo de vida de la pgina, llegaba a ser extraordinariamente complicado y delicado, llevando normalmente a errores y problemas de mantenibilidad. Manipular la jerarqua de controles de un webforms comunmente llevaba a errores de Viewstate o eventos que misteriosamente fallaban al ejecutarse.

Limitado control sobre el HTML generado: Los controles de servidor renderizan HTML, pero nunca el HTML que a ti te gustara. El cdigo HTML que generan es ineficiente, pesado y no cumple los standards ni hace un correcto uso de CSS. El servidor genera una enfarragosa coleccin de valores de ID cliente, a los que es muy difcil de acceder via Javascript.

No hay separacin de responsabilidades: El modelo de ASP.NET code-behind pretende desacoplar el cdigo HTML del cdigo de servidor, pero en la realidad se acaba mezclando cdigo de presentacin (ej: manipulando la jerarqua de controles) con el de lgica de negocio (ej: accediendo a la base de datos) en la misma, enorme, y difcil de mantener clase de code-behind. Sin separacin de responsabilidades, el resultado final se frgil e ilegible.

Imposible de testear: Cuando se lanz ASP.NET, no se anticip que el desarrollo orientado a pruebas iba a ser una prctica comn en el desarrollo de software a nivel mundial. Es por ello que esta arquitectura es completamente intesteable.

El Desarrollo Web Actual

Desde que ASP.NET webforms fue lanzado, ha habido muchos progresos en la industrial del

desarrollo web:

Web standards y REST Las pginas web hoy son consumidas por una gran variedad de dispositivos, por lo

que se hace necesario una convergencia hacia unos estndares comunes.

De la misma manera, REST ha ido ganando una gran popularidad y se ha reconocida

como la referencia de interoperabilidad entre aplicaciones sobre el protocolo HTTP.



6

Agile y desarrollo dirigido a test El desarrollo gil y orientado a test permite introducir capacidad de adaptacin al

cambio, sin comprometer la base de cdigo existente, ya que cada funcionalidad o

comportamiento deseado est garantizada por varias pruebas unitarias que

garantizan su funcionamiento.

Desgraciadamente, webforms no nos facilita (ms bien todo lo contrario) el trabajo

orientado a pruebas.

Beneficios sobre ASP.NET MVC

Arquitectura MVC Desarrollada en los aos 80, promulga la separacin de responsabilidades entre el

controlador de peticiones, el modelo o repositorio de datos y reglas de negocio y las

vistas. Esta arquitectura facilita la testeabilidad.

Extensible Prcticamente cada pieza que forma el framework ASP.NET MVC puede ser

alterado, o modificado por una implementacin propia para cubrir nuestras

necesidades. Para cada componente del MVC Framework tenemos 3 opciones:

Usar la implementacin que trae por defecto (normalmente suficiente para

la mayora de las aplicaciones)

Crear una clase derivada y modificar el comportamiento deseado.

Reemplazar el componente deseado por una nueva y completa

implementacin que cubra nuestras necesidades.

Testeable

La arquitectura MVC facilita la creacin de pruebas unitarias. Crear

aplicaciones usando metodologas giles o basadas en TDD es muy sencillo

usando ASP.NET MVC. Ahora nuestras aplicaciones son ms robustas.

Control preciso sobre el HTML generado. Usando ASP.NET MVC podemos escribir el cdigo HTML final que deseemos, control

que no tenamos con ASP.NET webforms. Eso significa que nuestras aplicaciones

van a generar un cdigo ms limpio, que siga los estndares, y que se integre

fcilmente con nuestro cdigo Javascript.

URL's elegantes, semnticas y user-friendly Basado en una nueva estructura para las URL: /Compras/Listar/1

Potente sistema de ruteo (routing) ASP.NET webforms ya contaba con un sistema de rutado, pero ha sido con ASP.NET

MVC cuando lo hemos exprimido para aprovechar todas sus capacidades. Con

ASP.NET MVC, una peticin HTTP no tiene que estar necesariamente mapeada a un

archivo, sino que podemos crear elegantes "user-friendly.

Sigue el diseo "sin estado" nativo de la web Ausencia de ViewState, PostBack y todo el tedioso ciclo de eventos de un

webforms.



7

Nos evita gestionar el complejo mecanismo de eventos de cliente y servidor durante

el ciclo de vida de la pgina.

Construido sobre lo mejor de la plataforma .NET No cabe duda que la plataforma .NET ofrece ventajas considerables de

productividad, potencia, seguridad y escalabilidad. ASP.NET MVC hace uso de toda

esa base de cdigo.

ASP.NET MVC es open source ASP.NET MVC es "open source". Puedes descargar la ltima versin del framework,

e incluso modificarla y compilarla a tu gusto. Puedes descargarlo aqu:

http://aspnet.codeplex.com/

Introduccin en ASP.NET 4.5

Recordando Web ASP.NET API comenz como WCF Web API, y esta nos permite unir la programacin del modelo y eliminar la carga de procesamiento en el cliente.

Fue diseado principalmente para interactuar con el cliente emitiendo HTML, respondiendo a la interaccin del usuario; es decir ASP.NET WEB API es creado para las solicitudes que procedan de cdigo o de algn tipo estructurado. cmo puede ser una peticin AJAX, jQuery o una interfaz de servicio.

Esto significa que usted podr construir servicios de primer nivel de HTTP en una aplicacin ASP.NET MVC.

Web ASP.NET API incluye soporte para las siguientes caractersticas:

El modelo moderno de programacin HTTP: Directamente acceder y manipular las peticiones HTTP y las respuestas en WEN API utilizando un nuevo modelo inflexible de tipos objeto HTTP. El mismo modelo de programacin y la canalizacin HTTP es simtrica disponible en el cliente a travs del nuevo tipo de HttpClient.

Soporte completo para las rutas: Web API es compatible con el conjunto completo de capacidades de ruta que siempre han sido una parte de una aplicacin web, incluyendo parmetros y las limitaciones. Adems, la asignacin a las acciones tiene



8

soporte completo para convenciones, por lo que ya no es necesario aplicar los atributos tales como [HttpPost] a sus clases y mtodos.

La negociacin de contenido: El cliente y el servidor pueden trabajar juntos para determinar el formato de los datos se devuelven de una API. Ofrecemos soporte por defecto para XML, JSON, y los formatos de formularios con codificacin URL, y se puede extender este apoyo mediante la adicin de sus propios formateadores, o incluso sustituir el contenido por defecto estrategia de negociacin.

Modelo de enlace y validacin: carpetas de modelos proporcionan una manera fcil de extraer datos de diversas partes de una peticin HTTP y convertir las partes del mensaje en el NET que pueden ser utilizados por las acciones web del API.

Filtros: compatible con las API de filtros, incluyendo conocidos, como el atributo [Authorize]. Puede crear y conectar sus propios filtros para las acciones, la autorizacin y el control de excepciones.

La composicin de consulta: Con slo volver IQueryable, WEB API apoyar la consulta a travs de los convenios URL OData.

Mejora de la capacidad de prueba de los datos de HTTP: en vez de fijar los objetos al contexto esttico HTTP , las acciones de WEB API ahora pueden trabajar con las instancias de HttpRequestMessage y HttpResponseMessage. Las versiones genricas de estos objetos existen tambin para que pueda trabajar con los tipos personalizados, adems de los tipos de HTTP.

Mejora de la Inversin de Control (IoC) a travs de DependencyResolver: WEB API ahora utiliza el modelo de servicio de localizacin implementado por la dependencia de MVC de resolucin para obtener instancias de diversas instalaciones.

Cdigo de configuracin: Basada en Web API de configuracin se lleva a cabo nicamente a travs de cdigo, dejando a los archivos de configuracin limpia.

Auto-host: WEB API se puede alojar en su propio proceso, adems de IIS sin dejar de utilizar el poder de las rutas y otras caractersticas de la Web de la API.

Soporte completo para las rutas: Las rutas se definen donde se esperara.

Captulo

2

ASP.NET MVC 4

Architecture



10

MVC es un modelo de diseo estndar con el que estn familiarizados muchos

desarrolladores. Algunos tipos de aplicaciones web salen beneficiadas con el marco de

MVC. Otras seguirn usando el modelo de la aplicacin ASP.NET tradicional que est basado

en formularios Web Forms y devoluciones. Otros tipos de aplicaciones web combinarn las

dos estrategias; una no excluye a la otra.

El marco de MVC incluye los componentes siguientes:

Modelos

Los objetos de modelo son las partes de la aplicacin que implementan la lgica del

dominio de datos de la aplicacin. A menudo, los objetos de modelo recuperan y almacenan

el estado del modelo en una base de datos. Por ejemplo, un objeto Product podra

recuperar informacin de una base de datos, trabajar con ella y, a continuacin, escribir la

informacin actualizada en una tabla Productos de una base de datos de SQL Server.

En las aplicaciones pequeas, el modelo es a menudo una separacin conceptual. Por

ejemplo, si la aplicacin solo lee un conjunto de datos y lo enva a la vista, la aplicacin no

tiene un nivel de modelo fsico ni las clases asociadas. En ese caso, el conjunto de datos

asume el rol de un objeto de modelo.

Los Modelos es la representacin de la conectividad a datos, el cual centraliza el acceso a

los datos, ASP NET MVC nos permite utilizar nuestra propia implementacin de clases de

entidades (recomendacin), o utilizar un ORM (object relational mapping) como lo son

LINQ to Classes o Entity Framework para representar el Modelo.



11

Con Entity Framework tenemos la posibilidad de representar de una forma gil los registros

de la base de datos en memoria en clases de tipo entidad. EF por defecto funciona

correctamente con SQL Server, pero existen implementaciones para Oracle, Sybase, Sybase

Anywhere, MySQL, etc.

El Modelo con Entity Framework puede ser diseado desde un esquema de base de datos

existente o a partir de un modelo creado generar el esquema de base de datos. Para esto es

necesario conocer sobre Model First o Database First que como su nombre lo dicen con EF

Database First primero se crea la base de datos y a partir de su esquema creamos el

modelo. Con EF Model First es al contrario, primero creamos el Modelo con Entity Data

Model Designer que nos permite grficamente definir las entidades y posteriormente

generar el DDL (Data Definition Language) respectivo, esto significa el SQL para la creacin

del esquema de la base de datos.

Se debe tener en cuenta algunas consideraciones para la creacin de Modelos:

En proyectos medianos y pequeos: En caso de un proyecto nuevo, se recomienda utilizar Model First, pero si ya se tiene la base de datos entonces obligatoriamente debemos utilizar el concepto Database First.

En proyectos grandes: Se recomienda realizar la implementacin de clases de forma nativa.

El Modelo permite adems colocarle atributos a las Propiedades de cada Entidad,

validaciones, etc. Esto permite reutilizar estos datos desde las vistas para su generacin a

HTML.

Mapeando el modelo desde la base de datos

De las ventajas que se obtienen al obtener el EDM, es que podemos asignar el modelo

conceptual al modelo lgico, se puede especificar las condiciones para limitar los datos

encapsulados por una entidad y la ms importante, se produce automticamente cuando se

utiliza entidades creadas a partir de una base de datos.

XML generado por el diseador

Cuando observamos el cdigo generado por el diseador nos encontramos un archivo XML

que contiene. Dos secciones (SSDL, CSDL). La primera encargada del modelo conceptual y

la segunda de la ubicacin de las entidades en el diseador de EDM.

Hay ocasiones en las que sea necesario editar manualmente el cdigo generado, como

cuando se requieran definir consultas, editar claves de entidad, asignacin de Guid a una

columna binaria, definir funciones etc. Aunque ya existen editores Wizard que permiten

realizar dichas actividades.

a. Usando Entity Framework

Para crear un modelo a partir de la base de datos, se debe agregar un elemento de tipo

ADO.NET Entity Data Model y luego proceder a realizar las configuraciones de conexin y

objetos que deseen importarse:



12

b. Usando Enterprise Library

Agrupa un conjunto de componentes llamados "applications blocks" (Caching,

Configuration, Cryptography, Data Access, Exception Handling, Logging y Security) que

simplifican los procesos de acceso a datos, administracin y manejo de excepciones,

configuracin y encriptacin para todo tipo de desarrollos empresariales.



13

Data Access Application Block

No es un ORM.

ADO.NET optimizado.

Evita escribir cdigo repetitivo de ADO.NET simplificando el acceso a la base de datos.

Facilita escribir cdigo reutilizable entre diferentes motores de base de datos.

Permite manejar las bases de datos a las cuales se conecta la aplicacin desde el archivo de configuracin.

Facilita el uso de procedimientos almacenados gracias al descubrimiento de caching de parmetros.

Facilita el uso de "business objects" gracias al mapeo de tablas a objetos.

Ayuda a estandarizar el cdigo de acceso a datos en un proyecto proporcionando una interface comn y prcticas comunes que los diversos equipos deben seguir.

Controladores

Son los componentes que controlan la interaccin del usuario, trabajan con el modelo y por

ltimo seleccionan una vista para representar la interfaz de usuario. En una aplicacin MVC,

la vista solo muestra informacin; el controlador administra y responde a los datos

proporcionados por el usuario y su interaccin. Por ejemplo, el controlador administra los

valores de la cadena de consulta y pasa estos valores al modelo, que a su vez podra usarlos

para consultar la base de datos.

El modelo de MVC le ayuda a crear aplicaciones que separan los diferentes aspectos de la

aplicacin (lgica de entrada, lgica de negocio y lgica de la interfaz de usuario), a la vez

que proporciona un bajo acoplamiento entre estos elementos. El modelo especifica dnde

se debera encontrar cada tipo de lgica en la aplicacin. La lgica de la interfaz de usuario

pertenece a la vista. La lgica de entrada pertenece al controlador. La lgica de negocio

pertenece al modelo. Esta separacin le ayuda a administrar la complejidad al compilar una

aplicacin, ya que le permite centrarse en cada momento en un nico aspecto de la

implementacin. Por ejemplo, se puede centrar en la vista sin estar condicionado por la

lgica del negocio.

El bajo acoplamiento entre los tres componentes principales de una aplicacin MVC

tambin favorece el desarrollo paralelo. Por ejemplo, un desarrollador de software puede

trabajar en la vista, un segundo desarrollador puede ocuparse de la lgica del controlador y

un tercero se puede centrar en la lgica de negocio del modelo.

Los controladores procesan solicitudes entrantes, controlan los datos proporcionados por

el usuario y las interacciones, y ejecutan adecuadamente la lgica de la aplicacin. Una clase

de controlador llama normalmente a un componente de vista independiente para generar

el HTML para la solicitud.

Las controladoras estn en la lnea de solicitudes de cliente. Ya que en primer lugar reciben

las solicitudes de un cliente y luego traducen dichas solicitudes en instrucciones para el

modelo, donde residen la lgica de dominio de la aplicacin y los datos. Los controladores

tambin son responsables de seleccionar una vista para presentar informacin al usuario.



14

La tabla de enrutamiento en una aplicacin ASP.NET contiene la informacin necesaria para

extraer informacin de una direccin URL entrante y dirigir la solicitud para el componente

de software adecuado.

Para que el controlador de enrutamiento pueda procesar las solicitudes de MVC, deber

configurar la tabla de enrutamiento durante el inicio de la aplicacin. La configuracin de

enrutamiento predeterminada proporcionada por la plantilla de proyecto MVC reside en el

archivo global.asax.

Cuando el motor de enrutamiento encuentra una coincidencia con

http://localhost/home/index/, nuevamente utilizar la plantilla de direccin URL como una

trama para cargar los parmetros de la direccin URL entrante. En este ejemplo, la cadena

"home" se convierte en el parmetro del controlador porque es en la posicin {Controller},

y la cadena index se convierte en el parmetro de accin.

Vistas

Las vistas son los componentes que muestran la interfaz de usuario de la aplicacin.

Normalmente, esta interfaz de usuario se crea a partir de los datos de modelo. Un ejemplo

sera una vista de edicin de una tabla Productos que muestra cuadros de texto, listas

desplegables y casillas basndose en el estado actual de un objeto Productos.

ViewBag

Las vistas pueden recibir datos desde el controlador gracias al ViewBag que devuelve un

diccionario de datos dinmicos. La gran diferencia con ViewData de las versiones anteriores

de MVC, es que ViewBag aprovecha la opcin del framework para generar tipos

dinmicamente y evita tener que hacer conversiones en la vista para obtener el tipo

adecuado de los datos.

Tipos De Vistas

View Page: Vista principal.

LayoutView: Pagina Maestra.

ViewContentPage: Vista que utiliza una pgina Maestra predefinida.

Partial View: Vista que se utiliza desde otra vista y no se puede llamar directamente. Similar como se utilizaban los user controls en WebForms. La vista parcial tiene acceso a su ViewData y al de la vista primaria, pero las actualizaciones de los datos de la vista parcial solo afectan a su viewData y no a la de la vista primaria.



15

View Engines

ASP.NET MVC utiliza view engines para generar las vistas y desde MVC se dispone de dos

motores de vistas incluidos para utilizar directamente:

ASPX: Es el motor de vistas de ASP.NET con tipos personalizados ViewPage, ViewMasterPage y ViewUserControl que heredan de los tipos de pginas existentes .aspx, .ascx, .master.

Razor: Motor de vistas ideal para trabajar proyectos MVC.

Otros: Spark, NDjango, NVelocity

Vistas Strongly-Typed

Las vistas fuertemente tipadas, son vistas asociadas directamente a una clase del modelo.

Lo cual va a permitir enlazar la vista con el modelo o clase relacionada.

Finalmente, tenemos la vista que recibe el modelo (@model) y procede a renderizar la

informacin a travs del Scaffold Template seleccionado:



16

Usando Partial Views

Es un fragmento reusable de contenido y cdigo que puede ser embebido en otra vista y

mejora la usabilidad de una aplicacin mientras se reduce la duplicidad de cdigo.

Hay varias formas de cargar una vista parcial:

Utilizando Html.Partial(): Es un mtodo de extensin adicional. Para llamarlo se usan los mismos parmetros que Html.RenderPartial. La diferencia es que Html.Partial devuelve una IHtmlString con los contenidos de la vista renderizada. Por lo tanto, para incrustar una vista usando Html.Partial() usamos:

Utilizando Html.RenderPartial(): Es un mtodo que le indica al motor de Razor que es un cdigo que debe ejecutar, en lugar de un valor que debe incrustar en la respuesta.

Utilizando Ajax: Tambin se pueden usar plugins de jQuery para cargar vistas parciales utilizando por ejemplo Ajax.

Usando HTML Helpers

Bsicamente un HTML Helper, es un mtodo que devuelve una cadena de texto y esta

cadena de texto puede ser etiquetas HTML, scripts, etc.

Por lo tanto la principal ventaja de usar Html Helpers en ASP.NET MVC es claramente el

evitar tener que estar escribiendo etiquetas de HTML, scripts, etc. continuamente en las

vistas. En ASP.NET MVC tenemos una amplia lista de Helpers

(http://msdn.microsoft.com/en-us/library/system.web.mvc.htmlhelper.aspx).

Por ejemplo, a continuacin se puede observar un HTML Helper para obtener la fecha

actual:

Captulo

3

Javascript and jQuery



18

Introduccin a DOM

Cuando se defini el lenguaje XML, surgi la necesidad de procesar y manipular el

contenido de los archivos XML mediante los lenguajes de programacin tradicionales. XML

es un lenguaje sencillo de escribir pero complejo para procesar y manipular de forma

eficiente. Por este motivo, surgieron algunas tcnicas entre las que se encuentra DOM.

DOM o Document Object Model es un conjunto de utilidades especficamente diseadas

para manipular documentos XML. Por extensin, DOM tambin se puede utilizar para

manipular documentos XHTML y HTML. Tcnicamente, DOM es una API de funciones que

se pueden utilizar para manipular las pginas XHTML de forma rpida y eficiente.

Antes de poder utilizar sus funciones, DOM transforma internamente el archivo XML

original en una estructura ms fcil de manejar formada por una jerarqua de nodos. De esta

forma, DOM transforma el cdigo XML en una serie de nodos interconectados en forma de

rbol.

El rbol generado no slo representa los contenidos del archivo original (mediante los

nodos del rbol) sino que tambin representa sus relaciones (mediante las ramas del rbol

que conectan los nodos).

Aunque en ocasiones DOM se asocia con la programacin web y con JavaScript, la API de

DOM es independiente de cualquier lenguaje de programacin. De hecho, DOM est

disponible en la mayora de lenguajes de programacin comnmente empleados.

Si se considera la siguiente pgina HTML sencilla:

Antes de poder utilizar las funciones de DOM, los navegadores convierten

automticamente la pgina HTML anterior en la siguiente estructura de rbol de nodos que

corresponde a la representacin en forma de rbol de la pgina HTML de ejemplo descrito

en la parte superior:



19

Tipos de nodos

Los documentos XML y HTML tratados por DOM se convierten en una jerarqua de nodos.

Los nodos que representan los documentos pueden ser de diferentes tipos. A continuacin

se detallan los tipos ms importantes:

Document: es el nodo raz de todos los documentos HTML y XML. Todos los dems nodos derivan de l.

DocumentType: es el nodo que contiene la representacin del DTD empleado en la pgina (indicado mediante el DOCTYPE).

Element: representa el contenido definido por un par de etiquetas de apertura y cierre (...) o de una etiqueta abreviada que se abre y se cierra a la vez (). Es el nico nodo que puede tener tanto nodos hijos como atributos.

Attr: representa el par nombre-de-atributo/valor.

Text: almacena el contenido del texto que se encuentra entre una etiqueta de apertura y una de cierre. Tambin almacena el contenido de una seccin de tipo CDATA.

CDataSection: es el nodo que representa una seccin de tipo .

Comment: representa un comentario de XML.

Introduccin a jQuery

jQuery es una biblioteca o framework de JavaScript, creada inicialmente por John Resig,

que permite simplificar la manera de interactuar con los documentos HTML, manipular el

rbol DOM, manejar eventos, desarrollar animaciones y agregar interaccin con la

tecnologa AJAX a pginas web. Fue presentada el 14 de enero de 2006 en el BarCamp NYC.

jQuery es software libre y de cdigo abierto, posee un doble licenciamiento bajo la Licencia

MIT y la Licencia Pblica General de GNU v2, permitiendo su uso en proyectos libres y

privativos. jQuery, al igual que otras bibliotecas, ofrece una serie de funcionalidades

basadas en JavaScript que de otra manera requeriran de mucho ms cdigo, es decir, con

las funciones propias de esta biblioteca se logran grandes resultados en menos tiempo y

espacio.



20

Las empresas Microsoft y Nokia anunciaron que incluirn la biblioteca en sus plataformas.

Microsoft la aadir en su IDE Visual Studio y la usar junto con los frameworks ASP.NET

AJAX y ASP.NET MVC, mientras que Nokia los integrar con su plataforma Web Run-Time.

Para mayor informacin, revise el siguiente link: http://jquery.com/

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). http://es.wikipedia.org/wiki/AJAX

JSON

Acrnimo de JavaScript Object Notation, es un formato ligero para el intercambio de datos.

JSON es un subconjunto de la notacin literal de objetos de JavaScript que no requiere el

uso de XML.

Concretamente las 5 formas con las que jQuery nos permite enviar peticiones asncronas:

$.load() Se trata de la funcin de jQuery que hace que una de las tareas ms comunes de

desarrollar con Ajax sea tan sencillo y claro como veremos en el ejemplo:



21

Este ejemplo, se encarga de lanzar una peticin a la URL /Home (usa URL Rewrite) y

del HTML de respuesta capturamos los elementos #jq-p-Inicio li y lo insertamos

dentro de #links.

$.get() Se trata de una funcin sencilla con la que se puede lanzar peticiones GET al

servidor mediante Ajax.

Mediante el paso de 3 opciones, de las cuales 2 son opciones (condicionales) se

puede lanzar la peticin al fichero (1) con los parmetros (2) y tratar la respuesta

mediante un callback (3).

$.post() Al igual que la anterior, esta funcin permite enviar peticiones POST mediante Ajax.

$.getJSON() Aunque los anteriores tienen la posibilidad de especificar el tipo de retorno, la

opcin ms cmoda es la de usar este mtodo que permite obtener la respuesta

JSON evaluada en la funcin callback.

$.getScript() Aunque tcnicamente no es una peticin Ajax, se trata de una peticin al servidor y

por esa razn se est mencionando:



22

Con este mtodo se puede cargar asncronamente un fichero Javascript y mediante

el parmetro (2) callback podemos ejecutar cdigo Javascript usando el que est

en el fichero js que se desea cargar (1). No es muy recomendable usar esta opcin.

Use jQuery para implementar llamadas AJAX que permitan enviar y recibir

informacin desde el servidor, considerando que dicha informacin debe ser

serializada con JSON.

USO DE PLUGINS DE JQUERY

En las aplicaciones Web, se pueden importar los plugin segn la necesidad en un contexto

especfico para realizar una determinada tarea. En caso de importar varios plugins, se debe

realizar la carga de forma adecuada para no aumentar el trfico de la aplicacin por carga

de elementos estticos. A continuacin se muestra un listado tpico de plugins en una

solucin.

Captulo

4

Working with HTML5

and CSS3 Features



24

HTML5

El HTML5 es la versin ms reciente del Lenguaje de Marcado de Hipertexto (cdigo en que

se programan los sitios web), y cambia los paradigmas de desarrollo y diseo web que se

tenan al introducir herramientas notables como etiquetas que permiten la publicacin de

archivos de audio y video con soportes de distintos cdecs; tags para que los usuarios

dibujen contenidos en 2D y 3D; cambios en los llenados de formularios; y una web

semntica mucho mejor aprovechada.

Caractersticas

Si bien representar una gran cantidad de mejoras, respecto a su versin anterior, stas son

las ms importantes:

Simplificacin: El nuevo cdigo ofrece nuevas formas, ms sencillas, de especificar algunos parmetros y piezas de cdigo.

Contenido multimedia: Reproduccin de audio y video sin necesidad de plug-ins

Animaciones: Posibilidad de mostrar contenidos de manera similar a Adobe Flash, pero prescindiendo de este componente. HTML5 tendr soporte nativo para una tecnologa similar a Flash.

Almacenamiento de datos del lado del cliente: Una diferencia fundamental entre las aplicaciones de escritorio y web era la necesidad, de stas ltimas, de procesar la informacin y consultas en bases de datos siempre en un servidor, haciendo que las aplicaciones sean ms lentas y siempre requeridas de una conexin a Internet constante. HTML5 permitir almacenar y procesar informacin en el cliente, convirtiendo a una aplicacin web a una aplicacin mucho ms parecida a una de escritorio.

Efectos y nueva versin de hojas de estilo CSS: La nueva versin de HTML acompaar a una nueva versin de las hojas de estilo CSS, el CSS3. Se trata de nuevas posibilidades de formato, como por ejemplo la implementacin de sombras, bordes redondeados, etc.

Geo-locacin: Los sitios web podrn saber la ubicacin fsica de la persona que lo visita.

Tipografas no estndar: Hasta ahora, quizs la mayor limitacin que enfrentbamos los diseadores era la imposibilidad de utilizar tipografas no-estndar en nuestros sitios web. Prcticamente todos estaban limitados a aquellas que fueron impuestas por los navegadores principales, como Arial, Times New Roman, Verdana, Tahoma, etc. Considerar que la implementacin de sistemas como Google Fonts hoy nos permite utilizar muchas ms.

Por lo tanto, la nueva versin de HTML contiene elementos dedicados ampliamente a

mejorar la experiencia del usuario en nuestra pgina web, haciendo ms fcil poder agregar

elementos de audio, video y en general del web 2.0 as como organizar sus contenidos

utilizando menos cdigo.

Nuevas Etiquetas Importantes de HTML5

Las etiquetas semnticas, a pesar de ser claves para posicionamiento en buscadores y buen

desarrollo web, no son la razn por la que todo el mundo habla de HTML5. Video, audio y

animacin vectorial estn en la lista de prioridades.



25

Especficamente, las nuevas etiquetas son:

Inserta video sin necesidad de plugins. Es muy fcil usarla, pero cada navegador

soporta cdecs diferentes de video, lo que hace necesario recodificar un video en

mltiples cdecs.

Lo mismo que video, pero sin video. Puede usar mltiples formatos, en especial

mp3, pero tambin depende del navegador.

Input ya exista como la etiqueta para insertar cajas de texto y botones. Ahora es

ms poderosa, con la capacidad de insertar cajas tipo email que se auto-validan,

calendarios tipo "date", sliders, nmeros, entre otras.

Un rea de dibujo vectorial y de bitmaps con Javascript. Es un API de dibujo entero

para Javascript.

Una etiqueta, igual que , para insertar dibujos y animaciones vectoriales al

estilo de Flash. Est basado en el estndar abierto SVG (Scalable Vector Graphics),

derivado de XML.

CANVAS

Canvas permite dibujar en la pgina y actualizar dinmicamente estos dibujos, por medio de

scripts y atendiendo a las acciones del usuario. Todo esto da unas posibilidades de uso tan

grandes como las que disponemos con el plugin de Flash, en lo que respecta a

renderizacin de contenidos dinmicos. Las aplicaciones pueden ser grandes como

podamos imaginar, desde juegos, efectos dinmicos en interfaces de usuario, editores de

cdigo, editores grficos, aplicaciones, efectos 3D, etc.

Cuando se trabaja con Canvas, realmente toda la magia se hace en JavaScript. Primero se

debe referenciar el elemento Canvas y adquirir su contexto (API). Por el momento el nico

contexto disponible es el contexto bidimensional. Se recomienda usar firebug o similares a

la hora de aprender a usar la API para poder ver los cambios en vivo y avanzar con mayor

velocidad:

Una vez que se adquiere el contexto, se puede empezar a dibujar en la superficie del canvas

usando la API a tal efecto documentada en http://bit.ly/l1BMyi. La API bidimensional ofrece

muchas de las herramientas que podemos encontrar en cualquier aplicacin de diseo



26

grfico como Adobe Illustrator o Inkscape: trazos, rellenos, gradientes, sombras, formas y

curvas Bzier. Pero de todas formas se debe especificar cada accin usando JavaScript.

AUDIO

El nuevo elemento permite el uso de diferentes formatos de archivo puesto que los

formatos que soportan los diferentes navegadores no son parte del estndar sino que

depende de la implementacin de cada fabricante. Segn la siguiente tabla, se puede

comprobar qu formatos soportan los navegadores ms usados de forma nativa:

Con el aumento del ancho de banda, los contenidos de vdeo han ido aumentando de forma

vertiginosa hasta convertirse en una de las mayores necesidades de ancho de banda en la

red. El mtodo por excelencia a la hora de reproducir vdeo a travs de un navegador. Tanto

en Safari como en Chrome, algunos formatos dependen de Quicktime y ffmpeg

respectivamente. Chrome realmente no soporta todos los formatos de forma nativa, tan

solo Vorbis y MP3. Adems puede apreciarse, combinando Vorbis y MP3 podremos ofrecer

audio a todos los navegadores mayoritarios.

Para usar esta caracterstica, primero se debe embeber un archivo de audio:

Como ocurre con todas las etiquetas de HTML5 lo que se encuentre entre las etiquetas

audio solo ser tenido en cuenta por navegadores que no soportan la nueva etiqueta.

Obviamente, el ejemplo anterior es extremadamente simple, la etiqueta audio ofrece

muchas ms posibilidades. Por ejemplo, se puede embeber un archivo de audio que se auto

reproduzca por s mismo al cargar la pgina.

El atributo autoplay es un atributo booleano y por lo tanto no necesita de un valor, sin

embargo si se desea escribir cdigo al estilo XHTML puedes usar autoplay="true".



27

Controles

Se pueden cargar los controles bsicos para el elemento audio:

El atributo controls hace que el navegador provea de una interfaz con controles para la

reproduccin y el control del volumen de forma nativa. Los controles del navegador pueden

ser suplantados por nuestros propios controles usando JavaScript a travs de una API que

proporciona mtodos para controlar todos los aspectos de la reproduccin del archivo de

audio:

Buffer

Si se desea que el archivo de audio sea precargado en segundo plano por el navegador,

entonces se puede usar el atributo preload que puede tomar tres posibles valores: none,

auto y metadata. Safari precarga los archivos de audio por defecto, usando

preload="none", se puede asegurar de que eso no ocurra en aquellos contextos en los que

se considere que no es necesario que el navegador precargue los archivos, por ejemplo,

cuando existen muchos archivos en una misma pgina. Si solo tienes un archivo de audio en

la pgina, entonces puede usarse preload="auto":

Existe una forma de definir ms de un archivo de audio en diferentes formatos utilizando

nicamente una etiqueta audio para ello. En lugar de usar el atributo src en la etiqueta de

apertura, se puede utilizar la etiqueta source para poder definir mltiples archivos:

Para el caso de archivos de navegadores que no soporten la funcionalidad de audio, puede

usarse de la siguiente forma:



28

VIDEO

Con el aumento del ancho de banda, los contenidos de vdeo han ido aumentando de forma

vertiginosa hasta convertirse en una de las mayores necesidades de ancho de banda en la

red. El mtodo por excelencia a la hora de reproducir vdeo a travs de un navegador ha

sido utilizar el plugin de Flash. Usar el plugin de flash no es la nica va, se puede usar

tambin Silverlight ya que no tiene complejidad alguna utilizar dicha plataforma para

generar contenido multimedia. Pero todo esto ha cambiado con la llegada de HTML5.

Como siempre y para no perder la costumbre, existe una guerra entre fabricantes de

navegadores sobre el formato de vdeo debe de ser el estndar para la nueva especificacin

y por supuesto no todos reproducen los mismos formatos de forma nativa:

El elemento video es muy parecido al elemento audio, tambin dispone de los atributos

autoplay, loop y preload. Tambin se puede especificar la fuente de un archivo bien usando

el atributo src en la etiqueta de apertura o bien usando el elemento source entre las

etiquetas de apertura y cierre. Adems se puede utilizar los controles que ofrece el

navegador de forma nativa utilizando el atributo controls o bien puedes ofrecer tus propios

controles en JavaScript.

Obviamente, el elemento video ocupa espacio en la ventana, por lo tanto se puede definir

un tamao para el mismo:

Tambin se puede definir una imagen representativa para el vdeo para que sea mostrada al

navegador como portada del elemento antes de la reproduccin usando el atributo poster:

Como siempre y para no marginar a ningn navegador, se puede especificar diferentes

archivos en diferentes formatos para que todos ellos puedan reproducir nuestro contenido:



29

En el caso de usar navegadores que no soporten esta caracterstica, se puede usar el mismo

truco que se usaba con el elemento audio para seguir dando soporte a lo que pronto sern

navegadores obsoletos y aadir el plugin de Flash a travs de la etiqueta object:

Sin entrar en polmicas sobre la conveniencia o no de usar el plugin de Flash, el poder

embeber un reproductor de vdeo de forma nativa en una aplicacin web sera ideal. Pero el

problema con utilizar un reproductor de vdeo basado en plugins es que su contenido est

encerrado y oculto para el resto del documento. Disponer de elementos nativos en HTML

supone la integracin de los mismos con otras tecnologas del navegador como JavaScript y

CSS.

WEB SOCKETS

Es una tecnologa que brinda canales de comunicacin bidireccional, full-duplex a travs de

un sencillo socket TCP. Traducido esto a nuestro mbito ms cotidiano, es simplemente

server-push. Brinda una comunicacin real-time con los usuarios conectados.

Lo primero que se tiene que saber es si el navegador conectado soporta WebSockets, lo

cual se puede comprobar de manera sencilla:

Ahora que se sabe que el navegador soporta WebSockets, se puede empezar creando uno:



30

Una vez creado el objeto WebSocket se puede agregar una serie de listeners para poder

manipular los eventos que ocurran en el mismo:

in dudas que el evento ms importante es el onmessage". El parmetro e.data puede ser

texto plano, json, xml o cualquier otro formato.

Ahora un ejemplo de cuando el cliente quiere comunicarse con el server enviando un

mensaje:

De sta forma se puede tener una comunicacin bidireccional de manera sencilla.

Finalmente WebSockets es aplicable donde un servicio TCP debe ser llevado a una

arquitectura web (como por ejemplo el servicio de mensajera XMPP)

Donde una aplicacin web necesita comunicar datos en real-time a los usuarios (por

ejemplo una aplicacin de stocks online)

WebSockets es un avance significativo para la web donde las aplicaciones en navegadores

se parecen cada vez ms a las de escritorio pero a su vez conectadas entre s.

Para mayor informacin se puede revisar: http://dev.w3.org/html5/websockets/

WEB WORKERS

Los Web Workers permiten ejecutar scripts en paralelo (background). Por ejemplo,

tenemos un proceso costoso en recursos que no es interrumpible, podemos utilizar un

Worker y evitar que el navegador colapse.

Su uso es bastante sencillo, se instancia un Worker que estar en un fichero javascript

independiente, se indica qu hacer cuando se reciba un mensaje y ya solo queda que el

javascript y el Worker se comuniquen envindose mensajes.

Declarar un Worker

Solo se debe crear un worker como si fuera un objeto llamado worker:



31

Pero adems, se tiene que especificar el nombre del archivo que va a ejecutar, en este caso

es "worker.js", con esto ya se tiene un worker listo para que ejecute nuestro script.

Enviar un mensaje al Worker

Los Workers aceptan tambin mensajes, se puede enviar variables o valores directamente.

Simplemente se debe poner el nombre.postMessage(valor) y listo.

Recibir un mensaje en el Worker

Es obvio que al poder enviar informacin, tambin se puede recibirla para procesarla:

En la variable evt se tiene la informacin que devuelve el Worker, y representan los datos

que devuelven los scripts que se procesaron.

Uso de errores de un Worker

Adems, no todo puede salir bien siempre, tambin existe la posibilidad de que se genere

un error:

La misma variable evt puede devolver el error.

Cerrar o detener el Worker

Para poder cerrar o terminar el proceso de un Worker solo se tiene que realizar lo siguiente:

Esto terminara el Worker y dejar de funcionar.

GEOLOCALIZACIN

La Geolocalizacin consiste en obtener la ubicacin exacta del lugar del mundo donde se

encuentre el usuario y opcionalmente compartir esa informacin. La W3C (World Wide

Web Consortium) nos facilita la API (application programming interface) de



32

geolocalizacin, se trata de una interfaz de alto nivel de acceso a la informacin de

localizacin asociada solamente con el dispositivo anfitrin de la aplicacin, tales como

latitud y longitud. La propia API es independiente de las fuentes de informacin de la

ubicacin. Las fuentes comunes de ubicacin incluyen el Sistema de Posicionamiento Global

(GPS o Global Positioning System) y la ubicacin obtenida de seales de la red, como la

direccin IP, RFID, WiFi y Bluetooth direcciones MAC, y GSM / CDMA ID de clula, as como

la entrada del usuario.

La API est diseada para permitir obtener de un shot una sola posicin y/o peticiones

repetidas de las actualizaciones de la posicin, as como la posibilidad de consultar las

posiciones almacenadas en cach. La informacin de ubicacin est representado por

coordenadas de latitud y longitud. La ubicacin se mostrar en un mapa informativo de

Google.

A continuacin se muestra un cdigo que obtiene varias peticiones de posiciones:

En este ejemplo, se tiene tres simples funciones usando JavaScript que ayudarn a

visualizar de manera correcta nuestra ubicacin. La primera de ellas consiste solamente en

obtener la informacin de la ubicacin y en definir si nuestro navegador soporta esta nueva

API:

Si nuestro navegador soporta esta funcionalidad entonces podremos obtener la

informacin de nuestra ubicacin actual, es decir ser una sola peticin. En caso de haber

no lograr obtener la ubicacin o el navegador no sea soportado, mostraremos un mensaje

de error al obtener los datos y por el contrario si logramos obtener la informacin de la

ubicacin mostraremos el mapa:



33

De esta forma se puede brindar mayor funcionalidad y dinamismo a nuestra Aplicacin

Web, donde se puede agregar detalles como compartir la ubicacin con redes sociales o

intercambio de informacin con otras aplicaciones.

Notificaciones

La Notificacin HTML 5 es una especie de notificacin que podemos ofrecer a los usuarios

en ciertos eventos, incluso cuando el usuario est en otra pestaa del navegador. Esta

notificacin puede ser til para eventos como el correo nuevo, nuevo Tweet, etc.

Hay varios pasos para trabajar con las API de notificacin. En primer lugar tenemos que

tener el permiso del usuario para mostrar la notificacin. Se podr mostrar la notificacin,

slo si el usuario ha dado el permiso para el mismo.

Ahora bien, si el usuario ha dado consentimiento para mostrar la notificacin, entonces

podemos ver dos tipos de notificaciones.

Notificacin normal (Default)

Notificacin HTML

En el cdigo se puede apreciar que se ha creado la funcin javascript para mostrar la

notificacin. Tener en cuenta que sta funcin representa slo una forma, porque hay

muchas maneras de extender esta funcin de acuerdo a la necesidad del contexto.



34

Compatibilidad Navegadores

HTML5 enabling script

Para eso vamos a usar el archivo JavaScript html5.js, que debe estar dentro del elemento

head. Esto es para que IE pueda determinar un elemento antes de usarlo.

Existe una condicin dentro del cdigo, el cual le permite ejecutarse solo para navegadores

IE, por lo tanto de esta forma no afectar la funcionalidad en Firefox o Chrome.



35

Por ltimo, el cdigo tiene un peso muy reducido, en bytes; por lo que tambin se

recomienda descargar dicho archivo (https://github.com/aFarkas/html5shiv/).

Modernizr

Es una librera javascript que te permite detectar si el navegador es compatible con ciertas

funcionalidades HTML5 y CSS3. Con ello se puede desarrollar utilizando lo ltimo del

estndar y detectar si el usuario que est navegando es compatible. Con ello si hubiese

alguna funcionalidad que sea vital para la aplicacin que el navegador no lo soporta se

puede ejecutar un cdigo alternativo, por ejemplo con jQuery, para que realice esa misma

funcionalidad.

Es posible descargar una librera con un cdigo fuente comprimido para reducir la cantidad

de transferencia de red para entornos de produccin y otra en modo comprensible por el

programador para un entorno de desarrollo. En el paquete de desarrollo comprimido es

posible seleccionar solo la parte del cdigo de las funcionalidades que se desean utilizar

para que no haya que descargar todas las funcionalidades si solo se utilizan unas pocas y

hacer el fichero ms ligero.

Para usarlo, primero se puede descargar desde la pgina oficial: http://modernizr.com/

Luego se debe referenciar el script:

Modernizr se inicia solo por lo que no es necesario usar ninguna funcin de iniciar.

Existe una serie de funcionalidades que pueden validarse con Modernizr, tales como:

Modernizr.video

Modernizr.video.webm

Modernizr.video.ogg

Modernizr.video.h264

Modernizr.localstorage

Modernizr.webworkers

Modernizr.applicationcache

Modernizr.geolocation

Modernizr.inputtypes

search

number

range

color

tel

url



36

email

date

Modernizr.input.placeholder

Modernizr.input.autofocus

Para mayor detalle de cada funcionalidad, puede revisar el siguiente link:

http://modernizr.com/docs/

IE-CSS3

Internet Explorer 6, 7 e incluso la versin 8, an no soporta ciertas caractersticas del

estndar CSS3. Para ello, generalmente se tienen que hacer uso de hacks o soluciones poco

recomendadas como generar una serie de capas para simular una sombra o un borde

redondeado.

Una solucin muy limpia es la de importar mediante behavior() un fichero .htc que aadir

al navegador (IE6,7,8) algunas de las caractersticas que cualquier otro navegador ya puede

utilizar.

Como podemos observar, se aade la llamada behavior() a la especificacin de la clase

.box. Esto har que Internet Explorer 6+ use la especificacin CSS3 (es decir, la versin sin

prefijos) aplicando los estilos deseados. Para ello usar estndares de Internet Explorer

disponibles nicamente para estos navegadores. Simplemente tendremos que descargar el

fichero .htc (http://fetchak.com/ie-css3/ie-css3.htc) y usarlo como se muestra en el ejemplo.

TRABAJANDO CON CSS 3

Bordes

border-color: Se aaden bordes con degradados (gradientes), pero solo para Mozilla

border-image: Posibilidad de crear bordes redondos y de muchas formas para imgenes, aunque tambin hay incompatibilidades con IE y dems navegadores.

border-radius: Permite hacer cajas con bordes redondeados sin usar trucos.

box-shadow: Sombras con gradientes para las cajas.

Fondos

background-origin & background-clip: Posiciones del fondo con respecto a las cajas, con tres modos diferentes.



37

Background-size: Especificacin del tamao de la imagen de fondo. En pxels o porcentaje.

Multiple backgrounds: Varias imgenes de fondo en el mismo elemento. Su notacin es como hasta ahora, solo que separando con comas cada imagen.

Color

Las novedades ms importantes de todo el CSS3.

Colores HSL: Otra manera de especificar los colores: COLOR, SATURACIN Y LUMINOSIDAD.

Colores HSLA: Lo mismo que el anterior, aadiendo un cuarto dato: El canal alfa (OPACIDAD).

Colores RGBA: Aadir un 4 canal a la notacin RGB de colores: El canal alfa (OPACIDAD).

Opacidad: Lo comentado en los dos puntos anteriores.

Texto

text-shadow: Efectos de sombra en texto.

text-overflow: Cuando el texto desborde, se ponen automticamente tres puntos suspensivos.

text-Wrap: Trunca palabras largas que no caben en una linea. Funciona en Safari.

INTERFAZ DE CSS3

box-sizing: Nuevo atributo para las cajas, para especificar las dimensiones.

resize: Para redimensionar las cajas.

outline: para crear marcos y bordes dobles con la separacin especificada en pxels.

OTROS

media queries

multi-column layout: Propiedades de columnas de texto dentro de la misma caja

Web fonts: Aunque se implement en CSS2, esta propiedad permite que se visualice correctamente un texto con una fuente que el usuario no tenga instalada en su S.O.

Speech: Se implement con CSS2, pero ahora se le aaden (y quitan) muchos

atributos a esta propiedad que sirve para que nuestra pgina pueda ser leda por el

ordenador en voz alta. til para que nuestra web no suponga una barrera para

usuarios con problemas de visin.

Captulo

5

Handling File Upload



39

Para subir archivos se utiliza un Formulario As es, un archivo de cualquier tipo se puede subir utilizando el verbo POST de HTTP. Por lo

tanto es indispensable un formulario HTML, pero con alguna particularidad.

Los formularios HTML soportan ms de un tipo de contenido Uno de los Headers ms importantes de HTTP es el Content-Type el cual indica el tipo de

contenido del mensaje, ya que siempre se representan como texto es necesario saber qu

tipo de contenido es el representado para poder recuperarlo, para indicarlo se utiliza el

estndar MIME.

El tipo de contenido de un formulario es por defecto x-www-form-urlencoded Si se crea un formulario, tanto con GET como con POST y se procede a enviar el archivo; el

tipo de contenido ser x-www-form-urlencoded. Esto indica que el contenido que habr en

el cuerpo del mensaje HTTP ser un conjunto de pares clave-valor, por ejemplo:

nombre=juan&apellido=perez.

El tipo de contenido para enviar un archivo debe ser multipart/form-data Se debe modificar el formulario para que el atributo enctype tome el valor

multipart/formdata el cual indica que el contenido del cuerpo del mensaje HTTP ser un

archivo.

Existen varias formas de enviar un archivo El proceso comn realizar la subida de archivos de forma sncrona, por lo que tiene que

terminar el proceso de upload, para realizar otras acciones. Pero existen otras maneras de

realizar la subida de archivos de forma asncrona a travs de Ajax.

Realizando POST y usando la clase HttpPostedFileBase

En primer lugar, debe implementarse la vista con un formulario y modificando los atributos (method y enctype) segn lo especificado.

Ahora procedemos a observar lo que ha capturado el Fiddler. Observamos el header Content-Type con el multipart/form-data y adicionalmente un atributo boundary que indica dnde comienza y dnde termina el contenido.



40

Finalmente se debe implementar una accin CargarArchivos para recuperar el contenido, que reciba como parmetro una variable de tipo HttpPostedFileBase:

HttpPostedFileBase es una clase abstracta que contiene los mismos mtodos como

HttpPostedFile. Tambin se puede extender para trabajar con

HttpPostedFileBaseModelBinder y HttpFileCollectionValueProvider, en caso se

desee realizar una captura del archivo enviado antes de llegar a la accin, para

poder procesarlo. Puede revisar el siguiente link: http://msdn.microsoft.com/en-

us/library/system.web.httppostedfilebase.aspx

En caso se desee guardar o exportar a un tipo de formato especfico puede usarse la clase FilePathResult:



41

Por lo tanto el cdigo para guardar el archivo, sera de la siguiente forma:

Captulo

6

Integrating with SSRS



43

Pero para este caso, se explicar dos formas nativas de poder cargar reportes sin ningn

componente o plugin externo.

En primer lugar se debe crear un mtodo en la controladora que permita construir el

reporte, para lo cual se tiene que construir dinmica un HTML que tenga como salida un

iframe. Dicho iframe tiene que tener como propiedad el atributo src, que se debe armar

segn la documentacin oficial de parmetros de acceso URL para la carga de Reportes.

Existen 3 tipos de parmetros de acceso URL que se pueden establecer y que estn

detallados en el siguiente link: http://technet.microsoft.com/es-ve/library/ms152835.aspx

Comandos del Visor HTML (rc:)

Comandos del servidor de informes (rs:)

Comandos de elemento web del visor de informes (rv:)

Y por cada tipo de Comandos, existe un listado de parmetros disponibles para utilizar en la

construccin de la URL. En este caso se usarn 3 parmetros:

Parameters Muestra u oculta el rea de parmetros de la barra de herramientas. Si establece

este parmetro en el valor true, se muestra el rea de parmetros de la barra de

herramientas. Si establece este parmetro en false, el rea de parmetros no se

muestra y no puede ser mostrada por el usuario. Si establece este parmetro en un

valor de Collapsed, no se mostrar el rea de parmetros, pero el usuario final

puede alternarla. El valor predeterminado de este parmetro es true.

Command Realiza una accin en un elemento de catlogo, segn el tipo de elemento. El valor

predeterminado se determina mediante el tipo de elemento de catlogo al que se

hace referencia en la cadena de acceso URL. Los valores vlidos son:

o ListChildren: Muestra los elementos secundarios del elemento pasado a la direccin URL. Los elementos secundarios se muestran dentro de una pgina genrica de navegacin por elementos.

o Render: Representa el informe especificado. o GetSharedDatasetDefinition: Muestra la definicin XML asociada a un

conjunto de datos compartido. Para usar este valor, debe tener el permiso para leer definicin de informe en un conjunto de datos compartido.

o GetDataSourceContents: Muestra las propiedades de un origen de datos compartido determinado. Se muestran las propiedades como XML.

o GetResourceContents: Representa un recurso y lo muestra en una pgina HTML.

o GetComponentDefinition: Muestra la definicin XML asociada a un elemento de informe publicado. Para usar este valor, debe tener el permiso Leer contenido en un elemento de informe publicado.

Format Especifica el formato en el que se representar un informe. Los valores habituales

son ATOM, HTML4.0, MHTML, IMAGE, EXCEL, WORD, CSV, PDF, XML. El valor

predeterminado es HTML4.0.

Captulo

7

Web Application

Vulnerabilities



45

TRABAJANDO CON SIMPLEMEMBERSHIP

Es el nuevo modelo de Membership que se introduce en ASP.NET MVC 4 y que permite de

una forma sencilla realizar la configuracin, es mucho ms fcil de usar (a travs de un

wrapper que es la clase WebSecurity) y se adapta al esquema de Base de datos de la toda

la familia SQL Server.

Este nuevo esquema permite generar un nuevo modelo de seguridad y crear una estructura

de tablas que se aplicar sobre el proyecto actual:

La plantilla de Internet Application permite configurar el bootstrap para

SimpleMembership:

Models\AccountModels.cs: Define una cuenta de usuario bsica que incluye DataAnnotations.

Filters\InitializeSimpleMembershipAttribute.cs: Crea la base de datos membership usando el modelo predefinido. Entonces hace llamada a



46

WebSecurity.InitializeDatabaseConnection para realizar las respectivas validaciones y verificaciones sobre las tablas.

Controllers\AccountController.cs: Hace uso de OAuthWebSecurity (para registro OAuth / login y administracin) y WebSecurity.

Finalmente se muestra el grafo de dependencias de

Microsoft.AspNet.Membership.OpenAuth con todas sus jerarquas:

Autenticacin

La autenticacin es el proceso de identificar quin est accediendo a la solicitud. Se permite

elegir entre la autenticacin de Windows o la autenticacin de formularios.

El tipo de autenticacin tambin se puede definir en el archivo de configuracin, por

ejemplo a continuacin se muestra una configuracin de autenticacin por formularios:



47

Autorizacin

La autorizacin es el proceso de determinar cul es el nivel de los permisos de un usuario

autenticado debe tener para acceder a los recursos protegidos.

A continuacin se muestran las propiedades del atributo Authorize:

Existen dos formas de controlar la autorizacin:

Atributo Authorize Decorando las Controladoras o Acciones con el atributo [Authorize], permite

restringir el acceso a ellos.

Propiedades Descripcin

Order Define el orden en que el ActionFilter ser ejecutado.

Roles Obtiene o asigna los roles requeridos para un mtodo de accin.

Users Obtiene o asigna los nombres de usuarios requeridos para acceder al mtodo de accin.

En el siguiente ejemplo se ha decorado con Authorize a la Controladora generando

que slo sea accesible si el usuario est autenticado. En la accin Index se ha

configurado para que el acceso sea nicamente para los usuarios que posean el rol

Administrators:

Filtro de Autorizacin Global En algunos casos es necesario requerir autorizacin en toda la aplicacin. Por lo

tanto, es ms sencillo requerir autorizacin por defecto y seleccionar los pocos

lugares donde se necesite acceso annimo. Para este caso, es una buena idea crear

un filtro global y permitir el acceso annimo en las Controladoras y Acciones

especficas, utilizando el atributo AllowAnonymous (se explicar ms adelante).

Para registrar AuthorizeAttribute como filtro global, se debe aadirlo en

RegisterGlobalFilters:



48

El atributo AllowAnonymous ASP.NET MVC 4 introduce un nuevo filtro, denominado [AllowAnonymous], cuya

funcin es realizar que se ignore cualquier posible atributo [Authorize] que pudiera

haberse aplicado a una accin o controlador.

Es decir, en la misma plantilla de proyectos ASP.NET MVC 4 se utiliza bastante en el

controlador AccountController, tradicionalmente destinado a realizar las tareas de

conexin, registro y desconexin de usuarios.

Y analizando la implementacin del atributo AllowAnonymous se puede observar lo

siguiente:

Salvo la meta-informacin contenida en el AttributeUsage, el resto es una clase

vaca. Aunque al principio puede parecer raro, es muy lgico, ya que la magia lo

realizar el atributo [Authorize] en cuya implementacin se puede encontrar la lgica

que posibilitar la ejecucin de una accin si se encuentra decorada (ella o su

controlador) con [AllowAnonymous], saltndose todas las comprobaciones de

autorizacin:



49

VULNERABILIDADES DE UNA APLICACIN WEB

Uno de los aspectos que se deben controlar es la validacin de entrada de datos de la

aplicacin. Por lo tanto en ASP.NET MVC 4 se permite realizar validaciones en el modelo

mediante DataAnnotations tanto del lado del cliente como del servidor, decorando los

atributos de las clases. Tambin el propio Framework protege por defecto del Cross-Site

Scripting (XSS), una tcnica utilizada para inyectar cdigo malicioso ejecutable en nuestras

aplicaciones. Pero, el problema se presenta si se desea que los usuarios introduzcan cdigo

(HTML por ejemplo) en la aplicacin.

Al intentar insertar cdigo malicioso en la descripcin de un post:

Se mostrar un mensaje de error indicando que se ha detectado un posible valor

Request.Form peligroso en el cliente:



50

ASP.NET nos previene de toda entrada maliciosa. Para que los usuarios puedan insertar

texto enriquecido se deber realizar un par de acciones:

Decorar las propiedades de las clases del modelo con [AllowHtml].

Utilizar en las vistas el Helper @Html.Raw (Propiedad)

Decorar las propiedades y utilizar el Helper mencionado permite la entrada de toda clase de

cdigo, con lo que se debe prevenir de entrada de cdigo malicioso.

Biblioteca AntiXSS

Microsoft, provee de una librera AntiXSS que se encuentra en Nuget Packages. Esta librera

provee de todos los elementos necesarios para proteger contra XSS. AntiXSS aade dos

referencias al proyecto (AntiXxxLibrary y HtmlSanitizationLibrary) que se utilizan en las

Controladoras para sanear los datos de entrada que puedan contener cdigo malicioso.

A continuacin se muestra un ejemplo que utiliza el mtodo GetSafeHtmlFragment para

sanear la propiedad Description. Este mtodo elimina todo cdigo malicioso de entrada:

Cross-Site Request Forgery (CSRF)

Cuando apenas se empieza a controlar el dolor de cabeza generado por el XSS (Cross- Site

Scripting) vemos que existe otra amenaza que lleva tiempo en el mundo de la seguridad

web. El CSRF o Cross-Site Request Forgery tambin conocido como XSRF, al contrario del

XSS que explota la confianza del usuario en un sitio en particular, explota la confianza del

sitio en un usuario en particular. Convencionalmente el CSRF utiliza a un usuario validado

para a travs de este introducir solicitudes "vlidas" que modifiquen el comportamiento de

la aplicacin a favor del atacante.



51

En cuanto a cdigo, se recomienda el control estricto del Session TimeOut de la aplicacin,

de forma que si el usuario no se conecta nuevamente y olvida salir correctamente de la

aplicacin, el servidor deber en un lapso corto de tiempo dar dicha sesin por finalizada.

Otra eficiente forma de controlar el CSRF es la introduccin de un token dinmico adicional

en las solicitudes del cliente que se asocia a la sesin de ste en el servidor y se agrega a

todos los enlaces y solicitudes. Este token ser siempre diferente por sesin y por usuario

por lo que de esta forma se le hace ms difcil al atacante tratar de emular el enlace

necesario para efectuar el ataque debido a que el token es variable.

En el caso de ASP.NET MVC existe un Helper AntiForgeryToken que permitir proteger

contra CSRF de una forma muy sencilla. Por ejemplo sobre una vista:

Ahora especificando la validacin sobre una accin: