All'inizio dell'ultimo articolo di questa serie, spero che tu sia stato in grado di cogliere l'importanza dell'HTML 5 e dello sviluppo web ottimizzato per dispositivi mobili/reattivo.
Indipendentemente dalla distribuzione desktop scelta, Netbeans è un potente IDE e se usato insieme a competenze di base della riga di comando di Linux e gli strumenti discussi in Parte 3, può aiutarti a creare applicazioni eccezionali senza troppi problemi.
Tuttavia, tieni presente che abbiamo trattato solo le basi dell'HTML 5 e dello sviluppo web in questa serie e presumo che tu abbia una certa familiarità con l'HTML, ma il WWW è pieno di grandi risorse - alcune sono FOSS - per espandere ciò che abbiamo condiviso qui.
In quest'ultima guida, parleremo di alcuni di questi strumenti e ti mostreremo come usarli per aggiungere alla pagina esistente su cui abbiamo lavorato Abbellire la nostra UI (interfaccia utente).
Font Awesome è un toolkit completo di icone/font/css che ha il potenziale per integrarsi perfettamente con Bootstrap. Non solo puoi aggiungere molte altre icone alle tue pagine, ma puoi anche ridimensionarle, proiettare ombre, cambiare colore e molte altre opzioni usando i CSS.
Tuttavia, poiché occuparsi di CSS non rientra nell'ambito di questa serie, ci occuperemo solo delle icone di dimensioni predefinite, ma ti incoraggeremo allo stesso tempo a "scava un po' più a fondo” per scoprire fino a che punto può portarti questo strumento.
Scaricare Carattere fantastico e incorporalo nel tuo progetto, esegui i seguenti comandi (o sentiti libero di andare direttamente al Github del progetto e scarica il fantastico zip file tramite il browser e decomprimerlo utilizzando gli strumenti della GUI):
$ wget https://github.com/FortAwesome/Font-Awesome/releases/download/5.15.4/fontawesome-free-5.15.4-web.zip.
(sì, il nome di dominio è in realtà ForteFantastico, con un R, quindi non è un errore di battitura).
$ unzip fontawesome-free-5.15.4-web.zip. $ cp fontawesome-free-5.15.4-web/css/fontawesome.min.css /home/ubuntu/NetBeansProjects/TecmintTest/public_html/styles. $ cp fontawesome-free-5.15.4-web/webfonts/* /home/ubuntu/NetBeansProjects/TecmintTest/public_html/fonts.
E aggiungi il .css
file all'elenco dei riferimenti nella parte superiore della nostra pagina, proprio come abbiamo fatto con jQuery e Bootstrap in precedenza (ricorda che non devi digitare tutto: basta trascinare il file dal Progetti scheda nella finestra del codice):
Prendiamo il cadere in picchiata elenco nella nostra barra di navigazione, ad esempio:
Bello, vero? Tutto ciò che serve è sostituire il contenuto dell'esistente ul classe
di nome menu a discesa in fondo a index.php insieme a:
Credimi, investire il tuo tempo nell'imparare a utilizzare questi strumenti sarà un'esperienza molto gratificante.
come un ESSO persona, devi conoscere bene le numerose risorse di aiuto che Internet ha messo a disposizione. Poiché lo sviluppo web non fa eccezione, ecco alcune risorse che siamo sicuri troverai utili durante la messa a punto delle tue applicazioni.
Quando si tratta di codice Javascript (ad esempio, quando si lavora con jQuery come abbiamo fatto in Parte 2), vorrai usare JSHint, un controllore del codice di qualità Javascript online che mira ad aiutare gli sviluppatori a rilevare errori e potenziali problemi. Quando si trovano queste insidie, JSHint indica il numero di riga in cui si trovano e fornisce suggerimenti per risolverli:
Sicuramente sembra fantastico, ma anche con questo fantastico strumento automatizzato, ci saranno momenti in cui avrai bisogno di qualcuno altro per dare un'occhiata al tuo codice e dirti come risolverlo o migliorarlo in altro modo, il che implica condividerlo in qualche modo.
JSFiddle (un tester di codice Javascript / CSS / HTML online) e Bootply (uguale a JSFiddle ma specializzato nel codice Bootstrap) ti consente di salvare frammenti di codice (noto anche come violini) e fornirti un link per condividerli molto facilmente su Internet (via e-mail con i tuoi amici, utilizzando i tuoi profili di social network o nei forum).
In questo articolo, ti abbiamo fornito alcuni suggerimenti per ottimizzare le tue applicazioni web e abbiamo condiviso alcune risorse che arriveranno utile se rimani bloccato o desideri un altro paio di occhi (e non solo uno, ma molti) per dare un'occhiata al tuo codice per vedere come può essere migliorato.
È probabile che tu possa conoscere anche altre risorse. Se è così, sentiti libero di condividerli con il resto del Tecmint community utilizzando il modulo di commento qui sotto e, a proposito, non esitare a farci sapere se hai domande sul contenuto presentato in questo articolo.
Speriamo che questa serie ti abbia dato un'idea delle vaste possibilità di sviluppo web ottimizzato per i dispositivi mobili e reattivo.