Inhoudsopgave
Ontwikkelen in HTML5 is tegenwoordig een standaard omdat het werkt in een browser of op mobiele apparaten via hybride applicaties. Als de applicatie of website werkt in Chrome, Firefox of een andere browser en is aangepast aan de schermresoluties van mobiele apparaten, hebben we dus zonder veel wijzigingen ook een mobiele applicatie voor Android of IOS.
Een van de belangrijkste gratis tools voor programmeren is Netbeans, omdat je hiermee traditionele websites of native of hybride mobiele applicaties kunt ontwikkelen.
[kleur = # 006400] Download plug-in [/ kleur] [kleur = # 006400] HTML5 Fun Pack [/ kleur]
VERGROTEN
Vervolgens moeten we de plug-in installeren, hiervoor gaan we:
- Hulpmiddelen
- Inpluggen
- Tabblad gedownload
- We klikken op de knop Plug-in toevoegen
- We zoeken naar het gedownloade bestand met de extensie nbm.
VERGROTEN
Eenmaal geïnstalleerd kunnen we de componenten uit het HTML Tools-palet gebruiken.
We zullen een HTML5-project maken om de functies en componenten ervan te bekijken.
Wij gaan:
- Bestand
- Nieuw project
- We selecteren HTML5-toepassing om een leeg of leeg project te maken
Op het volgende scherm zal het ons vragen om een naam toe te wijzen aan ons project en een map waar het moet worden opgeslagen, dan klikken we op de knop Volgende. Hier hebben we verschillende opties, bijvoorbeeld: Geen sjabloon gebruiken (geen sitesjabloon)
Door een sjabloon te selecteren (Select Template), kunt u kiezen uit een sjabloon die we in een map op de computer hebben of de locatie van een .zip-bestand van een sjabloon in een url specificeren. U kunt de URL van het .zip-bestand typen of op Bladeren klikken om een locatie op uw lokale systeem op te geven. Wanneer u een project maakt op basis van een sitesjabloon, worden de bestanden, bibliotheken en projectstructuur gekopieerd naar de projectdirectory, bijvoorbeeld een gratis sjabloonwebsite.
VERGROTEN
We nemen de eerste sjabloon waarvan de link naar het zipbestand de volgende is:
http: //cdn.freehtml5… imcreatives.zip
We selecteren de optie
Selecteer sjabloon en kopieer de link in het tekstvak Sjabloon. Dan klikken we op Volgende.
VERGROTEN
Op het volgende scherm kunnen we bibliotheken toevoegen als we dat nodig hebben voor onze ontwikkeling en Netbeans zal ze aan ons project koppelen.
VERGROTEN
We kunnen zien dat het verschillende Javascript-bibliotheken herkende en we hebben ook zelf JQuery toegevoegd.
Vervolgens klikken we op Voltooien en Netbeans zorgt voor het uitpakken van de sjabloon en het bestellen van alle projectbestanden.
VERGROTEN
In de werkbalk hebben we een vervolgkeuzelijst om de applicatie te testen op verschillende apparaten zoals browsers, mobiele apparaten, SmartTV en emulators zoals Apache Cordoba voor Android, hiervoor moeten we de Android SDK en de AVD Manager geïnstalleerd hebben. De AVD Manager biedt een grafische gebruikersinterface waarin u Android Virtual Devices (AVDS) kunt maken en beheren, die vereist zijn voor de Android-emulator.
VERGROTEN
In dit geval selecteren we Firefox, dan klikken we op de groene pijl om het project uit te voeren en het resultaat is dat de sjabloon lokaal werkt.
VERGROTEN
Een andere manier om een project met sjablonen te maken, is door gebruik te maken van sjablonen van de website www.initializr.com. Initializr is een HTML5-sjabloongenerator om u te helpen aan de slag te gaan met een nieuw HTML5-gebaseerd project. Het genereert een aanpasbare sjabloon met een schone en gemakkelijk te begrijpen code, het bevat ook alle noodzakelijke basiselementen en componenten.
VERGROTEN
Van Netbeans hoeven we alleen het type sjabloon te selecteren dat we willen gebruiken en het zal automatisch de code en structuur van het project genereren.
We selecteren bijvoorbeeld een sjabloon van het type Boostrap voor een nieuw project.
VERGROTEN
We klikken op Volgende en opnieuw kunnen we meer JQuery-bibliotheken selecteren en toevoegen als we ze nodig hebben en dan klikken we op Voltooien.
We zullen zien hoe de structuur van het HTML5-project is gemaakt en aan de rechterkant zullen we het palet zien met de componenten van de eerder geïnstalleerde plug-in.
VERGROTEN
We voeren het project uit zoals we eerder deden of ook door op de F6-toets te drukken. Het resultaat is een eenvoudige sjabloon om ons project te starten.
VERGROTEN
Vervolgens zullen we de sjabloon testen
Responsief van Initializr met dezelfde vorige stappen en we zullen het resultaat zien wanneer het in de browser wordt uitgevoerd.
VERGROTEN
Als we onze applicatie in de Google Chrome-browser willen testen, moeten we een plug-in installeren die Netbeans met Chome verbindt.
VERGROTEN
We moeten toegang hebben tot ons Google-account met onze Gmail om de installatie van de plug-in in Google Chrome te autoriseren, dan kunnen we de applicatie zonder problemen uitvoeren en bekijken.
Een van de voordelen van het gebruik van Google Chrome is dat we door met de rechtermuisknop op het scherm te klikken, toegang hebben tot de Element Inspector en dat we veel hulpprogramma's hebben om onze applicatie te beoordelen, waaronder een simulatie van de applicatie op verschillende mobiele apparaten en resoluties.
VERGROTEN
Via dit pictogram kunnen we onze applicatie simuleren op mobiele telefoons en laptops zoals Ipad, Iphone, LG, Samsumg, Notebook.
We simuleren bijvoorbeeld onze applicatie die draait op een Iphone 6 met een 30 Mbps Wi-Fi-verbinding
Laten we nu eens kijken naar de componenten van het HTML5-palet. Laten we een leeg of leeg HTML5-project maken. We voegen de JQuery 2.0.3 bibliotheek toe en creëren de projectstructuur. Het componentenpalet als we het niet op het scherm hebben, wordt ingeschakeld via het Windows-menu> Ide Tools Palette
In ons index.html-bestand, in de codesectie
We slepen het onderdeel Gegevenslijst en laten het vallen, we zullen zien dat er automatisch een codeblok wordt gemaakt als voorbeeldLand:
Als we onze applicatie uitvoeren, zullen we zien hoe de vervolgkeuzelijst werkt, het is zelfs toegestaan om te filteren op gevoelig zijn terwijl we schrijven, het zal automatisch de lijst filteren die de vervolgkeuzelijst bevat
Laten we de door Netbeans gegenereerde code wijzigen en de geselecteerde gegevens uit de gegevenslijst extraheren, waarbij JQuery verwijst naar de id van elk element
Land: Zie land
We voeren de applicatie uit en zien dat deze het resultaat retourneert met de naam van het geselecteerde land:
We kunnen ook een DataList met een formulier verzenden en de geselecteerde gegevens vastleggen en opslaan in een database
Het vereiste onderdeel van het palet stelt ons in staat om een element binnen een formulier als Vereist toe te voegen, zoals de volgende code met twee verplichte verplichte velden:
Naam: E-mail
Als we deze code uitvoeren, kunnen we zien dat het formulier niet kan worden verzonden als beide velden niet zijn ingevuld.
conclusie:We hebben in deze tutorial een aantal tools gezien die ons zullen helpen om applicaties in HTML5 en JQuery sneller te ontwikkelen en te testen, zelfs zonder dat we bijna elke complexe code hebben geprogrammeerd. In toekomstige tutorials zullen we doorgaan met de ontwikkeling van HTML5- en JQuery-applicaties, zowel traditioneel als mobiel.Vond je deze Tutorial leuk en heb je eraan geholpen?Je kunt de auteur belonen door op deze knop te drukken om hem een positief punt te geven
