So verschönern Sie dynamische HTML5-Webanwendungen mithilfe von Online-Tools

Zu Beginn des letzten Artikels dieser Reihe hoffe ich, dass Sie die Bedeutung von HTML 5 und einer mobilfreundlichen/responsiven Webentwicklung begreifen konnten.

Unabhängig davon, für welche Desktop-Distribution Sie sich entscheiden, ist Netbeans eine leistungsstarke IDE und kann Ihnen bei Verwendung zusammen mit grundlegenden Linux-Befehlszeilenkenntnissen und den in Teil 3 besprochenen Tools dabei 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 der Webentwicklung behandelt haben und davon ausgehen, dass Sie mit HTML einigermaßen vertraut sind, das WWW jedoch voller großartiger Ressourcen ist – einige davon sind es 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 vorhandenen Seite hinzuzufügen, an der wir gearbeitet haben, um unsere Benutzeroberfläche (Benutzeroberfläche) zu verschönern.

Verschönerung der Benutzeroberfläche der Website

Font Awesome ist ein vollständiges Symbol-/Schriftart-/CSS-Toolkit, das sich nahtlos in Bootstrap integrieren lässt. Sie können Ihren Seiten nicht nur viele andere Symbole hinzufügen, sondern auch deren Größe ändern, Schatten werfen, Farben ändern und viele andere Optionen mithilfe von CSS nutzen.

Da der Umgang mit CSS jedoch nicht Gegenstand dieser Serie ist, befassen wir uns nur mit den Symbolen in Standardgröße, ermutigen Sie aber gleichzeitig, „etwas tiefer zu graben“, um herauszufinden, wie weit Dieses Tool kann Sie begleiten.

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 entpacken 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 lautet tatsächlich 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

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

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

Schön, oder? Es reicht aus, den Inhalt der vorhandenen ul-Klasse mit dem Namen dropdown-menu unten in 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 – es wird eine sehr lohnende Erfahrung sein, Ihre Zeit in das Erlernen der Verwendung dieser Tools zu investieren.

Wo Sie um Hilfe bitten können

Als IT-Fachmann müssen Sie mit den vielen Hilfsquellen, die das Internet zur Verfügung stellt, gut vertraut sein. Da die Webentwicklung keine Ausnahme darstellt, finden Sie hier einige Ressourcen, die Ihnen bei der Optimierung Ihrer Anwendungen sicher nützlich sein 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 darauf abzielt dabei, Entwicklern dabei zu helfen, Fehler und potenzielle Probleme zu erkennen. Wenn diese Fallstricke gefunden werden, zeigt JSHint die Zeilennummer an, in der sie sich befinden, und gibt Ihnen Hinweise zur Behebung:

Das sieht sicherlich toll aus, aber selbst mit diesem großartigen automatisierten Tool wird es Zeiten geben, in denen Sie jemanden brauchen, der sich Ihren Code ansieht und Ihnen sagt, wie Sie ihn reparieren oder auf andere Weise verbessern können, was bedeutet, dass Sie ihn irgendwie teilen.

Mit JSFiddle (ein Online-Tester für Javascript-/CSS-/HTML-Code) und Bootply (dasselbe wie JSFiddle, aber auf Bootstrap-Code spezialisiert) können Sie Codeausschnitte speichern (auch bekannt als Geigen) und stellen Ihnen einen Link zur Verfügung, mit dem Sie sie ganz einfach über das Internet teilen können (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 zum Optimieren Ihrer Webanwendungen gegeben und einige Ressourcen vorgestellt, die sich als nützlich erweisen, wenn Sie nicht weiterkommen oder ein anderes Paar Augen (und nicht nur eine, sondern mehrere) einen Blick darauf werfen möchten Überprüfen Sie Ihren Code, um zu sehen, wie er verbessert werden kann.

Möglicherweise kennen Sie auch andere Ressourcen. Wenn ja, teilen Sie sie gerne mit dem Rest der Tecmint-Community über das Kommentarformular unten – und zögern Sie übrigens nicht, uns mitzuteilen, wenn Sie Fragen zu den präsentierten Inhalten haben in diesem Artikel.

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