web tasarım

Bir “web sitesi” içinde tablolar en çok kullanılan unsurlardan birisidir. Hatta CSS den önce tablolar kullanılmadan web tasarım yapmak neredeyse mümkün değildi.

Neyse ki günümüzde CSS sayesinde web tasarım tablolar olmadan yapılmakla birlikte tablolar kenar çizgileri olmadan hala web tasarımlarda yoğun olarak kullanılmaktadır.

Ayrıca, tablolar web sayfalarında tabloların gösterilmesi amacıyla yani asıl amaçları doğrultusunda da kullanılmaktadır. Bu yüzden tabloların hazırlanması konusuna kısaca değinelecektir:

Örneğimizde, web sayfasının diğer kısımları, dikey olarak düzenlenmiş ve her birinin sağında bir resim yazısı bulunan üç resim içerecektir. Bu öğeleri düzenlemek için en iyi yol, bir HTML tablosu kullanmaktır. Söz konusu tabloyu eklemek için gereken adımlar şunlardır:

1 Ekleme noktasını Web sayfasının sonuna getirin. (Ctrl + End tuşlarına basın ya da aşağıda ve var olan son içeriğin sağında herhangi bir yeri tıklayın.)

2 Standart araç çubuğundaki Tablo Ekle düğmesini tıklayın. Bir kılavuz açılır. Fareyi kılavuzun üstünde iki hücre genişliğinde, üç hücre yüksekliğinde bir alan vurgulanıncaya kadar sürükleyip vurgulanan son hücreyi tıklayın.

3 Web tasarım editörünüz, varsayılan olarak Web sayfasının genişliğini tamamen dolduran bir tablo oluşturur. Ayrıca, tablonun her hücresinin eşit boyutlarda olmasına çalışır. (Böylece, iki sütunlu bir tabloda, her hücreyi tablo genişliğinin yüzde ellisini kapsayacak şekilde belirler.) Bu eylemi geçersiz kılmak için, ekleme noktasını tablo içindeki herhangi bir yere getirin ve Tablo menüsünden İçeriğe Otomatik Sığdır komutunu seçin.

4 Yine varsayılan olarak editör, hücreler arasında ve hücre içerikleri ile hücre kenarları arasında hiç aralık olmayan ve görülebilen kenarlıkları olan bir tablo oluşturur. Bu ayarları geçersiz kılmak için, farenin sağ düğmesiyle tabloda bir yeri tıklayın ve kısayol menüsünden Tablo Özellikleri komutunu seçin.

5 Tablo Özellikleri iletişim kutusunda aşağıdaki işlemleri yapın:

a Hücre Doldurma değerini 1 olarak değiştirin.

b Hücre Aralığı değerini 2 olarak değiştirin.

c Boyut ayarını (Kenarlıklar alanında) 1 olarak değiştirin.

d Hücrelerin Ve Tablonun Kenarlıklarını Göster onay kutusunu seçin. Tamam’ı tıklayın.

Web tasarımın dayandığı HTML’nin (Hyper Text Markup Language-Hiper Metin İşaretleme Dili)  ilk sürümleri, bilimsel ve teknik makalelerin elektronik ortamda yayımlanması için tasarlanmıştı, yani basit işlevlere sahiptiler ve karmaşık değildiler. Her Web ziyaretçisinin hangi ekran boyutlarını ya da yazı tiplerini kullandığını teknik olarak bilmenin bir yolu yoktu ve bu nedenle bu ayrıntılar sayfa tasarımcısına değil, her ziyaretçinin tarayıcısının ve sistem yapılandırmasının ayarlarına kalıyordu.

Örneğin, tasarımcı <h 1 >’den <h6> ‘ya kadar aşamalı olarak küçülen başlık stillerini atayabilir, ancak kuramsal olarak her bilgisayar bu stilleri farklı yazı tipi, boyut ve renkte görüntüleyebilirdi. Denklemleri, çizelgeleri ya da tabloları yayımlamak için bugün sahip olduğumuz olanaklar yoktu. Günümüzde, web tasarım önem açısından eskiye oranla daha da önem kazanmıştır. Çünkü günümüzde kimse kötü bir web tasarım içinde yer alan içeriğe bakmak istememektedir.

Bununla birlikte, ilk başlarda geliştirilen HTML hâlâ bugün gördüğümüz en karmaşık Web sayfalarının temelini oluşturmaktadır. Aslında sayfa ne kadar karmaşık ya da HTML kodları ne kadar anlaşılmaz olursa olsun, düz metin düzenleyicileri, Web sayfaları oluşturmakta kullanılan en yaygın araçlar arasında yerini hala korumaktadır.
Tarafsız bakıldığında HTML’nin en iyi tanımlama dili olmadığı açıktır. En büyük gücü ve en büyük zayıflığı aynıdır: Basitlik.

Basitliği, herkese düz metin düzenleyicileriyle Web sayfaları oluşturma ve bu sayfaları herhangi bir bilgisayar sisteminde bir tarayıcıyla okuma olanağı verir. Aynı zamanda, web tasarım işiyle profesyonel olarak uğraşan insanları öyle zorlar ki bu kişiler zamanlarının büyük bir bölümünü bu dilin sınırlandırmalarının üstesinden gelebilmek için harcayabilir. Web tasarımcıları, karmakarışık program kodları oluşturması gereken teknisyenler değil, tasarımcı, stilist ve sanatçı olmalıdır.
Etkileyici Web sayfaları oluşturmak, iki uçlu bir yaklaşım gerektirir: İlk olarak, karmaşık Web sayfalarının kodlamalarını basitleştirecek araçlar kullanmak ve ikinci olarak da her Web ziyaretçisinin tarayıcısının, işinizi küçük farklarla görüntüleyeceğini kabul etmek. Yani %100 tarayıcı uyumluluğunu sağlamak her zaman için mümkün olmayabilir veya bunu sağlamak mümkün olsada bu uğraş çok da ekonomik ve faydacı olmayacaktır.

Bir önceki yazımız olan web tasarım ve web sunucusu hakkındaki yazımıza kaldığımız yerden devam ediyoruz.

Eğer ağırlıklı olarak PHP ve MYSQL kullanıyor iseniz ve de Windows işletim sisteminde çalıyorsanız, o zaman size hem kurması çok kolay olan bir test web server önereceğiz:

XAMPP

XAMPP sayesinde web tasarımlarınızı test edebileceğiniz bir web serverınız (Apache), veri tabanı sunucunuz (MySQL) ve PHP (PHP: Hypertext Processor) scriptiniz hazır olacak.

Hem de en iyi yanı XAMPP windows işletim sisteminde hazır kurucusu (setup, installer) ile geliyor. Yani Linux da olduğundan farklı olarak bir iki (bilemediniz dört veya beş) tıklamayla test web serverınızı helen kurup web tasarımlarınızı test etmeye başlayabiliyorsunuz.

Tabi XAMPP’ın ilaveleri de var. Örneğin, Apache, Mysql ve PHP’nin yanı sıra APEAR, Perl, mod_php, mod_perl, mod_ssl, OpenSSL, phpMyAdmin, Webalizer, Mercury Mail Transport System for Win32 and NetWare Systems v3.32, Ming, JpGraph, FileZilla FTP Server, mcrypt, eAccelerator, SQLite, and WEB-DAV + mod_auth_mysql özellikleri de hazır geliyor.

Yani XAMPP web tasarımcılar için tam bir cennet diyebiliriz. Yalnız windows vista kullanıcılarının XAMPP’ı “Program Files” dışındaki bir dizine kurmalarında fayda var. Çünkü yetki sorunları nedeniyle XAMPP “Program Files” altındaki dizinlerde tam çalışamayabiliyor.

XAMPP’ın en güzel yanlarından biride eğer veritabanları ile çalışıyorsanız, yani veritabanı yazılımları yazıyorsanız, phpMyAdmin ile veritabanlarını yedekleyip XAMPP’ı hemen kaldırıp (uninstall) edip tekrar kurduğunuzda (install) phpMyAdmin ile veritabanını tekrar yükleyip web tasarımınıza kaldığınız yerden devam edebiliyorsunuz.

Web teknoljilerinde ve web tasarımında hangi web sunucusunun kullanılacağına karar vermek çok önemlidir. Hatta web yazılımılarını yazmadan önce web sunucunuzun hangi dilleri desteklediği gibi konuları bilmeniz gerekmektedir. Örneğin, web sunucunuz PHP (PHP: Hypertext Processor) yi desteklemiyorsa, o zaman PHP yardımıyla yapılan web tasarımların da çalışmayacağı açıktır.

Gerçi günümüzde bir çok web sunucusu bütün sunucuda çalışan (server side) script dillerini desteklese de, durum her zaman böyle olmayabiliyor. Yeni başlayan birçok web web tasarımcısı, web sayfalarını doğrudan diskten tarayıcılarına yükleyerek deneyebilirler. Eskiden bu şekilde bir test işlemi, birçok türdeki web sayfası için uygun idi. Ancak özellikle sunucuda çalışan web scriptleri için bu durum geçerli değildir. Diğer bir ifadeyle, web sunucusunda özel programların çalışmasını bekleyen web bu şekilde çalışmaz ve test edilemez.

Bu durumda ya gerçek bir sunucu üzerinde web tasarımlarınızı test edebilirsiniz. Gerçek sunucularda test işlemi aslında başlangıçta size mantıklı gelebilir ve bir test dizini oluşturabilirsiniz. Ancak, özellikle veri tabanı işlemleri yapıyorsanız sürekli yedekleme yapmak durumunda kalırsınız. Çünkü aksi takdirde yanlışlıkla önemli verileri sildiğinizde geri dönüşünüz olmaz.

Bunu yerine, web tasarımınızı kendi bilgisyarınız üzerinde oluşturabileceğiniz bir test sunucusunda test edebilirsiniz. Hem böylesi daha güvenli ve hızlı olacaktır. Her ne kadar internete erişim hızı sürekli artsada, özellikle çok dizin ve dosyadan oluşan web tasarımlarınızı FTP ile gerçek suncuya yüklemek halen local test serverına göre daha çok vakit alan bir işlem olmaktadır.

Eğer ASP yi çok kullanmıyorsanız, size bir sonraki yazımızda harika bir test sunucu önereceğiz, devamı bir sonrakı yazımızda…

Web tasarım da temelde HTML (Hyper Text Markup Language, hiper metin işaretleme dili) kullanılmaktadır. HTML’yi kodlamak için basit bir metin editöründen faydalanabilirsiniz. Bütün işletim sistemleri temel bir metin editörüyle gelmektedirler. Bu metin editörleri bu amaçla kullanılabilirler.

Buna karşın, birçok kişi için web tasarımı elle kodlamak, aşağıdakiler gibi ciddi engeller çıkarır:
•    Web sayfalarını elle kodlamak, bir dizi ayrıntılı biçimlendirme komutuyla ilgili bilgi gerektirir.
•    Grafik arabirimin olmayışı nedeniyle, sayfanın Web ziyaretçisine nasıl göründüğü konusunda görsel geribesleme sağlanmaz, komutlara ve seçeneklere ilişkin görsel ipuçları sunulmaz.
•    Sıradan bir Web sayfaları topluluğunda metinler, resimler ve diğer tür dosyalar arasındaki ilişki son derece ayrıntılı ve karmaşıktır. Tek bir dosya yanlış adlandırıldığı ya da yerleştirildiği zaman hatalar oluşur. Böyle bir yapıyı önceden tasarlamak zordur, ancak bunu uzun zaman sürdürmek yıldırıcı olabilir.
profesyonel web tasarım editörleri, Web tasarımcılarını bu sorunlardan ve daha başkalarından kurtaracak zengin bir dizi özellik sağlar. Kısacası, ister kişisel Web sayfanız, ister bir şirketin İnternet ya da intranet sitesi olsun, profesyonel web tasarım editörleri size Web sitenizi oluşturmak ve yönetmek için gerek duyacağınız her şeyi sağlayan bir araçtır.

