Web Tasarım Dersleri

Merhabalar,

Web tasarım derslerine hoş geldiniz!

Bu site web tasarım eğitimi almaya yeni başlamış, aldığı eğitimi yeterli görmeyen ya da bilgi düzeyini genişletmek isteyen web tasarım öğrencileri ve web tasarımcılar için bendeniz zinzinzibidi tarafından geliştirilmiş bir web sitesidir.

Bu sitede neler bulacaksınız?

Bu sitede bir web sitesini nasıl tasarlayabileceğinizi en ince ayrıntısına kadar öğreneceksiniz. Tabi bir web sitesini tasarlamaya başlamadan önce bazı teknolojilerin ne anlama geldiğini ve bunları nasıl kullanabileceğinizi öğrenmelisiniz. Örneğin; basit bir web sitesi için HTML4 ve CSS3'ü temel düzeyde bilmeniz yeterlidir. Fakat kendinizi daha da geliştirmek istiyorsanız HTML5, CSS3, JavaScript ve jQuery'i iyi kullanabilmeli, grafik alanındaki en temel yardımcınız olacak Photoshop CS6 ya da Photoshop CC'yi işinize yarayacak kadar bilmelisiniz. Bunun yanında tüm bu teknoloji ve yazılımları kullanabileceğiniz bir platform olan Visual Studio 2013'ü ise etkili bir şekilde kullanabilmelisiniz.

Bugün birçok web tasarımcısı tasarım yaparken Adobe Dreamweaver CS6'yı kullanmaktadır. Fakat ne yazık ki bu yazılımın yetersiz "intellisense" özelliği, yani kod yazarken size yardımcı olan "akıllı kod anımsatıcısı"n istenilen düzeyde olmaması, kodları düzenli bir şekilde yazamamanız gibi bazı kritik eksikleri yüzünden ileri düzey web tasarımcıları Visual Studio 2013'ü tercih etmektedir. Bunun yanında Dreamweaver ile "masterpage" yapımı oldukça zordur; fakat Visual Studio ile bu işi size sadece on beş dakikada öğreteceğim. ASP.NET MVC 4 teknolojisi ile gelen "layout" tasarımı ile hızlı bir şekilde sitemizin şablonunu oluşturacağız ve sadece ilgilenmek istediğimiz alanlar olan içerik ile daha çok haşır neşir olacağız. Artı olarak sitelerimizin uzantıları .html ya da .htm şeklinde görünmeyecek; düzenli bir şekilde sadece sayfa adları adres çubuğunda görünecektir.

Visual Studio'yu ReSharper eklentisi ile birlikte kullanacağız. Bu eklentinin avantajlarını kod yazarken yeri geldikçe size anlatacağım. ReSharper'a alıştıktan sonra onun bağımlısı olacak ve Visual Studio'yu onsuz kullanmak istemeyeceksiniz.

HTML5

html5 logo

HTML web sitemizin internette yayınlanması gerekli kodları içeren standart bir dildir. Tüm web siteleri HTML ile yazılır ve tarayıcı ekranında görüntülenirler.

HTML5 bir işaretleme dilidir. HTML'in beşinci ve son sürümüdür. Programlama dili olmamasına rağmen programcılara oldukça kolaylık sağlar. Örneğin; bu sayfada farenizle sağ tıklayın ve "Sayfa kaynağını görüntüle" komutunu seçin. <!DOCTYPE html> şeklinde başlayan bazı kodlar göreceksiniz. İşte bu HTML kodlarıdır. <!DOCTYPE html> bildirimi ise sayfanın HTML5 ile yazıldığını belirtir.

Sitemizin HTML5 başlığı altındaki "HTML5 Nedir?" sayfasından daha fazla bilgi edinebilirsiniz.

CSS3

css3 logo

Açılımı Cascading Style Sheets (Basamaklı Stil Sayfaları) olan CSS, HTML'e yardımcı olmak amacıyla geliştirilen ve sitedeki tüm renk, görsel, metin hizalama gibi işlevleri yerine getiren bir dildir.

CSS ile birlikte sitenin birçok sayfasında kullanılan kodlar tek bir CSS kodu ile aynı anda şekillendirilebilir. Örneğin; sitede kullanılan başlıkların rengi CSS ile birlikte tümden değiştirilebilir. Sizin anlayacağınız her sayfada ayrı ayrı renk değişimi yapmak yerine tek bir CSS kodu ile tüm sayfalardaki alanlara etki edilebilir. İşte CSS gücünü buradan almaktadır. Tek bir dosyadan tüm sitedeki sayfaların kodlarını değiştirebilirsiniz.

CSS kodları neye benzer diye soracak olursanız bu linke tıklamanız yeterlidir.

CSS3 ise CSS'in son sürümüdür ve yeni sürümle birlikte gelen "border-radius", "box-shadow", "text-shadow", "transition" gibi birçok yenilik tasarımcıların işlerini kolaylaştırmış, görsel olarak daha çekici siteler yapmalarına olanak sağlamıştır.

Sitemizin CSS3 başlığı altındaki konularda CSS3'ü daha ayrıntılı öğrenebilirsiniz.

jQuery

jQuery logo

jQuery aslında bir dil değildir. JavaScript kütüphanesidir. JavaScript ise betik bir dildir. Etkileşimli ve dinamik web sayfaları oluşturmak için JavaScript kullanılır. Betik bir dil olmasına rağmen programatik olarak da kullanılabilir.

jQuery, JavaScript kodlarının sentezlenmesi ile oluşturulmuş ve tasarımcılar için gerekli bazı dinamik elementlerin çalıştırılması için oldukça sadeleştirilmiştir. Örneğin; bu sitedeki iletişim sayfasında kullanılan jQuery kodlarını incelemek için bu bağlantıya tıklayınız. Gördüğünüz gibi jQuery ile oldukça güzel bir iletişim formu hazırlayabilirsiniz.

Sitemizin jQuery başlığı altındaki konularda JavaScript ve jQuery'i hakkında daha fazla bilgi edinebilirsiniz.

Visual Studio 2013

visual studio 2012 logo

Microsoft tarafından geliştirilen .NET altında kırktan fazla programlama dilini destekleyen yazılım geliştirme platformudur. Son sürümü 2013'dür.

Aslına bakarsanız Visual Studio'un asıl amacı C# gibi programlama dilleri ile yazılım geliştirmektedir. Buna rağmen biz web tasarımcıları da bu platformdan faydalanabilmektedir. Adobe Dreamweaver hernekadar sadece tasarımcılar için geliştirilmiş olsa da Visual Studio 2013, Dreamweaver'a birçok yönden fark atmaktadır. Kullanımı daha kolaydır ve tek bir komutla sayfanızdaki tüm kodları düzenli bir şekilde hizalayabilirsiniz. Intellisense özelliği çok daha gelişmiştir. ASP.NET MVC 4 teknolojisi ile masterpage'e (layout'a) sahip siteler yapabilirsiniz. Sayfalarınızda .html ya da .htm uzantıları görülmez. İşte bu yüzden size Visual Studio ile web tasarımı yapmayı öğreteceğim.

Bu iki teknolojinin diğer avantajlarını merak ediyorsanız sitemizin Web Tasarımı başlığı altındaki "Neden Visual Studio ve ASP.NET MVC 4?" sayfasını ziyaret edebilirsiniz.

Son Söz

Eğitimlere geçmenden önce size izlemeniz gereken yollu göstereyim:

Başarılar dilerim.

▲
Need a light? Beboobeep!