Support de cours programmation web

• En ligne sous: https://cours-web.ch
• Code disponible sous: https://github.com/coursweb

Ceci est un support de cours, visant à accompagner l'apprentissage de la programmation web. Les matières traitées sont: le langage HTML, les styles CSS, la conception de sites avec WordPress.

Ce support de cours accompagne entre autres les cours donnés à l'Eracom (Lausanne), à l'Ecole d'Art Appliqués de La Chaux-de-Fonds, ainsi que les modules de formation du Collectif WP (Genève).

Les contenus de ce support de cours sont mis à disposition sous les termes de la licence CC-BY-SA (la même licence que Wikipédia).

Vous êtes donc invités à l'utiliser librement, y compris dans un contexte professionnel et commercial, à condition de respecter la licence.

Le code du thème Jekyll (dérivé de Minima) est mis à disposition sous la licence MIT.

Les corrections et améliorations sont les bienvenues, et se font par l'intermédiaire du système GIT. Les chapitres HTML, CSS et WordPress sont des "repositories", que vous pouvez cloner, forker, compléter et proposer à la publication.

Les contenus sont rédigés en syntaxe Markdown.

Les auteurs et contributeurs sont:

• Manuel Schmalstieg – artiste, développeur et enseignant.
• Des élèves des classes de graphisme de l'Eracom.
• ...

Ce site est construit avec Jekyll, un générateur de sites. Il utilise le thème de base de Jekyll, avec de petites modifications.

La plus importante modification concerne le menu. Le code se trouve dans _includes/header.html.

Le code du menu de niveau 2 se trouve dans _includes/nav-second.html.

Pour faire tourner le site en local, il faut d'abord installer Jekyll.

Comme ceci: https://jekyllrb.com/docs/installation/

sudo gem install jekyll

Et:

sudo gem install bundler

Une fois que c'est fait, naviguer avec le terminal dans le répertoire du site, puis exécuter la commande suivante:

bundle exec jekyll serve

Si cela fonctionne, le terminal vous indiquera l'URL pour accéder au serveur, p.ex. http://127.0.0.1:4000/

Le terminal retourne ceci:

-bash: /usr/local/bin/bundle: /System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/ruby: bad interpreter: No such file or directory

Cela signifie que certaines composantes de Ruby (langage utilisé par Jekyll) ne fonctionnent plus, car elles font appel à une ancienne version de Ruby (qui a été mise à jour avec le système MacOS). La solution consiste à mettre à jour les composantes (Gems), avec ces commandes:

gem install bundler
## et ensuite:
bundle install

Cela va réinstaller tout ce qui est nécessaire à Jekyll - voir la documentation pour plus de détails.

Mettre à jour Rubygems:

sudo gem update --system

Mettre à jour Jekyll et les "gems" incluses:

sudo bundle update

Styles SASS/CSS et couleurs...

Il faut:

1. Ajouter les fichiers dans le dossier _sass.
2. Spécifier les noms des fichiers ajoutés dans css/main.scss, sous @import.

Ils sont définis également dans css/main.scss.

À la base il y en a deux:

• $on-palm: 600px;
• $on-laptop: 800px;

Cette couleur est définie par la variable $grey-color, elle-même définie dans css/main.scss

Après des modifications de CSS, comment veiller à ce qu'elles soient appliquées?

Ce n'est pas automatisé, c'est fait "à la main", dans le fichier _includes/head.html : une variable est ajoutée après main.css (qui est le fichier contenant tout le CSS compilé).

Oui, avec cette méthode: https://kramdown.gettalong.org/syntax.html#attribute-list-definitions

Exemple: dans cours-javascript/400-javascript.md on ajoute une classe (.large-image) à des images de grande taille, pour conserver leur lisibilité. On ajoute donc le code {:id: .large-image} à la suite de la balise image.

Problème: cela ne fonctionne pas pour les paragraphes, listes, etc.

Solution: voici l'astuce employée pour créer une grille de "cartes" à partir d'une liste de liens (p.ex. dans Git-Workflow): on précède la liste par un <div class="cards"></div>.

Dans js/coursweb.js, on donne une classe et des styles spécifiques à la liste qui suit cette balise.

Opération à faire lorsqu'un nouveau chapitre (dossier) est ajouté:

• modifier _config.yml (code "chapters"). C'est tout! :)

Important:

• Pour le premier article d'un chapitre, l'URL (permalink) doit obligatoirement être de un niveau - c'est sur la base de ce critère qu'est généré le menu.
• Le code indiqué dans "chapters" doit correspondre à ce qui est dans le permalien (sinon le menu de 2ème niveau ne sera pas généré).

Le menu de navigation principal, affichant les chapitres, se trouve dans _includes/nav-primary.html.

Le menu de 2e niveau se trouve dans nav-second.html.

La page d'accueil, qui montre les chapitres sous form de blocs, est produite par le fichier index.html

Il est possible de consulter les chapitres en mode "diaporama".

Le code JavaScript qui déclenche ce mode se trouve actuellement dans _includes/script.html.

Les styles CSS agissant sur le diaporama sont inclus dans _includes/head.html (car toutes les feuilles de style externes sont supprimées lors du basculement en mode "diaporama").