Jak vytvořit základní projekt HTML5 v Ubuntu pomocí Netbeans

V této sérii o vývoji mobilního webu se 4 články vás provedeme nastavením Netbeans jako IDE (známé také jako Integrované vývojové prostředí ) v Ubuntu začít vyvíjet webové aplikace HTML5 vhodné pro mobilní zařízení.

Následuje série 4 článků o HTML5 Mobile Web Development :

Část 1 :Jak vytvořit základní projekt HTML5 v Ubuntu pomocí Netbeans Část 2 :Přidání komponent jQuery a Bootstrap, aby byla aplikace HTML5 responzivní a vhodná pro mobilyČást 3 :Dynamická aplikace HTML5 a nasazení na server LAMP pomocí FilezillaČást 4 :Vyladění dynamických webových aplikací HTML5 pomocí Open Source Utilities

Dobře propracované pracovní prostředí (jak později uvidíme), automatické doplňování pro podporované jazyky a jeho bezproblémová integrace s webovými prohlížeči jsou podle našeho názoru některé z Netbeans, které se nejvíce odlišují.

Připomeňme také, že HTML 5 specifikace přinesla vývojářům mnoho výhod – abychom jmenovali několik příkladů:čistší kód díky mnoha novým prvkům, vestavěné možnosti přehrávání videa a zvuku (které nahrazují potřebu Flash), vzájemná kompatibilita s hlavními prohlížeči a optimalizace pro mobilní zařízení zařízení.

Přestože budeme zpočátku naše aplikace testovat na našem místním vývojovém stroji, nakonec přesuneme naše webové stránky na server LAMP a přeměníme je v dynamický nástroj.

Po cestě využijeme jQuery (známá multiplatformní knihovna Javascript, která výrazně zjednodušuje skriptování na straně klienta) a Bootstrap (oblíbený rámec HTML, CSS a JavaScript pro vývoj responzivních webových stránek). Uvidíte v příchozích článcích, jak snadné je nastavit mobilní aplikaci pomocí těchto nástrojů HTML 5.

Poté, co si projdete tuto krátkou sérii, budete schopni:

1. použijte zde popsané nástroje k vytváření základních dynamických aplikací HTML5 a
2. pokračujte ve získání pokročilejších dovedností vývoje webu.

Upozorňujeme však, že i když budeme používat Ubuntu pro tuto sérii jsou pokyny a postupy dokonale platné i pro jiné desktopové distribuce (Linux Mint , Debian , CentOS , Fedora , vzpomenete si).

Za tímto účelem jsme se rozhodli nainstalovat potřebný software (Netbeans a Java JDK , jak za minutu uvidíte) pomocí obecného tarballu (.tar.gz ) jako způsob instalace.

Jak již bylo řečeno – začněme 1. částí .

Instalace Java JDK v Ubuntu

Tento tutoriál předpokládá, že již máte nainstalovanou desktopovou instalaci Ubuntu. Pokud ne, přečtěte si článek Instalace Ubuntu Desktop, který napsal náš kolega Matei Cezar, než budete pokračovat.

Od Netbeans verze, která je k dispozici ke stažení z oficiálních repozitářů Ubuntu, je trochu zastaralá, stáhneme si balíček z webu Oracle, abychom získali novější verzi.

Chcete-li to provést, máte dvě možnosti:

• Volba 1 :Stáhněte si balíček, který obsahuje Netbeans + JDK, nebo
• Volba 2 :Nainstalujte oba nástroje samostatně.

V tomto článku vybereme číslo 2 protože to znamená nejen stažení, které je o něco menší (protože Netbeans nainstalujeme pouze s podporou HTML5 a PHP), ale také nám umožní mít samostatný instalátor JDK, pokud bychom jej potřebovali pro jinou sadu, která nevyžaduje Netbeans ani zahrnovat vývoj webu (většinou související s jinými produkty Oracle).

Chcete-li stáhnout JDK , přejděte na web Oracle Technology Network a přejděte na Java → Java SE → Stahování sekce.

Když kliknete na obrázek zvýrazněný níže, budete požádáni o přijetí licenční smlouvy a poté si budete moci stáhnout potřebné JDK verze (což je v našem případě tarball pro 64bitové stroje). Až vás webový prohlížeč vyzve, zvolte uložení souboru místo jeho otevírání.

Po dokončení stahování přejděte na ~/Stahování a extrahujte tarball do /usr/local/bin :

$ sudo tar xf jdk-17_linux-x64_bin.tar.gz -C /usr/local/bin

Instalace Netbeans v Ubuntu

Chcete-li nainstalovat Netbeans s podporou HTML5 a PHP , přejděte na https://netbeans.org/downloads/ a klikněte na Stáhnout nebo použijte následující příkaz wget ke stažení, jak je uvedeno.

$ cd ~/Downloads
$ wget https://dlcdn.apache.org/netbeans/netbeans/12.5/Apache-NetBeans-12.5-bin-linux-x64.sh
$ chmod 755 Apache-NetBeans-12.5-bin-linux-x64.sh
$ sudo ./Apache-NetBeans-12.5-bin-linux-x64.sh --javahome /usr/local/bin/jdk-17.0.1

Od té chvíle postupujte podle pokynů na obrazovce a dokončete instalaci a ponechte výchozí hodnoty:

a počkejte na dokončení instalace.

Vytvoření základního projektu HTML5 v Ubuntu

Chcete-li otevřít Netbeans , vyberte jej z nabídky Pomlčka :

Chcete-li vytvořit nový projekt HTML5 pomocí základní šablony poskytované Netbeans, přejděte na Soubor → Nový projekt → HTML5 → Aplikace HTML5 . Zvolte popisný název projektu a nakonec klikněte na Dokončit (v tuto chvíli nezahrnujte šablonu externího webu ani knihovny javascriptu):

Poté přejdeme do uživatelského rozhraní Netbeans , kde můžeme přidávat složky a soubory do našeho kořenového adresáře webu podle potřeby. V našem případě to bude znamenat přidání složek pro písma, obrázky, soubory Javascript (skripty) a kaskádové styly (styly), které nám pomohou lépe organizovat náš obsah v nadcházejících článcích.

Chcete-li přidat složku nebo soubor, klikněte pravým tlačítkem na Kořenový adresář webu a poté zvolte Nový → Složka nebo HTML soubor.

Nyní vám představíme nové HTML5 prvky a upravte tělo stránky:

1. a
2. představuje hlavní obsah dokumentu, kde je zobrazeno ústřední téma nebo funkce.

3. se používá pro samostatný materiál, jako jsou obrázky nebo kód, abychom uvedli několik příkladů.

.
Nyní zkopírujte následující fragment kódu do souboru index.html soubor v Netbeans.

TIP :Z tohoto okna pouze nekopírujte a nevkládejte do svého vývojového prostředí, ale věnujte čas psaní každé značky, abyste si vizualizovali funkce automatického dokončování Netbeans, které se vám budou hodit později.

!DOCTYPE html>
<html>
	<head>
    	<title>TODO supply a title</title>
    	<meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	</head>
	<body>
    	<header background-color: #6699CC">THIS IS A HEADER</header>
    	<main>
        	<article>
            	<p>This is some sample text.</p>
            	<p>Another line of sample text for this HTML 5 article</p>
                	<aside>
                    	<figure>
                        	<img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" alt="HTML 5 logo" />
                        	<figcaption>Figure 1: The HTML 5 logo</figcaption>
                    	</figure>
                        	<h2>Web development basics series at Tecmint.com</h2>
                        	<h3><a href="http://dev.w3.org/html5/html-author/">This is HTML 5!</a></h3>
                        	<p>Some text here</p>
                	</aside>
        	</article>
    	</main>
    	<footer background-color: #CC6699">THIS IS A FOOTER</footer>
	</body>
</html>

Stránku můžete zobrazit výběrem webového prohlížeče (nejlépe Firefox , jako na obrázku níže) a kliknutím na tlačítko Přehrát ikona:

Nyní se můžete podívat na dosavadní postup vašeho vývoje:

Shrnutí

V tomto článku jsme zhodnotili některé výhody psaní webových aplikací pomocí HTML 5 a nastavit vývojové prostředí pomocí Netbeans v Ubuntu .

Dozvěděli jsme se, že tato specifikace jazyka zavedla nové prvky a poskytla nám tak možnost psát čistší kód a nahradit komponenty náročné na zdroje, jako jsou filmy ve formátu Flash, vestavěnými ovládacími prvky.

V následujících článcích představíme jQuery a Bootstrap abyste mohli nejen používat tyto ovládací prvky a sledovat, jak se vaše stránky načítají rychleji, ale také je přizpůsobit pro mobily.

Mezitím můžete v Netbeans experimentovat s dalšími ovládacími prvky a dejte nám vědět, pokud máte nějaké dotazy nebo komentáře, pomocí formuláře níže.