Presentación de mi charla en la WordCamp Barcelona 2016 el día 2 de Diciembre

1. Facilitemos el trabajo a los
usuarios olvidados: backend
usable y manual de
instrucciones.
Núria Ramoneda WordCamp Barcelona - 2016
@nuriarai
1 . 1

2. Licenciada en História Contemporánea en el 89
Desde el 96 desarrollando en MS Access, analista, gestora de proyectos...
En 2006 salto al entorno web: primeras webs en xhtml y css
Me interesa la usabilidad y la accesibilidad web: hago el máster de la UOC
en "Tecnologías accesibles" entre el 2007-2009
Desde el 2012 freelance a tiempo completo maquetando y desarrollando
webs con y sin WordPress.
Núria Ramoneda Aiguadé @nuriarai
¿Quiénsoy?
1 . 2

3. Clientes pequeños y medianos
Profesionales, pequeñas empresas, centros de investigación,
asociaciones, entidades...
Necesitan webs corporativas, webs de servicios, tiendas online,
portafolios, revistas...
Según el presupuesto, se hacen diseños a medida o se adaptan themes
comprados.
Misclientes
1 . 3

4. Todos necesitan introducir
y mantener su contenido con facilidad y
agilidad
Y no siempre lo consiguen!
1 . 4

5. La UX se centra en los usuarios del front-end
y se ha olvidado a menudo
de los usuarios del back-end
2 . 1

6. Losusuariosolvidados
“ We create words and imagery that engage our users.
We put in place policies that ensure the content our
authors create is optimised for user experience.
But someone forgot… authors are users, too. A different
type, but users nonetheless. What about their experience?
Rich Yagodich, 2011
2 . 2

7. El auxiliar al que le corresponde introducir la información que la
encargada de comunicación le va enviando.
Las personas que utilizan los CMS para introducir, editar,
revisar, crear o modificar contenido en la web.
Las autoras de ese blog tan fantástico que les hemos desarrollado
(psicólogas, nutricionistas, abogadas, traductoras, filósofas, escritoras…)
Los técnicos y científicos de la organización/institución que nos ha
encargado su nuevo sitio web, lleno de proyectos que empiezan y
acaban, de miembros que entran y salen, de bibliografías (libros,
autores), de eventos, de artículos….
¿Quienessonlosusuariosolvidados?
2 . 3

8. Las autoras de un blog colaborativo que sólo quieren escribir su artículo
periódicamente.
Los diversos miembros de un equipo en un periódico o revista online:
autor, editor, corrector...
La diseñadora o el arquitecto que necesita añadir un nuevo proyecto a su
portafolio.
El encargado de introducir los productos, imágenes, precios,
características, etc de una tienda online
El encargado de los comentarios, el community manager.
Ymuchos más...
2 . 4

9. ¿Quésucedeavecescuandoseponenahacersutrabajo?
2 . 5

10. AUTHORS OF THE
WORLD, UNITE! REVOLT
AGAINST BAD AUTHOR
EXPERIENCE
Título de un de Boris Kraft publicado en
mayo de 2016 en CMSWire
artículo
2 . 6

11. Loquequeremosevitar...
2 . 7

12. “ Today, however, folks are starting to address this
problem by focusing on “author experience,” which is the
flipside to user experience. Just as basic UX principles tell
us to help users achieve tasks without frustration or
confusion, author experience design focuses on the tasks
and goals that CMS users need to meet—and seeks to
make it efficient, intuitive, and even pleasurable for them
to do so.
Sara Wachter-Boettcher
Content Everywhere: Strategy and Structure for Future-Ready Content, 2012
¿QuépasaconlosCMS,losusuariosylaUX?
¿QuéeslaAX?
3 . 1

13. “ The true reason for having a CMS is to facilitate the
human process of managing the content lifecycle from
creation, through use, to archiving.
The principles of Author Experience start with the simple
premise that the author is the most important person
when it comes to interacting with a content management
system.Rich Yagodich, 2013
3 . 2

14. Tenemosquefocalizarnosen elcontenidoyenlaAX
“ Too many CMS’s are designed by people who
understand coding, but with no grasp of how content is
used. The people building most CMS’s do not deal in the
message. We need a CMS with the Author Experience at
its core.
Rich Yagodich, 2013
3 . 3

15. HagamosquelosusuariosdelbackenddeWordPresstengan
unamejorexperiencia:
Facilitar el trabajo a autores, editores...
Conseguir que lo hagan a gusto y bien
Que no se pierdan en el backend
Que no estropeen nada
Que mantengan la línea editorial establecida
Que mantengan la línea gráfica y el diseño
establecidos
Que se sientan en su casa (branding)
3 . 4

16. alusuariodelbackend
alosusuariosquevisitaránelsitioweb
alcliente
anosotros
Elresultadonosbeneficiaatodos
3 . 5

17. ¿Quéquierenhacerlosautores/editores?
Crear páginas o artículos nuevos
Programar artículos para el futuro
Crear nuevos CPT(cursos, salas, eventos, libros, autores...)
Crear nuevas categorías o términos en taxonomías
personalizadas (nivel de baile, tipo de baile, barrio clases...)
Duplicar páginas o CPT
Añadir o modificar contenido en páginas o CPTexistentes
Navegar entre las páginas y los CPTpara modificar
repetidamente (se nos olvidó poner el teléfono a todos los
miembros del centro)
Buscar contenido para modificarlo, borrarlo o enlazarlo
Añadir nuevos items en el menú
Traducir contenido
Ordenar contenido
No quieren escribir HTML (algunos sí, otros no)
...
4 . 1

18. Roles de usuarios
RolesrealesyrolesdeWP
Autor (creador)
Editor (varios sentidos)
Traductor
Introductor (sólo introduce)
Gestor de producto
Marketer
SEO
Webmaster (gestiona configuración y
contenidos)
Otros....
Según el tamaño del cliente algunos
roles se superponen o no existen
Muchas veces los roles
stàndards de WP no son
suficientes
Administrador
Editor
Autor
Colaborador
Subscriptor
Roles WP por defecto
4 . 2

19. ¿Quédebenpoderhacerlosautores/editores?
Equivocarse!
entre otras muchas cosas
4 . 3

20. ¿QuéNOqueremosquehaganlosautores/editores?
Olvidar el modelo editorial (si lo hay)
Usar colores, fuentes, tamaños que no están en la guia de
estilos (explícita o implícitamente)
Cambiar el diseño de la web
Poner plugins sin control
Llamarnos a menudo porqué no saben cómo hacer algo
Romper la web!!
4 . 4

21. Algunasherramientasparaayudarles
4 . 5

22. Permite cambiar logo de página de login
Permite añadir widgets de texto en el dashboard
Permite quitar widgets del dashboard
Permite esconder los menús por defecto de WordPress para el
rol de editor, aunque falla con Comentarios y Profile (no los
esconde) (mejor no usarlo para ésto)
https://wordpress.org/plugins/white-label-cms/
Plugin-WhiteLabelCMSsettings
Branding &
dashboard
Inserta instrucciones
claras en el dashboard
mediante este plugin o
registrando
manualmente widgets en
functions.php
add_action( 'wp_dashboard_setup', 'register_my_dashboard_widget' );
function register_my_dashboard_widget() {
wp_add_dashboard_widget(
'my_dashboard_widget',
'My Dashboard Widget',
'my_dashboard_widget_display'
);
}
function my_dashboard_widget_display() {
echo 'Put your instructions here';
}
5 . 1

23. Plugin-AdminMenuEditor
Reordenar el menú como queramos
Esconder/eliminar opciones de menú (para todos los roles)
Añadir capacidades a cada menú
Añadir separadores de menú
Cambiar nombres de menú/submenú
AdminMenuEditorPRO
Esconder/eliminar opciones de menú por roles -> muy útil!
Importar/exportar menú
https://wordpress.org/plugins/admin-menu-editor/
Menús
5 . 2

24. Plugin-Adminimize
Escondeer/mostrar las opciones de la Tool Bar
Personalizar textos en el footer del administrador
Esconder/mostrar metaboxes de la pantalla de edición
Esconder/mostrar el botón del editor de HTML
Esconder/mostrar opciones del editor rápido (QuickEdit) -> no
permite añadir opciones (ver ACF - Admins Column Pro)
Esconder/mostrar widgets en el área de widgets
Esconder/mostrar secciones en cualquier área (help, screen
options...)
https://wordpress.org/plugins/adminimize/​
Menús,
administración y
branding
Lo mismo que Admin Menu editor y además
(todo por roles):
5 . 3

