Crea una pagina iniziale personalizzata e minimalista!: 10 passaggi

2024 Autore: John Day | [email protected]. Ultima modifica: 2024-01-30 09:59

Hai dovuto passare al lavoro principalmente a distanza da quando il COVID-19 è diventato una cosa? Stesso!

Lavorare da casa con i nostri computer e su Internet spesso significa che dobbiamo tenere traccia di molti siti Web per lavoro, per scuola o anche… per divertimento!

I segnalibri non sono sempre all'altezza del compito, quindi che ne dici di creare una pagina iniziale personalizzata su misura per te, con tutti i collegamenti di cui hai bisogno e che si apre nel tuo browser Web ogni volta che ne hai bisogno?

Ecco di cosa avrai bisogno:

• Un computer (il nostro esegue Windows, ma qualsiasi computer moderno andrà bene).
• Una connessione a Internet.
• Una nuova installazione dell'editor di testo Notepad++.

Quando sei pronto, iniziamo con l'uso del nostro modello di pagina iniziale… o creandone uno da zero!

Passaggio 1: crea una pagina iniziale o scarica il nostro modello personalizzato

A questo punto hai due opzioni:

1. Scarica il nostro modello personalizzato (le istruzioni seguono un po' più avanti in questo passaggio) oppure,
2. Segui questa guida di base alla pagina iniziale; ti guiderà passo dopo passo attraverso gli elementi costitutivi di una semplice pagina iniziale - e questa è la guida che abbiamo seguito per creare questa pagina iniziale personalizzata!

Perché consigliare un tutorial… in un tutorial? Il nostro lavoro come facilitatori MakerSpace non è solo quello di mostrarti come fare le cose: è anche quello di connetterti alla cultura Maker e alle risorse disponibili là fuori. Questa guida è uno dei luoghi in cui iniziano molti designer di pagine iniziali, quindi aveva senso condividerla con te!

Se hai tempo, vai avanti con l'opzione n. 2, ma in caso contrario, puoi sempre fare riferimento alla guida di base della pagina iniziale in seguito! Per questo tutorial, supponiamo che tu stia scaricando il nostro modello personalizzato! Per scaricarlo:

1. Apri il nostro repository DIY_startpage su Github.
2. Fare clic sul grande pulsante verde Codice per aprire un menu a discesa.
3. Fare clic su Download ZIP per scaricare tutti i file del progetto.
4. Estrai tutti i file dal file ZIP che hai appena scaricato in una posizione a tua scelta.

GitHub è un sito Web in cui programmatori e designer di tutto il mondo condividono il proprio codice e le proprie creazioni con gli altri: consente inoltre di collaborare con altri su progetti di ogni tipo. In conclusione, è un ottimo strumento che ogni Maker dovrebbe conoscere!

Ora avvia il tuo browser preferito: mi piace molto Firefox, ma il nostro modello dovrebbe funzionare su quasi tutti i browser Web recenti, quindi sentiti libero di usare Edge, Chrome o Safari!

Infine, apri il file "DIY_startpage.html" nel tuo browser E in Notepad++ e iniziamo a personalizzarlo!

Passaggio 2: elenca i tuoi preferiti

Avere una pagina iniziale è fantastico. Avere una pagina iniziale utile è ancora meglio e in questo momento la nostra sembra un po' vuota!

Quali sono le cose che controlli regolarmente e di cui devi tenere traccia? Quali webcomics leggi al mattino? Quale sito web di notizie ti piace controllare? Queste sono le cose che dovrebbero atterrare sulla tua pagina iniziale.

Per questo tutorial, userò solo alcuni dei miei preferiti. Avviso spoiler, molti link dalla libreria! Ma anche alcuni dei miei Maker preferiti per l'ispirazione e alcuni dei miei divertimenti preferiti. Puoi trovare tutti questi elementi qui sotto con un link, come esempio!

Notizie e letture

• Giornali digitali
• Libri digitali
• Riviste digitali

Apprendimento

• Scuole W3C
• Udemy
• Lingue del mango

Musica

• Ascolta locale
• Esplosione di canzoni
• Jamendo Music Radios

Cultura del creatore

• Core77
• Lumecluster
• melapropismi

Ho scelto tre dei miei preferiti per ogni categoria, ma dovresti essere in grado di sceglierne di più o di meno senza problemi: il layout della tua pagina iniziale si adatterà automaticamente al numero o alle risorse!

Una volta che hai elencato tutti i tuoi preferiti, mettiamoli da parte per un minuto e lavoriamo per rendere il nostro modello di pagina iniziale generico un po' più teso.

Passaggio 3: personalizza il tuo carattere

Avvia Notepad++, fai clic su File > Apri per aprire il tuo file "DIY_startpage.html". Quello che stai guardando sembra molto diverso dalla pagina nel tuo browser, vero? È il codice della tua pagina e i browser interpretano quel codice per renderlo un po' più gradevole agli occhi e fare tutte le cose di cui abbiamo bisogno.

Il codice per il nostro progetto di pagina iniziale è scritto in due linguaggi correlati: HTML e CSS. L'HTML è solitamente responsabile del contenuto di una pagina e il CSS responsabile dell'aspetto di una pagina.

Cerca questa prima sezione per personalizzare la tua pagina iniziale:

html {

allinea-elementi: centro; colore: #313131; display: flessibile; font: 22px "Courier New", Courier, monospace; altezza: 100%; giustifica-contenuto: centro; margine: 0; }

Questa sezione della nostra pagina iniziale si concentra sull'aspetto generale degli articoli sulla nostra pagina. La linea:

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

riguarda specificamente il carattere che stiamo utilizzando nella pagina iniziale e ha due parametri che definiscono l'aspetto del testo sulla tua pagina: dimensione e famiglia di caratteri.

• size - Ecco cos'è quel "22px". La dimensione del tuo testo sullo schermo è definita in "px", abbreviazione di pixel.
• famiglia di caratteri: è qui che elenchiamo i caratteri che vorremmo utilizzare. Di solito è una buona idea elencarne diversi, dal tipo di carattere che si desidera utilizzare alla famiglia più generica. Questi font si basano sul browser che stai utilizzando, quindi se il più particolare non è disponibile, il browser proverà il successivo e così via.

La pagina CSS Web Safe Fonts di w3schools ha un ottimo elenco di combinazioni di caratteri che hanno un bell'aspetto, mantengono lo stile che stai cercando e funzioneranno sulla maggior parte dei browser moderni.

Ad esempio, puoi sostituire:

"Corriere Nuovo", Corriere, monospazio;

insieme a:

"Palatino Linotype", "Libro Antiqua", Palatino, serif;

o:

"Comic Sans MS", corsivo, sans-serif;

Salva il tuo file e aggiorna la pagina nel tuo browser per vedere le modifiche! Non ti piace? Nessun problema! Gioca con i CSS Web Safe Fonts finché non trovi una combinazione che ti piace.

Passaggio 4: personalizza la citazione del titolo

Cerca questa sezione nel tuo file HTML:

Questa è la tua pagina iniziale! Divertiti

Scegli un preventivo che ti piace e sostituisci il codice! Per conto mio, ho scelto

Ancora una volta sulla breccia

Il layout della tua pagina iniziale dovrebbe adattarsi al volo per corrispondere al tuo preventivo non appena ricarichi la pagina nel tuo browser: in Firefox, ciò significa premere CTRL+R sulla tastiera o fare clic sull'icona Ricarica. Scegli un preventivo che ti piace ora (o scegli qualcosa in seguito!) e iniziamo a personalizzare le sezioni della tua pagina iniziale!

Passaggio 5: personalizza le tue sezioni

Ora che hai trovato una combinazione di caratteri che ti piace e hai una grande citazione per ispirarti, continuiamo e personalizziamo le tue sezioni.

Se hai scaricato la nostra pagina iniziale da Github, hai 6 sezioni disponibili da personalizzare: la guida originale ne ha solo 4, ma poiché sempre più aspetti della nostra vita si sono spostati online di recente, sono andato avanti e ne ho aggiunti altri per ogni evenienza.

Trova la prima sezione e digita ciò di cui abbiamo bisogno. Come promemoria, la mia prima sezione è "Notizie e letture":

Con il tuo file ancora aperto in Notepad ++, trova la seguente riga di codice:

Sezione 1

e sostituiscilo con la categoria nella tua lista che pensi di utilizzare di più.

Dal momento che molti di noi sono abituati a iniziare a leggere i documenti dall'alto a sinistra, è lì che i tuoi occhi potrebbero naturalmente andare - quindi approfittane e mantieni il nostro punto di riferimento più importante lì! Ma se vieni da una cultura con una direzione di lettura diversa, o se lavori in modo diverso, personalizzalo tu stesso. Dopotutto è la tua pagina iniziale: sai cosa è meglio per te!

Un titolo di sezione in basso, cinque per andare! Cerca la riga di codice che dice:

Sezione 2

Modificalo, quindi continua a cercare i titoli delle sezioni e modificali finché non arrivi alla fine dell'elenco. Se non stai utilizzando tutte le sezioni, lasciale stare! Faremo anche una piccola pulizia alla fine di questo tutorial.

Una volta che hai finito di personalizzare le sezioni, salva le modifiche in Notepad++ e ricarica la pagina nel tuo browser. Tutti i titoli delle sezioni dovrebbero apparire dove li hai inseriti: ora possiamo personalizzare i collegamenti in ogni sezione!

Passaggio 6: personalizza i tuoi collegamenti

La personalizzazione dei collegamenti in ogni sezione è un po' più complessa ma certamente non molto più difficile!

Questa volta non stiamo solo cambiando il nome dei link, stiamo anche cambiando cosa puoi fare con loro! Ogni elemento in ogni sezione diventerà cliccabile, link a un sito web diverso. Bonus, puoi anche decidere se vuoi che si apra in una nuova finestra o meno!

Innanzitutto, cerca una linea che assomigli a:

link_one_name

Seleziona quel bit "link_one_name" e sostituiscilo con il tuo testo. Ad esempio, il primo collegamento nella prima sezione in base al mio elenco dal passaggio X è "Giornali digitali", quindi otteniamo:

Giornali digitali

Quindi, lavoriamo per personalizzare il collegamento! Sostituisci il bit "link.one" con il tuo primo link. Per me, questo sarà il collegamento ai nostri giornali digitali, quindi sarà simile a:

Giornali digitali

Salva il tuo lavoro nell'editor di testo e ricarica la pagina nel tuo browser

Ora dovresti essere in grado di fare clic sul primo collegamento che hai personalizzato. Se non ci vuole, va bene! Ricomincia da capo o torna sui tuoi passi fino a quando il link non si apre quando fai clic su di esso.

Una volta che il tuo primo collegamento funziona… Bene, tutto ciò che devi fare è ripetere questi passaggi per ogni collegamento in ogni sezione, fino a quando non avrai personalizzato tutti i nomi e i collegamenti sulla tua pagina iniziale! C'è solo un problema però: è probabile che quando fai clic su un link, la tua pagina iniziale scompaia appena il nuovo link si apre nella stessa scheda o finestra.

Non è molto conveniente… Allora, che ne dici di cambiare il modo in cui i link si aprono? Usiamo il nostro primo link come esempio! Probabilmente ricorderai che qui diciamo al tuo browser di aprire un collegamento quando fai clic su di esso:

Giornali digitali

Ma indovina un po': è anche qui che decidiamo come si aprirà il collegamento! Modificalo in:

Giornali digitali

Ora salva il tuo lavoro e ricarica la pagina nel tuo browser: il link ora si aprirà in una nuova scheda quando lo cliccherai! In questo modo puoi mantenere aperta la tua pagina iniziale per quando ne hai bisogno.

Passaggio 7: aggiungi un'immagine alla tua pagina iniziale

Ora che tutti i nostri collegamenti sono impostati, è il momento di decorare la nostra pagina iniziale! Questo modello ha spazio per un'immagine personalizzata sul lato destro dello schermo. Ora di nuovo in Notepad ++, cerca questa riga:

fino alla fine del modello. Scegli un'immagine che ti piace, spostala nella stessa cartella del file della pagina iniziale e sostituisci "library_picture.jpg" con il nome del file della tua immagine. Ad esempio, se il nome del mio file è "your_picture.jpg", la riga diventa:

Salva le modifiche e, ancora una volta, ricarica la pagina iniziale nel tuo browser.

Poiché il codice della tua pagina iniziale e i tuoi file di immagine si trovano nella stessa cartella, l'immagine dovrebbe caricarsi automaticamente quando aggiorni la pagina. In caso contrario, controlla il nome del tuo file: di solito è lì che sbaglio!

Gli sfondi per smartphone sono perfetti per quel progetto. In generale, qualsiasi immagine verticale (o come dicono le persone fantasiose "foto con orientamento verticale" con un rapporto 16: 9) se è per questo! Ma il layout della nostra pagina iniziale si adatterà indipendentemente da ciò che ci proponi.

Se la tua foto viene visualizzata, congratulazioni, hai praticamente finito!

Passaggio 8: ripulire un po'

Se hai sezioni extra che non stai utilizzando in quel momento, sentiti libero di eliminarle! Ad esempio, supponiamo che tu non stia utilizzando la Sezione 6. Trova:

• Sezione 6
• Articolo 1
• Articolo 2
• Articolo 3

Seleziona ed elimina queste righe, salva il file e aggiorna il file nel browser per assicurarti che tutto sia sparito.

Questo di solito è il passaggio in cui rompo tutto perché vado troppo veloce, quindi se qualcosa all'improvviso non funziona ricorda: fai un respiro profondo e annulla ciò che hai appena fatto con la combinazione di tasti CTRL+Z sulla tastiera!

Passaggio 9: trasformarlo in una vera pagina iniziale

Ora che la pagina iniziale apre tutti i collegamenti desiderati e ha l'aspetto che desideriamo, è ora di aprirla all'avvio del browser!

A quel punto, mi piace tenere tutto lontano dal desktop del mio computer tagliando e incollando la mia cartella della pagina iniziale nella cartella Documenti di Windows. Quindi, se hai finito di lavorare sulla tua pagina iniziale, fallo!

Avanti: molto probabilmente il tuo browser si apre con il tuo motore di ricerca preferito, o forse anche una pagina vuota.

Di seguito puoi trovare le istruzioni per personalizzare Firefox e altri browser:

• Istruzioni per Firefox
• Istruzioni di Google Chrome
• Istruzioni Safari
• Istruzioni per Microsoft Edge

Una volta che hai finito di seguire le istruzioni per il tuo browser, chiudi tutto e riaprilo. Se la tua pagina iniziale viene visualizzata all'avvio del browser, ce l'hai fatta!

Se non è stato necessario, ripassa le istruzioni per il tuo browser e assicurati di non aver perso nulla. Nella peggiore delle ipotesi, riavvia il computer dopo aver salvato tutto il lavoro. 9 volte su 10, questo risolve tutto!

Passaggio 10: tutto fatto! E vuoi saperne di più?

Congratulazioni per aver terminato la tua pagina iniziale! Potrebbe non sembrare molto, ma hai appena imparato a codificare uno degli elementi costitutivi più importanti di un sito web come ho fatto io… Circa 20 anni fa!

Se ti è piaciuto e desideri saperne di più sulle pagine iniziali, è una profonda tana del coniglio da seguire! Ecco una piccola selezione per aiutarti nel tuo viaggio verso la pagina iniziale:

• Hai provato la guida alla pagina iniziale di base? Buone notizie, c'è di più da dove viene! Dai un'occhiata alle altre guide di /stpg/ per ulteriori ispirazioni e funzionalità avanzate!
• Dai un'occhiata al catalogo della Johnson County Library per i libri su HTML e CSS - e con la tua tessera della biblioteca o e-card hai accesso anche agli eBook!
• La tua tessera della biblioteca ti dà anche accesso a Udemy e ha anche alcune classi molto complete su HTML, CSS e web design.

Se sei super orgoglioso della tua creazione, perché non fai uno screenshot e condividilo con noi su Twitter o Instagram con l'hashtag #jocomakes? Siamo sempre felici di vedere cosa escogitano i nostri clienti!