WordPress e Dreamweaver

Non è sempre facilissimo lavorare sui temi di WordPress e riuscire ad avere una vista di insieme poiché le pagine sono costruite dinamicamente a partire dagli elementi fondamentali come l’header, index, le barre laterali e così via. Inoltre, i temi sono quasi sempre in inglese e bisogna tradurre le stringhe.

La Vista dal Vivo di DW non ce la fa a gestire l’intrico degli include, e per riuscire a caricare tutti gli elementi contemporaneamente bisogna ricorrere ad alcune estensioni per Dreamweaver, come Themedreamer o WpBuilder, che permettono di simulare anche in locale le pagine complete.

L’uso di Themedreamer è molto semplice e permette di lavorare in locale. Nei vari componenti della pagina vengono posizionati dei contenuti finti, e l’interfaccia di Dreamweaver si adatta alla posizione del cursore nel codice.

Se il cursore è posizionato in un elemento HTML, si avrà la seguente vista, con la barra Proprietà che permette di lavorare sui tag:

elementi html nel tema

Mentre un clic su un elemento del tema provocherà la visualizzazione di tutti gli include nella barra Proprietà, in questo modo:

gli include in dreamweaver

Sono ovviamente disponibili tutti gli strumenti di Dreamweaver, il pannello CSS e così via.

Web 2.0, quello vero

Che bello slogan…

“Web page = Web Service
XHTML+RDFa markup for people and machines”

expose data four ways

web scale

REST (ROA, WOA)

  • Web page = Web Service
    XHTML+RDFa markup for people and machines
  • resource as public record
    global visibility and persistence of URI’s

Atom as RESTful API

  • introspection service for feed resource discovery
  • HTTP uniform interface
    CRUD analog – PUT/GET/POST/DELETE
    <entry> as recordset </entry> resource state event

atom+xml and xhtml+xml representations

  • Caching, Crawling and Indexing

Web = DB

  • Linked Open Data SPARQL endpoints, XHTML+RDFa

Fa impressione, vero? Sarà qualche matto scalmanato di standard.

No, è il piano dello staff tecnico di Obama per Recovery.gov, “a Web site that’s supposed to provide information on how stimulus money is being spent”. Mica ciccia… sempre detto che con gli standard ci si guadagna.

Loro promuovono a botte di fantastiliardi energie alternative e Web semantico, noi i call center, le centrali nucleari e il ponte sullo stretto.

Il sito viene dichiarato al suo stato iniziale per quanto riguarda l’accessibilità (e lo è), ma i filmati sono sottotitolati, i PDF accessibili, i diagrammi hanno gli alt… mi viene il magone.

Jeffrey Zeldman’s Web Standards Advisor 1.0.0

Jeffrey Zeldman's Web Standards Advisor Jeffrey Zeldman’s Web Standards Advisor 1.0.0 è una nuova extension per Dreamweaver, da Webassist. Si tratta di una specie di super-validator, più un consulente: la sezione Validator fa quello che facilmente si può immaginare, ovvero mette a disposizione un servizio di validazione delle pagine (singole, gruppi, l’intero sito, una cartella) per codice, CSS e Microformats. L’Advisor invece è un vero e proprio servizio di consulenza che produce un report su aspetti come l’integrità strutturale delle pagine, la semantica del labeling, verifica della congruità degli ID, verifica dei DIV, tabelle, liste, elementi di navigazione.

Una specie di Aspirina per “classite” e “divite, un bel aggeggio anche un po’ imbarazzante per la parte Advisor. Sì, perché finché si tratta di validare (in ogni caso, su interi siti è una bella comodità) è un conto, ma quando un software mette in dubbio la vostra personale abilità nel denominare div e classi bè, ci si sente punti sul vivo. A 49.99$ su WebAssist.

un esempio di report

Lavorare con i microformats

come funzionano i microformats

Sicuramente avete sentito parlare dei “microformats“.

I microformats si basano su questi principi:

  • devono risolvere un problema specifico
  • devono fornire una base di partenza la più semplice possibile
  • devono essere progettati in primo luogo per gli umani, poi per le macchine
  • si basano sul riutilizzo di elementi provenienti da standard largamente riconosciuti
  • devono permettere modularità / incorporabilità
  • permettono e incoraggiano uno sviluppo  decentralizzato

Lo scopo è permettere una descrizione semantica più precisa di quella possibile, per esempio, con gli elementi di XHTML.  Un semplice esempio da hCard, un microformat dedicato alla rappresentazione dell’identità di persone, aziende, organizzazioni e luoghi basato sulla specifica vCard (rfc-2426) ma in XHTML (molto grossolanamente…).

