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

Elemanonline.net Kullanıcı Deneyimi Problemi

Elemanonline.net benim de gerek iş bulmak, gerekse iş piyasasını kontrol etmek için kullandığım bir platform. Bugün yaşadığım bir kullanıcı deneyimi probleminden bahsedeceğim. Hem bir örnek olsun, hem de elemanonline.net’e katkımız olsun, o kadar işe girdik çıktık 🙂

Şimdi tablo şu;

Detaylı Arama Sonuç Sayfası
Detaylı Arama Sonuç Sayfası

Peki bu nedir? Ben bu sayfaya yer imlerimden ulaşıyorum. Linki de bu;
adres

 

Yani Bilişim/Bilgisayar kategorisinde ve Kocaeli için verilen ilanları listeleyen sayfa. Her zaman formu tekrar tekrar doldurmak istemiyorum haliyle. Ama burada bir handikap var. #is-ilanları linki ile geldiğim için beni direkt sonuçlara gönderiyor. Arama yapınca da bu böyle oluyor. Karşımda gri bir blok var ve bir şeylere tıklamamı engelliyor. Bunun sebebi de site içi açılır bir pencere. Yani teknik olarak bir pop-up değil ama sitenin geneline tıklanmayı engelleyen bir katman ve üzerinde bu içerik oluyor. Görünüşte pop-up diyebiliriz. Aslında görmem gereken görüntü şuna benzer olmalı;

Pencere

Ama url sonundaki #is-ilanlari direktifi beni direkt olarak sonuçların başladığı alana scroll ediyor. Basit ama önemli bir detay. Zaten daha çok çalışma zamanında yakalanabilecek bir hata. Sadece kullanılabilirlik için bir örnek olması açısından yazdım. Kullanıcılar sitemizde gezerken ne gibi zorluklarla karşılaşabiliyorlar görelim diye.

Fazlasını Oku