Manual 1 Técnico Portal Observatorio Tecnológico Hidalgo UAEH OTecH Observatorio Tecnológico del Estado de Hidalgo
Manual Técnico Portal Obserbatorio Técnologico de Hidalgo Descripción y contenido del Manual Técnico Este manual tecnico de la creacion del portal Web del Observatorio tecnologico del de hidalgo cuenta con lo siguientes contenidos: índice 1. Introducción... 3 2. Objetivo... 3 3. Alcance... 3 4.1. Propiedades del sitio web... 5 4.2. Mapa del sitio... 6 4.3. Pagina maestra... 6 4.4. Menú... 7 4.5. Estados de los botones... 8 4.6. Relleno de un rectángulo con una imagen de fondo... 8 5 Caracterización del sitio web... 9 2
1. Introducción El portal Web del Observatorio Tecnológico del Estado de Hidalgo está integrado técnicamente de manera que la información contenida pueda ser agregada, editada y eliminada por el responsable designado de diversas tareas de mantenimiento y actualización del sitio. El Portal Web se desarrollo utilizando Adobe Muse, el cual permite organizar eficientemente los contenidos, además que cuenta con diversas herramientas que permiten el diseño de una portal moderno y con una amplia gama de posibilidades. De acuerdo al esquema anterior y en busca de promover el desarrollo de esta versión del Portal web la cual permite mayor eficiencia, oportunidad y control en la actualización permanente de su información y cumpliendo, adicionalmente, con los requisitos de transparencia y Acceso a la Información. 2. Objetivo El objetivo de este Manual Técnico es explicar los recursos que se utilizaron para la creación del Portal Web. Este documento esta dirigido a quienes tengan que implementar o administrar el Portal Web. 3. Alcance Este documento brinda las especificaciones técnicas para implementar el Portal de Web del Observatorio Tecnologico del Estado de Hidalgo. Por lo que principalmente se pretende orientar y proporcionar adecuada información sobre las herramientas disponibles para el manejo de contenidos de esta versión del Portal. 4. Adobe Muse Adobe Muse permite a los diseñadores crear sitios web sin necesidad de escribir código así como planificar, diseñar y publicar páginas HTML originales. Introduce también el concepto de paginas maestras para realizar diseños uniformes, además incluye herramientas integradas para crear interactividad y una selección de alojamientos de publicación, por lo que se pueden crear sitios web distintivos y profesionales para cumplir con los últimos estándares web. 5. Planificación Adobe Muse cuenta con una base inteligente sobre la que construir el sitio web es relativamente rápido e intuitivo gracias a la facilidad de uso de mapas de sitio, páginas maestras y elementos básicos de diseño aplicados automáticamente. Por ello se planificó la siguiente estructura de navegación sobre la cual se construirán las paginas del portal. Inicio OTecH Fondos de Apoyo Research Indicators Alertas Tecnlógicas Market Place RSVSLI Convocatoria s vigentes Resultados de convoatorias Fondos nacionales Estadis@cas Sistema Revistas CienDficas Servicios OTecH Oferta/ Demanda Directorios IEFyP Oferta educa@va FIMPES Figura 1 Mapa de navegación del Portal 3
INICIO: Esta pagina tiene como función la presentación del sitio, ya que es la primera que se muestra una vez que se ingresa al portal. Aquí se incluirán anuncios relevantes una breve descripción del OTEH, así como un enlace a las fuentes de información. OTecH: Espacio dedicado a dar a conocer de manera genérica algunas características del Observatorio, aquí mismo se encuentra un video promocional del mismo. FONDOS DE APOYO: Este espacio esta construido con la finalidad de que se puedan mostrar los avisos y publicaciones de eventos. Y se puedan visualizar los resultados de algunas convocatorias que se han publicado. o Resultados de convocatorias: En este modulo podrás encontrar información de los resultados de las convocatorias que ha hecho CONACYT e INADEM, con la finalidad de que más personas se interesen en las convocatorias que promueven dichas organizaciones. o Fondos nacionales: En este espacio están los fondos de compensación territorial, que financian las iniciativas de impacto social, especialmente aquellas que apuntan a elevar la calidad de vida de los sectores más necesitados de México. o Convocatorias vigentes: Este espacio esta construido con la finalidad de que se puedan mostrar los avisos, publicaciones de eventos etc. Y se puedan visualizar los resultados de algunas convocatorias que se han publicado. o Estadísticas: En esta sección, se puede extraer información estadística del Padrón del CONACYT, ya sean totales o parciales sobre la ciencia y tecnología en México. Research indicators: Esta sección es resultado de la colaboración entre promep y el OTecH. Es aquí donde por medio de un sistema de indicadores de Investigación es posible incorporar las actividades de investigación desarrolladas al interior de la Universidad Autónoma del Estado de Hidalgo (UAEH) Alertas tecnológicas: El objetivo de esta sección es la proporcionar información de interés de manera periódica y actualizada. o Revistas científicas: Para el OTecH la información científica es la base para la construcción de nuevo conocimiento, por ello se ponen a disposición del publico a través de estas sección una colección de revistas científicas que pueden ser consultadas por el publico en general. o Sistema: Para estar a la vanguardia tecnológica el OTecH pone a disposición una aplicación móvil la cual puede ser descargada a través de esta pagina. RSVSLI: En esta sección es posible acceder a la Red Sinérgica Virtual para Sistemas Locales de Innovación, en la cual podrás ser participe de la comunidad de redes del OTecH, contribuir al desarrollo tecnológico, de innovación así como adquirir nuevo conocimiento. Fondos de apoyo: 4
Marquet Place: Este es nuestro principal servicio, aquí hemos incluido nuestro mayor punto de intereses de lo organismos participantes, por tanto contamos con tres espacios accesibles desde este punto que son: o Directorios: En esta sección se ponen a disposición del publico un conjunto de datos, lo cuales son accesibles para todos lo usuarios y por medio de este se puede tener acceso a información de algunas empresas y organizaciones. o Oferta demanda: Por medio de este apartado nos es posible Identificar Oportunidades de Cooperación en desarrollo tecnológico como de negocio articulando esfuerzo y conocimientos, entre empresas universidades y centros de investigación. o Servicios OTecH: Aquí podrás conocer cuales son las funciones que realiza el OTecH de los recursos a través de los cuales se realizan dichas funciones. o Servicios tecnológicos: Este espacio cuenta con información de la empresas e investigadores mas reconocidos del país. o IEFyP: En este modulo podrás encontrar información para estudios de factibilidad y pertinencia, puedes encontrar el plan nacional de educación, plan de desarrollo de la UAEH, el plan estatal de educación, y algunos otros artículos que serán de utilidad para dicho Estudio. o Servicios tecnológicos: Este espacio cuenta con información de la empresas, investigadores etc. Mas reconocidos del país por ello hacemos la recomendación de utilizar la información contenida de manera responsable. MAPA DEL SITIO: Esta sección muestra la estructura general del sitio con el fin de orientar al usuario para dirigirse al lugar donde pueda encontrar la información que se busca. CONTACTO: Este espacio está diseñado para establecer un vinculo en el cual los visitantes puedan conocer la ubicación del OTEH, así como poder realizar preguntas a través de un breve formulario de contacto. 6. Desarrollo del portal En ese aparta se muestra la forma en como se estructuró y creo el sitio Web en Adobe muse. 4.1. Propiedades del sitio web Define elementos básicos del diseño que se aplicarán automáticamente a todo el sitio web, como la anchura y los márgenes de las páginas, la alineación y los colores de los hipervínculos véase figura 2. En este sentido 5 Figura 2 Cuadro de dialogo de elementos de la página.
se estableció un ancho de 800 x 600 para que la pagina en dispositivos con esta resolución se vea completa. 4.2. Mapa del sitio Adobe muse cuenta con una herramienta que organiza las páginas con un mapa del sitio fácil de usar que te permitirá definir y modificar rápidamente la estructura del sitio. Por tanto, el mapa de sitio planificado se trasladó a esta herramienta con el fin de generar cada una de las paginas web. Cuando se crea un proyecto nuevo adobe muse inicializa una pagina en blanco, al igual que la pagina maestra, esta ultima permitirá añadir un diseño uniforme para todas las paginas es decir, todo lo que se cree aquí se añadirá a las a las demás paginas. Un mapa del sitio es una lista estructurada de las páginas que existen en la jerarquía de un sitio web. Puede crear páginas que estén en el mismo nivelo puede crear mapas del sitio que contengan niveles diferentes de páginas es importante organizar el contenido del sitio, definir qué páginas son necesarias y decidir cómo presentar la información del sitio la presentación de la información del sitio del OTecH quedó definida de acuerdo a la figura 3. Para crear una pagina del mismo nivel solo se pasa el cursor por encima de la miniatura de la página de a la cual se le desea añadir una pagina adicional y basta con dar clic en el icono de Figura 3 Mapa del sitio OTecH signo más (+), situado a la derecha de dicha miniatura de la página, para crear otra página se sigue el mismo procedimiento a la derecha, izquierda para agregar una pagina del mismo nivel o abajo para agregar una pagina de un nivel inferior. 4.3. Pagina maestra 6
En este apartado se definen y controla elementos comunes a varias páginas, como encabezados, pies de página, logotipos y navegación. Basta con agregarlos al diseño de las páginas maestras. En este sentido se desarrollo un encabezado que incluye el logo y eslogan del Observatorio Tecnologico del Estado de Hidalgo sobre un color de fondo blanco en este apartado también se añade el menú Figura 4 Pagina maestra sitio OTech principal con el fin de mantenerse fijo en todas la paginas, así mismo en la parte del pie de pagina se incluyó el Copyright del sitio en color gris la estructura de la pagina maestra puede visualizarse en al figura 4. 4.4. Menú El menú principal fue agregado a la pagina maestra con el fin de que este se presente en toda la navegación por el sitio. Para ello se utilizaron lo widgets de Adobe Muse como se muestra en la figura 5. Para agregarlo es necesario: 1. Abrir la Biblioteca de widgets; a través de las opciones Ventana>Biblioteca de widgets. 2. En la biblioteca de widgets, se hace clic en la sección de menús para expandirla. Y se selecciona el widget horizontal y se colocar arrastrando del panel a la zona de donde se va a colocar en la pagina maestra. Automáticamente las pagina que se encuentren definidas en el mapa del sitio se actualizaran en el menú. Figura 5 Colección de menus Para configurar widgets, se actualizan los ajustes en el panel Opciones como se muestra en la figura 6. El panel Opciones 7
es contextual y le permite aplicar cambios para actualizar los ajustes específicos para ese widget al completo, o el elemento secundario seleccionado del widget. El panel Opciones permite controlar el comportamiento de los widgets y cómo se muestra su contenido. Mientras un elemento contenedor está seleccionado, por ejemplo un elemento de menú, puede aplicar estilo al widget definiendo las opciones de relleno y de trazo. Cuando se seleccionan etiquetas de texto, es posible utilizar el panel Texto o las opciones de texto del panel de control para aplicar estilo al texto. 4.5. Estados de los botones A continuación, verá cómo editar el estado de un botón. Se hace clic en el widget una vez para seleccionar el menú completo. Se hace clic en el botón de que se desea editar una vez más para seleccionar el elemento del menú, accidentalmente, hace clic una tercera vez y el indicador de selección muestra la palabra Etiqueta. Como la opción Editar conjuntamente está activada en el panel Opciones, los cambios que se realicen en el aspecto de este elemento de menú se aplicarán al resto de botones del widget de menú. Los botones grises definen la apariencia de cada estado como se muestra en la figura 7. Figura 6 Menú de estados 4.6. Relleno de un rectángulo con una imagen de fondo 1. Se dibuja un rectángulo. 2. Se utiliza el menú Relleno para hacer clic en el icono de carpeta junto a la sección Imágenes. En el cuadro de diálogo Importar que aparece, seleccione el archivo de la carpeta de archivos de ejemplo denominado Figura 7 Relleno con imagenes 8
img-salad-darker.png y clic en Abrir. 3. Se establece el menú Encaje en Escalar para rellenar y haga clic en la posición superior derecha de la sección Posición para alinear la imagen por la esquina superior derecha en la página. Se hace clic en cualquier otra parte de la página para cerrar el menú Relleno. Se utiliza la herramienta Selección para arrastrar los manejadores y cambiar el tamaño del rectángulo según sea necesario. 5 Caracterización del sitio web Encabezado: Fijo en todas las pantallas y fijo a la parte superior de la pantalla. Imagen del logo del OTecH esquina superior izquierda, logo PCyT uaeh esquina superior derecha, al centro slogan (aguafina-script, cursive, Color rojo #4D0000). Pie de pagina: Fijo en todas las pantallas y fijo a la parte inferior de la pantalla. En la esquina inferior izquierda botón de encuesta de satisfacción, esquina inferior derecha botón de contacto, textura de fondo gris, tipografía, Arial bold 13. Pagina principal: Texto Arial 14 cursiva. Relleno de fondo: Imagen de una ciudad. Tipo de letra: Fijo en todas las pantallas y fijo a la parte inferior de la pantalla. Encabezado: aguafina-script, cursive, Color rojo #4D0000 Titulo principal: Tarjan Pro Bold 24, Color blanco, fondo gris #545454. Subtitulo 1: Tarjan Pro Bold 22, Color blanco, fondo gris #545454. Párrafo: Imprima 20, gris #4A4A4A Texto pie de imagen: Gerorgina color #999999 fondo rojo #930000 Botón ver más: Tipografía Arial Bold 13 blanca, fondo textura bicolor vino y negro. 9