Upload
nicolas-aguenot
View
290
Download
5
Embed Size (px)
DESCRIPTION
ISCOM::HTML/CSS::session1 (20140930)
Citation preview
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52 1
Cours HTML / CSSLearn to code
HTML/CSS easily
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
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
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52
Outils de versioning
4
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52
GIT vs SVN #15
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52
GIT vs SVN #26
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
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
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52
Créer un repository GIT en 4 étapes
10
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
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
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52
GIT #Step 3 - Welcome to Github!13
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
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52 15
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52
GIT : Tips and tricks
16
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
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
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
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
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52
Comment organiser son projet ?
21
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
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
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52
Comment organiser son projet ? Arborescence type
24
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
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
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52
HTML : Les bases et balises
27
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
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
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
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
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
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52
HTML : Les balises La liste complète
33
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52 34
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
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52
Alternatives au CSS pur : Les CSS pre-processeurs
37
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52 38
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52
Our first job !
39
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52 40
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
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52 42
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52
A vos papiers !43
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52 44
Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52
Des questions ?
45