tradurre e scrivere per il web (prima parte)
DESCRIPTION
Milano, 30/03/2012Seminario organizzato per Trans-edit Group sulla traduzione e redazione di pagine web in formato HTMLTRANSCRIPT
![Page 1: Tradurre e scrivere per il web (prima parte)](https://reader035.vdocuments.net/reader035/viewer/2022062312/5557e8aed8b42ab6258b512c/html5/thumbnails/1.jpg)
Tradurre e scrivere per il web(prima parte)
di Andrea Spila
Milano, 30 marzo 2012
![Page 2: Tradurre e scrivere per il web (prima parte)](https://reader035.vdocuments.net/reader035/viewer/2022062312/5557e8aed8b42ab6258b512c/html5/thumbnails/2.jpg)
Agenda della giornata
• La vostra esperienza• Come si traduce un sito web• Introduzione all’HTML• Scrivere (e tradurre) per il web• Strumenti di scrittura e traduzione• Laboratorio di traduzione
![Page 3: Tradurre e scrivere per il web (prima parte)](https://reader035.vdocuments.net/reader035/viewer/2022062312/5557e8aed8b42ab6258b512c/html5/thumbnails/3.jpg)
La vostra esperienza
• Avete tradotto siti web?• Quali strumenti avete utilizzato?• Quali problemi avete incontrato?
![Page 4: Tradurre e scrivere per il web (prima parte)](https://reader035.vdocuments.net/reader035/viewer/2022062312/5557e8aed8b42ab6258b512c/html5/thumbnails/4.jpg)
Come si traduce un sito web
![Page 5: Tradurre e scrivere per il web (prima parte)](https://reader035.vdocuments.net/reader035/viewer/2022062312/5557e8aed8b42ab6258b512c/html5/thumbnails/5.jpg)
Siti statici
www.rolfingflow.it
![Page 6: Tradurre e scrivere per il web (prima parte)](https://reader035.vdocuments.net/reader035/viewer/2022062312/5557e8aed8b42ab6258b512c/html5/thumbnails/6.jpg)
Siti dinamici
www.stefaniasalerno.it
![Page 7: Tradurre e scrivere per il web (prima parte)](https://reader035.vdocuments.net/reader035/viewer/2022062312/5557e8aed8b42ab6258b512c/html5/thumbnails/7.jpg)
Content Management Systems (CMS)
![Page 8: Tradurre e scrivere per il web (prima parte)](https://reader035.vdocuments.net/reader035/viewer/2022062312/5557e8aed8b42ab6258b512c/html5/thumbnails/8.jpg)
Content Management Systems (CMS)
www.e-schooloftranslation.org
![Page 9: Tradurre e scrivere per il web (prima parte)](https://reader035.vdocuments.net/reader035/viewer/2022062312/5557e8aed8b42ab6258b512c/html5/thumbnails/9.jpg)
HTML, XML, XHTML, PHP, JS…
• Aspetti tecnici• Linguaggi di marcatura e di scripting• Bisogna conoscerli?• Oggi cominciamo con l’HTML
![Page 10: Tradurre e scrivere per il web (prima parte)](https://reader035.vdocuments.net/reader035/viewer/2022062312/5557e8aed8b42ab6258b512c/html5/thumbnails/10.jpg)
Tipologia di contenuti
www.lges.it
![Page 11: Tradurre e scrivere per il web (prima parte)](https://reader035.vdocuments.net/reader035/viewer/2022062312/5557e8aed8b42ab6258b512c/html5/thumbnails/11.jpg)
Usabilità e trovabilità
• Aspetti comunicativi• Scrivere per i lettori• Scrivere per i motori• Tradurre/adattare/ottimizzare• Farsi trovare/farsi leggere
![Page 12: Tradurre e scrivere per il web (prima parte)](https://reader035.vdocuments.net/reader035/viewer/2022062312/5557e8aed8b42ab6258b512c/html5/thumbnails/12.jpg)
Introduzione all’HTML
![Page 13: Tradurre e scrivere per il web (prima parte)](https://reader035.vdocuments.net/reader035/viewer/2022062312/5557e8aed8b42ab6258b512c/html5/thumbnails/13.jpg)
Acronimo di HyperText Markup Language
NON è un linguaggio di programmazione (come C, Pascal, Java) né un linguaggio di scripting (come PHP, ASP, PERL)
È un linguaggio di marcatura che indica il modo in cui devono essere presentati gli elementi di contenuto sulla pagina
Le indicazioni sono fornite tramite marcatori detti TAG
Che cos’è l’HTML?
![Page 14: Tradurre e scrivere per il web (prima parte)](https://reader035.vdocuments.net/reader035/viewer/2022062312/5557e8aed8b42ab6258b512c/html5/thumbnails/14.jpg)
La pagina web
HTML
Una metafora
![Page 15: Tradurre e scrivere per il web (prima parte)](https://reader035.vdocuments.net/reader035/viewer/2022062312/5557e8aed8b42ab6258b512c/html5/thumbnails/15.jpg)
La pagina web
HTML
Un’altra metafora
![Page 16: Tradurre e scrivere per il web (prima parte)](https://reader035.vdocuments.net/reader035/viewer/2022062312/5557e8aed8b42ab6258b512c/html5/thumbnails/16.jpg)
• Indipendente dalla piattaforma(si può leggere su ogni computer)
• Formato testo (può essere scritto in qualsiasi editor di testo)
• Semplice (servono solo pochi tag di base per comporre una pagina HTML)
Caratteristiche dell’HTML
![Page 17: Tradurre e scrivere per il web (prima parte)](https://reader035.vdocuments.net/reader035/viewer/2022062312/5557e8aed8b42ab6258b512c/html5/thumbnails/17.jpg)
• Struttura<TAG attributi>contenuto</TAG>o <TAG attributi> (tag vuoto)
• Annidamento<TAG1 attributi> contenuto 1 <TAG2> contenuto 2 </TAG2> </TAG1>
Tag HTML
![Page 18: Tradurre e scrivere per il web (prima parte)](https://reader035.vdocuments.net/reader035/viewer/2022062312/5557e8aed8b42ab6258b512c/html5/thumbnails/18.jpg)
<HTML> </HTML> indica il tipo di documento <HEAD> </HEAD> informazioni sul documento<TITLE> </TITLE> titolo del documento
(nella HEAD)<BODY> </BODY> contenuto della pagina
(visualizzato nel browser)
TAG di base
![Page 19: Tradurre e scrivere per il web (prima parte)](https://reader035.vdocuments.net/reader035/viewer/2022062312/5557e8aed8b42ab6258b512c/html5/thumbnails/19.jpg)
Dichiarazione DOCTYPE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
![Page 20: Tradurre e scrivere per il web (prima parte)](https://reader035.vdocuments.net/reader035/viewer/2022062312/5557e8aed8b42ab6258b512c/html5/thumbnails/20.jpg)
<HTML>
<HEAD> <TITLE>Titolo della pagina</TITLE> </HEAD>
<BODY> Contenuto della pagina
</BODY>
</HTML>
La mia prima pagina HTML
![Page 21: Tradurre e scrivere per il web (prima parte)](https://reader035.vdocuments.net/reader035/viewer/2022062312/5557e8aed8b42ab6258b512c/html5/thumbnails/21.jpg)
<HTML>
<HEAD> <TITLE>Titolo della pagina</TITLE> </HEAD>
<BODY> Contenuto della pagina
</BODY>
</HTML>
Annidamento: scatole cinesi
![Page 22: Tradurre e scrivere per il web (prima parte)](https://reader035.vdocuments.net/reader035/viewer/2022062312/5557e8aed8b42ab6258b512c/html5/thumbnails/22.jpg)
<HTML>
<HEAD> <TITLE>Titolo della pagina</TITLE> </HEAD>
<BODY> Contenuto della pagina
</BODY>
</HTML>
… o matriosche
![Page 23: Tradurre e scrivere per il web (prima parte)](https://reader035.vdocuments.net/reader035/viewer/2022062312/5557e8aed8b42ab6258b512c/html5/thumbnails/23.jpg)
La mia prima pagina HTML
![Page 24: Tradurre e scrivere per il web (prima parte)](https://reader035.vdocuments.net/reader035/viewer/2022062312/5557e8aed8b42ab6258b512c/html5/thumbnails/24.jpg)
Metatag
<META http-equiv="Content-Type" content="text/html; charset=UTF-8" />
![Page 25: Tradurre e scrivere per il web (prima parte)](https://reader035.vdocuments.net/reader035/viewer/2022062312/5557e8aed8b42ab6258b512c/html5/thumbnails/25.jpg)
Metatag
<META name="keywords" content="parolachiave1, parolachiave2, parolachiave3,…" />
<META name="description" content="descrizione dei contenuti della pagina" />
![Page 26: Tradurre e scrivere per il web (prima parte)](https://reader035.vdocuments.net/reader035/viewer/2022062312/5557e8aed8b42ab6258b512c/html5/thumbnails/26.jpg)
Stile• <B> contenuto </B> grassetto (anche <STRONG>)
• <I> contenuto </I> corsivo (anche <EM>)
• <TT> contenuto </TT> telescrivente
• <U> contenuto </U> sottolineato
• <STRIKE> contenuto </STRIKE> barrato
Tag di formattazione
![Page 27: Tradurre e scrivere per il web (prima parte)](https://reader035.vdocuments.net/reader035/viewer/2022062312/5557e8aed8b42ab6258b512c/html5/thumbnails/27.jpg)
Titoli dei paragrafi (Heading)
<Hn> Titolo del paragrafo </Hn>
H1H2
H3
Tag di formattazione (2)
![Page 28: Tradurre e scrivere per il web (prima parte)](https://reader035.vdocuments.net/reader035/viewer/2022062312/5557e8aed8b42ab6258b512c/html5/thumbnails/28.jpg)
Nuovo paragrafo <P> contenuto </P>
Contenitori <DIV>...</DIV> <SPAN>...</SPAN>
Rimando a capo <BR> o <BR /> (tag vuoto)
Paragrafi e contenitori
![Page 29: Tradurre e scrivere per il web (prima parte)](https://reader035.vdocuments.net/reader035/viewer/2022062312/5557e8aed8b42ab6258b512c/html5/thumbnails/29.jpg)
Due tipi di elenchi:
<OL>...</OL> (elenchi ordinati)oppure
<UL>...</UL> (elenchi non ordinati)
I punti elenco vengono inseriti all’interno di questi tag, in questo modo: <LI> contenuto del punto elenco </LI>
Elenchi
![Page 30: Tradurre e scrivere per il web (prima parte)](https://reader035.vdocuments.net/reader035/viewer/2022062312/5557e8aed8b42ab6258b512c/html5/thumbnails/30.jpg)
<OL>
<LI>Primo punto</LI> <LI>Secondo punto</LI> <LI>Terzo punto</LI>
</OL>
1. Primo punto2. Secondo punto3. Terzo punto
Elenco ordinato
![Page 31: Tradurre e scrivere per il web (prima parte)](https://reader035.vdocuments.net/reader035/viewer/2022062312/5557e8aed8b42ab6258b512c/html5/thumbnails/31.jpg)
<UL>
<LI>Primo punto</LI> <LI>Secondo punto</LI> <LI>Terzo punto</LI>
</UL>
• Primo punto• Secondo punto• Terzo punto
Elenco non ordinato
![Page 32: Tradurre e scrivere per il web (prima parte)](https://reader035.vdocuments.net/reader035/viewer/2022062312/5557e8aed8b42ab6258b512c/html5/thumbnails/32.jpg)
<IMG src="terra.gif" alt="La terra vista dalla luna" title="La terra vista dalla luna" width="90" height="90" border="0">
Immagini
![Page 33: Tradurre e scrivere per il web (prima parte)](https://reader035.vdocuments.net/reader035/viewer/2022062312/5557e8aed8b42ab6258b512c/html5/thumbnails/33.jpg)
La terra vista dalla luna
Attributo Title
La terra vista dalla luna
Attributo Alt
Immagini
![Page 34: Tradurre e scrivere per il web (prima parte)](https://reader035.vdocuments.net/reader035/viewer/2022062312/5557e8aed8b42ab6258b512c/html5/thumbnails/34.jpg)
<TABLE border="1"> <TR> <TH>Mese</TH> <TH>Risparmi</TH> </TR> <TR> <TD>Gennaio</TD> <TD>€100</TD> </TR></TABLE>
Tabelle
![Page 35: Tradurre e scrivere per il web (prima parte)](https://reader035.vdocuments.net/reader035/viewer/2022062312/5557e8aed8b42ab6258b512c/html5/thumbnails/35.jpg)
Tabelle
![Page 36: Tradurre e scrivere per il web (prima parte)](https://reader035.vdocuments.net/reader035/viewer/2022062312/5557e8aed8b42ab6258b512c/html5/thumbnails/36.jpg)
Link a un altro documento o altra risorsa
<A href="URL" title="Elenco dei lavori">descrizione del link</A>
Link a un elemento all’interno dello stesso documento
<A href="#nome”>Descrizione del link</A>
<A name="nome">Destinazione</A>
E infine… i link ipertestuali
![Page 37: Tradurre e scrivere per il web (prima parte)](https://reader035.vdocuments.net/reader035/viewer/2022062312/5557e8aed8b42ab6258b512c/html5/thumbnails/37.jpg)
Scrivere (e tradurre)per il web
![Page 38: Tradurre e scrivere per il web (prima parte)](https://reader035.vdocuments.net/reader035/viewer/2022062312/5557e8aed8b42ab6258b512c/html5/thumbnails/38.jpg)
Obiettivi
Comprendere per quali motivi la scrittura online è diversa da altre forme di scrittura
Migliorare le competenze di traduzione dei contenuti web
Migliorare le competenze di scrittura dei contenuti web
Migliorare le competenze di comunicazione in rete
![Page 39: Tradurre e scrivere per il web (prima parte)](https://reader035.vdocuments.net/reader035/viewer/2022062312/5557e8aed8b42ab6258b512c/html5/thumbnails/39.jpg)
Indice
Lettori e motori(Perché la lettura online è diversa)
Scrivere per i lettori(Come migliorare l’usabilità)
Scrivere per i motori(Come migliorare la trovabilità)
Scrivere per il web
![Page 40: Tradurre e scrivere per il web (prima parte)](https://reader035.vdocuments.net/reader035/viewer/2022062312/5557e8aed8b42ab6258b512c/html5/thumbnails/40.jpg)
Lettori e motori
![Page 41: Tradurre e scrivere per il web (prima parte)](https://reader035.vdocuments.net/reader035/viewer/2022062312/5557e8aed8b42ab6258b512c/html5/thumbnails/41.jpg)
Ci sono lettori...
![Page 42: Tradurre e scrivere per il web (prima parte)](https://reader035.vdocuments.net/reader035/viewer/2022062312/5557e8aed8b42ab6258b512c/html5/thumbnails/42.jpg)
... e lettori
![Page 43: Tradurre e scrivere per il web (prima parte)](https://reader035.vdocuments.net/reader035/viewer/2022062312/5557e8aed8b42ab6258b512c/html5/thumbnails/43.jpg)
I lettori online...
![Page 44: Tradurre e scrivere per il web (prima parte)](https://reader035.vdocuments.net/reader035/viewer/2022062312/5557e8aed8b42ab6258b512c/html5/thumbnails/44.jpg)
... leggono così
![Page 45: Tradurre e scrivere per il web (prima parte)](https://reader035.vdocuments.net/reader035/viewer/2022062312/5557e8aed8b42ab6258b512c/html5/thumbnails/45.jpg)
Ricerche sulla lettura online
Alla fine del secolo scorso
Ricerca Stanford-Poynter: uso della metodologia dell’eyetrackingJakob Nielsen: ricerche sulla usabilità
![Page 46: Tradurre e scrivere per il web (prima parte)](https://reader035.vdocuments.net/reader035/viewer/2022062312/5557e8aed8b42ab6258b512c/html5/thumbnails/46.jpg)
Risultati
![Page 47: Tradurre e scrivere per il web (prima parte)](https://reader035.vdocuments.net/reader035/viewer/2022062312/5557e8aed8b42ab6258b512c/html5/thumbnails/47.jpg)
Ricerche più recenti
![Page 48: Tradurre e scrivere per il web (prima parte)](https://reader035.vdocuments.net/reader035/viewer/2022062312/5557e8aed8b42ab6258b512c/html5/thumbnails/48.jpg)
Microcontenuti e nanocontenuti
![Page 49: Tradurre e scrivere per il web (prima parte)](https://reader035.vdocuments.net/reader035/viewer/2022062312/5557e8aed8b42ab6258b512c/html5/thumbnails/49.jpg)
Microcontenuti (1998)
Titolo della pagina (Title) Titoli e sottotitoli dei paragrafi
(nel Body) Oggetti delle email
(Jakob Nielsen)
![Page 50: Tradurre e scrivere per il web (prima parte)](https://reader035.vdocuments.net/reader035/viewer/2022062312/5557e8aed8b42ab6258b512c/html5/thumbnails/50.jpg)
Esempi di microcontenuti
![Page 51: Tradurre e scrivere per il web (prima parte)](https://reader035.vdocuments.net/reader035/viewer/2022062312/5557e8aed8b42ab6258b512c/html5/thumbnails/51.jpg)
Esempi di microcontenuti
![Page 52: Tradurre e scrivere per il web (prima parte)](https://reader035.vdocuments.net/reader035/viewer/2022062312/5557e8aed8b42ab6258b512c/html5/thumbnails/52.jpg)
Nanocontenuti (2009)
Ricerca di Jakob Nielsen sui primi 11 caratteri dei link ipertestuali (le prime due parole sono le più importanti!)