Tutoriaux vidéo « comprendre le fonctionnement d’un site » #1
21 avril 2008 - 42 commentaires
Ça faisait un certain temps que j’avais envie de me lancer dans cette série de tutoriaux vidéos.
l’idée étant d’essayer d’expliquer de la façon la plus simple possible le fonctionnement d’un site web pour que ceux qui ont besoin d’avoir juste un verni puissent l’acquérir facilement (un petit e-commerçant par ex).
Et comme en matière d’informatique (comme dans beaucoup de matières) le plus simple pour comprendre est encore de faire les choses je me suis dit que le format d’un tutoriel vidéo serait adapté.
Voici donc le premier épisode, il a surement plein de défauts, n’hésitez pas à me les indiquer dans les commentaires, j’essayerai de rectifier le tir pour les suivants.
EDIT: Voici la vidéo dans une bien meilleur qualité.
Comments closed
Discussion:
Super bonne idée, comme toujours
Bonne idée de faire des screencasts sur ce sujet, puisque tu nous y invite, je pointe un petit défaut concernant ton travail, c’est la mise à disposition de la vidéo sur Dailymotion. Vidéo bien trop petite à mon gout pour apprécier le screencast correctelent, et la qualité à été tronquée pour le plein écran…
Tu peut par exemple l’envoyer sur vimeo.com, une autre plateforme qui ne bousille pas la qualité, ou pourquoi pas si tu à le temps sur un lecteur flash ‘maison’.
A bon entendeur
Thomas
super sympa, j’attends de voir la suite !
(par contre l’affichage en plein écran ne marche pas sur le blog)
Trop fort François! Très bonne idée.
Sur twitter je pensais que tu allais dire comment faire de son site un number one…
Ce n’est que le #1 d’une série…
Tu es un bon pédagogue.
çà m’interesse !!!!
Oui Cela vaut le coup ! Je m’abonne à ces tuto de suite !
ah oui c’est bizarre cette histoire de plein écran bloqué… je suis en train de l’uploader sur mon compte « pro » blip.tv normalement la qualité y est top.
Très bonne démarche que d’expliquer à ceux qui se lance dans le web comment fonctionne leur site. Moi, j’ai compris tes explications ( évidemment !!), mais un parfait néophyte !! faudrait voir si il capte bien tous les mots, genre « script » quelqu’un qui n’a jamais codé, ne va pas comprendre. Pour expliquer comment fonctionne l’affichage d’une page internet, je commence souvent par le HTML et ensuite je remonte jusqu’au serveur en expliquant que le PHP s’execute sur un serveur (dans un sous sol parisien ou autre) et qu’il nous renvoi le résultat sous forme HTML sur notre Navigateur préféré. Je crois que tu devrais expliquer comment ça fonctionne comme si tu essayais de l’expliquer à ton enfant.
Mais sinon, j’adore le principe, ça peut servir et on peut même se mettre à plusieurs pour expliquer le principe du Web aux futurs Web marchand
e-mob n’a qu’a bien se tenir!!!!!!!!!!!!!!
Une nouvelle fois, excellente initiative!
J’espere que c’est le premier d’une longue serie…
Vidéo plutôt sympa mister
Bel effort de vulgarisation en tous cas! Mais peut-être qu’il faudrait détailler (éventuellement à part, textuellement), certains mots comme fonction, script, etc. comme l’a dit Cisco
Concernant dailymotion, il faut que tu rajoute dans le code, entre les balises object « »
Et puis quant à la balise < b >, si on voulait vraiment te taper sur les doigts, on dirait que « echo » n’est pas une fonction mais une structure de langage
mais ce n’est que de la vulgarisation aussi il est nécessaire de passer par certaines imprécisions 
Courage en tous cas, l’idée est super intéressante (je pourrais envoyer mes clients voir tes vidéos, qu’ils arrêtent de me casser les pieds
), maintenant reste à tenir le rythme.
(est ce que tu pourrais juste faire en sorte que la balise < b > apparaisse comme telle dans le commentaire précédent, histoire d’éviter de donner l’impression que je veux te pourrir la page
)
Cisco> bonne idée, la prochaine fois j’explique le principe du HTML
Joanna> à mon avis ils sont surtout bien tranquilles
pangloss> en effet il va falloir tenir la cadence
Xavier> j’ai corrigé ton histoire de balise
Tu fait un très bon prof
C’est cool car je veux refaire ma page d’accueil mais le langage php n’est pas trop mon ami..(c’est compliqué tout ça)
Pour ma part je bosse avec Nvu mais wamp a l’air bcp plus simple on dirais.
Merci pour nous François
Sympathique cette vidéo, tu est un bon pédagogue François !
Pierre
Je profite de ce poste pour glisser une petite question, n’ayant pas de remarque à faire sur le tuto.
Est-ce que quelqu’un connait un outil qui permet de suivre le contenu développé pour un site internet ou plus largement pour un projet informatique de toute sorte ou encore plus largement un gestionnaire de fichiers. Je ne parle evidemment pas de l’explorer de windows ni meme d’Excel, mais d’un produit qui permettrait de spécifier les différents scripts, templates et autres pages html générés et les différentes modifications apportés sur ces documents.
Ca parle à quelqu’un ?
ghis>Nvu est un éditeur avancé (surtout pour le HTML), wamp est un package permettant de recréer le moteur d’un « site web » sur son ordinateur (il ne s’agit donc pas de la même chose)
Je vais essayer de préciser tout ça la prochaine fois + un peu de HTML
Pierre> thx, je dois avouer que ces podcasts sont un bon entrainement pour moi dans le cadre d’Hellotipi.
Benoît> regarde du coté des outils de versioning (Google est ton ami) mais c’est un peu technique je te préviens tout de suite
@mrboo : pas probleme ! Y’a deja plusieurs jours que je cherche, mais pas du bon cote jusque là, mais je ne desespere pas de trouver un petit outil pratique sur le sujet ! Merci bien !
merci pour la précision .. le « bidouilleur professionnel » que je suis apprécie
Au plaisir de te lire chef
Bon courage et bonne journée
Bon, tu l’édites quand ton dvd ?
vaste projet, j’admire ton courage, car le domaine de la formation est vaste, mais alors vaaaaste.
juste en passant : un petit tag pour situer le niveau du tuto serait sympa, histoire de s’y retrouver quand tu en auras un stock de folly !
C’est beaucoup mieux ici que sur emob.fr !
Bon sang quel courage d’entamer ce genre de tutoriel « soap opera » !
Il faudra que tu me dises ce que tu prends pour être aussi productif, j’en veux aussi…
C’est toujours plus facile de trouver le courage de faire des choses sachant qu’elles sont appréciées.
Samy> je viens de commander chez toi, bravo pour ta jolie boutique bien faite
)
2 détails que je changerai: un checkbox pour les CGV plutôt qu’une liste (c’est plus simple de cocher que de choisir dans une liste déroulante) et l’abo à la newsletter par défaut (optin c’est plus gentil
Bon courage pour la suite (je me suis abonné à ton flux RSS)
@mrboo : merci pour ta commande et tes conseils ! Je vais corriger ça au plus vite (surtout pour la newsletter, j’ai honte). Bonnes dégustations.
Je suis outragé par ce que tu as dis de la seconde 36 à la seconde 40 !
Bon ok il fait que je rajoute « Sauf Alain le e-commerçant/codeur fou à qui l’humanité doit un des plus beau plugin »
C’est pas pour autant que je vais t’acheter un photocopieur :p
Un seul mot : FORMIDABLE !
Je ramais depuis des mois pour tenter d’apprendre le php… J’ai vraiment l’impression d’avoir un professeur particulier… Très bien expliqué, facile à comprendre intéressant…
J’attends la suite avec impatience !
J’en vois déjà qui vont me faire les yeux doux pour avoir du matos pas cher….
C’est marrant, j’ai comme l’impression qu’il y a eu un lâcher de barbus ici …
Malheureusement, c’est du barbu d’élevage. Ca a pas le même fumet que le barbu sauvage.
(très bien le truc. J’ai à peu près tout capté)
Tiens, le plugin d’abonnement aux commentaires a disparu?
Ah, il a réapparu. Alléluia!
Bon alors je viens de voir la vidéo…j’avais pas eu le temps de le faire jusqu’ici…
Ca me parait très clair dans l’ensemble, j’ai juste une question.
A quoi ca sert de « commenter »? c’est pour ajouter des mots clés? (bon j’ai peut etre raté un épisode mais…
En tout cas, je dis chapeau!
> Pangloss
(je précise, je ne suis pas développeur)
Je pense que le commentaire permet de commenter chaque module, chapitre ou autre. Pour quand tu reviens mettre les mains dans le code, pouvoir vite retrouver tes petits.
Le Tribulateur> Merci pour ta réponse!
Sincèrement, je trouve ça très intéressant. J’aurai bien aimé avoir ce genre de tuto au démarrage de mon activité e-commerce. Cela m’aurait fait gagner beaucoup de temps. Par rapport à cette vidéo, j’aurai une suggestion : faire le lien entre le code source en html et les scripts php. Comment passe-t-on de l’un à l’autre ? Je pense que c’est ce que suggérais Cisco mais je ne suis pas sûre. En fait, quand tu as fait la démo vers l’affichage du code source, ça soulève la question du type : mais cela veut-il dire que les scripts sont accessibles à tous ? comment sont-il transformés ? quels points communs ? quelles différences ? Cela peut te paraitre évident. Mais, pour quelqu’un qui n’est pas familier, il faut garder en tête que ce qu’il connait c’est la partie html. En tout cas, j’ai hâte de voir les suivants.
@mlle bio : je vais répondre à tes diverse question technique :
> Comment passe-t-on de l’un à l’autre ?
Le code php est visible dans un fichier texte avec une extension .php, pour qu’il fonctionne il faut qu’il soit « interprété », c’est le rôle d’Apache (le A de wAmp). Interpréter le code veut dire l’analyser et renvoyer le code html correspond à l’utilisateur. Quand donc mon navigateur j’appel un script index.php (par exemple), il va être interprété en direct par le serveur Apache, et il me renvoie que ce que le script lui dit de me renvoyer. Apache va aussi faire les inclusions dans la base de données, si le code lui demande. Mais il peut aussi faire des opération mathématique, en fait il lit le fichier .php ligne par ligne et fait ce qui est demandé.
> mais cela veut-il dire que les scripts sont accessibles à tous ?
Pour celui qui as accès à, ton espace FTP (c’est l’espace de stockage de ton site web, l’équivalent du disque dur de ton serveur), oui bien sur le code source et visible, lisible et on peut donc avoir accès à tout ce qu’il contient.
Pour ton visiteur il ne pourras jamais lire le code de tes scripts tel quel, il seront forcément interprété par Apache (ou par un module assimilé).
> comment sont-il transformés ?
Si je comprend bien le question : la répons est par Apache
> quels points communs ? quelles différences ?
Entre quoi et quoi ?
Au plaisir de répondre à vos questions diverses et variés sur le développement web,
Pierre
P.S.: MrBoo, j’ai pas put m’en empêcher ça me démangeais de répondre à ses questions. ^^
mlle bio> content que le principe te plaise, je vais essayer de clarifier tout ça la prochaine fois, surtout avant d’attaquer les notions de base données.
Pierre> au contraire tu as bien fait
très bonne idée ^^ Je me prépare un site pro (de présentation, pas ecommerce) sans rien y connaître en langage. J’ai vu des sites avec une présentation qui me plaisait, j’ai enregistré le site sur mon dd et j’ai modifié /supprimé le code jusqu’à trouver la partie responsable de la pagination qui me plaisait.
Maintenant, je pourais comprendre comment ca fonctionne. J’attens avec impatience les vidéos suivantes
merci
Pierre-Olivier
Très bonne idée ce screencast ! Plutôt bien exécuté, tu as su simplifié un lexique qui peut faire peur à première vue.
A quand le prochain ?
Je vais essayer de tenir le rythme d’une vidéo par semaine (environs)