Se ha denunciado esta presentación.
Se está descargando tu SlideShare. ×

Facilitemos el trabajo a los usuarios olvidados: backend usable y manual de instrucciones en WordPress

Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Próximo SlideShare
WordPress
WordPress
Cargando en…3
×

Eche un vistazo a continuación

1 de 50 Anuncio

Facilitemos el trabajo a los usuarios olvidados: backend usable y manual de instrucciones en WordPress

Descargar para leer sin conexión

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

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

Anuncio
Anuncio

Más Contenido Relacionado

A los espectadores también les gustó (20)

Anuncio

Similares a Facilitemos el trabajo a los usuarios olvidados: backend usable y manual de instrucciones en WordPress (20)

Más reciente (20)

Anuncio

Facilitemos el trabajo a los usuarios olvidados: backend usable y manual de instrucciones en WordPress

  1. 1. Facilitemos el trabajo a los usuarios olvidados: backend usable y manual de instrucciones. Núria Ramoneda WordCamp Barcelona - 2016 @nuriarai 1 . 1
  2. 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. 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. 4. Todos necesitan introducir y mantener su contenido con facilidad y agilidad Y no siempre lo consiguen! 1 . 4
  5. 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. 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. 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. 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. 9. ¿Quésucedeavecescuandoseponenahacersutrabajo? 2 . 5
  10. 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. 11. Loquequeremosevitar... 2 . 7
  12. 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. 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. 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. 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. 16. alusuariodelbackend alosusuariosquevisitaránelsitioweb alcliente anosotros Elresultadonosbeneficiaatodos 3 . 5
  17. 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. 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. 19. ¿Quédebenpoderhacerlosautores/editores? Equivocarse! entre otras muchas cosas 4 . 3
  20. 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. 21. Algunasherramientasparaayudarles 4 . 5
  22. 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. 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. 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. 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. 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. 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. 28. Labestianegra Edición de contenidos 5 . 7
  29. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 40. En las opciones del tema Funcionalidadesgenerales 6 . 5
  41. 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. 42. Cómointroducircontenido(pasoapaso) 6 . 7
  43. 43. Cómointroducircontenido(pasoapaso) 6 . 8
  44. 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. 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. 46. Tamañosyproporciones Especificación de los tamaños generales que deben tener las imágenes y de los recortes establecidos 6 . 11
  47. 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. 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. 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. 50. Gracias! Núria Ramoneda Aiguadé @nuriarai Wordcamp Barcelona - 2016 ¿Preguntas? www.paddingzero.com 7

×