240
Programación Web Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. I Curso Programación Web

Programacion web se

Embed Size (px)

Citation preview

Page 1: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. I

Curso

Programación Web

Page 2: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. II

Bienvenida Ahora que ya conoces la programación orientada a objetos, tienes la capacidad de desarrollar diversas aplicaciones. En este módulo tendrás la oportunidad mostrar que eres una persona exitosa, capaz de enfrentar retos que requieren iniciativa y creatividad en el desarrollo de programación Web y de utilizar nuevas herramientas con las que podrás crear aplicaciones cliente-servidor.

Agradecimiento y Reconocimiento

Después de una ardua tarea de investigación se ha logrado la creación de una obra vasta en conocimiento en el desarrollo de las Tecnologías de la Información y Comunicación. La presente obra no hubiera sido posible sin la valiosa aportación de destacados autores y especialistas en la materia. Es por ello que a manera de reconocimiento queremos agradecer su participación:

PROGRAMACIÓN WEB

Mtro. Pedro Bello López Benemérita Universidad Autónoma de Puebla

Ing. Yalú Galicia Hernández

Benemérita Universidad Autónoma de Puebla

Introducción En el mundo están sucediendo grandes cambios que hacen que las personas se adentren más en la tecnología. Es por eso que el curso de Programación Web está desarrollado para que seas impulsor de este cambio. Como primer paso veremos los elementos de la arquitectura de Internet, después la forma en que se desarrollan los sitios Web, considerando los aspectos de programación, así como las aplicaciones en la vida moderna, tomando en cuenta siempre a las personas que las utilizan.

Page 3: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. III

Este módulo tiene dos enfoques de desarrollo, De acuerdo a tus intereses y al finalizar el capítulo 2, podrás elegir el enfoque que prefieras para trabajar durante el curso (cada enfoque abarca 3 capítulos). Al finalizar estos, concluiremos con el capítulo 6, en donde podrás aplicar cualquiera de los dos enfoques en aplicaciones reales. Esperamos que muestres la iniciativa y responsabilidad que en otros cursos para que aproveches tus habilidades de la mejor forma posible en este curso. Recuerda que tu tutor tiene un compromiso de honestidad, responsabilidad y lealtad contigo, al igual con las personas con las que interactúas.

Intenciones Educativas En este curso se pretende que obtengas las habilidades y los conocimientos necesarios para proponer soluciones Web originales, basadas en el autoaprendizaje y la reflexión, asumiendo actitudes de honestidad, responsabilidad y confidencialidad. Además, el curso de programación Web está encaminado a desarrollar tu creatividad para obtener productos de software que proporcionen un servicio de calidad.

Objetivos GENERALES Al finalizar el curso serás capaz de aplicar las diferentes herramientas y lenguajes de programación en Internet para el desarrollo de aplicaciones Web. ESPECIFICOS Conocerás la arquitectura de desarrollo en Internet. Podrás desarrollar aplicaciones Web en la plataforma que elijas Aplicarás las herramientas para crear páginas Web estáticas, dinámicas y activas. Vincularás bases de datos dentro de las aplicaciones Web. Aplicarás los conocimientos adquiridos en el desarrollo de un sitio Web.

Page 4: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. IV

Metodología En el curso de POO utilizaremos distintas técnicas de aprendizaje para cubrir los contenidos. A continuación encontrarás una breve descripción de dichas técnicas. Adicionalmente, en las actividades de aprendizaje podrás encontrar las indicaciones específicas en relación con la técnica utilizada en cada una de ellas. APRENDIZAJE BASADO EN PROBLEMAS (ABP) La técnica de Aprendizaje Basado en Problemas (ABP, ó del inglés “PBL-Problem Based Learning”) es una técnica didáctica constructivista. La cual consta de los siguientes pasos: 1. El docente formará grupos de alumnos que trabajarán en equipo para resolver el problema del escenario propuesto. Se nombrará un secretario por equipo, el cual organizará el funcionamiento del mismo y se encargará de enviar los resultados de las actividades realizadas al profesor. 2. El docente presentará el material del escenario, asignará roles y unificará criterios. 3. Los estudiantes elaborarán una serie de preguntas respecto al escenario; posteriormente, procurarán resumir el problema del escenario planteándolo (de ser posible) en forma de una sola pregunta. El docente verificará que tal pregunta sea la apropiada. 4. Una vez establecida la pregunta principal y las preguntas particulares, los estudiantes analizarán y seleccionarán en equipo las preguntas más relevantes a investigar. 5. Como primer entregable, cada estudiante entregará un reporte individual correspondiente a una investigación hecha por él mismo. 6. Posteriormente, ya en equipo, lo integrantes discutirán en equipo los resultados de su investigación para establecer en común las respuestas a las preguntas planteadas. 3. Finalmente, como segundo y último entregable, cada integrante entregará un

reporte individual, más sin embargo, este deberá reflejar los aspectos puestos en común en la discusión en grupo. Adicionalmente, en algunos casos de programación, se solicitarán la entrega de programas.

Page 5: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. V

MÉTODO DE CASOS El método de casos es diferente a otros sistemas de enseñanza porque a diferencia de los sistemas tradicionales exige que se tome parte activa en el análisis de los problemas y en la determinación de alternativas o cursos de acción en situaciones reales muy específicas. El método de casos te pondrá en roles que implican toma de decisiones. Un punto muy importante del método es el análisis del caso ya que permite aprender, a través de la experiencia de otros casos similares para tú toma de decisiones. Entre más casos se resuelvan, mayor será tu habilidad para identificar los problemas y formular soluciones de la vida real, lo cual es de vital importancia, ya que no son situaciones inventadas. En el método de casos, las decisiones que se tomen y el proceso que se siga para tomar decisiones es la clave, desarrollando habilidades para la toma de decisiones, y que pueda sustentar mediante un análisis adecuado, aprendiendo en el proceso a comunicar tus criterios, a defender los hechos y opiniones en debates.

Page 6: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. VI

Los pasos a seguir en el método de casos se muestran en el siguiente diagrama:

COMPROBACIONES DE LECTURA La técnica de comprobación de lectura tiene como finalidad fomentar en el alumno la habilidad de leer, analizar y comprender. La comprensión que realices, se reflejará al final de cada lección, ya que se presenta una evaluación por medio de preguntas muy puntuales acerca de la lectura.

Fuentes de Información Aquí podrás encontrar algunas ligas a Internet que te apoyarán en tu aprendizaje de los diferentes temas que forman este curso Arquitectura de Internet

• Tutorial TCP/IP http://ditec.um.es/laso/docs/tut-tcpip/3376fm.html

• Otro Tutorial sobre TCP/IP http://www.saulo.net/pub/tcpip/

• Algunos conceptos de Cliente -Servidor http://www4.uji,es/%7Eal019803/tcpip/index.htm

• Modelo Cliente-Servidor http://www.juntadeandalucia.es/averroes/recursos_informaticos/curso_internet/curso/interne4.htm

ASP.NET

• Universidad .NET http://www.microsoft.com/spanish/msdn/comunidad/uni.net/

Page 7: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. VII

• Tutorial de ASP.NET http://samples.gotdotnet.com/quickstart/aspplus/doc/default.aspx

Reglas del Juego y Sistema de Evaluación Cada capítulo incluye diferentes actividades planeadas para reforzar tu aprendizaje. Estas actividades podrán ser: * Resolver cuestionarios * Realizar alguna investigación * Elaborar el diseño de alguna interface * Escribir programas o hasta una aplicación completa. Siempre y cuando la actividad se entregue en el tiempo y forma descrito en la misma actividad, podrá obtener el 100% del porcentaje total asignado e indicado en la forma de evaluación de la actividad. La suma de los porcentajes de las diferentes actividades suma el 100%, que corresponde al 100 en el curso. Los trabajos (investigaciones, programas, proyectos, etc) que serán enviados al tutor deberán seguir el formato que se indica a continuación: Investigaciones: invN_matricula.doc Donde N indica el número de investigación Programas progN_matricula.ext Donde N indica el número de programa y ext la extensión del archivo (.aspx, .aspx.cs, etc.) Proyectos (en archivo Zip)

proyN_matricula.zip Donde N indica el número de proyecto

Page 8: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. VIII

Contenido BIENVENIDA.....................................................................................................................................................................II INTRODUCCIÓN .............................................................................................................................................................II INTENCIONES EDUCATIVAS .................................................................................................................................III OBJETIVOS......................................................................................................................................................................III METODOLOGÍA ............................................................................................................................................................ IV FUENTES DE INFORMACIÓN.................................................................................................................................VI REGLAS DEL JUEGO Y SISTEMA DE EVALUACIÓN................................................................................VII 1. ARQUITECTURA ............................................................................................................................................... 1

1.1. ARQUITECTURA (COMO FUNCIONA EL INTERNET Y SERVICIOS QUE PROPORCIONA).......................1 1.2. ARQUITECTURA CLIENTE-SERVIDOR.............................................................................................................8

2. DISEÑO DE PÁGINAS................................................................................................................................ 12 2.1. LENGUAJE DE MARCAS..................................................................................................................................12

2.1.1. HTML ........................................................................................................................................................ 12 2.1.2. XML ........................................................................................................................................................... 22

2.2. ELEMENTOS MULTIMEDIA............................................................................................................................29 2.2.1. Imágenes, Video y Sonido..................................................................................................................... 29 2.2.2. Animaciones............................................................................................................................................. 32

3. FORMULARIOS WEB ..................................................................................................................................37 3.1. INTRODUCCIÓN ...............................................................................................................................................37 3.2. CONTROLES DE SERVIDOR ............................................................................................................................53 3.3. CONTROLES DE USUARIO..............................................................................................................................78 3.4. ACCESO A DATOS...........................................................................................................................................85 3.5. TRABAJO CON OBJETOS..............................................................................................................................149

4. SERVICIOS WEB .........................................................................................................................................158 4.1. INTRODUCCIÓN ............................................................................................................................................158 4.2. ESCRITURA DE SERVICIOS WEB................................................................................................................182 4.3. UTILIZACIÓN DE DATOS EN SERVICIOS WEB...........................................................................................184

5. OPTIMIZACIÓN DE APLICACIONES WEB ...............................................................................185

5.1. ESTADO DE LA APLICACI ÓN .......................................................................................................................185 5.2. SERVICIOS DE CACHÉ..................................................................................................................................198

5.2.1. Usando el objeto caché........................................................................................................................198 5.2.2. Almacenamiento en caché de los resultados de página..................................................................198 5.2.3. Almacenamiento en caché de fragmentos de página ......................................................................199

5.3. CONFIGURACIÓN..........................................................................................................................................207 5.3.1. Formato del archivo de configuración..............................................................................................207 5.3.2. Recuperar la configuración .................................................................................................................207

5.4. SEGURIDAD...................................................................................................................................................215 5.4.1. Autenticación y Autorización..............................................................................................................215 5.4.2. Autenticación basada en Windows.....................................................................................................216 5.4.3. Autenticación basada en formularios................................................................................................216

6. APLICACIONES DE SITIOS WEB ....................................................................................................231

Page 9: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 1

1. Arquitectura

1.1. ARQUITECTURA (Como funciona el Internet y servicios que proporciona)

1. Lea detalladamente el siguiente escenario: Escenario Arquitectura (que es Internet) Silvia una empresaria de mucho éxito en la venta de servicios de recursos humanos en los años 80’s y principios de los 90’s después de darle de beber leche a su linda gatita partió a su oficina, en donde también labora su hijo Bebo, el cual tiene mucho interés en que la empresa de su madre continué con el éxito que ha tenido ya que a últimas fechas la cartera de clientes se ha mantenido y va disminuyendo la demanda de sus servicios en lugar de aumentar, su madre es una persona emprendedora pero por su edad no es tan fácil convencerla del uso de la tecnología ya que siempre ha pensado que el trato personal en el área de recursos humanos es lo que cuenta, por tal motivo Bebo ha decidido que tiene que convencer a su madre de ofrecer algún servicio innovador dentro del área de recursos humanos a fin de poder mantener he incrementar su cartera de clientes para poder lograrlo, piensa que lo primero que debe hacer es convencer a Silvia de ¿Cómo funciona el Internet y los servicios que puede proporcionar? por tal motivo decido tomarse un tiempo de 4 hrs. En la que mostró las bondades del Internet a Silvia ya que entro a sitios de Internet donde consulto información, compro un producto, contesto su mail, bajo información de productos que quería comprar y cada operación y/o consulta que hacia le explicaba ampliamente a Silvia. Al terminar su sesión demostrativa Silvia continuo con su trabajo cotidiano y camino a casa recordó lo sucedido con su hijo y pensaba que ella debería conocer un poco mas del tema y así reconsideraría la petición de Bebo de darle la oportunidad de realizar una aplicación en el área de R.H. Después de cenar y antes de conciliar el sueño por su mente solo pensaba como funciona eso de Internet, que se requiere para que funcione y que puedo hacer con el Internet…. 2. Con base en el escenario, y trabajando en equipo, elabora una serie de preguntas sobre como ayudar a Silvia para que pueda disipar sus dudas. Elijan las 10 que consideren más relevantes y el secretario del equipo deberá colocarlas tareas Preguntas Arquitectura "metas de aprendizaje". 1.1

Page 10: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 2

3. Una vez que tengan el visto bueno del profesor sobre sus preguntas, lleva a cabo una investigación individual, que deberás colocar en tareas: Resumen individual Arquitectura 1.1 y te será calificado con la rúbrica de Resumen individual 5. Una vez que tengan la aprobación del profesor deberán elaborar una propuesta de solución a la pregunta de su definición del problema, así como su reporte el cual colocarás en Resumen por equipo Arquitectura 1.1, en donde se incluirá dicha propuesta y una síntesis de las respuestas a sus preguntas relevantes finales hechas en Preguntas Arquitectura "metas de aprendizaje". 1.1 El contenido del reporte debe cumplir con la siguiente rúbrica Resumen equipo Guía Tutorial, Arquitectura-cliente servidor 1. Materia: Programación Web 2. Tema: Arquitectura-Como funciona Internet y servicios que proporciona 3. Objetivos de aprendizaje:

Poder describir la tecnología del Web 4. Escenario: Escenario Arquitectura (que es Internet) Silvia un empresaria de mucho éxito en la venta de servicios de recursos humanos en los años 80’s y principios de los 90’s después de darle de beber leche a su linda gatita partió a su oficina, en donde también labora su hijo Bebo, el cual tiene mucho interés en que la empresa de su madre continué con el éxito que ha tenido ya que a últimas fechas la cartera de clientes se ha mantenido y va disminuyendo la demanda de sus servicios en lugar de aumentar, su madre es una persona emprendedora pero por su edad no es tan fácil convencerla del uso de la tecnología ya que siempre ha pensado que el trato personal en el área de recursos humanos es lo que cuenta, por tal motivo Bebo ha decidido que tiene que convencer a su madre de ofrecer algún servicio innovador dentro del área de recursos humanos a fin de poder mantener he incrementar su cartera de clientes para poder lograrlo, piensa que lo primero que debe hacer es convencer a Silvia de ¿Cómo funciona el Internet y los servicios que puede proporcionar? Después de cenar y antes de conciliar el sueño por su mente solo pensaba como funciona eso de Internet, que se requiere para que funcione y que puedo hacer con el Internet…. 5. Posibles términos que deban clarificarse: 6. Definición del problema esperada: ¿Como funciona el Internet? 7. Preguntas esperadas en el análisis del problema:

Page 11: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 3

¿Como funciona el Internet? ¿Que requerimientos de software se necesitan para usar el Internet? ¿Qué requerimientos de hardware se necesitan para hacer un sitio de Internet? ¿Qué servicios proporciona el Internet? ¿Qué es un servicio? ¿Qué es el correo electrónico? ¿Qué es la mensajeria? ¿Hay seguridad al trabajar en la Web? ¿Qué tan factible es construir aplicaciones Web? ¿Cuánto cuesta construir esto? 8. Metas de aprendizaje: ¿Como funciona el Internet? ¿Que requerimientos de software se necesitan para usar el Internet? ¿Qué requerimientos de hardware se necesitan para hacer un sitio de Internet? ¿Qué servicios proporciona el Internet? Rúbrica para evaluar el reporte de investigación individual Máximo 9 puntos. Ver rubrica resumen investigación personal Rúbrica para evaluar el reporte final de ABP (en equipo) por parte del tutor. Máximo 9 puntos Ver rubrica resumen investigación equipo 1.1 Arquitectura- TCP/IP y SERVICIOS 1. Lea detalladamente el escenario: Escenario Arquitectura (TCP/IP) A la semana siguiente Silvia estaba preocupa por la noticia que acaba de recibir uno de sus exclusivos y principales clientes sin saberlo ella, desde hace tiempo lo estaba compartiendo con un competidor eso significaba que empezaba a perder servicios con sus mejores clientes, aunque preocupada, estaba segura de que una nueva puerta llamada Internet se habría a su paso, así que mando llamar a Bebo y le pidió que tomara las acciones necesarias en la elaboración de productos de recursos humanos apoyados en la tecnología de Internet, luego recordó, que por su preocupación no había alimentado a su gata esa mañana. Fue así como Bebo decidió como primer paso hacer la compra de equipo de computo, la instalación de la red interna así como hacer una pequeña página Web que anunciará su empresa y decidió comprar 20 computadoras actuales, 1 switch para comunicar los 2 pisos de oficinas que tenia en el edificio (piso 20 con 12 equipos y el piso 15 con 8 equipos y un servidor) se instaló el servidor de correo y coloco algunos documentos que podrían bajar los clientes vía FTP (según el proveedor le había dicho). Y así pudo estrenar su flamante instalación y muy contento de poner a Silvia Consultores RH en la vanguardia de tecnología, pero a

Page 12: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 4

pocos días tuvo varios problemas el correo a veces funcionaba y a veces no, los clientes se quejaban de que no siempre podían bajar bien los documentos y que la página no siempre estaba disponible que recibían un error que empezaba con algo de http... y 2 máquinas mostraban al iniciarse un mensaje que decía IP duplicada y ya no podían hacer uso de los servicios de red. Bebo consulto a varios asesores, pero no entendía bien lo que le decían algunos comentaron debes tener un servidor DHCP otros decían que bastaba con colocar una adecuada administración de direcciones IP otros comentaban que el switch no funcionaba y que solo con los concentradores bastaba mientras que los demás decían que le faltaba un dominio de Internet y una dirección fija, eso era demasiado para Bebo así que no sabía en que proveedor confiar el trabajo de los ajustes y la afinación del equipo recién adquirido. Así que pensó que estaba en esta indecisión por su carencia de conocimientos del tema. 2. Con base en el escenario, y trabajando en equipo, elaboren una serie de preguntas que ayuden a Bebo Elijan las 10 que consideren más relevantes y el secretario del equipo deberá colocarlas tareas Preguntas Arquitectura "metas de aprendizaje". 1.2 3. Una vez que tengan el visto bueno del profesor sobre sus preguntas, lleva a cabo una investigación individual, que deberás colocar en tareas: Resumen individual Arquitectura 1.2 y te será calificado con la rubrica de Resumen individual 5. Una vez que tengan la aprobación del profesor deberán elaborar una propuesta de solución a la pregunta de su definición del problema, así como su reporte el cual colocarás en Resumen por equipo Arquitectura 1.2, en donde se incluirá dicha propuesta y una síntesis de las respuestas a sus preguntas relevantes finales hechas en Preguntas Arquitectura "metas de aprendizaje". 1.2

Page 13: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 5

El contenido del reporte debe cumplir con la siguiente rúbrica Resumen equipo Rúbrica para evaluar el reporte de investigación individual Máximo 9 puntos.

Contenido del reporte

Excelente

3

Bien

2

Regular

1

Mal

0 Total

Metas de aprendizaje

Las incluye y coinciden con el resto del equipo.

Las incluye, pero difieren en algunos puntos de las del resto del equipo

Las incluye, pero no coinciden con las del resto del

equipo

No las incluye

Respuestas a las metas de

aprendizaje

Les da una respuesta clara y fundamentada en

la bibliografía consultada

Responde con cierto detalle, pero

no fundamenta todas sus

respuestas.

Incluye diagrama(s) explicativo(s)

No responde de manera

completa todas las metas de aprendizaje

Referencias bibliográficas

Las incluye de manera completa y

correcta.

Las incluye de manera completa,

pero no con el formato solicitado

Incluye mas de 3 referencia s

adicionales a las publicadas

No las incluye

TOTAL

Page 14: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 6

Rúbrica para evaluar el reporte final de ABP (en equipo) por parte del tutor. Máximo 9 puntos.

Contenido del reporte Excelente

3

Bien

2

Regular

1

Mal

0 Total

Solución o explicación al problema

Dan una solución/explicaci

ón detallada al problema y con fundamentos

sólidos.

Dan una solución/explicación detallada al problema, pero

no la fundamentan de

manera completa.

Incluye diagrama(s)

explicativo(s).

El equipo no proporciona una solución/explica

ción al problema.

Síntesis de la información con la cual

fundamentan la solución/explicación

Sintetizan de manera lógica y

coherente la información

investigada por todos.

Presentan un resumen lógico

de la información

recopilada por todos.

Únicamente presentan listas

de datos y/o copia de lo que cada quien investigó,

sin darle coherencia.

No la incluyen.

Referencias bibliográficas

Las incluye de manera completa

y correcta.

Las incluy e de manera

completa, pero no con el formato

solicitado

Incluye mas de 3 referencia s

adicionales a las publicadas

No las incluye

TOTAL

Guía Tutorial Arquitectura-TCP/IP y Servicios 1. Materia: Programación Web 2. Tema: Arquitectura-TCP/IP 3. Objetivos de aprendizaje:

Page 15: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 7

Entender el como funciona un red y sus principales servicios 4. Escenario: Escenario Arquitectura (TCP/IP) A la semana siguiente Silvia estaba preocupa por la noticia que acaba de recibir uno de sus principales y exclus ivos clientes sin saberlo ella desde hace tiempo lo estaba compartiendo con un competidor eso significaba que iba a empezar a perder servicios con algunos de sus clientes importantes, aunque preocupada, estaba segura de que una nueva puerta llamada Internet se habría a su paso, así que mando llamar a Bebo y le pidió que tomaras las acciones necesarias en la elaboración de productos de recursos humanos apoyados en la tecnología de Internet, luego recordó que por su preocupación no había alimentado a su gata esa mañana. Fue así como Bebo decidió como primer paso hacer la compra de equipo de hardware y en la instalación de la red interna así como hacer una pequeña página Web que anunciara a su empresa y así decidió comprar 20 computadoras actuales, 1 switch para comunicar los 2 pisos de oficinas que tenia en el edificio (piso 20 con 12 equipos y el piso 15 con 8 equipos y un servidor) así como instalar la red y el servidor de correo y coloco algunos documentos que podrían bajar los clientes vía FTP (según el proveedor le había dicho). Y así pudo estrenar su flamante instalación y muy contento de poner a Silvia Consultores RH en la vanguardia de tecnología, pero a pocos días tuvo varios problemas el correo a veces funcionaba y a veces no, los clientes se quejaban de que no siempre podían bajar bien los documentos y que la página no siempre estaba disponible que recibían un error que empezaba con algo de http y 2 máquinas mostraban al iniciarse un mensaje que decía IP duplicada y ya no podían hacer uso de los servicios de red. Bebo consulto a varios asesores pero no entendía bien lo que le decían algunos comentaron debes tener un servidor DHCP otros decían que bastaba con colocar una adecuada administración de direcciones IP otros comentaban que el switch no funcionaba y que solo con los concentradores bastaba mientras que los demás decían que le faltaba un dominio de Internet y una dirección fija, eso era demasiado para Bebo así que no sabía a que proveedor decidir para darle el trabajo de los ajustes y afinación del equipo acabado de comprar. Así que pensó que estaba en esta indecisión por su carencia de conocimientos del tema. 5. Posibles términos que deban clarificarse: 6. Definición del problema esperada:

Page 16: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 8

¿Qué es el tcp/ip? 7. Preguntas esperadas en el análisis del problema: ¿Qué es el tcp/ip?, ¿Cuál es la red en que se basa el Internet? Estas 2 preguntas son similares ¿Cómo trasmite información el tcp/ip? ¿Qué es el servicio de eMail? ¿Qué es el servicio FTP? ¿Qué otros servicios hay? ¿Cómo funcionan los servios de Internet FTP, HTTP, SMTP, SHTP? ¿Qué son los dominios? ¿Cómo elegir un consultor? ¿Cuánto cuesta los servicios de consultoría? Las amarillas son preguntas que podrían surgir pero que no son tratadas como parte del tema 8. Metas de aprendizaje: ¿Qué es el tcp/ip? ¿Cómo funcionan los servios de Internet FTP, HTTP, SMTP, SHTP? ¿Cómo trasmite información el tcp/ip? ¿Qué son los dominios? Rúbrica para evaluar el reporte de investigación individual Máximo 12 puntos. Ver rubrica resumen investigación personal Rúbrica para evaluar el reporte final de ABP (en equipo) por parte del tutor. Máximo 9 puntos.

1.2. Arquitectura cliente-servidor Introducción Cada día se incrementan los sitios Web con aplicaciones que demandan funcionalidad adicional de algún tipo de procesamiento y/o almacenamiento de datos por parte del servidor (no basta con de simplemente ver información de páginas estáticas), nos es relativamente fácil encontrar sitios Web que permiten registrar datos y posteriormente nos envían información de venta, también hay servicios de búsqueda de empleo sin olvidar los 2 servicios mas conocidos que son el Messenger y el e-mail, estos sistemas en su gran mayoría siguen el siguiente comportamiento.

Page 17: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 9

En el servidor se guarda la información y es ahí donde se realizan las operaciones de base de datos. El cliente (usuario) desde su navegador (browser) activa el proceso de dar de alta sus datos, de hacer modificaciones o de consultar alguna información y posteriormente ver el resultado de cada operación en su pantalla. Este Web Quest tiene como finalidad comprender el modelo de programación que aplica en el Internet para poder construir aplicaciones que demanden alguna funcionalidad adicional de proceso en el servidor. La Tarea Tu eres miembro de la empresa de consultoría que llevará a cabo la asistencia técnica a la empresa Silvia Consultores RH, tu contacto principal será Bebo (el líder de proyecto por parte de la empresa Silvia Consultores RH) él te ha solicitado como primer paso que le expliques detalladamente y con ayuda de algunos diagramas el funcionamiento del modelo de programación de Internet Tu trabajo consiste en realizar un informe en Word y lo colocarás en el foro que se encuentra a continuación. Debes incluir diagramas y explicaciones concisas de como funciona el modelo de programación y los elementos de software y hardware mínimos que se requieren para su funcionamiento. El Proceso Para llevar a cabo la tarea debes utilizar el mismo equipo con el que has venido trabajando y realizar las siguientes acciones: Consulta las ligas de "cliente servidor" en la sección de recursos y determina cuales son los roles que desempeñan los clientes y cual el de los servidores. En base a las ligas de "cliente servidor" indica como se realiza la comunicación entre un cliente y un servidor y realiza un diagrama. En base a las ligas de "cliente servidor" menciona que componentes mínimos de hardware se requiere para que exista una comunicación de arquitectura cliente-servidor e indique que función realiza cada uno de ellos. En base a las ligas de "cliente servidor" indica que componentes mínimos de software se requiere para que exista una comunicación de arquitectura cliente-servidor e indique que función realiza cada uno de e llos.

Page 18: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 10

En base a las ligas de "llamado de una página Web" realiza un diagrama que explique el proceso, que sucede cuando un usuario teclea una dirección de Internet y al cabo de un Tiempo él puede ver la página Web que solicitó (anexe un párrafo de al menos 120 palabras que explique el diagrama) Recursos Para cliente servidor, componentes de software y hardware utiliza los siguientes enlaces: http://www.inei.gob.pe/biblioineipub/bancopub/inf/lib5038/carac.HTM http://www.inei.gob.pe/biblioineipub/bancopub/inf/lib5038/indice.HTM http://docs.hp.com/es/5990-8174/ch02s01.html#chcbdiac http://www.monografias.com/trabajos24/arquitectura-cliente-servidor/arquitectura-cliente-servidor.shtml http://www.htmlweb.net/manual/basico/internet_2.html http://www.geocities.com/aula_web/inter03.html http://agamenon.uniandes.edu.co/~revista/articulos/cliser.html Para comprender como se procesa el llamado de una página Web consulta los siguientes enlaces: http://es.wikipedia.org/wiki/HTTP http://www.brujula.net/wiki/Capa_de_aplicaci%C3%B3n http://eia.udg.es/~ramon/ib/t3/tema3.htm#punto32 http://cdec.unican.es/libro/HTTP.htm

Page 19: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 11

Evaluación Se evaluará el trabajo en equipo de acuerdo a la siguiente rúbrica. Excelente

3 Bien

2 Medio

1 Incompleto

0

Contenido Explicaciones completas de todos

los puntos y proporciona

información adicional

Explicaciones de todos los puntos

Explicaciones incompletas ,faltan

fundamentos

El equipo no presenta alguna explicación del

problema

Orden y organización

Trabajo bien ordenando y

redacciones precisas que coincidan con

los diagramas

Buen orden y que las explicaciones concuerden con los diagramas

Problemas con el orden y/o clasificación de las

explicaciones y presenta problemas de concordancia con los diagramas propuestos

No existe un orden en las

ideas y estás no coinciden con los diagramas

Diagramas gráficos y

tablas

Los diagramas y/o dibujos son claros y

ayudan al entendimiento de la arquitectura cliente

servidor

Contiene bastantes gráficos

y diagramas

Los diagramas y/o dibujos son algo

difíciles de entender.

Ausencia de diagramas o no

se pueden entender

Conclusión Al completar esta actividad habrás entendido como funciona el modelo de programación de Internet conocido como cliente servidor, cuales son los componentes genéricos de software y hardware que se requieren y el proceso que sucede desde que escribes una dirección URL en un navegador (browser) y el servidor te devuelve la página html que solicitaste.

Page 20: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 12

2. Diseño de Páginas

2.1. Lenguaje de Marcas

2.1.1. HTML Objetivos Al terminar este tema tendrás tu primera página HTML la cual será base para añadirle más componentes en los siguientes temas. Instrucciones

• Consulta la demostración que se encuentra ubicada en los materiales de apoyo del curso.

• Prueba los ejemplos que se te proporcionan. • Investiga el uso de las etiquetas que no son completamente explicadas

dentro del material del curso. • Resuelve los ejercicios propuestos ubicados en la sección de evaluación.

Material del curso. • Mejora los ejercicios propuestos según tu creatividad y sube tu página a un

servidor (p.e. yahoo) y envíale la dirección a tu tutor para tu evaluación. TIP: Copia los ejemplos proporcionados para ver su resultado y después ve quitando pequeñas partes de código para entender mejor su uso. Productos esperados / Evaluaciones Construye una página Web que contenga como mínimo los siguientes puntos:

1. Historia de la computación. Por generaciones, realizando un cuadro comparativo en el cual especificas las características más importantes dentro de cada una, este lo puedes realizar mediante el uso de tablas.

Page 21: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 13

2. Precursores de la computación Solo coloca su principal aportación a la computación e incluye imágenes de ambos.

3. Tendencias en el desarrollo de la computación.

Estas deben ser de hardware y software.

4. Dentro de las tendencias que haz encontrado elige la que más te haya interesado y desarróllalo.

Tu documento deberá elaborarse con frames y tener el siguiente formato:

El titulo deberá tener un tamaño lo suficientemente grande para llamar la atención, pero sin descuidar los tips que se te proporcionan posteriormente para un buen diseño. Además de contener una imagen o bien, un logotipo. El índice, contendrá las ligas a los temas preestablecidos de manera tal que su contenido se visualice en el frame de información. Si lo consideras pertinente puedes añadir más información con la finalidad de hacer más completa tu página. Este tema se evaluará con la página enviada a tu tutor y contará el 2.5% de la calificación final, siempre y cuando lo entregues en la fecha y forma acordada. Esta actividad se considerará como exitosa si el resultado de la evaluación realizada por tu tutor es arriba de 70/100.

Page 22: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 14

Material de Apoyo Consulta el material de apoyo y realiza todas las actividades que se indican. En la siguiente presentación podrás conocer las bases para elaborar un documento HTML. GUÍA BÁSICA DE HTML ESTRUCTURA DE UN DOCUMENTO HTML

• La estructura básica de un documento HTML se compone de una etiqueta de inicio <HTML> y una de fin </HTML>.

• Otros componentes esenciales de este tipo de documento son la cabecera

la cual contiene información sobre el documento, y se indica por las etiquetas <HEAD> y </HEAD>; dentro de la cabecera se recomienda el uso de la etiqueta <TITLE>, la cual se encarga de indicar el título del documento, generalmente lo puedes ver en la parte superior del navegador.

• El cuerpo es indicado por las etiquetas <BODY> y </BODY>.

Un ejemplo básico de un documento HTML es el siguiente: <HTML> <HEAD> <TITLE>Mi primera página web </TITLE> </HEAD> <BODY>

MI PRIMERA PÁGINA WEB </BODY> </HTML> En tu página puedes establecer un fondo, ya sea que lo predefinas de un color o bien mediante una imagen, esto se realiza con el atributo BACKGROUND de la etiqueta BODY <body background="nieve.jpg"> <body background color: #F00 >

Page 23: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 15

COMENTARIOS Con la finalidad de documentar tu página puedes insertar algunos comentarios en los que especificas donde comienza la página o bien quien es el autor de la misma, por ejemplo <!—Este es un comentario--> Esta parte del código no se vera en el documento. FUENTES La etiqueta <FONT> controla casi en su totalidad el estilo del texto a utilizar. Tiene tres atributos <SIZE> mediante el cual se establece el tamaño de la fuente, <FACE> esta se encarga de establecer la fuente, <COLOR> establece color al texto. La etiqueta <FONT> requiere de un delimitador, por ejemplo si utilizas <FONT SIZE> deberás cerrar con </FONT>. Los tamaños del texto van del 1 al 7, y los colores deben ser especificados en ingles. P.e. <FONT COLOR = "blue"> ESTRUCTURA DEL TEXTO PÁRRAFOS Y SALTOS DE LÍNEA Dentro de un documento HTML cualquier salto de línea o tabulación y demás separadores son ignorados por el navegador de tal manera que si deseas separar tu texto en párrafos deberás colocar la etiqueta <P> y su respectivo delimitador </P>. Otra etiqueta que se encarga de separar el texto es la del salto de línea <BR>, la cual funciona como retorno de carro. ESTILOS DE TEXTO A continuación se presentan los estilos de texto usados frecuentemente:

• <B> Se utiliza para mostrar el texto en negrita. • <U> Se utiliza para subrayar el texto. • <I> Se utiliza para mostrar el texto en cursiva. • <SMALL> Texto pequeño, esto es, se muestra el texto en el menor tamaño

de fuente.

Page 24: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 16

• <BIG> Texto grande, como su nombre lo indica el texto es mostrado en el tamaño máximo de fuente.

• <CENTER> Centra el texto en la pantalla. A continuación se proporciona un ejemplo que abarca todo lo visto con anterioridad: <HTML> <HEAD> <TITLE> Mi primera página WEB </TITLE> </HEAD> <BODY> <FONT SIZE="5" FACE="Arial" COLOR="green"><B>Este texto esta en verde, con fuente arial, en negrita y tamaño 5. </B></FONT><BR> <P><FONT SIZE="3" FACE="Arial" COLOR="blue“><CENTER>Este es un párrafo centrado.</CENTER></P></FONT> </BODY> </HTML> TABLAS ESTRUCTURA DE UNA TABLA EN HTML Para definir una tabla dentro de una página Web creada con lenguaje HTML, utilizaremos las etiquetas <TABLE> y </TABLE> y dentro de ellas definiremos el inicio y fin de cada una de sus celdas haciendo uso de la etiqueta <TD> y </TD>, además usaremos a las etiquetas <TR> y </TR> para indicar el inicio y fin de una fila dentro de una tabla. Dentro de la etiqueta TABLE también podemos utilizar los atributos WIDTH y HEIGHT para indicar la anchura y la altura de la tabla respectivamente, también es posible agregar color de fondo mediante el atributo BGCOLOR. También podemos variar la separación entre celdas mediante el atributo CELLSPACING de la etiqueta TABLE. A continuación te presentamos un ejemplo: <HTML> <HEAD> <TITLE> EJEMPLO DE USO DE TABLAS </TITLE> </HEAD> <BODY> <TABLE BORDER=3 CELLSPACING=5 CELLPADDING=10 WIDTH=500 ALIGN="CENTER" VALIGN="CENTER" GCOLOR=yellow> <CAPTION ALIGN=bottom>Horario de servicio social </CAPTION>

Page 25: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 17

<TR><TH>Lunes</TH><TH>Martes</TH><TH>Miercoles</TH><TH>Jueves</TH><TH BGCOLOR=blue>Viernes</TH> </TR> <TR> <TD BGCOLOR=gray>4</TD><TD BGCOLOR=green>2</TD><TD>6</TD><TD>2</TD><TD>2</TD> </TR> <TR> <TD BGCOLOR= red>6</TD><TD BGCOLOR=orange>6</TD><TD>4</TD><TD>4</TD><TD>4</TD> </TR> </TABLE> </BODY> </HTML> ENLACE S ESTRUCTURA DE ENLACE Un enlace está conformado por la etiqueta <A> seguida por diferentes atributos que indican el tipo de enlace que se desea hacer. Existen dos tipos de enlaces:

• Enlace a un punto de la misma página: Usando el atributo NAME, podemos indicar a qué parte del documento queremos ir, p.e. inicio de la página y final de la página.

• Enlace a otra página: Usando el atributo HREF podemos hacer ligas a otra página del mismo sitio.

