Sadržaj
Razvoj u HTML5 danas je standard jer radi u pregledniku ili na mobilnim uređajima putem hibridnih aplikacija. Ako aplikacija ili web stranica rade u Chromeu, Firefoxu ili drugom pregledniku i prilagođeni su razlučivosti zaslona mobilnih uređaja, stoga bez mnogo promjena imamo i mobilnu aplikaciju za Android ili IOS.
Jedan od najvažnijih besplatnih alata za programiranje je Netbeans jer vam omogućuje razvoj tradicionalnih web stranica ili izvornih ili hibridnih mobilnih aplikacija.
[color = # 006400] Preuzimanje dodatka [/ color] [color = # 006400] HTML5 zabavni paket [/ color]
POVEĆAJTE
Zatim moramo instalirati dodatak, za to ćemo:
- Alati
- Uključiti
- Preuzeta kartica
- Kliknemo gumb Dodaj dodatak
- Tražimo preuzetu datoteku koja će imati nastavak nbm.
POVEĆAJTE
Nakon instalacije možemo koristiti komponente iz palete HTML alata.
Izradit ćemo HTML5 projekt kako bismo vidjeli njegove značajke i komponente.
Mi ćemo:
- Datoteka
- Novi projekt
- Odabiremo HTML5 aplikaciju kako bismo stvorili prazan ili prazan projekt
Na sljedećem zaslonu od nas će se tražiti da dodijelimo naziv našem projektu i direktorij u koji ga spremimo, a zatim kliknemo gumb Dalje. Ovdje ćemo imati nekoliko mogućnosti, na primjer: Ne koristi predložak (Bez predloška web stranice)
Odabirom predloška (Select Template), možete odabrati predložak koji imamo u direktoriju na računalu ili odrediti lokaciju .zip datoteke predloška u url -u. Možete upisati URL datoteke .zip ili kliknuti Pregledaj da biste odredili lokaciju na svom lokalnom sustavu. Kada kreirate projekt na temelju predloška web stranice, datoteke, knjižnice i struktura projekta kopiraju se u direktorij projekta, na primjer besplatno web mjesto s predloškom.
POVEĆAJTE
Uzećemo prvi predložak čija je veza do zip datoteke sljedeća:
http: //cdn.freehtml5… imcreatives.zip
Odabiremo opciju
Odaberite Predložak i kopirajte vezu u tekstualno polje Predložak. Zatim kliknemo Dalje.
POVEĆAJTE
Zatim na sljedećem ekranu možemo dodati knjižnice ako su nam potrebne za naš razvoj, a Netbeans će ih priložiti našem projektu.
POVEĆAJTE
Možemo vidjeti da je prepoznala nekoliko Javascript knjižnica, a sami smo dodali i Jquery.
Zatim kliknemo Finish i Netbeans će se pobrinuti za raspakiranje predloška i naručivanje svih datoteka projekta.
POVEĆAJTE
Na alatnoj traci imamo padajući izbornik za testiranje aplikacije na različitim uređajima kao što su preglednici, mobilni uređaji, SmartTV i emulatori poput Apache Cordobe za Android, za to nam je potrebno imati instaliran Android SDK i AVD Manager. AVD Manager pruža grafičko korisničko sučelje u kojem možete stvoriti i upravljati Android virtualnim uređajima (AVDS), koji su potrebni Android emulatoru.
POVEĆAJTE
U ovom slučaju odabiremo Firefox, zatim kliknemo na zelenu strelicu za pokretanje projekta i rezultat je da predložak radi lokalno.
POVEĆAJTE
Drugi način stvaranja projekta s predlošcima je mogućnost korištenja predložaka s web stranice www.initializr.com. Initializr je generator HTML5 predložaka koji će vam pomoći da započnete s novim projektom temeljenim na HTML5. Generira prilagodljiv predložak s čistim i lako razumljivim kodom, također uključuje sve potrebne osnovne elemente i komponente.
POVEĆAJTE
Na Netbeansu samo moramo odabrati vrstu predloška koji želimo koristiti i on će automatski generirati kôd i strukturu projekta.
Na primjer, za novi projekt odabiremo predložak tipa Boostrap.
POVEĆAJTE
Kliknemo Dalje i opet će nam omogućiti da odaberemo i dodamo još Jquery knjižnica ako nam trebaju, a zatim pritisnemo Završi.
Vidjet ćemo kako je stvorena struktura HTML5 projekta, a desno ćemo vidjeti paletu sa komponentama prethodno instaliranog dodatka.
POVEĆAJTE
Projekt pokrećemo kao i do sada ili također pritiskom na tipku F6. Rezultat će biti jednostavan predložak za početak našeg projekta.
POVEĆAJTE
Zatim ćemo testirati predložak
Odgovara Initializr s istim prethodnim koracima i vidjet ćemo rezultat kada se izvrši u pregledniku.
POVEĆAJTE
Ako želimo testirati našu aplikaciju u pregledniku Google Chrome, moramo instalirati dodatak koji povezuje Netbeans s Chomeom.
POVEĆAJTE
Moramo pristupiti svom Google računu s našim Gmail -om da bismo odobrili instalaciju dodatka u Google Chromeu, a zatim možemo bez problema pokrenuti i pregledati aplikaciju.
Jedna od prednosti korištenja Google Chromea je ta što ćemo desnim klikom na zaslon moći pristupiti Element Inspectoru i imat ćemo mnogo uslužnih programa za pregled naše aplikacije, od kojih jedan simulira aplikaciju na različitim mobilnim uređajima i rezolucijama.
POVEĆAJTE
Pristupom putem ove ikone možemo simulirati našu aplikaciju na mobilnim telefonima i prijenosnim računalima kao što su Ipad, Iphone, LG, Samsumg, Notebook.
Na primjer, simuliramo našu aplikaciju koja radi na Iphone 6 s 30 Mbps Wi-Fi vezom
Zatim pogledajmo komponente HTML5 palete. Izradimo prazan ili prazan HTML5 projekt. Dodajemo knjižnicu Jquery 2.0.3 i stvaramo strukturu projekta. Paleta komponenti ako je nemamo na zaslonu omogućena je iz izbornika Windows> Ide Tools Palette
U našoj datoteci index.html, unutar odjeljka koda
Povučemo komponentu Popis podataka i ispustimo je, vidjet ćemo da će se blok koda automatski stvoriti kao primjerZemlja:
Ako pokrenemo našu aplikaciju, vidjet ćemo kako padajući izbornik radi, čak je dopušteno filtrirati osjetljive dok pišemo, automatski će filtrirati popis koji sadrži padajući izbornik
Promijenimo kôd koji generiraju Netbeans i izdvojimo odabrane podatke s popisa podataka, pri čemu se Jquery odnosi na id svakog elementa
Država: Vidi Država
Pokrećemo aplikaciju i vidimo da vraća rezultat s imenom odabrane zemlje:
Također možemo poslati DataList s obrascem i snimiti odabrane podatke i spremiti ih u bazu podataka
Potrebna komponenta palete omogućuje nam da dodamo kao obavezno element unutar obrasca, poput sljedećeg koda s dva obavezna obavezna polja:
Ime: Email
Ako izvršimo ovaj kôd, možemo vidjeti da se obrazac neće moći poslati ako oba polja nisu popunjena.
ZaključakU ovom smo vodiču vidjeli neke alate koji će nam pomoći da brže razvijamo i testiramo aplikacije u HTML5 i Jquery, čak i bez programiranja gotovo složenog koda. U budućim vodičima nastavit ćemo napredovati u razvoju HTML5 i Jquery aplikacija, tradicionalnih i mobilnih.Je li vam se svidio i pomogao ovaj vodič?Autor možete nagraditi pritiskom na ovaj gumb kako biste mu dali pozitivan bod
