İçindekiler
Günümüzde HTML5'te geliştirme, bir tarayıcıda veya hibrit uygulamalar aracılığıyla mobil cihazlarda çalıştığı için bir standarttır. Uygulama veya web sitesi Chrome, Firefox veya başka bir tarayıcıda çalışıyorsa ve mobil cihazların ekran çözünürlüklerine uyarlanmışsa, bu nedenle çok fazla değişiklik yapmadan Android veya IOS için bir mobil uygulamamız da var.
Programlama için en önemli ücretsiz araçlardan biri, geleneksel web siteleri veya yerel veya hibrit mobil uygulamalar geliştirmenize izin verdiği için Netbeans'tir.
[color = # 006400] Eklentiyi indirin [/ color] [color = # 006400] HTML5 Eğlence Paketi [/ color]
BÜYÜT
Ardından, eklentiyi kurmalıyız, bunun için şunları yapacağız:
- Araçlar
- Eklenti
- İndirilen sekme
- Eklenti Ekle butonuna tıklıyoruz
- nbm uzantısına sahip olacak indirilen dosyayı ararız.
BÜYÜT
Kurulduktan sonra HTML Araçları paletindeki bileşenleri kullanabiliriz.
Özelliklerini ve bileşenlerini görmek için bir HTML5 projesi oluşturacağız.
Gidiyoruz:
- Dosya
- Yeni proje
- Boş veya boş bir proje oluşturmak için HTML5 Uygulamasını seçiyoruz
Bir sonraki ekranda projemize bir isim ve onu kaydedeceğimiz bir dizini atamamızı isteyecek, ardından Next butonuna tıklıyoruz. Burada örneğin birkaç seçeneğimiz olacak: Şablon kullanma (Site Şablonu Yok)
Bir şablon seçmek (Şablon Seç), bilgisayardaki bir dizinde bulunan bir şablondan seçim yapmanıza veya bir url'deki bir şablonun .zip dosyasının konumunu belirtmenize olanak tanır. .zip dosyasının URL'sini yazabilir veya yerel sisteminizde bir konum belirtmek için Gözat'a tıklayabilirsiniz. Bir site şablonuna dayalı bir proje oluşturduğunuzda, dosyalar, kitaplıklar ve proje yapısı, örneğin ücretsiz bir şablon web sitesi gibi proje dizinine kopyalanır.
BÜYÜT
Zip dosyasına bağlantısı aşağıdaki olan ilk şablonu alacağız:
http: //cdn.freehtml5… imcreatives.zip
Seçeneği seçiyoruz
Şablon Seç ve bağlantıyı Şablon metin kutusuna kopyalayın. Ardından İleri'ye tıklıyoruz.
BÜYÜT
Daha sonra bir sonraki ekranda geliştirmemiz için gerekirse kütüphaneler ekleyebiliriz ve Netbeans bunları projemize ekleyecektir.
BÜYÜT
Birkaç Javascript kütüphanesini tanıdığını görebiliriz ve ayrıca Jquery'yi kendimiz ekledik.
Sonra Bitir'e tıklıyoruz ve Netbeans şablonun sıkıştırmasını açıp tüm proje dosyalarını sipariş edecek.
BÜYÜT
Araç çubuğunda, uygulamayı tarayıcılar, mobil cihazlar, SmartTV ve Android için Apache Cordoba gibi emülatörler gibi farklı cihazlarda test etmek için bir açılır seçicimiz var, bunun için Android SDK ve AVD Manager'ın kurulu olması gerekiyor. AVD Manager, Android öykünücüsü için gerekli olan Android Sanal Aygıtlarını (AVDS) oluşturabileceğiniz ve yönetebileceğiniz bir grafik kullanıcı arabirimi sağlar.
BÜYÜT
Bu durumda Firefox'u seçiyoruz, ardından projeyi çalıştırmak için yeşil oka tıklıyoruz ve sonuç yerel olarak çalışan şablon.
BÜYÜT
Şablonlarla proje oluşturmanın başka bir yolu da www.initializr.com web sitesinden şablonları kullanabilmektir. Initializr, HTML5 tabanlı yeni bir projeye başlamanıza yardımcı olacak bir HTML5 şablon oluşturucusudur. Temiz ve anlaşılması kolay bir kodla özelleştirilebilir bir şablon oluşturur, ayrıca gerekli tüm temel öğeleri ve bileşenleri içerir.
BÜYÜT
Netbeans'ten sadece kullanmak istediğimiz şablon tipini seçmemiz yeterli ve bu otomatik olarak projenin kodunu ve yapısını oluşturacaktır.
Örneğin yeni bir proje için Boostrap tipi bir şablon seçiyoruz.
BÜYÜT
İleri'ye tıklıyoruz ve tekrar ihtiyacımız olursa daha fazla Jquery kitaplığı seçmemize ve eklememize izin verecek ve ardından Bitir'e tıklıyoruz.
HTML5 projesinin yapısının nasıl oluşturulduğunu göreceğiz ve sağda daha önce kurulmuş olan eklentinin bileşenlerini içeren paleti göreceğiz.
BÜYÜT
Projeyi daha önce yaptığımız gibi veya F6 tuşuna basarak çalıştırıyoruz. Sonuç, projemizi başlatmak için basit bir şablon olacaktır.
BÜYÜT
Sonra şablonu test edeceğiz
Initializr'den Duyarlı aynı önceki adımlarla ve tarayıcıda yürütüldüğünde sonucu göreceğiz.
BÜYÜT
Uygulamamızı Google Chrome tarayıcısında test etmek istiyorsak Netbeans'i Chome ile bağlayan bir eklenti kurmamız gerekiyor.
BÜYÜT
Eklentinin Google Chrome'da kurulumuna yetki vermek için Gmail'imizle Google hesabımıza erişmeliyiz, ardından uygulamayı sorunsuz çalıştırabilir ve görebiliriz.
Google Chrome kullanmanın avantajlarından biri, ekrana sağ tıklayarak Element Inspector'a erişebileceğiz ve uygulamamızı incelemek için birçok yardımcı programa sahip olacağız, bunlardan biri uygulamayı farklı mobil cihazlarda ve çözünürlüklerde simüle ediyor.
BÜYÜT
Bu simgeye erişerek uygulamamızı Ipad, Iphone, LG, Samsumg, Notebook gibi cep telefonlarında ve dizüstü bilgisayarlarda simüle edebiliriz.
Örneğin, 30 Mbps Wi-Fi bağlantısı olan bir Iphone 6'da çalışan uygulamamızı simüle ediyoruz.
Şimdi HTML5 paletinin bileşenlerine bakalım. Boş veya boş bir HTML5 projesi oluşturalım. Jquery 2.0.3 kütüphanesini ekliyoruz ve proje yapısını oluşturuyoruz. Bileşen paleti, ekranda yoksa Windows menüsü> Ide Tools Palette'den etkinleştirilir.
index.html dosyamızda kod bölümünün içinde
Data List bileşenini sürükleyip bırakıyoruz, örnek olarak bir kod bloğunun otomatik olarak oluşturulacağını göreceğiz.Ülke:
Uygulamamızı çalıştırırsak açılır menünün nasıl çalıştığını göreceğiz, yazarken hassas olmak için filtrelemeye bile izin veriliyor, açılır menüyü içeren listeyi otomatik olarak filtreleyecektir.
Netbeans tarafından oluşturulan kodu değiştirelim ve seçilen verileri, Jquery'nin her bir öğenin kimliğine atıfta bulunarak, Veri Listesinden çıkaralım.
Ülke: Ülkeye Bakın
Uygulamayı çalıştırıyoruz ve sonucu seçilen ülkenin adıyla döndürdüğünü görüyoruz:
Ayrıca bir form ile bir DataList gönderebilir ve seçilen verileri yakalayabilir ve bir veritabanına kaydedebiliriz.
Paletin gerekli bileşeni, iki zorunlu zorunlu alana sahip aşağıdaki kod gibi bir öğeyi Gerekli olarak bir form içine eklememize izin verir:
İsim: E-posta
Bu kodu çalıştırırsak, her iki alan da doldurulmadığında formun gönderilemeyeceğini görebiliriz.
SonuçBu eğitimde, HTML5 ve Jquery'deki uygulamaları daha hızlı geliştirmemize ve test etmemize yardımcı olacak bazı araçları gördük, hatta neredeyse herhangi bir karmaşık kod programlamadan bile. Gelecekteki eğitimlerde hem geleneksel hem de mobil HTML5 ve Jquery uygulamalarının geliştirilmesinde ilerlemeye devam edeceğiz.Bu Eğitimi beğendiniz ve yardım ettiniz mi?Yazara olumlu puan vermek için bu düğmeye basarak yazarı ödüllendirebilirsiniz.
