Lapaginaweb 2010

Conceptos Generales

Esquema de agentes en la comunicación

Agencia de
Publicidad 1
A PB N

Agencia de
Otros proveedores
medios
Tecnológicos,
distribución…
Cliente
(Marca)

Agencia de
Consultoría
eventos
estratégica

Conceptos Generales

BRIEFING Documento que el cliente utiliza para realizar sus
peticiones a las distintas agencias con las que
trabaja.

El que entrega a la Agencia de Publicidad es el
Briefing Creativo

El que entrega a la Agencia de Medios es el Briefing
de Planificación

El que entrega a la Consultoría es el Briefing
Estratégico

Cada tipo de Briefing plantea unas necesidades, y lo
más importante, unos objetivos distintos para un
planteamiento general que ninguno de los agentes
lograría por sí solo.

Conceptos Generales

QUIÉN ES QUIÉN
&
QUIÉN HACE QUÉ

Conceptos Generales

AGENCIA PUBLICIDAD
Puede tener o no departamento online. Es la
encargada de construir los mensajes publicitarios
que la marca (Cliente) quiere comunicar a su público
(usuarios-clientes).

La agencia de publicidad plantea el qué (lo que se
dice) y el cómo (la forma en la que se dice: a través
de un spot, una prensa, una cuña, un microsite o
varios).

Conceptos Generales

AGENCIA DE MEDIOS
Puede tener o no departamento creativo y dentro de
este departamento online. Es la encargada de
distribuir los mensajes publicitarios que la agencia ha
creado para la marca.

La agencia de medios planifica dónde la marca va a
impactar a sus clientes-usuarios (tv, radio, internet,
exterior; en qué horario prime time por ejemplo; los
soportes: la sexta, tele5, elmundo.es, marca…)

Conceptos Generales

CONSULTORÍA
Es la encargada de guiar a la marca. Investiga y
estudia dónde y en qué lugar del mercado puede
posicionarse para tener mayor éxito en su negocio.
Puede ser tanto a nivel publicitario como de negocio
(lanzamiento de un nuevo producto, limpieza de
gama, ocupación de nuevos nichos, cambios de uso
de producto…)

Aunque pueden tener consultoría, el cliente también
suele preguntar y pedir asesoramiento a su Agencia
de Publicidad sobre estas cuestiones.

Conceptos Generales

TIPOLOGÍAS DE
AGENCIAS DE
PUBLICIDAD

Conceptos Generales

Agencia PB tradicional Agencia PB online

Básicamente se manejan en 3-4 Funcionan de forma muy similar aunque
departamentos y su trabajo se basa disponen de un nuevo departamento. Su
sobre todo en la realización de trabajo puede depender o no del concepto
campañas que giran en torno a un spot manejado por la agencia tradicional y gira
de tv del que derivan el resto de piezas. en torno a la creacción de sites,
microsites, campañas online y acciones
Dirección que tengan a las nuevas tecnologías como
Cuentas base (redes, iphone…)
Creación
Producción Dirección
Cuentas
Creación
Tecnología
Producción

Esta división puede darse tal cual o surgir distintas combinaciones. Además existen otro tipo de agencias que cubren otra
parte del trabajo o material publicitario que la marca produce: boutiques creativas, agencias de marketing, productoras de
piezas, productoras de vídeo…

Conceptos Generales

PROCESOS EN
UNA CAMPAÑA
ONLINE

Conceptos Generales

Agencia Online Agencia Medios

Se recibe Briefing de cliente con las pautas Reciben briefing de cliente con las pautas
que se deben seguir para realizar el trabajo que deben seguir para impactar al público
creativo. que quieren para esa acción.
- Público (target) - Público
- Tono del mensaje - Tipo de impacto
- Qué se comunica - Presupuesto disponible
- Presupuesto disponible
La agencia de medios (central) trabaja en
La agencia trabaja creativamente y realiza una planificación en la que proponen al
una propuesta al cliente. Esta propuesta cliente en qué soportes y en qué momento
puede consistir en un microsite, un site, una deben estar. En muchos casos y
acción, una campaña o varias de estas cosas. dependiendo del presupuesto y objetivos de
impacto del cliente, en su propuesta
Cuando existe campaña online, el cliente también va implícita el tipo de piezas que se
hace llegar a la agencia online el plan de van a contratar.
medios que su central (agencia de medios) le
ha contratado. Según el planteamiento Si el objetivo en notoriedad la central irá
creativo, la agencia produce las piezas en base a por rich media.
a las especificaciones y formatos que en este Si el objetivo es presencia, la central se
plan se contemplan. decantará por formatos estándar.
Según el público (jóvenes, amas de casa,
profesionales…) elegirán unos soportes u
otros.

La página web.
Una visión genérica.

La página web. Una visión genérica.

Organigrama de una agencia online

Cuentas Creatividad Tecnología

Es el que está en permanente Organizados en parejas creativas, Subdividido en dos departamentos:
contacto con el cliente. Tiene que dependiendo del tamaño del proyecto se Sistemas y creativa.
tener muy claro cuál es la implican uno o más equipos. El departamento de sistemas se
necesidad del cliente y hasta Conceptualizan, diseñan y desarrollan el encarga de desarrollar la parte back
dónde se puede llegar con su discurso creativo de una página, una end de cada proyecto (html, bbdd,
presupuesto. campaña o cualquier pieza creativa. Deben gestores…). El departamento creativo
tener una visión general de la tecnología se encarga de desarrollar el front end
que se utiliza para aprovechar mejor el de cada proyecto (flash, papervision,
medio creativamente hablando. vídeo, 3D)


Organigrama de una agencia online

Cuentas Creatividad Tecnología

En este departamento puede Los artes además de diseñar con En tecnología hay más perfiles de los
existir el perfil de estratega, que photoshop (programa más común en el que se pueda imaginar ya que el mundo
es el que decide hacia dónde debe diseño de páginas web), pueden manejar audiovisual da para mucho y cada día
ir la comunicación de la marca en otros programas que le permitan dotar a hay nuevas posibilidades por explotar.
el proyecto. sus diseños de mucha más frescura que en
También últimamente se está la publicidad convencional. Normalmente en el departamento de
incluyendo la figura del En el caso de órbital existe la figura de tecnología de sistemas se cuenta con
investigador que informa de las animador, que es alguien experto en htmleros, phperos, gente especializada
novedades, innovaciones y “dibujar” a través del flash para crear en creación de gestores de
consumo de los usuarios en los películas de animación. E igualmente contenidos…
distintos medios. realizar ilustraciones tan complejas como
se requieran para el proyecto. En tecnología creativa además de
El copy debe alcanzar un discurso mucho flasheros, hay gente dedicada a vídeo
más cercano y dialogante con el usuario ya con after effects, por ejemplo; gente
que el medio lo permite. Los mensajes experta en plataformas para piezas
deben ser más cortos y atractivos y deben especiales como eyeblaster, etc y
tener siempre en cuenta que el usuario ya gente que comienza a dominar
ha mostrado interés cuando ha tecleado la programas nuevos como papervision,
url de una página. etc…


Ejemplo creatividades

ilustración vídeo


Creación de una web.
Cuestiones previas


Antes de nada, definamos
Alojamiento Un site puede estar alojado en un servidor propio (que puede estar subcontratado) o en el servidor del cliente. En
(hosting) este caso, debemos saber las características del mismo para que al crear la página funcione correctamente. Datos
que hay que saber:

Sistema operativo (windows 2000, windows NT, Linux, Unix…)
Servidor Web (IIS, apache, iplanet…)
Servidor de aplicaciones (coldfusion, iplanet…)
Lenguaje de programación (Asp’s, Cgi’s, Java, Jsp, php, coldfusion…)
Servidor de BBDD (SQL, oracle, MySQL…)
Plataformas sobre las que irá (Mac, PC, ambas…)
Navegadores (Firefox, Nestcape, Opera, Explorer)
Resolución sobre la que se va a diseñar (la más habitual hoy en día 1024x768)

webmaster Se utiliza para denominar al responsable de un web específico. No es un término que se utilize en agencia, suelen ser
más freelance informáticos que diseñan y desarrollan ellos mismos el site.
Su perfil suele ser el de un informático, aunque cuando el sitio es más grande y necesita de más perfiles, el webmaster
se convierte en coordinador.

usabilidad Se refiere a la facilidad y nivel de intuición que se le otorga al diseño de una pieza creativa o un site en cuanto a la
utilización que le dará el usuario. Un site usable es aquél que ha tenido en cuenta factores como el orden de lectura, la
colocación del menú, la distribución del mismo, el ahorro de clics, la exposición del contenido para facilitar la navegación
del visitante.

accesibilidad Es la capacidad de acceso a la que se le dota a un sitio y a sus contenidos para que pueda ser navegada por cualquier
usuario, independientemente de su discapacidad. Existen tres niveles de accesibilidad A, AA y AAA, siendo esta última la
que se refiere a mayor grado de discapacidad. El organismo más importante en promover la accesibilidad web es World
Wide Web Consortium (W3C) http://www.accesibilidadweb.com


Hosting
Práctica consistente en albergar sitios Web de terceras personas o empresas.

Las empresas que se dedican a este servicio son como los hoteleros de la red: ofrecen
espacio para que otras compañías almacenen cualquier información que quieran que sea
accesible por una red, desde sus páginas web hasta la información de su red interna o
Intranet.


Hosting
Ordenador que actúa como unidad de archivo central en una determinada red, que puede ser local o Internet.
Servidor de Correo (Mail Server): Dispositivo especializado en la gestión del tráfico de correo
electrónico.
Servidor Servidor POP3: Servidor que utiliza el protocolo POP3 (estándar para la gestión del correo
electrónico). Permite almacenar los mensajes que se reciben hasta que el usuario los descarga.
Servidor proxy: Ordenador o programa que actúa de intermediario entre Internet y un grupo de
usuarios.
Servidor Seguro: Ordenador configurado con elementos de protección especial de datos de los
clientes/usuarios de Internet. Permite la completa confidencialidad.

El cliente recibe los servicios que ofrece un servidor: Cliente

Outlook Navegador

Servidor web
Servidor de correo


La base de datos Recomendaciones
legales

En cuanto al apartado relativo a Datos Personales, el IAB Spain* recomienda que se detallen
como mínimo los siguientes apartados.

1. La identidad, la denominación y los datos de contacto de la empresa propietaria de
los datos personales que está recabando o tratando.
2. El fin por el cual se recaban o tratan esos datos personales.
3. Información de si esos datos van a ser cedidos o no a terceros y con qué fin serían
cedidos a terceros. En el caso de que los datos vayan a ser cedidos, es necesario
especificar a quién se le van a ceder.
4. La identidad y la denominación de la compañía que no siendo propietaria de la
lista/fichero donde están almacenados esos datos personales, está tratándolos.
5. La localización geográfica física de los datos.
6. Mención a la inscripción de esos ficheros con Datos Personales en la Agencia de
Protección de Datos.
7. Información clara sobre cómo y dónde ejercer los derechos de acceso,
rectificación, cancelación y oposición por parte de los afectados con respecto a
sus datos personales.

* IAB Spain: Asociación líder en el sector publicitario interactivo español


Terminología básica
HTML FLASH JOOMLA!
Documento de texto Software de Macromedia, es Sistema de administración de
estructurado con etiquetas un programa de edición contenidos que permite editar
(tags), almacenado en un multimedia que utiliza el contenido de un site de
directorio de un servidor gráficos vectoriales e forma sencilla. Es una
web o creado imágenes de mapa de bits, aplicación de código abierto
dinámicamente en el sonido, código de programa, construida en su mayoría en
momento de realizarse la flujo de vídeo y audio php.
solicitud con el propósito bidireccional. Permite mostrar
de satisfacerla. Aparte de animaciones interactivas en
texto, una página HTML una página web.
puede incluir gráficos,
vídeo, audio…

Frente al html Frente al html/flash
Frente al flash
Es un “espacio de dibujo en Soporta a ambas, aunque en
Es más limitado, puesto blanco” que permite cualquier publicidad como tal no se
que debe restringirse a desarrollo, no plantea utiliza ya que los perfiles
una estructura ordenada limitaciones de inicio. tecnológicos son expertos en
(debido a los tags). el código que utiliza. En
Necesita un plugin, si bien hay
No necesita plugin por una altísima penetración (y es realidad es como un
parte del usuario. gratuito) “photoshop” de webs.
Suele pesar menos y se Puede llegar a tener gran
descarga más rápido. peso.


Formatos de audio y vídeo
Formato de audio más comunes

AAC – Formato de Apple en el patrón de mpg-2. Es el formato que reproduce el ipod y el que puede
comprarse por internet. De ahí que el itunes convierta los mp3 a este formato cuando
introducimos música desde el ordenador.
WAV – Desarrollado por Microsoft e IBM. Es el estándar de grabación para CD’s y funciona en cualquier
aplicación de Windows.
AU – Archivos de sonido de Unix. También funciona como estándar en la programación JAVA.
WMA – Abreviatura de Windows Media Audio, parecido al mp3 en compresión aunque no solo reduce el
tamaño de los archivos sino que se adapta a las distintas velocidades de conexión.
Midi – Es el estándar para la música electrónica. Se usa en sintetizadores musicales o tarjetas de sonido.
También, al comprimir audio y vídeo se usa mucho en karaokes.
MPEG – Es el más importante. Comprime audio y vídeo, de hecho es el formato utilizado para comprimir en
DVD’s o la TV digital y satélite.
RA – Real Networks. Soporte multimedia de alta comprensión de archivos de audio y vídeo. No es tan
famoso como el mp3 pero su capacidad de streming es ideal para las retransmisiones en
directo por internet.


Formatos de audio y vídeo
Formato de vídeo más comunes

Avi y Avi 2.0 – Formato más popular por su calidad. Guarda la información por capas, primero vídeo, luego
audio.
Microsoft windows media video– Ha tenido una gran aceptación ya que viene integrado en el sistema
operativo XP.
Real Video – Requiere de su propio player para su reproducción.
Appel Quicktime – También necesita de su propio player (versión sencilla gratuita. La comprada tiene la
capacidad de edición de vídeo al igual que real video.)
MPG – Estándar de compresión de audio y vídeo con el que se establecieron 4 tipos dependiendo de la
calidad aunque el más extendido por esa misma razón es el mpg2. Además de la gran
compresión de archivos que ofrece es la que mejor mantiene la calidad de imagen.
Divx – Se ha convertido en uno de los formatos más populares sobre todo por el tema de la piratería y el
volvado de DVD’s ya que su calidad es más que aceptable.


Lenguajes de programación
ASP PHP XML
Un lenguaje del lado del servidor es aquel PHP conocido como una tecnología de código El XML, Extensible Markup Language, es un
que se ejecuta en el servidor web, justo abierto que resulta muy útil para diseñar de lenguaje de estructuracion de datos de sintaxis
antes de que se envíe la página a través forma rápida y eficaz aplicaciones Web dirigidas a muy parecida al HTML, incluso podriamos incluir
de Internet al cliente. Las páginas que se bases de datos. PHP es un potente lenguaje de el HTML como parte del lenguaje XML.
ejecutan en el servidor pueden realizar secuencia de comandos diseñado
accesos a bases de datos, conexiones en específicamente para permitir a los
programadores crear aplicaciones en Web con La intención del XML es la organización de datos
red, y otras tareas para crear la página de forma que puedan ser tratados por cualquier
final que verá el cliente. El cliente distintas prestaciones de forma rápida. MySQL
es una base de datos rápida y fiable que se lenguaje y desde cualquier plataforma, de esta
solamente recibe una página con el manera, podemos almacenar una lista de los
código HTML resultante de la ejecución integra a la perfección con PHP y que resulta
muy adecuada para aplicaciones dinámicas artículos de nuestra web en formato XML, para
de la página ASP. Como la página que puedan ser publicados en otras páginas o
resultante contiene únicamente código basadas en Internet.
accedidas desde programas como los lectores
HTML, es compatible con todos los RSS.
navegadores.

ASP (Active Server Pages) es la PHP es un acrónimo recursivo que significa PHP AJAX
tecnología desarrollada por Microsoft Hypertext Pre-processor (inicialmente PHP
Tools, o, Personal Home Page Tools). Fue creado Según wikipedia AJAX (Asynchronous JavaScript
para la creación de páginas dinámicas del And XML) és una técnica de desarrollo web para
servidor. ASP se escribe en la misma originalmente por Rasmus Lerdorf en 1994; sin
embargo la implementación principal de PHP es crear aplicaciones interactivas mediante la
página web, utilizando el lenguaje Visual combinación de tres tecnologías ya existentes
Basic Script o Jscript (Javascript de producida ahora por The PHP Group y sirve
como el estándar de facto para PHP al no haber que conoceremos en este manual.
Microsoft).
una especificación formal. Publicado bajo la PHP
License, la Free Software Foundation considera O para que lo entiendan mejor, es una manera de
esta licencia como software libre. crear una aplicación que responde a las acciones
del usuario sin refrescar la página contra el
servidor.

Metodología de
un proyecto on.

Metodología de trabajo de un proyecto ON

El proceso de trabajo de un proyecto ON consta de diferentes fases, algunas
coinciden con cualquier proyecto de comunicación, otras son específicas del
medio e influyen, además, en los tiempos de ejecución. Básicamente son dos
fases:

1 Conceptualización
estratégica y creativa 2 Desarrollo
del proyecto


estratégica y creativa

El punto de partida es un BRIEF (incluyendo todos los
requerimientos relativos a tecnología) con el que la
Agencia pueda desarrollar el planteamiento estratégico
y creativo.

ANÁLISIS SITUACIÓN
DE PARTIDA

CREACIÓN MARCO
ESTRATÉGICO

DESARROLLO
CREATIVO



y creativo.

Información del producto
DE PARTIDA
o servicio.
Objetivos de la compañía.
Competencia y entorno
competitivo.
CREACIÓN MARCO
Análisis del consumidor.
ESTRATÉGICO
Análisis de las acciones de
comunicación online de la
competencia.

DESARROLLO Análisis de las plataformas de
CREATIVO sistemas de la compañía.



y creativo.

Fijar objetivos de marketing y
de comunicación online.
ANÁLISIS SITUACIÓN Definir el posicionamiento, el
DE PARTIDA target y el carácter de la
marca en el entorno
interactivo.
Definir la estrategia online y
el eje conceptual.
CREACIÓN MARCO
ESTRATÉGICO Definir la estructura de
contenidos.
Definir el entorno tecnológico.
Evaluar las implicaciones
DESARROLLO legales.
CREATIVO
Definir la propuesta para la
difusión del proyecto.



y creativo.

DE PARTIDA Conceptualización.
Desarrollo del eje
creativo.
Adaptación a las
diferentes piezas de
CREACIÓN MARCO comunicación.
ESTRATÉGICO
Creación de la línea
gráfica
Ergonomía de
navegación.
DESARROLLO
CREATIVO


2 Desarrollo
del proyecto

Gira en torno al DOCUMENTO MAESTRO. Es el
instrumento básico de referencia, donde se
incorporan todos los detalles relativos al proyecto.
Se debe contar con la aprobación por parte de
Cliente para poner en marcha la producción. Planificación

Análisis

Materiales
DEFINICIÓN y contenidos
DEL
PROYECTO
Presupuesto

Producción
PROCESO de elementos
DE
PRODUCCIÓN
Integración

Implementación
y testing

Seguimiento


2 Desarrollo
del proyecto

Planificación de equipos de
Planificación
trabajo, tareas y timing de
trabajo.
Análisis Definición de la arquitectura
de la información (sitemap
DEFINICIÓN Materiales o árbol de contenido, que
DEL y contenidos es la información que se
PROYECTO
mostrará y con qué
Presupuesto estructura).
PROCESO
DE
PRODUCCIÓN


2 Desarrollo
del proyecto

Planificación

Análisis detallado de todos los
Análisis contenidos, así como la jerarquía y orden
más adecuados para el usuario.
DEFINICIÓN Materiales
DEL Definición de las plataformas
y contenidos
PROYECTO tecnológicas, software y especificaciones
técnicas requeridas.
Presupuesto
PROCESO Elaboración del documento funcional.
DE
PRODUCCIÓN


2 Desarrollo
del proyecto

Materiales Definir formatos y requisitos
Planificación
necesarios.

E-boards Definir qué materiales,
Análisis gráficos o de contenido, nos
facilitará el cliente.
DEFINICIÓN Materiales Textos
DEL y contenidos Definir qué materiales
PROYECTO (imágenes, ilustraciones,
Navegación música…) se necesitan y cuál
Presupuesto
es su coste.
PROCESO
DE
Estilo Tener en cuenta los derechos
PRODUCCIÓN gráfico y/o condiciones legales.

Maqueta


2 Desarrollo
del proyecto

Planificación Materiales

E-boards Pantallas (funcionales, no
Análisis
incluyen diseño) en las
que se presenta el detalle
DEFINICIÓN Materiales Textos de contenidos de la
DEL y contenidos
PROYECTO
página, así como las
funcionalidades que
Navegación
Presupuesto incorporan.
PROCESO
DE
Estilo
PRODUCCIÓN gráfico

Maqueta


2 Desarrollo
del proyecto


Análisis E-boards

DEFINICIÓN Materiales Textos Propuesta de tono de los
DEL y contenidos
PROYECTO textos.
Navegación Desarrollo de titulares y
Presupuesto
textos más
PROCESO
DE
Estilo representativos para
PRODUCCIÓN gráfico valoración por parte del
cliente.
Maqueta


2 Desarrollo
del proyecto


Análisis E-boards

DEL y contenidos
PROYECTO
Navegación Diseño ergonómico de
Presupuesto la navegación.
PROCESO
DE
Estilo “Traducción” de las
PRODUCCIÓN gráfico etapas anteriores a un
modelo gráfico, en el
Maqueta que se presenta la
estructura funcional del
interface.

Ejemplo de Sitemap – Operación Chascarrillo
Estructura de un prelanzamiento

Emailing Prelanzamiento

Friends Club Listas
& Family Pa Co Frías

Home
Home
Teaser
Teaser

Déjanos tu
Déjanos tu
Galería
Galería email
email

TOP 10
TOP 10 Chistes
Chistes Imágenes
Imágenes Power Point
Power Point BD
Interesados

Enviar
Enviar
Descargar
Descargar LOPD
LOPD
amigo
amigo

Tu nombre
Tu email
FORM
FORM Nombre amigo
Email amigo

Email
Email
amigo
amigo

Ejemplo de Sitemap – Operación Chascarrillo
Estructura de contenidos
Link
Link Link Club
Link Club
Paramount
Paramount
Home Paramount
Paramount
Home LOPD
LOPD Comedy
Comedy

Peli Escena05_02
Denuncia a
Denuncia a Tablón
Tablón
Webisodios
Webisodios un amigo
un amigo Sexo denunciados
denunciados
Forma cara
Color pelo
Tipo pelo
W W W Ojos
W0 W W W Retrato
Retrato Nariz
W0 1 2 3 Buscador
Buscador
1 2 3 Robot
Robot Boca
Orejas
Gafas
Barba/Bigote
BD

Peli Escena01_04 Nombre denunciado
Alias Pág.
Pág.
Formulario Email Resultados
Formulario Motivo denuncia
Resultados
Denuncia
Denuncia Tu nombre
Peli Tu email

Escena06_03 Peli Escena03_02

Email Peli Escena04_02
Email
denuncia
denuncia

NOTA: Las pelis aparecerán al cerrar cada sección, excepto cuando el usuario entre por el mail que le envía su amigo
que se encontrará con una peli previa y otra posterior al webisodio que le sirvamos.


2 Desarrollo
del proyecto


Análisis E-boards
Definición del código
gráfico a utilizar:
DEL y contenidos Distribución espacial
PROYECTO
Navegación Gama cromática
Presupuesto
PROCESO Tipografías
DE
Estilo
PRODUCCIÓN gráfico Tratamiento
imágenes
Maqueta Efectos visuales
Etc.


2 Desarrollo
del proyecto


Análisis E-boards

DEL y contenidos
PROYECTO
Navegación
Presupuesto
PROCESO
DE
Estilo
PRODUCCIÓN gráfico

Maqueta Maqueta gráfica que
permita validar el diseño
ergonómico y gráfico del
site por parte del cliente.


2 Desarrollo
del proyecto

Planificación

Análisis

DEFINICIÓN Materiales
DEL y contenidos
PROYECTO
Presupuesto Valoración económica de la
producción, en base a la
PROCESO
DE definición completa del
PRODUCCIÓN proyecto.


2 Desarrollo
del proyecto


2 Desarrollo
del proyecto

DEFINICIÓN
DEL
PROYECTO
Producción Creación de todos los elementos
de elementos que conformarán el proyecto
PROCESO
final:
DE
PRODUCCIÓN Integración Elementos gráficos
Elementos sonoros
Implementación
y testing Copies
Otros elementos (video,
Seguimiento animaciones…)


2 Desarrollo
del proyecto

DEFINICIÓN
DEL
PROYECTO
Producción
de elementos
PROCESO
FRONT-END Etapa en la que se
DE
PRODUCCIÓN ensamblan todos los
Integración
elementos.
BACK END
Implementación El proceso de integración es
y testing variable en cuanto a
duración en función de las
tecnologías utilizadas y del
Seguimiento grado de complejidad del
producto final.


2 Desarrollo
del proyecto

DEFINICIÓN
DEL
PROYECTO
Producción
de elementos
PROCESO
DE FRONT-END Hace referencia a lo que el
PRODUCCIÓN Integración usuario ve en pantalla y a la
representación audiovisual de
BACK END todos los eventos.
Implementación
y testing Se puede trabajar con diferentes
tecnologías: flash, html,
javascript, lingo, premiere…
Seguimiento


2 Desarrollo
del proyecto

Hace referencia a lo que el
usuario NO ve en pantalla,
pero que es imprescindible
para que el producto
funcione.

DEFINICIÓN En entornos web, se
DEL relaciona con:
PROYECTO
Bases de Datos
Producción
(MySQL, Acces, SL
de elementos
PROCESO Server, etc.)
DE FRONT-END
PRODUCCIÓN Integración Programación (PHP,
ASP, JSP, Java, Perl,
BACK END XML, etc.)
Implementación
y testing Entorno de aplicaciones
(servidor, conectividad,
cuentas de correo,
Seguimiento dominios…)


2 Desarrollo
del proyecto

DEFINICIÓN
DEL
PROYECTO
Producción
de elementos Una vez acabada la producción, se
PROCESO
DE habilita un servidor de pruebas donde se
PRODUCCIÓN Integración valida el correcto funcionamiento de las
aplicaciones, ortografía, detalles gráficos,
etc.
Implementación
y testing Una vez corregidos los errores que se
detecten y aprobado por cliente, se
cuelga en el servidor final.
Seguimiento
Es una fase MUY importante y debe ser
considerada en el calendario de trabajo.


2 Desarrollo
del proyecto

DEFINICIÓN
DEL
PROYECTO
Producción
de elementos
PROCESO
DE
PRODUCCIÓN Integración

Implementación
y testing Una vez online, se realiza un seguimiento
mediante estadísticas, registros, etc.

Seguimiento Los primeros días se aplica además un control
del proyecto para subsanar posibles errores que
se detecten en función de la respuesta de los
usuarios.


2 Desarrollo
del proyecto

DATOS ACUMULADOS

Usuarios distintos del site 16/10/2007 17/10/2007 18/10/2007 19/10/2007 20/10/2007 21/10/2007 22/10/2007 23/10/2007 24/10/2007 25/10/2007
Identificados con cookie 92 1.905 3.850 4.653 5.143 5.609 6.171 6.646 7.034 7.512
Identificados con ip 3 10 12 13 15 19 21 24 26 31
95 1.915 3.862 4.666 5.158 5.628 6.192 6.670 7.060 7.543

Visitas
Home 191 3.054 6.102 7.809 8.836 9.769 10.982 12.075 12.920 13.966
Entradas en sección Webisodios 202 2.976 5.826 7.055 7.800 8.513 9.354 10.110 10.711 11.449
Entradas en sección Denuncia 32 661 1.284 1.519 1.629 1.754 1.892 2.013 2.138 2.256
Entradas en sección Denunciados 41 664 1.258 1.498 1.632 1.760 1.879 1.991 2.097 2.206

Visualizaciones vídeos
La Llamada 40 1.770 4.274 5.315 6.042 6.747 7.472 8.123 8.636 9.305
Azulejos 41 1.394 3.204 3.944 4.437 4.948 5.484 5.975 6.327 6.770
La Familia 84 1.542 3.401 4.166 4.689 5.168 5.691 6.131 6.480 6.941

Enlaces externos
Ir a la web de Paramount 17 396 788 969 1.103 1.210 1.328 1.458 1.540 1.620
Ir al formulario del club de Paco 14 143 250 279 298 321 334 344 355 364
Accesos al Blog 16 29 40 56

Denuncias
N° de registros en la base de datos (denuncias) 21 264 509 607 646 707 760 800 847 892
N° de denunciantes 18 194 377 454 486 529 571 602 636 669
Entradas desde el Mail 12 322 872 1.244 1.370 1.502 1.734 1.850 1.956 2.124


2 Desarrollo
del proyecto

Evolución usuarios únicos

2.500

2.000

1.500

1.000

500

-
07

07

07

07

07

07

07

07

07

07
20

20

20

20

20

20

20

20

20

20
0/

0/

0/

0/

0/

0/

0/

0/

0/

0/
/1

/1

/1

/1

/1

/1

/1

/1

/1

/1
16

17

18

19

20

21

22

23

24

25


2 Desarrollo
del proyecto

Visitas a las secciones

3.500

3.000

2.500

2.000

1.500

1.000

500

-
07

07

07

07

07

07

07

07

07

07
20

20

20

20

20

20

20

20

20

20
0/

0/

0/

0/

0/

0/

0/

0/

0/

0/
/1

/1

/1

/1

/1

/1

/1

/1

/1

/1
16

17

18

19

20

21

22

23

24

25
Entradas en sección Webisodios Entradas en sección Denuncia Entradas en sección Denunciados Home


2 Desarrollo
del proyecto

Visualizaciones vídeos

3.000

2.500

2.000

1.500

1.000

500

-
07

07

07

07

07

07

07

07

07

07
20

20

20

20

20

20

20

20

20

20
0/

0/

0/

0/

0/

0/

0/

0/

0/

0/
/1

/1

/1

/1

/1

/1

/1

/1

/1

/1
16

17

18

19

20

21

22

23

24

25
Visualizaciones del video La Llamada Visualizaciones del video Azulejos Visualizaciones del video La Familia


2 Desarrollo
del proyecto

Mails enviados vs entradas desde mail

600

500

400

300

200

100

-
07

07

07

07

07

07

07

07

07

07
20

20

20

20

20

20

20

20

20

20
0/

0/

0/

0/

0/

0/

0/

0/

0/

0/
/1

/1

/1

/1

/1

/1

/1

/1

/1

/1
16

17

18

19

20

21

22

23

24

25
Mails enviados Entradas desde el Mail


2 Desarrollo
del proyecto

Denunciantes vs. Denuncias

300

250

200

150

100

50

-
07

07

07

07

07

07

07

07

07
07

20

20

20
20

20

20

20
20

20

20

0/
0/

0/

0/
0/

0/

0/

0/

0/

0/
/1

/1

/1
/1

/1

/1

/1

/1

/1

/1
16

17

18

19

20

21

22

23

24

25
N° de denunciantes N° de registros en la base de datos (denuncias)


2 Desarrollo
del proyecto

Visitas a enlaces externos

450
400
350
300
250
200
150
100
50
-
07

07

07

07

07

07

07

07

07

07
20

20

20

20

20

20

20

20

20

20
0/

0/

0/

0/

0/

0/

0/

0/

0/

0/
/1

/1

/1

/1

/1

/1

/1

/1

/1

/1
16

17

18

19

20

21

22

23

24

25
Ir a la w eb de Paramount Ir al formulario del club de Paco Accesos al Blog


Diseño web - programas
El programa elegido depende del proyecto que tengamos entre manos, nuestros conocimientos y
costumbres. En agencia, normalmente, el departamento creativo marca el diseño gráfico en photoshop
y el departamento de tecnología lo integra en la programación conveniente (html, flash…)

* Adobe Photoshop CS – Diseño gráfico, Editor de Imágenes
* Dreamweaver - Editores HTML
* Expression Web (sucesor de FrontPage que dejó de producirse en 2006) – Editor html
* UltraEdit - Editor de texto
* HTML-kit - Editor web
* Flash - Editor de animaciones
* Sothink DHTML Menu - Creación de menús DHTML
* Zend Studio - Editor PHP
* FileZilla, cliente FTP - FTP
* Mozilla - Navegador web
* PDF Creator - Editor ficheros PDF
* Bitrix Site Manager - XML
* Skype - General
* Visual Web Developer 2005 Express Edition - IDE gratuito para .NET
* Camtasia Studio - Creación de videotutoriales



* Adobe Photoshop CS – Diseño gráfico, Editor de Imágenes
A lo largo de sus distintas versiones ha ido sofisticándose cada vez más e incorporando
nuevas herramientas, a la vez que se perfeccionaban las existentes. Con todo se puede
decir que estamos hablando de un programa muy completo, vivo y muy práctico.


* Dreamweaver - Editores HTML
Dreamweaver es la herramienta de
diseño de páginas web más avanzada,
tal como se ha afirmado en muchos
medios. Aunque sea un experto
programador de HTML el usuario que
lo maneje, siempre se encontrarán en
este programa razones para utilizarlo,
sobretodo en lo que a productividad se
refiere.
Cumple perfectamente el objetivo de
diseñar páginas con aspecto
profesional, y soporta gran cantidad
de tecnologías


* Flash - Editor de animaciones
La clave de Flash es que es un programa de animación vectorial. Esto significa que se pueden crear
animaciones complejas: aumentar y reducir elementos de la animación, mover de posición estos
objetos, y otras cosas sin que la animación ocupe mucho espacio en el disco. Los vectores con los que
trabaja Flash sólo son, por decirlo de alguna manera, siluetas que casi no ocupan espacio y se pueden
modificar fácilmente y sin gasto de memoria en disco.


Entrega de materiales
Siempre debemos hablar de brutos y para presentar.
Nos referimos a doc brutos cuando hablamos de los archivos en los que estamos realizando el
trabajo en sí. En el caso de un diseñador sus brutos serán los psd’s generados por el photoshop,
y en el caso de un flashero por ejemplo será el .fla de lo que esté haciendo.

Los para presentar, son los archivos derivados de los brutos que nos sirven para ir viendo cómo
va quedando el trabajo, que además en el caso del flash, serán los que se muestren realmente.
En diseñadores hablaremos de jpgs (normalmente) y pngs (son los únicos que permiten un
fondo transparente), flasheros de .swf, de sistemas html, en vídeo de .flv (vídeos para integrar
en flash), etc.


Diseño web - navegadores
Un navegador web (del inglés, web browser) es un programa que permite visualizar la información
que contiene una página (ya esté esta alojada en la World Wide Web o en uno local).
Cuando diseñamos una página web hay que decidir en qué navegadores queremos estar porque no
todos soportan todas las tecnologías, o hay que adaptar la programación de la página para que se
vea y funcione bien en uno u otro. También hay que tener en cuenta la interfaz del mismo, ya que el
usuario puede hacer uso de barras adicionales que van reduciendo la visibilidad de la página.
Navegadores más extendidos
Actualmente el navegador más utilizado en el mundo es Internet Explorer en su versión 7, quizás
porque viene integrado en Windows.
Después está el navegador de Mozilla Firefox, el cual se está popularizando cada vez más. Firefox
es un competidor serio de Microsoft que ya alcanza una quinta parte de la cuota total. Safari con
más del 8% es otro navegador en rápida progresión. Existen también los navegadores, Netscape
Navigator, Opera y Chrome con un uso de menos del 2% en el mercado (mac). Además existe
Konqueror para GNU/Linux, y Epiphany el navegador oficial de Gnome.


Diseño web - resoluciones

La resolución a la hora de ponernos a diseñar una página web va a depender de la que esté
más extendida por los usuarios.
Actualmente, casi la mayor parte de los usuarios (heavy users que son la referencia) tienen
como resolución en sus pantallas 1280 x 1024 píxeles.
Sin embargo, como se indicaba en el punto anterior, es preciso tener en cuenta lo que la
interfaz del navegador ocupará para restárselo a esta medida y poder hacernos una idea
precisa de cómo quedará nuestro diseño de verdad.
En algunas ocasiones las páginas se diseñan (hablamos de flash) reescalables, es decir, que
adaptan su “forma” al tamaño del navegador (desde del mínimo que sería el 800x600),
normalmente lo que se “redistribuye” son los elementos que pueden estar en los extremos
como logotipos, menús residuales, etc.


Diseño web – resoluciones 800x600


Diseño web – resoluciones 1280x1024


Tipografías
Un elemento de comunicación más
Ya sea en diseño web o diseño general la tipografía es uno de los elementos más difíciles de tratar. Al
elegirla hay que tener en cuenta:
• Su facilidad de lectura
• Su armonía con el conjunto
• Su facilidad de actualización, cambio…

Tipografías web
En diseño web las tipografías
suelen estar reservadas a
titulares, botones o elementos
cuyo diseño tiene algún interés
especial o debe llamar la
atención y se vectorizan para que
no pesen mucho al convertirlas
en imagen.
Para textos de lectura que deben
transmitir un mensaje se trabaja
con tipografías estándares que
todo el mundo tiene en sus
máquinas como arial, verdana,
times…
En muchas ocasiones las
tipografías se crean ad hoc para
un proyecto en concreto, sobre
con perfiles como el de
diseñardor, animador o
ilustrador.


Tipografías


BBDD
Recogida de datos del usuario para uso posterior

¿Qué suelen hacer las empresas con los datos de eMail recopilados?

Nada

Crear comunidades

Spam

Enviar futuras promociones

Enviar boletines

Segmentarlos más

Estudios de mercado

Clasificación de sites
Una forma de clasificar las distintas páginas web es por su dimensión a nivel de información o
navegación:

Sites :: Página web de gran envergadura a nivel de información y navegación en la que los
usuarios pueden informarse de todo lo que deseen saber sobre algo y pasarse mucho tiempo sin
repetir contenido, tipo sites corporativos, portales de ocio-informativos, portales editoriales, e-
nciclopedias (wiki), portales e-commerce, bitácoras (Blogs, redes…)

Microsites :: Páginas que contienen menor cantidad de información así como menor tiempo de
navegación (- pantallas). No tienen que ser estrictamente publicitarias pero sí tener una fecha
de caducidad tipo publicitarios de lanzamiento, relanzamiento, acción concreta (flashmob),
campaña de sensibilización, concurso, promoción, contenido de apoyo (explicación de uso…).

Minisites :: Páginas de muy poco o apenas contenido con una clara función-objetivo y un
tiempo de vida definido tipo suscripciónes, formularios participativos, catálogos premios-
productos, descargas, listados…

Buscadores :: muestran listados de otras páginas web como resultado de las peticiones de los
usuarios.

Web 2.0
La participación del usuario

Web 2.0. La participación del usuario

Web 2.0
Resultado de la socialización de la red. Ahora es el usuario el que toma el control del desarrollo de internet. Maneja la tecnología y
se le da bien!

Con la entrada de los cuadernos de bitácora, que más tarde se transformaron en los blogs que ahora conocemos, se puso a
disposición de todos nosotros una gran herramienta: nuestro propio gestor de contenidos.

Así, internet ha evolucinado entrando en nuestras vidas como lo hizo la TV o el móvil en su momento: para quedarse y
proporcionarnos miles de experiencias.

Ahora a nuestros amigos, compañeros de trabajo e incluso del colegio, nos los encontramos en facebook. Los vídeos los vemos en
youtube. Organizamos nuestros viajes en agencias online, no sin antes conocer las opiniones de otros usuarios que han vivido la
misma experiencia. Ya no vamos al banco sino que manejamos nuestras cuentas, transferencias, hasta facturas online. Si hasta
algunos encuentran a su media naranja en una web!!

Todo esto es un campo inagotable a nivel publicitario ya que la presencia de las marcas, siempre que sepan respetar y dialogar de la
misma manera que los usuarios a los que se dirige puede convertirse en una comunicación como nunca antes se había conseguido.

LO SOCIAL
LO SOCIAL LO TECNOLÓGICO
LO TECNOLÓGICO

Cómo y dónde nos
Cómo y dónde nos Nuevas herramientas,
Nuevas herramientas,
comunicamos y
comunicamos y sistemas, plataformas,
sistemas, plataformas,
relacionamos
relacionamos aplicaciones y
aplicaciones y
servicios
servicios

La web de las personas frente a la web de los datos
El paso de la interacción a la colaboración

Web 2.0. La participación del usuario

Qué es un Community
Manager: CM

Qué es un Community Manager

Es «Quien se encarga de cuidar y mantener la
comunidad de fieles seguidores que la marca o
empresa atraiga, y es el nexo de unión entre las
necesidades de los mismos y las posibilidades de la empresa.
Para ello debe ser un verdadero experto en el uso de las
herramientas de Social Media».

José Antonio Gallego, presidente de AERCO
(Asociación Española de Responsables de Comunidades Online)

Responsabilidades
del Community Manager

1. Escuchar.
Monitorizar constantemente la red
en busca de conversaciones
sobre nuestra empresa, nuestros
competidores o nuestro mercado.

Responsabilidades

2. Circular esta
información
internamente.
A raíz de esta escucha,
debe ser capaz de extraer lo
relevante de la misma, crear
un discurso entendible y
hacérselo llegar a las
personas correspondientes
dentro de la organización.

Responsabilidades

3. Explicar la posición
de la empresa a la
comunidad.
Responde y conversa activamente en todos los medios
sociales en los que la empresa tenga presencia activa
(perfil) o en los que se produzcan menciones relevantes.

Escribe artículos en el blog de la empresa o en otros
medios sociales y selecciona y comparte contenidos de
interés para la comunidad.

Responsabilidades

4. Buscar líderes, tanto
interna como
externamente.
La relación entre la comunidad y la
empresa está sustentada en la labor
de sus líderes y personas de alto
potencial.

El/la CM debe ser capaz de
identificar y “reclutar” a estos
líderes, no sólo entre la comunidad
sino, y sobre todo, dentro de la
propia empresa.

Responsabilidades

5. Encontrar vías de colaboración
entre la comunidad y la empresa.
La comunidad puede ayudar a hacer crecer su empresa. El/la
CM les debe mostrar “el camino” y ayudarles a diseñar una
estrategia clara de colaboración.

Perfil el Community Manager

Aptitudes
técnicas

Habilidades
sociales Actitudes
personales

Aptitudes técnicas

Experiencia en el sector de la empresa

Conocimientos de marketing, publicidad
y comunicación corporativa

Capacidad de redacción

Pasión por las nuevas tecnologías, por
Internet y la web 2.0.

Creatividad para ganar cuota de atención

Experiencia en comunicación online

Conocimiento de la Cultura 2.0

Habilidades sociales

Buen conversador Trabajo en equipo

Resolutivo Agitador Cabecilla
Comprensivo
Empático Incentivador
Asertivo

Actitudes

• Útil: buen compañero/a, le gusta ser de ayuda.

• Abierto: entiende y aprecia la diversidad.

• Accesible: es cercano en el trato.

• «Always on»: vive en conexión permanente o frecuente a la red.

• Conector: detecta y facilita oportunidades, conectando a
miembros de la comunidad entre sí.

• «Early adopter»: le gusta estar a la última, se podría denominar
cazador de tendencias.

• Evangelista: es un apasionado de la marca, de la empresa y de
la vida.

• Defensor de la comunidad: representa a los clientes y
usuarios ante la empresa. Le gusta la gente.

• Transparente: en las normas y en la igualdad entre los usuarios.

Lapaginaweb 2010

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (18)

Destacado

Destacado (9)

Similar a Lapaginaweb 2010

Similar a Lapaginaweb 2010 (20)

Último

Último (20)

Lapaginaweb 2010