Carlos Manuel Araujo Coronel - Repositorio Digital USFQ ...
Carlos Manuel Araujo Coronel - Repositorio Digital USFQ ... Carlos Manuel Araujo Coronel - Repositorio Digital USFQ ...
4.2 Módulos 30 Este tipo de menús son menús de navegación que se pueden usar a través de todo el sitio. Este tipo de menús no necesita código de programación, simplemente hace falta agregar ítems al menú dentro del CMS (12). La desventaja de usar esta funcionalidad integrada al CMS es la dificultad de per- sonalizar la visualización del menú, la creación de submenús y la personalización de estos. Es por lo descrito en el párrafo anterior que se decidió incorporar un menú personalizado para implementar la navegación del sitio. La idea es no obstruir la actualización de este pero a la vez permitir crear un menú completamente personalizable y que se adapte a las necesidades del diseño del sitio. Para lograr la creación de este menú, utilicé otro componente del CMS llamado ̏Content Holders˝. Se habla más adelante de estos contenedores, por el momento solo tomemos en cuenta que son contenedores de contenido y estos pueden ser reusables. Para la personalización visual se usó estilos, y para el despliegue del menú se utilizó javascript, para ser más precisos, un plugin de la librería jQuery. El nombre del plugin usado es ̏droppy˝, este es basado en jQuery, que es la librería y marco de trabajo javascript usado en el sitio, como se mencionó en el capítulo ante- rior. Este plugin permite crear menús desplegables anidados con estilos y manejos de animaciones jQuery. El uso de ̏droppy ˝es sencillo, simplemente se agrega la librería de javascript que contiene el plugin, luego se inicializa el menú en el evento deseado del navegador, en nuestro caso es en el ̏On Load˝que es cuando el browser ha cargado todo el contenido de una página (16). Ver figura 4.6. Fig. 4.6: Inicialización del menú usando droppy El plugin buscara en el contenido HTML la estructura a cual activar, especificada por un id. En el gráfico 4.7 podemos ver un código HTML que sirve para la creación de un menú usando droppy. Como podemos ver es una estructura de listas. La primera
4.2 Módulos 31 lista contiene un id, en ese caso en particular es el id ̏nav˝. El plugin se encarga de leer esta lista y de construir el menú. Para la personalización del menú se usó hojas de estilos acoplando el diseño presentado. Fig. 4.7: Estructura HTML del menú Es un tarea sencilla para los editores de contenido el poder modificar los menús. Sim- plemente deben ingresar a la sección de manejadores de contenido y editar el item ̏blue menu˝. Para editar existen dos opciones, usando el editor visual WYSISYG o editando el HTML directamente. Ver figura 4.8. 4.2.2 Home Page Flash Este módulo se localiza en la página principal del sitio o página de entrada o también denominada ̏Home Page˝. Este módulo es básicamente una animación realizada en Flash que presenta varios proyectos de clientes y varios productos que ha realizado y realiza la empresa. Ver figura 4.9. 4.2.2.1 Desarrollo Este módulo fue creado usando la tecnología Flash con script AS3, por el departa- mento de flash dentro de la empresa.
- Page 1 and 2: UNIVERSIDAD SAN FRANCISCO DE QUITO
- Page 3 and 4: © Derechos de Autor Carlos Manuel
- Page 5 and 6: Agradecimientos Agradezco a los pro
- Page 7 and 8: Abstract A company web site is the
- Page 9 and 10: TABLA DE CONTENIDO ix 4 Desarrollo
- Page 11 and 12: Lista de Figuras 2.1 Diagrama Gener
- Page 13 and 14: Capítulo 1 Introducción 1.1 Antec
- Page 15 and 16: 1.2 Presentación del proyecto 3 El
- Page 17 and 18: 1.3 Impacto del Proyecto dentro de
- Page 19 and 20: 2.1 Técnicas y tecnologías a ser
- Page 21 and 22: 2.1 Técnicas y tecnologías a ser
- Page 23 and 24: 2.1 Técnicas y tecnologías a ser
- Page 25 and 26: 2.1 Técnicas y tecnologías a ser
- Page 27 and 28: 2.1 Técnicas y tecnologías a ser
- Page 29 and 30: 3.1 Descripción de tecnologías y
- Page 31 and 32: 3.1 Descripción de tecnologías y
- Page 33 and 34: 3.1 Descripción de tecnologías y
- Page 35 and 36: 3.1 Descripción de tecnologías y
- Page 37 and 38: 4.1 Plantillas 25 - Administrar el
- Page 39 and 40: 4.1 Plantillas 27 Fig. 4.2: Plantil
- Page 41: 4.2 Módulos 29 4.2.1.1 Mapa del si
- Page 45 and 46: 4.2 Módulos 33 Para la alimentaci
- Page 47 and 48: 4.2 Módulos 35 4.2.4 Buscador inte
- Page 49 and 50: 4.2 Módulos 37 - Inscripción para
- Page 51 and 52: 4.2 Módulos 39 Fig. 4.16: Link hac
- Page 53 and 54: 4.2 Módulos 41 Fig. 4.19: Registro
- Page 55 and 56: 4.2 Módulos 43 de ̏ Últimos 5 po
- Page 57 and 58: 4.2 Módulos 45 4.2.12 Animación :
- Page 59 and 60: 4.3 Integraciones 47 Fig. 4.25: Pag
- Page 61 and 62: 4.3 Integraciones 49 Podemos observ
- Page 63 and 64: 4.3 Integraciones 51 4.3.3 AddThis
- Page 65 and 66: 4.3 Integraciones 53 Fig. 4.32: Ove
- Page 67 and 68: 4.3 Integraciones 55 4.3.4.2 Qués
- Page 69 and 70: 4.4 SEO 57 Ahora los desarrolladore
- Page 71 and 72: 4.4 SEO 59 - Robots pueden ignorar
- Page 73 and 74: 4.4 SEO 61 - Crear un diferente ̏k
- Page 75 and 76: 5.1 Resultados 63 más populares, c
- Page 77 and 78: 5.1 Resultados 65 web a través de
- Page 79 and 80: 5.1 Resultados 67 que surgen a trav
- Page 81 and 82: 5.2 Conclusiones 69 de información
- Page 83 and 84: Referencias [1] Oshyn, Inc. Web sit
4.2 Módulos 31<br />
lista contiene un id, en ese caso en particular es el id ̏nav˝. El plugin se encarga de<br />
leer esta lista y de construir el menú.<br />
Para la personalización del menú se usó hojas de estilos acoplando el diseño presentado.<br />
Fig. 4.7: Estructura HTML del menú<br />
Es un tarea sencilla para los editores de contenido el poder modificar los menús. Sim-<br />
plemente deben ingresar a la sección de manejadores de contenido y editar el item ̏blue<br />
menu˝. Para editar existen dos opciones, usando el editor visual WYSISYG o editando<br />
el HTML directamente. Ver figura 4.8.<br />
4.2.2 Home Page Flash<br />
Este módulo se localiza en la página principal del sitio o página de entrada o también<br />
denominada ̏Home Page˝.<br />
Este módulo es básicamente una animación realizada en Flash que presenta varios<br />
proyectos de clientes y varios productos que ha realizado y realiza la empresa. Ver figura<br />
4.9.<br />
4.2.2.1 Desarrollo<br />
Este módulo fue creado usando la tecnología Flash con script AS3, por el departa-<br />
mento de flash dentro de la empresa.
Change language