Scarica Boilerplate 1.0 Aggiornato al 21 Marzo

Documentazione Boilerplate Mantieni i suggerimenti e i link o Boilerplate "stripped" Niente commenti, solo codice. o Boilerplate custom 100% hipster. nuovo!

Clicca sulla tua opzione favorita per ogni funzionalità! Le opzioni di base sono evidenziate.

Attivatore HTML5

Nope Modernizr html5shiv

Configurazione Server

Nope .htaccess web.config nginx.conf

Google Analytics

Frammento per Analytics Nope

Scarica! Queste opzioni non sono abbastanza? Vai a Initializr for more!

HTML5 Boilerplate 1.0!

Lunedì, 21 Marzo, 2011

HTML5 Boilerplate oltre a fornirti un solido contributo per una consistenza cross-browser, porta con se una fantastica documentazione, un build-script per l'ottimizzazione del sito e un costruttore per un boilerplate personalizzato. In aggiunta a questo, adesso supportiamo anche lighttpd, Google App Engine, e NodeJS con configurazioni server ottimizzate (accanto ad Apache, Nginx, e IIS) e abbiamo ridotto la dimensione totale dell' H5BP del 50%.

Uno sguardo veloce al perché di tutto ciò

Documentazione!

Adesso noi abbiamo sicuramente una documentazione globale, contribuita dalla comunità e disegnata/implementata da Mickael Daniel.

Sentiti libero di scavare a fondo su qualsiasi parte di codice. Noi abbiamo già documentato cosa succede e il perché è una bella idea. Qualche pagina di cui potrai apprezzare la lettura: Il Markup, Lo Stile, Migliorarlo, e Preparsi a cominciare. Adesso abbiamo anche qualche video per guidarti attraverso il progetto.

Soddisfa facilmente strumenti di misurazione delle performance come YSlow and PageSpeed.

Il Build-Script del Boilerplate

Il Build-Scriptdel Boilerplate è pronto dal primo momento. Conosci tutti i trucchi per l'ottimizzazione dei siti che Steve Souders suggerisce come buone idee? Sei a quattro battiture da possederne il 100%. Adesso tu puoi:

  • Combinare e minificare JavaScript (tramite yui-compressor)
  • Combinare e minificare CSS
  • Ottimizzare JPG e PNG (tramite jpegtran e optipng), risparmiando dal 15 al 50% sul peso della pagina
  • Rimozione del codice finalizzato al solo sviluppo (console.log, profiling, test suite)
  • Minificazione di base o aggressiva (tramite htmlcompressor)
  • Revisione dei nomi dei componenti in maniera tale da poter utilizzare una massiva (scadenze a un'anno) senza conflitti di cache.
  • Aggiorna il file .htaccess per usare una maggiore cache
  • Aggiorna il tuo HTML per far riferimento a questi nuovi super ottimizzati file di CSS e JS
  • Aggiorna il tuo HTML per utilizzare la versione minificata di jQuery al posto di quella di sviluppo
  • Rimuove i riferimenti inutili dall'HTML (come le favicon nella cartella principale)
  • Build concorde col tipo di ambiente scelto: produzione, test o sviluppo

Insieme alla configurazione del server (come l'.htaccess), abbiamo visto una riduzione totale del peso della pagina da 120k a 30k. Noi garantiamo un voto di grado A con YSlow e Google PageSpeed quando si usa il build-script insieme al file di configurazione del server. (Ok, forse non "garantiamo", ma i tuoi genitori saranno sicuramente fieri di te. :)

379k prima. 170k dopo. I risultati sono dall'utilizzo del build-script su una pre-relase 1.0 del sito html5boilerplate.com stesso. Noi forniamo una configurazione di base per Apache, IIS, Ngix, Lighttpd, Google App Engine, and NodeJS.
Personalizza la tua personale versione del boilerplate in base ai tuoi gusti.

Boilerplate Personalizzato

Oh diavolo si. Hai chiesto questi, ora lo hai: un builder personalizzato! Probabilmente hai guardato Initializr di Jonathan Verrecchia. L'abbiamo integrato nel progetto, quindi adesso hai un pieno controllo nello scegliere solo ciò che desideri.

  • Scegli quali classi condizionali vuoi: nessuna, vecchi IE o tutte le versioni di IE
  • Vuoi gli stili per palmari? Adesso li puoi scegliere
  • Se ti piacerebbe avere jQuery minificato, puoi averlo oppure allo stesso tempo non avere JavaScript o jQuery.
  • Ami html5shiv? Adesso lo puoi usare al posto di modernizr
  • File di configurazione per IIS, Nginix o nessuno a disposizione per la tua scelta
  • Se Google Analytics non ti riguarda, puoi scegliere di non averlo

Ora, accanto alla documentazione, al build-script e ad initializr, abbiamo alcuni miglioramenti nel boilerplate di base:

Build-Script

  • Riscrittura massiva, adesso puoi definire su quali HTML, CSS, JS operare tramite il file di configurazione project.properties. Questo ti permette di utilizzare il build script anche su una gerarchia di cartelle personalizzata, anche con progetti indipendenti da H5BP.
  • Gli ambienti sono definibili.
  • gli header di scadenza nell'htaccess sono aggiornati ad 1 anno non appena i file sono rivisti
  • Aggiunta la possibilità di una cartella di sorgenti nella cofigurazione di build, di conseguenza i tuoi file sorgenti possono essere in una cartella differente da quella dove saranno i file generati (utile con altri CMS/framework come Django).

index.html

style­.css

  • Aggiunta la classe di supporto .focusable che estende la classe .visuallyhidden per permettere agli elementi di essere messi a fuoco quando si naviga tramite tastiera.
  • Le ancore non sono più resettate. Praticamente il nostro reset è l'unione del recente update di Eric Meyer del suo reset CSS e del HTML5 Doctor reset.
  • Una lista non ordinata dentro un elemento nav non ha più i margini.
  • Tutte le classi di supporto sono adesso dopo gli stili primari per assicurare una corretta sovrascrittura senza l'annullamento da parte dei reset
  • .visuallyhidden non è più camelCase, per essere consistenti col formato degli altri nomi di classe
  • Aggiornata la specificità della classe .visuallyhidden per assicurarsi che sovrascriva tutte le altre classi
  • Rimosso il reset sulle immagini dentro elementi di tipo tabella a causa della brutta rappresentazione nel caso di celle multiriga. L'allineamento dei bropwser di default baseline per le immagini funziona meglio di quello top.
  • Aumentato il margin-left per gli ol, per permettere liste con numeri a due cifre.
  • Aggiunto un reset di stampa per i filtri proprietari di IE.
  • Gli stili di stampa non stampano più collegamenti con hash o con JavaScript
  • Aggiornati sub/sup css per permettere di essere indipendenti dal line-height, adesso potrai fare apici/pedici senza preoccuparti

Progetto

  • Aggiunto il file humans.txt in maniera tale da poter specificare autore e tool utilizzati
  • Rimosso gli strumenti di profilazione YUI. Probabilmente non erano neanche utilizzati.
  • Rimosso il QUnit test suite. Non c'è necesittà di distribuirlo all'interno.

Configurazioni Webserver

.htaccess
  • .htaccesse più documentato adesso. Dagli una lettura!
  • Cambiato il mimetype dei file .ico in "image/x-icon".
  • Il file di manifesto HTML adesso usa l'estensione .appcache al posto di .manifest, come da http://html5.org/r/5812.
  • Forzata la decompressione per header che ne accettano la codifica, grazie alla ricerca Yahoo!
  • Abbiamo abbassato alcune direttive nel caso in cui ti trovi su un server che non accetta i mod_headers. (Che è una cosa assurda!)
  • Bloccato l'accesso alle cartelle .git e .svn.
  • Eliminati gli avvisi nella console di Chrome riguardo al download dei font in formato WOFF.
  • Altre ottimizzazioni sono disponibili se attivi il file .htaccess nella tua configurazione httpd.conf.
  • .htaccess adesso fa cache anche dei file .htc
  • Spostati tutti i file di configurazione (ad eccezione dell'.htaccess di apache) sulla nuova repository html5-boilerplate-server-configs. Se non usi Apache vai li per scaricare la configurazione.
  • Aggiornati i file .htaccess e mime.types per il formato ogg.
  • Risolta la regressione dei file EOT esclusi dalla compressione DEFLATE.
  • Indipendenza dalla versione si Apache: Usa mod_filter per le compressioni, con un fallback alla direttiva AddOutputFilterByType per le versioni più datate
  • Aggiunti i mimetype di plugin/estensioni per Safari, Chrome, Firefox
nginx
  • Ripulite le direttive di scadenza della cache.
  • Adesso incluse nella compressione gzip anche SVG e i formati font
  • risolto il bug della scadenza delle intestazioni
IIS
  • Aggiunto il mimetype per i video in flash nella configurazione del server IIS
  • Risolti le incongruenzae sui mimetype che non ne permettevano la cache

Praticamente sono state aggiornate molte cose col passaggio alla 1.0. Qui ci sono i 220 commit dall'ultimo rilascio, portati a te da oltre 102 contributori.Ci si potrebbe chiedere se, ho bisogno di aggiornare i siti esistenti? Risposta breve: no, sei bravo.

Percorriamolo insieme, ora

index.html

<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]>    <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">

  <!-- Forza sempre l'uso dell'ultimo motore di rendering di IE (anche nelle intranet) & Chrome Frame
       Da rimuovere se usi il file .htaccess -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title></title>
  <meta name="description" content="">
  <meta name="author" content="">

  <!-- Viewport per i browser mobile ottimizzato: j.mp/bplateviewport -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Metti i file favicon.ico & apple-touch-icon.png nella root del tuo dominio e cancella queste righe -->
  <link rel="shortcut icon" href="/favicon.ico">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">


  <!-- CSS : è implicito media="all" -->
  <link rel="stylesheet" href="css/style.css?v=2">

  <!-- Decommenta se ti stai rivolgendo specificamente a browser mobile meno avanzati
  <link rel="stylesheet" media="handheld" href="css/handheld.css?v=2">  -->

  <!-- Tutti i JavaScript vanno in fondo, ad eccezione di Modernizr che abilita gli elementi HTML5 e il rilevamento delle funzionalità supportate -->
  <script src="js/libs/modernizr-1.7.min.js"></script>

</head>

<body>

  <div id="container">
    <header>

    </header>
    <div id="main" role="main">

    </div>
    <footer>

    </footer>
  </div> <!--! fine del #container -->


  <!-- JavaScript in fondo per un caricamento della pagina più veloce -->

  <!-- Carica jQuery dal CDN di Google. ripiega su quello locale se necessario -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
  <script>window.jQuery || document.write('<script src="js/libs/jquery-1.5.1.min.js">\x3C/script>')</script>


  <!-- script concatenati e minificati tramite ant build script-->
  <script src="js/plugins.js"></script>
  <script src="js/script.js"></script>
  <!-- fine scripts-->


  <!--[if lt IE 7 ]>
    <script src="js/libs/dd_belatedpng.js"></script>
    <script>DD_belatedPNG.fix('img, .png_bg'); // aggiusta qualsiasi tag <img> o qualsiasi proprietà background-image di .png_bg. Anche per favore leggi goo.gl/mZiyb </script>
  <![endif]-->


  <!-- mathiasbynens.be/notes/async-analytics-snippet cambia la stringa UA-XXXXX-X con l'ID del tuo sito -->
  <script>
    var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
    (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
    g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
    s.parentNode.insertBefore(g,s)}(document,'script'));
  </script>

</body>
</html>

style­.css

/**
 * HTML5 ✰ Boilerplate
 *
 * style.css contiene reset, normalizzazione dei font e alcuni stili di base
 *
 * credito lasciato dove dovuto.
 * i seguenti progetti sono stati fonte di grande ispirazione:
 * - yui.yahooapis.com/2.8.1/build/base/base.css
 * - camendesign.com/design/
 * - praegnanz.de/weblog/htmlcssjs-kickstart
 */


/**
 * html5doctor.com Reset Stylesheet (Reset Reloaded di Eric Meyer + HTML5 baseline)
 * v1.6.1 2010-09-17 | Autori: Eric Meyer & Richard Clark
 * html5doctor.com/html-5-reset-stylesheet/
 */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

blockquote, q { quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }

ins { background-color: #ff9; color: #000; text-decoration: none; }

mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }

del { text-decoration: line-through; }

abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }

table { border-collapse: collapse; border-spacing: 0; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

input, select { vertical-align: middle; }


/**
 * Normalizzazione dei font ispirata dalla libreria YUI fonts.css: developer.yahoo.com/yui/
 */

body { font:13px/1.231 sans-serif; *font-size:small; } /* hack mantenuto per preservare la specificità */
select, input, textarea, button { font:99% sans-serif; }

/* Uniformati gli stili monospace:
   en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome */
pre, code, kbd, samp { font-family: monospace, sans-serif; }


/**
 * Stili minimi di base.
 */

/* mostra sempre la scrollbar nei browser non-IE */
html { overflow-y: scroll; }

/* Sistemazione accessibile del focus people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active { outline: none; }

ul, ol { margin-left: 2em; }
ol { list-style-type: decimal; }

/* Rimuove i margini per le liste di navigazione */
nav ul, nav li { margin: 0; list-style:none; list-style-image: none; }

small { font-size: 85%; }
strong, th { font-weight: bold; }

td { vertical-align: top; }

/* Imposto sub, sup senza influenzare la line-height: gist.github.com/413930 */
sub, sup { font-size: 75%; line-height: 0; position: relative; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

pre {
  /* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */
  white-space: pre; white-space: pre-wrap; word-wrap: break-word;
  padding: 15px;
}

textarea { overflow: auto; } /* www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars/ */

.ie6 legend, .ie7 legend { margin-left: -7px; } 

/* allinea i checkbox, radio, text input con le rispettive label da: Thierry Koblentz tjkdesign.com/ez-css/css/base.css  */
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; }
.ie7 input[type="checkbox"] { vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }

/* Ccursore a forma di mano sugli elementi input cliccabili */
label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; }

/* I browser webkit aggiungono un margine esterno di 2px agli elementi dei form */
button, input, select, textarea { margin: 0; }

/* Colori per la validazione dei form */
input:valid, textarea:valid   {  }
input:invalid, textarea:invalid {
   border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red;
}
.no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; }


/* Queste dichiarazioni di selezione devono essere separate.
   Niente text-shadow: twitter.com/miketaylr/status/12228805301
   Inoltre: rosa acceso. */
::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; }
::selection { background:#FF5E99; color:#fff; text-shadow: none; }

/* j.mp/webkit-tap-highlight-color */
a:link { -webkit-tap-highlight-color: #FF5E99; }

/* sistema i padding dei button in IE:
   www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */
button {  width: auto; overflow: visible; }

/* ridimensionamento bicubico per le IMG ridimensionate lato client:
   code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */
.ie7 img { -ms-interpolation-mode: bicubic; }

/**
 * Dovresti modificare queste...
 */

body, select, input, textarea {
  /* #444 appare meglio del nero: twitter.com/H_FJ/statuses/11800719859 */
  color: #444;
  /* imposta il font di base qui, per applicarlo in modo uniforme */
  /* font-family: Georgia, serif;  */
}

/* Gli header (h1,h2,ecc) non hanno un font-size o un margine di default, dovrai definirli da te */
h1, h2, h3, h4, h5, h6 { font-weight: bold; }

a, a:active, a:visited { color: #607890; }
a:hover { color: #036; }


/**
 * Stili primari
 *
 * Autore:
 */
















/**
 * Classi di supporto non semantiche
 */

/* per l'image replacement */
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }

/* Nascosto sia agli screenreader che ai browser:
   css-discuss.incutio.com/wiki/Screenreader_Visibility */
.hidden { display: none; visibility: hidden; }

/* Nascosto solo visivamente, ma leggibile dagli screenreader da: Jon Neal.
  www.webaim.org/techniques/css/invisiblecontent/  &  j.mp/visuallyhidden */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
/* Estende la classe .visuallyhidden per permettere agli elementi di essere messi a fuoco quando si naviga da tastiera: drupal.org/node/897638 */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Nascosto visivamente e agli screenreader, ma mantiene lo spazio nel layout */
.invisible { visibility: hidden; }

/* Il Magnifico CLEARFIX: Aggiornato per impedire il collasso dei margini negli elementi figli
   j.mp/bestclearfix */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
/* Aggiusto il clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
.clearfix { zoom: 1; }



/**
 * Media query per un design ricettivo
 *
 * Vanno dopo gli stili principali in modo da sovrascriverli con successo.
 */

@media all and (orientation:portrait) {
  /* Adattamenti per la modalità ritratto */

}

@media all and (orientation:landscape) {
  /* Adattamenti per la modalità paesaggio */

}

/* Grade-A Mobile Browser (Opera Mobile, iPhone Safari, Android Chrome)
   considera questo: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */
@media screen and (max-device-width: 480px) {


  /* Decommenta se non vuoi che iOS e WinMobile ottimizzino il testo per te j.mp/textsizeadjust */
  /* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */
}


/**
 * Stili di stampa
 *
 * In linea per evitare ulteriori chiamate HTTP: www.phpied.com/delay-loading-your-print-css/
 */
@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important;
  -ms-filter: none !important; } /* Il nero si stampa più velocemente: sanbeiji.com/archives/953 */
  a, a:visited { color: #444 !important; text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Non mostra i link per le immagini, o per i link interni ai JavaScript */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
  tr, img { page-break-inside: avoid; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3{ page-break-after: avoid; }
}

plugins.js

// utilizzo: log('dentro grandeFunzione', this, argomenti);
// paulirish.com/2009/log-a-lightweight-wrapper-for-consolelog/
window.log = function(){
  log.history = log.history || [];   // memorizza i log in un array per riferimento
  log.history.push(arguments);
  arguments.callee = arguments.callee.caller;  
  if(this.console) console.log( Array.prototype.slice.call(arguments) );
};
// rende sempre sicuro l'utilizzo di console.log
(function(b){function c(){}for(var d="assert,count,debug,dir,dirxml,error,exception,group,groupCollapsed,groupEnd,info, log,markTimeline,profile,profileEnd,time,timeEnd,trace,warn".split(","),a;a=d.pop();)b[a]=b[a]||c})(window.console=window.console||{});


// metti tutti i plugin/supporti per jQuery qui, al posto di aver script separati lenti.

script.js

/* Autore:

*/

robots.txt

# www.robotstxt.org/
# www.google.com/support/webmasters/bin/answer.py?hl=en&answer=156449

User-agent: *

humans.txt

/* la responsabilità umana & e il colophon */
/* humanstxt.org */


/* GRUPPO */
  <your title>: <your name>
  Site: 
  Twitter: 
  Location: 

/* GRAZIE */
  Names (& URL): 

/* SITO */
  Standards: HTML5, CSS3
  Components: Modernizr, jQuery
  Software:
  

                                    
                               -o/-                       
                               +oo//-                     
                              :ooo+//:                    
                             -ooooo///-                   
                             /oooooo//:                   
                            :ooooooo+//-                  
                           -+oooooooo///-                 
           -://////////////+oooooooooo++////////////::    
            :+ooooooooooooooooooooooooooooooooooooo+:::-  
              -/+ooooooooooooooooooooooooooooooo+/::////:-
                -:+oooooooooooooooooooooooooooo/::///////:-
                  --/+ooooooooooooooooooooo+::://////:-   
                     -:+ooooooooooooooooo+:://////:--     
                       /ooooooooooooooooo+//////:-        
                      -ooooooooooooooooooo////-           
                      /ooooooooo+oooooooooo//:            
                     :ooooooo+/::/+oooooooo+//-           
                    -oooooo/::///////+oooooo///-          
                    /ooo+::://////:---:/+oooo//:          
                   -o+/::///////:-      -:/+o+//-         
                   :-:///////:-            -:/://         
                     -////:-                 --//:        
                       --                       -:

.htaccess

# File di configurazione di Apache
# httpd.apache.org/docs/2.2/mod/quickreference.html

# Nota che il file .htacces è un'aggiunta, questa logica dovrebbe essere già nel tuo file di configurazione Apache se possibile
# httpd.apache.org/docs/2.2/howto/htaccess.html

# Le tecniche adottate all'interno sono state adattate per tutto, includendo:
#   Kroc Camen: camendesign.com/.htaccess
#   perishablepress.com/press/2006/01/10/stupid-htaccess-tricks/
#   File .htaccess d'esempio per CMS MODx: modxcms.com


###
### Se utilizzi un webserver diverso da Apache considera che:
### github.com/paulirish/html5-boilerplate-server-configs
###



# ----------------------------------------------------------------------
# Migliore fruizione del sito per gli utenti IE
# ----------------------------------------------------------------------

# Forza l'uso dell'ultima versione di rendering di IE, anche nei vari casi in cui potrebbe ricadere nella modalità di IE7
# github.com/rails/rails/commit/123eb25#commitcomment-118920
# Usa ChromeFrame se è installato, per una migliore esperienza per i poveri utenti di IE

<IfModule mod_setenvif.c>
  <IfModule mod_headers.c>
    BrowserMatch MSIE ie
    Header set X-UA-Compatible "IE=Edge,chrome=1" env=ie
  </IfModule>
</IfModule>

<IfModule mod_headers.c>
# 
# Poiché X-UA-Compatible non viene spedito ai non-IE (per risparmiare bytes nell'header), dobbiamo informare i proxy che il contenuto cambia in base allo User Agent
# 
  Header append Vary User-Agent
# Il controllo della cache è settato solo se mod_headers è abilitato, per cui non è necessario dichiararlo
</IfModule>


# ----------------------------------------------------------------------
# Richieste AJAX cross-domain
# ----------------------------------------------------------------------

# Fornisce le richieste AJAX cross-domain disabilitate.   
# enable-cors.org
# code.google.com/p/html5security/wiki/CrossOriginRequestSecurity

#  <IfModule mod_headers.c>
#    Header set Access-Control-Allow-Origin "*"
#  </IfModule>



# ----------------------------------------------------------------------
# Accesso webfont
# ----------------------------------------------------------------------

# 
# Permette l'accesso da qualsiasi dominio per i webfont
# in alternativa puoi metter nella lista bianca
# i tuoi sottodomini come "sub.domain.com"
# 

<FilesMatch "\.(ttf|otf|eot|woff|font.css)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>



# ----------------------------------------------------------------------
# MIME corrispondente per tutti i file
# ----------------------------------------------------------------------

# audio
AddType audio/ogg                      oga ogg

# video
AddType video/ogg                      ogv
AddType video/mp4                      mp4
AddType video/webm                     webm

# Fornitura appropriata dell'svg. Richiesto per l'utilizzo di font svg sull'iPAD
#   twitter.com/FontSquirrel/status/14855840545
AddType     image/svg+xml              svg svgz 
AddEncoding gzip                       svgz
                                       
# webfonts                             
AddType application/vnd.ms-fontobject  eot
AddType font/truetype                  ttf
AddType font/opentype                  otf
AddType application/x-font-woff              woff

# tipi assortiti                                      
AddType image/x-icon                   ico
AddType image/webp                     webp
AddType text/cache-manifest            appcache manifest
AddType text/x-component               htc
AddType application/x-chrome-extension crx
AddType application/x-xpinstall        xpi
AddType application/octet-stream       safariextz



# ----------------------------------------------------------------------
# Permette la concatenazione da uno specifico js o css  
# ----------------------------------------------------------------------

# 
# permette la concatenazione da uno specifico js o css
#
# per esempio dentro lo script script.combined.js puoi avere
#
#   <!--#include file="jquery-1.4.2.js" -->
#   <!--#include file="jquery.idletimer.js" -->
#
# e loro saranno inclusi in un unico file
# 
#
# 
# Questo non è utilizzato in boilerplate come descritto. Potresti scegliere di nominare i tuoi file in questa maniera per avvalerti di una minificazione e concatenazione manuale.
# 
# Disabilitato di default.

# <FilesMatch "\.combined\.(js|css)$">
#         Options +Includes
#         SetOutputFilter INCLUDES
# </FilesMatch>



# ----------------------------------------------------------------------
# compressione gzip
# ----------------------------------------------------------------------

<IfModule mod_deflate.c>


# forza la decompressione per gli header distorti 
# developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping/
<IfModule mod_setenvif.c>
  <IfModule mod_headers.c>
    SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s,?\s(gzip|deflate)?|X{4,13}|~{4,13}|-{4,13})$ HAVE_Accept-Encoding
    RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
  </IfModule>
</IfModule>
# html, txt, css, js, json, xml, htc:
<IfModule filter_module>
  FilterDeclare   COMPRESS
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type /text/(html|css|javascript|plain|x(ml|-component))/
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type /application/(javascript|json|xml|x-javascript)/
  FilterChain     COMPRESS
  FilterProtocol  COMPRESS  change=yes;byteranges=no
</IfModule>

<IfModule !mod_filter.c>
  # Versioni vecchie di Apache
  AddOutputFilterByType DEFLATE text/html text/plain text/css application/json
  AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript 
  AddOutputFilterByType DEFLATE text/xml application/xml text/x-component
</IfModule>

# webfonts e svg:
  <FilesMatch "\.(ttf|otf|eot|svg)$" >
    SetOutputFilter DEFLATE
  </FilesMatch>
</IfModule>



# ----------------------------------------------------------------------
# Header di scadenza (per un migliore controllo della cache)
# ----------------------------------------------------------------------

# 
# queste sono scadenze parecchio nel futuro
# questi presumono che tu controlli le versioni coi parametri di query cachebusting come:
#   <script src="application.js?20100608">
# in aggiunta, considera che i proxy non aggiornati potrebbero non fare cache
# 
#   www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/

# 
# se non usi i nomi per distinguere le versioni, abbassa i css e i js a qualcosa del tipo "access plus 1 week" 
# 

<IfModule mod_expires.c>
  ExpiresActive on

# Probabilmente sarebbe meglio mettere nella lista bianca le regole di scadenza? Forse.
  ExpiresDefault                          "access plus 1 month"

# cache.appcache ha bisogno di essere ri-richiesto in FF 3.6 (grazie a  Remy ~Introducing HTML5)
  ExpiresByType text/cache-manifest       "access plus 0 seconds"



# il tuo documento html
  ExpiresByType text/html                 "access plus 0 seconds"
  
# data
  ExpiresByType text/xml                  "access plus 0 seconds"
  ExpiresByType application/xml           "access plus 0 seconds"
  ExpiresByType application/json          "access plus 0 seconds"

# feed rss
  ExpiresByType application/rss+xml       "access plus 1 hour"

# favicon (non può essere rinominata) 
  ExpiresByType image/x-icon              "access plus 1 week" 

# media: immagini, video, audio
  ExpiresByType image/gif                 "access plus 1 month"
  ExpiresByType image/png                 "access plus 1 month"
  ExpiresByType image/jpg                 "access plus 1 month"
  ExpiresByType image/jpeg                "access plus 1 month"
  ExpiresByType video/ogg                 "access plus 1 month"
  ExpiresByType audio/ogg                 "access plus 1 month"
  ExpiresByType video/mp4                 "access plus 1 month"
  ExpiresByType video/webm                "access plus 1 month"
  
# file htc (css3pie)
  ExpiresByType text/x-component          "access plus 1 month"
  
# webfonts
  ExpiresByType font/truetype             "access plus 1 month"
  ExpiresByType font/opentype             "access plus 1 month"
  ExpiresByType font/woff                 "access plus 1 month"
  ExpiresByType image/svg+xml             "access plus 1 month"
  ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
    
# css e javascript
  ExpiresByType text/css                  "access plus 2 months"
  ExpiresByType application/javascript    "access plus 2 months"
  ExpiresByType text/javascript           "access plus 2 months"
  
  <IfModule mod_headers.c>
    Header append Cache-Control "public"
  </IfModule>
  
</IfModule>



# ----------------------------------------------------------------------
# Rimozione ETag
# ----------------------------------------------------------------------

# 
# Poiché stiamo mandando scadenze lontane nel futuro, non abbiamo bisogno di ETag per i contenuti statici.
# developer.yahoo.com/performance/rules.html#etags
FileETag None



# ----------------------------------------------------------------------
# Ferma il flickering in IE al rollover ottenuto con i CSS
# ----------------------------------------------------------------------

# Le direttive che seguono fermano il flickering in IE al rollover ottenuto con i CSS in combinazione con le regole  "ExpiresByType" per le immagini (vedi sopra)
# Se necessario, decommenta le seguenti regole.

# BrowserMatch "MSIE" brokenvary=1
# BrowserMatch "Mozilla/4.[0-9]{2}" brokenvary=1
# BrowserMatch "Opera" !brokenvary
# SetEnvIf brokenvary 1 force-no-vary



# ----------------------------------------------------------------------
# Settagi dei cookie per gli iframe
# ----------------------------------------------------------------------

# Permette ai cookie di essere impostati dagli iframe (solo IE)
# Se richiesto, decommenta e specifica i percorsi o le espressioni regolari nella direttiva di Location

# <IfModule mod_headers.c>
#   <Location />
#     Header set P3P "policyref=\"/w3c/p3p.xml\", CP=\"IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT\""
#   </Location>
# </IfModule>



# ----------------------------------------------------------------------
# Inizio riscrittura del motore
# ----------------------------------------------------------------------

# Abilitazione del motore di riscrittura se necessario per le seguenti funzionalità.

<IfModule mod_rewrite.c>
  RewriteEngine On
</IfModule>



# ----------------------------------------------------------------------
# Sopprimi o forza il "www." all'inizio dell'URL
# ----------------------------------------------------------------------

# 
# Lo stesso contenuto non dovrebbe mai essere disponibile a due diversi URL, specialmente con e senza "www." all'inizio, questo perchè potrebbe creare dei problemi SEO (contenuti duplicati).
# Questo il motivo per cui dovresti scegliere una delle due alternative e ridirigere l'altra sulla prima.
# 

# Di default è attiva la prima.
# Ricorda: URL corti sono più sexy.
# no-www.org/faq.php?q=class_b

# 
# Se comunque vuoi utilizzare la seconda opzione, commenta la riga dell'opzione 1 e decommenta quella della 2.
# IMPORTANTE: MAI USARE LE DUE REGOLE ASSIEME!
# 

# ----------------------------------------------------------------------

# 
# Opzione 1:
# Riscrittura "www.domain.com -> domain.com"
# 

<IfModule mod_rewrite.c>
  RewriteCond %{HTTPS} !=on
  RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
  RewriteRule ^(.*)$ http://%1/$1 [R=301,L]
</IfModule>

# ----------------------------------------------------------------------

# 
# Opzione 2:
# Per riscrivere "domain.com -> www.domain.com" decommenta le seguenti riga.
# Sappi che la seguente regola potrebbe essere una cattiva idea se usi sottodomini "reali"  per certe parti del tuo sito.
# 

# <IfModule mod_rewrite.c>
#   RewriteCond %{HTTPS} !=on
#   RewriteCond %{HTTP_HOST} !^www\..+$ [NC]
#   RewriteCond %{HTTP_HOST} (.+)$ [NC]
#   RewriteRule ^(.*)$ http://www.%1/$1 [R=301,L]
# </IfModule>



# ----------------------------------------------------------------------
# Aggiungi/Rimuovi gli slash finali agli url (nel caso in cui non siano file)
# ----------------------------------------------------------------------

# 
# Google tratta gli URL con lo slash finale e senza in maniera diversa
# Forzare lo slash finale è di solito preferito, ma la cosa importante è che uno reindirizza all'altro
# 

# Di default l'opzione 1 (forza gli slash finali) è attiva.
# http://googlewebmastercentral.blogspot.com/2010/04/to-slash-or-not-to-slash.html
# http://www.alistapart.com/articles/slashforward/
# http://httpd.apache.org/docs/2.0/misc/rewriteguide.html#url Problema degli slash finali

# ----------------------------------------------------------------------

# 
# Opzione 1:
# Riscrittura "domain.com/foo -> domain.com/foo/"
# 

<IfModule mod_rewrite.c>
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_URI} !(\.[a-zA-Z0-9]{1,5}|/|#(.*))$
  RewriteRule ^(.*)$ /$1/ [R=301,L]
</IfModule>

# ----------------------------------------------------------------------

# 
# Opzione 2:
# Riscrittura "domain.com/foo/ -> domain.com/foo"
# 

#<IfModule mod_rewrite.c>
#  RewriteRule ^(.*)/$ /$1 [R=301,L]
#</IfModule>



# ----------------------------------------------------------------------
# Cache busting incorporata basata sui nomi dei file
# ----------------------------------------------------------------------

# 
# Se non usi il build script per gestire la revisione dei file, potresti considerare l'opportunità di attivare questa regola, che reindirizza tutte le richieste per /css/all.20110203.css a /res/all.css
# 

# Per capire perché questo è importante ed è migliore di all.css?v1231, leggi:
# github.com/paulirish/html5-boilerplate/wiki/Version-Control-with-Cachebusting

# Decommenta per attivare.
# <IfModule mod_rewrite.c>
#   RewriteCond %{REQUEST_FILENAME} !-f
#   RewriteCond %{REQUEST_FILENAME} !-d
#   RewriteRule ^(.+)\.(\d+)\.(js|css|png|jpg|gif)$ $1.$3 [L]
# </IfModule>


	
# ----------------------------------------------------------------------
# Previene gli avvisi di certificati SSL
# ----------------------------------------------------------------------

# 
# Riscrive le richieste sicure per prevenire gli avvisi di certificati SSL
# per esempi previene https://www.domain.com quando il tuo certificato permette solo https://secure.domain.com 
# Decommenta le riga seguenti per utilizzare questa funzionalità.
# 

# <IfModule mod_rewrite.c>
#   RewriteCond %{SERVER_PORT} !^443
#   RewriteRule (.*) https://example-domain-please-change-me.com/$1 [R=301,L]
# </IfModule>



# ----------------------------------------------------------------------
# Previene gli errori 404 per i reindirizzamenti a cartelle non esistenti
# ----------------------------------------------------------------------

# 
# senza -MultiViews, Apache ritornerà un 404 per un rewrite se una cartella con lo stesso nome non esiste per esempio /blog/hello : webmasterworld.com/apache/3808792.htm
# 

Options -MultiViews 



# ----------------------------------------------------------------------
# pagina 404 personalizzata
# ----------------------------------------------------------------------

# Puoi aggiungere pagine personalizzate per gestire gli errori 500 e 403 facilmente, se lo vuoi.
ErrorDocument 404 /404.html



# ----------------------------------------------------------------------
# codifica UTF-8
# ----------------------------------------------------------------------

# usa l'encoding utf-8 per qualsiasi cosa servita come text/plain o text/html
AddDefaultCharset utf-8

# forza utf-8 per certi formati
AddCharset utf-8 .html .css .js .xml .json .rss



# ----------------------------------------------------------------------
# Un po di sicurezza in più
# ----------------------------------------------------------------------


# 
# Vogliamo pubblicizzare l'attuale versione di Apache che stiamo utilizzando? Probabilmente no.
# Questo può essere abilitato solo se usi httpd.conf - Non funzionerà nel file .htaccess
# 
# ServerTokens Prod


# 
# "-Indexes" bloccherà gli utenti dall navigare le cartelle senza un documento di default
# Di solito dovresti lasciarlo attivo, poiché non dovresti permettere a chiunque di navigare tra le cartelle del tuo server (che include anche le cartelle private come per esempio quelle di sistema di un'eventuale CMS)
# 
# Options -Indexes


# 
# Blocca l'accesso alle cartelle nascoste, quelle il cui nome inizia con un punto.
# Questo include cartelle utilizzate per il controllo di versione come quelle di Subversion e Git.
# 
<IfModule mod_rewrite.c>
  RewriteRule "(^|/)\." - [F]
</IfModule>


# 
# Se il tuo server non è già configurato così, le seguenti direttive dovrebbero essere decommentate in ordina da impostare su off i register_globals di PHP. Questo chiude la maggior parte dei buchi creati dall'abuso di attacchi XSS (scripting cross-site). Per maggiori informazioni: http://php.net/register_globals
#
# SE LA DIRETTIVA REGISTER_GLOBALS CAUSA ERRORI DI TIPO INTERNO 500:
#
# Il tuo server non permette l'impostazione di direttive PHP da .htaccess. In questo caso dovresti fare questo cambiamento nel tuo file php.ini. Se usi un hosting commerciale, contatta l'amministratore per l'assistenza nel fare questo. Non tutti i server permettono file locali php.ini, e dovrebbero includere tutte le configurazioni PHP (non solo questa), o dovresti resettare il tutto alle impostazioni di default di PHP.
# Visita www.php.net per avere maggiori informazioni riguardo l'impostazione di direttive PHP
# 

# php_flag register_globals Off

Fallo ancora meglio!

Leggi la documentazione per migliorare ancora di più il tuo boilerplate.

Commenti

Mostra commenti: