DISEÑO DESARROLLO Y EVALUACIÓN DE PÁGINAS WEB MÓDULO 2: DISEÑO DE UN SITIO WEB

Transcripción

1 DISEÑO DESARROLLO Y EVALUACIÓN DE PÁGINAS WEB MÓDULO 2: DISEÑO DE UN SITIO WEB 2.1 PLANEACION DE UN PROYECTO WEB Fernando Maldonado R. Especialista en Informática para Docentes Si usted desea desarrollar un proyecto de página web siga estas pautas y procedimiento: 1. Recuerde que la página es un medio para la comunicación virtual, por lo tanto el primer paso es obtener la estructura y composición del mensaje, al cual le subyace una estrategia comunicativa. Para ello se debe planear el sitio completo, que por lo general está constituido de varias paginas enlazadas a través de hipervínculos. El plan de un sitio web debe hacerse utilizando varias herramientas o técnicas: o o Un mapa de navegación: Es un diagrama que representa cada página de la red del sitio con un nombre específico: Decida el nombre que dará a cada página y elabore el mapa de navegación. Puede utilizar para ello Word o herramientas más sofisticadas como las existentes para elaborar mapas conceptuales. Grilla de trabajo. Se debe decidir, por lo general, la misma grilla para todas las páginas. Para seleccionar su grilla de trabajo apóyese en las propuestas del sitio: y descargue el documento pdf titulado grids are good 1 disponible en la sección enlaces a internet dentro del aula virtual del curso. Tómese el tiempo suficiente para decidir la grilla. Este ejercicio no se trata solamente de decidir una distribución de elementos en el espacio de una página web sino que debe estar coordinado con la decisión de cuáles elementos específicos se van a incluir en cada sección (ver numeral 2: cuando esté decidido el contenido de cada página puede ajustar el diseño de la grilla). La grilla es el componente fundamental del diseño del sitio y por ello es recomendable que para la determinación de la línea y estilo del diseño del sitio, el diseñador se base en una búsqueda y referenciación inicial en sitios que trabajen con temas u objetivos similares. Haga una búsqueda y comparación inicial observando secciones, tecnología, navegabilidad y otros aspectos que sean de su particular interés, de diferentes sitios similares al que desea diseñar. El objetivo no es plagiar sino partir de unas referencias que podrían servir como el canon de diseño del sector. Esto 1 Vinh, Khoi & Boulton Mark. Grids Are Good. SXSW Interactive, Marzo de Disponible en Internet el 20 de Noviembre de 2008 en: <

2 debe hacerse cuidadosamente porque también es importante romper algunos esquemas para producir un distintivo competitivo con los sitios de organizaciones que ofrecen productos y servicios similares. o Manual de diseño general del sitio. Suele utilizarse sobre todo en el diseño de sitios corporativos. Pues los elementos, colores y estilos utilizados en el mismo tienen carácter de política e imagen corporativa. No obstante si este documento se elabora para un sitio personal o más informal que un sitio web corporativo, puede ayudar al desarrollador a mantener una estructura ordenada ya darle identidad al conjunto de páginas del mismo. El manual de diseño consigna datos como el tipo de grilla a utilizar en las paginas, el cual se recomendó decidir en la etapa anterior, los colores predominantes del diseño, los fondos o backgrounds, el uso de logos y sus colores y la tipografía (que implica tipo de fuentes, tamaños y colores), Los diseños y localización de los botones de navegación y en general los hipervínculos de cada pagina(si los hay) y el tipo de objetos que predominarán en cada pagina: imágenes, objetos tipo películas de flash, videos, etc. Este último aspecto es importante porque determina el peso de cada página en Kb (kilobytes). Es recomendable que una pagina web, sumando los pesos de sus componentes, no sobrepase los 300 k. Si la pagina contiene objetos que le confieren un mayor peso debe pensarse en que estos se carguen en forma progresiva (esta tecnología se conoce como streaming y es la utilizada actualmente para reproducir videos o películas de flash en la web). 2. Una vez elaborado el plan general del sitio elabore un guión o un bosquejo de cada página del sitio. El guión consiste en una tabla que consigna los textos, la descripción de los fondos (en el caso de variar con respecto a l os descritos en el manual general de diseño), la descripción y ubicación de las imágenes y demás objetos que se van a incrustar en la grilla y la descripción de efectos que se deseen observar en la pagina. El bosquejo, que es una alternativa al guión, es la representación y descripción en papel, o en un archivo digital tipo Word, del contenido de cada página del sitio web. 3. Instale el software necesario para el desarrollo, en su computador local. En el diseño de un web site, se requiere no solamente tener un editor web, sino uno o varios programas o aplicaciones para cada tipo de objeto que se quiera incorporar al diseño. En la siguiente tabla se presentan elementos que se pueden incorporar a una página web y el tipo de aplicación que se requiere para su construcción: Tabla 5. Tipos de elementos web y sus editores Tipo de Elemento Texto Editor web Aplicación para su composición Va inserto dentro del mismo editor web. La tipografía por lo general se define mediante hojas Ejemplos de aplicaciones en el mercado Software Comercial: - Adobe Dreamweaver Software libre: - Kompozer

3 de estilo. - Page Breeze Imagen Flash movies Videos Editor de imagen Productor de películas y aplicaciones flash Editor de video Software Comercial: -Adobe PhotoShop - Adobe Fireworks - Corel draw Software libre: - Photofiltre - Gimp Software Comercial - Adobe Flash - Swish max Software libre: - F4L Software Comercial: - Adobe Premiere - Sony Vegas - AVS Video Tools Software libre o freeware: - Windows Movie Maker - Videospin - Avidemux Los programas tipo software comercial permiten descargar versiones de evaluación (trial) con una duración de 30 días. No obstante con excepción de la aplicación para flash, la mayoría de los editores de versión software libre son buenos y están a la altura del desempeño de las aplicaciones comerciales. Para efectos del nivel de formación de este curso usted sólo va a necesitar el editor web y el editor de imagen, aunque está en libertad de gestionar la búsqueda, descarga e instalación de las demás aplicaciones si desea incorporar algún elemento diferente a texto e imagen en su diseño. Recuerde instalar adicionalmente a este software, otro navegador diferente al internet Explorer para probar el diseño en dos navegadores diferentes. Los sitios de descarga de algunos navegadores se listan a continuación:

4 Tabla 6. Navegadores y sitios de descarga Navegador Sitio de descarga Mozilla Firefox (versión español) Safari Chrome Flock Opera 4. Construya las librerías de medios. Se denomina así al conjunto de objetos que se van a incorporar en el diseño. Teniendo en cuenta lo conceptos de diseño, presentados en este documento, el manual general de diseño del sitio y los guiones o bosquejos elaborados, componga cada imagen y película del conjunto de paginas que conformarán su web site. 5. Cree la carpeta principal del sitio y las subcarpetas correspondientes a cada uno de los tipos de elementos de las librerías de medios en su computador local, tal como se representa en la figura 10. El sitio, desde el punto de vista informático, es un conjunto organizado de archivos y carpetas: Los archivos HTML deben ir dentro de la carpeta principal denominada carpeta raiz (root) del sitio, y los archivos de imágenes dentro de una carpeta titulada, por lo general, como images o imágenes, los archivos de películas swf irán en otra carpeta y así sucesivamente con los demás tipos de archivos. Para la construcción de un web site corporativo generalmente se requiere una organización de carpetas mas compleja, en la que, a cada dependencia o sección de la empresa corresponderá una carpeta, o según la estrategia de servicios de información que se quiera presentar al usuario, se elaborará una estructura de árbol con categorías diversas. En ese caso se encontrarán en el site varias carpetas con archivos HTML con sus correspondientes imágenes y películas también en subcarpetas. 6. Cree el caché del sitio en su editor web. Lo editores web crean las rutas de conexión entre lanzaderas y anclas de las páginas web de un sitio a partir de una base interna que se construye con las rutas relativas de acceso entre unos archivos y otros del sitio web: Esta base se almacena en una memoria caché de la aplicación. La forma de crear el cache de la estructura e directorios y archivos del sitio en el editor es sencillamente abrir la carpeta raíz en el editor y automáticamente este

5 registrará todas las subcarpetas y archivos contenidos en ellas como componentes de la base. A partir de esta carpeta raíz el editor vinculará los archivos ensamblados con rutas relativas a la misma. 7. Construya una página patrón con la grilla de diseño que utilizará para las páginas del sitio. Para ello siga el tutorial de edición de páginas web que se presenta en el aula virtual del curso. 8. Duplique el patrón para cada página nueva y ensamble, según los procedimientos indicados en un tutorial, los elementos planeados en cada una. Por lo general el orden de diseño es: primero los textos, luego las imágenes, luego las películas flash y los videos, y finalmente se escribe la programación para el funcionamiento de los hipervínculos. Siga como ejemplo el presentado en el documento complementario del módulo 2, denominado modelo_site_pdf. 9. Pruebe cada página diseñada en dos navegadores diferentes. Esta práctica corresponde a un estilo de diseño denominado cross-browser. La forma como un navegador interpreta las etiquetas HTML, el código javascript y los lineamientos de las hojas de estilos (css), es relativamente diferente a la forma como lo hace otro navegador, aunque la mayoría de éstos tratan de ajustarse a estándares internacionales; no obstante, navegadores como Internet Explorer aún se basan en protocolos de interpretación no compatibles con estándares de aceptación mundial. Otros como algunas versiones de ópera tienen dificultades en leer interpretar código javascript. 10. Realice las correcciones de rigor y disponga su sitio para ser publicado. BIBLIOGRAFÍA Y WEBGRAFÍA 1. Universia.net.co. 100 Reglas para elaborar un sitio web competitivo. Disponible en Internet el 06 de febrero de 2009 en: < 2. Informática Milenium. Estrategias: Innovar o Morir. Disponible en Internet el 06 de febrero de 2009 en: < 3. Orihuela, José Luis y Santos, M. Luisa, Introducción al Diseño Digital. Concepción y Desarrollo de Proyectos de Comunicación Interactiva, Anaya Multimedia, Madrid, Fleming, Jennifer, Web navigation: designing the users experience, O'Reilly, Sebastopol, Vinh, Khoi & Boulton Mark. Grids Are Good. SXSW Interactive, Marzo de Disponible en Internet el 20 de Noviembre de 2008 en: < 6. Leopoldo, Carlos. El Layout perfecto de 1, 2 o 3 columnas. Blog personal. Disponible en Internet en: <

6 7. Iescarbula.net. Creación de Páginas Web con Nvu/Composer. Tutorial. Disponible en Internet el 06 de Febrero de 2009 en: < 8. Rodríguez Juan P. Diseño web Kompozer. Disponible en Internet el 06 de Febrero de 2009 en:< 9. Serrano Cinca, Carlos (2008): "Vender por Internet. Instalar una tienda virtual", [en línea] 5campus.org, Sistemas Informativos Contables. Disponible en Internet el 06 de Febrero de 2009 en: <