Innholdsfortegnelse
Utvikling i HTML5 i dag er en standard siden den fungerer i en nettleser eller på mobile enheter gjennom hybridapplikasjoner. Hvis programmet eller nettstedet fungerer i Chrome, Firefox eller en annen nettleser og er tilpasset skjermoppløsninger for mobile enheter, har vi derfor uten mange endringer også en mobilapplikasjon for Android eller IOS.
Et av de viktigste gratis verktøyene for programmering er Netbeans, siden det lar deg utvikle tradisjonelle nettsteder eller native eller hybrid mobile applikasjoner.
[color = # 006400] Last ned plugin [/ color] [color = # 006400] HTML5 Fun Pack [/ color]
FORSTØRRE
Deretter må vi installere pluginen, for dette skal vi:
- Verktøy
- Plugg inn
- Nedlastet fane
- Vi klikker på knappen Legg til plugin
- Vi ser etter den nedlastede filen som har utvidelsen nbm.
FORSTØRRE
Når de er installert, kan vi bruke komponentene fra paletten HTML -verktøy.
Vi vil lage et HTML5 -prosjekt for å se funksjonene og komponentene.
Vi kommer til å:
- Fil
- Nytt prosjekt
- Vi velger HTML5 -applikasjon for å lage et tomt eller tomt prosjekt
På den neste skjermen vil den be oss om å tilordne et navn til prosjektet vårt og en katalog hvor vi kan lagre det, så klikker vi på Neste -knappen. Her vil vi ha flere alternativer for eksempel: Ikke bruk mal (Ingen nettstedsmal)
Når du velger en mal (Velg mal), kan du velge fra en mal som vi har i en katalog på datamaskinen eller angi plasseringen av en .zip -fil til en mal i en url. Du kan skrive inn URL -adressen til .zip -filen eller klikke Bla gjennom for å angi en plassering på ditt lokale system. Når du oppretter et prosjekt basert på en nettstedsmal, blir filene, bibliotekene og prosjektstrukturen kopiert til prosjektkatalogen, for eksempel et gratis malnettsted.
FORSTØRRE
Vi tar den første malen hvis lenke til zip -filen er følgende:
http: //cdn.freehtml5… imcreatives.zip
Vi velger alternativet
Velg mal og kopier lenken i tekstboksen Mal. Deretter klikker vi på Neste.
FORSTØRRE
På den neste skjermen kan vi legge til biblioteker hvis vi trenger for utviklingen, og Netbeans vil legge dem til i prosjektet vårt.
FORSTØRRE
Vi kan se at den gjenkjente flere Javascript -biblioteker, og vi har også lagt til Jquery på egen hånd.
Deretter klikker vi på Finish, og Netbeans tar seg av pakking av malen og bestilling av alle prosjektfilene.
FORSTØRRE
I verktøylinjen har vi en rullegardinvelger for å teste programmet på forskjellige enheter som nettlesere, mobile enheter, SmartTV og emulatorer som Apache Cordoba for Android, for dette må vi ha Android SDK og AVD Manager installert. AVD Manager har et grafisk brukergrensesnitt der du kan opprette og administrere Android Virtual Devices (AVDS), som kreves av Android -emulatoren.
FORSTØRRE
I dette tilfellet velger vi Firefox, så klikker vi på den grønne pilen for å kjøre prosjektet, og resultatet er at malen fungerer lokalt.
FORSTØRRE
En annen måte å lage et prosjekt med maler på er å kunne bruke maler fra nettstedet www.initializr.com. Initializr er en HTML5-malgenerator som hjelper deg i gang med et nytt HTML5-basert prosjekt. Den genererer en mal som kan tilpasses med en ren og lett forståelig kode, den inneholder også alle nødvendige grunnleggende elementer og komponenter.
FORSTØRRE
Fra Netbeans trenger vi bare å velge hvilken type mal vi vil bruke, og det vil automatisk generere koden og strukturen til prosjektet.
For eksempel velger vi en Boostrap -mal for et nytt prosjekt.
FORSTØRRE
Vi klikker Neste og igjen vil det tillate oss å velge og legge til flere Jquery -biblioteker hvis vi trenger dem, og deretter klikker vi på Fullfør.
Vi vil se hvordan strukturen til HTML5 -prosjektet er opprettet, og til høyre ser vi paletten med komponentene i det tidligere installerte pluginet.
FORSTØRRE
Vi kjører prosjektet som vi gjorde før, eller også ved å trykke på F6 -tasten. Resultatet blir en enkel mal for å starte prosjektet vårt.
FORSTØRRE
Deretter skal vi teste malen
Responsiv fra Initializr med de samme tidligere trinnene, og vi vil se resultatet når det kjøres i nettleseren.
FORSTØRRE
Hvis vi vil teste applikasjonen vår i Google Chrome -nettleseren, må vi installere en plugin som kobler Netbeans til Chome.
FORSTØRRE
Vi må få tilgang til Google -kontoen vår med Gmail for å godkjenne installasjonen av programtillegget i Google Chrome, så kan vi kjøre og se programmet uten problemer.
En av fordelene med å bruke Google Chrome er at ved å høyreklikke på skjermen får vi tilgang til Element Inspector, og vi vil ha mange verktøy for å gå gjennom appen vår, en av dem som simulerer applikasjonen på forskjellige mobile enheter og oppløsninger.
FORSTØRRE
Ved å få tilgang til dette ikonet kan vi simulere applikasjonen vår på mobiltelefoner og bærbare datamaskiner som Ipad, Iphone, LG, Samsumg, Notebook.
For eksempel simulerer vi applikasjonen vår som kjører på en Iphone 6 med en 30 Mbps Wi-Fi-tilkobling
La oss deretter se på komponentene i HTML5 -paletten. La oss lage et tomt eller tomt HTML5 -prosjekt. Vi legger til Jquery 2.0.3 -biblioteket og lager prosjektstrukturen. Komponentpaletten hvis vi ikke har den på skjermen, er aktivert fra Windows -menyen> Ide Tools Palette
I vår index.html -fil, inne i kodeseksjonen
Vi drar datalistekomponenten og slipper den, vi vil se at en kodeblokk vil bli opprettet automatisk som et eksempelLand:
Hvis vi kjører applikasjonen vår, vil vi se hvordan rullegardinmenyen fungerer, det er til og med lov til å filtrere å være sensitiv mens vi skriver, den vil automatisk filtrere listen som inneholder rullegardinmenyen
La oss endre koden generert av Netbeans og trekke ut de valgte dataene fra datalisten, med Jquery som refererer til id for hvert element
Land: Se land
Vi kjører programmet og ser at det returnerer resultatet med navnet på det valgte landet:
Vi kan også sende en dataliste med et skjema og fange de valgte dataene og lagre dem i en database
Den nødvendige komponenten i paletten lar oss legge til et element som kreves i et skjema, for eksempel følgende kode med to obligatoriske obligatoriske felt:
Navn: E -post
Hvis vi kjører denne koden, kan vi se at skjemaet ikke kan sendes hvis begge feltene ikke er utfylt.
AvslutningVi har sett i denne opplæringen noen verktøy som hjelper oss med å utvikle og teste applikasjoner i HTML5 og Jquery raskere, selv uten å ha programmert nesten noen kompleks kode. I fremtidige opplæringsprogrammer vil vi fortsette å utvikle HTML5- og Jquery -applikasjoner, både tradisjonelle og mobile.Likte og hjalp du denne opplæringen?Du kan belønne forfatteren ved å trykke på denne knappen for å gi ham et positivt poeng
