24
Adım adım web sitesi atif.unaldi@mecramax. com Atıf ÜNALDI Cavit ÖNEN [email protected]

Atif Unaldi - Adim Adim Web (Ankara)

Embed Size (px)

Citation preview

Page 1: Atif Unaldi - Adim Adim Web (Ankara)

Adım adım web sitesi

[email protected]

Atıf ÜNALDI Cavit ÖNEN

[email protected]

Page 2: Atif Unaldi - Adim Adim Web (Ankara)

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

Page 3: Atif Unaldi - Adim Adim Web (Ankara)

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.

Page 4: Atif Unaldi - Adim Adim Web (Ankara)

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.

Page 5: Atif Unaldi - Adim Adim Web (Ankara)

• Ö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

Page 6: Atif Unaldi - Adim Adim Web (Ankara)

• 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ı

Page 7: Atif Unaldi - Adim Adim Web (Ankara)

• Bilginin organize edilmesi– Statik sayfalar– Dinamik sayfalar

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

• Genişleyebilirlik

Tasarım Öncesi

Page 8: Atif Unaldi - Adim Adim Web (Ankara)

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

Page 9: Atif Unaldi - Adim Adim Web (Ankara)

• 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

Page 10: Atif Unaldi - Adim Adim Web (Ankara)

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

İnternet kullanıcısı havuzundan;

Page 11: Atif Unaldi - Adim Adim Web (Ankara)

• İç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

Page 12: Atif Unaldi - Adim Adim Web (Ankara)

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.

Page 13: Atif Unaldi - Adim Adim Web (Ankara)

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.

Page 14: Atif Unaldi - Adim Adim Web (Ankara)

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ı.

Page 15: Atif Unaldi - Adim Adim Web (Ankara)

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.

Page 16: Atif Unaldi - Adim Adim Web (Ankara)

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.

Page 17: Atif Unaldi - Adim Adim Web (Ankara)

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.

Page 18: Atif Unaldi - Adim Adim Web (Ankara)

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

Page 19: Atif Unaldi - Adim Adim Web (Ankara)

• 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

Page 20: Atif Unaldi - Adim Adim Web (Ankara)

• 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

Page 21: Atif Unaldi - Adim Adim Web (Ankara)

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

Yapılması Gerekenler

Page 22: Atif Unaldi - Adim Adim Web (Ankara)

• 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

Page 23: Atif Unaldi - Adim Adim Web (Ankara)

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

İnternet kullanıcısı havuzundan;

Page 24: Atif Unaldi - Adim Adim Web (Ankara)

Teşekkür Ederiz

[email protected]

Atıf ÜNALDI Cavit ÖNEN

[email protected]

http://www.mecramax.com

http://www.homestudio.com