REALIZZARE BLOG:esplorare lo spazio - 2

Continuiamo a esplorare lo spazio che Blogger ci mette a disposizione o, meglio, esploriamo gli strumenti con i quali modifichiamo lo spazio del blog. Questi sono essenzialmente due:

• l'editor del modello, che è essenzialmente un editor in cui si inserisce il codice HTML (o XML) con cui si descrivono le pagine del blog
• l'editor dei post, con il quale si inseriscono gli articoli che saranno riportati nel blog (generalmente, in ordine cronologico inverso)

Cominciamo a usare il primo per scrivere un po' di codice HTML

e salviamo il modello così creato.

Passiamo ora al secondo, scriviamo un post di prova e pubblichiamolo

A questo punto non ci resta che verificare cosa è successo visualizzando il blog:

Il risultato non ci deve sorprendere perché ci propone esattamente quanto da noi descritto con il codice HTML (un box, la divisione, di colore argento). del post nessuna traccia. E non poteva essere diversamente: nel codice del modello non abbiamo in alcun modo indicato la presenza del testo dei post.

REALIZZARE BLOG:esplorare lo spazio - 1

Nell'incontro precedente abbiamo occupato uno spazio blog presso Blogger. Adesso cerchiamo di effettuare un primo giro di ricognizione all'interno di questo nostro spazio.
Per prima cosa dobbiamo entrare andando all'indirizzo www.blogger.com/ ed effettuando l'accesso mediante le nostre due chiavi di ingresso con le quali ci siamo registrati, ossia user name e password.

Si apre la nostra bacheca nella quale sono riportati i nomi di tutti i nostri blog (possiamo averne più di uno o essere scrittori di vari blog, anche non nostri). Scegliamo la funzione impostazioni.

Le impostazioni ci consentono di fissare tutta una serie di parametri sui quali per ora non spendo nemmeno una parola.








Preferisco occuparmi subito della funzione modello che si presenta come un editor nel quale è visibile il modello del nostro blog, scritto in un misto di HTML e di un linguaggio specifico di Blogger. Dato per scontato di conoscere abbastanza bene l'HTML, noi ci occuperemo prevalentemente delle istruzioni del linguaggio specifico di Blogger.




Cancelliamo tutto il modello esistente e scriviamo quattro righe





Clicchiamo su Visualizza blog e sorpresa ...compare il nostro modello. Anzi, solo una parte. Infatti, mancano quasi interamente le prime due righe. Per l'esattezza, manca una striscia di altezza pari a 30 pixel che Blogger utilizza per visualizzare una barra orizzontale con un suo menu di comandi.

Poco male. sappiamo che nel disegnare la pagina dovremo lasciare libera in alto una striscia di 30 pixel.vedremo poi come fare

Nell'incontro precedente ti avevo suggerito di inserire dei post di prova. Più che altro per verificare che in realtà, in assenza di un modello (lo abbiamo cancellato), i post non si vedono. Si vede solo quello che noi scriviamo nel modello. Possiamo scrivere una pagina in HTML e vedremo il risultato visualizzando il blog, ma senza alcuna traccia dei nostri post. Se sei abbastanza esperto di HTML puoi divertirti a farlo. Nel prossimo incontro scriveremo un post e verificheremo quanto ti ho detto.

REALIZZARE BLOG:prendere posto

Potrei descrivere quello che è necessario fare per realizzare un blog personalizzato in maniera del tutto teorica, ma non voglio fare un discorso astratto. Anche perché, a differenza delle pagine di un sito, che possono generalmente essere sviluppate e testate sul proprio PC, prima di trasferirle sull'host, le pagine del blog devono appoggiarsi a uno specifico motore per i blog.
Chi fosse quindi interessato a proseguire questa lettura farebbe bene a procurarsi il proprio spazio presso Blogger. Tanto è gratuito. Allora vediamo come prendere posto.

Per ottenere il proprio spazio presso Blogger si deve andare su http://www.blogger.com/ . Non starò a farla lunga sull'intera procedura perché è molto semplice e si auto-spiega. Mi limito a dire che (attualmente) comparirà la seguente pagina:

Se si è già in possesso di un account con Google, allora si deve accedere introducendo i propri dati (il solito user name e la solita password) in alto a destra. Si seguirà così un percorso semplificato. Altrimenti, si devono seguire tre passi guidati: creare un account Google, scegliere il nome del blog e scegliere un modello.

Non ripropongo tutto il percorso. Mi limito a dire che dovrai scegliere la cosa più semplice (cioè il blog ospite di Blogger e non di un altro server) e uno qualsiasi dei layout proposti. Tanto noi non lo utilizzeremo.

Una volta ottenuto il blog (nel caso del mio esempio l'indirizzo è
http://fl-laboratorio.blogspot.com/ ; il tuo sarà del tipo http://nomescelto.blogspot.com/) entriamo nel Layout e quindi in Modifica HTML (v. figura) e passiamo a modello classico cliccando sul link in basso a sinistra.

Se ti verrà proposto un modello campione da scegliere, scegline uno qualsiasi. Tanto noi lo cancelleremo per fare il nostro. In questo modo:

1. entra nella modalità personalizzazione o nella tua bacheca
2. scegli modello (non è più layout) e quindi Modifica HTML
3. seleziona e cancella tutto il contenuto del codice HTML, scrivi al suo posto qualche carattere qualsiasi e salva modifiche al modello

A questo punto il nostro blog è invisibile. In realtà se ci sono dei post (ossia degli articoli) già introdotti non andranno persi. Semplicemente non sono visibili. Divertiti a inserire dei post di prova (possiamo poi sempre cancellarli in qualsiasi momento). Al tuo indirizzo di blog comparirà una pagina vuota. Penseremo a far riapparire i tuoi post dopo il prossimo incontro.

***

INDICE

COME REALIZZARE UN BLOG

Su questo stesso blog sto riportando alcuni miei appunti sulla scrittura di un sito (v. COME CREARE UN SITO). Se non si vuole creare un vero e proprio sito e si preferisce realizzare un proprio blog, possono essere utili queste mie note che articolerò in una breve serie di piccoli incontri, così come sto facendo per la costruzione di un sito.
Vedremo come un blog possa essere organizzato per svolgere oltre alla sua funzione istituzionale anche quella di sito personale, seppur con qualche limitazione. Inoltre, nulla vieta di inserire la funzione di blog all'interno del proprio sito. Esamineremo anche questo caso.

Prima di procedere risponderò alle domande: "Cosa vuol dire blog? Che cos'è e come è fatto?".

Blog è la contrazione di web-log (v. Wikipedia). In inglese il significato principale di log è ceppo, ciocco, ma logbook è il giornale di bordo delle navi. In informatica con il termine log si indica la registrazione sequenziale delle attività di un computer. Blog quindi significa giornale della rete o giornale in rete. Un giornale che riporta sequenzialmente, nell'ordine cronologico di inserimento, articoli scritti da uno o più autori (l'articolo più recente in testa).

Nella sua forma più semplice un blog può essere costituito da una sola pagina di un qualsiasi sito, aggiornata con l'aggiunta, ogni volta in testa, di un nuovo brano, che si va quindi a sommare a tutti quelli precedenti. Una modalità brutale, poco efficiente (la pagina tende a diventare lunghissima, con tempi di caricamento sempre più lunghi) e per niente efficace (difficoltà di aggiornamento tipica di un qualsiasi sito, che richiede operazioni non proprio del tutto banali).

Per consentire anche a un profano di realizzare efficacemente ed efficientemente un blog personale, che abbia oltre alla facilità di aggiornamento tutta una serie di altre funzioni (per esempio, archiviazione e ricerca), sono stati sviluppati dei motori, ossia de prodotti software, che si occupano di tutta la gestione di uno o di tanti blog, mettendo a disposizione dell'utente una semplice interfaccia.

