1. Gün / 1. Ders

Öncelikle beyler bayanlar bir web sitesi yapabilmemiz için bu işi severek yapmamız gerek. Bu iş matematik gibidir seversen uğraşır yaparsın. illa ki tüm formülleri bilmen gerekmez. Mantığını bimen yeterlidir. Sevmezsen de iteklemeyle bir yere varamazsın. Bu başlığa gelipte bu derslere katılacak olan arkadaşlarım bu işi severek yapacaklarına inanıyorum.

Bir websitesi genel olarak üç aşamadan oluşur. Arayüz Tasarımı / Arayüz Kodlaması / Yazılım

Birincisi tasarımdır. Photoshop, Illustrator, Fireworks gibi programlar ile sitenin arayüz tasarımı yapılır. Bu tasarımlar yapılırken eskiden sabit bir değer ile yapılırdı örn: max genişlik 960px gibi. Fakat günümüzde mobil kullanıcıların sayısı bir hayli fazla olduğundan dolayı sabit genişlikler yerine dinamik her ekrana ve her cihaza uygun tasarımlar yapılması gereklidir. Böyle esnek tasarımlara responsive tasarım yani duyarlı tasarım denmektedir. Responsive tasarıma çok benzer adaptive tasarım kavramı da vardır. Fakat işin detayına ilerleyen günlerde ineceğimiz için şimdilik bu ikisi arasındaki farkı anlatmaya gerek yok.

ikincisi arayüz kodlaması. Arayüz tasarımı tamamlanan web sitesinin artık tarayıcıların anlayabileceği şekilde kodlanması gerekli. Bu kodlamalarda genel olarak üç aşamadır. Html / Css / Javascript.

--Html kodları bir sitenin iskeletidir. Yani şablonu burada belirleriz. Bir ağacın dallarını ve alt dallarını düşünün. Tüm iskelet yapısı burada belirlenir. Sayfada neler görüneceğinin temelini burada atarız. Bir resim göstermek istiyorsak resim kodunu yazarız.

--Css ise bu temel iskeletimizin stillerini ve özelliklerini belirlememize yarar. iskelette oluşturduğumuz şablonların içeriklerin renklerini boyutlarını hizalamalarını aklınıza gelebilecek tüm detaylı özellikleri burada yapabiliriz. Şablonda eklediğimiz resmin büyüklüğünü kenarlık özelliklerini hizalamalarını burada yapıyoruz.

--Javascript ise tarayıcı ile kullanıcı arasında bir köprü görevi görür. Kullanıcının yaptığı işlemleri biz burada izler ona göre sonuçlar sunarız. Bir butona tıkladığında bir işlem yaptırmak istiyorsak burada yapabiliriz. Veya sitelerde denk gelmişsinizdir form doldururken bazı alanlar zorunludur uyarısı verir. işte bu uyarıları javascript ile halledebiliriz. Biz ileride yapacağımız projelerde javascript'e ait jquery kütüphanesini kullanacağız.

Üçünüsü ise yazılımdır. Buraya kadar olan herşey kullanıcının görebildiği yerlerle ilgiliydi. Bundan sonrası ise işin arkaplanına iniyoruz. Yazılım aşamasında verilerle ilgileniyoruz. Veritabanlarındaki verileri alıp işliyoruz. Aklınıza gelebilecek tüm detaylı ve gizli işler burada yapılır. Örneğin şifresini unutan bir üye şifremi unuttum butonuna bastığında o kullanıcıya bir eposta gider. Ve şifresini sıfırlaması için bir link gönderilir. Fakat bu link oluşturulurken arkaplanda saniyeler içerisinde bir yığın kod çalışır ve bu kullanıcı tarafından asla görülemez. Php, asp gibi çeşitleri vardır. Veritabanı için ise mysql, mssql kullanılır. Biz ileride projelerde php ve mysql kullanacağız.

// Bu yazdığım ders hakkında sorularınız varsa altına yazabilirsiniz.

1. Gün / 2. Ders

Beyler bayanlar kısa tanımlardan sonra ufaktan kod yazmaya başlayalım. Öncelikle öyle şu etiket şu işe yarar falan demeyeceğim. internet önünüzde. Hangi etiket ne işe yarıyor çok açık bulabilirsiniz. Bulamazsanız da ben her daim destek çıkarım. Olaya örneklerle devam edeceğiz. Bunun için bir site tasarlayacağız. Daha doğrusu tasarım kısmına müdahale etmeden benim daha önceden hazırladığım bir tasarımı koda dökeceğiz. Tasarımı da anlatmaya kalkarsam içinden çıkamayız. Kaldı ki tasarım kısmı herkesin yapabileceği bir şey değil hayal gücüne ve zevke bağlı bir şey. Yazılım ise mantık olayı. Neyse konuyu dağıtmadan olaya giriyoruz.

ilk olarak işin temeli iyi bir klasör yapılandırması. Neyin nerede olacağını daha sonradan çok rahat bulabilmeniz ve dosyalar klasörlerin arasında boğuşmamanız için bu şart. Benim yapım şu şekilde.

+assets
+++css
---reset.css
---style.css
+++img
+++js
---jquery-2.1.4.min.js
+inc
---config.php
---session.php

ilk olarak reset.css dosyamızı oluşturalım. reset.css dosyamız bizim ne işimize yarar diyecek olursanız şöyle cevap vereyim. Bu dosyanın adı önemli değil fakat kodları bizim bazı gereksiz boşluklarımızı kenarlıklarımızı veya birçok özellikleri tüm tarayıcılarda uygun olacak şekilde stabilize etmeye yarıyor. Bizim bir başka yazılımcı arkadaşımız Eric Meyer'in oluşturmuş olduğu reset.css dosyasını kullanacağız. Linki: http://meyerweb.com/eric/tools/css/reset/

Linkten bakmak istemiyorsanız aşağıdaki kodları reset.css dosyasının içerisine yazın.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

// Bu ders hakkında sorularınız varsa alta yazabilirsiniz.

3. Gün / 1. Ders

Merhaba beyler bayanlar bugün artık anasayfamızda birşeyler göstermeye başlayacağız. Blog veya video çekmemi isteyenler var aranızda yakın zamanda blog açıp burada sizinle paylaşacağım. Şimdi herkes index. html sayfasını oluştursun ardından altta yazılan kodları <body> </body> tagları arasına yazsın. Kısaca kodların ne işe yaradığını anlatacağım.

index. html kodları

<div id="container">
<div id="header">
<h1>LOGO</h1>
<ul>
<li><a href="index. html">Anasayfa</a></li>
<li><a href="hakkimizda. html">Hakkımızda</a></li>
<li><a href="iletisim. html">iletişim</a></li>
</ul>
</div>
</div>

container adlı divimiz bizim en genel divimiz oluyor. bunu yapmamdaki amaç tüm içeriği kapsayan bir yapı oluşturmak için. daha sonra ilerleyen zamanlarda proje içeriği karmaşıklaştıkça hizalama sorunları olmasın diye böyle bir kapsayıcı div yerleştiriyorum.

header adlı divimiz ise genelde sitelerin üst kısmında bulunan yer için adlandırılır. bunun içerisinde menü logo varsa arama kutucuğu hatta yeri geldiği zaman slider (resim geçişi) bulunabilir. ben çok kapsamlı birşey yapmayacağım. sadece basit bir site yapımından bahsedeceğim için şablonu basit hazırlıyorum.

header içerisine aslında <img> ile bir logo ekleyebilirdim ama ekstra örnek logo bulmak için uğraşmadım oraya hemen bir <h1> tagı açıp logo yazdım. tabi siz o h1 kaldırıp yerine <img src="assets/img/logo.png" alt="logo"> olarak değiştirebilirsiniz.

header içerisinde sağda bulunan bir de menümüz var. bu menüyü ul>li>a şeklinde yaptım ki ileride menü ekleme çıkarma olayı olduğunda dinamik bir yapımız olsun.

en son ise bir clear classımız var. bunun ne işe yaradığına gelecek olursak. yan yana div eklediğimizde daha sonra alta div eklemek istediğimzde karışıklık olmasın diye hizalamaları düzelten bir yapısı vardır. clear adını siz istediğiniz gibi yaparsınız fakat standartı bu şekildedir. style.css dosyamızda bir .clear tanımladım ve içerisine float:both; dedim. şimdi bu ne işe yarıyor diyeceksiniz bunu style.css kodlarını yazdıktan sonra açıklayacağım.

aynı clear classını </ul> bitiminden sonra da yaptım ki bunu style.css kodlarını incelediğinizde anlayacaksınız umarım.

bu arada aklıma gelmişken ufak bir farktan size bahsetmek istiyorum. id ile class farkı nedir derseniz. id sayfa içerisinde bir tane bulunmak zorundadır. he birden fazla da bulunabilir fakat standarta uymaz. class ise birden fazla yerde kullanılmak istendiğinde kullanılır. mesela yukarıdaki clear classımızı id şeklinde yapsaydım olmazdı. olurdu ama standartlardan uzaklaşırdık. umarım farkı kısaca anlatabilmişimdir. Tüm bu yapıyı inceleyin istiyorum. Kısaca html kodları yazıp bir şablon ayarladık. Tabi ki devamı gelecek. Bir sonraki derste style.css kodlarını sizinle paylaşacağım.

// Soruları alta yazabilirsiniz.

2. Gün / 1. Ders

Beyler bayanlar dün reset.css dosyasını oluşturmuştuk. Kısaca ne işe yaradığı falan bahsetmiştim. Artık bugün yavaştan ekranda birşeyler göstermeye başlayacağız. Öncelikle index. html sayfamızı oluşturuyoruz.

<!doctype html>
<html lang="tr-TR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Sitemizin Başlığı</title>
<meta name="description" content="Sitemizin Kısa Açıklaması">
<--- JS -->
<script src="assets/js/jquery-2.1.4.min.js"></script>
<--- CSS -->
<link rel="stylesheet" href="assets/css/reset.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
</body>
</html>

Şimdi çok kısa kodlar hakkında bilgi vermek istiyorum.
Öncelikle sitemizi <!doctype html> koduyla başlatarak HTML5 olarak giriş yapıyoruz.
Ardından alt satırındaki kodumuz ise sitenin tarayıcılar tarafından anlayacağı dili yazıyoruz. Bu tr-TR yazmazsak ne olur diyenler olacaktır. Bunu yazmamızdaki amacımız sitenin içindeki metinlerin dilinin ne olduğunu arama motorlarının anlamasını sağlamak. He yazmazsakta anlarlar orası ayrı ama şöyle bir durum olabilir. Birkaç alıntı yazarak ingilizce cümle yazdınız ama sitenin geneli türkçe. Şimdi biz bunu buraya yazmazsak google arama motoru sitemizi ziyaret ettiğinde sitede birden fazla dil olduğunu görür ve sitenin dilini çevirmeyi önerebilir. Bu da kullanıcılar açısından gereksiz olabilir. Aynı zamanda seo açısından da eksi puan almanıza sebep olur. Yani işin özü sitemiz Türkçe ise tr-TR yazmakta her daim fayda var.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Yukarıdaki kod ne işe mi yarıyor? Bu kodumuz responsive ile alakalı. Şöyle anlatayım. Telefondan bir siteye girdiğinizde parmak hareketlerinizle siteyi zoom in zoom out yapabiliyorsunuz. Ama bazı siteler buna izin vermiyor. Ne gibi yararı veya zararı var konusuna gelirsek. Ben şahsi fikrimi söyleyeyim bence kullanmak faydalı. Çünkü kullanıcılar sitede yukarı aşağı parmak hareketleriyle gezerken vs yanlışlıkla büyütüp küçültmelerine engel oluyor. Bunun yanında eğer sitede içerikler responsive olarak güzel ayarlanmadıysa zoom yapıldığında bozulma ihtimali doğuyor ve bu göz hoş görünmüyor. Kısacası kullanın.

<script src="assets/js/jquery-2.1.4.min.js"></script> kodu ile sayfamıza jquery kütüphanesini dahil ediyoruz. Etmezsekte olur. Site sorunsuz çalışır. E neden ekledin kardeşim o zaman derseniz. Tabi ki keyfimden eklemedim. ileride proje içerisinde jquery kodları kullanacağım. Bu kodların yorumlanabilmesi ve çalışması için bu kütüphaneyi sayfama dahil etmem gerekiyor. jQuery kullanmam ben diyenler bu satırı silebilirler.

<link rel="stylesheet" href="assets/css/reset.css">
<link rel="stylesheet" href="assets/css/style.css">
Burada ise reset.css ve style.css dosyalarımızı sayfamıza dahil ettik.

Tüm bunları yaptıktan sonra kodlarımızı <body> </body> arasına yazabiliriz.

// Sorularınızı alta yazabilirsiniz.