Essentiel pour commencer
- 1 mois
- Niveau : 1
En bref
La formation concepteur Designer UI, est une formation intense en terme de spectre d'apprentissage. Il est important d'avoir une culture graphique, et une culture web affirmée pour tirer pleinement parti de cette formation.
Il est très important de pratiquer une veille dans ce cadre professionnel pour vous tenir informé des dernères plateformes, technos et tendances du moment.
Les modules
Un navigateur est indispensable pour surfer sur internet : il se connecte aux pages que vous souhaitez consulter et les affiche sur votre écran. Plusieurs navigateurs existent. Leur fonctionnement est globalement similaire : seules quelques fonctionnalités avancées les différencient.
Les différents navigateurs>
Chrome
Chrome est un navigateur web propriétaire développé par Google depuis 2008, basé sur le projet libre Chromium fonctionnant sous Windows, Mac, Linux, Android et iOS. Chromium est similaire à Chrome, mais ce dernier contient des mouchards, y compris dans la version mobile de Chrome.
https://www.google.com/intl/fr_fr/chrome/
 Edge
Microsoft Edge est un navigateur web propriétaire développé par la société américaine Microsoft depuis 2015, et basé sur Chromium depuis 2020. Il fut conçu pour remplacer Internet Explorer
https://www.microsoft.com/fr-fr/edge
 Safari
Safari est un navigateur web pour macOS, iPadOS et iOS développé par Apple, dont le moteur de rendu HTML WebKit est fondé sur KHTML. Il est téléchargeable gratuitement depuis le 7 janvier 2003, soit depuis Mac OS X v10.2
https://www.apple.com/fr/safari/
 Firefox
Mozilla Firefox est un navigateur web libre et gratuit disponible pour PC et mobiles, développé et distribué par la Mozilla Foundation depuis 2003, avec l'aide de milliers de bénévoles. L'entreprise Mozilla Corporation est créée en 2005 pour se charger du développement
https://www.mozilla.org/fr/firefox/new/
 Brave
Brave est un navigateur web open source gratuit disponible sur Windows, macOS et Linux ainsi que sur iOS et Android. Il a pour objectif de protéger la vie privée de ses utilisateurs en bloquant par défaut les pisteurs et en permettant la navigation via le réseau Tor.
https://brave.com/fr/
 Â
L'inspecteur d'Ă©lements'
Â
Logiciel FTP
File Transfer Protocol, ou FTP, est un protocole de communication destiné au partage de fichiers sur un réseau TCP/IP. Il permet, depuis un ordinateur, de copier des fichiers vers un autre ordinateur du réseau, ou encore de supprimer ou de modifier des fichiers sur cet ordinateur.
Filezilla (Mac & PC)
FileZilla Client est un client FTP, FTPS et SFTP, développé sous la licence publique générale GNU. Il est intégré à la liste des logiciels libres préconisés par l’État français dans le cadre de la modernisation globale de ses systèmes d’informations
https://filezilla-project.org/
Cyberduck (Mac)
Â
Machine virtuelle
Pour installer un CMS facilement
Wplocalhost
Un environnement de développement intégré, ou IDE, est un logiciel de création d'applications, qui rassemble des outils de développement fréquemment utilisés dans une seule interface utilisateur graphique (GUI)
Visual Studio
L’un des éditeurs de code les plus populaires, sinon le plus populaire, Visual Studio Code est la référence pour de nombreux développeurs malgré sa sortie relativement récente en 2015. Il est extrêmement robuste et personnalisable, avec une interface que vous pouvez personnaliser à votre goût, et des extensions pour ajouter encore plus de fonctionnalités.
L’éditeur supporte HTML, CSS, JavaScript et PHP, vous n’aurez donc jamais à changer d’outil. Et il utilise le système IntelliSense pour la coloration syntaxique et l’auto-complétion, en plus d’inclure le support du contrôle de version Git/Github et la fonctionnalité FTP.
 Brackets
Vous aimez le design léger de Notepad++ mais vous voulez un programme spécifiquement axé sur le développement web ? Brackets est la solution parfaite. Il fonctionne sur Windows, Mac et Linux, et est livré avec juste la bonne quantité de fonctionnalités pour vous donner une grande expérience sans vous gêner.
L’éditeur HTML, JavaScript et CSS comprend un aperçu en direct, la prise en charge du préprocesseur, la mise en surbrillance et des extensions gratuites pour ajouter tout ce qui manque. Il a été construit avec le développement web en tête, donc vous savez que vous aurez tout ce dont vous aurez besoin pour créer dans WordPress.
Brackets est un bon choix pour les développeurs qui aiment un espace de travail minimal et propre, non surchargé de fonctionnalités inutiles qu’ils n’utiliseront jamais.
 Atom
Développé par GitHub, le plus grand centre communautaire de développement de logiciels et de sites web sur Internet, Atom est construit pour la collaboration. Il est livré avec le support intégré de Git/Github pour le contrôle de version, et plus particulièrement supporte la collaboration de code en temps réel. Plus besoin d’envoyer des fichiers dans les deux sens. Travaillez ensemble sur un projet unifié.
Atom fonctionne sur tous les principaux systèmes d’exploitation et prend en charge les thèmes, les extensions tierces et même la possibilité de coder vos propres modifications de l’interface avec HTML et CSS. Il est élégant, extensible et riche en fonctionnalités, et si vous avez besoin de travailler de façon transparente avec vos coéquipiers, c’est un outil nécessaire pour apprendre.
 définition
HTML n’est pas un langage de programmation. C’est un langage de balises qui définit la structure de votre contenu. HTML se compose d’une série d’éléments, utilisés pour entourer, ou envelopper, les diverses parties du contenu pour les faire apparaître ou agir d’une certaine façon.
C’est quoi une balise ?
Balise ouvrante
<p> celle-ci se compose du nom de l’élément (ici « p »), entre deux chevrons. Cela indique le début de l’élément, soit l’endroit à partir duquel celui-ci prend effet. Pour notre exemple, cela indique le début du paragraphe.Balise fermante
</p>ici on a également des chevrons et le nom de l’élément, auxquels on ajoute une barre oblique avant le nom de l’élément. Cela indique la fin de l’élément. Pour notre exemple, cela indique la fin du paragraphe.
Attributs d’élements
Les attributs contiennent des informations supplémentaires qui portent sur l’élément. Un attribut doit toujours avoir : - Un espace entre l’attribut et le nom de l’élément ; - Un nom (le nom de l’attribut), suivi d’un signe égal « = » ; - Des guillemets pour encadrer la valeur de l’attribut.
Imbriquer des Ă©lements
La formation commence
Vous pouvez placer des éléments au sein d’autres éléments, c’est ce qu’on appelle l’imbricationLes balises auto-fermantes
<img src=’’images/mon image.png’’ alt=’’Mon image test’’ />Cet élément contient deux attributs mais les balises ouvrante et fermante sont remplacées par une balise auto-fermante
et il n’y a aucun contenu interne. Anatomie d’un fichier html
Les éléments Html de Base
<Doctype>
— le doctype. Au début de HTML, dans les années 1991-1992, les doctypes étaient utilisés pour faire référence à des ensembles de règles qu’on pouvait utiliser pour dire qu’un document était du HTML « valide » et détecter les erreurs de balisage.
<head>
— l’élément head. Cet élément est utilisé comme un container pour toutes les choses qui font partie de la page HTML mais qui ne sont pas du contenu affiché.
<body>
— l’élément <body>. Cet élément est celui qui contient tout le contenu que vous souhaitez afficher pour qu’il soit vu par les visiteurs : cela peut être du texte, des images, des vidéos, des jeux, des pistes audio jouables, et ainsi de suite.
<meta charset="utf-8">
— Cet élément définit le jeu de caractères qui devrait être utilisé pour le document et indique que c’est utf-8. utf-8 regroupe l’ensemble des caractères connus utilisés dans les différents langages humains. Généralement, utf-8 permet de gérer n’importe quel texte que vous pourriez utiliser sur la page.
<title>
— L’élément <title> définit le titre de votre page. C’est ce titre qui apparaîtra sur l’onglet lorsque la page sera chargée. C’est également ce titre qui sera utilisé pour décrire la page lorsque vous la placez dans vos marques-pages.
<p>
— L’élément <p> est un paragraphe, c’est un élément de base du html
<strong>
— L’élément <strong> permet de mettre en surbrillance un texte, c’est un élément de base du html qui est pris en compte par les robots indexeurs.
<img src=``image.png`` alt=``info``>
— Comme on l’a vu auparavant, cet élément permet d’intégrer une image dans la page, à l’endroit où l’élément apparaît. L’image utilisée est définie via l’attribut src (pour source) qui contient le chemin vers le fichier de l’image. — Nous avons aussi utilisé l’attribut alt (pour alternatif). Il contient un texte descriptif de l’image à l’intention des utilisateurs qui ne peuvent pas voir l’image, car : - ils sont mal-voyants. Ils utilisent souvent des outils nommés lecteurs d’écrans pour lire le texte de cet attribut ; - quelque chose s’est mal passé et l’image n’a pas pu être affichée.<h> Les balises de titres
<h1>
— la balise <h1> est hyper importante sur votre page, elle est l’information n°1 reccueillie par les robots dans la partie. Il ne peut y en avoir qu’une par page..<h2>
— la balise <h2> est structurelle pour la page de votre site c’est le second niveau d’information important pour l’internaute et les robots des moteurs de recherche<h3>
— la balise <h3> reste un niveau de titre mais de moindre importante pour l’internaute et le moteur de rechercheLes listes
<ul>
<ul><li>Premier élément</li>
<li>Second élément élément</li>
</ul>
— ul : liste (unordered list)
— li : élément de la liste
<ol>
<ol><li>Premier élément</li>
<li>Second élément élément</li>
</ol>
— ol : liste (ordered list)
— li : élément de la liste
Les liens <a>
<a href="https://monsite.fr">Lien visible</a>— Pour créer un lien, il suffit d’utiliser l’élément <a> (le a est un raccourci pour « ancre »). — href est la cible
Quelques liens
" ["short_description"]=> string(27) "Le Html à quoi çà sert ?" ["course_id"]=> int(5) ["teacher_id"]=> int(1) ["topic_id"]=> int(4) ["video_url"]=> string(0) "" ["vdo_thumb"]=> string(0) "" ["ordering"]=> int(126) ["video_duration"]=> string(0) "" ["attachment"]=> string(0) "" ["lesson_type"]=> int(1) ["published"]=> int(1) ["access"]=> int(1) ["language"]=> string(1) "*" ["created_by"]=> int(625) ["created"]=> string(19) "2022-11-11 00:00:00" ["modified_by"]=> int(625) ["modified"]=> string(19) "2023-10-17 08:24:46" ["checked_out"]=> int(0) ["checked_out_time"]=> string(19) "0000-00-00 00:00:00" ["teacher_name"]=> string(6) "App UI" ["teacheralias"]=> string(6) "app-ui" ["teacher_url"]=> string(39) "/formation?view=teacher&id=1:app-ui" ["lesson_url"]=> string(49) "/formation?view=lesson&id=2:les-bases-du-html" } [1]=> object(stdClass)#1500 (28) { ["id"]=> int(4) ["asset_id"]=> int(117) ["title"]=> string(16) "Les bases du CSS" ["alias"]=> string(16) "les-bases-du-css" ["description"]=> string(11582) "Le Css : Définition
Les Cascading Style Sheets en anglais, ou « feuilles de style en cascade » (en bon français) sont le code utilisé pour mettre en forme une page web. Le ht ml étant le contenu de la page le CSS représente la mise en forme. Vous serez amenés à travailler avec différents niveau d'abstraction, mais vous devez comprendre les rudiments de la construction pour pouvoir à l'avenir personnaliser vos projets.
Les sélecteurs
les éléments
Si votre style s'applique à l'ensemble des éléments de votre page, alors vous pouvez styliser directement ces éléments
Code à intégrer
<style>body {background:grey;}
h1 {font-size:3rem;color:red;}
</style>
Les class
Lorsque des types d'éléments sont amenés à être reproduits à différents endroits sur une page ou dans un projet, on crée des classes qui seront réutilisées tout au long du projet et qui permettront d'avoir à écrire moins de code.
Code à intégrer
<style> .maclasse {background-color:blue;} </style>
Les id
Certains éléments sont et doivent être uniques, pour que vous puissiez vous référer via un lien, ou tout simplement parce que sa stylisation doit être unique. Pour se faire vous puvez utiliser un identifiant unique
Code à intégrer
<style> #monidentifiantunique {background-color:blue;} </style>
SĂ©lecteurs globaux
Parfois il peut être intéressant, d'appeler globalement l'ensemble des éléments d'une page, pour se faire, il exsite un sélecteur global
Code à intégrer
<style> * {background-color:blue;} </style>
Les enfants
Le css reprend la logique d'imbrication vue plus tôt, le css peut donc viser un enfant d'un élément.
Code à intégrer
<style> p a {color:red;} </style>
SĂ©lecteurs multiples
VOus pouvez bien entendu attriber un style css à un ensemble d'éléments et pas seulement un élément unique, pour se faire, vous utiliserez la virgule
Code à intégrer
<style> h1, h2 {color:red;} </style>
GĂ©rer les couleurs
Le code hexadécimal
La notation la plus utilisée : trois numéros octets hexadécimaux (ce qui signifie qu'ils se composent de six chiffres), chaque octet, ou une paire de caractères dans le code Hex, représente l'intensité de rouge, de vert et de bleu dans la couleur.
Code à intégrer
<style>element {color:#B70A7F}</style>
Le code RGB
la notation la plus utilisée entre designers, cela correspond aux valeurs de rouge, vert et bleur sur une échelle de 0 à 255 (l'espace colorimétrique des écrans).
Code à intégrer
<style>element {color:rgb(183, 10, 12)}</style>
Le code RGBA
On ajoute tout simplement la notion de transparence Ă au cadre du RVB
Code à intégrer
<style>element {color:rgba(183, 10, 12, 0.5)}</style>
Le code HSL
La notation fonctionnelle hsl() exprime une couleur sRGB selon ses composantes de teinte (hue en anglais), saturation, et luminosité. Une composante alpha optionnelle représente l'opacité de la couleur.
Code à intégrer
<style>element {color:hsl(319, 95%, 38%)}</style>Liens en plus
GĂ©rer le texte
Taille
Vous serez forcément amené à intervenir sur la taille de votre typographie dans votre document html, vous pourrez tout simplement le gérer au travers de la propriété font-size
Code à intégrer
<style> element {font-size:2rem;} </style>
Couleur
Vous serez également amené à intervenir sur la couleur de votre typographie dans votre document html, vous pourrez tout simplement le gérer au travers de la propriété color
Code à intégrer
<style> element {color;#B70A7F;} </style>
Alignement
Vous devrez gérer l'alignement de votre texte dans votre document html, vous pourrez tout simplement le gérer au travers de la propriété text-align
Code à intégrer
<style> element {text-align:left;} </style>
Hauteur de ligne
La hauteur de igne est un élément qui vous permet de gérer l'espace entre les lignes dans le cadre d'un texte multiligne, vus pouvez le gérez tous simplement avec line-height
Code à intégrer
<style> element {line-height:3rem;} </style>
Police
Afin de donner de la personnalité à votre document, vous pouvez bien entendu choisir la police d'affichage, attention les polices actives sur tous les périphériques ne sont pas identiques. Vous pouvez gérer cela avec font-family
Code à intégrer
<style> element {font-family:Arial;} </style>
GĂ©rer l'espace
Margin
L'espace autour de l'élément est la marge extérieure qui se gère tout simplement avec la propriété margin
Code à intégrer
<style> element {margin:2rem;} </style>
Padding
L'espace à l'intérieur de l'éméent entourant le contenu de l'élément est la marge intérieure, elle est gérée par la propriété padding
Code à intégrer
<style> element {padding:2rem;} </style>
Les unités
Les unités absolues
En CSS, il y a des unités qui ne sont influencées par aucune autre dimension : on les appelle unités absolues, elles sont généralement utilisées pour traduire une longueur, par exemple un padding, une hauteur de bloc, la taille des caractères, etc.
Les unités que vous serez amenés à utiliser pour des écrans sont : Les pixels (px) -majoritairement- et Les points (pt>).Code à intégrer
<style> element {font-size:20px;} </style>
Les unités relatives au texte
S'il existe les unités relatives, il existe leur contraire les unités absolues, ces unités font varier la taille d’un élément en fonction de la taille de la police ou de l’élément parent..
- Em> : elle est proportionnelle à la taille de la police de l’élément parent ou du document. Par défaut, 1 em = 16 px si aucune taille de police n’est définie.
- Rem> : l’unité rem fait toujours référence à la taille de la police de l’élément racine. En d’autres termes, elle dépend du font-size définit par défaut.
Code à intégrer
<style> element {font-size:3rem;} </style>
Les unités relatives au viewport
Les unités vh et vw sont similaires, à la seule différence qu’elles dépendent respectivement de la hauteur et de la largeur de la fenêtre de navigation.
p>- Vh : La hauteur du viewport
- vw : La largeur du viewport
Code à intégrer
<style> element {width:50vw;height:50vh;} </style>
Les pourcentages
Le pourcentage est parfait puisqu’il s’adapte en fonction de son élément parent.
height:50%;} </style>
Police personnalisée
Â
Liens d'intérêt
Étape par étape :
Créer les fichiers et dossier
- Créer un nouveau dossier intitulé page_web
- Créer un sous dossier images
- Créer un sous dossier css
- Créer un sous dossier js
- Créer un nouveau fichier à l'aide visual studio index.html vide
Créer le head :
Code à intégrer
<head>
<title>Ma première page web</title>
<meta charset="utf-8">
</head>
</html>
Ă€ vous de jouer
- Copiez / Coller le Code à intégrer fourni
- Prévisualisez dans le navigateur
Créer le body :
Code à intégrer
<body>
<header>
Logo
</header>
<section>
Contenu principal
</section>
<footer> Informations légales
</footer>
</body>
Ă€ vous de jouer
- Copiez / Coller le Code à intégrer fourni
- Prévisualisez dans le navigateur
Ajouter du CSS :
Code html à intégrer
<link rel="stylesheet" href="/css/style.css">
- Créer un fichier style.CSS dans le dossier css
- Ajoutez le Code à intégrer dans la partie head du html
- Prévisualisez dans le navigateur
Ajouter du CSS :
Code css à intégrer
body {color:black;}
header {color:red;}
footer {color:blue;}
Ă€ vous de jouer
- Éditer le fichier CSS
- Ajoutez le Code à intégrer dans le fichier CSS
- Prévisualisez dans le navigateur
Modifier le html :
Code html à intégrer
<span class="nom_entreprise">Mon entreprise</span>
<h1>Le spécialiste de …. à ….</h1>
<h2 class="gros_titre">Titre 02</h2>
<h3>Sous-Titre 01</h3>
<h2>Titre 03</h2>
<h3>Sous-Titre 01</h3>
<h2>Titre 04</h2>
<h3>Sous-Titre 01</h3>
Ă€ vous de jouer
- Dans la section, ajoutez le Code à intégrer fourni
- Retourner sur le navigateur pour aller voir
Modifier le CSS :
Code CSS à intégrer
body * {text-align:center;display:block;}
/* Les niveaux de titres */
.nom_entreprise {font-size:8rem;width:100%;}
h1 {font-size:5rem;width:100%;}
.gros-titre {font-size:3rem;width:100%;}
h2 {font-size:2rem;width:100%;}
Ă€ vous de jouer
- Dans style.css intégrer le code css fourni
- Retourner sur le navigateur pour aller voir
Intégrer une Police personnalisée
Code html à intégrer
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
Code css à intégrer
Ă€ vous de jouer
- Dans index.html intégrer le code html fourni
- Dans style.css intégrer le code css fourni
- Retourner sur le navigateur pour aller voir
Intégrer une font Icon
Code html à intégrer dans le head
Code html à intégrer dans le body
<span class="coordonnees"><i class="fa-solid fa-phone"></i> 02 96 XX XX XX</span>
Code css à intégrer
Ă€ vous de jouer
- Dans index.html intégrer le code html fourni
- Dans style.css intégrer le code css fourni
- Retourner sur le navigateur pour aller voir
Structuration de la page
Code html à intégrer dans le body
<div class="cols">
<div class="col_50 col">
<div class="interieur_col">
<h2>Pourquoi ce produit ?</h2>
<h2>En plus</h2>
</div>
</div>
<div class="col_50 col">
<div class="interieur_col">
<h2>Les avis de nos clients</h2>
</div>
</div>
</div>
Code css à intégrer
.cols {display:block;width:100%;padding:0;margin:0;}
.cols .col_50 {display:block;width:50%;float:left;padding:0;margin:0;}
.interieur_col {padding:2rem;}
Ă€ vous de jouer
- Dans index.html intégrer le code html fourni
- Dans style.css intégrer le code css fourni
- Retourner sur le navigateur pour aller voir
Hero section
Code html à intégrer dans le body
<section class="hero_section">
<span class="nom_entreprise">Mon entreprise</span>
<h1>Le spécialiste de …. à ….</h1>
<h2 class="gros_titre">Titre 02</h2>
<span class="coordonnees">
<i class="fa-solid fa-phone"></i> 02 96 XX XX XX</span>
</section>
Code css à intégrer
.hero_section {padding:3rem 1rem;background:#EEE;}
Ă€ vous de jouer
- Dans index.html intégrer le code html fourni
- Dans style.css intégrer le code css fourni
- Retourner sur le navigateur pour aller voir
Changer la couleur de la page
Code css à intégrer
body {background:#2596be;}
Ă€ vous de jouer
- Dans style.css intégrer le code css fourni
- Retourner sur le navigateur pour aller voir
Aller un peu plus loin
GĂ©rer le responsive
Code css à intégrer
/* Règles responsives */
@media screen and (min-width: 800px) {
.col_50 {
width:100%;
}
}
Ă€ vous de jouer
- Dans style.css intégrer le code css fourni
- Retourner sur le navigateur pour aller voir
Liens d'intérêts :
Ajouter des meta
Code html à intégrer dans le head
<meta name="description" content="Ce qui sera utilisé par google pour comprendre la page" />
Ă€ vous de jouer
- Dans index.html intégrer le code html fourni dans le head
- Retourner sur le navigateur pour aller voir
Liens d'intérêts :
Ajouter une favicon
Code html à intégrer dans le head
<link rel="icon" type="image/png" href="/images/logo.png" />
Ă€ vous de jouer
- Dans index.html intégrer le code html fourni dans le head
- Retourner sur le navigateur pour aller voir
Liens d'intérêts :
Ajouter des sections
Code html à intégrer dans le body avant le footer
<section id="section02">
<h2>Nos expertises</h2>
<div class="cols">
<div class="col_33 col">
<div class="interieur_col">
Expertise 01
<ul>
<li>Expertise 01</li>
<li>Expertise 02</li>
<li>Expertise 03</li>
</ul>
</div>
</div>
<div class="col_33 col">
<div class="interieur_col">
Expertise 02
</div>
</div>
<div class="col_33 col">
<div class="interieur_col">
<h3>Expertise 03</h3>
</div>
</div>
</section>
Code css à intégrer
.col_33 {width:33%;float:left;}
Ă€ vous de jouer
- Dans index.html intégrer le code html fourni dans le body
- Dans style.css intégrer le code css fourni
- Retourner sur le navigateur pour aller voir
Liens d'intérêts :
DĂ©couverte d'un framewok Css : Pico
Un framework CSS permet dans un cadre éprouvé, et d’appliquer un certain nombre de règles prédéfinies associées à une sémantique html et un système de class structuré.
À la recherche d’un framework minimal
Dans le cadre de certains projets, visant la performance maximale, ou dans certains cadres particuliers on peut être amené à utiliser différents frameworks malgré le fait que l’un d’eux domine très largement. Il existe donc des frameworks très complets, mais forcément plus lourds, pour découvrir les frameworks notre choix s’est porté sur Picoss un framework minimal d’à peine 10kb.
https://picocss.com/Installer / Utiliser Pico CSS
À télécharger et dézipper
https://github.com/picocss/pico/archive/refs/heads/master.zip
Code à intégrer dans le head du html (fichier en local)
Code à intégrer dans le head du html (avec un CDN)
Html complet pour commencer
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/css/pico.min.css">
<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@1.*/css/pico.min.css">
<title>Premier essai avec Pico CSS</title>
</head>
<body>
<main class="container">
<h1>Vous utilisez un framework CSS</h1>
</main>
</body>
</html>
La responsivité avec Pico
| Device | Extra small | Small | Medium | Large | Extra large |
|---|---|---|---|---|---|
| Breakpoint | <576px | ≥576px | ≥768px | ≥992px | ≥1200px |
| Viewport | 100% | 540px | 720px | 960px | 1140px |
Les thèmes
Pico est livré avec deux thèmes Light & Dark.
Les thèmes peuvent être forcés dès le document
ou sur un élément html spécifique
Les containers
Les conteneurs sont lĂ pour encadrer le contenu dans le cadre du framework
.container active un conteneur centré .container-fluid active un affichage à 100% de la largeur
Code à intégrer
​​<body>
<main class="container"></main>
</body>
Les grilles
Pico contient un système de grille minimaliste et automatique
Code à intégrer
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
Une grille en html / css : qu’est-ce que c’est ?
Une trame est simplement un ensemble de lignes horizontales et verticales créant un quadrillage dans lequel nous pouvons agencer les éléments à afficher. Elles nous aident à créer des compositions dans lesquelles les éléments ne sautent pas ou ne changent pas de largeur au fur et à mesure que nous nous déplaçons d'une page à l'autre, ce qui assure une plus grande cohérence des sites Web. La trame est constituée généralement de rangées (colonnes ou lignes). L'espace entre chaque ligne ou colonne est communément gouttière.
Typographie
Tous les éléments de typographie sont responsives automatiquement.
| Device | Extra small | Small | Medium | Large | Extra large |
|---|---|---|---|---|---|
| Base font | 16px | 17px | 18px | 19px | 20px |
<h1> |
32px | 34px | 36px | 38px | 40px |
<h2> |
28px | 29px | 31.5px | 33.25px | 35px |
<h3> |
24px | 25.5px | 27px | 28.5px | 30px |
<h4> |
20px | 21.25px | 22.5px | 23.75px | 25px |
<h5> |
18px | 19.125px | 20.25px | 21.375px | 22.5px |
<h6> |
16px | 17px | 18px | 19px | 20px |
<small> |
14px | 14.875px | 15.75px | 16.625px | 17.5px |
Code à intégrer
<div class="headings">
<h2>Titre 2</h2>
<h3>Sous-titre de niveau 3</h3>
</div>
Boutons & Forms
Tous les éléments sont pré-stylisés
Code html à intégrer
Lien HTML a
Code html à intégrer
<a href="#" role="button">Lien inline</a>
<a href="#" role="button">Lien inline</a>
<a href="#" role="button" class="secondary">Couleur secondaire</a>
<a href="#" role="button" class="contrast">Niveau de contraste</a>
Formulaire complet
Code html à intégrer
<form>
<!-- Grille automatique Pico CSS -->
<div class="grid">
<!-- Label du champs -->
<label for="firstname">
Prénom <input type="text" id="firstname" name="firstname" placeholder="First name" required>
</label>
<!-- Label du champs -->
<label for="lastname">
Nom <input type="text" id="lastname" name="lastname" placeholder="Last name" required>
</label>
</div>
<label for="email">
Courriel</label>
<input type="email" id="email" name="email" placeholder="Adresse de courriel" required>
<!-- LĂ©gende -->
<small>
Politique de confidentialité</small>
<!-- Bouton -->
<button type="submit">
transmettre</button>
</form>
Encore plus loin
Comprendre ce qu'est un CSS reset
Le reset CSS permet de réinitialiser à 0 la valeur de certains éléments HTML de base afin d'éviter les différences d'affichage sur les divers navigateurs du marché.
Plus de framework Ă tester
Exotiques
Les sites internet sont devenus de plus en plus complexe au fil des ans, la grande majorité des entreprises disposant de sites plus ou moins datés.
Pour que ce type de sites devienne accessible pour toutes les entreprises dont les TPE, il a fallu la création d'outils permettant la gestion des contenus en ligne.
Petit historique : culture web
La création de page sur le web, et le fait de le rendre accessible au plus grand nombre est à la base du web tel qu'on le connait. La création de pages internet a commencé sur des interface comme geocities qui proposaient des solutions de création de structures de site très basique. Ces interfaces étaient très souvent sponsorisées par des bandeaux de pub.
Le développement des CMS a comencé dès les années 90, mais leur essor a réellement commencé au début des années 2000, une saine compétition qui a permis à de nombreux concepts d'être testés pour arriver aujourd'hui en 2023 à un marché bien plus resserré mais pleinement mâture. La facilité d'utilisation de ces outils a permis une adoption de plus en plus large par un nombre d'entreprises toujours croissant.
Différentes philosophies
Solutions Saas
Afin de simplifier les choses, dans le cadre d'une solution SAAS wix.com, wordpress.com, shopify, system.io ... vous louez un espace sur le web avec un ensemble d'outils, vous le faites pour un temps déterminé, vous avez souscrit un abonnement ce service s'arrête. Il peut exister des solutions gratuites vous permettant d'avoir un site en ligne à minima, mais vous n'avez pas la main sur le cœur de l'outil.
Solutions Open Source
À l'opposé, il existe aujourd'hui un certain nombre de projets open source vous permettant de gérer en toute indépendance votre site internet, vous devrez également prendre un hébergement mais vous maitrisez l'outil qui gère votre site internet, vous pouvez en disposer et le modifier sans aucune limite.
Les cms Open Source les plus répandus
WordPress
WordPress est un système de gestion de contenu (SGC ou content management system (CMS) en anglais) gratuit, libre et open-source. Ce logiciel écrit en PHP repose sur une base de données MySQL et est distribué par la fondation WordPress.org. Les fonctionnalités de WordPress lui permettent de créer et gérer différents types de sites Web : site vitrine, site de vente en ligne, site applicatif, blog, portfolio, site institutionnel, site d'enseignement…
Liens d'intérêt
Joomla
Joomla! est un système de gestion de contenu (en anglais CMS pour content management system) libre, open source et gratuit. Il est écrit en PHP et utilise une base de données MySQL. Joomla! inclut des fonctionnalités telles que des flux RSS, des news, une version imprimable des pages, des blogs, des sondages, des recherches. Joomla! est sous licence GNU GPL.
Liens d'intérêt
Typo3
Le développement de TYPO3 a commencé en 1997. En 1998, l'outil est sous licence commerciale dans la société superfish.com. En octobre 1998, l'une des premières versions est présentée en France au salon IFRA de Lyon. Pendant l'été 1999, Kasper quitte superfish.com avec les droits de TYPO3. Il en continue le développement seul. Un an plus tard, en août 2000, Kasper publie la première version en libre téléchargement.
Liens d'intérêt
Drupal
Clairement orienté développeurs, Drupal est un système de gestion de contenu (CMS) libre et open-source publié sous la licence publique générale GNU et écrit en PHP. Il permet la création et l'entretien de sites Web de manière plus rapide et plus efficace que la programmation HTML/CSS classique.
Liens d'intérêt
L'éco-système autour des CMS
Il n'y a aucun CMS parfait
Ils ont tous des avantages ... et des inconvénients, vous aurez toujours un outil que vous maitriserez plus que les autres, des préférences personnelles, mais il ne faut pas perdre de vue le bénéfice pour le projet. Vous ne devriez jamais vous mettre d'œillères quant au choix de votre cms avant que le cahier des charges complet ne soit disponible.
Il y a une extension pour çĂ
Ce qui comptera vraiment sur chacun des projets sur lesquels vous travaillerez c'est votre capacité à choisi celui qui sera le plus en phase avec les besoins de votre client, et surtout celui qui vous permettra de déployer sur le temps le plus court. Et pour cela vous aurez besoin dans tous les cas d'extensions pour créer le site internet de vos clients, chaque cms a ses extensions spécifiques, il y a de nombreux critères à prendre en compte.
Des cms plus simples pour commencer
Tous les CMS énoncés plus haut ont besoin d'un serveur PHP ou d'une machine virtuelle pour être essayés, et d'une base de données. Dans le cadre de projets plus simples, il peut être intéressant de ne pas avoir à utiliser de bases de données, certains cms ont été créés sur cette conviction, on appelle ce type de cms : les cms flat file.
Votre usage
Avant de vous lancer dans le parcours CDUI, vous devez vous intéresser aux réseaux sociaux et les comprendre. Vous devez connaitre et utiliser ces plateformes elles sont de fantastiques sources de veille si vous les utilisez correctement.
En fonction de chacun de vous, il ya très certainement quelques plateformes sur lesqueles vous n'êtes pas présent, découvrez ces plateformes pour mieux exploiter leur attrait par la suite.
Installation des Apps immanquables
Facebook est fondé en 2004. D'abord réservé aux étudiants de Harvard, il s'est ensuite ouvert à d'autres universités américaines avant de devenir accessible à tous en 2006. Le nom du site provient des « trombinoscopes » ou « facebooks » en anglais regroupant les photos des visages de tous les élèves prises en début d'année universitaire.
Au 14 décembre 2022, Facebook est le réseau social le plus utilisé au monde avec 2,91 milliards d'abonnés actifs.
Facebook en France
- 32 millions d’utilisateurs actifs,
- 73,3 % des internautes utilisent Facebook chaque mois,
- L’utilisateur français moyen passe 12h54 par mois sur Facebook
- 76 % des community managers estiment que Facebook est important dans le cadre de leur travail,
- 59,16 % du trafic web issu des réseaux sociaux provient de Facebook,
- 52,5 % des utilisateurs sont des femmes, contre 47,5 % d’hommes,
- 8e application la plus téléchargée en 2022.
Insta
Instagram est une application, un réseau social et un service de partage de photos et de vidéoslancé 2010. Depuis 2012, l'application appartient au groupe Meta. L'âge minimum légal requis pour utiliser Instagram est de 13 ans
Insta en France
- La France compte 23,7 millions d’utilisateurs d’Instagram en janvier 2023,
- 58,6 % des usagers d’internet âgés de 16 à 64 ans utilisent l’application au moins une fois par mois,
- 19,4 % des Français qui utilisent les réseaux sociaux font d’Instagram leur plateforme favorite,
- Les Français passent en moyenne 8h36 par mois sur I’application,
- L’application mobile se classe 5e en 2022 en termes d’utilisateurs mensuels actifs,
- C’est aussi la 5e application la plus téléchargée en 2022.
X
Twitter est créé le 21 mars 2006. Le 5 mars 2017, il compte 313 millions d’utilisateurs actifs par mois, 500 millions de tweets envoyés par jour et est disponible en plus de quarante langues. En 2023,la plateforme est renommée X avec de nouvelles ambitions globables.
X en France
- 5 716 000 visiteurs uniques moyens par jour,
- 7e réseau social le plus utilisé,
- 40 % des community managers estiment que Twitter est important dans le cadre de leur travail,
- 9,76 % du trafic web issu des réseaux sociaux provient de Twitter,
- 66 % des utilisateurs sont des hommes, contre 34 % de femmes,
- 22,1 % des visites se font sur ordinateur, 84,5 % sur smartphone, 6,2 % sur tablette.
TikTok
TikTok est une application mobile de partage de courtes vidéos (verticales et de quelques secondes à quelques minutes), et de réseautage social, lancée en septembre 2016. C'est ces dernières années la plateforme à la plus forte croissance.
TikTok en France
- 14,9 millions d’utilisateurs actifs mensuels,
- 9,5 millions d’utilisateurs actifs quotidiens,
- 22,4 millions de visiteurs uniques mensuels,
- 72 % des utilisateurs ont moins de 24 ans.
LinkedIn a été lancé en mai 2003, il a été acquis par Microsoft en 2016. Aujourd'hui Linkedin règne sans partage sur le réseau social B2B
Linkedin en France
- 27 millions de membres,
- LinkedIn a vu son nombre de membres augmenter de 20 % en 2 ans
- La france est le 5ème pays le plus présent sur le réseau
