PROGRAMACIÓN WEB

APLICACIONES WEB ASP.NET (C#)

Aplicaciones Web.

Una aplicación Web es un software que se codifica en un lenguaje de programación

soportado por un navegador Web y cuya ejecución es llevada a cabo por el navegador en
Internet o en una intranet, en otras palabras, es una herramienta que los usuarios pueden
utilizar accediendo a un servidor web a través de internet o de una intranet mediante
un navegador.

¿Cómo funcionan las Aplicaciones web?

Las aplicaciones web son ejecutadas por medio de un navegador web en una red lo que
significa que los datos o los archivos en los se trabaja son procesados y almacenados dentro
de la una red a través de un navegador. Por este motivo, este tipo de aplicaciones por lo
general, no necesitan ser instaladas en un computador o un equipo móvil.
Una página Web puede contener elementos que permiten una comunicación activa entre el
usuario y la información, haciendo que éste acceda a los datos de forma interactiva, ya que
el sitio web se encargará de responder a cada una de las acciones que éste ejecute (por
ejemplo, acceder a gestores de bases de datos de todo tipo, publicar e interactuar con los
contenidos, rellenar y enviar formularios, participar en juegos, etc.
Las aplicaciones web están íntimamente relacionadas con el almacenamiento de datos en la
nube, ya que toda la información se guarda de forma permanente en servidores web, los
cuales además de alojar dicha información, la envían a dispositivos móviles o equipos
informáticos en cada momento que sea requerida, realizando copias temporales de estos
envíos dentro de los equipos y dispositivos que se utilicen.

¿Por qué son tan populares las aplicaciones web?

Las aplicaciones web son muy populares debido a:

 La practicidad que ofrecen los navegadores web como clientes ligeros. Un cliente ligero
(Thin Client) es un sistema que trabaja en una arquitectura de red cliente-servidor en la
cual existe muy poca o ninguna lógica del programa, por lo que depende principalmente
del servidor central para las tareas de procesamiento.
 La independencia del sistema operativo que se use en el computador o dispositivo móvil.
 La facilidad para actualizar y mantener aplicaciones web sin la necesidad de tener que
distribuir el software o que se tengan que instalar el mismo por los usuarios potenciales.
 El libre acceso de los usuarios en cualquier momento, lugar o dispositivo, sólo con tener
conexión a Internet y los datos de acceso (nombre usuario y contraseña).

Tipos de Aplicaciones Web que se pueden desarrollar.

Existen miles de páginas y aplicaciones web asociadas. A continuación, algunos ejemplos de

aplicaciones Web que se pueden llegar a desarrollar:
 Web mail: Sistemas de acceso al correo electrónico que permiten acceder a correos
mediante un navegador web, sin tener que descargar los propios correos en el computador.
Para ello utilizan clientes del tipo Gmail, Outlook, etc.
 Wikis: Sitios y aplicaciones web cuyas páginas y contenidos pueden ser editados
directamente desde el navegador, donde los usuarios crean, modifican o eliminan
contenidos que, generalmente comparten.
 Weblogs: Sitios y aplicaciones web cuyas páginas y contenidos son de fácil actualización,
que permite a sus autores publicar contenidos (textos, imágenes y otros archivos) con
aparentar un solo botón, ya que suelen contar con un editor y herramientas para tal efecto
en la propia web.
 Tiendas Online: Tipos de comercio que usan como medio principal para realizar suyos
transacciones un sitio web y/o una aplicación conectada a internet desde la que los
usuarios y clientes pueden realizar sus compras.

Ventajas de las aplicaciones web.

Las ventajas más importantes que tiene el desarrollo de una Aplicación Web son las
siguientes:

 Ahorro de tiempo: Son aplicaciones sencillas de gestionar, por lo que permiten realizar
tareas de forma fácil sin necesidad de descargar ni instalar ningún programa o plugin
adicional.
 Completa compatibilidad: Son totalmente compatibles con navegadores para poder
utilizarlas. Sólo se suele requerir que el navegador web esté debidamente actualizado para
poder usar este tipo de Aplicaciones.
 Actualización continua e inmediata: Debido a que es el propio desarrollador de
aplicaciones Web el que gestiona y controla el software, la versión que descarguen,
instalen y utilicen los usuarios, siempre será la última que haya lanzado dicho
desarrollador.
 Recuperación de datos: Una de las mayores ventajas de una aplicación Web es que, en la
mayoría de ocasiones el usuario puede recuperar su información desde cualquier
dispositivo y lugar con su nombre de usuario y contraseña.
 Ahorro de recursos en equipos y dispositivos: Las aplicaciones Web, generalmente tiene
un bajo consumo de recursos dado que toda (o gran parte) de la aplicación se encuentra
en un servidor web y no en el computador personal.
 Compatibilidad con múltiples plataformas: se pueden usar desde cualquier dispositivo
móvil u equipo informático, ya que son válidas para cualquier sistema operativo ya que
sólo es necesario que cuente con un navegador web.
 Portabilidad: Las aplicaciones Web son compatibles con todas las plataformas
(independiente del computador, equipo informático o dispositivo móvil donde se utilice)
ya que con tener acceso a internet se puede acceder a las mismas (como si de una página
web se tratase).
 Virus inexistentes: Los virus no afectan a los datos guardados en el servidor de la
aplicación, ya que cuentan con potentes sistemas de seguridad informáticos y garantías
ante este tipo de situaciones.
 Mayor funcionalidad: El hecho de que el acceso a la aplicación Web se realice desde una
única ubicación (un servidor web de una Intranet en las oficinas de una empresa), permite
 realizar de forma sencilla acciones colaborativas entre los usuarios como por ejemplo la
compartición de datos entre ellos.

Tipos de Desarrollo Aplicaciones Web.

Las aplicaciones Web se pueden clasificar en función de cómo se presenta el contenido

dentro de la aplicación. Se distinguen 5 tipos generales de aplicaciones web:

1. Aplicaciones web estáticas: este tipo de web muestran muy poca información y no suelen
variar mucho (aunque pueden mostrar en alguna parte objetos en movimiento, como por
ejemplo (banners, GIF animados, vídeos, etc.). Por regla general suelen estar
desarrolladas en lenguaje HTML y CSS. Por ejemplo, Portfolios de profesionales o un
currículo digital, Páginas de presentación de empresa para mostrar sus datos de contacto,
etc.

2. Aplicaciones web dinámicas: Una aplicación web dinámica es mucho más compleja de
crear y desarrollar a nivel técnico que una aplicación web estática, ya que utilizan bases
de datos para cargar la información para que los contenidos de la Web se vayan cargando
y actualizando cada vez que el usuario accede a la misma. Este tipo de aplicación web es
muy utilizada en páginas de contenidos como: Blogs personales, Blogs corporativos,
Blogs profesionales, Páginas de noticias y artículos sobre actualidad o medios de
comunicación masivos como periódicos y revistas digitales, etc…
Las Aplicaciones web dinámicas cuentan por lo general con un panel de administración
(llamado CMS (Content Management System) – gestor de contenidos) desde dónde los
administradores pueden corregir, modificar y cambiar los contenidos, ya sean textos o
imágenes. Ejemplos:
 WordPress: Es el gestor de contenidos más conocido y es gratuito. Existe
muchísima información en Internet sobre este gestor de contenidos como
tutoriales y guías para aprender su uso, las funciones y opciones que presentar,
cómo personalizarlo, etc.
 Joomla: Es el gestor de contenidos más conocido después de WordPress. Es
una plataforma con un uso muy intuitivo que cuenta con una gran cantidad de
usuarios en su comunidad y grandes prestaciones.
 Drupal: Se trata de un gestor de contenidos de software libre, el cual hace
que sea muy adaptable. Es especialmente recomendable para generar
comunidades y foros.
Se pueden utilizar la mayoría de lenguajes para desarrollar aplicaciones web dinámicas.,
pero lo más usados y comunes son los lenguajes PHP y ASP, puesto que permiten una
buena estructuración y diseño del contenido de la App.

3. Portales para Aplicaciones Web: es un sitio o página web para dispositivos móviles, es
decir, es muy similar a un sitio web normal, pero diseñado para las pantallas de este tipo
de dispositivos que son más pequeñas, de tal forma que los contenidos (como imágenes,
videos, etc.) se optimizan para ajustarse a estos requisitos. Esto facilita la navegación y
lectura a través de dispositivos móviles ya que de lo contrario un sitio Web normal sería
muy incómodo de visitar y visualizar.
4. Tienda online para aplicaciones Web: El desarrollo es similar al de un sitio web orientado
al e-commerce. Es decir, una aplicación Web basada en una tienda online, o también
denominada M-Commerce o comercio móvil (del anglicismo Mobile Commerce) ya que
lleva todas las transacciones a nivel de poder ser ejecutadas desde cualquier dispositivo
móvil. El desarrollo de una tienda online App Web es más complicado que el de una App
Web estática o una App Web Dinámica, porque debe contar con una pasarela de pagos
electrónicos a través de tarjeta de crédito, PayPal, u otro método de pago, además de tirar
de bases de datos. Este tipo de Aplicaciones también cuenta con un CMS o panel de
gestión que el desarrollador App también deberá crear, desde el cual, se pueden subir los
productos, actualizarlos o eliminarlos, gestionar los pedidos y pagos, etc. Ejemplos:
Carrefour, Nike, éxito, etc.

5. Aplicaciones web animadas: permite presentar los contenidos de la aplicación Web con
efectos animados de todo tipo y diseños muy creativos y modernos. Se utiliza tecnología
Flash para las animaciones.

Crear aplicaciones Web.

Para crear aplicaciones Web se necesita el siguiente software:

• Un Servidor Web.
• Un servidor de aplicaciones que se ejecute en el servidor Web.

Nota: En el contexto de las aplicaciones Web, los términos servidor Web y servidor de
aplicaciones se refieren a software y no a hardware.

Si desea utilizar una base de datos con la aplicación, se necesita además el siguiente software:
• Un sistema de bases de datos
• Un controlador de base de datos compatible con la base de datos.

Servidores Web.

Para desarrollar y comprobar páginas Web dinámicas, necesitará un servidor Web en

funcionamiento. Un servidor Web es un software que suministra páginas Web en respuesta
a las peticiones de los navegadores Web. En ocasiones, también se hace referencia a un
servidor Web como servidor HTTP. Esencialmente un servidor Web es un programa que
escucha en un puerto a la espera de conexiones. Tanto la petición como la respuesta se
encapsulan siguiendo el protocolo HTTP (Protocolo que permite a los componentes web
(cliente, servidores, etc.) comunicarse de una forma estándar y bien definida.).
Figura 1. Servidor Web.

Servidores de aplicaciones.

Los servidores de aplicación típicamente incluyen también middleware (o software de

conectividad) que les permite intercomunicarse con variados servicios, para efectos de
confiabilidad, seguridad, etc.
Los servidores de aplicación también brindan a los desarrolladores una Interfaz para
Programación de Aplicaciones (API), de tal manera que no tengan que preocuparse por el
sistema operativo. Los servidores de aplicación también brindan soporte a una gran variedad
de estándares, tales como HTML, XML, IIOP, JDBC, SSL, etc., que les permiten su
funcionamiento en ambientes Web (como Internet).
Los principios fundamentales de un servidor de aplicaciones son:
• La alta disponibilidad: hace referencia a que un sistema debe estar funcionando las
24 horas del día los 365 días al año.
• La escalabilidad: es la capacidad de hacer crecer un sistema cuando se incrementa
la carga de trabajo (el número de peticiones). Cada máquina tiene una capacidad finita
de recursos y por lo tanto sólo puede servir un número limitado de peticiones.
• El mantenimiento: tiene que ver con la versatilidad a la hora de actualizar, depurar
fallos y mantener un sistema. La solución al mantenimiento
•
Elección de una base de datos.

Las bases de datos pueden tener muchos formatos distintos según la cantidad y la
complejidad de los datos que almacenan. Al elegir una base de datos, deberá tener en cuenta
diversos factores, entre ellos, el presupuesto y el número de usuarios que espera que accedan
a la base de datos. En el caso de sitios que requieran un mayor grado de flexibilidad en el
modelado de los datos y capacidad para dar soporte a grandes comunidades de usuarios
simultáneos, considere la posibilidad de utilizar bases de datos relacionales basadas en
servidor (denominadas generalmente RDBMS.
Arquitectura Web.

La Arquitectura Web, es el arte de planear, diseñar y construir espacios Web, donde se debe
tener en cuenta:
• Las secciones y páginas web que debe tener el sitio.
• La página principal o de inicio.
• Distribuir el contenido a presentar entre las distintas secciones y páginas.
• Concretar las distintas vías de acceso a cada una de páginas web del sitio (es
importante ofrecer múltiples maneras de acceder a la misma información).
• Especificar el número de idiomas que dispondrá el sitio web.

Dentro de la arquitectura Web, también es importante definir:

• Diseño de la interfaz de usuario de la aplicación web: se refiere al diseño de la propia

web, tanto su aspecto visual (colores, imágenes, tipografía empleada,
posicionamiento de los distintos bloques de contenido dentro de las distintas páginas,
etc.), como de la estructuración de los contenidos en diversas secciones y apartados
enlazables a través de un menú con las distintas opciones disponibles.
• Diseño e implementación de la lógica de la aplicación: es el conjunto de
funcionalidades que ofrecerá ésta, como el procesamiento de los datos digitados por
el usuario, el cálculo de resultados a partir de distintos datos de entrada, el diseño y
ejecución de algoritmos, la manipulación de la información almacenada en una
base de datos, la ejecución de diversas acciones como consecuencia del cumplimiento
de diversas condiciones o del disparo de algún evento, etc. Es decir, planear y diseñar
lo que luego se llevará a cabo mediante el uso de uno o varios lenguajes de
programación.
• Diseño de la arquitectura de la información: determinar la información del mundo
real que tendrá que tratar una aplicación, diseñar un modelo conceptual que sea un
fiel reflejo de dicho mundo real con sus distintas entidades y relaciones, determinar
el modelo de datos que mejor se adapte a dicho modelo conceptual, implementar ese
modelo de datos sobre un motor de bases de datos.

Lenguajes de programación para aplicaciones Web

• Del lado del cliente: los lenguajes de programación del lado cliente se usan
para su integración en páginas web. Un código escrito en un lenguaje de script
se incorpora directamente dentro de un código HTML y se ejecuta
interpretado, no compilado. Para incorporar un fragmento de código script en
una página HTML se introduce el script entre las etiquetas <SCRIPT> y
</SCRIPT>. Dos son los lenguajes de script que hay en la
actualidad: VBScript (derivado de Visual Basic) y el JavaScript (derivado de
Java).
• Del lado del servidor: los Lenguajes de programación del lado del servidor
son especialmente útiles en trabajos donde se tiene que acceder a información
centralizada, situada en una base de datos en el servidor. Es importante
destacar que los lenguajes de programación del lado del servidor son
necesarios porque para hacer la mayoría de las aplicaciones Web se debe tener
 acceso a muchos recursos externos al computador del cliente, principalmente
bases de datos alojadas en servidores de Internet.
Las ventajas de este tipo de programación son que el cliente no puede ver los
scripts, ya que se ejecutan y transforman en HTML antes de enviarlos.
Además, son independientes del navegador del usuario, ya que el código que
reciben es HTML fácilmente interpretable.
Como desventajas se puede señalar que será necesario un servidor más
potente y con más capacidades que el necesario para las páginas de cliente.
Además, estos servidores podrán soportar menos usuarios concurrentes,
porque se requerirá más tiempo de procesamiento para cada uno.
Para escribir páginas dinámicas de servidor existen varios lenguajes: Perl,
Active Server Pages (ASP), Java Server Pages (JSP), Hypertext Preprocesor
(Php).

Arquitectura .NET.

La arquitectura .NET de Microsoft es un entorno integrado de ejecución, compilación,

depuración y desarrollo de aplicaciones. Los diferentes lenguajes de programación de la
plataforma comparten el mismo entorno, normas, reglas y librerías de Microsoft .NET
Framework. La plataforma .NET proporciona software que permite conectar sistemas,
información, dispositivos y usuarios distintos de un modo más unificado y personalizado.
Incorpora servicios Web XML como medio para permitir la interoperabilidad entre
tecnologías diferentes. También proporciona a los desarrolladores de software las
herramientas y la tecnología para crear rápida y eficazmente soluciones de negocio que
abarcan múltiples aplicaciones y múltiples dispositivos cliente entre diversas organizaciones,
además permite a los usuarios controlar qué información, cómo y cuándo se les entrega. Sus
componentes de trabajo son:

 El conjunto de lenguajes de programación: además del Visual Basic, la plataforma

.NET puede trabajar los lenguajes de programación C++, C#, J# entre otros.
 La biblioteca de clases base o BCL: maneja las operaciones básicas involucradas en
el desarrollo de aplicaciones, algunas operaciones son: interacción con dispositivos
periféricos, manejo de datos, administración de memoria, administración de
componentes Web, herramientas gráficas, operaciones matemáticas, generación de
código, etc. La BCL se clasifica en: .NET, Windows Forms, ASP.NET, ADO.NET.
 El entorno común para ejecución de lenguajes o CLR (Common Language Runtime)
es el entorno de ejecución en donde se cargan las aplicaciones desarrolladas en los
diferentes lenguajes. Esta herramienta compila el código fuente de los lenguajes
soportados por .NET en un código intermedio (Microsoft Intermediate Language
MSIL o CIL1). Para generarlo, el compilador se basa en la especificación CLS
(Common Language Specification) que determina las reglas necesarias para crear el
código MSIL compatible con el CLR. Además, para ejecutarse necesita un

1
Lenguaje ensamblador orientado a objetos y está basado en pilas.
 compilador JIT2 (Just-In-Time) el cual genera el código máquina3 real que se ejecuta
en la plataforma del cliente. De esta forma se consigue con .NET independencia de
la plataforma de hardware.

.NET Framework

El .NET Framework es un conjunto de servicios de programación diseñados para simplificar

el desarrollo de aplicaciones sobre el entorno distribuido de Internet. El diseño de .NET
Framework está enfocado a cumplir los objetivos siguientes:

 Proporcionar un entorno coherente de programación orientada a objetos, en el que el

código de los objetos se pueda almacenar y ejecutar en forma local pero distribuida
en Internet o ejecutar en forma remota.
 Proporcionar un entorno de ejecución de código que reduzca lo máximo posible la
implementación de software y los conflictos de versiones.
 Ofrecer un entorno de ejecución de código que fomente la ejecución segura del
mismo, incluso del creado por terceras personas desconocidas o que no son de plena
confianza.
 Proporcionar un entorno de ejecución de código que elimine los problemas de
rendimiento de los entornos en los que se utilizan secuencias de comandos o
intérpretes de comandos.
 Ofrecer al programador una experiencia coherente entre tipos de aplicaciones muy
diferentes, como las basadas en Windows o en el Web.

.NET Framework contiene dos componentes principales: Common Language Runtime y

la biblioteca de clases de .NET Framework. Common Language Runtime es el fundamento
de .NET Framework. El motor en tiempo de ejecución se puede considerar como un agente
que administra el código en tiempo de ejecución y proporciona servicios centrales, como la
administración de memoria, la administración de subprocesos y la interacción remota, al
tiempo que aplica una seguridad estricta a los tipos y otras formas de especificación del
código que fomentan su seguridad y solidez. De hecho, el concepto de administración de
código es un principio básico del motor en tiempo de ejecución. El código destinado al motor
en tiempo de ejecución se denomina código administrado, a diferencia del resto de código,
que se conoce como código no administrado. La biblioteca de clases, el otro componente
principal de .NET Framework, es una completa colección orientada a objetos de tipos
reutilizables que se pueden emplear para desarrollar aplicaciones que abarcan desde las
tradicionales herramientas de interfaz gráfica de usuario (GUI) o de línea de comandos hasta

2
Técnica para mejorar el rendimiento de sistemas de programación que compilan a bytecode, consistente en
traducir el bytecode a código máquina nativo en tiempo de ejecución.
3
Sistema de códigos directamente interpretable por un circuito microprogramable, como el microprocesador
de un computador o el microcontrolador de un autómata (un PLC). Este lenguaje está compuesto por un
conjunto de instrucciones que determinan acciones a ser tomadas por la máquina.
las aplicaciones basadas en las innovaciones más recientes proporcionadas por ASP.NET,
como los formularios Web Forms y los servicios Web XML.

En la ilustración siguiente se muestra la relación de Common Language Runtime y la

biblioteca de clases con las aplicaciones y el sistema en su conjunto.

Figura 2. .NET FrameWork.

ASP.NET (Active Server Pages).

ASP.NET es un entorno de programación que se ejecuta en un servidor Web para generar y

administrar páginas Web. ASP.NET es un marco de trabajo de programación generado en
Common Language Runtime que puede utilizarse en un servidor para generar eficientes y
eficaces aplicaciones Web. ASP.NET, ofrece varias ventajas importantes, como son:
 Mejor rendimiento. ASP.NET aprovecha las ventajas del enlace anticipado, la
compilación just-in-time, la optimización nativa y los servicios de caché desde el
primer momento.
 Compatibilidad con herramientas de primer nivel. El marco de trabajo de
ASP.NET se complementa con un diseñador y una caja de herramientas muy
completos en el entorno integrado de programación (Integrated Development
Environment, IDE) de Visual Studio.
 Eficacia y flexibilidad. La biblioteca de clases de .NET Framework, la mensajería y
las soluciones de acceso a datos se encuentran accesibles desde el Web de manera
uniforme. ASP.NET es también independiente del lenguaje, por lo que puede elegir
el lenguaje que mejor se adapte a la aplicación o dividir la aplicación en varios
lenguajes.
 Simplicidad. El marco de trabajo de las páginas de ASP.NET permite generar
interfaces de usuario, que separan claramente la lógica de aplicación del código de
 presentación y controlar eventos en un sencillo modelo de procesamiento de
formularios de tipo Visual Basic.
 Facilidad de uso. ASP.NET emplea un sistema de configuración jerárquico, basado
en texto, que simplifica la aplicación de la configuración al entorno de servidor y las
aplicaciones Web. Una aplicación ASP.NET Framework se implementa en un
servidor sencillamente mediante la copia de los archivos necesarios al servidor.
 Escalabilidad y disponibilidad. El motor de tiempo de ejecución de ASP.NET
controla y administra los procesos de cerca, por lo que si uno no se comporta
adecuadamente (filtraciones, bloqueos), se puede crear un proceso nuevo en su lugar,
lo que ayuda a mantener la aplicación disponible constantemente para controlar
solicitudes.
 Posibilidad de personalización y extensibilidad. ASP.NET presenta una
arquitectura bien diseñada que permite a los programadores insertar su código en el
nivel adecuado.
 Seguridad. Con la autenticación de Windows integrada y la configuración por
aplicación, se puede tener la completa seguridad de que las aplicaciones seguras.

El componente fundamental de ASP.NET es el formulario Web Form. Un formulario Web

Form es la página Web que los usuarios visualizan en un navegador. Una aplicación Web
ASP.NET consta de uno o más formularios Web Form. Un Web Form es una página dinámica
que puede acceder a recursos del servidor.

Por ejemplo, una página Web tradicional puede ejecutar scripts en el cliente para realizar
tareas básicas. En cambio, un formulario Web Form ASP.NET también puede ejecutar
código en el lado servidor para acceder a una base de datos, generar formularios Web Forms
adicionales, o aprovechar la seguridad incorporada en el servidor. Además, como un
formulario Web Form ASP.NET no depende de utilizar scripts en el cliente, no depende del
tipo de navegador del cliente o del sistema operativo. Esta independencia permite desarrollar
un único formulario Web Form que puede ser visualizado prácticamente en todos los
dispositivos que dispongan de acceso a Internet y de un navegador Web.

Debido a que ASP.NET forma parte del .NET Framework, podemos desarrollar aplicaciones
Web ASP.NET en cualquier lenguaje basado en .NET. La tecnología ASP.NET también
permite la creación de servicios Web XML. Los servicios Web XML son aplicaciones
distribuidas que utilizan XML para transferir información entre clientes, aplicaciones y otros
servicios Web XML.
Figura 3. Servidor Web ASP.NET.

Las partes de una aplicación Web ASP.NET incluyen:

 Formularios Web Forms o páginas .aspx: Los formularios Web Forms y las páginas
.aspx proporcionan la interfaz de usuario para la aplicación Web.
 Páginas con código asociado: Las páginas con código están asociadas a los
formularios Web Forms y contienen el código del servidor para el formulario Web
Form.
 Archivos de configuración: Los archivos de configuración son archivos XML que
definen la configuración predeterminada para la aplicación Web y para el servidor
Web. Cada aplicación Web tiene un archivo de configuración Web.config. Además,
cada servidor Web tiene un archivo machine.config.
 Archivo Global.asax: Los archivos Global.asax contienen el código necesario para
responder a los eventos a nivel de aplicación provocados por ASP.NET.
 Enlaces a servicios Web XML: Los enlaces a servicios Web XML permiten a la
aplicación Web enviar y recibir datos de un servicio Web XML.
 Conectividad a bases de datos: La conectividad a bases de datos permite a la
aplicación Web transferir datos desde y hacia fuentes de base de datos.
 Caché: El uso de caché permite a la aplicación Web devolver más rápidamente
formularios Web Forms y datos tras la primera petición.
Figura 4. Modelo de ejecución de ASP .NET.

Microsoft Visual Studio.

Es un entorno de desarrollo integrado (IDE, por sus siglas en inglés) para sistemas
operativos Windows. Soporta múltiples lenguajes de programación, tales
como C++, C#, Visual Basic .NET, F#, Java, Python, Ruby y PHP, al igual que entornos de
desarrollo web, como ASP.NET MVC, Django, etc., a lo cual hay que sumarle las nuevas
capacidades online bajo Windows Azure en forma del editor Monaco.
Visual Studio permite a los desarrolladores crear sitios y aplicaciones web, así como servicios
web en cualquier entorno que soporte la plataforma .NET (a partir de la versión .NET 2002).
Así, se pueden crear aplicaciones que se comuniquen entre estaciones de trabajo, páginas
web, dispositivos móviles, dispositivos embebidos y consolas, entre otros.

Microsoft Visual Studio 2017 es un conjunto de herramientas para crear software, desde la
fase de diseño pasando por la fases de diseño de la interfaz de usuario, codificación, pruebas,
depuración, análisis de la calidad y el rendimiento del código, implementación en los clientes
y recopilación de telemetría de uso. Estas herramientas están diseñadas para trabajar juntas
de la forma más eficiente posible y todas se exponen a través del Entorno de desarrollo
integrado (IDE) de Visual Studio.
Puede usar Visual Studio para crear muchos tipos de aplicaciones, desde sencillas
aplicaciones y juegos de la Tienda para clientes móviles, hasta sistemas grandes y complejos
para empresas y centros de datos. Puede crear:
1. Aplicaciones y juegos que se ejecutan no solo en Windows, sino también en Android
y en iOS.
 2. Sitios web y servicios web basados en ASP.NET, JQuery, AngularJS y otros entornos
populares.
3. Aplicaciones para dispositivos y plataformas tan diversos como Azure, Office,
Sharepoint, Hololens, Kinect e Internet de las cosas, por nombrar solo algunos
ejemplos.
4. Juegos y aplicaciones con gráficos avanzados para una variedad de dispositivos
Windows, incluido Xbox, con DirectX.

Figura 5. Página de Inicio de Visual Studio 2015.

Aplicación Web (ASP.NET)

Crear una aplicación Web ASP.NET utilizando el lenguaje de programación Visual C# .NET
requiere de unos pasos muy sencillos como son:
1. iniciar un nuevo sitio Web.
2. Crear la interfaz del usuario.
3. Establecer las propiedades de los objetos.
4. Escribir el código y ejecutar el sitio Web.

Crear un nuevo sitio Web

Para iniciar un nuevo sitio Web desde la página de inicio de Visual Studio 2015, se puede
realizar uno de los siguientes pasos:

1. En la ventana proyectos recientes seleccionar la opción Crear: link Sitio Web…

2. Dar clic en el menú Archivo y seleccionar Nuevo sitio Web...
Al escoger una de las dos opciones se visualizará la ventana Nuevo sitio Web, donde se deberá
seleccionar la plantilla Visual C# y Sitio web vacío de ASP.NET (Visual C#).

Figura 6. Ventana Nuevo sitio Web ASP.NET – Visual C#.

En la opción Ubicación puede crear el sitio web en un Sistema de archivos (Discos de

trabajo), una ubicación HTTP o FTP, escoja Sistema de archivos. Con el botón Examinar
puede buscar la carpeta donde desea guardar el nuevo sitio Web o simplemente digite la ruta
de trabajo y a continuación asigne el nombre del sitio PrimerSitioWeb. El lenguaje será
Visual C#. Pulse el botón Aceptar para visualizar el entorno de diseño del sitio Web
PrimerSitioWeb.

Figura 7. Entorno de diseño de un nuevo sitio Web.

Al crearse el sitio Web. En el menú Sitio Web, seleccione Agregar nuevo elemento… ->
Formulario Web Forms y como nombre escriba Pagina.aspx.

Figura 8. Sitio Web con formulario Web Forms.

En el entorno de desarrollo de Visual Studio encontrará:

1. Menú principal y la barra de herramientas estándar: Proporcionan acceso a la

mayoría de comandos que controlan el entorno de programación de Visual Studio
.NET.
2. Cuadro de Herramientas: El cuadro de herramientas contiene las fichas: Estándar,
Datos, Validación, Navegación, Inicio de sesión, Elementos Web, Extensiones Ajax,
Informe, HTML. Cada ficha contiene controles que al añadirse a un formulario Web
se convierte en un objeto de la interfaz de usuario programable en la aplicación.
3. Diseñador formularios Web: Cuando se inicia un sitio Web el diseñador de
formularios de Web se abre en vista Diseño (un formulario tiene vista diseño cundo
se inicia el sitio y está en modo de ejecución cuando se ejecuta la aplicación),
mostrándose el formulario Web Default.aspx. En la parte inferior del formulario Web
se encuentran las pestañas Diseño, Dividir (divide el formulario Web en dos partes:
una en modo diseño y en la otra mitad se visualiza el código HTML del formulario
Web), Código (muestra el código HTML), como también las pestañas <html>,
<body>, <form#form1>, <div>. En dicho formulario Web se pueden ubicar los
 controles u objetos necesarios para la aplicación arrastrándolos desde el cuadro de
herramientas para crear la interfaz de usuario.
4. Explorador de soluciones: Visualiza las carpetas y archivos que se han creado. Si
observa en la carpeta donde guardó el sitio Web se creó la carpeta App_Data y los
archivos Default.aspx, Default.aspx.cs (este archivo contiene el código fuente que da
soporte a la página Default.aspx) y Web.xml (archivo de configuración xml).
5. Ventana de propiedades: Muestra una lista de las propiedades que facilitan la
configuración de los valores o propiedades del control seleccionado y se pueden
modificar mientras se crea o se edita la aplicación. Una propiedad describe una
característica de un objeto, como el tamaño, título, color, etc.
6. Ventana lista de errores: Muestra una lista de los errores, advertencias o mensajes
que se generan al realizar modificaciones a los controles o al ejecutar la aplicación.

Por otro lado, el formulario Web Forms aspx, está compuesto de dos partes:

 El formulario Web: es un archivo de texto con extensión .aspx, que contiene la

interfaz gráfica de la aplicación, con etiquetas HTML y una directiva de ASP.NET.
<%Page Language=”C#”….%>

La cual permite definir varios aspectos que afectan a nivel global la página, por
ejemplo, el atributo language indica el lenguaje de programación utilizado para la
escritura del código de servidor.

Las etiquetas del lenguaje HTML(HyperText Markup Language), permiten definir

los elementos necesarios para presentar o adicionar información a una página Web.
Los navegadores de Internet leen estos archivos de texto e interpretan las etiquetas
para determinar cómo se puede desplegar la página Web.
Todo documento HTML, ha de estar delimitado por las etiquetas <html> y </html>,
el cual es el contenedor principal de cualquier página Web. Dentro de este documento
se pueden asimismo distinguir tres principales partes:
 Tipo de documento: se define con la etiqueta <!Doctype/> y que toda
página Web debería tener, dado que en ésta se define el tipo de documento
(DTD - descripción del formato de página) o las pautas del lenguaje de
acuerdo a la versión de HTML que se describa, para que los navegadores
identifiquen el tipo de página que se ha de visualizar.
 Encabezado: delimitado por las etiquetas <head> y </head>, donde se
define la cabecera del documento y contiene información del mismo,
puede contener las etiquetas: <meta>, <scripts>, <title>, <style>, <link>.
La etiqueta <title> es obligatoria.
 Cuerpo: definido por las etiquetas <body> y </body>, que será donde se
colocará el contenido visible en el navegador (texto, imágenes, videos,
etc.) delimitados a su vez por otras etiquetas.
Figura 9. Estructura de un documento HTML.

Tipo de documento <!doctype html>

<html>
<head>
Encabezad <title></title>
o </head>
<body>
Cuerp Contenido de la página Web
o </body>
</html>

 El archivo de código asociado: se incluye la parte del código de la aplicación

asociado a la página aspx que deba ser ejecutado por el servidor. Dependiendo del
lenguaje utilizado al generar la aplicación Web, su extensión será aspx.cs para C# o
aspx.vb para Visual Basic. En el explorador de soluciones de clic en la flecha al lado
izquierdo de la página Pagina.aspx para visualizar el archivo Pagina.aspx.cs, cuyo
aspecto se visualiza en la siguiente figura:

Figura 10. Archivo asociado a una página aspx.

El archivo está formado por una clase que hereda de System.Web.UI.Page que
representa el propio formulario Web. Esta clase proporciona todo el soporte básico
para la programación en el servidor. El código asociado a la página deberá ser
 incluido en métodos en el interior de la clase, los cuales serán métodos de respuesta
a eventos generados por algún elemento de la interfaz gráfica de usuario y que se
ejecutaran en el servidor.

De clic sobre el archivo Pagina.aspx, luego pulse la pestaña Diseño para visualizar la página
de diseño del formulario Web.:
Figura 11. Sitio Web con formulario Web Forms en vista diseño.

Codificación del primer sitio Web ASP.NET

Con el sitio web creado, se creara la primera aplicación ASP.NET, la cual mediante código
que se ejecute en el servidor, genere un documento HTML donde se visualice varias veces
un mensaje de saludo. El ejercicio se realizara de dos formas diferentes que muestren el
mismo resultado.

 Ejemplo con el código de servidor en el formulario Web.

De clic sobre la pestaña Código del formulario Web Pagina.aspx, y adicione el código
sombreado en el archivo. El resultado final deberá ser similar al siguiente código:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Pagina.aspx.cs"

Inherits="Pagina" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<%
for (int i=1; i<7; i++)
{
%>
<h<%=i%>>Hola...ASP.NET a su alcance</h<%=i%>>
<%
}
%>
</div>
</form>
</body>

El código aparece delimitado por los símbolos <% y %> los cuales son scripts de servidor
que permiten insertar el resultado de una expresión ASP o variable. La expresión ASP
<%=expresion%> permite definir una variable, en este caso para imprimir el valor de la
variable i. Se utiliza la etiqueta de HTML de encabezado <h#> para imprimir el texto
“Hola..ASP.NET a su alcance” con un tamaño de fuente diferente. Los tamaños de fuente
que se pueden imprimir con la etiqueta de encabezado van desde el valor 1 hasta el valor 6.

Ejecutar la aplicación Web.

Para ejecutar el sitio Web en el entorno de desarrollo de Visual Studio se debe realizar lo
siguiente:
1. Haga clic en el botón Iniciar depuración de la barra de herramientas estándar.
También puede presionar Ctrl+F5 para ejecutar el sitio Web. Otra forma es la opción
Iniciar depuración del menú Depurar.
2. Cuando termine de ejecutar la aplicación se debe cerrar el formulario Web para
regresar al entorno de programación.

Figura 12. Ventana de ejecución Pagina.aspx.

Al cargarse la pagina en el navegador, se puede ver el codigo HTML recibido por la respuesta
HTTP. Por ejemplo, Si se esta trabajando con el navegador Chrome, pulse Ctrl + U para
visualizar la siguiente figura:

Figura 13. Codigo HTML como respuesta HTTP del sitio Web.

 Ejemplo programación en el archivo de código asociado.

Adicione un nuevo Formulario Web. En el menú Sitio Web, seleccione Agregar nuevo
elemento… -> Formulario Web Forms y como nombre escriba Pagina2.aspx.

En el explorador de soluciones de clic en la flecha al lado izquierdo de la página

Pagina2.aspx para visualizar el archivo Pagina2.aspx.cs, y adicione el código sombreado en
el archivo. El resultado final deberá ser similar al siguiente código:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Pagina2 : System.Web.UI.Page

{
protected void Page_Load(object sender, EventArgs e)
{
for(int i=1; i<7; i++)
{
this.Response.Write("<h" + i + ">Bienvenido...ASP.NET a su alcance</h"
+ i + ">");
}
}
}
Las instrucciones del código de servidor se escriben dentro del método Page_Load (El código
que se encuentra en este método se ejecuta al cargar la página aspx) del archivo asociado.
Para generar las etiquetas HTML se utiliza el método Write() del objeto ASP Response para
escribir contenido en la página de respuesta. El acceso al objeto Response y al resto de objetos
ASP se hace a través del mismo nombre expuesto por el objeto Page (this).

Ejecutar la aplicación Web.

Para ejecutar el sitio Web en el entorno de desarrollo de Visual Studio se debe realizar lo
siguiente:
1. Haga clic en el botón Iniciar depuración de la barra de herramientas estándar.
También puede presionar Ctrl+F5 para ejecutar el sitio Web. Otra forma es la opción
Iniciar depuración del menú Depurar.
2. Cuando termine de ejecutar la aplicación se debe cerrar el formulario Web para
regresar al entorno de programación.

Figura 14. Ventana de ejecución Pagina2.aspx.

Al cargarse la pagina en el navegador, se puede ver el codigo HTML recibido por la respuesta
HTTP. Por ejemplo, Si se esta trabajando con el navegador Chrome, pulse Ctrl + U para
visualizar la siguiente figura:

Figura 15. Codigo HTML Pagina2.aspx.

Cerrar y abrir nuevamente un sitio Web

Para cerrar el sitio Web PrimerSitioWeb o cualquier otro sitio web, estando en modo diseño
se pueden realizar los siguientes pasos:

1. En el menú Archivo, hacer clic en la opción Cerrar Proyecto.

2. Si desea cerrar el sitio Web y salir de Visual Studio, en el menú Archivo haga clic en
la opción Salir.
En cada caso se deben guardar los nuevos cambios que se hayan realizado.

Para volver a abrir la aplicación PrimerSitioWeb o cualquier otra aplicación existente se

deberán realizar los siguientes pasos:

1. Abrir Visual Studio .NET.

2. Si en la pantalla inicial de Visual Studio .NET se visualiza el nombre del sitio Web
que se desea abrir haga doble clic para abrir la aplicación. Si por el contrario no se
visualiza la aplicación en el menú Archivo, seleccione Abrir sitio Web..., busque la
carpeta PrimerSitioWeb y pulse el botón Abrir para abrir la aplicación Web en el
entorno de desarrollo de C# .NET.

Insertar controles Web en un formulario Web.

Adicione un nuevo Formulario Web. En el menú Sitio Web, seleccione Agregar nuevo
elemento… -> Formulario Web Forms y como nombre escriba Default.aspx.

Figura 16. Nuevo formulario Web (Default.aspx).

En la parte izquierda de la ventana se aprecia una pestaña vertical llamada Cuadro de
Herramientas, en la que se encuentran los diferentes controles y componentes agrupados por
categorías que se pueden utilizar en una aplicación Web.
Para adicionar controles al formulario basta con dar doble clic sobre el control a utilizar o
simplemente arrastrar el control al lugar deseado.
A continuación adicione los siguientes controles: 2 Label (etiqueta – mostrar texto), 2
TextBox (campo de texto – campo editable) y 1 Button (botón). El formulario Web deberá
visualizarse como se aprecia la siguiente figura:

Figura 17. Formulario Web con controles adicionados.

Al pulsar sobre la pestaña Código, se podrá apreciar el código que se ha generado

automáticamente al adicionar los controles.

Figura 18. Código generado al adicionar controles.

Modificar las propiedades de los controles en un formulario Web.

Se pueden modificar las propiedades iniciales de los controles. Inicialmente se modificaran

dos propiedades básicas de los controles adicionados:
 Id: identificador único del control Web que se utiliza para acceder a las propiedades
y métodos del objeto desde código.
 Text: permite mostrar texto en el interior de un control.

Tabla 1. Modificacion de los controles de la página Default.aspx.

Label1 ID lblnombre
Text Digite su nombre:
TextBox1 ID ttxtnombre
Text En blanco
Button1 ID boton
Text Ver mensaje
Label1 ID lblmensaje
Text Mensaje
TextBox2 ID txtmensaje
Text En blanco

Al realizar las respectivas modificaciones, el formulario web, se debería visualizar como se

aprecia en la siguiente figura:

Figura 19. Formulario web con los controles modificados.

Codificación de los métodos de respuesta a eventos.

Los nombres de los métodos de respuesta a eventos tiene el formato del tipo
NombreControl_xxx, donde NombreControl representa la propiedad Id y xxx el nombre del
evento.
Se programara el evento click del control Button, de manera que al ser pulsado, se visualice
un mensaje de bienvenida asociado al nombre que se digite en el control TextBox txtnombre.
En la vista de diseño de la página Default.aspx, de doble clic sobre el control Button, para
visualizar el método de respuesta del evento click dentro del archivo de código asociado.

Figura 20. Evento click del control Button.

En el interior del método escriba el siguiente código, como se aprecia en la siguiente figura:

Figura 21. Codigo asociado al evento click del control Button.

Al control txtmensaje se le asigna por intermedio de la propiedad Text en texto “Hola”
concatenado (+) con el contenido del objeto txtnombre en su propiedad Text unido al mensaje
“…Bienvenido a ASp.NET”.

Ejecutar la aplicación Web.

Para ejecutar el sitio Web en el entorno de desarrollo de Visual Studio se debe realizar lo
siguiente:
1. Haga clic en el botón Iniciar depuración de la barra de herramientas estándar.
También puede presionar Ctrl+F5 para ejecutar el sitio Web. Otra forma es la opción
Iniciar depuración del menú Depurar.
2. Cuando termine de ejecutar la aplicación se debe cerrar el formulario Web para
regresar al entorno de programación.

Figura 22. Ventana de ejecución Default.aspx.

Al digitar como nombre Carlos Vanegas y pulsar el botón Ver mensaje, se deberia apreciar
la siguiente figura: