Progettazione e realizzazione di siti web

Appunti del corso

Paolo Sordi — Wed, 16 May 2012 15:38:08 +0000

Download PDF

Giovedì 17 maggio: lezione annullata

Paolo Sordi — Wed, 16 May 2012 15:24:28 +0000

La lezione prevista per il domani, giovedì 17 maggio 2012, è annullata.

Il prossimo appuntamento del corso è martedì 22, alle ore 8 in aula P22.

Lezione di martedì 15 maggio

Paolo Sordi — Thu, 10 May 2012 12:31:04 +0000

Il prossimo martedì 15 maggio 2012, in sostituzione del consueto appuntamento, terrò dalle ore 14 alle ore 17 una lezione dal titolo Edizione o autoedizione? Strumenti e pratiche del Web 2.0 nell’ambito del corso di Editoria online del Corso di Laurea Magistrale in “Informazione, editoria e giornalismo” (Corso di laurea in Scienze della Comunicazione, Università Roma Tre).
La lezione è aperta al pubblico e si svolgerà presso l’aula informatica di Via Valco San Paolo 19, piano terra, Dipartimento di Letterature Comparate, Facoltà di Lettere e Filosofia, Università Roma Tre.

Che cosa è il Web 2.0

Paolo Sordi — Sat, 21 Apr 2012 12:44:01 +0000

Nell’articolo pubblicato nel settembre del 2005, Tim O’Reilly spiega che cosa è il Web 2.0.

Martedì 24 aprile: lezione annullata

Paolo Sordi — Sat, 21 Apr 2012 12:39:45 +0000

La lezione prevista per il prossimo martedì, 24 aprile 2012, è annullata.
Il corso riprenderà regolarmente giovedì 26 aprile alle ore 8 in aula P22.

CSS: lo stile di un articolo

Paolo Sordi — Wed, 18 Apr 2012 14:10:10 +0000


/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* */

body {
font-family: Verdana, Arial, sans-serif;
font-size: 16px;
line-height: 1.5em;
background: #eeff77;
}

h1, h2, h3, h4, h5, h6 {
font-weight: bold;
margin-bottom: 10px;
font-family: Helvetica, Arial, sans-serif;
}

h1 {
font-size: 36px;
}

a {
color: #bb0022;
font-weight: bold;
text-decoration: none;
}

a:hover {
color: #fff;
background-color: #bb0022;
}

#header {
background-color: black;
padding: 20px;
margin-bottom: 20px;
border-bottom: 4px solid red;
}

#header h1 {
color: red;
font-family: Georgia, serif;
text-align: center;
font-size: 48px;
text-transform: uppercase;
}

#content {
background: #fff;
width: 800px;
margin: 0 auto;
border: 1px solid #111;
}

.article {
margin: 20px;
}

.article img {
float: left;
margin-right: 5px;
padding: 5px;
border: 1px solid rgb(119,0,17);
background-color: #eee;
}

#footer {
background-color: #000;
border-top: 4px solid red;
margin-top: 20px;
text-align: center;
color: #fff;
font-size: 10px;
}

HTML: la struttura di un articolo

Paolo Sordi — Wed, 18 Apr 2012 14:07:58 +0000

Internet ci rende stupidi? - Infolet

Infolet

Internet ci rende stupidi?
Se non si contraddicesse pagina dopo pagina, Nicholas Carr avrebbe scritto un libro interessante. O, forse, l’interesse nella lettura di Internet ci rende stupidi? Come la Rete sta cambiando il nostro cervello (Raffaello Cortina Editore, 2011) è direttamente proporzionale al numero delle contraddizioni contenuto in esso. Iscritto d’ufficio nella categoria Pentiti (o se si preferisce Apocalittici), dopo la pubblicazione di un articolo su Atlantic nel 2008, che ha costituito la base sulla quale si è sviluppata la scrittura del libro, Carr è convinto che l’uso intensivo della Rete finirà per atrofizzare il cervello dell’uomo.
Per sostenere la sua tesi, parte da McLuhan e finisce con Kubrick, passando per la letteratura classica dei communication e cultural studies e le neuroscienze e le scienze cognitive, offrendoci un quadro certo non originale, ma scritto con una retorica godibile e degna di David Weinberger, tanto per citare un esponente del versante opposto, quello degli Integrati. Peccato solo che l’excursus non conduca a nessuna delle conclusioni cui l’autore è giunto nel momento in cui ha scoperto di essere incapace “di prestare attenzione a un’unica cosa per più di due minuti” (p. 31). Carr stesso ricorda la sensazione di sopraffazione che nel diciassettesimo secolo investì gli intellettuali del tempo, travolti dal diluvio tipografico tanto da individuare nei libri una delle grandi “malattie” dell’epoca, una malattia che appesantiva il mondo, caricato da sovrabbondanza continua di materiale inutile e superfluo (p. 203).
Nel rimpiangere invece la lentezza e la riflessività della mente gutenberghiana, Carr attribuisce al computer, al Web, e a Google lo status di malattia definitiva, considera la cultura del software l’atto avverato della profezia socratica della perdita della memoria, ma, dopo avere esposto con brillantezza e dovizia di studi come la neuroplasticità del cervello consenta all’uomo di indirizzare e letteralmente strutturare pensieri e azioni che si adattano agli stimoli ambientali, impegnando facoltà e flessibilmente disimpegnandone altre, Carr non riesce a fornire una spiegazione davvero convincente del perché i “pensieri diversi” del Web siano oggettivamente peggiori di quelli prodotti dalla cultura della stampa. Perché la tecnologia cartografica, per esempio, “diede all’uomo una mente nuova e più aperta, in grado di comprendere meglio le invisibili forze che danno forma al suo territorio e alla sua esistenza” (p. 61), mentre i dispositivi GPS intorpidiranno senza speranza i neuroni dell’uomo deputati alla rappresentazione spaziale (pp. 250-251).
E dimentica, l’autore, che il Web non offre solo un cambio di prospettiva (e di soggettiva) nella fruizione, ma anche e soprattutto nella produzione dei contenuti. Semmai, si tratta di capire come questa immensa, collettiva protesi della memoria individuale che è la Rete possa agire, per dirla con le parole del citato Pascal Boyer, da “punto cruciale della trasmissione della cultura” (p. 233), una cultura che si formi non fuori, ma intorno al (e dentro il) Web.
P.S. Dopo essersi concentrato presumibilmente più a lungo di un paio di minuti nella scrittura del libro, Carr confessa (p. 237) di essere tornato a consultare regolarmente feed RSS, provare vecchi e nuovi social network, scrivere post sul suo blog, ascoltare musica da Pandora e guardare video su YouTube. Dice che è proprio molto bello, proprio non potrebbe vivere senza.

Eccetto dove diversamente indicato, i contenuti originali di questo sito sono rilasciati sotto Licenza Creative Commons Attribuzione 3.0.

HTML e CSS Reference

Paolo Sordi — Wed, 18 Apr 2012 14:01:28 +0000

HTML

CSS

Noi (u)siamo la macchina

Paolo Sordi — Wed, 14 Mar 2012 10:59:12 +0000

Clicca qui per vedere il video incorporato.

]]>

La mia pagina web: struttura e stile

Paolo Sordi — Thu, 12 May 2011 15:08:34 +0000

La struttura:

La mia prima pagina web - Il mio sito

Il mio sito web

Titolo della pagina
Data di pubblicazione: 11 maggio 2011

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat.

Video: The Machine is Us/ing Us

Un po' di Web 2.0

Collegamenti

Progettazione e realizzazione di siti web
Corso di Laurea magistrale in informazione e sistemi editoriali
Facoltà di Lettere Tor Vergata

Lo stile:


 body {
	background-color: #000;
	font-family: Helvetica,Arial,sans-serif;
}

 h1, h2, h3, h4, h5, h6 {
	font-family: Georgia, "Times New Roman", serif;
	color: #444444;
	margin: 0;
	padding: 0;
}

 a {
	color: #1963ff;
}

 a:hover {
	text-decoration: none;
	color: #00007f;
}
 div#wrap {
	background-color: white;
	width: 940px;
	margin: 0 auto;
	padding: 0 10px;
	overflow: hidden;
}

 .header {
	background-color: #999999;
	padding: 20px;
	margin-top: 10px;
}

.header h1 {
	font-size: 44px;
	color: #fff;
	text-shadow: #111 1px 1px 1px;
}

.article {
	width: 540px;
	padding: 10px;
	float: left;
}

.article h1 {
	border-bottom: 2px solid #ddd;
	font-size: 28px;
}

.article h2 {
	border-bottom: 2px dotted #ddd;
	font-size: 20px;
	margin-bottom: 10px;
}

.article p.date {
	text-align: right;
	margin: 0;
	padding: 0 0 10px 0;
	font-size: 11px;
	color: #555;
}

.article img {
	float:right;
	padding: 2px;
	border: 1px solid #444;
	background-color: #ddd;
	margin-left: 5px;
}

 .aside {
	width: 360px;
	margin: 10px 0;
	padding: 10px;
	float: left;
	color: #777;
	background-color: #efefef;
}

.aside h1 {
	margin-bottom: 10px;
	padding: 10px;
	color: white;
	background-color: #7f7f7f;
	font-size: 20px;
}

 #readerpublishermodule0 {
	margin-bottom: 10px;
}
 #readerpublishermodule0 h3 {
	font-size: 20px;
	padding: 0px;
	margin: 10px 0;
	list-style-type: none;
}
 #readerpublishermodule0 ul {
	padding: 0px;
	margin: 10px 0;
	list-style-type: none;
}
 #readerpublishermodule0 li {
	margin-bottom: 5px;
	list-style-type: none;
}
 #readerpublishermodule0 .s {
	margin-top: 5px;
	font-size: 11px;
	list-style-type: none;
}
 .delicious-posts h2 {
	margin: 10px 0;
	font-size: 20px;
}
 .delicious-posts h2 a {
	color: #454545;
	text-decoration: none;
	font-size: 20px;
}
 .footer {
	color: white;
	clear: both;
	background-color: #b1b1b1;
}
 .footer h1 {
	color: white;
	text-shadow: #111 1px 1px;
	font-size: 14px;
	padding: 10px;
	margin: 10px 0;
	list-style-type: none;
}
 .footer ul {
	padding: 0 0 10px 5px;
	margin: 10px 0;
	list-style-type: none;
	overflow: hidden;
}
 .footer li {
	font-size: 11px;
	float: left;
	padding: 0;
	margin: 0;
	list-style-type: none;
}
 .footer a {
	margin-right: 5px;
	padding: 5px;
	background-color: #1963ff;
	color: white;
	text-decoration: none;
	display: block;
}

 .footer a:hover {
	background-color: #efefef;
	color: #444;
}

Il risultato finale: