Spisie treści
Programowanie w HTML5 jest dziś standardem, ponieważ działa w przeglądarce lub na urządzeniach mobilnych za pośrednictwem aplikacji hybrydowych. Jeśli aplikacja lub strona internetowa działa w Chrome, Firefox lub innej przeglądarce i jest dostosowana do rozdzielczości ekranów urządzeń mobilnych, to bez wielu zmian mamy również aplikację mobilną na Androida lub IOS.
Jednym z najważniejszych darmowych narzędzi do programowania jest Netbeans, ponieważ pozwala na tworzenie tradycyjnych stron internetowych lub natywnych lub hybrydowych aplikacji mobilnych.
[kolor = # 006400] Pobierz wtyczkę [/ kolor] [kolor = # 006400] HTML5 Fun Pack [/ kolor]
POWIĘKSZAĆ
Następnie musimy zainstalować wtyczkę, w tym celu zamierzamy:
- Narzędzia
- Podłącz
- Pobrana karta
- Klikamy przycisk Dodaj wtyczkę
- Szukamy pobranego pliku, który będzie miał rozszerzenie nbm.
POWIĘKSZAĆ
Po zainstalowaniu możemy korzystać z komponentów z palety Narzędzia HTML.
Stworzymy projekt HTML5, aby zobaczyć jego funkcje i komponenty.
Idziemy do:
- Plik
- Nowy projekt
- Wybieramy Aplikację HTML5, aby stworzyć pusty lub pusty projekt
Na następnym ekranie poprosi nas o przypisanie nazwy do naszego projektu i katalogu, w którym go zapisać, a następnie klikamy przycisk Dalej. Tutaj mamy kilka opcji, na przykład: Nie używaj szablonu (Brak szablonu witryny)
Wybranie szablonu (Select Template), pozwala wybrać z szablonu, który mamy w katalogu na komputerze lub określić lokalizację pliku .zip szablonu w adresie URL. Możesz wpisać adres URL pliku .zip lub kliknąć Przeglądaj, aby określić lokalizację w systemie lokalnym. Podczas tworzenia projektu na podstawie szablonu witryny pliki, biblioteki i struktura projektu są kopiowane do katalogu projektu, na przykład do bezpłatnej witryny szablonu.
POWIĘKSZAĆ
Weźmiemy pierwszy szablon, którego link do pliku zip jest następujący:
http://cdn.freehtml5… imcreatives.zip
Wybieramy opcję
Wybierz szablon i skopiuj łącze w polu tekstowym Szablon. Następnie klikamy Dalej.
POWIĘKSZAĆ
Następnie na następnym ekranie możemy dodać biblioteki, jeśli potrzebujemy do naszego rozwoju, a Netbeans dołączy je do naszego projektu.
POWIĘKSZAĆ
Widzimy, że rozpoznał kilka bibliotek Javascript, a także samodzielnie dodaliśmy Jquery.
Następnie klikamy Finish, a Netbeans zajmie się rozpakowaniem szablonu i zamówieniem wszystkich plików projektu.
POWIĘKSZAĆ
Na pasku narzędzi mamy rozwijany selektor do testowania aplikacji na różnych urządzeniach, takich jak przeglądarki, urządzenia mobilne, SmartTV i emulatory, takie jak Apache Cordoba na Androida, do tego musimy mieć zainstalowany Android SDK i AVD Manager. Menedżer AVD udostępnia graficzny interfejs użytkownika, w którym można tworzyć i zarządzać urządzeniami wirtualnymi systemu Android (AVDS), które są wymagane przez emulator systemu Android.
POWIĘKSZAĆ
W tym przypadku wybieramy Firefox, następnie klikamy zieloną strzałkę, aby uruchomić projekt, a wynikiem jest szablon działający lokalnie.
POWIĘKSZAĆ
Innym sposobem tworzenia projektu z szablonami jest możliwość korzystania z szablonów ze strony www.initializr.com. Initializr to generator szablonów HTML5, który pomoże Ci rozpocząć pracę z nowym projektem opartym na HTML5. Generuje konfigurowalny szablon z przejrzystym i łatwym do zrozumienia kodem, zawiera również wszystkie niezbędne podstawowe elementy i komponenty.
POWIĘKSZAĆ
Z Netbeans wystarczy wybrać typ szablonu, którego chcemy użyć, a automatycznie wygeneruje on kod i strukturę projektu.
Na przykład do nowego projektu wybieramy szablon typu Boostrap.
POWIĘKSZAĆ
Klikamy Dalej i ponownie pozwoli nam to wybrać i dodać więcej bibliotek Jquery, jeśli ich potrzebujemy, a następnie klikamy Zakończ.
Zobaczymy jak powstała struktura projektu HTML5 a po prawej stronie zobaczymy paletę z komponentami wcześniej zainstalowanej wtyczki.
POWIĘKSZAĆ
Projekt uruchamiamy tak jak poprzednio lub też naciskając klawisz F6. Rezultatem będzie prosty szablon do rozpoczęcia naszego projektu.
POWIĘKSZAĆ
Następnie przetestujemy szablon
Odpowiada z Initializr z tymi samymi poprzednimi krokami i zobaczymy wynik po wykonaniu w przeglądarce.
POWIĘKSZAĆ
Jeśli chcemy przetestować naszą aplikację w przeglądarce Google Chrome, musimy zainstalować wtyczkę łączącą Netbeans z Chome.
POWIĘKSZAĆ
Musimy uzyskać dostęp do naszego konta Google z naszym Gmailem, aby autoryzować instalację wtyczki w Google Chrome, wtedy możemy bez problemu uruchomić i wyświetlić aplikację.
Jedną z zalet korzystania z Google Chrome jest to, że po kliknięciu prawym przyciskiem myszy na ekranie będziemy mogli uzyskać dostęp do Inspektora elementów i będziemy mieli wiele narzędzi do przeglądania naszej aplikacji, z których jedno symuluje aplikację na różnych urządzeniach mobilnych i rozdzielczościach.
POWIĘKSZAĆ
Dostęp poprzez tę ikonę możemy symulować naszą aplikację na telefonach komórkowych i laptopach takich jak Ipad, Iphone, LG, Samsumg, Notebook.
Na przykład symulujemy naszą aplikację działającą na Iphone 6 z połączeniem Wi-Fi 30 Mb/s
Następnie spójrzmy na składniki palety HTML5. Utwórzmy pusty lub pusty projekt HTML5. Dodajemy bibliotekę Jquery 2.0.3 i tworzymy strukturę projektu. Paletę komponentów, jeśli nie mamy jej na ekranie, włączamy z menu Windows> Paleta narzędzi Ide
W naszym pliku index.html, w sekcji kodu
Przeciągamy komponent Data List i upuszczamy go, zobaczymy, że blok kodu zostanie utworzony automatycznie jako przykładKraj:
Jeśli uruchomimy naszą aplikację, zobaczymy jak działa rozwijane menu, można nawet filtrować bycie wrażliwym podczas pisania, automatycznie przefiltruje listę zawierającą rozwijane menu
Zmieńmy kod wygenerowany przez Netbeans i wyodrębnijmy wybrane dane z Data List, z Jquery odwołującym się do id każdego elementu
Kraj: Zobacz kraj
Uruchamiamy aplikację i widzimy, że zwraca wynik z nazwą wybranego kraju:
Możemy również wysłać DataList z formularzem i przechwycić wybrane dane i zapisać je w bazie danych
Wymagany składnik palety pozwala nam dodać jako Wymagany element w formularzu, taki jak poniższy kod z dwoma obowiązkowymi polami wymaganymi:
Nazwa: E-mail
Jeśli wykonamy ten kod, zobaczymy, że formularz nie będzie mógł zostać wysłany, jeśli oba pola nie zostaną wypełnione.
WniosekW tym samouczku widzieliśmy kilka narzędzi, które pomogą nam szybciej opracowywać i testować aplikacje w HTML5 i Jquery, nawet bez programowania prawie żadnego złożonego kodu. W przyszłych samouczkach będziemy kontynuować rozwój aplikacji HTML5 i Jquery, zarówno tradycyjnych, jak i mobilnych.Podobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt
