Formattare testi per il web

A presentation at WordCamp Rome in September 2018 in Rome, Metropolitan City of Rome, Italy by Francesca Marano

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

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

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

<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

<strong>Grassetto</strong> <em>Corsivo</em> @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> 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

TEXT COLOR Colore del testo @FrancescaMarano

FATEMI USCIRE DA QUESTA LISTA! @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

Francesca Marano
@francescamarano

1 / 60

Premi Invio e invece di una nuova riga ottieni un nuovo paragrafo. Vuoi creare un elenco annidato e semplicemente non sembra come lo vuoi. Hai incollato il testo da Word e il suo formato è completamente sbagliato.

La formattazione di un articolo in WordPress può essere noiosa e frustrante, ma è un passo cruciale nella scrittura per il web. Le persone leggono sullo schermo in modo diverso rispetto alla carta e la formattazione del testo li aiuterà ad arrivare alla fine.

Questo talk ti mostrerà come sfruttare le opzioni disponibili in WordPress e ti insegnerà come risolvere alcuni problemi comuni con alcuni tag HTML.

Formattare testi per il web

Link for this presentation:

HTML code for embedding:

Share on social media: