Atif Unaldi - Adim Adim Web (Ankara)

Adım adım web sitesi

atif.unaldi@mecramax.com

Atıf ÜNALDI Cavit ÖNEN

cavit@onen.net

Amaç

• Haber yayını• Bilgi iletimi

•Database’e bilgi aktarımı•Database’den bilgi alımı

• Eğlence• Tanıtım - Reklam• İletişim• Elektronik Ticaret

Avantajlar

• Hesaplı bir reklamdır.• Reklam, sitenizde Dinamik değişiklikler yapılabilmesine

elverişlidir.• Tanıtımınızı ulusal ve Uluslararası düzeyde yapmanıza

olanak sağlar.• Web Sitesi tasarımı ve yayını geleneksel medya ya göre

çok daha hesaplıdır.• Potansiyel müşterilerin direk ulaşımını sağlar.• Müşterilerinizle haberleşmenizi hızlandırır.• Kağıt, posta ve matbaa masrafları olmayacağından

tasarrufludur.• Zaman kazandırır.• Olumlu imaj sağlar.

Avantajlar• Bir Web Sayfası, konu ile ilgisi olmayan insanlara değil,

yalnızca onu okumak isteyen ilgili "Hedef Kitle" 'ye ulaşır.• Web Sitenizi yaratırken, alışılagelmiş bir sayfa düzeni takip

etmeniz gerekmez. Hayal gücünüzü olabildiğince kullanabilirsiniz.

• Web sayfaları kolayca ve çok ucuza düzeltilip, güncellenebilir.

• Web Siteniz 24 saat tüm dünyaya açık olacaktır.• Web sayfalarınızın kaderi diğer basılı yayınlar gibi bir çöp

kutusunda sonlanmaz. Güncellenerek sonsuza kadar yaşayacaklardır.

• Sayıları sürekli artan teknolojiyi yakından takip eden on milyonlarca Internet kullanıcısı size ulaşabilir.

• İletişim teknolojisinin çok süratle geliştiği günümüzde; teknoloji takipçisi bir şirket imajına kavuşacaksınız.

• Web Sitesi etkileşimli bir ortamdır.

• Öncelikle;•Internet üzerinde yer almak için

Profesyonel kurumlarla çalışın• Firma isminin tescilini yapın.

•com, net, org ve tr eklentileri.• Server kiralanması veya kurulması

•Firmada veya ISP uzerinde kiralık•Firmada Leased Line

• Tasarım, Kontrol, Yayın ve Güncelleme

Evreler

• FİRMA TANITIMI– Ürünlerinizi, firmanızın verdiği

hizmetleri ve firmanızın amaç ve hedeflerini belirtmelisiniz.

• ÜRÜN KATALOGLARI– Ürünlerinizin detaylı bilgi, fiyat ve

çeşitlerini içermelidir.• ÜRÜN TANITIMI

– Ürünlerinizi Internet' in sağladığı renkli resim ve hareketli animasyon avantajları ile tanıtmalısınız

Ne tür bilgiler konmalı

• Bilginin organize edilmesi– Statik sayfalar– Dinamik sayfalar

• Devamlılık kriterleri– Logo– Renk Seçimi– Ortak layout

• Genişleyebilirlik

Tasarım Öncesi

Cgi, ASP, PerlFrontpage Ext.

Cgi, ASP, PerlFrontpage Ext.

ServerServer

HTMLHTML

StreamingReal VideoNet Show

StreamingReal VideoNet Show

Özel TeknolojilerFlashShockwaveVivo

Özel TeknolojilerFlashShockwaveVivo

Ses TeknolojileriSes Teknolojileri

J ScriptJava Script VB Script

J ScriptJava Script VB Script

Active X, JavaActive X, Java

DHTML, XMLCSSDSSSLXSL

DHTML, XMLCSSDSSSLXSL

StaticAviMpegMov

StaticAviMpegMov

Görüntü TeknolojileriGörüntü Teknolojileri

StaticWavMidiMp3Yamaha

StaticWavMidiMp3Yamaha

StreamingReal AudioNet Show

StreamingReal AudioNet Show

ClientClient

• Sayfaların hazırlanmasında– Kullanıcıya online interaktif hissinin

ulaştırılması– Sayfalarda genel optimizasyon

•Resimler, Animasyonlar, Renkler– Kullanıcıya sayfaya bağlandığı anda

tepki verilmesi• Ekstra teknolojiler ve kullanımları

Tasarım

• Hedef kitleni seç• Onları sitene yönelt• Vermek istediklerini ilet• İşin bitince kullanıcıyı oyalama...

İnternet kullanıcısı havuzundan;

• İçerik tamamen belirlenecek ve site haritası kağıt üzerinde çıkarılacak.

• Sayfalarda kullanılacak görsel malzeme ve şirketin logosu ve şirketin politikası baz alınarak sayfada kullanılacak renkler seçilecek

Öncelikle

Tasarım Aşaması:

• Her sitenin bir site haritası olmalı• Tree structure’ı belirle • Frame kullanma table kullan.• Meta contentleri yaz.• Sayfaların kodunu kontrol et. • Her sayfanın altına footer bilgilerini

yerleştir.

Tasarım Aşaması:

• Sayfalarda taglere pixel bilgileri tam girilmeli yani % ile bilgi girmek sayfanızın farklı browserlarda farklı görünmesine neden olur.

Tasarım Aşaması:

• Ana sayfaya sayfanın tamamını kaplayan resim, flash, java koymak yanlıştır. Bu tip bir durumla karşılaşıldığında index.html sayfası kendini yenileyen içinde keyword ve bilgiler bulunduran bir sayfa olarak hazırlanmalı.

Tasarım Aşaması:

• Font kullanımında default font kullanılmasın. Arial kullanılacaksa Helvetica da yazılmalı.

• Background'a büyük bir resim koymak gerekirse bir imaj programı ile üzerine uygun renkte bir layer atılıp opacitysi ayarlanarak resmin size'ını düşür.

• Resimler optimize edilmeli.

Tasarım Aşaması:

• Java kullanımlarında Java hakkında bilgi ve Applet bilgisi mutlaka kontrol edilip okunacak. Flash sayfalarında mutlaka otomatik plugin yükleme özelliği sayfaya eklenecek. Flash'ta link varsa o link sayfaya da yerleştirilecek İmage'lar için açıklayıcı ALTER TEXT yazılacak.

Tasarım sonrası Kontrol:

• Çeşitli boyutlarda sayfaların aldığı şekil kontrol edilecek.

• Browsela ile değişik browserola’larda görünüm kontrol edilecek.

Sayfanın internete açılması:

• Sayfalar server’a yerleştirilip her türlü aşamasının kontrolü ve sayfaların kontrolü yapılacak

• Search engine'lere kayıt yapılacak.• Şirketin ilgili olduğu veya bağlı olduğu

bir kurum varsa bağlantı kurulup karşılıklı link alışverişi yapılacak

• Linkleri doğru organize edin• Resimleri bölünebilecek en küçük

parçalara bölmeye özen göster, renk optimizasyonu yap.

• Animasyonlarda frame sayısı ve frame arası değişen pixel optimizasyonu yap.

Yapılması Gerekenler

• HTML dışında scripting language kullanmaya özen göster, bu sayede etkileşimi sağla

• Mouse over event’i kullan• Update yap

Yapılması Gerekenler

• Bir paragrafta çok link kullanma• İnternet kültürüne uygun hareket edin• Yasaklamayın, teşvik edin• Orijinal olun

Yapılması Gerekenler

• Teknoloji canavarı olmayın• Kullanıcı hakkında bilmeniz gerekenden

fazlasını öğrenmeye çalışmayın.• Web Tasarım’ı teknik bir iş dışında bir

sanattır, başkalarının yaptıklarını kopyalamaktansa kendi eserinizi yaratın...

Yapmamaya dikkat edin

• Hedef kitleni seç• Onları sitene yönelt• Vermek istediklerini ilet• İşin bitince kullanıcıyı oyalama...

İnternet kullanıcısı havuzundan;

Teşekkür Ederiz

atif.unaldi@mecramax.com

Atıf ÜNALDI Cavit ÖNEN

cavit@onen.net

http://www.mecramax.com

http://www.homestudio.com