Android’de HTML5 Kullanımı :MobileCoder I MobileCoder.NET I Mobil Programlama I Android Programlama I Mobil Geliştiricilerin Buluşma Noktası I www.MobileCoder.Net

Android’de HTML5 Kullanımı

04.04.2015 tarihinde Android Programlama kategorisine eklenmiş, 621 views Kişi Okumuş ve 0 Yorum Yapılmış.

bootcamp_html5_android

HTML Nedir?

Kısacaca değinecek olursak Hiper Metin İşaretleme Dili (İngilizce Hypertext Markup Language, HTML) web sayfalarını oluşturmak için kullanılan standart metin işaretleme dilidir.

Temel gereği yazı, görüntü, video gibi değişik verileri ve bunları içeren sayfaları birbirine basitçe bağlamak, buna ek olarak söz konusu sayfaların web tarayıcısı yazılımları tarafından düzgün olarak görüntülenmesi için gerekli kuralları belirlemektir.

HTML5 bu işaretleme standardının beşinci sürümüdür. HTML5’in CSS3 ve Javascript’i mükemmel entegresi sayesinde, farklı yazılımlara gerek kalmadan her platforma uygun web sayfaları ya da web uygulamaları oluşturmak mümkün.

http://mobilehtml5.org/ adresinden HTML5 özelliklerinin hangi platformlarda çalıştığını görebilirsiniz.

Özellikle mobil platformlar ve video streaming gibi konularda HTML5’in hayatımıza önemli değişiklikler katabilecek potansiyelde olduğunu söyleyebiliriz.

 

MOBİL PLATFORMLARDA HTML5

native-vs-html5

Yeni nesil HTML, tarayıcılarda çalışan yepyeni web tabanlı servisler hazırlayabilmemizi ve hatta bu çalışmaları mobil cihazlar için “native” yani kurulabilen uygulamalara dönüştürebilmemizi sağlıyor.

Örnek olarak; Android Java dili ile yazılıyor. Android için Java dili ile uygulama yazarsanız bu uygulama sadece Android işletim sistemi olan telefonlarda çalışan ve o platforma özgü bir uygulama olmuş olur ve native uygulama terimi ile nitelendirilir.

Native olmayan web tabanlı Html5, Css3, Jquery mobile destekli uygulama geliştirmek için çeşitli platformlar bulunmaktadır. En çok kullanılan platform PhoneGap

phonegap

http://phonegap.com/

 

PHONEGAP

Dünyada Hybrid uygulamalar denince akla PhoneGap geliyor. PhoneGap, Adobe’nin açık kaynak bir aracı. Siz yine HTML, JScript, CSS gibi web dillerini, PhoneGap’in belirlediği kurallara/yöntemlere göre kullanıyorsunuz, PhoneGap size sağladığı çeşitli plug-in destekleriyle bazı cihaz donanımlarına erişim olanağı sağlıyor.

PhoneGap dışında;

 

jquery-logo-300x76

jQuery – http://jquerymobile.com/

logo-sencha

Sencha – http://www.sencha.com/products/touch/

 

 

 

 

 

 

jQuery ve Sencha da tercih edilen platformlar arasında. Ek olarak Türk girişimi olan 2 platform smartface ve mobiroller a gözatmak isterseniz aşağıdaki resimlere tıklayabilirsiniz.

smartface

QbmDkNq7

 

Şimdi 5 adımda basit bir html5 örneği nasıl yapılır bakalım;

1.Adım

Elimizde .css .js ve .html uzantılı 3 tane dosya var, bunları android projemiz içindeki klasör/dosya yapıları olarak uygun yerlere kopyalamamız gerekiyor.

Android Studio da sol tarafta bulunan panelde sağ tık >New yolu ile ya da paneldeki app yolunun üstüne gelip sağ tık > Show in Explorer diyerel açılan windows penceresinde manuel olarak kendimiz oluşturabiliriz.path

 

Oluşturacağımız klasörler ve dosyalar şu şekilde

assets/web/demo.html

assets/web/demo.js

2.Adım

Demo.html dosyası kodları şu şekilde olacak;

<!DOCTYPE HTML><html><head><script src=”demo.js” type=”text/javascript” /></head><body>

 

<form name=”form1″ onSubmit=”return showInfo()” autocomplete=”on”>

First name:<input type=”text” id=”fname”><br>

Last name: <input type=”text” id=”lname”><br>

<input type=”submit”>

</form>

 

</body>

</html>

Demo.js dosyası kodları;

function showInfo()

{

var str1= document.getElementById(‘fname’).value;

var str2= document.getElementById(‘lname’).value;

var res = str1.concat(‘ ‘+str2);

alert(‘Hi,’ +res);

}

3.Adım

MainActivity class ın düzenlenmesi

package com.example;//Bu kısımın projeyi oluşturduğunuz isime göre düzenlenmesi gerekecekimport android.os.Bundle;import android.webkit.WebChromeClient;import android.webkit.WebView;

import android.annotation.SuppressLint;

import android.app.Activity;

 

@SuppressLint(“SetJavaScriptEnabled”)

public class MainActivity extends Activity {

 

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

 

WebView webView = (WebView)findViewById(R.id.WebView1);

webView.getSettings().setJavaScriptEnabled(true);

webView.setWebChromeClient(new WebChromeClient());

webView.loadUrl(“file:/// assets/web/demo.html”);

}

}

activity_main.xml dosyasının düzenlenmesi

<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android“xmlns:tools=”http://schemas.android.com/tools“android:layout_width=”match_parent”android:layout_height=”match_parent”tools:context=”.MainActivity” > 

<WebView

android:layout_width=”fill_parent”

android:layout_height=”fill_parent”

android:id=”@+id/WebView1″ />

</RelativeLayout>

Program çıktısı şu şekilde arkadaşlar:

web_app_2

web_app_1

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Program kaynak kodları https://github.com/karanbalkar/AndroidWebAppDemo

Burda gösterilen örnek phonegap örneği değildi, phonegap ile eclipse e veya android studio ya ekleyeceğiniz 1 2 kütüphane ile daha kolay uygulama geliştirebilirsiniz.

Google a

  • How to make HTML5 app for android
  • create html5 app for android
  • android html5 app development tutorial
  1. Yazıp aratırsanız PhoneGap ile HTML5 Uygulama geliştirme ile ilgili internette çok sayıda örneğe erişebilirsiniz teşekkürler.

 

Hüseyin ÇELİK

 

Kaynaklar

http://tr.wikipedia.org/wiki/HTML5

http://www.techcekirdek.com/nedir-bu-html5-dedikleri-156

http://webrazzi.com/2013/01/21/yazilim-gelistiricilerin-html5-hakkinda-ne-dusunuyor-infografik/

http://www.yazilimterimleri.com/native-uygulama-nedir-41

http://karanbalkar.com/2013/11/tutorial-62-using-html5-in-android/

 

 

İlgili Terimler : , , , , ,
Yazar Hakkında

Yazar : Kadriye Kundakci

Yazar Hakkında :

Yazarın Tüm Yazıları İçin Tıklayınız

Yorumlar

Sitemizde En Çok Okunan İçerikler

ANDROİD TELEFONLARA ROOT ATMA
ANDROİD TELEFONLARA ROOT ATMARoot Ne demek ? Bir android cihazı root etmek telefonun
fragment
ANDROİD FRAGMENT YAPISI VE KULLANIMIFragmentler Activity içerisinde yer alan kullanıcı ara yüzleridir. Fragment
ANDROİD TELEFONLARDA KONFERANS GÖRÜŞME
ANDROİD TELEFONLARDA KONFERANS GÖRÜŞMEANDROİD TELEFONLARDA KONFERANS GÖRÜŞME   Konferans görüşme çok fazla bilinmeyen androidin
Asp.NET’de web servis hazırlama ve Android de kullanimi  Web Servis Nedir ? Web üzerinden HTTP protokolü ile hizmet

Sitemizde En Çok Yorumlanan İçerikler

Rating Bar Kullanımı
Rating Bar KullanımıAndroid’de yıldız şeklinde derecelendirme çubuğu olarak kullanılır. Kullanıcı sürükleme
Android Wear Emülatör Kurulumu
Android Wear Emülatör Kurulumu   Android studio da geliştireceğimiz uygulamaların kontrolunü yapmak için emülatör
Resim Galerisi Oluşturma
Resim Galerisi OluşturmaAndroid Programlama – Resim Galerisi Oluşturma Bu yazıda, bir galeri
SQLite Database Browser Kullanımı
SQLite Database Browser KullanımıSQLite Database Browser Kullanımı Merhaba arkadaşlar, Android uygulamaları geliştirirken uygulama üzerindeki

Son Yapılan Yorumlar

  • Kategoriler

  • Son Yazılar

  • Takvim

    Kasım 2017
    P S Ç P C C P
    « Kas    
     12345
    6789101112
    13141516171819
    20212223242526
    27282930  
  • Etiketler

  • Son Yorumlar

    • Arşivler

    • Meta