Web design & develop are fields where the technology evolve really quickly, so we should to keep our websites updated! Besides there are some fresh web designers still forgetting the user’s point of view.

No active e-mail links

We are in the Gmail era! Don’t you have a Google account yet?!? It will be your last e-mail EVER! Personally I’ve tons of e-mail aliases but they’re all forwarded to my unique gmail address. Why? I’m not afraid of spam e-mails: Google offer a really good Anti-spam filter¹ and if an indesidered mail pops out: “Flag as Spam” button! And all e-mails coming from that address will be filtered! Isn’t it easy?

From the other side, think what the user have to do for send you an e-mail!

In the first case, the user doesn’t even try to contact you if it isn’t really interested. Plus, the spammer’s super-server decrypt your e–mail address in a twinkle!

So, are you afraid more to receive SPAM or not receive some important e–mails?

Maybe now you’re thinking «I’m a genius, I use a form with captcha». Not so bad solution, but anyway the user fill always confortable in its e–mail client, even if the form is iper-usable. It’s easy to proof: do you like to fill forms in websites (with captchas)? So the e–mail active link still the best (and easy) way.

WWW or not WWW

I have a question that most of the time I can’t answer: why have you bought domain.com and if I write this – without www – on the address bar return me an error? I can understand some small site that have a shared hosting contract with a lot of restriction, but vodafone.it doesn’t have excuses! Anyway the worst cases I found are in italy. Another instance, the website of the public transports in verona:

• 3rd level domain – atv.verona.it — Doesn’t Work!
• 4th level domain – www.atv.verona.it — It Works!

I’m not saying that is stupid write the www. before the address, I’m saying that is stupid not set the DNS configuration properly!!!

Flash Website

In the september 2003 Macromedia release Flash MX 2004 witch have the famous Actionscript 2.0 that it was object orientend and able to manage web services. The first things come up in to the web guys was: «Wow! I can make a website with animation, my personal fonts and other cool things! Bye bye HTML!». But after a while they realize that a flash website its nearly impossible to maintain (like one with <table> layouts!!! That things still live out there!!!)

Some month ago W3C release the CSS3 & HTML5 standards and those things added with the wonderful Javascript library, make the Flash-stuff really easy to do.
Besides flash does make start the fan of my macbook. A clever thing to say: «It’s damn heavy!». Doesn’t forget that it isn’t supported by smartphones.

Splash page & background music

Another thing that Flash bring to the web are intros and background music. Why do you think that every user that visit your website are interested to an intro-video on your business? Shouldn’t “ask” before? If I only need the phone number of your office the background music is really necessary? There are no reason to entertain someone that doesn’t need it – even if you put a stop button. A beautiful splash page with a buttons enter it’s useless and have the same objective of the music: entertain – even if there is the language selection.

Here the solutions, if your website isn’t make for entertain, but for give information:

• Put on your home page the presentation video of your business with a big play button on it
• Search on Google an automatic language selection script
• Go serious and turn the music off

Links that open in a new window

Has you can see in my FAQs, even if I’m a open-in-a-new-tab guy, I’m totally respectful of people who prefer to use the back-button of the browser. So why you, as a web designer, have to choose how your users have to navigate in the internet?

You can say: «It’s a marketing thing, so people re-watch our website!». You don’t think that people can be irritated by this behavior and think less about your company? Try to be interesting for reach people, don’t importunate them.

Unique link for unique content

Not only flash site have this big problem. For istance, I wanna make a post on cooling pads for notebooks:

Hi, here a cooling thing!

The link doesn’t work! Sorry, but at the address http://www.zalman.com/ENG/product/Product_Read.asp doesn’t mean anything for the Zalman’s webserver.

& many many more…

There are so much things that annoying me in the web, so for not annoying you I stop here for listen (read) your opinions.

¹Also other company offer good spam filter. But not free or with lights ads.

Even if I never published a howto-screencast (so far…), I’m in the webradio of my university since almost three years. So I’ve learned a lot of stuff down there about this topic!

