iscom::html/css::session1 (20140930)
DESCRIPTION
ISCOM::HTML/CSS::session1 (20140930)TRANSCRIPT
![Page 1: ISCOM::HTML/CSS::session1 (20140930)](https://reader034.vdocuments.net/reader034/viewer/2022042714/55685161d8b42a73038b4dfb/html5/thumbnails/1.jpg)
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52 1
Cours HTML / CSSLearn to code
HTML/CSS easily
![Page 2: ISCOM::HTML/CSS::session1 (20140930)](https://reader034.vdocuments.net/reader034/viewer/2022042714/55685161d8b42a73038b4dfb/html5/thumbnails/2.jpg)
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
![Page 3: ISCOM::HTML/CSS::session1 (20140930)](https://reader034.vdocuments.net/reader034/viewer/2022042714/55685161d8b42a73038b4dfb/html5/thumbnails/3.jpg)
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52
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
![Page 4: ISCOM::HTML/CSS::session1 (20140930)](https://reader034.vdocuments.net/reader034/viewer/2022042714/55685161d8b42a73038b4dfb/html5/thumbnails/4.jpg)
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52
Outils de versioning
4
![Page 7: ISCOM::HTML/CSS::session1 (20140930)](https://reader034.vdocuments.net/reader034/viewer/2022042714/55685161d8b42a73038b4dfb/html5/thumbnails/7.jpg)
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52
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
![Page 9: ISCOM::HTML/CSS::session1 (20140930)](https://reader034.vdocuments.net/reader034/viewer/2022042714/55685161d8b42a73038b4dfb/html5/thumbnails/9.jpg)
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52
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
![Page 10: ISCOM::HTML/CSS::session1 (20140930)](https://reader034.vdocuments.net/reader034/viewer/2022042714/55685161d8b42a73038b4dfb/html5/thumbnails/10.jpg)
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52
Créer un repository GIT en 4 étapes
10
![Page 11: ISCOM::HTML/CSS::session1 (20140930)](https://reader034.vdocuments.net/reader034/viewer/2022042714/55685161d8b42a73038b4dfb/html5/thumbnails/11.jpg)
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52
GIT #Step1On créé son compte sur github http://www.github.com Nom de compte : icom-[prenom][nom] Exemple : icom-nicolasaguenot
11
![Page 12: ISCOM::HTML/CSS::session1 (20140930)](https://reader034.vdocuments.net/reader034/viewer/2022042714/55685161d8b42a73038b4dfb/html5/thumbnails/12.jpg)
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52
GIT #Step2On choisit le plan que l’on souhaite. Choisissez le plan « free » et cliquez sur « Finish sign up »
12
![Page 13: ISCOM::HTML/CSS::session1 (20140930)](https://reader034.vdocuments.net/reader034/viewer/2022042714/55685161d8b42a73038b4dfb/html5/thumbnails/13.jpg)
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52
GIT #Step 3 - Welcome to Github!13
![Page 14: ISCOM::HTML/CSS::session1 (20140930)](https://reader034.vdocuments.net/reader034/viewer/2022042714/55685161d8b42a73038b4dfb/html5/thumbnails/14.jpg)
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52
GIT #Step 4- Création d’un repository : icom-htmlcss !
- Repository Public, - On ajoute un README, - Sans .gitignore, - Sans licence,
14
![Page 15: ISCOM::HTML/CSS::session1 (20140930)](https://reader034.vdocuments.net/reader034/viewer/2022042714/55685161d8b42a73038b4dfb/html5/thumbnails/15.jpg)
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52 15
![Page 16: ISCOM::HTML/CSS::session1 (20140930)](https://reader034.vdocuments.net/reader034/viewer/2022042714/55685161d8b42a73038b4dfb/html5/thumbnails/16.jpg)
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52
GIT : Tips and tricks
16
![Page 17: ISCOM::HTML/CSS::session1 (20140930)](https://reader034.vdocuments.net/reader034/viewer/2022042714/55685161d8b42a73038b4dfb/html5/thumbnails/17.jpg)
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52
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
![Page 18: ISCOM::HTML/CSS::session1 (20140930)](https://reader034.vdocuments.net/reader034/viewer/2022042714/55685161d8b42a73038b4dfb/html5/thumbnails/18.jpg)
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52
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
![Page 19: ISCOM::HTML/CSS::session1 (20140930)](https://reader034.vdocuments.net/reader034/viewer/2022042714/55685161d8b42a73038b4dfb/html5/thumbnails/19.jpg)
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52
Vous voulez en savoir plus
sur GIT ? Consulter ce site : https://www.atlassian.com/git/tutorials/
19
![Page 20: ISCOM::HTML/CSS::session1 (20140930)](https://reader034.vdocuments.net/reader034/viewer/2022042714/55685161d8b42a73038b4dfb/html5/thumbnails/20.jpg)
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52
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
![Page 21: ISCOM::HTML/CSS::session1 (20140930)](https://reader034.vdocuments.net/reader034/viewer/2022042714/55685161d8b42a73038b4dfb/html5/thumbnails/21.jpg)
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52
Comment organiser son projet ?
21
![Page 22: ISCOM::HTML/CSS::session1 (20140930)](https://reader034.vdocuments.net/reader034/viewer/2022042714/55685161d8b42a73038b4dfb/html5/thumbnails/22.jpg)
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52
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
![Page 23: ISCOM::HTML/CSS::session1 (20140930)](https://reader034.vdocuments.net/reader034/viewer/2022042714/55685161d8b42a73038b4dfb/html5/thumbnails/23.jpg)
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52
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
![Page 24: ISCOM::HTML/CSS::session1 (20140930)](https://reader034.vdocuments.net/reader034/viewer/2022042714/55685161d8b42a73038b4dfb/html5/thumbnails/24.jpg)
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52
Comment organiser son projet ? Arborescence type
24
![Page 25: ISCOM::HTML/CSS::session1 (20140930)](https://reader034.vdocuments.net/reader034/viewer/2022042714/55685161d8b42a73038b4dfb/html5/thumbnails/25.jpg)
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52
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
![Page 26: ISCOM::HTML/CSS::session1 (20140930)](https://reader034.vdocuments.net/reader034/viewer/2022042714/55685161d8b42a73038b4dfb/html5/thumbnails/26.jpg)
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52
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
![Page 27: ISCOM::HTML/CSS::session1 (20140930)](https://reader034.vdocuments.net/reader034/viewer/2022042714/55685161d8b42a73038b4dfb/html5/thumbnails/27.jpg)
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52
HTML : Les bases et balises
27
![Page 28: ISCOM::HTML/CSS::session1 (20140930)](https://reader034.vdocuments.net/reader034/viewer/2022042714/55685161d8b42a73038b4dfb/html5/thumbnails/28.jpg)
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52
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
![Page 29: ISCOM::HTML/CSS::session1 (20140930)](https://reader034.vdocuments.net/reader034/viewer/2022042714/55685161d8b42a73038b4dfb/html5/thumbnails/29.jpg)
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52
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
![Page 30: ISCOM::HTML/CSS::session1 (20140930)](https://reader034.vdocuments.net/reader034/viewer/2022042714/55685161d8b42a73038b4dfb/html5/thumbnails/30.jpg)
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52
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
![Page 31: ISCOM::HTML/CSS::session1 (20140930)](https://reader034.vdocuments.net/reader034/viewer/2022042714/55685161d8b42a73038b4dfb/html5/thumbnails/31.jpg)
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52
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
![Page 32: ISCOM::HTML/CSS::session1 (20140930)](https://reader034.vdocuments.net/reader034/viewer/2022042714/55685161d8b42a73038b4dfb/html5/thumbnails/32.jpg)
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52
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
![Page 33: ISCOM::HTML/CSS::session1 (20140930)](https://reader034.vdocuments.net/reader034/viewer/2022042714/55685161d8b42a73038b4dfb/html5/thumbnails/33.jpg)
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52
HTML : Les balises La liste complète
33
![Page 34: ISCOM::HTML/CSS::session1 (20140930)](https://reader034.vdocuments.net/reader034/viewer/2022042714/55685161d8b42a73038b4dfb/html5/thumbnails/34.jpg)
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52 34
![Page 36: ISCOM::HTML/CSS::session1 (20140930)](https://reader034.vdocuments.net/reader034/viewer/2022042714/55685161d8b42a73038b4dfb/html5/thumbnails/36.jpg)
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52
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
![Page 37: ISCOM::HTML/CSS::session1 (20140930)](https://reader034.vdocuments.net/reader034/viewer/2022042714/55685161d8b42a73038b4dfb/html5/thumbnails/37.jpg)
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52
Alternatives au CSS pur : Les CSS pre-processeurs
37
![Page 38: ISCOM::HTML/CSS::session1 (20140930)](https://reader034.vdocuments.net/reader034/viewer/2022042714/55685161d8b42a73038b4dfb/html5/thumbnails/38.jpg)
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52 38
![Page 39: ISCOM::HTML/CSS::session1 (20140930)](https://reader034.vdocuments.net/reader034/viewer/2022042714/55685161d8b42a73038b4dfb/html5/thumbnails/39.jpg)
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52
Our first job !
39
![Page 40: ISCOM::HTML/CSS::session1 (20140930)](https://reader034.vdocuments.net/reader034/viewer/2022042714/55685161d8b42a73038b4dfb/html5/thumbnails/40.jpg)
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52 40
![Page 41: ISCOM::HTML/CSS::session1 (20140930)](https://reader034.vdocuments.net/reader034/viewer/2022042714/55685161d8b42a73038b4dfb/html5/thumbnails/41.jpg)
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52
Maquette
• Maquette fictive, ne correspond à aucun site.
• Base du travail, on peut faire beaucoup de choses à partir d’une maquette comme celle-ci.
41
![Page 42: ISCOM::HTML/CSS::session1 (20140930)](https://reader034.vdocuments.net/reader034/viewer/2022042714/55685161d8b42a73038b4dfb/html5/thumbnails/42.jpg)
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52 42
![Page 43: ISCOM::HTML/CSS::session1 (20140930)](https://reader034.vdocuments.net/reader034/viewer/2022042714/55685161d8b42a73038b4dfb/html5/thumbnails/43.jpg)
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52
A vos papiers !43
![Page 44: ISCOM::HTML/CSS::session1 (20140930)](https://reader034.vdocuments.net/reader034/viewer/2022042714/55685161d8b42a73038b4dfb/html5/thumbnails/44.jpg)
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52 44
![Page 45: ISCOM::HTML/CSS::session1 (20140930)](https://reader034.vdocuments.net/reader034/viewer/2022042714/55685161d8b42a73038b4dfb/html5/thumbnails/45.jpg)
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52
Des questions ?
45