INTERFACE DESIGN AND PROGRAMMING Đnsan Bilgisayar Etkileșimi (ĐBE) sisteminin amacı bilgisayarı daha hızlı ve insana daha doğal gelecek yollarla kullanılabilir hale getirmektir. Sistemin dört ana bileșeni vardır. (ARAYÜZ TASARIMI VE PROGRAMLAMA) 2007638019 MĐNE YASEMĐ YASEMĐN Arayüz Nedir? Genel anlamda, bir mekanizma ile onun kullanıcısı arasındaki etkileșime aracılık eden yüzeye, veya ortama arayüz denir. Mesela direksiyon ve pedallar sürücü için otomobilin arayüzüdür.bilgisayar teknolojisinde kullanılan arayüzler 2'ye ayrılır:komut satırı arayüzü Kullanıcı yazarak girdigi komutlarla iș görür. (Örnek: DOS) Grafiksel kullanıcı arayüzü Kullanıcı fare, oyun çubuğu gibi yan araçlarla bir benzetmenin yardımı ile iș görür. (Örnek:Windows, KDE, Gnome) http://baybul.com/ansiklopedik-bilgiler/330181-arayuz-nedir.html 1.Kullanıcı (user) 2.Görev (task) 3.Araç/arayüz (tool/interface) 4.Bağlam (context) ETKĐLEȘĐMLĐ SĐSTEMLER Cihazlar, Yazılım Sistemleri Uygulamalar,Ürünler Bilginin Aktarımı, Görüntülenmesi, Saklanması gibi ișlevleri gerçekleștirmek için insanların komutlarına cevap veren sistemler Web Siteleri, Web Uygulama Arayüzleri Kișisel Bilgisayar Arayüzleri Mobil Cihazlar, Navigasyon Sistemleri Online Bilet Gișeleri ATM, Akıllı Binalar, Akıllı Toplantı Salonları Ev Sinema Sistemleri, Beyaz Eșyalar http://www.alperendemirkan.com.tr/hafta3.pdf Kullanıcı Arayüzü (Kullanıcı Arabirimi, Đnsan Makine Arayüzü) Arayüzü) Kullanıcı arayüzü, veya kullanıcı arabirimi (Đnsan Makine Arayüzü) insanların bir makine, cihaz, bilgisayar programı ya da karmașık aletlerle etkileșimini sağlayan yöntemlerin bileșkesine verilen addır. Kullanıcı arabirimi așağıdakilere olanak sağlar: Girdi, kullanıcıların bir sistemin ișleyișini değiștirmesi Çıktı, sistemin kullanıcının ișleyișini değiștirmesinin sonuçlarının üretilmesi http://www.msxlabs.org/forum/x-sozluk/308676-kullanici-arayuzu-kullanici-arayuzu-nedirkullanici-arayuzu-hakkinda.html#ixzz1ccrh928f 1
Bilgisayar uygulamalarının yeni kullanıcı kesimi tarafından kabul edilmesi ve efektif bir halde kullanılması için bilgisayar ile kullanıcının etkileșimini (interaction) sağlayan arayüzün (interface) doğru tasarlanması gerekmektedir. Đnsan Bilgisayar Etkileșimi uzmanları iyi bir arayüz tasarımı için üç yol önermektedir. Birincisi, stil kılavuzlarını (style guidelines) kullanmaktır. Bu kılavuzlar genellikle arayüz gelistiren büyük firmalar tarafından firma içinde gelistirilen tasarımlarda uygulanmak üzere hazırlanır (Apple Macintosh Guidelines,Java Programming Style Guidelines gibi). Bu kılavuzların temel amacı hazırlanan tasarımlarda tutarlılıgı saglamaktır, ancak uyumluluğun kullanılabilirlik ile aynı anlama gelmediğini ihmal etmemek gerekmektedir. Đkinci yol iyi tasarımın genel prensiplerini veren tasarım kılavuzlarının (design guidelines) kullanılmasıdır.tasarım kılavuzları kullanılabilirliği artırmaya yöneliktir. 1970' li yıllardan günümüze çok sayıda tasarım kılavuzu önerilmiștir. Üçüncü yol kullanılabilirlik testlerinden elde edilen deneysel verileri kullanarak tasarımı geliștirmektir. Kullanılabilirlik testleri, kullanılabilirlik kriterlerinin belirlenmesinin ardından hedef kullanıcı kitlesine uygulanır ve sonuçlar, tasarımın yeniden değerlendirilmesi için girdi olarak kullanılır. Kullanılabilirlik testleri için farklı yöntemler kullanılabilir. Kullanıcıdan, uygulama sırasında nasıl bir yol izlediğini sesli olarak aktarması istenerek (verbal protokol) alınan görüntü ve ses kayıtları test sonrasında davranıșlarla birlikte değerlendirilebilir. Göz- izleme (eye- tracking) cihazları kullanılarak elde edilen sonuçlar kullanılabilirlik açısından yorumlanabilir. Resim: http://ab.org.tr/ab06/bildiri/59.pdf Komut satırı arayüzü Komut satırı (veya komut satırı arayüzü), bir bilgisayar kullanıcısının, belli metinleri (komutları) girerek, bilgisayarla iletișime geçmesini sağlar. Komut satırı arayüzleri; konsol,kabuk, terminal veya uçbirim diye de adlandırılır. Komut satırı, kullanıcıya herhangi bir grafiksel arayüz sunmaz bunan yerine kullanıcının metin kipinde bilgisayarla iletișime geçmesini sağlar. Đșletim sistemi veya yazılıma göre komutlar değișebilir. Örneğin bir dizini listelemek için MSDOS'ta dir (ing. directory) komutu kullanılırken UNIX benzeri terminallerde ls (ing. list) komutu kullanılır. Günümüzde kullanıcı arayüz tasarımı için kullanılan en popüler tasarım kılavuzlarından birisi Nielsen tarafından verilmektedir (Nielsen's Ten Usability Heuristics). Nielsen'a göre kullanıcı arayüzlerinde șunlara dikkat edilmelidir. 1- Basit ve doğal diyalog kullanımı 2- Kullanıcının diliyle konuma 3- Hafıza yükünün en aza indirilmesi 4- Tutarlılık 5- Geribildirim sağlanması 6- Açıkça gösterilmiș çıkıș ve ișlem sonlandırma 7- Kısayolların önerilmesi 8- Uygun hata mesajlarının tasarlanması 9- Hataların engellenmesi 10- Yardım ve belgeleme sağlanması Sekil4. Klavuz Türleri Türleri-- Güvenilirlik Düzeyleri Grafiksel Kullanıcı Arayüzü Grafiksel Kullanıcı Arayüzü (ing. Graphical User Interface; GUI), bilgisayarlarda ișletilen komutlar ve bunların çıktıları yerine simgeler, pencereler, butonlar ve panellerin tümünü ifade etmek için kullanılan genel addır. Grafiksel kullanıcı arayüzü, bilgisayar kullanıcılarının komut satırı kodlarını ezberlemeden fare, klavye gibi araçlar sayesinde bilgisayarları kontrol etmelerini sağlamıștır. Günümüzdeki programların bir çoğu GKA ile birlikte gelse de, birçok bilgisayar kullanıcısı (özellikle programcılar) daha hızlı olduğu gerekçesiyle komut satırını GKA'larla birlikte kullanmaya devam etmektedirler. GKA'lı ișletim sistemleri FreeBSD MS Windows Mac OS Mac OS X Amiga OS Linux BeOS SkyOS RISC OS http://tr.wikipedia.org/wiki/grafiksel_kullan%c4%b1c%c4%b1_aray%c3%bcz%c3%bc http://tr.wikipedia.org/wiki/komut_sat%c4%b1r%c4%b1 2
Nmap Nmap en iyi bilinen ve en popüler port tarayıcı yazılımlardan birisidir. Güvenlik uzmanlarının tercihi olan bu yazılım ile açık portları kontrol edebilirsiniz. Zenmap Nmap'in grafik arayüze sahip sürümünde özellikler değ değișmiyor, hala çok güçlü. Tasarım: Tasarım algı ile kavram arasında köprü görevindedir. Tasarımın temel amacı, ziyaretçi ile içerik arasında gerçekleșen iletișimi kolaylaștırmaktır. Ziyaretçilerin içeriği özgürce keșfedebilecekleri arayüz çalıșmasını geliștirmek öncelikli prensip olmalıdır. Site içerik ve tasarımı, kullanıcıları birincil derecede etkileyen, siteyi her ziyaret ettiklerinde istek ve ihtiyaçlarını hızla karșılayan ve onları yönlendiren ana bileșenler konumundadır. TASARIM SÜRECĐ Sorun Tanımlama ve Çözüm Yolları Tasarımın Genel Özelliklerinin Belirlenmesi Ara Yüz Geliștirme Taslak Tasarımı Geliștirme Taslak Önerisine Göre Araștırma Tasarım Önerileri Olușturma Yapım Așaması Değerlendirme ve Taslağı Test Etme Değișiklikler Önerme http://webbote427.blogcu.com/yazilim-gelistirme-surecinde-tasarim-design-asamasi/6483194 http://www.chip.com.tr/galeri/komut http://www.chip.com.tr/galeri/komut--satirisatiri-grafik grafik--arayuze arayuze--karsi_1284_7.html karsi_1284_7.html http://www.chip http://www. chip.com.tr/galeri/komut.com.tr/galeri/komut--satirisatiri-grafik grafik--arayuze arayuze--karsi_1284_8.html karsi_1284_8.html Bilim Teknik, 71 Kasim sayisindan bir alinti. Alternatif klavye arayislari cok da yeni degilmis.. http://hci.metu.edu.tr/resources.htm http://www.baddesigns http://www. baddesigns.com/.com/starbucks starbucks.html.html Arayüz tasarımı Teknik olarak arayüz,iki farklı olușum arasındaki iletișimi ifade etmektedir.kullanıcı arayüzü ise kullanıcının,bir sistem,araç ya da programla etkileșim içinde olmasını ve üzerinde ișlem yapmasını sağlayan yazılım ve/veya donanımı ifade etmektedir.sonuç olarak arayüz,kullanıcının etkileșime gireceği programın ekrandaki görüntüsü ve ekran özellikleridir.(glossary of Terms,2000) Arayüz tasarım kavramı,her çeșit ortamdaki teknolojik ürünlerin insanlar tarafından kullanılmasıyla ilgilidir.arayüz tasarımında amaç, bu ürünleri kullanan kișilere bașarılı deneyimler yașatmak ve memnuniyetlerini sağlamaktır.(boling ve Sousa,1993) http://www.baddesigns.com/scidoor.html http://www.tcmb.gov.tr/kutuphane/turkce/tezler/ecesener bilgic.pdf 3
Web uygulamalarında iyi kullanıcı arayüz tasarımı için 12 kullanıșlı teknik Web Tasarım Süreci Nasıl Planlanmalıdır? Bir web sitesini olușturmaya bașlamadan önce o web sitesinin amacının ne olduğu, ulașması beklenen hedef kitlenin profili, ve içeriği düșünülmeli ve bu elemanlar göz önünde bulundurularak web sitesi tasarım süreci ve web geliștirme (kodlama) süreci planlanmalıdır. Amaç Hedef Kitle Đçerik http://webbote427.blogcu.com/yazilim-gelistirme-surecinde-tasarimdesign-asamasi/6483194 2. web uygulamalarınızda klavye kısayollarını etkinleștirin 1. önemli değișiklikleri belirtin yammer Slayt18-29: http://www.bildirgec.org/yazi/iyi-bir-kullanici-arayuz-tasarimi 3. hesap sayfası üzerinden seçeneklerin güncellenebilmesi crazyegg 4. uygulamanın özelliklerini tanıtın freckle 5. renk kodlu listeleri kullanın goplan 4
6. kișiselleștirme seçenekleri sunun 7. göze çekici gelen yardım mesajları görüntüleyin twitter goplan 8. geribildirim mesajlarını dikkatle tasarlayın mailchimp 9. sekmeli içerik kullanın freckle getsignoff 10. modal pencerelerin altında koyu arkaplanlar 11. lightboxlar ve slayt gösterileri squarespace smugmug 5
12. kısa kayıt formları Nesneye yönelik programlamada arayüzler Bazı durumlarda bir sınıf sadece belirli ișlemleri yapmak için kullanılır. Herhangi bir sınıfla ilișkisi olmayan ve standart bazı ișlemleri yerine getiren sınıfa benzer yapılara arayüz(interface) denir.arayüzlerin özellikleri yoktur. Yalnızca bir takım ișleri yerine getirmek için bașka sınıflar tarafından kullanılırlar. Sınıf ile arayüz arasındaki ilișkiyi kesik çizgilerle ve çizginin ucunda boș üçgen olacak șekilde gösteririz. Sınıf ile arayüz arasındaki bu ilișkiye gerçekleme(realization) denir. Sınıfla, arayüzün UML gösterimindeki fark arayüzde özellik(attribute) yoktur.diğer bir fark ise arayüz adlarını yazarken adın üstüne yazısını eklemektir. evernote evernote http://www.csharpnedir.com/articles/read/?id=10 Bir arayüz arayüz,, bașka sınıflar için bir rehberdir. Arayüz Üyeleri A. Özellikler (properties) B. Metodlar (methods) C. Olaylar (events) D. Đndeksleyiciler (indexers) Arayüzlerde Kullanılamayan Üyeler i.yapıcılar (constructors) ii.yokediciler (destructors) iii. Alanlar (fields) Arayüz bildirimi interface IArayuz int Metot1(); int Metot2(); int sahteozellik set; get; int this[int indeks] get; #A ray.c3.bcz_nesneleri http://www.csharpnedir.com/articles/read/?id=185 1.Bir arayüz'ün tüm üyeleri public kabul edilir. Private, Protected gibi belirtiçler kullanamayız. Örneğin bir elemanı private tanımladığımız takdirde, derleme zamanında șu hatayı alırız. "The modifier 'private' is not valid for this item 2.Diğer yandan bir metodu public olarak da tanımlayamayız. Çünkü zaten varsayılan olarak bütün üyeler public tanımlanmıș kabul edilir. Bir metodu public tanımladığımızda yine derleme zamanında șu hatayı alırız. "The modifier 'public' is not valid for this item 3.Bir arayüz, bir yapı(struct)'dan veya bir sınıf(class)'tan kalıtımla türetilemez. Ancak, bir arayüzü bașka bir arayüzden veya arayüzlerden kalıtımsal olarak türetebiliriz. 4.Arayüz elemanlarını static olarak tanımlayamayız. 5.Arayüzlerin uygulandığı sınıflar, arayüzde tanımlanan bütün üyeleri kullanmak zorundadır. Arayüzler interface anahtar sözcüğüyle bildirilir. Arayüzlerin uygulanması sınıf türetmeyle aynı șekilde yapılır. Örnek: class A:Iarayuz //IArayuz arayüzündeki bütün elemanları içermeli. Bir sınıf birden fazla arayüzü kullanabilir.örnek: class A:Arayuz1,Arayuz2 //Hem Arayuz1 hem de Arayuz2 arayüzündeki bütün elemanları içermeli. Arayüzler de sınıf türetmeyle aynı șekilde birbirlerinden türetilebilir. Bu durumda yavru arayüz ana arayüzün tașıdığı bütün elemanları tașır. http://www.csharpnedir.com/articles/read/?id=185 6
Sınıflardan farklı olarak arayüzleri birden fazla arayüzden türetebiliriz. Örnek: interface Arayuz1 int Metot1(); interface Arayuz2 string Metot2(); interface Arayuz3:Arayuz1,Arayuz2 double Metot4(); *Burada Arayuz3'ü kullanan bir sınıf her üç metodu da içermelidir. Bir arayüz türünden nesne olușturulabilir. Tıpkı türetmedeki gibi bir arayüz nesnesine o arayüzü kullanan sınıf türünden nesne atanabilir. Bu durumda o arayüz nesnesinin gizli türü o sınıf olur ve o sınıfa ait üye elemana arayüz nesnesi üzerinden erișilebilir. Örnek: using System; interface arayuz int Metot(); classa:arayuz public int Metot() return 0; static void Main() arayuz a; A s=newa(); a=s; Console.WriteLine(a.Metot()); Kaynaklar http://baybul.com/ansiklopedik-bilgiler/330181-arayuz-nedir.html http://www.alperendemirkan.com.tr/hafta3.pdf http://www.msxlabs.org/forum/x-sozluk/308676-kullanici-arayuzu-kullanici-arayuzu-nedir-kullanici-arayuzuhakkinda.html#ixzz1ccrh928f http://ab.org.tr/ab06/bildiri/59.pdf tr.wikipedia.org/wiki/komut_sat%c4%b1r%c4%b1 http://tr.wikipedia.org/wiki/grafiksel_kullan%c4%b1c%c4%b1_aray%c3%bcz%c3%bc http://www.chip.com.tr/galeri/komut-satiri-grafik-arayuze-karsi_1284_7.html http://www.chip.com.tr/galeri/komut-satiri-grafik-arayuze-karsi_1284_8.html http://webbote427.blogcu.com/yazilim-gelistirme-surecinde-tasarim-design-asamasi/6483194 http://hci.metu.edu.tr/resources.htm http://www.baddesigns.com/scidoor.html http://www.tcmb.gov.tr/kutuphane/turkce/tezler/ecesenerbilgic.pdf http://webbote427.blogcu.com/yazilim-gelistirme-surecinde-tasarim-design-asamasi/6483194 http://www.bildirgec.org/yazi/iyi-bir-kullanici-arayuz-tasarimi http://www.csharpnedir.com/articles/read/?id=10 http://www.csharpnedir.com/articles/read/?id=185 Teşekkürler 7