Codigo Basico

Diseño multimedia1 / WEB 2.
0
Newsletter - Wireframe - Código básico (html)
1 UADE - Paula Ripoll® 2018

¿Qué investigaron sobre la pieza newsletter?
¿Digital?
¿Ejemplos?

Definición de newsletter
(hoja de noticias)
– Antes de existir los periódicos / primeros indicios

Antigüedad - civilizaciones, difundían los sucesos en forma de textos escritos
en hojas (papiro, seda o pergamino más raramente)
o en inscripciones públicas (en piedra, metal o madera)
noticias emitidas por el estado (propaganda)
Aparición de la imprenta (1450)
Los primeros impresos con noticias contemporáneas,
en forma de hojas sueltas, aparecieron a finales del siglo XV.
La prensa escrita, funciones de informar, persuadir, promover,
formar opinión, educar y entretener
(habitualmente resumidas en la tríada informar, formar y entretener)


Definición de newsletter
– Hoja de noticias informativa y/o comercial

– Físico (impreso / distribución manual) / Electrónico /digital
– Frecuencia en el tiempo (diario, semanal, mensual, ocasional)
Newsletter digital - email marketing

Flyer: volante digital , promoción digital

¿Qué es? ¿Para qué sirve? ¿Porqué usarlo?
Una poderosa herramienta de marketing digital
– Canal de comunicación efectivo y funcional dependiendo de su base de datos

cuando la base de datos es real y no es “masiva”
– Aunque no siempre es una herramienta de venta directa puede conseguir influir
en los suscriptores de manera indirecta
– No requiere de una gran inversión económica
– Es una de las fuentes más grande de tráfico a otros canales (web, blog, redes)
– Es una pieza ideal para fidelizar clientes
– Refuerza imagen de marca
– Puede convertirse en un potente canal de ventas
¿Las redes sociales, serán eternas? como esfuerzo único, pueden ser un problema a futuro
necesitamos conseguir más bases de datos propias / más suscriptores
Se obtiene más conversión con 6 mil suscriptores que con 26 mil seguidores

Cantidad de cuentas de correo activas en el mundo

Tres puntos a tener en cuenta
1. Con un newsletter se puede fidelizar muy bien a clientes-suscriptores,

ofreciéndoles siempre algo mejor que a los no suscriptores.
2. Pueden segmentarse y por ende ser “personalizados”.
3. Funcionan perfectamente también desde el celular (cada vez mejor).
Sin embargo, la audiencia manda

+25

Cúando (o porqué no funcionan)
– cuando no se enfocan en la audiencia (mercado, público)

– cuando no fueron pedidos (spam/ marketing del permiso)
– cuando no tienen contenido actualizado
– cuando no tienen contenido relevante
– cuando no tienen contenido relacionado
– cuando no tienen contenido
– cuando repiten periodicamente contenido
– cuando no tienen un objetivo comunicacional (call to action)
– cuando no se puede cancelar de manera rápida, facil y efectiva la suscripción

Tips básicos antes de empezar,
¿porqué no hacerlo asi?

Newsletter ¿Porqué no hacerlo asi?
Nombre del remitente claro y obvio,

la importancia de un buen asunto,
incluir logotipo y contenido de apertura.

“Mordiscos” cortos y contundentes, con llamadas claras a la acción.

CTA Call to Action

Oraciones cortas con botones obvios

Uno o más puntos focales claros (focal point)

una estructura simple que guía al lector.

Una grilla de base - máximo 3 columnas iguales

Cómo se ve el mensaae en la bandeja de entrada

¿Imágenes desactivadas?
la importancia del atributo alt en la etiqueta <img>

Cómo empezar a hacer “nuestro” newsletter
– relevamiento de piezas similares

– tener en claro qué quiero comunicar
quién lo comunica (marca-emisor) a quién se lo comunica (cliente-receptor)
– base de datos segmentada
Recuerden que primero aparece el contenido

luego y solo luego, el diseño

Etapas para hacer “nuestro” newsletter
para empezar aparece un cliente con una necesidad de comunicación
pieza comunicativa para resolverla: al menos un newsletter ¿alcanza?
1º etapa de planificación y definición de objetivos

muy importante el relevamiento

2º etapa de definición de contenidos
layout (maqueta)
– de contenidos (qué necesito comunicar, lo más o lo menos importante)
– de estructura / código (html)
– de diseño / colores, fuentes... (css)
3º etapa de envío - lanzamiento
4º etapa de análisis

Caso testigo “El club de la milanesa”
– una marca que ya existe, tiene una historia, una identidad

– tiene una identidad visual
– tiene un mercado definido
– tiene un público definido
– tiene un problema de comunicación: una nueva sucursal

1º Panificación y definición de objetivos
Investigar para triunfar / Definí el perfil de tu mercado y público objetivo
Marca (emisor): El club de la milanesa
Los clientes del cliente...

Mercado: lugar de residencia, edad, sexo, profesión, ingresos...
Público: gustos, hábitos, preferencias...
Determinar el mercado y el público –y sus necesidades– permite establecer los contenidos en base
a las cualidades, comportamientos e intereses particulares de tu audiencia.
Debemos cultivar una relación efectiva y personalizada con nuestra audiencia,

por eso procuramos segmentarla!
¿Qué significa? subdividirla en grupos dependiendo de características específicas como edad, sexo,
ubicación o profesión, o en base a comportamientos (porque viste...)
¿Voy a mandar el newsletter a toda mi base de datos?

Investigar para triunfar / Definí el perfil de tu mercado y público objetivo
Relevamiento
El Club cuenta con 11 locales en CABA, 9 en el conurbano, 1 en MDQ, 4 en Córdoba, 2 en Mendoza y 3 en Rosario.
La edad de usuarios es amplia ya que van desde niños con familias hasta ancianos.
Pero objetivo apunta a jóvenes profesionales independientes de entre 25 y 35 años, con ingresos promedios de más de $20.000
que vivan en zonas céntricas y concurridas de CABA.
Son jóvenes a los que les gusta salir a comer afuera, disfrutar del tiempo libre con pareja o amigos en un ámbito
descontracturado donde comer algo rico y sentirse entre “socios” de un mismo club. Segmento: medio-alto
https://wwwhatsnew.com/2014/07/04/guia-para-definir-el-publico-objetivo-de-tu-accion-de-marketing-online/

El consumo se guía por tendencias

Tendencias: El plato preferido de los hogares argentinos busca hacerse fuerte en el negocio de la comida rápida,
con la aparición de nuevas cadenas especializadas que siguen los pasos de El Club de la Milanesa
https://www.lanacion.com.ar/1912360-las-milanesas-quieren-desafiar-el-imperio-de-las-hamburguesas
Analizá a tu competencia
Inspírate con aquello que hacen bien y detecta sus puntos débiles para no cometer los mismos
errores (Benchmarking)
Mila’s / felicidad en estado rebozado / 1 sola sucursal
El secreto de la milanesa

2º Definición de contenidos
El cliente tiene (debe tener) una propuesta comunicativa (un problema)
basada en una necesidad del mercado/público - la apertura de un nuevo local
Gracias al uso de bases de datos captadas desde las redes sociales, el web site e incluso en los mismos locales
(la marca usa la tecnología) surge la necesidad de los clientes de tener una sucursal en Puerto Madero.
La marca necesita difundir esa nueva sucursal / asegurarse asistencia ¿cómo?
¿evento inauguración? / ¿promociones?
– ¿Qué quiero lograr con mi campañas de email marketing?

vender, informar, lograr registros a un evento, saludar a mis contactos, fidelizar a mis clientes...
el objetivo: que la nueva sucursal esté llena desde el primer día
– ¿es realizable, medible y alcanzable ese objetivo?

– ¿en qué período de tiempo pienso cumplirlo?

2º Definición de contenidos
El cliente tiene (debe tener) una propuesta comunicativa (un problema)

ese problema se resuelve con al menos un newsletter, pero para hacerlo hace falta
un layout - una maqueta
– layout de contenidos, qué quiero comunicar, de lo más a lo menos importante

qué (un evento de inauguración), cómo (estás invitado gratis),
dónde (puerto madero), cuándo (21 septiembre a las 21 hs)
llamado a la accion (CTA)
inscribite y participá del sorteo para venir a cenar gratis, solo hay 350 lugares, apurate
wireframe
– layout de estructura / código, los newsletter se “escriben” en código html

html
– layout de diseño, el código (la estructura) se estila

css

3º Envío - lanzamiento
– Para enviar las campañas necesito de una herramienta que gestione la base de datos,
automatice el envío y analice los resultados
¡Hay muchas, investigar antes de elegir una!
¿Maneja y administra de manera directa la base de datos (listas de contactos)
¿Te ofrece reportes y analíticas en tiempo real sobre los envíos?
¿Cuenta con IPs “dedicados” para asegurar la llegada al inbox?
¿Tiene servicio de atención al cliente?
¿Ofrece tutoriales y capacitaciones?
¿Ofrece integraciones? (redes sociales , e-commerce)
– La frecuencia de los envíos

ni mucho ni tan poco ¿lo determinan los usuarios?
¿Cuáles son los horarios y días con mayor cantidad de aperturas?
¿Y los de menor número?
¿Qué días y horarios te han reportado mejores resultados?
¿Tus suscriptores han manifestado su interés en alguna frecuencia ideal?
– El calendario
¿Cuáles son los acontecimientos relevantes vinculados a tu sector que puedes aprovechar?
¿Cuáles son las fechas importantes para tu empresa?

– Asunto del mensaje

¿Tienen entre 30 y 50 caracteres? ¿Son llamativos y atractivos?
¿Están pensados atendiendo a las características/intereses de los suscriptores?
¿Están acompañados por un pre-encabezado (texto que sigue al asunto)?
¿Utilizan símbolos para destacarlos del resto?
¿Tienen un remitente fácilmente identificable?
¿Testeas tus asuntos para conocer el más efectivo? A/B Test
– La combinación perfecta: el email y las redes sociales

¿Incluís botones de compartir en tus campañas?
¿Agregás links a tus perfiles en redes sociales?
¿Promocionás tus concursos y sorteos en redes enviando campañas?
¿Compartís tus piezas de email en tus perfiles sociales?
¿Utilizás las redes para captar nuevos contactos para tu base?
¿Envías campañas segmentadas especialmente para quienes se sumaron
a tus listas desde redes sociales?
– La revisión final antes de mandar el newsletter

¿El asunto está apareciendo completamente en la caja de entrada?
¿Las imágenes están funcionando con texto alternativo?
¿Se puede entender todo con claridad?
¿Los links funcionan correctamente?
¿Hay errores ortográficos?

– La base de datos (CRM)

es importante generar desde todos los medios posibles suscriptores
no al spam / si al marketing del permiso
Captación de datos = Club de la milanesa - Tablet con “premios”
Técnicas de captación de datos

formularios, hello bars, pop ups, landing pages, tab de Facebook, anuncio, twitter cards, etc.
https://www.coregistros.com/2017/04/11/estrategias-base-de-datos/

4º Análisis
Es imprescindible analizar los resultados, si no no sirve de nada!
Tasa de Apertura: Número de personas que abrieron el mensaje dividido el número de personas que lo recibieron.
Es necesario tener un mínimo de 15% de Tasa de Apertura para considerar que fue un buen lanzamiento.
Tasa de Clics: Número de clics en algún link del Newsletter dividido por el número de personas que la recibieron.
Es necesario tener un mínimo de 2% de Tasa de Clic.
Tasa de Conversión:
Cuando un usuario realiza la acción buscada y previamente definida como objetivo del envío.
A partir del Newsletter, ¿cuántas personas alcanzaron el objetivo establecido en la planificación?
Es necesario tener un mínimo de 2% de Tasa de Conversión, varía dependiendo el segmento de la empresa.
Otros datos importantes:

– Tener un mínimo de 95% de Tasa de Entrega.
– Máximo de 1% de cancelación de suscripción.
– No tener más de 0.1% de Tasa de Spam

4º Análisis
Es imprescindible analizar los resultados, si no no sirve de nada!
Preguntas básicas que deben quedar respondidas:

– ¿Qué tasa de apertura, clicks y rebotes has obtenido?
– ¿Cuántas remociones?
– ¿En qué links han hecho click tus suscriptores?
– ¿En qué países se abren tus campañas?
– ¿Has alcanzado los objetivos propuestos el año/el mes/la semana anterior?

Vemos algunos ejemplos
sobre todo el de un “evento”

Antes de irnos al recreo
¿qué es un wireframe, para qué sirve?

Definición de wireframe

Wireframe – estructura metálica
Un esquema de página o plano de pantalla.

Una guía visual que representa el esqueleto o estructura de contenidos
de manera visual (no confundir visual con diseño).
Esquematiza el diseño de página teniendo en cuenta

– el ordenamiento del contenido
diseño de la información - de manera clara, entendible, jerárquica
– incluye elementos de la interfaz y de navegación
experiencia usuario, hipertexto-hipermedia, CTA
– asi como su funcionamiento en conjunto
interfaz: ámbito donde ocurre la interacción maquina-hombre

Wireframe – Interfaz
Medio con que el usuario se comunica con una máquina

y comprende todos los puntos de contacto usuario/equipo
(pantalla, mousse, teclado)
Son todos los puntos de contacto para que mi usuario se comunique mediante
un dispositivo con mi contenido!!!!
La interfaz debe ser

amigable - intuitiva / necesariamente implica una interacción
fácil de usar (que se explique por si misma sin necesidad de un “manual”)

Wireframe – ¡carece de estilos visuales!
Su principal objetivo reside en

la funcionalidad, el comportamiento y la jerarquía de los contenidos
qué contenidos tiene el newsletter no cómo se ven.
Los esquemas pueden ser dibujados con lápiz y papel o esquemas en una pizarra,
o pueden ser producidos con medios de diseño de aplicaciones de software libre o comerciales.
balsamiq.com
mockflow.com
No confundir términos
mockups / ya están más definidos que los wireframes en aspectos de diseño / son más visuales / pueden ya ser código
árbol / esquematiza el diseño (con todos sus enlaces internos) del sitio web
frameworks / aplicaciones que ya tienen “prediseñado” un modelo de grilla (un wireframe) / arquitectura - sin contenido,
son (deben ser) responsive - multiplataforma (en clase no se pueden usar frameworks)

Wireframe – la estrategia colaborativa
Equipos colaborativos
(conectan información - arquitectura - diseño - interfaz)
Los desarrolladores usan wireframes para obtener una aproximación

más tangible de las funcionalidades del sitio
Los diseñadores los usan para impulsar el proceso de diseño de la interfaz de usuario (UI),
las rutas de navegación, el comportamiento (interacciones) y la experiencia del usuario
Los interesados en un negocio los usan para asegurarse que los requerimientos
y objetivos se conecten a través del diseño.
diseñadores / información (DI) - interacción (IxD) - usabilidad (UX) - experiencia usuario (UE)
desarrolladores (sistema/lenguajes) / ingenieros / marketing
Principios Web 2.0

el fortalecimiento de la inteligencia colectiva (wikipedia)
la web es en su esencia una plataforma colaborativa

Wireframes
Diseño de información Diseño de la navegación Diseño de interfaz

