Guía Básica: Visual Web Developer 2005 Express (Entrega 1)

Hola a todos, nuevamente! Esta es la primera entrega.

En esta entrega, veremos todo lo concierte a los primeros pasos para crear un Sitio Web, y como podemos agregar, eliminar y modificar las páginas de nuestro sitio, como se podrán imaginar estoy hablando de las aspx, pero también veremos como explotamos el HTML usando el VWD, Y al final también agregaremos código a nuestro WebForm.

Creando un Sitio Web

Ahora vamos a crear nuestro Sitio Web con VWD, esto es un proceso sencillo. Ahora con el VWD no es obligatorio crear un directorio virtual, para construir nuestras aplicaciones Web, ahora cualquier carpeta que contenga archivos aspx, podra ser considerado como un Sitio Web. VWD, no requiere tener un archivo especial de proyecto para mantener la lista de todas las páginas web que son parte del Sitio Web. Esto ahora hara más fácil el trabajo en equipo sobre un solo sitio Web, ya que el sitio no dependera de un archivo de proyecto que controle todo el sitio web.

1. Iniciar VWD, y Seleccionar en el menú File, New Web Site:

2. Nos aparecerá un dialogo, donde debemos escoger el lenguaje y donde deseamos almacenar nuestro sitio Web. En nuestro caso selecionaremos ASP.NET Web Site, y lo almacenaremos en el disco duro, con el boton Browse..., selecionamos la ruta, y le colocamos el nombre WebEntrega01.

Veamos rapidamente los archivos que el VWD, ha creado en nuestra carpeta seleccionanda:

Como podemos apreciar la página Default.aspx, ha sido agregada automáticamente. No hay ningun archivo especial de proyecto, solo los archivos que vemos son necesarios para ser un sitio web, virtualmente cualquier carpeta que contengo páginas aspx, puede ser un Sitio Web.

El archivo Default.aspx.cs, contiene el código que usara la página Default.aspx, también conocido como "Code-Behind". VWD, permite que tu trabajes tu código en un archivo separadado "Code-Behind", la otra opción es que manejes tu código dentro de tu mismo archivo aspx, "Inline". Se recomienda manejar el código en un archivo separado en producción de Web Sites.

Agregando una Página Web

Agregar un nueva página web, es algo mas simple. Una página web es parte de tu Sitio Web, si esta en la misma carpeta de tu Sitio Web.

1. Hay múltiples maneras de agregar archivos a tu Sitio Web, usando el menu WebSite, o desde la ventana Solution Explorer. Para agregar una nuevo WebForm, haremos click derecho en el nuestro Sitio Web, creado y agregaremos un nuevo item:

2. En el dialogo Add New Item, seleccionamos Web Form, y lo llamaremos Libros.aspx. Por defecto el lenguaje es C#, debido a que nuestro sitio web fue creado en C#, pero la novedad es que podemos agregar un webForm con código Vb, y no tendriamos ningun problema de compatibilidad, recuerden que ahora no manejamos archivos de proyectos. Marcamos el check de Place code in separate file, para agregar automáticamente el archivo code-beind, y damos click en Add.

La página Libros.aspx, será cargada y tu podras ver la vista source del archivo, para cambiar a la vista diseño puedes hacer click en la parte baja de la ventana de diseño:

VWD soporta IntellSense para todo, incuyendo las etiquetas HTML:

 

El intellSense en HTML, también es para la directiva Page, estilos de paginas, etc.

3. Pues ahora nos vamos a la vista diseño, y agregamos un titulo: "Libros", para esto escogemos el formato H1, en el toolbar. Despues cambiamos el formato, y agregamos el siguiente texto:

4. Bueno pues, ahora solo nos falta agregar un label (lblFechaHora), este control lo arrastramos desde el toolbox, y lo colocamos seguido de Fecha/Hora Actual: 

Si vamos a la vista Source, y vemos el HTML generado, nos daremos cuenta que se agrego un tag <asp:Label runat="server">, esta es la principal diferencia entre un control de servidor Web y un control HTML, adicionalmente podemos ver un atributo server, que lo que dice es que este control será manejado del lado de servidor, un control HTML, puede ser convertido a un control de servidor si le agregamos esta propiedad. Obiamente que los mejores controles son los controles de servidor web asp.net.

Agregando Event Handler a nuestro WebForm

Evento Handler, o manejador de evento, nos permitira darle vida a nuestra webForm, es decir que reaccione ante determinada acción del usurio, al hacer click o cambiar datos; o a la acción de la página misma, al cargar la página, al hacer un PostBack, etc.

Un WebForm, posee muchos tipos de eventos, que tu puedes manejar en tus code-behinds. Cada control tiene sus propios eventos. Cada vez que un webForm es cargado, por ejemplo, un evento Page Load es lanzado. Ahora nosotros agregaremos código en el evento Page Load, para actualizar la Fecha y Hora del label, que agregamos anteriormente, cada vez que la páginas sea cargada.

1. Para esto hacemos doble click, en la vista diseño del webForm, y automaticamente el VWD, nos llevara al Evento Page_Load, para el webForm Libros.aspx.
2. Ahora solo agregamos el siguente codigo a nuestro evento Page_Load, para poder mostrar la fecha y hora actual:

lblFechaHora.Text = DateTime.Now.ToString();

3. Ahora solo nos falta ejecutar nuestra aplicación Web. Ahora no tenemos que decirle al proyecto cual será nuestra página de inicio, por defecto ejecuta el webForm que tenga la pestaña activa. Nos aparecerá un mensaje para agregar un archivo Web.config, le decimos que si:

Como se habran dado cuenta, nos aparece un mesaje en la barra de tareas, del menu inicio, y esto es debido a que el VWD, correra con su propio servidor. Si todo lo hicimos bien, podremos visualizar el siguiente resultado:

Espero que todos hayan podido crear su sitio Web, muy fácil verdad?. Bueno con esto terminamos la primera entrega, recuerden si tiene sugerencias al mail, por favor comenten si esta muy básica la guía, o si esta bien el nivel de explicación, ya saben si estan apurados por las demás entregas, me lo hacen saber al mail, saludos, califiquen este artículo.

sergiotarrillo

---

Fichero con el código de ejemplo: sergiotarrillo_WebEntrega01.zip - Tamaño 2.45KB

---