• Enlace a otros sitios: Usando el atributo HREF también podemos hacer enlaces a otros sitios Web o direcciones de correo.

Esta línea se coloca al principio del cuerpo del documento. <A HREF="#finaldocumento">Da click aquí para ir al final de esta página </A> Esta línea va al final <A HREF="#iniciodocumento">Da click aquí para ir al inicio de esta página </A> Estas líneas van donde tú lo desees <A HREF="http://www.google.com">Google.com</A> <A HREF="mailto: [email protected]">[email protected]</A> IMÁGENES Como se ha mencionado anteriormente dentro de un documento html es común el uso de etiquetas. Para incluir una imagen en una página Web emplearemos la etiqueta <IMG> junto con un atributo fundamental SCR.

Page 26: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 18

Deberás colocar la siguiente línea de código dentro del cuerpo de tu documento html. <IMG SRC=“paraiso.jpg"> donde nombre de imagen como su nombre lo indica es el nombre de la imagen que deseas incluir en la página. MARQUESINAS Mediante HTML se pueden crear marquesinas con el uso de la etiqueta <MARQUEE> y su delimitador </MARQUEE>; dentro de ellas se pone el texto que se desea, en el formato que se quiere, por ejemplo: <MARQUEE><br><FONT FACE="COMIC SANS MS" SIZE="5" COLOR="blue">ESTA ES UNA MARQUESINA</FONT></MARQUEE> Esta etiqueta tiene varios atributos, te mostramos los más usados:

• BEHAVIOR=ALTERNATE: la marquesina "rebotará" de un lado a otro de la pantalla.

• SCROLLDELAY = X: Indica el tiempo que transcurrirá entre cada salto del texto, expresado en milisegundos.

• LOOP = Indica el número de veces que se repetirá la acción de la marquesina, por default es infinita.

LISTAS En una página Web puedes elaborar listas, mediante la etiqueta <OL> y con el atributo <type>, este último permite establecer el tipo de lista a crear. Por ejemplo si deseas crear una lista enumerada deberás colocar el siguiente código: <OL TYPE=1><OL> <li>Presentaci&oacute;n. <li><A HREF="introduccion1.html">Introducci&oacute;n a los sistemas operativos.</A> <li>Casos de Estudio. <OL TYPE=1> <li><A HREF="http://www.cs.buap.mx/~fulo">Linux.</A> </ol> <li><A HREF="Glosario.html">Glosario.</A> </ol> Checa que en cada renglón se establece la etiqueta <li>, la cual indica que es parte de la lista numerada.

Page 27: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 19

SONIDO Dentro de una página Web se pueden incorporar diversos sonidos con la opción de poder ser activada por el usuario o bien ser ejecutada de manera automática al cargar la página. Para este fin se utiliza la etiqueta <BGSOUND> asociada al atributo SRC (source). Los archivos a reproducir pueden ser de los siguientes formatos: *.wav, *.au, *.mid El atributo que acompaña a esta etiqueta es LOOP, el cual se encarga de especificar cuántas veces se debe ejecutar el archivo de sonido y puede tener un valor numérico o valor infinite que reproducirá el archivo en un ciclo cerrado. Por ejemplo: <BGSOUND SRC=“musica.wav” LOOP=infinite> FRAMES Un frame es un marco que divide la pantalla en filas y columnas como lo deseemos. El atributo que debemos conocer para la realización de los frames es TARGET, el cual determina la zona de la pantalla en donde se mostraran los elementos. Ya que el atributo TARGET determina el lugar de destino del contenido, hay que señalar los valores especiales de este atributo.

1. TARGET = _blank. El enlace se carga en una nueva ventana. 2. TARGET = _self. El enlace se carga en la misma ventana en que se

encuentra. 3. TARGET = _parent. El enlace se carga en el FRAMESET inmediatamente

superior al documento. 4. TARGET = _top. El enlace se carga en la totalidad de la ventana.

Estructura básica Debemos resaltar que el código principal de una página con frames no presenta las etiquetas <BODY> y </BODY>, sino que el código deberá ser incluido en las etiquetas <HEAD> y </HEAD> La etiqueta a utilizar es la de <FRAMESET>, esta última se encarga de dividir la pantalla en ventanas, verticales u horizontales. Y los atributos que determinan el aspecto de estas ventanas son ROWS y COLS. El atributo ROWS define el número de divisiones verticales, así mismo con COLS pero la hace de manera horizontal.

Page 28: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 20

• Los valores para ambos pueden ser absolutos en píxeles, porcentajes, o bien valores de escala relativos, y se basan en los siguientes formatos.

• n. Cuando se introduce un valor determinado se indica la altura o anchura

de la ventana en píxeles.

• %. Indica que la altura o anchura es un valor porcentaje relativo al tamaño de la ventana que lo contiene.

• *. Indica que debe asignarse ala ventana todo el espacio disponible;

suponiendo que haya varias ventana es espacio libre se divide entre ellas, si existe un valor delante del asterisco, la ventana que lo tenga asignado tomará más espacio relativo, por ejemplo “2*,*” daría 2/3 del espacio de la primera ventana.

La etiqueta <FRAME> y <NOFRAME> La etiqueta <FRAME> es la encargada de revisar cuantos frames se deberán dibujar dentro de la pantalla, por lo que puede tener hasta seis atributos distintos, como por ejemplo:

• SCR = “url” toma el valor URL del documento que se debe mostrar en la pantalla, sino la ventana se quedará vacía.

• NAME =“nombre de la ventana” como se indica con este atributo nombramos a una ventana, de manera que puede ser el destino de cualquier enlace.

• MARGINWIDTH = “valor” Se emplea para precisar el número de píxeles entre los bordes izquierdo y derecho de la ventana.

• MARGINHEIGTH = “valor” Lo mismo que el anterior pero respecto a los bordes superior e inferior.

• SCROLLING = “yes|no|auto” Despliega barras de desplazamiento o no. Yes: muestra las barras, No: nunca muestra las barras; auto: hace que el navegador decida si son necesarias o no en función del contenido de la misma.

• NORESIZE = Indica al navegador que la ventana no puede ser redimensionada por el usuario.

Veamos un ejemplo:

Page 29: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 21

<HTML> <HEAD> <TITLE>Ejemlo de frames combinados</TITLE> <FRAMESET COLS =“100%”, ROWS=“33%, 33%,*”> <FRAMESET COLS=“20%,20%,20%,20%,*”> <FRAME NAME=“Frame 1” SRC=“ejemplo.html”> <FRAME NAME=“Frame 2” SRC=“ejemplo.html”> <FRAME NAME=“Frame 3” SRC=“ejemplo.html”> <FRAME NAME=“Frame 4” SRC=“ejemplo.html”> </FRAMESET> <FRAMESET COLS=“50%,*”> <FRAME NAME=“Frame 5” SRC=“ejemplo.html”> <FRAME NAME=“Frame 6” SRC=“ejemplo.html”> </FRAMESET> </FRAMESET> </HEAD> </HTML> A continuación se presentan los ejemplos vistos dentro de la presentación:

• Ejemplos • Ejemplo de una página sencilla. • Tutorial de HTML

TIPS

1. El uso de muchas fuentes dificulta la lectura de la página, te recomendamos no usar más de tres fuentes.

2. No hagas demasiado extenso el contenido de las páginas, ya que tardaría demasiado en cargarse.

3. No utilices textos intermitentes (la etiqueta blink), ya que además de hacer molesta la lectura distrae la atención del lector.

4. No abuses de los iconos animados, pues harás más lenta la carga de tu página.

5. Utiliza solo las imágenes necesarias. 6. Utiliza fondos con colores claros para textos con colores obscuros y

viceversa, para no afectar la legibilidad del documento. 7. El titulo de la página debe ser lo más descriptivo posible. Puedes utilizar

marquesinas. 8. Se recomienda hacer enlaces a otras páginas con contenido similar al de la

tuya. Y revisa frecuentemente si se encuentran vigentes de lo contrario retirarlas.

Page 30: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 22

2.1.2. XML Objetivos En este tema identificarás los elementos básicos de un documento XML y su interpretación, además de su diferencia con HTML y la importancia actual de aplicaciones utilizando XML. Instrucciones 1. Revisa la presentación de XML que se encuentra ubicada en la sección de materiales de apoyo. 2. Una vez que hayas estudiado este tema, comprobarás tus conocimientos contestando el cuestionario X M L que se encuentra en la entrada principal de este capítulo. Sigue las instrucciones que ahí se te dan. Productos esperados / Evaluaciones Este tema se evaluará con el cuestionario mencionado en las instrucciones y contará el 2.5% de la calificación final, siempre y cuando lo entregues en la fecha y forma acordada. Esta actividad se considerará como exitosa si el resultado de la evaluación de tu cuestionario es arriba de 70/100. Material de Apoyo XML XML, lenguaje extensible de etiquetas (eXtensible Markup Lenguage), no es un lenguaje de marcado como el lenguaje HTML. XML es un meta-lenguaje que nos permite definir lenguajes de marcado adecuado a usos determinados. Al ser XML un metalenguaje es un lenguaje para definir lenguajes. Los elementos que lo componen pueden dar información sobre lo que contienen, no necesariamente sobre su estructura física o presentación, como ocurre en HTML. XML no ha nacido sólo para su aplicación en Internet, sino que se propone como lenguaje de bajo nivel (a nivel de aplicación, no de programación) para intercambio de información estructurada entre diferentes plataformas. Se puede usar en bases de datos, editores de texto, hojas de cálculo, y casi cualquier cosa que podamos pensar.

Page 31: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 23

Editores de XML Los editores son aquellos programas que nos permiten escribir los documentos XML. Dentro de estos nos podemos encontrar los básicos como el Notepad, o algunos más complejos, que nos permiten saber si el documento XML que escribimos está bien formado e incluso si es válido. Es decir, realizan el parseo automáticamente. Estos editores pueden soportar también XSL, DTDs, SCHEMAS, HTML, XHTML, ect. Un editor que recomendamos es el XML Spy v3.0, soporta xml, html, xsl, dtd, rdf, schemas W3C,.... Podemos encontrar un número considerable de estos editores en: Editores XML. Cuales son los mejores Navegadores XML Son las herramientas mediante las cuales podemos visualizar los documentos XML. La última versión de los navegadores más utilizados nos permite visualizar y trabajar con documentos XML. Las versiones 5 y 6 del Explorer nos permiten visualizar XML utilizando XSLT y CSS y manipularlo utilizando DOM y JavaScript. Las versiones 6.x de Netscape o las versiones más recientes de Mozilla, permiten también visualizar XML utilizando CSS y DOM. Pero además existen múltiples browsers que nos permiten visualizar algunos vocabularios XML concretos. El navegador CML JUMBO, que nos permite visualizar documentos CML. Este es un lenguaje XML mediante el cual se pueden describir fórmulas moleculares y químicas. El Amaya Browser, mediante el cual, entre otros, podemos visualizar y crear documentos Mathml, que es un vocabulario XML para la descripción de fórmulas matemáticas. Un móvil con tecnología WAP incorpora un browser capaz de mostrar páginas WML, que no es más que un vocabulario XML desarrollado para escribir páginas para móviles. CREACIÓN DE DOCUMENTOS XML Reglas básicas Hay dos tipos de construcciones: el marcado (entre <...> ó &...;) y los datos de carácter (todo lo demás).

Page 32: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 24

Todo documento XML se compone de elementos. Cada elemento está delimitado por una etiqueta de comienzo y otra de fin, a no ser que sea vacío. Los elementos vacíos constan de una única etiqueta. Los nombres de las etiquetas son arbitrarios y no pueden contener espacios. Siempre hay un elemento raíz, cuya etiqueta de inicio ha de ser la primera de todas y la de cierre la última de todas. Cada elemento puede contener datos de carácter, elementos, ambas cosas a la vez o puede estar vacío. No se puede mezclar la anidación de las etiquetas: los elementos deben abrirse y cerrarse por orden. Los elementos pueden tener atributos (propiedades) que nos ofrecen información sobre ellos. Los valores de los atributos deben ir entrecomillados. Tanto atributos como valores son arbitrarios. Mayúsculas y minúsculas no son intercambiables. El espacio en blanco es libre, se puede utilizar para leer mejor el documento. Estructura de un documento XML Un documento XML tiene dos estructuras, una lógica y otra física. A) Físicamente, el documento está compuesto por unidades llamadas entidades. Una entidad puede hacer referencia a otra entidad, causando que esta se incluya en el documento. Cada documento comienza con una entidad documento, también llamada raíz. B) Lógicamente, el documento está compuesto de declaraciones, elementos, comentarios, referencias a caracteres e instrucciones de procesamiento, todos los cuales están indicados por una marca explícita. Las estructuras lógica y física deben encajar de manera adecuada: Los documentos XML se dividen en dos grupos, documentos bien formados y documentos válidos. Bien formados: Son todos los que cumplen las especificaciones del lenguaje respecto a las reglas sintácticas sin estar sujetos a unos elementos fijados en un DTD. De hecho los documentos XML deben tener una estructura jerárquica muy estricta y los documentos bien formados deben cumplirla. Un objeto de texto es un documento XML bien formado si:

Page 33: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 25

Cumple la regla denominada "document". Respeta todas las restricciones de buena formación Cada una de las entidades analizadas que se referencia directa o indirectamente en el documento está bien formada. LA REGLA “DOCUMENT” 1. Contiene uno o más elementos. 2. Hay exactamente un elemento, llamado raíz, o elemento documento, del cual ninguna parte aparece en el contenido de ningún otro elemento. 3. Para el resto de elementos, si la etiqueta de comienzo está en el contenido de algún otro elemento, la etiqueta de fin está en el contenido del mismo elemento. Es decir, los elementos delimitados por etique tas de principio y final se anidan adecuadamente mutuamente. Válidos: Además de estar bien formados, siguen una estructura y una semántica determinada por un DTD: sus elementos y sobre todo la estructura jerárquica que define el DTD, además de los atributos, deben ajustarse a lo que el DTD dicte. Aquí podemos ver un ejemplo muy sencillo: <?xml version=" 1.0 " encoding=" UTF-8 " standalone= " yes "?> <ficha> <nombre> Angel </nombre> <apellido> Barbero </apellido> <direccion> c/Ulises, 36 </direccion> </ficha> Lo primero que tenemos que observar es la primera línea. Con ella deben empezar todos los documentos XML, ya que es la que indica que lo que la sigue es XML. Aunque es opcional, es recomendable incluirla. Puede tener varios atributos, algunos obligatorios y otros no: versión: Indica la versión de XML usada en el documento. Es obligatorio ponerlo, a no ser que sea un documento externo a otro que ya lo incluía. encoding: La forma en que se ha codificado el documento. Se puede poner cualquiera, y depende del parser el entender o no la codificación. Por defecto es UTF-8, aunque podrían ponerse otras, como UTF-16, US-ASCII, ISO-8859-1, etc. No es obligatorio salvo que sea un documento externo a otro principal.

Page 34: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 26

standalone: Indica si el documento va acompañado de un DTD ("no"), o no lo necesita ("yes"); en principio no hay porqué ponerlo, porque luego se indica el DTD si se necesita. La "declaración de tipo de documento" define qué tipo de documento estamos creando para ser procesado correctamente. Es decir, definimos que declaración de tipo de documento (DTD) valida y define los datos que contiene nuestro documento XML. En ella se define el tipo de documento, y dónde encontrar la información sobre su Definición de Tipo de Documento, mediante: Un identificador público (PUBLIC): que hace referencia a dicha DTD. Identificador universal de recursos (URI): precedido de la palabra SYSTEM. Ejemplos: <!DOCTYPE MESAJE SYSTEM "mesaje.dtd"> <!DOCTYPE HTML PUBLIC "-/ /W3C/ /DTD HTML 3.2 Final/ /EN"> <!DOCTYPE LABEL SYSTEM "http://www.ulpgc.es/dtds/label.dtd"> Espacios de nombres Los espacios de nombres sirven para evitar las colisiones entre elementos del mismo nombre, y en general, para distinguir los distintos grupos de elementos en un mismo documento. Cada espacio de nombres se asocia con una URL, que sólo sirve como identificador único y no tiene por qué ser válida. Terminología Cuando un documento cumple con las reglas sintácticas que hemos descrito, se le denomina documento bien formado. Un documento válido, además de ser bien formado, cumple las restricciones que le imponen una DTD o un esquema XML. Cabecera La cabecera, que es opcional aunque recomendable, da información sobre cómo manejar el documento a los analizadores y otras aplicaciones. Puede contener:

Page 35: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 27

Una declaración XML para el analizador, con la versión, juego de caracteres utilizado, y una indicación de si el documento es o no autónomo (si requiere o no otros documentos). Instrucciones de proceso para otras aplicaciones. Una declaración DOCTYPE, que referencia a la DTD que restringe el documento. Que son los XLink y los Xpointer? Quienes han utilizado la Web alguna vez, saben hasta qué punto es importante el hiperenlaces. Sin embargo, no todo el mundo sabe que las nociones sobre hiperenlaces de la Web son bastantes reducidas comparadas con los sistemas de hipertexto comerciales y académicos. XML por si solo no puede corregir esto, pero existen dos normas asociadas: XLINk y Xpointer que dan un paso de gigante en la consecución de un entorno de hipertexto más avanzado. En HTML colocamos un enlace utilizando la etiqueta... y podemos enlazar a un único documento o al interior de este siempre y cuando este marcado con la etiqueta: .. La especificación XLink Se especifica como permitir el enlace entre documentos XML. Todavía esta en desarrollo, pero mediante esta especificación, cuando los navegadores la implementen, se podrá:

• Utilizar cualquier elemento del XML como origen de enlace. • Enlazar a más de un documento. • Crear enlaces fuera del documento. • Definir el comportamiento del enlace, etc.

La especificación XPointer Se define la sintaxis que nos permitirá enlazar al interior de un documento XML. Con esta nueva norma los enlaces ya no sólo serán a elementos ya marcados sino que se permitirán enlaces del tipo: "Enlaza a la primera aparición de la palabra Internet". Taller de ejercicios Resueltos <?xml version="1.0"?> <doc xml:base="http://example.org/today/" xmlns:xlink="http://www.w3.org/1999/xlink"> <head> <title>Virtual Library</title> </head>

Page 36: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 28

<body> <paragraph>See <link xlink:type="simple" xlink:href="new.xml">what's new</link>!</paragraph> <paragraph>Check out the hot picks of the day!</paragraph> <olist xml:base="/hotpicks/"> <item> <link xlink:type="simple" xlink:href="pick1.xml">Hot Pick #1</link> </item> <item> <link xlink:type="simple" xlink:href="pick2.xml">Hot Pick #2</link> </item> <item> <link xlink:type="simple" xlink:href="pick3.xml">Hot Pick #3</link> </item> </olist> </body> </doc> Los URIs en este ejemplo son transformados en URIs completos como se indica: "what's new" lleva al URI "http://example.org/today/new.xml" "Hot Pick #1" lleva al URI "http://example.org/hotpicks/pick1.xml" "Hot Pick #2" lleva al URI "http://example.org/hotpicks/pick2.xml" "Hot Pick #3" lleva al URI http://example.org/hotpicks/pick3.xml Cuestionario Elabora el siguiente cuestionario en una presentación PowerPoint, contéstalo y adjúntalo en tu página realizada en el capitulo de HTML. ¿Qué es un meta-lenguaje? ¿Qué significan las siglas XML? ¿Cuáles son las aplicaciones de XML? ¿Qué es DTD? Menciona 2 reglas básicas de la estructura sintáctica de un documento XML. ¿Cuáles son las dos estructuras de un documento XML? ¿Cuáles son los principales componentes de un documento XML? Menciona algunos editores de XML. Define con tus propias palabras respecto a las etiquetas, como trabaja XML. ¿Crees que es mejor XML sobre HTML? ¿Explica por que? Determina las ventajas y desventajas de trabajar con cada uno. Explica las diferencias entre ambos. (Elabora un cuadro comparativo) En XML ¿cuáles son los tipos de documentos?, explícalos. Investiga un poco más acerca de la regla DOCUMENT y explícala. ¿Qué es un XLINK y un XPOINTER?

Page 37: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 29

2.2. Elementos Multimedia

2.2.1. Imágenes, Video y Sonido Objetivos Durante este tema identificarás los formatos más comunes para elementos multimedia y experimentarás con ellos para ser utilizados en tu página HTML. Instrucciones

1. Revisa la presentación introducción a multimedia que se encuentra ubicada en la sección de material de apoyo del curso.

2. Realiza un trabajo de investigación de los formatos más comunes para imágenes utilizados en Internet.

3. Cambia el formato de las 2 imágenes que se encuentran en la sección de material de apoyo para llenar la tabla mencionada en el punto 4.

4. Una vez que hayas realizado el punto anterior, comprobarás tus conocimientos contestando la tabla que se encuentra en la sección de Material de Apoyo. Sigue las instrucciones que ahí se te dan.

5. Dentro de la página HTML que creaste en la sección anterior pon a prueba tu creatividad incrustando una imagen, un video y un sonido como fondo de tu página. Envía tu página comprimida a tu tutor para que sea evaluada.

Productos esperados / Evaluaciones Este tema se evaluará con la tabla y la página mencionada en las instrucciones y contará el 5% de la calificación final, siempre y cuando lo entregues en la fecha y forma acordada. Esta actividad se considerará como exitosa si el resultado de la evaluación realizada por tu tutor es arriba de 70/100. Material de Apoyo Aquí encontrarás el material de apoyo necesario para este tema indicado en las instrucciones. El término Multimedia en el mundo de la computación es la forma de presentar información que emplea una combinación de texto, sonido, imágenes, vídeo y animación.

Page 38: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 30

Entre las aplicaciones informáticas multimedia más comunes podemos mencionar juegos, programas de aprendizaje y material de referencia. La mayoría de las aplicaciones multimedia incluyen asociaciones predefinidas conocidas como hipervínculos o enlaces, que permiten a los usuarios moverse por la información de modo intuitivo. La conectividad que proporcionan los hipertextos hace que los programas multimedia no sean presentaciones estáticas con imágenes y sonido, sino una experiencia interactiva infinitamente variada e informativa. Las aplicaciones multimedia son programas informáticos, que suelen estar almacenados en CD-ROMs y claro que pueden residir en páginas de Web. Elementos visuales Cuanto mayor y más nítida sea una imagen, más difícil es de presentar y manipular en la pantalla de una computadora. Las fotografías, dibujos, gráficos y otras imágenes estáticas deben pasarse a un formato que el ordenador pueda manipular y presentar. Entre esos formatos están los gráficos de mapas de bits y los gráficos vectoriales. Los gráficos de mapas de bits almacenan, manipulan y representan las imágenes como filas y columnas de pequeños puntos. En un gráfico de mapa de bits, cada punto tiene un lugar preciso definido por su fila y su columna. Los gráficos vectoriales emplean fórmulas matemáticas para recrear la imagen original. En un gráfico vectorial, los puntos no están definidos por una dirección de fila y columna, sino por la relación espacial que tienen entre sí. Elementos de audio El sonido, igual que los elementos visuales, tiene que ser grabado y formateado de forma que la computadora pueda manipularlo y usarlo en presentaciones. Elementos de organización Los elementos multimedia incluidos en una presentación necesitan un entorno que empuje al usuario a aprender e interactuar con la información. Entre los elementos interactivos están los menús desplegables, pequeñas ventanas que aparecen en la pantalla del ordenador con una lista de instrucciones o elementos multimedia para que el usuario elija.

Page 39: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 31

Las barras de desplazamiento, que suelen estar situadas en un lado de la pantalla, permiten al usuario moverse a lo largo de un documento o imagen extensa. Los hipervínculos o enlaces conectan creativamente los diferentes elementos de una presentación multimedia a través de texto coloreado o subrayado o por medio de iconos, que el usuario señala con el cursor y activa pulsándolos con el mouse. Utiliza estas imágenes para cambiarlas en los diferentes formatos que has investigado

Imagen 1:

Imagen 2:

Page 40: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 32

Llena la Tabla siguiente con la información de las imágenes en sus diferentes formatos:

GIF JPG PCX BMP TIF

Tamaño en Bytes

Porcentaje de deformación

Porcentaje de pérdida de resolución

Porcentaje de nitidez

Toma en cuenta que deberás elaborar dos tablas, una para la imagen 1 y otra para la imagen 2

2.2.2. Animaciones Objetivos En esta sección aprenderás a crear animaciones básicas útiles para la buena presentación de tus páginas HTML. Instrucciones Revisa la presentación introducción a flash que se encuentra ubicada en la sección de material de apoyo del curso. Realiza la actividad que se encuentra en la sección de Evaluaciones para realizar una película sencilla y agrégala a tu página Web. Productos esperados / Evaluaciones Elabora una película sencilla en Flash, por ejemplo, donde muestres una pelota rebotando.

Page 41: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 33

Pasos a seguir:

1. Una vez que haz entrado a Flash, crea un nuevo documento con el color de fondo que más te agrade.

2. Ahora selecciona la herramienta: dibujar ovalo 3. Coloca la figura dentro del escenario, y elige el color de relleno de tu

agrado. 4. Inserta una nueva escena, en la cual debes poner nuevamente la figura,

pero en otra posición, estableciendo la secuencia de rebote. 5. Repite el paso 4 cuantas veces sea necesario. 6. Una vez terminada la película, guarda el archivo y pruébalo usando el menú

Control---TestMovie. 7. Crea una nueva liga en la página que realizaste en la sección anterior, y

anexa tu animación. 8. Dentro del Material de Apoyo podrás ver un ejemplo similar.

Para evaluar este tema: Deberás enviar a tu tutor tu página HMTL en la que incluirás las animaciones realizadas aquí. Este trabajo representa el 7.5% de la calificación final, siempre y cuando lo entregues en la fecha y forma acordada. Esta actividad se considerará como exitosa si el resultado de la evaluación de tu página es arriba de 70/100. Material de Apoyo Aquí encontrarás el material necesario para elaborar una sencilla animación usando Flash. Sigue las instrucciones que se te dan en la presentación y al final de ella tendrás una película que deberás incluir en tu página. INTRODUCCION A FLASH CONOCIENDO FLASH Se te recomienda que antes de empezar a elaborar tu propia película, veas una ya terminada que podrás encontrar dentro de la carpeta de Flash 5-- Tutorial ---Terminado, para darte una idea de lo que puedes hacer. Puedes seguir la siguiente ruta:

C:\Archivos de programa\Macromedia\Flash5 \Tutorial\Finished

Page 42: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 34

ENTORNO DE TRABAJO DE FLASH Para crear y editar películas, normalmente se trabaja con las siguientes funciones:

• Escenario, área rectangular en la que se reproduce la película. • Línea de tiempo, donde se animan los gráficos respecto al tiempo • Símbolos, componentes de los medios reutilizables de la película. • La ventana Biblioteca, donde se organizan los símbolos • El Explorador de películas, que ofrece una descripción general de una

película y su estructura. • Paneles acoplables y flotantes, que permiten modificar los distintos

elementos de la película y configurar el entorno de creación de Flash para adaptarlo a sus necesidades concretas.

ESCENARIO Al igual que en un largometraje, las películas de Flash dividen el tiempo en fotogramas. En el Escenario se compone el contenido de los fotogramas individuales de la película, dibujándolos directamente o bien organizando ilustraciones importadas. LINEA DE TIEMPO En la Línea de tiempo se coordina el tiempo de la animación y se ensambla la ilustración en distintas capas. La Línea de tiempo muestra todos los fotogramas de la película. Las capas actúan como una serie de hojas de acetato transparente superpuesta, manteniendo las diferentes ilustraciones por separado, de forma que puedan combinarse distintos elementos en una imagen visual cohesionada. SIMBOLOS Los símbolos son elementos reutilizables que se usan en una película. Pueden ser gráficos, botones, clips de película, archivos de sonido o fuentes. Al crear un símbolo, éste se almacena en la Biblioteca. Al colocar un símbolo en el Escenario, se está creando una instancia del símbolo. VENTANA BIBLIOTECA Aquí se guardan y organizan los símbolos creados en Flash, además de archivos tales como archivos de sonido, imágenes de mapa de bits,etc. En la ventana Biblioteca puedes organizar en carpetas los elementos de biblioteca, ver con qué frecuencia se utilizan en una película y ordenarlos por tipo.

Page 43: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 35

PANELES Los paneles permiten ver, organizar y modificar los elementos de una película de Flash.

• Utilizando estos paneles es posible modificar símbolos, instancias, colores, tipo, fotogramas y otros elementos.

• También son usados para personalizar la interfaz de Flash, manteniendo visibles los paneles necesarios para una determinada tarea y ocultando los demás.

CREACIÓN DE UNA PELÍCULA Ejecuta los siguientes pasos:

• Selecciona Archivo > Nuevo. • Elige Modificar > Película: Aparecerá el cuadro de diálogo Propiedades de

película. • En la opción Velocidad de fotogramas, introduzca el número de fotogramas

de animación que deben por segundo. La mayoría de las animaciones no necesitan una velocidad mayor de 8 a 12 fps (fotogramas por segundo).

• En la opción Dimensiones, elija una de estas opciones: • Introduzca valores en los campos Anchura y Altura para especificar el

tamaño del Escenario en píxeles. • Da click en Coincidir contenido para establecer el tamaño del Escenario de

forma que el espacio que rodea el contenido sea igual en todos los lados. • Elige un color en la muestra de colores de fondo, para establecer el color de

fondo de la película. • Da clic en Aceptar.

ESCENAS Para la realización de una película, son comúnmente usadas las escenas, ya que éstas en conjunto conforman a la película. Inserción de una escena: Supongamos que deseas realizar una película que consta de varias escenas, por default se abre una escena al crear un documento Flash, por lo que si deseas crear una secuencia de escenas, deberás colocar los objetos necesarios en tu primera escena, posteriormente inserta otra escena utilizando el menú Insertar-----Escena. Una vez realizado lo anterior, coloca los objetos que deseas en tu escena siguiente, que deberán estar situados en una posición distinta a la anterior. BARRA DE HERRAMIENTAS

Page 44: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 36

Consta de cuatro secciones:

• La sección Herramientas contiene las herramientas de dibujo, pintura y selección.

• La sección Ver contiene herramientas para ampliar y reducir, así como para realizar recorridos de la ventana de la aplicación.

• La sección Colores contiene modificadores de los colores de trazo y relleno. • La sección Opciones muestra los modificadores de la herramienta

seleccionada, que afectan a las operaciones de pintura o edición de dicha herramienta.

Figura Barra de Herramientas. Para seleccionar una herramienta, de clic en la herramienta que desea utilizar o use el método abreviado del teclado para la herramienta. Una vez seleccionada la herramienta que desea, podrá elegir uno de un conjunto de modificadores específicos que se muestran en la parte de debajo de la barra. Documentos flash Un documento Flash se guarda con extensión fla (*.fla), mientras que la película se genera tras ejecutar el documento, por lo que automáticamente se guardará con extensión swf (*.swf)

Page 45: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 37

3. Formularios Web

3.1. Introducción Objetivos Al finalizar este tema tendrás la capacidad de crear aplicaciones ASP.Web usando la tecnología .NET. Además, conocerás los principales elemento que se presentan a un usuario a través de su navegados, esto es, una página Web o Formulario Web. Actividad 1 Nombre de la Actividad: Acercando la tienda al cliente Objetivo: Al finalizar esta actividad podrás comprender el impacto que puede causar que un negocio esté en línea. Escenario: Imaginemos a una empresa pequeña, Seven Cycles, dedicada a la producción y venta de bicicletas, que busca una forma de venta altamente efectiva para introducir sus productos al mercado, sin la necesidad de un intermediario que aumente sus costos, y reduzca sus ganancias. Para tal propósito, se requiere la integración de una base de información (hojas de datos, fotografías, etc.) Instrucciones: Ejecuta el video clip “SevenCycle”, incluido en la sección de materiales de apoyo para esta sección, y analízalo con atención. Imagina que eres el/la encargad@ de desarrollar aplicaciones Web en la compañía Seven Cycles, y se te pide desarrollar el sitio de la empresa para la venta de la nueva bicicleta. Deberás entregar por escrito los requerimientos técnicos (herramientas a utilizar) y de información, que requieras para desarrollar a la brevedad posible este sitio. Coloca tu documento de especificación de requerimientos en la sección de tareas correspondientes a esta sección. El nombre de tu documento debe seguir el formato especificado en las reglas del Juego. La fecha límite de entrega es el día: ___________ a las __________ horas

Page 46: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 38

Productos esperados / Evaluaciones Este tema se evaluará con el documento que entregarás, tu respuesta deben ser detallada y justificada, se tomará en cuenta tu creatividad, originalidad y que cubra con los elementos especificados. Este trabajo contará el ¿?% de la calificación final, siempre y cuando lo entregues en la fecha y forma acordada. Guía para el profesor

1. Verificar que se encuentra el video clip “SevenCycle” en la sección de materiales del curso.

2. Revisar el documento que el alumno ha obtenido un panorama bien definido de la importancia de una aplicación Web.

Actividad 2 Nombre de la Actividad: Conociendo ASP.NET Objetivo: Al finalizar esta actividad serás capaz de identificar los principales componentes del framework de .NET, explicarás el modelo de ejecución de ASP.NET y el proceso de desarrollo de una aplicación Web ASP.NET Instrucciones:

1. Estudia con atención la presentación Introducción ASP.NET que se encuentra ubicada en los materiales de apoyo del curso.

2. Visita el FORO para la actividad 2 que se encuentra en la página principal del curso (Moodle)!!!!!! Y agrega tu aportación a lo siguiente: ¿Por qué crees que ASP.NET sea una buena opción para desarrollo de aplicaciones Web? justifica tu respuesta

Productos esperados / Evaluaciones Este tema se evaluará con la aportación que realices a la pregunta incluida en el foro, tus respuestas deben ser detalladas y justificadas, se tomará en cuenta tu creatividad y originalidad. Este trabajo contará el ¿?% de la calificación final, siempre y cuando lo entregues en la fecha y forma acordada. Guía para el profesor Verificar que la liga a la presentación se encuentra disponible y activo en la sección de materiales de apoyo para este tema

Page 47: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 39

Materiales de apoyo Aquí encontrarás los materiales de apoyo para este capítulo

• Da click aquí para ver el video clip "Seven Cycles", indicado en la actividad 1 de esta sección.

• Da click aquí para iniciar la presentación de introducción a ASP.NET, indicada en la actividad 2 de esta sección.

Introducción al Framework de Microsoft .NET y a ASP.NET Agenda

• Pre-requisitos • Fundamentos Arquitectura Web • Introducción al Framework de .NET • Bosquejo de ASP.NET • Repaso de Visual Studio .NET • Creando el proyecto de una aplicación Web ASP.NET

Pre-requisitos Este modulo asume que:

• Entiendes los fundamentos de Programación C# • Tiendes familiaridad con el ambiente de desarrollo integrado (IDE) Visual

Studio .NET

No es indispensable que cuentes con conocimientos previos en desarrollos Web (HTML, JavaScript, DHTML, CGI, Active Server Pages); sin embargo te serían de ayuda. Fundamentos Arquitectura Web

Page 48: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 40

Fundamentos tecnologías de desarrollo Web Tecnologías del lado del Cliente

• HTML, DHTML, JavaScript

Tecnologías del lado del Servidor • ASP (Active Server Pages)

ASP.NET es la siguiente generación de ASP Lección: Introducción al Framework de .NET

• Qué es el Framework de .NET? • Qúe problemas soluciona .NET? • Los componentes del Framework de .NET • Beneficios al usar el Framework de .NET • Visual Studio .NET: La herramienta para desarrollar .NET

¿Qué es el Framework de .NET?

Cliente

Solicitud: http://www.digimon.com/default.asp

PC/Mac/Unix/... + Navegador

HTTP, TCP/IP

Respuesta: <html>….</html>

Servidor Web

Red

Servidor

Page 49: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 41

¿Qué problemas soluciona .NET?

• Aún con Internet, la mayoría de las aplicaciones y dispositivos tienen problemas al comunicarse unos con otros

• Los programadores terminan escribiendo infraestructura en lugar de aplicaciones

• Los programadores tienen que limitar sus alcances o continuamente aprender nuevos lenguajes

Los Componentes del Framework .NET

Herramientas de desarrollo

Framework .NET

Clientes

Aplicaciones Web ASP.NET

Bases de Datos

Servicios Web XML

Experiencias del usuario

Page 50: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 42

Beneficios al usar el Framework de .NET

• Estar basado en estándares y prácticas Web • La funcionalidad de las clases de .NET está universalmente disponible • El código está organizado dentro de namespaces (espacios con nombre)

jerárquicos y clases • Independiente del lenguaje

WWiinn3322

MMeessssaaggee QQuueeuuiinngg

CCOOMM++ ((TTrraannssaa ccttiioonnss,, PPaarrttii ttiioonnss,,

OObbjjeecctt PPooooll iinngg))

II IISS WWMMII

CCoommmmoonn LLaanngguuaaggee RRuunnttiimmee ((CCLLRR))

..NNEETT FFrraammeewwoorrkk CCllaassss LLiibbrraarryy

AADDOO..NNEETT aanndd XXMMLL

XXMMLL WWeebb SSeerrvviicceess UUsseerr IInntteerrffaaccee

Visual Basic

C++ C#

AASSPP..NNEETT

Perl Python …

Page 51: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 43

Visual Studio .NET: La herramienta de desarrollo .NET

WWiinnddoowwss

AAPPII AASSPP

..NNEETT FFrraammeewwoorrkk

1980’s 1990’s 2000’s

VViissuuaall BBaassiicc

MMFFCC//AATTLL

Visual Studio .NET

Herramientas para Formularios Windows

Herramientas para Formularios Web

Manejo de Errores

Acceso a Datos

Multiples Lenguajes

Herramientas para Web Services

Desarrollo Pruebas Instalación Diseño

