UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLÓGICOS COORDINACION DE COMPUTACIÓN

Transcripción

1 UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLÓGICOS COORDINACION DE COMPUTACIÓN CICLO: 02/2015 GUIA DE LABORATORIO # 12 Nombre de la Práctica: Master Pages Lugar de Ejecución: Centro de cómputo Tiempo Estimado: 2 horas con 30 minutos MATERIA: Desarrollo de aplicaciones con software propietario. II. INTRODUCCIÓN TEÓRICA Master Pages Las páginas principales de ASP.NET permiten crear un diseño coherente para las páginas de la aplicación. Puede definir el aspecto, el diseño y el comportamiento estándar que desea que tengan todas las páginas (o un grupo de páginas) de la aplicación en una sola página principal. A continuación, puede crear páginas de contenido individuales que incluyan el contenido que desea mostrar. Cuando los usuarios solicitan las páginas de contenido, éstas se combinan con la página principal para dar como resultado una página con el diseño de la página principal y el contenido de la página de contenido. Marcadores de posición de contenido reemplazables Además del texto estático y los controles que aparecerán en todas las páginas, la página principal también incluye uno o varios controles ContentPlaceHolder. Estos controles PlaceHolder definen las regiones que incluirán contenido reemplazable. A su vez, el contenido reemplazable se define en las páginas de contenido. Páginas de contenido Para definir el contenido de los controles PlaceHolder de la página principal, cree páginas de contenido individuales, que son páginas ASP.NET (archivos.aspx y, opcionalmente, archivos de código subyacente) que están enlazadas a una página principal concreta. El enlace se establece en la Page de la página de contenido al incluir un atributo MasterPageFile que apunta a la página principal que se va a utilizar. Por ejemplo, una página de contenido podría tener la siguiente Page, que la enlaza con la página Master1.master. En la página de contenido, cree el contenido agregando los controles Content y asignándolos a los controles ContentPlaceHolder de la página principal. Por ejemplo, la página principal podría tener marcadores de posición de contenido denominados Main y Footer. En la página de contenido, puede crear dos controles Content, uno asignado al control ContentPlaceHolderMain y el otro asignado al control ContentPlaceHolderFooter, como se muestra en la ilustración siguiente. Desarrollo de aplicaciones con software propietario1 / 17

2 Reemplazar el contenido del marcador de posición Después de crear los controles Content, agrégueles texto y controles. En una página de contenido, todo lo que no esté dentro de los controles Content (excepto los bloques de script del código del servidor) producirá un error. En una página de contenido puede realizar las mismas tareas que en una página de ASP.NET. Por ejemplo, puede generar el contenido de un control Content utilizando controles de servidor y consultas de base de datos u otros mecanismos dinámicos. Ventajas de las páginas principales Las páginas principales proporcionan una funcionalidad que tradicionalmente los programadores creaban copiando el código, el texto y los elementos de control existentes repetidamente, mediante conjuntos de marcos, archivos de inclusión de elementos comunes, controles de usuario de ASP.NET, etc. Entre las ventajas de las páginas principales se incluyen las siguientes: Permiten centralizar las funciones comunes de las páginas para que las actualizaciones puedan llevarse a cabo en un solo lugar. Facilitan la creación de un conjunto de controles y código, y aplican los resultados en un conjunto de páginas. Por ejemplo, puede utilizar los controles en la página principal para crear un menú que se aplique a todas las páginas. Proporcionan un control más preciso sobre el diseño de la página final al permitir controlar el modo en que se representan los controles PlaceHolder. Proporcionan un modelo de objetos que permite personalizar la página principal a partir de páginas de contenido individuales. Comportamiento en tiempo de ejecución de las páginas principales En tiempo de ejecución, las páginas principales se controlan en la secuencia siguiente: 1. Los usuarios solicitan una página escribiendo la dirección URL de la página de contenido. Desarrollo de aplicaciones con software propietario 2

3 2. Cuando se obtiene la página, se lee la Page. Si la directiva hace referencia a una página principal, también se lee la página principal. Si las páginas se solicitan por primera vez, se compilan las dos páginas. 3. La página principal con el contenido actualizado se combina en el árbol de control de la página de contenido. 4. El contenido de los controles Content individuales se combina en el control ContentPlaceHolder correspondiente de la página principal. 5. La página combinada resultante se representa en el explorador. Este proceso se describe en el diagrama siguiente: Desde la perspectiva del usuario, la combinación de las páginas principales y de contenido da como resultado una única página. La dirección URL de esta página es la de la página de contenido. Desde la perspectiva del programador, las dos páginas actúan como contenedores diferentes para sus respectivos controles. La página de contenido actúa como un contenedor de la página principal. Sin embargo, se puede hacer referencia a los miembros públicos de una página principal a partir del código de la página de contenido. Desarrollo de aplicaciones con software propietario 3

4 III. MATERIALES Y EQUIPO Para la realización de la guía de práctica se requerirá lo siguiente: No. Requerimiento Cantidad 1 Guía de práctica #12: Master Pages 1 2 Computadora con Visual Studio 2012 instalado y una instancia de SQL Server con Management Studio Express 1 3 Memoria USB o disco flexible 1 IV. PROCEDIMIENTO Ejercicio #1 Creación de página maestra. 1. Abra Visual Studio y cree un nuevo sitio web vacío, con el nombre DSPguia12_SUCARNET. 2. Una vez cargado, agregar en la carpeta del sitio a las carpetas contenidas en los recursos adjuntos de esta guia las cuales corresponden a imágenes, archivos css y archivos javascript. 3. Agregar un nuevo archivo, pero en este caso el tipo de archivo sera una página maestra. Para ello ubique en el listado presentado y dentro del lenguaje de C#, el tipo de archivo Página maestra la cual, como ve en la siguiente imagen, contiene una extensión.master que es propia para identificar este tipo de archivos. Desarrollo de aplicaciones con software propietario 4

5 Recuerde que una página maestra le servirá de base y plantilla para todas las paginas sub siguientes. Como nombre de archivo coloque Principal, de clic en Agregar y verificara que se crearan dos archivos, uno asociado al marcado y el otro asociado al código C# 4. Dentro del archivo creado, proceda a agregar el siguiente marcado justo despúes de la directiva de página. <!DOCTYPE html> <html lang="en"> <head> </head> <body> <title>home</title> <meta charset="utf-8"> <meta name="format-detection" content="telephone=no"/> <link rel="icon" href="images/favicon.ico" type="image/x-icon"> <link rel="stylesheet" href="css/grid.css"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/camera.css"/> <link rel="stylesheet" href="css/owl.carousel.css"/> <script src="js/jquery.js"></script> <script src="js/jquery-migrate js"></script> <script src="js/jquery.equalheights.js"></script> <script src="js/camera.js"></script> <script src="js/owl.carousel.js"></script> <div class="page"> <header id="header"> <div id="stuck_container"> <div class="container"> <div class="row"> <div class="grid_12"> <div class="brand put-left"> <h1> <a href="index.html"> <img src="images/logo.png" alt="logo"/> </a> </h1> Desarrollo de aplicaciones con software propietario 5

6 <nav class="nav put-right"> <ul class="sf-menu"> <li class="current"><a href="/">home</a></li> <li> <a>about</a> <ul> <li> <a>lorem ipsum</a></li> <li><a>dolor sit amet</a> <li><a>ctetur adipisicing</a> <li><a>elit sed do</a> </li> </ul> </li> <li><a >Services</a></li> <li><a >Blog</a></li> <li><a href="contactanos.aspx">contacts</a></li> </ul> </nav> </header> <footer id="footer" class="color_9"> <div class="container"> <div class="row"> <div class="grid_12"> Desarrollo de aplicaciones con software propietario 6

7 </footer> <script src="js/script.js"></script> </body> </html> 5. Ahora, dentro del archivo de pagina maestra, ubique la linea del marcado justo despues de el cierre de la etiqueta <header> y proceda a agregar el espacio donde colocara todo el contenido subsiguiente. Digite el contenido de marcado tal y como se muestra en la siguiente figura. 6. Ahora, proceda a agregar una nueva pagina Default.aspx y en el cuadro de dialogo marque la casilla Seleccionar pagina maestra ubicada en la esquina inferior derecha. Luego de clic en agregar. Desarrollo de aplicaciones con software propietario 7

8 7. Se nos mostrara una nueva ventana donde deberemos seleccionar la pagina maestra del total de master pages disponibles en el proyecto. Como usted puede darse cuenta, pueden definirse mas un de archivo.master en nuestra solucion. Seleccione la pagina maestra creada previamente y de clic en Aceptar Desarrollo de aplicaciones con software propietario 8

9 8. Al agregar la pagina de esa manera, el marcado se nos reduce tal y como se muestra en la siguiente figura, y solo nos aparece habilitada la seccion del contentplaceholder con id contenidoporpagina que usted agrego a la master page. Fuera de este contenedor no podemos agregar contenido, debe ser obligatoriamente en el interior. Tenga en cuenta que pueden existir tantos contentplaceholder como usted haya definido en su pagina maestra. 9. Agregue el siguiente marcado para la pagina de Default.aspx <%@ Page Title="" Language="C#" MasterPageFile="~/Principal.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <asp:content ID="Content1" ContentPlaceHolderID="contenidoPorPagina" Runat="Server"> <section id="content"> <div class="ic">more Website TemplateMonster.com - September08, 2014! <div class="camera-wrapper"> <div id="camera" class="camera-wrap"> <div data-src="images/index_slide01.jpg"> <div class="fadein camera_caption"> <h2 class="text_1 color_1">solutions that you need!</h2> <a class="btn_1" href="#">more info</a> Desarrollo de aplicaciones con software propietario 9

10 <div data-src="images/index_slide02.jpg"> <div class="fadein camera_caption"> <h2 class="text_1 color_1">lorem ipsum dolor sit!</h2> <a class="btn_1" href="#">more info</a> <div data-src="images/index_slide03.jpg"> <div class="fadein camera_caption"> <div class="container"> <h2 class="text_1 color_1">lorem ipsum dolor sit amet, consectetur!</h2> <a class="btn_1" href="#">more info</a> <div class="row wrap_1 wrap_5"> <div class="grid_3"> <div class="box_1"> <div class="icon_1"> <h3 class="text_2 color_2 maxheight1"><a href="#">budget Planning</a></h3> <p class="text_3 color_2 maxheight"> </p> Lorem ipsum dolor sit amettetur dipiscing elit. In mollis erat mattis <a class="btn_2" href="#">read more</a> <div class="grid_3"> <div class="box_1"> <div class="icon_2"> <h3 class="text_2 color_2 maxheight1"><a href="#">marketing Research</a></h3> <p class="text_3 color_2 maxheight"> </p> Dorem ipsum dolor sit amettetur dipiscing elit. In mollis erat mattis <a class="btn_2" href="#">read more</a> <div class="grid_3"> <div class="box_1"> Desarrollo de aplicaciones con software propietario 10

11 <div class="icon_3"> <h3 class="text_2 color_2 maxheight1"><a href="#">employee Benefits</a></h3> <p class="text_3 color_2 maxheight"> </p> Kerem ipsum dolor sit amettetur dipiscing elit. In mollis erat mattis <a class="btn_2" href="#">read more</a> <div class="grid_3"> <div class="box_1"> <div class="icon_4"> <h3 class="text_2 color_2 maxheight1"><a href="#">risk Management</a></h3> <p class="text_3 color_2 maxheight"> Norem ipsum dolor sit amettetur dipiscing elit. In mollis erat mattis neque facilisis, sit </p> <div class="container"> amet uesas <div class="row wrap_1"> 1"/> <a class="btn_2" href="#">read more</a> <div class="grid_6"> <div class="wrap_6"> mattis neque facilisis, <div class="box_2 maxheight2"> <div class="put-left"><img src="images/index_img01.png" alt="image <div class="caption"> <h3 class="text_2 color_2"> </h3> Save Your Time <br/> with Us <p class="text_3"> </p> Morem ipsum dolor sit amettetur dipiscing elit. In mollis erat sit amet ultries wertolio dasererat rutru. <a href="#" class="btn_2">read more</a> Desarrollo de aplicaciones con software propietario 11

12 <div class="clearfix"> <div class="grid_6"> <div class="wrap_6"> <div class="box_2 maxheight2"> <div class="put-left"><img src="images/index_img02.png" alt="image 2"/> <div class="caption"> <h3 class="text_2 color_2"> The Highest <br/> Quality Services </h3> <p class="text_3"> Lorem ipsum dolor sit amettetur dipiscing elit. In mollis erat mattis neque facilisis, sit amet ultries wertolio dasererat rutrum. </p> <a href="#" class="btn_2">read more</a> <div class="clearfix"> <div class="container"> <div class="row wrap_9 wrap_4 wrap_10"> <div class="grid_12"> <div class="header_1 wrap_3 color_3"> Get in Touch <div class="box_3"> <ul class="list_1"> <li><a class="fa fa-twitter" href="#"></a></li> Desarrollo de aplicaciones con software propietario 12

