CategoryProgramlama Dilleri

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.

Az Bilinen ama Çok İşlevi Olan HTML Etiketleri

Merhaba arkadaşlar kısa bir süre önce keşfetmiş olduğum 3 adet HTML etiketinden ve bu HTML etiketlerinin ne işe yaradıklarından bahsetmek istiyorum.

Bahsedeceğim HTML etiketleri,

  • datalist
  • details
  • inputmode

Datalist Nedir ?

Datalist ile arama yapılabilinen inputlar oluşturabiliriz. Kullanımı şu şekildedir.

<form>
    <label for="dataList">Arama Yapınız:</label>
    <input list="deneme" name="dataList" />
    <datalist id="deneme">
      <option value="Deneme 1">
      <option value="Deneme 2">
      <option value="Deneme 3">
      <option value="Deneme 4">
      <option value="Deneme 5">
      <option value="Deneme 6">
      <option value="Deneme 7">
      <option value="Deneme 8">
   </datalist>
</form>

şeklinde kullanabilirsiniz bu bize görüntü olarak şöyle bir çıktı verecektir.

Bu şekilde dropdown aranabilen aramalar yapabiliriz. Bu HTML özelliğine şu tarayıcılar destek vermektedir.

Details Nedir ?

Details, elementi ayrıca içinde 2 adet alt element barındırması zorunlu olan bir elementtir bu elemenlerden ilki summary ikincisi ise p elementidir. Bu element aslında Javascript ile yapabileceğimiz akordiyon uygulamasının Javascript kullanmadan bu işlemi yapmamızı sağlıyor. Kullanımına bir örnek olarak

<details open>
   <summary>Deneme 1</summary>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illo cum vero doloremque quos, dicta temporibus in, tempora expedita a incidunt, nostrum minus! Temporibus accusamus alias quibusdam esse laborum ex perspiciatis.</p>
</details>
            
<details>
   <summary>Deneme 2</summary>
   <p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illo cum vero doloremque quos, dicta temporibus in, tempora expedita a incidunt, nostrum minus! Temporibus accusamus alias quibusdam esse laborum ex perspiciatis.</p>
</details>
            
<details>
   <summary>Deneme 3</summary>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illo cum vero doloremque quos, dicta temporibus in, tempora expedita a incidunt, nostrum minus! Temporibus accusamus alias quibusdam esse laborum ex perspiciatis.</p>
</details>
            
<details>
   <summary>Deneme 4</summary>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illo cum vero doloremque quos, dicta temporibus in, tempora expedita a incidunt, nostrum minus! Temporibus accusamus alias quibusdam esse laborum ex perspiciatis.</p>
</details>

Bunun çıktısı şu şekilde olacaktır

Bu elementin tarayıcı desteği ise şu şekilde olacaktır.

Inputmode Nedir ?

inputmode bir HTML element değil ve aslında masaüstü için herhangi bir şey ifade etmiyor fakat mobil cihazlar için inputmode’a girilen değere göre açılan klavye değişmektedir.

Genel olarak şöyle bir kullanımı vardır

<input inputmode="value">

burada value yerine yazabileceğimiz işinize yarayacak 4 tanesinden bahsedeceğim.

  • numeric -> Numaradan oluşan klavyeyi açar
  • email -> Klavyeyi e-posta adresi girmeye uygun klavye açar
  • tel -> Telefon numarası girmeye uygun için klavye açar
  • url -> URL girmeye uygun klavye açar.

Bu özellik sadece Android için Chrome da ve iOS için Safari ile desteklemektedir. Inputmode’un diğer değerleri hakkında detaylı bilgi almak için buraya tıklayınız.

Özet,

Bu yazımda sizlere genel olarak az bilinen fakat işlevi çok olan 2 adet HTML elementi ve 1 HTML özelliği olan datalist, details ve inputmode’dan bahsettim. Datalist ile dropdown menülü bir arama kutusu yapabilirken. Details ile Javascript ile akordiyon uygulamalarının yaptığı işi yapıyor. inputmode ise mobil cihazlarda o inputun alması gereken değerlere göre farklı klavyeler çıkarmamızı sağlıyor.

Bu yazımı beğendiyseniz ve HTML / CSS hakkında yazmış olduğum diğer yazılarıda merak ediyorsanız buraya tıklayabilirsiniz.

CSS Position Özellikleri

Merhaba arkadaşlar bu yazımda sizlere CSS’deki Position özelliklerinden bahsedeceğim. Position özellikleri bize elementin sayfadaki pozisyonunu belirlememizi sağlamaktadır. Bir elemente Position özelliğini verdikten sonra elemente top, bottom, left ve right gibi özellikler ile sayfadaki final pozisyonunun nasıl olacağını belirtebiliriz.

Position özelliğine 5 farklı değer verebilmekteyiz bunlar,

  • static
  • relative
  • absolute
  • fixed
  • sticky

Şimdi bu özelliklerin ne işe yaradıklarını anlatmak gerekirse

static

Static değeri verilmiş bir element sayfanın olması gerektiği gibi olmasını sağlar. Top, Bottom, Left, Right ve ya z-index özelliklerinin hiç biri bu değer de işlevi yoktur. Bu ön tanımlanmış bir değerdir.

relative

Relative değeri verilmiş element bulunduğu yere göre top, left, bottom, right özellikleri ilerleyecektir. Bunu kelimelerle anlatmak biraz kafanızı karıştırmış olabilir bu yüzden ben size hazırlamış olduğum fotoğraf ile anlatmak istiyorum.

Burada öncelikle ortadaki kutuya position: relative özelliğini verdik ve daha sonra top: 20px left: 20px özelliklerini verdik.

.box-2{
   position: relative;
   top:20px;
   left:20px;
}

absolute

Absolute değeri verilmiş element relative benzer bir özelliği vardır aradaki tek fark artık direkt olarak web sayfasının sol üst tarafı orijin olarak kabul edilir. Yani bir elemente absolute özelliği verirseniz top, left, bottom, right özelliği verdiğimiz de sayfanın sol üst kısmından bu işlemleri verecektir.

.box-2{
   position: absolute;
   top:  20px;
   left: 20px;
}

fixed

Fixed değeri verilmiş element, bu element sayfa yukarı veya aşağı çekilse bile element sayfanın belirlenen kısmında sabit olarak bulunacaktır. Bu elementin bulunacağı yeri top, left, bottom, right özellikleri ile belirleyebiliriz.

Örnek olarak eğer elementin sayfanın sağ alt kısmında bulunmasını istiyorsak şu css kodlarını yazmamız yeterli olacaktır.

.box{
   position: fixed;
   bottom: 0;
   right:  0;
}

kodunu yazdıktan sonra sayfanın sağ altında bulunacak elemente box adlı class değerini verirsek o element sayfanın sağ alt kısmında bulunacaktır.

sticky

Sticky değeri verilmiş bir element, relative ve fixed özellikleri arasında döner. Sayfada bulunduğu yere göre dururken eğer sayfanızı aşağı ve ya yukarı doğru kaydırırken bu elementten kurtulmaya çalıştığınız da fixed özelliği verilmiş bir element gibi davranmaya başlar ve element asıl olduğu yere geldiğinde tekrar relative bir elementmiş gibi davranmaya devam eder.

Buna örnek vermek gerekirse

Gördüğünüz gibi element kendi yerindeyken relative gibi davranırken sayfayı aşağı doğru kaydırmaya başladığımda fixed değeri verilmiş bir element gibi davranmaya başlıyor sayfayı tekrar yukarı kaydırdığımızda ve elementin asıl olması gereken yere geldiğinde tekrar relative olmaya devam ediyor.

Özet,

Bu yazımda sizlere CSS Position özelliklerinden bahsettim. Position özellikleri static, relative, absolute, fixed, sticky olmak üzere 5 farklı değer alabilmektedir. Herhangi bir elemente Position özelliği verilirse bu elemente top, bottom, left ve right gibi özellikler verirken atanan position değerine göre sayfada nasıl bir pozisyonda bulunacağını belirleriz.

Eğer bu yazımı beğendiyseniz ve CSS hakkında yazmış olduğum diğer yazıları merak ediyorsanız buraya tıklayabilirsiniz.

Ayrıca CSS Position Özellikleri hakkında daha detaylı bilgi almak isterseniz buraya tıklayınız.

DataTables Nedir, Nasıl Kurulur, Neler Yapabiliriz ?

Merhaba arkadaşlar bugün sizlere DataTables isimli bir jQuery eklentisinden bahsedeceğim.

DataTables’in ne olduğunu açıklamak gerekirse oluşturduğumuz tablolar üzerinde AJAX kullanmadan veri arama, sayfalama gibi işlemleri yapmamızı sağlıyor daha basit bir şekilde anlatmak gerekirse normalde AJAX, DOM ve SQL ile yapabileceğimiz işleri bunların hiç biri hakkında bilgi ve ya uğraş gerektirmeden bize sunan bir eklenti olduğunu söyleyebiliriz.

DataTables ile Neler Yapabiliriz ?

DataTables ile yapabileceğiniz en temel şeylerden bahsetmek gerekirse

  • Sayfalama
  • Anlık Arama
  • Sütunlar üzerinden sıralama (Tekil ve ya çoğul)
  • Mobil Cihazlara Uyumlu
  • Kolayca Tema Yapılabilinir (Bootstrap 3/4, Semantic UI, Foundation ve DataTables Theme Creator)

bunun haricinde kendisi içinde eklentilerin geliştirilmesine izin veren bir sisteme sahip olması ve açık kaynak kodlu olması da eklentiyi kendimize göre özelleştirebileceğimizi göstermektedir.

Bu saydıklarım haricinde yapabileceğiniz diğer özellikleri de görmek isterseniz buraya tıklayabilirsiniz.

DataTables Nasıl Kurulur/Kullanılır ?

DataTables’i kurmak için 2 adet CSS ve JS dosyalarını sistemimize ekleyip daha sonra basit bir JS kodu ile DataTables’i kullanmaya başlayabiliriz.

CSS / JS CDN

https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css

CSS

https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js

Javascript

Javascript Kodu

$(document).ready( function () {
    $('#myTable').DataTable();
} );

Javascript kodu olarak bahsetmiş olsam bile en başta da söylediğim gibi DataTables bir jQuery eklentisi olduğu için jQuery ile kodlamamız gerekiyor yani bu da DataTables’dan önce jQuery’i de sistemimize eklememiz gerekiyor.

Peki DataTables’den bahsettim hine de bu işleri ben kendim AJAX, DOM ve SQL bilgimle rahatça yaparım diyebilirsiniz fakat dünyadaki Adobe, Sony, Nasa, Tesla, Amazon gibi firmalar dahi DataTables’ı kullanmaya tercih ediyor.

DataTables hakkında daha detaylı bilgi alabilmek için buraya tıklayabilirsiniz.

Özet,

Bu yazımda sizlere DataTables’in ne olduğundan, neler yapabilirsiniz ve nasıl kurabiliriz konularından bahsettim. DataTables ile Tablolar üzerinde herhangi bir ekstra işlem yapmadan tablolar üzerinde arama, sayfalama gibi işlemleri hızlıca yapabiliriz.

Bu yazımı beğendiyseniz ve Javascript hakkında yazmış olduğum diğer yazıları merak ediyorsunuz buraya tıklayınız.