31 octubre 2011 ~ 23 Comments

Nuestro primer proyecto Webmatrix

Una vez tengamos instalado y corriendo Webmatrix nos recibirá una pantalla de bienvenida similar a esta:

Bienvenida Webmatrix

Esta pantalla nos permite elegir entre cuatro opciones:

  • Mis sitios: Nos permite acceder a los sitios que hayamos creado con anterioridad
  • Sitio a partir de Web Gallery: Nos permite crear sitios a partir de aplicaciones web ya desarrolladas. En esta sección encontraremos a WordPress (uno de mis preferidos), Drupal, Umbraco, DotNetNuke
  • Sitio a partir de plantilla: Webmatrix nos ofrece crear un sitio nuevo pero siguiendo una estructura básica, así pues la plantilla nos provee de la estructura para una galería fotográfica, un calendario, un sitio de inicio y por ultimo aunque confieso me parece simpático una panadería
  • Sitio a partir de carpeta: Finalmente podemos crear un sitio a partir del contenido de una carpeta. Esta opción es útil si tenemos algún desarrollo en otro editor y queremos continuar el desarrollo o integrarlo a Webmatrix

Para este primer ejemplo partiremos entonces desde un sitio vacío, por lo que escogeremos, sitio a partir de plantilla, Sitio vacío [Inglés] y en la parte inferior colocaremos como nombre para nuestro primer proyecto el siempre amado y nunca olvidado “Hola Mundo”:

nuevo sitio webmatrix

Luego de este punto Webmatrix habrá creado los archivos y carpetas necesarias para nuestro proyecto, estos se encuentran ubicados en la ruta de acceso que indica debajo de la dirección URL local que tiene nuestro desarrollo. Ahora bien, podrás notar en este punto que Webmatrix integra la –ribbon- similar a Office 2010, esta sección se divide en dos porciones. La primera situada a la derecha contienen los controles para el servidor IIS que está integrado con Webmatrix, esto nos permite ejecutar, detener o publicar la aplicación en cualquier momento. La segunda sección ubicada a la derecha contiene los conjuntos de acciones relacionados con la zona de trabajo en la que nos encontremos. Siguiendo con la pantalla, en el panel izquierdo inferior se encuentra la selección de los espacios de trabajo. A partir de estos se puede navegar entre los diferentes aspectos que debemos tener en cuenta sobre el desarrollo. En el momento los espacios de trabajo disponibles son:

  • Sitio: Nos da una visión general del proyecto, su ubicación y dirección URL local desde donde está desplegando la aplicación el servidor IIS. También permite publicar el sitio a un servidor web externo y ajustar algunos parámetros como la versión de .Net sobre la que se compilará.
  • Archivos: Contiene los archivos del proyecto, acá encontraremos los Html, CSS, Javascript y demás
  • Bases de datos: Despliega las bases de datos que tenemos asociadas al proyecto
  • Informes: Genera informes de rendimiento y SEO del proyecto

Para este primer ejemplo presionaremos sobre archivos, luego en la –ribbon- sobre Nuevo, nuevo archivo. Veremos una pantalla de selección donde podremos escoger entre diversos tipos de archivo para agregar a nuestra aplicación (Html, CSS, JScript, PHP, XML)

nuevo archivo webmatrix

Seleccionaremos CSHTML y en nombre otorgaremos holaMundo.cshtml. En este punto notarás que estamos trabajando con un nuevo tipo de archivo. Y es que la extensión CSHTML permite contener código HTML, CSS y Javascript pero también incluye código que será ejecutado por el servidor.

Cuando presionemos aceptar tendremos un código similar a este:

hola mundo webmatrix cshtml

Notemos que este código contiene la estructura básica de cualquier página web. Una declaración del tipo de archivo, las etiquetas <html>,<head> y por ultimo <body>.

Este código que ha colocado Webmatrix es estático pues corresponde a código Html normal que nuestro navegador interpreta y renderisa sin hacer ningún cambio. Ahora bien, para hacer el ejemplo más interesante escribiremos nuestras primeras líneas usando Razor, el lenguaje de vistas de Asp.Net.

Bruce wayne webmatrix

Vamos a ver con detalles el código que se ha escrito usando Razor.

  • La primera línea con @{ } delimita una sección donde irá código procedural, así pues el interprete (en el servidor) ejecutará lo que encuentre entre las llaves. En esta línea se creó una variable llamada nombre que contiene la cadena “Bruce Wayne”
  • Entre las etiquetas <body> se escribió un texto corriente hasta que llegamos a la @, esa @ es remplazada por el contenido de la variable. En este caso tenemos la variable @nombre que en tiempo de ejecución se convertirá en “Bruce Wayne”
  • Para terminar con @DateTime.Now el cual es la propiedad de un objeto de Razor que  entrega la fecha y hora del sistema

Hay que notar que la sección de código entre llaves es código C#, no código HTML, Webmatrix nos permite utilizar tanto C# como VB para realizar el código procedural de nuestras aplicaciones.

Para ver el resultado de nuestro código en el navegador debemos presionar en el panel de IIS, ejecutar. Obtendremos una página web dinámica como esta:

hola mundo webmatrix

Quizás te preguntes porque dinámica si no se ven movimientos en nuestro navegador. El dinámica al que nos referimos es que si recargas la página veras como la hora va cambiando. Es entonces esa porción de contenido la que se genera en el servidor de forma dinámica y es entregada como código estático en nuestro navegador.

Share and Enjoy:
  • Print
  • Digg
  • StumbleUpon
  • del.icio.us
  • Facebook
  • Yahoo! Buzz
  • Twitter
  • Google Bookmarks
  • Add to favorites
  • Live

23 Responses to “Nuestro primer proyecto Webmatrix”

  1. Spy2 20 noviembre 2011 at 12:03 am Permalink

    Excelente emplicación paso a paso.

    Solo falta que se explique algo de lo que significa RAZOR en Web Matrix.

  2. Ovidio Rafael 3 diciembre 2011 at 10:41 pm Permalink

    Muy clara la explicación. Gracias.

    También me gustaría tener información más detallada de Razor.

  3. judavi 5 diciembre 2011 at 5:31 pm Permalink

    Hola Rafael! Gracias por tu comentario, ahora bien, cuéntame que información quieres acerca de Razor… ¿Más acerca de Bases de Datos? ¿Más acerca de las vistas?

  4. Arturo 8 diciembre 2011 at 2:04 pm Permalink

    Excelente explicación pero como los compañeros que es RAZOR

  5. GTENORIO 9 diciembre 2011 at 5:50 pm Permalink

    Exelente bien explicado, me gustaria ver un ejenplo con base de datos

  6. CBetancourt 11 diciembre 2011 at 9:28 pm Permalink

    Excelente primer proyecto!! 😉
    Una pregunta, como hacemos para que aparezca primero la hora & despues la fecha??

  7. judavi 14 diciembre 2011 at 10:36 am Permalink

    Hola CBetancourt. Podrías hacerlo de la siguiente forma:

    @{
    string hola = DateTime.Now.Hour+”:”+DateTime.Now.Minute+” “+DateTime.Now.Day+”/”+DateTime.Now.Month+”/”+DateTime.Now.Year;
    }

    @hola;

    Nota la cantidad de veces que utilice DateTime.Now. Esto principalmente para que notes la variedad de métodos que posee y toda la información que puedes obtener.

  8. R.Garrido 1 febrero 2012 at 12:09 pm Permalink

    hola, soy estudiante de ing de sistemas…..
    menos mal que vi un curso de programacion html y javascript con el sena virtual hace como 1 mes, porque o sino no entenderia nada…..seguire con el curso de webmatrix aunque se ve algo complicado. Deberian anunciar en mva que es pre requisito saber algo de html y programacion, no creen?
    saludos desde bogotá, colombia.

  9. judavi 8 febrero 2012 at 10:35 am Permalink

    Hola R.Garrido,
    Tienes razón deberíamos especificar que es requisito indispensable saber un poco acerca de HTML y programación. Lo pasamos por alto. Aunque si bien no conoces mucho del tema Webmatrix es perfecto para empezar pues es una herramienta muy sencilla comparadas con todas las otras que podrías llegar a utilizar.
    Gracias por tu comentario y espero que hayas disfrutado y aprendido mucho con el mismo.

  10. Fernando 18 abril 2012 at 7:56 pm Permalink

    Muy bien explicado, gracias y saludos!!

  11. SEO 3 julio 2012 at 11:50 pm Permalink

    Hola Garrido.

    Creo que esta explicación no tiene nada de complicado, yo de ti, me cambiaría de universidad o de carrera jaja

  12. Angel 9 julio 2012 at 1:57 pm Permalink

    Hola al momento de ejecutar no sale en mi navegador lo que deberia salir, hic todo como esta aqui.. que me falto por hacer?

  13. Hugo 7 septiembre 2012 at 5:14 pm Permalink

    Hola, hice todo lo de ahí pero al ejecutar, simplemente la pagina de internet queda en blanco, espero que me puedan decir porque

  14. Hugo 7 septiembre 2012 at 5:18 pm Permalink

    al entrar al default.cshtml y poner lo mismo que puse en el nuevo archivo holamundo.cshtml si me cargo bien la pagina, espero alguien pueda aclararme porque no sirvió en el holamundo.cshtml

  15. Javier 27 diciembre 2012 at 3:21 pm Permalink

    me gustaria saber que va a pasar con ASP.NET MVC se integra o es otro mundo diferente Web Matrix

  16. Alejandro 7 marzo 2013 at 1:52 pm Permalink

    Tengo el mismo problema que menciona Hugo, al ejecutar la aplicación la página queda en blanco, pero si edito el dafault.cshtml con ese si genera el ejemplo; que falto hacer para que funcionará bien el ejemplo, gracias…

  17. Jose 2 abril 2013 at 8:00 pm Permalink

    Hola buenas tardes tengo el mismo problema que Hugo y Alejandro no sale nada con el ejemplo de holamundo.cshtml, espero puedan resolver este conflicto de favor se les agradece su tiempo dedicado.

  18. Park Ha-Yas 3 septiembre 2013 at 5:43 pm Permalink

    Explicación básica, pero buena. Saludos!

    P.S.: Juan David, debajo de tu nombre, tienes mal escrito “Engenieer”, se escribe “Engineer”. 😉

  19. david 23 diciembre 2013 at 10:36 am Permalink

    Hola Judavi,
    Muy clara tu explicación, sin embargo cuando clickeo en Ejecutar lo que obtengo es una pantalla vacía tanto en chrome como en Explorer.
    Trabajo con Windows 7.
    Veo que otros colegas han preguntado sobre esto mismo y sobre Razor, sin embargo no veo las respuestas.
    Gracias.
    David.

  20. Felix 5 enero 2014 at 11:10 am Permalink

    todos los que tienen el problema de que cuando le dan a ejecutar la pagina le sale en blanco…..cuando le dan a ejecutar les manda un link parecido a este http://localhost:63108/…. a ese link despues de la barra solo tienen que agregarle el nombre de su archivo en formato .cshtml y listo..quedaria asi http://localhost:63108/holamundo.cshtml y listo..espero que les haya ayudado

  21. hjaramillo5 15 enero 2014 at 10:49 am Permalink

    Tambien me paso el caso de que al darle ejecutar me aparecio el navegador en blanco, lo pude solucionar escribiendo en la barra de direcciones el nombre del archivo, claro despues de 1 dia de tirarle mente, les sugiero que en el texto del ejercicio se agregue este inconveniente que puede surgir. Gracias

  22. Sebas 24 agosto 2014 at 11:20 am Permalink

    El C# usado aca digamos que es un poco diferente al que usamos cuando programamos en visual studio o mas bien aca se utiliza de distinta manera?

  23. judavi 4 septiembre 2014 at 8:27 am Permalink

    Es el mismo C#


Vamos! Deja un comentario :)