Web Tasarımın Dünü ve Bugünü

Web siteleri tasarlıyorduk, bundan 10-15 sene kadar önce ve hala devam ediyoruz. “Güzel” olması gerekiyordu. Peki güzel tam olarak ne demek? Mutlak bir güzellik anlayışından söz edebilir miyiz? Yaptığımız arayüzler tüm kullanıcı tipleri için aynı etkiyi yaratabilir mi? Tabi ki hayır!

Şimdi 15 yıl önceki Apple web sitesine bakalım;

Apple Web Sitesi 2002

Ne kadar da demode değil mi? Yapıldığı dönemde hiç de öyle değildi. Aslında tasarım algımız değişmiyor, değişen tek şey trendler. Aynı arabalar gibi. Arabalar da zaman içerisinde sürekli bir değişim içerisinde. Yeni modeller istisnalar dışında hep daha şık gözüküyor değil mi? 2000 model bir arabanının güzel ya da modern gözükmemesi o ürünün tasarımcısının kabiliyeti ile ilgili değil.

Tasarım trendleri değişiyor. Bizim “güzel” algımızı da yavaş  yavaş değiştiriyor. Peki bu kadar muğlak ve kontrolü zor bir yaklaşım yerine, web sitelerini daha kullanılabilir, daha erişilebilir yapmak daha mantıklı değil mi? Bence bugün bir web sitesi olabildiğince tüm tarayıcılarda, cihazlarda, ekran çözünürlüklerinde benzer deneyim vermesidir önemli olan.

Apple’ın 2002 deki web sitesi kötü değil, sadece bugüne göre demode. Güncel versiyonu ise oldukça başarılı. Fakat kim için başarılı? Ben bir geliştirici olarak ortaya çıkan işe saygı duyuyorum. Gerçekten benim için “güzel” tasarlanmış ve telefonum veya tabletimden de bakarken aynı hisleri hissediyorum.

 

Ne yazık ki bu böyle. Bir web sitesinin tasarımı (UI), kulanıcı deneyimi (UX) ve bilgi mimarisi (AI) grafik tasarımcıya bırakılacak kadar önemsiz değiller. Burada arayüz tasarımcıları ile ilgili bir sıkıntım yok. Onlar da çok güzel işler çıkarıyorlar, hayranlık yaratacak tasarımlar yapıyorlar. Tek sorun şu; web sitesinin genel amacını tamamlayacak bir yaklaşım sadece arayüz tasarımından ibaret değil.

Bundan 7-10 sene kadar önce Web 2.0 furyası başlamıştı. Yine yanlış anlaşılmıştı. Canlı renkler, parlak butonlar vs.. Web 2.0 aslında temelde sunulan içeriğe kullanıcının dahil olmasıydı. Hangi içeriğin önemli olduğuna kullanıcının etkisi olmalıydı. Artık kullanıcı sadece içeriği tüketen değil, aynı zamanda üretendi. Bu bugün aynı ve artan şekilde devam ediyor. Olması gereken de buydu zaten.

Artık yeni bir döneme girdik. Bunu herhangi bir şekilde isimlendirmek istemiyorum. Görece “güzel” web siteleri artık geride kalmalı. Tasarımlar güzel olmasın demiyorum. Odaklanılan nokta bu olmamalı. Kardeşler Metal’in web sitesi kullanıcıya tüm tarayıcı, cihaz ve boyutlarda aynı deneyimi sunmalı. Siz süper güzel, ultra güzel bir tasarım yapsanız da bu olması gereken bir zorunluluk değil. Web sitesi bir tablo değil. Bakılmak için değil, kullanılmak için var.

Ben web geliştiriciler dışında “wow siteye bakar mısın? İnanılmaz güzel” diye tepki veren bir son kullanıcı görmedim. Kullanıcı telefon numarasını bulabiliyor veya haritada konumunu görebiliyorsa site görevini yerine getiriyor demektir. Firmaların işlerini İnternet’e taşımaları ve geliştirmeleri hızlanacaktır. Oldukça da hızlanmış durumda zaten. Ama “size özel tasarım” adı altında şirketlere ekstra masraf çıkarmanın hiç manası yok.

Vix.com bunun ekmeğini yiyenlerden biri. Tasarımı kullanıcıya yaptıran araçlar sunuyor. Fakat bu da benim açımdan sürdürülebilir değil. Sırf İnternet’te olayım, telefonum, adresim gözüksün diyen firmalar için binlerce liralık masraf çıkarmamalıyız. Sektör büyüyor, büyüdükçe de geliştiriciler olarak bizim ekosistemimiz de büyüyor. Ama yapmayın, etmeyin. 1 slayt, 1 logo, ürün resimleri, telefon, adres içeren web siteleri için “özel tasarım” adı altında ekstra maliyetler yaratmayın. Yoku satmayın.

Fazlasını Oku

HTML5 Nedir? Ne Değildir?

HTML5Bundan 4-5 sene öncesini hatırlıyorum, bir uyanış vardı web dünyasında. Web 2.0 denen bu uyanışta artık kullanıcı daha etkindi, hatta içeriği üreten artık oydu. Kimileri Web 2.0’ı mor veya pembe arayüz zannettiler, kimileri de arayüz kodlamada tabloları bırakıp div etiketleri ile kodlama yapmayı buna yakıştırdılar. Herkes tablolarla web sitesinin yapısal kısmını yapmayı bırakıp div denen katman veya layer olarak da adlandırabilecek etiketleri çeşitli css kodları ile tasarımı oluşturacak hale getirdiler.

O zaman div ile arayüz kodlama diye bir şey vardı. Tablolarla site yapısını oluşturanlar ötelendi. XHMTL 1.1 kullanımdaydı. img, br, hr, link gibi etiketler self closed olmalıydı. Şunun gibi;

<img src="resim.jpg" />

Sonra siteleri W3C’nin Validate(Doğrulama) kısmına uygun kodlamaya çalıştık. Mesela resimlere alt  parametresi verilmek zorundaydı. Şöyle;

<img src=”resim.jpg” alt=”Resim Açıklaması” />

Aslında bu alt özelliği tarayıcılarda resim yüklenemediği (herhangi bir nedenle) zamanlarda resmin yerinde yazan yazıydı. Ayrıca görme engelli kullanıcılar için geliştirilen tarayıcılar bu metinleri sesli hale getirip kullanıcıya görsel hakkında bilgi veriyordu. Bu kullanıcı için de iyiydi, hem de sayfamız valid(geçerli) şekilde testten geçer not alıyordu. Bir kodlama standardımız ve kurallarımız vardı ama çoğu anlamsızdı. Kurallara uymayı o kadar seviyorduk ki, bazen validate için ikinci parti kodları saklayıp sahte geçer not alıyorduk. Google geçerli XHTML sayfaları severdi, biz de SEO için kodlarımızı geçerli yazardık tabi. Ama aslında hiçbir anlamı yoktu. Kullandığımız etiketler içerik hakkında bir ipucu vermiyordu. Sadece belirlenmiş kurallara uyuyorduk.

Sonra W3C, XHTML 2.0 üzerinde çalışmaya başladı. Ama yine semantik Web’e doğru bir yönelim söz konusu değildi. Bunun üzerine sektörün önde gelenleri birleşip yeni bir standartlar bütünü oluşturmaya giriştiler. Kendilerini whatwg adıyla tanımladılar. Daha sonra W3C’de olaya dahil olup bu standartlar bütününü HTML5 olarak adlandırdılar. HTML5 bitmiş bir olgu değildir. Sürekli yenilenmektedir. Bir süre önce hgroup etiketi standartlardan çıkarılıp  üç gün sonra yeniden yerine koyuldu. Yani yaşayan standartlarla baş başayız.

HTML5 için şunlar söylenebilir;

  • XHTML’in garip kuralları HTML5’de yoktur. Mesela özellikler tırnaksız da tanımlanabilir. img, br, hr, link gibi etiketler self closed olmak zorunda değillerdir. Hatta önerilmese de p tagı açıp kapatmadan yeni bir etiket ile devam edebilirsiniz ve bu HTML5 validasyonu için gerekli değildir.
  • HTML5 etiketleri arayüz kodlarının sunduğu içeriği taşımasını öngörür. Yani bir paragraf yazacaksanız <p> etiketini kullanırsınız. Bunun yanında yapısal elementler ile anlamsız <div> etiketlerinden daha iyi bir yapı söz konusudur. (section, article, aside, figure, footer, header, nav gibi etiketler kullanılır) .
  • HTML5 bitmiş değildir. Sürekli güncellenir, arayüzü kodlayan kişiyi semantik etiketlemeye zorlamaz ama bunun için gerekli imkanları sunar.
  • HTML5 video, ses gibi çoklu ortam içeriklerini görüntüleyebilen API’ler sunar.
  • HTML5 neredeyse her tarayıcıda farklı oranlarda ve şekillerde desteklenir. Neyi kullanıp kullanamayacağınız için bazı kaynaklara bakmanız gerekir. Mesela Can i use? bunun için güzel bir servistir.
  • Yine tekrarlarsak HTML5 sürekli değişen canlı bir yapıya sahiptir ve takip edilmesi gerekir. Bunu şu adresten yapabilirsiniz.

Bazı kurallar da HTML5 ile değişiyor haliyle. Mesela normal bir HTML sayfasında bir tane <h1> etiketinin olması mantıklı gelir. Çünkü sayfanın başlığıdır. Diğer alt başlıklar h2, h3 diye sıralanır. Ama HTML5 de özendirilen yöntem her section’ın kendi footer’ı veya h1 etiketi ayrı olarak yer alabilir. Bu da sayfanın kodlamasının içerik hakkında ipuçları ile dolu olmasını sağlar. Yani etiketler sadece stil vermek için gruplama yapan terimler değil, sayfanın içeriği hakkında ipuçları da veren etiketler haline geliyor.

Bir HTML5 dökümanını doctype ile HTML5 olarak belirleyebilir ve eski kod alışkanlıklarınızı kullanabilirsiniz. Zamanla HTML5’in kendine has özelliklerini kodlamalarınızda kullanabilirsiniz. Yani ben tamamını öğrenip öyle geçeyim demeyin,  çünkü sürekli geliştiğinden, stabil yakalama şansınız yok.

Ayrıca canvas özelliği ile oyun ve interaktif uygulamalar dahil zengin içerikler yapabilirsiniz. Doğrusu canvas konusuna ben de henüz giriş yapmış değilim 🙂

Kullanın, öğrenin, takipte kalın.

Fazlasını Oku

Arayüz Kodlama Tarayıcı ve Platform Testi

Şu anda tam zamanlı olarak çalıştığım şirkette arayüz kodlamadan sorumluyum. Böyle bir konuya odaklanmak daha iyi sonuçlar verir, zaman gösterecek. İşe başladığımda bir gazete arayüzü HTML5 & CSS & Javascript olarak kodladım. Sonra çeşitli platform ve tarayıcı versiyonlarında tabi olarak farklılıklar gördüm. Bunlar aman aman siteyi komple bozacak farklar olmasa da işlevselliği etkileyen farklardı.

Bundan 3-4 sene öncesine kadar Internet Explorer 6 ile uğraşıp dururduk. Neyse ki artık kullanımı yok denecek kadar azaldığı için IE 6 dikkate alınmıyor. Ama yine de Internet Explorer yeni tarayıcı motorunda farklılıklar sürüyor. Safari özellikle Mac OS ortamında ve iOs cihazlarda farklılıklar çıkarabiliyor. Keza Firefox da öyle. Her tarayıcıda aynı görüntüyü almak ana amaç değil, ana amacımız her tarayıcı ve platformda benzer deneyimi kullanıcılara sunmak. Bunun için bugün bir tarayıcı uyumluluk formu hazırladım. Sizin de işinize yarayabilir diye buraya da yüklüyorum. İşte aşağıda;

Tarayıcı Uyum Kontrol Formu

Öncelikle C, C1 ve C2 değişkenlerine atama yapıyoruz. Bunlar tarayıcıların güncel sürümü ve 2 alt ana sürümünü oluşturuyor. Hepsi farklı platformlar için test ediliyor ve sorun varsa altta Internet Explorer örneği gibi sorunu yazabiliyoruz. Özellikle stajyer çalışma arkadaşlarınız varsa onlar için de güzel bir deneyim ve sağlıklı bir kodlama sağlanır. Bu format değişebilir ama hali hazırda olan kısmı bana bir yere kadar yeterli geldi. Peki bunları nereden kontrol edecek arkadaşımız? Bunun için de araçlar İnternet’te meevcut. Altta bununla ilgili birkaç araç yazıp bitiriyorum.

Bu da ilgili Excel dosyası

 

Fazlasını Oku

İstenmeyen Google Reklamlarını Gizleme

Bundan bir süre önce şu yazıda reklamlardan neler çektiğimi yazmıştım. Tam olarak 10 Eylül 2013 tarihinde yazılmıştı. Bir ürünün türevlerine baktığımda, fiyatını araştırdığımda bana günlerce benzer reklamları gösteriyordu Google. Tarayıcımda giriş yapmış olduğumdan ve arama geçmişim kayıtlı olduğundan bu reklamları görüyordum. Bir gün kulaklıklara bakıp gidip alıyordum ama 10 gün her yerde kulaklık reklamı görüyordum.

Yeni fark ettim ki Google reklamları gizleme seçeneğini devreye almış. İlgili sayfa burada. Aşağıda da bununla ilgili görseller mevcut.

Reklam

Evet ben iPad mini için kılıf  aldım. Bu reklamı daha fazla görmek istemiyorum. Bu benim kullanıcı deneyimimi önemli ölçüde artırdı. Unutmayın, reklamlar da sayfanın içeriğine ve kalitesine etki eder. Doğru kullanıldığında içeriğe katkıda bile bulunur. Sonuçta hepimiz birer tüketiciyiz. Bu özellik ne zaman geldi, ne zaman yoktu emin değilim ama yeni fark ettim ve yazdım. Bir kere kılıf baktık diye 10-15 gün kılıf reklamı görmek insanı daraltıyor cidden.

Fazlasını Oku

Unutmayın : Herkes Oyun Oynar!

Bu yazının başlığını bir oyun inceleme sitesinden çaldım. Ama çok doğru, her yaştan her kültürden insan oyun oynar. Aşağıdaki fotoğrafı bu akşam her zaman gittiğim kahvede çektim. Bütün kahve hararetli bir şekilde oyun oynuyordu.  Kimileri okey, kimileri batak, kimileri 51 oynuyordu. 20 yaşında gençler de vardı 70 yaşında amcalar da.

Peki neden oyun oynarız? Küçük çocuklar dünyayı oyunlarla keşfederler, kırarlar, dökerler, değişik şeyler yaparlar. Sonra kuralları olan oyunlara terfi eder ve kurallara uygun oyun oynamayı, yaşamın kısıtlarından haberdar olurlar.

Peki koca adam olduklarında hala oyun oyamaya devam ediyorlar? Bununla ilgili yapılan araştırmalar insanların oyun oynarken yüksek zihinsel aktivite içerisine giriyor. Sosyalleşiyor, meydan okuyor ve kendi yeteneklerini sergiliyorlar.

Nörotransmitterlerden olan dopamin’in bununla çok ilgisi olduğunu zannediyorum. Örneğin kumar oynayan insanlar oyunun yanında kazanç ve kayıp da yaşayabiliyorlar. Dopamin bizi harekete geçiren hormondur. O olmasa herhalde yataktan kalkmazdık. Oyun oynama sırasında değil, oyun başlamadan önce dopamin salgısı tavan yapar. Peki neden oyundan önce?

Ne kadar çok  şansımız varsa ve ödül ne kadar büyükse oyun öncesinde o kadar fazla salgılıyoruz dopamin’i. Okey oynayanlar bilir, o taşlar geldiğinde ilk diziş esnasında büyük heyecan yaşanır. Çünkü çok güzel bir el gelme ve erkenden bitme şansınız olabilir, oyunu o el kaybediyorken, kazanan taraf olabiliriz. Aksine yenmek dopamin ile ilgili değil. Yenme ihtimali dopamin salgılatan şey.

Bu yüzden öğretimde oyun kullanımı çok sık kullanılan bir yöntemdir. Eğlenerek öğrenmek diye tanımlanır. Evet, gerçekten oyun ile öğrenmek çok daha etkili bir yöntemdir. Bu nedenle Gamification diye bir yöntem uygulanmaktadır. Türkçesi oyunlaştırma diye çevrilebilir. Oyunla veya öğretim ile ilgili olmasa bile oyunlaştırma her yerde kullanılabilen bir yöntemdir. Örneğin bir web sitesinde aldığınız karizma puanı, forumda aldığınız teşekkürler buna örnektir.

Bu yüzden web projelerinde en trend uygulamalardan biri oyunlaştırmadır. Oyunlaştırmayı kullanan siteler, diğer sitelere göre daha fazla kullanıcı sadakati sağlar ve siteye katkı yapmalarını da o derece artırır. Sosyal ve psikolojik olguların teknoloji geliştirilmesi sırasında göz önünde bulundurulmasını her fırsatta söylüyorum. Evet, her insan oyun oynar.

Fazlasını Oku

İhtiyaçlar İçin Çalışmak

İnsan İhtiyaçlarıBir web projesi geldiğinde veya basit bir web sitesi istendiğinde bizden yani yazılımcı/tasarımcı, bir fiyat isteniyor. Para ihtiyaçlara gideceğine çoğu zaman sağa sola gidiyor. Ben ihtiyacımı söyleyerek iş arayacağım. Bana bu kadar eden projelerle gelin. Bazen bu sizin için daha karlı olur, genelde öyledir. Evet istediğim ürün LG G3 32GB.
http://www.hepsiburada.com/liste/lg-g3-d855-32gb/productDetails.aspx?productId=telceplgg332&categoryId=371946&SKU=TELCEPLGG332-B

Bu ihtiyacımı giderecek yazılım/tasarım işlerinizi yapabilirim. E-ticaret gibi geniş bir proje ise şunu istiyorum;
Fender American Standard Jazz Bass.
http://www.mydukkan.com/urunler_detay.asp?id=1036&gid=307

Telefonum LG L80 şu anda. Eğer web sitesi tasarımı gibi işiniz varsa benim telefonu satarız, 1000 ekleriz alırız telefonu. Budur ya, beni ihtiyaçlarım için çalıştırsınlar.

İletişim cancilar.net, 0544 769 38 15
Bu benim blog yazım, aynısını kendi blogumda da yazacağım.

Fazlasını Oku

Engelliler İçin Teknoloji

EngelliBen kendim de %77 engelli bir programcı/yazılımcıyım. Normal hayatta birçok engel ile karşı karşıya engelliler. Yani engelli ve daha ötesi önüne çıkan engeller var. Benim yazılım yapmamın önünde bir engel yok ama bugün mülakata 2 saat kala firma beni aradı ve engelim yüzünden işin olmayacağını söyledi.

Diğer çalışanların İstanbul’a gidiyor olduklarını ve benim gitmezsem sorun olabileceğini söylediler. Halbuki benim gitmemem keyfi değil. Bunu diğer arkadaşların da anlayacağını umardım. Neyse, benden çok beter engelli insanlar var. Yürüme, görme, işitme, kanser gibi sorunları olan insanlar.

Onlar için gerçek hayatta çok şey yapıyor sayılmam, ancak otobüste rampa kısmını indirip kaldırıyorum o da rast gelirse. Ama ürettiğim yazılımlarda onlar için kolaylıklar sunabilirim. Bu günden itibaren kullanılabilirlik ve erişilebilirlik hakkında engelli kullanıcıları hedef alan çalışmalar yapacağım. Kafamda bir şeyler var ama söylemenin anlamı yok. Yurtdışından bu konuyla ilgili kitaplar okuyup belki eğitimler alacağım.

Engelli olmak hepimizin başına gelebilecek bir ihtimaldir. Engellerin yanına engel eklemek de hoşgörüsüzlük olur.

Haydi başlayayım. Siz de benden fikirlerinizi esirgemeyin.

Fazlasını Oku

Web Sitesi Yaptırmak mı İstiyorsunuz?

Belli ki bir işiniz var veya bir projeniz. Bununla ilgili bir web sayfası yaptırma niyetindesiniz. Aklınızda bir sürü cevapsız soru vardır. Kaça mal olur? Ne zaman biter? Ben neler yapmalıyım? Doğru firma hangisi? vs…

Web Sitesi

Bu sorulardan en önemlisi aslında sizin neler yapmanız gerektiğidir. Bir defa İnternet’e açılıyorsanız, İnternet’i bilmeniz gerekir. Sosyal medya nedir? Arama motoru nedir? Bu soruları cevaplamanız gerekir. Önemli olan ne istediğinizdir. Siz nasıl yaklaşırsanız, firmalar size o yaklaşıma bağlı öneriler yaparlar veya direkt sitede bunu gösterirler.

Bir kere web sitesi yapılıp biten, bırakılan bir şey değildir. Size yüzlerce hatta binlerce müşteri getirebilecek, telefon trafiğinizi düşürebilecek, marka imajınızı artırabilecek güçtedir. Bu yüzden eğer kendiniz bu bilgileri bilmiyorsanız uzman bir firma bulmanız gerekir. En popüleri değil, işinde en uzmanları bulmalısınız.

Öncelikle alan adı seçmelisiniz. Mesela www.sirketiniz.com veya www.sirketiniz.com.tr gibi. Bu hem akılda kalıcılık açısından hem de arama  motorlarında üst sıralarda çıkma açısından önemlidir. Hatta telefonda karşıdaki kişiye söylerken bile doğru ya da yanlış seçimi yaptığınızı görebilirsiniz.

Artı olarak alan adı ve barındırma hizmetlerine senelik belli bir ücret ödersiniz. Bu 50-150 arası değişebilir küçük çaplı bir web sitesi için. Bu konuda söylenecek daha çok fazla şey olduğundan aşağıdaki ses kaydımı dinleyebilirsiniz. Çünkü okumaktan hepimiz sıkılıyoruz, hele ki bilgisayar başında. Buyrun;

Fazlasını Oku

Teknoloji Her Zaman Kullanıcı Deneyimini Artırmaz

Yaşlı TeyzeHer yeni gelen teknolojinin, geliştirmenin hayatımızı daha da kolaylaştıracağına inanıyoruz. Halbuki gerçek hayatta bu böyle değil. Usta blogçumuz Mehmet Doğan‘ın bu konuda çok güzel bir örneği vardı. Biri sıfır bir Audi marka araba alıyor. Full + full dediğimiz cinsten. Arabanın kullanım kılavuzu da kendine yakışır şekilde bir kitapçık olarak değil DVD içerisinde geliyor.

Herkesin garajında veya evinin önünde DVD oynatıcı tabi ki yok. Ufak bir ayara bakmak için bile eve girip DVD’den bakmak durumundasınız. Şimdi burada kullanım kılavuzunun kitapçıktan DVD formata geçmesi teknolojik bir yenilik midir? Evet öyledir. Fakat kullanıcı deneyimi konusunda ilerleme sağlamış mıdır? Hayır, aksine deneyimi düşürmüştür.

Akıllı telefonlarda örnek verelim. Ben de bir örnek vermiş olayım 🙂
Orta yaşlı bir abimiz telefoncuya gider, telefon almak istediğini söyler ve önüne akıllı telefon seçenekleri sunulur. E moda bu, teknoloji bunu dayatıyor size. Ayrıca akıllı telefondan iddaa sonuçlarına da bakabiliyorsunuz. Abimiz alır telefonu ama o kadar özellik içinden mesajlaşma, arama, rehberde kişi bulma gibi fonksiyonları yerine getiremez. Çünkü rehber kısmı arayüze göre değişiklik gösterebiliyor.

Abimiz teknolojide büyük adım atmış ama adım attığı yer boşluk. İleri teknolojiye harcama yapmış ama bu kendine daha çok dert keder getirmiştir. Peki teknolojik ilerleme burada kullanıcı deneyimine iyi etki etmiş midir? Kesinlikle hayır. Böyle abileri kahvede görürüm, gelirler çok basit şeylerde kafaları karışmıştır, ama iddaa sonuçlarına da bakabiliyorlar.

Ben Kocaeli’de ikamet ediyorum. Şehir içi minibüslerinde Kent Kart geçerli. Para da veremiyorsunuz. Çok teknolojik kartı olanlar için bipp, geçiyorsunuz. Sonra doldurun, ne küsüratla uğraşın, ne para üstüyle. Ama il dışından gelen biri için aynı uygulama eziyet olabiliyor. Bakiyesi olan birinden kart basması isteniyor, bozuk para olmuyor vs…

Bir kitap ismi de zikredelim; “Teknoloji Kimin Umurunda?” okumayan çok şey kaçırır. Yazarımız Mehmet Doğan.

Fazlasını Oku

Garanti Ürün Geliştirme Teşekkürü

Bugün daha önce yayınlamış olduğum 2 yazıyı Twitter’da paylaştım. Daha önce paylaşmadığımı fark edince ben de paylaşayım dedim. Yazılar;

Yazı 1, Yazı 2

Bugün bana Garanti Ürün Geliştirme Birimi’nden telefon geldi ve teşekkür ettiler. Ben de beni itibar yönetimi için aradıklarını sandım, yazıları kaldırmamı falan talep ederler diye. Aksine ürün geliştirmede çok işlerine yaradığını söylediler ve teşekkür ettiler.

Bu şekilde bir yaklaşım beni ziyadesiyle memnun etti. Onları görüp birime iletebilirler tabi ama beni arayıp teşekkür etmeleri ayrı bir incelikti. Ne kadar SGK’lı olmadığım için kredi vermeseler de biraz daha sevdim Garanti Bankası’nı.

Teşekkürler Garanti.

Garanti Bankası

 

Fazlasını Oku

Görüntülü Derslere Başlıyorum

Öncelikle HTML ve CSS odaklı olacak görüntülü derslere başlıyorum. Ses kartıma güzel bir kondansatörlü mikrofon aldım. Ekranı da mac os x uyumlu bir ekran yakalayıcı ile kayıt edeceğim. Ama öyle kısık sesle “arkadaşlar buraya bunu koyuyoruz, şuraya şunu yazıyoruz” temalı olmayacak, koddan çok işin mantığını başlarda anlatacağım. Belki yarımşar saatlik yaparım, belki de daha çok veya az henüz emin değilim.

Zamanı gelince de PHP’ye başlayacağım. Bu işi kendi başına ne kadar zor öğrenildiğini biliyorum. Ben de bu noktalara parmak basacağım. Yalnız sesime güvenmiyorum zira telefonda falan boru gibi çıkıyor. Ama artık dinleyen arkadaşlar tahammül edecekler.

Artı olarak sesime bir efekt verebilir miyim ona da bakacağım.

Kısa zamanda sizlerleyim.

Fazlasını Oku

Digitürk Play Bilgi Mesajı


Söyleyeceğim çok fazla şey yok. Bilgi mesajları ya direkt verilir, ya da yeşil arka planla. Ama kırmızı arkaplan hataya dalalettir. Genelde bunu böyle öğrenmişiz, bu tip bir yerde de bu alışkanlığı değiştiremeyeceğize göre bu geleneği devam ettirmeliyiz.

Eğer insanlara daha efektif, kullanışlı bir şey sunamıyorsanız, alışılmış olanı kullanın derler. Hiç bilmiyorsan geleneği devam ettir.

