[Usuarios Plone] Theme de Plone basado en Twitter Bootstrap

Ramon Navarro Bosch ramon.nb at gmail.com
Wed Nov 21 12:56:42 UTC 2012 

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
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.plone.org/pipermail/plone-usuarios-plone/attachments/20121121/ed148654/attachment-0001.html>

More information about the Usuarios-Plone mailing list