Studio di modelli di home page

Note

Partirò da una pagina completamente vuota. Sarà un occasione per fare il punto sulla reale conoscenza degli strumenti per lo sviluppo del WEB e per verificare l'efficacia dello studio sino ad ora fatto.

Ricapitoliamo qualche concetto:

• Un documento html è un file che contiene dati di diversa natura, testi, immagini, filmati, suoni, organizzati secondo una struttura logica definita per mezzo di un linguaggio, HTML, che correda i dati con etichette (chiamate tag o elementi) le quali "istruiscono" i programmi di restituzione dei contenuti (browser) sulla natura dei dati stessi e sui loro collegamenti logici. HTML sta infatti per Hyper Text Markup Language, linguaggio a marcatori per ipertesti.
• Gli elementi di HTML possono specificare attributi che definiscono la formattazione del dato a cui l'elemento si riferisce: dimensioni, colore, posizione nella pagina. All'origine di html questo era l'unico mezzo a disposizione del programmatore. Ora, anche se gli attributi di formattazione permangono all'interno del linguaggio, l'uso che se ne fa è molto più limitato in quanto per la formattazione dei documenti è stato sviluppato un linguaggio specifico, CSS, Cascade Style Sheets (fogli di stile a cascata), molto più ricco di soluzioni e che consente la realizzazione di codice più manutenibile e riutilizzabile.
• I programmi deputati alla visualizzazione dei documenti web sono chiamati browser. Esempi di browser sono Chrome, Firefox, Edge, e molti altri. I browser sono in grado di reperire i documenti presenti in rete, accedendo ai server della rete in cui sono memorizzati, e a visualizzarli sui computer degli utenti.
• I browser sono in grado di visualizzare, o meglio restituire, i contenuti di diversi tipi di file ed in particolare i file html. Quando un browser accede ad un file di estensione html, (....html), cerca di interpretare le stringhe di caratteri racchiuse fra parentisi angolari come elementi del linguaggio html e di elaborarle secondo le specifiche del linguaggio.

Codice sorgente delle dei documenti.

Una cosa molto bella del web è che si possono vedere i sorgenti delle pagine visualizzate nei browser. Come si fa?

Firefox:

1. Click sulle tre lineette orizzontali nello spigolo in alto a destra della pagina
2. Click su "Sviluppo web"
3. Click su "Sorgente pagina"

Chrome:

1. Click sulle tre puntini disposti verticalmente nello spigolo in alto a destra della pagina
2. Click su "Altri strumenti"
3. Click su "Strumenti per sviluppatori"

Microsoft edge:

1. Click sulle tre puntini disposti orizzontalmente nello spigolo in alto a destra della pagina
2. Click su "Altri strumenti"
3. Click su "Strumenti di sviluppo"

Su altri browser suppongo esista qualcosa di simile.

Gli strumenti di sviluppo messi a disposizioni sono tanti e consentono di analizzare il funzionamento del documento in tutti i suoi aspetti.

Al momento ci interessa solo vedere il sorgente del documento e per farlo c'è una scorciatoia che funziona su i tre browser sopra elencati. Basta visualizzare la pagina e fare <Ctrl><U>.

Step 1 - Pagina vuota

Struttura delle pagine html. Metadati.

Partiamo da un documento vuoto per riesaminare gli aspetti fondamentale di html.

Strutturalmento abbiamo un documento html completo, ma solo la sezione dei metadati contiene elementi. Non sono molti, ma sono quelli fondamentali presenti in quasi tutti i documenti. Vale la pena studiarli in pò per capirne le funzioni ed utilizzarli consapevolmente, anzichè, come spesso si fa, limitarsi a copiare.

Pagina nello stato di sviluppo "Step 1" Apri

Un occhiata al modello

Apriamo la pagina modello

Per visualizzarne il codice andare sulla pagina e premere <Ctrl><U>

La prima cosa da notare è l'estensione del file contenente il documento: si tratta di un .com. I miei file hanno estensione .html o .php. Gli html sono interpretati direttamente dal browser, i .php sono preprocessati da php. e quindi dal browser I .com sono preprocessati da qualche altro programma. In questo caso, credo da WordPress che è anche il programma che ha generato il codice.

Chi ha generato questo programma senza dubbio conosce molto bene html, css, php, mysql, javascript e molto altro e l'ha fatto per "consentire a chiunque la realizzazione di siti web dinamici e professionali", ed in effetti alcuni siti realizzati con WordPress e con programmi analoghi sono veramente spettacolari, ma dubito che li abbiano realizzati i proprietari dei siti.

In ogni caso il nostro obiettivo non è imparare WordPress o competere con esso. Vogliamo solo studiare meglio gli strumenti base di sviluppo web e vedere come realizzare con questi alcuni oggetti presentati nei siti professionali.

Step 2 - Foto di copertina

Cominciamo ad aggiungere contenuti al body del documento.

Voglio capire come si fa ad inserire una immagine in una cornice rotonda. Per ora non lo so fare.

Pagina nello stato di sviluppo "Step 2" Apri