25. Plugin-UserRoleEditor
Suficiente para la mayoría de casos
Permite marcar fácilmente los permisos de cada rol
Permite crear nuevos roles y asignarles los permisos deseados
Permite asignar permisos específicos por usuario
Integra los permisos definidos por otros plugins
https://wordpress.org/plugins/user-role-editor/
Roles y
permisos
5 . 4

26. Plugin-PressPermitCore
Derivado del conocido "Role Scooper"
Control muy refinado de permisos por roles
Permisos a nivel de post y categoría
https://wordpress.org/plugins/press-permit-core/​
Añadirpermisosmanualmente
https://codex.wordpress.org/Roles_and_Capabilities
function add_theme_caps() {
// gets the author role
$role = get_role( 'author' );
$role->add_cap( 'edit_others_posts' );
}
add_action( 'admin_init', 'add_theme_caps');
Roles y
permisos
5 . 5

27. CPT
Organizar el contenido necesario con los CPTs
apropiados.
Crear CPTy sus taxonomías via plugin del repositorio
o via plugin nuestro, pero no en el theme, para que
sigan siendo visibles si el cliente cambia el tema (por
lo menos en el backend)
Nombrarlos adecuadamente para que el usuario los
identifique fácilmente (y en plural)
Traducir los textos por defecto (All items, Add new...)
Asignarles un icono específico y con sentido
Ordenar bien los ítems en el menú, sobretodo si es un
CPTcon muchas taxonomías, por orden de uso.
Contenido
Custom Post Type UI
Types
5 . 6

28. Labestianegra
Edición de
contenidos
5 . 7

29. Mejorarlapantalladeedición
Quitar las meta boxes que el usuario no necesite al registrar CPT
https://codex.wordpress.org/Function_Reference/register_post_type
Edición de
contenidos
Usar un plugin para los campos personalizados como ACF o Types,
indicando para qué es cada campo y un ejemplo si es necesario
register_post_type('bailes', array( ...
'supports' => array('title', 'editor', 'thumbnail', 'excerpt', 'page-attributes')
));
Indicar los campos obligatorios y dar un mensaje comprensible si no se
ha rellenado el campo
Recordar a los usuarios que pueden esconder o mostrar algunas cajas
mediante "Opciones de pantalla" (plugin )Seeing red
5 . 8

30. Personalizareleditor
Quitar los botones que no deben usar (colores, fuentes, tamaño de
fuente, subrayado, justificación...)
Edición de
contenidos
Añadir los estilos que deben usar según el diseño
y/o la guía de estilos en el selector de formatos
Mover el selector de formatos y de encabezados a
la primera línea
Si no se va a usar, deshabilitar el boton "añadir
media"
5 . 9

31. Plugin-ACFyACFPro
Crear campos personalizados fácilmente
Asignarlos a Posts, Páginas y/o CPT
Organizarlos en columnas
Esconder/mostrar metaboxes en la pantalla de edición
Buena documentación
Add-ons muy útiles (integración con Admin Columns)
https://wordpress.org/plugins/advanced-custom-fields/!
Custom Fields
https://www.admincolumns.com/​
5 . 10

32. Plugin-AdminColumnsyACFPro
Organizar los campos en columnas en las pantallas de
administración
Añadir ordenación por los custom fields (Pro)
Añadir filtros (Pro)
Añadir campos a la edición rápida (quick edit) (Pro)
Edición en línea de los campos de la columnas (Pro)
Administración
de posts y CPT
https://www.admincolumns.com/​
https://wordpress.org/plugins/codepress-admin-columns/​
Código-Añadircamposaquickeditcon
quick_edit_custom_box
https://www.sitepoint.com/extend-the-quick-edit-actions-in-the-wordpress-
dashboard/
https://codex.wordpress.org/Plugin_API/Action_Reference/quick_edit_custom_box​
5 . 11

33. Código
Administración
de posts y CPT
add_action( 'manage_posts_custom_column' , 'custom_columns', 10, 2 );
function custom_columns( $column, $post_id ) {
switch ( $column ) {
case 'book_author':
$terms = get_the_term_list( $post_id, 'book_author', '', ',', '' );
if ( is_string( $terms ) ) {
echo $terms;
} else {
_e( 'Unable to get author(s)', 'your_text_domain' );
}
break;
case 'publisher':
echo get_post_meta( $post_id, 'publisher', true );
break;
}
}
manage_{$post_type}_posts_columns
Añadir columnas con
restrict_manage_posts
Añadir filtros con
5 . 12

