ISCOM::HTML/CSS::session1 (20140930)

Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52 1

Cours HTML / CSSLearn to code

HTML/CSS easily

http://www.nicolasaguenot.com

mailto:[email protected]?subject=KEYNOTE::Votre%20Pr%C3%A9sentation

Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52

Cours HTML / CSS

• 6 Sessions de ~3 heures > ~18 heures au total,

• A chaque sessions aura des objectifs à atteindre pour pouvoir continuer à la prochaine session,

• 30% de théorie et 70% de pratique,

• Finalité : Monter un site en HTML / CSS responsive,

• En bonus, utilisation d’outil de versioning

2




Me, myself and I• Développeur web indépendant,

• 5 années d’XP en agence web Lyonnaise, 1 an 1/2 d’XP en indépendant,

• Travaille sur des projets nationaux et internationaux pour des marques (presque) connues de tous,

• Membre de la communauté eZ Publish (sujet passionnant dont vous m’entendrez parler durant les différentes sessions),

• Réelle expertise sur les CMS/CXM d’un point de vue technique et gestion de projet,

• Grosses compétences en intégrations HTML / CSS,

• Me suivre : @nicolasaguenot | +nicolasaguenot

3



https://twitter.com/nicolasaguenot

https://plus.google.com/+NicolasAguenot


Outils de versioning

4




GIT vs SVN #15




GIT vs SVN #26




GIT vs SVN #3

• Outil permettant de gérer un projet à plusieurs personnes,

• Outil permettant d’avoir des développements à jour,

• Outil permettant d’avoir un historique des modifications effectuées…

• … et par conséquent de revenir en arrière si on a fait une erreur…

7




Why GIT ?

8




Why GIT ?

• On ne copie pas un fichier ou un dossier mais une partie de l’information encodée,

• Plus simple et plus rapide à prendre en main,

• Process de branches pouvant être utilisé au maximum.

9




Créer un repository GIT en 4 étapes

10




GIT #Step1On créé son compte sur github http://www.github.com Nom de compte : icom-[prenom][nom] Exemple : icom-nicolasaguenot

11



http://www.github.com


GIT #Step2On choisit le plan que l’on souhaite. Choisissez le plan « free » et cliquez sur « Finish sign up »

12




GIT #Step 3 - Welcome to Github!13




GIT #Step 4- Création d’un repository : icom-htmlcss !

- Repository Public, - On ajoute un README, - Sans .gitignore, - Sans licence,

14







GIT : Tips and tricks

16




GIT : Tips and tricks

• Github fonctionne à partir d’un logiciel ou à partir de lignes de commandes…

• …. nous allons l’utiliser à grâce aux lignes de commandes,

• Par défaut, on est sur une branche nommée « master ».

• Les mots communs lorsqu’on utilise GIT : clone, add (-p), commit, push, pull, branch, checkout

• On peut récupérer le lien d’un repo GIT à cloner à partir du champ sur la droite

17




GIT : Tips and tricks• Git clone : On récupère un repository

• Git status : On regarde si des éléments sont prêt à être envoyé au repository

• Git add : On ajoute un élément

• Git add -p : On ajoute une partie d’un fichier

• Git commit : On met en mémoire ses éléments

• Git push : On envoi ces éléments au repository

• Git pull : On récupère les éléments du repository,

• Git branch : On créé / consulte les branches,

• Git checkout : On change de branche

18




Vous voulez en savoir plus

sur GIT ? Consulter ce site : https://www.atlassian.com/git/tutorials/

19



https://www.atlassian.com/git/tutorials/


GIT et le projet

• Création d’une branche par session (session1, session2, session3, …),

• On ajoute régulièrement nos modifications avec des messages clairs (les messages sont visibles),

• Avant de finir la session, on pense à finaliser ces éléments et on les push.

20




Comment organiser son projet ?

21




Comment organiser son projet ?• Chaque projet contient :

• Des images :

• Dans un répertoire images/

• Chaque type d’images se trouve dans un dossier (exemple : header/, footer/, homepage/, …)

• Des fichiers CSS :

• Dans un dossier stylesheets/

• Un fichier pour les éléments globaux, un fichier pour les éléments du type de page (global.css et style.css par exemple)

• …

22




Comment organiser son projet ?• Des fichiers Javascript :

• Dans un dossier javascript/

• Un fichier pour les éléments globaux, un fichier pour les librairies externe par exemple.

• Des fichiers HTML :

• A la racine du projet,

• Un fichier par page.

23




Comment organiser son projet ? Arborescence type

24




GIT Branch « session1 »• On se place sur son dossier :

cd /YOUR/PATH/TO/YOUR/REPO

• On contrôle les branches existantes :

git branch -v

• On créé sa branche :

git branch session1

• On contrôle si la branche a bien été créée :

git branch -v

• On change de branche :

git checkout session1

25




Premier commit• On ajoute les fichiers sur cette branche :

git status git add et git add -p

• On commit ses changements (avec un message) :

git commit -m ‘My first commit’

• On envoie les éléments sur le repo :

git push

26




HTML : Les bases et balises

27




HTML : Les bases• HTML = HyperText Markup Language,

• Langage qui permet de formater les données pour représenter les pages web.

• Permet de monter une page web simplement avec des balises de type <div>…</div>.

• On trouve du HTML dans toutes les pages web, c’est la base du web et de la génération de pages lisible à partir d’un navigateur,

• Les données doivent être structurées en utilisant les bonnes balises au bon endroit.

• Chaque balises peuvent contenir des attributs très utiles pour les styles :

• <div class=‘…’ id=‘…’ my-attr=‘…’> …… </div>

28




HTML : Les bases

• Une page contient une tête et un corps (un head et un body).

• Le head va contenir les informations permettant de référencer un site, les feuilles de style, les fichiers javascript.

• Le body contient le contenu et les balises des pages.

29




HTML : Les balises• Les titres :

• Les titres ont des balises allant de <h1>…</h1> à <h6>…</h6>

• Il ne doit y avoir qu’un seul <h1> … </h1> par page, les autres balises peuvent être dupliquées.

• Les éléments textuels :

• On englobe un paragraphe par un <p> … </p>,

• On englobe un texte en gras par un <strong> … </strong> ou un <b> … </b>,

• On englobe un texte en italique par un <em> … </em> ou un <i>…</i>,

• On englobe un texte souligné par un <u> … </u>,

• Les éléments doivent être englober par des <div> … </div>.

30




HTML : Les balises• Un lien doit être déclaré comme suit : <a href=‘mon-lien.html’ title=‘mon title’

target=‘self|blank’>…</a>,

• Les éléments doivent être englober par des <div> … </div> (pour les blocs) et par des <span>…</span> (pour les éléments en ligne),

• Une liste à puce peut être :

• Ordonnée (ol) : <ol> <li> … </li> <li> … </li></ol>

• Désordonnées (ul) : <ul> <li> … </li> <li> … </li></ul>

• Une image est chargée à partir de <img src=‘…’ alt=‘alternative text’ />

31




HTML : Les balises• Un formulaire est créé à partir de <form action=‘…’ method=‘POST|GET’> … </form>

• Il peut contenir :

• Des champs texte : <input type=‘text’ name=‘my-input-text’ value=‘…’ placeholder=‘My default text’ />

• Des champs mot de passe : <input type=‘password’ name=‘my-input-password’ value=‘…’ />

• Des champs email : <input type=‘email’ name=‘my-input-email’ value=‘…’ placeholder=‘My default email’ />

• Des blocs de texte : <textarea name=‘my-textarea’> … </textarea>

• Des champs de sélection : <select name=‘my-select-field’><option value=‘1’>Option 1</option> <option value=‘2’>Option 2</option> </select>

• Envoyer son formulaire : <input type=‘submit’ name=‘submit’ value=‘Send’ />

32




HTML : Les balises La liste complète

33







CSS

35




CSS• CSS = Cascading Style Sheets > Feuille de style en cascade,

• Ce langage décrit la présentation des documents HTML et XML.

• Les standards sont publiés par le W3C.

• On intègre le style dans un fichier css après avoir déclaré des classes dans le fichier HTML sur les balises,

• Pour bien commencer son projet, toujours mettre en place un reset css,

• Les déclarations CSS peuvent :

• Ne rien avoir si on appel un tag de balise,

• Avoir un # si on appelle un id,

• Avoir un . si on appelle une classe.

36




Alternatives au CSS pur : Les CSS pre-processeurs

37







Our first job !

39







Maquette

• Maquette fictive, ne correspond à aucun site.

• Base du travail, on peut faire beaucoup de choses à partir d’une maquette comme celle-ci.

41







A vos papiers !43







Des questions ?

45



Internet

ISCOM::HTML/CSS::session1 (20140930)