Formattare testi per il web Francesca Marano - @FrancescaMarano

CIAO! SONO FRANCESCA ★ WordPress Community Team ★ Ex web designer freelance ★ WordPress Community Manager

CONTENT IS KING @FrancescaMarano

UN PO’ DI STORIA ★ 12 marzo 1989 - Sir Tim Berners-Lee scrive una proposta per un sistema informatico distribuito ★ Nel 1993 pubblica le prime specifiche dell’HTML ★ 24 novembre 1995 - Vengono pubblicare le specifiche di HTML 2.0 come standard per tutte le implementazioni future @FrancescaMarano

UN PO’ DI STORIA ★ 1 ottobre 1997 - Jakob Nielsen pubblica l’articolo “How Users Read on the Web” (Come gli utenti leggono sul web) @FrancescaMarano

Sommario: Non leggono. Le persone raramente leggono parola per parola nelle pagine web: si limitano a scorrere la pagina, scegliendo singole parole e frasi. Jakob Nielsen @FrancescaMarano

HTML 101 @FrancescaMarano

COS’È L’HTML ★ HyperText Markup Language ★ Definisce gli elementi nella pagina in modo semantico ★ Gli elementi sono definiti da parole in inglese o dalle loro abbreviazioni ★ <Tag di apertura> Contenuto </Tag di chiusura> @FrancescaMarano

TAG HTML UTILI PER CHI SCRIVE ★ Paragrafi <p> Contenuto </p> ★ Citazioni <blockquote> Contenuto </blockquote> ★ Elenchi numerati <ol> List Items <li> Contenuto </li> </ol> ★ Elenchi puntati <ul> List Items <li> Contenuto </li> </ul> ★ Elementi di elenco <li> Contenuto </li> @FrancescaMarano

TITOLI (HEADING)

<h1>Titolo 1</h1> (No!) <h2>Titolo 2</h2> <h3>Titolo 3</h3> <h4>Titolo 4</h4> <h5>Titolo 5</h5> <h6>Titolo 6</h6>

(BREVE) INTRODUZIONE ALL’ACCESSIBILITÀ AIUTARE TUTTI I LETTORI @FrancescaMarano

FORMATTARE IN WORDPRESS @FrancescaMarano

DIFFERENTI MODI PER FORMATTARE Editor (UI) Gutenberg (UI) HTML @FrancescaMarano

GUTENBERG

PARAGRAPH SELECTOR @FrancescaMarano

<h1>Titolo 1</h1> (No!) <h2>Titolo 2</h2> <h3>Titolo 3</h3> <h4>Titolo 4</h4> <h5>Titolo 5</h5> <h6>Titolo 6</h6> @FrancescaMarano

<pre>This is an example of a WordPress post, you could edit this to put information about your site so readers know where you are coming from. You can create as many posts in order to share with your readers what is on your mind.</pre> <p>This is an example of a WordPress post, you could edit this to put information about your site so readers know where you are coming from. You can create as many posts in order to share with your readers what is on your mind.</p> @FrancescaMarano

Bold and Italic Grassetto e Corsivo @FrancescaMarano

@FrancescaMarano

<strong>Grassetto</strong> <em>Corsivo</em> @FrancescaMarano

LISTS Elenchi @FrancescaMarano

<ol> <ul> <li>Ordered List Item #1</li> <li>Unordered List Item #1</li> <li>Ordered List Item #2</li> <li>Unordered List Item #2</li> <li>Ordered List Item #3</li> <li>Unordered List Item #3</li> </ol> </ul> @FrancescaMarano

BLOCKQUOTE Citazione @FrancescaMarano

@FrancescaMarano

<blockquote> Questo è un articolo di WordPress. Puoi modificare le informazioni contenute in esso per raccontare qualcosa di più su di te e su come è iniziato questo blog. <cite>Autore</cite> </blockquote> @FrancescaMarano

ALIGNMENT Allineamento @FrancescaMarano

STRIKETHROUGH Barrato @FrancescaMarano

TEXT COLOR Colore del testo @FrancescaMarano

PROBLEMI COMUNI @FrancescaMarano

ELEMENTI NIDIFICATI @FrancescaMarano

PARAGRAFO O A CAPO @FrancescaMarano

FATEMI USCIRE DA QUESTA LISTA! @FrancescaMarano

LINK PER TUTTI @FrancescaMarano

★ Tim Berners-Lee proposal: https://www.w3.org/History/ 1989/proposal.html ★ Tim Berners-Lee HTML specs: https://www.w3.org/ History/19921103-hypertext/hypertext/WWW/MarkUp/ Tags.html ★ Jakob Nielsen “How Users Read On The Web“: https:// www.nngroup.com/articles/how-users-read-on-theweb/ ★ Jakob Nielsen “F-Shaped Pattern For Reading Web Content”: https://www.nngroup.com/articles/f-shapedpattern-reading-web-content/ @FrancescaMarano

★ Accessibility Resources: http://a11yproject.com/ resources.html ★ Rian Rietveld “HTML5 Headings in WordPress: A11y versus SEO?”: https://blog.rrwd.nl/2014/11/21/html5headings-in-wordpress-lets-fight/ ★ Adrian Roselli “Typefaces for dislexia”: http:// adrianroselli.com/2015/03/typefaces-for-dyslexia.html ★ Sami Keijonen “Writing Accessible Content”: https:// foxland.fi/writing-accessible-content/ @FrancescaMarano

★ Trac Ticket #27159 “Removing TinyMCE buttons to improve user experience”: https:// core.trac.wordpress.org/ticket/27159 ★ Microsoft Inclusive Design Toolkit: https:// www.microsoft.com/en-us/design/inclusive ★ Bulleted and numbered lists https://www.prismnet.com/~hcexres/textbook/lists.html ★ Mark Root-Wiley “No Justification: Don’t Use Right, Center, and Full Justification on the Web”: https:// mrwweb.com/no-justification-dont-use-right-centerand-full-justification-on-the-web/ @FrancescaMarano

DOMANDE? @FrancescaMarano