Creacin de

aplicaciones Web
utilizando las ltimas
tecnologas ASP.NET
Juan David Nicholls Cardona
Aerolnea de Antioquia
Email: jdnichollsc@Hotmail.com
Twitter: jdnichollsc

Agenda
1)Visin General de MVC.
2)Explorando una nueva
aplicacin MVC.
3)EF Code First y Scaffolding.
4)Despliegue a Microsoft Azure.

Visin General de MVC

ASP .NET MVC 4 y las otras tecnologas Web del .Net

framework ayudan a crear y alojar aplicaciones Web
dinmicas, potentes y extensibles. ASP .NET MVC 4
soporta desarrollo gil basado en pruebas y los ltimos
estndares web como HTML5.

Caractersticas nuevas de ASP.NET

ASP.NET Web API
Controladores asncronos
MVC
Caractersticas
Soporte de los estndares Oauth y
mviles
Modos de
visualizacin

OpenID
Agrupacin y Reduccin

Con ASP.NET 4.5 podemos desarrollar sitios

web altamente funcionales, dinmicos y
escalables que utilicen el cdigo del lado del
cliente y del lado del servidor

Repasando trminos
HTML5
Es la ltima evolucin del lenguaje de marcado HTML con
nuevos elementos, atributos y comportamientos. Tambin
dispone de un conjunto ms amplio de tecnologas que permite
Sitios Web y Aplicaciones ms diversas y de gran alcance.

DOM

(Modelo de Objetos del

Documento)

El DOM define la manera en que objetos y elementos

se relacionan entre s en el navegador y en el
documento. A travs del DOM, los programas pueden
acceder y modificar el contenido, estructura y estilo de
los documentos HTML y XML.
de Estado
REST(Transferencia
Representacional)

Es un tipo de arquitectura de desarrollo

web que se apoya totalmente en el
estndar HTTP, nos permite crear
servicios y aplicaciones que pueden ser
usadas por cualquier dispositivo o
cliente que entienda HTTP.

http://browserdiet.com/es/

Javascr
ipt

Es un lenguaje de programacin interpretado , un lenguaje de

scripting (Un motor de scripts interpreta el cdigo en tiempo
de ejecucin) que tiene una sintaxis similar a C# y es
soportado por la mayora de navegadores web.

AJAX

(Asynchronous JavaScript And

XML)

Permite a los navegadores comunicarse con servidores

Web de forma asncrona utilizando el Objeto
XMLHttpRequest. De esta forma es posible realizar
cambios sobre las pginas sin necesidad de
recargarlas, mejorando la interactividad, velocidad y
usabilidad en las aplicaciones.

JSON

(JavaScript Object
Notation)

Es un formato ligero para el intercambio

de datos. El beneficio de JSON es que
representa mejor la estructura de los
datos y requiere menos codificacin y
procesamiento.

http://www.codecademy.com/es
5
https://www.codeschool.com/courses#all

Modelos, Vistas y
Controladores
Model

View

Controller

Representan los datos y la lgica de

negocio asociada. Estas bsicamente
son Clases que representan objetos
utilizados en el Sitio Web como por
ejemplo un Usuario, un Producto, una
Ciudad, etc

Es un archivo (ASPX => .aspx o Razor => .cshtml o

.vbhtml)
El cual incluye etiquetas HTML y cdigo del lado del
servidor. Un motor de Vista interpreta el archivo,
ejecuta el cdigo del lado del servidor y genera el
HTML que finalmente recibe el navegador
Es una Clase que responde a las peticiones del
Navegador Web, los mtodos pblicos se
consideran Acciones y no existe sobrecarga de
estos. Generalmente
existe un Controlador por cada Clase del Modelo y
por convencin estos terminan en NombreClaseController

ASP.NET
Web
Web
MVC
Browser
Server

ASPX

View

e
s
n
o
Resp

Requ
est
URL
Routing

ngin
E
w
Vie

Razor(clean, fast and fun to type)

Model
Controll
er

Entity
Framewor
k

D
B

Convention over Configuration

Es una filosofa de diseo y una tcnica que busca
aplicar valores predeterminados que se pueden
deducir de la estructura del cdigo.

Razor
Es el motor de vistas predeterminado en ASP.NET
MVC 4 e identifica el cdigo del lado del servidor
con el carcter @.

Objetivos de diseo:

Sntaxis compacta, expresiva y fluida =>

Fcil de aprender =>

Trabajar en cualquier editor de texto =>

mnimiza el nmero
de carcteres necesarios para escribir un archivo permitiendo un flujo de trabajo de
cdificacin rpido y fluido.
Ser productivos rpidamente con un mnimo de
conceptos (Conocimiento del lenguaje de servidor y HTML).
Notepad, Notepad+

+, WebMatrix, Visual Studio, etc.

Gran Intellisense =>

Soporta TDD =>

Previene ataques XSS (Cross-Site Scripting Attacks)

=> Cdifica las etiquetas script o html como <,> antes de representar la vista.

Menos transicin al cdigo HTML, el cdigo es limpio.

Completo soporte con Visual Studio al no ser

diseado para una herramienta en especial.
No tiene dependencias.

Demo
Creando una nueva aplicacin ASP.NET MVC

Agrupacin y Reduccin

(Bundling and

Minification)

Agrupacin y reduccin son dos tcnicas que se pueden utilizar en ASP.NET 4.5 para mejorar el tiempo de carga de
las solicitudes HTTP. Estas bsicamente permiten la reduccin del nmero de solicitudes al servidor, y reducen el
tamao de los archivos solicitados (como CSS y JavaScript).

Reduccin
Realiza una variedad de
diferentes optimizaciones de
cdigo; eliminacin de espacios
en blanco, comentarios y acortar
el nombre de las variables.
La mayora de los navegadoresactualeslimitan el nmero de conexiones simultneas por cada nombre de host a
seis, estose puede mitigar mediante el uso de CDN. Adems el CDN tambin puede proporcionar el
almacenamiento en cach, al igual que Bundle Config mediante la generacin de un token (si algn archivo del
paquete cambia se generar un nuevo token para garantizar que el navegador obtenga los ltimos cambios).

10

Modos de Visualizacin

(Display Modes)

Mediante esta caracterstica podemos crear vistas personalizadas para mviles lo cual permite
mxima flexibilidad (puede ser optimizado para un dispositivo en particular) y menos duplicacin del
esfuerzo en el desarrollo.

Bsicamente podemos detectar los tipos de dispositivos que acceden a nuestro Sitio Web y hacer
uso eficiente del ancho de Banda (En el Diseo Adaptativo no siempre se cumple).
11

Entity Framework

(Framework Object Relational

Mapping)

Un Framework ORM mapea las Tablas y las Vistas de la Base de Datos con Clases que en el caso
de ASP.NET MVC generalmente se definen en el Modelo.
Segn nuestro flujo de trabajo, EF nos provee 3 enfoques distintos para crear el Modelo:

Model First

Mediante un diseador visual (Entity Data Model) creamos nuestro

modelo conceptual y posteriormente Entity Framework se encargar
de crear las Clases y la Base de Datos.

DataBase
First

Mediante la Base de Datos ya existente podemos obtener el Modelo el

cual se podr visualizar en el diseador visual (Entity Data Model). Este
se puede editar y actualizar en cualquier momento para obtener los
cambios realizados en la Base de Datos. Las Clases del Modelo se crean
mediante unas plantillas de generacin de cdigo T4.

Code First

Mediante el cdigo definimos las Clases de dominio de nuestro Modelo

Conceptual, podemos proveer una asignacin adicional y el cdigo de
configuracin para especificar el modelo, a partir de este Entity
Framework crear nuestra Base de datos. Cualquier cambio del Modelo
se puede actualizar en la Base de datos con la ayuda de las Migraciones.

12

Entity Framework Code First

Anotaciones de Datos

(Visualizacin y Edicin)

Mediante el uso de atributos podemos proporcionar a las propiedades de nuestras Clases

Modelo metadatos adicionales que permitan describirlas para ASP.NET MVC.

Propiedad de navegacin virtual? => Permitir la carga

diferida.
HashSet<T> en el constructor? => Clase genrica que
implementa la Interfaz ICollection<T>. Proporciona
14
operaciones de conjuntos de alto rendimiento (No hay
elementos duplicados).

Validacin de entrada de
usuario

Si los datos proporcionados por los usuarios no cumplen con los atributos de validacin definidos mediante
las Anotaciones de Datos, la vista por lo tanto mostrar un mensaje de error de manera estndar.

Clase del Modelo

Vista

ClientValidationEnabled => Habilitar validacin en el lado del cliente

UnobtrusiveJavascriptEnabled => La validacin se realiza con jQuery y atributos HTML5 en vez de utilizar Microsoft Javascript Library con JSON.

15

Demo
Veamos algunos ejemplos

Enlazadores de Modelo

(Model Binders)

Un Enlazador de Modelo es un componente de una Aplicacin ASP.NET MVC que crea una instancia de
una Clase Modelo basado en los datos enviados en la peticin desde el Navegador Web. Este
bsicamente asegura que los datos correctos sean enviados a los parmetros correctos de una Accin de
un Controlador.
Cmo obtiene los parmetros?

Examina la definicin del

Mtodo de Accin al que debe
proporcionar los parmetros.

Busca los parmetros de la

Peticin Web en:
1.

Valores de Formulario
(Request.Form)

2.

Valores de ruta

3.

Cadenas de la consulta
(Request.QueryString)

4.

Archivos

ASP.NET MVC incluye un enlazador de modelo predeterminado: System.Web.Mvc.DefaultModelBinder y podemos crear Enlazadores personalizados.

El invocador de accin predeterminado System.Web.Mvc.ControllerActionInvoker puede ser reemplazado por un invocador de accin personalizado.

17

UML para generar nuestro

Modelo

Para Visual Studio Ultimate

Lenguaje Unificado de Modeladoes el lenguaje de modelado de sistemas de software ms conocido y utilizado en la actualidad. Los
diagramas UML se utilizan para planificar y documentar la arquitectura de la aplicacin y sus componentes.
En Visual Studio para crear un diagrama UML => Nuevo Proyecto, Proyecto de Modelado y agregamos un diagrama de clases.

Package => Espacio de

Nombres para las Clases del
Modelo.
Navigable => Propiedad que
indica que puede ser
accedida desde otra Clase
asociada.

Configuramos la ubicacin en donde

las
herramientas
de
Modelado
generaran las Clases del Modelo
Conceptual, por ejemplo en cdigo C#

Leaf => Propiedad que

indica si va a ser virtual (True
== No va a ser sobrescrita en
una especializacin).

18

Publicacin de una Aplicacin MVC

Web Deploy es una herramienta que simplifica el despliegue de Aplicaciones Web en Servidores Web Microsoft
IIS y Sitios Web en Microsoft Azure. Este empaqueta todo el contenido de la aplicacin web como la
configuracin, las bases de datos y cualquier otro artefacto que puedan ser utilizados para el almacenamiento.

Bsicamente
App_Start

Bin

Content

Conten
t
Script
s
Views

Controlle
rs
Migration
s
Model
Scripts

Web Deployment Tool

e IIS Management
Service

Web.confi
g

Views
Global.as
ax
Web.confi

El cdigo de Servidor se compila

dentro de la .dll del Proyecto

19

Microsoft Azure
Es una plataforma de Cmputo en la Nube alojada en los Centros de Datos de Microsoft que permite
compilar, implementar y administrar aplicaciones rpidamente.
En esta Plataforma como Servicio (Paas) las aplicaciones y los datos son replicados 3 veces y se paga
por lo que se consume (Se escala bajo demanda, es decir gastos de operacin).

Agilidad para las empresas de TI

Las empresas pueden colocar en el mercado aplicaciones y datos en cuestin de minutos.
Los proveedores proporcionan a sus clientes mtricas de uso de los recursos.
El modelo de pago por uso y las mtricas facilitan la utilizacin de cualquier servicio de computo.

Nube
Es un trmino informtico que se refiere a
una infraestructura de cmputo donde se
pueden
interconectar
distintos
dispositivos utilizando distintos medios de
comunicacin.

20

Despliegue a Microsoft
Azure

Demo
Depliegue a Sitios Web Microsoft Azure

Conclusin

ASP.NET MVC y Microsoft Azure nos dan

mayor calidad de vida

24

ASP.NET MVC
No ViewState.
No Postback.
Separacin de tareas o responsabilidades
tanto del Front-End como del Back-End(ModelView-Controller).
Completo control de la generacin de cdigo
HTML.
25
Fcil de realizar pruebas unitarias.

Microsoft Azure
Los desarrolladores se enfocan en la creacin del cdigo para
resolver las necesidades de la empresa.
Los Sitios Web se encuentran en los Servidores de Microsoft con la
mejor conectividad y confiabilidad.
Microsoft Garantiza el 99% de disponibilidad.
https://www.windowsazure.com/es-es/support/legal/sla/
No es necesario instalar y mantener Servidores propios tanto de
Aplicaciones como de Bases de datos.
Los Sitios Web y las Bases de Datos se pueden escalar con mucha
facilidad.
Se paga por lo que se consume.
26

 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or
other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to
changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the
date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.