Plone 6 Themes - World Plone Day 2024

Copyright (c) 2023-2024 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 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: Minimó 45 minutos, Máximo 40 minutos, más 15 minutos de preguntas.
Dictada en: World Plone Day 2024.
Ultima actualización: 21/04/2024.
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

Transcript

1. Themes
3. 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
10. Diseño web
17. Volto, el Frontend de Plone
18. • La 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.
19. https://github.com/plone/volto
20. https://github.com/collective/cookiecutter-plone-starter Instalar stack de Plone CMS
21. https://github.com/plone/plone.org
22. https://github.com/plone/2023.ploneconf.org
23. https://github.com/collective/volto-educal-theme
24. https://github.com/intk/volto-intkwebsite-theme
25. https://github.com/intk/volto-museumhilversum-theme
26. https://github.com/intk/volto-rietveldschroderhuis-theme
27. https://github.com/intk/volto-centraalmuseum-theme
28. https://github.com/intk/volto-zeeuwsmuseum-theme
29. Design System
30. Design System • Los Design Systems han revolucionado la forma en que abordamos el diseño UX/UI. • Proporcionan un marco para crear productos digitales cohesivos y consistentes. • Mejorando tanto el UX como la eficiencia de los equipos de diseño.
31. Design System para Plone
32. Light theme Design System
33. Light theme Design System • Demo en linea: https://light-theme.kitconcept.io/ • Kit UI en Figma: https://www.figma.com/file/eYUCbivnNrnjXjBDUizSVX/Volto-Light-Theme • Storybook: https://plone-components.netlify.app/ • Repositorios Github: • https://github.com/kitconcept/volto-light-theme • https://github.com/kitconcept/kitconcept.voltolighttheme • https://github.com/rohberg/even-lighter-theme-customizations • https://github.com/plonegovbr/volto-brasil-theme
34. https://www.dlr.de/en
35. https://github.com/plone/2024.ploneconf.org
36. https://github.com/plone/plone.de
37. https://github.com/plone/demo.plone.org
38. io-Comune Design System
39. io-Comune Design System • Demo en linea: https://comuni.designers.italia.it/ • Documentación: https://designers.italia.it/modelli/comuni/ • Kit UI en Figma: https://www.figma.com/@designersitalia • Repositorios Github: • https://github.com/RedTurtle/design-comuni-plone-theme • https://github.com/RedTurtle/design.plone.contenttypes • https://github.com/RedTurtle/iocomune-backend
40. European Environment Agenc Design System
41. European Environment Agenc Design System • Demo en linea: https://www.eea.europa.eu/en • Documentación: https://eea.github.io/volto-eea-design-system/ • Storybook: https://eea.github.io/eea-storybook/ • Repositorios Github: • https://github.com/eea/volto-eea-website-theme • https://github.com/eea/volto-eea-kitkat • https://github.com/eea/eea.kitkat
42. https://github.com/eea/volto-sustainability-theme
43. https://github.com/eea/volto-ims-theme
44. https://github.com/eea/volto-forests-theme
45. https://github.com/eea/volto-energy-theme
46. New South Wales Design System
47. New South Wales Design System • Demo en linea: https://digitalnsw.pretagov.com.au/ • Documentación: https://digitalnsw.github.io/nsw-design-system/ • Kit UI en Figma: https://digitalnsw.github.io/nsw-design-system/docs/content/design/figma-ui-kit.html • Repositorios Github: • https://github.com/digitalnsw/nsw-design-system/ • https://github.com/pretagov/nsw-design-system-plone6 • https://github.com/pretagov/nswdesignsystem.plone6
48. Diseño de prototipo (Prototype)
49. 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.
50. ¿Por qué hacer prototipos?
51. Diseñadores vs. Programadores http://www.flickr.com/photos/a_ninjamonkey/3565672226/
52. Bocetos (Sketch) Prototipo (Prototype) Wireframes Diseño visual (Mock-up) ¿Cual es el flujo de trabajo?
53. 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.
54. 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 • Manual de Usuario de Volto • https://6.docs.plone.org/volto/user-manual/index.html • Frontend • https://6.docs.plone.org/volto/index.html • Theming del Frontend • https://6.docs.plone.org/volto/theming/index.html • Desarrollo del Frontend • https://6.docs.plone.org/volto/development/index.html
55. 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
56. ¿Preguntas? leonardoc@plone.org @macagua / @ploneve https://www.flickr.com/photos/sparetomato/2641110677/
57. Copyright (c) 2023- Copyright (c) 2023-2024 Leonardo J. Caballero G 2024 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