modulo taller progwebaa2

37
TALLER DE PROGRAMACIÓN WEB Ing. David Gil

Upload: pabel-lopez

Post on 25-May-2015

1.503 views

Category:

Documents


8 download

DESCRIPTION

taller de programacion

TRANSCRIPT

Page 1: Modulo   taller progwebaa2

TALLER DE PROGRAMACIÓN WEB

Ing. David Gil

Page 2: Modulo   taller progwebaa2

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

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

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

Page 3: Modulo   taller progwebaa2

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

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.

Page 4: Modulo   taller progwebaa2

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

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

• 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

Page 5: Modulo   taller progwebaa2

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

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

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:

Page 6: Modulo   taller progwebaa2

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

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

• ¿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

Page 7: Modulo   taller progwebaa2

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

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

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

Page 8: Modulo   taller progwebaa2

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

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

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

Page 9: Modulo   taller progwebaa2

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

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

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 de soluciones)

Lista los archivos y subcarpetas que están en la carpeta de la aplicación 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.

Page 10: Modulo   taller progwebaa2

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

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

Server Explorer (Explorador de servidores)

Permite el acceso a bases de datos, los servicios del sistema, las colas de 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 Styles

Permite modificar los estilos en una hoja de estilos vinculados y 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

Page 11: Modulo   taller progwebaa2

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

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

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

Page 12: Modulo   taller progwebaa2

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

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

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:

Page 13: Modulo   taller progwebaa2

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

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

• 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

Page 14: Modulo   taller progwebaa2

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

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

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.

Page 15: Modulo   taller progwebaa2

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

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

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

Page 16: Modulo   taller progwebaa2

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

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

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).

Page 17: Modulo   taller progwebaa2

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

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

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

Propiedad Descripción

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.

Page 18: Modulo   taller progwebaa2

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

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

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

Propiedad Descripción

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

Propiedad Descripción

Page 19: Modulo   taller progwebaa2

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

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

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, ValidationGroup, ServerClick event

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

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

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

Page 20: Modulo   taller progwebaa2

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

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

<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, ValidationGroup, ServerClick 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">,

<td runat="server">

HtmlTable Align, BgColor, Border,

BorderColor,

CellPadding,

CellSpacing, Height,

NoWrap, Width, Rows

(collection)

<th runat="server"> HtmlTableCell Align, BgColor, Border,

BorderColor, ColSpan,

Height, NoWrap,

RowSpan, VAlign, Wid

Page 21: Modulo   taller progwebaa2

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

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

<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 atributo runat = "server"

HtmlGenericControl Ninguno

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.

Page 22: Modulo   taller progwebaa2

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

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

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

Propiedad Descripción

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,

Page 23: Modulo   taller progwebaa2

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

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

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 etiqueta ASP.NET

HTML Generado Miembros específicos

<asp:Button> <input type="submit"/> or

<input type="button"/>

Text, CausesValidation, PostBackUrl,

ValidationGroup, Click event

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

Page 24: Modulo   taller progwebaa2

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

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

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

Page 25: Modulo   taller progwebaa2

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

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

<asp:TextBox> <input type="text"/> or

<textarea>...</textarea>

AutoPostBack, Columns, MaxLength,

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.

Page 26: Modulo   taller progwebaa2

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

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

<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

Page 27: Modulo   taller progwebaa2

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

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

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

Page 28: Modulo   taller progwebaa2

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

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

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

Page 29: Modulo   taller progwebaa2

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

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

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.

Page 30: Modulo   taller progwebaa2

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

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

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.

Page 31: Modulo   taller progwebaa2

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

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

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:View ID="View2" runat="server">...</asp:View> <asp:View ID="View3" runat="server">...</asp:View>

</asp:MultiView>

Page 32: Modulo   taller progwebaa2

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

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

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.

Page 33: Modulo   taller progwebaa2

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

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

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:

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>

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

<siteMapNode>...</siteMapNode> <siteMapNode>...</siteMapNode> ...

</siteMapNode> </siteMap>

Page 34: Modulo   taller progwebaa2

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

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

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.

Page 35: Modulo   taller progwebaa2

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

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

Temas

Como CSS, los temas le permiten definir un conjunto de atributos de estilo que puede aplicar a los controles en varias páginas. Sin embargo, a diferencia de CSS, los temas no son ejecutadas por el navegador. En cambio, son soluciones ASP.NET nativas que se ejecutan en el servidor. Aunque los temas no sustituyen a los estilos, tienen algunas características que el CSS no puede proporcionar. Estas son las principales diferencias:

