Indholdsfortegnelse
Udvikling i HTML5 i dag er en standard, da den fungerer i en browser eller på mobile enheder via hybridapplikationer. Hvis applikationen eller webstedet fungerer i Chrome, Firefox eller en anden browser og er tilpasset skærmopløsninger på mobile enheder, har vi derfor uden mange ændringer også en mobilapplikation til Android eller IOS.
Et af de vigtigste gratis værktøjer til programmering er Netbeans, da det giver dig mulighed for at udvikle traditionelle websteder eller native eller hybrid mobile applikationer.
[color = # 006400] Download plugin [/ color] [color = # 006400] HTML5 sjov pakke [/ color]
FORSTØRRE
Dernæst skal vi installere pluginet, for dette skal vi:
- Værktøjer
- Plugin
- Downloadet fane
- Vi klikker på knappen Tilføj plugin
- Vi leder efter den downloadede fil, der har udvidelsen nbm.
FORSTØRRE
Når de er installeret, kan vi bruge komponenterne fra paletten HTML -værktøjer.
Vi opretter et HTML5 -projekt for at se dets funktioner og komponenter.
Vi skal:
- Fil
- Nyt projekt
- Vi vælger HTML5 -applikation for at oprette et tomt eller tomt projekt
På den næste skærm vil den bede os om at tildele et navn til vores projekt og et bibliotek, hvor det skal gemmes, så klikker vi på knappen Næste. Her har vi flere muligheder for eksempel: Brug ikke skabelon (Ingen webstedsskabelon)
Når du vælger en skabelon (Vælg skabelon), kan du vælge fra en skabelon, som vi har i et bibliotek på computeren, eller angive placeringen af en .zip -fil for en skabelon i en url. Du kan indtaste URL -adressen til .zip -filen eller klikke på Gennemse for at angive en placering på dit lokale system. Når du opretter et projekt baseret på en webstedsskabelon, kopieres filerne, bibliotekerne og projektstrukturen til projektmappen, f.eks. Et gratis skabelonwebsted.
FORSTØRRE
Vi tager den første skabelon, hvis link til zip -filen er følgende:
http: //cdn.freehtml5… imcreatives.zip
Vi vælger indstillingen
Vælg skabelon og kopier linket i tekstboksen Skabelon. Derefter klikker vi på Næste.
FORSTØRRE
På den næste skærm kan vi tilføje biblioteker, hvis vi har brug for vores udvikling, og Netbeans vil vedhæfte dem til vores projekt.
FORSTØRRE
Vi kan se, at den genkendte flere Javascript -biblioteker, og vi tilføjede også Jquery på egen hånd.
Derefter klikker vi på Finish, og Netbeans sørger for at pakke skabelonen ud og bestille alle projektfilerne.
FORSTØRRE
I værktøjslinjen har vi en rullemenu til at teste applikationen på forskellige enheder såsom browsere, mobile enheder, SmartTV og emulatorer som Apache Cordoba til Android, til dette skal vi have Android SDK og AVD Manager installeret. AVD Manager har en grafisk brugergrænseflade, hvor du kan oprette og administrere Android Virtual Devices (AVDS), som kræves af Android -emulatoren.
FORSTØRRE
I dette tilfælde vælger vi Firefox, så klikker vi på den grønne pil for at køre projektet, og resultatet er, at skabelonen fungerer lokalt.
FORSTØRRE
En anden måde at oprette et projekt med skabeloner på er at kunne bruge skabeloner fra webstedet www.initializr.com. Initializr er en HTML5-skabelongenerator, der hjælper dig med at komme i gang med et nyt HTML5-baseret projekt. Det genererer en skabelon, der kan tilpasses med en ren og letforståelig kode, den indeholder også alle de nødvendige grundlæggende elementer og komponenter.
FORSTØRRE
Fra Netbeans behøver vi kun at vælge den skabelontype, vi vil bruge, og det genererer automatisk projektets kode og struktur.
For eksempel vælger vi en Boostrap -skabelon til et nyt projekt.
FORSTØRRE
Vi klikker på Næste, og igen vil det give os mulighed for at vælge og tilføje flere Jquery -biblioteker, hvis vi har brug for dem, og derefter klikker vi på Afslut.
Vi vil se, hvordan strukturen i HTML5 -projektet er blevet oprettet, og til højre ser vi paletten med komponenterne i det tidligere installerede plugin.
FORSTØRRE
Vi kører projektet som vi gjorde før eller også ved at trykke på F6 -tasten. Resultatet bliver en simpel skabelon til at starte vores projekt.
FORSTØRRE
Dernæst tester vi skabelonen
Responsive fra Initializr med de samme tidligere trin, og vi vil se resultatet, når det udføres i browseren.
FORSTØRRE
Hvis vi vil teste vores applikation i Google Chrome -browseren, skal vi installere et plugin, der forbinder Netbeans med Chome.
FORSTØRRE
Vi skal få adgang til vores Google -konto med vores Gmail for at godkende installationen af pluginet i Google Chrome, så kan vi køre og se applikationen uden problemer.
En af fordelene ved at bruge Google Chrome er, at ved at højreklikke på skærmen får vi adgang til Element Inspector, og vi vil have mange værktøjer til at gennemgå vores applikation, en af dem simulerer applikationen på forskellige mobile enheder og opløsninger.
FORSTØRRE
Adgang via dette ikon kan vi simulere vores applikation på mobiltelefoner og bærbare computere som Ipad, Iphone, LG, Samsumg, Notebook.
For eksempel simulerer vi vores applikation, der kører på en Iphone 6 med en 30 Mbps Wi-Fi-forbindelse
Lad os derefter se på komponenterne i HTML5 -paletten. Lad os oprette et tomt eller tomt HTML5 -projekt. Vi tilføjer Jquery 2.0.3 -biblioteket og opretter projektstrukturen. Komponentpaletten, hvis vi ikke har den på skærmen, er aktiveret fra Windows -menuen> Ide Tools Palette
I vores index.html -fil inde i kodesektionen
Vi trækker komponenten Dataliste og taber den, vi vil se, at der automatisk oprettes en kodeblok som eksempelLand:
Hvis vi kører vores applikation, vil vi se, hvordan rullemenuen fungerer, det er endda tilladt at filtrere følsom, mens vi skriver, det filtrerer automatisk listen, der indeholder rullemenuen
Lad os ændre koden genereret af Netbeans og udtrække de valgte data fra datalisten, hvor Jquery henviser til id'et for hvert element
Land: Se land
Vi kører programmet og ser, at det returnerer resultatet med navnet på det valgte land:
Vi kan også sende en DataList med en formular og fange de valgte data og gemme dem i en database
Den påkrævede komponent i paletten giver os mulighed for at tilføje et element som krævet i en formular, f.eks. Følgende kode med to obligatoriske påkrævede felter:
Navn: E -mail
Hvis vi udfører denne kode, kan vi se, at formularen ikke kan sendes, hvis begge felter ikke er udfyldt.
AfslutningVi har set i denne vejledning nogle værktøjer, der hjælper os med at udvikle og teste applikationer i HTML5 og Jquery hurtigere, selv uden at have programmeret næsten nogen kompleks kode. I fremtidige selvstudier vil vi fortsætte med at udvikle HTML5- og Jquery -applikationer, både traditionelle og mobile.Kan du lide og hjælpe denne vejledning?Du kan belønne forfatteren ved at trykke på denne knap for at give ham et positivt punkt
