Infos clients : création d’un site Web

Des informations utiles pour ceux qui souhaitent se (faire) créer un site Web :

Même en l’absence de connaissances techniques, il importe de faire attention au choix de votre prestataire.

Mais avant cela, nombreuses sont les questions qui se posent…

Des solutions gratuites existent : des blogs, des comptes Facebook ou Twitter… Peut-être correspondent-elles à votre besoin ?

Que serait un outil de communication sans communication ? La production du contenu est véritablement le cœur du projet de création d’un site Web. Peut-être serez-vous intéressé par des idées de sujets pour le contenu de votre site Internet ? Ou encore, des informations sur la manière de préparer ce contenu pour faciliter sa future conversion au format Web ?

Pourquoi mieux vaut éviter Flash dès qu’on le peut.

Curieux du Web ? Qu’est-ce qu’un réseau social, un CMS, un hébergeur, un nom de domaine ? Des réponses dans le lexique.

Le webmestre, artisan ou artiste ?

L’artiste et l’artisan sont cousins. Tous deux créent en mêlant un travail intellectuel et technique. Quelle différence entre un artisan et un artiste ? Sur le plan du droit, les créations logicielles sont assimilées à des œuvres d’art. Mais sommes-nous véritablement des artistes ?

Je pense que ce qui différencie une œuvre d’art d’un objet artisanal est la démarche du créateur lors du travail de création. Où est situé la motivation : dans la tête d’un client ou dans celle du créateur ? L’artisan cherche à satisfaire une demande particulière, l’artiste extériorise des sentiments qui le touchent. L’artisan s’emploie à fondre sa création dans les goûts et les besoins de son client quand l’artiste accorde sans concession son œuvre avec lui-même.

Aussi l’unicité d’une création n’est pas du tout ce qui détermine sa qualité d’objet d’art ou d’objet artisanal. Le musicien enregistre ses morceaux sur des supports numériques destinés à être dupliqués et cela n’enlève rien à sa démarche authentiquement artistique. Ni plus ni moins reproductibles, les créations musicales des publicistes sont certainement à ranger du côté artisanal. Ou encore, si l’écrivain est un artiste, l’essayiste est quant à lui un artisan. Et la grande valeur de l’exemplaire original d’une toile de peinture célèbre – laquelle tranche sur la faible valeur des copies – découle non pas d’une perte de « qualité artistique » des copies mais plutôt du comportement de collectionneur des amateurs de peintures.

Si le webmestre ne peut dupliquer sa création sans en détruire la valeur, c’est parce que tel est le besoin de son client : un site original et unique. Nous sommes des menuisiers dont les clients demandent tous des chaises d’apparence différente de celles des autres. Le webmestre est un artisan du Web.

Sous WordPress, afficher le contenu d’un article ou d’une page à partir de son identifiant

Il arrive d’avoir besoin d’afficher le corps d’un post indépendamment de la boucle d’articles.

J’utilise ça pour afficher des pages cachées (privées) comme une sous-partie d’une page. Cette technique constitue une alternative au Widget « Texte », lequel oblige l’utilisateur à manipuler du code HTML. Par exemple, combiné avec un plug-in d’affichage de vidéos dans un article, le choix d’une vidéo accompagnée d’un texte à afficher en page d’accueil devient une opération accessible à l’utilisateur.

Voici la fonction PHP :

function cpnetPrintPostContent($postId, $postStatus = null, $withTitle = false) {
	global $wpdb;
	// - sql
	$sql = "select p.ID as post_id, p.post_content, p.post_title
from $wpdb->posts p
where p.ID = $postId" . (isset($postStatus) ? " and p.post_status = '" . $postStatus . "'" : '');
	// - load from cache or db
	$queryKey = 'cpnetPrintPostContent_' . md5($sql);
	$rs = wp_cache_get($queryKey, 'this-site');
	if (false === $rs) {
		$rs = $wpdb->get_results($sql, ARRAY_A);
		if (null === $rs)
			$rs = '';
		wp_cache_set($queryKey, $rs, 'this-site');
	}
	// - print
	if (!$rs || empty($rs))
		return;
	$row = $rs[0];
	if ($withTitle)
		echo '<h3>' . $row['post_title'] . '</h3>';
	$html = apply_filters('the_content', $row['post_content']);
	echo $html;
}

Le code est aisé à comprendre. En premier lieu la requête SQL est créée. Ensuite, on tente de charger le résultat du cache. J’utilise 'this-site' comme ensemble de cache mais il est possible d’utiliser la chaîne de caractère que l’on veut. Si le résultat n’était pas dans le cache, alors il est extrait depuis la base de données et ajouté au cache dans le même ensemble de cache. L’appel de la fonction apply_filters applique les éventuelles modifications des plug-ins. Puis le contenu est affiché.

Site Creapage.net refondu : plus moderne, plus large, plus beau et toujours aussi léger !

La refonte de la partie principale de ce site vient de sortir.

Au menu :

  1. Une plaquette qui tangue en CSS3 ;
  2. Un portfolio qui adapte le nombre des colonnes à la largeur du navigateur ;
  3. Une belle barre de navigation ;
  4. Des pages toujours aussi légères et réactives ;
  5. Plus d’infos !

Alors en route pour une visite : Creapage.net, création de sites Web au Bénin.
Et j’espère des critiques !

Le Web passe au HTML5 et au CSS3

Ces dernières semaines sont sorties les versions majeures des trois navigateurs les plus utilisés sur la toile :

  • IE9 est sorti il y a une semaine, malheureusement incompatible avec Windows XP ;
  • Firefox 4 est sorti cette semaine ;
  • Chrome 10 est sorti il y a deux semaines.

Ces trois navigateurs supportent de mieux en mieux HTML5 et CSS3, qui sont toutes deux des normes en cours de finalisation.

Pour découvrir comment utiliser HTML5 et CSS3, je recommande cet article (déjà ancien) de Alsacreations.

On regrettera l’absence d’interprétation des propriétés du multi-colonnes par IE9. Je crains les années de bidouilles à devoir émuler cette propriété !

Internet Explorer does not support any of the CSS3 multi-column layout properties. (Source : MSDN.)

IE6 a dix ans. S’il reste largement utilisé, c’est qu’il est le navigateur livré par défaut avec Windows XP. Et le successeur de Windows XP, Windows Vista, était un peu raté. Mais il est l’heure de migrer : Microsoft fait carrément campagne pour en terminer avec IE6, et a stoppé en 2010 le support de Windows XP – ce qui implique concrètement que les failles de sécurité nouvellement trouvées ne seront plus corrigées.

Le livre CSS avancées, vers HTML5 et CSS3 de Raphaël Goetter est sorti il y a moins d’une semaine. Il deviendra la référence parmi les ouvrages francophones.

Nouveau site pour le Centre Culturel Ouadada de Porto-Novo

Après un an et trois mois de bons et loyaux service, le site que j’avais réalisé avec Joomla! passe la main. Place à WordPress !

Côté back-end, une interface d’administration plus intuitive. Côté front-end, du contenu vivant !

Et il est BEAU ! Le site du Centre Culturel, Artistique et Touristique Ouadada à Porto-Novo.

L’association Baština dégaine son site !

Et il déchire ! Le site de l’association Baština vient de sortir.

Ce site est en réalité le premier site que j’ai réalisé avec WordPress, puis il a séjourné des mois sur mon établi, tout le temps qu’il a fallu à mon client pour peaufiner son apparence. C’est en particulier afin de rendre fluide son diaporama extra-large que j’avais dû réécrire un script JavaScript de diaporama.

L’artiste Mehomez expose sur la toile

Le site de l’artiste Mehomez sort aujourd’hui. Mehomez est peintre et sculpteur. C’est la première fois que je travaille pour un artiste. Et je suis bien chaud pour remettre ça !

La Fondation Josias Live, de Yaoundé au Cameroun, sort son site !

J’avais cinq projets à sortir, il n’en reste plus que quatre. Le site de la Fondation Josias Live est désormais en ligne. C’est une première pour moi : un client distant africain. Josias Live opère à Yaoundé au Cameroun. 🙂

Afficher un lien vers la catégorie parente dans un article WordPress

Éditer le fichier « single.php » du thème WordPress. Puis, par exemple au-dessus du code PHP qui insère les liens de navigation horizontale, insérer le code suivant :

<?php
$myLstCat = (array) get_the_category(intval(get_the_ID()));
if (count($myLstCat) >= 1) {
	$myCat = &$myLstCat[0];
	$myCatLabel = $myCat->cat_name;
	$myCatLink = get_category_link(intval($myCat->cat_ID));
?>
<div class="nav-to-cat">
	<a href="<?php echo $myCatLink; ?>"><?php echo $myCatLabel; ?></a>
</div>
<?php
}
?>

Un lien vers la catégorie parente de l’article apparaît désormais dans la page de l’article.

Centrer verticalement un élément HTML à l’aide de jQuery

Les CSS ne proposent pas de centrer verticalement un élément HTML dans un autre. Un peu de JavaScript est alors nécessaire.

Prenons le cas d’une image à centrer verticalement dans un élément div conteneur. Marquons dans un premier temps l’élément à centrer avec la classe CSS vertical-align-center :

<div style="width: 300px; height: 300px; background-color: #cbc;">
	<img alt="" src="myimage.jpg" class="vertical-align-center"/>
</div>

Un peu de JavaScript centrera l’image :

<script type="text/javascript">//<!--
$(document).ready(function() {
	verticalAlignCenter();
});

function verticalAlignCenter() {
	$(".vertical-align-center").each(function() {
		var $elem = $(this);
		var elemHeight = $elem.height();
		if (elemHeight == 0)	// perhap's an element is no loaded
			return;
		var $container = $elem.parent();
		var marginTop = Math.floor(($container.height() - elemHeight) / 2);
		if (marginTop > 0)
			$elem.css("margin-top", marginTop);
		$elem.removeClass("vertical-align-center");
	});
}
//--></script>

Cas particulier d’une image

En production, sur les navigateurs disposant d’une connexion à débit réduit, le script s’exécutera parfois avant le chargement de l’image. Dans ce cas, et si la hauteur de l’image n’est pas précisée par une propriété CSS, alors il n’est pas possible de centrer l’image au chargement de la page Web. Il faut alors relancer l’exécution de la fonction verticalAlignCenter() plus tard. Afin d’éviter de recalculer plusieurs fois les mêmes éléments, le script retire la propriété CSS des éléments centrés.

Une catégorie par défaut pour les articles créés avec le plug-in Events Calendar

C’est en cherchant à corriger l’incompatibilité du plugin Events Calendar version 6.7.8 avec WordPress 3.0.3 que j’ai trouvé comment faire gagner du temps aux utilisateurs de ce calendrier. Le plug-in « Events Calendar » propose de créer des articles associés à ses événements, et il serait bien pratique que ces articles soient directement rangés dans la bonne catégorie.

Voici comment faire :

  • éditer le fichier « ec_management.class.php » présent dans le dossier du plug-in ;
  • rechercher la ligne de code contenant l’appel à la fonction wp_insert_post.

Le code à cet endroit ressemble à ceci :

	$data = array(
		'post_content' => stripslashes($output)
		, 'post_title' => stripslashes($title)
		, 'post_date' => date('Y-m-d H:i:s')
		, 'post_category' => $post_author
		, 'post_status' => $statusPost
		, 'post_author' => $post_author
	);
	$post_id = wp_insert_post($data);

L’appel de la fonction wp_insert_post est précédé de l’initialisation d’un tableau contenant tous les paramètres de création du nouvel article.

J’ai mis en gras la ligne qui pose problème : la variable post_category devrait recevoir un tableau d’identifiants de catégorie et non pas le contenu de la variable $post_author. Pour ceux qui souhaitent juste rendre le plug-in Events Calendar compatible avec WordPress 3.0, supprimer la ligne devrait suffire.

Ou bien, pour définir une catégorie par défaut aux articles créés par le plugin Events Calendar, affecter à la clé 'post_category' un tableau avec votre(vos) identifiant(s) de catégorie. Par exemple :

		, 'post_category' => array(3)

Le CmsTheme, un thème pour utiliser WordPress comme un CMS

Vous développez des sites avec WordPress 3.0 ? Désormais, démarrez vos projets avec le CmsTheme, un thème neutre pour les développeurs qui utilisent WordPress comme un CMS.

C’est le thème que j’utilise pour les projets de mes clients. L’idée est la même que pour le thème Zen de Drupal : un thème neutre conçu pour servir de point de départ à un utilisation de WordPress en tant que CMS. Il reprend une partie du code du thème TwentyTen livré avec WordPress 3.0.

Téléchargez le CmsTheme.

Note aux programmeurs : n’hésitez pas à me faire part de vos améliorations, tout ce qui peut faire gagner du temps m’intéresse.

Sous WordPress, afficher une liste d’articles à la manière de Joomla!

Avec Joomla!, il n’existe qu’un seul layout d’utilisable. Mais quel layout ! Pour ceux qui comme moi souhaitent reproduire l’excellent layout de Joomla! sous WordPress, voici le code PHP que j’utilise. Ce code est à coller dans un fichier « loop-joomla-layout.php » de votre thème WordPress.

<?php
$ctMainPosts = 1;
$ctCols = 2;
?>

<?php /* Display navigation to next/previous pages when applicable */ ?>
<?php if ( $wp_query->max_num_pages > 1 ) : ?>
  <div class="nav nav-above">
    <div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Older posts', 'cmstheme' ) ); ?></div>
    <div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">&rarr;</span>', 'cmstheme' ) ); ?></div>
  </div>
<?php endif; ?>

<?php if ( ! have_posts() ) : ?>
  <div id="post-0" class="post error404 not-found">
    <h1 class="entry-title"><?php _e( 'Not Found', 'cmstheme' ); ?></h1>
    <div class="entry-content">
      <p><?php _e( 'Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post.', 'cmstheme' ); ?></p>
    </div><!-- .entry-content -->
  </div><!-- #post-0 -->
<?php endif;
$ctCol = $ctMainPosts > 0 ? 0 : 1; // $ctCol contains the numero of the current column, or zero
$ctNewRow = false;
?>
<div class="joomla-layout joomla-layout-cols-<?php echo $ctCols; ?>">
<?php while ( have_posts() ) : the_post(); ?>
<?php
  if ($ctCol === 0) {
    $ctPostClasses = 'main-post';
    if (--$ctMainPosts <= 0)
      $ctCol = 1;
  } else {
    $ctPostClasses = 'post-col post-col-' . $ctCol;
    if ($ctCol < $ctCols) {
      $ctCol++;
      $ctNewRow = false;
    } else {
      $ctCol = 1;
      $ctNewRow = true;
    }
  }
?>
    <div id="post-<?php the_ID(); ?>" <?php post_class($ctPostClasses); // [TM] ?>>
      <h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'cmstheme' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>

  <?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?>
      <div class="entry-summary">
        <?php the_excerpt(); ?>
      </div><!-- .entry-summary -->
  <?php else : ?>
      <div class="entry-content">
        <?php the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'cmstheme' ) ); ?>
        <?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'cmstheme' ), 'after' => '</div>' ) ); ?>
      </div><!-- .entry-content -->
  <?php endif; ?>
    </div>
  <?php if ($ctNewRow) : ?>
    <hr class="clearfloats"/>
  <?php endif; ?>
  <?php endwhile; ?>
<?php if ($ctCol > 0 && !$ctNewRow) : ?>
    <hr class="clearfloats"/>
<?php endif; ?>
</div>

<?php /* Display navigation to next/previous pages when applicable */ ?>
<?php if (  $wp_query->max_num_pages > 1 ) : ?>
<div class="nav nav-below">
  <div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Older posts', 'cmstheme' ) ); ?></div>
  <div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">&rarr;</span>', 'cmstheme' ) ); ?></div>
</div>
<?php endif; ?>

Le layout se configure au moyen des deux variables en début de code. La variable $ctMainPosts donne le nombre d’articles à afficher en grande largeur et la variable $ctCols donne le nombre de colonnes pour les articles suivants. Je n’ai pas reproduit l’affichage sous forme de liste de liens (en troisième partie sous Joomla!) car il me semble illogique dans un contexte multi-pages. Si le paramétrage doit changer selon les rubriques, utiliser des variables globales à initialiser depuis les fichiers « category-N.php » concernés.

Appelons maintenant notre fichier-layout lors de l’affichage des catégories concernées. Dans les fichiers « category-N.php » qui vont bien, se reporter à la ligne d’appel du fichier « loop » et remplacer le paramètre 'category' par 'joomla-layout' :

  get_template_part('loop', 'joomla-layout');

Ensuite, pour le cas d’un affichage sur deux colonnes, voici les styles CSS à utiliser (à ajouter dans le fichier « style.css » du thème) :

div.joomla-layout-cols-2 div.post-col {
  width: 47%;
}
div.joomla-layout-cols-2 div.post-col-1 {
  clear: left;
  float: left;
}
div.joomla-layout-cols-2 div.post-col-2 {
  clear: right;
  float: right;
}

… et votre site WordPress a un petit air de Joomla! !

Installer Ubuntu 10.04 LTS sur EeePC 1201PN

Attention : comme pour tous les utilisateurs de la carte graphique Nvidia ION2, il est probable que Ubuntu 10.10 ne fonctionne pas sur cette machine. Mieux vaut rester sur la version stable (LTS).

Consultez aussi la page d’Ubuntu-fr pour EeePC 1201PN.

Sur le site officiel d’Ubuntu, télécharger le CD d’Ubuntu 10.04 « Lucid Lynx » en version 64 bits et l’installer.

Configuration minimale pour EeePC 1201PN

Passer en langue française

Puisque le CD d’Ubuntu en version 64 bits n’est pas disponible en langue française, nous avons été obligé de l’installer en anglais.

Ouvrir le menu Système → Administration → Prise en charge des langues. Dans l’onglet « Langue », installer les langues « Français (France) » et « Français » et les faire apparaître en premier dans la liste. Redémarrer.

La touche Fn (raccourcis multimédias et autres)

Éditer le fichier de configuration de Grub :

$ sudo gedit /etc/default/grub

Et ajouter l’option acpi_osi=Linux après quiet splash dans la ligne commençant par GRUB_CMDLINE_LINUX_DEFAULT :

GRUB_CMDLINE_LINUX_DEFAULT="quiet splash acpi_osi=Linux" 

Enregistrer et fermer. Puis, mettre à jour Grub :

$ sudo update-grub 

La modification sera active au prochain redémarrage de l’ordinateur.

Le son sur haut-parleurs externes

Le son ne fonctionne pas lorsqu’on branche des haut-parleurs externes. L’installation d’un paquet « backport » depuis le dépôt « lucid-update » règle le problème :

$ sudo apt-get install linux-backports-modules-alsa-lucid-generic

Touchpad

En premier lieu, configurer la souris au moyen du menu Système → Préférences → Souris. Pour ma part je règle l’accélération au maximum et la sensibilité au minimum. Et je désactive les clics de souris sur le pavé tactile (onglet « Pavé tactile »).

Pour le défilement à deux doigts, en revanche, il reste quelques opérations manuelles. Éditer le fichier de configuration du touchpad :

$ sudo gedit /usr/lib/X11/xorg.conf.d/10-synaptics.conf

Dans la section Identifier "touchpad catchall", ajouter à la suite de la ligne Driver "synaptics" :

	Option	"SHMConfig"	"true"
	Option	"EmulateTwoFingerMinZ"	"1"
	Option	"VertTwoFingerScroll"	"on"
	Option	"HorizTwoFingerScroll"	"on"
	Option	"LBCornerButton"	"2"

Ici commencent les difficultés : les options VertTwoFingerScroll et HorizTwoFingerScroll sont ignorées au démarrage. À cette étape, il suffit de lancer les commandes suivantes pour activer le défilement :

$ synclient VertTwoFingerScroll=1
$ synclient HorizTwoFingerScroll=1 

… mais, j’ignore pourquoi, impossible d’automatiser ça via les Applications au démarrage. La page d’Ubuntu-fr recommande l’installation de l’utilitaire « gpointing-device-settings » :

$ sudo apt-get install gpointing-device-settings

Ouvrir ensuite le menu Système → Préférences → Pointing devices. Sélectionner éventuellement « Touchpad on » dans l’onglet « Général ». Cocher les deux cases de défilement à deux doigts de l’onglet « Défilement ». Nota. – Après redémarrage la configuration à deux doigts est à nouveau perdue.

Mes recommandations

Pour une meilleure compatibilité…

Sur un système 64 bits, les logiciels 32 bits auront besoin des paquets qui vont bien. Pour les installer :

$ sudo apt-get install ia32-libs ia32-sun-java6-bin

Quelques paquets sont nécessaires pour s’éviter des soucis de codecs, fontes et autres formats. Tout d’abord, dans le menu Système → Administration → Sources de logiciels, ouvrir l’onglet « Logiciels Ubuntu » et cocher « main », « universe », « restricted », « multiverse ». Fermer.

Ensuite, installer les paquets :

$ sudo apt-get install ubuntu-restricted-extras ttf-mscorefonts-installer flac gnome-codec-install lame lmodern rar zip

Une applet de gestion du matériel

L’applet Jupiter offre un meilleur contrôle sur le matériel. Télécharger l’applet Jupiter, l’installer et redémarrer. Puis, désactiver le Wi-Fi via l’applet : la led témoin bleu du Wi-Fi s’éteint. L’applet évite aussi que le Wi-Fi ne redémarre après chaque mise en veille ou le bluetooth après chaque démarrage. Et elle passe automatiquement le(s) processeur(s) en mode économie lorsque l’ordinateur est sur batterie.

Nota. – Sur alimentation secteur, passer (une fois) l’applet en « high performance » plutôt que « maximum performance » qui est sélectionné par défaut.

Gestion de l’énergie

Ouvrir le gestionnaire de configuration de Gnome :

$ gconf-editor

Voici les paramètres que j’utilise à titre personnel :

Clés Valeurs
apps/gnome-power-manager/actions/sleep_type_battery
suspend
apps/gnome-power-manager/backlight/brightness_ac
90
apps/gnome-power-manager/backlight/brightness_dim_battery
70
apps/gnome-power-manager/backlight/idle_dim_time
60
apps/gnome-power-manager/general/use_time_for_policy
uncheck
apps/gnome-power-manager/lock/hibernate
uncheck
apps/gnome-power-manager/lock/suspend
uncheck
apps/gnome-power-manager/thresholds/percentage_action
2
apps/gnome-power-manager/thresholds/percentage_critical
3
apps/gnome-power-manager/thresholds/percentage_low
8
apps/gnome-power-manager/thresholds/time_action
150
apps/gnome-power-manager/thresholds/time_critical
300
apps/gnome-power-manager/thresholds/time_low
800

Le reste se règle via le menu Système → Préférences → Gestionnaire d’énergie.

Clavier

À titre personnel, j’utilise la touche « Ctrl droite » comme touche « Compose », ce qui permet par exemple de saisir le signe « © » avec Compose + o + c, les points de suspension avec Compose + Maj + . . etc.

Menu Système → Préférences → Clavier → Agencements → Options → Position de la touche Compose → Ctrl. Droite.

On peut aussi configurer un raccourci pour ouvrir l’explorateur de fichiers :

Menu Système → Préférences → Raccourcis clavier → Bureau/Dossier personnel → … et appuyer sur les touches Wind + H.

Le pare-feu

Installer l’interface graphique :

$ sudo apt-get install gufw

Puis, ouvrir le menu Système → Administration → Configuration du pare-feu. Cliquer sur la case à cocher « Activé ».

Une référence d’apprentissage des CSS fera de vous un as du design Web

Pour débutant ou initié, je recommande chaudement la lecture de CSS 2 : Pratique du design web du webmestre alsacien Raphaël Goetter. Le livre est clair, explique juste l’essentiel et donne de bonnes pratiques au webmestre le plus aguerri.

À remettre entre les mains de tous ceux qui se frottent à la conception de pages Web.

À noter aussi : une multitude de tutoriels sur les CSS sont publiés sur le site Web de l’auteur.

Maintenant j’ai une question de savoir-vivre : faut-il se laver les mains après qu’un singe ose vous les serrer ? Ahem.

Passez à Ubuntu et bye bye les virus !

Les clés USB chargées de virus vous importunent ? Votre antivirus n’est pas efficace et ralentit votre ordinateur ? Vos amis vous installent des cochonneries ? Les lenteurs injustifiées du système vous insupportent ? Vous aimeriez vous épargner la honte de subir une machine capricieuse en pleine démonstration devant vos clients ?

LE système d’exploitation du webmestre en Afrique, c’est Linux. Et parmi les distributions de Linux, j’aime bien Ubuntu.

Tous les outils du webmestre tournent dessus : l’environnement de développement Eclipse, le navigateur Firefox, l’éditeur d’images GIMP, le serveur Web Apache avec le langage PHP, le serveur de base de données MySQL, le client de base de données SQuirreL SQL, le client FTP FileZilla. L’ignoble IE6 et même IE7 et Safari seront installés au moyen de PlayOnLinux, une interface graphique pour la couche d’émulation Wine. La suite bureautique OpenOffice.org demandera aux aficionados de celle de Microsoft de changer leurs habitudes, mais tout de même, quel soulagement de quitter les barres d’outils obèses des versions récentes de Microsoft Office !

Mais, me direz vous, et le logiciel de compta ? Ah, oui, le logiciel de compta. Et celui-là, il est rarement question de le remplacer. Pour les logiciels récalcitrants, vous installerez le gestionnaire de machines virtuelles VirtualBox OSE. À l’intérieur d’une machine virtuelle, vous réinstallerez votre ancien Windows avec vos anciens logiciels. Un Windows dans une machine virtuelle est un peu plus lent qu’à l’habitude, mais on s’en sort.

Mais s’il faut retenir Ubuntu, c’est en premier lieu à cause de l’ergonomie de Gnome, le système d’interfaçage d’Ubuntu. L’ergonomie de Gnome est celle du bon sens ! Par exemple, le menu « Applications », qui remplace le menu Démarrer, s’affiche sans se faire attendre lorsqu’on clique dessus ! Et les logiciels y sont bien organisés par rubriques intuitives. Autre exemple : les multiples espaces de travail rendent la barre des tâches contextuelle. Vous utiliserez alors un espace de travail pour le développement Web, un autre pour la retouche photo, un troisième pour la navigation sur Internet et un quatrième pour les petites tâches quotidiennes… Ou encore, les accents sur les majuscules, si aisÉs à Écrire (au moyen de la touche Caps-lock).

Dans les inconvénients, je mettrais deux choses. Ubuntu est une distribution faite pour être installée et mise à jour avec un bon accès Internet. Lors des installations, c’est un avantage lorsqu’on dispose effectivement du haut débit : les logiciels sont plus aisés à installer (au moyen du menu Applications → Logithèque Ubuntu) et mis à jour ensuite automatiquement, mais cet avantage devient un inconvénient pour l’utilisateur africain qui se connecte peu de temps et à bas débit. Une solution est donc à trouver au moment de l’installation. De plus, certains périphériques matériels ne sont pas pris en charge correctement par Linux : il arrive ainsi que des webcams, scanners et autres matériels soient inutilisables.

Pour graver un CD avec Linux 10.04 LTS (la dernière version stable) ou Linux 10.10 (la dernière version intermédiaire), rendez-vous sur le site ubuntu-fr.

En plus, c’est pratique, puisque personne ne comprend rien à ce système d’exploitation, on peut librement expliquer ses avantages : contrairement à Windows, Linux prépare à manger, reprise les chaussettes et puise l’eau pour l’utilisateur. Il travaille mieux durant les coupures d’électricité et rafraichit la maison. Un utilisateur de Linux est beaucoup moins sensible au paludisme ! Et surtout, plus que tout, un utilisateur de Linux s’en-ri-chit. Et oui. Alors qu’avec Windows on ne peut pas en dire autant.

Managed cycles : des cycles JavaScript monitorés pour des diaporamas sans problème de charge

C’est tout chaud, tout beau, tout bon, bien optimisé et ça vient de sortir : Managed Cycles. Encore un ! Mais celui-là est le meilleur : plusieurs diaporamas dans une même page Web dont les transitions n’ont jamais lieu en même temps. Ainsi qu’une bonne capacité d’affichage de diaporamas géants extra-larges !

Auparavant j’utilisais le jQuery Cycle Plugin, plus complet, mais des problèmes de charge processeur côté navigateur m’ont conduit à écrire un nouveau script.

Testez et téléchargez Managed Cycles !

PHP : ajouter (ou retirer) le sous-domaine « www »

Inclure ou non le sous-domaine « www » dans l’adresse du site, il faut choisir. Si l’on ne fait rien, la plupart des solutions d’hébergement à bas coût ne choisissent pas et le site est accessible à l’identique avec ou sans le sous-domaine. Ce sont alors les moteurs de recherche qui choisissent.

Pour ajouter le sous-domaine « www », voici un petit bout de code PHP à inclure tout au début des pages du site :

<?php
if(!preg_match('/^www/', $_SERVER['HTTP_HOST']) && !preg_match('/^localhost$/', $_SERVER['HTTP_HOST'])) {
  header('HTTP/1.1 301 Moved Permanently');
  header('Location: http://www.' . $_SERVER['HTTP_HOST'] . $_SERVER["REQUEST_URI"]);
  exit;
}
?>

Nota. – Le cas particulier de l’accès en local sur la plate-forme de développement est pris en compte : la redirection ne s’active pas si le site est sur le serveur « localhost ».

Ou bien, pour retirer le sous-domaine « www » :

<?php
if (preg_match('/^www\./', $_SERVER['HTTP_HOST'])) {
  header('HTTP/1.1 301 Moved Permanently');
  header('Location: ' . 'http://' . substr($_SERVER['HTTP_HOST'], 4) . $_SERVER["REQUEST_URI"]);
  exit;
}
?>

Dans un template Joomla!, ce code est à insérer au début du fichier « index.php » du template. Dans un thème WordPress, le bon fichier est « header.php ».

Sous WordPress, créer un excerpt manuellement

Pour le cas où ça intéresserait quelqu’un, voici une fonction PHP qui refait le travail de celle de WordPress, mais à partir de n’importe quel contenu et pas seulement celui de l’article courant.

<?php
function do_make_excerpt($excerpt, $content, $length = null, $withMoreLink = true) {
  $raw_excerpt = $excerpt;
  if ( '' == $excerpt ) {
    $text = strip_shortcodes( $content );

    $text = apply_filters('the_content', $text);
    $text = str_replace(']]>', ']]&gt;', $text);
    $text = strip_tags($text);
    $excerpt_length = isset($length) ? $length : apply_filters('excerpt_length', 55);
    $excerpt_more = $withMoreLink ? apply_filters('excerpt_more', ' ' . '[...]') : ' ...';
    $words = preg_split("/[\n\r\t ]+/", $text, $excerpt_length + 1, PREG_SPLIT_NO_EMPTY);
    if ( count($words) > $excerpt_length ) {
      array_pop($words);
      $text = implode(' ', $words);
      $text = $text . $excerpt_more;
    } else {
      $text = implode(' ', $words);
    }
  }
  return apply_filters('wp_trim_excerpt', $text, $raw_excerpt);
}
?>

Un exemple d’utilisation avec une liste d’articles ramenés par la fonction get_posts :

<?php
$posts = get_posts();
if (!empty($posts)) : ?>
<ul>
<?php
  foreach ($posts as $post) :
    $postExcerpt = do_make_excerpt($post->post_excerpt, $post->post_content, 10, false);
  endforeach;
?>
</ul>
<?php endif; ?>