Indeed, most of this tips can be applied on audio podcasts too! Anyway in this post I speak only about production, not distribution.

Stuff you need

First of all, you need a Screen recording application:

• iShowU [MAC]
• ScreenFlow [MAC]
• Camstudio [WIN - Free]

If you have a lot of time and no money to spent, try Screentoaster.com.

A video editor¹ like iMovie, Windows Movie Maker or Adobe Premiere. GarageBand is good, but not optimized for video editing. Anyway iShowU and Screenflow come out with basic editing tools.

You also need a blocknote with a pencil, or something virtual is good at the same way. You are going to write important thing on it, that you have to mind while the registration. But we’ll get on this later.

Of course you need a microphone. A good one is prefered, but it’s not really necessary.

Last but not least, you need the licences of every application (and songs²) you’ll use in the screencast (including the recording app)! Otherwise you’re publicly saying “Sail ho! I’m a pirate!” and you’ll can get in trouble.

Pre-production: Organize & Prepare

Hello everybody this is Chris, from css-tricks and this is the screencast number…ehm…number…

Really sorry Chris, although you make great stuff on your web designer’s community-website, you inspired me to make this post! I want to specify that Chris Coiyer isn’t a disaster and he make good screencasts anyway.

On this step you really write down a timeline, you should to be quite precise. The correct name of this timeline is the “Clock”. A Clock is a sort of list of things that you’ll have to say or show on your screencast with timing. This helps you to not bore your listeners and let you now how much will keep your screencast. Anyway if you go out of time, it’s not a problem: of course you shouldn’t talk too much minutes about a single thing.

Title: How to make a screencast #1

--- Greetings and Presentation [ 30 seconds ] ---
- Little introduction about my experience in FAN

--- Stuff you need [ 2 minutes ] ---
   Recorder:
      - iShowU: MAC, payed. Link: http://www.shinywhitebox.com/
      - ScreenFlow: MAC, payed. link: http://www.telestream.net/screen-flow/overview.htm
      - Camstudio: WIN, free. link: http://camstudio.org/
[...]

Like a blog post, you should slice the screencast in chapters, this will help in the production time to handle errors during the recording. After you shouldn’t really have to show this separations at the viewers, especially if your screencast it’s short.

Production: let’s recording

I assume that you don’t have an entire crew that helps you to record your video. So you are your own director and phonic. Do a favor to your audience check the microphone volume before and during the registration by monitoring the audio with some headphones.

Three witches watch three Swatch watches. Which witch watch which
Swatch watch?

Now you should have everything you need for take the screencast in one-shot, or anyway you surely reduce the work in post-production. Stretch your tongue, stay focused on your clock and click REC!

If you sliced in small chapters your Clock, do pauses between them!!! So if you do a mistake, take a breathe and restart from the last break. Remember, if you’re not doing a simple audio podcast, you have to re-set your screen in the previews state (or similar). You can easily understand that those devices, will help you to cut out your gaffes in a twinkle.

Post-production: fix and add fancy things

Someone prefer to record the video and audio separately. This tecnique can give a better product, but may need more work in pre and post-production.

When you cut don’t erase all the pause between your chapters or your phrases: Don’t let it seem that you don’t breathe!

Now you can publish your screencast. But you can add an initial (and final) cover or background music under you voice. Remember you have to get the license: try Beatpick.com, for non-commercial use give out music with a Creative Commons License.

Conclusions

Has you can see, with little tricks and devices you can create a semi-professional product and seem more serious (even if you make jokes in the screencast). I think that if someone don’t have time to do a quite good screencast (not only in contents), she shouldn’t do it!

¹ If you need an audio editor try Audacity [FREE] or Adobe Audition.
² In this case you should have a special license for use the song. Try Beatpick.com.

Attention: This tip is valid only for WordPress (self hosted) users!

I’ve to admit it: my blog isn’t followed so much. So with this really small audience, my personal visits it’s a grate part of the whole and it’s not easy to identificate those.

First of all you can exlude all “preview” URLs. Infact if you use mod-rewrite permalinks, you should ignore all “?-parameter” URLs.

Seriously exclude those visits

90% of times that you access to your website you’re already logged in. So it’s easy with a CMS identify the administration visits.

So simply add this if for check the identity of the logged user.

<?php global $user_ID; ?>
<?php if($user_ID != 1 ) :?>
	<!-- GOOGLE ANALYTICS CODE -->
<?php endif; ?>

You can also use other Global Variables for discriminate the Google Analytics code:

• $user_email
• $user_identity — Nickame of the user logged-in. eg. “Andrea Canton”
• $user_level — 0 to 5, where 5 is the admin. eg. “admin”
• $user_login — Real Account-Name of the user logged-in.

You can add more fo one by appending with &&. Besides if you are the unique user use the function is_user_logged_in().

Has you can see, around my website there are a lot of fancy buttons: It’s only CSS3! I’ve decided to build a CSS Plugin and give out for free (actually under the BY-NC-SA CC license).

Go to the Download Page

Main Features

Those buttons use gradients, (multiples) box shadows and text shadows: all CSS3 features, so it’s not grateful supported on prehistoric browsers, but we’ll got that soon.

They’re really reactive: a quite of highlight on mouse over, no box-shadow and one pixel down positioning on mouse clicking. Besides the anchor it’s turned in an inline-block.

.button:hover, input[type=submit]:hover {
	color:white;
	box-shadow:1px 1px 2px #888, inset 0 0 4px white;
	-moz-box-shadow:1px 1px 2px #888, inset 0 0 4px white;
	-webkit-box-shadow:1px 1px 2px #888, inset 0 0 4px white;
}
.button:active, input[type=submit]:active {
	color: white;
	box-shadow:0 0 1px #888, inset 0 0 3px white;
	-moz-box-shadow:0 0 1px #888, inset 0 0 3px white;
	-webkit-box-shadow:0 0 1px #888, inset 0 0 3px white;
	position:relative;
	top:1px;
}

It’s not really got for put it in text paragraph, but works fine!

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Variants

If you set only the button class to an <a> element, will be render an orange and medium sized button. The same happens to the input[type=submit] element.

Anyway it’s easy to create a color variant: in the plugin there is a blue example.

