Преглед садржаја
Развој у ХТМЛ5 данас је стандард јер ради у прегледачу или на мобилним уређајима путем хибридних апликација. Ако апликација или веб локација раде у Цхроме -у, Фирефок -у или другом прегледачу и прилагођени су резолуцијама екрана мобилних уређаја, стога без много промена имамо и мобилну апликацију за Андроид или ИОС.
Један од најважнијих бесплатних алата за програмирање је Нетбеанс, јер вам омогућава развој традиционалних веб страница или изворних или хибридних мобилних апликација.
[цолор = # 006400] Преузмите додатак [/ цолор] [цолор = # 006400] ХТМЛ5 забавни пакет [/ цолор]
ЕНЛАРГЕ
Затим морамо инсталирати додатак, за ово ћемо:
- Алати
- Повезати
- Преузета картица
- Кликнемо на дугме Додај додатак
- Тражимо преузету датотеку која ће имати наставак нбм.
ЕНЛАРГЕ
Једном инсталиране можемо користити компоненте из палете ХТМЛ Тоолс.
Направићемо ХТМЛ5 пројекат да бисмо видели његове карактеристике и компоненте.
Ми ћемо:
- Датотека
- Нови пројекат
- Одабиремо ХТМЛ5 апликацију да бисмо креирали празан или празан пројекат
На следећем екрану ће од нас тражити да доделимо име нашем пројекту и директоријум где да га сачувамо, а затим кликнемо на дугме Даље. Овде ћемо имати неколико опција, на пример: Не користи предложак (Без предлошка сајта)
Избор предлошка (Селецт Темплате), омогућава вам да изаберете из предлошка који имамо у директоријуму на рачунару или да наведете локацију .зип датотеке предлошка у урл -у. Можете откуцати УРЛ датотеке .зип или кликнути на дугме Прегледај да бисте навели локацију на свом локалном систему. Када креирате пројекат на основу предлошка локације, датотеке, библиотеке и структура пројекта се копирају у директоријум пројекта, на пример бесплатну веб локацију са шаблонима.
ЕНЛАРГЕ
Узећемо први шаблон чија веза до зип датотеке је следећа:
хттп: //цдн.фреехтмл5… имцреативес.зип
Бирамо опцију
Изаберите Шаблон и копирајте везу у текстуално поље Шаблон. Затим кликнемо на Даље.
ЕНЛАРГЕ
Затим на следећем екрану можемо додати библиотеке ако су нам потребне за наш развој, а Нетбеанс ће их приложити нашем пројекту.
ЕНЛАРГЕ
Видимо да је препознао неколико Јавасцрипт библиотека, а сами смо додали и Јкуери.
Затим кликнемо на Заврши и Нетбеанс ће се побринути за распакирање предлошка и наручивање свих датотека пројекта.
ЕНЛАРГЕ
На траци са алаткама имамо падајући бирач за тестирање апликације на различитим уређајима, као што су прегледачи, мобилни уређаји, СмартТВ и емулатори попут Апацхе Цордобе за Андроид, за то нам је потребно да имате инсталиран Андроид СДК и АВД Манагер. АВД Манагер пружа графичко корисничко сучеље у којем можете креирати и управљати Андроид виртуалним уређајима (АВДС), који су потребни Андроид емулатору.
ЕНЛАРГЕ
У овом случају одабиремо Фирефок, затим кликнемо на зелену стрелицу за покретање пројекта и резултат је да предложак ради локално.
ЕНЛАРГЕ
Други начин за креирање пројекта са шаблонима је могућност коришћења предложака са веб локације ввв.инитиализр.цом. Инитиализр је генератор ХТМЛ5 шаблона који ће вам помоћи да започнете са новим пројектом заснованим на ХТМЛ5. Он генерише прилагодљив предложак са чистим и лако разумљивим кодом, такође укључује све потребне основне елементе и компоненте.
ЕНЛАРГЕ
Из Нетбеанса морамо само одабрати врсту предлошка који желимо користити и он ће аутоматски генерирати код и структуру пројекта.
На пример, за нови пројекат бирамо предложак типа Боострап.
ЕНЛАРГЕ
Кликнемо Даље и поново ће нам омогућити да одаберемо и додамо још Јкуери библиотека ако нам затребају, а затим притиснемо Заврши.
Видећемо како је створена структура ХТМЛ5 пројекта, а десно ћемо видети палету са компонентама претходно инсталираног додатка.
ЕНЛАРГЕ
Пројекат покрећемо као и раније или такође притиском на тастер Ф6. Резултат ће бити једноставан предложак за почетак нашег пројекта.
ЕНЛАРГЕ
Затим ћемо тестирати шаблон
Одговара Инитиализр са истим претходним корацима и видећемо резултат када се изврши у прегледачу.
ЕНЛАРГЕ
Ако желимо да тестирамо нашу апликацију у прегледачу Гоогле Цхроме, морамо инсталирати додатак који повезује Нетбеанс са Цхомеом.
ЕНЛАРГЕ
Морамо приступити свом Гоогле налогу са нашим Гмаил -ом да бисмо одобрили инсталацију додатка у Гоогле Цхроме -у, а затим можемо да покренемо и прегледамо апликацију без проблема.
Једна од предности коришћења Гоогле Цхроме -а је та што ћемо десним кликом на екран моћи да приступимо Елемент Инспецтору и имаћемо много услужних програма за преглед наше апликације, од којих је једна симулирала апликацију на различитим мобилним уређајима и резолуцијама.
ЕНЛАРГЕ
Приступом путем ове иконе можемо симулирати нашу апликацију на мобилним телефонима и преносним рачунарима као што су Ипад, Ипхоне, ЛГ, Самсумг, Нотебоок.
На пример, симулирамо нашу апликацију која ради на Ипхоне 6 са 30 Мбпс Ви-Фи везом
Затим, погледајмо компоненте ХТМЛ5 палете. Направимо празан или празан ХТМЛ5 пројекат. Додајемо библиотеку Јкуери 2.0.3 и креирамо структуру пројекта. Палета компоненти ако је немамо на екрану омогућена је из Виндовс менија> Иде Тоолс Палетте
У нашој датотеци индек.хтмл, унутар одељка кода
Превучемо компоненту Листа података и испустимо је, видећемо да ће се кодни блок аутоматски створити као примерЗемља:
Ако покренемо нашу апликацију, видећемо како падајући мени функционише, чак је дозвољено филтрирање осетљивих док пишемо, аутоматски ће филтрирати листу која садржи падајући мени
Променимо код који генерише Нетбеанс и издвојимо одабране податке са листе података, при чему се Јкуери позива на ид сваког елемента
Држава: Види Држава
Покрећемо апликацију и видимо да враћа резултат са именом изабране земље:
Такође можемо послати ДатаЛист са обрасцем и снимити одабране податке и сачувати их у бази података
Потребна компонента палете омогућава нам да додамо као обавезан елемент у образац, попут следећег кода са два обавезна обавезна поља:
Име: Емаил
Ако извршимо овај код, можемо видети да се образац неће моћи послати ако оба поља нису попуњена.
ЗакључакУ овом водичу смо видели неке алате који ће нам помоћи да брже развијамо и тестирамо апликације у ХТМЛ5 и Јкуери, чак и без програмирања готово било ког сложеног кода. У будућим водичима наставићемо да напредујемо у развоју ХТМЛ5 и Јкуери апликација, традиционалних и мобилних.Да ли вам се допао и помогао овај водич?Можете наградити аутора притиском на ово дугме да бисте му дали позитиван поен
