Testualità ipertestuale

L'ipertesto è un insieme di componenti testuali che, pur utilizzando un codice linguistico, permette una lettura non lineare di un documento creato con un computer. navigazionelink nodo percorsi personalizzati La lettura di un ipertesto è detta navigazione. Attraverso i link, (collegamenti) l'utente può navigare, attraverso una lettura non sequenziale, passando da un nodo all'altro (il nodo è l'unità informativa di base dell'ipertesto) scegliendo liberamente percorsi personalizzati.

Non esiste un ordine prestabilito: è l'utente che costruisce il suo percorso (nellambito però di una libertà concessa dallautore che ha progettato lipertesto). Leggere un ipertesto significa muoversi attraverso il testo in modo attivo; la fruizione è un atto dinamico.

IPERTESTO hypertext (Ted Holm Nelson)

anni ’50 Diffusione (1965) grazie a Tim Berners Lee•

Il termine ipertesto designa un documento elettronico, contente un insieme d’informazioni, di natura testuale grafica e multimediale, strutturate secondo una configurazione a grafo, ovvero composta di collegamenti (nodi), che consentono una consultazione non lineare del documento.

Ted Nelson, l’ipertesto è la forma più generale di scrittura e di linguaggio, che egli definisce come «Scrittura non sequenziale, testo che si dirama e che consente al lettore di scegliere; qualcosa che si fruisce al meglio davanti a uno schermo interattivo. Così come è comunemente inteso, un ipertesto è una serie di brani di testo tra cui sono definiti legamiche consentono al lettore differenti cammini».

T. H. Nelson, Literary Machines 90.1

Una lunga storia:l’ipertesto “non elettronico”•

«l’insieme di porzioni di testo che hanno un modello di collegamento non sequenziale e, quindi, molti percorsi di lettura possibili»

G. Roncaglia, Ma anche il Talmud era un ipertesto.

David Kolb analizza storia e potenzialità creative di un nuovo modo di fare letteratura, in «Repubblica», 26 gennaio 1998.

L’ipertesto “non elettronico”• Gilles Deleuze-Felix Guattari : il rizoma «Riassumiamo i caratteri principali di un rizoma: a differenza degli alberi o delle loro radici, il rizoma connette un punto qualunque con un altro punto qualunque e ognuno dei suoi tratti non rinvia necessariamente a tratti della stessa natura; mette in gioco regimi di segni molto differenti ed anche stati dinon-segni. Il rizoma non si lascia riportare né all’Uno né almolteplice. […] Non è fatto di unità ma di dimensioni o piuttostodi direzioni in movimento, non ha inizio né fine ma sempre unmezzo, per cui cresce e deborda». G. Deleuze-F, Guattari, Millepiani. Capitalismo e schizofrenia, Castelvecchi, 2003, p. 57.

L’ipertesto “non elettronico”• Roland Barthes: lexía / lessía = unità espressive «unità di lettura ». Roland Barthes, Richard Howard, The Rustle of Language, University of California Press, 1989, «Style and Its Image» 1969, pp. 90-99: 93.«In questo testo ideale le reti (réseaux) sono multiple egiocano fra loro senza che nessuna possa ricoprire le altre;questo testo è una galassia di significanti, non una strutturadi significati; non ha inizio: è reversibile; vi si accede da piùentrate di cui nessuna può essere decretata con certezza laprincipale; i codici che mobilita si profilano a perditad’occhio, sono indecidibili…; di questo testo assolutamenteplurale i sistemi di senso possono sì impadronirsi, ma il loronumero non è mai chiuso, misurandosi sull’infinità dellinguaggio».R. Barthes, S/Z, Seuil, Paris, tr. It. Einaudi, Torino 1973, p. 11.

Verso l’ipertesto digitale• Vandevar Bush: Memex (Memory Extender)1930 «as we may think»«funziona per associazione. Con una sola informazionein suo possesso, essa scatta immediatamente allaprossima che viene suggerita per associazione diidee, conformemente a un’intricata rete di percorsisostenuta dalle cellule del cervello».Metafora della rete come sistema neuronaleAlbert-László Barabási (gerarchia interna alla rete) Link. La scienza delle reti, (2004);A.-L. Barabasi - D. Watts, The Structure and Dynamics of Network (2006).

Text

Verso l’ipertesto digitale (1975) George Poulet «I testi sono dunque come i pensieri degli uomini; illoro filo è continuamente interrotto. Ci rinviano inavanti, indietro, ad altri testi con i quali annodanolegami a distanza, simili in questo ai fari di Baudelaire, la cui luce si intreccia ad altre luciintermittenti che si succedono lungo uno stessolitorale». G. Poulet, Lecture et Interpretation du texte littérarie, in Qu’est-ce qu’untexte?, dir. E. Barbotin, Paris Corti, 1975, p. 76.

HTML 1989 Tim Berners Lee:  HyperText Markup Language

linguaggio ipertestuale di marcatura per ipertesti

Dai lexia al tag (= etichetta, cioè marcatori)

Funzioni

1. prescrittiva-processuale dei marcatori, che permettono ad una porzione di codice di essere interpretata dal browser

2. descrittiva (in tal caso si parla di metatag); i tag descrivono la pagina o l’oggetto digitale secondo un linguaggio standard o keyword.

Teoria della convergenza culturale (George Landow)

«Derrida ipertestuale e Nelson postrutturalista? Quando i progettisti di software esaminano le pagine di Glas o Della Grammatologia, si imbattono in un Derrida digitalizzato e ipertestualizzato;

quando i teorici della letteratura studiano Literary Machines, scoprono un Nelson decostruzionista o postrutturalista. Queste sbalorditive sovrapposizioni possono aver luogo perché negli ultimi decenni la teoria della letteratura e gli studi informatici sugli ipertesti, due aree di ricerca apparentemente non collegate, si sono avvicinate sempre più. Le affermazioni degli studiosi di letteratura mostrano oggi una notevole convergenza con quelle degli informatici».

G. P. Landow, L’ipertesto: tecnologie digitali e critica letteraria, a cura di Paolo Ferri, Milano Bruno Mondadori, 1998, pp. 21-22.

Le tre dimensioni della pubblicazione digitale

Mondo visibile (Pagine we, blog, wiki, social network)

Mondo materiale

(Libri, giornali, archivi, biblioteche, etc)

Mondo invisibile (software, linguaggi, codifiche)

• Sistema gerarchico
• Ci sono tag iniziale e di chiusura
• Rispetta the Matriochka rule:
• i tag sono sempre innestati (They never overlap!)
• è possibile usare tag vuoti!
• I tag sono sempre scritti in minuscolo (good practice)

<html>


    <head>


        <title>My first web page</title>


    </head>


    <body>


        <h1>My first head</h1>


        <p>My first paragraph</p>


    </body>


</html>

L' HTML è un linguaggio di contrassegno. Questo "dice" al browser come visualizzare i contenuti. L' HTML separa il "contenuto" (parole, immagini, audio, video, ecc.) dalla "presentazione" (la definizione del tipo di contenuto e le istruzioni per come quel tipo di contenuto debba essere visualizzato). L' HTML usa un set di elementi predefiniti per identificare il tipo di contenuto.

Per esempio, l' elemento paragrafo consiste del tag iniziale "<p>" e del tag di chiusura "</p>". L' esempio di seguito mostra un paragrafo contenuto nel corrispondente elemento HTML

L'evoluzione del HTML ha portato alla ultima release che è appunto l'HTML5.
Quali sono le differenze?

• Il nuovo approccio semantico nella creazione di pagine web.
  
• L’obiettivo del gruppo è quello di elaborare specifiche per aiutare lo sviluppo di un web più orientato alle applicazioni che ai documenti
  
• Cambiano le applicazione audio-video
  
• Scompare Flash e Java
  

HTML is not difficult!

Right markup:
<b><i>HTML</i></b>
is not difficult

Wrong markup:
<b><i>HTML</b></i>
is not difficult

I TAG VUOTI!

Per esempio:  <br> interruzione di riga

Attributi

Tutti gli elementi HTML hanno degli attributi

Gli attributi aggiungono informazioni al tag

Sono sempre specificati nel tag iniziale

E hanno spesso questa sintassi name="value"

<img src=“pippo.jpg” alt=“3-month-old Pippo”>

Attributi importanti

alt: alternativa all'immagine

href: URL (web address) per un link

src: URL (web address) per un'immagine

style: per un elemento CSS

(pay attention!)

Il tag <a>

<a href="https://wikipedia.com">Wikipedia</a>

<img>: definisce un'immagine
@src attributo: definisce la URL di un'immagine
@alt attributo: definisce un link alternativo per un'immagine, se non puo' essere visualizzata
<a>: definisce un linl
@href attributo: definisce l'indirizzo del link

ID e CLASS

HTML Global Attributes (attributes below can be
used on any HTML element)

Gli attributi id e class

CSS non sarebbe cosi' tool senza

ID e CLASS

CLASS - DIV

Aggiungiamo a un DIV l'attributo class=“box-immagine”:

<div class=“box-immagine”>Text+image</div>

Il valore di class è definito nei CSS

.box-immagine {color: blue;}

differenza fra class e ID

• Le classi servono per definire una tipologia di elementi, cioè per attribuire uno scopo e/o una presentazione ad un sottoinsieme di elementi con caratteristiche e funzionalità comuni di una pagina HTML.
• Gli id servono per definire un elemento unico in una pagina, con un unico e preciso scopo, nella maggior parte dei casi tale scopo è determinare una sezione in una pagina HTML. In sostanza, quando sappiamo che un elemento sarà unico useremo un id.

SPAN

Il tag <span> è usato per un gruppo di elementi all'interno di un documento

Il tag <span> fornisce un modo di dare piu' caratteristiche ad alcune parti del documento.

Esempio

HTML: <p>This <span class=”test”>is</span> a<span class=”test”>test</span></p>

CSS: span.test
             {color: green;}

<ul>: lista

<ol>: Una lista ordinata

<li>: Un item

<!-- This is a comment --> : Comments are not displayed by the browser, but they can help document your HTML source code

Altri elementi

<ul>: lista

<ol>: Una lista ordinata

<li>: Un item

Altri elementi

<header>
   <h1>A library for poetry</h1>
</header>

<nav>

  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Chi siamo</a></li>
    <li><a href="#">Bibliografia</a></li>
  </ul>

</nav>

CSS

Cascading Style Sheets, spesso abbreviato in CSS, è un linguaggio per sfogli di stile utilizzato per descrivere la presentazione di un documento scritto in HTML o XML (inclusi vari linguaggi XML quali SVG o XHTML).

CSS

<p style="color: green;">Green text</p>

Lo stile all'interno dei tag. Ma allora il CSS a cosa serve?

CSS

<html>
  <head>
    <style>
     p { color: green; }
    </style>
  </head>
  <body>
    <p>Green text</p>
  </body>
</html>

CSS

<html>
  <head>
<link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <p>Testo verde</p>
  </body>
</html>

CSS

• Puoi cambiare la formattazione al tuo HTML in modo piu' efficiente e veloce.
• Lo stesso stile puo' essere usato per diverse pagine
• L'HTML e' piu' pulito e facilmente controllabile.

<div>
                          
<div style="height:100px; width:250px; color=blue”>

CSS

Selector   {
		property1 : value1;
		property2 : value2;
				…
		propertyN : valueN; 
			                }

CSS

Selector   {

        margin-top: 50px; 
        font-style: italic
        color: red;
			        }

CSS

h1 { 
      color: #dd5500;
      font-family: Arial; 
      }

p {
     margin-top: 50px; 
     color: blue; 
     font-style: italic;
     }
			        }

CSS

className {
	    proprietà1: valore1;
            proprietà2: valore2;
	                …….…
	    proprietàN: valoreN; 
		}

CSS

#idName {
	   proprietà1: valore1;
            proprietà2: valore2;
		       …..…
	   proprietàN: valoreN; 
                        }

TEXT FORMATTING

background-color: Il colore di sfondo di un elemento

background-image: l'immagine di sfondo di un elemento

background-repeat: ripete l'immagine (ex repeat-x, repeat-y, no-repeat)

body {
    background-image: url("pippo.gif");
    background-color: #cccccc;
}