Tutorial: Crear un nuevo sitio web de ASP.NET
Actualización: noviembre 2007
Este tutorial ofrece una introducción a las características de desarrollo web de Microsoft Visual Web Developer Expressy Microsoft Visual Studio 2008. Le guiará por el proceso de creación de una página simple. Además, este tutorial presenta el diseñador visual WYSIWYG.
Entre las tareas ilustradas en este tutorial se incluyen las siguientes:
Crear un sitio web de sistema de archivos
Familiarizarse con Visual Web Developer.
Ejecutar las páginas mediante el servidor de desarrollo de ASP.NETServidores Web en Visual Web Developer
Requisitos previos
Para completar el tutorial, necesita lo siguiente:
- Microsoft Visual Studio 2008 o Microsoft Visual Web Developer Express. Para obtener información sobre descargas, visite el sitio web Visual Studio Development Center.
Crear un sitio y una página Web
En la primera parte del tutorial, creará un sitio web de ASP.NET con una página predeterminada. Este sitio web será un sitio web de sistema de archivos que no requiere Microsoft Internet Information Services (IIS). Esto permite crear y ejecutar la página desde el sistema de archivos local de su equipo.
Un sitio web de sistema de archivos almacena páginas y otros archivos en una carpeta seleccionada por el usuario en alguna ubicación del equipo local. Otras opciones de sitio web incluyen un sitio web de IIS local, que almacena los archivos en una subcarpeta de la raíz de IIS local (normalmente, \Inetpub\wwwroot\). Un sitio FTP almacena los archivos en un servidor remoto al que se tiene acceso mediante el Protocolo de transferencia de archivos (FTP). Un sitio remoto almacena los archivos en un servidor remoto al que se puede tener acceso a través de una red local. Para obtener más información, vea Tutorial: Editar sitios Web con FTP en Visual Web Developer.
.gif "Nota") Nota: |
|---|
También puede crear sitios web utilizando proyectos de aplicación web. Para obtener más información, vea Información general sobre proyectos de aplicaciones web. |
Para crear un sitio web de sistema de archivos
Abra Visual Web Developer.
En el menú Archivo, haga clic en Nuevo sitio Web.
Aparece el cuadro de diálogo Nuevo sitio Web, como se muestra en la siguiente ilustración.
.gif)
En Plantillas instaladas de Visual Studio, haga clic en Sitio Web ASP.NET.
En el cuadro Ubicación, seleccione la casilla Sistema de archivos y escriba el nombre de la carpeta donde desea guardar las páginas del sitio web.
Por ejemplo, escriba el nombre de carpeta C:\Tasks.
En la lista Lenguaje, haga clic en Visual Basic o Visual C# para seleccionar el lenguaje de programación que utilizará en todo el proyecto web
Nota:En este tutorial no escribirá ningún código de programación.
Haga clic en Aceptar.
Visual Web Developer crea la carpeta y una página nueva denominada Default.aspx. De forma predeterminada, cuando se crea una nueva página, Visual Web Developer muestra la página en la vista Código fuente, donde puede ver los elementos HTML de la página. La ilustración siguiente muestra una página web predeterminada en vista Código fuente.
.gif)
Visita guiada por Visual Web Developer
Antes de continuar, resultará útil familiarizarse con el entorno de desarrollo de Visual Web Developer. La ilustración siguiente muestra algunas de las ventanas y herramientas de Visual Web Developer.
Diagrama del entorno de Visual Web Developer
.gif)
Examine la ilustración anterior y relacione el texto con la lista siguiente, que describe las ventanas y herramientas que se utilizan con más frecuencia. (Aquí no se muestran todas las ventanas y herramientas disponibles, sólo las marcadas en la ilustración anterior.)
Barras de herramientas. Proporcionan los comandos que permiten dar formato al texto, buscar texto, etc. Algunas barras de herramientas sólo están disponibles cuando se trabaja en la vista Diseño.
Explorador de soluciones. Muestra los archivos y carpetas del sitio web.
Ventana Documento. Muestra los documentos en los que se está trabajando en ventanas con fichas. Puede pasar de un documento a otro haciendo clic en las fichas.
Fichas de vistas. Presentan distintas vistas del mismo documento. La vista Diseño es un área de edición prácticamente WYSIWYG. La vista Código fuente es el editor de la página que muestra el marcado. La vista en dos paneles muestra la vista Diseño y la vista Código fuente del documento. Trabajará con las vistas Diseño y Código fuente más adelante en este tutorial. Si prefiere abrir las páginas web en la vista Diseño, en el menú Herramientas haga clic en Opciones, seleccione el nodo Diseñador HTML y cambie la opción Iniciar páginas en.
Ventana Propiedades. Permite cambiar la configuración de la página, los elementos HTML, los controles y otros objetos.
Ventana Propiedades de CSS. Muestra los estilos CSS actuales cuando la vista Diseño está activa.
Ventanas Administrar estilos y Aplicar estilos. Ayudan a controlar los estilos CSS del sitio web.
Cuadro de herramientas. Proporciona los controles y elementos HTML que se pueden arrastrar a una página. Los elementos del Cuadro de herramientas se agrupan por funcionamiento común.
Explorador de bases de datos. Muestra las conexiones de las bases de datos. Si no ve la ventana Explorador de bases de datos en Visual Web Developer, en el menú Ver, haga clic en Otras ventanasy, a continuación, haga clic en Explorador de bases de datos.
Nota:La ventana Explorador de bases de datos de Visual Web Developer se denomina Explorador de servidores en la versión completa de Visual Studio.
Puede reorganizar, cambiar el tamaño y acoplar las ventanas para adaptarlas a sus preferencias. El menú Ver permite mostrar otras ventanas.
Para recorrer el entorno de desarrollo
En el menú Ver, haga clic en Barras de herramientas.
Se muestra un submenú de barras de herramientas disponibles. Las barras de herramientas que están seleccionadas actualmente aparecen con una casilla junto a ellas.
Desplácese hasta el final de la lista de barras de herramientas y haga clic en Personalizar.
Se muestra el cuadro de diálogo Personalizar.
Revise las barras de herramientas disponibles. Cuando termine, haga clic en Cerrar.
En el menú Ver, haga clic en el Explorador de soluciones.
Se mostrará la ventana Explorador de soluciones. De forma predeterminada, esta ventana se acopla en un lado del entorno de Visual Web Developer.
En el Explorador de soluciones, haga clic con el botón secundario del mouse en el elemento superior de la lista de sitios.
Se muestra un menú de acceso directo con las operaciones de sitio web más habituales.
Presione ESC para cerrar el menú de acceso directo.
En el Explorador de soluciones, haga clic con el botón secundario del mouse en el archivo Web.config y, a continuación, haga clic en Abrir para abrir el archivo en la ventana de documento.
Haga doble clic en la página Default.aspx para abrirla en la ventana de documento. Hacer doble clic en un archivo es una alternativa a utilizar el comando Abrir del menú de acceso directo.
Observe que el nombre de cada página abierta se muestra en una ficha en la parte superior de la ventana de documento.
En la parte inferior de la ventana de documento, haga clic en Dividir para mostrar vista Código fuente y la vista Diseño al mismo tiempo.
En el menú Ver, haga clic en Ventana Propiedades.
Se mostrará la ventana Propiedades.
Al seleccionar un objeto en la ventana de documento, la ventana Propiedades muestra las propiedades del objeto seleccionado.
En el panel de vista Código fuente, seleccione el elemento form y, a continuación, en la ventana Propiedades, examine las propiedades disponibles.
En el menú Ver, haga clic en Cuadro de herramientas.
Se mostrará la ventana Cuadro de herramientas.
En vista Diseño, en la ficha Estándar del Cuadro de herramientas, arrastre un control Button hacia el documento y colóquelo en el elemento div.
Observe que la vista Código fuente se actualiza con el marcado correspondiente.
En el menú Ver, haga clic en Explorador de bases de datos.
Se mostrará la ventana Explorador de bases de datos.
Nota:La ventana Explorador de bases de datos de Visual Web Developer se denomina Explorador de servidores en la versión completa de Visual Studio.
Haga clic con el botón secundario del mouse en Conexiones de datos para ver las opciones de bases de datos disponibles.
Crear una página web ASP.NET
Al crear un nuevo sitio web, Visual Web Developer agrega una página web ASP.NET (página de formularios Web Forms) denominada Default.aspx. Puede utilizar la página Default.aspx como página principal de su sitio web. Sin embargo, en este tutorial, creará una nueva página y trabajará con ella.
Para agregar una página al sitio Web
En la ventana de documento, haga clic con el botón secundario en la ficha de la página Default.aspx y, a continuación, haga clic en Cerrar.
Si se le pide que guarde los cambios, haga clic en No.
En el Explorador de soluciones, haga clic con el botón secundario en el sitio web, (por ejemplo, C:\Tasks) y, a continuación, haga clic en Agregar nuevo elemento.
Se abrirá el cuadro de diálogo Agregar nuevo elemento.
En Plantillas instaladas de Visual Studio, haga clic en Web Forms.
En el cuadro Nombre, escriba Home.aspx.
En la lista Lenguaje, seleccione el lenguaje de programación con el que desea trabajar (Visual Basic o C#).
Desactive la casilla Colocar el código en un archivo independiente.
La ilustración siguiente muestra el cuadro de diálogo Agregar nuevo elemento.
.gif)
Haga clic en Agregar.
Visual Web Developer crea la nueva página. De forma predeterminada, la página se muestra en la vista Código fuente.
Agregar HTML a la página
En esta parte del tutorial, agregará texto estático a la página.
Para agregar texto a la página
En la parte inferior de la ventana de documento, haga clic en la ficha Diseño para pasar a la vista Diseño.
En la página, escriba To-Do List.
Ejecutar la página
Antes de continuar, puede probar la página. Para ejecutar una página, necesita un servidor Web. En un sitio web de producción, se utiliza IIS como servidor web. Sin embargo, para probar una página puede utilizar el servidor de desarrollo de ASP.NET, que se ejecuta localmente y no requiere IIS. En los sitios web de sistema de archivos, el servidor web predeterminado de Visual Web Developer es el servidor de desarrollo de ASP.NET.
Para ejecutar la página
Presione CTRL+F5 para ejecutar la página.
Visual Web Developer inicia el servidor de desarrollo de ASP.NET. En la barra de herramientas de Windows aparece un icono que indica que el servidor web de Visual Web Developer se está ejecutando, como se muestra en la ilustración siguiente:
.gif)
La página se muestra en el explorador. Aunque la página creada tiene una extensión .aspx, se ejecuta como cualquier página HTML.
Nota:Si el explorador muestra un error 502 o un error que indica que la página no se puede mostrar, es posible que necesite configurar el explorador para que omita los servidores proxy en las solicitudes locales. Para obtener información detallada, vea Cómo: Omitir un servidor proxy para las solicitudes Web locales.
Cierre el explorador.
Pasos siguientes
Este tutorial ha mostrado las características básicas de Visual Web Developer.
Para mejorar el control de archivos, considere la posibilidad de almacenar los archivos de sitio web en un sistema de control de código fuente como Visual SourceSafe. Para obtener más información, vea Introducir control de código fuente.