Tutorial formato PDF

Creación de templates
para Knews
Tutorial paso a paso para crear templates
de Newsletters para el plug-in Knews
de Wordpress
Documento disponible en: English | Español | Català
URL del plug-in, documentación y soporte: http://www.knewsplugin.com
Versión del documento: 1.0
Fecha del documento: 13-4-2012
CREACIÓN DE TEMPLATES PARA KNEWS | 2
Sumario
1. Introducción ............................................................................................... 3
1.1. Hoja de ruta ................................................................................. 3
1.2. Posibilidades ................................................................................. 3
1.3. Estructura necesaria ..................................................................... 4
2. Consejos generales para la maquetación de e-mails .................................... 5
3. Creación paso a paso del template “Sweet Barcelona” ................................ 7
3.1. Descarga de material .................................................................... 7
3.2. Estructura de directorios ............................................................... 7
3.3. El fichero info.xml ....................................................................... 8
3.4. Thumbnail del template y de los módulos .................................... 8
3.5. Conversión del HTML a template ................................................ 8
3.5.1. Dividir la newsletter en 4 zonas diferenciadas .............. 9
3.5.2. Marcar el inicio y fin de los diferentes módulos ......... 10
3.5.3. Hacer el código apropiado para el editor .................... 11
3.5.4. Hacer las imágenes editables ...................................... 12
3.5.5. Hacer el texto editable ................................................ 13
3.5.6. Extrayendo contenido de los posts .............................. 13
3.5.7. Definir los colores globales ........................................ 14
3.5.8. Definir las fuentes globales ........................................ 15
3.5.9. Definir los colores y fuentes locales ........................... 16
3.5.10. Enlaces especiales ...................................................... 18
CREACIÓN DE TEMPLATES PARA KNEWS | 3
1. Introducción
Cualquier diseño puede llevarse a cabo como template para Knews, y cualquier maqueta
puede ser fácilmente convertida en template.
Con la información de este manual, usted podrá crear un template de Knews de cero,
partiendo de una newsletter ya maquetada en HTML o duplicar un template de Knews y
personalizarlo haciéndole modificaciones.
Los templates de Knews son newsletters en HTML normales, a los que se les añaden
una serie de parámetros, algunos como clases, y otros como comentarios dentro del html.
Con estos parámetros, el editor de Knews sabrá qué partes son editables y cuáles no,
qué colores son personalizables, etc.
El resultado, es un html perfectamente visible en cualquier navegador, válido según los
estándares del 3WC y editable en cualquier editor HTML.
1.1. Hoja de ruta
Primero comentaremos qué posibilidades ofrece el sistema de plantillas modulares de
Knews, que en gran parte condicionará como se diseñan y maquetan las plantillas.
En segundo lugar, comentaremos qué necesidades específicas tiene el editor de Knews
en cuanto a formato del HTML (que son muy pocas).
Después, haremos un repaso a les regles básicas para maquetar newsletters y e-mails
(para que se vean bien en todos los programas de correo y webmails).
Para acabar, haremos, paso a paso, la conversión del template “Sweet Barcelona” de
HTML normal a template de Knews.
1.2. Posibilidades
- En los templates hay estilos y colores editables por el usuario. Los estilos comprenden
tipografía, tamaño del texto, tamaño del texto CSS e interlineado CSS. Los colores
pueden usarse a la vez como background y color de texto.
- Los estilos y colores pueden ser locales y globales. Locales quiere decir que sólo
cambiarán allá dónde el usuario los edite. Los globales por contra, cambiarán en todos
los lugares a la vez cuando el usuario los modifique.
- Pueden crearse contenidos fijos (como la cabecera de la newsletter) y contenidos
modulares. Los módulos pueden colocarse ninguna, una o varias veces en la newsletter,
haciéndola crecer según los contenidos que quieran comunicarse.
CREACIÓN DE TEMPLATES PARA KNEWS | 4
- Los contenidos fijos pueden tener imágenes editables, textos editables y estilos
globales, pero no estilos locales.
- Los módulos pueden tener imágenes editables, textos editables, estilos globales y
locales, y además, pueden ofrecer la posibilidad al usuario de extraer su contenido de
manera automática de un post o página.
- Los templates pueden tener una o varias zonas para acoger módulos, y en este caso,
pueden definirse diferentes tipos de zonas, y asignar los módulos a ciertas zonas. Por
ejemplo: si diseñamos un newsletter con una columna ancha y una estrecha, podemos
crear unos módulos para la columna ancha y otros para a la columna estrecha.
1.3. Estructura necesaria
- Cada módulo debe ser una tabla completa, puede tener dentro más tablas y cualquier
otro elemento, pero obligatoriamente debe comenzar con <table> y terminar con
</table>
- Los módulos sólo pueden ser insertados en contenedores. Cada contenedor deberá ser
una tabla, con una celda única para contener cada módulo. Como mínimo debemos
tener uno si queremos que el template tenga módulos editables.
Por ejemplo, si queremos un template con una estructura de dos columnas de módulos,
deberemos, obligatoriamente, crear una primera tabla con dos celdas, una para cada
columna, dentro de cada celda, una segunda tabla que será el contenedor de módulos, y
dentro de estas tablas interiores, en cada celda, podrá alojarse un módulo.
El editor va creando celdas dentro de los contenedores conforme el usuario va
añadiendo módulos, en consecuencia no debemos crear celdas vacías.
I ya está... ¿fácil, verdad?
CREACIÓN DE TEMPLATES PARA KNEWS | 5
2. Consejos generales para
la maquetación de e-mails
Los consejos o directrices explicadas en este apartado no se circunscriben a la creación
de plantillas o templates para Knews, sino que son aplicables en general a todos los emails, fruto de nuestra experiencia profesional. Son totalmente válidas igualmente en la
construcción de plantillas o templates para Knews.
•
Maquetar seccionando los contenidos en tablas, haciéndolas lo más sencillas
posibles. Mejor hacer varias tablas unas dentro las otras que intentar contenerlo
todo en una sola muy complicada.
•
Dimensionar las celdas colocando imágenes que actúen como espaciadores. En
la distribución horizontal de espacios, colocar todos los espaciadores en una
misma fila, y que la suma total de estos espaciadores sean igual a la anchura de
la tabla. Esta fila no debe tener colspan en ninguna celda. En los espaciadores
verticales (si son necesarios) no poner ningún rowspan a las celdas que los
contienen.
•
Las imágenes no pueden deformarse, deberán tener la misma anchura y altura en
píxeles que sus atributos width y height. La vieja técnica de usar un
espaciador de 1x1 píxel falla en ciertas versiones de Microsoft Outlook, que se
atiene a las medidas de la imagen e ignora width y height.
•
Las imágenes deben colocarse como <img>, nunca como background, y
ponerles un texto alternativo si son parte del mensaje, o alt="" si no forman
parte de él. Esto provoca que no pueda combinarse texto sobre imagen, y que el
texto debe ponerse siempre sobre un fondo de color plano, o bien convertirse en
imagen. Nota: Algunos diseñadores usan imágenes como background,
previniendo que muchos usuarios no las verán, haciendo un diseño que también
sea atractivo sin estas imágenes.
•
Maquetar correctamente, cerrando todos los tags. Recomendamos la extensión
de Firefox HTML Validator: http://users.skynet.be/mgueury/mozilla/ (y
configurarla como proceso serial).
•
Tenga en cuenta que muchos lectores de correo no cargan inicialmente las
imágenes. Por lo tanto una buena parte del mensaje debe ser texto, no imagen, y
es necesario poner en las imágenes contenido alt. Consejo: Renombrar la
carpeta de imágenes para comprobar en un navegador cómo se verá el e-mail sin
imágenes.
•
Filtros anti-spam. Evitar texto demasiado grande, puede ser considerado spam, e
imágenes demasiado grandes (más grandes de 350 píxeles, por ejemplo, partirla
en dos)
CREACIÓN DE TEMPLATES PARA KNEWS | 6
•
•
•
Algunos lectores de correo ignoran los CSS. Así que lo mejor es maquetar
primero con <font face="xxx" size="yyy"> y después de comprobar en
diferentes navegadores, añadir estilos CSS si por criterios de diseño queremos
modificar un poco el tamaño del texto o la interlinea. No hacer imprescindible
nunca los CSS para la correcta visualización de la maquetación.
Poner tags <p style="margin:0px; padding:0px"> en todos los textos.
Poner a todas las imágenes <img style="display:block"
Poner los colores en formato #RRGGBB, nunca en formato abreviado #rgb o (r,
g, b). No poner atributos CSS que puedan ponerse de otra manera. Así se
asegura la correcta visualización en todos los sitios, usar bgcolor en los <td>
y <table>, color en los <font> y los <a>.
CREACIÓN DE TEMPLATES PARA KNEWS | 7
3. Creación paso a paso del template
“Sweet Barcelona”
3.1. Descarga de material
Puedes bajarte el material necesario para seguir el curso aquí:
http://www.knewsplugin.com/es/tutorial/, dentro encontrarás el html maquetado
normalmente, el template ya construido y unos JPG dónde se han marcado qué áreas
deben prepararse (columnas, módulos, zonas editables, etc.)
También puedes dejarte el PSD (documento de Adobe Photoshop) aquí:
http://www.knewsplugin.com/es/template-sweet-barcelona/. Nota: con los JPG tienes el
material suficiente para seguir el tutorial, no es necesario abrir el PSD para entenderlo.
3.2. Estructura de directorios
El template debe estar contenido dentro de un directorio (por ejemplo “sweet_bcn”).
Dentro debe contener dos directorios más:
• images (las imágenes que utiliza la newsletter)
• modules (imágenes thumbnails de los módulos que tendrá la newsletter).
Y 3 ficheros:
• template.html (todo el código del template)
• info.xml (información sobre el template)
• thumbnail.jpg (el thumbnail del template)
CREACIÓN DE TEMPLATES PARA KNEWS | 8
3.3. El fichero info.xml
El fichero XML da cierta información sobre el template, esta es la estructura:
<?xml version="1.0" encoding="ISO-8859-1"?>
<template>
<shortname>Sweet Barcelona</shortname>
<fullname>Old and beautiful city</fullname>
<url>http://www.knewsplugin.com/template-sweet-barcelona</url>
<date>29/02/2012</date>
<author>Carles Reverter</author>
<urlauthor>http://www.knewsplugin.com</urlauthor>
<minver>1.0.0</minver>
<onlypro>no</onlypro>
<description>An elegant, classic, double column newsletter,
100% color and font configurable.</description>
</template>
Los campos marcados en negrita pueden modificarse, el resto quedan reservados para
futuras versiones de Knews.
3.4. Thumbnails del template y de los módulos
La carpeta del template debe contener un JPG que servirá para ilustrar el template. Debe
ser de 150 x 200 píxeles.
La carpeta /modules, debe contener un JPG como thumbnail para a cada módulo, de
tamaño 220 x 90 píxeles, los nombres serán: “module_1.jpg”, “module_2.jpg”...
“module_n.jpg”
3.5. Conversión del HTML a template
Esta parte del tutorial la hemos estructurado poniendo diferentes documentos .html con
los cambios paso a paso.
Recomendamos la descarga de Winmerge, una aplicación gratuita que compara
ficheros y muestra de manera muy sencilla los cambios realizados. Puedes descargarla
aquí: http://winmerge.org.
CREACIÓN DE TEMPLATES PARA KNEWS | 9
Aquí puedes ver cómo Winmerge ayuda a localizar los cambios fácilmente:
3.5.1. Dividir la newsletter en 4 zonas diferenciadas
“HEADER”: Esta zona será fija en la newsletter, por lo tanto no necesitamos indicarla
de ninguna manera.
“LEFT COLUMN” y “RIGHT COLUMN”: Estas zonas pueden contener los
módulos estrechos, por lo que los etiquetaremos como “Zone 1”
“FOOTER”: Esta zona podrá contener los módulos anchos, y los etiquetaremos como
“Zone 2”
CREACIÓN DE TEMPLATES PARA KNEWS | 10
Para ver estos cambios, compara (abre) con Winmerge los ficheros “tutorial_0.html” y
“tutorial_1.html”
Hemos marcado las dos columnas como contenedores zona 1, porque los módulos
estrechos sirven para las dos columnas, y el contenedor ancho como zona 2, añadiendo
les siguientes clases:
class="container_zone_1" / class="container_zone_1" /
class="container_zone_2"
3.5.2. Marcar el inicio y fin de los diferentes módulos
Para ver estos cambios, abre con Winmerge los ficheros “tutorial_1.html” y
“tutorial_2.html”:
Numeraremos los módulos, de 1 a 6, marcando con un comentario dónde comienzan y
dónde acaban:
<!--[start module 1]--> / <!--[end module 1]-->
...
<!--[start module 6]--> / <!--[end module 6]-->
...y los asignaremos a una de las dos zonas: 1 (columna izquierda y derecha) y 2 (ancho
total), añadiendo un class a cada módulo:
class="zone_1" / class="zone_2"
CREACIÓN DE TEMPLATES PARA KNEWS | 11
3.5.3. Hacer el código apropiado para el editor
Ahora, imaginemos cómo quedará el código HTML cuando el editor cargue por primera
vez el template: el editor extraerá los módulos del cuerpo de la newsletter, quedando los
<tr><td> (módulo) </td></tr> que contienen los módulos, vacíos... por tanto,
debemos marcarlos:
Para ver estos cambios, abre con Winmerge los ficheros “tutorial_2.html” y
“tutorial_3.html”:
El primer contenedor de módulo de cada zona, será especial, y quedará como receptor
de módulos (módulo 1, 3 y 5):
<!--[open_insertion_container_start]--><tr
class="droppable_empty"><td><!-[close_insertion_container_start]-->
(módulo)
<!--[open_insertion_container_end]--></td></tr><!-[close_insertion_container_end]-->
Y el resto (módulo 2, 4 y 6):
<!--[open_ignore_code]--><tr><td><!--[close_ignore_code]-->
(módulo)
<!--[open_ignore_code]--></td></tr><!--[close_ignore_code]-->
En cada módulo, insertaremos un span dónde el editor situará los iconos de mover y
eliminar módulo:
<span class="handler"></span>
A partir de este punto, ya podemos probar el template:
1. abre el FTP y ves al directorio: /wp-content/plugins/knews/templates/sweet_bcn/
2. Borra el fichero template.html, sube el “tutorial_3.html” y renómbralo como
“template.html”
CREACIÓN DE TEMPLATES PARA KNEWS | 12
3. Entra en la admin de wordpress, en knews>newsletters y crea una newsletter
nueva, eligiendo el template “Sweet Bcn”
Ahora verás que ya puedes incluir módulos, eliminarlos y reordenarlos, pero aún no
podemos editar su contenido...
Nota importante: Para poder probar los cambios que hayamos hecho a un template,
siempre deberemos crear una newsletter nueva, porque una vez creada una newsletter,
los cambios realizados al template no le afectan.
Todos los ficheros a partir de “tutorial_3.html” en adelante, puedes comprobarlos de
la misma manera si así lo deseas.
3.5.4. Hacer las imágenes editables
Ahora, haremos editables las imágenes, podemos ver los cambios comparando con
Winmerge los ficheros “tutorial_3.html” y “tutorial_4.html”:
class="editable"
Nota: en nuestro caso, las haremos todas editables, pero si estás haciendo un template
corporativo, quizás querrás dejar algunas imágenes como no editables:
CREACIÓN DE TEMPLATES PARA KNEWS | 13
3.5.5. hacer el texto editable
Ahora haremos editables todas las secciones, podemos ver los cambios comparando con
Winmerge los ficheros “tutorial_4.html” y “tutorial_5.html”, añadiremos:
<!--[start_editable_content]-->
(parte que queremos hacer editable)
<!--[end_editable_content]-->
Nota: en nuestro caso, haremos todos los textos editables, pero quizá querrás dejar
textos no editables.
Hay que tener en cuenta que siempre es necesario envolver los tags de html
completamente, por ejemplo:
<p><!--[start_editable_content]-->Hello world<!—
[end_editable_content]--></p>
... es correcto, pero no podremos editar la justificación del texto
<!--[start_editable_content]--><p>Hello world</p>
<!--[end_editable_content]-->
...es correcto y podremos editar la justificación del texto
<!--[start_editable_content]--><p>Hello world
<!--[end_editable_content]--> </p>
... es incorrecto!!!
3.5.6. Extrayendo contenido de los posts
Podemos hacer que las newsletters obtengan su contenido de los posts/páginas de
Wordpress, evitando entrar dos veces la información y consiguiendo un enlace
automático entre la newsletter y el post de la web/blog.
Para ver estos cambios, abre con Winmerge los ficheros “tutorial_5.html” y
“tutorial_6.html”:
Debemos cambiar el texto por:
%the_title_1%
/
%the_excerpt_1%
/
%the_permalink_1%
CREACIÓN DE TEMPLATES PARA KNEWS | 14
Por qué acaban en _1? Pues porque un módulo, puede ser receptor de más de un post, en
este caso, numeraremos estas etiquetas _2, _3 etc. per diferenciarlas (en el template
“Clean Blue” hay un ejemplo)
Igual que antes hemos introducido <span handler></span>, pondremos:
<span class="chooser"></span>
El editor pondrá dentro de “chooser” los selectores para elegir entre texto libre y
seleccionar post.
3.5.7. Definir los colores globales
Los colores globales están inspirados en las hojas de estilo. El usuario los puede editar
todos a la vez. Esto da unidad de aspecto a la newsletter, y ahorra trabajo al usuario.
Numeraremos los colores globales, en nuestro caso: 1, 2 y 3.
En cada tag dónde aparezca el color, añadiremos un class vinculándolo al color global,
por ejemplo, el enlace de “can’t read”:
<a href="#" style="color:#bc0000;"
class="global_colour_1 _caption_link_colors">here</a>
Si hubiéramos querido asociarlo al color global 2, simplemente hubiéramos introducido
la clase global_colour_2.
CREACIÓN DE TEMPLATES PARA KNEWS | 15
Nota: los colores globales pueden ser a la vez colors y backgrounds, en este caso, el
nombre será: global_colour_bg_1 / global_colour_bg_2 /
global_colour_bg_3, más adelante veremos un ejemplo.
En el mismo class, pondremos un título para ayudar al usuario, codificado de la
siguiente manera:
_caption_ + [el_nombre_con_los_espacios_como_guiones_bajos]
Para ver el primer color global, abre con Winmerge los ficheros “tutorial_6.html” y
“tutorial_7.html”.
Para ver el segundo y tercer color global aplicados, abre con Winmerge los ficheros
“tutorial_7.html” y “tutorial_8.html”.
3.5.8. Definir las fuentes globales
Las fuentes globales funcionan exactamente igual que los colores globales, tienen como
valores:
-
La fuente
El tamaño
El tamaño CSS (opcional)
La interlinea CSS (opcional)
... y los cogen del tag dónde haya el class
CREACIÓN DE TEMPLATES PARA KNEWS | 16
La única diferencia es la nomenclatura, haremos 2 fuentes globales:
class="global_font_1 _fcaption_title_fonts"
class="global_font_2 _fcaption_article_fonts"
Para ver las fuentes globales aplicadas, abre con Winmerge los ficheros “tutorial_8.html”
y “tutorial_9.html”.
3.5.9. Definir los colores y fuentes locales
Los colores y fuentes locales funcionan exactamente igual que los globales, con la
diferencia que quedan asignados a un sólo módulo. Esto implica que no pueden
asignarse a ningún contenido fuera de un módulo.
Los nombres, cambian, en vez de empezar con global_ empiezan por local_, y
para cada módulo empiezan a numerarse por 1:
class="local_colour_1 _caption_text_color”
Importante: si no numeramos correctamente, el editor no los encontrará.
Para ver los colores y fuentes locales aplicadas, abre con Winmerge los ficheros
“tutorial_9.html” y “tutorial_10.html”.
CREACIÓN DE TEMPLATES PARA KNEWS | 17
Aquí tenemos un ejemplo de color como background:
class="local_colour_bg_2 _caption_background_color"
3.5.10. Enlaces especiales
Hay dos tipos de enlaces especiales:
%cant_read_href%
%unsubscribe_href%
Knews los substituirá por los valores correctos en los envíos a listas de correo, puedes
verlos aplicados comparando “tutorial_10.html” y “template.html”.
# Fin del documento #