Ekle

Web Tasarım ve Programlama Konuları | İyi bir webmaster olmak için..

Posted: Ocak 7, 2012 at 6:27 pm

Geçen gün yeni öğrencim Emrah ile tanıştık. Uzun zamandır ders verirken belli bir düzen içerisinde gidiyordum. Şimdi bu düzeni yazıya dökmem gerekti. Aslında uzun zamandır aklımdaydı fakat işlerden, öğrencilerden vb. öncelikli şeylerden dolayı kaynıyordu arada. Bunu yazdım ki öğrencim haritada kendisini görsün ne kadar yol katettiğini anlasın ve daha neler başarabileceğini görebilsin istedim.

Ayrıca webmaster olmak isteyenlerin takip etmesi gereken yolda yanına alması gereken önemli bilgiler denebilir ve çeşitli web tasarım ve web programlama kurslarına giden öğrencilerde bu konularda eksiklik hissettiğinde öğretmenine danışabilir..

Web Tasarım ve Programlama için Genel Ders Akışı

Aşağıda ki konular web tasarım ve programlama’da başlangıç düzeyinde ki öğrenciler için ders akışıdır. Bu konulardan XHTML ve ya Photoshop gibi konulara ehil olan öğrenciler bu kısımları atlayabilir. Bu konuları hiç bilmeyenlerin yavaş yavaş öğrenebileceği gibi başlangıç ve ya orta düzeyde ki öğrencilerin de üzerinden geçmesi ve eksiklerini hızlıca gidermesi gerekmektedir. PHP evvela web sitesi yapmak içindir. Bu açıdan webin temellerini üst seviye öğrenmeden PHP’yi herhangi bir seviyeye gelinecek kadar öğrenmenin bir anlamı olmaz. O halde tüm bu konularda eksiksiz bir şekilde kademe kademe uzmanlaşılacak ve tüm konularda bilgi sahibi olduktan sonra projeler üzerinde çalışarak kendinizi geliştireceksiniz.

Bir kung-fu ustası ile gerçek bir web ustasının arasında çalışma sistemi olarak çok bir fark yoktur. Bir kung-fu ustası gibi hareketleri öğrenecek ve daha sonra sürekli aynı hareketleri tekrarlayarak kendinizi geliştireceksiniz. Tüm hareketleri öğrenmek en iyi şekilde, hızlıca uygulamak demek değildir. Bunun için çalışmak ve sabırlı olmak gerekir. Sonunda aynı bir kung-fu ustasını yaptıklarıyla ruhunu dinlendirdiği gibi sizde kod yazarak ruhunuzu dinlendirdiğinizi hissedeceksiniz.

Ben size neler yapabileceğinizi göstermiş olacağım, siz dersler bittikten sonra daha çok şey yapabileceğinizi bilmelisiniz. Azimle çalışırsanız geriye baktığınızda geleceğiniz için çok büyük bir adım attığınızı fark edeceksiniz ve daha çok büyük adımlar atabileceğinizi göreceksiniz..

> XHTML

Bir HTML sayfanın genel yapısı
Karakter setleri (UTF-8′in yararları ve sitede kullanımı)
Çok kullanılan basit taglar (title, br, hr, meta, span, p, a, img, blockquote)
Tablo yapıları (table, tr, td)
Tag özellikleri (Style özelliği ile CSS’e giriş)
Div yapıları ve basit stil kodları (color, font, text, background-color vs..)
Form yapıları (form, input vs..)
Listeler (ul,li)

Çalışma : Basit bir HTML siteyi notepad++ üzerinde kodlamak

Çalışma detayları :
Basitçe hazırlanmış bir banner sitenin üst kısmına eklenir,
ilk etapta table yapıları kullanılır,
Üstte Hakkımızda, İletişim, Anasayfa şeklinde menü yer alır
İletişim sayfasına form hazırlanır
Sol tarafta küçük bannerlar, listeli bağlantılar,

sayfa içerisinde çeşitli içerikler, tablolu ciro bilgileri vs..

> Photoshop

Photoshop’un genel düzeni
Photoshop araç kutusu
Layer sistemi ve layer özellikleri
Fotoğraflarda rötüş
Fotoğraflarda dekupe
İç içe resimler
Fotoğraf yansıtma
Buton çeşitleri hazırlama
Görsel bannerlar hazırlama
2 web sitesi taslağı oluşturma

Çalışma : Öğrenciyle birlikte kararlaştırılan proje için web sitesi tasarımı hazırlama

> CSS

Bir CSS dosyasını sayfaya bağlamak
CSS’in genel yapısı
Liste stilleri
Style özelliği yerine CSS dosyası ile stil atamak için nesnelere erişim yolları (class, id)
Background işlemleri (background-color,background-image, background-repeat,background-position)
Nesnelerin içine doğru ve dışına doğru boşluk atama(Padding,Margin)
Olası sorunlar ve çözüm yöntemleri (padding, margin)
Border işlemleri (border-color, border-style)
Olası sorunlar ve çözüm yöntemleri (border)
Nesneleri yaslama(float) ve yaymayı bitirme(clear)
Olası sorunlar ve çözüm yöntemleri (float)
Nesnelerde position özelliği ve kullanım alanları(position)
Olası sorunlar ve çözüm yöntemleri (position)
Diğer stil kodları : Overflow, Display vs..

Çalışma 1 : CSS ile menü hazırlamak

Çalışma 2 : Tasarımı yapılan projenin kesiminin yapılıp XHTML-CSS site hazırlanması

Çalışma 1 Detayları;

Hazırlanan proje tasarımının öğrenciyle birlikte kesimi yapılır. Bazı kısımlar öğretmen tarafından kesilip örnek göstermek için css ile kodlanır ve geri kalanını öğrenci evde ödev olarak yapmaya uğraşır. Karşılaştığı sorunların çözümü derste anlatılır. Sorunların neden oluştuğu irdelenir, dikkat edilecek konular belirlenir.

> JavaScript

JavaScript’e giriş – Genel Yapısı – JavaScriptleri sayfaya bağlamak.
Nesne olayları (onclick, onblur, onchange)
JavaScript fonksiyonları
JavaScript mesaj kutuları (alert, confirm, prompt)
JavaScriptte değişkenler
JavaScriptte döngüler
if-else yapısı
Operatörler ve mantıksal işleçler
Document nesnesi ve form nesneleri
String özellikleri
Frameler arası işlemler
JavaScript math nesnesi
Date nesnesi

Çalışma : Basit bir hesap makinası
Not : PHP’nin son dönemde vazgeçilmez yol arkadaşı olan jQuery, JavaScript alt yapısı ile hazırlandığı için JavaScript derslerine olabildiğince dikkatimizi vermeliyiz.

> PHP

DEVAM EDECEK inşaAllah..

Toplam ders saati kişinin bilgi birikimine bağlı olarak 30 ila 50 saat arasında değişmektedir. Ayrıca öğrenci hazırladığı proje ile ilgili ders konuları bittikten sonra danışmanlık ve yardım almak için proje bitene kadar haftada 1 saat derse devam edebilir..

Öğretmen : Aslan Akali