Lordgiotto's

Gotta Steal ‘Em All (ovvero imparare html e css)


I bravi artisti copiano, i grandi artisti rubano.

Pablo Picasso

Pablo Picasso

Qualche giorno fa mi sono per caso imbattuto in un interessante blog tenuto da due ragazzi newyorkesi. Il blog in questione si intitola Don’t Fear The Internet e raccoglie alcuni simpatici video creati dagli autori al fine di permettere ad utenti non troppo smaliziati di capire cosa succede ‘under the hood’ quando navigano nello sconfinato mare del World Wide Web.

L’ultimo video pubblicato spiega come accedere al codice html e css della pagina che stiamo visitando, permettendoci anche di sperimentare modifiche o aggiunte al volo.

Vi è mai capitato di inciampare per puro caso in un sito dal design accattivante o esser colpiti da qualche transizione particolare e chiedervi: “Chissà come ha fatto?!”…
Bene, questa domanda può non esser soltanto retorica, ma può trovar risposta grazie ad una semplice e costruttiva abitudine: esaminare il codice.

Ma andiamo per ordine..
Ovviamente per far questo è necessario aver un’infarinatura di base di HTML e CSS, o per lo meno sapere di cosa stiamo parlando. Il miglior modo per gettare queste fondamenta è quello di leggere una delle innumerevoli guide introduttive presenti in rete, come quelle della w3cschool o, in alternativa, quelle di html.it se cercate qualcosa in italiano.

Una volta imparate le basi, siete pronti al furto!
Questo non significa che non sia necessario continuare a leggere libri, tutorial, approfondimenti e quant’altro, ma semplicemente che non esiste modo migliore di imparare (e questo non vale solo nell’informatica) se non quello di osservare il lavoro degli altri, capirlo, riutilizzarlo e possibilmente estenderlo.

Ma come funziona?

Userò come esempio il developer tool di Chrome/Chromium: troverete qualcosa di molto simile già integrato in Safari ed Opera, mentre per Firefox dovrete scaricare un’estensione dal nome Firebug.

Non è finalità di questo articolo spiegare nel dettaglio tutte le funzionalità di questo potente strumento (lascio a voi il divertimento di scoprirle), quindi introdurrò brevemente alcuni aspetti inerenti a quanto detto fino ad ora.

Nella parte sinistra viene mostrato il codice HTML: passando il mouse sopra i diversi tag, questi verranno evidenziati in blu sulla pagina, in modo da evidenziare la corrispondenza tra porzione di codice e zona della pagina.
Inversamente, cliccando la piccola icona a forma di lente poco più in basso, sarà possibile selezionare direttamente sulla pagina un determinato elemento e verrà evidenziata la porzione di codice corrispondente.

Una volta selezionato un tag del codice HTML, sulla sinistra verranno mostrati tutti i selettori e le relative proprietà, presenti nel foglio/nei fogli di stile CSS, inerenti a quell’elemento (fanno eccezioni preudoelementi e pseudoclassi che dovranno esser cercati manualmente nel foglio di stile).
In questa sezione saranno mostrate non solo le proprietà assegnate direttamente all’elemento, ma anche quelle ereditate da elementi genitori.
Inoltre è possibile deselezionare, selezionare, modificare o aggiungere proprietà, in modo da vedere immediatamente gli effetti che tali modifiche comportano e, quindi, permettendo di capirne meglio il funzionamento.

Nel caso vogliate vedere il file css per intero (ad esempio per cercare pseudoclassi e pseudoelementi), basterà cliccare sul nome del file (ad esempio style.css:20) sopra il selettore desiderato. Alternativamente andate sul tab Resources e cercate nell’albero Frames la voce Stylesheet: lì troverete tutti i fogli di stile.

Vi capiterà certamente di imbattervi in selettori e proprietà delle quali ignorate completamente od in parte il funzionamento. In tal caso utilizzare la funzione ricerca del sito W3CSchool: offre spiegazioni molto dettagliate e propone molti esempi.

Ma… Quindi?

Quindi, grazie a questo strumento, potrete capire come i diversi elementi sono stati posizionati ed ordinati all’interno della pagina, quali trucchi sono stati usati per creare quegli effetti visivi che vi hanno colpito, quali particolari proprietà sono state sfruttate, etc.

Infine riutilizzate tutto questo nelle vostre pagine.
Non solo imparerete nuove proprietà e nuovi tecniche, ma prenderete sempre maggior consapevolezza dell’architettura e delle potenzialità nella creazione di pagine web.

Potreste accorgervi come, spesso, il limite sia solo la fantasia :)

Buon furto a tutti!

About these ads
This entry was published on luglio 26, 2011 at 1:45 am and is filed under CSS, Tecnologie Web. Bookmark the permalink. Follow any comments here with the RSS feed for this post.

2 thoughts on “Gotta Steal ‘Em All (ovvero imparare html e css)

  1. Just what exactly really motivated you to post “Gotta Steal Em All (ovvero imparare html e css) |
    Lordgiotto’s”? Iabsolutely adored the blog post! Regards ,Sabine

  2. User Level 3 called the way you would like it to be. Only two features, but they are very useful
    of increased number of people looking at it.
    Inside the HTML Editor, this to know how to use different
    kinds of software to get the job done. Evolution Of a little “link love” to those that comment on your blog.
    If you want to commercialise business networking create fancy messages why not set up a blog and use the layout
    and font of your choice and just for the kids who will use your site.
    The easy ones are what up any old piece of rubbish, stick it up on the web, and business will start flowing in.

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

Iscriviti

Ricevi al tuo indirizzo email tutti i nuovi post del sito.

%d blogger cliccano Mi Piace per questo: