Refonte sur la banquise

Rédigé par Patrice Blondel - - 10 commentaires

Voici un tout nouveau site

Depuis plusieurs années, je fonctionnais sur le même modèle de blog : il était temps de changer.

Pourquoi ?

  • un gros ménage à faire : des articles étaient devenus obsolètes, la présentation des logiciels n'était plus d'actualité.
  • une version plus récente de Pluxml : je suis resté fidèle à ce CMS léger.
  • un site Responsive Web design pour une lecture et une navigation optimales quelle que soit sa gamme d'appareil (téléphones mobiles, tablettes, liseuses, moniteurs d'ordinateur de bureau).
  • une utilisation du HTML5 et CSS3 qui optimise le temps de chargement des pages, car moins d'images, moins de code, moins de fichiers flash , qui simplifie le codage et qui offre plus de possibilités.

Que reste-t-il de l'ancien site ?

J'ai supprimé une bonne moitié des articles (mais il en reste encore 160 ;-))
Je n'ai gardé que les commentaires de ces deux derniers mois.
J'ai également gardé la documentation Fancybox même si elle n'est plus d'actualité (remplacée par Zoombox). Mais c'est toujours intéressant de comprendre son fonctionnement.

Quels changements ?

Le site est, à mon avis, plus lisible : il utilise une plus grande largeur d'écran et une police plus grosse. J'ai mis le menu dans la barre latérale pour encore gagner de l'espace d'affichage.
Le flash n'est plus utilisé pour les vidéos ou l'audio, il vous faudra donc un navigateur récent pour avoir toutes les informations.
Je me suis inspiré du thème Navan pour réaliser ce blog.

Bonne navigation !

Lecteur audio en HTML5

Rédigé par Patrice Blondel - - aucun commentaire

En HTML5, la balise <audio> permet de lire un seul fichier son (mp3, ogg etc.)
Je me suis aidé du tutoriel « Monnaie Libre » pour améliorer ce lecteur.

Le code permettant de lire un fichier son prend cette forme :

<audio controls="controls">
<source src="titre.mp3" type="audio/mp3" />
Votre navigateur ne supporte pas la balise HTML5 audio.
</audio>

Pour utiliser ce même lecteur avec plusieurs fichiers sons différents, il faut « bidouiller » un peu :

1. Modifier le fichier header.php de votre thème Pluxml

Il faudra ajouter juste avant </head>
<script>
function loadSong(elt, e) {
if(!e) var e = window.event;
document.getElementById("player").src=elt.href;
document.getElementById("player").load();
document.getElementById("player").play();
return false;
}
window.onload = function() {
links = document.getElementById("playlist").getElementsByTagName("a");
for(var i = 0; i<links.length; i++) {
links[i].onclick=function(e) { return loadSong(this, e); };
}
}
</script>

2. Code à ajouter dans votre article

<div>
<audio tabindex="0" id="player" controls="controls">
</audio>
<ul id="playlist">
<li><a href="fichier1.mp3" onclick="loadSong()">fichier2</a></li>
<li><a href="fichier2.mp3" onclick="loadSong()">fichier2</a></li>
<li><a href="fichier2.mp3" onclick="loadSong()">fichier2</a></li>
</ul>
</div>

3. Renseigner le fichier theme.css de votre thème

/* lecteur audio */
#player {
	margin: 0;
	padding: 0;
        font-family: sans;
        font-size: 12px;
	width: 210px;
}

#playlist {
	border: solid 5px #555;
	font-family: sans;
	font-size: 12px;
      	background-color: #777;
	list-style: none;
	margin: 0px;
	padding: 0px;
	width: 210px;
}

#playlist li:nth-child(even) {
      	background-color: #888;
}

#playlist li:nth-child(odd) {
      	background-color: #777;
}
      
#playlist li a,
#playlist li a:visited,
#playlist li a:hover {
        color: white;
	padding-left: 2px;
	padding-right: 2px;
	text-decoration: none;
}

Résultat

Vous devez obtenir un lecteur de ce type.
Une bonne occasion de ré-écouter Led Zeppelin :D

Un clic sur le titre démarre le « player »
À vous de modifier le CSS pour obtenir le look souhaité.

Quelques nouvelles balises en HTML5

Rédigé par Patrice Blondel - - aucun commentaire

La balise <details>

Elle permet, sur demande, d'afficher des précisions sur un texte.
Elles sont initialement masquées, mais en cliquant sur le titre, elles s'affichent :

Texte affiché

Précisions sur le texte

Cette balise est compatible avec Chrome, Opera et Safari mais pas encore avec Firefox ni Internet explorer.

Intégrer une vidéo dans HTML5

Rédigé par Patrice Blondel - - aucun commentaire

En HTML5, une balise dédiée permet l'intégration de la vidéo.
il est donc beaucoup plus aisé d'intégrer de la vidéo (aussi facile que pour une image).
Le webmaster n'a pas à se soucier de savoir si l'utilisateur possède les bons codecs ; ceux-ci sont inclus de manière native.

Utilisation de la balise <video>

src L'URL du conteneur de la vidéo
width, height Les dimensions de l'image
poster L'URL d'une image à afficher en remplacement de la vidéo, en attendant qu'elle soit disponible. On utilise une frame de la vidéo
videoHigh, videoHeight Ce sont les dimensions originelles de l'image. Des attributs en lecture seule qui sont lus en JavaScript, pour fournir une information sur la vidéo
autobuffer Vaut true ou false, la valeur vrai déclenche le chargement en mémoire de la vidéo en même temps que la page, une option choisie quand on suppose qu'elle sera obligatoirement vue
autoplay Vaut true ou false, la valeur vrai démarre la vidéo quand la page est chargée
loop Vaut true ou false, la valeur vrai fait tourner la vidéo en boucle
controls Vaut true ou false, la valeur vrai indique que la barre de contrôle par défaut s'affiche, sinon le site définit sa propre barre

Un exemple



The Ancient - Steve Howe

<video width="320" height="240" controls="controls">
  <source src="videos/.mp4" type="video/mp4" />
  <source src="videos/the_ancient.webm" type="video/webm" />
  <source src="video.ogv" type="video/ogg" />
  Choisissez un navigateur plus récent compatible html5
</video>

Utiliser ffmpeg et avconv

Connaître les conteneurs installés

$ avconv -formats
Voici la liste de formats (conteneurs) que reconnaît ffmpeg.
elle est organisée de manière simple, la première colonne indique si l'on peut lire (D) ou écrire (E) le format en question.

Exemple
DE matroska        Matroska file format

Signifie que l'on peut à la fois lire et écrire les fichiers .mkv avec ffmpeg.

Connaître les codecs installés

$ avconv -codecs
Vous aurez une liste avec là aussi les fameux D et E. Mais aussi des V, A ou S qui vous permettent de savoir si un codec concerne la vidéo, le son ou les sous-titres.

Convertir une vidéo en WebM

WebM est un format multimédia ouvert, principalement destiné à un usage sur le web.
Il est basé sur un conteneur dérivé de Matroska, et regroupe des flux vidéos encodés en VP8 et des flux audios encodés en Vorbis1. Ce format fait partie des formats vidéos proposés pour la balise <video> de HTML5. Il est amené à remplacer le premier format ouvert proposé, Theora, et fait concurrence au format fermé H.264.
WebM est supporté par le navigateur Google Chrome depuis sa version 6, Mozilla Firefox depuis sa version 4 et Opera depuis sa version 10.60. Les utilisateurs d'Internet Explorer dans sa version 9 et supérieure doivent installer l'application WebM Microsoft Media Foundation components pour pouvoir lire ce format.

$ avconv -i input.mp4 -c:v libvpx -b:v 1M -c:a libvorbis output.webm

Améliorer l'affichage dans Virtualbox

Rédigé par Patrice Blondel - - aucun commentaire

Installer les GuestAdditions

Les Additions invité VirtualBox comprennent des pilotes de périphériques et des applications système qui optimisent le système d'exploitation pour de meilleures performances et une utilisation optimale.
C'est la raison pour laquelle vous devez installer les Additions invité sur la machine virtuelle.

Installons le nécessaire

# apt-get install build-essential module-assistant bzip2

1. Insérer l'image CD des Additions invité



2. Monter le CD (double clic sur l'icône)



3. Lancer la commande d'installation

$ sh /media/cdrom0/VBoxLinuxAdditions.run



4. Je dois installer certains packages manquants (ici bzip2)



5. Fin de l'installation

Il faut maintenant redémarrer la machine virtuelle pour bénéficier des GuestAdditions.


Pourtant certains OS ne peuvent être améliorés pas ces Additions invité (par exemple Haïku) ; il va falloir modifier la résolution d'écran « à la main ».
Voici une solution.

Ajouter une nouvelle résolution d'écran pour une machine virtuelle

(ici Haïku)
$ VBoxManage setextradata Haïku CustomVideoMode1 1440x900x24



Haïku




Windows 10

Fil Rss des articles