Guía Del estudiante Modalidad a distancia Modulo: Desarrollos Web DATOS DE IDENTIFICACION TUTOR HECTOR MAURICIO LEAL PARGA Teléfono 000-000-0000 E-mail [email protected] Lugar CERES – SABANA DE OCCIDENTE – Corporación Universitaria Minuto de Dios – Rectoría Cundinamarca 1 BIENVENIDA La Corporación Universitaria Minuto de Dios. UNIMINUTO –Educación a Distancia le da la bienvenida al Modulo Desarrollos Web. Esperamos que una vez terminado éste adquiera los conocimientos fundamentales de gestión de contenidos web, para que pueda continuar con el desarrollo del pregrado de forma exitosa, con la profundización que como profesional deberá alcanzar. Recuerde que la metodología a distancia implica un manejo las exigencias propias del nivel de formación y de las profesional, por ello su rol como estudiante cobrará mayor Aspectos fundamentales para la concepción formal de dedicación y compromiso. de sus tiempos acorde con estrategias propias de un relevancia y protagonismo. una disciplina basada en Le auspiciamos los mejores deseos por alcanzar los objetivos planteados y el éxito en su formación profesional. 2 INTRODUCCION El desarrollo Web es el proceso de creación y mantenimiento de páginas web, generalmente para ser parte de un sitio web disponible en la WWW. En el caso de la educación se ha evidenciado que la necesidad de contar con profesionales con conocimientos en desarrollo web, que sirvan de base para tomar decisiones en situaciones de descubrimiento de nuevos hechos que plantea el manejo de información web empresarial. En éste modulo damos un recorrido que le permita adquirir las bases conceptuales del desarrollo web. Para ello, se inicia el proceso académico haciendo una revisión de fundamento de comunicación de datos, y a continuación se hará un afianzamiento del lenguaje HTML, la cual responden directamente a lo que se ha planificado, y por último revisaremos los conceptos de diseño y Aplicaciones Web con Visual Studio. Con ese recorrido temático, es preciso revisar todo lo referente al análisis y representación de sitios web y cómo éste tiene una directa relación con el manejo de información tipo web, que es hacia donde están encaminadas las empresas. 3 UNIDAD DE TRABAJO No. 5 Aplicaciones Web con ASP.NET y Visual Studio Preguntas Generadoras o ¿Qué importancia tiene conocer las tecnologías y metodologías NET para el desarrollo de aplicaciones Web? ¿Qué conocimientos se deben tener para desarrollar aplicaciones Web con ASP.NET? ¿Qué importancia tiene utilizar SQLSERVER en una aplicación Web? INDICADORES Identificar las posibilidades brindadas por las herramientas ASP y SQLSERVER y su operabilidad. Identificar las tecnologías y metodologías para el desarrollo de aplicaciones WEB con ASP.NET. Despertar el gusto por el desarrollo de aplicaciones Web que van a ayudar a mejorar la calidad de vida de quienes los usen. Reconocer la importancia del desarrollo de aplicaciones Web, para organizar la información. Producir aplicaciones Web, teniendo en cuenta las metodologías para tal fin. Escribir algoritmos para el mejoramiento a corto plazo del desarrollo de aplicaciones Web que permitan un desempeño eficaz en la región. Utilizar los medios tecnológicos para interactuar con los demás y aprender a trabajar en equipo. 4 TEMAS A DESARROLLAR EN LA UNIDAD 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. Fundamentos de NET Principios de Visual Web Developer Fundamentos de SQL Server 2005 Planeación de un sitio web ASP.NET con VS 2005 Creación y configuración de la aplicacion en VWD y SQL Server 2005. Creación de Página Principal (master page) en VWD Elementos de HTML con Visual Web Developer Controles ASP básicos Creación de módulo de validación de usuario. Controles de navegación Creación de Themes, Personalizar Themes. Enlace de datos SLQL Server a ASP.NET Formulario Maestro detalle. Publicar Aplicaciones MARCO TEORICO DE FORMACION 1. Fundamentos de NET Microsoft.NET es el conjunto de nuevas tecnologías en las que Microsoft ha estado trabajando durante los últimos años -y cuyo lanzamiento definitivo es inminente, estando ya disponible su primera versión Release Candidate- con los objetivos de: Mejorar sus sistemas operativos Mejorar su modelo de componentes COM+ Obtener un entorno específicamente diseñado para el desarrollo y ejecución del software en forma de servicios que puedan ser tanto publicados como accedidos a través de Internet de forma independiente del lenguaje de programación, modelo de objetos, sistema operativo y hardware 5 utilizados tanto para desarrollarlos como para publicarlos. Éste entorno es lo que se denomina la plataforma.NET, y los servicios antes mencionados son a los que se denomina servicios web. Para el desarrollo y ejecución de aplicaciones en este nuevo entorno tecnológico Microsoft proporciona el conjunto de herramientas conocido .NET Framework SDK, que es posible descargarlo gratuitamente de su sitio web http://www.msdn.microsoft.com/net e incluye compiladores de lenguajes como C#, Visual Basic.NET, Managed C++ y JScript.NET específicamente diseñados para crear aplicaciones para él. El corazón de la plataforma.NET es el CLR (Common Language Runtime), que es una aplicación similar a un máquina virtual que se encarga de gestionar la ejecución de las aplicaciones para ella escritas. A estas aplicaciones les ofrece numerosos servicios que facilita su desarrollo y mantenimiento y favorecen su fiabilidad y seguridad. Entre ellos los principales son: Modelo de programación consistente y sencillo, completamente orientado a objetos. Eliminación del temido problema de compatibilidad entre DLLs conocido como "infierno de las DLLs" Ejecución multiplataforma Ejecución multilenguaje, hasta el punto de que es posible hacer cosas como capturar en un programa escrito en C# una excepción escrita en Visual Basic.NET que a su vez hereda de un tipo de excepción escrita en Cobol.NET. Aunque más arriba se ha dicho que en el .NET Framework sólo se ofrecen compiladores de C#, MC++, VB.NET y JScript.NET, lo cierto es que aparte Microsoft y terceros han -o están- desarrollado versiones adaptadas a .NET de muchísimos otros lenguajes como APL, CAML, Cobol, Eiffel, Fortran, Haskell, Java, Mercury, ML, Mondrian, Oberon, Oz, Pascal, Perl, Python, RPG, Scheme o Smalltalk Recolección de basura Aislamente de memoria entre procesos y comprobaciones automáticas de seguridad de tipos en las conversiones Soporte multihilo Gestión del acceso a objetos remotos que permite el desarrollo de aplicaciones distribuidas de manera transparente a la ubicación real de cada uno de los objetos utilizados en las mismas. Seguridad avanzada, hasta el punto de que es posible limitar los permisos de ejecución del código en función de su procedencia (Internet, red local, CD-ROM, etc.), el usuario que lo ejecuta o la empresa que lo creó. Interoperabilidad con código preexistente, de manera que es posible utilizar con facilidad cualquier librería de funciones u objetos COM y COM+ creados con anterioridad a la aparición de la plataforma .NET Adecuación automática de la eficiencia de las aplicaciones a las caracterísitcas concretas de cada máquina donde se vaya a ejecutar ASP.NET es un framework para aplicaciones web desarrollado y comercializado por Microsoft. Es usado por programadores para construir sitios web dinámicos, aplicaciones web y servicios web XML. Apareció en enero de 2002 con la versión 1.0 del .NET Framework, y es la tecnología sucesora de la tecnología Active Server Pages (ASP). ASP.NET esta construido sobre el Common Language Runtime, permitiendo a los programadores escribir código ASP.NET usando cualquier lenguaje admitido por el .NET Framework. 6 Cualquier persona que esta familiarizada con el desarrollo de aplicaciones web sabrá que el desarrollo web no es una tarea simple. Ya que mientras que un modelo de programación para aplicaciones de uso común está muy bien establecido y soportado por un gran número de lenguajes, herramientas de desarrollo, la programación web es una mezcla de varios lenguajes de etiquetas, un gran uso de lenguajes de script y plataformas de servidor. Por desgracia para el programador de nivel intermedio, el conocimiento y habilidades que se necesitan para desarrollar aplicaciones web tienen muy poco en común con las que son necesarias en el desarrollo tradicional de aplicaciones. Microsoft Visual Studio es un entorno de desarrollo integrado (IDE, por sus siglas en inglés) para sistemas operativos Windows. Soporta varios lenguajes de programación tales como Visual C++, Visual C#, Visual J#, ASP.NET y Visual Basic .NET, aunque actualmente se han desarrollado las extensiones necesarias para muchos otros. Visual Studio permite a los desarrolladores crear aplicaciones, sitios y aplicaciones web, así como servicios web en cualquier entorno que soporte la plataforma .NET (a partir de la versión .NET 2002). Así se pueden crear aplicaciones que se intercomuniquen entre estaciones de trabajo, páginas web y dispositivos móviles. 2. Principios de Visual Web Developer Microsoft Visual Web Developer es un entorno de desarrollo liviano pensado para la utilización y aprendizaje. Está formado por un conjunto de herramientas y utilidades para la creación de sitios Web y sus aplicaciones Web con ASP.NET 2.0. Visual Web Developer sigue ofreciendo las ventajas de productividad del Entorno de Desarrollo Integrado (IDE en inglés) a la vez que introduce cambios con la intención de mejorarlo. Características Algunas de las características más importantes son: Diseño de páginas Web: Un editor de páginas Web que incluye la edición WYSIWYG y el modo de edición HTML con IntelliSense y validación. Características del diseño de páginas: La disposición de sitios uniforme con páginas principales y apariencia de páginas uniforme con temas y máscaras. 7 Edición de código: Un editor de código que permite escribir código para las páginas Web dinámicas en Visual Basic.NET o C#. El editor de código incluye coloración para la sintaxis e IntelliSense. Desarrollo para sitios alojados: Herramientas para publicar sitios en los sitios de alojamiento, incluido un servidor Web local para efectuar pruebas. Depuración: Un depurador que busca errores en la programación. Controles: Un conjunto extenso de controles de servidor Web de ASP.NET que incorpora mucha de la funcionalidad necesaria para crear sitios Web. Acceso a datos: Compatibilidad para mostrar y editar datos en las páginas Web, ya sea bases de datos o archivos XML. En muchos casos, puede agregarse la posibilidad de ver los datos y editarlos en las páginas Web sin necesidad de escribir código. Otras: Servicios de aplicaciones integradas que permite agregar suscripciones para la seguridad de inicio de sesión en el sitio, propiedades de perfiles para mantener la información específica de los usuarios y otras características, la mayoría de las cuales no requiere código. Historia Visual Web Developer 2005 Express forma parte de la familia de Visual Studio 2005, que es un entorno de desarrollo de Microsoft para crear aplicaciones Web; así como aplicaciones cliente (Windows), servicios de Windows, componentes, controles y otros tipos de aplicaciones. Visual Web Developer, en cambio, presenta una interfaz modernizada que trata de proporcionar las herramientas necesarias para crear aplicaciones Web. Por consiguiente, Visual Web Developer pretende ser más compacto y fácil de utilizar que Visual Studio. Todas las características de Visual Web Developer están también disponibles en Visual Studio 2005 y los sitios Web que se pueden crear con Visual Web Developer deberían ser compatibles con Visual Studio 2005. Se pueden compartir páginas y sitios Web entre ambos sin pérdias en principio. 3. Fundamentos de SQL Server 2005 Una base de datos de SQL Server 2005 consta de una colección de tablas en las que se almacena un conjunto específico de datos estructurados. Una tabla contiene una colección de filas, también denominadas tuplas o registros, y columnas, también denominadas atributos. Cada columna de la tabla se ha diseñado para almacenar un determinado tipo de información; por ejemplo, fechas, nombres, importes en moneda o números. 8 Las tablas contienen diversos tipos de controles, como restricciones, desencadenadores, valores predeterminados y tipos de datos de usuario personalizados, que garantizan la validez de los datos. Se pueden agregar restricciones de integridad referencial declarativa (DRI) a las tablas con el fin de asegurar la coherencia de los datos interrelacionados que se encuentran en tablas distintas. Las tablas pueden presentar índices, similares a los de los libros, que permiten localizar las filas rápidamente. Una base de datos también puede incluir procedimientos que utilicen código de programación de Transact-SQL o .NET Framework para realizar operaciones con los datos de la base de datos. Entre estas operaciones se incluye la creación de vistas que proporcionen acceso personalizado a los datos de la tabla o una función definida por el usuario que realice cálculos complejos en un subconjunto de filas. Por ejemplo, cree una base de datos denominada MyCompanyDB para administrar los datos de su empresa. En la base de datos MyCompanyDB, cree una tabla que se denomine Employees para almacenar información sobre cada empleado. La tabla tiene también columnas denominadas EmpId, LastName, FirstName, Dept y Title. Debe agregar algunas restricciones a la tabla para que no haya dos empleados con el mismo valor de EmpId y que la columna Dept contenga únicamente números válidos correspondientes a departamentos de su empresa. Defina índices con el fin de localizar rápidamente los datos de un empleado a partir del identificador del empleado o de sus apellidos. Tendrá que agregar una fila de datos a la tabla Employees para cada empleado, por lo que también tiene que crear un procedimiento almacenado denominado AddEmployee. Este procedimiento se personaliza para que acepte los valores de datos para un nuevo empleado y realice la operación de agregar la fila a la tabla Employees. Puede que se necesite un resumen de empleados por departamento. En este caso, defina una vista denominada DeptEmps que combine los datos de las tablas Departments y Employees y genere el resultado. Esta ilustración muestra las partes del MyCompanyDB que se crea. Una instancia de SQL Server admite muchas bases de datos. Cada base de datos puede almacenar datos interrelacionados o sin relacionar procedentes de otras bases de datos. Por ejemplo, una 9 instancia de SQL Server puede tener una base de datos que almacene datos del personal y otra que almacene datos relacionados con los productos. Por otra parte, puede utilizarse una base de datos para almacenar datos acerca de pedidos actuales de los clientes y otra base de datos relacionada puede almacenar pedidos anteriores de los clientes que se utilicen para la elaboración de los informes anuales. 4. Planeación de un sitio web ASP.NET con VS 2005 Empecemos creando una aplicación Web con Visual Studio .NET, en estos ejemplos he usado la versión 2005 y para el código mostrado en el artículo usaré Visual Basic .NET, después (si el tiempo me lo permite) te mostraré el de C#. Los pasos a seguir: - Creación del proyecto y de la página de Login - Crea un nuevo proyecto en Visual Studio, selecciona el lenguaje que quieras (ya te digo que en el artículo te mostraré el código de VB) y elije el de Aplicación Web. - Te pedirá un nombre para crearlo en el localhost, yo he usado pruebaLogin. - Cuando Visual Studio termine de crear el sitio, se mostrará el proyecto "inicial" que el Visual Studio, en la figura 1 podemos ver el explorador de soluciones: Figura 1. La solución recién creada 10 - De este proyecto podemos eliminar los ficheros Global.asax y Styles.css (aunque puedes dejar el .css si sueles usar estilos... yo no uso estilos y en este ejemplo lo borraré). - Al fichero WebForm1.aspx le vamos a cambiar el nombre por Login.aspx - Añadimos dos etiquetas, dos cajas de textos y un botón, tal como vemos en la figura 2. Figura 2. El formulario de Login - La caja superior se llama txtUsuario, la del password: txtPassword y el botón: btnLogin - Selecciona la caja de password y en la ventana de propiedades, asigna a la propiedad TextMode el valor Password, esto hará que se no se vea lo que es usuario escribe. Ver figura 3. Figura 3. Indicar que la caja de textos se usará para introducir una clave 11 - Cada formulario Web (página .aspx) realmente tiene asociada una clase (¡es una clase!), por tanto vamos a hacer que el nombre de la clase del formulario Login.aspx se llame también Login, ya que el nombre que tendrá será el que le dio el VS al crearla, es decir, la clase se llama WebForm1 y el queremos que se llame (si es posible) de la misma forma que el formulario. - Lo que debes hacer es mostrar el código, por tanto selecciona el fichero Login.aspx del explorador de soluciones y pulsa F7 o bien pulsa en el primer icono del toolbar (barra de herramientas) que se muestra en la ventana del explorador de soluciones (ver figura 1). - Ahora tendremos a la vista el código de esa página Web. Esta es una de las razones por las que es preferible usar el Visual Studio en lugar, de por ejemplo el WebMatrix, las cosas están en el mismo sitio que en cualquier aplicación... y es más intuitivo... (pero este comentario no quita que te muestre después cómo hacerlo todo "a pelo"). - Seleccionamos la palabra WebForm1 (figura 4) y la cambiamos por Login (figura 5) Figura 4. Cambiamos el nombre predeterminado... Figura 5. ...por el mismo que tiene el WebForm: Login 12 - Ahora vamos a escribir el código para comprobar el nombre del usuario y el password, pero por medio de código. - Antes de nada, vamos a añadir dos nuevas páginas: - Una será la usada para que el usuario navegue por nuestro sitio, esta página la vamos a llamar Default.aspx (que es el nombre normal que usa el VS) - La otra la llamaremos Candemor.aspx (je, je, en honor al Chiquito de la Calzá (o Calzada) que es malagueño...), que será la usada para mostrar al usuario un aviso de que no está autorizado para entrar en el sitio. - Para añadir una nueva página, en el menú Proyecto, selecciona Agregar Web Forms... esto mostrará un diálogo como el mostrado en la figura 6, escribe el nombre de la página (el primer caso: Default) Figura 6. Añadir un nuevo formulario Web Nota: Por ahora no te preocupes de lo que haya que mostrar en ese formulario Web. 13 - Añade un nuevo formulario al que le daremos el nombre Candemor. - Ya que tenemos en modo diseño este último formulario, vamos a añadirle una etiqueta y en la propiedad Text escribiremos algo así: "Pecador de la pradera, no estás autorizado a entrar en este sitio". - Cambia el tamaño de la fuente para que se vea bien. Ver figura 7. La etiqueta se adaptará al tamaño que sea necesario, pero puedes cambiarlo... no te explico como que eso se supone que ya lo sabrás... bueno, vale, usa los cuadritos que hay en cada lado de la etiqueta y juega con ellos... Figura 7. Propiedades de la etiqueta con texto grande y en negrita - Muestra el formulario Default (en la ventana del explorador de soluciones, haz dobleclick en Default.aspx (o la seleccionas y pulsas Shift+F7) - Añade una etiqueta al formulario y en el texto le pones: "Bienvenid@ al sitio de tutorialLogin". El tamaño de la letra la dejo a tu elección. - Ahora sí, vamos a escribir el código para validar los usuarios. 14 5. Creación y configuración de la aplicación en VWD y SQL Server 2005. Requisitos previos Tener instalado SQL Server Express. Para obtener más información, vea Instalar SQL Server Express. Tener instalado Visual Web Developer 2005 Express Edition. Para obtener más información y descargar el producto, vea Visual Web Developer 2005 Express Edition. Tareas Instalar la base de datos Northwind Descargue las secuencias de comandos de instalación de la base de datos de ejemplo Northwind desde el sitio Web de Northwind. Ejecute el archivo SQL2000SampleDb.msi que ha descargado. Las secuencias de comandos de instalación se instalarán en la carpeta C:\SQL Server 2000 Sample Databases. Una vez finalizada la instalación, abra un símbolo del sistema: en el menú Inicio, haga clic en Ejecutar, escriba cmd y haga clic en Aceptar. En el símbolo del sistema, escriba: Copiar cd C:\SQL Server 2000 Sample Databases y, a continuación, presione ENTRAR. En el símbolo del sistema, escriba: Copiar sqlcmd -S .\SQLExpress -i instnwnd.sql y, a continuación, presione ENTRAR. La herramienta sqlcmd informará del progreso a medida que se instale la base de datos Northwind y, después, devolverá el control al símbolo del sistema. Comprobar la instalación con la utilidad sqlcmd Para comprobar la instalación de la base de datos, escriba lo siguiente en el símbolo del sistema: 15 Copiar sqlcmd -S .\SQLExpress y, a continuación, presione ENTRAR. En el símbolo de la herramienta sqlcmd, escriba los tres comandos siguientes: Copiar Use Northwind Select name from sys.Tables Go La herramienta sqlcmd generará la siguiente salida: Se cambió el contexto de la base de datos a 'Northwind'. name ----------------------------------------------Customers Shippers Suppliers Orders Products Order Details CustomerCustomerDemo CustomerDemographics Region Territories EmployeeTerritories Employees Categories 16 (13 filas afectadas) En el símbolo de la herramienta sqlcmd, escriba los dos comandos siguientes: Select * from Customers Go Verá una lista de toda la información de la tabla Customers. Deje abierta esta ventana del símbolo del sistema para utilizarla más adelante en esta visita guiada. Crear un sitio Web Abra Visual Web Developer 2005 Express Edition. En el menú Archivo, haga clic en Nuevo sitio Web. Seleccione un lenguaje de desarrollo (Visual Basic, Visual C# o Visual J#), seleccione Sitio Web ASP .NET, indique el nombre y la ubicación del sitio Web en el cuadro Ubicación y haga clic en Aceptar. En este ejemplo se utiliza myWebSite, creado en el directorio C:\Websites. Visual Web Developer 2005 Express genera un nuevo sitio Web y muestra la página Default.aspx en la vista de origen (HTML). Agregar una IU a la página Web Haga clic en Diseño, en la esquina inferior izquierda de la pantalla de códigos Default.aspx. En el Cuadro de herramientas, seleccione la ficha Datos. En la ficha Datos del Cuadro de herramientas, arrastre un objeto GridView a la vista del diseñador de Default.aspx. Enlazar la página Web con el origen de datos En el cuadro de diálogo Tareas de GridView, que aparece automáticamente al agregar GridView a la página Web, en Elegir origen de datos, seleccione <Nuevo origen de datos>. En el cuadro de diálogo Configuración de orígenes de datos, elija Base de datos, escriba MyNwndDataSource como Id. y haga clic en Aceptar. En la pantalla Elegir la conexión de datos, haga clic en Nueva conexión. En Elegir origen de datos, seleccione Microsoft SQL Server. 1. En Proveedor de datos, seleccione Proveedor de datos de .NET Framework para servidor SQL Server. 2. Haga clic en Continuar. En Agregar conexión, escriba el nombre del servidor en el que está instalado SQL Server Express, seguido de una barra diagonal inversa (\) y del nombre de la instancia. Por ejemplo, si SQL Server Express está instalado en la ubicación predeterminada, que es la instancia con nombre SQLExpress, y se instala en el mismo equipo que Visual Studio, debe escribir Servername\SQLExpress o .\SQLExpress. 1. Seleccione Utilizar autenticación de Windows. 2. En la lista desplegable Seleccione o escriba un nombre de base de datos, elija Northwind. 3. Haga clic en Probar conexión. Aparece un cuadro de diálogo que confirma la conexión. Haga clic en Aceptar. 17 4. Haga clic en Aceptar para guardar la nueva conexión. En la ventana Elegir la conexión de datos, haga clic en Siguiente. En el cuadro de diálogo Guardar la cadena de conexión en el archivo de configuración de la aplicación, elija guardar la cadena de conexión y asígnele el nombre myNwndConnection. Haga clic en Siguiente. En Configurar la instrucción Select, seleccione los datos que desee utilizar en esta aplicación. Asegúrese de que esté seleccionado Especificar columnas de una tabla o vista, Elija la tabla Customers en la lista desplegable Name y, a continuación, seleccione las siguientes columnas: 1. CustomerID 2. CompanyName 3. ContactName 4. Country 5. Phone. En Configurar la instrucción Select, haga clic en Avanzadas. En el cuadro de diálogo Opciones de generación SQL avanzadas, seleccione Generar instrucciones Insert, Update y Delete y haga clic en Aceptar. Haga clic en Siguiente. En la ventana Consulta de prueba, haga clic en Consulta de prueba para comprobar que se devuelvan los datos correctos y se muestren en la cuadrícula de datos. Haga clic en Finalizar. Volverá a la vista del diseñador de páginas Web y GridView mostrará ahora las columnas que se utilizarán (con datos artificiales). Probar el sitio Web Haga clic en Inicio o presione F5 para generar e implementar el sitio Web en modo de depuración. Cuando el sistema le pregunte si desea agregar o modificar el archivo Web.config para habilitar la depuración, responda afirmativamente y después, haga clic en Aceptar. Se abrirá Internet Explorer y mostrará la página Web. En la página Web, aparecerá GridView y los datos de la tabla de Northwind seleccionada. Agregar más funciones a la página Web Cierre Internet Explorer. Visual Web Developer 2005 Express Edition saldrá del modo de depuración y devolverá el control para el desarrollo de la página Web. En el diseñador, haga clic una vez en GridView. En la esquina superior derecha de GridView, haga clic en la flecha pequeña que aparece. Se abrirá el cuadro de diálogo Tareas de GridView. Haga clic en Formato automático, elija el formato que desee y haga clic en Aceptar. Haga clic en Agregar nueva columna. En el cuadro de diálogo Agregar campo, elija el tipo de campo CommandField. Elija el tipo de botón Botón y, a continuación, seleccione Editar o actualizar. Asegúrese de que también esté habilitado Mostrar botón Cancelar. Haga clic en Aceptar. GridView muestra ahora una columna nueva que contiene un botón Editar. En Tareas de GridView, seleccione Habilitar paginación y Habilitar ordenación. Probar el sitio Web Vuelva a generar el sitio Web haciendo clic en Inicio o presionando F5. 18 Pruebe la paginación y la ordenación de columnas en la página Web. Al hacer clic en cualquier encabezado de columna, puede ordenar la columna en orden ascendente o descendente. Haga clic en Editar para cualquier fila de DataGrid. Observe que puede cambiar los valores de todas las columnas excepto CustomerID, que es una clave principal y no se puede cambiar. Cambie el valor CompanyName en la fila seleccionada, escribiendo un valor nuevo. Cuando termine, haga clic en Actualizar para esa fila. El cambio realizado se escribe en SQL Server Express y GridView se actualiza con la información nueva. Comprobar la base de datos En las ventanas del símbolo del sistema que ya están abiertas, escriba los tres comandos siguientes: Copiar Use Northwind Select CompanyName from Customers Go La herramienta sqlcmd muestra los nombres de la compañía de cada uno de los clientes. Debería ver el valor CompanyName que cambió 6. Creación de Página Principal (master page) en VWD Cuando empezamos a desarrollador un Sitio Web, lo que mas tiempo nos demora es la plantilla base ya que despues de tener nuestra base solo es cosa de copiar y cambiar nuestro HTML especifico de cada página, a través de todas las páginas de nuestro Sitio Web. Y que tiene que ver Master Pages con esto?, no tienen una pista?. Pues ahora con ASP.NET 2.0 podemos crear paginas que nos servirán como plantillas a nuestro Sitio Web. Lo mejor es que en Master Pages, tenemos la misma funcionalidad que en las paginas aspx, es decir, que podemos agregar controles asp, y agregar código del lado de servidor para esos controles. Y lo mejor es que tendremos disponible todo esto en el resto de páginas aspx, también podremos acceder a las propiedades de la Master Pages, mas adelante veremos como hacer esto. La ventaja que tenemos con Master Pages, es que vamos a crear una plantilla, o mas, con una cabecera, menu, etc, para todo nuestro Sitio Web, esto hará mas fácil el mantenimiento, ya que solo iremos a nuestro Master Page editamos, y autómaticamente los cambios se verán reflejados en todas las páginas que usen el Master Page que se edito. 19 Otra ventaja muy importante es que tendremos soporte en diseño WYSIWYG (lo que ves, es lo que obtienes), en las páginas aspx, y podremos ver como será la presentación final. 20 Como se puede apreciar en las imágenes tenemos soporte en diseño, a diferencia de los controles de usuario en APS.NET 1.X, y en otras tecnologías, en los cuales no se veía como quedaría el diseño final, para solucionar esto teniamos que estar ejecutando la página para ver como será el diseño final. Con Master Pages, lo que vemos en edición será lo que veamos en el navegador (WYSIWYG). Creando una Master Page Antes de crear un Master Page, debemos crear un nuevo Sitio Web, revisar la entrega anterior. Una vez creado el Sitio Web, hacemos click derecho en nuestro Sitio Web, y seleccionamos Add New Item..., nos aparecerá la siguiente ventana: Seleccionamos el Item Master Page, como pueden apreciar este tiene extensión master. Podemos escoger el lenguaje y si queremos colocar el código en un archivo separado. Tiene igual manejo que las páginas aspx, estas pueden combinar HTML, controles de Servidor Web, y código. Una Master Page, tiene dos vistas, al igual que las aspx: Vista Source: 21 Como se puede apreciar la gran diferencia con una aspx, es la directiva Master, pero los atributos Language, CodeFile, etc, son los mismos. Algo importantisimo que resaltar en el HTML, es este control: <asp:contentplaceholder id="ContentPlaceHolder1" runat="server"> Este control marca que esta parte será la zona configurable en las paginas que usen el Master Page, es decir todo lo que este fuera de este control, no se podra cambiar. Nosotros podemos usar uno o varios ContentPlaceHolder, en nuestro Master Page, si nos vamos a la vista diseño vermos algo como esto: Todo lo que este fuera del ContentPlaceHolder, no podrá ser reemplazado. Nosotros tambien podemos colocar contenido dentro del ContentPlaceHolder, pero este contenido 22 será como el contenido por defecto, es decir si el usuario desea lo deja o lo cambia, pero lo que si no podra cambiar en diseño es lo que este fuera del ContentPlaceHolder. Si jugamos un poco con el HTML, agregamos tablas, una cabecera, un menu de navegación, e informacion a nuestro Master Page, obtendremos algo asi, ustedes pueden hacer mejor el diseño :D: Ahora ta tenemos nuestro Master Page, listo para poder usar en nuestras páginas aspx. Agregando una Página usando Master Pages Hay varios formas de crear una pagina aspx, para usar una Master Page: La primera forma es sencilla, solo seleccionamos nuestra Master Page, y le damos click derecho, seleccionamos Add Content Page, y listo, creara una página que hace uso de esa master 23 page. La manera más común es: Agregar un nuevo Item a nuestro Sitio Web. Cuando nos salga la ventana para seleccionar el item, escogemos WebForm, pero antes de hacer click en el boton Add, marcamos el check Select Master Page. A continuación nos saldrá una ventana para escoger un Master Page de nuestro Sitio Web, ya que puede haber mas de uno, y seleccionas el Master Page deseado. La diferencia con la opción 1 es que con esta opción nosotros le damos el nombre a la pagina aspx agregada. La otra opción es hacer que una página existente use un Master Page, hay tres pasos bien simples para hacer esto, miren la figura: Lo primero que tenemos que hacer es agregar un nuevo atributo a la directiva Page, MasterPageFile, e indicarle cual Master Page del sitio usaremos. El siguiente paso es borrar todo el HTML, que este fuera del tag <body/> y agregar el siguiente control: <asp:Content/>, a este control debemos 24 asignarle un nombre y decirle que corra del lado del servidor. Pero lo mas importante es indicarle a que ContentPlaceHolder reemplazara, recuerden que una Master Page, pueden haber varios, por eso es necesario indicarle el ContentPlaceHolderID. Si tuvimos codigo dentro de nuestra etiqueta <body/>, lo copiamos dentro del control <asp:Content/>. Ahora si nos vamos a diseño y agregamos un poco de código HTML podemos obtener lo siguiente: Hasta el momento ya tenemos lo básico de Master Pages, sabemos cómo agregar una Master Page y como usar nuestra Master Page en una página aspx. Ahora que pasaría si deseamos modificar algo de nuestra MasterPage, para una página en particular, pues bien tenemos algunas opciones. 7. Elementos de HTML con Visual Web Developer La vista Código fuente le permite editar el marcado de la página directamente. El editor de la vista Código fuente ofrece muchas características que le ayudan durante la creación de los controles de HTML 25 y ASP.NET. Puede utilizar el Cuadro de herramientas en la vista Código fuente igual que lo hace en la vista Diseño para agregar nuevos elementos a la página. Para agregar elementos en la vista Código fuente Cambie a la vista Código fuente haciendo clic en Código fuente, que está situado en la parte inferior izquierda de la ventana. Los controles que ha agregado se crean como elementos <asp:>. Por ejemplo, el control Button es el elemento <asp:button>. Los valores de propiedades que realizó se conservan como valores de atributos en la etiqueta <asp:button>. En el grupo HTML en el Cuadro de herramientas (no el grupo Estándar), arrastre un control Table a la página y sitúelo justo encima de la etiqueta de cierre </form>. El editor también le ayuda cuando escribe el marcado de forma manual. Por ejemplo, el editor proporciona opciones sensibles al contexto para terminar las etiquetas y atributos HTML cuando los está escribiendo. El editor también proporciona información sobre errores y advertencias sobre el marcado al subrayar el marcado dudoso con una línea ondulante. La información de error o advertencia está disponible situando el mouse sobre el texto de marcado. Para editar HTML en la vista Código fuente Sitúe el punto de inserción encima de la etiqueta de cierre </form>, y después escriba un paréntesis angular izquierdo (<). Observe que el editor le ofrece una lista de etiquetas correspondientes al contexto actual. Resalte a para seleccionarlo y presione la BARRA ESPACIADORA. El editor muestra una lista de atributos que son adecuado para la etiqueta delimitadora. En la lista, haga clic en href y después escriba un signo igual y unas comillas dobles (="). El editor le ofrece una lista de las páginas disponibles para vincular en este momento y una opción para abrir el cuadro de diálogo Selector de página principal. En la lista de archivos, haga doble clic en Default.aspx, presione la BARRA ESPACIADORA y después escriba un corchete angular derecho (>) para cerrar la etiqueta. El editor inserta una etiqueta de cierre </a>. Termine el elemento delimitador para que vincule a la página Default.aspx utilizando el texto del vínculo Principal y que ponga lo siguiente: Copiar <a href="Default.aspx">Home</a> 26 Sitúe el punto de inserción en la etiqueta a. Tenga en cuenta que Propiedades muestra los atributos para la etiqueta. En Propiedades, para la propiedad HRef, haga clic en el botón de puntos suspensivos (…). Aparece el cuadro de diálogo Seleccionar elemento de proyecto. Ahora, puede seleccionar una página en el sitio Web actual como la página de destino. Si no tiene otras páginas en el sitio Web entre las que elegir, cierre el cuadro de diálogo Seleccionar elemento de proyecto y escriba su dirección URL favorita en el cuadro Href en la ventana Propiedades. Sitúe el punto de inserción justo encima de la etiqueta de cierre </form> y escriba <no válido>. El editor subraya la etiqueta con una línea ondulante, indicando que la etiqueta no es una etiqueta HTML reconocida. Quite la etiqueta que creó en el paso anterior. Examinar el formato HTML Una característica importante del diseñador de páginas es que conserva el formato HTML que aplique a la página a menos que especifique explícitamente que el editor dé un nuevo formato al documento. Para examinar el formato HTML Dé un nuevo formato a los atributos para el control Button alineando los atributos para que la sintaxis declarativa se parezca a lo siguiente: Copiar <asp:Button id="Button1" runat="server" Font-Bold="True" ForeColor="Blue" Text="Click Here" /> Observe que después de aplicar una sangría en el primer atributo, si presiona INTRO en la etiqueta, las siguientes líneas adoptan la misma sangría. Cambie a la vista Diseño. 27 Haga clic con el botón secundario del mouse en el control Button y, a continuación, haga clic en Copiar. Sitúe el punto de inserción debajo del nuevo control Button, haga clic con el botón secundario del mouse y después haga clic en Pegar. De este modo se crea un botón con el ID de Button2. Desde el grupo Estándar del Cuadro de herramientas, arrastre un tercer control Button a la página, con lo que se crea <Button3>. Cambie a la vista de Código fuente. Observe que <Button2> está formateado de idéntica manera a como formateó <Button1>. Por otro lado, <Button3> está formateado utilizando el formato predeterminado para los elementos asp:button. Edite el documento de modo que <Button1> y <Button2> estén en la misma línea sin que haya un espacio entre ellos: Copiar <asp:Button ID="Button1" runat="server" Font-Bold="True" ForeColor="Blue" Text="Click Here" /><asp:Button ID="Button2" runat="server" Font-Bold="True" ForeColor="Blue" Text="Click Here"/> Los elementos pueden ajustarse, pero el final de <Button1> (es decir, />) debe ir seguido inmediatamente por el comienzo de <Button2> (es decir <asp:Button ID=). Cambie a la vista Diseño. Observe que <Button1> y <Button2> están justo el uno al lado del otro sin ningún espacio entre ellos. Cambie a la vista de código fuente En el menú Edición, señale Avanzado y, a continuación, haga clic en Dar formato al documento. El documento cambia de formato, pero <Button1> y <Button2> permanecen en la misma línea. Si el editor separara los botones, insertaría un espacio durante la representación. Por lo tanto, el editor no cambia el formato que ha creado. 28 8. Controles ASP básicos Aunque ASP.NET continúa admitiendo la arquitectura de los diseñadores de controles de versiones anteriores, ha agregado mejoras significativas. Edición basada en regiones. Las regiones son áreas modificables de la vista en tiempo de diseño de un control. Esta característica ofrece edición en modo WYSIWYG del contenido de un control en tiempo de diseño. Listas de acciones. Las listas de acciones son menús de tareas que el desarrollador de páginas de un control puede realizar en la interfaz de usuario en tiempo de diseño. Por ejemplo, la vista en tiempo de diseño del control puede proporcionar un menú de tareas disponibles, incluida una tarea para aplicar formato al control automáticamente. Diseñadores de origen de datos y enlazados a datos. Los diseñadores de controles de origen de datos permiten al desarrollador de páginas configurar los controles de origen de datos. Los diseñadores de controles enlazados a datos permiten al desarrollador de páginas configurar los controles con enlace a datos. Hay disponibles características para implementar la comunicación entre los diseñadores de origen de datos y los diseñadores enlazados a datos. Para obtener un ejemplo de un diseñador de un control de origen de datos, vea DataSourceDesigner. Para obtener un ejemplo de un diseñador de un control enlazado a datos, vea HierarchicalDataBoundControlDesigner. Edición simplificada con plantillas. El modelo para crear una interfaz de usuario para la edición en tiempo de diseño de controles con plantillas (como GridView) se ha modificado y simplificado considerablemente, de forma que el desarrollador de controles puede elegir su propia edición de plantilla con regiones. Para obtener un ejemplo, vea Ejemplo de control de servidor con plantilla. Modelo de objetos simplificado. El modelo de objetos para trabajar con la representación en tiempo de diseño se ha simplificado, por lo que el único problema importante que debe abordar el desarrollador es la creación de código HTML en tiempo de diseño. Una serie de clases base nuevas proporcionan acceso al modelo de objetos simplificado: ControlDesigner, ContainerControlDesigner y CompositeControlDesigner. Suscripción a servicios host. Un diseñador de controles puede suscribirse y utilizar diversos servicios proporcionados por el entorno host. Por ejemplo, un diseñador de controles puede usar servicios de Visual Studio 2005 para proporcionar acceso a datos, proporcionar acceso a la configuración, agregar controles a una página mediante programación en tiempo de diseño, controlar eventos de clic en el diseñador, dibujar en la superficie de diseño y tener acceso a otros servicios, como el estado del diseñador. 29 9. Creación de módulo de validación de usuario Al crear un control de entrada de datos, como un control TextBox, podemos tener ciertas expectativas del tipo de entrada que el usuario introducirá en ese control. Una entrada de datos incorrecta, como mínimo, retrasará al usuario, y puede incluso terminar nuestra aplicación Web. Para verificar que la entrada de datos cumple nuestras expectativas, debemos compararlo con el valor, intervalo o formato que esperamos recibir del usuario. Para crear esta comprobación, enlazamos al menos un control de validación de entrada de datos con el control de entrada de datos y comparamos la entrada de datos de los usuarios con nuestras expectativas. En este módulo, estudiaremos los controles de validación de entrada de datos disponibles en Microsoft® ASP.NET. También estudiaremos cómo aplicar de forma eficaz estos controles a un formulario Web Form con ASP.NET utilizando Microsoft Visual Studio® .NET. En este módulo, aprenderemos a: �Identificar cuándo es apropiada la validación de entrada de datos en los formularios Web Forms. �Utilizar controles de validación de entrada de datos para verificar los datos introducidos por el usuario en un formulario Web Form. �Verificar que todos los controles de validación de una página son válidos. 10. Controles de navegación Los controles Menu, TreeView, SiteMapPath y SiteMapDataSource generan una interface de usuario (IU) de navegación basada en los datos de navegación. Estos datos pueden ser almacenados en archivos XML, o usando las capacidades de almacenamiento de la Navegación del Sitio. Los ejemplos de abajo muestran como usar estos controles en forma conjunta con la característica de Navegación del Sitio. Utilizando los Controles de Navegación de Sitio Una forma fácil de proporcionar la navegación de sitio en nuestrar páginar web es utilizar uno de los controles de navegación de sitio gráficos:SiteMapPath, TreeView and Menu. •SiteMapPath: (Mapa del Sitio)un camino de navegación que devuelve la página en la que se encuentra el usuario y muestra la jerarquía de páginas. Esto permite a los usuarios volver a otras páginas de la jerarquía. SiteMapPath trabaja de forma exclusiva con el SiteMapProvides que se puede establecer mediante la propiedad SiteMapProvider del control. •TreeView:(Arbol) Proporciona la interfaz de usuario para expandir o contraer los nodos seleccionados en una página web así como la funcionalidad de check box para los elementos seleccionados. El control TreeView soporta el establecimiento de pelementos de datos o de controles de la fuente de datos mediante código o de forma declarativa. Si utilizamos el control SiteMapDataSource, el enlazado a datos será automático. 30 •Menu: Proporciona una Interfaz de usuario horizontal o vertical que muestra submenús adicionales cuando un usuario se pone sobre un elemento. El control Menu soporta la fijación de los elementos de datos y de controles de fuente de datos de forma declarativa o mediante código. Si utilizamos el control SiteMapDataSource, el enlazado a datos será automático. 11. Creación de Themes, Personalizar Themes. Con la llegada de ASP.NET vinieron muchas nuevas características, una de ellas es la creación de temas que nos permiten generar un diseño estándar para nuestra aplicación con la posibilidad de poder generar múltiples temas para que nuestros usuarios puedan elegir de acuerdo a sus preferencias. La creación de temas puede darse tanto a nivel de Aplicación Web como a nivel de Sitio Web, si hablamos a nivel de aplicación web, los temas se almacenan dentro de un directorio especial llamado "App_Themes", en donde podemos crear directorios adicionales por cada tema que tengamos disponibles. Dentro de estos directorios particulares es en donde van a almacenarse nuestros "skins", hojas de estilo, imágenes que va a requerir nuestro diseño para una presentación estándar. Ahora también existe la opción de crear temas globales a nivel de sitio web que puedan ser reutilizables por todas nuestras aplicaciones web, ahora les explicaré el procedimiento para lograrlo. Paso 01. Crear una carpeta llamada "Themes" en la siguiente ruta: "rootiis_sitioweb\aspnet_client\system_web\version\", en donde "rootiis_sitioweb" viene a ser la ruta por defecto a la que apunta nuestro Sitio Web y la parte de la "version" hace referencia a la versíón de asp.net usando, por ejemplo 2_0_50727. En mi caso quedó de la siguiente manera: C:\Inetpub\wwwroot\aspnet_client\system_web\2_0_50727\Themes Paso 02: Crear nuestros temas específicos dentro de la carpeta que acabamos de crear anteriormente, se pueden crear los temas que sean necesarios, sin restricciones. Por ejemplo yo podría crear los siguientes temas: C:\Inetpub\wwwroot\aspnet_client\system_web\2_0_50727\Themes\Default C:\Inetpub\wwwroot\aspnet_client\system_web\2_0_50727\Themes\Azul C:\Inetpub\wwwroot\aspnet_client\system_web\2_0_50727\Themes\Rojo Paso 03: Agregar a cada uno de los temas antes creados el contenido necesario tal como Skins, Hojas de Estilo, Imágenes. 31 Es altamente recomendable crear primero los temas como parte de alguna aplicación web, para poder hacer las pruebas necesarias y luego de ello ya subirlas a nivel de Sitio Web, 12. Enlace de datos SLQL Server a ASP.NET ASP.NET incluye herramientas de acceso a datos que simplifican más que nunca el diseño de sitios que permiten a los usuarios interactuar con bases de datos en páginas Web. .NET Framework incluye dos proveedores de datos para tener acceso a bases de datos empresariales: el proveedor de datos de .NET Framework para OLE DB y el proveedor de datos de .NET Framework para SQL Server. Esta sección se centra en el acceso a bases de datos de SQL Server (versión 7.0 o posterior) mediante el proveedor de datos de .NET Framework para SQL Server, pero se pueden adaptar los ejemplos de código a otras bases de datos con sólo hacer unos pequeños cambios. Para tener acceso a bases de datos de SQL desde ASP.NET Cree una conexión de base de datos mediante la clase SqlConnection. Seleccione un conjunto de registros de la base de datos mediante la clase SqlDataAdapter. Llene un nuevo objeto DataSet con la clase SqlDataAdapter. Si se van a seleccionar datos de una base de datos sólo para su presentación no interactiva, se recomienda utilizar una clase SqlDataReader de sólo avance y de sólo lectura (o OleDbDataReader en el caso de bases de datos que no sean de SQL) para conseguir el máximo rendimiento. Cuando se utilice un SqlDataReader, hay que seleccionar los registros mediante una consulta SqlCommand y crear un SqlDataReader que se devuelve desde el método ExecuteReader del objeto SqlCommand. En algunos casos, como cuando se desea ordenar o filtrar un conjunto de datos, es posible que también se desee crear una nueva DataView basada en un DataSet para la tabla deseada. Enlace un control de servidor, como DataGrid, a DataSet, SqlDataReader o DataView. .NET Framework incluye tres controles que simplifican la presentación de grandes cantidades de datos: Repeater, DataList y DataGrid. Estos tres controles utilizan procedimientos similares de enlace a datos, como se explica en las secciones siguientes. Para ver otros ejemplos de cómo utilizar estos controles, vea las secciones Server-Side Data Access y Acceso a datos y personalización 13. Formulario Maestro detalle. 32 La implementación de un formulario maestro-detalle en un webform de asp.net 2.0, aplicable a bases de datos de SQLServer, Access o cualquier otra fuente de datos compatible con ADO.NET. Para comenzar, podemos crear un proyecto nuevo o desde un aspx ya creado (que es lo más usual). Asumiré la última antes q nada, un formulario maestro-detalle nos permite tener un listado (un control GridView seleccionable) de una tabla y que a su vez, mediante un control Detailsview (u otro) pueden verse los “detalles” de el registro que se seleccionó anteriormente. Mejor pasemos a la práctica: Agregamos un control Gridview a nuestro webform: Luego le asignamos un datasource que es la fuente de datos que alimentará nuestro Gridview y seleccionamos en “Nuevo origen de datos…” 33 En este caso voy a usar una base de datos en SQLServer 2000 llamada Northwind (porque es el que tengo a la mano y además, en todos lados publican ejemplos con SQLServer 2005 express, pero no funciona en muchos hostings o algunos servidores no tan recientes) y mi server se llama SISTEMA, pero puede funcionar exactamente igual en SQLServer 2005, access, oracle u otra fuente de datos, como lo posteé hace un rato, solo es de meterle mano. Así se aprende más. 14. Publicar Aplicaciones Al publicar un proyecto de aplicación Web, Visual Studio compila los archivos de una aplicación Web en un ensamblado único y, a continuación, copia el ensamblado compilado en una ubicación especificada. Los proyectos de aplicación Web ASP.NET comparten los mismos valores de configuración y comportamiento que los proyectos de bibliotecas de clase estándar de Visual Studio 2005. Puede publicar la aplicación Web en una carpeta local o compartida, en un sitio FTP o en un sitio Web al que se obtiene acceso mediante una dirección URL. 34 El cuadro de diálogo Publicar Web, que está ubicado en el menú Generar de Visual Studio, le permite generar y publicar las aplicaciones Web. Además, tiene la posibilidad de quitar el código fuente desde el sitio. De esta forma, el contenido queda más protegido y resulta más difícil que otros usuarios tengan acceso al código fuente del sitio. Para obtener información sobre lo que les sucede a los archivos durante la compilación previa, vea Control de archivos durante la compilación previa de ASP.NET. Antes de publicar la aplicación Web, compruebe la configuración de su sitio original y tenga en cuenta lo siguiente: La configuración que debe existir en la ubicación remota. Específicamente, revise valores como cadenas de conexión, configuración de la suscripción y otra configuración de seguridad y asegúrese de que estos valores son adecuados para su entorno de producción. La configuración que se debe cambiar en el sitio Web publicado. Por ejemplo, es posible que desee deshabilitar la depuración, el trazado y los errores personalizados después de publicar el sitio Web. Dado que se heredan los valores de configuración, es posible que tenga que examinar varios archivos para encontrar toda la configuración aplicable. Los valores de la configuración pueden estar ubicados en el archivo Machine.config o en el archivo Web.config raíz del directorio SystemRoot\Microsoft.NET\Framework\version\CONFIG, además de en cualquier archivo Web.config de la aplicación. Si no tiene permiso para ver los archivos de configuración raíz, puede tener como resultado un archivo que contenga una lista completa de opciones de configuración para su sitio Web, con el formato de configuración estándar, utilizando el ejemplo de código de Cómo: Ver los valores de configuración heredados y locales mediante programación. Para consultar las definiciones de opciones de configuración, vea Opciones de configuración generales (ASP.NET) y Opciones de configuración de ASP.NET. Taller No 5 – NT5- Aplicaciones Web con ASP.NET y Visual Studio CALENDARIO DEL MODULO (Se define por semanas y Núcleos temáticos según Matriz de Acuerdos pedagógicos) UNIDAD DE APRENDIZAJE ACTIVIDADES DE APRENDIZAJE SEMANA 35 Inducción y Acuerdos Se entrega Matriz temática al estudiante fotocopiada para realizar acuerdos pedagógico del Modulo DESARROLLOS WEB NT1. Fundamentos de comunicación de datos Documentos – Aula Virtual NT2. El lenguaje HTML Documentos – Aula Virtual NT3. El lenguaje HTML (Continuación) Documentos – Aula Virtual TALLERES – Preguntas Generadoras (Situaciones – Problemas) Aprendizaje – Significativo – Portafolio. TALLERES Ejercicios- Portafolio PRUEBA – DIRECTA - (Evaluación Escrita o practica )Portafolio PRODUCTOS – FINALES - Practicas pedagógicas productiva - (Temáticas y Portafolio). Seguimiento de: Temáticas y Portafolio – Según – Criterios. TALLERES – Preguntas Generadoras (Situaciones – Problemas) Aprendizaje – Significativo – Portafolio. TALLERES Ejercicios- Portafolio PRUEBA – DIRECTA - (Evaluación Escrita o practica )Portafolio PRODUCTOS – FINALES - Practicas pedagógicas productiva - (Temáticas y Portafolio). Seguimiento de: Temáticas y Portafolio – Según – Criterios. TALLERES – Preguntas Generadoras (Situaciones – Problemas) Aprendizaje – Significativo – Portafolio. TALLERES Ejercicios- Portafolio PRUEBA – DIRECTA - (Evaluación Escrita o practica )Portafolio PRODUCTOS – FINALES - Practicas pedagógicas productiva - (Temáticas y Portafolio). Seguimiento de: Temáticas y Portafolio – Según – Criterios. NT4. Conceptos de diseño TALLERES – Preguntas Generadoras (Situaciones – Problemas) Aprendizaje – Significativo – Portafolio. Documentos – Aula Virtual TALLERES Ejercicios- Portafolio PRUEBA – DIRECTA - (Evaluación Escrita o practica )Portafolio PRODUCTOS – FINALES - Practicas pedagógicas productiva - (Temáticas y Portafolio). NT5. Aplicaciones Web con ASP.NET y Visual Studio Documentos – Aula Seguimiento de: Temáticas y Portafolio – Según – Criterios. TALLERES – Preguntas Generadoras (Situaciones – Problemas) Aprendizaje – Significativo – Portafolio. TALLERES Ejercicios- Portafolio PRUEBA – DIRECTA - (Evaluación Escrita o practica )- 1 2 3 4 5 6 36 Virtual Sustentación – Productos Finales. Portafolio PRODUCTOS – FINALES - Practicas pedagógicas productiva - (Temáticas y Portafolio). Seguimiento de: Temáticas y Portafolio – Según – Criterios. Presentación y sustentación de proyecto de INFORMATICA. Presentación y Sustentación de Preguntas Generadoras 7 Presentación y Sustentación de Portafolio 8 Convocatoria. Sustentación – Productos Finales Convocatoria METODOLOGIA En la educación a distancia en CERES – Sabana de Occidente del Modulo Desarrollos Web, es importante que el estudiante de Ingeniería de sistemas asuma una estricta responsabilidad con sus procesos, condición que lo lleva a adquirir autoesigencia con su aprendizaje. El estudiante debe considerar la capacidad para organizar el tiempo de su estudio por sí mismo (autodisciplina), para poder cumplir con TALLERES – Preguntas Generadoras (Situaciones – Problemas) Aprendizaje – Significativo – y Portafolio. TALLERES Ejercicios- y Portafolio, PRUEBA – DIRECTA - (Evaluación Escrita o practica)-, Portafolio y PRODUCTOS – FINALES - Practicas pedagógicas productiva - (Temáticas y Portafolio), y Seguimiento de: Temáticas y Portafolio – Según – Criterios. Usted estudiante de Ingeniería de sistemas cuenta con varios recursos a su disposición los cuales le ayudaran a alcanzar la competencia al final de este modulo. Ellos son: Texto de Estudio. Guía de Estudio. El espacio tutorial. Material Interactivo (Wiki implementada por el tutor – Mauricio Leal Parga para el trabajo colaborativo con los estudiantes de Modulo Desarrollos Web). 37 Bibliografía • • Eguiluz Perez,Javier. Introducción al XHTML. Sierra A, Martin. Desarrollo de aplicaciones Web con ASP.NET Web grafía: Que es NET - http://www.desarrolloweb.com/articulos/592.php Microsoft Visual Web Developer - http://es.wikipedia.org/wiki/Microsoft_Visual_Web_Developer Fundamentos de SQL –Server 2005 - http://msdn.microsoft.com/eses/library/ms179422(v=sql.90).aspx Planeación de un sitio web ASP.NET con VS 2005 http://www.elguille.info/NET/ASPNET/tutorialLogin/tutorialLogin.htm configuración de la aplicación en VWD y SQL Server 2005. - http://www.es-asp.net/tutoriales-aspnet/tutorial-61-101/trabajando-con-bases-de-datos-en-vwd.aspx Creación de Página Principal (master page) en VWD http://www.elguille.info/colabora/NET2005/GuiaVWDExpress_sergio/sergiotarrillo_02GuiaASPNE T2.htm Elementos de HTML con Visual Web Developer - http://msdn.microsoft.com/eses/library/9z74w20y(v=vs.80).aspx Controles ASP básicos - http://msdn.microsoft.com/es-es/library/wxh45wzs.aspx Creación de módulo de validación de usuario http://mygnet.net/manuales/aspdotnet/validacion_de_entrada_de_datos_del_usuario.1438 Controles de navegación - http://tutoriasdeaspnet.blogspot.com/2010/08/usando-controles-denavegacion-del.html Creación de Themes - http://geeks.ms/blogs/imostacero/archive/2006/12/27/como-crear-temasa-nivel-de-sitio-web.aspx Enlace de datos SLQL Server a ASP.NET - http://msdn.microsoft.com/eses/library/aa719475(v=vs.71).aspx Publicar Aplicaciones - http://msdn.microsoft.com/es-es/library/aa983453(v=vs.80).aspx Lecturas complementarias. 38 Wiki Espacio creado por el Tutor Mauricio Leal Parga – donde se publican periódicamente – documentos y lecturas, Talleres, Preguntas Generadoras, Guías. Del Modulo Desarrollo Web. Es de anotar que la información aquí publicada se puede descargar. http://edumin-dweb-anp01.wikispaces.com/Saludo EVALUACION TALLERES – Preguntas Generadoras (Situaciones – Problemas) Aprendizaje – Significativo – Portafolio. TALLERES Ejercicios- Portafolio PRUEBA – DIRECTA - (Evaluación Escrita o practicas)- Portafolio PRODUCTOS – FINALES - Practicas pedagógicas productiva - (Temáticas y Portafolio). Seguimiento de: Temáticas y Portafolio – Según – Criterios. Presentación y sustentación de proyecto de Desarrollo Web (Diseño de Web). Presentación y Sustentación de Preguntas Generadoras Presentación y Sustentación de Portafolio ACTIVIDADES - (Trabajo – Práctico) - Portafolio 39 POLITICAS A continuación se presentan los siguientes enunciados que se deben cumplir para dar orden al proceso de aprendizaje, que orientan a cada estudiante para que cada participante presente sus actividades para poder alcanzar las competencias necesarias para la aprobación del modulo. Estas políticas dan una estructura al trabajo de todos. Tutor y estudiante. Documentos – E-Mail (El estudiante debe consultar periódicamente la Wiki Edumin-dweb donde se le envían documentos y lecturas complementarias de cada Núcleo Temático – NT). El estudiante debe resolver las Preguntas Generadoras de cada Núcleo, como política de cumplimiento de la metodología de la educación a distancia del proyecto CERES. Los talleres serán publicados en la Wiki Edumin-dweb semanalmente, para resolverlos por dada Núcleo Temático. Se realizaran Pruebas escritas o practicas, finalizando cada sesión de tutorías según Núcleos Temáticos. El estudiante debe exponer libremente sus ideas, mediante momentos de discusión, reflexión donde se promueva el desarrollo autónomo, con un aporte de índole social en la ampliación de su profesión (presentaciones). El estudiante debe presentar Memorias de temática expuesta. El estudiante debe presentar temáticas y portafolios según acuerdo. El estudiante debe presentar y sustentar un proyecto final del Modulo Desarrollo Web. El estudiante debe presentar y sustentar el desarrollo de preguntas generadoras. El estudiante debe presentar y sustentar el Portafolio del modulo –Desarrollo Web- Rol del Tutor: El propósito fundamental como tutor es el de dar un servicio a los estudiantes, facilitando su proceso de aprendizaje y el logro de sus competencias. La supervisión que hago se enfocará tanto a los procesos, como a los productos de aprendizaje que evidencien desarrollo de habilidades que conlleven a alcanzar la competencia, para ello asumo entre otros los compromisos de: 40 Atender directamente a los estudiantes utilizando diversos medios: encuentro tutorial, e-mail, Wiki, sistemas de mensajería y actividades prácticas. Asistir al lugar de tutoría asignado, en la hora y el día indicados previamente para tal fin. Respetar el calendario académico y cada una de las actividades propuestas en el. Guiar, facilitar, asesorar y orientar al estudiante en su proceso de aprendizaje. Suscitar la reflexión e indagar a los estudiantes sobre su proceso de aprendizaje. Evaluar las actividades teniendo en cuenta los criterios de evaluación al plantearse las actividades. Retroalimentar las actividades y sus evidencias de competencia en las fechas acordadas. Las dudas académicas serán atendidas por E-mail y medios como foros en aulas virtuales y Wiki. Rol del estudiante Los estudiantes son participantes, honestos y comprometidos que. Como tales, son los principales responsables de iniciar, dirigir y sostener sus propios procesos de aprendizaje. Cada estudiante se compromete a propiciar las condiciones que estén a su alcance para maximizar las oportunidades de aprendizaje de acuerdo a su contexto y posibilidades. De igual forma se asume que nuestros estudiantes no incurrirán en actos deshonestos y de plagio intelectual de ideas en las diversas formas de interacción, actividades terminales e intermedias. Se espera que los estudiantes participen activamente en cada una de las actividades descritas en la guía de estudio, para ello es necesario tener en cuenta que: El estudiante es el protagonista del proceso de aprendizaje, que lo lleva a ser más activo y propositivo, por consiguiente a desarrollar el auto – estudio. Debe estar preparado para participar activamente de las actividades de aprendizaje, habiendo leído los contenidos de su texto de estudio y materiales adicionales relacionados en la guía de estudio, documentos y lecturas complementarias. Debe realizar las actividades planteadas en la guía de estudio, entregando las evidencias de manera acorde a lo planteado en los criterios de evaluación, dentro de 41 los tiempos establecidos en el calendario y bajo las instrucciones descritas en cada actividad. En las evidencias escritas, deberá saber citar las fuentes, es decir usar debidamente la bibliografía (Norma APA) a fin de evitar el plagio. Guía Elaborada por el Tutor HECTOR MAURICIO LEAL PARGA Uso exclusivo de estudiantes - IV Semestre de Ingeniería de Sistemas Universidad Minuto de Dios CERES SABANA DE OCCIDENTE MODULO: DESARROLLOS WEB Se prohíbe la publicación o reproducción total o parcial de esta Guía. 42