H2 - P2019

Développement web

Cours 01 - 2014-09-28

Organisation

Sublime Text

http://www.sublimetext.com/

Avantages

  • Léger
  • Fiable
  • Grosse communauté
  • Personnalisable

Alternatives

Plugins

Premier plugin à installer : Package Control

Facilite l'installation de nouveaux plugins

Installation Package Control

  • Aller à cette adresse
  • Copier le code de l'onglet Sublime Text 3 ou Sublime Text 2
  • Lancer Sublime Text
  • Aller dans View > Show console
  • Coller le code et faire ENTRER
  • Relancer Sublime Text (pas obligatoire)

Installer un plugin

  • Faire CMD/CTRL + SHIFT + P
  • Taper install
  • Faire ENTRER
  • Taper le nom du plugin

Quelques plugins

Plus difficile à installer

Templates

Afin de gagner du temps, nous allons créer des templates

À chaque nouvel exercice nous utiliserons l'un d'entre eux

  • Créez un dossier qui contiendra tous les sites que vous allez développer (si ce n'est pas déjà fait)
  • Dedans, créez un dossier templates/
  • Dedans, créez un dossier 01/
  • Dedans, créez trois fichiers
    • index.html
    • style.css
    • script.js

/!\

Si vous êtes sur Windows, affichez les extensions de fichiers


├── sites/
    └── templates/
        └── 01/
            └── index.html
            └── style.css
            └── script.js
        └── 02/
            └── ...
        └── 03/
            └── ...

index.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    Hello world
    <script src="script.js"></script>
</body>
</html>

style.css


body {
    background:#eee;
    font-family:Helvetica,Arial;
    font-size:14px;
}

script.js


console.log('Yo');

Il ne vous reste plus qu'à glisser/déposer le dossier dans Sublime Text pour avoir accès aux templates et aux exercices dans la sidebar