Paquete de trabajo 3. Diseño Web del Proyecto REMERI. Manual. Enero 2013

Transcripción

1 Paquete de trabajo 3 Diseño Web del Proyecto REMERI Manual Enero 2013

2 Red Mexicana de Repositorios Institucionales REMERI 2 HOJA EN BLANCO

3 Red Mexicana de Repositorios Institucionales REMERI 3 Paquete de trabajo 3 Manual de Diseño Web del Proyecto REMERI Documento desarrollado por: Antonio Felipe Razo Rodriguez, MDI, MC Yazmín Magallanes Velázquez, MC Revisores del documento: Rosalina Vázquez Tapia, MTE Aprobación requerida de: Nombre del proyecto: Red Mexicana de Repositorios Institucionales REMERI Responsable(s) del proyecto: Rosalina Vázquez Tapia, MTE Universidad Autónoma de San Luis Potosí Objetivo del documento: Guía de diseño web del portal y aplicaciones de REMERI Fecha de Elaboración Fecha de Actualización Octubre 10, 2012 Enero 26, 2013 Versión del Documento 0.9.6

4 Red Mexicana de Repositorios Institucionales REMERI 4 Manual Red Mexicana de Repositorios Institucionales REMERI Diseño Web del Proyecto REMERI 1. Arquitectura del portal 1.1. Presentación 1.2. Requerimientos 1.3. Componentes 1.4. Lineamientos generales 2. Diseño Web 2.1. Presentación 2.2. Logotipo y colores web 2.3. Tipografía web 2.4. Plantilla general 3. Plantillas Web 3.1. Presentación 3.2. Contenido 3.3. Multimedia 3.4. Consultas 4. Implementación Web 4.1. Presentación 4.2. Plantilla CSS 4.3. Secciones HTML 4.4. Implementación y pruebas 4.6. Lineamientos generales

5 Red Mexicana de Repositorios Institucionales REMERI 5 1. Arquitectura del portal 1.1. Presentación La Red Mexicana de Repositorios Institucionales (REMERI), tiene por objeto crear una red interconectada de repositorios digitales de instituciones de educación superior (IES) en México, con la finalidad de integrar, difundir, preservar y dar visibilidad a su producción científica, académica y documental, así como también, incorporarse a redes o directorios de repositorios internacionales para fomentar la colaboración y apoyar el acceso y la divulgación de contenidos de acceso abierto. Este documento presenta el diseño del sitio web considerando la arquitectura de la información y servicios y las consideraciones del manual de identidad Requerimientos Los requerimientos del portal de REMERI son los siguientes: Es necesario diseñar un sitio que permita consultar el contenido de los repositorios institucionales El sitio deberá permitir informar de los trabajos y avances de la comunidad de REMERI Debe proveer acceso a la normatividad, especificaciones y reglamentos Ser un mecanismo para la difusión de capacitación de la comunidad de REMERI Presentar toda la información del proyecto, participantes y sitios relacionados Señalar la información de contacto 1.3. Componentes Se identificaron los siguientes componentes a desarrollar: Portada. Página inicial de avisos y enlaces. Servicios. Acceso y guía de uso a los servicios. Interfaces de consulta y visualización Documentación del proyecto Contacto del proyecto

6 Red Mexicana de Repositorios Institucionales REMERI 6 En base al análisis se definió la siguiente arquitectura de contenido: Proyecto o Acerca de o Diagnóstico nacional o Equipo de trabajo o Normativa Sitio de Trabajo o Información o Noticias o Eventos o Novedades Servicios o Búsquedas o Consultas o Validaciones o Estadísticas o OAI-PMH Capacitación o A quien va dirigida o Cursos y talleres o Agenda de cursos o Bitácora de capacitación o Materiales y referencias Participantes o Cómo participar? o Directorio Información o Sitios y proyectos relacionados o Contáctanos o Herramientas o Facebook / twitter

7 Red Mexicana de Repositorios Institucionales REMERI Lineamientos generales El portal en este momento presenta todos los componentes identificados en el análisis, también integra información del proyecto y el acceso a servicios y consultas. Es una herramienta de promoción de los objetivos del proyecto y documentación, así como de la capacitación y difusión. 2. Diseño Web 2.1. Presentación Derivado del manual de identidad se generaron los siguientes lineamientos del diseño del sitio y aplicaciones web Logotipo y colores web #0099CC o R 51 o G 153 o B 204 #99CC33 o R 51 o G 153 o B 204 #CC3366 o R 204 o G 51 o B 102 # o R 123 o G 123 o B 123

8 Red Mexicana de Repositorios Institucionales REMERI Tipografía web Las tipografías definidas para el sitio web son las siguientes: PT SANS o Menú (FFF) o Títulos de sección (FFF) o Pie de página (999) Mako o Contenido Encabezados (C36,000) Texto (333) Etiquetas (333) Enlaces (09C) Carrois o Otras aplicaciones

9 Red Mexicana de Repositorios Institucionales REMERI Plantilla general

10 Red Mexicana de Repositorios Institucionales REMERI Plantillas Web 3.1. Presentación Aquí se presentan las diferentes aplicaciones del diseño web para el contexto del proyecto.

11 Red Mexicana de Repositorios Institucionales REMERI Contenido 3.3. Multimedia

12 Red Mexicana de Repositorios Institucionales REMERI Consultas

13 Red Mexicana de Repositorios Institucionales REMERI Implementación Web 4.1. Presentación Esta es una relación de los archivos web que permitieron implementar el diseño y mantener la identidad del proyecto en la plataforma de desarrollo.

14 Red Mexicana de Repositorios Institucionales REMERI Plantilla "UTF-8"; /* CSS Document REMERI Plantilla CSS Enero Antonio Razo */ #imagegallery { clear: both; width: 680px; #inside { clear: both; width: 680px; #left, #middle, #right { float: left; #left p, #middle p, #right p{ margin: 10px 5px 20px 10px; #left { width: 224px; #middle { width: 224px; #right { width: 224px; #banner { background-color: #999; width: 100%; height: 30px; #banner2 { background-color: #C36; width: 100%; height: 30px; #banner3 { background-color: #FFF; width: 100%; #banner4 { clear: both; background-color: #999; width: 100%; #banner5 { clear: both; background-color: #FFF; width: 100%; #head { font-family: "PT Sans", "PT Sans Bold", "PT Sans Bold Italic", "PT Sans Caption", "PT Sans Caption Bold", "PT Sans Italic", "PT Sans Narrow", "PT Sans Narrow Bold", "PT Serif", "PT Serif Bold", "PT Serif Bold Italic", "PT Serif Italic"; color: #FFF; width: 680px; font-size: 18px; margin: auto; padding-top: 5px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; #menu { font-family: "PT Sans", "PT Sans Bold", "PT Sans Bold Italic", "PT Sans Caption", "PT Sans Caption Bold", "PT Sans Italic", "PT Sans Narrow", "PT Sans Narrow Bold", "PT Serif", "PT Serif Bold", "PT Serif Bold Italic", "PT Serif Italic"; color: #FFF; background-color: #C36; width: 680px; font-size: 16px; margin: auto; padding-top: 5px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; #content { font-family: "Mako"; color: #333; background-color: #FFF; width: 680px;

15 Red Mexicana de Repositorios Institucionales REMERI 15 font-size: 14px; margin-left: auto; margin-right: auto; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-style: normal; #bottom { font-family: "PT Sans", "PT Sans Bold", "PT Sans Bold Italic", "PT Sans Caption", "PT Sans Caption Bold", "PT Sans Italic", "PT Sans Narrow", "PT Sans Narrow Bold", "PT Serif", "PT Serif Bold", "PT Serif Bold Italic", "PT Serif Italic"; color: #EEE; background-color: #999; font-size: 12px; width: 680px; margin-left: auto; margin-right: auto; padding-top: 10px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; #bottom li { list-style-type: none; color: #EDEDED; text-align: left; #bottom ul { padding-left:5px;.headline { font-size: 16px; color: #FFF; font-family: "PT Sans", "PT Sans Bold", "PT Sans Bold Italic", "PT Sans Caption", "PT Sans Caption Bold", "PT Sans Italic", "PT Sans Narrow", "PT Sans Narrow Bold", "PT Serif", "PT Serif Bold", "PT Serif Bold Italic", "PT Serif Italic"; font-style: normal; line-height: normal; #footer { font-family: "PT Sans", "PT Sans Bold", "PT Sans Bold Italic", "PT Sans Caption", "PT Sans Caption Bold", "PT Sans Italic", "PT Sans Narrow", "PT Sans Narrow Bold", "PT Serif", "PT Serif Bold", "PT Serif Bold Italic", "PT Serif Italic"; color: #999; background-color: #FFF; font-size: 10px; width: 680px; margin-left: auto; margin-right: auto; padding-top: 10px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; align:center; text-align: center; #portal { height: 100%; width: 100%; background-color: #FFF; body { margin:0; padding:0; height:100%; body,td,th { color: #666; #menu a:link { color: #FFF; #menu a:visited { color: #FFF; #bottom a:link { color: #FFF; #bottom a:visited { color: #FFF; a:link { color: #09C; text-decoration: none; a:visited { text-decoration: none; color: #069; a:hover {

16 Red Mexicana de Repositorios Institucionales REMERI 16 text-decoration: underline; color: #09C; a:active { text-decoration: none; h1 { font-size: 18px; color: #C36; font-family: "Mako"; font-style: normal; line-height: normal; font-weight: normal; h2 { font-size: 16px; color: #C36; font-family: "Mako"; font-style: normal; font-weight: normal; font-variant: small-caps; h3 { font-size: 16px; color: #000; font-family: "Mako"; font-style: normal; font-weight: normal;.promos { padding-top: 10px;.promos.promo { float: left; width: 306px; margin-right: 21px;.promos.promo ul { margin: 0; padding: 0;.promos.promo ul.split { width: 19%; float: left;.promos.promo li { width: 90%; list-style-type: none; font-size: 14px; line-height: 16px; overflow: hidden;.footer li { height: 12px; padding: 0 5px; float: left; list-style-type: none; border-right: 1px solid #d6d6d6; line-height: 12px;.center { text-align: center;.center { text-align: right;

17 Red Mexicana de Repositorios Institucionales REMERI Secciones HTML La plantilla principal tiene las siguientes características: <body> <div id="portal"> <div id="banner"> <div id="head"> Portal de la Red Mexicana de Repositorios Institucionales </div><!--head --> </div><!--banner --> <div id="banner2"> <div id="menu"> </div><!--menu --> </div><!--banner2 --> <div id="banner3"> <div id="content"> </div><!--content --> </div><!--banner3 --> <div id="banner4" > <div id="bottom" > </div><!--bottom--> </div><!--banner4 --> <div id="banner5"> <div id="footer"> </div><!--footer --> </div><!--banner5 --> </div><!--portal --> </body> </html>

18 Red Mexicana de Repositorios Institucionales REMERI Implementación y pruebas o Archivos generados: HTML pcapacitacion.html pformulario.html pformulariocursos.html pidentidad.html pinformacion.html pparticipantes.html pproyecto.html premeri.html pservicios.html o JSP pinformacion.jsp pregistrocursos.jsp REMERIII.jsp o JavaScript jquery.touchwipe js netcu.js jquery.cycle.all.js o CSS indixe02.css o SWF aplicacion.swf o Imágenes remeri_12_10_25_01.gif remeri_title.gif logo_itesm.png logo_uaeh.png logo_uaemex.png logo_uaslp.png logo_udg.png logo_udlap.png mapa_e.png rbanner02.png rbanner04.png rbanner05.png remeri_web_conacyt.png

19 Red Mexicana de Repositorios Institucionales REMERI 19 social_links.png aplicacion_circle.jpg fotos_remeri_01.jpg fotos_remeri_02.jpg Implementación.

20 Red Mexicana de Repositorios Institucionales REMERI 20

21 Red Mexicana de Repositorios Institucionales REMERI 21

22 Red Mexicana de Repositorios Institucionales REMERI 22

23 Red Mexicana de Repositorios Institucionales REMERI 23

24 Red Mexicana de Repositorios Institucionales REMERI 24

25 Red Mexicana de Repositorios Institucionales REMERI 25

26 Red Mexicana de Repositorios Institucionales REMERI 26

27 Red Mexicana de Repositorios Institucionales REMERI 27

28 Red Mexicana de Repositorios Institucionales REMERI 28

29 Red Mexicana de Repositorios Institucionales REMERI 29

30 Red Mexicana de Repositorios Institucionales REMERI 30