01.12.2012

1

İnsan Bilgisayar Etkileşimi

Bölüm 21: Yardımcı Metin, Çoklu Ortam

2009638033 - İlknur BAYSAL 2009638023 - Furkan SABAZ

Konu Başlıkları • Yardımcı Metin (HyperText)

• Yardımcı Ortam (HyperMedia)

• Çoklu Ortam (Çoklu Ortam)

- Animasyon

- E-Öğrenme

• Aramaları Kolaylaştıran Araçlar

Yardımcı Metin Nedir? • Metin, okuyucuyu doğrusal ilerlemeyi zorlayan bir

yazı bütünüdür.

• Yardımcı metin ise doğrusal olmayan bir metindir.

Yardımcı Media Nedir?

Yardımcı metnin animasyon, ses ve video ile genişletilmiş halidir.

Çoklu ortam Nedir?

• Metin, görüntü, grafik, çizim, ses, video ve animasyonların birden fazlasının bir arada bulunmasına çoklu ortam denir.

Animasyon Animasyon, birkaç resmin arka arkaya hızlı bir şekilde

gösterilmesiyle elde edilen hareketli görüntüdür. Geçmişte animasyonlar birkaç kağıda istenen resimlerin çizilmesi ve kâğıtların hızlıca geçirilmesi veya bir çemberin içine konup döndürülmesi ile yapılıyordu.

01.12.2012

2

• Günümüzde bilgisayar teknolojisi hem vektörel hem de piksel tabanlı animasyonlar yapılmasına olanak sağlamaktadır.

Animasyonun Kullanıldığı Alanlar

Eğitim ve Öğretimde

Veri görselleştirmede

Canlandırılmış karakterlerde

Animasyonları kullandığımız bir başka alan ise web sayfalarındadır.

Özellikle e-ticaret sitelerinde kullanıcıyı yönlendirerek daha kolay alışveriş yapmasını sağlamaktadır.

Video ve Ses

• Günümüzde videoyu düzenlemek için bir çok program bulunmaktadır. Movie Maker, Real Player gibi

• Web sayfalarına gömmek oldukça kolaydır. <iframe> etiketiyle eklenilebillir.

• Genel formatları .avi, .mp3,.mp4tür.

Ses ile ilgili sorunlar

• Format Sorunu:Formatların geliştirilme amacı, dosya boyutlarını küçültmek ve disk alanını daha verimli kullanmaktır. Kayıplı formatlar arasındaki belki de en önemli fark, farklı medya oynatıcılar tarafından tercih edilmiş olmalarıdır.

• Mp3 sıkıştırılmış, kayıplı en yaygın ses formatıdır.

Animasyon ve Görüntü

• İnsanları etkilemede güçlü araçlardır.

– Tv, bilgisayar oyunları

Bu araçları tam performansıyla kullanabilmek için

yapımcıların bu işi iyi öğrenmeleri gerekir.

01.12.2012

3

Animasyon

• Amerikada Disneyin bünyesinde olan Pixar şuan en ünlü ve en popüler animasyon stüdyolarındandır.

• Uzak doğuya baktığımızda ise animasyon “anime” olarak adlandırılmaktadır. Türkiye’de en bilinen anime Pokemon’dur.

• Türkiyede de animasyon stüdyoları bulunmaktadır. (AnimaTürk Animasyon stüdyosu)

Hesaplama, Zeka ve Etkileşim

Bilgisayarlar görüntüyle birlikte işlemler de yaparlar.

Örnek:

– Arama • Araştırmalarımızı bilgisayar aracılığıyla yapabiliriz.

– Etkileşim

• Gömülü uygulamalar ( web sitelerinde yayınlanan simülasyonlar, oyunlar)

– Uyum

• E-ticaret siteleri başka ürünler almanızı tavsiye eder

Yardımcı Ortam ile Etkileşim

Paket göndermek,

durdurmak için butonlar

Simülasyonu baştan

başlatmak için buton

Renklerin açıklaması

İletim Teknolojisi

Bilgisayarlar üzerinde

• CD ve DVD tabanlı yardımcı ortamlar

Web üzerinde

• Sadece web sayfası olarak düşünülmemelidir

Taşınabilir cihazlarda

• Platformlar: Mobil telefonlar,PDA’leri, dizüstü bilgisayarlar

