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

Transcripción

1 DISEÑO DESARROLLO Y EVALUACIÓN DE PÁGINAS WEB MÓDULO 2: DISEÑO DE UN SITIO WEB Fernando Maldonado R. Especialista en Informática para Docentes MODELO PARA EL DISEÑO DE UN DE SITIO WEB CORPORATIVO 1. DESCRIPCIÓN DE LA EMPRESA Esta empresa ficticia llamada Movilteinment se dedica a la importación y comercialización de dispositivos móviles para el entretenimiento, para las telecomunicaciones y para aplicaciones personales y de trabajo. Está localizada en Bogotá y está interesada en ofrecer estos productos a través de su página web corporativa. Movilteinment tiene como principal población objetivo los jóvenes quienes tienen predilección por el uso de estos dispositivos para el entretenimiento. 2. MAPA DEL SITIO Inicio: página de inicio del sitio web. Nuestra empresa: datos relevantes de la empresa. Un nombre muy utilizado para esta sección es también: Quiénes somos?. Servicios: breve descripción de cada uno de los servicios a los que se dedica la empresa. Productos: catálogos: fotos y breve descripción de los productos más destacados Dónde estamos?: dirección dónde se encuentra la empresa. Contacto: información de contacto de la empresa.

2 3. LOGO El logo busca identificación principalmente en la población objetivo, por eso se asocia con juegos de entretenimiento. (Recuerde que este es un ejercicio ficticio que busca modelar algunos de los ejercicios que usted debe desarrollar para su proyecto de website) 4. DESCRIPCIÓN DE CADA SECCIÓN 4.1 Inicio La página tendrá un cabezote con el logo de la firma. Contiene un menú de acceso a las demás secciones el cual permanecerá en todas las páginas indicando cual es la página activa. En el área principal de la página habrá fotografías de jóvenes escuchando música en dispositivos móviles. Habrá un texto de presentación y bienvenida: Bienvenidos: Movilteinment es una empresa dedicada a la oferta de tecnología móvil para el entretenimiento, para las telecomunicaciones y para el trabajo. Contamos con un amplio catalogo de dispositivos móviles de última generación para juegos, escuchar música, organizar el trabajo, teléfonos celulares, Palms, mini computadores y todo lo que la tecnología móvil permite en diferentes ámbitos: personal y empresarial. Habrá una sección de la página dedicada a promociones de productos y ofertas especiales. Para este simulacro se seleccionó un producto de apple también ficticio, propuesto por Aaron Rusell 1 en su página personal: el ipod Flex. Habrá una sección de noticias recientes relacionada con el campo de la actividad principal de la empresa. Para esta sección se seleccionó una 1 Russell, Aaron. Página personal de Diseñador multimedia. Disponible en Internet el 05 de Enero de 2009 en:<

3 noticia sobre el lazanmiento de Vaio P: un mini portátil de Zony. El siguiente s el texto que acompañará la noticia: Titulo de la noticia: VAIO P, lo último en portátiles de Sony14Jan09 La serie VAIO P pesa 640 g, posee un completísimo teclado, cuenta con una pantalla de 8 pulgadas X-Black LCD que soporta resoluciones de hasta 1600 x 768 píxeles. Wireless y conectividad 3G son otra de sus brillantes características. Pero eso no es todo, por dentro lleva un procesador a 1.6 GHz (Atom, seguramente), disco SSD de 128 GB, webcam integrada, GPS y 2 GB de RAM. 4.2 Nuestra empresa Aparece el siguiente texto en el área específica apartada en el diseño: Movilteinment nace como una empresa enfocada hacia todos los campos de aplicación de la tecnología móvil: - El entretenimiento: Dispositivos móviles especializados para juegos. Consolas móviles. Dispositivos para almacenamiento y reproducción de música y videos: mp3, mp4, Ipds. - Las telecomunicaciones: teléfonos celulares con diversas funcionalidades. - El trabajo: Palms, blackberrys, Ipods y mini computadores. Los dispositivos móviles (Palmtops o handhelds, reproductores mp4, consolas para juegos, celulares) son aparatos de pequeño tamaño, con algunas capacidades de procesamiento, con conexión permanente o intermitente a una red, con memoria limitada que por lo general están diseñados para una funciones específicas, pero dotados de funciones accesorias, complementarias o auxiliares. Actualmente existe la tendencia a desarrollos multifuncionales de estos dispositivos como los iphones. Movilteninment está interesada no solo en la difusión en el uso de estas tecnologías sino en la información a los usuarios sobre los protocolos y estándares usados en estas para convertirlos en usuarios con conocimiento. En las demás áreas se observan: El menú, una imagen o fotografía de vitrinas de la empresa. 4.3 Servicios: Aparece el siguiente texto: - Mantenimiento y soporte técnico de dispositivos móviles vendidos por Movilteinment. - Orientación e información técnica sobre hardware y software de dispositivos móviles y tecnologías de programación y comunicación para dispositivos móviles.

4 - Entregas a domicilio de pedidos especiales. - Asesoría y Venta de productos en punto de venta. En las demás áreas se observan: El menú y una imagen o fotografía de personal de la empresa atendiendo público y llamadas en el call center. 4.4 Productos: Aparece un submenú con los siguientes ítems: Entretenimiento: - Miniconsolas - Reproductores mp4 Comunicación: - Celulares Trabajo: - Palms - Blackberrys - Minicomputadorer Esta página evolucionará hacia un catálogo con fotografías y fichas técnicas de los productos asociadas a un aplicativo para compras en línea. En esta sección igualmente aparece el menú principal. 4.5 Dónde estamos?: Aparece el siguiente texto: Estamos localizados en Bogotá D.C. en el centro comercial de alta tecnología, en un privilegiado sector de negocios al norte de la ciudad, sobre la carrera 15 con calle 77.Local L-21 Recuerde que este es un ejercicio ficticio luego no existe en realidad un local de la empresa en el sitio referenciado. Colocar aquí un gráfico correspodiente a un mapa simple del sector con la ubicación del centro comercial de alta tecnología. En la parte inferior de esta sección se pueden colocar también los teléfonos del punto de venta.

5 En esta sección igualmente aparece el menú principal. 4.6 Contacto: Aparece el siguiente texto: Si desea información específica sobre un producto o servicio le invitamos a comunicarse con nuestros asesores a través de los siguientes mecanismos: - Vía telefónica: Teléfonos: Vía correo electrónico: contacto@movilteinmen.com 5. GRILLA - A través de nuestro formulario de contacto: Elaborar aquí un formulario de contacto con estos campos: Nombre, correo electrónico, teléfono de contacto y Mensaje. Este ejercicio se puede desarrollar inicialmente en papel y lápiz y luego se puede desarrollar un bosquejo mas elaborado en el editor de imágenes GIMP.

6 En esta propuesta se usó un canvas o lienzo de 900 pixeles dejando un margen a lado y lado de 62 pixeles para una pantalla convencional de 1024x768 pixeles, que es la resolución de pantalla más usada actualmente. Se eligió una grilla de 12 columnas con separaciones de 4 pixeles entre cada una. Las zonas sombreadas con negro corresponden a cajas de contenido o de imágenes que se ubicarán en la página. La grillas se dividió finalmente en tres supercolumnas dejando la columna central más ancha para textos e imágenes de gran tamaño. 6. TIPOGRAFÍA Para los párrafos se usará Verdana de tamaño: 12 pixeles. y para los cabezotes, logo e imágenes con texto la fuente Boot SSi true type. Para los botones fuente: Andale SANS. 7. COMBINACION DE COLORES En el diseño predominarán: el fondo blanco combinado con elementos azules en diferentes tonos. 8. DISEÑO DE ELEMENTOS Por razones de tiempo y extensión de este documento sólo se mostrará el diseño de la Página de Inicio o home del sitio web. Cabezote: Se diseñó en el editor de imagen GIMP: Logo Logo con franja horizontal complementaria:

7 Imagen de la columna Izquierda de la grilla: Cajas de la columna derecha de la grilla: Un prediseño de todo el conjunto de elementos, hecho en GIMP se presenta en la siguiente página:

8 Diseño home o página de inicio del sitio web corporativo Ejercicio demostrativo

9 9. ENSAMBLAJE DE ELEMENTOS EN LAS PAGINAS Tal como se presentaron los componentes de la página de Inicio vamos elaborando cada uno así: - La grilla completa se elaboró en GIMP. - El cabezote es una imagen también elaborada en GIMP. - La imagen izquierda en este caso, cómo se trató de un ejercicio didáctico se compuso a partir de imágenes descargadas de Flikr, revisando que no tuviese restricciones de uso. En el caso de un diseño real, se deben tomar fotografías y componer las imágenes o contratarlas con un experto. - La sección de noticias será un aplicativo compuesto por una imagen y un banner 2 programado con JavaScript (En este caso sencillamente copiamos el código de un aplicación ya existente y lo adaptamos a nuestra página). - La sección de producto del mes es una película flv descargada del sitio de la referencia 1 y ensamblada a través de un reproductor de películas flv descargado de la pagina de JW player 3. 2 Ejemplos de javascript. Disponible en Internet el 05 de Enero de 2009 en:< 3 Reproductor JW de flv para sitios web. Disponible en Internet el 05 de Enero de 2009 en: <