Responsive Web Tasarımı Nedir ?

Responsive Web Tasarımı, en basit anlatımıyla bir tasarımın her cihazda güzel gözükmesini sağlayan bir yaklaşımdır ve genellikle Masaüstü, Telefon ve Tablet versiyonları olarak 3 kademeli bir tasarım oluşturulur.

Responsive Tasarım Prensipleri

Responsive Tasarım Prensiblerini temel olarak 3’e ayırabiliriz bunlar;

1. Fluid Grids

Fluid Grids, responsive tasarımın en temel elemanlarından biridir ve adından da anlaşılacağı üzere ekranda yerleştirilmiş bir elementin belirli pixel değerine göre değil ekranın boyutuna göre yerleşmesidir.

Fluid Grids, sayfa açılmadan önce cihazın tipini ve boyutlarını analiz eder ve sayfanın görünüşü bu değerlere göre tekrar düzenler. Günümüzde bilinen bir çok CSS Framework’ü responsive özelliklerinin içinde Fluid Grids barındırır.

2. Media Quaries

Media Quaries, 2000 yılının sonlarında ortaya çıkmış olsa bile, 2012 yılında W3C Standartlarına dahil olmuş bir yaklaşımdır. Temel işlemi kullandığınız cihazın boyutuna göre bazı elementlerin boyutlarını, yerleşimlerini değiştirmek için kullanılır.

3. Flexible Media

Flexible Media, responsive tasarımların en temel yapı taşlarından bir tanesidir ve temel mantığı bir görselin veya medya içeriğinin ekran boyutuna uyumlu olarak boyutunun artması veya azalmasıdır.

Responsive Tasarım Neden Önemlidir ?

Responsive Tasarımlar, bizlere bir çok konuda avantaj sağlar şimdi bu en temel 7 avantajdan bahsetmek gerekirse.

1. User Experience

Eğer web siteniz ne kadar iyi responsive tasarıma sahipse kullanıcılarıda o kadar iyi bir siteyi kullanma tecrübesi yaşatır ve web sitenizi kullanan kullanıcılar sitenizde ne kadar rahat dolaşabiliyorlarsa o kadar çok kullanıcıya sahip olursunuz.

2. Mobil Cihaz Trafiğini Artırır

2017’nin son çeyreği verilerine göre artık insanların %52’si mobil cihaza sahip bu da demek oluyor ki web sitenize girecek bir kullanıcının mobil cihazından girme olasılığı oldukça yüksek. Bu durumda web sitenizin responsive bir tasarıma sahip olmaması aşırı hit kaybına sebep olacaktır.

3. Daha Hızlı Web Sitesi Geliştirme

Eskiden bir web sitesi yaparken mobil cihazlar için ayrı, masaüstü cihazları için ayrı 2 adet web sitesi yapmanız gerekiyordu ve bu hem zaman kaybı hem de para kaybına sebep oluyordu. Artık responsive tasarımlı web siteleri ile tek 1 web sitesi hazırlayıp tüm cihazlar için uygun hale getirebilirsiniz.

4. Kolay Bakım

Eskiden bir web sitesinin mobil cihazlar ve masaüstü cihazlar için ayrı ayrı web siteleri hazırlandığı için sistem üzerinde yapılacak bir değişiklik aslında 2 adet uygulamanın değiştirilmesi anlamına geliyordu ve bu geliştiriciye aşırı iş yükü binmesine ve iş verene ise daha fazla para harcamasına sebep oluyordu fakat responsive web siteleri ile hem geliştirici 1 adet web sitesi üzerinde düzenleme yapıyor ayrıca iş verende tek bir web sitesi için ödeme yapmış oluyor.

5. Çalıntı İçerik Cezası

Eskiden her cihaz için ayrı web siteleri olduğunda bu web sitelerinin linkleride farklı oluyordu ve Google, Bing, Yandex veya Yahoo botları bunları aynı içeriğe sahip 2 farklı web sitesi olarak değerlendirip 2 web sitesinin de SEO açısından kötü etkilenmesine sebep olabiliyordu. Responsive tasarım ile tek bir link üzerinden kullanıcı hem mobil cihazlarından veya masaüstü cihazından aynı içeriğe erişebiliyor ve böylece web site sahipleri “Çalıntı İçerik Cezası” ile uğraşmak zorunda kalmıyor.

6. Daha Kolay Takip Edilebilen Web Trafiği

Daha önceki başlıklardada bahsettiğim gibi hem mobil hem de masaüstü cihazları için ayrı ayrı web sitelere sahipseniz 2 siteninde günlük trafiğini görebilmek için 2 ayrı istatistik ile uğraşması gerekiyordu. Responsive tasarım ile böyle bir dertleride kalmamış oluyor ve web sitesi sahipleri, istatistikleri paylaşan sistemlerinde gelişmesiyle birlikte siteye giren bir kullanıcının hangi cihazdan, hangi ülkeden, hangi saatte girdiğini çok net bir şekilde öğrenebiliyor.

7. Daha İyi SEO

Arama motorları, responsive tasarıma sahip olan web sitelerini her zaman arama sonuçlarında daha üstlere çıkarmaktadır. Bu sebeple web sitenizin Responsive olması her zaman bir avantaj olacaktır.

Nasıl Projeler Geliştirmeliyiz ?

Merhaba arkadaşlar, bu yazımda sizlere bildiğiniz ve ya öğrenme aşamasında olduğunuz programlama dillerin de nasıl projeler geliştirmemiz gerektiğinden bahsedeceğim.

Ben kişisel olarak öğrenme aşamasında proje geliştirirken 3 farklı kriteri dikkate alarak projelerimi geliştirmeye özen gösteririm.

  • Meraklı olduğunuz bir konu üzerinde projeler geliştirin
  • Basit şeylerle başlayın
  • Kendinize ve ya başkasına yararlı olacak projeler geliştirin

Şimdi bunlardan detaylı bir şekilde bahsetmek gerekirse

Meraklı Olduğunuz Bir Konu Üzerinden Projeler Geliştirin

İlginizi çeken bir çok konu olabilir. Video Oyunları oynamak, fotoğraçılık ve ya borsayı takip etmekten hoşlanıyor olabilirsiniz.

Video oyunları oynamaktan hoşlanıyorsanız, bir oyun geliştirebilirsiniz tabi ki bu League of Legends ve ya World Of Warcraft gibi çok kapsamlı oyunlar olmasa bile Flappy Bird, Tic Tac Toe gibi basit oyunlar geliştirebilirsiniz.

Fotoğrafçılık ile ilgileniyorsanız kendinize bir çektiğiniz fotoğrafları yükleceğiniz bir web sitesi geliştirebilirsiniz.

Borsayı takip etmekten hoşlanıyorsanız. Güncel durumları takip etmenizi sağlayan bir sistem geliştirebilirsiniz.

Basit Şeylerle Başlayın

Video oyunu geliştirme konusunda bahsettiğim gibi yeni yeni öğrenmeye başladığınız bir alan da bir anda mükemmel şeyler yapmanız sizi hem zorlar hem de sizi o işi yapmaktan soğutur. Basit uygulamalar geliştirin.

Bir Web geliştiricisi olacaksanız direkt olarak Facebook gibi büyük uygulamalar geliştirmeye çalışmayın. to-do list uygulaması gibi basit uygulamalar üreterek başlayın.

Kendinize veya Başkasına Yararlı Olacak Projeler Geliştirin

Kendinize ve ya başkasının yararlanacağı bir proje geliştirirseniz. Bir gün bir iş görüşmesinde ben şu x uygulamasını geliştirdim ve 10.000 kişi bunu kullandı diyebilirsiniz. Ayrıca yaptığımız işin temelide bir probleme çözüm bulmak olduğu için her zaman kendinizin veya başkalarının yararlanabileceği projeler geliştirmek daha iyi olacaktır.

En son bahsettiğim kriteri gerçekleştirmek gerçekten zordur fakat ilk 2 kriter gerçekten yapılabilecek şeylerdir. Meraklı olduğunuz bir konuda basit uygulamalar geliştirebilirsiniz.

Peki böyle bahsettim ama neler yapabiliriz

to-do list app ve ya basit bir web sitesi geliştirebilirsiniz.

Bir Twitter Clone’u yapabilirsiniz fakat hine basite indirgeyerek sadece Tweet atabileceğimiz ve başkalarını takip edebileceğimiz bir uygulama geliştirebilirsiniz.

Bir video oyunu geliştirmek istiyorsanız, tic tac toe, sudoku, tetris gibi basit oyunlar geliştirerek bu alana giriş yapabilirsiniz.

Umarım bu yazı okuyan herkesin yararına olmuştur. Bu kategoride yazmış olduğum diğer yazılarımı okumak isterseniz buraya tıklayabilirsiniz.

API Nedir ?

Merhaba arkadaşlar bu yazımda sizlere API teriminin genel ve web geliştirme özelinde ne demek olduğundan bahsedeceğim.