34. Plugin-CategoryOrderandTaxonomyTermsOrder
Ordenar las taxonomías cómo interese
Se aplica a todas las queries
Útil si no hay muchas categorías
Taxonomías
https://wordpress.org/plugins/taxonomy-terms-order/​
Si hay muchos términos puede ser más práctico poner un campo orden con
ACF
Añadircamposalastaxonomías
Con ACF se añaden campos fácilmente o bien con código:
manage_{$taxonomy}_custom_columns
manage_edit-{$taxonomy}_columns
https://codex.wordpress.org/Plugin_API/Filter_Reference/manage_$taxonom
y_id_columns
5 . 13

35. Quémáspodemoshacer?
Añadir ayuda contextual dónde realmente sea interesante
Deshabilitar todo lo que no sea imprescindible
Hacer que el editor de texto muestre los estilos principales
mediante
Quitar el tab de HTML del editor
Desarrollar las opciones del tema mediante la Customizer API
Usar temas hijos
Usar plantillas para las páginas
add_editor_style()
https://codex.wordpress.org/Theme_Customization_API
Crearunmanualdeinstrucciones
5 . 14

36. ¿Quédebetransmitirelmanual?
Instrucciones específicas de uso del sitio
Modelo editorial (tipos de contenidos)
Modelo de estilos
Especificaciones de funcionalidades
Qué es WordPress
Especificaciones técnicas
Plantillas usadas (para las páginas)
6 . 1

37. Introducción
Qué es WordPress
Porqué se usa WordPress para tu web
Qué contendrá este manual (y qué no)
Dónde encontrar información de usuario de WordPress
(EasyWPGuide [en inglés])
6 . 2

38. Tiposdecontenidos
Por orden de importancia
Proyectos (CPT)
Cursos (CPT)
Personal (CPT)
Páginas
Entradas
De cada CPTdefinimos
Su propósito
Sus taxonomías
Las relaciones con otros CPTs
Los campos personalizados
Su introducción en el back-end
Su visualización en el front-end
6 . 3

39. Funcionalidadesespecíficas porsecciones
Cuando la visualización de las entradas tiene una
casuística relevante y compleja hay que documentar
su programación, no sólo para las pruebas iniciales,
sinó como recordatorio para los editores en el futuro.
6 . 4

40. En las opciones del tema
Funcionalidadesgenerales
6 . 5

41. Funcionalidadesespecíficas porsecciones
Cuando se utilizan plugins externos como Addthis
hay que documentar los códigos de acceso y las
limitaciones, si las hubiere.
6 . 6

42. Cómointroducircontenido(pasoapaso)
6 . 7

43. Cómointroducircontenido(pasoapaso)
6 . 8

44. Cómotraducircontenido
Imprescindible explicar cómo hacerlo con
WPML
Dar permisos de traducción desde WPML
Uso del cambiador de idiomas superior
Duplicado de contenido al traducir
Idioma en el que estás tras el duplicado
Cambiar a "Translate independently"
Media attachments
Traducción de cadenas
6 . 9

45. Guíadeestilo
Si hay una guía de estilos corporativa enlazarla
Si se ha creado una guía de estilos específica para
este sitio enlazarla
En cualquier caso, indicar los estilos principales
Fuentes
Gama cromática
Tamaños
Si hay estilos específicos para la edición del
contenido detallarlos
6 . 10

46. Tamañosyproporciones
Especificación de los tamaños generales que deben
tener las imágenes y de los recortes establecidos
6 . 11

47. Shortcodes
Si hemos creado shortcodes para alguna
funcionalidad especial, debemos documentarlos
Los shortcodes nos permiten insertar maquetación
incluso en editores visuales
6 . 12

48. Plantillasdepáginas
Documentar las plantillas que se usan/deben usar
para las distintas páginas
El editor puede borrar sin querer
una página
Generalmente las plantillas nos permiten
maquetaciones complejas mediante programación
6 . 13

49. Documentacióntécnica
Tema padre (framework, starter theme...)
Tema hijo
Pre-procesador usado (sass / less)
Task-manager usado (grunt / gulp)
Plugins instalados
Lista de plugins y versión de cada uno
Servicios externos usados (Facebook, Twitter,
Instagram, Eventbrite, AddThiss...)
6 . 14

50. Gracias!
Núria Ramoneda Aiguadé @nuriarai
Wordcamp Barcelona - 2016
¿Preguntas?
www.paddingzero.com
7