Plone 6 Themes - World Plone Day 2024

Slide 1

Slide 1 text

Themes

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Propuesta y ejecución

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

Diseño web

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

Volto, el Frontend de Plone

Slide 18

Slide 18 text

● 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.

Slide 19

Slide 19 text

https://github.com/plone/volto

Slide 20

Slide 20 text

https://github.com/collective/cookiecutter-plone-starter Instalar stack de Plone CMS

Slide 21

Slide 21 text

https://github.com/plone/plone.org

Slide 22

Slide 22 text

https://github.com/plone/2023.ploneconf.org

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Design System

Slide 30

Slide 30 text

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.

Slide 31

Slide 31 text

Design System para Plone

Slide 32

Slide 32 text

Light theme Design System

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

https://www.dlr.de/en

Slide 35

Slide 35 text

https://github.com/plone/2024.ploneconf.org

Slide 36

Slide 36 text

https://github.com/plone/plone.de

Slide 37

Slide 37 text

https://github.com/plone/demo.plone.org

Slide 38

Slide 38 text

io-Comune Design System

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

European Environment Agenc Design System

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

New South Wales Design System

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

Diseño de prototipo (Prototype)

Slide 49

Slide 49 text

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.

Slide 50

Slide 50 text

¿Por qué hacer prototipos?

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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.

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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