[Usuarios Plone] Theme de Plone basado en Twitter Bootstrap

Ramon Navarro Bosch ramon.nb at gmail.com
Wed Nov 21 16:06:54 UTC 2012


El bàsico és un tema genèrico ... per ejemplo en el caso de eke.org:

El "tema" diazo seria un index.html basico con la cabezera i el pie
renderizando en la parte del contenido el #content de plone. En el css del
diazo estarian definidos los estilos de los elementos especificos que hay
en el site (h1, p, portletXXX, .... ) però las estructuras html serian las
de plone dentro del content. Dicho de otra manera no importamos el css de
Plone sino redefiminos el css bàsico en funcion del disseño.

Para poder tener la web que comentais se necesitarian
view.pt/z3c.jbotespecificos para cada elemento (calendario, listado,
search, vistas de
contenido, con su css especifico )

Seria un hibrido, maqueta principal en diazo, estructura y semantica en zpt
:)

R


2012/11/21 Lur Ibargutxi <libargutxi at codesyntax.com>

> Mirando un poco vuestro "PSD to Plone" veo que el básico cubre la
> estructura general de Plone (es asi verdad?). Si por ejemplo en ese Plone
> tenemos un noticiero saldra con el estilo por defecto de Plone verdad?
>
> esta web que he desarrollado tenemos varias plantillas con diferentes
> diseños:
> http://www.eke.org/es Portada diferente por cada idioma (mirar en y eu)
> http://www.eke.org/es/agenda
>
> http://www.eke.org/es/actores-culturales/herriak/agglomeration-cote-basque-adour/baiona
>
> http://www.eke.org/es/actores-culturales/herriak/agglomeration-cote-basque-adour
>
> http://www.eke.org/es/actores-culturales/partaideak/maiatz-en-literatur-solasaldiak
> http://www.eke.org/es/kultura/entrevistas?category=b-01
>
> http://www.eke.org/es/kultura/entrevistas/jean-christian-irigoyen-galtxetaburu
> http://www.eke.org/es/actores-culturales/partaideak/cat?set_language=es
>
> http://www.eke.org/es/kultura/ondarea/ahozko_ondarea/eleketa_itsas_ondarea/lekukoak?set_language=es
> ...
>
> Algo asi no es viable hacerlo con Diazo verdad?
>
> El 21 de noviembre de 2012 13:56, Ramon Navarro Bosch <ramon.nb at gmail.com>escribió:
>
> Como decia un compañero professor que tenia en la Universidad : Depende :)
>>
>> Poder hacer un site usando grok (para los views / homepage ), dexterity y
>> con una sola maqueta bien pensada usando Diazo ahorra mucho trabajo y
>> facilita mucho las cosas (si solo quieres tema para view). Para hacer un
>> template diazo por tipo o entorno de edición... en mi opinion, no vale la
>> pena.
>>
>> Hace un tiempo definimos un producto PSD to Plone, conseguimos un
>> processo para hacer economico (ahorrar trabajo) para ofrecer-lo a un precio
>> barato : http://iskra.cat/ca/que-fem/psd-to-plone
>>
>> Ramon
>>
>>
>> 2012/11/21 Lur Ibargutxi <libargutxi at codesyntax.com>
>>
>>> la utilizacion de Diazo ya se como funciona y podria tirar con multitud
>>> de ejemplos que tenemos en collective. Mi duda era si utilizar Diazo nos
>>> ahorraria trabajo y facilitaria las cosas para nuestros diseñadores
>>>
>>>  El 21 de noviembre de 2012 12:49, Gus Urban <gusunavarro at gmail.com>escribió:
>>>
>>> Disculpen mi pregunta... pero para empezar con diazo, por aqui estaria
>>>> bien
>>>>
>>>> http://docs.diazo.org/en/latest/quickstart.html
>>>>
>>>> gracias
>>>> Gus
>>>>
>>>> El 21 de noviembre de 2012 05:55, Ramon Navarro Bosch <
>>>> ramon.nb at gmail.com> escribió:
>>>>
>>>> Normalmente dejamos un sunburst para el entorno de edición con lo que
>>>>> el view.pt és un compromiso entre verse en el plone nativo i en el
>>>>> tema diazo. Para eso miramos de tener mucho cuidado en definir una
>>>>> estructura muy bàsica en los view.pt ( semanticamente hablando ),
>>>>> definir bien los identificadores css i buscar elementos comunes en las
>>>>> distintas vistas de forma que con css se pueda solventar el 80% de los
>>>>> renders en Diazo.
>>>>>
>>>>> Dicho de otra manera :
>>>>>
>>>>> El view.pt tiene una estructura muy bàsica (semantica
>>>>> (sections/hX/p/span/...) y de estructura de columnas (span/rows)):
>>>>>
>>>>> <section id="xxx" class="row-fluid">
>>>>> <div class="span12">
>>>>>   <h1>YYY</h1>
>>>>>   <p>bla bla bla</p>
>>>>> </div>
>>>>> </section>
>>>>>
>>>>> De forma que en la edicion plone lo trata bien, luego en el Diazo
>>>>> buscamos con CSS buscamos definir tanto como se sea possible estandard en
>>>>> toda la web quedando una pequeña parte de especificación con css selectors
>>>>> depeniendo del tipo de objecto/seccion/...
>>>>>
>>>>> Lo más importante és que el proceso de diseño sea homogenio en la web,
>>>>> si se entiende el comportamiento de Diazo, saber que trabajas con bloques
>>>>> "estandards" la implementación puede ser muy fàcil y sin tener que recurrir
>>>>> a centenares de ifs ( que como sabemos son muy ineficientes en Diazo ).
>>>>> Para nuestra salud mental nos és muy importante tener claro que la
>>>>> estructura de los bloques contenido y la semantica siempre estan en los "
>>>>> view.pt", la brocha para el contenido en css de diazo y que el
>>>>> index.html de diazo és el "bootstrap" del sitio, el main_template, el
>>>>> envoltorio.
>>>>>
>>>>> Para el 20% restante de los renderes de Diazo vale la pena aprender
>>>>> XSLT para hacer reglas especificas que inyecten codigo HTML donde necesites
>>>>> ( siempre con cuidado de no passar-te ). Para eso el uso de portlets y
>>>>> viewlets és una gran herramienta.
>>>>>
>>>>> Por último, creo, que si tienes un proyecto donde cada tipo necessita
>>>>> una maqueta distinta, hay un problema en el diseño. Maquetas muy distintas
>>>>> tienden a ser poco usables en el sin de un web. En un caso, hicimos 10
>>>>> templates de diazo para un web por exigencia del cliente ( el diseño fue
>>>>> externo ) y el sitio nunca vio la luz por poca usabilidad (10 diazo
>>>>> templates son 10 maquetas globales distintas!! ). En ese caso montamos una
>>>>> maqueta básica html i varios html que permitian generar los 10 templates de
>>>>> forma anindada con las funciones XSLT de composicion.
>>>>>
>>>>> Ramon
>>>>>
>>>>>
>>>>>
>>>>> 2012/11/21 Lur Ibargutxi <libargutxi at codesyntax.com>
>>>>>
>>>>>> Hola Ramon!
>>>>>>
>>>>>> te respondo punto por punto.
>>>>>>
>>>>>> El 20 de noviembre de 2012 18:01, Ramon Navarro Bosch <
>>>>>> ramon.nb at gmail.com> escribió:
>>>>>>
>>>>>> Hola Lur,
>>>>>>>
>>>>>>> Nosotros tenemos unas 3 maneras de trabajar en Diazo :
>>>>>>>
>>>>>>> * html/type + homepage  - linkamos el content-type con una maqueta
>>>>>>> distinta cuando es necessario ( con un if.... ) ( o sea cada tipo requiere
>>>>>>> una màqueta distinta a las demas ( casos muy extremos )
>>>>>>>
>>>>>>
>>>>>> muchos proyectos de los que desarrollamos tienen estas
>>>>>> caracteristicas por lo que nos obliga a hacer muchos ifs.
>>>>>>
>>>>>>>
>>>>>>> * Una sola maqueta - con css adaptamos las necesidades especificas a
>>>>>>> cada tipo ( pequeñas cosas ) y creamos una default view ( con grok el
>>>>>>> view.pt del tipo concreto ) para poder renderizar la "ficha" del
>>>>>>> tipo concreto
>>>>>>>
>>>>>>
>>>>>> mi pregunta es, por que no se crea directamente la maqueta en la
>>>>>> vista de grok (el view.pt) y que la diseñadora trabaje sobre eso? De
>>>>>> este modo nos ahorrariamos el escribir el index.html y el rules.xml y solo
>>>>>> tendriamos que crear el view.pt de grok
>>>>>>
>>>>>>>
>>>>>>> * Una maqueta básica + homepage - En caso de tener una vista inicial
>>>>>>> muy distinta al interior montamos una view con un css id especifico de
>>>>>>> forma que creamos una maqueta diazo para la home.
>>>>>>>
>>>>>>
>>>>>> Este es el caso donde veo factible Diazo (para nuestros casos).
>>>>>> Creamos una maqueta basica y si es preciso creamos algo diferente para la
>>>>>> home.
>>>>>>
>>>>>>
>>>>>>> Ramon!
>>>>>>>
>>>>>>>
>>>>>>> 2012/11/20 Lur Ibargutxi <libargutxi at codesyntax.com>
>>>>>>>
>>>>>>>> Es evidente que todo el mundo esta utilizando Diazo y que resulta
>>>>>>>> mas fácil, al parecer, diseñar de esta manera. Como decía Mikel, nuestros
>>>>>>>> dos últimos proyectos los estamos haciendo con Diazo para aprender y para
>>>>>>>> buscar facilidades para los diseñadores.
>>>>>>>>
>>>>>>>> Respecto a esto, tengo una duda de cual seria la forma correcta de
>>>>>>>> trabajar. Supongamos que tenemos un Plone con varios tipos de objetos. Por
>>>>>>>> cada tipo de objeto es preferible crear una plantilla html y su respectivo
>>>>>>>> rules.xml? Imaginemos que es así y creamos un html para que la diseñadora
>>>>>>>> lo ponga bonito. Una vez hecho esto creamos la vista para ese tipo de
>>>>>>>> objeto sacando toda la información necesaria (utilizamos el base_view de
>>>>>>>> toda la vida?) y por ultimo creamos un rules.xml para aplicar el diseño. Es
>>>>>>>> así como trabajais con Diazo?
>>>>>>>>
>>>>>>>> no se si me he explicado :-)
>>>>>>>>
>>>>>>>> muchas gracias
>>>>>>>>
>>>>>>>>
>>>>>>>>
>>>>>>>> El 16 de noviembre de 2012 09:01, Danilo Dellaquila <
>>>>>>>> ddellaquila at gmail.com> escribió:
>>>>>>>>
>>>>>>>>  Si, efectivamente.
>>>>>>>>>
>>>>>>>>> Como decía, yo soy más  sistemista que programador, aunque conozco
>>>>>>>>> algunas de las viejas "best-pratices" me resulta más sencillo con Diazo.
>>>>>>>>>
>>>>>>>>> Danilo
>>>>>>>>>
>>>>>>>>>
>>>>>>>>>
>>>>>>>>> On 16/11/12 07:50, Mikel Larreategi wrote:
>>>>>>>>>
>>>>>>>>> Esta web está echa con Diazo, ¿no?
>>>>>>>>>
>>>>>>>>>
>>>>>>>>>  Mikel
>>>>>>>>>
>>>>>>>>>
>>>>>>>>> 2012/11/15 Danilo Dellaquila <ddellaquila at gmail.com>
>>>>>>>>>
>>>>>>>>>>  Gracias Mikel,
>>>>>>>>>>
>>>>>>>>>> si que se necesitaba el Bootstrap pero con las viejas
>>>>>>>>>> "best-practices".
>>>>>>>>>>
>>>>>>>>>> Yo también uso el Bootstrap pero con el Diazo, ya que no son tan
>>>>>>>>>> bueno desarrollador y la unión de los dos me permite de hacer las cosas más
>>>>>>>>>> rápidamente.
>>>>>>>>>>
>>>>>>>>>> Por ejemplo lo usé, sin cambiar casi nada, para PloneThemes.org
>>>>>>>>>> que publiqué hace poco más de un més:
>>>>>>>>>>
>>>>>>>>>>   http://plonethemes.org/free-themes/plonetheme.bootstrap
>>>>>>>>>>
>>>>>>>>>> Como ves ya he probado el  plonetheme.bootstrap y lo he subido a
>>>>>>>>>> la web ;-)
>>>>>>>>>>
>>>>>>>>>> Saludos,
>>>>>>>>>>   Danilo
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>> On 15/11/12 09:23, Mikel Larreategi wrote:
>>>>>>>>>>
>>>>>>>>>>  Buenas:
>>>>>>>>>>
>>>>>>>>>>  Ya sé que la moda y lo estándar ahora es usar Diazo para hacer
>>>>>>>>>> theming de un Plone, pero nosotros seguimos trabajando "a la vieja usanza".
>>>>>>>>>>
>>>>>>>>>>  Hace unas semanas descubrí plonetheme.bootstrap que integraba
>>>>>>>>>> la plantilla de Twitter Bootstrap [1] en Plone. He actualizado las
>>>>>>>>>> plantillas a la última versión de Twitter Bootstrap (2.2.1) y he hecho un
>>>>>>>>>> release del producto.
>>>>>>>>>>
>>>>>>>>>>  Seguro que no está integrado todo lo de Twitter Bootstrap, pero
>>>>>>>>>> la mayoría de las cosas sí. He integrado el CSS "responsive" para que la
>>>>>>>>>> web se vea corréctamente en dispositivos móviles y he actualizado la
>>>>>>>>>> main_template para que funcione como la plantilla básica de Plone, con una
>>>>>>>>>> vista que decide la anchura de las columnas (dado que Twitter Bootstrap
>>>>>>>>>> utiliza un grid similar al de Plone).
>>>>>>>>>>
>>>>>>>>>>  He personalizado, del mismo modo, varias de las plantillas de
>>>>>>>>>> Plone (logo, menú principal, breadcrumb, ...) para adaptarlas al estilo de
>>>>>>>>>> Bootstrap.
>>>>>>>>>>
>>>>>>>>>>  El producto está preparado para utilizarse "as is" y también
>>>>>>>>>> para basar themes en él (que es para lo que lo utilizaremos nosotros en
>>>>>>>>>> CodeSyntax).
>>>>>>>>>>
>>>>>>>>>>  Las preguntas, dudas, críticas, solicitudes serán bienvenidas:
>>>>>>>>>>
>>>>>>>>>>  http://pypi.python.org/pypi/plonetheme.bootstrap
>>>>>>>>>>
>>>>>>>>>>  Saludos,
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>>  Mikel
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>>  [1] http://twitter.github.com/bootstrap/
>>>>>>>>>>
>>>>>>>>>>  --
>>>>>>>>>> Mikel Larreategi
>>>>>>>>>> mlarreategi at codesyntax.com
>>>>>>>>>>
>>>>>>>>>> CodeSyntax
>>>>>>>>>> Azitaingo Industrialdea 3 K
>>>>>>>>>> E-20600 Eibar
>>>>>>>>>> Tel: (+34) 943 82 17 80
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>>   _______________________________________________
>>>>>>>>>> Usuarios-Plone mailing listUsuarios-Plone at lists.plone.orghttps://lists.plone.org/mailman/listinfo/plone-usuarios-plone
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>> --
>>>>>>>>>> Danilo Dellaquila
>>>>>>>>>> Director Técnico
>>>>>>>>>> K-Gigas Computers S.L.
>>>>>>>>>> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
>>>>>>>>>> Empresa: http://www.k-gigas.es
>>>>>>>>>> Hosting: http://www.k-gigas.com
>>>>>>>>>> Blog:    http://danilodellaquila.com
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>
>>>>>>>>>
>>>>>>>>>  --
>>>>>>>>> Mikel Larreategi
>>>>>>>>> mlarreategi at codesyntax.com
>>>>>>>>>
>>>>>>>>> CodeSyntax
>>>>>>>>> Azitaingo Industrialdea 3 K
>>>>>>>>> E-20600 Eibar
>>>>>>>>> Tel: (+34) 943 82 17 80
>>>>>>>>>
>>>>>>>>>
>>>>>>>>> --
>>>>>>>>> Danilo Dellaquila
>>>>>>>>> Director Técnico
>>>>>>>>> K-Gigas Computers S.L.
>>>>>>>>> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
>>>>>>>>> Empresa: http://www.k-gigas.com
>>>>>>>>> Plone:   http://plonethemes.org
>>>>>>>>> Blog:    http://danilodellaquila.com
>>>>>>>>>
>>>>>>>>>
>>>>>>>>> _______________________________________________
>>>>>>>>> Usuarios-Plone mailing list
>>>>>>>>> Usuarios-Plone at lists.plone.org
>>>>>>>>> https://lists.plone.org/mailman/listinfo/plone-usuarios-plone
>>>>>>>>>
>>>>>>>>>
>>>>>>>>
>>>>>>>>
>>>>>>>> --
>>>>>>>> Lur Ibargutxi
>>>>>>>> libargutxi at codesyntax.com
>>>>>>>>
>>>>>>>> _______________________________________________
>>>>>>>> Usuarios-Plone mailing list
>>>>>>>> Usuarios-Plone at lists.plone.org
>>>>>>>> https://lists.plone.org/mailman/listinfo/plone-usuarios-plone
>>>>>>>>
>>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>> --
>>>>>>> Ramon a.k.a bloodbare
>>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>> --
>>>>>> Lur Ibargutxi
>>>>>> libargutxi at codesyntax.com
>>>>>>
>>>>>
>>>>>
>>>>>
>>>>> --
>>>>> Ramon a.k.a bloodbare
>>>>>
>>>>> _______________________________________________
>>>>> Usuarios-Plone mailing list
>>>>> Usuarios-Plone at lists.plone.org
>>>>> https://lists.plone.org/mailman/listinfo/plone-usuarios-plone
>>>>>
>>>>>
>>>>
>>>
>>>
>>> --
>>> Lur Ibargutxi
>>> libargutxi at codesyntax.com
>>>
>>
>>
>>
>> --
>> Ramon a.k.a bloodbare
>>
>
>
>
> --
> Lur Ibargutxi
> libargutxi at codesyntax.com
>



-- 
Ramon a.k.a bloodbare
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.plone.org/pipermail/plone-usuarios-plone/attachments/20121121/ce9a1ef6/attachment-0001.html>


More information about the Usuarios-Plone mailing list