Progettazione e realizzazione di siti web

Leggi tutto »

Pubblicato da Paolo Sordi e archiviato in Realizzazione
I commenti sono chiusi

La struttura:

<div id="wrap">

<div id="masthead" class="header">
<h1>Questo è <a href="#">il mio sito</a></h1>
</div>

<div id="content">

<div class="article" id="post-18">

<h1>Questo è un mio post</h1>
<p class="post-info">Pubblicato in <a href="#">Categoria</a> il
5 Aprile 2010</p>
<p>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.</p>
<p>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.</p>
<ul>
  <li>Curabitur quis dui sit amet elit luctus aliquam</li>
  <li>Aliquam adipiscing libero vitae leo</li>
  <li>Maecenas tempus dictum libero</li>
  <li>Curabitur quis dui sit amet elit luctus aliquam</li>
  <li>Mauris aliquet mattis metus</li>
</ul>
<p>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.</p>
</div>

<div class="aside">

<h1>Post correlati</h1>
<ul>
<li><a href="#">Questo è un post correlato</a></li>
<li><a href="#">Questo è un altro post correlato</a></li>
<li><a href="#">Questo è ancora un post correlato</a></li>
<li><a href="#">Questo è un ultimo post correlato</a></li>
</ul>
</div>

</div>

<div id="nav-primary" class="nav">
  <ul>
    <li class="nav-previous"><a href="#">&larr; Post precedente</a>
    </li>
    <li class="nav-next"><a href="#">Post successivo &rarr;</a></li>
  </ul>
  </div>

<div class="author-info">
<p>Paolo Rossi nulla luctus erat vitae libero. Integer nec enim. Phasellus aliquam enim et tortor. </p>
</div>

<div id="nav-secondary" class="nav">
<a href="#">&uarr; Home</a>
</div>

<div class="footer" id="site-info">
<p>
&copy; Paolo Rossi.
Powered by <a href="#">WordPress</a>.
</p>
</div>

</div>

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;
}

Pubblicato da Paolo Sordi e archiviato in Realizzazione
I commenti sono chiusi

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.

Pubblicato da Paolo Sordi e archiviato in Realizzazione
I commenti sono chiusi

www.w3schools.com/css/css_reference.asp

Pubblicato da Paolo Sordi e archiviato in Realizzazione
I commenti sono chiusi

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.

Pubblicato da Paolo Sordi e archiviato in Avvisi
I commenti sono chiusi

• Tag ordinati alfabeticamente
• Tag ordinati per funzione

Pubblicato da Paolo Sordi e archiviato in Realizzazione
I commenti sono chiusi

Lo studio del Poynter Institute sulla lettura dei giornali, su carta e on line. Sul web, i lettori metodici sono tanti quanto gli scanner: tutte le slide (file PDF) utilizzate nel corso della presentazione dello studio, avvenuta nel mese di marzo 2007.

Pubblicato da Paolo Sordi e archiviato in Progettazione
I commenti sono chiusi

La separazione logica tra struttura e presentazione, tra HTML e CSS, sgancia i contenuti del Web dal contesto di produzione. Un articolo di un giornale on line, un post di un blog, una stessa completa pagina web non sono altro che una strutturazione (iper)testuale di titoli, paragrafi, liste, immagini, video e link: grazie ad altri linguaggi come XML, la macchina del cosiddetto Web 2.0 può esportare questa struttura e renderla disponibile sotto altri formati per altre applicazioni, a prescindere dalla loro sorgente e dalla loro originaria destinazione.

Provate ad aggregare feed RSS su applicazioni come Google Reader o Bloglines oppure salvate pagine web su Delicious e condividete nei commenti a questo post gli indirizzi pubblici dei vostri account.

Pubblicato da Paolo Sordi e archiviato in Progettazione
7 Commenti »

Introduzione al Web 2.0 – Slide (file PDF)

Pubblicato da Paolo Sordi e archiviato in Progettazione
I commenti sono chiusi

Da linguaggio di marcatura destinato a rappresentare la struttura logico-semantica di un documento web, l’HTML si trasforma (e degenera) in linguaggio di presentazione visuale, tradendo le originarie intenzioni di Tim Berners Lee. La codifica strutturale viene abbandonata e il risultato è una massa inestricabile di tag e attributi destinati soltanto alla resa tipografica del documento. Quello che segue è un esempio di HTML del 1999 tratto da un quotidiano on line:

<body>

<TABLE BORDER="0" CELLPADDING="4" CELLSPACING="0" WIDTH="100%">
<TR>
<TD WIDTH="350" VALIGN="TOP" BGCOLOR="#EFEFEF"><FONT FACE="Arial,Helvetica"><FONT SIZE="2"><I>
Dopo i dolci avvelenati dagli ecoterroristi <BR>&amp;amp;egrave; ancora psicosi nei supermercati</I></FONT><BR><BR>
<FONT SIZE="5"><B>Panettoni, controlli<BR>in tutta Italia</B></FONT><BR>
<FONT SIZE="2"><I></I></FONT><BR><BR>
<FONT SIZE="1" FACE="Arial,Helvetica">
<I><B></B></I></FONT>
</TD>
</TR>
<TR>
<TD WIDTH="350" VALIGN="TOP" BGCOLOR="#EFEFEF">
<HR ALIGN="LEFT" SIZE="1" NOSHADE>
<FONT FACE="Arial,Helvetica">
<B>BOLOGNA</B> - Erano effettivamente avvelenati i panettoni degli ecoterroristi. Lo hanno stabilito gli esami tossicologici disposti dalle procure di Bologna e Firenze, le citt&amp;amp;agrave; nelle cui sedi Ansa erano stati ieri recapitati i due dolci con un volantino firmato Alf, l'Animal liberation front che ha preso di mira i prodotti Nestl&amp;amp;egrave;. <BR><BR>
Dall'esame dei panettone, le cui confezioni presentavano fori di ago, &amp;amp;egrave; risultato che il veleno iniettato era tale da provocare forti disturbi. E cos&amp;amp;igrave; resta alta la psicosi nei negozi di tutta Italia presi d'assalto in questi giorni per le festivit&amp;amp;agrave; natalizie. Per il momento i panettoni Motta e Alemagna (entrambi marchi del gruppo Nestl&amp;amp;egrave;) sono stati ritirati in molte rivendite.<BR><BR>
...
<BR>
(<I>11 dicembre 1998</I>)<BR>&amp;amp;nbsp;</FONT></TD>
</TR>
</TABLE>

</body>

Pubblicato da Paolo Sordi e archiviato in Progettazione
I commenti sono chiusi