Oggi vedremo come aggiungere la navigazione da tastiera a un sito Web utilizzando alcune semplici righe di JavaScript. Per prima cosa creeremo un semplice tema del sito in Photoshop e poi lo trasformeremo in un sito Web funzionante che utilizza le funzioni della tastiera per cambiare pagina.
Ecco uno screenshot di ciò che costruiremo. Clicca sull'immagine per vedere l'esempio dal vivo:
Photoshop funziona
Per iniziare, apri Photoshop e crea un nuovo documento 800px per 600px a 72 dpi.
Gradiente radiale
Quindi afferrare lo strumento sfumatura e allungare una sfumatura radiale sullo sfondo. Il colore di primo piano deve essere impostato su # 343636 e il colore di sfondo su # 121414. Assicurati che il colore più chiaro non incida sui bordi del documento o che si ottenga un vantaggio quando lo inseriamo nel nostro CSS.
genere
Ora prendi lo strumento testo e scegli un carattere. Ho scelto Helvetica Neue. Digita del testo per la tua homepage come sopra, quindi copia quel livello e cambia il tipo da leggere? Su di me.? Ripeti questo passaggio per "Il mio portafoglio"? e? Contattami.?
Ombra interiore
Ora posiziona un'ombra interna su tutti i livelli di testo appena creati utilizzando le impostazioni sopra. Puoi applicare l'effetto a un livello, quindi fare clic con il pulsante destro del mouse e andare a "copiare lo stile di livello" ,? quindi fai clic con il pulsante destro sugli altri livelli e incolla lo stile del livello.
Chiave di navigazione
Ora crea una chiave per istruire gli utenti su come usare la funzione di navigazione della tastiera. Usando lo stesso carattere, digita il testo in blu e applica un bagliore esterno per dargli un effetto piacevole e radioso. Guarda le schermate sopra per le impostazioni specifiche. Assicurati di lasciare uno spazio tra parentesi per le frecce nel passaggio successivo.
frecce
Afferra lo strumento forma personalizzata (che si trova sotto il menu a scomparsa dello strumento rettangolo) e seleziona una freccia come forma. Disegna quattro frecce (su, giù, sinistra e destra) e applica lo stesso colore e lo stesso bagliore esterno del tipo. Ora posiziona le frecce tra parentesi dal passaggio precedente.
Salva le quattro versioni
Ora vai a? Salva per Web e dispositivi? sotto il menu file. Salva ogni versione (Home, Informazioni, ecc.) Come jpg in una cartella denominata? Images.? Ora siamo finiti in Photoshop così vicino che passiamo al tuo editor di testo o alla tua suite di sviluppo web preferiti. Uso la fantastica applicazione Mac Espresso.
L'HTML
Crea un file index.html nella stessa directory della cartella di immagini che hai creato prima. Aggiungi una struttura HTML di base che si collega a un file CSS e JavaScript.
Aggiunta di un menu di navigazione
Non vogliamo che il nostro sito funzioni esclusivamente sulla navigazione con tastiera, quindi aggiungeremo un menu di navigazione visiva come metodo principale per spostarsi. Per fare ciò creeremo un? Nav? div dentro un? contenitore? div nella parte del corpo del nostro HTML. All'interno del div nav, posiziona una lista non ordinata di link come sotto.
Crea le altre pagine
Come ho detto prima, vogliamo mantenere l'HTML in questo tutorial semplice, quindi ci fermeremo qui per la home page. Duplica questo codice in altri tre file html: about.html, portfolio.html e contact.html. In ognuno di questi file, cambia solo il nome del contenitore div. Nel file about, cambiarlo in aboutContainer.? Segui l'esempio con? PortfolioContainer? e? contactContainer? negli altri due.
Aggiungere il CSS
Ora dovresti avere quattro pagine web essenzialmente vuote che contengono solo un elenco di link senza stile. Crea un file style.css e avvialo con il seguente stile di base.
Qui abbiamo essenzialmente impostato un colore di sfondo (corrispondente al colore di sfondo del nostro PSD) e impostato la famiglia di font come Helvetica bella e sottile. Il margine automatico assicurerà che il nostro contenuto rimanga centrato.
Aggiungere le immagini di sfondo
Ecco dove tutto inizia a sembrare giusto. Modella ciascuno dei quattro div del contenitore in modo da avere i quattro sfondi che abbiamo configurato in Photoshop.
A questo punto le tue pagine dovrebbero prendere forma e apparire come l'immagine qui sotto:
Disegnare il menu di navigazione
Un'ultima porzione di CSS completerà il menu di navigazione.
Come puoi vedere, ho applicato un po 'di padding al div del nav principale e rimosso qualsiasi decorazione del testo dal testo del link. Poi ho impostato il colore del testo in bianco e aggiunto un effetto di passaggio del mouse che corrisponde al colore del testo blu nella? Nav Key? in fondo alla pagina. Infine, ho aggiunto poche righe per indirizzare in modo specifico le voci dell'elenco e distribuirle un po '.
Se hai seguito, la tua pagina dovrebbe corrispondere allo screenshot seguente:
JavaScript
Ora dovresti avere un sito di base di quattro pagine funzionante! I collegamenti nel menu di navigazione dovrebbero consentire di passare da una pagina all'altra con relativa facilità.Ora entreremo nel cuore del progetto: aggiungendo la navigazione da tastiera. In realtà è un processo abbastanza semplice e richiede solo pochi minuti al massimo. Il nostro JavaScript sarà ispirato da questo tutorial ma preso in una direzione diversa.
Impostazione dello script
Crea un file script.js e inserisci il seguente codice:
Come puoi vedere, questo codice è piuttosto breve e molto semplice. In sostanza, diciamo a JavaScript di eseguire la funzione? KeyCheck? quando l'utente preme un tasto. La funzione KeyCheck è quindi legata alla variabile? KeyID.? Questo guarderà ciò che un utente preme e imposta il valore su KeyID. Ora aggiungeremo una riga di codice che indica cosa fare se il KeyID corrisponde a un determinato criterio.
Questo codice è un po 'confuso. Come indicato sul nostro tasto di navigazione, vogliamo programmare i numeri 1-4 e i tasti freccia per passare a pagine specifiche. Qui abbiamo impostato un caso che dice: se il codice? 49? viene restituito, passa alla pagina index.html (tramite window.location). Probabilmente avrete notato che il codice 49 non è un modo intuitivo per riferirsi alla pressione del numero uno. Per scoprire i codici chiave per un dato tasto, vai a questa pagina e scorri verso il basso fino alla sezione 3.3. Vediamo che i numeri 0-9 sono indicati dai codici 48-57. Scorri ulteriormente e osserva che i codici dei tasti freccia sono i seguenti: 37 (freccia sinistra), 38 (freccia su), 39 (freccia destra), 40 (freccia giù). Usando questo set di codici come linea guida possiamo programmare ogni tasto premuto per corrispondere a una pagina.
FIN!
Questo è tutto ciò che c'è da fare! Ora dovresti essere in grado di navigare nel tuo sito usando solo la freccia e i tasti numerici come nell'esempio di apertura. Usa i commenti qui sotto per farci sapere se ritieni che questa sia una buona idea e se aggiungerai o meno la navigazione da tastiera al tuo sito. C'è sicuramente più di un modo per farlo, quindi fateci sapere tutte le idee che avete per un metodo alternativo di implementare le scorciatoie da tastiera.