Émission #3 – La Programmation expliquée à ma Copine !

Dans cette nouvelle émission de la programmation expliquée à ma copine avec Léna et Mathieu, découvrez une première introduction au développement Web avec les langages HTML, CSS et JavaScript.

Tout est dans la vidéo ci-dessous.

[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]

Emission #3 – La Programmation expliquée à ma Copine !

Bonjour à tous et bienvenu sur Développement Facile.

Bienvenu dans la nouvelle émission « la programmation expliquée à ma copine », Léna.

Léna : Bonjour.

Matthieu : Dans ce deuxième épisode avec Léna on va continuer, vous allez découvrir vraiment la programmation de la base, pour petit à petit monter en compétences et donc créer des applications performantes. Que ce soit sur smartphones, les mobiles comme IPhone, Android, les tablettes comme l’iPad et les autres tablettes Android ou sur le web.

Qu’est-ce que tu as retenu de la dernière fois ?

Léna : Pas grand-chose. J’ai retenu quand même qu’il y avait trois types de… langage, sauf que du coup c’est quand même assez flou et du coup quand je les voit là sous mes yeux, ça me pose beaucoup de questions quand même. Je sens que ça va être compliqué.

Matthieu : On avait discuté la dernière fois du langage HTML, tous, les trois principaux langages qui existent pour créer une application sur le web ou sur les smartphones, donc il y avait le langage HTML, HTML5, le langage JavaScript et le langage CSS.

Donc le langage HTML c’est ce qui permet de créer la structure, d’organiser les élément, de dire à quel endroit c’est, par exemple le haut de la page ici, ici le contenu de la page, ici le bas de la page, donc ça revient c’est ça enfaite. Ca c’est du langage HTML avec les balises HTML, donc c’est des balises qu’il faut connaitre, qu’il faut apprendre.

Léna : Ca, ça à l’air compliqué aussi parce qu’il a l’air d’y en avoir pas mal.

Matthieu : Non il n’y en a pas beaucoup et puis de toute façon tu auras un fichier, un livret electronique qui récapitule toutes les balises à apprendre, un lexique, le soir avant de te coucher…

Léna : Je regarderais.

Matthieu : Donc il y a plusieurs balises et en fonction, par exemple, là c’est les balises, pour indiquer, le head pour indiquer différentes informations comme l’encodage de la page..

Léna : C’est ça, l’encodage de la page.

Matthieu : Voilà, par exemple il y a l’UTF8, l’ISO, c’est des normes d’encodages, en principe on choisit l’UTF8 parce que c’est plus simple pour communiquer avec d’autres langages, si on communique avec le php, l’avantage de l’UTF8 c’est qu’il gère les accents, c’est des caractères accentués, donc c’est plus simple. Après on donne des liens, on lui dit d’utiliser tel fichier CSS ici pour lui dire, ba écoutez je veux faire telle mise en forme, ajoutez tel bloc de telle couleur, tel bloc qui fasse telle taille, mettre telle image en fond  de ma page, donc là on renseigne le lien vers le fichier CSS et ça la balise view port c’est lorsqu’on veut développer des applications qui seront visibles sur les smartphones ou les tablettes, on rajoute cette balise pour indiquer si l’application se redimensionne en fonction du périphérique de l’utilisateur etc. Si on doit faire une réduction ou un agrandissement de l’application.

Léna : Ca, ça revient par exemple à quand on demande de passer sur site application pour mobile ou si tu veux rester sur la même page enfaite, que tu viens de télécharger par rapport à ton téléphone.

Matthieu : Non ça veut dire que l’écran du téléphone il a un écran plus petit que l’écran de ton ordinateur donc on doit adapter la taille de l’application, et la disposition des élément, et donc ça permet, il existe des frameworks comme par exemple le framework Bootstrap, tu te rappelles ce qu’est un framework ?

Léna :  Non.

Matthieu : C’est un ensemble… c’est du code près… c’est un ensemble de fonctionnalités pré développées dans des fichiers et l’avantage c’est qu’on a plus qu’à les réutiliser, par exemple avec Bootstrap automatiquement on lui dit le nombre, la place disponible, le nombre de colonnes disponible sur une tablette, un smartphone ou un ordinateur de bureau et il va réorganiser le site en fonction du périphérique.

Léna : D’accord.

Matthieu : On a pas besoin de tout réécrire, c’est très pratique.

Léna : D’accord, donc c’est comme quand tu cherches tes mails enfaite, quand toute la page n’est pas apparue, tu as des petits carrés sur la page, en gros c’est ça ?

Matthieu : En très gros quoi.

Léna : Oui en très gros.

Matthieu : Oui, enfaite par exemple, ton logiciel mail si tu l’ouvres sur ton écran d’ordinateur il va s’afficher tu auras beaucoup de place pour le lire, sur ton écran d’un smartphone ce sera plus petit donc par exemple tu auras des champs qui ne seront pas affichés, qui seront masqués, ba c’est ce principe-là enfaite, CSS permet, le framework Bootstrap 3 que je vous conseille, il y a des cours que vous trouverez sur Développement Facile pour apprendre à utiliser le framework bootstrap 3, ça permet de créer des applications qui s’adaptent automatiquement sur les smartphones, les tablettes et les ordinateurs de bureau.

Léna : Par rapport à ça d’ailleurs, est-ce que nous on pourrait en créer une par exemple, d’application. Ce serait sympa.

Matthieu : Oui évidemment, le but, comme je le dis toujours dans Développement Facile c’est de passer à la pratique, Léna toujours consciencieuse souhaite mettre en pratique les cours et donc en même temps, à chaque émission elle va, dans la prochaine émission elle va vous présenter son concept de logiciel, d’application et après les émissions suivante, elle va la développer au fur et à mesure jusqu’à la mettre, par exemple à disposition sur l’Apple store et sur Google Play, comme ça vous verrez au fur et à mesure comment créer une application qui cartonne. Donc ça c’est dans la prochaine émission, on va rester un peu plus focalisé sur vraiment sur les bases, par exemple, là c’est le CSS, tu vois, les balises que tu as vu en HTML, body, div, section, tu les retrouvent ici en CSS, body, par exemple tu défini la taille de la police par défaut dans la page grâce au CSS, une police de 12 pixels, la hauteur des caractères, et le type de police de caractère, ça peut être arial, times new roman, elvetica, c’est ici que tu le défini tu retrouves ta balise header qui est là et qui est également quelque part ici, ou tu définis la mise en page, parce que si on enlève le fichier CSS, on va l’enlever et on va recharger la page. On perd la mise en forme, il n’y a plus de mise en forme, là il n’y a plus de fichier CSS il n’y a plus de mise en forme. Alors que si on le remet, on récupère tout simplement la mise en forme du site, tu perçoit mieux à quoi sert…

Léna : Oui du coup.

Matthieu : La pratique c’est ce qui aide à progresser, et donc dans le header par exemple on mettait des marges, une couleur de fond, l’alignement du texte centré et le texte écrit en gros caractère.

Léna : D’accord, ça va peut-être paraitre débile mais à quoi servent les couleurs enfaite ? Il y a du rose du bleu.

Matthieu : Ca permet de se repérer plus facilement, ça c’est juste l’éditeur de code qui permet dans la dernière émission de Développement Facile, c’était avec Sandrine, vous avez appris quel éditeur de code utiliser en fonction de votre langage, je vous en ai conseillé plusieurs, si vous voulez vous vous référerez à la précédente émission de la programmation expliquée à ma copine pour avoir tous ces éléments. Donc les couleurs c’est juste l’éditeur qui les fait ressortir, ça permet de se repérer plus facilement en fonction du langage, on voit tout de suite les balises HTML qui sont en roses, les noms des divs, avec l’identifiant, ou le nom de la classe. Et ensuite, quand on fait ça pour toutes les balises HTML on les définies dans le CSS et après si on veut mettre des interactions on utilise le JavaScript donc là c’est un langage un peu plus obscur. Qui a des couleurs aussi.

Léna : Qui a des couleurs mais qui sont beaucoup moins…

Matthieu : Il parle moins celui-là.

Léna : Beaucoup moins. C’est pas joli.

Matthieu : Donc là par exemple cet exemple de code permet de créer les deux dégradés qui sont ici, donc c’est fait avec tout simplement, le JavaScript on écoute des évènement, c’est-à-dire le JavaScript envoie toujours des évènement quand je te parle c’est comme si je t’envoyait un évènement, soit tu m’écoute donc tu capture l’évènement, si tu ne m’écoute pas, tu ne capture pas l’évènement.

Donc là c’est pareil on va écouter l’évènement DOM content loaded, JavaScript la page HTML envoie cet évènement, on le récupère et on lance notre fonction pour créer les dégradés que l’on a vu ici.

Léna : Une question, reviens sur la page. Du coup est-ce qu’on aura aussi un lexique pour avoir à quoi sert…

Matthieu : Pour JavaScript c’est plus l’expérience qui fait le truc parce qu’un lexique le langage JavaScript a énormément de solution, de mots clés, et donc c’est à force de l’utiliser que ça va venir. De get élément by Id, tout ça, tous ces éléments, canvas, get context dans un canvas, create radial gradient, il n’y a pas besoin de lexique parce que en principe le fait de suivre une formation comme tu fais actuellement, c’est ton formateur via ses cours qui va te faire un résumé de tout ce qui est le plus utile, avec différents exemples. Par exemple dans la formation JavaScript expert, pour les étudiant qui la suive, ils vont se reconnaitre, vous avez plusieurs cours vidéo qui vous font aller, vous partez d’un niveau assez simple pour aller à un  niveau d’expertise élevée et à chaque fois vous avez des indications, des exemples de codes sources pour faire telle ou telle chose que vous pouvez réutiliser dans vos applications, le but c’est d’éviter de tout apprendre par cœur, moi-même je n’apprends rien par cœur, après à force de la faire on s’en souviens mais toujours avoir des codes sources de référence, et c’est ce que vous donne la formation JavaScript expert, des codes sources de référence, toujours des exemples auxquels on se réfère, on se dit, à tiens j’ai déjà vu ça, pour faire un effet 3D, pour faire un effet d’ombre portée, on se dit j’ai vu ça dans la formation JavaScript expert, on va chercher le code source et on l’intègre.

Léna : Pas de problème.

Matthieu : Donc du coup, là on va pas rentrer dans le détail.

Léna : Une question, il est ou le code source JavaScript expert ? Tu le trouve ou enfaite ?

Matthieu : non mais ça c’est le code source JavaScript, mais ce que je parlais c’est la formation JavaScript expert, c’est deux choses, la formation c’est pour les étudiants qui souhaitent aller plus loin, être accompagnés par l’équipe Développement Facile et donc qui suivent la formation pour progresser. Du coup là vu qu’on est ensemble dans l’émission, tu va pouvoir progresser au fur et à mesure, et vous aussi vous allez pouvoir progresser, avec les questions de Léna qui permettent d’avoir un angle d’approche différent des cours Développement Facile classiques, c’est très intéressant.

Au résultat on a ceci enfaite

Léna : D’accord.

Matthieu : Est-ce que tu as d’autres questions ou on termine là-dessus, sur la base, là on a vu des exemples de JavaScript, de CSS, d’HTML, donc c’est vraiment le basique, ça permette de démarrer quelque chose.

Dans la prochaine émission vous allez découvrir comment en partant de zéro créer le projet de Léna, ce sera une application pour les mobiles, je ne vais pas vous en dire plus tout de suite. En partant de zéro créer une application pour les mobile, la programmation, quel framework utiliser, quelle stratégie de code utiliser, je ferais intervenir des experts qui viendront donner leurs conseils, donc des experts qui ont des entreprises qui s’adressent à des professionnels, qui ont développés des applications pour les professionnels, qui ont développer leur propre logiciels qu’ils viendront partager avec vous dans les prochaines émissions comment créer une application pour mobile. Evitez d’utiliser que le code pour iPhone, IOS et que le code pour Google Play, réunir les deux et coder une seule fois et déployer sur toutes les machines, que ce soit des Apple ou des appareils fonctionnant sur Android, vous allez découvrir tout ça dans la prochaine vidéo. Est-ce que tu as une autre question avant de clore la session ?

Léna : Non juste qu’elle va cartonner.

Matthieu : C’est parfait alors maintenant, si vous voulez aller beaucoup plus loin en développement, là juste sous cette vidéo il y a un lien cliquable il suffit de cliquer dessus, sinon vous avez un formulaire vous renseignez votre prénom, votre adresse mail et vous allez recevoir une formation gratuitement, une formation sur JavaScript pour progresser avec le langage JavaScript et acquérir les compétences, les bases essentielles pour faire de vous un développeur professionnel, chaque semaine, vous allez recevoir des cours en vidéo qui vont vous permettent de progresser, vous pourrez poser vos question à l’équipe développement facile qui vous répondra avec plaisir, ce ne sera pas Léna qui va vous répondre, pour l’instant ca va être un peu difficile. Vous allez également recevoir des exemple de codes source, au-dessus de moi il y a un lien qui s’affiche il suffit de cliquer dessus, en dessous il y a un formulaire ou vous renseignez votre prénom, votre adresse mail, et instantanément vous recevrez par email des vidéos, des codes sources, tout pour progresser.

Je vous donne rendez-vous dans la prochaine émission la programmation expliquée à ma copine, je vous dit à très bientôt, je laisse le dernier mot à Léna.

Léna : Au revoir et à la prochaine fois pour un super cours d’application.

Matthieu : A bientôt.

[/ppmtoggle] [/ppmaccordion]

Posez ici vos questions sur l’émission

Utilisez la zone commentaire pour poser vos questions sur l’émission, la programmation expliquée à ma copine.