Estudio De Proyecto Web

1° edición 26 de Septiembre 2011Diseño, realización y Contenidos Marcelo Rojas, Christian Gonzalez. Oliver Alfaro.

Guía Teórico Practico con el uso y evolución del encargo real de la web Krav Maga para Taller de Diseño Gráfico VI.

Impreso en Chile.

I Marco teóricoConceptos básico de mediosPágina xx

II Reconocimiento de etapas.Página xx

III Definición del tema Usuario Objetivo del proyectoPágina xx

IV Recopilación de antecedentesPágina xx

V Definición de viabilidad de contenidoPágina xx

VI Determinación de cronograma y presupuestoPágina xx

VII Control de variables y soportePágina xx

VIII Control de la arquitectura de la informaciónPágina xx

IX Control de DiseñoPágina xx

Introducción

Un nuevo semestre, un nuevo grupo y nuevos desafíos, esta vez nuestros conocimiento nos llevan a ámbito del diseño web, algo está en pleno auge desde 1993 donde se realiza el primer diseño web de una pagina con imágenes y muy limitada visualmente, don-de las conexiones a internet eran con cable de teléfono, monitores monocromos.

Todo esto a cambiado y evolucionado de la mano con múltiples software, y hardware, dispositivos móviles , la irrupción de nuevas plataformas, sistemas operativos, es todo un mundo de tecnologías que avanza vertiginosamente, esto nos obliga a estar actualizando nuestros conocimientos cada día.

A continuación presentamos nuestro informe donde presentamos paso a paso nuestra evolución informativa y gráfica que culmina en la creación de una página web para un cliente real.

Unidad i Marco Teórico

Unidad i

Conceptos

¿Que es Multimedia?

Según el diccionario de la Real Academia Española, Mul-timedia es todo objeto que utiliza conjunta y simultánea-mente diversos medios, como imágenes, sonidos y texto, en la transmisión de una información.

La Multimedia se clásifica de acuerdo a la interacción con el usuario, en base a esto, podemos definir tres tipos (Multimedia Lineal, Multimedia Interactiva e Hipermedia)

Multimedia Lineal.Se refiere cuando aplicación avanza de forma progresiva y el usuario no tiene el control sobre las acciones de las mismas.

Multimedia Interactivacuando el usuario puede realizar determinadas acciones sobre la aplicación como hacer clic en algunos objetos o botones que le permitan controlar el avance de la misma.

Hipermedia Cuando se combina la multimedia con el hipertexto, es decir, cuando se le permite al usuario tener mayor control de la aplicación mediante el uso de botones, textos, ima-genes y otros objetos.

¿Que es interactividad?

De acuerdo al diccionario de la RAE, se entiende por interactividad a la acción que se ejerce

recíprocamente entre dos o más objetos, agentes, fuerzas, funciones, etc.

Junto a este concepto surge uno nuevo que es el de interfaz, el cual parte de una conexión

física y funcional entre dos aparatos o sistemas independientes.

En nuestro proyecto usaremos una interfaz interactiva, la cuál permita al usuario navegar por lo distintos niveles del sitio, ayudado por botones, barras de scroll y enlaces, los cuáles conectarán con distintas páginas de redes sociales y sitios donde se puedan visualizar videos, en este caso usaremos la plataforma

Historia

UnidadI

Hosting

Para elegir el hosting apropiado para el proyecto en cuestión, se deben considerar ciertas características y condiciones del negocio para el cual desarrollaremos la web. Por ejemplo:

- El publico objetivo de la pagina está radicado en Chile, por lo que si bien existen hostings cuyos servidores se encuentran en el extranjero que pueden ofrecer muy buenas relaciones precio/calidad y velocidad global, conviene en este caso contratar un hosting en chile (con servidores locales), para evitar la latencia de larga distancia. - El mantenimiento y soporte técnico también es un factor a considerar, y en este caso también es preferible un servidor nacional que pueda recibir fácilmente consultas telefónicas, y que atienda en español.

- Siendo una web relativamente pequeña en tamaño (considerando los videos), no requiere una gran cantidad de Mb de alojamiento, sus principales necesidades son las de un buen servicio y soporte. Estimamos que la página difícilmente ocupara más de 300 Mb de espacio.El rango de precios en Chile para servidores de 300 Mb a 1 Gb es de 20.000 a 40.000 pesos anuales. Entre ellas, las mejores empresas cotizadas son tecnoera.com, hosting.cl y adx.cl.

Dominio

Nuevamente la localidad de el publico objetivo hará que prime la opción de un dominio .cl por sobre un .com o .net.Muchas empresas ofrecen dominios gratis por la contratación de hosting, pero pese a que puede llegar a abaratar costos, es preferible realizar el registro directamente en nic.cl (organismo que administra el sufijo .cl) para asegurarse de que el dominio quede a nombre de uno.La tarifa para la inscripción del dominio es de 18.900 la cual cubre 2 años de operación. Si se requiere continuar usando el dominio por un tiempo superior, se deve renovar el dominio, para lo cual se deberá pagar un monto de 9450 para el tercer año, 9.289 para el cuarto, 9.101 el quinto y disminuye sucesivamente.

Total de hogares

hogares tiene conexión a

Internet

El 60% de ellos tiene entre 25 y 54 años

7,1 millones usan internet

regularmente

41%

37%Google Chrome

35%Internet Explorer

24%MozillaFirefox

2%Safari

1.842.730 suscriptores de banda ancha

*Fuentes: Estudios de Statcounter, Nielsen, Cisco y Comscore.

Estudio sobre uso y accesibilidad de web de los posibles usuarios de

nuestra web.

Unidad iI Reconocimiento de etapas

de desarrollo

Unidad iI

Etapas

Planificación del sitio

Para el desarrollo de un sitio web que cumpla su función, se debe definir dicha función. En el caso de nuestro pro-yecto, el objetivo principal es el de expandir la clientela del negocio, y esto se logra a través de una correcta comunicación y promoción del mismo.

En este proceso, identificamos las siguientes tareas:

- Conocer el plan de negocio de la empresa: Para una planificación efectiva del proyecto, se debe en-tender primero como funciona el negocio. Esto involucra la definición de la Vision y Misión, la especificación de los productos o servicios ofrecidos, y el público objetivo al cual está dirigido el negocio.

- Definir el mercado objetivo y perfil de usuario del sitio:Que tipos de usuario son importantes para el negocio, y en qué orden de prioridad. Algunos grupos de usuario claves son: Clientes existentes, prospectos, proveedores, asociados, empleados, etc.

- Comprender el medio:

Internet es un ambiente técnico que cambia de manera muy rápida, es por ello que se debe conocer como se nave-ga y que mecanismos y dispositivos existen para ello, cómo funcionan los motores de búsqueda, cual es el estado actual de la banda ancha y cuál es la penetración de la internet en nuestro país, que funciones son populares para la experiencia de navegación actualmente, etc.

- Definición de funciones del sitio:Cuales son las tareas que realizarán los usuarios en el sitio, a que contenidos podrán acceder.

- Mapa de Navegación: Define el tamaño y alcance del sitio, y visualiza las rutas que tomarán los usuarios al navegar el sitio.

UnidadII

Unidad IiI Definición del Tema

Unidad IiI

Definición

Definición del tema.

La temática del sitio es Krav Maga, es el sistema oficial de lucha y defensa personal usado originalmente por las fuerzas de defensa y seguridad israelíes. Actualmente en Chile, existen dos academias que son las principales exponentes de este sistema de artes marciales, una de ellas es “Comando Krav Maga” dirigida por Rodrigo Ber-ner Niklistchek y la otra es “Krav Maga Chile” dirigida por el maestro Víctor Caro.

Definición del usuario.

Al considerar quienes serán los usuarios del sitio, es mejor considerar la generalidad más que algún grupo en particular. La audiencia no estará determinada por la clase de tecnología usada para acceder al sitio, una ver-dadera definición de la audiencia consistiría en quienes son, y cuáles son sus objetivos.

Consideramos que un sitio web de esta categoría está dirigido principalmente a clientes potenciales de recursos

medio-altos, es decir, clases sociales a partir de un nivel C3 con un rango de edad entre 18 a 40 años. Son personas que buscan mejorar su condición física, habilidad y confianza, que deseen aprender un sistema de autodefensa o interesados en el Krav Maga, su historia y principalmente, información acerca del instructor, estilos practicados y formas de contacto.

De esto, se desprende que la página deberá contar con la información profesional del instructor, métodos de contacto y dirección física, así como historia de la disciplina, noti-cias, etc.

UnidadIII

Objetivo del proyecto

Para trazar los objetivos del proyecto resulta útil considerar las siguientes preguntas:¿Se busca vender más a los clientes existentes?¿Se busca adquirir nueva clientela?¿Se busca abordar nuevos mercados?, ¿Cuáles?¿Se ofrecerán servicios online?, ¿Se busca reducir costos de marketing?La página debería apoyar los planes de negocio trazados por la empresa, por lo que el principal objetivo del proyecto es la expansión de la clientela en la región metropolitana. Esto se logra orientado el sitio hacia una mayor y mejor entrega de información acerca de precios, lugares de entrenamiento, horarios, etc, pero también a la difusión este arte. Esta funcionalidad contempla la posibilidad de un contacto más direc-to con el profesor (aludiendo a la incorporación de redes sociales) para simplificar las cosas al usuario.

Unidad IV Recopilación de antecedentes

Unidad IV

Recopilación

Recopilación

Es una fase que nos va a ayudar a establecer un punto de partida y a definir metas que se tendrán que cum-plir con el proyecto en cuestión. Nos proporciona una guía para trazar cuáles serán las posibles soluciones al comienzo de cualquier proyecto, sea cual sea la rama de diseño, gráfico, web, interiores o industrial.

El brief

Es un resumen en el que se da cuenta de las caracterís-ticas, metas y entorno de una empresa o producto. Esta información y proceso de conocimiento del cliente nos acerca más a sus necesidades para así tener un mejor panorama para realizar una planeación más efectiva. A grandes rasgos, un brief debe contener información general de la empresa (nombre, dirección, teléfono, sitio web, etc.) e información sobre diversos aspectos de la empresa, por ejemplo su “filosofía”, su público objetivo, su competencia, el medio en el que se desenvuelve, etc. Es importante dejar abierta la posibilidad para el cliente

de añadir lo que considere pertinente en el brief, asi como tener en consideración las estrategias comunicacionales y de manejo de imagen pasadas de la empresa.

UnidadIV

Evaluación de antecedentes

A partir del brief elaborado para el proyecto del sitio de Krav Maga Chile conseguimos profundizar nuestro cono-cimiento sobre cómo abordar las necesidades de nuestro cliente, y qué conceptos son los que deseamos proyectar a través de la página.

Sobre nuestro cliente. Nos dimos cuenta de que para nuestro cliente, su negocio conlleva necesariamente la necesidad de expandir la disciplina, y que esta se traspase a sus alumnos es su razón de ser maestro. Que las perso-nas interesadas tengan un lugar donde informarse, tener acceso a lugares de práctica y conocer este arte marcial a través de imágenes o videos.

A esto se suma una dimensión valórica del Krav Maga que se relaciona con su historia: fue creado por los judíos en la década de los 30 específicamente para defenderse de las agresiones de los nazis en Alemania. Actualmente la sede central es en Israel por lo tanto se dan asociaciones de conceptos como: Israel – judío – estrella de David; y en otro plano, el que es una disciplina que agrupa técnicas de varias artes marciales y se perfila como uno de los mé-todos más efectivos y letales de autodefensa (conceptos: defensa personal – cuerpo humano – militar).

Sobre el público objetivo. El cliente también nos proporcio-nó información crucial para entender el público objetivo de la empresa, punto que ha sido desarrollado en el capítulo

III. Se desglosa que el segmento con mayor represen-tación son adulto-joven y adulto, clase media-alta, que destinan tiempo después de sus empleos o estudio. Es necesario optimizar la información de forma que llegue lo más rápido cuando ellos lo necesitan, para que no sientan que es una pérdida de tiempo.

Sobre la competencia y el medio del negocio. En nuestro país existe solo una academia de la disciplina aparte de Krav Maga Chile, de nombre “Comando Krav Maga” dirigida por Rodrigo Berner Niklistchek. Se considera competencia directa además a distintas academias de otras disciplinas, que intentan responder a las mismas necesidades/público; y como competencia indirecta, a otros centros de deporte o recreación que apunten a un público similar.

Referentes

La búsqueda de referentes es a la vez un sondeo del estado actual de una parte del diseño web (de empre-sas pequeñas), y arroja luz sobre características de las gráficas y de ordenamiento de la información en el caso particular de las academias de artes marciales.

Referentes

Unidad V Viabilidad y contenido

Contenido

La importancia de los contenidos para un sitio web es algo evidente: sin ellos la comunicación es un gesto sin mensaje. Los contenidos son los que informan y conven-cen a los usuarios.

La temática de los contenidos del sitio es información acerca de precios, lugares de entrenamiento, horarios, etc, pero también a la difusión esta disciplina. En nues-tro proyecto los distinguimos según su tipo:Textos: presentes en noticias, actualizaciones de estado, información sobre el Krav Maga, sobre el instructor, etc. Parte de estos textos provienen de la pagina antecesora de la nuestra, otra parte que nuestro cliente nos propor-cionó en relación a lo que deseaba comunicar, y otra son los textos generados por la integración de redes sociales en el sitio.Imágenes y Videos: Proporcionados por el cliente en su totalidad. Las imágenes fueron tomadas a 180 dpi que serán retocadas según sea necesario y optimizadas para la web a 72 dpi.

La viabilidad del sitio está fuertemente atada a facto-res materiales como la disponibilidad tecnológica y de presupuesto, puntos que también son abordados en otros capítulos. Entre otros factores que afectan la viabilidad del sitio se encuentran la competencia tecnología de la persona que se encargará de mantener la página. Nuestro cliente nos indicó que sus conocimientos de programación son nulos y que tiene poco tiempo disponible para poder optimizar imágenes y contenido, por eso solicitó pedir actualización al administrador cada vez que sea necesario por un costo asociado por definir.

UnidadV

Unidad VI determinación de

cronográma y presupuesto

Cronograma

Su elaboración puede responder a distintas necesidades, por ejemplo, comunicar aspectos relacionados con los tiempos y plazos, planificar recursos, como herramienta de seguimiento, que nos de soporte para calcular el flujo financiero del proyecto. Dependiendo del uso que le dare-mos, tendremos que decidir sobre como lo elaboraremos, pero de todos modos el cronograma base probablemente sea siempre el que usemos para gestionar los tiempos.

Se deben considerar como fundamentales la determi-nación de los principales entregables del proyecto y su jerarquía. La consulta al equipo de proyecto nos ayudara a no perder de vista el alcance de este, para alcanzar un equilibrio entre no olvidar nada importante y tener un detalle abrumador que dificulte el uso de la información.A partir de estas metas, se determinan las actividades necesarias para realizarlos. La cantidad de actividades deberá tener relación con el nivel de control que necesi-temos ejercer luego.

Finalmente, se establece la secuencia de las activida-des recordando cuales son obligatorias y cuales son optativas, ya que en caso de tener que reducir plazos o

presupuesto esta información será vital. La estimación del esfuerzo de cada actividad (en horas-hombre), nos otorga control sobre la duración de las tareas.

UnidadVI Cronograma

Presupuesto

En esta parte veremos algunos detalles de los costos del proyecto como son hosting, dominio y diseño según los requerimientos del cliente, también analizaremos algunos gastos que debíó hacer el equipo creativo basado en las horas trabajadas, gastos de transporte, alimentación, consumo de energía eléctrica, etc.

Costo del Plan de Hosting sin Dominio

Según el peso de nuestro sitio web hemos tomado la desición de ocupar un plan de 200 MG según el tamaño de nuestra página, su valor anual es de $11.000 pesos el cuál incluye un soporte de 40 casillas de correo, 5 bases de datos y 10 subdominios. Según lo conversado en reuniones anteriores, el valor de este plan resulta muy conveniente para el interesado del sitio.

Costo del Dominio.

El valor inicial del dominio es de $18.900 pesos por los primeros 2 años, luego de ese periodo, varía según la cantidad de años que el interesado estime conveniente.

DISEÑO

OTR

OS

D

OMINIO HOSTING

Valores

Hosting: $11.000Dominio: $18.000Diseño y posicionamiento: $80.000locomoción y otros: $50.000

$11.000 $18.000 $50.000 $80.000

$11.000

$18.000 $50.000 $80.000

Presupuesto

Unidad VII

control de variables de

soportes

Unidad VII

Soportes

En la web encontramos tecnologías muy diversas que emergen, se integran y abandonan que conforman un entorno dinámico que debe ser entendido como tal para tomar decisiones en este ámbito. Estas decisiones re-quieren un aprendizaje sobre el estado actual de la web y responden a preguntas como ¿De qué forma maximizar la compatibilidad de los distintos navegadores y como los jerarquizamos?, ¿En qué lenguajes será programado el sitio?, ¿Qué Plugins utilizaremos?, ¿Qué programas utilizaremos en su creación?

En nuestro país, la penetración del internet es una de las mayores de América Latina, y actualmente este proceso se encuentra en una segunda etapa de expansión, hacia áreas rurales, aumento de la banda ancha y de disposi-tivos móviles. Google Chrome es el navegador más utiliza-do de Chile, superando este año a Internet Explorer y dejando atrás a Mozilla Firefox y juntos acaparan el 95% del mercado por lo que es decisivo lograr una correcta visualización del sitio en estos tres navegadores.

La estructura del sitio estará hecha en HTML, utilizando elementos Div, y CSS para estilos. Sobre ella se incorpo-ran recursos tales como:

Twitter: Para mantener actualizado minuto a minuto el estado del curso y posibles cambios que se pudiesen generar, este plugin es un JAVASCRIPT (lenguaje que permite crear acciones en la web).

Google Calendar: Calendario web a base de iframe (in-serción de un documento html dentro de otro principal). Google Calendar se actualiza fácilmente desde la cuenta google del cliente.

Google Maps: Objeto iframe, permite ver la ubicación del curso o sedes de Krav maga.

Youtube: Videos que se integran en el sitio con un iframe.

El proyecto no contempla el uso de flash, por la poca opti-mización que tiene, el uso de plugins actualizados, poca compatibilidad con dispositivos móviles, no reconocible por la indización de los buscadores puede perjudicar drástica-mente el número de visitas.

En su defecto se ocuparan tecnologías como javascrip, Spry, jquery y Lightbox.

UnidadVII

Unidad VIII

control de la arquitectura de la información

Unidad VIII

Arquitectura

UnidadVIII

Inicio

Instructor

Formulario

Rangos y

Cursos Realizados

(corriente arriba / corriente abajo)

Árbol de navegación

Galería Historia Contacto

Imágenes Video

Árbol de Navegación

Árbol de Navegación

Unidad IX

Unidad IX

Diseño

UnidadIX

KRR

ASIS

TE

MA

E

Wireframes

Wireframes: Boceto de nuestra web en base a la retroalimentación del cliente, nuestra y referentes, ocupando las distintas areas del arból de navegación, logrando hacer accesible todo el contenido que el cliente decea mostrar, por esto nuestro grupo realizo los siguientes bocetos, que fueron aprovados por el cliente, pasando a la etapa de diseño de gráficas estaticas.

Posicionamiento

con google +1

JavaScript

Jquery

Widget

Twitter

Widget

Google

Calendar

GAA

TAA

EIS

RA

RRE

LI

Widget

Google

Maps

Formulario de

Contacto PHP

Formulario de

Contacto PHP,

link a twitter e

información.

Utilización de

jquery lightbox

Construcción de html desde cero, ocupando javascript y widgets de información como twitter, google calendar y maps, nada de flash por la actualización del plugin ni videos por la misma razón, se desea hacer lo mas fluida y accesible la pagina web.

Gráficas Estaticas

Pagina principal (index) observa la centralidad e importancia del logo, menu superior donde se ubica las distinta paginas que tendra la web, Instructor, galerias, historia y contacto.

Se diseña un mensaje de bienvenida a la web, noticias como requisitos para ser alumnos y materiales.

Al borde derecho se adjuntan los widges como twitter donde el cliente podra actualzar a la persona que necesita las noticias, google calendar donde el instructor podra agendar sus evento y clases.

Primera pagina del menú donde nuestro cliente muestra su biografía, rangos y certificados, cursos realizados, y otros estilos que practica.

La Gráfica busca mostrar lo vital del Krav Maga

como tecnica de sobrevivencia en terrenos hostiles

Gráficas Estaticas

Segunda pagina del menú, Galerías donde el interesado podra ver las imagenes de los cursos en un slide show, el usuario podra ver foto por foto, o eligir cual ver en el menu inferior.

Itém de contacto donde el usuario podra contactar al cliente para efectuar consultas, y un mapa ofrecido por google maps, donde podra apreciar mejor la dirección de donde se imparten las clases.

Las tecnologías aplciadas a la

pagína facilitaran la comunicaión

entre el usuario y nuestro cliente.