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

Mercredi 28 juin nous avons eu la joie d’être accueillies au DOJO Nantes par Le Wagon qui propose des formations de développeurs web à Nantes, rapides (9 semaines!), efficaces, comme on aime !
Le thème de l’atelier était : « Les bases d’un site Web » par Pierre Facq.

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 !

wireframe

wireframe

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 <head> : les éléments d’intelligence que je ne veux pas afficher mais qui servent aux autres sites (titre, compatibilité, mot clés…)
  • la balise <body> qui 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

Divers tableaux de motivation au Dojo Nantes

les messages de motivation du Dojo Nantes

comment un site web est construit

Comment marche un site web

Les CMS les plus répandues

Les CMS les plus connus

Exemples d'API

Exemples d’API

La syntaxe du code en CSS

la syntaxe de code CSS

La syntaxe du code en html

la syntaxe de l’html

La base d'un fichier html

Les bases d’un fichier html

Principe d'un site dynamique

2 personnes ont dit sur “Compte-rendu atelier : « Les bases de la création d’un site web » par Pierre Facq Le Wagon Nantes

  • par vachon -

    Attention il y a quelques fautes non négligeables dont le site teamforest.net, c’est themeforest.net
    Mais merci pour ce retour 🙂

  • par Virginie Rezé -

    Oups, merci Stéphanie pour la remarque. C’est rectifié 😉 !

Laisser un commentaire

Votre e-mail ne sera pas publié. Les champs requis sont marqués *

Time limit is exhausted. Please reload CAPTCHA.

Vous pouvez utiliser ces tags et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>