Personal tools

June

Jun 28, 2013

Verificare una migrazione ai blob: come essere (un po' più) sicuri!

Prendi il controllo sui tuoi dati

Verificare una migrazione ai blob: come essere (un po' più) sicuri!

Filed Under:

Spesso migrando vecchie versioni di Plone a una delle attuali 4, si devono passare gli allegati dal Data.fs o fss ai blob. Come verifichiamo il passaggio?

L'argomento è conosciuto: migrazione. Uno dei passaggi più critici nella migrazione da Plone 3 a Plone 4 è la migrazione di file e immagini; specie se si usa FileSystemStorage, mi è capitato di sentire più volte parlare di incidenti di percorso risolti nei modi più disparati.

A me è capitato di migrare oggetti contenenti allegati che, una volta diventati blob, sono spariti dall'oggetto nonostante le prove di migrazione su un sito 'fresh' fossero andate a buon fine.

Scopo: verificare l'esito di una migrazione di file e immagini
read more

Jun 24, 2013

24 maggio 2013: 14 anni insieme!

Buon compleanno Redturtle!

24 maggio 2013: 14 anni insieme!

Filed Under:

Il racconto della festa di compleanno di RedTurtle e dei Blogger Awards. 14 anni (+ 1 mese) dopo

E' d'obbligo, in RedTurtle, festeggiare tutti compleanni; e a maggior ragione quello di RedTurtle! Dopo anni di pasticcini e pizzette, di pranzi in città, di giornate al mare, di corsi di cucina in agriturismo, abbiamo voluto fare qualcosa di nuovo!

Le idee e i suggerimenti sono stati tanti e alla fine abbiamo deciso per una cena elegante con la prima edizione dei nostri Blogger Awards.

blog awards

read more

Jun 20, 2013

Leaflet: un framework per mappe interattive leggero e performante

Leaflet web maps

Leaflet: un framework per mappe interattive leggero e performante

Filed Under:

Leaflet è un framework JavaScript veramente interessante, sicuramente la scelta giusta per l'integrazione di mappe interattive HTML5 su applicazioni web per mobile

Recentemente ho avuto l'occasione di lavorare ad un progetto per lo sviluppo di un'applicazione web per mobile, che mi ha dato l'opportunità di approfondire la conoscenza di un framework JavaScript decisamente interessante: Leaflet.

Esistono decine di framework per l'integrazione di mappe interattive disponibili in rete, ma a mio avviso Leaflet è veramente degno di nota.

Paragonabile in termini di funzionalità ad altri framework, quale per esempio OpenLayer, Leaftet sorprende per leggerezza e facilità d'uso.

Il core di questa libreria JS ha un peso veramente ridotto (circa 100KB).
Il codice è attuale: i namespaces sono brevi, fa buon uso di tecniche come method chaining ecc., insomma in linea con lo stile di importanti librerie JavaScript come per esempio jQuery.

L'interfaccia è moderna e fluida, compatibile con la maggior parte dei browser in circolazione.

 

Compatibilità mobile:
- Safari for iOS 3/4/5/6+
- Android browser 2.2+, 3.1+, 4+
- Chrome Android 4+, iOS
- Firefox for Android
- Other webkit-based browsers
- IE10 for Win8-based devices

Leaflet è un progetto Open Source creato da Vladimir Agafonkin. Gratuitamente scaricabile direttamente dal sito ufficiale leafletjs.com, è ospitato anche su github.com, dove grazie alla comunità che lo supporta, si piazza tra i migliori 40 progetti open source con ben 5000 star.

Interessante la possibilità di utilizzare come sistema di riferimento (CRS), le dimensioni in pixel di immagini non georeferenziate, utile nei casi in cui si ha la necessità di sviluppare mappe interattive a partire da immagini di grandi dimensioni, come per esempio per un videogioco.

Rimando a questa lettura per approfondimento:

Nutrita la lista dei plugin disponibile online, che ne estendono le funzionalità http://leafletjs.com/plugins.html.
Per esempio, io ho trovato interessante Leaflet.TextPath, che permette di aggiungere del testo direttamente agli oggetti disegnati dinamicamente nella mappa.

Nota per gli sviluppatori Python, su Pypi è presente una versione pacchettizzata per l'installazione su CMS Plone.

Conclusioni

"Divertente", penso sia il primo aggettivo che mi viene in mente se penso a Leaflet.
Decisamente un'ottima libreria adatta per il web, non troppo complessa e di grande effetto. Particolarmente indicata per il mobile.

read more

Jun 12, 2013

Un sito, mille colori. Come colorare sezioni diverse di un portale Plone

mille modi per dare colore ad un sito

Un sito, mille colori. Come colorare sezioni diverse di un portale Plone

Filed Under:

Breve guida per personalizzare graficamente diverse sezioni di un sito con dei colori caratteristici grazie ad una semplice viewlet che genera CSS dinamico

 

Oggi, invece che affrontare i soliti temi di migrazioni o contentrule, mi dedico ad un argomento più "grafico".

restroomPensando all’argomento di questo post, mi è venuto in mente che in azienda abbiamo una divisione dei ruoli con qualche connotazione sessista: i maschi sono rudi e badano al sodo quindi si occupano della programmazione backend, mentre alle donne, che hanno decisamente dei gusti migliori, spetta il compito di ricamare e colorare.

Detto questo, però, spesso i baldi giovani si vedono costretti a dare una mano alle dolci donzelle (anche se contro voglia), sia per alleggerire il loro carico di lavoro, che per supporto vero e proprio nella creazione di strumenti/strutture utili per poter creare il risultato grafico desiderato.

Una necessità ricorrente è quella di avere diverse sezioni principali del sito, ognuna contraddistinta da un colore che va a caratterizzare diversi elementi della pagina (per esempio i titoli, lo sfondo delle descrizioni o le testate delle portlet).

Se le sezioni principali sono statiche, gestire queste personalizzazioni solamente via CSS si potrebbe anche fare.
Basterebbe modificare la generazione delle classi del body nel main template, in modo da avere in ogni sezione e nei suoi figli una determinata classe (un esempio su come fare, lo si può trovare su developer.plone.org). In questo modo, via CSS si gestiscono senza problemi i vari scenari.

Ok, ma se i redattori vogliono gestire in autonomia i colori?

Il gioco diventa difficile quando le sezioni possono cambiare nel tempo, e le redazioni vogliono gestire i colori autonomamente.

Per risolvere questo problema, dopo diverse ricerche, ho trovato un valido esempio in un vecchio post di Kees Hink dove parlava esattamente di quello che mi serviva: applicare dinamicamente un determinato stile solo ad una sezione precisa del sito.

Innanzitutto serve una modifica agli Archetypes per poter aggiungere il campo di selezione del colore. Qui le possibilità sono diverse:

  • si fa un nuovo Archetype folderish adibito al ruolo di cartella di tassonomia

  • si usa archetypes.schemaextender e si aggiunge il campo a determinati AT folderish (le cartelle per esempio?)

  • si crea una interfaccia “marker” per la quale si registra l’adapter di archetypes.schemaextender, e poi si applica questa interfaccia via ZMI (o con un qualche meccanismo di subtyping) direttamente alle cartelle desiderate.

L’ultima ipotesi è la più flessibile e di minor impatto, visto che si può decidere di marcare solo delle cartelle selezionate come tassonomie.

Una volta marcate le varie cartelle e impostato un colore (in valore esadecimale sarebbe meglio, così è già pronto da usare), non resta che creare gli stili veri e propri... ma come?

Seguendo l’idea del blog, basta registrare una viewlet dentro al viewletmanager IHTMLHeadLinks, che viene caricata negli header della pagina, e permette di definire nuovi stili e inserirli proprio nell'header, insieme agli altri CSS di Plone.

<browser:viewlet
name="custom_color.viewlet"
manager="plone.app.layout.viewlets.interfaces.IHtmlHeadLinks"
class=".viewlets.CustomColorViewlets"
layer="..interfaces.IMyProductLayer"
permission="zope.Public"
/>

Questa viewlet andrà visualizzata ovviamente solo nei contenuti che sono all’interno di una tassonomia, e deve ritornare una stringa di codice CSS che darà proprio i colori impostati.

L'ultimo problema da affrontare è stato quello relativo al modo con cui generare questi stili.
In un primo momento avevo pensato di cablarli direttamente nel codice della viewlet, ma poi mi è venuto in mente che in un futuro avremmo potuto dover aggiornare quegli stili, quindi c'era bisogno di qualcosa di più dinamico e configurabile... e cosa c'è di meglio di un bel pannello di controllo che memorizza i dati nel registro di Plone?

Non mi dilungo su come creare un pannello di controllo basato su plone.app.registry perché è già stato trattato ampiamente dal nostro Luca Fabbri in non uno ma bensì in due post, poi si può trovare una buona guida scritta da Timo Stollenwerk o si può guardare il sorgente di diversi prodotti che ne creano uno, come ad esempio collective.analyticspanel.

Il campo nel pannello di controllo viene creato come una textarea, per poter inserire più righe di stili:

color_styles = schema.Text(
title=_(u"Stili aggiuntivi"),
description=_(u"Inserisci una serie di stili CSS aggiuntivi.
Dove vuoi usare il colore personalizzato,
scrivi la stringa $color$.")

Nella viewlet, ogni volta che viene disegnata, si va a prendere la tassonomia di appartenenza navigando a ritroso l'albero (se non sono dentro nessuna tassonomia ovviamente non viene disegnata) e si recupera il valore salvato nel registry per ritornarlo come CSS:

def render(self):
taxonomy = self.getTaxonomy()
if not taxonomy:
return ""
color = self.getFieldValue(taxonomy)
if not color:
return ""
registry = queryUtility(IRegistry)
settings = registry.forInterface(IMyRegistrySettings, check=False)
css = settings.primary_color_styles
if not css:
return ""
css = css.replace('\r\n', ' ')
css = css.replace('$color, color)
return "<style type='text/css'>%s</style>" % css

def getTaxonomy(self):
"""
Controlla ricorsivamente se l'elemento corrente è all'interno di una cartella
marcata con la mia interfaccia definita precedentemente
"""
for elem in self.context.aq_inner.aq_chain:
if IMyMarkerInterface.providedBy(elem):
return elem
return None

def getFieldValue(self, taxonomy, field_name):
"""
Ritorna il valore del campo definito con schemaextender
"""
field = taxonomy.getField(field_name)
if field:
return field.get(taxonomy)
return ""

 

In questo modo, si possono creare quante sezioni si vogliono, e dare ad ognuna un colore caratteristico diverso. Bisogna solo stare attenti a non usare troppi colori diversi in una pagina, per evitare di avere un "effetto arlecchino" non proprio gradevolissimo.

La foto in testata è di Sultry/sulky/silly, mentre l'immagine nel testo è di Joel Kramer

read more

Jun 06, 2013

5 risorse per Bootstrap che mettono d'accordo designers e developers

Meglio un uovo oggi... :-)

5 risorse per Bootstrap che mettono d'accordo designers e developers

Filed Under:

Bootstrap dispone di un ricco catalogo di accessori tra cui scegliere per rendere il proprio progetto sempre più completo e accattivante!

Bootstrap, chi è costui?

Bootstrap

Nome
Twitter Bootstrap (Bootstrap per gli amici)
Professione
front-end Framwork
Età
oggi siamo alla versione 2.3.2 ed è in continuo aggiornamento!
Residenza
GitHub c/o twitter.github.io
Profilo
@twbootstrap
Segni particolari
facile, veloce, versatile

Benissimo, questa veloce presentazione servirà a sciogliere il ghiaccio con chi d'abitudine non parla agli sconosciuti :)

Lo scopo di questo post non è spiegare il funzionamento di Bootstrap o di eleggerlo a miglior framework dell'anno (esistono moltissime alternative e ogni designer vi darà opinioni diverse). Ne ha parlato anche Giacomo giusto qualche giorno fa nel suo post "Front-end frameworks, presente e futuro delle interfacce utente"
Voglio invece condividere alcune risorse interessanti della rete che ruotano attorno al mondo bootstrappesco.

 

read more