Kişisel web tasarım ve kodlama blogu. Web tasarımı ve kodlama araçları ile ilgili bilgiler ve yardımcı dökümanlar.

Kod yazmak sanattır...

gokhankr.com

Blogger tarafından desteklenmektedir.

Tasarım ve Kodlama etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
Tasarım ve Kodlama etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

Vue.js Lifecycle Hooks Anlatımı


Vue.js Lifecycle Hooks

Türkçesi biraz değişik gelebilir ama aslında çok net ve anlaşılabilir bir çevirisi var. "Lifecycle Hooks" yani "Yaşamdöngüsü Kancaları" nedir bunu işleyeceğiz.

Bir örnek ile anlamaya çalışalım, elinizde bir çark var. A, B, C, D noktaları var ve çark döndükçe bu noktalara temas edecek. İşte bu noktaları programın içerisinde çalışan kod blokları olarak alın.

Mesela A fonksiyonu, B fonksiyonu olacak şekilde kabul edelim. A 'ya geldiğinde A içerisindeki kodlar işlenecek sonra da diğerleri. Buna Yaşamdöngüsü diyelim. Şimdi de kodlar çalışırken A ' veya B 'ye uğramadan veya her ikisi arasında bir işlem yapmak istiyorsak ne yaparız ?

Yaşamdöngüsünü bir anlık ta olsa durdurmamız gerekir. İşte burada Kancalar devreye giriyor. Yani A, B, C fonksiyonları çalışırken araya A > A 'dan önce bunu yap > B > C > D 'den önce bunu yap > E şeklinde bu döngüye müdahalede bulunuyoruz.

İşte her Vue örneği aslında bu Yaşamdöngüsü şeklinde çalışıyor ve bizlere bu döngü içerisinde çeşitli yerlere müdahale etme imkanı sunuyor.

Lifecycle Hooks Diyagramı
Öncelikle diyagrama bir göz atalım.

Yukarıdaki diyagram herşeyi açıklıyor aslında. Aşağıda bu diyagram içerisindeki fonksiyonları açıklamasıyla verdim. "before", önce ve "after", sonra demek.

// Uygulama oluşturulmadan önce
beforeCreate()
// Uygulama oluşturulduktan sonra
created()
// Uygulamaya bir etiket mount edilmeden hemen önce
beforeMount()
// Mount edildikten sonra
mounted()
// DOM verisi güncellenmeden hemen önce
beforeUpdate()
// DOM güncellendikten sonra
updated()
// beforeDestroy yani uygulama dağıtılmadan önce
beforeDestroy()
// Uygulama dağıtıldıktan sonra çalışır
destroyed()

Bunların ne olduklarını açıkladık listeledik şimdi detaylarına inelim ve aşama aşama görelim.


  1. beforeCreated() ile uygulama henüz oluşturulmadan önce yani data 'lar ve event 'lerden önce istediğinizi bu fonksiyon içerisinde çalıştırabilirsiniz. 
  2. Bundan sonra da created() yani uygulama oluşturuldu ve bu fonksiyon içerisinde uygulama oluşturulduktan sonra yapılacak bir şey varsa kullanılır.
  3. ve aşağı doğru inerken program bir soru soruyor: "el" var mı? Görüyoruz uygulamada ilk olarak "el" degerini girip etikete bağlıyorduk. Peki ya bağlı değilse ? O zaman program diyor ki uygulama.$mount("#etiket") girildiği zaman devam et. (Hani mount etmenin ikinci yöntemiydi bu($mount("#etiket")))
  4. "el" işlemini sorguladıktan sonra bir soru soruyor "template" degeri ile bir şablon girilmiş mi. Eğer varsa render fonksiyonu ile derle, yoksa "el" ile bağlı olan etikete derle. (Biz başladığımızdan bu yana hep "el" kullandık)
  5. Mount edilmeden hemen bir tık öncesinde beforeMount() fonksiyonuna geçiyor.
  6. Ardından $mount işlemi yapılıyor. DOM verisi listeleniyor ve sonrasında mounted() fonksiyonuna geçiyor. Eğer listeleme tarzında işlemler kullanacaksanız sık kullanacağınız aşama.
  7. Şimdi mounted 'den sonra süreç ikiye ayrılıyor. Birisi diyagramda gördüğünüz üzere beforeUpdate() -> Update(), diğeri de beforeDestroy() -> destroyed()
  8. sayfada bir update işlemi yaparsanız, mesela ürün listelediniz ve "Sil" deyip listeyi db 'den tekrar çekip listelediniz. Sonuç olarak veri değişikliği oldu o zaman beforeUpdate() yani güncellemeden hemen önce ve sonrasında updated() fonksiyonu ile DOM verisi tekrar güncellendikten hemen sonra.
  9. Yukardakilerin hepsi anlaşılır fakat destroy görmediğiniz bir şey. Destroy bir Vue uygulaması üzerinden tüm direktiflerinin, eylemlerinin(events) ve alt çocuk örneklerinin dağıtılması yani kaldırılmasıdır. Örneğin açtığınız etiket içerisindeki tanımladığınız hiç bir eylemi bir daha kullanamazsınız. Ancak bu etiketin boşalması, silinmesi vs. durumu değil. Sadece o etiket üzerindeki işlemlerinizi kullanamazsınız. Listelediğiniz veriler son haliyle orada kalır.

Bir uygulama aşağıdaki şekilde dağıtılır.

uygulama.$destroy()


Bir örnek uygulama ile bu anlatımı da bitireceğim. Baştan aşağı lifecycle hooks ile tasarlanmış bir uygulama hazırladım. Aşağıya kodları ve jsfiddle önizlemesini paylaştım. Sayfa ilk açıldığında beforeCreate -> created çalışacak, "Başlat" dediğimizde $mount edecek, "Değiştir" dediğimizde veri değeri değişecek ve beforeUpdate -> updated çalışacak ardından "Uygulamayı dağıt" denildiğinde $destroy devreye girecek.

Ek olarak belirteyim ben alert() kullandığım için veri değeri güncellenmeden önce uyarı çıkıyor gibi duruyor ancak alert() güncelleme işlemine paralel değil daha erken davranıyor. Bu yüzden veri güncellemesi sonra yapılıyor gibi duruyor.

Bu yazımda burada bitmiş bulunuyor. Bir sonraki yazımda görüşmek üzere...

Vue.js Bileşenler


Vue.js Bileşenler

Bu yazımda Vue Bileşenleri 'ni anlatacağım. Bileşenler sayfa içerisinde kullandığımız hazır şablonlardır. Bileşenler tıpkı bir Vue uygulaması gibi çalışır ancak amaçları farklıdır.
Klasik bir bileşen yapısı aşağıdaki gibidir.
Aslında düşündüğümüz zaman bir web sayfasında her alan bir bileşendir. Mesela sayfanın header kısmı yani <header> etiketi içerisindekiler ile beraber bir bileşendir.

Bileşenleri oluşturur ve tekrar tekrar sayfada kullanırız. Örneğin bir e-ticaret sitesini düşünün her zaman ürünlerin listelendiği bir sayfası ve bu ürünleri sayfa içerisinde bir kart içerisinde göstermek zorunda. Ancak bu kartları hem anasayfada hem de herhangi bir ürün sayfasının alt kısmında diğer ürünler olarak göstermek zorunda. Bunun için her sayfaya bu bileşeni kopyala yapıştır yapmak mı daha doğru yoksa tek bir bileşen haline getirip istediği yere sadece <urun-karti> şeklinde listelemesi mi ?

Tab ki bileşen sistemi öte yandan bu bileşeni tekrar tekrar düzenlediğinde tüm sayfadaki ürün kartları da eşzamanlı olarak bu değişimle birlikte görüntülenecek. Böyle de bir avantajı var.

Bir bileşen aşağıdaki gibi oluşturulur:

Vue JS
Vue.component('urun-karti',
template: '<li>Yepyeni mobilyalar</li>' 
})

<ol>
<!-- Burada urun-karti çağırılacak ve <li> elementi dönecek -->
 <urun-karti></urun-karti>
</ol>


Bu kullanım sade ve sadece tek bir "Yepyeni mobilyalar" çıktısını üretmekten öteye geçemez. İşimizi daha da profesyonelleştirelim.

Burada prob özelliğini kullanacağız ve bir Vue uygulaması içerisindeki bir data 'yı önce bileşen etiketi içerisinde v-bind:xxx şeklinde bağlayacağız ve bunu probs['xxx'] şeklinde bileşen içerisine alacağız.
Tam olarak anlamadıysanız örneği inceleyin.

Vue JS Bileşeni
// Bileşeni oluşturduk
Vue.component('urun-karti', 
// probs ile etiket üzerindeki "veri" attribute 'unu aldık.
props: ['veri'], 
template: '<li>{{ veri.urunIsmi }}</li>' 
})

HTML
<!-- Listelenecek etiketimizi oluşturduk -->
<div id="urunleri-listele">
<ol> 
<!-- Burada önce v-for ile verileri urun 'e attık sonra da v-bind ile "veri" attribute 'una bağladık -->
 <urun-karti v-for="urun in urunler" v-bind:veri="urun"></urun-karti>
</ol>
</div>

Vue JS
//Uygulamamızı oluşturduk ve ürünler adında dizimizi oluşturduk
var uygulama = new Vue({
el: '#urunleri-listele', 
data: { 
urunler: [ 
{ id: 0, urunIsmi : 'Dolap' }, 
{ id: 1, urunIsmi : 'Sandalye' }, 
{ id: 2, urunIsmi : 'Yeni masa gıcır gıcır' } 
})

Bu örneğin çıktısını aşağıdan inceleyebilirsiniz
probs içerisinde farklı attribute 'lar da çağırıp bileşen içerisinde kullanabilirsiniz. Örneğin probs['id','value','class'] şeklinde kullanabilirsiniz.

Bileşenler yazım bu kadar, bundan sonra Lifecycle Hooks(Yaşamdöngüsü Kancaları) 'u anlatacağım. Görüşmek üzere...

Vue.js Koşullar ve Döngüler


Vue.js Koşullar ve Döngüler

Vue
içerisindeki Koşulları ve Döngüleri anlatmaya çalışacağım. Daha önce direktiflerden bahsetmiştim. Şimdi bu iki özellik de birer direktif olarak çalışmakta. Ancak bunlar Vue içerisinde tanımlanmış direktiflerdir.

Koşullar
İf direktifini inceleyelim.

Vue JS
var uygulama = new Vue(
{
el: '#icerik',
data: {
goster: true
}
})

HTML
<div id="icerik">
<span v-if="goster">Görüntüleniyor</span> 
</div>

Yukarıdaki "v-if" örneği:


En basit kullanımı budur. Peki devamını getirelim, yani else, else if kullanalım.

HTML
<div id="icerik">
<span v-if="goster == 1">Deger: 1</span> 
<span v-else-if="goster == 2">Deger: 2</span>
<span v-else">Ne 1, ne de 2</span>
</div>

Döngüler
Döngüleri gösterelim. Uygulama içerisinde bir dizi tanımlayalım ve içerisindeki verileri HTML etiketi içerisinde döndürelim.

Vue JS
var uygulama = new Vue({
el: '#icerik', 
data: { 
veriler: [ 
{ isim: 'Ali' }, 
{ isim: 'Veli' }, 
{ isim: 'Metin' } 
})

HTML
<div id="icerik">
<ol> 
<li v-for="veri in veriler"> {{ veri.isim}} </li> 
</ol>
</div>

yukarıdaki örnekte de verileri içerisindeki veriyi <li> olarak listeleme etiketi içerisinde yazdırdık. Örneği aşağıdan inceleyebilirsiniz.

İsterseniz diziyi anahtarlarıyla beraber yazdırabilirsiniz.

HTML
<div id="icerik" class="p-4">
<p v-for="(veri, key) in veriler">
  <b>{{key}}.</b> {{ veri.isim}} </p>
</div>

Yukarıdaki örneğin çıktısı:

Son olarak söylemek istediğim aynı etiket içerisinde v-if ve v-for direktiflerini beraber kullanmayın.

Tasarımcılara bu konuda cazip gelen iki durum var:

  • <li v-for="kullanıcı in kullanıcılar" v-if="kullanıcı.aktifMi"> bunu bu şekilde değil de kullanıcılar verisini döndürmeden önce aktifKullanicilar diye bir değer oluşturup listelenecekler buraya filtre ile atılabilir sonra listelenebilir.(filterelere değineceğiz anlaşılması açısından değindim)
  • ikincisi bir li elemanında if ve for kullanacaksanız öncesinde bir etiket açın if direktifini girin daha sonrasında li içerisinde for kullanarak verilerinizi listeleyin. Örn:

<ul v-if="goster">
      <li v-for="kullanici in kullanicilar">{{kullanici.isim}}</li>
</ul>


Bu dersimiz de burada bitti. Bundan sonra Components yani Bileşenleri işleyeceğiz. Görüşmek üzere...


Vue.js Direktifler


Vue.js Direktifler

Vue.js
ile bir elemente özellik atamak veya kontrol sağlamak için direktifler kullanılır. Mesela önceki dersimizde method 'lardan bahsetmiştim. onclick ve onfocus gibi özellikleri direktif olarak kullanıyoruz.

v-html
Örneğin bir Vue uygulamasında bir data içerisinde bir HTML kodu bulunsun.

Vue JS
var uygulama = new Vue({
el: "#anasayfa",
data:{
      veriHTML: "<b>Gökhan</b>"
}
})

Şimdi veriHTML değerini {{ veriHTML }} olarak yazdırabiliriz ancak sayfada HTML olarak değil string olarak görüntülenecektir. Bunun için "v-html" direktifini kullanacağız.

HTML
<div id="anasayfa">
      <p v-html="veriHTML"></p>
</div>

Böylece değeri HTML kodu olarak p etiketi içerisinde görüntüledik.

v-show
Bir başka direktif de "v-show" dur. Eğer veri true dönerse etiketi görüntüleyecektir, false dönerse etiket yok olacaktır. v-show ekranda display:block|none; işlemi görecektir. v-if gibi etiketi komple ortadan kaldırmaz.

Vue JS
var uygulama = new Vue({
el: "#anasayfa",
data:{
      veri1: "Merhaba",
      veri2: true,
      veri3: false
}
})

HTML
<div id="anasayfa">
      <p v-show="veri1">{{ veri1 }}</p>
      <p v-show="veri2">{{ veri2}}</p>      <p v-show="veri3">Çalışmayacak</p>
</div>

  • veri1 görüntülenecek ve Merhaba yazacaktır.
  • veri2 görüntülenecek ve true yazacaktır.
  • veri3 ise false olduğu için görüntülenmeyecektir.

v-model
Bir diğer direktif v-model bu direktif ile reaktif olarak input girişi yapılmaktadır.

Vue JS
var uygulama = new Vue({
el: "#anasayfa",
data:{
      inputGiris: "Merhaba"
}
})

HTML
<div id="anasayfa">
      <input type="text" v-model="inputGiris" />
      <p>{{ inputGiris }}</p>
</div>


v-model input örneği:
v-bind
Son olarak yoğun olarak kullanacağımız v-bind direktifinden bahsedeceğim. v-bind ile bir element içerisinde istediğimiz attribute 'a işlem yapabiliyoruz ve istersek isteğe bağlı attr değeri ekleyebiliyoruz.

Vue JS
var uygulama = new Vue({
el: "#anasayfa",
data:{
      sinifAdi: "Merhaba",
      idDegeri: "paragrafim"
}
})


HTML
<div id="anasayfa">
<p v-bind:class="sinifAdi" v-bind:id="idDegeri">Gökhan Korul</p>
</div>

İstersek class ataması yaparken bir if koşulu da kullanabiliriz. Mesela 2 adet butonumuz var hangisi tıkalırsa ona aktif(active) sınıfı eklemek istiyoruz.

Vue JS
var uygulama = new Vue({
el: "#anasayfa",
data:{
      btn1:1,
      btn2:2
},
methods: {
aktifEt(id) {
      if (id == 1) {
        this.btn1 = 1
        this.btn2 = 0
        } else if (id == 2) {
        this.btn2 = 1
        this.btn1 = 0
        }
      }
}
})

HTML
<div id="anasayfa" class="p-2">
   <a href="#"
   v-bind:class="[btn1 == 1 ? 'active' : '']"
   v-on:click="aktifEt(1)"
   class="btn btn-primary btn-lg">
      Anasayfa
   </a>
   <a href="#"
   v-bind:class="[btn2 == 1 ? 'active' : '']" 
   v-on:click="aktifEt(2)"
   class="btn btn-primary btn-lg">
      Ürünler
   </a>
</div>

Burada btn1 ve btn2 adında iki data verisi oluşturduk ve bunlardan hangisi 1 ise o class içerisinde active yazacak şeklinde a etiketi v-bind:class içerisinde koşul oluşturduk. Tabiiki böyle kullanmayın :) Sadece örnek olsun diye böyle kodladım sizin daha usta örnekler yapacağınızdan eminim.

Butonu akif et örneği:


Bir sonraki yazımda Koşullardan ve Döngülerden bahsedeceğim. Görüşmek üzere...

Vue.js data ve methods


Vue.js data ve method 'lar


Klasik bir Vue uygulamasının nasıl oluşturulduğunu öğrenmiştik. Şimdi tekrar Vue örneğini bir hatırlayalım.

var vm = new Vue({ 
// özellikler 
})

Daha sonra verilerimizin tamamını içerisinde barındıracağımız data nesnesini ekleyelim.

var vm = new Vue({ 
data {
      veri:" "
})


Data ve Method 'lar
Yukarıda data içerisinde veri adında bir değer oluşturduk ve şimdi bu örneğe bazı veriler eklemeye çalışalım.

vm.veri = 2;

Bu şekilde veri 'ye "2" değerini verdik. Vue reaktif olduğu için hemen tepki verecektir. Örneğin bir önceki derste de anlattığım gibi {{ veri }} şeklinde sayfanın herhangi bir yerinde bu data 'yı kullanacak olsaydık anlık olarak sayfada da "2" yazdığını görecektik.

Aynı şekilde bir Vue uygulaması içerisinden bir data 'ya ulaşmak isterseniz aşağıdaki örneği de kullanabilirsiniz.

vm.$data.veri

Ayrıntılara ilerde değineceğiz. Bu uygulamaya dışardan bir değer almak istersek de aşağıdaki gibi bir örnek uygulayabiliriz.

var deger = "Merhaba";

var vm = new Vue({ 
data {
      veri: deger 
})

Değer değişkenini veri içerisine attık. 

Şimdi ise method 'lara değinelim. Bildiğimiz onclick ve onfocus gibi olayları Vue 'da methods olarak kullanırız ve klasik olarak JS ile yaptığımız işlerin aynısını Vue örneği içerisinde yaparız. Bir onclick olayı örneği yapalım.

Vue JS
var vm = new Vue({
el:"#uygulama",
data {
      veri:"Merhaba"
})

HTML
<div id="uygulama"> 
<p>{{ veri }}</p> 
<button v-on:click="veri = 'Selam'">Değiştir</button> 
</div>

Yukarıdaki örnekte "Değiştir" tıklanınca bir event tetiklenecek ve method kullanmış olacağız. Böylece veri değişkenine "Selam" değerini vermiş olacağız. 

Şimdi daha detaylı olarak onclick içerisinde bir fonksiyon devreye sokalım. Bunun için Vue içerisine data 'nın hemen altına methods:{ } nesnesini ekliyoruz ve nesne parantezlerini açıyoruz. Bundan sonra fonksiyonlarımız burada oluşturacağız. Bir örnek:

 
Vue JS
var vm = new Vue({
el:"#uygulama",
data {
      veri:"Merhaba"
},
methods:{
degistir() {
   this.veri = "Selam ben Gökhan";
  }
}
})

HTML
<div id="uygulama"> 
<p>{{ veri }}</p> 
<button v-on:click="degistir()">Değiştir</button> 
</div>

Şimdi de butona tıkladığımızda "Selam ben Gökhan" yazacaktır ve aynı işlemi bu sefer bir fonksiyon(method) tanımlayarak yaptık. Burada son olarak dikkat etmişsinizdir, data içerisindeki verilere ulaşmak için uygulama içerisinde her zaman this.veri şeklinde ulaşırız.
Bu dersimizde burada bitmiş bulunuyor. Görüşmek üzere...

CSS Conic Gradient Kullanımı


Giriş
Diğer bir çok gradient efekti gibi henüz yeni sayılabilecek farklı bir gradient özelliği. Conical Gradient henüz tarayıcıları çoğu tarafından desteklenmese de popüler tarayıcılar arasında kullanılabilecek bir özellik.

Örneklerle gösterelim,
İstediğiniz kadar renk atayabilirsiniz. Soldan başlayarak en son renk paletine kadar dairesel bir şekil ile karşımıza çıkmakta.




Sözdizimi
Conic Gradient aşağıdaki şekilde parametre alır.

conic-gradient() = conic-gradient(

 [ from <açı> ]? [ at <pozisyon> ]?, <renkler> 
)


Aşağıda en basit haliyle kullanımı örnek gösterilmiştir

.conic-gradient { 
background: conic-gradient(#fff, #000); 
}

from <açı> yani örnek olarak from 0deg veya from 30deg şeklindeki değerler ile renklerin hangi açıdan itibaren başlayacağını belirtiriz.

at <pozisyon> yani örnek olarak at 50% 50% dediğimiz zaman soldaki yatay eksende sağdaki de dikey eksende merkezi noktanın konumunu belirler.

Aşağıda tüm örnekleri görüntüleyebilirsiniz.

.conic-gradient {
/* Basit hali */
background-image: conic-gradient(#fff, #000); 
/* Başlangıç konumunu belirle */ 
background: conic-gradient(at 50% 50%, #fff, #000); 
/* Başlangıç açısını belirle */ 
background: conic-gradient(from 0deg, #fff, #000); 
/* Başlangıç noktası ve başlangıç konumunu bir arada belirle */ 
background: conic-gradient(from 0deg at center, #fff, #000); 
/* Renklerin açılarını yüzde olarak belirle */ 
background: conic-gradient(#fff 0%, #000 100%); 
/* Başlangıç ​​renginin açısını derece cinsinden ve bitiş rengini dairenin tam bir dönüşü ile bitir */
background: conic-gradient(#fff 0deg, #000 1turn); 
}

Eğer açı değeri girmezsek 0 dan 360 dereceye kadar keskin bir çizgi oluşturur. Burada daha yumuşak bir görüntü elde etmek için başlangıç ve bitiş renklerini aynı yapabilirsiniz. Böylece örneğin yukarıdan bakınca koni görünümü veren bir görüntü elde edebilirsiniz.

Aşağıdaki örnekteki gibi bir görüntü elde edip animasyon ile döndür komutu vererek bir Mac efekti verebilirsiniz.

.conic-gradient { 
background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red); 
}




Renkler arasında sabitleme sayısal değerleri girerek daha keskin görünümler elde edebilirsiniz.

.conic-gradient { 
background: conic-gradient(lime 40%, yellow 0 70%, red 0); 
}



Conic gradient 'in tarayıcı desteği listesine aşağıdan ulaşabilirsiniz.
https://caniuse.com/#search=conic%20gradient

Daha deylı bilgi için W3C resmi sayfasına gözatabilirsiniz.
https://www.w3.org/TR/css-images-4/#conic-gradients

Profesyonel Bir Tasarım Nasıl Olmalı ?


Arayüz geliştiriciliği kolay bir iş değildir. Bir Web Tasarımcısı olmak kodlamayı, tasarlamayı, düzenlemeyi, planlamayı ve daha bir çok alanı bir arada yürütmeyi becerebilen kişidir. Bu durum da saydığımız bu alanlar içinde usta olmayı gerektirir.

Tasarımın bazı kuralları vardır. Bu kurallar hem geliştiricinin hem de kullanıcının yararına olan çalışmalardır. Aynı zamanda bu kurallar tasarımın suitable yani "satılabilirliğini" gösterir. Gelin bu önemli kuralları hep beraber gözden geçirelim.

1. Kodlamada İşlevsellik


Tasarımın en önemli noktalarından birisi neyi nerede kullanacağımızı tam olarak bilmektir. Örneğin HTML 'de h1 etiketi başlığı içerir, p ise paragrafı siz burada her ikisini de p veya h1-2-3 gibi etiketler ile tasarlayabilirsiniz. Ancak bu işlem düzene aykırı olur.


2. Tasarımda Tutumluluk

Belki de en çok önemsemediğimiz alan budur. Bir tasarımcı, proje üzerinde gereksiz kod yazılımından kaçınmalıdır.

Tasarımda hangi kodu nerede kullanacağımızı iyi bilmeliyiz. Aksi taktirde 1-2 satır yerine 5-10 satır kodlamalarla tasarımı karmaşık ve düzensiz bir hale getirebiliriz. Örneğin elimizde iki adet kalın yazılmış cümle olsun.

<b>Gokhan</b>
<b>Gokhan</b>


Bu iki kelime sayfada şu şekilde görünecektir:
GokhanGokhan

Peki bu iki kelimeyi birer nesne olarak düşünün. Birinci nesneyi üste çıkarmak için ne yapardınız.
En bilindik şekli ile float:left; & width:100%;

Ama kolayca şunu da verebilirdiniz display:block; ve aynı işlemi yapacaktır.


3. HTML Validate


HTML 'de kodlamanın bir yapısı vardır. Bu yapıya aykırı bir düzende kodlama yapmak yanlıştır. BU yapıyı basitçe ifade etmek gerekirse örneğin bir listeleme(ul-ol) elemanı içerisinde form(input-textarea) elemanı kullanamazsınız. Bu HTML 'in standardına aykırıdır.

Aynı şekilde kodlama yaparken <style> etiketini body tag 'ı içerisinde kullanamazsınız. Bu etiket yalnızca head tag 'ı içerisinde kullanılır.

Bir diğer unsur da etiket kapatırken yaptığımız hatalardır. Örneğin div etiketi içerisinde bir link tanımlayalım ancak o anki esnada şöyle bir yanlış yaptınız.

<div><b>Detaylı Bilgi için: </b><a href="#">  Buraya Tıklayınız...  </div></a>

Normalde div etiketi içinde olması gereken a etiketi dışarda kaldı. Bu da yanlış bir kodlamadır ve tarayıcılar bu hataları bastırsa da kodlama içeriği düzeltilmelidir. Bu yanlışları önlemenin en kolay yolu da gelişmiş bir IDE kullanmaktır.


4. Temiz Tasarım


Tasarımda düzen hem bir kodlayıcı için hemde kullanıcı için önemini koruyan bir kavramdır. Bir tasarımın belirli bir düzen ile kodlanması, gerekli yerlerde açıklayıcı alanlar bulunması, kodlamaların gruplar halinde başlangıç ve bitiş etiketlerinin/yorumların bulunması çok önemlidir.


5. Dosyalama


Dosyalama sisteminin düzenli olması js, css, img ve fonts tarzında klasörler ile tasarım dosyalarının düzenlenmesi gerekmektedir. Bir tasarıma ait dosyalar bu düzen içerisinde kolayca erişilebilir olmalıdır.


6. Cross Browser Ayarları


Vee, zurnanın öttüğü yere geldik. Bu kısım bir tasarımcının can alıcı noktasıdır. Web tarayıcıları, örneğin her CSS özelliğini diğer tarayıcılar ile birlikte desteklemez. Bu şu demek, örneğin siz CSS3 ile gelen yeni bir özelliği Chrome üzerinde kullanabilirken(transition, animation, Opacity vs.) Explorer 'da kullanamayabilirsiniz. Bu yüzden bir Web sayfasını her tarayıcıda görüntülenebilecek şekilde kodlamalısınız.

Bazı özellikleri her tarayıcıda kullanmanız gerekmeyebilir. Bazı özellikleri de kullanmak istersiniz ve kullanmak için aşağıdaki gibi bir kodlamaya ihtiyaç duyabilirsiniz.

background:linear-gradient(#fff,#eee);
background:-webkit-linear-gradient(#fff,#eee); /* Webkit tabanlı tarayıcılar */
background:-moz-linear-gradient(#fff,#eee); /* Firefox */
background:-o-linear-gradient(#fff,#eee); /* Opera */
background:-ms-linear-gradient(#fff,#eee); /* Internet Explorer */

İşte bu şekilde kodlamaya da "Tarayıcıdan Bağımsız" kodlama diyoruz.

Modern Tasarımlar İçin Kullanılan Kütüphaneler


Modern olarak nitelendirilen son zamanların trendi haline gelmiş çeşitli tasarımlar ister istemez çeşitli yerlerde karşımıza çıkıyor. Nette gördüğümüz bu tasarımlar bizde şu soruyu da bırakmadan gitmiyor tabi. Nasıl ?

Bir siteye giriş yapıyorsunuz ve bir de bakıyorsunuz ana sayfada kendi kendine horon tepen bir paragraf var. Aynı şekilde aşağı iniyorsunuz ve otomatik bir sayaç işliyor. Az daha iniyorsunuz ve sağdan soldan sütunlar animasyon ile önünüze geliveriyor.

Evet aslında sadece hazır temalar değil, ticari anlamda öne çıkan web sitelerinde de bu yenilikleri görmek mümkün. Sonuçta geliştirici demek yenilikleri de takip etmek demek. Bu yenilikleri de kullanıcıya sunması demek. Burada trend dedik ama aslında bir tasarımcı olarak bakacak olursak trendin adı JavaScript. Evet JS son zamanlarda öyle bir gelişim gösterdi ki bu durum GitHub gibi Git teknolojisi kullanan sitelerin adeta bir JS kütüphanesine dönmesine yol açmış durumda.

Bugün burada bu kütüphaneleri ve işlevlerini açıklayacağım. Eksik olan kütüphaneler olabilir yazıyı elimden geldiğince kısa zaman aralıklarında güncellemeye çalışacağım.


Animate.css



Animate.css 'ten başlamazsak olmaz. Son zamanlarda kullanım oranı belirli oranda düşse de halen kullanılmaya devam eden bir animasyon kütüphanesidir. Çok çeşitli efektleri resmi arayüzü üzerinden inceleyebilirsiniz.

Detaylı kullanım dökümanlarını da Github üzerinden inceleyerek uygulayabilirsiniz.


Wow.Js


Wow ise Animate.css ile birlikte çalışan bir kütüphanedir. Aslında Animate 'i anlamlandıran JS kütüphanesidir de diyebiliriz. Nette dolaşırken çeşitli web sayfalarında gördüğümüz scroll hareketi ile gösterime giren alanlar gibi, Wow.Js ile de HTML etiketi içerisinde belirttiğimiz alanlar tetiklenir ve aktif olan alan ile beraber Animasyonlar gösterime girer.

Detaylı kullanım dökümanı için Github


Sticky.Js



Bu kütüphane ile CSS 'te yaptığımız fixed işlevini otomatik olarak yapıyoruz. Ancak kütüphane olarak çok önemli farklılıkları var. Bunlardan en önemlisi JS 'nin dinamik şekilde çalışmasından dolayı kullanıcı tarafının daha iyi olmasıdır. Örneğin bir web sayfasının ortasına gelin ve tarayıcınızın yenile düğmesine basın. Eğer sabitleme işlemini CSS ile yaptıysanız elementin tekrar karşınıza gelmesi için bir scroll veya yön hareketi belirtmeniz gerekir. Sticky 'de ise sayfayı yenileseniz de sizin sayfa konumunuz otomatik olarak bilineceğinden sabit element direkt karşınıza gelecektir.

Bunların yanında efekt olarak ta Sticky, CSS kullanımından avantajlıdır. Detaylı kullanım dökümanı için Github


Loading Page ve Img

Loading icon cubeLoading icon four squareLoading icon rubik's cubeLoading icon rectangle square dotsLoading icon tetris gameloading icon snake gameloading icon suffling rubik's cubeLoading icon rotating circlesloading icon fadein faceout circlesrotating two circles loaderLoading icon revolving circleshangout loader iconloading icon zoom in zoom out circlesLoading icon bouncing circleloading icon kinetic rotation circle crossgoogle like loaderloading icon conectric circles fading out













Ufak bir çalışmayla web sayfalarınıza yükleniyor simgesi ekleyebilirsiniz. Aynı zamanda web sayfanızdaki resimlere de yükleniyor ibaresi ekleyerek tasarımınızı daha gösterişli hale getirebilirsiniz. Gerekli bilgiler ve dökümanlar için burayı ziyaret edin.

Farklı loading image 'leri edinmek için https://icons8.com/preloaders/ adresinde çeşitli ücretsiz .gif 'ler edinebilirsiniz. http://loadergenerator.com/ ve https://loading.io/ adreslerinden de istediğiniz bir .gif 'i özelleştirip edinebilirsiniz.


OwlCarousel.Js



Yoğun olarak kullanımda olan bu kütüphane ile çeşitli gösterimlerle modern sliderlar üretebiliyorsunuz. Hem de çok basit HTML kodlamaları ile bu işlemler yapılabilmekte. Resmi sitesi üzerinden slider çeşitlerini inceleyebilirsiniz.

Bunlarla beraber slick.js ve react-slick olarak farklı seçenekler de mevcut. Owlcarousel.js dökümanlarına ulaşmak için Github


Typed.Js



Yine son zamanların popüler kütüphaneleri arasını girmiş olan dinamik yazı özelliği. Bu özellik ile ekranda belirlediğiniz bir yazıyı dinamik bir biçimde gösterime koyabilir, film şeridi gibi kullanıcıya yazdırarak gösterebilirsiniz.

Typed.Js dökümanları için Github


Stellar.Js



Stellar.Js ise elementlere ekranda parallax efekti vermeye yarayan bir kütüphanedir. Aynı şekilde kullanmak isteyeceğiniz en hoş özelliklerden birisi de Parallax Backgrounds özelliğidir.

Stellar.Js dökümanları için Github


Nette daha bir çok kütüphane mevcut ve halen de yeni özellikler çıkmaya devam etmekte. Bu gelişmelere bakarak, ilerleyen zamanlarda konunun bir ikincisini de yayımlayabilirim.

Firefox Dev Edition, Linux Mint Üzerine Kurulumu



Sadece kısa bir kaç yöntemle Firefox Developer Edition 'ı Linux Ubuntu ya da Mint üzerine kurulumunu anlatacağım sizlere.

Öncelikle CTRL+ALT+T ile terminali açın ve aşağıdaki komutları sırası ile girin:

$ sudo add-apt-repository ppa:ubuntu-desktop/ubuntu-make
$ sudo apt-get update
$ sudo apt-get install ubuntu-make
Ubuntu-make 'i kurduktan sonra aşağıdaki komut ile Web aracı Firefox-Dev 'yi kurmasını söylüyoruz.

$ umake web firefox-dev --lang tr
Komutu girdiğinizde karşınıza şöyle bir çıktı gelecektir. Değilse bile aşağıdakine göre ayarlayın(Kullanıcı adı yazan kısım sizin kendi kullanıcı adınız).

$ Choose installation path: /home/kullaniciadi/.local/share/umake/web/firefox-dev
Daha önce kurduğumuz dizindeki klasörü /opt kasörüne taşıyoruz.

$ sudo mv /home/kullaniciadi/.local/share/umake/web/firefox-dev /opt/firefox-dev

Ubuntu için

$ sudo gnome-desktop-item-edit /usr/share/applications --create-new

Mint için Masaüstüne sağ tıklayıp "Burada yeni bir başlatıcı oluştur..." diyoruz ve aşağıdaki gibi uyguluyoruz.

Name: Firefox Dev
Command: /opt/firefox-dev/firefox
İkon üzerine tıklayıp: /opt/firefox-dev/browser/chrome/icons/default/ dizinindeki .png dosyasını seçiyoruz.
Artık masaüstündeki kısayoldan Firefox Dev 'yi başlatabilirsiniz.


Web Geliştiricileri için En İyi Tarayıcı Hangisi ?




Web geliştiricileri bazen tarayıcı kullanımında kararsız kalabilir. Hangi tarayıcının en pratik olduğu, iş yaparken en iyi çalışma ortamını hangisinin sunduğu sorular üzerine farklı tercihler yapabilir.

İster yeni bir web geliştiricisi, isterse de ileri seviye bir web geliştiricisi olun bu konuda çeşitli seçenekler mevcuttur. Aşağıda web geliştirme, çekirdek özellikleri ve kullanıcılar tarafından öne çıkan iki tarayıcı hakkındaki bilgileri beraber görelim.


Firefox

Mozilla, 2016 yılında Firefox Developer Edition 'ı "Web 'i İnşa Edenler için Üretildi" etiketiyle açıkladı. Bu özel tarayıcı, çok sayıda geliştirme işlevine sahip.

Bu tarayıcı aşağıdaki özellikleri içeriyor:
  • Javascript Debugger: Bu araç, hataları izlemenize ve anında kodu değiştirmenize yarar.

  • Responsive Tasarım Modu: Bu ara. sayesinde, herhangi bir sayfanın pencere boyutunu değiştirmeden farklı cihazlarda nasıl görüldüğünü gözlemlemek için var.

  • Stil Editörü: CSS dosyalarınızı, oluşturun ve düzenleyin veya istediğiniz bir sayfa üzerine uygulayın.

  • Valence: Daha önce Firefox Tools Adapter olan bu eklenti, geliştiricilerin Web IDE 'yi(Aşağıdaki resme bakın) Safari çalışan bir iOS veya Chrome çalıştıran bir Android cihaza bağlanmasını sağlar. Bu sayede birden çok tarayıcı üzerinden hata ayıklamak mümkün olur.
Firefox Developers Edition Tarayıcısı'nın bir parçası olan Valence ile web sitelerini cihazlar arasında görüntüleme ve hata ayıklama.

  • WebIDE : Bu uzantı, Firefox tarayıcısı içinde dağıtım yapmanıza, hata ayıklamanıza ve geliştirme yapmanıza olanak tanır. Daha az tıklama ile simülasyonları düzenlemenize ve çalıştırmanıza olanak tanıyan bir kod oluşturabilir veya mevcut bir uygulamanın kodunu gösterebilirsiniz.



Chrome

Google Chrome ile kodlama yapma ve hata ayıklama işlerinizi hızlı bir şekilde yapmak için geliştirici araçlarını gömülü olarak kullanabilirsiniz.

Gömülü özellikler:
  • DevTools: Sıralı bir panel ile gelişticilerin kolay bir şekilde çalışmasını sağlar. Üzerinde Kategoriler, Elemanlar, Konsol, Kaynaklar, Ağ, Zaman Çizelgesi, Profiller, Kaynaklar, Güvenlik, ve Denetimler bulunur. Bu özellikler geliştiricilere güçlü işlevleri tek bir çatı altında kullanmasına olanak tanır.

  • JavaScript Konsolu: Çok klas olan bu özellik ile konsol mesajlarını kullanarak sorunların daha hızlı bir şekilde çözümünü sağlayabiliyoruz.

  • PageSpeed Trendleri: Bu araç, sayfa işlemlerini hızlandırmak için hızlı bir şekilde uygulayabileceğiniz çeşitli öneriler sunar. Örneğin Yslow, Yahoo! Tarafından geliştirilen, bir sayfa üzerinde 23 kurala göre test yaparak sayfanın neden yavaş çalıştığını belirleyen bir eklentidir.

  • Cihaz Emülasyonu: Bu araç ile mobil cihazları taklit ederek hem dokunma olaylarını hem de sayfanın Responsive olup olmadığını kontrol edebilirsiniz. Yine bu özellik te DevTools ile birlikte çalışmaktadır.

  • Chrome Cihaz Denetleme Aracı(Chrome Inspect Devices):Mobil cihazınızdaki bir Chrome sayfasını tanımlamak ister misiniz ? USB ile DevTools panellerini masaüstünüzden çalışıtabilirsiniz.
Chrome Inspect Devices

  • Web Geliştirici Uzantısı(Web Developer Extension): DevTools yeterli değilse, bu eklenti ile 100 adet kullanışlı özellik içeren bir aracı kullanabilirsiniz.


Kullanılabilir araçların ve eklentilerin kolay erişilebilirliğiyle, tercih ettiğiniz geliştirme tarayıcısı olarak Firefox ve Chrome, pek fazla sorun yaşamayacağınız tarayıcılardır.


Bir Webmaster Neden Linux Kullanmalı ?


Konunun başında belirtmem gerekirse eğer yazının başlığındaki sorunun cevabını almak isterseniz konunun en altına ininiz. Detaylı bilgi ile aydınlanmak isterseniz makaleyi okuyunuz.

Kişisel Linux Serüvenim

Ne çabuk geçti Windows 95, XP kullandığımız yıllar. Bir çoğumuzun aklında farklı bir işletim sistemi kullanmak gibi herhangi bir düşüncenin belki de olmadığı yıllar. Bilgisayar oyunları, çeşitli uygulamalar vd. bir çok ezberlenmiş eylemler. Geride kalmış oldu artık.
Windows 10 'un son zamanlardaki mavi ekran sorunları sonunda beni de acı bir şekilde geçtiğimiz aylarda vurdu. Bir tasarımcı olarak veritabanlarım ve kodlamalarımın bulunduğu sistemimin çökmesi  beni fazla telaşlandırmadı nasılsa yedeklerim yerinde duruyordu ama artık Windows 'a hep acaba gözüyle bakmak durumdu kaldım.
Daha önce Debian, Ubuntu, Elementary ve Mint kullanmış birisi olarak, neyse ki elimde hazırda duran bir adet Linux Mint bootable flash bellek ve denemelerim neticesinde çökertmiş olduğum 120 GB lık bir Debian partition 'ı vardı.

Yüklemeyi yaptım ve önceleri kullanıp Windows benzeri olduğu için pek de önemsemediğim Linux Mint dağıtımına olan ilgim işte o zaman başladı.

Linux Dağıtımları


Şimdi ise farklı bir bakış açısı katalım. Düşünün ki Windows, Nokia Symbian gibi ölmüş bitmiş bir işletim sistemi. İlk tercihiniz ne olurdu ?

Tabii ki de en yaygın olarak kullanılan Linux Dağıtımları. Ancak bir kullanıcının ille de Linux kullanması için Windows 'un yok olmasına gerek yoktur. Bunun için kendimize şu soruyu sormalıyız.

Niçin Linux Kullanmalıyım ?

Çok detaylı bir konu olmakla beraber özetle tek tek başlıklar altında açıklamalıyım bu soruyu. Bu sorunun altında yatan bir soru daha bulunmakta bu da Bir Kullanıcının İşletim Sisteminden Beklentisi Nedir ? sorusudur.

Kullanıcı işletim sisteminden aslında ihtiyacı olduğu an ihtiyacını karşılayabilmek ister. Bu yüzden Windows işletim sistemi her alana hitap etmek amaçlı yani çok yönlü işlemler için kodlanmış içerisinde bir kullanıcının ihtiyacı olan ve olmayan türlü fonksiyonları barındıran bir işletim sistemidir. Her ne kadar Home, Pro gibi ayrımlar yapsa da herhalde durumu az çok biliyoruz.

Peki bir de Linux 'a bakalım. İsteğiniz zaman istediğiniz modülü sistem üzerinden kaldırabilir veya kurabilirsiniz. En iyi olarak kendinize göre bir dağıtım seçebilir ve kullanabilirsiniz. Çünkü Linux işletim sistemi üzerinde tam denetime sahipsiniz. Çünkü Linux %100 özgür ve açık kaynak kodlu bir yazılımdır. Bir kaç satır komut ile tüm işlemlerinizi gerçekleştirebilirsiniz.

Özet olarak Windows bir kullanıcıya belirli bir alan içerisinde hizmet sunar. Ancak Linux üzerindeki kullanıcı tamamen özgürdür. 
Bu anlattıklarım genel bir tanımdır şimdi biraz daha detaylara girelim ve konuyu anlamlandırarak bitirelim.

Windows ve Linux



Değerli kullanıcılar, yukarıda bahsettiklerim standart kullanıcı kapsamayan özellikler. Burada amacım belirli bir sınırda durmakla, sınır tanımamak arasındaki farkı psikolojik açıdan izah etmeye çalışmaktı. Yukarıdaki yazımdaki anlatımdan sonra birilerinin de dediği gibi şunu diyebilirsiniz. "Özgürlük için Linux"

Esasen bu iki sistemi karşılaştırmak pek mantıklı değildir. Çünkü bu iki sistem arasında çok önemli bir fark bulunmaktadır. Bu fark Windows 'un ticari bir amaçla üretilmesi, Linux 'un ise tamamen gönüllüler tarafından geliştirilen bir sistem olmasıdır. Bu yüzden Windows serisinin geçmişten günümüze kadar gelen tarihi bir kullanım geçmişi vardır. Yine bu yüzden dünya üzerinde bilgisayar sektörü ile gelişen bir işletim sistemi halini almış ve yine ticari amaçla üretilmesi bu sistemin kullanıcı dostu olarak kodlanmasını sağlamıştır. Ortaya çıkan bu sonuca bakacak olursak, Windows işletim sisteminin Oyun ve Uygulama platformu olarak, Linux 'a göre daha geniş bir alanı olduğunu görürüz. Bu bir gerçektir.

Gelin bu iki sistemin öncelikle genel karşılaştırmasını yapalım. Daha sonra ise size halihazırda kullanmakta olduğum Mint dağıtımı hakkında geniş bir bilgi vererek, konuya güzel bir izahat vereyim. Açıkçası biraz uzun bir yazı olacak ama her zaman tartışmaya açık ve dünya kadar tartışması olan bu platformları açıklamak pek kolay değil. Beni mazur görün.

a.Oyun Platformu

Şöyle ki siz bir oyun geliştirici firma olsaydınız. 1 milyar kullanıcı olan bir platforma mı oyunu PC olarak çıkarırdınız, yoksa dünya genelinde 1 milyon kullanıcısı olan bir sistemi mi tercih ederdiniz. Cevap basit tabii ki 1 milyar olana sistem için optimize edersiniz. Çünkü diğeri için masraf yapmak belki gerekli bile değildir. Neticede bu sistemi kullanan kişilerin oyun oynayıp oynamadığını dahi net olarak bilemezsiniz.

Yani burada Windows kesinlikle oyun platformu konusunda lider. Linux ile kıyaslanamaz derecede. Bununla beraber Steam 'in Linux üzerinde kullanılabildiğini ve bazı oyunları da çalıştırabildiğini unutmayalım.

b.Uygulama Mağazası ve Platformu

Windows üzerinde popüler olan belirli başlı uygulamalar/programlar tabii ki de Linux üzerinde de bulunacak diye bir şey yok. Bu yüzden bunun da üstesinden yine özgür lisanslı yazılımlar geliyor. Bu yazılımlar örn: MS Office yerine LibreOffice gibi uygulamaları tercih edebilirsiniz. Ama burada bir farklılık söz konusu ve bu da insana farklı hissettiriyor.

c.Güvenlik

Geçenlerde bir makale okudum. Makalede BitCoin için girmiş olduğunuz tarayıcı üzerinden arka planda görünmeyen bir sekme açılıyor ve siz farkında olmadan sisteminizin performansından faydalanılarak BitCoin elde ediliyor. Bu açık ta henüz Windows üzerinde bulunmuştu.

Bu konu çok kez gündeme gelen ve her yerden bir yorumun yapıldığı konudur. Technopat üzerinde bir yazı yayımlayarak bu konuya son noktayı koyduğumu düşünüyorum. Çünkü Güvenlik konusunda Linux gerçekten de tartışmasız kalıyor. Aşağıdaki linki inceleyiniz.
https://www.technopat.net/sosyal/konu/eski-bilgisayarlar-icin-linux-tavsiyesi.331980/page-3#post-2827444

d. Performans

Windows yapısı itibariyle kullandıkça şişen, şiştikçe yavaşlayan ve sonuç olarak sürekli bir formatlama, yenileme ihtiyacı duyar. Belirli bir yerden sonra bu performans kaybı kullanıcıyı çılgına çevirir.
Linux 'u yıllarca kullansanız da, çeşitli uygulamalar kursanız da performansı ilk günkü gibi kalır. En fazla birkaç saniye ile performans kaybı yaşıyabildiğiniz bir işletim sistemidir. İlave olarak uygulama performansı da tatmin edici seviyededir.

Linux Mint

Genel özellikleri geçtiğimize göre şimdi sırada Mint hakkında detaylı bilgi vermeye geldi. Piyasada o kadar çok dağıtım var ki, belki bir çoğundan haberimiz dahi yok. Bu yüzden Linux dağıtımı deyince herkes bir şeyler önerir. Açık konuşmak gerekirse bu durumun bizim bencilliğimizden kaynaklandığını düşünüyorum. Çünkü hepimiz kendi tarafımızda olan bir şeyi savunuruz. Ben kullandım sende kullan gibi. Ama benim tavsiye edeceğim dağıtım sizin ihtiyacınız olan alan içerisinde olacağını düşündüğümden neden önerdiğimi de okudukça anlayacağınızı umuyorum.

Biliyorsunuzdur Mint, Ubuntu temelli bir dağıtımdır. Ubuntu ise Debian. Piyasada Ubuntu temelli mevcut dağıtımlar çoktur. Mint 'in önemli özelliği ise Cinnamon masaüstü dağıtımıdır diyebilirim. Aslında Mint 'in kullanım oranı başarısını da Cinnamon masaüstüne bağlanıldığı söylenebilir.

a.Kullanılabilirlik

Mint 'in en çok beni çeken özelliği bir uygulama kurmak için Windows 'taki gibi çift tık ile bir pencere açıp, sadece "Paketi Yükle" seçeneğine tıklamam neticesinde rahatlıkla uygulamalarımı kurabilmem oldu. Yine aynı şekilde gerekli bazı uygulamarın şaşırtıcı şekilde el altında bulunması çok kullanışlı bir özellik. Kısaca işlem yapma uğraşınız en aza indirgenmiş. Bu nedenle Windows 'a dönme ihtiyacı hissetmiyorsunuz.

Bir tasarımcı ve yazılımcı olarak söyleyebilirim ki, masaüstü diğer dağıtımlara göre daha kullanışlı denilebilir. 


Örnek olarak XAMPP Control Panelini masaüstüme çok kolay ekleyebildim.


Özellikle son gelen Sylvia güncellemesi ile Uygulama Mağazası, Yedekleme Aracı, Destek Merkezi ve daha bir çok özelliği ile kendini bayağı geliştirmiştir. Türkçeleştirme konusunda ise başlarda biraz sıkıntılı olsa da şuan gayet iyi durumda.

b.Görünüm

Bir diğer özellik de görünümün özelleştirilmesinde gelinen nokta. Cinnamon masaüstü görünüm olarak çok ileri seviyede özelleştirme sunmakta.

  • Seçilebilir İkonlar,
  • Panel renklendirmeleri,
  • Pencere renklendirmeleri,
  • Kilit ekranı özelleştirmeleri,
  • Görsel efektlerin özelleştirilmesi
Bunlarla beraber Masaüstü Uygulamacıkları, Panel Uygulamaları ve Eklentiler özelliği ile çeşitliliği artmaktadır
Ayarlar Görünümü
c.Ulaşılabilirlik

Klasör Görünümü
Ulaşılabilirlik konusunda ise Mint, klasör arama seçenekleri ile daha çok öne çıkmaktadır. Pek çok dosyalama özellikleri bulunuyor. Hatta bu özellikler açıkçası Windows üzerinde bile bulunmamakta.

Başlat Menüsü
Başlat menüsü ile uygulamalar gruplanmış şekilde, istediğiniz kategori üzerine mouse ile geldiğinizde içeriği direkt olarak elinizin altında. Ancak buna gerek yok çünkü çok iyi bir arama özelliği bulunmakta. Sadece uygulamanın bir kaç harfini girerek listelenmesini sağlayabilirsiniz. Başlat menüsünü açtığınız anda direkt olarak arama kutusunun içinde olacaksınız.

Sonuç

Genel olarak sizleri elimden geldiğince bilgilendirmeye çalıştım. Linux 'un Performans, Güvenlik, Kullanılabilirlik vd. açısından kullanışlı bir sistem olduğunu izah etmeye çalıştım. Bir Webmaster 'ın tercih etmesi gereken de bu alanları daha iyi kullanabildiği bir sistemdir.  Bunun yanında her iki sistemin de artıları eksileri mutlaka var. Bunları tartışmak ta ne bu makaleye ne de bir tartışmaya sığacaktır. Ancak tabii ki de kişiden kişiye bu durum değişir. Herkes istediği sistemi kullanmakta özgür sonuçta. Ancak şunu da ifade etmek gerekir ki, farklı deneyimler elde etmek ve alışılmışlığın dışına çıkmak gerçekten de çok güzel bir şey.