CategoryGenel

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.

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.

Front-End Nedir ? Back-End Nedir ?

Merhaba arkadaşlar, bu yazımda sizlere Front-End ve Back-end olarak adlandırdığımız 2 terimin ne olduğunu açıklayacağım.

Front-End Nedir ?

Front-end, Türkçe haliyle Ön Yüz olarak çevirdiğimiz bir terimdir. Geliştirdiğimiz herhangi bir uygulamanın tasarımsal kısmını oluşturduğumuz alandır yani kullanıcıların gördüğü ve etkileşime geçtiği yer bir projenin Front-end kısmıdır. Bu kısımları geliştirmekle uğraşan kişilere ise Front-End Developer olarak adlandırırız.

Web Geliştiricileri üzerinden konuşacak olursak bir Front-End Web Developer, HTML, CSS ve Javascript gibi teknolojilere hakim olması gerekmektedir. Bunların haricinde Angular, React, Vue.js gibi teknolojiler ise yakın zaman içerisinde Front-End Developerlar tarafından fazlaca kullanılır.

Peki iyi bir Front-End Developer’ın yapması gereken şeyler nelerdir ? diye soracak olursanız. UI(User Interface) ve UX(User Experience) gibi alanlara hakim olmalısınız yani tasarladığınız bir uygulamayı kullanıcı girdiği anda ekstra bir yönergeye ihtiyacı olmadan rahatça kullanabilmeli ve anlayabilmelidir.

Back-End Nedir ?

Back-end, Türkçe haliyle Arka Yüz olarak çevirdiğimiz bir terimdir. Geliştirdiğimiz herhangi bir uygulamanın veritabanı bağlantıları, API’ları çalışmasını sağlayan alandır yani bir uygulamada kayıt ol veya giriş yap tuşuna bastıktan sonra kullanıcıya bir hata mesajı, başarılı bir şekilde kayıt oldunuz mesajı veya giriş yaptıktan sonra karşısına çıkacak içerikleri görmesini sağlayan alan Back-end’dir. Kendini Back-end Developer olarak tanımlayan kişiler ise herhangi bir uygulamanın arka planında yapılan işlemleri, güvenlik önlemleri, kontrolleri kodlayıp sistemin düzgün bir şekilde çalışmasını sağlayacak kişilerdir yani Front-End Developerlar bizim gözümüze hoş olacak tasarımlar yapmakla uğraşırken Back-End Developerlar ise uygulamanın görünmeyen yüzünü hazırlamakla uğraşırlar.

Back-End Web Developerlar, PHP, ASP.NET, Django, Node.JS, Ruby, JSP gibi teknolojiler üzerinde yoğunlaşabilirler. Ayrıca PHP, Ruby ve JSP programlama dillerini ile geliştirilmiş Frameworkleri öğrenerek daha rahat bir şekilde uygulama geliştirebilirler.

Özet,

Front-End, bir uygulamanın kullanıcının gördüğü yüzünü hazırlarken. Back-End ise uygulamanın görünmeyen yüzünü hazırlarlar. Tabi ki bu iki alandada kendinizi geliştirerek kendinizi Full Stack Developer olarak da tanımlayabilirsiniz. Bu yazımı beğendiyseniz ve bu tarz da yazdığım diğer yazılarımıda merak ediyorsanız buraya tıklayabilirsiniz.

htaccess Dosyasi Nedir ? Ne İşe Yarar

Merhaba arkadaşlar bu yazımda sizlere .htaccess dosyasının ne olduğundan ve ne işe yaradığından bahsetmek istiyorum.

.htaccess Nedir ? Ne işe yarar ?

hypertext access olarak da bilinen .htaccess dosyası web sunucusunu yapılandırmak için kullanılan. Bazı web serverler tarafından desteklenen dizin seviyesinde yapılandırma yapmamızı sağlayan bir dosyadır. htaccess dosyası ile bir dizine erişmeyi engelleyebilir ve ya şifre ile korunmasını sağlayabilirsiniz. Ayrıca web sunucusunun öntanımlı kurallarını geçersiz kılıp kendi kurallarımızı yapabiliriz. Genel olarak SEF Link olarak adlandırdığımız SEO Friendly Linkler oluşturmak için uğrayacağımız bu dosya aslında web sunucumuz üzerinde önemli değişiklikler yapmamızı sağlayan bir dosyadır.

.htaccess ile Ne Yapabiliriz

htaccess dosyası ile

Yetkilendirme ve Kimlik Doğrulama

htaccess dosyası kullanılarak bir dizin ve ya dosya şifre ile koruma altına alınabilinir. Bu şifreler .htpwd dosyası içinde saklanır.

Link Yönlendirme (URL Rewriting)

Ayrıca bu dosya ile linklerimizi manipüle edebiliriz ve SEF Link yani SEO Friendly Link adını verdiğimiz linkler oluşturabiliriz. Buna basit bir açıklama getirmek gerekirse.

aydincanaltun.com üzerinde genel olarak link yapisi aydincanaltun.com/makale-adi şeklindedir ama normalde PHP ile bu işlemi Routing kullanmadan yapmaya kalkışırsak her yazı eklediğimde sisteme yeni bir yazı eklemem gerekir fakat bunu yapmak hem sunucuya yük bindirir hem de bir yerden sonra karmaşık bir hal alır. Bunun yerine .htaccess dosyası ile URL Rewriting yaparak yeni linklerimizi çok basit bir şekilde yapabiliriz.

Dosya ve Dizin Erişimi Engelleme

Bazı dosyaları kullanıcılarımızın erişmesini engellemek isteyebiliriz ve ya sadece belirli IP adresine sahip kullanıcıların girmesini isteyebiliriz. Bu tarz işlemleri de .htaccess dosyası yardımıyla yapabiliriz.

Dizin Listeleme

Bilirsiniz ki sitenizde index.html ve ya index.php dosyası varsa direkt olarak internet sitesinin adresini tarayıcınıza girdiğinde bu dosyalardan biri çalışır. İşte bu işlemi bile .htaccess yardımı ile değiştirebiliriz.

Özel Hata Mesajları

404, 303 gibi hata dosyaları bildiğiniz üzere siz bir tasarım yapsanız bile sunucunuza bunu göstermeden aktif olarak çalışmaz. Kendi 404, 303 hata sayfalarınızı sisteme tanıtmak için de .htaccess dosyasından yararlanmanız gerekiyor.

MIME/TYPES

Yakın zamanda sizlere MIME Tiplerinden bahsetmiştim. Bazı MIME Tipleri sunucunuzda tanımlı olmayabilir ve ya yeni bir uygulama geliştirmişsinizdir ve bu dosyanın kendine has bir uzantısı vardır işte bu dosyalarıda sunucunuza tanıtmak için .htacces’e bu dosyanın MIME Tipini tanımlayarak sunucunuza bu dosyayı tanımlamış olursunuz.

Özet,

Bu yazımda sizlere htaccess dosyasının ne olduğundan, kullanım alanlarından bahsettim. htaccess web sunucumuzu dizin düzeyinde yapılandırma işlemleri için kullanılan ve bazı web serverleri tarafından desteklenen bir sunucu yapılandırma dosyasıdır ve kendi sunucumuzu özelleştirmek isterken bu dosyadan yararlanırız.

Bu yazımı beğendiyseniz ve Genel kategorisinde yazmış olduğum diğer yazılarımı merak ediyorsanız buraya tıklayabilirsiniz.