/* Colors variant */
.button.blue, input[type=submit].blue {
	background-color: #6da5d5; /* Fallback color */
	background-image: -moz-linear-gradient(100% 100% 90deg, #386f9f, #6da5d5);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#6da5d5), to(#386f9f));
	border:1px solid #004d80;
}

For change the size it’s even easier.

/* Size variant */
.button.small, input[type=submit].small{
	font-size:12px;
	padding: 3px 8px 4px;
	text-shadow:0 1px 1px #555;
}

Usage

This plugin target all input[type="submit"] and a.button elements. So you just have this code to create a button.

<!--anchor link button-->
<a class="button">A button</a>
<!--submit button-->
<input type="submit" class="blue">This will become another button</a>

Browsers Support & Fallbacks

Those buttons is well rendered in:

• Google Chorme 1.0+¹
• Firefox 3.5+
• Safari 3.0+¹

In Opera 10.x the gradient isn’t rendered, and the Submit Input buttons doesn’t have an the internal gradient.

In Internet Explorer 5.5+, the buttons have a solid background decided in the code by setting a background-color.

background-color: #bf5320; /* Fallback color */
background-image: -moz-linear-gradient(100% 100% 90deg, #bf5320, #f28653);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f28653), to(#bf5320));

According to the April 2010 Statistics (offered by W3CSchools) those buttons will be well rendered for the 63,7% of users (and good rendered for the 2.2% of Opera’s users). Anyway the other 34,1% of IE-users, se a solid colored box that react at the click, so not bad.

Known Issues & TODO

This version is not perfect, so if you find a bug, I’ll put it in the list down there!

• The button has to be tested Safari 3.0, Google Chrome 1.0 (just to be sure) and Firefox 3.0.
• The padding in paragraph is not rendered if there is only a button. (Try to set p {margin-bottom: 1.5em !important})
• I don’t know if worth to target button elements.

¹They’re only an assumption. Not really tested Safari 3.0 and Chorme 1.0 jet.

When you start a business or simply wanna advertise something (like you as a DJ or your bar), the
most powerful (and nearly free) method to promote yourself (or your activity) is
access to social networks. There are many many of those out there, but
the best is definitely Facebook. It’s the most powerful & suitable for this kind of tasks.

The First Step

This platform have everything you need if you know how to use it. The firsts things you have to do for take advantage from using Facebook, without annoing your audience, are:

• Create a Page: not a personal profile or a group.
• Fill it out of informations (and media)!
• Suggest the page to your friends (once).

Update The right name of your page is the name of your business and stop: don’t put in keywords or slogans, because if someone wants to tag you in a status, the phrase become ugly if the pages name is “My name – my slogan – keywords keywords & keywords”.

Why a Page?

The Page is the tool offered by Facebook for who wants to advertise something. Give you statistic on fans: age, sex, location, interaction, unsubscription, hiding statuses etc. Besides you have free advertising on friends of fans: notice suggestions and in the main stream you see what your friends likes. Of course you can, by paying, improve the your advertising program.

The Facebook page have more pros in comparison to the personal profile and the Facebook Group. Let’s see the cons of those two.

Why not the personal profile?

The personal profile is only for persons (at least for pets): maximum 5000 friends. Yeah, you aren’t Obama (about 8.200.000 fans), but Facebook administrator can ban your account, also before friend’s limit. Beside who knows where you’ll become famous?

Do you really think that somebody wanna share the same information with her friends and business that she even know the administrator? People have to be fan and like you in a single click, not be your friend and awaiting your response.

Why not the group?

Facebook Groups are for groups of people who wants to stay in touch for something and have to comunicate internally between them (exactly like a Google Groups). Moreover, every personal account can join in 200 groups at time, infact after a while, someone, who doesn’t know how use facebook, can leave the group because she have reach the limits of groups and find that yours is not interesting.

Besides you can notice that the Group’s wall can be visible only if you enter into the group’s page: a huge obstacle to comunicate with your audience. So you are constrained to comunicate by messages, risking to annoing people and be categorized how SPAM.

Infact one of the pros of use a page is that every statuses published in the page’s wall are readable in the homepage news of every fan between theirs friends!

Others Socials Network

Twitter is like the status of Facebook (and can be integrated), not much newer, but is optimized for this! Sometime isn’t really necessary.

Can be a bit useful MySpace for singers and band, even if you can publish audio & video files also on Facebook, but, once more, this social network is optimized for this kind of tasks.

You can also create tons of social networks accounts (Youtube, Flickr, Vimeo, etc.), but the glue will be always Facebook.

Interact with your audience

Now you have a Facebook Page and other accounts on some other social: so you have to fill those of stuffs! Think about your business: what you can say to the fans?

For istance, if you have a restaurant give out discounts: “if you read it, say it to our waiters and we give you 10% discount today!”; or write out the dish of the day.

If you organize events, after everyone, publish photos and videos or/and invite people to publish them in to your Facebook page.

Be human: give Feedback

If someone publish a photo on your page or say something by mentioning you on Twitter, also a criticism, respond always a soon as possible!

Usually you should respond publicly, if the criticism is constructive and polite. If not, feel free to delete it (if you can) and contact the person privately: explain why you delete the message and ask about that act.

Last Thought: Don’t exaggerate

You can make a Facebook page in a flash, but if you don’t have a half hour in a day to follow your fans and publish stuffs: don’t do it.

And by the way, if you don’t have lots of photos or videos to share, don’t do any other account beyond Facebook. For istance, an youtube account with the last video published a year ago, let think that you’re not active (or out of business).

So don’t underestimate that Social Networking: it’s a real engagement.

Hi! I come back to create my entries in english, but, maybe, I’ll translate this post in italian. I’m editing my wordpress theme for make my posts multilingual! By the way, few months ago, I’ve bought an HTC Magic (Vodafone). I’m a kind of geek and for this reason I’ve decided to install a different version of Android™: Google ION (edited by nk02). Really better, faster, lighter than the pre-installed Vodafone version (I think that is the worst in the known universe). This version have, as unique input method (for now), the HTC’s keyboard, better known as HTCIME. Instead the original version of Android™ have the LatinIME. Let’s start the challenge!

The challenge

Conclusions

If you want the phone keypad (or don’t want to learn to use the qwerty), you are forced to choose the HTCIME with all his bugs and problems. If, instead, you want to use a good qwerty you should use the original LatinIME (with your language package), because gives to YOU the control! Anyway Android™ is a great OS and permit you to install both keyboard (being careful about the both bugs and problems!).

However I’ve tried to install the LatinIME, but maybe go in conflit, with something that I’ll find, and fail the installation :( When I’ll, finally, install it, I’ll inform you (obviously).

Una persona che vuole entrare nel mondo del web design, di solito, non sa mai da dove cominciare. Grafica? HTML? PHP? Javascript? CSS? Una vale l’altra, poi alla fine bisogna sapere tutto (e magari anche bene).

L’importante, comunque, è avere ben chiara in testa la strada da seguire. Io ho cominciato da solo: tutorial, guide on-line, blog (tipo questo), screencast sul web design, etc. Sono ormai 4 anni che vado avanti così, per passione, sto ancora imparando e sicuramente avrò ancora molto da imparare. Ci sono però delle cose che se avessi saputo dall’inizio, avendo preso la strada giusta, avrei imparato molte più cose di quelle che so ora.

1. Le tabelle si usano SOLO per fare le tabelle

“E certo!” voi direte. Invece non è così ovvio per chi è alle prime armi! Per i primi 3 anni ho fatto siti “in tabella” o tabellari, cioè siti con il layout costruito su una tabella (<table>). Questa, infatti, è una delle prime cose che avrei voluto sapere fin dall’inizio. Comunque noto che ancora molti siti, anche apparentemente belli e ben fatti, sono costruiti su una tabella. Ma cosa c’è di così sbagliato nell’usare le tabelle per il layout?

Usando le tabelle avremo problemi del tipo:

• Markup HTML non pulito con grandi moli di codice (inutile): una volta ultimato il sito, potrebbe essere difficile aggiungere qualcosa o fare qualche modifica al layout. Infatti, per esempio, aggiungendo una voce al menù si rischierebbe di incasinare tuttoe, se si è sfortunati, doverlo ristrutturare completamente il layout. Per lo stesso motivo sarebbe difficile identificare il contenuto principale di ogni pagina sia da parte del web designer, sia dai crawler dei motori di ricerca (che non è poco).
• Poca libertà: durante la progettazione/costruzione del layout per fare quello che vogliamo, dovremo a volte incorrere in trucchetti che sporcano ulteriormente il markup, per poi magari non venire proprio perfetti, rischiando pure di creare un sito non cross-browser.

Se poi andate a controllare un paio di annunci di lavoro, le certe aziende richiedono espressamente web designer che progettano siti table-free. Un’altro buon motivo quindi per non imparare a fare siti tabellari. Il mio consiglio quindi è di usare le tabelle solo per intabellare e i <div> per il layout!

2. HTML per il contenuto e CSS per lo stile

Dimenticate i tag <font>, impostandolo nel file CSS; <b> e <i>, utilizzando invece <strong> e <em> per dire al browser di rendere più forte o più enfatizzata una porzione di testo. Non scrivere mai gli stili CSS in linea dentro ai tag nell’attributo style, utilizzare attributi class e id per assegnare gli stili. Non impostare background come attributo al tag <body>. Ma perché tutto questo?

Segregando HTML e CSS, anche se visualizzata senza stili (disabilitanto di CSS) una pagina rimane leggibile e il contenuto rimane chiaro e leggibile. Infatti controllare come la pagina viene visualizzata senza stili è importante, perché è come vedere con gli “occhi” di un crawler che deve indicizzare il nostro sito (per farlo conoscere), o anche come certi cellulari visualizzano il sito. Tenendo conto che comunque anche i non-vedenti navigano in internet con degli Screen Reader, quindi controllando questi aspetti avrete qualche visitatore potenziale in più!

3. FLASH non serve (quasi) mai

Una cosa che non ho mai imparato è creare siti in FLASH (c’ho provato eh) e ultimamente sono piuttosto convinto che FLASH non serva praticamente mai. Certo puoi fare delle figate, ma animazioni basilari si riescono a fare benissimo con Javascript. Si riescono a fare cose parecchio complesse con librerie Javascript come jQuery (UI jQuery), MooTools, Prototype e Script.aculo.us. Librerie tutte piuttosto valide e più o meno tutte permettono di fare le stesse cose. La mia preferita è jQuery, perché ha una filosofia che condivido pienamente: “write less, do more” (scrivi di meno, fai di più).

Ho visto molti siti dove era stato usato flash per fare un semplice menù che al passaggio del mouse evidenziava, in dissolvenza, lo sfondo della voce: una cosa che con tre righe di jQuery e due immagini (se non una sola) si riesce a fare, senza appesantire inutilmente le pagine. Una cosa che riesce bene a flash, però, è la visualizzazione di video, perché è multipiattaforma e bene o male tutti ce l’hanno installato. Migliore quindi di player come Windows Media Player, che esclude chi usa Linux e Mac (ovviamente ci sono i trucchetti per farli funzionare), o anche Quicktime o RealPlayer, multipiattaforma anche loro, ma non tutti ce li hanno.

Infine ecco altro punto a sfavore per FLASH: solo da ottobre 2009 (forse) uscirà la versione di flash per iphone, android & Co quindi per ora anche da cellulare i siti in flash possono essere visualizzati e comunque da ottobre i siti in flash con una connessione 3G ci metteranno millenni a caricarsi. Anche se tutto ciò si può evitare facendo una versione mobile del proprio sito… :)

In ogni caso flash ha accesso al microfono e alla webcam e questo è un buon punto a favore, ma questo non vuol dire che è fatto per fare qualsiasi sito web!

4. Copiare non fa male a nessuno, anzi!

Il web design, fortunatamente, ha a che fare con Internet, dove si condivide tutto e ci si trova di tutto. Quindi perché non sfruttare l’occasione? Se volete fare qualcosa, magari quel qualcosa lo ha già fatto qualcun’altro e magari si è pure fatto aiutare e gli è venuta una cosa più solida e malleabile. Per esempio se volete fare un blog, usate WordPress! Se invece avete bisogno di fare un sito che abbia molte cose che poi debbano essere amministrate da gente che non sa che cosa vuol dire “lavorare sul codice”, o semplicemente persone che non hanno voglia di “lavorare sempre sul codice”, magari potreste utilizzare un CMS! Come per esempio Drupal o Joomla! Potete “guardarvi in giro” anche per cose più semplici, per esempio se dovete fare un calendario a comparsa, per la selezione della data in un form. Oppure dovete costruire il layout di una pagina complessa e piena di contenuti vi conviene utilizzare un framework CSS come 960 o Blueprint.
Quindi prima di fare qualcosa, guardatevi un po’ in giro!

Riassumendo: ci vuole Metodo

Quello che dovete fare è provarle tutte, lasciando spazio alla creatività. Partendo sempre col piede giusto: con ordine! Anche se pensate che il sito che state per fare sarà di cinque pagine statiche (o anche tre), fate sempre una bella e ordinata struttura di cartelle: una per le immagini, una per i file CSS e poi espandetele con sotto-cartelle (o, perdonatemi il termine, sotto-file) specifiche per ogni pagina, magari poi una cartella per gli scripts e una per le librerie in php. Consiglio anche di lavorare modularmente con php sempre e comunque, alla fine è un accorgimento che in futuro ci riserva sempre meno lavoro su modifiche e debugging. Insomma cercate anche di trovare il vostro metodo, il vostro ordine, ma potete scoprirlo solo sperimentando!

Ebbene sì ho deciso di scrivere in Italiano, almeno per questa volta. Ho anche deciso di cosa farmene di questo blog: Diffondo il mio sapere! (anche perché dei cavoli miei non se ne frega nessuno e poi Facebook ce l’ho già!)

Come potete vedere dalla mia descrizione sono un informatico con la passione per il web design, che tra l’altro sta diventando parecchio seria come cosa. Un trucchetto che ho imparato essere molto produttivo con qualsiasi tipo di sito, dal più grande al più piccolo è quello di lavorare modularmente in php.

Innanzitutto, in cosa consiste? Il php ci mette a disposizione la funzione include che ci permette di importare porzioni di testo (o codice) da un’altro file. Quando noi web designer costruiamo un sito delle parti di pagina rimangono sempre identiche (o quasi), come la parte superiore con un eventuale menù (header) e il footer con disclaimer, copyright e cose simili. Perché quindi non mettere queste due parti su due file a parte, senza scriverli uguali in ogni pagina?

Quali saranno i vantaggi lavorando in questo modo? Per esempio fai un sito, bello, ma non con header e footer a parte. Un giorno il tuo cliente ti chiede di mettere la partita iva e il numero di telefono nello spazio in fondo di ogni pagina, tu che fai? Ti metti li a fare copia incolla in fondo ad ogni pagina, magari il tuo cliente si è sbagliato una cifra, devi rifare tutto da capo?
Se avevi il tuo bel file footer.inc, lo aprivi scrivevi e avevi finito!
Questo magari è un problema da poco, ma pensate se il vostro cliente vi chiede di aggiungere una pagina al sito e il menù comincia ad avere troppi link e dovete, quindi, pensare di cambiare la struttura di questo stramaledetto menù!!!

Vai alla Demo Sarica codice sorgente

Come funziona? Beh intanto vediamo com’è strutturato l’esempio che ho creato.

• inc
  • footer.inc
  • header.inc
• index.php
• about.php
• contacts.php
• style.css

Vediamo che nella cartella “inc” ci sono i nostri protagonisti: header.inc e footer.inc.

Quindi basta includerli all’inizio e alla fine di ogni pagina. Notate che prima di includere l’header imposto una variabile $PAG che viene usata in header.inc per determinare in quale pagina è stato incluso.

Su footer.inc non c’è molto da dire: è indipendente dalla pagina in cui è stato incluso e questo basta e avanza. Invece header.inc è più complesso, dopotutto contiene molte più informazioni importanti dal punto di vista del browser, dei crowler di google, ma anche per l’orientamento dell’utente.

La prima cosa che incontriamo, in header.inc, è un array ($pages) che contiene le informazioni di ogni pagina: il suo nome, il valore da inserire nel tag <title>, le parolechiave specifiche per ogni pagina (keywords), ma può anche contenere il nome del foglio di stile da utilizzare in quella specifica pagina. Poi c’è la pappardella di <!DOCTIPE e i vari meta tag, link a fogli di stile e eventualmente a librerie javascript.
Inizia quindi il vero e proprio header con il titolo e un foreach che scorre l’array delle pagine per scrivere il menù.

Questa che vi ho mostrato è un modalità, si possono fare più file diversi e suddividere la pagina in più sezioni. Come per esempio dividere il menù dall’header, o aggiungere una “sidebar”. Insomma sbizzarritevi!

Spero di esservi stato utile! Questa lezione l’ho fatta partendo da un idea di chris coyer nel suo sito css-tricks.