Obsah
Vývoj v HTML5 je dnes standardem, protože funguje v prohlížeči nebo na mobilních zařízeních prostřednictvím hybridních aplikací. Pokud aplikace nebo web funguje v prohlížeči Chrome, Firefox nebo jiném prohlížeči a je přizpůsoben rozlišení obrazovky mobilních zařízení, bez mnoha změn tedy máme i mobilní aplikaci pro Android nebo IOS.
Jedním z nejdůležitějších bezplatných nástrojů pro programování je Netbeans, protože vám umožňuje vyvíjet tradiční webové stránky nebo nativní nebo hybridní mobilní aplikace.
[color = # 006400] Stáhnout plugin [/ color] [color = # 006400] Zábavný balíček HTML5 [/ color]
ZVĚTŠIT
Dále musíme nainstalovat plugin, za tímto účelem budeme:
- Nástroje
- Zapojit
- Stažená karta
- Klikneme na tlačítko Přidat plugin
- Hledáme stažený soubor, který bude mít příponu nbm.
ZVĚTŠIT
Po instalaci můžeme použít komponenty z palety nástrojů HTML.
Vytvoříme projekt HTML5, abychom viděli jeho funkce a komponenty.
Budeme:
- Soubor
- Nový projekt
- Vybereme aplikaci HTML5, abychom vytvořili prázdný nebo prázdný projekt
Na další obrazovce nás požádá, abychom našemu projektu přiřadili název a adresář, kam jej uložíme, poté klikneme na tlačítko Další. Zde budeme mít například několik možností: Nepoužívat šablonu (bez šablony webu)
Výběr šablony (Vybrat šablonu) vám umožňuje vybrat ze šablony, kterou máme v adresáři v počítači, nebo určit umístění souboru .zip šablony v adrese URL. Můžete zadat adresu URL souboru .zip nebo kliknout na Procházet a určit umístění ve vašem místním systému. Když vytvoříte projekt na základě šablony webu, soubory, knihovny a struktura projektu se zkopírují do adresáře projektu, například na bezplatnou webovou stránku šablony.
ZVĚTŠIT
Vezmeme první šablonu, jejíž odkaz na soubor zip je následující:
http: //cdn.freehtml5… imcreatives.zip
Vybereme možnost
Vyberte Šablona a zkopírujte odkaz do textového pole Šablona. Poté klikneme na Další.
ZVĚTŠIT
Pak na další obrazovce můžeme přidat knihovny, pokud to potřebujeme pro svůj vývoj, a Netbeans je připojí k našemu projektu.
ZVĚTŠIT
Vidíme, že rozpoznává několik knihoven Javascriptu a také jsme přidali Jquery sami.
Poté klikneme na Dokončit a Netbeans se postará o rozbalení šablony a objednání všech souborů projektu.
ZVĚTŠIT
Na panelu nástrojů máme rozevírací volič pro testování aplikace na různých zařízeních, jako jsou prohlížeče, mobilní zařízení, SmartTV a emulátory, jako je Apache Cordoba pro Android, k tomu potřebujeme mít nainstalovanou sadu Android SDK a AVD Manager. AVD Manager poskytuje grafické uživatelské rozhraní, ve kterém můžete vytvářet a spravovat virtuální zařízení Android (AVDS), která jsou vyžadována emulátorem Androidu.
ZVĚTŠIT
V tomto případě vybereme Firefox, poté kliknutím na zelenou šipku spustíme projekt a výsledkem je šablona fungující lokálně.
ZVĚTŠIT
Dalším způsobem, jak vytvořit projekt pomocí šablon, je umět použít šablony z webu www.initializr.com. Initializr je generátor šablon HTML5, který vám pomůže začít s novým projektem založeným na HTML5. Generuje přizpůsobitelnou šablonu s čistým a snadno srozumitelným kódem, obsahuje také všechny potřebné základní prvky a komponenty.
ZVĚTŠIT
Z Netbeans stačí vybrat typ šablony, kterou chceme použít, a ta automaticky vygeneruje kód a strukturu projektu.
Například pro nový projekt vybereme šablonu typu Boostrap.
ZVĚTŠIT
Klikneme na Další a znovu nám to umožní vybrat a přidat další knihovny Jquery, pokud je potřebujeme, a poté kliknout na Dokončit.
Uvidíme, jak byla vytvořena struktura projektu HTML5 a napravo uvidíme paletu s komponentami dříve nainstalovaného pluginu.
ZVĚTŠIT
Projekt spustíme jako dříve nebo také stisknutím klávesy F6. Výsledkem bude jednoduchá šablona pro zahájení našeho projektu.
ZVĚTŠIT
Dále šablonu otestujeme
Reaguje od Initializr se stejnými předchozími kroky a výsledek uvidíme při spuštění v prohlížeči.
ZVĚTŠIT
Pokud chceme otestovat naši aplikaci v prohlížeči Google Chrome, musíme si nainstalovat plugin, který propojí Netbeans s Chome.
ZVĚTŠIT
Abychom mohli autorizovat instalaci pluginu v prohlížeči Google Chrome, musíme přistupovat k našemu účtu Google pomocí našeho Gmailu. Poté můžeme aplikaci spustit a zobrazit bez problémů.
Jednou z výhod používání prohlížeče Google Chrome je, že kliknutím pravým tlačítkem na obrazovku budeme mít přístup k Inspektoru prvků a budeme mít mnoho nástrojů pro kontrolu naší aplikace, z nichž jedna simuluje aplikaci na různých mobilních zařízeních a rozlišeních.
ZVĚTŠIT
Pomocí této ikony můžeme simulovat naši aplikaci na mobilních telefonech a přenosných počítačích, jako jsou Ipad, Iphone, LG, Samsumg, Notebook.
Například simulujeme běh naší aplikace na iPhonu 6 s 30Mbps Wi-Fi připojením
Dále se podívejme na součásti palety HTML5. Vytvoříme prázdný nebo prázdný projekt HTML5. Přidáme knihovnu Jquery 2.0.3 a vytvoříme strukturu projektu. Paleta komponent, pokud ji nemáme na obrazovce, je povolena z nabídky Windows> Paleta Ide Tools
V našem souboru index.html v sekci kódu
Přetáhneme komponentu Seznam dat a pustíme ji, uvidíme, že jako příklad bude automaticky vytvořen blok kóduZemě:
Pokud spustíme naši aplikaci, uvidíme, jak funguje rozevírací seznam, je dokonce povoleno filtrovat citlivost při psaní, automaticky vyfiltruje seznam obsahující rozevírací seznam
Pojďme změnit kód vygenerovaný Netbeans a extrahovat vybraná data ze Seznamu dat, přičemž Jquery odkazuje na id každého prvku
Země: Viz Země
Spustíme aplikaci a uvidíme, že vrátí výsledek s názvem vybrané země:
Můžeme také odeslat DataList s formulářem a zachytit vybraná data a uložit je do databáze
Požadovaná součást palety nám umožňuje přidat jako požadovaný prvek do formuláře, například následující kód se dvěma povinnými povinnými poli:
Jméno: E -mail
Pokud spustíme tento kód, uvidíme, že formulář nebude možné odeslat, pokud nebudou vyplněna obě pole.
ConclutionV tomto tutoriálu jsme viděli některé nástroje, které nám pomohou rychleji vyvíjet a testovat aplikace v HTML5 a Jquery, a to i bez programování téměř jakéhokoli složitého kódu. V budoucích výukových programech budeme i nadále pokročit ve vývoji aplikací HTML5 a Jquery, tradičních i mobilních.Líbil se vám tento návod a pomohl mu?Autora můžete odměnit stisknutím tohoto tlačítka, čímž mu dáte kladný bod
