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.

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.

CSS Öğrenmeye Başlarken


CSS öğrenmek bir çok programlama dilinden daha kolaydır. Aslında bu dilin kullanımı HTML ile de kıyaslanılabilir. Şöyle ki HTML etiketlerinin kullanımını, yani açma kapama ve etiketleme mantığını anladıysanız, CSS ile de kodlama yapmanız aynı mantıkla kolay. Çünkü, bir özellik öğrendikten sonra diğerlerini zaten ezbere gerek kalmadan bir kaç uygulama ile öğrenmiş olacaksınız.

Bu anlamda öğrenmeye başlamadan önce kendinizi bazı konularda şartlar iseniz, kafa karışıklığı ve unutkanlık gibi durumların önüne geçebilirsiniz. Yani kısaca,

Bu İş Çok Kolay !





Nihayetinde beyin cerrahi müdehele uzmanlığını öğrenmiyoruz. Bu yüzden bu işin kolay bir iş olduğunu, altından kalkıp kendinizi iyi derecede şekillendirebileceğinizi unutmayın.

Not Alarak Çalışmak

Öğrendiklerinizi başlangıçta da olsa not alarak başlayın. Aldığınız bu notlar size yakın bir yerde olabilir. Örneğin masaüstünüzde veya masaüstünde kolayca erişebileceğiniz bir klasör içerisinde olabilir.
Son zamanların popüler uygulamaları olan Google Drive gibi uygulamalara kayıt edebilir ve bir sekme uzaklıkta notlarınıza tekrar ulaşabilirsiniz.
Klasik not alıyorsanız çalışma masanızın hemen karşısına notlarınızı tutturabilir ve ihtiyaç halinde göz önünde bulundurabilirsiniz.

Önizleme Yapmak

Tabii ki de en önemli mesele, örneklerle çalışmak. Web Tasarım ve Kodlama öyle bir iştir ki hem öğrenir hem de kolayca önizlersiniz. Zamanınızın haricinde başka masrafınız yok. Keza bu işin püf noktası zamanı yerli yerinde kullanmaktır. Sürekli örnekler halinde çalışabilirsiniz. Aynı zamanda bilgisayarınıza şimdiden bir local server kurulumu yaparak yeni projeler oluşturabilirsiniz. Bu deneyim kazanmanızı hızlandıracaktır.

CSS Söz dizimi ve Seçiciler


Söz Dizimi

Söz dizimleri bir seçiciden ve bir bildirim bloğundan oluşur.

CSS selector


Element Seçiciler

Yukarıdaki görsele baktığımızda h1 etiketi seçilmiş ve köşeli parantez açılarak, bu etikete bazı değerler girilmiş.
Verilecek değerler her zaman köşeli parantezler içine yazılır.

Örnek kullanımı 

h1 {
değerler...
}


Bu yöntem ile bir sayfa içerisindeki tüm h1 etiketlerine otomatik olarak değer atamış oluyoruz. Yani bu bir Genel Seçicidir. Tüm HTML etiketilerine bu şekilde değer atayabiliriz. Aynı zamanda bir özelliği birden fazla HTML etiketi üzerinde de gruplama yaparak uygulayabiliriz.

h1, h2, p {
değerler...
}


İşte bu da Grup Seçicileri olarak adlandırılır.

ID ve Class(Sınıf) Seçicileri

Genel ve Grup seçicileri öğrendikten sonra. Şimdi ise sırada ID ve Class seçicileri var. Bu seçicilerin özelliklerini sırasıyla başlıklar halinde anlatalım.

ID Seçicileri

ID Seçiciler bir sayfa içerisinde daima bir defa kullanılmaktadır. Yani bir etikete vermiş olduğunuz bir ID, yalnızca o etikete aittir. Bu yüzden ID 'ler bir sayfa içerisinde yalnızca bir defa çağırılmaktadır.

#yenielement {
    degerler...
}


gördüğünüz gibi yeni bir ID oluşturduk ve adını "yenielement" koyduk. İstediğiniz isimi koyabilirsiniz. ID tanımlarken başına "#" işareti koyuyoruz ve adını yazıyoruz. İşte bu kadar kolay.
Dikkat edilmesi gereken yer Türkçe Karakter kullanılmaması gerektiğidir.

HTML içinde kullanımı

<h1 id="yenielement"> Merhaba </h1>

Bu örnek bir ID kullanımı.

Class(Sınıf) Seçicileri

Class seçicileri ID 'den farklı olarak istenildiği kadar bir sayfa üzerinde kullanılabilir.

.yenielement {
    degerler...
}


Bu da bir Class oluşturma örneği. Sınıf oluşturmak için başına "." işareti koyuyor ve adını yazıyoruz. Hepsi bu kadar.

Yine bir etikete ID veya Class ataması yapmak için o etiketin içerisine ne tanımlayacağımızı yazıyoruz ve tanımın içine tanımladığımız ismi yazıyoruz.

Class kullanımı da ID ile aynı mantıktadır.

<h1 class="yenielement"> Merhaba </h1>

İlave olarak çeşitli ön izleme siteleri ile akılda kalıcı örnekler yapabilir kendinizi geliştirebilirsiniz.

CSS Yorumlar

CSS içerisinde bir değerin kullanılmamasını sağlayabilir veya isteğe bağlı yorum belirtebilirsiniz. Bir CSS yorumu eklemek için /* ve */ işaretleri kullanılır. Bu işaretler içerisinde kullanılan kısım yorum kısmıdır.

p {
    degerler...
   /* Burası yorum kısmıdır. */
}
/* Ve ya sayfanın herhangi bir alana yorum yazabilirsiniz. */

CSS Giriş


CSS 3 'e ait Logo


CSS Nedir ?

CSS, açılımı Cascading Style Sheets 'tir. Web sayfalarının özelleştirilmesi için geliştirilmiş bir kodlama dilidir.

Bu dil ile HTML etiketlerini özelleştirebilir ve Web Sayfalarını istediğimiz gibi özelleştirebiliriz.
Şu an CSS 3 ile bu dil pek çok farklı özelliği de beraberinde getirmiş ve geçmişte Javascript ile yapılabilen çeşitli özellikleri de kullanılabilir hale getirmiştir.

CSS 'nin bu gelişimi bazı tarayıcılarda yeni özellikleri destekleme konusunda sıkıntı çıkarsa da, geçen zamanda bir çok tarayıcı da bu gelişmeye ayak uydurarak yeni özellikleri de desteklemeye başlamışlardır.


İyi de Neden CSS Kullanalım ?

CSS, Web Sayfalarınızın farklı cihazlara uyumunu, sayfa için tasarımını, yerleşim ve daha pek çok özelleştirmeyi yapmanıza olanak sağlar.

Şuan HTML üzerinde sayılı özelleştirmelerin haricinde, ileri seviyede bir sayfa tasarlama söz konusu değildir. CSS gibi bir sayfa tasarlama hem daha kolay hem de sayfa içi etiketler daha yönetilebilirdir.

Eskiden HTML etiketi içerisinde bulunan font özelliği kullanımı adeta bir kabustu. Nedeni her sayfada ve her etikette bu özelliği ayrı ayrı kullanılmak zorunda olunmasıydı. Ancak CSS ile bir sayfa içerisindeki istediğiniz elemanlara özellik ataya bilir ve isterseniz tüm etiketleri tek seferde özelleştirebilirsiniz.

Bundan sonraki yazılarımda CSS 'ye ait tüm özellikleri anlatmaya çalışacağım.