Son zamanlarda artık hemen hemen herkes, kendi sitesini yapmanın bir yolunu aramaya başladı. Kimi template 'edit'liyor, kimi ustunkoru site bozması bir şeyler yapıyor, kimi de gercekten uğraşıyor, guzel calışmalar cıkarıyor. İnternetteki kaynaklardan oğrenebildiği kadarıyla herkes bir şeyler dokturmeye gayret ediyor. Eğer siz, "ben uğraşamam kardeşim, site mite yapmak icin program filan oğrenemem, herhangi bir hazır site bile benim işimi gorur" diyorsanız, basit bir blog sitesi kurmayı deneyebilirsiniz. Ama kendinize ozel siteler yapmak arzusunda iseniz, yazımızın bundan sonraki kısmını dikkatle okumanızı oneriyorum. Cunku bu yazımda web tasarımına yeni başlayanların bilmeleri gereken aşamalara değinmek istiyorum. Ornek bir calışma ile başlayalım. On Hazırlık Aşaması Mesela bu yazımızda bir elektrik firmasını ele alalım ve onun uzerinden gidelim. Yıldırım Elektrik Bobinaj firması bizden muşterilerinin kendilerine kolayca ulaşabileceği ve urunlerin on planda olduğu bir web sitesi yapmamızı istiyor. Urunlere daha sonra ekleme-cıkarma yapılmasını, yani dilediği zaman bir kategori ve urun eklemek cıkarmak istiyor. İlk once yapacağımız site ile ilgili dokumanları temin ediyoruz. Urunleri ve kategorileri belirliyor, "Hakkında" kısmı icin kullanacağımız metni ve adres telefon gibi iletişim bilgilerini alıyoruz. Bizden istenen cok da aşırıya kacmadan sadelik uzerine kurulu, kullanışlı bir web sitesi oluşturulması. Varsa diğer bilgilere de ulaşıyor ve on hazırlık kısmını tamamlıyoruz. Boylece sitemiz dort kısımdan oluşacak: Ana Sayfa, Hakkımızda, Referanslar, İletişim. Urunler ise başlı başına bir modul olacak. Tasarım Aşaması Artık sitenin yapısını belirlememiz gerekiyor. Bunun icin once bir karalama ile plan yapmamız lazım, ki sonrasında bunu tasarım haline getirebilelim. Photoshop yardımı ile sitede kullanacağımız materyalleri temizliyoruz. Bunun icin Fireworks'u kullanmanızı onermem, tırtıklı bir şekilde temizleme yapacaktır. En iyisi Photoshop'tur. Tasarım calışmamızda Fireworks kullanıyorum. Siz isterseniz Photoshop da kullanabilirsiniz, ama Fireworks kadar bu konuda pratik olmadığını belirtmek isterim. Tasarımımı tamamlıyorum: Şimdi bu tasarımın diğer sayfalarda gorunumunu yapalım. Referanslarımız kısmı aşağıdaki gibi olacak: Urunlerden birine tıklandığında aşağıdaki gibi gorunecek: Tasarım işi sizin becerinize kalmış zaten. Tasarım yaparken cok guzel gorunuyor diye oyle herşeyi doldurmayın. Cunku firma sahibinin bizden isteği, sitenin kullanışlı olması, sitesine giren birinin gerekli bilgileri elde edebilmesi. Bir duşunun: Bir bobinaj arıyorsunuz ve Google'dan buldunuz siteyi, girdiniz diyelim. Sitenin acılışında uzun suren bir animasyon, yanıp sonen bir suru sacma sapan hareketli nesneler var. Ana sayfaya geldiniz yine aynı. Ne kadar etkileyici olursa olsun, o an icin size bir anlam ifade eder mi tum bunlar? Yoksa sadece urunle mi ilgilenirsiniz? İşte bu duşuncelerle luzumsuz gif animasyonlar, anlamsız resimler, cok farklı keskin renkler web tasarımında uzak durulması gereken unsurlar olarak karşımıza cıkıyor. Sadece amaca ulaşın, yeterli. Tasarım kısmını tamamladım ve kendi mantığıma uygun şekilde dilimliyorum. Dilimleme yaparken flash yapacağım kısmı tam olarak kesiyorum. Başlıkları dilimlerle belirliyorum. Hicbir zaman Fireworks'ten HTML'ye donuşturulmuş dosyalarla calışmadığımdan Dilimlediklerimi (sadece kullanacaklarımı) farklı resimler halinde kaydediyorum. Dreamweaver'da yeni bir sayfa oluşturuyorum. Genel olarak CSS kullanarak oluşturduğum div'leri boyutlandırarak sayfa yerleşimini yapıyorum. Sonra Flash programını acarak header bolgesi olarak belirlediğim kısmın boyutunu ayarlıyorum ve daha sonra Fireworks'te bu alandaki tum parcaları ile kopyalayarak Flash icine yapıştırıyorum. Flash, Fireworks'teki bir nesneyi veya nesneleri movie klip olarak, png formatına import edecektir. Yapmanız gereken kopyala yapıştır yapmaktır. Header'i istediğimiz hareket ve efektleri vererek sade bir şekilde yapıyoruz. Kodlama Aşaması Bundan sonra programcı devreye giriyor. Soldaki urunler menusune uygun şekilde kodlamayı yapıyor. Birine tıkladığınızda o kategorideki urunler geliyor, ayrıca belirlenmiş olan kontrol panelinden kategori ve urun eklenebilir hale getiriyor. Referanslar kısmını da benzer şekilde hallettikten sonra web sitesini herhangi bir FTP programı vasıtası ile hostingine atıyoruz. Sonuc: Basit icerikli bir siteyi hazırlarken yukarıda bahsettiğimiz aşamaları takip ederiz genelde. Sizlere fikir vermesi acısından gelen soru ve talepleri de goz onunde bulundurarak boyle bir yazı hazırlama ihtiyacı doğdu. Umarım bir fikir vermiş ve yararlı olmuştur. Yeni Başlayanlar Buradan Başlayabilirsiniz... Web Tasarım Nasıl Yapılır Web tasarımı nasıl yapılır. Once biraz konu ile ilgili bilgi verelim. Web tasarım nasıl yaparım diyorsanız once hangi progrmaları kullanmalıyım sorusunun cevabını bulmalısınız. Web tasarım programları ile ilgili daha onceki makalemize bakabilirsiniz. Web tasarım yapabilmeniz icin oncelikle yapmak istediğiniz şeyi kağıda dokmeli vaya tam olarak kafanızda oluşturmalısınız. Geliştirmek icin veya daha sonra mudahale edebilmeniz icin onemlidir. Programınızı da buldunuz ne yapmak istediğinize de karar verdiyseniz başlayabilirsiniz. Yapmak istediğiniz sitenin oncelikle resimlerini (flash ta olabilir) hazırlamalısınız. Bunun icin en guzel kaynak Google resim arama motoru'dur. "Web tasarımı duzenli bir şekilde nasıl yapılır" sorusunun cevabı ise once sitenizin resmini cizmektir olabilir. Bir site yapmadan once ceşitli grafik tasarım programları kullanabilirsiniz. Bu programlarda yaptığınız site resmini parcalanmış layer'lar halinde kullanabilirsiniz. Hemen bir ornek verelim : Burada gorduğunuz gibi bir resim calışması yapılmış bu resim calışması daha sonra dilediğimiz gibi kullanılmak uzere parcalanacak ve sitemizin oluşturulmasında kullanılacaktır. Neden Web Site Yaptırmalıyım ? İnternet cağımızın en buyuk yeniliğidir. Gunumuz iş hayatında tutundurma cabaları; arz ve kaliteden on planda gelmektedir. Başta reklam olmak uzere firma veya urun tanıtımlarında bircok yontem kullanılmaktadır. Web sitesi firmanızın tanıtımında kullanılacak fiyat/reklam politikasına en uygun maliyeti ve maliyete yonelik hedef bakımından en cok getirisi olan tanıtım hizmetidir. Nereden Başlamalıyım ? Bir web sitesine sahip olabilmek icin başta bu alanda uzman kuruluşlar ile calışmanız gerekmektedir. Web tasarım yapılmadan once isim tescili (Domain) 'nin yapılması gerekmektedir. Burada firmanızın veya markanızın on planda tutulması şarttır. Kolay ulaşım icin kısa ve oz kelimelerden secilmesi işinizi dahada kolaylaştıracaktır. Bu alanda calışacağınız alanın isim tescili (domain) ve barındırma hizmetini (hosting) kendi bunyesinde vermesi tek bir firma ile calışma avantajı sağlayacak ve etkileşimli ileşim kurulabilecektir. Yapılmasını istediğiniz sitenin amac olarak neyi ifade etmesi gerektiğini duşunup bu işte uzmanlaşan tasarım ekibine bilgi vermenizle; yapmanız gereken işlemler bitecektir. Web Tasarım Web tasarım, tamamıyla muşteri isteğine yonelik yapılır. Siz değerli muşterilerimizden alınan bilgiler ile yapılmasını istediğiniz web tasarımın hangi amaca yonelik oldupu saptanır. Başta grafik tasarım olmak uzere şekil konusunda mutabakat sağlandıktan sonra tasarıma veya istenirse programlamaya gecilecektir. Web Tasarım ve Web Programlama Web tasarım, grafiksel olarak tasarlanan yapıyı gorsel olarak web browser'a (internet explorer, firefox, opera vb.) uygun hale getirme ile sınırlıdır. Ziyaretci icin gorsel bir icerik sağlar ve ziyaretciye sadece mesaj atabilmesi olanağı sağlanır. Web site yoneticisi ise gerekli değişiklikleri yine cslışmakta olduğu firmadan sağlamaktadır. Web programlama, isteğe bağlı olarak canlı ve dinamik icerikler sağlar. oyleki; uye girişi, Uyelik bilgilerinin edinilmesi, site uzerinden iletişim, mesaj atma, ile ilgili değerlendirme yapma, anlık bilgi alışverişi, alım işlemleri gibi ziyaretciye pratik ama etkili hizmet sunmaktadır. Site yoneticisi icin ise; urun ekleme, cıkartma ve silme, urunu askıya alma, iceriğini değiştirme, resim ekleme, uyeleri kontrol etme, uyelik bilgilerinin okunmasını sağlama, online mesaj atma gibi bir cok olanak sağlamaktadır. Bu belirtilenler yapılabilecek olanlara ornektir ve programlama isteğe yonelik olarak yazılabilmektedir. Burada web site sahibine gorsel tasarımdan farklı olarak bir yonetim paneli sunulur. Buradan parolanızı girerek site ile ilgili tum değişiklikleri kendinizin yapabilmesi sağlanmaktadır. Bu durumda guncellemeleri kimseye ihtiyac duymadan hızlı bir şekilde yapabilirsiniz. __________________