Uygulama Alanları

– Flash gibi vektör tabanlı ve photoshop gibi kısmen bitmap tabanlı programlarda çizilen şekillerin bulunduğu yere sahne(scene) denir.

– GDI ve GDI+ üzerinde animasyonların oynatılması da bir sahne üzerinde yapılır. Bu sahnenin adına da oynatma sahnesi(StoryBoard) denilir.

Uygulama Alanları Yardım ve Dökümantasyon

Yardımcı Ortamlar yardım ve dökümantasyon için uygundur. Örneğin Visual Studio eklentisi olan DevExpress’in dökümantasyonu video ve makalelerle desteklenmektedir.

01.12.2012

4

Uygulama Alanları

Eğitim

• Animasyon ve grafik eğitimde somutlaştırarak anlaşılırlığı artırır.

• Ses atmosfer ekler yani görüntünün açıklaması sesle yapılırsa anlaması kolaylaşır. (Birden fazla duyuya hitap ettiği için)

E-Öğrenme

• Sanal ortam aracılığıyla yapılan öğrenme şeklidir. Uzaktan eğitim,webinerler örnek verilebilir.

E-Sınıf (2000’li yıllarda)

Web arayüzü üzerinden

Sıradan bir ders

Slaytlar,kalemler işaretleri, ekran görüntüleri

E-Sınıf

Aramaları Kolaylaştıran Araçlar

Yapı tasarımı

Navigasyon

Geçmiş ve Yer imleri

İndeksleme,Dizinler,Arama

Yardımcı Uzayda Kaybolma

• Kaybolma, kullanıcının tüm yapı içerisinde olduğu yeri, oraya nasıl geldiğini ve olduğu yerden nereye ve nasıl gideceğini bilememesi olarak tanımlanmaktadır (Elm ve Woods, 1985; Conklin, 1987).

01.12.2012

5

Yardımcı Uzayda Kaybolma Yardımcı Uzayda Kaybolma Araştırmacılar kullanıcıların hiper metin, hiper ortam ve

çoklu ortamlarda kaybolmalarının, kullanıcı veya ortamdan kaynaklandığını belirtmektedirler.

Buna göre kaybolmanın nedenleri şöyledir; – Kullanıcılar, nerede olduklarını teşhis edememekteler,

– Daha önce ziyaret ettikleri bilgiye geri önememekteler, – Var olduklarına inandıkları bilgiye ulaşamamaktalar,

Çoklu Ortamda kullanışlılığı artırmak için neler yapmalıyız?

• Kullanıcıların aşırı bilişsel yüklenmelerini engelleyecek sade arayüz tasarımları yapılabilir,

• Site haritaları, arama fonksiyonları vb. farklı türde gezinme araçları kullanma,

• Ortamda yönlendirecek ipuçları kullanılma

Yapı Tasarımı

- İyi tasarlanmış bir yapı tasarımında kullanıcı kaybolmaz. - Tasarımda kullanıcıyı yönlendiren çeşitli araçlar bulunur. -Kullanıcının her zaman geçişler yapmasını sağlayan bir menü bulunur.

Yapı tasarımı Navigasyon

Birşey ararken hedefinize en kısa zamanda ulaşmanızı sağlayan bir navigasyon kullanıcıyı memnun eder. Navigasyon sığ mı olmalıdır? Derin mi? Sığ bir navigasyonda daha hızlı aradığınızı bulabilirsiniz

Yapı tasarımı Navigasyon

Derin bir navigasyon, 6 düzeyde kayıp olabilirsiniz

01.12.2012

6

Yapı tasarımı Geçmiş ve Yer imleri

Daha önceki aramalarımızı

hatırlatır

Daha önce gezdiğimiz

siteleri farklı renkte gösterir.

Yapı tasarımı Geçmiş ve Yer imleri

Yer imleri,Sık kullandığımız sitelere kolayca erişebilmek için tarayıcıların sunduğu araçtır.

Chrome

Firefox

Yapı tasarımı İndeksleme, Dizinler ve Aramalar

İndeksleme, arama motorlarının web sitenizi kendi veritabanına kaydetmesidir. Botlar aracılığıyla sitenizin heryerini gezerler. “site:siteadı.com” şeklinde arama yapılarak google’da indekslenmiş sayfalarınızı görebilirsiniz.

