PersonalizarPublicarCrear Servidor Web (IIS Express 7.5) Base de datos (SQL Compact) Herramienta de desarrollo.

Presentación del tema: "PersonalizarPublicarCrear Servidor Web (IIS Express 7.5) Base de datos (SQL Compact) Herramienta de desarrollo."— Transcripción de la presentación:

1

2

3

4

5 PersonalizarPublicarCrear

6 Servidor Web (IIS Express 7.5) Base de datos (SQL Compact) Herramienta de desarrollo

7 PlantillasPlantillas Galería de aplicaciones web Entorno de programación: Server-side: ASP.net MVC3 “Razor” o PHPServer-side: ASP.net MVC3 “Razor” o PHP Client-side: JS, JQuery, frameworks del lado del cliente (Flash, Silverlight, etc.)Client-side: JS, JQuery, frameworks del lado del cliente (Flash, Silverlight, etc.) Entorno de programación: Server-side: ASP.net MVC3 “Razor” o PHPServer-side: ASP.net MVC3 “Razor” o PHP Client-side: JS, JQuery, frameworks del lado del cliente (Flash, Silverlight, etc.)Client-side: JS, JQuery, frameworks del lado del cliente (Flash, Silverlight, etc.)

8 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.

9 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.).

10

11 http://www.microsoft.com/web/webmatrix/

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31 @{ var name = “John Doe”; Your name: @name } @{ var name = “John Doe”; Your name: @name } @{ var name = “John Doe”; @: Your name: @name } @{ 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”; Your name: @name } @{ var name = “John Doe”; Your name: @name } Opción 2: Salida directa (no HTML) con el tag especial Opción 2: Salida directa (no HTML) con el tag especial

32 Diseño @{ var db = Database.Open("ArtGallery"); var product = db.Query("SELECT * FROM PRODUCTS); } @{ var db = Database.Open("ArtGallery"); var product = db.Query("SELECT * FROM PRODUCTS); } Codificación

33 @{ var db = Database.Open("ArtGallery"); var data = db.Query("SELECT * FROM PRODUCTS); var grid = new WebGrid(data); } @grid.GetHtml(); @{ var db = Database.Open("ArtGallery"); var data = db.Query("SELECT * FROM PRODUCTS); var grid = new WebGrid(data); } @grid.GetHtml(); @grid.GetHtml( columns: grid.Columns( grid.Column("Name", "Product", style: "product"), grid.Column("Description", format:@ @item.Description ), grid.Column("Price", format:@ $@item.Price ) ) @grid.GetHtml( columns: grid.Columns( grid.Column("Name", "Product", style: "product"), grid.Column("Description", format:@ @item.Description ), grid.Column("Price", format:@ $@item.Price ) ) @{ var db = Database.Open("ArtGallery"); var data = db.Query("SELECT * FROM PRODUCTS); var grid = new WebGrid( source: data, defaultSort: "Name", rowsPerPage: 3); } @{ var db = Database.Open("ArtGallery"); var data = db.Query("SELECT * FROM PRODUCTS); var grid = new WebGrid( source: data, defaultSort: "Name", rowsPerPage: 3); }

34 Layout.cshtml Pagina 1 Pagina 2 Pagina 3

35 Simple Layout @RenderBody() Simple Layout @RenderBody() /Shared/_Layout.cshtml @{ Layout = "/Shared/_Layout.cshtml"; } My content goes here @{ Layout = "/Shared/_Layout.cshtml"; } My content goes here MyPage.cshtml

36 Simple Layout @RenderSection("Menu") @RenderBody() Simple Layout @RenderSection("Menu") @RenderBody() /Shared/_Layout.cshtml @{ Layout = "/Shared/_Layout.cshtml"; } @section Menu { Option 1 Option 2 } My content goes here @{ Layout = "/Shared/_Layout.cshtml"; } @section Menu { Option 1 Option 2 } My content goes here MyPage.cshtml

37 Simple Layout @RenderSection("Menu") @RenderBody() @RenderPage("/Shared/_Footer.cshtml") Simple Layout @RenderSection("Menu") @RenderBody() @RenderPage("/Shared/_Footer.cshtml") /Shared/_Layout.cshtml © 2010 Contoso © 2010 Contoso /Shared/_Footer.cshtml

38

39 @{ Themes.Initialize("~/App_Themes","_Default"); } @{ Themes.Initialize("~/App_Themes","_Default"); }

40

41 @{ WebSecurity.InitializeDatabaseConnection("StarterSite", "UserProfile", "UserId", "Email", true); } @{ WebSecurity.InitializeDatabaseConnection("StarterSite", "UserProfile", "UserId", "Email", true); } /_AppStart.cshtml StarterSite database

42 @if (!WebSecurity.IsAuthenticated) { Response.Redirect("/Account/Login"); } @if ( Roles.IsUserInRole("admin")) { Welcome @WebSecurity.CurrentUserName ! } @if (!WebSecurity.IsAuthenticated) { Response.Redirect("/Account/Login"); } @if ( Roles.IsUserInRole("admin")) { Welcome @WebSecurity.CurrentUserName ! }

43

44 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.

45

46 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)

47 @FacebookSocialPlugins.ShowLoginButton(...);

48 @helper HelloWorld(string name = "") { Hello @name } @helper HelloWorld(string name = "") { Hello @name } @helper ShowLoginButton(string buttonText = "") { @buttonText } @helper ShowLoginButton(string buttonText = "") { @buttonText }

49 @functions { public static string SayHello(string name) { return “Hello ” + name; } @functions { public static string SayHello(string name) { return “Hello ” + name; }

50

51

52

53