API, Uygulama Programlama Arayüzü (Application Programming Interface) anlamına gelir. Bu da bir uygulamanın başka bir uygulama üzerinden işlem yapmasının biraz daha havalı bir söylemidir.

Şimdi API’ın hayatımızın içinden bir örnek ile anlatmak gerekirse. Bir lokantaya gittiğinizi varsayın. Lokantaya girdikten sonra direkt olarak şefin yanına gidip ne istediğinizi söylemezsiniz öncesinde sipariş vermek için menüye bakarsınız. Buradaki menü aslında API’dır. Size uygulama üzerinden hangi işlemleri yapmak istediğinizi seçmenizi sağlar. Yani siparişinizi verdiğiniz de size geri dönüş olarak yemeğinizi getireceklerdir buda API üzerinden aldığımız veriler olacaktır ve sadece menü üzerinden bir veri alacağımız için APIlar güvenli olacaktır.

Web geliştiricisi olarak karşınıza en çok çıkacak API türü RESTdir ve genel olarak her projede karşınıza çıkacak diğer bir türü bir kütüphane aracılığıyla projenize eklediğiniz APIlar olacaktır.

Öncelikle genel olarak karşımıza REST olarak çıkacak Web APIlarından bahsetmek gerekirse. REST API bir URL üzerinden sizin belirli verilere erişmenize ve hine kullandığınız sistem üzerinde bazı verilere müdahale edilmesine izin verebilir. Örnek vermek gerekirse bir REST API ile bir kullanıcı adını güncelleyebilirsiniz fakat bir şifreyi değiştiremezsiniz hine aynı şekilde REST API üzerinden kullanıcılar hakkında veriler alabilirsiniz ama bu kullanıcıların şifrelerine erişemezsiniz. Bu şekilde de bu sunucular içerdeki verilerin güvenliğini sağlıyor ve sizin kendi uygulamanızı geliştirmeniz de sizlere yardımcı oluyor.

Diğer bahsetmek istediğim tür ise genel olarak API olarak adlandırılmasa bile teknik olarak API olan projenize kütüphane ekleme işlemidir. Bu API türü ise daha önceden tanımlanmış methodları kullanarak sizlere hine daha önceden tanımlanmış spesifik veriler geri döndürür.

APIların en önemli özelliği bizlere sadece erişmek istediğimiz şeyleri vermesi ve geriye kalan her şeyi ellerinden geldiğince gizlemeleridir. Böylece APIlar olabildiğince güvenli olmuş olur. Ayrıca kendinizi bu API’ya tanıtmak ve kimin bu API’a erişmek istediğini göstermek için bir token’a ihtiyacımız vardır ve bu tokenlar sayesinde API üzerinden verilere erişmek isteyen kişilerin ulaşmaya çalıştıkları verileri sınırlanabilir.

API kullanımının genel mantığı ise erişilmek istenen veriye en kolay ve en güvenli şekilde ulaşılmasını sağlamaktır.

Ayrıca genel olarak teknik bilgiler verdiğim diğer yazılarımı merak ediyorsanız buraya tıklayabilirsiniz.

Web Geliştirmeye Başlamadan Önce Bilmeniz Gereken 12 Şey

Web geliştirmeye başlarken keşke daha önceden bilseydim dediğim birçok şey vardı. Geriye baktığımda, bir çok beklentim gerçekle örtüşmüyordu. Bu yazım da sizlere bu web geliştiricisi olarak bir kariyere başlamadan veya daha yeni başlamışken bilmeniz gereken 12 şeyden bahsedeceğim.

Programlama için bir Diplomaya İhtiyacınız YOK

Programlamaya başlamak için bir diplomaya ihtiyacınız yok. Arayacağınız çoğu şeyi internet üzerinde bulabilirsiniz. Biraz internetin yardımıyla kendi kendinize programlamayı öğretebilirsiniz.

Googlemak Bir Yetenek

Web geliştirmeye yeni başladıysanız, her problemi çözecek yeterliliğe sahip olmayabilirsiniz. Bu çok normal ve hiçbir zaman buna sahip olamayacağınız anlamına gelmez. Google üzerinde düzgün araştırmayı yapmak size çok zaman kazandıracaktır.

Her şeyi Öğrenemezsiniz

Öğrenicek çok fazla şey var. Sadece Front-end veya Back-end üzerinde hangi teknolojiler üzerinde uğraşmak istediğinizi araştırın. Karşınıza çıkan her teknolojiyi öğrenemezsiniz ve yüksek ihtimal hepsini öğrenmek zorundada değilsiniz. Sadece bu alanda şirketlerin son zamanlarda hangi teknolojilere önem verdiğini inceleyin.

Basit Kod Yazmak Çok Zordur

Çoğu yazılımcı, çok garip kodlar yazar ve bunu diğer yazılımcılara ne kadar iyi kod yazdıklarını göstermek için yaparlar. Aslında bunu yapmamalısınız. Yazdığınız kodu olabildiğince basit tutmalısınız.

Düzgün Testler için Zaman Yok

Kendi tecrübelerimden gördüğüm kadarıyla, çoğu geliştirici kendi yazılımını test etme aşamasında biraz tembelleşiyorlar. Çoğu geliştirici kabul eder ki test aşaması yaptığınız işin en az eğlenceli olduğu kısımdır ama günün sonunda bizler birer yazılımcıyız ve biz bir şeyler yapmaya çalışıyoruz bir şeyleri bozmayı değil.

Eğer test işlemlerini düzgün bir şekilde yapmazsanız çoğu zamanınızı yazılımınızda ki ölü yazılımlar uğraşmak zorunda kalıyorsunuz.

Zaman Çizelgeniz Asla Gerçeği ile Birebir Olmaz

Yazılıma yeni başladığınız zaman sadece bazı şeyleri düzeltmek istiyorsunuz ve eğer kodunuz çalışıyorsa, tamam oldu diyorsunuz. Tecrübesiz geliştiriciler iyi bir yazılım ile çalışan bir yazılım arasındaki farkı bilmiyorlar ve ikisinin aynı şey olduğunu düşünüyorlar fakat kendinizi geliştirip eskiden yazdığınız kodlara baktığınız zaman “Gerçekten ben bu spagetti kodunu yazdım mı ?” diye söylenmeye başlıyorsunuz. Bu tarz durumlarda yapmanız gereken tek bir şey var. Güzel bir kahkaha atın ve önceden yapmış olduğunuz dağınıklığı temizleyin.

Bug Ararken Çok Zaman Harcıyorsunuz

Kodumuzu debug etmek işimizin büyük bir parçası. Bugsuz bir kod yazmak yeni bir geliştirici olduğunuzu varsayarsak neredeyse imkansız. Debug işlemin çok fazla vakit çalmasının sebebi tecrübesiz yazılımcıların nereye bakacağını hatta bazı zamanlarda neye bakacağını bilmemesinden kaynaklanıyor. En kötü kısmı ise bu bugları sizin kendinizin kodlaması.

Internet Explorer Yayımlanmış En Kötü Web Tarayıcısıdır

Internet Explorer, yani bilinen diğer adıyla Internet Exploder yazdığınız her CSS kod satırı için sizi kötü hissetirecektir. Çok basit CSS kodları bile Internet Explorer’da kötü gözükecektir veya kaymalar olacaktır. Tam da bu zamanlarda neden bir çok tarayıcı var diye kendinize soracaksınız fakat şanslısınız ki bir çok şirket sadece IE11 sürümünü destekleyen CSS kodlarınızı görmek isteyeceklerdir.

Her Şeyi Hatırlamak Zorunda Değilsiniz

Programcı olmak tamamen bir bilgiyi uygulamaktır. Her şeyi akılda tutmak için de bir sebeb yoktur. Her zaman internetten kaynaklara bakabilirsiniz. Sadece nerede doğru kaynağı bulacağınızı bilmelisiniz. Akılda kalma durumu ise tecrübelendikçe olacak bir şeydir.

İyi Bir Problem Çözücü Olmalısınız

Ve yaratıcı olmalısınız. Programlama tamamen problem çözme ile alakalıdır. Bir problem bir çok farklı şekilde çözülebilir. Problemi çözmek için en etkili yolu bulmak ise tamamen sizin yaratıcılığına kalıyor.

Responsive Siteler Yapmak Acı Verici Olacak

Bir web sitesinin tüm cihazlarda mükemmel gözükmesi gerçekten acı verici bir durum olabilir. Bir çok tarayıcı ve cihaz olduğunu düşünürsek öyle ya da böyle bir kombinasyonda sitenizin kötü gözükebileceğini aklınızda bulundurmalısınız.

Tekerleği Tekrar İcat Etmeyin

Genel bir özelliği kodlarken, öncesinde GitHub’u bir yoklayın. Yüksek bir ihtimalle popüler olan stabil bir kütüphane ile karşılaşacaksınız. Güzel bir dökümantasyonu olan aktif projelere bakın ve eğer eklemek istediğiniz bir ekstra özellik varsa merqe isteği veya projeyi forklaya bileceğinizi unutmayın.