Compare commits
1 Commits
main
...
page/direc
| Author | SHA1 | Date |
|---|---|---|
Nico
|
34f9904986 |
|
|
@ -0,0 +1,3 @@
|
|||
plugins:
|
||||
- path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
|
||||
spec: "@yarnpkg/plugin-interactive-tools"
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
{
|
||||
"hash": "61014706",
|
||||
"browserHash": "2f8b4d93",
|
||||
"optimized": {
|
||||
"vue": {
|
||||
"src": "../../../../node_modules/vue/dist/vue.runtime.esm-bundler.js",
|
||||
"file": "vue.js",
|
||||
"fileHash": "e47bde2a",
|
||||
"needsInterop": false
|
||||
},
|
||||
"vitepress > @vue/devtools-api": {
|
||||
"src": "../../../../node_modules/@vue/devtools-api/lib/esm/index.js",
|
||||
"file": "vitepress___@vue_devtools-api.js",
|
||||
"fileHash": "7672acce",
|
||||
"needsInterop": false
|
||||
}
|
||||
},
|
||||
"chunks": {}
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
{
|
||||
"type": "module"
|
||||
}
|
||||
|
|
@ -1,162 +0,0 @@
|
|||
// node_modules/@vue/devtools-api/lib/esm/env.js
|
||||
function getDevtoolsGlobalHook() {
|
||||
return getTarget().__VUE_DEVTOOLS_GLOBAL_HOOK__;
|
||||
}
|
||||
function getTarget() {
|
||||
return typeof navigator !== "undefined" && typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : {};
|
||||
}
|
||||
var isProxyAvailable = typeof Proxy === "function";
|
||||
|
||||
// node_modules/@vue/devtools-api/lib/esm/const.js
|
||||
var HOOK_SETUP = "devtools-plugin:setup";
|
||||
var HOOK_PLUGIN_SETTINGS_SET = "plugin:settings:set";
|
||||
|
||||
// node_modules/@vue/devtools-api/lib/esm/time.js
|
||||
var supported;
|
||||
var perf;
|
||||
function isPerformanceSupported() {
|
||||
var _a;
|
||||
if (supported !== void 0) {
|
||||
return supported;
|
||||
}
|
||||
if (typeof window !== "undefined" && window.performance) {
|
||||
supported = true;
|
||||
perf = window.performance;
|
||||
} else if (typeof global !== "undefined" && ((_a = global.perf_hooks) === null || _a === void 0 ? void 0 : _a.performance)) {
|
||||
supported = true;
|
||||
perf = global.perf_hooks.performance;
|
||||
} else {
|
||||
supported = false;
|
||||
}
|
||||
return supported;
|
||||
}
|
||||
function now() {
|
||||
return isPerformanceSupported() ? perf.now() : Date.now();
|
||||
}
|
||||
|
||||
// node_modules/@vue/devtools-api/lib/esm/proxy.js
|
||||
var ApiProxy = class {
|
||||
constructor(plugin, hook) {
|
||||
this.target = null;
|
||||
this.targetQueue = [];
|
||||
this.onQueue = [];
|
||||
this.plugin = plugin;
|
||||
this.hook = hook;
|
||||
const defaultSettings = {};
|
||||
if (plugin.settings) {
|
||||
for (const id in plugin.settings) {
|
||||
const item = plugin.settings[id];
|
||||
defaultSettings[id] = item.defaultValue;
|
||||
}
|
||||
}
|
||||
const localSettingsSaveId = `__vue-devtools-plugin-settings__${plugin.id}`;
|
||||
let currentSettings = Object.assign({}, defaultSettings);
|
||||
try {
|
||||
const raw = localStorage.getItem(localSettingsSaveId);
|
||||
const data = JSON.parse(raw);
|
||||
Object.assign(currentSettings, data);
|
||||
} catch (e) {
|
||||
}
|
||||
this.fallbacks = {
|
||||
getSettings() {
|
||||
return currentSettings;
|
||||
},
|
||||
setSettings(value) {
|
||||
try {
|
||||
localStorage.setItem(localSettingsSaveId, JSON.stringify(value));
|
||||
} catch (e) {
|
||||
}
|
||||
currentSettings = value;
|
||||
},
|
||||
now() {
|
||||
return now();
|
||||
}
|
||||
};
|
||||
if (hook) {
|
||||
hook.on(HOOK_PLUGIN_SETTINGS_SET, (pluginId, value) => {
|
||||
if (pluginId === this.plugin.id) {
|
||||
this.fallbacks.setSettings(value);
|
||||
}
|
||||
});
|
||||
}
|
||||
this.proxiedOn = new Proxy({}, {
|
||||
get: (_target, prop) => {
|
||||
if (this.target) {
|
||||
return this.target.on[prop];
|
||||
} else {
|
||||
return (...args) => {
|
||||
this.onQueue.push({
|
||||
method: prop,
|
||||
args
|
||||
});
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
this.proxiedTarget = new Proxy({}, {
|
||||
get: (_target, prop) => {
|
||||
if (this.target) {
|
||||
return this.target[prop];
|
||||
} else if (prop === "on") {
|
||||
return this.proxiedOn;
|
||||
} else if (Object.keys(this.fallbacks).includes(prop)) {
|
||||
return (...args) => {
|
||||
this.targetQueue.push({
|
||||
method: prop,
|
||||
args,
|
||||
resolve: () => {
|
||||
}
|
||||
});
|
||||
return this.fallbacks[prop](...args);
|
||||
};
|
||||
} else {
|
||||
return (...args) => {
|
||||
return new Promise((resolve) => {
|
||||
this.targetQueue.push({
|
||||
method: prop,
|
||||
args,
|
||||
resolve
|
||||
});
|
||||
});
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
async setRealTarget(target) {
|
||||
this.target = target;
|
||||
for (const item of this.onQueue) {
|
||||
this.target.on[item.method](...item.args);
|
||||
}
|
||||
for (const item of this.targetQueue) {
|
||||
item.resolve(await this.target[item.method](...item.args));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// node_modules/@vue/devtools-api/lib/esm/index.js
|
||||
function setupDevtoolsPlugin(pluginDescriptor, setupFn) {
|
||||
const descriptor = pluginDescriptor;
|
||||
const target = getTarget();
|
||||
const hook = getDevtoolsGlobalHook();
|
||||
const enableProxy = isProxyAvailable && descriptor.enableEarlyProxy;
|
||||
if (hook && (target.__VUE_DEVTOOLS_PLUGIN_API_AVAILABLE__ || !enableProxy)) {
|
||||
hook.emit(HOOK_SETUP, pluginDescriptor, setupFn);
|
||||
} else {
|
||||
const proxy = enableProxy ? new ApiProxy(descriptor, hook) : null;
|
||||
const list = target.__VUE_DEVTOOLS_PLUGINS__ = target.__VUE_DEVTOOLS_PLUGINS__ || [];
|
||||
list.push({
|
||||
pluginDescriptor: descriptor,
|
||||
setupFn,
|
||||
proxy
|
||||
});
|
||||
if (proxy)
|
||||
setupFn(proxy.proxiedTarget);
|
||||
}
|
||||
}
|
||||
export {
|
||||
isPerformanceSupported,
|
||||
now,
|
||||
setupDevtoolsPlugin
|
||||
};
|
||||
//# sourceMappingURL=vitepress___@vue_devtools-api.js.map
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -10,16 +10,16 @@ export default {
|
|||
{
|
||||
text: "Dev",
|
||||
link: "/dev/",
|
||||
activeMatch: "/dev/",
|
||||
activeMatch: "/dev/"
|
||||
// items: [
|
||||
// { text: "Sommaire", link: "/dev/" },
|
||||
// { text: "introduction", link: "/dev/introduction/" },
|
||||
// { text: "B1", link: "/dev/B1/" },
|
||||
// { text: "B2", link: "/dev/B2/" },
|
||||
// { text: "B3", link: "/dev/B3/" }
|
||||
// ]
|
||||
},
|
||||
{ text: "Design", link: "/design/", activeMatch: "/design/" },
|
||||
{ text: "À propos", link: "/a-propos", activeMatch: "/a-propos" },
|
||||
{ text: "À propos", link: "/a-propos", activeMatch: "/a-propos" }
|
||||
],
|
||||
sidebar: {
|
||||
// This sidebar gets displayed when user is
|
||||
|
|
@ -31,111 +31,55 @@ export default {
|
|||
{ text: "Sommaire", link: "/dev/" }, // /dev/index.md
|
||||
{ text: "Documentations", link: "/dev/docs" },
|
||||
{ text: "Outils", link: "/dev/outils" },
|
||||
{ text: "Les pros", link: "/dev/goat" },
|
||||
],
|
||||
{ text: "Les pros", link: "/dev/goat" }
|
||||
]
|
||||
},
|
||||
{
|
||||
text: "Fragments",
|
||||
text: "B1",
|
||||
collapsible: true,
|
||||
collapsed: true,
|
||||
items: [
|
||||
{
|
||||
text: "Base",
|
||||
items: [
|
||||
{
|
||||
text: "Structure du dossier",
|
||||
link: "/dev/fragments/base/01-structure",
|
||||
{ text: "Introduction B1", link: "/dev/B1/" },
|
||||
{ text: "HTML B1", link: "/dev/B1/html" }
|
||||
]
|
||||
},
|
||||
{
|
||||
text: "Robots txt",
|
||||
link: "/dev/fragments/base/02-robots",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
text: "HTML",
|
||||
link: "/dev/fragments/html/",
|
||||
items: [
|
||||
{
|
||||
text: "Titres",
|
||||
link: "/dev/fragments/html/01-titres",
|
||||
},
|
||||
{
|
||||
text: "Paragraphe",
|
||||
link: "/dev/fragments/html/02-paragraphe",
|
||||
},
|
||||
{
|
||||
text: "Image",
|
||||
link: "/dev/fragments/html/04-image",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
text: "CSS",
|
||||
items: [
|
||||
{
|
||||
text: "Reset CSS",
|
||||
link: "/dev/fragments/css/00-reset",
|
||||
},
|
||||
{
|
||||
text: "Centrer",
|
||||
link: "/dev/fragments/css/01-centrer",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
text: "Débutant",
|
||||
text: "B2",
|
||||
collapsible: true,
|
||||
collapsed: true,
|
||||
items: [
|
||||
{ text: "Introduction débutant", link: "/dev/01-debutant/" },
|
||||
{ text: "HTML débutant", link: "/dev/01-debutant/html" },
|
||||
{ text: "CSS débutant", link: "/dev/01-debutant/css" },
|
||||
{ text: "Typographie", link: "/dev/01-debutant/typographie" },
|
||||
],
|
||||
{ text: "Introduction B2", link: "/dev/B2/" },
|
||||
{ text: "HTML B2", link: "/dev/B2/html" }
|
||||
]
|
||||
},
|
||||
{
|
||||
text: "Intermédiaire",
|
||||
text: "B3",
|
||||
collapsible: true,
|
||||
collapsed: true,
|
||||
items: [
|
||||
{
|
||||
text: "Introduction intermédiaire",
|
||||
link: "/dev/02-intermediaire/",
|
||||
},
|
||||
// { text: "HTML intermédiaire", link: "/dev/02-intermediaire/html" },
|
||||
{ text: "CSS", link: "/dev/02-intermediaire/css" },
|
||||
{ text: "JavaScript", link: "/dev/02-intermediaire/javascript" },
|
||||
{ text: "Git", link: "/dev/02-intermediaire/git" },
|
||||
{ text: "Node.js", link: "/dev/02-intermediaire/nodejs" },
|
||||
{ text: "Markdown", link: "/dev/02-intermediaire/markdown" },
|
||||
],
|
||||
},
|
||||
{
|
||||
text: "Avancé",
|
||||
collapsed: true,
|
||||
items: [
|
||||
{ text: "Introduction avancé", link: "/dev/03-avance/" },
|
||||
// { text: "HTML avancé", link: "/dev/03-avance/html" },
|
||||
],
|
||||
{ text: "Introduction B3", link: "/dev/B3/" },
|
||||
{ text: "HTML B3", link: "/dev/B3/html" }
|
||||
]
|
||||
},
|
||||
{
|
||||
text: "Code Camp",
|
||||
collapsible: true,
|
||||
collapsed: true,
|
||||
items: [
|
||||
{ text: "Théorie", link: "/dev/code-camp/" },
|
||||
{ text: "Sujets", link: "/dev/code-camp/sujets" },
|
||||
],
|
||||
},
|
||||
{ text: "Sujets", link: "/dev/code-camp/sujets" }
|
||||
]
|
||||
}
|
||||
],
|
||||
"/design/": [
|
||||
{
|
||||
text: "Design",
|
||||
items: [
|
||||
{ text: "Introduction", link: "/design/" },
|
||||
{ text: "Emails", link: "/design/emails/" },
|
||||
],
|
||||
},
|
||||
],
|
||||
{ text: "Index", link: "/design/" },
|
||||
{ text: "Introduction", link: "/design/introduction" }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
outlineTitle: "Sur cette page",
|
||||
|
|
@ -143,24 +87,24 @@ export default {
|
|||
|
||||
footer: {
|
||||
message: "Ces contenus sont publiés sous licence Creative Commons",
|
||||
copyright: "CC BY-SA 4.0",
|
||||
copyright: "CC BY-SA 4.0"
|
||||
},
|
||||
|
||||
docFooter: {
|
||||
prev: "Précédent",
|
||||
next: "Suivant",
|
||||
},
|
||||
next: "Suivant"
|
||||
}
|
||||
},
|
||||
|
||||
editLink: {
|
||||
pattern: "https://gitlab.com/3_w/docs/-/edit/main/docs/:path",
|
||||
text: "Proposer des changements sur Gitlab",
|
||||
text: "Proposer des changements sur Gitlab"
|
||||
},
|
||||
|
||||
markdown: {
|
||||
theme: "one-dark-pro",
|
||||
externalLinks: {
|
||||
target: "_self",
|
||||
},
|
||||
},
|
||||
target: "_self"
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,13 @@
|
|||
<template>
|
||||
<blockquote>
|
||||
<slot>YELLO</slot>
|
||||
</blockquote>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "CustomBlockquote"
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -1,57 +1,13 @@
|
|||
:root {
|
||||
/* custom colors */
|
||||
--color-primary-light: hsl(11, 100%, 31%);
|
||||
--color-primary-dark: hsl(11, 100%, 75%);
|
||||
/* custom theme */
|
||||
--vp-c-brand-1: var(--color-primary-light);
|
||||
--vp-c-brand-2: var(--color-primary-light);
|
||||
|
||||
--vp-button-brand-bg: var(--color-primary-light);
|
||||
--vp-button-brand-text: var(--vp-c-bg);
|
||||
--vp-button-brand-hover-text: var(--color-primary-light);
|
||||
--vp-button-brand-active-text: var(--color-primary-light);
|
||||
--vp-button-brand-border: var(--color-primary-light);
|
||||
--vp-button-brand-hover-bg: var(--vp-c-bg);
|
||||
--vp-button-brand-active-bg: var(--vp-c-bg);
|
||||
--vp-button-brand-hover-border: var(--color-primary-light);
|
||||
--vp-button-brand-active-border: var(--color-primary-light);
|
||||
|
||||
/* --vp-custom-block-tip-bg: var(--vp-c-bg);
|
||||
--vp-custom-block-danger-bg: var(--vp-c-bg);
|
||||
--vp-custom-block-info-bg: var(--vp-c-bg);
|
||||
--vp-custom-block-warning-bg: var(--vp-c-bg);
|
||||
--vp-custom-block-tip-text: hsl(161, 96%, 20%);
|
||||
--vp-custom-block-warning-text: hsl(26, 95%, 29%);
|
||||
--vp-custom-block-danger-text: hsl(350, 75%, 38%); */
|
||||
|
||||
--vp-code-font-size: 0.9375rem;
|
||||
}
|
||||
.dark {
|
||||
--vp-c-brand-1: var(--color-primary-dark);
|
||||
--vp-c-brand-2: var(--color-primary-dark);
|
||||
|
||||
--vp-button-brand-bg: var(--color-primary-dark);
|
||||
--vp-button-brand-hover-text: var(--vp-c-dark);
|
||||
--vp-button-brand-active-text: var(--vp-c-dark);
|
||||
--vp-button-brand-border: var(--color-primary-dark);
|
||||
--vp-button-brand-hover-border: var(--color-primary-dark);
|
||||
--vp-button-brand-active-border: var(--color-primary-dark);
|
||||
|
||||
/* --vp-custom-block-tip-bg: var(--vp-c-bg);
|
||||
--vp-custom-block-danger-bg: var(--vp-c-bg);
|
||||
--vp-custom-block-info-bg: var(--vp-c-bg);
|
||||
--vp-custom-block-warning-bg: var(--vp-c-bg);
|
||||
--vp-custom-block-tip-text: hsl(161, 78%, 43%);
|
||||
--vp-custom-block-warning-text: hsl(32, 95%, 44%);
|
||||
--vp-custom-block-danger-text: hsl(0, 100%, 76%); */
|
||||
}
|
||||
|
||||
:where(details summary) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.prev-next a:hover {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,21 @@
|
|||
import DefaultTheme from "vitepress/theme";
|
||||
import PageLayout from "./layouts/PageLayout.vue";
|
||||
import "./custom.css";
|
||||
|
||||
const modules = import.meta.globEager("./components/**/*.vue");
|
||||
const components = [];
|
||||
|
||||
for (const path in modules) {
|
||||
components.push(modules[path].default);
|
||||
}
|
||||
|
||||
export default {
|
||||
...DefaultTheme,
|
||||
// Layout: PageLayout,
|
||||
enhanceApp({ app }) {
|
||||
// import all components globally
|
||||
components.forEach(comp => {
|
||||
app.component(comp.name, comp);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
|
|
@ -1,93 +0,0 @@
|
|||
# Designer des <span lang="en">emails</span> modernes
|
||||
|
||||
## Contexte
|
||||
|
||||
Gardez à l'esprit que chaque <span lang="en">template</span> (photoshop, sketch, figma…) sera converti en code à un moment donné.
|
||||
Ce guide vise à partager des bonnes pratiques lors de la conception graphique d'e-mails ainsi qu'à préserver la santé mentale des développeurs.
|
||||
|
||||
::: tip
|
||||
J'ai utilisé Photoshop et Sketch pour concevoir des <span lang="en">emails</span>. N'importe quel logiciel de prototypage suffit.
|
||||
|
||||
J'utilise également le [langage MJML](https://mjml.io) pour développer des <span lang="en">newsletter</span> car personne ne devrait encore avoir à le faire à la main… plus jamais.
|
||||
:::
|
||||
|
||||
## Connaissances générales
|
||||
|
||||
Les <span lang="en">emails</span> sont l'un des types de contenu internet les moins " avancés ". Ils sont encore développés avec des éléments de type `table` et **l'énorme diversité** des clients de messagerie rend presque impossible une compatibilité à 100 %.
|
||||
|
||||
::: info
|
||||
Je cherche à obtenir la plus grande compatibilité possible avec les clients de messagerie, donc je n'utiliserai pas de propriété comme les `media-queries` car ils ne sont pas supportés par tous les clients.
|
||||
:::
|
||||
|
||||
### Le <span lang="en">responsive</span>
|
||||
|
||||
Les <span lang="en">emails</span> peuvent être <span lang="en">responsive</span>, mais nous n'avons que très peu de contrôle sur cet aspect.
|
||||
Comme les <span lang="en">emails</span> font généralement jusqu'à 800px de large, il n'y a que deux versions : une version ordinateur et une version mobile.
|
||||
Ainsi, ce que vous voyez sur une version sera identique sur l'autre.
|
||||
|
||||
Par exemple, si vous alignez une image à droite sur la version ordinateur en raison d'une disposition en deux colonnes, l'image restera alignée à droite sur la version mobile en une colonne.
|
||||
|
||||
**Ce qui peut être bizarre :**
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
::: tip
|
||||
Lorsque nous concevons un produit web, nous avons l'habitude de penser d'abord au mobile (ou alors vous devriez). Le <span lang="en">mail</span>, pour une fois, suit la tendance !
|
||||
:::
|
||||
|
||||
### Colonnes
|
||||
|
||||
Idéalement, une mise en page en une seule colonne serait la meilleure chose à faire. Mais nous savons que les gens (clients et concepteurs) ont peur des choses simples. Donc j'accepte une mise en page en deux colonnes.
|
||||
|
||||
|
||||
|
||||
### Images
|
||||
|
||||
Les images sont beaucoup utilisées dans les <span lang="en">mail</span>. Parfois trop. Afin d'être le plus lisible et accessible possible, évitez de mettre du texte sur une image. Si vous devez le faire, ne mettez pas une information clé sur une image. Si le client bloque les images (par défaut sur de nombreux clients), votre <span lang="en">email</span> ne contiendra pas les informations nécessaires pour être pertinent.
|
||||
|
||||
Si vous souhaitez utiliser une ombre portée, veillez à la concevoir **à l'intérieur** de vos marges.
|
||||
|
||||
|
||||
|
||||
### Textes
|
||||
|
||||
Utilisez le plus de vrai texte dans vos <span lang="en">emails</span>. Le texte sous forme d'image ne fonctionnera pas bien.
|
||||
|
||||
Utilisez également les polices de caractères du système, telles que Arial, Trebuchet, Verdana, Times… La plupart des clients de messagerie ne peuvent pas afficher les polices personnalisées et vous ne pouvez donc pas prévoir quelle police par défaut sera utilisée.
|
||||
|
||||
::: danger ATTENTION
|
||||
**NE FAITES PAS** de retours à la ligne forcés.
|
||||
:::
|
||||
|
||||
Vous pouvez créer un nouveau paragraphe, sans problème, mais vous ne pouvez pas rendre le texte joli.
|
||||
De plus, les sauts de ligne forcés produisent un glyphe bizarre sur certains clients.
|
||||
|
||||
### Coins arrondis
|
||||
|
||||
À éviter. On peut les faire fonctionner, bien sûr. Mais est-ce vraiment nécessaire ?
|
||||
|
||||
::: details Réponse :
|
||||
Non.
|
||||
:::
|
||||
|
||||
Certains clients supportent les coins arrondis, d'autres ne les montrent pas, d'autres, encore, les cassent un peu.
|
||||
|
||||
La seule façon sûre de le faire est d'exporter chaque coin arrondi en tant qu'image et de les placer manuellement autour d'un bloc de couleur. Comme je l'ai dit : évitez.
|
||||
|
||||
::: info
|
||||
Si vous n'êtes pas sûr de la compatibilité d'une fonctionnalité, vous pouvez consulter son adoption sur [<span lang="en">can I email.</span>](https://www.caniemail.com/).
|
||||
:::
|
||||
|
||||
## Mes recommandations
|
||||
|
||||
::: tip
|
||||
Je recommande une largeur d'<span lang="en">email</span> de 600 pixels avec des marges à gauche et à droite de 30 à 50 pixels.
|
||||
:::
|
||||
|
||||
C'est arbitraire mais 600 pixels permet un peu plus de compatibilité avec les petits écrans. Il y a moins de chance que la mise en page se casse à cause d'un écran 10 pixels trop petit.
|
||||
|
||||
Si vous devez exporter des images pour votre développeur chéri, exportez autant de `.jpg` que possible avec une qualité maximale de 79 %. Des images de plus petite taille accéléreront le temps de chargement.
|
||||
|
||||
> Allez bon courage maintenant !
|
||||
|
|
@ -1,3 +1,13 @@
|
|||
# Design
|
||||
|
||||
Supports et ressources concernant le design web.
|
||||
cool
|
||||
|
||||
::: info
|
||||
This is an info box.
|
||||
:::
|
||||
|
||||
## Introduction
|
||||
|
||||
### definition
|
||||
|
||||
## Getting started
|
||||
|
|
@ -1,93 +0,0 @@
|
|||
# CSS – Débutant
|
||||
|
||||
Le langage CSS (<span lang="en">cascading style sheets</span>) permet d'agir sur le style du document HTML. C'est-à dire toute la partie visuelle du contenu comme par exemple :
|
||||
|
||||
- la mise en page
|
||||
- les couleurs
|
||||
- les tailles
|
||||
- les marges
|
||||
- les polices de caractères
|
||||
- etc.
|
||||
|
||||
On parle de **“ règle CSS ”.** Une règle se construit ainsi :
|
||||
|
||||
`sélecteur` `{` `propriété` `:` `valeur` `;` `}`
|
||||
|
||||
::: details Afficher l'exemple
|
||||
|
||||
<<< @/snippets/css/base.css#rule
|
||||
|
||||
- `p` est le sélecteur
|
||||
- `color` est la propriété
|
||||
- `blue` est la valeur
|
||||
- `color: blue;` est la déclaration
|
||||
- l'ensemble forme **la règle**
|
||||
|
||||
:::
|
||||
|
||||
On écrit généralement les règles CSS en dehors du fichier HTML, dans un fichier `style.css`. Afin de relier les styles au HTML, il convient d'appeler le fichier via une balise `<link>`, positionnée dans la balise `<head>` du HTML.
|
||||
|
||||
::: details
|
||||
|
||||
```html
|
||||
<head>
|
||||
…
|
||||
<link rel="stylesheet" href="./css/style.css" />
|
||||
</head>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## Sélecteurs CSS
|
||||
|
||||
### Sélecteurs de balise
|
||||
|
||||
Ils sont identiques aux balises HTML (sauf head).
|
||||
|
||||
::: details Afficher le code
|
||||
<<< @/snippets/css/base.css#tag
|
||||
:::
|
||||
|
||||
### Sélecteurs de classe
|
||||
|
||||
Cible une classe définie dans le HTML avec un point.
|
||||
|
||||
::: details Afficher le code
|
||||
<<< @/snippets/css/base.css#class
|
||||
:::
|
||||
|
||||
### Sélecteurs d’attribut
|
||||
|
||||
Cible un attribut spécifique avec ou sans valeur entre crochets.
|
||||
|
||||
::: details Afficher le code
|
||||
<<< @/snippets/css/base.css#attr
|
||||
:::
|
||||
|
||||
### Sélecteurs multiples et chaînés
|
||||
|
||||
Il est possible de cibler plusieurs éléments ou d’enchaîner les sélecteurs.
|
||||
|
||||
::: details Afficher le code
|
||||
<<< @/snippets/css/base.css#chain
|
||||
:::
|
||||
|
||||
::: tip Conseil
|
||||
Entraînez-vous à utiliser les sélecteurs avec [cet exercice intéractif.](https://flukeout.github.io/)
|
||||
:::
|
||||
|
||||
## Propriétés CSS
|
||||
|
||||
::: info
|
||||
Il en existe beaucoup trop pour essayer de les résumer ici.
|
||||
Se référer à [la documentation.](https://developer.mozilla.org/fr/docs/Web/CSS/Reference)
|
||||
:::
|
||||
|
||||
## La cascade du style
|
||||
|
||||
Le CSS est régit par un concept appelé la cascade. La cascade est un ensemble de règles de priorité et d'importance. Elles servent à déterminer la règle CSS qui sera appliquée en cas de “ conflit ” entre plusieurs règles.
|
||||
|
||||
Les deux éléments de la cascade que nous utiliseront le plus ici sont **la spécificité et l'ordre.**
|
||||
|
||||
- [Cette présentation](https://slidr.io/bramus/the-css-cascade-a-deep-dive-2022-06-09-css-day#1) en anglais explique en détails le fonctionnement de la cascade.
|
||||
- [Cette page](https://wattenberger.com/blog/css-cascade) (en anglais également) permet de visualiser graphiquement la cascade.
|
||||
|
|
@ -1,76 +0,0 @@
|
|||
# Utiliser des typographies sur le web
|
||||
|
||||
Lorsque l'on publie du contenu sur le web, nous avons la possibilité de personnaliser les polices de caractères utilisées.
|
||||
|
||||
## Les polices système
|
||||
|
||||
Il existe une famille informelle de polices appellées "polices systèmes". Ce sont les polices qui ont le plus de chance d'être installées sur la quasi-totalité des ordinateurs, quelque soit le système d'exploitation utilisé. On y trouve notamment :
|
||||
|
||||
- Arial
|
||||
- Times New Roman
|
||||
- Trebuchet
|
||||
- Verdana
|
||||
- Georgia
|
||||
- Courier
|
||||
|
||||
## Modifier la police
|
||||
|
||||
En CSS, la propriété permettant de changer la police de caractères est `font-family`
|
||||
|
||||
```css
|
||||
body {
|
||||
font-family: Arial;
|
||||
}
|
||||
```
|
||||
|
||||
Afin de s'assurer un certain contrôle sur la police affichée dans le cas où l'utilisateur n'aurait pas celle que nous voulons utiliser, il convient de lister des polices alternatives. On termine généralement en utilisant un mot-clé générique définissant la famille de police souhaitée.
|
||||
|
||||
```css
|
||||
body {
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
}
|
||||
```
|
||||
|
||||
## Les polices personnalisées
|
||||
|
||||
L'intérêt des polices web vient surtout de la possibilité d'utiliser sa (ou ses) propre police.
|
||||
|
||||
### Choisir une police
|
||||
|
||||
La première étape est de choisir une police adaptée au projet. Il existe de nombreux sites proposant des polices gratuites à télécharger. Je vous recommande [Font Squirrel](https://www.fontsquirrel.com/) ou [Google fonts](https://fonts.google.com/).
|
||||
|
||||
### Préparer la police
|
||||
|
||||
Un fichier de police sera généralement au format `.otf` ou `.ttf`. Ces formats, bien que compatibles, ne sont pas adaptés pour une utilisation web. Il convient de les convertir au format `.woff2`. Vous pouvez le faire grâce à des outils en ligne tels que [Transfonter.](https://transfonter.org/)
|
||||
|
||||
Il est aussi possible de supprimer les caractères inutilisés dans le fichier de police (comme les alphabets non latin) afin de réduire le poids du fichier.
|
||||
|
||||
### Importer la police
|
||||
|
||||
Avant de pouvoir utiliser notre police personnalisée, nous devons la rendre disponible sur notre site web. Cela se passe dans le fichier CSS, grâce à la déclaration `@font-face`.
|
||||
|
||||
```css
|
||||
@font-face {
|
||||
font-family: "Luciole"; // on définit le nom de la police
|
||||
src: url("../fonts/webfonts/Luciole-Regular.woff2") format("woff2"); // chemin vers le fichier .woff2
|
||||
font-weight: normal; // graisse de la police
|
||||
font-style: normal; // style de la police
|
||||
font-display: swap; // stratégie de chargement de la police
|
||||
}
|
||||
```
|
||||
|
||||
### Utiliser la police
|
||||
|
||||
Il ne reste plus qu'à indiquer aux éléments concernés qu'ils doivent utiliser notre police personnalisée !
|
||||
|
||||
:::warning Attention
|
||||
N'oubliez pas les polices de secours 😉
|
||||
:::
|
||||
|
||||
```css
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
font-family: "Luciole", Arial, sans-serif;
|
||||
}
|
||||
```
|
||||
|
|
@ -1,114 +0,0 @@
|
|||
# CSS Intermédiaire
|
||||
|
||||
Dans cette partie plus poussée, nous verrons des techniques de mise en page avancée comme les grilles CSS ainsi que des fonctionnalités CSS dynamiques telles que les variables.
|
||||
|
||||
## Les variables CSS
|
||||
|
||||
Depuis quelques années, le langage CSS permet de définir et d'utiliser des variables. Une variable est un élément qui stocke une valeur.
|
||||
L'intérêt des variables réside principalement, mais pas uniquement, dans le fait de pouvoir utiliser une même valeur dynamique à plusieurs endroits. Ainsi, si la variable doit être modifiée, elle modifiera toutes ses instances en une seule fois.
|
||||
|
||||
Par exemple, si la couleur principale d'une marque change, il suffira de mettre la variable à jour et pas de chercher et modifier chaque occurrence de la couleur en question dans le code.
|
||||
|
||||
Une variable peut stocker n'importe quelle valeur. Qu'il s'agisse d'une couleur, d'une suite de chiffre ou encore d'une fonction entière.
|
||||
|
||||
### Syntaxe
|
||||
|
||||
Pour définir une variable en CSS, il convient de respecter la nomenclature suivante :
|
||||
`--` `NOM-DE-VARIABLE` `:` `VALEUR`
|
||||
|
||||
Les variables globales sont généralement définies dans un sélecteur `:root`
|
||||
Par exemple :
|
||||
|
||||
```css
|
||||
:root {
|
||||
--text-color: #222222;
|
||||
--bg-color: white;
|
||||
}
|
||||
```
|
||||
|
||||
### Utilisation
|
||||
|
||||
Une fois définies, les variables sont disponibles mais n'auront pas d'effet tant qu'elles ne seront pas appliquées à un propriété CSS. Pour utiliser une variable, il faut utiliser la fonction CSS `var()`
|
||||
|
||||
```css
|
||||
body {
|
||||
color: var(--text-color); // #222222
|
||||
background-color: var(--bg-color); // white
|
||||
}
|
||||
```
|
||||
|
||||
Afin d'éviter d'utiliser une variable qui n'existe pas ou qui pourrait être supprimée, on peut définir une deuxième valeur dans la fonction `var()` qui servira de valeur de secours.
|
||||
|
||||
```css
|
||||
body {
|
||||
color: var(--text-color, black); // #222222
|
||||
background-color: var(--brand-color, #f0f0f0); // #f0f0f0
|
||||
}
|
||||
```
|
||||
|
||||
## CSS Grid
|
||||
|
||||
La propriété `display: grid` permet de créer des grilles de mise en page, c'est-à-dire des colonnes, des lignes et des cellules dans lesquelles placer le contenu HTML.
|
||||
|
||||
Je vous recommande la lecture détaillée et l'utilisation des exemples dynamiques de [cet article sur les grilles CSS.](https://www.joshwcomeau.com/css/interactive-guide-to-grid/)
|
||||
|
||||
### Utilisation
|
||||
|
||||
La grille se déclare sur un élément (parent) contenant d'autres éléments (enfants). Toute la structure de la grille sera également déclarée sur la parent.
|
||||
|
||||
```css
|
||||
.parent {
|
||||
// On initialise la grille
|
||||
display: grid;
|
||||
// On créé des colonnes
|
||||
grid-template-columns: 1fr 3fr; // 2 colonnes
|
||||
// On créé des lignes
|
||||
grid-template-rows: 100px 1fr 50px; // 3 lignes
|
||||
}
|
||||
```
|
||||
|
||||
L'unité `fr` utilisée ici permet de dire aux colonnes et lignes de répartir l'espace disponible selon des **fr**actions. Ainsi, la deuxième colonne bénificiera des 3 quart de l'espace disponible alors que la première n'en aura qu'un quart.
|
||||
|
||||
### La répétition de colonnes
|
||||
|
||||
Si nos colonnes doivent partager l'espace de manière égale, il est possible d'utiliser la fonction `repeat()` afin d'optimiser la déclaration.
|
||||
|
||||
```css
|
||||
.parent {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr); // 3 colonnes de 1fr chacune
|
||||
}
|
||||
```
|
||||
|
||||
### La répétition <span lang="en">responsive</span>
|
||||
|
||||
Bien que pratique, cette déclaration n'est pas <span lang="en">responsive</span>. On peut la modifier dans une règle `@media` en fonction de la taille de la fenêtre. On peut également définir une grille fluide qui s'adaptera d'elle-même à l'espace disponible dans le navigateur.
|
||||
|
||||
```css
|
||||
.parent {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
}
|
||||
```
|
||||
|
||||
- `auto-fit` permet de dire aux cellules de grandir afin de remplir l'espace disponible dans la ligne
|
||||
- `minmax()` est une fonction qui permet de définir une valeur minimum et une valeur maximum
|
||||
- `300px` est la largeur minimum d'une cellule
|
||||
- `1fr` est la largeur maximum
|
||||
|
||||
Ainsi, la grille va calculer dynamiquement combien d'enfants peuvent rentrer côte-à-côte dans l'espace disponible en se basant sur les valeurs min et max. Lorsqu'un enfant n'a plus la place, il passe à la ligne.
|
||||
|
||||
#### Optimisation finale
|
||||
|
||||
Pour éviter de causer un débordement horizontal à cause de la valeur min sur les petits écrans, on préfèrera utiliser un garde-fou qui garantira que les enfants resteront contenus dans la page.
|
||||
|
||||
```css
|
||||
.parent {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
|
||||
}
|
||||
```
|
||||
|
||||
- `min()` est une fonction qui permet de choisir la plus petite valeur entre deux
|
||||
- `300px` est la largeur minimum idéale d'une cellule
|
||||
- `100%` est la largeur minimum permise pour éviter un débordement horizontal
|
||||
|
|
@ -1,104 +0,0 @@
|
|||
# Versionner son code avec Git
|
||||
|
||||
[Git](https://git-scm.com/) est un logiciel de [gestion de version](https://fr.wikipedia.org/wiki/Gestion_de_versions).
|
||||
|
||||
## Interfaces et serveurs
|
||||
|
||||
Git permet de stocker et sauvegarder des documents ainsi que leurs versions précédentes sur un serveur prévu à cet effet. Les plus connus sont :
|
||||
|
||||
- [Github](https://github.com/)
|
||||
- [Gitlab](https://about.gitlab.com/)
|
||||
- [Bitbucket](https://bitbucket.org/)
|
||||
- [Gitea](https://gitea.io/)
|
||||
|
||||
Certains de ces services proposent des fonctionnalités avancés de suivi des bugs, d’automatisation des tâches, etc.
|
||||
|
||||
::: info
|
||||
Les trois premiers proposent un compte gratuit largement suffisant pour un usage classique.
|
||||
Le dernier est à installer sois-même sur un serveur.
|
||||
:::
|
||||
|
||||
## Utilisation locale
|
||||
|
||||
### Installtion
|
||||
|
||||
#### MacOs
|
||||
|
||||
Git est inclus dans MacOs, mais vous devez installer les <span lang="en">command line tools</span> avant de pouvoir l'utiliser.
|
||||
|
||||
:::warning Attention
|
||||
Si c'est la première fois que vous tentez d'utiliser le terminal ou certaines commandes, MacOS vous demandera d'installer les <span lang="en">command line tools</span>. C'est une suite d'outils indispensable pour utiliser certaines fonctionnalités en ligne de commande (dans un terminal).
|
||||
Vous pouvez déclencher cette installation via la commande `xcode-select --install`
|
||||
:::
|
||||
|
||||
#### Windows
|
||||
|
||||
Git doit être installé via un exécutable windows [téléchargeable ici.](https://git-scm.com/download/win)
|
||||
|
||||
### Outils
|
||||
|
||||
Afin de créer et gérer un dépôt de documents (généralement un dossier contenant le code source de notre projet), il est nécessaire d’utiliser un terminal. Il est possible d’utiliser le terminal intégré à son logiciel de développement ou celui de son système d’exploitation :
|
||||
|
||||
- **terminal** sur MacOS et linux
|
||||
- **powershell** sur Windows
|
||||
|
||||
### Authentification du serveur
|
||||
|
||||
Pour éviter d’avoir à renseigner le mot de passe de son compte github, gitlab, gitea à chaque fois, il est recommandé d’utiliser une clé SSH. Ce protocole permet une authentification en arrière plan de votre machine auprès du serveur.
|
||||
|
||||
Afin de générer une clé, renseignez et validez la commande suivant dans le terminal :
|
||||
|
||||
```bash
|
||||
ssh-keygen -t ed25519 -C "VOTRE_EMAIL"
|
||||
```
|
||||
|
||||
Ne renseignez pas de mot/phrase de passe. Vous devriez recevoir une réponse du terminal contenant la localisation de la clé sur votre ordinateur ainsi qu’une “empreinte” de clé.
|
||||
|
||||
::: details Exemple d’empreinte
|
||||
|
||||
```bash
|
||||
The key fingerprint is:
|
||||
SHA256://wlS3vSWCovCYh+Y5LbtlS1Ee4nr0e3mTOmFq7//us test@mail.fr
|
||||
The key’s randomart image is:
|
||||
+--[ED25519 256]--+
|
||||
| . |
|
||||
| . . |
|
||||
| + |
|
||||
| o o |
|
||||
| .S.. + . |
|
||||
| . .o. =. o|
|
||||
| . .. ...o=*=|
|
||||
| +o= o+==%o|
|
||||
| .*oo .BO@E*|
|
||||
+----[SHA256]-----+
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
Vous devez ensuite récupérer la clé publique, généralement `id_ed25519.pub`, copier son contenu et le coller dans les paramètres de votre compte github, gitlab, etc.
|
||||
|
||||
### Création d’un dépôt
|
||||
|
||||
Les étapes de création d’un dépôt sont quasiment systématiquement les mêmes :
|
||||
|
||||
1. ouvrir le dossier de travail dans le terminal
|
||||
2. taper la commande `git init`
|
||||
3. se rendre sur son serveur git en ligne
|
||||
4. créer un nouveau dépôt vide depuis l’interface
|
||||
|
||||
### Envoyer des fichiers vers le serveur
|
||||
|
||||
Maintenant que le dépôt est créé, il faut faire le lien entre votre projet local et dépôt sur le serveur. À l’intérieur du dépôt distant vide, vous devriez trouver des commandes fournies par le serveur. Ces commandes peuvent-être copiées/collées dans l’ordre dans le terminal.
|
||||
|
||||
1. ajouter le serveur comme dépôt distant
|
||||
- `git remote add origin git@github.com:USER/REPO.git`
|
||||
2. demander à git de suivre tous les fichiers du dossier
|
||||
- `git add .`
|
||||
3. ajouter et figer l’état des fichiers suivis avec un commentaire
|
||||
- `git commit -m "COMMENTAIRE"`
|
||||
4. envoyer les fichiers sur le serveur
|
||||
- `git push origin main`
|
||||
|
||||
::: tip
|
||||
À chaque fois que vous souhaitez envoyer des modifications, répétez les étapes 2 à 4
|
||||
:::
|
||||
|
|
@ -1 +0,0 @@
|
|||
# HTML – Intermédiaire
|
||||
|
|
@ -1,141 +0,0 @@
|
|||
# JavaScript – Intermédiare
|
||||
|
||||
Le JavaScript est un langage de programmation dont nous nous servirons pour rendre nos pages HTML/CSS dynamiques.
|
||||
|
||||
On l'écrit généralement en dehors du HTML, dans un fichier `main.js`. Afin de relier le JavaScript au HTML, il convient d'appeler le fichier via une balise `<script>`, positionnée avant la balise `<body>` fermante.
|
||||
|
||||
::: details
|
||||
|
||||
```html{3}
|
||||
<body>
|
||||
…
|
||||
<script src="./js/main.js"></script>
|
||||
</body>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## Les types de données
|
||||
|
||||
Il existe en JavaScript plusieurs [types de données :](https://developer.mozilla.org/fr/docs/Web/JavaScript/Data_structures)
|
||||
|
||||
- Valeurs primitives :
|
||||
- <span lang="en">Number</span> (nombre)
|
||||
- <span lang="en">String</span> (chaîne de caractères)
|
||||
- <span lang="en">Boolean</span> (booléen)
|
||||
- <span lang="en">Null</span> (nul)
|
||||
- <span lang="en">Undefined</span> (indéfini)
|
||||
- <span lang="en">Object</span> (objet)
|
||||
|
||||
Il est possible de regrouper ces types de données dans des tableaux (<span lang="en">Array</span>).
|
||||
|
||||
## Sélectionner le document HTML ([DOM](https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Introduction))
|
||||
|
||||
JavaScript nous permet d'éxécuter des actions sur une page HTML. Par exemple :
|
||||
|
||||
- afficher, masquer, créer et supprimer des éléments ;
|
||||
- stocker, trier, organiser des données ;
|
||||
- modifier les styles CSS ;
|
||||
- ajouter des conditions, des boucles, des événements…
|
||||
- etc.
|
||||
|
||||
Dans la plupart des cas, il est nécessaire de cibler un ou plusieurs éléments du document HTML afin de leur appliquer ces actions.
|
||||
Afin de sélectionner un élément HTML en JavaScript, il faut utiliser une méthode permettant de cibler le ou les éléments qui nous intéressent. Il est possible de cibler un élément via le nom de sa balise, la valeur d'un attribut (`id` ou `classe` par exemple) ou d'autres moyens plus complexes que nous ne verrons pas ici.
|
||||
|
||||
### Sélectionner des balises
|
||||
|
||||
La méthode pour sélectionner une balise est la suivante :
|
||||
|
||||
<<< @/snippets/js/DOM-select.js#getElementsByTagName
|
||||
|
||||
Toutes les balises correspondantes sont retournées sous forme de `HTMLCollection` (un équivalent de tableau JavaScript).
|
||||
|
||||
### Sélectionner un id
|
||||
|
||||
<<< @/snippets/js/DOM-select.js#getElementById
|
||||
|
||||
Retourne un objet.
|
||||
|
||||
### Sélectionner une classe
|
||||
|
||||
<<< @/snippets/js/DOM-select.js#getElementsByClassName
|
||||
|
||||
Retourne un tableau.
|
||||
|
||||
::: warning Attention à l'orthographe
|
||||
Notez que les méthodes qui retournent plusieurs éléments s'écrivent au pluriel alors que la sélection via un `id` est au singulier. Cela permet de se rappeler que la valeur d'un attribut `id` doit être unique dans la page HTML.
|
||||
:::
|
||||
|
||||
### Sélectionner librement n'importe quoi
|
||||
|
||||
Il existe une méthode permettant de spécifier librement le type d'attribut à sélectionner. Il devient possible de chaîner ces attributs à la manière d'un sélecteur CSS.
|
||||
|
||||
<<< @/snippets/js/DOM-select.js#querySelector
|
||||
|
||||
Retourne un objet pour `querySelector` ou un `NodeList` pour `querySelectorAll` (semblable à un tableau).
|
||||
|
||||
## Les variables
|
||||
|
||||
Lorsque l'on sélectionne un élément, la valeur retournée n'est pas enregistrée par défaut. Si nous avons besoin de cibler à nouveau le même élément, il faudra alors réécrire toute la méthode de sélection.
|
||||
|
||||
Afin d'éviter de dupliquer du code inutilement, il est possible de stocker des données dans des variables afin de les réutiliser à plusieurs endroits.
|
||||
|
||||
On peut créer une variable de trois façons :
|
||||
|
||||
- [const](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Statements/const)
|
||||
- [let](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Statements/let)
|
||||
- [var](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Statements/var)
|
||||
|
||||
Retenez que `const` permet de déclarer une variable constante, c'est-à-dire qu'elle ne peut pas être réaffectée.
|
||||
|
||||
### Stocker des données
|
||||
|
||||
#### Une seule valeur
|
||||
|
||||
Il est recommandé de déclarer des variables dès que l'on a besoin de conserver une valeur.
|
||||
|
||||
<<< @/snippets/js/variables.js#const
|
||||
|
||||
On peut assigner directement des type de données dans une variable.
|
||||
|
||||
<<< @/snippets/js/variables.js#dataTypes
|
||||
|
||||
#### Plusieurs valeurs
|
||||
|
||||
Pour stocker plusieurs valeurs, il est possible de déclarer un object ou un tableau (en fonction de nos besoins).
|
||||
|
||||
<<< @/snippets/js/variables.js#multiplesValues
|
||||
|
||||
## Écouter des événements
|
||||
|
||||
Une fois nos éléments HTML ciblés et stockés, nous avons besoin de déclencher des actions lorsque quelque chose se passe. Ce quelque chose peut être un clic, un survol, un champ de formulaire qui change, etc.
|
||||
|
||||
Nous devons donc **écouter** ces événements déclencher ce qui doit l'être ensuite. La méthode JavaScript à utiliser est `addEventListener('ÉVÉNEMENT', FONCTION)`
|
||||
|
||||
<<< @/snippets/js/variables.js#addEventListener
|
||||
|
||||
## Les conditions
|
||||
|
||||
Il est souvent nécessaire de déclencher des actions sur la page uniquement si certaines conditions sont remplies. Par exemple, nous pouvons regarder la valeur vraie ou fausse d'une variable et déclencher ou non une action.
|
||||
|
||||
```js
|
||||
if (condition) {
|
||||
// code à exécuter
|
||||
}
|
||||
```
|
||||
|
||||
Si la condition est remplie, le code sera exécuté. Sinon, il sera ignoré.
|
||||
|
||||
Une condition se construit de cette façon :
|
||||
|
||||
`if` `(` `valeur à évaluer` `opérateur` `valeur de référence` `)`
|
||||
|
||||
Par exemple : `if` `(` `myName` `===` `'Nico'` `)` ou encore `if` `(` `myAge` `>` `18` `)`
|
||||
|
||||
Voici [une liste d'opérateurs](https://www.joshwcomeau.com/operator-lookup/) et leurs explications (en anglais).
|
||||
|
||||
### Évaluer un booléen
|
||||
|
||||
Un booléen peut être soit vrai soit faux. Pour évaluer sa valeur, nous pouvons nous contenter de renseigner le nom de la variable
|
||||
|
||||
<<< @/snippets/js/variables.js#conditionsIf
|
||||
|
|
@ -1,137 +0,0 @@
|
|||
# Intro au markdown
|
||||
|
||||
Le langage markdown est une manière d'écrire du `html` simplifiée. Un fichier markdown seul ne sera pas compris par un navigateur. Il est indispensable de le " compiler " afin de le rendre lisible dans un navigateur.
|
||||
|
||||
## Titres
|
||||
|
||||
Pour écrire des titres, on préfixe avec des `#`. Autant de `#` que de niveau de titre.
|
||||
Exemple: `## h2`, `### h3`
|
||||
|
||||
## Listes
|
||||
|
||||
### Ordonnées
|
||||
|
||||
1. une
|
||||
2. liste
|
||||
3. ordonnée
|
||||
|
||||
:::details Code source
|
||||
|
||||
```md
|
||||
1. une
|
||||
2. liste
|
||||
3. ordonnée
|
||||
|
||||
équivalen à
|
||||
|
||||
1. une
|
||||
1. liste
|
||||
1. ordonnée
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### Désordonnées
|
||||
|
||||
- une
|
||||
- liste
|
||||
1. liste
|
||||
1. imbriquée
|
||||
- désordonnée
|
||||
|
||||
:::details Code source
|
||||
|
||||
```md
|
||||
- une
|
||||
- liste
|
||||
1. liste
|
||||
1. imbriquée
|
||||
- désordonnée
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### Checkbox
|
||||
|
||||
- [ ] à faire
|
||||
- [x] urgent
|
||||
|
||||
:::warning Attention
|
||||
N'est pas supporté partout, comme ici par exemple 😬
|
||||
:::
|
||||
|
||||
## Code
|
||||
|
||||
Ligne de code: entourer avec des "backticks" `code`
|
||||
|
||||
:::details Code source
|
||||
|
||||
```md
|
||||
`code`
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
Bloc de code:
|
||||
|
||||
```css
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
```
|
||||
|
||||
:::details Code source
|
||||
|
||||
````md
|
||||
```css
|
||||
body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
:::
|
||||
|
||||
## Liens
|
||||
|
||||
`[texte du lien](https://cible-du-lien.fr)`
|
||||
|
||||
Exemple: [nardu.in](https://www.nardu.in)
|
||||
|
||||
## Images
|
||||
|
||||
``
|
||||
|
||||
|
||||
|
||||
## Mise en forme
|
||||
|
||||
On peut écrire du texte en gras ou en italique grâce aux `*` et/ou au `_`.
|
||||
|
||||
### Gras
|
||||
|
||||
Du texte **en gras.**
|
||||
|
||||
:::details Code source
|
||||
|
||||
```md
|
||||
Du texte **en gras.**
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### Italique
|
||||
|
||||
Du texte _en italique._
|
||||
|
||||
:::details Code source
|
||||
|
||||
```md
|
||||
Du texte _en italique._
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## Référence
|
||||
|
||||
[Documentation sur le markdown.](https://www.markdownguide.org/cheat-sheet/)
|
||||
|
|
@ -1,104 +0,0 @@
|
|||
# Installer Node.js
|
||||
|
||||
[Node.js](https://nodejs.org/fr) est un environnement d’exécution JavaScript. Plus simplement, c'est un outil permettant d'exécuter des programmes écrits en JavaScript sur un ordinateur.
|
||||
|
||||
## Versions
|
||||
|
||||
Node.js est en développement permanent, ce qui signifie que de nombreuses versions sont disponibles à l'utilisation. On distingue les version <abbr>`LTS`</abbr> <span lang="en">(long term support)</span> et les mises à jour classiques, plus nombreuses.
|
||||
|
||||
Afin d'installer et de gérer plusieurs versions de Node.js sur une seule machine, on peut installer un gestionnaire de version de node, autrement appeler <abbr>`nvm`</abbr> <span lang="en">(node version manager)</span>.
|
||||
|
||||
## MacOS
|
||||
|
||||
### Installation de nvm
|
||||
|
||||
Sur MacOS, on installera [nvm](https://github.com/nvm-sh/nvm) via une commande dans le terminal :
|
||||
|
||||
```sh
|
||||
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
|
||||
```
|
||||
|
||||
:::warning Attention
|
||||
Si c'est la première fois que vous tentez d'utiliser le terminal ou certaines commandes, MacOS vous demandera d'installer les <span lang="en">command line tools</span>. C'est une suite d'outils indispensable pour utiliser certaines fonctionnalités en ligne de commande (dans un terminal).
|
||||
Vous pouvez déclencher cette installation via la commande `xcode-select --install`
|
||||
:::
|
||||
|
||||
Pour vérifier que l'installation s'est bien passée, fermez le terminal puis relancez-le. Lancez enfin `nvm --version` dans le terminal. Vous devez obtenir une réponse similaire à :
|
||||
|
||||
```sh{2}
|
||||
$ nvm --version
|
||||
0.39.3
|
||||
```
|
||||
|
||||
Si vous obtenez un message d'erreur indiquant que vous n'avez pas de fichier `.bashrc` ou `.zshrc`, lancez la commande suivante pour créer ce dernier :
|
||||
|
||||
```sh
|
||||
# macOs Mojave (10.14) ou inférieure
|
||||
touch ~/.bashrc
|
||||
|
||||
# macOs Catalina (10.15) ou supérieure
|
||||
touch ~/.zshrc
|
||||
```
|
||||
|
||||
Relancez maintenant la commande d'installation de `nvm` puis `nvm --version` pour vérifier l'installation.
|
||||
|
||||
### Installation de node
|
||||
|
||||
Nous pouvons maintenant [installer une ou plusieurs versions](https://github.com/nvm-sh/nvm#long-term-support) de Node.js via nvm.
|
||||
|
||||
```sh
|
||||
# installer une version précise de node
|
||||
nvm install 20.2.0
|
||||
|
||||
# installer la dernière version lts en date
|
||||
nvm install lts/*
|
||||
|
||||
# installer une version lts précise
|
||||
nvm install lts/gallium
|
||||
```
|
||||
|
||||
### Utiliser une version installée
|
||||
|
||||
:::info
|
||||
Cette étape est inutile si vous n'avez qu'une seule version installée.
|
||||
:::
|
||||
|
||||
nvm fera de la première version que vous installerez la version par défaut de votre machine. On peut changer de version en utilisant `nvm use VERSION_INSTALLÉE`.
|
||||
|
||||
```sh
|
||||
# lister les versions installées sur la machine
|
||||
nvm ls
|
||||
|
||||
# choisir une version à utiliser
|
||||
nvm use 18.16.0
|
||||
```
|
||||
|
||||
## Windows
|
||||
|
||||
### Installation de nvm
|
||||
|
||||
Comme pour [git](./git.md), il faut installer `nvm` via un exécutable sur Windows. Rendez-vous sur [cette page](https://github.com/coreybutler/nvm-windows/releases) et téléchargez la dernière version de `nvm-setup.exe`.
|
||||
|
||||
### Installation de node
|
||||
|
||||
Ouvrez une fenêtre `powershell` windows puis lancez :
|
||||
|
||||
```sh
|
||||
# installer une version précise de node
|
||||
nvm install 20.2.0
|
||||
|
||||
# installer la dernière version lts en date
|
||||
nvm install lts
|
||||
```
|
||||
|
||||
### Utiliser une version installée
|
||||
|
||||
nvm attendra qu'on lui dise d'utiliser une version installée pour fonctionner. On peut choisir ou changer de version en utilisant `nvm use VERSION_INSTALLÉE`.
|
||||
|
||||
```sh
|
||||
# lister les versions installées sur la machine
|
||||
nvm list
|
||||
|
||||
# choisir une version à utiliser
|
||||
nvm use lts
|
||||
```
|
||||
|
|
@ -1 +0,0 @@
|
|||
# HTML – Avancé
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
# Avancé – Expertise
|
||||
|
||||
Au cours de votre deuxième année de formation en développement web, vous apprendrez à créer des pages complexes et dynamiques.
|
||||
|
||||
## Programme
|
||||
|
||||
:::info Voici à titre indicatif le programme prévisionnel pour la troisième année.
|
||||
Les sujets seront tous évoqués mais pas forcément dans l'ordre affiché.
|
||||
:::
|
||||
|
||||
1. HTML
|
||||
1. ARIA
|
||||
2. CSS
|
||||
1. Propriétés logiques
|
||||
2. Variables
|
||||
3. JS avancé (contenus dynamiques)
|
||||
1. API Rest
|
||||
2. Fetch
|
||||
3. Graphql
|
||||
4. Opérations CRUD
|
||||
4. Webapp (node)
|
||||
5. CI/CD (netlify/vercel)
|
||||
|
|
@ -1,24 +1,22 @@
|
|||
# HTML – Débutant
|
||||
# HTML B1
|
||||
|
||||
Le HTML (<span lang="en">hyper text markup language</span>) [est un langage de programmation](https://briefs.video/videos/is-html-a-programming-language/) qui sert à structurer, hiérarchiser et afficher le contenu d'une page web. Il s'écrit avec des balises suivant cette syntaxe :
|
||||
## HTML
|
||||
|
||||
Le HTML (<span lang="en">hyper text markup language</span>) est un langage de programmation qui sert à structurer, hiérarchiser et afficher le contenu d'une page web. Il s'écrit avec des balises suivant cette syntaxe :
|
||||
`<` `nom de la balise` `attributs` `>`
|
||||
`contenu de la balise`
|
||||
`</` `nom de la balise` `>`
|
||||
|
||||
La structure d'un document HTML est donc une suite de balises que l'on organise afin de donner du sens à notre contenu. Il nous revient de construire notre document HTML afin qu'il soit le plus explicite et sémantiquement correcte.
|
||||
|
||||
::: tip Astuce
|
||||
En HTML, chaque balise est une boîte. Se représenter une boîte par élément est un bon moyen de comprendre la structure du document. Tout est une boîte en HTML.
|
||||
:::
|
||||
|
||||
## Les balises indispensables
|
||||
### Les balises indispensables
|
||||
|
||||
- `<!DOCTYPE>` = déclaration du type de document
|
||||
- `<html>` = racine du document, contient tous les autres éléments
|
||||
- `<head>` = fournit des informations générales (métadonnées) sur le document
|
||||
- `<body>` = contenu principal du document
|
||||
|
||||
## Les balises et attributs recommandés
|
||||
### Les balises et attributs recommandés
|
||||
|
||||
- `lang` = déclaration du langage utilisé pour le contenu
|
||||
- `dir` = Sens de lecture du contenu
|
||||
|
|
@ -29,7 +27,7 @@ En HTML, chaque balise est une boîte. Se représenter une boîte par élément
|
|||
<<< @/snippets/html/base.html#base
|
||||
:::
|
||||
|
||||
## Les balises structurantes
|
||||
### Les balises structurantes
|
||||
|
||||
- `<header>` = en-tête
|
||||
- `<nav>` = élément contenant des liens, destiné à la navigation
|
||||
|
|
@ -44,15 +42,13 @@ En HTML, chaque balise est une boîte. Se représenter une boîte par élément
|
|||
<<< @/snippets/html/base.html#structure
|
||||
:::
|
||||
|
||||
## Les balises de contenus
|
||||
### Les balises de contenus
|
||||
|
||||
On distingue deux catégories de balises: bloc (<span lang="en">block</span>) et en ligne (<span lang="en">inline</span>). Les balises en ligne ne peuvent pas contenir de balises bloc.
|
||||
|
||||
Ci-dessous, quelques exemples de balises (listes non exhaustives).
|
||||
|
||||
### Balises bloc
|
||||
|
||||
Les balises “ en bloc ” sont des balises qui occuperont toute la largeur disponible, quelle que soit la largeur de leur contenu.
|
||||
#### Balises bloc
|
||||
|
||||
- `<blockquote>` = une citation
|
||||
- `<p>` = un paragraphe
|
||||
|
|
@ -61,13 +57,7 @@ Les balises “ en bloc ” sont des balises qui occuperont toute la l
|
|||
- `<li>` = élément d’une liste
|
||||
- `<div>` = conteneur générique
|
||||
|
||||
::: info
|
||||
[Les balises structurantes](#les-balises-structurantes) sont toutes des balises en bloc.
|
||||
:::
|
||||
|
||||
### Balises en ligne
|
||||
|
||||
Les balises “ en ligne ” sont des balises qui occuperont uniquement la largeur de leur contenu.
|
||||
#### Balises en ligne
|
||||
|
||||
- `<img>` = insertion d’une image
|
||||
- `<a>` = un lien
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
# Débutant – Découverte
|
||||
# Découverte et bases
|
||||
|
||||
Au cours de votre première année de formation en développement web, vous apprendrez à écrire du HTML et du CSS afin de créer des pages web simples.
|
||||
|
||||
|
|
@ -29,16 +29,14 @@ Les sujets seront tous évoqués mais pas forcément dans l'ordre affiché.
|
|||
1. Propriétés basiques
|
||||
2. Gérer les images
|
||||
3. Responsive/Mobile first
|
||||
4. media queries
|
||||
5. flex
|
||||
6. grid
|
||||
8. Ressources externes
|
||||
1. Images
|
||||
2. Maquettes
|
||||
3. SVG
|
||||
4. Webfonts
|
||||
5. Optimisations
|
||||
9. Mise en ligne
|
||||
9. Développement local
|
||||
10. Mise en ligne
|
||||
|
||||
## Concepts et architecture
|
||||
|
||||
|
|
@ -48,5 +46,5 @@ Les sujets seront tous évoqués mais pas forcément dans l'ordre affiché.
|
|||
- **FTP**/SFTP = transfert de fichiers
|
||||
- **HTML** = contenus
|
||||
- **CSS** = styles
|
||||
- **JavaScript** = éléments dynamiques
|
||||
- **Javascript** = éléments dynamiques
|
||||
- **Fonts** = polices de caractères
|
||||
|
|
@ -0,0 +1 @@
|
|||
# HTML B2
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
# Intermédiaire - Approfondissement
|
||||
# Approfondissement
|
||||
|
||||
Au cours de votre deuxième année de formation en développement web, vous apprendrez à créer des pages complexes et dynamiques.
|
||||
|
||||
|
|
@ -9,22 +9,26 @@ Les sujets seront tous évoqués mais pas forcément dans l'ordre affiché.
|
|||
:::
|
||||
|
||||
1. Introduction et test du niveau de la classe
|
||||
2. HTML intermédiaire
|
||||
2. HTML avancé
|
||||
1. formulaires
|
||||
2. templating
|
||||
3. CSS intermédiaire
|
||||
3. CSS avancé
|
||||
1. Pseudo elements
|
||||
2. flex
|
||||
3. grid
|
||||
2. Propriétés logiques
|
||||
3. Variables
|
||||
4. Contenus
|
||||
1. CMS
|
||||
2. API
|
||||
3. BDD mysql
|
||||
5. Bases JS
|
||||
1. Introduction
|
||||
1. Présentation (front/back)
|
||||
2. Sélectionner le DOM
|
||||
3. Modifier les styles
|
||||
4. Ajouter des événements
|
||||
5. Ajouter des conditions
|
||||
6. Créer des boucles
|
||||
6. Versioning (git)
|
||||
7. SEO
|
||||
7. JS avancé (contenus dynamiques)
|
||||
1. Rest
|
||||
2. Fetch
|
||||
3. Graphql
|
||||
8. Webapp (node)
|
||||
|
|
@ -0,0 +1 @@
|
|||
# Intro B2
|
||||
|
|
@ -0,0 +1 @@
|
|||
# HTML B2
|
||||
|
|
@ -0,0 +1 @@
|
|||
# Frontend B3
|
||||
|
|
@ -0,0 +1 @@
|
|||
# Intro B3
|
||||
|
|
@ -12,7 +12,7 @@ Vous êtes sur le point de commencer une semaine intensive de développement web
|
|||
- **FTP**/SFTP = transfert de fichiers
|
||||
- **HTML** = contenus
|
||||
- **CSS** = styles
|
||||
- **JavaScript** = éléments dynamiques
|
||||
- **Javascript** = éléments dynamiques
|
||||
- **Fonts** = polices de caractères
|
||||
|
||||
## Configuration et préparation
|
||||
|
|
@ -41,27 +41,25 @@ code-camp/
|
|||
│ └── icon-guitar.svg
|
||||
└── 03_web/
|
||||
├── assets/
|
||||
│ ├── css/
|
||||
│ │ └── style.css
|
||||
│ ├── fonts/
|
||||
│ │ └── arial.woff2
|
||||
│ ├── images/
|
||||
│ │ └── hero.jpg
|
||||
│ ├── js/
|
||||
│ │ └── main.js
|
||||
│ └── svg/
|
||||
│ └── icon-guitar.svg
|
||||
├── css/
|
||||
│ ├── reset.css
|
||||
│ └── style.css
|
||||
├── js/
|
||||
│ └── main.js
|
||||
├── favicon.ico
|
||||
├── index.html
|
||||
└── robots.txt
|
||||
└── index.html
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## HTML
|
||||
|
||||
Le HTML (<span lang="en">hyper text markup language</span>) est un langage de programmation qui sert à structurer, hiérarchiser et afficher le contenu d'une page web. Il s'écrit avec des balises suivant cette syntaxe :
|
||||
Le HTML (<span lang="en">hyper text markup language</span>) est un langage de programmation qui sert à structurer, hiérarchiser et afficher le contenu d'une page web. Il s'écrit avec des balises suivant cette syntaxe :
|
||||
`<` `nom de la balise` `attributs` `>`
|
||||
`contenu de la balise`
|
||||
`</` `nom de la balise` `>`
|
||||
|
|
@ -130,7 +128,7 @@ Ci-dessous, quelques exemples de balises (listes non exhaustives).
|
|||
|
||||
## CSS
|
||||
|
||||
Le langage CSS (<span lang="en">cascading style sheets</span>) permet d'agir sur le style du document HTML. C'est-à dire toute la partie visuelle du contenu comme par exemple :
|
||||
Le langage CSS (<span lang="en">cascading style sheets</span>) permet d'agir sur le style du document HTML. C'est-à dire toute la partie visuelle du contenu comme par exemple :
|
||||
|
||||
- la mise en page
|
||||
- les couleurs
|
||||
|
|
@ -139,7 +137,7 @@ Le langage CSS (<span lang="en">cascading style sheets</span>) permet d'agir sur
|
|||
- les polices de caractères
|
||||
- etc.
|
||||
|
||||
On parle de “ règle CSS ”. Une règle se construit ainsi :
|
||||
On parle de « règle CSS ». Une règle se construit ainsi :
|
||||
|
||||
`sélecteur` `{` `propriété` `:` `valeur` `;` `}`
|
||||
|
||||
|
|
@ -202,7 +200,7 @@ Se référer à [la documentation.](https://developer.mozilla.org/fr/docs/Web/CS
|
|||
|
||||
### La cascade du style
|
||||
|
||||
Le CSS est régit par un concept appelé la cascade. La cascade est un ensemble de règles de priorité et d'importance. Elles servent à déterminer la règle CSS qui sera appliquée en cas de “ conflit ” entre plusieurs règles.
|
||||
Le CSS est régit par un concept appelé la cascade. La cascade est un ensemble de règles de priorité et d'importance. Elles servent à déterminer la règle CSS qui sera appliquée en cas de « conflit » entre plusieurs règles.
|
||||
|
||||
Les deux éléments de la cascade que nous utiliseront le plus ici sont **la spécificité et l'ordre.**
|
||||
|
||||
|
|
@ -211,7 +209,7 @@ Les deux éléments de la cascade que nous utiliseront le plus ici sont **la sp
|
|||
|
||||
## Accessibilité
|
||||
|
||||
D'après [Access42 :](https://access42.net/)
|
||||
D'après [Access42 :](https://access42.net/)
|
||||
|
||||
> L’accessibilité numérique est un droit fondamental. C’est la possibilité pour toutes et tous d’utiliser les outils informatiques, quelle que soit leur façon d’y accéder.
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ En suivant les maquettes fournies ou en imaginant votre propre design, **réalis
|
|||
|
||||
Le site devra être développé en <span lang="en">mobile first</span> et être <span lang="en">responsive</span>.
|
||||
|
||||
Il devra obligatoirement contenir ces éléments :
|
||||
Il devra obligatoirement contenir ces éléments :
|
||||
|
||||
- une photo de l'artiste
|
||||
- un clip vidéo
|
||||
|
|
|
|||
|
|
@ -1,49 +0,0 @@
|
|||
# Structure basique d'un dossier web
|
||||
|
||||
Lorsque vous commencez un nouveau projet, aidez-vous de cette structure pour créer les fichiers, dossiers et liens nécessaires.
|
||||
|
||||
## Structure complète
|
||||
|
||||
::: details Afficher la structure
|
||||
|
||||
```
|
||||
code-camp/
|
||||
├── 00_sources/
|
||||
│ ├── fonts/
|
||||
│ │ └── arial.ttf
|
||||
│ └── images/
|
||||
│ └── unsplash-concert_crowd.png
|
||||
├── 01_templates/
|
||||
│ ├── index.fig
|
||||
│ ├── index.sketch
|
||||
│ └── index.xd
|
||||
├── 02_export/
|
||||
│ ├── images/
|
||||
│ │ └── hero.jpg
|
||||
│ └── icons/
|
||||
│ └── icon-guitar.svg
|
||||
└── 03_web/ // [!code focus]
|
||||
├── assets/ // [!code focus]
|
||||
│ ├── fonts/ // [!code focus]
|
||||
│ │ └── arial.woff2 // [!code focus]
|
||||
│ ├── images/ // [!code focus]
|
||||
│ │ └── hero.jpg // [!code focus]
|
||||
│ └── svg/ // [!code focus]
|
||||
│ └── icon-guitar.svg // [!code focus]
|
||||
├── css/ // [!code focus]
|
||||
│ ├── reset.css // [!code focus]
|
||||
│ └── style.css // [!code focus]
|
||||
├── js/ // [!code focus]
|
||||
│ └── main.js // [!code focus]
|
||||
├── favicon.ico // [!code focus]
|
||||
├── index.html // [!code focus]
|
||||
└── robots.txt // [!code focus]
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## Base HTML
|
||||
|
||||
Exemple d'un fichier HTML contenant les liens vers les fichiers CSS, JS ainsi qu'une image.
|
||||
|
||||
<<< @/snippets/html/structure.html{8,9,16,20}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
# robots.txt
|
||||
|
||||
Le fichier `robots.txt` est un fichier placé à la racine du dossier web. Il permet de donner des instructions aux moteurs de recherche qui visitent un site.
|
||||
|
||||
Dans sa configuration la plus simple, il permet d'autoriser ou d'interdire l'indexation d'un site par les moteurs de recherche.
|
||||
|
||||
[Documentation plus complète.](http://robots-txt.com/)
|
||||
|
||||
## Autoriser
|
||||
|
||||
<<< @/snippets/robots.txt#allow
|
||||
|
||||
## Interdire
|
||||
|
||||
<<< @/snippets/robots.txt#disallow
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
# reset.css
|
||||
|
||||
::: info
|
||||
Le “ reset CSS ” est une méthode commune de remise à zéro des styles par défaut des différents navigateurs web. Ceci permet de partir d'une base “ saine ” en terme de styles.
|
||||
:::
|
||||
|
||||
Voici ma version personnelle de ce fichier. Il existe autant de versions que de développeuses et développeurs, chacun adaptant son `reset.css` à ses préférences et/ou habitudes de développement.
|
||||
|
||||
- [le reset de Josh Comeau](https://www.joshwcomeau.com/css/custom-css-reset/)
|
||||
- [le reset d'Andy Bell](https://andy-bell.co.uk/a-modern-css-reset/)
|
||||
|
||||
J'ai légèrement adaptée le mien depuis la version de [Elly Loel.](https://gist.github.com/EllyLoel/4ff8a6472247e6dd2315fd4038926522)
|
||||
|
||||
<<< @/snippets/css/reset.css
|
||||
|
|
@ -1,59 +0,0 @@
|
|||
# Centrer des éléments
|
||||
|
||||
Il existe plusieurs méthodes permettant de centrer des éléments en CSS. L'utilisation de l'une ou de l'autre dépend généralement du contexte dans lequel se trouve l'élément à centrer.
|
||||
|
||||
## Description
|
||||
|
||||
Il est possible de centrer horizontalement et verticalement. À la fois dans toute la page ou dans une zone de contenu définie.
|
||||
|
||||
## Exemples
|
||||
|
||||
### Centrer du texte
|
||||
|
||||
```CSS
|
||||
p {
|
||||
text-align: center;
|
||||
}
|
||||
```
|
||||
|
||||
### Centrer horizontalement un élément dont la largeur est restreinte
|
||||
|
||||
```CSS
|
||||
.container {
|
||||
max-inline-size: 60ch;
|
||||
margin-inline: auto;
|
||||
}
|
||||
```
|
||||
|
||||
### Centrer horizontalement le contenu d'un élément
|
||||
|
||||
```CSS
|
||||
.container {
|
||||
display: flex; /* ou grid */
|
||||
justify-content: center;
|
||||
}
|
||||
```
|
||||
|
||||
### Centrer verticalement le contenu d'un élément
|
||||
|
||||
```CSS
|
||||
.container {
|
||||
display: flex; /* ou grid */
|
||||
align-items: center;
|
||||
}
|
||||
```
|
||||
|
||||
### Centrer horizontalement et verticalement le contenu d'un élément
|
||||
|
||||
```CSS
|
||||
.container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
/* OU */
|
||||
.container {
|
||||
display: grid;
|
||||
place-content: center;
|
||||
}
|
||||
```
|
||||
|
|
@ -1,68 +0,0 @@
|
|||
# Titres
|
||||
|
||||
## Description
|
||||
|
||||
Les titres en HTML sont essentiels. Ils servent à structurer le contenu de la page en sections logiques. Tels la table des matières d'un livre, les titres doivent être organisés du plus important au moins important.
|
||||
|
||||
Il existe 6 niveaux de titres, nommés `hX` de 1 à 6:
|
||||
|
||||
- `<h1>` est le titre le plus important de la page. Il est indispensable. Il ne peut y en avoir qu'un seul par page. Il doit permettre d'identifier le contenu de la page.
|
||||
- `<h2>`
|
||||
- `<h3>`
|
||||
- `<h4>`
|
||||
- `<h5>`
|
||||
- `<h6>`
|
||||
|
||||
Les titres doivent se succéder de manière logique. Un `h2` doit succéder à un `h1`, un `h3` doit succéder à un `h2` et ainsi de suite.
|
||||
|
||||
On ne peut pas utiliser un `h4` après un `h2` si aucun `h3` n'est présent entre eux.
|
||||
|
||||
## Exemples
|
||||
|
||||
### Structure incorrecte
|
||||
|
||||
```html
|
||||
<h1>Titre principal</h1>
|
||||
<h2>Titre secondaire</h2>
|
||||
<h4>Sous-titre</h4> // [!code error]
|
||||
```
|
||||
|
||||
### Structure correcte
|
||||
```html
|
||||
<h1>Titre principal</h1>
|
||||
<h2>Titre secondaire</h2>
|
||||
<h3>Sous-titre</h3>
|
||||
<h2>Titre secondaire</h2>
|
||||
<h3>Sous-titre</h3>
|
||||
<h4>Sous-titre</h4>
|
||||
<h2>Titre secondaire</h2>
|
||||
```
|
||||
|
||||
### Structure complexe correcte
|
||||
|
||||
```html
|
||||
<h1>Sandwich PB&J</h1>
|
||||
<h2>Les ingrédients</h2> // [!code hl]
|
||||
<h3>Le frais</h3> // [!code hl]
|
||||
<ul>
|
||||
<li>confiture</li>
|
||||
</ul>
|
||||
<h3>Le sec</h3> // [!code hl]
|
||||
<ul>
|
||||
<li>pain</li>
|
||||
<li>beurre de cacahuette</li>
|
||||
</ul>
|
||||
<h2>Les étapes</h2> // [!code hl]
|
||||
<ol>
|
||||
<li>couper deux tartines de pain</li>
|
||||
<li>étaler la confiture sur une tartine</li>
|
||||
<li>étaler le beurre de cacahuette sur l’autre tartine</li>
|
||||
<li>faire un sandwich</li>
|
||||
</ol>
|
||||
```
|
||||
|
||||
Il est possible de revenir à un titre de niveau supérieur à n'importe quel moment.
|
||||
|
||||
:::warning Styles et titres
|
||||
Il est fréquent de voir des titres importants utiliser un niveau inférieur pour des raisons de styles. Ce n'est pas une bonne pratique, il faudra préférer utiliser une classe plutôt que de modifier la structure du document.
|
||||
:::
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
# Paragraphe
|
||||
|
||||
## Description
|
||||
|
||||
Un paragraphe est un morceau de texte lambda. Il contient généralement le contenu brut de la page. Il est souhaitable de séparer son contenu en plusieurs paragraphes afin de pouvoir séparer visuellement les différentes parties d'une même section de texte.
|
||||
|
||||
Il est généralement préférable d'utiliser plusieurs paragraphes plutôt que des sauts de ligne à l'intérieur d'un seul énorme paragraphe.
|
||||
|
||||
## Exemples
|
||||
|
||||
```html
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error, mollitia!</p>
|
||||
<p>
|
||||
Ut incidunt voluptas libero natus deleniti cum, quod eum nostrum sit ipsa illo
|
||||
repellendus in nulla, exercitationem consequatur cupiditate corporis ex
|
||||
veniam.
|
||||
</p>
|
||||
```
|
||||
|
||||
## Mise en forme
|
||||
|
||||
Afin de mettre en forme le contenu d'un paragraphe, il existe plusieurs balises utilisables. Ces balises se comportent “en ligne”, permettant ainsi de cohabiter les unes à côté des autres.
|
||||
|
||||
```html
|
||||
<strong>Permet de mettre du texte en avant et en gras</strong>
|
||||
<b>Permet de mettre du texte en gras</b>
|
||||
<em>Permet de mettre du texte en italique</em>
|
||||
<span>
|
||||
Est une balise sans effet par défaut, utile pour styler un morceau de texte en
|
||||
CSS
|
||||
</span>
|
||||
```
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
# Image
|
||||
|
||||
## Description
|
||||
|
||||
Afin d'insérer une image dans son document, il convient d'utiliser la balise `<img>`. Cette dernière est particulière car elle n'a pas besoin de balise dite “fermante”
|
||||
|
||||
C'est une balise qui fait partie de la famille des [“Éléments remplacés”.](https://developer.mozilla.org/fr/docs/Web/CSS/Replaced_element)
|
||||
|
||||
Cette balise nécessite deux attributs obligatoires: `src` et `alt` et deux attributs recommandés: `width` et `height`.
|
||||
|
||||
L'attribut `src` nous permet de renseigner la source de l'image. Que ce soit une URL distante ou bien un chemin vers une image locale.
|
||||
|
||||
L'attribut `alt` est à renseigner si l'image est “porteuse de sens”. **Si l'image est décorative, l'attribut `alt` doit rester vide mais ne doit pas être supprimé.**
|
||||
|
||||
Les attributs `width` et `height` sont à renseigner dans la mesure du possible afin que le navigateur réserve la place nécessaire à l'image au moment du chargement de la page.
|
||||
|
||||
## Exemples
|
||||
|
||||
```html
|
||||
<img
|
||||
src="./images/banniere-promo.jpg"
|
||||
alt="Économisez 40% avec le code BIENVENUE"
|
||||
width="600"
|
||||
height="60"
|
||||
/>
|
||||
```
|
||||
|
||||
```html
|
||||
<img
|
||||
src="https://photos-de-chats.fr/felix.png"
|
||||
alt=""
|
||||
width="300"
|
||||
height="400"
|
||||
/>
|
||||
```
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
# Fragments de code
|
||||
|
||||
Dans cette partie, vous trouverez des bouts de code (fragments) HTML. Ces exemples sont accompagnés d'une description rapide et existent afin que vous puissiez constituer votre bibliothèque personnelle d'éléments récurrents.
|
||||
|
||||
## Fragments disponibles
|
||||
|
||||
- [Titres](01-titres.md)
|
||||
|
|
@ -4,7 +4,7 @@ Bienvenue dans le monde merveilleux du développement web.
|
|||
|
||||
En commençant par les bases HTML/CSS, nous approfondirons nos connaissances de ces deux langages avant de poursuivre vers le JavaScript.
|
||||
|
||||
Nous aborderons l'apprentissage du développement web par le prisme de [l’accessibilité numérique](https://access42.net/decouvrir-accessibilite?lang=fr) et de “ [l’amélioration progressive](https://briefs.video/videos/is-progressive-enhancement-dead-yet/) ”
|
||||
Nous aborderons l'apprentissage du développement web par le prisme de [l’accessibilité numérique](https://access42.net/decouvrir-accessibilite?lang=fr) et de « [l’amélioration progressive](https://briefs.video/videos/is-progressive-enhancement-dead-yet/) »
|
||||
|
||||
## Ressources
|
||||
|
||||
|
|
@ -14,7 +14,7 @@ Nous aborderons l'apprentissage du développement web par le prisme de [l’acce
|
|||
|
||||
## Niveaux
|
||||
|
||||
- [Débutant — Découverte et bases](./01-debutant/)
|
||||
- [Intermédiaire — Approfondissement](./02-intermediaire/)
|
||||
- [Avancé — Expertise web](./03-avance/)
|
||||
- [B1 — Découverte et bases](./B1/)
|
||||
- [B2 — Approfondissement](./B2/)
|
||||
- [B3 — Expertise web](./B3/)
|
||||
- [Code Camp — Découverte intensive](./code-camp/)
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
|
|
@ -0,0 +1,29 @@
|
|||
---
|
||||
layout: doc
|
||||
---
|
||||
|
||||
# Directus
|
||||
|
||||
Outil de gestion de contenus (CMS).
|
||||
|
||||
## Présentation
|
||||
|
||||
Directus est un outil permettant de gérer des informations stockées dans une base de données. Ici, il va nous permettre d'administrer les contenus d'un site web.
|
||||
|
||||
## Interface
|
||||
|
||||
### Connexion
|
||||
|
||||
L'interface d'administration est accessible via l'URL qui vous a été communiquée.
|
||||
|
||||
|
||||
|
||||
### Contenus (collections)
|
||||
|
||||
Les contenus sont organisés en "collections". Généralement, une collection représente une page ou un ensemble de pages identiques.
|
||||
|
||||
Exemple de collection de pages identiques. Ici, les champs de contenus sont configurés à l'avance.
|
||||
|
||||
|
||||
Exemple de collection d'une page unique. Chaque nouvel élément créé dans cette collection deviendra une page sur le site.
|
||||
|
||||
|
|
@ -1,2 +1,2 @@
|
|||
User-agent: *
|
||||
Allow: /
|
||||
Disallow: /
|
||||
|
|
@ -1,98 +0,0 @@
|
|||
/* RESET */
|
||||
* {
|
||||
/* Remove default margin on everything */
|
||||
margin: 0;
|
||||
/* Remove default padding on everything */
|
||||
padding: 0;
|
||||
/* Calc `em` based line height, bigger line height for smaller font size and smaller line height for bigger font size: https://kittygiraudel.com/2020/05/18/using-calc-to-figure-out-optimal-line-height/ */
|
||||
line-height: calc(0.25rem + 1em + 0.25rem);
|
||||
}
|
||||
/* Use a more-intuitive box-sizing model on everything */
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
/* Remove border and set sensible defaults for backgrounds, on all elements except fieldset progress and meter */
|
||||
*:where(:not(fieldset, progress, meter)) {
|
||||
border-width: 0;
|
||||
border-style: solid;
|
||||
background-origin: border-box;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
html {
|
||||
/* Allow percentage-based heights in the application */
|
||||
block-size: 100%;
|
||||
/* Making sure text size is only controlled by font-size */
|
||||
-webkit-text-size-adjust: none;
|
||||
/* Improve text rendering */
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
/* Smooth scrolling for users that don't prefer reduced motion */
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
html:focus-within {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
}
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
font-family: Arial, sans-serif;
|
||||
font-weight: normal;
|
||||
/* Allow percentage-based heights in the application */
|
||||
min-block-size: 100%;
|
||||
/* https://www.sarasoueidan.com/blog/safari-fluid-typography-bug-fix/ */
|
||||
-webkit-marquee-increment: 0vw;
|
||||
}
|
||||
/* Improve media defaults */
|
||||
:where(img, svg, video, canvas, audio, iframe, embed, object) {
|
||||
display: block;
|
||||
}
|
||||
:where(img, svg, video) {
|
||||
block-size: auto;
|
||||
max-inline-size: 100%;
|
||||
}
|
||||
/* Smaller line height for titles */
|
||||
:where(h1, h2, h3) {
|
||||
line-height: 1.1;
|
||||
}
|
||||
/* Avoid text overflows */
|
||||
:where(p, h1, h2, h3, h4, h5, h6) {
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
|
||||
:where(ul, ol)[role='list'] {
|
||||
list-style: none;
|
||||
}
|
||||
/* More readable underline style for anchor tags without a class. This could be set on anchor tags globally, but it can cause conflicts. */
|
||||
a:not([class]) {
|
||||
text-decoration-skip-ink: auto;
|
||||
}
|
||||
/* Make it clear that interactive elements are interactive */
|
||||
:where(a[href], area, button, input, label[for], select, summary, textarea, [tabindex]:not([tabindex*='-'])) {
|
||||
cursor: pointer;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
:where(input[type='file']) {
|
||||
cursor: auto;
|
||||
}
|
||||
:where(input[type='file'])::-webkit-file-upload-button,
|
||||
:where(input[type='file'])::file-selector-button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Make sure users can't select button text */
|
||||
:where(button, button[type], input[type='button'], input[type='submit'], input[type='reset']),
|
||||
:where(input[type='file'])::-webkit-file-upload-button,
|
||||
:where(input[type='file'])::file-selector-button {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-touch-callout: none;
|
||||
user-select: none;
|
||||
text-align: center;
|
||||
}
|
||||
/* Disabled cursor for disabled buttons */
|
||||
:where(button, button[type], input[type='button'], input[type='submit'], input[type='reset'])[disabled] {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
/* END RESET */
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="fr" dir="ltr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="./css/reset.css" />
|
||||
<link rel="stylesheet" href="./css/style.css" />
|
||||
<title>Base</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header></header>
|
||||
<main>
|
||||
<img src="./assets/images/hero.jpg" alt="">
|
||||
</main>
|
||||
<footer></footer>
|
||||
|
||||
<script src="/js/main.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
// #region getElementsByTagName
|
||||
// sélectionner tous les éléments "section"
|
||||
document.getElementsByTagName("section");
|
||||
// #endregion getElementsByTagName
|
||||
|
||||
// #region getElementById
|
||||
// sélectionner l'élément dont la valeur de l'attribut id est "custom"
|
||||
document.getElementById("custom");
|
||||
// #endregion getElementById
|
||||
|
||||
// #region getElementsByClassName
|
||||
// sélectionner les éléments dont la valeur de l'attribut class est "card"
|
||||
document.getElementsByClassName("card");
|
||||
// #endregion getElementsByClassName
|
||||
|
||||
// #region querySelector
|
||||
// sélectionner le premier élément de classe "card" dans une section d'id "custom"
|
||||
document.querySelector("section#custom .card");
|
||||
|
||||
// sélectionner tous les éléments "button"
|
||||
document.querySelectorAll("button");
|
||||
// #endregion querySelector
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
// #region const
|
||||
// stocker l'élément d'id "custom" dans la variable customElement
|
||||
const customElement = document.getElementById("custom");
|
||||
// #endregion const
|
||||
|
||||
// #region dataTypes
|
||||
// myName ne devrait pas changer, pas d'où la constante
|
||||
const myName = "Nico";
|
||||
// myAge changera tous les ans, d'où l'utilisation de let
|
||||
let myAge = 32;
|
||||
// #endregion dataTypes
|
||||
|
||||
// #region multiplesValues
|
||||
// me est un objet contenant plusieurs propriétés et leur valeur
|
||||
const me = {
|
||||
name: "Nico",
|
||||
age: 32,
|
||||
};
|
||||
|
||||
// myPseudos est un tableau contenant plusieurs valeurs
|
||||
let myPseudos = ["nicool", "dev man"];
|
||||
// #endregion multiplesValues
|
||||
|
||||
// #region addEventListener
|
||||
const myButton = document.getElementById("sendButton");
|
||||
// ici, on écoute l'événement "click" sur l'élément "myButton"
|
||||
myButton.addEventListener("click", function () {
|
||||
// actions à exécuter
|
||||
});
|
||||
// #endregion addEventListener
|
||||
|
||||
// #region conditionsIf
|
||||
// la variable "userLogged" est un booléen, ici vrai
|
||||
let userLogged = true;
|
||||
// on évalue la valeur de "userLogged" avant d'exécuter la fonction
|
||||
if (userLogged) {
|
||||
// actions à exécuter
|
||||
}
|
||||
// #endregion conditionsIf
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
// #region allow
|
||||
User-agent: *
|
||||
Allow: /
|
||||
// #endregion allow
|
||||
|
||||
// #region disallow
|
||||
User-agent: *
|
||||
Disallow: /
|
||||
// #endregion disallow
|
||||
|
|
@ -1,12 +1,13 @@
|
|||
{
|
||||
"name": "vitepress-starter",
|
||||
"packageManager": "yarn@3.2.1",
|
||||
"scripts": {
|
||||
"dev": "vitepress dev docs",
|
||||
"docs:build": "vitepress build docs",
|
||||
"serve": "vitepress serve docs"
|
||||
},
|
||||
"devDependencies": {
|
||||
"vitepress": "^1.0.0-rc.31",
|
||||
"vue": "^3.2.47"
|
||||
"vitepress": "1.0.0-alpha.19",
|
||||
"vue": "^3.2.40"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue