ile

İçerik bölümlerini ekleyelim

Geriye 3 tane bölümümüz kaldı. Daha sonra sitemiz bitiyor. Hakkımızda, Duyurular ve Kurumsal bölümlerini oluşturacağız.

http://html5doctor.com/designing-a-blog-with-html5/

http://html5doctor.com/designing-a-blog-with-html5/

Hakkımızda bölümü üç ayrı yazıdan oluşacak. Şirketimiz hakkında, referanslar, tarihçe ve kalite felsefemiz. Bunları tek bir bölümde (section) ama 3 ayrı makalede oluşturacağız.

Duyurular bölümü ise bir blog gibi olacak. Tıpkı facebook veya twitter’da paylaşıldığı gibi haber formatında olacak. Devam linkine tıklandığında yazının devamı görülecek.

Kurumsal bölümü ise şirket ile ilgili bilgileri barındıracak. Yine blog gibi çalışacak. Kenarda en son makalelerin başlantılarını içeren bir bağlantı listesi olacak. Burada da şirketin finansal tabloları gibi TTK’nın emrettiği kurumsal bilgileri barındıracağız.

Şimdi hakkımızda bölümünün makaleleri ile işe başlayalım ve boş bir makale oluşturalım. Makalelerimizin yine Google tarafından tanıması için microdata kullanacağız.

<section>
    <article itemscope itemtype="http://schema.org/Article">
      <header>
      <span itemprop="name"><a name="baslik"><h1>Başlık</h1></a></span>
      <p><time itemprop="pubdate" datetime="2010-10-29" pubdate>29 Ekim 2012</time></p>
      </header>
      <p>İçerik</p>
    </article>
</section>

Burada a etiketinin bir kullanımını daha görüyoruz. Href özelliği yani hedefi olmayan a etiketi, sayfamızın spesifik bölümlerine hakkimizda.html#baslik seklinde link verebilmemizi sağlar. Yani href olarak bu adresi kullandığımız bir a etiketi

Yine birden fazla makalemizi ayırmak için bir bağlantı lisesine ihtiyacımız var. Bunu da yan tarafta tutacağız.

Ürünler bölümündeki listeye benzeyecek.

<nav class="span3 yanliste">
    <ul class="nav nav-list">
        <li>Hakkımızda</li>
        <hr>
        <li><a href="hakkimizda.html#sirketimiz">Şirketimiz</a></li>
        <li><a href="hakkimizda.html#referanslar>Referanslarımız</a></li>
</li>
        <li><a href="hakkimizda.html#tarihce>Tarihçe</a></li>
        <li><a href="hakkimizda.html#kalitefelsefemiz">Kalite Felsefemiz</a></li>
    </ul>
</nav>

Şimdi içeriklerimizi yazıp yazımıza dahil edelim.

<section>
    <article itemscope itemtype="http://schema.org/Article">
        <header>
            <span itemprop="name"><a name="sirketimiz"><h1>Şirketimiz</h1></a></span>
            <p><time itemprop="pubdate" datetime="2010-10-29" pubdate>29 Ekim 2012</time></p>
        </header>
        <p>Kızılyıdız Matbaacılık A.Ş. İstanbul, Sirkeci de faaliyet göstermekte olan baskı şirketidir. Başlıca faaliyet alanları, davetiye, broşür, el ilanı ve poster üretimi olan firma, aynı zamanda müşterilerine özel baskı çözümleri de sunmaktadır. Hali hazırda kendi ajanda ürünlerini Radikal Ajanda  markasıyla pazarlayan şirket, aynı zamanda poster işleri yapan görsel sanatçılara da baskı işleri ile sponsor olmakta ve sanata ve santçıya destek olmaktadır. Şirket ayrıca üniversitelerin sanat ve görsel tasarım bölümleri ile birlikte tasarım yarışmaları yapmış ve birlikte projeler geliştirmiştir.</p>
    </article>
    <article itemscope itemtype="http://schema.org/Article">
        <header>
            <span itemprop="name"><a name="referanslar"><h1>Referanslarımız</h1></a></span>
            <p><time itemprop="pubdate" datetime="2010-10-15" pubdate>15 Ekim 2012</time></p>
        </header>
        <p>Kızılyıdız Matbaacılık A.Ş. olarak referanslarımızdan bazıları;
            <ul>
                <li>Açık Kaynak Maden Suları</li>
                <li>Uranyum Yazılım</li>
                <li>Yolgösteren Stratejik Danışmanlık</li>
                <li>Özgür Yazılım Çöpçatanlık Hizmetleri</li>
                <li>Atolye Atolyesi Sanat Galerisi</li>
                <li>Sınırsız Çay Felsefe Klübü</li>
            </ul>
        </p>
    </article>
    <article itemscope itemtype="http://schema.org/Article">
        <header>
            <span itemprop="name"><a name="tarihce"><h1>Tarihçe</h1></a></span>
            <p><time itemprop="pubdate" datetime="2010-10-14" pubdate>14 Ekim 2012</time></p>
        </header>
        <p>Kızılyıdız Matbaacılık A.Ş. 14 Mart 1971 yılında, İstanbul'da matbaacılıkta yeni teknolojilerin kullanımına yer açmak ve baskı hizmetlerine devrimci bir soluk getirmek amacıyla kurulmuştur. Bugüne kadar birçok sanat etkinliğinin hem sponsoru hem de düzenleyicisi olan şirket, görsel tasarım alanında birçok faaliyetlerde de buşunmuştur. Bugüne kadar birçok ödül alan firmamızın aldığı ödüllerden bazıları şunlardır:
            <ul>
                <li>1974 Balkan Matbaa Ödülleri Avrupa 3. sü</li>
                <li>1982 Mimar Sinan Üniversitesi En İyi Baskı Ödülü</li>
                <li>1994 Avrupa Güzel Sanatlar Derneği, Sanata Desten Ödülü</li>
                <li>1998 Kırtasiyeciler Odası, En yenilikçi Matbaa Ödülü</li>
                <li>2005 Görsel Sanatlar Derneği, Sanatın Dostu Ödülü</li>
                <li>2011 Kalite Derneği, Kalite Özel Ödülü</li>
            </ul>
        </p>
    </article>
    <article itemscope itemtype="http://schema.org/Article">
        <header>
            <span itemprop="name"><a name="kalitefelsefemiz"><h1>Kalite Felsefemiz</h1></a></span>
            <p><time itemprop="pubdate" datetime="2010-10-08" pubdate>8 Ekim 2012</time></p>
        </header>
        <p>Kızılyıdız Matbaacılık A.Ş. olarak biz, kalitenin ve tasarımın sadece bir süs veya iyi bir pr çalışması değil, şirketimizi var eden temel kavram olduklarına inanıyoruz. Alelade veya sıradan ürünler geliştirmek yerine, firmamız her ürününde sanatçı ve tasarımcı desteği almaya azami gayret göstermekte olup, inovasyon odaklı çalışarak kendi farkını ortaya koymakta ve her zaman tecrübesini yeni sanatçılarla ve tasarımcılarla paylaşmaya özen göstermektedir.</p>
    </article>
</section>

Bu sayfamız için içeriklerimiz tamam. Şimdi sayfamızın nasıl göründüğüne bir bakalım:

Ancak biz yazıların ayrı ayrı, tab halinde görünmesini istiyoruz. Bunu yapmamıza Twitter Bootstrap kütüphanesi izin veriyor. Dokümanlara baktığımızda karşılaştığımız tabbable özelliği işimizi görecektir:


<div class="tabbable"> <!-- Only required for left/right tabs -->
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
    <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
      <p>I'm in Section 1.</p>
    </div>
    <div class="tab-pane" id="tab2">
      <p>Howdy, I'm in Section 2.</p>
    </div>
  </div>
</div>

Biz de sayfamızı bu hale getirelim. Çok sık kullandığım bir araç da W3C Checker. Yani eğer yazdığınız html kodunda bir hata varsa bunu otomatik olarak kontrol ediyor. Textmate programında mevcut:

Ama siz de http://validator.w3.org/adresine giderek kendi kodunuzu otomatik olarak kontrol ettirebilirsiniz.  Eğer yemyeşil This document was successfully checked as HTML5! mesajını gördüyseniz ne mutlu size, hata bulduysa tek tek düzeltmemiz gerekiyor.


<section class="tabbable tabs-left">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#sirketimiz" data-toggle="tab">Şirketimiz</a></li>
        <li><a href="#referanslar" data-toggle="tab">Referanslar</a></li>
        <li><a href="#tarihce" data-toggle="tab">Tarihçe</a></li>
        <li><a href="#kalitefelsefemiz" data-toggle="tab">Kalite Felsefemiz</a></li>
    </ul>
    <div class="tab-content">
        <article class="tab-pane active" id="sirketimiz" itemscope itemtype="http://schema.org/Article">
            <header>
                <h3><span itemprop="name">Şirketimiz</span></h3>
                <p><time itemprop="pubdate" datetime="2010-10-29">29 Ekim 2012</time></p>
            </header>
            <p>Kızılyıdız Matbaacılık A.Ş. İstanbul, Sirkeci de faaliyet göstermekte olan baskı şirketidir. Başlıca faaliyet alanları, davetiye, broşür, el ilanı ve poster üretimi olan firma, aynı zamanda müşterilerine özel baskı çözümleri de sunmaktadır. Hali hazırda kendi ajanda ürünlerini Radikal Ajanda  markasıyla pazarlayan şirket, aynı zamanda poster işleri yapan görsel sanatçılara da baskı işleri ile sponsor olmakta ve sanata ve santçıya destek olmaktadır. Şirket ayrıca üniversitelerin sanat ve görsel tasarım bölümleri ile birlikte tasarım yarışmaları yapmış ve birlikte projeler geliştirmiştir.</p>
        </article>
        <article class="tab-pane" id="referanslar" itemscope itemtype="http://schema.org/Article">
            <header>
                <h3><span itemprop="name">Referanslarımız</span></h3>
                <p><time itemprop="pubdate" datetime="2010-10-15">15 Ekim 2012</time></p>
            </header>
            <p>Kızılyıdız Matbaacılık A.Ş. olarak referanslarımızdan bazıları;</p>
                <ul>
                    <li>Açık Kaynak Maden Suları</li>
                    <li>Uranyum Yazılım</li>
                    <li>Yolgösteren Stratejik Danışmanlık</li>
                    <li>Özgür Yazılım Çöpçatanlık Hizmetleri</li>
                    <li>Atolye Atolyesi Sanat Galerisi</li>
                    <li>Sınırsız Çay Felsefe Klübü</li>     
                </ul>
        </article>
        <article class="tab-pane" id="tarihce" itemscope itemtype="http://schema.org/Article">
            <header>
                <h3><span itemprop="name">Tarihçe</span></h3>
                <p><time itemprop="pubdate" datetime="2010-10-14">14 Ekim 2012</time></p>
            </header>
            <p>Kızılyıdız Matbaacılık A.Ş. 14 Mart 1971 yılında, İstanbul'da matbaacılıkta yeni teknolojilerin kullanımına yer açmak ve baskı hizmetlerine devrimci bir soluk getirmek amacıyla kurulmuştur. Bugüne kadar birçok sanat etkinliğinin hem sponsoru hem de düzenleyicisi olan şirket, görsel tasarım alanında birçok faaliyetlerde de buşunmuştur. Bugüne kadar birçok ödül alan firmamızın aldığı ödüllerden bazıları şunlardır:</p>
                <ul>
                    <li>1974 Balkan Matbaa Ödülleri Avrupa 3. sü</li>
                    <li>1982 Mimar Sinan Üniversitesi En İyi Baskı Ödülü</li>
                    <li>1994 Avrupa Güzel Sanatlar Derneği, Sanata Desten Ödülü</li>
                    <li>1998 Kırtasiyeciler Odası, En yenilikçi Matbaa Ödülü</li>
                    <li>2005 Görsel Sanatlar Derneği, Sanatın Dostu Ödülü</li>
                    <li>2011 Kalite Derneği, Kalite Özel Ödülü</li>     
                </ul>
        </article>
        <article class="tab-pane" id="kalitefelsefemiz" itemscope itemtype="http://schema.org/Article">
            <header>
                <h3><span itemprop="name">Kalite Felsefemiz</span></h3>
                <p><time itemprop="pubdate" datetime="2010-10-08">8 Ekim 2012</time></p>
            </header>
            <p>Kızılyıdız Matbaacılık A.Ş. olarak biz, kalitenin ve tasarımın sadece bir süs veya iyi bir pr çalışması değil, şirketimizi var eden temel kavram olduklarına inanıyoruz. Alelade veya sıradan ürünler geliştirmek yerine, firmamız her ürününde sanatçı ve tasarımcı desteği almaya azami gayret göstermekte olup, inovasyon odaklı çalışarak kendi farkını ortaya koymakta ve her zaman tecrübesini yeni sanatçılarla ve tasarımcılarla paylaşmaya özen göstermektedir.</p>
        </article>
    </div>
</section>

Sol tab navigasyonunu sol tarafta kullandığımız için yanlisteye de gerek kalmadı. Yanlistenin oldu 3 birimlik kutuyu silelim ve sectionun boyunu 8 birimden 12 birime çıkaralım. Sayfamızın son hali şöyle olmalı:

Hakkımızda bölümünü bitirdik. Bir sonraki yazıda da duyurular ve kurumsal bölümlerini yapacağız.

Dayanışmayla!
Meraklı Bilişimci

Yorumla

Yorum