18067 sujets

Questions générales et questions de débutants

[nouveau tuto] Tutoriels démontrés par vidéo

Pages :
Administrateur
Voilà une idée que je garde en réserve depuis un bout de temps, mais le ménage de la rentrée va me booster un peu.

Dreamweaver est sans doute le logiciel HTML le plus utilisé dans le monde. Malgré ses incessantes évolutions, il est encore souvent décrié pour sa lourdeur de code, son manque de "sémantique" et sa complexité.

L'idée générale est de montrer que Dreamweaver, même s'il n'est pas parfait lorsqu'il est employé de façon automatique, peut être un bon outil d'accompagnement lorsqu'on ne le laisse pas tout faire.

L'originalité du tutoriel serait de le proposer de façon visuelle, à l'aide de petites vidéos (captures de l'écran) qui expliqueraient visuellement comment procéder pour réussir chaque étape de la conception.

Voici des exemples (ouvrir en grande fenêtre) : http://css.alsacreations.com/dreamweaver/01-exo1.exe
http://css.alsacreations.com/dreamweaver/02-appliquer-styles-base.exe
http://css.alsacreations.com/dreamweaver/03b-avec-sans-styles.exe
http://css.alsacreations.com/dreamweaver/03-positionnement-base.exe
http://css.alsacreations.com/dreamweaver/04-menu_css.exe
http://css.alsacreations.com/dreamweaver/Restaurant1.exe
http://css.alsacreations.com/dreamweaver/Restaurant2.exe
Modifié par Raphael (29 Aug 2006 - 15:56)
Administrateur
Bah honnêtement, je pense qu'on pourrait faire beaucoup mieux : c'est hésitant, le format n'est pas génial, etc.
Mais je n'y connais rien en capture vidéo.
Administrateur
Ah oui c'est vraiment un niveau au-dessus, ce emob.

Tu as moyen de faire quelque chose sur ce sujet, Aymeric ?
Attends que je réinstalle mon Premiere qui prend la poussière et on pourra voir.

Je m'etais fait une banque de ressources pour créer des tutos video y'a un an de ça, faut que je retrouve tout ça, ceci dit doit y avoir de nouveaux outils depuis le temps.

Pour le reste je suis ok pour m'investir mais, car y'a toujours un mais. Smiley smile
Tu choisis mal ta période, because les clients reviennent de vacances et sont forcément pressés.

Ce que je peux proposer, sans avancer un truc que je ne pourrais pas tenir, c'est qu'on fasse un choix de tutos pour lesquels une version video commentée serait une réelle plusvalue.
Ensuite travailler sur une scénarisation des tutoriels convenant au support video.
Pour finir, la production en elle même.

Dans un premier temps, je vais me lancer dans le premier tuto : comment créer un tutoriel vidéo en ligne. Smiley lol

Aymeric, mode Open To Do List ON.
Administrateur
AymericJ a écrit :
Ce que je peux proposer, sans avancer un truc que je ne pourrais pas tenir, c'est qu'on fasse un choix de tutos pour lesquels une version video commentée serait une réelle plusvalue.
Ensuite travailler sur une scénarisation des tutoriels convenant au support video.
Pour finir, la production en elle même.

Pour aider, voici la liste complète : http://css.alsacreations.com/Plan-du-site

A priori, les tutos qui me semblent intéressants à "vidéotiser" seraient :
- Faire un menu de navigation en CSS (horizontal et vertical)
- Réalisation d'un design complet (XHTML / CSS) en 5 étapes : tutoriel d'Olivier, lui demander l'autorisation
Je viens de me rappeller pourquoi j'avais mis les tutoriels videos en stand By y'a un an, la vidéo ça pompe! Smiley smile

C'est l'occasion de booster ma RAM tiens du coups.

Pour les 2 tutos, je vois bien lesquels, je m'en suis servi, d'ailleurs je pense que le tuto d'olivier, pas mal de monde s'en est servi.

Je vais essayer de scénariser ça, mais là ce sera pas avant au moins demain, because boulot avant tout.

++
Aymeric
salut,

j'avais déjà fait ce genre de vidéo grâce à Macromedia Captivate (que je ne possède malheureusement pas).
L'utilisation est vraiment très simple (y compris avec commentaires et autres options) et le résultat très bon.

Ceci dit je trouve pour ma part que la qualité des vidéos ci-dessus est déjà suffisante (peut-être en SWF plutôt qu'EXE en revanche).
Modifié par Alan (29 Aug 2006 - 15:25)
Bonjour Alan,
Captivate est effectivement un bon produit, seul hic pour l'nstant, ça ne fait pas partie de mes investissements à court terme. Smiley decu

J'essaie en ce moment, en produit gratuit, camstudio, mais il y'a de sérieux problèmes au niveau du son.

Mais on va trouver, on va trouver.

Aymeric, ouch 5 secondes de son sur une minute d'enregistrement, ça va pas ça.
Administrateur
Bonjour,

Pour les outils de screencast (captures d'écran en vidéo/flash/etc): Comparaison sur donationcoder de BBFlash (Express), Camtasia et Captivate. A 40$ contre 200 à 500$, BBFlash Express me semble pas mal Smiley smile (de plus, essai gratis pendant 15 jours)

Les screencasts de http://getvanilla.com/ ("Watch vanilla in action") ont par exemple été réalisés avec BB FlashBack Express.

Pour les Macs, je crois que l'outil le plus utilisé est (j'allais dire SnapZ Pro X mais y a-t-il une sortie Flash comme il y a une sortie Quicktime?)
Modifié par Felipe (29 Aug 2006 - 15:54)
Bon, je suis absent aujourd'hui, mais j'ai quelques petits tests avec Wink hier soir et ça a l'air assez prometteur.

Au fait Raphael tu avais utilisé quoi pour faire tes captures?

++
Aymeric
Administrateur
AymericJ a écrit :
Au fait Raphael tu avais utilisé quoi pour faire tes captures?

BB Flashback, un truc avec des pubs partout Smiley smile
Back in the real world,

Alors, j'ai fait des essais avec Wink, ce n'est pas encore le top du top, mais très largement au dessus des autres produits gratuits que j'ai testé ces derniers jours.

Pour le reste, deux ou trois petites questions.
Y'as t'il des gens interessés pour travailler en équipe sur la scénarisation des tutoriels?

Je pens commencer avec le tutoriel de design en 5 étapes réalisé par Olivier, si il est d'accord bien sur.

Pour la présentation, voici ce à quoi j'ai pensé pour l'instant :

- Présentation du tutoriel.
- L'objectif pédagogique clair (A la fin de ce tutoreil vous serez capables de...)
- Les pré acquis techniques necessaires
- Les ressources (liens vers d'autres tutoriels, le tutoriel d'Olivier actuel, les fichiers sources necessaires pour réaliser la mise en page, les videos)
- Materiel necessaire (editeur, navigateur, lecteur video etc)

Essayer de présenter le tutoriel sous forme d'un livret d'auto formation.

Lecture et analyse des sources.

Proposition d'exercices en relation directe avec le tutoriel.
Exemples :
Exercice 1 - Construire la structure d'une page en (x)html
Exercice 2 - Réaliser un menu horizontal en utilisant une liste non ordonnée grâce aux css
Exercice trois 3 - Positionner les éléments grâce aux CSS

Etc..
Avec comme exercice d'évaluation/application la mise en page complète d'olivier.

Pour les vidéos, je pense reprendre les 5 étapes du tutoriel en 5 petites vidéos distinctes expliquant pas à pas les manipulations et leurs effets en direct dans le navigateur.

Voir maintenant si ça vous semble cohérent et interessant.

Allez je retourne travailler,
Aymeric
Bonjour Raphaël et tous.
J'ai téléchargé un ou deux "tuto-video.exe" mais avec mon Mac ça ne fonctionne pas. Si tu avais recours à un format un peu plus …… standard, je t'en remercierai.

Par exemple WMV ou MPEG, intallés d'office partout et gratos ?
Enfin, je veux dire un truc lisible avec Windows-Media-Player ou QuickTime.
Modifié par Aureance (02 Sep 2006 - 01:58)
Aureance a écrit :
Bonjour Raphaël et tous.
J'ai téléchargé un ou deux "tuto-video.exe" mais avec mon Mac ça ne fonctionne pas. Si tu avais recours à un format un peu plus …… standard, je t'en remercierai.


Je crois qu'il s'agit d'une présentation temporaire seulement, histoire de montrer à quoi ça pourrait ressembler (sauf que nous, propriétaire de Mac, on ne nous demande pas notre avis... Smiley lol )

Pour les utilisateurs de Mac qui seraient aussi tentés par l'expérience, il y a l'excellent Snapzpro à 69$

http://www.ambrosiasw.com/utilities/snapzprox/

et iShowU que je n'ai pas encore testé de long en large et qui me semble très prometteur (en version beta gratuite pour l'instant)

http://shinywhitebox.com/
Pages :
Sujet clos
Aller à