[Vincent]

Bu konu aslında kişiden kisiye değişir, yani ben web tasarımına başlıyorum, nerden başlamalıyım gibi bir soru geldiğinde bana göre en doğru cevap "CSS ve (X)HTML öğrenmek temeldir" olacaktı (Fatihturan arkadaşımızın yazısına da katılıyorum). Ama anladığım kadarıyla işini görecek kadar öğrenmek istiyorsun, ve işin teknik (kod) kısmına fazla girmek istemiyorsun. Bu yüzden,illustrator kullanıyorum demişsin, bu şekilde devam et. illustratorde de web tasarımı yapılabilir, hatta elde ettigin dosya vektörel oldugu icin cok daha geliştirilebilir, tekrar kullanılabilir oluyor. Pixel boyutlarda dosya oluşturarak işe başlayabilirsin, pixel preview ozelliği de mevcut.

Photoshop web tasarımında bir standart haline geldi, ama temelde fotograf düzenleme amaçlı bir yazılım olduğunu biliyoruz. Bu yüzden photoshopa geçmen zaten gereksiz. illustrator ihtiyaçlarını fazlasıyla karşılayacaktır.

Tasarımın HTML olarak kodlanması aşamasında, Photoshop'un görsel (slice) özellikleri pek cok kişi için yeterli oluyor. illustrator ile uyumluluğu da önemli bir artı (smart objects vb.). Illustratorde oluşturduğun tasarımı Photoshop ile web sayfası haline getirmen bence senin için en uygun yöntem.

Ama şunu da eklemek lazım, CSS ve HTML öğrenilmesi kolay ve (bana kalırsa) zevkli diller.Ayrıca hiçbir yazılımın oluşturduğu kod elle yazılan kadar optimize, geliştirilebilir ve tekrar kullanılabilir olamıyor.Sunucu taraflı bir dil öğrenirken de büyük avantaj.

Not:
domain sektörü ile ilgili verdiğin bilgiler çok önemli ve Türkçe kaynak eksiğini kapatacak nitelikte. Keşke referans olacak şekilde yayınlansa bu örnek verilen sayfadan, o zaman table etiketleri, div etiketleri kimsenin umrunda olmaz, ne de olsa "Content is King".

[erdinç]

kindarmarti'nın bahsettiği Photoshop ve slice yöntemini araştırdım. İki tane video buldum:

1. Resmin hazırlanıp kesilmesi
http://www.youtube.com/watch?v=MtIAX_hStA8

2. hazırlanan parçaların Dreamweaver'a aktarımı
http://www.youtube.com/watch?v=dpYLWIc6leI

Yalnız kafama takılan ayrıntılar var:

kindarmarti, "save as web" özelliğinden bahsetmişti. Photoshopta doğrudan HTML olarak kaydedeceğiz diye anladım konuyu. Resim dosyalarını içeren bir klasör ve ona eşlik eden bir HTML dosyası almayı bekliyordum ama öyle bir şey yok.

Bende CS2 var. Orada save as web özelliğini çok aradım ama bulamadım. Acaba bu CS3'te yeni mi eklendi?

İlk videoda bu işi yapan arkadaş save for web kullanıyor. Yani jpeg olarak resim dosyalarını kaydediyor. Ardından ikinci videoda görüldüğü gibi kendisi manuel olarak dreamweaverda tablo yaratıp hazırladığı resim parçalarını tablonun kısımlarına aktarıyor.

Bu videolarda işlemleri açıklayan arkadaş bu işi olması gerektiği gibi yapıyor mu? En yaygın yöntem bu mudur slice yöntemi için? "Save as web" konusuna ne oldu?

[kindarmarti]

Merhaba
Erdinc doğru anlamıssın, ama ufak bir ayrıntıyı atlamışsın.
Save as web işleminde 3 önemli işlem var..

save as webişleminde 3 resimde görüldüğü gibi, kayıt türü: "HTML and images " olacak.
dşpnot: index .HTML diye kaydediyorsan images klasöründeki dosyalarda index_01,index_02 olacaktır,

erdinc1.jpg erdinc2.jpgerdinc3.jpg

diğerleri;
arkası transparan kullanıyorsun. PNG24
quality: %100 her zaman, en kötü ihtimalle ile png kullanmanı öneririm.

Saygılarımla
.onur

[erdinç]

kindarmarti,

Evet buldum nereden yapacağımı. Photoshop gözümde biraz olsun değer kazandı.

Konuyu anlamayan arkadaşlar için bir de ben özetleyeyim:

1. slice tool ile bölümleri işaretledikten sonra file> save for web seçiyorsun
2. açılan sayfada png24 seçiyorsun ve save tuşuna basıyorsun
3. açılan pencerede HTML and images seçip kaydediyorsun.

Bu arada aynı özelliğin illustrator'de olduğunu fark ettim. Üstelik slice tool da varmış. (crop area tool'un altında) Şu ana kadarillustrator'da slice tool hiç kullanmamıştım.

Benim aklıma takılan konular var yine.
1. png24 formatinda kayıt yapmak yaygın mıdır?

2. fotoğraf özellikleri gösteren görüntüyü jpeg formatında, grafiksel görüntüleri ise gif formatında kaydetmenin iyi olduğunu duymuştum. Şimdi ne olursa olsun png24 mü kullanacağız?

3. Bu yöntemi kullanınca Photoshop veya illustrator HTML sayfasını, o sayfadaki tabloyu ve resim parçalarının o tablo içindeki yerleşimini kendisi yapıyor.
Bunun yerine daha temiz kod olsun diye tabloyu ben manuel olarak yapsam daha iyi olur mu?

4. menu üzerinde rollover efekti olmasını mutlaka istiyorum. Bu durumda tabloyu hazır da yapsam elle de yapsam dreamweaverda açıp rollover resimlerini belirleyeceğim öyle değil mi?

Benim bu yöntemden hiç haberim yoktu. Gayet basit ve etkili duruyor. Özellikle rollover images konusu mümkün olduğu için 'sayfayı kaplayan koca bir resim' şeklinde kafamda oluşan olumsuz kanı da gitmiş oldu. kindarmarti'ya sonsuz teşekkürler bu yöntemi aklıma soktuğu için. İllustrator'de olması harika bir şey.

[kindarmarti]

Merhaba;
Yanıtlamya çalışayım..

1. png24 formatinda kayıt yapmak yaygın mıdır?

png ile jpeg kalitesi arasında hiç bir fark yok;
png'nin en büyük özelliği şu; bir vesikalık fotografın var elinde arka planı temizledin. kısaca arka tarafı transparan yaptın.. bunu jpeg olarak kaydedersen, orası senin verdiğin background rengi olarak kaydeder,
Png en kıyak tarafı, senin transparan olmasını istediğin yerleri , transparan olarak kaydetmesi, istersenörnek yollayabilirim..
toparlarsak, png iyidir, gittikçe yaygnlaşmaktadır..
eknot: gif "graphics interchange format " patent sorunu cıktı geçtiğimiz yıllarda, png alternatif olarak sunuldu ve yaygınlaşıyor

2. fotoğraf özellikleri gösteren görüntüyü jpeg formatında, grafiksel görüntüleri ise gif formatında kaydetmenin iyi olduğunu duymuştum. Şimdi ne olursa olsun png24 mü kullanacağız?

o yargı var evet, ama ben normal şartlarda jpeg, transparan olaylarda png kullanıyorum, mutluyum..


3. Bu yöntemi kullanınca Photoshop veya illustrator HTML sayfasını, o sayfadaki tabloyu ve resim parçalarının o tablo içindeki yerleşimini kendisi yapıyor.
Bunun yerine daha temiz kod olsun diye tabloyu ben manuel olarak yapsam daha iyi olur mu?

evet olur, hatta daha şık olur.
mesela 8 parçalı bir resimi "save as web" ile .HTML dokersin tıkır tıkır da kodları ile oynarsın, ama ben geçen gün 102 parçalı bir .HTML çevirisi yaptım. o zaman imkansız cunku bir düzeltme sırasında komple kayabiliyor tablo'lar..


4. menu üzerinde rollover efekti olmasını mutlaka istiyorum. Bu durumda tabloyu hazır da yapsam elle de yapsam dreamweaverda açıp rollover resimlerini belirleyeceğim öyle değil mi?

evet öyle; rool over mantığı zaten temel alınan bir mantık, flashta da aynı sey ,Dreamweaver'de de,

Saygılarımla
.onur

[oky]

merhaba,

ben de fatihturan ve vincent gibi düşünüyorum.

CSS ve xhtml öğrenmek yerine Photoshop aracılığıyla site yapmak, hele ki bizim gibi vaktinin neredeyse tamamını internette geçiren ve geleceği internette olan kişiler için, 30'una merdiven dayamış birinin askere gitmemek için öss'ye hazırlanmasına benziyor. böyle durumdaki biri üniversiteye girse bile ne kadar huzurlu hissedebilir?

Photoshop ile site yapma yöntemini seçmiş olman, aslında ilk mesajında yazdığın tablolu tasarım yaparken aklına takılan soru ve sorunların farklı bir şekle bürünmesinden başka bir şey olmayacaktır.

belki hemen sonuç almak istiyorsun, ancak ben bundan da şüpheliyim. yıllarca ne yaptığımı bile bilmeden Dreamweaver kullandım, hala da öğrenebilmiş değilim. sonra birgün gözümde büyüse bile CSS ve xhtml öğreneceğim dedim ve bu 1 hafta sürdü. abartmıyorum, eğer ciddi ciddi 1 haftanı bu işe ayırırsan, örnekler üzerinde deneme yanılma ile alıştırmalar yaparsan mantığını kavrayacaksın ve gerisi çorap söküğü gibi gelecek.

CSS ve xhtml o kadar basit ve zevkli diller ki, Dreamweaver programının nasıl kullanılacağını çözmek bile daha fazla vakit alıyor. zaten domainci olsun, tasarımcı olsun fark etmez, bence CSS ve xhtml bizler için MSN'e nasıl avatar konulacağını bilmek gibi zaruri bir şey. nette de bu konuda sınırsız kaynak var. kitaptan çalışarak CSS ve xhtml öğrenmiş kimseyi, en azından ben tanımıyorum.

[erdinç]

kindarmarti,

Cevabın için teşekkürler. Şimdi bu konular daha yapılabilir geliyor.


Oky,

CSS konularında sana tamamen katılıyorum. Şu an yatay bir menüyü sıfırdan kendim yaratabilecek kadar CSS öğrendim. Açıkçası bunu öğrenmek birkaç dakika sürdü. CSS, sadece kodlarının kolay ve anlaşılır olması ile değil aynı zamanda çalışma yöntemi olarak da ayrı bir sadelik ve basitlik sunuyor.

Hizalama yapma, kenar boşluklarını belirleme gibi basit işlemlerle karmaşık sayfa düzenlemelerini yapabiliyorsun. Ayrıca başlık ve metinler için global ayarlar belirleyip bunları istediğin zaman değiştirebilmen de iyi. Bu özellik word'te yazı yazmak kadar anlaşılır bir şey. Zaten orada da aynı özellik var.

Firefox'ta CSS stillerini iptal edip sayfayı yalın haliyle görebiliyorsun. CSS ile biçimlendirilmiş bir sayfaya o şekilde bakınca her şey alt alt liste gibi sıralanmış duruyor. CSS'in birkaç kod kullanarak bu listeden karmaşık bir tasarım yaratabilmesi çok etkileyici.

CSS öğrenmeyi düşünüyorum. Aslına bakarsan ASP, PHP, database ve CMS içermeyen her yöntemi öğrenip karşılaştırmak istiyorum.

Slice yönteminin bana çekici gelmesi ise şimdiye kadar bu yöntemden haberim olmadığı için ne kadar basit olduğunu bir anda fark etmemden dolayıdır. Hemen şimdi uygulayabileceğim bir yöntem bu. Tablolarla çalışmak zaten bildiğim bir şey. İllustrator ile istediğim görüntüleri de kolayca yaratabilirim.

Ben bu slice yöntemiyle biraz pratik yapıp sonra CSS konularına girmeyi düşünüyorum. Hem bu arada slice yöntemine özgü birkaç ayrıntıyı öğrenmiş olurum. Örneğin yazı yazılacak bölümleri nasıl biçimlendireceğim, siteyi Dreamweaver ile nasıl bir araya getireceğim, Dreamweaver üzerinden nasıl yükleyeceğim vesaire gibi sana küçük gelen ama benim pratik yapmam gereken konular var.

[ooruc]

oky'in CSS önerisine bi ekleme yapayım. freecsstemplates.org - templateworld.com gibi sitelerden indirebileceğim serbest CSS şablonların HTML ve CSS dosyalarını dreamweaverda birlikte açarak denemeler yapabilirsin. CSS dosyalarında yaptığın değişikliklerin sonuçlarını hemen HTML sayfanda görebilirsin. Böylece yanlışlar ve doğruların kontrolu çok hızlı olabiliyor. CSS dökümanların içindeki tanımlamalar bana başta karışık geliyordu. Ama d.weaverde o bölgenin style tanımlamasını tıklayarak öğrenebiliyor ve CSS dökümanda o bölümle ilgili yeri kolaylıkla buluyor, sonra da oynamalarla ne gibi değişimler olduğunu görebiliyordum. Bir yöntem olarak uygulanabilir.

Png konusunda ise bir uyarıyı eklemeliyim. Az renkli, transparan png dosyaları küçük boyutlu olmasına rağmen (2 ya da 3 renkten oluşmuş) kullanılan imajın renk değerleri biraz fazlalaştığında boyut jpg formatına göre çok fazlalaşıyor. transparan png kullanımına ihtiyacın yoksa jpg formatı, sayfanın hızlı yüklenebilmesi açısından tercih edilmelidir diye düşünüyorum.

[erdinç]

Merhaba tekrar,

Bu başlık altında en son yazalı birkaç ay oldu. Şimdi web tasarımında karşılaştığım başka güçlükler var ve ne şekilde ilerlemem gerektiğine tam olarak emin değilim. O nedenle bu konulardaki ustalardan görüş bekliyorum.

Önce şu anki seviyemi anlatmak istiyorum:
Dreamweaver'da tablosuz site tasarımı yapabiliyorum. CSS bilgim fena değil. Artık kullandığım CSS menüleri kendim yaratıyorum. Sitenin iskeletini ve bütün içeriğini CSS ile biçimlendiriyorum. template ve nested template kullanımı konusunda fena değilim. CSS ve XHTML standartlarına uygun site tasarlayabiliyorum. Sitede kullanılan bütün grafikleri illustrator'de yaratacak kadar bilgim var. flash'ta da fena değilim. Gerçi action script'ten anlamıyorum ama timeline'da manuel olarak aklımdakini yapabiliyorum. PHP veya ASP'den hiç anlamıyorum. Database yaratmak nedir biliyorum ancak şu ana kadar database içeren bir site yapmadım.

Şimdi karşılaştığım sorunları anlatmak istiyorum:
İki sorun var:
1. Yaptığım bir siteyi kullanacak kişinin teknik bilgisi sınırlı. Sayfayı indirip sonra bir programla değiştirip sonra upload etmek uzun iş. Hem bu şekilde ya template bölgesinde dokunulmaması gereken bir yerler siliniyor veya dizayn görünümünde çalışıldığı için içeriğin etrafındaki bazı div kodları siliniyor.

Benim istediğim şey, güncelleme yapacak kişinin kullanıcı adıyla giriş yapıp forumda yazı yazar gibi web sayfalarını kolayca değiştirebilmesi. Sayfayı indirmeye, bir programla açmaya, sonra tekrar upload etmeye falan gerek olmasın istiyorum.

2. Geçenlerde bir müzisyen sitesi üzerinde çalışırken statik tasarımla çözemeyeceğim bir sorunla karşılaştım.Çok sayıda şarkı sözü var. Aynı şarkı sözüne farklı şekillerde ulaşılabilmesini istiyorum. Örneğin bütün albümlerdeki bütün şarkı isimleri alfabetik bir liste halinde olacak. Ayrıca albüm albüm listeler olacak. Bir de popüler şarkılar için başka bir liste olacak. Dolayısıyla aynı içeriğe farklı yollardan erişilmesi lazım. Birkaç tane içerik olsa DW'da library item olarak tanımlayıp statik site ile işin içinden çıkarım ancak yüzden fazla şarkıdan bahsediyoruz. Dolayısıyla bunları bir veritabanına koyup gerektiğinde oradan çekmek daha uygun olur.

Peki sizce nasıl devam etmeliyim?
Benim aklıma şunlar geliyor:

a. Wordpress öğrenmek. Ancak 1 numarada karşılaştığım sorun için Wordpress uygun olur mu emin değilim. Bir de bir defasında Wordpress kurmayı denediğimde Türkçe karakterlerle çok sorun yaşadım. O sorun beni soğutu bu işlerden. Bir de Wordpress bir CMS değil aslında. Dolayısıyla normal bir CMS kadar kullanışlı olur mu emin değilim.

b. Joomla öğrenmek. Ancak Joomla hoşuma gitmiyor. Joomla ile yatarılmış sitelerde parçalar sanki tam bir bütün oluşturmuyor gibi eğreti duruyor. Joomla yavaş çalışır veya iyi olmaz gibi bir önyargı var bende. Diğer taraftan Joomla'nın çok aktif bir kullanıcı topluluğu var.

c. başka bir CMS öğrenmek. Piyasada o kadar çok çok CMS var ki zaten bir seçim yapmak için ben onları araştırmaya başlasam sonu gelmez araştırmalar yapacağım. Bir de uzun vadeli işime yaramayacak bir CMS öğrenmek istemiyorum. O nedenle güven verci ve kalıcı bir CMS olmalı ancak bu kouda gördüğüm kadarıyla Joomla başı çekiyor.

d. PHP veya ASP öğrenmek. sorun şu ki bunları öğrenmeyi hiç istemiyorum. Bir şeyler tasarlamak hoşuma gidiyor ancak kodlarla boğuşmak hiç sevmediğim bir şey.

e. başka bir yol.

Aylar sonra önümde yine aynı soru var: Nasıl devam etmeliyim?

[FikretAkın]

@ Erdinc Kendi CMS ni yapman ve kendi templatelerin ile müşterilere sunman en mantıklısı bence istersen ben kodlama ile ugraşamam PHP ile 600 ile 1000 ytl arası ödeme yaparak birilerine sıfırdan kodlama ile kendi CMS ni yazdırırsın. ASP.net ile 1000-1500 ytl arası moduler bi CMS yazdırtabilirsin. Önerim kendi CMS ni yapman, hazır CMS lerde sorunlar doğuyor ve hazır sistemlerde açıklar fazla olabiliyor.