Este tutorial ofrece una introducción a Microsoft Visual Web Developer. Guía al usuario a través de la creación de una página sencilla con Visual Web Developer y muestra las técnicas básicas para crear una nueva página, agregar controles y escribir código.
Las tareas ilustradas en este tutorial incluyen:
- Crear un sitio Web de sistema de archivos.
- Familiarizarse con Visual Web Developer.
- Crear una página ASP.NET de un solo archivo en Visual Web Developer.
- Agregar controles.
- Agregar controladores de eventos.
- Ejecutar páginas con Servidores Web en Visual Web Developer.
Requisitos previos
Para poder completar este tutorial, necesitará:
- Visual Web Developer
- El entorno .NET Framework
Crear un sitio y una página Web
En esta parte del tutorial creará un sitio Web y le agregará una nueva página. También agregará texto HTML y ejecutará la página en el explorador web.
En este tutorial, creará un sitio Web de sistema de archivos que no requiera trabajar con Microsoft Internet Information Services (IIS). En lugar de esto, creará y ejecutará la página en el sistema de archivos local.
Un sitio Web de sistema de archivos almacena páginas y otros archivos en una carpeta elegida por el usuario en alguna ubicación de su 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 a través de Internet utilizando 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.
En este tutorial, creará un sitio Web de sistema de archivos que no requiera trabajar con Microsoft Internet Information Services (IIS). En lugar de esto, creará y ejecutará la página en el sistema de archivos local.
Un sitio Web de sistema de archivos almacena páginas y otros archivos en una carpeta elegida por el usuario en alguna ubicación de su 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 a través de Internet utilizando 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.
Crear un sitio y una página Web
Para crear un sitio Web de sistema de archivos
1. Abra Visual Web Developer.
2. En el menú Archivo, haga clic en Nuevo sitio Web.
Aparecerá el cuadro de diálogo Nuevo sitio Web, como se muestra en la siguiente captura de pantalla.
Aparecerá el cuadro de diálogo Nuevo sitio Web, como se muestra en la siguiente captura de pantalla.
Cuadro de diálogo Nuevo sitio Web
3. En Plantillas instaladas de Visual Studio, haga clic en Sitio Web ASP.NET.
Cuando se crea un sitio Web, se especifica una plantilla. Cada plantilla crea una aplicación Web que contiene diferentes archivos y carpetas. En este tutorial, creará un sitio Web basado en la plantilla Sitio Web ASP.NET, que crea varias carpetas y algunos archivos predeterminados.
Cuando se crea un sitio Web, se especifica una plantilla. Cada plantilla crea una aplicación Web que contiene diferentes archivos y carpetas. En este tutorial, creará un sitio Web basado en la plantilla Sitio Web ASP.NET, que crea varias carpetas y algunos archivos predeterminados.
4. En el cuadro Ubicación, seleccione el cuadro Sistema de archivos y escriba el nombre de la carpeta en la que desea conservar las páginas del sitio Web.
Por ejemplo, escriba el nombre de carpeta C:\BasicWebSite.
Por ejemplo, escriba el nombre de carpeta C:\BasicWebSite.
5. En la lista Lenguaje, seleccione Visual Basic o Visual C#.
El lenguaje de programación que ha elegido será el lenguaje predeterminado del sitio Web.
Sin embargo, puede utilizar varios lenguajes en la misma aplicación Web mediante la creación de páginas y componentes en lenguajes de programación diferentes.
El lenguaje de programación que ha elegido será el lenguaje predeterminado del sitio Web.
Sin embargo, puede utilizar varios lenguajes en la misma aplicación Web mediante la creación de páginas y componentes en lenguajes de programación diferentes.
6. Haga clic en Aceptar.
Visual Web Developer crea la carpeta y una nueva página denominada Default.aspx.
Cuando se crea una nueva página, Visual Web Developer la muestra de manera predeterminada en la vista Código fuente, que permite ver los elementos HTML de la página. La captura de pantalla siguiente muestra la vista Código fuente de una página Web predeterminada.
Vista Código fuente de una página predeterminada
Visual Web Developer crea la carpeta y una nueva página denominada Default.aspx.
Cuando se crea una nueva página, Visual Web Developer la muestra de manera predeterminada en la vista Código fuente, que permite ver los elementos HTML de la página. La captura de pantalla siguiente muestra la vista Código fuente de una página Web predeterminada.
Vista Código fuente de una página predeterminada
Visita guiada por Visual Web Developer
Antes de seguir trabajando en la página, es conveniente que se familiarice con el entorno de desarrollo de Visual Web Developer. La ilustración siguiente muestra las ventanas y herramientas que están disponibles en Visual Web Developer.
Diagrama del entorno de Visual Web Developer
Para familiarizarse con el diseñador Web de Visual Web Developer
- 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. No todas las ventanas y
herramientas visibles se muestran aquí, 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.
- Ventana Propiedades. Permite cambiar la configuración de la página, los elementos HTML, los controles y otros objetos.
- 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 HTML de la página. 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.
- Cuadro de herramientas. Proporciona los controles y elementos HTML que se pueden arrastrar a la página. Los elementos del Cuadro de herramientas se agrupan por funcionamiento común.
- Explorador de servidores/Explorador de bases de datos. Muestra las conexiones a las bases de datos. Si el Explorador de servidores no está visible en Visual Web Developer, en el menú Ver, haga clic en Explorador de servidores o en Explorador de bases de datos.
Crear una nueva página de formularios Web Forms
Cuando se crea un nuevo sitio Web, Visual Web Developer agrega una página ASP.NET (página de formularios Web Forms) denominada Default.aspx. Puede utilizar la página Default.aspx como página principal del sitio Web. Sin embargo, en este tutorial, creará una nueva página y trabajará con ella.
Para agregar una página al sitio Web
1. Cierre la página Default.aspx. Para ello, haga clic con el botón secundario en la ficha que contiene el nombre de archivo y seleccione Cerrar.
2. En el Explorador de soluciones, haga clic con el botón secundario en el sitio Web, (por ejemplo, C:\BasicWebSite) y, a continuación, haga clic en Agregar nuevo elemento.
3. En Plantillas instaladas de Visual Studio, haga clic en Web Forms. La captura de pantalla siguiente muestra el cuadro de diálogo Agregar nuevo elemento.
Cuadro de diálogo Agregar nuevo elemento
4. En el cuadro Nombre, escriba FirstWebPage.
5. En la lista Lenguaje, elija el lenguaje de programación que prefiera utilizar (Visual Basic, C# o J#). Cuando creó el sitio Web, especificó un lenguaje predeterminado. Sin embargo, cada vez que se crea una página o un componente nuevo para el sitio Web, se puede utilizar un lenguaje diferente del predeterminado. Puede utilizar diferentes lenguajes de programación en el mismo sitio Web.
6. Desactive la casilla Colocar el código en un archivo independiente.
En este tutorial, creará una página de un solo archivo con el código y el texto HTML en la misma página. El código de las páginas ASP.NET se puede encontrar en la página o en un archivo de clase independiente
En este tutorial, creará una página de un solo archivo con el código y el texto HTML en la misma página. El código de las páginas ASP.NET se puede encontrar en la página o en un archivo de clase independiente
7. Haga clic en Agregar.
Visual Web Developer crea la nueva página y la abre en la vista Código fuente.
Visual Web Developer crea la nueva página y la abre 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
1. En la parte inferior de la ventana de documento, haga clic en la ficha Diseño para pasar a la vista Diseño.
La vista Diseño muestra la página en la que se está trabajando en modo WYSIWYG. En este punto, no hay texto ni controles en la página, por lo que ésta está en blanco.
La vista Diseño muestra la página en la que se está trabajando en modo WYSIWYG. En este punto, no hay texto ni controles en la página, por lo que ésta está en blanco.
2. En la página, escriba Welcome to Visual Web Developer.
La captura de pantalla siguiente muestra el texto que ha escrito en la vista Diseño.
La captura de pantalla siguiente muestra el texto que ha escrito en la vista Diseño.
Texto de bienvenida tal como se muestra en la vista Diseño
3. Cambie a la vista Código fuente.
Puede ver el código HTML que ha creado escribiendo en la vista Diseño, como se muestra en la captura de pantalla siguiente.
Puede ver el código HTML que ha creado escribiendo en la vista Diseño, como se muestra en la captura de pantalla siguiente.
Texto de bienvenida tal como se muestra en la vista Código fuente
Ejecutar la página
Antes de continuar agregando controles a la página, puede intentar ejecutarla. 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 en Visual Web Developer es el servidor de desarrollo de ASP.NET.
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 en Visual Web Developer es el servidor de desarrollo de ASP.NET.
Para ejecutar la página
1. Presione CTRL+F5 para ejecutar la página.
Visual Web Developer inicia el servidor de desarrollo de ASP.NET. En la barra de herramientas aparece un icono que indica que el servidor Web de Visual Web Developer está en ejecución, como se muestra en la captura de pantalla siguiente.
Visual Web Developer inicia el servidor de desarrollo de ASP.NET. En la barra de herramientas aparece un icono que indica que el servidor Web de Visual Web Developer está en ejecución, como se muestra en la captura de pantalla siguiente.
Icono de servidor Web de Visual Web DeveloperLa página se muestra en el explorador. Aunque la página creada tiene una extensión .aspx, se ejecuta como cualquier página HTML.
2. Cierre el explorador.
No hay comentarios.:
Publicar un comentario