Page 1


Estudio De Proyecto Web


1° edición 26 de Septiembre 2011 Diseñ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 II III IV V VI VII VIII IX

Marco teórico Conceptos básico de medios Página xx Reconocimiento de etapas. Página xx

Definición del tema Usuario Objetivo del proyecto Página xx Recopilación de antecedentes Página xx

Definición de viabilidad de contenido Página xx Determinación de cronograma y presupuesto Página xx

Control de variables y soporte Página xx

Control de la arquitectura de la información Página xx Control de Diseño Pá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, donde 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.


Marco Te贸rico


Conceptos ¿Que es Multimedia? Según el diccionario de la Real Academia Española, Multimedia es todo objeto que utiliza conjunta y simultáneamente 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 Interactiva cuando 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, imagenes 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.


I

Unidad

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.

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


Dominio Estudio sobre uso y accesibilidad de web de los posibles usuarios de nuestra web.

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

1.842.730 suscriptores de banda ancha

41%

hogares tiene conexión a Internet

2%

Safari

37% Google Chrome

24% Mozilla

7,1

Firefox

millones usan internet regularmente El 60% de ellos tiene entre 25 y 54 años

35% Internet Explorer

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


Reconocimiento de etapas de desarrollo


Etapas

Planificación del sitio

- Comprender el medio:

Para el desarrollo de un sitio web que cumpla su función, se debe definir dicha función. En el caso de nuestro proyecto, 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.

Internet es un ambiente técnico que cambia de manera muy rápida, es por ello que se debe conocer como se navega 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.

En este proceso, identificamos las siguientes tareas: - Conocer el plan de negocio de la empresa: Para una planificación efectiva del proyecto, se debe entender 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.

- 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.


II Unidad


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 Berner 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 verdadera 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, noticias, etc.


III Unidad

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 directo con el profesor (aludiendo a la incorporación de redes sociales) para simplificar las cosas al usuario.


Recopilaci贸n de antecedentes


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 cumplir 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ísticas, 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.


IV Unidad

Evaluación de antecedentes A partir del brief elaborado para el proyecto del sitio de Krav Maga Chile conseguimos profundizar nuestro conocimiento 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 personas 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 proporcionó 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 representació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 empresas 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


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 convencen 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 nuestro 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 proporcionó 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 factores 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.


V Unidad


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 daremos, 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 determinació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 necesitemos ejercer luego. Finalmente, se establece la secuencia de las actividades 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.


VI Unidad

Cronograma


Presupuesto

Presupuesto

00000 . 1 $111

$1$1 8.8.0 0

$

0000

DO

M

IN IO

G TIN HOS

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

DIS

EÑO

$$8 8 0 0 . . 0 0 0000

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.

$5

Costo del Dominio.

$500.0 0 . 0 000

OT RO S

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.

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


control de variables de soportes


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 requieren 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 dispositivos móviles. Google Chrome es el navegador más utilizado 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 incorporan 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 (inserció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 optimizació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ásticamente el número de visitas. En su defecto se ocuparan tecnologías como javascrip, Spry, jquery y Lightbox.


VII Unidad


control de la arquitectura de la informaci贸n

Unidad VIII


Arquitectura


VIII

Árbol de Navegación

Unidad

Inicio

Instructor

Galería

Imágenes

Historia

Video

Contacto

Formulario

Rangos y

Cursos Realizados

Árbol de navegación (corriente arriba / corriente abajo)


Árbol de Navegación


Dise単o


Unidad

Posicionamiento con google +1

JavaScript Jquery

Widget Twitter

E T M S I A S

IX

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.

E

Widget Google Calendar

K

R

A


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.

A T E RAEL I IS

Widget Google Maps

Formulario de Contacto PHP

Utilización de jquery lightbox

Formulario de Contacto PHP, link a twitter e información.

AG

A


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.


La GrĂĄfica busca mostrar lo vital del Krav Maga como tecnica de sobrevivencia en terrenos hostiles

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


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.


Las tecnologías aplciadas a la pagína facilitaran la comunicaión entre el usuario y nuestro cliente.

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.

Armado test  

test es solo un testttttt !

Read more
Read more
Similar to
Popular now
Just for you