Étiquette : html5

Catégories
Blog Open-source Planet-libre Web Webdesign

Modèles de présentations HTML5 pour remplacer PowerPoint

Suite à mon track sur la supervision lors de la première journée de SophiaConf 2012, j’ai eu pas mal de question par mail sur le logiciel utilisé pour concevoir mon support. J’ai en fait utilisé une présentation 100% HTML5 basée sur l’outil Impress.js, lui même inspiré de Prezi. Je ne trouve que des avantages à ce type de présentation. En effet, en mettant de coté le dynamisme et l’aspect « fun », on manipule un format standard, lisible sur n’importe quel navigateur digne de ce nom (je dois avouer que Impress.js, fonctionne beoucoup plus fluidement sur Chromium que sur Firefox).

Nous allons dans ce billet découvrir un panel de solutions équivalentes permettant, moyennant une bonne connaissance du langage HTML et de CSS, de concevoir des présentations originales sans avoir à installer aucun logiciel sur votre machine mis à part un éditeur de texte et un navigateur Web. Bref une solution 100% libre, basée sur des standards !

Les commentaires sont bien sûr là pour compléter cette liste et nous faire partager vos expériences sur le sujet !

Impress.js

Démonstration

GitHub

C’est par cet outil que j’ai découvert les alternative possible à la grande maladie des entreprises du 21em siècle: PowerPoint.

L’exemple fourni sur le GitHub permet de bâtir simplement un jeu de slide. Pour être un peu plus original, il faudra aller éditer le fichier CSS. Impress.js s’occupe de tout le reste: transition entre les slides, vu d’ensemble des slides, animations. C’est un projet perpétuellement en évolution, à surveiller sur GitHub.

Personnellement, j’ai « forké » le projet sur mon espace GitHub, puis je génère une branche par présentation. Cela me permet d’avoir toujours les présentations sous le coude. A noter GitHTML, l’excellente extension à Chrome/Chromium , qui vous permet de visualiser directement vos fichiers HTML  et donc votre présentation à partir de GitHub.

Deck.js

Démonstration

GitHub

Projet débuté en mars 2011, il propose une alternative sérieuse à Impress.js. Moins « fun », les présentations générés sont cependant claires et je trouve le code HTML plus propre.

Html5Rocks

Démonstration

Distribué sous licence Apache 2.0, ce jeu de slides est initialement conçu pour présenter les nouveautés du langage HTML5. Sa structure peut permettre de bâtir simplement votre propre présentation avec en prime des exemples de fonctions HTML5 déjà toutes faites.

Html5Slides par Google

Démonstration

Google Code

Difficile de faire un billet sur un tel sujet sans parler de Google qui y va de son modèle de présentation compatible HTML5. Pas de surprise ici. C’est simple et sobre avec un code HTML facilement compréhensible, même pour un béotien. A noter que le modèle est sous licence Apache 2.0.

Reveal.js

 

Démonstration

GitHub

Bien que présenté comme un modèle CSS de présentation 3D, Reveal.js est plus un modèle HTML permettant de faire des présentations sous la forme de matrice en deux dimensions. On peut, si on le souhaite et si la présentation a été faite pour, se déplacer en haut, en bas, à gauche et à droite pour passer d’un slide à l’autre. Ce mode de navigation, un peu perturbant n’est pas forcement adapté pour un track mais plutôt pour un présentation « à tiroirs ».

Shower

Démonstration

GitHub

Ce modèle de présentation permet de faire rapidement une présentation au format HTML5. On peut noter la possibilité de voir les miniatures des slides avant de commencer la présentation. Les transitions sont simples et rapides. On dispose également de fonctions intéressantes pour, par exemple adapter les images automatiquement à la taille de l’écran ce qui peut être sympa pour une présentation basée sur des photos.

RoboDeck

Démonstration

GitHub

Le principal intérêt de ce modèle de présentation est que si la présentation est disponible en ligne alors il est possible de synchroniser les visiteurs sur le slide en cours. Pour cela, le serveur sur lequel les slides sont hebergés va envoyer (via Web Socket) les informations NEXT et PREV. Je trouve par contre les présentations pas très sexy… A suivre quand même pour des présentations massivement en ligne.

Slides par Brian Cavalier

Démonstration

GitHub

Sur ce modèle, les transitions se font par un très agréable fondu enchaîné. J’aime beoucoup le CSS par défaut qui est sobre et clair. A réserver à des présentations sérieuses.

Slides par Brian Cavalier

Démonstration

GitHub

Comme le précédent modèle, les transitions se font par un très agréable fondu enchaîné, mais la comparaison s’arrête là. Ici on est dans un style de présentation plus « fun » et très bien adapté aux développeurs (avec notamment le syntax highlight). A bookmarker !

Pour conclure

De nos jours et en mettant à part les présentations qui doivent passer entre les mains de personnes sachant uniquement utiliser PowerPoint, je ne comprends pas que l’on utilise pas plus se genre de modèle de présentation. En effet, elles n’ont que des avantages: simple à éditer (avec un éditeur de texte), facilement transportable sur une clés USB ou l’on peut ajouter une version Chromium ou Firefox portable et avec nativement une mise en ligne optimisée (c’est du HTML 🙂 !). Alors ciao PPT et bonjour HTML.

Et vous chers lecteurs vous en êtes ou avec la cure de désintoxication de PowerPoint ?

D’autres modèles à nous conseiller ?

Catégories
Blog Web Webdesign

Un bouton d’abonnement en CSS3 pour votre blog

Dans l’optique, à très long terme, de changer le thème du blog, j’utilise un template de base (HTML5/CSS3) dans lequel je fais mes tests. Aujourd’hui, je voudrais partager avec vous le bouton d’abonnement (RSS, Twitter, FB…) sur lequel je suis en train de travailler.

DÉMONSTRATION

TÉLÉCHARGEMENT (.ZIP)

On commence par une description des différents éléments:

Le CSS

On commence par le fichier CSS. On utilise les directives de type « transition » pour effectuer l’animation de la liste des abonnements disponibles. Cette animation durera 1/2 seconde avec un effet « ease-in-out » (accélération puis ralentissement). Cette animation est composé de deux effets:

  • un effet de couleur (fondu) que l’on configure avec l’opacité de l’objet (opacity)
  • un effet de translation de la div #subscribe-list de 50px du haut vers le bas lors d’un roll-over

[cce_css]

#subscribe-button {

float: right;

opacity: 0.2;

position: relative;

-webkit-transition: all 0.5s ease-in-out;

-moz-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

}

.subscribe-logo {

position: absolute;

right: 0px;

}

.subscribe-count {

position: absolute;

font-size: 12px;

text-shadow: 0px 2px 3px #bbb;

top: 66px;

right: 4px;

}

.subscribe-list {

position: absolute;

opacity: 0;

font-size: 12px;

top: 5px;

right: 32px;

-webkit-transform: translateY(-50px);

-moz-transform: translateY(-50px);

-o-transform: translateY(-50px);

transform: translateY(-50px);

-webkit-transition: all 0.5s ease-in-out;

-moz-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

}

.subscribe-list li {

padding: 0px 10px 10px;

text-align: right;

list-style: none;

}

.subscribe-list li a, .subscribe-list li a:visited {

color: orange;

text-decoration: none;

font-weight: bold;

}

.subscribe-list li a:hover {

text-decoration: underline;

}

#subscribe-button:hover {

opacity: 1.0;

}

#subscribe-button:hover .subscribe-list {

opacity: 1.0;

-webkit-transform: translateY(0px);

-moz-transform: translateY(0px);

-o-transform: translateY(0px);

transform: translateY(0px);

}

[/cce_css]

Le HTML

Il ne reste plus qu’à placer l’objet (de type span) dans la page HTML. Il est bien sûr possible d’adapter la liste à vos besoins.

[cce_html tab_size= »4″]

<span id= »subscribe-button »>

<span><a href= »# »><img src= »img/ars-grafik-rss-icon-32.png »/></a></span>

<span>4200</span>

<div>

<ul>

<li><a href= »# »>RSS</a></li>

<li><a href= »# »>Twitter</a></li>

<li><a href= »# »>Facebook</a></li>

<li><a href= »# »>Mailing</a></li>

</ul>

</div>

</span>

[/cce_html]

On voit donc toutes la puissance de CSS3 à qui il ne manque qu’une normalisation finale.

Catégories
Gstreamer Open-source Planet-libre Video Web

Installation et test de Flumotion 0.8

Flumotion est un serveur de streaming open-source sous licence GPL. Il permet de diffuser à des utilisateurs ne disposant que d’un simple navigateur Web des contenus audio et vidéo.

La dernière version disponible (la 0.8) apporte une fonctionnalité que je trouve intéressante de tester: le support du conteneur WebM et du codec vidéo VP8 que gOOgle à libéré il y a quelques mois.

Nous allons voir dans ce billet comment installer et configurer Flumotion 0.8 sur une distribution GNU/Linux Ubuntu Desktop 10.10.

Compilation de Flumotion 0.8

Récupération des sources:

mkdir ~/src

cd ~/src

wget http://www.flumotion.net//src/flumotion/flumotion-0.8.0.tar.gz

tar zxvf flumotion-0.8.0.tar.gz

cd ~/src/flumotion-0.8.0

Installation des librairies (en plus de mon installation standard d’Ubuntu), j’ai du ajouter:

sudo aptitude install python-all-dev python-kiwi

Configuration et compilation:

./configure

make

sudo make install

sudo mkdir /usr/local/etc/flumotion/

sudo cp conf/default.pem /usr/local/etc/flumotion/

Configuration de Flumotion 0.8

Le serveur Flumotion utilise deux processus: flumotion-manager et flumotion-worker.

Le premier processus (flumotion-manager) à besoin d’un fichier de configuration nommé planet.xml. Je vous propose donc de partir du fichier de configuration fourni avec les sources et de le copier dans un répertoire de votre machine.

mkdir ~/flumotion

mkdir ~/flumotion/conf

cp ~/src/flumotion-0.8.0/conf/managers/default/planet.xml ~/flumotion/conf/

Puis de l’éditer:

gedit ~/flumotion/conf/planet.xml

La ligne vraiment intéressante à modifier est celle-ci:

user:PSfNpHTkpTx1M

Elle défini l’utilisateur user avec le mot de passe par défaut test (encodé).

Remarque: Pour générer un nouveau couple login/password, le plus simple est de ce rendre sur ce site et de remplacer le résultat dans le fichier ~/flumotion/conf/planet.xml.

On lance ainsi le processus avec la commande suivante:

flumotion-manager ~/flumotion/conf/planet.xml &

On vérifie que le processus est bien lancé:

ps auxw | grep flumotion

labo    16352 10.4  0.3  18300 12724 pts/3    S    15:41   0:00 /usr/bin/python /usr/local/bin/flumotion-manager /home/labo/flumotion/conf/planet.xml

Le deuxième processus (flumotion-worker) n’a pas besoin d’un fichier de configuration. Il faut juste passer en paramètre l’utilisateur user avec le mot de passe test (clair) à utiliser pour se connecter au processus flumotion-manager:

flumotion-worker -v -u user -p test

Utilisation de Flumotion 0.8

On va utiliser le programme flumotion-admin pour administrer notre serveur Flumotion:

flumotion-admin &

La fenêtre suivante devrait s’afficher :

Remarque: si vous installez Flumotion sur un serveur sans interface graphique, il faudra utiliser flumotion-admin-text en lieu et place de flumotion-admin.

On clique sur Suivant:

On clique sur Suivant puis on entre le login user et le password test:

Après avoir cliqué sur Suivant, un assistant de configuration (wizard) va s’afficher:

On arrête de cliquer quelques instant pour voir que Flumotion propose deux scénarios:

  • configuration d’un streaming « live » à partir d’une camera / webcam
  • configuration d’un streaming « on demand » à partir d’un fichier

Configuration d’un « streaming live »

Comme un des objectifs de ce billet est de tester la diffusion live en WebM/VP8, on choisi la première option dans la fenêtre suivante:

Si vous n’avez pas de caméra digitale ou de Webcam sur votre machine, vous pouvez utiliser le « test video producer »  qui est en fait une mire de test (je rappelle de Flumotion se base sur GStreamer et cette mire est en fait généré par le plugin videotestsrc).

On configure la mire:

Il est ensuite possible de configurer un texte ou un logo qui sera affiché en overlay sur la vidéo:

On passe ensuite à la configuration de la « mire audio »:

Puis on défini les paramètres du streaming: conteneur, codec vidéo et codec audio:

Au niveau du codec vidéo VP8, on peut soit définir un débit fixe (CBR) ou bien une qualité fixe (VBR). Pour du streaming live, je conseille plutôt du CBR, par exemple à 400 Kbps:

De même pour le codec audio Vorbis:

On défini ensuite si l’on veut streamer sur HTTP (seule option disponible pour l’instant) et/ou sauver le résultat du streaming dans un fichier local sur le serveur (cette option peut être intéressante pour relire la vidéo de manière offline).

Enfin, on défini le point de montage (URL) ainsi que le port TCP à partir duquel le serveur sera accessible. Il est également possible de limiter le streaming (nombre d’utilisateur max, bande passante max…):

On peut également préciser la licence de diffusion de votre streaming:

Et voilà le travail, votre serveur de streaming est opérationnel:

Pour le tester il suffit de ccopier l’URL de l’onglet Statistiques dans (attention pour voir la vidéo depuis une autre machine, il faut remplacer le nom d’hôte avant le :8800 par l’adresse IP de la machine):

  • un navigateur Web compatible WebM/VP8: Chromium
  • un lecteur multimedia compatible WebM/VP8: Totem sous Ubuntu

La vidéo devrait s’afficher:

Pour sauvegarder cette configuration de streaming, il suffit de cliquer sur Connexion > Exporter la connexion puis de sauvegarder le fichier au format XML (Connexion > Importer pour la réimporter dans Flumotion).

Les sources vidéos possibles pour un streaming live sont:

  • la mire (pour les tests)
  • webcam (j’ai rencontré un problème avec la mienne, voir le dernier chapitre de ce billet)
  • TV card
  • Loop video (prend en entrée un fichier OGG et génère une boucle infini à partir de cette vidéo)
  • Firewire

Configuration d’un streaming on-demand (VoD)

Avant de tester la vidéo à la demande, il faut disposer de fichiers vidéos encodés au format WebM (pour la VoD, la version communautaire de Flumotion supporte également le format OGG). Pour produire de tel fichier, je vous conseille la lecture de ce billet. Une fois les vidéos localisées dans un répertoire de votre machine faisant tourner le serveur Flumotion, il suffit de faire appel à l’assistant via le menu Contrôler > Lancer l’assistant de flumotion-admin.

Il faut seulement définir le répertoire ou sont stockées les vidéos:

Puis identifier la liste des vidéos disponibles et leurs URLs dans l’onglet Browser. Là encore, il faut adapter l’adresse en remplaçant le nom logique par l’adresse IP de votre machine Flumotion si vous voulez consulter ces vidéos sur d’autres machines du réseau.

Enfin, vous pouvez ouvrir cette URL soit dans un navigateur Web qui prend en charge WebM (par exemple Chromium):

Soit dans votre lecteur multimédia par défaut (par exemple Totem, ouvrir en utilisant CTRL+L):

Pour une intégration plus « web design compliant » de vos vidéos dans des pages Web (plutôt qu’un bête affichage en full-screen), il faut utiliser le tag HTML5 <video> dont j’ai donné plusieurs syntaxe d’utilisation dans ce billet.

Problèmes rencontrés…

Lors de mes tests, j’ai rencontré un problème lors de la détection de ma WebCam Logitech QuickCam Pro 4000 (qui marche très bien par ailleurs). La détection des informations n’aboutie pas…

Un autre problème est l’ouverture des fichiers VoD à partir de VLC qui supporte pourtant le format WebM. Le son passe correctement mais la vidéo reste désespérément noire…

Catégories
Blog Open-source Video Web

Utiliser le tag video HTML 5 dans WordPress

HTML 5 permet l’insertion de média de type audio ou vidéo directement dans une page HTML sans avoir besoin d’autre chose qu’un navigateur compatible (Firefox 3.5 ou Chromium 4.0 par exemple). A l’heure actuelle, il n’est pas possible de créer des billets utilisant ces tags dans WordPress. Il faut donc passer par un plugin qui va nous permettre de contourner le problème et de nous apporter également un compatibilité avec les navigateurs ne supportant pas la norme HTML 5…

Lire la suite « Utiliser le tag video HTML 5 dans WordPress »
Catégories
Open-source Web

Le tag video dans HTML 5

La nouvelle révision du langage HTML apporte sont lot de nouvelles balises (voir le Wiki pour une liste exhaustive). Une de celles qui a fait couler le plus d’encre est la fonction permettant d’intégrer nativement des lecteurs vidéos dans les pages: <video>. Nous allons dans ce billet nous focaliser sur cette nouvelle balise et en détailler les options.

Introduction

Pour qu’un navigateur Web soit capable de lire directement une vidéo (c’est à dire un flux vidéo et audio), il faut qu’il possède les librairies de décodages (codecs) de ces flux. Dans sa grande sagesse, le W3C (l’organisme qui spécifie le langage HTML) avait décidé de normaliser ces codecs en choisissant les formats libres Theroa et Vorbis. Après un lobbying très actif d’Apple et de Nokia, le W3C a supprimer de ces spécifications le fait d’imposer un codec vidéo et audio commun. En clair on peut très bien se retrouver avec un Firefox qui permettra de lire des vidéos au format Theroa/Vorbis et un Safari qui décodera les vidéos au format H.264…

A l’heure actuelle, le navigateur Firefox est capable (dans sa version 3.5) de lire des vidéos utilisant le codec vidéo Theora et le format audio Vorbis. Bien lui en a pris… Nous allons donc utiliser ce Navigateur pour nos tests.

Hébergement des vidéos

Si vous souhaitez intégrer des vidéos dans votre site Web, la première chose à prendre en compte est l’hébergement des fichiers sources. En effet ces fichiers peuvent être volumineux et en cas de consultation simultanées le débit peut devenir très important. A moins de disposer d’une infrastructure d’hébergement professionnelle, je ne vous conseille pas d’héberger les fichiers vidéos sources sur votre serveur Web. De nombreux sites permettent un hébergement gratuit d’œuvres libres de droits. J’ai choisi Wikimedia pour héberger la vidéo qui va illustrer mes exemples.

Si vous souhaitez tout de même héberger vos vidéos sur votre serveur Web Apache, il faut vérifier que les type mime suivant sont pris en compte dans la configuration (fichier de configuration ou fichier .htaccess):

AddType video/ogg          .ogv
AddType application/ogg    .ogg

Exemples d’utilisation de la balise <video>

Affichage d’une vidéo

Nous allons dans ce premier exemple afficher sur une page Web une vidéo stocké sur le serveur Wikimedia à l’adresse suivante: http://upload.wikimedia.org/wikipedia/commons/6/67/Bigbuckbunnyextract.ogg

La vidéo va être téléchargé (ce n’est donc pas du streaming). Quand le navigateur estimera que le téléchargement est assez avancé, il commencera à jouer la vidéo.

Pour lancer la vidéo, il faut faire un click droit / Play.

On utilise le code suivant:

<video src= »http://upload.wikimedia.org/wikipedia/commons/6/67/Bigbuckbunnyextract.ogg »></video>

Voir l’exemple 01 en action.

Affichage d’une vidéo avec ses contrôleurs

On va améliorer l’exemple précédant en ajoutant des contrôleurs (Play/Pause, barre de progession et volume). On utilise pour cela le tag controls:

Voici le code:

<video src= »http://upload.wikimedia.org/wikipedia/commons/6/67/Bigbuckbunnyextract.ogg » controls></video>

Voir l’exemple 02 en action.

Redimensionnement de la vidéo

L’intégration de la vidéo dans le design de votre site Web nécessitera surement une redimensionnement de celle-ci. Attention, ce n’est pas parce-que la vidéo est plus petite que le temps de chargement va être plus cours. En effet, c’est la même source qui est utilisée.

Voici le code:

<video src= »http://upload.wikimedia.org/wikipedia/commons/6/67/Bigbuckbunnyextract.ogg » width= »427″ height= »240″ controls></video>

Voir l’exemple 03 en action.

Forcer la lecture de la vidéo

Une autre fonction intéressant est le fait de pouvoir forcer la lecture de la vidéo (sans aucune intervention de votre visiteur). On utilise le tag autoplay.

Voici le code:

<video src= »http://upload.wikimedia.org/wikipedia/commons/6/67/Bigbuckbunnyextract.ogg » width= »427″ height= »240″ controls autoplay></video>

Voir l’exemple 04 en action.

Ajouter des contrôleurs en JavaScript

C’est bien beau d’avoir les contrôleurs disponible sur la vidéo mais pour une intégration aux petits oignons dans votre site, il peut être utile de déporter ces fonctions sur des liens/boutons externes. Pour cela, la balise vidéo permet de fixer un tag id. Ce dernier pourra être utilisé dans un JavaScript:

 <script>
                function play() {
			video = document.getElementById("myvideo");
			video.play();
		}
		function pause() {
			video = document.getElementById("myvideo");
			video.pause();
		}
</script>
...
<video id="myvideo" src="http://upload.wikimedia.org/wikipedia/commons/6/67/Bigbuckbunnyextract.ogg" width="427" height="240" controls></video>

Voir l’exemple 05 en action.

Conclusion

Pour aller plus loin je vous conseille une lecture attentive du document de spécification du W3C.