Estudio De Proyecto Web
1° edición 27 de Septiembre 2011 Diseño, realización y Contenidos Marcelo Rojas, Christian González, 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 09 Reconocimiento de etapas. Página 13
Definición del tema Usuario Objetivo del proyecto Página 17 Recopilación de antecedentes Página 21
Definición de viabilidad de contenido Página 27 Determinación de cronograma y presupuesto Página 31
Control de variables y soporte Página 35
Control de la arquitectura de la información Página 39 Control de Diseño Página 43
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 página, con imágenes y muy limitada visualmente, donde las conexiones a internet eran con cable de teléfono y 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 mostramos 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.
07
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 clasifica de acuerdo a la interacción con el usuario, en base a esto, podemos definir tres tipos (Multimedia Lineal, Multimedia Interactiva e Hipermedia)
¿Qué 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.
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, imágenes y otros objetos.
09
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.
10
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 de youtube, la cuál irá enlazada a la pestaña historia del sitio.
Hosting elegido por requisitos del cliente. www.fullxhosting.cl
Historia
DNS: Domain Name Server o Servidor de nombre de dominio.
Verificación de inscripción del dominio
Dominio Nuevamente la localidad de el publico objetivo hará que prime la opción de un dominio .cl por sobre un .com o .net.
Dominio: Es el nombre que identifica un sitio web.
www.kravmagarm.cl
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 debe 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.
Cotización de Hosting
Que entregan estas compañías
FullxHosting
Hosting.cl
Adx.cl
Plan 200 Espacio 200 MB Transferencia mensual 10 GB Cuentas de e-mail 40 Bases de datos 5 Subdominios 10
Plan Básico
Plan Básico
Precio anual $17.000
Precio+iva anual $29.990
Espacio total Cuentas Mail Transferencia Bases MySQL Parking
300 10 Ilimitada 1 1
Espacio total Cuentas Mail Transferencia Bases MySQL Parking
+ Respaldos de emergencia semanales y mensuales de su cuenta de hosting ** + Soporte en español 7/24 y Zona Clientes + Migración de sitios webs hacia nuestra empresa de hosting sin costo alguno
5G 10 Ilimitada 1 1
Precio+iva anual $34.500
Panel de Control CPanel Soporte PHP - PERL Bases de datos MySQL Extensiones Microsoft Frontpage Soporte Adobe Flash Soporte POP Estadísticas
11
Reconocimiento de Etapas
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. En este proceso, identificamos las siguientes tareas:
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.
- Conocer el plan de negocio de la empresa:
- Definición de funciones del sitio:
Para una planificación efectiva del proyecto, se debe entender primero como funciona el negocio. Esto involucra la definición de la Visión 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:
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.
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. 13
II Unidad
Definición de los objetivos de la web: A través de una serie de preguntas al cliente, se definen los objetivos de la web, cuál es el mensaje que pretende proyectar y que es lo que busca con el sitio.
Marketing: Proceso en que se satisfacen las necesidades al crear e intercambiar bienes.
keywords: “Palabras Clave” son frases o palabras que definen lo que se entrega en la página web.
En estas pruebas se revisa el uso de la interfaz, la correcta vinculación de imágenes y direcciones.
Publicidad y marketing:
La estructura forma parte importante de la pre-producción del proyecto, se definen lugares específicos en donde irá cierta información y los comportamientos que estos espacios, tendrán.
El posicionamiento del sitio es fundamental para dar a conocer el proyecto, por este motivo se planifican diferentes estrategias para promocionar la página web, una de ellas es a través de las redes sociales las cuáles son visitadas con frecuencia por los clientes potenciales. Otro método de comunicación es el tradicional impreso el cuál se entregará a los interesados en obtener información acerca del producto que ofrece la institución o escuela, del función que cumple el folleto es la de integrar en su gráfica, la dirección del sitio web de Krav Maga.
Diseño y producción:
Actualizaciones:
Una vez aprobadas las muestras presentadas a nuestro cliente, se inicia la etapa de desarrollo de propuestas gráficas.
Con respecto a las actualizaciones que puede requerir el sitio, nuestro cliente prefiere que nuestro equipo realice las actualizaciones de su página web, ya que su conocimiento acerca de archivos HTML, CSS y servidores, es nulo.
Desarrollo de la estructura del sitio web:
Pruebas y comprobaciones: Para la pruebas y comprobaciones de nuestro sitio, deben participar todos o gran parte de los involucrados en el proyecto, tanto el cliente cómo el equipo desarrollador.
14
Etapas de desarrollo
Objetivos de la Web y equipo de Proyecto
Objetivos de la página web definidos por una entrevista con el cliente, estas son atraer y dar información para el interesado en esta disciplina, informar rápidamente a los alumnos de la agenda de clases para la semana. Equipo de proyecto conformado por Diseñadores con conocimiento en html, ccs, javascrip y editorial.
Estructura de Sitio Web
Diseño y Producción
Pruebas y Correcciones
Publicidad y Marketing
Actualizaciones
Estructura definida por los requerimientos del cliente, por un menú simple, con información definida y de fácil acceso se crea árbol de navegación y wireframes para dar un boceto de idea al cliente.
Una vez definida la estructura y los wireframes son aprobados se da paso a la etapa de diseño de las gráficas estáticas, donde se realiza un análisis gráfico, y tipográfico, para llegar al diseño final que igualmente pasara por las manos del cliente para su aprobación.
Luego de la aprobación de las gráficas estáticas, se pasa a la etapa de armado en html, ocupando todas las tecnologías que se especificaron en las reuniones con el cliente. Se subirá la pagina web en una dirección de prueba por ejemplo un hosting gratuito como ZobyHost, en las prueba participaran todo el equipo de diseño. Se realizaran las acciones de Marketing que se definieron con el cliente en el precio estipulado, estas son posicionamiento básico con google +1, utilización de palabras claves, la no utilización de flash para mejor posición en los buscadores.
Se descarto el uso de cms como wordpress por el nivel informático de nuestro cliente, por la baja frecuencia de actualización que tendría y por mantener un cliente en el tiempo. En caso de que nuestro cliente requiera actualización deberá hacernos saber para efectuar las tareas acordes por un precio extra.
15
Definici贸n del Tema
Unidad IiI
Definición Definición del tema.
yecto es la expansión de la clientela en la región metropolitana.
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.
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.
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 pro17
III Unidad
Estrato Socioeconómico de usuario.
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.
45% 18
Genero de Usuario
Rango de edad de usuario
Se puede observar que nuestro público objetivo es muy acotado, concluimos que son hombres en un rango de edad que va de 18 a 30 años y de estrato socioeconómico C2 y C3. Fuente: Entrevista con el cliente y alumnos.
19
Recopilaci贸n de antecedentes
Recopilación Recopilación
empresa, por ejemplo su “filosofía”, su público objetivo, su competencia, el medio en el que se desenvuelve, etc.
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.
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.
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
21
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 22
Brief: Es un documento, simplificado que sirve como punto de partida y referencia para el proceso creativo
Difusión: Expansión de acontecimientos, noticias o lo que se requiera.
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.
Brieft
El cliente desea entregar su producto a clientes potenciales, para esto necesita entregar cierta informaci贸n relevante al equipo desarrollador canales de difusi贸n efectivos 23
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
Wordpress: sistema de gestión de contenidos a modo de blog, diariamente actualizable.
Vemos webs realizadas en wordpress, html, y la utilización de javascript, también utilizan botones de link a otra páginas como Facebook, Twitter y youtube, utilización de mapas para la ubicación de lugares de entrenamiento. Estas páginas minimizan el uso de flash para poder ocupar los sistema de búsqueda. Utilización de paleta de colores oscuras que hace referencia al estilo de sobrevivencia en calle de Krav Maga, y paleta de colores referente al Estado de Israel.
www.israelikrav.com
24
www.kravmagacolombia.com
www.krav-maga-uk.com www.kravmaga.com
www.kravmaga.com
www.kravmaga5taregion.cl
25
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.
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.
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. 27
V
Seo: mejorar la posición de la página en los motores de búsqueda.
Widtget: pequeña aplicación que facilita la accesibilidad de contenidos.
Unidad
Optimización de Motores de Búsqueda (SEO)
Marketing de Motores de Búsqueda (SEM)
La optimización de los motores de búsqueda sigue la formula “si no pueden encontrarte, no existes”. Muchos sitios hacen uso excesivo Flash y otros gráficos que pueden ser atractivos para los usuarios, pero para los motores de búsqueda son invisibles. La idea es controlar la estructura de la página de modo de mejorar el posicionamiento del sitio en los motores de búsqueda. La repetición de determinadas palabras clave, títulos y textos del sitio, links entrantes y salientes, etc., son factores que bien manejados, aportan a la competitividad general del negocio.
El SEM se basa en anuncios pagados (como Google AdWords). Su relevancia radica en que son mostrados basándose en los términos de la búsqueda realizada y el momento en que se hizo, por lo que usualmente el público que es llevado a la web publicitante se corresponde con el público objetivo del negocio. Dichos anuncios es que se pagan por click, es decir que cada vez que el anuncio es clickeado, aumenta el costo del mismo.
Nuestro sitio considera el SEO, y por ello han sido implementados pasos particulares como el buen manejo de palabras clave, y en puntos importantes del código de la página como las descripciones meta, y los atributos alt y title de imágenes y links, y el control de otros puntos críticos como lo sería la verificación del contenido del header 1 y una estrategia de mejora del atractivo de crosslinks y de links internos. Dentro de este punto se incluiría también el nombre del dominio, kravmagarm.cl (Krav Maga Región Metropolitana), de acuerdo a un criterio que prioriza el uso de las palabras claves más relevantes.
28
Este tipo de promoción no fue considerada en el encargo del cliente para el sitio, por lo que no será considerada su implementación.
Optimización de Redes Sociales (SMO) La masividad de plataformas como Facebook, Twitter, Youtube o LinkedIn ha ido adquiriendo cada vez más importancia para negocios que desean promocionarse a través de internet. Esto se realiza normalmente tanto mediante anuncios pagados comunes, los que por lo general usan la información personal de los usuarios para determinar que anuncios le serán mostrados, y como la promoción que se
difunde utilizando a los propios usuarios como promotores indirectos. El mejor ejemplo de esto es el botón “Me Gusta” de Facebook. En el caso del sitio desarrollado, la presencia en las redes sociales está enfocada en una promoción indirecta a través de Facebook, Twitter, Youtube y Google+.
Contenido que posee nuestra pรกgina web, esta incluye widgets noticias, historia, material fotogrรกfico y material que se excluyo.
Widgets (google maps, twitter, facebook, etc)
Videos de entrenamientos Historia del Krav Maga etc.
Noticias Actualizaciones de estado Informaciรณn etc.
contenido web Fotos del instructor Sedes Entrenamiento etc.
no aplican
29
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.
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.
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.
31
VI Unidad
32
Cronograma
Presupuesto
00000 . 1 $111
$1$1 8.8.0 0
$
0000
DO
M
IN IO
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 debió hacer el equipo creativo basado en las horas trabajadas, gastos de transporte, alimentación, consumo de energía eléctrica, etc.
G TIN HOS
Presupuesto
Costo del Plan de Hosting sin Dominio
DIS
EÑO
$5
$$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.
$500.0 0 . 0 000
Costo del Dominio.
OT RO S
Según el peso de nuestro sitio web hemos tomado la decisió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 33
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.
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.
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). 35
VII Unidad
Nuestro proyecto pretende usar recursos tecnológicos por los cuáles el usuario pueda visualizar de buena forma en distintas plataformas y navegadores.
Widget de google maps utilizado para dar una referencia gráfica al usuario sobre una dirección. Google maps es un iframe que es insertar un documento html dentro de uno principal.
Un ejemplo sería el uso de Jquery para la galería de imágenes tipo marquesina, en vez de usar Flash, ya que su uso es limitado en algunos navegadores. La idea es que también el usuario pueda acceder al sitio desde su teléfono móvil. Cómo ya habíamos mencionado anteriormente, el propósito de este proyecto es que los usuarios puedan informarse, y no deben existir limitaciones, de ningún tipo. En la parte de formulario de contacto se ha pensado usar PHP y javascript para entregar a los usuarios, mayor interactividad con el sitio, javascript actúa inmediatamente cuando uno o varios campos del formulario no han sido llenados.
Widget de twitter es un javascript que permite ver las actualizaciones de esta red social en tiempo real, fácilmente actualizable desde dispositivos móviles.
Google Calendar es un iframe que enlaza a la cuenta de google, fácilmente administrable desde cualquier computador con acceso a internet, permitirá a nuestro cliente actualizar sus clases cuando lo requiera. 36
Estudio sobre uso y accesibilidad de web de los posibles usuarios de nuestra web.
Total de hogares La siguiente Información es de vital importancia ya que determina que tecnologías vamos a ocupar, que accesibilidad tiene el usuario al medio de internet, que compatibilidad debe tener nuestra página para los distintos navegadores.
1.842.730 suscriptores de banda ancha
41%
hogares tiene conexión a Internet
2%
Son factores fundamentales para cualquier Diseñador.
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.
37
Control de la arquitectura de la informaci贸n
Unidad VIII
Arquitectura La arquitectura de la información es la disciplina y arte de definir la estructura, organización, navegación, etiquetación e indexación de un sitio web. Es el rol de la arquitectura de la información el decidir cómo se va a estructurar un sitio, que clase de contenido contendrá y como acomodar el crecimiento futuro. Un esquema organizacional que puede tener sentido para una persona, para otra tal vez no lo tenga. En muchos casos el modelo de un sitio web no es capaz de acomodarse a los modelos mentales de los usuarios el tamaño y alcance del sitio mismo. La tarea de la arquitectura de la información es resolver aquellos problemas organizando el sitio de forma efectiva, con vista al objetivo primario. Dado que la AI define la estructura del sitio y básicamente determina su contenido, conviene realizar en las primeras etapas del proyecto. La fase de recopilación de la información entregará las metas y el ámbito. Con esta información se puede crear la estructura del sitio, en forma de mapa del sito o wireframe. Durante el desarrollo visual, la interface es mejor definida y se pueden hacer ajustes a la estructura. Para definir las áreas de contenido, nos hemos basado tanto en los referentes externos, como en un brainstorming sobre lo que los usuarios esperarán de nuestro sitio, haciendo a un lado aquellos contenidos cuya inclusión es impráctica en relación al enfoque de la página.
39
VIII
Árbol de Navegación
Unidad
Organizar la información para que pueda ser encontrada fácilmente, clasificándola según un esquema que dependerá de variables como los objetivos del negocio, el tamaño del sitio, su crecimiento futuro y planes de expansión, la audiencia, público objetivo y más. Las secciones del sitio (Home, Instructor, Galerías, Contacto), emergen al agrupar las áreas compiladas en el brainstorming. El etiquetado también debe ser claro y consistente a través del sitio y las etiquetas utilizadas deben poder ser entendidas por el usuario; en vez de “información de contacto”, utilizar sólo “contacto”. En este sentido, implementamos una navegación consistente y persistente, junto con pistas útiles como el mapa del sitio y la creación de links a través del logo para ayudar a mantener al usuario orientado. El sitio desarrollado utiliza una barra de navegación horizontal para los contenidos primarios, y navegación vertical para sub-menús, que sólo muestran páginas pertenecientes a la sección correspondiente.
Árbol de navegación simple donde se aprecia la dirección de flujo de información.
Inicio
Instructor
Galería
Imágenes
Historia
Video
Contacto
Formulario
Rangos y
Cursos Realizados
Árbol de navegación (corriente arriba / corriente abajo)
40
Árbol de navegación gráfico donde se aprecia las tipologías de la información exarbo presadas con colores. ega
Nuestro proyecto organiza los contenidos en estilo directorio por el hecho de que para los usuarios es familiar este modo organizacional (que también es usado en supermercados, librerías, tablas de contenido de un libro, etc.), en el que la información en el nivel superior ayuda a intuir como se ven los niveles inferiores. Mientras el visitante sigue los distintos links, la navegación de la página principal permanece constante. Los menús y submenús no debieran estar atestado con elementos que no describen las principales áreas de contenido; se deben excluir links externos, contenido descargable o direcciones e-mail. Por el tamaño del sitio, consideramos que un sistema de búsqueda no era necesario; la naturaleza y pequeño tamaño de los contenidos hace fácil su ubicación, y a la vez improbable que alguien necesite buscarlos a través de palabras clave.
Inicio
{
INstructor
{
galeria
{
historia
{
contacto
{
biografia rangos y certificados cursos y certificados cursos realizqdos otros estilos practicados
imagenes
video
formulario
41
Diseño Luego de definir el cronograma de tiempos, se definió en una reunión lo que el cliente deseaba diseñando un árbol de navegación donde se organizo la información, se buscaron referentes, y se genero una retroalimentación entre el cliente y nosotros donde compartimos ideas y que se podía aplicar a la pagina, se diseño wireframes, de la posible pagina, donde se estableció las tecnologías a aplicar, una vez realizado esto se presento al cliente en una nueva reunión, estas fueron muy bien aceptadas. Finalmente se paso al diseño de la Gráfica estática donde se analizo las imágenes a ocupar, el texto que entrega el cliente, la utilización tipográfica y las licencias de estas, luego se presentan al cliente dando victo bueno, e iniciando el proceso de armado HTML. En el diseño de la página se utilizaron imágenes y textos proporcionados por el cliente, se tubo por parte nuestra optimizar las imágenes para web a 72dpi, para el diseño se tomo especial cuidado en seleccionar tipografía de uso gratuito personal y comercial, también de que la tipografía a ocupar en los desarrollos fuese posible ver desde cualquier dispositivo.
43
IX
Wireframes: Boceto de nuestra web en base a la retroalimentación del cliente, nuestra y referentes, ocupando las distintas áreas del árbol de navegación, logrando hacer accesible todo el contenido que el cliente desea mostrar, por esto nuestro grupo realizo los siguientes bocetos, que fueron aprobados por el cliente, pasando a la etapa de diseño de gráficas estáticas.
Wireframes
* Medidas pueden cambiar dependiendo de la disponibilidad de la tecnología.
Unidad
Google +1: Botón de recomendaciones de google, aumenta la valoración de la página y crea posicionamiento.
Posicionamiento
JavaScript Jquery
Widget
S
E T M S I
A
con google +1
E
Widget Google Calendar
44
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 más fluida y accesible al usuario.
Flash: Es un formato propietario de adobe que reproduce contenido multimedia swf.
Javascript: Es el lenguaje que nos permite interactuar con el navegador.
A
Php: Lenguaje de programación, pensado para la creación de webs dinámicas.
Html: “HyperText Markup Language” Es el lenguaje por defecto de las páginas web.
T
E
IS R AE L I
Widget Google Maps
Formulario de Contacto PHP
Utilización de jquery lightbox
Formulario de Contacto PHP, link a twitter e información.
A G
A 45
Gráficas Estáticas
Página principal (index) observa la centralidad e importancia del logo, menú superior donde se ubica las distinta paginas que tendrá la web, Instructor, galerías, 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 podrá actualizar a la persona que necesita las noticias, google calendar donde el instructor podrá agendar sus evento y clases. EL cliente para actualizar su página como textos e imágenes, requiere contactarnos para cotizar los costos de esta tarea.
Twitter: Red social en base a microblogging, utiliza el formato de texto de no más de 140 caracteres, fácilmente accesible desde móviles.
46
La Gráfica busca mostrar lo vital del Krav Maga como técnica 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. Utilización de tipografía True Type “Capture it” trazada para los menús, esto ayuda a que no se necesitara la tecnología Font Face esto mejora la compatibilidad de navegadores.
Font - Face: Creada en 1998 es una regla css que permite usar en un sitio html tipografías que no estén instaladas en el quipo del usuario.
47
Gráficas Estáticas
Segunda pagina del menú, Galerías donde el interesado podrá ver las imágenes de los cursos en un slide show, el usuario podrá ver foto por foto, o elegir cual ver en el menú inferior.
JQuerry: Biblioteca de JavaScript que permite crear animaciones e interacción en la página web.
48
Las tecnologías aplicadas a la página facilitaran la comunicación entre el usuario y nuestro cliente.
Itém de contacto donde el usuario podrá contactar al cliente para efectuar consultas, y un mapa ofrecido por google maps, donde podrá apreciar mejor la dirección de donde se imparten las clases.
Google Maps: Servicio gratuito de mapas provisto por google, fácilmente accesible desde la página de google o gmail.
49
Estudio De Proyecto Web
Luego de las semanas de investigación, reuniones y diseños realizamos el presente informe que es solo un resumen de lo que hemos aprendido, conceptos e información nueva, que aplicaremos y actualizaremos durante toda nuestra carrera. Analizamos desde lo mas básico para poner en pie nuestra página web hasta el diseño de las gráficas estáticas que luego serán presentadas a nuestro cliente, entregando la comunicación que el desea con sus usuarios. A continuación podrás ver esta publicación en tu computador como un archivo digital o on-line en tu explorador, a través del CD- ROM que encontraras a la vuelta de la página.
51