Flexbox
novembre 16, 2021 1:55 pm Laissez vos commentairesQuelques liens et ressources sur les blocs Flex : Rappelez-vous la base : on applique flex et ses options sur le bloc parent, et ça agit sur ses enfants directs... Voir l'article
Archives de l'auteur gildas_p
Ajuster des images et des images de fond
décembre 7, 2021 3:55 pm Laissez vos commentairesVoici 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
Firefox : Exécuter du code Javascript en local
septembre 10, 2020 2:55 pm Laissez vos commentairesPar défaut, les navigateurs actuels n’autorisent pas l’exécution de votre code Javascript en local (depuis votre disque dur), ou de façon limitée. Vous aurez par exemple un message d’erreur quand... Voir l'article
Petite synthèse
de choses vues en cours
octobre 6, 2022 7:28 pm
Laissez vos commentaires
En évolution… → ça se passe ici.
Progressive Web App
mars 7, 2022 12:26 pm Laissez vos commentairesInstallez 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
favicon : les icônes de site web
mars 24, 2021 5:39 pm Laissez vos commentairesLa « 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
Contourner le cache du navigateur
janvier 22, 2022 5:41 pm Laissez vos commentairesQuand 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
Intégrer une typo à votre site
octobre 6, 2022 7:24 pm Laissez vos commentairesPour 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 pour des cartes Leaflet non-géographiques
mars 25, 2022 12:31 pm Laissez vos commentairesMapTiler 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
Leaflet basemaps : différentes cartes géographiques pour Leaflet
mars 22, 2022 10:04 pm Laissez vos commentairesUne 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 – cartes interactives
février 23, 2021 4:25 pm Laissez vos commentairesLeaflet.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
Fonctions Javascript utiles
mars 21, 2022 11:42 am Laissez vos commentairesUn 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
Ressources P5js
mars 7, 2022 12:30 pm Laissez vos commentairesPour 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
jquery simpleSlider
décembre 15, 2021 3:31 pm Laissez vos commentairesUne librairie simple à prendre en main pour afficher des sliders d’images (ou d’autre chose).Démo et téléchargement ici.
jQuery easyDrag
décembre 15, 2021 3:24 pm Laissez vos commentairesUne 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.
HTML5 audio – video, et video en fond de page…
décembre 15, 2021 4:31 pm Laissez vos commentairesPas 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)…
Récap. jQuery, guide complet
mars 1, 2021 5:10 pm Laissez vos commentairesjQuery 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
Petite synthèse HTML-CSS
octobre 15, 2021 5:09 pm Laissez vos commentairesQui 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
Récap. CSS : placer, centrer, positionner, etc
décembre 10, 2020 8:23 pm Laissez vos commentairesUn pdf de 10 pages qui reprend tous les points importants vu en cours. (MAJ le 17/12/2020)
Un template de site web vierge
décembre 9, 2020 6:00 pm Laissez vos commentairesUn 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
Positions CSS
octobre 19, 2020 5:40 pm Laissez vos commentairesposition: 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
Les sélecteurs CSS
octobre 19, 2020 5:24 pm Laissez vos commentairesComme 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
Connexion FTP au serveur web
octobre 22, 2021 2:17 pm Laissez vos commentairesPour 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
Structure recommandée d’un site HTML5
octobre 19, 2020 4:50 pm Laissez vos commentairesCes 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é !
Snippets pour SublimeText 3
septembre 29, 2020 9:27 am Laissez vos commentairesSur 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
Personnaliser SublimeText 3 avec des « Packages »
septembre 25, 2020 2:56 pm Laissez vos commentairesSublime 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
Couleur aléatoire en Javascript
décembre 8, 2015 12:43 pm Laissez vos commentairesVoici 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 pour assouplir vos animations
janvier 28, 2015 6:49 pm Laissez vos commentairesLes 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
Animations CSS3 en Javascript
janvier 28, 2015 5:28 pm Laissez vos commentairesLes 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
Nombres aléatoires en Javascript
novembre 25, 2014 5:00 pm Laissez vos commentairesPour 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