Okunma

HTML5 ile Mobile Merhaba Deyin


05 Temmuz 2013 Cuma 10:30
HTML5 ile Mobile Merhaba Deyin

Günümüzde interneti artık ağırlıklı olarak mobil cihazlardan; cep telefonları ve tabletlerimizden kullanıyoruz. Hal böyle olunca da birçok popüler internet servisi ve masaüstü yazılımın, mobil cihazlarla uyumlu versiyonlarına şiddetle ihtiyaç duyuyoruz. Peki, kendi web siteleriniz ya da gerçekleştirmeyi hayal ettiğiniz yazılım fikirleriniz için ilk adımı mobil dünyada atmayı düşündünüz mü hiç? İşte bu yazımızda sizlere birkaç saatinizi ayırarak nasıl mobil uygulamalar geliştireceğinizden bahsedeceğiz.

Emektar HTML’den Mobil Fatihi HTML5’e

 

İnternetle ilk tanıştığımız yıllarda en büyük yardımcımız olan ve son yıllarda pek de yüzüne bakmadığımız HTML etiketleri ve Javascript kodları, şimdilerde evrimleşerek CSS’i de içine alan HTML5 sürümüyle yeniden karşımıza geliyor. Bu 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.

Config.xml + index.html = Mobil Uygulama!

HTML5 kullanarak bir mobil uygulama hazırlayabilmek için öncelikle bir uygulama fikrine sonrasında da HTML5 tabanlı bir uygulamanın mimari yapısı hakkında bilgi sahibi olmak gerekiyor. Bu aşamada uygulama fikrini bulmayı size bırakarak işin teknik kısmından devam ediyoruz.

Öncelikle uygulamanızı index.html olarak hazırlamanız gerekiyor. Bu dosyanın içerisinde kullanacağınız Javascript ya da HTML kodları bulunmalı, dışarıdan çağırdığınız hemen her bağlantı adresi de uygulamanın ikinci bölümü olan config.xml dosyası içerisinde refere edilmelidir. Bu şekilde en yalın mobil uygulamamız oluşturulmuş ve derlenmeye hazır hale getirilmiş oluyor. Şimdi buna bir örnek verelim

“Hello World” Uygulaması

Adettendir, bir uygulama geliştirileceği ya da yeni bir dil anlatılacağı zaman hep “Hello World” ya da “Merhaba Dünya” ibaresi kullanılır. Bu geleneği bozmayarak mobil sistemler için bir “Hello World” uygulaması hazırlayacağız. İşe index.html ile başlayalım.

Bir metin editörü açıp, içerisine aşağıdaki kodu yapıştıralım.

<html>
<head>
<meta name="viewport" content="height=device-height,width=device-width,user-scalable=no"/>
</head>
<body>
<h1>Hello World!</h1>
</body> </html>

Ardından bunu index.html olarak kaydedelim. Bu dosyayı bir tarayıcı ile açtığınızda ekranda büyükçe ve bold harflerle “Hello World!” mesajını göreceksiniz. Bu durum telefonunuz için de geçerli.

Config.xml Dosyasını Oluşturalım

Şimdi ikinci bölüm olan config.xml dosyasını oluşturmaya başlayalım. Bu dosya mobil uygulamalar için hayati önem taşıyor. Bu dosya olmadan derleme işlemini gerçekleştiremeyiz. Ayrıca bu dosya içerisinde yer almayan linkleri de index.html içerisinde olsalar dahi çalıştıramayız / görüntüleyemeyiz.

Yine bir metin editörü açıp, içerisine aşağıdaki kodu yapıştıralım.

 

<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id = "com.helloworld.helloworld"
version = "1.0.0">
<name>Hello World! Mobil Uygulaması</name>
<description>
Cep telefonları için Hello World uygulaması.
</description>
<author href="http://www.darondedeoglu.com" email="daron@darondedeoglu.com">Daron Dedeoğlu</author>
<icon src="images/icon.png" />
<icon src="images/bbicon.jpg" gap:platform="blackberry" />
<gap:splash src="images/splash.png" />
<access origin="*" />
<preference name="disable-cursor" value="true" />
</widget>

 

Ardından bu dosyayı da Farklı Kaydet seçeneğiyle config.xml olarak kaydedelim. Şimdi uygulamamız derlenmeye hazır hale geldi. Bu iki dosyayı seçili hale getirip, ZIP dosyası olarak sıkıştırmamız gerekiyor. 

Şimdi hazırladığımız bu ZIP dosyasını, PhoneGap ile dilediğimiz mobil platform için derleyebiliriz. Bu aşamada build.phonegap.com adresinde bir hesap açarak (ücretli ve ücretsiz seçeneklerden birisini seçebilirsiniz) uygulamanızı derleyebilirsiniz.

:: HTML5 programlamaya ilginiz var mı?

 

 




yazarDaron Dedeoğlu

Daron Dedeoğlu, mobil uygulama geliştirme, e-ekonomi ve iş idaresi uzmanıdır. Türkiye'de yayımlanmış en popüler bilgisayar dergilerinde yazılım editörü olarak çalışmıştır.
Yazarın diğer haberlerine ulaşmak için tıklayın.

Yeni ! ShiftDelete.Net ya da SDN Forum hesabınız ile yorum yaparak yorumlarınızın rumuzunuz ile yayınlanmasını sağlayabilirsiniz. Giriş için tıklayın.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak.

19 yorum - “HTML5 ile Mobile Merhaba Deyin”

  1. SDN Okuru dedi ki:

    malformed ***** hatası alıyoruz bişi vereceksen doğru düzgün ver veya hiç verme

  2. SDN Okuru dedi ki:

    Yahu ne salak yorumlar yapıyorsunuz utanmasaniz füze yapımını ***** ilk aşamayı göstermiş geriye kalan biraz html çalışmak biraz da javascript vb şeyler. Baktın zamanla iyi gidiyor java ya da baslarsn unity de ***** neyi bu kadar çabuk elde ettiniz ki bi de yazıLima bu kadar acele ediyosunuz

  3. SDN Okuru dedi ki:

    Yorum yazanlara baksan, yazilim dili bilmezler, buraya gelir sacma yorum yazarlar…

  4. SDN Okuru dedi ki:

    ben nerdenn indircem

  5. SDN Okuru dedi ki:

    phonegap’a attığım zaman malformed ***** hatası veriyor nedeni ne olabilir??

  6. SDN Okuru dedi ki:

    bu uygulama tam olarak ne işe yarıyo

  7. SDN Okuru dedi ki:

    Hello World yazdırmış işte daha ne olsun. Adam size tutorial başlatıyorum dememiş ki, cins misiniz nesiniz ?

  8. SDN Okuru dedi ki:

    Emege saygi …tesekkurker anlatim icin

  9. SDN Okuru dedi ki:

    derlemenin içerisine neden mail adresi yerleştirdiniz? daron@*****, bu mail adresine farklı bilgiler mi gidecek?

  10. SDN Okuru dedi ki:

    OOO mobil site yapmayı shiftdelete sayesinde öğrendik birazdan instagram tasarlamaya başlıcam bakarsın sonra facebook ardındanda dayanamaz oyun tasarlarım

  11. SDN Okuru dedi ki:

    Yav html 5le uygulama gelistirsek nolucak oyuncak gibi ayfoncuklarin minik ekranlarinda ne gorucek millet de biz ugrasalim. Yeter artik o minil ekranlarda birakin anca mesajlassinlar baska birsey gerekmez onlara androidin mukemmel buyuk ekranli tellerinde zaten flash destegi var ayfoncuklar da yoksa bu onlarin secimi

  12. SDN Okuru dedi ki:

    şaka mı bu? nasıl bir konu başlığı nasil bir içerik ve nasıl bir anlatım. bu kadar kolay mı html5 kodu oluşturup onu stabil yapmak?

  13. 008taki dedi ki:

    ibm in geliştirdiği maqetta var birde ona göz atın isterseniz. web tarayıcı üstünde kendi localhostunda çalışı***** />

  14. SDN Okuru dedi ki:

    Allahını severseniz şu siteye mobil düzgün bi uygulama yapın iOS’taki rezalet geri tuşu bile yok

  15. marancı dedi ki:

    Kısa ve öz bir rehber olmuş teşekkürler. İkinci üçüncü… mesajlarınızda daha güzel paylaşımlar görmek dileğiyle.

  16. SDN Okuru dedi ki:

    MERHABA

  17. SDN Okuru dedi ki:

    Çok sağolun teşekkürler. Sayenizde HTML5 i çok iyi öğrendim birazdan facebooku tasarlamaya baslıyorum

  18. SDN Okuru dedi ki:

    Windows phone 8 de Flash Player niye yok diyorlar. HTML 5 var onu kullan dimi.

" HTML5 ile Mobile Merhaba Deyin konulu haberimizde ShiftDelete.Net olarak sizlere HTML5 ile Mobile Merhaba Deyin ile ilgili son gelişmeleri aktarmak istedik. Hemen yukarıda HTML5 ile Mobile Merhaba Deyin ile ilgili yorum ve görüşleri inceleyerek sizlerde yorum bırakabilirsiniz. "