Vous êtes sur la page 1sur 68

Manual Tcnico

Pgina web Biblioteca Pblica Mauricio Magdaleno

Datos tcnicos del sitio web

Manual Tcnico: Pgina web

2012

ndice

ANTECEDENTES ..................................................................................................................................... 3 ALCANCE Y LIMITACIONES DEL PROYECTO ................................................................................... 4 LIMITACIONES DEL PROYECTO ....................................................................................................................... 4 CONSIDERACIONES TCNICAS ........................................................................................................... 4 RESTRICCIONES DE INSTALACIN DEL SITIO WEB: ........................................................................................ 4 DISEO DEL SITIO .................................................................................................................................. 5 MEN DE NAVEGACIN Y BARRA GLOBAL DEL SITIO WEB ..................................................... 14 CDIGO DEL CONTENIDO DE LA PGINA DE ADMINISTRACIN .................................................................... 17 CDIGO DEL CONTENIDO DE LA PGINA DE LOCALIZACIN......................................................................... 19 CDIGO DE GALERA DE IMGENES ............................................................................................................. 22 CDIGO DE GALERA DA LIBRO ................................................................................................................... 25 BARRA DE NAVEGACIN GLOBAL ................................................................................................................. 28 Cdigo de la pgina de inicio .............................................................................................................. 29 Cdigo de la pgina de servicios ........................................................................................................ 32 Cdigo de la pgina de niveles ........................................................................................................... 36 MANTENIMIENTO. ................................................................................................................................. 43 DIRECTORIOS Y SUBDIRECTORIOS DEL SITIO. ............................................................................................. 43 GALERAS DE IMGENES .............................................................................................................................. 45 BANNERS ...................................................................................................................................................... 51 BOTONES CON ROLLOVER........................................................................................................................... 58 MENS DESPLEGABLES ............................................................................................................................... 63 EDITAR NIVELES ........................................................................................................................................... 68 CONCLUSIONES .................................................................................................................................... 68

Manual Tcnico: Pgina web


Antecedentes

2012

La creacin de la biblioteca surge en un contexto cultural especial, en el que los habitantes del estado en su mayora carecan de educacin y la prioridad de los gobiernos en ese aspecto era precisamente ensear a leer y escribir al pueblo. Debido a la inestabilidad poltica la biblioteca tuvo muy poca actividad, por ello, en el ao de 1850, siendo el General Francisco G. Pavn, Gobernador del Estado, tom la decisin de clausurarla por considerarla un servicio ocioso en una sociedad que apenas unos cuantos saban leer y escribir, y por otro lado, por el gasto que originaba al erario pblico. Con este hecho la biblioteca dej de brindar el servicio, y permaneci cerrada hasta el ao de 1856, cuando nuevamente se incorpor a la actividad en este caso, a la acadmica. En el ao de 1859 el gobierno estatal, al ejecutar las Leyes de Reforma, los libros del Convento de Guadalupe se trasladaron a la Biblioteca Pblica del Estado. Salvador Vidal en La Continuacin del Bosquejo Histrico de Zacatecas, tomo III, menciona que la librera del convento contaba con doce o quince mil libros, y que esa cantidad se dividi en dos: una parte se qued en la biblioteca de la ciudad de Zacatecas y otra se traslad a Tlaltenango, a solicitud del sacerdote del lugar. Por disposicin del Congreso del 31 de octubre de 1861, a partir de esa fecha, la biblioteca pblica del Estado, que an permaneca en el mismo lugar, qued integrada con los libros que ya tena en existencia, ms los que se haban ingresado de la biblioteca del Convento de Guadalupe. Adems continu dependiendo de la Secretara del H. Congreso del Estado. Una pgina web es el nombre de un documento o informacin electrnica adaptada para la Word Wilde Web (WWW), y que puede ser accedida mediante un navegador para mostrarse en un monitor de computadora o dispositivo mvil. Esta informacin se encuentra generalmente en formato HTML o XHTML, y puede proporcionar navegacin a otras pginas web mediante enlaces de hipertexto. Las pginas web frecuentemente incluyen otros recursos como hojas de estilo en cascada, guiones (scripts) e imgenes digitales, entre otros. Las pginas web pueden estar almacenadas en un equipo local o un servidor web remoto. El servidor web puede restringir el acceso nicamente para redes privadas, p. ej., en una intranet corporativa, o puede publicar las pginas en la World Wide Web. El acceso a las pginas web es realizado mediante su transferencia desde servidores utilizando el protocolo de transferencia de hipertexto (HTTP. La pgina de la Biblioteca Pblica Mauricio Magdaleno (BPMM), fue desarrollada para actualizar el contenido y la apariencia grfica de la pgina web, tambin para

Manual Tcnico: Pgina web

2012

ofertar a los usuarios una bsqueda optimizada del material disponible con el que cuenta la institucin. Alcance y limitaciones del proyecto El desarrollo del proyecto de la pgina web para la Biblioteca Pblica Mauricio Magdaleno, comprende la creacin de pginas de contenido HTML, dos sistemas; uno de ellos es para la consulta de material bibliogrfico (se encuentra en lnea), el siguiente es un sistema para la parte administrativa (tiene como finalidad actualizar la base de datos del sistema de consulta). Cabe aclarar que una vez entregado el proyecto no se realizaran trabajos de mantenimiento o restructuracin del mismo por parte de los prestadores del servicio social.

Limitaciones del proyecto 1. Que la biblioteca no cuente con un servicio de hosting. 2. No tener servicio de internet en la biblioteca. 3. Rebasar la capacidad de almacenamiento del material bibliogrfico en la base de datos (BD), exclusivamente esta limitante para los sistemas. Consideraciones tcnicas

Las plataformas de desarrollo del sitio fueron Macintosh y Windows en su versin 7, desde el diseo hasta la pgina maestra fueron realizadas en programas pertenecientes a la barra de diseo web Adobe Creative Suite. El lenguaje de desarrollo fue apoyado por el software Adobe Dreamweaver cs5, por lo que ser comn visualizar en el cdigo del sitio lenguajes CSS, HTML5, XML, entre otros, tambin contiene cdigo embebido ASP3 (actionscript 3.0), proveniente del programa Adobe Flash cs5. Restricciones de instalacin del sitio web:

Contar con nombre de dominio y web hosting para el hospedaje e identificacin de la pgina web de la biblioteca. Contar con conexin a internet en el host donde se quiere visualizar el sitio web. Tener instalado en la computadora donde se visualizara el sitio web un navegador web (ejemplo Internet Explorer, Google Chrome, etc.)
4

Manual Tcnico: Pgina web


Diseo del sitio

2012

Los prototipos del sitio web y la apariencia grfica del sitio fueron diseados en Adobe Fireworks cs5, para su posterior edicin e integracin en la aplicacin de Adobe Dreamweaver cs5. Despus de una seleccin de colores y de la posible organizacin de la pgina web, se realiz la plantilla, o pgina maestra del sitio web, el cdigo referente a esta pgina se muestra a continuacin;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!Inicia encabezado de pagina--> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Biblioteca Publica Mauricio Magdaleno</title> <style type="text/css"> <! Definicin de reglas CSS para hacer referencias a ellas en cdigo -->

@import url("Imagenes/mapa/mapaN.css"); @import url("Imagenes/menuNav/MenuNav.css"); #wrapper { height: 781px; width: 1061px; margin-top: 30px; margin-right: 100px; margin-bottom: 100px; margin-left: 100px; } #logosP { height: 160px; width: 1061px; } #globalB {

Manual Tcnico: Pgina web


height: 65px; background-image: url(Imagenes/barraglobal.png); width: 1061px; } #menuN { float: left; height: 546px; width: 146px; color: #FFF; background-color: #000; } #contenidoP { float: left; height: 546px; width: 904px; background-color: #FFF; } #menuLogo { width: 146px; float: left; height: 65px; } #btninicio { float: left; width: 160px; height: 51px; padding-top: 14px; } #btnservicio {

2012

Manual Tcnico: Pgina web


float: left; width: 160px; height: 51px; padding-top: 14px; } #btnactividad { float: left; width: 160px; height: 51px; padding-top: 14px; } #btnnivel { float: left; width: 160px; height: 51px; padding-top: 14px; } #btnmaterialb { float: left; height: 51px; padding-top: 14px; } body { background-image: url(Imagenes/p5020056.jpg); background-repeat: no-repeat; } #apDiv1 { position:absolute; width:889px;

2012

Manual Tcnico: Pgina web


height:535px; z-index:1; left: 292px; top: 303px; text-align: justify; color: #000; } h1,h2,h3,h4,h5,h6 { font-family: "Times New Roman", Times, serif; } h1 { color: #900; font-size: 30px; } body,td,th { font-family: "Times New Roman", Times, serif; font-size: 16px; } #contenidoT { padding-right: 50px; padding-left: 80px; } </style> <script type="text/javascript"> function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

2012

Manual Tcnico: Pgina web


var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; }

2012

function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } </script> <script language="JavaScript1.2" type="text/javascript" src="Imagenes/menuNav/mm_css_menu.js"></script> </head> <!Termina encabezado de pagina web--> <body> <! Inicia cuerpo de pagina web-->

onload="MM_preloadImages('Imagenes/btninicio2.png','Imagenes/btnservicios2.png','Imagenes/btnactividades 2.png','Imagenes/btnnivel2.png','Imagenes/btnmbibliografico2.png','Imagenes/menuNav/MenuNav_r1_c1_s2.jp g','Imagenes/menuNav/MenuNav_r2_c1_s1.jpg','Imagenes/menuNav/MenuNav_r2_c1_s2.jpg','Imagenes/men uNav/MenuNav_r5_c1_s1.jpg','Imagenes/menuNav/MenuNav_r5_c1_s2.jpg')"> <div align="center"> <!Etiqueta para centrado de contenido dentro del cuerpo de pagina web--> <div id="wrapper"> <!Primer etiqueta envoltura de la pagina importante revisae regla css para visualizar el tamao en pixeles de mrgenes top, down, right and left-->

<div id="logosP"><img src="Imagenes/cord.png" width="330" height="104" vspace="20" border="0" usemap="#Map6" /> <map name="Map6" id="Map6">

Manual Tcnico: Pgina web

2012

<area shape="rect" coords="-2,0,329,108" href="http://www.seczac.gob.mx/cebzac/" target="_blank" /> </map> <img src="Imagenes/LOGO_GOBIERNO_NUEVO_-_copia.png" width="361" height="145" hspace="60" border="0" usemap="#Map7" /> <map name="Map7" id="Map7"> <area shape="rect" coords="-12,-10,362,144" href="http://www.zacatecas.gob.mx/site/index.php" target="_blank" /> </map> <img src="Imagenes/sec.png" width="184" height="111" hspace="20" vspace="15" border="0" usemap="#Map8" /> <map name="Map8" id="Map8"> <area shape="rect" coords="-7,1,185,117" href="http://www.seczac.gob.mx/" target="_blank" /> </map> </div> <div id="globalB"> <div id="menuLogo"><img src="Imagenes/menuLogo.png" width="146" height="65" /></div> <div id="btninicio"><a href="index.html" target="_self" onmouseover="MM_swapImage('Image2','','Imagenes/btninicio2.png',1)" onmouseout="MM_swapImgRestore()"><img src="Imagenes/btninicio1.png" name="Image2" width="160" height="50" border="0" id="Image2" /></a></div> <div id="btnservicio"><a href="servicios.html" target="_self" onmouseover="MM_swapImage('Image3','','Imagenes/btnservicios2.png',1)" onmouseout="MM_swapImgRestore()"><img src="Imagenes/btnservicios1.png" name="Image3" width="160" height="50" border="0" id="Image3" /></a></div> <div id="btnactividad"><a href="actividades.html" target="_self" onmouseover="MM_swapImage('Image4','','Imagenes/btnactividades2.png',1)" onmouseout="MM_swapImgRestore()"><img src="Imagenes/btnactividades1.png" name="Image4" width="160" height="50" border="0" id="Image4" /></a></div> <div id="btnnivel"><a href="niveles.html" target="_self" onmouseover="MM_swapImage('Image5','','Imagenes/btnnivel2.png',1)" onmouseout="MM_swapImgRestore()"><img src="Imagenes/btnnivel1.png" name="Image5" width="160" height="50" border="0" id="Image5" /></a></div> <div id="btnmaterialb"><a href="mbibliografico.html" target="_self" onmouseover="MM_swapImage('Image6','','Imagenes/btnmbibliografico2.png',1)" onmouseout="MM_swapImgRestore()"><img src="Imagenes/btnmbibliografico1.png" name="Image6" width="260" height="50" border="0" id="Image6" /></a></div> </div> <div id="menuN">

10

Manual Tcnico: Pgina web


<div id="FWTableContainer1553561083"> <table style="display: inline-table;" border="0" cellpadding="0" cellspacing="0" width="146">

2012

<!-- fwtable fwsrc="MenuNav.png" fwpage="Page 1" fwbase="MenuNav.jpg" fwstyle="Dreamweaver" fwdocid = "1553561083" fwnested="1" --> <tr> <td><a href="direccion.html" target="_self" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('MenuNav_r1_c1_s1','','Imagenes/menuNav/MenuNav_r1_c1_s2.jpg',1);"><i mg name="MenuNav_r1_c1_s1" src="Imagenes/menuNav/MenuNav_r1_c1_s1.jpg" width="146" height="37" border="0" id="MenuNav_r1_c1_s1" alt="" /></a></td> </tr> <tr> <td><a href="administracion.html" target="_self" onmouseout="MM_swapImage('MenuNav_r2_c1_s1','','Imagenes/menuNav/MenuNav_r2_c1_s1.jpg',1);" onmouseover="MM_swapImage('MenuNav_r2_c1_s1','','Imagenes/menuNav/MenuNav_r2_c1_s2.jpg',1);"><i mg name="MenuNav_r2_c1_s1" src="Imagenes/menuNav/MenuNav_r2_c1_s1.jpg" width="146" height="41" border="0" id="MenuNav_r2_c1_s1" usemap="#m_MenuNav_r2_c1_s1" alt="" /></a></td> </tr> <tr> <td><img name="MenuNav_r4_c1_s1" src="Imagenes/menuNav/MenuNav_r4_c1_s1.jpg" width="146" height="37" border="0" id="MenuNav_r4_c1_s1" usemap="#m_MenuNav_r4_c1_s1" alt="" /></td> </tr> <tr> <td><a href="galery.html" target="_self" onmouseout="MM_swapImage('MenuNav_r5_c1_s1','','Imagenes/menuNav/MenuNav_r5_c1_s1.jpg',1);" onmouseover="MM_swapImage('MenuNav_r5_c1_s1','','Imagenes/menuNav/MenuNav_r5_c1_s2.jpg',1);"><i mg name="MenuNav_r5_c1_s1" src="Imagenes/menuNav/MenuNav_r5_c1_s1.jpg" width="146" height="41" border="0" id="MenuNav_r5_c1_s1" usemap="#m_MenuNav_r5_c1_s1" alt="" /></a></td> </tr> </table> <map name="m_MenuNav_r2_c1_s1" id="m_MenuNav_r2_c1_s1"> <area shape="rect" coords="0,39,146,80" href="javascript:;" alt="" onmouseout="MM_menuStartTimeout(100);" onmouseover="MM_menuShowMenu('MMMenuContainer0416155843_0', 'MMMenu0416155843_0',146,47,'MenuNav_r2_c1_s1');" /> </map> <map name="m_MenuNav_r4_c1_s1" id="m_MenuNav_r4_c1_s1">

11

Manual Tcnico: Pgina web


<area shape="rect" coords="0,-2,146,39" href="javascript:;" alt="" onmouseout="MM_menuStartTimeout(100);" onmouseover="MM_menuShowMenu('MMMenuContainer0416155843_0', 'MMMenu0416155843_0',146,6,'MenuNav_r4_c1_s1');" /> </map> <map name="m_MenuNav_r5_c1_s1" id="m_MenuNav_r5_c1_s1">

2012

<area shape="rect" coords="0,-39,146,2" href="javascript:;" alt="" onmouseout="MM_menuStartTimeout(100);" onmouseover="MM_menuShowMenu('MMMenuContainer0416155843_0', 'MMMenu0416155843_0',146,31,'MenuNav_r5_c1_s1');" /> </map> <div id="MMMenuContainer0416155843_0"> <div id="MMMenu0416155843_0" onmouseout="MM_menuStartTimeout(100);" onmouseover="MM_menuResetTimeout();"> <a href="mision.html" target="_self" id="MMMenu0416155843_0_Item_0" class="MMMIFVStyleMMMenu0416155843_0" onmouseover="MM_menuOverMenuItem('MMMenu0416155843_0');"> MISION </a> <a href="vision.html" target="_self" class="MMMIVStyleMMMenu0416155843_0" id="MMMenu0416155843_0_Item_1" onmouseover="MM_menuOverMenuItem('MMMenu0416155843_0');"> VISION </a> <a href="historia.html" target="_self" class="MMMIVStyleMMMenu0416155843_0" id="MMMenu0416155843_0_Item_2" onmouseover="MM_menuOverMenuItem('MMMenu0416155843_0');"> HISTORIA </a> <a href="localizacion.html" target="_self" class="MMMIVStyleMMMenu0416155843_0" id="MMMenu0416155843_0_Item_3" onmouseover="MM_menuOverMenuItem('MMMenu0416155843_0');"> LOCALIZACION </a> </div> </div> </div> <p><img src="Imagenes/lconaculta2.png" width="146" height="36" border="0" usemap="#Map" /> <map name="Map" id="Map"> <area shape="rect" coords="-6,0,145,54" href="#" /> </map> <img src="Imagenes/lpasdbp.jpg" width="146" height="36" border="0" usemap="#Map2" /> <map name="Map2" id="Map2"> <area shape="rect" coords="-4,0,148,37" href="http://pasdbp.wordpress.com/" target="_blank" /> </map> <img src="Imagenes/imgdgb2.png" width="146" height="35" border="0" usemap="#Map3" /> <map name="Map3" id="Map3"> <area shape="rect" coords="-14,0,154,37" href="http://dgb.conaculta.gob.mx/" target="_blank" /> </map>

12

Manual Tcnico: Pgina web


</p> <p><img src="Imagenes/logo_uaz1.png" width="146" height="133" border="0" usemap="#Map4" /> <map name="Map4" id="Map4">

2012

<area shape="rect" coords="-14,2,150,141" href="http://nautilus.uaz.edu.mx/portal/" target="_blank" /> </map> </p> <p><img src="Imagenes/lsep.png" width="146" height="36" border="0" usemap="#Map5" /> <map name="Map5" id="Map5"> <area shape="rect" coords="-10,1,154,38" href="http://www.sep.gob.mx/swb" target="_blank" /> </map> </p> <p>&nbsp;</p> </div> <div id="contenidoP"> <p>&nbsp; </p> <p>&nbsp; </p> <p>&nbsp; </p> </div> <!cierra etiqueta div de centrado--> </div> </div> </body><!Termina cuerpo de pagina web-->

En la imagen 01, se ilustra el diseo general del sitio web. Imagen 01: Plantilla general.

13

Manual Tcnico: Pgina web

2012

Men de navegacin y barra global del sitio web

La pgina web se divide en un men de navegacin, alojado en la parte izquierda de la vista en lnea. Tambin en su estructura tiene una barra global, situada en la parte superior de la pgina web (Ver imagen 02), esto con la finalidad de tener acceso a las pginas subsecuentes del sitio. Dentro de las opciones de acceso del men de navegacin se encuentran, las pginas de direccin, administracin, acerca de, y galera de imgenes. Para estas pginas el cdigo HTML es similar, a continuacin se muestra el cdigo de la pgina de direccin, a modo de explicacin. Cdigo de la pgina de direccin:

<div id="contenidoP"> <p>

<! Esta seccin de cdigo hace referencia a un objeto realizado en flash cs5, es un banner con el ttulo de la pagina correspondiente -->
<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="910" height="85"> <param name="movie" value="Imagenes/baners/banner_direccion.swf" /> <param name="quality" value="high" /> <param name="wmode" value="opaque" />

14

Manual Tcnico: Pgina web


<param name="swfversion" value="6.0.65.0" />

2012

<!-- Esta etiqueta para indica a los usuarios de Flash Player 6.0 r65 o posterior que descarguen la versin ms reciente de Flash Player. Elimnela si no desea que los usuarios vean el mensaje. -->
<param name="expressinstall" value="../PaginaProyecto/Scripts/expressInstall.swf" /> <!-- La siguiente etiqueta object es para navegadores distintos de IE. Ocltela a IE mediante IECC. --> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="Imagenes/baners/banner_direccion.swf" width="910" height="85"> <!--<![endif]--> <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <param name="swfversion" value="6.0.65.0" /> <param name="expressinstall" value="../PaginaProyecto/Scripts/expressInstall.swf" /> <!-- El navegador muestra el siguiente contenido alternativo para usuarios con Flash Player 6.0 o versiones anteriores. --> <div> <h4>El contenido de esta pgina requiere una versin ms reciente de Adobe Flash Player.</h4> <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Obtener Adobe Flash Player" width="112" height="33" /></a></p> </div> <!--[if !IE]>--> </object> <!--<![endif]--> </object> </p> <table width="902" height="354" border="0"> <tr> <td height="350" valign="top"><blockquote>

<! Regla css para encabezado lleva como ttulo Objetivo-->


<h1><span style="font-size:15.0pt; ">Objetivo</span></h1>

<! Texto de contenido de la pagina, emplenado una etiqueta llamada <p></p> -->
<p class="MsoNormal" style="text-align:justify;line-height:normal;"><span style="font-family:'Times New Roman','serif'; fontsize:15.0pt; color:black; ">Proporcionar servicios bibliotecarios a su poblacin y fungir como biblioteca de funcionamiento modelo, a quien recurra a la Coordinacin de la Red Estatal, para apoyar la operacin del resto de las bibliotecas pblicas en la entidad.</span></p>

15

Manual Tcnico: Pgina web

2012

<p class="MsoNormal" style="text-align:justify;line-height:normal;"><span style="font-family:'Times New Roman','serif'; fontsize:15.0pt; color:black; ">La Direccin de la Biblioteca Pblica Central Estatal se encarga de cumplir y hacer cumplir la normatividad bibliotecaria vigente, adems tambin en la participacin y ejecucin de programas anuales de operacin, asi mismo, elabora informes al trmino de cada proyecto, los cuales se envan a la Coordinacin Estatal, previa evaluacin del trabajo. En el mbito de la administracin de recursos humanos, la Direccin asigna a los empleados el puesto y las funciones que han de desempear cotidianamente; apoya el entrenamiento y capacitacin del personal bibliotecario.</span></p> <blockquote> <blockquote> <blockquote> <blockquote> <p>&nbsp;</p> </blockquote> </blockquote> </blockquote> </blockquote> </blockquote></td> </tr> </table> <h1>&nbsp;</h1> </div> <!

Cierra div tag ContenidoP-->

16

Manual Tcnico: Pgina web


Imagen 02: Mens de navegacin del sitio.

2012

Para las pginas de administracin y acerca de en sus tres opciones: misin, visin, e historia, el cdigo de la pgina web es similar, existen variaciones en el titulo de la pagina y en el contenido informativo de la pagina como el titulo de la pgina web. Cdigo a continuacin. Cdigo del contenido de la pgina de administracin
<div

id="contenidoP">

<p> <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="905" height="65"> <!Elemento exportado de flash cs5, en este caso es el banner titulado administracin --> <param name="movie" value="Imagenes/baners/baner_administracion.swf" /> <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <param name="swfversion" value="6.0.65.0" />

17

Manual Tcnico: Pgina web

2012

<!-- Esta etiqueta indica a los usuarios de Flash Player 6.0 r65 o posterior que descarguen la versin ms reciente de Flash Player. Elimnela si no desea que los usuarios vean el mensaje. --> <param name="expressinstall" value="Scripts/expressInstall.swf" /> <!-- La siguiente etiqueta object es para navegadores distintos de IE. Ocltela a IE mediante IECC. --> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="Imagenes/baners/baner_administracion.swf" width="905" height="65"> <!--<![endif]--> <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <param name="swfversion" value="6.0.65.0" /> <param name="expressinstall" value="Scripts/expressInstall.swf" /> <!-- El navegador muestra el siguiente contenido alternativo para usuarios con Flash Player 6.0 o versiones anteriores. --> <div> <h4>El contenido de esta pgina requiere una versin ms reciente de Adobe Flash Player.</h4> <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Obtener Adobe Flash Player" width="112" height="33" /></a></p> </div> <!--[if !IE]>--> </object> <!--<![endif]--> </object> </p> <table width="904" cellspacing="50"> <tr> <td width="800" height="346" valign="top"><h1>Objetivo</h1> <p style="text-align:justify;"><span style="font-size:15.0pt; color:black; ">Llevar un control de los recursos humanos, materiales y financieros con que cuenta la institucin.</span></p>

18

Manual Tcnico: Pgina web

2012

<p style="text-align:justify;"><span style="font-size:15.0pt; color:black; ">Dentro de las actividades de la administracin se encuentran las de elaborar y presentar un presupuesto anual de operaciones para el desarrollo de las actividades de la biblioteca; supervisar que la entrega de suministros a las diferentes reas sea oportuna y adecuada a sus necesidades; analizar peridicamente el ejercicio del presupuesto y supervisar y controlar las actividades y asistencias del personal.</span></p> <p style="text-align:justify;">&nbsp;</p></td> </tr> </table> <p>&nbsp; </p> <p>&nbsp; </p> </div> </div> ////////////////////////////////////////// Termina cdigo de la pgina de administracin

A excepcin de la pgina de localizacin dentro del submen acerca de, las pginas de misin y visin e historia comparten cdigos similares, el cdigo de localizacin se muestra a continuacin: Cdigo del contenido de la pgina de localizacin
<div id="contenidoP"> <p> <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="905" height="85"> <param name="movie" value="Imagenes/baners/banner_localizacion.swf" /> <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <param name="swfversion" value="6.0.65.0" /> <!-- Esta etiqueta param indica a los usuarios de Flash Player 6.0 r65 o posterior que descarguen la versin ms reciente de Flash Player. Elimnela si no desea que los usuarios vean el mensaje. --> <param name="expressinstall" value="Scripts/expressInstall.swf" /> <!-- La siguiente etiqueta object es para navegadores distintos de IE. Ocltela a IE mediante IECC. --> <!--[if !IE]>-->

19

Manual Tcnico: Pgina web

2012

<object type="application/x-shockwave-flash" data="Imagenes/baners/banner_localizacion.swf" width="905" height="85"> <!--<![endif]--> <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <param name="swfversion" value="6.0.65.0" /> <param name="expressinstall" value="Scripts/expressInstall.swf" /> <!-- El navegador muestra el siguiente contenido alternativo para usuarios con Flash Player 6.0 o versiones anteriores. --> <div> <h4>El contenido de esta pgina requiere una versin ms reciente de Adobe Flash Player.</h4> <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Obtener Adobe Flash Player" width="112" height="33" /></a></p> </div> <!--[if !IE]>--> </object> <!--<![endif]--> </object> </p> <table width="800" height="705" border="0" cellspacing="25"> <tr> <td width="779" height="118" valign="top">Calz. del Grillo 100 Complejo Vial Quebradillas <br /> Zona Centro<br /> CP 98000, Zacatecas, Zacatecas<br /> Tels. (492) 924 05 62<br /> Fax 922 59 29</td> </tr> <tr>

20

Manual Tcnico: Pgina web


<td height="509" valign="top"><p>

2012

<!Herramienta interactia iframe, contiene un elemento web llamado google maps con la ubicacin satelital actual de la biblioteca --> <iframe width="830" height="430 " frameborder="0" scrolling="No" marginheight="0" marginwidth="0" src="http://maps.google.com.mx/maps?f=q&amp;source=s_q&amp;hl=es&amp;geocode=&amp;q=Bibliotec a+Mauricio+Magdaleno&amp;aq=&amp;sll=22.782038,102.584667&amp;sspn=0.019111,0.024762&amp;ie=UTF8&amp;hq=Biblioteca+Mauricio+Magdaleno&am p;ll=22.776435,-102.580985&amp;spn=0.020576,0.032015&amp;output=embed"></iframe> <br /> <small><a href="http://maps.google.com.mx/maps?f=q&amp;source=embed&amp;hl=es&amp;geocode=&amp;q=Bibli oteca+Mauricio+Magdaleno&amp;aq=&amp;sll=22.782038,102.584667&amp;sspn=0.019111,0.024762&amp;ie=UTF8&amp;hq=Biblioteca+Mauricio+Magdaleno&am p;ll=22.776435,-102.580985&amp;spn=0.020576,0.032015" style="color:#0000FF;text-align:left">Ver mapa ms grande</a></small></p></td> </tr> </table> <p><br /> </p> <p>&nbsp; </p> <p>&nbsp; </p> </div> ////////////////////////////////////////// Termina cdigo de la pgina de localizacin

Por su parte la pgina galera de imgenes, mostrada en la imagen 03, contiene enlaces a eventos o conmemoraciones destacadas, hasta el momento existen tres galeras las que muestra el sitio web, conmemoracin del da nacional del libro, presentacin del libro Zacatecas y Tlaxcala en la revolucin mexicana, conferencia conmemorativa a la revolucin mexicana. A continuacin se muestra el cdigo de la pgina de galeras.

21

Manual Tcnico: Pgina web


Cdigo de galera de imgenes
<div id="contenidoP"> <p>

2012

<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="910" height="85"> <param name="movie" value="Imagenes/baners/banner_galeria.swf" /> <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <param name="swfversion" value="6.0.65.0" /> <!-- Esta etiqueta param indica a los usuarios de Flash Player 6.0 r65 o posterior que descarguen la versin ms reciente de Flash Player. Elimnela si no desea que los usuarios vean el mensaje. --> <param name="expressinstall" value="Scripts/expressInstall.swf" /> <!-- La siguiente etiqueta object es para navegadores distintos de IE. Ocltela a IE mediante IECC. --> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="Imagenes/baners/banner_galeria.swf" width="910" height="85"> <!--<![endif]--> <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <param name="swfversion" value="6.0.65.0" /> <param name="expressinstall" value="Scripts/expressInstall.swf" /> <!-- El navegador muestra el siguiente contenido alternativo para usuarios con Flash Player 6.0 o versiones anteriores. --> <div> <h4>El contenido de esta pgina requiere una versin ms reciente de Adobe Flash Player.</h4> <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Obtener Adobe Flash Player" width="112" height="33" /></a></p> </div>

22

Manual Tcnico: Pgina web


<!--[if !IE]>--> </object> <!--<![endif]--> </object> </p> <div align="justify"> <table width="894" height="666" border="0"> <tr> <td width="289" align="center" valign="top"><p> <img src="Imagenes/ednl_01.jpg" alt="" width="219" height="179" border="0" align="right" usemap="#Map9" /> <map name="Map9" id="Map9">

2012

<!Enlace a la pgina que muestra la galera referente a da libro, mediante una zona interactiva, vinculo al dar click --> <area shape="rect" coords="-2,6,218,186" href="dia_libro.html" target="_self" /> </map> </p> <! Espacios en blanco --> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p><img src="Imagenes/zact_1.png" alt="" width="214" height="181" border="0" align="right" usemap="#Map9Map" /> <map name="Map9Map" id="Map9Map"> <!Enlace a la pgina que muestra la galera referente a zacatecas y tlaxcala, mediante una zona interactiva, vinculo al dar click --> <area shape="rect" coords="-4,2,218,178" href="zac_tlax.html" />

23

Manual Tcnico: Pgina web


</map> </p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p><img src="Imagenes/imgcrm10_07.jpg" alt="" width="214" height="181" border="0" align="right" usemap="#Map9MapMap" /> <map name="Map9MapMap" id="Map9MapMap">

2012

<!Enlace a la pgina que muestra la galera referente a conferencia revolucin mexicana mediante una zona interactiva, vinculo al dar click --> <area shape="rect" coords="-5,2,214,183" href="conf_rev.html" /> </map> </p></td> <td width="595" align="left" valign="top"><blockquote> <blockquote> <h1> <strong><span style="line-height:115%; font-size:15.0pt; color:#61271A; font-weight:normal; ">Conmemoracin del &quot;Da Nacional del Libro 2010&quot;</span></strong><span style="fontsize:15.0pt; "> </span></h1> <p class="MsoNormal" style="text-align:justify;"><span style="line-height:115%; font-family:'Times New Roman','serif'; font-size:15.0pt; color:black; ">Conferencia de la historia del libro por Mtra. Josefina Snchez Nava</span><span style="font-family:'Times New Roman','serif'; font-size:15.0pt; color:black; "><br /> - Noviembre de 2010.</span></p> <p class="MsoNormal" style="text-align:justify;">&nbsp;</p> <p class="MsoNormal" style="text-align:justify;">&nbsp;</p> <p class="MsoNormal" style="text-align:justify;">&nbsp;</p> <h1><strong><span style="line-height:115%; font-size:15.0pt; color:#61271A; font-weight:normal; ">Presentacin del libro &quot;Zacatecas y Tlaxcala en la Revolucin Mexicana&quot;</span></strong><span style="color:#61271A; "> </span></h1>

24

Manual Tcnico: Pgina web

2012

<p style="text-align:justify;"><span style="font-size:15.0pt; color:black; ">- Noviembre de 2010</span></p> <p class="MsoNormal" style="text-align:justify;">&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <! Solo texto y posicionamiento dentro del contenido de la pagina -->

<h1><strong><span style="line-height:115%; font-size:15.0pt; color:#61271A; font-weight:normal; ">Conferencia conmemorativa a la Revolucin Mexicana &quot;Zacatecas y la Revolucin Mexicana</span></strong></h1> <p><span style="font-size:15.0pt; color:black; ">Conferencista: Bernardo del Hoyo<br /> - Noviembre de 2010.</span></p> </blockquote> </blockquote> <p>&nbsp;</p></td> </tr> </table> <h1>&nbsp;</h1> </div> ////////////////////////////////////////// Termina cdigo de la pgina de galera de imgenes

El cdigo para las galeras de los eventos se muestra a continuacin, compartiendo la misma interfaz usuario, slo cambiaran obviamente la galera a la que haga referencia y las imgenes. Cdigo de galera da libro
<div id="contenidoP"> <p> <!Importamos a la pgina archivo del tipo swf o bien ejecutable de una aplicacin hecha en flash cs5, en este caso en un banner --> <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="905" height="85">

25

Manual Tcnico: Pgina web


<param name="movie" value="Imagenes/baners/banner_galeria.swf" /> <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <param name="swfversion" value="6.0.65.0" /> <param name="expressinstall" value="Scripts/expressInstall.swf" />

2012

<!-- La siguiente etiqueta object es para navegadores distintos de IE. Ocltela a IE mediante IECC. --> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="Imagenes/baners/banner_galeria.swf" width="905" height="85"> <!--<![endif]--> <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <param name="swfversion" value="6.0.65.0" /> <param name="expressinstall" value="Scripts/expressInstall.swf" /> <!-- El navegador muestra el siguiente contenido alternativo para usuarios con Flash Player 6.0 o versiones anteriores. --> <div> <h4>El contenido de esta pgina requiere una versin ms reciente de Adobe Flash Player.</h4> <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Obtener Adobe Flash Player" width="112" height="33" /></a></p> </div> <!--[if !IE]>--> </object> <!--<![endif]--> </object> </p> <p> <!-- Despus de un salto de lnea importamos la galera tambin .swf es decir tambin fue realizada en flash cs5 . -->

26

Manual Tcnico: Pgina web

2012

<object id="FlashID2" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="905" height="600"> <param name="movie" value="animaciones/galeria_villa.swf" /> <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <param name="swfversion" value="6.0.65.0" /> <!-- Esta etiqueta indica a los usuarios de Flash Player 6.0 r65 o posterior que descarguen la versin ms reciente de Flash Player. Elimnela si no desea que los usuarios vean el mensaje. --> <param name="expressinstall" value="Scripts/expressInstall.swf" /> <!-- La siguiente etiqueta object es para navegadores distintos de IE. Ocltela a IE mediante IECC. --> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="animaciones/galeria_villa.swf" width="905" height="600"> <!--<![endif]--> <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <param name="swfversion" value="6.0.65.0" /> <param name="expressinstall" value="Scripts/expressInstall.swf" /> <!-- El navegador muestra el siguiente contenido alternativo para usuarios con Flash Player 6.0 o versiones anteriores. --> <div> <h4>El contenido de esta pgina requiere una versin ms reciente de Adobe Flash Player.</h4> <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Obtener Adobe Flash Player" width="112" height="33" /></a></p> </div> <!--[if !IE]>--> </object> <!--<![endif]-->

27

Manual Tcnico: Pgina web


</object> </p> </div>

2012

//////////////////////////Termina cdigo de galera de da libro Para las pginas derivadas de galera.html: Zacatecas y Tlaxcala en la revolucin mexicana y conferencia conmemorativa a la revolucin mexicana. El cdigo es similar solo varia en la galera a la q hagan referencia.
|

Imagen 03: Pgina galera de imgenes

Barra de navegacin global

Acerca de la barra de navegacin global: alberga las pginas de inicio, servicios, actividades, niveles y material bibliogrfico. La pgina de inicio (Ver fig. imagen 04) solo contiene informacin a modo de texto y un banner de inicio o bienvenida para el usuario. El cdigo se muestra a continuacin.

28

Manual Tcnico: Pgina web


Cdigo de la pgina de inicio
<div id="contenidoP"> <p>&nbsp; <p> </p>

2012

<!Se importa a pagina banner de bienvenida para el usuario desarrollado en la herramienta flash cs5 . --> <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="842" height="350"> <param name="movie" value="Imagenes/baners/banner.swf" /> <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <param name="swfversion" value="6.0.65.0" /> <param name="expressinstall" value="Scripts/expressInstall.swf" /> <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. --> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="Imagenes/baners/banner.swf" width="842" height="350"> <!--<![endif]--> <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <param name="swfversion" value="6.0.65.0" /> <param name="expressinstall" value="Scripts/expressInstall.swf" /> <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -> <div> <h4>Content on this page requires a newer version of Adobe Flash Player.</h4> <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>

29

Manual Tcnico: Pgina web


</div> <!--[if !IE]>--> </object> <!--<![endif]--> </object> </p> <!Uso de regla contenidoT, para mostrar la informacin desplegada en texto . --> <div id="contenidoT">

2012

