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

Concetto di determinante (seguito)

TORNA INDIETRO

Prime definizioni

Ignoriamo per ora le soluzioni (ci torneremo in un successivo capitolo) e concentriamo la nostra attenzione sui soli denominatori, che raggruppiamo per comodità nella seguente tabella, in cui indichiamo anche le rispettive matrici dei coefficienti.





Per prima cosa, osserviamo che ogni espressione nel denominatore delle radici contiene tutti i termini della matrice dei coefficienti del corrispondente sistema.
Partiamo dalla matrice A₁ del primo ordine. Associamo a questa matrice un numero pari al valore dell'unico elemento che la compone e chiamiamolo determinante della matrice. Si usano vari simboli per indicare il determinante di una matrice, è comunque

detA₁ = det[a₁₁] = │a₁₁│ = a₁₁ .

Per quanto riguarda la matrice di ordine 2, alla quale si associa il valore

a₁₁a₂₂ - a₁₂a₂₁ ,

si può fare il seguente ragionamento, illustrato dalla figura.

Immaginiamo di prendere l'elemento

a₁₁

e di considerare la matrice

[a₁₁].

Si elimini tutta la riga 1 e anche tutta la colonna 1 e si consideri la matrice degli elementi che restano, ossia, in questo caso,

[a₂₂].

Si tratta di due matrici di un solo elemento di cui sappiamo quali sono i determinanti. Prendiamo poi il secondo elemento a₁₂ e, con procedimento analogo, isoliamo le due matrici [a₁₂] e [a₂₁] di cui conosciamo i determinanti. Si vede subito che

Diciamo che questo numero è il determinante della matrice di ordine 2 e scriviamo:
Veniamo al caso delle matrici di ordine 3.

Il denominatore delle radici del sistema del terzo ordine è costituito da tre termini, il primo dei quali è il prodotto di a₁₁, il primo elemento della matrice, con l'espressione (a₂₂a₃₃ - a₂₃a₃₂) che, a guardare bene, contiene tutti e soli gli elementi che restano nella matrice dopo aver eliminato la prima riga e la prima colonna. Anzi, è proprio il determinante di una matrice di ordine 2 avente per elementi quei quattro elementi rimasti.

Come si può vedere dalla figura, il secondo termine si ottiene moltiplicando a₁₂ per (a₂₁a₃₃ - a₂₃a₃₁), ossia prendendo il secondo termine della prima riga e moltiplicandolo per il determinante della matrice
i cui elementi sono gli elementi di A₃ dopo che è stata eliminata la prima riga e la seconda colonna.
In maniera del tutto analoga si trova il terzo termine.
Abbiamo quindi visto che

Diciamo che questo numero è il determinante della matrice di ordine 3 e scriviamo:

Resta da fare un'altra considerazione circa i segni degli addendi dell'espressione che esprime il determinante di una matrice. Come si vede, i segni sono alternati: il primo è positivo, il secondo negativo (questo anche nel detA₂) e il terzo è nuovamente positivo.
Nelle successive pagine daremo la definizione di determinante nel caso generale di matrice quadrata di ordine n, dopo aver però introdotto brevemente alcuni altri concetti relativi alle matrici.

***

INDICE

Concetto di determinante

Un altro nuovo oggetto

Richiamiamo alla memoria la considerazione fatta a proposito delle matrici inverse circa la condizione per la loro esistenza.
Avevamo visto che, nel caso di una matrice del secondo ordine e della sua inversa

l'inversa esiste solo se ad - bc ≠ 0 in quanto i quattro elementi della matrice inversa sono:

Viene spontaneo osservare che l'espressione ad - bc, cioè un numero, è costituita da tutti gli elementi della matrice A. Possiamo dire che alla matrice A₂ è associata la seguente funzione reale di tutti i suoi elementi:

d₂ = f(a, b, c, d) = f(A₂) = ad - bc

che per ogni quaterna a, b, c, d restituisce il valore ad - bc. Notiamo anche che tale espressione è la differenza dei prodotti dei termini di ciascuna diagonale.
Come vedremo subito, questa nuova funzione è associabile a matrici quadrate di ogni ordine n e prende il nome di determinante. Nelle prossime pagine daremo una definizione precisa del determinante e illustreremo alcune sue interessanti proprietà. Scopriremo che esso è utile nella risoluzione dei sistemi lineari.

Ripartiamo dai sistemi

Esaminiamo tre generici sistemi: di una, due e tre equazioni lineari con un numero di incognite pari al numero di equazioni, sia nella forma convenzionale che sotto forma di equazioni di matrici:

e ricerchiamone le soluzioni.

Il primo sistema è in realtà una semplice equazione la cui soluzione è

Se risolviamo il secondo con Gauss-Jordan (verificare per esercizio) otteniamo:

Per il terzo, lasciamo interamente al lettore il compito di giungere alla seguente soluzione:

***

SEGUE

INDICE

Matrice inversa e computer

Uso inevitabile del computer

La risoluzione di un sistema lineare è concettualmente semplice, come si è visto con l'applicazione del metodo di Gauss-Jordan, però la ricerca delle sue soluzioni con carta e penna è impraticabile quando le incognite sono già più di 4 o 5.
I fogli elettronici prevedono funzioni di uso abbastanza semplice per la manipolazione delle matrici. In particolare, le funzioni che servono per risolvere un sistema sono due:

• calcolo dell'inversa
• moltiplicazione di due matrici
  

con le quali si calcola la formula risolutiva del sistema lineare:

X = A^-1B .

(da completare con esempi di fogli elettronici da salvare per consentirne il download. Dove?).

***

INDICE