Creación de templates para Knews. Tutorial paso a paso para crear templates de Newsletters para el plug-in Knews de Wordpress

Transcripción

1 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: Versión del documento: 1.0 Fecha del documento:

2 CREACIÓN DE TEMPLATES PARA KNEWS 2 Sumario 1. Introducción Hoja de ruta Posibilidades Estructura necesaria Consejos generales para la maquetación de s Creación paso a paso del template Sweet Barcelona Descarga de material Estructura de directorios El fichero info.xml Thumbnail del template y de los módulos Conversión del HTML a template Dividir la newsletter en 4 zonas diferenciadas Marcar el inicio y fin de los diferentes módulos Hacer el código apropiado para el editor Hacer las imágenes editables Hacer el texto editable Extrayendo contenido de los posts Definir los colores globales Definir las fuentes globales Definir los colores y fuentes locales Enlaces especiales... 18

3 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 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 s (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 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.

4 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 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?

5 CREACIÓN DE TEMPLATES PARA KNEWS 5 2. Consejos generales para la maquetación de s 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 e- mails, 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: (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 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)

6 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>.

7 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í: 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í: Nota: con los JPG tienes el material suficiente para seguir el tutorial, no es necesario abrir el PSD para entenderlo 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)

8 CREACIÓN DE TEMPLATES PARA KNEWS El fichero info.xml El fichero XML da cierta información sobre el template, esta es la estructura: <?xml version="1.0" encoding="iso "?> <template> <shortname>sweet Barcelona</shortname> <fullname>old and beautiful city</fullname> <url> <date>29/02/2012</date> <author>carles Reverter</author> <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 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í:

9 CREACIÓN DE TEMPLATES PARA KNEWS 9 Aquí puedes ver cómo Winmerge ayuda a localizar los cambios fácilmente: 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

10 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" 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"

11 CREACIÓN DE TEMPLATES PARA KNEWS 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

12 CREACIÓN DE TEMPLATES PARA KNEWS 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 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:

13 CREACIÓN DE TEMPLATES PARA KNEWS 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!!! 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%

14 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 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.

15 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 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

16 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 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.

17 CREACIÓN DE TEMPLATES PARA KNEWS 17 Aquí tenemos un ejemplo de color como background: class="local_colour_bg_2 _caption_background_color" 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 #