<p class="MsoNormal" style="text-align:justify;text-justify:inter-ideograph;"><span style="fontfamily:'Times New Roman'; ">En las Tecnologas de la Informacin y la Comunicacin (TICs), la globalizacin, las transformaciones vertiginosas que ocurren en la sociedad, nos plantean la necesidad de un profundo cambio en las actividades y servicios que se realizan en la Biblioteca Pblica, de ah, la importancia de promover un nuevo &quot;modelo bibliotecario&quot;, mismo que se oferte como una alternativa a las diferentes necesidades de informacin, recreacin y formacin de la sociedad en general.&nbsp; Modelo que tiene como eje tres elementos fundamentales: espacios dignos, informacin general en texto, virtual y digital,&nbsp; as como la preparacin permanente del personal, todo ello con el objetivo imprescindible de colaborar en el desarrollo socio-cultural de la comunidad.</span></p> <p class="MsoNormal" style="text-align:justify;text-justify:inter-ideograph;"><span style="fontfamily:'Times New Roman'; ">Por este conducto, les damos la ms cordial bienvenida a&nbsp; este centro bibliotecario&nbsp; &quot;Mauricio Magdaleno&quot; mismo que por decreto de ley, a partir de marzo de 1986,&nbsp; se establece como biblioteca pblica central estatal, sirviendo como modelo para las 233 bibliotecas que actualmente conforman la red estatal de Zacatecas y cuya coordinacin tiene su sede tambin en este edificio.</span></p> <p class="MsoNormal" style="text-align:justify;text-justify:inter-ideograph;"><span style="fontfamily:'Times New Roman'; ">Mauricio Magdaleno destaca en la crnica periodstica, la novela, el teatro, el ensayo, el guin cinematogrfico y en cuadros histricos cargados de riqueza verbal.&nbsp; El resplandor, la ms famosa de sus obras, de inters social, supera a las novelas de su tiempo, por su trama slida, sus personajes humanos y su estilo eficaz.</span></p> <p class="MsoNormal" style="text-align:justify;text-justify:inter-ideograph;"><span style="fontfamily:'Times New Roman'; ">Fue autor y guionista de pelculas que formaron parte de la poca de oro del cine mexicano, cintas como: El compadre Mendoza, Flor silvestre, Mara Candelaria, Las abandonadas, Bugambilia, Pueblerina, La malquerida, Ro Escondido, Maclovia, Un da de vida y La rosa blanca, donde muestra hechos sociales y las pasiones del medio rural de Mxico. </span></p> <p class="MsoNormal" style="text-align:justify;text-justify:inter-ideograph;"><span style="fontfamily:'Times New Roman'; ">Finalmente, les hacemos una cordial invitacin para que conozcan nuestras instalaciones, actividades y&nbsp; servicios, as como la vida y obra de este y todas las y los personajes zacatecanos, mismos que con sus obras&nbsp; han dado gloria a nuestro estado.</span></p>

30

Manual Tcnico: Pgina web

2012

<p class="MsoNormal" align="center" style="text-align:center;"><span style="font-family:'Times New Roman'; ">Los esperamos con los libros abiertos!</span></p> <p class="MsoNormal" align="center" style="text-align:center;"><span style="font-family:'Times New Roman'; ">Atentamente</span></p> <p class="MsoNormal" align="center" style="text-align:center;"><span style="font-family:'Times New Roman'; font-size: 12pt;">Profr. Eduardo Mendoza Villalpando<br /> <br /> Coordinador Estatal de Bibliotecas</span><span style="font-family:'Times New Roman'; font-size: 12pt;"> </span></p> </div> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> </div> ////////////////////// Termina cdigo de pgina de inicio

Imagen 04: Pgina de inicio o bienvenida para el usuario.

31

Manual Tcnico: Pgina web

2012

La pgina de servicios (Ver imagen 05) contiene dos elementos principales, el texto y las imgenes, sin olvidar el banner superior que indica la pagina actual. Cdigo de la pgina de servicios
<div id="contenidoP"> <div align="justify"> <p> <!Al iniciar el contenido de la pgina de servicios se a importado el banner correspondiente a servicios para indicarle al usuario en que pgina se encuentra-->

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="908" height="85" id="FlashID" title="video_servicios"> <param name="movie" value="Imagenes/baners/banner_servicios.swf" /> <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <param name="swfversion" value="6.0.65.0" /> <!-- Esta etiqueta indica a los usuarios de Flash Player 6.0 r65 o posterior que descarguen la versin ms reciente de Flash Player. Elimnela si no desea que los usuarios vean el mensaje. --> <param name="expressinstall" value="Scripts/expressInstall.swf" /> <!-- La siguiente etiqueta object es para navegadores distintos de IE. Ocltela a IE mediante IECC. --> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="Imagenes/baners/banner_servicios.swf" width="908" height="85"> <!--<![endif]--> <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <param name="swfversion" value="6.0.65.0" /> <param name="expressinstall" value="Scripts/expressInstall.swf" /> <!-- El navegador muestra el siguiente contenido alternativo para usuarios con Flash Player 6.0 o versiones anteriores. --> <div>

32

Manual Tcnico: Pgina web

2012

<h4>El contenido de esta pgina requiere una versin ms reciente de Adobe Flash Player.</h4> <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Obtener Adobe Flash Player" width="112" height="33" /></a></p> </div> <!--[if !IE]>--> </object> <!--<![endif]--> </object> </p> <!Con ayuda de la etiqueta aling centramos el contenido de la tabla que contendr las imgenes y el texto de cada servicio --> <div align="center"> <!Ayudados de una tabla alineamos cada imagen, referente a cada servicio, con la descripcin del servicio de la biblioteca--> <table width="845" height="950" border="0"> <tr> <td width="328" height="919" valign="top"><table width="879" height="1053" border="0"> <tr> <td width="328" height="1049" valign="top"><p>&nbsp;</p> <p>&nbsp;</p> <p><img src="Imagenes/plant_vista_guiada.png" width="328" height="162" alt="img_visi" /></p> <p>&nbsp;</p> <p>&nbsp;</p> <p><img src="Imagenes/plant_prestamo.png" width="328" height="162" alt="img_prestamo" /></p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p><img src="Imagenes/plant_fotocopiado.png" width="328" height="162" alt="img_foto" /></p>

33

Manual Tcnico: Pgina web


<p>&nbsp;</p>

2012

<p><img src="Imagenes/plant_guardarropa.png" width="328" height="162" alt="img_guarda" /></p> <p>&nbsp;</p></td> <!Descripcin de los objetivos para cada servicio--> <td width="541" valign="top"><h1>Objetivos</h1> <p class="MsoNormal" style="text-align:justify;"><span style="line-height:115%; fontfamily:'Times New Roman','serif'; font-size:12.0pt; ">Atraer ms usuarios mediante la demostracin de las ventajas que tiene el uso habitual de la biblioteca; adems de despertar en ellos el inters por el estudio, la recreacin y la solucin de problemas cotidianos.</span></p> <p class="MsoNormal" style="text-align:justify;"><span style="font-family:'Times New Roman','serif'; font-size:12.0pt; ">Durante el trayecto de la visita guiada, los asistentes podrn obtener informacin de los servicios que proporciona la biblioteca, as como la localizacin del material, con la finalidad de realizar una consulta rpida y eficaz; conocer los requisitos necesarios para poder hacer uso de los materiales y el reglamento y el horario de servicio de la biblioteca. Durante la visita se hace la invitacin a quienes participan en la misma a que formen parte de las actividades culturales y recreativas, as como de las acciones de fomento al hbito a la lectura que se realizan constantemente en la biblioteca.</span></p> <p class="MsoNormal" style="text-align:justify;line-height:normal;">&nbsp;</p> <p class="MsoNormal" style="text-align:justify;line-height:normal;"><span style="fontfamily:'Times New Roman','serif'; font-size:12.0pt; ">Proporcionar al usuario para mayor comodidad del mismo, el servicio de prstamo a domicilio de las distintas colecciones susceptibles de este servicio:</span></p> <p class="MsoNormal" style="text-align:justify;line-height:normal;"><span style="fontfamily:'Times New Roman','serif'; font-size:12.0pt; ">Coleccin General, Infantil.</span></p> <p class="MsoNormal" style="text-align:justify;line-height:normal;"><span style="font-family:'Times New Roman','serif'; font-size:12.0pt; ">Requisitos para tramitar credencial de prstamo a domicilio:</span></p> <p class="MsoNormal" style="text-align:justify;line-height:normal;"><span style="fontfamily:'Times New Roman','serif'; font-size:12.0pt; "> &gt; Dos fotografas tamao infantil.</span></p> <p class="MsoNormal" style="text-align:justify;line-height:normal;"><span style="fontfamily:'Times New Roman','serif'; font-size:12.0pt; "> &gt; Comprobante de domicilio (recibo de agua, luz o telfono).</span></p> <p class="MsoNormal" style="text-align:justify;line-height:normal;"><span style="fontfamily:'Times New Roman','serif'; font-size:12.0pt; "> &gt;El o la solicitante deber presentar a una persona mayor de 18 aos como fiador.</span></p> <p class="MsoNormal" style="text-align:justify;line-height:normal;">&nbsp;</p> <p>&nbsp;</p>

34

Manual Tcnico: Pgina web


<p>&nbsp;</p>

2012

<p><span style="font-family:'Times New Roman','serif'; font-size:12.0pt; ">Proporcionar a los usuarios el servicio de fotocopiado sin que estos tengan que salir de las instalaciones de la biblioteca, con el fin de brindarles una mayor comodidad.</span></p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p><span style="font-family:'Times New Roman','serif'; font-size:12.0pt; ">Resguardar los bienes pertenecientes a los usuarios por el tiempo que se encuentren dentro de las instalaciones de la biblioteca.</span></p> <p>&nbsp;</p></td> </tr> </table></td> </tr> </table> </div> ///////////////////// Termina cdigo de la pgina de servicios

Imagen 05: Vista usuario de la pgina de servicios.

35

Manual Tcnico: Pgina web

2012

Para la pgina de actividades an no se han solicitado cambios, ni actualizacin de estado es por ello q no hay contenido. Por el contrario la pgina de niveles contienen un mapa, con las salas de la biblioteca organizadas por niveles (ver imagen 06). Al pasar sobre algn nivel se desplegarn las salas de cada nivel, para que el usuario entre a la que dese bastara con dar click en alguna opcin del men referente a cada nivel; estas pginas tienen como finalidad informar de lo que el usuario podr encontrar en cada sala y algunas imgenes del material o instalaciones con las que cuenta la sala visitada.

Imagen 06: Vista usuario para la pgina de niveles. A continuacin se muestra el cdigo HTML de la pgina de niveles. Cdigo de la pgina de niveles
<div id="contenidoP"> <p> <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="905" height="85"> <param name="movie" value="Imagenes/baners/banner_niveles.swf" /> <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <param name="swfversion" value="6.0.65.0" />

36

Manual Tcnico: Pgina web


<param name="expressinstall" value="Scripts/expressInstall.swf" />

2012

<object type="application/x-shockwave-flash" data="Imagenes/baners/banner_niveles.swf" width="905" height="85"> <!--<![endif]--> <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <param name="swfversion" value="6.0.65.0" /> <param name="expressinstall" value="Scripts/expressInstall.swf" /> <div> <h4>Content on this page requires a newer version of Adobe Flash Player.</h4> <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p> </div> </object> </object> </p> <div id="contenidoT"> <!Elemento grfico que contiene el mapa de navegacin de cada enlace de los niveles de la biblioteca --> <div id="FWTableContainer397754774"> <img name="mapaN" src="Imagenes/mapa/mapaN.jpg" width="751" height="324" border="0" id="mapaN" usemap="#m_mapaN" alt="" /> <!Haciendo referencia hacia el men de navegacin en este caso mapaN para vincular la funcin anterior -> <map name="m_mapaN" id="m_mapaN"> <area shape="rect" coords="544,154,720,192" href="javascript:;" alt="" onmouseout="MM_menuStartTimeout(100);" onmouseover="MM_menuShowMenu('MMMenuContainer0521224046_0', 'MMMenu0521224046_0',195,154,'mapaN');" /> <area shape="rect" coords="508,195,721,230" href="javascript:;" alt="" onmouseover="MM_menuShowMenu('MMMenuContainer0521224046_1', 'MMMenu0521224046_1',175,194,'mapaN');" onmouseout="MM_menuStartTimeout(100);" />

37

Manual Tcnico: Pgina web


<area shape="rect" coords="8,178,295,212" href="javascript:;" alt="" onmouseout="MM_menuStartTimeout(100);" onmouseover="MM_menuShowMenu('MMMenuContainer0521224046_2', 'MMMenu0521224046_2',295,178,'mapaN');" /> <area shape="rect" coords="8,137,295,176" href="javascript:;" alt="" onmouseout="MM_menuStartTimeout(100);" onmouseover="MM_menuShowMenu('MMMenuContainer0521224046_3', 'MMMenu0521224046_3',295,137,'mapaN');" /> <area shape="rect" coords="8,96,295,135" href="javascript:;" alt="" onmouseout="MM_menuStartTimeout(100);" onmouseover="MM_menuShowMenu('MMMenuContainer0521224046_4', 'MMMenu0521224046_4',295,96,'mapaN');" /> </map> <div id="MMMenuContainer0521224046_0">

2012

<div id="MMMenu0521224046_0" onmouseout="MM_menuStartTimeout(100);" onmouseover="MM_menuResetTimeout();"> <a href="videoteca.html" id="MMMenu0521224046_0_Item_0" class="MMMIFVStyleMMMenu0521224046_0" onmouseover="MM_menuOverMenuItem('MMMenu0521224046_0');"> Sala&nbsp;de&nbsp;Videoteca </a> <a href="fomentolectura.html" id="MMMenu0521224046_0_Item_1" class="MMMIVStyleMMMenu0521224046_0" onmouseover="MM_menuOverMenuItem('MMMenu0521224046_0');"> &Aacute;rea&nbsp;de&nbsp;Fomento&nbsp;a&nbsp;la&nbsp;Lectura </a> <a href="zacatecasmapoteca.html" id="MMMenu0521224046_0_Item_2" class="MMMIVStyleMMMenu0521224046_0" onmouseover="MM_menuOverMenuItem('MMMenu0521224046_0');"> Colecci&oacute;n&nbsp;Zacatecas&nbsp;y&nbsp;Mapoteca </a> <a href="salainegi.html" id="MMMenu0521224046_0_Item_3" class="MMMIVStyleMMMenu0521224046_0" onmouseover="MM_menuOverMenuItem('MMMenu0521224046_0');"> Sala&nbsp;de&nbsp;INEGI&nbsp; </a> <a href="periodicas.html" id="MMMenu0521224046_0_Item_4" class="MMMIVStyleMMMenu0521224046_0" onmouseover="MM_menuOverMenuItem('MMMenu0521224046_0');"> Publicaciones&nbsp;Peri&oacute;dicas </a> </div> </div> <div id="MMMenuContainer0521224046_1"> <div id="MMMenu0521224046_1" onmouseout="MM_menuStartTimeout(100);" onmouseover="MM_menuResetTimeout();"> <a href="recepcion.html" id="MMMenu0521224046_1_Item_0" class="MMMIFVStyleMMMenu0521224046_1" onmouseover="MM_menuOverMenuItem('MMMenu0521224046_1');"> Sala&nbsp;de&nbsp;Recepci&oacute;n </a> <a href="invidentes.html" id="MMMenu0521224046_1_Item_1" class="MMMIVStyleMMMenu0521224046_1" onmouseover="MM_menuOverMenuItem('MMMenu0521224046_1');"> Sala&nbsp;de&nbsp;Invidentes </a> <a href="serviciosdigitales.html" id="MMMenu0521224046_1_Item_2"

38

Manual Tcnico: Pgina web


class="MMMIVStyleMMMenu0521224046_1" onmouseover="MM_menuOverMenuItem('MMMenu0521224046_1');"> M&oacute;dulos&nbsp;de&nbsp;Servicios&nbsp;Digitales </a> <a href="encuadernacion.html" id="MMMenu0521224046_1_Item_3" class="MMMIVStyleMMMenu0521224046_1" onmouseover="MM_menuOverMenuItem('MMMenu0521224046_1');"> &Aacute;rea&nbsp;de&nbsp;Encuadernaci&oacute;n </a> </div> </div> <div id="MMMenuContainer0521224046_2">

2012

<div id="MMMenu0521224046_2" onmouseout="MM_menuStartTimeout(100);" onmouseover="MM_menuResetTimeout();"> <a href="salainfantil.html" id="MMMenu0521224046_2_Item_0" class="MMMIFVStyleMMMenu0521224046_2" onmouseover="MM_menuOverMenuItem('MMMenu0521224046_2');"> Sala&nbsp;Infantil </a> <a href="salainfantil.html" id="MMMenu0521224046_2_Item_1" class="MMMIVStyleMMMenu0521224046_2" onmouseover="MM_menuOverMenuItem('MMMenu0521224046_2');"> &Aacute;rea&nbsp;de&nbsp;Ludoteca </a> <a href="proyecciones.html" id="MMMenu0521224046_2_Item_2" class="MMMIVStyleMMMenu0521224046_2" onmouseover="MM_menuOverMenuItem('MMMenu0521224046_2');"> Sala&nbsp;de&nbsp;proyecciones&nbsp; </a> <a href="procesostecnicos.html" id="MMMenu0521224046_2_Item_3" class="MMMIVStyleMMMenu0521224046_2" onmouseover="MM_menuOverMenuItem('MMMenu0521224046_2');"> &Aacute;rea&nbsp;de&nbsp;Procesos&nbsp;F&iacute;sicos&nbsp;y&nbsp;T&eacute;cnicos </a> </div> </div> <div id="MMMenuContainer0521224046_3"> <div id="MMMenu0521224046_3" onmouseout="MM_menuStartTimeout(100);" onmouseover="MM_menuResetTimeout();"> <a href="salaconsulta.html" id="MMMenu0521224046_3_Item_0" class="MMMIFVStyleMMMenu0521224046_3" onmouseover="MM_menuOverMenuItem('MMMenu0521224046_3');"> Sala&nbsp;de&nbsp;Consulta </a> <a href="salageneral.html" id="MMMenu0521224046_3_Item_1" class="MMMIVStyleMMMenu0521224046_3" onmouseover="MM_menuOverMenuItem('MMMenu0521224046_3');"> Sala&nbsp;General </a> </div> </div> <div id="MMMenuContainer0521224046_4"> <div id="MMMenu0521224046_4" onmouseout="MM_menuStartTimeout(100);" onmouseover="MM_menuResetTimeout();"> <a href="serviciosbibliotecarios.html" id="MMMenu0521224046_4_Item_0" class="MMMIFVStyleMMMenu0521224046_4" onmouseover="MM_menuOverMenuItem('MMMenu0521224046_4');"> Servicios&nbsp;Bibliotecarios </a> <a href="proyectosprofe.html" id="MMMenu0521224046_4_Item_1" class="MMMIVStyleMMMenu0521224046_4" onmouseover="MM_menuOverMenuItem('MMMenu0521224046_4');"> Sala&nbsp;de&nbsp;Elaboraci&oacute;n&nbsp;de&nbsp;Proyectos&nbsp;Profesionales&nbsp; </a> <a

39

Manual Tcnico: Pgina web

2012

href="hemeroteca.html" id="MMMenu0521224046_4_Item_2" class="MMMIVStyleMMMenu0521224046_4" onmouseover="MM_menuOverMenuItem('MMMenu0521224046_4');"> Hemeroteca&nbsp; </a> </div> </div> </div> <h1 align="center" style="text-align:center;"><span style="font-family:'Times New Roman'; font-size: 12pt;"><br /> <br /> </span></h1> </div> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> </div> //////// ///// Termina cdigo de niveles

Las pginas referentes a la sala de cada nivel son similares en cdigo, en general, cada pgina habla de lo que el usuario encontrar en cada sala y muestra si el usuario lo elige una galera con imgenes destacadas de cada sala (ver figura 7).

Imagen 07: Vista de usuario para la pgina de recepcin

40

Manual Tcnico: Pgina web


<div id="contenidoP"> <p>

2012

<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="915" height="85"> <param name="movie" value="Imagenes/baners/baner_n1_recepcion.swf" /> <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <param name="swfversion" value="6.0.65.0" /> <param name="expressinstall" value="../PaginaProyecto/Scripts/expressInstall.swf" /> <!-- La siguiente etiqueta object es para navegadores distintos de IE. Ocltela a IE mediante IECC. --> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="Imagenes/baners/baner_n1_recepcion.swf" width="915" height="85"> <!--<![endif]--> <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <param name="swfversion" value="6.0.65.0" /> <param name="expressinstall" value="../PaginaProyecto/Scripts/expressInstall.swf" /> <!-- El navegador muestra el siguiente contenido alternativo para usuarios con Flash Player 6.0 o versiones anteriores. --> <div> <h4>El contenido de esta pgina requiere una versin ms reciente de Adobe Flash Player.</h4> <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Obtener Adobe Flash Player" width="112" height="33" /></a></p> </div> <!--[if !IE]>--> </object> <!--<![endif]--> </object>

41

Manual Tcnico: Pgina web


</p>

2012

<p> <img src="Imagenes/nieveles/niveles optimizados/reception.gif" width="100" height="100" hspace="20" align="right" /></p> <table width="745" height="354" border="0"> <tr> <td height="100" valign="top"> <h2>Objetivo</h2> <!-- Descripcin de lo que contiene cada sala --> <p>Es el primer contacto que tiene el usuario con la biblioteca y su objetivo es registrar el acceso de las y los usuarios que son atendidos para realizar el concentrado de los datos y as elaborar estadsticas que permitirn evaluar la calidad en la atencin que se brinda y dar asesora a usuari@s sobre los diferentes servicios que proporciona la institucin. </p> <!-- Bloque de espacios en blanco --> <blockquote> <blockquote>&nbsp;</blockquote> </blockquote> </blockquote></td> </tr> </table> <!-- Enlace a galera de imgenes de la sala, en este caso imgenes de la sala de consulta general. --> <p><a href="galeryniv1.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('btngaleria1_r1_c1_s1','','Imagenes/boton galeria/btngaleria1_r1_c1_s2.jpg',1);"><img src="Imagenes/boton galeria/btngaleria1_r1_c1_s1.jpg" alt="" name="btngaleria1_r1_c1_s1" width="263" height="70" border="0" align="absmiddle" id="btngaleria1_r1_c1_s1" /></a></p> </div> //////////////////////// Termina cdigo de la la pgina para consulta general. <blockquote>

42

Manual Tcnico: Pgina web


Mantenimiento.

2012

A continuacin se explicara en forma breve como fueron realizadas algunos elementos multimedia que conforman al sitio web, sobre todo se hace nfasis en las galeras de imgenes, banners y botones con efecto Rollover. Directorios y subdirectorios del sitio.

El sitio en su totalidad se encuentra hospedado por el momento en el directorio bpmm2, siendo el nombre del dominio principal bpmm.cebpzac.gob.mx. La vista actual de archivos en el servidor comprende 42 archivos y 3 directorios, con un tamao aproximado de almacenamiento de 683,453 bytes. (Ver imagen 08).

Imagen 08: vista de archivos y directorios en el servidor. En la imagen 08 se ilustra la distribucin y el almacenamiento de archivos en el servidor, se cuenta con tres directorios de cabecera, para el almacenamiento de imgenes, animaciones y scripts. El directorio de animaciones a su vez se subdivide en salas y _notes o archivos de configuracin, el subdirectorio salas contiene a su vez 5 subdirectorios ms; donde estarn alojadas las galeras de imgenes de cada nivel de la biblioteca, (ver imagen 09).

43

Manual Tcnico: Pgina web

2012

Imagen 09: Directorio y subdirectorio de animaciones. Dentro del directorio animaciones, se encuentran las galeras de imgenes generales de la biblioteca, es decir aquellas que hacen referencia a la pgina de galeradeimgenes.html. Por su parte el directorio de imgenes ms complejo en su composicin, ya que en l estn alojadas en su totalidad las imgenes, y elementos grficos de la pagina web. Para fines prcticos solo se mencionaran directorios de importancia, para el posterior mantenimiento y modificaciones de la pgina.
Imagen 10: vista en el servidor de los subdirectorios y archivos del directorio imgenes

44

Manual Tcnico: Pgina web

2012

Dentro del subdirectorio banners, se encuentran los archivos de configuracin y de ejecucin de los banners de inicio de cada pgina, son en su mayora texto animado de bienvenida, ya sea con el ttulo de la pgina o bien con la palabra bienvenidos (solo en la pgina de inicio). Dentro de la carpeta imagenesOptimizadas (fondos), estn las imgenes referentes a los fondos de cada pagina html del sitio web. En el subdirectorio mapa, se encuentran los archivos para configurar el mapa de navegacin mostrado en el nivel 5. Galeras de Imgenes Acerca de las modificaciones para las galeras de imgenes recordemos que son tres galeras a las que vincula esta pgina web (ver imagen 03). Las galeras de conmemoracin al da del libro, presentacin del libro Zacatecas y Tlaxcala y conmemoracin al aniversario de la revolucin mexicana. El procedimiento para modificar estas galeras ya sea agregar imgenes o bien cambiar elementos grficos en ellas es el siguiente: Nota: se requiere contar la herramienta flash cs5 o posteriores.Acceder al directorio animaciones -> seleccionar archivo.fla a editar -> Abrir archivo.La imagen 11 muestra la interfaz grfica de la galera en la aplicacin de adobe flash cs5,

Imagen 11: Interfaz grfica al abrir una de las galeras de imgenes en el programa adobe flash cs5.

45

Manual Tcnico: Pgina web

2012

Como lo muestra la imagen 11 el desarrollo de la animacin de la galera de imgenes est dividido en fotogramas y capas de almacenamiento, ya sea de cdigo ASP3 (actionscript 3.0) o bien de elementos como botones, fondo, e imgenes. El proceso para la realizacin de la animacin fue el siguiente. 1. Creamos un actionscript 3 en adobe flash

2. Guardar la animacin a realizar, esto en el men archivo/guardar como

46

Manual Tcnico: Pgina web


3. Importar las imgenes a utilizar para la galera a biblioteca.

2012

4. Crear las capas de fondo, botones, imgenes y acciones.

47

Manual Tcnico: Pgina web

2012

5. Una vez importado las imgenes y creadas nuestras capas, lo que resta es modificar el tamao del lienzo a 800X600 px. Despus acotaremos lo largo de la animacin esto sealando en los fotogramas la duracin de la animacin. Para este caso el fondo que se eligi fue el negro as que tambin lo cambiaremos.

6. El paso siguiente es agregar cada imagen al fotograma que corresponde una por cada uno, es importante situarse sobre el fotograma, dar click secundario e insertar fotograma clave:

48

Manual Tcnico: Pgina web

2012

7. Ahora seleccionamos la capa de botn, agregamos las imgenes correspondientes (las que sern los botones) y las programamos como instancia de botn esto en el men propiedades.

Este paso no debe ser olvidado ya que en la programacin de las acciones recurriremos al nombre de instancia de este elemento para el funcionamiento de la galera. En este caso el nombre del botn es btn_sig, ya que es el botn para pasar a la siguiente imagen. 8. Una vez agregadas todas las imgenes que conformaran la galera y realizado el paso 7 en ambos botones, basta por programas las acciones. Esto ser el la capa de acciones situndonos en el fotograma 1 y dando click secundario en acciones, esto nos enviara al apartado de programacin de asp3.

49

Manual Tcnico: Pgina web

2012

9. La programacin ser mediante tres funciones principales: stop(). Esto para que no se rebobine la pelcula, addEventListener MouseEvent.CLICK, funcin para estar a la escucha de los botones con sus respectivos nombre de instancia. y event:MouseEvent o bien al que infiere el evento. El cdigo a continuacin.

Cuando terminemos de escribir este cdigo cerramos la ventana y presionamos ctrl+intro para probar la animacin. Esto exportara un archivo ejecutable .swf.

50

Manual Tcnico: Pgina web

2012

Al final si todo est bien veremos la pelcula y solo probamos que funcione.

Banners Los banners son de dos tipos para este sitio de encabezado y de bienvenida, solo en la pgina de inicio el banner difiere de los dems, esto en el proceso de su elaboracin. En la imagen siguiente muestra la vista grfica del banner de inicio en el programa adobe flash cs5.

51

Manual Tcnico: Pgina web

2012

Como ya se explico en el apartado galera de imgenes el proceso de desarrollo en flash es mediante fotogramas y capas de informacin para cada animacin. El proceso de elaboracin del banner fue el siguiente: 1. Importar a biblioteca la imagen que ser el fondo del banner. 2. Redimensionar el tamao del lienzo y el color de fondo para el banner. 3. Arrastrar a escenario la imagen que ser el fondo, es la nica que se encuentra en biblioteca. 4. Una vez hecho este proceso llamarle a esta capa fondo. 5. Despus agregar cuatro capas ms llamarlas texto1, texto2, texto3 y acciones. 6. Una vez creadas estas capas acotar la duracin de la pelcula, seleccionando el fotograma y dando click secundario para insertar fotograma clave. 7. Una vez acotada la duracin de la animacin creamos los textos donde queremos que inicio su recorrido (Nota: debe de estar seleccionada la capa que corresponda al texto a escribir). 8. Ahora debemos insertar a los fotogramas que contienes texto interpolacin clsica, esto es seleccionando el fotograma, despus click secundario crear interpolacin clsica. Este proceso es paras que simule movimiento cuando se le agregue un efecto de color.

52

Manual Tcnico: Pgina web

2012

9. El paso que sigue es agregar un efecto de color al texto nicamente en el fotograma 1 y en el fotograma final de la pelcula, esto para los tres elementos de texto (Ver imagen siguiente).

10. Para la misma capa repetimos el proceso, pero ahora para el fotograma final, ahora elegimos el alfa a 100%.

53

Manual Tcnico: Pgina web

2012

11. Los pasos 9 y 10 se hacen para todas las capas de texto. Despus de ello en la capa de acciones nos situamos en el ultimo fotograma, que coincide con las anteriores y abrimos el edito de programacin para poner stop(); esto con el fin de que no se rebobine mas la animacin.

54

Manual Tcnico: Pgina web

2012

12. Nuestro ltimo paso es presionar ctrl+intro para ver nuestra animacin y as exportar el archivo .swf.

Para los banners de encabezado de pginas el proceso fue similar, tambin fueron desarrollados en la aplicacin adobe flash cs5.

El procedimiento para elaborar los banners de encabezado fue similar al banner de bienvenida, los pasos para desarrollarlo son los siguientes: 1. Dimensionar lienzo y color de fondo a eleccin del diseador. 2. Importar a escenario los elementos grficos del banner.
55

Manual Tcnico: Pgina web

2012

3. Crear las capas de fondo, texto, barras (tanto superior como inferior, sern las que junto con el texto animaran el banner), y acciones. 4. Acotar la animacin e insertar fotogramas claves donde corresponda. 5. Crear interpolacin clsica para la capa de texto y barras. 6. Aplicar un efecto de color de tinta con un alfa de 0 para el fotograma 1 de la capa de texto. 7. Aplicar el efecto inverso al ltimo fotograma de la capa de texto, es decir alfa a 100% 8. Situarse en el ltimo fotograma de las capas correspondientes a las barras y moverlas hasta que coincidan con la base del banner, esto puede ser con las flechas de navegacin o simplemente con el mouse. Es importante que el texto no se mueva de las coordenadas de su primer fotograma al ultimo fotograma.

9. Despus solo resta ir a la capa de acciones, click secundario y agregar un stop();

56

Manual Tcnico: Pgina web

2012

10. Por ltimo solo presionamos ctrl+intro para probar nuestra animacin.

57

Manual Tcnico: Pgina web


Botones con Rollover

2012

Una caracterstica de la pgina es que muchos de los botones tienen rollover. Es decir, que cuando se acerca el puntero del ratn, cambian de color o de tonalidad. Hay dos formas de hacer botones con rollover, la primera es desde la aplicacin Adobe Fireworks y la segunda es desde el programa Adobe Dreamweaver. Desde Fireworks. Vamos a editar el botn regresar. Este botn est en la carpeta \Imagenes\button regresar, en esta carpeta hay dos imgenes .png y una carpeta. Vamos a crear este mismo botn desde 0 para explicar mejor el funcionamiento de un rollover. Para crear un rollover se necesitan dos imgenes. La primera es la imagen esttica que siempre se va a mostrar. Y la segunda es la imagen que va a intercambiarse cuando el puntero del ratn pasa cerca de la imagen anterior, una vez diseadas las imgenes abrimos Fireworks. Le ponemos importar e importamos la primera imagen.

Despus acortamos el lienzo lo ms pequeo posible y luego le quitamos el fondo.

58

Manual Tcnico: Pgina web

2012

Despus, en el panel de herramientas en la parte Izquierda, en la seccin web, seleccionamos la herramienta Divisin (k) e insertamos la divisin el toda la seccin donde queremos que se haga el rollover, en este caso como toda la imagen se va a cambiar, seleccionamos toda.

En el inspector de propiedades hay un panel que dice estados.

Justo en la parte de abajo hay una opcin que dice: Estado Nuevo/ Duplicado. Le damos clic. Como podremos observar al parecer se borr el dibujo. Pero no fue as, lo que ocurri fue que se cre un nuevo estado.

59

Manual Tcnico: Pgina web

2012

En este nuevo estado es donde se colocara la imagen de intercambio para el rollover. Se debe tener cuidado de colocar la imagen nueva en las mismas coordenadas que la anterior para que no se observe que cambia de posicin la imagen cuando se pasa el cursor cerca de ella Para agregar la nueva imagen se hace clic derecho en el rea de trabajo y luego en importar. Luego seleccionamos la imagen, damos aceptar y hacemos clic en el lienzo o rea de trabajo para insertarla. Se puede editar si se desea, por ejemplo se podra quitar el color de fondo. (Para volver a la imagen inicial se puede hacer clic en estado 1, y para regresar a esta, en estado 2).

60

Manual Tcnico: Pgina web

2012

Para comparar las coordenadas de la imagen con respecto a la primera. Vamos a estado 1, seleccionamos la imagen con la herramienta de seleccionar detrs, seleccionamos la pura imagen y luego checamos las coordenadas la imagen, que sean las mismas.

Luego, se hace clic con el botn secundario del ratn en la seccin verde del estado 1 y seleccionamos la opcin, aadir comportamiento de rollover simple. Despus vamos a Archivo>>Exportar y nos aparecer la siguiente ventana:
61

Manual Tcnico: Pgina web

2012

Verificamos que las opciones sean las mismas, ponemos un nombre al archivo HTML y exportamos el cdigo HTML, de preferencia a una carpeta vaca para no confundirse. Despus, para comprobar el funcionamiento, vamos a la carpeta y abrimos el archivo HTML y verificamos que haya funcionado, pasando el puntero del ratn cerca del botn. Si todo sali bien guardamos el botn con extensin .png y cada vez que queramos editar el rollover abrimos ese archivo y lo editamos. Y ah mismo podemos volver a exportar el botn a HTML. Para aadir en Adobe Dreamweaver, coloque el cursor donde desea aadir el botn, despus hacemos clic en insertar en el men de Dreamweaver, despus nos vamos a Objetos de imagen >> HTML de Fireworks. Saldr una ventana como esta.

62

Manual Tcnico: Pgina web

2012

Le damos en examinar. Y buscamos el archivo .htm y le damos aceptar, el botn debe aparecer tal y como se muestra en la imagen.

Mens desplegables

Para editar cualquier men desplegable, por ejemplo el men de la parte izquierda de la pgina. Primero abrimos el archivo .png en el programa de edicin Fireworks. Este archivo se encuentra en \Imagenes\menuNav\MenuNav.png que es el archivo fuente donde se generaran los verdaderos archivos para el men desplegable

63

Manual Tcnico: Pgina web

2012

Como puede observarse, cada botn del men est dividido en secciones. El botn donde se despliega el men es de color azul claro, mientras que los dems son verdes. Las secciones verdes se colocaron eventos o acciones de tipo rollover (ver botones con rollover) Si se desea editar el texto de cada botn. Nos dirigimos a la parte izquierda, en el men de Fireworks en la seccin Vector y seleccionamos la opcin Texto. Despus hacemos clic en cualquier texto del men para editarlo.

Para cambiar los links de los botones que no tienen men desplegable, hacemos clic en la herramienta seleccin del men Izquierdo de Fireworks y hacemos clic en la zona verde. Observamos que en la parte inferior aparece una barra de propiedades. Ah se puede cambiar el vnculo de cada botn, haciendo clic en la zona verde como se muestra en la imagen.
64

Manual Tcnico: Pgina web

2012

Para editar el men desplegable. Hacemos clic derecho en el botn que despliega el men (zona azul) y seleccionamos la opcin: editar men emergente. Saldr una ventana como la siguiente:

65

Manual Tcnico: Pgina web

2012

En esa seccin se podrn editar las opciones del men desplegable, tales como nmero de tems, nombre, vinculo y destino. Una vez editado y configurado todo. Debemos exportar trabajo a HTML de Fireworks, para que lo convierta en cdigo HTML y se pueda importar en la pgina. Para hacer esto, hacemos clic en archivo, luego en exportar y luego aparecer esta ventana:

Seleccionamos las opciones mostradas y se exportara el cdigo .css, el archivo .HTML y las imgenes necesarias. Estos archivos son los archivos reales que construyen el men desplegable. Para importar a la pgina el nuevo men desplegable. Abrimos cualquier pgina que tenga la plantilla en Adobe Dreamweaver. Despus eliminamos el viejo men desplegable.

66

Manual Tcnico: Pgina web

2012

Despus, colocamos el cursor justo antes de la imagen de donde estn los logos. Hacemos clic en insertar en el men de Dreamweaver, despus nos vamos a Objetos de imagen >> HTML de Fireworks. Saldr una ventana como esta.

Le damos en examinar. Y buscamos el archivo HTML y le damos aceptar, el men debe aparecer tal y como se muestra en la imagen:

67

Manual Tcnico: Pgina web

2012

Nota: esta opcin importara el cdigo htm o HTML del archivo que se gener en Fireworks y mandara llamar las imgenes que se encuentran all. Pero el HTML de Fireworks es independiente a la pgina. Simplemente se copi el cdigo del men. Editar niveles

Para alterar la seccin de la pgina donde se accede a los diferentes niveles de la biblioteca en la pgina niveles.html, accederemos al archivo mapaN2.png situado en \Imagenes\mapa y la edicin es exactamente la misma que en la seccin anterior de mens desplegables. Conclusiones La pgina web de la biblioteca fue diseada y planeada pensando en todo momento en vincular al usuario y a la informacin sobresaliente de la biblioteca, tambin fue parte fundamental la realizacin del nuevo sistema de bsqueda, esto con el fin de facilitar al usuario la bsqueda en lnea del material bibliogrfico. Agradecemos en todo momento las facilidades otorgadas para prestar nuestro servicio social a la Biblioteca Pblica Mauricio Magdaleno.

68

Vous aimerez peut-être aussi