Hvordan lage et grunnleggende HTML5-prosjekt i Ubuntu ved hjelp av Netbeans

I denne 4-artiklers mobilnettutviklingsserien vil vi veilede deg gjennom å sette opp Netbeans som en IDE (også kjent som Integrated Development Environment) i Ubuntu for å begynne å utvikle mobilvennlige og responsive HTML5-nettapplikasjoner.

Følgende er serien med fire artikler om HTML5 Mobile Web Development:

Et godt polert arbeidsmiljø (som vi senere skal se), autofullføring for støttede språk og sømløs integrasjon med nettlesere er, etter vår mening, noen av Netbeans, de mest karakteristiske funksjonene.

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), innebygde 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øre den om til et dynamisk verktøy.

Underveis vil vi bruke jQuery (et velkjent Javascript-bibliotek på tvers av plattformer som i stor grad forenkler skripting på klientsiden), og Bootstrap (den populære HTML-en, CSS og JavaScript-rammeverk 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:

  1. bruke verktøyene beskrevet her for å lage grunnleggende HTML5 dynamiske applikasjoner, og
  2. fortsett med å lære mer avanserte ferdigheter i webutvikling.

Vær imidlertid oppmerksom på at selv om vi kommer til å bruke Ubuntu for denne serien, er instruksjonene og prosedyrene perfekt gyldige for andre skrivebordsdistribusjoner også (Linux Mint, Debian, CentOS, Fedora, you name it).

For det formål har vi valgt å installere den nødvendige programvaren (Netbeans 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.

Installere Java JDK i Ubuntu

Denne opplæringen forutsetter at du allerede har en Ubuntu-skrivebordsinstallasjon på plass. Hvis du ikke gjør det, vennligst se artikkelen om Ubuntu Desktop Installation, skrevet av vår kollega Matei Cezar før du fortsetter.

Siden Netbeans-versjonen som er tilgjengelig for nedlasting fra de offisielle Ubuntu-repositoriene er litt utdatert, vil vi laste ned pakken fra Oracle-nettstedet for å få en nyere versjon.

For å gjøre dette har du to valg:

  • Valg 1: Last ned pakken som inkluderer Netbeans + JDK, eller
  • Valg 2: Installer begge verktøyene separat.

I denne artikkelen vil vi velge #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 en frittstående JDK-installasjonsprogrammet skulle vi trenge det for et annet sett som ikke krever Netbeans eller involverer webutvikling (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-delen .

Når du klikker på bildet som er uthevet nedenfor, vil du bli bedt om å godta lisensavtalen og deretter vil du kunne laste ned den nødvendige JDK-versjonen (som i vårt tilfelle er tarballen for 64) -bitmaskiner). Når nettleseren din blir bedt om det, velg å 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 Netbeans i Ubuntu

For å installere Netbeans med støtte for HTML5 og PHP, gå til https://netbeans.org/downloads/ og klikk Last ned< eller bruk følgende wget-kommando for å laste ned som vist.

cd ~/Downloads
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.

Opprette et grunnleggende HTML5-prosjekt i Ubuntu

For å åpne Netbeans, velg den fra Dash-menyen:

For å opprette 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 Fullfør (ikke ta med en ekstern nettstedsmal eller JavaScript-biblioteker for øyeblikket):

Vi blir deretter ført til Netbeans-grensesnittet, hvor vi kan legge til mapper og filer til nettstedroten 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 Ny → Mappe eller HTML fil.

La oss nå introdusere noen nye HTML5-elementer og endre sideteksten:

  1. og
    definerer henholdsvis en topptekst eller en bunntekst for et dokument eller en seksjon.
  2. representerer hovedinnholdet i et dokument, der det sentrale emnet eller funksjonaliteten vises.
  3. brukes til selvstendig materiale, som bilder eller kode, for å nevne noen eksempler.
  4. viser en bildetekst for et
    -element, og derfor må det plasseres innenfor
    -taggene.

Kopier nå følgende kodebit til index.html-filen i Netbeans.

TIPS: Ikke bare kopier og lim inn fra dette vinduet til utviklingsmiljøet ditt, men ta deg tid til å skrive inn hver kode for å visualisere funksjonene for automatisk fullføring av Netbeans, som vil komme godt med senere.

!DOCTYPE html>
<html>
	<head>
    	<title>TODO supply a title</title>
    	<meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	</head>
	<body>
    	<header style="background-color: #6699CC">THIS IS A HEADER</header>
    	<main>
        	<article>
            	<p>This is some sample text.</p>
            	<p>Another line of sample text for this HTML 5 article</p>
                	<aside>
                    	<figure>
                        	<img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" alt="HTML 5 logo" />
                        	<figcaption>Figure 1: The HTML 5 logo</figcaption>
                    	</figure>
                        	<h2>Web development basics series at linux-console.net</h2>
                        	<h3><a href="http://dev.w3.org/html5/html-author/">This is HTML 5!</a></h3>
                        	<p>Some text here</p>
                	</aside>
        	</article>
    	</main>
    	<footer style="background-color: #CC6699">THIS IS A FOOTER</footer>
	</body>
</html>

Du kan se siden ved å velge en nettleser (helst Firefox, som i bildet nedenfor) og klikke på Spill-ikonet:

Du kan nå se fremdriften i utviklingen din så langt:

Sammendrag

I denne artikkelen har vi gjennomgått noen av fordelene ved å skrive nettapplikasjonene dine ved å bruke HTML 5 og sette opp et utviklingsmiljø med Netbeans i Ubuntu .

Vi lærte at denne spesifikasjonen av språket introduserte nye elementer og dermed ga oss muligheten til å skrive renere kode og erstatte ressurskrevende komponenter som Flash-filmer med innebygde kontroller.

I kommende artikler vil vi introdusere jQuery og Bootstrap slik at du ikke bare kan bruke disse kontrollene og se sidene dine lastes raskere, men også gjøre dem mobilvennlige.

I mellomtiden kan du gjerne eksperimentere med andre kontroller i Netbeans, og gi oss beskjed hvis du har spørsmål eller kommentarer ved å bruke skjemaet nedenfor.