Progettazione e realizzazione di siti web

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:

Tutti gli appunti

Paolo Sordi — Wed, 11 May 2011 08:03:58 +0000

Gli appunti delle lezioni

File lezione 7 aprile

Paolo Sordi — Tue, 12 Apr 2011 06:22:08 +0000

Download

Siti che comunicano – Appunti

Paolo Sordi — Tue, 29 Mar 2011 15:34:08 +0000

siti-che-comunicano-appunti.pdf

Conoscere i tuoi visitatori

Paolo Sordi — Tue, 29 Mar 2011 15:20:05 +0000

L’analisi delle visite al sito, condotta attraverso strumenti come Google Analytics, consente di verificare giorno dopo giorno la solidità strategica del progetto e il conseguimento degli obiettivi prefissati. Meglio ancora, i dati sui visitatori possono orientare in un’ottica realistica e pragmatica la progettazione e la produzione dei contenuti per il sito, la sua impaginazione, le sue funzionalità, le sue tecnologie. Attraverso l’analisi, tra le altre cose puoi:

rilevare da dove provengono i tuoi visitatori, se da una ricerca su Google o da un link presente su un altro sito web; e se da Google, capire quali sono le chiavi di ricerca che li conducono al tuo sito;
verificare quali sono le pagine più lette e quindi i contenuti e gli argomenti più importanti;
accertarti con una buona approssimazione dell’effettiva lettura delle pagine attraverso il dato del tempo medio di navigazione;
scoprire il browser, la risoluzione del monitor e la velocità di connessione dei tuoi visitatori.

Rapporto sulle visite al sito del Corso di Laurea in Informazione e sistemi editoriali: 1 aprile 2010 – 28 marzo 2011 (file PDF).

Esercitazione: simulazione della valutazione del modulo B

Paolo Sordi — Thu, 06 May 2010 15:00:39 +0000

Formstack – Online Form Builder

Una struttura, due presentazioni

Paolo Sordi — Wed, 05 May 2010 20:06:54 +0000

La struttura:

Questo è il mio sito

Questo è un mio post
Pubblicato in Categoria il
5 Aprile 2010
Proin at eros non eros adipiscing mollis. Donec semper turpis sed diam. Sed consequat ligula nec tortor. Integer eget sem. Ut vitae enim eu est vehicula gravida. Morbi ipsum ipsum, porta nec, tempor id, auctor vitae, purus. Pellentesque neque. Nulla luctus erat vitae libero. Integer nec enim. Phasellus aliquam enim et tortor. Quisque aliquet, quam elementum condimentum feugiat, tellus odio consectetuer wisi, vel nonummy sem neque in elit. Curabitur eleifend wisi iaculis ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In non velit non ligula laoreet ultrices. Praesent ultricies facilisis nisl. Vivamus luctus elit sit amet mi. Phasellus pellentesque, erat eget elementum volutpat, dolor nisl porta neque, vitae sodales ipsum nibh in ligula. Maecenas mattis pulvinar diam. Curabitur sed leo.
Proin at eros non eros adipiscing mollis. Donec semper turpis sed diam. Sed consequat ligula nec tortor. Integer eget sem. Ut vitae enim eu est vehicula gravida. Morbi ipsum ipsum, porta nec, tempor id, auctor vitae, purus. Pellentesque neque. Nulla luctus erat vitae libero. Integer nec enim. Phasellus aliquam enim et tortor. Quisque aliquet, quam elementum condimentum feugiat, tellus odio consectetuer wisi, vel nonummy sem neque in elit. Curabitur eleifend wisi iaculis ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In non velit non ligula laoreet ultrices. Praesent ultricies facilisis nisl. Vivamus luctus elit sit amet mi. Phasellus pellentesque, erat eget elementum volutpat, dolor nisl porta neque, vitae sodales ipsum nibh in ligula. Maecenas mattis pulvinar diam. Curabitur sed leo.

Curabitur quis dui sit amet elit luctus aliquam
Aliquam adipiscing libero vitae leo
Maecenas tempus dictum libero
Curabitur quis dui sit amet elit luctus aliquam
Mauris aliquet mattis metus

Proin at eros non eros adipiscing mollis. Donec semper turpis sed diam. Sed consequat ligula nec tortor. Integer eget sem. Ut vitae enim eu est vehicula gravida. Morbi ipsum ipsum, porta nec, tempor id, auctor vitae, purus. Pellentesque neque. Nulla luctus erat vitae libero. Integer nec enim. Phasellus aliquam enim et tortor. Quisque aliquet, quam elementum condimentum feugiat, tellus odio consectetuer wisi, vel nonummy sem neque in elit. Curabitur eleifend wisi iaculis ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In non velit non ligula laoreet ultrices. Praesent ultricies facilisis nisl. Vivamus luctus elit sit amet mi. Phasellus pellentesque, erat eget elementum volutpat, dolor nisl porta neque, vitae sodales ipsum nibh in ligula. Maecenas mattis pulvinar diam. Curabitur sed leo.

