Author: Mathilde B.

Tutoriels

Comment installer et utiliser les extensions de navigateur les…

Les extensions de navigateur sont des outils indispensables pour personnaliser et améliorer votre expérience en ligne, elles offrent des fonctionnalités pratiques directement accessibles depuis votre navigateur. Dans ce tutoriel, je vais vous accompagner pour au final réussir à installer et utiliser les extensions les plus utiles, afin de simplifier vos tâches quotidiennes et naviguer plus efficacement.

Ouvrir le magasin d’extensions

Avant de pouvoir ajouter des extensions à votre navigateur, vous devez accéder à la plateforme qui les propose. Chaque navigateur dispose de son propre magasin dédié où vous pouvez découvrir, rechercher et installer des outils adaptés à vos besoins.

Pour Google Chrome :

Cliquez sur les trois points en haut à droite du navigateur.

Puis dans extensions > gérer les extensions > Chrome web store.

Pour Microsoft Edge :

Cliquez sur les trois points en haut à droite.

Puis dans extensions > Obtenir des extensions pour Microsoft Edge.

Rechercher une extension pratique

Une fois dans le magasin d’extensions, il est temps de trouver celle qui correspond à vos besoins. Que vous recherchiez un bloqueur de publicité ou un outil de traduction, le moteur de recherche du magasin vous permet de trouver des options fiables et bien notées.

Dans le magasin d’extensions, tapez le nom ou une description dans la barre de recherche.

Ensuite, consultez les avis et les notes pour évaluer la fiabilité.

Installer une extension

Trouver une extension est une chose, l’ajouter à votre navigateur en est une autre, l’installation est simple et rapide.

Cliquez sur l’extension souhaitée puis appuyez sur le bouton Ajouter au navigateur ou Installer. C’est aussi possible qu’on vous demande d’accepter les permissions si demandée.

Activer et gérer les extensions

Une fois installées, les extensions doivent être configurées et gérées pour être pleinement fonctionnelles. Vous pouvez personnaliser leur utilisation ou désactiver celles dont vous n’avez pas besoin à tout moment.

Après avoir installée les extensions souhaitées, une icône apparaîtra généralement près de la barre d’adresse.

Pour Microsoft Edge :

Pour Google Chrome :

En cliquant dessus, vous pouvez configurer ou activer l’extension ou vous pouvez aussi désactiver ou supprimer une extensions dans le menu Gérer les extensions.

Utiliser les extensions pour vos besoins quotidiens

Avec vos extensions installées, il ne reste plus qu’à les mettre en pratique. Elles vous simplifieront la vie en automatisant certaines tâches ou en vous offrant de nouvelles fonctionnalités directement dans votre navigateur.

  • Navigation sécurisée : Utilisez une extension comme uBlock Origin pour bloquer les publicités intrusives, les pop-ups et les sites potentiellement malveillants. Pour protéger vos mots de passe, Bitwarden ou LastPass offrent un stockage sécurisé et des suggestions de mots de passe complexes.
  • Traductions et recherches : Installez Grammarly pour vérifier l’orthographe et la grammaire lorsque vous écrivez des e-mails ou des documents en ligne. Trello et Notion Web Clipper vous permettent de capturer rapidement des idées ou des tâches directement depuis votre navigateur.
  • Productivités : Si vous avez souvent de nombreuses pages ouvertes, des outils comme OneTab ou Tab Manager Plus vous permettent de regrouper et organiser vos onglets pour une navigation plus claire et rapide.

Mettre à jour et surveiller vos extensions

Pour profiter pleinement de vos extensions, il est essentiel de les maintenir à jour. Cela garantit non seulement leur bon fonctionnement, mais aussi la sécurité de votre navigation en ligne.

Les développeurs publient régulièrement des mises à jour pour :

Ajouter de nouvelles fonctionnalités : Vous bénéficiez des dernières améliorations et outils proposés par l’extension.

Corriger des bugs : Une version obsolète peut entraîner des erreurs ou ralentir votre navigateur.

Renforcer la sécurité : Les mises à jour protègent contre les vulnérabilités qui pourraient être exploitées par des hackers.

La plupart des navigateurs mettent à jour les extensions automatiquement. Toutefois, vous pouvez vérifier manuellement si une mise à jour est disponible :

Pour Google Chrome :

Cliquez sur les trois points en haut à droite puis sur Extensions et activez le Mode développeur.

Cliquez sur Mettre à jour pour forcer une mise à jour de toutes les extensions.

Pour Microsoft Edge :

Faire la même manipulation sur Microsoft Edge.

Pour éviter que votre navigateur devienne lent ou vulnérable, il est recommandé de supprimer les extensions que vous n’utilisez plus :

  • Rendez-vous dans le gestionnaire d’extensions de votre navigateur.
  • Cliquez sur Supprimer pour les extensions inutiles ou sur Désactiver pour les désactiver temporairement.

Certaines extensions demandent des autorisations sensibles (accès à vos données, navigation, etc.).

  • Vérifiez régulièrement les permissions dans les paramètres de l’extension.
  • Si une extension demande des autorisations suspectes ou inutiles, envisagez de la désinstaller.

Trop d’extensions actives peuvent ralentir votre navigateur ou causer des conflits. Pour optimiser vos performances :

  • Désactivez les extensions que vous n’utilisez pas fréquemment.
  • Testez votre navigateur après la désactivation pour voir si les performances s’améliorent.

En prenant le temps de mettre à jour, surveiller et organiser vos extensions, vous assurez non seulement leur efficacité, mais aussi une navigation plus fluide et sécurisée. Cela fait partie des bonnes pratiques pour tirer le meilleur parti de votre navigateur sans compromis sur la vitesse ou la sécurité.

Tutoriels

Comment faire un site dynamique en html

Pour débuter ce tutoriel, je vous accompagnerai à travers les étapes de création d’un document HTML en utilisant Notepad++. Suivez attentivement ces quelques instructions.

Premier pas dans la conception d’un site web / création du document HTML

ouvrir l’application Notepad++ puis ouvrir une nouvelle feuille

  • appuyer sur fichier > enregistrer sous…
  • nommer le fichier « index » et sélectionner comme type de ficher « Hyper Text Markup Language file »

Associer un fichier CSS au document HTML

Le CSS est un langage utilisé pour définir la présentation visuelle des documents HTML. Il permet de contrôler la mise en page, le style visuel, etc.. sur les sites web. Le CSS est un moyen avancé pour personnaliser l’apparence des pages des sites web.

Pour la création du fichier CSS seulement quelques étapes sont nécessaires :

  • ouvrir l’application Notepad++ puis ouvrir une nouvelle feuille
  • appuyer sur fichier > enregistrer sous…
  • nommer le fichier avec à la fin un .css ( exemple : fraise.css, pomme.css, etc.. )
  • taper dans le fichier index le morceau de code suivant sur la 4EME IMAGE

Dans mon cas, j’ai nommé mon fichier CSS « fraise ». Vous devez donc simplement le remplacer par le nom que vous avez choisi au préalable.

Si vous souhaitez également ajouter un fichier JavaScript, il vous suffit simplement de répéter les mêmes étapes, mais en remplaçant le .css par .js.

Après la finalisation de la création de tous vos documents, vous pouvez ainsi explorer un monde de possibilités créatives. Votre document HTML définit la structure de votre site, tandis que le fichier CSS donne vie à votre créativité. Ensemble, ils forment la base d’une expérience web unique. Par la suite, je vais vous présenter plusieurs possibilités de personnaliser votre site web.

Une barre de navigation

La barre de navigation d’un site web, également appelée menu, joue un rôle essentiel pour faciliter la navigation pour les utilisateurs. Elle offre une structure organisée, permettant un accès rapide aux différentes sections du site. En fournissant des liens vers des pages clés telles que l’accueil, les informations à propos du site et les contacts.

Je vais vous proposer un exemple simple et efficace pour votre barre de navigation, avec la possibilité de la personnaliser selon vos préférences, notamment grâce à la feuille de style CSS.

HTML : 

<!DOCTYPE html>
<html>
<head>
<title>La Photographie</title>
<link rel="stylesheet" type="text/css" href="css/fraise.css">
</head>
<body>
     <div class="menu">
     <div class="logo"><h1>LA PHOTOGRAPHIE</h1></div>
        <ul>
            <li><a href="a">HOME</a></li>
            <li><a href="a">HISTOIRE</a></li>
            <li><a href="a">APPROVISIONNEMENT</a></li>
            <li><a href="a">AUTRES</a></li>
        </ul>

</body>
</html>

CSS : 

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    text-decoration: none;
    list-style: none;
}
body {
    background-color: #656565;
    color: #000;
}
.logo {
    font-size: 1.5rem;
    font-weight: 700;
}
.menu a{
    color: #000;
}
.menu ul{
    position: absolute;
    padding: 50px;
    display: flex;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    font-weight: 600;
}
a:hover{
    border: 2px solid black;
    border-radius: 50px;
    padding: 5px;
}

Donc, ceci n’est qu’un exemple parmi d’autres, et il est facilement modifiable selon ses préférences. Pour lier les différents boutons aux pages respectives, il suffira simplement de remplacer les a entre les guillemets par le lien vers l’autre document ou son nom.

Faire apparaître un texte

Voici un exemple amélioré vous permettant d’afficher un texte avec un effet spécial en utilisant le document HTML associé à une feuille de style CSS. Cela donnera vie à votre texte et animera votre page web.

HTML : 

<!DOCTYPE html>
<html>
<head>
<title>La Photographie</title>
<link rel="stylesheet" type="text/css" href="css/fraise.css">
</head>
<body>
<div class="container">
    <div class="texte">
       Exemple 123
    </div>
</div>
</body>
</html>

CSS : 

.container {
  height: 100vh;
}

.texte {
  width: 22ch;
  animation: typing 2s steps(10); 
  white-space: nowrap;
  overflow: hidden;
  border-right: 1px solid;
  font-size: 5em;
}

@keyframes typing {
  from {
    width: 0
  }
}


La partie steps(10) dans la feuille de style CSS devra probablement être modifiée en fonction du nombre de caractères que comporte votre texte. Il faut remplacer le 10 par le nombre souhaité.

Art

Musique : The neighbourood wiped out !

En tant qu’admiratrices de l’album « wiped out ! » du groupe The Neighbourood, notre premier projet en NSI prend une dimension passionnante puisqu’on a choisi de représenter la pochette de cet album qui nous tient particulièrement à coeur.

Le commencement

Pour commencer, nous avons réalisé le fond noir et le cercle blanc qui se situe au centre. Nous avons ensuite placé le texte avec la bonne police d’écriture et la bonne taille au-dessus du cercle blanc. Nous devions aussi reproduire une petite maison à l’envers tout en bas de l’image en commençant par la base puis la cheminée et enfin le toit.

Les vagues et le sol

Pour créer les vagues, nous avons utilisé deux boucles for. Une première boucle sert à dessiner les arcs de cercle qui forment une ligne de vagues, puis une deuxième boucle permet de déplacer la tortue vers le bas pour dessiner la ligne de vagues suivantes. Cette approche répétitive nous permet de créer un motif de vagues continus en descendant d’une ligne à l’autre.

pensize(10)
goto(-300,0)
color("black")
pendown()
setheading(-35)

for i in range(9):
    for j in range(11):
         circle(35, 70)
         circle(-35, 70)
    penup()
    goto(-300, -20 * (i+1))
    pendown()

Il nous fallait aussi un sol qu’on a obtenu grâce à de nombreux cercles pour pouvoir ensuite déplacer la maison.

Le palmier avec les roches

Pour le palmier, on a d’abord dessiné des arcs de cercle pour créer le tronc incliné du palmier puis on a dessiné chaque feuille en utilisant la commande circle() avec des angles spécifiques pour créer la forme des feuilles. Les pierres ont été créées en combinant des formes géométriques superposées les unes aux autres.

L’oiseau

Pour dessiner un l’oiseau, on a dû crée les ailes, le corps, la queue, le bec et la tête de l’oiseau en utilisant des boucles, des lignes et des cercles.

Notre petite touche personnelle

Pour finir, on a rajouté notre petite touche personnelle, un ciel étoilé. Nous avons défini une fonction étoile pour générer 30 étoiles à des emplacements aléatoires.

def etoile():
    
    for i in range(5):
        forward(0.5)



pensize(2)
pencolor("white")

for i in range(30):
    x = randint(-400, 400)
    y = randint(100, 300)
    penup()
    goto(x, y)
    pendown()
    etoile()

CONCLUSION

Ce projet nous a permis de réaliser qu’on peut faire de très belle chose juste en ayant les bases de la programmation. On a pris beaucoup de plaisir à voir notre image se construire au fur et à mesure du temps. Cela nous a ouverts de nouvelles perspectives pour des projets futurs et nous avons hâte d’en apprendre davantage pour réaliser des créations encore plus techniques et impressionnantes.

RENDU FINAL

télécharger le .py

the_neighbourhood_albumTélécharger