Copyright (c) 2023 Leonardo J. Caballero G. Esta obra está sujeta a la licencia Reconocimiento-CompartirIgual 3.0 Venezuela de Creative Commons. Para ver una copia de esta licencia, visite la siguiente dirección URL: http://creativecommons.org/licenses/by-sa/3.0/ve/ Este material es parte del entrenamiento en "Plone 6 Themes", el cual explica: "Introducción al Diseño Web en Plone 6", presentaré los diversos enfoques para usar temas en Plone como punto de partida para un proyecto Plone, hay varios temas disponibles en Github, desde el enfoque "Classic UI" y el frontend "Volto", además de presentar, También mostraré algunas herramientas disponibles para realizar Diseño UX en proyectos Plone. Licencia: Reconocimiento-CompartirIgual 3.0 Venezuela de Creative Commons. Formato: LibreOffice.org Impress y Writer. Duración: Mínimo 45 minutos, Máximo 40 minutos, más 15 minutos de preguntas. Dictada en: Plone Symposium South America 2023. Ultima actualización: 22/11/2023. Lugar: Sucre, Miranda, Venezuela. Autor: Ing. Leonardo J. Caballero G. Email: leonardoc at plone.org, leonardocaballero at gmail.com Domicilio Web: https://github.com/macgua Visualiza y descarga vía: https://www.slideshare.net/lcaballero / https://speakerdeck.com/macagua

1. Themes

2. http://www.flickr.com/photos/sinlentes/5570374264/
Leonardo J. Caballero G.
Plone Developer desde 2008
Embajador de la Fundación Plone para
habla hispana
Autor de publicaciones sobre Plone
Traductor al Español de Plone
Miembro de la Fundación Plone

4. Propuesta y ejecución
●
Definir el producto digital.
●
Estructuración de contenidos.
●
Diseño y prototipo.
●
Desarrollo e implementación.

5. Propuesta y ejecución

16. Plone 6 Classic UI

17. Diagramación por defecto

20. Through The Web

22. Through The Web Customizations
●
Cambiar archivo de logotipo.
●
Cambiar archivo de favicon.ico
●
Implementar algunos estilos CSS.
●
Ocultar algunas viewlets.

23. Diagramación por defecto

24. Barceloneta Theme

26. Kitty Theme
https://training.plone.org/theming/theme_barceloneta.html

27. Volto UI

28. Volto UI
●
Es una interfaz basada en React para Plone
CMS.
●
Es la interfaz predeterminada a partir de la
versión Plone 6.
●
Integración con el mundo moderno del
desarrollo frontend de React.

29. https://github.com/eea/volto-sustainability-theme

30. https://github.com/eea/volto-ims-theme

31. https://github.com/eea/volto-forests-theme

32. https://github.com/eea/volto-energy-theme

33. https://github.com/collective/volto-educal-theme

34. https://github.com/intk/volto-museumhilversum-theme

35. https://github.com/intk/volto-intkwebsite-theme

36. https://github.com/intk/volto-rietveldschroderhuis-theme

37. https://github.com/intk/volto-centraalmuseum-theme

38. https://github.com/intk/volto-zeeuwsmuseum-theme

39. https://github.com/collective/cookiecutter-plone-starter

40. Diseño de prototipo (Prototype)

41. Diseño de prototipo (Prototype)
●
Simular el diseño final, la estética, los materiales y
la funcionalidad prevista.
●
Tal ves reduzca el tamaño o funcionalidad.
●
Las funcionalidades trabajan en conjunto.
●
Comprobación final de los defectos de diseño.

42. ¿Por qué hacer prototipos?

43. Diseñadores vs. Programadores
http://www.flickr.com/photos/a_ninjamonkey/3565672226/

44. Bocetos
(Sketch)
Prototipo
(Prototype)
Wireframes
Diseño visual
(Mock-up)
¿Cual es el flujo de trabajo?

45. Desarrollo e implementación
http://desarmo.blogspot.com/2007/06/as-time-goes-by.html
• Investigación y pruebas de productos (Add-ons).
• Probar calidad de productos y su integración al desarrollo.
• Diseño de portadas y diagramación de contenidos.
• Usabilidad y funcionalidad.

46. Lecturas recomendadas
●
Rediseño de Portal Web para la Comunidad Scrum Latam
https://www.behance.net/gallery/181011581/Rediseno-de-Portal-Web-para-la-Comunidad-Scrum-Latam
●
Theming of Classic UI - Plone Documentation v6.0
https://6.docs.plone.org/classic-ui/theming/index.html
●
Plone 6 Classic UI Theming — Plone Training
https://training.plone.org/theming/index.html
●
Configuring and Customizing Plone "Through The Web" –
Mastering Plone 6 development
https://training.plone.org/mastering-plone/configuring_customizing.html

47. Lecturas recomendadas
●
Volto Hands-On - Plone Training documentation
https://training.plone.org/voltohandson/index.html
●
Volto Add-ons Development - Plone Training
https://training.plone.org/voltoaddons/index.html
●
Frontend — Plone Documentation v6.0
https://training.plone.org/voltoaddons/index.html
●
Awesome Volto Themes
https://github.com/collective/awesome-volto#themes

48. ¿Preguntas?
leonardoc@plone.org
@macagua / @ploneve
https://www.flickr.com/photos/sparetomato/2641110677/

49. Copyright (c) 2023 Leonardo J. Caballero G
Copyright (c) 2023 Leonardo J. Caballero G.
Esta obra está sujeta a la licencia
Esta obra está sujeta a la licencia Reconocimiento-
Reconocimiento-
CompartirIgual 3.0 Venezuela de Creative Commons
CompartirIgual 3.0 Venezuela de Creative Commons.
.
Para ver una copia de esta licencia, visite la siguiente
Para ver una copia de esta licencia, visite la siguiente
dirección URL:
dirección URL:
• http://creativecommons.org/licenses/by-sa/3.0/ve/
http://creativecommons.org/licenses/by-sa/3.0/ve/
Bajo los siguientes términos:
Bajo los siguientes términos:
• Reconocimiento - Usted debe dar el crédito apropiado,
Reconocimiento - Usted debe dar el crédito apropiado,
proporcionar un enlace a la licencia, y de indicar si se han
proporcionar un enlace a la licencia, y de indicar si se han
realizado cambios. Usted puede hacerlo de cualquier
realizado cambios. Usted puede hacerlo de cualquier
manera razonable, pero no en una manera que sugiere el
manera razonable, pero no en una manera que sugiere el
licenciante a usted o que apruebe su utilización.
licenciante a usted o que apruebe su utilización.
• CompartirIgual - Si usted mezcla, transforma o crea nuevo
CompartirIgual - Si usted mezcla, transforma o crea nuevo
material a partir de esta obra, usted podrá distribuir su
material a partir de esta obra, usted podrá distribuir su
contribución siempre que utilice la misma licencia que la
contribución siempre que utilice la misma licencia que la
obra original.
obra original.
Licenciamiento