Créez-vous une page de démarrage personnalisée et minimaliste ! : 10 étapes

2024 Auteur: John Day | [email protected]. Dernière modifié: 2024-01-30 09:05

Avez-vous dû passer au travail principalement à distance depuis que COVID-19 est devenu une chose? Même!

Travailler à domicile avec nos ordinateurs et sur Internet signifie souvent que nous devons suivre de nombreux sites Web pour le travail, pour l'école ou même… pour le plaisir !

Les signets ne sont pas toujours à la hauteur, alors que diriez-vous de créer une page d'accueil personnalisée sur mesure pour vous, avec tous les liens dont vous avez besoin, et qui s'ouvre dans votre navigateur Web à chaque fois que vous en avez besoin ?

Voici ce dont vous aurez besoin:

• Un ordinateur (le nôtre fonctionne sous Windows, mais n'importe quel ordinateur moderne fera l'affaire).
• Une connexion à Internet.
• Une nouvelle installation de l'éditeur de texte Notepad++.

Lorsque vous êtes prêt, commençons par utiliser notre propre modèle de page de démarrage… Ou créez le vôtre à partir de zéro !

Étape 1: Créez une page de démarrage OU téléchargez notre modèle personnalisé

À ce stade, vous avez deux options:

1. Téléchargez notre modèle personnalisé (les instructions suivent un peu plus tard dans cette étape) ou,
2. Suivez ce guide de base de la page de démarrage; il vous guidera pas à pas à travers les éléments constitutifs d'une simple page de démarrage - et c'est le guide que nous avons suivi pour créer cette page de démarrage personnalisée !

Pourquoi recommander un tuto… dans un tuto ? Notre travail en tant qu'animateurs MakerSpace n'est pas seulement de vous montrer comment faire les choses: c'est aussi de vous connecter à la culture Maker et aux ressources disponibles là-bas. Ce guide est l'un des endroits où de nombreux concepteurs de pages de démarrage commencent, il était donc logique de le partager avec vous !

Si vous avez le temps, continuez avec l'option #2 mais si vous n'en avez pas, vous pourrez toujours vous référer au guide de base de la page de démarrage plus tard ! Pour ce didacticiel, nous supposerons simplement que vous téléchargez notre modèle personnalisé ! Pour le télécharger:

1. Ouvrez notre référentiel DIY_startpage sur Github.
2. Cliquez sur le gros bouton vert Code pour ouvrir un menu déroulant.
3. Cliquez sur Télécharger ZIP pour télécharger tous les fichiers du projet.
4. Extrayez tous les fichiers du fichier ZIP que vous venez de télécharger à l'emplacement de votre choix.

GitHub est un site Web où les programmeurs et les concepteurs du monde entier partagent leur code et leurs créations avec d'autres: il vous permet également de collaborer avec d'autres sur des projets de toutes sortes. En fin de compte, c'est un excellent outil que tout créateur devrait connaître !

Maintenant, lancez le navigateur de votre choix: j'aime beaucoup Firefox, mais notre modèle devrait fonctionner sur à peu près n'importe quel navigateur Web récent, alors n'hésitez pas à utiliser Edge, Chrome ou Safari !

Enfin, ouvrez le fichier "DIY_startpage.html" dans votre navigateur ET dans Notepad++, et commençons à le personnaliser !

Étape 2: listez vos favoris

Avoir une page de démarrage est génial. Avoir une page de démarrage utile, c'est encore mieux et en ce moment, la nôtre a l'air un peu vide !

Quelles sont les choses que vous vérifiez régulièrement et que vous devez suivre ? Quels webcomics lisez-vous le matin ? Quel site d'actualités aimez-vous consulter ? Ce sont les choses qui devraient atterrir sur votre page de démarrage.

Pour ce tutoriel, je vais juste utiliser certains de mes favoris. Attention spoiler, beaucoup de liens de la bibliothèque ! Mais aussi certains de mes créateurs préférés pour l'inspiration, et certains de mes divertissements préférés. Vous pouvez retrouver tous ces éléments ci-dessous avec un lien, à titre d'exemple !

Nouvelles et lecture

• Journaux numériques
• Livres numériques
• Magazines numériques

Apprentissage

• Écoles du W3C
• Udemy
• Langues de mangue

Musique

• Écouter en local
• Exploseur de chanson
• Radios musicales Jamendo

Culture fabricant

• Noyau77
• Lumecluster
• Mélapropismes

J'ai choisi trois de mes favoris pour chaque catégorie, mais vous devriez pouvoir en choisir plus ou moins sans problème - la mise en page de votre page de démarrage s'adaptera automatiquement au nombre ou aux ressources !

Une fois que vous avez répertorié tous vos favoris, mettons-les de côté pendant une minute et travaillons à rendre notre modèle de page de démarrage générique un peu plus vous.

Étape 3: Personnalisez votre police

Démarrez Notepad++, cliquez sur Fichier > Ouvrir pour ouvrir votre fichier "DIY_startpage.html". Ce que vous regardez est très différent de la page de votre navigateur, n'est-ce pas ? C'est le code de votre page, et les navigateurs interprètent ce code pour le rendre un peu plus convivial et faire tout ce dont nous avons besoin.

Le code de notre projet de page de démarrage est écrit dans deux langages connexes: HTML et CSS. HTML est généralement en charge du contenu d'une page, et CSS en charge de l'apparence d'une page.

Recherchez cette première section pour personnaliser votre page de démarrage:

html {

align-items: center; couleur: #313131; affichage: flexible; police: 22px "Courier New", Courier, monospace; hauteur: 100 %; justifier-contenu: centre; marge: 0; }

Cette section de notre page de démarrage se concentre sur l'aspect général des éléments de notre page. La ligne:

police: 22px "Courier New", Courier, monospace;

concerne spécifiquement la police que nous utilisons sur la page de démarrage et a deux paramètres qui définissent à quoi ressemblera le texte sur votre page: la taille et la famille de polices.

• taille - C'est ce qu'est ce "22px". La taille de votre texte à l'écran est définie en "px", abréviation de pixels.
• famille de polices - C'est là que nous listons les polices que nous aimerions utiliser. C'est généralement une bonne idée d'en lister plusieurs, de la police que vous voulez vraiment utiliser à la famille la plus générique. Ces polices dépendent du navigateur que vous utilisez, donc si la plus particulière n'est pas disponible, le navigateur essaiera la suivante, et ainsi de suite.

La page CSS Web Safe Fonts de w3schools propose une excellente liste de combinaisons de polices qui ont fière allure, conservent le style que vous recherchez et fonctionnent sur la plupart des navigateurs modernes.

Par exemple, vous pouvez remplacer:

"Courier New", Courrier, monospace;

avec:

« Linotype Palatino », « Livre Antiqua », Palatino, empattements;

ou:

"Comic Sans MS", cursif, sans empattement;

Enregistrez votre fichier et actualisez la page dans votre navigateur pour voir les changements ! Vous ne l'aimez pas ? Aucun problème! Jouez avec les polices CSS Web Safe jusqu'à ce que vous trouviez une combinaison que vous aimez.

Étape 4: Personnalisez votre citation de titre

Recherchez cette section dans votre fichier HTML:

Ceci est votre page de démarrage! Prendre plaisir

Choisissez une citation que vous aimez et remplacez le code ! Pour le mien, j'ai choisi

Une fois de plus sur la brèche

La mise en page de votre page d'accueil doit s'adapter à la volée pour correspondre à votre devis dès que vous rechargez la page dans votre navigateur: dans Firefox, cela signifie appuyer sur CTRL+R sur votre clavier, ou cliquer sur l'icône Recharger. Choisissez une citation que vous aimez maintenant (ou choisissez quelque chose plus tard !) et mettons au travail la personnalisation des sections de votre page d'accueil !

Étape 5: Personnalisez vos sections

Maintenant que vous avez trouvé une combinaison de polices que vous aimez et que vous avez une excellente citation pour vous inspirer, continuons et personnalisons vos sections.

Si vous avez téléchargé notre page de démarrage depuis Github, vous disposez de 6 sections à personnaliser: le guide d'origine n'en a que 4, mais comme de plus en plus d'aspects de nos vies ont été mis en ligne récemment, je suis allé de l'avant et j'en ai ajouté d'autres au cas où.

Trouvez la première section et tapez simplement ce dont nous avons besoin. Pour rappel, ma première rubrique est "Actualités et lectures":

Avec votre fichier toujours ouvert dans Notepad++, recherchez la ligne de code suivante:

Section 1

et remplacez-la par la catégorie de votre liste que vous pensez utiliser le plus.

Étant donné que beaucoup d'entre nous sont habitués à commencer à lire les documents en haut à gauche, c'est là que vos yeux pourraient naturellement se diriger - alors profitez-en et gardez notre point de départ le plus important là-bas ! Mais si vous venez d'une culture avec une direction de lecture différente, ou si vous travaillez simplement différemment, personnalisez-le pour vous-même. C'est votre page de démarrage après tout: vous savez ce qui est le mieux pour vous !

Un titre de section vers le bas, il reste cinq ! Recherchez la ligne de code qui dit:

Section 2

Modifiez-le, puis continuez à rechercher les titres de section et à les modifier jusqu'à ce que vous arriviez à la fin de votre liste. Si vous n'utilisez pas toutes les sections, laissez-les tranquilles ! Nous ferons également un petit nettoyage à la fin de ce tutoriel.

Une fois que vous avez terminé de personnaliser les sections, enregistrez simplement vos modifications dans Notepad ++ et rechargez la page dans votre navigateur. Tous les titres de section devraient apparaître là où vous les avez placés: nous pouvons maintenant personnaliser les liens dans chaque section !

Étape 6: Personnalisez vos liens

La personnalisation des liens dans chaque section est un peu plus compliquée mais certainement pas beaucoup plus difficile !

Cette fois-ci, nous ne changeons pas seulement le nom des liens, nous changeons également ce que vous pouvez en faire ! Chaque élément de chaque section va devenir cliquable, lien vers un site Web différent. Bonus, vous pouvez également décider si vous souhaitez qu'il s'ouvre dans une nouvelle fenêtre ou non !

Tout d'abord, recherchez une ligne qui ressemble à:

link_one_name

Sélectionnez ce bit "link_one_name" et remplacez-le par votre propre texte. Par exemple, le premier lien de la première section basé sur ma liste de l'étape X est "Journaux numériques", donc nous obtenons:

Journaux numériques

Ensuite, travaillons à personnaliser le lien ! Remplacez le bit "link.one" par votre premier lien. Pour moi, ce sera le lien vers nos journaux numériques, donc ça ressemblera à:

Journaux numériques

Enregistrez votre travail dans l'éditeur de texte et rechargez la page dans votre navigateur

Vous devriez maintenant pouvoir cliquer sur le premier lien que vous avez personnalisé. Si ça n'a pas pris, c'est OK ! Recommencez ou revenez sur vos pas jusqu'à ce que le lien s'ouvre lorsque vous cliquez dessus.

Une fois que votre premier lien fonctionne… Eh bien, tout ce que vous avez à faire est de répéter ces étapes pour chaque lien dans chaque section, jusqu'à ce que vous ayez personnalisé tous les noms et liens sur votre page de démarrage ! Cependant, il n'y a qu'un seul problème: il est probable que lorsque vous cliquez sur un lien, votre page de démarrage disparaisse lorsque le nouveau lien s'ouvre dans le même onglet ou la même fenêtre.

Ce n'est pas très pratique… Et si on changeait la façon dont les liens s'ouvrent ? Utilisons notre premier lien comme exemple ! Vous vous souvenez probablement que nous disons à votre navigateur d'ouvrir un lien lorsque vous cliquez dessus:

Journaux numériques

Mais devinez quoi - c'est aussi là que nous décidons comment le lien va s'ouvrir ! Remplacez-le par:

Journaux numériques

Enregistrez maintenant votre travail et rechargez la page dans votre navigateur: le lien s'ouvrira désormais dans un nouvel onglet lorsque vous cliquerez dessus ! De cette façon, vous pouvez garder votre page de démarrage ouverte lorsque vous en avez besoin.

Étape 7: ajoutez une image à votre page de démarrage

Maintenant que tous nos liens sont mis en place, il est temps de décorer notre page d'accueil ! Ce modèle a de la place pour une image personnalisée sur le côté droit de l'écran. De retour dans Notepad++, recherchez cette ligne:

tout le chemin à la fin du modèle. Choisissez une image que vous aimez, déplacez-la dans le même dossier que votre fichier de page de démarrage et remplacez "library_picture.jpg" par le nom de fichier de votre image. Par exemple, si le nom de mon fichier est "votre_image.jpg", la ligne devient:

Enregistrez vos modifications et, une fois de plus, rechargez la page de démarrage dans votre navigateur.

Étant donné que le code de votre page de démarrage et vos fichiers image se trouvent dans le même dossier, l'image devrait se charger automatiquement lorsque vous actualisez la page. Si ce n'est pas le cas, vérifiez le nom de votre fichier - c'est généralement là que je me trompe !

Les fonds d'écran pour smartphones conviennent parfaitement à ce projet. En général, n'importe quelle image verticale (ou comme les gens fantaisistes disent "image d'orientation portrait" avec un rapport 16:9) d'ailleurs! Mais la mise en page de notre page d'accueil s'adaptera quoi que vous lui lanciez.

Si votre photo apparaît, félicitations, vous avez presque terminé !

Étape 8: nettoyer un peu

Si vous avez des sections supplémentaires que vous n'utilisez pas à ce stade, n'hésitez pas à les supprimer ! Par exemple, disons que vous n'utilisez pas la section 6. Trouvez:

• Article 6
• Objet 1
• Article 2
• Article 3

Sélectionnez et supprimez ces lignes, enregistrez votre fichier et actualisez le fichier dans votre navigateur pour vous assurer que tout est parti.

C'est généralement l'étape où je casse tout parce que je vais trop vite, donc si quelque chose ne fonctionne pas soudainement, souvenez-vous: respirez profondément et annulez ce que vous venez de faire avec la combinaison de touches CTRL+Z de votre clavier !

Étape 9: en faire une véritable page de démarrage

Maintenant que la page de démarrage ouvre tous les liens que nous voulons et qu'elle ressemble à ce que nous voulons, il est temps de l'ouvrir lorsque vous démarrez votre navigateur !

À ce stade, j'aime garder tout à l'écart du bureau de mes ordinateurs en coupant et en collant mon dossier de page de démarrage dans le dossier Documents de Windows. Donc, si vous avez fini de travailler sur votre page de démarrage, faites-le !

Suivant: très probablement votre navigateur s'ouvre avec votre moteur de recherche préféré, ou peut-être même une page blanche.

Vous pouvez trouver des instructions pour personnaliser Firefox ainsi que d'autres navigateurs ci-dessous:

• Instructions de Firefox
• Instructions de Google Chrome
• Instructions Safari
• Instructions Microsoft Edge

Une fois que vous avez terminé de suivre les instructions de votre navigateur, fermez-le et rouvrez-le. Si votre page de démarrage s'affiche au lancement de votre navigateur, c'est que vous l'avez fait !

Si cela n'a pas pris, suivez à nouveau les instructions de votre navigateur et assurez-vous de ne rien manquer. Dans le pire des cas, redémarrez votre ordinateur après avoir enregistré tout votre travail. 9 fois sur 10, ça résout tout !

Étape 10: Tout est fait ! Et, aimeriez-vous en savoir plus ?

Félicitations pour avoir terminé votre page de démarrage ! Cela n'a peut-être pas l'air de grand-chose, mais vous venez d'apprendre à coder l'un des éléments les plus importants d'un site Web comme je l'ai fait… Il y a environ 20 ans !

Si cela vous a plu et que vous souhaitez en savoir plus sur les pages de démarrage, c'est un trou de lapin profond à suivre ! Voici une petite sélection pour vous aider dans votre parcours de page de démarrage:

• Avez-vous essayé le guide de la page de démarrage de base ? Bonne nouvelle, il y en a plus d'où ça vient ! Consultez les autres guides de /stpg/ pour plus d'inspiration et de fonctionnalités avancées !
• Consultez le catalogue de la bibliothèque du comté de Johnson pour des livres sur HTML et CSS - et avec votre carte de bibliothèque ou votre carte électronique, vous avez également accès aux livres électroniques !
• Votre carte de bibliothèque vous donne également accès à Udemy et contient également des cours très complets sur HTML, CSS et la conception Web.

Si vous êtes très fier de votre création, pourquoi ne pas faire une capture d'écran et la partager avec nous sur Twitter ou Instagram avec le hashtag #jocomakes ? Nous sommes toujours heureux de voir ce que nos clients proposent!