ile

Tasarımı HTML5 ve CSS3′e dökmek (2) – Mantıksal Tasarım

Genellikle tasarımcılar bize tasarımlarını .psd olarak gönderirler ve bu tasarımı bizim koda dökmemiz gerekir. Öncelikle yapmamız gereken, hiçbir süsleme öğesi kulanmadan HTML5 kodu çıkarabilmek için tasarımı analiz etmek. Şimdi tasarıma göz atalım.

home.psd dosyamız şu şekilde:

AI_WEB-3-06

Burada tasarımcı bize yardımcı olacak bazı rehber noktaları vermiş. Fakat bizim koda dökmemiz için daha detaylı incelememiz gerekiyor. Bunun için de tasarımı analiz etmemiz lazım.

ozet

Öncelikle tasarıma baktığımızda gördüğümüz, kullanıcının navigasyon menüleri arasında kaybolmaması hedeflenmiş, en çok kullanılan navigasyon ve altbilgi öğeleri gruplanarak özet nav ve özet footer bölümleri oluşturulmuş. Bunları nasıl kodlarız? İlk başta dediğimiz gibi bu aşamada hiçbir süsleme ve içerik öğesini dosyalarımıza eklemeyeceğiz. ihtiyacımız olan en basit HTML5 dosyasını düşünerek kodlamamızı yapalım. Daha sonra body kısmını istediğimiz framework’e taşımamız kolay.


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ARTINTERNATIONAL</title>
</head>

<body>
    <header>
        <div id="main-slider"></div>
        <nav id="summary-nav"></nav>
        <div id="main-logo"></div>
        <nav id="detail-navigation"></nav>
    </header>
    <div id="main-content"></div>
    <footer>
        <div id="summary-footer"></div>
        <div id="detail-footer"></div>
        <div id="copyright">
    </footer>
</body>

</html>

Minimum HTML5 dosyamızın mantıksal tasarımını bitirdik. Bu aşama gerçekten çok önemli çünkü tasarımın koda dökümünün sonraki aşamalarında bize rehber olacak. Bir sonraki yazıda cevap verebilirlik (responsiveness) için kullanacağımız CSS çerçevesini (framework) seçerek görsel öğelerin kodlanmasına başlayacağız.

Hakan ARSLAN için cevap yaz Vazgeç

Yorumla

Yorum

  1. Önce biraz gıcıklık yaparak başliym yorumumua 🙂 son div’i (copyright divini) kapatmayı unutmuşuz 😉 Şaka bir yana mantıksal tasarım dedik madem tüm HTML5 yapısal etiketlerini kullansak daha güzel olur aslında. Yanlışım olan kısım varsa düzeltmenizi rica ederim.
    Mesela içerik kısmımız olan main-content isimli div’i “article” etiketini kullanabiliriz, hatta biraz abartarak divler yerine tüm kısımlar için “section” lar kullanabiliriz. Yani demek istediğim basitçe aşağıdadır;

    ARTINTERNATIONAL