• Los Temas están basados en control y no basados en HTML: Como resultado de ello, los temas le permiten definir y reutilizar casi cualquier propiedad de control. Por ejemplo, los temas le permiten especificar un conjunto de imágenes nodo común y el uso en gran número de controles TreeView o para definir un conjunto de plantillas para varios controles GridView .CSS se limita a los atributos de estilo que se aplican directamente a HTML.

• Los temas se aplican en el servidor: cuando un tema se aplica a una página, la página de estilo final es enviado al usuario. Cuando se utiliza una hoja de estilo, el navegador recibe tanto la página y la información de estilo y luego los combina en el lado cliente.

• Los temas pueden ser aplicados a través de los archivos de configuración: Esto le permite aplicar un tema a una carpeta entera o a todo su sitio web, sin modificar una sola página web.

• Los Temas no son en cascada como CSS: Esencialmente, si se especifica una propiedad en un tema y en el control individual, el valor en el tema sobrescribe la propiedad en el control. Sin embargo, usted tiene la opción de cambiar este comportamiento y dar prioridad a las propiedades de la página, lo que hace que los temas se comporten más como hojas de estilo.

Master Page (Página Maestra)

Para proporcionar una solución práctica y flexible para las plantillas de página, una serie de requisitos deben cumplirse:

La capacidad de definir una porción de una página por separado y reutilizarlo en varias páginas.

La capacidad de crear un diseño bloqueado que define las regiones editables. Las páginas que reutilizan esta plantilla son entonces obligadas a añadir o modificar el contenido en las regiones permitidas.

La capacidad para permitir una cierta personalización de los elementos ha reutilizar en cada página.

La capacidad de enlazar una página con una plantilla de página de forma declarativa (sin código) o para enlazar con una página de forma dinámica en tiempo de ejecución.

La capacidad de diseñar una página que utiliza una plantilla de página con una herramienta como Visual Studio.

Las páginas maestras cumplen todos estos requisitos. Ofrecen un sistema de reutilización de plantillas, una manera de limitar que las plantillas sean modificadas, y un gran soporte en tiempo de diseño.

Para que esto funcione, ASP.NET define dos tipos especializados de páginas: las páginas maestras (master page) y páginas de contenido (content pages). Una página maestra es una plantilla de página. Al igual que una página Web ASP.NET ordinaria, esta puede contener cualquier combinación de HTML, controles web, e incluso código. Además, las páginas principales pueden incluir marcadores de posición de contenido definido pora las regiones que pueden ser modificadas. Cada página de contenido referencia a una única página maestra y adquiere su diseño y contenido. Además, la página de contenido puede añadir una página

Page 36: Modulo   taller progwebaa2

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

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

de contenido específico en cualquiera de los marcadores de posición. En otras palabras, la página de contenido llena las piezas faltantes que no define la página maestra.

El Modelo de Seguridad ASP.NET La seguridad es una parte esencial de las aplicaciones web y deben tenerse en cuenta desde la primera etapa del proceso de desarrollo. Esencialmente, la seguridad tiene que ver con la protección de sus activos de acciones no autorizadas. Puede utilizar varios mecanismos para este fin, incluida la identificación de los usuarios, la concesión o negación de acceso a los recursos sensibles, y la protección de los datos que se almacena en el servidor y los transmitidos a través del cable. En todos estos casos, se necesita un marco de trabajo que proporcione la funcionalidad de seguridad básica. ASP.NET cubre esta necesidad con una funcionalidad integrada que puede utilizar para la implementación de la seguridad en sus aplicaciones web.

El marco de trabajo de seguridad de ASP.NET incluye clases para autenticar y autorizar a los usuarios así como para hacer frente a los usuarios autenticados en sus aplicaciones. Además, .NET proporciona un conjunto de clases de base para la aplicación de la confidencialidad y la integridad mediante el cifrado y firmas digitales.

Comprendiendo los peligros potenciales

La creación de una arquitectura de seguridad y diseño se requiere que haya una comprensión en profundidad del entorno de la aplicación. No puede crear software seguro, si no sabe quién tiene acceso a su aplicación y cuáles prodrían ser los posibles puntos de ataque. Por lo tanto, el factor más importante para la creación de una arquitectura y diseño de aplicaciones seguras se encuentra en una buena comprensión de entorno, factores tales como los usuarios, los puntos de entrada, y el potencial de las posibles amenazas con los puntos de ataque.

Directrices de código seguro

Por supuesto, una arquitectura y diseño seguro por sí solo no hace su aplicación completamente segura. Es sólo uno de los factores más importantes. Después de haber creado una arquitectura y diseño seguro, se tiene que escribir código seguro también. En términos de aplicaciones web, se debe tener en cuenta siempre las siguientes directrices cuando se escribe el código:

1) Nunca confie en las entradas del usuario: Suponga que todos los usuarios son malos hasta demostrar lo contrario. Por lo tanto, siempre valide fuertemente la entrada del usuario. Escriba el código de validación de una manera que verifica los valores de entrada permitidos y no los valores no válidos. (Siempre hay más valores invalidos de los que podría tener en cuenta en el momento de escribir la aplicación.)

2) Nunca use la concatenación de cadenas para la creación de comandos SQL: Siempre use las declaraciones con parámetros de modo que su aplicación no sea SQL inyectable.

3) Nunca saque datos introducidos por un usuario directamente en la página web antes de la validación y codificación de la misma: El usuario puede introducir algunos fragmentos de código HTML (por ejemplo, scripts) que conducen a vulnerabilidades de secuencias de comandos. Por lo tanto, use siempre HttpUtility.HtmlEncode () para caracteres especiales, como <or> antes de sacarlos en la página, o utilizar un control Web que realize este sistema de codificación automática.

4) Nunca almacene los datos sensibles, datos críticos de negocio, o los datos que afectan a las reglas internas de realizadas por su aplicación en campos ocultos en su página web: Los campos

Page 37: Modulo   taller progwebaa2

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

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

ocultos se pueden cambiar fácilmente con sólo ver el código fuente de la página web, modificandolo, y guardandolo en un archivo. Luego, un atacante simplemente tiene que presentar lo guardado localmente, la página web modificado en el servidor.

5) Nunca almacene los datos sensibles o datos críticos de negocio en el estado de vista: El estado de vista no es más que otro campo escondido de la página, y puede ser decodificado y visto fácilmente. Si utiliza el EnableViewStateMac = true para la página, el estado de vista se firmará con un código de autenticación de mensajes que se crea sobre la base de una clave de equipo de machine.config del servidor web.

6) Habilitar SSL al utilizar la autenticación básica o autenticación de formularios de ASP.NET.

7) Proteja sus cookies: Siempre proteja sus cookies de autenticación cuando se utiliza la autenticación de formularios, y configure los tiempos de espera lo más breve posible y sólo el tiempo que sea necesario.

8) Usar SSL: En general, si la aplicación web procesa datos sensibles, garantiza tu sitio web utilizando SSL. No se olvide de proteger incluso a los directorios de imágenes o directorios con otros archivos no gestionados por la aplicación directamente a través de SSL.

Niveles de Seguridad

Básicamente, para aplicaciones web en general, las tareas fundamentales para la implementación de la seguridad (además de los asuntos identificados durante la sesión de modelado de amenazas) son siempre los mismos:

Autenticación: En primer lugar, usted tiene que autentificar a los usuarios. La autenticación responde a la pregunta, ¿quién está aquí?. Determina quien está trabajando con su aplicación en el otro extremo.

Autorización: En segundo lugar, tan pronto como usted sabe quien está trabajando con su aplicación, su aplicación tiene que decidir qué operaciones, el usuario puede ejecutar y los recursos que el usuario puede acceder. En otras palabras, la autorización responde a la pregunta, ¿cuál es su nivel de acreditación?

Confidencialidad: Mientras el usuario está trabajando con la aplicación, usted tiene que asegurarse de que nadie más es capaz de ver los datos sensibles tratados por el usuario. Por lo tanto, usted tiene que cifrar el canal entre el navegador del cliente y el servidor web. Además, usted posiblemente tenga que codificar los datos almacenados en el backend (o en forma de cookies en el cliente), incluso tiene que evitar que los administradores de bases de datos o de otros miembros del personal de la empresa en donde la aplicación Web se encuentra hospedada visualicen los datos de la aplicación.

Integridad: Por último, usted tiene que asegurarse de que los datos transmitidos entre el cliente y el servidor no sean cambiados por agentes no autorizados. Las firmas digitales proporcionan una forma de mitigar este tipo de amenaza.