WEB TASARIMI VE PROGRAMLAMA

WEB TASARIMI VE PROGRAMLAMA MODÜL ADI SÜRESİ TASARIMIN TEMEL İLKELERİ 40/8 HTML İLE BASİT WEB İŞLEMLERİ 40/32 HTML İLE GELİŞMİŞ WEB İŞLEMLERİ 40/32 STİL ŞABLONU (CSS) 40/32 WEB TASARIM EDİTÖRÜNE GİRİŞ 40/32 WEB TASARIM EDİTÖRÜNDE İLERİ UYGULAMALAR WEB TASARIM EDİTÖRÜ İLE VERİ TABANI İŞLEMLERİ 40/32 40/32 BETİK DİLİ (JAVASCRİPT) 40/32 ETKİLEŞİMLİ WEB UYGULAMALARINA GİRİŞ 40/32 ETKİLEŞİMLİ WEB UYGULAMALARI İÇİN TEMEL KOMUTLAR ETKİLEŞİMLİ WEB UYGULAMALARINDA WEB FORMLARI ETKİLEŞİMLİ WEB UYGULAMALARINDA VERİ TABANI IŞLEMLERİ 40/32 40/32 40/32

DERS BİLGİ FORMU DERSİN ADI ALAN MESLEK/DAL DERSİN OKUTULACAĞI SINIF/YIL ÖNERİLEN SÜRE DERSİN AMACI DERSİN TANIMI DERSİN ÖN KOŞULLARI DERS İLE KAZANDIRILACAK WEB TASARIMI VE PROGRAMLAMA BİLİŞİM TEKNOLOJİLERİ WEB PROGRAMCILIĞI 11. veya 12. SINIF Haftalık 10 Ders Saati (Teknik Lise ve Anadolu Teknik Liselerde 12 saat) Bu derste öğrenciye; HTML dili komutları ve/veya web tasarım editörü yardımıyla web sayfaları oluşturma, programlama kodlarını kullanarak etkileşimli web uygulamaları yapma yeterliklerini kazandırmak amaçlanmaktadır. Tasarımda dikkat edilecek temel ilkeler, HTML dili komutlarını kullanma, web tasarım editörünü ve stil şablonlarını kullanarak web sayfası tasarımı yapma, betik dilini kullanma ve etkileşimli web uygulamaları için programlar hazırlama ile ilgili konularda gerekli bilgilerin verildiği derstir. Bu ders için ön koşul yoktur. Bu dersin sonunda; 1. Web projesinin analizini gerçekleştirerek tasarım ilkelerine uygun hazırlıkları yapmak 2. HTML kodları ile basit web işlemlerini yapmak 3. HTML kodları ile gelişmiş web işlemlerini yapmak 4. Stil şablonu (CSS) yapılandırmasını gerçekleştirmek 5. Web projesi için temel düzenlemeleri yapmak 6. Nesne işlemlerini yapmak ve site yönetimini gerçekleştirmek 7. Veri Tabanı işlemlerini yapmak 8. Betik dili yardımıyla script oluşturmak 9. Programlama için gerekli yazılımı kullanmak 10. Web sitesi yapısını oluşturmak 11. Web sayfalarını biçimlendirmek 12. Veri Tabanı işlemlerini yapmak yeterlikleri kazandırılacaktır. 1

DERSİN İÇERİĞİ 1. Web tasarımında temel ilkeler 2. Web sitesi taslağı oluşturma 3. İnternet ortamı ve web tasarımı 4. Html (hyper text markup language) temel etiketleri 5. Metin ve görünüm düzenleme etiketleri 6. Bağlantı (köprü) oluşturma 7. Tablolar 8. Formlar 9. Çerçeveler 10. Stil şablonları 11. Çoklu ortam araçları 12. Stil şablonu (css) temelleri 13. Stil şablonu (css) özellikleri 14. Stil şablonu (css) menü işlemleri 15. Tarayıcı sorunları 16. Temel işlemler 17. Metin işlemleri 18. Tablolar 19. Resimler 20. Çoklu ortam bileşenleri 21. Bağlantılar (linkler) 22. Css 23. Spry 24. Formlar 25. Site yönetimi ve yayını 26. Veri Tabanı panelleri 27. Detay sayfalar 28. Arama arayüzleri 29. Veri Tabanı işlemleri 30. Kullanıcı adı ve şifre işlemleri 31. Programlama dili 32. Kodlama yapısı 33. Komutlar 34. Olaylar ve nesneler 35. Visual studio 2008 36. Asp.net 2.0 programlama modeline giriş 37. Web site işlemleri 38. Uygulama dosyaları 39. Web sayfalarını oluşturmak ve değiştirmek 40. Kaynak kod ile çalışmak 41. Web kullanıcı denetimlerini oluşturmak ve kullanmak 42. Ana sayfaları kullanarak sayfaları düzneleme 43. Geçişli stil sayfaları kullanma 44. Asp.net temalarıyla görünüşü düzenleme 45. Sitedeki sayfaları otomatik olarak bağlamak 46. Asp.net durum yöneticisi 47. Veritabanları oluşturma ve onları bağlama 48. Veri Tabanı bilgilerini görüntüleme 49. Veri Tabanı bilgilerini yönetme ile ilgili konuları içermektedir. 2

YÖNTEM VE TEKNİKLER EĞİTİM ÖĞRETİM ORTAMI VE DONATIM ÖLÇME VE DEĞERLENDİRME EĞİTİMCİLER İŞBİRLİĞİ YAPILACAK KURUM VE KURULUŞLAR Bu derste anlatım, göstererek yaptırma, problem çözme, soru-cevap, grup çalışması, beyin fırtınası, uygulamalı çalışma; işletmelerde gözlem yapma, uygulama, araştırma, bireysel ve modüler öğretim yöntemleri, yenilikleri takip etme vb. yöntem ve teknikler uygulanabilir. Ortam: Bilişim Teknolojileri laboratuarı, işletme ortamı. Donanım: Projeksiyon, bilgisayar,web tasarım editörü programı Millî Eğitim Bakanlığı Ortaöğretim Kurumları Sınıf Geçme ve Sınav Yönetmeliği ne uygun olarak modül ve ders sonunda ölçme araçları kullanılarak ölçme ve değerlendirme yapılacaktır. 1. Millî Eğitim Bakanlığına bağlı eğitim kurumlarına öğretmen olarak atanacaklardan atamalarına esas olan alanlar ile mezun oldukları yükseköğretim programları ve aylık karşılığı okutacakları derslere ilişkin çizelgeye uygun olanlar görev almalıdır. 2. Programın uygulanmasında gerektiğinde alanında sektör deneyimi olan usta öğretici, teknisyen ve meslek elemanlarından yararlanılabilir. Diğer alan öğretmenleri, üniversiteler, sosyal ortaklar, sivil toplum kuruluşları, çevrede bulunan işletmeler, özel, kamu kurum ve kuruluşlarıdır. 3

MODÜL BİLGİ SAYFASI ALAN MESLEK/DAL DERS MODÜL KODU : BİLİŞİM TEKNOLOJİLERİ : WEB PROGRAMCILIĞI : WEB TASARIMI VE PROGRAMLAMA : TASARIMIN TEMEL İLKELERİ : 482BK0171 SÜRE : 40/8 ÖN KOŞUL : Bu modül için ön koşul yoktur. AÇIKLAMA : ÖĞRETİM YÖNTEM VE TEKNİKLERİ GENEL AMAÇ : Öğretim yöntem ve teknikleri olarak, anlatım, göstererek yaptırma, problem çözme, soru-cevap, grup çalışması, uygulamalı çalışma, araştırma ve bireysel öğretim yöntem ve teknikleri uygulanabilir. : Öğrenci, bu modülle gerekli ortam sağlandığında; web projesinin analizini gerçekleştirerek tasarım ilkelerine uygun hazırlıkları yapabilecektir. AMAÇLAR : İÇERİK : 1. Web tasarımında temel ilkeleri uygulayabilecektir. 2. Web sitesi taslağı oluşturacaktır. 1. WEB TASARIMINDA TEMEL İLKELER 1.1. Web Tasarımında Temel İlkeler 1.1.1. İçerik 1.1.2. Tasarım 1.1.3. İşlevsellik 1.1.4. Kullanılabilirlik 1.1.5. Web Tarayıcıları ile Uyumluluk 1.2. Hedef Kitle Beklentileri 1.3. Müşterinin Web Projesi İhtiyaçları 1.3.1. Müşterinin Sunduğu Hizmetlerin Web Projesi ile Tanıtılması 1.3.2. Müşterinin Sunduğu Ürünlerin Web Projesi ile Tanıtılması 1.3.3. Müşterinin Kişisel Web Projesinin Tanıtılması 1.4. Biçimsel özellikler 1.4.1. Renk Dengesi 1.4.2. Okunabilirlik 1.4.3. Hizalama 1.4.4. Metin ve Nesne Arası Boşluklar 4

1.5. Ses ve Görüntü Ekleme Prensipleri 1.6. Projede Kullanılacak Yazılımların Belirlenmesi 1.7. Maliyet 2. WEB SİTESİ TASLAĞI OLUŞTURMA 2.1. Web Sitesi Taslağı 2.1.1. Bütünlük 2.1.2. Güvenirlik 2.1.3. Güncellik 2.1.4. Bağlantı Hızı 2.1.5. Sunulacak İçerik Kategorilerini Oluşturma 2.1.6. Tutarlı Sayfa Hazırlama 2.2. Ana Sayfa Düzeni 2.2.1. Sayfa İçi Yerleşim Planı 2.2.2. Sayfa Çözünürlüğü 2.2.3. Reklam Alanlarını Belirleme 2.3. Dil Desteğinin Belirlenmesi 2.4. Mobil Cihazlarla Uyumluluk 2.5. Yardım Sayfaları 2.6. Site Haritası ÖLÇME VE DEĞERLENDİRME : Öğrenci, aşağıdaki performans ölçütlerini yerine getirecektir. 1. Web tasarımının temel ilkelerine ve hedef kitle beklentilerine göre web projesinin biçimsel ve yazılımsal özelliklerini belirler. 2. İhtiyaca uygun web tasarımının gerektirdiği maliyet hesabını yapar. 3. Kullanılabilirlik kriterlerine göre site haritasını planlar. 4. Site altyapısına ve tasarım kurallarına uygun web sitesi ana sayfa şablonunu oluşturur. 5

MESLEĞİN ADI Web Programcısı İŞ Web projesi hazırlama İŞLEM NUMARASI 1 İŞLEMİN ADI Proje ihtiyaçlarını belirlemek YETERLİK Web projesinin analizini gerçekleştirerek tasarım ilkelerine uygun hazırlıkları yapmak Bilgisayar, İnternet Bağlantısı, Web Tasarım Yazılımları İhtiyaca uygun tasarım yapısını planlamak 1. Web tasarımının temel ilkelerini belirlemek 2. Proje ihtiyaçlarını belirlemek 3. Projenin biçimsel özelliklerini belirlemek 4. Projede kullanılacak yazılım ihtiyaçlarını belirlemek 5. Proje maliyetini hesaplamak 1. WEB TASARIMINDA TEMEL İLKELER 1.1. Web Tasarımında Temel İlkeler 1.1.1. İçerik 1.1.2. Tasarım 1.1.3. İşlevsellik 1.1.4. Kullanılabilirlik 1.1.5. Web Tarayıcıları ile Uyumluluk 1.2. Hedef Kitle Beklentileri 1.3. Müşterinin Web Projesi İhtiyaçları 1.3.1. Müşterinin Sunduğu Hizmetlerin Web Projesi ile Tanıtılması 1.3.2. Müşterinin Sunduğu Ürünlerin Web Projesi ile Tanıtılması 1.3.3. Müşterinin Kişisel Web Projesinin Tanıtılması 1.4. Biçimsel özellikler 1.4.1. Renk Dengesi 1.4.2. Okunabilirlik 1.4.3. Hizalama 1.4.4. Metin ve Nesne Arası Boşluklar 1.5. Ses ve Görüntü Ekleme Prensipleri 1.6. Projede Kullanılacak Yazılımların Belirlenmesi 1.7. Maliyet 6 1. Web tasarım temel ilkelerini uygulamak 2. Proje ihtiyaçlarına uygun yazılımları seçmek 3. Web projesinin ihtiyaçlarını belirlemek 4. Web projesinin biçimsel özelliklerini belirlemek 5. Web projesine ses ve görüntü ekleme işlemlerini yapmak 6. Web projesinin maliyet hesabını yapmak 2. İş disiplinine sahip olmak 3. Planlı ve organize olmak 4. Sabırlı olmak 5. Tasarım ilkelerini dikkat 6. İhtiyaçlarının belirlenmesinde müşteri fikirlerine önem vermek 7. Web projesinin biçimsel özelliklerine dikkat 8. Verim-maliyet dengesine dikkat SÜRE: İşlemin Yapılma Süresi: 2 saat İşlemi Öğrenme Süresi: 4 ders saati Bilgi sayfalarında verilen konuların öğrenci tarafından anlaşıldığını test eden ve işlem basamakları ile uyuşan bir uygulama faaliyeti olmasına dikkat ediniz.

MESLEĞİN ADI Web Programcısı İŞ Web projesi hazırlamak İŞLEM NUMARASI 2 İŞLEMİN ADI Site taslağını oluşturmak YETERLİK Web projesinin analizini gerçekleştirerek tasarım ilkelerine uygun hazırlıkları yapmak Bilgisayar, İnternet Bağlantısı Tasarım kurallarına uygun site altyapısını oluşturmak 1. Web sitesi taslağı hazırlamak 2. Web sitesi anasayfa şablonu hazırlamak 3. Kullanılabilirlik kriterlerini belirlemek 4. Sitenin yardım sayfalarını planlamak 5. Site haritasını planlamak 2. WEB SİTESİ TASLAĞI OLUŞTURMA 2.1. Web Sitesi Taslağı 2.1.1. Bütünlük 2.1.2. Güvenirlik 2.1.3. Güncellik 2.1.4. Bağlantı Hızı 2.1.5. Sunulacak İçerik Kategorilerini Oluşturma 2.1.6. Tutarlı Sayfa Hazırlama 2.2. Ana Sayfa Düzeni 2.2.1. Sayfa İçi Yerleşim Planı 2.2.2. Sayfa Çözünürlüğü 2.2.3. Reklam Alanlarını Belirleme 2.3. Dil Desteğinin Belirlenmesi 2.4. Mobil Cihazlarla Uyumluluk 2.5. Yardım Sayfaları 2.6. Site Haritası 1. Web sitesi için taslak çalışması yapmak 2. Ana sayfa için düzen işlemlerini yapmak 3. Web sitesi kullanırlığını arttıracak işlemler yapmak 4. İhtiyaç halinde, siteyi mobil cihazlarla uyumlu çalışacak şekilde hazır hale getirmek 5. Site haritasının oluşturulması ile ilgili işlemleri yapmak 7 2. İş disiplinine sahip olmak 3. Planlı ve organize olmak 4. Sabırlı olmak 5. Hukuksal sorumluluklara dikkat 6. Web sitesi için taslak çalışması yapılırken bütünlüğe dikkat 7. Web sitesi için taslak çalışması yapılırken güvenirliliğe dikkat 8. Web sitesi için taslak çalışması yapılırken güncelliğe dikkat 9. Web sitesi için taslak çalışması yapılırken içerik kategorilerinin oluşturulmasına dikkat 10. Web sitesi için taslak çalışması yapılırken tutarlı sayfa oluşturmaya dikkat 11. Bakımı kolay site planlaması eğiliminde olmak 12. Açılış sayfasının öneminin farkında olmak 13. Ana sayfa düzen işlemlerinde ergonomiye dikkat 14. Site içi öğeler arasındaki uyuma dikkat 15. Sayfalar arasında kopuk bağlantıların olmamasına önem vermek SÜRE: İşlemin Yapılma Süresi: 1 saat İşlemi Öğrenme Süresi: 4 ders saati Bilgi sayfalarında verilen konuların öğrenci tarafından anlaşıldığını test eden ve işlem basamakları ile uyuşan bir uygulama faaliyeti olmasına dikkat ediniz.

MODÜL BİLGİ SAYFASI ALAN MESLEK/DAL DERS MODÜL KODU : BİLİŞİM TEKNOLOJİLERİ : WEB PROGRAMCILIĞI : WEB TASARIMI VE PROGRAMLAMA : HTML İLE BASİT WEB İŞLEMLERİ : 482BK0152 SÜRE : 40/32 ÖN KOŞUL ÖĞRETİM YÖNTEM VE TEKNİKLERİ AÇIKLAMA GENEL AMAÇ : Bu modül için ön koşul yoktur. : Öğretim yöntem ve teknikleri olarak, anlatım, göstererek yaptırma, problem çözme, soru-cevap, grup çalışması, uygulamalı çalışma, araştırma ve bireysel öğretim yöntem ve teknikleri uygulanabilir. : Uygulamalı olarak laboratuar ortamında işlenmelidir. : Öğrenci bu modül ile gerekli ortam sağlandığında; HTML kodları ile basit web işlemlerini yapabilecektir. AMAÇLAR : İÇERİK : 1. İnternetle ilgili temel araçları kullanabilecektir. 2. HTML dili temel etiketlerini kullanabilecektir. 3. HTML dili metin biçimlendirme etiketlerini kullanabilecektir. 4. HTML etiketleri ile bağlantılar oluşturabilecektir. 5. HTML etiketleri ile tablolar oluşturabilecektir. 1. İNTERNET ORTAMI VE WEB TASARIMI 1.1. İnternet 1.1.1. IP (Internet Protocol) Numarası 1.1.2. İnternet Alanı (Domain) 1.2. WEB Tarayıcılar 1.2.1. WEB Tarayıcıların Çalışması 1.3. Arama Motorları 1.3.1. Arama Motorlarının Çalışması 1.3.2. Arama Motorları ile Arama Yapma 1.4. WEB Tasarımı 1.4.1. Sayfa Hazırlarken Dikkat Edilecek Noktalar 1.4.2. Görsel Tasarım 2. HTML (HYPER TEXT MARKUP LANGUAGE) TEMEL ETİKETLERİ 2.1. HTML Komut Yapısı 2.1.1. <HTML> 2.1.2. <HEAD> 8

2.1.3. <BODY> 2.1.4. <TITLE> 2.2. Listeleme Etiketleri 2.2.1. <OL> 2.2.2. <UL> 2.2.3. <LI> 3. METİN VE GÖRÜNÜM DÜZENLEME ETİKETLERİ 3.1. Metin Düzenleme Etiketleri 3.1.1. <HX> 3.1.2. <B> 3.1.3. <U> 3.1.4. <I> 3.1.5. <BR> 3.1.6. <P> 3.1.7. <FONT> 3.2. Görünüm Düzenleme Etiketleri 3.2.1. <HR> 4. BAĞLANTI (KÖPRÜ) OLUŞTURMA 4.1. Sayfa İçi Bağlantı Oluşturma 4.2. Sayfa Dışı Bağlantı Oluşturma 4.3. E-Posta Adresine Bağlantı Oluşturma 5. TABLOLAR 5.1. <TABLE> 5.1.1. TR 5.1.2. TD 5.1.3. Border 5.1.4. Bgcolor 5.1.5. Background 5.1.6. Width 5.1.7. Height 5.1.8. Colspan 5.1.9. Rowspan 5.1.10. Cellspacing 5.1.11. Cellpadding ÖLÇME VE DEĞERLENDİRME : Öğrenci, aşağıdaki performans ölçütlerini yerine getirecektir. 1. HTTP kurallarına uyarak arama motorları ile belirli bir konuda internet üzerinden veri toplayabilir. 2. HTML sayfasında bulunması gereken standart etiketleri kullanarak basit bir HTML belge oluşturur. 3. HTML komut yapısına dikkat ederek, basit bir liste gösteren HTML belge oluşturur. 4. Görsel tasarım kurallarına dikkat ederek HTML sayfa üzerinde metin biçimlendirme işlemlerini yapar. 5. HTML belgesinden istediği yere (belge içi-belgeler arası-e-posta) bağlantı oluşturur. 6. Görsel tasarım kurallarına uyarak HTML belge üzerinde tablo düzenleme işlemlerini hatasız yapar. 9

MESLEĞİN ADI Web Programcısı İŞ HTML İle Web Sayfası Hazırlamak İŞLEM NUMARASI 1 İŞLEMİN ADI İnternetle ilgili temel araçları kullanmak HTML kodları ile basit web işlemlerini yapmak HTML editörünü çalıştıracak yeterlikte bilgisayar, internet bağlantısı 1. Internet kavramını açıklamak 2. Web tarayıcılarını kullanmak 3. Arama motorlarını kullanmak 4. Web tasarım kurallarını uygulamak SÜRE: İşlemin Yapılma Süresi: 1 saat 1. İNTERNET ORTAMI VE WEB TASARIMI 1.1. İnternet 1.1.1. IP (Internet Protocol) Numarası 1.1.2. İnternet Alanı (Domain) 1.2. WEB Tarayıcılar 1.2.1. WEB Tarayıcıların Çalışması 1.3. Arama Motorları 1.3.1. Arama Motorlarının Çalışması 1.3.2. Arama Motorları ile Arama Yapma 1.4. WEB Tasarımı 1.4.1. Sayfa Hazırlarken Dikkat Edilecek Noktalar 1.4.2. Görsel Tasarım 1. İnternet kavramlarını kullanmak 2. Web tarayıcılar ile çalışmak 3. Arama motorları ile çalışmak 2. İş disiplinine sahip olmak 3. Planlı ve organize olmak 4. Sabırlı olmak 5. İnternet kavramları arasındaki farklara dikkat 6. Web tarayıcılar arasındaki farklara dikkat 7. Arama motorlarının çalışma özelliklerine dikkat İşlemi Öğrenme Süresi: 4 ders saati 10

MESLEĞİN ADI Web Programcısı İŞ HTML İle Web Sayfası Hazırlamak İŞLEM NUMARASI 2 İŞLEMİN ADI Temel HTML Etiketlerini Kullanmak HTML kodları ile basit web işlemlerini yapmak HTML editörünü çalıştıracak yeterlikte bilgisayar, internet bağlantısı 1. HTML belgesi oluşturmak 2. HTML belgesini kayd 3. Oluşturulan HTML belgesini internet tarayıcıda görüntülemek 4. HTML sayfasında bulunması gereken standart etiketleri kullanmak 5. Listeleme etiketlerini kullanmak 2. HTML (HYPER TEXT MARKUP LANGUAGE) TEMEL ETİKETLERİ 2.1. HTML Komut Yapısı 2.1.1. <HTML> 2.1.2. <HEAD> 2.1.3. <BODY> 2.1.4. <TITLE> 2.2. Listeleme Etiketleri 2.2.1. <OL> 2.2.2. <UL> 2.2.3. <LI> 1. HTML belgesi oluşturma işlemleri yapmak 2. HTML sayfasında bulunması gereken standart etiketlerin kullanım işlemlerini yapmak 3. HTML sayfası için listeleme etiketlerini kullanmak 1. HTML belgesi oluşturulurken dikkatli olmak 2. Detaylara özen göstermek 3. İş disiplinine sahip olmak 4. Planlı ve organize olmak 5. Sabırlı olmak 6. Standart etiketlerin kullanımında dikkatli olmak 7. Listeleme etiketlerinin kullanımında dikkatli olmak SÜRE: İşlemin Yapılma Süresi: 4 saat İşlemi Öğrenme Süresi: 8 ders saati 11

MESLEĞİN ADI Web Programcısı İŞ HTML İle Web Sayfası Hazırlamak İŞLEM NUMARASI 3 İŞLEMİN ADI Metin Biçimlendirme Etiketlerini Kullanmak HTML kodları ile basit web işlemlerini yapmak HTML editörünü çalıştıracak yeterlikte bilgisayar, internet bağlantısı 1. Mantıksal metin biçimlendirme etiketlerini kullanmak 2. Fiziksel metin biçimlendirme etiketlerini kullanmak 3. METİN VE GÖRÜNÜM DÜZENLEME ETİKETLERİ 3.1. Metin Düzenleme Etiketleri 3.1.1. <HX> 3.1.2. <B> 3.1.3. <U> 3.1.4. <I> 3.1.5. <BR> 3.1.6. <P> 3.1.7. <FONT> 3.2. Görünüm Düzenleme Etiketleri 3.2.1. <HR> 1. HTML sayfası için metin biçimlendirme etiketlerini kullanmak 2. HTML sayfası için görünüm biçimlendirme etiketlerini kullanmak 2. İş disiplinine sahip olmak 3. Planlı ve organize olmak 4. Mantıksal metin biçimlendirme etiketlerinin kullanım işlemlerinde dikkatli olmak 5. Fiziksel metin biçimlendirme etiketlerinin kullanım işlemlerinde dikkatli olmak 6. HTML sayfası için görünüm biçimlendirme etiketlerinin kullanım işlemlerinde dikkatli olmak SÜRE: İşlemin Yapılma Süresi: 2 saat İşlemi Öğrenme Süresi: 6 ders saati 12

MESLEĞİN ADI Web Programcısı İŞ HTML İle Web Sayfası Hazırlamak İŞLEM NUMARASI 4 İŞLEMİN ADI Bağlantılar Oluşturmak HTML kodları ile basit web işlemlerini yapmak HTML editörünü çalıştıracak yeterlikte bilgisayar, internet bağlantısı 1. Belge içi bağlantılar oluşturmak 2. Başka bir belgeye bağlantı oluşturmak 3. Mail yönlendirmesi yapmak 4. BAĞLANTI (KÖPRÜ) OLUŞTURMA 4.1. Sayfa İçi Bağlantı Oluşturma 4.2. Sayfa Dışı Bağlantı Oluşturma 4.3. E-Posta Adresine Bağlantı Oluşturma 1. HTML belgesinin sayfaları içerisinde bağlantılar oluşturmak 2. HTML belgesinin saylarının başka bir belge sayfasına bağlantısını yapmak 3. E-posta yönlendirilmesi işlemlerini yapmak 2. İş disiplinine sahip olmak 3. Planlı ve organize olmak 4. HTML belgesinin sayfaları içerisinde bağlantılarını hatasız yapmak 5. HTML belgesinin saylarının başka bir belge sayfasına bağlantısını hatasız yapmak 4. E-posta yönlendirilmesi işlemlerini hatasız yapmak SÜRE: İşlemin Yapılma Süresi: 2 saat İşlemi Öğrenme Süresi: 6 ders saati 13

MESLEĞİN ADI Web Programcısı İŞ HTML İle Web Sayfası Hazırlamak İŞLEM NUMARASI 5 İŞLEMİN ADI Tablolar Oluşturmak HTML kodları ile basit web işlemlerini yapmak HTML editörünü çalıştıracak yeterlikte bilgisayar, internet bağlantısı 1. Tablo oluşturmak 2. Oluşturulan tabloları düzenlemek 5. TABLOLAR 5.1. <TABLE> 5.1.1. TR 5.1.2. TD 5.1.3. Border 5.1.4. Bgcolor 5.1.5. Background 5.1.6. Width 5.1.7. Height 5.1.8. Colspan 5.1.9. Rowspan 5.1.10. Cellspacing 5.1.11. Cellpadding 1. Tablo oluşturma işlemlerini yapmak 2. Tablo düzenleme işlemleri yapmak 2. İş disiplinine sahip olmak 3. Planlı ve organize olmak 4. İhtiyaca uygun tablonun oluşturulmasına özen göstermek 5. Tablo düzenleme işlemlerini hatasız yapmak SÜRE: İşlemin Yapılma Süresi: 2 saat İşlemi Öğrenme Süresi: 8 ders saati 14

MODÜL BİLGİ SAYFASI ALAN MESLEK/DAL DERS MODÜL KODU : BİLİŞİM TEKNOLOJİLERİ : WEB PROGRAMCILIĞI : WEB TASARIMI VE PROGRAMLAMA : HTML İLE GELİŞMİŞ WEB İŞLEMLERİ : 482BK0153 SÜRE : 40/32 ÖN KOŞUL AÇIKLAMA ÖĞRETİM YÖNTEM VE TEKNİKLERİ GENEL AMAÇ : HTML İle Basit Web İşlemleri modülünü tamamlamış olmak. : Uygulamalı olarak laboratuar ortamında işlenmelidir. : Öğretim yöntem ve teknikleri olarak, anlatım, göstererek yaptırma, problem çözme, soru-cevap, grup çalışması, uygulamalı çalışma, araştırma ve bireysel öğretim yöntem ve teknikleri uygulanabilir. : Öğrenci bu modül ile gerekli ortam sağlandığında; HTML kodları ile gelişmiş web işlemlerini yapabilecektir. AMAÇLAR : İÇERİK : 1. Formlar oluşturabilecektir. 2. Çerçeveler oluşturabilecektir. 3. Stil şablonları oluşturabilecektir. 4. Web sayfaları için çoklu ortam araçları ekleyebilecektir.. 1. FORMLAR 1.1. <form> 1.1.1. Action 1.1.2. Method 1.1.3. Target 1.2. <input> 1.3. Form nesneleri 1.3.1. CheckBox 1.3.2. Radio 1.3.3. Text 1.3.4. Image 1.3.5. Password 1.3.6. Textarea 1.3.7. Reset 1.3.8. Submit 15

2. ÇERÇEVELER 2.1. <frameset> 2.1.1. Cols 2.1.2. Rows 2.2. <frame> 2.3. <noframes> 3. STİL ŞABLONLARI 3.1. Stil şablonlarının komut yapısı 3.2. Stil şablonlarının çeşitleri, seçiciler 3.2.1. Stil şablonlarının çeşitleri 3.2.2. Seçiciler (Selectors) 3.3. Stil şablonlarının genel kullanım şekilleri 3.3.1. A etiketinin CSS ile kullanımı 3.3.2. Bağlantılı CSS dosyalarının hazırlanması 4. ÇOKLU ORTAM ARAÇLARI 4.1. Resim ekleme 4.2. Ses araçları ekleme 4.3. Video ekleme ÖLÇME VE DEĞERLENDİRME : Öğrenci, aşağıdaki performans ölçütlerini yerine getirecektir. 1. Türkçe karakter kullanımına dikkat ederek ihtiyaca uygun form nesnesini HTML belgeye ekler. 2. Web tasarım ilkelerine dikkat ederek oluşturulan form nesnelerinin düzenlenmesi işlemlerini hatasız yapar. 3. Web sayfalarının özelliklerine göre uygun sayıda ve büyüklükte çerçevelere bölme işlemini hatasız yapar. 4. Site haritasına uygun olarak çerçeveler arası bağlantıları oluşturur. 5. Stil şablonlarının komut yapısına dikkat ederek stil tanımlamalarını yapar. 6. Görsel tasarım ilkelerine dikkat ederek HTML belgeye uygun olan multimedya araçlarını hatasız ekler. 16

MESLEĞİN ADI Web Programcısı İŞ HTML İle Web Sayfası Hazırlamak İŞLEM NUMARASI 1 İŞLEMİN ADI Formlar Oluşturmak HTML kodları ile gelişmiş web işlemlerini yapmak HTML editörünü çalıştıracak yeterlikte bilgisayar, internet bağlantısı 1. Form nesneleri oluşturmak 2. Oluşturulan formları düzenlemek 1. FORMLAR 1.1. <form> 1.1.1. Action 1.1.2. Method 1.1.3. Target 1.2. <input> 1.3. Form nesneleri 1.3.1. CheckBox 1.3.2. Radio 1.3.3. Text 1.3.4. Image 1.3.5. Password 1.3.6. Textarea 1.3.7. Reset 1.3.8. Submit 1. Form nesnelerinin oluşturulması işlemlerini yapmak 2. Form nesnelerinin düzenlenmesi işlemleri yapmak 2. İş disiplinine sahip olmak 3. Planlı ve organize olmak 4. İhtiyaca uygun form nesnelerinin oluşturulmasına özen göstermek 5. Form nesnelerinin düzenlemesi işlemlerini hatasız yapmak SÜRE: İşlemin Yapılma Süresi: 4 saat İşlemi Öğrenme Süresi: 8 ders saati 17

MESLEĞİN ADI Web Programcısı İŞ HTML İle Web Sayfası Hazırlamak İŞLEM NUMARASI 2 İŞLEMİN ADI Çerçeveler Oluşturmak HTML kodları ile gelişmiş web işlemlerini yapmak HTML editörünü çalıştıracak yeterlikte bilgisayar, internet bağlantısı 1. Web sayfalarını çerçevelere bölmek 2. Çerçeveleri düzenlemek 3. Çerçevelere bağlantılar eklemek 2. ÇERÇEVELER 2.1. <frameset> 2.1.1. Cols 2.1.2. Rows 2.2. <frame> 2.3. <noframes> 1. Web sayfalarını çerçevelere bölme işlemlerini yapmak 2. Çerçevelerin düzenlenmesi işlemleri yapmak 3. Çerçevelere bağlantılar oluşturmak 2. İş disiplinine sahip olmak 3. Planlı ve organize olmak 4. Web sayfalarının özelliklerine uygun çerçevelere bölmeye özen göstermek 5. Çerçevelerin düzenlemesi işlemlerini hatasız yapmak 6. Çerçeve bağlantılarını hatasız oluşturmak SÜRE: İşlemin Yapılma Süresi: 4 saat İşlemi Öğrenme Süresi: 8 ders saati 18

MESLEĞİN ADI Web Programcısı İŞ HTML İle Web Sayfası Hazırlamak İŞLEM NUMARASI 3 İŞLEMİN ADI Stil Sayfaları Oluşturmak HTML kodları ile gelişmiş web işlemlerini yapmak HTML editörünü çalıştıracak yeterlikte bilgisayar, internet bağlantısı 1. Stil tanımlamaları yapmak 2. Stil tanımlamalarını düzenlemek 3. STİL ŞABLONLARI 3.1. Stil şablonlarının komut yapısı 3.2. Stil şablonlarının çeşitleri, seçiciler 3.2.1. Stil şablonlarının çeşitleri 3.2.2. Seçiciler (Selectors) 3.3. Stil şablonlarının genel kullanım şekilleri 3.3.1. A etiketinin CSS ile kullanımı 3.3.2. Bağlantılı CSS dosyalarının hazırlanması 1. Stil tanımlama işlemlerini yapmak 2. Stil tanımlamalarının düzenlemesi işlemleri yapmak 2. İş disiplinine sahip olmak 3. Planlı ve organize olmak 4. Stil şablonlarının komut yapısına dikkat 5. Stil tanımlama işlemlerini hatasız yapmak 6. Stil tanımlamalarının düzenlemesi işlemlerinde dikkatli olmak SÜRE: İşlemin Yapılma Süresi: 4 saat İşlemi Öğrenme Süresi: 8 ders saati 19

MESLEĞİN ADI Web Programcısı İŞ HTML İle Web Sayfası Hazırlamak İŞLEM NUMARASI 4 İŞLEMİN ADI Çoklu Ortam Araçları Eklemek HTML kodları ile gelişmiş web işlemlerini yapmak HTML editörünü çalıştıracak yeterlikte bilgisayar, internet bağlantısı 1. Hareketli resimler eklemek 2. Ses dosyaları eklemek 3. Video filmi eklemek 4. Java appletleri eklemek 4. ÇOKLU ORTAM ARAÇLARI 4.1. Resim ekleme 4.2. Ses araçları ekleme 4.3. Video ekleme 1. HTML belgesi içine resim ekleme işlemlerini yapmak 2. HTML belgesi içine ses araçlarını ekleme işlemlerini yapmak 3. HTML belgesi içine video ekleme işlemlerini yapmak 4. HTML belgesi içine Java appletleri eklemek 2. İş disiplinine sahip olmak 3. Planlı ve organize olmak 4. HTML belgesi içine resim ekleme işlemlerini hatasız yapmak 5. HTML belgesi içine ses araçlarını ekleme işlemlerini hatasız yapmak 6. HTML belgesi içine video ekleme işlemlerini hatasız yapmak 7. HTML belgesi içine Java appletleri ekleme işlemlerini hatasız yapmak SÜRE: İşlemin Yapılma Süresi: 2 saat İşlemi Öğrenme Süresi: 8 ders saati 20

MODÜL BİLGİ SAYFASI ALAN MESLEK/DAL DERS MODÜL KODU : BİLİŞİM TEKNOLOJİLERİ : WEB PROGRAMCILIĞI : WEB TASARIMI VE PROGRAMLAMA : STİL ŞABLONU (CSS) : 482BK0170 SÜRE : 40/32 ÖN KOŞUL : Bu modül için ön koşul yoktur. AÇIKLAMA : ÖĞRETİM YÖNTEM VE TEKNİKLERİ GENEL AMAÇ : Öğretim yöntem ve teknikleri olarak, anlatım, göstererek yaptırma, problem çözme, soru-cevap, grup çalışması, uygulamalı çalışma, araştırma ve bireysel öğretim yöntem ve teknikleri uygulanabilir. : Öğrenci, bu modül ile gerekli ortam sağlandığında; Stil Şablonu (CSS) yapılandırmasını gerçekleştirebilecektir. AMAÇLAR : İÇERİK : 1. CSS yapıları oluşturabilecektir. 2. CSS özelliklerini kullanarak görsel sayfalar oluşturabilecektir. 3. CSS menüleri oluşturarak sayfa içinde kullanabilecektir. 4. Tarayıcı sorunlarını tanıyacak ve bu sorunlar için çözümler üretebilecektir. 1. STİL ŞABLONU (CSS) TEMELLERİ 1.1. CSS in Yapısı 1.1.1. Sınıf Seçicisi 1.1.2. Id Seçicisi 1.1.3. Etiket (Tag) Seçicisi 1.2. CSS Kullanım Alanları 1.2.1. Yerel Kullanım Alanı 1.2.2. Global Kullanım Alanı 1.2.3. Bağlantılı Kullanım Alanı 1.3. CSS Birimleri 1.3.1. Uzunluk Birimleri 1.3.2. Yüzde Birimleri 1.3.3. Renk Birimleri 21

2. STİL ŞABLONU (CSS) ÖZELLİKLERİ 2.1. Zemin Özellikleri 2.1.1. Zemin Rengi 2.1.2. Zemin Resmi 2.1.3. Zemin Resmi Tekrarı 2.1.4. Zemin Resmi Pozisyonu 2.1.5. Zemin Rengi İliştirme 2.2. Font ve Metin Özellikleri 2.2.1. Font Özellikleri 2.2.2. Metin Özellikleri 2.3. Kutu Modeli Özellikleri 2.3.1. Kenar Dışı Boşluğu Özellikleri 2.3.2. Kenar Çizgisi Özellikleri 2.3.3. Kenar İçi Boşluğu Özellikleri 2.4. Tablo Özellikleri 2.4.1. Tablo Kenar Çizgileri 2.4.2. Kapsayıcı Kenar Çizgisi Ayarı 2.4.3. Tablo Genişliği ve Yüksekliği 2.4.4. Tabloda Metin Hizalama 2.4.5. Tablo Kenar Çizgi İçi Mesafesi 2.4.6. Tablo Hücre Rengi 2.5. Konumlandırma Özellikleri 2.5.1. Statik Konumlandırma 2.5.2. Sabit Konumlandırma 2.5.3. Göreceli Konumlandırma 2.5.4. Mutlak Konumlandırma 2.5.5. Örtüşen Öğeler 2.6. Liste Özellikleri 2.6.1. Sıralı Listelere Stil Verme 2.6.2. Sırasız Listelere Stil Verme 2.6.3. Madde İmi Olarak Resim Belirleme 3. STİL ŞABLONU (CSS) MENÜ İŞLEMLERİ 3.1. Dikey Menü Yapımı 3.2. Yatay Menü Yapımı 3.3. Dikey Açılır Menü 3.4. Yatay Açılır Menü 3.5. Sekmeli (Tab) Menü Yapımı 3.6. Resimli Menüler 4. TARAYICI SORUNLARI 4.1. Tarayıcı Çeşitleri 4.2. CSS Hata Ayıklama Yöntemleri 4.2.1. Hata Ayıklamak İçin Şartlı Yorumlar Kullanmak 4.2.2. Tarayıcıda Geriye Uyumluluk 4.2.3. Tarayıcı Uyumluluğu İçin CSS Sıfırlama 22

ÖLÇME VE DEĞERLENDİRME : Öğrenci, aşağıdaki performans ölçütlerini yerine getirecektir. 1. Kullanıma alanlarına dikkat ederek web sitesine uygun Stil Şablonunu (CSS) seçer. 2. Kısaltma işlemlerine ve CSS birimlerinin özelliklerine dikkat ederek Stil Şablonunu (CSS) oluşturur. 3. Web tasarımının tutarlılığına dikkat ederek metin-tablo-liste gibi görsel nesnelerin biçimlendirilmesi işlemlerini CSS şablonunu kullanarak hatasız yapar. 4. Tasarım tutarlılığına ve sayfa özelliklerine dikkat ederek siteye uygun ergonomik menü tasarımını CSS şablonunu kullanarak hatasız yapar. 5. Tarayıcı özelliklerine dikkat ederek CSS dosyalarında oluşan hataları düzeltir. 23

MESLEĞİN ADI Web Programcısı İŞ Web sitesi için HTML işlemlerini yapmak İŞLEM NUMARASI 1 İŞLEMİN ADI CSS yapısı oluşturmak YETERLİK Stil Şablonu (CSS) yapılandırmasını gerçekleştirmek Bilgisayar, CSS editör programı Sitemize uygun CSS tipini seçmek 1. Yerel Stil Şablonu (CSS) 1. CSS in kullanım alanını Oluşturmak 1. STİL ŞABLONU (CSS) belirlemek 2. Global Stil Şablonu (CSS) Oluşturmak TEMELLERİ 2. Web projesine uygun CSS yapısı oluşturmak 3. Bağlantılı Stil Şablonu (CSS) Oluşturmak 1.1. CSS in Yapısı 1.1.1. Sınıf Seçicisi 1.1.2. Id Seçicisi 1.1.3. Etiket (Tag) Seçicisi 1.2. CSS Kullanım Alanları 1.2.1. Yerel Kullanım Alanı 1.2.2. Global Kullanım Alanı 1.2.3. Bağlantılı Kullanım Alanı 1.3. CSS Birimleri 1.3.1. Uzunluk Birimleri 1.3.2. Yüzde Birimleri 1.3.3. Renk Birimleri 2. İş disiplinine sahip olmak 3. Planlı ve organize olmak 4. Tasarım tutarlılığına dikkat 5. CSS in kullanım alanına uygun olarak oluşturmak 6. CSS birimlerinin özelliklerine dikkat 7. CSS kısaltma işlemlerinde dikkatli olmak SÜRE: İşlemin Yapılma Süresi: 30 dakika İşlemi Öğrenme Süresi: 6 ders saati Bilgi sayfalarında verilen konuların öğrenci tarafından anlaşıldığını test eden ve işlem basamakları ile uyuşan bir uygulama faaliyeti oluşturulmasına dikkat ediniz. 24

MESLEĞİN ADI Web Programcısı İŞ Web sitesi için HTML işlemlerini yapmak İŞLEM NUMARASI 2 İŞLEMİN ADI CSS Özelliklerini Kullanmak YETERLİK Stil Şablonu (CSS) yapılandırmasını gerçekleştirmek Bilgisayar, CSS editör programı Sayfamızdaki nesneleri CSS yardımıyla düzenlemek 1. Metin özelliklerini kullanmak 2. Tablo özelliklerini kullanmak 2. STİL ŞABLONU (CSS) 3. Görsel nesnelere özellik kazandırmak ÖZELLİKLERİ 2.1. Zemin Özellikleri 2.1.1. Zemin Rengi 2.1.2. Zemin Resmi 2.1.3. Zemin Resmi Tekrarı 2.1.4. Zemin Resmi Pozisyonu 2.1.5. Zemin Rengi İliştirme 2.2. Font ve Metin Özellikleri 2.2.1. Font Özellikleri 2.2.2. Metin Özellikleri 2.3. Kutu Modeli Özellikleri 2.3.1. Kenar Dışı Boşluğu Özellikleri 2.3.2. Kenar Çizgisi Özellikleri 2.3.3. Kenar İçi Boşluğu Özellikleri 1. CSS özelliklerini kullanarak Web sayfalarında görselliği arttırmak 2. Tablo etiketleri kullanmadan web sayfaları oluşturmak 3. Web sayfalarının kullanımı kolaylaştırmak 2. İş disiplinine sahip olmak 3. Planlı ve organize olmak 4. Tasarım tutarlılığına dikkat 5. CSS özelliklerinin kullanımında web sayfasının ergonomisine dikkat 6. Görsel nesnelere özellik kazandırılması işlemlerinde dikkatli olmak 25

2.4. Tablo Özellikleri 2.4.1. Tablo Kenar Çizgileri 2.4.2. Kapsayıcı Kenar Çizgisi Ayarı 2.4.3. Tablo Genişliği ve Yüksekliği 2.4.4. Tabloda Metin Hizalama 2.4.5. Tablo Kenar Çizgi İçi Mesafesi 2.4.6. Tablo Hücre Rengi 2.5. Konumlandırma Özellikleri 2.5.1. Statik Konumlandırma 2.5.2. Sabit Konumlandırma 2.5.3. Göreceli Konumlandırma 2.5.4. Mutlak Konumlandırma 2.5.5. Örtüşen Öğeler 2.6. Liste Özellikleri 2.6.1. Sıralı Listelere Stil Verme 2.6.2. Sırasız Listelere Stil Verme 2.6.3. Madde İmi Olarak Resim Belirleme SÜRE: İşlemin Yapılma Süresi: 8 saat İşlemi Öğrenme Süresi: 10 ders saati Bilgi sayfalarında verilen konuların öğrenci tarafından anlaşıldığını test eden ve işlem basamakları ile uyuşan bir uygulama faaliyeti oluşturulmasına dikkat ediniz. 26

MESLEĞİN ADI Web Programcısı İŞ Web sitesi için HTML işlemlerini yapmak İŞLEM NUMARASI 3 İŞLEMİN ADI CSS Menü İşlemlerini Yapmak YETERLİK Stil Şablonu (CSS) yapılandırmasını gerçekleştirmek Bilgisayar, metin editörü veya CSS editör programı CSS yardımıyla sitemize uygun menü hazırlamak 1. CSS Menüleri Hazırlamak 2. Web Sayfasında menüleri uygun yerlere yerleştirmek 3. STİL ŞABLONU (CSS) MENÜ İŞLEMLERİ 3.1. Dikey Menü Yapımı 3.2. Yatay Menü Yapımı 3.3. Dikey Açılır Menü 3.4. Yatay Açılır Menü 3.5. Sekmeli (Tab) Menü Yapımı 3.6. Resimli Menüler 1. Sekmeli menüler oluşturmak 2. Dikey menüler oluşturmak 3. Yatay menüler oluşturmak 4. Dikey açılır menüler oluşturmak 5. Yatay açılır menüler oluşturmak 6. Resimli menüler oluşturmak 7. Web sayfalarına menüleri yerleştirmek 2. İş disiplinine sahip olmak 3. Planlı ve organize olmak 4. Tasarım tutarlılığına dikkat 5. Sayfa özelliklerine uygun menüler tasarlamaya dikkat 6. Menülerin yerleşiminde ergonomiye özen göstermek SÜRE: İşlemin Yapılma Süresi: 6 saat İşlemi Öğrenme Süresi: 10 ders saati Bilgi sayfalarında verilen konuların öğrenci tarafından anlaşıldığını test eden ve işlem basamakları ile uyuşan bir uygulama faaliyeti oluşturulmasına dikkat ediniz. 27

MESLEĞİN ADI Web Programcısı İŞ Web sitesi için HTML işlemlerini yapmak İŞLEM NUMARASI 4 İŞLEMİN ADI Tarayıcı Sorunları ve Çözümlerini Belirlemek YETERLİK Stil Şablonu (CSS) yapılandırmasını gerçekleştirmek Bilgisayar, metin editörü veya CSS editör programı CSS Dosyalarında Tarayıcı Uyumluluğunu Sağlamak 1. CSS dosyalarını farklı tarayıcılarda test 2. Hataları tespit 3. Hatalar için çözüm önerileri ür 4. TARAYICI SORUNLARI 4.1. Tarayıcı Çeşitleri 4.2. CSS Hata Ayıklama Yöntemleri 4.2.1. Hata Ayıklamak İçin Şartlı Yorumlar Kullanmak 4.2.2. Tarayıcıda Geriye Uyumluluk 4.3. Tarayıcı Uyumluluğu İçin CSS Sıfırlama 1. CSS dosyalarını tarayıcılarda test 2. CSS dosyalarında oluşan hataları tespit 3. CSS dosyalarında oluşan hataları düzeltmek 2. İş disiplinine sahip olmak 3. Planlı ve organize olmak 4. Tasarım tutarlılığına dikkat 5. Tarayıcı özelliklerine dikkat 6. CSS dosyalarının tüm tarayıcılarda hatasız çalıştığından emin olmak 7. CSS dosyalarında oluşan hataların giderildiğinden emin olmak SÜRE: İşlemin Yapılma Süresi: 1 saat İşlemi Öğrenme Süresi: 6 ders saati Bilgi sayfalarında verilen konuların öğrenci tarafından anlaşıldığını test eden ve işlem basamakları ile uyuşan bir uygulama faaliyeti oluşturulmasına dikkat ediniz. 28

MODÜL BİLGİ SAYFASI ALAN MESLEK/DAL DERS MODÜL KODU : BİLİŞİM TEKNOLOJİLERİ : WEB PROGRAMCILIĞI : WEB TASARIMI VE PROGRAMLAMA : WEB TASARIM EDİTÖRÜNE GİRİŞ : 482BK0175 SÜRE : 40/32 ÖN KOŞUL AÇIKLAMA ÖĞRETİM YÖNTEM VE TEKNİKLERİ GENEL AMAÇ : Stil Şablonu (CSS) modülünü tamamlamış olmak : Uygulamalı olarak laboratuar ortamında işlenmelidir. : Öğretim yöntem ve teknikleri olarak, anlatım, göstererek yaptırma, problem çözme, soru-cevap, grup çalışması, uygulamalı çalışma, araştırma ve bireysel öğretim yöntem ve teknikleri uygulanabilir. : Öğrenci bu modül ile gerekli ortam sağlandığında; Web tasarım editörü ile temel metin ve nesne düzenleme işlemlerini yapabilecektir. AMAÇLAR : İÇERİK : 1. Web projesi için temel tanımlama işlemlerini yapabilecektir. 2. Metin işlemlerini yapabilecektir. 3. Tablo işlemlerini yapabilecektir. 4. Resim düzenlemelerini gerçekleştirebilecektir. 5. Çoklu ortam düzenlemelerini yapabilecektir. 6. Bağlantılar oluşturabilecektir. 1. TEMEL İŞLEMLER 1.1. Çalışma Alanı 1.1.1. Editör Arayüzü 1.1.2. Çalışma Ekranları 1.1.3. Araç Çubukları ve Paneller 1.2. Site Tanımlama 1.2.1. Site Tanımı 1.2.2. Sunucu Türleri 1.3. Ön İzlemde Kullanılacak Web Tarayıcılarının Belirlenmesi 1.4. Yeni Bir Sayfa Oluşturma ve Kaydetme 29

2. METİN İŞLEMLERİ 2.1. Metin Türleri ve Özellikleri 2.1.1. Satır Sonu Ekleme 2.1.2. Bölünmez Boşluk Ekleme 2.1.3. Metin Hizalama ve Girinti Verme 2.1.4. Karakter Biçimlendirme 2.1.5. Yazı Tipi Değiştirme 2.2. Listeler 2.3. Harici metinler 3. TABLOLAR 3.1. Tablolar ile Çalışmak 3.2. Tablosal Veriler 3.3. Sayfa Düzeninde Tablo Kullanımı 3.3.1. Tablo Hücrelerini Seçme ve Kopyalama/Taşıma 3.3.2. Tablo Hücrelerini Biçimlendirme 3.3.3. Tablolarda Değişiklik Yapma 3.3.4. Tablolarda Resim Kullanma 3.3.5. Tablolarıo İç İçe Yerleştirme 3.4. Expanded Modu 4. RESİMLER 4.1. Resimlerle Çalışmak 4.1.1. Arka Plan Resmi Kullanma 4.1.2. Sayfaya Resim Ekleme 4.1.3. Varlıklar Paneli Kullanarak Resim ekleme 4.1.4. Resimlri Sık Kullanılanlar Listesi İle Yönetme 4.1.5. Metni Resim etrafına Sarma 4.1.6. Resmin Etrafındaki Boşluğu Ayarlama 4.1.7. Görüntü Yer Tutucu Ekleme 4.1.8. Rollover Görüntüsü Ekleme 4.2. Resim Düzenleme 5. ÇOKLU ORTAM BİLEŞENLERİ 5.1. Çoklu Ortam Bileşenleri Ekleme 5.1.1. Ses Oynatıcısı Ekleme 5.1.2. Shockwave Ekleme 5.1.3. Uygulama Ekleme 5.1.4. Param Ekleme 5.1.5. Activex Komutları Ekleme 5.2. Animasyon Ekleme 5.2.1. Flash Animasyon Ekleme 5.2.2. Flash Video Ekleme 6. BAĞLANTILAR (LİNKLER) 6.1. Bağlantılar İle Çalışma 6.1.1. Bağlantı Özelliklerini Düzenleme 6.1.2. Bağlantı Adreslerinin Açılış Şekilleri 6.2. Bağlantı Türleri 6.2.1. Resim Tabanlı Bağlantılar 30

6.2.2. Etkin Resim Noktaları Oluşturma 6.2.3. Yer İmleri Ekleme 6.3. E-posta Bağlantıları ÖLÇME VE DEĞERLENDİRME : Öğrenci, aşağıdaki performans ölçütlerini yerine getirecektir. 1. Çalışma alanı özelliklerine dikkat ederek web arayüz programında site tanımlama işlemlerini hatasız yapar. 2. Görsel tasarım ilkelerine ve tasarım tutarlılığına dikkat ederek web tasarım editörü ile metin ve liste düzenleme işlemlerini isteğe uygun şekilde hatasız yapar. 3. Görsel tasarım ilkelerine ve tasarım tutarlılığına dikkat ederek web tasarım editörü ile isteğe uygun olarak tablo özelliklerini ayarlar. 4. Farklı modlarda tablo oluşturma işlemlerini hatasız yapar. 5. Görsel tasarım ilkelerine ve tasarım tutarlılığına dikkat ederek web tasarım editörü ile resim biçimlendirme işlemlerini hatasız yapar. 6. Görsel tasarım ilkelerine ve tasarım tutarlılığına dikkat ederek web tasarım editörü ile çoklu ortam bileşenlerinin düzenlemesi işlemlerini hatasız yapar. 7. Tasarım tutarlılığına ve site haritasına dikkat ederek web tasarım editörü ile web sayfalarında isteğe uygun bağlantıları oluşturur. 31

MESLEĞİN ADI Web Programcısı İŞ Web sayfası hazırlama editörünü kullanmak İŞLEM NUMARASI 1 İŞLEMİN ADI Arayüzü kullanmak Web projesi için temel düzenlemeleri yapmak Bilgisayar, Web Arayüz Programı, İnternet Bağlantısı Web tasarım editörü ile isteğe uygun site tanımlamak 1. Dreamweaver ekranını kullanmak 2. Araç çubuklarını kullanmak 3. Panellerle çalışmak 4. Site tanımlama sihirbazını kullanmak 1. TEMEL İŞLEMLER 1.1. Çalışma Alanı 1.1.1. Editör Arayüzü 1.1.2. Çalışma Ekranları 1.1.3. Araç Çubukları ve Paneller 1.2. Site Tanımlama 1.2.1. Site Tanımı 1.2.2. Sunucu Türleri 1.3. Ön İzlemde Kullanılacak Web Tarayıcılarının Belirlenmesi 1.4. Yeni Bir Sayfa Oluşturma ve Kaydetme 1. Çalışma alanı özellikleri kullanmak 2. Site tanımlama işlemlerini yapmak 2. İş disiplinine sahip olmak 3. Planlı ve organize olmak 4. Tasarım tutarlılığına dikkat 5. Çalışma alanı özelliklerine dikkat 6. Site tanımlama işlemlerini hatasız yapmak SÜRE: İşlemin Yapılma Süresi: 1 saat İşlemi Öğrenme Süresi: 6 ders saati 32

MESLEĞİN ADI Web Programcısı İŞ Web sayfası hazırlama editörünü kullanmak İŞLEM NUMARASI 2 İŞLEMİN ADI Metin işlemlerini yapmak Web projesi için temel düzenlemeleri yapmak Bilgisayar, Web Arayüz Programı, İnternet Bağlantısı Web tasarım editörü ile metin ve liste düzenleme işlemlerini isteğe uygun şekilde yapmak. 1. Metin biçimlendirme işlemlerini yapmak 2. Liste oluşturmak 3. Harici metinleri kullanmak 2. METİN İŞLEMLERİ 2.1. Metin Türleri ve Özellikleri 2.1.1. Satır Sonu Ekleme 2.1.2. Bölünmez Boşluk Ekleme 2.1.3. Metin Hizalama ve Girinti Verme 2.1.4. Karakter Biçimlendirme 2.1.5. Yazı Tipi Değiştirme 2.2. Listeler 2.3. Harici metinler 1. Metin biçimlendirme işlemlerini yapmak 2. Liste oluşturma işlemlerini yapmak 3. Harici metinlerin kullanım işlemlerini yapmak 2. İş disiplinine sahip olmak 3. Planlı ve organize olmak 4. Tasarım tutarlılığına dikkat 5. Metin biçimlendirme işlemlerini hatasız yapmak 6. Liste oluşturma işlemlerinde dikkatli olmak 7. Harici metinlerin kullanımı işlemlerinde dikkatli olmak SÜRE: İşlemin Yapılma Süresi: 30 dakika İşlemi Öğrenme Süresi: 6 ders saati 33

MESLEĞİN ADI Web Programcısı İŞ Web sayfası hazırlama editörünü kullanmak İŞLEM NUMARASI 3 İŞLEMİN ADI Tablo işlemlerini yapmak Web projesi için temel düzenlemeleri yapmak Bilgisayar, Web Arayüz Programı, İnternet Bağlantısı Web tasarım editörü ile tablo üzerinde istenilen işlemleri yapabilmek 1. Tablo oluşturmak 2. Tablo özelliklerini ayarlamak 3. Layout ve Expanded modunda tablo hazırlamak SÜRE: İşlemin Yapılma Süresi: 30 dakika 3. TABLOLAR 3.1. Tablolar ile Çalışmak 3.2. Tablosal Veriler 3.3. Sayfa Düzeninde Tablo Kullanımı 3.3.1. Tablo Hücrelerini Seçme ve Kopyalama/Taşıma 3.3.2. Tablo Hücrelerini Biçimlendirme 3.3.3. Tablolarda Değişiklik Yapma 3.3.4. Tablolarda Resim Kullanma 3.3.5. Tablolarıo İç İçe Yerleştirme 3.4. Expanded Modu 1. Tablo oluşturma işlemleri yapmak 2. Tablo özellikleri ile çalışmak 3. Layout modunda tablo oluşturmak 4. Expanded modunda tablo oluşturmak 2. İş disiplinine sahip olmak 3. Planlı ve organize olmak 4. Tasarım tutarlılığına dikkat 5. Tablo oluşturma işlemlerinde dikkatli olmak 6. İsteğe uygun olarak tablo özelliklerini ayarlamak 7. Layout ve Expanded modunda tablo oluşturulurken dikkatli olmak İşlemi Öğrenme Süresi: 6 ders saati 34

MESLEĞİN ADI Web Programcısı İŞ Web sayfası hazırlama editörünü kullanmak İŞLEM NUMARASI 4 İŞLEMİN ADI Resim işlemlerini yapmak Web projesi için temel düzenlemeleri yapmak Bilgisayar, Web Arayüz Programı, İnternet Bağlantısı Resimleri,istenilen biçimde web sitesine eklemek 1. Web sayfasına resim eklemek 2. Resim biçimlendirme işlemlerini yapmak 3. Harici düzenleme programlarını kullanmak 1. Resim ekleme işlemlerini yapmak 2. Resim biçimlendirme işlemlerini yapmak 3. Resim düzenleme işlemlerini yapmak SÜRE: İşlemin Yapılma Süresi: 30 dakika 4. RESİMLER 4.1. Resimlerle Çalışmak 4.1.1. Arka Plan Resmi Kullanma 4.1.2. Sayfaya Resim Ekleme 4.1.3. Varlıklar Paneli Kullanarak Resim ekleme 4.1.4. Resimlri Sık Kullanılanlar Listesi İle Yönetme 4.1.5. Metni Resim etrafına Sarma 4.1.6. Resmin Etrafındaki Boşluğu Ayarlama 4.1.7. Görüntü Yer Tutucu Ekleme 4.1.8. Rollover Görüntüsü Ekleme 4.2. Resim Düzenleme 2. İş disiplinine sahip olmak 3. Planlı ve organize olmak 4. Tasarım tutarlılığına dikkat 5. Resim ekleme işlemlerinde dikkatli olmak 6. Resim biçimlendirme işlemlerinde dikkatli olmak 7. Resim düzenleme işlemlerini hatasız yapmak İşlemi Öğrenme Süresi: 4 ders saati 35

MESLEĞİN ADI Web Programcısı İŞ Web sayfası hazırlama editörünü kullanmak İŞLEM NUMARASI 5 İŞLEMİN ADI Çoklu ortam işlemlerini yapmak Web projesi için temel düzenlemeleri yapmak Bilgisayar, Web Arayüz Programı, İnternet Bağlantısı Web sitemize flash nesneler eklemek 1. Flash animasyon eklemek 2. Flash düğme eklemek 3. Flash metin eklemek 4. Flash video eklemek 5. Ses oynatıcısı eklemek 6. Uygulama eklemek 7. Param eklemek 8. Activex komutları eklemek 9. Harici ses ve video eklemek SÜRE: İşlemin Yapılma Süresi: 3 saat 5. ÇOKLU ORTAM BİLEŞENLERİ 5.1. Çoklu Ortam Bileşenleri Ekleme 5.1.1. Ses Oynatıcısı Ekleme 5.1.2. Shockwave Ekleme 5.1.3. Uygulama Ekleme 5.1.4. Param Ekleme 5.1.5. Activex Komutları Ekleme 5.2. Animasyon Ekleme 5.2.1. Flash Animasyon Ekleme 5.2.2. Flash Video Ekleme 1. Web sitesine flash nesneleri eklemek 2. Web sitesine çoklu ortam nesnelerini eklemek 3. Çoklu ortam nesnelerini düzenlemek 2. İş disiplinine sahip olmak 3. Planlı ve organize olmak 4. Tasarım tutarlılığına dikkat 5. Flash nesnelerinin eklenmesi işlemlerini hatasız yapmak 6. Çoklu ortam bileşenlerinin eklenmesi işlemlerini hatasız yapmak 7. Çoklu ortam bileşenlerinin düzenlemesi işlemlerini hatasız yapmak İşlemi Öğrenme Süresi: 4 ders saati 36

MESLEĞİN ADI Web Programcısı İŞ Web sayfası hazırlama editörünü kullanmak İŞLEM NUMARASI 6 İŞLEMİN ADI Bağlantılar oluşturmak Web projesi için temel düzenlemeleri yapmak Bilgisayar, Web Arayüz Programı, İnternet Bağlantısı Web sayfalarımızda isteğe uygun bağlantılar oluşturmak 1. Metne bağlantı eklemek 2. Resme bağlantı eklemek 3. Bağlantı özelliklerini ayarlamak 4. E-posta bağlantısı eklemek 6. BAĞLANTILAR (LİNKLER) 6.1. Bağlantılar İle Çalışma 6.1.1. Bağlantı Özelliklerini Düzenleme 6.1.2. Bağlantı Adreslerinin Açılış Şekilleri 6.2. Bağlantı Türleri 6.2.1. Resim Tabanlı Bağlantılar 6.2.2. Etkin Resim Noktaları Oluşturma 6.2.3. Yer İmleri Ekleme 6.3. E-posta Bağlantıları 1. Web sayfasında bağlantılar oluşturmak 2. Bağlantı özelliklerini düzenlemek 3. E-posta bağlantıları oluşturmak 2. İş disiplinine sahip olmak 3. Planlı ve organize olmak 4. Tasarım tutarlılığına dikkat 5. Web sayfası bağlantılarını hatasız yapmak 6. Bağlantı özelliklerini ayarlarken dikkatli olmak 7. E-Posta bağlantılarını hatasız yapmak SÜRE: İşlemin Yapılma Süresi: 30 dakika İşlemi Öğrenme Süresi: 6 ders saati 37

MODÜL BİLGİ SAYFASI ALAN MESLEK/DAL DERS MODÜL KODU : BİLİŞİM TEKNOLOJİLERİ : WEB PROGRAMCILIĞI : WEB TASARIMI VE PROGRAMLAMA : WEB TASARIM EDİTÖRÜNDE İLERİ UYGULAMALAR : 482BK0174 SÜRE : 40/32 ÖN KOŞUL AÇIKLAMA ÖĞRETİM YÖNTEM VE TEKNİKLERİ : Web Tasarım Editörüne Giriş modülünü tamamlamış olmak. : Uygulamalı olarak laboratuar ortamında işlenmelidir. : Öğretim yöntem ve teknikleri olarak, anlatım, göstererek yaptırma, problem çözme, soru-cevap, grup çalışması, uygulamalı çalışma, araştırma ve bireysel öğretim yöntem ve teknikleri uygulanabilir. GENEL AMAÇ : Öğrenci bu modül ile gerekli ortam sağlandığında; Web tasarım editörü ile sayfa içerisindeki CSS ve SPRY nesneleri düzenleyip web sitesini internet ortamında yayınlayabilecektir. AMAÇLAR : İÇERİK : 1. CSS dosyaları düzenlemek ve sayfamıza javascript kodları eklemek 2. SPRY nesneler kullanmak 3. Form nesneleri kullanmak 4. Web sitesini yön ve internette yayınlamak 1. CSS 1.1. Dreamweaver ile Sayfa içinde CSS kullanımı 1.2. Dreamweaver ve Harici CSS sayfaları 1.3. CSS ile tasarım 1.4. Davranışlar 1.5. Ziyaretçi tarafı etkileşim 1.6. Javascript 1.7. Davranış türleri ve kurallar 1.8. Davranışları ekleme ve düzenleme 2. SPRY 2.1. SPRY framework 38

2.2. SPRY nesneleri ekleme ve düzenleme 3. FORMLAR 3.1. Formlar ile çalışma 3.2. Form temelleri 3.3. Form bileşenleri 3.4. Eylem türleri 4. SİTE YÖNETİMİ VE YAYINI 4.1. Site Yönetimi 4.1.1. Site yönetimi 4.1.2. Raporlar 4.1.3. Dosya Transferleri 4.2. Yayınlama 4.2.1. Yayınlama Seçenekleri 4.2.2. Sunucu Bağlantısı 4.2.3. Sitenin Yayınlanması ÖLÇME VE DEĞERLENDİRME : Öğrenci, aşağıdaki performans ölçütlerini yerine getirecektir. 1. Tasarım tutarlılığına dikkat ederek web arayüz programını aracılığıyla Stil Şablonunu (CSS) oluşturur. 2. Görsel tasarım ilkelerine ve sayfaların tutarlılığına dikkat ederek web arayüz programında CSS yardımıyla sitenin görsel tasarımını yapar. 3. Davranış türlerine ve kurallarına dikkat ederek web arayüz programı aracılığıyla siteye davranış ekler. 4. Davranış türlerine ve kurallarına dikkat ederek web arayüz programı aracılığıyla siteye eklenen davranışları düzenler. 5. Görsel tasarım ilkelerine ve sayfaların tutarlılığına dikkat ederek web arayüz programında Javascript kodlarını kullanarak sitenin görselliğini düzenler. 6. Tasarım tutarlılığına dikkat ederek web arayüz programı aracılığıyla web sayfalarına SPRY nesnelerini hatasız ekler. 7. Görsel tasarım ilkelerine ve sayfaların tutarlılığına dikkat ederek web arayüz programında sayfalara eklenen SPRY nesnelerini hatasız düzenler. 8. Tasarım tutarlılığına dikkat ederek web arayüz programı aracılığıyla sayfalara form ekler. 9. İsimlendirme işlemlerinde yazım kurallarına dikkat ederek ihtiyaca uygun form nesnelerini web arayüz programı aracılığıyla sayfalara ekler. 10. Tasarım tutarlılığına dikkat ederek web arayüz programı aracılığıyla form nesnelerini hatasız düzenler. 11. Web arayüz programı aracılığıyla sitenin erişilebilirliğini test eder. 12. Web arayüz programı aracılığıyla dosya ve klasörlerin aktarılması işlemlerini hatasız yapar. 13. Web arayüz programı aracılığıyla web sitesini sunucu tarafında hatasız çalıştırır. 39

MESLEĞİN ADI Web Programcısı İŞ Web sayfası hazırlama editörünü kullanmak İŞLEM NUMARASI 1 İŞLEMİN ADI CSS kullanmak Nesne işlemlerini yaparak site yönetimini gerçekleştirmek Bilgisayar, Web Arayüz Programı, İnternet Bağlantısı Web sayfamıza Javascript kodları ekleyip, CSS yardımıyla sitemizin görselliğini ayarlamak 1. Web editöründe CSS kullanmak 2. Harici CSS sayfalarını kullanmak 3. Davranış eklemek 4. Javascript kullanmak 1. CSS 1.1. Dreamweaver ile Sayfa içinde CSS kullanımı 1.2. Dreamweaver ve Harici CSS sayfaları 1.3. CSS ile tasarım 1.4. Davranışlar 1.5. Ziyaretçi tarafı etkileşim 1.6. Javascript 1.7. Davranış türleri ve kurallar 1.8. Davranışları ekleme ve düzenleme 1. CSS sayfalarını kullanmak 2. CSS ile tasarım yapmak 3. Davranış türünü seçmek 4. Davranış ekleme ve düzenleme işlemleri yapmak 2. İş disiplinine sahip olmak 3. Planlı ve organize olmak 4. Tasarım tutarlılığına dikkat 5. CSS sayfalarının kullanım işlemlerinde dikkatli olmak 6. Davranış türlerine ve kurallarına dikkat 7. Davranış ekleme ve düzenleme işlemlerini hatasız yapmak SÜRE: İşlemin Yapılma Süresi: 1 saat İşlemi Öğrenme Süresi: 8 ders saati 40

MESLEĞİN ADI Web Programcısı İŞ Web sayfası hazırlama editörünü kullanmak İŞLEM NUMARASI 2 İŞLEMİN ADI SPRY nesnelerini düzenlemek Nesne işlemlerini yaparak site yönetimini gerçekleştirmek Bilgisayar, Web Arayüz Programı, İnternet Bağlantısı Web sayfamızda SPRY nesneler kullanmak 1. SPRY menü çubuğunu kullanmak 2. SPRY sekmeli panelleri kullanmak 3. SPRY Akordeonu kullanmak 4. SPRY efektlerini kullanmak 2. SPRY 2.1. SPRY framework 2.2. SPRY nesneleri ekleme ve düzenleme 1. SPRY nesnelerinin eklenmesi işlemlerini yapmak 2. SRPY nesnelerinin düzenlenmesi işlemlerini yapmak 2. Planlı ve organize olmak 3. Tasarım tutarlılığına dikkat 4. SPRY nesnelerinin eklenmesi işlemlerini hatasız yapmak 5. SRPY nesnelerinin düzenlenmesi işlemlerinde dikkatli olmak SÜRE: İşlemin Yapılma Süresi: 2 saat İşlemi Öğrenme Süresi: 8 ders saati 41

MESLEĞİN ADI Web Programcısı İŞ Web sayfası hazırlama editörünü kullanmak İŞLEM NUMARASI 3 İŞLEMİN ADI Formlarla çalışmak Nesne işlemlerini yaparak site yönetimini gerçekleştirmek Bilgisayar, Web Arayüz Programı, İnternet Bağlantısı Web sayfamıza görsel form nesneleri eklemek 1. Web sayfalarında form oluşturmak 2. Form nesneleri eklemek 3. Formları biçimlendirmek 4. Nesneleri biçimlendirmek 3. FORMLAR 3.1. Formlar ile çalışma 3.2. Form temelleri 3.3. Form bileşenleri 3.4. Eylem türleri 1. Form nesnelerinin oluşturulması işlemlerini yapmak 2. Form nesnelerinin eklenmesi işlemlerini yapmak 3. Form nesnelerinin özelliklerini ayarlamak 2. Planlı ve organize olmak 3. Tasarım tutarlılığına dikkat 4. Form nesnelerini isimlendirirken yazım kurallarına dikkat 5. İhtiyaca uygun form nesnelerinin oluşturulmasına özen göstermek 6. Form nesnelerinin eklenmesi işlemlerini hatasız yapmak SÜRE: İşlemin Yapılma Süresi: 2 saat İşlemi Öğrenme Süresi: 8 ders saati 42

MESLEĞİN ADI Web Programcısı İŞ Web sayfası hazırlama editörünü kullanmak İŞLEM NUMARASI 4 İŞLEMİN ADI Site yönetimi ve yayınlama işlemlerini yapmak Nesne işlemlerini yaparak site yönetimini gerçekleştirmek Bilgisayar, Web Arayüz Programı, İnternet Bağlantısı Web sitemizi internette sorunsuz şekilde yayınlamak 1. Site erişebilirliğini test 2. Site raporu oluşturmak 3. Dosya transferi yapmak 4. Siteyi yayınlamak 5. Sunucu bağlantısı yapmak 4. SİTE YÖNETİMİ VE YAYINI 4.1. Site Yönetimi 4.1.1. Site yönetimi 4.1.2. Raporlar 4.1.3. Dosya Transferleri 4.2. Yayınlama 4.2.1. Yayınlama Seçenekleri 4.2.2. Sunucu Bağlantısı 4.2.3. Sitenin Yayınlanması 1. Erişebilirlik ve test işlemlerini gerçekleştirmek 2. Rapor oluşturmak 3. Bağlantıları kontrol 4. Dosya ve klasörleri aktarmak 5. Sunucu tarafında çalışmak 2. Planlı ve organize olmak 3. Tasarım tutarlılığına dikkat 4. İsimlendirme işlemlerinde yazım kuralarına dikkat 5. Dosya ve klasörlerin aktarılması işlemlerini hatasız yapmak 6. Web sitesinin sunucu tarafında hatasız çalıştığından emin olmak SÜRE: İşlemin Yapılma Süresi: 2 saat İşlemi Öğrenme Süresi: 8 ders saati 43

MODÜL BİLGİ SAYFASI ALAN MESLEK/DAL DERS MODÜL KODU : BİLİŞİM TEKNOLOJİLERİ : WEB PROGRAMCILIĞI : WEB TASARIMI VE PROGRAMLAMA : WEB TASARIM EDİTÖRÜ İLE VERİ TABANI İŞLEMLERİ : 482BK0173 SÜRE : 40/32 ÖN KOŞUL AÇIKLAMA ÖĞRETİM YÖNTEM VE TEKNİKLERİ : Web Tasarım Editöründe İleri Uygulamalar modülünü tamamlamış olmak : Uygulamalı olarak laboratuar ortamında işlenmelidir. : Öğretim yöntem ve teknikleri olarak, anlatım, göstererek yaptırma, problem çözme, soru-cevap, grup çalışması, uygulamalı çalışma, araştırma ve bireysel öğretim yöntem ve teknikleri uygulanabilir. GENEL AMAÇ : Öğrenci bu modül ile gerekli ortam sağlandığında; Web tasarım editörü ile Veri Tabanı işlemlerini gerçekleştirebilecektir. AMAÇLAR : İÇERİK : 1. VERİ TABANI PANELLERİ 1. Temel Veri Tabanı düzenlemelerini yapabilecektir. 2. Detay sayfalar için düzenlemeler yapabilecektir. 3. Arama arayüzleri oluşturabilecektir. 4. Veri Tabanı kayıt işlemlerini gerçekleştirebilecektir. 5. Kullanıcı girişi için şifreli sayfalar oluşturabilecektir. 1.1. Panellere bakış 1.2. Bir kayıt seti oluşturma 1.3. Gelişmiş kayıt setleri oluşturma 1.4. Veriyi sayfalarla bağlama 1.5. Satırları tekrar etme 1.6. Recordset navigation barı 1.7. Server Debug penceresi 2. DETAY SAYFALAR 2.1. URL parametreleri 2.2. Detay sayfalar 44

2.3. Parametre ile veri Aktarımı 3. ARAMA ARAYÜZLERİ 3.1. Form Değişkenleri 3.2. Form ile Veri Aktarımı 3.3. Arama için SQL Cümlelerinin Kullanımı 4. VERİ TABANI İŞLEMLERİ 4.1. Veri Ekleme 4.1.1. Form Oluşturma 4.1.2. Insert Record Davranışı 4.1.3. Form Verilerinin Geçerliliğini Kontrol Etme 4.2. Güncelleme Sayfaları 4.2.1. Form Oluşturma 4.2.2. Update Record sihirbazı 4.3. Silme Sayfaları 4.3.1. Silme Süreci 4.3.2. Silme Davranışı 4.3.3. Gizli Form Alanları 5. KULLANICI ADI VE ŞİFRE İŞLEMLERİ 5.1. Kullanıcı Girişi Sayfaları 5.2. Kullanıcı Adı-Şifre Doğrulama Mantığı 5.3. Giriş Davranışı 5.4. Seviyelendirme 5.5. Sayfalara Erişim 5.6. Çıkış Davranışı ÖLÇME VE DEĞERLENDİRME : Öğrenci, aşağıdaki performans ölçütlerini yerine getirecektir. 1. Kolay erişilebilirliğe dikkat ederek web tasarım editöründe kullanacağı panellerin yerleşimini yapar. 2. Tasarım tutarlılığına dikkat ederek yeni bir kayıt seti oluşturma işlemlerini hatasız yapar. 3. Tasarım tutarlılığına dikkat ederek Recordset.navigation bar aracılığıyla kayıtları sayfalatma işlemlerini hatasız yapar. 4. Server Debug penceresi ile Veri Tabanından gelen kayıtların ve kodların çıktılarının nasıl bir sonuç verdiğini kontrol eder. 5. Tanımlamalara dikkat ederek parametrelerle veri aktarım işlemlerini hatasız yapar. 6. Yazım kurallarına dikkat ederek form değişkenlerini hatasız tanımlar. 7. Web tasarım editöründe SQL komutlarını kullanarak form ile veri aktarım işlemlerini hatasız yapar. 8. Web tasarım editöründe SQL komutlarını kullanarak Veri Tabanı işlemlerini hatasız yapar. 9. Veri güvenliğine dikkat ederek web tasarım editöründe kullanıcı hesabı tanımlama işlemlerini hatasız yapar. 10. Veri güvenliğine dikkat ederek web tasarım editöründe kullanıcı davranışları tanımlama işlemlerini hatasız yapar. 45

MESLEĞİN ADI Web Programcısı İŞ Web sayfası hazırlama editörünü kullanmak İŞLEM NUMARASI 1 İŞLEMİN ADI Temel Veri Tabanı düzenlemelerini yapmak Veri Tabanı işlemlerini gerçekleştirmek Bilgisayar, Web Arayüz Programı, İnternet Bağlantısı Web tasarım editörü panelleri ile veri tabanına hatasız olarak veri kaydı yapmak 1. Panellerle çalışmak 2. Kayıt seti oluşturmak 3. Gelişmiş kayıt setleri oluşturmak 4. Recordset navigation bar ı kullanmak 5. Server Debug penceresini kullanmak 1. VERİ TABANI PANELLERİ 1.1. Panellere bakış 1.2. Bir kayıt seti oluşturma 1.3. Gelişmiş kayıt setleri oluşturma 1.4. Veriyi sayfalarla bağlama 1.5. Satırları tekrar etme 1.6. Recordset navigation barı 1.7. Server Debug penceresi 1. Kayıt seti oluşturma işlemleri yapmak 2. Recordset.navigation barının kullanım işlemlerini yapmak 3. Server Debug penceresinin kullanım işlemlerini yapmak 1. Tasarım tutarlılığına dikkat 2. Kayıt seti oluşturma işlemlerini hatasız yapmak 3. Recordset.navigation bar ının hatasız kullanmak 4. Server Debug penceresinin kullanımında dikkatli olmak SÜRE: İşlemin Yapılma Süresi: 30 dakika İşlemi Öğrenme Süresi: 6 ders saati 46

MESLEĞİN ADI Web Programcısı İŞ Web sayfası hazırlama editörünü kullanmak İŞLEM NUMARASI 2 İŞLEMİN ADI Detay sayfalar için düzenlemeler yapmak Veri Tabanı işlemlerini gerçekleştirmek Bilgisayar, Web Arayüz Programı, İnternet Bağlantısı Web tasarım editörü yardımıyla veri tabanındaki istenilen bilgilere ulaşmak 1. Detay sayfalar oluşturmak 2. Parametre ile veri aktarmak 2. DETAY SAYFALAR 2.1. URL parametreleri 2.2. Detay sayfalar 2.3. Parametre ile veri Aktarımı 1. URL parametrelerini kullanmak 2. Detay sayfalarla çalışmak 3. Parametre ile veri aktarma işlemleri yapmak 2. Planlı ve organize olmak 3. Tasarım tutarlılığına dikkat 4. Parametreleri doğru tanımlamak 5. Detay sayfalarına doğru yönlendirme yapmak 6. Veri aktarım işlemlerinde parametreleri doğru kullanmak SÜRE: İşlemin Yapılma Süresi: 1 saat İşlemi Öğrenme Süresi: 8 ders saati 47

MESLEĞİN ADI Web Programcısı İŞ Web sayfası hazırlama editörünü kullanmak İŞLEM NUMARASI 3 İŞLEMİN ADI Arama arayüzleri oluşturmak Veri Tabanı işlemlerini gerçekleştirmek Bilgisayar, Web Arayüz Programı, İnternet Bağlantısı Web tasarım editörü ve SQL komutlarıyla veri tabanı üzerinde istenilen işlemleri yapmak 1. Form değişkenlerini tanımlamak 2. SQL komutlarını kullanmak 3. Arama işlemlerini yapmak 3. ARAMA ARAYÜZLERİ 3.1. Form Değişkenleri 3.2. Form ile Veri Aktarımı 3.3. Arama için SQL Cümlelerinin Kullanımı 1. Form değişkeni tanımlama işlemleri yapmak 2. Form ile veri aktarımı işlemlerini yapmak 2. Planlı ve organize olmak 3. Tasarım tutarlılığına dikkat 4. Form değişkenlerini tanımlarken yazım kurallarına dikkat 5. Form ile veri aktarım işlemlerini hatasız yapmak SÜRE: İşlemin Yapılma Süresi: 2 saat İşlemi Öğrenme Süresi: 6 ders saati 48

MESLEĞİN ADI Web Programcısı İŞ Web sayfası hazırlama editörünü kullanmak İŞLEM NUMARASI 4 İŞLEMİN ADI Veri Tabanı kayıt işlemlerini gerçekleştirmek Veri Tabanı işlemlerini gerçekleştirmek Bilgisayar, Web Arayüz Programı, İnternet Bağlantısı Web tasarım editörü ve SQL komutlarıyla veri tabanı üzerinde istenilen işlemleri yapmak 1. Veri eklemek 2. Verileri güncellemek 3. Verileri silmek 4. VERİ TABANI İŞLEMLERİ 4.1. Veri Ekleme 4.1.1. Form Oluşturma 4.1.2. Insert Record Davranışı 4.1.3. Form Verilerinin Geçerliliğini Kontrol Etme 4.2. Güncelleme Sayfaları 4.2.1. Form Oluşturma 4.2.2. Update Record sihirbazı 4.3. Silme Sayfaları 4.3.1. Silme Süreci 4.3.2. Silme Davranışı 4.3.3. Gizli Form Alanları 1. Veri Tabanına veri ekleme işlemlerini yapmak 2. Veri Tabanında arama işlemlerini yapmak 3. Veri Tabanında güncelleme işlemlerini yapmak 4. Veri Tabanından silme işlemlerini yapmak 2. Planlı ve organize olmak 3. Tasarım tutarlılığına dikkat 4. Veri Tabanında işlemlerinde dikkatli olmak SÜRE: İşlemin Yapılma Süresi: 2 saat İşlemi Öğrenme Süresi: 6 ders saati 49

MESLEĞİN ADI Web Programcısı İŞ Web sayfası hazırlama editörünü kullanmak İŞLEM NUMARASI 5 İŞLEMİN ADI Kullanıcı girişi için şifreli sayfalar oluşturmak Veri Tabanı işlemlerini gerçekleştirebilecektir. Bilgisayar, Web Arayüz Programı, İnternet Bağlantısı Web sitemize üye giriş sistemi oluşturmak 1. Kullanıcı giriş sayfası oluşturmak 2. Kullanıcı adı ve şifre doğrulama işlemlerini yapmak 3. Giriş ve çıkış davranışlarını eklemek 4. Sayfalara erişimi engellemek 5. KULLANICI ADI VE ŞİFRE İŞLEMLERİ 5.1. Kullanıcı Girişi Sayfaları 5.2. Kullanıcı Adı-Şifre Doğrulama Mantığı 5.3. Giriş Davranışı 5.4. Seviyelendirme 5.5. Sayfalara Erişim 5.6. Çıkış Davranışı 1. Kullanıcı girişli web sayfaları hazırlamak 2. Kullanıcı hesapları oluşturmak 3. Kullanıcı giriş ve çıkış davranışlarını belirlemek 4. Hesapları yön 2. Planlı ve organize olmak 3. Tasarım tutarlılığına dikkat 4. Veri güvenliğine dikkat 5. Kullanıcı hesapları oluşturulması işlemlerinde dikkatli olmak SÜRE: İşlemin Yapılma Süresi: 2 saat İşlemi Öğrenme Süresi: 6 ders saati 50

MODÜL BİLGİ SAYFASI ALAN MESLEK/DAL DERS MODÜL : BİLİŞİM TEKNOLOJİLERİ : WEB PROGRAMCILIĞI : WEB TASARIMI VE PROGRAMLAMA : BETİK DİLİ (JAVASCRIPT) KODU : SÜRE : 40/32 ÖN KOŞUL AÇIKLAMA ÖĞRETİM YÖNTEM VE TEKNİKLERİ GENEL AMAÇ : Programlama Temelleri dersi modüllerini tamamlamış olmak. : 482BK0139 : Öğretim yöntem ve teknikleri olarak, anlatım, göstererek yaptırma, problem çözme, soru-cevap, grup çalışması, uygulamalı çalışma, araştırma ve bireysel öğretim yöntem ve teknikleri uygulanabilir. : Öğrenci, bu modül ile gerekli ortam sağlandığında; betik dili yardımıyla web siteleri içinde kullanılacak scriptleri oluşturabilecektir. AMAÇLAR : İÇERİK : 1. Değişkenleri ve mantıksal işlem operatörlerini kullanılabilecektir. 2. Akış kontrol, dizi ve fonksiyon yapılarını kullanabilecektir. 3. İhtiyaca uygun script komutlarını kullanabilecektir. 4. Olay ve nesne işlemlerini yapabilecektir. 1. PROGRAMLAMA DİLİ 1.1. Betik Dili (JavaScript) 1.1.1. HTML e JavaScript Kodlarını Tanıtma 1.1.2. JavaScript Kodlarının HTML deki Konumu 1.2. Yazım Kuralları 1.2.1. İsimlendirme 1.2.2. Özel İşaret Gösterimi 1.2.3. Yorum Kodları 1.3. Değişkenler 1.3.1. Değişken Tanımlama ve Değişken Türleri 1.3.2. Değişkenlere Değer Verme 1.3.3. Aritmetik İşlem İşaretleri ve Öncelik Sıralaması 1.4. Mantıksal İşlemler 51

1.4.1. JavaScript'te "ve" Operatörü: "&&" 1.4.2. JavaScript'te "veya" Operatörü: " " 1.4.3. JavaScript'te "değil" Operatörü: "!" 2. KODLAMA YAPISI 2.1. Akış Denetimi 2.1.1. "if... else..." Koşul Deyimi 2.1.2. Koşul İfadeleri 2.1.3. "switch" Koşul Deyimi 2.2. Döngü Denetimi 2.2.1. "while" Döngü Deyimi 2.2.2. "do... while" Döngü Deyimi 2.2.3. "for" Döngüsü 2.3. Diziler 2.3.1. Dizi Tanımlama 2.3.2. Çok Boyutlu Diziler 2.3.3. Diziler Üzerinde İşlemler 2.4. Fonksiyonlar 2.4.1. Fonksiyon Yapısı 2.4.2. Argümansız Fonksiyonlar 2.4.3. Argümanlı Fonksiyonlar 2.4.4. Değer Atamalı Fonksiyonlar 3. KOMUTLAR 3.1. Pencere Komutları 3.1.1. Kutular 3.1.2. Pencere İşlemleri 3.1.3. Yeni Pencere Açma 3.1.4. Çok Sayıda Pencere Açma 3.1.5. Pencere Kapatma 3.1.6. Pencere Kutusu 3.1.7. Sayfa Yönlendirme 3.1.8. Sayfayı Yeniden Yükleme 3.2. Metin Komutları 3.3. Zaman Komutları 3.4. Matematik Komutları 3.5. Tarayıcı Komutları 4. OLAYLAR VE NESNELER 4.1. Olaylar 4.1.1. "onclick" Olayı 4.1.2. "ondblclick" Olayı 4.1.3. "onmouseover" Olayı 4.1.4. "onmouseout" Olayı 4.1.5. Sağ Tıklama, Sol Tıklama 4.1.6. İmlecin Koordinatları 4.1.7. Tuş Fare Kombinasyonları 4.2. Nesneler 4.2.1. Doküman Nesnesi 4.2.1.1. Doküman Nesnesinin İçeriği 4.2.1.2. Doküman Başlığını 4.2.1.3. Doküman Nesnesinin Türü 52

4.2.1.4. Arka Plan Rengi 4.2.2. Form Nesnesi 4.2.2.1. Form Komutları 4.2.2.2. Bilgi Giriş Elemanları 4.2.2.3. Seçenek Kutusu ÖLÇME VE DEĞERLENDİRME : Öğrenci, aşağıdaki performans ölçütlerini yerine getirecektir. 1. Programlama yazım kurallarına dikkat ederek web tasarım editöründe HTML kodlama ile oluşturulan sayfa içinde script komutlarını hatasız tanımlar. 2. Programlama yazım kurallarına dikkat ederek web tasarım editöründe veri türüne uygun değişkeni hatasız tanımlar. 3. İşlem önceliğine dikkat ederek web tasarım editöründe değişkenleri kullanarak aritmetik işlemleri hatasız yapar. 4. İşleme uygun operatörün seçimine dikkat ederek web tasarım editöründe değişkenler üzerinde mantıksal işlemleri hatasız yapar. 5. Web tasarım editöründe program akışına uygun ifadenin seçimine dikkat ederek akış denetimini hatasız gerçekleştirir. 6. Web tasarım editöründe program akışına uygun ifadenin seçimine dikkat ederek döngü denetimini hatasız gerçekleştirir. 7. Web tasarım editöründe değişkenlerin türüne uygun dizi tanımlama işlemlerini hatasız yapar. 8. Web tasarım editöründe değişkenlerin türüne uygun fonksiyon yapısını kullanarak programın okunabilirliğini arttırır. 9. Web tasarım editöründe yapılması istenen bağlantının türüne uygun pencere komutlarını hatasız oluşturur. 10. Web tasarım editöründe tasarım tutarlılığına dikkat ederek metin komutlarını hatasız oluşturur. 11. Web tasarım editöründe tasarım tutarlılığına dikkat ederek zaman komutlarını hatasız oluşturur. 12. Web tasarım editöründe işlem sırasına dikkat ederek matematik komutlarını hatasız oluşturur. 13. Web tasarım editöründe tarayıcı özelliklerine dikkat ederek tarayıcı komutlarını hatasız oluşturur. 14. Web tasarım editöründe işleme uygun Mouse olayını programlama yazım kurallarına dikkat ederek hatasız oluşturur. 15. Web tasarım editöründe doküman düzenleme işlemlerini hatasız yapar. 16. Web tasarım editöründe işleme uygun form nesnesini düzenleme işlemlerini hatasız yapar. 17. Web tasarım editöründe programlama yazım kurallarına uygun form komutlarını hatasız oluşturur. 53

MESLEĞİN ADI Web Programcısı İŞ Web sayfası hazırlama editörünü kullanmak İŞLEM NUMARASI 1 İŞLEMİN ADI Betik dili yardımıyla script oluşturmak Değişkenleri ve mantıksal işlem operatörlerini kullanmak Web Programcılığı laboratuarı, programlama dili yazılımı Program için uygun değişken tiplerini ve operatörleri seçip giriş-çıkış işlemlerini hatasız yapmak 1. HTML kodlama ile oluşturulan sayfa içinde script komutlarını tanımlamak 2. Değişken tanımlamak 3. Değişkenlere değer vermek 4. Mantıksal operatörleri işlem içinde kullanmak SÜRE: İşlemin Yapılma Süresi: 30 dakika 1. PROGRAMLAMA DİLİ 1.1. Betik Dili (JavaScript) 1.1.1. HTML e JavaScript Kodlarını Tanıtma 1.1.2. JavaScript Kodlarının HTML deki Konumu 1.2. Yazım Kuralları 1.2.1. İsimlendirme 1.2.2. Özel İşaret Gösterimi 1.2.3. Yorum Kodları 1.3. Değişkenler 1.3.1. Değişken Tanımlama ve Değişken Türleri 1.3.2. Değişkenlere Değer Verme 1.3.3. Aritmetik İşlem İşaretleri ve Öncelik Sıralaması 1.4. Mantıksal İşlemler 1.4.1. JavaScript'te "ve" Operatörü: "&&" 1.4.2. JavaScript'te "veya" Operatörü: " " 1.4.3. JavaScript'te "değil" Operatörü: "!" 1. Betik dili kodlarını kullanmak 2. Betik dili yazım kuralları uygun değişkenler tanımlamak 3. Değişken türlerine uygun tanımlamalar yapmak 4. Mantıksal işlem operatörlerini kullanmak 5. Aritmetik işlem önceliğine göre tanımlama yapmak 2. Planlı ve organize olmak 3. Tasarım tutarlılığına dikkat 4. Programlama yazım kurallarına dikkat 5. Problem çözümünde algoritma ve akış diyagramı kullanmak 6. Değişken türlerine dikkat 7. Aritmetik işlem önceliğine dikkat 8. İşleme uygun operatörü tercih İşlemi Öğrenme Süresi: 4 ders saati 54

MESLEĞİN ADI Web Programcısı İŞ Web sayfası hazırlama editörünü kullanmak İŞLEM NUMARASI 2 İŞLEMİN ADI Akış kontrol, dizi ve fonksiyon yapılarını kullanmak Betik dili yardımıyla script oluşturmak Web Programcılığı laboratuarı, programlama dili yazılımı İşlem için en uygun kontrol deyimlerini kullanmak 1. Akış denetimini gerçekleştirmek 2. Döngü denetimini gerçekleştirmek 3. Dizi işlemlerini yapmak 4. Fonksiyon işlemlerini yapmak 2. KODLAMA YAPISI 2.1. Akış Denetimi 2.1.1. "if... else..." Koşul Deyimi 2.1.2. Koşul İfadeleri 2.1.3. "switch" Koşul Deyimi 2.2. Döngü Denetimi 2.2.1. "while" Döngü Deyimi 2.2.2. "do... while" Döngü Deyimi 2.2.3. "for" Döngüsü 2.3. Diziler 2.3.1. Dizi Tanımlama 2.3.2. Çok Boyutlu Diziler 2.3.3. Diziler Üzerinde İşlemler 2.4. Fonksiyonlar 2.4.1. Fonksiyon Yapısı 2.4.2. Argümansız Fonksiyonlar 2.4.3. Argümanlı Fonksiyonlar 2.4.4. Değer Atamalı Fonksiyonlar 1. Akış kontrolüne uygun deyim veya ifadeleri kullanmak 2. Döngü denetimine uygun deyimler kullanmak 3. Diziler tanımlamak 4. Fonksiyon yapısını kullanarak program okunabilirliğini arttırmak 2. Planlı ve organize olmak 3. Tasarım tutarlılığına dikkat 4. Problem çözümünde algoritma ve akış diyagramı kullanmak 5. Programlama yazım kurallarına uymak 6. Programa uygun akış denetimini seçmek 7. Programa uygun döngü denetimini seçmek 8. Programa uygun diziler oluşturmak 9. Kodların okunurluğuna dikkat 10. Gereksiz ayrıntılardan kaçınmak SÜRE: İşlemin Yapılma Süresi: 2 saat İşlemi Öğrenme Süresi: 12 ders saati 55

MESLEĞİN ADI Web Programcısı İŞ Web sayfası hazırlama editörünü kullanmak İŞLEM NUMARASI 3 İŞLEMİN ADI İhtiyaca uygun script komutlarını kullanmak Betik dili yardımıyla script oluşturmak Web Programcılığı laboratuarı, programlama dili yazılımı İşlem için en uygun script komutunu kullanmak 1. Bağlantılar için pencere komutlarını kullanmak 2. Bağlantılar için sayfa komutlarını yapmak 3. Metin komutlarını kullanmak 4. Zaman komutlarını kullanmak 5. Matematik komutlarını kullanmak 6. Tarayıcı komutlarını kullanmak SÜRE: İşlemin Yapılma Süresi: 1 saat 3. KOMUTLAR 3.1. Pencere Komutları 3.1.1. Kutular 3.1.2. Pencere İşlemleri 3.1.3. Yeni Pencere Açma 3.1.4. Çok Sayıda Pencere Açma 3.1.5. Pencere Kapatma 3.1.6. Pencere Kutusu 3.1.7. Sayfa Yönlendirme 3.1.8. Sayfayı Yeniden Yükleme 3.2. Metin Komutları 3.3. Zaman Komutları 3.4. Matematik Komutları 3.5. Tarayıcı Komutları 1. Pencere komutlarını kullanarak farklı açılış uygulamaları oluşturmak 2. Sayfa komutlarını kullanarak farklı bağlantı uygulamaları yapmak 3. Metin komutlarının kullanım işlemlerini yapmak 4. Zaman komutlarının kullanım işlemlerini yapmak 5. Matematik komutlarının kullanım işlemlerini yapmak 6. Tarayıcı komutlarının kullanımını yapmak 2. Planlı ve organize olmak 3. Tasarım tutarlılığına dikkat 4. Programlama yazım kurallarına uymak 5. Pencere komutlarının özelliklerine uygun olarak kullanmak 6. Komutların kullanılması işlemlerinde dikkatli olmak İşlemi Öğrenme Süresi: 8 ders saati 56

MESLEĞİN ADI Web Programcısı İŞ Web sayfası hazırlama editörünü kullanmak İŞLEM NUMARASI 4 İŞLEMİN ADI Olay ve nesne işlemlerini yapmak Betik dili yardımıyla script oluşturmak Web Programcılığı laboratuarı, programlama dili yazılımı Sayfanın içeriğine göre olay, nesne ve form nesnelerini etkili ve verimli şekilde kullanmak 1. İstenilen amaca uygun mouse olaylarını tanımlamak 2. Doküman nesnesi oluşturmak 3. Doküman nesnelerini düzenlemek 4. Form komutlarını kullanmak 5. Form nesneleri oluşturmak SÜRE: İşlemin Yapılma Süresi: 1 saat 4. OLAYLAR VE NESNELER 4.1. Olaylar 4.1.1. "onclick" Olayı 4.1.2. "ondblclick" Olayı 4.1.3. "onmouseover" Olayı 4.1.4. "onmouseout" Olayı 4.1.5. Sağ Tıklama, Sol Tıklama 4.1.6. İmlecin Koordinatları 4.1.7. Tuş Fare Kombinasyonları 4.2. Nesneler 4.2.1. Doküman Nesnesi 4.2.1.1. Doküman Nesnesinin İçeriği 4.2.1.2. Doküman Başlığını 4.2.1.3. Doküman Nesnesinin Türü 4.2.1.4. Arka Plan Rengi 4.2.2. Form Nesnesi 4.2.2.1. Form Komutları 4.2.2.2. Bilgi Giriş Elemanları 4.2.2.3. Seçenek Kutusu 1. Fare (Mouse) olay tanımlama işlemlerini yapmak 2. Doküman nesneleri için düzenleme işlemlerini yapmak 3. Amaca uygun form nesnesini kullanmak 2. Planlı ve organize olmak 3. Tasarım tutarlılığına dikkat 4. Programlama yazım kurallarına uymak 5. İhtiyaca uygun Mouse olayının seçmek 6. Doküman düzenleme işlemlerini hatasız yapmak 7. İhtiyaca uygun form nesnesini seçmek İşlemi Öğrenme Süresi: 8 ders saati 57

MODÜL BİLGİ SAYFASI ALAN MESLEK/DAL DERS MODÜL KODU : BİLİŞİM TEKNOLOJİLERİ : WEB PROGRAMCILIĞI : WEB TASARIMI VE PROGRAMLAMA : ETKİLEŞİMLİ WEB UYGULAMALARINA GİRİŞ : 482BK0142 SÜRE : 40/32 ÖN KOŞUL AÇIKLAMA ÖĞRETİM YÖNTEM VE TEKNİKLERİ GENEL AMAÇ : Betik Dili (Javascript) modülünü tamamlamış olmak : Uygulamalı olarak laboratuar ortamında işlenmelidir. : Öğretim yöntem ve teknikleri olarak, anlatım, göstererek yaptırma, problem çözme, soru-cevap, grup çalışması, uygulamalı çalışma, araştırma ve bireysel öğretim yöntem ve teknikleri uygulanabilir. : Öğrenci bu modül ile gerekli ortam sağlandığında; etkileşimli web uygulamaları için gerekli olan yazılımların kurulumunu yapabilecektir. AMAÇLAR : İÇERİK : 1..Net platformlar için gerekli olan yazılımı kurabilecek ve arayüzü etkin bir şekilde kullanabilecektir. 2. Bir web sayfasını izleyerek web sunucu denetimlerini sınıflandırabilecektir. 3..Net platformları için gerekli olan yazılımda web sitesi için temel işlemleri yapabilecektir. 4. Uygulama dosyalarını ihtiyaca göre düzenleyebilecektir. 1. VİSUAL STUDİO 2008 1.1. Kullanıcı Arabirimi 1.1.1. Solution Explorer 1.1.2. Document Windows 1.1.3. ToolBox 1.1.4. Eror List and Task List 1.1.5. Server Explorer 2. ASP.NET 2.0 PROGRAMLAMA MODELİNE GİRİŞ 2.1. ASP.NET 2.0 ile Bir Web Sayfasını İzleme 2.1.1. Denetim Hiyerarşisi 58

2.1.2. Olayları İşleme 2.1.3. Bir Web Sayfanın Yaşam Döngüsü 2.2. ASP.NET Sunucu Denetimlerinde Sınıflandırma 2.2.1. Web Özel Denetimleri (Web Custom Controls) 2.2.2. Web kullanıcı denetimleri (Web User Controls) 2.2.3. HTML sunucu denetimleri (HTML Server Controls) 2.2.4. Web sunucu denetimleri (Web Server Controls) 3. WEB SİTE İŞLEMLERİ 3.1. Yeni Bir Web Sitesi Oluşturma 3.1.1. Dosya Sisteminde Bir Web Sitesi Oluşturma 3.1.2. Yerel Bir IIS Web Sitesi Oluşturma 3.1.3. Uzak IIS Web Sitesi Oluşturma 3.1.4. FTP Erişimli Web Sitesi Oluşturma 3.2. Kayıtlı Bir Web Sitesini Açma 3.3. Web Sitesini Kopyalama 4. UYGULAMA DOSYALARI 4.1. Global.asax 4.2. Web.config ÖLÇME VE DEĞERLENDİRME : Öğrenci, aşağıdaki performans ölçütlerini yerine getirecektir. 1. Program yönergelerine dikkat ederek web programlama yazılımının kurulumunu hatasız yapar. 2. Kolay erişilebilirliğe dikkat ederek kullanıcı arabiriminde pencerelerin yerleşimini hatasız yapar. 3. Dikkatli ve detaylara özen göstererek web programlama yazılımınde web sayfasını izleme işlemlerini hatasız yapar. 4. Tasarım tutarlığına dikkat ederek web programlama yazılımının sunucu denetimlerini hatasız sınıflandırır. 5. Web sitesinin özelliğine/türüne dikkat ederek web programlama yazılımında yeni bir web sitesi oluşturma işlemlerini hatasız yapar. 6. Web sitesinin özelliğine/türüne dikkat ederek web programlama yazılımında kayıtlı bir web sitesini hatasız çalıştırır. 7. Web sitesinin özelliğine/türüne dikkat ederek web programlama yazılımında bir web sitesini kopyalama işlemlerini hatasız yapar. 8. Tasarım tutarlığına dikkat ederek web programlama yazılımında global.asax ve web.config dosyalarının düzenleme işlemlerini hatasız yapar. 59

MESLEĞİN ADI Web Programcısı İŞ İŞLEM NUMARASI 1 İŞLEMİN ADI Programlama için gerekli yazılımı kullanmak NET yazılımını kullanarak web programları hazırlamak Web programlama için gerekli yazılımın kullanıcı arabirimini kullanmak Web programlama yazılımlarını çalıştırabilecek yeterlikte bilgisayar, internet bağlantısı İçeriğe uygun site tanımlamasını.net yazılımıyla yapmak 1. Web sunucusunu kurmak 2..NET yazılımını kurmak 3. Solution Explorer pernceresini kullanmak 4. Document Windows pernceresini kullanmak 5. ToolBox ı kullanmak 6. Eror List and Task List pernceresini kullanmak 7. Server Explorer pernceresini kullanmak 1. VİSUAL STUDİO 2008 1.1. Kullanıcı Arabirimi 1.1.1. Solution Explorer 1.1.2. Document Windows 1.1.3. ToolBox 1.1.4. Eror List and Task List 1.1.5. Server Explorer 1..NET yazılımının kurulum işlemlerini yapmak 2. Kullanıcı arabirimlerini kullanmak 2. Planlı ve organize olmak 3. Tasarım tutarlılığına dikkat 4..NET yazılımını hatasız kurmak 5. Kullanıcı arabirimlerinin kullanımda dikkatli olmak SÜRE: İşlemin Yapılma Süresi: 2 saat İşlemi Öğrenme Süresi: 8 ders saati 60

MESLEĞİN ADI Web Programcısı İŞ.NET yazılımını kullanarak web programları hazırlamak İŞLEM NUMARASI 2 İŞLEMİN ADI Bir web sayfası işleyişini izlemek. Programlama için gerekli yazılımı kullanmak Web programlama yazılımlarını çalıştırabilecek yeterlikte bilgisayar, internet bağlantısı 1. Bir web sayfasını izlemek 2. Web özel denetimleri oluşturmak 3. Web kullanıcı denetimleri oluşturmak 4. Html sunucu denetimleri oluşturmak 5. Web sunucu denetimleri oluşturmak SÜRE: İşlemin Yapılma Süresi: 4 saat 2. ASP.NET 2.0 PROGRAMLAMA MODELİNE GİRİŞ 2.1. ASP.NET 2.0 ile Bir Web Sayfasını İzleme 2.1.1. Denetim Hiyerarşisi 2.1.2. Olayları İşleme 2.1.3. Bir Web Sayfanın Yaşam Döngüsü 2.2. ASP.NET Sunucu Denetimlerinde Sınıflandırma 2.2.1. Web Özel Denetimleri (Web Custom Controls) 2.2.2. Web kullanıcı denetimleri (Web User Controls) 2.2.3. HTML sunucu denetimleri (HTML Server Controls) 2.2.4. Web sunucu denetimleri (Web Server Controls) 1. Web sayfası işleyişini izlemek 2. Asp.net sunucu denetimlerini sınıflandırma işlemlerini yapmak 2. Planlı ve organize olmak 3. Tasarım tutarlılığına dikkat 4. Web sayfası işleyişini izle işlemlerinde dikkatli olmak 5. Asp.net sunucu denetimlerini sınıflandırma işlemlerini hatasız yapmak İşlemi Öğrenme Süresi: 8 ders saati 61

MESLEĞİN ADI Web Programcısı İŞ İŞLEM NUMARASI 2 İŞLEMİN ADI Programlama için gerekli yazılımı kullanmak.net yazılımını kullanarak web programları hazırlamak Web programlama yazılımında site işlemlerini yapmak. Web programlama yazılımlarını çalıştırabilecek yeterlikte bilgisayar, internet bağlantısı 1. Site oluşturmak 2. Kayıtlı siteyi açmak 3. Siteyi kopyalamak 3. WEB SİTE İŞLEMLERİ 3.1. Yeni Bir Web Sitesi Oluşturma 3.1.1. Dosya Sisteminde Bir Web Sitesi Oluşturma 3.1.2. Yerel Bir IIS Web Sitesi Oluşturma 3.1.3. Uzak IIS Web Sitesi Oluşturma 3.1.4. FTP Erişimli Web Sitesi Oluşturma 3.2. Kayıtlı Bir Web Sitesini Açma 3.3. Web Sitesini Kopyalama 1. Web sitesi oluşturma işlemleri yapmak 2. Kayıtlı web sitesi ile çalışmak 2. Planlı ve organize olmak 3. Tasarım tutarlılığına dikkat 4. Web sitesi oluşturma işlemlerini hatasız yapmak 5. Kayıtlı web sitesinin özelliklerine dikkat SÜRE: İşlemin Yapılma Süresi: 4 saat İşlemi Öğrenme Süresi: 8 ders saati 62

MESLEĞİN ADI Web Programcısı İŞ İŞLEM NUMARASI 2 İŞLEMİN ADI Programlama için gerekli yazılımı kullanmak.net yazılımını kullanarak web programları hazırlamak Web yazılım programında uygulama dosyalarını kullanmak. Web programlama yazılımlarını çalıştırabilecek yeterlikte bilgisayar, internet bağlantısı 1. Global.asax dosyasını düzenlemek 2. Web.config dosyasını düzenlemek 4. UYGULAMA DOSYALARI 4.1. Global.asax 4.2. Web.config 1. Global.asax dosyasının düzenlenmesi işlemlerini yapmak 2. Web.config dosyasının düzenlenmesi işlemlerini yapmak 2. Planlı ve organize olmak 3. Tasarım tutarlılığına dikkat 4. Global.asax dosyasının düzenlenmesi işlemlerini hatasız yapmak 5. Web.config dosyasının düzenlenmesi işlemlerini hatasız yapmak SÜRE: İşlemin Yapılma Süresi: 4 saat İşlemi Öğrenme Süresi: 8 ders saati 63

MODÜL BİLGİ SAYFASI ALAN MESLEK/DAL DERS : BİLİŞİM TEKNOLOJİLERİ : WEB PROGRAMCILIĞI : WEB TASARIMI VE PROGRAMLAMA MODÜL :ETKİLEŞİMLİ WEB UYGULAMALARI İÇİN TEMEL KOMUTLAR KODU : 482BK0141 SÜRE : 40/32 ÖN KOŞUL : Etkileşimli Web Uygulamalarına Giriş modülünü tamamlamış olmak AÇIKLAMA ÖĞRETİM YÖNTEM VE TEKNİKLERİ GENEL AMAÇ : Uygulamalı olarak laboratuar ortamında işlenmelidir. : Öğretim yöntem ve teknikleri olarak, anlatım, göstererek yaptırma, problem çözme, soru-cevap, grup çalışması, uygulamalı çalışma, araştırma ve bireysel öğretim yöntem ve teknikleri uygulanabilir. : Öğrenci bu modül ile gerekli ortam sağlandığında; Programlama dilinin temel komutları ile web sayfası hazırlayabilecektir. AMAÇLAR : İÇERİK : 1. Bir web sayfası oluşturabilecek ve üzerinde değişiklikler yapabilecektir. 2. Bir web sayfasında kaynak kod kısmında çalışabilecektir. 3. Web kullanıcı denetimleri oluşturabilecek ve bunları başka sayfalara ekleyebilecektir. 1. WEB SAYFALARINI OLUŞTURMAK VE DEĞİŞTİRMEK 1.1. Görünüm Modları 1.2. Denetimler 1.2.1. Toolbox Kullanarak Denetim Ekleme 1.2.2. Menü Çubuğu Kullanarak Tablolar ve Katmanlar Ekleme 1.2.3. Solution Explorer Kullanarak Denetim Ekleme 1.3. Denetim Özellikleri 1.3.1. Properties Penceresi 1.3.2. Akıllı Etiketler 1.3.3. Format Menüsü 1.3.4. Araç Çubukları 1.4. Validation Kontrolleri 64

1.4.1. RequiredFieldValidator 1.4.2. RangeValidator 1.4.3. CompareValidator 1.4.4. RegularExpressionValidator 1.4.5. CustomValidator 1.4.6. ValidationSummary 1.5. Köprüler 2. KAYNAK KOD İLE ÇALIŞMAK 2.1. Metin Düzenleyicisi 2.1.1. Ana Hat Görünümü 2.1.2. Bölmeli Görünüm 2.2. Kaynak Kod Derleme 2.3. Hataları Düzeltme 3. WEB KULLANICI DENETİMLERİNİ OLUŞTURMAK VE KULLANMAK 3.1. Kullanıcı Denetimleri 3.1.1. Kullanıcı Denetimi Oluşturma 3.1.2. Kullanıcı Denetimi Tasarlama 3.1.3. Web Kullanıcı Denetimi Ekleme ÖLÇME VE DEĞERLENDİRME : Öğrenci, aşağıdaki performans ölçütlerini yerine getirecektir. 1. Kullanım kolaylığına ve erişilebilirliğe dikkat ederek web sayfası görünüm modlarından uygun olanını hatasız ayarlar. 2. İşleme uygun denetimi ilgili araç çubuğunu kullanarak hatasız olarak sayfaya ekler. 3. Tasarım tutarlığına dikkat ederek web sayfası üzerindeki denetiminin özelliklerini web programlama yazılımının hatasız düzenler. 4. Detaylara özen göstererek web sayfasının denetim işlemlerini kontrolleri kullanarak web programlama yazılımında hatasız olarak yapar. 5. Web programlama yazılımında sayfalar arası bağlantıları planlı ve organize olarak hatasız oluşturur. 6. Web programlama yazılımında kullanım kolaylığına ve erişilebilirliğe dikkat ederek kod yazma görünümünü hatasız ayarlar. 7. Web programlama yazılımında program yazım kurallarına dikkat ederek kaynak kodları hatasız derler. 8. Web programlama yazılımında program yazım kurallarına dikkat ederek kaynak kodlarını hatasız yayınlar. 9. Tasarım tutarlılığına dikkat ederek web programlama yazılımında web kullanıcı denetimlerini hatasız olarak tasarlar. 10. Program yazım kurallarına dikkat ederek web programlama yazılımında sayfalara web kullanıcı denetimlerini hatasız olarak ekler. 65

MESLEĞİN ADI Web Programcısı İŞ.NET yazılımını kullanarak web programları hazırlamak İŞLEM NUMARASI 1 İŞLEMİN ADI Web sayfaları oluşturmak Web sitesi yapısını oluşturmak Web programlama yazılımlarını çalıştırabilecek yeterlikte bilgisayar, internet bağlantısı 1. Web sayfası hazırlarken görünüm modlarını ayarlamak 2. Web sayfası üzerine kontroller eklemek 3. Kontrollerin özelliklerini ayarlamak 4. Giriş kontrollerini doğrulama kontrolleri ile ilişkilendirmek 5. Sayfalar arası bağlantı oluşturmak SÜRE: İşlemin Yapılma Süresi: 2 saat 1. WEB SAYFALARINI OLUŞTURMAK VE DEĞİŞTİRMEK 1.1. Görünüm Modları 1.2. Denetimler 1.2.1. Toolbox Kullanarak Denetim Ekleme 1.2.2. Menü Çubuğu Kullanarak Tablolar ve Katmanlar Ekleme 1.2.3. Solution Explorer Kullanarak Denetim Ekleme 1.3. Denetim Özellikleri 1.3.1. Properties Penceresi 1.3.2. Akıllı Etiketler 1.3.3. Format Menüsü 1.3.4. Araç Çubukları 1.4. Validation Kontrolleri 1.4.1. RequiredFieldValidator 1.4.2. RangeValidator 1.4.3. CompareValidator 1.4.4. RegularExpressionValidator 1.4.5. CustomValidator 1.4.6. ValidationSummar 1.5. Köprüler 1. Tasarımı yapılan web sayfasının görünüm modlarını ayarlamak 2. Denetim ekleme işlemlerini yapmak 3. Denetim özelliklerini ayarlamak 4. Validation kontrolleri yapak 5. Bağlantı ekleme ve düzenleme işlemlerini yapmak 2. Planlı ve organize olmak 3. Tasarım tutarlılığına dikkat 4. Sayfaya uygun görünüm modunu seçmek 5. Denetim işlemlerini hatasız yapmak 6. Sayfalar arası bağlantıları hatasız yapmak İşlemi Öğrenme Süresi: 12 ders saati 66

MESLEĞİN ADI Web Programcısı İŞ.NET yazılımını kullanarak web programları hazırlamak İŞLEM NUMARASI 2 İŞLEMİN ADI Kaynak kodlarla çalışmak Web sitesi yapısını oluşturmak Web programlama yazılımlarını çalıştırabilecek yeterlikte bilgisayar, internet bağlantısı 1. Ana hat görünümünde kod yazmak 2. Bölmeli kullanımda kod yazmak 3. Program kodlarını çalışır hale getirmek 4. Program kodlarını kayd 2. KAYNAK KOD İLE ÇALIŞMAK 2.1. Metin Düzenleyicisi 2.1.1. Ana Hat Görünümü 2.1.2. Bölmeli Görünüm 2.2. Kaynak Kod Derleme 2.3. Hataları Düzeltme 1. Web sayfası kaynak kodlarının yazım işlemlerini yapmak 2. Web sayfasını kaynak kodları derlemek işlemlerini yapmak 3. Derleme sonucunda oluşan hataları düzeltmek 2. Planlı ve organize olmak 3. Tasarım tutarlılığına dikkat 4. Program yazım kurallarına dikkat 5. Kod yazım işlemlerinde dikkatli olmak 6. Hatasız kod yazmak 7. Derleme işlemi sonucunda programın hatasız olduğundan emin olmak SÜRE: İşlemin Yapılma Süresi: 2 saat İşlemi Öğrenme Süresi: 10 ders saati 67

MESLEĞİN ADI Web Programcısı İŞ.NET yazılımını kullanarak web programları hazırlamak İŞLEM NUMARASI 3 İŞLEMİN ADI Web kullanıcı denetimleri oluşturmak Web sitesi yapısını oluşturmak Web programlama yazılımlarını çalıştırabilecek yeterlikte bilgisayar, internet bağlantısı 1. Web kullanıcı denetimleri oluşturmak 2. Web kullanıcı denetimlerini sayfa içerisinde kullanmak 3. WEB KULLANICI DENETİMLERİNİ OLUŞTURMAK VE KULLANMAK 3.1. Kullanıcı Denetimleri 3.1.1. Kullanıcı Denetimi Oluşturma 3.1.2. Kullanıcı Denetimi Tasarlama 3.1.3. Web Kullanıcı Denetimi Ekleme 1. Web kullanıcı denetimlerini oluşturma ve tasarlama işlemlerini yapmak 2. Web kullanıcı denetimi ekleme işlemlerini yapmak 2. Planlı ve organize olmak 3. Tasarım tutarlılığına dikkat 4. Program yazım kurallarına dikkat 5. Web kullanıcı denetimlerini oluşturma ve tasarlama işlemlerini hatasız yapmak 6. Web kullanıcı denetimi ekleme işlemlerini hatasız yapmak SÜRE: İşlemin Yapılma Süresi: 2 saat İşlemi Öğrenme Süresi: 10 ders saati 68

MODÜL BİLGİ SAYFASI ALAN MESLEK/DAL DERS MODÜL KODU : BİLİŞİM TEKNOLOJİLERİ : WEB PROGRAMCILIĞI : WEB TASARIMI VE PROGRAMLAMA :ETKİLEŞİMLİ WEB UYGULAMALARINDA WEB FORMLARI : 482BK0144 SÜRE : 40/32 ÖN KOŞUL AÇIKLAMA ÖĞRETİM YÖNTEM VE TEKNİKLERİ GENEL AMAÇ : Etkileşimli Web Uygulamaları İçin Temel Komutlar modülünü tamamlamış olmak : Uygulamalı olarak laboratuar ortamında işlenmelidir. : Öğretim yöntem ve teknikleri olarak, anlatım, göstererek yaptırma, problem çözme, soru-cevap, grup çalışması, uygulamalı çalışma, araştırma ve bireysel öğretim yöntem ve teknikleri uygulanabilir. : Öğrenci bu modül ile gerekli ortam sağlandığında; web form uygulamaları yapabilecektir. AMAÇLAR : İÇERİK : 1. Bir tane MasterPage.master sayfası oluşturabilecek ve diğer sayfalar ile bağlantı kurabilecektir. 2. Stil sayfaları oluşturabilecek ve web sayfalarını bu dosya üzerinden biçimlendirebilecektir. 3. Web site için tema oluşturabilecek ve siteye uygulayabilecektir. 4. Site haritası ve web sayfalarına menü ekleyerek site kullanımını kolaylaştırabilecektir. 5. Site ve web sayfaları üzerinde durum yönetimi sağlayabilecektir. 1. ANA SAYFALARI KULLANARAK SAYFALARI DÜZNELEME 1.1. Anasayfa (MasterPage.Master) Oluşturma 1.2. İçerik Sayfalarına Ana Sayfa Ekleme 2. GEÇİŞLİ STİL SAYFALARI KULLANMA 2.1. Stil Sayfaları 2.1.1. Sayfa Öğelerini Ayrı Ayrı Biçimlendirme 2.1.2. Farklı Sayfalarda Adlandırılmış Stiller Kullanma 2.1.2.1. Yeni Bir Stil Sayfası Dosyası Oluşturma 69

2.1.2.2. Stil Sayfası Kuralları Oluşturma 2.1.2.3. Stil Sayfası Kurallarına Özellik Ekleme 2.1.2.4. Web Sayfasında Paylaşılmış Stiller Kullanma 3. ASP.NET TEMALARIYLA GÖRÜNÜŞÜ DÜZENLEME 3.1. ASP.NET Temaları 3.1.1. Yeni Tema Oluşturma 3.1.2. Dış Görünüm Ekleme 3.1.3. CSS Ekleme 3.2. Tema Uygulamaları 3.2.1. Sayfaya Uygulama 3.2.2. Stillere Uygulama 4. SİTEDEKİ SAYFALARI OTOMATİK OLARAK BAĞLAMAK 4.1. Site Haritası 4.2. Menüler 4.2.1. Açılır ve Efektli Menü 4.2.2. Ağaç Görünümlü Menü 4.3. Kırıntı Oluşturma 5. ASP.NET DURUM YÖNETİCİSİ 5.1. Durum Yönetim Nesneleri 5.1.1. Request 5.1.2. View State 5.1.3. Cookies 5.1.4. Session State 5.1.5. Application State ÖLÇME VE DEĞERLENDİRME : Öğrenci, aşağıdaki performans ölçütlerini yerine getirecektir. 1. Program yazım kurallarına ve tasarım tutarlılığına dikkat ederek web programlama yazılımında projeye ait ana sayfayı hatasız oluşturur. 2. Tasarım tutarlılığına dikkat ederek web programlama yazılımında projeye ait içerik sayfalarına ana sayfa ekleme işlemlerini hatasız yapar. 3. Tasarım tutarlılığına dikkat ederek web programlama yazılımında sayfalara ait sistematik biçimlendirme dosyalarını hatasız oluşturur. 4. Tasarım tutarlılığına dikkat ederek web programlama yazılımında farklı içerik sayfalarını biçimlendirme dosyalarını kullanarak hatasız tasarlar. 5. Tasarım tutarlılığına dikkat ederek web programlama yazılımında Asp.net temalarını hatasız oluşturur. 6. Tasarım tutarlılığına dikkat ederek web programlama yazılımında tema klasörüne.skin ve.css dosyalarını hatasız ekler. 7. Planlı ve organize olmaya dikkat ederek web programlama yazılımında site haritası oluşturma işlemlerini hatasız yapar. 8. Tasarım tutarlığına ve kullanışlılığa dikkat ederek web programlama yazılımında işleme uygun menü çeşidini hatasız oluşturur. 9. Kullanım kolaylığına dikkat ederek web programlama yazılımında kırıntı oluşturma işlemlerini hatasız yapar. 10. Bilgi güvenliğine dikkat ederek web programlama yazılımında ihtiyaca uygun durum yönetimi nesnelerini hatasız oluşturur. 70

MESLEĞİN ADI Web Programcısı İŞ.NET yazılımını kullanarak web programları hazırlamak İŞLEM NUMARASI 1 İŞLEMİN ADI Ana saylar kullanarak sayfaları düzenlemek. Web sayfalarını biçimlendirmek Web programlama yazılımlarını çalıştırabilecek yeterlikte bilgisayar, internet bağlantısı 1. MasterPage.master sayfası oluşturmak 2. Web sayfalarını MasterPage.master sayfası içine yerleştirmek 1. ANA SAYFALARI KULLANARAK SAYFALARI DÜZNELEME 1.1. Anasayfa (MasterPage.Master) Oluşturma 1.2. İçerik Sayfalarına Ana Sayfa Ekleme 1. Ana sayfa oluşturma işlemlerini yapmak 2. İçerik sayfalarına ana sayfa ekleme işlemlerini yapmak 2. Planlı ve organize olmak 3. Tasarım tutarlılığına dikkat 4. Program yazım kurallarına dikkat 5. Ana sayfa oluşturma işlemlerinde dikkatli olmak 6. İçerik sayfalarına ana sayfa ekleme işlemlerini hatasız yapmak SÜRE: İşlemin Yapılma Süresi: 4 saat İşlemi Öğrenme Süresi: 6 ders saati 71

MESLEĞİN ADI Web Programcısı İŞ.NET yazılımını kullanarak web programları hazırlamak İŞLEM NUMARASI 2 İŞLEMİN ADI Stil sayfaları oluşturmak Web form uygulamaları yapmak Web programlama yazılımlarını çalıştırabilecek yeterlikte bilgisayar, internet bağlantısı 1. Sayfa öğelerine ayrı ayrı biçimlendirme uygulamak 2. Yeni bir biçimlendirme dosyası oluşturmak 3. Biçimlendirme dosyasında seçiciler oluşturmak 4. Biçimlendirme dosyasındaki seçicileri tüm sayfalara uygulamak SÜRE: İşlemin Yapılma Süresi: 4 saat 2. GEÇİŞLİ STİL SAYFALARI KULLANMA 2.1. Stil Sayfaları 2.1.1. Sayfa Öğelerini Ayrı Ayrı Biçimlendirme 2.1.2. Farklı Sayfalarda Adlandırılmış Stiller Kullanma 2.1.2.1. Yeni Bir Stil Sayfası Dosyası Oluşturma 2.1.2.2. Stil Sayfası Kuralları Oluşturma 2.1.2.3. Stil Sayfası Kurallarına Özellik Ekleme 2.1.2.4. Web Sayfasında Paylaşılmış Stiller Kullanma 1. Sistematik biçimlendirme dosyaları oluşturmak 2. Web sayfalarında biçimlendirme dosyaları kullanarak düzenli sayfalar oluşturmak 2. Planlı ve organize olmak 3. Tasarım tutarlılığına dikkat 4. Sistematik biçimlendirme dosyaları oluşturulurken dikkatli olmak İşlemi Öğrenme Süresi: 6 ders saati 72

MESLEĞİN ADI Web Programcısı İŞ İŞLEM NUMARASI 3 İŞLEMİN ADI Temalar oluşturmak.net yazılımını kullanarak web programları hazırlamak Web sayfalarını biçimlendirmek Web programlama yazılımlarını çalıştırabilecek yeterlikte bilgisayar, internet bağlantısı 1. Web sayfaları için App_Themes klasörü eklemek 2. Tema klasörüne.skin dosyası eklemek 3. Tema klasörüne.css dosyası eklemek 3. ASP.NET TEMALARIYLA GÖRÜNÜŞÜ DÜZENLEME 3.1. ASP.NET Temaları 3.1.1. Yeni Tema Oluşturma 3.1.2. Dış Görünüm Ekleme 3.1.3. CSS Ekleme 3.2. Tema Uygulamaları 3.2.1. Sayfaya Uygulama 3.2.2. Stillere Uygulama 1. Web sayfaları için App_Themes klasörü ekleme işlemlerini yapmak 2. Tema klasörüne.skin ve.css dosyalarını eklemesi işlemleri yapmak 2. Planlı ve organize olmak 3. Tasarım tutarlılığına dikkat 4. Web sayfaları için App_Themes klasörü ekleme işlemlerini hatasız yapmak 5. Tema klasörüne.skin ve.css dosyalarını eklemesi işlemleri hatasız yapmak SÜRE: İşlemin Yapılma Süresi: 4 saat İşlemi Öğrenme Süresi: 6 ders saati 73

MESLEĞİN ADI Web Programcısı İŞ.NET yazılımını kullanarak web programları hazırlamak İŞLEM NUMARASI 4 İŞLEMİN ADI Sayfalar arası bağlantılar oluşturmak. Web sayfalarını biçimlendirmek Web programlama yazılımlarını çalıştırabilecek yeterlikte bilgisayar, internet bağlantısı 1. Site için site haritası eklemek 2. Web sayfalarına açılır menü eklemek 3. Web sayfalarına efektli menü eklemek 4. Web sayfalarına ağaç görünümlü menüler eklemek 5. Web sayfalarına kırıntı eklemek 4. SİTEDEKİ SAYFALARI OTOMATİK OLARAK BAĞLAMAK 4.1. Site Haritası 4.2. Menüler 4.2.1. Açılır ve Efektli Menü 4.2.2. Ağaç Görünümlü Menü 4.2.3. Kırıntı Oluşturma 1. Site haritası oluşturma ve ekleme işlemleri yapmak 2. Web sayfasına menüler oluşturmak 3. Web sayfasında kırıntı oluşturmak 2. Planlı ve organize olmak 3. Tasarım tutarlılığına dikkat 4. Görselliği artıracak menüler hazırlamak 5. Kullanımı kolaylaştıracak kırıntı eklemek SÜRE: İşlemin Yapılma Süresi: 4 saat İşlemi Öğrenme Süresi: 6 ders saati 74

MESLEĞİN ADI Web Programcısı İŞ.NET yazılımını kullanarak web programları hazırlamak İŞLEM NUMARASI 5 İŞLEMİN ADI Durum yönetimini sağlamak Web sayfalarını biçimlendirmek Web programlama yazılımlarını çalıştırabilecek yeterlikte bilgisayar, internet bağlantısı 1. Request nesnesini kullanmak 2. View nesnesi ile durum yönetimi sağlamak 3. Cookies nesnesi ile bilgileri tutmak 4. Session nesnesi ile kullanıcı bilgilerini sayfalar arasında taşımak 5. Application nesnesi ile durum yönetimi sağlamak 5. ASP.NET DURUM YÖNETİCİSİ 5.1. Durum Yönetim Nesneleri 5.1.1. Request 5.1.2. View State 5.1.3. Cookies 5.1.4. Session State 5.1.5. Application State 1. Durum yönetimi nesnelerinin kullanımı ile ilgili işlemleri yapmak 2. Planlı ve organize olmak 3. Tasarım tutarlılığına dikkat 4. Durum yönetimi nesnelerin ihtiyaca uygun olarak kullanmak 5. Session nesnesi ile kullanıcı bilgilerini sayfalar arasında hatasız taşımak SÜRE: İşlemin Yapılma Süresi: 4 saat İşlemi Öğrenme Süresi: 8 ders saati 75

MODÜL BİLGİ SAYFASI ALAN MESLEK/DAL DERS MODÜL KODU : BİLİŞİM TEKNOLOJİLERİ : WEB PROGRAMCILIĞI : WEB TASARIMI VE PROGRAMLAMA :ETKİLEŞİMLİ WEB UYGULAMALARINDA VERİ TABANI İŞLEMLERİ : 482BK0143 SÜRE : 40/32 ÖN KOŞUL AÇIKLAMA ÖĞRETİM YÖNTEM VE TEKNİKLERİ GENEL AMAÇ : Etkileşimli Web Uygulamalarında Web Formları modülünü tamamlamış olmak : Uygulamalı olarak laboratuar ortamında işlenmelidir. : Öğretim yöntem ve teknikleri olarak, anlatım, göstererek yaptırma, problem çözme, soru-cevap, grup çalışması, uygulamalı çalışma, araştırma ve bireysel öğretim yöntem ve teknikleri uygulanabilir. : Öğrenci bu modül ile gerekli ortam sağlandığında; veri tabanı işlemlerini yapabilecektir. AMAÇLAR : İÇERİK : 1. Web site için gerekli Veri Tabanını oluşturabilecek ve bağlantı kurabilecektir. 2. Veri Tabanında kayıtlı bilgileri web sayfası içinde listeleyebilecektir. 3. Veri Tabanına yeni kayıt ekleyebilecek ve kayıtlı bilgileri güncelleyebilecektir. 1. VERİTABANLARI OLUŞTURMA VE ONLARI BAĞLAMA 1.1. Veri Erişimi 1.1.1. Yeni Veri Tabanı Oluşturma 1.1.2. Veri Tabanına Bağlanma 1.2. Tablo İşlemleri 1.2.1. Tablo Verilerini Görüntüleme 1.2.2. Tablo Verilerini Güncelleme 2. VERİ TABANI BİLGİLERİNİ GÖRÜNTÜLEME 2.1. Veri kaynakları 2.1.1. Veri kaynaklarını yapılandırma 76

2.1.2. Veri kaynaklarını görüntüleme 2.2. Gridview denetimi 3. VERİ TABANI BİLGİLERİNİ YÖNETME 3.1. Gridview denetimi 3.2. Detailsview denetimi ÖLÇME VE DEĞERLENDİRME : Öğrenci, aşağıdaki performans ölçütlerini yerine getirecektir. 1. Web programlama yazılımında ihtiyaca uygun yeni bir Veri Tabanı oluşturma işlemlerini hatasız yapar. 2. Detaylara özen göstererek web programlama yazılımında var olan Veri Tabanı ile bağlantıyı hatasız kurar. 3. Tasarım tutarlılığına dikkat ederek Web programlama yazılımında tablo düzenleme işlemlerini hatasız yapar. 4. Detaylara özen göstererek web programlama yazılımında var olan tabloların içeriklerini hatasız görüntüler. 5. Tasarım tutarlılığına dikkat ederek Web programlama yazılımında tablo güncelleme işlemlerini hatasız yapar. 6. Bilgilerin güvenliğine dikkat ederek Web programlama yazılımında veri kaynaklarının erişim ayarlarını hatasız yapar. 7. Tasarım tutarlılığına dikkat ederek Web programlama yazılımında kayıtlı Veri Tabanı bilgilerinin sayfalar üzerinde görüntülenmesi işlemlerini hatasız yapar. 8. Web programlama yazılımında Gridview denetimini kullanarak verileri hatasız günceller. 9. Web programlama yazılımında Detailsview denetimini kullanarak Veri Tabanına yeni verileri hatasız ekler. 77

MESLEĞİN ADI Web Programcısı İŞ.NET yazılımını kullanarak web programları hazırlamak İŞLEM NUMARASI 1 İŞLEMİN ADI Veri Tabanı oluşturmak. Veri Tabanı işlemlerini yapmak Web programlama yazılımlarını çalıştırabilecek yeterlikte bilgisayar, internet bağlantısı 1. Yeni bir Veri Tabanı oluşturmak 2. Veri Tabanına bağlantı kurmak 3. Veri Tabanın da tablolar oluşturmak 4. Veri Tabanındaki tabloları düzenlemek 5. Veri Tabanındaki verileri görüntülemek 6. Veri Tabanındaki verileri değiştirmek 1. VERİTABANLARI OLUŞTURMA VE ONLARI BAĞLAMA 1.1. Veri Erişimi 1.1.1. Yeni Veri Tabanı Oluşturma 1.1.2. Veri Tabanına Bağlanma 1.2. Tablo İşlemleri 1.2.1. Tablo Verilerini Görüntüleme 1.2.2. Tablo Verilerini Güncelleme 1. Web site için gerekli olan Veri Tabanını oluşturmak 2. Var olan Veri Tabanı ile bağlantılar yapmak 3. Veri Tabanına tablo ekleme işlemlerini yapmak 4. Veri Tabanı tablosunun içeriği görüntüleme ve değiştirme işlemlerini yapmak 2. Planlı ve organize olmak 3. Tasarım tutarlılığına dikkat 4. İhtiyaca uygun Veri Tabanını oluşturulmasına dikkat 5. Veri Tabanı işlemlerinde dikkatli olmak SÜRE: İşlemin Yapılma Süresi: 4 saat İşlemi Öğrenme Süresi: 12 ders saati 78

MESLEĞİN ADI Web Programcısı İŞ.NET yazılımını kullanarak web programları hazırlamak İŞLEM NUMARASI 2 İŞLEMİN ADI Veri Tabanındaki bilgileri görüntülemek Veri Tabanı işlemlerini yapmak Web programlama yazılımlarını çalıştırabilecek yeterlikte bilgisayar, internet bağlantısı 1. Veri kaynaklarını kullanmak 2. Veri Tabanı bilgilerini sayfa üzerinde görüntülemek 3. Gridview kontrolünü düzenlemek 2. VERİ TABANI BİLGİLERİNİ GÖRÜNTÜLEME 2.1. Veri kaynakları 2.1.1. Veri kaynaklarını yapılandırma 2.1.2. Veri kaynaklarını görüntüleme 2.2. Gridview denetimi 1. Veri kaynaklarına erişim ayarlarını yapmak 2. Gridview denetimini uygun yere yerleştirmek 3. Gridview denetimi ile Veri Tabanındaki verilerli görüntülemek 2. Planlı ve organize olmak 3. Tasarım tutarlılığına dikkat 4. Veri Tabanı bilgilerinin görüntülenmesi işlemlerini hatasız yapmak 5. Gridview denetimi işlemlerini hatasız yapmak SÜRE: İşlemin Yapılma Süresi: 4 saat İşlemi Öğrenme Süresi: 10 ders saati 79

MESLEĞİN ADI Web Programcısı İŞ.NET yazılımını kullanarak web programları hazırlamak İŞLEM NUMARASI 3 İŞLEMİN ADI Veri Tabanı bilgilerini yön Veri Tabanı işlemlerini yapmak Web programlama yazılımlarını çalıştırabilecek yeterlikte bilgisayar, internet bağlantısı 1. Gridview denetimini kullanmak 2. Detailsview denetimini kullanmak 3. VERİ TABANI BİLGİLERİNİ YÖNETME 3.1. Gridview denetimi 3.2. Detailsview denetimi 1. Gridview denetimi kullanarak Veri Tabanındaki bilgileri güncelleme işlemlerini yapmak 2. Detailsview denetimi kullanarak Veri Tabanına yeni bilgiler ekleme işlemlerini yapmak 2. Planlı ve organize olmak 3. Tasarım tutarlılığına dikkat 4. Gridview denetimini ile kayıtları hatasız güncellemek 5. Detailsview denetimini ile kayıt ekleme işlemlerini hatasız yapmak SÜRE: İşlemin Yapılma Süresi: 4 saat İşlemi Öğrenme Süresi: 10 ders saati 80