La mia descrizione in HCard potrebbe essere una cosa del genere:

<div id="hcard-Livio-Mondini" class="vcard">
<span class="fn">Livio Mondini</span>
<div class="org">Biroblu</div>
<a class="email" href="mailto:livio.mondini@gmail.com">livio.mondini@gmail.com</a>
<div class="adr">
<div class="street-address">Tal dei Tali</div>
<span class="locality">Venusia</span>
<span class="region">Cratere 12</span>
<span class="postal-code">12345</span>
<span class="country-name">Marte</span>
</div>
<div class="tel">12345678</div>

E così via utilizzando gli elementi previsti dal microformat. Essendo il microformat basato su classi e id, è facile definirne gli aspetti grafici con CSS. Oppure, quante volte avreste voluto poter descrivere con maggiore precisione le vostre liste. Ecco XOXO. I microformats sono open standards, piccoli frammenti di HTML che permettono di pubblicare informazioni ad alta fedeltà su Web riguardo a persone, eventi, tag e così via.

Per esempio, su questo blog sto utilizzando MicroID, Small Decentralized Verifiable Identity. Il mio MicroID è c4354074e329a7a618f64bacb5262f111e2b2f22, valore calcolato in base ad email e nome del sito. Una specie di firma dei miei contenuti.

Ora la parte più interessante: ma come li uso questi microformats?

Per alcune specifiche sono disponibili delle applicazioni che permettono di creare il codice online, per esempio HCalendar CreatorHCard Creator o XFN Creator.

Alcuni esimi volenterosi hanno creato plugin per WordPress, ne trovate un elenco alla pagina  “Using Microformats in WordPress” di BlogHelper.

Inoltre, la Dreamweaver Task Force del Web Standards Project ha creato una extension per Dreamweaver che permette di inserire nella pagina con estrema facilità microformats come hCalendar, hCard, rel-license, rel-tag e xfn. Che dire, bravi! Funziona anche con Dreamweaver CS4.

Microformats in Dreamweaver

Microformats in Dreamweaver

Mica finita qui… ovviamente i browser possono elaborare il markup, e per mezzo dei microformats diventare dei veri e propri broker di informazioni.

Per esempio, provate l’addon per Firefox Operator su siti come Ma.gnolia.

Oppure, se usate WordPress, consiglio una visita alla pagina dedicata ai plugin per WordPress del Wiki Microformats e la lettura dell’articolo “Microformats and WordPress Themes“.

Poi non ditemi che non vi è venuta voglia di modificare il vostro tema per aggiungere i microformats.

🙂

Le grandi pulizie: CleanX

L'interfaccia di CleanXEcco, avete ottenuto la desiderata pagina HTML esportandola da Word, Acrobat o vai a sapere cosa. Avete ben lavorato con gli stili, il markup è abbastanza a posto.

Però, per riprodurre l’aspetto grafico originale il programma ha generato una bella paciugata di elementi e tag, tipo:

<H1>
<SPAN style="color:#000000">
Lorem ipsum dolor sit amet, </SPAN><SPAN style="color:#000000" ><BR></SPAN><SPAN style="color:#000000">consectetuer adipiscing elit </SPAN>
<SPAN style="color:#000000"><BR></SPAN>
</H1>
<P>
<SPAN style="font-family:'serif', 'Times New Roman', serif; font-size:12pt; color:#000000">Quisque congue dui quis massa. Curabitur eu nunc. Aenean molestie. Donec egestas nunc quis sapien. Viva</SPAN><SPAN style="font-family:'serif', 'Times New Roman', serif; font-size:12pt; color:#000000"></SPAN><SPAN style="font-family:'serif', 'Times New Roman', serif; font-size:12pt; color:#000000"
>mus imperdiet magna eu lorem. Nulla mauris sapien, consectetuer sit amet, lacinia non, convallis eget, nunc. Curabitur semper luctus tortor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum iaculis tempor enim. In turpis. Nam ac enim vitae libero fringilla interdum. </SPAN>

Già visto, vero? La fiera dello span… o cose così. Per fare le pulizie i metodi sono molti, da Trova/Sostituisci a metodi più tradizionali, per esempio a manina con Blocco Note.

Però,  ecco che ci viene in aiuto CleanX, una utile utility di Diego La Monica.

Una passatina con CleanX e tutto risplenderà di candido splendore. Efficace contro il codice incrostato e gli stili bruciati di forno o sulle padelle, usa anche tu CleanX e aiuta il suo sviluppatore a renderlo sempre più efficace!

Fangs

Page has sixteen headings and one hundred twenty-two linksbiroblu dash Internet ExplorerVoice switch from en to it-ITVoice switch from en to it-IT sei su BirobluList of two itemsbulletThis page link vai a contenutobulletThis page link vai ad aree di servizioList endHeading level oneLink birobluList of two itemsbulletLink Mappa del sitobulletLink TagList endHeading level twoLink Fangs twenty-seven Luglio two thousand eight Ma come leggerà la mia pagina uno screen reader?

Ma come leggerà la mia pagina uno screen reader?
Se avete già installato e sapete usare Jaws, conoscete le risposte (se invece non le conoscete, per avere una guida direttamente da un utente di questo programma potete scaricare da questo sito il PDF “Navigando con Jaws, di Consuelo Battistelli, Appendice A del volume “Accessibilità delle applicazioni Web” di Roberto Scano, per concessione dell’editore Pearson Education).
Saper usare Jaws non è per niente facile, i comandi disponibili sono davvero molti, analitici e complessi, come ben ci spiega Consuelo.

Per iniziare ad affrontare l’argomento, può essere utile una extension per Firefox, Fangs.

Dopo l’installazione, nel menu Strumenti sarà disponibile una nuova voce, Fangs. La sua selezione provoca l’apertura di una nuova finestra, dove viene simulata in forma testuale la lettura della pagina come appare a uno screen reader.
Piuttosto semplice, anche se un po’ rudimentale. Fangs è soltanto un emulatore, e certamente l’uso di un vero screen reader permette di fare molte più cose, analizzare la pagina, estrarne delle informazioni.
Però, per farsi un’idea e iniziare forse un percorso, è piuttosto efficace.
Purtroppo ancora non esiste una versione in italiano, qualche volenteroso potrebbe pensarci.

Invece, se vi sentite audaci e volete sperimentare un vero screen reader, AxsJAX Web 2.0 compatibile e che interpreta i CSS aurali, provate Firevox. Ne parleremo presto.

Monitor, colori, algoritmi…

Qualche tempo fa c’è stata un po’ di attenzione sul problema “colori accessibili”, soprattutto vista la presenza di un algoritmo di controllo nel decreto ministeriale del 8 luglio 2005. L’algoritmo proposto appare nelle WCAG 1.0, ed è stato utilizzato anche in questo contesto anche se dichiaratamente “beta”.

Apriti cielo. schiere di esperti di colorimetria (?) si sono scannati sull’argomento, arrivando in qualche caso al ridicolo (vedi la scomparsa di siti come contrastocolore.org, su cui in realtà non è mai apparsa nessuna informazione reale, o un fantomatico gruppo di lavoro di UIC, CNR ed altri che dopo una fanfara di annunci è altrettanto scomparso nel nulla).

Personalmente ero molto incuriosito dal vedere come si sarebbe evoluta questa diatriba, perché ci sono un paio di problemi di fondo che secondo me sono impossibili da risolvere: questi algoritmi si propongono di filtrare gli accoppiamenti di colore di primo piano e sfondo in modo da evitare combinazioni problematiche per chi ha problemi di cecità ai colori. Però, visto che i colori di un monitor sono costituiti da triplette RGB, e che i problemi percettivi sono classificati proprio in base a questi colori (cecità al rosso, verde e blu) come è possibile risolvere il problema, visto che “caricando” un colore alleggerisco di quella tonalità il corrispettivo, quindi per assurdo risolvo i problemi dei protanopatici (cecità al rosso) a discapito dei tritanopici (confusione fra giallo e blu)?
Comunque, se usate Firefox e vi viene la curiosità di effettuare qualche verifica, potete scaricare la Colour Contrast Extension di Juicy Studio.

Ma a monte di tutto, come si risolve il problema fondamentale della percezione? Ogni monitor fornisce al suo utente una rappresentazione del colore molto probabilmente diversa, di conseguenza quel bel rosso su un monitor potrebbe apparire un rosso slavato su un altro.

L’unica possibilità per tentare di uniformare la rappresentazione colorimetrica è calibrare il monitor, sperando che tutti lo facciano e che di conseguenza quel rosso sia il più simile possibile su tutti i monitor.

Succederà? Non credo, la calibrazione del monitor non viene mai effettuata, ma si può sempre iniziare a farlo. Ecco perché propongo una utility molto interessante e gratuita, Nokia Monitor Test.

Con poche operazioni questo semplice software permette di regolare il proprio monitor, con immediato beneficio delle proprie pupille.

Inoltre, ho provato una combinazione hardware/software dotata di un ottimo rapporto qualità/prezzo, ovvero l’Huey della Pantone. Efficace e molto semplice.

Per chi fosse interessato ad approfondire i complessi problemi del colore e della calibrazione, consiglio la lettura di una buona guida di Mauro Boscarol, Gestione digitale del colore.