Ladění dynamických webových aplikací HTML5 pomocí online nástrojů Open Source


Když začínám s posledním článkem v této sérii, je to moje naděje, že jste dokázali pochopit význam HTML 5 a mobilního/citlivého webového vývoje. Bez ohledu na distribuci stolních počítačů je Netbeans výkonným IDE a když je používán společně se základními dovednostmi příkazového řádku Linuxu a nástroji popsanými v Části 3, může vám pomoci vytvořit vynikající aplikace bez větších potíží.

Vezměte prosím na vědomí, že v této sérii jsme se zabývali pouze základy HTML 5 a vývojem webu a předpokládali jsme, že jste s HTML dobře obeznámeni, ale WWW je plná skvělých zdrojů - některé z nich jsou FOSS - rozšířit to, co jsme zde sdíleli.

V této poslední příručce budeme hovořit o některých z těchto nástrojů a ukázat vám, jak je použít k přidání na stávající stránku, na které jsme pracovali na zkrášlování našeho uživatelského rozhraní.

Soubor Část 2 této série („Přidání aplikace jQuery a Bootstrap k zápisu webové aplikace HTML5“) si vzpomenete, že soubor ZIP programu Bootstrap je dodáván s adresářem s názvem písma. Obsah jsme uložili do složky se stejným názvem v SiteRootu projektu:

Jak pravděpodobně z výše uvedeného obrázku poznáte, Bootstrap obsahuje sadu prvků nazvaných glyphicons , které nejsou ničím jiným než zabudovanými komponenty, které poskytují hezké ikony pro tlačítka a nabídky ve vašem zařízení. aplikací. Úplný seznam glyfiků obsažených v programu Bootstrap je k dispozici na adrese http://getbootstrap.com/components/.

Chcete-li ilustrovat použití glyfikonu , přidejte některé z nich do navigačního panelu na naší hlavní stránce. Upravte nabídky navigačního panelu následujícím způsobem. Všimněte si prosím mezeru mezi každou uzavřenou značkou rozpětí a textem nabídky:

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

(Mimochodem, značky span jsou zde používány, aby se zabránilo tomu, že se ikony dostanou do styku s jinými komponentami).

A tady je výsledek:

Glyphicons , i když jsou užitečné, jsou také omezené. Zde přejde scéna úžasné do scény. Font Awesome je kompletní sada nástrojů icon/font/css, která má potenciál pro bezproblémovou integraci s programem Bootstrap.

Nejenže můžete na své stránky přidat celou řadu dalších ikon, ale můžete také změnit jejich velikost, vrhat stíny, měnit barvu a mnoho dalších možností pomocí CSS. Vzhledem k tomu, že řešení CSS je mimo rozsah této série, budeme se zabývat pouze ikonami výchozí velikosti, ale zároveň vás vybídneme k tomu, abyste „ kopali trochu hlouběji a zjistili, jak daleko Tento nástroj vás může vzít.

Chcete-li stáhnout Font Awesome a zapracovat jej do svého projektu, proveďte následující příkazy (nebo si můžete přejít přímo na webovou stránku projektu a stáhnout soubor zip přes prohlížeč a dekomprimovat jej pomocí nástrojů GUI):

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

(Ano, název domény je vlastně FortAwesome , s R , takže to není překlep).

# 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

A přidejte soubor .css do seznamu referencí v horní části naší stránky, stejně jako to bylo v případě jQuery a Bootstrap dříve (nezapomeňte, že nemusíte psát vše - stačí přetáhnout soubor z karty Projekty do okna kódu:

V navigačním panelu si vezmeme rozbalovací seznam , například:

Dobře, že? Stačí jen nahradit obsah existující třídy ul class s názvem rozevírací nabídka v dolní části položky index.php :

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

Věřte mi - investovat svůj čas do učení, jak tyto nástroje používat, bude velmi přínosnou zkušeností.

Jako osoba IT musíte být dobře obeznámeni s mnoha zdroji pomoci, které internet zpřístupnil. Vzhledem k tomu, že vývoj webových aplikací není výjimkou, zde je několik zdrojů, o kterých jsme si jisti, že vám budou užitečné při ladění aplikací.

Při práci s kódem Javascript (například při práci s jQuery, jak jsme to dělali v části 2 ), budete chtít použít funkci JSHint , online kontrolu kvality kódu Javascript, která má za cíl pomoci vývojářům odhalit chyby a potenciální problémy. Když jsou tato úskalí nalezena, JSHint označuje číslo linky, kde se nacházejí, a poskytuje rady, jak je opravit:

To jistě vypadá skvěle, ale i s tímto velkým automatizovaným nástrojem budou chvíle, kdy budete potřebovat někoho jiného, ​​abyste se mohli podívat na váš kód a říci vám, jak jej opravit nebo jinak vylepšit, což znamená, že se s ním bude nějakým způsobem podílet.

JSFiddle (on-line Javascript/CSS/HTML kód testeru) a Bootply (stejně jako JSFiddle , ale specializované na kód Bootstrap) vám umožňují ukládat fragmenty kódu (také známé jako fiddles ) a poskytují vám odkaz, který lze snadno sdílet přes internet (buď prostřednictvím e-mailu se svými přáteli, pomocí profilů sociální sítě nebo ve fórech).

souhrn

V tomto článku jsme vám poskytli několik tipů, jak vyladit webové aplikace a sdílet některé zdroje, které se vám budou hodit, když se zaseknete nebo chcete jiný pár očí (a ne jen jeden, ale mnoho), abyste se mohli podívat na své kód, abyste zjistili, jak to lze zlepšit.

Je pravděpodobné, že znáte i jiné zdroje. Pokud ano, neváhejte se o ně podělit se zbytkem komunity Tecmint pomocí níže uvedeného formuláře pro komentáře - a mimochodem, neváhejte a dejte nám vědět, pokud máte nějaké dotazy k prezentovanému obsahu. v tomto článku.

Doufáme, že vám tato série poskytne pohled na obrovské možnosti mobilního a citlivého webového vývoje.