Utilisation de la plateforme c9.io

Pour travailler sur la création de pages internet (HTML – CSS PHP), nous allons utiliser un service en ligne gratuit : c9.io. Ce site permet de travailler sur un projet à plusieurs et offre de nombreuses fonctionnalités mais il faut au préalable s’inscrire, configurer son environnement de travail et comprendre le fonctionnement de cet outils.

Etape 1 : Inscription sur le site c9.io

Vous devez d’abord renseigner votre email sur l’ordinateur du professeur. Cela vous permettra d’accéder directement à l’espace dédiée à ICN. Rendez-vous ensuite sur votre boite mail et cliquez sur le lien qui vous est envoyé (en anglais).

Cliquez sur le bouton “Create an account”

Renseignez votre prénom et votre nom. Attention, il n’accepte pas les accents

Renseignez ensuite votre nom d’utilisateur. C’est icn suivi de votre prénom et de votre nom, séparé par un “underscore” ( _ en appuyant sur la touche 8)

Mentionnez que vous êtes étudiant (student) et que vous utilisez Cloud9 pour du travail en classe (Coursework)

Vérifiez que vous avez mis le bon nom, bien respecté le nom d’utilisateur (username) et le type de développeur (Developpeur Type)

Avant de créer le compte, vous devez prouver que vous n’êtes pas un robot avec la saisie d’un Captcha

Suivez les consignes du Captcha pour valider

Appuyez sur “Create an account” pour créer le compte

Cliquez sur “Join Team” pour rejoindre l’équipe

Etape 2 : Configuration de l’environnement de travail

Votre inscription est effectuée, il faut désormais configurer votre environnement de travail. Tout est déjà prêt avec celui nommé ICN Mathias qui sera commun à toute la classe, voilà comment procéder.

Pas besoin de créer un environnement de travail (Workspace), il vous suffit de cliquer sur “ICN Mathias” dans la barre bleue au milieu à gauche de l’écran

Cliquez sur “Open” pour ouvrir l’environnement de travail proposé. Vous pouvez noter que cette machine virtuelle sur laquelle vous allez travailler à un processeur, une mémoire vive de 512 Mo et un espace de stockage de 2Go

Par défaut, vous avez seulement un droit en “lecture” sur cet environnement, il faut demander le droit de faire des modifications en appuyant sur la barre verte en haut de l’écran

Demandez l’accès aux modifications en appuyant sur le bouton vert “Request access”

Le professeur a été averti et il devrait vous donner l’accès rapidement. Si ce n’est pas le cas, appelez-le pour lui dire.

Vous êtes presque prêt à travailler, il ne reste qu’à configurer l’affichage. Nous vous conseillons de garder les propositions par défaut.

Vous allez créer un répertoire à votre nom. Pour y parvenir, dans la colonne de gauche, faites un clic-droit sur un fichier puis sélectionnez “New Folder” tout en bas. Pour le nom à donner, utilisez votre nom de famille.

Il faut ensuite créer un fichier. Faites un clic droit sur le dossier qui est à votre nom, puis sélectionnez l’avant dernière option “New File”. Vous nommerez ce fichier index.html (sans majuscules).

La fenêtre du milieu affiche le contenu du votre fichier “index.html”, pour le moment il est vide

Copiez ce petit morceau de code dans le fichier et enregistrer en accédant à cette fonction dans le menu “File” puis “Save” ou plus rapidement avec le raccourci clavier Ctrl + S

<html><body>

<h1>Hello World</h1>

<p>Réalisation en cours de ICN en seconde au lycée Mathias de Chalon sur Saône</p>

</body>
</html>

Etape 3 : Affichage du résultat

Les modifications que vous faites sur les fichiers et dossiers sont directement visibles : il suffit d’enregistrer votre travail (Ctrl + S) et d’afficher ou rafraîchir la page depuis un navigateur web.

Appuyez sur le bouton “Run project” dans la barre en haut. Cela va lancer l’exécution de votre projet pour voir le résultat depuis n’importe où dans le monde.

Dans la fenêtre en bas, le lien d’accès doit apparaître.

Cliquez dessus, puis sur “Open” et une nouvelle fenêtre va s’ouvrir. D’un côté vous allez modifier le document, de l’autre vous verrez le résultat de vos modifications via le navigateur web.

Voilà le résultat : on retrouve la même structure que dans notre environnement avec les fichiers et dossiers. Cliquez sur le dossier qui porte votre nom et vous allez voir le résultat de la page index.html que vous avez édité précédemment.

Lorsque vous faites des modifications, pensez à les enregistrer par le menu “File” puis “Save” ou encore “Save All” ou plus rapidement avec le raccourci clavier Ctrl + S. Pour voir les modifications, allez sur la page de résultat et appuyer sur la touche F5 pour rafraîchir la page.

La page actuelle est trop basique, utilisez le code suivant en tant que trame de vos prochains documents.

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Page Exemple ICN</title>

    <!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

 //// Votre contenu est à placer ici

 </body>
</html>

Etape 4 : Quelques ressources

Il est impossible de tout savoir en informatique, il est important d’apprendre à travailler en utilisant des ressources. Voilà une liste de quelques ressources qui peuvent vous être utile pour découvrir les possibilités du langage HTML (et CSS). N’hésitez pas à les consulter, faire des recherches sur Google et demander au professeur pour expérimenter les bases du langage HTML.

A retenir : Le HTML est un langage à balise. Une balise s’ouvre <> et se ferme </>. Ce qui se trouvera entre sera formaté selon la balise utilisée. Par exemple la balise <u> pour souligner, <i> pour italique, <b> pour mettre en gras ou encore les titres avec les balises <h1>, <h2>, etc… Attention, il existe des balises spécifiques qui s’ouvrent et se ferment en une fois et qui mixent la syntaxe de base, par exemple <br/> pour revenir à la ligne ou <hr/> pour mettre une barre de délimitation.

Travail à faire : Faire quelques tests de balises sur votre page index.html pour prendre en main l’outils et avoir quelques repères avant de vous lancer à l’étape 5.

Etape 5 : Qui êtes-vous ?

A l’aide d’un navigateur, allez dans le dossier NomPrenom et regardez le résultat. Vous allez devoir réaliser la même page en adaptant le contenu.
Retourner dans l’environnement de travail, ouvrez le fichier index.html qui est dans le répertoire NomPrenom et copiez l’intégralité du code HTML présent sur cette page.
Allez dans votre dossier, remplacez le code existant par celui que vous venez de copier puis sauvegardez.
Dans le navigateur, allez dans votre répertoire, vérifier que ces modifications sont bien prises en compte.
Modifiez le code HTML pour créer votre page d’accueil selon vos envies, tout en respectant le modèle imposé.

← Previous Leçon