Quelques raccourcis pour gagner du temps/ Page de base : ! et tabulation Commentaire : ctrl / Pour mac : (cmd shift /) Entourer d’une balise : ctrl shift P wrap with abbreviation rentrer le nom de la balise et valider. pour plusieurs paragraphe p* Réorganiser la page : ctrl shift P et choisir beautify…
Catégorie : web
Charger un site wordpress en local.
Sauvegarder un site, pour une refonte ou autre, est parfois utile. il nous faut le charger sur notre hébergeur local. Tutoriel concernant l’installation et la mise en oeuvre du plugin Duplicator pour WordPress. Duplicator vous permet de sauvegarder ou de migrer facilement et rapidement votre site WordPress. Ce tutoriel en français vous est proposé par…
Adobe Première Pro
Logiciel de montage vidéo. Pour les tutos c’est par ici. Pour les titres depuis 2017, ceci son rebaptisés: Titrage hérité, dans Fichier – nouveau.Nous pouvons également utiliser Photoshop pour créer et incorporer un titre ou un logo, en passant par: fichier – nouveau – fichier photoshop. Par la suite pour modifier ce logo nous pouvons…
Créer une carte personnalisée
Aujourd’hui nous avons la possibilité de créer des cartes personnalisées, il existe plusieurs sites pour le faire. Nous avons utilisé uMap.openstree Cliquer sur créer une carte pour commencer. Ensuite vous verrez le site est assez simple d’utilisation, il suffit de lire et de survoler les icônes. Une fois notre carte effectuée il suffit juste de…
« GRID »- grille CSS
Pour mettre en place la grille css il nous faut définir le parent (généralement une enveloppe) en lui attribuant plusieurs choses. display: grid; (appel).grid-template-columns (défini la largeur des colonnes, fr = fraction)grid-gap (donne la largeur des goutières)Nous lui attribuons « grid-auto-flow: dense; » qui l’oblige à combler les vides au lieu que les blocs se suivent. ex:…
Bloc, proportion
Quelques exemples pour garder les blocs proportionnels, hauteur-largeur. Avec les nouvelles « dimension » VW pour la largeur et la hauteur. Ou en insérant un bloc invisible à l’aide d’un : : before et d’un display: flex; Cette méthode peut-être utile pour les iframe. Exemple de code:
Intégrer du SVG
Pour intégrer du SVG dans une page HTML nous nous servons d’illustrator. Dans notre carte (oui nous faisons une carte cliquable) il faut nommer les groupes pour chaque objets (ici département) si nous voulons styler ces objets, après dans le code. Dans fenêtre – Option d’objet, donner une url aux objets et définir la zone…
Image-picture
Pour chargé des images en multiple format . Le navigateur choisira dans l’ordre celui qu’il peut ouvrir. Exemple du code: <picture> <source srcset= »images/172724622_ecaa7b22d1_b_resultat.webp » type= »image/webp »> <source srcset= »images/172724622_ecaa7b22d1_b_resultat.jpg » type= »image/jpeg »> <img src= »images/172724622_ecaa7b22d1_b_resultat.jpg »></picture> Et en responsive? Une technique permet à la même image, que l’on insert plusieurs fois et de différente taille, d’être choisie en fonction de la taille…
Audio et vidéo
Le code minimum pour intégrer de la vidéo et de l’audio sur une page html Dans l’ordre (ci-dessous) vidéo de dossier lié au site, audio de dossier lié au site et iframe provenant de youtube. Le rendu sans css: Pour choisir une image (poster) à mettre en avant: <video controls poster= »https://lp.trucdev.fr/animaux/600/400/5″> <source src= »medias/luckyducky.mp4″ type= »video/mp4″> </video>…
Animation, suite!
Mettre en application les animations les transitions sur une galerie La partie code html et css qui nous intéresse: Travail perso: Le code