Ricerca nel sito web

Come abbellire l'app Web HTML5 dinamica utilizzando gli strumenti online


All'inizio dell'ultimo articolo di questa serie, spero che tu sia riuscito a cogliere l'importanza di HTML 5 e dello sviluppo web ottimizzato per dispositivi mobili/responsivo.

Indipendentemente dalla distribuzione desktop scelta, Netbeans è un potente IDE e, se utilizzato insieme alle competenze di base della riga di comando di Linux e agli strumenti discussi nella Parte 3, può aiutarti a creare applicazioni eccezionali senza troppi problemi.

Tuttavia, tieni presente che in questa serie abbiamo trattato solo le basi dell'HTML 5 e dello sviluppo web e presumiamo che tu abbia una certa familiarità con l'HTML, ma WWW è pieno di ottime risorse, alcune delle quali 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 per abbellire la nostra interfaccia utente (interfaccia utente).

Abbellire l'interfaccia utente del sito web

Font Awesome è un toolkit completo di icone/caratteri/css che ha il potenziale per integrarsi perfettamente con Bootstrap. Non solo puoi aggiungere tantissime altre icone alle tue pagine, ma puoi anche ridimensionarle, proiettare ombre, cambiare colore e molte altre opzioni utilizzando i CSS.

Tuttavia, poiché trattare con i CSS non rientra nell'ambito di questa serie, ci occuperemo solo delle icone di dimensioni predefinite ma ti invitiamo allo stesso tempo a "scavare un po' più a fondo" per scoprire fino a che punto questo strumento può portarti.

Per scaricare Font Awesome e incorporarlo nel tuo progetto, esegui i seguenti comandi (o sentiti libero di andare direttamente su Github del progetto e scaricare il file zip fontawesome tramite il tuo 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 del dominio è in realtà FortAwesome, con una 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 file .css all'elenco dei riferimenti nella parte superiore della nostra pagina, proprio come abbiamo fatto con jQuery e Bootstrap in precedenza (ricordalo non è necessario digitare tutto: basta trascinare il file dalla scheda Progetti nella finestra del codice):

Prendiamo ad esempio l'elenco a discesa nella nostra barra di navigazione:

Bello, vero? Tutto ciò che serve è sostituire il contenuto della ul class esistente denominata menu a discesa nella parte inferiore di index.php con:

<li><a href="#"><i class="fa fa-pencil fa-fw"></i> Edit</a></li>
<li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Delete</a></li>
<li><a href="#"><i class="fa fa-ban fa-fw"></i> Ban</a></li>
<li class="divider"></li>
<li><a href="#"><i class="i"></i> Make admin</a></li>

Credimi, investire il tuo tempo nell'imparare a utilizzare questi strumenti sarà un'esperienza molto gratificante.

Dove chiedere aiuto

In qualità di persona IT, devi conoscere bene le numerose risorse di aiuto messe a disposizione da Internet. Poiché lo sviluppo web non è un'eccezione, ecco alcune risorse che siamo sicuri troverai utili durante l'ottimizzazione delle tue applicazioni.

Quando hai a che fare con il codice Javascript (ad esempio, quando lavori con jQuery come abbiamo fatto nella Parte 2), ti consigliamo di utilizzare JSHint, un controllo online del codice di qualità Javascript che mira per aiutare gli sviluppatori a rilevare errori e potenziali problemi. Quando vengono rilevati questi errori, JSHint indica il numero di riga in cui si trovano e fornisce suggerimenti per risolverli:

Sembra sicuramente fantastico, ma anche con questo fantastico strumento automatizzato, ci saranno momenti in cui avrai bisogno che qualcun altro dia un'occhiata al tuo codice e ti dica come risolverlo o migliorarlo in altro modo, il che implica condividerlo in qualche modo.

JSFiddle (un tester online di codici Javascript/CSS/HTML) e Bootply (come JSFiddle ma specializzato nel codice Bootstrap) ti consentono di salvare frammenti di codice (noti anche come fiddles) e fornirti un collegamento per condividerli molto facilmente su Internet (via email con i tuoi amici, utilizzando i tuoi profili di social network o nei forum).

Riepilogo

In questo articolo, ti abbiamo fornito alcuni suggerimenti per ottimizzare le tue applicazioni web e condiviso alcune risorse che ti torneranno utili se rimani bloccato o desideri un altro paio di occhi (e non solo uno, ma molti) a cui dare un'occhiata il tuo codice per vedere come può essere migliorato.

È probabile che tu possa conoscere anche altre risorse. In tal caso, sentiti libero di condividerli con il resto della comunità Tecmint utilizzando il modulo di commento qui sotto e, a proposito, non esitare a farci sapere se hai domande sui contenuti presentati in questo articolo.

Ci auguriamo che questa serie ti abbia dato un'idea delle vaste possibilità dello sviluppo web reattivo e ottimizzato per i dispositivi mobili.