Post correlati

Questo è un post correlato
Questo è un altro post correlato
Questo è ancora un post correlato
Questo è un ultimo post correlato

← Post precedente

Post successivo →

Paolo Rossi nulla luctus erat vitae libero. Integer nec enim. Phasellus aliquam enim et tortor.

↑ Home

Lo stile/1:

/* Reset */

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, font, 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 {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
}

ol, ul {
	list-style: none;
}

/* Regole generali */

body {
background-color: #292C37;
color: #8B92A9;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.5em;
}

h1, p {
margin: 0 0 1em 0;
font-weight: normal;
}

a {
color: #DDDFF3;
text-decoration: none;
}

a:hover {
color: #efefef;
text-decoration: underline;
}

/* Layout */

#wrap {
width: 960px;
margin: 0 auto;
position: relative;
}

#content {
position: relative;
overflow: hidden;
}

.article {
width: 620px;
padding: 0 10px; /* 620+10+10=640 */
}

.aside {
position: absolute;
top: 0;
left: 640px;
width: 300px;
padding: 0 10px; /* 640+300+10+10=960 */
}

/* Testata principale */

#masthead {
margin: 50px 0 2em 0;
}

#masthead h1 {
text-align: right;
font-size: 1.25em;
font-weight: normal;
}

/* Contenuto principale */

.article h1 {
color: #efefef;
}

.article ul {
list-style-type: square;
margin: 0 0 1em 20px;
}
.article li {
margin: 0 0 1em 0;
}

/* Contenuto secondario */

.aside ul {
list-style-type: circle;
margin: 0 1em;
}

/* Info autore */

.author-info {
padding: 2em 10px;
}

/* Navigation */

#nav-primary li.nav-previous {
float: left;
}

#nav-primary li.nav-next {
float: right;
}

#nav-primary {
overflow: hidden; /* Per bilanciare il contenimento degli elementi con proprietà 'float'  */
margin: 2em 0;
}

#nav-secondary {
padding: 2em 10px;
}

/* Pié di pagina */

.footer {
margin: 1em 10px;
}

Lo stile/2:

/* Reset */

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, font, 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 {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
}

ol, ul {
	list-style: none;
}

/* Regole generali */

body {
background-color: #001;
font-family: Georgia, "Times New Roman", serif;
font-size: 14px;
line-height: 1.5em;
}

h1, p {
margin: 0 0 1em 0;
}

a {
color: #c33;
text-decoration: none;
}

a:hover {
color: #333;
text-decoration: underline;
}

/* Layout */

#wrap {
width: 960px;
background: white;
margin: 0 auto;
position: relative;
}

#content {
position: relative;
margin-top: 2em;
overflow: hidden; /* Per bilanciare il contenimento degli elementi con proprietà 'float'  */
}

.article {
float: left;
width: 620px;
padding: 0 10px; /* 620+10+10=640 */
}

.aside {
float: left;
width: 300px;
padding: 0 10px; /* 620+10+10+300+10+10=960 */
text-align: right;
}

/* Testata principale */

#masthead  {
background: #F30;
position: relative;
height: 100px;
border-bottom: 10px solid #333;
}

#masthead h1 {
color: #777;
position: absolute;
left: -20px;
top: 1.25em;
font-size: 4em;
color: white;
text-shadow: #000 1px 1px 1px;
}

#masthead a {
color: #ccc;
text-decoration: none;
}

/* Contenuto principale */

.article h1 {
border: 1px solid #930;
border-width: 1px 0;
padding: 1em 0;
margin-bottom: 0;
}

.article ul {
list-style-type: lower-roman;
margin: 0 0 1em 20px;
}
.article li {
margin: 0 0 1em 0;
}

.post-info {
color: #777;
}

/* Contenuto secondario */

.aside h1 {
border: 1px dotted #930;
border-width: 1px 0;
padding: 1em 0;
color:#666;
}

/* Info autore */

.author-info {
color: #888;
background: #efefef;
padding: 10px;
margin: 2em 0 2em 10px;
width: 600px;
}

/* Navigation */

#nav-primary li.nav-previous {
float: left;
margin-left: 10px;
}

#nav-primary li.nav-next {
float: right;
margin-right: 10px;
}

#nav-primary {
overflow: hidden; /* Per bilanciare il contenimento degli elementi con proprietà 'float'  */
width: 640px;
background: black;
}

#nav-primary a:hover {
color: #efefef;
}

#nav-secondary {
position: absolute;
top: 0;
left: 0;
}

#nav-secondary a {
color: white;
background: black;
padding: 10px;
display: block;
}

#nav-secondary a:hover {
color: black;
background: white;
text-decoration: none;
}

.footer {
margin: 1em 0;
padding: 1em;
border-top: 1px solid #777;
}

CSS: box model e posizionamento

Paolo Sordi — Thu, 22 Apr 2010 20:51:15 +0000

Il box model

Il box model dei Cascading Style Sheets prevede che lo spazio occupato da un elemento blocco sia pari alla sua ampiezza e altezza (proprietà width e proprietà height) più la sua spaziatura interna (proprietà padding) più i suoi bordi (proprietà border) più i suoi margini (proprietà margin).

Il posizionamento

Per impostazione predefinita, il posizionamento di un elemento blocco è statico (position: static). Questo significa che se i fogli di stile non prevedono nulla di diverso, gli elementi all’interno di una pagina HTML si susseguono sequenzialmente uno dopo l’altro, ciascuno su una nuova linea, secondo l’esatto ordine in cui compaiono nella struttura del documento.

Ogni elemento posizionato è collocato con riguardo al suo elemento blocco contenitore, che opera da punto di riferimento per il posizionamento dell’elemento in esso contenuto.

Posizionamento relativo

Se la sua posizione è relativa (position: relative), l’elemento viene spostato (si dice: offset) dalla sua naturale collocazione nella sequenza del documento HTML, preservando comunque lo spazio che lo precede. Questo perchè la sua posizione, regolabile attraverso le proprietà top, right, bottom, left, è calcolata rispetto al punto in cui l’elemento compare nella struttura di marcatura. In altre parole, il blocco contenitore di un elemento posizionato relativamente è sempre il blocco desumibile dalla struttura.

In ogni caso, il posizionamento relativo comporta la possibile sovrapposizione dell’elemento con altri elementi, siano essi posizionati o meno: sta al progettista delle regole di stile armonizzare i posizionamenti o stabilire le corrette sovrapposizioni attraverso la proprietà z-index.

Posizionamento assoluto

Se la sua posizione è assoluta (position: asolute), l’elemento viene rimosso completamente dalla sua naturale collocazione all’interno del flow del documento HTML. In questo caso, il blocco contenitore che funziona da punto di riferimento per il posizionamento (regolabile sempre attraverso le proprietà top, right, bottom, left) è il più immediato elemento padre che abbia a sua volta un posizionamento relativo o assoluto. Se non esiste un elemento contenitore così posizionato, il blocco contenitore sarà allora l’elemento radice (root) del documento, vale a dire l’elemento HTML: il blocco contenitore partirà quindi dall’angolo superiore sinistro del documento, a prescindere dai margini assegnati all’elemento BODY.

Il posizionamento assoluto comporta la sovrapposizione dell’elemento con altri elementi, siano essi posizionati o meno: sta al progettista delle regole di stile armonizzare i posizionamenti o stabilire le corrette sovrapposizioni attraverso la proprietà z-index.

CSS2 Reference

Paolo Sordi — Mon, 19 Apr 2010 17:04:42 +0000

www.w3schools.com/css/css_reference.asp

Day in the Life of the Digital Humanities 2010

Paolo Sordi — Wed, 17 Mar 2010 19:04:15 +0000

Domani, giovedì 18 marzo 2010, si terrà il secondo Day in the Life of the Digital Humanities (Day of DH), un progetto che vuole documentare una giornata tipo di un (una) umanista digitale, chiunque e qualunque cosa esso sia.

Su un blog personale creato ad hoc, docenti, ricercatori, studiosi e professionisti racconteranno il loro ‘giorno nella vita’ con testi e fotografie, dando vita a una narrazione collettiva che sarà successivamente aggregata attraverso feed dei post e dei commenti, tag e link.

Essendo uno degli obiettivi il coinvolgimento di tutta la comunità, studenti compresi, vi invito a partecipare (inter)attivamente al progetto, navigando e commentando il 18 stesso, o nei giorni immediatamente successivi, il mio blog (e non solo).
L’idea potrebbe essere quella di costruire, nei vostri commenti ai singoli post, un racconto parallelo della vostra giornata di studenti di un corso di laurea legato a doppio filo con l’era digitale e le nuove tecnologie.
Sarà tra l’altro un’occasione per esercitarsi sul campo con le modalità di comunicazione e interazione del cosiddetto Web 2.0 di cui abbiamo trattato nel primo modulo del nostro corso.

La lingua ufficiale del progetto è l’inglese, ma sentitevi liberi di partecipare scrivendo in italiano.