Fazlasını Oku

Arayüz Geliştirmede Frameworkler

CSS FrameworksArayüz kodlarken yaptığımız şeyler aslında her projede birbirine benzerdir. W3C uyumlu kodlama yapar ve kurallarına uyarız. reset.css gibi bir dosya ile varsayılan tarayıcı stillerini temizleriz ki baştan beri yazdığımız css kodları tüm tarayıcılarda benzer sonuçlar versin.

Css sıfırlama gibi birçok aracı da kullanırız, bunları kendimiz de kodlamış olabiliriz, farklı bir kişinin kodlaması da olabilir. Mesela tipografi ile ilgili meseleler, css3 ile kullanılan saydamlık ve köşe yuvarlatma stilleri. Bunlar henüz tüm tarayıcılarda desteklenmiyor, tarayıcının kendi belirlediği kodlar yazıyoruz. “moz-border-radius” gibi. Firefox için bunu da eklememiz gerekiyor.

Form elementleri ve görünüşleri de tarayıcıdan tarayıcıya değişebiliyor hatta değişiyor desek daha doğru olur. Tüm tarayıcılarda aynı görüntüyü yakalamak için form elementlerini de biçimlendirmemiz, hatta bazı elementleri kendi interaktif çözümümüzle yeniden tasarlıyoruz.

Eğer css3 ve HTML5 kullanıyorsak media query ile de haşır neşir oluyoruz. Bunun sebebi de responsive, yani farklı ekran boyutlarına göre değişen sayfalar yaratmak için kullanıyoruz. Media query desteklemeyen sayfalar için farklı stil dosyaları yükletiyoruz.

Bunların çoğu için her geliştirici neredeyse benzer şeyleri ufak farklarla yapıyor. Ama kodun tekrar kullanılabilirliği veya gelişen standartlara uygun davranması için güncellenmesi gerekebiliyor. Bir de geliştirici başka bir geliştiricinin stilini anlamak için kodu okumak zorunda kalıyor.

Bu ve bunun gibi sorunlara çözüm üreten css frameworkler geliştirildi. Mesela en popüler olanları Bootstrap, Foundation, Gumby, Skeleton gibi. Bunlar istediğimiz çoğu imkanı bize sunuyor ve kendi içinde tutarlı kodlar içeriyor, sürekli bir geliştirme halindeler.

ArayüzSayfa inşasında genellikle grid based yani iskelet diyebileceğimiz bir sistem kullanıyorlar. örneğin sayfanız sol bölüm ve içerik bölümünen oluşuyorsa, bu elemanların (div)  ikisine 9 ve 3 gibi kaplayacakları alana göre css atıyorsunuz. Daha sonra içerik kısmındaki gösterimler için de benzer atamalar yapıyorsunuz. Bu iskelet classlarını atarken farklı ekran çözünürlüklerine göre farklı classlar da atabiliyorsunuz. Yani responsive yaklaşımına çok az kod yazarak, daha başarılı bir şekilde ulaşıyorsunuz.

Bu tip framworklerin kendi sınıflarına verdiği varsayılan stiller olabiliyor. Ama bu stillere müdahale ederseniz, framework güncellendiğinde güncellemeyi hemen uygulayamayabilirsiniz. Çünkü sizdeki dosya düzenlenmiş ve biçimler verilmiş halde. Yeni dosyayı yüklerseniz kendi stilleriniz kaybolacaktır. Bu nedenle bu sınıfları farklı bir css dosyasında override(üzerine yazma) ederseniz, güncellemeleri çok daha rahatlıkla sisteminize uygulayabilirsiniz.

Bu frameworklerin çoğu grid sistemini desteklemekte, bazıları da (mesela Bootsrap) size kütüphaneler sunarak daha fazlasını vermektedir. Örneğin bir slide, ya da tooltip gösterim scriptleri gibi. Frameworleri inceledikçe sizin tarzınıza uygun olanı seçeceksinizdir.

Fazlasını Oku