Ottimizzazione di app Web dinamiche HTML5 mediante strumenti online open source


All'inizio dell'ultimo articolo di questa serie, spero che tu abbia saputo cogliere l'importanza dell'HTML 5 e dello sviluppo web reattivo ai dispositivi mobili. Indipendentemente dalla distribuzione desktop scelta, Netbeans è un IDE potente e, se utilizzato insieme alle competenze di base della riga di comando di Linux e agli strumenti illustrati nella Parte 3, può aiutarti a creare applicazioni eccezionali senza troppi problemi.

Tuttavia, tieni presente che abbiamo coperto solo le nozioni di base dell'HTML 5 e dello sviluppo web di questa serie e presumiamo che tu abbia una certa familiarità con HTML, ma il WWW è pieno di grandi risorse, alcune delle quali sono FOSS - per espandere ciò che abbiamo condiviso qui.

In questa ultima guida parleremo di alcuni di questi strumenti e ti mostreremo come usarli per aggiungere alla pagina esistente che abbiamo lavorato su Abbellire la nostra interfaccia utente (interfaccia utente).

Ricorderai da Parte 2 di questa serie ("Aggiunta di jQuery e Bootstrap per scrivere un'applicazione Web HTML5") che il file zip Bootstrap ha una directory chiamata fonts. Abbiamo salvato il suo contenuto in una cartella con lo stesso nome all'interno del SiteRoot del nostro progetto:

Come probabilmente saprai dall'immagine sopra, Bootstrap include un insieme di elementi chiamati glyphicons , che non sono né più né meno i componenti integrati che forniscono icone di bell'aspetto per pulsanti e menu nel tuo applicazioni. L'elenco completo di glyphicons incluso in Bootstrap è disponibile all'indirizzo http://getbootstrap.com/components/.

Per illustrare l'uso di glyphicons , aggiungiamo alcuni alla barra di navigazione nella nostra pagina principale. Modificare i menu della barra di navigazione come segue. Si prega di notare lo spazio tra ogni tag di chiusura span e il testo del menu:

<li class="active"><a href="#"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> Home</a></li>
<li><a href="#"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> About</a></li>
<li><a href="#"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> Contact</a></li>

(a proposito, i tag span sono usati qui per evitare che le icone si mischino con altri componenti).

Ed ecco il risultato:

Glyphicons , sebbene utili, sono anche limitati. Ed ecco dove Font Awesome entra nella scena. Font Awesome è un toolkit completo di icone/font/css che ha il potenziale per integrarsi perfettamente con Bootstrap.

Non solo puoi aggiungere un sacco di altre icone alle tue pagine, ma puoi anche ridimensionarle, proiettare ombre, cambiare colore e molte altre opzioni usando i CSS. Tuttavia, dal momento che trattare con i CSS non rientra nell'ambito di questa serie, tratteremo solo le icone di dimensioni predefinite, ma ti incoraggiamo nello stesso tempo a " scavare un po 'più a fondo " per scoprire quanto lontano questo strumento può portarti

Per scaricare Font Awesome e incorporarlo nel tuo progetto, esegui i seguenti comandi (o sentiti libero di andare direttamente al sito web del progetto e scaricare il file zip attraverso il tuo browser e decomprimerlo usando gli strumenti della GUI):

# wget http://fortawesome.github.io/Font-Awesome/assets/font-awesome-4.3.0.zip

(sì, il nome del dominio è in realtà FortAwesome , con un R , quindi non è un refuso).

# unzip font-awesome-4.3.0.zip
# cp font-awesome-4.3.0/css/font-awesome.min.css /home/gabriel/NetBeansProjects/TecmintTest/public_html/styles
# cp font-awesome-4.3.0/fonts/* /home/gabriel/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 (ricorda che non devi digitare tutto: trascina il file dalla scheda Progetti nella finestra del codice):

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

Bello, vero? Tutto ciò che serve è sostituire il contenuto della ul class esistente 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>

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

Come persona IT , devi conoscere bene le numerose risorse per l'aiuto che Internet ha reso disponibile. Dal momento che fare lo sviluppo web non è un'eccezione, qui ci sono alcune risorse che siamo sicuri che troverai utili durante l'ottimizzazione delle tue applicazioni.

Quando si ha a che fare con il codice Javascript (ad esempio, quando si lavora con jQuery come abbiamo fatto in Parte 2 ), si vorrà utilizzare JSHint , un correttore di codice di qualità Javascript online che mira aiutare gli sviluppatori a rilevare errori e potenziali problemi. Quando vengono individuati questi errori, JSHint indica il numero di riga in cui si trovano e ti fornisce suggerimenti per correggerli:

Questo sicuramente sembra fantastico, ma anche con questo fantastico strumento automatizzato, ci saranno momenti in cui avrai bisogno di qualcun altro per dare un'occhiata al tuo codice e dirti come aggiustarlo o comunque migliorarlo, il che implica la condivisione in qualche modo.

JSFiddle (un tester di codice Javascript/CSS/HTML online) e Bootply (come JSFiddle ma specializzato nel codice Bootstrap) ti consentono di salvare frammenti di codice (noto anche come violini ) e ti fornisce un link per condividerli facilmente su Internet (sia via email con i tuoi amici, usando i tuoi profili di social network, o nei forum).

Sommario

In questo articolo ti abbiamo fornito alcuni suggerimenti per mettere a punto le tue applicazioni web e condiviso alcune risorse che ti torneranno utili se ti blocchi 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 della community Tecmint utilizzando il modulo di commento qui sotto e, a proposito, non esitare a farci sapere se avete domande sul contenuto presentato in questo articolo.

Speriamo che questa serie ti abbia dato una panoramica delle vaste possibilità di sviluppo web mobile-friendly e reattivo.