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.

HTML Editörleri


Not defteri veya Metin Düzenleyici kullanarak HTML yazma

Web sayfalarını profesyonel editörler kullanarak oluşturabilir veya düzenleyebilirsiniz. Ancak HTML öğrenirken basit yazı editörleri olan Not Defteri(PC) veya TextEditör(Mac) kullanmanızı öneririm.

Not Defteri veya TextEdit ile  ilk Web sayfanızı oluşturmak için lütfen aşağıdaki dört adımı uygulayın.


1. Adım: Not Defteri'ni açın (PC)

Windows üzerinden:

Başlat > Programlar > Donatılar > Not defteri

1. Adım: TextEdit'i açın (Mac)

Finder'ı açın > Uygulamalar > TextEdit

Ayrıca, dosyaları doğru kaydetmek için bazı tercihleri ​​de değiştirin.
Tercihler> Biçim > "Düz Metin" seçeneğini seçin.

Daha sonra "Aç ve Kaydet" in altında "HTML dosyalarında zengin metin komutlarını yok say" yazan kutuyu işaretleyin.

Sonra kodu yerleştirmek için yeni bir belge açın.

2. Adım: Örnek HTML Kodu Ekleme

Aşağıdaki örnek HTML kodunu yada istediğiniz herhangi bir kodu açtığınız belge içerisinde yapıştırın.

<!DOCTYPE html>
<html>
<body>

<h1>Yeni bir başlık</h1>

<p>Yeni bir paragraf.</p>

</body>
</html>

Önizleme:












3. Adım: HTML Sayfasını Kaydetme

Dosyayı bilgisayarınıza kaydedin. Dosya > Farklı kaydet deyin.

Dosyayı "index.htm" olarak adlandırın ve kodlamayı UTF-8 (HTML dosyaları için tercih edilen kodlama) olarak ayarlayın.

Not: Dosya uzantısını .html veya .htm olarak kullanabilirsiniz. İkisi arasında hiç bir fark yoktur.












Adım 4: HTML Sayfasını Tarayıcınızda Görüntüleme

Kaydettiğiniz HTML dosyasını tarayıcınızda açın (dosyaya çift tıklayın veya sağ tıklayın - "Birlikte aç" ı seçin.

Sonuç olarak şöyle görünecek:













HTML 'i başarılı bir şekilde çalıştırdınız. Sonraki derslerde kodlarınızı dosyalar halinde kaydederek klasör içerisine arşivleyebilir ve tekrar tekrar gözden geçirebilirsiniz.

HTML 'e Giriş


HTML Nedir ?

HTML, Web sayfalarını oluşturmada kullanılan standart bir biçimlendirme dilidir. Genel olarak HTML 'in özellikleri şunlardır:
  • HTML, açılımı Hyper Text Markup Language 'dir.
  • HTML, işaretlemeyi kullanarak Web sayfalarının yapısını yorumlar.
  • HTML öğeleri etiketlerle gösterilir.
  • HTML etiketleri "başlık", "paragraf", "tablo" gibi içerik parçalarını etiketlemektedir.
  • Web tarayıcıları ise HTML etiketlerini görüntülemez, bu etiketlere göre sayfayı yorumlayarak kullanıcıya sunmaktadır.

Öncelikle basit bir HTML örneği gösterelim:

See the Pen wpBJNE by Gokhan (@Gokhank58) on CodePen.



Örneğin Açıklaması

<!DOCTYPE html> Bu sayfanın HTML5 olarak bildirildiğini belirtir.
<html> HTML sayfasının kök unsuru olarak açılan etikettir. Tüm etiketler <html> içerisine yazılır.
<head> Belgenin ilgili meta bilgileri içerir.
<title> Doküman için bir başlık belirtir.
<body> Görünen sayfa içeriklerinin olduğu kısım.
<h1> Bir başlık tanımlar.
<p> Bir paragraf tanımlar.

Yukarıdaki örnekte gördüğünüz gibi bazı temel etiketler var ve bu etiketlerin içerisinde de kullanılan başka etiketler var. Bu yapıyı aşağıda inceleyeceğiz.

HTML Etiketleri

Bazı istisnalar dışında HTML etiketleri genellikle bir açma ve bir kapama etiketinden oluşur. Aşağıdaki örneği inceleyin.

<etiketadı> içerik buraya girilir... </ etiketadı>


İnternet Tarayıcıları

İnternet tarayıcılarının(IE, Chrome, Firefox, Safari) amacı, HTML belgelerini okumak ve görüntülemektir. Tarayıcı HTML etiketlerini kullanıcıya göstermez. Bu etiketleri yalnızca sayfanın nasıl görüntüleneceğini belirtmek için kullanır ve ekranda gösterir.



HTML Sayfa Yapısı

Aşağıda bir HTML sayfa yapısının görselleştirilmesi verilmiştir:
<Html>
<Head>
<title> Sayfa başlığı </ title>
</ Head>
<Body>
<h1> Bu bir başlık </ h1>
<p> Bu bir paragraf. </ p>
<p> Bu bir başka paragraf. </ p>
</ Body>
</ Html>

Yalnızca <body> etiketi içerisindeki alan ekranda görüntülenir.


<! DOCTYPE> Bildirim Etiketi

<! DOCTYPE> etiketi tarayıcıların belge türünü belirlemelerine ve web sayfalarını doğru şekilde görüntülemelerine yardımcı olur.

Sayfanın en üstünde (herhangi bir HTML etiketinden önce) yalnızca bir kez eklenmelidir.

<! DOCTYPE> bildirimi büyük / küçük harf duyarlı değildir.

HTML5 için <! DOCTYPE> bildirimi şöyledir:

<!DOCTYPE html>

HTML Sürümleri

İnternetin başından beri HTML 'in bir çok sürümü vardır:

Versiyon Yıl
HTML1991
HTML 2.01995
HTML 3.21997
HTML 4.011999
XHTML2000
HTML52014

CSS 'te karartma efekti yapmak


Karartma Öncesi

Karartma Sonrası

Çok kolay bir yöntemle CSS kullanarak karartma efekti yapacağız. İhtiyacımız olan sadece iki adet HTML etiketi olacak. Örneğin bir adet div açalım ve bu etikete bir arka plan resmi belirleyelim.

<div id="header-panel">
<div class="container">
<p style="text-align:center;color:#fff;"> Gokhankrll </p>
</div>
</div>


HTML etiketinden sonra CSS 'leri ekleyelim. #header-panel 'e position:relative; ekliyoruz. Daha sonra aynı etikete ::before ile aşağıdaki değerleri atıyoruz. Burada dikkat edilmesi gereken alan .header-panel yani hemen önceki (veya :before yada :after eklenmemiş olanına) etikete position:relative; özelliğinin eklenmesi gerektiğidir.

#header-panel {
        position:relative;
        background-image:url(/resim.jpg);
        width:100%;
        height:500px;
}

#header-panel::before {
        content:"";
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        width:100%;
        height:100%;
        background:#000;
        opacity:.4;
}


İsterseniz ::before yerine herhangi bir HTML etiketi kullanıp absolute değeri atayarak da aynı sonucu elde edebilirsiniz.İşlemler tamanlandıktan sonra yazının başındaki gibi bir görüntü elde edeceksiniz.




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.


CSS Nasıl Kullanılır ?


Tarayıcı içinde bir stil dosyası tanımladığınızda, tarayıcı içeriği o dosyaya göre biçimlendirecektir. CSS kodlarını sayfa içerisinde kullanmanın üç farklı yöntemi mevcuttur.

1. HTML etiketi içerisine doğrudan stil girmek.

Herhangi bir HTML etiketinin başlangıç etiketi içerisine “style” özelliği ekleyerek CSS kodlarının yazılmasıdır.

Kod:

<p style="color:red;"> mavitasarimofisi.com </p>

Yukarıdaki “p” etiketine stil atadık.

2. <head> etiketi içerisinde <style> etiketi kullanımı.

Sayfa içerisindeki herhangi bir nesneye stil ataması yapmak için <style> CSS kodları </style> HTML etiketini kullanırız.

Kod:<head>
<style>
p {

color:red;

}
</style>
</head>

Bu etiket normal olarak <head> etiketi içerisinde kullanılır. Ancak sayfa içerisinde herhangi bir yerde de kullanılırsa da çalışır ama W3 standartlarına uymaz, yinede tarayıcı bunu hata olarak algılasa da hatayı bastırır. En doğru olanı standarda uygun kullanmak ya da 3. yöntemi uygulamak.

3. <head> etiketi içerisinde çağırılması.

Bir CSS dosyasının “head“ etiketi içerisinde çağrılmasıdır ve yöntem olarak en uygun olanı budur.
Aşağıdaki kodu;
<link href="css/style.css" rel="stylesheet" type="text/css">
<head> etiketinin içerisine yerleştirirsiniz.

Örnek Kod:
<head>

<link href="css/style.css" rel="stylesheet" type="text/css">

</head>

Böylece sayfa içerisinde css dizinindeki “style.css” dosyasını çağırmış oluyoruz.


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.

Web Tasarımcısının Bilmesi Gereken Kavramlar



Her zanaat işinin bir sırrı ve ustalığı vardır. Web Tasarımı ve Kodlama işinin de bir zanaat olarak, kendi içerisinde kuralları ve çeşitli ustalık gerektiren kavramları vardır. Bu kavramlar çoğu zaman internette dolaşarak elde edemeyeceğiniz şeyler olabilir. Bu bazı kavramları bilmek zorundadır bir Tasarımcı, bu kavramları maddeler halinde sıralarsak.

Kullanıcı Deneyimi (UX:User Experience) ve Kullanıcı Arayüzü (UI:User Interface)

Kullanmakta olduğumuz ürün ve hizmetlerle karşılıklı olarak aramızda bir ilişki söz konusudur. Bir kullanıcı olarak gün içinde farklı ihtiyaçlarımıza yönelik olarak telefon, araba, çeşitli bilgisayar yazılımları, web sayfaları, mobil uygulamalar gibi arayüzler ve nesnelerle etkileşime girmekteyiz.

Her etkileşim sonucunda, bize sağlanan fayda, yaşatılan deneyimin kalitesi, hissettirilenler ve izlenimlerimiz, ürün ya da hizmet tercihimizde önemli rol oynamaktadır. Ürün ya da hizmetin tasarımının nitelikleri ve bu niteliklerin bizlerin deneyimlerini etkilemesine bağlı olarak aramızda bir bağ oluşur.

Bu bağdan yola çıkarak yapılan araştırmalara da Kullanıcı Deneyimi Araştırmaları denir.

a.Kullanıcı Deneyimi Kavramı

Kullanıcı deneyimi günümüzde yaygın bir şekilde birbirinden farklı bir çok anlamı ifade eden durumlar için kullanılmaktadır.Ürün ya da hizmetin kullanıcı ile bir arayüz vasıtasıyla ilişkilendiği tüm durumlar için geçerli olan kullanıcı deneyimi; günümüzde daha çok web siteleri, bilgisayar, ve mobil cihazların arayüzleri gibi elektronik ortamlar üzerinden sunulan hizmetler ve ürünler için kullanılmaktadır.

b.Kullanıcı Deneyimi

Kullanıcıların bir hizmeti ya da ürünü kullanırken, onunla etkileşime girdiğinde ve sonrasında yaşadığı deneyimler bütünü olarak ifade edilmektedir. Kullanım Öncesi - Kullanım Anı - Kullanım Sonrası durumları incelemektedir. Genellikle üç başlık altın sıralanır;

1. Görünüm(Appearance)


Görünüm, "tüketicinin beklentisini karşılama için atılan ilk adımdır". Kullanıcıların gerek ilk tecih/satın alma kararına etkisi, gerekse de uzun süreli kullanıcı memnuniyeti sağlaması adına bu kavram çok önemlidir.

Web sayfalarındaki gösterişli ve kullanıcının hoşuna gidecek şekilde tasarım yapılması buna örnektir.

2. Ulaşılabilirlik(Accessibility)


Ulaşılabilirlik, "ürün veya hizmetin kullanıcıya sunmuş olduğu gezinim kolaylığı" olarak tanımlanabilir. Örneğin web sayfaları üzerindeki navigasyon menüsü, içeriğin düzenli bir şekilde listelenmesi ve bağlantıların kullanıcıyı sonuç odaklı yönlendirmesidir.

3. Kullanılabilirlik(Usability)



Kullanılabilirlik, "bir ürünün potansiyel kullanıcıları tarafındani belirli bir kullanım bağlamı içinde, amaçlanan kullanım hedeflerine ulaşmak için, etkin, verimli, ve tatmin edici bir şekilde kullanılabilme derecesi" olarak tanımlanmaktadır.


Etkileşimli Tasarım

Etkileşimli Tasarım, teknoloji ve insanlar arasında döngüsel ve iş birliğine dayalı sürecin aracılığıyla teknoloji ortamının anlamlı iletişimine odaklanan kullanıcı merkezli bir çalışma alanı olarak tanımlanmaktadır.

Buna göre Etkileşimli Tasarım;


  • Verimli ve sezgisel donanımlar üzerinde durma, cihazları kullanışlı, faydalı ve anlamlı hale getirme,
  • Bir ürün tasarımı kaynaşması, bilgisayar bilimi, iletişim tasarımı,
  • Belirli bağlamlar koşullar altında belirli problemleri çözümünde kullanılan bir süreç,
  • Ürünler, hizmetler, ortamlar ve sistemlerin davranışı için formları oluşturma,
  • Teknoloji ve Kullanıcı arasında diyalog kurma, iletişim kısıtlamalarını teknoloji yardımıyla en aza indirgeme,
  • Çeşitli ürün ve hizmetler aracılığıyla insanları bir araya getirme ile ilgilidir.


Etkileşimci Tasarımcı Ne Yapar ?

Etkileşimli tasarım sürekli gelişen, hem yeni hem de deneyimli tasarımcıları ilgi çekici çalışmalar gerçekleştirmek için sürekli heyecanlandıran bir şekilde tasarımcılara meydan okuyan, çoklu beceri gerektiren bir tasarım ortamıdır. Buradaki vurgu her zaman üretici ve tüketici arasında oluşan oluşan ilişki ve kullanıcının projede edindiği deneyimdir.

Etkileşimci tasarımcı, tasarım gerçekleştiren, geliştiren, tasarım stratejisi oluşturan, ürün üzerindeki etkileşimli öğeleri belirleyen, kavramları test etmek için ilk örnekleri oluşturan, kullanıcıları etkileyecek eğilimleri ve teknolojileri belirleyen kişidir.

a.Katılımın Tasarlanması

Görsel iletişim, mesajın aktarılması, kullanıcının katılımı ve bırakılan etki ile ilgilidir. Etkileşimci Tasarımcılar, kulanıcılaı farklı teknolojiler kullanarak deneyimleme ve kullanıcıların ilgilerini çekme yoluna gitmektedirler. Burada önemli olan kullanıcı üzerinde pozitif deneyimler oluşturmaktır.

b.Gelişime Ayak Uydurma

Bir tasarımcı kendisini sürekli geliştirmelidir. Web Tasarım teknolojileri sürekli gelişen bir sektördür. Bu yüzden gelişen teknolojiye ayak uydurmak ve bu teknolojileri doğru kullanmalıdır.

c.Konsantrasyon ve İlgi

İleriye yönelik düşünce ile birlikte teknoloji ve yenilik için bir tutku, hayal gücü ve büyük fikirler üretebilme gücü etkileşimci tasarımcıyı başarılı kılan etmenlerdir.

d.Takım Çalışması

Sağlam bir tutku ve beceriye sahip olmak tabii ki iyidir fakat tasarım bir takım çalışması sürecidir. Her ne kadar etkileşimci tasarımcı ortamın pek çok açıdan farkında olması gerekse de hiç kimse tasarımcının her şeyi bilmesini beklememektedir. Tasarım sorununa ilgi çekici ve yenilikçi bir çözüm geliştirebilmek için tasarımcılar takım halinde çalışırlar. Büyülk projelerin başlatılması için farklı bir çok sese ihtiyaç vardır, dolayısıyla etkileşimci tasarımcıların diğer kişilerle verimli çalışabilmeleri kritik önem arz etmektedir.

e.Tasarım Belgesi

Tasarım süresinin Dökümantasyonu son derece önemlidir. Bu karamı yabancı kaynaklarda bol bol duyarız. Üretilen her kütüphane, yazılım veya tasarımda bu belgelemeyi görürüz.
Şimdi burada Documentation alanına ve içeriğine girmeyeceğim. Araştırmak isteyenler nette bir çok veriye erişebilirler.

f.Mobil Erişim

Son zamanlarda çok duyduğunuz bir kavram aslında "Resposive". Duyarlılık anlamına gelen bu kelime ile mobil cihazların da masaüstü ortamı gibi aynı ortam üzerine bağlanması amaçlanır. Türkçe olarak ta duyarlı tasarım olarak tanımlanır.

g.Farklı Tasarım

Son olarak farklı tasarım konusunu ele alalım. Günümüzde bilgisayarlar her türlü ürünün içine gömülebildiklerinden, bilişimin her yerde olduğunu ifade eden "Ubiquitous Computing" yani yaygın bilişim kavramı ortaya çıkmıştır. Örneğin "Otomobillerin içine gömülü olan bilgisayar sistemleri herhangi bir arızayı kullanıcıya bildirebilmekte, buzdolabının içinde eksik olan bir ürün için bilgisayar ekranı uyarı vermekte ve kişilere alışveriş listesi oluşturmada yardımcı olabilmektedir.

Buradab yola çıkılarak Farklı Tasarımdan amaç, ürünün veya hizmetin ilgi çekmesi, merak duygusu uyandırması ve değişime yol açabilme kavramlarını kapsar.