Sommario
Lo sviluppo in HTML5 oggi è uno standard poiché funziona in un browser o su dispositivi mobili tramite applicazioni ibride. Se l'applicazione o il sito web funziona in Chrome, Firefox o un altro browser ed è adattato alle risoluzioni dello schermo dei dispositivi mobili, quindi senza molte modifiche abbiamo anche un'applicazione mobile per Android o IOS.
Uno degli strumenti gratuiti più importanti per la programmazione è Netbeans, poiché consente di sviluppare siti Web tradizionali o applicazioni mobili native o ibride.
[color = # 006400] Scarica plugin [/ color] [color = # 006400] HTML5 Fun Pack [/ color]
INGRANDIRE
Successivamente, dobbiamo installare il plugin, per questo andremo a:
- Strumenti
- Collegare
- Scheda scaricata
- Facciamo clic sul pulsante Aggiungi plugin
- Cerchiamo il file scaricato che avrà estensione nbm.
INGRANDIRE
Una volta installati possiamo utilizzare i componenti dalla palette Strumenti HTML.
Creeremo un progetto HTML5 per vederne caratteristiche e componenti.
Stiamo andando a:
- File
- Nuovo progetto
- Selezioniamo Applicazione HTML5, per creare un progetto vuoto o vuoto
Nella schermata successiva ci chiederà di assegnare un nome al nostro progetto e una directory dove salvarlo, quindi clicchiamo sul pulsante Avanti. Qui avremo diverse opzioni, ad esempio: Non utilizzare modello (nessun modello di sito)
La selezione di un modello (Seleziona modello), consente di selezionare da un modello che abbiamo in una directory sul computer o di specificare la posizione di un file .zip di un modello in un url. È possibile digitare l'URL del file .zip o fare clic su Sfoglia per specificare una posizione nel sistema locale. Quando crei un progetto basato su un modello di sito, i file, le librerie e la struttura del progetto vengono copiati nella directory del progetto, ad esempio un sito Web modello gratuito.
INGRANDIRE
Prenderemo il primo modello il cui collegamento al file zip è il seguente:
http: //cdn.freehtml5… imcreatives.zip
Selezioniamo l'opzione
Seleziona modello e copia il collegamento nella casella di testo Modello. Quindi facciamo clic su Avanti.
INGRANDIRE
Quindi nella schermata successiva possiamo aggiungere librerie se ne abbiamo bisogno per il nostro sviluppo e Netbeans le allegherà al nostro progetto.
INGRANDIRE
Possiamo vedere che ha riconosciuto diverse librerie Javascript e abbiamo anche aggiunto Jquery da soli.
Quindi clicchiamo su Fine e Netbeans si occuperà di decomprimere il modello e ordinare tutti i file del progetto.
INGRANDIRE
Nella barra degli strumenti, abbiamo un selettore a discesa per testare l'applicazione su diversi dispositivi come browser, dispositivi mobili, SmartTV ed emulatori come Apache Cordoba per Android, per questo abbiamo bisogno di Android SDK e AVD Manager installati. AVD Manager fornisce un'interfaccia utente grafica in cui è possibile creare e gestire dispositivi virtuali Android (AVDS), richiesti dall'emulatore Android.
INGRANDIRE
In questo caso selezioniamo Firefox, poi clicchiamo sulla freccia verde per eseguire il progetto e il risultato è il modello funzionante in locale.
INGRANDIRE
Un altro modo per creare un progetto con modelli è poter utilizzare i modelli dal sito Web www.initializr.com. Initializr è un generatore di modelli HTML5 per aiutarti a iniziare con un nuovo progetto basato su HTML5. Genera un modello personalizzabile con un codice pulito e di facile comprensione, include anche tutti gli elementi e i componenti di base necessari.
INGRANDIRE
Da Netbeans dobbiamo solo selezionare il tipo di template che vogliamo usare e genererà automaticamente il codice e la struttura del progetto.
Ad esempio, selezioniamo un modello di tipo Boostrap per un nuovo progetto.
INGRANDIRE
Facciamo clic su Avanti e di nuovo ci consentirà di selezionare e aggiungere più librerie Jquery se ne abbiamo bisogno e quindi facciamo clic su Fine.
Vedremo come è stata creata la struttura del progetto HTML5 e sulla destra vedremo la palette con i componenti del plugin precedentemente installato.
INGRANDIRE
Eseguiamo il progetto come abbiamo fatto prima o anche premendo il tasto F6. Il risultato sarà un semplice modello per iniziare il nostro progetto.
INGRANDIRE
Successivamente testeremo il modello
Reattivo da Initializr con gli stessi passaggi precedenti e vedremo il risultato quando eseguito nel browser.
INGRANDIRE
Se vogliamo testare la nostra applicazione nel browser Google Chrome, dobbiamo installare un plugin che colleghi Netbeans con Chome.
INGRANDIRE
Dobbiamo accedere al nostro account Google con il nostro Gmail per autorizzare l'installazione del plug-in in Google Chrome, quindi possiamo eseguire e visualizzare l'applicazione senza problemi.
Uno dei vantaggi dell'utilizzo di Google Chrome è che facendo clic con il tasto destro sullo schermo potremo accedere a Element Inspector e avremo molte utilità per rivedere la nostra applicazione, una delle quali simula l'applicazione su diversi dispositivi mobili e risoluzioni.
INGRANDIRE
Accedendo tramite questa icona possiamo simulare la nostra applicazione su cellulari e Laptop come Ipad, Iphone, LG, Samsumg, Notebook.
Ad esempio simuliamo la nostra applicazione in esecuzione su un Iphone 6 con connessione Wi-Fi a 30 Mbps
Successivamente, diamo un'occhiata ai componenti della tavolozza HTML5. Creiamo un progetto HTML5 vuoto o vuoto. Aggiungiamo la libreria Jquery 2.0.3 e creiamo la struttura del progetto. La tavolozza dei componenti se non l'abbiamo sullo schermo è abilitata dal menu Windows> Ide Tools Palette
Nel nostro file index.html, all'interno della sezione codice
Trasciniamo il componente Data List e lo rilasciamo, vedremo che verrà creato automaticamente un blocco di codice come esempioNazione:
Se eseguiamo la nostra applicazione vedremo come funziona il menu a discesa, è anche consentito filtrare essendo sensibili mentre scriviamo, filtrerà automaticamente l'elenco che contiene il menu a discesa
Modifichiamo il codice generato da Netbeans ed estraiamo i dati selezionati dalla Data List, con Jquery riferito all'id di ogni elemento
Paese: vedi Paese
Eseguiamo l'applicazione e vediamo che restituisce il risultato con il nome del paese selezionato:
Possiamo anche inviare una DataList con un form e catturare i dati selezionati e salvarli in un database
Il componente richiesto della tavolozza ci permette di aggiungere come Richiesto un elemento all'interno di un form, come il seguente codice con due campi obbligatori obbligatori:
Nome: Email
Se eseguiamo questo codice, possiamo vedere che il modulo non potrà essere inviato se entrambi i campi non sono completati.
ConclusioneAbbiamo visto in questo tutorial alcuni strumenti che ci aiuteranno a sviluppare e testare applicazioni in HTML5 e Jquery più velocemente, anche senza aver programmato quasi nessun codice complesso. Nei prossimi tutorial continueremo ad avanzare nello sviluppo di applicazioni HTML5 e Jquery, sia tradizionali che mobili.Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo
