Dette er litt eksempeltekst.
Nok en linje med eksempeltekst for denne HTML 5-artikkelen
I denne 4-artiklers mobilnettutviklingsserien vil vi veilede deg gjennom oppsett Nettbønner som en IDE (også kjent som Integrert utviklingsmiljø) i Ubuntu å begynne å utvikle mobilvennlige og responsive HTML5-nettapplikasjoner.
Følgende er serien med 4 artikler om HTML5 mobil webutvikling:
Del 1: Hvordan lage et grunnleggende HTML5-prosjekt i Ubuntu ved hjelp av Netbeans
Et godt polert arbeidsmiljø (som vi senere skal se), autofullføring for støttede språk, og dets Sømløs integrasjon med nettlesere er, etter vår mening, noen av Netbeans, de mest karakteristiske funksjoner.
La oss også huske at HTML 5 spesifikasjonen ga mange fordeler for utviklere – for å nevne noen eksempler: renere kode takket være mange nye elementer), innebygd video og lydavspillingsmuligheter (som erstatter behovet for Flash), krysskompatibilitet med store nettlesere og optimalisering for mobile enheter.
Selv om vi først vil teste applikasjonene våre på vår lokale utviklingsmaskin, vil vi etter hvert flytte nettsiden vår til en LAMP server og gjør det til et dynamisk verktøy.
Underveis skal vi benytte oss av jQuery (et velkjent Javascript-bibliotek på tvers av plattformer som i stor grad forenkler skripting på klientsiden), og Støvelhempe (det populære HTML-, CSS- og JavaScript-rammeverket for utvikling av responsive nettsteder). Du vil se innkommende artikler hvor enkelt det er å sette opp en mobilvennlig applikasjon ved å bruke disse HTML 5-verktøyene.
Etter at du har gått gjennom denne korte serien, vil du kunne:
Vær imidlertid oppmerksom på at selv om vi skal bruke Ubuntu for denne serien er instruksjonene og prosedyrene perfekt gyldige for andre skrivebordsdistribusjoner også (Linux Mint, Debian, CentOS, Fedora, hva som helst).
For det formål har vi valgt å installere nødvendig programvare (Nettbønner og Java JDK, som du vil se om et minutt) ved å bruke en generisk tarball (.tar.gz) som en installasjonsmetode.
Når det er sagt - la oss komme i gang med Del 1.
Denne opplæringen forutsetter at du allerede har en Ubuntu-skrivebordsinstallasjon på plass. Hvis du ikke gjør det, vennligst se Ubuntu Desktop Installasjon artikkel, skrevet av vår kollega Matei Cezar før du går videre.
Siden Nettbønner versjonen som er tilgjengelig for nedlasting fra de offisielle Ubuntu-repositoriene er litt utdatert, vi vil laste ned pakken fra Oracle-nettstedet for å få en nyere versjon.
For å gjøre dette har du to valg:
I denne artikkelen vil vi velg #2 fordi det ikke bare betyr en nedlasting som er litt mindre (da vi bare vil installere Netbeans med støtte for HTML5 og PHP), men også vil tillate oss å ha et frittstående JDK-installasjonsprogram hvis vi trenger det for et annet sett som ikke krever Netbeans eller involverer nettutvikling (for det meste relatert til andre Oracle Produkter).
For å laste ned JDK, gå til Oracle Technology Network nettstedet og naviger til Java → Java SE → Nedlastinger seksjon.
Når du klikker på bildet som er uthevet nedenfor, vil du bli bedt om å godta lisensavtalen og deretter vil du kunne laste ned nødvendig JDK versjon (som i vårt tilfelle er tarball for 64-bit maskiner). Når nettleseren din blir bedt om det, velger du å lagre filen i stedet for å åpne den.
Når nedlastingen er fullført, gå til ~/Nedlastinger og trekk ut tarballen til /usr/local/bin
:
$ sudo tar xf jdk-17_linux-x64_bin.tar.gz -C /usr/local/bin.
Å installere Nettbønner med støtte til HTML5 og PHP, gå til https://netbeans.org/downloads/ og klikk nedlasting eller bruk følgende wget kommando for å laste ned som vist.
$ cd ~/Nedlastinger. $ wget https://dlcdn.apache.org/netbeans/netbeans/12.5/Apache-NetBeans-12.5-bin-linux-x64.sh. $ chmod 755 Apache-NetBeans-12.5-bin-linux-x64.sh. $ sudo ./Apache-NetBeans-12.5-bin-linux-x64.sh --javahome /usr/local/bin/jdk-17.0.1.
Fra da av, følg instruksjonene på skjermen for å fullføre installasjonen og la standardverdiene stå:
og vent til installasjonen er fullført.
Å åpne Nettbønner, velg den fra Dash-meny:
For å lage et nytt HTML5-prosjekt ved å bruke den grunnleggende malen levert av Netbeans, gå til Fil → Nytt prosjekt → HTML5 → HTML5-applikasjon. Velg et beskrivende navn for prosjektet ditt og klikk til slutt Bli ferdig (ikke ta med en ekstern nettstedsmal eller javascript-biblioteker for øyeblikket):
Vi vil da bli ført til Netbeans UI, hvor vi kan legge til mapper og filer til vår Site Root etter behov. I vårt tilfelle vil dette bety å legge til mapper for fonter, bilder, Javascript-filer (skript) og overlappende stilark (stiler) for å hjelpe oss bedre å organisere innholdet vårt i kommende artikler.
For å legge til en mappe eller en fil, høyreklikk på Site Root og velg deretter Ny → Mappe eller HTML fil.
La oss nå introdusere noe nytt HTML5 elementer og endre sideteksten:
.
Kopier nå følgende kodebit til din index.html
fil i Netbeans.
TIPS: Ikke bare kopier og lim inn fra dette vinduet til utviklingsmiljøet ditt, men ta deg tid til å skrive inn hver tag for å visualisere autofullføringsfunksjonene til Netbeans, som vil komme godt med senere.
!DOCTYPE html>TODO oppgi en tittel DETTE ER EN OVERSKRIFT Dette er litt eksempeltekst.
Nok en linje med eksempeltekst for denne HTML 5-artikkelen
Du kan se siden ved å velge en nettleser (helst Firefox, som i bildet nedenfor) og klikk på Spille ikon:
Du kan nå se fremdriften i utviklingen din så langt:
I denne artikkelen har vi gjennomgått noen av fordelene ved å skrive nettapplikasjonene dine ved hjelp av HTML 5 og sette opp et utviklingsmiljø med Nettbønner i Ubuntu.
Vi lærte at denne spesifikasjonen av språket introduserte nye elementer og dermed ga oss mulighet for å skrive renere kode og erstatte ressurskrevende komponenter som Flash-filmer med innebygd kontroller.
I kommende artikler vil vi introdusere jQuery og Støvelhempe slik at du ikke bare kan bruke disse kontrollene og se at sidene dine lastes raskere, men også gjøre dem mobilvennlige.
I mellomtiden kan du gjerne eksperimentere med andre kontroller i Nettbønner, og gi oss beskjed hvis du har spørsmål eller kommentarer ved å bruke skjemaet nedenfor.