Modulo taller progwebaa2

TALLER DE PROGRAMACIÓN
WEB

Ing. David Gil

Unidad Didáctica: Taller de Programación Web | 2

Introducción
Internet ha creado en el mundo un nuevo modo de conectarse, trabajar y estudiar. Internet y en particular el
sitio web es un entorno donde la programación marca la diferencia, al integrar los sistemas de su empresa
con el entorno web.
La necesidad de contar con entornos amigables e intuitivos que puedan satisfacer las necesidades de
usuarios muy heterogéneos a ocasionado que el desarrollo web se centre en gran parte en un diseño
espectacular y llamativo, que en un primer momento es importante; pero para que una web sea operativa
no se puede supeditar todo únicamente al diseño o a la creación de páginas web sino que hay que integrarlo
con la usabilidad en internet y la presencia en buscadores para obtener unos resultados óptimos. Por estos
motivos la programación web es vital en el desarrollo de intranets, tiendas online o negocios de comercio
electrónico.
La Unidad Didáctica “Taller de Programación Web” ha sido planificada para dotar a los estudiantes de los
conocimientos y el desarrollo de habilidades en la construcción de Aplicaciones Web usando ASP.NET con
C# las cuales son las tecnologías más importantes, innovadoras y fascinantes que han surgido
recientemente en el contexto de la programación orientada a Internet que les permitirá de una manera fácil
y transparente la creación de Sitios Web fiables y robustos.

CONTENIDO

Introducción 2

Planificando el desarrollo de aplicaciones web con ASP.NET y C# 3

Construyendo Sitios Web ASP.NET 30

Módulo 3: Gestión de Aplicaciones para Internet y Producción Multimedia Ing. David Gil


Planificando el desarrollo de aplicaciones
web con ASP.NET y C#
Introducción al desarrollo web
La World Wide Web y la Internet que la alimenta son, posiblemente, los desarrollos más importantes en la
historia de la computación. Estas tecnologías nos han llevado a la era de la informática; además se han
convertido en parte integral de la vida diaria en nuestros días.
Si volteamos la mirada hacia el pasado, el crecimiento caótico de la tecnología web tubo su origen en la
creciente necesidad de estar, para bien o para mal, en el ciberespacio; es por ello que los programadores
desarrollan sitios web por doquier sin reparar en la calidad de los mismos. Al inicio, debido a que los
requerimientos de estos sitios eran sencillos los inconvenientes pasaron por desapercibidos; confome los
requerimientos de las aplicaciones web se tornaron más complejos, quedaron al descubierto las falencias
del desarrollo sin ningún criterio técnico.
Para evitar una web enmarañada y lograr mayor éxito en el desarrollo y la aplicación de sistemas basados en
Web complejos y a gran escala, existe una apremiante necesidad de enfoques disciplinados y nuevos
métodos y herramientas con que desarrollar, desplegar y evaluar los sistemas y aplicaciones basados en
Web. Tales enfoques y técnicas deben considerar las características especiales de los nuevos medios, los
ambientes y escenarios operativos, y la multiplicidad de perfiles de usuario que colocan desafios adicionales
al desarrollo de aplicaciones basadas en Web.
La ingeniería web aplica “sólidos principios científicos, de ingeniería y de administración, y enfoques
disciplinados y sistemáticos para el desarrollo, despliegue y mantenimiento exitoso de sistemas y
aplicaciones basadas en web de alta calidad.
Atributos de los Sistemas y Aplicaciones basados en Web
En los primeros días de la World Wide Web los “sitios web” consistían en poco más que un conjunto de
archivos de hipertexto ligados que presentaban información mediante texto y gráficos limitados. Conforme
el tiempo pasó, el HTML aumentó al desarrollar herramientas (por ejemplo, XML, Java) que permitieron a
los ingenieros web ofrecer capacidades de cálculo junto con información. Nacieron los sistemas y
aplicaciones basados en web. En la actualidad, las aplicaciones web han evolucionado en sofisticadas
herramientas de computación que no sólo proporcidonan función por si mismas al usuario final, sino que
también se han integrado con bases de datos corporativas y aplicaciones de negocios.
Las aplicaciones web son diferentes a las muchas otras categorias de software informático; los sistemas
basados en web involucran una mezcla entre publicación impresa y desarrollo de software, entre marketing
e informática, entre comunicaciones internas y relaciones externas, y entre arte y tecnología. En la mayoría
de las aplicaciones web se encuentran los siguientes atributos.
• Intensidad de red. Una aplicación web reside en una red y debe satisfacer las necesidades de una
variada comunidad de clientes. Una aplicación web puede residier en la Internet. Alternativamente, una
aplicación puede colocarse en una Intranet o en una Extranet.
• Concurrencia. Un gran número de usuarios puede tener acceso a la aplicación web al mismo tiempo. En
muchos casos, los patrones de uso entre los usuarios finales variarán enormemente.
• Carga impredecible. El número de usuarios de la aplicación web puede variar en órdenes de magnitud
de día con día.
• Desempeño. Si un usuario de la aplicación web debe esperar demasiado puede decidir irese a cualquier
otra parte.



• Disponibilidad. Aunque la expectativa de una disponibilidad del total es poco razonable, los usuarios de
las aplicaciones web populares con frecuencia demandan acceso bre la base de “24/7/365”.
• Gobernada por los datos. La función primordial de muchas aplicaciones web es usar hipermedia para
presentar contenido de texto, gráficos, audio y video al usuario final. Además, por lo general, las
aplicaciones web se utilizan para tener acceso a información que existe en bases de datos que
originalmente no eran parte integral de ambiente basado en web (por ejemplo, comercio electrónico o
aplicaciones financieras).
• Sensibilidad al contenido. La calidad y naturaleza estética del contenido sigue siendo un importante
determinante de la calidad de una aplicación web.
• Evolución continúa. A diferencia del software de aplicación convencional, que evoluciona a lo largo de
una serie de planeadas liberaciones espaciadas cronológicamente, las aplicaciones web evolucionan de
manera continua.
• Inmediatez. Aunque la inmediatez es una característica de muchos dominios de aplicación, las
aplicaciones web con frecuencia muestran un tiempo para comercializar que puede ser cuestión de unos
cuantos días o semanas.
• Seguridad. Puesto que las aplicaciones web están disponibles mediante el acceso a la red, es difícil, si
no imposible, limitar la población de usuarios finales que pueden tener acceso a la aplicación. Con la
finalidad de proteger el contenido confidencial y ofrecer modos seguros de transmisión de datos, se
deben implementar fuertes medidas de seguridad a lo largo de la infraestructura que sustenta una
aplicación web y dentro de la aplicación misma.
• Estética. Una parte innegable de la apariencia de una aplicación web es su presentación y la disposición
de sus elementos. Cuando una aplicación se diseña para comercializar o vender productos o ideas, la
estética puede tener tanto que ver con el éxito como el diseño técnico.
El proceso de Ingeniería Web
Los atributos de los sistemas y aplicaciones basados en web tienen una profunda influencia sobre el proceso
de ingeniería web que se elija.
La efectividad de cualquier proceso de ingeniería depende de su adaptabilidad. Esto es, la organización del
equipo de proyecto, los modos de comunicación entre miembros del equipo, las actividades de ingeniería y
las tareas que deben realizarse, la información que se recolecte y cree, y los métodos empleados para
producir un producto de alta calidad deben estar adaptados a la gente que realiza el trabajo, el plazo y las
restricciones del proyecto, y al problema que se quiere resolver. Antes de definir un marco de trabajo de
proceso para Ingeniería Web se debe reconocer que:
1. Las aplicaciones web con frecuencia se entregan de manera incremental. Esto es, las actividades
del marco de trabajo ocurrirán de manera repetida conforme cada incremento se someta a
ingeniería y se entregue.
2. Los cambios ocurrirán frecuentemente. Estos cambios pueden ocurrir como resultado de la
evaluación de un incremento entregado o como consecuencia de cambiar las condiciones de los
negocios.
3. Los plazos son cortos. Esto aminora la creación y revisión de voluminosa documentación de
ingeniería, pero no excluye la simple realidad de que el análisis crítico, el diseño y la prueba deben
registrarse en alguna forma.
A continuación se aborda el marco de trabajo para el proceso de ingeniería web.
o Comunicación con el cliente. Dentro del proceso de ingeniería web la comunicación con el cliente se
caracteriza por medio de dos grandes tareas: el análisis del negocio y la formulación. El análisis del



negocio define el contexto empresarial-organizativo para la aplicación web. Además, se identifican los
participantes, se predicen los potenciales cambios en el ambiente o los requisitos del negocio, y se
define la integración entre la aplicación web y otras aplicaciones de negocios, bases de datos y
funciones. La formulación es una actividad de recopilación de requisitos que involucra a todos los
participantes. El intento es describir el problema que la aplicación web habrá de resolver (junto con los
requisitos básicos para la aplicación web) con el aprovechamiento de la mejor información disponible.
Además, se intenta identificar áreas de incertidumbre y dónde ocurrirán cambios potenciales.
o Planeación. Se crea el plan de proyecto para el incremento de la aplicación web. El plan consiste de una
definición de tareas y un calendario de plazos respecto al periodo (usualmente medido en semanas)
proyectado para el desarrollo del incremento de la aplicación web.
o Modelado. Las labores convencionales de análisis y diseño de ingeniería del software se adaptan al
desarrollo de la aplicación web, se mezclan y luego se funden en la actividad de modelado de la
ingeniería web. El intento es desarrollar análisis “rápidos” y modelos de diseño que definan requisitos y
al mismo tiempo representen una aplicación web que los satisfará.
o Construcción. Las herramientas y la tecnología de la ingeniería web se aplican para construir la
aplicación web que se ha modelado. Una vez que se construye el incremento de aplicación web, se
dirige una serie de pruebas rápidas para asegurar que se descubran los errores en el diseño (es decir:
contenido, arquitectura, interface, navegación). Pruebas adicionales abordan otras características de la
aplicación web.
o Despliegue. La aplicación web se configura para su ambiente operativo, se entrega a los usuarios finales
y luego comienza un periodo de evaluación. La retroalimentación acerca de la evaluación se presenta al
equipo de ingeniería web y el incremento se modifica conforme se requiera.

Formulación y Planeación para Ingeniería Web
Comenzar siempre es difícil. Por una parte, existe una tendencia a diferir, a esperar hasta que toda t este
cruzada y toda i tenga punto antes de que comience el trabajo. Por otra parte, hay un deseo de saltar ya, de
comenzar a construir incluso antes de que en realidad se conozca que se necesita hacer. Ambos enfoques
son inapropiados y por ello las dos primeras actividades del marco de trabajo de la ingeniería web destacan
la formulación y la planeación. La formulación valora la necesidad subyacente de la aplicación web, las
características y funciones globales que desean los usuarios y el ámbito del esfuerzo de desarrollo. La
planeación aborda los elementos que deben definirse para establecer un flujo de trabajo y programa, y a
rastrear el trabajo conforme avanza el proyecto.
Formulación de Sistemas Basados en Web
La formulación se sistemas y aplicaciones basados en web representa una secuencia de acciones de
ingeniería web que comienza con la identificación de las necesidades del negocio, se mueve hacia una
descripción de los objetivos de la aplicación web, define grandes características y funciones y realiza la
recopilación de requisitos que conducen al desarrollo de un modelo de análisis. La formulación permite que
los clientes y el equipo de desarrollo establezcan un conjunto común de metas y objetivos para la
construcción de la aplicación web. También identifica el ámbito del esfuerzo de desarrollo y proporciona un
medio para determinar un resultado exitoso. El análisis –una actividad técnica que es una continuación de la
formulación- identifica los requisitos funcionales, de comportamiento y de datos para la aplicación web.
Preguntas de formulación
Se sugiere un conjunto de preguntas que deben formularse y responderse al comienzo de la etapa de
formulación:



• ¿Cuál es la principal motivación (necesidad del negocio) para la aplicación web?
• ¿Cuáles son los objetivos que debe satisfacer la aplicación web?
• ¿Quién usará la aplicación web?
Recopilación de requisitos para aplicaciones web
Los objetivos globales de la recopilación de requisitos para aplicaciones web son:
 Identificar requisitos de contenido.
 Identificar requisitos funcionales.
 Definir escenarios de interacción para diferentes clases de usuarios.
Los siguientes pasos de la recopilación de requisitos se dirigen para lograr estos objetivos:
1. Pedir a los clientes que definan las categorías de usuario y describan cada categoría.
2. Comunicarse con los clientes para definir los requisitos básicos de la aplicación web.
3. Analizar la información recopilada y utilizar la información para realizar un seguimiento con los
clientes.
4. Definir casos de uso que describan escenarios de interacción para cada clase de usuario.
Planeación de Proyectos de Ingeniería Web
Dada la inmediatez de las aplicaciones web es razonable preguntar: ¿en realidad se necesita gastar tiempo y
esfuerzo en la planeación y administración de una aplicación web? Dado que la gestión del proyecto se
indica para los proyectos tradicionales, parecería razonable argumentar que también estaría indicada para
los grandes proyectos electrónicos. Los pequeños proyectos electrónicos tienen características especiales
que los diferencian de los proyectos tradicionales. Sin embargo, incluso en el caso de los pequeños
proyectos electrónicos, la planeación se debe realizar, se deben considerar los riesgos, se debe establecer
un programa y se deben definir controles de modo que eviten la confusión, la frustración y el fracaso.
El Equipo de Ingeniería Web
Un equipo de ingeniería web exitoso mezcla una amplia variedad de talentos que deben trabajar como
equipo en un ambiente de proyecto con alta presión. Los plazos son cortos, los cambios son inexorables y la
tecnología continúa cambiando. La creación de un equipo que se consolide no es un asunto sencillo.
Los siguientes papeles se deben distribuir entre los miembros del equipo de ingeniería web.
Desarrolladores/proveedores de contenido. Dado que el contenidos controla inherentemente las
aplicaciones web, una función del equipo se debe enfocar en la generación o recopilación del contenido.
Editores de web. El variado contenido que generan los respectivos desarrolladores/proveedores se debe
organizar para incluirlo en la aplicación web. Además, alguien debe actuar como conexión entre el equipo
técnico que diseña la aplicación web y los desarrolladores/proveedores de contenido sin conocimientos
técnicos. Este papel lo satisface el editor web, quien debe entender tanto el contenido como la tecnología
de la aplicación web.
Ingeniero web. El ingeniero web se involucra en un amplio rango de actividades durante el desarrollo de
una aplicación web, que incluyen la obtención de requisitos, el modelado de análisis, el diseño
arquitectónico, de navegación y de interfase, la implementación de la aplicación y de las pruebas. También
debe tener una sólida comprensión de las tecnologías de componentes, de las arquitecturas
cliente/servidor, de HTML/XML y de tecnologías de bases de datos, y un conocimiento práctico de los



conceptos multimedia, de las plataformas hardware/software, de la seguridad de redes y de cuestiones de
apoyo a sitios web.
Expertos en dominios empresariales. Un experto en dominio empresarial debe ser capaz de responder
todas las preguntas relacionadas con metas, objetivos y requisitos empresariales relacionados con la
aplicación web.
Especialistas de soporte. Este papel se asigna a la persona(s) que es (son) responsable(s) del apoyo
continuo a la aplicación. Puesto que las aplicaciones web evolucionan continuamente, el especialista de
soporte es responsable de las correcciones, adaptaciones y mejoras al sitio, que incluyen actualizaciones de
contenido, implementación de nuevos procedimientos y formas, y cambios al patrón de navegación.
Administrador. Usualmente llamado “web master”, esta personas tiene la responsabilidad de la operación
diaria de la aplicación web, lo que incluye: desarrollo e implementación de políticas para la operación de la
aplicación, establecimientos de procedimientos de soporte y retroalimentación, implementación de
seguridad y derechos de acceso, medición y análisis de tráfico del sitio web, coordinación de los
procedimientos de control de cambios y coordinación con el especialista de soporte. El administrador
también puede estar involucrado en las actividades técnicas que realizan los ingenieros web y los
especialistas de soporte.
Planeación de aplicaciones web: subcontratación
Un porcentaje sustancial de las aplicaciones web se subcontrata con proveedores que (supuestamente) se
especializan en el desarrollo de sistemas y aplicaciones basados en web. En tales casos, un negocio (el
cliente) pide un precio fijo para desarrollar la aplicación web de uno o más proveedores, evalúa los precios
competitivos y luego elige un proveedor para efectuar el trabajo.
Planeación de aplicaciones web: ingeniería web en casa
Conforme las aplicaciones web se vuelven más extensas y estratégicas para los negocios, muchas
compañías han optado por controlar el desarrollo en casa. No sorprende que la ingeniería web en casa se
gestione de manera un poco diferente a un esfuerzo de subcontratación.
Los pasos siguientes se recomiendan para proyectos de ingeniería web pequeños y de tamaño moderado:
 Entender el ámbito, las dimensiones de cambio y las restricciones del proyecto.
 Definir una estrategia de proyecto incremental.
 Realizar análisis de riesgo.
 Desarrollar una estimación rápida.
 Elegir un conjunto de tareas (descripción del proceso).
 Establecer un programa.
 Definir mecanismos de rastreo del proyecto.
 Establecer un enfoque de gestión del cambio.

Introducción a ASP.NET
Cuando la primera versión de .NET Framework fue lanzada hace casi una década, fue el inicio de una
dirección nueva y radical en el diseño de software. Inspirado por lo mejor de Java, COM, y la Web, y
tomando nota de los errores y limitaciones de las tecnologías anteriores, Microsoft se propuso "golpear el
botón de reinicio" en su plataforma de desarrollo. El resultado fue un conjunto de tecnologías
sorprendentemente maduro que los desarrolladores pueden utilizar para hacer todo, desde la construcción



de una aplicación Windows para ejecutar una consulta de base de datos y una herramienta web de creación
de sitios conocida como ASP.NET.
Hoy en día, ASP.NET es tan popular como siempre, pero ya no es tan revolucionario. Y, aunque la
funcionalidad básica que se encuentra en el corazón de ASP.NET es prácticamente el mismo de hace diez
años, Microsoft ha añadido capas de características nuevas y las abstracciones de alto nivel de codificación.
También ha introducido al menos una dirección nueva que compite con las tradicionales de programación
ASP.NET, que se llama ASP.NET MVC.
Los Siete Pilares de ASP.NET
1. ASP.NET está integrado con el .NET Framework.
2. ASP.NET es compilado, no interpretado.
3. ASP.NET es multilenguaje.
4. ASP.NET se encuentra alojado por el Common Language Runtime.
5. ASP.NET es orientado a objetos.
6. ASP.NET es compatible con todos los navegadores.
7. ASP.NET es fácil de desplegar y configurar.

