Cuprins
Dezvoltarea în HTML5 astăzi este un standard, deoarece funcționează într-un browser sau pe dispozitive mobile prin aplicații hibride. Dacă aplicația sau site-ul web funcționează în Chrome, Firefox sau alt browser și este adaptat la rezoluțiile ecranului dispozitivelor mobile, prin urmare, fără multe modificări, avem și o aplicație mobilă pentru Android sau IOS.
Unul dintre cele mai importante instrumente gratuite pentru programare este Netbeans, deoarece vă permite să dezvoltați site-uri web tradiționale sau aplicații mobile native sau hibride.
[color = # 006400] Descarcă pluginul [/ color] [color = # 006400] HTML5 Fun Pack [/ color]
MARI
Apoi, trebuie să instalăm pluginul, pentru aceasta urmează:
- Instrumente
- Conecteaza
- Fila descărcată
- Facem clic pe butonul Add Plugin
- Căutăm fișierul descărcat care va avea extensia nbm.
MARI
Odată instalate putem folosi componentele din paleta Instrumente HTML.
Vom crea un proiect HTML5 pentru a vedea caracteristicile și componentele sale.
Noi mergem spre:
- Fişier
- Proiect nou
- Selectăm aplicația HTML5, pentru a crea un proiect gol sau gol
Pe ecranul următor ne va cere să atribuim un nume proiectului nostru și un director unde să îl salvăm, apoi facem clic pe butonul Următor. Aici vom avea mai multe opțiuni, de exemplu: Nu utilizați șablonul (fără șablon de site)
Selectarea unui șablon (Selectare șablon) vă permite să selectați dintr-un șablon pe care îl avem într-un director de pe computer sau să specificați locația unui fișier .zip al unui șablon într-o adresă URL. Puteți tasta adresa URL a fișierului .zip sau puteți face clic pe Răsfoire pentru a specifica o locație pe sistemul dvs. local. Când creați un proiect bazat pe un șablon de site, fișierele, bibliotecile și structura proiectului sunt copiate în directorul proiectului, de exemplu un site de șabloane gratuit.
MARI
Vom lua primul șablon al cărui link către fișierul zip este următorul:
http: //cdn.freehtml5… imcreatives.zip
Selectăm opțiunea
Selectați șablonul și copiați linkul în caseta de text Șablon. Apoi facem clic pe Următorul.
MARI
Apoi, pe următorul ecran putem adăuga biblioteci dacă avem nevoie pentru dezvoltarea noastră și Netbeans le va atașa la proiectul nostru.
MARI
Putem vedea că a recunoscut mai multe biblioteci Javascript și am adăugat și Jquery pe cont propriu.
Apoi facem clic pe Finish și Netbeans se va ocupa de dezarhivarea șablonului și de ordonarea tuturor fișierelor proiectului.
MARI
În bara de instrumente, avem un selector derulant pentru a testa aplicația pe diferite dispozitive precum browsere, dispozitive mobile, SmartTV și emulatoare precum Apache Cordoba pentru Android, pentru aceasta trebuie să avem Android SDK și AVD Manager instalat. Managerul AVD oferă o interfață grafică de utilizator în care puteți crea și gestiona dispozitive virtuale Android (AVDS), care sunt necesare de către emulatorul Android.
MARI
În acest caz, selectăm Firefox, apoi facem clic pe săgeata verde pentru a rula proiectul și rezultatul este că șablonul funcționează local.
MARI
O altă modalitate de a crea un proiect cu șabloane este să puteți utiliza șabloane de pe site-ul www.initializr.com. Initializr este un generator de șabloane HTML5 care vă ajută să începeți cu un nou proiect bazat pe HTML5. Generează un șablon personalizabil cu un cod curat și ușor de înțeles, include, de asemenea, toate elementele și componentele de bază necesare.
MARI
Din Netbeans trebuie să selectăm doar tipul de șablon pe care dorim să îl folosim și acesta va genera automat codul și structura proiectului.
De exemplu, selectăm un șablon de tip Boostrap pentru un proiect nou.
MARI
Facem clic pe Următorul și din nou ne va permite să selectăm și să adăugăm mai multe biblioteci Jquery dacă avem nevoie de ele și apoi facem clic pe Finalizare.
Vom vedea cum a fost creată structura proiectului HTML5 și în dreapta vom vedea paleta cu componentele pluginului instalat anterior.
MARI
Rulăm proiectul așa cum am mai făcut sau apăsând tasta F6. Rezultatul va fi un șablon simplu pentru a începe proiectul nostru.
MARI
În continuare vom testa șablonul
Răspuns de la Initializr cu aceiași pași anteriori și vom vedea rezultatul atunci când este executat în browser.
MARI
Dacă dorim să ne testăm aplicația în browserul Google Chrome, trebuie să instalăm un plugin care conectează Netbeans cu Chome.
MARI
Trebuie să ne accesăm contul Google cu Gmail pentru a autoriza instalarea pluginului în Google Chrome, apoi putem rula și vizualiza aplicația fără probleme.
Unul dintre avantajele utilizării Google Chrome este că, făcând clic dreapta pe ecran, vom putea accesa Element Inspector și vom avea multe utilități pentru a ne revizui aplicația, unul dintre ele simulând aplicația pe diferite dispozitive mobile și rezoluții.
MARI
Accesând prin această pictogramă putem simula aplicația noastră pe telefoane mobile și laptopuri precum Ipad, Iphone, LG, Samsumg, Notebook.
De exemplu, simulăm aplicația noastră care rulează pe un Iphone 6 cu o conexiune Wi-Fi de 30 Mbps
În continuare, să ne uităm la componentele paletei HTML5. Să creăm un proiect HTML5 gol sau gol. Adăugăm biblioteca Jquery 2.0.3 și creăm structura proiectului. Paleta de componente dacă nu o avem pe ecran este activată din meniul Windows> Ide Tools Palette
În fișierul index.html, din secțiunea cod
Tragem componenta Listă de date și o plasăm, vom vedea că un bloc de cod va fi creat automat ca exempluȚară:
Dacă rulăm aplicația noastră, vom vedea cum funcționează meniul derulant, este permis chiar filtrarea fiind sensibile în timp ce scriem, va filtra automat lista care conține meniul derulant
Să schimbăm codul generat de Netbeans și să extragem datele selectate din Lista de date, cu Jquery referindu-se la id-ul fiecărui element
Țară: A se vedea Țara
Rulăm aplicația și vedem că returnează rezultatul cu numele țării selectate:
De asemenea, putem trimite o listă de date cu un formular și putem captura datele selectate și le putem salva într-o bază de date
Componenta necesară a paletei ne permite să adăugăm ca element obligatoriu într-un formular, cum ar fi următorul cod cu două câmpuri obligatorii obligatorii:
Nume: Email
Dacă executăm acest cod, putem vedea că formularul nu va putea fi trimis dacă ambele câmpuri nu sunt completate.
ConcluzieAm văzut în acest tutorial câteva instrumente care ne vor ajuta să dezvoltăm și să testăm mai rapid aplicații în HTML5 și Jquery, chiar și fără a fi programat aproape niciun cod complex. În viitorele tutoriale vom continua să avansăm în dezvoltarea aplicațiilor HTML5 și Jquery, atât tradiționale, cât și mobile.V-a plăcut și ați ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv
