Giriş sayfasındaki animasyon Konu: Öğrenme Ürünleri Javascript

... konulu sunumlar: "Giriş sayfasındaki animasyon Konu: Öğrenme Ürünleri Javascript"— Sunum transkripti:

1 Giriş sayfasındaki animasyon Konu: Öğrenme Ürünleri Javascript
Mustafa Şanlı Sahne Başlığı: Giriş Sahne Sayısı: S0100 Metin: “Başlıklar; Arial font, 16 punto, bold” “Normal yazılar: Arial font, 11 punto.” Dosya Adı: Sayfa 1 \ 17 Giriş sayfasındaki animasyon Grafik: Dosya Adı: giris.swf Giriş Çıkış Ses: Ses animasyon içine gömülü olcak. Senaryo/Etkileşim: Kullanıcı web adresini yazdığı zaman karşısına giriş sayfası çıkacak. Bu sayfada kullanıcıyı karşılayan küçük bir animasyon yer olacak. Bu animasyonun konusu etkileşimli web sayfaları olcaktır. Animasyondan sonra kullanıcı otomatik olarak bilgilerinin alındığı sayfaya (2. sayfa) yönlendirilecektir. Giriş botununa bastığında animasyonu beklemeden 2. sayfa geçebilir. Dallanma Yapısı: Giriş S0101 Çıkış Sayfadan çık

2 Konu: Öğrenme Ürünleri
Javascript Mustafa Şanlı Sahne Başlığı: Kimlik kontorlü sayfası Sahne Sayısı: S0101 Metin: “Başlıklar; Arial font, 16 punto, bold” “Normal yazılar: Arial font, 11 punto. Dosya Adı: Sayfa 2 \ 17 Kullanıcı adı: E-posta Adresi : Grafik: Dosya Adı: Tamam Çıkış Ses: Senaryo/Etkileşim: Bu sayfada kullanıcı adını ve e posta adresini formun ilgili alanlarına yazar ve “Tamam” tuşuna tıklar. Sistem kullanıcıdan aldığı kullanıcı adını ve e posta adresinin veri tabanında olup olmadığına bakar kayıtlı ise kaldığı ekrana gider, kayıtlı değilse kaydını yapıp javascript konusunu hakkında bilgi veren animasyon sayfasına gider. Dallanma Yapısı: Tamam S0102 Çıkış Sayfadan çık

3 Javascript animasyonu
Konu: Öğrenme Ürünleri Javascript Mustafa Şanlı Sahne Başlığı: javascript animasyonu Sahne Sayısı: S0102 Metin: “Başlıklar; Arial font, 16 punto, bold” “Normal yazılar: Arial font, 11 punto. Dosya Adı: Sayfa 3 \ 17 Javascript animasyonu animasyon Grafik: Dosya Adı:S0102.swf Tekrar Ana Menü Ses: Senaryo/Etkileşim: Bu ekranda javascriptin önemini konu alan bir animasyon bulunmaktadır. Kullanıcının butonları kullanarak animasyonu tekrar izleyebilir ya da ana menüye direk geçebilir Dallanma Yapısı: Ana Menü S0103 Tekrar S0102.swf Ses Arttır Ses Azalt

4 Konu: Öğrenme Ürünleri
Javascript Mustafa Şanlı Sahne Başlığı: Bloom’un Aşamalandırmasına Giriş Sahne Sayısı: S0103 Metin: “Başlıklar; Arial font, 16 punto, bold” “Normal yazılar: Arial font, 11 punto. Dosya Adı: Sayfa 4 \ 17 Ünite 1 Ünite 2 Ünite 3 Javascript nedir? Javascript yapısı Örnek 1 Değişkenler Dizgiler Örnek 2 karakter Grafik: Dosya Adı: S0103.swf; konunun İşlenmesi sırasında öğretici rolünü Üstlenen karakter Ana Menü Geri İleri Ses: S0103.wmv Senaryo/Etkileşim: Bu ekranda üniteler ve alt başlıkları listeler halinde sıralanmıştır. Kullanıcı istediği üniteyi seçip “İleri” butonuna basarak çalışmaya başlar. Öğretici kullanıcıya nasıl seçim yapacağı hakkında bilgi verir. Dallanma Yapısı: İleri S0104 Ana Menü inaktif Geri S0102 Ses Arttır Ses Azalt

5 Konu: Öğrenme Ürünleri
Javascript Mustafa Şanlı Sahne Başlığı: Ünite 1 hedef sayfası Sahne Sayısı: S0104 Metin: “Başlıklar; Arial font, 16 punto, bold” “Normal yazılar: Arial font, 11 punto. Dosya Adı: Sayfa 5 \ 17 Ünite 1 Bu ünite sonunda kazanılacak hedef davranışlar öğreticimiz tarafından kullanıcıya sunulur karakter Grafik: Dosya Adı: S0104.swf; konunun İşlenmesi sırasında öğretici rolünü Üstlenen karakter Ana Menü Geri İleri Ses: S0104.wmv Senaryo/Etkileşim: Bu ekranda öğretici, ünite 1’ sonunda kullanıcının kazanacağı hedef davranışları söyler. Konuşma sırasında bu davranışlar yazılı olarak da görünür. Dallanma Yapısı: İleri S0105 Ana Menü S0103 Geri S0103 Ses Arttır Ses Azalt

6 Konu: Öğrenme Ürünleri
Javascript Mustafa Şanlı Sahne Başlığı: Javascript nedir Sahne Sayısı: S0105 Metin: “Başlıklar; Arial font, 16 punto, bold” “Normal yazılar: Arial font, 11 punto. Dosya Adı: Sayfa 6 \ 17 Javascript nedir? resim JavaScript, web ortamına etkileşim kazandırmak için kullanılan senaryo dilidir. Resimler üzerine fare imleci getirildiğinde resim değişebilir, form elemanları birbirlerini etkileyecek şekilde tasarlanabilir ve çeşitli hesaplamalar yapılabilir. Tüm bu işlemler, gönder ve bekle olayını yaşamadan, siz sayfayı kullanırken sayfa içerisinde gerçekleştirilir. karakter Grafik: Dosya Adı: S0105.swf; konunun İşlenmesi sırasında öğretici rolünü Üstlenen karakter S0105.gif  javascript konusuyla ilgili resim Ana Menü Geri İleri Ses: S0105.wmv Senaryo/Etkileşim: Bu ekranda “öğretici, javascript”nedir adlı konuyu anlatır. Konuşma sırasında bu davranışlar yazılı olarak da görünür. Resim animasyon gif türündedir. Öğreticinin konuşmasına paralel olarak değişecektir. Dallanma Yapısı: İleri S0106 Ana Menü S0103 Geri S0104 Ses Arttır Ses Azalt

7 Konu: Öğrenme Ürünleri
Javascript Mustafa Şanlı Sahne Başlığı: Javascript Yapısı Sahne Sayısı: S0106 Metin: “Başlıklar; Arial font, 16 punto, bold” “Normal yazılar: Arial font, 11 punto. Dosya Adı: Sayfa 7 \ 17 Javascript yapısı resim Javascript konusuna yapıya ilişkin bazı önemli noktaları inceleyerek başlayalım. karakter Grafik: Dosya Adı: S0106.swf; konunun İşlenmesi sırasında öğretici rolünü Üstlenen karakter S0106.gif  javascript konusuyla ilgili resim Ana Menü Geri İleri Ses: S0106.wmv Senaryo/Etkileşim: Bu ekranda “ javascript yapısı” adlı konuyu anlatır. Konuşma sırasında bu davranışlar yazılı olarak da görünür. Resim animasyon gif türündedir. Öğreticinin konuşmasına paralel olarak değişecektir. Dallanma Yapısı: İleri S0107 Ana Menü S0103 Geri S0105 Ses Arttır Ses Azalt

8 Örnek -1 (video formatında)
Konu: Öğrenme Ürünleri Javascript Mustafa Şanlı Sahne Başlığı: Örnek -1 Sahne Sayısı: S0107 Metin: “Başlıklar; Arial font, 16 punto, bold” “Normal yazılar: Arial font, 11 punto. Dosya Adı: Sayfa 8 \ 17 Örnek -1 (video formatında) karakter Grafik: Dosya Adı: S0107a.swf; konunun İşlenmesi sırasında öğretici rolünü Üstlenen karakter S0107b.swf  örneği anlatan video Ana Menü Geri İleri Ses: S0107.wmv Senaryo/Etkileşim: Bu ekranda java script nedir ve “ javascript yapısı” adlı konularda Öğrenilen kavramları kullanarak yapılmış javascript örneği gösterilmektedir. Dallanma Yapısı: İleri S0108 Ana Menü S0103 Geri S0106 Ses Arttır Ses Azalt

9 Konu: Öğrenme Ürünleri
Javascript Mustafa Şanlı Sahne Başlığı: Değişkenler Sahne Sayısı: S0108 Metin: “Başlıklar; Arial font, 16 punto, bold” “Normal yazılar: Arial font, 11 punto. Dosya Adı: Sayfa 9 \ 17 Değişkenler resim Değişkenler, JavaScript senaryolarının bilgiyi sakladıkları birimlerdir. Örneğin, "x=2" yazıldığında "x" bir değişkendir ve "2" değerini saklar karakter Grafik: Dosya Adı: S0108.swf; konunun İşlenmesi sırasında öğretici rolünü Üstlenen karakter S0108.gif  javascript konusuyla ilgili resim Ana Menü Geri İleri Ses: S0108.wmv Senaryo/Etkileşim: Bu ekranda “ Değişkenler” adlı konuyu anlatır. Konuşma sırasında bu davranışlar yazılı olarak da görünür. Resim animasyon gif türündedir. Öğreticinin konuşmasına paralel olarak değişecektir. Dallanma Yapısı: İleri S0109 Ana Menü S0103 Geri S0107 Ses Arttır Ses Azalt

10 Konu: Öğrenme Ürünleri
Javascript Mustafa Şanlı Sahne Başlığı: Dizgiler Sahne Sayısı: S0109 Metin: “Başlıklar; Arial font, 16 punto, bold” “Normal yazılar: Arial font, 11 punto. Dosya Adı: Sayfa 10 \ 17 Dizgiler resim Tırnaklar arasındaki karakter gruplarına dizgi (string) denildiği daha önce ifade edilmişti. Dizgi tanımlamasında tek veya çift tırnak işaretleri kullanılabilir. Değişkenler sayı içerebildikleri gibi dizgi de içerebilir. karakter Grafik: Dosya Adı: S0109.swf; konunun İşlenmesi sırasında öğretici rolünü Üstlenen karakter S0109.gif  javascript konusuyla ilgili resim Ana Menü Geri İleri Ses: S0109.wmv Senaryo/Etkileşim: Bu ekranda “ Değişkenler” adlı konuyu anlatır. Konuşma sırasında bu davranışlar yazılı olarak da görünür. Resim animasyon gif türündedir. Öğreticinin konuşmasına paralel olarak değişecektir. Dallanma Yapısı: İleri S0110 Ana Menü S0103 Geri S0108 Ses Arttır Ses Azalt

11 Örnek -2 (video formatında)
Konu: Öğrenme Ürünleri Javascript Mustafa Şanlı Sahne Başlığı: Örnek -2 Sahne Sayısı: S0110 Metin: “Başlıklar; Arial font, 16 punto, bold” “Normal yazılar: Arial font, 11 punto. Dosya Adı: Sayfa 11 \ 17 Örnek -2 (video formatında) karakter Grafik: Dosya Adı: S0110a.swf; konunun İşlenmesi sırasında öğretici rolünü Üstlenen karakter S0110b.swf  örneği anlatan video Ana Menü Geri İleri Ses: S0110.wmv Senaryo/Etkileşim: Bu ekranda değişkenler ve “ dizgiler” adlı konularda Öğrenilen kavramları kullanarak yapılmış javascript örneği gösterilmektedir. Dallanma Yapısı: İleri S0111 Ana Menü S0103 Geri S0109 Ses Arttır Ses Azalt

12 Konu: Öğrenme Ürünleri
Javascript Mustafa Şanlı Sahne Başlığı: If Then Else Sahne Sayısı: S0111 Metin: “Başlıklar; Arial font, 16 punto, bold” “Normal yazılar: Arial font, 11 punto. Dosya Adı: Sayfa 12 \ 17 If Then Else resim Kullanıcının girdiği bilgilere bağlı olarak programın farklı işlemler yapması "if-then" (eğer-o zaman) yapısı kullanılarak sağlanır. karakter Grafik: Dosya Adı: S0111.swf; konunun İşlenmesi sırasında öğretici rolünü Üstlenen karakter S0111.gif  javascript konusuyla ilgili resim Ana Menü Geri İleri Ses: S0111.wmv Senaryo/Etkileşim: Bu ekranda “ If Then Else Kontrol Yapıları” adlı konuyu anlatılır. Konuşma sırasında bu davranışlar yazılı olarak da görünür. Resim animasyon gif türündedir. Öğreticinin konuşmasına paralel olarak değişecektir. Dallanma Yapısı: İleri S0112 Ana Menü S0103 Geri S0110 Ses Arttır Ses Azalt

13 Konu: Öğrenme Ürünleri
Javascript Mustafa Şanlı Sahne Başlığı: Fonksiyonlar Sahne Sayısı: S0112 Metin: “Başlıklar; Arial font, 16 punto, bold” “Normal yazılar: Arial font, 11 punto. Dosya Adı: Sayfa 13 \ 17 Fonksiyonlar resim Tırnaklar arasındaki karakter gruplarına dizgi (string) denildiği daha önce ifade edilmişti. Dizgi tanımlamasında tek veya çift tırnak işaretleri kullanılabilir. Değişkenler sayı içerebildikleri gibi dizgi de içerebilir. karakter Grafik: Dosya Adı: S0112.swf; konunun İşlenmesi sırasında öğretici rolünü Üstlenen karakter S0112.gif  javascript konusuyla ilgili resim Ana Menü Geri İleri Ses: S0112.wmv Senaryo/Etkileşim: Bu ekranda “ Fonksiyonlar” adlı konuyu anlatır. Konuşma sırasında bu davranışlar yazılı olarak da görünür. Resim animasyon gif türündedir. Öğreticinin konuşmasına paralel olarak değişecektir. Dallanma Yapısı: İleri S0113 Ana Menü S0103 Geri S0111 Ses Arttır Ses Azalt

14 Örnek -3 (video formatında)
Konu: Öğrenme Ürünleri Javascript Mustafa Şanlı Sahne Başlığı: Örnek -3 Sahne Sayısı: S0113 Metin: “Başlıklar; Arial font, 16 punto, bold” “Normal yazılar: Arial font, 11 punto. Dosya Adı: Sayfa 14 \ 17 Örnek -3 (video formatında) karakter Grafik: Dosya Adı: S0113a.swf; konunun İşlenmesi sırasında öğretici rolünü Üstlenen karakter S0113b.swf  örneği anlatan video Ana Menü Geri İleri Ses: S0113.wmv Senaryo/Etkileşim: Bu ekranda If Then Else ve “ Fonksiyonlar” adlı konularda Öğrenilen kavramları kullanarak yapılmış javascript örneği gösterilmektedir. Dallanma Yapısı: İleri S0115 Ana Menü S0103 Geri S0112 Ses Arttır Ses Azalt

15 Uygulama Kullanımı (video formatında)
Konu: Öğrenme Ürünleri Javascript Mustafa Şanlı Sahne Başlığı: Uygulama Kullanımı Sahne Sayısı: S0114 Metin: “Başlıklar; Arial font, 16 punto, bold” “Normal yazılar: Arial font, 11 punto. Dosya Adı: Sayfa 15\ 17 Uygulama Kullanımı (video formatında) karakter Grafik: Dosya Adı: S0114a.swf; konunun İşlenmesi sırasında öğretici rolünü Üstlenen karakter S0114b.swf  örneği anlatan video Ana Menü Geri İleri Ses: S0114.wmv Senaryo/Etkileşim: Bu ekranda uygulama progrmaının kullanımı hakkında genel bilgi verilir. Dallanma Yapısı: İleri S0115 Ana Menü S0103 Geri S0112 Ses Arttır Ses Azalt

16 Çalışma alanı Ekran Görüntüsü Programın akışı ve değişken değerleri
Konu: Öğrenme Ürünleri Javascript Mustafa Şanlı Sahne Başlığı: Uygulama Ekranı Sahne Sayısı: S0115 Metin: “Başlıklar; Arial font, 16 punto, bold” “Normal yazılar: Arial font, 11 punto. Dosya Adı: Sayfa 16\ 17 Çalışma alanı Ekran Görüntüsü Programın akışı ve değişken değerleri Grafik: Dosya Adı: Ana Menü Geri İleri Ses: Senaryo/Etkileşim: Bu ekranda uygulama progrmaı yer almaktadır. Dallanma Yapısı: İleri Ana Menü S0103 Geri S0114 Ses Arttır Ses Azalt

17 Konu: Öğrenme Ürünleri
Javascript Mustafa Şanlı Sahne Başlığı: Yardım Ekranı Sahne Sayısı: S0116 Metin: “Başlıklar; Arial font, 16 punto, bold” “Normal yazılar: Arial font, 11 punto. Dosya Adı: Sayfa 17\ 17 Yardım Animasyonu karakter Grafik: Dosya Adı: S0116a.swf; konunun İşlenmesi sırasında öğretici rolünü Üstlenen karakter S0116b.swf  örneği anlatan video Ana Menü Geri Ses: Senaryo/Etkileşim: Bu ekranda programın nasıl kullanılacağını açıklayan . Dallanma Yapısı: Ana Menü S0103 Geri Ses Arttır Ses Azalt