WEB TASARIM'DA PÜF NOKTALAR

Web sitesi tasarımınıza başlamadan önce, siteniz ile ilgili bir ön hazırlık yapmanız siteninizin çok daha iyi olmasına sebep olur. Sizler için hazırlamış olduğum bu yazımda yapacağınız web siteleriniz için dikkat etmeniz gereken püf noktalardan bahsedeceğim.

Peki mükemmel bir web sitesi yapabilmeniz için ne yapmanız gerekli ?

Elinize bir kağıt ve bir kalem alıp sorular ile başlayın.

Bu Web Sitesi;

* Kimin için olacak ?
* Ney amaçlıyor ?
* Kimler ziyaret edecek ?
* Neyi hedefliyor ?
* Hangi bilgileri içermeli ?
* Hangi başlıklarda olmalı ?

Daha Sonra,

* Cevapları not al
* Başlıkları belirle
* Alt katagorilere sırala
* İçerik yazılarını tespit et
* İçerik resim, medya belirle ve dosyalar
* Renk seçimi (uyumluluk)
* Düzen simetri
* Grafik
* Yazı Karakteri Ve Boyutu
* Ne az ne çok

1- Renk Seçimi

Web sitenizin göze güzel gözükmesi için renk uyumuna çok dikkat etmeniz gerekmektedir. Gözü yorucu renk seçmemelisiniz. (Örn: Kırmızı) bu rengi az kullanın. Amacına uygun renk psikolojisi araştırması yaparak siteniz için doğru renkleri kullanın.


2-Simetri

Site göze hoş gelen simetrik olanıdır. Sağ göz ile sol gözün algıladığı ve simetrik olarak tespit ettiği her şeyi güzel olarak algılar. Sitenizin hoş gözükmesini isiyorsanız simetriye dikkat etmelisiniz.


3-Yazı Karakteri Ve Boyutu

Sitenizin güzel gözükmesi için tek bir yazı karakteri kullanın. Boyutları ne çok büyük ne de çok küçük olsun. En ideal boyut (10-13 punto).
Yazı tipi tavsiyelerimiz:

-Arial
-Times New Roman
-Verdana
-Tahoma
-Comic Sans MS


4- Ne az Ne çok

İçeriğiniz seçici ve yeterince ayrıntılı olsun.
Gereksiz uzun cümleler, yazılar ve fazlalıklardan uzak durun ki insanlar okurken sıkılmasın
Sayfalarınız da çok fazla abartılı olmadan resimler kullanın.

Domain ve Hosting Nedir?

Web siteleriyle uğraşıyorsanız illaki Domain ve Hosting kelimelerini duymuşsunuzdur.Peki nedir bu Domain ve Hosting? Sizlere bu yazımda bu iki yapıyı anlatacağım.

DOMAİN (ALAN ADI) NEDİR?

Domain web sitesinin tanımlandığı ve tarayıcı üzerinden erişim sağlandığı isimdir. Alan Adları kesinlikle süresiz olarak satın alınamaz. Yalnızca berlirli süreler arasında kendi üzerinize kiralayabilirsiniz. Yenileme işlemleri ile bu sahiplik sürenizi uzatabilirsiniz.

Domainler sonlarında ki ” .com, .net, .org “ gibi uzantılara göre sınıflandırılır ;
.com -> Ticari amaç için kurulan siteler için kullanılır, en çok tercih edilen domain uzantısıdır.
.net -> Network kısaltmasıdır, en çok bilgilendirme ve internet hakkında ki ticari amaclı siteler içindir.
.org -> Ticari amaç gütmeyen siteler için tercih edilmektedir.

Her ülkeye göre domain adları vardır.
Türkiye de ” .com.tr, org.tr “ vb. yani ” .tr “ uzantılı alan adları ODTU idaresindedir.

Domain internette yer almanın kimliği ve bu kimliğin “Alan Adı” dır. İnternette yer almak için baş vurduğunuzda size bir İnternet protokol numarası verilir. Buna IP Adres (İnternet Protokol adres)denilmektedir. İnternetteki her bilgisayarın bir IP adresi vardır. Bilgisayarlar arası bağlantı IP adresi üzerinden yapılır. IP adresi 3 tane nokta ile birbirinden ayrılmış numaralardan oluşmaktadır.

Domain (Alan Adı) ise bu numaranın sadece bir görüntüsüdür. Yani siz browserinizin adres çubuğuna IP numaralarını yazmak yerine IP numaralarının kodlandığı domainleri yazarak istediğiniz siteye ulaşırsınız. Kısaca özetlemek gerekirse domain IP adreslerinin harfler şeklinde kodlanmasıdır. Alan adınızın uygun, kolay ve hatırlanabilir olması önemlidir.

HOSTİNG NEDİR?

Kendinize ait bir web sitesi kurmak istiyorsanız önce bir domain (alan adı) almalısınız daha sonra hazırlanmış olan yada hazırlanacak olan web sitenizin dosyalarının (html, php, asp, fotoğraf dosyaları vs…) çalışacaği bir alan ( disk alanı ) olması gerekir ki hazırlanan web sitesini hosting alanına yüklemelisiniz. Böylece sitenizi ziyaret etmek isteyen kullanıcılar browserların da (internet tarayıcılarında örn.:internet explorer, firefox, netscape, google chrome gibi) sizin domain adresinizi yazdıklarında internet sitenizi görüntüleyebilirler.

Hosting hizmeti veren sistem aslında çok hızlı bir internete bağlı olan iyi bir bilgisayardan farklı birşey değildir. Aynı anda belki yüzlerce web sitesini yayınlayabilmesini en önemlisi kesintisiz çalışacağını düşünürsek elbette donanımı ona gore seçilmiştir ve daha da önemlisi çok hızlı bir bağlantı hızı ve yüksek bant genişliğine sahiptir.

Kısaca web sitenize ait dosyaları saklayan ve internet kullanıcılarının erişimine sunan bu bilgisayarlara web sunucusu (web server), bu veri saklama ve yayınlama işlemine de web hosting denir.

                                                DOMAİN VE HOSTİNG NASIL ALINIR?

Aşağıdaki videodan Domain ve Hosting nasıl alınır izleyebilirsiniz.

Css Renk Kodları

CSS özellikleri içinde en sık kullanılan özellik renk tanımlamalarıdır. Bunun için color özelliğinden faydalanıyoruz. Renkleri tanımlarken de bir kaç yoldan yararlanabiliyoruz. 3 farklı yollara renkleri tanımlayabiliyoruz.

Birincisi direkt rengin adını vermek; red, yellow, darkblue, black, white gibi.

 İkinci yol rengin hexadecimal kodunu vermek. Hexadecimal olarak kodu vermek için başında # kullanmak zorundayız. #33FFAA gibi..

Birde daha zor bir yol olan rengin decimal kodunu vermek, decimal kodu verirken de RGB kodu dikkate alınıyor ve R,G,B formatına uygun olarak uygun R değeri, uygun G değeri ve uygun B değeri ondalık değerde virgüller ile ayrılarak veriliyor. 192,192,192 gibi.

Aşağıdaki videoyu izleyerek Css Renk Kodları hakkında daha detaylı bilgiye sahip olabilirsiniz.

Aşağıda tabloda bazı renklerin isim karşılıkları, hexadecimal ve decimal karşılıklarını verdim.

Css Yazı Tipleri

Css'de bir değil önemli konu ise yazı tipleridir.Sitemizi css ile tasarlarken yazı tiplerimizi nasıl değiştirceğiz hep birlikte bakalım arkadaşlar.

İlk olarak yazı tiplerini değiştirmede kullanılan komutları sırayalalım ve daha sonra hepsini açıklayalım

1. font-family
2. font-size
3. font-style
4. font-weight

1-)Font-Family: Yazı Tipi Belirlemek

Yazı tipleri klasörümüzü açtığımızda birçok yazı tipi görürüz. Bunları HTML sayfamızda kullanmak için adını belirtmemiz gerekir. İşte bu kod yazı tipi seçmemizde bize yardımcı olacaktır.

      h1 { font-family: Times New Roman; }

      p { font-family: Times New Roman, Arial, Helvatica; }

      a { font-family: Sans-serif; }

   

Yukarıdaki birinci örnekte sadece tek yazı tipi adı belirttik (Times New Roman), ancak bir sonrakinde aralarına virgül koyarak daha fazla belirttik. Bu tarz kullanımlarda öncelikle dikkate alınan ilk verdiğimiz yazı tipi olacaktır. Eğer verdiğimiz yazı tipi o kullanıcıda yoksa bir sonraki ile görüntülenecektir.

2-) Font-Size: Yazının Büyüklüğü

Yazı büyüklüğünü font-size ile belirtiriz. Ölçü birimi olarak aşağıdakileri kullanabiliriz:


% : yüzde olarak belirtmek
in : inç olarak belirtmek
cm : santim olarak belirtmek
mm : milimetre olarak belirtmek
em : varsayılan yazı büyüklüğüne göre oranlamak
pt : punto olarak belirtmek
px : piksel olarak belirtmek

Örneğin yazımızın 12 punto olması için yazmamız gereken komut:

      h2 { font-size: 12pt; }
   

3-Font-Style: İtalik Yazmak

Yazımızın sağa yatık (italic) olması için aşağıdaki kodu kullanabiliriz.

      h2 { font-style: italic; }

   

Eğer italik bir yazıyı iptal edeceksek aşağıdaki kodu yazmalıyız:

      h2 { font-style: normal; }

   

4-)Font-Weight: Kalın Yazmak

Yazımızın kalın (bold) olmasını istiyorsak aşağıdaki kodu kullanmalıyız.

      h2 { font-weight: bold; }

   

Eğer kalın bir yazıyı normal haline dönüştüreceksek aşağıdaki kodu yazmalıyız:

      h2 { font-weight: normal; }

   

Daha detaylı olarak aşağıdaki videoyu izleyebilirsiniz.

Css ID Ve Class Seçicileri

CSS'de oldukça kafa karıştıran bir konudur ID ve class. Bazen hangisini nerede kullanacağınızı kestiremeyebilirsiniz o yüzden rastgele kullanmışlarınız vardır aranızda.Bu yüzden sizlere bu yazımda ID Ve Class arasındaki farkı anlatmaya çalışacağım.İlk olarak ID ve Class nedir onu açıklayalım.


ID= ingilizce "Identity" kelimesinin kısaltılmışıdır ve Türkçe "Kimlik" anlamına gelmektedir. Tek bir varlığı tanımlar. Örneğin; hepimizin bir kimlik numarası vardır ve hiçbiri aynı değildir. HTML'de ID, tek bir element için kullanılır. Genellikle header, footer, navbar, sidebar gibi tekrar etmeyen alanları tanımlamak için kullanılır. Her sayfada ortak olarak kullanılan ID olabilir (header, footer, ...) ancak tek sayfada aynı isimde birden fazla ID olmamalıdır.


CSS'de   # (diyez)   işareti ile kullanılır.

Örneğin;

 <div id="stil">Hoş Geldiniz!</div>

Örnekte ID değeri "stil" olan bir DIV elementi görüyoruz. 

CSS dosyamızda bu elemente özel stil tasarlarken aşağıdaki 

şekilde kod yapısını oluşturmalıyız:



   #stil {
      font: 10pt Tahoma, Verdana;
      color: blue;
   }

Class= ID'lere benzer lakin amaçları farklıdır. ID'nin aksine tek sayfa içerisinde birçok kez tanımlanabilir. Sayfa içerisinde aynı özellikleri taşıyan yerler varsa özellikle yazı stilleri gibi (örneğin; başlıkların aynı renkte ya da boyutta olduğu yerler) Classkullanılmalıdır. Class'lar ID'de olduğu gibi Javascript içinde de olabilir.


CSS'de  . (nokta)  işareti ile kullanılır.

Örneğin;

 <div class="stil">Hoş Geldiniz!</div>
   

Yukarıdaki div elementi içinde yer alan class="stil", o div elementi için CSS özellikleri belirtmemizi sağlayan bir yoldur. CSS dosyamızda şu şekilde bir ifade varsa:

   .stil {
      font: 10pt Tahoma, Verdana;
      color: blue;
   }
   

CSS Nasıl Eklenir?

Bir önceki yazımda Css nedir sizlere bahsetmiştim.Şimdi ise Css'i nasıl kullanacağınızı sizlere anlatacağım.Css'i projeye dahil etmek için üç farklı yöntem vardır.Bunlar;

1. Stilleri Css Dosyanızdan Çağırın
   
   Öncelikle bir not defteri ya da CSS düzenleyici program açmalısınız.
   
   CSS Kodlarınızı CSS Kod Yapısı'na uygun olarak yazın ve kaydedin.
   
   HTML Sayfanızı açıp <head> ile </head> arasına aşağıdaki şekilde stil dosyanızın adını belirtin.
   
   

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

   
   href="DOSYA_ADI" ile belirttiğimiz yerde bizim kaydettiğimiz dosyanın adı yer almalı ve HTML sayfası ile CSS dosyası aynı klasörde bulunmalıdır. Farklı bir klasörde kullanmak istiyorsak HTML sayfasına göre konumu yazmamız gereklidir.
   
   Dosya adını doğru yazdıysak artık CSS dosyamızı HTML sayfamıza bağladık demektir. Yani CSS dosyamızdaki stilleri rahatlıkla HTML sayfamızda kullanabiliriz.
   
   
2. HTML sayfasında CSS yazmak
   
   HTML sayfamızda HEAD elementlerinin arasında STYLE elementi kullanarak stiller yaratmamız mümkün. Aşağıdaki örneğe bakalım:
   
   

     <html>
      <head>
         <title>Sayfa Başlığı</title>
         <style type="text/css">
            body { background-color:black; color:white; }
            p { font-family: Tahoma, Verdana; font-size: 12px; }
         </style>
      </head>
      <body>
         <p>Bu 12 piksel Tahoma yazı tipi ile yazıldı.</p>
      </body>
      </html>

   
   Örneğe baktığımızda <style type="text/css"> elementini HEAD elementi içinde açıp kapatıyor ve içine stillerimizi yazıyoruz. Böylelikle dosyamızda belirttiğimiz stiller dışarıdan bir dosyaya bağlı olmaksızın kullanılabilir olacaklar.
   
3. HTML elementi içerisinde stil belirtmek
   
   Bazen stil dosyası ya da STYLE elementi kullanmadan hızlı çözümler üretmek gerekebilir. Böyle durumlarda her elementin style="" özelliği kullanıma hazırdır. CSS kodlarını element içinde açacağımız STYLE özelliğine sıralarız. Örneğin;
   
   

    <p style="font-family: Tahoma; font-size: 12px;">
            Bu 12 piksel Tahoma yazı tipi ile yazıldı.
         </p>
      

CSS NEDİR?

CSS NEDİR?

CSS bir kısaltmadır. "Cascading Style Sheets" kelimesinin baş harflerinden oluşur. Dilimizdeki anlamı: Basamaklı Stil Sayfası.

Stiller, bir HTML elementinin nasıl görüneceğini belirleme olanağı sağlar.

Stiller HTML 4.0'da bir problemi çözmemizi sağlar. Siteyi görselleştirme!

HTML dosyamızın daha anlaşılır olmasını sağlar. Stillerimiz tek bir dosyada toplanır ve kolaylıkla okunur - değiştirilir.

Stil dosyalarımızın uzantısı *.css dir. CSS Dosyası birçok stil barındırabilir.

BOOTSTRAP GRİD SİSTEMİ

Grid sistemi Bootstrapın temel taşıdır diyebiliriz.Çünkü tüm yapı bu sistem üzerine kurulmuştur.Grid ingilizce bir kelime olup Türkçe çevirisi ızgaradır.Toplamda maksimum 12 satır ve sütun oluştan ızgaraya benzer bir yapı olduğunda grid(ızgara) sistemi denir.

Resimde de gördüğünüz üzere bir satırda toplamda 12 birimlik alan yani 12 birimlik sütun oluşturabilir.Grid sistemiyle site tasarımlarında neyin nerede olacağını daha kolay şekilde ayarlayabiliriz bunun yanı sıra Grid sistemi bizlerin responsive tasarım yapmamıza olanak sağlayan bir yapıdır.

Bootsrap Grid Sistemi 3 ana yapıdan oluşur.Bunlar;

1. Kapsayıcı(Container) :Bootstrap ızgara sisteminde satırların tam yerleşmesi için bir kapsayıcı elemana ihtiyacı vardır. Kapsayıcı eleman siteye yapısına göre iki farklı sınıf alır.
   • container : sabit genişlikteki sitelerde
   • container-fluid : esnek yapılı sitelerde
2. Satırlar(Row): Her 12’li kolonu kapsayan bir kapsayıcıdır. Sağdan soldan eksi 15px ile ana kapsayıcının bıraktığı boşluğu doldurur, böylelikle kolonları aralarına konulan boşlukların sondaki kutuyu aşağı atması engellenmiş olur. kolonlar float:left ile yan yana dizildiği için satır aynı zamanda taşan kolonları satır başı yaptırmaya yarar.
   
   
3. Sütunlar(Col): Her kolon 15px’lik sağ ve sol paddingleri vardır. Bu paddingler satır ile olan mesafeleri ayırmak için eklenmiştir. Bu her kolon için aynı etkiyi yapacaktır ve yan yana kullanılan kolonlar arasındaki mesafe 30px olacaktır.
   
   
   
   
   

Sublime Text Editörü

Kod dünyasında kodlarımızı rahat yazabilmemiz için birçok yardımcı kod editörü vardır.Bugün ben de sizlere Sublime Text Editöründen bahsedeceğim ve bilgisayarlarınıza nasıl kurabileceğinizi anlatacağım.

Kısaca Sublime Text nedir dersek  yazımın başında da bahsettiğim üzere Sublime Text bir kod editörüdür. Sublime Text sayesinde Html kodlarını CSS kodlarını kolaylık ile yazabilirsiniz. Sublime Text‘te bulunan bir çok eklenti bulunmaktadır. Bu eklentiler sayesinde hem kod yazmayı zevkli hale getirebilir hemde daha kolay kod yazabilirsiniz.



Peki Sublime Text ücretsiz bir editör müdür diye sorduğunuzu duyar gibiyim.Sublime Text neredeyse ücretisz bir editördür.Evet yanlış duymadınız "neredeyse"..

Sublime Text programı kullanırken günde maksimum bir kaç kez size full sürümü almanızı önerecek mesaj ekranını yayınlar siz ise bu ekranda hayır seçeneğini seçerek programı ücretsiz olarak kullanmaya devam edebilirsiniz.İşte bu yüzden full sürümü neredeyse ücretsizdir diyebilirim.

Sublime Text Nasıl Kurulur?

https://www.sublimetext.com/ bağlantısından işletim sisteminize uygun  olan dosyayı indirip programı çok basit bir şekilde kurabilirsiniz.

Daha önce bahsetmiş olduğum Lorem İpsum metinlerini ise Sublime Text kendi içinde barındır.Kod bölmesine Lorem yazıp "Tab" tuşuna bastığınıza size otomatik olarak 1000 karakterlik hazır bir Lorem İpsum metnini size sunar.


Kurulum  Videosu:

Bootstrap Kurulumu ve Projeye Dahil Edilmesi

Bootstrap iki şekilde sitemize entegre edilebilir.

1. Eğer localde çalışacaksak bootstrap ile ilgili kütüphaneyi https://getbootstrap.com/docs/4.0/getting-started/download/ adresinden bootsrap,javascript scriptleirni indirebilirz ve projemize dahil edebiliriz.Bunun yanı sıra jquery script dosyalarını da https://jquery.com/ sitesinden indirip projemize entegre edebiliriz
   
2. Eğer sunucu tabanlı çalışıyorsak Bootsrap tüm script kodlarını bizim için hazırlıyor.
   Tek yapmamız gereken https://getbootstrap.com/docs/4.0/getting-started/introduction/
   adresinden
   
   
   
   resimde de göreceğiniz üzere "Starter Template" başlığı altındaki kodları kopyalaıp sitenizin tasarım sayfasına yapıştırarak Bootstrap'ı sitenize entegre etmiş oluyorsunuz.Geriye kalan sadece Bootstrap css kütüphanesinden istediğiniz tasarım kodlarını çağırmak ve sitenizi tasarlamak.
   
   Aşağıdaki videodan yukarda anlattığım adımları nasıl yapabileceğinizi izleyebilirsiniz
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

PlaceHolder Hazır Resimler

Placeholder

Bir önceki yazımda "Lorem İpsum" yapısını sizlere anlatmıştım.Lorem İpsum  hazır metinler oluşturmamızı sağlayarak site tasarımlarıımızda bize kolaylık sağlıyordur.Peki Placeholder bize nasıl katkı sağlıyor?En az Lorem İpsum metinleri kadar katkı sağladığı kesin.Şimdi sizlere kısaca placeholder nedir ve nasıl kullanılır bahsedeceğim.

Arkadaşlar site tasarımızı yaparken önizlemek açısından bize çoğu zaman istediğimiz boyutlarda resimler bulmak gerekiyor.Çoğu zaman bu resimleri bulmakta zorlanıyoruz keza bazı resimler telif hakkı olduğundan sitemizin kapanmasına kadar yol açabilir.Peki bu durumlarda ne yapacağız?

Tam da işe bu konuda https://placeholder.com/ sitesi yardımımıza koşuyor.
Bu linke tıklayarak  sadece "yükseklik" ve "genişlik" değerlerini girerek istediğimiz boyutlarda bir resmi placeholder bizim için otomatik oluşturuyor.Tek yapmamız gereken ise oluşturulan linki sitemizin ilgili kod bölmesine yapıştırmak.Bu sayede sitemizi tasarlarken önizlemede kullanacağımız resim alanlarını placeholder resimleri ile doldurabiliriz ve işimizi kolaylaştırabiliriz.

Lorem İpsum Nedir ?

Lorem İpsum

Kod dünyasının içindeyseniz illaki "Lorem İpsum" yapısını duymuşsunuzdur ama peki ne olduğu hakkında bir bilginiz yok mu ? O halde size bu yazımda Lorem İpsum Nedir? kısaca bahsedeceğim.

Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır.


Şimdilerde dijital dünyada sıkça karşımıza çıkan Lorem Ipsum aslında  gördüğünüz üzere 16.yüzyıllara kadar  dayanıyor ve yıllardan beridir matbaa içerisinde de kullanılıyor. Lorem Ipsum en basit haliyle yapılan yazılı çalışmalarda yazının nasıl görüneceğini anlayabilmemiz için kullandığımız taslak bir metindir.

Peki bu Lorem İpsum'u dijital dünyada daha doğrusu web tasarım dünyasında ve konumuz olan Bootstrap'ta nasıl kullanırız.Şimdi bu sorumuzun cevabını verelim.

https://tr.lipsum.com/ sayfasından istediğimiz karakter sayısında birçok dil desteğiyle beraber istediğimiz text metinleri oluşturabiliriz.Böylelikle sitemizi tasarlarken yani tasarım aşamasındayken istediğimiz uzunlukta "numune" metinler oluşturabiliriz ve ben buraya ne yazsam da dolu gözükse derdinden kurtulmuş oluyoruz.

Lorem İpsum tarihçesini aşağıdaki linkten de izleyebilirsiniz.

Bootstrap 4 İle Gelen Yenilikler

Bootstrap son olarak 4.versiyonunu bizlere tanıtmıştır.Peki Bootstrap 4 ile daha önceki versiyonlardan farklı olarak bizlere neler sunulmuştur? O halde hep birlikte inceleyelim.

Bootstrap 4 Yenilikleri Neler?

1. Yeni Buton Stilleri : Düğmelerin yepyeni bir tarzı var. Onlar üzerinde kesinlikle “düz” gitme ve geçişlerini kaldırıldı. Ayrıca, btn-outline-*sınıflar getirilmiş durumdadır.
2. Görüntü Başlıkları: rems, Kullanımı yeni bir tipografik bileşeni tanıtmak için ekran başlığı istihdam edilmiştir. 3 zaten desteklenir sınıflar gibi Bootstrap h1, h2onlar başlıkları sanki ve benzeri öğeleri görüntülemek için. 4 Bootstrap sayfanın öne çıkan bir başlık gerektiğinde kullanılması gereken bu yeni bileşen sayesinde, uygulayarak geliştiriciler için olasılığını arttırır.
3. FlexBox: Bootstrap bu sürümünde büyük yeniliklerden biri için destek FlexBox CSS daha basit ve esnek düzen seçenekleri sunar
4. Beş Farklı Görünüm Modu:
   
   -Ekstra küçük <544 px)-(XS)
   
   Küçük ( ≥544 px)-(SM)
   
   Orta ( ≥768 px)-(MD)
   
   Büyük ( ≥992 px)-(LG)
   
   (-Ekstra büyük ≥1200 px)-(XL)
5. IE 8 desteklemez.
   
   Bootstrap 4'ü daha detaylı incelemek isterseniz..
   
   
    videosunu izlemenizi önerirm.

Responsive ve Adaptive Tasarım Arasındaki Farklar

Bu iki tasarım yapısını illaki duyduğunuzu ama herkes gibi arasındaki farkların ne olduğunu merak ettiğinizi duyar gibiyim.O halde bu yazımda aklınızdaki karmaşıklığa bir son verelim.Öncelikle Responsive tasarım nedir?Adaptive tasarım nedir? sorularının cevaplarını verdikten sonra Responsive ve Adaptive arasındaki benzerliklere ve farklara değinmeye çalışacağım.

Responsive Tasarım: Kısacası tarayıcınızla duyarlı hareket eden sitelere denebilir. Tarayıcınızı sağ alttan veya sağ yandan sola doğru küçültürseniz sitenin verdiği tepkiyi görebilirsiniz. Siz sayfayı ne kadar büyütürseniz, web siteniz de sayfaya o kadar uyumluluk göstererek büyür.

http://www.liquidapsive.com/ linkine tıklayıp sağ üstte yer alan listeden "Responsive" seçerek de bizzat kendiniz deneyebilirsiniz.

Adaptive Tasarım: Adaptive sizin verdiğiniz ölçülerin dışına çıkmaz ve o ölçülere duyarlılık gösterir. Yani Responsive tasarım gibi tarayıcılarınıza uyumlu olarak hareket etmez.

Yine aynı şekilde   http://www.liquidapsive.com/ tıklayığ sağ üstte yer alan listeden "Adaptive" seçeneğini seçerek bizzat Adaptive tasarımın inceleyebilirsiniz.

Adaptive ve responsive’in benzerlikleri

• Adaptive tasarım ve responsive tasarım birbirlerine oldukça yakın kavramlardır. Hem adaptive tasarım hem de responsive tasarım, görüntülenmekte olduğu cihazın özelliklerini tespit ettikten sonra, kendisini o cihaza göre ayarlama prensibi ile çalışır. Her iki tasarım yöntemi de farklı ekran boyutlarına, çözünürlüklerine, kullanım şartlarına ve gerekliliklerine uyumlu hale gelerek kullanıcı deneyimini geliştirmeyi hedefler.

Adaptive tasarım ve responsive tasarım arasındaki fark

• Adaptive tasarım ve responsive tasarım arasındaki en önemli fark, responsive tasarımın esnek olmasıdır. Responsive sitelerde sabit ölçülerden ziyade akışkan, ekran boyutlarına bağlı ölçüler kullanılır. Mesela bir sütunun enini 200 piksel olarak değil, %30 olarak kodlarsınız. Bu durumda ekranın genişliği ne olursa olsun, sütun ekranın %30’unu kaplar. Böylece sayfa, görüntülendiği ekrana akarak içine dolar.
• Adaptive tasarımda esnek bir yerleşim kullanılmaz. Bunun yerine, belli ekran ölçüleri belirlenir ve bu ölçülere göre sabit yerleşimli ekran tasarımları yapılır. Mesela 320px, 600px, 960px ve 1200px genişliğinde dört ekran tasarlanır. Tarayıcı penceresinin genişliği bu değerlere tam denk gelmiyorsa, ölçülere uygun bir küçük yerleşim kullanır. Sayfa yerleşimleri arasındaki geçişler atlamalı olduğu ve sayfalar pencereye göre esnemediği için, yanlarda kullanılmayan alanlar kalır.
• Adaptive tasarımın kendine has bir özelliği, kod yazımında katmanlı bir yaklaşım sergilemesidir. Sayfa ilk başta en temel özelliklere sahip tarayıcılarda dahi problemsizce görüntülenecek şekilde kodlanır. Ardından, daha gelişmiş istemci yapılanmaları isteyen, daha karmaşık görsel ve işlevsel özellikler katman katman eklenir. Bir cihaz herhangi bir katmanın gerekliliklerini karşılayamıyorsa, mesela tarayıcısı kullanılan kimi özelliklere sahip değilse, o katmana kadar yükleyip çalıştırdığı kod, içeriği kullanıcı deneyimine olumsuz bir etki yapmadan görüntülemesine yeter. Böylece her tür sistemde çalışabilecek bir yapı hedeflenir.

Eğer bir site tasarlamayı düşünüyorsanız ve hala  Responsive Tasarım mı? yoksa Adaptive Tasarım mı kullansam diye düşünüyorsanız, umarım bu yazı size faydalı olmuştur :)

Bootstrap Tarayıcı Hataları

Bootstrap kullanırken bazen karşınıza çözülemeyecek sorunlar çıkabilir.Bu yüzden dolayı asla sorunu kendinizde görmeyin ve sizlere bu yayınımda Bootstrap'ın bu eksikliğinden bahsetmek istedim.O halde devam edelim..

Bootstrap  gelişime açık bir yapıya sahiptir.Bu yüzden dolayı sürekli olarak güncellenmekte ve beraberinde bazı hataları da getirmektedir.Ama merak etmeyin Bootstrap web tarayıcılarında karşılaşabileceğiniz hataları bir liste halinde sizinle paylaşmaktadır.Böylelikle sizde sitenizi tasarlarken karşılaşmış olduğunuz hataların nedenlerini http://trbootstrap.com/browser-bugs/ linkine tıklayarak kolayca öğrenebilirsiniz.

Bootstrap Yapısını Destekleyene Cihazlar Ve Tarayıcılar

Hangi Cihazlar ve Tarayıcılar Bootstrap'ı Destekler?

 Bootstrap yukardaki tabloda da görmüş olabileceğiniz üzere tüm Android,iOS,Mac OS X ve Windows işletim sistemlerini kullanan cihazlarda desteklenmektedir.Peki web tarayıcılarında ne gibi farklılıklar var isterseniz hep birlikte tablomuzu incelemeye devam edelim.

1. Chrome: Tüm işletim sistemlerinde Bootstrap'ı desteklemektedir.
2. Firefox: İOS işletim sistemi hariç diğer tüm işletim sistemlerinde Bootstrap'ı desteklemektedir.iOS işletim sistemini desteklememe sebebi ise İOS işletim sisteminde Firefox tarayıcının bulunmamasıdır.
   
   
3. İnternet Explorer: Sadece Windows işletim sistemlerinde kullanılabilen bir tarayıcı olduğu için Bootstrap yayınlarınızı "İnternet Explorer"  tarayıcısıyla  görüntülemek isterseniz mutlaka bir Windows işletim sistemine sahip olmanız gerekmektedir.
4. Opera: Firefox ve İnternet Explorer'dan farklı olarak tüm işletim sistemlerinde desteklenen bir web tarayıcı olmasına rağmen Opera,Android ve İOS işletim sistemlerinde yani kısacası mobil cihazlarda Bootstrap'ı desteklememektedir.
5. Safari: Android cihazlar da bulunmayan bir web tarayıcısı olmasının yanı sıra sadece İOS ve Mac OS X işletim sistemlerinde Bootstrapı destekler.Eğer Windows işletim sistemlerinde Safari tarayıcısında Boostrap ile yapılmış bir siteyi açmak isterseniz siteniz istediğiniz düzende görüntülemeyebilir.

Bu tabloda bahsetmemin amacı ise, eğer bootstrap ile bir site yapmayı düşünüyorsanız ve sitenizi önizleme yapmak istediğinizde bu tablodaki desteklenen cihazlar ve web tarayıcılarını bilmenizde ileride sorun yaşamamanız açısından fayda olacaktır.

Örnek Bootstrap Yayınları

Bootstrap ile ilgili ön bilginiz yoksa bile önceki yayınlarımdan yola çıkarak artık zihninizde bootstrabın ne olduğuna dair bir fikriniz olduğunu düşünüyorum.

Bu yazımda ise sizlere Bootstrap ile yapılmış örnek site tasarımlarını inceleyebileceğinz adresi vereceğim böylelikle aklınızda Bootstrap'a dair soru işareti kalmamış olacak.

Bootstrap Tasarımları linkinden Bootstrap ile yapılmış örnek site tasarımlarını inceleyebilirsiniz.Linke tıkladığınızda açılan sayfada responsive tasarımla ile yapılmış birden fazla site tasarımını inceleyebilirsiniz.İleride yapmak istediğiniz siteler için size ilham kaynağı olabilir :)

NEDEN BOOTSTRAP KULLANMALIYIZ?

Bu yazımda sizlere maddeler halinde neden bootstrap kullanmalıyız ? sorusunun cevabını vereceğim ve bir anlamda bootsrapın bizlere sağlamış olduğu kolaylıkları göreceğiz.

1. Bootstrap masaüstü,tablet ve tüm tarayıcılara uyumlu web uygulaması geliştirebiliriz.
   
   
2. Bootstrap bir web sitesi için gerekli olan tüm bileşenleri yapısında bulundurur.Bunlara örnek verecek olursak;
   Formlar,Butonlar,Tablolar,Uyarılar,Navigasyon Menu Bar,Sayfalandırma,Etiketler ve benzeri tasarım ögelerini söyleyebiliriz.
   
   
3. Bootstrap web sitesi geliştirmek için tüm yeniliklileri içinde barındırıyor.
4. Zamandan tasarruf: Geliştiricilere hazır kaynak kodlar sunan bir kütüphanesi vardır.
5. Özelleştirilebilir:Bootstrap özelleşti
6. Tutarlılık:Bootstrap ile tüm tarayıcılarda aynı ekran görüntüsünü alabilirsiniz.Yani google chrome'de başka internet explorer'da farklı görüntüler değil hepsinde aynı görüntüleri sağlayan bir yapısı vardır.
7. Gelişim: Bootstrap hali hazırda sürekli gelişen bir plartformdur.Geliştiriciler sık ve düzenli olarak yapılan güncellemelerle bootstrabın eksiklerini gidermeye çalışıyor.
8. Entegrasyon: Eğer yayında olan bir site üzerinde çalışıyorsanız ve hala bazı sorunlarınız varsa bootstrap size yardımcı olabilir.Tek yapmanız gereken bootstrap kütüphanesinden ihtiyacınız olan kodları  css ile ilgili ayarlarınızın olduğu kod bölmesine yapıştırmak.
9. Dökümantasyon: Bootstrap yeni bir platform olmasına rağmen tüm kaynakları başlangıçtan itibaren bizlere sunar.

İşte bootstrap platformun bize sunduğu bir sürü avantaj vardır. Bu sayede şuan da ve gelecek açısında site tasarımlarının bir numaralı yardımcı elemanı olacak gibi gözüküyor..

BOOTSTRAPA GİRİŞ

Bootstrap twitter altyapısına benzer bir yapıya sahiptir.Ve zaten bootstrap twitterda çalışan iki mühendis tarafından geliştirilmiştir.

Peki bootstrabın ortaya çıkış tarihi ne zamandır ?

Bootstrap 19 Ağustos 2015 yılında bizlere sunulmuştur.

Bir önceki yazımda bootstrap nedir sizlere temel nitelikte bilgi vermiştim.Bu yazımda ise sizlere bootstrap nedir? sorusunun cevabını tam olarak vereceğim.

BOOTSTRAP NEDİR?

Açık kaynak kodlu, ücretsiz bir CSS frameworktür yani kısacasası css kodlarını içinde hazır olarak barındıran tasarım aracıdır.


Bootstrap ile kolayca telefonlar, tabletler ve masaüstü bilgisayarlar için farklı ve cihaz büyüklüğüne uygun şekilde sitenizin gözükmesini sağlayan temalar/tasarımlar yapabilirsiniz.Tam olarak aşağıdaki resimde demek istediğimi anlayacaksınız..





Bootstrap ile resimde gördüğünüz üzere  responsive tasarım yapabilirsiniz.

Bir site için gerekli olan tüm elemenleri (form ögeleri, etiketler, tablolar, uyarı ve bilgi metinleri, navigasyon bar, sayfalandırma modülü, açılan menüler, farklı özellikte butonlar vb bir çok tasarım ögesini) içinde barındıran Bootstrap tasarım yaparken bu hazır elementleri kullanarak bütün cihazlara uygun tasarımlar geliştirmenize yarar.


Yani her şeyi hazır olan kodlarla yeni bir tasarım ortaya koymak çok basit ve pratiktir. Stiller, imajlar , js’ler daha önceden sistemin içine monte edilmiştir. Sizin yapacağınız tek şey bunları çağırmaktır.

BOOTSTRAP İLE SİTE TASARIMI

   Gün geçmiyor ki internet sayfası olmayan kurum kalmasın.Web'de gezerken güzel site tasarımları gördüğünüzde  keşke benimde böyle bir sitem olsun diye aklınızdan geçirebilirsiniz.O halde doğru adrestesiniz.

   Sadece temel html ve css bilgilerinizle sizde harika tasarımlar yapabilirsiniz.Nasıl mı?

   Bootstrap'ın bize sunduğu imkanlarla tabiki de..

   Aklınızdan" Bootstrap Nedir?" diye geçirdiğinizi de tahmin eder gibiyim.

   O halde bu ilk yayınımızda sizlere  "Bootstrap Nedir?" birazcık bahsedelim.

   Bootstrap açık kaynak kodlu bir Css frameworküdür.Yani tasarımcıya site tasarlarken yapmak istediği tasarımın css kodlarını ücretsiz ve hazır bir şekilde sunan bunun yanı sıra tüm cihazlarda (telefon,tablet,dizüstü,masaüstü,televizyon) uyumlu bir şekilde çalışan bir Css kütüphanesi diyebiliriz.