• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Lapaginaweb 2010
 

Lapaginaweb 2010

on

  • 1,558 views

 

Statistics

Views

Total Views
1,558
Views on SlideShare
1,551
Embed Views
7

Actions

Likes
1
Downloads
66
Comments
0

2 Embeds 7

http://www.slideshare.net 5
http://tresejes.tumblr.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Lapaginaweb 2010 Lapaginaweb 2010 Presentation Transcript

    • Conceptos Generales
    • 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)
    • La página web. Una visión genérica. 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…
    • La página web. Una visión genérica. Ejemplo creatividades ilustración vídeo
    • La página web. Una visión genérica. Creación de una web. Cuestiones previas
    • La página web. Una visión genérica. 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
    • La página web. Una visión genérica. 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.
    • La página web. Una visión genérica. 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 página web. Una visión genérica. 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
    • La página web. Una visión genérica. 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.
    • La página web. Una visión genérica. 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.
    • La página web. Una visión genérica. 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.
    • La página web. Una visión genérica. 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
    • Metodología de trabajo de un proyecto ON 1 Conceptualización 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
    • Metodología de trabajo de un proyecto ON El punto de partida es un BRIEF (incluyendo todos los 1 Conceptualización estratégica y creativa requerimientos relativos a tecnología) con el que la Agencia pueda desarrollar el planteamiento estratégico y creativo. ANÁLISIS SITUACIÓN 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.
    • Metodología de trabajo de un proyecto ON El punto de partida es un BRIEF (incluyendo todos los 1 Conceptualización estratégica y creativa requerimientos relativos a tecnología) con el que la Agencia pueda desarrollar el planteamiento estratégico 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.
    • Metodología de trabajo de un proyecto ON El punto de partida es un BRIEF (incluyendo todos los 1 Conceptualización estratégica y creativa requerimientos relativos a tecnología) con el que la Agencia pueda desarrollar el planteamiento estratégico y creativo. ANÁLISIS SITUACIÓN 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
    • Metodología de trabajo de un proyecto ON 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
    • Metodología de trabajo de un proyecto ON 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
    • Metodología de trabajo de un proyecto ON 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
    • Metodología de trabajo de un proyecto ON 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
    • Metodología de trabajo de un proyecto ON 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
    • Metodología de trabajo de un proyecto ON 2 Desarrollo del proyecto Planificación Materiales 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
    • Metodología de trabajo de un proyecto ON 2 Desarrollo del proyecto Planificación Materiales Análisis E-boards DEFINICIÓN Materiales Textos 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.
    • Metodología de trabajo de un proyecto ON 2 Desarrollo del proyecto Planificación Materiales Análisis E-boards Definición del código gráfico a utilizar: DEFINICIÓN Materiales Textos 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.
    • Metodología de trabajo de un proyecto ON 2 Desarrollo del proyecto Planificación Materiales Análisis E-boards DEFINICIÓN Materiales Textos 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.
    • Metodología de trabajo de un proyecto ON 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.
    • Metodología de trabajo de un proyecto ON 2 Desarrollo del proyecto
    • Metodología de trabajo de un proyecto ON 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…)
    • Metodología de trabajo de un proyecto ON 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.
    • Metodología de trabajo de un proyecto ON 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
    • Metodología de trabajo de un proyecto ON 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…)
    • Metodología de trabajo de un proyecto ON 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.
    • Metodología de trabajo de un proyecto ON 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.
    • Metodología de trabajo de un proyecto ON 2 Desarrollo del proyecto
    • Metodología de trabajo de un proyecto ON 2 Desarrollo del proyecto
    • Metodología de trabajo de un proyecto ON 2 Desarrollo del proyecto
    • Metodología de trabajo de un proyecto ON 2 Desarrollo del proyecto
    • Metodología de trabajo de un proyecto ON 2 Desarrollo del proyecto
    • Metodología de trabajo de un proyecto ON 2 Desarrollo del proyecto
    • Metodología de trabajo de un proyecto ON 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
    • Metodología de trabajo de un proyecto ON 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
    • Metodología de trabajo de un proyecto ON 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
    • Metodología de trabajo de un proyecto ON 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
    • Metodología de trabajo de un proyecto ON 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
    • Metodología de trabajo de un proyecto ON 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)
    • Metodología de trabajo de un proyecto ON 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
    • Metodología de trabajo de un proyecto ON 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
    • Metodología de trabajo de un proyecto ON Diseño web - programas * 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.
    • Metodología de trabajo de un proyecto ON Diseño web - programas * 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
    • Metodología de trabajo de un proyecto ON Diseño web - programas * 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.
    • Metodología de trabajo de un proyecto ON Diseño web - programas 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.
    • Metodología de trabajo de un proyecto ON 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.
    • Metodología de trabajo de un proyecto ON 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.
    • Metodología de trabajo de un proyecto ON Diseño web – resoluciones 800x600
    • Metodología de trabajo de un proyecto ON Diseño web – resoluciones 1280x1024
    • Metodología de trabajo de un proyecto ON 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.
    • Metodología de trabajo de un proyecto ON Tipografías
    • Metodología de trabajo de un proyecto ON Tipografías
    • Metodología de trabajo de un proyecto ON Tipografías
    • Metodología de trabajo de un proyecto ON Tipografías
    • Metodología de trabajo de un proyecto ON Tipografías
    • Metodología de trabajo de un proyecto ON 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
    • Web 2.0. La participación del usuario
    • Web 2.0. La participación del usuario
    • Web 2.0. La participación del usuario
    • Web 2.0. La participación del usuario
    • 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 del Community Manager 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 del Community Manager 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 del Community Manager 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 del Community Manager 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.