Alcuni fornitori offrono, a pagamento o gratuitamente, servizi di blog. La fornitura comprende lo spazio occupato dal blog e l'uso del motore e delle sue funzionalità. Generalmente, mettendo a disposizione un certo numero di formati predefiniti e più o meno personalizzabili.

Di questi fornitori ce ne sono molti e basta interrogare Google o altro motore di ricerca per trovarne per tutti i gusti. Il più famoso, e ormai diventato uno standard, è Blogger

gestito, già da alcuni anni, da Google. Il blog che stai leggendo è ospitato da Blogger.

Questo e i post successivi sull'argomento (v. indice in fondo) illustrano un modo di usare Blogger. Quanto dirò è facilmente applicabile ad altre realtà.

Ultimamente, Blogger ha introdotto dei formati predefiniti, che chiama layout, e che possono essere personalizzati mediante una facile interfaccia. Per ottenere una personalizzazione più spinta e modificare sostanzialmente il formato del blog è però necessario mettere le mani in un codice più complesso di quello HTML che noi già conosciamo (si tratta di xml). Questo blog è stato impostato utilizzando uno dei layout predefiniti. Non credo che lo farò più: se Blogger continuerà ancora a supportare la modalità originaria, quella che definisce modello classico, utilizzerò quella, come già fatto in precedenti occasioni, piuttosto che i layout.

Nei successivi incontri ci riferiremo esclusivamente al modello classico.

Prerequisiti: uso disinvolto del PC, capacità di navigare e di registrarsi a servizi web (in particolare a Google) e un minimo di conoscenze di HTML (almeno a livello di quanto illustrato in COME CREARE UN SITO).

INDICE

1. REALIZZARE BLOG: prendere posto
   
2. in preparazione

***

Minori e aggiunti

Le matrici minori

Prendiamo in esame la matrice A_5x7 di figura. Se prendiamo, per esempio, le prime 4 righe e le prime 2 colonne, gli 8 elementi individuati costituiscono una matrice, sottomatrice o matrice minore della matrice data. Gli elementi individuati dalle restanti righe e colonne costituiscono anch'essi una matrice detta matrice complementare della matrice minore.
Non è assolutamente necessario che le righe o le colonne prescelte siano contigue e inizino dalla prima riga o dalla prima colonna. Si veda, per esempio, la matrice di quest'altra figura in cui si sono scelte le righe 2 e 4 e le colonne 3,5 e 6.

Risulta una matrice minore M_2x3 e una matrice ad essa complementare, C_3x4.
In generale, data una matrice A_mxn, è possibile individuare matrici complementari M_pxq, con 1≤p≤m e 1≤q≤n. Le matrici complementari hanno dimensioni m-p ed n-q. Affinché la matrice complementare esista è necessario che la matrice minore abbia dimensioni p<m e q<n.

I minori

Data una generica matrice A_mxn, per ciascuna delle sue matrici minori quadrate di ordine p, con p minore o uguale del minore tra m e n, è possibile definire il rispettivo determinante.

A questo determinante diamo il nome di minore di ordine p della matrice.
Se, per esempio, prendiamo la matrice

possiamo definire 3x4 = 12 minori del primo ordine, ossia i determinanti

│1│, │3│, │4│, │7│, │5│, │2│, │4│, │-3│, │-2│, │9│, │5│, │2│ .

Quanti e quali sono i minori del secondo ordine della matrice data?
Ricordandosi il calcolo combinatorio, 2 righe tra 3 e 2 colonne tra 4 possono scegliersi rispettivamente in

modi diversi. Quindi i minori di ordine 2 sono 3x6 = 18. Il primo e l'ultimo di tali minori sono:

Si diverta il lettore a individuare e calcolare gli altri 16.

Quanti e quali sono i minori di ordine 3?
Siccome p = m, le righe possono scegliersi in un solo modo. Il numero di modi in cui si possono scegliere le 3 colonne tra le 4 disponibili è dato dal numero di combinazioni di classe 3 di 4 elementi, ossia 4. E sono:

***

SEGUE

INDICE

CREARE SITI:divisioni sottosopra

Nell'incontro precedente si è visto che divisioni con posizione relativa possono andare a finire dietro a divisioni con posizione assoluta e in maniera non del tutto controllata. Nel caso di due divisioni posizionate in maniera assoluta con una certa sovrapposizione, la divisione definita dopo l'altra all'interno del box che le contiene entrambe assumerà la posizione superiore e coprirà in parte o del tutto la prima.

Vediamo cosa succede esattamente con un esempio.
Scriviamo il codice riportato in figura in cui si vede che la divisione di classe assoluto_2 (gialla) è definita dopo quella di classe assoluto_1 (verde).

Come risultato si vede che la divisione gialla ricopre in parte quella verde perché i due box sono parzialmente sovrapposti (come si può vedere dalle definizioni di stile) e assoluto_2 è stata definita dopo (e quindi prevale).

Se scambiamo l'ordine della definizione all'interno di body la divisione verde copre in parte la gialla.

Indubbiamente basarsi sull'ordine di definizione può risultare veramente poco pratico (specie se i box sono molti e vogliamo creare degli effetti di sovrapposizione). Come possiamo fare?

Definizione della "quota"

Per definire la quota relativa dei vari box, il linguaggio mette a disposizione una definizione di stile specifica, detta z-index. L'uso è indicato nell'esempio riportato nelle due figure seguenti.

I box con z-index superiori si colollocano sopra a quelli con z-index inferiori. Di solito si preferisce non usare indici contigui per poter successivamente inserire dei livelli intermedi. Nell'esempio ho usato i livelli 5 e 10.

ARRIVEDERCI

***

INDICE

CREARE SITI:posizioni relative e assolute

TORNA INDIETRO

Abbiamo visto in precedenza che in mancanza di una esplicita dichiarazione nell'elemento di stile le divisioni (e in generale qualsiasi tipo di box) hanno dimensioni relative, ossia massima larghezza e minima altezza (infatti, se un box non ha contenuto la sua altezza è 0). Per ottenere un box delle dimensioni desiderate occorre precisare sia la larghezza che l'altezza (per es., width:600px;height:100px;).
Come si controlla la posizione di un elemento?
In mancanza di specifiche istruzioni, gli elementi vengono posizionati uno sotto all'altro, nello stesso ordine in cui sono definiti nel box body, a partire sempre dalla posizione 0;0 (angolo in alto a destra).
Quando si vuole predeterminare l'impaginazione, questa soluzione è inaccettabile perché il risultato può essere imprevedibile e dipendere dalle dimensioni dello schermo e da quelle della finestra. Si rende perciò indispensabile definire sia la posizione del box che le sue dimensioni. Come?

Si riporta qui di seguito un esempio di codice HTML e del risultato che si ottiene. Si osservi che viene definita la posizione dell'angolo superiore sinistro di ogni elemento (p. es., position:absolute;left:30px;top:20px;).

Coesistenza di assoluto e relativo

Definizioni relative e assolute possono coesistere, ma con cautela. Infatti, se si definissero box assoluti e box relativi allo stesso livello nell'albero padre-figli , si rischierebbe di ottenere il risultato illustrato in figura, in cui si vede come divisioni con posizione relativa vanno a finire dietro a divisioni con posizione assoluta.

Per evitare che ciò possa accadere è opportuno che eventuali box con posizione relativa siano definiti solo all'interno di elementi con posizione assoluta e mai coesistere con elementi assoluti allo stesso livello.

***

PROSSIMO INCONTRO

INDICE

CREARE SITI:dimensioni relative e assolute

TORNA INDIETRO

Abbiamo cominciato a gestire lo spazio mediante il ricorso all'elemento divisione. Ogni divisione ha le sue dimensioni. Queste però non sempre vengono prestabilite. Se nell'elemento di stile che definisce una divisione non vengono precisate le dimensioni orizzontale e verticale della divisione, questa tenderà a occupare tutto lo spazio orizzontale possibile, fino al massimo consentito dal box che contiene la divisione.
Facciamo un esempio.
Scriviamo con blocco note il semplice codice riportato in figura



Il codice definisce una divisione (indicata come class="contenitore") che ne contiene due (class="testo"). Per poterle ben distinguere le abbiamo distanziate con interlinee (<br />), inseriti prima, dopo e tra le due divisioni di testo. Questo è un volgare trucco da non usare mai: vedremo successivamente come distanziare i bordi dei vari box, sia verticlmente che orizzontalmente.
Il risultato di questo codice è riportato in figura:

Si osservi come le divisioni interne (quelle gialle), le cui dimensioni non sono definite, occupino tutto lo spazio orizzontale consentito, mentre invece verticalmente si sviluppano quel tanto che basta a contenere il testo.
Della divisione contenitore (il box verde) è definita solo la larghezza (width: 300px;), che quindi è assoluta, mentre l'altezza non è definita (e diremo che è relativa).

Vedremo nella prossima puntata come controllare la posizione dei box.

***

INDICE

CREARE SITI:gestire lo spazio

TORNA INDIETRO

Le divisioni

Ora ci interessa capire se e come poter suddividere lo spazio di una pagina. L'intera pagina è costituita dall'elemento corpo (body). Lo spazio eventualmente individuato da un elemento è detto box (scatola). Body è il box genitore e li contiene tutti e ogni box può contenerne altri, come delle scatole cinesi.

Uno degli elementi più comunemente usati per definire uno spazio (box)all'interno della pagina è l'elemento divisione, delimitato dai marcatori div e /div.

Un esempio dell'uso dell'elemento divisione lo si ha in figura:

dove si possono vedere due divisioni: la prima per il titolo, la seconda per il corpo. L'effetto è quello riportato qui sotto:

Notiamo le seguenti particolarità relative allo stile dei due box:

1. il testo del titolo è allineato al centro (text-align: center;), il colore di sfondo è giallo (background-color: yellow;), il colore dei caratteri è rosso (color: red;)
   
2. lo sfondo del secondo box è rosa
   
3. l'elemento p all'interno del secondo box presenta un rientro del testo sia a sinistra che a destra (padding-left: 30px; padding-right: 30px;), oltre ad essere in corsivo (italic).

Fa già una bella differenza!

Alla prossima:

***

INDICE

CREARE SITI:l'aspetto conta

TORNA INDIETRO

Un po' di stile

Diamo un'occhiata al seguente codice:

Rispetto al documento precedentemente scritto ci sono due novità

1. nell'elemento head è stato aggiunto un nuovo tipo di elemento. detto di stile, con i suoi due marcatori style e /style, al cui interno è riportata una certa informazione


2. nel primo elemento paragrafo, precisamente nel marcatore p, è stato aggiunto
   class="tit1"

Esaminiamo cosa è scritto all'interno dell'elemento di stile:

.tit1 {font-family: Arial; font-size: 16px; font-weight: bold; color: red; text-align: center; background-color: yellow;}

Si può subito notare che tit1, dopo il punto, è il valore dell'attibuto class nel marcatore dell'elemento paragrafo. Quanto indicato tra le parentesi {} si riferisce alla classe di elementi tit1. Tutti gli elementi indicati come appartenenti alla classe tit1 avranno le caratteristiche di stile riportate tra le parentesi.

Diamo uno sguardo al risultato:

Come si vede, il titolo ha cambiato notevolmente stile: tipo di carattere (font-family: Arial), dimensione (font-size: 16px, ossia 16 pixel), grassetto (font-weight: bold), colore del carattere (color: red), colore di sfondo della riga (background-color: yellow), allineamento (text-align: center).

Nel vecchio HTML, ancora accettato dai browser, molte delle informazioni di stile erano mischiate al testo, sia mediante l'uso di attributi degli elementi, che con l'uso di elementi di stile.

Adesso si tende a separare nettamente il contenuto testuale, che è compreso negli elementi contenuti nel corpo (body), dalll'informazione di stile, che è compresa nell'elemento di stile (style) , all'interno dell'intestazione (head).

Prossimamente vedremo come ordinare lo spazio della pagina.

***

INDICE

CREARE SITI:inoltriamoci nell'HTML

TORNA INDIETRO

Per andare a capo

Il risultato della prima prova può indurci a credere che basti cambiare suffisso nel nome del documento (da prova1.txt a prova1.html) per ottenere quanto voluto.

Facciamo un'altra prova per toglierci subito ogni illusione.

Modifichiamo prova1.txt con Blocco note scrivendo una frase con molti spazi tra parole e su almeno due righe. Salviamolo sia come .txt che come .html.

La sorpresa ce l'abbiamo quando apriamo il nuovo documento prova1.html cliccando sulla sua icona:

Visto! Le sequenze di spazi e anche le andate a capo sono state sostituite da un singolo spazio. Perché?

Il motivo è semplice: il browser, che ha anche il compito, tra altre cose, di interpretare e presentare i documenti HTML, riceve un documento con suffisso .html e quindi lo traduce come se fosse scritto in HTML. E in HTML si può inserire solo uno spazio e occorre indicare l'andata a capo con un preciso comando, assente nel nostro testo.

Occupiamoci dell'andata a capo (degli spazi multipli ci occuperemo in altro momento).

Per andare a capo è possibile usare due elementi del linguaggio:

Con il primo (br per break) si interrompe la riga andando a capo all'interno dello stesso paragrafo, con il secondo (p per paragrafo) si delimita un intero paragrafo, quindi con andata a capo all'inizio e alla fine.
Facciamo un esempio, creando un secondo documento, prova2.txt e salvandolo anche come prova2.html.

L'apertura di prova2.html evidenzia il risultato ottenuto.

Un semplice documento completo

Anche se un browser interpreta qualsiasi documento di testo archiviato con il suffisso .html come un documento HTML, è buona prassi strutturare il documento secondo alcune semplici regole (e con un po' d'ordine, non strettamente necessario, per facilitarne la lettura). Come nell'esempio di figura:

L'intero documento è l'elemento html, delimitato dai marcatori html e /html. Esso comprende due elementi:

1. l'intestazione, delimitata dai marcatori head e /head


2. il corpo, delimitato dai marcatori body e /body

L'intestazione, a sua volta, comprende l'elemento titolo, delimitato da title e /title.

Il corpo contiene alcuni elementi paragrafo e, all'interno di uno di questi, un elemento di interruzione.

Si osservi che:

• esistono elementi pieni (all'interno c'è del testo o altri elementi), caratterizzati da un marcatore iniziale e uno finale. Per esempio html (e /html), head, title, body, p


• esistono elementi (per ora ne abbiamo visto solo uno, ma ce ne sono altri) vuoti, come br /


• i marcatori sono individuati da < >.


• abbiamo scritto in maniera ordinata, ma avremmo potuto scrivere tutto in un'unica stringa senza interruzioni. Il browser fa caso solo ai marcatori.

Il risultato nella finestra del browser è il seguente:

Notiamo subito che la barra superiore del browser riporta quanto scritto nell'elemento title. Il resto si spiega da solo.

Fin qui i risultati sembrano molto modesti. Caratteri piccoli e neri (tutti in Times New Roman). Sfondo bianco. Non si riesce a ottenere niente di meglio?

Lo vedremo nel prossimo post sull'argomento.

***

INDICE

CREARE SITI:primi passi

TORNA INDIETRO

Sistemiamo la scrivania

Per prima cosa, attrezziamoci per lavorare sistemando sulla nostra scrivania virtuale (desktop) un'icona di collegamento (link) a Blocco note e una cartella che chiamiamo SITO (v. figura).

***

La prima prova

Apriamo Blocco note e scriviamo una frase

e salviamo ora quanto fatto con il nome prova1 nella cartella SITO. Possiamo verificare che nella cartella compare un'icona con il nome prova1.txt.

Proviamo a salvarlo anche come documento html. Nella finestra salva con nome, scegliamo di salvarlo in SITO come tutti i file, con il nome prova1.html.

Nella cartella SITO, accanto a prova1.txt comparirà l'icona del documento html.

Se adesso clicchiamo su questa icona, si aprirà la finestra del browser (questa volta ho usato Firefox invece del solito Internet Explorer):

Sorpresa! Nella finestra del browser compare la pagina di prova scritta. Allora, a cosa serve l'HTML? Sappiamo che Blocco note produce puro testo, senza alcuna formattazione del testo. Figuriamoci poi colore o immagine di sfondo, zone colorate, blocchi di testo, grassetto, corsivo, dimensione e tipo dei caratteri. L'HTML ci consente di superare i limiti di un editor di puro testo.

Non si può usare un editor più evoluto, come per esempio Word? Purtroppo la formattazione usata da Word (e dagli altri) non è compatibile con lo standard impiegato in Internet

Come faccio a scrivere in HTML? In che cosa consiste questo linguaggio?

Lo scopriremo dal prossimo incontro.

***

INDICE

INFORMATICA DEL WEB

INDICE

COME CREARE UN SITO

COME REALIZZARE UN BLOG

CREARE SITI:prime domande

TORNA ALL'INDICE

Cos'è un sito?

I documenti che noi produciamo nel nostro PC, testi scritti con Word, tabelle generate con Excel, foto e video trasferiti dalle nostre fotocamera e videocamera digitali, disegni fatti con Corel Draw, li archiviamo in apposite cartelle nel nostro stesso PC. Oppure le trasferiamo ad un altro PC, inviando una e-mail o usando uno stick USB di memoria flash (i dischetti sono ormai reperti archeologici). Finiscono comunque in una cartella di un computer.

Un sito è una cartella di documenti, generalmente accesibile a tutti, in un computer collegato alla rete (il web o, meglio, il world wide web - www) in una qualsiasi parte del mondo.

Ciascuno dei testi, per esempio scritti in Word, contenuti in una delle cartelle del nosto computer personale ha un nome (per esempio, invito_a_cena.doc) caratterizzato dalla presenza del suffisso .doc. Per accedere al singolo documento ho due possibilità:

• aprire Word e chiedergli poi di caricare il documento
• cliccare sul nome o sull'icona del documento

In questo secondo caso il sistema riconosce dal suffisso la natura del documento (in questo caso una lettera scritta con Word) e apre il documento con il programma applicativo in grado di trattarlo (Word, in questo esempio).

Come si accede a un sito?

O, meglio, come si accede a un documento di un sito?

Così come esistono degli editor (come Word) che possono aprire i nostri testi, analogamente esistono dei programmi applicativi fatti apposta per accedere ai documenti che si trovano in rete, all'interno di siti. Questi prendono il nome di browser (in inglese to browse significa dare un'occhiata in giro, curiosare). Internet Explorer è il più diffuso, ma ne esistono altri abbastanza popolari (Mozilla Firefox, Netscape, Opera).

Al browser bisogna dire dove andare, ossia fornirgli l'indirizzo completo della pagina (documento). L'indirizzo si inserisce nell'apposita finestra (v. figura)

e, quando voglio andare in una particolare pagina del sito, ha, generalmente la forma:

http://www.nomedelsito.it/sottocartella/pagina.html

in cui:

con http:// il browser dice alla rete che vuole comunicare con un certo protocollo (HyperText Transfer Protocol)

www indica la rete (world wide web)

nomedelsito.it indica il dominio (sito) con il suo nome e il suo tipo (.it indica il registro italiano, ma ci sono registri non geografici, come .net, .com, ecc.))

/sottocartella/pagina.html indica il percorso all'interno del sito

pagina.html è il nome del documento con l'indicazione, nel suffisso, del linguaggio con cui è scritto (in genere HTML, che sta per HyperText Markup Language)

E proprio di quest'ultimo ci occuperemo d'ora in poi.

Come si scrive una pagina (in HTML)?
Il linguaggio base utilizzato per fare un documento che risiede su un sito ed è letto su un PC è l'HTML. L'HTML non è un linguaggio di programmazione, ma di editing. Quindi non richiede nozioni di programmazione informatica.

Di cosa abbiamo bisogno per scrivere un documento in HTML? È difficile?

Ci basta pochissimo: il più semplice programma di scrittura di solo testo (in ambiente Windows il Blocco note. Non MS Word o WordPad, ma il banalissimo Blocco note).

Difficile? No, se ci si limita a fare cose semplici (come in tutte le cose). Soprattutto pagine statiche.

Andiamo AVANTI.

INDICE

COME CREARE UN SITO

Molti, moltissimi usano il personal computer e si connettono a Internet. Pochissimi si cimentano nella scrittura di un sito. Molti credono che solo gli esperti possano farlo. Niente di più inesatto. Come mi riprometto di mostrare.
Fare un sito complicato e interattivo richiede certamente particolari conoscenze e una certa abilità. Per fare un sito bello, gradevole, attraente le capacità tecniche non bastano. Ci vogliono anche senso artistico e abilità grafica. E una poderosa strumentazione di supporto: programmi di scrittura (web editor), programmi di grafica e animazione. E il ricorso a linguaggi di programmazione (per esempio: Java, Javascript, PHP, ecc.).
La percezione, come vedremo, esagerata, di una grande difficoltà spiega il relativo successo di alcuni generatori automatici di Home Page personali, specie presso alcuni fornitori di servizi Internet. Consistono nella collezione di alcuni modelli personalizzabili (scelta della disposizione della pagina, scelta di sfondi e colori, scelta di tipi e dimensione dei caratteri, inserimento di foto) tra cui scegliere. Con risultati non esaltanti. Maggior successo sembrano avere i blog e, sopratutto, gli album fotografici personali e da poco, specie grazie a YouTube, anche le raccolte personali di video.

Invece, realizzare un proprio sito , semplice, ma certamente più personale di quello che si può ottenere con strumenti automatici, è facile. Non dico facilissimo, ma relativamente semplice. Poco più difficile che scrivere una lettera con Word e salvarla in un proprio archivio.

Nei prossimi incontri cercherò di spiegare in modo molto semplice come riuscire a costruire un piccolo sito. Presupponendo però alcune conoscenze fondamentali sull'uso del PC e sulla navigazione nel web.
Lo farò nei seguenti post:

1. CREARE SITI: prime domande
   
2. CREARE SITI: primi passi


3. CREARE SITI: inoltriamoci nell'HTML


4. CREARE SITI: gestire lo spazio
   
5. CREARE SITI: dimensioni relative e assolute
   
6. CREARE SITI: posizioni relative e assolute
   
7. CREARE SITI: divisioni sottosopra
   

***

RIFERIMENTI

In rete

Le informazioni più precise e più aggiornate si trovano presso il sito del W3C:

In particolare, visita le pagine:

http://www.w3.org/html/ per tutto quello che vuoi sapere sull'HTML

http://www.w3.org/Style/CSS/ per informarsi in dettaglio sui fogli di stile (CSS . Cascading Style Sheets)

Nelle pagine del W3C troverai manuali, tutorial, specifiche.

Sono ben fatti i corsi del sito italiano:

In particolare, vai alle pagine:

http://xhtml.html.it/

http://css.html.it/

In libreria

XHTML, Chelsea Valentine & Chris Minnick, Addison Wesley Longman Italia Editoriale Srl, 2001