7 Kasım 2012 Çarşamba

HTML 5 ile Farklılık Yaratın




HTML5 nedir?

Web kullanıcılarının ve geliştiricilerinin bildiği üzere HTML, web üzerinde içerik ya da veri tanımlamak için kullanılan bir işaretleme dilidir.

HTML 5, HTML dilinin son sürümüdür.

HTML5, sadece WC3(World Wide Web Consortium) ve çalışma grubunun önerdiği yeni standart değil, bu standartlardan daha fazlasıdır.

Mobil teknolojilerin gelişmesi ile daha da önem kazanan HTML5 aynı zamanda
oSemantik etiketler,
oSes ve Video,
oÇizim Alanı,
oÇevrimdışı Web Uygulamaları ve Depolama,
oWeb Soket,
oWeb Worker,
oSürükle - Bırak teknolojileri ve uygulamaları
ile öne çıkmaktadır.

HTML5 için CSS3 Gerekir mi?

HTML5 ile geliştirme yaparken Semantik Class isimleri ve CSS3 tanımlamaları kullanmak mantıklıdır fakat zorunluluk değildir.

HTML5 sadece biçimlendirme tekniğidir, CSS2 ile birlikte de iyi bir görünüm elde edilir fakat bu durum tamamen tasarımınız ve gereksiniminizle ilgilidir.

Siteme HTML5 Doctype Eklersem HTML5 Olur mu?

Hayır, siteniz tarayıcı tarafından HTML5 olarak algılanacaktır fakat HTML5, Doctype'dan daha fazlasıdır.
<header>
 <nav>
<section>
 <article>
 <footer>
 gibi HTML5 öğelerinin kullanılması ve semantik yapının uygulanması HTML5 desteğini üst seviyelere çıkarır ve sitenizin HTML5 yapısına uygun hale getirir. 

Web Uygulamaları Geliştirmek için Platform

HTML5 in birçok yeni özelliği web tabanlı uygulamalar için daha iyi platform geliştirme amacı etrafında toplanmaktadır.

Açıklayıcı etiketler(tags),
cross-site ve cross-window iletişiminden, animasyonlar, multimedya destekleri geliştirmeye kadar, HTML5 ile uygulama geliştirenler kullanıcı deneyimlerini iyileştirmek için birçok yeni araca sahiptir (Hogan, 2011). 

Bunları inceleyecek olursak;

Daha Tanımlayıcı Biçimlendirme Etiketleri

HTML5 ile ilgili kaynakları incelediğinizde hemen hepsi semantik bir yapıya sahip olduğundan bahseder.
Burada semantik kavramı en basit, temel anlamıyla kullanılmıştır. Yani HTML5 tagları, aslında ne dediklerini ifade ederler.






Ses ve Video

HTML’in önceki sürümlerinde medya içeriklerini kendi içerisinde barındıramamakta ve bu yüzden web uygulamaları Flash, QuickTime, MediaPlayer gibi plug-in’lerin kullanımına ihtiyaç duyulmaktadır.
HTML5 bu alanda kullanımıyla artık video, ses, ve vektör grafikleri için Flash veya Silverlight gerekmemektedir. Bu noktada Apple ve Google öncü davranarak Flash Video Player tabanlı uygulamaları yerine HTML5 kullanmak için çalışmalara başlamışlardır.
Google, dünyanın en popüler video sitesi Youtube için HTML5 Video Player denemelerine başladı. Şu anda deneme sürümünde olan HTML5 tabanlı video içerik sitesine http://www.youtube.com/html5 adresinden erişebilirsiniz.

Canvas (Çizim Alanı)

HTML5 ile birlikte yeni gelen etiketlerden biri de web sayfası üzerinde 2 boyutlu ya da 3 boyutlu çizim yapılmasına olanak kılan ve herhangi bir plug-in (eklenti yazılı) ihtiyacı olmadan kullanılabilen

   <canvas> (Çizim alanı)
 etiketidir.

Çizim alanı JavaScript ile kontrol edilmektedir. Canvas bir dikdörtgen alanıdır ve bu dikdörtgenin her bir pikseli kontrol edebilmenize imkân sağlar.
Geniş bir kullanım alanına sahip olan canvas etiketi özellikle
grafikler,
oyunlar,
sunumlar,
kurumsal web projeleri,
CRM yazılımları raporlama
gibi birçok alanda kullanılabilir.

Örnek   Kod Yapısı:
win  dow.onload = function ()
{
var   data = [280,45,133,166,84,259,266,960,219,311];
var bar =   new Bar('myCanvas', data);
bar.Set('labels', ['Richard',   'Alex', 'Nick', 'Scott', 'Kjnell', 'Doug', 'Charles', 'Michelle',   'Mark', 'Alison']);
bar.Set('gutter', 45);
bar.Set('line',   true); // Defunct
bar.Set('barcolor1',   '#fff');
bar.Set('barcolor2',   '#fff');
bar.Set('backgroundgrid',   true);
bar.Set('colors', ['#f00']);
bar.Draw();
}     

Çevrimdışı Web Uygulamaları ve Depolama (Offline Applications & Web Storage)

Tipik çevrimiçi (online) Web uygulamalarında kullanıcılar sadece İnternet bağlantısı mevcut olduğu sürece uygulamalarını kullanmaları mümkündür. İnternet bağlantısı olmadığında bu uygulamalar ile artık e-postanızı kontrol edemez, takvim olaylarınızı görüntüleyemez, ya da çevrimiçi araçlar ile sunum hazırlayamazsınız.

Bu durum için HTML5 iki çözüm sağlamaktadır.
   SQL tabanlı yerel veri depolamak için bir SQL veritabanı API (SQL-based database API) ’si,
   Uygulamalara erişimi sağlamak için bir çevrimdışı uygulama HTTP önbelleği (offline application HTTP cache)
Böylece kullanıcı internet ağına bağlı değilken bile uygulamalara erişimi mevcut kılınabilmektedir.

HTML5 istemci tarafı SQL veritabanı yapılandırılmış veri depolama ve SQL veritabanı API’si sağlar. Bu özellik bahsedildiği gibi,
eposta uygulamasında e-postaların veya
 bir çevrimiçi (online) alışveriş sitesinin alışveriş sepeti içeriğin yerel olarak saklanmasında kullanılabilir.

Mobil uygulamalarda HTML5’inbu özellikleri öne çıkmaktadır ve tüm mobil internet tarayıcıları bu teknolojiye destekleme çabası göstermektedirler.
Web Soket (Web Sockets) HTML5 ile gelen en güzel özelliklerden biri de AJAX kullanmadan sunucu ile iletişime geçmemizi sağlayan WebSockets teknolojisi.

WebSockets tek bir soket(TCP) üzerinden çift yönlü bağlantı kurmayı sağlayan bir tekniktir. Örneğin tarayıcı bazlı gerçek zamanlı bir strateji oyunu yazmayı planlıyorsanız WebSockets ilginizi kesinlikle çekecek. Şuan hala W3C tarafından standartlaştırılıyor lakin Chrome ve Safari’nin WebSockets desteği bulunmakta.

AJAX ile farkı nedir?

AJAX sunucu ile HTTP üzerinden haberleşir. Bu yüzden fazladan header yolladığı için tek bir byte’ı kilobyte’lara çıkarabilir. WebSockets’da ise sunucuyla bağlantınızı kurduktan sonra (Handshake) geri kalan hiç bir haberleşmede gereken veri dışında bir şey transfer etmezsiniz.

AJAX her bir veri transferi için yeni bir bağlantı kurar.
WebSockets ise tek bir bağlantı üzerinden (bağlantı kopmadıkça) sürekli bir veri transferi yapabilir.

http://rumpetroll.com
(web soket-canvas özellikleri) html5 tekbolojisi ile neler yapılabileceğini görmek için yapılmış.

Web Worker
Web İşçisi, işlemcide (CPU) işlenmek üzere JavaScript iş parçacıkları (threads) oluşturmamızı sağlayan bir API ‘dir. 

Web Workers, birbirinden bağımsız olarak çalışacak birden fazla JavaScript iş parçacığı (thread) oluşturmamıza izin verir ve ayrıca  aynı anda birden fazla iş yapabilme olanağı sunar (World Wide Web Consortium ak. Uzun, Demirel-Uzun, & Özden, 2011). B:u sayede tarayıcıda çökme ya da bir işlem sırasında diğerlerinin durdurulması gibi sorunlar ortadan kaldırılmış olur.

Sürükle Bırak

Sürekle ve Bırak özelliği sıralamak, kopyalamak yada taşımak gibi bir çok işlemi kolaylaştıran önemli bir HTML5 kullanıcı ara yüz fonksiyonudur. Bu kullanıcılara nesneye tıklayıp basılı tutarak istediği yere sürükleyip nesneyi oraya bırakmasını sağlamaktadır.


Örneğin Google görsellerde, bilgisayarınızdaki resmi arama kutucuğuna sürükleyerek benzer resimleri veya resimdeki eleman bulunabilmektedir. Bu işlem, 3-4 satır kod parçacığı ile sağlanabilmektedir.

Daha önceki HTML sürümlerinde bu fonksiyonelliği sağlamak için geliştiriciler kompleks JavaScript kodları yada JQuery gibi JavaScript kütüphaneleri kullanmak zorundaydı. Şimdi HTML5 deki Sürekle Bırak API desteği ile tarayıcı üzerinde kodu çok daha kolay hale getirdi.

HTML5 ve Web Tarayıcı Desteği

HTML5 başlangıcından itibaren Opera ve Mozilla tarafından geliştirildi ve bu tarayıcılar tarafından desteklemektedir.

HTML5 kodlarınızın (etiketleme) çalışması için browser’ımızın HTML 5 uyumlu olması gerekiyor. Günümüzdeki hemen her browser en yeni sürümleriyle HTML 5’i desteklemektedir. Bazısı bazı HTML5 özelliklerini desteklerken bazısı desteklememektedir.

Bunun sebebi de şudur. HTML5 halen geliştirilme aşamasındadır. Browser üreticileri her yeni sürümde bazı yeni özellikleri eklemektedir. Dolayısı ile mutlak bir ortak uyumluluktan şu an için söz etmek zor. Ancak pek çok bilinen HTML5 özelliğini hemen her bilinen browser desteklemektedir.

Şu an küçük Javascript eklentileriyle eski tarayıcılardaki sorunları hallederek gönül rahatlığıyla HTML5 kullanmaya başlayabilir, karmaşık Canvas uygulamaları geliştirebilirsiniz.

Dikkatli olmanız gereken konu HTML değil daha çok CSS'dir. CSS Reset ile eski tarayıcılardaki sorunları halledebilir, CSS'i tarayıcı desteğine göre eski ve yeni tarayıcılara uygun olarak ayırıp CSS3 kullanabilirsiniz.

Browser’ınızın Hangi HTML5 özelliklerini  desteklediğini öğrenmek istiyorsanız,
 http://www.html5test.com/ sitesinden, kullandığınız browserın hangi HTML5 özelliklerini desteklediğini maddeler halinde görebilirsiniz.


HTML5 ve Mobil Uygulamalar

HTML5, mobil araçlarda kullanılan bütün tarayıcılar tarafından desteklenen

oCSS3 renk ve donukluk,
oCanvas  API,
oWeb Depolama,
oSVG,
oCSS3  kavisli köşeler,
oÇevrimdışı Web uygulamaları 
gibi birçok yeni özellikleri ve teknolojileri içerir.(Goldstein, Lazaris,  & Weyl, 2011). 

Aslında, HTML5 ile gelen Çevrimdışı Web Uygulamaları ve Web Depolama gibi birçok teknoloji mobil araçlar düşünülerek geliştirilmiştir.

Modernizr, HTML5 Kontrol Kütüphanesi

Modernizr , açık kaynak kodlu bir javascript kütüphanesidir.

Otomatik olarak çalışıp, tarayıcının bir çok  HTML5 & CSS3 özelliğini destekleyip desteklemediğine bakar.

<canvas> için kullanımı;
if (Modernizr.canvas) {
// let's draw some shapes!
} else {
// no native canvas support available :(
}

Modernizr (1.5 or later) versiyonu ile html5 video formatlarını kontrol edebiliriz;
if (Modernizr.video) {
  // let's play some video! but what kind?
  if (Modernizr.video.webm) {
    // try WebM
  } else if (Modernizr.video.ogg) {
    // try Ogg Theora + Vorbis in an Ogg container
  } else if (Modernizr.video.h264){
    // try H.264 video + AAC audio in an MP4 container
  }
}

Diğer ek bilgiler...
DOCTYPE bildirimi gerekiyor, DocType; sayfada kullanılan standartı browsera (tarayıcı) bildirmek için kullanılan bir yöntemdir. Xhtml'deki gibi kullanılır.

HTML 5 de XML e ait açılan tag kapanır gibi yazım teknikleri geçerlidir.
Form özelliklerinden placeholder, İnput field'ın içerisine metin yazmaya ve kullanıcı metin girmeye başladığında, yazının kaybolmasını sağlar.

Placeholder özelliğine resim eklenemez, sadece text eklenir, ancak css ile düzenleme yapılabilir.

Html5 ile yapılmış çalışmalar

http://www.hakankahraman.tv

http://www.aysanakliyat.com

http://lamoulade.com/#!/home

http://www.tart.com.tr/

http://www.trinitywebtech.com/

http://slaveryfootprint.org/

http://1minus1.com/

http://pixelpimps.net/#!/home

http://www.soul-reaper.com/

http://www.ro.me/  html5 canvas elementi ile çalışan 3d grafikleri plug-ine ihtiyaç duymadan görmemizi sağlayan, WebGL ile yapılmıştır.

http://cinema-series.orange.fr/evenement/universeries/en/

http://www.thewildernessdowntown.com/#

oyun:http://luxahoy.com/

17 Ekim 2012 Çarşamba

Google Reklamlarınız İçin Sitenizi Mobil Uyumlu Hale Getirin



Reklam maliyeti çok daha düşük olan mobil reklamları kullanmanız için sitenizi mobil uyumlu hale getirin.
Google Adwords reklamlarınızla müşterileriniz nereye bakıyorsa siz de orda olun.

Vakit kaybetmeden rakiplerinizin bir adım daha önüne geçebilmeniz işte  size mobil kullanıcı istatistikleri;


  • 2013 yılında internete erişmek için bilgisayarlardan daha çok mobil telefonlar kullanılmaya başladı.
  • Mobil aramalar 2010 yılından itibaren 4 kat arttı.
  • 2015 yılında dünyadaki herkesin bir cep telefonu olacak.
  • Mobil kullanıcıların %60'ı mobil bir sitenin 3saniyeden daha kısa sürede yüklenmesini bekliyor.
  • Kullanıcıların %71'i mobil bir sitenin masaüstünde açılan bir site kadar hızlı yüklenmesini bekliyor.
  • Kullanıcıların %78'i eğer bir site başlangıçta yüklenmezse, en fazla iki kez tekrar deneyecek.
  • Kullanıcıların %57'si mobil sitesi düzgün çalışmayan bir firmayı önermeyeceğini belirtti.
  • Kullanıcıların %40'ı kötü bir mobil deneyim yaşadıktan sonra rakip siteye yöneldi.
  • Akıllı telefon kullanıcılarının %52'si yerel bilgilere ulaşmak için arama yaptı.
  • Kullanıcıların %39'u arama yaptıktan sonra bir firmayı arıyor ve %28'i firmayı ziyaret ediyor.
  • Bu kullanıcıların %90'ı 24 saat içinde harekete geçiyor.
  • Kullanıcıların %81'i fiyat araştırması yapmak için mobil siteleri tercih ediyor.
  • Kullanıcıların %79'u ürün yorumları incelemek için mobil siteleri tercih ediyor.
  • Kullanıcıların %63'ü alışveriş yapmak için mobil siteleri tercih ediyor.
  • Kullanıcıların %70'i fiyat karşılaştırması için cen telefonu kullandı.
  • Kullanıcıların %65'i cep telefonlarından ürün yorumları okudu.
  • Mobil aramaların %50'si satışa dönüşüyor.


Bu bilgiler gomo.com.tr 'den alınmıştır.

16 Ekim 2012 Salı

Google ile Re-Marketing (Yeniden Pazarlama) Nedir? Nasıl Kullanılır?


Re-Marketing Nedir?

Yeniden pazarlama, bir ilgi alanına dayalı reklamcılık özelliğidir ve ilgili kişileri doğru mesajla buluşturmanıza yardımcı olur.

● Kullanıcılar ürün satın almadan sitenizden ayrılsa bile, yeniden pazarlama sayesinde, başka web sitelerine göz attıkları sırada, çarpıcı bir mesaj göstererek veya sitenize dönmelerini ve ürün satın almalarını
sağlayacak bir teklif sunarak bu potansiyel alıcılara ulaşabilirsiniz.



Peki Nasıl Çalışır ?

Adım 1:
Müşteriler sitenizi ziyaret etti ama, dönüşüm olmadan ayrıldılar – Onları webde bulmalıyız!

Adım 2:
Sayfalarınıza kolayca birkaç satır kod yerleştirin.

Adım 3:
Bu sayfaları ziyaret eden kullanıcıların listesini oluşturun.

Adım 4:
Kullanıcılar Görüntülü Reklam Ağı'ndaki sayfaları gezdiğinde sizin reklamınızı görecekler.


Siz de re-marketing yaparak müşterilerinize doğrudan ulaşmak istiyorsunuz tek yapmanız gereken Google Adwords Ekibiyle iletişime geçmek.

11 Ekim 2012 Perşembe

Google Reklamın Avantajları Nelerdir?



Reklam mı vermek istiyorsunuz? 

'Televizyona mı reklam versem? Gazetelere mi? Yoksa broşür basıp dağıtsam mı? 'gibi sorulara cevap mı aramaya çalışıyorsunuz?

Şimdi bütün bu soruları bir kenara atın ve Google Reklamla tanışın.

Google'ın reklamcılık hizmeti olan Google Adwords'ü kullanarak çok düşük maliyetlerle müşterilerilerinize anında ulaşın. 

Onlar nereye bakıyorsa siz de orada olun!

İşte Google Adwords'un Avantajları;

  • Alaka Düzeyi 
  • Yatırım Getirisi (YG) 
  • Erişim
  • 7/24 reklam yayını
  • Doğrudan ilgili kitleye ulaşır
  • Tıklama gerçekleşmeden para ödenmez
  • Hedef Pazar belirlenebilir
  • Önce kazanıp sonra ödeme yapılır
  • Benzer ürün arayanlara da reklamlarımız gösterilebilir
  • Rakiplerin önüne geçilebilir
  • Sonuçları detaylı ölçüp gösterir


10 Ekim 2012 Çarşamba

Neden Google'da Reklam?


Web üzerindeki  inanılmaz miktardaki bilgi, bu bilgiyi yararlı ve ulaşılabilir bir şekilde gösterebilen kusursuz bir arama servisi gerektirir. Güçlü bir arama aracı olmadan belirli bir web sitesini bulmak imkansız derecesinde zordur. İşte bu noktada Google yardımımıza yetişir ve en uygun arama sonuçlarını en hızlı şekilde sunar. 

Türkiye’deki internet kullanıcılarının %97’si bir arama yaparken Google’ı kullanıyor. Yani 50 milyon internet kullanıcı sayısından 48,5 milyon kişi Google üzerinden arama yapıyor.

Bu kullanıcıların %65’i ise bir satın alma yapmadan önce arama motorları üzerinde araştırma yapmaktadır. 

Televizyon tanıtımları,  gazete dergi gibi basılı mecralar, açık hava reklamlarının maliyetleri çok büyük reklam bütçelerine ulaşmakta ve potansiyel müşteri kitlesini belirlemek mümkün olmamaktır.

Google'ın bize sunduğu Google Reklam Platformunda yani Google Ads (Adwords)'te ise istediğimiz zamanda, istediğimiz yerde, istediğimiz şekilde, istediğimiz kişilere reklam yapabiliriz. 

Google, reklamlarımızın verimliliğini ölçmek için Google analytics gibi çeşitli analiz programlarıyla geri dönüşüm takibi yapma imkanı veriyor. 

Anatolia System Google Reklam Bölümü