Съдържание
Разработването в HTML5 днес е стандарт, тъй като работи в браузър или на мобилни устройства чрез хибридни приложения. Ако приложението или уебсайтът работят в Chrome, Firefox или друг браузър и са адаптирани за разделителни способности на екрана на мобилни устройства, следователно без много промени имаме и мобилно приложение за Android или IOS.
Един от най -важните безплатни инструменти за програмиране е Netbeans, тъй като ви позволява да разработвате традиционни уебсайтове или местни или хибридни мобилни приложения.
[color = # 006400] Плъгин за изтегляне [/ color] [color = # 006400] HTML5 Fun Pack [/ color]
Увеличете
След това трябва да инсталираме приставката, за това ще:
- Инструменти
- Приставка
- Изтеглени раздел
- Кликваме върху бутона Добавяне на приставка
- Търсим изтегления файл, който ще има разширение nbm.
Увеличете
След като сме инсталирани, можем да използваме компонентите от палитрата HTML Tools.
Ще създадем HTML5 проект, за да видим неговите функции и компоненти.
Ние ще:
- Файл
- Нов проект
- Избираме приложение HTML5, за да създадем празен или празен проект
На следващия екран той ще ни помоли да присвоим име на нашия проект и директория, където да го запишем, след което щракваме върху бутона Напред. Тук ще имаме няколко опции например: Не използвайте шаблон (Без шаблон на сайт)
Избирането на шаблон (Избор на шаблон) ви позволява да изберете от шаблон, който имаме в директория на компютъра, или да посочите местоположението на .zip файл на шаблон в URL адрес. Можете да въведете URL адреса на .zip файла или да щракнете върху Преглед, за да посочите местоположение във вашата локална система. Когато създавате проект въз основа на шаблон на сайт, файловете, библиотеките и структурата на проекта се копират в директорията на проекта, например безплатен уебсайт с шаблони.
Увеличете
Ще вземем първия шаблон, чиято връзка към zip файла е следната:
http: //cdn.freehtml5… imcreatives.zip
Избираме опцията
Изберете Шаблон и копирайте връзката в текстовото поле Шаблон. След това кликваме върху Напред.
Увеличете
След това на следващия екран можем да добавим библиотеки, ако имаме нужда от нашето развитие и Netbeans ще ги прикачи към нашия проект.
Увеличете
Можем да видим, че той разпознава няколко библиотеки на Javascript и също така добавихме Jquery сами.
След това кликваме върху Finish и Netbeans ще се погрижи за разархивирането на шаблона и подреждането на всички файлове на проекта.
Увеличете
В лентата с инструменти имаме падащ селектор за тестване на приложението на различни устройства като браузъри, мобилни устройства, SmartTV и емулатори като Apache Cordoba за Android, за това трябва да имаме инсталиран Android SDK и AVD Manager. AVD Manager предоставя графичен потребителски интерфейс, в който можете да създавате и управлявате виртуални устройства с Android (AVDS), които се изискват от емулатора на Android.
Увеличете
В този случай избираме Firefox, след това кликваме върху зелената стрелка, за да стартираме проекта и резултатът е, че шаблонът работи локално.
Увеличете
Друг начин за създаване на проект с шаблони е да можете да използвате шаблони от уебсайта www.initializr.com. Initializr е генератор на HTML5 шаблони, който ще ви помогне да започнете с нов проект, базиран на HTML5. Той генерира персонализиран шаблон с чист и лесен за разбиране код, включва също всички необходими основни елементи и компоненти.
Увеличете
От Netbeans трябва само да изберем типа шаблон, който искаме да използваме, и той автоматично ще генерира кода и структурата на проекта.
Например избираме шаблон тип Boostrap за нов проект.
Увеличете
Щракваме върху Напред и отново това ще ни позволи да изберем и добавим още библиотеки Jquery, ако имаме нужда от тях, и след това щракваме върху Готово.
Ще видим как е създадена структурата на HTML5 проекта и вдясно ще видим палитрата с компонентите на предварително инсталирания плъгин.
Увеличете
Изпълняваме проекта както преди или също като натискаме клавиша F6. Резултатът ще бъде прост шаблон за стартиране на нашия проект.
Увеличете
След това ще тестваме шаблона
Отзивчив от Initializr със същите предишни стъпки и ще видим резултата, когато се изпълни в браузъра.
Увеличете
Ако искаме да тестваме приложението си в браузъра Google Chrome, трябва да инсталираме приставка, която свързва Netbeans с Chome.
Увеличете
Трябва да получим достъп до нашия акаунт в Google с нашия Gmail, за да разрешим инсталирането на приставката в Google Chrome, след което можем да стартираме и разглеждаме приложението без проблеми.
Едно от предимствата на използването на Google Chrome е, че като щракнете с десния бутон върху екрана, ще имаме достъп до Element Inspector и ще имаме много помощни програми за преглед на нашето приложение, едно от тях симулиращо приложението на различни мобилни устройства и резолюции.
Увеличете
Достъпвайки чрез тази икона, можем да симулираме нашето приложение на мобилни телефони и лаптопи като Ipad, Iphone, LG, Samsumg, Notebook.
Например симулираме нашето приложение, работещо на Iphone 6 с 30 Mbps Wi-Fi връзка
След това нека разгледаме компонентите на HTML5 палитрата. Нека създадем празен или празен HTML5 проект. Добавяме библиотеката Jquery 2.0.3 и създаваме структурата на проекта. Палитрата на компоненти, ако нямаме я на екрана, се активира от менюто на Windows> Ide Tools Palette
В нашия файл index.html, в секцията за код
Плъзгаме компонента Списък на данните и го пускаме, ще видим, че кодов блок ще бъде създаден автоматично като примерДържава:
Ако стартираме нашето приложение, ще видим как работи падащото меню, дори е позволено да филтрира чувствителността, докато пишем, то автоматично ще филтрира списъка, който съдържа падащото меню
Нека променим кода, генериран от Netbeans и извлечем избраните данни от списъка с данни, като Jquery се позовава на идентификатора на всеки елемент
Държава: Вижте Държава
Пускаме приложението и виждаме, че връща резултата с името на избраната държава:
Можем също да изпратим DataList с формуляр и да уловим избраните данни и да ги запишем в база данни
Изискваният компонент на палитрата ни позволява да добавим като задължителен елемент във формуляр, като следния код с две задължителни задължителни полета:
Име: Email
Ако изпълним този код, можем да видим, че формулярът няма да може да бъде изпратен, ако и двете полета не са попълнени.
ЗаключениеВидяхме в този урок някои инструменти, които ще ни помогнат да разработваме и тестваме приложения в HTML5 и Jquery по -бързо, дори без да сме програмирали почти никакъв сложен код. В бъдещите уроци ще продължим да напредваме в разработването на HTML5 и Jquery приложения, както традиционни, така и мобилни.Хареса ли ви и помогнахте на този урок?Можете да възнаградите автора, като натиснете този бутон, за да му дадете положителна точка
