Arrêt de Flash sur mobile, HTML5 enterre le flash :
http://www.revioo.com/news/adobe-flash-html5-n16345.html
http://www.silicon.fr/le-html5-enterre-le-flash-64905.html
http://www.zone-numerique.com/news-11690-l-abandon-de-flash-player-pour-les-mobiles-au-benefice-de-html5-est-confirme.html

Panique dans le monde de Flash :
http://www.silicon.fr/la-liberation-de-adobe-flex-provoque-une-panique-dans-le-monde-flash-65373.html

1 million d’utilisateurs pour la WebApp du Financial Times :
http://www.macplus.net/itrafik/depeche-63032-ft-1-million-d-utilisateurs-pour-la-webapp

Microsoft cesse de maintenir Silverlight au profit du HTML5 :
http://www.journaldunet.com/developpeur/technos-net/arret-du-developpement-de-silverlight-1111.shtml

iOS et la fragmentation des mobiles ont épuisé Flash :
http://www.macgeneration.com/news/voir/223302/adobe-ios-et-la-fragmentation-des-mobiles-ont-epuise-flash

Slideshare passe complètement au HTML5 !
http://www.presse-citron.net/slideshare-abandonne-completement-flash-au-profit-de-html5

Copyright © 3WDOC

Une des raisons pour laquelle 3WDOC n’a pas été particulièrement prolifique sur le blog dernièrement, c’est parce que nous avons donné plusieurs initiations à 3WDOC Studio dans des écoles et instituts de formation de journalisme et de multimédia depuis la fin du mois de septembre. Nous avons eu grand plaisir à faire découvrir notre outil, voici un résumé de nos récentes interventions !

CFPJ

Encadré par le journaliste Antonin Lhôte et Alexis Sarini de Webdocu.fr, cet atelier d’initiation à 3WDOC Studio s’adressait à des journalistes en formation continue. Organisé au CFPJ du 17 au 22 octobre 2011, l’atelier « Narrations interactives » avait pour objectif la production d’un reportage rich media à partir d’un sujet d’actualité. Projet expérimental puisqu’il s’agissait en 5 jours de creuser trois pistes narratives, trois approches éditoriales, trois interfaces et d’apprendre à les mettre en forme avec notre outil (2 jours et demi avec 3WDOC).

Le groupe a travaillé sur l’élection de François Hollande à la primaire socialiste (il a été choisi le 16 octobre, veille du début du workshop). Les 11 journalistes se sont divisés en 3 groupes, chacun a développé un angle (les personnalités de l’entourage de François Hollande, les pièges sur la route du candidat à la présidentielle, les réactions de l’UMP à sa désignation) et sa mise en forme interactive.

Comme l’explique Antonin Lhôte : « L’objectif n’était pas la perfection mais l’exploration la plus concrète possible d’une démarche journalistique prometteuse rendue possible par la naissance d’un nouvel outil de développement. »

Vous pouvez voir le résultat de leur travail ici:
http://studio735.vip1.3wdoc.com/he3Player.php?action=local.sequence.read&sequence_id=50

Du côté de 3WDOC, nous avons été enthousiasmés par la motivation des participants, leur appropriation de l’outil et leur capacité à rapidement penser et mettre en forme une démarche rich media comme celle-ci !

EMI-CFD

Nous en avions déjà un peu parlé dans ce post. Le webdocumentaire « 17 octobre 1961 – La Nuit Oubliée » a été écrit et conçu par les auteurs Olivier Lambert et Thomas Salva, coproduit par Dailymotion et le Studio Hans Lucas et développé avec 3WDOC Studio. Ce qu’on sait moins c’est que les participants en formation webdocumentaire à l’EMI-CFD y ont également participé ! Cette formation de 3 semaines organisée par Wilfrid Estève a permis aux réalisateurs, photographes, journalistes, graphistes et monteurs qui l’ont suivie de découvrir le monde du webdoc en profondeur. Ils ont échangé avec des auteurs, producteurs et spécialistes de la question à travers des études de cas et des retours d’expériences.

La dernière semaine (5 jours) a été consacrée à un workshop 3WDOC ! A partir du matériel des réalisateurs Olivier Lambert et Thomas Salva (vidéos, archives, éléments graphiques), les participants de l’atelier ont conçu des parcours interactifs, mis en forme leurs interfaces… en somme esquissé la maquette web de « La Nuit Oubliée ». La richesse de ce workshop a résidé notamment dans la diversité des profils des participants, qui se sont révélés très complémentaires, et a fait naître une émulation, des échanges très intéressants. Cette formation à 3WDOC Studio a été intense et féconde !

IHECS

Au cours du mois d’octobre, 3WDOC a eu le grand plaisir de se rendre à trois reprises à Eghezée, près de Namur en Belgique. Damien Van Achter, développeur éditorial de Owni.fr et professeur de journalisme à l’IHECS (Institut des Hautes Etudes des Communications Sociales) de Bruxelles, y a organisé trois Master Class pour ses étudiants.

Pendant quatre jours, mise au vert et travail intense pour ces futurs journalistes ! Ils ont notamment eu pour intervenants Eric Schérer, directeur de la prospective, de la stratégie numérique et des nouveaux médias à France Télévisions, Ziad Maalouf de l’Atelier des Médias de RFI, Marie Coussin, data-journaliste à Owni (pour ne citer que des intervenants français)… et une initiation d’une journée à 3WDOC Studio !

Après une présentation du logiciel et une discussion sur son utilité pour le journalisme rich media, les étudiants manipulaient l’outil dans l’après-midi. Ils ont découvert ses fonctionnalités fondamentales : agencement des médias dans l’espace et le temps, exploration des possibilités interactives et esquisse de stylisation des éléments.

La fraîcheur et l’engouement presque naturel de ces digital natives (des étudiants de 21-24 ans en moyenne) pour le Studio étaient surprenants ! Ils nous ont en tout cas conforté dans l’idée que nous allions dans la bonne direction pour les futurs créateurs de contenus rich media, toujours connectés, multi-task et multi-casquettes, dynamiques et curieux. Encore un grand merci à Damien de nous avoir invités dans cette Open News Room ! Nous lui tirons notre chapeau…

Benoît Theunissen, étudiant de la Master Class, a d’ailleurs écrit un article sur l’intervention de 3WDOC à Eghezée.

Nous vous tiendrons informés de nos prochaines interventions dans des écoles de multimédia, cinéma, journalisme, communication… N’hésitez pas à nous solliciter pour des formations, nous sommes toujours heureux de faire découvrir notre outil et échanger avec les créateurs !

Comment amener l’internaute, automatiquement, sans action de sa part, à une deuxième séquence une fois que la première séquence en cours est terminée ? Dans la version actuelle de 3WDOC Studio c’est possible mais pas encore très évident. Voici la procédure :

Dans l’onglet « Config » il faut aller directement à la deuxième page et copier / coller le code suivant dans le champ « overcode » :

$(this).bind("tcEnded", function() {
window.location.href = "_URL_de_la_sequence";
});

en remplaçant _URL_de_la_sequence_ par la séquence cible.

Voir ci-dessous :

Copyright©www.lemonde.fr

Ce webdocumentaire rappelle à bon escient ce qui fait le substrat idéologique, pour reprendre un terme qu’affectionne les nombreux universitaires interrogés dans ce webdoc, de la droite et pas seulement la droite nationale d’ailleurs.

Au-delà du plaisir nostalgique de voir quelques gloires du journalisme français dans des images d’un autre âge : Gérard Holtz avant sa « dakardisation », Poivre d’Arvor avant sa coupe à la Anthony Burgess ou enfin d’un Christophe Bourseiller, politologue grisonnant et non acteur poupin des films d’Yves Robert, on y découvre une figure inconnue et tutélaire de l’extrême droite française.

Un webdoc très bien documenté mais dont le mode de navigation est aussi au moins complexe que le propos et les références.

En toute fin, une idée très pertinente est exprimée par Nicolas Lebourg, spécialiste de l’extrême droite et du fascisme à l’Université de Perpignan, qui rappelle que la normalisation des extrêmes fait rentrer les idées extrêmes comme éléments centraux du débat politique actuel. Cela permet sans doute de mieux comprendre ce qui se prépare pour l’élection présidentielle de 2012 avec Mélenchon à gauche ou Marine Le Pen à droite.

Pour aller plus loin

• François Duprat, une histoire de l’extrême droite
  http://www.lemonde.fr/week-end/visuel/2011/04/08/francois-duprat-une-histoire-de-l-extreme-droite_1504004_1477893.html
• La page de wikipedia de François Duprat
  http://fr.wikipedia.org/wiki/Fran%C3%A7ois_Duprat_(homme_politique)
• La page de wikipedia de Christophe Bourseiller
  http://fr.wikipedia.org/wiki/Christophe_Bourseiller

Vous aurez la possibilité de choisir entre différents paramètres pour chaque élément. Par exemple, la font-family, la couleur, la background-image, la bordure, etc…

Vous pouvez également choisir les paramètres HOVER: le nouveau style que l’élément aura au survol de la souris.

L’Editeur de Style vous permettra de créer et d’appliquer des styles différents pour vos articles: l’arrière-plan du player, la position du player, des articles, des boutons, des images et des boutons UI. Vous pouvez créer un style spécifique à une séquence, mais aussi utiliser le même style pour plusieurs séquences.

Dans cette feuille de style vous définirez :

• l’arrière-plan du player
• la position du player
• 5 styles d’articles
• 5 styles de boutons
• 5 styles d’images
• le style des boutons UI

Vous pouvez mieux comprendre la signification de chaque paramètre grâce à l’aide contextuelle présente sur chaque paramètre.

Lorsque vous créez votre style, afin de prévisualiser son apparence, vous pouvez cliquer sur le bouton « Aperçu ». Vous serez également en mesure de visualiser les paramètres HOVER en survolant chaque élément:

Pour plus d’informations

• Tutorial interactif
  Comment personnaliser le style du player ?
• Tutorial interactif
  Comment appliquer un style à une image ?
• Tutorial interactif
  Appliquer un style aux boutons d’interface utilisateur (UI buttons)
• Tutorial interactif
  Appliquer un style à un bouton
• Tutorial interactif
  Comment appliquer un style à un article ?
• Tutorial interactif
  Comment appliquer un style à une séquence ?

Voici des exemples de personnalisation possibles avec 3WDOC Studio pour des boutons, images et articles de vos séquences :

Chaque élément est personnalisable dans un onglet de style. Ce sont les mêmes paramètres pour les articles, les boutons et les images. Pour les images, évidemment, il n’y a pas de personnalisation du texte.

Les trois onglets sont semblables à l’image suivante.

Ci-dessous, nous allons définir tous les éléments. Tout d’abord, vous devez définir le contour de l’élément, puis définir le style du texte (uniquement pour les articles et les boutons) et les paramètres de « hover » (changements de style lorsque la souris survole l’élément).

Le contour de l’élément

Chaque élément (image, article et bouton) est dans une boîte qui permet de lui offrir un contour. Par exemple, vous pouvez créer une bordure autour d’une image, un article ou un bouton et le concevoir.

cursor : Définit le type de curseur au survol de la souris.

border-radius:Définit l’arrondi des angles de l’élément

border-style: Définit le style de la bordure

border-width: Définit la largeur de la bordure

border-color: Définit la couleur de la bordure

box-shadow: Définit l’ombre de l’élément. Une ombre interne peut aussi être appliquée

Les paramètres de texte

Ce sont tous les paramètres pour personnaliser le texte, SEULEUMENT POUR UN ARTICLE OU UN BOUTON ! En fait, vous pouvez contrôler l’ensemble de son apparence (police, taille, couleur, etc).

color: Définit la couleur du texte

font-size: Définit la taille de la police en pixel

font-family: Définit la police

font-weight: Définit la graisse de la police

font-style: Définit le style de la police

text-align: Définit l’alignement du texte (à gauche, centré, à droite)

text-decoration: Définit la décoration du texte

text-transform: Définit la casse du texte

padding:Définit la marge autour du texte par rapport à son contenant

Paramètres « Hover »

Ce sont tous les changements de style d’un élément lorsque la souris le survole. Avec ces paramètres, vous pouvez créer des changements de style CSS, comme la couleur, la bordure ou l’opacité.
Mais vous pouvez également ajouter des transitions CSS3 , ces paramètres permettent des petites animations.

color:hover:Définit la couleur du texte au survol de la souris
text-decoration:hover: Définit la décoration du texte au survol de la souris
background-color:hover: Définit la couleur d’arrière plan au survol de la souris
background-image:hover: Définit l’image d’arrière plan au survol de la souris
border-style:hover: Définit le style de bordure au survol de la souris
border-width:hover: Définit la largeur de la bordure au survol de la souris
border-color:hover: Définit la couleur de bordure au survol de la souris
opacity:hover: Définit l’opacité au survol de la souris
transition-delay: Définit le temps de démarrage de l’effet de transition
transition-timing-function: Définit la fluidité de l’effet de transition
transition-duration: Définit la durée de l’effet de transition
transition-property: Définit l’élément de style sur lequel l’effet de transition va s’appliquer
rotate:hover: Définit en degré l’angle de rotation, de 180° à -180°, au survol de la souris
scaleY:hover: Définit un redimensionnement vertical au survol de la souris. Cela peut-être un agrandissement ou un rapetissement
scaleX:hover: Définit un redimensionnement horizontal au survol de la souris. Cela peut-être un agrandissement ou un rapetissement
translateY:hover: Définit un déplacement vertical au survol de la souris
translateX:hover: Définit un déplacement horizontal au survol de la souris

Pour aller plus loin

• Tutorial interactif
  Comment appliquer un style à une image ?
• Tutorial interactif
  Appliquer un style à un bouton
• Tutorial interactif
  Comment appliquer un style à un article ?
• Tutorial
  Comment utiliser l’éditeur de style ?
• Tutorial
  Comment personnaliser les boutons UI (play, stop, fwd, etc.) ?
• Tutorial
  Comment personnaliser le player ?

Dans cet article nous allons voir comment personnaliser le player. Le player est la boîte qui permet de lire votre séquence dans le navigateur.

L’Editeur de Style est un éditeur de style CSS, incluant les nouvelles transitions CSS3. Ici, chaque paramètre est détaillé pour chaque élément !

L’arrière plan

Il définit le style général du player.

La position du player

Il définit la marge autour du player.

Maintenant, vous pouvez appliquer un style à un article, une image ou un bouton en suivant le tutorial suivant : Comment appliquer un style à un article, une image ou un bouton ?

Exemples de styles de player

Plus d’informations

• Tutorial interactif
  Comment personnaliser le style du player ?
• Tutorial
  Comment utiliser l’éditeur de style ?
• Tutorial
  Comment personnaliser les boutons UI (play, stop, fwd, etc.) ?
• Tutorial
  Comment personnaliser les articles, les boutons et les images ?

Ces nouveautés sont intimement liées au retour d’usage gracieusement dispensé par les très nombreux beta-testeurs qui ont bien voulu participer à l’amélioration de notre web application. Qu’ils en soient tous remerciés….

Par exemple, vous pouvez désormais visualiser vos médias depuis la liste des médias, entrer directement dans l’Editeur lors de la création d’une séquence, et bien plus encore !

La communauté ne cesse de s’accroître et vous pouvez aussi y participer en nous faisant parvenir vos questions ou demandes via le formulaire de contact disponible dans votre compte utilisateur.

Toutes ces modifications sont déjà disponibles dans votre espace VIP, grâce à la distribution de notre application en mode API.

Si vous avez déjà installé le 3WDOC Studio sur votre site, nous vous conseillons de le mettre à jour en suivant la procédure suivante : « Update a 3WDOC Studio on a registered domain »

Rappelez-vous que vous pouvez installer le 3WDOC Studio sur un nombre de domaine illimité !

Nous avons également créé de nouveaux tutoriaux ainsi que des articles pour vous guider dans une meilleure utilisation de notre application.

Regardez le tutoriel « Comment créer un diaporama ».

L’astuce du jour :

Lorsque la souris survole l’intitulé d’un des paramètres, une aide contextuelle s’affiche !

Nous vous tiendrons informés des avancées de 3WDOC Studio Bêta très bientôt.

L’équipe 3WDOC

An easy web way to tell stories

N’oubliez pas que pour débuter, le guide d’utilisation est très pratique !

Consultez régulièrement notre Support (FAQ + tutoriaux)

Grâce à vos retours, nous avons amélioré notre système d’inscription et d’installation de 3WDOC Studio.
Une nouvelle procédure d’inscription vous guidera tout au long de l’enregistrement de votre domaine.

Vous pouvez faire le choix entre deux options :

Option 1- Utilisez 3WDOC Studio gratuitement, directement sur notre plateforme d’hébergement.
Option 2- Installez 3WDOC Studio sur votre espace d’hébergement.

Par la suite, vous pourrez revenir sur la page DOMAINES ENREGISTRES et ajouter autant de domaines que vous souhaitez.

Les notions de base pour utiliser 3WDOC STUDIO

• Qu’est-ce qu’un média?

Les médias sont les photos, les audios et les vidéos que vous souhaitez utiliser pour votre WDOC. Chaque média sera inclut dans une piste positionnée dans le temps et dans l’espace, dans une séquence.

• Qu’est-ce qu’une piste?

Les pistes contiennent des médias (photos, audios, vidéos), des articles et des boutons. Chaque piste sera positionnée dans le temps et dans l’espace, dans une séquence.

• Qu’est-ce qu’une séquence ?

Une séquence comprend le travail édité. Elle est composée d’une ou plusieurs pistes. Votre histoire, ou une partie de votre histoire est racontée dans la séquence.

• Qu’est-ce que l’Editeur?

L’Editeur est l’espace de travail de chaque séquence. Vous construirez votre histoire en sélectionnant différentes pistes et en les éditant.

• Qu’est-ce qu’un WDOC?

Un WDOC est l’histoire finale, composée de plusieurs séquences.

• Qu’est-ce que l’onglet Style?

L’éditeur de style vous permet de créer des feuilles de style CSS 3 associées à chaque séquence. Elles sont composées de sous feuilles pour chaque bouton, image, et texte.

Par analogie,
• Le WDOC est un livre.
• La séquence est un chapitre.
• Les pistes sont les lignes, les photos, etc.

Réfléchir à l’histoire

Réfléchissez bien à l’histoire que vous voulez raconter. Le travail en amont est fondamental pour créer d’une façon efficace et optimiser votre temps.

Voici quelques recommandations :

• Préparez le scénario, écrivez les idées principales.
• Construisez le shéma général de votre WDOC.
• Construisez la mise en page de chaque séquence. Un petit dessin à la main est toujours pratique !
• Sélectionnez et préparez le contenu que vous allez utiliser : textes, médias

Nous vous conseillons de télécharger notre guide d’utilisation en pdf et de consulter régulièrement notre Support.

Nous vous invitons à découvrir un WDOC sur New York en guise de démonstration. Ces quelques séquences simples vous permettront d’explorer plus facilement les principales fonctionnalités de notre application. Vous pourrez ainsi voir comment a été réalisée chaque séquence et aussi utiliser les Médias disponibles dans la « Liste des Medias » pour commencer à créer vos propres séquences avec 3WDOC Studio.

Bonne création…

Quelques photos du Studio :

Copyright© www.mtl12.com

C’est Vincent Bonnemazou, co-auteur « d’Un facteur en campagne » avec Jean-Luc Luyssen (photographe) qui nous a signalé ce web documentaire déjà ancien à l’échelle de l’histoire du webdoc ; il date de 2007 mais toujours innovant « Montreal en 12 lieux »… Conquis, nous avons décidé de consacrer un article à ce projet interactif qui bien évidemment a déjà remporté de nombreux prix (Lauréat du web flash festival 2008, FWA, SOTD, Grand Prix du Gémeaux, Meilleur site Web émission documentaire, Applied Arts Interactive Media Awards, Digital Marketing Awards, Communication Arts, Boomerang Grand Prix, Grakika).

Produit par deux québécois, Vianney Tremblay et Philippe Lamarre, pour le compte d’Urbania et Toxa, ce documentaire présente Montréal en 12 lieux insolites. La version télévisée est prolongée sur le web avec des contenus complémentaires.

Le scénario

Parc, boîte de nuit, hôtel de luxe, marchés, chaque étape est illustrée autour d’un personnage emblématique habitué des lieux. Des interview et panoramas visuels sont disponibles au fur et à mesure que l’on évolue dans cet univers interactif original.

Le design

L’usage des effets est peut être un peu excessif, car il est parfois difficile de cliquer sur des boutons en mouvement. Mais le design de l’interface et le graphisme créent un attrait particulier à ce projet et sont remarquablement soignés.

On vous laisse découvrir ou redécouvrir cette œuvre multimédia !

Urbania est un magazine indépendant montréalais original qui se décrit ainsi : « Anticonformiste, provoquant, graphiquement audacieux, décalé, déjanté, délirant… On pourrait attribuer à Urbania tout un chapelet d’adjectifs. Cela nous éloignerait cependant de sa mission première : rendre l’ordinaire extraordinaire. »

• « Montréal en 12 lieux »
  Le site de Montréal en 12 lieux
• Le site de TV5 canada
  Le site de TV5 Canada
• Urbania
  Le site du magazine Urbania »
• Toxa
  Le site de l’agence Toxa
• Un facteur en campagne
  Le webdoc sur le site Lemonde.fr

Montréal, Canada

Tous les éléments disponibles dans cet article sont visibles sur les sites de – http://wwww.mtl12.com

Les droits de propriété intellectuelle sur l’ensemble des éléments (animations, photographies, illustrations, images, textes, recettes, fiches techniques, musiques etc…) composant les éléments de cet article sont la propriété exclusive de leurs auteurs.