Compte-rendu atelier : “Les bases de la création d’un site web” par Pierre Facq Le Wagon Nantes

Alors pour poser le décor, Pierre nous annonce que pour construire un site Web, il faut maîtriser 5 ou 6 compétences ! Rien que ça !

• UX
• UI
• CMS
• Développement
• Hébergement
• Analytics

De quoi parle – t-il ?

1- UX pour User expérience :

c’est l’histoire que je veux raconter, c’est le pitch (sans photo ni DA ni couleur !). C’est un travail dans une logique de wireframes : cela permet d’exprimer la représentation du site avant de rentrer dans la décoration (UI). C’est moche mais efficace !

2- UI pour User Interface :

c’est le design visuel du site, c’est à dire la couleur, la typographie et la mise en page. L’UI est construit autour de 5 à 10 composants : images, avatars, boutons, formes, chat, box, barre de menu, cards, dropdown …
Une fois que ces briques applications sont conçues, on pourra les réutiliser dans différentes pages. Quelques ressources intéressantes pour construire votre site :

• Dribbble : c’est la référence en termes d’ UI. On y trouve des éléments d’inspiration visuels, formulaires, loader…
  Calltoidea inspiration
• Codepen.io
  Awwwards.com : tendances sur typo couleur
  Coolors.com
  Producthunt.com : outils de développement et de design très puissant comme support
  Medium : vrai effort design, ils ont même créé leur police ce qui rend le site attractif notamment en termes d’UX.
  Baladez vous ! Vous ne serez pas déçus !

3- CMS :

Il en existe plusieurs dont :

• WordPress : pas besoin de savoir coder (80% du marché)
•  Joomla
• Drupal : il faut savoir coder

Ce sont des environnement opensource
Pour personnaliser Wordrepress, vous pouvez partir des thèmes pré-defini ou bien en trouver d’autre sur themeforest.net. Ils sont pour la plus part payant mais leur personnalisation est bluffante !
Exemple de WordPress : ce CMS suffit si vous trouvez votre thème et que vous n’avez pas besoin de modification.

4- Hébergement :

on l’a déjà vu dans d’autres ateliers, il en existe beaucoup dont OVH à titre d’exemple.

5- Développement

C’est là que cela se complique !
Il existe plusieurs languages dont Html, CSS, javascrip…

Pour faire du développement Html, il faut un bon navigateur chrome ou Firefox plus un éditeur de texte de type sublimtext. Il faut créer un fichier Html (hypertext markup language – language avec des balises) “index.html”, et un fichier CSS (Cascading Style Sheets – des feuilles de styles en cascade), “style.CSS”
On aime les analogies chez les W@n : en fait l’HTML permet de construire la maison, les murs, le toit et ensuite, on pose la déco et le design avec le CSS ! C’est simple 😉

Les incontournables du fichier html sont :

• la balise: les éléments d’intelligence que je ne veux pas afficher mais qui servent aux autres sites (titre, compatibilité, mot clés…)
• la balisequi représente le corps du site les éléments que je veux afficher

Le browser (chrome, firefox, IE) interprète les balises html en regroupante les informations par bloc d’information  d’une manière qui peut être modifiée par le CSS.
Le principe est simple : une balise ouvrante, une balise fermante, le contenu au milieu ! Associé à ces éléments on rajoute des éléments de style grâce au CSS

L’API est une interface utilisée par des programmes pour agir avec une application : pas faite pour l’humain mais pour le programme. Beaucoup des sites utilisent des API. L’intérêt est que cela structure la donnée qui peut ensuite être lue par les moteurs de recherches. Les performances du sites sont accrues grâce aux API.

Exemples d’applications téléchargeables pour enrichir votre site :

• Formulaire Html : formkeep wufoo.com
• Newsletter : mailchimp
• Sondage : typeform, formulaire pour poser plusieurs questions utile pour l’acquisition
• Suivi de l’échange avec l’utilisateur et interaction : Intercom
• outil de paiement en ligne : Stripe
• Github : c’est une plateforme de développement très utilisée par les développeurs pour travailler : s’inspirer, gérer des projets, trouver des réponses…

6-Mesure de performance :

On parle d’analyse de trafics sur un site : les outils les plus courants sont Google Analytics et mixpanel.

Pour terminer : Le Wagon organise des Meetup réguliers (sur inscriptions) et propose une plate-forme en ligne gratuite avec le programme fullstack en 9 semaines.
Si vous êtes intéressée pour apprendre à coder alors RDV sur : https://www.lewagon.com/fr