(DI) provee un conjunto selecciona y ordena
presenta información de elementos en pantalla los elementos de la interfaz
“priorizada-jerarquizada” que permiten al usuario para permitir a los usuarios
de manera que se facilite moverse entre contenido interactuar con
el entendimiento “enlazado” la funcionalidad del sistema
(hipertexto-hipermedia).
jerarquías opciones de navegación botones de acción (CTA),

orden entendibles campos de texto,
recorrido de lectura consistentes cajas de verificación,
menús ,
múltiples sistemas menús desplegables,
de navegación cursor,
beeps...
interacción (IxD) + usabilidad (UX)

Wireframe – no olviden incluir
– Estructura de columnas (máximo 3) , grilla responsive*

– Ancho total y de columnas (¡medidas!)
– Contenido priorizado por zonas de contenido
<div> y etiquetas básicas
– Elementos de navegación e interacción con la interfaz

zona 1
zona 2
zona 3 texto - imagenes -

videos – sonidos
recuerden agregar
links
botones de acción (CTA),
campos de texto,
cajas de verificación,
menús,
zona 4
menús desplegables,
cursor,
beeps...
zona 5
zona 6
Wireframe – grilla responsive
maqueta / infraestructura / armazón / grilla
Ya no tiene sentido diseñar para una resolución y un navegador concreto, la multitud de dispositivos
que dan acceso a la web rrequieren de una nueva forma de trabajar, más flexible, más adaptable.
Responsive Design = diseño adaptado a multiples pantallas

gracias a proporciones de columnas
3 anchos base
desktop / tablet / mobile
Standar Desktop Screen Size iPad Screen Size iPhone Screen Size
(1024 x 768) (768 x 1024) (320 x 480)
12 columnas / ancho 978 px 12 columnas / ancho 748 px 8 columnas / ancho 300 px
100% 100% 100%

1024 px
100% / 978 px
base 6 columnas iguales
138 px
30 px
768 px

Recreo

Vemos que investigaron
sobre la marca y el evento
(breve cuadro en el pizarrón)
casos testigos
que marca eligieron?
identidad de marca / publico mercado
que necesita comunicar?
evento - breve primer hipótesis

¿Qué hay que hacer para la próxima clase?
entrega virtual es feriado

Tiempo para entregar:
hasta el miércoles 22 de agosto
se entrega solo 1 (un) trabajo por equipo

lo envian en formato .pdf (de baja resolución)
tamaño A4 vertical
los wireframes pueden ocupar más de una hoja
(si los hacen a mano pueden sacar fotos o escaneralos)
paula@garcia-media.com
no se queden tranquilos hasta no tenr mi recibido
incluir los nombres de todos los integrantes del equipo

Qué se entrega:
Ya tienen que tener definido y reseñar
– la marca
– la identidad (colores, tipografía, tipo de imágenes, tipo de mensajes, tono comunicacional)
– el mercado/público
– el problema a comunicar
Primera definición del evento

(que va a ser comunicado a través del newsletter, como una pieza del ecosistema)
va a tener una marca propia? una identidad propia?
– que tipo de evento, para qué? porqué?
– cuándo, cómo, dónde?
– asistencia - invitados?
– reserva/compra?
Una vez jerarquizados los contenidos realizar un primer wireframe señalando

1) zonas de contenidos (de lo más a lo menos importante para ese evento
2) elementos básicos etiquetados (título, párrafo, imagen)
3) estructura de columnas (1/2/3 máximo 4)

Empezamos con el código
código básico
https://www.w3schools.com/html/

¡Manos a la obra!
Dónde conseguir el Sublime (gratis)
https://www.sublimetext.com
Es un editor de texto - enriquecido
*recuerden que lo tienen que traer grabado en pen drive!
O pueden trabajar en Adobe Dreamweaver
En cualquier caso recuerden generar una carpeta para el proyecto que incluya sub carpetas (orden!)
por ejemplo para las imágenes
Empezar de cero con Sublime:

abrí un nuevo archivo en blanco, salvá con un nombre y la extensión .html
escribí html, pulsá TAB, magia!
– para añadir comentarios Comand + /

en Mac
lorem + Tab
– para añadir texto simulado
http://www.bytelovers.com/blog/12-sublime-text-2/14-atajos-de-teclado-para-sublime-text-2

HTML ¿qué es?
Hyper Text Markup Language
– es el lenguaje de marcado estándar para hipertexto
– describe la estructura de los archivos mediante el marcado (el etiquetado)
es un lenguaje semántico no sintáctico, de significado no de forma o apariencia
– componentes básicos están representados por etiquetas
– cada elemento etiqueta un contenido diferente (título, imagen, párrafo de texto, tabla...)
Los navegadores no muestran las etiquetas HTML, pero las usan para representar el contenido de la página
La sintaxis básica
– declaración del archivo
– head (parte invisible) meta tags
– body (parte visible) contenido

Las etiquetas HTML empiezan y terminan con el signo
<>
comunmente vienen en pares (abre /cierra)
< />
Las etiquetas HTML no distinguen entre mayúsculas y minúsculas: <P> significa lo mismo que <p>.
El estándar HTML5 no requiere etiquetas en minúsculas, pero W3C recomienda minúsculas en HTML
y exige minúsculas para tipos de documentos más estrictos como XHTML.
Diferenciar entre una etiqueta y los atributos de esa etiqueta

Todas las etiquetas pueden tener atributos (información adicional)
name = “value”
W3C recomienda usar comillas para señalar valores atributos en HTML y exige comillas para tipos de documentos más estrictos como XHTML.
Omitir comillas puede producir errores.
En W3Schools usamos siempre comillas alrededor de valores de atributo.
¿Qué tipo de comillas? Comillas dobles (puede que necesitemos usar comillas simples)
<p title=”John ‘ShotGun’ Nelson”>

name value name value name value name value
<img src=“smiley.gif” alt=“Smiley face” height=“42” width=“42”>
atributos
etiqueta

Etiquetas básicas
¿porqué no salen los acentos?
Encabezados (títulos).............(headings) . ..................<h1><h6>

<h1> es la mayor jerarquía
https://www.w3schools.com/html/html_headings.asp
<h1>Este es un título</h1>
Párrafos . .................................(paragraphs) ................<p>

https://www.w3schools.com/html/html_paragraphs.asp
<p>Este es un párrafo</p>
Saltos de línea ........................(lines break)..................<br>

por ejemplo en un texto un punto y aparte
<br> <br/>
Líneas horizontales ................(horizontal rules)..........<hr>

separadoras de elementos
<hr>

Etiquetas básicas
Enlazamos contenido a partir de un texto (hipertexto)
Enlaces.....................................(links)............................<a>
https://www.w3schools.com/html/html_links.asp
<a href=”url”>Este es un enlace</a>
name value
<a href=“https://www.w3schools.com”> Este es un enlace </a>
url
dirección para que sea efectivo el enlace
atributo
etiqueta

Etiquetas básicas
Enlaces.....................................(links)............................<a>
<a href=”url”>Este es un enlace</a>
<a href=“deportes.html” target=“_self” > Ir a la sección deportes </a>
_blank Abre el enlace en una nueva ventana

_self Abre el enlace en la misma ventana o marco
(es el atributo por defecto, no hace falta escribirlo)

Etiquetas básicas
Enlaces.....................................(links)............................<a>
Colores básicos de enlaces
Por defecto, un enlace aparecerá así (en todos los navegadores):

Un enlace no visitado está subrayado y azul
Un enlace visitado está subrayado y morado
Un enlace activo está subrayado y rojo
Puede cambiar los colores predeterminados, usando CSS

Etiquetas básicas
Bookmarks
Enlaces.....................................(links)............................<a>
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_links_bookmark
<h2 id=“C4”> Chapter 4 </h2>
<a href=“#C4”> Jump to Chapter 4 </a>

Etiquetas básicas
Imágenes.................................(image) . .......................<img>
https://www.w3schools.com/html/html_images.asp
<img src=”imagen” alt=”descripcion” width=”104px” height=”142px”>
<img src=“smile.jpg” alt=“imagen de cara sonriendo” height=“42px” width=“42px”>
<img src=”https://www.w3schools.com/images/w3schools_green.jpg” alt=”W3Schools.com”>
Formatos de imágenes: .png / .gif / .jpg

se pueden incluir imágenes animadas, solo hace falta salvar un archivo como gif animado

Etiquetas básicas
Enlazamos contenido también a través de una imagen
Imágenes.................................(image) . .......................<img>
https://www.w3schools.com/html/html_images.asp
<a href=“url”> <img src=“smile.jpg” alt=“imagen de cara sonriendo” height=“42px” width=“42px”> </a>
¿Cómo incluir en lugar de una imagen un video?

https://www.w3schools.com/html/html5_video.asp
<video width=”320” height=”240” controls>

<source src=”movie.mp4” type=”video/mp4”>
Your browser does not support the video tag.
</video>

Etiquetas básicas
Las listas
Listados....................................(list)...............................<ul> <ol> <li>
https://www.w3schools.com/html/html_lists.asp
<ul> <ol> <ol type=”1”>

<li>Café</li> <li>Café</li> <li>Coffee</li>
<li>Te</li> <li>Te</li> <li>Tea</li>
<li>Leche</li> <li>Leche</li> <li>Milk</li>
</ul> </ol> </ol>
type = “1” Los elementos de la lista se numerarán con números (valor predeterminado)
type = “A” Los elementos de la lista se numerarán con letras mayúsculas
type = “a” Los elementos de la lista se numerarán con letras minúsculas
type = “I” Los elementos de la lista se numerarán con números romanos en mayúsculas
type = “i” Los elementos de la lista se numerarán con números romanos en minúsculas

Etiquetas básicas
CTA - Call to Action
Botones....................................(button).........................<button>
https://www.w3schools.com/html/html_lists.asp
<button>Haz click aquí</button>
Los enlaces y los botones tienen funcionalidades diferentes:

los enlaces conectan con otro contenido...
...mientras que los botones estarán asociados con acciones (que no tienen por qué redireccionar
a ningún sitio o conectar con algo).
Es por ello que, desde el punto de vista de la accesibilidad, lo mejor para crear un botón que funcione
como un enlace, es usar un enlace y estilizarlo para que parezca un botón.

¿Como generar estructuras de columnas?
con div

La etiqueta <div>
como una ateiqueta que estructura contenido
en un ancho, que puede dividirse en “columnas”
1, 2, 3 col – máximo 4
Zonas de contenido a 1/2/3 columnas

hay que ver que contenido me conviene mostrar en 1/2/3 columnas

600 px / 211,667 mm

Qué se entrega:
Ya tienen que tener definido y reseñar
– la marca
– la identidad (colores, tipografía, tipo de imágenes, tipo de mensajes, tono comunicacional)
– el mercado/público
– el problema a comunicar
Primera definición del evento

(que va a ser comunicado a través del newsletter, como una pieza del ecosistema)
va a tener una marca propia? una identidad propia?
– que tipo de evento, para qué? porqué?
– cuándo, cómo, dónde?
– asistencia - invitados?
– reserva/compra?
Una vez jerarquizados los contenidos realizar un primer wireframe señalando

1) zonas de contenidos (de lo más a lo menos importante para ese evento
2) elementos básicos etiquetados (título, párrafo, imagen)
3) estructura de columnas (1/2/3 máximo 4)

Un ejemplo como “caso de estudio”
The Lily - Washington Post
Mujeres milenials - Junio 2017 - Contenido multiplataforma - Transmedia

ejemplo de newsletter en línea
https://s2.washingtonpost.com/camp-rw/?e=bGVuYWtmZWx0b25AZ21haWwuY29t&s=5b-
6c1ec7fe1ff616fd948bca
https://ladob.net/2018/06/28/the-lily-el-primer-periodico-feminista/
https://www.thelily.com/about/
https://www.washingtonpost.com/pr/wp/2017/06/12/the-washington-post-unveils-the-lily/
webminar
http://www.newsu.org/courses/secrets_of_a_successful_newsletter
video
https://www.youtube.com/watch?v=PmQi_JfEoVQ

Diseño multimedia1 / WEB 2.0 Material adaptado:
Newsletter - Wireframe - Código básico (html) Paula Ripoll

Codigo Basico

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Codigo Basico

Transféré par

Droits d'auteur :

Formats disponibles

Diseño multimedia1 / WEB 2.

1 UADE - Paula Ripoll® 2018

2 UADE - Paula Ripoll® 2018

– Antes de existir los periódicos / primeros indicios

3 UADE - Paula Ripoll® 2018

– Hoja de noticias informativa y/o comercial

Newsletter digital - email marketing

4 UADE - Paula Ripoll® 2018

– Canal de comunicación efectivo y funcional dependiendo de su base de datos

5 UADE - Paula Ripoll® 2018

6 UADE - Paula Ripoll® 2018

1. Con un newsletter se puede fidelizar muy bien a clientes-suscriptores,

Sin embargo, la audiencia manda

7 UADE - Paula Ripoll® 2018

– cuando no se enfocan en la audiencia (mercado, público)

8 UADE - Paula Ripoll® 2018

9 UADE - Paula Ripoll® 2018

Nombre del remitente claro y obvio,

10 UADE - Paula Ripoll® 2018

“Mordiscos” cortos y contundentes, con llamadas claras a la acción.

11 UADE - Paula Ripoll® 2018

Oraciones cortas con botones obvios

12 UADE - Paula Ripoll® 2018

Uno o más puntos focales claros (focal point)

13 UADE - Paula Ripoll® 2018

Una grilla de base - máximo 3 columnas iguales

14 UADE - Paula Ripoll® 2018

Cómo se ve el mensaae en la bandeja de entrada

15 UADE - Paula Ripoll® 2018

– relevamiento de piezas similares

Recuerden que primero aparece el contenido

16 UADE - Paula Ripoll® 2018

1º etapa de planificación y definición de objetivos

3º etapa de envío - lanzamiento

17 UADE - Paula Ripoll® 2018

– una marca que ya existe, tiene una historia, una identidad

18 UADE - Paula Ripoll® 2018

Marca (emisor): El club de la milanesa

Los clientes del cliente...

Debemos cultivar una relación efectiva y personalizada con nuestra audiencia,

19 UADE - Paula Ripoll® 2018

20 UADE - Paula Ripoll® 2018

El consumo se guía por tendencias

21 UADE - Paula Ripoll® 2018

– ¿Qué quiero lograr con mi campañas de email marketing?

– ¿es realizable, medible y alcanzable ese objetivo?

22 UADE - Paula Ripoll® 2018

El cliente tiene (debe tener) una propuesta comunicativa (un problema)

– layout de contenidos, qué quiero comunicar, de lo más a lo menos importante

– layout de estructura / código, los newsletter se “escriben” en código html

– layout de diseño, el código (la estructura) se estila

23 UADE - Paula Ripoll® 2018

– La frecuencia de los envíos

24 UADE - Paula Ripoll® 2018

– Asunto del mensaje

– La combinación perfecta: el email y las redes sociales

– La revisión final antes de mandar el newsletter

25 UADE - Paula Ripoll® 2018

– La base de datos (CRM)

Técnicas de captación de datos

26 UADE - Paula Ripoll® 2018

Otros datos importantes:

27 UADE - Paula Ripoll® 2018

Preguntas básicas que deben quedar respondidas: