Lo strato applicativo di Internet

HTML e CSS

• Esempi già fatti
• Le estensioni dal web developer
  • Aardvark
  • Firebug
• Kompozer
  • La mia prima pagina
• Modifica di una pagina esistente
• Salvataggio sul server web e visualizzazione
  • Collegamento in FTP
  • Visualizzazione

Esempi già fatti

La cosa più semplice che possiamo fare per sperimentare la sintassi dell'HTML e dei fogli di stile, è di partire da una pagina già pronta, come quelle che troviamo presso uno dei siti di template free. Prendiamo, ad esempio, metamorph_sunset, quasi completamente privo di tabelle; scarichiamolo, scomprimiamolo, e salviamolo in una directory locale, come ad esempio questa. Possiamo individuare una directory contenente le immagini utilizzate nella pagina, e possiamo visualizzare direttamente il foglio di stile CSS che la pagina stessa utilizza.

Le estensioni dal web developer

Una delle cose più antipatiche nella redazione di pagine web che usano i CSS, specialmente di quelle prodotte da altri, è l'individuazione dei selettori, classi, ed identificatori CSS, le cui regole determinano l'aspetto finale dei componenti di quell'elemento. Una delle cose più simpatiche, è che questo problema può essere felicemente risolto, facendo uso di strumenti appositamete sviluppati.

Installiamo quindi alcune estensioni per il browser Firefox, tali da rendere più facile il mestiere del web developer: tra queste, possono tornare molto utili Aardvark, Firebug, e WebDeveloper. Una volta installati, questi producono la comparsa di due nuove voci nel menù Strumenti, così come pure nel menù che si ottiene cliccando con il tasto destro all'interno della pagina.

Aardvark

Il suo funzionamento è molto semplice, ancorché geniale: si attiva dal menù strumenti, oppure con il tasto destro, e passando con il mouse sopra gli elementi che compaiono nella pagina, un rettangolo rosso evidenzia l'ambito grafico su cui si estendono gli elementi HTML, ne viene visualizzato il nome, e se presenti, anche i selettori CSS in quel momento attivi per quell'elemento. Premendo il tasto h (help), compare un menù che ci ricorda le altre funzioni ottenibili mediante la pressione di altri tasti. Possiamo a questo punto modificare decisamente l'aspetto della pagina, e poi.... richiedendo di ricaricarla, torna tutto come prima.

Firebug

Nel caso in cui vogliamo modificare l'aspetto di una pagina, ma non sappiamo dove mettere le mani, possiamo posizionarci in quel punto con il mouse, cliccare con il tasto desto, e selezionare inspect element: nella parte inferiore della finestra di Firefox, ci compare (a sinistra) il codice HTML associato, e (a destra) le regole CSS che hanno effetto su quell'elemento, mettendo anche in evidenza quelle regole che non sono applicate, perché rimpiazzate da altre più specifiche. A destra, inoltre, possiamo apprezzare il layout risultante dalla impostazione dei valori per i margini. Ma la cosa più divertente.. è che possiamo modificare la nostra pagine, sia per quanto riguarda l'HTML, che il CSS!! Così, una volta individuati i valori che producono l'effetto desiderato, possiamo riportarli nei files effettivamente presenti su disco, ed ottenere la nostra pagina, così come desideriamo che appaia.

KompoZer

Mentre le due estensioni ora descritte ci aiutano nella analisi (ed eventuale modifica) di pagine preesistenti, un editor come Kompozer ci aiuta nella creazione di pagine ex-novo.

La mia prima pagina

Una volta lanciato KompoZer (si trova sotto Applicazioni/Internet) possiamo cliccare su New ed iniziare a realizzare la nostra prima pagina html, scrivendo un titolo e poi rendendolo grande mediante la sua inclusione in un elemento <h1></h1>, seguito da qualche frase, e poi qualche altro componente, come una immagine (Insert/Image), una tabella (Table), e due liste (una con i pallini, e l'altra con i numeri), in modo da ottenere un risultato simile a questo. Non resta ora che aggiungere un tocco di stile, e per questo apriamo Tools/CSS Editor, e scegliamo di creare uno stylesheet interno, e di aggiungere una nuova regola, ad esempio richiedendo un selettore custom e immettendo ul (sempre che nella nostra pagina siano presenti le liste non numerate), e quindi cliccare su create style rule. A questo punto possiamo sbizzarrici ed impostare il valore di svariate proprietà, osservando al contempo l'effetto ottenuto. Infine, salviamo il risultato prodotto in una directory apposita (es. html), ed ammiriamo cosa è accaduto dietro le quinte, cliccando in basso a destra in KompoZer su source.

Modifica di una pagina esistente

A questo punto, partendo dal template che abbiamo scaricato, proviamo ad apportare alcune modifiche, come ad esempio:

1. sostituire al link in alto friends, il link a questa pagina del corso
2. sostituire al testo Design by Metamorphosis Design, il vostro nome e cognome
3. allargare la pagina, e la colonna di destra
4. sostituire alla immagine della testata, una diversa immagine (della stessa altezza, ma con la nuova larghezza!) ottenuta catturando una altra immagine di vostro gradimento, eventualmente ritagliandola con the gimp
5. aumentare la dimensioni dei titoli (come Welcome To Our Website e METAMORPHOSIS DESIGN)

Ma procediamo con ordine.

1. Aprendo il file index.html (che viene visualizzato di default, se ci limitiamo a referenziare la directory in cui si trova) con kompozer, possiamo  aprire una finestra di dialogo con un doppio click sopra al link "friends", ed immettere, al posto del simbolo #, l'indirizzo di questa pagina, /appint/html/Text/html.html.
2. ancora utilizzando kompozer, possiamo scrivere direttamente il nostro nome e cognome nel posto indicato, ma... facendolo, ci accorgiamo che le lettere compaiono tutte minuscole. Come mai? 
   • visualizzando la pagina con Firefox, posizioniamoci sopra il nostro nome che abbiamo appena scritto, e dopo aver cliccato con il tasto destro, scegliamo Inspect element, attivando così Firebug, che nella parte inferiore della finestra, ci fa vedere il codice HTML corrispondente, e le regole CSS che vi si applicano.
   • notiamo allora che alla riga 101 di styles.css, è presente un selettore #logo a, che applica a quegli elementi HTML con tag <a>, che compaiono all'interno di un altro elemento, per il quale è stato definito l'attributo id=logo. E infatti, id=logo è proprio l'identificatore del tag div, che influisce su tutta la zona in cui compare l'immagine del tramonto. Nella colonna di destra, tra le regole del selettore #logo a, troviamo la regola text-transform:lowercase; che è appunto quella che determina la scomparsa delle maiuscole.
3. per allargare la pagina, usiamo ancora Firebug, e cliccando su Inspect, ci posizioniamo sulla parte bianca in basso a sinistra, in modo da far comparire un rettangolo blu che racchiude tutta la pagina, e clicchiamo. Dalle finestre inferiori, osserviamo di aver inviduato l'elemento <div id=content>, che appunto ha influenza sull'intera pagina, ed il cui selettore CSS #content attiva, tra le altre, la regola width:786px;  
   • modifichiamo allora questo valore in kompozer, portandolo ad esempio, a 900px; per fare questo:
     • apriamo la finestra dell'editor CSS, ad es con il tasto F11,
     • individuiamo il selettore #content,
     • modifichiamo il valore width sotto la linguetta box;
     • chiudiamo con ok, ed ammiriamo il risultato.
   • tocca ora alla larghezza della colonna di destra: usando ancora la funzione inspect di firebug, troviamo che la colonna è controllata dal selettore #right, che contiene le regole float:right; e width:500px;, mentre la prima regola indica di allineare la colonna a destra, la seconda è quella da modificare; dato che il precedente incremento di larghezza è stato di 900-786=114 pixel, possiamo portare width a 614px; per fare questo:
     • utilizziamo ancora l'editor CSS di kompozer,
     • individuiamo il selettore #right,
     • modifichiamo il valore width sotto la linguetta box;
     • chiudiamo con ok, ed ammiriamo il risultato.
   • rimane da allargare anche la prima riga della pagina, quella con i link in alto, ma come fare questo, lo trovate da soli... basta ricordare che la nuova larghezza, dovrà ancora incrementarsi di 114 pixel, ovvero arrivare a 892 pixel.
4. la dimensione originale dell'immagine può essere rilevata
   • usando ancora Firebug, e cliccando su Inspect, le due finestre inferiori ci mostrano che questa è contenuta nel tag <div id=logo>, a cui corrisponde il selettore #logo, che come prima regola asserisce background:#FFFFFF url(images/big_pic.jpg) no-repeat scroll 0%; mentre rimandiamo altrove per una descrizione dell'insieme dei valori associabili alla proprietà background, possiamo notare che passando con il mouse sopra la linea del css, ci viene mostrata una versione ridotta dell'immagine, assieme alla sua dimensione in pixel: 778x226. Pertanto, occorre ora produrre una immagine di 892x226 pixel.
     • possiamo sceglierne una, ad esempio, da flickr: ad esempio scegliendo questa, nella versione più grande, occorre salvarla su disco, e quindi aprirla con Gimp;
       • come dite? non riuscite a salvarla? con un pò di perizia, sono riuscito a trovarne il link diretto, peccato che è piccola!
       • alternativamente, cerchiamo sunset su Flickr, si troverà qualcosa di buono!
     • ridimensiono l'immagine alla larghezza desiderata (tasto destro, immagine, scala);
     • usando lo strumento di selezione rettangolare, ritaglio l'altezza alla dimensione desiderata;
     • eseguo modifica/copia, e quindi modifica/incolla come/nuova immagine;
     • salvo il risultato nella directory delle immagini, con lo stesso nome della precedente;
     • nell'editor css di Komposer, modifico la proprietà width del selettore #logo, al nuovo valore di 892;
     • mi godo il risultato.. uhmm c'è un rettangolo bianco a destra.. si aggiusta, portando a 4 il valore della proprietà padding-left: del selettore #logo.... però ancora non va, così si è spiaccicato a sinistra il logo... si corregge aggiungendo la proprietà padding-left = 40px; nel selettore #logo a
       
5. per ingrandire Welcome To Our Website, ci accorgiamo che su di esso ha effetto il selettore #right h2, e quindi aggiungiamo a questo la regola font-size:xx-large;
   • per ingrandire METAMORPHOSIS DESIGN, possiamo intervenire sul selettore #right h4, impostandolo come font-size:large;

L'effetto finale, è quello visibile qui.

Salvataggio sul server web e visualizzazione

Ora che abbiamo predisposto la nostra bella pagina, preoccupiamoci di salvarla presso il nostro server web. Per questo scopo, useremo il computer www.labint, predisposto sia come server web che come server ftp. Infatti, sono stati creati diversi utenti, con nome pari ai nomi dati ai computer del laboratorio. A tutti questi utenti, è stata assegnata la stessa password. Il server ftp è configurato in modo tale che quando gli utenti si connettono, possono accedere alla sola porzione di filesystem radicata a partire dalla propria home directory.

Collegamento in FTP

A questo scopo, abbiamo due possibilità:

• usiamo il programma gftp, 
  • se non lo abbiamo già installato, possiamo scaricarlo con synaptic;
  • quindi, lo lanciamo da Applicazioni/Internet;
  • poi, inseriamo nel campo host il nome www.labint, nel campo utente il nostro nome, e per password, sempre la stessa;
  • se tutto è andato bene, dovremmo trovarci nella directory remota /home/nfs/nomeutente del computer remoto;
  • per copiare i files da un computer all'altro, si fa uso delle freccette poste tra le due colonne della finestra.
• usiamo il client ftp integrato in Nautilus:
  • lanciamo Risorse/Connetti al server;
  • inseriamo come Tipo di servizio: FTP con login, nome del server, e nome utente (il vostro), connetti;
  • il nome del computer ci appare sotto il menù Risorse; cliccandolo ci viene chiesta la password, e quindi possiamo entrare
  • se apriamo un'altra finestra Nautilus, possiamo copiare i files dal nostro a quello

Visualizzazione

Affinché le pagine che carichiamo sul server siano poi visibili, dobbiamo metterle in una directory con un nome particolare, public_html, che creiamo (visto che da sé, non esiste). I files che carichiamo lì, sono visibili a partire dall'indirizzo http://www.labint/~nomeutente (suggerimento: il carattere ~ si ottiene, sulla tastiera Linux, con la combinazione di tasti AltGr e ì).

x

Lo Strato Applicativo
di Internet

Dal TCP al VoIP, dal DNS all'Email alla crittografia, tutto ciò che accade dietro le quinte di Internet, completo di cattura del traffico.
Scopri come effettuare il download, ricevere gli aggiornamenti, e contribuire!

---

Realizzato con  da Alessandro Falaschi -