Par défaut, les navigateurs actuels n’autorisent pas l’exécution de votre code Javascript en local, ou de façon limitée. Vous aurez par exemple un message d’erreur quand vous essayerez de charger... Voir l'article
En évolution… → ça se passe ici.
Installez votre site web comme une app native sur mobiles et tablettes, pour bénéficier du plein écran, d’un contrôle de l’orientation, et d’une belle icône sur le bureau de votre... Voir l'article
La « favicon« , c’est l’icône affichée dans l’onglet du navigateur, et dans les favoris. Il y a actuellement 2 formats possibles : le .ico à l’ancienne, et un autre format plus... Voir l'article
Quand on travaille sur un site en ligne les navigateurs gardent en mémoire les images et certains scripts après la première visite (le css par ex). Si vous faites une... Voir l'article
Pour que votre site affiche votre typo même sur un poste ou elle n’est pas installée, il faut l’embarquer dans votre site internet : on appelle ça une « webfont« . Pour... Voir l'article
MapTiler Desktop est un logiciel qui va vous permettre de transformer une grande image en tuiles, pour l’utiliser dans Leaflet. Tout est permis : dessin scanné, carte de jeu vidéo... Voir l'article
Une page où visualiser différentes cartes gratuites utilisables avec leaflet.js, faire votre choix, et obtenir le code Javascript pour l’utiliser dans votre carte interactive. Ca se passe ici.
Leaflet.js est une librairie Javascript de cartographie interactive. Leaflet propose toute une série de tutos officiels, ainsi qu’une documentation qui détaille toutes les fonctions et leur utilisation. Installation La page... Voir l'article
Un petit fichier avec quelques fonctions Javascript utiles : random(min, max) un peu comme la fonction de p5jsrandom(min, max, true) permet d’obtenir un nombre entier randomColor() pour obtenir une couleur... Voir l'article
Pour approfondir votre pratique de P5js, quelques liens utiles : Exemples pratiques et codes commentésLe site openprocessing.orgLes exemples de p5js.orgLes codes vus en cours
Une librairie simple à prendre en main pour afficher des sliders d’images (ou d’autre chose).Démo et téléchargement ici.
Une librairie compacte pour rendre n’importe quel élément de mise en page déplaçable à la souris, ou au doigt.Disponible ici, avec des explications.
Pas vraiment un article ou un tuto, mais tout est là !Et ce n’est même pas compliqué (une fois qu’on a trouvé l’astuce)…
Quelques liens et ressources sur les blocs Flex : une page interactive très complète un guide plus court, pratique une fois que vous aurez compris un guide exhaustif mais un... Voir l'article
Voici une page de démo pour comprendre comment on peut ajuster une image (ou une image de fond) dans un format donné, sans la déformer. Parfait pour des images élastiques... Voir l'article
jQuery est une librairie Javascript qui ajoute de nombreuses fonctionnalités pour manipuler le contenu d’une page web, et mettre en place une interactivité sur-mesure. jQuery est écrit en Javascript, on... Voir l'article
Qui sera complétée par la suite… Sélecteurs CSS Pour cibler vos blocs HTML en CSS, vous avez à votre disposition plusieurs syntaxes : article {} sélection par type de balise... Voir l'article
Un pdf de 10 pages qui reprend tous les points importants vu en cours. (MAJ le 17/12/2020)
Un dossier de base pour démarrer vos projets web : arborescence des dossiers (js, css, img) index.html pré-rempli (balises pour le référencement, appels des scripts, etc) une feuille de style... Voir l'article
position: static; par défaut, l’élément fait partie du flux normal de la page position: relative; le mode « triche », permet de déplacer un élmt par rappoort à sa place de départ... Voir l'article
Comme nous l’avons vu en cours, il y a 3 manières principales de cibler un élément en CSS : par type de balise ex : article {} va sélectionner toutes... Voir l'article
Pour mettre en ligne vos exercices, il va falloir vous connecter au serveur web mis à votre disposition via une connexion FTP (File Transfer Protocol). Pour ça on utilise un... Voir l'article
Ces balises sont comme des <div>, avec des infos en plus à destination des moteurs de recherche.Si les robots comprennent mieux votre site, il sera mieux référencé !
Sur pc, à dézipper dans c:/utilisateurs/xxx/appdata/roaming/sublime text 3/packages/user/perso/ (si le dossier appdata/ n’est pas accessible, il faut aller dans les options de l’explorateur windows, et afficher les dossiers cachés) Sur macOS:... Voir l'article
Sublime Text intègre un utilitaire pour télécharger et installer des « packages » qui augmentent les capacités du logiciel. Il existe énormément de packages, développés par des utilisateurs pour toutes sortes de... Voir l'article
Voici une petite fonction à utiliser où vous le souhaitez, pour remplacer une couleur du genre ‘#FFFFFF’ : function randColor(){ return '#'+(function(h){return new Array(7-h.length).join("0")+h})((Math.random()*(0xFFFFFF+1)<<0).toString(16)); } Il faut coller la fonction... Voir l'article
Les easing, ce sont des équations mathématiques qui… bon ça va surtout vous permettre de bouger des trucs à l’écran, oui mais avec un mouvement élastique du bel effet !... Voir l'article
Les animations CSS3 c’est super, mais la syntaxe est assez pénible et ce n’est pas évident à temporiser (une anim, puis une autre, et une 3ème au clic, etc). Je... Voir l'article
Pour vous simplifier la génération de nombres aléatoires : function rand(min, max){ return min+Math.round(Math.random()*(max-min)); }; Et ça s’utilise ensuite comme dans Processing : var truc = rand(-5, 5); // renvoie... Voir l'article