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

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