LOGBOOK

Le respect

Philippe — Sun, 03 Jun 2012 08:26:00 +0200

Ces crétins de référenceurs qui viennent spammer mes différents sites (souvent sans lire les articles, d’ailleurs) ont gagné. Tous les commentaires sont fermés. Ici aussi et là c’est plus amusant : tout le site est en noindex, nofollow, noarchive et pourtant les spammeurs spamment. Des crétins disais-je…

Offrir de lire l’article à la "iPad"

Philippe — Tue, 07 Feb 2012 15:17:00 +0100

… ou comme un Kindle.
Il y a dans le navigateur Safari un mode « reader » qui offre d’extraire l’article pour l’afficher (et n’afficher que lui) à la manière d’une Lightbox ou d’une FancyBox. Pour ce faire il faudra jQuery ainsi que le code qui suit.
Prêt ? Partez…

Un formulaire AJAX avec jQuery

Philippe — Thu, 19 Jan 2012 15:42:00 +0100

Il s’agit là d’afficher un formulaire dans toutes les pages. Il faudra jQuery et toute la semoule de code qui va suivre.
Mais c’est plutôt simple. Vous allez voir…

Un lien permanent raccourci

Philippe — Thu, 19 Jan 2012 10:14:00 +0100

Un peu de code pour boucher un trou dans mon agenda.
Il s’agit d’afficher le lien permanent de la page et de le raccourcir en utilisant le service de raccourcisseur d’URL de Google. C’est tout bête.
Tout d’abord ouvrir son éditeur de code préféré et y coller ceci :

<?php
function make_googl_url($url)
{
$parse_url = parse_url($url);
if( empty($parse_url['scheme']) ) return FALSE;
$content = http_build_query(array('url' => $url));
$headers  = 'Content-Type: application/x-www-form-urlencoded' . "\r\n";
$headers .= 'Content-Length: ' . strlen($content);
// Création du flux
$opts = array(
'http'=>array(
'method'        => 'POST',
'header'        => $headers,
'content'       => $content,
'timeout'       => 1,
'max_redirects' => 1,
)
);
$context = stream_context_create($opts);
// Récupération du contenu
@file_get_contents('http://goo.gl/api/shorten', false, $context);

// Recherche de l'url raccourcie
foreach ($http_response_header as $header_response) {
if (stripos($header_response, 'Location:') === 0) {
return preg_replace('`Location:[\s]*`i', '', $header_response);
}
}

// Erreur
return false;
}
?>
<?php
$url="http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
$url = make_googl_url($url);
echo ' | <a href="'.$url.'" title="lien permanent">&infin;</a>';// http://goo.gl/t84Tr
?>

L’enregistrer ensuite sous le nom permalink.php.

Pas besoin de se gratter la tête pour comprendre le code

on crée la fonction make_googl_url
on récupère l’URI de la page où le visiteur se trouve
on applique la fonction
on génère le permalien raccourci qu’on affichera (ici avec infin;)

Pour l’afficher il suffit d’appeler permalink.php. Comme ici, par exemple, sous le titre du billet en incluant l’appel dans article.php :

<?php include("permalink.php"); ?>

Balisage sémantique : gabarit HTML5 over

Philippe — Tue, 13 Dec 2011 16:17:00 +0100

Je n’avais pas codé depuis au moins 8 mois. Pourtant je ne m’en suis pas si mal sorti. En 6 heures, montre en mains, j’ai passé mon gabarit en HTML5 avec la feuille de styles CSS3 qui va avec. Le code serait comme la bicyclette ? Ça ne s'oublierait pas ? Hum…
Bon ça donne ça :

Demain, je passe à l’accessibilité avec ARIA et au #SEO avec le balisage schema.org

Adieu "float" & "clearfix". Bonjour display: box

Philippe — Tue, 13 Dec 2011 15:05:00 +0100

Je n’y avais pas pensé quand tout à l’heure je parlais du "clearfix" sémantique, mais, en fait, ce n’est plus du tout nécessaire. Beauté des CSS3 qui nous permet avec la nouvelle propriété display: box de :

positionner des blocs verticalement ou horizontalement sans utiliser float,
réaliser des mises en page fluides qui s'adapteront à la fenêtre des différents navigateur et terminaux,
organiser l'ordre d'affichage des blocs.

Testé & Approuvé : je viens de le mettre en place sur la home.

Sidebar et hr

Philippe — Tue, 13 Dec 2011 13:42:00 +0100

Je viens de terminer la sidebar que j’ai mis ici.
Pour séparer mes articles sur la home, une rupture sémantique avec un bel hr (principe récupéré de mes autres blogs) :

hr {margin: 0 20% 55px; padding: 19px 0; line-height: 38px;
border: none; border-bottom: 1px solid #876E5A; text-align: center;
color: #876E5A; background-color: inherit;}

hr:before {content: "\25C6"; display: inline-block; float: left; position: relative; left: -8px; margin: 0 50%; padding: 0 4px; background-color: inherit; cursor: default;}

Sympa, non ?

Notes de bas de page en HTML seul

Philippe — Tue, 13 Dec 2011 11:40:00 +0100

Pour on-air.hiseo.fr et ses soliloques j’ai utilisé ce code verbeux pour la gestion des notes de bas de page. :

<sup><a class="action" href="html5/html5-ameliorer-referencement/#web1" id="fn1" title="voir la note associée">1</a></sup>

Ici la note elle-même :

<section id="footnote" role="complementary"> <ul> <li id="web1"> Ce billet fait suite à un discussion très animée sur l'avenir d'HTML5 avec le jeune et talentueux webmestre d'une grosse organisation et son responsable.<br /> --  <a class="action" href="html5/html5-ameliorer-referencement/#fn1" title="revenir au point de lecture">?</a></li></ul>

Pour tout dire, je m’étais fait chier à trouver cette solution et, plus encore, à l’utiliser.
Du coup, pour Normandie Web j’avais détourné (un peu) l’usage de mark en collant la note en bordure gauche de la colonne. (voir cet article). C’est bien oui, mais… mark pas grand monde l’utilise (ça c’est pas gênant), mais, pire, c’est que cette balise semble aussi être ignorée des développeurs qui bossent sur les rendus des moteurs.
Opera, par exemple, rajoutait une balise de paragraphe autour (c’est corrigé aujourd’hui). Chrome lui, ne rajoute rien mais ne gère plus la longueur de la ligne qui sort de son conteneur. Tant que les choses ne seront pas claires sur son statut, je ne l’utiliserai que pour mettre des syntagmes en exergue à l’intérieur des paragraphes.
En attendant, il me faut une solution. jQuery ?