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.