DESARROLLO DE APLICACIONES WEB DEPARTAMENTO DE INFORMÁTICA ÁREA PROGRAMACIÓN CÁTEDRA PROGRAMACIÓN II AÑO 2009 PROF. OSCAR A.

Transcripción

1 Universidad Nacional del Nordeste Facultad de Ciencias Exactas y Naturales y Agrimensura DEPARTAMENTO DE INFORMÁTICA ÁREA PROGRAMACIÓN CÁTEDRA PROGRAMACIÓN II DESARROLLO DE APLICACIONES WEB AÑO 2009 PROF. OSCAR A. ZALAZAR

2 Los diferentes lenguajes de programación para la web Actualmente existen diferentes lenguajes de programación para desarrollar en la web, estos han ido surgiendo debido a las tendencias y necesidades de las plataformas. Desde los inicios de Internet, fueron surgiendo diferentes demandas por los usuarios y se dieron soluciones mediante lenguajes estáticos. A medida que paso el tiempo, las tecnologías fueron desarrollándose y surgieron nuevos problemas a dar solución. Esto dio lugar a desarrollar lenguajes de programación para la web dinámicos, que permitieran interactuar con los usuarios y utilizaran Bases de Datos. A continuación los lenguajes de programación para la web mas utilizados. Lenguaje HTML Desde el surgimiento de internet se han publicado sitios web gracias al lenguaje HTML. Es un lenguaje estático para el desarrollo de sitios web (acrónimo en inglés de HyperText Markup Language, en español Lenguaje de Marcas Hipertextuales). Desarrollado por el World Wide Web Consortium (W3C). Los archivos pueden tener las extensiones (htm o html). Sintaxis: <html> (Inicio del documento HTML) <head> ( Cabecera ) </head> <body>( Cuerpo ) </body> </html> <b> </b> Negrita <p> </p> Definir párrafo <etiqueta> Apertura de la etiqueta </etiqueta> Cierre de la etiqueta Ventajas: Sencillo que permite describir hipertexto. Texto presentado de forma estructurada y agradable. No necesita de grandes conocimientos cuando se cuenta con un editor de páginas web o WYSIWYG. Archivos pequeños. Despliegue rápido. Lenguaje de fácil aprendizaje. Lo admiten todos los exploradores. Desventajas: Lenguaje estático. La interpretación de cada navegador puede ser diferente. Guarda muchas etiquetas que pueden convertirse en basura y dificultan la corrección. El diseño es más lento. Las etiquetas son muy limitadas. Lenguaje Javascript Este es un lenguaje interpretado, no requiere compilación. Fue creado por Brendan Eich en la empresa Netscape Communications. Utilizado principalmente en páginas web. Es similar a Java, aunque no es un lenguaje orientado a objetos, el mismo no 2

3 dispone de herencias. La mayoría de los navegadores en sus últimas versiones interpretan código Javascript. El código Javascript puede ser integrado dentro de nuestras páginas web. Para evitar incompatibilidades el World Wide Web Consortium (W3C) diseño un estándar denominado DOM (en inglés Document Object Model, en su traducción al español Modelo de Objetos del Documento). Sintaxis: <script type="text/javascript">... </script> Ventajas: Lenguaje de scripting seguro y fiable. Los script tienen capacidades limitadas, por razones de seguridad. El código Javascript se ejecuta en el cliente. Desventajas: Código visible por cualquier usuario. El código debe descargarse completamente. Puede poner en riesgo la seguridad del sitio, con el actual problema llamado XSS (significa en inglés Cross Site Scripting renombrado a XSS por su similitud con las hojas de estilo CSS). Lenguaje PHP Es un lenguaje de programación utilizado para la creación de sitio web. PHP es un acrónimo recursivo que significa PHP Hypertext Pre-processor, (inicialmente se llamó Personal Home Page). Surgió en 1995, desarrollado por PHP Group. PHP es un lenguaje de script interpretado en el lado del servidor utilizado para la generación de páginas web dinámicas, embebidas en páginas HTML y ejecutadas en el servidor. PHP no necesita ser compilado para ejecutarse. Para su funcionamiento necesita tener instalado Apache o IIS con las librerías de PHP. La mayor parte de su sintaxis ha sido tomada de C, Java y Perl con algunas características específicas. Los archivos cuentan con la extensión (php). Sintaxis: La sintaxis utilizada para incorporar código PHP es la siguiente: <? $mensaje = Hola ; echo $mensaje;?> También puede usarse: <?php $mensaje = Hola ; echo $mensaje;?> Ventajas: Muy fácil de aprender. Se caracteriza por ser un lenguaje muy rápido. Soporta en cierta medida la orientación a objeto. Clases y herencia. Es un lenguaje multiplataforma: Linux, Windows, entre otros. Capacidad de conexión con la mayoría de los manejadores de base de datos: MysSQL, PostgreSQL, Oracle, MS SQL Server, entre otras. 3

4 Capacidad de expandir su potencial utilizando módulos. Posee documentación en su página oficial la cual incluye descripción y ejemplos de cada una de sus funciones. Es libre, por lo que se presenta como una alternativa de fácil acceso para todos. Incluye gran cantidad de funciones. No requiere definición de tipos de variables ni manejo detallado del bajo nivel. Desventajas: Se necesita instalar un servidor web. Todo el trabajo lo realiza el servidor y no delega al cliente. Por tanto puede ser más ineficiente a medida que las solicitudes aumenten de número. La legibilidad del código puede verse afectada al mezclar sentencias HTML y PHP. La programación orientada a objetos es aún muy deficiente para aplicaciones grandes. Dificulta la modularización. Dificulta la organización por capas de la aplicación. Seguridad: PHP es un poderoso lenguaje e intérprete, ya sea incluido como parte de un servidor web en forma de módulo o ejecutado como un binario CGI separado, es capaz de acceder a archivos, ejecutar comandos y abrir conexiones de red en el servidor. Estas propiedades hacen que cualquier cosa que sea ejecutada en un servidor web sea insegura por naturaleza. PHP está diseñado específicamente para ser un lenguaje más seguro para escribir programas CGI que Perl o C, y con la selección correcta de opciones de configuración en tiempos de compilación y ejecución, y siguiendo algunas prácticas correctas de programación. Lenguaje ASP Es una tecnología del lado de servidor desarrollada por Microsoft para el desarrollo de sitio web dinámicos. ASP significa en inglés (Active Server Pages), fue liberado por Microsoft en Las páginas web desarrolladas bajo este lenguaje es necesario tener instalado Internet Information Server (IIS). ASP no necesita ser compilado para ejecutarse. Existen varios lenguajes que se pueden utilizar para crear páginas ASP. El más utilizado es VBScript, nativo de Microsoft. ASP se puede hacer también en Perl and Jscript (no JavaScript). El código ASP puede ser insertado junto con el código HTML. Los archivos cuentan con la extensión (asp). Sintaxis: <% %> Ventajas: Usa Visual Basic Script, siendo fácil para los usuarios. Comunicación óptima con SQL Server. Soporta el lenguaje JScript (Javascript de Microsoft). Desventajas: Código desorganizado. 4

5 Se necesita escribir mucho código para realizar funciones sencillas. Tecnología propietaria. Hospedaje de sitios web costosos. Lenguaje ASP.NET Este es un lenguaje comercializado por Microsoft, y usado por programadores para desarrollar entre otras funciones, sitios web. ASP.NET es el sucesor de la tecnología ASP, fue lanzada al mercado mediante una estrategia de mercado denominada.net. El ASP.NET fue desarrollado para resolver las limitantes que brindaba tu antecesor ASP. Creado para desarrollar web sencillas o grandes aplicaciones. Para el desarrollo de ASP.NET se puede utilizar C#, VB.NET o J#. Los archivos cuentan con la extensión (aspx). Para su funcionamiento de las páginas se necesita tener instalado IIS con el Framework.Net. Microsoft Windows 2003 incluye este framework, solo se necesitará instalarlo en versiones anteriores. Ventajas: Completamente orientado a objetos. Controles de usuario y personalizados. División entre la capa de aplicación o diseño y el código. Facilita el mantenimiento de grandes aplicaciones. Incremento de velocidad de respuesta del servidor. Mayor velocidad. Mayor seguridad. Desventajas: Mayor consumo de recursos. Lenguaje JSP Es un lenguaje para la creación de sitios web dinámicos, acrónimo de Java Server Pages. Está orientado a desarrollar páginas web en Java. JSP es un lenguaje multiplataforma. Creado para ejecutarse del lado del servidor. JSP fue desarrollado por Sun Microsystems. Comparte ventajas similares a las de ASP.NET, desarrollado para la creación de aplicaciones web potentes. Posee un motor de páginas basado en los servlets de Java. Para su funcionamiento se necesita tener instalado un servidor Tomcat. Sintaxis: Características: Código separado de la lógica del programa. Las páginas son compiladas en la primera petición. Permite separar la parte dinámica de la estática en las páginas web. Los archivos se encuentran con la extensión (jsp). El código JSP puede ser incrustado en código HTML. Elementos de JSP Los elementos que pueden ser insertados en las páginas JSP son los siguientes: Código: se puede incrustar código Java. Directivas: permite controlar parámetros del servlet. 5

6 Acciones: permite alterar el flujo normal de ejecución de una página. Ventajas: Ejecución rápida del servlets. Crear páginas del lado del servidor. Multiplataforma. Código bien estructurado. Integridad con los módulos de Java. La parte dinámica está escrita en Java. Permite la utilización se servlets. Desventajas: Complejidad de aprendizaje. Lenguaje Python Es un lenguaje de programación creado en el año 1990 por Guido van Rossum, es el sucesor del lenguaje de programación ABC. Python es comparado habitualmente con Perl. Los usuarios lo consideran como un lenguaje más limpio para programar. Permite la creación de todo tipo de programas incluyendo los sitios web. Su código no necesita ser compilado, por lo que se llama que el código es interpretado. Es un lenguaje de programación multiparadigma, lo cual fuerza a que los programadores adopten por un estilo de programación particular: Programación orientada a objetos. Programación estructurada. Programación funcional. Programación orientada a aspectos. Sintaxis: Ejemplo de una clase en Phyton: def dibujar_muneco(opcion): if opcion == 1: C.create_line(580, 150, 580, 320, width=4, fill="blue") C.create_oval(510, 150, 560, 200, width=2, fill='peachpuff') Ventajas: Libre y fuente abierta. Lenguaje de propósito general. Gran cantidad de funciones y librerías. Sencillo y rápido de programar. Multiplataforma. Licencia de código abierto (Opensource). Orientado a Objetos. Portable. Desventajas: Lentitud por ser un lenguaje interpretado. 6

7 Lenguaje Ruby Es un lenguaje interpretado de muy alto nivel y orientado a objetos. Desarrollado en el 1993 por el programador japonés Yukihiro Matz Matsumoto. Su sintaxis está inspirada en Phyton, Perl. Es distribuido bajo licencia de software libre (Opensource). Ruby es un lenguaje dinámico para una programación orientada a objetos rápida y sencilla. Para los que deseen iniciarse en este lenguaje pueden encontrar un tutorial interactivo de ruby. Se encuentra también a disposición de estos usuarios un sitio con informaciones y cursos en español. Sintaxis: puts "hola" Características: Existe diferencia entre mayúsculas y minúsculas. Múltiples expresiones por líneas, separadas por punto y coma ;. Dispone de manejo de excepciones. Ruby puede cargar librerías de extensiones dinámicamente si el (Sistema Operativo) lo permite. Portátil. Ventajas: Permite desarrollar soluciones a bajo Costo. Software libre. Multiplataforma. 7

8 Introducción a Visual Studio Visual Studio es un conjunto completo de herramientas de desarrollo para la generación de: Aplicaciones web ASP.NET. Aplicaciones de escritorio. Aplicaciones móviles. Visual Basic, Visual C# utilizan todos el mismo entorno de desarrollo integrado (IDE), que habilita el uso compartido de herramientas y hace más sencilla la creación de soluciones en varios lenguajes, se pueden incorporar otros lenguajes al entorno de desarrollo. Asimismo, dichos lenguajes utilizan las funciones de.net Framework, las cuales ofrecen acceso a tecnologías clave para simplificar el desarrollo de aplicaciones web ASP. Entorno de desarrollo integrado La gama de productos de Visual Studio comparte un único entorno de desarrollo integrado (IDE) que se compone de varios elementos: el Menú, barra de herramientas Estándar, varias ventanas de herramientas que se acoplan u ocultan automáticamente a la izquierda, parte inferior y a la derecha, así como en el espacio del editor. Las ventanas de herramientas, menús y barras de herramientas disponibles dependen del tipo de proyecto o archivo en el que esté trabajando. IDE con la configuración de desarrollo general aplicada Dependiendo de la configuración aplicada y de las subsiguientes personalizaciones que haya realizado, variará la colocación de las ventanas de herramientas y de otros elementos en el IDE. Puede cambiar la configuración mediante el Asistente para importar y exportar configuraciones que se encuentra en el Menú Herramientas. 8

9 En esta figura tenemos el Menú, la barra de herramienta estándar, abajo a la izquierda el cuadro de herramientas, en el centro la página de inicio y después el explorador de soluciones. Explorador de soluciones El Explorador de soluciones proporciona una vista organizada de los proyectos y sus archivos, así como acceso rápido a los comandos relativos a ello. Las soluciones y los proyectos contienen elementos en forma de referencias, conexiones de datos, carpetas y archivos necesarios para crear la aplicación. Un contenedor de tipo solución puede contener varios proyectos y un contenedor de tipo proyecto normalmente contiene varios elementos. El Explorador de soluciones muestra soluciones, sus proyectos y los elementos incluidos en dichos proyectos. En el Explorador de soluciones, puede abrir archivos para editar, agregar nuevos archivos a un proyecto y ver las propiedades de las soluciones, proyectos y elementos. Explorador de soluciones Página de Inicio La Página de inicio proporciona una manera sencilla de crear o tener acceso a proyectos, obtener información acerca de próximas publicaciones de productos y conferencias o leer artículos recientes sobre programación. Para tener acceso a la Página de inicio, en el menú Ver, seleccione Otras ventanas y, a continuación, haga clic en Página de inicio. Editores y diseñadores En el IDE esta ubicado en el lugar de la página de inicio. El editor y los diseñadores que utilice dependerán del tipo de archivo o documento que esté creando. El Editor de texto es el procesador de textos básico del IDE, mientras que el Editor de código es el editor de código fuente básico. Otros editores, como el Editor CSS, el Diseñador HTML y el Diseñador de páginas Web, comparten muchas de las funciones del Editor de código, junto con mejoras específicas en el tipo de código o de marcado admitido. Los editores y diseñadores normalmente tienen dos vistas: una vista de diseño gráfica y la vista de código subyacente o vista de código fuente. La vista de diseño le permite especificar la ubicación de los controles y otros elementos en la interfaz de usuario o la página web. Puede arrastrar con facilidad un control desde el Cuadro de herramientas y colocarlo en la superficie de diseño. Diseñador de páginas Web, vista Diseño 9

10 En la parte de abajo se puede ver que esta seleccionado diseño, es el lugar donde colocamos los distintos controles, imágenes, etc. de nuestra página web, también podemos ver el código fuente asociado al diseño y si seleccionamos dividir vemos el diseño y el código. Cuadro de Herramientas El Cuadro de herramientas muestra los iconos de los elementos que puede agregar a los proyectos Visual Studio. El Cuadro de herramientas está disponible en el menú Ver. Puede acoplarlo y fijarlo como abierto o establecerlo en Ocultar automáticamente. Cada icono del Cuadro de herramientas se puede arrastrar y colocar en una superficie de vista de diseño; o bien, copiarse y pegarse en un editor de código dentro del entorno de desarrollo integrado (IDE) de Visual Studio. Cualquier acción agrega el código básico para crear una instancia del elemento del Cuadro de herramientas en el archivo del proyecto activo. Información sobre páginas Web ASP.NET Las páginas Web ASP.NET se utilizan como la interfaz de usuario de la aplicación Web. Este tipo de páginas presenta la información al usuario en cualquier explorador o dispositivo cliente e implementa lógica del sistema mediante el software que se encuentra en el servidor. Las páginas Web ASP.NET: Se basan en la tecnología Microsoft ASP.NET, en la que el código que se ejecuta en el servidor genera de forma dinámica salida de páginas Web en un explorador del cliente. Son compatibles con cualquier explorador o dispositivo móvil. Las páginas Web ASP.NET representan automáticamente el código HTML adecuado al explorador para funciones tales como estilos, diseño, etc. Como alternativa, se pueden diseñar las páginas Web ASP.NET para ejecutarse en un explorador determinado. Admiten cualquier lenguaje compatible con Common Language Runtime de.net, incluidos Microsoft Visual Basic, Microsoft Visual C#, Microsoft J# y Microsoft JScript.NET. Se crean en el entorno Microsoft.NET Framework. Esto proporciona todos los beneficios del marco de trabajo, incluidos un entorno administrado, seguridad de tipos y herencia. Son flexibles gracias a la posibilidad de incorporar a ellas controles creados por los usuarios y de otros fabricantes. Componentes de páginas Web ASP.NET En las páginas Web ASP.NET, la programación de la interfaz de usuario se divide en dos partes: el componente visual (diseño) y el lógico (código). 10

11 El elemento visual está compuesto por un archivo que contiene el marcado estático como HTML o controles ASP.NET o ambos. La página Web ASP.NET funciona como un contenedor del texto y los controles estáticos que se desea mostrar. La lógica de las páginas Web ASP.NET se compone del código creado para interactuar con la página. El código puede residir en un bloque de script en la página o en una clase independiente. Si el código está en un archivo de clase independiente, a este archivo se le conoce como archivo de código subyacente. El código del archivo de código subyacente se puede escribir en Visual Basic, Visual C#, Visual J# o JScript.NET. Las páginas Web ASP.NET se compilan en un archivo de biblioteca de vínculos dinámicos (.dll). La primera vez que un usuario examina la página.aspx con el explorador, ASP.NET genera automáticamente un archivo de clase.net que representa a la página y la compila. El archivo.dll se ejecuta en el servidor y genera dinámicamente la salida HTML para su página. Ventajas que aportan las páginas Web ASP.NET Implementación de una interfaz de usuario Web compleja Puede ser difícil y tedioso diseñar e implementar una interfaz de usuario utilizando las funciones básicas de HTML, especialmente si la página tiene un diseño complejo, un gran cantidad de contenido dinámico y objetos con muchas funciones y que requieren interacción con el usuario. Separación de cliente y servidor En una aplicación Web, el cliente (explorador) y el servidor son programas diferentes que a menudo se ejecutan en equipos distintos (e incluso en distintos sistemas operativos). Por lo tanto, las dos mitades de la aplicación comparten muy poca información; se pueden comunicar, pero normalmente intercambian sólo pequeñas porciones de información simple. Ejecución sin estado Cuando un servidor Web recibe una solicitud de una página, la busca, la procesa y la envía al explorador y, a continuación, descarta toda la información de dicha página. Si el usuario solicita la página de nuevo, el servidor repite la secuencia completa, volviendo a procesar la página desde el principio. En otras palabras, los servidores no tienen memoria de las páginas que han procesado, no tienen estado. Por consiguiente, si una aplicación necesita mantener información sobre una página, su naturaleza sin estado podría ser un problema. Funciones desconocidas del cliente En muchos casos, las aplicaciones Web resultan accesibles a muchos usuarios que usan exploradores diferentes Los exploradores ofrecen distintas funcionalidades, lo que hace muy difícil crear una aplicación que se ejecute con la misma calidad en todos ellos. Complicaciones con el acceso a datos La lectura de los datos de un origen de datos y la escritura en el mismo puede resultar complicada con las aplicaciones Web tradicionales y requerir la utilización de varios recursos. Complicaciones con la escalabilidad En muchos casos, las aplicaciones Web diseñadas con los métodos existentes no pueden cumplir los objetivos de escalabilidad debido a la falta de compatibilidad entre sus distintos componentes. Este es a menudo el origen común de los errores en aplicaciones sometidas a un ciclo de crecimiento intenso. Vencer estos retos de las aplicaciones Web puede requerir un tiempo y esfuerzo importantes. Las páginas Web ASP.NET y el marco de trabajo de páginas ASP.NET tratan de solucionar estos temas de los modos siguientes: Intuitivo, modelo de objeto coherente El marco de trabajo de páginas ASP.NET presenta un modelo de objetos que permite concebir los formularios como una unidad, no como partes de cliente y servidor independientes. En este modelo, se puede programar la página de un modo más intuitivo que en las aplicaciones Web tradicionales, ya que se incluye la capacidad de establecer las propiedades de los elementos de la página y de responder a los eventos. 11

12 Además, los controladores de servidor ASP.NET son una abstracción del contenido físico de una página HTML y de la interacción directa entre el explorador y el servidor. En general, se pueden usar los controles de servidor del mismo modo que se haría con los controles en una aplicación cliente, pero sin tener que preocuparse por crear el código HTML para presentar y procesar los controles y su contenido. Modelo de programación controlada por eventos Las páginas Web ASP.NET aportan a las aplicaciones Web un modelo familiar que permite diseñar controladores de eventos para aquellos eventos que se producen en el cliente o en el servidor. El marco de trabajo de las páginas ASP.NET tienen un mecanismo subyacente de captura de los eventos en el cliente, su transmisión al servidor y la llamada al método apropiado se realiza de modo automático e invisible para el usuario. El resultado es una estructura de código clara y escrita con facilidad, compatible con el desarrollo controlado por eventos. Aplicaciones independientes del explorador El marco de trabajo de páginas ASP.NET permite crear toda la lógica de la aplicación en el servidor, lo que elimina la necesidad de confeccionar explícitamente código para las diferencias de los diferentes exploradores. Sin embargo, todavía le permite aprovechar las funciones específicas de cada explorador al escribir código para la parte cliente con el fin de mejorar el rendimiento y de proporcionar una experiencia más enriquecedora en la parte cliente. Compatibilidad de Common Language Runtime de.net Framework El marco de trabajo de la página ASP.NET se genera sobre.net Framework, por lo que todo el marco de trabajo está disponible para cualquier aplicación ASP.NET. Sus aplicaciones se pueden escribir en cualquier lenguaje que sea compatible con el tiempo de ejecución. Además, el acceso a datos se ha simplificado mediante la infraestructura de acceso a datos que ofrece.net Framework, incluido ADO.NET. Rendimiento del servidor escalable de.net Framework El marco de trabajo de páginas ASP.NET permite escalar las aplicaciones Web de un equipo con un único procesador a una batería de servidores Web con varios equipos perfectamente y sin realizar cambios complicados en la lógica de la aplicación. Funcionamiento de las Páginas Web de ASP.NET El ciclo de procesamiento de una página Web de ASP.NET: 1. El usuario solicita la página. (La página se solicita utilizando un método GET de HTTP.) La página se ejecuta por primera vez, realizando el procesamiento preliminar si la ha programado para hacerlo. 2. La página se representa en el explorador dinámicamente y lo que el usuario ve es una página Web similar a cualquier otra. 3. El usuario escribe la información o la selecciona entre las opciones disponibles y, a continuación, hace clic en un botón. (Si los usuarios hacen clic en un vínculo en lugar de en un botón, la página podría simplemente navegar hasta otra página, sin que tenga lugar ningún procesamiento más en la primera página). 4. La página se manda al servidor Web. (El explorador ejecuta un método POST de HTTP, que en ASP.NET se denomina devolución de datos.) Específicamente, la página se devuelve datos a sí misma. Por ejemplo, si el usuario está trabajando con la página Default.aspx (web forms) y hace clic en un botón de la página, la devuelve al servidor con un destino de Default.aspx. 5. En el servidor Web, la página se ejecuta de nuevo. La información que el usuario escribió o seleccionó está disponible para la página. 6. La página realiza el procesamiento que tiene programado hacer. 7. La página se representa a sí misma en el explorador. Este ciclo continúa durante el tiempo que el usuario esté trabajando en la página. Cada vez que el usuario hace clic en un botón, la información de la página se 12

13 manda al servidor Web y la página se ejecuta de nuevo. Cada ciclo se conoce como acción de ida y vuelta. Dado que el procesamiento de páginas se realiza en el servidor Web, cada acción que la página puede hacer requiere un recorrido de ida y vuelta al servidor. Una página Web de ASP.NET puede ejecutar script de cliente, lo cual no requiere un recorrido de ida y vuelta al servidor y resulta útil para la validación de la entrada del usuario y para algunos tipos de programación de la interfaz de usuario. Crear Sitio y página web ASP.NET Las páginas Web ASP.NET proporcionan la interfaz de usuario para sus aplicaciones Web ASP.NET o también llamados sitios Web. Para el desarrollo de aplicaciones Web necesitamos el Visual Web Developer que esta incluido en el Visual Studio o se lo puede instalar también en forma independiente Para crear un sitio Web de sistema de archivos 1. Abra Visual Web Developer o el Visual Studio 2. En la Página de Inicio haga clic en Crear Sitio Web o 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. 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 caso crea los archivos: App_Data: Contiene los archivos de datos de la aplicación. web.config: Contiene la configuración del Sitio. Default.aspx: Página web vacia. Default.aspx.vb: Código de la página web en este caso en el lenguaje Visual Basic. 13

14 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. Especifica el tipo de aplicación Web que se desea crear o abrir. El tipo de ubicación que seleccione determinará el formato de la ubicación en el cuadro Ubicación. Los tipos de ubicación incluyen: Sistema de archivos Una aplicación Web en una carpeta del equipo local. Los archivos no están asociados a un servidor, una aplicación de Internet Information Services (IIS). HTTP Una aplicación Web de IIS en un equipo local o remoto. Los archivos se almacenan bajo la raíz de la aplicación Web. Si se crea una aplicación local mediante HTTP, IIS debe estar instalado en el equipo. Si se crea una aplicación IIS en un equipo remoto, el equipo debe configurarse con Extensiones de servidor de FrontPage de Microsoft, y es necesario tener permisos para crear carpetas y archivos en ese equipo. Ejemplo: o FTP Una aplicación Web a la que es posible conectarse utilizando las credenciales del Protocolo de transferencia de archivos (FTP). Deben proporcionarse credenciales para establecer conexión con el servidor FTP y tener permisos de lectura y escritura en la ubicación FTP. Ejemplo: ftp://servidorftp/miaplicaciónweb. 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. 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. 14

15 Crear una nueva página Web o 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. En este caso crearemos una nueva página. 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. 4. En el cuadro Nombre, escriba el nombre de la nueva página. 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. La casilla Colocar el código en un archivo independiente, si la desactivamos, 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 independiente. 7. Seleccionar la página principal, esta casilla se utiliza si creamos una Página Maestra o Principal para la aplicación, que nos permite tener partes de las páginas con el mismo diseño e información y una parte modificable dentro de cada página. 8. Haga clic en Agregar. Visual Web Developer crea la nueva página y la abre en la vista Código fuente. 15

16 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 está en blanco. 2. En la página, escribir un texto. 3. De la vista Diseño pasamos a Dividir. Puede ver el código HTML que ha creado escribiendo en la vista Diseño, como se muestra en la captura de pantalla siguiente. Ejecutar 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 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 o presione F5 para depurar y ejecutar o también en el Menú Depurar o la flecha verde de la barra de herramientas: 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: 16

17 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. 2. Cierre el explorador. Si el explorador genera 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 para solicitudes locales. Por ejemplo para el Explorer, en el menú Herramientas comando Opciones de Internet solapa Conexiones hacer clic sobre Configuración de Lan y si esta utilizando un servidor Proxy tildar la casilla no usar servidor Proxy para direcciones locales y aceptar. Agregar y programar controles En esta parte, se agrega a la página un control Button, otro TextBox y otro Label, y se escribe código para controlar el evento Click del control Button. Ahora agregará controles a la página. Los controles, entre los que se incluyen botones, etiquetas, cuadros de texto y otros controles familiares, proporcionan las funciones típicas de procesamiento de formularios para las páginas Web ASP.NET. Sin embargo, puede programar los controles con código que se ejecuta en el servidor, no el cliente. El control Button es un botón que se utiliza para ejecutar un comando o realizar una acción en el servidor, cuando el usuario hace click sobre el botón, se dispara el evento click y se realiza una acción mediante programación. El control TextBox es un cuadro de texto, es un control de entrada que permite al usuario ingresar texto. El control Label es una etiqueta, es para mostrar texto en una ubicación establecida de la página, a diferencia de texto estático se puede personalizar el texto que se muestra. Para agregar controles a la página 1. Haga clic en la ficha Diseño para cambiar a la vista Diseño. 2. Presione MAYÚS+ENTRAR varias veces para dejar espacio. 3. En el Cuadro de herramientas, en el grupo Estándar, arrastre tres controles a la página: un control TextBox, otro Button y otro Label. 4. Coloque el punto de inserción sobre el control TextBox y, a continuación, escriba Ingrese su Nombre:. Este texto HTML estático es el título del control TextBox. Puede mezclar HTML estático y controles en la misma página. La pantalla siguiente muestra cómo aparecen los tres controles en la vista Diseño. 17

18 Establecer las propiedades de los controles Visual Web Developer ofrece distintas maneras de establecer las propiedades de los controles de la página. En esta parte, establecerá propiedades en las vistas Diseño y Código fuente. Para establecer las propiedades de los controles 1. Seleccione el control Button y, a continuación, en la ventana Propiedades, establezca Text en Mostrar Nombre, se muestra como queda el control en la vista diseño en la captura de pantalla siguiente. 2. Cambie a la vista Código fuente. La vista Código fuente muestra el código HTML de la página, incluidos los elementos que Visual Web Developer ha creado para los controles. Los controles se declaran utilizando sintaxis de tipo HTML, con la excepción de que las etiquetas utilizan el prefijo asp: e incluyen el atributo runat="server". Las propiedades del control se declaran como atributos. Por ejemplo, cuando estableció la propiedad Text del control Button en el paso 1, en realidad estableció el atributo Text del marcado del control. Observe que todos los controles están dentro de un elemento <form>, que también tiene el atributo runat="server". El atributo runat="server" y el prefijo asp: de las etiquetas de los controles marcan los controles para que ASP.NET los procese en el servidor cuando se ejecuta la página. El código que se encuentra fuera de los elementos <form runat="server"> y <script runat="server"> se envía como marcado o código de cliente al explorador; este es el motivo por el que el código ASP.NET debe estar dentro de un elemento cuya etiqueta de apertura contiene el atributo runat="server". 18

19 3. Coloque el punto de inserción en un espacio dentro de la etiqueta <asp:label> y, a continuación, presione la BARRA ESPACIADORA. Aparece una lista desplegable que muestra las propiedades que se pueden establecer para un control Label. Esta característica, denominada IntelliSense, ayuda en la vista Código fuente con la sintaxis de los controles de servidor, los elementos HTML y otros elementos de la página. Puede mostrar una lista desplegable de IntelliSense en cualquier momento presionando Ctrl+J. La captura de pantalla siguiente muestra la lista desplegable de IntelliSense para el control Label. 4. Seleccione ForeColor y, a continuación, escriba un signo igual (=). IntelliSense muestra una lista de colores. 5. Seleccione un color para el texto del control Label. 19

20 El atributo ForeColor se completa con el color seleccionado, si el color muestra un subrayado verde indica un error, si colocamos el cursor sobre el color nos mostrará el error. Programar el control Button Escribiremos el código que lee el nombre especificado por el usuario en el cuadro de texto y lo muestra en el control Label. Para agregar un controlador de eventos de botón predeterminado 1. Cambie a la vista Diseño. 2. Haga doble clic en el control Button. Visual Web Developer cambia a la vista Código fuente y crea un esquema del controlador de eventos para el evento predeterminado del control Button, el evento Click. 3. Dentro del controlador, escriba lo siguiente: Label1. Visual Web Developer muestra una lista de miembros disponibles para el control Label, como se muestra en la captura de pantalla siguiente. 4. Complete el controlador de eventos Click para el botón de manera que tenga el aspecto mostrado en el ejemplo de código siguiente. 20