Author
Message
Kaan

Administrators

Online status

678 posts

#923   2017-06-24 10:04 GMT        
Webview Uygulama Yapmak

Mobil uygulama merkezi, çoklu mobil uygulama yapma sitesi ile ios ve android webview uygulama yapmak sadece birkaç adımda mümkündür.

Öncelikle mobil uyumlu bir site sahibi olmalı veya mobil uygulamamız içerisine entegre edeceğimiz sitenin mobil uyumlu veya HTML5 bir tasarıma sahip olması gerekir. Bu özelliklere sahip bir websitemiz varsa yapmamız gereken sadece aşağıda vereceğimiz iframe kod ile sitenizi mobil uygulama içerine aktarmak.

Adım 1: Mobil Uygulama Şablon Seçimi

Birinci adım olarak, websitenizin mobil uygulama açılır açılmaz ekrana gelmesini sağlıyoruz. Bunun için “Dizayn” sekmesinde “Ekran planınızı değiştirin” bölümünden 1 ve 9 numaralı menu dizilimini seçiyoruz.



Yukarıdaki 1 ve 9 nolu menü dizilimleri ilk olarak kullandığınız özelliği ana ekrana taşır. Bizde webview bir uygulama yapmayı planladığımız için Html Kod özelliğini ilk sıraya alcağız.

Adım 2: Html Özelliği ile İframe Kullanma

İframe özelliği ile sitenizin belirli bir bölümünü veya tamamını uygulama içerisine aktarabilirsiniz. Aşağıda vereceğimiz iframe kodunu özellikler sekmesinde Html özelliğini aktif ederek, ekrandaki kod yaz
:
tml]

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<style type=”text/css”>

body, html

{

margin: 0; padding: 0; height: 100%; overflow: hidden;

}

#content

{

position:absolute; left: 0; right: 0; bottom: 0; top: 0px;

}

</style>

</head>

<body>

<div id=”content”>

<iframe width=”100%” height=”100%” frameborder=”0″ src=”http://siteniz.com/“ />

</div>

</body>

</html>
height=”100%” frameborder=”0″ src=”http://siteniz.com/“ />
</div>
</body>
</html>[/highlight]
Adım 3: Menü ve Üst Barı kaldırmak

Eklediğimiz iframe kod sonrası, mobil uygulamamızda sadece websitesinin çalışmasını istiyorsak, açılan menü ve üst kısımda bulunan barı kaldırabiliriz. Bunun için altta vereceğimiz kodu “renkler” sekmesinde bulunan “GELIŞMIŞ ÖZELLEŞTIRME CSS / SCSS” özelliği aktif ederek, kod alanına eklemeniz gerekir.

[highlight=css]
.has-header {
top: 0px !important;
}

.platform-ios.platform-cordovat(.fullscreen) .has-header {
top: 20px !important;
}

ion-nav-bar {
display: none;
}[/highlight]


Bunlara baktınızmı?
Soğan Konservesi Nasıl Yapılır?
Komut İle Windows Server Nasıl Yeniden Başlatılır
Adsense Barındırılan Hesap Nasıl Yükseltilir?
Kişiliğim, hayatım hakkında konuşabilirsiniz. Fikir yürüte bilirsiniz. Beni öyle böyle sanabilirsiniz. Ama emin olamazsınız. Sizin hakkımdaki yorumlarınız, sanmalarınız benim gerçek de ne olduğumu değiştirmez. Baktığım yeri söyleye bilirsiniz ama ne gördüğümü ASLA...