17 novembre 15:04: aggiungo in blu un’altra precisazione dovuta al commento di Alessandra. Un commento interessante che concerne la questione spicciola di come accedere alla sorgente di una pagina ma che introduce anche un concetto importante, che riprendiamo in un altro post.
17 novembre 9:04: aggiungo in rosso più giù alcune precisazioni, grazie al commento che Claude ha scritto a questo post (vedete il valore aggiunto dai cyberpartecipanti?). Per inciso, il commento era stato mangiato dall’antispam, quindi: se qualcuno si vedesse rifiutato un commento, mi scriva subito un’email, in modo che io lo possa recuperare tempestivamente.
Mi sono innervosito non poco lunedì scorso, quando ho capito che avrei dovuto dissipare due o tre ore in macchina per una stupida ma ineludibile incombenza, con tutte le cose che avevo in mente di realizzare ..
Ho acceso la radio nella speranza di mitigare il nervoso. Accontentato subito: una voce simpatica stava spiegando che a Roma, al Tempio di Adriano, aveva luogo l’evento “Happy birthday web”, ovvero il ventesimo compleanno di Internet. All’evento è intervenuto Tim Berners Lee in persona, il fisico del CERN che inventò la tecnologia del web.
Questa tecnologia è composta essenzialmente da due parti: una che consente di raggiungere informazioni memorizzate in computer lontani attraverso internet, chiamata HTTP (HyperText Transfer Protocol), e l’altra che determina un particolare modo di codificare un documento, detta HTML ( HyperText Markup Language). Di ambedue queste componenti rimane oggi traccia negli indirizzi internet – http://inuncomputer.daqualcheparte … – e nel tipo di file rappresentabili nei navigatori o browser che dir si voglia – ilmiofile.html.
Sfrutto quindi questo imprevisto per iniziare in modo diverso da come avevo immaginato. Balocchiamoci quindi un po’ con l’HTML, nel più semplice dei modi. Ho preparato una pagina minimale, eccola (si dovrebbe aprire in una altra finestra o pagina del browser). Semplice no? L’ho scritta in HTML ed è così semplice che potrei facilmente scriverne il testo qui, ma è molto più utile se fate qualcosa voi.
Di qualsiasi pagina che rappresentate nel vostro browser (intendo roba tipo Firefox, Internet Explorer, Google Chrome, Safari ecc.) voi potete anche vedere la rappresentazione originale HTML, che qui chiamo sorgente HTML. Nel mio Firefox questo si ottiene con la voce di menu Tools -> Web developer -> Page source, oppure semplicemente con la combinazione di tasti Ctrl-u. Cambiando Browser e sistema il comando può cambiare ma dovreste trovarlo facilmente. Da Internet leggo per esempio che anche in Google Chrome vale Ctrl-u mentre in Internet Explorer il comando è F12. Se qualcuno proprio non riesce a trovarlo lo scriva in un commento a questo post, tutti insieme riusciremo a scoprirlo.
Come ha osservato Claude nel suo commento, il mio Firefox è equipaggiato con l’accessorio (plugin) Web developer. Quando non è così, la possibilità di vedere la sorgente della pagina web si trova sotto la voce di menu Visualizza. Faccio un riassunto con i sistemi che ho disposizione:
| Sistema operativo | Browser | Voce Menu | Voce Menu (It) | Shortcut |
|---|---|---|---|---|
| Linux Ubuntu | Firefox | Tools -> Web developer -> Page source | Strumenti -> Sviluppo web -> Sorgente pagina | Ctrl+U |
| Linux Ubuntu | Chrome | Tools -> View Source | Ctrl+U | |
| Mac OSX | Firefox | Tools -> Web developer -> Page source | Strumenti -> Sviluppo web -> Sorgente pagina | Mela+U |
| Mac OSX | Safari | View -> Source | Alt+Mela+U | |
| Windows XP | Firefox | Strumenti -> Sviluppo web -> Sorgente pagina (*) | Ctrl+U | |
| Windows XP | Internet Explorer | Visualizza -> HTML |
(*) Uso molto di rado questo sistema con Windows XP, giusto in occasioni del genere. Stamani, quando l’ho acceso ho trovato una vecchia versione di Firefox sulla quale il comando era Visualizza -> Sorgente pagina. Però dopo avere scaricato la nuova versione mi sono ritrovato la sezione Sviluppo web, non so quindi se è l’ultima versione di Firefox ad offrire tale sezione a tutti di default, o se viene offerta sempre a chi l’ha chiesta una prima volta.
In ogni caso, accoglierò eventuali osservazioni per aggiornare o integrare la tabella.
Ed ecco l’osservazione di Claudia:
Mi permetto di aggiungere qualche informazione per Explorer (versioni 7 e 8) sperando di poter essere utile: per visualizzare il codice sorgente è anche possibile cliccare con il tasto destro sulla pagina web in questione, quindi cliccare su HTML.
Ho subito provato con tutti i sistemi che ho messo in tabella: il tasto destro consente in tutti questi casi di accedere alla sorgente della pagina. Come dire: posso buttar via la tabella! 😀
Certo, se guardate una pagina qualsiasi, trovate quasi sempre qualcosa di molto complicato, ma non nella paginetta che vi ho proposto. Leggetene la sorgente con calma, in ogni sua parte, e riflettete sul significato di ciò che leggete. Poi aprite il più semplice strumento che avete per scrivere: Notepad per chi ha Windows, Textpad per chi ha Mac, Gedit o Vi per chi ha Linux. Copiateci la sorgente della pagina con la solita tecnica copia-incolla (se non la sapete usare guardate come fanno le ricerche scolastiche i vostri figli …). Salvate quindi in un file sul vostro disco, sul Desktop o dove preferite. Poi, nel vostro browser, attraverso il menu File, cercate questo nuovo file sul disco e apritelo, e vedrete la stessa identica pagina.
In questo modo vi siete procurati un piccolo laboratorio: con Notepad (o altro) potete divertirvi a modificare il file, salvarlo nuovamente e ricaricarlo nel browser per vedere l’effetto delle vostre modifiche. Mi fermo qui, per ora. Aggiungo solo un paio di avvertimenti.
Niente paura, questo non è un corso di HTML né di programmazione. Ma talvolta ci serve fare qualche piccolo esperimento per riflettere poi su fatti molto più generali.
Io ignoro quali siano le vostre conoscenze. Mi immagino che qualcuno conosca bene l’HTML e che magari ci abbia anche lavorato. Forse altri ne hanno una cognizione molto più fumosa. I primi potrebbero annoiarsi e i secondi spaventarsi. La differenza è irrilevante perché non è qui questione di diventare progettisti web ma di riflettere sulle caratteristiche del testo. Ogni riflessione è gradita, in particolare quelle dei timorosi.
Andreas Formiconi 
finalmente ho trovato tempo e modo di provare a consultare bene queste pagine,
nella mia scuola, un centro professionale utilizziamo HTML per realizzare il sito di un’azienda simulata e collegare il lavoro di info con economia (la mia materia).
E’ovvio che chi conosce HTML è il collega, io vedo ogni tanto qualcosa.
Questo è il prodotto (integrato con strumenti WYSIWYG, nel ns caso weebly)
ad es. http://alvela10.weebly.com
Anch’io ho iniziato con frontpage, e con gli indirizzi ftp per poter caricare il sito, il mio primo sito http://www.istitutocadorna.it, poi sono passata a flash, sito statico, ma credetemi vita impossibile, il dirigente ogni giorno voleva aggiungere qualcosa, e io non riuscivo a farle capire che non poteva essere immediata la cosa. Come dice Maurizia non era facile “smontare” una vetrina…… Oggi benvenuto web 2.0 e joomla o wordpress e altri ancora…..
Bellissimo stefano, il filmato l’amore per l’apprendimento. Oggi ho registrato il dominio tra un po’ ci sarà il mio blog: ascuolaconmarvi.it
grazie
Mi sono avvicinata a Fronte Page nell’anno scolastico 1998 – 1999 poiché facevo parte del gruppo di gestione del Progetto“ Prog.Ele” (Progetto Elementari in rete) .
Questo progetto aveva l’obiettivo di creare una rete tra le scuole che avevano ottenuto i finanziamenti PSTD per promuovere un uso “comunicativo” e “creativo” delle tecnologie digitali a scuola, ma nello stesso tempo voleva esplorare e promuovere un approccio diverso all’uso del computer ed educare alla cooperazione attraverso esperienze di scrittura basata sulla collaborazione tra classi e sulla comunicazione a distanza resa possibile dall’utilizzo degli strumenti informatici.
All’inizio è stato usato un software proprietario che consentiva la collaborazione in rete. Questa
applicazione collaborativa, molto interessante ( FirstClass) non era studiata in modo particolare per gli utenti della scuola primaria e non essendo Open Source, non si potevano praticare delle modifiche . Le classi usavano le conference per inviare i testi o disegni creati e il responsabile delle attività, un insegnante per scuola, pubblicava i prodotti dei bambini nel sito dedicato usando Fronte Page
In questa prima fase il prodotto finale era una somma di interventi che costituivano un testo
formato da blocchi autonomi e poco coesi, con scarsa coerenza, ripetizioni e stili diversi.
Il sito era statico e fungeva da vetrina dei lavori prodotti.
Per questo, negli anni, per il progetto si è cercato una soluzione diversa: l’uso di una piattaforma Open Source “ Spaghetti Learning”, prima e “ Docebo” poi in italiano, facilmente modificabile anche da chi non ha conoscenze del linguaggio specifico.
FACCIO, DUNQUE PENSO
Seguendo alla lettera le sue istruzioni, sembra un gioco da ragazzi, anche se nell’immediato si fatica ad intuire subito l’utilità di tale procedura.
In realtà, mi sono accorta che, se salvo la pagina sorgente in html, quando poi la riapro col browser, avendo il coraggio di cliccare sul link …
OPS, non si trova più l’HYPERLINK.
Cosa sarà successo?
Semplice, ma non scontato, bisogna ricordarsi di salvare nella stessa cartella del nostro pc anche il file “su_forza.html” che viene “puntato” dal link.
In alternativa, ho verificato che si può modificare il link: href=”su_forza.html”
in
href=”http://lai.dfc.unifi.it/lab/su_forza.html”
e forse questa opzione è più semplice in termini di risparmio di memoria.
…della serie: il pc è proprio un vero “ordinateur” come lo chiamano i francesi.
Oggi ho aperto il mio blog, l’indirizzo è: stefano-merlo.blogspot.com
Come Gaetano anch’io ho iniziato utilizzando Fronte Page, anzi prima ancora, ma per poco tempo, ho utilizzato Netscape che consentiva di editare pagine web non sempre compatibili, nell’impaginazione, con Fronte page ma era più veloce. Lo utilizzavo, con altre colleghe, per pubblicare i lavori dei bambini, un gionalino web. Non ho imparato bene l’html, riuscivo solo a modificare il codice generato da Fronte Page per modificare i percorsi dei link quando non riusciva a farlo automaticamente. Inizialmente questo è stato il problema maggior: modicare il percorso locale in assoluto per poter leggere le pagine non solo sul computer ma anche dopo essere state pubblicate. Ora non uso più l’html ma il PHP perchè i siti che costruisco sono dinamici e utilizzano il php con il data base mysql.
Un esempio, il sito della mia classe: http://www.classe2.0copernico.it o quello della mia scuola: http://www.icscopernico.it
Ciao a tutti
Il mio primo incontro con l’HTML avvenne nel 1999, quando frequentai uno dei primi corsi on line attivato dall’Università di Padova su “Multimedialità e Didattica”. Come prima attività ci fu chiesto di presentarci costruendo delle pagine web.
Cercando nei “ricordi” del mio computer ho trovato quella presentazione. Per questa occasione l’ho rimessa in rete così com’era, la potete vedere a questo indirizzo http://www.1circolo.it/gaetano/default.html Magari si presenterà un po’ scompaginata, perché fu pensata per una visualizzazione con risoluzione a 800×600, già tanto per i monitor di 15 pollici in uso per la maggiore. Allora usai FrontPage (produceva un codice html molto sporco), mi cimentai anche a creare delle gif animate. Fu una bella esperienza, da allora ho fatto altri lavoretti, ultimo realizzato utilizzando un programma WYSIWYG, è stato il sito del progetto Comenius della scuola http://www.1circolo.it/socrates/index.htm).
Non sono mai riuscito a imparare a memoria il linguaggio HTML, e credo che non ci riuscirò mai, ma riesco in buona parte a riconoscerlo, capirlo e ad intervenire per apportare delle piccole modifiche.
sì, tanti dei caratteri che si usano in HTML mi ricordano quelli dell’allora studiato COBOL. Anche la “sintassi” non è da sottolineare: l’andare a capo comporta un comando, e non chiudere le parentesi…. quante volte ho dovuto controllare quando aprivo e dove chiudevo le parentesi!! altrimenti cambia il contenuto
Sì, e a questo aggiungiamo la parola chiave, che è comparsa nel commento #3, di Alessandra, qui sopra, dove aveva scritto “codice sorgente”. Ecco: in HTML il codice è l’ingrediente che aumenta il testo (non solo in HTML ma ora ci interessa questo). I linguaggi di programmazione sono codice puro: solo istruzioni da eseguire. Il testo HTML è invece testo + codice, il contenuto e le istruzioni su come quel contenuto debba apparire.
Quindi prof l’Html non è un vero e proprio linguaggio di programmazione, ma un sistema a marcatori per il posizionamento di testo, immagini ed altri oggetti all’interno di un documento?
Marvi
Prof ci sono riuscita anch’io con la combinazione dei tasti ctrl+u. Quante cose che si ignorano….
grazie
Alessandra, ho corretto il post grazie alla tua osservazione. Ho tolto la faccina impertinente dal tuo commento e eliminato l’altro che era così divenuto pleonastico.
Certo Monica, fare, partecipare, certo …
Professore ci sono riuscita!!… anche se mi ci sono voluti un paio di tentativi. (faccio parte della categoria fumosi, ma arditi) :-))
Il commento che mi sovviene è che in questo modo si può condividere un testo HTML, partecipando anche alla definizione del suo contenuto.
Mi permetto di aggiungere qualche informazione per Explorer (versioni 7 e 8 ) sperando di poter essere utile: per visualizzare il codice sorgente è anche possibile cliccare con il tasto destro sulla pagina web in questione, quindi cliccare su HTML.
Oppure, dal menu Visualizza (che si ottiene anche premendo ALT+V) scegliere Origine.
Sì, oltre alle modifiche che mi hai indotto a fare al post, devo aggiungere che la possibilità di infiorettare il testo dei commenti mediante l’HTML era proprio uno dei punti ai quali volevo arrivare, una delle tante dimensioni dell’editing …
Ciao Andreas,
Proprio essenziale la tua pagina di esempio, e andare a vedere la sorgente è particolarmente utile per chi l’HTML non lo padroneggia. Ad esempio, in questi commenti al tuo blog normalmente si scrive in testo semplice, ma si può anche usare l’HTML per formattare il testo e fare link.
Solo una cosa: tu scrivi: “Nel mio Firefox questo [vedere la sorgente] si ottiene con la voce di menu Tools -> Web developer -> Page source,“. Però funziona con il tuo Firefox perché tu vi hai aggiunto la componente Web Developer. Per chi non l’ha fatto, la sorgente si può vedere passando dal menù Visualizza (ed è così anche con altri browser, mi pare).
Bello però, Web Developer, e non c’è bisogno di essere un progettista Web per ricavarne informazioni utili.