Remerciez-le!

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

L'histoire de votre premier site web Créer un site web professionnel nécessite

L'histoire de votre premier site web Créer un site web professionnel nécessite beaucoup de travail. C'est pourquoi, si vous débutez, nous vous encourageons à commencer par quelque chose de simple. Vous n'allez pas bâtir un nouveau Facebook dès le départ mais il n'est pas bien compliqué de mettre en ligne votre propre site web. C'est par là que nous allons démarrer. En parcourant les articles listés ci-dessous, vous pourrez créer votre première page web et la mettre en ligne. Allons-y ! Installer les outils de base Beaucoup d'outils sont disponibles afin de construire un site web. Si vous débutez, vous serez peut-être perturbé par la quantité d'éditeurs de code, de frameworks ou encore d'outils de tests disponibles. Dans cet article nous décrivons, pas à pas, comment installer les seuls outils strictement nécessaires afin de développer un site web. Dans cet article, nous allons vous montrer les outils dont vous aurez besoin pour développer un site web simple, ainsi que comment les installer. Quels outils utilisent les professionnels ?  Un ordinateur. Ça peut sembler évident pour certains, mais certains d'entre vous lisent cet article depuis leur téléphone ou un terminal de bibliothèque. Pour du dévelopement web sérieux, il est préférable d'investir dans un ordinateur de bureau (Windows, Mac ou Linux).  Un éditeur de texte, pour y écrire du code. Cela peut être un éditeur gratuit (ex : Atom, VS Code, Notepad++, gedit ou Text Wrangler), ou un éditeur de texte commercial (Sublime Text, ou Coda) ou un éditeur hybride (Dreamweaver).  Un navigateur web, pour y tester le code. Les navigateurs les plus utilisés sont Firefox, Chrome, Opera, Safari et Internet Explorer.  Un éditeur graphique, comme GIMP ou Photoshop, pour construire les images de vos pages web.  Un serveur web, utilisé pour publier des sites web sur votre intranet. Les plus connus sont Apache, IIS, Nginx, Lighttpd.  Un langage serveur tel que PHP pour générer des pages web dynamiques.  Un système de gestion de base de données. à l'instar de MySQL permettant de stocker, d'organiser et de récupérer des données.  Un gestionnaire de versions, pour collaborer sur les projets avec un équipe, partager du code, des fichiers et pour éviter les conflits d'édition. À ce jour, Git est l'outil le plus connu et la plateforme en ligne GitHub est également très populaire et permet de publier des projets logiciels gérés avec Git.  Un programme FTP, pour uploader les pages web vers un serveur et leur donner une visibilité publique. Il existe une grande quantité de programmes de ce genre comme Cyberduck, Fetch et FileZilla.  Un système d'automatisation, comme Grunt, pour automatiser les tâches répetitives, comme, par exemple, minimiser le code et lancer des tests.  Des templates (modèles), bibliothèques, framework, etc. pour accélérer le développement de functionnalités fréquentes.  Et encore plus ! De quels outils ai-je besoin tout de suite ? Cette liste peut paraître effrayante. heureusement vous pouvez vous lancer dans le dévelopement web sans rien savoir de tout cela. Dans cet article nous allons vous présenter le minimum : un éditeur de texte et quelques navigateurs web modernes. Installer un éditeur de texte Vous avez probablement un éditeur de texte basique sur votre ordinateur. Par défaut Windows propose Bloc-Notes, OS X propose TextEdit. Pour les distributions Linux cela varie. Ubuntu propose gedit par défaut. Pour le développement web, vous pouvez probablement faire mieux que Notepad ou TextEdit. Nous vous recommandons de commencer avec Notepad++ pour Windows ou Text Wranglerpour Mac. Ils sont tous les trois gratuits et plus complets que Bloc-Notes et TextEdit. Vous pouvez également utiliser un éditeur disponible sur Windows, macOS et Linux : Atom ou VS Code Intaller un navigateur moderne Pour l'instant, nous n'installerons que quelques navigateurs pour y tester notre code. Choisissez votre système d'exploitation en dessous et cliquez sur les liens pour télécharger les installateurs correspondants à vos navigateurs favoris :  Linux : Firefox, Chrome, Opera.  Windows : Firefox, Chrome, Opera, Internet Explorer (si vous utilisez Windows 8 ou une version supérieure, vous pouvez installer IE 10 ou une version supérieure, sinon vous devriez choisir un navigateur alternatif)  Mac : Firefox, Chrome, Opera, Safari (Safari est proposé sur iOS et OS X par défaut) Avant de continuer, vous devriez installer au moins deux de ces navigateurs et les avoir sous la main pour les tests. En effet, tous les navigateurs ne comprennent pas ou n'interprètent pas certains languages de la même façon. Même si la tendance actuelle dirige vers une « normalisation » du comportement des navigateurs, il serait dommage de n'avoir testé votre site que sur l'un d'entre eux. Ce n'est qu'une mesure de sécurité de plus mais elle est nécessaire pour s'assurer que tous les visiteurs de votre futur site pourront y accéder sans problème ! Quel sera l'aspect de votre site ? Avant de commencer à écrire le code de votre site web, vous devez d'abord le concevoir. Quelles informations choisissez-vous de mettre en avant, quelles fontes (polices) et quelles couleurs utiliser ? Dans cet article, nous vous proposons une méthode simple pour planifier au mieux le contenu et le design de votre site. Commençons par le commencement : planifier Avant de faire quoi que ce soit, vous avez besoin d'idées. Qu'est-ce que votre site web devrait faire ? Un site web peut pratiquement faire tout ce que vous voulez mais pour votre premier essai, vous devriez garder les choses simples. Nous allons commencer par créer une simple page web avec un en-tête, une image, et quelques paragraphes. Pour commencer, posez vous ces questions : 1. De quoi parle votre site web ? Aimez-vous les chiens, New York, ou Pacman ? 2. Quelles informations allez-vous présenter sur le sujet ? Écrivez un titre et quelques paragraphes, et trouvez une image que vous aimeriez mettre sur votre page. 3. De quoi a l'air votre site web, dans des termes de plus haut niveau. Quelle sera la couleur de l'arrière plan ? Quelle sorte de police est appropriée : formelle, cartoon, gras et criard, subtile ? Note : Des projets complexes nécessitent des lignes directrices (guidelines) détaillées qui précisent tous les détails de couleurs, de polices, d'espacement entre les éléments de la page, un style d'écriture adapté, et ainsi de suite. Ceci est parfois appelé un guide de design ou une charte graphique, vous pouvez en voir un exemple avec les lignes directrices utilisées pour Firefox OS. Esquisse de votre concept Ensuite, prenez un crayon et du papier et faite une esquisse de l'apparence que vous souhaitez de votre site. Pour votre première et simple page web, il n'y a pas beaucoup à esquisser, mais vous devriez prendre l'habitude de le faire dès maintenant. Cela aide vraiment, et vous n'avez pas à être Van Gogh ! Note: Même sur les sites web réels et complexes, l'équipe de design commence par faire des esquisses sur papier, puis des maquettes numériques en utilisant un éditeur graphique ou des technologies Web. Les équipes Web intègrent souvent un designer graphique et un designer d'expérience-utilisateur (UX). Les designers graphiques, bien sûr, regroupent les visuels du site web. Les designers UX ont un rôle un peu plus abstrait qui consiste à s'occuper de la manière dont les utilisateurs expérimenteront et interagiront avec le site web. Choix de vos composants À ce stade, il est bon de commencer à regrouper le contenu qui apparaitra peut-être sur votre page web. Texte Vous devriez encore avoir vos paragraphes et votre titre puique vous y avez songé un peu plus tôt. Gardez les à proximité. Couleur du thème Pour choisir une couleur, utilisez une palette de couleurs et trouvez une couleur que vous aimez. Quand vous cliquez sur une couleur, vous verrez un étrange code à six caractères comme #4BE8D3. Ceci est appelé un code hexadécimal et il représente votre couleur. Copiez le code dans un endroit sûr pour l'instant. Images Pour choisir une image, allez sur Google Images et cherchez une image qui convient. 1. Quand vous avez trouvé l'image que vous voulez, cliquez sur l'image. 2. Appuyez sur le bouton Afficher l'image. 3. Sur la page suivante, faites un clic-droit sur l'image (Ctrl + clic sur Mac), choisissez Enregistrer l'image sous, et choisissez un endroit sûr pour sauvegarder votre image. Alternativement, copiez l'adresse de l'image depuis la barre d'adresse de votre navigateur pour une utilisation prochaine. Note : La plupart des images sur le Web, dont celles dans Google Images, sont protégées. Pour réduire votre probabilité de commettre une violation de droits d'auteurs, vous pouvez utiliser le filtre de licence de Google. Tout simplement 1) cliquez sur Outils de recherche, 2) ensuite sur Droits d'usage et 3) sélectionnez Réutilisation et modification autorisée. Police Pour choisir une police : 1. Allez sur Google Fonts et faites défiler la page jusqu'à en trouver une que vous aimez. Vous pouvez aussi utiliser les contrôles sur la gauche pour filtrer plus précisément les résultats. 2. Cliquez sur le bouton Add to collection à côté de la police que vous voulez. 3. uploads/S4/ developpement-web.pdf