Slide 1

Slide 1 text

Themes

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

No content

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

No content

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

Plone 6 Classic UI

Slide 17

Slide 17 text

Diagramación por defecto

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

Through The Web

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Diagramación por defecto

Slide 24

Slide 24 text

Barceloneta Theme

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Volto UI

Slide 28

Slide 28 text

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.

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

Diseño de prototipo (Prototype)

Slide 41

Slide 41 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 42

Slide 42 text

¿Por qué hacer prototipos?

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 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 46

Slide 46 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 ● 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

Slide 47

Slide 47 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 48

Slide 48 text

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

Slide 49

Slide 49 text

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