Este documento presenta un informe comparativo de las páginas web de Nokia y Funkertech. La autora analiza diversos aspectos como la estética, menús y submenús, accesibilidad, diseño, uso de colores, tipografía e interactividad. Concluye que la página de Nokia está mejor planificada, es más intuitiva y ofrece mayor cantidad de información de manera ordenada, mientras que la página de Funkertech se ha quedado obsoleta y proporciona menos contenido de forma desorganizada.
1. PRUEBA A DISTANCIA
PEDIDO I (ANEXO ACTIVIDADES TEMA 1 Y 2)
Curso Experto Universitario en Acciones Web 2.0:
Estrategias y Herramientas Empresariales de Futuro.
ALUMNA: María del Mar Gómez Domínguez
Febrero 2012. Fundación UNED
2. PRUEBA DE EVALUACIÓN A DISTANCIA. PARTE I. María del Mar Gómez Domínguez
ÍNDICE
PRIMER EJERCICIO
Cuestionario
SEGUNDO EJERCICIO
Estética
Informe comparativo portales Nokia y Funkertech
Menús y Submenús
Accesibilidad
Diseño
Gama Cromática
Cabeceras y Títulos
Tipografías
Redes Sociales
Interactividad
Imagen y Movimiento
Conclusión
TERCER EJERCICIO
Puntos débiles
Análisis y Rediseño de la Web de Aurgi
Puntos fuertes
Estudio de la competencia
Neutralización puntos débiles
Acciones derivadas del estudio de la competencia
Otras acciones propias
Tipografía
Gama Cromática
Conclusión
ANEXO. ACTIVIDADES TEMAS 1 Y 2
1. Sobre Adobe Flash
3. Sobre HTML
2. Webs del Pasado
Curso Experto Universitario en Acciones Web 2.0: Estrategias y Herramientas
Empresariales de Futuro. Fundación UNED. Febrero 2012
3. PRUEBA DE EVALUACIÓN A DISTANCIA. PARTE I. María del Mar Gómez Domínguez
PRIMER EJERCICIO
Conteste a las siguientes cuestiones, razonando sus respuestas
1. ¿A quién pertenece Internet?
Internet es una red informática que a diferencia de otras redes del mismo signo, no tiene
propietario. Ni empresa, ni país, ni organismo deciden sobre ella. Es una red libre en acceso y
contenidos en todo el mundo.
Ante esta afirmación y ahondado en el propio contenido de la pregunta se puede plantear lo
siguiente ¿Es internet de los ciudadanos y de los poderosos (gobiernos-corporaciones como
Microsoft, Google y Apple-poder financiero)? O ¿es internet de los ciudadanos o de los
poderosos?.
Partimos de la base de que la mayoría de los avances tecnológicos se financian y se
promueven desde el ámbito de la defensa de los países. Así se desarrolló la carrera espacial
durante la Guerra Fría, por ejemplo, y así nace internet (Arpanet) en el departamento de Defensa
de EEUU en 1969.
Así que la paradoja es manifiesta. ¿Por qué la red eléctrica, la red telefónica, las redes de
comunicaciones terrestres, aéreas y marítimas tienen dueño e internet es libre y colectivo? ¿Por
qué se permite su acceso universal? ¿Nos hace libres o nos hace más vulnerables? ¿Es esta tierra
de nadie, tierra de todos, un lugar de soberanía colectiva o un instrumento de control
informativo?
Sin redundar en teorías conspiradoras, pienso que hay tanta razón en unas como en otras
cuestiones. Al margen de corrientes y posturas ambivalentes, la realidad es que la red de redes es
un instrumento potentísimo. Y al ser una herramienta, es responsabilidad de quien la usa.
Mientras que la comunidad de usuarios se multiplica día a día, ya existen claros ejemplos de
cómo pueden alentarse revueltas contra el orden establecido, así ha ocurrido con el fenómeno
bautizado como “la primavera árabe”. En contraposición a estos hechos ha quedado demostrado
cómo el poder ha podido bloquearla a su antojo: Los gobiernos de China, Siria o Argelia así lo han
conseguido en su momento. Asimismo, El Pentágono ya ha declarado internet territorio de
guerra 1.
Personalmente, creo que afirmar que internet no tiene dueño puede ser tan iluso como
temerario. No obstante, la firmeza de esta evidencia, es la única que puede seguir haciéndola
posible. Así que, por ello, no seré yo quien la cuestione: Internet es y será libre.
1
http://tecnologia.elpais.com/tecnologia/2011/07/15/actualidad/1310720469_850215.html
Curso Experto Universitario en Acciones Web 2.0: Estrategias y Herramientas
Empresariales de Futuro. Fundación UNED. Febrero 2012
4. PRUEBA DE EVALUACIÓN A DISTANCIA. PARTE I. María del Mar Gómez Domínguez
2. ¿Un navegador puede acceder a una página web sólo con una dirección IP?
Sí. Siempre se entra a las webs a través de una dirección IP, todas las páginas tienen una
dirección IP pero el nombre que usan es más fácil de recordar que los cuatro octetos que
forman cada dirección. De eso se encarga el DNS (Domain Name System) de aplicar un
nombre a cada dirección sin que se produzcan repeticiones
3. ¿Bing es el navegador de Microsoft?
No. Bing es un motor de búsqueda de Microsoft. El navegador que trae integrado el
sistema operativo de Windows es Internet Explorer. Los navegadores son aplicaciones
específicas para poder visualizar las webs. Mientras, los motores de búsqueda son servicios de
internet para dar una solución óptima a tu registro. Sin navegador, no puedes usar los
motores de búsqueda.
4. ¿Un portal y una web son lo mismo?
No. Un portal es un sitio web formado por múltiples páginas web. Posee una dirección y
un conjunto de páginas web estructuradas y organizadas rigurosamente. Una página web no
tiene por qué responder a una estructura inicial. David Morrison, de Lotus, lo define así,
usando el concepto PORTAL como acrónimo: Personalización para usuarios finales.
Organización del Escritorio. Recursos informativos divididos. Trayectoria o seguimiento de las
actividades de los usuarios. Acceso a base de datos. Localización de gente o cosas
importantes.
Según la información aportada en el Manual del Curso, un buen portal debería identificar
al usuario que ya ha lo ha visitado y ofrecerle la oportunidad de personalizar aspectos y
contenidos.
Los gestores del portal podrán utilizar la información derivada de la identificación del
usuario para un objetivo básico: anticiparse a sus necesidades o preferencias tanto en el
ámbito del servicio como en el del marketing.
Un portal, además, suele incluir servicios añadidos como correo electrónico gratuito,
almacenamiento de páginas, comercio electrónico.
Por su parte, una página web es tan sólo un hipertexto en cuya apariencia encontramos
combinaciones de textos, audio e imágenes de manera opcional.
5. ¿Paypal permite comprar cualquier tipo de productos?
No. No permite comprar productos no físicos como dominios o ebooks, aunque buscando
en Internet dan fórmulas para poder hacerlo, pero no lo he comprobado.
Curso Experto Universitario en Acciones Web 2.0: Estrategias y Herramientas
Empresariales de Futuro. Fundación UNED. Febrero 2012
5. PRUEBA DE EVALUACIÓN A DISTANCIA. PARTE I. María del Mar Gómez Domínguez
6. ¿A qué se le denomina comercio C2C?.
Consumer to consumer, se llama así a las webs de comercio electrónico donde los
consumidores finales actúan de vendedores y consumidores. El ejemplo más popular puede
ser Ebay. Otro ejemplo en España sería Segundamano.es.
7. Ponga tres ejemplos de webs dedicadas al comercio B2C y otras tres de B2B.
Business to Consumer: www.amazon.es: vende libros y productos electrónicos y digitales,
www.dreivip.com: vende marcas a buenos precios www.obni.es: vende objetos de diseño y
papelería
Business to business: www.Cibeles.net: ofrece plataformas y gestores de contenidos
personalizados para periódicos y revistas, www.wurth.es: ofrece maquinaria para distintos
sectores industriales www.quirumed.com: ofrece suministros médicos para empresas del sector
8. ¿es el lenguaje PHP un lenguaje para crear páginas web?
No exactamente. PHP es un lenguaje de programación para crear sitios web, un conjunto
de páginas ligadas entre sí con base de datos común. El lenguaje de programación base para crear
páginas web es HTML, luego existen otros para implementarlas con efectos especiales e
interactividades
9. ¿Para qué sirve un FTP?
Un FTP (File Transfer Protocol) sirve para enviar ficheros de datos por internet de un
ordenador a otro. Es ideal para archivos pesados que no pueden enviarse por correo electrónico.
Las empresas informáticas ahorraron grandes costes de envíos en soportes físicos gracias a este
protocolo.
10. ¿Qué es un iframe? Busque dos ejemplos de páginas con iframes.
Un iframe es una etiqueta <iframe> que permite insertar una página de HTML en otra
página de HTML. Funciona como una ventana a otro lugar dentro de la página principal. Son
pequeños marcos que delimitan una zona de trabajo donde se incluye una página completa,
normalmente en otra ubicación y un servidor ajeno. Facebook ha empezado a hacerlo en las
páginas de empresa
[{iframeUri:'https://accounts.y
outube.com/accounts/CheckConnection?p
mpo75https%3A%2F%2Faccounts.google.c
om46v0751426184581',domainSymbol:
'youtube'}]
Curso Experto Universitario en Acciones Web 2.0: Estrategias y Herramientas
Empresariales de Futuro. Fundación UNED. Febrero 2012
6. PRUEBA DE EVALUACIÓN A DISTANCIA. PARTE I. María del Mar Gómez Domínguez
<iframe name="fbfanIFrame_0" frameborder="0"
allowtransparency="true"
src="http://www.connect.facebook.com/widgets/fan.php?api_k
ey=5db8d28942f242c6f6da48ce992d8e65&channel_url=http%3
A%2F%2Fwww.sotograndedigital.com%2Factualidad%2Fdos-lunas-
acogera-su-primer-concurso-social-de-doma
clasica%2F%3Ffbc_channel%3D1&id=115000015286956&na
me=&width=300&connections=10&stream=0&logo
bar=1&css=" class="FB_SERVER_IFRAME" scrolling="no"
style="width: 300px; height: 275px; border-top-style:
none; border-right-style: none; border-bottom-style: none;
border-left-style: none;
border-width: initial; border-color: initial; border-
image: initial; "></iframe>
SEGUNDO EJERCICIO
Informe comparativo de las webs de Nokia y Funkertech
Mis preferencias para escoger esta opción (la B) radican en que puede compararse una
página actualizada, desarrollada en 2012, con otra desfasada, creada en julio de 2009.
La página de Nokia responde a una planificación profesional con una campaña previa
donde han querido recoger las opiniones de los usuarios para el nuevo sitio (este dato ha podido
contrastarse después de visitar en www.archive.org la web de Nokia España a 20 de julio de 2011
en la que saltaba una encuesta al usuario antes de acceder a la página donde solicitaban sus
preferencias para mejorar la experiencia de visita).
No ocurre lo mismo con la página de Funkertech, creada a finales de 2009, como indican
en su historial de noticias ”15 Julio '09: Se inaugura el nuevo portal de funker mobile,
www.funkertech.com, con nuevos contenidos, nueva imagen, nueva interacción con el
usuario...Todo pensado para ofrecerle la mejor y más detallada información” 2. Desde entonces
ha sido administrada sin actualizaciones importantes (la cabecera de 2009 ha sido cambiada por
la actual, dato contrastado en www.archive.org con la web de Funkertech a 17 de enero de 2010).
2
http://www.funkertech.com/Noticias.php
Curso Experto Universitario en Acciones Web 2.0: Estrategias y Herramientas
Empresariales de Futuro. Fundación UNED. Febrero 2012
7. PRUEBA DE EVALUACIÓN A DISTANCIA. PARTE I. María del Mar Gómez Domínguez
A simple vista, en la primera pasada podemos diferenciar entre una página realizada por
profesionales para una gran compañía internacional de telefonía (Nokia, a partir de ahora N), y
una página de factura artesanal para una mediana empresa de importación de terminales chinos
ubicada en la provincia de Toledo (Funkertech, a partir de ahora F).
Estética
Menús y submenús
Mientras la página de N es muy intuitiva y de fácil navegación, la de F está
encorsetada y su navegación incómoda.
Los menús de N se despliegan suavemente sin desorientar al usuario porque el
contenido se expone en el centro de la página donde se ha centrado nuestra visión,
usando slides. En cambio, los contenidos de F se despliegan en distintas ubicaciones de la
página, dependiendo del menú que cliquees, lo que hace que el usuario se desoriente
creando una sensación clara de desorden.
Los menús de N se despliegan con imágenes, los de F lo hacen a través de tablas
muy básicas. La mayoría de los recursos usados en N están vinculados, puedes seguir
abriendo nuevos contenidos una vez desplegado el menú. En cambio, en N, al pinchar en
los contenidos del menú, los submenús prácticamente no existen, siendo páginas planas y
muy limitadas que sólo derivan a la información básica del menú de la página de inicio.
Vamos a fijarnos en cómo venden su principal producto: los móviles. En N, al
clickear en Productos los teléfonos se despliegan ante la vista y tan sólo pasando el cursor
por encima se puede acceder a sus distintos modelos y características, triplicando la
información de cada terminal. En F, el menú es estático y es necesario hacer doble click
cada vez que quieras ver otro modelo, para que se despliegue el menú de móviles de
nuevo y escoger un nuevo terminal. Una foto y una lista de características es la única
información que ofrecen. Como conclusión N ha adaptado su web a todos las
posibilidades que ofrece la programación, primando la sencillez y la comodidad, dos
conceptos que antes eran tendencia y ahora son de obligado cumplimiento si se quiere
lograr el éxito. Por su parte, F, no ha progresado en su desarrollo, su web tiene la estética
propia del pasado y sus menús son muy básicos, derivando a páginas planas con escasa
información
Mientras que en N podemos hacer un recuento de 38 llamadas en su página
principal a distintas informaciones, en F son sólo 15, dos datos que constatan la diferencia
en cuanto a volumen de información ofrecida en los menús principales.
Curso Experto Universitario en Acciones Web 2.0: Estrategias y Herramientas
Empresariales de Futuro. Fundación UNED. Febrero 2012
8. PRUEBA DE EVALUACIÓN A DISTANCIA. PARTE I. María del Mar Gómez Domínguez
Accesibilidad
Para analizar la accesibilidad de ambas webs he usado el validador del World Wide
Web Consortium, W3C, con el que he obtenido los siguientes resultados. La página de N
contiene 21 errores y 1 aviso y la página de F 33 errores y 9 avisos.
Ante ambos resultados, las conclusiones son evidentes: ni los desarrolladores de
Nokia ni los de Funkertech han tenido en cuenta este concepto.
Tal vez sea más acusado que los de N hayan ignorado hacer accesible su página, ya
que está recién estrenada y debería de haber contado con los estándares establecidos
para ello desde el inicio del proyecto. El lema ‘Conecting People’ parece que ha cojeado
en este asunto.
La mayoría de los fallos de N se deben a la ausencia de etiquetado, más destacable
sobre todo en los menús y submenús. Las etiquetas son mínimas en la página principal
(está etiquetada sólo la marca y el botón de inicio) lo que provocará que una persona con
problemas de accesibilidad no pueda entender la página.
En la página de F no existen las etiquetas y los colores de los elementos de las dos
fotos que ocupan la mayoría de la pantalla se sobreponen por lo que se hace difícil leer el
texto. Sólo están etiquetados los tres iconos (gifs básicos) que permiten imprimir, enviar o
añadir a favoritos.
Diseño
Gama cromática empleada
Haciendo uso de Kuler, estas son las dos gamas cromáticas empleadas en cada página:
A pesar de la gama cromática que proporciona la
nube de Adobe, observando la página puede apreciarse
que no existe un proyecto de color, simplemente se ha
usado el color del logotipo y se ha ubicado una foto en el
centro de la página. Los distintos tonos de naranja sobre la
fotografía tornan ilegibles en algunas zonas.
En la página de Nokia, se observa un cuidado
grafismo en tonos fríos, siendo un ejemplo de diseño
renovado, donde predomina el azul, haciendo un guiño a
Microsoft en su nueva andadura como socios que
comparten sistema operativo de sus móviles. La
luminosidad de la foto trasera crea fondo en acertado
contraste con la imagen central, otorgando profundidad y
relieve al resultado final.
Curso Experto Universitario en Acciones Web 2.0: Estrategias y Herramientas
Empresariales de Futuro. Fundación UNED. Febrero 2012
9. PRUEBA DE EVALUACIÓN A DISTANCIA. PARTE I. María del Mar Gómez Domínguez
Cabeceras y títulos
La cabecera en los diseños web actuales de marcas tiende a integrarse con el conjunto.
Así ocurre en el caso de N, donde Nokia es un elemento más que no prevalece sobre el resto, eso
sí, se mantiene arriba. En cambio la cabecera de F continúa siendo la parte más importante de la
página. En los últimos años ha cambiado la manera de leer las páginas de Internet, el marketing
digital cada vez está más lejos del copia y pega del folleto en papel que empezó siendo. Las web
comerciales se convierten en un atractivo lugar donde interactuar con el usuario para hacer
memorable su experiencia y aumente el éxito.
Tipografías
Ambas optan por usar Arial, una de las tipografías más habituales en Internet. No
obstante, F usa una Bauhuaus con la intención de mejorar el grafismo de la página, aunque no
está claro que lo consiga. Mientras que N logra Uniformidad con el uso armónico de colores,
grafismos y tipografías (difiere la del lema principal “elegante y diferente” pero guarda la estética
de Arial), en F se conjuga una suerte de desorden que parece responder a un cambio de
elementos sin una planificación previa.
Redes Sociales
Mientras que N ubica en sitios preferentes los links de facebook y twitter, en la página de
F no ha llegado todavía la interrelación entre redes sociales, comunicación y marketing.
Interactividad
En F, la interactividad con el usuario se limita a un botón de contacto donde se abre un
formulario para mandar un email. Por su parte, N, intenta que la experiencia de cada usuario se
adapte a sus preferencias, incluyendo descarga de aplicaciones e información atractiva sobre
nuevos servicios y nuevos terminales. Destaca la aplicación de comparativas entre los terminales
que desee el usuario para decidir cuál es el que más le convence.
Imagen y Movimiento
La web de F es estática en todas sus páginas. Desde la principal, donde dos archivos jpg
(uno, el más destacado, sin siquiera vincular) son el máximo logro, hasta el resto de subsecciones
donde el texto, a veces sin formato, se acompaña en las mejores ocasiones de unos dibujos que
no están mal, pero que en el contexto general pueden decir bien poquito.
En cambio en N, la página baila de forma elegante con un alto grado de intuición y un
elevado número de slides interactivos que dan un acertado dinamismo a la página sin hacerla
pesada, al no disponer de vídeos que necesiten cargarse.
Curso Experto Universitario en Acciones Web 2.0: Estrategias y Herramientas
Empresariales de Futuro. Fundación UNED. Febrero 2012
10. PRUEBA DE EVALUACIÓN A DISTANCIA. PARTE I. María del Mar Gómez Domínguez
CONCLUSIÓN
La comparativa entre estas dos páginas permite concretar las siguientes conclusiones: el
portal de Nokia es un sitio recién actualizado: dinámico, intuitivo y social mientras que el portal
de Funkertech es un sitio desactualizado creado en 2009: estático, plano y desprovisto de
interactividad.
En cuanto a estética, la accesibilidad de ambas es defectuosa, sin las necesarias etiquetas
que permiten a personas con dificultades de acceso poder leer su contenido. En cuanto a menús y
submenús, tenemos al portal de Nokia, estructurado e interactivo frente al portal de Funkertech,
que transmite cierta idea de desorden por el descuadre de sus contenidos y el eterno retorno al
que nos obliga al menú principal para ver otros productos. La sencillez y la comodidad frente al
desorden y la complejidad.
En cuanto a información, la web de Nokia triplica en contenidos accesibles a la web de
Funkertech. En cuanto a diseño, mientras el portal de Nokia responde a un estudio planificado del
color, el de Funkertech se adapta a la cabecera. Mientras que Nokia integra la cabecera en el
producto final, Funkertech la resalta, y finalmente, mientras Nokia maneja con profesionalidad las
tipografías, en Funkertech se usan de manera aleatoria.
Finalmente, en cuanto a interacción con el usuario, Nokia muestra un lugar preferente
para las redes sociales, inexistente en Funkertech. La marca escandinava ofrece aplicaciones de
juegos y servicios en cómodos e intuitivos slides mientras que en Funkertech todavía no se
alcanzan esos niveles de excelencia.
Así que, podemos concluir en que, a nivel tecnológico, la página de Nokia y la de
Funkertech se parecen lo que un joven loco por los gadgets electrónicos y una madre que no sabe
escribir un sms con el móvil : comparten genes (el código HTML) pero poco más.
TERCER EJERCICIO
ANÁLISIS Y REDISEÑO DE LA WEB WWW.AURGI.COM
1.- Puntos débiles
- El primero, salta a la vista: la página está excesivamente cargada, con numerosos elementos
innecesarios en la página principal.
- Accesibilidad: faltan etiquetado de todos los elementos y un botón de inicio para poder regresar
a la página principal.
- Los biseles y relieves son poco recomendables en la actualidad por ser confusos, visualmente
complejos y por su estética. La página usa biseles y relieves en botones y tipografías.
-La información del producto está diseñada para alguien con conocimientos previos de los
productos.
Curso Experto Universitario en Acciones Web 2.0: Estrategias y Herramientas
Empresariales de Futuro. Fundación UNED. Febrero 2012
11. PRUEBA DE EVALUACIÓN A DISTANCIA. PARTE I. María del Mar Gómez Domínguez
-Los menús se duplican y con ellos el acceso a la información. Sobran botones con información
innecesaria o reubicable. Los submenús también están obsoletos en cuanto a diseño y se solapan
con otros contenidos.
-La información de los productos es muy plana, se limita a un jpg del folleto.
-Se abusa de los banners.
-Se repite en pequeño y varias ocasiones la información de la tienda.
-Aurgi TV es pobre en contenidos.
2.- Puntos fuertes
- El motor de búsqueda para seleccionar el producto a medida es muy útil para la venta de este
tipo de comercio electrónico
-En general, la información es eficiente, aunque mejorable
- La gama cromática de la página se adapta con acierto a los colores de la imagen corporativa
causando una buena impresión estética.
-Cuentan con Florentino Fernández como valor añadido, un personaje popular de simpatía
generalizada entre la opinión pública.
1.- REDISEÑO
El primer paso es estudiar qué están haciendo la competencia nacional y las grandes
marcas de neumáticos internacionales en internet.
Aurgi es una importante cadena nacional de talleres mecánicos de servicio rápido que
comparte mercado con Midas, Feuvert y Norauto. En general, sus cuatro portales comparten
contenidos y, a mi juicio, puntos débiles. El principal: la estética del folleto publicitario propio del
buzoneo sigue marcando la imagen general de las empresas en Internet.
El primer objetivo que debemos marcarnos como profesionales es convencer al cliente de
que Internet ofrece posibilidades que van más allá de los folletos tradicionales (un soporte que
permanece atrapado en el letargo infinito del “horror vacui” porque funciona). Es un reto
bastante complejo porque, normalmente, este tipo de clientes, pertenece a una generación
inmigrante digital, que todavía se muestra recelosa ante el éxito de estrategias basadas en el
comercio electrónico y las redes sociales. Al cliente se le presupone un interés prioritario en el
buzoneo y el anuncio de televisión como herramientas para conseguir el éxito publicitario.
El equipo de marketing y comunicación es el que debe convencerle de que se trata de
soportes absolutamente independientes. Así, lo ha conseguido, por ejemplo, la marca de
Neumáticos Good Year, con una portada preciosa y sugerente, (aunque todavía defectuosa).
Curso Experto Universitario en Acciones Web 2.0: Estrategias y Herramientas
Empresariales de Futuro. Fundación UNED. Febrero 2012
12. PRUEBA DE EVALUACIÓN A DISTANCIA. PARTE I. María del Mar Gómez Domínguez
VENTAJAS
¡Guau! Preciosa, limpia, funcional y sencilla.
DEFECTOS
Falta vínculo con redes sociales y tiene errores en
el vínculo de Company Info (podrían ponerle
Versión Beta en algún lugar para saber que se
encuentra en proceso de actualización)
Creo que la tendencia actual camina a este tipo de presentaciones, ya hemos visto en los
ejemplos de este curso cómo comparten este estilo grandes marcas internacionales: Nokia,
McDonalds, Apple, Scientificname. A mí, personalmente, me encanta.
Pero ¿cómo convencer al cliente?, creo que debemos poner mil oídos a su idea de
negocio e intentar fusionar ambas. Realmente, como nuestro cliente, gran parte de su cartera de
clientes son inmigrantes digitales pero, ¿se acercan a internet a conocer su producto o a solicitar
su servicio? ¿O son otros, los que viven el entorno digital, a los que puede captar ofreciendo
eficacia y funcionalidad en la web?. Nosotros tenemos la obligación de informales de que una
web no es un folleto en internet, el cliente puede sacarle mucho partido al portal si el vendedor le
ofrece los contenidos adecuados.
Continúo con el estudio de la competencia nacional directa para sacar datos que puedan
hacernos mejorar la web de Aurgi.
De Feuvert nos quedamos con su
interactividad y mejora de experiencia del usuario. Ofrece
un aplicación gratuita fabulosa para acordarte de la
revisión de tu coche y de dónde lo aparcaste. Pero sólo
para Iphone. Nos la apuntamos pero también la
ofreceremos para Android.
De Norauto nos quedamos con sus básicos y
acertados servicios:
- Solicitud cita previa online
- Servicio espacio propio para el cliente, ventaja de los
portales web: en él puede consultar puntos, establecer
alertas para próximas fechas de revisión y consultar el
histórico de compras. Este servicio complementa a la APP de Feuvert y será muy útil para los
clientes que no posean smarthphone.
Curso Experto Universitario en Acciones Web 2.0: Estrategias y Herramientas
Empresariales de Futuro. Fundación UNED. Febrero 2012
13. PRUEBA DE EVALUACIÓN A DISTANCIA. PARTE I. María del Mar Gómez Domínguez
Midas parece que tiene el servicio web más
actualizado de los cuatro (ya cuenta con cita previa y
espacio cliente) con aportaciones eficaces. Nos quedamos
con las siguientes:
-Obligado vínculo a redes sociales
-Consejos de mantenimiento para AurgiTV
Una vez analizada la competencia, podemos manifestar que la web de nuestro cliente es
la más básica, pero aún así cumple con funciones importantes: localizar tienda, localizar producto,
pedir presupuesto.
Así, una vez analizada la competencia nacional, paseamos por las webs de las marcas de
neumáticos internacionales más populares, sin que nos llame la atención grandes aportaciones
para mejorar nuestro producto. Hemos visitado las webs de http://www.nexentireusa.com/ ,
http://www.hankooktire-eu.com/es/, http://es.bfgoodrichtires.com/bfgoodriches/index.jsp,
http://www.avontyres.com/, http://www.michelin.es/, http://www.falkentire.com/,
http://www.kumhotire.com/gateway.html.
Realmente son empresas más específicas, no son talleres rápidos de automoción. En este
proyecto creo que es suficiente con el estudio de la competencia realizado. En una Fase II, que no
vamos a desarrollar, podría incluirse el estudio de webs de empresas paralelas de otros países.
2.- . ACCIONES PROPIAS PARA MEJORAR NUESTROS PUNTOS DÉBILES
- PÁGINA SOBRECARGADA: Eliminar banner superior, banner de Mapfre (seguro que se puede
prescindir de ese ingreso publicitario si existe), todos los elementos de la cabecera que no sean la
marca y el slogan van fuera (teléfono, menú, icono, correo electrónico). Eliminar cuadro de
descarga de folleto
- ACCESIBILIDAD: Etiquetar todas las entradas y ubicar un botón de inicio debajo del nombre de la
marca en la cabecera. Conseguir el certificado de W3C.
- BISELES Y RELIEVES: Eliminar biseles y relieves de botones y tipografías
-INFORMACIÓN PRODUCTO ESPECIALIZADA: Aportar más información básica
-MENUS Y SUBMENÚS: Mejorar hacia la sencillez con un menú vertical donde se desplieguen
submenús sin biseles y relieves y se reorganice la información haciéndola más sencilla y no
redundante
-INFORMACIÓN PRODUCTOS PLANA: cambiar los .jpg de tabla de productos y precios (escaneados
del folleto)por slides interactivos donde se muestren las características del producto. Ofrecer la
opción interactiva de poder comparar entre sí los que más le gusten al usuario.
Curso Experto Universitario en Acciones Web 2.0: Estrategias y Herramientas
Empresariales de Futuro. Fundación UNED. Febrero 2012
14. PRUEBA DE EVALUACIÓN A DISTANCIA. PARTE I. María del Mar Gómez Domínguez
- ABUSO DE BANNERS (ya los hemos eliminado)
-REPETICIÓN INFORMACIÓN TIENDA, resumir al máximo el concepto. Por ejemplo. “Talleres de
revisión rápida de automóviles y neumáticos distribuidos por todo el país”.
-Aurgi TV POBRE EN CONTENIDOS: Aumentar su contenido con videos divulgativos sobre aspectos
importantes en la revisión de su vehículo (así introducimos más información básica).
3.- ACCIONES DE MEJORA DE POSICIONAMIENTO EN LA WEB TRAS EL ESTUDIO DE LA
COMPETENCIA
-Crear Mi ESPACIO AURGI, donde el usuario acceda a – su historial de compra – un control de sus
futuras revisiones a través de alertas – promociones y puntos de su interés.
-Crear un espacio para cita previa on line.
-Crear una aplicación para smarthpones (para sistemas operativos iOS, Android, Symbiam y Bada)
donde accedas a cita previa online, tu histórico de compras, alertas para revisiones y, por
ejemplo, un localizador de tu coche aparcado, la aplicación que ofrece Feuvert sólo para Iphone)
- Añadir vínculo redes sociales Facebook – Twitter
- Realizar vídeos de contenido práctico para aurgiTV, enlazarlos a You Tube con un canal propio
4.- APORTACIONES PROPIAS EXTRAS
- Redes Sociales:
Añadir vínculo a Flickr, donde se puede crear un concurso de fotografía sobre motivos de viajes en
carretera (como la foto de GoodYear) y que los usuarios voten las mejores, los ganadores tendrán
descuentos.
-Mejora aspecto:
Se ha comprobado que la web no se ve igual dependiendo del navegador que lo abra. Por ello se
corregirán las apariencias en los navegadores Explorer, Safari, Firefox y Chrome
-Del papel a Internet: Pediremos que en el folleto de Aurgi y en todos los soportes publicitarios
físicos se ubique, a partir de ahora, un código QR (Quick Response) para acceder directamente a la
web desde cualquier Smartphone.
-Tipografías
Vamos a usar tipografías rectas y sin serif de buena visibilidad
- Arial Narrow Arial Narrow
Arial Narrow Arial Narrow
- Arial Arial Arial Arial Arial
Curso Experto Universitario en Acciones Web 2.0: Estrategias y Herramientas
Empresariales de Futuro. Fundación UNED. Febrero 2012
15. PRUEBA DE EVALUACIÓN A DISTANCIA. PARTE I. María del Mar Gómez Domínguez
-Gama Cromática:
Usando la nube de Adobe Kuler y después de hacer pruebas con los colores actuales de la página
éste es el resultado para el rediseño de Aurgi
CONCLUSIÓN
DEFINICIÓN PRODUCTO Aurgi es una empresa de Talleres de revisión rápida de
automóviles y neumáticos distribuidos por todo el país.
DIÁGNÓSTICO: Su web está sobrecargada y permite poca interactividad
OBJETIVOS:
1. Convertir un portal que se limita a cumplir con las funciones propias del
folleto publicitario en un lugar interactivo donde el usuario acceda a
servicios que ni siquiera puede obtener en la oficina física.
2. Crear valor añadido para hacerla útil y el usuario reincida en su uso.
1.- Marcamos en rojo, las partes que sobran :
Curso Experto Universitario en Acciones Web 2.0: Estrategias y Herramientas
Empresariales de Futuro. Fundación UNED. Febrero 2012
16. PRUEBA DE EVALUACIÓN A DISTANCIA. PARTE I. María del Mar Gómez Domínguez
2.- Señalamos las Fortalezas a salvar del diseño actual:
- Buena información producto
- Acertada gama cromática en sintonía con la imagen corporativa
- Motor de búsqueda de productos eficiente
- Florentino Fernández como anunciante en papel y TV
3.- Redefinimos Gama Cromática y Tipografías
- Arial Narrow Arial Narrow
- Arial Arial
4. Neutralizamos sus debilidades
PÁGINA SOBRECARGADA Eliminar banners y demás elementos
ACCESIBILIDAD: Etiquetar, botón inicio, certificado W3C
BISELES Y RELIEVES: Eliminar
MENUS Y SUBMENÚS: Hacerlos sencillos y cómodos, en vertical
INFORMACIÓN PRODUCTOS PLANA: Cambiar los .jpg por slides interactivos.
Ofrecer la opción de poder comparar entre sí.
REPETICIÓN INFORMACIÓN TIENDA: Concretar
TV POBRE EN CONTENIDOS: Añadir vídeos divulgativos básicos
5. Estudiamos la competencia MIDAS NORAUTO FEUVERT y aportamos nuevas propuestas
-Crear Mi ESPACIO AURGI: historial de compra, alertas revisiones, promociones
-Crear un espacio para cita previa on line.
-Crear una aplicación para smarthpones (para sistemas operativos iOS/Apple y Android)
donde accedas a cita previa online, tu histórico de compras, alertas para revisiones y, por
ejemplo, un localizador de tu coche aparcado, la aplicación que ofrece Feuvert sólo para
Iphone)
- Añadir vínculo redes sociales Facebook – Twitter
- Vídeos para TV con canal propio en Youtube
Curso Experto Universitario en Acciones Web 2.0: Estrategias y Herramientas
Empresariales de Futuro. Fundación UNED. Febrero 2012
17. PRUEBA DE EVALUACIÓN A DISTANCIA. PARTE I. María del Mar Gómez Domínguez
6. Añadimos otras propuestas propias
REDES SOCIALES: FLICKR
MEJORA ASPECTO DISTINTOS NAVEGADORES
PEDIR UBICACIÓN CÓDIGO QR CON ENLACE A PORTAL WEB EN TODO SOPORTE FÍSICO
PUBLICITARIO
debilidades
neutralizadas aportaciones
estudio
competencia
fortalezas
aportaciones = NUEVO PORTAL WEB
propias
nuevo color y
tipografía
CONCLUSIÓN: El desarrollo web ofrece un abanico de
posibilidades innumerables. Más allá de su básica
función informativa, Internet tiene la capacidad de
hacer más cómoda la vida del usuario, ofreciendo
infinidad de servicios que pueden implementar el
éxito de las campañas de márketing.
Curso Experto Universitario en Acciones Web 2.0: Estrategias y Herramientas
Empresariales de Futuro. Fundación UNED. Febrero 2012
18. ANEXO. Actividades Tema 1 – Tema 2. María del Mar Gómez Domínguez
1.- Sobre Adobe Flash. Análisis web Doritos.
A mi juicio, La web de la marca Doritos es un ejemplo muy completo de los
inconvenientes y ventajas en el uso y abuso de Adobe Flash para contenidos en internet.
Asimismo, muestra el potencial de este software para interactuar y mejorar la experiencia del
usuario.
1) En contra: una doble presentación defectuosa
En primer lugar, considero que la presentación deja que desear por el tiempo que el icono
temporizador, un triángulo rojo aburrido y poco atractivo, permanece en pantalla. La primera vez
que la visitas, sobrepasa los 8 segundos de tiempo de espera, tanto si usas como navegador
Internet Explorer, Mozilla Firefox o Google Chrome.
Es un hecho que si se opta por un icono más trabajado, como el de la preciosa web de la
Exposición de Renoir que se usa como ejemplo en el Manual del Curso, el tiempo de espera deja
de ser un hándicap y se convierte en un valor añadido.
Al cargarse el vídeo introductorio de la web hay que volver a hacer click para lanzar un
segundo vídeo que deriva en otra serie de contenidos, con una nueva demora que sobrepasa los
cinco segundos.
Considero que esta espera provoca que un importante porcentaje de usuarios no acceda a
los contenidos creativos y las distintas opciones de entretenimiento que contiene esta web
comercial. No obstante, también es cierto que los desarrolladores aplican muchos recursos
creativos (inicio de la música, imágenes rompedoras en movimiento) para evitar al desatención y
el abandono del usuario mientras que se cargan todos los contenidos.
2) A favor: una batería de contenidos optimizada
Del mismo modo que la presentación puede resultar lenta y, por ello, perjudicial para la
consecución de sus objetivos publicitarios, una vez dentro, todos los vídeos que contiene la
página se cargan rápido y de un modo muy dinámico. La web presenta su contenido usando
prioritariamente Flash sin que resulte desmedido ni ralentice la navegación a través de la página.
Curso Experto Universitario en Acciones Web 2.0: Estrategias y Herramientas Empresariales de Futuro
Fundación UNED. Febrero 2012
19. ANEXO. Actividades Tema 1 – Tema 2. María del Mar Gómez Domínguez
Pienso que el éxito del empleo del software analizado en este sitio web se basa en el
acierto a la hora de programar la forma de cargar cada archivo. El usuario sólo tiene que esperar
un par de segundos para comenzar a ver los vídeos, que continuarán cargándose mientras se
visualizan en pantalla.
Así, por ejemplo en esta captura de pantalla, se
observa cómo el vídeo comienza a reproducirse
antes de que haya cargado totalmente.
Esta velocidad permite al usuario continuar
curioseando por esta sección de la web con la que la
marca consiguió ser altamente viral en EEUU. 1
La acción en sí ha sido un concurso en el que los propios espectadores, realizaban y
votaban los anuncios que Doritos iba a emitir durante la Super Bowl, uno de los eventos
deportivos más populares de EEUU. El éxito y la penetración de esta campaña publicitaria no
hubiera sido igual si los vídeos no se hubieran cargado correctamente.
3) Interactiva: Acciones para hacer memorable la experiencia del usuario
El uso de Adobe Flash en Internet abrió en su momento un campo de posibilidades
infinitas al mundo publicitario. En una sociedad en la que recibimos cientos de mensajes cada
minuto, los creativos se dan tortas por conseguir que su mensaje destaque entre los demás.
Para lograr este cometido, el software de Adobe Flash se convirtió en una herramienta
fabulosa. El usuario puede protagonizar una experiencia memorable y reincidente gracias a la
interactividad que desarrollan multitud de aplicaciones creadas con este programa.
En esta web son claro ejemplo de ello dos aplicaciones correspondientes al espacio
dedicado a La Linterna Verde, una película patrocinada por la marca en cuestión.
Ambas acciones permiten una entretenida y original interacción con el usuario, por lo que
aumenta las probabilidades de que vuelva a repetir para mostrarlo a personas de su entorno o lo
1
http://www.marketingdirecto.com/actualidad/publicidad/la-campana-de-doritos-para-la-super-bowl-se-
convierte-en-el-viral-mas-visto/
Curso Experto Universitario en Acciones Web 2.0: Estrategias y Herramientas Empresariales de Futuro
Fundación UNED. Febrero 2012
20. ANEXO. Actividades Tema 1 – Tema 2. María del Mar Gómez Domínguez
recomiende a través de las redes sociales, lo que se traduce en un éxito de marketing tanto para
la marca como para los publicistas.
En la actualidad, Flash sólo resulta eficaz en ciertas campañas publicitarias pero su uso
cada vez es más limitado por causas como las ya descritas en el apartado 1, pesa y ralentiza las
webs. Eso, unido al bloqueo que Steve Jobs le hizo a este producto de Adobe, impidiendo su
lectura en los dispositivos móviles de Apple: Iphone, Ipod y Ipad, hace que su aplicación entre en
desuso en contra de otros como el HTML5.
Las razones por las que Jobs alegó en su momento la renuncia a Flash ilustran bien las
conclusiones propias de este ejercicio:
…’Flash es de la "era del PC no de los móviles", dice Jobs. Flash es "de la época del ratón,
no de las pantallas táctiles". Flash "no es abierto, como HTML, CSS y Javascript". Flash, sostiene
Jobs, tampoco "es seguro ni estable. Sabemos que es el principal responsable de los errores de los
ordenadores Mac". Flash también "gasta más batería. En un iPhone, por ejemplo, los vídeos que se
descodifican en H.264 funcionan durante 10 horas, pero si se descodifica con software, dura cinco
horas". Flash es multiplataforma "y Apple no puede depender de una tercera compañía a la hora
de decidir cuándo entrega herramientas a los desarrolladores". Por último Jobs sugiere a Adobe
que se centre más en crear buenas herramientas basadas en HTML5 y se deje de criticar a Apple
"por haber dejado atrás el pasado".’… 2
2
http://tecnologia.elpais.com/tecnologia/2010/04/29/actualidad/1272531664_850215.html
http://www.apple.com/hotnews/thoughts-on-flash/
Curso Experto Universitario en Acciones Web 2.0: Estrategias y Herramientas Empresariales de Futuro
Fundación UNED. Febrero 2012
21. ANEXO. Actividades Tema 1 – Tema 2. María del Mar Gómez Domínguez
2.- Webs del pasado
Usando los archivos de la web.archive.org, se expone a continuación la trayectoria y los
cambios efectuados en el sitio oficial de Mc Donalds, un icono del mundo de la publicidad
1996
Diseño: El conjunto de imágenes no estaba centrado en la pantalla. La información
en la primera página era mínima y llama la atención cómo se ven en la obligación de
informar que hay que hacer click en la M dorada para continuar navegando. Este hecho
nos acerca a pensar en un usuario poco relacionado todavía con el entorno digital. Un gif
animado sale y entra de detrás de la portada como mayor atrevimiento visual. La página
principal no usa fotografías, sólo texto. En el interior, se presentan grandes textos con un
diseño básico e imágenes muy pequeñas de menús, porque estaban pensados para las
velocidades de transmisión de la época en las que si las fotos pesaban, cargar una página
podría ser eterno. Por ello las imágenes del interior son todas archivos gif que pesan muy
poco y sus tamaños mínimos.
Usabilidad: Los colores tan intensos pueden resultar molestos, además, el poco
contraste entre el texto y el fondo, son condiciones muy desfavorables para que personas
con problemas en la vista (y sin ellos) puedan leer con facilidad. No tiene música ni sonido
pero en un apartado puedes descargar los jingles. El acceso a la información de la página
no está bien ubicado. No existe interactividad con el usuario, se limitan a dar la
información de sus menús. Es simplemente, un folleto en internet, una etapa primitiva a
todos los servicios adicionales posteriores que fueron desarrollándose gracias a la
investigación en NNTT.
Curso Experto Universitario en Acciones Web 2.0: Estrategias y Herramientas Empresariales de Futuro
Fundación UNED. Febrero 2012
22. ANEXO. Actividades Tema 1 – Tema 2. María del Mar Gómez Domínguez
2004
Diseño: A través de una combinación de varios estilos en la que predomina el Flash, en
2004, la imagen de Mc Donald en internet está totalmente consolidada, aunque hasta
este año mantuvo ese pintoresco gif animado de 1996 en su portada. Grandes imágenes
de personas sonrientes, primeros planos y escenas cotidianas, donde la gente es feliz
comiendo hamburguesas. En 2004, las pestañas se desplegaban en las portadas para
mostrar los submenús.
Usabilidad: Aunque la portada está compensada, en el interior, al desplegar los
menús, encontramos algunas páginas con textos desproporcionados. No obstante, la web
está marcada por un carácter interactivo amplio con toda la información que se pueda
proporcionar de una marca de estas características, todo ello, en demasiados menús y
demasiados desplegables, un hábito que también ha abandonado al entorno digital con
los años.
2011
Curso Experto Universitario en Acciones Web 2.0: Estrategias y Herramientas Empresariales de Futuro
Fundación UNED. Febrero 2012
23. ANEXO. Actividades Tema 1 – Tema 2. María del Mar Gómez Domínguez
Diseño: En 2011, las imágenes ocupan toda la pantalla cumpliendo con los estándares
actuales y el mundo del diseño protagoniza internet con espacios amplios, creativas
tipografías y sencillez y funcionalidad en la página de inicio. Un menú básico que facilita la
navegación y la búsqueda de la información, con espacio destacado para las redes
sociales.
Usabilidad: La navegación se antoja cómoda pero, no obstante, no es una web
accesible, o, no cuenta con el certificado de la World Wide Web Consortium (W3C).
3.- Sobre el lenguaje HTML
Esta web desarrollada sin ánimo de lucro donde se invita a la comunidad a realizar sus
aportaciones puede ser un ejemplo del principio divulgativo por el que se crea HTML. Es un
lenguaje de marcado de texto que, principalmente, tiene como ventajas para su uso universal dos
aspectos:
- En primer lugar, su accesibilidad, ya que sólo se necesita de un editor de texto de
cualquier pc o dispositivo móvil para su desarrollo, no necesita otro tipo de software,
por lo que está al alcance de cualquiera.
- En segundo lugar, su fácil aprendizaje, no son necesarios conocimientos avanzados de
programación para poder usarlo, con lo que cualquier persona con interés que siga las
pautas establecidas podrá crear una web: se trata de marcar los textos con una serie
de códigos e hipervínculos para aplicar un formato que permita que cualquier
navegador muestre una ventana a través de la cual se acceda a su contenido.
Curso Experto Universitario en Acciones Web 2.0: Estrategias y Herramientas Empresariales de Futuro
Fundación UNED. Febrero 2012
24. ANEXO. Actividades Tema 1 – Tema 2. María del Mar Gómez Domínguez
- Estos dos aspectos reseñados, es un lenguaje fácil y accesible, se reflejan en la web de
Scientifist name en el hecho de que solicitan la colaboración de la comunidad para
ampliar sus taxonomías, y, a ser posible, envíen sus aportaciones en html.
A pesar de que en la planificación de este lenguaje, las miras se quedaron cortas, ya que
no se contó con la versatilidad y la potencialidad de Internet para la industria de la información,
el ocio o la publicidad, los estándares han ido actualizándose hasta HTML5, la última revisión del
lenguaje básico de la WWW, que según la W3C, todavía se encuentra en periodo de desarrollo,
pero cuyas ventajas ya son utilizadas por muchos desarrolladores.
HTML es multiplataforma, lo que permite que sus páginas sean navegadas a través de
Microsoft, Apple o Linux. Asimismo, permite acceder a su contenido a través de todos los motores
de búsqueda, como Google, Bing, Yahoo…
Sus inconvenientes pasan por la complejidad creciente que entraña su uso al
querer desarrollar tareas más complicadas, más allá de los textos, (vídeos, imágenes en
movimiento, montajes digitales…). No obstante, su perfeccionamiento y la caída en
desuso que protagoniza Flash hará que HTML5 se convierta en una de las herramientas
de uso más populares de Internet.
Otro de los inconvenientes de la aplicación directa del lenguaje de marcado sin el
uso de otros softwares como podría ser Dreamweaver o Fireworks radica en la necesidad
de corregir manualmente la vista final de la página según el navegador utilizado. Una
dificultad que aumenta al ampliarse el número de navegadores actuales mucho más allá
de Internet Explorer o Safari: Google Chrome, Mozilla Firefox… El diseñador tiene que
tener en cuenta que el aspecto final que ha querido darle a la web puede alterarse según
con qué se abra.
En resumen, HTML (Hiper Text Markup Languaje) es un lenguaje que surge para
dar solución a la difusión y compartición de contenidos que responden a un principio
divulgativo. Es accesible en cuanto a uso y aprendizaje, es multiplataforma y sus
contenidos son accesibles desde cualquier buscador.
Como inconvenientes, que se liman en los perfeccionamientos de su lenguaje
cuando está a punto de estandarizarse la versión 5, está la complejidad creciente a la
hora de abordar tareas más sofisticadas y la adaptación específica que debe hacer el
diseñador para que el aspecto sea homogéneo al abrirse con distintos navegadores.
Curso Experto Universitario en Acciones Web 2.0: Estrategias y Herramientas Empresariales de Futuro
Fundación UNED. Febrero 2012