Page 52: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 44

Lección: Repaso de Visual Studio .NET

• ¿Por qué Visual Studio .NET? • Ambiente integrado de desarrollo (Integrated Development Environment -

IDE) • Demostración: Usando el IDE de Visual Studio .NET

¿Por qué Visual Studio .NET? Visual Studio .NET simplifica el desarrollo de soluciones Web poderosas y confiables e incrementa la eficiencia del desarrollador proporcionándole un ambiente de desarrollo familiar y compartido Además, incluye las siguientes características:

• Un IDE para múltiples lenguajes y múltiples tipos de proyectos • Múltiples lenguajes dentro de un solo proyecto • Múltiples tipos de proyectos dentro de una sola solución • Navegador integrado • Soporte de depuración (debugging) • Interface personalizable

Ambiente de desarrollo integrado (IDE) El ambiente de desarrollo integrado (IDE) de Visual Studio .NET contiene múltiples ventanas que proveen una variedad de herramientas y servicios

• Muchas de estas características están disponibles desde diversas ventanas, menús y barras de herramientas del IDE.

El Editor/Navegador es la ventana de interface principal en Visual Studio .NET.

• En modo Editor, el editor/navegador despliega código para editar y provee una interface gráfica “Lo que ves es lo que tienes” (What You See Is What You Get (WYSIWYG)) para colocación de controles.

• Se puede crear un diseño visual de la aplicación simplemente arrastrando y soltando controles de la barra de herramientas

• El diseño de la lógica de la aplicación se puede manejar modificando el código default del control Web.

Page 53: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 45

Ambiente de desarrollo integrado (IDE)

Ambiente de desarrollo integrado (IDE) Las opciones de pantalla para el editor son: modo Diseño y modo HTML

Lección: Introducción a ASP.NET

Barra de herramientas

Lista de tareas

Explorador de Soluciones

Ayuda dinámica

Editor/Navegador

Propiedades Explorador

del servidor

Object Navegador( Browser)

Page 54: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 46

• ¿Qué es ASP.NET? • Conceptos centrales de ASP.NET • Una Aplicación Web ASP.NET • El Modelo de ejecución ASP.NET

¿Qué es ASP.NET?

• Evolutivamente, el sucesor más flexible de páginas de Servidor Activo ( Active Server Pages) ASP

• Páginas Web dinámicas que pueden acceder a recursos del servidor • Páginas de formularios Web que se procesan del lado del servidor • Servicios Web XML que permiten crear aplicaciones Web distribuidas • Independencia del navegador • Independencia del lenguaje

Elementos de una página ASP.NET Elemento Descripción

Etiquetas HTML estáticas

Estos elementos HTML estándar son tratados por ASP.NET como controles literales, y son procesados por el explorador del cliente como si estuvieran representados en un archivo fuente

Comentarios HTML Su sintaxis es: <! -->. Este texto es mandado al cliente pero no es procesado por el explorador

Directivas Las directivas, como la @ Page, ofrecen al ejecutable de ASP.NET información de cómo procesar la página. Usar directivas ayuda a controlar las funcionalidades de ASP.NET como el estado de sesión, el enrutamiento de eventos y almacenamiento de caché, así como a importar espacios de nombre (namespace) y registrar los controles personalizados para usarlos dentro de la página

Page 55: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 47

Elementos de una página ASP.NET Elemento Descripción

Código del servidor El código puede ser incluido tanto en bloques de declaración de servidor <script> como en bloques de procesado <%%>.

Controladores de eventos Los controladores de eventos son procedimientos en código <script> que controlan los eventos de la página y del servidor, como Page_Load o Click . La mayoría del código ASP.NET debe ser escrito o llamado desde los controles de eventos, mejor que ser escri to en bloques de procesamiento.

Bloques <script> de declaración de código

Estos bloques son usados para almacenar procedimientos a nivel de página y para declarar variables que son globales en la página. El código ejecutable, y otras variables de las declaradas en los bloques de declaración de código, deben ser introducidos dentro de una declaración de procedimiento. Los bloques de declaración de código de servidor deben tener el atributo runat=server

Bloque de procesamiento <%%>

Estos bloques son usados para almacenar código ejecutable que no está dentro de los procedimientos.

Bloques <script> del cliente Estos bloques son usados para almacenar secuencias de comando que han de ser ejecutadas en el cliente, normalmente en respuesta a un evento del cliente. La elección del lenguaje (establecido en el atributo languaje) está supeditada a los lenguajes compatibles con el explorador. JavaScript es la elección más común.

Comentarios del servidor Su sintaxis es: <% --%> Este texto NO es enviado al cliente.

Controles de usuario Estos son los controles personalizados que están declarados con la extensión .aspx. Ofrecen un mecanismo sencillo y directo de reutilizar los IU y su código, y pueden contener los mismos elementos que las páginas Web Form.

Controles de Servidor ASP.NET

El conjunto de estos controles ofrecen a los programadores de ASP.NET un modelo de programación que imita al Visual Basic. Los controles se añaden a una página, y los programadores escriben código para controlar los eventos producidos por la interacción de los clientes con dichos controles. ASP.NET ofrece dos grupos de controles: los controles HTML, en los que hay una asignación 1 a 1 con los controles de servidor para la mayoría de los elementos HTML, y los controles Web, que ofrecen un conjunto de controles muy similares a los controles UI de Visual Basic.

Controles de servidor personalizables

Los controles de servidor personalizables son otro mecanismo para la reutilización en ASP.NET. Estos están definidos por los archivos de clase (archivos .vb o .cs) y son precompilados en ensamblados (assamblies) antes de su uso.

Page 56: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 48

Conceptos centrales de ASP.NET

• Separar presentación de lógica del negocio • Separar aspecto de la página con respecto a la lógica del programa • Usar servicios provistos por el .NET Framework • El código es compilado la primera vez que se accede a una página • Administración de estado • Utilización de cualquier lenguaje

o Integración entre varios • ¡Actualizar archivos mientras se está ejecutando la aplicación!

Plataforma de desarrollo de Web Nuevo modelo de programación

Cliente Web

Sistema Operativo

Aplicaciones ASP.NET IIS

.NET Framework

Las aplicaciones ASP.NET se implementan a través del mecanismo por el cual un navegador (o cliente Web) accede a una página por una dirección o URL. Esta dirección, apunta a un

conjunto de archivos que se brindan como servicios a través del Internet Information Server (IIS)

En el caso de las aplicaciones ASP.NET, éstas páginas son el portal de entrada para acceder a nuestro código que se encuentran dentro

del proceso de este servicio IIS

Las aplicaciones ASP.NET acceden al conjunto completo del .NET Framework y todas sus clases bases, para poder

interactuar con el Sistema Operativo (SO)

Si la página no implementa código de lógica, entonces

es directamente el servicio de IIS quien accede al SO y brinda el resultado como código HTML

al navegador o cliente Web

Esto de alguna forma nos lleva a pensar que el modelo de programación cambia,

debemos considerar nuestras aplicaciones como conjuntos de código

que en todas los casos terminan brindando código HTML que representa

la presentación hacia el usuario

Page 57: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 49

Aplicación Web ASP.NET

Modelo de Ejecución ASP.NET

XML Data Database

Internet

Página1. aspx

Página2. aspx

Web Services

Componentes

Formulario Web

Páginas de código oculto

global. asax

Web. config

machine. config

ASP.NET Web Server

Cache

de

sa l i da

Clientes

Page 58: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 50

Creando un proyecto de aplicación Web ASP.NET

• El proceso de desarrollo • Archivos de la aplicación Web • Estructura de los archivos de la aplicación Web

Page 59: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 51

El proceso de desarrollo

Archivos de la aplicación Web Archivos de solución (.sln, .suo) Archivos de Proyecto (.vbproj, .csproj) Archivos de la aplicación Web

• ASP.NET Web Forms (.aspx) • ASP.NET Web services (.asmx) • Clases, código oculto (code-behind pages) (.vb or .cs) • Clases de aplicación global (.asax) • Archivo de configuración (Web.config)

Proyecto assembly (.dll)

Crear una especificación

de diseño

Construi r

Probar y depurar

Crear la y escribir interface

código

Crear un nuevo Proyecto

Visual Studio .NET Instalar

La especificación de diseño es el anteproyecto que se usará cuando se cree la aplicación

Web

Cuando se selecciona una nueva platilla de proyecto, Visual Studio

.NET automáticamente crea los archivos y el código default que son necesarios para soportar el

proyecto

Para crear la interface para tu aplicación Web, primero se necesita colocar los

controles y objetos de las páginas Web usando la ventana del Editor/Navegador

en modo diseño. Después, escribir código para los procedimientos de eventos

Cuando se construye el proyecto, se compila todo el código de las páginas Web y otros archivos de

clases dentro en librerias dinámicas (DLL) llamadas

assemblys Cuando un proyecto esta completamente

depurado y la liberación ha sido construida, se puede instalar los archivos

necesarios en un Servidor Web de producción

Page 60: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 52

Estructura de los archivos de aplicación Web

Máquina de compilación y ejecución

wwwroot

Bin

Inetpub

ProjectoA

MisDocumentos

Archivos de desarrollo

Archivos Assembly

WebForm1.aspx WebForm1.aspx.vb (Código oculto)

Solucion

Solucion.sln ProjectoA.vbproj

ProjectoA.dll Construir

Visual Studio

Código Nativo

Código C# Código Visual Basic .NET

Cual lenguaje?

Compilador Visual Basic .NET

Compilador C#

MSIL Compilador JIT

default.aspx

Máquina

html

Page 61: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 53

3.2. Controles de Servidor Objetivos En este tema aprenderás a crear y utilizar controles de la interfaz de usuario reutilizables que puedan encapsular funcionalidades comunes y, así, reducir la cantidad de código que tiene que escribir el programador de una página. Actividad 1 Nombre de la Actividad: Introducción a Formularios ASP.NET y a los controles de servidor Objetivo: Al finalizar esta actividad comprenderás que son los formularios Web, los controles de Servidor y los controles de usuario Instrucciones: Estudia con atención la presentación Introducción a los Controles de servidor que se encuentra ubicada en los materiales de apoyo del curso Una vez que hayas estudiado este tema, comprobarás tus conocimientos contestando el quiz Controles de Servidor que se encuentra en la entrada principal de este capítulo. Sigue las instrucciones que ahí se te indican. Productos esperados / Evaluaciones Este tema se evaluará con el cuestionario. Este cuestionario contará el ¿?% de la calificación final, siempre y cuando lo entregues en la fecha y forma acordada. Guía para el profesor Verificar que la liga a la presentación se encuentra disponible el material de apoyo y el cuestionario. Actividad 2 Nombre de la Actividad: Mi primer diseño de formularios Web Objetivo: Al finalizar esta actividad serás capaz de reconocer los elementos que se requiere en la interface del lado del cliente, hacer un diseño y crear tu primera página Web utilizando controles que se ejecutan del lado del servidor.

Page 62: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 54

Instrucciones: Utilizando lo aprendido sobre controles de servidor, crea un formulario para capturar la información de los clientes de Seven Cycles de tal forma que estos puedan realizar sus compras en línea. La información mínima que se requiere es:

1. Titulo (Usar DropDownList) 2. Nombre y apellidos (TextBox) 3. Sexo (RadioButtons) 4. Direccion para envió de correspondencia

a. Calle (TextBox) b. Ciudad (TexBox) c. Estado (DropDownList) d. Codigo Postal (TextBox)

5. Direccion para entrega a. Calle (TextBox) b. Ciudad (TexBox) c. Estado (DropDownList) d. Código Postal (TextBox)

6. Correo electrónico (textBoxt) 7. Opciones de tipo de entrega (UPS, DHL, FedEx, etc.) (DropDownList) 8. Selección de producto (modelo) (DropDownList) 9. Botón Enviar 10. Botón Limpiar • Realiza un bosquejo de tu interface en "papel”. Esto es, la distribución

de las cajas de texto, etiquetas, listas desplegables, etc. • Con tu diseño en papel en mano, realiza el diseño de la página

utilizando Visual Studio .NET. • Sientete en libertad de escoger la distribución de los controles, los fonts,

colores, estilos, etc. de tal forma que luzcan bien. • Por ahora solo debes preocuparte por el diseño de la página y no por el

código detrás de esta. • Coloca tu archivo .aspx en la sección de actividades del curso hasta

antes del día ___________________ Productos esperados / Evaluaciones Este tema se evaluará con el diseño del formulario WebForm que entregarás, se tomará en cuenta que toda la información se encuentre incluida en el formulario en la forma solicitada. Además, se evaluará tu creatividad y

Page 63: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 55

originalidad en el diseño de la página. Este trabajo contará el ¿?% de la calificación final, siempre y cuando lo entregues en la fecha y forma acordada.

Actividad 4 Nombre de la actividad: Escritura de las páginas de código oculto (code behind page) Objetivo: Al finalizar esta actividad reforzarás tu aprendizaje en la escritura del código oculto detrás de cada control. Instrucciones:

1. Tomando como base el diseño de tu formulario desarrollado en la actividad anterior “Mi Diseño de Formularios WebForms”, agrega el código correspondiente a cada control.

2. Usa controles de validación para forzar que los siguientes campos sean requeridos: Titulo, Nombre, y dirección para envío de correspondencia. Si estos campos no son especificados, despliega un asterisco en rojo a la derecha de cada uno.

3. Usa el control ValidationSummary para especificar el mensaje siguiente “Hay errores en la forma, vea los campos marcados con *”.

4. Usa un Validation control para forzar que el código zip contenga 5 enteros. 5. Una vez que consigas que lo básico de la forma trabaje, cambia el campo

de dirección a un control de usuario. Usa este control para ambas direcciones.

6. Coloca publicas las propiedades get/set para cada campo de la dirección. 7. Coloca tu archivo .aspx.cs en la sección de actividades del curso hasta

antes del día ___________________ Productos esperados / Evaluaciones Este tema se evaluará verificando la funcionalidad y operatividad de tu formulario webform. Se probaran todos los controles con diferentes casos de prueba. Además, se evaluará tu creatividad y originalidad en el diseño de la página. Este trabajo contará el ¿?% de la calificación final, siempre y cuando lo entregues en la fecha y forma acordada. Materiales de apoyo Aquí encontrás los materiales de apoyo para este capítulo Presentación de introducción a Formularios Web, indicada en la actividad 1 de esta sección.

Page 64: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 56

Introducción a los Formularios (Web Forms) Microsoft ASP.NET Agenda

• Qué son los Formularios (Web Forms) • Qué son los Controles de servidor • Convirtiendo una página HTML a una Web Form • Qué son los Controles de usuario

¿Qué es un Formulario Web?

• Los Web Forms o Formularios Web son los distintos elementos que se presentan a un usuario a través de su navegador

• Son páginas cuya extensión es .aspx • Contiene atributos de página • La directiva @ Page. • Atributos de cuerpo (body attributes) • Atributos de la forma (form attributes)

<%@ Page Language=“c#" Codebehind="WebForm1.aspx.cs" SmartNavigation="true"%> <html> <body ms_positioning="GridLayout"> <form id="Form1" method="post" runat="server"> </form> </body> </html>

• La directiva @Page puede tener distintos atributos, entre ellos la declaratoria que define con que lenguaje se ha escrito el código a ser ejecutado del lado del servidor

o <%@ Page Language=“c#“ %> o Este atributo define que compilador debe procesar la página

completa • Utiliza el modelo completo de objeto del .Net Framework • Contiene código HTML y declaraciones de controles del servidor

o Puede incluir script del lado del cliente o Puede incluir código del lado del servidor

Page 65: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 57

• Objetos programables que se ejecutan en el servidor Web o Exponen interfaces con propiedades y métodos que pueden ser

manipulados por nuestro código o Se encargan de generar el código HTML correcto (este proceso se

denomina “Rendering”) o Son capaces de generar distinto HTML de acuerdo al Navegador o Se identifican por el atributo runat=“server”

<asp:Button id="Button1" runat="server" Text="Submit"/> Tipos de Controles del lado del Servidor

• Controles HTML • Controles Web (Web controls)

o Controles intrínsecos o Controles para validación o Controles “ricos” o Controles de listas vinculables a datos

HTML Son los controles comunes de páginas HTML, pero capaces de utilizar el atributo runat=“server” Se encuentran definidos como objetos dentro del Namespace

• System.Web.UI.HtmlControls <input type="text" id="txtNombre" runat="server"> <span id="spnInicio" runat="server">Inicio</span>

Page 66: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 58

Web Controls Son objetos que se ejecutan del lado del servidor Poseen mayor funcionalidad, y pueden contener otros objetos Dependen del Namespace

• System.Web.UI.WebControls <asp:TextBox id="txtNombree" runat="server" Text="[Ingrese su nombre]"/> Web Controls Sintaxis del Control <asp:TextBox id="TextBox1" runat="server">Text_to_Display </asp:TextBox> HTML que es generado por el Web control <input name="TextBox1" type="text" value="Text_to_Display" Id="TextBox1"/> ¿Cómo trabajan los controles del servidor? Al procesarse la página, y encontrar un atributo runat=“server”

• Se genera el código HTML representativo del control, con sus propiedades • Asignándole a cada uno, un id único • Se agrega al formulario un cuadro de texto oculto, para almacenar el

“estado” de la página (“__VIEWSTATE”) El __VIEWSTATE

• Uno de los problemas para los Web sites es como guardar el estado de los controles (inicializaciones y entradas del usuario) en las páginas Web, así como los viajes HTML de ida y vuelta entre el cliente y el servidor

• Como es verdad para cualquier tecnología basada en HTTP, los Web Forms son “menos-estado”, lo cual significa que el servidor no retiene información antes de la solicitud del cliente

• Los formularios ASP.NET manejan el problema de almacenar el estado de los controles Web agregando un control oculto llamado __VIEWSTATE, que registra el estado de los controles en la Web Form.

Salvando View State Almacenado en la Web Form el par nombre-valor del control oculto __ViewState

Page 67: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 59

<form name="Form1" method="post" action="WebForm1.aspx" id="Form1"> <input type="hidden" name="__VIEWSTATE" value="dDwtMTA4MzE0MjEwNTs7Pg==" /> 'HTML here </form> Para maximizar el rendimiento de la página, se puede deshabilitar los atributos del ViewState al nivel de página y habilitar el ViewState solo para los controles seleccionados <%@ Page EnableViewState="False" %> <asp:ListBox id="ListName" EnableViewState="true" runat="server"> </asp:ListBox> Demostración: Convirtiendo controles HTML a controles del Servidor Una página asp

• Sin controles del lado del servidor Se convierte en aspx

• Paso a Paso Creando scripts en la página Si deseamos colocar el código de ejecución del lado del servidor entre mezclado con código HTML

• Se debe indicar el lenguaje a utilizar o <script language="VB" runat="server"> o <script language="C#" runat="server">

• Las funciones y procedimientos se declaran acorde al lenguaje <SCRIPT LANGUAGE=“C#" runat="server"> void Ingreso() { // Proceso de autenticación} </SCRIPT> Ciclo de ejecución de la Página Teniendo nuestra página ya completa es importante comprender como funciona la ejecución de la página dentro de ASP.NET

• Cada vez que el navegador accede a ésta, se dispara primero y se ejecuta todo el código declarado en el evento Page_Init

• Después el código en Page_Load completo • A continuación se genera toda la página • Y por último se ejecuta el código del Page_Unload

Page 68: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 60

Ciclo de ejecución de la Página

• Teniendo la página presentada en el navegador, pueden suceder algunos de los eventos de los objetos presentes

o Por ejemplo: el evento click de un botón o el evento Change de un TextBox

• En cualquiera de los casos el ciclo repite los eventos Page_ (marcados en gris en la diapositiva siguiente).

• Al terminar el ciclo la página es descartada, no persiste en el navegador Ciclo de ejecución de la Página

Controlando el ciclo de un formulario La página “recuerda” su estado en “__VIEWSTATE” El Page_OnLoad se ejecuta CADA vez que se llama a la página

o Aún cuando se haga para “atrapar” un evento o Hay que tener cuidado acerca del seguimiento de cada uno de los pasos

Por ello, es necesario preguntar por IsPostBack del objeto Page, para saber si es o no la primera vez que se accede a una página

o Si es TRUE indica que la página se ha vuelto a llamar así misma por cualquiera de los eventos que cualquiera de los controles haya expuesto.

Textbox1_Changed

Page_Init

Page_Load

Button1_Click

Page_Unload

Se Descarta la página

Page 69: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 61

o Si es FALSE indica que el navegador, para ese usuario, es la primera vez que accede a la página

Demostración: IsPostBack A continuación veremos un pequeño ejemplo de código de:

o Cómo se llama constantemente a Page_OnLoad al ejecutar una página y cómo puede controlarse esto.

o El uso del IsPostBack y el efecto que esto produce. Resumiendo Una vez que una página ha sido procesada y la salida visualizada por el explorador, la página y sus controles son descartados. Los pasos de este proceso son:

o El usuario pide la página desde el explorador o La página y los controles son cargados e inicializados o Si la página es el resultado de una devolución (PostBack), el control de

estado es cargado desde el visor de estados (campo oculto del formulario __VIEWSTATE), y cualquier cambio enviado por el usuario es aplicado.

o Tanto los valores originales del ViewState como los valores actualizados están disponibles en el código de servidor

o Se ejecutan los controles de eventos de página y los controles de eventos lanzados por las acciones de usuario

o El control de estado es guardado en el ViewState o La salida HTML de la página es visualizada en el explorador o Se descarta la página y los controles

Seleccionado el Control apropiado

Page 70: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 62

¿Y qué son los controles del usuario?

• Son una nueva funcionalidad de ASP.NET que ofrece un método simple y rápido para conseguir reutilizar el código de presentación

• Incrementan la eficiencia cuanod se usan en conjunto con la directiva outputCache

• Son llamados algunas veces controles declarativos (no como los controles de servidor, que son controles compilados)

• Consisten en marcas HTML y/o código ASP.NET almacenados en un archivo con extensión .ascx

• No pueden ser llamados directamente, sino en una página existente • No pueden contener elementos <html>, <body> o <form> • Usan la directiva @ Control para especificar cómo se debe comportar el

control de usuario • Añadir el atributo ClassName permite que el control de usuario esté

fuertemente tipado cuando es añadido mediante programa <%@ Control ClassName=“Myclase” %> Quiz Si te dieran una página Web con extensión .aspx ¿Qué buscarías para verificar que efectivamente es una Web Form?

• <%@ Page Language="c#" Codebehind="_.aspx.cs" Inherits="_"%> Y también por un <form … runat="server"> tag

Necesitas una funcionalidad específica tal como un caledario

El control interacturá con script cliente y servidor

Estás escribiendo una página que podría ser usada en una variedad de navegadores

Estás trabajando con páginas HTML existentes y quieres rápidamente agregar la funcionalidad de las páginas Web ASP.NET

Prefieres un modelo de programación como Visual Basic

Prefieres un modelo de objeto como HTML

UUssaa WWeebb SSeerr vveerr CCoonnttrroollss ssii:: UUssaa HHTTMMLL SSeerrvveerr CCoonnttrroollss ssii::

El ancho de banda no es problema El ancho de banda es limitado

Page 71: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 63

Si te dieran una página Web con extensión .aspx ¿Qué buscarías para verificar que hay Web server controls?

• <asp:ControlType …> y también el atributo runat="server" ¿Qué tipo de código o script genera un Web server control en el cliente?

• HTML Presentación de Controles de Servidor, indicada en la actividad 1 de esta sección. Usando Web Controls (Controles de Servidor) Agenda Usando código oculto (Code-Behind Pages) Agregando Procedimientos de Evento a Controles Web Usando Eventos de Página Recordando Tipos de Controles de Servidor

• Controles Intrínsecos • Demostración de uso de controles y eventos

Vinculación entre controles Controles de validación

• Demostración: Controles de validación Lección: Usando código oculto (Code-Behind Pages) Cómo implementar código Escribiendo código en línea (in Line Code) ¿Qué son las páginas de código oculto? Entendiendo como funciona el código oculto Cómo implementar código Existen tres métodos para agregar códigoa una Web Form:

• Poniendo código mezclado con el contenido del archivo (mixed) • Poniendo código en una sección separada del contenido del archivo (inline

code) • Poniendo código en un archivo separado (code-behind pages)

Page 72: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 64

El método default usado por Visual Studio .NET, es el de páginas de código oculto Escribiendo código Inline Código y contenido en el mismo archi vo Diferentes secciones en el archivo para código y HTML <HTML> <asp:Button id="btn" runat="server"/> </HTML> <SCRIPT Language="vb" runat="server"> Sub btn_Click(s As Object, e As EventArgs) Handles btn.Click ... End Sub </SCRIPT> <HTML> <asp:Button id="btn" runat="server"/> </HTML> <SCRIPT Language="c#" runat="server"> private void btn_Click(object sender, System.EventArgs e) { . . . } </SCRIPT> ¿Qué son los códigos ocultos? Separación del código y del contenido

• Desarrolladores y diseñadores de la UI pueden trabajar independientemente

FFoorrmm11..aassppxx FFoorrmm11..aassppxx FFoorrmm11..aassppxx..vvbb

oorr FFoorrmm11..aassppxx..ccss

<tags> <tags> ccóóddiiggoo

ccóóddiiggoo

Archivos separados Un solo archivo

Page 73: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 65

Entendiendo como trabajan las páginas de código oculto

• Crear archivos separados para la interface con el usuario y la lógica de la interface

• Usar la directiva @ Page para ligar los dos archivos • Pre-compilar o compilación JIT (Just In Time)

Page1.aspx <% @ Page Language="c#" Inherits="Project.WebForm1" Codebehind="Page1.aspx.cs" Src = "Page1.aspx.cs" %> Page1.aspx.cs public class WebForm1 { private void cmd1_Click() { … } }

• Ligando los dos archivos o La página .aspx debe estar asociada con la página de código oculto. o Visual Studio .NET agrega los siguientes tres atributos a la directiva

@ Page de la página .aspx, para lograr esta asociación: § Codebehind. Este es el atributo que Visual Studio .NET utiliza

internamente para asociar los archivos. § Src. Este atributo es el nombre de la página de código oculto,

y es usado si la aplicación Web no es precompilada § Inherits. Este atributo permite que a la página .aspx heredar

clases y objetos de la página de código oculto. • Compilación JIT

o Cuando una página es compilada (justo en tiempo- Just in Time (JIT)), las páginas de código oculto son compiladas la primera vez que el cliente solicita la página .aspx.

o Después de la primera solicitud, todas las subsecuentes solicitudes usan el archivo compilado existente.

o Por lo tanto, la primera solicitud de una página es más tardada, pero las subsecuentes solicitudes son más rápidas

o Si se desea usar la compilación JIT, se deberá usar el atributo Scr en la directiva @ Page de la página .

• Execusión

Page 74: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 66

o Cuando un usuario solicita la página .aspx, el archivo DLL procesa la solicitud entrante y responde creando el apropiado HTML y script y regresandolos a el navegador solicitante

• Precompilación o Si se omite el atributo Src en el archivo .aspx, la página es

precompilada cuando se construye la aplicación en Visual Studio .NET.

o Por default, Visual Studio .NET no agrega el atributo Src, por lo que todas las páginas de código oculto de las Web Forms en un proyecto, son compiladas cuando el proyecto es construido. Este proceso ahorra tiempo de procesamiento en el Web server y también simplifica la instalación del Web Site porque no se tiene que instalar las páginas de código oculto junto con las páginas .aspx.

Máquina de compilación y ejecución

¿Qué son los procedimientos de Evento? Acción en respuesta a una interacción del usuario con los controles de la página. Por ejemplo, un evento es generado al dar clic en el botón Save .

Page 75: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 67

Procedimientos de eventos

• Existen dos tipos de procedimientos de eventos: o Del lado del cliente (client-side)

§ Son eventos que son manejados en la computadora que solicitó la Web Form (el cliente)

§ Cuando un evento es generado, la información no es enviada al servidor, en lugar de esto, el navegador del cliente interpreta el código y también ejecuta la acción

o Del lado del servidor (server-side) § Son eventos que consisten de código compilado que reside en

el Web server. § Debido a que estos eventos requieren un viaje de ida y vuelta

al Web server, existe un número limitado de tipos de eventos de control que son soportados

Procedimientos de Eventos del lado del Cliente § Típicamente, usados solamente con controles HTML § Interpretados por el navegador y ejecutados en el cliente § No tienen acceso a los recursos del servidor § Usan <SCRIPT language=“javascript">

Page 76: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 68

Procedimientos de Eventos del lado del Servidor § Se usa con ambos controles de servidor: Web y HTML § El código es compilado y corre en el servidor § Tiene acceso a los recursos del servidor § Usa <SCRIPT language=“vb“ runat="server"> or <SCRIPT language=“cs"

runat="server">

Multimedia: Eventos del lado del cliente y del servidor

Creando Procedimientos de Evento Crear procedimientos de evento del lado del servidor en Visual Studio .NET involucra dos pasos § Primer paso: Crear e l control que generará el evento en la Web Form. § Segundo paso: proporcionar el código, en la página de código oculto, que

es necesario para manejar el evento Cuando se hace double-click en un control en Visual Studio .NET, este declara una variable (con el mismo nombre que el atributo id del control) y crea una plantilla de procedimientos de evento.

Page 77: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 69

Visual Studio .NET también agrega la palabra clave Handles, la cual adjunta el procedimiento de evento al control. Visual Studio .NET declara variables y crea una plantilla para procedimiento de evento public class WebForm1 : System.Web.UI.Page { protected System.Web.UI.WebControls.Button cmd1; private void InitializeComponent() { this.cmd1.Click += new System.EventHandler(this.cmd1_Click); this.Load += new System.EventHandler(this.Page_Load); } private void cmd1_Click(object sender, System.EventArgs e) { ... } } Usando la palabra clase Handles permite crear múltiples procedimientos de evento para un simple evento. Recordando el ciclo de vida de un evento de página

Page 78: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 70

Multimedia: El proceso Postback

Lección: Controles de eventos § Recordando Controles de eventos § Tipos de controles § Controles Intrínsecos

o Demostración: Ejemplo de Web control y Evento § Vinculación entre controles § Controles de validación

o Desmotración: Controles de validación Recordando Controles de Servidor § Objetos programables que se ejecutan en el servidor Web

o Exponen interfaces con propiedades y métodos que pueden ser manipulados por nuestro código

o Se encargan de generar el código HTML correcto (este proceso se denomina “Rendering”)

o Son capaces de generar distinto HTML de acuerdo al Navegador o Se identifican por el atributo runat=“server”

<asp:Button id="Button1" runat="server" Text="Submit"/>

Page 79: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 71

¿Con qué controles disponemos?

• HTML • Web Controls

o Intrínsecos § asp:list, asp:button, asp:checkbox, asp:table

o De validación § asp:RangeValidator, asp:RegularExpressionValidator

o Controles “ricos” § asp:calendar, asp:adrotator

o Listas vinculables de datos § asp: datagrid, asp:repeater, asp:datalis

Proveen nombres estándar, con propiedades comunes a los controles <asp:RadioButton BackColor="red" Text=" "... /> <asp:CheckBox BackColor="red" Text=" "... /> Incluyen propiedades específicas <asp:CheckBox Checked="True" ... /> Generan HTML acorde al navegador que llama a la página. <span> <input type="checkbox" id="ctrl1" checked="true" name="ctrl1"> <label for="ctrl1">Standard</label> </span> Controles Web Intrínsecos Los controles Intrínsecos

• Nos permiten generar controles comunes HTML pero a partir de definiciones y ejecución del lado del servidor.

• En general, los marcadores o tags, de estos controles empiezan con: < asp: ....

• Estos controles son capaces de decidir internamente cual es la mejor forma de generar el código HTML del lado del cliente acorde al navegador que éste este utilizando.

• Se puede definir la estructura de la página sin preocuparnos por diferencias funcionales de estilo o de presentación que puedan tener dependiendo de cada navegador

Page 80: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 72

Los eventos En principio, sólo los eventos “Clic” hacen que se llame nuevamente a la página y disparan la ejecución de código del lado del servidor.

• En algunos controles, se puede definir que llame la página en otros eventos o Propiedad: AutoPostBack o Esta propiedad esta por default en False, hay que cambiarlo a True.

Sólo soportan eventos “del lado del servidor” Demostración: Ejemplo de Web Control y Evento

• Agregaremos una DropDownListBox • Un TextBox • Un Botón • Eventos

o Cambiamos el contenido del TextBox al clic del botón o Y luego cuando cambia la selección (cambiando AutoPostBack)

Vinculación entre controles En casos como el ejemplo anterior, puede ser más fácil “vincular” un control a otro <asp:DropDownList id="lstPais" autoPostBack="True" runat="server" > Has Seleccionado: <asp:Label id=“TuPais" Text="<%# lstPais.SelectedItem.Text %>" runat="server" /> Se debe indicar por código la vinculación Sub Page_Load (s As Object, e As EventArgs) TuPais.DataBind() End Sub ¿Qué es Validación de la entrada?

• Verificar que el valor de un control es introducido correctamente por el usuario.

• Bloquear el procesamiento de una página hasta que todos los controles son válidos.

• Evitar spoofing o la adición de código malicioso

Page 81: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 73

Validación del lado del Cliente y del Servidor

• ASP.NET puede crear validaciones del lado del Cliente y del Servidor • Validación Client-side

o Depende de la versión del navegador o Retroalimentación instantanea o Reduce ciclos postback

• Validación Server-side o Repite todas las validaciones del lado del cliente o Puede validar en contra de almacenar datos

Controles de validación ASP.NET Permiten definir gráficamente cierto tipo de validaciones de los datos ingresados

• RequiredFieldValidator o El control debe tener contenido

• CompareValidator o El control debe contener lo mismo que otro

• RangeValidator

Page 82: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 74

o Elvalor del control debe estar dentro de un rango • RegularExpressionValidator

o El valor del control debe cumplir un patrón (máscara) • CustomValidator

o Se dispara un evento (cliente/servidor) donde se controla la validación

• ValidationSummary o Presenta un informe del resultado de los anteriores

Propiedades importantes

• ControlToValidate • Text • ErrorMessage • Display

Agregando controles de Validación a una Web Form

1. Agregar un control de validación 2. Seleccionar el control de entrada para validar 3. Establecer la propiedades de validación

<asp:TextBox id="txtName" runat="server" /> <asp:Type_of_Validator id="Validator_id" runat="server" ControlToValidate="txtName" ErrorMessage="Message_for_error_summary" Display="static|dynamic|none" Text="Text_to_display_by_input_control"> </asp:Type_of_Validator> Posicionando Controles de Validación Crear mensaje de error Seleccionar modo de despliegue :

• Estático (Static)

Page 83: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 75

• Dinámico (Dynamic)

Combinando Controles de Validation Se puede tener múltiples controles de validación en un simple control de entrada. Solo el RequiredFieldValidator checa controles vacíos.

Page 84: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 76

Ventajas de los controles de validación • General código Jscript o DHTML según el navegador que este accediendo

la página. • Encapsulan la funcionalidad de la capa de usuario • Es posible ejecutar validaciones del lado del Servidor • Normalizan la presentación de los mensajes

Demostración: Controles de validación A continuación, veremos como se colocan y configuran los diferentes controles de validación. Demostración: Script en el Cliente ¿Y si necesito algo de Script del lado del cliente? Es posible agregar código del lado el cliente, si se analiza el código fuente de la página generada, para ver los ID de los elementos HTML creados. Resumen

• Los formularios Web ASP.NET proporcionan una forma fácil y potente de generar interfaces de usuario Web dinámicas.

• Las páginas de formularios Web de ASP.NET pueden dirigirse a cualquier explorador cliente (no existe ningún requisito de cookies o de biblioteca de secuencias de comandos).

• Las páginas de formularios Web de ASP.NET proporciona compatibilidad sintáctica con páginas ASP existentes.

• Los controles de servidor de ASP.NET proporcionan una forma sencilla de encapsular funcionalidades comunes.

• ASP.NET incluye 45 controles de servidor integrados. Los programadores también pueden utilizar los controles generados por otros.

• Los controles de servidor ASP.NET pueden proyectar automáticamente HTML de alto y bajo nivel.

• Las plantillas ASP.NET proporcionan una forma sencilla de personalizar la apariencia y sensación de controles de servidor de lista.

• Los controles de validación de ASP.NET proporcionan una forma sencilla de realizar validaciones de datos declarativas en el cliente o en el servidor.

Quiz

¿Cual es la ventaja de usar código culto cuando de agrega funcionalidad al Web Form?

Page 85: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 77

• El código oculto permite la separación del código del contenido y permite que el desarrollador del código trabaje con el archivo de código oculto mientras que el diseñador de la interface trabaja con el archivo .aspx

¿Cómo es un procedimiento de Evento asociado con un evento de un control de servidor?

• En Visual C#, en el código oculto, una variable es creada con el mismo nombre que el control. En el método InitializeComponent, agrega el procedimiento de evento a la propiedad evento del control. private void InitializeComponent() { this.cmd1.Click += new System.EventHandler(this.cmd1_Click); } private void cmd1_Click(object sender, System.EventArgs e) { ... }

¿Cuales son los dos argumentos de un procedimiento de evento?

• Object es el objeto disparado del evento • EventArgs es información específica para el evento

¿Cómo es el código oculto asociado con una página .aspx?

• Los atributos siguientes de la directiva @ Page: o Src es la ubicación del código oculto. o CodeBehind es usado por Visual Studio .NET para localizar la

página oculta para edición o Inherits es la clase que esta implementada en el código oculto y

compilada en un assembly para el proyecto Revisar los ejercicios correspondientes a esta sección Realizar las operaciones paso a paso Conserve el proyecto para continuar con otros ejercicios del curso

Page 86: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 78

3.3. Controles de Usuario Objetivos En este tema aprenderás a usar controles de usuario para “encapsular” funcionalidad que se repite a lo largo de las páginas, como por ejemplo un menú para utilizar en todos los sitios. Actividad 1 Nombre de la Actividad: Introducción a los controles de Usuario Objetivo: Al finalizar esta actividad comprenderás que son los controles de Usuario, su relación con los controles de servidor y como usarlos para encapsular funcionalidad. Instrucciones:

1. Estudia con atención la presentación Controles de Usuario que se encuentra ubicada en los materiales de apoyo del curso.

2. Visita el FORO para la actividad 1 de este tema, que se encuentra en la página principal del curso (Moodle)!!!!!! Y agrega tu aportación a lo siguiente: Haz una lista de al menos 3 elementos, con algunas ideas de en donde se podría usar controles de usuario para simplificar el desarrollo de páginas Web. Justifica tus respuestas.

Productos esperados / Evaluaciones Este tema se evaluará con la aportación que realices a la pregunta incluida en el foro, tus respuestas deben ser detalladas y justificadas, se tomará en cuenta tu creatividad y originalidad. Este trabajo contará el ¿?% de la calificación final, siempre y cuando lo entregues en la fecha y forma acordada. Guía para el profesor Verificar que el foro este disponible y la liga a la presentación se encuentran activos en la sección de materiales de apoyo para este tema.

Page 87: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 79

Actividad 2 Nombre de la Actividad: Encapsulando funcionalidad Objetivo: Al finalizar esta actividad podrás crear controles de usuario desde 0 o convirtiendo un Formulario Web existente. Instrucciones: Existen dos opciones en la creación de controles de usuarios: crear un nuevo control o convertir un Web form ASP.NET existente.

1. Sigue las instrucciones que se te indican a continuación para crear un nuevo control.

• Da botón derecho en un proyecto Web el Explorador de Soluciones en Visual Studio .Net, selecciona Add y da clic en Add Web User Control.

• Da un nombre al control y da clic en Open. Una página con extensión .ascx fue creada. Nota la existencia de la directiva @ control que fue incluida automáticamente.

• Agrega los elementos UI que requieras como lo harías para crear una Web Form, agregando UI elementos desde la barra de herramientas en Visual Studio .NET o escribiendo en HTML.

• Agrega procedimientos de eventos para los elementos UI y eventos de Página. Similar a agregar las páginas de código oculto en cualquier otra página ASP.NET.

• Crea propiedades para interactuar con la página host. Las propiedades le permiten a la Web Form anfitriona (hosting) leer y escribir valores dentro de los elementos UI en el control de usuario. Las propiedades en el Control de usuario ocultan (encapsulan) la implementación de el control.

2. Sigue las instrucciones que se te indican a continuación para

convertir una Web Form existente a un nuevo control. • Abre el archivo .aspx, conteniendo la página a convertir con algún

editor. • Elimina todas las etiquetas (tags) <HTML>,<BODY> y <FORM> • Si existe una directiva @ Page en la página, conviértela a la

directiva @ Control. • Agrega el atributo className a la directiva @ Control. • Renombra el archivo a un nombre que refleje su propósito y

cambia su extensión de .aspx a .ascx

Page 88: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 80

Nota: El host page (o página anfitriona) es la Web Form que incluirá el control de usuario. Esta página debe estar en Flow layout para evitar que se traslapen el contenido de los controles de usuario y el contenido de la página. La host page no tiene acceso directo a los elementos UI que están en el control de usuario, por lo tanto, debes usar propiedades publicas en los controles de usuario para exponerlos a los elementos UI que están en el control para que el host pueda usas los elementos UI. Por ejemplo: si un control de usuario esta compuesto por dos cajas de texto, podrías necesitar una propiedad para cada caja de texto para que la página del host pueda leer y escribir el valor en cada caja de texto. Productos esperados / Evaluaciones Este tema se evaluará con la creación de los controles de usuario en las dos formas existentes. Los programas deben funcionar correctamente. Este trabajo contará el ¿?% de la calificación final, siempre y cuando lo entregues en la fecha y forma acordada. Materiales de apoyo Aquí encont rarás los materiales de apoyo para este capítulo Presentación de Controles de usuario indicada en la actividad 1 de esta sección. Creando Controles de Usuario Lección: Agregando Controles de Usuario a una Web Forms ASP.NET

• ¿Qué es un Control de Usuario? • ¿Por qué usar Controles de Usuario? • Agregando un Controles de Usuario

o Demostración: Creando Controles de Usuario • Uso de controles de usuario

o Demostración: Usando Controles de Usuario • Biblioteca de controles Web

o Demostración: Controles Web

¿Qué es un Control de Usuario?

Los Controles de Usuario simplifican el reuso de código y componentes UI en una aplicación Web. Un control de usuario es un control de servidor Web, definido por el usuario, con una extensión .ascx

Page 89: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 81

Contiene HTML, pero no los marcadores (tags) <HTML>, <BODY>, o <FORM> <%@ Control Language="vb" %> o <%@ Control Language="c#" %> Contiene código para manejar sus propios eventos Un control de usuario consiste de HTML y código, pero debido a que son usados por Web Forms, ellos no contienen los tags HTML: <HEAD>, <BODY>, or <FORM>, en lugar de esto, estos tags son incluidos en cada Web Form que usa el control de usuario. Cuando un control de usuario es usado por una Web Form, este participa en el ciclo de vida de los eventos para la Web Form. Debido a que un control de usuario es también una página ASP.NET, este tiene su propia lógica de página. Por ejemplo, un control de usuario puede manipular su propio postback en su procedimiento de evento Page_Load. Tipos de controles Controles de Usuario Web

• Es un elemento más en un proyecto Web Biblioteca de controles Web

• Es un tipo de proyecto, para crear controles personalizados, desde 0 ¿Por qué usar Controles de Usuario?

• Reusar interface de usuario y código

Page 90: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 82

• Facilitan “encapsular” funcionalidad que se repite a lo largo de las páginas

o Ejem. crear un menú para utilizar en todos los sitios • Puede manejar sus propios eventos

o Se pueden personalizar acciones a través de elementos que se van a ejecutar del lado del servidor

• Exponiendo en la página que lo usa, sólo la funcionalidad requerida Consideraciones a cerca de la creación de controles personalizados

• Definir claramente la funcionalidad a exponer o Tanto en las propiedades como en los métodos, deben tener

nombres que en el momento de utilizar el control desde el lado de la página siguieran de que se trata y que es lo que se requiere

• No pretender usar Controles para todo. • Encapsular y limitar la funcionalidad a lo estrictamente necesario

o Tiene que ser clara la definición, tiene que estar bien probado antes de poner en producción, y debe limitarse la funcionalidad solo a aquellas cosas que sea coherente encapsular dentro de un control, aparte de aquello que ya viene en un control Web

Agregando un Control de Usuario

• Usar la directiva @ Register para incluir un control de usuario en una página ASP.NET.

<%@ Register TagPrefix="demo" TagName="validNum" rc="numberbox.ascx" %>

• Insertar el control de usuario en una Web Form <demo:validNum id="num1" runat="server"/>

Page 91: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 83

• Usar las propiedades Get y Set de los controles de usuario num1.pNum = 5; //uses Set x = num1.pNum; //uses Get

Creando un Control de Usuario

• Dos métodos para creación de controles de usuario: o Crear un nuevo control de usuario usando Visual Studio .NET o Convertir una página ASP.NET a un control de usuario

• Una página Host interacciona con los controles usando propiedades • Una página Host debe usar el flow layout

public int pNum { get { return Convert.ToInt32(txtNum.Text); } set { txtNum.Text = Convert.ToString(value); } } Demostración: Ejemplo de la creación de Controles de usuario

• Crear un nuevo control de usuario o Crear un Menú

Utilización de controles de usuario

• La página que lo utiliza lleva una directiva Register o <%@ Register TagPrefix=“miControl" TagName=“MiMenu"

Src=“MiMenu.ascx" %> • Se inserta el control como cualquier otro (que utiliza el “Namespace”

definido para el control) o < miControl: MiMenu id="num1" runat="server"/>

• Debe declararse en el código, la variable de igual nombre o No se hace automáticamente por el diseñador

Page 92: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 84

Demostración: Usando un Control de usuario

• Insertar un control de usuario en una página • Usar controles de usuario en la página de código oculto

Biblioteca de controles Web

• Es otro modo de definir controles para la Web • Es un proyecto aparte de la aplicación Web • No posee diseñador visual, es necesario generar todo el código • Es necesario “generar” todo el código HTML para el cliente

Al crear un control...

• En el momento en que se agrega un objeto de tipo control dentro de un proyecto de controles Web o Biblioteca de controles para la Web

• El mismo Hereda de System.Web.UI.WebControls.WebControl o Puede cambiarse esto por algún otro control, que a su vez herede de

esta clase § Todos los controles de Web Forms

El evento importante

• Dentro del código podemos definir nuestras propias propiedades, cada uno de los atributos que necesitamos para nuestros controles, exponer todas estas características para que la UI pueda reasignarse, pero en definitiva...

• Lo importante es codificar adecuadamente el procedimiento que manipula el evento Render

• Render o Recibe un System.Web.UI.HtmlTextWriter que es el que termina

generando el código HTML del lado del cliente o Se debe codificar todo lo necesario para obtener el resultado

requerido

Page 93: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 85

El proyecto puede

• Dentro de un proyecto de biblioteca se puede exponer tantos controles como sea necesario

• Definir otro tipo de objetos, que ayuden a la funcionalidad • Recibir argumentos de cualquier tipo soportado por el .Net Framework

Demostración: Web Control

• Utilizar un proyecto de Web Control • Utilizaremos el código VBScript

Para tomar en cuenta...

• Definir un Namespace adecuado para el conjunto de controles para ubicarlos más fácilmente

• “Firmar” el proyecto con clave segura o Si se van a utilizar frecuentemente o en más de una aplicación

Resumen

• Un control de usuario es una página ASP.NET que puede ser importada como un Control de Servidor por otra Web Form ASP.NET.

• Similar a los controles Web del Servidor, los controles de usuario proporcionan interface gráfica (UI) y otras funcionalidades relacionadas

• Después que se ha creado un control de usuario, este puede entonces ser usado por otras páginas en la misma aplicación Web.

3.4. Acceso a Datos Objetivos Al terminar el estudio sobre este tema, estarás capacitado para realizar accesos a las bases de datos, mediante los controles de acceso a datos que proporciona el entorno .Net utilizando el lenguaje SQL. Actividad 1 Exposición 1: Introducción a ADO.NET Objetivos

Page 94: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 86

Al terminar el estudio sobre este tema, estarás capacitado para realizar accesos a las bases de datos, mediante los controles de acceso a datos que proporciona el entorno .Net utilizando el lenguaje SQL. Instrucciones a. Revisa el material del documento AccesoDatos (1 -14) para que te familiarices con los objetos vinculados con la manipulación de datos. b. Contesta el cuestionario correspondiente Quiz3.doc. c. Investiga los términos o estructuras que te resulten desconocidas, ya sea en la página del curso o en el manual de ayuda de Visual Estudio .NET. d. Realiza el ejercicio Práctica8.doc, para comprobar que tus conocimientos son suficientes para realizar el acceso a datos preliminar de una Aplicación Web. Productos esperados / Evaluaciones a. Este tema se evaluará con el cuestionario y el ejercicio enviado y contará con el 2% de la calificación final, siempre y cuando los entregues en la fecha y con el formato adecuado (pdf). Guía para el profesor Se sugiere que el cuestionario proporcionado a los alumnos, considere:

1. La aportación de .Net en el acceso a datos 2. Los objetos y sus características que facilitan el acceso a datos.

Actividad 2 Exposición 2: Controles de enlace de datos Objetivos Al terminar el estudio sobre este tema, estarás capacitado para vincular distintos controles de acceso a datos para estilizar las presentaciones de la información. Instrucciones a. Revisa el material del documento AccesoDatos (15-16) para que te familiarices con el enlace entre controles. b. Contesta el cuestionario correspondiente Quiz4.doc.

Page 95: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 87

c. Investiga la amplia gama de controles que se pueden enlazar en el manual de ayuda de Visual Estudio .NET. d. Realiza el ejercicio Práctica9.doc, para comprobar que tus conocimientos son suficientes para crear aplicaciones Web con una mayor complejidad. Productos esperados / Evaluaciones Este tema se evaluará con el cuestionario enviado y la Práctica9 y contará con el 2% de la calificación final, siempre y cuando los entregues en la fecha y con el formato adecuado (pdf). Actividad 3 Exposición 3: Usando DataSets y DataReaders Objetivos Al terminar el estudio sobre este tema, estarás capacitado para diferenciar la forma de utilizar los objetos DataSet y DataReaders, así como establecer las conexiones necesarias para manipular la información en tu aplicación Web. Instrucciones a. Revisa el material del documento AccesoDatos (17-29) para que conozcas la funcionalidad de los objetos DataSet y DataReader. b. Contesta el cuestionario correspondiente Quiz6.doc. c. Realiza el ejercicio Práctica10.doc, para comprobar que tus conocimientos son suficientes respecto al establecimiento de conexiones y seguridad en tu Aplicación Web. Productos esperados / Evaluaciones Este tema se evaluará con el cuestionario enviado y la Práctica10 y contará con el 2% de la calificación final, siempre y cuando los entregues en la fecha y con el formato adecuado (pdf). Actividad 4 Exposición 4: Usando el DataView y varias Tablas Objetivos

Page 96: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 88

Al terminar el estudio sobre este tema, estarás capacitado para realizar distintas vistas de una o más tablas de cualquier Base de Datos. Instrucciones a. Revisa el material del documento AccesoDatos (30-38) para que conozcas como se realizan las distintas vistas para mostrar sólo la información que se solicita y no el desplegado completo. b. Contesta el cuestionario correspondiente Quiz7.doc. c. Realiza el ejercicio Práctica11.doc, para comprobar que puedes crear distintas vistas sobre una o más tablas Productos esperados / Evaluaciones Este tema se evaluará con el cuestionario enviado y la Práctica11 y contará con el 2% de la calificación final, siempre y cuando los entregues en la fecha y con el formato adecuado (pdf). Actividad 5 Exposición 5: Empleando DataReaders Objetivos Al terminar el estudio sobre este tema, notarás la ventaja de utilizar el objeto DataReader para ejecutar operaciones simples como obtener una contraseña o una pequeña cantidad de datos. Instrucciones a. Revisa el material del documento AccesoDatos (39-47) para que conozcas la metodología en la utilización del objeto DataReader. b. Contesta el cuestionario correspondiente Quiz8.doc. c. Realiza el ejercicio Práctica12.doc, para comprobar que puedes utilizar las ventajas del objeto DataReader. Productos esperados / Evaluaciones Este tema se evaluará con el cuestionario enviado y la Práctica12 y contará con el 2% de la calificación final, siempre y cuando los entregues en la fecha y con el formato adecuado (pdf).

Page 97: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 89

Actividad 6 Exposición 6: Procedimientos Almacenados y la utilización de parámetros Objetivos Al terminar el estudio sobre este tema, estarás capacitado para realizar accesos a las bases de datos, mediante procedimientos con una funcionalidad específica. Instrucciones a. Revisa el material del documento AccesoDatos (48-60) para que conozcas como funcionan los procedimientos almacenados b. Contesta el cuestionario correspondiente Quiz9.doc. c. Realiza el ejercicio Práctica13.doc y Práctica14.doc, para que practiques cono utilizar un procedimiento almacenado. Productos esperados / Evaluaciones Este tema se evaluará con el cuestionario enviado y la Práctica13, Práctica14 y contará con el 2% de la calificación final, siempre y cuando los entregues en la fecha y con el formato adecuado (pdf). Materiales de apoyo Aquí encontrarás los materiales de apoyo para este capítulo

Page 98: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 90

¿Qué es ADO.NET?

ADO.NET provee un conjunto de clases para trabajar con datos. ADO.NET provee:

§ Un evolucionario y mas flexible sucesor a ADO

§ Un sistema diseñado para ambientes desconectados

§ Un modelo de programación con un avanzado soporte XML

§ Un conjunto de clases, interfaces, estructuras y enumeraciones que manejan el acceso a datos dentro del .NET Framework

Introducción ADO es una nueva tecnología que esta basada en la

utilidad de Microsoft ActiveX® Data Objects(ADO). ADO.NET no es una actualización de ADO; es completamente una nueva manera de manejar datos, construida a partir de ADO. ADO.NET contiene numerosas mejoras sobre la versión anterior de ADO, y simplifica grandiosamente el proceso de conexión de tu Aplicación Web (Web application) a la base de datos. ADO.NET coexiste con ADO. Mientras las más nuevas Aplicaciones Web basadas en .NET, serán escritas usando ADO.NET, ADO permanecerá disponible al programador .NET a través de la interoperabilidad de los servicios COM de .NET.

Definición ADO.NET es un conjunto de clases que usas para conectar y manipular fuentes de datos. A diferencia ADO, confía en conexiones, usa OLE DB para acceder a los datos y esta basado en componentes COM, ADO.NET esta diseñado específicamente para conexiones relacionadas a datos en un ambiente desconectado, por lo cual lo hace la perfecta opción tus Aplicaciones Web. ADO.NET usa XML como el formato para transmitir y recibir datos de la base de datos y su Aplicación Web, es por esto que asegura mayor flexibilidad que ADO.

Page 99: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 91

Usando espacios de Nombres

§ Usa las sentencias Imports o using para importar espacios de nombres

§ Los espacios de nombres usados con ADO.NETincluyen:• System.Data• System.Data.SqlClient• System.Data.OleDb

Introducción Hay tres espacios de nombres (namespaces) que tu

Importas en tu Forma Web ASP.NET si estas usando ADO.NET tu siempre usaras el espacio de nombres System.Data; y también usaras System.Data.SqlClient ó System.Data.OleDb dependiendo de la fuente de datos.

Espacios de nombres Cuando uses ADO.NET tú debes importar el espacio ADO.NET de nombres System.Data. Para importar este

espacio de nombres tu debes utilizar la palabra reservada using.

C# using System.Data; Si estas trabajando con datos en una base de datos SQL

Server 2000, también debes importar el espacio de nombres System.Data.SqlClient. Si estas trabajando con datos de otra fuente de datos tú necesitas importar el espacio de nombres System.Data.OleDb. El siguiente código de ejemplo muestra como importar ambos espacios de nombre.

C# using System.Data.SqlClient; using System.Data.OleDb;

Page 100: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 92

El modelo de Objetos de ADO.NET

Introducción El modelo de objetos de ADO.NET provee la estructura

para acceder a datos de diferentes fuentes de datos. Hay dos componentes principales del modelo de objetos de ADO.NET: el y el proveedor de datos (data provider) .NET.

Componentes Un DataSet esta hecho de una o más DataTables,y ADO.NET esta diseñado para el acceso a datos, sin importar la

fuente de los datos. Por ejemplo, un DataSet puede contener datos de una base de datos en SQL Server 2000, un código OLE DB, y un archivo XML. El DataSet también puede usar un DataView, el cual es una vista personalizada de un DataTable. El proveedor de datos .NET proporciona el eslabón entre la fuente de datos y el DataSet. Ejemplos de estos objetos que son proporcionados por el proveedor de datos .NET son listados en la siguiente tabla.

Objetos del proveedor Propósito de datos.NET

Connection Proporciona conectividad con la fuente de datos. Command Proporciona acceso con comandos a la base de datos. DataReader Proporciona los datos que vierten de la fuente. DataAdapter Usa el objeto Connection para proporcionar una

enlace entre el DataSet y el proveedor de datos. El

Page 101: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 93

objeto DataAdapter también ajusta cambios que se hacen a los datos en el DataSet.

Usando los objetos El Microsoft .NET framework incluye el proveedor de

datos SQL Server .NET (para la versión SQL Server versión 7.0 o superiores), y el proveedor de datos OLE DB .NET. Tú usas los objetos SqlConnection, SqlCommand, SqlDataReader, y SqlDataAdapter para leer y manipular datos en bases de datos SQL Server 7.0 o superiores. Y utilizas los objetos OleDbConnection, OleDbCommand, OleDbDataReader y OleDbDataAdapter para leer y manipular datos en todos los otros tipos de bases de datos.

¿Qué es un DataSet?

Introducción Un DataSet almacena información en un ambiente

desconectado. Después de que tu establezcas una conexión a una base de datos, entonces tu puedes acceder a sus datos. El objeto DataSet es la principal forma de almacenar datos cuando estas usando ADO.NET.

Objeto DataSet El objeto DataSet permite almacenar datos, los cuales han sido recolectados de una fuente de datos, en tu Aplicación Web (Web Application). Los datos almacenados en un DataSet pueden ser manipulados sin que la Forma Web ASP.NET mantenga una conexión a la fuente de datos. Una conexión solo se restablece cuando la fuente de datos actualiza los cambios.

Page 102: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 94

DataTables y El objeto DataSet almacena los datos en una o mas DataRelations DataTables. Cada DataTable puede poblarse con

datos de una única fuente de datos. Puedes también establecer relaciones entre dos DataTables usando un objeto DataRelation.

Lección: Creando una conexión a una base de datos.

Introducción ADO.NET es usado para conectar una Forma Web a

una base de datos. En esta lección, tú aprenderás como conectarte a diferentes tipos de bases de datos usando objetos ADO.NET.

Tú también aprenderás como almacenar datos en una DataSet.

Objetivos de la Después de completar la lección, seras capaz de: Lección ? Generar una conexión a una base de datos

usando el explorador de Servidores. • Explicar como trabaja un DataAdapter. • Generar y un DataSet tipificado desde un

DataAdapter. Usando el Explorador de Servidores para generar una conexión.

Page 103: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 95

Introducción Tú puedes establecer una conexión a una fuente de

datos desde adentro del ambiente de desarrollo integrado (IDE) Visual Studio.NET. Usando el IDE de Visual Studio .NET, se simplifica el proceso de establecer una conexión a una fuente de datos y tienes la oportunidad de verificar la conexión durante la etapa de diseño.

Creando una conexión El Explorador de Servidores, el cual es parte del IDE de

Visual Studio .NET, te permite examinar los servidores que están corriendo en SQL Server y otras bases de datos.

? Para conectarse a una tabla de una base de datos

1. En el Explorador de Servidores, expandir la lista de servidores, expandir la base de datos que quieres utilizar, y expandir la lista de tablas. El Explorador de Servidores muestra la lista de tablas de la base de datos seleccionada, como se muestra en la siguiente ilustración. La lista de servidores en el Explorador de Servidores únicamente muestra los servidores que están corriendo en el SQL Server 7.0 o superior. Si necesitas conectar un tipo diferente de base de datos, usa la caja de dialogo Propiedades de Enlace de Datos (Data Links Properties).

Page 104: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 96

2. Dentro de la lista de tablas, dale clic a la tabla especifica a la que te quieres conectar y arrástrala al proyecto abierto.

Visual Studio .NET configura automáticamente una conexión y un DataAdapter para conectar a la tabla. Un objeto SqlConnection o OleDbConnection es agregado al proyecto, y entonces el objeto es mostrado en la parte inferior de la forma Web, como se muestra en la siguiente ilustración.

Page 105: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 97

Caja de Dialogo Para agregar conecciones a una base de datos que Propiedades de Enlace no està corriendo en SQL Server, usa la opciòn Data de Datos Connections (Conecciòn a datos), que esta localizada

en la parte superior de la lista del Explorador de Servidores. En el Explorador de Servidores, da click derecho en Data Connections y luego da click a Agregar Conecciòn, como se muestra en la siguiente ilustración.

En la caja de dialogo Propiedades de Enlace de datos resultante, selecciona el tipo de datos a la que deseas conectarte como se muestra en la siguiente ilustración.

Después de seleccionar el tipo de datos, haz click a Siguiente o selecciona la etiqueta Conexión y da la

Page 106: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 98

información necesaria para conectar a la base de datos, tal como se muestra en la siguiente ilustración.

Después de que hayas creado la conexión desde la caja de dialogo Propiedades de Enlace de datos, puedes dar clic a la conexión y arrastrarla hasta el proyecto, de la misma forma que lo harías desde la lista de servidores SQL en el Explorador de Servidores.

Page 107: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 99

El modelo del Objeto DataAdapter

Introducción Cuando un DataAdapter se conecta a una base de datos, este usa muchos otros objetos para comunicarse con la base de datos.

Definición del El objeto DataAdapter usa el objeto Connection DataAdapter para conectarse a una base de datos, y luego usa el

objeto Command para recuperar datos y realizar cambios a la base de datos.

El objeto DataAdapter tiene propiedades. Estas

propiedades son los objetos SqlCommand o OleDbCommand que contienen sentencias SQL. El objeto DataAdapter tiene las siguientes cuatro propiedades tipo comando (Command-typed).

• SelectCommand. Esta propiedad emite una

sentencia SQL SELECT. • UpdateCommand. Esta propiedad emite una

sentencia SQL UPDATE. • InsertCommand. Esta propiedad emite una

sentencia SQL INSERT. • DeleteCommand. Esta propiedad emite una

sentencia SQL DELETE.

Cada una de estas propiedades del DataAdapter pueden tener sentencias SQL o pueden llamar a procedimientos almacenados (stored procedures) en la

Page 108: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 100

base de datos. El utilizar procedimientos almacenados, se reduce la cantidad de código necesario que se requiere para realizar operaciones como SELECT, INSERT, UPDATE y DELETE. Si el dato se conecta, o es generado desde, una tabla en una base de datos, tú puedes tomar ventaja del objeto CommandBuilder para generar automáticamente la propiedad del DataAdapter. Usando el objeto reduces el tiempo de desarrollo.

Lección: Desplegando un DataSet en un control de lista -enlazada.

Introducción En esta lección, tú aprenderás como mostrar, en una

Forma Web, los datos de una conexión ADO.NET. Tú específicamente aprenderás acerca de los controles lista - enlazada (list-bound), los cuales son controles que pueden ser automáticamente poblados con los datos de una fuente de datos.

Objetivos de la Después de completar esta lección, serás capaz de: lección

• Describir que son los controles lista -enlazada (list-bound) y como se utilizan.

• Usar un DataGrid para mostrar datos. • Personalizar la apariencia de un DataGrid.

Page 109: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 101

¿Qué son los controles de enlace de datos?

¿Qué son los controles de enlace de datos?

§Controles que conectan a una fuente de datos y muestran los datos

§Los controles de enlace de datos son:•Datagrid

•Data List

•Repeater

•DropDownList

•ListBox

•CheckBoxList

•RadioButtonList

Introducción Se puede ligar directamente controles de enlace de

datos que están en un Web Form a una fuente de datos. Existen dos tipos de controles de enlace de datos:

• Control de enlace sencillo • Control de listas enlazadas

Definición Los controles de listas enlazadas son controles que se

conectan a una fuente de datos y luego muestran los datos obtenidos de esta fuente. Los controles de listas enlazadas son ligados directamente a la fuente de los datos. ASP .NET llena automáticamente los controles de listas enlazadas con datos.

Ejemplos La siguiente tabla muestra los controles Web que son

controles de listas enlazadas.

Page 110: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 102

Control Descripción CheckBoxList Un grupo de check box de multi-selección

que puede ser generada de forma dinámica usando la vinculación de datos.

DataGrid Un control que muestra los campos de una fuente de datos como columnas de una tabla.

DataList Un control que muestra una lista de datos con un patrón definido.

DropDownList Una selección sencilla, lista deslizable. ListBox Una lista que permite seleccionar uno o

mas elementos RadioButtonList Selección sencilla de un grupo de radio

buttons que puede ser generado a través de la vinculación de datos.

Repeater Este control no tiene estilos o presentación incluida, así que tú tienes que declarar todos los estilos HTML, formato y etiquetas de estilo.

Mostrando los Datos de un en DataSet en Controles de Listas Enlazadas

Introducción. Puedes conectar un DataSet con un control de lista

enlazada, el cual automáticamente llena le control de lista enlazada con los datos del DataSet.

Estableciendo las propiedades del control.

Cada control de lista enlazada en Visual Studio .NET tiene propiedades que son específicas a cada control. La siguiente tabla describe las propiedades que tú

Page 111: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 103

tienes que establecer para ligar los datos del DataSet con el control.

Propiedad Descripción DataSource Especifica el DataSet que contiene los

datos. DataMember Especifica la DataTable en un DataSet. DataTextField Especifica el campo en la DataTable que

será mostrada en la lista. DataValueField Especifica el campo en la DataTable que

tomará el valor del elemento seleccionado en la lista.

Las propiedades DataTextField y DataValueField son usadas por los controles ListBox, DropDownList, CheckBoxList y RadioButtonList porque estos controles pueden mostrar solo un campo de una fila del DataSet.

Ligar los datos. Después de que y DataSet ha sido llenado con datos,

tú llamas al metodo DataBind del control para conectar el conectar dicho control con el DataSet. El siguiente codiogo liga los datos que son especificados desde la propiedad DataSource a la ListBox lstEmployees:

C# lstEmployees.DataBind();

Usando DataSet vs DataReaders

Page 112: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 104

Introducción Los objetos DataSet son objetos complejos que

permiten almacenar múltiples DataTables de datos de una fuente de datos. El objeto DataSet es similar a una base de datos virtual que esta dentro de la Aplicación Web. El objeto DataSet puede también contener relaciones entre los datos en las DataTables, y puede usar estar relaciones para regresar datos.

El objeto DataReader es un objeto más sencillo que es usado para leer datos de una fuente de datos; el objeto DataReader provee servicios solo-hacia-adelante, y únicamente de lectura para acceder a los datos en la base de datos.

Usando DataSets La elección entre usar un objeto DataSet o un y DataReaders DataReader debe estar basada en la intención de como

se quieran usar los datos. Generalmente, el objeto DataReader es usado para leer datos una sola vez, en situaciones de solo lectura, como cuando accedemos a una contraseña almacenada, o llenamos un control lista-enlazada (list-bound). El objeto DataSet es usado para accesos a datos más complicados, como el acceder al historial de órdenes de un cliente.

Algunos de los puntos que debes considerar cuando

eligas entre un objeto DataSet o DataReader son: • Acceso a Datos

Si intentas leer y escribir en la fuente de datos, debes utilizar un objeto DataSet. El objeto DataReader debe usarse únicamente cuando los datos serán usados en situaciones de solo lectura.

• Acceso a múltiples bases de datos Si tú intentas combinar tablas de una o mas bases de datos, tú debes usar un objeto DataSet. El objeto DataReader esta basado para sentencias SQL simples, para bases de datos simples.

• Ligar a controles Si tú intentas ligar datos a más de un control, debes usar un objeto DataSet. El objeto DataReader solo se puede ligar a un control simple.

Page 113: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 105

• Modo de conexión

Si tú intentas correr en un modo desconectado, debes utilizar un objeto DataSet. El objeto DataReader debe correr en un modo conectado.

• Examinar datos Si tú intentas examinar los datos hacia atrás y hacia delante, debes usar el objeto DataSet. El objeto DataReader debe examinar solo hacia delante como los datos se vierten de la base de datos.

• Velocidad de acceso Si lo que tú necesitas es alta velocidad de acceso a tu fuente de datos, usa el objeto DataReader. El objeto DataSet es más lento que el objeto DataReader cuando este viene de acceder datos de una fuente de datos porque el objeto DataSet almacena los datos en un objeto en el Servidor Web. El objeto DataSet tiene la habilidad de leer y escribir datos y examinar hacia atrás y hacia delante. El objeto DataReader es más rápido debido a su naturaleza ligera.

• Herramienta de soporte Si intentas usar Microsoft Visual Studio .NET para crear una conexión a datos, usa un objeto DataSet, ya que con este cuentas con la opción de escribir propio código o usar la máquina de código de Visual Studio. NET. Con los objeto DataReader debes escribir código.

Page 114: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 106

Seguridad del Servidor SQL

Introducción. Desde la perspectiva del usuario, acceder a datos de una base de

datos en SQL Server es un proceso de dos pasos. Primero, el usuario manda una solicitud desde la aplicación Web, y luego la aplicación Web conecta a la base de datos en SQL Server para completar la solicitud. Existen dos métodos principales para conectar una aplicación Web para conectar una aplicación Web a una base de datos en SQL Server: modo de autenticación mezclado (mixed-mode authentication) y autenticación solo Windows (Windows-only authentication).

Modo de autenticación mezclado. El modo de autenticación mezclado usa la

configuración predeterminada de ASP .NET y de la aplicación Web. Cada usuario de la aplicación Web debe tener una cuenta de usuario en el Grupo de Logins del SQL Server. La debilidad del modo de autenticación mezclado es que el nombre de usuario y su contraseña son mandados a la computadora donde corre SQL Server en HTML no encriptado. Esto expone los datos que se envían a una tercera parte que puede obtener los datos de acceso. Además, se tiene administrar la cuenta del usuario tanto en el servidor Web como en la computadora que este corriendo SQL Server.

Para usar el modo de autenticación mezclado, establece el SQL Server a modo de autenticación mezclado (SQL Server y Windows). El siguiente código puede usarse para conectarse a SQL Server mediante el modo de autenticación mezclado:

Page 115: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 107

C# string strConn =

"data source=localhost; " + "initial catalog=northwind; " + "user id=CohoUser; " + "password=1Coho"; SqlConnection conn = new SqlConnection(strConn);

Advertencia: Usar el modo de autenticación mezclado para acceder a SQL

Server desde una aplicación Web tiene riesgos de seguridad y no es recomendado. El modo de autenticación mezclado solo es discutido aquí como una técnica que puede ser usada durante el desarrollo de aplicaciones Web.

Autenticación Solo Windows: El modo de autenticación solo Windows es el

método mas usado cuando una aplicación Web desea conectarse a una base de datos en SQL Server. Cuando se usa el modo de autenticación solo Windows, SQL Server no requiere de un nombre de usuario y contraseña. Solo una confirmación de que el usuario ha sido autenticado por un recurso seguro es necesaria durante el proceso de consulta a la base de datos.

El modo de autenticación solo Windows usa una sola cuenta llamada ASPNET para todos los accesos que se hagan desde la aplicación Web. Esta cuenta elimina los asuntos inseguros relacionados con transmitir nombres de usuario y contraseñas no encriptadas entre la aplicación Web y SQL Server, junto con la necesidad de mantener cuentas de usuario en ambos servidores.

Con el modo de autenticación solo Windows, los usuarios acceden a la forma Web como usuarios anónimos. ASP .NET conecta a SQL Server y es autenticado usando la cuenta del usuario ASPNET. Los datos solicitados son regresados de SQL Server y son usados por la aplicación Web. Finalmente, la forma Web que incluye los datos solicitados es regresada al usuario.

Para usar el modo de autenticación solo Windows, debes establecer el SQL Server con el modo de autenticación solo Windows (Windows-only authentication). El siguiente código puede usarse para conectarse a SQL Server usando el modo de autenticación solo Windows:

C# string strConn = "data source=localhost; " + "initial catalog=northwind; " + "integrated security=true"; SqlConnection conn = new SqlConnection(strConn);

Page 116: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 108

Configurando el SQL Server para correr en modo mezclado o en de

autenticación solo Windows: Cuando se usan el de autenticación solo Windows, se puede dejar el SQL Server con el modo de autenticación solo Windows predeterminado. Si se usa el modo de autenticación mezclado, se necesita cambiar el modo de autenticación del SQL Server.

Para cambiar el modo de autenticación del SQL Server

1. En el menú Inicio, da clic derecho en Mi PC y luego clic en Administrar.

2. En la consola de administración del equipo, expande el fólder de Servicios y Aplicaciones y luego expande el fólder de Microsoft SQL Servers.

3. Da clic derecho en el (local) SQL Server y luego clic en Propiedades.

4. En la caja de dialogo de Propiedades de SQL Server, en la etiqueta de Seguridad, elije el boton de SQL Server y Windows o Solo Windows en la sección de Autenticación, y finalmente clic en Aceptar.

Creando la Conexión

Introducción. Para mover datos entre la base de datos y la aplicación Web,

primero se debe tener una conexión a la base de datos, Para crear una conexión a la base de datos, se necesita identificar el nombre del servidor que contiene la base de datos, el nombre de la base de datos y se requiere la información de acceso (nombre de usuario y contraseña si son necesarios).

Page 117: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 109

Dependiendo del tipo de base de datos a la que se este accesdiendo, se puede usar el objeto SqlConnection o el objeto OleDbConnection. Se debería usar el objeto SqlConnection para conectarse a SQL Server 7.0 y posteriores, y usar el objeto OleDbConnection para conectarse a las demás bases de datos.

Creando una cadena de conexión. Se crea un objeto SqlConnection pasando

en la cadena de conexión la información necesaria para crear la conexión a la fuente de datos.

El siguiente código crea un objeto SqlConnection a la base de datos Northwind de SQL Server:

C# string strConn =

"data source=localhost; " + "initial catalog=northwind; " + "integrated security=true"; SqlConnection conn = new SqlConnection(strConn);

Parámetros de la cadena de conexión. La siguiente tabla describe algunas de

los parámetros más comunes usados en el objeto de conexión:

Parámetro Descripción Connection Timeout

El periodo de tiempo, en segundos, que esperará por la conexión al servidor antes de terminar el intento y generar una excepción (15 segundos es el tiempo predeterminado para este parámetro)

Data Source El nombre del SQL Server que será usado cuando la conexión este abierta, o el nombre del archivo que serpa usado cuando se conecte a una base de datos de Microsoft Access.

Initial Catalog El nombre de la base de datos Integrated Security

Es el parámetro que determina si la conexión es o no una conexión segura. True, False o SSPI son los valores posibles. SSPI es equivalente a True.

Password La contraseña de acceso para la base de datos de SQL Server

Persist Security Info

Cuando esta establecido a False , la información de seguridad, como la contraseña, no es regresada como parte de la conexión. Estableciendo esta propiedad a True puede haber riesgos de seguridad. Esta propiedad esta establecida a False predeterminadamente.

Provider Esta propiedad es usada para establecer o regresar el nombre del proveedor de la conexión; este parámetro solo se usa para el objeto OleDbConecction ,

User ID El nombre de la cuenta de acceso a SQL Server.

Page 118: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 110

Leccion: Accediendo a datos con DataSets

Introducción El objeto DataSet representa una copia local de datos

que vienen de una o más fuente de datos. Usando un objeto DataSet permites a la Forma Web corre semi-independientemente de la fuente de datos. El objeto DataSet puede usar un objeto DataAdapter para cargar datos desde una fuente de datos y puede entonces desconectarse de la fuente de datos. El usuario puede entonces usar y manipular los datos. Cuando los datos necesiten ser actualizados en la fuente de datos, un objeto DataReader es usado para reconectar y actualizar la fuente de datos.

En esta lección, tú aprenderás como usar objetos DataSet para mantener el almacenamiento local de datos y a manipular los requerimientos de la Forma Web.

Objetivos de la Después de completar la lección serás capaz de: Lección

• Crear un objeto DataAdapter para unirse a un objeto DataSet a una fuente de datos.

• Crear un objeto DataSet para retener datos de una fuente de datos.

• Usar un objeto DataView para retener un conjunto de datos de un objeto DataSet.

• Ligar un objeto DataSet y un objeto DataView a un control lista -enlazada (list-bound).

• Manejar los errores típicos que se encuentran mientras se accede a los datos.

Page 119: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 111

Creando un DataAdapter

Introducción El objeto DataSet representa una copia local de datos

de una fuente de datos. Cuando es usado sin una fuente de datos, es muy útil para mantener datos locales que la Forma Web pueda acceder. Sin embargo, para servir como una herramienta administradora de datos, un objeto DataSet debe poder interactuar con una o más fuente de datos.

Para lograr esta interacción, el framework de Microsoft.NET provee las clases SqlDataAdapter y OleDbDataAdapter.

DataAdapter Un objeto DataAdapter sirve como un enlace entre el

objeto DataSet y una fuente de datos que puede ser usada para recuperar y salvar datos. La clase DataAdapter representa un conjunto de comandos de bases de datos y conexiones de bases de datos que tú usas para llenar un objeto DataSet y actualizar la fuente de datos. Cada objeto DataAdapter intercambia datos entre un simple objeto DataTable en un objeto objeto DataSet y un resultado simple de una sentencia SQL o un procedimiento almacenado.

Visual Studio.NET hace dos clases primarias de

DataAdapter disponibles para utilizar con bases de datos:

• Clase OleDbDataAdapter Esta clase es conveniente para usar con cualquier fuente de datos que es expuesta por un proveedor de datos OLEDB.

Page 120: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 112

• Clase SqlDataAdapter Esta clase es específica para bases de datos SQL Server 7.0 o superiores. El objeto SqlDataAdapter es más rápido que el objeto OleDbDataAdapter porque trabaja directamente con el Servidor SQL y no pasa a través de un proveedor de datos OLEDB.

Además, clases DataAdapter para otros tipos de fuentes de datos pueden ser integradas con Visual Studio .NET.

Propiedades del Cuando usas objetos DataAdapater para DataAdapter intercambiar datos entre un objeto DataSet y una

fuente de datos, puedes especificar las acciones que quieres realizar usando una de la cuatro propiedades DataAdapter. Entonces las propiedades DataAdapter ejecutan una sentencia SQL o llaman a un procedimiento almacenado. Las propiedades que estan disponibles con la clase DataAdapter se muestran en la siguiente tabla.

Propiedad Función SelectCommand La propiedad SelectCommand

regresa filas de datos.

InsertCommand

La propiedad InsertCommand escribe filas insertadas del DataSet dentro de la fuente de datos.

UpdateCommand

La propiedad UpdateCommand escribe filas modificadas del DataSet dentro de la fuente de datos.

DeleteCommand

La propiedad DeleteCommand borra filas en la fuente de datos.

Ejemplo El siguiente código de ejemplo muestra como crear SqlDataAdapter un objeto SqlDataAdapter llamado da que contiene una

sentencia de consulta. C# //Create a connection

SqlConnection conn = new SqlConnection ("data source=localhost; initial catalog=pubs; " + "integrated security=true; persist security info=True;"); //Create the DataAdapter SqlDataAdapter da = new SqlDataAdapter ("select * from Authors", conn);

Page 121: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 113

Creando un DataSet

Introducción Para crear una copia local de una base de datos, creas

y llenas un objeto DataSet usando objetos DataTable. Creando un DataSet El primer paso para crear un objeto DataSet es declarar

el objeto DataSet. El siguiente codigo crea un objeto DataSet llamado ds:

C# DataSet ds = new DataSet(); Llenar el DataSet Después de que creaste el objeto DataSet, llenas el

objeto DataTable creando un objeto DataAdapter. Llamas al método Fill en el objeto DataAdapter y entonces especificas el objeto DataTable que quieres llenar. El siguiente codigo llena la tabla Authors del objeto DataSet ds usando un DataAdapter llamado da:

C# da.Fill(ds, "Authors");

El método implicito Fill ejecuta una consulta SQL en la propiedad SelectCommand del DataAdapter. Los resultados de la consulta SQL son usados para definir la estructura del objeto DataTable, y poblar la tabla con datos.

El siguiente código de ejemplo muestra como crear un objeto SqlDataAdapter llamado da, y entonces llamar al método Fill para almacenar datos en el objeto DataSet ds.

C# //Create a connection

SqlConnection conn = new SqlConnection

Page 122: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 114

("data source=localhost;initial catalog=pubs; " + "integrated security=SSPI;persist security info=True;"); //Create the DataSet DataSet ds = new DataSet(); //Create the DataAdapter SqlDataAdapter da = new SqlDataAdapter ("select * from Authors", conn); //Fill the DataSet ds da.Fill(ds, "Authors");

El segundo argumento del método Fill es el nombre

para el objeto DataTable que es creado. Usa este nombre para acceder a los datos devueltos.

Accesando a un Después de que hayas puesto datos en un objeto DataTable DataSet, puedes acceder a los datos programática

mente. Como se muestra en el siguiente código, cada objeto DataSet esta comprendido de uno o mas objetos DataTables a los que te puedes referir por nombre o por posición.

C# ds.Tables["Authors"];

-o- ds.Tables[0];

Las clases DataRow y DataColumn son componentes

primarios de la clase DataTable. Podrias usar el objeto DataRow, sus propiedades y sus metodos para regresar y evaluar los valores en un objeto DataTable. El DataRowCollection representa los objetos actuales DataRow que estan en el objeto DataTable, y el DataColumnCollection contiene los objetos DataColumn que describen el esquema del objeto DataTable. La propiedad Rows del objeto DataTable provee acceso programatico al DataRowCollection. La propiedad Columns del objeto DataTable provee acceso programatico al DataColumnCollection.

El siguiente codigo agrega una columna de un objeto

DataSet a un control ListBox llamado IstItems C# foreach(DataColumn col in ds.Tables[0].Columns)

{ lstItems.Items.Add(col.ColumnName); }

Page 123: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 115

Tanto el objeto DataRowCollection y DataColumnCollection tienen una propiedad Count que permite determinar el número de filas o columnas en el objeto DataTable, como se muestra en el siguiente ejemplo:

C# ds.Tables["Authors"].Rows.Count; ds.Tables["Authors"].Columns.Count; Contando las filas y las columnas del objeto DataTable permite acceder a campos individuales en el objeto DataTable. Tú puedes acceder a campos por posición ordinaria, o por nombre. En el siguiente codigo, X es el indice de la fila a la que quieres acceder:

C# ds.Tables["Authors"].Rows[x][1]; ds.Tables["Authors"].Rows[x]["fieldname"];

El siguiente codigo itera atravez de cada fila en el objeto

DataTable llamado Authors y crea una cadena usando el segundo campo (au_lname) en Authors:

C# string str = "";

foreach(DataRow r in ds.Tables["Authors"].Rows) { str += r[1]; str += r["au_lname"]; }

Usando un DataView

Page 124: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 116

Introducción. Para mostrar los datos que estan contenidos en el objeto DataSet,

se puede ligar el objeto DataSet directamente a un control de enlace de datos o se puede usar el objeto DataView. Un objeto DataView es un objeto enlazable y personalizable para mostrar un objeto DataTable sencillo. Después de haber creado un objeto DataView, el usuario puede usar el objeto DataView para ordenar, filtrar, buscar, editar datos, o navegar en ellos.

DataViews como un subconjunto de un DataTable. El objeto DataView puede

ser personalizadopara presentar un subconjunto de datos de un objeto DataTable. Esta personalización permite tener dos controles que estan ligados al mismo objeto DataTable, pero cada control muestra diferentes versiones de los datos. Por ejemplo, un control puede estar ligado al objeto DataView mostrando todas las filas de una tabla, mientras que un segundo control esta ligado a otro objeto DataView que esta configurado para mostrar solo las filas que han sido borradas del objeto DataTable.

DefaultView. Cada objeto DataTable en el objeto DataSet tiene la propiedad

DefaultView, la cual retorna la vista predeterminada para la tabla. El siguiente código muestra como se puede accesder al objeto DataView dv, de un objeto DataTable llamado Authors:

C# DataView dv = ds.Tables[“Authors”].DefaultView; DataView Personalizado: Se puede crear también un objeto DataView que esté

basado en un subconjunto de tablas que estén en un objeto DataTable. Por ejemplo, se puede establecer la propiedad DataViewRowFilter usando una expresión para filtrar datos. La expresión para filtrar datos se debe evaluar a True o False. También se puede establecer la propiedad Sort del objeto DataView usando una expresión para ordenar los datos. La expresión para ordenar los datos puede incluir los nombres de objetos DataColumn o un cálculo.

En el siguiente código, la propiedad RowFilter, del objeto DataView dv, esta establecido para regresar solo los autores del estado de California (CA), y luego ordenar los resultados por apellido (au_lname):

C# DataView dv = new DataView(ds.Table[“Authors”]); dv.RowFilter = “state = ‘CA’ ” dv.Sort = “au_lname”;

Page 125: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 117

Lección: Usando múltiples Tablas

Introducción Una de las ventajas de los objeto DataSet es que ellos pueden contener múltiples objetos DataTables, y cada uno de los objetos DataTable puede venir de diferentes tipos de fuentes de datos.

En esta lección tú aprenderás como almacenar múltiples tablas de datos en un objeto DataSet y aprenderás como desplegar los datos en controles DataGrid.

Objetivos de la Después de completar la lección, serás capaz de: Lección

• Almacenar datos en múltiples tablas de múltiples fuentes de datos.

• Crear relaciones entre datos de múltiples fuentes de datos.

• Usar las relaciones para navegar entre tablas de datos de múltiples fuentes.

Page 126: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 118

Almacenando Multiples Tablas

Introducción Para llenar un objeto DataSet con múltiples objetos

DataTable que vienen de una o mas fuentes de datos, tú necesitas usar múltiples objeto DataAdapter. Cada objeto DataAdapter llena por separado una tabla en el objeto DataSet porque el orden del objeto DataTable controla el orden de implementacion, tú puedes controlar el orden en el cual las actualizaciones son escritas hacia y desde la base de datos. Este control sobre el orden de la implementacion te ayuda a preservar la integridad referencial entre las tablas relacionadas en la base de datos.

Agregar la primera Un ejemplo del control del orden en el cual los Tabla objetos DataTable son creados es un vendedor que

necesita recuperar información de los clientes, y la información acerca de las ordenes de compra que fueron hechas por cada cliente, de una base de datos central. Para cumplir este requerimiento, tú puedes crear una aplicación Web que contenga dos objetos DataAdapter, el primero que regrese los registros del cliente, y el segundo que retorne las órdenes de compra. Para cargar los datos del cliente primero, tú debes preservar la integridad de referencia entre los clientes y sus órdenes de compras. El siguiente código llena el objeto DataTable con los clientes usando un objeto DataAdapter llamado daCustomers:

Page 127: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 119

C# SqlConnection conn;

SqlDataAdapter daCustomers; SqlDataAdapter daOrders; DataSet ds = new DataSet(); // Create a connection to the Pubs database conn = new SqlConnection("data source=localhost; " + "integrated security=true;initial catalog=northwind"); // Create the first DataTable daCustomers = new SqlDataAdapter ("select CustomerID, CompanyName from Customers", conn); daCustomers.Fill(ds, "Customers");

Agregar tablas Después de que el primer objeto DataTable se Subsecuentes carga, puedes llenar un objeto adicionales DataTable y

definir las relaciones entre los objetos basados en el objeto inicial DataTable. Continuando con el ejemplo anterior, tú llenarías el Objeto DataTable con las órdenes.

El siguiente código llena el objeto DataTable con las

ordenes, usando un objeto DataAdapter llamado daOrders:

C# ’Create the second DataTable

daOrders = New SqlDataAdapter _ ("select CustomerID, OrderID, OrderDate, ShippedDate " & _ "from Orders", conn) daOrders.Fill(ds, "Orders") // Create the second DataTable daOrders = new SqlDataAdapter ("select CustomerID, OrderID, OrderDate, ShippedDate " + "from Orders", conn); daOrders.Fill(ds, "Orders"); Nota: Tú debes usar un nuevo objeto DataAdapter para cada objeto DataTable en el objeto DataSet.

Page 128: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 120

Creando Relaciones

Introducción Un objeto DataRelation es usado para referenciar dos

objetos DataTable. Por ejemplo, en una relación cliente/ordenes, la tabla de clientes es padre de la relación y la tabla ordenes es el hijo de la relación. Esta relación es similar a una relación llave primaria/llave externa. Las relaciones se crean entre parejas de columnas en las tablas de padre e hijo. El valor de Data Type debe ser idéntico para ambas columnas.

Los objetos DataRelation están contenidos en el objeto DataRelationCollection, en el cual puedes tener acceso no solo a través de la propiedad Relations del objeto DataSet, sino también a través de las propiedades ChildRelations y ParentRelations de el objeto DataTable.

Para crear un objeto DataRelation, usa el constructor DataRelation y el metodo Add de la colección Relations de un objeto DataSet.

Ejemplo del El siguiente ejemplo crea un objeto DataRelation Objeto llamado dr y lo agrega al objeto DataSet ds. DataRelation C# // Create DataRelation: each publisher publishes many titles

DataRelation dr; DataColumn parentCol; DataColumn childCol; parentCol = ds.Tables["Customers"].Columns["CustomerID"]; childCol = ds.Tables["Orders"].Columns["CustomerID"]; dr = new DataRelation("CustOrders", parentCol, childCol); ds.Relations.Add(dr);

Page 129: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 121

Navegando Programáticamente entre Tablas Usando Relaciones

Introducción En muchos escenarios de Aplicación Web, tú quisieras trabajar con datos de más de una tabla, y a menudo desearías trabajar datos de tablas relacionadas. Las relaciones entre una tabla padre y una tabla hijo es llamada master-detail. Un ejemplo de estas relaciones seria regresar los registros de un cliente y además ver la información de las órdenes asociadas a ese cliente. El modelo desconectado del objeto DataSet permite que trabajes con múltiples objetos DataTables en aplicación Web y definir relaciones entre los objetos DataTable. Entonces tú puedes usar las relaciones para navegar entre los registros relacionados en las tablas.

Navegando Una de las principales funciones de una clase Programáticamente DataRelation es permitir navegar de un objeto

DataTable a otro objeto DataTable sin un objeto DataSet. Esta habilidad de navegación permite que tú retornes todos los objetos DataRow de un objeto DataTable cuando estas dando un objeto DaraRow de un objeto DataTable relacionado. Por ejemplo, después de establecer un objeto DataRelation entre un objeto DataTable de consumidores y un objeto DataTable de orden de compras, se puede recuperar todas las filas de ordenes para una fila de consumidor en particular usando el método DataRow.GetChildRows.

El método GetChildRows de un objeto DataRow,

devuelve las filas relacionadas que son hijos del objeto DataTable. El método GetParentRow de un objeto DataRow regresa la fila padre de un objeto DataTable.

Page 130: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 122

Por ejemplo, puedes tener un control DataGrid llamado

dgCustomers que esta mostrando datos obtenidos del objeto DataTable Customers, el cual esta en un objeto DataSet ds. El siguiente código muestra un ciclo a través de todos los registros childOrder para obtener una lista de números de orden

C# currentParentRow = ds.Tables["Customers"].

Rows[dgCustomers.SelectedIndex]; foreach(DataRow r in currentParentRow.GetChildRows("CustOrders")) {

Label1.Text += r["OrderID"] + ","; }

Navegando visualmente entre tablas usando relaciones

Navegando Con Visual Studio .NET también se puede mostrar relaciones Visualmente arrastrando controles desde la barra de herramientas.

Si deseas mostrar las filas hijo de de una relación en un control de listas enlazadas por separado, se puede usar el método CreateChildView y luego enlazar el control al objeto DataView resultante.

Para conectar dos controles de listas enlazadas a

través de un objeto DataRealtion, se necesita obtener el objeto DataRowView de la fila seleccionada del control padre de listas enlazadas, y luego llamar al método CreateChildView del objeto DataRowView.

Page 131: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 123

El siguiente código crea un objeto DataView desde in

objeto DataRelation para mostrar los registros hijos en un control DataGrid:

C# DataView parentTableView = new

DataView(ds.Tables["Customers"]); DataRowView currentRowView = parentTableView[dgCustomers.SelectedIndex]; dgChild.DataSource = currentRowView.CreateChildView("CustOrders"); dgChild.DataBind(); Lección: Accediendo a Datos con DataReaders

Introducción. El benéfico que da el usar un objeto DataSet es que este da una

copia de la base de datos sin conexión alguna. Para las aplicaciones Web que correr durante mucho tiempo, el usar objetos DataSet es normalmente el mejor enfoque. De cualquier forma, los desarrolladores a veces usan operaciones simples y cortas, tales como mostrar un conjunto de datos directamente al usuario. Para ese tipo de operaciones los desarrolladores no necesitan mantener un objeto DataSet, en vez de ello, se puede usar un objeto DataReader. En esta sección, aprenderás como leer datos usando la clase DataReader.

Objetivos de la lección: Después de completar esta lección, serás capaza de:

• Explicar como trabaja la clase DataReader. • Crear un objeto DataReader. • Leer datos desde un objeto DataReader. • Enlazar un control de servidor de listas enlazadas a un objeto DataReader.

Page 132: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 124

¿Qué es un DataReader?

Introducción. Cuando una gran cantidad de datos esta siendo regresada de una

fuente de datos, asuntos relacionados con la memoria se convierten en problemas. Por ejemplo, leer 10,000 filas de una base de datos causa que un objeto DataSet consuma y mantenga memoria para 10,00 filas por el tiempo que dure la tabla. Si 1,000 usuarios hacen lo mismo sobre el mismo equipo al mismo tiempo, el uso de memoria se vuelve crítico. Para solucionar estos problemas de memoria, la clase DataReader esta diseñada para producir un flujo de datos de solo lectura y solo hacia delante que es retornado de la base de datos. Por lo tanto, existe solo un registro a la vez en la memoria del servidor.

Solo lectura y solo hacia delante. La clase DataReader provee una

transferencia de datos de solo lectura y solo hacia delante que puede ser enlazada a un control sencillo de listas enlazadas. Por ejemplo, si solo se desea mostrar datos resultados de una consulta a una base de datos a travéz de un control sencillo, y no se requiere manipular esos datos, un objeto DataReader es la manera ideal para lograr esto.

Acceso rápido a los datos. Los objetos DataReader son más rápidos que los

DataSet debido a su naturaleza ligera. Resulta más costoso crear objetos DataSet porque estos objetos tienen la capacidad de leer y escribir datos y leer hacia delante y hacia atrás. Es muy poco costoso trabajar con objetos DataReadet porque son solo de lectura y solo hacia delante. Esta diferencia de costos entre los objetos significa que el acceso a datos con un objeto DataReader es más rápido que el acceso con un objeto DataSet.

Page 133: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 125

Conectado a la fuente de datos. ADO .NET incluye dos tipos de objeto DataReader: el objeto SqlDataReader para SQL Server versión 7.0 o posteriores, y el objeto OleDbDataReader para provedores de datos OLE DB. Se usa el objeto SqlCommand y el objeto OleDbCommand, y el metodo ExecuteReader, para transferir datos al objeto DataReader.

Manejar la conexión por uno mismo. A diferencia de un objeto DataAdapter

que se abre y se cierra automáticamente, se tiene que manejar la conexión del objeto DataReader por uno mismo. La clase DataReader es similar a la clase DataAdapte en el sentido en que uno crea un objeto Command desde una sentencia SQL y una conexión. No obstante, con el objeto Command del DataReader, se tiene que abrir y cerrar la conexión explícitamente.

Manejar los datos por uno mismo. Tú tienes la opción de hacer un ciclo a través

de los datos del objeto DataReader y desplegarlos programáticamente, o puedes enlazarlos a un control. En ambos casos, se tiene que escribir el código por uno mismo.

Usa menos recursos del servidor. Debido a que el DataReader no es una

representación de los datos en memoria, el usa del DataReader tiene menos impacto en los recursos del servidor.

Creando un DataReader

Introducción. Para usar un objeto SqlDataReader, se necesita crear un objeto

SqlCommand en vez de un objeto SqlDataAdapter, que era necesitado para el objeto DataSet. El objeto SqlCommand expone un metodo ExecuteReader que regresa un objeto SqlDataReader.

Page 134: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 126

Similar al objeto DataAdapter, se crea un objeto Command de una sentencia SQL y una conexión. No obstante, con el objeto Command del DataReader, se tiene que abrir y cerrar la conexión explícitamente.

Para usar un DataReader. Para usar un objeto DataReader, se necesita

programar el codigo completo para establecer la conexión. Los siguientes pasos son necesarios para el uso del objeto DataReader:

1. Crear y abrir la conexión a la base de datos. 2. Crear un objeto Command. 3. Crear el objeto DataReader desde el objeto Command. 4. Llamar al método ExecuteReader. 5. Usar el objeto DataReader. 6. Cerrar el objeto DataReader. 7. Cerrar el objeto Connection.

El siguiete código ejemplo abre la conexión a una base de datos, crea un objeto DataReader desde el objeto Command, y luego itera a través del objeto DataReader y agrega campos desde los registro a un control ListBox:

C# // Open Connection and create command

SqlConnection conn = new SqlConnection ("data source=localhost; integrated security=true; " + "initial catalog=pubs;"); SqlCommand cmdAuthors = new SqlCommand ("select * from Authors", conn); conn.Open(); // Create DataReader and read data SqlDataReader dr; dr = cmdAuthors.ExecuteReader(); while (dr.Read()) { lstBuiltNames.Items.Add(dr["au_lname"] + ", " + dr["au_fname"]); } // Close DataReader and Connection dr.Close(); conn.Close();

Page 135: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 127

Manejando errores con Try…Catch…Finally. Cuando se usan conexiones con el objeto DataReader, se debe usar siempre sentencias Try, Catch, Finally para asegurar que si algo falla, la conexión se cerrará normalmente. De otra forma, la conexión puede quedarse abierta indefinidamente.

El siguiente código para un objeto DataReader que atrapa los errores y cierra la

conexión: C# try

{ conn.Open(); dr = cmdAuthors.ExecuteReader(); // use the returned data in the DataReaders } catch(Exception e) { // Handle error } finally { dr.Close(); conn.Close(); }

Leyendo datos de un DataReader

Llamando registros para cada registro. Después de haber llamado al método

ExecuteReader del objeto Command, se tiene acceso a los registros en el objeto DataReader llamando al método Read. La posición predeterminada en el objeto DataReader es antes del primer registro; por consiguiente, se debe llamar al método Read antes de acceder a cualquier dato. Cuando se han agotado los registros, el método Read regresa el valor null.

Page 136: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 128

El siguiente código itera a través de todos los registros del objeto Datareader dr, y muestra el campo an_fname en el control Label lblName:

C# while (dr.Read())

{ lblName.Text += dr["au_name"]; }

Accesando a campos. Para obtener los datos de los campos en el actual

registro, se necesita acceder al campo por su posición ordinal, por su nombre, o llamando a la método Get adecuado, que puede ser GetDateTime, GetDouble, GetInt32 o GetString.

Tip. Usar un método Get específico es más rápido que hacerlo por la posición

ordinal o el nombre debido a que el DataReader no necesita checar el formato de los datos. Por ejemplo: el siguiente código lee los campos nombre y apellido, ambos de tipo cadena, de el primer registro del objeto DataReader dr, usando el método GetString():

C# dr.Read();

lblName.Text = dr.GetString(1) + ", " + dr.GetString(2);

También se puede hacer referencia, por nombre, a los datos en el registro actual del objeto DataReader. Después se puede invocar a una función de conversión apropiada, como se muestra en el siguiente ejemplo:

C# myReader["au_fname"]; Cerrar el DataReader. Cuando el objeto DataReader esta en uso, la conexión

asociada está ocupada sirviendo al objeto DataReader. Por lo tanto, se debe llamar al método Close para cerrar el objeto DataReader cuando este se ha acabado de usar, como se muestra en el siguiente ejemplo:

C# myReader.Close(); Cerrar la conexión. El DataReader no cierra la conexión automáticamente. Se

tiene que hacer un llamado al método Close para cerrar la conexión explícitamente cuando se ha terminado de usar el objeto, tal como se muestra en el siguiente ejemplo:

C# conn.Close();

Page 137: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 129

Enlazando un DataReader a un Control de Listas Enlazadas

Introducción. Además de iterar a través del objeto DataReader y mostrarlo

programaticamente, se puede ligar un objeto DataReader a un control de listas enlazadas.

Para enlazar un objeto DataReader al control, se debe establecer la propiedad DataSource del control al objeto DataReader. El siguiente código crea un objeto DataReader dr, lo enlaza a un control ListBox, y luego cierra los objetos DataReader y Connection:

C# SqlConnection conn = new SqlConnection

("data source=localhost; integrated security=true; " + "initial catalog=pubs"); conn.Open(); SqlCommand cmdAuthors = new SqlCommand ("select * from Authors", conn); //bind the datareader to a listbox SqlDataReader dr; dr = cmdAuthors.ExecuteReader(); lstBoundNames.DataSource = dr; lstBoundNames.DataTextField = "au_lname"; lstBoundNames.DataBind(); //close the datareader and the connection dr.Close(); conn.Close();

Page 138: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 130

¿Qué es un Procedimiento Almacenado?

Introducción Un procedimiento almacenado es un procedimiento de

una base de datos que un desarrollador de bases de datos escribe junto con una base de datos específica. Otras aplicaciones Web pueden entonces invocar a esos procedimientos almacenados para acceder o manipular datos de la base de datos.

Acceso Programático Los procedimientos almacenados permiten acceder a la

base A una Base de Datos de datos llamando a un procedimiento existente en vez

de escribir una sentencia SQL propia. Los procedimientos almacenados están construidos con secuencias de sentencias de Transact-SQL, y funcionan de manera similar a los procedimientos en una aplicación Web en donde las sentencias son llamados por nombre, y pueden tener parámetros de entrada y de salida.

Los tres tipos de procedimientos almacenados son:

• Procedimientos almacenados que regresan registros Los procedimientos almacenados que regresan

registros son usados para localizar registros específicos, ordenar y filtrar dichos registros, y luego regresar los resultados de la búsqueda, ordenamiento o filtrado de las operaciones a un objeto DataSet o a un control de listas enlazadas. Estos procedimientos

Page 139: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 131

almacenados están basados en sentencias Select de SQL.

Un ejemplo de este tipo de procedimientos

almacenados son las solicitudes de montos, fecha y recepción de los últimos tres cheques que se han procesado en una cuenta de un banco. Estos datos pueden ser cargados a un objeto DataSet para mayor procesamiento, o para mostrarlos directamente al usuario mediante un control ListBox.

• Procedimientos almacenados que regresan valor

también conocidos como procedimientos almacenados escalares

Procedimientos almacenados que regresan valor son

usados para ejecutar comandos en una base de datos o funciones que regresan valores sencillos. Debido a que solo un valor es retornado, los procedimientos almacenados que regresan valor son usados usualmente en código, y luego el resultado es mostrado al usuario.

Un ejemplo de procedimientos almacenados que

regresan valor es el obtener el valor del total de los últimos tres cheques que se han procesado en una cuenta de un banco.

• Procedimientos almacenados que ejecutan acciones

Procedimientos almacenados que ejecutan acciones

son usados para realizar funciones en la base de datos pero no regresan algún valor o registro. Estas funciones en la base de datos pueden incluir actualizar, editar o modificar los datos.

Un ejemplo de procedimientos almacenados que

ejecutan acciones es la consulta para actualizar una dirección de correo en una base de datos de un consumidor de una compañía.

Page 140: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 132

¿Por qué usar procedimientos almacenados?

Introducción Resulta ser mas fácil, mas eficiente y mas seguro usar

procedimientos almacenados que escribir código requerido para conectarse y ejecutar sentencias Transact-SQL directamente a la base de datos. Llamar un procedimiento almacenado no requiere que se entienda como esta diseñada la base de datos, y la base de datos es accedida por un procedimiento probado.

Programación modular Los procedimientos almacenados son un clásico

ejemplo de programación modular. Se crea un procedimiento una vez, se prueba una vez, se almacena en la base de datos, y luego se invoca cualquier cantidad de veces desde múltiples aplicaciones. Cualquier cambio o actualización a la base de datos están ocultos de las aplicaciones que acceden a esta mediante el procedimiento almacenado.

Distribución del trabajo Los procedimientos almacenados pueden ser creados

independientemente por un desarrollador especializado en la programación de base de datos, mientras la aplicación Web que usara el procedimiento almacenado puedes estar siendo creada en paralelo por otros desarrolladores. Esta distribución del trabajo permite a los desarrolladores enfocarse en sus especialidades.

Page 141: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 133

Incrementar la El uso de procedimientos almacenados incrementa la seguridad de la base de datos limitando el acceso directo.

Seguridad de la Solo los procedimientos almacenados probados por el Base de datos dueño de la base de datos tienen acceso directo a la

base de datos. Existe menor riesgo de daño accidental a la estructura o el contenido de la base de datos debido a que otras aplicaciones Web y el desarrollador no tienen acceso directo a la base de datos.

El usar sentencias Transact –SQL o SQL directamente

en el código Microsoft ASP.NET es también un riesgo de seguridad ya que las sentencias pueden dar información a un hacker acerca de la base de datos y su estructura. Además con el acceso directo a la base de datos, también se tiene el problema de seguridad de intentar determinar que tipo de permisos deberían ser dados a la cuenta del Webuser en cada tabla.

Ejecución más Si un procedimiento requiere una gran cantidad de

código Rápida Transact-SQL o si este se ejecuta repetidamente, el

uso de procedimientos almacenados puede ser mas rápido que acceder a la base de datos directamente por código. Los procedimientos almacenados son analizados sintácticamente y optimizados cuando son creados, y una versión en memoria del procedimiento es usada si se ejecuta el después de la primera vez.

El acceso directo a través de sentencias Transact-SQL

requiere que las sentencias sean enviadas desde el cliente cada vez que se van a correr. Las sentencias son entonces compiladas y optimizadas cada vez que son ejecutadas del lado del servidor.

Reducción del Una operación que requiere de cientos de líneas de

código en Trafico en la Red Transact-SQL puede ser realizada mediante una

sencilla sentencia que llama a un procedimiento almacenado. Enviando solo una llamada a través de la red, en vez de cientos de líneas de código.

Page 142: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 134

Provee Flexibilidad Debido a que el acceso a la base de datos es a través

de un procedimiento almacenado, el programador de la base de datos puede cambiar la estructura de esta sin estropear la aplicación Web que esta usando la base de datos. Esta protección permite mejorar la base de datos sin poner en riesgo el resto del sistema.

Lección: Llamando a Procedimientos Almacenados

Introducción: Antes de poder invocar un procedimiento almacenado (stored

procedure), se necesita tener identificado el nombre del procedimiento y los parámetros que este necesita. Después de haber identificado el procedimiento, se puede invocar el procedimiento, pasar los parámetros necesarios que son necesarios para procesar la solicitud, y manejar los parámetros de salida que arroja la respuesta.

En esta lección, aprenderás como llamar procedimientos almacenados, pasar parámetros de entrada y manejar los parámetros de salida.

Objetivos de la lección. Después de completar esta lección, serás capaz de:

• Llamar a procedimientos almacenados desde una forma Web. • Identificar el tipo de parámetros que son necesarios cuando se

llama aun procedimiento almacenado. • Pasar parámetros de entrada cuando se llama a un

procedimiento almacenado desde una forma Web. • Usar los parámetros de salidas de un procedimiento almacenado.

Page 143: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 135

Llamando a Procedimientos Almacenados

Introducción. Para llamar a procedimientos almacenado, primero se tiene que

identificar el procedimiento almacenado, crear un objeto DataAdapter, y apuntar el objeto DataAdapter a una conexión a la base de datos. Después establecer la propiedad CommandText a CommandType.StoredProcedure.

Identificar el procedimiento almacenado. El primer paso para usar un

procedimiento almacenado es identificar el tipo y el nombre de este. Se puede usar un objeto DataAdapter o un objeto DataReader para llamar a cualquiera de los tres tipos de procedimientos almacenados. El método que se invocará para ejecutar el procedimiento almacenado variara dependiendo del tipo de procedimiento almacenado que se este llamando:

• Regresar registros de un procedimiento almacenado.

Cuando se llama a un procedimiento almacenado que regresa un conjunto de registros, se necesita almacenar ese conjunto de registros en un DataSet o directamente a un control de listas enlazadas usando un DataReader. Si se desea usar un DataSet, se necesita usar el DataAdapter y el método Fill. Si se desea usar un DataReader, se necesita usar el objeto Command y el método ExecuteReader, y entonces ligar el registro regresado a un control.

• Regresar valores de un procedimiento almacenado.

Cuando se invoca a un procedimiento almacenado que regresa un valor, se necesita llamar al método ExecuteScalar del objeto

Page 144: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 136

Command, y guardar los resultados en una variable apropiado para el tipo de dato retornado.

• Realizar acciones mediante procedimiento almacenado.

Cuando se invoca a un procedimiento almacenado que realiza alguna acción sobre la base de datos pero no regresa un conjunto de registros o un valor, se usa el método ExecuteNonQuery del objeto Command.

Establecer la propiedad SelectCommand. Para establecer el llamado al

procedimiento almacenado, se necesita un objeto SqlCommand y guardarlo como la propiedad SelectCommand de un DataAdapter. Luego se necesita establecer las propiedades Connection, CommantText y CommandType.

Se puede establecer el llamado al procedimiento almacenado visualmente usando las herramientas de Microsoft Visual Studio .Net, o escribiendo el código necesario para llamar al procedimiento almacenado. Los siguientes ejemplos muestran los procesos completos tanto el código como el proceso lógico para llamar a procedimientos almacenados.

El siguiente ejemplo llama al procedimiento almacenado ProductCategoryList. El procedimiento almacenado ProductCategoryList regresa una lista de los IDs y los nombres de las categorías de la tabla Categories :

Procedure ProductCategoryList

As SELECT CategoryID,CategoryName FROM Categories

El siguiente código usa un objeto Conecction y un objeto DataAdapter para llamar a los registros retornados por el procedimiento almacenado ProductCategoryList:

C# SqlDataAdapter daCategory = new SqlDataAdapter();

daCategory.SelectCommand = new SqlCommand(); daCategory.SelectCommand.Connection = conn; daCategory.SelectCommand.CommandText = "ProductCategoryList"; daCategory.SelectCommand.CommandType = CommandType.StoredProcedure;

Page 145: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 137

Nota: También se puede establecer la conexión y el texto del comando directamente cuando se crea el objeto SqlDataAdapter. El siguiente ejemplo realiza la misma tarea que el ejemplo anterior:

C# SqlDataAdapter daCategory = new SqlDataAdapter ("ProductCategoryList", conn);

daCategory.SelectCommand.CommandType = CommandType.StoredProcedure;

Ejecutar el Procedimiento almacenado. Para ejecutar el procedimiento

almacenado y guardar los registros regresados en un DataSet, se llama al método Fill del objeto SqlDataAdapter. Este método llena un objeto DataTable con los registros regresados por el procedimiento almacenado.

Por ejemplo, el siguiente ejemplo llena el objeto DataSet ds con los registros que fueron regresados del procedimiento almacenado ProductCategoryList usando el SqlDataAdapter daCategory:

C# daCategory.Fill(ds, "Categories");

Despues de haber llenado un DataTable con los resultados de un procedimiento almacenado de tipo Select, se puede anlazar el DataTable a un control de lista enlazada para mostrar los datos.

Usando Parámetros

Introducción: Cuando se usan procedimientos almacenados en una base de

datos de SQL Server o cualquier otro tipo de base de datos, se

Page 146: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 138

pueden usar parámetros para recupero información de los procedimientos almacenados.

Cuando se usa parámetros con una base de datos en SQL Server, los nombres de los parámetros que son agregados a la colección Parameters del objeto Command debe coincidir con los nombres de los parámetros que están en el procedimiento almacenado; de cualquier forma, el orden de los parámetros es flexible.

Nota: Cuando se usan parámetros en una base de datos OL DB, el orden de los

parámetros también debe coincidir en la colección Parameters con el orden de los parámetros que están definidos en el procedimiento almacenado.

La siguiente tabla describe los tipos de parámetros disponibles con los procedimientos almacenados.

Parámetro Uso Input Usado por una aplicación Web para mandar

datos específicos a un procedimiento almacenado.

Output Usado por un procedimiento almacenado para regresar datos específicos a una aplicación Web que le llamó.

InputOutput Usado por un procedimiento almacenado para recuperar información que la aplicación Web envió y para mandar de vuelta valores específicos a una aplicación Web.

ReturnValue Usado por un procedimiento almacenado para devolver valores a una aplicación que le llamó.

Page 147: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 139

Pasando Parámetros de Entrada

Introducción. Después de haber identificado los parámetros que un

procedimiento almacenado soporta, se necesita agregar los parámetros que se usaran en la colección Parameters del objeto Command.

Para crear un parámetro, se crea un objeto SqlParameter nuevo con el nombre y el tipo de dato del parámetro, igual que el especificado en el procedimiento almacenado. Lo siguiente es establecer la propiedad Direction del parámetro para indicar al procedimiento almacenado como usar el parámetro. Si el procedimiento almacenado regresa algún valor, se crea un parámetro llamado returnValue. Si el parámetro es de entrada, la propiedad Value se establece para especificar el dato que debe ser enviado al SQL Server.

Por ejemplo, el procedimiento almacenado ProductsByCategory toma un parámetro de entrada, llamado @CategoryId del tipo int, como se muestra en el siguiente código:

Procedure ProductsByCategory ( @CategoryID int ) As SELECT ProductID, ModelName, UnitCost, ProductImage, Chairman FROM Products WHERE CategoryID=@CategoryID

Page 148: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 140

Para llamar al procedimiento almacenado ProductsByCategory, se crea un parámetro de entrada llamado @CategoryID y se envía su valor del valor de la caja de texto.

C# SqlParameter workParam1 = new SqlParameter ("@CategoryID", SqlDbType.Int);

workParam1.Direction = ParameterDirection.Input; workParam1.Value = Convert.ToInt16(txtStartDate.Text);

Nota: Siempre se debe validar el contenido de la caja de texto antes de enviar la entrada al procedimiento almacenado. Por sencillez, el código anterior no lo hace. Después de haber creado el objeto Parameter, se usa el método Add de la colección Parameters del objeto SellectCommand. Si un procedimiento almacenado tiene más de un parámetro, no importa en que orden se agreguen porque se están creando por nombre:

C# SqlDataAdapter daSales = new SqlDataAdapter();

daSales.SelectCommand = new SqlCommand(); daSales.SelectCommand.Connection = conn; daSales.SelectCommand.CommandText = "ProductsByCategory"; daSales.SelectCommand.CommandType = CommandType.StoredProcedure; daSales.SelectCommand.Parameters.Add(workParam1);

Corriendo un procedimiento almacenado: Después de haber creado el objeto

Command, se usa el método Fill para correr el procedimiento almacenado y recuperar los registros:

C# ds = new DataSet(); daSales.Fill(ds, "Products");

Page 149: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 141

Usando Parámetros de Salida

Introducción. Para leer el valor de un parámetro de salida, o leer el valor

regresado desde un registro que arrojo el procedimiento almacenado, se necesita acceder al valor del parámetro de salida de la colección Parameters después de haber ejecutado el procedimiento almacenado.

Ejemplo del uso de parámetros de salida: El procedimiento almacenado

OrdersCount toma un ID de cliente y regresa el número de ordenes destacado que un cliente tenga, pero no de las ordenes actuales. El procedimiento almacenado usa los parámetros de entrada @CustomerID y el de salida @ItemCount, ambos de tipo int, como se muestra en el siguiente procedimiento almacenado:

Procedure OrdersCount ( @CustomerID int, @ItemCount int OUTPUT ) As SELECT @ItemCount=COUNT(OrderID) FROM Orders WHERE CustomerID=@CustomerID

Debido a que el anterior procedimiento almacenado regresa un número de filas, y este no regresa los datos en esas filas, no se necesita usar un objeto DataAdapter. En vez de ello, se puede usar un objeto Command directamente, y llamar al método ExecuteNonQuery para correr el procedimiento almacenado.

Page 150: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 142

Llamando a un valor regresado por el Procedimiento Almacenado. Para llamar al procedimiento almacenado OdersCount, se necesita crear un parámetro de entrada llamado @CustomerID, y un parámetro llamado @ItemCount, agregarlos a la colección Parameters del objeto Command, y luego llamar al procedimiento almacenado mediante el ExecuteNonQuery:

C# SqlCommand myCmd = new SqlCommand("OrdersCount", conn);

myCmd.CommandType = CommandType.StoredProcedure; // add an input parameter SqlParameter workParam; workParam = new SqlParameter("@CustomerID", SqlDbType.Int); workParam.Direction = ParameterDirection.Input; workParam.Value = Convert.ToInt16(txtCustID.Text); myCmd.Parameters.Add(workParam); // add an output parameter workParam = new SqlParameter("@ItemCount", SqlDbType.Int); workParam.Direction = ParameterDirection.Output; myCmd.Parameters.Add(workParam);

Corriendo el procedimiento almacenado. El siguiente código ejecuta el

procedimiento almacenado MyCmd.

C# conn.Open(); myCmd.ExecuteNonQuery(); conn.Close();

Leyendo parámetros de salida. Si se están recuperando valores de un procedimiento almacenado que regresa un valor o un conjunto de parámetros de salida, se necesita usar el método Value en la colección Parameters regresada. Se puede hacer referencia al valor del parámetro de salida mediante el nombre o el índice. El siguiente ejemplo devuelve el valor del parámetro de salida @ItemCount por nombre:

C# curSales = myCmd.Parameters["@ItemCount"].Value;

Page 151: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 143

Quizz3 Instrucciones: contesta cada una de las preguntas brevemente. 1. ¿Qué ventaja tiene utilizar ADO.NET? 2. ¿Para qué sirven los espacios de nombres? 3. ¿Cuáles son los pasos para crear una conexión? 4. ¿Cuáles son las funciones de un DataSet? 5. ¿Para qué sirve un DataAdapter? Quizz4 Instrucciones: contesta cada una de las preguntas brevemente. 1. ¿Qué son los controles de enlace de datos? 2. ¿Enumera al menos cinco controles de enlace de datos que no aparezcan en

el material de apoyo (sug ve la ayuda de .Net)? 3. ¿Cuáles son las propiedades que poseen todo control de enlace de datos y

para qué sirven? 4. ¿Cómo se realizan las conexiones entre un DataAdapter y un control de

enlace de datos? Quizz6 Instrucciones: contesta cada una de las preguntas brevemente. 1. ¿Escribe cuáles son las diferencias entre utilizar un DataSet y un

DataReader? 2. ¿Por qué consideras que es importante establecer modos de autenticación

en tus aplicaciones Web? 3. ¿Cómo se crean las conexiones y qué parámetros intervienen? 4. ¿Qué metodología se utiliza para crear un objeto DataSet? 5. ¿Explica brevemente los métodos del objeto Tables del objeto DataSet? Quizz7 Instrucciones: contesta cada una de las preguntas brevemente. 1. ¿Qué es un DataView? 2. ¿Cuáles son las ventajas de utilizar el objeto DataView en comparación de

los otros objetos de manipulación de los datos? 3. ¿Cuál crees que sea la importancia de utilizar varias tablas? 4. ¿Cómo definirías una relación entre las tablas? 5. ¿Por qué consideras que en .Net se considera el concepto de columna padre

y columna hijo? 6. ¿Explica los pasos que se tienen que efectuar para crear una relación?

Page 152: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 144

Quizz8 Instrucciones: contesta cada una de las preguntas brevemente. 1. ¿Con tus palabras como definirías el DataReader? 2. ¿Qué ventajas tiene tu aplicación Web al usar un DataReader? 3. ¿Cuáles son los pasos para crear y utilizar un DataReader? 4. ¿Cómo se manejan los errores para un DataReader? 5. ¿Cómo lees los datos desde un DataReader, enumera y explica los

métodos? Quizz9 Instrucciones: contesta cada una de las preguntas brevemente. 1. ¿Qué es un procedimiento almacenado? 2. ¿Cuántos tipos de procedimientos almacenados existen y en que consisten? 3. ¿Cuáles son las ventajas de utilizar un procedimiento almacenado? 4. ¿Cómo se llama a los procedimientos almacenados? 5. ¿Cuántos tipos de parámetros existen y explícalos brevemente? Práctica 8 Enlazando Controles a una Base de Datos Precondiciones: Disponer de una Base de Datos en SQL Server, con sus respectivas tablas. Instrucciones: • Crea una forma Web y nómbrala Práctica8.aspx • Abre el Explorador de Servidores, expande el directorio Servidores • Escoge el icono con el nombre con el que identificas a la máquina • Elige la opción pubs y selecciona alguna de las tablas y arrástrala hacia la

forma Web (en ese momento se crearán dos objetos sqlConnection1 y sqlDataAdapter1, automáticamente).

• Haz clic derecho en el objeto sqlDataAdapter1 y selecciona la opción Ver Datos.

• En ese cuadro de diálogo, selecciona la opción Llenar el Conjunto de Datos (DataSet), para que se muestren los registros existentes en la Base de Datos.

• Cierra el cuadro de diálogo. • Observa el código detrás del formulario (recuerda que tiene extensión cs.aspx),

se ha generado código de recuperación, modificación y borrado de los datos sobre el objeto DataAdapter.

Poscondiciones: Se cuenta con un formulario Web, listo para la inserción y enlace de otros objetos para darle una presentación estilizada a los datos.

Page 153: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 145

Práctica 9 Controles de Enlace de Datos Precondiciones: Haber realizado la forma Web Práctica8.aspx. Instrucciones:

• Abre la forma Práctica8.aspx y renombrala Practica9.aspx • Haz clic derecho en el objeto sqlDataAdapter1, y a continuación haz clic en

la opción Generar el Conjunto de Datos (DataSet), en el cuadro de diálogo que aparece, nombra al DataSet DataSet1.

• Utiliza la barra de herramientas, arrastra un control de tipo Button y un control DataGrid a esta forma.

• Selecciona el control DataGrid y establece la propiedad DataSource a DataSet1 y establece la propiedad DataMember, con el nombre de la tabla que seleccionaste en la Práctica8.

• Crea un procedimiento del evento Click para el control Button y agrega el siguiente código para llenar el objeto DataSet y enlazar la tabla que seleccionaste para el control DataGrid.

sqlDataAdapter1.Fill(dataSet1); DataGrid1.DataBind();

• En el Explorador de Proyectos, haz clic derecho en Practica9.aspx y luego haz click en la opción Generar y Explorar.

• Haz doble click en la forma y localiza el evento Page_Load . • Retira las dos líneas del evento Click del control button, de forma que luzca

de la siguiente forma: private void Page_Load(object sender, System.EventArgs e) { if (!Page.IsPostBack) { sqlDataAdapter1.Fill(dataSet1); DataGrid1.DataBind(); } }

• En el Explorador de Proyectos, haz clic derecho en Practica9.aspx y luego haz click en la opción Generar y Explorar.

• Haz clic en el control Button, el control DataGrid muestra los datos sin tener que leer cada vez éstos, desde la base de datos.

• Observa el código detrás del formulario (recuerda que tiene extensión cs.aspx), se ha generado código de recuperación, modificación y borrado de los datos sobre el objeto DataAdapter.

Page 154: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 146

Práctica 10 Estableciendo la seguridad en SQL Server Instrucciones:

• En el menú Inicio , haz clic derecho en MiPC, y haz clic en administrar • En la sección Administración del Equipo expande Servicios y dirigete a los

directorios de SQL. • Haz clic derecho en la ubicación local de SQL Server y entonces selecciona

Propiedades. • En el cuadro de diálogo anterior en la pestaña Seguridad, selecciona la

opción Autenticación solo de Windows, y da clic en aceptar. • Abre la forma SQLSecurityModes.aspx, en el proyecto Mod10Cs en

la solución 2310Demos y haz clic derecho en Generar y Examinar. • Haz clic en Utilizar Seguridad Integrada, y haz clic en Conseguir Datos, se

genera un error porque el usuario no existe en el SQL Server. • Por lo que es necesario, crear un nuevo usuario para SQL Server, para eso

selecciona Administración del Equipo, expande SQL Server y expande la sección Seguridad.

• Haz clic derecho en usuarios y selecciona nuevo usuario. • En el cuadro de diálogo de Usuarios de SQL Server, escribe CohoUser, en

el campo nombre, selecciona Autenticación SQL Server en la sección Autenticación, y escribe como password lCoho, y da clic en Aceptar.

• Abre nuevamente la forma SQLSecurityModes.aspx y haz clic derecho en Generar y Examinar.

Práctica 11 Estableciendo la seguridad en SQL Server Instrucciones:

• Abre la forma UseRelations.aspx en el Mod10CS y ha z clic derecho en Generar y Examinar.

• Revisa el código detrás de la página. • Haz clic derecho en el proyecto Mod10, haz clic en Agregar y selecciona

Agregar Nuevo Elemento. • Selecciona Asistente para crear una Forma de Datos, y entonces haz clic

en Abrir. • Sigue las instrucciones, y establece las siguientes propiedades:

o Nombra el DataSet dsCustOrders o Selecciona la conexión existente o crea una nueva en la Base de

Datos NorthWind.

Page 155: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 147

o Agrega las tablas Customers y Orders, en la lista de artículos seleccionados.

o Crea una relación entre las tablas Customers y Orders, nombra la forma CustOrders, y selecciona CustomerID como la llave para ambas tablas.

• Haz clic en la forma CustOrders.aspx en el Explorador de Soluciones, y dale Generar y Examinar.

• En el explorador haz clic en Cargar (Load), así el control DataGrid almacenará los registros de la tabla Customers.

• Haz clic en Show Details. Práctica 12 Mostrando datos a través de DataReaders Instrucciones:

• Abre la forma DataReader.aspx en el Mod10CS y haz clic derecho en Generar y Examinar.

• Lee el código detrás de la página, y observa las dos formas en que se pueden llenar los controles listbox con la información del objeto DataReader.

• Indica con un comentario sobre el objetivo del código, dentro de la forma, y localiza, las siguientes secciones de código en el evento Page_Load:

o Donde se crea el objeto SqlConnection. o Donde se crea el objeto SqlCommand o Donde se crea el objeto DataReader. o Donde se enlaza el objeto DataReader al primer control listbox. o Donde se cierra el objeto DataReader, y se crea de nuevo. o Donde se agrega paso a paso los registros del DataReader a la

segundo control listbox. Práctica 13 Mostrando datos desde un procedimiento almacenado Instrucciones:

• Crea una nueva Aplicación Web y establece su localización a http://localhost/Mod11PracticeCS.

• Abre la forma WebForm1.aspx • Abre el Explorador de Servidores y expande los siguientes directorios,

primero el nombre de tú máquina, luego Servidores SQL, luego selecciona la Base de Datos Northwind y luego selecciona Procedimientos Almacenados.

Page 156: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 148

• Selecciona el procedimiento Ten Most Expensive Products, y arrástralo a la forma Web.

• Usa el cuadro de diálogo, para agregar un control DataGrid. • Crea en el evento Page_Load, y agrega el código siguiente, para crear el

objeto DataReader, desde el objeto SqlCommand, para enlazarlo al DataGrid.

using System.Data.SqlClient; SqlDataReader dr; sqlConnection1.Open(); dr = sqlCommand1.ExecuteReader(); DataGrid1.DataSource = dr; DataGrid1.DataBind(); dr.Close(); sqlConnection1.Close();

• Genera y examina la forma. Práctica 14 Pasando Parámetros Instrucciones:

• Abre la forma SPUseParameters.aspx, en el Modulo11CS y selecciona Generar y Examinar.

• Introduce los datos para los campos Beginning Date y Ending Date, y haz clic en la opción Sales by Year.

• Revisa el código detrás de página de la forma SPUseParameters.aspx • En el evento cmdSale_Click, indica entre comentarios el código donde se

hace lo siguiente: o Se crea el objeto SqlConnection. o Se crea el objeto SqlDataAdapter, y coloca las propiedades del

SelectCommand, para llamar al procedimiento almacenado Sales by Year.

o Se crean dos parámetros de entrada o Se crea un nuevo DataSet y se llena desde el DataAdapter.

Page 157: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 149

3.5. Trabajo con Objetos Objetivos En este tema estudiarás la forma de encapsular funcionalidades desde la perspectiva de componentes empresariales y utilizarlos en el desarrollo de cualquier Aplicación Web. Actividad Exposición 1: Componentes en .Net Objetivos En este tema estudiarás la forma de encapsular funcionalidades desde la perspectiva de componentes empresariales y utilizarlos en el desarrollo de cualquier Aplicación Web. Instrucciones a. Revisa el material del documento Objetos (1-7) para que conozcas como funcionan las jerarquías de clases en ASP.NET, así como la forma en que se realiza un componente para su uso posterior en una Aplicación Web. b. Contesta el cuestionario correspondiente Quiz10.doc. c. Realiza el ejercicio Práctica15.doc, para comprobar tus conocimientos sobre la elaboración de componentes en tus aplicaciones. Productos esperados / Evaluaciones Este tema se evaluará con el cuestionario enviado y la Práctica15, contará con el 2% de la calificación final, siempre y cuando lo entregues en la fecha y con el formato adecuado (pdf).

Page 158: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 150

Materiales de apoyo ¿QUÉ ES EL ESPACIO DE NOMBRES?

Introducción La Librería de clases Framework .NET es una librería orientada a objetos, que consiste de espacios de nombres. La librería es una colección de tipos reusables (clases, estructuras, enumeraciones e interfaces) que reducen el tiempo de desarrollo e incrementan el soporte del lenguaje. Definición El Espacio de nombres proporciona un agrupamiento lógico de clases que pueden ser usados por todos los lenguaje de desarrollo compatibles con .NET. Cada espacio de nombres contiene tipos que puedes usar en tu aplicación. El espacio de nombres esta ordenado jerárquicamente lo cual reduce conflictos de nombres e incrementan la reutilidad del código. Importando Espacios de Nombres Para usar clases con un espacio de nombres, se puede declarar totalmente cada tipo con la jerarquía completa del espacio de nombres o puede proporcionar una oración declarativa al inicio de la aplicación. Para publicar una declaración puede usar la instrucción Imports en Visual Basic. NET. Ejemplo: El siguiente código muestra como importar un espacio de Nombres:

Imports System.Data.SqlClient

Page 159: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 151

USANDO ESPACIO DE NOMBRES

Introducción Cuando se usa espacio de nombres, se puede importar el espacio de nombres usando una oración declarativa al inicio de la aplicación o se puede usar explícitamente el espacio de nombres dentro del código. Declaración de Objetos Implícita Cuando usted usa la instrucción Imports puede hacer referencia a un método dentro del espacio de nombres usando solo el nombre del método. El siguiente código hace una demostración de la clase ListBox del espacio de nombres System.Web.UI.WebControls: Imports System.Web.UI.WebControls ... Dim listBox1 As New ListBox() listBox1.Items.Add("First Item") Declaración Explícita de Objetos Si no usa la instrucción Imports, usted debe especificar el nombre del método con su espacio de nombres completo, como es mostrado en el siguiente código: Dim listBox1 As New System.Web.UI.WebControls.ListBox() listBox1.Items.Add("First Item") Ventajas y Desventajas

Page 160: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 152

Ambos métodos de usar espacios de nombres son validos, sin embargo ambos tiene ventajas. Los espacios de nombres implícito casi siempre reduce el tamaño del código. Si usa un tipo de ese espacio de nombre más de una vez en una aplicación ahorra tiempo en la declaración del espacio de nombres. El uso explicito puede hacer que el código sea mas sencillo y entendible de leer para alguien mas, porque casa tipo que es usado es mostrado con su espacio de nombres.

CREAR UN COMPONENT USANDO VISUAL ESTUDIO .NET ¿QUÉ SON CLASES Y COMPONENTES?

Definición de Clase Las clases son grupos de código que no tienen una interfaz de usuario. Las clases proporcionan funcionalidad dentro de una aplicación y puede ser compartida por las diferentes partes de una aplicación. Las clases son usadas para organizar funciones y les dan un nombre simple por el cual pueden ser referenciadas. Las clases tienen propiedades y métodos. Mientras que la propiedades son una manera en la que tu puedes establecer las características de una clase, los métodos son la forma en la invoca las acciones de una clase. Cuando se quiere usar una clase y su método se utiliza un objeto de la clase. Un objeto es una instancia de la clase. Definición de Componente Los componentes son clases que son compiladas dentro de un archivo DLL. Debido a que un componente es su propio archivo, la funcionalidad de un componente puede ser compartido entre diferentes aplicaciones. Se hace referencia a un componente desde una aplicación usando en espacio de nombres del componente y el nombre de la clase.

Page 161: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 153

CREANDO UNA CLASE

Definición Una clase es una plantilla para un objeto. Esta plantilla define atributos para almacenar datos y define operaciones para manipular dichos datos. Una clase define un conjunto de restricciones que pueden ser usados para permitir o negar el acceso a sus atributos y operaciones. Creando una nueva clase Puedes crear una clase en cualquier proyecto de Visual Estudio .NET. Además puedes crear una nueva librería de clases, la cual contiene solo la clase y sus métodos pero no la interfaz de usuario (ventanas o formas).Si tu creas una clase dentro de un proyecto existente la clase existe dentro del espacio de nombres del proyectos. Si tu creas una nueva librería de clases, Visual Estudio .NET crea una espacio de nombre por default y coloca una nueva clase dentro del espacio de nombres. Cuando creas una clase dentro de un proyecto, el archivo clase es compilado dentro del DLL de la aplicación y no puede ser usado por otras aplicaciones. Si tu creas una librería de clases, están creando un componente que puede ser rehusado. Para crear una nueva clase:

1. Abre una solución en Visual Estudio .NET 2. En el menú Archivo, en Nuevo y clic en Proyecto. 3. En la caja de dialogo Tipos de Proyecto selecciona el lenguaje que desees

usar. En el panel Plantilla, selecciona Librería de Clases. Da clic a Agregar a solución para agregar el nuevo proyecto a la solución actual.

Page 162: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 154

4. En la caja Nombre, escribe el nombre de tu nueva librería de clases, y entonces da clic en Aceptar.

Visual Estudio .NET crea un nuevo archivo de clase con una plantilla para la clase, como se muestra en el siguiente código: Public Class Class1 End Class Visual Basic .NET crea un espacio de nombres por default para la clase que tiene el mismo nombre que el proyecto. Para cambiar el espacio de nombre, sigue estos pasos:

a. Clic Derecho al proyecto en el Explorador de Soluciones, y entonces clic en Propiedades.

b. En la caja de dialogo Página de Propiedades, en la ficha Propiedades Generales, establece la ruta del espacio de nombres para el nuevo nombre de tu componente.

5. Construye el proyecto para crear el componente de tu nueva clase.

Creando los métodos de una clase Después que una clase es creada, se agregan los métodos (funciones o procedimientos) que están contenidos dentro de la clase. El siguiente código de ejemplo muestra la nueva clase Shipping. La clase contiene una sola función llamada ShippingCost: Public Class Shipping Function ShippingCost(ByVal sngPrice As Single) _ As Single ’ . . . Return sngShipping End Function End Class

Page 163: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 155

USANDO COMPONENTES EN UNA WEB FORM ASP.NET

Introducción Las clases creadas dentro de un componente están disponibles para otros programas. Primero, debes hacer referencia al componente (DLL). Entonces, para acceder a los métodos dentro de la clase, se instancia el objeto clase haciendo referencia a su espacio de nombre y el nombre de la clase. Referenciado el DLL Antes de usar las clases en un componente, primero debes agregar una referencia al componente dentro de tu proyecto. Para agregar una referencia a el DLL

1. Abre un proyecto de Aplicación Web en Visual Estudio .NET. 2. Clic Derecho al proyecto en el Explorador de Soluciones y entonces

clic a agregar Referencia. 3. En la cuadro de dialogo Agregar Referencia, en la ficha Proyectos

doble clic al proyecto librería de clases y entonces da clic a Aceptar. El componente es agregado a la carpeta Referencias en el Explorador de Soluciones. Instanciando el Objeto Después de agregar una referencia a el componente, tu instancias el objeto clase. La siguiente línea de código declara una nueva variable llamada x de la clase Shipping, dentro del espacio de Nombres company: Dim x As New CompanyA.Shipping

Page 164: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 156

Además puedes usar la instrucción Imports para importar el espacio de nombres y entonces instancias la clase directamente, como se muestra en el siguiente código: Imports CompanyA Dim x As New Shipping

Usando el Objeto Después que es instanciado, el objeto es usado como cualquier otro objeto en tu proyecto. Todos los métodos públicos dentro de la clase están disponibles para usar. Por ejemplo: siguiente línea de código pasa un parámetro a la función ShippingCost de la clase Shipping y asigna el valor de regreso a la variable sngShipping: sngShipping = x.ShippingCost(sngPrice) Quizz10 Instrucciones: contesta cada una de las preguntas brevemente. 1. ¿Qué son los espacios de nombres? 2. ¿Cuál es la diferencia entre la declaración de objetos implícita y explícita? 3. ¿Cuál es la diferencia entre clase y componente? 4. ¿Cómo creas una clase en .NET? 5. ¿Cuál es la metodología para usar componentes en una forma Web? Práctica 15 Creando una clase Instrucciones:

• Crea un nueva librería de clase en C#, llamada HolaMundo. • Observa como se ha creado el archivo Class1.cs • Crea el método Hola

public string Hola() { return "Hola desde un componenteC# ."; }

• Genera el proyecto • Crea una nueva Aplicación Web y agrégala a tu solución actual.

Page 165: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 157

• En la Aplicación Web, agrega una referencia al componente HolaMundo. • Expande el directorio bin en el proyecto y observa que el archivo

HolaMundo.dll ha sido copiado ahí. • Abre la forma WebForm1.aspx • Localiza el control Button y genera su evento Clic y agrega el siguiente

código. HelloWorld.Class1 x = new HelloWorld.Class1(); Button1.Text = x.Hello();

• Genera y examina la forma WebForm1.aspx y haz click en el botón.

Page 166: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 158

4. Servicios Web

4.1. Introducción Objetivos En esta sección reconocerás los estándares abiertos de Internet (HTTP, XML, SOAP, WSDL) a través de ejemplos. Actividad Objetivos En esta sección conocerás un panorama general sobre los estándares de Internet (http, XML, SOAP, WSDL), así como el funcionamiento básico de un Servicio Web. Instrucciones a. Revisa el material del documento ServiciosWeb (1-13) para que te empapes de los conceptos básicos que se consideran en un Servicio Web. b. Contesta el cuestionario correspondiente Quiz11.doc. c. Realiza el ejercicio Práctica16.doc, para que te familiarices con los proxys para invocar a un Servicio Web. Productos esperados / Evaluaciones Este tema se evaluará con el cuestionario enviado y la Práctica16 y contará con el 2% de la calificación final, siempre y cuando lo entregues en la fecha y con el formato adecuado (pdf).

Page 167: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 159

Materiales de apoyo ¿QUÉ ES UN SERVICIO WEB XML?

Introducción Los servicios Web XML son similares a los componentes, ya que representan cajas negras que los desarrolladores pueden usar para agregar características a una Forma Web, a una Aplicación o algún otro servicio Web XML sin preocuparse de cómo el servicio es implementado. Los Servicios Web XML están diseñados para interactuar directamente con otras aplicaciones sobre Internet. Como resultado, los servicios Web XML no tienen una interfaz de usuario; sino que los servicios Web XML proporcionan una interfaz estándar definida llamada contrato que describe los servicios que ellos proporcionan. Un servicio Web XML puede ser usado internamente por una sola aplicación o puede ser usado externamente por muchas aplicaciones que accedan a él por medio de Internet. Una conexión a un servicio Web XML puede ser escrito por cualquier lenguaje basado en Microsoft .NET. Como resultado de esta flexibilidad no necesitan aprender un nuevo lenguaje cada vez que se quiera usar un servicio Web XML. Debido a que los servicios Web XML son accesibles a través de una interfaz estándar los sistemas pueden trabajar juntos. Los servidores que soportan Formas Web también soportan servicios Web XML. El modelo de servicios Web XML asume una arquitectura de servicio sin estado. Cada respuesta de un servicio Web XML es un nuevo objeto, con un nuevo estado.

Page 168: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 160

Los servicios Web XML son asíncronos, porque el objeto solicitud de una aplicación cliente y un objeto respuesta de un servicio Web XML son los únicos que no requieren una conexión compartida. Los servicios Web XML son basados en el World Wide Web. Como resultado, las características genéricas de los servicios Web XML son estáticas; sin embargo, nuevas características pueden ser agregadas en el futuro. ¿PORQUÉ USAR SERVICIOS WEB XML?

Introducción Los servicios Web XML permiten compartir el código de programación y la funcionalidad con numerosas aplicaciones, y con otras aplicaciones que se están ejecutando en otras plataformas. Considera un servicio Web XML como un componente que puede exponer sus métodos a través de la Web. Los servicios Web XML son basados en el estándar W3C. Los servicios Web XML también ofrecen el uso de protocolos Web Standard y las herramientas de soporte que están disponibles en Visual Estudio .NET. Con Visual Estudio .NET, los servicios Web XML son extremadamente fácil de desarrollar y consumir. Imagina un infinito número de Servicios Web XML que puedes usar para agregar diversas características a tus aplicaciones Web. La ilustración anterior muestra un sitio Web de una agencia de viaje que ofrece diversas características que son basadas en Servicios Web XML. En este escenario, el usuario introduce el nombre de la cuidad destino, y la Forma Web usa el nombre de la cuidad como un parámetro que llama a varios servicios Web XML. Desde la perspectiva del usuario, esto es una característica del sitio Web de la agencia. Desde la perspectiva del código, el sitio Web es más una interfaz de usuario combinando un número de Servicios Web XML desde compañías no relacionadas.

Page 169: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 161

ENCONTRANDO UN SERVICIO WEB XML

Introducción Puedes encontrar servicios Web XML existentes para agregar a tu sitio Web usando uno o más de una serie de servicios. Estos servicios están creciendo y cambiando rápidamente, además de que el desarrollo y uso de servicios Web XML gana aceptación en la comunidad de Internet. Encontrando un Servicio Web XML El proceso para encontrar y hacer referencia a un servicio Web XML es como sigue:

1. Los desarrolladores de Servicios Web XML publican descripciones y direcciones para sus servicios Web XML en un sitio Web denominado Descripción universal, Descubrimiento e Integración (UDDI).

2. Tú solicitas al sitio UDDI para encontrar los servicios Web XML disponibles que cumplen con tus requerimientos. UDDI proporciona una lista de Servicios Web XML que incluyen el archivo de descubrimiento (DISCO) documento localizador de recursos (URL’s) para el servicio Web XML.

3. Tú seleccionas un servicio Web XML y accedas al documento DISCO para localizar el URL del servicio Web XML y el documento del lenguaje de descripción del servicio Web relacionado (WSDL).

4. Construyes un objeto Proxy del documento WSDL. 5. Usa el objeto Proxy para ligar el servicio Web XML. 6. Llama el servicio Web XML desde la Forma Web usando el Proxy.

Page 170: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 162

UDDI La especificación UDDI define una manera para publicar y encontrar información acerca de los servicios Web XML y las compañías que los suministran. Archivos DISCO Los archivos DISCO son usados para agrupar servicios comunes en un servidor Web. Son archivos que contienen ligas (URL´s) de los recursos que proporcionan información de un servicio Web XML. Archivos WSDL Un archivo WSDL define la gramática que es usada para comunicarse con un servicio Web XML. Visual Estudio .NET usa el archivo WSDL para construir objetos Proxy para comunicarse con un Servicio Web XML. Los archivos WSDL contienen la siguiente información acerca de un servicio Web XML. Donde encontrar la URL. Los métodos y propiedades servicios Web XML. Tipos de Datos usados. Protocolos de Comunicación. LECCION: LLAMANDO UN SERVICIO WEB XML USANDO HTTP ¿CÓMO LLAMAR UN SERVICIO WEB XML?

Page 171: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 163

Introducción Cuando tú accedes a un servicio Web XML directamente con un navegador, primero accedes a la página de descripción HTML, DefaultWsdHelpGenerator.aspx. Desde esta página, tú puedes seleccionar los métodos de los servicios Web XML disponibles y llamar a los métodos con parámetros. Entonces recibirán una respuesta en XML. Además puedes usar el protocolo HTTP-POST para acceder a un servicio Web XML. Entonces no accederás a la página por default, DefaultWsdHelpGenerator.aspx; sin embargo la respuesta final de los servicios Web XML serán idénticos a una repuesta HTTP-GET. Después de encontrar un servicio Web XML en UDDI, usa el URL .asmx para navegar a la página de descripción HTML. Esta página de descripción proporciona información acerca de lo que hace un servicio Web XML, los métodos Web disponibles, los parámetros de los métodos y la respuesta. Además puedes usar la descripción de página para probar la funcionalidad de los servicios Web XML. La siguiente ilustración muestra una vista del navegador del servicio Web XML denominado Stock que es usado en la demostración en este módulo.

Cuando accedes a la página de descripción de un servicio Web XML, el navegador despliega los métodos disponibles del servicio Web XML. Selecciona un método Web para ver los parámetros requeridos para un método Web. La siguiente ilustración muestra una vista del navegador resultante de la selección del método Web GetRating del servicio Web XML Stocks.

Page 172: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 164

Además puedes seleccionar la liga de Descripción del Servicio en la parte superior la página de descripción HTML para ver el contrato WSDL, el cual contiene una descripción XML del servicio Web XML y su contenido. Para llamar un método Web, llenas la forma y entonces das clic en Invoke. La forma Web pasa el nombre del método, los parámetros requeridos y los valores de los parámetros del URL del servicio Web XML. Los servicios Web XML siempre regresan datos en un formato XML. La siguiente ilustración muestra una vista del navegador donde muestra el resultado de invocar el servicio Web XML Stock con el parámetro Contoso.

Page 173: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 165

LECCIÓN: USANDO UN PROXY PARA LLAMAR UN SERVICIO WEB XML

Usando Proxies para llamar Servicios Web XML

Introducción Para llamar un servicio Web XML desde una Forma Web, necesitas crear una referencia Web al servicio Web XML en tu proyecto de aplicación Web. Las referencias Web crean el objeto Proxy que es usado para comunicarse con el servicio Web XML usando SOAP. ¿Qué es un Proxy? Una clase Proxy es código que es exactamente como una clase es decir sirve para representar pero que no contiene código. Un objeto Proxy permite a un cliente para acceder a un servicio Web XML como si fuera un objeto local COM. El Proxy debe ser en la computadora que tiene la aplicación Web.

Page 174: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 166

Visual Estudio .NET automáticamente crea un Proxy con referencia .Vb, cuando agregas una referencia Web a un servicio Web XML. Cuando tu creas la referencia Web, Visual Estudio .NET crea el archivo de referencia el cual contiene el código Proxy. Interactuar con SOAP Los Proxies y los servicios Web XML interactúan usando SOAP, el cual es un protocolo XML que es utilizado para intercambiar información estructurada. El proceso para acceder a un servicio Web XML usando un Proxy es:

1. El usuario envía una solicitud URL a una Forma Web que requiere para llamar a un servicio Web XML.

2. La forma Web instancia el Proxy, el cual llama al servicio Web XML usando SOAP.

En seguida SOAP hace una solicitud al método Web GetRating del servicio Web XML Stocks pasando el argumento Contoso: <?xml version="1.0" encoding="utf-8"?> <soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema- instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/"> <soap:Body> <GetRating xmlns="http://tempuri.org/"> <Ticker>Contoso</Ticker> </GetRating> </soap:Body> </soap:Envelope>

3. El servicio Web XML envía una respuesta al Proxy usando SOAP. El siguiente código es la respuesta SOAP desde el servicio Web XML GetRating.

<?xml version="1.0" encoding="utf-8"?> <soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema- instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/"> <soap:Body> <GetRatingResponse xmlns="http://tempuri.org/"> <GetRatingResult>Buy</GetRatingResult> </GetRatingResponse> </soap:Body> </soap:Envelope>

Page 175: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 167

4. La Forma Web ASP.NET toma la respuesta desde el servicio Web XML.

Visual Estudio .NET automáticamente crea un Proxy cuando tu seleccionas Agregar Referencia Web desde el menú Proyecto e introduce el URL del servicio Web XML. El archivo wsdl .asmx en el servidor del servicio Web XML es usado para identificar los métodos y parámetros Web que están disponibles en el servicio Web XML. Cuando creas una Proxy usando Visual Studio .NET, un numero de métodos y propiedades que soportan acceso a los servicios Web XML están disponibles. Los miembros que están disponibles a un Proxy incluyen:

• Miembros construidos dentro del Proxy

La infraestructura para hacer asíncronas las llamadas desde una Forma Web a un servicio Web XML es construido dentro de la clase Proxy que es creada automáticamente por Visual Estudio .NET cuando agregas una referencia Web. Un método BeginNombredelMétodoWeb y un método EndNombredelMétodoWeb son automáticamente creados en el Proxy para cada método Web del servicio Web XML.

• Miembros heredados de SoapHttpClientProtocol

Un Proxy hereda un número de métodos y propiedades de la clase System.Web.Services.Protocols.SoapHttpClientProtocol que puede ser usada para manejar interacciones con el servicio Web XML. Algunas de las propiedades del Proxy incluyen las propiedades: Timeout, Url. ¿CÓMO USAR UN PROXY PARA LLAMAR UN SERVICIO WEB XML?

Page 176: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 168

Introducción Para usar un servicio Web XML desde una Forma Web que fue creada en Visual Estudio .NET, primero deberás identificar el URL del servicio Web XML y entonces crear la referencia Web. Para crear un Proxy para llamar un servicio Web XML desde una Forma Web:

1. Abre la aplicación Web y la forma Web desde la cual llamarás a el servicio Web XML, y entonces crearas una referencia Web para el servicio Web XML:

a. En el menú Proyecto, clic a Agregar Referencia Web. b. En el campo Dirección de la caja de dialogo Agregar Referencia Web,

escribe el URL del servicio Web XML que estas accesando, presiona ENTER y entonces da clic en Agregar Referencia.

Visual Estudio .NET crea una referencia Web a http://localhost/Stocks/Service1.asmx, Visual Studio .NET nombrará a la referencia Web localhost por default.

2. En un procedimiento de evento en la Forma Web, crea una instancia del Proxy del servicio Web XML.

Por ejemplo, si tienes un botón para llamar al método GetRating del servicio Web XML Stocks, usa el siguiente código en el evento Clic:

Dim ProxyGetStocks As New GetStocks.localhost.Service1() GetStocks es el nombre de la aplicación Web, localhost es el nombre de la referencia Web y Service1 es el nombre del Servicio Web.

3. Llama a el método Web del servicio Web XML:

Label1.Text = ProxyGetStocks.GetRating("Contoso") El código completo en el procedimiento de evento button_Click quedaría así: Sub Button1_Click(s As Object, e As EventArgs) _ Handles Button1.Click Dim ProxyGetStocks As New _ GetStocks.localhost.Service1() lblResults.Text = ProxyGetStocks.GetRating("Contoso") End Sub 4. Construye el Proyecto de Aplicación Web de ASP.NET Compila la aplicación Web seleccionando Construir en el menú Construir.

Page 177: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 169

MANEJO DE ERRORES EN LOS SERVICIOS WEB XML

Introducción Existen tres fuentes de errores cuando usas un servicio Web XML: servicio indisponible, retardo en el tiempo de respuesta, y errores internos del servicio Web XML, que dan por resultado mensajes de errores desde el servicio en forma de excepciones SOAP. Tu Forma Web necesita estar habilitada para identificar y manejar estos tres tipos de errores. Disponibilidad de un Servicio Web XML

Para probar la disponibilidad de un servicio Web XML de una Forma Web ASP.NET, necesitas establecer una interrupción (timeout) para el Proxy del servicio Web XML. Necesitas usar las instrucciones Try.. Catch.. Finally para manejar esta excepción: • Establecer el parámetro timeout en el Proxy Establecer en la propiedad timeout del servicio Web XML un valor en milisegundos, como muestra el siguiente código: ProxyName.Timeout = value in millisec • Manejar cualquier excepción timeout El siguiente código llama al servicio Web XML, atrapa cualquier excepción y despliega un mensaje de error en Label1: Try 'call the XML Web service Catch err As Exception Label1.Text = err.Message End Try

Page 178: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 170

Excepciones SOAP de los servicios Web XML Si un servicio Web XML esta habilitado para procesar una solicitud, esta puede regresar un mensaje de error usando una instancia de la clase System.Web.Services el objeto SoapException. Para manejar estas excepciones, necesitas usar la instrucción Try.Catch.Finally. El siguiente código atrapa la excepción y despliega un mensaje de error en la etiqueta Label1: Try 'call your XML Web service Catch err As SoapException Label1.Text = "Unable to process your request" End Try LECCIÓN: CREANDO UN SERVICIO WEB XML ¿CÓMO CREAR UN SERVICIO WEB XML?

Introducción Visual Estudio .NET proporciona plantillas y un método de servicio Web XML por default para ayudarte a iniciar la creación de los servicios Web XML. Para crear un servicio Web XML en Visual Estudio .NET 1. Abrir Visual Estudio .NET, y crea un proyecto nuevo de servicio Web en

ASP.NET.

Page 179: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 171

Visual Estudio .NET automáticamente crea las carpetas requeridas, archivos y la página de servicio Web XML. Renombrar el proyecto y el nombre del servicio Web XML es recomendable porque ayuda a identificar el proyecto y los archivos. 2. Declarar las funciones Web.

Visual Estudio .NET crea automáticamente por default una función llamada “Hello world” en una página de servicio Web XML. La función puede ser activada borrando las etiquetas de comentarios. Casi cualquier tipo de función puede ser escrito como un método de servicio Web XML, desde una simple operación local hasta una consulta compleja en una base de datos. 3. Construir el proyecto de servicio Web XML. Después de escribir las funciones, tú necesitas construir el servicio Web antes de poder probar el proyecto. Como con las Formas Web, ASP.NET compila los servicios Web XML dentro del Lenguaje Intermedio Microsoft (MSIL) para próxima ejecución. 4. Probar con un Navegador. Para verificar que las funciones trabajen correctamente, puedes probarlas accesando directamente al servicio Web XML con un navegador. En el explorador de soluciones puedes hacer clic derecho al servicio Web XML y seleccionar la opción Construir y examinar. Otra forma de probar el servicio Web XML con un navegador externo desde Visual Estudio .NET dando clic derecho en el servicio Web XML desde el explorador de soluciones y seleccionando Examinar con... o abriendo el navegador e introduciendo el URL del servicio Web: http://serverName/WebService1/Service1.asmx

Page 180: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 172

CODIGO DE UN SERVICIO WEB XML

Introducción Cuando creas un servicio Web XML con visual Estudio .NET, dos archivos son creados que comprenden el servicio Web XML: el archivo .asmx y el asmx.vb. El archivo .asmx identifica la página Web como un servicio Web XML, mientras que el archivo .asmx.vb, también conocido como el código detrás de la página, contiene el código del servicio Web XML. Página .asmx Debido a que un servicio Web XML no tiene una interfaz del usuario, la página .asmx solo contiene el archivo con la información introducida y una directiva al código detrás de la página. El código en una página .asmx es como el siguiente: <%@ WebService Language="vb" Codebehind="Service1.asmx.vb" Class="XMLWebServiceName.Service1" %> Las páginas .asmx tienen los siguientes atributos:

- @ Web Service El atributo @ Web Service identifica los archivos como un servicio Web XML.

- Language El atributo Language define el lenguaje en el cual el script en la página Web es escrito. Algunos de los valores para este atributo son: vb, c# y JScript.

Page 181: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 173

- Codebehind page El atributo Codebehind identifica el nombre y la ruta de los archivos .asmx.vb que contiene la lógica del servicio Web XML. - Class El atributo Class identifica la clase base que soporta la instancia de un servicio Web XML. En el archivo .asmx, tu debes definir una clase que encapsula la funcionalidad de el servicio Web XML. Esta clase definida será pública y heredará de la clase base del servicio Web XML. La clase por default del servicio Web XML es: Class Service1

El código detrás de la página por default es: Imports System.Web.Services <WebService(Namespace := "http://tempuri.org/")> _ Public Class Service1 Inherits System.Web.Services.WebService '<WebMethod()> Public Function HelloWorld() As String ' HelloWorld = "Hello World" ' End Function End Class El código detrás de la página tiene los siguientes atributos: - Namespaces

Los servicios Web XML importan los espacios de nombres System y los System.Web.Services. - Class El atributo Class identifica la clase base que soporta la instancia de un servicio Web XML. - Los métodos del servicio Web XML Cada método que será expuesto de un servicio Web XML debe estar marcado con un atributo <WebMethod()>. Este atributo es requerido para crear un método Web. Si el método no tiene la etiqueta <WebMethod()> , el método no será expuesto desde el servicio Web XML.

Page 182: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 174

Visual Estudio .NET crea por default un método Web “Hello World”, el cual puede ser activado borrando las marcas de comentario en la página del servicio Web XML. Puedes modificar la función por default o agregar tus propias funciones. EL siguiente código es el método por default de los servicios Web XML de Visual Estudio .NET: <WebMethod()> Public Function HelloWorld() As String HelloWorld = "Hello World" End Function Arquitectura XML ¿Qué es XML?

XML es un formato universal que es usado para describir e intercambiar documentos estructurados y datos en Internet. Además se considera un subconjunto de SGML (Standard Generalizad Markup Language), esto es debido a que asegura que la estructura de los datos será uniforme e independiente de las Aplicaciones Web. XML describe como son estructurados los datos, más no como deben ser mostrados o usados, además es muy parecido al lenguaje HTML, los documentos XML contienen etiquetas que le asignan el significado al contenido del documento.

Page 183: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 175

Un documento XML se compone de los siguientes elementos:

• Instrucciones de Procesamiento : en este apartado se le indican todas las instrucciones pertinentes al motor XML.

• Elementos: se componen de etiquetas de inicio y fin, así como todo tipo de etiquetas anidadas del mismo estilo (elementos hijos)

• Atributos: se encargan de definir los datos que pertenecen a un elemento simple, por lo regular se declaran seguidos de un valor determinado.

XML utiliza los esquemas (schema) para validar sus documentos, y se definen como las descripciones de un documento XML. Además se usan las declaraciones tanto de los elementos como de los atributos, para definir precisamente el uso éstos, así en el siguiente ejemplo, el nombre del elemento es declarado como <LastName>, y en el documento este elemento puede ocurrir 0 ó más veces, este concepto es muy similar a cuando se establece la cardinalidad de las entidades en un diagrama entidad-relación para una base de datos.

<xsd:element name="LastName" minOccurs="0" maxOccurs="*"

type="string"></xsd:element>

ASP.NET permite escribir scripts para que se ejecuten en un servidor Web y así se genere un documento XML, que se envíe hacia el explorador. XML y el Objeto DataSet Los DataSets son la base para la manipulación de datos relacionales de una o más tablas, con el enfoque de almacenamiento desconectado, así XML es el formato estandarizado para los datos que se presentan en estos objetos propios de ASP.Net.

Page 184: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 176

Así XML se utiliza en los DataSets de las formas siguientes:

• Datos Serializados: La información almacenada en un DataSet, con toda su estructura (tablas, columnas, tipos de datos y restricciones), se puede guardar como un documento XML.

• Esquemas (Schemas): La versatilidad y flexibilidad de XML, provee un formato conveniente para transmitir el contenido de un DataSet hacia y desde clientes remotos, es decir se pueden generar esquemas teniendo un DataSet y viceversa.

• Sincronizar y transformar datos: utilizando distintos objetos XML, con los datos provistos por los DataSets.

Page 185: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 177

Dado que la estructura de un DataSet incluye tablas, columnas, relaciones y restricciones y se pueden definir en un esquema XML, es necesario contar con métodos que nos permitan establecer una interface entre el DataSet y el documento XML, por lo que .Net Framework tiene contemplado dos métodos ReadXML y WriteXML, el primero se encarga de leer un documento XML y cargarlo a un objeto DataSet, mientras que el segundo a partir de un objeto DataSet escribe la información a un documento XML. Esto permite que la información viaje entre distintas aplicaciones con diferentes plataformas, lo que es muy conveniente para las aplicaciones Web.

Ejemplos de Utilización de los métodos del objeto DataSet

Así en la primera sección de código, se indica la manera de llenar ds, que es una instancia de la clase DataSet, a continuación se solicita al método ReadXml que lea la información a partir del archivo filename.xml proveniente del servidor, así el método Server.MapPath regresa la dirección física del archivo que corresponde a la ruta virtual específica en el Servidor Web.

Si lo que se desea es escribir el contenido del DataSet a un archivo, entonces se realizan las operaciones de la segunda sección, es decir primero se declara el objeto ds, posteriormente es necesario declarar da, que es una instancia de la clase SqlDataAdapter, cuyo objetivo es ser un punto de enlace entre la conexión a una Base de Datos y el DataSet, así da(SqlDataAdapter), realiza la consulta SQL con una cierta conexión conn, después mediante su método fill, llena ds con la información correspondiente, y posteriormente ds vacía su información a través de su método WriteXml, en el archivo filename.xml.

Page 186: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 178

Por otro lado, la representación del DataSet en un archivo XML, puede escribirse a un archivo, flujo o cadena, así si es necesario conocer esta representación, se utiliza el código de la tercera sección, mediante el método GetXml.

Sección 2

Trabajando con Datos en XML

ASP.NET contiene la clase XmlDataDocument , que permite que los documentos XML puedan ser almacenados, manipulados y recuperado a través de un DataSet, además cualquier cambio realizado en el XmlDataDocument se refleja en el DataSet y viceversa.

La Plataforma .Net mantiene independientes los objetos de acceso a datos de los que generan y manipulan documentos XML, para mantener mayor flexibilidad; más habilita el acceso síncrono en tiempo real, estableciendo una comunicación directa entre el objeto DataSet y sus componentes, con el objeto XmlDataDocument.

Cuando un DataSet es sincronizado con un objeto XmlDataDocument, ambos objetos se encuentran trabajando con el mismo conjunto de datos, y esto es una gran ventaja debido a que se preserva la fidelidad del documento XML, razón que no resulta tan efectiva al utilizar los métodos ReadXml y WriteXml, puesto que los datos pueden diferir del documento XML original, pues el DataSet no mantiene el formato (espacios en blanco o información jerárquica), además de que ignora elementos de XML que no se enlacen con el esquema del DataSet.

Page 187: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 179

La forma de sincronizar estos dos objetos se presenta a continuación:

En el segundo párrafo de la primera sección, aparece el código en C#, aquí se Indica como almacenar datos XML dentro de un XmlDataDocument, en la primera línea se declara una nueva instancia de tipo XmlDataDocument llamado objXmlDataDoc, luego en la segunda línea se carga el archivo file.xml a este objeto. Cabe mencionar que también se puede utilizar la línea alterna siguiente, pues objXmlDataDoc tiene como componente un DataSet y por lo tanto puede cargar el archivo mediante el método ReadXml con sus respectivos argumentos.

En el segundo párrafo de la segunda sección, tenemos el código en C# para almacenar un DataSet en un XmlDataDocument, simplemente se crean el DataSet ds, después se procede al llenado de ds, para después crear el objeto objXmlDataDoc y pasar como argumento a su constructor el objeto ds, y así enlazar los dos objetos.

Page 188: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 180

Como se muestra en la diapositiva anterior, con el XmlDataDocument podemos desde mostrar datos en distintos controles Web, hasta extraer filas con el formato XML. En la primera sección se enlaza el origen de los datos que extraerá el control dg (DataGrid), para que muestre todos los registros provenientes del DataSet del objeto objXmlDataDoc.

En la segunda sección, aparece el código que extrae el primer registro (fila), de la primera tabla que pertenece al DataSet ds, esto se realiza mediante el método GetElementFromRow del objeto objXmlDataDoc, que regresa un objeto de tipo XmlElement. Quizz11 Fecha: ___________________ Tema: __________________________________________________ Alumno: __________________________________________________ Tutor: __________________________________________________ Instrucciones: contesta cada una de las preguntas brevemente. 1. ¿Qué es un servicio Web XML? 2. ¿Cuál es la ventaja de usar servicios WebXML? 3. Explica que es UDDI 4. Explica que es el WSDL 5. ¿Qué es un proxy?

Page 189: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 181

Práctica 16 Usando un proxy para llamar un servicio Web Instrucciones:

• Crea una nueva Aplicación Web, y llámala GetWeatherCS. • Agrega una Referencia Web al servicio Web XML localizado en

http://localhost/Mod13CS/WeatherService.asmx, esto creará un proxy y una nueva referencia Web, llamada localhost en el Explorador de Soluciones.

• Renombra la referencia Web como WeatherWebRef. • Abre la forma WebForm1.aspx en la forma vista diseño y agrega un control

Text Box, un control Button y un control Label a la forma. • Genera el evento clic para el control Button y agrega el código siguiente:

private void Button1_Click(object sender, System.EventArgs e) { GetWeatherCS.WeatherWebRef.WeatherService ProxyGetWeather = new GetWeatherCS.WeatherWebRef.WeatherService(); Label1.Text = ProxyGetWeather.WeatherByCity(TextBox1.Text); }

• Genera y examina la forma WebForm1.aspx • Prueba el servicio web, escribe Seattle en el control Text Box, y haz clic en

el botón, después escribe el nombre de otra ciudad, como London, y presiona el botón nuevamente.(tips: si introduces Seattle la respuesta debe ser sun, mientras que si introduces otra ciudad la respuesta varía entre sun, cloudy o rain).

Page 190: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 182

4.2. Escritura de Servicios Web Objetivos En este tema conocerás la metodología necesaria para crear un servicio Web de XML sencillo. Actividad 4.2 Escritura de Servicios Web Objetivos En este tema conocerás la metodología necesaria para crear un servicio Web de XML sencillo. Instrucciones a. Revisa el material del documento ServiciosWeb para que conozcas la metodología a seguir para la realización de un ServicioWeb. b. Contesta el cuestionario correspondiente Quiz12.doc. c. Realiza el ejercicio Práctica17.doc, para que te des cuenta de lo fácil que resulta crear un Servicio Web. Productos esperados / Evaluaciones Este tema se evaluará con el cuestionario enviado y la Práctica17 y contará con el 2% de la calificación final, siempre y cuando lo entregues en la fecha y con el formato adecuado (pdf). Quizz12 Fecha: ___________________ Tema: __________________________________________________ Alumno: __________________________________________________ Tutor: __________________________________________________ Instrucciones: contesta cada una de las preguntas brevemente. 1. Cuando creamos un servicio Web XML en .NET se crean dos tipos de archivos. ¿Cuales son ? y ¿que contienen? 2. ¿Cuál es la clase por default en un servicio Web XML?

Page 191: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 183

3. ¿Cuál es la página por default en un servicio Web XML? 4. Explica para que se utiliza el atributo “Language” en las páginas .asmx 5. Explica para que reutiliza el atributo “Codebehind page” en las páginas .asmx Práctica 17 Creando un servicio Web Instrucciones:

• Crea un nuevo proyecto de Servicio Web y especifica la localización del Servicio Web como http://localhost/StocksCS

• Abre el archivo Service1.asmx y haz clic dereccho para observar su código. • Crea la función GetRating de la siguiente forma:

[WebMethod] public string GetRating(String Ticker) { if (Ticker == "Contoso") return "Buy"; else return "Sell"; }

• Guarda el archivo. • Genera y Examina el servicio web en Internet Explorer, indicando como

dirección: http://localhost/StocksCS/Service1.asmx • Haz clic en GetRating. • Escribe el nombre de una compañía, como Contoso o Northwind Traders en

el campo Ticker y haz clic en Invoke. Nota: si surge un comentario acerca del espacio de nombres, establece como espacio de nombres, el espacio de nombres por defecto.

Page 192: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 184

4.3. Utilización de datos en Servicios Web. Objetivos En este apartado aprenderás la forma en que se devuelven los conjuntos de datos, desde los métodos de Servicios Web. Actividad 4.3 Utilización de datos en servicios Web XML Objetivos En este apartado aprenderás la forma en que se devuelven los conjuntos de datos, desde los métodos de Servicios Web. Instrucciones a. Revisa el material del documento ServiciosWeb (21-23) para que conozcas la Arquitectura de XML, así como la manera de manipular los datos con XML. b. Contesta el cuestionario correspondiente Quiz13.doc. c. Realiza el ejercicio Práctica18.doc, para que practiques la lectura y escritura desde un DataSet hacia un documento XML. Productos esperados / Evaluaciones Este tema se evaluará con el cuestionario enviado y la Práctica18 contará con el 2% de la calificación final, siempre y cuando lo entregues en la fecha y con el formato adecuado (pdf). Materiales de apoyo Quizz13 Fecha: ___________________ Tema: __________________________________________________ Alumno: __________________________________________________ Tutor: __________________________________________________ Instrucciones: contesta cada una de las preguntas brevemente. 1. ¿Qué es el formato XML? 2. Lista los tipos de elementos de un documento XML 3. ¿Qué es un objeto DataSet? 4. Explica el método ReadXML 5. Explica el método WriteXML

Page 193: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 185

5. Optimización de Aplicaciones Web

5.1. Estado de la aplicación Objetivos En esta sección reconocerás los estándares abiertos de Internet (HTTP, XML, SOAP, WSDL) a través de ejemplos. Actividad 5.1 Estado de la Aplicación Objetivos En esta sección aprenderás a utilizar las variables de estado de aplicación y sesión de una Aplicación Web. Instrucciones a. Revisa el material del documento Optimización donde se explica la importancia de las variables de Aplicación para almacenar datos con modificaciones poco frecuentes, así como las ventajas de las variables de sesión para almacenar la información temporal de un usuario. b. Contesta el cuestionario correspondiente Quiz14.doc. c. Realiza el ejercicio Práctica19.doc y la Práctica20.doc, para que practiques la utilización de las variables de sesión, así como el uso de los archivos cookies. Productos esperados / Evaluaciones Este tema se evaluará con el cuestionario enviado, la Práctica19 y la Práctica20 y contará con el 2% de la calificación final, siempre y cuando lo entregues en la fecha y con el formato adecuado (pdf).

Page 194: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 186

Materiales de apoyo MANEJO DEL ESTADO

La conexión que se establece entre un usuario y un servidor Web se conoce como sesión, así las sesiones pueden unir varias páginas Web y son supervisadas mediante el manejo de su estado. El manejo de estado es el proceso que se encarga de mantener la misma información a través de varias peticiones para la misma página Web o diferentes versiones de ella.

Al utilizar la tecnología http, sólo se cuenta con formularios estáticos, es decir las páginas Web son destruidas y recreadas cada vez que se realiza una nueva petición al Servidor Web. Afortunadamente ASP.NET provee el manejo del estado que mantiene la información en el servidor entre las páginas, lo que permite conservar la continuidad de la información del cliente, cada vez que visita un sitio Web, así el cliente no necesita, registrarse cada vez que accede a la página.

Existen dos tipos de manejo de estado, del lado del cliente y del lado del servidor como se muestra a continuación:

Page 195: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 187

Así el manejo de estado del lado del servidor usa recursos del servidor para almacenar la información, y tiene una mayor seguridad que el lado del cliente, en cambio el manejo de estado del lado del cliente compensa la mínima seguridad que posee a cambio de ofrecer una ejecución más rápida.

Además del lado del servidor se pueden contemplar opciones como:

• Estado de la Aplicación: en este caso la información se encuentra disponible para todos los usuarios de la Aplicación Web, y se conserva su valor en las variables de Aplicación provistas por ASP.NET, cuyos datos idóneos para almacenar son los datos compartidos por sesiones múltiples y que varíen con muy poca frecuencia .

• Estado de la Sesión: la información sólo se encuentra disponible para el usuario de la sesión actual, si este abandona la Aplicación Web temporalmente, al retomarla tendrá un nuevo estado de sesión, este estado conserva su valor mediante las variables de Sesión, cuyos datos ideales a almacenar son datos temporales de las sesiones individuales. Además cada sesión se identifica mediante un identificador de sesión (SessionId), que se almacena en una cookie del lado del cliente y que se mantiene con vida mientras dure la sesión.

• Bases de Datos: con esta opción si la información a almacenar es muy extensa, se puede almacenar en servidores del estilo SQL Server.

Así la información se mantiene mediante las variables de Aplicación,

Del lado del cliente se tienen las opciones siguientes:

Page 196: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 188

• Cookies: es un archivo de texto que permite almacenar datos esenciales que sean requeridos en la ejecución, y son más inseguras que cualquiera de las opciones manejadas en el lado del servidor.

• Propiedad ViewState: al activarse permite retener valores entre las distintas peticiones de la misma página.

• Cadenas de Consulta (Query Strings): son cadenas que aparecen al final del Url, indica ciertos parámetros a considerar.

El archivo Global.asax

El archivo global.asax es un archivo declarativo que es usado para manejar eventos mientras la Aplicación Web esta corriendo, y cuenta con las siguientes características:

• Solo se admite un archivo Global.asax por Aplicación Web y se almacena en el directorio virtual de la aplicación y es opcional.

• En este archivo es donde se manipulan los eventos de aplicación y sesión, así como sus respectivas variables.

A continuación se muestra el funcionamiento, de los eventos que se manejan desde el archivo global.asax:

Page 197: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 189

Así cada vez que un cliente realiza una petición, se disparan los eventos tanto para autenticar como autorizar la entrada al usuario al sitio Web, luego se establecen los atributos para el manejo del estado y una vez que se ejecuta el código de la página, se realiza el proceso de regreso con la respuesta de la petición.

La siguiente tabla muestra el objetivo de cada evento:

Nombre del Evento Descripción Application_BeginRequest Este evento se dispara cuando una

nueva petición es recibida Application_AuthenticateRequest Este evento indica que la petición está

lista para ser autenticada Application_AuthorizeRequest Este evento señala cuando lo petición

esta lista para ser autorizada Application_ResolveRequestCache Evento usado por el modulo del cache

externo para detener el procesamiento de la petición que ha sido guardada en el cache

Application_AcquireRequestCache Señala que el estado de la petición debe ser obtenido

Application_PreRequestHandlerExecute Señala que el manejador de peticiones se va a ejecutar.

Application_PostRequestHandlerExecute Es el primer evento disponible después del manejador, y sucede cuando un servicio Web se ha terminado de ejecutar.

Application_ReleaseRequestState Este evento es llamado cuando el estado de la petición debe ser almacenado

ApplicationUpdateRequestCache Este evento señala que el procesamiento del còdigo fue completado, por lo que el archivo se encuentra listo para anexarse al cache.

Application_EndRequest Es el último evento llamado por la

Page 198: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 190

aplicación Web. Application_Start Este evento es generado cuando la

aplicación comienza. Application_End Este evento se dispara cuando la

Aplicación se termina, es el evento recíproco a Application_Start

Session_Start Es generado cuando un usuario de sesión utiliza una Aplicación Web

Session_End Se genera cuando el usuario de sesión termina sus acciones en la Aplicación Web

Application_Error Se genera cuando un error que no se haya manejado ocurra.

Variables de Sesión y Aplicación

Se pueden inicializar las variables de sesión y aplicación en el evento Start de los objetos Sesión y Aplicación. Se utiliza el objeto Sesión para almacenar la información que es necesaria para una sesión específica del usuario, las variables que son almacenadas en el objeto Sesión no serán descartadas cuando el usuario viaje entre las distintas páginas, es decir las variables persistirán durante toda la sesión del usuario. El código siguiente ilustra como las variables de sesión son usadas para almacenar el esquema de color preferido para una sesión particular del usuario.

protected void Session_Start(Object sender, EventArgs e) { Session["BackColor"] = "beige"; Session["ForeColor"] = "black"; }

Page 199: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 191

Se puede utilizar el objeto Application para compartir la información del estado entre todos los usuarios de la Aplicación Web. Un objeto Application es creado cuando el primer usuario de la Aplicación requieres archivos .aspx. Así el objeto Application es destruido cuando todos los usuarios han salido de la Aplicación Web y ésta ha sido descargada. Por ejemplo, puedes almacenar el número total de visitante para un sitio Web en una variable a nivel Aplicación.

protected void Application_Start(Object sender, EventArgs e) {

Application["NumberofVisitors"] = 0; }

Usando Variables de Sesión y Aplicación

Para usar las variables de sesión y aplicación, simplemente se usa una cadena. Se establece un valor, para personalizar una variable de sesión, es necesario proveer una llave, la cual identifique el elemento que estas almacenando, usando una sentencia como la siguiente: Session("BackColor") = "blue" En este caso la sentencia agrega la llave BackColor, con un valor de blue. Por lo tanto las variables de Aplicación son accesibles en un medio ambiente multi-usuario, así cuando los datos de la Aplicación son actualizados, se necesita prevenir que otros usuarios o Aplicaciones actualicen los datos simultáneamente. Por lo que ASP.NET provee un conjunto de candados, Application.Lock() y Application.UnLock(), los cuáles son utilizados para prevenir acceso concurrente a la variable de aplicación. El código siguiente muestra el uso de los candados.

Page 200: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 192

Application.Lock(); Application["NumberofVisitors"] = (int)Application["NumberOfVisitors"] + 1; Application.UnLock();

Para usar una variable de sesión o aplicación, sólo necesitas leer el valor del objeto Session o Application.

strBgColor = (string)Session["BackColor"]; lblNbVistitor.Text = Application["NumberofVisitors"].ToString();

Un servidor Web no tiene forma de detectar cuando un usuario, deja un sitio Web, en lugar de eso, el Servidor Web detecta que ha pasado un cierto periodo de tiempo sin que un usuario requiera la página. Si el tiempo es excesivo (más de 20 minutos), se remueven todos los elementos en el estado de sesión, que son asociados con ese usuario. Se puede modificar la duración de este periodo de sesión en el archivo Web.config, por ejemplo.

<configuration> <system.web> <sessionState timeout="10" /> </system.web> </configuration>

Almacenamiento Escalable de las Variables de Sesión y Aplicación

Page 201: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 193

El estado de sesión es manejado en procesos, pero esto genera desventajas porque limita la escalabilidad del sitio Web, es decir no se puede configurar varios servidores para manejar las peticiones. Por lo que ASP.NET provee dos métodos que son usados para almacenar el estado de sesión fuera del proceso y son: v Manejo del estado de sesión con una Base de Datos de SQL Server v Manejo del estado de sesión con un servidor distinto.

Para almacenar este estado, se necesita modificar el archivo Web.config , para establecer el modo sessionstate al valor sqlserver o stateserver, y entonces especificar la localización del servidor; la opción sqlserver es similar a stateserver, excepto a que la información persiste en SQL Server.

Esto permite tener Aplicaciones Web escalables, pues el estado de la

sesión es compartido a través de varios servidores que soporten el escenario tipo granja (los usuarios son encaminados dinámicamente desde un servidor a otro sin perder las variables de sesión y aplicación).

Variables de Sesión y Aplicación en una Base de Datos

Para guardar las variables en una Base de Datos SQL Server o cualquier otro servidor es necesario: ü Configurar el estado de sesión en el archivo Web.config de tu servidor web ü Configurar SQL Server o el Servidor de Estado (servidor independiente).

Por ejemplo, si estas usando el modo sqlserver con seguridad integrada, se necesitan establecer las propiedades de la siguiente forma:

Page 202: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 194

<sessionState mode="SQLServer" sqlConnectionString="data source=SQLServerName; Integrated security=true" />

Para configurar SQL Server, necesitas ejecutar el comando OSQL.exe, que instala la Base de Datos ASPState, que es utilizada para guardar estas variables. Para instalarla usa la siguiente instrucción:

c:\> OSQL .S SQLServerName -E <InstallSqlState.sql Sesiones con Cookies y sin ellas. Los archivos cookies son medios por los que la Aplicación Web que corra en el Servidor Web, pueda causar a un cliente para regresar información al servidor web con cada petición, esto permite mantener el estado con el cliente a través de múltiples peticiones. Las cookies son enviadas al cliente como parte de la cabecera http en la petición del cliente.

Se pueden crear estas cookies usando la propiedad Cookies del objeto Response y la clase Request, así la propiedad Cookies representa una colección de cookies y es una instancia de la clase HttpCookieCollection. El código siguiente crea una nueva cookie llamada myCookie.

HttpCookie objCookie = new HttpCookie("MyCookie"); DateTime now = DateTime.Now;

Así el código que sigue agrega un par de llaves y valores:

Page 203: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 195

objCookie.Values.Add("Time", now.ToString()); objCookie.Values.Add("ForeColor", "White"); objCookie.Values.Add("BackColor", "Blue");

Se puede establecer el tiempo de expiración de la cookie por cierto periodo de tiempo de lo contrario se comportaría como una cookie temporal (se elimina cuando el usuario sale del explorador), por ejemplo:

objCookie.Expires = now.AddHours(1); Es decir la cookie anterior se vuelve persistente, por lo que se guarda en el disco duro. Además por ejemplo si deseas crear una cookie llamada UserName, la cual contiene el nombre de un visitante a tu sitio Web, el servidor web enviará en la cabecera de http como se muestra a continuación:

Set-Cookie: Username=John+Chen; path=/; domain=microsoft.com; Expires=Tuesday, 01-Feb-05 00.00.01 GMT

Por lo que el servidor agregará la cookie llamad Username con el valor John Chen, mientras que el atributo de domain , restringe donde la cookie puede ser enviada por el explorador, así en el ejemplo la cookie solo puede ser enviada al sitio de Microsoft. Las cookies se almacenan en el directorio Documents and Settings\Username\Cookies y si son almacenadas por Internet Explorer el archivo de texto se llama [email protected] Usando sesiones sin cookies

Page 204: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 196

Cada sección activa es identificada usando un SessionID (identificador de Usuario) y por omisión éste se encuentra almacenado en cookies. Sin embargo los usuarios pueden deshabilitar las cookies, así si la cookie no puede ser agregada al explorador del usuario, cada petición realizada por el usuario comienza una nueva sesión de usuario. Por lo que el Framework incluye una opción para habilitar las sesiones sin cookies, pues así no existen problemas aunque el usuario deshabilite las cookies. Cuando un usuario realiza su primera petición a un sitio Web con esta opción, el URL que es usado para la petición es automáticamente modificado para incluir el SessionID del usuario. Por ejemplo cuando un usuario hace una petición a http://server/page.aspx, la petición se modifica a:

http://server/(h44a1e55c0breu552yrecobl)/page.aspx Así lo que aparece entre (), es justamente el SessionID, para el usuario actual. Además para establecer el modo de sesión sin cookies, en el archivo Web.config se hace el cambio en la siguiente sentencia: <sessionState cookieless="true" /> Práctica 19 Usando Variables de Sesión Instrucciones:

• En el modulo14CS, abre el código detrás de página de global.asax. • Inicializa una variable de sesión llamada intNumber a 3 para agregar el

código siguiente a l procedimiento Session_Start. Session["intNumber"] = 3;

• Abre las formas UsingSessionVar1.aspx y UsingSessionVar2.aspx, observa

que la variable de sesión es recuperada y desplegada en el evento Page_Load.

• Genera y examina la forma UsingSessionVar1.aspx, el valor de la variable

de sesión 3 es desplegado.

• Haz clic en la página siguiente, entonces se abrirá la página UsingSessionVar2.aspx, que incrementará el valor de la variable de sesión por 4 y desplegará su nuevo valor 7.

Page 205: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 197

• Para comprobar que el valor de 7 no ha cambiado, da clic en Previous Page, para que regreses a UsingSessionVar1.aspx y veas que en esa página el valor ya se actualizo de 3 a 7.

Práctica 20 Usando Variables y Cookies Instrucciones:

• Abre Internet Explorer y examina el URL http://instructorsmachine/Mod14CS/default.aspx.

• Escribe tu nombre en el control Text Box, selecciona un color del control List Box que aparece y haz clic en Submit.

• Así serás redireccionado a la forma results.aspx, la cual muestra tu nombre, el color seleccionado y la fecha y hora de cuando fue tu último acceso a la forma default.aspx.

• Presiona la opción Actualizar del Explorador unas cuantas veces (lo que ocasionará que en cada actualización se incremente el número de visitantes más el resto de la información se conservará igual).

• Cierra Internet Explorer. • Vuelve a abrir Internet Explorer y examina el URL:

http://instructorsmachine/Mod14CS/results.aspx. Nota que todos los datos apareen excepto el color que previamente seleccionaste no aparece.

• Escribe como comentarios, las respuestas a las siguientes preguntas y ubicalos en la sección donde se encuentra la respuesta, anexando el porque de ella.

1. ¿Cuál es la razón de que el nombre sea recordado cuando visitas nuevamente la página y la elección del color no?

2. ¿Gracias a que objeto se actualiza el número de visitantes?

Page 206: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 198

5.2. Servicios de Caché Objetivos En este tema aprenderás el funcionamiento de las clases de caché que dispone ASP.NET para mejorar el rendimiento de las Aplicaciones. Actividad 1

5.2.1. Usando el objeto caché Objetivos En esta sección conocerás las ventajas de utilizar el objeto Caché para almacenar información a la que necesites acceder de forma continua. Instrucciones a. Revisa el material de apoyo donde se explican los conceptos básicos del objeto caché, así como su funcionamiento. b. Contesta el cuestionario correspondiente Quiz15.doc. c. Realiza el ejercicio Práctica21.doc, para que experimentes la diferencia entre usar el objeto caché y no utilizarlo. Productos esperados / Evaluaciones Este tema se evaluará con el cuestionario enviado y la Práctica21 y contará con el 2% de la calificación final, siempre y cuando lo entregues en la fecha y con el formato adecuado (pdf). Actividad 2

5.2.2. Almacenamiento en caché de los resultados de página Objetivos En este tema mostrará las herramientas, para manipular los procesos solicitud/ respuesta almacenando en caché el contenido generado en páginas dinámicas.

Page 207: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 199

Instrucciones a. Revisa el material de apoyo para que conozcas el funcionamiento del caché de los resultados de página, así como el rendimiento que ofrece para evitar compilaciones y ejecuciones innecesarias del código del Servicio Web, ocupando el código almacenado en el caché. b. Contesta el cuestionario correspondiente Quiz16.doc. c. Realiza el ejercicio Práctica22.doc, para que practiques las distintas opciones para emplear el caché de los resultados de página. Productos esperados / Evaluaciones Este tema se evaluará con el cuestionario enviado y la Práctica22 y contará con el 2% de la calificación final, siempre y cuando lo entregues en la fecha y con el formato adecuado (pdf). Actividad 3

5.2.3. Almacenamiento en caché de fragmentos de página Objetivos En este tema se darán las herramientas, para mantener en el caché ciertas secciones de la página en un periodo de tiempo específico. Instrucciones a. Revisa el material de apoyo para que conozcas el funcionamiento del caché de fragmentos de página, así como sus ventajas. b. Contesta el cuestionario correspondiente Quiz17.doc. Productos esperados / Evaluaciones Este tema se evaluará con el cuestionario enviado y contará con el 2% de la calificación final, siempre y cuando lo entregues en la fecha y con el formato adecuado (pdf).

Page 208: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 200

Materiales de apoyo Servicios de Caché Una de los formas más efectivas para incrementar el desempeños de las aplicaciones Web es utilizar el objeto Caché, éste permite localizar elementos en la memoria del servidor de tal forma que puedan ser recuperados rápidamente. Sin embargo cargar demasiados elementos dentro del objeto Caché, puede bajar el tiempo de respuesta del servidor, reduciendo la cantidad de memoria disponible. ¿Qué es el objeto Caché?

El objeto Caché permite almacenar elementos la primera vez que son solicitados, y entonces se usa la copia que contiene el caché para solicitudes posteriores. Además para almacenar datos individuales ASP.NET ofrece un caché de salida (resultados de página), que puede ser usado para almacenar páginas Web y controles de usuario. Así el objeto Caché, provee un método para pasar valores entre las páginas en la misma Aplicación Web, los métodos de caché implementan el bloqueo de manera automática, además esto asegura que los valores que sean accesados concurrentemente mantengan su integridad. El proceso para usar el objeto Caché es:

• Una página requiere un elemento que ha sido identificado, que esta siendo almacenado en el objeto Caché.

• ASP.NET verifica el objeto Caché para ver si esta disponible el objeto en el caché.

• Si la versión del elemento en el caché no está disponible, se recrea el elemento, lo utiliza y lo almacena en el objeto Caché para un uso posterior.

Page 209: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 201

Se crea un objeto Caché para cada Aplicación Web, así los elementos que se almacenan, no pueden ser accedidos por otras Aplicaciones Web que se encuentren corriendo en el mismo servidor, por lo tanto por incrementar el desempeño de la Aplicación Web, no se permite escalar en distintos niveles la Aplicación.

El objeto Caché puede emplearse para almacenar información que podría ser almacenada en las variables de aplicación, así en lugar de recrear el valor cada vez que usas el elemento, lo almacenas en un caché individual que puede ser accedido por cualquier página de la aplicación. Además el caché no puede ser usado para almacenar información que se encuentra en las variables de sesión.

Además este objeto utiliza el par llave-valor para almacenar y recuperar objetos. Así la llave es la llave del caché, que es una cadena que es usada para referenciar al objeto, mientras que el valor es el objeto almacenado. Para agregar un elemento al caché se realiza la siguiente sentencia:

Cache["mykey"] = myValue; Y para recuperar un elemento del caché tenemos: myValue = Cache["myKey"];

¿Cómo usar el objeto Cache?

Puedes escribir un elemento dentro del objeto caché de forma implícita, como se muestra a continuación:

Cache["mykey"] = myValue;

O bien de forma explícita, dando los parámetros necesarios como el límite de tiempo de almacenamiento, y se indica de la siguiente forma:

Cache.Insert("myKey", myValue, Dependency, AbsoluteExpiration, SlidingExpiration, CacheItemPriority, CacheItemRemovedCallBack);

Page 210: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 202

Removiendo elementos del objeto cache

Los elementos en el objeto Caché, son removidos tan pronto como el tiempo límite es superado. Se puede definir el tiempo de vida máximo para un elemento utilizando el parámetro AbsoluteExpiration, este parámetro permite que tu especifiques el tiempo en el cual el elemento expirará. El siguiente código especifica que myValue será removido del objeto Caché exactamente cinco minutos después de que fue creado.

Cache.Insert("myKey", myValue, null, _ DateTime.Now.AddMinutes(5), Cache.NoSlidingExpiration);

Además se puede definir el tiempo de vida relativo para un elemento usando el parámetro SlidingExpiration, que permite especificar el intervalo de tiempo entre el tiempo que el objeto caché fue accedido por última vez y cuando el objeto expira.

El siguiente código especifica que myValue será removido del objeto Caché exactamente 20 segundos después de su último acceso.

Cuando existen dependencias entre archivos, y es necesario actualizar la información de alguno ante el comportamiento del otro, se puede utilizar el objeto Caché, como en el ejemplo siguiente, que remueve myValue cuando el archivo myDoc.xml se modifica.

Cache.Insert("myKey", myValue, null, null, Cache.NoSlidingExpiration, CacheItemPriority.High, onRemove);

Page 211: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 203

Así el siguiente código inserta un valor para MyBook al caché con un número de argumentos, después se establece una dependencia al archivo Books.xml y después se remueve el elemento en estos casos: 5 minutos después de haber sido almacenado, 30 segundos después del último acceso o cuando el archivo xml cambie. Cache.Insert("MyBook.CurrentBook", CurrentBook, new CacheDependency(Server.MapPath("Books.xml")), DateTime.Now.AddMinutes(5), TimeSpan.FromSeconds(30), CacheItemPriority.High, onRemove); Usando el caché de Resultados de Página Algunas veces es impráctico guardar la página completa, porque sólo algunas porciones de la página se pueden necesitar crearse dinámicamente en cada petición. Un ejemplo de fragmentos de página es una cabecera de página, un gráfico, por ejemplo el siguiente código ubica los resultados del Método Web CachedInfo dentro del Caché de resultados de página por cinco minutos. [WebMethod(CacheDuration=300)] public string CachedInfo() { ... } ¿Cómo usar el Caché de resultados de página?

Para cargar una página a este tipo de caché, debes agregar la directiva OutputCache a la forma Web, ésta incluye dos propiedades: la propiedad Duration que establece el tiempo de almacenamiento máximo para la página guardada en segundos, y la propiedad VaryByParam que determina cuando una nueva copia de la página es creada en el caché, basado en el parámetro que es pasado a la página.

Page 212: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 204

Se puede especificar el tiempo de expiración del valor, como en el siguiente ejemplo:

<%@ OutputCache Duration="900" VaryByParam="None"%> La propiedad VaryByParam es usada para determinar si ASP.NET debería crear versiones diferentes de caché de página en situaciones en las que las solicitudes a la página tenga parámetros específicos, si se coloca en “none” significa que sólo una versión de la página es almacenada. Caché de Fragmentos de Página Este caché nos permite guardar partes de la página y controles de usuario para un periodo de tiempo específico, además puedes elegir permitir que partes de la página que requieren pocos recursos, o partes de la página que deben ser creados a cada petición o se generan dinámicamente. Los buenos candidatos para el caché de fragmentos de página incluye cabeceras, listas de arrastre. Por ejemplo si deseas incluir la siguiente directiva al inicio de un control de usuario, una versión del control es almacenada en el cache de sallida por dos minutos y solo una versión puede ser guardada. <%@ OutputCache Duration="120" VaryByParam="none"%> Práctica 15 Creando una clase Instrucciones:

• Crea un nueva librería de clase en C#, llamada HolaMundo. • Observa como se ha creado el archivo Class1.cs • Crea el método Hola

public string Hola() { return "Hola desde un componenteC# ."; }

• Genera el proyecto • Crea una nueva Aplicación Web y agrégala a tu solución actual. • En la Aplicación Web, agrega una referencia al componente HolaMundo. • Expande el directorio bin en el proyecto y observa que el archivo

HolaMundo.dll ha sido copiado ahí. • Abre la forma WebForm1.aspx

Page 213: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 205

• Localiza el control Button y genera su evento Clic y agrega el siguiente código.

HelloWorld.Class1 x = new HelloWorld.Class1(); Button1.Text = x.Hello();

• Genera y examina la forma WebForm1.aspx y haz click en el botón. Práctica 16 Usando un proxy para llamar un servicio Web Instrucciones:

• Crea una nueva Aplicación Web, y llámala GetWeatherCS. • Agrega una Referencia Web al servicio Web XML localizado en

http://localhost/Mod13CS/WeatherService.asmx, esto creará un proxy y una nueva referencia Web, llamada localhost en el Explorador de Soluciones.

• Renombra la referencia Web como WeatherWebRef. • Abre la forma WebForm1.aspx en la forma vista diseño y agrega un control

Text Box, un control Button y un control Label a la forma. • Genera el evento clic para el control Button y agrega el código siguiente:

private void Button1_Click(object sender, System.EventArgs e) { GetWeatherCS.WeatherWebRef.WeatherService ProxyGetWeather = new GetWeatherCS.WeatherWebRef.WeatherService(); Label1.Text = ProxyGetWeather.WeatherByCity(TextBox1.Text); }

• Genera y examina la forma WebForm1.aspx} • Prueba el servicio web, escribe Seattle en el control Text Box, y haz clic en

