[Usuarios Plone] Theme de Plone basado en Twitter Bootstrap

Wed Nov 21 08:55:36 UTC 2012

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