Come creare un progetto HTML5 di base in Ubuntu usando Netbeans
In questa serie di 4 articoli sullo sviluppo del Web mobile, ti guideremo nella configurazione di Netbeans come IDE (noto anche come Ambiente di sviluppo integrato ) su Ubuntu per iniziare a sviluppare applicazioni Web HTML5 ottimizzate per dispositivi mobili e reattive.
Di seguito sono riportate le serie di 4 articoli sullo Sviluppo Web per dispositivi mobili HTML5 :
Parte 1 :Come creare un progetto HTML5 di base in Ubuntu usando NetbeansParte 2 :Aggiunta di componenti jQuery e Bootstrap per rendere l'applicazione HTML5 reattiva e ottimizzata per i dispositivi mobiliParte 3 :Rendere dinamica l'applicazione HTML5 e distribuirla su un server LAMP utilizzando FilezillaParte 4 :Ottimizzazione di app Web HTML5 dinamiche utilizzando utilità open source
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 HTML 5 le specifiche hanno portato molti vantaggi agli sviluppatori, solo per citare alcuni esempi:codice più pulito grazie a molti nuovi elementi), funzionalità di riproduzione video e audio integrate (che sostituiscono la necessità di Flash), compatibilità incrociata con i principali browser e ottimizzazione per dispositivi mobili dispositivi.
Sebbene inizialmente testeremo le nostre applicazioni sulla nostra macchina 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 framework HTML, CSS e JavaScript per lo sviluppo di siti Web reattivi). Vedrai gli articoli in arrivo quanto è facile configurare un'applicazione ottimizzata per dispositivi mobili utilizzando questi strumenti HTML 5.
Dopo aver esaminato questa breve serie, sarai in grado di:
utilizza gli strumenti qui descritti per creare applicazioni dinamiche HTML5 di base e
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 , lo chiami).
A tal fine, abbiamo scelto di installare il software necessario (Netbeans e il Java JDK , come vedrai tra un minuto) utilizzando un tarball generico (.tar.gz ) come metodo di installazione.
Detto questo, iniziamo con la Parte 1 .
Installazione di Java JDK in Ubuntu
Questo tutorial presuppone che tu abbia già installato un'installazione desktop di Ubuntu. In caso contrario, fare riferimento all'articolo Installazione desktop di Ubuntu, scritto dal nostro collega Matei Cezar prima di procedere oltre.
Dal momento che i Netbean la versione disponibile per il download dai repository ufficiali di Ubuntu è un po' datata, scaricheremo il pacchetto dal sito web di Oracle per ottenere una versione più recente.
Per fare ciò, hai due scelte:
Scelta 1 :scarica il pacchetto che include Netbeans + JDK oppure
Scelta 2 :Installa entrambe le utilità separatamente.
In questo articolo sceglieremo n. 2 perché ciò non significa solo un download un po' più piccolo (poiché installeremo Netbeans solo con supporto per HTML5 e PHP), ma ci consentirà anche di avere un programma di installazione JDK autonomo nel caso ne avessimo bisogno per un altro set che non richiede Netbeans né coinvolgono lo sviluppo web (per lo più correlato ad altri prodotti Oracle).
Per scaricare JDK , vai al sito di Oracle Technology Network e vai a Java → Java SE → Download sezione.
Quando fai clic sull'immagine evidenziata di seguito, ti verrà chiesto di accettare il contratto di licenza e quindi potrai scaricare il JDK necessario versione (che nel nostro caso è il tarball per 64-bit macchine). Quando richiesto dal tuo browser web, scegli di salvare il file invece di aprirlo.
Al termine del download, vai su ~/Download ed estrai il tarball in /usr/local/bin :
$ sudo tar xf jdk-17_linux-x64_bin.tar.gz -C /usr/local/bin
Installazione di Netbeans in Ubuntu
Per installare Netbeans con supporto per HTML5 e PHP , vai su https://netbeans.org/downloads/ e fai clic su Scarica oppure usa il seguente comando wget per scaricare come mostrato.
Da quel momento in poi, segui le istruzioni sullo schermo per completare l'installazione lasciando i valori predefiniti:
e attendi 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 di base fornito da Netbeans, vai su File → Nuovo progetto → HTML5 → Applicazione 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 all'interfaccia utente di Netbeans , dove possiamo aggiungere cartelle e file alla nostra Root del sito come necessario. Nel nostro caso, ciò significherà aggiungere cartelle per font, 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 Root del sito e quindi scegli Nuovo → Cartella o HTML file.
Ora introduciamo alcuni nuovi HTML5 elementi e modificare il corpo della pagina:
e definire un'intestazione o un piè di pagina, rispettivamente, per un documento o una sezione.
rappresenta il contenuto principale di un documento, dove viene mostrato l'argomento o la funzionalità centrale.
viene utilizzato per materiale autonomo, come immagini o codice, per citare alcuni esempi.
mostra una didascalia per un elemento, e quindi deve essere inserito all'interno di tag.
è riservato ai contenuti in qualche modo collegati al contenuto della pagina, generalmente ad esso correlati. Può essere posizionato come barra laterale con l'aiuto dei CSS (ne parleremo nei prossimi articoli).
. Ora copia il seguente snippet di codice nel tuo index.html file in Netbeans.
SUGGERIMENTO :Non limitarti a copiare e incollare da questa finestra nel tuo ambiente di sviluppo, ma dedica del tempo a digitare ogni tag per visualizzare le funzionalità di completamento automatico di Netbeans, che torneranno utili 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 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 Tecmint.com</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 background-color: #CC6699">THIS IS A FOOTER</footer>
</body>
</html>
Puoi visualizzare la pagina selezionando un browser web (preferibilmente Firefox , come nell'immagine sottostante) e facendo clic su Riproduci icona:
Ora puoi visualizzare lo stato di avanzamento del tuo sviluppo fino a questo momento:
Riepilogo
In questo articolo, abbiamo esaminato alcuni dei vantaggi di scrivere le tue applicazioni web utilizzando HTML 5 e crea un ambiente di sviluppo con Netbeans su 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 sostituire componenti affamati di risorse come i filmati Flash con controlli integrati.
Nei prossimi articoli presenteremo jQuery e Bootstrap in modo che tu possa non solo utilizzare questi controlli e guardare 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.
