Turinys
Šiandien kurti HTML5 yra standartas, nes jis veikia naršyklėje arba mobiliuosiuose įrenginiuose per hibridines programas. Jei programa ar svetainė veikia „Chrome“, „Firefox“ ar kitoje naršyklėje ir yra pritaikyta mobiliųjų įrenginių ekrano skyrai, todėl be daugybės pakeitimų mes taip pat turime mobiliąją programą, skirtą „Android“ ar „IOS“.
Vienas iš svarbiausių nemokamų programavimo įrankių yra „Netbeans“, nes tai leidžia kurti tradicines svetaines ar vietines ar hibridines programas mobiliesiems.
[color = # 006400] Atsisiųsti papildinį [/ color] [color = # 006400] HTML5 pramogų paketas [/ color]
DIDELIS
Toliau turime įdiegti papildinį, tam ketiname:
- Įrankiai
- Prijungti
- Atsisiųstas skirtukas
- Spustelėkite mygtuką Pridėti papildinį
- Ieškome atsisiųsto failo, kurio plėtinys bus nbm.
DIDELIS
Įdiegę galime naudoti komponentus iš HTML įrankių paletės.
Mes sukursime HTML5 projektą, kad pamatytume jo funkcijas ir komponentus.
Mes ketiname:
- Failas
- Naujas projektas
- Norėdami sukurti tuščią arba tuščią projektą, pasirenkame HTML5 programą
Kitame ekrane jis paprašys mūsų projektui priskirti pavadinimą ir katalogą, kur jį išsaugoti, tada spustelėkite mygtuką Kitas. Čia mes turėsime keletą variantų, pavyzdžiui: Nenaudokite šablono (nėra svetainės šablono)
Pasirinkę šabloną (Pasirinkite šabloną), galite pasirinkti iš šablono, kurį turime kompiuterio kataloge, arba nurodyti šablono .zip failo vietą URL. Galite įvesti .zip failo URL arba spustelėti Naršyti, kad nurodytumėte vietą savo vietinėje sistemoje. Kai kuriate projektą pagal svetainės šabloną, failai, bibliotekos ir projekto struktūra nukopijuojami į projekto katalogą, pavyzdžiui, nemokamo šablono svetainę.
DIDELIS
Mes paimsime pirmąjį šabloną, kurio nuoroda į ZIP failą yra tokia:
http: //cdn.freehtml5… imcreatives.zip
Mes pasirenkame variantą
Pasirinkite Šablonas ir nukopijuokite nuorodą teksto laukelyje Šablonas. Tada mes spustelėkite „Kitas“.
DIDELIS
Tada kitame ekrane galime pridėti bibliotekų, jei to reikia mūsų plėtrai, o „Netbeans“ jas pridės prie mūsų projekto.
DIDELIS
Matome, kad ji atpažino kelias „Javascript“ bibliotekas ir taip pat pridėjome „Jquery“.
Tada spustelėkite „Baigti“, o „Netbeans“ pasirūpins, kad išpakuotų šabloną ir užsisakytų visus projekto failus.
DIDELIS
Įrankių juostoje turime išskleidžiamąjį parinkiklį, skirtą programai išbandyti skirtinguose įrenginiuose, pvz., Naršyklėse, mobiliuosiuose įrenginiuose, „SmartTV“ ir emuliatoriuose, pvz., „Apache Cordoba“, skirtoje „Android“, tam reikia įdiegti „Android“ SDK ir AVD tvarkyklę. „AVD Manager“ suteikia grafinę vartotojo sąsają, kurioje galite kurti ir valdyti „Android“ virtualius įrenginius (AVDS), kurių reikia „Android“ emuliatoriui.
DIDELIS
Šiuo atveju mes pasirenkame „Firefox“, tada spustelime žalią rodyklę, kad paleistume projektą, o rezultatas yra šablonas, veikiantis vietoje.
DIDELIS
Kitas būdas sukurti projektą naudojant šablonus yra galimybė naudoti šablonus iš svetainės www.initializr.com. „Initializr“ yra HTML5 šablonų generatorius, padedantis pradėti dirbti su nauju HTML5 projektu. Jis sukuria tinkinamą šabloną su švariu ir lengvai suprantamu kodu, taip pat apima visus būtinus pagrindinius elementus ir komponentus.
DIDELIS
Iš „Netbeans“ mums tereikia pasirinkti norimo naudoti šablono tipą ir jis automatiškai sugeneruos projekto kodą ir struktūrą.
Pavyzdžiui, naujam projektui pasirenkame „Boostrap“ tipo šabloną.
DIDELIS
Spustelime „Kitas“ ir dar kartą tai leis mums pasirinkti ir pridėti daugiau „Jquery“ bibliotekų, jei mums jų reikia, tada spustelėkite Baigti.
Pamatysime, kaip buvo sukurta HTML5 projekto struktūra, o dešinėje matysime paletę su anksčiau įdiegto papildinio komponentais.
DIDELIS
Mes vykdome projektą, kaip ir anksčiau, arba paspausdami F6 klavišą. Rezultatas bus paprastas šablonas mūsų projektui pradėti.
DIDELIS
Toliau mes išbandysime šabloną
Atsakymas iš „Initializr“ atlikdami tuos pačius ankstesnius veiksmus ir pamatysime rezultatą, kai jie bus atlikti naršyklėje.
DIDELIS
Jei norime išbandyti savo programą „Google Chrome“ naršyklėje, turime įdiegti papildinį, jungiantį „Netbeans“ su „Chome“.
DIDELIS
Turime pasiekti „Google“ paskyrą naudodami „Gmail“, kad galėtume leisti įdiegti papildinį „Google Chrome“, tada galėsime paleisti ir peržiūrėti programą be problemų.
Vienas iš „Google Chrome“ naudojimo privalumų yra tas, kad dešiniuoju pelės klavišu spustelėdami ekraną galėsime pasiekti elementų inspektorių ir turėsime daug paslaugų, kad galėtume peržiūrėti savo programą, viena iš jų imituojanti programą skirtinguose mobiliuosiuose įrenginiuose ir skiriamąja geba.
DIDELIS
Pasiekę šią piktogramą, galime imituoti savo programą mobiliuosiuose telefonuose ir nešiojamuosiuose kompiuteriuose, tokiuose kaip „Ipad“, „iPhone“, LG, „Samsumg“, „Notebook“.
Pavyzdžiui, mes imituojame savo programą, veikiančią „iPhone 6“ su 30 Mbps „Wi-Fi“ ryšiu
Toliau pažvelkime į HTML5 paletės komponentus. Sukurkime tuščią arba tuščią HTML5 projektą. Pridedame Jquery 2.0.3 biblioteką ir sukuriame projekto struktūrą. Komponentų paletė, jei jos neturime ekrane, įgalinama iš „Windows“ meniu> „Ide Tools Palette“
Mūsų index.html faile, kodo skiltyje
Vilkime duomenų sąrašo komponentą ir numesime, pamatysime, kad kodo blokas bus automatiškai sukurtas kaip pavyzdysŠalis:
Jei paleisime savo programą, pamatysime, kaip veikia išskleidžiamasis meniu, netgi leidžiama filtruoti jautrumą, kol rašome, jis automatiškai filtruoja sąrašą, kuriame yra išskleidžiamasis meniu
Pakeiskime „Netbeans“ sukurtą kodą ir ištraukime pasirinktus duomenis iš duomenų sąrašo, „Jquery“ nurodydamas kiekvieno elemento ID
Šalis: žr. Šalį
Paleidžiame programą ir matome, kad ji grąžina rezultatą su pasirinktos šalies pavadinimu:
Taip pat galime išsiųsti „DataList“ su forma, užfiksuoti pasirinktus duomenis ir išsaugoti juos duomenų bazėje
Privalomas paletės komponentas leidžia mums pridėti kaip būtiną formos elementą, pvz., Šį kodą su dviem privalomais privalomais laukais:
Vardas: el
Jei vykdysime šį kodą, pamatysime, kad formos nebus galima išsiųsti, jei abu laukai nebus užpildyti.
IšvadaŠioje pamokoje matėme keletą įrankių, kurie padės mums greičiau kurti ir išbandyti HTML5 ir „Jquery“ programas, net neužprogramavus beveik jokio sudėtingo kodo. Būsimuose vadovėliuose mes ir toliau žengsime į priekį kurdami tradicines ir mobilias HTML5 ir „Jquery“ programas.Ar jums patiko ir padėjo ši pamoka?Galite apdovanoti autorių paspausdami šį mygtuką, kad suteiktumėte jam teigiamą tašką
