personalizarpublicarcrear servidor web (iis express 7.5) base de datos (sql compact) herramienta de...
TRANSCRIPT
Introduciendo una nueva forma de hacer aplicaciones web: WebMatrix y ASP.net MVC3 “Razor”.Leonard A. Petit-Breuilh [email protected] DuocUC Antonio Varas
WebMatrix
¿Qué es WebMatrix?
Una manera rápida y sencilla de desarrollar sitios y aplicaciones web.
Incluye las ultimas tecnologías Microsoft
También incluye tecnologías y aplicaciones OpenSource
¿Qué es WebMatrix?
Premisa de WebMatrix
Personalizar PublicarCrear
Premisa de WebMatrix
Servidor Web (IIS Express 7.5)
Base de datos (SQL Compact)
Herramienta de desarrollo
Premisa de WebMatrix
PlantillasGalería de
aplicaciones web
Entorno de programación:•Server-side: ASP.net MVC3 “Razor” o PHP•Client-side: JS, JQuery, frameworks del lado del cliente (Flash, Silverlight, etc.)
¿Y Visual Studio 2010?
Mayor control y potencia.Intellisense de código ASP.net.Características avanzadas de IDE (Refactorización, modelado, etc.).
Descarga pequeña (20mb).Frameworks PHP y ASP.Net.Incluye IIS Express, y se pueden descargar Frameworks y aplicaciones vía WebPI.
¿Y Visual Studio 2010?
Descarga muy grande (700mb+).Solo tecnologías Microsoft.No incluye IIS Express.Elevada complejidad para el principiante.
Intellisense limitado a HTML.Herramientas orientadas al desarrollo de aplicaciones básicas.Editor simplificado de texto (sin refactorización, etc.).
En resumen: ¿Para quién es WebMatrix?
Instalando WebMatrixhttp://www.microsoft.com/web/webmatrix/
Iniciar Web Platform Installer (WebPI)
Requerimientos
•Windows XP (SP3), Server 2003 (SP3), Vista (SP2), 7, Server 2008 (SP2) o 2008 R2 (Intel/AMD x86).•1 GB de RAM. (2GB en Windows Vista / 7).•Conexión a Internet.
Instalación vía Web PI
Pantalla de Inicio de WebMatrix
Galería de aplicaciones web
Y Muchas mas…
Web Gallery Posee una serie de aplicaciones web listas para descargar como por ejemplo:
Demo 1: Instalando Wordpress con WebMatrix
Desarrollo de aplicaciones
Plantillas Posee una serie de plantillas de ejemplo para desarrollar aplicaciones web con ASP.net Razor
Sitio en blanco
Sitio de Inicio
Panadería Galería de Fotos
Calendario
Opciones del editor
Configuración del sitio
Archivos que componen el sitio (Editar, crear, etc.)
Crear y Administrar bases de datos
Informes acerca de los sitios (SEO, Links, Tamaños, etc.)
Sitio: Configuración•Configuración de la aplicación (versión de .NET, habilitar PHP, etc.)•Monitorear solicitudes HTTP
Sitio: Archivos
•Crear y Editar Archivos•Coloreado de sintaxis•Intellisense de HTML•Abrir con Visual Studio 2010
Sitio: Bases de Datos•Manipular bases de datos (SQL Server 2005/2008 y MySQL)•Exportar a SQL Server las bases SQL Server CE
Sitio: Informes
Problemas de:•Rendimiento•SEO•URL’s rotas•Etc.
Mis SitiosMis Sitios:La pantalla Mis Sitios sirve para seleccionar el sitio web que se va a editar.
PublicaciónPublicar:La pantalla Publicar permite subir el sitio a un servidor, vía FTP o Web Deploy.
Publicación
Buscar hospedaje, según precio y características (Pronto disponible en Chile).
EjecutarEjecutar:El botón Ejecutar arranca IIS Express y permite ejecutar el sitio tal como si estuviese en un servidor.
Preguntas
ASP.net MVC3 “Razor”
¿Qué es ASP.net MVC3 “Razor”?
Una manera sencilla de desarrollar sitios web.Facilita el mezclar HTML y codigo.Montones de “Helpers”, con funcionalidades listas para usar.
Sintaxis Razor•Bloque de código: @{(código ASP.net)}•Evaluar expresión entre código HTML: @(expresión)•Comentarios: @*(Comentario)*@ o el comentario del lenguaje a usar (// en el caso de C#) dentro de un bloque.•@: es utilizado para escribir directamente a la salida, sin formateo HTML. También se puede usar para esto el tag <text>.•Para imprimir el carácter @ se usa: @@•Eso no es necesario cuando la @ forma parte de un e-mail.
Si dentro de un bloque se coloca HTML o una evaluación de expresión, Razor la detecta automáticamente y la imprime
Imprimiendo un valor@{ var name = “John Doe”; <div> Your name: @name </div>}
@{ var name = “John Doe”; @: Your name: @name}
Opción 3: Salida directa (no HTML)
Opción 1: En un Bloque HTML (por ejemplo un DIV)
@{ var name = “John Doe”; <text> Your name: @name </text>}
Opción 2: Salida directa (no HTML) con el tag especial <text>
Acceso a bases de datos− SQL Compact Edition incluido
− Corre sin servidor, ya que está basado en archivo.
− Diseño y codificación simplificada
Diseño
@{ var db = Database.Open("ArtGallery"); var product = db.Query("SELECT * FROM PRODUCTS); }
Codificación
WebGrid
@{ var db = Database.Open("ArtGallery"); var data = db.Query("SELECT * FROM PRODUCTS);
var grid = new WebGrid(data);}
<div id="grid"> @grid.GetHtml();</div>
<div id="grid"> @grid.GetHtml( columns: grid.Columns( grid.Column("Name", "Product", style: "product"), grid.Column("Description", format:@<i>@item.Description</i>), grid.Column("Price", format:@<text>[email protected]</text>) ) )</div>
@{ var db = Database.Open("ArtGallery"); var data = db.Query("SELECT * FROM PRODUCTS); var grid = new WebGrid( source: data, defaultSort: "Name", rowsPerPage: 3);}
Despliegue de datos en forma de grilla, incluye opciones para paginación y formateo. Tambien soporta actualizaciones vía Ajax. Es uno de los Helpers integrados a Razor.
Layouts y Templates
Layout.cshtml
Pagina1
Pagina 2
Pagina 3
Se puede definir un diseño que puede ser reutilizado en todo el sitioEl objetivo es evitar la repetición innecesaria de código.
Sintaxis de los Layouts
<html> <head> <title>Simple Layout</title> </head> <body> @RenderBody() </body></html>
/Shared/_Layout.cshtml
@{ Layout = "/Shared/_Layout.cshtml";}
<p> My content goes here</p>
MyPage.cshtml
1.Definir un Layout2.Referenciarlo en las páginas
Usando secciones para organizar las paginas
<html> <head> <title>Simple Layout</title> </head> <body> @RenderSection("Menu") @RenderBody() </body></html>
/Shared/_Layout.cshtml@{ Layout = "/Shared/_Layout.cshtml";}
@section Menu { <ul id="pageMenu">
<li>Option 1</li><li>Option 2</li>
</ul>}<p> My content goes here</p>
MyPage.cshtml
Las secciones permiten definir áreas de contenido que cambian entre paginas pero necesitan ser incluidas en un layout
Usar RenderPage para organizar las paginas que no cambian
<html> <head> <title>Simple Layout</title> </head> <body> @RenderSection("Menu") @RenderBody() @RenderPage("/Shared/_Footer.cshtml") </body></html>
/Shared/_Layout.cshtml
<div class="footer"> © 2010 Contoso</div>
/Shared/_Footer.cshtml
RenderPage() ayuda a reutilizar el código de las paginas que no cambian
Temas•Los temas permiten utilizar distintos diseños para los sitios.•Los usuarios pueden intercambiar los temas también.
Usando Temas
@{ Themes.Initialize("~/App_Themes","_Default");}
•Se colocan los temas como carpetas en la carpeta App_Themes•Luego se registra el tema en el archivo app_start•Si un recurso no está redefinido en un Tema, se ocupa lo que está en el tema _Default
Membrecía•Provee la posibilidad de que los usuarios se registren•Organiza a los usuarios en roles•Permite restringir el acceso a las paginas dependiendo del rol•WebMatrix incluye Helpers y Bases de Datos para la configuración sencilla de la membrecía•Algunas plantillas incluyen una carpeta “Admin” que tiene todas las paginas necesarias para hacer membrecía
Configurando Membrecía
@{ WebSecurity.InitializeDatabaseConnection("StarterSite", "UserProfile", "UserId", "Email", true);}
/_AppStart.cshtml
StarterSite database
En una línea de código
Controlando el acceso a las paginas
@if (!WebSecurity.IsAuthenticated) { Response.Redirect("/Account/Login"); }
@if ( Roles.IsUserInRole("admin")) { <span> Welcome <b>@WebSecurity.CurrentUserName</b>! </span>}
El acceso a las paginas se puede controlar basándose en lo siguiente:¿Está el usuario logueado?¿Tiene el usuario acceso a la página?¿El usuario pertenece al rol correcto?
Helpers
Añadir funcionalidad nueva a las páginas
Diseñados para hacer la vida mas facil
Controles AJAX Y mucho mas…
Categorías de Helpers
Helpers HTML
Helpers de API
Hechos para hacer mas facil el mostrar código comunmente usado en una pagina.Ejemplos: Facebook, Twitter, grillas, calendarios, etc.
Hechos para facilitar el acceso de API’s complejas desde el sitio.Ejemplos: Paypal, Odata, Windows Azure Storage, Servicios Web, etc.
Los Helpers se dividen en los siguientes tipos:
Añadiendo HelpersHay dos maneras de añadir Helpers a su sitio web
Administrador de Paquetes
(Aplicación integrada en el
servidor)
Descarga manual(Bajarlo y
copiarlo en la aplicación)
Construyendo un Helper: 3 formas
• Se usa @helper y archivos CSHTML• Para Helpers simples
Usar código en línea
• Clase estática con métodos estáticos CSHTML implementados como @function
• Para Helpers que usen .NET
Usar una clase
• Helpers con clases• Se desarrollan con VS2010
Usar un assembly (DLL)
@FacebookSocialPlugins.ShowLoginButton(...);
•Se usa un CSHTML•Se guarda en la carpeta App_Code•El nombre del archivo es el nombre de la clase
Helpers: Sintaxis en línea
Helpers: Sintaxis en línea
@helper HelloWorld(string name = "") { <div>Hello @name</div> }
@helper ShowLoginButton(string buttonText = "") { <fb:login-button>@buttonText</fb:login-button> }
•@helper se usa para crear atajos HTML, y para empaquetar HTML que se ocupa habitualmente. •Permiten el uso de parámetros•Por ejemplo: El Plugin Social de Facebook está hecho como un Helper con sintaxis en línea @helper.
Helpers: Sintaxis en línea
@functions {public static string SayHello(string name) {
return “Hello ” + name;}
}
•@function se usa para generar funciones que retornen valores, idealmente para envolver la funcionalidad de ciertas api’s complejas.•El Helper de Twitter está construido con funciones @function.
Demo 2: Analizando la aplicación Galería Fotográfica.
Recursos
http://www.microsoft.com/web/webmatrix
• http://bit.ly/h8Bsbd• www.facebook.com/EstudiantesMS
Preguntas
© 2011 Microsoft Corporation. All rights reserved. Microsoft, Visual Studio, WebMatrix, the Visual Studio logo, and [list other trademarks referenced] are trademarks of the Microsoft group of companies.
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.