13 <li><a class="fa fa-facebook" href="#"></a></li> <li><a class="fa fa-google-plus" href="#"></a></li> <li><a class="fa fa-pinterest" href="#"></a></li> </ul> </section> </asp:content> 10. Agregue una nueva pagina con el titulo contactanos.aspx de la misma forma anterior seleccionando siempre la pagina maestra del proyecto. Luego agregar el siguiente marcado. Page Title="" Language="C#" MasterPageFile="~/Principal.master" AutoEventWireup="true" CodeFile="contactanos.aspx.cs" Inherits="contactanos" %> <asp:content ID="Content1" ContentPlaceHolderID="contenidoPorPagina" Runat="Server"> <section id="content"><div class="ic">more Website TemplateMonster.com - September08, 2014! <div class="container"> <div class="row wrap_11"> <div class="grid_12"> <h2 class="header_2 indent_4">find Us</h2> <div class="bg_1 wrap_17 wrap_19"> <div class="container"> <div class="row"> <div class="grid_12"> <iframe class="map" src=" !3d !2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s us!4v " </iframe> style="border:0"> Desarrollo de aplicaciones con software propietario 13

14 <br/> <div class="row"> <div class="grid_6"> <div class="wrap_18"> <h2 class="header_2 indent_5"> </h2> Contact Info <address> <p class="text_7 color_6"> </p> Lorem ipsum dolor sit amet, consecteturpiscinger elit um dolor sit amet, consecteturpiscing. <p class="text_8"> Our <a href=" rel="nofollow">premium website templates</a> go with 24/7 support. <br/> themes, address <br/> <br/> If you have any questions about customization of free to guys from <a href=" rel="nofollow">templatetuning</a>. Note that it's a paid service. <br/> </p> </address> <br/> <div class="grid_6"> <div class="wrap_18"> The Company Name Inc. <br/> 9870 St Vincent Place, <br/> Glasgow, DC 45 Fr 45. <br/> Telephone: <br/> FAX: <br/> <a href="#">mail@demolink.org</a> <h2 class="header_2 indent_2"> </h2> Contact Form <form id="contact-form"> <div class="contact-form-loader"> Desarrollo de aplicaciones con software propietario 14

15 <fieldset> <div class="row"> <div class="grid_2"> <label class="name"> <input type="text" name="name" placeholder="name:" <span class="empty-message">*this field is required.</span> <span class="error-message">*this is not a valid name.</span> </label> <div class="grid_2"> <label class=" "> <input type="text" name=" " placeholder=" " value="" <span class="empty-message">*this field is required.</span> <span class="error-message">*this is not a valid .</span> </label> <div class="grid_2"> <label class="phone"> <input type="text" name="phone" placeholder="phone:" value="" data-constraints="@justnumbers"/> <span class="empty-message">*this field is required.</span> <span class="error-message">*this is not a valid phone.</span> </label> <label class="message"> <textarea name="message" placeholder="message:" <span class="empty-message">*this field is Desarrollo de aplicaciones con software propietario 15

16 required.</span> <span class="error-message">*the message is too short.</span> </label> <div class="btn-wrap"> <a class="btn_3" href="#" data-type="reset">clear</a> <a class="btn_3" href="#" data-type="submit">send</a> </fieldset> <div class="modal fade response-message"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" datadismiss="modal" aria-hidden="true"> </button> <h4 class="modal-title">modal title</h4> <div class="modal-body"> You message has been sent! We will be in touch soon. </form> <div class="container"> <div class="row wrap_9 wrap_4 wrap_10"> <div class="grid_12"> <div class="header_1 wrap_3 color_3"> Get in Touch <div class="box_3"> Desarrollo de aplicaciones con software propietario 16

17 <ul class="list_1"> <li><a class="fa fa-twitter" href="#"></a></li> <li><a class="fa fa-facebook" href="#"></a></li> <li><a class="fa fa-google-plus" href="#"></a></li> <li><a class="fa fa-pinterest" href="#"></a></li> </ul> </section> </asp:content> 11. Proceda a ejecutar la página Default.aspx y compruebe que se combina con el diseño de la master page Pantilla. V. BIBLIOGRAFÍA 1. Thierry GROUSSARD. (2013). C# 5: Los fundamentos del lenguaje Desarrollar con Visual Studio Barcelona: ENI. Desarrollo de aplicaciones con software propietario 17