Bu yüzden web tasarım konusunda ciddi iseniz, profesyonel web tasarım editörlerinin demo sürümlerini hemen test etmeye başlamalısınız. Size profesyonel web tasarım editörleri konusunda bir tavsiyede bulunmamazı doğru olmayacaktır çünkü “en iyi web tasarım editörü” diye bir şey yoktur. Sizin ihtiyaç ve amaçlarınıza uygun web tasarım editörü vardır. İşin en ilginç yanı ihtiyaç ve amaçlar zamanla değişebileceğinden dün iyi olan editör bugün size yeterli gelmeyebilir.

“Web tasarım” konusu halen popüler ve popüler olmaya da devam ediyor. Neden mi? Çünkü, insanlar, başlangıçta yalnızca Web tüketicileri olmalarına karşın, sonunda birçoğu bu işte katılımcı da olmak istiyor. Her türden kuruluş ve kişi Web teknolojisini, kendilerini tanıtmak, başkalarını kendi alanlarına çekmek, bilgi yaymak ve her çeşit işi yürütmek için kullanıyor.

Web sayfası ve Web sitesi tasarımcıları, Web’in kendisi gibi çok çeşitlidir. Bazıları daha önce hiç bilgisayar kullanmamışken, bazıları yılların uzman bilgisayar kullanıcılarıdır. Bazıları web tasarım konusunun sanatsal yanına eğilirken, bazıları uygulamanın ayrıntılarına eğilimlidir. Bazılarının bir bilgisayar ağını neyin oluşturduğu konusunda hiçbir fikri yokken, kimileri deneyimli internet uzmanlarıdır.

Web tasarım konusunda kullanıcılar çoğu zaman, yazılımı kullanmayı deneme-yanılma yöntemiyle hızla öğrenirler. Temel işlemler söz konusu olduğunda, ayrıntılı adım adım açıklamaları, basit, zaman kaybettirici ve sinir bozucu bulurlar. Sorular ve sorunlar, yazılımın gittikçe daha ilerleyen bölümlerinde yani uzmanlaşma arttığında karşılaşılır.

Web tasarım ortaya çıkıp giderek daha çok kullanılırken, Web tasarımcıları topluluğu da giderek genişlemektedir. Birçok yeni Web tasarımcısının, Web sayfalarının yapıldığı gereç olan HTML (Hypertext Markup Language- Köprü Metni İşaretleme Dili) kodlamasına ne ilgisi ne de yeteneği var ama Web sayfalarını, sık kullandıkları sözcük işlemci, elektronik tablo ya da masaüstü yayımcılık uygulamaları gibi gelişkin ve kullanımı kolay, yüksek düzeyde araçlarla oluşturmayı umarlar.

Bu konuda web tasarımcılar açısından bir web tasarım yazılımı zenginliğini söyleyebilmek mümkündür. Ancak, piyasada var olan bir çok popüler web tasarım yazılımının siz bilgi ve becerilerinizi arttırdıkça sizi takip etmeyebileceğini de unutmamalısınız.

Web tasarım yapmanız için müşteriniz sizinle irtibata geçtiğinde görüşmeye gidersiniz. Tanışırsınız, konuşursunuz ve eğer anlaşırsanız web tasarımı yapabilmek için genel bilgileri müşterinizden istersiniz. En önemlisi müşterinize ne istediğini sorarsınız. Genelde istenen şeyler bellidir, ama bunlardan iki tanesi yani “güzel web tasarım” ve “google da en üste çıkmak” en çok istenen hususlardandır.

Müşterilerin internet bilgisine göre değişmekle birlikte “güzel web tasarım” dan kastedilen flash veya silverlight kullanılan animasyonlu zengin içerik uygulamalarıdır. Bu diğer isteği göre daha kolay anlaşılır ve yapılabilirdir.

Diğer istek yani “google da en üste çıkmak” ise biraz daha anlaşılması zor ve yapılması zor bir istektir. Şöyleki müşteri konuyla ilgili bazı kavramlara yabancıdır. Örneğin “organik arama sonuçları” ve “inorganik arama sonuçları” arasındaki farkın çoğu zaman bilincinde değildir. Örneğin, Google arama sonuçları safyalarının solunda yer alan sonuçların organik sağ tarafındakilerin inorganik olduğunu çoğu zaman bilmez. Aslında bazı durumlarda arama sonuçları her ne kadar inorganik veya sponsor bağlantı olarak da gözükse, birbirine karışabilmektedir. Şöyleki, inorganik veya sponsor bağlantılar bazen sağ taraftan sol tarafın en üstüne çıkmaktadır.

Bu durumda web tasarıma yabancı olan müşterinin aklı karışmaktadır. Müşteriye sağ tarafın Google tarafından en çok teklif veren kişi veya kuruluşa satıldığı anlatıldığı zaman müşteriler konuyu anlamaktadırlar. Esasen Google Adwords hizmeti web tasarım gibi başlı başına bir endüstri olmuştur. Her ne kadar Adwords, basit olarak başlatılabilse de reklamlardan en yüksek getiriyi elde edebilmek için konuyla ilgili olarak detaylı bilgiye sahip olmak ve profesyonel bir reklam kampanyası yönetmek gerekmektedir.

web tasarım ve anahtar kelimeler konumuza bir sonraki yazımızda değineceğiz

Web tasarım ve içerik konusundaki önceki yazımıza kaldığımız yerden devam ediyoruz …

Web Tasarım Hakkında Temel Bilgiler:

Web tasarıma başlamadan önce müşterinizle görüşüp en azından ilgili endüstrinin, müşteri portföyünün ve rakiplerin sitelerinin içeriği hakkında temel bilgi almanız gerekmektedir.

Ana Sayfa:

Ana sayfa web tasarımının en önemli sayfasıdır çünkü ziyaretçiler önce ana safyaya gelirler ve bu sayfadaki bilgileri görürler. Ana sayfa ziyaretçilerinizin web tasarımınızla karşılaştığı bir sayfa olmanın yanında sitenin içeriği ve navigasyonu hakkında hemen anlaşılır bilgi içermelidir. Ayrıca, kullanıcı tarafından hemen anlaşılabilmelidir ki ziyaretçiler siteyi terk etmesinler.

Web tasarımı hazırladığınız müşterinizin logosu, ürün ve hizmetleri hakkında genel bilgiler ana sayfada yer almalıdır. Bu sayfa bir evin giriş holüne benzetilebilir. Giriş holü diğer odalara veya sayfalara açılmalı, ziyaretçiler bir odadan veya sayfadan diğerine rahatlıkla geçebilme aynı zamanda evin veya sitenin içinde kaybolmamalıdırlar.

Ana sayfa sadece ziyaretçileriniz için önemli olmayıp Google ve Yahoo gibi arama motorlarının en çok önem verdikleri sayfadır. Arama motorları ilk önce ana sayfanıza gelirler, bu yüzden ana safyada sitenin içeriği hakkında bilgi veren HTML (hyper text markup language, hiper text işaretleme dili) yazı bulunmalıdır. Yine alt sayfalara HTML linkler verilmelidir ki, arama motorları alt sayfaları da bulup onları endeksleyebilsin.

Bazı sitelerde HTML yerine flash veya silverlight kullanıldığı hatta sadece flash veya silverlight dan oluşan ana sayfalar bulunmaktadır. Her ne kadar arama motorları flash ve diğer zengin içerik eklentilerini endeksleyebilse de her durumda arama motorlarının endekslemesi mümkün olmamaktadır. Örneğin, flash animasyondaki linkler resimlerden oluşuyorsa arama motorları bu linkleri bulmada ve endekslemede zorluk yaşabilmektedirler. Her ne kadar Google gibi “öncü arama motorları” yeni teknikler geliştirse ve bulunması zor olan linkleri bulma ve endeksleme yönünde çalışmalar yapsa da, siz her şeye rağmen flash linklerin yanında sayfadın diğer bölümlerinde HTML linkler ve yazılar bulundurmaya devam edin çünkü arandığında bulunamayan ve dolayısıyla ziyaret edilemiyen bir web sitesi hiç bir işe yaramaz.