Diffondere la
ricerca online


Codificare, Analizzare, Diffondere: Le Digital Humanities nei progetti di ricerca

Verona, 16-19 luglio 2019

1. Componenti di un progetto digitale



Intro to Digital Humanities. 1B: Analysis of DH projects. Johanna Drucker, UCLA

2. Client-server model

  • Navigatore (browser). Programma che permette di consultare pagine web, per esempio: Firefox, Chrome, Safari, Opera, Edge, etc.

  • URL. Uniform Resource Locator, indirizzo. Permette di localizzare una risorsa nel web, per esempio: https://cadottorato.github.io/sito

URL



https://www.unil.ch/clsr/home.html


protocollo dominio percorso

www.ionos.it/digitalguide/
Vedi codice sorgente!

3. Siti web e
HTML (HyperText Markup Language)

Fonti :

SGML (Standard Generalized Markup Langage) - ISO 8879:1986

Separazione della struttura logica del documento SGML (titolo, capitoli, paragrafi, etc.) e della sua impaginazione e resa grafica.

La struttura è codificata attraverso dei tags inseriti nel documento.
La resa grafica è definita in un documento esterno, chiamato foglio di stile (stylesheet).

HTML (HyperText Markup Language)



  • XML : una versione semplificata ed estensibile di SGML per gestire i dati
  • HTML : successore di SGML, linguaggio di markup per il web (incluso l'ipertesto)
  • HTML5 : l'ultima versione di HTML
Aapo Laitinen, Visual breakdown of the parts of a HTML element, Wikipedia










Alexandre Niveau, HTML : la base du web, CC BY-NC-SA 4.0

Prologo e radice

HTML5 : DOCTYPE e radice 



 <!DOCTYPE html>
 <html lang="it">


Alexandre Niveau, HTML : la base du web, CC BY-NC-SA 4.0

Elemento head

Raggruppa i metadati e le informazioni di servizio sul documento; contiene:

<head>
	<title>Titolo del documento<title>
	<meta charset="UTF-8" />
	<meta name="keywords" content="corso, HTML" />
	<link rel="stylesheet" media="screen" href="diapos.css" />
</head>
  • il titolo della pagina
  • la dichiarazione della codifica dei caratteri
  • i metadati (descrittivi, giuridici)
  • i fogli di stile CSS
  • gli script (non per forza)
Alexandre Niveau, HTML : la base du web, CC BY-NC-SA 4.0

Il corpo del documento: elemento body


<body>
	<h2>Titolo di una sezione</h2>
	<p class="intro">Ecco il testo del paragrafo
	introduttivo.</p>

	<p>Testo e ancora testo: può essere utile
	<em>mettere in evidenza qualcosa</em>,
	ma non sempre. </p>
</body>


Alexandre Niveau, HTML : la base du web, CC BY-NC-SA 4.0

Spazi bianchi in HTML

  • Tanti spazi di qualsiasi tipo (spazio, a capo, tab, etc.) uno dopo l'altro di seguito sono interpretati dal navigatore come un solo spazio
  • Per fare degli a capo forzati nel mezzo di un testo, usiamo <br/> (break)
  • Ma attenzione ! È raro avere bisogno del tag <br/>, l'utilizzo dei paragrafi generalmente è abbastanza e produce un codice più pulito.
Alexandre Niveau, HTML : la base du web, CC BY-NC-SA 4.0

Elementi block e inline

  • Elementi di tipo block: strutturano il contenuto. Di default cominciano su una nuova linea.

    Titoli: <h1>...</h1> , <h2>...</h2>
    Paragrafi: <p>...</p>
    Separatori: <hr />
    Liste: <ul> et <ol>, qui contiennent des items de liste <li>
    Divisioni generiche: <div>...</div>

Elementi block e inline

Elementi di tipo inline : sono all'interno del flusso di testo.

Immagine: 
<img src="maphoto.jpg" alt="ma photo" />
Link: 
<a href="http://www.w3.org">hypertexte</a>
A capo: 
<br />
Inline generico: 
il <span>testo nello span</span> è questo
Alexandre Niveau, HTML : la base du web, CC BY-NC-SA 4.0

Commento




	<!-- Ceci est un commentaire | Questo è un commento.
	Questa parte del codice non è letta dal navigatore.
	Si usa per aggiungere spiegazioni sul codice o
	prendere appunti -->

Qualche risorsa online

Delle risorse utili (oltre alle specificazioni del W3C
che non sono sempre facili) :

Alexandre Niveau, HTML : la base du web, CC BY-NC-SA 4.0

Esercizio

  • Creare una cartella dove metteremo tutti i materiali di questo corso. Attenzione: niente spazi nei nomi delle cartelle e dei file!
  • Scaricare la cartella zip 'esercizioHTML'
  • Un-zip
  • Aprire il file index.html in oXygen
  • Seguire le istruzioni nei due ultimi commenti. In questo file potete anche creare i vostri commenti dove volete.

Attenzione : potete usare altri editori al posto di oXygen, come Sublime Editor, Notepad++, Wrangler, etc. Questi editori però "non capiscono" la TEI, quindi vi aiuteranno di meno.

5. CSS

Fonti :

CSS (cascading style sheets)



Separazione del contenuto (HTML) e della presentazione (CSS).
CSS permette di formattare, impaginare, gestire il layout, i colori, etc.

Attributo @style


<h1 style="color:red; font-style:italic;">Mon titre</h1>

Contiene una o più coppie proprietà-valore, separate da punti e virgola (qui color:red e font-style:italic)

Il nome della proprietà è separato dal valore dai due punti :
  • il valore red per la proprietà color
  • il valore italic per la proprietà font-style

Risultato: il titolo sarà rosso in corsivo.


Alexandre Niveau, Introduction à CSS, CC BY-NC-SA 4.0

Fogli di stile esterni

Centralisation des styles


Creare un foglio di stile CSS (un file che contiene solo regole CSS) e attaccarlo al file HTML 



<link rel="stylesheet" href="mon_style.css" />
Alexandre Niveau, Introduction à CSS, CC BY-NC-SA 4.0

Cascata


Priorità degli stili :

  1. browser default
  2. stili esterni definiti nel foglio di stile esterno CSS
  3. stili inline definiti con l'attributo @style sugli elementi
CSS syntax

Commenti




	/* Questo è un commento.
	Questa parte del codice non è letta dal browser.
	Si può sare per appunti e spiegazioni */

Qualche prioprietà CSS

Ci sono tante proprietà CSS (una lista qui). Per esempio:

  • color, colore del testo (ex. color: blue)
  • background-color, colore del fondo (ex. background-color: black)
  • font-family, font (ex. font-family: Verdana)
  • font-size, dimensione dei caratteri (ex. font-size: 120%)
  • font-style, stile dei caratteri (ex. font-style: italic)
  • border, bordi intorno all'elemento (ex. border: 1px solid black)
  • text-align, allineamento del testo (ex. text-align: center)
  • text-decoration, decorazione del testo (ex. text-decoration: underline)
Alexandre Niveau, Introduction à CSS, CC BY-NC-SA 4.0

Modello delle scatole

Il browser rappresenta ogni elemento come una scatola.

  • La scatola degli elementi di tipo blocco (<div>, <p>, <h1>) comincia su una nuova linea e prende tutta la larghezza disponibile.
  • La scatola degli elementi di tipo inline (<strong>, <img>, <a>) si comporta come una parola nel flusso del testo e la sua larghezza dipende dal suo contenuto.

Possiamo cambiare la proprietà display con CSS



www.w3schools.com/CSSref/pr_class_display.asp

Colori degli elementi

Tra le proprietà più semplici che possiamo applicare alle scatole c'è il colore:
  • Proprietà color: colore del testo
  • Proprietà background-color: colore dell'evidenziazione

Valori possibili :
  • nomi dei colori (black, red…) nella lista
  • RGB in hexadecimal : #F0B, #FE87B7; vd. sito per trovare codice RGB.
Alexandre Niveau, Modèle de boîte CSS3, CC BY-NC-SA 4.0

Padding vs margin

(inspect element)

Esercizio

  • Download la cartella 'css' et unzip
  • Spostare il file css all'interno della cartella, accanto al file HTML
  • Aggiungere al file 'index.html' questa linea alla fine di head (nel head, non dopo !)
  • Aprire il file 'site.css' in oXygen e seguire le istruzioni nel commento.
6. Javascript
w3schools.com, JavaScript Tutorial
Javascript permette l'interazione dell'utente, che può cambiare degli aspetti del contenuto o della formattazione della pagina (esempio)
7. Pubblicazione di un documento XML/TEI
Source: Wikipedia

XSLT

Extensible Stylesheet Language Transformations

Linguaggio di programmazione che permette di trasformare un documento XML (incluso XML/TEI) in un altro documento (XML, HTML, CSV, etc.)

Soluzioni "prêts-à-porter" per la pubblicazione di documenti XML/TEI


6. Content Management System (CMS)

Content Management System (CMS)

Sistema di gestione dei contenuti

Un CMS gestisce la creazione e modifica di dati digitali.
Un CMS Web serve a gestire delle pagine web e permette di creare dei siti senza vedere troppo codice.

Esempi : Wordpress, Drupal, Joomla, Omeka

Wordpress. Visual editor

Wordpress. Text editor

Drupal. Esempi di edizioni digitali

Omeka

"open-source web publishing platforms
for sharing digital collections and
creating media-rich online exhibits"

Integrazione di Omeka con altri servizi e piattaforme
Qualche riferimento

Cuenca EL, Kowaleski M. (2018) "Omeka and Other Digital Platforms for Undergraduate Research Projects on the Middle Ages", Digital Medievalist. Vol. 11 Issue:1/3. DOI: http://doi.org/10.16995/dm.69

Rath L., (2016) "Omeka.net as a librarian-led digital humanities meeting place", New Library World, Vol. 117 Issue: 3/4, pp.158-172. DOI: https://doi.org/10.1108/NLW-09-2015-0070

Marsh A (2013) "Omeka in the classroom: The challenges of teaching material culture in a digital world", Literary and Linguistic Computing, Vol. 28 Issue: 2/1, pp.279–282. DOI: https://doi.org/10.1093/llc/fqs068

8. Depositi e strumenti di lavoro
per i dati di ricerca
Piattaforme che offrono

  • deposito per il codice
  • gestione di versioni (versioning)
  • hosting


... Github, Gitlab, SourceForge ...

GITHUB
Servizio web di hosting e gestione di codice
Exemples
Piattaforme che offrono

  • deposito sicuro
  • identificanti duraturi (possibilità di citare e gestire la proprietà intellettuale
  • gestione dei diritti


... HAL, Zenodo, Nakala ...

DOI (Digital Object Identifier)



Centre pour la Communication Scientifique Directe, CNRS

"L'archive ouverte pluridisciplinaire HAL, est destinée au dépôt et à la diffusion d'articles scientifiques de niveau recherche, publiés ou non, et de thèses, émanant des établissements d'enseignement et de recherche français ou étrangers, des laboratoires publics ou privés."
hal.archives-ouvertes.fr


Service mis en place par HUMA-NUM

"NAKALA permet à des équipes de recherche, qui en font la demande, de déposer leurs données numériques (fichiers texte, son, image, vidéo) dans un entrepôt sécurisé qui assure à la fois l'accessibilité aux données et leur citabilité dans le temps."
nakala.fr


OpenAIRE (EU org) + CERN

"All research outputs from across all fields of research are welcome [...] Zenodo assigns all publicly available uploads a Digital Object Identifier (DOI) to make the upload easily and uniquely citeable [...] uploading under a variety of different licenses and access levels"
zenodo.org

Esercizio

Quale soluzione per quale risorsa? HAL, Zenodo, Github?

9. Open science e licenze

open science

Perché ?
  • verificare i risultati ottenuti, potenzialmente aumentare la qualità della ricerca
  • riusare per scoprire attraverso studi comparativi, data mining, etc.
  • ridurre i costi della raccolta dati
Qualche riferimento per trovare la licenza giusta e gestire i dati di ricerca:

"Diffondere la ricerca online", CAD - Le Digital Humanities nei progetti di dottorato (Verona, 16-19 luglio 2019)

Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.



Elena Spadini

Université de Lausanne

elena.spadini@unil.ch

elespdn.github.io/io

?






Créez votre site web !