Yapı tasarımı İndeksleme, Dizinler ve Aramalar

Dizin, web sitelerini kategorize eden ve aradığımız siteleri daha rahat bulmamızı sağlayan sistemlerdir. Google dizinine kaydetmenin bir başka yolu da Google Web Yöneticisi Araçlarında linkinizi eklemenizdir.

Yapı tasarımı İndeksleme, Dizinler ve Aramalar

Arama: Sanal ortamın içeriği büyüdükçe istenileni bulmak güçleşmektedir. Bu nedenle arama seçenekleri önem kazanmaktadır.

Karmaşık Arama: Arama yaparken tek bir kelimeyle sorgulamamız çok fazla sayfayı getirir. Bu durum da seçici kelimeler, operatörler kulanmalıyız. (Örn. Güvenlik – Ağ Güvenliği)

Yapı tasarımı İndeksleme, Dizinler ve Aramalar

+ Operatörü: Sık kullanılan bir kelime istediğiniz sonucu almanızda önemliyse, kelimenin başına “+” koyarak aramaya dahil edebilirsiniz. “+” işaretinden önce boşluk bıraktığınızdan emin olunuz.)

01.12.2012

7

Yapı tasarımı İndeksleme, Dizinler ve Aramalar

‘’ ‘’ Operatörü: Bazı durumlarda sadece belirli bir ifadeyi içeren sonuçlara ulaşmak isteyebilirsiniz. Bu durumda arama terimlerinizin başına ve sonuna çift tırnak koyun.

Yapı tasarımı İndeksleme, Dizinler ve Aramalar

- Operatörü: Aradığınız terimin birden fazla anlamı varsa istemediğiniz anlamı ifade eden kelimelerin önüne eksi (“-”) işareti koyarak arama işleminizi daha da özelleştirebilirsiniz. (örneğin çay, hem sıcak bir içecek hem de bir tür akarsu anlamına gelir)

Yapı tasarımı İndeksleme, Dizinler ve Aramalar

Filetype: Sorgunuza [Filetype:] eklerseniz Google size hangi dosya formatında arama yaptıysanız o dosya formatındaki sonuçları getirir.

Bir film ile ilgili bilgilere de Google’da kolayca erişebilirsiniz. Arama çubuğuna Movie:filmAdı yazmanız yeterlidir. Örneğin: movie:Hobbits vb

Yapı tasarımı İndeksleme, Dizinler ve Aramalar

Google’in bize sunduğu iyi bir arama şekli: Gelişmiş Arama

http://www.google.com.tr/advanced_search?hl=tr

Kaynaklar • http://www.tbd.org.tr/index.php?sayfa=sozluk • http://tr.wikipedia.org/wiki/Hypertext • http://tr.wikipedia.org/wiki/Animasyon • http://www.metu.edu.tr/~euzun/lectures/hypermedia_Erman.pdf • http://www.chip.com.tr/makale/dijital-ses-formatlari-arasindaki-

farklar_24997.html • http://sharp-world.com/corporate/news/110308.html • http://www.belgeler.com/blg/2ikt/tasarim-ve-kullanilabilirlik • https://docs.google.com/viewer?a=v&q=cache:lhI7RP-

ym24J:efdergi.yyu.edu.tr/makaleler/cilt_III/aralik/s_karadeniz_11.doc+&hl=tr&gl=tr&pid=bl&srcid=ADGEEShGJJftXo5n2EWAzxH6xBetIDBklNaqgO0XE5cDa0-zwTtT9A7sPn2srjBD7dfeA7nhn1ON0U9LJ0XkNDjy4qx4R7jboDBJ2zIba6Wb3XTxReqcG4xOwmEupSbC43l5MnMIR66I&sig=AHIEtbQm5SUA3zNCMI7i5YwGdPQCO2xgpA

• http://www.scuvol.com/scuvolblog/files/Web-sitesinin-navigasyonunu-nasil-olusturmam-gerekiyor.php

• http://www.fogart.com/index.php/blg-bankasi/16-dizin-nedir-ve-oenemi-nedir- • http://www.eecis.udel.edu/~amer/450/TransportApplets/GBN/GBNindex.html • http://www.khas.edu.tr/uploads/ipekili/Etkin_Arama.pdf

Teşekkürler