Formattare testi per il web

Slide 1

Formattare testi per il web Francesca Marano - @FrancescaMarano

Slide 2

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

Slide 3

CONTENT IS KING @FrancescaMarano

Slide 4

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

Slide 5

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

Slide 6

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

Slide 7

HTML 101 @FrancescaMarano

Slide 8

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

Slide 9

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

Slide 10

Slide 11

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>

Slide 12

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

Slide 13

Slide 14

FORMATTARE IN WORDPRESS @FrancescaMarano

Slide 15

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

Slide 16

Slide 17

GUTENBERG

Slide 18

PARAGRAPH SELECTOR @FrancescaMarano

Slide 19

Slide 20

Slide 21

<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

Slide 22

<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

Slide 23

Slide 24

Bold and Italic Grassetto e Corsivo @FrancescaMarano

Slide 25

@FrancescaMarano

Slide 26

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

Slide 27

Slide 28

LISTS Elenchi @FrancescaMarano

Slide 29

Slide 30

Slide 31

<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

Slide 32

BLOCKQUOTE Citazione @FrancescaMarano

Slide 33

@FrancescaMarano

Slide 34

Slide 35

<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

Slide 36

Slide 37

ALIGNMENT Allineamento @FrancescaMarano

Slide 38

Slide 39

Slide 40

STRIKETHROUGH Barrato @FrancescaMarano

Slide 41

Slide 42

Slide 43

TEXT COLOR Colore del testo @FrancescaMarano

Slide 44

Slide 45

Slide 46

PROBLEMI COMUNI @FrancescaMarano

Slide 47

ELEMENTI NIDIFICATI @FrancescaMarano

Slide 48

Slide 49

Slide 50

PARAGRAFO O A CAPO @FrancescaMarano

Slide 51

Slide 52

Slide 53

FATEMI USCIRE DA QUESTA LISTA! @FrancescaMarano

Slide 54

Slide 55

Slide 56

LINK PER TUTTI @FrancescaMarano

Slide 57

★ 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

Slide 58

★ 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

Slide 59

★ 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

Slide 60

DOMANDE? @FrancescaMarano