HTML 5

HTML 5

(Bu makalem ocak 2012 mobillife dergisinde yayınlanmıştır)
Uzun zamandır bahsettiğim HTML 5’in teknik detaylarına değinmenin zamanı geldi sanırım. HTML 5 bundan önceki sürümlerine pek çok yeni özellik ilave ederek geliyor. Aslında HTML 5 ile birlikte her 10 yılda bir kırılma yaşayan web’in görsel arabirim alt yapısı yeniden tanımlanıyor denebilir. 

Halen geliştirilme aşamasında olan ve epey de bu aşamada kalacak olan HTML 5; bulut- pc-mobile-smart devices teknolojilerinin - css ile birlikte- arabirimini sağlayacak teknikleri, web’in doğal tag’lama (etiketleme) alt yapısıyla sunan yeni bir HTML sürümü. 

Daha yalın anlatmak istersem; HTML ve javascript bir karışım olan HTML5 kolay etiketlemeler vasıtasıyla bir browser üzerinde animasyon, video, navigasyon gibi yeni nesil arabirimleri kolayca oluşturmamızı sağlayan yeni teknikler-etiketlemeler sunuyor. 

Böyle bir şeye ihtiyaç vardı çünkü artık browser üzerinden talep edilen şeyler oldukça fazlalaşmıştı. Örneğin bir navigasyon-haritalama işinin daha kolay yapılması isteniyordu. Bir video’nun sadece bir tag’la ilave edilmesi neden olmasın ki? Veya animasyonları neden doğal etiketlemeler ve bir takım javascript alt yapılarla oluşturmayalım? Böylece kimse kendine ait standartlaşmalar yoluna gitmez. Henüz geliştirme aşamasında olan ve daha uzun bir süre bu aşamada olacak olan HTML 5 şu anki haliyle bile pek çok soruna çözüm üretmiştir.  Artık pek çok site HTML5 standartlarına dayalı yapılıyor.

HTML5 sadece yukarıda içerdiğim popüler maddeleri kapsamıyor tabii ki, aslında alt yapısal olarak pek çok farklı yapıyla geliyor. Tarihsel sürece ve bütün bu alt yapısal teknik konularla kafa karıştırmadan doğrudan işin pratik yönlerini sizinle paylaşacağım.

Öncelikli olarak şunu belirtmeliyim 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.

Browser’ınızın Hangi HTML5 özelliklerini  desteklediğini öğrenmek istiyorsanız, bunun için pek çok site var. Bunlar karşılaştırmalı tablolar sunarak hangisinin hangi özelliği desteklediğini detaylı olarak gösteriyor. Daha pratik bir site de http://www.html5test.com/ bu siteye girdiğinizde, kullandığınız browser’ın hangi HTML5 özelliklerini desteklediğini maddeler halinde görebiliyorsunuz. Hatta daha da ileri gidip bir puanlama da yapıyor.

Örneğin önce ben Firefox’un 8.01 sürümüyle www.html5test.com/ a bağlandım :

aşağıya doğru uzun bir liste olan HTML5 elemanlarını destekleme puanlamasından 314 almış Firefox 8.01 sürümü.

Aynı test’i chrome 16.0.912.63 sürümüyle yaptığımızda:

343 almış. Detayları dikkatlice incelerseniz HTM5 ile ilgili yenilikleri görürsünüz. Buradan da anlaşılacağı üzere HTML5 bazı özelliklerini bazı browser sürümleri desteklerken bazıları desteklememektedir. Ancak temel HTML 5 elementlerinin hemen her browser’ca desteklendiğini tekrar vurgulamakta fayda  var. Ben de zaten ağırlıklı olarak Temel özelliklerden bahsedeceğim.

HTML 5’ in temel yapısı

HTML5 ile ilgili kaynakları incelediğinizde hemen hepsi semantik bir yapıya sahip olduğundan bahseder. Peki nedir semantik yapı?

Burada semantik kavramı en basit, temel anlamıyla kullanılmıştır. Yani HTML5 tagları aslında ne dediklerini ifade ederler. Mesela HTML5

tagı bir başlık olduğu açıklamasına gerek duymaz. Zaten tag’ın kendisi bunu gösteriyor.

Veya footer

veya article

HTML5 de taglar bu şekilde oluşturulmuştur ve kullanımı, algılanması son derece kolaydır.

HTML5 Koduna uzaktan baktığınızda son derece  düzenli, simetrik ve anlaşılır bir yapı görürsünüz

Bu HTML 5 kodunu incelerseniz ne demek istediğimi daha iyi anlayacaksınız. Gördüğünüz gibi yapı son derece simetrik, açık ve anlaşılır. Başlık
< header  >

etiketleri arasına konumlandırılmış. İçerikler

< article  >

 altlık

< footer  >

tagları arasında yazılmış. HTML5 dosyasını ve kullanılan dili tanımlayan ifadeler de

<!DOCTYPE html> 
<html lang="en" >

şeklinde son derece basitleştirilmiş.

HTML 5 de XML e ait açılan tag kapanır gibi yazım teknikleri geçerlidir.  Yukarıdaki sayfada CSS tanımlamalarına da dikkatinizi çekmek isterim. Bunlar da semantik yapıdadır. İlk bakışta hangi elementle ilgili işlem yapıldığı kolayca anlaşılmaktadır.

Özet olarak HTML5 daha ana yapısından başlayarak HTML e yeni bir anlamsal yapı getirmiş ve kullanımı daha sade anlaşılabilir kılmıştır.

Bir dahaki yazımda HTML5 taglarını ve kullanımlarını incelemeye devam edeceğim.

JQuery Mobile – II

JQuery Mobile – 2

 (Bu Makalem Aralık  2011 tarihinde mobillife dergisinde yayınlanmıştır)

Bir önceki makalemde jquery mobile’a bir giriş yapmıştım. Orada Visual Studio, Dreamweaver gibi gelişkin editörlerin jquery mobile’ı desteklediğini yazmıştım. Bu yazımda bu konuyu biraz daha detaylandıracağım.

Örneğin Dreamweaver’da (5.5 sürümü) proje oluşturma seçenekleri içinde

“More...” a tıkladığınızda

Resimdeki gibi size jquery mobile şablonu oluşturan bir seçenek sunuluyor. Burayı tıkladığınızda gerekli sayfa(lar) ve bağlantılar oluşturulup getiriliyor:

Burada da görüldüğü gibi pencerenin sol tarafında jquery mobile’a ait tag’lar (etiketler), sağ tarafta da bunların sayfa üzerindeki konumları gözükür. Gerçek çıktıyı görmek için yukarıdaki “Live View” butonuna basmak gerekli:

Böylece yazdığımız tag’ların nasıl çıktı üreteceği anında görülür. Her şeyin bildirimsel (tag-etiketlerle) olarak yapılması Jquery mobile kullanımını son derece kolay hale getiriyor. Gerekli şekilsel düzenlemeler yukarıdaki linklerde belirtilen javascript kütüphaneleri ve CSS ler tarafından yapılıyor.

Sayfa Mimarisi

Jquery mobile’da sayfa mimarisi bildirimsel bir yapıya sahiptir. Diğer bir ifadeyle Jquery mobile sayfaları  tek bir html sayfası (veya aspx, php vs) üzerinde bildirimsel olarak yapılandırılan sayfalardan oluşur ve bu etiket veya tag ise:

gibi “data” rolünü “page” olarak belirten bildirimdir. Dikkatle baktığınız zaman  Jquery mobile nitelik bildirimlerinin “data”  ile başladığını  görürsünüz.

“data“ bildirimleri “jquery mobile” ı temsil eder.

Yeni bir sayfa bildirimi de aynen yukarıda oluğu gibi bu rolün bir sayfa yani “page” oluşturmak olduğunu söyler.

Devamında bir mobil sayfada gereken bildirimler yapılır. Bunlar temel olarak başlık, içerik ve altlıktır. Böylece tipik bir “jquery mobile” sayfa yapısı:

şeklindedir.

Burada dikkat edilmesi gereken diğer bir husus her bir sayfanın bir “id” ile kimliklendirilmiş olmasıdır. Bu bize birazdan anlatacağım sayfalar arası “gezinim” (Navigasyon) imkanını sağlar. Nitekim birinci sayfa bildirimine baktığımız zaman:

Şeklinde # (hash) ile başlayan link adresleri görüyoruz.

Bu link adresleri fiziksel olarak aynı dosyada bulunan fakat sunumsal olarak sadece bir tek sayfa görünümü sağlayan jquery mobile  sayfaları arasında bağlantı kurma imkanı verir.

Nitekim link adresleri sayfa “id” lerinden oluşuyor. Bu sayede işte o meşhur yana kayan sayfalar arası gezinim imkanı oluşuyor.

Konu linklerden açılmışken, örneğin linkinizin bir buton görünümünde olmasını istiyorsanız sadece:

data-role="button"

ifadesini kullanmanız yeterli:

Veya tıkladığınız linkin bir “pop up” “dialog” şeklinde gözükmesini istiyorsanız:

data-rel="dialog" data-transition="pop"

şeklinde bildirimlerde bulunmanız veya diğer bir ifadeyle nitelikleri tanımlamanız gerekir:

Toolbar’lar

Jquery mobile’da standart iki toolbar mevcuttur. Bunlar “header” ve “footer” dır.

Yukarıda da açıkça görüldüğü gibi:

şeklinde bir bildirimle oluşturulurlar ve görüntüsü de aksi belirtilmedikçe siyah arka plana beyaz metin şeklindedir.

Toolbarlar’a aşağıdaki gibi butonlar eklemek istiyorsanız:

Şu şekilde bir bildirimde bulunmalısınız:

 

data-icon bildirimi buton üzerindeki icon’u belirtir. Bu bildirimi yapmazsak “icon” suz bir buton görünümü alınır:

Başka bir açıdan bakarsak Toolbarlar da tanımlanan linkler buton şeklinde gözüküyor eğer özel “icon” lar isteniyorsa bunu da açıkça bildirimsel olarak belirtmeliyiz.

jquery mobile’a gelecek yazılarımda devam edeceğim.

jquery mobile

JQuery Mobile
(Bu yazım kasım 2011 mobillife dergisinde yayınlanmıştır)
Geçen yazılarımda da anlattığım gibi mobil yazılım geliştirme iki ana teknikte ilerliyor. Bunlardan bir tanesi mobil cihazın kendine ait olan platformu üzerinden uygulama geliştirmek (Native) diğeriyse standart web teknolojileriyle browser uygulamaları geliştirmek. Bunların artı ve eksilerini daha öncedeki yazılarımda aktarmıştım. Bugünkü makalemde mobile web uygulamalarının (development) yükselen yıldızı JQuery Mobile’ı tanıtmaya çalışacağım.
JQuery Mobile bütün popüler mobil cihazları destekleyen, dokunmatik ekranlar için optimize edilmiş bir framework. Alt yapısında JQuery ve JQuery UI framework’lerini kullanan JQuery Mobile kullanıcı arabirimi olarak HTML5 üst yapısını kullanıyor.
Daha da basit anlatmaya çalışırsam dokunmatik ekran arabirimleri, tuş takımlı mobil cihazlara göre daha farklı tasarlanır. İşte JQuery bu arabirimleri oluşturmak için geliştirilmiş ve bu yapılırken de web’in doğal teknolojilerinden başka teknik kullanılmamış. Yani JQuery kütüphaneleri, CSS ve HTML5 teknolojileri kullanılmış.
JQuery Mobile ile sadece etiketlerden (tag) oluşan bir bildirimle çok hızlı dokunmatik arabirimler oluşturulabiliyor. Üstelik bunların şekil ve renkleri tek bir bildirimle değişebiliyor.
http://jquerymobile.com/ adresinden erişebileceğiniz bu kütüphaneyi web sayfasının altında yazan adobe, Nokia, blackberry  dahil pek çok firma destekliyor.
“Docs and Demo” linkindeki  sayfada  JQuery Mobile a ait örnekleri hemen görüyorsunuz, çünkü bunlarda JQuery Mobile tekniği ile dokunmatik ekran mantığına göre hazırlanmış:



Bu sayfaya iphone’dan baktığınızda:

  Görünüm sanki native bir uygulamaymış gibidir. Kolay kolay bir web uygulaması olduğu anlaşılmaz.
İşte bu arabirimleri uygulama geliştiricilerin kolayca oluşturabilmesi için JQuery Mobile kütüphanesi veya Framework’ü geliştirilmiştir. Şu an nihai sürümden önceki son sürümlerinden biri olan (RC2) JQuery Mobile çok yakında nihai sürümüyle kullanımda olacak. Ancak bu hali de hemen hemen nihai sürüm gibi. Çünkü RC sürümler de sadece ufak değişiklikler yapılır.

JQuery Mobile’ı Kullanmak
JQuery Mobile ‘ı kullanmak için bilgisayarınıza hiçbir şey kurmanıza gerek yok. Hatta hiçbir şey depolamanıza da. Birer js ve CSS dosyası olan kütüphaneleri linkleyerek hemen kullanmaya başlayabilirsiniz.
Dilerseniz bu dosyaları kendi bilgisayarınızda da saklayıp referans gösterebilirsiniz.
http://jquerymobile.com/download/ linkini tıkladığınızda, JQuery Mobile’ı kullanmak için  size bir çok seçenek sunuyor.
Buraya baktığınızda 3 temel dosyanın kullanılması gerektiğini görüyorsunuz. Bunlar uzantıları js olan JQuery, JQuery.Mobile ve uzantısı css  olan JQuery.Mobile. İfadelerin devamında gelen sayılar ise hangi sürüm olduklarını belirtir. Daha net bir ifadeyle şu dosyalarla çalışılır:

Bu dosyaları indirip kendi bilgisayarınızda da kullanabilirsiniz veya doğrudan bunların web adresini vererek referans gösterip kullanabilirsiniz:

 

Bu linklerden CSS ile biteni, kullanıcı arabirimini CSS tekniğine dayanarak oluşturan dosya. JS lerde bildiğimiz javascript altyapılı JQuery kütüphaneleri. Bunlar işleyişi kontrol ederler.
yapmanız gereken html sayfanızın head tagları arasına yukarıdaki referansları kopyalamak:

artık JQuery Mobile ile çalışmaya hazırsınız. Bundan sonrası sanki HTML tagı yazıyormuşçasına JQuery Mobile’a ait bildirimleri sayfaya eklemek. Bu bildirimlerden bir kaçını birazdan örnekleyeceğim. Ancak bütün bildirimleri ve ifadeleri bulmak için http://jquerymobile.com/demos/1.0rc2/ sayfasından veya diğer referans kaynaklardan faydalanabilirsiniz.
JQuery Mobile ile çalışan editörler mevcut. Bunun anlamı şudur; JQuery Mobile’ı otomatik olarak ekleyip, bildirimlerini otomatik olarak kullanıcıya sunar bu editörler. Bunlardan biri  Visual Studio diğeriyse Dreamweaver’dır.
Dreamweaver CS 5.5 sürümünde JQuery Mobile ifadelerini yazmaya başladığınızda kullanabileceğiniz bildirimler otomatik olarak  sunuluyor. Diğer bir ifadeyle kod tamamlama var:

Tipik bir JQuery Mobile sayfa yapısı aşağıdaki gibidir:

Mobil cihazımızda dokunarak yana kaydırdığımız her bir ekran “page” (sayfa) denilen bölümlerden oluşur bu bölümlerde kendi içinde Başlık, içerik ve taban olarak ayrılır. Bir html sayfası içinde birden fazla “page” bildirimi yapılabilir.

yukarıdaki ekranda, sayfanın cihazımıza tam olarak sığmadığını görüyoruz. Bunun için head etiketleri arasına şöyle bir bildirimde bulunursak sorun ortadan kalkar:

Bir link eklemek istediğimizde:

Bildiğimiz html linki tanımı yapıyoruz. Farklı olarak örneğin bu linkin buton şeklinde gözükmesini istiyorsak:


şeklinde bir ifade kullanmak gerek:

jquery mobile’da bir mobile arabirim için gereken bütün elemanlar tanımlıdır. Butonlar, metin kutuları, linkler ve diğerleri. Yeri geldikçe bunları tanıtacağım.

Web Uygulamalarında Sosyal Ağ Entegrasyonu

Akıllı cihazların, bulut uygulamaların ve sosyal ağların yaygınlaşmasıyla, yazılım modelleri de değişti. Öncelikle artık web uygulamalarında doğrudan HTML ve Javascript’e dayalı modeller ağırlık kazandı. Özellikle HTML 5 in gelişmesiyle bu ağırlık daha da aratacak. Eskiden bir takım plug-in’lerle yapılabilen görsel zenginlikler şimdi bu iki teknolojiyle çok rahat yapılabiliyor (Daha kolay değil).  Web uygulama teknolojilerini kapsayan detaylı yazılarım bu köşede yayımlanmıştı. Şimdi bunlara bir de sosyal ağlar ayağını ekleyerek tekrar bakmak istiyorum.
Artık geleneksel anlamda client uygulamaların yerini, özellikle akıllı cihazlar için web ve native (cihazın kendi yazılım diliyle geliştirilmiş) uygulamalar, masa üstü içinse bulut uygulamalar almıştır. Aslında bulut uygulamalarda web tabanlı olduğu için onları da birer web uygulaması sayabiliriz.
Ama burada diğer enteresan bir konu sosyal ağların durumu. Özellikle Twitter ve Facebook gibi ağlar gerçekten de çok büyük kullanıcı kitlelerine ulaştılar. Facebook için 700 milyonu aşkın bir kullanıcı kitlesinden bahsediliyor. Twitter içinse bu sayı 200 milyonu aşkın.
Şimdi bir de Google+ geldi. Daha sınırlı deneme sürümünde bile ilk günlerinde 20 milyon kullanıcıya ulaştı. Gelecekteki durumunu tahmin etmek hiç de zor değil. Durum böyleyken eğer web’de bir uygulama geliştiriyorsanız ve bunun da geniş kitlelere masrafsızca ulaşmasını istiyorsanız sosyal ağlarla entegre etmeniz kaçınılmaz oluyor.


Sosyal Ağlar ve Web uygulamaları
Sosyal ağlar için uygulama geliştirme kavramını pek çok kişi duymuştur. Peki nedir bu?
Aslında bunun pek çok boyutu var.
Entegrasyondan bahsedeceksek herhalde önce API kavramını incelemek en doğrusu olacak.
API (Application Interface) bir uygulamanın dış dünya ile olan “yazılımsal” ilişkilerini belirleyen arabirimlerdir. Diğer bir ifadeyle uygulamanın iletişim arabirimleridir. Bu arabirimler sayesinde diğer uygulamalarla iletişim sağlar ve onlardan gelen komutları uygular. Diğer uygulamaların ve geliştiricilerinin API nin içeriği hakkında bilgi sahibi olması gerekmez ve hatta güvenlik sebepleriyle de olmamalı. Ancak API arabirimleri sayesinde uygulamaya istediği şeyleri yaptırır.
Konuyu biraz daha somutlaştırırsam; Örneğin bazı sitelerde veya uygulamalarda kendi “login” yordamı dışında facebook ve/veya twitter gibi login imkanları da bulunmakta.
Yani facebook (veya twitter, google, yahoo vs) kullanıcı ismi ve şifresiyle bu sitelere giriş yapılabilmekte.
Peki bu nasıl oluyor? İşte burada facebook (veya diğerleri) API si sayesinde kullanıcı bilgilerine ulaşılabilmekte ve izin verilen bilgiler kullanan uygulamaya gönderilmektedir.


API Kullanımı
İsterseniz sistemi yakından inceleyelim. Bir login sistemi örneğin facebook login sistemi nasıl oluyor da başka bir uygulama da kullanılabiliyor?
Sistem alt yapı olarak biraz karmaşık. İşin içinde ortak anahtarlar, özel anahtarlar, encoding, token gibi teknik, karmaşık kavramlar var.

Ama ben mümkün olduğunca işleyişi sadeleştirerek anlatacağım. Aşağıda anlatacaklarımı facebook üzerinden örneklesem de diğer API kullanımları için de hemen hemen aynıdır.
Hangi uygulamayı geliştiriyor olursanız olun bunu bir facebook uygulaması olarak da çalıştırmak istiyorsanız öncelikle facebook hesabınıza kayıt etmelisiniz.
Uygulama ismi, adresi gibi detayların verildiği kayıt işleminden sonra bu uygulamaya ait bir takım uzun anahtarlar oluşturuluyor. Uygulamayı geliştiren bu anahtarları uygulamasına eklemeli. Bu sayede facebook veya twitter uygulamanın kendilerinde kayıtlı olduğunu anlıyorlar ve bir takım birimlerine ulaşmalarına izi veriyorlar. Facebook (veya diğerlerine) yazılımsal olarak bir şeyler yaptırmak istiyorsanız yukarıda bahsettiğim API yordamlarını kullanmak durumundasınız. API sine erişmesine izin vermiş facebook bu API ye göre gelen komutları işleyerek uygulamaya geri gönderir. Bunlardan bir tanesi de yukarıda da belirttiğim gibi login kontrolüdür. Facebook, Twitter ve diğerlerinin API lerini kullanarak buradaki kullanıcıların uygulamanızı kullanmasına izin verebilirsiniz. Biraz karmaşık alt yapıları gerektiren bu entegrasyon, kullanım açısından o kadarda karmaşık değil. Ama yine de belirli bir yazılımsal bilgi birikimini gerektiriyor. Daha basit entegrasyonlar da yapmak mümkün.
Uygulama deyince tabii sadece login yordamları gelmemeli akla. Günümüzde artık oyun uygulamalarından marketing uygulamalarına kadar pek çok kategoride uygulamayı sosyal ağlar için  geliştirmek mümkün.

Mesela facebook’da basit bir iframe arabirimi sayesinde mevcut HTML sayfanızı facebook’a dahil edebilir ve bunu bir uygulama olarak facebook ziyaretçilerinize sunabilirsiniz.
Eskiden Facebook’un bir markup dili vardı artık onu da kaldırdı. Doğrudan HTML taglarınızı facebook’a ekleyebiliyorsunuz. Tabii yukarıda bahsettiğim şekilde bunu öncelikle bir uygulama olarak kayıt etmeniz gerekiyor.
Twitter için de durum aynı. Onda da uygulamanızı kaydederek kullanabiliyorsunuz.
Twitter’da nasıl uygulamalar olabilir?
Örneğin kendi uygulamanız içinden kullanıcılarınıza tweet atmasını sağlayan bir arabirim geliştirebilirsiniz. Sayfanıza gelenler oradan ayrılmadan şifresini ve kullanıcı ismini girerek “tweet”lerini atabilir veya takip edebilirler. Buna ait pek çok uygulama hali hazırda mevcut. Veya kendi “tweet” lerinizi kendi sayfanızda yayınlayabilirsiniz. Daha pek çok yaratıcı fikir üretilebilir. Amaç mümkün olduğu kadar insanın ilgisini çekip ziyaretçi toplayabilmekse sosyal ağlar müthiş bir fırsat.

İşin marketing(pazarlama) kısmına değinecek olursak. Geleneksel yöntemlerle ulaşabileceğiniz kişi sayısı sosyal ağlara oranla çok daha maliyetli. Doğrudan hedef kitleye ulaşabilecek imkanlar sunan sosyal ağlar üstelik bunu minimum maliyetlerle yapabilmekte.
Mühim olan yaratıcı ve yararlı uygulamalarla bu ağdaki hedef kitlenizin ilgisini çekebilmek.
Bugün artık web üzerinden geniş kitlelere ulaşmak isteyenler bunu sosyal ağlar olmaksızın neredeyse başaramazlar. Diğer bir ifadeyle sosyal ağlar sadece sohbet edilen, resim paylaşılan yerler olmaktan çıkıp müthiş bir marketing alanına da çoktan  dönüşmüş durumda.

Beyin
Akşam "beyin" konulu bir belgeselde izlediklerimi aklımdan uçmadan not etmek istedim.

Beynimiz 12W güç üretiyormuş. Aynı anda sadece bir şeye odaklanabiliyormuş. Evet durum maalesef bu. Aynı anda yaptığımızı sandığımız şeyler, beynin birinden diğerine çok hızlı odaklanabilme kabileytinden kaynaklanıyormuş. Tabii bu hızında bir limiti var. Mesele 3. ve 4. görevler yüklenince "Game over" olma ihtimali çok yüksek. Yani diğer bir ifadeyle beyin "Multitasking" çalışmıyor.
Konunun özü yukarıda yazdığım çok hızlı odaklanma ve sadece bir şeyle meşgül olabilme.
Sihirbazlarında faydalandığı da bu. Zaten programda bolca ilizyon yapıldı bu konuyla ilgili. Mesela, sihirbaz oyun destesiyle gösteri yaparken, bütün dekorlar, elbiseler değişti ve gerçekten bunun farkına varamadım.
Diğer bir  test de multitasking çalıştığını iddia eden bir vatandaşa, bir takım testler yapıldı. Mesela araba kullanırken, kulaklıkta aritmetiksel işlemlerin doğrulu soruldu ve akabinde bir kelime ezberlenmesi istendi. İddialı denek 3 kelimeden sadece iki kelimeyi ezberleyebildi (bu arada ben üçünü de ezberledim :)
Araba kullanırken telefonla konuşmak "istem dışı" körlük yaratıyormuş. Aslında bu da sadece bir şeye odaklandığımızın bir göstergesi. Diğer bir ifadeyle telefonla konuşurken aslında bir körden farkımız yok. Sadece arasıra yola odaklanıyoruz ve bu da yeterli değil. Amerikada her yıl telefonla konuşma nedeniyle 2.500 kişi trafikte hayatını kaybediyormuş. Telefonla konuşma 8 promil alkolle araba sürmek kadar refleksleri de ayrıca azaltıyormuş.

Beyin milyonlarca veriyi aynı anda işleyemiyor. Bunun için daha önceden öğrenilen şablonları kabul ediyor. Sahnenin sadece ilgili yerlerine odaklanıyor diğer kısımları depodan yüklüyor. Yani her seferinde yeniden oluşturmuyor. Bu da ona müthiş bir alan, enerji ve odaklanma yeteneği sağlıyor. Aksi takdirde pek çok boş işle her seferinde uğraşmak zorunda kalır ve esas yapması gerekenlere odaklanamaz. Bunun için her zaman gördüğümüz şeylerdeki ufak değişiklikleri kolayca algılayamıyoruz, çünkü onlar default olarak depodan yükleniyor;"Her gün gittiğimiz mekandaki tuzluğun değişmesi", "Marketinizin tabelasını değiştirmesini",  "Karımızın 1mm saç kesimini:)" işte bu yüzden algılayamıyoruz. Çünkü bunlarını default kabul ediyoruz ve üzerine odaklanmıyoruz. "Daha çok karımızın ne dediğine odaklanıyoruz :)" (Aynı şeyi hanımlar için söyleyemeyeceğim onlar hem saçınıza hem laflarınıza dikkat eder. Onların defaultları farklıdır :))
Bununla ilgili çarpıcı örnekler yapıldı programda. Örneğin bir tanesinde bir bankoda bir kişiye form doldurulması isteniyor. Kalem bulmak için bankonun altına eğilen görevliyle başka bir görevli yer değiştiriyor. Yapılan bu deneyde bankodaki görevlinin değiştiğini %98 kişi fark etmiyor.  Bunun anlamı kişi görevliyi gördüğü andan sonra onun o koşullar altında değişemeyeceği şablonunu çağırmasıdır. Çünkü normal hayatta bu tip bir şey olmaz. Beyin öyle bir kabul yapıyor ki, gerçekte değişen kişiyi bile değişmemiş olarak algılıyor. Ön yargı denilen şey bu olsa gerek.
Başka testlerde anlatılan ana konuya odaklanılırken, ekranda sayısız kere goriller, tavşanlar, penguenler geçiyor ve gerçekten de  bunların hemen hiçbirini fark etmiyorsun.

Beynin aynı anda sadece bir şeye odaklanabileceği, ama diğerlerine hızlı geçiş yapabileceğini yazının başında belirtmiştim. Bununla ilgili şöyle bir test daha yapıldı programda. Karmaşık, bir resim gösterildi ve üzerinde 7 değişiklik yapıldı. Değişiklikler resim gösterilirken yapıldı ve hemen algılanıyordu. Test'i bu sefer  değişiklikler yapılmadan önce ekranı 1sn ye karartarak yaptılar. Bu sefer hemen hiç bir değişiklik fark edilmedi.
 Diğer bir ifadeyle beyin yeni bir konuya odaklanmak için eskisinden o kadar hızlı bir sürede kopuyor ve yenisine hazır oluyor ki. Değişiklikleri hemen algılayamıyor.

Başka bir deneyde de renklerin yazımını kendir renkleriyle uyumlu yaptılar. Mesela sarı ifadesi sarı renkte yazıldı, kırmızı kırmızı renginde. Bu tip 5-6 renk sırayla gösterilip okunması istendi. Sonuçlar son derece hızlıydı. Aynı deneyi bu sefer renklerin ifadesini farklı renklerle sunarak yaptılar. Yani maviyi kırmızı renge boyadılar, sarıyı yeşile vs. Süre iki kat arttı. Hipnoz altında sadece renklere odaklanmaya programlanmış denekte süre çok daha hızlı oldu. Bunun anlamı da otomasyon korteks imiz ile sorgulayan korteksimiz arasında bir çelişki meydana geldiğinde işlemler biraz uzuyor.