Innehållsförteckning
Att utvecklas i HTML5 idag är en standard eftersom det fungerar i en webbläsare eller på mobila enheter via hybridapplikationer. Om appen eller webbplatsen fungerar i Chrome, Firefox eller en annan webbläsare och är anpassad för skärmupplösningar för mobila enheter, har vi därför utan många ändringar också en mobilapplikation för Android eller IOS.
Ett av de viktigaste gratisverktygen för programmering är Netbeans, eftersom det låter dig utveckla traditionella webbplatser eller inbyggda eller hybridmobilapplikationer.
[color = # 006400] Ladda ner plugin [/ color] [color = # 006400] HTML5 Fun Pack [/ color]
FÖRSTORA
Därefter måste vi installera pluginet, för det här ska vi:
- Verktyg
- Plugin
- Nedladdad flik
- Vi klickar på knappen Lägg till plugin
- Vi letar efter den nedladdade filen som har tillägget nbm.
FÖRSTORA
Efter installationen kan vi använda komponenterna från paletten HTML -verktyg.
Vi kommer att skapa ett HTML5 -projekt för att se dess funktioner och komponenter.
Vi ska:
- Fil
- Nytt projekt
- Vi väljer HTML5 -applikation för att skapa ett tomt eller tomt projekt
På nästa skärm kommer den att be oss att tilldela ett namn till vårt projekt och en katalog där vi ska spara det, sedan klickar vi på knappen Nästa. Här kommer vi att ha flera alternativ till exempel: Använd inte mall (ingen webbplatsmall)
Genom att välja en mall (Välj mall) kan du välja från en mall som vi har i en katalog på datorn eller ange platsen för en .zip -fil för en mall i en webbadress. Du kan skriva URL -adressen till .zip -filen eller klicka på Bläddra för att ange en plats på ditt lokala system. När du skapar ett projekt baserat på en webbplatsmall kopieras filerna, biblioteken och projektstrukturen till projektkatalogen, till exempel en gratis mallwebbplats.
FÖRSTORA
Vi tar den första mallen vars länk till zip -filen är följande:
http: //cdn.freehtml5… imcreatives.zip
Vi väljer alternativet
Välj mall och kopiera länken i textrutan Mall. Sedan klickar vi på Nästa.
FÖRSTORA
På nästa skärm kan vi lägga till bibliotek om vi behöver för vår utveckling och Netbeans kommer att bifoga dem till vårt projekt.
FÖRSTORA
Vi kan se att den kände igen flera Javascript -bibliotek och vi har också lagt till Jquery på egen hand.
Sedan klickar vi på Finish och Netbeans tar hand om att packa upp mallen och beställa alla projektfiler.
FÖRSTORA
I verktygsfältet har vi en rullgardinsväljare för att testa applikationen på olika enheter som webbläsare, mobila enheter, SmartTV och emulatorer som Apache Cordoba för Android, för detta måste vi ha Android SDK och AVD Manager installerat. AVD Manager har ett grafiskt användargränssnitt där du kan skapa och hantera Android Virtual Devices (AVDS), som krävs av Android -emulatorn.
FÖRSTORA
I det här fallet väljer vi Firefox, sedan klickar vi på den gröna pilen för att köra projektet och resultatet är att mallen fungerar lokalt.
FÖRSTORA
Ett annat sätt att skapa ett projekt med mallar är att kunna använda mallar från webbplatsen www.initializr.com. Initializr är en HTML5-mallgenerator som hjälper dig att komma igång med ett nytt HTML5-baserat projekt. Den genererar en anpassningsbar mall med en ren och lättförståelig kod, den innehåller också alla nödvändiga grundläggande element och komponenter.
FÖRSTORA
Från Netbeans behöver vi bara välja vilken typ av mall vi vill använda och den genererar automatiskt koden och strukturen för projektet.
Till exempel väljer vi en Boostrap -mall för ett nytt projekt.
FÖRSTORA
Vi klickar på Nästa och det gör att vi kan välja och lägga till fler Jquery -bibliotek om vi behöver dem och sedan klicka på Slutför.
Vi kommer att se hur strukturen för HTML5 -projektet har skapats och till höger kommer vi att se paletten med komponenterna i det tidigare installerade plugin -programmet.
FÖRSTORA
Vi kör projektet som vi gjorde tidigare eller också genom att trycka på F6 -tangenten. Resultatet blir en enkel mall för att starta vårt projekt.
FÖRSTORA
Därefter testar vi mallen
Responsiv från Initializr med samma föregående steg och vi kommer att se resultatet när det körs i webbläsaren.
FÖRSTORA
Om vi vill testa vår applikation i webbläsaren Google Chrome måste vi installera ett plugin som ansluter Netbeans med Chome.
FÖRSTORA
Vi måste komma åt vårt Google -konto med vårt Gmail för att godkänna installationen av pluginprogrammet i Google Chrome, sedan kan vi köra och visa programmet utan problem.
En av fördelarna med att använda Google Chrome är att genom att högerklicka på skärmen kommer vi att kunna komma åt Element Inspector och vi kommer att ha många verktyg för att granska vår applikation, en av dem som simulerar applikationen på olika mobila enheter och upplösningar.
FÖRSTORA
Genom att komma åt via denna ikon kan vi simulera vår applikation på mobiltelefoner och bärbara datorer som Ipad, Iphone, LG, Samsumg, Notebook.
Till exempel simulerar vi vår applikation som körs på en Iphone 6 med en 30 Mbps Wi-Fi-anslutning
Låt oss sedan titta på komponenterna i HTML5 -paletten. Låt oss skapa ett tomt eller tomt HTML5 -projekt. Vi lägger till Jquery 2.0.3 -biblioteket och skapar projektstrukturen. Komponentpaletten om vi inte har den på skärmen är aktiverad från Windows -menyn> Ide Tools Palette
I vår index.html -fil, inne i kodavsnittet
Vi drar datalistkomponenten och släpper den, vi ser att ett kodblock skapas automatiskt som ett exempelLand:
Om vi kör vår applikation kommer vi att se hur rullgardinsmenyn fungerar, det är till och med tillåtet att filtrera känsligt medan vi skriver, det filtrerar automatiskt listan som innehåller rullgardinsmenyn
Låt oss ändra koden som genereras av Netbeans och extrahera den valda data från datalistan, med Jquery som hänvisar till id för varje element
Land: Se land
Vi kör programmet och ser att det returnerar resultatet med namnet på det valda landet:
Vi kan också skicka en datalista med ett formulär och fånga den valda informationen och spara den i en databas
Den nödvändiga komponenten i paletten gör att vi kan lägga till ett element som krävs i ett formulär, till exempel följande kod med två obligatoriska obligatoriska fält:
Namn: E -post
Om vi kör denna kod kan vi se att formuläret inte kommer att kunna skickas om båda fälten inte är ifyllda.
AvslutningVi har sett i denna handledning några verktyg som hjälper oss att utveckla och testa applikationer i HTML5 och Jquery snabbare, även utan att ha programmerat nästan någon komplex kod. I framtida självstudier kommer vi att fortsätta utvecklingen av HTML5- och Jquery -applikationer, både traditionella och mobila.Gillade du och hjälpte denna handledning?Du kan belöna författaren genom att trycka på den här knappen för att ge honom en positiv poäng
