Ricerca nel sito web

Come creare un progetto HTML5 di base in Ubuntu utilizzando Netbeans


In questa serie di 4 articoli sullo sviluppo web mobile, ti guideremo attraverso la configurazione di Netbeans come IDE (noto anche come ambiente di sviluppo integrato) in Ubuntu per iniziare a sviluppare applicazioni web HTML5 reattive e ottimizzate per i dispositivi mobili.

Di seguito sono riportate le serie di 4 articoli sullo sviluppo web mobile HTML5:

Un ambiente di lavoro ben rifinito (come vedremo in seguito), il completamento automatico per le lingue supportate e la sua perfetta integrazione con i browser web sono, a nostro avviso, alcune delle caratteristiche più distintive di Netbean.

Ricordiamo inoltre che la specifica HTML 5 ha apportato numerosi vantaggi agli sviluppatori – per citare alcuni esempi: codice più pulito grazie a molti nuovi elementi), funzionalità di riproduzione video e audio integrate (che sostituiscono la necessità per Flash), compatibilità incrociata con i principali browser e ottimizzazione per dispositivi mobili.

Anche se inizialmente testeremo le nostre applicazioni sul nostro computer di sviluppo locale, alla fine sposteremo il nostro sito web su un server LAMP e lo trasformeremo in uno strumento dinamico.

Lungo il percorso, utilizzeremo jQuery (una nota libreria Javascript multipiattaforma che semplifica notevolmente lo scripting lato client) e Bootstrap (il popolare HTML, CSS e framework JavaScript per lo sviluppo di siti Web reattivi). Vedrai gli articoli in arrivo su quanto sia facile configurare un'applicazione ottimizzata per dispositivi mobili utilizzando questi strumenti HTML 5.

Dopo aver seguito questa breve serie, sarai in grado di:

  1. utilizzare gli strumenti qui descritti per creare applicazioni dinamiche HTML5 di base e
  2. continua ad apprendere competenze di sviluppo web più avanzate.

Tuttavia, tieni presente che anche se utilizzeremo Ubuntu per questa serie, le istruzioni e le procedure sono perfettamente valide anche per altre distribuzioni desktop (Linux Mint, Debian, CentOS, Fedora, come dici tu).

A tal fine, abbiamo scelto di installare il software necessario (Netbeans e Java JDK, come vedrai tra poco) utilizzando un tarball generico (. tar.gz) come metodo di installazione.

Detto questo, iniziamo con la Parte 1.

Installazione di Java JDK su Ubuntu

Questo tutorial presuppone che tu abbia già un'installazione desktop Ubuntu. In caso contrario, fare riferimento all'articolo sull'installazione del desktop Ubuntu, scritto dal nostro collega Matei Cezar prima di procedere oltre.

Poiché la versione Netbeans disponibile per il download dai repository ufficiali di Ubuntu è un po' obsoleta, scaricheremo il pacchetto dal sito Web Oracle per ottenere una versione più recente.

Per fare ciò, hai due scelte:

  • Scelta 1: scarica il pacchetto che include Netbeans + JDK o
  • Scelta 2: installa entrambe le utilità separatamente.

In questo articolo sceglieremo il numero 2 perché ciò non solo significa un download un po' più piccolo (poiché installeremo solo Netbeans con supporto per HTML5 e PHP) ma ci permetterà anche di avere un download autonomo Il programma di installazione JDK dovrebbe essere necessario per un altro set che non richiede Netbeans né implica lo sviluppo web (per lo più correlato ad altri prodotti Oracle).

Per scaricare JDK, vai al sito di Oracle Technology Network e vai alla sezione JavaJava SEDownload .

Quando clicchi sull'immagine evidenziata sotto, ti verrà chiesto di accettare il contratto di licenza e poi potrai scaricare la versione JDK necessaria (che nel nostro caso è il tarball per 64 macchine a bit). Quando richiesto dal browser web, scegli di salvare il file invece di aprirlo.

Una volta completato il download, vai su ~/Downloads ed estrai il file tar in /usr/local/bin:

sudo tar xf jdk-17_linux-x64_bin.tar.gz -C /usr/local/bin

Installazione di Netbeans su Ubuntu

Per installare Netbeans con supporto per HTML5 e PHP, vai su https://netbeans.org/downloads/ e fai clic su Scarica< o utilizzare il seguente comando wget per scaricare come mostrato.

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

Da quel momento in poi segui le istruzioni visualizzate sullo schermo per completare l'installazione lasciando i valori predefiniti:

e attendere il completamento dell'installazione.

Creazione di un progetto HTML5 di base in Ubuntu

Per aprire Netbeans, selezionalo dal menu Dash:

Per creare un nuovo progetto HTML5 utilizzando il modello base fornito da Netbeans, vai su FileNuovo progettoHTML5Applicazione HTML5. Scegli un nome descrittivo per il tuo progetto e infine fai clic su Fine (non includere un modello di sito esterno o librerie JavaScript in questo momento):

Verremo quindi indirizzati alla interfaccia utente di Netbeans, dove potremo aggiungere cartelle e file alla nostra radice del sito secondo necessità. Nel nostro caso, ciò significherà aggiungere cartelle per caratteri, immagini, file Javascript (script) e fogli di stile a cascata (stili) per aiutarci a organizzare meglio i nostri contenuti nei prossimi articoli.

Per aggiungere una cartella o un file, fai clic con il pulsante destro del mouse su Radice sito e quindi seleziona NuovoCartella o HTML file.

Ora introduciamo alcuni nuovi elementi HTML5 e modifichiamo il corpo della pagina:

  1. e
    definiscono rispettivamente un'intestazione o un piè di pagina per un documento o una sezione.
  2. rappresenta il contenuto principale di un documento, in cui viene mostrato l'argomento o la funzionalità centrale.
  3. viene utilizzato per materiale autonomo, come immagini o codice, per citare alcuni esempi.
  4. mostra una didascalia per un elemento
    e quindi deve essere inserita all'interno dei tag
    .

Ora copia il seguente frammento di codice nel tuo file index.html in Netbeans.

SUGGERIMENTO: non limitarti a copiare e incollare da questa finestra nel tuo ambiente di sviluppo, ma prenditi il tempo necessario per digitare ciascun tag per visualizzare le funzionalità di completamento automatico di Netbeans, che tornerà utile in seguito.

!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>

Puoi visualizzare la pagina selezionando un browser web (preferibilmente Firefox, come nell'immagine seguente) e facendo clic sull'icona Riproduci:

Ora puoi visualizzare lo stato di avanzamento del tuo sviluppo finora:

Riepilogo

In questo articolo, abbiamo esaminato alcuni dei vantaggi di scrivere applicazioni web utilizzando HTML 5 e creato un ambiente di sviluppo con Netbeans in Ubuntu .

Abbiamo appreso che questa specifica del linguaggio ha introdotto nuovi elementi e quindi ci ha fornito la possibilità di scrivere codice più pulito e di sostituire componenti affamati di risorse come i filmati Flash con controlli integrati.

Nei prossimi articoli introdurremo jQuery e Bootstrap in modo che tu non solo possa utilizzare questi controlli e vedere le tue pagine caricarsi più velocemente, ma anche renderle ottimizzate per i dispositivi mobili.

Nel frattempo, sentiti libero di sperimentare altri controlli in Netbeans e facci sapere se hai domande o commenti utilizzando il modulo sottostante.