Développement et conception Web 101

web_development_101Vous voulez connaître les bases du développement et de la conception Web? Impressionnant…


Mais il y a un problème avec cette ligne de pensée, ou un certain nombre d’entre eux en fait …

  • Quel est le but d’avoir un site Web? Est-ce que tout le monde en a vraiment besoin?
  • Si oui, comment construisez-vous un site Web de qualité? Ou en d’autres termes, comment apprenez-vous le développement et la conception Web de base qui vous permettraient de créer vous-même ce site Web de qualité?
  • Plus important encore, pouvez-vous créer un site Web de qualité lors de votre PREMIER essai? Ou avez-vous besoin d’années d’expérience derrière vous, avant de pouvoir espérer un résultat au-dessus de terrible?

Répondons à tout cela dans ce guide du débutant pour le développement et la conception web.

[Alerte spoil. Oui, vous pouvez créer un site Web de qualité dès votre premier essai.]

Contenu de ce guide?

D’accord, tout d’abord, nous sommes heureux que vous ayez continué à lire et que vous ayez décidé d’essayer le développement Web! Voici comment ça va se jouer:

Les chapitres sont présentés de manière très simple, avec le contenu principal à gauche et les éléments exploitables à droite. Ainsi:

Introduction au guide: Chapitre 1

Maintenant, comment procéder:

  • Lors de votre première lecture: Nous vous recommandons de lire le tout de haut en bas. Cela vous donnera une bonne vue de 10 000 pieds du sujet et vous aidera à comprendre les parties les plus importantes de celui-ci. Il vous fournira également des outils et des méthodes de base sur la façon de gérer les tâches individuelles.
  • Lors de votre 2e lecture et plus loin: Utilisez la table des matières et passez à la partie qui vous intéresse le plus. Aussi, n’hésitez pas à utiliser les boutons de partage à côté de chaque chapitre et à envoyer les liens à vous-même ou à vos amis / followers qui pourraient être intéressés.

Prêt? Passons au chapitre 1.

À qui s’adresse ce guide?

Si vous souhaitez apprendre le développement et la conception Web de base, ce guide est pour vous. Quelle que soit votre motivation.

De plus, vous n’avez pas besoin de connaissances techniques préalables pour commencer (autres que des «compétences Web» de base). L’intérêt de ce guide est d’être une sorte de cours «101» pour tous ceux qui souhaitent créer des sites Web et apprendre le développement Web..

Voici quelques raisons courantes qui pourraient vous intéresser:

  • 1. Vous avez besoin d’un site Web pour votre entreprise (et vous voulez voir si vous pouvez le construire vous-même).
  • 2. Vous voulez APPRENDRE le développement web par passion ou intérêt temporaire (rien de mal à ça).
  • 3. Vous avez besoin d’un site Web pour l’école.
  • 4. Vous AIDEZ un ami ou un membre de la famille à accéder à son site Web en ligne.

L’idée principale qui va nous guider

C’est important! Et s’il vous plaît ne vous fâchez pas si vous êtes un développeur Web avancé lisant ceci, mais l’idée principale qui va nous guider tout au long de cette ressource de développement et de conception Web 101 est:

«L’approche de la moindre résistance»

Voici les trois principes de l’approche la moins résistante:

  • Étaient ne pas casser les choses au niveau moléculaire. C’est à dire. nous n’allons pas aller au fond du fonctionnement des langages de programmation ou du fonctionnement d’un serveur Web.
  • Étaient ne pas réinventer la roue. C’est à dire. si quelqu’un a déjà résolu un problème donné et rendu la solution disponible, nous allons l’utiliser.
  • Étaient faire une solution simple génial, plutôt qu’un buggy de solution compliqué et apparemment plus fonctionnel et incompréhensible.

CHAPITRE 1: Le plan

Votre idée, type de site Web, nom de domaine et hébergement.

Avant de configurer un site Web, vous aurez besoin d’un plan

Aussi ironique que cela puisse paraître – l’émission à succès des années 80 «The A-Team» nous a enseigné, un bon plan est un clé du succès.

Si vous avez un site Web en vous depuis un certain temps maintenant, alors vous êtes sûrement enthousiasmé par la seule idée de finalement le faire découvrir aux autres pour le lire et le parcourir.

Vous voulez que votre site Web soit génial. Vous savez probablement à quoi cela va ressembler dans une certaine mesure. Ou peut-être avez-vous même le logo parfait prêt.

Mais…

Ce n’est pas du tout par où commencer. Si vous commencez avec des attentes préétablies, cela ne vous mènera qu’à beaucoup de confusion en cours de route et à un résultat inférieur à la normale à la fin.

Pensez plutôt à ce qui suit:

  1. Séparez-vous des objectifs techniques que vous pourriez avoir. Comme, par exemple, l’objectif d’apprendre les technologies de site Web ou certains logiciels de site Web.
  2. Posez-vous une question principale: “Pourquoi ai-je besoin du site?”

Il ne s’agit pas de vous, il s’agit de l’objectif du site.

Questions que vous devez vous poser avant de configurer votre site Web

  1. Ce que le site est censé réaliser?
  2. Quelle sera la «chose» principale présentée sur le site? (par exemple, votre entreprise, un produit, vos articles de blog, etc.)
  3. Le site Web aura-t-il un but particulier? (par exemple, une boutique de commerce électronique, le portfolio d’un photographe, etc.)
  4. Quel est le public cible?
  5. Pourquoi sont-ils intéressés par le sujet du site?
  6. Quelle douleur le site résout-il pour les membres individuels de l’audience?

À propos de ces 3 dernières questions, parlons à l’auditoire pendant une minute…

Il existe 2 règles principales pour la création d’un site Web. Voici la règle n ° 1:

 Le lecteur / visiteur vient en premier, ils sont la principale personne que votre site Web doit satisfaire.

D’une certaine manière, votre site Web n’est pas le vôtre. C’est le leur.

(Règle n ° 2, nous en discuterons dans une minute.)

Oublier cette simple directive peut vous conduire dans le mauvais sens, même au point où vous vous retrouvez avec un site Web déroutant pour tout le monde mais vous.

“Pouah! Les gens ne comprennent tout simplement pas de quoi parle ce site. Comment peuvent-ils être si ignorants?! ” – vous finissez par penser. Mais il s’avère que l’ignorant était toi.

La seule façon d’éviter cela est de créer votre site Web avec le lecteur à l’esprit dès le départ.

Alors… prenez ce morceau de papier et répondez à toutes les questions ci-dessus.

Une fois que vous avez terminé, vous disposez de votre ensemble ultime de directives sur lesquelles vous allez agir tout en travaillant sur votre site Web..

Ces réponses seront un outil exceptionnellement puissant au fur et à mesure. Vous pourrez y revenir chaque fois que vous serez confronté à une décision concernant votre site Web..

Devriez-vous faire * ceci * ou * cela *? Allez à la feuille de réponses et découvrez. Devriez-vous utiliser une barre latérale large ou étroite? Allez aux réponses, découvrez ce qui est le plus susceptible de résonner avec le lecteur cible. Et etc.

Noms de domaine et hébergement Web

Si vous voulez être propriétaire d’un site Web, vous avez besoin d’un nom de domaine et d’un hébergeur.

Eh bien, d’accord, techniquement, vous pouvez créer un site Web de test sur votre propre ordinateur, puis l’exécuter à partir d’un serveur Web local (également installé en tant que logiciel sur votre ordinateur), mais ce ne serait pas une solution utilisable pour 99% des cas, nous allons donc sauter.

Donc, un hôte et un domaine…

La mauvaise nouvelle ici est qu’ils coûtent tous les deux de l’argent.

La bonne nouvelle… ce n’est pas tant d’argent dans le grand schéma des choses. De plus, au fur et à mesure que vous apprenez, vous pouvez même lancer plusieurs petits sites Web sur un seul nom de domaine et sous un seul hébergeur.

Mais commençons au début.

Hébergeurs Web:

  • En termes simples, un hébergeur est l’endroit où se trouve votre site Web et où vos visiteurs peuvent le trouver. D’une certaine manière, les hébergeurs de sites Web sont comme des appartements pour les humains. Sous le capot, les hébergeurs sont des entreprises qui louent leurs serveurs en échange d’argent (… de petits appartements pour vos sites Web).
  • Pour commencer, un plan d’hébergement partagé standard fera l’affaire. Vous pouvez les obtenir pour tout ce qui commence à partir de 3 $ / mois. Voici une belle comparaison d’hôtes Web populaires. Vérifiez-le et décidez laquelle de ces entreprises vous convient. Cependant, nos recommandations vont pour SiteGround, A2 Hosting et Dreamhost.

Domaines:

  • Si un hébergeur est un appartement, un domaine est l’adresse de cet appartement. Par exemple, le domaine de ce site Web est hostingfacts.com.
  • Pour commencer, choisissez votre nom de domaine souhaité, puis achetez-le auprès d’un registraire. Voici un guide complet sur la façon d’acheter un nom de domaine, et voici une liste de générateurs de noms de domaine.

 

Suggestions et conseils pour choisir un nom de domaine

D’accord, aller chez un registraire de domaine et acheter le domaine est une chose, mais comment choisir le bon nom de domaine?

Il y a quelques écoles:

  • Noms de domaine de marque. Ce sont des domaines composés de mots inexistants. Pensez à des choses comme Google.com ou Yahoo.com. Avant l’arrivée de ces entreprises, ces mots ne voulaient rien dire. L’avantage d’un nom de domaine de marque est qu’il est… eh bien, hautement personnalisable, mémorable et il est facile de distinguer votre site des autres.
  • Noms basés sur des mots clés. Ceux-ci sont composés de mots existants, mis dans une séquence qui décrit le but du site. Pensez à des choses comme Pizza.com ou StartBloggingOnline.com. Avec un nom de domaine comme celui-ci, vos visiteurs pourront prédire avec précision le type de site Web qu’ils sont sur le point de visiter. L’inconvénient est que ces domaines sont généralement moins marquables.
  • Noms combinés. Ce sont des domaines de marque et des domaines basés sur des mots clés réunis. Pensez, Facebook.com ou Copyblogger.com. De tels noms suggèrent «une» partie de la nature du site Web au visiteur, mais ils sont toujours hautement personnalisables.

Quelques directives générales quel que soit le type de domaine que vous choisissez:

  • Rendez le domaine facile à mémoriser.
  • Rendez-le court et simple. Plus le domaine est long, plus il est déroutant.
  • Obtenez un .com (si possible). Le .com est le principal «domaine de premier niveau» disponible. Ne vous contentez de rien d’autre.
  • Essayez d’éviter les tirets. Obtenez votre nom sous forme de blob unique comme «cakerecipes.com» au lieu de «cake-recipes.com»

Choses à préparer après ce chapitre:

  • Un nom de domaine.
  • Un hébergeur.
  • Votre feuille de réponses – les objectifs de votre site et comment il va servir le public.

Besoin d’aide? Voici d’autres lectures pour vous:

  • Pourquoi l’hébergement mutualisé? Comparaison des principaux types d’hôtes
  • 10 choses qui font un bon hébergeur
  • 12 règles pour choisir le bon nom de domaine
  • Un guide de planification de site Web complet

CHAPITRE 2: Conception et wireframing

Prenez un papier et un stylo et grattez avec la structure de votre site Web

D’accord, entrons dans la phase de conception.

Tout d’abord, voici l’éthique de travail que nous allons suivre ici:

  • Nous utilisons le stylo et le papier aussi longtemps que possible, puis nous passons ensuite à l’ordinateur. Croyez-nous, chaque minute passée à travailler sur votre conception sur papier est une heure économisée une fois que vous commencez à régler les choses sur l’ordinateur.
  • Nous faisons un travail itératif… Nous faisons »vérifions les résultats» améliorons »vérifions les résultats» répétons jusqu’à ce que ce soit fait.

Dans le chapitre 1, nous avons mentionné ce que nous avons appelé la règle n ° 1 de la création de sites Web. Il est maintenant temps pour la règle # 2:

Règle n ° 2 de création de site Web:

Pensez d’abord au contenu.

Le contenu est ce qui compte sur un site Web. Pas le design. Contenu.

Les gens viennent pour le contenu. Ils ne viennent pas pour le design. La conception n’est qu’un véhicule pour livrer le contenu.

Ne commencez jamais avec l’apparence de votre site Web. Commencez par le contenu. Contenu. Contenu. Contenu.

Qu’entendons-nous donc par «contenu»? En bref, c’est ce que les gens veulent obtenir de votre site Web. Articles de blog, produits dans la boutique, fils de discussion si vous créez un forum, articles de presse, offre commerciale, etc..

“Vraiment? Le look n’a vraiment pas d’importance? ” – Tu demandes.

Au lieu de nous battre vers le bas, consultez cette page:

Site Web simple

Cette simple page Web est de loin la meilleure explication de ce qu’est le design et de sa fonction en ligne.

Alors rappelez-vous, le contenu d’abord!

Contenu et structure du site Web

D’accord, puisque le contenu est la chose la plus importante, vous devez l’avoir (la plupart) prêt à l’avance. Ou du moins, vous devez avoir une bonne idée de la quantité de contenu et de la forme.

Remarque. Nous savons que cette partie peut être difficile. Commencer avec du contenu semble assez peu naturel pour la conception de sites Web, mais c’est vraiment le meilleur moyen d’obtenir un superbe résultat à la fin. Pensez donc au contenu que vous souhaitez partager avec le lecteur et à la manière dont vous souhaitez le présenter.

L’étape suivante consiste à identifier les types de pages dont vous aurez besoin (comme une page d’accueil, une page de produit, une page de catégorie, une page à propos, une page de contact, la page de vente principale, une page de destination d’abonnement à la newsletter, liste principale du blog, messages individuels, un magasin peut-être, et tout ce qui semble nécessaire).

Pensez, quel est le moyen le plus efficace d’organiser votre contenu sur le site Web?

Faites tout cela sur papier. Cela va probablement être plus facile et plus rapide pour vous que d’apprendre un logiciel de dessin graphique sur place.

Exemple:

structure de contenu

Grattez ensemble un filaire

Un filaire dans la conception Web est simplement un schéma de page ou un plan – un guide visuel qui représente le cadre d’un site Web (nous dit Wikipedia).

Les wireframes sont géniaux! Nous les utilisons pour la plupart des choses que nous faisons qui sont censées apparaître en ligne. Par exemple, voici un filaire pour ce guide:

Grattez ensemble un filaire

Comme vous pouvez le voir, encore une fois, c’est sur papier. Même s’il existe plusieurs applications pour ce type de travail, nous ne conseillons pas réellement de les utiliser. Ils peuvent être parfaits pour les concepteurs professionnels, mais un débutant ou une personne intermédiaire ne perdra que du temps à les apprendre et, en fin de compte, ils n’obtiendront pas beaucoup d’amélioration par rapport à ce qu’ils obtiendraient grâce au stylo et au papier.

Alors, comment filaire?

Eh bien, il y a deux approches si vous êtes débutant:

  • Accompagnez le courant si vous vous sentez fort et éloignez-vous (pas toujours une solution parfaite).
  • Obtenez des connaissances rapides sur la façon de câbler correctement (généralement mieux).

Pour ces derniers, allez ici – un excellent guide.

(Assurez-vous de créer un fil de fer de chaque type de page important que vous avez répertorié à l’étape précédente.)

Choses à préparer après ce chapitre:

  • La plupart du contenu du site, ou du moins la plupart prédits (par exemple, si vous comptez sur du contenu généré par les utilisateurs, il est difficile de l’avoir à l’avance).
  • Structure du contenu de votre site Web préparée sous forme de graphique.
  • Une structure filaire des types de pages dont vous aurez besoin.

Lectures complémentaires:

  • 9 étapes pour planifier le contenu d’un site Web
  • Nouveau dans la conception web? Commencer ici.

CHAPITRE 3: UX et UI

Ne sous-estimez jamais l’importance de l’expérience utilisateur et de l’interface utilisateur

Comme dans, Expérience utilisateur et interface utilisateur.

WebDesignerDepot nous donne une définition plutôt poétique des deux:

L’interface utilisateur est la selle, les étriers et les règnes.

UX est le sentiment que vous pouvez monter à cheval et attacher votre bétail.

Pour une définition plus pratique:

  • L’interface utilisateur est ce que l’utilisateur voit lorsqu’il regarde votre site.
  • UX est ce qu’ils en pensent.

La paire, et la façon dont elle est exécutée, définit essentiellement l’utilité de votre site Web pour l’utilisateur final / visiteur.

La conception UX et UI sont des sujets importants en eux-mêmes, et il y a beaucoup de petits éléments qui jouent un rôle dans le résultat final.

Bref, il y a beaucoup à apprendre si vous ne faites que commencer votre voyage.

Donc, au lieu d’essayer de restreindre tout un cours de conception UX et UI ici, laissez-nous simplement souligner une poignée d’éléments importants, puis vous envoyer ailleurs pour une lecture plus approfondie.

Objectifs de l’utilisateur

L’UX concerne les objectifs des utilisateurs… Pas autant que vos objectifs… Les objectifs des utilisateurs.

D’accord, qu’est-ce que cela signifie? Tout d’abord, revenez à l’objectif de votre site Web – ce sur quoi vous avez travaillé dans les chapitres précédents. La raison pour laquelle vous créez le site Web et comment il aide l’utilisateur / visiteur.

Comment cela se traduit-il dans l’objectif du visiteur? … Quelle est la seule chose que le visiteur souhaite obtenir ou réaliser lorsqu’il vient sur votre site? C’est leur objectif.

À quel point ces objectifs sont-ils faciles à atteindre?

Ensuite, concentrez-vous sur la question suivante:

  • Le visiteur peut-il atteindre son objectif facilement? – Peuvent-ils accéder à l’information exacte pour laquelle ils sont venus de manière simple?

Pour répondre à cela, vous devez revenir à votre filaire, à votre structure de contenu et revérifier les choses.

Assurez-vous que la structure du contenu et les pages que vous avez imaginées ont un sens du point de vue de l’utilisateur. Assurez-vous qu’il leur est possible de naviguer entre les pages importantes librement et sans confusion.

Essentiellement, ici, nous nous assurons que le site Web donne de la valeur à vos visiteurs.

Difficile de tout comprendre par vous-même, n’est-ce pas?

Il est fortement recommandé de consulter les ressources répertoriées dans la section «Lectures complémentaires» de ce chapitre… mais vous pouvez également essayer «un hack», pour ainsi dire.

À savoir, qu’est-ce qui vous frustre lorsque vous visitez des sites Web similaires à celui que vous souhaitez créer? Peut-être y a-t-il des informations très difficiles à obtenir ou un élément d’interface qui rend le site déroutant.

Prenez des notes, tirez des conclusions, ne faites pas les mêmes erreurs avec votre site Web.

Utiliser l’émotion comme outil

Lorsque vous travaillez sur l’interface utilisateur et l’interface utilisateur de votre site, ce que vous visez essentiellement est d’invoquer une certaine émotion chez votre visiteur.

Vous voulez qu’ils ressentent une certaine manière, ce qui les convaincra ensuite d’agir d’une certaine manière. Ainsi, rendre votre site Web vraiment utile.

Pour travailler sur la partie émotionnelle du travail, l’un des meilleurs outils est la couleur.

Les couleurs ont différentes significations dans différentes cultures. Comprendre ces différences peut faciliter votre travail. Voici une belle feuille de triche.

Une fois que vous connaissez les couleurs que vous souhaitez (éventuellement) utiliser, voici quelques directives générales lorsque vous travaillez avec des couleurs:

  • Choisissez un schéma de couleurs principal composé de quelques couleurs qui vont bien ensemble. Voici un excellent générateur de couleurs.
  • Choisissez une couleur qui sera votre couleur d’accent – la couleur qui sera utilisée pour les boutons d’action, les boutons d’achat, etc. Fondamentalement, tout ce qui nécessite l’attention de l’utilisateur.

Typographie

Dans de nombreux cas, la typographie est l’endroit où vous gagnez (ou perdez) le jeu de construction de sites Web.

C’est tellement facile d’oublier complètement la typographie et d’utiliser Arial pour tout.

Non recommandé.

De nos jours, travailler avec des polices personnalisées est extrêmement simple, et vous n’avez même pas besoin de faire quoi que ce soit de technique pour activer ces polices personnalisées sur votre site.

La grande et grande typographie est très à la mode de nos jours, et elle facilite également le travail d’un designer – en particulier le travail d’un designer débutant -.

Consultez ce site, par exemple:

bonobos

Avez-vous remarqué quelque chose? Oui, les polices sont énormes et elles ont fière allure!

Voici comment y travailler:

  • En général, chaque conception de site Web a besoin de deux types de texte: rubriques et paragraphes. Dans la plupart des cas, une seule police par.
  • Accédez à Google Fonts – la propre bibliothèque de polices gratuites de Google que vous pouvez utiliser sur votre site Web – et recherchez une police de titre que vous appréciez vraiment..
  • Ensuite, prenez le nom de cette police et recherchez-la dans Font Pair – c’est une bibliothèque de combinaisons de polices prédéfinies qui vont bien ensemble.
  • Choisissez un appariement qui a l’air génial.
  • Notez les noms des deux polices, vous en aurez besoin plus tard.

Le faire de cette façon accélérera votre processus et vous donnera toujours un excellent résultat.

Par exemple, nous avons trouvé une police appelée Bree Serif dans Google Fonts que nous apprécions beaucoup:

Bree-Serif

Ensuite, nous l’avons apporté à Font Pair, et le site a suggéré que Bree Serif se marie bien avec Open Sans. Parfait:

Bree-Serif-open-sans

La structure finale

Enfin, la dernière étape!

L’intérêt de ce chapitre est d’atterrir sur une mise en page / structure finale que vous allez utiliser pour votre site. À ce stade, vous devez être à peu près sûr de ce que vous voulez faire avec votre conception et votre interface utilisateur..

Choses à préparer après ce chapitre:

  • Vos objectifs utilisateur clairement répertoriés.
  • Votre filaire a été revérifié pour vous assurer que ces objectifs ne prêtent pas à confusion..
  • La palette de couleurs sélectionnée.
  • La typographie a compris.
  • L’ensemble de la disposition / structure / organisation de votre site Web.

Lectures complémentaires: 

  • UX Magazine
  • UX Booth
  • La psychologie et l’émotion derrière la couleur dans la conception web
  • Qu’est-ce que la conception de l’expérience utilisateur? Présentation, outils et ressources
  • Fixer des objectifs commerciaux intelligents pour un site Web
  • 8 règles pour créer une typographie efficace

CHAPITRE 4: WordPress, HTML ou modèles?

Décidez de la route à suivre – systèmes de gestion de contenu ou codez-la à partir de zéro

C’est ici que commence le vrai travail sous les capuchons!

C’est aussi probablement la partie la plus effrayante du processus (admettez-le!).

Pour une fois, c’est le bon moment pour mettre de côté le stylo et le papier et commencer à travailler avec certains logiciels.

Et dès la sortie, il y a une tonne de questions…

  • Dois-je apprendre le HTML?
  • Qu’en est-il du CSS?
  • Les modèles de sites Web HTML prêts à l’emploi feront-ils l’affaire pour moi?
  • Dois-je apprendre un langage de programmation comme PHP?
  • J’ai entendu dire que WordPress est le moyen de créer un site ces jours-ci.
  • J’ai vu cette annonce Squarespace Super Bowl. Quoi de neuf avec ça?
  • Comment s’appelle Joomla? Ou Drupal?
  • et ainsi de suite.

La réponse à toutes ces questions est oui.

Comme dans, oui, vous pouvez faire tout ou partie de ces choses, et c’est seulement à vous de décider quel chemin choisir.

Ce que nous essayons de dire, c’est qu’il n’y a pas de meilleure approche n ° 1 ici. Tout dépend de la façon dont vous souhaitez vous impliquer dans le développement Web, de la quantité de bases de création de site Web que vous souhaitez apprendre, de la rapidité avec laquelle vous avez besoin d’un site de qualité et de la personnalisation que vous souhaitez qu’il soit par la suite..

Voici donc comment nous allons procéder à partir de ce chapitre. Première, choisissez le personnage qui vous définit le mieux:

  • une) Je veux savoir de quoi parle le développement web, toutes les bases, tous les rouages ​​internes d’un site web et tous les mécanismes qui font fonctionner un site web.
  • b) Je veux apprendre à utiliser un constructeur de site Web fiable qui va gérer la plupart des tâches lourdes pour moi.
  • c) Je ne sais pas quoi faire. Je veux juste un site web que je peux construire moi-même et qui fonctionnera correctement.

Répondu a)? Allez au chapitre 5.

Répondu b)? Allez au chapitre 6.

Répondu c)? N’hésitez pas à consulter cet article puis à revenir (cela devrait vous aider à sélectionner le chemin parfait):

  • 8 meilleures plateformes de blogs et de création de sites Web examinées… Chaque plateforme est décrite avec ses avantages et ses inconvénients, et la ressource suggère également le meilleur choix disponible (Wix ou SB) pour vos besoins spécifiques.

L’avez-vous lu? Génial! Alors, lequel des personnages ci-dessus vous décrit le mieux – a ou B)?

Les outils qui pourraient être utiles en cours de route:

  • Graphiques: Paint.NET, Gimp, Pixlr.
  • Écriture de code: Notepad ++, TextWrangler, SublimeText.
  • Gestion du travail: Trello.
  • Design: schémas de couleurs, Google Fonts, les outils d’ici.
  • Photographie: Unsplash, AllTheFreeStock

CHAPITRE 5: Introduction à HTML, CSS & Javascript

Comment les sites Web sont une réalité intégrée

Dans ce chapitre, nous allons souligner les rudiments du développement Web, expliquer les termes les plus importants, puis vous envoyer vers des ressources spécifiques où vous pourrez approfondir vos connaissances et compétences..

HTML

HTML est la langue des sites Web. Chaque page Web est créée ou convertie en HTML à un moment donné.

Par exemple, pour voir la structure HTML de ce guide que vous lisez ici, appuyez simplement sur “Ctrl + U” sur votre clavier.

HTML définit chaque bloc que vous voyez sur une page Web. À la fin de la journée, pour afficher quoi que ce soit sur une page Web, elle doit être convertie en HTML.

Pour apprendre le HTML efficacement, nous vous conseillons de vous inscrire à l’un des cours (gratuits ou payants) disponibles sur le Web. Certains des meilleurs peuvent être trouvés sur à Codeacademy ou Treehouse.

Par exemple, voici une section spécifique sur Codeacademy consacrée au HTML et au CSS.

Page d'accueil de CodeCademy

Voilà donc l’approche globale du HTML.

CSS

CSS – pour ignorer les détails techniques ennuyeux – est responsable de styliser tout ce qui est visible sur une page Web.

CSS prend des balises HTML, puis structure et leur ajoute un style. Des choses comme: le texte en gras, les ajustements de couleurs, les ombres, les mises en page, même les animations, se font maintenant principalement avec CSS.

Pour une meilleure compréhension de la façon dont cela fonctionne exactement, passez à ce cours rapide à Codeacademy.

Pour un apprentissage plus approfondi, consultez également les sections CSS sur Codeacademy ou Treehouse.

JavaScript, jQuery, Bootstrap, etc..

JavaScript est un langage de programmation qui vous permet d’introduire des actions dynamiques sur votre site Web. Par exemple, vous pouvez faire des choses comme valider des formulaires Web ou interagir avec l’utilisateur de manière plus rationalisée sans avoir à recharger la page sur laquelle il se trouve. Voici un joli tutoriel de w3schools.

Dans cet esprit, jQuery est une bibliothèque JavaScript qui vous permet de créer des choses avancées avec moins de codage. Très pratique pour un développeur web. En savoir plus ici.

Enfin, Bootstrap est une invention très intéressante. Introduit à l’origine par Twitter, il s’agit essentiellement d’un environnement frontal qui accélère le processus de construction d’un site Web en fournissant la plupart des éléments de site courants déjà prédéfinis. Cela semble compliqué, n’est-ce pas?

Mais ce n’est pas le cas. Jetez un coup d’œil à ce cours de démarrage à Codeacademy (au fait, c’est ainsi que nous avons appris à l’origine Bootstrap).

Choses à préparer après ce chapitre:

  • Fondamentalement, la première version de votre site Web HTML / CSS est entièrement construite. De là, vous pouvez commencer à itérer et à améliorer le résultat final.

CHAPITRE 6: Plateformes de création de sites Web

Vous créez votre premier site? Essayez des plateformes de sites Web gratuites comme WordPress, Joomla ou Drupal

Chapitre 6: Plateformes de création de sites Web

  • SquareSpace
  • WordPress
  • Joomla & Drupal

Il y a plus de constructeurs de sites Web que vous ne pouvez en secouer un. (Si vous êtes le genre de personne qui secoue les choses.)

D’accord, blagues à part.

De toute évidence, si vous n’avez pas le désir d’apprendre à coder les choses à la main, ce sont sûrement de multiples solutions qui peuvent vous aider.

Remarque. N’oubliez pas que tout ce dont nous avons discuté dans les chapitres 1 à 4 s’applique toujours ici. Même si vous optez pour une solution de création de site qui est plutôt pratique, vous devez toujours faire attention à rendre le produit final convivial pour les utilisateurs et en accord avec les objectifs de chacun. Ces outils de création de sites sont exactement cela… des outils.

En commençant par ceux qui sont les plus faciles à saisir:

SquareSpace

La seule plateforme de site Web qui fait de la publicité pendant le Super Bowl.

En bref, une solution très pratique qui peut être utilisée par n’importe qui. Aucune compétence préalable requise.

Il vous permet de créer des sites Web classiques, des blogs, même des magasins de commerce électronique, nous avons même écrit un avis à leur sujet. L’interface et l’ensemble du processus d’utilisation sont assez faciles à saisir, et les gars de Squarespace fournissent de nombreux tutoriels intéressants. Découvrez-les ici.

WordPress

Honnêtement, nous aimons WordPress.

La plupart du temps, c’est la plate-forme idéale pour créer un site Web avec. Il a l’équilibre parfait entre complexité et facilité d’utilisation, et il est fondamentalement personnalisable à l’infini.

Animation WordPress

De plus, c’est actuellement la plateforme de site Web la plus populaire de toutes. Tel que partagé par le créateur de WordPress – Matt Mullenweg – WordPress alimente désormais 25% de l’ensemble d’Internet. Tous ces gens peuvent-ils se tromper?

D’accord, donc pour commencer avec WordPress, vous n’avez besoin que de votre domaine et de votre hébergement. Le logiciel WordPress lui-même est entièrement gratuit.

Pour commencer, n’hésitez pas à suivre l’un de ces chemins:

a) «Le chemin de démarrage rapide»

  • Cliquez ici pour découvrir la manière simplifiée d’installer WordPress et de lancer votre site dans un après-midi.
  • Choisissez un thème gratuit dans le répertoire officiel – assurez-vous qu’il est en accord avec les objectifs de votre site et que la mise en page / design n’est pas loin de la structure souhaitée (vous allez l’ajuster légèrement).
    • Consultez ces deux ressources pour savoir comment personnaliser un thème existant.
    • Alternativement, vous pouvez choisir un thème premium polyvalent qui peut être ajusté via une interface utilisateur pratique (sans codage impliqué). Le thème X est un bon exemple d’une telle chose.
  • Installez certains des plugins les plus populaires et les meilleurs pour obtenir des fonctionnalités supplémentaires.

b) «Le chemin en profondeur»

  • Commencez par apprendre WordPress via un cours en ligne. Treehouse en propose un génial.
  • Choisissez votre thème et vos plugins comme ci-dessus. Alternativement, créez votre propre thème à partir de zéro.

Au final, WordPress est probablement la plateforme de site Web la plus polyvalente du marché. Avec lui, vous pouvez créer pratiquement n’importe quel type de site Web, pas seulement des blogs ou des sites commerciaux simples. Voici une liste de 47 (!) Différentes façons d’utiliser WordPress, juste pour vous faire réfléchir.

Joomla et Drupal

Bien que légèrement différents l’un de l’autre, Joomla et Drupal sont tous deux d’excellents systèmes de gestion de contenu pour des projets Web plus avancés..

Ils ne sont pas très solides en termes de conception, mais ils sont hautement personnalisables et capables de gérer tout type de site Web que vous pourriez avoir dans le plan.

Parfois, selon la complexité de votre projet, ils peuvent nécessiter beaucoup plus de temps à maîtriser et beaucoup plus d’efforts.

Pour une formation plus approfondie, il y a des cours impressionnants sur Lynda.com, à la fois pour Joomla et Drupal.

Choses à préparer après ce chapitre:

  • La première version de votre site Web entièrement construite, peu importe si vous décidez d’utiliser WordPress ou une autre plate-forme.
  • Assurez-vous qu’il est en phase avec vos objectifs initiaux, le public cible et qu’il offre une bonne UX.

CHAPITRE 7: Conception adaptative mobile

Plus de 60% des gens utilisent des téléphones portables et des tablettes pour naviguer sur le Web

La réactivité mobile est désormais un aspect très important de la création de sites Web, probablement plus que jamais..

Voici de quoi traite tout le problème:

Fondamentalement, en ce moment, plus de personnes utilisent des appareils mobiles pour accéder au Web que jamais auparavant. En fait, on estime qu’il y a maintenant plus d’utilisateurs d’Internet mobile que d’utilisateurs d’Internet de bureau (75,1% contre 52,7%).

Mais il y a un problème.

Toutes les conceptions de sites Web ne seront pas optimisées pour être consultées sur les appareils mobiles dès le départ.

Certains problèmes courants incluent:

  • les polices étant trop petites,
  • la disposition elle-même ne s’adapte pas du tout à un écran plus petit,
  • ou la technologie utilisée pour construire le site n’est pas disponible sur mobile.

C’est là que l’idée de réactivité mobile entre en jeu.

Un site Web réactif répond à l’environnement sur lequel il est consulté. S’il s’agit d’un ordinateur de bureau, le site Web s’affiche d’une certaine manière. S’il s’agit d’un mobile, il s’affiche d’une autre manière.

Voici une meilleure explication: Qu’est-ce que la conception Web réactive?

Donc, la chose à faire maintenant serait de vérifier et de vous assurer que votre site Web fonctionne sur les appareils mobiles. Utilisez vos propres appareils pour vérifier cela, mais essayez également le test mobile de Google ou passez à un outil tel que Responsive Design Tester.

S’il y a des problèmes, vous devez les résoudre.

Quelques solutions:

  • Responsive Web Design – comment faire
  • Comment rendre le site Web réactif en environ 15 minutes

CHAPITRE 8: Rassembler le tout

Vous connaissez les bases, maintenant c’est votre tour

Tenez, nous y sommes presque!

Ceci est le dernier chapitre de notre assez long voyage.

À ce stade, vous devriez avoir votre premier site Web construit … Que ce soit avec WordPress, HTML / CSS construit à la main, un créateur de site Web ou tout autre outil que vous avez sélectionné pour le travail.

Bref, félicitations! Mais il reste encore quelques choses à faire:

  • Vérifiez les choses dont nous avons discuté dans les chapitres 1 et 2. Assurez-vous que les objectifs fonctionnent bien pour l’utilisateur final et que le site Web ne prête pas à confusion..
  • Validez votre structure de code via le service de validation de balisage du W3C.
  • Vérifiez s’il n’y a aucun problème de sécurité avec le site. Utilisez le scanner de Sucuri pour cela.
  • Obtenez des commentaires de la communauté. Vérifiez ce que les autres pensent de votre travail. Les forums sur Sitepoint peuvent être bons pour ça.

Si c’est votre première lecture de cette ressource, nous vous encourageons vraiment à y revenir plusieurs fois et à la traiter comme un fichier de référence pour vos études ultérieures..

Comme nous l’avons dit au début, n’hésitez pas à utiliser la table des matières et à naviguer d’un chapitre à l’autre et d’une ressource à l’autre comme bon vous semble.

Enfin, nous sommes curieux… quel est votre plus grand défi en ce qui concerne la création, le développement ou la conception de sites Web? Veuillez partager dans les commentaires ou via Twitter. Nous sommes tous des oreilles!

Merci d’avoir lu, vous êtes génial!

  • Total116
  • Facebook116
  • Twitter0
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map