Post on 21-Nov-2015
description
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
DESARROLLO DE APLICACIONES WEB CON
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.
DESARROLLO DE APLICACIONES WEB CON
ASP.NET MVC4 PLURALSOFT
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.
DESARROLLO DE APLICACIONES WEB CON
ASP.NET MVC4 PLURALSOFT
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.
DESARROLLO DE APLICACIONES WEB CON
ASP.NET MVC4 PLURALSOFT
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
DESARROLLO DE APLICACIONES WEB CON
ASP.NET MVC4 PLURALSOFT
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
DESARROLLO DE APLICACIONES WEB CON
ASP.NET MVC4 PLURALSOFT
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.
DESARROLLO DE APLICACIONES WEB CON
ASP.NET MVC4 PLURALSOFT
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:
DESARROLLO DE APLICACIONES WEB CON
ASP.NET MVC4 PLURALSOFT
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.
DESARROLLO DE APLICACIONES WEB CON
ASP.NET MVC4 PLURALSOFT
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.
DESARROLLO DE APLICACIONES WEB CON
ASP.NET MVC4 PLURALSOFT
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.
DESARROLLO DE APLICACIONES WEB CON
ASP.NET MVC4 PLURALSOFT
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:
DESARROLLO DE APLICACIONES WEB CON
ASP.NET MVC4 PLURALSOFT
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
DESARROLLO DE APLICACIONES WEB CON
ASP.NET MVC4 PLURALSOFT
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:
DESARROLLO DE APLICACIONES WEB CON
ASP.NET MVC4 PLURALSOFT
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.
DESARROLLO DE APLICACIONES WEB CON
ASP.NET MVC4 PLURALSOFT
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:
DESARROLLO DE APLICACIONES WEB CON
ASP.NET MVC4 PLURALSOFT
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:
DESARROLLO DE APLICACIONES WEB CON
ASP.NET MVC4 PLURALSOFT
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
DESARROLLO DE APLICACIONES WEB CON
ASP.NET MVC4 PLURALSOFT
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.
DESARROLLO DE APLICACIONES WEB CON
ASP.NET MVC4 PLURALSOFT
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
DESARROLLO DE APLICACIONES WEB CON
ASP.NET MVC4 PLURALSOFT
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".
DESARROLLO DE APLICACIONES WEB CON
ASP.NET MVC4 PLURALSOFT
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:
DESARROLLO DE APLICACIONES WEB CON
ASP.NET MVC4 PLURALSOFT
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:
DESARROLLO DE APLICACIONES WEB CON
ASP.NET MVC4 PLURALSOFT
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:
DESARROLLO DE APLICACIONES WEB CON
ASP.NET MVC4 PLURALSOFT
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:
DESARROLLO DE APLICACIONES WEB CON
ASP.NET MVC4 PLURALSOFT
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
DESARROLLO DE APLICACIONES WEB CON
ASP.NET MVC4 PLURALSOFT
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:
DESARROLLO DE APLICACIONES WEB CON
ASP.NET MVC4 PLURALSOFT
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.
DESARROLLO DE APLICACIONES WEB CON
ASP.NET MVC4 PLURALSOFT
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.
DESARROLLO DE APLICACIONES WEB CON
ASP.NET MVC4 PLURALSOFT
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
DESARROLLO DE APLICACIONES WEB CON
ASP.NET MVC4 PLURALSOFT
36
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.
DESARROLLO DE APLICACIONES WEB CON
ASP.NET MVC4 PLURALSOFT
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
DESARROLLO DE APLICACIONES WEB CON
ASP.NET MVC4 PLURALSOFT
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.
DESARROLLO DE APLICACIONES WEB CON
ASP.NET MVC4 PLURALSOFT
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:
DESARROLLO DE APLICACIONES WEB CON
ASP.NET MVC4 PLURALSOFT
41
Por lo tanto el cdigo para guardar el archivo, sera de la siguiente forma:
Captulo
6
Integrating with SSRS
DESARROLLO DE APLICACIONES WEB CON
ASP.NET MVC4 PLURALSOFT
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
DESARROLLO DE APLICACIONES WEB CON
ASP.NET MVC4 PLURALSOFT
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
DESARROLLO DE APLICACIONES WEB CON
ASP.NET MVC4 PLURALSOFT
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:
DESARROLLO DE APLICACIONES WEB CON
ASP.NET MVC4 PLURALSOFT
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:
DESARROLLO DE APLICACIONES WEB CON
ASP.NET MVC4 PLURALSOFT
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:
DESARROLLO DE APLICACIONES WEB CON
ASP.NET MVC4 PLURALSOFT
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:
DESARROLLO DE APLICACIONES WEB CON
ASP.NET MVC4 PLURALSOFT
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.
DESARROLLO DE APLICACIONES WEB CON
ASP.NET MVC4 PLURALSOFT
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: