ile

Yayınlama öncesi son düzeltmeleri de yapalım

Aslında neredeyse her şey hazır. Yapmamız gereken bir kaç düzeltme var. Bu tarz düzeltmeler hazırlayacağınız projelerde sizin de başınıza sıkça gelecek. Bu nedenle ben de böyle bir yazı hazırlamayı uygun buldum.

Daha önce yaptığımız tasaırmla ilgili bir kaç tane göze çarpan nokta mevcut. Bazı yan listelerin simetrik görünmemesi durumu. Bir kaç tane örnek verelim. Bunlara siz de tasarımlarınızda dikkat etmelisiniz. Aslında en baştan temiz bir grid yani ızgara sistemi kullanmanızı öneririm. Kitabımızın konusu Kullanıcı Arayüzü (User Interface) tasarımı olmadığı için bu konulara girmeyeceğiz şimdilik.


Burada gördüğümüz asimetrik farklılıkları düzenlememiz lazım. Bunun için header kısmında kullandığımız ölçeği tüm sayfalarda kullanarak işe başlayabiliriz. Header kısmında logo ve nav bölümleri için kullandığımız temel ölçü 4 birime 8 birim. Biz de diğer sayfalarımızı bu ölçüye göre ayıracağız.

Ana sayfadaki bilgiler kısmını ve footer bölümünün yapısını da biraz değiştirmemiz gerekiyor. Sayfalarda altın oranın (1/1.618) dışındaki her türlü asimetrik görüntü gözü çok yorar. Bir ipucu olarak dikkat ederseniz Twitter dahil bir çok sayfa, bölümlerini bu orana göre boyutlandırır. Siz de tasarımlarınızda bu oranı kullanabilirsiniz.

Biz bilgiler ve footer öğrelerimize geri dönelim. Daha önce yaptığımız bilgiler kutularında 10 piksel padding (iç boşluk) kullanmazsak yazılarımız kutunun kenarına yapışıyordu. Padding kullandığımızda da 4 birim 4 birim 4 birim boyutlandırdığımız kutulardan biri alt satıra düşüyordu. Bu yüzden kutuları 4 birim 3 birim 4 birim olarak boyutlandırmışız. Bu da güzel olmayan asimetrik bir görüntü oluşturmuş. Buna karşı yapmamız gerekn şey şu. Diyelim ki elimizde bir kutumuz var ve boyunun büyümeden içe doğru boşluklanmasını istiyoruz.


<div class="row">
    <div id="kutu-1" class="span6">
    </div>
    <div id="kutu-2" class="span6">
    </div>
</div>

Eğer bu haliyle kutulara padding uygularsak ikinci kutu aşağı satıra düşer. Bunun için şöyle bir yol izlememiz gerekiyor.


<div class="row">
    <div class="span6">
        <div class="bosluklu">
        </div>
    </div>
    <div class="span6">
        <div class="bosluklu">
        </div>
    </div>
</div>

Biçimlendirmeyi de şu şekilde yapmalıyız:


.bosluklu
{
    padding: 10px;
}

Bunu bu şekilde yaparsak kutularımız aşağı satıra düşmez. Burada anlamanızı istediğim bir mantık var. Twitter bootstrap kütüphanesi aslında bizim görünümle ilgisi olmayan ve bilgiyi temsil eden class veya id özelliklerimizi ayrı tutmamızı istiyor. Bu çok akıllıca ve doğru bir yaklaşım. Diğer projelerimizde de bilgiyi ve sunumu birbirinden ayrı tutma ilkesini kullanmamız lazım. Bu sayede farklı platformlarda, farklı şekillerde sunacağımız bilginin kaybını ve sunumun hasarlı olmasının da önüne geçmiş oluyoruz. Özellikle daha sonra açıklayacağımız MVC (model-view-controller) mantığında bu kavramı anlamak çok gerekli.

Şimdi kendi sayfamıza dönelim. Anasayfadaki bilgilerimiz şu şekildeydi.

Footer (altbilgi) kısmımız da şu şekilde:

Sayfamızın kodlarını biraz değiştirdik. Nereleri değiştirmişiz bunun için gtihub’a bir göz atalım. Git hakkında bilginiz yoksa, ekte yer alan “Github kullanımı” konusundaki makaleleri okumanızı tavsiye ederim. Özellikle uzun süre çalıştığımız kodlarda yaptığımız değişikliklerin kaydını tutması açısından Git mükemmel bir araç. Burada – sildiğimiz satırları, + ise eklediğimiz satırları gösteriyor. CSS dosyasında yaptığımız değişiklikleri şu şekilde verdi:


 #bilgiler > article
 {
-    padding: 10px;
-    border: 1px solid #e8e8e8;
     border-radius: 5px;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
@@ -38,22 +36,35 @@ min-height: 300px !important;
     height:242px;
 }

-#bilgiler
+.footerbox
 {
-    padding-bottom: 20px;
-    padding-top: 20px;
+    margin-top:20px;
+    margin-bottom:20px;
+    border-radius: 5px;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    background: #1b1b1b;
+    min-height:200px;
 }

-footer
+.kutuyazisi {
+	padding: 5px 15px
+}
+
+#bilgiler
 {
-    margin-top:20px;
+    padding-bottom: 10px;
+    padding-top: 20px;
 }

-#footer-content
+footer
 {
+    position:absolute;
+    top:900px;
+    overflow: auto;
     background: #252525;
     color: #999;
-    padding:10px;
+    margin-top:10px;
 }

 footer h4
@@ -71,11 +82,10 @@ footer a
     list-style:none;
 }

-#footer-floor {
+.footer-floor {
     color: #999;
-    background: #1b1b1b;
     padding: 10px;
-    text-align:right;
+    text-align:center;
 }

Yaptığımız işlemlere şimdi sırayla bakalım:

  1. Bilgiler içindeki article etiketlerinden boşluğu kaldırmışız
  2. footerbox adında yeni bir etiket oluşturmuşuz. Onun da alt ve üstündeki boşlukları kaldırmışız.
  3. Yukarıda belirttiğimiz gibi kutuyazısı adında bir içerik sınıfı oluşturmuşuz ve kutuları onunla tanımlamışız.
  4. bilgiler id’sine sahip etiketlerden de boşlukları kaldırmışız.
  5. Footer etiketlerimizin yerini position: absolute; özelliği ile sabitlemişiz. Bu yeni bir özellik. Position özelliği bize öğelerimizin yerini belirli koşullara göre belirlememizi sağlayan bir araç. Bunun diğer özelliklerini ve kullanımlarını araştırmayı size bırakıyorum.
  6. Footer etiketimizin üstünde sınır boşluğu olarak 10 piksel belirlemişiz. Sayfalarımızda öğeler arasındaki boşlukların sabit olmasına özen göstermemiz, profesyonel bir görüntü elde etmemiz açısından çok önemli. Biz sayfamızda öğeler arasındaki boşlukları 20 px olarak belirlemişiz. Peki neden burada 10px kullandık? Çünkü css koduna göz atarsanız üst taraftaki bilgiler öğesinin alt kısmında da 10 piksellik boşluk bıraktığımızı görürsünüz. Bu iki öğe arasına gelecek hayali sınır çizgisinin de simetrik olmasını sağlıyor.
  7. En alttaki her hakkı saklıdır bilgilerini içeren footer-floor etiketinin arka plan renklerini değiştirmişiz. Aslında footer içinde yer alan kutuları koyu gri, footer’in kendisini de gri yaptık. Siz de kendiniz istediğiniz gibi bir renk paleti kullanabilirsiniz.

Aslında ben tasarım olarak sadelikten yanayım. Bu konuda Micrsoft tarafından sunulan Metro UI tasarım yaklaşımını da araştırmanızı tavsiye ederim. Burada öğelerin kullanımını açıkladığımızdan biz o şekilde sade bir tasarım dili kullanamıyoruz. Ancak projelerinizde sadeliğe önem vermeniz hem erişilebilirlik hem de performans açısından çok düzgün bir yaklaşım olacaktır.

HTML kodumuzda yaptığımız değişikliklere de göz atalım ve yaptığımız iyileştirmeleri tek tek açıklayalım:

@@ -15,7 +15,7 @@
                 <div id="logo" class="span1">
                     <img src="img/logo.jpg" alt="Logo" />
                 </div>
-                <hgroup class="span2">
+                <hgroup class="span3">
                     <h1>Kızılyıldız</h1>
                     <h4>Matbaacılık A.Ş.</h4>
                 </hgroup>
@@ -23,10 +23,10 @@
             <div id="baglantilar" class="span8 navbar">
                 <nav class="navbar-inner">
                     <ul class="nav">
-                        <li><a href="anaSayfa.html">Ana Sayfa</a></li>
+                        <li><a href="index.html">Ana Sayfa</a></li>
                         <li><a href="hakkimizda.html">Hakkımızda</a></li>
                         <li><a href="urunler.html">Ürünlerimiz</a></li>
-                        <li><a href="haberler.html">Duyurular</a></li>
+                        <li><a href="duyurular.html">Duyurular</a></li>
                         <li><a href="kurumsal.html">Kurumsal</a></li>
                         <li><a href="iletisim.html">İletişim</a></li>
                     </ul>
@@ -49,52 +49,62 @@
             </div>
             <div id="bilgiler" class="row">
                 <article id="neyapiyoruz" class="span4">
-                    <h3>Ne yapıyoruz?</h3>
-                    <p>İstanbul'dasınız, davetiye, broşür, poster veya el ilanı'na ihtiyacınız var. Hem de 3 günde. Fiyatı da biraz uygun olsun ama sonuçlar temiz mi olsun? O zaman doğru yere geldiniz.</p>
+                    <div class="kutuyazisi">
+                        <h3>Ne yapıyoruz?</h3>
+                        <p>İstanbul'dasınız, davetiye, broşür, poster veya el ilanı'na ihtiyacınız var. Hem de 3 günde. Fiyatı da biraz uygun olsun ama sonuçlar temiz mi olsun? O zaman doğru yere geldiniz.</p>
+                    </div>
                 </article>   
-                <article id="neredeyiz" class="span3">
-                    <h3>Neredeyiz?</h3>
-                    <p>İstanbul'un tarihi merkezi Sirkeci'deyiz. Ama mesafeler sorun değil. Siz bize gelemezseniz, biz size geliriz. Siparişim ayağıma gelsin diyorsanız, o da olur. </p>
+                <article id="neredeyiz" class="span4">
+                    <div class="kutuyazisi">
+                        <h3>Neredeyiz?</h3>
+                        <p>İstanbul'un tarihi merkezi Sirkeci'deyiz. Ama mesafeler sorun değil. Siz bize gelemezseniz, biz size geliriz. Siparişim ayağıma gelsin diyorsanız, o da olur. </p>
+                    </div>
                 </article>  
                 <article id="farkımız" class="span4">
-                    <h3>Bizim farkımız</h3>
-                    <p>Kesin kalite garantisine ihtiyacınız varsa, ücretsiz motorsikletli kuryeyle baskı işlerim gönderilsin diyorsanız, fiyatlar uygun olsun ama fazla da gecikmesin 3 gün içinde elimde olsun istiyorsanız, aradığınız yer burası. </p>
+                    <div class="kutuyazisi">
+                        <h3>Bizim farkımız</h3>
+                        <p>Kesin kalite garantisine ihtiyacınız varsa, ücretsiz motorsikletli kuryeyle baskı işlerim gönderilsin diyorsanız, fiyatlar uygun olsun ama fazla da gecikmesin 3 gün içinde elimde olsun istiyorsanız, aradığınız yer burası. </p>
+                    </div>
                 </article>  
             </div>
         </section>
         <footer>
-            <div id="footer-content">
-                <div class="row">
-                    <nav class="span2 offset3">
-                        <h4>Bağlantılar</h4>
-                        <ul id="altListe">
-                            <li><a href="anaSayfa.html">Ana Sayfa</a></li>
-                            <li><a href="hakkimizda.html">Hakkımızda</a></li>
-                            <li><a href="kurumsal.html">Kurumsal</a></li>
-                        </ul>
-                    </nav>
-                    <div id="iletişim">
-                        <div id="adres" class="span2">
-                            <h4>Adres:</h4>
-                            Kızılyıldız Matbaacılık A.Ş.
-                            Denizler Mah.
-                            Eren Sok. No:68
-                            Sireci, Fatih 34110
-                            İstanbul TÜRKİYE
-                        </div>
-                        <div id="telefon" class="span2">
-                            <h4>Telefon</h4>
-                            Tel: +90 212 444 19 17
-                            Fax: +90 212 444 19 05
-                        </div>
-                    </div>
+            <div class="row">
+            <nav class="span3 offset1">
+                <div class="kutuyazisi footerbox">
+                    <h4>Bağlantılar</h4>
+                    <ul id="altListe">
+                        <li><a href="anaSayfa.html">Ana Sayfa</a></li>
+                        <li><a href="hakkimizda.html">Hakkımızda</a></li>
+                        <li><a href="kurumsal.html">Kurumsal</a></li>
+                    </ul>
+                </div>
+            </nav>
+            <div class="span4">
+                <div class="kutuyazisi footerbox">
+                    <h4>Adres:</h4>
+                    Kızılyıldız Matbaacılık A.Ş.
+                    Denizler Mah.
+                    Eren Sok. No:68
+                    Sireci, Fatih 34110
+                    İstanbul TÜRKİYE
+                </div>
+            </div>
+            <div class="span3">
+                <div class="kutuyazisi footerbox">
+                    <h4>Telefon</h4>
+                    Tel: +90 212 444 19 17
+                    Fax: +90 212 444 19 05
+                </div>
+            </div>
+            </div>
+            <div class="row">
+            <div class="span12">
+                <div class="footer-floor">
+                    <div id="copyright">Her Hakkı Saklıdır. 2012 Kızılyıldız Matbaacılık A.Ş.</div>
                 </div>
             </div>
-            <div id="footer-floor">
-
-                <div id="copyright">Her Hakkı Saklıdır. 2012 Kızılyıldız Matbaacılık A.Ş.</div>
             </div>
-
         </footer>
     </div>
     <script src="http://code.jquery.com/jquery-latest.js"></script>
  1. İlk iş olarak alt satıra düşme sorununu çözdüğümüzden header bölümünü tekrar toplam 12 birime yükselttik.
  2. Bağlantı listelerindeki eski dosya isimlerini düzelttik.
  3. Bilgiler bölümündeki kutularımızı taşmayı önlemek için kutuyazısı sınıfındaki div etiketlerinin içine taşıdık. Böylelikle kutularımızın her birinin boyunu 4 birim olarak eşitledik.
  4. Yine footer alt bilgi kısmındaki kutuları da kutuyazısı sınıfındaki div etiketlerinin içine taşıdık. Boylarını simetrik görüntü için 3 birim 4 birim 3  birim olarak belirledik. Aslında her birini 4 birim olarak belirleyebilirdik ancak kutlar arasında büyük boşluklar istemediğimiz için böyle birşey yapmadık. Çünkü görsel boşluklar birbiriyle bağlantılı öğelerin anlamsal olarak da birbirlerinden uzaklaşmalarına sebep olurlar.

Ana sayfada yaptığımız değişiklikler bu şekilde. Diğer sayfalarda da header ve footer kısımlarını tek tek düzeltmemiz gerekiyor.

Footer ve icerik kısmının son ve güzel halini görelim:

Burada vermek istediğim bir ek bilgi var. PHP gibi server tabanlı teknolojilerin ortaya çıkmasının büyük sebeplerinden bir tanesi de bu binlerce sayfadan oluşan HTML sayfalarında tekrar eden yapısal öğelerin yeniden kullanılmasına include özelliği ile olanak vermesi. Yani düşünün elinizde 100 sayfalık bir site var sadece bir bağlantı listesindeki etiketi değiştirmek istediğinizde 100 defa aynı işlemi yapmanız gerekiyordu. Halbuki tek bir şablon dosyasını header.php ve footer.php şeklinde çağırırsanız bir işlemde tüm sayfaların düzgün görünmesini sağlayabiliyorsunuz. İşte sunucu tabanlı teknolojilerin bir faydası daha. Sadece etkileşimlilik değil aynı zamanda verimlilik de sağlıyor.

Çok fazla yapmamız gereken bir şey kalmadı gibi.

  1. Yanliste içeren sayfalarımızı 4’e 8 birim boyuna getireceğiz.
  2. Bazılarından row etiketli sınıfları kaldıracağız.
  3. Footer’ın 900lük top özelliğini kaldırmamız gerekiyor. Uzun sayfalarda footer içeriğin üstüne binebilir. Bunun yerine icerik sınıfındaki section etiketimizin min-height özelliğini 790 piksel yapalım. Bu altbilginin çok yukarıda olduğu kısa sayfalar gösterilmesinin önüne geçecektir.
  4. Bağlantı listesi yerine nav-tabs özelliği olan sayfalarımızı da aynı 4 ve 8 birim ölçüsüne uygun hale getirmemiz gerekiyor. Bunun için css doyasına .nav-tabs sınıflı etiket özelliği olarak min-height: 280px !important; ekledik.

Kodlarımızın son hali için https://github.com/mtkocak/html5css3egitim adresine bakabilirsiniz. (Kitapta kodların tamamı burada yazacak.)

Sayfalarımızın son hallerine de bakalım:

1. Kurumsal Bölümü

2. Ürünler Bölümü:

3. İletişim Bölümü:

Gördüğümüz gibi sayfalarımız birbiriyle gayet uyumlu. Uyuma bu kadar çok önem vermemizin bir diğer sebebi de, sayfalar arası geçiş olduğu zaman gözün fazla değişikliğe maruz kalmaması. Yani kullanıcının yeni bilgileri algılaması için geçecek süreyi bir de yeni sayfa yapılarını anlamasına uğraşarak harcamasını istemiyoruz. Sonuçta elimizde çok kısıtlı (en fazla 18 saniye) bir algı ve dikkat süresi var. Bunu da iyi kullanmamız gerekiyor.

Websitemiz bitti. Hayırlı olsun. Eğer buraya kadar eksiksiz bir şekilde örnekleri yaptıysanız, artık internet sitesi yapmayı öğrendiniz demektir. Önemli bir konu ise öğrenecek şeylerin hiçbir zaman bitmediği. Her zaman yeni şeyler öğrenmeye azimli ve hevesli olmak bu işte başarılı olmanın anahtarıdır. Eğer bu ilkeyi korursanız ve öğrenmeyi, kendinizi geliştirmeyi severseniz, mesleğiniz de size bunun karşılığını verecektir. Bir sonraki yazıda FTP kullanarak yayınlamayı anlatacağım.

Dayanışmayla!
Meraklı Bilişimci

Yorumla

Yorum