(Efendim, birçok güzide sitemizde gördüğüm bir uygulamayı bende hayata geçirmek istedim. Bu başlık altında bundan böyle web’de gördüğüm bazı bağlantıları, yararlı olduğunu düşündüğüm makaleleri, ilginç gelişmeleri sizlerle paylaşmayı düşünüyorum. Umarım sizler için faydalı olur.)

• Tutorial Blog 10 tane güzel Accordion tarzı menü sunmuş.

• SmashingMagazine büyük puntolu yazıların hakim olduğu web sitelerini sergilemiş.

• Erhan, Arama motorlarından gelen ziyaretçilerin aradıkları kelimeleri nasıl renklendireceğine dair hoş bir makale yazmış.

• Deziner Folio’dan Photoshop için harika Web 2.0 gradientleri.

• Free Css Toolbox, ücretsiz ve çok kullanışlı bir Css editörü.

Bugün nette rutin gezintilerimi yaparken Blograzzi‘nin menüsü dikkatimi çekti. Forum ve Araçlar bölümünün açıldığını o zaman anladım. Forum bölümü bu oluşuma gerekliydi ve bir o kadar da ilgi göreceği kesindi. Çünkü yüzlerce blog sahibi bir arada toplanıyor ve etkileşime geçiyordu. Onların daha hızlı konuşmasını sağlayacak daha hızlı çözümler üretecek bir Forum oldukça işe yarardı ve sonunda olmuş. Forum yine bilindik Blograzzi çizgisi ile hazırlanmış. Herhangi bir ekstra üyelik işlemi gerektirmeden Blograzzi kullanıcı adınız ve şifreniz ile forumda konu başlatabilir ve yazılan forum konularına cevap verebilirsiniz. (Duyurması bizden kullanması sizden)

Blograzzi’den bir başka yenilik ise Araçlar bölümü. Bu bölümde ise hem Blograzzi araçlarınının kullanımı hem de sitemize eklemek istediğimiz iGoogle, Google toolbar araçlarını bulabilirsiniz. Ayrıca güncelerimize eklediğimiz Blograzzi listeleme kodları da aynı sayfa içinde mevcut.

Blograzzi Forum ve Araçlar için blog’da yapılan duyuruyu buradan okuyabilirsiniz. Her iki ana bölümün de Blograzzi’ye hayırlı olması dileğiyle…

E-günce sahipleri çok iyi bilirler ki (özellikle tasarım ve teknoloji konularında yazanlar) makale yazmak, bir bilgiyi görsel ögelerle destekleyip ilgilere anlatmak çok zahmetli ve bir o kadar da dikkat gerektiren bir iştir. Bazı zamanlarda bu makaleleri (tutorial) kendimiz bulup uygulamak isteyebiliriz. Sizlere sürekli olarak kullandığım ve her zaman takıldığım konularda başvurduğum bir kaynağı tanıtmak istiyorum; Pixel2life.com

Pixel2life.com, aklınıza gelebilecek tüm konularda makaleler barındıran ve sizleri ilgili sayfalara yönlendiren bir derleme sitesidir. Photoshop, Dreamweaver, Flash, 3d Max, Illustrator, Inkspace ve daha birçok ana başlıkta makaleler derleyen site aynı zamanda Forum ve Developer alanına da sahip. Siteye dilerseniz üye olabilirsiniz ancak üye olmadan da sitenin tüm bölümlerinden yararlanabilirsiniz. Özellikle çoğu muadili sitede görülmeyecek biçimde ana kategoriler alt kategorilere ayrılmış ve böylelikle ziyaretçinin binlerce kaynak içinde kaybolması önlenmiş. Açıkçası her zaman kullandığım ve takip ettiğim bir kaynak. Sizlere de (özellikle tutorial arayan arkadaşlarıma da) şiddetle tavsiye ediyorum.

Uzun süredir bu güncede Xoops ile ilgili haberlere yer vermiyordum. Belkide bir nebze olsun bu kategoriyi dolduracak bir haber vermek istiyorum. Xoops geliştiricileri tarafından sistemin 2.0.17 versiyon numaralı son kararlı sürümü duyuruldu. Sürümü indirmek için buraya ilgili haber ve yorumlar içinse buraya tıklayabilirsiniz.

Malumunuz, Photoshop ile birçok şeyi yapabiliyoruz. Bu “birçok şey” içinde Photoshop’un kullanımının yaygın olduğu en büyük alanlardan birisi de web tasarımı. Web ikonlar, web şablonları, web bannerları gibi birçok uygulamayı rahatlıkla photoshop üzerinde yapabiliyoruz. Hemen hemen tüm tasarım projelerimin başlangıcında öncelikle Photoshop ile çalışıyorum. Bunu yapmamın nedeni sitenin genel arayüzünü Photoshop ile tasarlayarak webe aktarmak. Bu yazımda sizlere Photoshopta yaptığımız bir çalışmanın nasıl web şablonu olarak kaydedileceğinden ve bununla ilgili tekniklerden bahsedeceğim.

Öncelikle Photoshop üzerinde uygulamamızı yapacağımız bir çalışmamızın olması gerekiyor. Ben aşağıda gördüğünüz çalışmayı yaptım ve bunu örnek olarak kullandım. Sizde buna benzer bir çalışmayı basit işlemlerle oluşturabilirsiniz. Çalışmanın uzun uzadıya nasıl yapıldığını anlatmayacağım. Bunu biraz da sizlere bırakıyorum. Çünkü asıl anlatmak istediğim nokta Photoshop ile oluşturulan böyle bir sayfanın nasıl “kesileceği” ve “webe aktarılacağı”. (Zaten ileride Photoshop ile bir web arayüzü tasarlamakla ilgili bir makale yazmayı düşünüyorum)

Çalışmamızı Photoshop üzerinde açıyoruz ve bundan sonra yavaş yavaş kesme işlemine başlayacağız. Bu kesme işleminden kastımız oluşturduğumuz PSD dosyasını Photoshop’un Slice aracını kullanarak belli parçalara ayırmak bu parçalara isim vermek ve bu işlemi yaptıktan sonra “web için kaydetmek”. Benim yapmış olduğum çalışmada izlediğim mantık yazı alanları için büyük parçalar kesmek ve her link içinse ayrı ayrı kesim alanları oluşturmak.

Şimdi bunu nasıl yaptığımıza sıra geldi. Çalışmamızı açtıktan sonra Photoshop’ta Araçlar menüsünden Slice Tool’u seçiyoruz. (K) Bıçak şeklindeki ikonumuzla çalışmamızı kesmek istediğimiz yerlerden kesmeye başlıyoruz. Bunu yaparken mümkün olduğunca mantıklı bölümleme yapıyoruz. Çünkü daha sonra bu çalışma webe aktarıldığında bu alanlar üzerinde değişiklikler yapacağız. Aşağıda yaptığım kesme alanlarına ufak notlar ekledim bu alandan yararlanarak nasıl bir kesim yaptığımı görebilirsiniz.

Gördüğünüz gibi ileride kullanacağım alanlarda kesim işlemlerimi uyguladım ve kesim alanlarımı tamamladım. Kestiğim noktaların herbirine Photoshop otomatik olarak numaralar veriyorlar. Shift+K tuş kombinasyonunu kullanarak kestiğim alanların üzerine 2 kere tıklayarak kestiğim alanlara kendi istediğim isimleri verebilirim. Şimdi çalışmam bu haldeyken File >> Save for Web veya Alt+Shift+Ctrl+S tuş kombinasyonunu kullanarak çalışmayı web için kaydediyoruz.

Açılan pencerede uyguladığımız kesme işlemini detaylı olarak görebiliyoruz. Bu haldeyken Save diyerek açılan pencerede istersek yeni bir klasör açıyoruz istersekte bilgisayarımızda belli bir alana çalışmamızı isim vererek kaydediyoruz. Ben yaptığım çalışmada index.html ismini vererek bir klasör içine çalışmamı kaydettim. Bu kayıt işlemi bittikten sonra isim verdiğiniz dosya .html uzantılı bir dosya olacak ve aynı dizinde bir images klasörüne rastlaycaksınız. Bu dosyayı tarayıcınızda açtığınızda oluşturmuş olduğunuz PSD dosyasının web biçiminde kaydedildiğini göreceksiniz. Webe aktarma işlemi bittikten sonra dosyamız üzerinde değişkilikler yaparak sayfamızı değiştirebiliriz.

DEĞİŞİK TEKNİKLER
Yukarıda anlattığım kesme işlemi yerine yine Photoshop’un kesme işlemini kullanarak web sayfalarımızı farklı şekilde Photoshop yardımıyla oluşturabiliriz. Örneğin yaptığımız PSD dosyasını yine aynı biçimde Slice aracıyla kesebilir ve kestiğimiz alanları tek tek resim olarak kaydedip bu resimleri daha sonra Dreamweaver gibi görsel editörlerde kullanabiliriz.

Bununla birlikte sürekli yaptığım bir teknikte yaptığım çalışmayı yine aynı biçimde keserek Photoshop açıkken Xhtml ve Css kodlarıyla sayfa kodlamamı yapıp resimleri kullanmamdır. Photoshop’taki çalışmama bağlı kalarak kodlamayı bu şekilde yaparım ve referans aldığım sayfaya en yakın tasarımı yapmaya uğraşırım.

Bunun gibi değişik teknikler kullanılarak Photoshop’ta web uygulamalarımızı rahatlıkla yapabiliriz. Umarım faydalı olabilmişimdir.

Evet nedir, ne değildir, nasıldır, kime aittir derken hepimiz öyle ya da böyle bir Web 2.0 havası yaşıyoruz. (ve farkında olmadan başkalarına da yaşatıyoruz) Web 2.0 nedir veya nasıl bir olgudur tartışmasına girmek değil amacım. Sadece kendi bakış açımdan bu oluşuma yaklaşmak. Web 2.0′ın bizlere tasarım alanında büyük bir yol katettirdiği aşikar. Tabi bunda kesinlikle Css ve Xhtml’nin katkılarını unutmamak gerekir. Semantik kod yazımı ve bu yöndeki işleyiş Web 2.0′ın vazgeçilmezleri arasında. Ben bu yazımda Web 2.0 sitelerinin ortak özelliklerini ve böylelikle Web 2.0′ın genel karakteristik tasarım yapısını ortaya koymaya çalışacağım. Bir nevi Web 2.0 ne demek değil Web 2.0 neyi ortaya koyar yazısı olacak bizler için. Hemen başlayalım dilerseniz.

1) BÜYÜK ve KALIN FONTLAR

Evet Web 2.0′ın hayatımıza soktuğu en büyük tasarım değişikliklerinden birisi de “Büyük Fontlar”. Büyük fontla yapılan başlık ve duyurular; nedense daha çok ilgi çektiğinden midir yoksa diğer web sitelerinin bunun bir kural olduğunu düşünerek yaptığından mıdır bilinmez birçok sitede görmeye alıştığımız bir durum oldu. Büyük fontların kullanılması elbetteki hepimizin hoşuna gidiyor ve bunu çokça yapıyoruz. İncelemede bulunacağınız sitelerin birçoğunda vurgulanması istenen alanların büyük ve kalın fontlarla yazıldığını göreceksiniz. Açıkçası daha küçük metin boyutlarıyla yazılan yazılarımız kaybolup gidiyordu. Bunun yerine benimsenen büyük ve kalın fontla yazı örnekleri birçoğumuzun daha çok hoşuna gidiyor sanırım. Kalın fontları birçok sitenin logo tasarımında da kullandığını söylemeden geçmeyelim. Özellikle bir kuralmış gibi birçok büyük site logo ve grafik tasarımını hayata geçirirken elindeki fontun “bold” versiyonunu kullanmaya özen gösteriyor.

İnternette sürekli yanımda olan ve son bir senedir kullandığım bir siteyi tanıtmak istiyorum sizlere. Web2Ftp; Bu site ile herhangi bir FTP programına ihtiyacınız olmadan sadece ftp kullanıcı adınız ve şifreniz ile internet üzerinden ftp işlemlerinizi yapabiliyorsunuz. Bu tarzda birçok servis ve site olabilir ancak Web2Ftp’yi diğerlerinden ayıran bazı özellikler var.

Öncelikle hızı, hız bizim için çok önemlidir ve bu site gerçekten dosya transferinde size büyük bir hız veriyor. Dosya gönderiminin ne zaman başlayıp ne zaman bittiğini göremiyorsunuz. Kesinlikle hızı konusunda kefilim. Bir diğer güzelliği ise Türkçe erişiminin olması. Servisi Türkçe kullanabiliyorsunuz ve bu bence yeni kullanıcılar için büyük bir avantaj. Şahsi görüşüm, böyle bir servisin en azından panele giriş yapılan anasayfasının W3C standartlarına uygun olarak tasarlanmasıydı. Şimdilik HTML 4.01 geçerliliği var. Kesinlikle kullanmanızı tavsiye ettiğim bir site. Herhangi bir bölümde veya laboratuvarda ftp programı indiremediğiniz, bulamadığınız durumlarda sadece internet ile ftp yapabilirsiniz.
Şahsen bu keyfi okulda güncelleme yapmak istediğim zaman yaşıyorum. (Hatta evde bile!)
Hızlı Linkler: Web2Ftp Anasayfası | Türkçe Anasayfa