Embed Size (px)
DESCRIPTION
Milano, 30/03/2012Seminario organizzato per Trans-edit Group sulla traduzione e redazione di pagine web in formato HTML
Citation preview
Tradurre e scrivere per il web(prima parte)
di Andrea Spila
Milano, 30 marzo 2012
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
La vostra esperienza
• Avete tradotto siti web?• Quali strumenti avete utilizzato?• Quali problemi avete incontrato?
Come si traduce un sito web
Siti statici
www.rolfingflow.it
Siti dinamici
www.stefaniasalerno.it
Content Management Systems (CMS)
Content Management Systems (CMS)
www.e-schooloftranslation.org
HTML, XML, XHTML, PHP, JS…
• Aspetti tecnici• Linguaggi di marcatura e di scripting• Bisogna conoscerli?• Oggi cominciamo con l’HTML
Tipologia di contenuti
www.lges.it
Usabilità e trovabilità
• Aspetti comunicativi• Scrivere per i lettori• Scrivere per i motori• Tradurre/adattare/ottimizzare• Farsi trovare/farsi leggere
Introduzione all’HTML
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?
La pagina web
HTML
Una metafora
La pagina web
HTML
Un’altra metafora
• 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
• Struttura<TAG attributi>contenuto</TAG>o <TAG attributi> (tag vuoto)
• Annidamento<TAG1 attributi> contenuto 1 <TAG2> contenuto 2 </TAG2> </TAG1>
Tag HTML
<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
Dichiarazione DOCTYPE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<HTML>
<HEAD> <TITLE>Titolo della pagina</TITLE> </HEAD>
<BODY> Contenuto della pagina
</BODY>
</HTML>
La mia prima pagina HTML
<HTML>
<HEAD> <TITLE>Titolo della pagina</TITLE> </HEAD>
<BODY> Contenuto della pagina
</BODY>
</HTML>
Annidamento: scatole cinesi
<HTML>
<HEAD> <TITLE>Titolo della pagina</TITLE> </HEAD>
<BODY> Contenuto della pagina
</BODY>
</HTML>
… o matriosche
La mia prima pagina HTML
Metatag
<META http-equiv="Content-Type" content="text/html; charset=UTF-8" />
Metatag
<META name="keywords" content="parolachiave1, parolachiave2, parolachiave3,…" />
<META name="description" content="descrizione dei contenuti della pagina" />
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
Titoli dei paragrafi (Heading)
<Hn> Titolo del paragrafo </Hn>
H1H2
H3
Tag di formattazione (2)
Nuovo paragrafo <P> contenuto </P>
Contenitori <DIV>...</DIV> <SPAN>...</SPAN>
Rimando a capo <BR> o <BR /> (tag vuoto)
Paragrafi e contenitori
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
<OL>
<LI>Primo punto</LI> <LI>Secondo punto</LI> <LI>Terzo punto</LI>
</OL>
1. Primo punto2. Secondo punto3. Terzo punto
Elenco ordinato
<UL>
<LI>Primo punto</LI> <LI>Secondo punto</LI> <LI>Terzo punto</LI>
</UL>
• Primo punto• Secondo punto• Terzo punto
Elenco non ordinato
<IMG src="terra.gif" alt="La terra vista dalla luna" title="La terra vista dalla luna" width="90" height="90" border="0">
Immagini
La terra vista dalla luna
Attributo Title
La terra vista dalla luna
Attributo Alt
Immagini
<TABLE border="1"> <TR> <TH>Mese</TH> <TH>Risparmi</TH> </TR> <TR> <TD>Gennaio</TD> <TD>€100</TD> </TR></TABLE>
Tabelle
Tabelle
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
Scrivere (e tradurre)per il web
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
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
Lettori e motori
Ci sono lettori...
... e lettori
I lettori online...
... leggono così
Ricerche sulla lettura online
Alla fine del secolo scorso
Ricerca Stanford-Poynter: uso della metodologia dell’eyetrackingJakob Nielsen: ricerche sulla usabilità
Risultati
Ricerche più recenti
Microcontenuti e nanocontenuti
Microcontenuti (1998)
Titolo della pagina (Title) Titoli e sottotitoli dei paragrafi
(nel Body) Oggetti delle email
(Jakob Nielsen)
Esempi di microcontenuti
Esempi di microcontenuti
Nanocontenuti (2009)
Ricerca di Jakob Nielsen sui primi 11 caratteri dei link ipertestuali (le prime due parole sono le più importanti!)
