web tasarım dersleri nerden başlamalı

Web Tasarım günümüzde popülerliğini her geçen gün artıran bir bilişim alanı. İnternetin tüm dünyaya yayılması ve bugün cep telefonlarından, tablet bilgisayarlardan sokaklarda bile ücretsiz şekilde internete bağlanabilmemiz, bu dünyaya olan ilgiyi artırdı. Bu kadar ziyaretçisi olan bir dünyaya, profesyonel iş uygulamaları hızla kaymaya başladı. Bugün artık birçok şirket tüm yazılımlarını internet üzerindeki platformlara taşımaya başladı. Klasik masaüstü yazılımların güncelleme dertleri ve bakım masrafları gerek şirketleri gerekse yazılımcıları web dünyasına itti.      

Bir yazılım geliştirmek istiyorsunuz diyelim, geliştirilen uygulama Windows, Linux, MAC gibi platformlarda çalışabilmeli. Ne yaparsınız, tabi ki web tabanlı bir çözüm geliştirirsiniz. Kullanıcı ister evinden, ister gittiği ülkeden rahatlıkla bağlanabilir, işlerini coğrafi bölgeden bağımsız olarak devam ettirebilir. Aklınızda soru kalmaması için bu uzun girişi yaptım. Peki web tabanlı bir çözüm üretmek için neleri bilmeliyiz?  
Önce HTML(Hypertext Markup Language), yani Veri İşaretleme Dili, bugünlerde HTML5 sürümü ile yeni özellikler kazandırılan web sayfalarının ana görüntüleme dili. Öğrenimi çok kolay ve basit omakla birlikte, pratik yapmadığınızda akılda kalmaz. Çeşitli yazılım geliştirme araçları ile HTML kodları otomatik olarak üretilir. Bu araçlar otomatik üretse de tavsiyem tamamen HTML'ye hakim olmanızdır. 

CSS,(Cascading Style Sheet) ise iyi bir web tasarımcı olmak için elzem olan bir teknoloji. HTML web sayfalarına 

hükmetse de CSS olmadan profesyonel görünümde ve her cihazda çalışan sayfalar hazırlayamazsınız. CSS ile sayfanıızın nasıl bir şabllona yerleşeceğini planlarsınız. CSS ile farklı şablonlar hazırlayıp, görünümü farklı sayfalar üretebilirsiniz. Google arama motoru da tablolar kullanarak hazırlanmış HTML sayf

alarından çok CSS ile biçimlendirilmiş sayfaları sever.

Jquery ise sayfalarına hareket katmak için geliştirilmiş, daha az kod yazarak daha çok iş yapacağınız bir teknoloji. Eskiden kullandığımız JavaScript'in tahtına oturdu, birçok özelliği JavaScript'den alsa da, sürekli yenilenen kütüphanesi ile wenb tasarımcıların vazgeçilmezi haline geldi.

Dinamik dillerden birini (ASP.net veya PHP gibi) de bilmek zorundasınız, zira Jquery istemci tabanlıdır, son kullanıcı Jquery kodlarını inceleyebilir, görebilir ama Jquery hızlıdır. ASP.net, PHP, Perl gibi diller ise sunucuda çalışan ve HTML kodlarını istediğiniz gibi üretmenizi sağlayan teknolojilerdir. Son kullanıcı, ASP veya PHP'nin ürettiği kodları göremez, sadece sunucu bilgisayarda bulunan web sunucu aracılığı ile üretilen HTML kodlarının sonucunu görür. Bu da güvenlik açısından önemlidir.


Dinamik diller, diğer taraftan veritabanı ile de iletişim kurarak, verilerin sunucularda saklanmasını, sorgulanmasını sağlarlar. Web dünyasının hızlı gelişmesi de dinamik dillerden sonra olmuştur. 90'lı yıllarda hazırlanan sadece HTML kodundan oluşan web sayfaları günümüzde tamamen ASP.net ve PHP ağırlıklı dinamik dillerin kullanıldığı sayfalara bırakmıştır.

Peki PHP mi, ASP.net mi öğrenmelisiniz? Diğer bir makalede iki dilin de farklarını anlatıp seçimi size bırakacağım.

Flash Mask Layer Örnek

Bu yazımda Flash CS3, CS4 ve CS5 versiyonlarında uygulayabileceğiniz basit bir maskeleme uygulamasını anlatmaya çalışacağım . Tüm işlemleri adım adım resimlendirerek göstermeye çalıştım. Oldukça basit bir animasyon. Frame By Frame animasyon tekniğine dayanıyor. Kodlama gerektiren bir durum yok. Sadece son frameye animasyon dursun diye bir ActionScript kodu koydum. Animasyon ekrana basit bir Türkiye haritası çizmektedir. Şimdi adım adım bu animasyonun nasıl yapıldğını görelim.

Adım 1:

İlk önce internetten basit bir Türkiye haritası bulun.

Adım 2:
Flash programınızı başlatın ve boş bir Flash dokumanı oluşturun AS2 veya AS3 olması fark etmez.

Adım 3:

Haritanızı Üst menüden File > Import > Import to Stage yolunu izleyerek çalışma alanınıza yükleyin ve boyutlarını ayarlayın.

 Adım 4:

 Resmin tamamını seçin ve klavyeden CTRL+B ya da Üst menüde Modify >Break Apart yolunu izleyerek resmin pixellerine ayrılmasını sağlayın.

 Resim şekilde görüldüğü gibi seçili hale gelecektir.

 Adım 5:

 İlk önce resimdeki gibi Laso Tool’a ardında toolbarın alt kısmında olan Magic Wand’a tıklayın ve ardından harita resmindeki gri noktalı alanlara tıklayın ve seçili hale getirin. Ardında del tuşuna tıklayarak tüm gri alanları temizleyin. Geriye bir tek haritanın çizgileri kalsın. Eğer vektörel bir resimle çalışıyorsanız muhtemelen bu işlemi yapmanıza gerek yok. Burada amaç haritanın çizgilerini Falsh çalışma ortamında resimden ayırmak. Dilerseniz Çalışma alanının arka planını başka bir renkle renklendirip beyaz kısımları Eraser Tool ile silebilirsiniz .Dediğim gibi amaç geriye sadece sınır çizgilerinin kalması.

 Adım 6:

 Haritamızın bulunduğu layera maske ismini verin ve cizim isimli yeni bir layer oluşturup maske layerının altına koyun.

Adım 7:

Maske layerının üstüne gelip farenin sağ tuşuyla tıklayın ve açılan menüden Mask seçeneğini seçin. Harita resmi kaybolacaktır. Cizim isimli layerın satırında bulunan kilit resmine tıklayarak haritayı görünür hale getirin.

 Adım 8:

 Maske layerında “Show Layer as Outlines” adlı minik yeşil bir kutucuk var. Sizin çalışmanızda bunun rengi başka olabilir. O kutucuğa tıklayarak içindeki rengin kaybolmasını sağlayın. Böylece haritamızın sınır çizgilerinin içi boşalacak sadece bu çizgilerin kenarlıkları görüntülenecektir.

Adım 9:

Tekrar cizim layerına dönüyoruz ve soldaki araç kutusundan Brush tool’u seçiyoruz. İstediğimiz bir rengi seçebiliriz.Bruaya kadar yaptıklarımız resmi ve animasyona kılavuzluk edecek olan çizgileri belirlemekle ilgiliydi. Bu adımdan sonra animasyonumuz oluşturmaya başlayacağız. Çizim layerındayken klavyeden F6 tuşuna basın ve yeni bir frame oluşturun haritanın istediğiniz bir kısmına zoom yapın. Burası başlangıç noktanız olacak. Brush tool ile harita çizgisinin minik bir kısmını boyayın ve ardından tekrar F6’ya basarak yeni bir layer oluşturun. Bunu her layerda tekrarlayarak tüm harita çizgilerini boyayın. Boyadığınız çizgilerin kesişmemesine dikkat edin.

 Adım 10:

 Tüm boyama işlemi tamamlandığında harita aşağı yakarı şu şekilde olmalıdır. Frame By Frame animasyon biraz uzun sürebilir ama ne kadar çok parça yaparsanız animasyonunuz o kadar güzel ve gerçekçi olur. Artık Üst menüden Control > Test Movie > in Flash Proffessional yolunu takip ederek animasyonunuzu  test edebilirsiniz.

 Adım 11:

Son olarak bir layer ekleyn ismini actionscript olsun. En son Frame üstüne gelip F6 tuşuna basın. Böylelikle bu Frame bölünmüş olur. Klavyeden F9 tuşuna basıp Action-Frames isimli paneli açın ve şu kodu yazın  " stop(); ” bu kod flas animasyonun yazıldığı karede durmasını sağlar.  ActionScript kodu son kareye(frame) yazıldığı için animasyon son karede duracaktır.

Böylelikle animasyon tamamlanmış oluyor. Aşağıda animasyonun tamamlanmış hali gif formatında görülmektedir. muhtemelen flash versiyonu daha hızlı işliyor. burada sadece bittiği zaman neye benzemesi gerektiğini göstermek için koydum.

 Bu çalışmanın örnek FLA dosyasını ayrıca şu linkten indirebilirsiniz. 

 Download FLA File