<center>![Votre Propre Site - Introduction](https://res.cloudinary.com/hpiynhbhq/image/upload/v1507508576/urqej1767tdguwize50i.png)</center>
<div class="text-justify">Dans ce cours, je compte vous apprendre à créer votre propre site web à partir de rien. Nous n'utiliserons pas de modèles modifiables comme ceux que vous pouvez trouver via des services tels que Wix et SquareSpace pour citer les plus connus. Les sites web créés avec de tels services finissent le plus souvent par restreindre vos idées de par les limitations apportées par le développement programmé. Faire des sites web avec ce genre de services rend la compréhension de ce qu'il se passe derrière votre site difficile, j'estime que c'est la moindre des choses de comprendre comment fonctionne votre propre création. Nous allons commencer par apprendre HTML5 et CSS3 pour créer notre première page web statique mais il va nous falloir plus que ça pour la rendre dynamique. Une fois l'essentiel de ces deux langages appris, nous allons nous pencher sur PHP et JavaScript qui sont des langages plus difficiles à apprendre mais loin d'être impossibles contrairement à ce que vous pourriez croire en voyant un bout de code sans en comprendre le contexte. J'aime comparer la programmation à une langue (après tout, on n'appelle pas ça un <em>langage</em> de programmation pour rien !). Quand vous essayez de lire un texte dans une langue étrangère sans la connaitre, vous n'y comprenez rien. Mais si vous apprenez cette langue puis vous penchez à nouveau sur le texte, vous en comprendrez la majorité.</div>
<br>
<center><b>C'est cool tout ça, ça m'intéresse, mais est-ce vraiment utile d'utiliser quatre langages ?</b></center>
<br>
<div class="text-justify">Le strict nécessaire pour un site web sont les deux premiers langages que nous allons apprendre, mais ceux-ci ne nous permettraient pas de rendre notre site dynamique. De nos jours, la grande majorité des sites web que vous visitez sont dynamiques et ont donc besoin des deux autres langages. Si vous comptez faire un site dont les informations ne changent jamais, vous pourriez effectivement vous arrêter aux deux premiers langages mais ce serait dommage. Il est temps que je vous explique chacun de ces langages plus en détail pour que vous compreniez en quoi ils sont importants. Un exemple de post sur un site web sera repris tout le long du post pour bien illustrer mes propos.</div>

* ### HTML <div class="pull-right"><em>(HyperText Markup Language)</em></div>
<center>![Code HTML](https://res.cloudinary.com/hpiynhbhq/image/upload/v1507507818/shsu900o9iwot6ewmc7l.png)</center>
<ul><ul>
<li>
<h4>Hypertext</h4>
<div class="text-justify">L'hypertexte, en anglais hypertext, constitue le texte qui se retrouve affiché sur l'écran et avec lequel on peut interagir. Le meilleur exemple est <a href="https://steemit.com/@francosteemvotes">un lien texte</a> qui redirige l'utilisateur vers une autre page une fois cliqué.</div>
</li>
<li>
<h4>Markup</h4>
<div class="text-justify">À ne pas confondre avec Markdown qui est une librairie de balisage, en anglais markup. Une librairie a pour but général de rendre les choses plus simples pour l'utilisateur. Les posts que vous écrivez sur Steemit et Busy sont en langage Markdown, ceux-ci sont ensuite convertis en HTML afin que votre navigateur internet puisse les interpréter. Un langage de balisage est un langage utilisé pour structurer un fichier tout en faisant la distinction entre son balisage et ses données.</div>
</li>
<li>
<h4>Langage front-end</h4>
<div class="text-justify">Ce langage opère du côté client ce qui veut dire qu'il n'interagit pas avec le serveur.</div>
</li>
<li>
<h4>Pas un langage de programmation</h4>
<div class="text-justify">Contrairement à ce que beaucoup pensent, HTML n'est pas un langage de programmation. Tous les articles parlant de programmation sans trop s'y connaitre et utilisant du code HTML pour illustrer leurs propos représentent donc mal leur travail.</div>
</li>
</ul></ul>
<br>
<div class="text-justify">Il est à présent temps de voir ce que HTML peut faire pour notre site web. Le post en question a pour but final de ressembler à un mélange entre ceux que vous pouvez trouver sur Twitter et Facebook.
Un post sur notre faux site contient dans son en-tête le nom de l'auteur,
sa photo de profil et le temps passé depuis la mise en ligne du post. Au milieu se trouve la partie que l'auteur a réellement écrite. Enfin, le bas du post est composé d'un tas de fonctionnalités (aimer, partager et commenter) ainsi que leurs compteurs de clics respectifs.</div>

<center>![HTML en action](https://res.cloudinary.com/hpiynhbhq/image/upload/v1507507776/k7ogawgy685kgvofscbh.png)</center>
<div class="text-justify">Comme vous vous en apercevez, ce n'est pas très sexy ! On pourrait à peine comprendre à quoi correspond tout ce charabia si personne ne nous l'avait dit auparavant. Personne de sensé ne voudrait utiliser un tel site web. Heureusement, le prochain langage est là pour rendre le tout plaisant pour l'utilisateur !</div>

* ### CSS <div class="pull-right"><em>(Cascading Style Sheets)</em></div>
<center>![Code CSS](https://res.cloudinary.com/hpiynhbhq/image/upload/v1507507850/ojdstwpanx6475jl86k3.png)</center>
<ul><ul>
<li>
<h4>Cascading</h4>
<div class="text-justify">En cascade, en anglais cascading, référence la manière dont les éléments sont stylisés en fonction de votre façon d'écrire votre CSS. Sans aucune importance prise en compte, un tag (donc un élément) sera stylisé par la dernière stylisation de celui-ci dans le code,
ce qui parait plutôt logique. Le fait que vous ayez déjà du maquillage ne vous empêche pas d'en remettre par dessus, la même logique s'applique ici. Malheureusement, ce n'est pas si simple. On verra plus en détail que des attributs tels que des ids et des classes donneront à vos tags plus d'importance, ce qui interférera avec cette règle.</div>
</li>
<li>
<h4>Style</h4>
<div class="text-justify">Ce langage n'est utilisé que pour styliser, en anglais style, votre HTML afin de rendre votre site web attirant pour l'utilisateur.</div>
</li>
<li>
<h4>Sheets</h4>
<div class="text-justify">Les fichiers CSS sont appelés des sheets, ce qui veut dire feuilles en français. Vous pouvez lier autant de sheets que vous le souhaitez à votre page mais le cas habituel est d'avoir une seule sheet s'occupant de l'entièreté de votre site.</div>
</li>
<li>
<h4>Appliquer un style dans votre HTML</h4>
<div class="text-justify">Vous pouvez styliser vos éléments directement dans votre HTML bien que ça ne soit pas recommandé dans la majorité des cas. Il est habituel de séparer la stylisation et le balisage afin d'avoir une vision clair sur chaque partie. Le code peut aussi devenir très compliqué à lire et à naviguer si vous avez beaucoup de propriétés à appliquer à votre élément comme vous pouvez le voir ci-dessous.</div>

![Comparaison](https://res.cloudinary.com/hpiynhbhq/image/upload/v1507509481/rukjwczhwx4txeef82ui.png)
</li>
<li>
<h4>Langage front-end</h4>
<div class="text-justify">Ce langage opère du côté client. La stylisation du contenu peut changer en fonction des actions de l'utilisateur et de la taille de l'écran (faites le test sur Steemit si vous ne me croyez pas !).</div>
</li>
<li>
<h4>Pas un langage de programmation</h4>
<div class="text-justify">Tout comme HTML, CSS n'est pas un langage de programmation. Il y a cependant moins de confusion à son propos étant donné qu'il ne ressemble pour le coup pas du tout à de la programmation.</div>
</li>
</ul></ul>
<br>
<div class="text-justify">Il est temps que la magie opère ! Tout ce que vous verrez paraîtra instantanément plus beau, vous êtes prêt ? Allons-y (<em>lancement du jingle de Pimp My Ride</em>) !</div>

<center>![CSS en action](https://res.cloudinary.com/hpiynhbhq/image/upload/v1507507908/d0c4d3gciiavoont9qby.png)</center>
<div class="text-justify">Que s'est-il donc passé ? Beaucoup... et pourtant pas grand chose ! Aucune donnée écrite n'a été changée, nous avons juste modifié leur apparence, mais n'oubliez pas que c'est exactement à ça que sert CSS ! Ce que vous devriez remarquer dans un premier temps sont les trois couleurs utilisées : orange pour les fonctionnalités, jaune très pâle pour le fond du site et bleu foncé pour le texte. Un autre gros changement est la présence du bouton "envoyer" dans l'espace de commentaire, vous pouvez vérifier sur la première capture d'écran, il n'y était pas ! Les autres changements sont minimes : ajouter une ombre pour le post, justifier le texte (ce qui est d'ailleurs possible sur Steemit mais visiblement personne ne veut le faire), ajuster la largeur de l'espace commentaire et bien plus.</div>

* ### PHP <div class="pull-right"><em>(PHP : Hypertext Preprocessor)</em></div>
<center>![Code PHP](https://res.cloudinary.com/hpiynhbhq/image/upload/v1507564385/e4ffubjtedubdxfnqtss.png)</center>
<ul><ul>
<li>
<h4>PHP</h4>
<div class="text-justify">C'est un acronyme récursif pour PHP: Hypertext Preprocessor.</div>
</li>
<li>
<h4>Hypertext Preprocessor</h4>
<div class="text-justify">PHP est un préprocesseur hypertexte, en anglais hypertext preprocessor. Il reçoit des données avec/sur lesquelles il travaille pour ensuite renvoyer des données qui peuvent être utilisées dans l'HTML.
C'est la porte ouverte aux sites web dynamiques !</div>
</li>
<li>
<h4>MySQL <div class="pull-right"><em>(My Structured Query Language)</em></div></h4>
<div class="text-justify">PHP est le plus utile lorsqu'il est combiné à MySQL.</div>
</li>
<ul>
<li>
<h5>Structured Query</h5>
<div class="text-justify">Chaque étape est contenue dans une requête structurée, en anglais structured query. Cela permet de clairement séparer les actions.</div>
</li>
<li>
<h5>Connection à une base de données</h5>
<div class="text-justify">C'est grâce à MySQL que nous pouvons communiquer avec une base de données se trouvant sur le serveur. Par conséquent, nous pouvons lui envoyer des données et en recevoir.</div>
</li>
</ul>
<li>
<h4>Langage back-end</h4>
<div class="text-justify">Ce langage opère du côté serveur ce qui explique pourquoi il a la possibilité d'interagir avec une base de données.</div>
</li>
<li>
<h4>Langage de programmation</h4>
<div class="text-justify">C'est en effet un langage de programmation, plus précisément un langage de script créé spécifiquement pour être utilisé avec HTML. Nous allons apprendre comment l'utiliser avec l'architecture MVC (Model-View-Controller, en français Modèle-Vue-Contrôleur) qui sera expliquée au moment opportun.</div>
</li>
</ul></ul>
<br>
<div class="text-justify">La stylisation est déjà terminée mais vous avez probablement remarqué que toutes les données étaient des données par défaut (0, lorem ipsum, utilisateur, photo de profil). C'est une pratique courante de remplir notre HTML avec des fausses données pour tester l'apparence d'un site web.</div>

<center>![PHP en action](https://res.cloudinary.com/hpiynhbhq/image/upload/v1507565183/dvkxuk5xroyebb3kn3zb.png)</center>
<div class="text-justify">Maintenant que nous pouvons nous connecter à une base de données, le post ressemble plus à un réel post. Les informations de l'auteur sont disponibles ainsi que le temps passé depuis la mise en ligne du post et le nombre de commentaires. Nous pouvons aussi commenter ce post, le commentaire sera alors envoyé à la base de données.
Cependant, cliquer sur le bouton "envoyer" rafraîchira la page étant donné que c'est la seule manière d'envoyer un commentaire. Nous aurions pu avoir un même système pour les partages et les "j'aime" mais, contrairement aux commentaires, je ne vois aucun site qui voudrait rafraîchir une page une fois ces boutons cliqués.</div>

* ### JS <div class="pull-right"><em>(JavaScript)</em></div>
<center>![Code JS](https://res.cloudinary.com/hpiynhbhq/image/upload/v1507507999/nclimxrtrujyxxql0nup.png)</center>
<ul><ul>
<li>
<h4>Java</h4>
<div class="text-justify">JavaScript est inspiré par de multiples langages de programmation dont Java, il ne faut cependant pas les confondre puisque les deux langages ont peu de choses en commun mis à part leur apparence.</div>
</li>
<li>
<h4>Script</h4>
<div class="text-justify">Tout comme PHP, JavaScript est un langage de script.</div>
</li>
<li>
<h4>Mal écrit</h4>
<div class="text-justify">Ce langage est fort réputé pour avoir été mal écrit.
Ceci est principalement dû à la possibilité d'écrire votre code de plein de façons différentes afin d'arriver au même résultat, ce qui rend les choses compliquées lorsque vous travaillez avec quelqu'un qui n'a pas les mêmes habitudes de programmation que vous.</div>
</li>
<li>
<h4>jQuery</h4>
<div class="text-justify">jQuery est une librairie JavaScript créée pour rendre l'écriture de code plus facile, rapide et concise du côté client.</div>
<ul>
<li>
<h5>SPA <div class="pull-right"><em>(Single Page Application)</em></div></h5>
<div class="text-justify">jQuery est principalement utilisé pour écrire des Single Page Applications, en français des applications tenant sur une page. De telles applications ont le grand avantage de ne nécessiter aucun rafraîchissement de page. Pour cela, nous avons besoin d'AJAX.</div>
</li>
<li>
<h5>AJAX <div class="pull-right"><em>(Asynchronous Javascript And XML)</em></div></h5>
<ul>
<li>
<h6>Asynchronous</h6>
<div class="text-justify">Dans ce contexte, asynchrone, en anglais asynchronous, veut dire qu'une requête peut être envoyée au serveur sans avoir à déranger l'utilisateur en bloquant sa page ou en la rafraîchissant.</div>
</li>
<li>
<h6>XML <div class="pull-right"><em>(eXtensible Markup Language)</em></div></h6>
<div class="text-justify">C'est un langage de balisage flexible principalement utilisé pour transférer des données sur le Web.</div>
</li>
</ul>
</li>
</ul>
</li>
<li>
<h4>Langage front-end</h4>
<div class="text-justify">JavaScript opère du côté client mais utiliser jQuery rendra possible l'appel de scripts PHP afin d'interagir avec le serveur. En réalité, il est possible d'appeler ces scripts sans jQuery mais c'est beaucoup plus compliqué, c'est pourquoi nous allons nous contenter de l'approche la plus simple.</div>
</li>
<li>
<h4>Langage de programmation</h4>
<div class="text-justify">C'est un autre langage de programmation, ce qui veut dire que nous avons un langage de programmation opérant du côté client et un autre opérant du côté serveur.</div>
</li>
</ul></ul>
<br>
<div class="text-justify">Il est temps de voir les quatre langages en action !
Le post est à présent complet. JavaScript nous a été utile dans ce cas pour faire appel à des scripts PHP via jQuery mais aussi pour rendre l'expérience utilisateur meilleure. Tout devient plus dynamique, pour illustrer ceci une simple image n'aurait pas fait l'affaire, c'est pourquoi je vous ai fait un gif.</div>

<center>![JS en action](https://res.cloudinary.com/hpiynhbhq/image/upload/v1507507672/bfddprevgrau6ukxssrz.gif)</center>
<div class="text-justify">Comme vous pouvez le remarquer, les "j'aime",
les partages et les commentaires sont instantanément envoyés et ajoutés à leurs compteurs respectifs. Les fonctionnalités changeant de couleur lorsque la souris leur passe dessus est du pur CSS tout comme le bouton changeant de taille. Par contre, ces mêmes fonctionnalités gardant leur couleur orange une fois cliquées a été rendu possible par JavaScript.</div>
<br>

___
<center><h3>Envie d'en savoir plus ? (anglais)</h3></center>

<center>Thème</center> | <center>Titre</center> | <center>Auteur</center> | <center>Type</center>
- | - | - | -
HTML | [History of HTML](https://www.youtube.com/watch?v=NzzGt7EmXVw) | DevTips | Vidéo
HTML | [Philosophy of HTML5](https://www.youtube.com/watch?v=2R8_Yt8UjBo) | DevTips | Vidéo
Hypertexte | [Hypertext](https://www.youtube.com/watch?v=FzbHYl17x6U) | The Computer Chronicles | Vidéo
Langages de balisage | [SGML, HTML, XML: What's the Difference?](https://www.youtube.com/watch?v=RH0o-QjnwDg) | Computerphile | Vidéo
Langages de balisage | [HTML: Poison or Panacea?](https://www.youtube.com/watch?v=Q4dYwEyjZcY) | Computerphile | Vidéo
Front end et back end | [Front End vs Back End Development: Where to Start?](https://www.coursereport.com/blog/front-end-development-vs-back-end-development-where-to-start) | Lauren Stewart | Texte
Front end et back end | [Front end vs Back end│Blonde Dictionary explanation](https://www.youtube.com/watch?v=NlpK0-TLrjw) | Coding Blonde | Vidéo
Langage de programmation | [What is Programming Language](http://www.webopedia.com/TERM/P/programming_language.html) | Vangie Beal | Texte
CSS | [What is CSS?](https://www.youtube.com/watch?v=s7ONvIgOWdM) | DevTips | Vidéo
CSS | [Cascades](https://www.youtube.com/watch?v=tZhmjgLQgXU) | DevTips | Vidéo
Base de données | [Introduction to Databases](https://www.youtube.com/watch?v=eXiCza050ug) | GCFLearnFree.org | Vidéo
Base de données | [What is a database?](https://www.youtube.com/watch?v=45w9UraAsmQ) | Vertabelo | Vidéo
JavaScript | [Why Does JavaScript Suck?│A Terrible Language with a Bright Future](https://whydoesitsuck.com/why-does-javascript-suck/) | R.B. | Texte
jQuery | [What is jQuery?](https://www.youtube.com/watch?v=T2mFyPxL-fU) | Khan Academy | Vidéo
jQuery | [What is jQuery?](https://www.youtube.com/watch?v=46Jz0QJyhN0) | Brad Hussey | Vidéo
AJAX | [AJAX tutorial for beginners](https://www.youtube.com/watch?v=tNKD0kfel6o) | mmtuts | Vidéo
AJAX | [What is Ajax?](https://www.youtube.com/watch?v=3l13qGLTgNw) | WebConcepts | Vidéo
<center><b>Si vous apercevez une erreur quelconque, parlez-moi en dans les commentaires afin que je puisse éditer ce post à temps.</b></center>
___
<center>[![footer.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1506979533/g3rb9ezil3xewzaytalu.png)](https://www.steemit.com/@ragepeanut)</center>
<center>Si vous avez aimé ce post et souhaitez en voir davantage, n'oubliez pas d'**upvote**, de me **follow** et de me **resteem** !</center>