UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLÓGICOS COORDINACION DE COMPUTACIÓN

Transcripción

1 CICLO: 02/2015 UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLÓGICOS COORDINACION DE COMPUTACIÓN GUIA DE LABORATORIO #7 Nombre de la Practica: Introducción al desarrollo de aplicaciones Web con ASP.NET Lugar de Ejecución: Centro de Computo Tiempo Estimado: 2 horas con 30 minutos Materia: I. OBJETIVOS En esta guía de práctica se pretende: 1. Conseguir que los estudiantes tengan un primer contacto con la programación de aplicaciones web del lado del servidor haciendo uso del marco de trabajo de ASP.NET y la forma de trabajo del mismo. 2. Desarrollar las habilidades mínimas necesarias para crear aplicaciones web haciendo uso de ASP.NET y el lenguaje de programación C# 3. Identificar las partes, tipos de archivos, extensiones y componentes de un proyecto basado en ASP.NET. 4. Lograr la capacidad de consolidar los conocimientos de materias anteriores orientadas al desarrollo web con C#. II. INTRODUCCIÓN TEÓRICA Qué es ASP.NET? ASP.NET es un framework para aplicaciones web desarrollado y comercializado por Microsoft. Es usado por programadores y diseñadores para construir sitios web dinámicos, aplicaciones web y servicios web XML. Apareció en enero de 2002 con la versión 1.0 del.net Framework, y es la tecnología sucesora de la tecnología Active Server Pages (ASP). ASP.NET está construido sobre el Common Language Runtime, permitiendo a los programadores escribir código ASP.NET usando cualquier lenguaje admitido por el.net Framework. ASP.NET es un modelo de desarrollo Web unificado que incluye los servicios necesarios para crear aplicaciones Web empresariales con el código mínimo. ASP.NET forma parte de.net Framework y al codificar las aplicaciones ASP.NET tiene acceso a las clases en.net Framework. El código de las aplicaciones puede escribirse en cualquier lenguaje compatible con el Common Language Runtime (CLR), entre ellos Microsoft Visual Basic, C#, JScript.NET y J#. Estos lenguajes

2 permiten desarrollar aplicaciones ASP.NET que se benefician del Common Language Runtime, seguridad de tipos, herencia, etc. ASP.NET incluye: Marco de trabajo de página y controles Compilador de ASP.NET Infraestructura de seguridad Funciones de administración de estado Configuración de la aplicación Supervisión de estado y características de rendimiento Capacidad de depuración Marco de trabajo de servicios Web XML Entorno de host extensible y administración del ciclo de vida de las aplicaciones Entorno de diseñador extensible Requisitos para el desarrollo en ASP.NET Un editor de código. NET Framework. Un servidor Web como IIS (Servicios de Internet Information Server). Adicionalmente a la programación web es necesario tener algún tipo de soporte para el almacenamiento de datos (SQL Server, Oracle, etc.). Arquitectura de ejecución de aplicaciones del lado del servidor con ASP.NET La forma tradicional de trabajar con las aplicaciones basadas en ASP es a través del modelo clienteservidor. En el modelo cliente-servidor: Un servidor es un equipo que produce datos Un cliente es un equipo que utiliza los datos Las aplicaciones Web utilizan el modelo clienteservidor Navegadores Web se ejecutan en los clientes y los datos de solicitud de servidores web Sitios web se hospedan en servidores web que producen los datos conforme a lo solicitado por los navegadores web

3 Pero, qué sucede cuando una página Web se muestra mediante un navegador Web? Un equipo local o remoto debe estar ejecutando un servidor Web, que para el caso de las aplicaciones basadas en ASP corresponde con el servidor IIS, que espera a las solicitudes de conexión del navegador cliente; esto ocurre en los siguientes pasos: El navegador del cliente se conecta al servidor web solicitando una URL. El servidor web traduce la URL en un archivo físico situado dentro del sistema de archivos del servidor y de la aplicación misma; envía el archivo solicitado, llamando una página Web de vuelta al navegador, procesando las secciones de código y generando la respectiva salida solicitada por el usuario (HTML, JSON, JavaScript, etc.). Al procesar las secciones de código, se procede a compilar las páginas ASPX y los archivos de código asociados para producir la respectiva salida HTML. El servidor rompe la conexión después de enviar la página Web al navegador cliente El navegador web del cliente interpreta HTML y hace una página Web Una devolución de datos se produce si el cliente solicita la página Web nuevamente ya sea por hacer clic en un control de botón o pulsando la tecla Enter. Tipos de WebSite Template incluidos en Visual Studio. Visual Studio incluye plantillas de proyecto que ayudan al programador a comenzar a crear un nuevo proyecto web. Es posible crear proyectos de aplicación web o proyectos de sitio web. Si se determina el tipo de proyecto más adecuado antes de comenzar, se puede ahorrar tiempo al crear, probar e implementar el proyecto web. En este punto, nos encontramos frente a una de las dos siguientes opciones: Las plantillas de proyecto de aplicación web se orientan a crear aplicaciones web que se compilan en un ensamblado y que proporcionan opciones enriquecidas para la implementación. Las plantillas de proyecto de sitio web se orientan a que el código fuente se compile dinámicamente ya sea una o más veces dependiendo del número de peticiones que se realicen al sitio web.

4 A continuación mostramos un cuadro que lista los tipos de plantilla orientadas a proyectos más comunes al momento de crear un nuevo proyecto en ASP.NET: Plantilla de proyecto Aplicación ASP.NET Web Aplicación web de ASP.NET MVC 2 Aplicación web vacía de ASP.NET Aplicación web vacía de ASP.NET MVC 2 Más información Utilice esta plantilla de proyecto para crear una aplicación web que incluya la siguiente funcionalidad: Una página maestra. Una hoja de estilos en cascada. Seguridad de inicio de sesión utilizando el sistema de pertenencia de ASP.NET. Scripting de Ajax mediante jquery. Navegación utilizando un control de menú. Nota: Puede decidir no utilizar ninguna de estas características si la aplicación no las requiere. De forma predeterminada, la plantilla de proyecto de aplicación web ASP.NET incluye los siguientes elementos: Carpetas que van a contener las páginas de pertenencia, los archivos de script de cliente y los archivos de hojas de estilos en cascada. Una carpeta de datos (App_Data), que tiene permisos concedidos para que ASP.NET pueda leer y escribir en ella en tiempo de ejecución. Una página maestra (archivo.master). Las páginas web denominadas Default.aspx y About.aspx. En la plantilla de proyecto, son las páginas de contenido de la página maestra predeterminada. Una clase de aplicación global (archivo Global.asax). Un archivo Web.config. Utilice esta plantilla de proyecto para crear aplicaciones web que utilicen un modelo de controlador de vista de modelos con la versión ASP.NET MVC 2. El modelo de MVC le ayuda a separar los diferentes aspectos de la aplicación (lógica de entrada, lógica comercial y lógica de la interfaz de usuario), proporcionando un acoplamiento flexible entre estos elementos. Además, esta plantilla de proyecto promueve el desarrollo controlado por pruebas (TDD). Esta plantilla crea una aplicación web ASP.NET que solamente incluye un archivo Web.config. Utilice esta plantilla de proyecto si no precisa la funcionalidad incorporada en la plantilla estándar (por ejemplo, páginas maestra, CSS y pertenencia opcional) y no está creando una aplicación de datos dinámicos ni una aplicación MVC. Esta plantilla crea una aplicación web de ASP.NET MVC 2 vacía que incluye carpetas para los controladores, modelos, vistas y scripts, un archivo Web.config en la raíz, un archivo Web.config en la carpeta Views, un archivo Site.css, un archivo Global.asax y archivos de script.

5 Plantilla de proyecto Aplicación web de entidades de datos dinámicos de ASP.NET Aplicación web de LINQ to SQL para datos dinámicos de ASP.NET Control de servidor ASP.NET AJAX Control de servidor ASP.NET Más información Utilice esta plantilla de proyecto para crear una aplicación web de datos dinámicos que utilice ADO.NET Entity Framework. Este tipo de aplicación web de datos dinámicos puede tener como destino cualquier base de datos relacional. Los datos dinámicos generan automáticamente una aplicación web funcional para ver y editar los datos, basada en el esquema de los datos. Utilice esta plantilla de proyecto para crear una aplicación web de datos dinámicos que use LINQ to SQL para obtener acceso a bases de datos SQL. Esta aplicación web puede tener como destino cualquier base de datos relacional. Utilice esta plantilla de proyecto para crear un control de servidor web para las páginas de formularios Web Forms ASP.NET que incorpore funcionalidad Ajax. El control se compone de código de cliente y servidor que trabaja combinado para generar un comportamiento de cliente enriquecido. Utilice esta plantilla de proyecto para crear un control de servidor web ASP.NET personalizado que se pueda utilizar en páginas de formularios Web Forms ASP.NET. A continuación mostramos un cuadro que lista los tipos de plantilla orientadas a sitios web más comunes al momento de crear un nuevo proyecto en ASP.NET: Plantilla de proyecto Sitio Web ASP.NET Más información Utilice esta plantilla de proyecto para crear un sitio web que incluya la siguiente funcionalidad: Una página maestra. Una hoja de estilos en cascada. Seguridad de inicio de sesión utilizando el sistema de pertenencia de ASP.NET. Scripting de Ajax mediante jquery. Navegación utilizando un control de menú. Nota: Puede decidir no utilizar ninguna de estas características si la aplicación no las requiere. De forma predeterminada, la plantilla de proyecto de sitio web ASP.NET incluye los siguientes elementos: Carpetas que van a contener las páginas de pertenencia, los archivos de script de cliente y los archivos de hojas de estilos en cascada. Una carpeta de datos (App_Data), que tiene permisos concedidos para que ASP.NET pueda leer y escribir en ella en tiempo de ejecución. Una página maestra (archivo.master).

6 Las páginas web denominadas Default.aspx y About.aspx. En la plantilla de proyecto, son las páginas de contenido de la página maestra predeterminada. Una clase de aplicación global (archivo Global.asax). Un archivo Web.config. Sitio web vacío de ASP.NET Sitio web de entidades de datos dinámicos de ASP.NET Esta plantilla crea un nuevo sitio web ASP.NET que solamente incluye un archivo Web.config. Utilice esta plantilla de proyecto si no precisa la funcionalidad incluida en la plantilla estándar (por ejemplo, páginas maestra, CSS y la pertenencia opcional) y no está creando un sitio web de datos dinámicos. Utilice esta plantilla de proyecto para crear un sitio web de datos dinámicos que utilice ADO.NET Entity Framework. Este tipo de aplicación web de datos dinámicos puede tener como destino cualquier base de datos relacional. Los datos dinámicos generan automáticamente una aplicación web funcional para ver y editar los datos, basada en el esquema de los datos. Sitio web de LINQ to SQL de datos dinámicos de ASP.NET WCF Service Sitio web de informes de ASP.NET Sitio Web ASP.NET Crystal Reports Utilice esta plantilla de proyecto para crear un sitio web de datos dinámicos que utilice LINQ to SQL para obtener acceso a bases de datos SQL. Este sitio web puede tener como destino cualquier base de datos relacional. Utilice esta plantilla de proyecto para crear un servicio de Windows Communication Foundation (WCF) que un sitio web, aplicación web, aplicación Silverlight, aplicación Ajax u otro cliente puede extender y al que puede llamar. Utilice esta plantilla de proyecto para crear un sitio web ASP.NET que contenga un informe (archivo.rdlc), una página ASP.NET predeterminada (archivo.aspx) que contenga un control ReportViewer, y un archivo Web.config. Utilice esta plantilla de proyecto para crear un sitio web ASP.NET que admita Crystal Reports. Extensiones y tipos de archivo para proyectos basados en ASP.NET Las aplicaciones de sitios Web pueden contener cierto número de tipos de archivos, algunos admitidos y administrados por ASP.NET, y otros admitidos y administrados por el servidor IIS. Dentro del tipo de extensiones permitidas por ASP.NET mencionamos las siguientes más importantes. Tipo de archivo.asax.ascx Ubicación Raíz de la aplicación. Raíz de la aplicación o un subdirectorio. Descripción Normalmente, un archivo Global.asax que contiene código que se deriva de la clase HttpApplication. Representa la aplicación y contiene métodos opcionales que se ejecutan al principio o al final de la duración de la aplicación. Archivo de control de usuario Web que define un control reutilizable y personalizado.

7 Tipo de archivo Ubicación Descripción.asmx.aspx.cd.compile.config.cs,.jsl,.vb.csproj,.vbproj, vjsproj.dll.licx,.webinfo.master.mdf Raíz de la aplicación o un subdirectorio. Raíz de la aplicación o un subdirectorio. Raíz de la aplicación o un subdirectorio. Subdirectorio Bin. Raíz de la aplicación o un subdirectorio. Subdirectorio App_Code o en el caso de un archivo de código subyacente para una página ASP.NET, en el mismo directorio que la página Web. Directorio del proyecto de Visual Studio. Subdirectorio Bin. Raíz de la aplicación o un subdirectorio. Raíz de la aplicación o subdirectorio. Subdirectorio App_Data. Archivo de servicios Web XML que contiene las clases y métodos que están disponibles para otras aplicaciones Web mediante SOAP. Archivo (página) de formularios Web Forms de ASP.NET que puede contener controles y presentación Web, y lógica empresarial. Un archivo de diagrama de clase. Archivo de código auxiliar precompilado que señala a un ensamblado que representa un archivo de sitio Web compilado. Los tipos de archivos ejecutables (.aspx, ascx,.master, archivos de tema) se precompilan y se colocan el subdirectorio Bin. Archivo de configuración (normalmente Web.config) que contiene elementos XML que representan la configuración de características de ASP.NET. Archivo de código fuente de clase que se compila en tiempo de ejecución. La clase puede ser un módulo HTTP, un controlador HTTP, un archivo de código subyacente para una página de ASP.NET o un archivo de clases independiente que contiene lógica de la aplicación. Un archivo de proyecto para un proyecto de aplicación de cliente de Visual Studio. Archivo de biblioteca de clases compilado (ensamblado). Tenga en cuenta que en lugar de colocar los ensamblados compilados en el subdirectorio Bin, puede colocar el código fuente de las clases en el subdirectorio App_Code. Un archivo de licencia. Las licencias permiten a los creadores de controles ayudar a proteger la propiedad intelectual; para ello, se comprueba si el usuario está autorizado a utilizar el control. Página principal que define el diseño de otras páginas Web de la aplicación. Archivo de base de datos SQL para su uso con SQL Server Express..resources,.resx Subdirectorio App_GlobalResources App_LocalResources. o Un archivo de recursos que contiene cadenas de recursos que hacen referencia a imágenes, texto localizable u otros datos..sitemap Raíz de la aplicación. Un archivo del mapa del sitio que contiene la estructura del sitio Web. ASP.NET viene con un proveedor del mapa del sitio predeterminado que utiliza archivos del mapa del sitio

8 Tipo de archivo Ubicación Descripción para mostrar fácilmente un control de exploración en una página Web..sln.soap Directorio del proyecto de Visual Web Developer. Raíz de la aplicación o un subdirectorio. Un archivo de solución para un proyecto de Visual Web Developer. Un archivo de extensión SOAP Estructura de un proyecto web basado en ASP.NET Bajo un proyecto o sitio web basado en ASP.NET se puede conservar los archivos del sitio en cualquier estructura de carpetas que desee para su aplicación. Para que sea más fácil trabajar con una aplicación, ASP.NET reserva ciertos nombres de archivos y carpetas que puede utilizar para tipos específicos de contenido y/o tareas de configuración. En ASP.NET se puede establecer páginas predeterminadas para la aplicación, lo que puede facilitar a los usuarios la exploración hasta el sitio web. La página predeterminada es la página que se sirve cuando los usuarios se desplazan al sitio web sin especificar una página determinada. Por ejemplo, puede crear una página denominada Default.aspx y guardarla en la carpeta raíz del sitio. Cuando los usuarios llegan al sitio web sin especificar una página determinada (por ejemplo, puede configurar su aplicación para que la página Default.aspx se solicite automáticamente. ASP.NET reconoce además ciertos nombres de carpeta que se pueden utilizar para determinados tipos de contenido. En la tabla siguiente se muestran los nombres de carpeta reservados y el tipo de archivos que suelen contener las carpetas. Carpeta App_Browsers Descripción Contiene definiciones del explorador (archivos.browser) que ASP.NET utiliza para identificar los exploradores individuales y determinar sus funciones. Contiene código fuente para clases de utilidad y objetos comerciales (por ejemplo, archivos.cs,.vb y.jsl) que debe compilar como parte de su aplicación. En una aplicación compilada de forma dinámica, ASP.NET compila el código en la carpeta App_Code en la solicitud inicial de su aplicación. Los elementos de esta carpeta se vuelven a compilar cuando se detecta cualquier cambio. App_Code App_Data Nota: Los tipos de archivo arbitrarios se pueden colocar en la carpeta App_Code para crear objetos con establecimiento inflexible de tipos. Por ejemplo, al colocar los archivos de servicio Web (archivos.wsdl y.xsd) en la carpeta App_Code se crean servidores proxy con establecimiento inflexible de tipos. En su aplicación se hace referencia automáticamente al código de la carpeta App_Code. Además, la carpeta App_Code puede contener subdirectorios de archivos que necesitan ser compilados en tiempo de ejecución. Contiene los archivos de datos de aplicación incluso los archivos MDF, archivos XML, así como otros archivos de almacén de datos. ASP.NET 2.0 utiliza la carpeta

9 App_Data para almacenar la base de datos local de una aplicación, que se puede utilizar para mantener información sobre suscripciones y funciones. App_GlobalResources App_LocalResources App_Themes App_WebReferences Bin Contiene recursos (archivos.resx y.resources) que se compilan en los ensamblados con ámbito global. Los recursos en la carpeta App_GlobalResources tienen un establecimiento inflexible de tipos y se puede obtener acceso a ellos mediante programación. Contiene recursos (archivos.resx y.resources) que están asociados con una página específica, control de usuario o página principal en una aplicación. Contiene una colección de archivos (archivos.skin y.css, así como archivos de imagen y recursos genéricos) que definen el aspecto de las páginas Web y controles ASP.NET. Contiene archivos de contrato de referencia (archivos.wsdl), esquemas (archivos.xsd) y archivos de documentos de descubrimiento (archivos.disco y.discomap) que definen una referencia Web para utilizarla en una aplicación. Contiene ensamblados compilados (archivos.dll) para los controles, componentes u otro código al que desea hacer referencia en su aplicación. En su aplicación se hace referencia automáticamente a cualquier clase representada por código de la carpeta Bin. El archivo especial Web.config Toda la información de configuración de ASP.NET reside en el elemento configuration de los archivos Web.config. La información de configuración incluida en este elemento se agrupa en dos áreas principales: el área de declaración del controlador de sección de configuración (sectiongroup) y el área de valores de la sección de configuración (pages). En el siguiente ejemplo de código se muestra el lugar que ocupan las secciones mencionadas anteriormente en un archivo Web.config. Observe que el elemento namespaces del elemento pages carece de una declaración de controlador de sección de configuración. El motivo es que el controlador de sección System.Web.Configuration.PagesSection controla todos los elementos secundarios de la sección de configuración pages. <?xml version="1.0" encoding="us-ascii"?> <configuration> <!-- Configuration section-handler declaration area. --> <configsections> <sectiongroup name="system.web" type="system.web.configuration.systemwebsectiongroup, Version= , Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a"> <section name="pages" System.Web,

10 type="system.web.configuration.pagessection, Version= , Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" /> <!-- Other <section /> elements. --> </sectiongroup> <!-- Other <sectiongroup /> and <section /> elements. --> </configsections> System.Web, <!-- Configuration section settings area. --> <pages buffer="true" enablesessionstate="true" asynctimeout="45" <!-- Other attributes. --> > <namespaces> <add namespace="system" /> <add namespace="system.collections" /> </namespaces> </pages> <!-- Other section settings elements. --> </configuration> Páginas de código embebido (in-line) y páginas con código de clase subyacente (Code-Behind) Un bloque de código incrustado o in-line es código del servidor que se ejecuta durante la fase de representación de la página. El código incluido en el bloque puede ejecutar instrucciones de programación y llamar a funciones de la clase de página actual. En el siguiente ejemplo se muestra una representación de código en línea: <%@ page language="c#" %> <script runat="server"> void Button1_Click(object sender, EventArgs e) Label1.Text = "Hello " + TextBox1.Text; </script>

11 <html> <head> </head> <body> </body> </html> <title>asp.net Inline Pages</title> <form id="form1" runat="server"> <h1>welcome to ASP.NET 2.0!</h1> <b>enter Your Name:</b> <asp:textbox ID="TextBox1" Runat="server"/> <asp:button ID="Button1" Text="Click Me" OnClick="Button1_Click" Runat="server"/> <br /> <br /> <asp:label ID="Label1" Text="Hello" Runat="server" /> </form> Como puede observar, tanto el código de programación como el marcado HTML de la estructura de la página se encuentran en un mismo archivo. Esto se indica mediante la primera línea de código (directiva page), en la que únicamente se le indica que el lenguaje de programación a utilizar es C#. La principal utilidad de este modelo es poder conservar la compatibilidad con versiones antiguas de ASP. No obstante, hoy en día no es muy recomendable seguir esta práctica. Por otra parte, manejar código detrás del modelo o code-behind nos permite organizar los eventos en forma separada, todo lo relacionado con interfaz de usuario lo manejamos en el archivo.aspx y el control de los eventos en un archivo separado.cs (para C Sharp). De forma similar a la que manejamos los archivos de JavaScript (.js) donde incluimos todas las funciones y luego las referenciamos en el aspx hacemos con el Code Behind. La forma de compilación y de ejecución de este tipo de modelo se presenta en la siguiente figura. A continuación se muestra un bloque de código bajo el modelo code-behind.

12 CodeBehind_cs.aspx page language="c#" CodeFile="CodeBehind_cs.aspx.cs" Inherits="CodeBehind_cs_aspx" %> <html> <head> <title>asp.net CodeBehind Pages</title> </head> <body> <form runat="server"> <h1>welcome to ASP.NET 2.0!</h1> <b>enter Your Name:</b> <asp:textbox ID="TextBox1" Runat="server"/> <asp:button ID="Button1" Text="Click Me" OnClick="Button1_Click" Runat="server"/> <br /> <br /> <asp:label ID="Label1" Text="Hello" Runat="server" /> </form> </body> </html> CodeBehind_cs.aspx.cs using System; public partial class CodeBehind_cs_aspx : System.Web.UI.Page protected void Button1_Click(object sender, EventArgs e) Label1.Text = "Hello " + TextBox1.Text; Como puede observar, ahora existen dos tipos de archivos, uno en el que se maneja el aspecto visual de la página y el otro donde se implementa la lógica de programación por separado. Esto es muy útil en aquellos equipos de desarrollo multidisciplinario en el que es necesario trabajar junto a diseñadores web y otros programadores. Además, se sabe que es code-behind ya que a diferencia del modelo de código en línea, la directiva page de la línea uno del archivo CodeBehind_cs.aspx muestra los siguientes componentes: <%@ page language="c#" CodeFile="CodeBehind_cs.aspx.cs" Inherits="CodeBehind_cs_aspx" %> Language= C# : este atributo le está indicando al compilador que el código estará escrito en lenguaje C Sharp. AutoEventWireup= true : indica si el código será inline o Behind. Al setearlo en true le estamos indicando que el código será detrás del modelo (CodeBehind) y se especifica el nombre del archivo donde buscará el código de eventos. CodeFile= CodeBehind_cs.aspx.cs : indica el nombre del archivo donde incluiremos el código de eventos.

13 Inherits= CodeBehind_cs_aspx : se especifica la clase a heredar, esta clase la busca dentro del archivo que indicamos en CodeFile. Formularios Web (WebForm) Las páginas de ASP.NET, conocidas oficialmente como "web forms" (formularios web), son el principal medio de construcción para el desarrollo de aplicaciones web. Los formularios web están contenidos en archivos con una extensión ASPX; en jerga de programación, estos archivos típicamente contienen etiquetas HTML o XHTML estático, y también etiquetas definiendo Controles Web que se procesan del lado del servidor y Controles de Usuario donde los desarrolladores colocan todo el código estático y dinámico requerido por la página web. Adicionalmente, el código dinámico que se ejecuta en el servidor puede ser colocado en una página dentro de un bloque <% -- código dinámico -- %> que es muy similar a otras tecnologías de desarrollo como PHP, JSP y ASP, pero esta práctica es, generalmente, desaconsejada excepto para propósitos de enlace de datos pues requiere más llamadas cuando se genera la página. Un formulario web: Utiliza una extensión de nombre de archivo de.aspx Contiene texto, etiquetas HTML y controles HTML También contiene los controles de servidor Web, tales como cuadros de texto, cuadros de lista y botones, también conocido como controles de servidor ASP.NET Similar a controles de Windows Forms Entorno de desarrollo para ASP.NET de Visual Studio Al crear un nuevo desarrollo de sitio web haciendo uso de Visual Studio, la parte visual tiende a cambiar un poco con relación a la mostrada en los desarrollos de programas desktop. En lo que respecta a la visualización de la pantalla para formularios, podemos distinguir las siguientes secciones:

14 Barra estándar: contiene las funciones de ejecución del proyecto así como también la posibilidad de seleccionar sobre que versión de HTML se procederá a realizar la compatibilidad 2. Cuadro de controles: contiene los diferentes tipos de controles que se pueden agregar a un WebForm 3. Vista de código de WebForm: contiene el marcado combinando elementos HTML junto con su correspondiente control ASP. No es el código de programación como tal, sino que es la traducción de lo que se presenta en la forma gráfica. 4. Vista de diseño: corresponde al área visual donde se permite arrastrar y colocar código de forma mucho más fácil. 5. Pestañas de selección con la cual se puede cambiar de modalidad con respecto a las diferentes vistas de presentación. 6. Explorador de soluciones 7. Cuadro de propiedades de cada control

15 III. MATERIALES Y EQUIPO Para la realización de la guía de práctica se requerirá lo siguiente: No. Requerimiento Cantidad 1 Guía de práctica #2: Introducción al desarrollo de aplicaciones Web con ASP.NET 1 2 Computadora con Visual Studio 2012 instalado 1 3 Memoria USB o disco flexible 1 IV. PROCEDIMIENTO Ejercicio #1 Ejercicio único que muestra una introducción a sitios web basados en ASP.NET. Se muestra una simulación de un cajero ATM on-line, donde el usuario realiza transacciones con el saldo de su cuenta posterior a una autenticación básica que se realiza en el sitio. 1. Proceda a ejecutar Visual Studio en su computadora. Una vez cargado el IDE, proceda a crear un nuevo sitio web. Para eso, seleccione del menú Archivo la opción Nuevo sitio web. Refiérase a la siguiente imagen. 2. Una vez realizado lo anterior, se abrira una ventana como la siguiente, donde deberá seleccionar el tipo de sitio web a desarrollar. En esta ocasión, seleccione el nodo de Visual C# a la izquierda de la pantalla. Luego seleccione Sitio web vacío de ASP.NET. Seleccione como ubicación web la opción Sistema de

16 archivos. Una vez realizado lo siguiente de clic en Aceptar. Refiérase a la siguiente imagen ilustrativa. 3. Con lo anterior habremos creado un nuevo sitio web con ASP.NET el cual contendrá únicamente un archivo Web.config en la raíz del sitio. Esto es así ya que nuestra plantilla corresponde a un sitio web vacío. Como podrá observar el entorno de desarrollo es similar al de la guía 1 relacionada a WindowsForm, ya que contiene las mismas secciones (cuadro de herramientas, explorador de soluciones, ventana de propiedades). Refiérase a la siguiente imagen.

17 4. Procederemos ahora a agregar un nuevo elemento WebForm o Formulario de WindowsForm, para ello en el menú Archivo seleccione la opción Nuevo Archivo. Se nos desplegará la siguiente ventana. Dentro de esta ventana seleccionamos la opción de Formulario Web Forms, y colocamos como nombre de archivo Default.aspx. Finalmente damos clic en el botón de Aceptar. 5. Al agregar la página a nuestro sitio podemos verificar que se nos abre el diseñador de páginas y una sección de marcado similar a HTML. De esta manera cualquier cambio que se realice en el diseñador, será reflejado en el marcado y viceversa. Observe además que estamos trabajando con código en archivo subyacente, lo que significa que tendremos un archivo que gestionará únicamente el código asociado a esa página. Verifique estos datos analizando los atributos de la directiva page de la línea 1.

18 6. El diseñador de página nos permite arrastrar y colocar elementos, sin embargo, a diferencia de una ventana, no podemos arrastrar libremente los controles (a menos que tenga posición absoluta). Esto lo debemos realizar con hojas de estilo CSS, por lo que procederemos a crear una nueva carpeta en la raíz del sitio, para ello de clic derecho sobre el nombre del proyecto en el cuadro del explorador de soluciones. Se le mostrará un menú contextual, del cual deberá seleccionar la opción Agregar y luego Nueva carpeta. Automáticamente se agregará una carpeta a la raíz y a la que deberemos colocar como nombre css. De forma similar agregue una nueva carpeta en la raíz llamada images. 7. Una vez creadas las carpetas procederemos a agregar los archivos siguientes proporcionados como recursos de la guía. Para ello, de clic derecho sobre la carpeta llamada css, luego seleccione Agregar y luego seleccione Agregar elemento existente. Ubique el archivo style.css y de clic en aceptar. Si todo ha ido de forma correcta podrá observar que se ha añadido un nuevo archivo a la carpeta. Realice un proceso similar para agregar las imágenes proporcionadas en los recursos de la guía. 8. Ahora, procederemos a digitar el marcado relacionado con la página inicial, para ello proceda a digitar el siguiente marcado en la vista de código del diseñador. Con esto construiremos el contenido de la página web que será visualizada por los usuarios. Tome en cuenta los controles que se han agregado para el ingreso del número de tarjeta y el pin asociado. Como puede ver, mediante atributos se establecen los valores de los controles. Otra forma de establecer dichos valores es haciendo uso de la ventana de propiedades por cada uno de los controles. Tenga especial cuidado a donde inicia y adonde termina cada línea de marcado. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html> <html xmlns=" <head runat="server"> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>transacciones Cajero ATM</title> <link href="css/style.css" rel="stylesheet" /> </head> <body> <form id="form1" runat="server"> <section id="wrap">

19 <section id="top"></section> <section id="content"> <header class="header"> <h1><a href="#">cajero ATM</a></h1> <h2>transacciones online</h2> </header> <article class="breadcrumbs"> </article> <a href="/">inicio</a> ATM online fácil <article class="middle"> <h2>bienvenido</h2> Innovando las transacciones en línea, ponemos a su disposición el cajero donde podrá realizar sus pagos y transferencias en línea de una forma rápida y siempre con la calidad y la confianza que nos caracterizan. Realice sus transacciones desde la comodidad de su hogar las 24 horas del día los 7 días de la semana. <div class="credenciales"> <div class="bloque"> <asp:label ID="lblTarjeta" CssClass="etiqueta" runat="server" Text="Tarjeta #:"></asp:label> <asp:textbox ID="txtTarjeta" CssClass="control" runat="server"></asp:textbox> "></asp:label> </div> <div class="clear"></div> <div class="bloque"> <asp:label ID="lblPin" CssClass="etiqueta" runat="server" Text="PIN: <asp:textbox ID="txtPin" CssClass="control" runat="server"></asp:textbox> </div> <div class="bloque"> <asp:button ID="btnEntrar" CssClass="submit" runat="server" Text="Ingresar" OnClick="btnEntrar_Click" />

20 </div> </div> <div class="clear"></div> <div class="bloque"> <asp:label ID="lblError" CssClass="error" runat="server" Text="" Visible="false"></asp:Label> </div> </article> <article class="right"> <img src="images/ jpg" class="bannerright" /> </article> <article id="clear"></article> </section> <section id="bottom"></section> </section> <section id="footer"><a href=" Don Bosco</a></section> </form> </body> </html>

21 9. Proceda a ejecutar la aplicación, para ello de clic en el botón de inicio de ejecución situado en la barra estándar en la parte superior de la ventana indicada por una flecha de color verde. Como podrá observar, usted puede seleccionar el navegador en el que desea correr la aplicación. Es una buena práctica probar nuestra aplicación en todos los navegadores posibles para garantizar su funcionamiento. En estos momentos, ASP.NET instanciará un servidor virtual de IIS alojado en [localhost:#puerto]/default.aspx que estará disponible en el momento de ejecución de nuestra aplicación. El número de puerto puede ser un valor que varíe de computadora a computadora. Si todo ha ido bien, deberá observar la siguiente pantalla. 10. Ahora, procederemos a la programación de la lógica de programación. Para ello, crearemos una clase que se encargará de realizar las gestiones correspondientes con los montos y los saldos. Procedemos a agregar un nuevo archivo desde el menú Archivo y luego en Nuevo archivo. En la ventana que se nos muestra ubicamos el archivo de tipo Clase, una vez encontrado procedemos a asignarle el nombre de transacción.cs y damos clic en el botón de aceptar. Una vez realizado esto, Visual Studio nos indica que este tipo de archivos, por su naturaleza global, es necesario colocarlo en la carpeta especial App_Code, por lo que damos clic en Si cuando se nos pregunte si deseamos crear dicha carpeta.

22 Proceda a digitar el siguiente código dentro del archivo creado: using System; using System.Collections.Generic; using System.Linq; using System.Web; /// <summary> /// Clase que se utiliza para gestionar las transacciones a realizar por /// el cajero ATM /// </summary> public class transaccion //Variables miembro de la clase de visibilidad privada private String snumerotarjeta;

23 private double fsaldo; //Constructor de clase que solo acepta un parametro de tipo String public transaccion(string tarjeta) snumerotarjeta = tarjeta; fsaldo = 500; //Constructor de clase que acepta dos parametros: String y double //Pueden haber tantos constructores como se necesiten, teniendo en //cuenta que deben tener algo diferente en sus definiciones public transaccion(string tarjeta, double saldo) snumerotarjeta = tarjeta; fsaldo = saldo; public double getsaldo() return fsaldo; public void setsaldo(double saldo) fsaldo = saldo; public String getnumtarjeta() return snumerotarjeta; public void setnumtarjeta(string tarjeta) snumerotarjeta = tarjeta;

24 public void transferencianacional(double monto) fsaldo = fsaldo - monto; public void transferenciainternacional(double monto) fsaldo = fsaldo - monto; 11. Una vez realizado lo anterior, estamos listos para escribir el código de las páginas. Ubíquese en el archivo Default.aspx y en la vista diseño proceda a dar doble clic al botón btnentrar. Una vez realizado esto, se le debe mostrar el archivo de código subyacente con el método btnentrar_click. Proceda a digitar el siguiente código. String snumerotarjeta = txttarjeta.text; String snumeropin = txtpin.text; usuario if (snumerotarjeta == "123456" && snumeropin == "654321") /* * Si las credenciales ingresadas son correctas, se procede a redirigir al * a la página del menu de opciones y se añade como parámetro de envio el numero de la tarjeta * asociada y el saldo. Cuál será el valor del saldo? */ transaccion nuevatransaccion = new transaccion(snumerotarjeta); Response.Redirect("Menu.aspx?sNumeroTarjeta=" + snumerotarjeta + "&Saldo=" + nuevatransaccion.getsaldo()); else //Si el numero de pin o de tarjeta no corresponde, entonces se procede a mostrar un mensaje de error lblerror.text = "Error en número de tarjeta o número de PIN. Verifique"; lblerror.visible = true;

25 12. El código anterior hace referencia a la página Menu.aspx. Procederemos entonces a crear la página tal y como lo hicimos en el punto número 4 de la guía. Una vez creada la página proceda a digitar el marco siguiente: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Menu.aspx.cs" Inherits="menu" %> <!DOCTYPE html> <html xmlns=" <head runat="server"> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>transacciones Cajero ATM</title> <link href="css/style.css" rel="stylesheet" /> </head> <body> <form id="form1" runat="server"> <section id="wrap"> <section id="top"></section> <section id="content"> <header class="header"> <h1><a href="#">cajero ATM</a></h1> <h2>transacciones online</h2> </header> <article class="breadcrumbs"> </article> <a href="/">inicio</a> ATM online fácil <article class="middle"> <h2>bienvenido</h2> Innovando las transacciones en línea, ponemos a su disposición el cajero donde podrá realizar sus pagos y transferencias en línea de una forma rápida y siempre con la calidad y la confianza que nos caracterizan. Realice sus transacciones desde la comodidad de su hogar las 24 horas del día los 7 días de la semana.

26 </article> <nav class="right"> <h2>opciones</h2> <ul> <li><asp:hyperlink ID="opcion1" runat="server">transferencias nacionales</asp:hyperlink></li> <li><asp:hyperlink ID="opcion2" runat="server">transferencias internacionales</asp:hyperlink></li> <li><asp:hyperlink ID="opcion3" runat="server">pagos de Servicios</asp:HyperLink></li> <li><asp:hyperlink ID="opcion4" runat="server">verificar saldo</asp:hyperlink></li> </nav> </section> </ul> <div id="clear"></div> <section id="bottom"></section> </section> <section id="footer"><a href=" Don Bosco</a></section> </form> </body> </html> 13. Ahora, en la vista diseño de la página Menu.aspx damos doble clic sobre algún espacio en blanco. Se nos mostrará el evento relacionado con la carga de la página. Procederemos a digitar el siguiente código. protected void Page_Load(object sender, EventArgs e) double Saldo = 0; String snumerotarjeta = Request.QueryString["sNumeroTarjeta"]; double.tryparse(request.querystring["saldo"], out Saldo); if (snumerotarjeta == "" snumerotarjeta == null) Response.Redirect("Default.aspx");

27 else opcion1.navigateurl = "Nacionales.aspx?sNumeroTarjeta=" + snumerotarjeta + "&Saldo=" + Saldo; opcion2.navigateurl = "Internacionales.aspx?sNumeroTarjeta=" + snumerotarjeta + "&Saldo=" + Saldo; + Saldo; opcion4.navigateurl = "Saldo.aspx?sNumeroTarjeta=" + snumerotarjeta + "&Saldo=" 14. Ahora, como puede observar es necesario crear las páginas restantes. Proceda a crear las páginas Nacionales.aspx, Internacionales.aspx y Saldo.aspx. A continuación mostramos el marcado y el código de C# para cada una de ellas. Nacionales.aspx <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Nacionales.aspx.cs" Inherits="Nacionales" %> <!DOCTYPE html> <html xmlns=" <head runat="server"> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>transacciones Cajero ATM</title> <link href="css/style.css" rel="stylesheet" /> </head> <body> <form id="form1" runat="server"> <section id="wrap"> <section id="top"></section> <section id="content"> <header class="header"> <h1><a href="#">cajero ATM</a></h1> <h2>transacciones online</h2> </header>

28 <article class="breadcrumbs"> </article> <a href="/">inicio</a> ATM online fácil <article class="middle"> <h2>bienvenido</h2> Innovando las transacciones en línea, ponemos a su disposición el cajero donde podrá realizar sus pagos y transferencias en línea de una forma rápida y siempre con la calidad y la confianza que nos caracterizan. Realice sus transacciones desde la comodidad de su hogar las 24 horas del día los 7 días de la semana. <div class="credenciales"> <div class="bloque"> <asp:hiddenfield ID="sNumTarjeta" runat="server" /> <asp:hiddenfield ID="dSaldo" runat="server" /> <asp:label ID="lblBanco" CssClass="etiqueta" runat="server" Text="Banco:"></asp:Label> </div> <asp:dropdownlist ID="drlBanco" runat="server" CssClass="control"> <asp:listitem>banco Agrícola</asp:ListItem> <asp:listitem>banco de América Central</asp:ListItem> <asp:listitem>hsbc</asp:listitem> <asp:listitem>citibank</asp:listitem> </asp:dropdownlist> <div class="clear"></div> <div class="bloque"> <asp:label ID="lblCantidad" CssClass="etiqueta" runat="server" Text="Cantidad: $"></asp:label> <asp:textbox ID="txtCantidad" CssClass="control" runat="server"></asp:textbox> </div> <div class="bloque"> <asp:button ID="btnEnviar" CssClass="submit" runat="server" Text="Procesar" OnClick="btnEnviar_Click" /> </div>

29 </div> <div class="clear"></div> <div class="bloque"> <asp:label ID="lblError" CssClass="error" runat="server" Text="" Visible="false"></asp:Label> </div> </article> <nav class="right"> <h2>opciones</h2> <ul> <li><asp:hyperlink ID="opcion1" runat="server">transferencias nacionales</asp:hyperlink></li> <li><asp:hyperlink ID="opcion2" runat="server">transferencias internacionales</asp:hyperlink></li> <li><asp:hyperlink ID="opcion3" runat="server">pagos de Servicios</asp:HyperLink></li> <li><asp:hyperlink ID="opcion4" runat="server">verificar saldo</asp:hyperlink></li> </nav> </section> </ul> <div id="clear"></div> <section id="bottom"></section> </section> <section id="footer"><a href=" Don Bosco</a></section> </form> </body> </html> Nacionales.aspx.cs using System; using System.Collections.Generic;

30 using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class Nacionales : System.Web.UI.Page protected void Page_Load(object sender, EventArgs e) sesión" cajero //Obtenemos el número de tarjeta y el saldo actual de las variables enviadas por URL //y realizamos su respectiva conversión al tipo de dato adecuado double Saldo = 0; String snumerotarjeta = Request.QueryString["sNumeroTarjeta"]; double.tryparse(request.querystring["saldo"], out Saldo); //Si el numero de tarjeta es nulo o vacio, entonces se redirige a un "inicio de if (snumerotarjeta == "" snumerotarjeta == null) else Response.Redirect("Default.aspx"); //Se establece el valor de cada uno de los campos ocultos relacionados con el snumtarjeta.value = snumerotarjeta; dsaldo.value = Saldo.ToString(); //Se formatean los enlaces de las opciones con los valores de snumerotarjeta y Saldo actuales opcion1.navigateurl = "Nacionales.aspx?sNumeroTarjeta=" + snumerotarjeta + "&Saldo=" + Saldo; opcion2.navigateurl = "Internacionales.aspx?sNumeroTarjeta=" + snumerotarjeta + "&Saldo=" + Saldo; + Saldo; opcion4.navigateurl = "Saldo.aspx?sNumeroTarjeta=" + snumerotarjeta + "&Saldo=" protected void btnenviar_click(object sender, EventArgs e) //Se obtienen los valores del número de tarjeta y del saldo de los campos ocultos double Saldo = 0, cantidad = 0;

31 String snumerotarjeta = snumtarjeta.value.tostring(); double.tryparse(dsaldo.value, out Saldo); //Se crea una instancia de la clase transacción y se le envían dos parámetros transaccion nuevatransaccion = new transaccion(snumerotarjeta, Saldo); //Obtenemos la selección del banco realizada por el usuario String banco = drlbanco.text; //Obtenemos el valor de cantidad ingresado por el usuario double.tryparse(txtcantidad.text, out cantidad); Saldo); if (cantidad > 0) nuevatransaccion.transferencianacional(cantidad); Saldo = nuevatransaccion.getsaldo(); Response.Redirect("Menu.aspx?sNumeroTarjeta=" + snumerotarjeta + "&Saldo=" + Internacionales.aspx <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Internacionales.aspx.cs" Inherits="Internacionales" %> <!DOCTYPE html> <html xmlns=" <head runat="server"> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>transacciones Cajero ATM</title> <link href="css/style.css" rel="stylesheet" /> </head> <body> <form id="form1" runat="server"> <section id="wrap">

32 <section id="top"></section> <section id="content"> <header class="header"> <h1><a href="#">cajero ATM</a></h1> <h2>transacciones online</h2> </header> <article class="breadcrumbs"> </article> <a href="/">inicio</a> online fácil <article class="middle"> <h2>bienvenido</h2> Innovando las transacciones en línea, ponemos a su disposición el cajero ATM donde podrá realizar sus pagos y transferencias en línea de una forma rápida y siempre con la calidad y la confianza que nos caracterizan. Realice sus transacciones desde la comodidad de su hogar las 24 horas del día los 7 días de la semana. <div class="credenciales"> <div class="bloque"> <asp:hiddenfield ID="sNumTarjeta" runat="server" /> <asp:hiddenfield ID="dSaldo" runat="server" /> <asp:label ID="lblPais" CssClass="etiqueta" runat="server" Text="Pais:"></asp:Label> </div> <asp:dropdownlist ID="drlBanco" runat="server" CssClass="control"> <asp:listitem>guatemala</asp:listitem> <asp:listitem>honduras</asp:listitem> <asp:listitem>nicaragua</asp:listitem> <asp:listitem>costa Rica</asp:ListItem> <asp:listitem>panamá</asp:listitem> </asp:dropdownlist> <div class="clear"></div>

33 <div class="bloque"> <asp:label ID="lblCantidad" CssClass="etiqueta" runat="server" Text="Cantidad: $"></asp:label> <asp:textbox ID="txtCantidad" CssClass="control" runat="server"></asp:textbox> </div> <div class="bloque"> <asp:button ID="btnEnviar" CssClass="submit" runat="server" Text="Procesar" OnClick="btnEnviar_Click" /> </div> </div> <div class="clear"></div> <div class="bloque"> <asp:label ID="lblError" CssClass="error" runat="server" Text="" Visible="false"></asp:Label> </div> </article> <nav class="right"> <h2>opciones</h2> <ul> <li><asp:hyperlink ID="opcion1" runat="server">transferencias nacionales</asp:hyperlink></li> <li><asp:hyperlink ID="opcion2" runat="server">transferencias internacionales</asp:hyperlink></li> <li><asp:hyperlink ID="opcion3" runat="server">pagos de Servicios</asp:HyperLink></li> <li><asp:hyperlink ID="opcion4" runat="server">verificar saldo</asp:hyperlink></li> </section> </nav> </section> </ul> <div id="clear"></div> <section id="bottom"></section> <section id="footer"><a href=" Don Bosco</a></section> </form>

34 </body> </html> Internacionales.aspx.cs using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class Internacionales : System.Web.UI.Page protected void Page_Load(object sender, EventArgs e) sesión" //Obtenemos el numero de tarjeta y el saldo actual de las variables enviadas por URL //y realizamos su respectiva conversion al tipo de dato adecuado double Saldo = 0; String snumerotarjeta = Request.QueryString["sNumeroTarjeta"]; double.tryparse(request.querystring["saldo"], out Saldo); //Si el numero de tarjeta es nulo o vacio, entonces se redirige a un "inicio de if (snumerotarjeta == "" snumerotarjeta == null) else Response.Redirect("Default.aspx"); //Se establece el valor de cada uno de los campos ocultos relacionados con el cajero snumtarjeta.value = snumerotarjeta; dsaldo.value = Saldo.ToString(); //Se formatean los enlaces de las opciones con los valores de snumerotarjeta y Saldo actuales opcion1.navigateurl = "Nacionales.aspx?sNumeroTarjeta=" + snumerotarjeta + "&Saldo=" + Saldo; opcion2.navigateurl = "Internacionales.aspx?sNumeroTarjeta=" + snumerotarjeta + "&Saldo=" + Saldo;

35 opcion4.navigateurl = "Saldo.aspx?sNumeroTarjeta=" + snumerotarjeta + "&Saldo=" + Saldo; protected void btnenviar_click(object sender, EventArgs e) //Se obtienen los valores del número de tarjeta y del saldo de los campos ocultos double Saldo = 0, cantidad = 0; String snumerotarjeta = snumtarjeta.value.tostring(); double.tryparse(dsaldo.value, out Saldo); //Se crea una instancia de la clase transaccion y se le envian dos parámetros transaccion nuevatransaccion = new transaccion(snumerotarjeta, Saldo); //Obtenemos la selección del banco realizada por el usuario String banco = drlbanco.text; //Obtenemos el valor de cantidad ingresado por el usuario double.tryparse(txtcantidad.text, out cantidad); if (cantidad > 0) nuevatransaccion.transferenciainternacional(cantidad); Saldo = nuevatransaccion.getsaldo(); Response.Redirect("Menu.aspx?sNumeroTarjeta=" + snumerotarjeta + "&Saldo=" + Saldo); Saldo.aspx <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Saldo.aspx.cs" Inherits="Saldo" %> <!DOCTYPE html> <html xmlns=" <head runat="server"> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>transacciones Cajero ATM</title>

36 <link href="css/style.css" rel="stylesheet" /> </head> <body> <form id="form1" runat="server"> <section id="wrap"> <section id="top"></section> <section id="content"> <header class="header"> <h1><a href="#">cajero ATM</a></h1> <h2>transacciones online</h2> </header> <article class="breadcrumbs"> </article> <a href="/">inicio</a> ATM online fácil <article class="middle"> <h2>bienvenido</h2> Innovando las transacciones en línea, ponemos a su disposición el cajero donde podrá realizar sus pagos y transferencias en línea de una forma rápida y siempre con la calidad y la confianza que nos caracterizan. Realice sus transacciones desde la comodidad de su hogar las 24 horas del día los 7 días de la semana. <div class="credenciales"> <div class="bloque"> <asp:label ID="lblMensaje" CssClass="error" runat="server" Text="" Visible="true"></asp:Label> </div> </div> <div class="clear"></div> </article> <nav class="right"> <h2>opciones</h2>