Wéi eng dynamesch HTML5 Web App mat Online Tools ze verschéineren

Wéi ech de leschten Artikel an dëser Serie ufänken, ass et meng Hoffnung datt Dir d'Wichtegkeet vun HTML 5 a mobilfrëndlech/reaktiounsfäeger Webentwécklung versteet.

Onofhängeg vun Ärer Desktopverdeelung vun der Wiel, Deel 3, kann Iech hëllefen aussergewéinlech Uwendungen ouni vill Stress ze kreéieren.

Wéi och ëmmer, notéiert w.e.g. datt mir nëmmen d'Basis vun HTML 5 a Webentwécklung an dëser Serie ofgedeckt hunn an ugeholl datt Dir e bësse vertraut sidd mat HTML, awer de WWW ass voller super Ressourcen - e puer vun hinnen sinn FOSS - fir auszebauen wat mir hunn hei gedeelt.

An dësem leschte Guide schwätze mir iwwer e puer vun dësen Tools a weisen Iech wéi Dir se benotzt fir op déi existent Säit ze addéieren, déi mir geschafft hunn Eis UI ze verschéineren (User Interface).

Verschéineren User Interface vun Websäit

Font Awesome ass eng Ikon/Schrëft/css komplett Toolkit déi de Potenzial huet fir nahtlos mat Bootstrap z'integréieren. Net nëmmen Dir kënnt eng ganz Partie aner Symboler op Är Säiten addéieren, awer Dir kënnt och d'Gréisst änneren, Schatten werfen, Faarf änneren a vill aner Optiounen mat CSS.

Wéi och ëmmer, well den Ëmgang mat CSS aus dem Ëmfang vun dëser Serie ass, wäerte mir nëmme mat de Standardgréissten Ikonen beschäftegen, awer encouragéieren Iech zur selwechter Zäit e bësse méi déif ze graven fir ze entdecken wéi wäit dëst Tool Iech ka bréngen.

Fir Font Awesome erofzelueden an an Äre Projet z'integréieren, fuert déi folgend Kommandoen aus (oder fillt Iech gratis direkt op de Github vum Projet ze goen an d'fontawesome Zip-Datei duerch Äre Browser erofzelueden an se mat GUI Tools ze dekompriméieren):

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

(jo, den Domain Numm ass eigentlech FortAwesome, mat engem R, also dat ass keen Tippfeeler).

$ 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

A füügt d'.css-Datei un d'Referenzlëscht uewen op eiser Säit un, sou wéi mir virdru mat jQuery a Bootstrap gemaach hunn (erënnert datt Dir net alles musst tippen - zitt just d'Datei vun d'Projeten Tab an d'Codefenster):

Loosst eis d'Dropdownlëscht an eiser Navigatiounsbar huelen, zum Beispill:

Schéin, richteg? Alles wat et brauch ass den Inhalt vun der existéierender ul-Klass mam Numm Dropdown-Menü um Enn vun index.php ze ersetzen mat:

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

Gleeft mir - Är Zäit investéiere fir ze léieren wéi Dir dës Tools benotzt wäert eng ganz belountend Erfahrung sinn.

Als IT-Persoun musst Dir déi vill Ressourcen kennen fir Hëllef déi den Internet zur Verfügung stellt. Well d'Webentwécklung net eng Ausnahm ass, hei sinn e puer Ressourcen déi mir sécher sinn datt Dir nëtzlech fannt wann Dir Är Uwendungen ofstëmmt.

Wann Dir mam Javascript Code beschäftegt (zum Beispill wann Dir mat jQuery schafft wéi mir am Part 2 gemaach hunn), wëllt Dir JSHint benotzen, en Online Javascript Qualitéitscode Checker deen d'Entwéckler hëlleft fir Feeler a potenziell Problemer z'entdecken. Wann dës Falen fonnt ginn, weist JSHint d'Linnnummer un, wou se lokaliséiert sinn a gëtt Iech Hiweiser fir se ze fixéieren:

Dat gesäit sécher super aus, awer och mat dësem super automatiséierte Tool, et ginn Zäiten wou Dir een aneren braucht fir Äre Code ze kucken an Iech ze soen wéi Dir et fixéiert oder soss verbessert, wat implizéiert et iergendwéi ze deelen.

JSFiddle (en online Javascript/CSS/HTML Code Tester) a Bootply (selwecht wéi JSFiddle awer spezialiséiert am Bootstrap Code) léisst Iech Code Snippets (och bekannt als Fiddles) späicheren an Iech e Link ubidden fir se ganz einfach iwwer den Internet ze deelen (entweder) per E-Mail mat Äre Frënn, mat Äre sozialen Netzwierkprofiler oder a Foren).

Resumé

An dësem Artikel hu mir Iech e puer Tipps zur Verfügung gestallt fir Är Webapplikatiounen ze stëmmen an e puer Ressourcen gedeelt, déi praktesch kommen wann Dir festhält oder wëllt en anert Paar Aen (an net nëmmen een, mee vill) fir ze kucken. Äre Code fir ze kucken wéi et ka verbessert ginn.

Chancen sinn datt Dir och aner Ressourcen kennt. Wann jo, fillt Iech gratis mat dem Rescht vun der Tecmint Gemeinschaft ze deelen andeems Dir de Kommentarformular hei drënner benotzt - an iwwregens, zéckt net fir eis ze soen wann Dir Froen hutt iwwer den Inhalt deen an dësem Artikel presentéiert gëtt.

Mir hoffen datt dës Serie Iech en Abléck vun de grousse Méiglechkeete vun der mobilfrëndlecher a reaktiounsfäeger Webentwécklung ginn huet.