Download pdf - Manual Microsoft Webmatrix

Tu mejor ayuda para aprender a hacer webswww.desarrolloweb.com

Manual de Microsoft WebMatrixManual de la herramienta WebMatrix de Microsoft, con la que podremos crear proyectos en ASP.NET de forma sencilla, pero que tambin nos permitir trabajar con otras tecnologas de desarrollo como PHP.

Autores del manual

Este manual ha sido realizado por los siguientes colaboradores de DesarrolloWeb.com:

Javier HolgueraDesarrollador senior con tecnologa .NET en Payvision.http://www.javierholguera.com/technoblog/ (11 captulos)

Miguel Angel AlvarezDirector de DesarrolloWeb.comhttp://www.desarrolloweb.com (2 captulos)

Manual de Microsoft WebMatrix: www.desarrolloweb.com/manuales/manual-microsoft-webmatrix.html Los manuales de DesarrolloWeb.com tienen el copyright de sus autores. No reproducir sin autorizacin.

1


Microsoft WebMatrix Instalacin y primera pruebaPresentacin de Microsoft Web Matrix y gua para la instalacin de la herramienta y una primera prueba de uso.

Cuando alguien se inicia en una tecnologa, ya sea .NET, Java, PHP, etc., siempre se enfrenta con un primer desafo en las herramientas con las que va a tener que empezar a trabajar. Cualquiera que se haya aproximado por primera vez a Java o .NET se habr sentido al menos un poco intimidado por Eclipse o Visual Studio.

Microsoft lleva tiempo intentando ofrecer herramientas sencillas que permitan a los desarrolladores iniciarse con sus tecnologas de la forma ms indolora posible. Como fruto de este esfuerzo ha nacido WebMatrix.

Introduccin a WebMatrixMicrosoft WebMatrix es una herramienta con la que podremos empezar a crear proyectos con ASP.NET de una forma muy sencilla, pero que tambin nos permitira, para aquellos cuyo dominio actual sea PHP, trabajar con esta tecnologa. Pero como no slo de frameworks vive el desarrollador, en el captulo de bases de datos tambin podremos gozar de una gran interoperabilidad, puesto que WebMatrix es capaz de manejar SQL Server Compact (un versin de SQL Server especialmente pensado para proyectos web), SQL Server e incluso MySQL, para que ningn desarrollador PHP eche de menos las herramientas a las que ms acostumbrado est.

De este modo, aquellos que empiecen a utilizar WebMatrix podrn hacerlo con las tecnologas que ya conocen y, posteriormente si estn interesados en ello, crear proyectos con nuevas tecnologas sin salir del entorno que ya conocen bien.

En este artculo veremos cmo instalar WebMatrix y nos familiarizaremos con la organizacin de la interfaz de la herramienta y la forma en que se utiliza.

Instalacin de WebMatrixActualmente Microsoft ha simplificado la instalacin de la mayora de sus productos web mediante el uso de Web Platform Installer, un programa gracias al que con un par de clicks tendremos no slo la aplicacin que queramos instalar sino las dependencias de la misma. Para utilizarlo, simplemente tenemos que navegar a www.microsoft.com/web/webmatrix/download.

Desde aqu hay que pulsar sobre el botn verde Install Now para descargarnos un pequeo instalador (apenas 85KB).

Atencin: Es muy importante asegurarse de que el combo de idioma de la parte superior izquierda est configurado para mostrarnos la pgina en English (United States). La razn es que si seleccionamos Espaol, nos bajar la versin 2.0 de Web Platform Installer, en lugar de 3.0 que es la que necesitamos para poder descargarnos WebMatrix. Ojo! sobre este asunto, que es de vital importancia al menos en el momento de escribir este artculo.


2


La siguiente imagen nos muestra cmo es la pantalla y el combo que tenemos que configurar correctamente.

Una vez que se haya bajado Web Platform Installer y est funcionando, slo tenemos que pulsar en Products y, posteriormente, en el botn Add junto a Microsoft WebMatrix Beta 3 para seleccionarlo como descarga.


3


Tras pulsar sobre el botn Install nos aparecer una pantalla a modo de resumen, indicndonos las dependencias que es necesario instalar para que WebMatrix funcione. Esto incluye, entre otros, la base de datos SQL Server Compact o un cliente de la tecnologa WebDeploy, que facilita los despliegues. Aceptando se iniciar el proceso de instalacin. Cuando termine procederemos a cerrar la pantalla y arrancar, posteriormente, WebMatrix desde el enlace correspondiente en el men de Inicio.

La pantalla de Web Platform Installer nos ofrece un enlace en cuyo interior podemos leer Launch, que nos permitira arrancar WebMatrix directamente desde ah. Sin embargo, debemos tener en cuenta que de hacerlo de esta forma, estaremos ejecutando WebMatrix con los permisos de Administrador de la mquina (puesto que Web Platform Installer los requiere para realizar las instalaciones que le indiquemos), lo que puede no ser nuestra intencin.

Primeras pruebasAl arrancar WebMatrix podremos elegir siempre entre cuatro opciones.

My Sites: desde esta opcin podremos acceder a los proyectos que ya hayamos creado con anterioridad con WebMatrix.

Site From Web Gallery: esta opcin nos da acceso a poder modificar con WebMatrix muchas de las aplicaciones web ms populares, como WordPress, Umbraco, DotNetNuke, etc.

Site From Template: podemos usar este men si queremos crear un sitio nuevo, pero a partir de una cierta estructura. En este men tendremos, entre otras, plantillas para galeras de fotos, listas de deseos, etc. Tambin incluye un sitio vaco.

Site From Folder: con esta opcin podremos crear un sitio web a partir del contenido de un directorio ya existente, ideal si tenemos un proyecto ya creado con otra herramienta que queremos mejorar con WebMatrix.

Supongamos que queremos empezar desde cero. Tendramos que elegir la opcin de Site From Template, pulsar sobre Empty Site, darle un nombre al nuevo sitio que estamos a punto de crear y pulsar en OK. La siguiente imagen nos indica qu campos habra que rellenar para lograrlo.


4


Este nuevo proyecto crear una serie de ficheros y carpetas que, en caso de buscarlas, encontraremos alojadas en el directorio My Web Sites, dentro de una carpeta con el mismo nombre que le hayamos dado al proyecto web. El directorio My Web Sites podemos encontrarlo en el directorio de Documentos del usuario con el que estemos ejecutando la aplicacin.

Una vez hayamos pulsado sobre el botn de OK la herramienta da paso a la pantalla principal de trabajo de WebMatrix. En el siguiente artculo veremos las distintas partes que contiene la pantalla inicial de WebMatrix.

Artculo por Javier Holguera

Pantalla Principal de WebMatrixComenzamos a describir el uso de la herramienta para desarrolladores de Microsoft WebMatrix dedicando un vistazo en profundidad a la pantalla principal del programa.

WebMatrix es una herramienta con la que Microsoft tiene la intencin de facilitar la vida a los desarrolladores que quieran realizar proyectos web con ASP.NET, pero que tambin admite diversas otras tecnologas. En el artculo anterior explicamos cmo se puede instalar WebMatrix y en este artculo veremos cules son los componentes de la pantalla principal que nos encontraremos al trabajar con el programa.


5


En la pantalla principal, tal como podemos ver en la siguiente imagen, podemos distinguir cuatro zonas fundamentales.

Banda de controles superiorEn la zona superior tenemos la ya clsica Ribbon que viera la luz en Office 2007 y que poco a poco se extiende por la mayora de productos de Microsoft. En esta zona tenemos dos partes bien diferenciadas: a la izquierda se sitan controles para manejar el servidor web IIS que lleva en su interior WebMatrix. Podemos, por tanto, desplegar, arrancar, parar, etc., nuestros proyectos web.

A la derecha de la primera lnea vertical de divisin se sitan controles que son sensibles al contexto. Esto quiere decir que, en funcin del espacio de trabajo que estemos usando en ese momento en WebMatrix, aparecern distintos conjuntos de botones que nos faciliten acciones nicamente relacionadas con ese espacio de trabajo. Por ejemplo, cuando tengamos seleccionado el espacio de trabajo de Ficheros, los botones nos permitirn acciones como crear uno nuevo, guardar, abrir, etc.; en cambio, con el espacio de trabajo de bases de datos, los botones nos ofrecern crear una nueva base de datos, ejecutar una consulta, etc.

Espacios de trabajo de la aplicacinEn la parte inferior izquierda podemos seleccionar entre los diferentes espacios de trabajo de la aplicacin. WebMatrix es una herramienta que pretende abarcar todas las funciones que un desarrollo web tiene que realizar para poner una aplicacin web en produccin. Para mantener un conjunto de funcionalidades tan dispar accesible y organizado, los espacios de trabajo permiten mostrar y ocultar botones y mens en funcin del tipo de trabajo que queramos realizar en ese momento con el proyecto.

Existen cuatro espacios de trabajo para elegir:

Site: este espacio de trabajo nos da acceso a funciones generales del sitio, como establecer una nueva configuracin


6


de despliegue, investigar las peticiones que se han realizado a nuestro sitio alojado en el IIS embebido en WebMatrix, configurar la ruta virtual de la aplicacin, etc.

Files: este espacio de trabajo sirve para gestionar los ficheros que componen nuestro proyecto, incluida su edicin. Desde aqu haremos buena parte del trabajo de desarrollo, como son editar y modificar nuestro cdigo, crear carpetas, etc.

Databases: este espacio de trabajo nos permite manejar las bases de datos sobre las que van a correr nuestros sitios web. Desde aqu ser posible crear nuevas bases de datos, nuevas tablas, aadir datos, consultarlos, etc.

Reports: desde este espacio de trabajo podremos realizar funciones de SEO sobre nuestros sitios web, con el objetivo de mejorar su posicionamiento y su amigabilidad hacia los buscadores web.

Pulsar en cada uno de estos espacios de trabajo har que la funcionalidad que nos ofrece la pantalla principal cambie.

Elementos del proyectoEn la parte izquierda de la ventana, sobre la seleccin de espacios de trabajo del proyecto, podemos comprobar de qu elementos se compone nuestro sitio. Esta zona es sensible al espacio de trabajo elegido, con lo que, cuando tengamos seleccionado el espacio de trabajo de ficheros, podremos ver qu archivos y carpetas componen el proyecto. En cambio, al pulsar sobre bases de datos, nos aparecern las tablas, conexiones, etc., que hemos definido hasta ese momento.

Elementos que componen el sitio con espacio de

trabajo base de datos

Elementos que componen el sitio con espacio de

trabajo de ficheros.

Zona centralLa zona central es la zona de trabajo. Cuando abramos un elemento del proyecto, ser en esta zona donde se cargar para que podamos interactuar con l. En esta zona se nos cargar, por ejemplo, el editor de cdigo que nos permite modificar ficheros ASP, ASP.NET. PHP, HTML, JavaScript y CSS.

Tambin aqu podremos interactuar con nuestras base de datos, obteniendo tanto resultados de consultas ejecutadas contra


7


ellas, como introduciendo nuevas tuplas en ellas.

Conclusin de la presentacin de WebMatrixHasta el momento hemos tratado simplemente de presentar las caractersticas principales de esta herramienta de Microsoft. Hemos visto cmo instalar WebMatrix, cmo crear un primer proyecto y cmo est organizada la ventana principal sobre la que se realiza la mayor parte del trabajo. A partir de ahora nos ser ms sencillo ir aprendiendo las distintas posibilidades que WebMatrix nos ofrece para cada uno de los distintos roles que un desarrollador web termina asumiendo cuando crea un proyecto web: un poco de administrador del servidor web, un poco de administrador de bases de datos, algo de SEO y mucho de programador.

En sucesivos artculos continuaremos hablando sobre esta herramienta y cmo utilizarla para hacer proyectos web.

Enlaces de referencia sobre WebMatrixAntes de terminar esta introduccin a WebMatrix queremos ofrecer algunos enlaces donde los interesados pueden obtener ms informacin, directamente de los sitios de Microsoft.

Centro de desarrollo ASP.NET: http://msdn.microsoft.com/es-es/asp.net/default.aspx Sitio Oficial de WebMatrix: http://www.microsoft.com/web/webmatrix/ Descarga de WebMatrix: www.microsoft.com/web/webmatrix/download


Videotutorial: instalacin y configuracin de WebMatrixVideotutorial en el que realizamos la instalacin de la herramienta gratuita WebMatrix, para el desarrollo web multiplataforma.

WebMatrix es una de las herramientas para desarrolladores que tena pendiente revisar a fondo. Lo cierto es que en DesarrolloWeb.com ya la habamos tratado en diversos artculos e incluso tenemos un Manual de WebMatrix que contiene cantidad de informacin interesante sobre este software.

Dicho manual est fabulosamente desarrollado por nuestro colaborador Javier Holguera, que sinceramente tiene mucho ms dominio sobre la plataforma que el que escribe, por ello mi idea es simplemente evaluar qu tan sencillo es WebMatrix y evaluar la posibilidad de usarlo en el da a da. De paso, me planteo el objetivo de crear una serie de vdeos para complementar la informacin que venimos publicando en DesarrolloWeb.com.

Como quizs se sepa, WebMatrix es un programa gratuito de Microsoft que concentra todo lo que un desarrollador web puede necesitar para crear pginas con distintas tecnologas. Tiene, entre otras cosas, un editor de texto para programadores, un cliente para la gestin de bases de datos, una herramienta de publicacin en servidores de Internet y una galera de aplicaciones web listas para usar que se pueden configurar y poner en marcha a golpe de ratn. Todo ello forma un paquete de herramientas esenciales que en principio llama mucho la atencin.

De modo que esta es mi primera participacin en las ayudas que ofrece DesarrolloWeb.com sobre WebMatrix y para comenzar que mejor que hacer un vdeo sobre la instalacin del programa? Claro que cualquier persona con unos conocimientos mnimos de informtica debe saber perfectamente cmo instalar un programa, por lo que lo complementar con otras informaciones.

Se trata de hacer un repaso general a las opciones de WebMatrix y realizar un primer proyecto de pgina web de prueba. Durante el vdeo se vern:

Las opciones principales de la pantalla de bienvenida de WebMatrix. La creacin de un primer proyecto de sitio web vaco. Creacin de una primera pgina en el proyecto.


8


Asociacin de recursos externos al proyecto, como una fotografa.

Nota: En el vdeo vers la URL de la pgina de descarga, pero para que la tengas a mano, coloco aqu el link para hacer el download de WebMatrix: http://www.microsoft.com/web/webmatrix/.

Adems, haremos un rpido recorrido por otras de las opciones que llaman la atencin sobre WebMatrix, como el gestor de bases de datos y la herramienta de publicacin web.

Como vers, es un vdeo cortito, pero que seguro puede servir de ayuda a muchas personas que estn deseando tener una herramienta integrada para el desarrollo de sus propios proyectos, que funciona muy bien con tecnologas Microsoft, como ASP.NET o SQL Server, pero tambin con herramientas de cdigo abierto como PHP o MySQL.

Pero antes de dejarte con el videotutorial queremos avisarte para que no pierdas de vista esta serie de vdeos sobre WebMatrix, pues ya mismo vamos a publicar tambin el proceso para instalar el sistema de blogs Wordpress sobre WebMatrix, de una manera que cualquier persona, incluso sin conocimientos de servidores o programacin, podr disponer de su propio blog en pocos minutos.

Artculo por Miguel Angel Alvarez

Videotutorial de la Instalacin de WordPress sobre WebMatrixVdeo sobre cmo instalar el sistema de blogs WordPress basado en PHP y MySQL sobre la plataforma WebMatrix, de una manera rpida, sencilla y al alcance de cualquier persona.

Este es el segundo vdeo que publicamos sobre WebMatrix, un programa para desarrolladores de pginas web gratuito y que ofrece diversas ventajas y que merece la pena conocer. En el anterior videotutorial ya presentamos qu es WebMatrix, cmo instalarlo y sus funcionalidades principales.

Webmatrix ofrece una herramienta para instalar WordPress as como muchas otras aplicaciones web, a golpe de ratn. A travs del "Web Gallery" de WebMatrix podemos escoger entre decenas de aplicaciones desarrolladas por terceros ya listas para usar, basadas en PHP, ASP, ASP.NET y diferentes motores de bases de datos.

Una de esas aplicaciones web es el ms que famoso sistema de blogs WordPress, de cdigo abierto, que funciona bajo PHP y MySQL. En este vdeo mostraremos el proceso para disponer de nuestro propio blog WordPress en minutos y de una manera tan sencilla que cualquier persona, casi sin conocimientos tcnicos, podra realizarlo.

Poner en marcha un blog en WordPress no es que sea nada extremadamente difcil, pero s requiere realizar varios pasos que pueden resultar un poco complicados para personas sin experiencia en el desarrollo de webs con bases de datos. En DesarrolloWeb.com ya habamos publicado un completo tutorial sobre la instalacin de WordPress, pero sin lugar a dudas, a travs de WebMatrix la cosa todava resultar ms sencilla, para las personas que tienen experiencia, pero sobre todo para aquellas que nunca han escrito una lnea de cdigo.

Nota: Cabe aclarar que WebMatrix es un software pensado para desarrolladores web, aunque estemos remarcando que determinadas de sus funcionalidades sirvan tambin para que personas sin experiencia tengan acceso a herramientas de cdigo libre para crear en instantes aplicaciones web diversas, como tiendas, blogs, foros, etc. Puedes encontrar ms informacin en el Manual de WebMatrix.

WebMatrix tiene montado un proceso bien sencillo para instalar las aplicaciones web de su Web Gallery, durante el cual se descarga la aplicacin web en la que estamos interesados, pero tambin toda una serie de programas y herramientas que puedan resultar necesarias para que esa aplicacin web pueda ponerse en marcha. Adems configura todo el servidor para ti, de modo que no tendrs nada ms que hacer que indicar cul es la clave que querrs utilizar para el acceso a las herramientas instaladas.

En el vdeo podrs seguir la serie de pasos necesarios para la instalacin, como:

Seleccin de la aplicacin web deseada en el Web Gallery. Descarga e instalacin del software necesario para ejecutar dicha aplicacin web en nuestro ordenador (proceso


9


totalmente automtico) Configuracin de WordPress necesaria a realizar en el primer acceso a la aplicacin.

Nota: Recuerda que el link para descarga y las instrucciones para la instalacin las puedes ver en el vdeo anterior sobre WebMatrix.

Adems, para agregar un valor adicional al videotutorial, mostraremos cmo se maneja la herramienta de actualizacin del blog WordPress para dar de alta un artculo o "post". Finalizaremos mostrando cmo se ve nuestro blog una vez ha sido publicado el primer post.

Esperamos que este vdeo te parezca interesante y aprendas bastante con esta prctica. Vers como instalar tu propio WordPress es algo extremadamente sencillo gracias a WebMatrix. Y recuerda que existe un completo manual en DesarrolloWeb.com para aprender a manejar WordPress, que sin duda te vendr muy bien si comienzas a administrar tu blog a travs de esta interesante aplicacin web.

Artculo por Miguel Angel Alvarez

La Sintaxis RazorIniciamos las explicaciones sobre Razor, una de las sintaxis con las que podemos crear aplicaciones web con la herramienta WebMatrix de Microsoft.

Despus de haber hablado sobre WebMatrix en anteriores entregas del Manual de WebMatrix, vamos a comenzar a poner manos en la masa y ver cmo se crearan aplicaciones web con esta herramienta. Pero antes queremos comenzar explicando una sintaxis que utilizaremos en nuestro da a da, llamada Razor, que quizs el lector no conozca todava.

Este es el primero de tres artculos que van a tratar de dar a conocer una de las sintaxis que se utiliza para crear aplicaciones web en WebMatrix. Su nombre es Razor y, originalmente, naci como opcin para programar aplicaciones web en ASP.NET MVC 3.

Motor de VistasRazor no es en realidad un lenguaje de programacin, sino simplemente un motor de vistas. Qu significa esto? Bsicamente, hay que analizar qu significan las siglas MVC: corresponden al trmino Modelo-Vista-Controlador, forma en que se denomina a uno de los patrones de arquitectura ms populares. En MVC se pretende separar completamente la informacin que gestiona nuestra aplicacin (el Modelo) de la forma en que se presenta (la Vista), desacoplando ambas capas mediante una capa intermedia (el Controlador) que contendr toda la lgica para trasladar los datos a la presentacin visual que deseamos realizar.

ASP.NET MVC 3 respeta firmemente estos principios, hasta el punto de existir varias sintaxis con las que expresar de qu modo queremos crear nuestra vista, siendo 100% reutilizables tanto los controladores como los modelos que tengamos por debajo. De este modo han ido naciendo distintos motores de vistas, como Razor, que nos permiten crear dichas vistas de la forma en que nos sintamos ms cmodos.

Objetivos de RazorSon varios los objetivos que Microsoft se ha marcado en la creacin de este motor de vistas, entre los que destacaramos:

Compacto, expresivo y fluido: buscan reducir la cantidad de cdigo que necesitamos para crear las vistas, evitando que tengamos que denotar de una forma especial cada lnea de cdigo procedural. El compilador ser lo suficientemente inteligente como para inferir, en muchas ocasiones, qu tipo de cdigo estamos escribiendo.

Fcil de aprender: aunque esto es siempre relativo, puesto que depende del bagaje previo del desarrollador y de sus capacidades, con slo este artculo y los dos prximos dejaremos asentados conceptos lo suficientemente amplios como para hacer frente al 80% de la funcionalidad que podamos necesitar de Razor.

Funciona en cualquier editor de texto, luego no vamos a tener que estar anclados a Visual Studio, WebMatrix o


10


cualquier otra herramienta para crear nuestros ficheros Razor. Obviamente, el soporte al lenguaje es superior en una herramienta como Visual Studio, donde tendremos toda la potencia de IntelliSense a nuestro alcance, que si editamos simplemente con el Block de Notas, pero la decisin ltima ser nuestra.

Testeable: podremos crear tests unitarios de las vistas.

El Hola Mundo con RazorVamos a hacer nuestro primer y clsico Hola Mundo con Razor. Para ello, nos vamos a apoyar en WebMatrix. En un artculo anterior vimos cmo podemos crear un proyecto vaco. Para aadir un fichero a este proyecto tenemos que situarnos en el espacio de trabajo de Files y, posteriormente, pulsar el botn New en la barra de botones superior. Al pulsar New se nos desplegarn dos opciones bajo l: New File y New Folder. Elegimos la primera puesto que slo queremos aadir un fichero. Veremos entonces aparecer una pantalla como la siguiente:

En esta pantalla simplemente tenemos que darle un nombre al nuevo fichero (algo como HolaMundo.cshtml y despus de aceptar, en el fichero que nos aparecer listo para editar, sustituir el HTML que nos crea por defecto por algo parecido a esto: @{ var nombre = "Pedro"; }

Hola @nombre, son las @DateTime.Now Este ejemplo es algo ms complejo que el clsico Hola Mundo, pero nos permitir analizar unos cuantos detalles fundamentales de Razor.

En primer lugar, como se puede ver, es posible mezclar cdigo procedural y cdigo HTML de forma sencilla y sin tener que recurrir a montones de secuencias


se utilice en el lenguaje al que uno est acostumbrado.

Aqu, con una simple @, el compilador de Razor ser capaz de interpretar que estamos describiendo cdigo procedural, ejecutable en el servidor en el momento de mandar la pgina al navegador bajo solicitud, en lugar de HTML puro tratable como simple texto. En este ejemplo vemos dos apariciones de esta @ con la que nos iremos familiarizando cada vez ms:

En la primera llamada, @nombre, estamos haciendo referencia a una variable. Esta variable est definida en la zona superior del cdigo. Esta definicin es cdigo C#. Este detalle es importante: en Razor todo el cdigo que no es HTML (es decir, el cdigo procedural) se puede programar en C# y en VB.NET a da de hoy.

En esta primera llamada, en el cdigo procedural, le hemos dado un valor a la variable nombre, una cadena de texto que contiene el nombre propio Pedro.

En la segunda llamada, @DateTime.Now, estamos haciendo uso de la propiedad de un objeto para obtener la fecha actual. Veremos ms adelante qu significa esto.

El resultado de este bloque de informacin sera una pgina dinmica, puesto con cada nueva recarga de la misma obtendremos un saludo con la fecha en este instante. La siguiente imagen nos muestra el resultado.

ConclusionesHemos aprendido que Razor es un motor de vistas, hemos desgranado sus objetivos y hemos hecho un primer ejemplo, el clsico Hola Mundo pero con algo ms de funcionalidad. En los prximos dos artculos analizaremos ms en profundidad los aspectos fundamentales del lenguaje, como la definicin de clases, objetos, variables, tipos de datos, bucles, etc.



12


Aspectos fundamentales de RazorEn este artculo vamos a conocer algunos detalles fundamentales sobre la sintaxis Razor, como los caracteres especiales de codificacin, las clases y objetos as como las variables y cadenas.

Estamos aprendiendo acerca del desarrollo de aplicaciones con WebMatrix y dedicando nuestros esfuerzos en estos momentos a aprender Razor.

En el primer artculo sobre esta serie de tres dedicada a Razor conocimos que la denominacin ms correcta para Razor es la de motor de vistas, descubrimos los objetivos que busca su creacin y aprendimos a crear el clsico Hola Mundo. En este artculo empezaremos a desgranar de forma individual los aspectos fundamentales de Razor.

Los caracteres especiales: @, { } y ;Hay tres caracteres fundamentales para Razor: la arroba (@), las llaves ({ }) y el punto y coma (;). En cuanto a la arroba, nos permite introducir fragmentos de cdigo a ejecutar en el lado del servidor. Con este carcter podemos introducir sentencias inline y sentencias compuestas por una o ms lneas de cdigo. Ejemplos de cada uno de estos tipos seran: Sentencia inline: Son las @DateTime.Now@{ var cadena = "Esto es una sentencia de una sola linea"; }@{var otraCadena = "Esto es una sentencia";otraCadena = otraCadena + "en multiples lineas";} En este ejemplo podemos ver ya la participacin de los otros dos caracteres especiales: el punto y coma y las llaves. En el caso del punto y coma, sirve para terminar cualquier sentencia que no sea inline. Las llaves, por su parte, sirven para definir bloques de cdigo, compuestos por una o ms lneas. Cualquiera que haya trabajado con lenguajes cuya sintaxis derive del lenguaje C encontrar tremendamente familiares estas reglas.

Clases y ObjetosToda la plataforma .NET est orientada a objetos y Razor no iba a ser una excepcin. Cuando programemos con WebMatrix y hagamos uso de Razor tendremos que usar clases y objetos. No es el objetivo de este artculo explicar la Programacin Orientada a Objetos, campo suficientemente amplio como para haber inspirado centenares de libros en los ltimos 25 aos. Sin embargo, una explicacin lo ms ligera y sencilla posible no vendr mal para quienes se aproximen por primera vez a este concepto.

En la POO tenemos la nocin de Clase como una forma de representar un concepto del mundo real. La clase, por tanto, va a definir comportamientos y propiedades compartidas por todos aquellos que forman parte de l. Trasladando esto al mundo real, podramos decir que Perro es una clase. Todos aquellos que forman parte de esta clase Perro compartirn en comn comportamientos como correr, comer o ladrar, y propiedades como el color, el peso o la edad.

Un objeto es una instanciacin concreta de una clase. Es decir, es tomar ese molde o patrn que es la clase para crear un elemento concreto. En el mundo real esto lo podramos traducir como mi perro, el perro del vecino o el perro de la esquina. Todos ellos pertenecen a un mismo gnero, la clase Perro, y todos ellos van a correr, comer y ladrar, pero tendrn valores distintos para sus propiedades, unos sern blancos, otros ms delgados, etc.

Hecho este minimalista esbozo de la relacin entre clases y objetos, en Razor vamos a tener a nuestra disposicin la programacin con clases y objetos. En el ejemplo del Hola Mundo descrito en el artculo anterior, vimos cmo, accediendo a la propiedad Now del objeto DateTime, obtenamos la fecha actual. No ser, sin embargo, la nica clase y objeto con la que nos iremos familiarizando conforme nos adentremos en la programacin con Razor.

Veremos ms adelante como existen clases para gestionar la base de datos, clases para comunicarnos con servicios web tan conocidos como Twitter o Facebook, clases para gestionar la seguridad, etc. Y todas estas clases las instanciaremos en objetos concretos antes de hacer uso de ellas; es decir, antes de invocar a sus mtodos. Por ahora es suficiente con conocer esta relacin entre clases, objetos, propiedades y mtodos.


13


Variables y Cadenas Las variables nos van a servir para almacenar informacin. En Razor podemos elegir entre crearlas como var para no tener que darles un tipo, o bien indicarles explcitamente dicho tipo, ya sea int para enteros, string para cadenas de texto, decimal para nmeros decimales, etc. Es importante resear que los nombres que les demos a las variables son sensibles a maysculas. Es decir, no ser lo mismo una variable tabla que una variable Tabla o TABLA. Esto es, en realidad, porque toda la sintaxis de Razor es sensible a maysculas, por lo que tampoco podramos definir una variable como INT variable. Veamos algunos ejemplos: @{// Declaracin de variables con y sin tipovar variableSinTipo = 5;int variableConTipo = 5;int variableCONTIPO = 6; // diferente a la anterior} En cuanto a las cadenas, se definen utilizando el carcter comillas dobles, como suele ser habitual. En caso de necesitar escapar un carcter especial, la forma de fcil es utilizar el carcter @. Ojo, no debemos confundir este carcter @ con el otro carcter @ del que hemos estado hablando hasta ahora y que sirve para definir fragmentos de cdigo en Razor. Unos ejemplos a continuacin: @{ // Declaracion de cadenasvar cadena = "Esto es una cadena estandar";var cadenaBackslash = @"Cadena con backslash \";var cadenaComillas = @"Cadena con ""comillas""";}

ConclusionesHemos visto un par de las caractersticas fundamentales de Razor, como son la forma en que se organizan clases y objetos, los caracteres especiales y el uso de variables y cadenas. En el prximo artculo aprenderemos cmo gestionar bucles y decisiones con Razor.


Bucles, condicionales y colecciones en la sintaxis RazorSeguimos analizando la sintaxis Razor de WebMatrix, ahora veremos la toma de decisiones, ejecucin de bucles y el uso de colecciones de valores.

En los dos primeros artculos, de esta serie de tres sobre Razor, publicados en el Manual de WebMatrix, aprendimos aspectos fundamentales como sus objetivos, la forma de crear un primer Hola Mundo, la relacin que tiene con la Programacin Orientada a Objetos y la forma en que se crean variables y cadenas.

En este artculo nos centraremos en otros tres aspectos clave: la forma en que se gestiona la toma de decisiones, la ejecucin de bucles y el uso de colecciones de valores.

Toma de decisiones en RazorExisten varios operadores en Razor tanto para definir distintos flujos de ejecucin en funcin de una condicin lgica. Existe un tipo concreto conocido como bool que nos sirve para definir variables que slo podrn contener uno de estos dos valores: verdadero o falso. En el siguiente fragmento de cdigo podemos ver un ejemplo: @{bool resultado = miObjeto.HaSidoExitoso();if (resultado == true){Ha salido bien.


14


}else{Ha fallado.}} Analicemos el fragmento. En primer lugar recogemos en la variable resultado lo que nos devuelve el mtodo HaSidoExitoso de un objeto miObjeto. Este resultado, al estar almacenado en una variable booleana, slo puede ser verdadero o falso.

A partir de ah, utilizando el operador de decisin if/else, podemos mostrar en el HTML final dos posibles mensajes: uno si el resultado ha sido exitoso (valor true) y otro si el resultado ha fallado (valor contrario, false).

Existe otro operador de decisin, llamado switch, que nos facilitar trabajar con rangos de opciones. Por ejemplo, si el valor de un resultado es un entero de entre 1 y 3, y queremos ejecutar sentencias distintas para cada caso, podramos definir tres etiquetas case para cada uno de esos tres valores. El siguiente ejemplo nos aclara cmo hacerlo. @{int resultado = miObjeto.OtroMetodo();switch (resultado){case 1: // Codigo para el resultado igual a 1break;

case 2: // Codigo para el resultado igual a 2break;

case 3: // Codigo para el resultado igual a 3break;

default: // Codigo para resultado distinto de 1, 2 y 3break;}} Como vemos, por cada posible valor del resultado definimos una etiqueta case con el valor que aplica. Estas etiquetas se cierran con la instruccin break y contendrn todas las instrucciones que queremos ejecutar para ese caso. En el ejemplo, sin embargo, nos hemos limitado a definir unos cuantos comentarios (que nunca aparecern en el HTML devuelto al cliente, al igual que todo el cdigo que se ejecuta en el servidor).

Por ltimo, la etiqueta default nos sirve para definir un caso por defecto en caso de que el valor de la variable sobre la que se ejecuta el switch, sea distinto a todos los considerados. Suele servir, en la mayora de casos, para realizar control de errores.

Bucles y colecciones en la sintaxis de RazorEn cuanto a los bucles, en un artculo anterior hablbamos sobre clases y objetos. Vamos a introducir un nuevo concepto: las colecciones. No son ms que lo que su propio nombre indica, colecciones u estructuras de datos que contienen mltiples objetos de un mismo tipo. Es decir, que una coleccin podr serlo de enteros, de booleanos, de cadenas de texto, pero no podr serlo de varios tipos a la vez.

Ser frecuente que queramos ejecutar instrucciones repetidas sobre todos los objetos que forman parte de una coleccin. Por ejemplo, si el resultado de un mtodo es una coleccin de enteros con las edades de los usuarios de una pgina y queremos mostrar por pantalla dichos valores, lo ms prctico es iterar por esta coleccin de elementos y, para cada uno, generar el mismo fragmento HTML para visualizar su valor por pantalla. El operador principal para lograr esto es for. Veamos un ejemplo: @{int[] coleccion = new int[] { 1, 2, 3, 4 };for (int i=0; i


Como se puede ver en el cdigo, en primer lugar se define una coleccin de enteros del 1 al 4. Esto se hace creando una variable coleccin cuyo tipo ser int[]. Es importante indicar que, en C# (y por ende en Razor), podemos crear una coleccin o array de cualquier tipo situando los caracteres [] tras el tipo, como en este ejemplo.

Una vez creada la coleccin, la recorreremos con el operador for. Para ello, necesitamos una variable contador, que nos permite saber en qu posicin de la coleccin nos encontramos. Desde los tiempos de C, 40 aos atrs, i ha sido el nombre ms popular para este tipo de variables (seguido de j, k, l, etc.), as que sigamos la tradicin.

Una vez definida la variable, tenemos que indicar el lmite del bucle con una sentencia lgica. En este caso estamos accediendo a la propiedad Length de la coleccin (no olvidemos que todo son objetos y los objetos tienen propiedades con valores que les definen, como el nmero de elementos en este caso).

La ltima clusula sirve para indicar cuantos avances queremos en nuestra variable contadora al finalizar cada iteracin del bucle (el operador ++ nos sirve para indicarle que slo uno). Resumiendo, el bucle entero se leera, en lenguaje natural, as:

Define una variable contador i con valor inicial 0, que no puede ser mayor que el nmero de elementos de la coleccin, y que avanza una posicin en cada iteracin

Posteriormente, con el bloque de llaves definimos el cdigo que queremos ejecutar en cada iteracin del bucle. En este caso lo que estamos haciendo es, para cada iteracin, acceder a un elemento de la coleccin. Para ello utilizamos la sintaxis siguiente: Nombre_Variable_Coleccion[Variable_Contador];

Con esta sintaxis lo que estamos haciendo es acceder a un de los elementos que compone la coleccin; en concreto, al elemento que ocupa la posicin representada por el valor de la variable contador. Como es habitual, el primero de los elementos de la coleccin ocupa la posicin 0. El resultado del fragmento de cdigo que hemos visto sera una imagen parecida a la siguiente.

Existen otros operadores de bucle, como While y Foreach, que dejaremos para investigacin del lector en los enlaces que se proveen en la seccin de Bibliografa.


16


ConclusionesCon este artculo terminamos la serie relacionada con Razor, tras ver cmo se gestionan bucles, colecciones y operadores para la toma de decisiones. A lo largo de la serie hemos visto la sintaxis, estructuras y operadores principales de Razor, suficiente como para poder trabajar en la mayora de aplicaciones web sin problemas. Para aquellos que ya hayan trabajado con ASP.NET y C# la sintaxis resulta tremendamente familiar.

Y para aquellos que ya tengan un cierto bagaje con lenguajes que sigan los principios de C, como C++, Java o PHP, no debera resultar excesivamente dificultoso.

Por ltimo, para los que prefieran VB.NET, es importante destacar que tambin es posible trabajar con Razor y este lenguaje de programacin.


Estructurar pginas en WebMatrixAprenderemos a estructurar un proyecto web desarrollado con la herramienta WebMatrix.

En el Manual de WebMatrix hemos visto hasta el momento la forma en que se trabaja con la herramienta, as como una introduccin a la sintaxis Razor. En el presente artculo vamos a empezar a poner en prctica los conocimientos adquiridos.

Veremos a continuacin cmo se estructura un sitio desarrollado con Microsoft WebMatrix, tratando tanto la estructura relacionada con el aspecto de la web como la comunicacin entre las distintas pginas.

Estructurar el aspectoHoy en da cualquier sitio web se estructura de una forma ms compleja que simples pginas enlazadas las unas a las otras. Como mnimo, en la mayora de sitios nos encontramos con una cabecera y un pie compartido por cada pgina, formando una estructura esttica sobre la que se van mostrando los contenidos del sitio.

Como no poda ser de otro modo, WebMatrix nos ofrece la posibilidad de recrear estas estructuras, por complejas que sean. A continuacin vamos a crear una bastante comn: una pgina maestra, una pgina de cabecera y otra de pie. Partiendo de un proyecto vaco (en un artculo anterior se vio cmo crearlos), vamos a ver cmo hacerlo.

Crear la cabecera y el pie: Para empezar, nos situaremos sobre el espacio de trabajo de Files en WebMatrix. Sobre el men de espacios de trabajo veremos la estructura de nuestro proyecto. Siendo como es ste un proyecto vaco, slo aparecer el nombre del mismo.

Con el botn derecho del ratn haremos aparecer el men contextual, en el que elegiremos la opcin de New Folder. A este nuevo directorio le vamos a dar el nombre de Compartido, puesto que los contenidos que en l introduzcamos van a ser compartidos por todo el sitio web.


17


Cuando lo hayamos hecho, de nuevo con el men contextual aadiremos un nuevo fichero con la opcin New File. Nos aparecer un cuadro de dilogo similar al que podemos ver en la siguiente imagen. Elegiremos CSHTML como tipo de fichero, que es el que corresponde a los ficheros HTML con sintaxis Razor en C#. El nombre que le daremos a este nuevo fichero ser _Cabecera.cshtml.

Nombrar al fichero con un signo _ delante no es casual. En WebMatrix, los ficheros con ese signo como prefijo no se pueden navegar directamente. Es decir, estos ficheros slo podrn visualizarse si se cargan como parte de otros ficheros que no tengan ese prefijo.

Del nuevo fichero HTML borraremos todo el cdigo y simplemente escribiremos lo siguiente: Esto es la cabecera Repetiremos la operacin para aadir un fichero _Pie.html, que contendr el siguiente fragmento HTML: Esto es el pie Ahora que tenemos la cabecera y el pie estamos listos para crear nuestra pgina maestra. Aadimos un nuevo fichero a la carpeta Compartido de nombre _Maestra.cshtml. El cdigo de esta nueva pgina ser el siguiente:

Titulo de la pagina

@RenderPage("/Compartido/_Cabecera.cshtml")

@RenderBody()

@RenderPage("/Compartido/_Pie.cshtml")

Analicemos este fragmento de cdigo. Puesto que va a ser la pgina contenedora de todas las dems, es necesario que defina las etiquetas html, head y body. En el interior del cuerpo estamos cargando el contenido de las pginas Cabecera y Pie que hemos creado anteriormente, utilizando el comando RenderPage, que como se puede deducir por su nombre permite renderizar una pgina como un fragmento HTML dentro de otra.

Nos quedan dos pasos para poder ver el resultado: crear una pgina de contenido y enlazar en ella a la pgina maestra que


18


acabamos de definir. Aadimos un nuevo fichero MiPrimerContenido.cshtml. Destacar que no vamos a ponerle el signo _ como prefijo, puesto que esta pgina s ser navegable. En el interior de esta nueva pgina, algo tan simple como esto: @{ Layout = "/Compartido/_Maestra.cshtml";}Esto es el contenido principal Si tenemos abierta la pgina MiPrimerContenido.cshtml, podemos navegar directamente a ella pulsando el botn Run que aparece en la banda de iconos de la zona superior de WebMatrix. El resultado debera ser algo parecido a lo que podemos ver en la siguiente imagen.

Aadir un estilo: A nivel de presentacin, no es especialmente impactante, pero estamos simplemente estructurando contenido y compartindolo. Sin embargo, desde WebMatrix tambin podemos trabajar con archivos CSS y aprovechar que su editor de cdigo nos resalta este lenguaje. Aadamos una carpeta Estilo y dentro un nuevo fichero de tipo CSS con un nombre tan original como Estilos.css. En su interior podramos definir algo muy sencillo, como esto: body { margin: 0; padding: 1em; background-color: #ffffff; font: 125%/1.75em Verdana, sans-serif; color: #006600;}

#cabecera, #pie { margin: 0; padding: 0; color: #996600;font: 200%/2.00em Times New Roma;} Ahora hagamos un pequeo cambio en el fichero _Maestra.cshtml. Vamos a enlazar en l este nuevo fichero de CSS, adems de definir un par de etiquetas div para aprovechar los estilos que hemos creado. El resultado podra ser algo as:

Titulo de la pagina


19


@RenderPage("/Compartido/_Cabecera.cshtml")

@RenderBody()

@RenderPage("/Compartido/_Pie.cshtml")

Si refrescamos veremos cmo se alteran tanto los colores como los tamaos de la pgina. De este fragmento de cdigo lo ms interesante es el mtodo @Href. Su funcin consiste en crear una URL que sea compatible con cualquier navegador, a partir de un fichero local.

Comunicacin entre pginasHemos visto cmo podemos ir organizando el aspecto de nuestra pgina web aadiendo distintos bloques, en forma de pginas web independientes. Sin embargo, el ser independientes puede llegar a ser un problema. Por ejemplo, supongamos que queremos modificar el Ttulo de la ventana, hacindolo de forma acorde al contenido que estamos cargando. Necesitaramos comunicar la pgina que aloja el contenido (y conoce dicho Ttulo) con la pgina Maestra, que es la nica que tiene acceso a la etiqueta .

La forma de lograr esta comunicacin es tan sencilla como todas las cosas en WebMatrix. Tenemos que hacer uso del objeto PageData, una coleccin de parejas nombre/valor que nos permite comunicar entre distintas pginas.

En nuestro ejemplo, el primer paso sera modificar la pgina de contenido MiPrimerContenido.cshtml que aadimos anteriormente. Desde ella situaramos el valor del Ttulo, que posteriormente va a leer la pgina maestra. La sentencia para lograrlo es muy sencilla: @{ PageData["Titulo"] = "Mi Primer Contenido"; } Ahora, para consumir este valor desde la pgina maestra, que es la nica que puede establecer el ttulo, introduciramos esta sentencia:

@PageData["Titulo"] Sencillo, verdad? Tan sencillo como potente, puesto que de este modo podremos intercambiar informacin entre pginas, al tipo que cada una se ocupa de recuperar la informacin que le corresponde.

ConclusionesCon muy poco esfuerzo y an menos cdigo hemos conseguido definir una estructura bsica pero lo suficientemente potente como para gestionar muchos sitios web, permitiendo reutilizar una gran cantidad de cdigo. Tambin hemos visto cmo comunicar los fragmentos que componen la pgina web, para poder cargar contenido desde unos referenciado por otros.

En prximos artculos veremos otros aspectos bsicos del desarrollo web, como la gestin de datos o la seguridad.



20


Web Matrix Manejando datos (I)En este artculo vamos a ver cmo podemos gestionar una base de datos con WebMatrix.

1. IntroduccinPocas son las aplicaciones web que no hacen uso de alguna clase de persistencia de datos. Entre las distintas opciones, sin duda una base de datos es la ms habitual. En WebMatrix tenemos un muy buen soporte para gestionar las bases de datos de nuestras aplicaciones, tanto para su definicin como para la introduccin y consulta de datos.

En cuanto a las bases de datos que pueden gestionarse con WebMatrix, SQL Server Compact Edition viene como opcin por defecto. SQL Server CE no es precisamente un producto novedoso, puesto que ya hace aos que salieron sus primeras versiones, eminentemente orientadas a aplicaciones en SmartPhones.

Sin embargo, con WebMatrix se ha decidido dar un gran impulso a su desarrollo y reorientarla hacia un entorno ms web. Para ello, entre las novedades que presenta, destacaramos las siguientes:

Funciona perfectamente con las APIs existentes de manejo de datos, como ADO.NET, Entity Framework e incluso ORMs de terceros como NHibernate.

No requiere instalacin ninguna. Simplemente hay que copiar los binarios de SQLCE al directorio bin de nuestra aplicacin ASP.NET.

Se ejecuta sobre entornos "medium trust", es decir, no es necesario que el administrador de nuestro hosting nos instale SQL Server CE para poder utilizarlo en nuestras aplicaciones web. Nosotros mismos podemos hacerlo, simplemente moviendo los binarios a la carpeta bin de nuestra aplicacin web.

Diseadores grficos tanto para WebMatrix como para Visual Studio (en todas sus ediciones).

En cualquier caso, SQL Server CE no es la nica base de datos que podemos utilizar. Todas las versiones de SQL Server estn soportadas, con lo que en cualquier momento podemos pasar a una base de datos ms potente si nuestra aplicacin web comienza a demandarlo.

Para la gente que est ms familiarizada con MySQL, WebMatrix tambin ofrece soporte. Por lo tanto, no quedan excusas para no utilizarlo, vengamos del entorno que vengamos.


21


2. Definir una base de datosAntes de ver cmo podemos insertar, actualizar, borrar y consultar informacin de una base de datos, empecemos por lo ms bsico: cmo definir esa base de datos. En WebMatrix todas estas operaciones se hacen desde el espacio de trabajo de "Databases".

Si nuestra aplicacin no tiene todava una base de datos, en la parte central podremos ver un enlace directo para aadir una nueva base de datos, bajo el mensaje "Add a Database to your site". Si pulsamos en l automticamente nos crear un nuevo fichero .sdf (por defecto tendr el mismo nombre que el proyecto), en la zona de la ventana dedicada a los elementos que comenten dicho proyecto. Podemos verlo en la imagen:

Una vez creada la base de datos, el siguiente paso es empezar a crear tablas en ella. Vamos a crear una primera tabla de nombre "Post". Es tan sencillo como pulsar el botn "New Table" que aparece en la barra de iconos superior.

Como vemos en la imagen, al crear la tabla se crea automticamente una columna. Es necesario darle un nombre a esta


22


columna si queremos poder guardar la tabla, de lo contrario nos aparecer un mensaje de error indicndonos que es necesario cuando queramos guardar la tabla. Y si borramos la columna e intentamos guardar la tabla vaca, tampoco nos lo permitir.

Para poder darle nombre a esta columna, simplemente nos dirigimos al grid de propiedades y en la seccin (Name) indicamos el valor. En la imagen anterior tambin podemos ver resaltados los controles que podemos utilizar para aadir nuevas columnas (o eliminarlas), as como establecer relaciones entre tablas cuando ya exista ms de una. Analicemos las propiedades que podemos definir para una columna y qu significa cada una:

(Name): es el nombre que queremos darle a la columna. La columna no podr guardarse si no le damos un identificador.

Allow Nulls: nos sirve para indicar si permitimos que se almacenen valores nulos en la columna. Data Type: el tipo de datos que corresponde a la columna. Default Value: valor por defecto para la columna Is Identity?: sirve para indicar si la columna es identidad. SQL Server asigna automticamente un valor a las

columnas identidad cuando se inserta una fila. Las columnas de clave primaria suelen ser de identidad, para poder delegar la creacin del valor de la clave. Slo aplica a columnas de tipo numrico

Length: sirve para indicar la longitud de la columna, en aquellas que tenga sentido, como cuando son de tipo nvarchar.

Is Primary Key?: permite para indicar si la columna forma parte de la clave primaria de la tabla.

Aadamos las siguientes columnas a nuestra tabla "Post":

PostId: columna de clave primaria y de identidad, de tipo bigint, no aceptar valores nulos. Titulo: columna de tipo nvarchar de 1000 de longitud. Contenido: columna de tipo ntext, para permitir que el contenido crezca sin lmites. Autor: columna de tipo nvarchar de 100 de longitud. Permitiremos valores nulos en ella. Fecha: columna de tipo datetime.

Con esto ya tendramos nuestra tabla configurada. Para guardarla, pulsaramos el botn de Guardar o bien Control+S, lo que har aparecer una ventana emergente para introducir el nombre que queremos darle a esta nueva tabla: Post.

En cuanto a las relaciones entre tablas, en este momento no es posible su creacin para bases de datos SQL Server CE. Sin embargo, es una caracterstica que se espera que est prximamente disponible.

Con WebMatrix tambin podemos introducir datos en las tablas de nuestra base de datos. Basta con pulsar sobre el botn "Data" en la pestaa Table, una vez que hayamos seleccionado la tabla en la que queremos introducir la informacin. El proceso de edicin es el tpico de cualquier grid de datos. Es importante recordar que no podemos dejar sin informacin aquellas celdas asociadas a columnas que no soportan valores de nulo y que no podemos modificar las celdas de columnas de tipo identidad, puesto que esos valores son asignados por la base de datos de forma automtica. WebMatrix nos avisar en caso de introducir datos cuyo formato no se ajusta al tipo de datos definido para la columna, evitando as que cometamos errores.


23


En la imagen podemos ver unas cuentas filas introducidas a travs del editor de WebMatrix en la tabla "Post" creada anteriormente.

3. ConclusionesHemos visto cmo podemos crear tablas y columnas en WebMatrix de forma muy sencilla, as como introducir informacin, ya sean datos maestros o de prueba. En el prximo artculo aprenderemos cmo podemos consumir e insertar informacin de la base de datos, mediante cdigo.


Web Matrix Manejando datos (II)En este artculo conoceremos cmo podemos introducir y consumir informacin en nuestras bases de datos.

En el anterior artculo sobre cmo manejar datos con WebMatrix aprendimos cmo crear tablas y columnas, as como la forma de insertar informacin para hacer pruebas o consolidar datos maestros. En este artculo conoceremos cmo podemos introducir y consumir informacin en nuestras bases de datos.

1. Introducir informacinPartiremos de la tabla Post que creamos en el artculo anterior y veremos cmo introducir datos en ella mediante cdigo, que es el procedimiento que habitualmente seguiremos. Para ello, vamos a crear una pgina nueva, "Postear.cshtml", que servir para introducir un nuevo post en la base de datos. El cdigo de esta pgina sera algo parecido a esto: @{ Layout = "/Compartido/_Maestra.cshtml";PageData["Titulo"] = "Postear";

if (IsPost){ var db = Database.Open("Mi Blog");


24


var sentenciaInsercion = "INSERT INTO Post (Titulo, Contenido, Autor, Fecha) VALUES (@0, @1, @2, @3)";

db.Execute(sentenciaInsercion, Request["titulo"], Request["contenido"], Request["autor"], DateTime.Now.ToString());var id = db.GetLastInsertId();Response.Redirect(@Href("/MostrarPost?PostId=" + id));}}

Titulo

Contenido

Autor

Empecemos analizando el HTML. Se compone de una tabla con 3 campos para introducir ttulo, contenido y autor, ms un botn para procesar la informacin. Cuando pulsemos el botn, el posteo se realizar sobre la propia pgina, y ah entrar en juego el cdigo que hemos definido en la parte superior.

Analicemos cada uno de los pasos que estn descritos y qu mtodos estn involucrados:

1. En primer lugar, definimos que slo se ejecutar este cdigo si la peticin a la pgina se ha realizado mediante HTTP-POST, al estar comprobndose a variable "IsPost", que nos indica si hemos llegado a la pgina mediante una peticin de este tipo.

2. En caso de que estemos ejecutando una peticin por POST, abrimos una conexin con la base de datos mediante el mtodo Open de la clase Database, pasndole como parmetro el nombre de dicha base de datos. Un detalle, la clase DateTime contiene una propiedad "Now" que nos devuelve la fecha de ese instante, ideal para poder indicar en qu momento hemos insertado el post.

3. Una vez abierta la conexin, escribimos la sentencia SQL que queremos ejecutar y se la pasamos al mtodo Execute, junto con los parmetros que hemos definido en dicha sentencia. Estos valores los obtenemos de Request, que es donde los hemos situado con el HTML que acompaa a la pgina (campos "value" de las etiquetas input y textarea)

4. Recuperamos el ID que la base de datos nos ha generado para esta nueva fila en la tabla Post. Recordemos que hemos definido la columna PostId como identidad en nuestra tabla, lo que significa que SQL Server CE se encargar de generar un valor para ella con cada nueva insercin.

5. Por ltimo, realizamos una redireccin a una pgina pasndole como parmetro este id. Utilizamos el mtodo Href para calcular la URL de una forma independiente del navegador que est renderizando la pgina, y recurrimos a Response.Redirect para hacer efectiva la redireccin.


25


Idealmente, la pgina MostrarPost se encargara de ensearnos el resultado de la informacin que hemos introducido, ya convenientemente formateada. Para ello, deberamos recuperar de la base de datos la informacin previamente insertada. Veamos cmo podramos hacer eso.

2. Consultar informacinNecesitamos poder leer informacin en las tablas de nuestra base de datos, as como mostrarla a travs de un fragmento de cdigo HTML. A continuacin un ejemplo de ambas necesidades combinadas para generar una pgina con informacin dinmica. @{var db = Database.Open("Mi Blog");var consulta = "SELECT Titulo, Contenido, Autor, Fecha FROM Post WHERE PostId = @0";var postInfo = db.QuerySingle(consulta, Request["PostId"]);}

@postInfo.Titulo publicado el @postInfo.Fecha por @postInfo.Autor

@postInfo.Contenido

El HTML de nuevo es lo ms sencillo posible, puesto que no es objeto de estos artculos poner el acento sobre cmo realizar una pgina web vistosa. Como se ve, mostramos la informacin que contiene un objeto llamado postInfo; en concreto, los campos Titulo, Fecha, Autor y Contenido. Pero, cmo hemos obtenido este objeto postInfo? Echemos un ojo al cdigo en la parte superior.

En primer lugar, abrimos una conexin a la base de datos y creamos una sentencia SQL como ya hemos aprendido en la seccin anterior. La diferencia es que ahora no vamos a ejecutar sino consultar nuestra base de datos. Existen tres mtodos distintos para realizar esta operacin:

Query: ejecuta la sentencia y devuelve una coleccin de resultados. Podremos iterar por todos ellos utilizando el operador "foreach", que nos devolver una fila cada vez hasta recorrer entera la coleccin.

QueryValue: nos devuelve un valor nico. Es ideal, por ejemplo, si nuestra consulta tiene que devolvernos el nmero de filas que cumplan una condicin, o el valor que suman todas ellas para una columna concreta.

QuerySingle: es el mtodo que estamos ejecutando y sirve para devolver un nico registro. En nuestro caso, al estar buscando por el ID, sabemos que slo habr una fila que cumpla este criterio (o ninguna, algo a tener en cuenta puesto que en tal caso nos devolver un valor nulo).

Ya sabemos que nuestra fila est contenida en el objeto postInfo. No es difcil imaginar que, dinmicamente, nuestro cdigo es capaz de inferir cmo se llaman las columnas que queremos consultar y crea propiedades en este objeto, para que podamos acceder a los valores concretos de esta fila por sus nombres, en lugar de tener que utilizar engorrosos ndices basados en la posicin de la columna, algo mucho ms propenso a errores y menos legible.


26


El resultado de nuestra pgina MostrarPost.cshtml podemos verlo en la siguiente imagen:

3. ConclusionesEn estos dos artculos hemos visto todo el tratamiento de datos que podemos hacer en WebMatrix y que nos cubre ms del 80% de los escenarios. Si en anterior aprendimos a definir nuestro esquema de base de datos, en ste hemos podido comprobar qu fcil es insertar y consultar informacin.


WebMatrix Gestionando la Seguridad (I)En este artculo aprenderemos cmo utilizar los mecanismos de seguridad que ASP.NET WebPages nos ofrece y cmo podemos hacer uso de ellos desde WebMatrix.

Este es el primero de los artculos dedicados a la seguridad en el desarrollo bajo WebMatrix, que estamos viendo dentro del Manual de Microsoft WebMatrix.

En esta primera parte veremos cmo crear la infraestructura para registrar usuarios, es decir, crear la tabla en la base de datos y el formulario de registro de usuarios. En la segunda parte dedicada a la seguridad, repasaremos de cmo forma podemos autenticarnos y autorizar en base a estos mecanismos.

1. Crear base de datos de usuariosAntes de pretender realizar ninguna clase de autenticacin, es necesario que tengamos una base de datos contra la que poder realizar esta operacin. En ella deberemos guardar informacin sobre los usuarios y sus roles, para poder autorizar ciertas acciones en funcin de la pertenencia del usuario a ellos.

En WebMatrix no puede ser ms sencillo crear esta base de datos. WebSecurity es el helper que nos va a acompaar durante ste y el siguiente artculo, pieza central sobre la que gira toda la seguridad. Esta clase nos ofrece un mtodo llamado


27


InitializeDatabaseConnection, que servir para definir las tablas que respaldarn nuestro sistema de seguridad.

Esta llamada debemos hacerla slo una vez y debe hacerse antes que cualquier otro proceso de carga, por razones obvias. Pero, dnde podramos realizarla para asegurarnos que no se realiza ms de una vez y que las tablas estn listas antes de estarlo, prcticamente, la propia aplicacin? La respuesta es sencilla: en el archivo _AppStart.cshtml.

Este fichero permite definir procesos y acciones que queramos que se realicen antes de ejecutarse ninguna pgina web, permitindonos establecer valores globales (como podran ser claves compartidas por todas las pginas) o ejecutar procesos que son necesarios antes de arrancar la aplicacin, como ste que estamos explicando.

Para ello, aadiremos una nueva pgina _AppStart.cshtml en la carpeta raz de nuestro proyecto e introduciremos en ella el siguiente fragmento de cdigo: @{ WebSecurity.InitializeDatabaseConnection( "Mi Blog", "Usuario", "UsuarioId", "Nombre", true);}Vamos a analizar cada uno de los parmetros que pasamos a esta llamada:

El primero es el nombre de la base de datos donde se van a crear las tablas relacionadas con la seguridad. El segundo es el nombre de la tabla que va a contener los usuarios El tercero es el nombre de la columna que va a servir de identificador para cada una fila El cuarto es el nombre de la columna que va a contener el nombre del usuario. El quinto nos sirve para indicarle a la llamada que debe crear las tablas por nosotros. En caso de que ya tuviramos

unas tablas para la seguridad de nuestra aplicacin, deberamos pasar "false" en este parmetro.

Una vez ejecutada correctamente esta sentencia, vamos a poder ver mediante el espacio de trabajo de "Databases" que hay cuatro tablas nuevas en nuestra base de datos. El siguiente diagrama muestra estas tablas y sus campos:

Como vemos, se ha creado una tabla Usuario. Esta tabla podra ser una tabla que utilizramos para almacenar informacin extra sobre cada uno de nuestros usuarios, como direcciones de correo, fsicas, datos personales, etc. Est conectada con la verdadera tabla de usuarios, desde el punto de vista de la seguridad, que es la tabla Membership que contiene un buen nmero de campos relacionados con la contrasea y su gestin.

Tambin se crea una tabla "Roles", para poder gestionar en qu roles queremos tener a nuestros usuarios y poder darles acceso o no a recursos y operaciones en funcin de su pertenencia. Ambas tablas estn conectadas a travs de la tabla intermedia UsersInRoles. Es, en conjunto, un modelo sencillo y fcilmente comprensible.

2. Registrar usuariosYa tenemos nuestra base de datos lista para almacenar nuevos usuarios y permitirnos posteriores operaciones de autenticacin y autorizacin. Sin embargo, lo primero ser facilitar a los visitantes a nuestro sitio web registrarse como


28


usuarios. Para ello deberamos crear una pgina "Registrar.cshtml" desde la que los usuarios puedan introducir su nombre y su contrasea. Un ejemplo de cdigo lo ms sencillo posible sera el siguiente: @{ if(IsPost) { var sentenciaInsercion = "INSERT INTO Usuario (Nombre) VALUES (@0)"; var db = Database.Open("Mi Blog"); db.Execute(sentenciaInsercion, Request["nombreusuario"]); WebSecurity.CreateAccount(Request["nombreusuario"], Request["password"]); }}

Registrarse como usuario Nombre: Clave:

El cdigo HTML es lo suficientemente sencillo como para no necesitar mayores comentarios. En cuanto al cdigo en la parte superior, podemos ver que se realizan dos operaciones. En primer lugar, se inserta el nuevo usuario en la tabla Usuario. Una vez que ya tengamos una nueva fila en Usuario podremos proceder a registrarle en nuestras tablas de seguridad, con la llamada WebSecurity.CreateAccount, a la que le pasaremos el nombre y la contrasea.

A esta llamada podemos pasarle tambin un booleano para indicar si queremos que el usuario no sea efectivo hasta estar confirmado. En caso de hacerlo as, la llamada a WebSecurity.CreateAccount nos devolver un token. Dicho token sera necesario enviarlo por correo al usuario que se acaba de registrar, para que posteriormente procediera a confirmar el registro pasndole, a la pgina correspondiente, dicho token y realizando nosotros una llamada WebSecurity.ConfirmAccount con el token como nico parmetro. Sin embargo, en aras de la sencillez, vamos a dejar el registro tal cual, sin necesidad de realizar una posterior confirmacin con ese token.

3. ConclusionesHemos visto cmo crear el esquema de base de datos que va a dar soporte a nuestras operaciones de seguridad, as como la forma de crear nuevas cuentas de usuario en este sistema. En el siguiente artculo abordaremos las otras dos operaciones fundamentales en la seguridad: autenticacin y autorizacin.


WebMatrix Gestionando la Seguridad (II)En este segundo artculo dedicado a la seguridad en aplicaciones desarrolladas con WebMatrix aprenderemos cmo gestionar la autenticacin y autorizacin de usuarios.

Seguimos con la gestin de seguridad que comentabamos en el articulo anterior y pasamos al punto de autenticarse.

1. AutenticarseEn el anterior artculo aprendimos cmo registrar nuevos usuarios. Una vez hecho eso, el siguiente paso es permitir que se autentiquen en nuestra aplicacin para darles acceso a mayores privilegios. Para ello crearamos una pgina "Loguear.cshtml"


29


para proceder a la autenticacin que podra tener un cdigo como el siguiente: @{if(IsPost){if(WebSecurity.Login(Request["nombreusuario"], Request["password"]) == true){Usuario autenticado}else{Autenticacin fallida}} }

Loguearse como usuario

Nombre:

Clave:

La parte del cdigo HTML es prcticamente idntica a la que veamos en el anterior artculo. En cuanto al cdigo procedural, se realiza una llamada al mtodo Login del helper WebSecurity. Este mtodo acepta como parmetros el nombre de usuario y la contrasea, ms un parmetro opcional de tipo booleano que sirve para indicar si queremos que la aplicacin web nos recuerde, mediante el establecimiento de una cookie.


30


La llamada devolver un booleano para indicarnos si hemos sigo correctamente autenticados. Como vemos, mediante las etiquetas "" podemos definir un mensaje directamente en el cdigo HTML de la pgina, con un resultado como el que se puede ver en la siguiente figura:

Con esto completaramos la funcionalidad necesaria para realizar autenticaciones, pero nos faltara la parte de la autorizacin, es decir, asegurarnos de que un usuario tiene los permisos necesarios para poder acceder a un recurso o funcionalidad. Veamos cmo hacerlo.

2. AutorizacinEl proceso habitual de autorizacin consiste en tres pasos:

1. Comprobar las credenciales. Si existen, se le da acceso al recurso. 2. Si no existen las credenciales, se le pide al usuario que se autentique. 3. Se le redirige a una pgina de forma automtica para que pueda autenticarse. 4. Una vez que se ha autenticado correctamente, se le redirige al recurso que inicialmente quera acceder.

Veamos cmo podemos reproducir este proceso con WebMatrix. En primer lugar, necesitaramos una pgina para hacer la autenticacin como la que hemos creado antes. En segundo lugar, necesitaramos crear una pgina que tuviera control de acceso. Vamos a aadir una pgina "Comentar.cshtml" que permita dejar un comentario en un post. Para poder comentar, vamos a requerir que el usuario est autenticado. Una primera aproximacin al cdigo sera algo as: @{if (WebSecurity.IsAuthenticated == false) {Response.Redirect("/Loguear?UrlRetorno=/Comentar"); }else{if(IsPost){/* Insertar en BD el comentario */ var db = Database.Open("Mi blog");string sentenciaInsercion =


31


"INSERT INTO Comentario (Autor, Contenido, Fecha, PostId) VALUES (@0, @1, @2, @3)";db.Execute(sentenciaInsercion,WebSecurity.CurrentUserName,Request["comentario"],DateTime.Now.ToString(),Request["postid"].AsInt());}}}

Comentar el post

Post ID

Comentario

En el cdigo HTML recogemos los dos datos que necesitamos: el identificador del post al que vamos a enlazar el comentario y el contenido del comentario. Podramos no requerir este identificador si enlazramos la pgina de comentarios desde la pgina del post, pero no es objeto de este artculo entrar en este tipo de complejidades.

En cuanto al cdigo procedural, podemos ver que el primer paso es comprobar si el usuario est autenticado. De no estarlo, se realiza una redireccin automtica a la pgina de Logueo, pasando como parmetro la URL a la que queremos que se retorne una vez se haya completado satisfactoriamente la autenticacin.

En caso de que el usuario s est autenticado y hayamos llegado a la pgina por HTTP-POST (por ejemplo, tras pulsar el botn de "Comentar", introducimos el comentario en la base de datos. Destacar que utilizando el helper WebSecurity tenemos acceso a mucha informacin sobre el contexto de seguridad. Algunos de los mtodos ms destacados seran:

WebSecurity.ChangePassword: nos permite cambiar el password para un usuario determinado. WebSecurity.CurrentUserId y WebSecurity.CurrentUserName: nos devuelve el id y el nombre del usuario

actualmente autenticado. WebSecurity.Login y WebSecurity.Logout: como su nombre indica, autentica o revierte la autenticacin del usuario,

volviendo a ser un usuario annimo.

3. ConclusionesHemos visto una panormica general de cmo gestionar el registro de usuarios y su autenticacin y autorizacin, de una forma sencilla y rpida. Este tipo de cdigo de infraestructura suele alejarnos de lo que realmente nos importa, el desarrollo de nuestras aplicaciones web, hacindonos perder tiempo en afinar un sistema que sea verstil y robusto.

Sin embargo, con WebMatrix podemos acceder a un sistema de seguridad que cumple con la mayora de nuestros requisitos, sin apenas esfuerzo. Y no olvidemos que por debajo est corriendo ASP.NET, una tecnologa tan potente como segura.



32


WebMatrix y la Web 2.0En este artculo iremos desgranando algunos de los Helpers sociales que dispone WebMatrix, para integrar las aplicaciones web desarrolladas con servicios de la web 2.0, como Facebook, Twitter, Delicious, etc.

Todos conocemos, a estas alturas, de la importancia de integrar correctamente nuestras aplicaciones web con lo que se ha dado en llamar la Web 2.0. Facebook, Twitter, Delicious, Google Buzz, etc., son algunos de los servicios de la web social que es importante tener presentes en nuestros sitios, puesto que nos proporcionan visibilidad e informacin valiosa.

WebMatrix, en su afn por simplificar el desarrollo de sitios web, ofrece un gran nmero de clases Helper para facilitarnos trabajar con este tipo de servicios con apenas un par de lneas de cdigo.

1. TwitterCada vez quedan menos sitios web que no tengan su propia cuenta en Twitter, desde la que ofrecer enlaces a la informacin que van publicando, dialogar con los usuarios, etc. Tener presencia en Twitter e integrar dicha presencia en el sitio web, viene a ser un todo en uno. En la gran mayora de los casos, la presencia de Twitter en el sitio web se realiza mediante la integracin de uno de los controles de timeline que nos ofrece la propia web de Twitter.

La integracin es sencilla, basta con copiar y pegar un trozo de cdigo relativamente grande en nuestras pginas. Sin embargo, que sea relativamente sencilla y rpida no significa que sea ni elegante ni cmoda, puesto que estamos introduciendo algo totalmente ajeno en nuestro desarrollo. Sera, por tanto, mucho ms deseable hacer esa integracin con cdigo propio. Aqu es donde aparece WebMatrix y uno de sus Helpers para ayudarnos: el helper Twitter.

Este helper tiene dos mtodos principales con los que poder trabajar:

Profile: este mtodo recupera la informacin especfica para una cuenta determinada. Sus parmetros, adems del nombre de la cuenta, sirven para personalizar el aspecto que va a tener la caja en la que se presenta la informacin.

Search: este mtodo sirve para mostrar la informacin relacionada con una cadena de bsqueda, dentro de Twitter. Al igual que el mtodo anterior, tiene un gran nmero de parmetros que sirven para personalizar el aspecto de la caja que muestra los resultados.

Veamos un ejemplo de uso rpido. Imaginemos que tenemos una aplicacin con una barra lateral y queremos mostrar en ella la informacin relacionada con una cuenta de Twitter. El fragmento de cdigo que necesitaramos sera algo como lo siguiente: Barra [email protected]("deswebcom")

Como podemos ver, una y nada ms que una lnea de cdigo necesitamos para integrar correctamente Twitter en nuestras pginas. Si quisiramos, en lugar de mostrar un perfil concreto, hacer una bsqueda la forma sera la misma, salvo que llamaramos al mtodo "Search".


33


El resultado, en ambos casos, sera algo parecido a la siguiente imagen.

Ambos, como ya comentbamos antes, pueden recibir una serie de parmetros opcionales que sirven para personalizar el aspecto de la caja. En la bibliografa se pueden encontrar enlaces a pginas en las que se enumeran estos parmetros as como su uso.

2. FacebookJunto con Twitter, la otra red social por excelencia a da de hoy. En este caso, el Helper que tenemos a nuestra disposicin nos permite aadir el famoso botn "Me Gusta". Este Helper, llamado como es obvio "Facebook", tiene un nico mtodo Like. Este mtodo tiene 6 parmetros opcionales. Aparte de los habituales relacionados con el aspecto, estos son los ms relevantes:

Url: el primer parmetro nos permite modificar la url que el usuario va a indicar que le gusta. Por defecto, la url ser la de la pgina que contiene el botn.

Action: podemos cambiar la accin por defecto, "Me gusta", por una como "Recomiendo", mediante este parmetro.

ShowFaces: nos sirve para para indicar, mediante un booleano, si queremos que se muestren las caras de aquellas personas que ya han indicado que les gusta este mismo tem.

Un ejemplo de cdigo con varios botones mostrando los valores para los distintos parmetros:

@Facebook.LikeButton("http://www.desarrollo.com") @Facebook.LikeButton( url: "http://desarrolloweb.com",action: "recommend",width: 350,layout: "button_count",showFaces: true)


34


@Facebook.LikeButton( url: "http://desarrolloweb.com",width: 350,layout: "box_count",showFaces: true)

@Facebook.LikeButton( url: "http://desarrolloweb.com",width: 350,showFaces: true,colorScheme: "dark") Y una imagen sobre el aspecto que van a tener los distintos botones.

3. Enlaces para compartirExisten bastantes agregadores de webs, sitios de enlaces, pginas de Microblogging, etc., desde las que nuestros usuarios se pueden hacer eco de los contenidos de nuestras aplicaciones web. Hacer uso de estos enlaces tambin resulta tan sencillo como los ejemplos que hemos visto hasta ahora de integracin con otros servicios de la web 2.0, como Facebook o Twitter.

Esta integracin de enlaces de comparticin se hace mediante el Helper LinkShare, que nos genera automticamente enlaces a los siguientes sitios: Delicious, Digg, Google Buzz, Facebook, Reddit, StumbleUpon y Twitter. Slo tiene un mtodo que podamos invocar, "GetHtml", y un nico parmetro obligatorio: el ttulo de la pgina, para que conste en algunos sitios que lo pueden necesitar (como Delicious, por ejemplo).

El resultado sera una ristra de botones similares a la siguiente imagen:


35


Y si pulsamos, por ejemplo, en el botn de Twitter nos conectar a Twitter.com y tras loguearnos nos crear automticamente un twitt para compartir el enlace como se muestra en la siguiente imagen.

4. BingEl ltimo servicio que podemos consumir no es exactamente "social", pero no por ello deja de resultar til conocer las posibilidades que su Helper nos ofrece.

Se trata del buscador Bing, con cuyo Helper podremos realizar bsquedas de forma sencilla. Este Helper expone dos mtodos: SearchBox y AdvancedSearchBox. En cuanto al primero, puede recibir dos parmetros, la url del sitio y el ancho de la caja, ninguno de los cuales es obligatorio. Un ejemplo de su uso de ambas cajas en cdigo sera ste:

@Bing.SearchBox()

@Bing.AdvancedSearchBox()

El resultado sera la clsica caja con un botn a la derecha en forma de lupa, con fondo naranja. Si utilizamos dicha caja para realizar una bsqueda, se nos abra una nueva ventana en la que podremos navegar por los resultados de Bing para ese trmino.

Sin embargo, mucho ms espectacular es la opcin de bsqueda avanzada, puesto que aunque la caja es idntica, al buscar no se nos abrir una nueva ventana, sino una especie de popup enganchado a la caja que nos mostrar los resultados, sin salir de nuestro sitio web. En la siguiente imagen se puede ver esta ventana emergente conteniendo los resultados de bsqueda para el trmino "Prueba".


36


5. ConclusionesHemos visto hasta aqu cmo utilizar algunos de los helpers que nos ofrece WebMatrix por defecto para crear sorprendentes efectos e integraciones en nuestros sitios web, con un esfuerzo mnimo.

En prximos artculos veremos cmo crear nuestros propios helpers para evitar repetir ciertos fragmentos de cdigo HTML una y otra vez, encapsulndolos dentro.

6. BibliografaAPI de helpers de WebMatrix Vdeo en espaol sobre creacin de sitios con WebMatrix Centro de desarrollo ASP.NET Sitio Oficial de WebMatrix



37

Manual de Microsoft WebMatrixMicrosoft WebMatrix Instalacin y primera pruebaIntroduccin a WebMatrixInstalacin de WebMatrixPrimeras pruebas

Pantalla Principal de WebMatrixBanda de controles superiorEspacios de trabajo de la aplicacinElementos del proyectoZona centralConclusin de la presentacin de WebMatrixEnlaces de referencia sobre WebMatrix

Videotutorial: instalacin y configuracin de WebMatrixVideotutorial de la Instalacin de WordPress sobre WebMatrixLa Sintaxis RazorMotor de VistasObjetivos de RazorEl Hola Mundo con RazorConclusiones

Aspectos fundamentales de RazorLos caracteres especiales: @, { } y ;Clases y ObjetosVariables y Cadenas Conclusiones

Bucles, condicionales y colecciones en la sintaxis RazorToma de decisiones en RazorBucles y colecciones en la sintaxis de RazorConclusiones

Estructurar pginas en WebMatrixEstructurar el aspectoComunicacin entre pginasConclusiones

Web Matrix Manejando datos (I)1. Introduccin2. Definir una base de datos3. Conclusiones

Web Matrix Manejando datos (II)1. Introducir informacin2. Consultar informacin3. Conclusiones

WebMatrix Gestionando la Seguridad (I)1. Crear base de datos de usuarios2. Registrar usuarios3. Conclusiones

WebMatrix Gestionando la Seguridad (II)1. Autenticarse2. Autorizacin3. Conclusiones

WebMatrix y la Web 2.01. Twitter2. Facebook3. Enlaces para compartir4. Bing5. Conclusiones6. Bibliografa