So verschönern Sie eine dynamische HTML5-Web-App mit Online-Tools

Zu Beginn des letzten Artikels dieser Serie hoffe ich, dass Sie die Bedeutung von HTML 5 und mobiler/responsiver Webentwicklung verstanden haben.

Unabhängig von der Desktop-Distribution Ihrer Wahl ist Netbeans eine leistungsstarke IDE und kann Ihnen in Verbindung mit grundlegenden Linux-Befehlszeilenkenntnissen und den in Teil 3 besprochenen Tools helfen, herausragende Anwendungen ohne großen Aufwand zu erstellen.

Bitte beachten Sie jedoch, dass wir in dieser Serie nur die Grundlagen von HTML 5 und Webentwicklung behandelt haben und davon ausgegangen sind, dass Sie mit HTML einigermaßen vertraut sind, aber das WWW ist voll von großartigen Ressourcen – einige davon sind FOSS – um das zu erweitern, was wir hier geteilt haben.

In diesem letzten Leitfaden werden wir über einige dieser Tools sprechen und Ihnen zeigen, wie Sie sie verwenden können, um sie zu der bestehenden Seite hinzuzufügen, an der wir gearbeitet haben: Verschönerung unserer Benutzeroberfläche.

Verschönerung der Benutzeroberfläche der Website

Font Awesome ist ein komplettes Toolkit für Symbole/Schriftarten/CSS, das das Potenzial hat, sich nahtlos in Bootstrap zu integrieren. Sie können nicht nur eine ganze Reihe anderer Symbole zu Ihren Seiten hinzufügen, sondern auch deren Größe ändern, Schatten werfen, die Farbe ändern und viele andere Optionen mit CSS.

Da der Umgang mit CSS jedoch den Rahmen dieser Serie sprengen würde, werden wir uns nur mit den Symbolen in Standardgröße befassen, ermutigen Sie aber gleichzeitig, "ein wenig tiefer zu graben", um herauszufinden, wie weit Sie dieses Tool bringen kann.

Um Font Awesome herunterzuladen und in Ihr Projekt zu integrieren, führen Sie die folgenden Befehle aus (oder gehen Sie direkt zum Github des Projekts und laden Sie die fontawesome-Zip-Datei über Ihren Browser herunter und dekomprimieren Sie sie mit GUI-Tools):

$ wget https://github.com/FortAwesome/Font-Awesome/releases/download/5.15.4/fontawesome-free-5.15.4-web.zip

(Ja, der Domainname ist eigentlich FortAwesome, mit einem R, das ist also kein Tippfehler).

$ 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

Fügen Sie die .css Datei zur Referenzliste oben auf unserer Seite hinzu, genau wie wir es zuvor mit jQuery und Bootstrap getan haben (denken Sie daran, dass Sie nicht alles eingeben müssen – ziehen Sie die Datei einfach von der Registerkarte "Projekte" in das Codefenster):

Nehmen wir zum Beispiel die Dropdown-Liste in unserer Navigationsleiste:

Schön, oder? Alles, was Sie tun müssen, ist, den Inhalt der vorhandenen ul-Klasse mit dem Namen Dropdown-Menü am unteren Rand index.php zu ersetzen durch:

<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>

Glauben Sie mir – wenn Sie Ihre Zeit in das Erlernen des Gebrauchs dieser Tools investieren, wird dies eine sehr lohnende Erfahrung sein.

Wo kann man um Hilfe bitten?

Als IT-Experte müssen Sie mit den vielen Hilfsressourcen, die das Internet zur Verfügung stellt, gut vertraut sein. Da die Webentwicklung keine Ausnahme ist, finden Sie hier einige Ressourcen, die Sie bei der Optimierung Ihrer Anwendungen sicher nützlich finden werden.

Wenn Sie mit Javascript-Code arbeiten (z. B. wenn Sie mit jQuery arbeiten, wie wir es in Teil 2 getan haben), sollten Sie JSHint verwenden, einen Online-Javascript-Qualitätscode-Checker, der Entwicklern helfen soll, Fehler und potenzielle Probleme zu erkennen. Wenn diese Fallstricke gefunden werden, gibt JSHint die Zeilennummer an, in der sie sich befinden, und gibt Ihnen Hinweise, wie Sie sie beheben können:

Das sieht sicherlich gut aus, aber selbst mit diesem großartigen automatisierten Tool wird es Zeiten geben, in denen Sie jemanden brauchen, der einen Blick auf Ihren Code wirft und Ihnen sagt, wie Sie ihn reparieren oder anderweitig verbessern können, was bedeutet, dass Sie ihn irgendwie weitergeben müssen.

JSFiddle (ein Online-Javascript-/CSS-/HTML-Code-Tester) und Bootply (wie JSFiddle, aber spezialisiert auf Bootstrap-Code) ermöglichen es Ihnen, Code-Schnipsel (auch bekannt als Fiddles) zu speichern und Ihnen einen Link zur Verfügung zu stellen, um sie sehr einfach über das Internet zu teilen (entweder per E-Mail mit Ihren Freunden, über Ihre Profile in sozialen Netzwerken oder in Foren).

Zusammenfassung

In diesem Artikel haben wir Ihnen ein paar Tipps zur Optimierung Ihrer Webanwendungen gegeben und einige Ressourcen geteilt, die sich als nützlich erweisen werden, wenn Sie nicht weiterkommen oder ein anderes Paar Augen (und nicht nur eines, sondern viele) möchten, um einen Blick auf Ihren Code zu werfen, um zu sehen, wie er verbessert werden kann.

Die Chancen stehen gut, dass Sie auch andere Ressourcen kennen. Wenn ja, können Sie sie über das untenstehende Kommentarformular mit dem Rest der Tecmint-Community teilen – und übrigens, zögern Sie nicht, uns mitzuteilen, wenn Sie Fragen zu den in diesem Artikel vorgestellten Inhalten haben.

Wir hoffen, dass diese Serie Ihnen einen Einblick in die enormen Möglichkeiten der mobilfreundlichen und responsiven Webentwicklung gegeben hat.