Visual Studio
Con ASP.NET, tiene varias opciones para desarrollar aplicaciones web. Si lo prefiere (y no le importa el
trabajo extra), puede codificar todas las páginas web y clases a mano con un sencillo editor de texto. Este
enfoque es atractivamente sencillo, pero tedioso y propenso a errores. Los desarrolladores Profesionales de
ASP.NET rara vez lo hacen.
En cambio, casi todos los sitios web ASP.NET a gran escala se construyen utilizando Visual Studio. Esta
herramienta de desarrollo profesional incluye un amplio conjunto de herramientas de diseño, incluidas las
legendarias herramientas de depuración e IntelliSense, que captura los errores y ofrece sugerencias a
medida que escribe. Visual Studio también soporta el modelo de código subyacente, que separa el
código .NET que escribes de las etiquetas de marcado de la página web. Visual Studio agrega un servidor
web integrado que facilita la depuración de web sites.
Escribir y compilar el código a mano sería una tarea tediosa para cualquier desarrollador. Sin embargo, el
IDE de Visual Studio ofrece una serie de características de alto nivel que van más allá de la gestión de código
básico. Estas son algunas de las ventajas de Visual Studio:
 Un servidor web integrado.
 Desarrollo multilenguaje.
 Menos escritura de código.
 Intuitivo estilo de codificación.
 Rápido desarrollo.
 Depuración.
Sitios web (Websites) y proyectos web (Web Projects)
Visual Studio ofrece dos formas de crear una aplicación web ASP.NET:
• Desarrollo basado en proyectos: Cuando se crea un proyecto web, Visual Studio genera un
archivo de proyecto .csproj (asumiendo que se está codificando en C #) que registra los archivos
en su proyecto y almacena una configuración de depuración. Cuando se ejecuta un proyecto



Web, Visual Studio compila todo el código en un único ensamblado antes de lanzar su
navegador web.
• Desarrollo sin proyectos: Un enfoque alternativo es crear un sitio web sencillo sin ningún tipo
de archivo de proyecto. En este caso, Visual Studio asume que todos los archivos en el directorio
del website (y sus subdirectorios) son parte de la aplicación web. En este escenario, Visual
Studio no necesita precompilar el código. En su lugar, ASP.NET compila su sitio web la primera
vez que solicita una página.

El Integrated Development Environment (IDE) de Visual Studio

Ventana Descripción

Solution Explorer (Explorador Lista los archivos y subcarpetas que están en la carpeta de la aplicación
de soluciones) web.

Toolbox (Caja de herramientas) Muestra controles de servidor incorporados de ASP.NET y de cualquier
otro fabricante o controles. Los controles pueden estar escritos en
cualquier idioma y usados en cualquier idioma.



Server Explorer (Explorador de Permite el acceso a bases de datos, los servicios del sistema, las colas de
servidores) mensajes, y otros recursos del lado del servidor.

Properties (Propiedades) Le permite configurar el elemento seleccionado actualmente, si se trata
de un archivo en el Explorador de soluciones o un control en la superficie
de diseño de un formulario web.

Error List (Lista de errores) Reporta los errores que Visual Studio ha detectado en el código, pero
que no se han resuelto todavía.

Task List (Lista de tareas) Listas de comentarios que se inician con un apodo predefinido para que
pueda hacer un seguimiento de las porciones de código que desea
cambiar y saltar a la posición adecuada rápidamente.

Document (Documento) Permite diseñar una página web arrastrando y soltando, y la edición de
la los archivos de código que tiene dentro de su Explorador de
soluciones. También soporta los tipos de archivos que no sean ASP.NET,
tales como HTML estático y archivos XML.

Macro Explorer Le permite ver todas las macros que haya creado y ejecutarlos.

Class View (Vista de clases) Muestra diferentes vistas de su aplicación, las cuales se organizan para
mostrar todas los clases que has creado (y sus métodos, propiedades y
eventos).

Team Explorer Muestra los proyectos de equipo y le permite verificar los archivos a
través de control de código fuente para que pueda trabajar en ellos. Esta
ventana sólo aparece si ha instalado el Visual Studio Team Suite edición.

Manage Styles and Apply Permite modificar los estilos en una hoja de estilos vinculados y
Styles aplicarlos a la página Web actual.

El editor de código
Muchas de las características más prácticas de Visual Studio aparecen cuando usted comienza a escribir el
código que apoye su interfaz de usuario. Para iniciar la codificación, es necesario cambiar a la vista de
código subyacente. Para cambiar de nuevo y adelante, puede usar dos botones que se colocan justo encima
de la ventana del Explorador de soluciones.
Agregar referencias de ensamblado
De forma predeterminada, ASP.NET construye un pequeño conjunto de ensamblados de uso común. Los
ensamblados .NET están disponible para todas las páginas web.
Estos ensamblados se configuran a través de una máquina especial de configuración de archivo. No es
necesario tomar ninguna medida adicional para utilizar las clases en estos ensamblados.
Outlining



Outlining permite a Visual Studio "colapsar" una subrutina, la estructura de bloque, o de la región a una sola
línea. Le permite ver el código que le interesa, ocultando el código de importancia. Para cerrar una parte de
código, haga clic en el cuadro de - junto a la primera línea. Haga clic en el cuadro de nuevo (que ahora
tendrá un símbolo +)
Member List
Visual Studio hace fácil para que usted pueda interactuar con los controles y las clases. Cuando escriba un
punto (.) después de una clase o nombre de objeto, Visual Studio aparece una lista de propiedades
disponibles y los métodos.
Error Underlining
Una de las características más útiles del editor de código de error es subrayado. Visual Studio es capaz de
detectar un variedad de condiciones de error, como variables no definidas, propiedades o métodos, el tipo
de datos no válidos las conversiones, y los elementos de código que falta. En lugar de detenerse a avisar de
que un problema existe, el editor de Visual Studio en silencio subraya el código erróneo. Usted puede
colocar el ratón para ver una breve descripción del problema.
El modelo de código
Visual Studio soporta dos modelos para codificar páginas web:
Inline code (código en línea): Este modelo es el más cercano a las páginas ASP tradicionales. Todo el
código y el código HTML es almacenados en un único archivo .aspx. El código se inserta en uno o más
bloques de secuencias. Sin embargo, a pesar de que el código está en un bloque de secuencia de comandos,
no pierde IntelliSense o la depuración de apoyo, y no necesitan ser ejecutados de forma lineal, de arriba a
abajo (como el código ASP clásico). Este modelo es muy útil ya que mantiene todo en un paquete limpio, y
es popular para la codificación de páginas web sencillas.
Code-behind (código subyacente): Este modelo separa cada página Web ASP.NET en dos archivos: un
archivo. Markup aspx con HTML y las etiquetas de control, y un archivo de código .cs con el código fuente
de la página (en el supuesto que estás usando C # como lenguaje de programación de su página web). Este
modelo proporciona una mejor organización, y separación de la interfaz de usuario de la lógica de
programación esto es muy importante a la hora de la creación de páginas complejas.
Proyectos Web
Cuando se crea un proyecto web, Visual Studio genera un número de archivos adicionales, incluyendo los
archivos de proyecto .csproj y .csproj.user y un archivo de solución .sln. Cuando se crea una aplicación,
Visual Studio genera archivos temporales, que se encuentran en el directorio Obj, y uno o más
archivos .pdb (en el subdirectorio Bin) con símbolos de depuración. Ninguno de estos archivos se debe
implementar al servidor web cuando la aplicación web está completa. Además, ninguno de los archivos de
código fuente C# (archivos con extensión .cs) se debe implementar, porque Visual Studio los precompila en
un ensamblado DLL.
Las ventajas más importantes del desarrollo web basado en proyectos son las siguientes:
 El sistema de desarrollo basado en proyecto es más estricto que desarrollo sin proyecto: Esto es
porque el archivo de proyecto muestra explícitamente cuáles archivos deben ser parte del proyecto.
Esto le permite detectar posibles errores (como archivos que faltan) y deliberar incluso actos de
sabotaje (como archivos no deseados, añadidos por un usuario malintencionado).
 Los proyectos web permiten mayor flexibilidad en la administración de archivos: un ejemplo es si ha
creado varios proyectos separados y los colocas en subdirectorios del mismo directorio virtual. En
este caso, los proyectos se mantienen separados para fines de desarrollo, pero son básicamente la



misma aplicación para la implementación. Con el desarrollo sin proyectos, no hay ninguna manera
de mantener los archivos en estos subdirectorios separados.
 Los proyectos web permiten un proceso de implementación personalizada: Los archivos de
proyecto de Visual Studio trabajan con la utilidad de MSBuild, lo que permite la compilación de
proyecto automatizado y personalizado. Además, obtendrá un mayor control sobre el ensamblado
generado por su aplicación web.
 Los proyectos Web funcionan mejor en algunos escenarios de migración: Por esta razón, ASP.NET
convierte automáticamente los proyectos web de Visual Studio .NET 2003 a proyectos web de
Visual Studio 2010. Esta conversión requiere menos cambios a sus páginas.

Depuración en Visual Studio
Visual Studio siempre ha proporcionado herramientas sólidas para la depuración de las aplicaciones web. En
Visual Studio 2010, estas herramientas son esencialmente las mismas, con algunas mejoras menores que
hacen más fácil profundizar en objetos y colecciones en tiempo de ejecución.
Para depurar una página web específica en Visual Studio, seleccione la página web en el Explorador de
soluciones y haga clic en el botón Iniciar depuración en la barra de herramientas. (Si actualmente está
editando la página web que desee probar, no necesita seleccionarlo en absoluto, simplemente haga clic en
iniciar depurar para lanzarlo directamente.)
Lo que sucede después depende de la ubicación de su proyecto. Si el proyecto está almacenado en un
servidor web remoto o un directorio virtual local de IIS, Visual Studio simplemente lanza el explorador
predeterminado y le dirige a la dirección URL correspondiente. Si ha utilizado una aplicación del sistema de
archivos, Visual Studio inicia su servidor web integrado en un puerto dinámicamente seleccionado (que
impide que entrar en conflicto con IIS, si está instalado). A continuación, Visual Studio inicia el explorador
predeterminado y pasa una URL que señala al servidor web local. De cualquier manera, el trabajo real -
compilar la página y la creación de los objetos de página- es pasado al proceso de trabajo de ASP.NET.
El servidor de prueba sólo se ejecuta mientras se ejecuta Visual Studio, y sólo acepta solicitudes de su
equipo. Cuando Visual Studio se inicia el servidor web integrado, añade un icono para él en la bandeja del
sistema. Si desea obtener información adicional sobre el servidor de prueba, o desea cerrarlo, simplemente
haga doble clic en el icono de la bandeja del sistema.

Web Forms (Formularios Web)
Las páginas ASP.NET (oficialmente conocidas como formularios web) son una parte vital de una aplicación
ASP.NET. Proporcionan la salida actual de una aplicación web –las páginas web, que los clientes solicitan y
ven en sus navegadores.
Esencialmente, los formularios web le permiten crear una aplicación web utilizando la misma interfaz de
basada en controles como una aplicación Windows. Para ejecutar un formulario web ASP.NET, el motor
ASP.NET lee todo el archivo .aspx, genera los objetos correspondientes, y dispara una serie de eventos.
Usted reacciona a estos eventos utilizando código completamente orientado a objetos.
Procesamiento de página
Uno de los objetivos principales de ASP.NET es crear un modelo que permite a los desarrolladores web,
desarrollar rápidamente formularios web de la misma manera que los desarrolladores de Windows pueden
construir ventanas hechas a medida en una aplicación de escritorio. Por supuesto, las aplicaciones web son
muy diferentes de las tradicionales aplicaciones de cliente enriquecido. Hay dos obstáculos principales:



• Las aplicaciones Web se ejecutan en el servidor.
• Las aplicaciones web no tienen estado.
Etapas de procesamiento de web forms
Por el lado del servidor, el procesamiento de un formulario Web ASP.NET se lleva a cabo en etapas. En cada
etapa, se plantean diversos eventos. Esto permite que su página de conecte al flujo de procesamiento en
cualquier etapa y responder en cualquier momento que lo desee.
La siguiente lista muestra las principales etapas en el flujo de proceso de una página ASP.NET:
• Inicialización del marco de trabajo de la página.
• Inicialización del código de usuario.
• Validación.
• Manejando Eventos
• Enlace de datos automático.
• Limpieza.
La clase Page
La página en si misma es como una instancia de un tipo de objeto control. De hecho, todos los formularios
web son en realidad instancias de la clase Page de ASP.NET, que se encuentra en el espacio de nombres
System.Web.UI.
Es posible que haya notado que cada clase de código subyacente explícitamente se deriva de
System.Web.UI.Page. Esto significa que cada web form a crear está equipado con una enorme cantidad
funcionalidad de fuera de la de la caja. El FindControl () y la propiedad IsPostBack son dos ejemplos que
hemos visto hasta ahora. Además, se derivan de la clase Page que da a su código las siguientes propiedades
de gran utilidad:
o Session
o Application
o Cache
o Request
o Response
o Server
o User
o Trace

Server Controls (Controles de Servidor)
Los controles de servidor, son una parte fundamental de la arquitectura ASP.NET. En esencia, los controles
de servidor son las clases de .NET Framework que representan los elementos visuales de un formulario web.
Algunas de estas clases son relativamente sencillos y reprecentan de cerca a una etiqueta HTML específica.
Otros controles son mucho más ambiciosos y hacen una representación más compleja de múltiples
elementos HTML.
Tipos de Server Controls
 Controles de servidor HTML: Estas son las clases que envuelven los elementos estándar HTML.
Aparte de este atributo, la declaración de un control de servidor HTML sigue siendo el mismo. Dos
ejemplos son HtmlAnchor (para la etiqueta <a>) y HtmlSelect (para la etiqueta <select>). Sin
embargo, puede convertir cualquier etiqueta HTML en un control de servidor. Si no hay una clase
directa correspondiente, ASP.NET simplemente usará la clase HtmlGenericControl. Para cambiar



un elemento HTML normal en un control de servidor, basta con añadir el atributo runat = "server" a
la etiqueta del elemento.
 Controles Web: Estas clases duplican las funciones de los elementos básicos de HTML, pero tiene
un juego más consistente y significativa de propiedades y métodos que hacen más fácil al
desarrollador declarar y acceder a ellos. Algunos ejemplos son los controles HyperLink, ListBox y
Button. En Visual Studio, se encuentran en la ficha Estándar del Cuadro de herramientas.
 Controles Enriquesidos: Estos controles avanzados tienen la capacidad de generar una gran
cantidad de código HTML, e incluso JavaScript del lado del cliente para crear la interfaz. Algunos
ejemplos son el Calendar, AdRotator, y los controles TreeView. En Visual Studio, muchos controles
enriquesidos también se encuentran en la ficha Estándar del Cuadro de herramientas.
 Controles de validación: Este conjunto de controles permite fácilmente la validación de un control
de entrada asociado contra varias normas o reglas definidas por el usuario. Por ejemplo, puede
especificar que la entrada no puede estar vacía, que debe ser un número, que debe ser mayor que
un determinado valor, y así sucesivamente. Si la validación falla, se puede evitar el procesamiento
de páginas o permitir que estos controles muestren mensajes de error en línea en la página. En
Visual Studio, estos controles se encuentran en la ficha de validación de la Caja de herramientas.
 Controles de datos: Estos controles incluyen cuadriculas sofisticadas y listas que están diseñados
para mostrar grandes cantidades de datos, con soporte para características avanzadas tales como
plantillas, edición, selección, y paginación. Este conjunto incluye también los controles de origen de
datos de que permiten unirse a diferentes fuentes de datos de forma declarativa, sin necesidad de
escribir código adicional.
 Controles de navegación: Estos controles están diseñados para mostrar mapas de sitio y permitir al
usuario navegar de una página a otra.
 Controles de inicio de sesión: Estos controles son el soporte de formularios de uthentication, en el
modelo de ASP.NET para autenticación de usuarios contra una base de datos y el seguimiento de su
estado. En vez de escribir sus propias interfaces para trabajar con la autenticación de formularios,
puede utilizar estos controles para obtener precompilados, páginas de acceso personalizables, la
recuperación de la contraseña y el usuario, asistentes para la creación de usuarios.
 Controles partes Web: Este conjunto de controles soporta WebParts, un modelo de ASP.NET para
la construcción por componentes, portales web altamente configurables.
 Controles ASP.NET AJAX: Estos controles permiten el uso de técnicas Ajax en sus páginas web sin
forzar a escribir código del lado del cliente.
 Controles de ASP.NET Mobile: Este es un conjunto de controles que se asemeja a los controles
Web, pero están personalizados para apoyar a los clientes móviles como PDAs, teléfonos
inteligentes, y otros dispositivos móviles, adaptando las páginas a las normas de marcado como
HTML 3.2 o WML 1.1. Los controles móviles son muy adaptables, lo que significa que cuando se crea
una página utilizando estos controles, la página se puede representar de varias maneras totalmente
diferentes, dependiendo del dispositivo que está accediendo a la página.
Jerarquía de controles de servidor
Todos los controles de servidor se derivan de la clase base Control en el espacio de nombres (namespace)
System.Web.UI.



Debido a que todos los controles derivan de la clase base Control, tienen un denominador común básico
que puede utilizar para manipular cualquier control de la página, incluso si usted no sabe el tipo de control
específico.
Propiedades de la clase Control

Propiedad Descripción

ClientID Devuelve el identificador del control, que es un nombre único creado por ASP.NET
en el momento que la página es instanciada.

Controls Devuelve la colección de controles secundarios. Usted puede utilizar la colección
Page.Controls para conseguir una colección de alto nivel de los controles en la
página. Cada control de la colección Controls puede contener sus propio controles
hijo, y los controles hijo pueden contener a su vez sus propios controles hijos, y así
sucesivamente.

EnableViewState Devuelve o establece un valor booleano que indica si el control debe mantener su
estado a través de las devoluciones de datos de la página principal. Esta propiedad
es true por defecto.

ID Devuelve o establece el identificador del control. En la práctica, este es el nombre
por el cual se puede acceder al control desde los scripts de servidor o de la clase de
código subyacente.

Page Devuelve una referencia al objeto de página que contiene el control.

Parent Devuelve una referencia al control principal del control, que puede ser la página u
otro control contenedor.

Visible Devuelve o establece un valor booleano que indica si el control debe ser
presentado. Si es false, el control se hace invisible en el lado del cliente, la etiqueta



HTML correspondiente no se genera.

Métodos de la clase Control

Método Descripción

DataBind() Enlaza el control y todos sus controles secundarios al origen de datos o expresión.

FindControl() Busca un control hijo con un nombre específico en el control actual y todos los
controles contenidos. Si el control hijo se encuentra, el método devuelve una
referencia de tipo general del control. A continuación, puede lanzar este control
para el tipo adecuado.

HasControls() Devuelve un valor booleano que indica si este control tiene controles secundarios.
El control debe ser un contenedor para tener controles secundarios (como una
etiqueta <div>).

Render() Escribe la salida HTML para el control basado en su estado actual. No se puede
llarmar a este método directamente. En cambio, ASP.NET lo llama cuando la
página está siendo presentada.

HTML Server Controls (Controles de servidor HTML)

En total, hay alrededor de 20 diferentes clases de controles de servidor HTML. Están divididos en categorías
distintas en función de si son controles de entrada (en cuyo caso se derivan de HtmlInputControl) o pueden
contener otros controles (en cuyo caso se derivan de HtmlContainerControl).



La clase HtmlControl

Todos los controles de servidor HTML derivan de la clase base HtmlControl. La siguiente tabla muestra las
propiedades que la clase HtmlControl añade a la clase base de Control.

Propiedades


Attributes Le permite acceder a otras páginas de atributos en la etiqueta de control. Puede
utilizar esta colección para agregar atributos que no son expuestos por las
propiedades específicas.

Disabled Devuelve o establece el estado desactivado del control. Si es true, el control suele
mostrarse como "en gris" y no es utilizable.

Style Devuelve una colección de atributos CSS que se aplican para el control.



TagName Devuelve el nombre de la etiqueta de control, tales como a, img, etc.

La clase HtmlContainerControl

Cualquier etiqueta HTML que tiene tanto una etiqueta de apertura y una de cierre pueden incluir contenido
HTML o de otros controles. Un ejemplo es la etiqueta de anclaje, que por lo general ajusta el texto o una
imagen con las etiquetas <a> ... </ a>. Muchas otras etiquetas HTML también funcionan como
contenedores, incluyendo todo, desde la etiqueta <div> (que le permite dar formato a un bloque de
contenido) a los humildes <b> etiqueta (que se aplica el formato de negrita). Estas etiquetas no se asignan a
clases específicas de control de servidor HTML, pero todavía se puede utilizar con el atributo runat =
"server". En este caso, interactuas con ellos mediante la clase HtmlGenericControl, que a su vez deriva de
HtmlContainerControl.

Para soportar la contención, la clase HtmlContainerControl añade las dos propiedades que se muestran a
continuación.

Propiedades


InnerHtml Devuelve o establece el texto HTML en las etiquetas de apertura y de cierre.
Cuando se utiliza esta propiedad, todos los caracteres se dejan como son. Esto
significa que puede integrar el formato HTML (texto en negrita, agregando saltos
de línea, y así sucesivamente).

InnerText Devuelve o establece el texto dentro de la etiquetas de apertura y de cierre.
Cuando se utiliza esta propiedad, cualquier carácter que se interprete como
sintaxis HTML especial, se reemplazarán automáticamente con las entidades
HTML equivalentes.

La clase HtmlInputControl

Los controles de entrada HTML permite la interacción del usuario. Estos incluyen las casillas de verificación,
cuadros de texto, botones y cuadros de lista. Todos estos controles se generan con la etiqueta <input>. El
atributo type indica el tipo de control de entrada, como en <input type="text"> (un cuadro de texto), <input
type="submit"> (un botón), y <input type="file"> ( los controles para subir un archivo).

Propiedades




Type Obtiene el tipo de un HtmlInputControl. Por ejemplo, si esta propiedad está
establecida a text, el HtmlInputControl es un cuadro de texto para la entrada de
datos.

Value Obtiene o establece el valor asociado a un control de entrada. El valor asociado a
un control depende del tipo de control. Por ejemplo, en un cuadro de texto esta
propiedad contiene el texto introducido en el control. Para los botones, esta define
el texto en el botón.

Las clases de controles de servidor HTML

Declaración de etiqueta Clase .NET Miembros específicos

<a runat="server"> HtmlAnchor HRef, Target, Title, Name,
ServerClick event

<button runat="server"> HtmlButton CausesValidation,
ValidationGroup, ServerClick
event

<form runat="server"> HtmlForm Enctype, Method, Target,
DefaultButton, DefaultFocus

<img runat="server"> HtmlImage Align, Alt, Border, Height,
Src, Width

<input type="button" runat="server"> HtmlInputButton Type, Value,
CausesValidation,
event

<input type="reset" runat="server"> HtmlInputReset Type, Value

<input type="submit" runat="server"> HtmlInputSubmit Type, Value,
CausesValidation,
event

<input type="checkbox" runat="server"> HtmlInputCheckBox Checked, Type, Value,
ServerClick event



<input type="file" runat="server"> HtmlInputFile Accept, MaxLength,
PostedFile, Size, Type, Value

<input type="hidden" runat="server"> HtmlInputHidden Type, Value, ServerChange
event

<input type="image" runat="server"> HtmlInputImage Align, Alt, Border, Src, Type,
Value, CausesValidation,
event

<input type="radio" runat="server"> HtmlInputRadioButton Checked, Type, Value,
ServerChange event

<input type="text" runat="server"> HtmlInputText MaxLength, Type, Value,
ServerChange event

<input type="password" runat="server"> HtmlInputPassword MaxLength, Type, Value,
ServerChange event

<select runat="server"> HtmlSelect Multiple, SelectedIndex,
Size, Value, DataSource,
DataTextField,
DataValueField, Items
(collection),
ServerChange event

<table runat="server">, HtmlTable Align, BgColor, Border,
<td runat="server"> BorderColor,
CellPadding,
CellSpacing, Height,
NoWrap, Width, Rows
(collection)

<th runat="server"> HtmlTableCell Align, BgColor, Border,
BorderColor, ColSpan,
Height, NoWrap,
RowSpan, VAlign, Wid



<tr runat="server"> HtmlTableRow Align, BgColor, Border,
BorderColor, Height,
VAlign, Cells (collection)

<textarea runat="server"> HtmlTextArea Cols, Rows, Value,
ServerChange event

Cualquier otra etiqueta HTML con el HtmlGenericControl Ninguno
atributo runat = "server"

Web Controls (Controles Web)
Los controles de servidor HTML proporcionan una forma relativamente rápida para migrar a ASP.NET, pero
no necesariamente la mejor manera. Por un lado, los nombres de los controles HTML y sus atributos no
siempre son intuitivos, y no tienen el mismo soporte en tiempo de diseño para conectar los controladores
de eventos. Los controles HTML también tienen ciertas limitaciones, tales como las propiedades de estilo
que se debe establecer a través de la sintaxis CSS (que es más difícil que establecer una propiedad directa) y
que los eventos de cambio no pueden ser aplicados hasta que se realice una operación de posted back en
respuesta a otra acción. Por último, los controles de servidor HTML no pueden proveer elementos de
interfaz de usuario que no estén ya definidos en el estándar HTML. Si desea crear algún tipo de control
global que utiliza una combinación de elementos HTML para hacer una interfaz compleja, tienes que crearlo
tú mismo.

Para abordar estas cuestiones, ASP.NET proporciona un modelo de mayor nivel de control web. Todos los
controles web se definen en el espacio de nombres System.Web.UI.WebControls y se derivan de la clase
base WebControl, que ofrece un modelo más abstracto y coherente que los controles de servidor HTML.
Los controles Web también permiten funciones adicionales, como la devolución automática. Pero la parte
realmente importante es que no muchos controles no sólo mapean una etiqueta HTML única, sino que
generan una salida más complejo formado por varias etiquetas de código HTML y JavaScript. Los ejemplos
incluyen las listas de casillas de verificación, botones de radio, calendarios, cuadrículas editable, y así
sucesivamente.



La clase base WebControl

Todos los controles Web heredan de la clase WebControl. La clase WebControl también a su vez deriva de
Control. Como resultado, muchas de sus propiedades y métodos -tales como Controls, Visible y
FindControl()- son similares a los de los controles de servidor HTML. Sin embargo, la clase WebControl
agrega las propiedades que aparecen a continuación en la tabla.

Propiedades de la clase WebControl


AccessKey Devuelve o establece el método abreviado de teclado que permite al usuario
desplazarse rápidamente al control. Por ejemplo, si se define como A, el usuario
puede mover el foco a este control pulsando Alt + A.

BackColor Devuelve o establece el color de fondo.

BorderColor Devuelve o establece el color del borde.

BorderStyle Uno de los valores de la enumeración BorderStyle, incluyendo Dashed, Dotted,



Double, Groove, Ridge, Inset, Outset, Solid, y None.

BorderWidth Devuelve o establece el ancho del borde.

CssClass Devuelve o establece el estilo CSS para asociar con el control. El estilo CSS se
puede definir en una sección de <style> en la parte superior de la página o en un
archivo CSS independiente que hace referencia la página.

Enabled Devuelve o establece el estado habilitado del control. Si es false, el control suele
mostrarse en gris y no es utilizable.

Font Devuelve un objeto con toda la información de estilo de la fuente utilizada para el
texto del control.

ForeColor Devuelve o establece el color de primer plano, por ejemplo el texto del control.

Height Devuelve o establece la altura del control.

TabIndex Un número que le permite controlar el orden de tabulación. El control con un
TabIndex de 0 tiene el foco cuando la página se carga por primera vez. Al pulsar
Tab mueve al usuario el control con el TabIndex siguiente más baja, siempre que
esté activado. Esta propiedad sólo es compatible en Internet Explorer 4.0 y
superior.

Tooltip Muestra un mensaje de texto cuando el usuario pasa el ratón por encima del
control. Muchos de los navegadores más antiguos no soportan esta característica.

Width Devuelve o establece el ancho del control.

Las clases básicas de Web Controls

ASP.NET incluye controles Web que duplican cada control de servidor HTML y ofrecen la misma
funcionalidad. Estos controles web heredan de WebControl y añaden sus propias propiedades y eventos. En
la tabla siguente se resume estos controles.

Declaración de HTML Generado Miembros específicos
etiqueta ASP.NET

<asp:Button> <input type="submit"/> or Text, CausesValidation, PostBackUrl,
<input type="button"/> ValidationGroup, Click event

<asp:CheckBox> <input type="checkbox"/> AutoPostBack, Checked, Text,



TextAlign, CheckedChanged event

<asp:FileUpload> <input type="file"> FileBytes, FileContent, FileName,
HasFile, PostedFile, SaveAs()

<asp:HiddenField> <input type="hidden"> Value

<asp:HyperLink> <a>...</a> ImageUrl, NavigateUrl, Target, Text

<asp:Image> <img/> AlternateText, ImageAlign, ImageUrl

<asp:ImageButton> <input type="image"/> CausesValidation, ValidationGroup,
Click event

<asp:ImageMap> <map> HotSpotMode, HotSpots (collection),
AlternateText, ImageAlign, ImageUrl

<asp:Label> <span>...</span> Text, AssociatedControlID

<asp:LinkButton> <a><img/></a> Text, CausesValidation, Validation-
Group, Click event

<asp:Panel> <div>...</div> BackImageUrl, DefaultButton,
GroupingText, HorizontalAlign,
Scrollbars, Wrap

<asp:RadioButton> <input type="radio"/> AutoPostBack, Checked, GroupName,
Text, TextAlign, CheckedChanged event

<asp:Table> <table>...</table> BackImageUrl, CellPadding,
CellSpacing, GridLines,
HorizontalAlign, Rows (collection)

<asp:TableCell> <td>...</td> ColumnSpan, HorizontalAlign,
RowSpan, Text, VerticalAlign, Wrap

<asp:TableRow> <tr>...</tr> Cells (collection), HorizontalAlign,
VerticalAlign



<asp:TextBox> <input type="text"/> or AutoPostBack, Columns, MaxLength,
<textarea>...</textarea> ReadOnly, Rows, Text, TextMode, Wrap,
TextChanged event

Manejando eventos de controles web

Los eventos del lado del servidor trabajan de la misma forma que los eventos de servidor de los controles de
servidor HTML. En lugar de ServerClick, hay un evento Click, y en lugar de los eventos genéricos
ServerChange hay eventos específicos, como CheckedChanged (para el RadioButton y CheckButton) y
TextChanged (para el cuadro de texto), pero el comportamiento sigue siendo el mismo.

El evento Click y el control ImageButton

Un control que envía información adicional es el control ImageButton. Envía un objeto especial
ImageClickEventArgs (del espacio de nombres System.Web.UI) que proporciona propiedades X y Y que
representan la ubicación en donde la imagen fue clikeada. Con esta información adicional, puede crear un
mapa de imagen del lado del servidor.

Los controles List

Los controles List son controles web especializados que generan cuadros de lista, listas desplegables, y
otros controles de repetir que puede ser enlazado a un origen de datos (como una base de datos o una
colección no modificable de valores) o mediante programación rellenados de elementos. La mayoría de los
controles de lista permiten al usuario seleccionar uno o más elementos, pero el BulletedList es una
excepción -se muestra una lista estática numerada o con viñetas. La siguiente tabla muestra todos los
controles list.

Control Descripción

<asp:DropDownList> Una lista desplegable poblado por una colección de objetos
<asp:ListItem>. En HTML, es renderiada por una etiqueta <select>
con el atributo size = "1".

<asp:ListBox> Un cuadro de lista poblada por una colección de objetos
<asp:ListItem>. En HTML, es renderiada por una etiqueta <select>
con el atributo size = "x", donde x es el número de elementos visibles.

<asp:CheckBoxList> Sus elementos se representan como casillas de verificación, alineadas
en una tabla con una o más columnas.

<asp:RadioButtonList> Igual que el <asp:CheckBoxList>, pero los elementos se representan
como botones de radio.



<asp:BulletedList> Una lista estática numerada o con viñetas. En HTML, se representan
con la etiqueta <ul> o <ol>. También puede utilizar este control para
crear una lista de hipervínculos.

Controles de validación de entrada

Uno de los usos más comunes de las páginas web (y la razón de que las etiquetas de formulario HTML se
creó por primera vez) es recoger datos. A menudo, una página web le pedirá a un usuario alguna
información y luego guardarlo en un base de datos de extremo. En casi todos los casos, estos datos deberán
ser validados para asegurar que no almacena información inútil, falsa, o contradictoria que podrían causar
problemas más adelante.

Idealmente, la validación de la entrada del usuario debería tener lugar en el lado del cliente para que el
usuario sea inmediatamente informado de que hay algo malo con la entrada antes de que el formulario sea
enviado de vuelta al servidor. Si este patrón se aplica correctamente, se ahorra los recursos del servidor y le
da al usuario una rápida reacción. Sin embargo, independientemente de si la validación del cliente se
realiza, los datos del formulario deben, también validarse en el lado del servidor. De lo contrario, un
atacante astuto podría hackear la página mediante la eliminación del JavaScript del lado del cliente que
valida la entrada, guardar la nueva página, y utilizarlo para enviar los datos falsos.

Escribir código de validación es una ardua tarea, sobre todo porque los modelos de programación del lado
del cliente (normalmente JavaScript) y programación del servidor (en este caso, ASP.NET) son muy
diferentes. Los desarrolladores de Microsoft son muy conscientes de esto, así que, además del conjunto de
HTML y controles Web, también se desarrolló un conjunto de controles de validación. Estos controles
pueden ser declarados en un formulario web y luego aplicados a algún control de entrada. Una vez unido a
un control de entrada, realiza el control de validación automática del lado del cliente y validación en el
servidor. Si el control correspondiente está vacío, no contiene el tipo de datos correctos, o no se adhieren a
las normas especificadas, el validador va a impedir que la página sea enviada de vuelta por completo.

Controles de validación

ASP.NET incluye seis controles de validación. Estos controles realizan una buena parte del trabajo pesado
para usted, y permite racionalizar el proceso de validación y le ahorra de tener que escribir tedioso código.
Aún mejor, los controles de validación son lo suficientemente flexibles para trabajar con reglas definidas a
medida, lo que hace tu código más reusable y modular.

Control de validación Descripción

<asp:RequiredFieldValidator> Comprueba que el control que ha de validar no está vacío
cuando se envía el formulario.

<asp:RangeValidator> Comprueba que el valor del control asociado se encuentra en un rango
especificado. El valor y el rango puede ser numérica - una fecha o una



cadena.

<asp:CompareValidator> Comprueba que el valor del control asociado coincide con una
comparación especificada (menor que, mayor que, y así
sucesivamente) contra otro valor constante o control.

<asp:RegularExpressionValidator> Comprueba si el valor del control que tiene que validar coincida con la
expresión regular especificada.

<asp:CustomValidator> Sirve para especificar cualquier rutina de validación de JavaScript lado
del cliente y su homólogo del lado del servidor para llevar a cabo su
propia lógica de validación personalizada.

<asp:ValidationSummary> Muestra un resumen con los mensajes de error para cada uno validador
fallado de la página (o en un mensaje cuadro emergente).

Aplicaciones ASP.NET
Anatomía de una Aplicación ASP.NET

La diferencia entre las aplicaciones ASP.NET y las aplicaciones de cliente enriquesido tiene mucho sentido
cuando se considera el modelo de ejecución de ASP.NET. A diferencia de una aplicación de Windows, el
usuario final nunca ejecuta una aplicación ASP.NET directamente. Por el contrario, un usuario inicia un
navegador como Internet Explorer y solicita una URL específica (como
http://www.mysite.com/mypage.aspx) sobre HTTP. Esta petición es recibida por un servidor web. Cuando
se está depuración la aplicación en Visual Studio, se puede utilizar sólo un servidor de prueba local. Al
implementar la aplicación, se utiliza el servidor web IIS.

El servidor Web no tiene ningún concepto de las aplicaciones por separado simplemente pasa la solicitud al
proceso de trabajo de ASP.NET. Sin embargo, el proceso de trabajo de ASP.NET cuidadosamente segrega
la ejecución de código en diferentes dominios de aplicación basado en el directorio virtual. Páginas Web que
se alojan en el mismo directorio virtual (o uno de sus subdirectorios) se ejecutan en el mismo dominio de
aplicación. Páginas Web en diferentes directorios virtuales se ejecutan en dominios de aplicación diferentes.

El dominio de Aplicación

Un dominio de aplicación es un límite impuesto por el CLR que asegura que una aplicación no puede influir
(o ver en los datos en memoria) de otro. Las siguientes características son una consecuencia directa del
modelo de dominio de aplicación:

 Todas las páginas web en una simple aplicaciones web tienen los mismo recursos de memoria, tales
como datos globales de aplicación, datos de sesión de usuario, y los datos almacenados en caché. Esta
información no es accesible directamente a ASP.NET o aplicaciones ASP.
 Todas las páginas web en una simple aplicaciones web tienen la misma configuración básicas. Sin
embargo, puede personalizar algunos parámetros de configuración en subdirectorios individuales del
mismo directorio virtual. Por ejemplo, puede establecer un único mecanismo de autenticación para una



aplicación web, sin importar cuántos subdirectorios tenga. Sin embargo, puede establecer las reglas de
autorización diferentes en cada directorio para afinar quién está autorizado para acceder a los
diferentes grupos de páginas.
 Todas las aplicaciones web de aumentar los eventos de aplicación global en las diferentes etapas
(cuando el dominio de aplicación se creó por primera vez, cuando es destruido, y así sucesivamente).
Puede conectar los controladores de eventos que reaccionar ante estos eventos de la aplicación global
utilizando el código en el archivo Global.asax en el directorio virtual de la aplicación.
El directorio virtual es la estructura deagrupación de base que delimita de una aplicación ASP.NET. Se
puede crear una aplicación ASP.NET legítima con una sola página web (. Aspx). Sin embargo, las
aplicaciones ASP.NET pueden incluir todos los siguientes elementos:

 Las páginas Web (archivos .aspx): Estas son las piedras angulares de cualquier aplicación ASP.NET.
 Servicios Web (.asmx): Estos permiten compartir las funciones útiles con aplicaciones en otros equipos
y otras plataformas.
 Archivos de código subyacente (Code-behind): Dependiendo del modelo de código que está usando,
también puede tener por separado los archivos de código fuente. Si estos archivos están codificados en
C #, tienen la extensión .cs.
 Un archivo de configuración (Web.config): Este archivo contiene una serie de ajustes de nivel de
aplicación que configuran todo desde la seguridad a la depuración y la gestión del Estado.
 global.asax: Este archivo contiene los controladores de eventos que reaccionan a los eventos de
aplicación global.
 Otros componentes: Estos son ensamblados compilados que contienen componentes separados que
ha desarrollado o componentes de terceros con una funcionalidad útil. Los componentes permiten
separar los negocios y la lógica de acceso a datos y crear controles personalizados.

Aplicación LifeTime (Tiempo de vida de la aplicación)

ASP.NET utiliza una técnica de inicialización perezosa (lazy initialization) para la creación de dominios de
aplicación. Esto significa que el dominio de aplicación para una aplicación web se crea la primera vez que se
recibe una solicitud para una página en dicha solicitud.

Un dominio de aplicación puede cerrarse por una variedad de razones, incluyendo si el servidor web propio
se apaga. Pero, más comúnmente, las aplicaciones, se reinician a sí mismas en nuevos dominios de
aplicación en respuesta a las condiciones de error o cambios de configuración. Este modelo está diseñado
para mantener una aplicación sana y para detectar características que podrían indicar que un problema se
ha desarrollado o el rendimiento de la aplicación ha degradado (como una larga cola de solicitudes
pendientes, una gran cantidad de memoria en uso, y así por el estilo). Dependiendo de la configuración
machine.config, dominios de aplicación puede ser reciclados basado en el tiempo que el dominio de
aplicación ha estado funcionando, el número de solicitudes en cola, o la cantidad de memoria-

ASP.NET recicla automáticamente los dominios de aplicación al cambiar la aplicación. Un ejemplo de ello es
si modifica el archivo Web.config. Otro ejemplo es si se reemplaza una página web ya existente archivo o
archivos DLL de ensamblado. En ambos casos, ASP.NET inicia un nuevo dominio de aplicación para manejar



todas las futuras solicitudes y mantiene el dominio de aplicación existente con vida el tiempo suficiente para
terminar la manipulación de todas las solicitudes pendientes (incluidas las solicitudes en cola).

Actualizaciones de la aplicación

Una de las características más notables sobre el modelo de ejecución de ASP.NET es que se puede
actualizar la aplicación web sin necesidad de reiniciar el servidor web y sin preocuparse de dañar los clientes
existentes. Esto significa que usted puede agregar, sustituir o eliminar archivos en el directorio virtual en
cualquier momento.

ASP.NET a continuación, realiza la misma transición a un nuevo dominio de aplicación que se realiza cuando
se modificar el archivo de configuración web.config.



Construyendo Sitios Web ASP.NET
Una vez conocido el proceso de creación páginas web, se comenzará a considerar el desarrollo a mayor nivel
-en otras palabras, la forma de agrupar un gran número de páginas web, para formar un sitio web
cohesionado e integrado. En las actividades de aprendizaje desarrolladas ya se han estudiado algunos de los
fundamentos del desarrollo web con ASP.NET y C#. Sin embargo, los programadores web, deben enfrentar
a algunas consideraciones más, tales como velar por la seguridad, por la coherencia en todas las páginas y la
racionalización de la navegación web.
En esta actividad de aprendizaje, se abordan los temas que se convierten en importantes cuando se deja de
pensar en las páginas individuales y comienza la planificación de una aplicación web completa.
En primer lugar, se verá la creación de controles de usuario y luego como construir aplicaciones web
sofisticadas, con dos herramientas más: Los temas, que permiten establecer las propiedades de control de
forma automática, y las páginas maestras, que le permiten volver a utilizar un único modelo para
estandarizar la distribución y el contenido de varias páginas. En conjunto, estas tres herramientas
garantizan que la aplicación web, aparezca como un todo único y coherente. Finalmente se abordará el
tema de la seguridad en aplicaciones ASP.NET.

Users Controls (Controles de Usuario)
El conjunto básico de controles ASP.NET es amplio e impresionante. Incluye controles que encapsulan
etiquetas HTML básicas y los controles que ofrecen un rico y nivel de diseño, tales como el Calendar,
TreeView, y los controles de datos. Por supuesto, incluso el mejor conjunto de controles no pueden
satisfacer las necesidades de cada desarrollador. Tarde o temprano, usted querrá darle un toque personal a
sus aplicaciones, y construir sus propios componentes de interfaz de usuario. En .NET, pueden desarrollarse
los siguientes:
• Controles de usuario: un control de usuario es una pequeña sección de una página que puede incluir
código HTML estático y controles de servidor Web. La ventaja de los controles de usuario es que
una vez que crear uno, se puede reutilizar en varias páginas en la misma aplicación web. Incluso
puede añadir sus propias propiedades, eventos, y métodos.
• Controles de servidor personalizados: son clases compiladas que generan programáticamente su
propio código HTML. A diferencia de los controles de usuario (que se declaran como páginas web en
forma de un archivo de texto sin formato), los controles de servidor siempre se precompilan en
ensamblados DLL.
Los archivos de control del usuario (.ascx), son similares a los archivos ASP.NET web form (.aspx) archivos.
Al igual que los formularios web, los controles de usuario se componen de una parte de interfaz de usuario
con las etiquetas de control (el archivo .ascx) y se puede utilizar secuencias de comandos en línea o un
archivo .cs de código subyacente. Las principales diferencias entre los controles de usuario y las páginas
web son las siguientes:
 Los controles de usuario comienza con una directiva de control en lugar de una directiva de página.
 Los controles de usuario utilizar la extensión de archivo .ascx en lugar de .aspx, y sus archivos de
código subyacente hereda de la clase System.Web.UI.UserControl. De hecho, la clase UserControl y
la clase Page heredan de la misma clase TemplateControl, por lo que comparten muchos métodos y
eventos.



 Los controles de usuario no puede ser solicitada directamente por el navegador cliente. (ASP.NET
dará un mensaje de error genérico para cualquiera que lo intente). En cambio, los controles de
usuario están incorporados dentro de otras páginas web.

Navegación en el Sitio Web
La navegación es un componente fundamental de cualquier sitio web. Aunque es bastante fácil de transferir
al usuario de una página a otra, la creación de un sistema unificado de navegación que funciona a través de
un sitio web completo requiere más esfuerzo. Mientras que usted puede construir su propio sistema de
navegación con algunos enlaces (y mucho trabajo), ASP.NET dispone de un sistema integrado de
navegación que facilita la navegación en el sitio web.

Páginas con múltiples vistas
La mayoría de los sitios web dividen las tareas en varias páginas. Por ejemplo, si desea agregar un artículo a
su carrito de la compra y llevarlo a la caja en un sitio de e-commerce, tendrás que saltar de una página a
otra. Este es el método más limpio, y es fácil de programar, siempre que utilice algún tipo de técnica de
gestión de estado para transferir información de una página a otra.
En otras situaciones, es posible que desee insertar el código de varias páginas diferentes dentro de una sola
página. Por ejemplo, es posible que desee proporcionar distintas vistas de los mismos datos (por ejemplo,
una vista basada en cuadrícula y una vista de basada en gráfico) y permitirle al usuario cambiar de una vista
a otra sin salir de la página. O bien, es posible que desee manejar una tarea de varios pasos pequeños (como
el suministro de información de usuario de una cuenta en un proceso de registro), sin tener que preocuparse
acerca de cómo transferir la información pertinente entre las páginas web.
En ASP.NET 1.x, la única manera de modelar una página con múltiples vistas fue la de añadir varios
controles Panel a una página de modo que cada panel representa una vista única o una sola etapa. A
continuación, puede establecer la propiedad Visible de cada panel de manera que sólo se ve uno a la vez. El
problema con este enfoque es que estorba su página con código adicional para la gestión de los paneles.
Además, no es muy robusta, con un pequeño error, puede terminar con dos paneles que muestran al mismo
tiempo.
Con ASP.NET 4, no hay necesidad de diseñar su propio sistema de visión múltiple desde cero. En su lugar,
puede utilizar uno de los dos controles de alto nivel que hacen estos diseños mucho más fáciles: MultiView y
Wizard.

El control MultiView
El control MultiView es el más simple de los dos controles de vista múltiples. Esencialmente, el control
MultiView proporciona una forma de declarar múltiples vistas y mostrar sólo una a la vez.
La creación de un MultiView es sencillo. Debe agregar la etiqueta <asp:MultiView> a su archivo de
página .aspx y luego agregar una etiqueta <asp:View> al interior de cada vista por separado.

<asp:MultiView ID="MultiView1" runat="server">
<asp:View ID="View1" runat="server">...</asp:View>
</asp:MultiView>



El MultiView.ActiveViewIndex determina qué vista se muestra. Este es la única vista que se representa en
la página. El valor ActiveViewIndex predeterminado es -1, que significa que no se muestra ninguna vista.

El control Wizard
El control Wizard es una versión más glamurosa del control MultiView. Además de soportar que se muestre
una de varias vistas a la vez, incluye una buena cantidad comportamiento personalizables, incluyendo
botones de navegación, una barra con enlaces a pasos, estilos y plantillas.
Por lo general, los asistentes representan una sola tarea, y el usuario se mueve linealmente a través de ellos,
moviéndose desde el paso actual al que le sigue inmediatamente (o el inmediatamente anterior en el caso
de una corrección). El control ASP.NET Wizard también es compatible con la navegación no lineal, lo que
significa que le permite decidir hacer caso omiso de un paso sobre la base de la información que el usuario
proporciona.
Por defecto, el control Wizard proporciona botones de navegación y una barra lateral con enlaces para cada
paso de la izquierda. Puede ocultar la barra lateral, estableciendo la propiedad Wizard.DisplaySideBar como
falso.
Para crear un asistente en ASP.NET, sólo tiene que definir los pasos de su contenido mediante etiquetas
<asp:WizardStep>. Cada paso lleva unas cuantas piezas básicas de información.

Mapas de sitio
Cuando un sitio web cuenta con una buena cantidad de páginas, es necesario implementar algún tipo de
esitea de navegación que permita al usuario pasar de una página a otra. Obviamente, se puede utilizar el kit
de herramientas de controles ASP.NET para implementar casi cualquier sistema de navegación, pero
todavía requiere que usted realice todo el trabajo duro. Afortunadamente, ASP.NET incluye un conjunto de
funciones de navegación que se pueden utilizar para simplificar considerablemente la tarea. Al igual que con
todas las mejores características de ASP.NET, la navegación ASP.NET es flexible, configurable y
enchufable. Se compone de tres componentes:
 Una manera de definir la estructura de navegación de su sitio web. Esta parte es el mapa del sitio
XML, que es (por defecto) almacenado en un archivo.
 Una manera conveniente de analizar el archivo de mapa del sitio y convertir la información en un
modelo de objeto adecuado. Esta parte se realiza por el control SiteMapDataSource y el
XmlSiteMapProvider.
 Una manera de utilizar la información del mapa del sitio para mostrar la posición actual del usuario y
ofrecer al usuario la capacidad de moverse fácilmente de un lugar a otro. En esta parte se
proporciona a través de los controles que se unen con el control SiteMapDataSource, que pueden
incluir enlaces, listas, menús, y los árboles.

Definiendo un Site Map
El punto de partida para la navegación web basad mapa de sitio es el proveedor del mapa del sitio. ASP.NET
incluye un proveedor de mapa de sitio único, llamado XmlSiteMapProvider, que es capaz de recuperar la
información del mapa sitio a partir de un archivo XML. Si desea recuperar un mapa del sitio desde otro lugar
o en un formato personalizado, tendrá que crear su propio proveedor de mapa de sitio.



El XmlSiteMapProvider busca un archivo denominado Web.sitemap en la raíz del directorio virtual. Al igual
que todos los proveedores del mapa del sitio, su tarea consiste en extraer los datos del mapa del sitio y crear
el objeto SiteMap correspondiente. Este objeto SiteMap se ponen a disposición de otros controles a través
de la SiteMapDataSource.
Para implementar un mapa de sitio, es necesario empezar por la creación de un archivo Web.sitemap y la
definición de la estructura del sitio web utilizando la <siteMap> y elementos <siteMapNode>. Para agregar
un mapa del sitio con Visual Studio, seleccione Sitio ➤ Agregar nuevo elemento (o Proyecto ➤ Agregar
nuevo elemento en un proyecto web), seleccione la plantilla Mapa de sitio y, a continuación, haga clic en
Agregar.
La estructura básica de un archivo de mapa de sitio es:

<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0">
<siteMapNode>
<siteMapNode>...</siteMapNode>
<siteMapNode>...</siteMapNode>
...
</siteMapNode>
</siteMap>

El control TreeView
El TreeView es uno de los controles de navegación más impresionantes. No sólo le permiten representar las
vistas de árbol, si no también soporta el llenado parcial del árbol bajo demanda (y sin actualizar la página
entera). Pero lo más importante, es compatible con una amplia gama de estilos que pueden transformar su
apariencia.
Al establecer sólo unas propiedades básicas, se puede cambiar el TreeView de un índice de temas de ayuda
para obtener una lista de directorios de archivos y carpetas. De hecho, el TreeView no tiene por qué ser
interpretada como un árbol en absoluto, sino que también puede hacer frente a datos jerárquicos, como una
tabla de contenidos con la aplicación de sólo unos pocos ajustes de estilo.
TreeView se puede utilizar para mostrar datos XML enlazados. También para mostrar los datos de mapas
del sitio. Ambos ejemplos utilizan la capacidad de la TreeView para unirse a fuentes de datos jerárquicos.
Pero también se puede llenar un control TreeView mediante la unión a un origen de datos común (en cuyo
caso obtendrá sólo un único nivel de nodos) o mediante la creación manual de los nodos, ya sea mediante
programación o a través de declaraciónes. aspx.
La última opción es la más sencilla. Por ejemplo, mediante la adición de etiquetas <asp:TreeNode> a la
sección <Nodes> de un control TreeView, puede crear varios nodos:

<asp:TreeView ID="TreeView1" runat="server">
<Nodes>
<asp:TreeNode Text="Productos">
<asp:TreeNode Text="Hardware"/>
</asp:TreeNode>
<asp:TreeNode Text="Servicios"/>
</Nodes>
</asp:TreeView>



El control Menu
El control Menu es otro control poderoso que soporta datos jerárquicos. Al igual que el TreeView, puede
enlazar el menú a una fuente de datos, o puede llenar los elementos a mano (mediante declaraciones o
programación) utilizando objetos MenuItem.
La clase MenuItem no es tan rica como la clase TreeNode, por ejemplo, los objetos MenuItem no son
compatibles con casillas de verificación o la posibilidad de establecer mediante programación el estado
desplegado / contraído. Sin embargo, todavía tienen muchas propiedades similares, incluidas las de
creación de imágenes, la determinación de si el elemento se puede seleccionar y especificar un enlace de
destino.

Temas y Master Pages (Páginas Maestras)
La construcción de una aplicación web profesional implica mucho más que el diseño de páginas web
individuales. Usted también necesita las herramientas para integrar sus páginas web en un completo y
unificado sitio web. A continuación veremos dos características importantes de ASP.NET para realizar esta
tarea.
La primer característica llamada temas (estilos), permiten definir los detalles de formato para los diversos
tipos de controles y la reutilización de estos formatos a la perfección en varias páginas. Temas hacen mucho
más fácil de estandarizar el aspecto de su sitio web y modificarlo más tarde. Una vez que un tema esté
establecido, usted puede dar a su sitio web un nuevo aspecto con sólo cambiar la definición del tema.
Una innovación más impresionante son las páginas maestras (master pages), que le permiten crear
plantillas de página reutilizables. Uso de una página principal, puede definir el diseño de sus páginas web,
completo con todos los detalles habituales, tales como cabeceras, barras de menús y banners publicitarios.
Una vez que haya formalizado esta estructura, puede utilizar la página principal a través de su página web,
asegurando que todas las páginas tienen el mismo diseño. Los visitantes pueden navegar a continuación, de
una sección a otra sin notar ningún cambio.

Hojas de estilo en cascada
El primer paso a seguir para crear una perfecta unificación del sitio web, es adoptar un estilo visual
coherente. En otras palabras, estandarizar. Si desea modificar la fuente o el borde de un botón, asegúrese
de cambiar para cada botón que incluya. Ser consecuente no es siempre fácil. Para ayudar a administrar los
detalles, se puede utilizar CSS o temas.
CSS ofrece una solución multiplataforma para el formato de las páginas web que funciona en conjunción
con HTML o XHTML y es soportada por prácticamente todos los navegadores modernos. De hecho, las
primeras versiones de Visual Studio Styles.css automáticamente generaban un archivo para que usted
pueda utilizarlo en su sitio web.
Usando hojas de estilo logra dos cosas. En primer lugar, estandariza el diseño para que pueda formatear
páginas rápidamente, sin la introducción de pequeños errores o idiosincrasias. En segundo lugar, se separa
la información de formato para que no aparezca en absoluto en sus páginas web, lo que le permite modificar
el formato, sin rastrear a cada página o volver a compilar el código. Y aunque CSS no es un estándar central
de .NET, Visual Studio todavía proporciona un amplio soporte para él.


Modulo taller progwebaa2

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (15)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Modulo taller progwebaa2

Ähnlich wie Modulo taller progwebaa2 (20)

Modulo taller progwebaa2