Preparando a Zope y Plone

Si deseas crear una piel (skin) en el sistema de archivos (recomendado) en vez de hacerlo desde el ZMI hay muchos métodos que pueden hacer el debugging mas simple:

Zope en modo debug

Ejecutar Zope en modo debug permite reflejar instantaneamente cambios en las pieles (skin) de un sitio. Existen muchas formas de habilitar esto:

• En el archivo etc/zope.conf habilitar:
  

   debug-mode on

  Luego habilitar zope usando lo siguiente (esto permitira ver la bitacora (log) de erores en la consola)
  

  zope_instance/bin/runzope

• Otra alternativa es reiniciar zope usando:
  

  zopectl fg

• Si se instalo Plone usando el instaldor de Windows, hay una opción para correrlo en modo debug desde el menu Plone Program.

Recargando Productos

Si no se está usando el modo debug se pueden actualizar los cambios en un producto de skin usando la opción de recarga (reload). Para activar esta opción es necesario tener un archivo refresh.txt dentro de la carpeta de un producto (el generador DIYPloneStyle lo crea por defecto).

• En ZMI, hay que ir a Control Panel -> Product Management -> Nombre de la piel (skin) o producto
  
• Seleccionar el tab Refresh y luego hacer click en 'Refresh this Product button' para recargar el producto.

Registro de recursos CSS

Para mejorar la perfomance de un sitio Plone, portal_css une todas las páginas de estilos de una página en un solo archivo CSS. Para hacer debugging y personalización de css mas sencilla se puede emplear el modo debug el cual previene de hacer esta unión:

• En el ZMI ir a Plone Site -> portal_css
  
• Activar el cuadro de modo Debug y presionar el botón save.

Inspectores DOM

El Modelo de Objetos Documentos (Document Object Model) o DOM de forma abreviada, es un término para describir como una página html (o documento xml) es estructurado y se provee una API para accederlo. Los navegadores convierten el texto plano del formato html/xml a DOM y luego lo usan para aplicar el CSS y otras transformaciones.

¿ Por qué es esto tan útil para nosotros ? El código HTML y CSS que viene por defecto en Plone hace muchas coas bien – el punto en contra es que todo este poder es complejo. Por lo tanto, a veces solo solo se desea hacer un cambio simple en un elemento pero no se sabe como localizar ese item y escribir el css relevante.

Aquí es cuando los inspectores DOM entran en acción, con ellos es posible ver la estructura de una página en un árbol y recibir feedback visual mientras se inspeccionan todos los elementos. Una vez que se encontro el item deseado, fácilmente se pueden encontrar todos los atributos, tales como clase, id y elementos relacionados.

Inspector DOM de Firefox

Cuando se instala firefox, asegurate de habilitar las herramientas Web Developer desde el menu Custom installation.

Firefox posee un inspector DOM muy útil. Para abrirlo hay que ir al menú Herramientas Tools y buscar abajo. Alternativamente se puede usar Ctrl + Shift + I en Windows, o Apple key + Shift + I en Firefox para Mac.

Lo primero que probablemente tengas que hacer es maximizar el inspector DOM – funciona mucho mejor en una pantalla más grande.

Luego ir al menú archivo y seleccionar inspeccionar URL. Ingresar la dirección del sitio que se desea inspeccionar y la página se cargará en el panel inferior del inspector DOM.

Existen dos formas de usar el inspector:

Navegando el árbol

En el panel superior izquierdo, usar los íconos + para expandir cada nodo. Comenzando con #document, luego HTML y BODY. A medida que vayas expandiendo el árbol irás revelando mas y mas de los elementos. Notar que hay columnas para id y clase que te ayudan a saber donde estas.
Cuando hagas click en cada elemento vas a ver el elemento visual parpadeando en el panel de navegación que se encuentra abajo.

Ahora, vamos a encontrar elementos en el árbol de navegación:

• Expandí DIV con el id visual-portal-wrapper (es un contenedor específico de Plone que contiene toda la página)

• Localizar y expandí TABLE con el id portal-columns (este contiene la parte central de la página)

• Expandí TBODY, TR y luego TD con el id portal-column-one (columna izquierda)

• Finalmente expandí el DIV con la clase visualPadding para revelar los items del portlet incluytendo portlet-navigation-tree.

Selección de elementos por Click

Ir a el menu búsqueda (search) y selecciná la última opción 'Seleccionar elemento por click' 'Select Element by Click'

Ahora tenes que ir al panel de navegación y apuntá al elemento que deseas encontrar en el árbol.

Para encontrar otro elemento solo tenes que repetir estos pasos nuevamente.

Extensión Web Developer para Firefox

La extetnsión Web Developer agrega una herramienta muy podera al navegador Firefox que es de mucha ayuda en el desarrollo de pieles (skins) Plone.

Algunas de las utilidades que ofrece son:

• Edición instantánea de CSS - no se necesita hacer cambios en el ZMI tampoco en el sistema de archivos y recargar la página.
• Ver información de estilo - clickear en los elementos de una página y obtener declaraciones relevantes de CSS.
  
• Desactivar todas o algunas hojas de estilo
  
• Agregar nuevas hojas de estilo
  
• Mostrar características de todos o algunos de los elementos de una página (por ejemplo todos los <div>, o <ul>)
  
• Generar una lista de todas las imágenes de una página.
• Redimencionar la ventana del navegador a tamaños habituales o particulares, por ejemplo 1024 x 768, 800 x 600 etc.
• Mostrar información detallada sobre formularios, enlaces, Meta Tags, encabezados HTTP, tamaños de documentos, entre otros.
• Validación para HTML / CSS / RSS / Accessibilidad / Enlaces
  
• Regla - Medir el alto y ancho de partes de una página. No vas a necesitas nunca mas adivinar cuantos píxeles hay en un elemento!
  

Extensión FireBug para Firefox

FireBug es el inspector DOM con esteroides, y es muy útil para inspecciónar HTML, CSS y Javascript.

Una vez instalado es muy agrega un ícono en la barra de tareas, en la parte inferior de la ventana de navegación. Cada vez que abris una página chequea y guarda en su consola cualquier error que encuentra. Si la página no tiene errores, muestra una ícono verde con un tilde caso contrario muestra una x roja con el número de errores encontrados.

Para usar todas estas utilidades muy útiles hay que hacer click en estos íconos para mistrar el panel de FireBug:

Referencias

1. Icono de FireBug (tilde verde)
2. Tab de Inspector - usar para cambiar de modo consola (lista errores y alertas) a modo inspección.
3. Botón Inspector - usar esto para activar/desactivar la selección de elementos usando el ratón. Cuado está activo y el puntero pasa sobre un elemento podes seleccionar que elemento queres inspeccionar haciendo click.
4. Tabs Source & Style - cambia entre estos para ver el HTML seleecionado o los atributors CSS de este.
   

Desde aquí se pueden ver errores en la consola o cambiar al tab Inspector para mostrar las páginas HTML interactivamente. Hacer click en los íconos con flechas para expandir o contraer cada tag o inspeccionar un elemento deseado. Alternativamente podes usar el botón inspector para seleccionar un elemento dado.

Ver gráfico del código fuente en Firefox

La extensión ver gráfico del código fuente View Source Chart ayuda a entender la estructura de un documento HTML de forma mucho mas sencilla.

Una vez que está instalado solemente tenes que hacer click en cualquier parte de una página para ver el gráfico del código fuente. Y se mostrará el gráfico en una nueva ventana:

Vas a notar que los elementos tienen diferentes colores para ser más legibles, y cada contenedor se contrae haciendo click en el, lo cual puede ayudarte mucho a aislar elementos en los que estes interesado.

Ahora que conoces las herramientas básicas para buscar clases e ID de los elementos que deseas cambiar, podemos continuar poniendo un nuevo estilo en Plone.