to clear columns */ .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } /* Smaller than standard 960 (devices and browsers) */ @media only screen and (max-width: 959px) { } /* Tablet Portrait size to standard 960 (devices and browsers) */ @media only screen and (min-width: 768px) and (max-width: 959px) { } /* All Mobile Sizes (devices and browser) */ @media only screen and (max-width: 767px) { } /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ @media only screen and (min-width: 480px) and (max-width: 767px) { } /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ @media only screen and (max-width: 479px) { } @font-face{font-family:'source_sans_probold_italic';src:url('/fonts/SourceSansPro-BoldItalic-webfont.eot');src:url('/fonts/SourceSansPro-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),url('/fonts/SourceSansPro-BoldItalic-webfont.woff2') format('woff2'),url('/fonts/SourceSansPro-BoldItalic-webfont.woff') format('woff'),url('/fonts/SourceSansPro-BoldItalic-webfont.ttf') format('truetype'),url('/fonts/SourceSansPro-BoldItalic-webfont.svg#source_sans_probold_italic') format('svg');font-weight:normal;font-style:normal}@font-face{font-family:'source_sans_probold';src:url('/fonts/SourceSansPro-Bold-webfont.eot');src:url('/fonts/SourceSansPro-Bold-webfont.eot?#iefix') format('embedded-opentype'),url('/fonts/SourceSansPro-Bold-webfont.woff2') format('woff2'),url('/fonts/SourceSansPro-Bold-webfont.woff') format('woff'),url('/fonts/SourceSansPro-Bold-webfont.ttf') format('truetype'),url('/fonts/SourceSansPro-Bold-webfont.svg#source_sans_probold') format('svg');font-weight:normal;font-style:normal}@font-face{font-family:'source_code_proregular';src:url('/fonts/SourceCodePro-Regular-webfont.eot');src:url('/fonts/SourceCodePro-Regular-webfont.eot?#iefix') format('embedded-opentype'),url('/fonts/SourceCodePro-Regular-webfont.woff2') format('woff2'),url('/fonts/SourceCodePro-Regular-webfont.woff') format('woff'),url('/fonts/SourceCodePro-Regular-webfont.ttf') format('truetype'),url('/fonts/SourceCodePro-Regular-webfont.svg#source_code_proregular') format('svg');font-weight:normal;font-style:normal}@font-face{font-family:'source_code_probold';src:url('/fonts/SourceCodePro-Bold-webfont.eot');src:url('/fonts/SourceCodePro-Bold-webfont.eot?#iefix') format('embedded-opentype'),url('/fonts/SourceCodePro-Bold-webfont.woff2') format('woff2'),url('/fonts/SourceCodePro-Bold-webfont.woff') format('woff'),url('/fonts/SourceCodePro-Bold-webfont.ttf') format('truetype'),url('/fonts/SourceCodePro-Bold-webfont.svg#source_code_probold') format('svg');font-weight:normal;font-style:normal}@font-face{font-family:'source_sans_proitalic';src:url('/fonts/SourceSansPro-Italic-webfont.eot');src:url('/fonts/SourceSansPro-Italic-webfont.eot?#iefix') format('embedded-opentype'),url('/fonts/SourceSansPro-Italic-webfont.woff2') format('woff2'),url('/fonts/SourceSansPro-Italic-webfont.woff') format('woff'),url('/fonts/SourceSansPro-Italic-webfont.ttf') format('truetype'),url('/fonts/SourceSansPro-Italic-webfont.svg#source_sans_proitalic') format('svg');font-weight:normal;font-style:normal}@font-face{font-family:'source_sans_proregular';src:url('/fonts/SourceSansPro-Regular-webfont.eot');src:url('/fonts/SourceSansPro-Regular-webfont.eot?#iefix') format('embedded-opentype'),url('/fonts/SourceSansPro-Regular-webfont.woff2') format('woff2'),url('/fonts/SourceSansPro-Regular-webfont.woff') format('woff'),url('/fonts/SourceSansPro-Regular-webfont.ttf') format('truetype'),url('/fonts/SourceSansPro-Regular-webfont.svg#source_sans_proregular') format('svg');font-weight:normal;font-style:normal}dl {width:100%; overflow:hidden;margin:20px 0;}dt { width: 20%;float: left;display: inline-block;clear: both;}dd {float: right; width: 80%;clear: right;margin: 3px 0px;vertical-align: text-bottom;} .full-width { width: 100%; } #section-sub-footer { padding: 20px 0; color: #dce0e9; background-color: #222; box-shadow: -3px 0 3px #222222; } .full-width { width: 100%; } #section-sub-footer { padding: 20px 0; color: #dce0e9; background-color: #222; box-shadow: -3px 0 3px #222222; } #section-sub-footer p { padding-bottom: 20px; border-bottom: 1px solid #dce0e9; } #section-sub-footer span { padding: 10px 0; } .button { border-bottom: none; margin-top: 12px; padding: 3px; border-radius: 3px; background-color: #222222; color: #dce0e9; display: inline-block; cursor: pointer; text-align: center; float: right; text-decoration: none; font-size: 10px; line-height: 1.1em; clear: both; } .multi-columns-3 {-webkit-column-count:3;-webkit-column-gap:40px;-webkit-column-rule:1px solid #222222;-moz-column-count:3;-moz-column-gap:40px;-moz-column-rule:1px solid #222222;column-count:3;column-gap:40px;column-rule:1px solid #222222;} .button:hover { background-color: #464646; } .button:active { background-color: #CD0074; } .last { background-color: #000; } #section-sub-footer span.copyright { float: left; } #section-sub-footer span.colophon { float: right; } #section-sub-footer span.colophon a { text-decoration: none; } #section-sub-footer strong, #section-sub-footer a { color: #dce0e9; } #main-header { margin-top: 40px; } .warning h5 { color: #B94A48; font-size: 1em; } .warning { font-size: .9em; line-height: 1em; z-index: 200; color: #B94A48; background-color: #FFAAAA; box-shadow: -3px 0 3px #222222; padding: 5px 0; } .warning a, .warning a:hover { text-decoration: none; color: #B94A48; border-bottom: 1px dashed #B94A48; } ::-moz-selection { color: #dce0e9; background: #CD0074; } ::-webkit-selection { color: #dce0e9; background: #CD0074; } ::selection { color: #dce0e9; background: #CD0074; } .monospace { font-family: 'source_code_proregular'} article { margin-bottom: 35px; } a { color: #000; text-decoration: none; } article a { color: #000; text-decoration: none; border-bottom: 1px dashed; } article a:hover, article a:active, code a:active, a code:hover, code a:active, a:active code, a:hover code { color: #CD0074; } sub,sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } .contacts h5 { color: #222; font-size: 1em; } .contacts { font-size: .9em; line-height: 1em; z-index: 200; box-shadow: -3px 0 3px #222222; color: #222; background-color: #aaa; padding: 5px 0; } .contacts a, .contacts a:hover { text-decoration: none; color: #000; border-bottom: 1px dashed #222; } pre,code,kbd,samp { font-family: 'source_code_proregular','Consolas',Menlo,Monaco,'DejaVu Sans Mono','Droid Sans Mono','Lucida Console','Andale Mono','OCR A Extended',monospace; font-size: 1em; } h1 code,h2 code,h3 code,h4 code,h5 code,h6 code { font-size: 1em; font-family: 'source_code_probold'; } strong code, code strong { font-family: 'source_code_probold'; } code { color: #000; } #intro-site code { color: #dce0e9; } pre { background: #464646; box-shadow: inset 0 0 5px #222222; -webkit-border-radius: 5px; border-radius: 5px; color: #dce0e9; padding: 25px; overflow: auto; text-shadow: 0 1px 0 #222222; white-space: pre-wrap; word-wrap: break-word; margin-bottom: 20px; } pre code { background: #464646; color: #dce0e9; padding: 0; } em { font-family: 'source_sans_proitalic',Ubuntu,'Bitstream Vera Sans','Droid Sans','DejaVu Sans',Helvetica,Geneva, Arial,Tahoma,sans-serif; } strong { font-family: 'source_sans_probold',Ubuntu,'Bitstream Vera Sans','Droid Sans','DejaVu Sans',Helvetica,Geneva, Arial,Tahoma,sans-serif; } strong em, em strong { font-family: 'source_sans_probold_italic'; } code em, em code { font-family: 'source_code_proregular',monospace; font-style: italic; } blockquote { margin-bottom: 20px; padding: 30px; background-color: #fbfbfb; box-shadow: 0 0 5px rgba(0, 0, 0, .2), inset 0 0 50px rgba(0, 0, 0, .1); min-height: 32px; font-family: Georgia,Times,'Times New Roman',serif; } blockquote em { font-family: Georgia,Times,'Times New Roman',serif; } cite { font-style: normal; font-family: Georgia,Times,'Times New Roman',serif; } cite em { font-style: italic; font-family: Georgia,Times,'Times New Roman',serif; } .auteurs { font-family: 'source_sans_proregular'; font-size: 80%; color: #aaa; } .auteurs a { color: #aaa; } h1 em,h2 em,h3 em,h4 em,h5 em,h6 em { font-family: 'source_sans_probold_italic'; } p code, li code, dl code { background: #ccc; border-radius: 4px; padding: 0 4px; } @media print {.button,#navigation,nav,footer,#menu,aside,#warning,#warning a{display:none}body{font-size:1em;font-family: 'source_sans_proregular',serif;margin:1.5em;color:#000000;line-height: 1.5em;}#main-header h5:after{content:" — http://les.pages.perso.chez.free.fr/"}article:before{content:"Merci de votre intérêt pour le site Les Pages Perso Chez Free. Ce site n'est pas un site officiel de Free. Les informations présentées sur ce site ne constituent pas une aide « officielle » et peuvent se révéler inopérantes ou erronées si Free modifie son infrastructure et ses logiciels serveurs. Ce site donne des exemples connus de pratiques à éviter, mais ce ne sont que des exemples et pas une liste exhaustive, et il suggère des solutions a priori admises, mais sans garantie. Ces informations peuvent évoluer sans préavis. Consultez régulièrement le site, pour vérifier si des modifications ont été apportée à ce billet depuis sa date d'impression.";line-height:.9em;font-weight:normal; font-family:'source_sans_proregular',serif;color:#666;}p{page-break-inside:avoid;margin:.2em 0 .8em 0;line-height:1.3em}h1,h2,h3,h4,h5,h6{font-family: 'source_sans_probold',serif;margin:1em 0 .2em 0;}a{color:#000;text-decoration:none}pre,code,kbd,samp{font-family:'source_code_proregular','Consolas',Menlo,Monaco,'DejaVu Sans Mono','Droid Sans Mono','Lucida Console','Andale Mono','OCR A Extended',monospace;}h1 code,h2 code,h3 code,h4 code,h5 code,h6 code{font-family: 'source_code_probold',monospace;font-size:1em}code{color:#000}code strong{font-family: 'source_code_probold',monospace;}pre{page-break-inside:avoid;color:#000;padding:25px;overflow:auto;white-space:pre;white-space:pre-wrap;word-wrap:break-word;border:1px solid #ccc;}pre code{color:#000;padding:0;}blockquote{margin:20px auto;width:90%;min-height:32px;page-break-inside:avoid;font-family:Georgia,Times,'Times New Roman',serif;box-shadow:none;padding-left:15px;border-left:2px solid #ccc;}em{font-family: 'source_sans_proitalic', serif;}strong{font-family: 'source_sans_probold',serif;}strong em, em strong{font-family: 'source_sans_probold_italic', serif;}code em, em code{font-family:'source_code_proregular',monospace;}p code,li code{background:none;border-radius:0;padding:0;border:0;text-shadow:none;}#warning,nav{box-shadow:none;border:0}article a[href^="http"]:after,article a[href^="/public"]:after{content:" ("attr(href)") ";}}
Attention : ce site n'est pas un site officiel de la société Free. En savoir plus »
Il arrive parfois qu'il soit nécessaire de réaliser des opérations de maintenance importantes sur votre site – pour le faire évoluer ou le rendre conforme – et qu'il faille condamner temporairement l'accès de tout ou partie de votre site le temps de faire ces transformations. Cela peut être pénalisant pour vous et vos visiteurs.
Voici quelques éléments qui pourront, sans doute, vous aider à réaliser sereinement vos opérations de maintenance.
La première chose à faire et de sauvegarder les données de votre espace web et de votre base de données SQL. Une fois cette opération réalisée, vous pouvez supprimer l'ensemble des données présentes sur le compte (ou dans la section qui sera l'objet de la maintenance).
Il faut maintenant prévenir les visiteurs de votre site (humains et robots) que celui-ci est temporairement indisponible. Il existe un code d'erreur HTTP spécifique pour un tel cas : le 503 Service Temporarily Unavailable
. Nous allons donc créer une page spécifique, à l'aide de PHP, pour envoyer ce code d'erreur et le message d'information correspondant.
Le script PHP et la page d'information :
<?php
header('HTTP/1.1 503 Service Temporarily Unavailable',true,503);
header('Status: 503 Service Temporarily Unavailable');
header('Retry-After: 36000');
header('Cache-Control: no-store, must-revalidate');
header('Content-Type: text/html; charset=utf-8');
header('Vary: Accept-Encoding');
header('X-Robots-Tag: noindex,nofollow,noarchive');
ob_start('ob_gzhandler'); ?>
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<meta name="robots" content="noindex,nofollow,noarchive"/>
<title>Site TrucMucheMachin - Site en maintenance…</title>
<style type="text/css">body{ background:#fff; height:70%; line-height:120%}#body-size{margin: 40px auto;max-width:750px;text-align:center;}*{font-size:.99em; font-family:Tahoma,Verdana,sans-serif; color:#404040; text-align:left}#border{background-color:#fff; height:100px; text-align:left;margin-top:100px}.content{ height:280px; padding:10px}.designinfo{ margin-top:5px; text-align:right; color:#666;font-size:.8em}h1{ margin-bottom:20px; padding:0; font-size:24px; font-weight:bolder;color:#404040; background-color:inherit; border-left:#404040}.text{ display:block; margin:5px 0 20px}.text a{ color:#404040; text-decoration:none; font-weight:bold}.text a:hover,.text a:active{ color:#404040; text-decoration:underline}.note{ display:block;margin:15px 0;color:#404040}</style>
<!--[if lt IE 9]><script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7/html5shiv.min.js"></script><![endif]-->
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
</head>
<body>
<div id="body-size">
<div id="border">
<h1>Le site TrucMucheMachin est en maintenance…</h1>
</div>
<div class="content">
<h2>Pause, on recharge les batteries…</h2>
<div class="text">
<p class="note">Bonjour,<br />Nous travaillons actuellement à l'amélioration du site internet de TrucMucheMachin, afin de vous rendre sa viste plus agréable et plus facile.</p>
<p class="note">Nous serons de retour dans un mois environ.</p>
</div>
<div class="designinfo">Copyright © <?php echo date('Y'); ?> - TrucMucheMachin</div>
</div>
</div>
</body>
</html>
<?php ob_end_flush(); ?>
Cette page doit être nommée index.php
. Elle permet d'avertir les visiteurs du problème, sans conséquence sur le référencement de votre site.
Vous pouvez bien entendu modifier cette page (notamment le nom « TrucMucheMachin » ;-) !), mais veillez à conserver le code situé au-dessus du doctype <!DOCTYPE html>
car c'est cette portion de code PHP qui informe les visiteurs et les robots. la directive header('Retry-After: <nombre de seconde>');
permet de donner une indication approximative du temps pendant lequel le service sera indisponible.
Il faut maintenant rediriger les requêtes provenant de liens externes à votre site, afin que le visiteur soit informé de l'indisponibilité temporaire de celui-ci. Les directive Rewrite
étant interdites chez Free ; il faut ruser, et contourner le problème en renvoyant les requêtes erronées vers la page de maintenance, ce qui sera automatique si le contenu de l'espace web (ou du répertoire sujet à modification) est vide. Pour cela, il faut insérer le code suivant dans le fichier .htaccess
situé à la racine de votre compte (ou dans le répertoire en maintenance) :
php 1
Options -Indexes
AddDefaultCharset utf-8
ErrorDocument 404 index.php
Vous pouvez également rediriger individuellement les URL de votre site qui sont sujettes à maintenance via les directives Redirect
et RedirectMatch
et le code de redirection temporaire 307
(vous pouvez, dans ce cas, nommez votre page de maintenance comme bon vous semble) :
Redirect 307 /la-page-en-maintenance http://monsite.free.fr/maintenance.php RedirectMatch 307 ^/page-([0-9]+).shtml$ /maintenance.php
La page de maintenance, ainsi que le fichier .htaccess
correspondant, sont disponibles au téléchargement depuis notre site, ⬇︎ ici .