el botón, después escribe el nombre de otra ciudad, como London, y presiona el botón nuevamente.(tips: si introduces Seattle la respuesta debe ser sun, mientras que si introduces otra ciudad la respuesta varía entre sun, cloudy o rain).

Práctica 17 Creando un servicio Web Instrucciones:

• Crea un nuevo proyecto de Servicio Web y especifica la localización del Servicio Web como http://localhost/StocksCS

• Abre el archivo Service1.asmx y haz clic dereccho para observar su código.

Page 214: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 206

• Crea la función GetRating de la siguiente forma: [WebMethod] public string GetRating(String Ticker) { if (Ticker == "Contoso") return "Buy"; else return "Sell"; }

• Guarda el archivo. • Genera y Examina el servicio web en Internet Explorer, indicando como

dirección: http://localhost/StocksCS/Service1.asmx • Haz clic en GetRating. • Escribe el nombre de una compañía, como Contoso o Northwind Traders en

el campo Ticker y haz clic en Invoke. Nota: si surge un comentario acerca del espacio de nombres, establece como espacio de nombres, el espacio de nombres por defecto. Práctica 22 Caché de resultados de página Instrucciones:

• En el modulo Mod15CS abre la forma OutputCache.aspx • Observa el código que obtiene el tiempo y la fecha actual en una etiqueta. • Genera y examina la página • Recarga la página varias veces para que observes como los segundos va

cambiando. • Agrega la siguiente directiva a la página, después de la línea de código que

contiene la directiva: <%@ OutputCache Duration="10" VaryByParam="none"%>

• Genera y examina la página • Recarga la página varias veces para mostrar que los segundos ahora van

cambiando después de intervalos de 10 segundos. • Abre la forma OutputCacheVaryByParam.aspx • Observa la directiva OutputCache con la propiedad VaryByParam • Genera y examina la página • Después del final del URL, agrega el parámetro ?Name=Someone • Observa el efecto del caché de salida cuando cambia el valor del parámetro

?Name=Someone a ?Name=Someone2

Page 215: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 207

5.3. Configuración Objetivos Implementar mecanismos para identificar a los usuarios y controlar el acceso a los recursos de la Aplicación Web. Actividad 1

5.3.1. Formato del archivo de configuración Objetivos En este tema aprenderemos los elementos y valores de configuración incluidos en los archivos de configuración de ASP.NET. Instrucciones a. Revisar el tema en el material de apoyo para que conozcas como se realiza la configuración de una Aplicación Web, así como el formato de los archivos involucrados. b. Contesta r el cuestionario correspondiente Quiz18.doc. Productos esperados / Evaluaciones Este tema se evaluará con el cuestionario enviado y contará con el 2% de la calificación final, siempre y cuando lo entregues en la fecha y con el formato adecuado (pdf). Actividad 2

5.3.2. Recuperar la configuración Objetivos En este tema se proveerán los mecanismos para que utilices los valores de configuración ya sea como propiedades o mediante determinadas API.

Page 216: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 208

Instrucciones Revisar el tema en el material de apoyo para conocer la forma en que se almacenan y se obtienen los datos de la configuración, así como la manera en que se realiza la distribución de una Aplicación Web. b. Contesta el cuestionario correspondiente Quiz19.doc. Productos esperados / Evaluaciones a. Este tema se evaluará con el cuestionario enviado y contará con el 2% de la calificación final, siempre y cuando lo entregues en la fecha y con el formato adecuado (pdf). Material de Apoyo CONFIGURANDO UNA APLICACIÓN WEB ASP.NET

INTRODUCCIÓN Antes de que puedas desplegar tu aplicación Web ASP.NET, debes organizar algunos archivos de configuración (Machine.config, Web.config). En esta lección, aprenderás como configurar una aplicación Web ASP.NET.

Page 217: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 209

DESCRPCIÓN DE LOS METODOS DE CONFIGURACION

INTRODUCCIÓN La información de los recursos de configuración esta contenida en una colección de archivos de configuración. Cada archivo de configuración contiene una necesaria jerarquía de etiquetas y subetiquetas XML con atributos que especifican la configuración a establecer. Machine.config La configuración a nivel de máquina es almacenada en el archivo Machine.config. Hay solo un archivo Machine.config para cada servidor Web. Web.config La aplicación y los niveles de directorios son almacenados en los archivos Web.config. Cada aplicación tiene al menos un archivo Web.config. Los directorios Virtuales pueden tener sus propios archivos Web.config que contiene la configuración establecida para cada directorio. Atributos de los archivos .config Las etiquetas en los archivos Machine.config y Web.config deben estar formateadas usando etiquetas y subetiquetas XML. Toda la información de configuración en los archivos .config residen entre las etiquetas <configuration> y </configuration>.

Page 218: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 210

CONFIGURANDO UN SERVIDOR WEB USANDO MACHINE.CONFIG

INTRODUCCIÓN El archivo de configuración de la máquina, Machine.config, contiene la configuración que aplica a toda la computadora. Hay solo un archivo Machine.config para cada servidor Web. El archivo Machine.config esta localizado en el siguiente directorio, donde se encuentra la versión del Framework de Microsoft.NET que esta instalada en el servidor Web. C:\WINDOWS\Microsft.NET \Framework\version\CONFIG\Machine.config La configuración afecta a todas las aplicaciones Al establecer el archivo de configuración Machine.config afecta a todas las aplicaciones que están localizadas en el servidor. El sistema de configuración primero observa en el archivo Machine.config y utiliza los elementos declarados en <appsettings> y después la configuración establecida en los archivos de cada aplicación Machine.config. Ventaja de utilizar el archivo Machine.config Al establecer el archivo de configuración Machine.config tú puedes hacer que tu sistema sea más fácil de mantener, ya que solo basta editar y modificar un solo archivo.

Page 219: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 211

Desventaja de utilizar el archivo Machine.config Cuando despliega una Aplicación Web sobre un nuevo servidor, la aplicación Web utiliza un archivo de configuración que no es copiado al nuevo servidor Web. CONFIGURANDO UNA APLICACIÓN UTILIZANDO WEB.CONFIG

INTRODUCCIÓN En ASP.NET, tú puedes compartir la información y establecer la configuración para cada aplicación Web mediante el archivo Web.config. También puedes almacenar información local y configurar directorios virtuales creando archivos adicionales Web.config. Un simple archivo Web.config es siempre localizado en el archivo raíz de la carpeta de la aplicación Web. Los archivos adicionales pueden ser localizados en la carpeta del directorio virtual para lo cual están por debajo. Uno o más archivos Web.config por aplicación Web La presencia de un archivo adicional Web.config es opcional. Si un archivo Web.config no esta presente, toda la configuración para el directorio es heredada automáticamente del directorio padre, en el archivo Webconfig. Categorías de funcionalidad en ASP.NET En un archivo Web.config, hay secciones para cada categoría principal de funcionalidad en ASP.NET, como se muestra a continuación.

Page 220: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 212

Nombre de la sección

Descripción

<broserCaps> Responsable para controlar la configuración del navegador

<compilation> Responsable para la configuración de compilación que es usada por ASP.NET

<globalization> Responsable para la configuración de elementos generales de una aplicación

<httpModules> Responsable para configurar el protocolo http, el cual participa en el procesamiento de respuestas de una aplicación.

<httpHandlers> Responsable para mapeos de direcciones URLs a clases IHttpHandler

<processModel> Responsable para configurar el modelo ASP.NET sobre Intenert Information Server (IIS)

<authentication> <identity> <authorization>

Responsable de toda la seguridad que es usada por ASP.NET en <httpModule>

<sessionState> Responsable de la configuración del estado de la sesión en httpmodule

<trace> Responsable de la configuración del servicio de trazo en ASP.NET

ENTENDIENDO LA HERANCIA DE LOS ARCHIVOS DE CONFIGURACIÓN

Page 221: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 213

INTRODUCCIÓN Cuando un servidor Web recibe una petición para un recurso de una aplicación Web, ASP.NET determina la configuración establecida para el recurso jerárquicamente. ASP.NET usa todos los archivos de configuración que son localizados en el directorio virtual para la petición del recurso. El nivel más bajo establece la configuración sobrescribiendo la configuración de los directorios padres. Ejemplo: Si un archivo de configuración Web.config en el directorio raíz (VirtualDir) de una aplicación Web contiene una sección de seguridad que permite acceder solo a ciertos usuarios, el subdirectorio SubDir hereda esa seguridad establecida. Como resultado, todos los usuarios tienen acceso a los recursos de ASP.NET en la aplicación raíz del directorio, VirtualDir, pero solo ciertos usuarios tienen acceso a los recursos de ASP.NET en SubDir. Los archivos Web.config para la aplicación en VirtualDir y el subdirectorio SubDir están localizados en: C:\Inetpub\wwwroot\VirtualDir\Web.config C:\Inetpub\wwwroot\VirtualDir\SubDir\Web.config ALMACENANDO Y RECUPERANDO DATOS EN EL ARCHIVO Web.config

Page 222: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 214

INTRODUCCIÓN Tú puedes usar la sección <appSettings> del archivo Web.config como un repositorio para las aplicaciones. En la sección <appSetting> se pueden establecer cadenas de conexión de bases de datos para aplicaciones centralizadas, en lugar de tenerlas en cada página ASP.NET.

Almacenando la configuración en Web.config El siguiente archivo Web.config crea dos key-value para cadenas de conexión en bases de datos que son usadas en una aplicación Web.

<configuration> <appSettings> <add key=”pubs” value=”data source=localhost; initial catalog=pubs; integratedsecurity=SSPI”/> <add key=”northwind” value=”data source=localhost; initial catalog=northwind; integrated security=SSPI” /> </appSettings> </configuration>

Recuperando la configuración del archivo Web.config Para recuperar la configuración establecida de los archivos Web.config en las aplicaciones, se debe usar ConfigurationSettings.AppSettings.

Por ejemplo, el siguiente código ejemplo lee el valor de pubs key desde la sección <appSettings> stringstrPubs=System.Confuiguration.ConfigurationSettings.AppSettings[“pubs”]; Quizz18 Fecha: ___________________ Tema: __________________________________________________ Alumno: __________________________________________________ Tutor: __________________________________________________ Instrucciones: contesta cada una de las preguntas brevemente. 1. ¿Para que se utiliza el archivo Machine.config ? 2. ¿Para que se utiliza el archivo Web.config ? 3. ¿Cuál es la ventaja de configurar el archivo Machine.config? 4. ¿Para que se usa <appSettings> en la configuración? 5. ¿Que debe usarse para recuperar la configuración del archivo Web.config?

Page 223: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 215

Quizz19 Fecha: ___________________ Tema: __________________________________________________ Alumno: __________________________________________________ Tutor: __________________________________________________ Instrucciones: contesta cada una de las preguntas brevemente. 1. ¿Qué es la Autenticación en aplicaciones Web? 2. ¿Qué es la Autorización en aplicaciones Web? 3. Lista los métodos de Autenticación en ASP.NET 4. ¿Cuál es el método de autenticación más común en ASP.NET? 5. ¿Que sucede si establecemos el acceso como “Anonymous”?

5.4. Seguridad Objetivos Implementar mecanismos para identificar a los usuarios y controlar el acceso a los recursos de la Aplicación Web. Actividad 1

5.4.1. Autenticación y Autorización Objetivos En este tema se estuidarán los diferentes tipos de autenticación y autorización de usuarios en tus aplicaciones. Instrucciones a. Revisar en el material de apoyo los conceptos básicos sobre la autenticación, la autorización y sus tipos. b. Contesta el cuestionario correspondiente Quiz20.doc. c. Realiza el ejercicio Práctica23.doc, para que practiques la forma de establecer y mostrar los mecanismos de autenticación.

Page 224: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 216

Productos esperados / Evaluaciones Este tema se evaluará con el cuestionario enviado y contará con el 2% de la calificación final, siempre y cuando lo entregues en la fecha y con el formato adecuado (pdf). Actividad 2

5.4.2. Autenticación basada en Windows Objetivos En esta sección conocerá la forma de uso de la autenticación a través de relacionar un objeto WindowsPrincipal a la solicitud actual. Instrucciones a. Revisar en el material de apoyo el tema de autenticación basada en Windows su forma de trabajo y sus ventajas. b. Contesta el cuestionario correspondiente Quiz21.doc. c. Realiza el ejercicio Práctica24.doc, para que practiques la forma utilizar esta autenticación. Productos esperados / Evaluaciones Este tema se evaluará con el cuestionario enviado y la Práctica23 y contará con el 2% de la calificación final, siempre y cuando lo entregues en la fecha y con el formato adecuado (pdf). Actividad 3

5.4.3. Autenticación basada en formularios Objetivos En este tema aprenderás como implementar la interfaz de inicio de sesión y la verificación de las credenciales respectivas.

Page 225: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 217

Instrucciones a. Revisa el material de apoyo para que conozcas como se trabaja con la autenticación basada en Formularios y sus ventajas. b. Contesta el cuestionario correspondiente Quiz22.doc. Productos esperados / Evaluaciones Este tema se evaluará con el cuestionario enviado y contará con el 2% de la calificación final, siempre y cuando lo entregues en la fecha y con el formato adecuado (pdf).

Material de Apoyo

AUTENTICACIÓN VS AUTORIZACIÓN

INTRODUCCIÓN Para trabajar con seguridad, debes estar familiarizado con los dos conceptos fundamentales para la seguridad en aplicaciones Web. Ø Autorización Ø Autenticación

Autenticación La autenticación es el proceso para obtener credenciales de identificación, tal como un nombre y un password, para un usuario y validando esas credenciales contra alguna autoridad, como una base de datos. Si las credenciales son validas, la entidad que enviada es considerada como una entidad autentificada.

Page 226: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 218

Por ejemplo, todos los usuarios deben tener un nombre y un password para trabajar en una red de computadoras. Esas credenciales son la validación contra una autoridad tal como una base de datos. Autorización Después de que una entidad ha sido autentificada, el proceso de autorización determina si esa entidad tiene acceso a un recurso especificado. El proceso de autorización limita los accesos a través de permisos a una entidad autentificada. Por ejemplo, puedes autorizar al usuario Robert Brown a acceder a una impresora de color, pero negar el acceso al usuario Bob Hohman. MÉTODOS DE AUTENTICACIÓN EN ASP.NET

INTRODUCCIÓN ASP.NET soporta tres tipos de métodos de autenticación: Ø Autenticación basada en Windows Ø Autenticación basada en Formularios Ø Autenticación de Microsoft Passport

Autenticación basada en Windows Con la autenticación basada en Windows, las aplicaciones Web ASP.NET delegan sobre el sistema operativo Windows la autenticación de los usuarios de ASP.NET junto con el IIS. Con la autenticación basada en Windows, los usuarios hacen una petición a través del IIS. Si el usuario no es autorizado, el IIS regresa la petición. Si el usuario es autorizado la página Web es entonces retornada a el usuario.

Page 227: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 219

Autenticación basada en formularios Este tipo de autenticación es redireccionada a través de un formulario HTML usando el protocolo HTTP del lado del cliente. El usuario provee credenciales y envía el formulario. Si la aplicación valida las credenciales sobre la forma, el sistema suministra una cookie de autenticación al usuario. Autenticación a través de Microsoft Passport Es un servicio de autenticación centralizada proporcionada por Microsoft, la cual ofrece una simple opción de logon y el servicio de miembros de sitios. Los usuarios que utilizan Passport son autentificados para acceder a sitios Web usando una cuenta de Passport. Microsoft Passport es un Servicio Web XML, y es parte integral del .NET framework. TRABAJANDO CON AUTENTICACIÓN BASADA EN WINDOWS

INTRODUCIÓN La seguridad de las aplicaciones Web usando autenticación basada en Windows es un proceso de cuatro pasos:

1. Configurar el IIS 2. Establecer la autenticación en el archivo Web.config 3. Establecer la autorización en el archivo Web.config 4. Información de las peticiones de acceso al IIS de los usuarios

Page 228: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 220

1. Configurar el IIS El primer paso en establecer seguridad a las aplicaciones Web involucra al IIS que incluye tres mecanismos de autenticación (Basic authentication, Digest authentication, Integrated Windows security) típicamente reutiliza el método básico de autenticación. 2. Estableciendo la autenticación La seguridad establecida en el Web.config es incluida en las secciones <uthentication>, <authorization>, y <identity>. Para establecer el método de autenticación de “Windows” se muestra en el ejemplo: <system.web> <authentication mode=”Windows” /> </system.web> HABILITAR LA AUTENTICCIÓN BASADA EN WINDOWS

3. Estableciendo la autorización Para indicar que solo ciertas páginas son seguras, debes crear una sección de <location> con <system.web> y subsecciones de <authorization> para cada página en tu aplicación Web. <locaion path=”ShoppingCart.aspx”> <system.web> <authorization> <denv users=”?” /> </authorization> </system.web> </location>

Page 229: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 221

En la sección <system.web>, podemos crear una subsección de <authorization> para especificar que tipo de autorización será forzada. Con las etiquetas <allow> o <deny> permiten o niegan acceso a las páginas. Con “?” indican usuarios anónimos, así como”*”significa todos los usuarios. Por ejemplo, el siguiente código niega el acceso a todos los usuarios anónimos: <authorization> <deny users=”?” /> </authorization> El siguiente código permite al usuario “Mary” acceder a una página: <authorization> <allow users=”Mary” /> </authorization>

4. Información de las peticiones de acceso al IIS de los usuarios El último paso en el proceso de establecer la autenticación basada en Windows es cuando los usuarios tratan de acceder a los formularios Web desde sus aplicaciones Web y a través de las peticiones del IIS. El usuario debe proveer su nombre de usuario y su contraseña. Si las credenciales del usuario son validas para el IIS, el usuario obtiene acceso a las peticiones.

TRABAJANDO CON AUTENTICACIÓN BASADA EN FORMULARIOS

INTRODUCCIÓN

Page 230: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 222

El método más común de autenticación de seguridad en aplicaciones Web ASP.NET es la autenticación basada en formularios.

Page 231: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 223

DESCRIPCIÓN DE LA AUTENTICACIÓN BASADA EN FORMULARIOS

INTRODUCCIÓN Cuando un usuario hace una petición de una página Web esta es protegida por la autenticación basada en formularios, la petición pasa primero a través del IIS. Así, debemos establecer la autenticación en el IIS como acceso “Anonymous”. Estableciendo como anónimo en el IIS nos permite que todas las peticiones en ASP.NET sean autentificadas. Lo siguiente es un conjunto de eventos que toman lugar durante la autenticación basada en formularios:

1. Un cliente genera una petición para una página protegida .aspx 2. El IIS recibe la petición y es pasada dentro de ASP.NET. Debido a que el

modo de autenticación es un conjunto de accesos Anonymous, la petición va directamente a través de IIS.

3. ASP.NET verifica si el cookie de autenticación es valida , es añadido a la petición. Esto significa que las credenciales del usuario han sido confirmadas, y que la petición es probada para autorización. La autorización probada es ejecutada por ASP.NET, y es dotada para comparación de las credenciales que son acompañadas en la petición de la cookie de autorización que es contenido en el archivo Web.config. Si el usuario es autorizado, el acceso de la petición de seguridad es garantizado.

4. Si no hay una cookie añadida a la petición. ASP.NET redirecciona la petición a una página de entrada al sistema (logon), donde los usuarios

Page 232: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 224

introducen las credenciales requeridas, usualmente un nombre y una contraseña (login y password).

5. El código de la aplicación sobre la página de entrada al sistema verifica las

credenciales para confirmar la autenticidad y, si es autentificada, añade una cookie conteniendo las credenciales a la petición.

6. Si la autentificación falla, la petición es regresada con un mensaje de

“Acceso Denegado”

7. Si el usuario es autentificado, ASP.NET verifica la autorización, como se vio en el paso 3, y puede entonces permitir el acceso página según la petición original o incluso a otra página , dependiendo del diseño de la aplicación.

COMO HABILITAR LA AUTENTICACIÓN BASADA EN FORMULARIOS

INTRODUCCIÓN Para habilitar la autenticación basada en formularios para tu aplicación Web, debes completar los siguientes pasos: 1. Configurar el IIS para usar autenticación “Anonymous” para que la

autenticación sea realizada por ASP.NET y no por el IIS. 2. Establecer el método de autenticación basado en formularios para la

aplicación en la subsección <authentication> de la sección <system.web> en el Web.config como se muestra en el siguiente ejemplo:

Page 233: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 225

<system.web>

<authentication mode="Forms"> <forms name=".namesuffix" loginUrl="login.aspx" />

</authentication> </system.web>

En la sección <forms>, se configura la cookie. Establecer el atributo name para el sufijo que será usado en las cookies y el atributo loginUrl para la dirección URL de la página para la cual la petición de no autenticación es redireccionada.

3. Establecer la sección de <authorization> en Web.config. El proceso de establecer la autorización para la autenticación basada en formularios es similar a la autenticación basada en Windows.

4. Construir una formulario Web de acceso a la página (logon). Login.aspx puede ser una página simple con dos campos para el nombre y el password. Login.aspx requiere así de un nombre y una contraseña para la autenticación y acceso a la aplicación Web.

CREANDO UNA PÁGINA Logon

INTRODUCCIÓN Durante la autenticación, todas las respuestas son redireccionadas a una página de logon que es especificada en el atributo loginUrl en la etiqueta <forms>. La página logon verifica las credenciales para un usuario.

Page 234: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 226

Como trabaja una página logon Si el modo de autenticación es establecido como “Forms”, ASP.NET verifica si hay una cookie de autenticación añadida a la petición de acceso a una página. Si ASP.NET no encuentra la cookie de autenticación, la petición es redireccionada a la página especificada logon. En la página logon, el usuario introduce sus credenciales. La página checa completamente las credenciales a través de código o llamando a FormsAuthentication.Authenticate. Si las credenciales son validas, una cookie es generada y el usuario es redireccionado a la página según la petición original a través de FormsAuthentication.RedirectFromLoginPage. Sin embargo, si las credenciales no son validas, el usuario permanece en la página logon y se le muestra un mensaje de que sus credenciales no son validas. El método RedirectFromLoginPage toma dos parámetros: userName, el cual especifica el nombre del usuario para la autenticación basada en formularios, y createPersistenCookie . Si el valor de createPersistentCookie es true, genera una cookie de autenticación persistente, una cookie que es escrita al sistema de archivos del cliente, esto en la computadora del usuario. De otra manera, una cookie temporal es creada. La siguiente tabla lista todos los métodos del objeto FormsAuthentication, el cual puede ser usado en el proceso de autenticación método Función Authenticate Verifica las credenciales del usuario GetAuthCookie Crea una cookie de autenticación para un usuario GetRedirectUrl Retorna la dirección URL para la petición original

que es causada para ser redireccionada para la página logon

RedirectFromLoginPage Redirecciona la autenticación de los usuarios a la dirección original URL

SetAuthCookie Crea un boleto de autenticación para userName SignOut Limpia el boleto de autenticación a través de

SignOut. Creando una página logon Para usar la clase FormsAuthentication debemos referenciar la librería System.Web.Security. El siguiente ejemplo muestra la forma de una página logon:

Page 235: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 227

<form id="Login" method="post" runat="server"> <P>Email: <asp:TextBox id="txtEmail" runat="server">

</asp:TextBox></P> <P>Password<asp:TextBox id="txtPassword" Te xtMode="password"

runat="server"> </asp:TextBox></P>

<P><asp:Button id="cmdLogin" Text="Sign In Now" OnClick="cmdLogin_Click" runat="server">

</asp:Button></P> <P><asp:Label id="lblInfo" runat="server">

</asp:Label></P> </form> En el evento Click de el botón Submit, tu validas la información que es introducida en el formulario, y si es valida, llama a FormsAuthentication.RedirectFromLoginPage. El método RedirectFromLoginPage provee una cookie y entonces redirecciona el usuario a su petición de página original El siguiente ejemplo de código usa la función llamada Login para validar el nombre y contraseña del usuario y llama a RedirectFromLoginPage si el nombre y contraseña del usuario es valida. private void cmdLogin_Click(object sender, EventArgs e) {

string strCustomerId; //Validate User Credentials strCustomerId = Login(txtEmail.Text, txtPassword.Text); if (strCustomerId != "")

{ FormsAuthentication.RedirectFromLoginPage(strCustomerId, false); }

else {

lblInfo.Text = "Invalid Credentials: Please try again"; }

}

Page 236: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 228

Práctica 23 Mecanismos de Autenticación usando IIS

Objetivos: Mostrar los tipos de autenticación disponibles en la máquina del usuario Instrucciones:

1. En el menú Inicio, oprime botón derecho sobre Mi PC y da click en Administrar.

2. En la consola de administrador de equipos, expandir Servicios y Aplicaciones, expandir Internet Information Services, expandir Sitios Web y expandir default Sitio Web.

3. Botón derecho en la aplicación Web Mod16CS y seleccionar propiedades. 4. En el cuadro de dialogo de Mod16CS, sobre la barra de Seguridad de

Directorio, ene. Acceso Anónimo y la sección de control de autenticación, seleccionar Edit.

5. Mostrar los métodos de autenticación disponibles.

Page 237: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 229

Práctica 24 Autenticación basada en Windows

Objetivos: Uso de la autenticación basada en Windows, creación de nuevos usuarios en el servidor local. Instrucciones:

6. En el menú Inicio, oprime botón derecho sobre Mi PC y da click en Administrar.

7. Expandir Servicios y Aplicaciones, expandir Internet Information Services, click en Sitios Web.

8. Botón derecho en default Sitio Web y click en propiedades. 9. Click en la barra Seguridad de Directorio, y click en editar para abrir el

cuadro de dialogo de los métodos de autenticación en el IIS. 10. Selecciona el cuadro de verificación de la opción autenticación básica (el

password es enviado sin texto) y dar click YES en el cuadro de dialogo Administrador de Servicios de Internet.

Nota: Verificar que este seleccionado Acceso Anónimo. 11. Escribir nombre de la máquina en el campo de dominio por default, esto con

el fin de que la demostración funcione en la máquina local. 12. Click Aceptar para cerrar el cuadro de dialogo. 13. Click Aceptar el cuadro de dialogo propiedades del Sitio Web. Aceptar el

cuadro de dialogo. 14. En la consola de administrador de equipo, expandir herramientas del

sistema, y expandir Usuarios locales y grupos. 15. Botón derecho en el fólder de Usuarios y click en Nuevo Usuario. Introduzca la siguiente información en el cuadro de dialogo Nuevo usuario

Field Name Value ____________________________ User name someone Full name someone Description someone demo account Password Secret1 Confirm password Secret1 a. Al limpiar el usuario debe cambiar el password en el siguiente check box b. Seleccionar el usuario no cambiar el password c. Click en crear y click en cerrar. En el lado derecho de la ventana del cuadro de dialogo del administrador de equipo, se debe mostrar el usuario someone.

Page 238: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 230

16. Abrir el proyecto Mod16CS y observar el archivo Web.config. Hay una

sección de <authentication> y dos secciones <location>. 17. Abrir el code-behind de la página SecurePageDemo1.aspx y explicar el

código. 18. Construir el proyecto Mod16CS 19. Abrir un nuevo navegador para acceder:

http://localhost/Mod16CS/NonSecurePageDemo.aspx 20. Navegar a: http://localhost/Mod16CS/SecurePageDemo1.aspx Verificar que aparece el cuadro de dialogo de conexión al sitio local 21. Click cancelar y ver que aparece un error de acceso denegado 22. Navegar a:

http://localhost/Mod16CS/SecurePageDemo2.aspx Ver que aparece el cuadro de dialogo de conexión a localhost 23. Escriba las credenciales, User name como someone y Password como

Secret1 y dar aceptar. 24. Debes ver el nombre someone y autenticación básica desplegados en la

página SecurePageDemo2.aspx. 25. Navegar a:

http://localhost/Mod16CS/SecurePageDemo1.aspx

Page 239: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 231

6. Aplicaciones de Sitios Web

Objetivos En esta unidad se propone un proyecto, donde aplicarás todos los conocimientos aprendidos en las unidades anteriores. Descripción del proyecto Se desea crear un sitio Web de consulta de Discos Compactos existentes en una Tienda. Se debe presentar un menú de CDs por género (al menos 5 géneros diferentes), Al seleccionar un determinado género se deberá mostrar los discos que actualmente pertenecen a ese género. Y al seleccionar un CD de un determinado género mostrara una descripción del CD, incluyendo portada, los tracks, el año de edición del CD, la duración en tiempo de cada track, los autores, y el precio. Esta información deberá ser enviada a algún usuario vía correo electrónico. Consideraciones Importantes para la realización del proyecto:

• El sistema debe contemplar una base de datos

• La interfaz (página) debe ser amigable, con imágenes, frames y texto

• El sistema debe llevar control del número de usuarios que visitan el sitio

• La página debe contener un servicio Web que informe acerca de la cantidad de usuarios que han visitado el sitio

Instrucciones a. Revisa la página http://www.vw-angelopolis.com.mx/es_MX/Redirect1_1.chtml Para darte un idea del tipo de aplicación a realizar. b. Elabora el prototipo 1 de tu sistema. Este debe incluir la base de datos y la interfaz c. Envía el prototipo a tu tutor para observaciones

Page 240: Programacion web se

Programación Web

Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 232

d. Elabora el prototipo 2 de tu sistema. Aquí debe incluir que los controles de enlace de datos ya deben estar funcionando con los objetos ADO.NET. e. Envía el prototipo 2 a tu tutor f. Detalla el prototipo 2 con las observaciones realizadas por tu tutor y con las consideraciones propuestas para el sistema. Productos esperados / Evaluaciones a. Este tema se evaluará con la distribución de la aplicación en Internet, y contará con el 40% de la calificación final, siempre y cuando lo entregues en la fecha y con el formato adecuado (pdf). b. El proyecto deberá estar montado en un servidor Web, para lo cual debes enviar la dirección para revisar el proyecto. c. Debes enviar a tu tutor el código fuente (todo el proyecto) de la aplicación.