Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Apprendre le développement web – Chapitre 01 : Introduction au développement we

Apprendre le développement web – Chapitre 01 : Introduction au développement web 20 février 2020 Chapitre 01 : Introduction au développement web Avant de se lancer dans le développement web, nous allons commencer par voir quels sont les différents langages utilisés et leur utilité ainsi que différents outils disponibles pour commencer à créer un site internet. Sommaire : Chapitre 01 : Introduction au développement web........................................................................................................1 I) Les langages utilisés :...........................................................................................................................................1 A) Le HTML :.........................................................................................................................................................1 B) Le CSS :............................................................................................................................................................2 C) Le JavaScript :..................................................................................................................................................2 D) Le PHP :............................................................................................................................................................2 E) Le XML :...........................................................................................................................................................2 F) Le SQL :............................................................................................................................................................2 G) Le JQuery :.......................................................................................................................................................2 H) AngularJS :.......................................................................................................................................................2 I) Bootstrap 3 :....................................................................................................................................................2 II) Les outils disponibles :.........................................................................................................................................3 A) Les IDE et éditeurs de texte :...........................................................................................................................3 B) Les clients FTP/SFTP :......................................................................................................................................3 C) Les hébergeurs web :.......................................................................................................................................3 D) Les logiciels d’administration :.........................................................................................................................4 E) Les Site-builders :............................................................................................................................................4 I) Les langages utilisés : Pour créer un site Internet, plusieurs langages informatiques seront utilisés, dont le HTML (HyperText Markup Language) qui est un langage de balisage et sert à créer la structure de la page. Nous avons ensuite le CSS (Cascading Style Sheet) qui définit l’apparence de la page. On peut retrouver aussi le XML (Extended Markup Language) qui est principalement utilisé pour stocker et organiser des données, le JavaScript, qui sert à créer des fonctions côté utilisateur, le PHP (Hypertext PreProcessor) qui permet la création de programmes ou fonctions exécutées côté serveur. On peut aussi noter, même s’il ne s’agit pas en réalité d’un langage de programmation, le SQL (Structured Query Language) qui est utilisé pour interagir avec des bases de données. Il s’agit là des langages les plus basiques et les plus utilisés pour créer un site Internet, mais il en existe beaucoup d’autres, plus ou moins utilisés, que nous ne verrons pas forcément dans ces cours. A) Le HTML : Comme dit précédemment, ce langage est dit de balisage, car il se base sur des balises telles que <html></html>. Une balise est dite ouvrante, placée au début, et une fermante, placée à la fin, avec un « / ». On verra par la suite qu’il existe des balises qui n’ont pas besoin d’être fermées. On utilise le HTML pour créer la structure de la page, en n’utilisant que ce langage, les pages Internet ne ressembleraient pas à grand-chose et seraient fixes, sans fonctionnalités particulières. Page 1 sur 4 Apprendre le développement web – Chapitre 01 : Introduction au développement web 20 février 2020 B) Le CSS : Le CSS, quant à lui est utilisé pour donner un style aux pages web, de la simple couleur de texte à des animations. Le style d’une page web peut être défini directement à l’intérieur du fichier composant la page ou en tant que ressource externe à la page, ce qui est pratique pour garder un même style sur plusieurs pages différentes, sans avoir à tout copier. Lorsque le style d’une page est défini dans un fichier à part, les fichiers sont enregistrés avec l’extension « .css ». C) Le JavaScript : Le JavaScript est un langage de programmation utilisé pour effectuer des programmes qui seront exécutés côté client, c’est-à-dire qu’il sera géré par l’appareil des visiteurs de la page. Ces fonctions créées en JavaScript ne peuvent donc impacter la page uniquement en local. Ce langage est assez simple et est très utile lorsque l’on souhaite effectuer des opérations ne nécessitant aucune ou très peu d’informations externes à celles fournies par l’utilisateur. Les données peuvent venir de diverses sources, comme un formulaire, un évènement (ex : click sur la page, fin de la lecture d’une vidéo, …). D) Le PHP : Le PHP, contrairement au JavaScript est exécuté sur le serveur en lui-même et peut donc interagir avec des données externes comme une base de données, les fichiers externes (fichiers textes, audio, vidéo…). Le code PHP est donc exécuté avant d’envoyer le résultat au client (visiteur). E) Le XML : Le XML, comme le HTML est un langage basé sur des balises, cependant, il est utilisé pour stocker et organiser des données. On peut par exemple l’utiliser pour créer une base de données. L’atout de ce format de bases de données est que les données peuvent être facilement consultées, un simple navigateur permet de l’ouvrir, voir même l’utiliser sous Excel. Les feuilles de style CSS fonctionnent d’ailleurs pour modifier la présentation des données dans le navigateur. F) Le SQL : Le SQL est le langage utilisé pour effectuer des requêtes avec les bases de données comme les bases de données MySQL, MongoDB ou autres. Il sera utilisé dans le PHP pour interagir avec les bases de données du site ou même d’autres sites (bases de données publiques). G) Le JQuery : Le JQuery n’est pas à proprement parler un langage de programmation, il s’agit en fait d’une extension du JavaScript, offrant une nouvelle syntaxe réduite et des fonctionnalités supplémentaires. H) AngularJS : AngularJS, comme le précisent les lettres « JS » le composant est, comme le JQuery une extension pour le JavaScript. Il permet de créer des « applications » et peuvent réaliser des opérations et afficher directement le résultat sur la page, sans avoir à utiliser les évènements comme on le ferait en utilisant seulement le JavaScript. I) Bootstrap 3 : Le Bootstrap 3 est utilisé pour rendre un site web dynamique au point de sa présentation, il permet facilement d’ajuster la présentation du site pour s’ajuster au mieux à l’appareil du client, par exemple, pour s’adapter à un écran de téléphone qui est en orientation portrait, contrairement à un ordinateur, qui a un écran avec une orientation paysage. Page 2 sur 4 Apprendre le développement web – Chapitre 01 : Introduction au développement web 20 février 2020 II) Les outils disponibles : Pour créer un site web, il existe divers outils, comme un éditeur de texte ou IDE, un hébergeur web, ou un logiciel permettant de créer un serveur sur son propre ordinateur, un client FTP pour le transfert de fichiers vers un serveur, ou même les sites et logiciels de création de site Internet. A) Les IDE et éditeurs de texte : Un IDE est un logiciel regroupant les fonctionnalités d’un éditeur de texte et des aides comme la coloration syntaxique, des raccourcis et propositions et même des aperçus en direct, voir même la synchronisation automatique avec le serveur sur lequel sont stockés les fichiers du site. Un IDE est un outil indispensable dans le développement, que ce soit pour le web ou autres. Quelques exemples d’IDE pouvant être utilisés pour le développement web : - Notepad++ : Petit IDE gratuit, il a peu de fonctionnalités, mais a de nombreuses extensions disponibles pour lui ajouter des fonctionnalités comme la prise en charge de la syntaxe d’autres langages de programmation. Cet IDE peut aussi être installé sur une clef USB et utilisé sur n’importe quel ordinateur. - Sublime Text 3 : Selon moi, c’est un très bon IDE pour débuter, gratuit, il possède tout de même un très large choix d’extensions disponibles pour étendre ses fonctionnalités, d’un nouveau style à la synchronisation avec un serveur. Cet IDE peut également être installé sur une clef USB et utilisé sur la plupart des ordinateurs. - Visual Studio Code : Très bon IDE pour le développement web, il est très complet avec de nombreuses fonctionnalités, un grand nombre d’extensions disponibles, une belle présentation et toujours gratuit (version de la communauté). - WebStorm : Un excellent IDE, avec toutes les fonctionnalités attendues, ce qui peut s’expliquer du fait que celui- ci est payant. Comme les autres IDE, des extensions sont disponibles, une gestion des projets. Il existe plein d’autres IDE, avec leurs avantages et inconvénients, j’ai eu l’occasion d’essayer ces quatre-cis qui sont assez connus avec leurs avantages et inconvénients. Le choix d’un IDE se fait selon nos propres critères. Pour le développement web, j’utilise Visual Studio Code qui me convient très bien. B) Les clients FTP/SFTP : Un client FTP / SFTP est un logiciel utilisé pour gérer les fichiers stockés sur le serveur qui héberge notre site Internet. FTP signifie « File Transfer Protocol », soit « Protocole de transfert de fichiers ». SFTP signifie quant à lui « Secure File Transfer Protocol » ou « Protocole de transfert de fichiers sécurisé ». La différence est donc la sécurité des transferts, le SFTP est obligatoire pour les sites sécurisés (https). Les clients FTP/SFTP les plus connus sont FileZilla et WinSCP, ils sont tous les deux gratuits chacun avec ses avantages et inconvénients. C) Les hébergeurs web : Les hébergeurs web, comme le nom l’indique sont des entreprises (voir associations) qui hébergent, donc mettent à disposition sur des serveurs dédiés des emplacements de stockage pour y mettre les fichiers de sites Internet et gèrent les connexions à celui-ci. Il existe un grand nombre d’hébergeurs web, souvent payants, mais on peut aussi en trouver des gratuits, comme fr.000webhost.com (géré par Hostinger), planethoster.com ou byet.host (dernier hébergeur gratuit que j’ai utilisé). Chaque hébergeur possède ses avantages et inconvénients. Le choix de l’hébergeur se fait selon notre uploads/s3/ chapitre-01-introduction-au-developpement-web.pdf