{"id":447,"date":"2014-04-10T09:59:15","date_gmt":"2014-04-10T07:59:15","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/la-battaglia-per-il-campo-body\/"},"modified":"2014-04-10T09:59:15","modified_gmt":"2014-04-10T07:59:15","slug":"la-battaglia-per-il-campo-body","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/la-battaglia-per-il-campo-body\/","title":{"rendered":"La battaglia per il campo body"},"content":{"rendered":"<p><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2014\/04\/n91.jpg\" border=\"0\" align=\"left\" \/>Nei primi anni &#8217;90, ogni pagina era un artigianale lavoro fatto con amore. Purtroppo, chiunque gestisse un grosso sito alla fine si sarebbe scontrato contro un muro: scrivere montagne di HTML personalizzato che avviluppasse contenuto di valore con markup standardizzato, con modifiche rozze del design e con altre cose difficili da mantenere.<\/p>\n<p>Ben presto, i grandi siti abbandonarono interamente le pagine scritte a mano. La sostanza di una pagina venne memorizzata in un database e poi passata attraverso dei template HTML per &#8220;avvolgerla&#8221; in elementi di design quali i footer, le sidebar e i banner ads. Al giorno d&#8217;oggi anche elementi come il nome di un libro, la foto della copertina o la biografia dell&#8217;autore vengono separati dalla parte HMTL relativa al design e memorizzati come &#8220;chunk&#8221; individuali. I creatori di contenuti non combattono pi\u00f9 con canvas HTML vuoti ma riempiono semplicemente delle form di input, lasciando che i template del CMS sistemino gli elementi a seconda delle esigenze.<\/p>\n<div class=\"paragrafo\">\n<h2>Problemi a Chunkytown<\/h2>\n<p>Questo approccio &#8220;fields-and-templates&#8221; funziona molto bene per quel contenuto che segue dei pattern prevedibili, come le pagine con le informazioni di un prodotto, le photo gallery e i podcast. \u00c8 alla base del sistema di successo \u201c<a href=\"http:\/\/blog.programmableweb.com\/2009\/10\/13\/cope-create-once-publish-everywhere\/\">Create Once, Publish Everywhere<\/a>\u201d (&#8220;Crea una volta, pubblica ovunque&#8221;) di NPR ed \u00e8 difficile trovare un CMS o un tool di web publishing che non offra <em>un qualche<\/em> modo per modellare diversi tipi di contenuto.<\/p>\n<p>Il Team Chunk, per\u00f2, ha una debolezza mortale: quanto il testo narrativo \u00e8 mischiato a dei media embedded, a dei call-out complessi o ad altro materiale ricco, i template strutturati cominciano ad avere dei problemi a tenere il passo.<\/p>\n<p>Ne \u00e8 un esempio perfetto MSNBC.com: come parte del suo redesign del 2013, il canale di news via cavo mise pi\u00f9 enfasi sulla copertura di news approfondite e &#8220;web first&#8221;. Il design includeva molti moduli riutilizzabili che potevano essere posizionati su pagine gestite via template: video con playlist che li accompagnano, photo gallery, widget per le votazioni e teaser per gli articoli correlati. Quella standardizzazione port\u00f2 con s\u00e9 tutti i benefici della modellazione del contenuto di un CMS: rese il design pi\u00f9 consistente, semplific\u00f2 il processo di riutilizzo degli elementi &#8220;rich media&#8221; in storie diverse e fece s\u00ec che le regole CSS responsive rimanessero gestibili.<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/d.alistapart.com\/391\/msnbc-screenshot_edit.jpg\" border=\"0\" alt=\"MSNBC news story, where rich media elements must appear at specific spots in stories and include captions, titles, related links, etc.\" width=\"100%\" \/> Una &#8220;news story&#8221; di MSNBC, in cui gli elementi &#8220;rich media&#8221; devono apparire in punti specifici nelle storie ed includere caption, titoli, link correlati, etc.<\/p>\n<p>Sfortunatamente, i reporter e gli editor insistettero che questo metodo avrebbe paralizzato il loro lavoro: avevano bisogno di mischiare pi\u00f9 video, una gallery e una votazione o vari teaser da articoli collegati tra loro, <em>in punti specifici di ciascun articolo<\/em>. Creare questi elementi in campi separati del CMS o in pezzi autonomi di contenuto <em>avrebbe<\/em> reso pi\u00f9 semplice il loro salvataggio e il loro rimescolamento. Tuttavia, fare affidamento su template CMS basati su regole per mostrarli avrebbe anche rotto le loro connessione alle frasi, ai paragrafi e alle sezioni specifiche che avrebbero dovuto migliorare.<\/p>\n<p>Questo \u00e8 il modo in cui il markup complesso si fa strada nel campo body di un articolo. Ben presto, si aggiungeranno dei tool WYSIWYG per aiutare gli editori con limitate conoscenze di HTML. Prima che qualcuno si renda conto di cosa sta succedendo, esplode l&#8217;uso di markup orientato alla presentazione. Si rompono i layout mobile e il compito gi\u00e0 arduo del riutilizzo di contenuto cross-channel diventa ancora pi\u00f9 difficile.<\/p>\n<p>C&#8217;\u00e8 un problema comune in un blog post con dei tweet &#8220;embedded&#8221;, in una recensione comparativa che illustra ciascun prodotto con una photo gallery e in una storia che richiama del materiale a supporto da un articolo precedente: l&#8217;approccio &#8220;fields-and-templates&#8221; non funziona per queste piccole sacche della struttura.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Perch\u00e9 il &#8220;clean markup&#8221; non aiuta<\/h2>\n<p>Se siete cresciuti durante le WYSIWYG Wars, quando strumenti come Adobe PageMill e la feature &#8220;Save to Web&#8221; di Microsoft Word spruzzavano in internet markup terrificante, potreste pensare che un markup HTML pi\u00f9 pulito sia la risposta a questo problema. Uccidi quegli attributi style inutili, assicurati che i tag <code>&lt;p&gt;<\/code> siano usati al posto dei <code>&lt;br \/&gt;<\/code>, usa i tag <code>&lt;ul&gt;<\/code> in maniera appropriata, presta attenzione ai nomi che scegli per le classi CSS e le cose si sistemeranno!<\/p>\n<p>Il markup pulito e semantico \u00e8 importante, ma non risolver\u00e0 problemi strutturali complessi come il bisogno della MSNBC di inserire widget nel testo della narrazione. Abbiamo degli elementi stacanovisti come <code>ul<\/code>, <code>div<\/code> e <code>span<\/code>; degli strumenti di precisione come <code>cite<\/code>, <code>table<\/code> e <code>figure<\/code> e dei nuovi elementi container di HTML5 come <code>section<\/code>, <code>aside<\/code> e <code>nav<\/code>, ma a meno che il nostro contenuto sia davvero cos\u00ec semplice come una citazione senza attribuzione o una immagine con float, avremo bisogno di layour di elementi annidati e di classi CSS per catturare quello che vogliamo <em>davvero<\/em> dire.<\/p>\n<p>Immaginate di voler inserire una semplice photo gallery in un articolo. Il suo markup potrebbe essere pulito e semanticamente corretto, ma il fatto che la galleria abbia un titolo, tre foto, un link ad una pagina dedicata e una caption? <em>Queste<\/em> sono le decisioni di design che potrebbero cambiare in futuro e noi dobbiamo separarle dalla mappatura del markup del nostro contenuto in HTML.<\/p>\n<pre><code>&lt;aside class=\"gallery\"&gt;\n  &lt;h1&gt;&lt;a href=\"gallery1.html\"&gt;Gallery Title!&lt;\/a&gt;&lt;\/h1&gt;\n  &lt;figure&gt;\n    &lt;a href=\"photo1.html\"&gt;&lt;img src=\"photo1.jpg\" \/&gt;&lt;\/a&gt;\n    &lt;a href=\"photo2.html\"&gt;&lt;img src=\"photo2.jpg\" \/&gt;&lt;\/a&gt;\n    &lt;a href=\"photo3.html\"&gt;&lt;img src=\"photo3.jpg\" \/&gt;&lt;\/a&gt;\n    &lt;figcaption&gt;Custom caption&lt;\/figcaption&gt;\n  &lt;\/figure&gt;\n&lt;\/aside&gt;<\/code><\/pre>\n<p>Il problema, comunque, non \u00e8 ristretto all&#8217;industria editoriale: il mio team, recentemente, ha incontrato delle sfide simili durante la realizzazione di un portale di una compagnia di assicurazioni sanitarie per il suo dipartimento Risorse Umane (HR). La maggior parte del contenuto sul sito da 50.000 pagine includeva istruzioni step-by-step complesse, step speciali per tipi specifici di impiegati o call-out appropriati per lavoratori di un certo stato ma non di un altro. Anche con un editor WYSIWYG, le strutture HTML necessarie erano troppo complesse da creare per gli utenti aziendali del sito.<\/p>\n<p>Il punto centrale del problema \u00e8 un disaccoppiamento del vocabolario. Sebbene l&#8217;HTML standard sia sufficientemente ricco perch\u00e9 un designer possa <em>rappresentarci<\/em> del contenuto complesso, non \u00e8 sufficientemente preciso per <em>descrivere e memorizzare<\/em> il contenuto in maniera indipendente dalla presentazione. Questo \u00e8 il motivo per cui gli strumenti WYSIWYG possono peggiorare il problema: piuttosto che schermare i creatori di contenuto dalla complessit\u00e0 del markup, rendono pi\u00f9 semplice descrivere il contenuto usando il vocabolario sbagliato.<\/p>\n<p>Ora, nel tentativo di combinare i requisiti di un design multi-device con narrazioni complesse e arricchite da contenuti multimediali, ci scontriamo contro il muro. L&#8217;approccio a pezzi, &#8220;fields-and-template&#8221; che abbiamo sviluppato non ci salver\u00e0 dal disaccoppiamento tra il nostro contenuto e i tool descrittivi di HTML.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Nel frattempo, nel mondo di XML&#8230;<\/h2>\n<p>Sebbene i campi e i template siano riusciti a dominare i tool di web publishing, il mondo XML ha passato gli ultimi 15 anni circa a sviluppare un approccio alternativo. Piuttosto che suddividere il contenuto in campi per riassemblarlo in seguito, <a href=\"http:\/\/intentionaldesign.ca\/2013\/07\/22\/to-dita-or-not-to-dita-thats-a-good-question-part-1\/\">la comunit\u00e0 di XML adotta documenti fluidi basati sul markup<\/a>. Per catturare una struttura significativa ed evitare i trabocchetti della presentazione &#8220;browser-specific&#8221; di HTML, definiscono delle collezioni di tag di markup con uno scopo preciso per diversi progetti e applicazioni. \u00c8 un approccio versatile che ha incrociato il suo percorso con quello del mondo dell&#8217;editoria web: lo standard XHTML \u00e8 solo HTML definito come uno schema XML.<\/p>\n<p>Lo standard Darwin Information Typing Architecture, meglio noto come DITA, \u00e8 un esempio maturo di questo approccio. Sviluppato da IBM e annunciato nel 2001, DITA fu creato dalla community della documentazione tecnica. Nel lontano 2005, <a href=\"http:\/\/xml.coverpages.org\/DITA-InnodataWP.html\">Adobe lo us\u00f2 per memorizzare e gestire i manuali dei software della Creative Suite<\/a>, pi\u00f9 di 100.000 pagine con illustrazioni, cross-reference e metadati complessi, il tutto in 14 lingue. Sia l&#8217;edizione cartacea sia quella online furono generate dallo stesso insieme di files DITA.<\/p>\n<p>Il cuore di DITA \u00e8 un famiglia di Schema XML standard che definiscono un ricco vocabolario di elementi del contenuto. I tag compatibili con HTML come <code>&lt;ol&gt;<\/code> e <code>&lt;p&gt;<\/code> vengono usati per una semplice formattazione, ma lo standard definisce anche centinaia di ulteriori tag e propriet\u00e0 che descrivono i concetti pi\u00f9 complessi. Inoltre, include norme per delle &#8220;specializzazioni&#8221;: vocabolari add-on per un dato settore o progetto.<\/p>\n<pre><code>&lt;task id=\"signup\"&gt;\n  &lt;title&gt;Signing up for health insurance&lt;\/title&gt;\n  &lt;taskbody&gt;\n    &lt;steps&gt;\n      &lt;step&gt;List your dependents&lt;\/step&gt;\n      &lt;step&gt;Gather past medical information&lt;\/step&gt;\n      &lt;step&gt;Fill out forms 21a, 39b, and 92c&lt;\/step&gt;\n      &lt;step audience=\"retail\"&gt;\n          Hand in your paperwork to a supervisor\n      &lt;\/step&gt;\n      &lt;step audience=\"corporate\"&gt;\n          Deliver your paperwork to the HR office\n      &lt;\/step&gt;\n    &lt;\/steps&gt;\n  &lt;\/taskbody&gt;\n&lt;\/task&gt;\n&lt;p conref=\"..\/boilerplate.xml#disclaimer\"&gt;\n  This text will be replaced by the boilerplate legal disclaimer.\n&lt;\/p&gt;<\/code><\/pre>\n<p>Una volta che questi documenti semanticamente precisi sono stati creati, \u00e8 necessario uno step di trasformazione per trasformare il contenuto strutturato nell&#8217;output finale. Un tool per il web publishing potrebbe leggere una directory di files DITA XML, sostituire gli elementi segnaposto con il testo cui fanno riferimento, espandere i tag personalizzati in markup HTML con degli stili, togliere il testo destinato specificatamente ai manuali stampati e cos\u00ec via.<\/p>\n<p>Questo approccio non \u00e8 privo di svantaggi. Gestire grandi collezioni di articoli e documenti correlati richiede che gli utenti che ne fanno l&#8217;editing capiscano le sfumature delle relazioni specifiche e il modo in cui influenzano il prodotto finale. Sebbene il pi\u00f9 semplice schema DITA sia simile a HTML, altre variazioni aggiungono centinaia di tag e propriet\u00e0 &#8220;special-purpose&#8221;.<\/p>\n<p>Nel pi\u00f9 ampio mondo del web publishing, potrebbe essere necessaria pi\u00f9 personalizzazione per ottenere gli stessi benefici. Sebbene il contenuto semanticamente ricco sia pi\u00f9 pulito e pi\u00f9 semplice da ridestinare, creare dei tool editoriali e dei processi di pubblicazione usabili sulle basi di DITA <em>pu\u00f2<\/em> essere tanto scoraggiante quanto realizzare un complesso sito web multicanale.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Il meglio di entrambe i mondi<\/h2>\n<p>La buona notizia \u00e8 che non <em>dobbiamo<\/em> convertire tutti i nostri progetti in XML per imparare dalla saggezza accumulata da queste comunit\u00e0. Nonostante le &#8220;toolchain&#8221; che sono state create attorno a questi approcci vadano strette agli strumenti e ai workflow dell&#8217;odierno maturo sviluppo web, possiamo usare i loro <em>principi<\/em> nei nostri progetti.<\/p>\n<h3>Mettete il significato nel body, non l&#8217;aspetto<\/h3>\n<p>Quando nel testo della narrazione appaiono delle complesse strutture di markup, riducetele all&#8217;osso. Sostituite i complessi stili con dei tag personalizzati che descrivano il loro significato preciso, come <code>&lt;warning type=\"hardware\"&gt;Non spegnere il server!&lt;\/warning&gt;<\/code>. Quando un nuovo tag non \u00e8 appropriato, usate degli attributi personalizzati. L&#8217;attributo <code>audience<\/code> di DITA ne \u00e8 un buon esempio. Pu\u00f2 essere applicato a molti diversi tipi di elementi, ma metterlo nell&#8217;attributo <code>class<\/code> di cui spesso si abusa in CSS ne confonderebbe il significato.<\/p>\n<p>Elementi pi\u00f9 complicati del campo body, come le gallerie con pi\u00f9 immagini o gli inserimenti di media pieni di metadati, <em>dovrebbero<\/em> essere suddivisi in campi di contenuto separati. Se devono essere riutilizzati tra pi\u00f9 pezzi di contenuto, rendeteli item di contenuto indipendenti in un CMS. Invece di fare affidamento su template basati su regole per posizionarli, comunque, usate dei segnaposto come <code>&lt;gallery id=\"1\" \/&gt;<\/code> e <code>&lt;teaser article=\"82\" rel=\"rebuttal\" \/&gt;<\/code> proprio all&#8217;interno dei campi della narrazione.<\/p>\n<p>Questo approccio fa diventare un articolo o un post una specie di manifesto, con i campi della narrazione come &#8220;Body&#8221; e &#8220;Riassunto&#8221; che fungono da poliziotti del traffico per la collezione di elementi supportati propriamente separati.  In seguito, nell&#8217;output, possono essere rimessi insieme.<\/p>\n<h3>Create tool editoriali per gli stessi elementi significativi<\/h3>\n<p>Gli editor e i creatori che lavorano con contenuto complesso hanno bisogno di strumenti per manipolare il vocabolario nativo del contenuto, non il design visuale finale o le sfumature specifiche del browser di HTML. Recentemente, Wikipedia ha presentato per la prima volta un assistive editing tool che aiuta i nuovi utenti a navigare nella complessit\u00e0 del contenuto del sito. Offre un insieme limitato di strumenti di formattazione, ma d\u00e0 agli editor l&#8217;accesso con un click agli standard del markup specifico di Wikipedia, come le citazioni inline, il testo boilerplate e le call per le revisioni editoriali.<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/d.alistapart.com\/391\/wikipedia-wysiwyg.jpg\" border=\"0\" alt=\"Screenshot of Wikipedia\u2019s custom rich-text editor, with assistive tools for Wiki-specific markup\" width=\"100%\" \/> Screenshot del rich-text editor di Wikipedia, con degli assistive tools per il markup specifico dei Wiki<\/p>\n<p>Questi tipi di decisioni non sono universali: sono create su misura per le peculiarit\u00e0 del contenuto di uno specifico progetto. Disabilitare tutti i trag HTML tranne quelli proprio di base e aggiungere pulsanti &#8220;one-click&#8221; per gli elementi custom di un sito pu\u00f2 trasformare un editor WYSIWYG comune in uno strumento &#8220;structure-friendly&#8221;. \u00c8 anche il modo migliore per evitare il disordine nel markup derivante dal cliccare pulsanti finch\u00e9 non sembra giusto.<\/p>\n<h3>Trasformare il contenuto perch\u00e9 si abbini al design<\/h3>\n<p>Quando viene il momento di pubblicare il contenuto, possiamo trasformare questi tag e segnaposto personalizzati nel formato finale di destinazione. Se il design cambia, devono solo essere fatte delle modifiche nel codice o nei template che trasformano il markup, non in <em>ogni singolo pezzo di contenuto<\/em> in cui appaiono le strutture.<\/p>\n<p>Inoltre, si possono applicare trasformazioni diverse agli elementi personalizzati a seconda del contesto. L&#8217;elemento <code>&lt;gallery&gt;<\/code> citato prima potrebbe essere sostituito da pi\u00f9 immagini sottotitolate e con attribuzione di credits per la maggior parte dei browser web. Sui dispositivi mobile soggetti a vincoli di banda, una singola immagine thumbnail e i link all&#8217;intera galleria potrebbero essere inseriti al suo posto. Si possono prendere decisioni adeguate al contesto per i riassunti delle email, per le API del contenuto di partner o per i feed RSS: ciascuno di questi non \u00e8 altro che un passo di trasformazione alternativo.<\/p>\n<p>Questo processing non deve per forza avvenire lato server. Tool client-side come <a href=\"http:\/\/jquery.com\">jQuery<\/a> e <a href=\"http:\/\/angularjs.org\/\">AngularJS<\/a> possono essere usati per applicare dei comportamenti complessi basandosi su attributi personalizzati, assegnando stile ed interazione con elementi custom, sostituire i segnaposto con markup standard o fare &#8220;lazy-load&#8221; di media adeguati alle esigenze di un device.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>La notizia pi\u00f9 bella \u00e8 che oggi \u00e8 gi\u00e0 possibile<\/h2>\n<p>Questa triade di tecniche (uso di elementi e propriet\u00e0 custom che rappresentino il significato del contenuto, trasformarlo in HTML in output ed assicurarsi che i tool di editing condividano lo stesso vocabolario) ha gi\u00e0 cominciato a muoversi nel mondo del web publishing.<\/p>\n<p>Gli &#8220;Short Tags&#8221; di WordPress sono una semplice applicazione di questa tecnica e i plugin di terze parti possono presentare agli editor un insieme personalizzato di tag segnaposto realizzati in base alle loro necessit\u00e0. Sebbene l&#8217;uso da parte di WordPress di segnaposto con le parentesi come <a href=\"http:\/\/en.support.wordpress.com\/widgets\/upcoming-events\/#events-list-shortcode\"><code><p>Nessun evento imminente<\/p><\/code><\/a> e <a href=\"http:\/\/en.support.wordpress.com\/images\/gallery\/\"><code><\/code><\/a> renda il processing lato client di questi tag pi\u00f9 difficile, l&#8217;approccio che ne \u00e8 alla base \u00e8 lo stesso. Gli shortcode possono suddividere elementi complessi o riutilizzabili in campi ed entit\u00e0 separate, per poi posizionarli all&#8217;interno del campo body.<\/p>\n<p><a href=\"http:\/\/ez.no\/\">EZPublish<\/a>, un CMS basato su PHP molto popolare, permette di memorizzare il contenuto come XML piuttosto che come HTML. Gli sviluppatori possono impostare dei tag personalizzati le cui propriet\u00e0 e il cui contenuto viene mappato in dei template per l&#8217;output. Sebbene non sia automatico, questi tag personalizzati possono essere integrati nei tool di editing nativi di EZPublish, cos\u00ec che i creatori di contenuto non debbano usare del puro markup per inserirli.<\/p>\n<pre><code>&lt;custom name=\"about_author\" photo=\"author.jpg\" user_account=\"77\" &gt;\nThe author wrote this article over a long holiday break, and regrets any eggnog-induced errors.\n&lt;\/custom&gt;<\/code><\/pre>\n<p>Drupal 8, attualmente in via di sviluppo, avr\u00e0 un il tool WYSIWYG CKEditor nativo. Sar\u00e0 pre-configurato con un insieme minimo di tag HTML, ma <a href=\"http:\/\/wimleers.com\/article\/drupal-8-structured-content-authoring-experience\">user\u00e0 i data attributes di HTML5 per memorizzare propriet\u00e0 aggiuntive<\/a> come le caption, i suggerimenti di layout e altro sugli elementi semplici. Quando viene reso il contenuto, i text filter di Drupal lo trasformeranno nella rappresentazione finale: classi CSS, tag <code>&lt;figcaption&gt;<\/code> e cos\u00ec via. Gli utenti possono gestire tale complessa informazione usando i tool visuali di CKEditor invece del semplice markup, ma memorizzando contenuto di precisione e ottenendo in output dell&#8217;HTML semantico come comportamento di default.<\/p>\n<h3>Un futuro radioso<\/h3>\n<p>Questo approccio al contenuto strutturato non far\u00e0 sempre affidamento su tool di pubblicazione web complessi. Molti standard relativi ad HTML5, raggruppati sotto la categoria ombrello dei <a href=\"http:\/\/w3c.github.io\/webcomponents\/explainer\/\">Web Components<\/a>, alla fine renderanno possibile fare queste trasformazioni nel browser stesso. L&#8217;abilit\u00e0 di definire degli elementi personalizzati ci porter\u00e0 pi\u00f9 vicini alla flessibilit\u00e0 del vocabolario di XML, i template HTML supportati dai browser saranno in grado di sostituire al volo quegli elementi con markup &#8220;representational&#8221; pi\u00f9 complesso e Shadow DOM dar\u00e0 ai designer un modo per provare in &#8220;sandbox&#8221; le complesse interazioni JavaScript e CSS all&#8217;interno di quegli elementi personalizzati.<\/p>\n<p>Il supporto dei browser per questi comportamenti \u00e8 chiaramente irregolare, ma strumenti quali <a href=\"http:\/\/www.polymer-project.org\/\">Polymer<\/a> sono pensati proprio per colmare queste lacune. Nel frattempo, possiamo ancora dipendere dagli elementi HTML esistenti, migliorati con i <a href=\"http:\/\/ejohn.org\/blog\/html-5-data-attributes\/\">data attributes<\/a> per sostituire quelli personalizzati. Sebbene dobbiamo ancora fare il lavoro per trasformarli, trovano un compromesso tra un preciso vocabolario su misura del contenuto e un markup pulito e browser-friendly.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Quali sono i prossimi passi?<\/h2>\n<p>Usare questo approccio &#8220;narrative-friendly&#8221; verso il contenuto strutturato non \u00e8 un gioco da ragazzi: i creatori di siti, i content strategist e i designer devono comprendere quello che succede <em>all&#8217;interno<\/em> del campo body, non solo i pezzi presi dal database che gli stanno intorno. Quali pattern nel contenuto devono avere dei semplici stili e quali si meritano un proprio tag personalizzato? Quali possiamo presumere che rimangano consistenti e per quali dovremmo prendere in considerazione dei cambi in futuro? Il nostro processo di pianificazione deve cominciare rispondendo a queste domande.<\/p>\n<p>Inoltre, gli strumenti di editing del contenuto <em>devono<\/em> essere realizzati su misura per riflettere queste decisioni. Troppi utenti sono abituati ai tool WYSIWYG &#8220;Dreamweaver nel campo body&#8221; orientati alla presentazione e farli tornare nella terra del puro markup \u00e8 la strada giusta verso il disastro. Sebbene l&#8217;insieme degli attuali tool WYSIWYG per il web possa essere personalizzato, accade raramente che li si possa modificare davvero per far s\u00ec che siano adatti al vocabolario del contenuto di un sito quando incombono le scadenze.<\/p>\n<p>Tuttavia il riscontro potrebbe essere incredibile. Design pi\u00f9 ricchi e flessibili possono coesistere con la richiesta di editoria multicanale: i cambiamenti futuri al design possono svicolare il processo laborioso di sgrossare vecchi agglomerati di contenuto e tool pi\u00f9 semplici ed efficienti possono aiutare gli editori e gli autori a produrre contenuto migliore pi\u00f9 rapidamente. Possiamo mettere al sicuro il campo body per le future generazioni combinando il meglio di XML e il contenuto web strutturato.<\/p>\n<p>Illustrazioni: {carlok}<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Nel tentativo di combinare le richieste di design multi-device con testi pieni di contenuti multimediali, siamo finiti contro a un muro. L&#8217;approccio a pezzi (o chunk), composto di campi e template, che abbiamo sviluppato, non pu\u00f2 salvarci dall&#8217;accoppiamento sbagliato tra il nostro contenuto e gli strumenti descrittivi di HTML. La buona notizia \u00e8 che non dobbiamo convertire tutti i nostri progetti in XML per usufruire della saggezza della community di XML. Possiamo pubblicare del contenuto strutturato che supporti i bisogni degli editor e degli art director di oggi e contemporaneamente rendere il nostro contenuto adatto alle generazioni future, usando degli elementi e delle propriet\u00e0 personalizzate per rappresentare il significato del contenuto, trasformandolo in HTML come output e assicurandoci che i tool di editing condividano lo stesso vocabolario.<\/p>\n","protected":false},"author":818,"featured_media":7000726,"comment_status":"open","ping_status":"open","template":"","categories":[246,254,108],"tags":[],"coauthors":[415],"class_list":["post-447","article","type-article","status-publish","has-post-thumbnail","hentry","category-architettura-dell-informazione","category-content-strategy","category-numero-91-10-aprile-2014"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article\/447","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/users\/818"}],"replies":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/comments?post=447"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media\/7000726"}],"wp:attachment":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media?parent=447"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/categories?post=447"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/tags?post=447"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/coauthors?post=447"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}