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.