Maak van jezelf een gepersonaliseerde, minimalistische startpagina! - Ajarnpa

2024 Auteur: John Day | [email protected]. Laatst gewijzigd: 2024-01-30 11:14

Heb je moeten overschakelen naar voornamelijk werken op afstand sinds COVID-19 een ding werd? Dezelfde!

Thuiswerken met onze computers en via internet betekent vaak dat we veel websites moeten bijhouden voor werk, voor school of zelfs… voor de lol!

Bladwijzers zijn niet altijd geschikt voor de taak, dus hoe zit het met het maken van een aangepaste startpagina die speciaal voor u is gemaakt, met alle links die u nodig hebt, en die elke keer dat u deze nodig hebt in uw webbrowser wordt geopend?

Dit is wat je nodig hebt:

• Een computer (de onze draait op Windows, maar elke moderne computer is geschikt).
• Een verbinding met internet.
• Een nieuwe installatie van teksteditor Notepad++.

Als u er klaar voor bent, gaan we aan de slag met het gebruik van onze eigen startpagina-sjabloon… Of u kunt er zelf een maken!

Stap 1: Maak een startpagina OF download onze aangepaste sjabloon

Op dit punt heb je twee opties:

1. Download onze aangepaste sjabloon (instructies volgen iets later in deze stap) of,
2. Volg deze basisgids voor de startpagina; het leidt u stap voor stap door de bouwstenen van een eenvoudige startpagina - en dat is de gids die we hebben gevolgd om deze aangepaste startpagina te bouwen!

Waarom een zelfstudie aanbevelen … in een zelfstudie? Ons werk als MakerSpace-facilitators is niet alleen om u te laten zien hoe u dingen moet doen: het is ook bedoeld om u in contact te brengen met de Maker-cultuur en de beschikbare bronnen. Deze gids is een van de plaatsen waar veel ontwerpers van startpagina's aan de slag gaan, dus het was logisch om deze met u te delen!

Als je tijd hebt, ga je gang met optie #2, maar als je dat niet hebt, kun je later altijd de basisgids voor de startpagina raadplegen! Voor deze zelfstudie gaan we ervan uit dat u onze aangepaste sjabloon downloadt! Om het te downloaden:

1. Open onze DIY_startpage-repository op Github.
2. Klik op de grote groene Code-knop om een vervolgkeuzemenu te openen.
3. Klik op Download ZIP om alle bestanden voor het project te downloaden.
4. Pak alle bestanden uit het ZIP-bestand dat u zojuist hebt gedownload uit naar een locatie naar keuze.

GitHub is een website waar programmeurs en ontwerpers over de hele wereld hun code en creaties met anderen delen: het laat je ook samenwerken met anderen aan allerlei soorten projecten. Waar het op neerkomt, is dat het een geweldig hulpmiddel is dat elke maker zou moeten kennen!

Start nu uw browser naar keuze: ik hou echt van Firefox, maar onze sjabloon zou op zowat elke recente webbrowser moeten werken, dus voel je vrij om Edge, Chrome of Safari te gebruiken!

Open ten slotte het bestand "DIY_startpage.html" in uw browser EN in Notepad++, en laten we beginnen met het aanpassen ervan!

Stap 2: Maak een lijst van uw favorieten

Het hebben van een startpagina is geweldig. Een handige startpagina hebben is nog beter en op dit moment ziet die van ons er een beetje leeg uit!

Wat zijn de dingen die u regelmatig controleert en moet bijhouden? Welke webcomics lees je 's ochtends? Welke nieuwswebsite check je graag? Dit zijn de dingen die op je startpagina zouden moeten landen.

Voor deze zelfstudie gebruik ik slechts enkele van mijn favorieten. Spoiler warning, veel links uit de bibliotheek! Maar ook enkele van mijn favoriete Makers ter inspiratie, en een aantal van mijn favoriete entertainment. Al deze items vind je hieronder met een link, als voorbeeld!

Nieuws en lezen

• Digitale Kranten
• Digitale boeken
• Digitale tijdschriften

Aan het leren

• W3C-scholen
• Udemy
• Mangotalen

Muziek

• Luister lokaal
• Song Exploder
• Jamendo Muziek Radio's

Maker cultuur

• Kern77
• Lumecluster
• melapropismen

Ik heb voor elke categorie drie van mijn favorieten gekozen, maar je zou zonder problemen meer of minder moeten kunnen kiezen - de lay-out van je startpagina past zich automatisch aan het aantal of de bronnen aan!

Zodra u al uw favorieten in de lijst heeft staan, laten we ze een minuutje opzij zetten en eraan werken om onze generieke startpaginasjabloon een beetje meer u te maken.

Stap 3: Pas uw lettertype aan

Start Notepad++, klik op Bestand > Openen om uw "DIY_startpage.html"-bestand te openen. Waar u naar kijkt, ziet er heel anders uit dan de pagina in uw browser, nietwaar? Het is de code van uw pagina, en browsers interpreteren die code om deze er een beetje oogvriendelijker uit te laten zien en alle dingen te doen die we nodig hebben.

De code voor ons startpaginaproject is geschreven in twee verwante talen: HTML en CSS. HTML is meestal verantwoordelijk voor de inhoud van een pagina en CSS is verantwoordelijk voor het uiterlijk van een pagina.

Zoek naar dit eerste gedeelte om uw startpagina aan te passen:

html {

align-items: midden; kleur: #313131; weergave: flexibel; lettertype: 22px "Courier New", Courier, monospace; hoogte: 100%; rechtvaardigen-inhoud: centrum; marge: 0; }

Dit gedeelte van onze startpagina richt zich op het algemene uiterlijk van artikelen op onze pagina. De lijn:

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

gaat specifiek over het lettertype dat we op de startpagina gebruiken en heeft twee parameters die bepalen hoe tekst op uw pagina eruit zal zien: grootte en lettertypefamilie.

• size - Dat is wat die "22px" is. De grootte van uw tekst op het scherm wordt gedefinieerd in "px", een afkorting voor pixels.
• lettertypefamilie - Hier vermelden we de lettertypen die we willen gebruiken. Het is meestal een goed idee om er meerdere op te noemen, van het lettertype dat u echt wilt gebruiken, de meest algemene familie. Deze lettertypen zijn afhankelijk van de browser die u gebruikt, dus als de meest specifieke niet beschikbaar is, zal de browser de volgende proberen, enzovoort.

De CSS Web Safe Fonts-pagina van w3schools heeft een geweldige lijst met lettertypecombinaties die er geweldig uitzien, vasthouden aan de stijl die u zoekt en werken in de meeste moderne browsers.

U kunt bijvoorbeeld vervangen:

"Koerier Nieuw", Koerier, monospace;

met:

"Palatino Linotype", "Book Antiqua", Palatino, schreef;

of:

"Comic Sans MS", cursief, schreefloos;

Sla uw bestand op en ververs de pagina in uw browser om de wijzigingen te zien! Vind je het niet leuk? Geen probleem! Speel wat met de CSS Web Safe-lettertypen totdat je een combinatie vindt die je leuk vindt.

Stap 4: Pas uw titelofferte aan

Zoek naar dit gedeelte in je HTML-bestand:

Dit is je startpagina! Genieten van

Kies een offerte die je leuk vindt en vervang de code! Voor mezelf heb ik gekozen

Nog een keer op de bres

De lay-out van uw startpagina moet zich onmiddellijk aanpassen aan uw offerte zodra u de pagina in uw browser opnieuw laadt: in Firefox betekent dat op CTRL+R op uw toetsenbord drukken of op het pictogram Opnieuw laden klikken. Kies een quote die je nu leuk vindt (of kies iets later!) en laten we aan de slag gaan met het aanpassen van de secties van je startpagina!

Stap 5: Pas uw secties aan

Nu je een lettertypecombinatie hebt gevonden die je leuk vindt en je een geweldige quote hebt om je te inspireren, laten we doorgaan en je secties aanpassen.

Als je onze startpagina van Github hebt gedownload, heb je 6 secties beschikbaar om aan te passen: de originele gids heeft er maar 4, maar aangezien steeds meer aspecten van ons leven de laatste tijd online zijn gegaan, ging ik door en voegde er meer toe voor het geval dat.

Zoek het eerste gedeelte en typ gewoon in wat we nodig hebben. Ter herinnering, mijn eerste sectie is "Nieuws en lezen":

Terwijl je bestand nog steeds open is in Notepad++, zoek je de volgende regel code:

Sectie 1

en vervang deze door de categorie in uw lijst die u denkt het meest te gebruiken.

Aangezien velen van ons gewend zijn om documenten linksboven te lezen, kunnen uw ogen daar natuurlijk naartoe gaan - dus maak daar gebruik van en houd onze belangrijkste go-to daar! Maar kom je uit een cultuur met een andere leesrichting, of werk je gewoon anders, pas dit dan voor jezelf aan. Het is immers uw startpagina: u weet wat het beste voor u is!

Eén sectietitel naar beneden, nog vijf te gaan! Zoek naar de regel code die zegt:

Sectie 2

Verander het, blijf zoeken naar sectietitels en verander ze totdat je aan het einde van je lijst komt. Als je niet alle secties gebruikt, laat ze dan gewoon staan! We zullen aan het einde van deze tutorial ook een beetje opruimen.

Als u klaar bent met het aanpassen van secties, slaat u uw wijzigingen op in Notepad++ en laadt u de pagina opnieuw in uw browser. Alle sectietitels zouden moeten verschijnen waar u ze plaatst: nu kunnen we de links in elke sectie aanpassen!

Stap 6: Pas uw links aan

Het aanpassen van de links in elke sectie is iets ingewikkelder, maar zeker niet veel moeilijker!

Deze keer veranderen we niet alleen de naam van de links, we veranderen ook wat je ermee kunt doen! Elk item in elke sectie wordt klikbaar, link naar een andere website. Bonus, je kunt ook beslissen of je het in een nieuw venster wilt openen of niet!

Zoek eerst naar een regel die eruitziet als:

link_one_name

Selecteer dat "link_one_name"-bit en vervang het door uw eigen tekst. De eerste link in de eerste sectie op basis van mijn lijst uit stap X is bijvoorbeeld "Digitale kranten", dus we krijgen:

Digitale Kranten

Laten we vervolgens de link aanpassen! Vervang het bit "link.one" door uw eerste link. Voor mij is dat de link naar onze digitale kranten, dus het ziet er als volgt uit:

Digitale Kranten

Sla uw werk op in de teksteditor en laad de pagina opnieuw in uw browser

U zou nu op die eerste link moeten kunnen klikken die u hebt aangepast. Als het niet heeft geduurd, is dat OK! Begin opnieuw of herhaal uw stappen totdat de link wordt geopend wanneer u erop klikt.

Als je eerste link eenmaal werkt… Nou, alles wat je hoeft te doen is deze stappen te herhalen voor elke link in elke sectie, totdat je alle namen en links op je startpagina hebt aangepast! Er is echter maar één addertje onder het gras: de kans is groot dat wanneer u op een link klikt, uw startpagina gewoon verdwijnt als de nieuwe link in hetzelfde tabblad of venster wordt geopend.

Het is niet erg handig … Dus hoe zit het met het veranderen van de manier waarop links worden geopend? Laten we onze eerste link als voorbeeld gebruiken! U herinnert zich waarschijnlijk dat we uw browser hier vertellen om een link te openen wanneer u erop klikt:

Digitale Kranten

Maar raad eens - dat is ook waar we beslissen hoe de link wordt geopend! Verander het in:

Digitale Kranten

Sla nu je werk op en laad de pagina opnieuw in je browser: de link opent nu in een nieuw tabblad wanneer je erop klikt! Op die manier kun je je startpagina open houden voor wanneer je hem nodig hebt.

Stap 7: voeg een afbeelding toe aan uw startpagina

Nu al onze links zijn ingesteld, is het tijd om onze startpagina te versieren! Deze sjabloon heeft aan de rechterkant van het scherm ruimte voor een aangepaste afbeelding. Zoek nu terug in Notepad ++ naar deze regel:

helemaal aan het einde van de sjabloon. Kies een foto die je leuk vindt, verplaats deze naar dezelfde map als je startpaginabestand en vervang "library_picture.jpg" door de bestandsnaam van je foto. Als de naam van mijn bestand bijvoorbeeld "your_picture.jpg" is, wordt de regel:

Sla uw wijzigingen op en laad de startpagina opnieuw in uw browser.

Aangezien de code van uw startpagina en uw afbeeldingsbestanden zich in dezelfde map bevinden, zou de afbeelding automatisch moeten worden geladen wanneer u de pagina vernieuwt. Als dat niet het geval is, controleer dan de naam van je bestand - daar heb ik het meestal fout!

Smartphone-achtergronden passen uitstekend bij dat project. In het algemeen, elke verticale foto (of zoals mooie mensen zeggen "portret-oriëntatie foto" met een 16:9-verhouding) wat dat betreft! Maar de lay-out van onze startpagina past zich aan, wat je er ook tegenaan gooit.

Als je foto verschijnt, gefeliciteerd, je bent zo goed als klaar!

Stap 8: Een beetje opruimen

Als je extra secties hebt die je op dat moment niet gebruikt, verwijder ze dan gerust! Laten we bijvoorbeeld zeggen dat u sectie 6 niet gebruikt. Zoek:

• Sectie 6
• Item 1
• Artikel 2
• Artikel 3

Selecteer en verwijder deze regels, sla je bestand op en ververs het bestand in je browser om er zeker van te zijn dat alles weg is.

Dit is meestal de stap waarbij ik alles breek omdat ik te snel ga, dus als iets plotseling niet werkt, onthoud dan: haal diep adem en maak ongedaan wat je zojuist hebt gedaan met de CTRL+Z-toetscombinatie op je toetsenbord!

Stap 9: er een echte startpagina van maken

Nu de startpagina alle gewenste links opent en eruitziet zoals we willen dat deze eruitziet, is het tijd om deze te openen wanneer u uw browser start!

Op dat moment houd ik alles weg van het bureaublad van mijn computers door mijn startpaginamap te knippen en in de map Documenten van Windows te plakken. Dus als je klaar bent met je startpagina, doe dat dan!

Vervolgens: hoogstwaarschijnlijk wordt uw browser geopend met uw favoriete zoekmachine, of misschien zelfs een lege pagina.

Hieronder vindt u instructies om Firefox en andere browsers aan te passen:

• Firefox-instructies
• Google Chrome-instructies
• Safari-instructies
• Microsoft Edge-instructies

Als u klaar bent met het volgen van de instructies voor uw browser, sluit u alles af en opent u het opnieuw. Als uw startpagina wordt weergegeven terwijl uw browser wordt gestart, heeft u het gehaald!

Als het niet nodig is, doorloop je de instructies voor je browser opnieuw en zorg je ervoor dat je niets hebt gemist. Erger komt tot het ergste, start dan uw computer opnieuw op nadat u al uw werk hebt opgeslagen. 9 van de 10 keer lost dat alles op!

Stap 10: Alles klaar! En wil je meer weten?

Gefeliciteerd met het voltooien van je startpagina! Het lijkt misschien niet veel, maar je hebt net geleerd om een van de belangrijkste bouwstenen van een website te coderen zoals ik dat deed… Ongeveer 20 jaar geleden!

Als je dit leuk vond en meer wilt weten over startpagina's, dan is het een diep konijnenhol om te volgen! Hier is een kleine selectie om u te helpen bij uw reis naar de startpagina:

• Heb je de Basic startpage guide al geprobeerd? Goed nieuws, er is meer waar het vandaan komt! Bekijk de andere handleidingen van /stpg/ voor meer inspiratie en geavanceerde functies!
• Bekijk de Johnson County Library-catalogus voor boeken over HTML en CSS - en met je bibliotheekpas of e-card heb je ook toegang tot eBooks!
• Je bibliotheekkaart geeft je ook toegang tot Udemy, en het heeft ook een aantal zeer complete lessen over HTML, CSS en webdesign.

Als je super trots bent op je creatie, waarom maak je dan geen screenshot en deel je deze met ons via Twitter of Instagram met de hashtag #jocomakes? We zijn altijd blij om te zien wat onze klanten bedenken!