Cet été je code avec HelloMentor et Le Wagon

By 24 juin 2014Chroniques
8
Semaines
200
Etudiants
2
Profs

PROLOGUE

 

Il y a un an déjà, je participais aux sélections de l’école 42. Cette année, je tente une nouvelle aventure que je raconte semaine après semaine, encore dans le domaine de la programmation, mais cette fois-ci pour apprendre d’autres langages informatiques, ceux du web !

Cet été je code !

HelloMentor (site de cours particuliers à distance) et Le Wagon (école de programmation destinée aux entrepreneurs) organisent conjointement une formation de 2 mois cet été : 8 semaines pour apprendre à coder son site web. Une formation à base de cours vidéo, d’exercices interactifs et de cours particuliers par visioconférence.

PROGRAMME

Partie 1 : Les bases de HTML 5

// Installer son environnement de développement

// Créer et structurer son premier fichier HTML

// Balises, images, tableaux, etc…

// Coder sa première page !

Partie 2 : Les joies de la mise en forme avec CSS

// Découvrir CSS (classes, sélecteurs, etc..)

// Styliser sa page avec CSS

// Formater un texte, ajouter couleurs, fonds, bordures ou ombres

// Découvrir l’outil Bootstrap.

Partie 3 : Enrichir son site

// Ajouter des médias (vidéosYoutube, playlists SoundCloud, etc..)

// Créer de l’interaction (formulaire, questionnaire, commentaires, etc..)

// Ajouter des flux Facebook et Twitter

// Intégrer une carte sur son site avec Google Maps.

Partie 4 : Bien référencer son site

// Mettre son site en ligne

// Personnaliser son nom de domaine (URL)

// Optimiser son référencement naturel

// Suivre le trafic sur son site avec Google Analytics.

SEMAINE 1

Cet été je code s’apparente un peu un MOOC, même si les formateurs ne le revendiquent pas en tant que tel. Des similitudes donc : l’apprentissage se fait en ligne, sur une durée de 8 semaines, un forum est placé au coeur de la plateforme, où apprenants et enseignants répondent aux questions des uns et des autres, et où s’ajoutent progressivement les vidéos de cours.

J’ai des bases de HTML mais pas de CSS, la formation (qui s’inscrit un peu dans la logique d’un MOOC) me parait donc intéressante pour aborder ces langages de façon progressive et ludique. Ce sont, à mon sens, les langages informatiques les plus simples à apprendre et ils constituent selon moi une porte d’entrée idéale vers le monde du code pour les néophytes complets. D’autant plus que le rythme est plutôt agréable à suivre, surtout si l’on a une activité professionnelle ou autre à côté : 2 vidéos d’environ 10-15 minutes par semaine et quelques exercices.

On a commencé par installer les outils indispensables aux développeurs web : Sublime Text (terminal duquel nous coderons pendant les 8 semaines) et Chrome (navigateur qui permet d’inspecter le code des pages web).

Les premiers exercices qui ont suivi étaient simples : découvrir Sublime Text et se familiariser avec la création d’une arborescence de fichiers et de dossiers (qui servent à prendre de bonnes habitudes de développeurs : à bien nommer, catégoriser et ranger proprement toutes nos créations lorsque l’on code une page HTML).

Nous avons ensuite découvert ce que permet de faire Chrome. Je savais que le navigateur permettait d’accéder au code d’une page web (‘clic droit’ > « Procéder à l’inspection de l’élément ») mais je ne savais pas qu’il était possible de jouer avec et de modifier des éléments comme les couleurs, les polices de caractères etc.

Voici un exercice que l’on a eu à faire : changer la couleur du bandeau Facebook.

Une introduction assez ludique qui permet de comprendre de façon intuitive comment fonctionnent le HTML et le CSS, ce qui nous a permis de passer rapidement à un exercice plus concret : coder nos premières pages HTML. La structure (ou le squelette) d’une page HTML et les balises qui permettent de mettre en forme du texte (gras, italique, centré, tableau, etc…) s’assimilent assez rapidement, car encore une fois, il s’agit d’un langage très intuitif.

Un jeu d’enfant !

Il est vrai que le rendu n’est pas très esthétique car il manque la couche de CSS (mise en style : ce qui permet de créer le design d’une page web), mais c’est tout de même très agréable d’observer directement les résultats de ce qu’on l’on fait : on code un fichier HTML dans Sublime Text, que l’on ouvre ensuite dans un navigateur, cela permet de voir directement ce que l’on vient de coder, et donc incidemment de voir quelles erreurs ont été faites, qu’est ce qui peut être amélioré etc.

ToolBox

SEMAINE 2

J’ai bien aimé cette semaine car on est rentré dans le design, la partie qui m’intéresse le plus. C’est avec le CSS que l’on peut donner du style à une page codée en HTML. En effet, lorsque l’on code en HTML, des critères et éléments de design sont définis par défaut :

– police Times New Roman

– couleur de texte : noir

– couleur d’arrière plan : blanc

C’est donc peu abouti en termes de design et pas très joli. Le CSS permet donc de pimper un peu tout ça. On a donc pu apprendre à :

– installer une police de caractère plus originale

– changer les couleurs de texte et de background

– mettre une image ou une texture en arrière plan

– changer les tailles de caractère

– changer la forme des images, y ajouter une ombre, une bordure…

– attribuer une animation à un texte ou un objet au passage de la souris

– styliser les bullet points des listes

Design Tips

Au passage, on nous donne chaque semaine quelques conseils de design que j’ai envie de partager !

Couleurs

Jamais complètement noir ou complètement blanc mais jouer avec la palette de dégradés.

 

Polices

Préférez les polices de caractères sans-serif (sans empatement). La basique que tout le monde a : « Arial ». Ou encore « Helvetica Neue », police préférée des designers en général (pas que web).

HelveticaNeue

* UltraLight que j’aime beaucoup est utilisée par Apple et Orange notamment

ToolBox

J’ai aussi envie de partager chaque semaine les sites et outils incontournables à utiliser sans modération en Web Design :

  • Polices originales : Google fonts
  • Couleurs harmonieuses et assorties (choix de palettes) : Kuler
  • Trouver le code RGB ou hexadécimal d’une couleur en live sur une page : Colorzilla
  • Icônes et Pictogrammes : thenounproject
  • Police d’images : Fontawesome ! Super pratique pour les icônes de réseau sociaux par exemple.
  • Dictionnaire des propriétés CSS

SEMAINE 3

Cette 3ème semaine nous a permis d’aborder des notions plus avancées de HTML et de CSS qui permettent de structurer et de styliser une page web avec plus de finesse. En effet, la semaine dernière, on avait vu comment attribuer des paramètres à des éléments (donner une police au texte, rendre les images rondes). Mais ces sélecteurs n’étaient pas assez fins car affectaient tous les éléments concernés. Des problèmes surviennent alors :

– comment affecter un paramètre précis à un élément unique ? (par exemple donner une couleur spécifique à un seul titre et non pas à tous les autres titres de la page web).

– comment affecter un paramètre précis à un catégorie d’éléments ? (par exemple arrondir seulement les photos des membres du staff et non pas les autres images sur une page web).

Les fonctions « id » et « class » nous ont donc permis de personnaliser beaucoup plus nos pages web en construction. Une belle avancée pour nous en termes de design !

Une fois que l’on a vu ça, on se sent mieux mais on réalise que l’on reste encore bloqué sur un détail… En effet, pour l’instant, les différents éléments HTML se succèdent selon la chronologie du code. Comment faire alors pour positionner sur la page web des éléments de façon indépendante (et non pas de façon linéaire / verticale) ? C’est la fonction

qui nous permet de regrouper différents éléments dans des containers :

containers

Une fois les containers créés, il est beaucoup plus simple de jouer sur l’espacement entre les différents éléments d’une page web, car on peut également affecter des fonctions aux containers eux-mêmes (couleur de fond, bordures, marges, etc.).

Cette semaine a été, je trouve, plus light d’un point de vue quantitatif (1 seule vidéo) mais riche qualitativement car fondamentale pour ‘esthétiser’ le rendu de nos pages web… et surtout pour aborder le prochain outil : Bootstrap.

Design Tips

Aérez le contenu des différents éléments d’une page web en décalant le contenu des bordures (haut/bas/gauche/droite) grâce aux paramètres de marge intérieure, appelé « Padding », et extérieure, appelé « Margin » :

padding-box-model

ToolBox

SEMAINE 4

Le moment est venu de présenter Bootstrap ! Une librairie CSS développée par Twitter et largement utilisée par toutes les start-ups web… Et je comprends pourquoi : Bootstrap nous montre comment démarrer un projet avec le bon squelette HTML et propose une documentation très complète en ligne, dans laquelle piocher une multitude de composants (barre de navigation entre plein d’autres) qu’il suffit de copier/coller dans notre code HTML…

> Depuis Bootstrap, commencez par copier/coller le squelette HTML (aussi appelé le « Boiler plate ») dans la rubrique « Basic template » de l’onglet Getting Started

BoilerPlate

> Cherchez ensuite les composants qui vous intéressent (menus déroulant, boutons, icones, barres de progression…) dans l’onglet Components à copier/coller dans le body de votre HTML

> Vous pouvez ensuite customiser les différents éléments choisis (changer les noms des onglets de la barre de navigation par exemple pour y mettre ce dont vous avez besoin).

Design Tips

  • Lorsque vous êtes en train de « customiser » un bout de code que vous avez copié/collé depuis Boostrap dans votre HTML, faites attention à ne pas aller trop vite, risquant de « casser » la structure du code initial (sans quoi il ne fonctionnera plus). Pour éviter cela, testez régulièrement et progressivement le résultat sur votre navigateur.
  • Bootstrap est une librairie de prototypage rapide, elle permet donc pendant un temps de laisser de côté le CSS car elle fait beaucoup de choses et très rapidement à la place de CSS, inutile donc de s’embêter. Comme on dit : « Bootstrap comes first. CSS comes second » ^^. L’idéal c’est donc de :
  1. coder la maquette de son site 100% Bootstrap, sans une seule ligne de CSS personnel ;
  2. puis, une fois la maquette terminée, customiser certains composants du Bootstrap avec vos propres règles CSS (les couleurs par exemple, ne serait-ce que pour respecter la charte graphique que vous avez choisie) == ce que l’on verra la semaine prochaine !

ToolBox

  • Librairie CSS développée par Twitter : Bootstrap

SEMAINE 5

Cette semaine nous avons appris à nous servir du système de grille Bootstrap. Ce système nous permet de juxtaposer du contenu au sein d’une grille « imaginaire », et de faire varier les ratios pour une customisation des plus totales :

bootstrap-1170

Un exemple avec un élément concret, par exemple des images (je prends pour exemple celle de cet été je code) avec différents ratios de grille…

Tout est donc possible :

1/6 + 5/6 ;

1/5 + 3/5 + 1/5 ;

etc, etc…

Allez faire un tour sur le site de Hello Mentor qui utilise le système de grille de Bootstrap et observez comment les différents éléments sont répartis !

Ce système nous permet par ailleurs de rendre nos sites web « responsive », autrement dit adaptables à tout type d’écran (smartphones, tablettes, ordinateurs…) car on peut définir et ajuster la façon dont s’affichent nos éléments en fonction du device utilisé.

Design Tips

Faire varier les ratio de grilles en fonction des contenus sur une page web.

ToolBox

  • Le système de grille Bootstrap
  • Un thème WordPress qui utilise nativement un système de « grid » : Salient
  • Un outil pour retrouver toutes les différentes tailles d’écran : Screen Sizes

SEMAINE 6

Cette semaine : initiation à GitHub ! Petite nostalgie car je retrouve quelque chose que j’ai découvert à 42, pendant la piscine l’été dernier…

GitHub est un service en ligne qui vous permet d’héberger en autres vos projets web. Git Hub est composé du mot « git » qui fait référence à un système de contrôle de version open-source et du mot « hub » qui fait référence au réseau social qui s’est construit autour du système « git ».

En fait lorsque l’on code pour du web, on ne code pas forcément directement depuis/sur une page internet : on code en réalité depuis un terminal (logiciel) que l’on a installé sur son ordinateur, donc offline. Ce code il faudra ensuite l’ « envoyer » sur internet (étape intermédiaire : c’est à cela que sert GitHub) avant d’installer ce code sur le site web (URL) que l’on aura choisi en achetant un nom de domaine.

Pour résumer :

étape 1 : on installe un terminal sur l’ordinateur (dans notre cas ici c’est SublimText) qui va nous permettre d’écrire des lignes de code, offline.

étape 2 : on y code nos fichiers .html et .css pour notre projet web.

étape 3 : on « commit »* régulièrement notre code avec GitHub. Il s’agit + ou – d’une sauvegarde intermédiare du projet : on prend « une photographie » du projet à chacune des étapes de la programmation. En effet, on ne code pas un projet en une fois, cela permet donc de sauvegarder notre code en l’état avant d’y apporter des modifications le lendemain par exemple. Tous les changements sont gardés en mémoire sur GitHub : les lignes supprimées restent visibles mais sont surlignées en rouge et celles ajoutées le sont en vert. Ce que cela vous permet de faire c’est de revenir en arrière par exemple ou de voir à quoi ressemblait votre code plusieurs jours auparavant. Vous suivez l’avancement de votre projet étape par étape.

étape 4 : on « push »* notre code sur internet. On envoie le code sur internet (avec les options privé/publique au choix).

* vocabulaire utilisé sur GitHub.

étape 5 : on achète un nom de domaine (URL) pour y déposer notre projet. Il est bien sûr à ce stade toujours possible de modifier notre code, d’apporter des changement au projet via GitHub.

ToolBox

  • Le service web d’hébergement de sites internet et de gestion de développement de logicielsGitHub

SEMAINE 7

Semaine courte mais primordiale : achat d’un nom de domaine sur OVH + redirection du site web que l’on a codé sur notre url personnalisée.

Une vidéo de cours cette semaine pour nous montrer comment il faut procéder si l’on veut acheter un nom de domaine sur OVH, étape par étape, avec les spécificités qui concernent la particularité du .fr et tout ce que l’on a besoin de savoir. Une fois acheté et configuré, on nous a expliquer comment créer une redirection d’email nous permettant d’avoir une adresse mail pro de type contact[at]nomdedomaine.com ; un détail très important et très utile à connaître dans les fonctionnalités d’OVH.

Enfin, on nous a montré comment rendre accessible le site web (que nous avons chacun déployé sur github-pages) sur notre URL customisée.

ToolBox

  • Le service web d’hébergement internet, cloud et serveurs dédiés OVH

SEMAINE 8

Dernière semaine de Cet été je code ! Une dernière semaine qui nous a permis d’ajouter la touche essentielle à tout site web : l’intégration de services externes qui permettent de le rendre dynamique. Une newsletter par exemple, des formulaires de contact, ou encore une carte interactive. Une semaine un peu plus relax car qui ne demande pas de savoir coder en langage backend puisqu’il suffit d’intégrer les codes de ces outils (formulaires, newsletter, etc;) que l’on aura customisé via des services externes : grosso modo, il s’agit de copier-coller dans nos fichiers du code pré-structuré à l’avance, et selon plusieurs modèles et templates, qu’il suffit simplement de personnaliser pour qu’il colle à ce que l’on veut en faire !

Nous avons aussi appris à créer d’autres pages. En effet, depuis le début de cet été je code, nous codons exclusivement la page d’accueil du siteweb. Il s’agit donc de créer pour chaque nouvelle page, un fichier .html dans notre dossier, tout en prenant garde de conserver la structure initiale (le même habillage qu’en page d’accueil : le header, dont le menu notamment), histoire de garder une cohérence graphique qui plaise à l’oeil.

Enfin, un élément primordial : travailler son référencement de son site (sa remontée dans les pages de résultats Google) et analyser son trafic !

ToolBox

  • Le service générateur de formulaires : Wufoo
  • Le service de newsletter : MailChimp
  • Le service de templates et générateur de cartes de géolocalisation : Snazzy Maps
  • Le service de suivi de trafic : Google Analytics

Epilogue

Je suis ravie d’avoir suivi cette formation que j’ai trouvée bien construite d’un point de vue pédagogique. Elle est vraiment accessible à tous et idéale pour quiconque souhaite se mettre à coder. Je la conseille à tous ceux qui n’ont jamais codé et qui ont envie / besoin d’apprendre à réaliser un site web. En quelques jours de formation et un peu de travail, tout le monde en est capable. L’enjeu ensuite se situe davantage dans la capacité à obtenir un résultat esthétique. Ce n’est pas tout de savoir coder… De mon point de vue, il faut essayer le mieux possible de développer en parallèle des compétences en design ! Le design c’est large mais cela peut aller du graphisme pur à l’expérience utilisateur. Et je crois que c’est fondamental aujourd’hui.

  • Christophe

    Laurène, tu donnes envie de……. coder! 🙂 Fais-moi savoir quand le compte-rendu de la 3e semaine est disponible. Bonne continuation 🙂

  • Pour créer des icônes, j’utilise beaucoup « iconion »! Très simple à utiliser, et plein d’icônes potentielles.

  • Sarah M

    J’adore la photo 🙂