D ile günlük

Tasarım desenlerine giriş

vibed kütüphanesi kullanarak tasarım desenlerine giriş

Tasarım desenlerine giriş

Bu bölümde günlüğün sayfa tasarımına bir başlangıç yapacağız.

Sayfa desenleri içinde nasıl tasarım desenleri kullanabileceğimizi öğreneceğiz.

Tasarım deseni olarak Pure CSS kütüphanesini kullanacağız.

Sizin için tasarım desenini oluşturdum. Bu tasarım desenini, kiraz.rar sıkıştırılmış dosyasını bilgisayarınıza indirerek kullanabilirsiniz.

Dosyayı açtıktan sonra public klasörünü kiraz dizinindeki public klasörünün üzerine yapıştırmak gerekiyor.

Bu dizine resim, tasarım desenleri ve javascript kaynak kütüklerini koyuyoruz.

Gene views klasörü içinde bulunan index.dt'yi, aynı isimli dizine kopyalamak gerekiyor.

Aslında biraz uzun olsa da tasarım deseninin son halini paylaşıyorum.

doctype html
html(lang='tr')
  head
    meta(charset='utf-8')
    |
    meta(name='viewport', content='width=device-width, initial-scale=1.0')
    |
    meta(name='description', content='D nin vibed kütüphanesi ile geliştirilmiş günlük.')
    |
    title D dili ile maceralar
    |
    link(rel='stylesheet', href='/css/pure/pure-min.css')
    |
    link(rel='stylesheet', href='/css/pure/grids-responsive-min.css')
    |
    link(rel='stylesheet', href='/css/stil.css')
  body
    #yerlesim.pure-g
      .yancubuk.pure-u-1.pure-u-md-1-4
        .baslik
          h1.gunluk-baslik Kiraz günlüğü
          |
          h2.gunluk-aciklama D dili ile yazılmış bir günlük
          |
          nav.nav
            ul.gezinme
              li.gezinme-elemani
                a.pure-button(href='https://programlama.tk') Programlama
              |
              li.gezinme-elemani
                a.pure-button(href='http://ddili.org') D dili
      |
      .icerik.pure-u-1.pure-u-md-3-4
        div
          // Tüm günlük kayıtları
          .posts
            h1.icerik-altbaslik Sabitlenmiş gönderi
            |
            // Tek bir günlük gönderisi
            section.gonderi
              header.gonderi-ust-bolum
                img.gonderi-resim(width='48', height='48', alt="Dagıl dıgıl", src='/resim/avni.jpg')
                |
                h2.gonderi-baslik D ile vibed örneği
                |
                p.gonderi-yazan
                  | Yazan
                  a.gonderi-yazan(href='#') Avni
                  |  konu
                  a.etiket.etiket-tasarim(href='#') Dafıl
                  |
                  a.etiket.etiket-kirmizi(href='#') Dıfıl
              |
              .gonderi-aciklama
                p
                  | Bu bölümde D'nin vibed kütüphanesini kullanarak bir günlük yazmaya çalışacağız.
                  | Aslında henüz sadece tasarım halinde. Gördüğünüz gibi. Sadece yeni bir CSS tasarım
                  | deseni kullandım – Pure CSS
          |
          .posts
            h1.icerik-altbaslik Son gönderiler
            |
            section.gonderi
              header.gonderi-ust-bolum
                img.gonderi-resim(width='48', height='48',
                alt="Erdem'in resmi", src='/resim/erdem.svg')
                |
                h2.gonderi-baslik Ekmek yapımının incelikleri
                |
                p.gonderi-yazan
                  | Yazan
                  a.gonderi-yazan(href='#') Erdem
                  |  konu
                  a.etiket.etiket-yesil(href='#') Ekmek yapımı
              |
              .gonderi-aciklama
                p
                  | Bu bölümde ekmek yapımının inceliklerini öğreneceğiz.
                  | Ekmek yaparken nelere dikkat etmeliyiz.
            |
            section.gonderi
              header.gonderi-ust-bolum
                img.gonderi-resim(width='48', height='48',
                alt="Veli'nin resmi", src='/resim/veli.png')
                |
                h2.gonderi-baslik Yeni fotoğraflar
                |
                p.gonderi-yazan
                  | Yazan
                  a.gonderi-yazan(href='#') Veli
                  |  konu
                  a.etiket(href='#') Resimler
              |
              .gonderi-aciklama
                .gonderi-resimleri.pure-g
                  .pure-u-1.pure-u-md-1-2
                    a(href='#')
                      img.resim(alt='Doğada uğur böceği',
                      src='/resim/doga1.jpg')
                    |
                    .gonderi-resim-aciklama
                      h3 Uğur böceği
                  |
                  .pure-u-1.pure-u-md-1-2
                    a(href='#')
                      img.resim(alt='Doğada beyaz çiçekler',
                      src='/resim/doga2.jpg')
                    |
                    .gonderi-resim-aciklama
                      h3 Doğada beyaz çiçekler
                        |
                |
                p
                  | Doğadan bazı manzara resimlerini bulabilirsiniz
            |
          .altlik
            .pure-menu.pure-menu-horizontal
              ul
                li.pure-menu-item
                  a.pure-menu-link(href='https://programlama.tk') Hakkımızda
                |
                li.pure-menu-item
                  a.pure-menu-link(href='http://ddili.org') D dili

Burada kaynak kütüğünde de ufak bir düzenleme yapıp, resimleri ve tasarım desenlerini eklediğimiz dizini tanıtmak gerekiyor.

Kaynak kütüğünü kiraz dizininde iken açıyoruz:

$ emacs source/app.d

Kaynak kütüğünü aşağıdaki gibi değiştiriyoruz:

import vibe.vibe;

void main()
{
    auto yolAtayıcı = new URLRouter;
    yolAtayıcı.get("/", staticTemplate!"index.dt");
    yolAtayıcı.get("*", serveStaticFiles("public"));
    auto ayarlar = new HTTPServerSettings;
    ayarlar.port = 8080;
    ayarlar.bindAddresses = ["::1", "127.0.0.1"];
    listenHTTP(ayarlar, yolAtayıcı);

    logInfo("Lütfen tarayıcınızla http://127.0.0.1:8080/ adresini açınız.");
    runApplication();
}

Tekrar uygulamamızı derleyip çalıştırıyoruz.

$ dub

Tarayıcınızla http://localhost:8080 adresini açtığınızda yeni tasarım deseninin nasıl görüntülendiğini görebilirsiniz.

D ve vibed kütüphanesi ile yazılmış günlük

Seçtiğimiz tasarım deseninin güzel tarafı telefon, diz üstü gibi farklı ekran genişliğine sahip cihazlarda görüntülenirken bile esnek bir tasarıma sahip olması.

Tarayıcınızın ekran genişliğini değiştirdiğinizde bağlantı bölümünün üst kısma taşındığını görebilirsiniz.

D ile günlük esnek tasarım

Tasarımı bölümlere ayırma

Şimdi sayfa desenlerinin en güçlü özelliğine geliyoruz.

Sayfamıza genel hatları ile baktığımızda sol tarafta ana gezinme bölümü var. Gönderiler bölümü var. Altta ise sayfamız hakkında bilgi verebileceğimiz bir bağlantı bölümü var.

İşte bu noktada her sayfada olacak bölümleri belirleyip temel bir desen hazırlıyoruz. Örneğin bu sayfamızın temel deseni olsun.

İsim olarak ana.dt ismini verelim.

doctype html
html(lang='tr')
  head
    meta(charset='utf-8')
    |
    meta(name='viewport', content='width=device-width, initial-scale=1.0')
    |
    meta(name='description', content='D nin vibed kütüphanesi ile geliştirilmiş günlük.')
    |
    title D dili ile maceralar
    |
    link(rel='stylesheet', href='/css/pure/pure-min.css')
    |
    link(rel='stylesheet', href='/css/pure/grids-responsive-min.css')
    |
    link(rel='stylesheet', href='/css/stil.css')
  body
    #yerlesim.pure-g
      .yancubuk.pure-u-1.pure-u-md-1-4
        .baslik
          h1.gunluk-baslik Kiraz günlüğü
          |
          h2.gunluk-aciklama D dili ile yazılmış bir günlük
          |
          block gezinme
      |
      .icerik.pure-u-1.pure-u-md-3-4
        div
          block gonderiler
          |
          block altbolum
          include alt

Görebileceğiniz üzere gezinme, alt bağlantı ve gönderiler bölümlerini parçalara ayırdık.

Burada block ifadesi istediğimiz gibi bir sayfa desenini parçalara bölebiliyoruz. Örneğin gönderilerle ilgili kısmı gonderiler.dt isimli başka bir sayfa desenine taşıdık.

include ifadesi ise bir sayfa desenini sayfaya eklememize olanak sunuyor.

Eğer altbolum kısmına bakarsak buranın hemen altında include ile alt.dt isimli sayfa desenini sayfaya eklemiş oluyoruz.

Gönderilerin gösterileceği sayfamız, index.dt ise şu hale geldi.

extends ana

block gonderiler
  include gonderiler

block gezinme
  nav.nav
    ul.gezinme
      li.gezinme-elemani
        a.pure-button(href='http://python.org') Python
      |

Burada extends anahtar kelimesi var olan desenin üzerine ekleme yapmamıza olanak sağlıyor.

Gönderiler kısmını include anahtar kelimesi ile ekleyerek gönderileri gösterebiliyoruz.

Gezinme kısmını da örnek olması açısından burada tekrar tanımladık. Böylece ana gezinme bölümünde sadece bir bağlantı görülecek.

Bu bölümde kullandığımız sayfa desenlerini buradan indirebilirsiniz.

kiraz2.rar

Uygulamayı derleyerek çalıştırdığınızda ana gezinme kısmında sadece bir tane bağlantı olduğunu görebilirsiniz.

Uygulamanın kaynak kütüğünde, index.dt yerine ana.dt sayfa deseni seçtiğinizde uygulamadaki değişikliği deneyerek görebilirsiniz.

Sayfa tasarımında iyileştirmeler

Eğer bu bölüme kadar geldiyseniz öncelikle sizi tebrik etmek istiyorum.

Sayfa tasarımı ile ilgili işimizin bittiğini düşünebilirsiniz. Ama henüz bitmedi ;-)

Bir tane bina tasarladığımızı düşünelim. Bu binanın temelini attıktan sonra tekrar gelip hafriyat işleri ile uğraşmazsınız değil mi?

Ya da binayı tasarlarken kocaman büyük bir oda şeklinde tasarlamak pek iyi bir fikir sayılmaz.

Bunun yerine binayı odalara bölmek, hatta gerekiyorsa üst katlarda genişlemeye olanak sağlayacak esnek bir tasarım gerçekleştirmek isteriz.

Bunu yazılım mühendisliğine uygularsak, bir kaç satırlık basit bir günlük uygulaması ile başlayıp kendinizi Stackoverlow ya da Reddit benzeri binlerce satırdan oluşan gelişmiş bir sunucu uygulaması geliştirirken bulabilirsiniz.

Sayfamızın çatısını oluşturan temel sayfa desenlerini desenler isimli bir klasörde toplayabiliriz. Günlük klasöründe de şimdilik index.dt ve gonderiler.dt isimli desenler bulunabilir.

Bunun için views klasöründe desenler ve gunluk isimli iki yeni dizin oluşturuyoruz.

Bu sefer sadece gunluk dizinindeki index.dt kütüğünü paylaşıyorum.

extends desenler/ana

block icerik
  include gunluk/gonderiler

Sayfa tasarımındaki iyileştirmelerden sonra tasarımın son halini buradan indirebilirsiniz.

kiraz3.rar

Bu dizinleri oluşturduktan sonra uygulamanın kaynak kütüğünde sadece ufak bir düzenleme yapıyoruz.

import vibe.vibe;

void main()
{
    auto yolAtayıcı = new URLRouter;
    yolAtayıcı.get("/", staticTemplate!"gunluk/index.dt");
    yolAtayıcı.get("*", serveStaticFiles("public"));
    auto ayarlar = new HTTPServerSettings;
    ayarlar.port = 8080;
    ayarlar.bindAddresses = ["::1", "127.0.0.1"];
    listenHTTP(ayarlar, yolAtayıcı);

    logInfo("Lütfen tarayıcınızla http://127.0.0.1:8080/ adresini açınız.");
    runApplication();
}

Kiraz dizinine gelip dub komutu ile uygulamayı tekrar derleyip çalıştırıyoruz.

Sizin de görebileceğiniz üzere görsel tasarımda bir değişiklik yapmadık. Sadece kullandığımız sayfa desenlerinde bazı iyileştirmeler yaptık.

Uygulamanın çalışan haline buradan erişebilirsiniz.

Yorumlar

yorum yaz

Yorum yaz

Henüz yorum yok.