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 también nos permitirá trabajar con otras tecnologías de desarrollo como PHP.

Autores del manual

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

Javier HolgueraDesarrollador senior con tecnología .NET en Payvision.http://www.javierholguera.com/technoblog/ (11 capítulos)

Miguel Angel AlvarezDirector de DesarrolloWeb.comhttp://www.desarrolloweb.com (2 capítulos)

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 autorización.

1

http://www.desarrolloweb.com/

http://www.desarrolloweb.com/manuales/manual-microsoft-webmatrix.html


http://www.javierholguera.com/technoblog/

http://www.javierholguera.com/technoblog/


Microsoft WebMatrix – Instalación y primera pruebaPresentación de Microsoft Web Matrix y guía para la instalación de la herramienta y una primera prueba de uso.

Cuando alguien se inicia en una tecnología, ya sea .NET, Java, PHP, etc., siempre se enfrenta con un primer desafío 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 tecnologías de la forma más “indolora” posible. Como fruto de este esfuerzo ha nacido WebMatrix.

Introducción a WebMatrixMicrosoft WebMatrix es una herramienta con la que podremos empezar a crear proyectos con ASP.NET de una forma muy sencilla, pero que también nos permitiría, para aquellos cuyo dominio actual sea PHP, trabajar con esta tecnología. Pero como no sólo de frameworks vive el desarrollador, en el capítulo de bases de datos también podremos gozar de una gran interoperabilidad, puesto que WebMatrix es capaz de manejar SQL Server Compact (un “versión” de SQL Server especialmente pensado para proyectos web), SQL Server e incluso MySQL, para que ningún desarrollador PHP eche de menos las herramientas a las que más acostumbrado está.

De este modo, aquellos que empiecen a utilizar WebMatrix podrán hacerlo con las tecnologías que ya conocen y, posteriormente si están interesados en ello, crear proyectos con nuevas tecnologías sin salir del entorno que ya conocen bien.

En este artículo veremos cómo instalar WebMatrix y nos familiarizaremos con la organización de la interfaz de la herramienta y la forma en que se utiliza.

Instalación de WebMatrixActualmente Microsoft ha simplificado la instalación de la mayoría de sus productos web mediante el uso de Web Platform Installer, un programa gracias al que con un par de clicks tendremos no sólo la aplicación 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 botón verde “Install Now” para descargarnos un pequeño instalador (apenas 85KB).

Atención: Es muy importante asegurarse de que el combo de idioma de la parte superior izquierda está configurado para mostrarnos la página en English (United States). La razón es que si seleccionamos Español, nos bajará la versión 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 artículo.


2



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


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

Una vez que se haya bajado “Web Platform Installer” y esté funcionando, sólo tenemos que pulsar en “Products” y, posteriormente, en el botón “Add” junto a “Microsoft WebMatrix Beta 3” para seleccionarlo como descarga.


3




Tras pulsar sobre el botón “Install” nos aparecerá una pantalla a modo de resumen, indicándonos 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 tecnología WebDeploy, que facilita los despliegues. Aceptando se iniciará el proceso de instalación. 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 permitiría 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 máquina (puesto que Web Platform Installer los requiere para realizar las instalaciones que le indiquemos), lo que puede no ser nuestra intención.

Primeras pruebasAl arrancar WebMatrix podremos elegir siempre entre cuatro opciones.

• My Sites: desde esta opción podremos acceder a los proyectos que ya hayamos creado con anterioridad con WebMatrix.

• Site From Web Gallery: esta opción nos da acceso a poder modificar con WebMatrix muchas de las aplicaciones web más 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 galerías de fotos, listas de deseos, etc. También incluye un sitio “vacío”.

• Site From Folder: con esta opción 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. Tendríamos que elegir la opción 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 habría 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 aplicación.

Una vez hayamos pulsado sobre el botón de OK la herramienta da paso a la pantalla principal de trabajo de WebMatrix. En el siguiente artículo veremos las distintas partes que contiene la pantalla inicial de WebMatrix.

Artículo 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 intención de facilitar la vida a los desarrolladores que quieran realizar proyectos web con ASP.NET, pero que también admite diversas otras tecnologías. En el artículo anterior explicamos cómo se puede instalar WebMatrix y en este artículo veremos cuáles son los componentes de la pantalla principal que nos encontraremos al trabajar con el programa.


5



http://www.desarrolloweb.com/articulos/intro-webmatrix.html

http://www.desarrolloweb.com/articulos/pantalla-principal-webmatrix.html


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 clásica “Ribbon” que viera la luz en Office 2007 y que poco a poco se extiende por la mayoría de productos de Microsoft. En esta zona tenemos dos partes bien diferenciadas: a la izquierda se sitúan 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 línea vertical de división se sitúan controles que son “sensibles” al contexto. Esto quiere decir que, en función del espacio de trabajo que estemos usando en ese momento en WebMatrix, aparecerán 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 permitirán acciones como crear uno nuevo, guardar, abrir, etc.; en cambio, con el espacio de trabajo de bases de datos, los botones nos ofrecerán crear una nueva base de datos, ejecutar una consulta, etc.

Espacios de trabajo de la aplicaciónEn la parte inferior izquierda podemos seleccionar entre los diferentes espacios de trabajo de la aplicación. WebMatrix es una herramienta que pretende abarcar todas las funciones que un desarrollo web tiene que realizar para poner una aplicación web en producción. Para mantener un conjunto de funcionalidades tan dispar accesible y organizado, los espacios de trabajo permiten mostrar y ocultar botones y menús en función 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 configuración


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 aplicación, etc.

• Files: este espacio de trabajo sirve para gestionar los ficheros que componen nuestro proyecto, incluida su edición. Desde aquí haremos buena parte del trabajo de desarrollo, como son editar y modificar nuestro código, 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, añadir 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 selección 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 aparecerán 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 código que nos permite modificar ficheros ASP, ASP.NET. PHP, HTML, JavaScript y CSS.

También aquí podremos interactuar con nuestras base de datos, obteniendo tanto resultados de consultas ejecutadas contra


7




ellas, como introduciendo nuevas tuplas en ellas.

Conclusión de la presentación de WebMatrixHasta el momento hemos tratado simplemente de presentar las características principales de esta herramienta de Microsoft. Hemos visto cómo instalar WebMatrix, cómo crear un primer proyecto y cómo está organizada la ventana principal sobre la que se realiza la mayor parte del trabajo. A partir de ahora nos será más 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 artículos continuaremos hablando sobre esta herramienta y cómo utilizarla para hacer proyectos web.

Enlaces de referencia sobre WebMatrixAntes de terminar esta introducción a WebMatrix queremos ofrecer algunos enlaces donde los interesados pueden obtener más información, 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: instalación y configuración de WebMatrixVideotutorial en el que realizamos la instalación de la herramienta gratuita WebMatrix, para el desarrollo web multiplataforma.

WebMatrix es una de las herramientas para desarrolladores que tenía pendiente revisar a fondo. Lo cierto es que en DesarrolloWeb.com ya la habíamos tratado en diversos artículos e incluso tenemos un Manual de WebMatrix que contiene cantidad de información interesante sobre este software.

Dicho manual está fabulosamente desarrollado por nuestro colaborador Javier Holguera, que sinceramente tiene mucho más 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 día a día. De paso, me planteo el objetivo de crear una serie de vídeos para complementar la información que venimos publicando en DesarrolloWeb.com.

Como quizás se sepa, WebMatrix es un programa gratuito de Microsoft que concentra todo lo que un desarrollador web puede necesitar para crear páginas con distintas tecnologías. Tiene, entre otras cosas, un editor de texto para programadores, un cliente para la gestión de bases de datos, una herramienta de publicación en servidores de Internet y una galería de aplicaciones web listas para usar que se pueden configurar y poner en marcha a golpe de ratón. Todo ello forma un paquete de herramientas esenciales que en principio llama mucho la atención.

De modo que esta es mi primera participación en las ayudas que ofrece DesarrolloWeb.com sobre WebMatrix y para comenzar ¿que mejor que hacer un vídeo sobre la instalación del programa? Claro que cualquier persona con unos conocimientos mínimos de informática debe saber perfectamente cómo 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 página web de prueba. Durante el vídeo se verán:

• Las opciones principales de la pantalla de bienvenida de WebMatrix. • La creación de un primer proyecto de sitio web vacío. • Creación de una primera página en el proyecto.


8




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

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

http://msdn.microsoft.com/es-es/asp.net/default.aspx



• Asociación de recursos externos al proyecto, como una fotografía.

Nota: En el vídeo verás la URL de la página 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/.

Además, haremos un rápido recorrido por otras de las opciones que llaman la atención sobre WebMatrix, como el gestor de bases de datos y la herramienta de publicación web.

Como verás, es un vídeo cortito, pero que seguro puede servir de ayuda a muchas personas que están deseando tener una herramienta integrada para el desarrollo de sus propios proyectos, que funciona muy bien con tecnologías Microsoft, como ASP.NET o SQL Server, pero también con herramientas de código abierto como PHP o MySQL.

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

Artículo por Miguel Angel Alvarez

Videotutorial de la Instalación de WordPress sobre WebMatrixVídeo sobre cómo instalar el sistema de blogs WordPress basado en PHP y MySQL sobre la plataforma WebMatrix, de una manera rápida, sencilla y al alcance de cualquier persona.

Este es el segundo vídeo que publicamos sobre WebMatrix, un programa para desarrolladores de páginas web gratuito y que ofrece diversas ventajas y que merece la pena conocer. En el anterior videotutorial ya presentamos qué es WebMatrix, cómo instalarlo y sus funcionalidades principales.

Webmatrix ofrece una herramienta para instalar WordPress así como muchas otras aplicaciones web, a golpe de ratón. A través 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 más que famoso sistema de blogs WordPress, de código abierto, que funciona bajo PHP y MySQL. En este vídeo mostraremos el proceso para disponer de nuestro propio blog WordPress en minutos y de una manera tan sencilla que cualquier persona, casi sin conocimientos técnicos, podría realizarlo.

Poner en marcha un blog en WordPress no es que sea nada extremadamente difícil, 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 habíamos publicado un completo tutorial sobre la instalación de WordPress, pero sin lugar a dudas, a través de WebMatrix la cosa todavía resultará más sencilla, para las personas que tienen experiencia, pero sobre todo para aquellas que nunca han escrito una línea de código.

Nota: Cabe aclarar que WebMatrix es un software pensado para desarrolladores web, aunque estemos remarcando que determinadas de sus funcionalidades sirvan también para que personas sin experiencia tengan acceso a herramientas de código libre para crear en instantes aplicaciones web diversas, como tiendas, blogs, foros, etc. Puedes encontrar más información 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 aplicación web en la que estamos interesados, pero también toda una serie de programas y herramientas que puedan resultar necesarias para que esa aplicación web pueda ponerse en marcha. Además configura todo el servidor para ti, de modo que no tendrás nada más que hacer que indicar cuál es la clave que querrás utilizar para el acceso a las herramientas instaladas.

En el vídeo podrás seguir la serie de pasos necesarios para la instalación, como:

• Selección de la aplicación web deseada en el Web Gallery. • Descarga e instalación del software necesario para ejecutar dicha aplicación web en nuestro ordenador (proceso


9




http://www.desarrolloweb.com/articulos/instalacion-wordpress-en-dominio.html

http://www.desarrolloweb.com/articulos/video-instalacion-webmatrix.html



totalmente automático) • Configuración de WordPress necesaria a realizar en el primer acceso a la aplicación.

Nota: Recuerda que el link para descarga y las instrucciones para la instalación las puedes ver en el vídeo anterior sobre WebMatrix.

Además, para agregar un valor adicional al videotutorial, mostraremos cómo se maneja la herramienta de actualización del blog WordPress para dar de alta un artículo o "post". Finalizaremos mostrando cómo se ve nuestro blog una vez ha sido publicado el primer post.

Esperamos que este vídeo te parezca interesante y aprendas bastante con esta práctica. Verás 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 través de esta interesante aplicación web.

Artículo 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.

Después de haber hablado sobre WebMatrix en anteriores entregas del Manual de WebMatrix, vamos a comenzar a poner manos en la masa y ver cómo se crearían aplicaciones web con esta herramienta. Pero antes queremos comenzar explicando una sintaxis que utilizaremos en nuestro día a día, llamada Razor, que quizás el lector no conozca todavía.

Este es el primero de tres artículos 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 opción para programar aplicaciones web en ASP.NET MVC 3.

Motor de VistasRazor no es en realidad un lenguaje de programación, sino simplemente un motor de vistas. ¿Qué significa esto? Básicamente, hay que analizar qué significan las siglas MVC: corresponden al término Modelo-Vista-Controlador, forma en que se denomina a uno de los patrones de arquitectura más populares. En MVC se pretende separar completamente la información que gestiona nuestra aplicación (el Modelo) de la forma en que se presenta (la Vista), desacoplando ambas capas mediante una capa intermedia (el Controlador) que contendrá toda la lógica para trasladar los datos a la presentación 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 más cómodos.

Objetivos de RazorSon varios los objetivos que Microsoft se ha marcado en la creación de este motor de vistas, entre los que destacaríamos:

• Compacto, expresivo y fluido: buscan reducir la cantidad de código que necesitamos para crear las vistas, evitando que tengamos que denotar de una forma especial cada línea de código procedural. El compilador será lo suficientemente inteligente como para inferir, en muchas ocasiones, qué tipo de código estamos escribiendo.

• Fácil de aprender: aunque esto es siempre relativo, puesto que depende del bagaje previo del desarrollador y de sus capacidades, con sólo este artículo y los dos próximos 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





http://www.desarrolloweb.com/manuales/blogs.html

http://www.desarrolloweb.com/manuales/blogs.html

http://www.desarrolloweb.com/articulos/creacion-entrada-wordpress.html


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 decisión última será nuestra.

• Testeable: podremos crear tests unitarios de las vistas.

El Hola Mundo con RazorVamos a hacer nuestro primer y clásico “Hola Mundo” con Razor. Para ello, nos vamos a apoyar en WebMatrix. En un artículo anterior vimos cómo podemos crear un proyecto vacío. Para añadir un fichero a este proyecto tenemos que situarnos en el espacio de trabajo de “Files” y, posteriormente, pulsar el botón “New” en la barra de botones superior. Al pulsar “New” se nos desplegarán dos opciones bajo él: “New File…” y “New Folder”. Elegimos la primera puesto que sólo queremos añadir 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 después 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"; }

<html><body><h2>Hola @nombre, son las @DateTime.Now</h2> </body></html> Este ejemplo es algo más complejo que el clásico “Hola Mundo”, pero nos permitirá analizar unos cuantos detalles fundamentales de Razor.

En primer lugar, como se puede ver, es posible mezclar código procedural y código HTML de forma sencilla y sin tener que recurrir a montones de secuencias “<%” como ocurre en ASP.NET clásico, o cualquiera que sea el carácter de “escape” que


11





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 código procedural, ejecutable en el servidor en el momento de mandar la página 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 más:

• En la primera llamada, “@nombre”, estamos haciendo referencia a una variable. Esta variable está definida en la zona superior del código. Esta definición es código C#. Este detalle es importante: en Razor todo el código que no es HTML (es decir, el código procedural) se puede programar en C# y en VB.NET a día de hoy.

• En esta primera llamada, en el código 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 más adelante qué significa esto.

El resultado de este bloque de información sería una página “dinámica”, 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 clásico “Hola Mundo” pero con algo más de funcionalidad. En los próximos dos artículos analizaremos más en profundidad los aspectos fundamentales del lenguaje, como la definición de clases, objetos, variables, tipos de datos, bucles, etc.



12



http://www.desarrolloweb.com/articulos/aspectos-fundamentales-razor.html


Aspectos fundamentales de RazorEn este artículo vamos a conocer algunos detalles fundamentales sobre la sintaxis Razor, como los caracteres especiales de codificación, 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 artículo sobre esta serie de tres dedicada a Razor conocimos que la denominación más correcta para Razor es la de “motor de vistas”, descubrimos los objetivos que busca su creación y aprendimos a crear el clásico “Hola Mundo”. En este artículo 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 código a ejecutar en el lado del servidor. Con este carácter podemos introducir sentencias “inline” y sentencias compuestas por una o más líneas de código. Ejemplos de cada uno de estos tipos serían: <h1>Sentencia inline: Son las @DateTime.Now</h1>@{ 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 participación 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 código, compuestos por una o más líneas. 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 excepción. Cuando programemos con WebMatrix y hagamos uso de Razor tendremos que usar clases y objetos. No es el objetivo de este artículo explicar la Programación Orientada a Objetos, campo suficientemente amplio como para haber inspirado centenares de libros en los últimos 25 años. Sin embargo, una explicación lo más ligera y sencilla posible no vendrá mal para quienes se aproximen por primera vez a este concepto.

En la POO tenemos la noción 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, podríamos decir que “Perro” es una clase. Todos aquellos que forman parte de esta clase Perro compartirán en común comportamientos como correr, comer o ladrar, y propiedades como el color, el peso o la edad.

Un objeto es una instanciación concreta de una clase. Es decir, es tomar ese molde o patrón que es la clase para crear un elemento concreto. En el mundo real esto lo podríamos traducir como “mi perro”, “el perro del vecino” o “el perro de la esquina”. Todos ellos pertenecen a un mismo género, la clase “Perro”, y todos ellos van a correr, comer y ladrar, pero tendrán valores distintos para sus propiedades, unos serán blancos, otros más delgados, etc.

Hecho este minimalista esbozo de la relación entre clases y objetos, en Razor vamos a tener a nuestra disposición la programación con clases y objetos. En el ejemplo del “Hola Mundo” descrito en el artículo anterior, vimos cómo, accediendo a la propiedad “Now” del objeto DateTime, obteníamos la fecha actual. No será, sin embargo, la única clase y objeto con la que nos iremos familiarizando conforme nos adentremos en la programación con Razor.

Veremos más 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 métodos. Por ahora es suficiente con conocer esta relación entre clases, objetos, propiedades y métodos.


13



http://www.desarrolloweb.com/articulos/la-sintaxis-razor.html



Variables y Cadenas Las variables nos van a servir para almacenar información. En Razor podemos elegir entre crearlas como “var” para no tener que darles un tipo, o bien indicarles explícitamente dicho tipo, ya sea “int” para enteros, “string” para cadenas de texto, “decimal” para números decimales, etc. Es importante reseñar que los nombres que les demos a las variables son sensibles a mayúsculas. 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 mayúsculas, por lo que tampoco podríamos definir una variable como “INT variable”. Veamos algunos ejemplos: @{// Declaración 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 carácter comillas dobles, como suele ser habitual. En caso de necesitar escapar un carácter especial, la forma de fácil es utilizar el carácter @. Ojo, no debemos confundir este carácter @ con el otro carácter @ del que hemos estado hablando hasta ahora y que sirve para definir fragmentos de código en Razor. Unos ejemplos a continuación: @{ // 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 características 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 próximo artículo aprenderemos cómo 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, ejecución de bucles y el uso de colecciones de valores.

En los dos primeros artículos, 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 relación que tiene con la Programación Orientada a Objetos y la forma en que se crean variables y cadenas.

En este artículo nos centraremos en otros tres aspectos clave: la forma en que se gestiona la toma de decisiones, la ejecución de bucles y el uso de colecciones de valores.

Toma de decisiones en RazorExisten varios operadores en Razor tanto para definir distintos flujos de ejecución en función de una condición lógica. Existe un tipo concreto conocido como “bool” que nos sirve para definir variables que sólo podrán contener uno de estos dos valores: verdadero o falso. En el siguiente fragmento de código podemos ver un ejemplo: @{bool resultado = miObjeto.HaSidoExitoso();if (resultado == true){<h1>Ha salido bien.</h1>


14






}else{<h1>Ha fallado.</h1>}} Analicemos el fragmento. En primer lugar recogemos en la variable “resultado” lo que nos devuelve el método “HaSidoExitoso” de un objeto “miObjeto”. Este resultado, al estar almacenado en una variable booleana, sólo puede ser verdadero o falso.

A partir de ahí, utilizando el operador de decisión 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 decisión, 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, podríamos definir tres etiquetas “case” para cada uno de esos tres valores. El siguiente ejemplo nos aclara cómo 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 instrucción break y contendrán todas las instrucciones que queremos ejecutar para ese caso. En el ejemplo, sin embargo, nos hemos limitado a definir unos cuantos comentarios (que nunca aparecerán en el HTML devuelto al cliente, al igual que todo el código 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 mayoría de casos, para realizar control de errores.

Bucles y colecciones en la sintaxis de RazorEn cuanto a los bucles, en un artículo anterior hablábamos sobre clases y objetos. Vamos a introducir un nuevo concepto: las colecciones. No son más que lo que su propio nombre indica, colecciones u estructuras de datos que contienen múltiples objetos de un mismo tipo. Es decir, que una colección 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 colección. Por ejemplo, si el resultado de un método es una colección de enteros con las edades de los usuarios de una página y queremos mostrar por pantalla dichos valores, lo más práctico es iterar por esta colección 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<coleccion.Length; i++){<h1>Numero @coleccion[i]</h1>}}


15




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

Una vez creada la colección, la recorreremos con el operador for. Para ello, necesitamos una variable contador, que nos permite saber en qué posición de la colección nos encontramos. Desde los tiempos de C, 40 años atrás, i ha sido el nombre más popular para este tipo de variables (seguido de j, k, l, etc.), así que sigamos la tradición.

Una vez definida la variable, tenemos que indicar el límite del bucle con una sentencia lógica. En este caso estamos accediendo a la propiedad “Length” de la colección (no olvidemos que todo son objetos y los objetos tienen propiedades con valores que les definen, como el número de elementos en este caso).

La última cláusula sirve para indicar cuantos avances queremos en nuestra variable contadora al finalizar cada iteración del bucle (el operador ++ nos sirve para indicarle que sólo uno). Resumiendo, el bucle entero se leería, en lenguaje natural, así:

“Define una variable contador i con valor inicial 0, que no puede ser mayor que el número de elementos de la colección, y que avanza una posición en cada iteración”

Posteriormente, con el bloque de llaves definimos el código que queremos ejecutar en cada iteración del bucle. En este caso lo que estamos haciendo es, para cada iteración, acceder a un elemento de la colección. 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 colección; en concreto, al elemento que ocupa la posición representada por el valor de la variable contador. Como es habitual, el primero de los elementos de la colección ocupa la posición 0. El resultado del fragmento de código que hemos visto sería una imagen parecida a la siguiente.

Existen otros operadores de bucle, como While y Foreach, que dejaremos para investigación del lector en los enlaces que se proveen en la sección de Bibliografía.


16




ConclusionesCon este artículo terminamos la serie relacionada con Razor, tras ver cómo 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 mayoría 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 debería resultar excesivamente dificultoso.

Por último, para los que prefieran VB.NET, es importante destacar que también es posible trabajar con Razor y este lenguaje de programación.


Estructurar páginas 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 introducción a la sintaxis Razor. En el presente artículo vamos a empezar a poner en práctica los conocimientos adquiridos.

Veremos a continuación cómo se estructura un sitio desarrollado con Microsoft WebMatrix, tratando tanto la estructura relacionada con el aspecto de la web como la comunicación entre las distintas páginas.

Estructurar el aspectoHoy en día cualquier sitio web se estructura de una forma más compleja que simples páginas enlazadas las unas a las otras. Como mínimo, en la mayoría de sitios nos encontramos con una cabecera y un pie compartido por cada página, formando una estructura estática sobre la que se van mostrando los contenidos del sitio.

Como no podía ser de otro modo, WebMatrix nos ofrece la posibilidad de recrear estas estructuras, por complejas que sean. A continuación vamos a crear una bastante común: una página “maestra”, una página de cabecera y otra de pie. Partiendo de un proyecto vacío (en un artículo anterior se vio cómo crearlos), vamos a ver cómo 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 vacío, sólo aparecerá el nombre del mismo.

Con el botón derecho del ratón haremos aparecer el menú contextual, en el que elegiremos la opción 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 añadiremos un nuevo fichero con la opción “New File”. Nos aparecerá un cuadro de diálogo 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 sólo podrán visualizarse si se cargan como parte de otros ficheros que no tengan ese prefijo.

Del nuevo fichero HTML borraremos todo el código y simplemente escribiremos lo siguiente: <div>Esto es la cabecera</div> Repetiremos la operación para añadir un fichero “_Pie.html”, que contendrá el siguiente fragmento HTML: <div>Esto es el pie</div> Ahora que tenemos la cabecera y el pie estamos listos para crear nuestra página maestra. Añadimos un nuevo fichero a la carpeta “Compartido” de nombre “_Maestra.cshtml”. El código de esta nueva página será el siguiente: <!DOCTYPE html><head><title> Titulo de la pagina </title></head> <body>@RenderPage("/Compartido/_Cabecera.cshtml")<div id="main">@RenderBody()</div>@RenderPage("/Compartido/_Pie.cshtml")</body></html> Analicemos este fragmento de código. Puesto que va a ser la página contenedora de todas las demás, es necesario que defina las etiquetas html, head y body. En el interior del cuerpo estamos cargando el contenido de las páginas Cabecera y Pie que hemos creado anteriormente, utilizando el comando RenderPage, que como se puede deducir por su nombre permite renderizar una página como un fragmento HTML dentro de otra.

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


18




acabamos de definir. Añadimos un nuevo fichero MiPrimerContenido.cshtml. Destacar que no vamos a ponerle el signo ‘_’ como prefijo, puesto que esta página sí será navegable. En el interior de esta nueva página, algo tan simple como esto: @{ Layout = "/Compartido/_Maestra.cshtml";}<div>Esto es el contenido principal</div> Si tenemos abierta la página MiPrimerContenido.cshtml, podemos navegar directamente a ella pulsando el botón “Run” que aparece en la banda de iconos de la zona superior de WebMatrix. El resultado debería ser algo parecido a lo que podemos ver en la siguiente imagen.

Añadir un estilo: A nivel de presentación, no es especialmente impactante, pero estamos simplemente estructurando contenido y compartiéndolo. Sin embargo, desde WebMatrix también podemos trabajar con archivos CSS y aprovechar que su editor de código nos resalta este lenguaje. Añadamos una carpeta “Estilo” y dentro un nuevo fichero de tipo CSS con un nombre tan original como “Estilos.css”. En su interior podríamos 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 pequeño cambio en el fichero _Maestra.cshtml. Vamos a enlazar en él este nuevo fichero de CSS, además de definir un par de etiquetas div para aprovechar los estilos que hemos creado. El resultado podría ser algo así: <!DOCTYPE html><head><title> Titulo de la pagina </title><link href="@Href("/Estilo/Estilos.css")" rel="stylesheet" type="text/css" /></head> <body><div id="cabecera">


19




@RenderPage("/Compartido/_Cabecera.cshtml")</div><div id="main">@RenderBody()</div><div id="pie">@RenderPage("/Compartido/_Pie.cshtml")</div></body></html> Si refrescamos veremos cómo se alteran tanto los colores como los tamaños de la página. De este fragmento de código lo más interesante es el método @Href. Su función consiste en crear una URL que sea compatible con cualquier navegador, a partir de un fichero local.

Comunicación entre páginasHemos visto cómo podemos ir organizando el aspecto de nuestra página web añadiendo distintos bloques, en forma de páginas web independientes. Sin embargo, el ser independientes puede llegar a ser un problema. Por ejemplo, supongamos que queremos modificar el Título de la ventana, haciéndolo de forma acorde al contenido que estamos cargando. Necesitaríamos comunicar la página que aloja el contenido (y conoce dicho Título) con la página Maestra, que es la única que tiene acceso a la etiqueta <title>.

La forma de lograr esta comunicación es tan sencilla como todas las cosas en WebMatrix. Tenemos que hacer uso del objeto PageData, una colección de parejas nombre/valor que nos permite comunicar entre distintas páginas.

En nuestro ejemplo, el primer paso sería modificar la página de contenido MiPrimerContenido.cshtml que añadimos anteriormente. Desde ella situaríamos el valor del Título, que posteriormente va a leer la página maestra. La sentencia para lograrlo es muy sencilla: @{ PageData["Titulo"] = "Mi Primer Contenido"; } Ahora, para consumir este valor desde la página maestra, que es la única que puede establecer el título, introduciríamos esta sentencia: <head><title>@PageData["Titulo"]</title></head> Sencillo, ¿verdad? Tan sencillo como potente, puesto que de este modo podremos intercambiar información entre páginas, al tipo que cada una se ocupa de recuperar la información que le corresponde.

ConclusionesCon muy poco esfuerzo y aún menos código hemos conseguido definir una estructura básica pero lo suficientemente potente como para gestionar muchos sitios web, permitiendo reutilizar una gran cantidad de código. También hemos visto cómo comunicar los fragmentos que componen la página web, para poder cargar contenido desde unos referenciado por otros.

En próximos artículos veremos otros aspectos básicos del desarrollo web, como la gestión de datos o la seguridad.



20



http://www.desarrolloweb.com/articulos/webmatrix-manejo-datos-1.html


Web Matrix – Manejando datos (I)En este artículo vamos a ver cómo podemos gestionar una base de datos con WebMatrix.

1. IntroducciónPocas 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 más habitual. En WebMatrix tenemos un muy buen soporte para gestionar las bases de datos de nuestras aplicaciones, tanto para su definición como para la introducción y consulta de datos.

En cuanto a las bases de datos que pueden gestionarse con WebMatrix, SQL Server Compact Edition viene como opción por defecto. SQL Server CE no es precisamente un producto novedoso, puesto que ya hace años 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 más web. Para ello, entre las novedades que presenta, destacaríamos 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 instalación ninguna. Simplemente hay que copiar los binarios de SQLCE al directorio bin de nuestra aplicación 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 aplicación web.

• Diseñadores gráficos 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 están soportadas, con lo que en cualquier momento podemos pasar a una base de datos más potente si nuestra aplicación web comienza a demandarlo.

Para la gente que esté más familiarizada con MySQL, WebMatrix también 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 cómo podemos insertar, actualizar, borrar y consultar información de una base de datos, empecemos por lo más básico: cómo definir esa base de datos. En WebMatrix todas estas operaciones se hacen desde el espacio de trabajo de "Databases".

Si nuestra aplicación no tiene todavía una base de datos, en la parte central podremos ver un enlace directo para añadir una nueva base de datos, bajo el mensaje "Add a Database to your site". Si pulsamos en él automáticamente 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 botón "New Table" que aparece en la barra de iconos superior.

Como vemos en la imagen, al crear la tabla se crea automáticamente 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 indicándonos que es necesario cuando queramos guardar la tabla. Y si borramos la columna e intentamos guardar la tabla vacía, tampoco nos lo permitirá.

Para poder darle nombre a esta columna, simplemente nos dirigimos al grid de propiedades y en la sección (Name) indicamos el valor. En la imagen anterior también podemos ver resaltados los controles que podemos utilizar para añadir nuevas columnas (o eliminarlas), así como establecer relaciones entre tablas cuando ya exista más 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 automáticamente un valor a las

columnas identidad cuando se inserta una fila. Las columnas de clave primaria suelen ser de identidad, para poder delegar la creación del valor de la clave. Sólo aplica a columnas de tipo numérico

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

Añadamos 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 límites. • Autor: columna de tipo nvarchar de 100 de longitud. Permitiremos valores nulos en ella. • Fecha: columna de tipo datetime.

Con esto ya tendríamos nuestra tabla configurada. Para guardarla, pulsaríamos el botón 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 creación para bases de datos SQL Server CE. Sin embargo, es una característica que se espera que esté próximamente disponible.

Con WebMatrix también podemos introducir datos en las tablas de nuestra base de datos. Basta con pulsar sobre el botón "Data" en la pestaña Table, una vez que hayamos seleccionado la tabla en la que queremos introducir la información. El proceso de edición es el típico de cualquier grid de datos. Es importante recordar que no podemos dejar sin información 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 automática. 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 través del editor de WebMatrix en la tabla "Post" creada anteriormente.

3. ConclusionesHemos visto cómo podemos crear tablas y columnas en WebMatrix de forma muy sencilla, así como introducir información, ya sean datos maestros o de prueba. En el próximo artículo aprenderemos cómo podemos consumir e insertar información de la base de datos, mediante código.


Web Matrix – Manejando datos (II)En este artículo conoceremos cómo podemos introducir y consumir información en nuestras bases de datos.

En el anterior artículo sobre cómo manejar datos con WebMatrix aprendimos cómo crear tablas y columnas, así como la forma de insertar información para hacer pruebas o consolidar datos maestros. En este artículo conoceremos cómo podemos introducir y consumir información en nuestras bases de datos.

1. Introducir informaciónPartiremos de la tabla Post que creamos en el artículo anterior y veremos cómo introducir datos en ella mediante código, que es el procedimiento que habitualmente seguiremos. Para ello, vamos a crear una página nueva, "Postear.cshtml", que servirá para introducir un nuevo post en la base de datos. El código de esta página sería 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));}}

<form method="post" action=""><table><tr><td><label>Titulo</label></td><td><input type="text" name="titulo" size="52" value="@Request["titulo"]"/></td></tr><tr><td><label>Contenido</label></td><td><textarea name="contenido" rows="15" cols="40"value="@Request["contenido"]"></textarea></td></tr> <tr><td><label>Autor</label></td><td><input type="text" name="autor" size="52"value="@Request["autor"]"/></td></tr><tr><td><input type="submit" value="Publicar" /></td></tr></table></form> Empecemos analizando el HTML. Se compone de una tabla con 3 campos para introducir título, contenido y autor, más un botón para procesar la información. Cuando pulsemos el botón, el posteo se realizará sobre la propia página, y ahí entrará en juego el código que hemos definido en la parte superior.

Analicemos cada uno de los pasos que están descritos y qué métodos están involucrados:

1. En primer lugar, definimos que sólo se ejecutará este código si la petición a la página se ha realizado mediante HTTP-POST, al estar comprobándose a variable "IsPost", que nos indica si hemos llegado a la página mediante una petición de este tipo.

2. En caso de que estemos ejecutando una petición por POST, abrimos una conexión con la base de datos mediante el método Open de la clase Database, pasándole como parámetro 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 conexión, escribimos la sentencia SQL que queremos ejecutar y se la pasamos al método Execute, junto con los parámetros que hemos definido en dicha sentencia. Estos valores los obtenemos de Request, que es donde los hemos situado con el HTML que acompaña a la página (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 inserción.

5. Por último, realizamos una redirección a una página pasándole como parámetro este id. Utilizamos el método Href para calcular la URL de una forma independiente del navegador que esté renderizando la página, y recurrimos a Response.Redirect para hacer efectiva la redirección.


25




Idealmente, la página MostrarPost se encargaría de enseñarnos el resultado de la información que hemos introducido, ya convenientemente formateada. Para ello, deberíamos recuperar de la base de datos la información previamente insertada. Veamos cómo podríamos hacer eso.

2. Consultar informaciónNecesitamos poder leer información en las tablas de nuestra base de datos, así como mostrarla a través de un fragmento de código HTML. A continuación un ejemplo de ambas necesidades combinadas para generar una página con información dinámica. @{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"]);}

<h1>@postInfo.Titulo</h1><h3> publicado el @postInfo.Fecha por @postInfo.Autor</h3><div style="border: .2em dotted #900; width:350">@postInfo.Contenido</div>

El HTML de nuevo es lo más sencillo posible, puesto que no es objeto de estos artículos poner el acento sobre cómo realizar una página web vistosa. Como se ve, mostramos la información que contiene un objeto llamado postInfo; en concreto, los campos Titulo, Fecha, Autor y Contenido. Pero, ¿cómo hemos obtenido este objeto postInfo? Echemos un ojo al código en la parte superior.

En primer lugar, abrimos una conexión a la base de datos y creamos una sentencia SQL como ya hemos aprendido en la sección anterior. La diferencia es que ahora no vamos a ejecutar sino consultar nuestra base de datos. Existen tres métodos distintos para realizar esta operación:

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

• QueryValue: nos devuelve un valor único. Es ideal, por ejemplo, si nuestra consulta tiene que devolvernos el número de filas que cumplan una condición, o el valor que suman todas ellas para una columna concreta.

• QuerySingle: es el método que estamos ejecutando y sirve para devolver un único registro. En nuestro caso, al estar buscando por el ID, sabemos que sólo 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 difícil imaginar que, dinámicamente, nuestro código es capaz de inferir cómo 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 posición de la columna, algo mucho más propenso a errores y menos legible.


26




El resultado de nuestra página MostrarPost.cshtml podemos verlo en la siguiente imagen:

3. ConclusionesEn estos dos artículos hemos visto todo el tratamiento de datos que podemos hacer en WebMatrix y que nos cubre más del 80% de los escenarios. Si en anterior aprendimos a definir nuestro esquema de base de datos, en éste hemos podido comprobar qué fácil es insertar y consultar información.


WebMatrix – Gestionando la Seguridad (I)En este artículo aprenderemos cómo utilizar los mecanismos de seguridad que ASP.NET WebPages nos ofrece y cómo podemos hacer uso de ellos desde WebMatrix.

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

En esta primera parte veremos cómo 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 cómo forma podemos autenticarnos y autorizar en base a estos mecanismos.

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

En WebMatrix no puede ser más sencillo crear esta base de datos. WebSecurity es el helper que nos va a acompañar durante éste y el siguiente artículo, pieza central sobre la que gira toda la seguridad. Esta clase nos ofrece un método llamado


27





InitializeDatabaseConnection, que servirá para definir las tablas que respaldarán nuestro sistema de seguridad.

Esta llamada debemos hacerla sólo una vez y debe hacerse antes que cualquier otro proceso de carga, por razones obvias. Pero, ¿dónde podríamos realizarla para asegurarnos que no se realiza más de una vez y que las tablas estén listas antes de estarlo, prácticamente, la propia aplicación? 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 página web, permitiéndonos establecer valores globales (como podrían ser claves compartidas por todas las páginas) o ejecutar procesos que son necesarios antes de arrancar la aplicación, como éste que estamos explicando.

Para ello, añadiremos una nueva página _AppStart.cshtml en la carpeta raíz de nuestro proyecto e introduciremos en ella el siguiente fragmento de código: @{ WebSecurity.InitializeDatabaseConnection( "Mi Blog", "Usuario", "UsuarioId", "Nombre", true);}Vamos a analizar cada uno de los parámetros 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 tuviéramos

unas tablas para la seguridad de nuestra aplicación, deberíamos pasar "false" en este parámetro.

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 podría ser una tabla que utilizáramos para almacenar información extra sobre cada uno de nuestros usuarios, como direcciones de correo, físicas, 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 número de campos relacionados con la contraseña y su gestión.

También 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 función de su pertenencia. Ambas tablas están conectadas a través de la tabla intermedia UsersInRoles. Es, en conjunto, un modelo sencillo y fácilmente comprensible.

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


28




usuarios. Para ello deberíamos crear una página "Registrar.cshtml" desde la que los usuarios puedan introducir su nombre y su contraseña. Un ejemplo de código lo más sencillo posible sería 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"]); }}

<form method="post" action=""> <fieldset> <legend>Registrarse como usuario</legend> <div> <label for="nombreusuario">Nombre:</label> <input type="text" name="nombreusuario" value="@Request["nombreusuario"]"/> </div> <div> <label for="nombreusuario">Clave:</label> <input type="password" name="password" value="@Request["password"]"/> </div> </fieldset><div><input type="submit" value="Registrarse" /></div></form> El código HTML es lo suficientemente sencillo como para no necesitar mayores comentarios. En cuanto al código 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 contraseña.

A esta llamada podemos pasarle también 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 sería necesario enviarlo por correo al usuario que se acaba de registrar, para que posteriormente procediera a confirmar el registro pasándole, a la página correspondiente, dicho token y realizando nosotros una llamada WebSecurity.ConfirmAccount con el token como único parámetro. Sin embargo, en aras de la sencillez, vamos a dejar el registro tal cual, sin necesidad de realizar una posterior confirmación con ese token.

3. ConclusionesHemos visto cómo 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 artículo abordaremos las otras dos operaciones fundamentales en la seguridad: autenticación y autorización.


WebMatrix – Gestionando la Seguridad (II)En este segundo artículo dedicado a la seguridad en aplicaciones desarrolladas con WebMatrix aprenderemos cómo gestionar la autenticación y autorización de usuarios.

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

1. AutenticarseEn el anterior artículo aprendimos cómo registrar nuevos usuarios. Una vez hecho eso, el siguiente paso es permitir que se autentiquen en nuestra aplicación para darles acceso a mayores privilegios. Para ello crearíamos una página "Loguear.cshtml"


29



http://www.desarrolloweb.com/articulos/webmatrix-gestionando-seguridad.html


para proceder a la autenticación que podría tener un código como el siguiente: @{if(IsPost){if(WebSecurity.Login(Request["nombreusuario"], Request["password"]) == true){<text>Usuario autenticado</text>}else{<text>Autenticación fallida</text>}} }

<form method="post" action=""><fieldset><legend>Loguearse como usuario</legend><div><label for="nombreusuario">Nombre:</label><input type="text" name="nombreusuario" value="@Request["nombreusuario"]"/></div><div><label for="nombreusuario">Clave:</label><input type="password" name="password" value="@Request["password"]"/></div> </fieldset><div><input type="submit" value="Loguear" /></div></form>

La parte del código HTML es prácticamente idéntica a la que veíamos en el anterior artículo. En cuanto al código procedural, se realiza una llamada al método Login del helper WebSecurity. Este método acepta como parámetros el nombre de usuario y la contraseña, más un parámetro opcional de tipo booleano que sirve para indicar si queremos que la aplicación 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 código HTML de la página, con un resultado como el que se puede ver en la siguiente figura:

Con esto completaríamos la funcionalidad necesaria para realizar autenticaciones, pero nos faltaría la parte de la autorización, es decir, asegurarnos de que un usuario tiene los permisos necesarios para poder acceder a un recurso o funcionalidad. Veamos cómo hacerlo.

2. AutorizaciónEl proceso habitual de autorización 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 página de forma automática para que pueda autenticarse. 4. Una vez que se ha autenticado correctamente, se le redirige al recurso que inicialmente quería acceder.

Veamos cómo podemos reproducir este proceso con WebMatrix. En primer lugar, necesitaríamos una página para hacer la autenticación como la que hemos creado antes. En segundo lugar, necesitaríamos crear una página que tuviera control de acceso. Vamos a añadir una página "Comentar.cshtml" que permita dejar un comentario en un post. Para poder comentar, vamos a requerir que el usuario esté autenticado. Una primera aproximación al código sería 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());}}}

<form method="post" action=""><fieldset><legend>Comentar el post</legend><div><label>Post ID</label><input type="text" name="postid"value="@Request["postid"]" /> </div><div> <label>Comentario</label><textarea name="comentario" rows="15" cols="40"value="@Request["comentario"]"></textarea></div></legend></fieldset><div><input type="submit" value="Comentar" /></div> </form> En el código HTML recogemos los dos datos que necesitamos: el identificador del post al que vamos a enlazar el comentario y el contenido del comentario. Podríamos no requerir este identificador si enlazáramos la página de comentarios desde la página del post, pero no es objeto de este artículo entrar en este tipo de complejidades.

En cuanto al código procedural, podemos ver que el primer paso es comprobar si el usuario está autenticado. De no estarlo, se realiza una redirección automática a la página de Logueo, pasando como parámetro la URL a la que queremos que se retorne una vez se haya completado satisfactoriamente la autenticación.

En caso de que el usuario sí esté autenticado y hayamos llegado a la página por HTTP-POST (por ejemplo, tras pulsar el botón de "Comentar", introducimos el comentario en la base de datos. Destacar que utilizando el helper WebSecurity tenemos acceso a mucha información sobre el contexto de seguridad. Algunos de los métodos más destacados serían:

• 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 autenticación del usuario,

volviendo a ser un usuario anónimo.

3. ConclusionesHemos visto una panorámica general de cómo gestionar el registro de usuarios y su autenticación y autorización, de una forma sencilla y rápida. Este tipo de código de infraestructura suele alejarnos de lo que realmente nos importa, el desarrollo de nuestras aplicaciones web, haciéndonos perder tiempo en afinar un sistema que sea versátil y robusto.

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



32




WebMatrix y la Web 2.0En este artículo 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 información valiosa.

WebMatrix, en su afán por simplificar el desarrollo de sitios web, ofrece un gran número de clases Helper para facilitarnos trabajar con este tipo de servicios con apenas un par de líneas de código.

1. TwitterCada vez quedan menos sitios web que no tengan su propia cuenta en Twitter, desde la que ofrecer enlaces a la información 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 mayoría de los casos, la presencia de Twitter en el sitio web se realiza mediante la integración de uno de los controles de timeline que nos ofrece la propia web de Twitter.

La integración es sencilla, basta con copiar y pegar un trozo de código relativamente grande en nuestras páginas. Sin embargo, que sea relativamente sencilla y rápida no significa que sea ni elegante ni cómoda, puesto que estamos introduciendo algo totalmente ajeno en nuestro desarrollo. Sería, por tanto, mucho más deseable hacer esa integración con código propio. Aquí es donde aparece WebMatrix y uno de sus Helpers para ayudarnos: el helper Twitter.

Este helper tiene dos métodos principales con los que poder trabajar:

• Profile: este método recupera la información específica para una cuenta determinada. Sus parámetros, además del nombre de la cuenta, sirven para personalizar el aspecto que va a tener la caja en la que se presenta la información.

• Search: este método sirve para mostrar la información relacionada con una cadena de búsqueda, dentro de Twitter. Al igual que el método anterior, tiene un gran número de parámetros que sirven para personalizar el aspecto de la caja que muestra los resultados.

Veamos un ejemplo de uso rápido. Imaginemos que tenemos una aplicación con una barra lateral y queremos mostrar en ella la información relacionada con una cuenta de Twitter. El fragmento de código que necesitaríamos sería algo como lo siguiente: <h4>Barra lateral</h4>@Twitter.Profile("deswebcom")

Como podemos ver, una y nada más que una línea de código necesitamos para integrar correctamente Twitter en nuestras páginas. Si quisiéramos, en lugar de mostrar un perfil concreto, hacer una búsqueda la forma sería la misma, salvo que llamaríamos al método "Search".


33




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

Ambos, como ya comentábamos antes, pueden recibir una serie de parámetros opcionales que sirven para personalizar el aspecto de la caja. En la bibliografía se pueden encontrar enlaces a páginas en las que se enumeran estos parámetros así como su uso.

2. FacebookJunto con Twitter, la otra red social por excelencia a día de hoy. En este caso, el Helper que tenemos a nuestra disposición nos permite añadir el famoso botón "Me Gusta". Este Helper, llamado como es obvio "Facebook", tiene un único método Like. Este método tiene 6 parámetros opcionales. Aparte de los habituales relacionados con el aspecto, estos son los más relevantes:

• Url: el primer parámetro nos permite modificar la url que el usuario va a indicar que le gusta. Por defecto, la url será la de la página que contiene el botón.

• Action: podemos cambiar la acción por defecto, "Me gusta", por una como "Recomiendo", mediante este parámetro.

• 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 código con varios botones mostrando los valores para los distintos parámetros: <div><br/>@Facebook.LikeButton("http://www.desarrollo.com")<br/> @Facebook.LikeButton( url: "http://desarrolloweb.com",action: "recommend",width: 350,layout: "button_count",showFaces: true)<br/>


34




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

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

Esta integración de enlaces de compartición se hace mediante el Helper LinkShare, que nos genera automáticamente enlaces a los siguientes sitios: Delicious, Digg, Google Buzz, Facebook, Reddit, StumbleUpon y Twitter. Sólo tiene un método que podamos invocar, "GetHtml", y un único parámetro obligatorio: el título de la página, para que conste en algunos sitios que lo pueden necesitar (como Delicious, por ejemplo).

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


35




Y si pulsamos, por ejemplo, en el botón de Twitter nos conectará a Twitter.com y tras loguearnos nos creará automáticamente 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 búsquedas de forma sencilla. Este Helper expone dos métodos: SearchBox y AdvancedSearchBox. En cuanto al primero, puede recibir dos parámetros, 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 código sería éste: <div><br/>@Bing.SearchBox()</div><div><br/>@Bing.AdvancedSearchBox()</div>

El resultado sería la clásica caja con un botón a la derecha en forma de lupa, con fondo naranja. Si utilizamos dicha caja para realizar una búsqueda, se nos abría una nueva ventana en la que podremos navegar por los resultados de Bing para ese término.

Sin embargo, mucho más espectacular es la opción de búsqueda avanzada, puesto que aunque la caja es idéntica, 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 búsqueda para el término "Prueba".


36




5. ConclusionesHemos visto hasta aquí cómo utilizar algunos de los helpers que nos ofrece WebMatrix por defecto para crear sorprendentes efectos e integraciones en nuestros sitios web, con un esfuerzo mínimo.

En próximos artículos veremos cómo crear nuestros propios helpers para evitar repetir ciertos fragmentos de código HTML una y otra vez, encapsulándolos dentro.

6. BibliografíaAPI de helpers de WebMatrix Vídeo en español sobre creación de sitios con WebMatrix Centro de desarrollo ASP.NET Sitio Oficial de WebMatrix



37




http://msdn.microsoft.com/es-es/asp.net/default.aspx

http://channel9.msdn.com/Blogs/channel9spain/Microsoft-WebMatrix-Crear-web-con-ASPNET-RAZOR

http://www.asp.net/webmatrix/tutorials/asp-net-web-pages-api-reference#Helpers

Manual Microsoft Webmatrix

Documents

Transcript of Manual Microsoft Webmatrix