WEB TASARIMI VE PROGRAMLAMA DERSİ

Transkript

1 WEB TASARIMI VE PROGRAMLAMA DERSİ Dersin Modülleri HTML 1 HTML 2 Web Tasarım Editörü 1 Web Tasarım Editörü 2 Web Tasarım Editörü 3 Web Tasarım Editörü 4 Etkileşimli Web Uygulamaları 1 Etkileşimli Web Uygulamaları 2 Kazandırılan Yeterlikler HTML kodları ile web sayfaları için basit işlemler yapmak HTML kodları ile web sayfaları için gelişmiş özellikler oluşturmak Web sayfası hazırlamak için temel işlemleri yapmak Web sayfaları için tablo, stil, kütüphane işlemlerini yapmak Web sayfaları için şablon ve çerçeve işlemlerini yapmak Web sayfaları içinde kullanıcı etkileşimli uygulamaları yapmak ve site yönetimini gerçekleştirmek Programlama için gerekli yazılım kurulumlarını yapmak Programlama dilinin temel komutları ile web sayfası hazırlamak Etkileşimli Web Uygulamaları 3 Web form uygulamaları yapmak Etkileşimli Web Uygulamaları 4 Web servislerini kullanmak

2 DERS BİLGİ FORMU Dersin Adı WEB TASARIMI VE PROGRAMLAMA Alan Bilişim Teknolojileri Meslek/Dal Dersin okutulacağı sınıf/yıl Süre Dersin tanımı Web Programcılığı 2. Yıl /3. Ve 4. Dönem 3. Yıl /5. Ve 6. Dönem 2. Yıl /3. Ve 4. Dönem :Haftada 3 saat 3. Yıl /5. Ve 6. Dönem :Haftada 4 saat Öğrenciye, web sayfası tasarım işlemlerinin tanıtılması ile ilgili konularda gerekli bilgilerin verildiği derstir. Dersin amacı Bu ders ile öğrenciye, HTML kodları ve web tasarım editörü yardımıyla web sayfası tasarlayabilecek, programlama komutları kullanarak etkileşimli web uygulamaları hazırlayabilme yeterlikleri kazandırılacaktır. Dersin Ön Koşulları Ders ile Kazandırılacak Yeterlikler Bu dersin sonunda; 1. Html kodları ile web sayfaları için basit işlemler yapmak 2. Html kodları ile web sayfaları için gelişmiş özellikler oluşturmak 3. Web sayfası hazırlamak için temel işlemleri yapmak 4. Web sayfaları için tablo, stil, kütüphane işlemlerini yapmak 5. Web sayfaları için şablon ve çerçeve işlemlerini yapmak 6. Web sayfaları içinde kullanıcı etkileşimli uygulamaları yapmak ve site yönetimini gerçekleştirmek 7. Programlama için gerekli yazılım kurulumlarını yapmak 8. Programlama dilinin temel komutları ile web sayfası hazırlamak 9. Web form uygulamaları yapmak 10. Web servislerini kullanmak yeterlikleri kazandırılacaktır.

3 Bu ders, Dersin İçeriği 1. Html kodları ile web sayfaları için basit işlemler yapmak 2. Html kodları ile web sayfaları için gelişmiş özellikler oluşturmak 3. Web sayfası hazırlamak için temel işlemleri yapmak 4. Web sayfaları için tablo, stil, kütüphane işlemlerini yapmak 5. Web sayfaları için şablon ve çerçeve işlemlerini yapmak 6. Web sayfaları içinde kullanıcı etkileşimli uygulamaları yapmak ve site yönetimini gerçekleştirmek 7. Programlama için gerekli yazılım kurulumlarını yapmak 8. Programlama dilinin temel komutları ile web sayfası hazırlamak 9. Web Form uygulamaları yapmak 10. Web servislerini kullanmak konularını içermektedir Yöntem ve Teknikler 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. Eğitim Öğretim Ortamı ve Donatım Ölçme ve Değerlendirme Öğretmen ve Eğitici İşbirliği Yapılacak Kurum ve Kuruluşlar Ortam: Bilişim Teknolojileri laboratuarı, işletme ortamı. Donanım: Projeksiyon, bilgisayar 1. Her faaliyet sonunda kazanılan bilgi ve beceriler ölçülür. 2. Her modülün sonunda kazanılan yeterlikler ölçülür. 3. Dersin sonunda; Orta Öğretim Kurumları Sınıf Geçme ve Sınav Yönetmeliği ile Mesleki ve Teknik Eğitim Yönetmeliği nin Mesleki Eğitim Merkezleri ile ilgili maddelerine göre ölçme ve değerlendirme yapılacaktır. 1. Lisans eğitimi almış, alanında sektör deneyimi olan öğretmenler, 2. Gerektiğinde sektörde çalışan ustalık ve usta öğreticilik belgesi olan meslek elemanları Ders ile ilgili araştırma-gözlem ve uygulama konularında; üniversiteler, sosyal ortaklar, sivil toplum kuruluşları ve işletmeler ile işbirliği yapılabilir.

4 MODÜL BİLGİ SAYFASI ALAN : BİLİŞİM TEKNOLOJİLERİ MESLEK/DAL : WEB PROGRAMCILIĞI DERS : WEB TASARIMI VE PROGRAMLAMA MODÜL : HTML 1 KODU : SÜRE : 40/32 ÖN KOŞUL : AÇIKLAMA : Uygulamalı olarak laboratuar ortamında işlenmelidir. GENEL AMAÇ : Öğrenci bu modül ile gerekli ortam sağlandığında; Html kodları ile web sayfaları için basit işlemler yapabilecektir. AMAÇLAR : 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. İÇERİK 1. İNTERNET ORTAMI VE WEB TASARIMI 1.1. İnternet IP (Internet Protocol) Numarası İnternet Alanı (Domain) 1.2. WEB Tarayıcılar WEB Tarayıcıların Çalışması 1.3. Arama Motorları Arama Motorlarının Çalışması Arama Motorları ile Arama Yapma 1.4. WEB Tasarımı Sayfa Hazırlarken Dikkat Edilecek Noktalar Görsel Tasarım 2. HTML (HYPER TEXT MARKUP LANGUAGE) TEMEL ETİKETLERİ

5 2.1. HTML Komut Yapısı <HTML> <HEAD> <BODY> <TITLE> 2.2. Listeleme Etiketleri <OL> <UL> <LI> 3. METİN VE GÖRÜNÜM DÜZENLEME ETİKETLERİ 3.1. Metin Düzenleme Etiketleri <HX> <B> <U> <I> <BR> <P> <FONT> 3.2. Görünüm Düzenleme Etiketleri BGCOLOR 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> TR TD Border TH Width Height Colspan Rowspan Cellspacing Cellpadding KONU ALANLARININ AĞIRLIKLARI: KONULAR Yüzde(%) İnternet ortamı ve web tasarımı 15 HTML Temel Etiketleri 20 Metin ve Görünüm Düzenleme Etiketleri 20 Bağlantı (Köprü) Oluşturma 15 Tablolar 30

6 MESLEĞİN ADI : Web Programcılığı İŞ : HTML İle Web Sayfası Hazırlamak İŞLEM NO : 1 İŞLEMİN ADI : İnternetle ilgili ortamına ait temel araçları bu birimleri çalıştırakullanmak : HTML kodları ile web sayfaları için basit işlemler yapmak : HTML editörünü çalıştıracak yeterlikte bilgisayar, internet bağlantısı 1. HTML belgesi oluşturmak 2. HTML belgesini kaydetmek 3. Oluşturulan HTML belgesini internet tarayıcıda görüntülemek 1. İNTERNET ORTAMI VE WEB TASARIMI 1.1. İnternet IP (Internet Protocol) Numarası İnternet Alanı (Domain) 1.2. WEB Tarayıcılar WEB Tarayıcıların Çalışması 1.3. Arama Motorları Arama Motorlarının Çalışması Arama Motorları ile Arama Yapma 1.4. WEB Tasarımı Sayfa Hazırlarken Dikkat Edilecek Noktalar Görsel Tasarım HTML belgesini oluşturma ve kaydetme 1. Planlı olma 2. Düzenli olma 3. Sabırlı olma 4. Titiz olma 5. Temiz olma 6. Mesleği ile ilgili etik değerlere sahip olma NOT: İşlemi Öğrenme Süresi : 4 saat Meslek Elemanının İşlemi Yaptığı Süre : 1 saat

7 MESLEĞİN ADI : Web Programcılığı İŞ : HTML İle Web Sayfası Hazırlamak İŞLEM NO : 2 İŞLEMİN ADI : Temel HTML Etiketlerini Kullanmak : HTML kodları ile web sayfaları için basit işlemler yapmak : HTML editörünü çalıştıracak yeterlikte bilgisayar, internet bağlantısı 1. HTML sayfasında bulunması gereken standart etiketleri kullanmak 2. Listeleme etiketlerini kullanmak 2. HTML (HYPER TEXT MARKUP LANGUAGE) TEMEL ETİKETLERİ 2.1. HTML Komut Yapısı <HTML> <HEAD> <BODY> <TITLE> 2.2. Listeleme Etiketleri <OL> <UL> <LI> Temel etiketleri kullanarak basit bir HTML sayfası oluşturma 1. Planlı olma 2. Düzenli olma 3. Sabırlı olma 4. Titiz olma 5. Temiz olma 6. Mesleği ile ilgili etik değerlere sahip olma NOT: İşlemi Öğrenme Süresi : 8 saat Meslek Elemanının İşlemi Yaptığı Süre : 4 saat

8 MESLEĞİN ADI : Web Programcılığı İŞ : HTML İle Web Sayfası Hazırlamak İŞLEM NO : 3 İŞLEMİN ADI : Metin Biçimlendirme Etiketlerini Kullanmak : HTML kodları ile web sayfaları için basit işlemler 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 <HX> <B> <U> <I> <BR> <P> <FONT> 3.2. Görünüm Düzenleme Etiketleri BGCOLOR Biçimlendirme etiketlerini kullanarak sayfa içine metinler yerleştirme ve düzenleme 1. Planlı olma 2. Düzenli olma 3. Sabırlı olma 4. Titiz olma 5. Temiz olma 6. Mesleği ile ilgili etik değerlere sahip olma NOT: İşlemi Öğrenme Süresi : 6 saat Meslek Elemanının İşlemi Yaptığı Süre : 2saat

9 MESLEĞİN ADI : Web Programcılığı İŞ : HTML İle Web Sayfası Hazırlamak İŞLEM NO : 4 İŞLEMİN ADI : Bağlantılar Oluşturmak : HTML kodları ile web sayfaları için basit işlemler 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 İstenen alana bağlantı oluşturma ve oluşturulan bağlantıları düzenleme 1. Planlı olma 2. Düzenli olma 3. Sabırlı olma 4. Titiz olma 5. Temiz olma 6. Mesleği ile ilgili etik değerlere sahip olma NOT: İşlemi Öğrenme Süresi : 6 saat Meslek Elemanının İşlemi Yaptığı Süre : 2 saat

10 MESLEĞİN ADI : Web Programcılığı İŞ : HTML İle Web Sayfası Hazırlamak İŞLEM NO : 5 İŞLEMİN ADI : Tablolar Oluşturmak : HTML kodları ile web sayfaları için basit işlemler 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> TR TD Border TH Width Height Colspan Rowspan Cellspacing Cellpadding Tablo etiketlerini kullanarak tablolar oluşturma ve düzenleme 1. Planlı olma 2. Düzenli olma 3. Sabırlı olma 4. Titiz olma 5. Temiz olma 6. Mesleği ile ilgili etik değerlere sahip olma NOT: İşlemi Öğrenme Süresi : 8 saat Meslek Elemanının İşlemi Yaptığı Süre : 2 saat

11 MODÜL BİLGİ SAYFASI ALAN : BİLİŞİM TEKNOLOJİLERİ MESLEK/DAL : WEB PROGRAMCILIĞI DERS : WEB TASARIMI VE PROGRAMLAMA MODÜL : HTML 2 KODU : SÜRE : 40/32 ÖN KOŞUL AÇIKLAMA : HTML 1 modülünü başarmış olmak. : Uygulamalı olarak laboratuar ortamında işlenmelidir. GENEL AMAÇ : Öğrenci bu modül ile gerekli ortam sağlandığında; Html kodları ile web sayfaları için gelişmiş özellikler oluşturabilecektir. AMAÇLAR : 1. Formlar oluşturabilecektir. 2. Çerçeveler oluşturabilecektir. 3. Stil şablonları oluşturabilecektir. 4. Web sayfaları için çoklu ortam araçları ekleyebilecektir.. İÇERİK 1. FORMLAR 1.1. <form> Action Method Target 1.2. <input> 1.3. Form Nesneleri CheckBox Radio Text Image Password Textarea Reset Submit

12 2. ÇERÇEVELER 2.1. <frameset> Cols 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 Stil Şablonlarının Çeşitleri Seçiciler (Selectors) 3.3. Stil Şablonlarının Genel Kullanım Şekilleri A Etiketinin CSS İle Kullanımı 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 KONU ALANLARININ AĞIRLIKLARI: KONULAR Yüzde(%) Formlar 35 Çerçeveler 20 Stil Şablonları 30 Çoklu Ortam Araçları 15

13 MESLEĞİN ADI : Web Programcılığı İŞ : HTML İle Web Sayfası Hazırlamak İŞLEM NO :1 İŞLEMİN ADI : Formlar Oluşturmak : Html kodları ile web sayfaları için gelişmiş özellikler oluşturmak : 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> Action Method Target 1.2. <input> 1.3. Form Nesneleri CheckBox Radio Text Image Password Textarea Reset Submit Etiketler ve HTML komutları ile form nesneleri oluşturma ve düzenleme 1. Planlı olma 2. Düzenli olma 3. Sabırlı olma 4. Titiz olma 5. Temiz olma 6. Mesleği ile ilgili etik değerlere sahip olma NOT: İşlemi Öğrenme Süresi : 8 saat Meslek Elemanının İşlemi Yaptığı Süre : 4 saat

14 MESLEĞİN ADI : Web Programcılığı İŞ : HTML İle Web Sayfası Hazırlamak İŞLEM NO : 2 İŞLEMİN ADI : Çerçeveler Oluşturmak : HTML kodları ile web sayfaları için gelişmiş özellikler oluşturmak : 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> Cols Rows 2.2. <frame> 2.3. <noframes> Çerçeveleri kullanma ve düzenleme 1. Planlı olma 2. Düzenli olma 3. Sabırlı olma 4. Titiz olma 5. Temiz olma 6. Mesleği ile ilgili etik değerlere sahip olma NOT: İşlemi Öğrenme Süresi : 8 saat Meslek Elemanının İşlemi Yaptığı Süre : 4 saat

15 MESLEĞİN ADI : Web Programcılığı İŞ : HTML İle Web Sayfası Hazırlamak İŞLEM NO : 3 İŞLEMİN ADI : Stil Sayfaları Oluşturmak : HTML kodları ile web sayfaları için gelişmiş özellikler oluşturmak : 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 Stil Şablonlarının Çeşitleri Seçiciler (Selectors) 3.3. Stil Şablonlarının Genel Kullanım Şekilleri A Etiketinin CSS İle Kullanımı Bağlantılı CSS Dosyalarının Hazırlanması Stil sayfaları oluşturma ve oluşturulan stilleri düzenleme 1. Planlı olma 2. Düzenli olma 3. Sabırlı olma 4. Titiz olma 5. Temiz olma 6. Mesleği ile ilgili etik değerlere sahip olma NOT: İşlemi Öğrenme Süresi : 8 saat Meslek Elemanının İşlemi Yaptığı Süre : 4 saat

16 MESLEĞİN ADI : Web Programcılığı İŞ : HTML İle Web Sayfası Hazırlamak İŞLEM NO : 4 İŞLEMİN ADI : Çoklu Ortam Araçları Eklemek : HTML kodları ile web sayfaları için gelişmiş özellikler oluşturmak : 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 HTML belgesi içine çoklu ortam araçlarını eklemek ve düzenlemek 1. Planlı olma 2. Düzenli olma 3. Sabırlı olma 4. Titiz olma 5. Temiz olma 6. Mesleği ile ilgili etik değerlere sahip olma NOT: İşlemi Öğrenme Süresi : 8 saat Meslek Elemanının İşlemi Yaptığı Süre : 2 saat

17 MODÜL BİLGİ SAYFASI ALAN : BİLİŞİM TEKNOLOJİLERİ MESLEK/DAL : WEB PROGRAMCILIĞI DERS : WEB TASARIMI VE PROGRAMLAMA MODÜL : WEB TASARIM EDİTÖRÜ 1 KODU : SÜRE : 40/32 ÖN KOŞUL AÇIKLAMA : HTML 2 modülünü bitirmiş olmak : Uygulamalı olarak laboratuar ortamında işlenmelidir. GENEL AMAÇ : Öğrenci bu modül ile gerekli ortam sağlandığında; web sayfası hazırlamak için temel işlemleri yapmak. AMAÇLAR: 1. Temel araçları kullanmak. 2. Metin işlemlerini yapmak. 3. Resim işlemlerini yapmak. 4. Bağlantılar oluşturmak. İÇERİK : 1. EDİTÖR TEMEL ARAÇLARI 1.1. Çalışma Alanının Tanıtılması 1.2. Başlangıç Sayfası 1.3. Siteyi Geliştirmek Üzere Hazırlık Yapma 1.4. Yerel Site Tanımlama 1.5. Yeni Bir Sayfa Oluşturma ve Kaydetme 1.6. Araçlar 1.7. Paneller 1.8. Sayfaya Başlık Atma 1.9. Arka Plan Rengi Belirleme Ön İzlemede Kullanılacak Web Tarayıcılarının Belirlenmesi 2. İÇERİK İŞLEMLERİ 2.1. Temel Metin Biçimlendirme İşlemleri 2.2. Satır Sonu Oluşturma 2.3. Metin Tercihlerinin Ayarlanması

18 2.4. Metin Aktarma 2.5. Bölünmez Boşluk Ekleme 2.6. Metin Hizalama ve Girinti Verme 2.7. Liste Oluşturma 2.8. Tanım Listeleri Oluşturma 2.9. İç İçe Listeler Oluşturma Karakter Biçimlendirme Yazı Tipi Değiştirme Metin Boyutunu Değiştirme Metin Rengi Tanımlama Özel Karakter Ekleme Yatay Cetvel Ekleme Otomatik Tarih Ekleme Animasyon Metni Ekleme 3. RESİMLER 3.2. Sayfaya Resim Yerleştirme 3.1. Arka Plan Resmi Kullanma 3.3. Resimleri Yeniden Boyutlandırma 3.4. Resimlerin Hizalanması 3.5. Resmin Etrafına Kenarlık Ekleme 3.6. Resimlere İsim ve Alternatif Metin Atama 3.7. Assets Panelini Kullanarak Resim Ekleme 3.8. Resimleri Sık Kullanılanlar Listesi (Favorite) ile Yönetme 3.9. Metni Resim Etrafında Sarma Resmin Etrafındaki Boşluğu Ayarlama Resim Yer Tutucu Ekleme Resim Düzenleme Tercihlerini Ayarlama Temel Resim Düzenleme İşlemleri Etkileşimli Düğmeler Ekleme Animasyon Eklemek Resim Görüntüleyici (Image Viewer) Web Fotoğraf Albümü (Web Photo Album) Oluşturma Video Filmlerini Gömme 4. KÖPRÜLER 4.1. Köprü Özelliklerini Düzenleme 4.2. Köprüler ve Dosya / Klasör Yapısı 4.3. Resim Tabanlı Köprüler 4.4. Köprü Adreslerinin Açılış Şekilleri 4.5. Yer İmleri Ekleme ve Bunlara Bağlantı Atama 4.6. Etkin Resim Noktaları Oluşturma 4.7. E-posta Bağlantıları Ekleme KONU ALANLARININ AĞIRLIKLARI: KONULAR Yüzde(%) Editör Temel Araçları 25 İçerik İşlemleri 25 Resimler 25 Köprüler 25

19 MESLEĞİN ADI : Web Programcılığı İŞ : Web sayfası hazırlama editörünü kullanmak. İŞLEM NO : 1 İŞLEMİN ADI : Temel araçları kullanmak. : Web sayfası hazırlamak için temel işlemleri yapmak : Web sayfası tasarım editörünü çalıştırabilecek yeterlikte bilgisayar, internet bağlantısı 1. Site modelini belirlemek 2. Tasarım editörünü çalıştırmak 3. Site tanımlama işlemini başlatmak 4. Site modelini tanımlamak 5. Kontrolünü yapmak 6. Yeni bir sayfa oluşturmak ve kaydetmek 7. Sayfaya bir başlık atamak 8. Bir arkaplan rengi belirlemek 9. Önizlemede kullanacak web tarayıcıları belirlemek 1. EDİTÖR TEMEL ARAÇLARI 1.1. Çalışma Alanının Tanıtılması 1.2. Başlangıç Sayfası 1.3. Siteyi Geliştirmek Üzere Hazırlık Yapma 1.4. Yerel Site Tanımlama 1.5. Yeni Bir Sayfa Oluşturma ve Kaydetme 1.6. Araçlar 1.7. Paneller 1.8. Sayfaya Başlık Atma 1.9. Arka Plan Rengi Belirleme Ön İzlemede Kullanılacak Web Tarayıcılarının Belirlenmesi Site tanımlama araçlarını ve menülerini kullanma 1. Detaylara özen göstermek 2. Dürüst olmak 3. İnsan ilişkilerine özen göstermek 4. İş disiplinine sahip olmak 5. Planlı ve organize olmak 6. Sabırlı olmak 7. Sorumluluk sahibi olmak 8. Yeniliklere açık olmak 9. Zamanı iyi kullanmak 10. Mesleği ile ilgili etik değerlere sahip olma NOT: İşlemi Öğrenme Süresi : 4 saat Meslek Elemanının İşlemi Yaptığı Süre : 1 saat

20 MESLEĞİN ADI : Web Programcılığı İŞ : Web sayfası hazırlama editörünü kullanmak. İŞLEM NO : 2 İŞLEMİ N ADI : Metin işlemlerini yapmak. : Web sayfası hazırlamak için temel işlemleri yapmak : Web sayfası tasarım editörünü çalıştırabilecek yeterlikte bilgisayar, internet bağlantısı 1. Satır sonu oluşturmak 2. Metin tercihlerinin ayarlamak 3. Metin aktarmak 4. Bölünmez boşluk eklemek 5. Metin hizalamak ve girinti vermek 6. Liste oluşturmak 7. Tanım listeleri oluşturmak 8. İç içe listeler oluşturmak 9. Fontu değiştirmek 10. Font boyutunu değiştirmek 11. Font rengini tanımlamak 2. İÇERİK İŞLEMLERİ 2.1. Temel Metin Biçimlendirme İşlemleri 2.2. Satır Sonu Oluşturma 2.3. Metin Tercihlerinin Ayarlanması 2.4. Metin Aktarma 2.5. Bölünmez Boşluk Ekleme 2.6. Metin Hizalama ve Girinti Verme 2.7. Liste Oluşturma 2.8. Tanım Listeleri Oluşturma 2.9. İç İçe Listeler Oluşturma Metin araçlarını kullanma 1. Detaylara özen göstermek 2. Dürüst olmak 3. İnsan ilişkilerine özen göstermek 4. İş disiplinine sahip olmak 5. Planlı ve organize olmak 6. Sabırlı olmak 7. Sorumluluk sahibi olmak 8. Yeniliklere açık olmak 9. Zamanı iyi kullanmak 10. Mesleği ile ilgili etik değerlere sahip olma 12. Özel karakter eklemek 13. Otomatik olarak tarih eklemek 14. Yatay cetvel eklemek. 15. Animasyon metni eklemek 16. Animasyon metninde değişiklik yapmak Karakter Biçimlendirme Yazı Tipi Değiştirme Metin Boyutunu Değiştirme Metin Rengi Tanımlama Özel Karakter Ekleme Yatay Cetvel Ekleme Otomatik Tarih Ekleme Animasyon Metni Ekleme NOT: İşlemi Öğrenme Süresi : 4 saat Meslek Elemanının İşlemi Yaptığı Süre : 1 saat

21 MESLEĞİN ADI : Web Programcılığı İŞ : Web sayfası hazırlama editörünü kullanmak. İŞLEM NO : 3 İŞLEMİN ADI : Resim işlemlerini yapmak. : Web sayfası hazırlamak için temel işlemleri yapmak : Web sayfası tasarım editörünü çalıştırabilecek yeterlikte bilgisayar, internet bağlantısı 1. Sayfaya resim yerleştirmek 3. RESİMLER 1. Resim araçlarını 1. Detaylara özen göstermek 2. Resimleri yeniden boyutlandırmak ve tazelemek 3.2. Sayfaya Resim Yerleştirme kullanma 2. Dürüst olmak 3. Bir resmin etrafına kenarlık eklemek 3.1. Arka Plan Resmi Kullanma 2. Animasyon 3. İnsan ilişkilerine özen göstermek 4. Resimlere isim ve alternatif metin atamak 3.3. Resimleri Yeniden Boyutlandırma 5. Assests panelini kullanarak resim eklemek 3.4. Resimlerin Hizalanması araçlarını kullanma 4. İş disiplinine sahip olmak 6. Metni resim etrafında sarmak 3.5. Resmin Etrafına Kenarlık Ekleme 5. Planlı ve organize olmak 7. Bir resmin etrafındaki boşluğu ayarlamak 3.6. Resimlere İsim ve Alternatif Metin 6. Sabırlı olmak 8. Bir resim yer tutucusu eklemek Atama 7. Sorumluluk sahibi olmak 9. Resim düzenleme tercihlerini ayarlamak 3.7. Assets Panelini Kullanarak Resim 8. Yeniliklere açık olmak 10. Animasyon düğmeleri eklemek Ekleme 11. Animasyonu eklemek 3.8. Resimleri Sık Kullanılanlar Listesi 9. Zamanı iyi kullanmak 12. Erişilebilir bir resim eklemek (Favorite) ile Yönetme 10. Mesleği ile ilgili etik değerlere sahip 13. Resim İzleyici (Image viewer) kullanmak 3.9. Metni Resim Etrafında Sarma olma 14. Web fotoğraf albümü (web photo album) özelliğini Resmin Etrafındaki Boşluğu kullanmak Ayarlama 15. Video Filmlerini Gömmek Resim Yer Tutucu Ekleme Resim Düzenleme Tercihlerini Ayarlama Temel Resim Düzenleme İşlemleri Etkileşimli Düğmeler Ekleme Animasyon Eklemek Resim Görüntüleyici (Image Viewer) Web Fotoğraf Albümü (Web Photo Album) Oluşturma Video Filmlerini Gömme NOT: İşlemi Öğrenme Süresi : 8 saat Meslek Elemanının İşlemi Yaptığı Süre : 2 saat

22 MESLEĞİN ADI : Web Programcılığı İŞ : Web sayfası hazırlama editörünü kullanmak. İŞLEM NO : 4 : Web sayfası hazırlamak için temel işlemleri yapmak İŞLEMİN ADI : Bağlantılar oluşturmak. : Web sayfası tasarım editörünü çalıştırabilecek yeterlikte bilgisayar, internet bağlantısı 1. Bağlantı rengini ve biçimlendirme özelliklerini ayarlamak 2. Hypertext bağlantıları oluşturmak 3. Resim tabanlı bağlantılar oluşturmak 4. Bağlantıların açılış şeklini belirlemek 5. İsimli yer imleri eklemek ve bunlara bağlantı atamak 6. Resim haritası oluşturmak 7. E-posta bağlantıları eklemek 4. KÖPRÜLER 4.1. Köprü Özelliklerini Düzenleme 4.2. Köprüler ve Dosya / Klasör Yapısı 4.3. Resim Tabanlı Köprüler 4.4. Köprü Adreslerinin Açılış Şekilleri 4.5. Yer İmleri Ekleme ve Bunlara Bağlantı Atama 4.6. Etkin Resim Noktaları Oluşturma 4.7. E-posta Bağlantıları Ekleme Bağlantı araçlarını kullanma 1. Detaylara özen göstermek 2. Dürüst olmak 3. İnsan ilişkilerine özen göstermek 4. İş disiplinine sahip olmak 5. Planlı ve organize olmak 6. Sabırlı olmak 7. Sorumluluk sahibi olmak 8. Yeniliklere açık olmak 9. Zamanı iyi kullanmak 10. Mesleği ile ilgili etik değerlere sahip olma NOT: İşlemi Öğrenme Süresi : 8 saat Meslek Elemanının İşlemi Yaptığı Süre : 2 saat

23 MODÜL BİLGİ SAYFASI ALAN : BİLİŞİM TEKNOLOJİLERİ MESLEK/DAL : WEB PROGRAMCILIĞI DERS : WEB TASARIMI VE PROGRAMLAMA MODÜL : WEB TASARIM EDİTÖRÜ 2 KODU : SÜRE : 40/32 ÖN KOŞUL AÇIKLAMA : Web Tasarım Editörü 1 modülünü başarmış olmak : Uygulamalı olarak laboratuar ortamında işlenmelidir. GENEL AMAÇ : Öğrenci bu modül ile gerekli ortam sağlandığında; web sayfaları için tablo, stil, kütüphane işlemlerini yapmak. AMAÇLAR : 1. Tablo işlemlerini yapmak. 2. Stil işlemlerini yapmak. 3. Kütüphane işlemlerini yapmak.

24 İÇERİK : 1. TABLOLARLA TASARIM 1.1. Tablo Oluşturma 1.2. Harici Dosyalardan Veri Aktarma 1.3. Tablo Hücrelerini Kopyalama / Taşıma 1.4. Tablo Seçme 1.5. Tablo Hücrelerini Seçme ve Biçimlendirme 1.6. Tablo İçeriğini Sıralamak 1.7. Tabloda Değişiklik Yapmak 1.8. Tablonun Harici Programlar İçine Aktarımı 1.9. Tablolarda Resim Kullanma Tabloları İçiçe Yerleştirme Bir Tabloya Dış Hat Ekleme Sayfa Düzenini Kontrol Etme Layout Görünümünde Tablo Oluşturma Layout Görünümünde Hücrelerin Biçimlendirme Özellikleri Taslak Resim Kullanma 2. STİL SAYFALARI 2.1. Stillerin İncelenmesi 2.2. Dâhili Stiller Oluşturma 2.3. Dâhili Stilleri Harici Stillere Dönüştürme 2.4. Harici Stil Sayfasını Bağlama 2.5. Harici Stiller Oluşturma 2.6. Etiket Kombinasyonları için Stiller Oluşturma 2.7. Mevcut Bir Stili Düzenleme 2.8. Stil Önceliği 2.9. CSS ile Arkaplan Ayarlarını Yapma Temel CSS Yerleşim Alanı Hazırlama 3. KÜTÜPHANE ÖĞELERİ 3.1. Kütüphane Öğesi Oluşturma 3.2. Kütüphane Öğesini Sayfaya Yerleştirme 3.3. Kütüphane Öğesini Yeniden Oluşturma 3.4. Kütüphane Öğesinde Değişiklik Yapma 3.5. Kütüphane Referanslarını Güncelleme KONU ALANLARININ AĞIRLIKLARI: KONULAR Yüzde(%) Tablolar 40 Stil Sayfaları 40 Kütüphane İşlemleri 20

25 MESLEĞİN ADI : Web Programcılığı İŞ : Web sayfası hazırlama editörünü kullanmak. İŞLEM NO : 1 İŞLE MİN : Tablo işlemlerini yapmak. ADI : Web sayfaları için tablo, stil, kütüphane işlemlerini yapmak 1. Bir tablo oluşturmak 2. Harici dosyalardan veri aktarmak 3. Tablo hücrelerini kopyalamak ve yapıştırmak 4. Tabloyu seçmek 5. Tablo hücrelerini seçmek ve biçimlendirmek 6. Tablo içeriğini sıralamak 7. Tabloda değişiklik yapmak 8. Tabloların dışarıya aktarılması 9. Tablolarda resim kullanmak 10. Tabloları iç içe yerleştirmek 11. Bir tabloya dış hat eklemek 12. Layout görünümünde tablo oluşturmak 13. Tablo yerleşiminde değişiklik yapmak 14. Hücrelere biçimlendirme özelliklerini uygulamak 15. Layout modunda genişlik ayarı yapmak 16. Taslak resim kullanmak : Web sayfası tasarım editörünü çalıştırabilecek yeterlikte bilgisayar, internet bağlantısı 1. TABLOLARLA TASARIM Tablo hazırlama ve 1.1. Tablo Oluşturma düzenleme 1.2. Harici Dosyalardan Veri Aktarma işlemlerini yapma 1.3. Tablo Hücrelerini Kopyalama / Taşıma 1.4. Tablo Seçme 1.5. Tablo Hücrelerini Seçme ve Biçimlendirme 1.6. Tablo İçeriğini Sıralamak 1.7. Tabloda Değişiklik Yapmak 1.8. Tablonun Harici Programlar İçine Aktarımı 1.9. Tablolarda Resim Kullanma Tabloları İçiçe Yerleştirme Bir Tabloya Dış Hat Ekleme Sayfa Düzenini Kontrol Etme Layout Görünümünde Tablo Oluşturma Layout Görünümünde Hücrelerin Biçimlendirme Özellikleri Taslak Resim Kullanma 1. Detaylara özen göstermek 2. Dürüst olmak 3. İnsan ilişkilerine özen göstermek 4. İş disiplinine sahip olmak 5. Planlı ve organize olmak 6. Sabırlı olmak 7. Sorumluluk sahibi olmak 8. Yeniliklere açık olmak 9. Zamanı iyi kullanmak 10. Mesleği ile ilgili etik değerlere sahip olma NOT: İşlemi Öğrenme Süresi : 12 saat Meslek Elemanının İşlemi Yaptığı Süre : 4 saat

26 MESLEĞİN ADI : Web Programcılığı İŞ : Web sayfası hazırlama editörünü kullanmak. İŞLEM NO : 2 İŞLE MİN ADI : Web sayfaları için tablo, stil, kütüphane işlemlerini yapmak : Stil işlemlerini yapmak. : Web sayfası tasarım editörünü çalıştırabilecek yeterlikte bilgisayar, internet bağlantısı 1. Dahili stiller oluşturmak 2. Dahili stilleri harici stillere dönüştürmek 3. Mevcut bir harici stil sayfasını bağlamak 4. Harici stiller oluşturmak 5. Etiket kombinasyonları için stil oluşturmak 6. Mevcut bir stili düzenlemek 7. CSS ile arkaplan ayarlarını yapmak 8. Temel tipte bir CSS yerleşim düzeni hazırlamak 2. STİL SAYFALARI 2.1. Stillerin İncelenmesi 2.2. Dâhili Stiller Oluşturma 2.3. Dâhili Stilleri Harici Stillere Dönüştürme 2.4. Harici Stil Sayfasını Bağlama 2.5. Harici Stiller Oluşturma 2.6. Etiket Kombinasyonları için Stiller Oluşturma 2.7. Mevcut Bir Stili Düzenleme 2.8. Stil Önceliği 2.9. CSS ile Arkaplan Ayarlarını Yapma Temel CSS Yerleşim Alanı Hazırlama Stil araçlarını kullanma 1. Detaylara özen göstermek 2. Dürüst olmak 3. İnsan ilişkilerine özen göstermek 4. İş disiplinine sahip olmak 5. Planlı ve organize olmak 6. Sabırlı olmak 7. Sorumluluk sahibi olmak 8. Yeniliklere açık olmak 9. Zamanı iyi kullanmak 10. Mesleği ile ilgili etik değerlere sahip olma NOT: İşlemi Öğrenme Süresi : 12 saat Meslek Elemanının İşlemi Yaptığı Süre : 4 saat

27 MESLEĞİN ADI : Web Programcılığı İŞ : Web sayfası hazırlama editörünü kullanmak. İŞLEM NO : 3 İŞLEMİN ADI : Kütüphane işlemlerini yapmak. : Web sayfaları için tablo, stil, kütüphane işlemlerini yapmak : Web sayfası tasarım editörünü çalıştırabilecek yeterlikte bilgisayar, internet bağlantısı 1. Bir kütüphane öğesi oluşturmak 2. Bir kütüphane öğesini bir sayfaya yerleştirmek 3. Bir kütüphane öğesini yeniden oluşturmak 4. Bir kütüphane öğesinde değişiklik yapmak 5. Kütüphane referanslarını güncellemek 3. KÜTÜPHANE ÖĞELERİ 3.1. Kütüphane Öğesi Oluşturma 3.2. Kütüphane Öğesini Sayfaya Yerleştirme 3.3. Kütüphane Öğesini Yeniden Oluşturma 3.4. Kütüphane Öğesinde Değişiklik Yapma 3.5. Kütüphane Referanslarını Güncelleme Kütüphane işlemlerini yapma 1. Detaylara özen göstermek 2. Dürüst olmak 3. İnsan ilişkilerine özen göstermek 4. İş disiplinine sahip olmak 5. Planlı ve organize olmak 6. Sabırlı olmak 7. Sorumluluk sahibi olmak 8. Yeniliklere açık olmak 9. Zamanı iyi kullanmak 10. Mesleği ile ilgili etik değerlere sahip olma NOT: İşlemi Öğrenme Süresi : 8 saat Meslek Elemanının İşlemi Yaptığı Süre : 2 saat

28 MODÜL BİLGİ SAYFASI ALAN : BİLİŞİM TEKNOLOJİLERİ MESLEK/DAL : WEB PROGRAMCILIĞI DERS : WEB TASARIMI VE PROGRAMLAMA MODÜL : WEB TASARIM EDİTÖRÜ 3 KODU : SÜRE : 40/32 ÖN KOŞUL AÇIKLAMA : Web Tasarım Editörü 2 modülünü başarmış olmak : Uygulamalı olarak laboratuar ortamında işlenmelidir. GENEL AMAÇ : Öğrenci bu modül ile gerekli ortam sağlandığında; web sayfaları için şablon ve çerçeve işlemlerini yapmak. AMAÇLAR : 1. Şablon işlemlerini gerçekleştirmek. 2. Çerçeve işlemlerini gerçekleştirmek.

29 İÇERİK 1. ŞABLONLAR 1.1. Şablon Oluşturma 1.2. Şablonda Düzenlenebilir Alanlar Oluşturma 1.3. Düzenlenebilir Alanları Kaldırma 1.4. İsteğe Bağlı İçerik Alanı Oluşturma 1.5. Tekrarlanan Alanlar Ekleme 1.6. Belirli Bir Şablonu Temel Alan Sayfalar Hazırlama 1.7. İsteğe Bağlı İçerik Alanını Kontrol Etme 1.8. Tekrarlanan Alanlar Ekleme 1.9. Şablonda Değişiklik Yapma 2. ÇERÇEVELER 2.1. Çerçeve Grubu (Frameset) Oluşturma 2.2. Çerçeve Grubunu Kaydetme 2.3. Çerçeve Grubu İçindeki Çerçeveleri Yeniden Boyutlandırma 2.4. Çerçeve Özelliklerini Düzenleme 2.5. Çerçeve İçeriğini Oluşturma ve Düzenleme KONU ALANLARININ AĞIRLIKLARI: KONULAR Yüzde(%) Şablonlar 50 Çerçeveler 50

30 MESLEĞİN ADI : Web Programcılığı İŞ : Web sayfası hazırlama editörünü kullanmak. İŞLEM NO : 1 İŞLEMİN ADI : Şablon işlemlerini gerçekleştirmek. 1. Şablon oluşturmak 2. Bir şablona düzenlenebilir alanlar eklemek 3. Düzenlenebilir alanları kaldırmak 4. İsteğe bağlı içerik alanı oluşturmak 5. Tekrarlana alanlar eklemek 6. Belirli bir şablonu temel alan sayfalar hazırlamak 7. İsteğe bağlı içeriği kontrol etmek 8. Tekrarlanan alanlar eklemek 9. Şablonda değişiklik yapmak : Web sayfaları için şablon ve çerçeve işlemlerini yapmak : Web sayfası tasarım editörünü çalıştırabilecek yeterlikte bilgisayar, internet bağlantısı 1. ŞABLONLAR Şablon araçlarını kullanma 1.1. Şablon Oluşturma 1.2. Şablonda Düzenlenebilir Alanlar Oluşturma 1.3. Düzenlenebilir Alanları Kaldırma 1.4. İsteğe Bağlı İçerik Alanı Oluşturma 1.5. Tekrarlanan Alanlar Ekleme 1.6. Belirli Bir Şablonu Temel Alan Sayfalar Hazırlama 1.7. İsteğe Bağlı İçerik Alanını Kontrol Etme 1.8. Tekrarlanan Alanlar Ekleme 1.9. Şablonda Değişiklik Yapma 1. Detaylara özen göstermek 2. Dürüst olmak 3. İnsan ilişkilerine özen göstermek 4. İş disiplinine sahip olmak 5. Planlı ve organize olmak 6. Sabırlı olmak 7. Sorumluluk sahibi olmak 8. Yeniliklere açık olmak 9. Zamanı iyi kullanmak 10. Mesleği ile ilgili etik değerlere sahip olma NOT: İşlemi Öğrenme Süresi : 16 saat Meslek Elemanının İşlemi Yaptığı Süre : 8 saat

31 MESLEĞİN ADI : Web Programcılığı İŞ : Web sayfası hazırlama editörünü kullanmak. İŞLEM NO : 2 İŞLEMİN ADI : Çerçeve işlemlerini gerçekleştirmek. : Web sayfaları için şablon ve çerçeve işlemlerini yapmak : Web sayfası tasarım editörünü çalıştırabilecek yeterlikte bilgisayar, internet bağlantısı 1. Bir çerçeve oluşturmak 2. Bir çerçeveyi kaydetmek 3. Bir çerçevede bulunan çerçeveleri yeniden boyutlandırmak 4. Çerçeve özelliklerini ayarlamak 5. Çerçeve içeriğini oluşturmak ve düzenlemek 2. ÇERÇEVELER 2.1. Çerçeve Grubu (Frameset) Oluşturma 2.2. Çerçeve Grubunu Kaydetme 2.3. Çerçeve Grubu İçindeki Çerçeveleri Yeniden Boyutlandırma 2.4. Çerçeve Özelliklerini Düzenleme 2.5. Çerçeve İçeriğini Oluşturma ve Düzenleme Çerçeve araçlarını kullanma 1. Detaylara özen göstermek 2. Dürüst olmak 3. İnsan ilişkilerine özen göstermek 4. İş disiplinine sahip olmak 5. Planlı ve organize olmak 6. Sabırlı olmak 7. Sorumluluk sahibi olmak 8. Yeniliklere açık olmak 9. Zamanı iyi kullanmak 10. Mesleği ile ilgili etik değerlere sahip olma NOT: İşlemi Öğrenme Süresi : 16 saat Meslek Elemanının İşlemi Yaptığı Süre : 8 saat

32 MODÜL BİLGİ SAYFASI ALAN : BİLİŞİM TEKNOLOJİLERİ MESLEK/DAL : WEB PROGRAMCILIĞI DERS : WEB TASARIMI VE PROGRAMLAMA MODÜL : WEB TASARIM EDİTÖRÜ 4 KODU : SÜRE : 40/32 ÖN KOŞUL AÇIKLAMA : Web Tasarım Editörü 3 modülünü başarmış olmak : Uygulamalı olarak laboratuar ortamında işlenmelidir. GENEL AMAÇ : Öğrenci bu modül ile gerekli ortam sağlandığında; web sayfaları içinde kullanıcı etkileşimli uygulamaları yapmak ve site yönetimini gerçekleştirmek AMAÇLAR : 1. Form işlemlerini yapmak 2. Etkileşimli öğeler oluşturmak ve açılır menü işlemlerini yapmak 3. Katman işlemlerini gerçekleştirmek. 4. Erişebilirlik ve test işlemlerini yapmak 5. Site yönetimini gerçekleştirmek

33 İÇERİK 1. FORMLAR 1.1. Form Oluşturma 1.2. Form İçeriğini Gruplama 1.3. Tek Satırlı Metin Alanları Ekleme 1.4. Çok Satırlı Metin Alanları Ekleme 1.5. Onay Kutuları Ekleme 1.6. Radyo Düğmeleri Ekleme 1.7. Liste ve Menü Öğeleri Ekleme 1.8. Düğme Ekleme 1.9. Formları Biçimlendirme Formları İşleme Formları Test Etme Sıçrama Menüleri Oluşturma 2. KULLANICI ETKİLEŞİMİ 2.1. Rollover Resmi Ekleme 2.2. Davranış Ekleme 2.4. Etkin Resim Noktalarına Davranış Ekleme 2.5. Eylemleri ve Olayları Düzenleme 2.6. Durum Çubuğu Mesajı Oluşturma 2.7. Web Tarayıcısını Kontrol Etme 2.8. Yeni Tarayıcı Penceresi Açma 2.9. Açılır Menü Oluşturma Formların Geçerliliğini Kontrol Etme 3. KATMANLAR 3.1. Katman Oluşturma 3.2. Katmanları Adlandırma 3.3. Katman Özelliklerini Değiştirme 3.4. Katmanların Yığılma Sırasını Değiştirme 3.5. Katmanları İç içe Yerleştirme 3.6. Katmanın Görünürlük Özelliğini Değiştirme 3.7. Izgara ve Cetvel ile Çalışmak 3.8. Katmanlar Üzerinde Kullanıcı Etkileşimi 3.9. Katmanları Tablolara Dönüştürme 4. ERİŞİLEBİLİRLİK VE TEST 4.1. Uygun Kod Yazma 4.2. Erişilebilirlik Testi 4.3. Tarayıcı Uyumluluğunu Kontrol Etme 4.4. Site Bağlantılarını Kontrol Etme 4.5. Artık Dosyaları Kontrol Etme 4.6. Site İçin Rapor Oluşturma 4.7. Yazım Denetimi 5. SİTE YÖNETİMİ 5.1. Files Paneli 5.2. Siteye Yeni Klasör ve Dosyalar Ekleme

34 5.3. Site Haritası Oluşturma 5.4. Sitenin Bir Alt Bölümünü Görüntüleme 5.5. Site Haritası Görünümünde Bağlantılarla Çalışma 5.6. Harita Görünümünde Sayfalarda Değişiklik Yapma 5.7. Uzak Siteye Bağlanma 5.8. Dosyaları Aktarma 5.9. Sunucu Bağlantıları Oluşturma KONU ALANLARININ AĞIRLIKLARI: KONULAR Yüzde(%) Formlar 20 Kullanıcı Etkileşimi 20 Site Yönetimi / Erişebilirlik ve Test 20 Kodları Düzenlemek 20 Katmanlar 20

35 MESLEĞİN ADI : Web Programcılığı İŞ : Web sayfası hazırlama editörünü kullanmak. İŞLEM NO : 1 İŞLEMİN ADI : Form işlemlerini yapmak. : web sayfaları içinde kullanıcı etkileşimli uygulamaları yapmak ve site yönetimini gerçekleştirmek : Web sayfası tasarım editörünü çalıştırabilecek yeterlikte bilgisayar, internet bağlantısı 1. Bir form oluşturmak 2. Form içeriğini gruplamak 3. Tek satırlı metin alanları eklemek 4. Çok satırlı metin alanları eklemek 5. Onay kutuları eklemek 6. Radyo düğmeleri eklemek 7. Liste ve menü öğeleri eklemek 8. Düğme eklemek 9. Gizli alanlar oluşturmak 10. Formları biçimlendirmek 11. Formları işlemek 12. Formları test etmek 13. Sıçrama menüleri oluşturmak 1. FORMLAR 1.1. Form Oluşturma 1.2. Form İçeriğini Gruplama 1.3. Tek Satırlı Metin Alanları Ekleme 1.4. Çok Satırlı Metin Alanları Ekleme 1.5. Onay Kutuları Ekleme 1.6. Radyo Düğmeleri Ekleme 1.7. Liste ve Menü Öğeleri Ekleme 1.8. Düğme Ekleme 1.9. Formları Biçimlendirme Formları İşleme Formları Test Etme Sıçrama Menüleri Oluşturma Form araçlarını kullanma 1. Detaylara özen göstermek 2. Dürüst olmak 3. İnsan ilişkilerine özen göstermek 4. İş disiplinine sahip olmak 5. Planlı ve organize olmak 6. Sabırlı olmak 7. Sorumluluk sahibi olmak 8. Yeniliklere açık olmak 9. Zamanı iyi kullanmak 10. Mesleği ile ilgili etik değerlere sahip olma NOT: İşlemi Öğrenme Süresi : 8 saat Meslek Elemanının İşlemi Yaptığı Süre : 4 saat

36 MESLEĞİN ADI : Web Programcılığı İŞ : Web sayfası hazırlama editörünü kullanmak. İŞLEM NO : 2 İŞLEMİN ADI : Etkileşimli öğeler oluşturmak ve açılır menü işlemlerini yapmak. : web sayfaları içinde kullanıcı etkileşimli uygulamaları yapmak ve site yönetimini gerçekleştirmek : Web sayfası tasarım editörünü çalıştırabilecek yeterlikte bilgisayar, internet bağlantısı 1. Bir rollover resmi eklemek 2. Davranış eklemek 3. Etkin Resim Noktalarına Davranış Ekleme 4. Eylemleri ve olayları düzenlemek 5. Bir durum çubuğu mesajı oluşturmak 6. Web tarayıcısını kontrol etmek 7. Yeni bir tarayıcı penceresi açmak 8. Bir açılır menü oluşturmak 9. Formların geçerliğini kontrol etmek 2. KULLANICI ETKİLEŞİMİ 2.1. Rollover Resmi Ekleme 2.2. Davranış Ekleme 2.4. Etkin Resim Noktalarına Davranış Ekleme 2.5. Eylemleri ve Olayları Düzenleme 2.6. Durum Çubuğu Mesajı Oluşturma 2.7. Web Tarayıcısını Kontrol Etme 2.8. Yeni Tarayıcı Penceresi Açma 2.9. Açılır Menü Oluşturma Formların Geçerliliğini Kontrol Etme Etkileşimli öğeler oluşturmak ve açılır menü işlemlerini yapmak 1. Detaylara özen göstermek 2. Dürüst olmak 3. İnsan ilişkilerine özen göstermek 4. İş disiplinine sahip olmak 5. Planlı ve organize olmak 6. Sabırlı olmak 7. Sorumluluk sahibi olmak 8. Yeniliklere açık olmak 9. Zamanı iyi kullanmak 10. Mesleği ile ilgili etik değerlere sahip olma

37 NOT: İşlemi Öğrenme Süresi : 8 saat Meslek Elemanının İşlemi Yaptığı Süre : 4 saat İŞLEM ANALİZ FORMU MESLEĞİN ADI : Web Programcılığı İŞ : Web sayfası hazırlama editörünü kullanmak. İŞLEM NO : 3 İŞLEMİN ADI : Katman işlemlerini gerçekleştirmek. : web sayfaları içinde kullanıcı etkileşimli uygulamaları yapmak ve site yönetimini gerçekleştirmek : Web sayfası tasarım editörünü çalıştırabilecek yeterlikte bilgisayar, internet bağlantısı 1. Katman oluşturmak 2. Katmanları adlandırmak 3. Katmanlarda değişiklik yapmak 4. Katmanların yığılma sırasını değiştirmek 5. Katmanları iç içe yerleştirmek ve dışarıya çıkarmak 6. Katmanın görünürlük özelliğini değiştirmek 7. Izgara ve cetvel seçeneklerini ayarlamak 8. Katmanları tablolara dönüştürmek 3. KATMANLAR 3.1. Katman Oluşturma 3.2. Katmanları Adlandırma 3.3. Katman Özelliklerini Değiştirme 3.4. Katmanların Yığılma Sırasını Değiştirme 3.5. Katmanları İç içe Yerleştirme 3.6. Katmanın Görünürlük Özelliğini Değiştirme 3.7. Izgara ve Cetvel ile Çalışmak 3.8. Katmanlar Üzerinde Kullanıcı Etkileşimi 3.9. Katmanları Tablolara Dönüştürme Katman araçlarını kullanma 1. Detaylara özen göstermek 2. Dürüst olmak 3. İnsan ilişkilerine özen göstermek 4. İş disiplinine sahip olmak 5. Planlı ve organize olmak 6. Sabırlı olmak 7. Sorumluluk sahibi olmak 8. Yeniliklere açık olmak 9. Zamanı iyi kullanmak 10. Mesleği ile ilgili etik değerlere sahip olma NOT: İşlemi Öğrenme Süresi : 8 saat Meslek Elemanının İşlemi Yaptığı Süre : 4 saat

38 MESLEĞİN ADI : Web Programcılığı İŞ : Web sayfası hazırlama editörünü kullanmak. İŞLEM NO : 4 İŞLEM İN ADI : Erişebilirlik ve test işlemlerini yapmak. : web sayfaları içinde kullanıcı etkileşimli uygulamaları yapmak ve site yönetimini gerçekleştirmek : Web sayfası tasarım editörünü çalıştırabilecek yeterlikte bilgisayar, internet bağlantısı Uygun Kod Yazmak Erişilebilirlik Testi yapmak Tarayıcı Uyumluluğunu Kontrol Etmek Site Bağlantılarını Kontrol Etmek Artık Dosyaları Kontrol Etmek Site İçin Rapor Oluşturmak Yazımı Denetlemek. 4. ERİŞİLEBİLİRLİK VE TEST 4.1. Uygun Kod Yazma 4.2. Erişilebilirlik Testi 4.3. Tarayıcı Uyumluluğunu Kontrol Etme 4.4. Site Bağlantılarını Kontrol Etme 4.5. Artık Dosyaları Kontrol Etme 4.6. Site İçin Rapor Oluşturma 4.7. Yazım Denetimi Erişebilirlik ve test işlemlerini yapmak. 1. Detaylara özen göstermek 2. Dürüst olmak 3. İnsan ilişkilerine özen göstermek 4. İş disiplinine sahip olmak 5. Planlı ve organize olmak 6. Sabırlı olmak 7. Sorumluluk sahibi olmak 8. Yeniliklere açık olmak 9. Zamanı iyi kullanmak 10. Mesleği ile ilgili etik değerlere sahip olma NOT: İşlemi Öğrenme Süresi : 4saat Meslek Elemanının İşlemi Yaptığı Süre : 2 saat

39 MESLEĞİN ADI : Web Programcılığı İŞ : Web sayfası hazırlama editörünü kullanmak. İŞLEM NO : 5 İŞLEMİN ADI : Site yönetimini gerçekleştirmek. : web sayfaları içinde kullanıcı etkileşimli uygulamaları yapmak ve site yönetimini gerçekleştirmek : Web sayfası tasarım editörünü çalıştırabilecek yeterlikte bilgisayar, internet bağlantısı 1. Bir siteye yeni klasörler ve dosyalar eklemek 2. Bir site haritası oluşturmak 3. Sitenin bir alt bölümünü görüntülemek 4. Bağlantılarla çalışmak 5. Sayfalarda değişiklik yapmak 6. Bir uzak siteye bağlanmak 7. Dosyaları aktarmak 8. Dosyaları ve klasörleri gizlemek 9. Sunucu bağlantıları oluşturmak 5. SİTE YÖNETİMİ 5.1. Files Paneli 5.2. Siteye Yeni Klasör ve Dosyalar Ekleme 5.3. Site Haritası Oluşturma 5.4. Sitenin Bir Alt Bölümünü Görüntüleme 5.5. Site Haritası Görünümünde Bağlantılarla Çalışma 5.6. Harita Görünümünde Sayfalarda Değişiklik Yapma 5.7. Uzak Siteye Bağlanma 5.8. Dosyaları Aktarma 5.9. Sunucu Bağlantıları Oluşturma Site yönetimini gerçekleştirmek 1. Detaylara özen göstermek 2. Dürüst olmak 3. İnsan ilişkilerine özen göstermek 4. İş disiplinine sahip olmak 5. Planlı ve organize olmak 6. Sabırlı olmak 7. Sorumluluk sahibi olmak 8. Yeniliklere açık olmak 9. Zamanı iyi kullanmak 10. Mesleği ile ilgili etik değerlere sahip olma

40 NOT: İşlemi Öğrenme Süresi : 4 saat Meslek Elemanının İşlemi Yaptığı Süre : 2 saat

41 MODÜL BİLGİ SAYFASI ALAN : BİLİŞİM TEKNOLOJİLERİ MESLEK/DAL : WEB PROGRAMCILIĞI DERS : WEB TASARIMI VE PROGRAMLAMA MODÜL : ETKİLEŞİMLİ WEB UYGULAMALARI 1 KODU : SÜRE : 40/32 ÖN KOŞUL AÇIKLAMA : Web Tasarımı Editörü 4 modülünü bitirmiş olmak : Uygulamalı olarak laboratuar ortamında işlenmelidir. GENEL AMAÇ : Öğ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 : 1. Web programlama için gerekli yazılımları kurabilecektir. 2. Temel uygulama geliştirebilecektir.

42 İÇERİK 1. YAZILIM KURULUMU 1.1. Web Sunucusu Kurulumu 1.2..NET Yazılımı Kurulumu 1.3..NET Yazılımının Özellikleri ve Avantajları 1.4. İnternet Uygulamalarında İşleyiş Modelleri 1.5. Sunucu Sayfalarının Çalıştırılması 2. SUNUCU SAYFALARI 2.1. Türkçe Karakterler 2.2. Sayfa Yapısı 2.3. ASP.NET Sayfa Elemanları 2.4. Kodu Alt Satırdan Devam Ettirme 2.5. Program Kodlarına Açıklamalar Eklemek KONU ALANLARININ AĞIRLIKLARI: KONULAR Yüzde(%) Yazılım Kurulumu 40 Programlama Dili Sayfa Yapısı 60

43 MESLEĞİN ADI : Web Programcılığı İŞ :.NET yazılımını kullanarak web programları hazırlamak İŞLEM NO : 1 İŞLEMİN ADI : Web programlama için gerekli yazılımları kurmak : Programlama için gerekli yazılım kurulumlarını yapmak : Web programlama yazılımlarını çalıştırabilecek yeterlikte bilgisayar, internet bağlantısı 1. Web sunucusunu kurmak 2..NET yazılımını kurmak 3. Sunucu sayfalarını çalıştırmak 4. Basit bir sayfa oluşturmak 1. YAZILIM KURULUMU 1.1. Web Sunucusu Kurulumu 1.2..NET Yazılımı Kurulumu 1.3..NET Yazılımının Özellikleri ve Avantajları 1.4. İnternet Uygulamalarında İşleyiş Modelleri 1.5. Sunucu Sayfalarının Çalıştırılması 1..NET yazılımını kullanarak, basit bir sayfa oluşturmak 1. Detaylara özen göstermek 2. Dürüst olmak 3. İnsan ilişkilerine özen göstermek 4. İş disiplinine sahip olmak 5. Planlı ve organize olmak 6. Sabırlı olmak 7. Sorumluluk sahibi olmak 8. Yeniliklere açık olmak 9. Zamanı iyi kullanmak 10. Mesleği ile ilgili etik değerlere sahip olma NOT: İşlemi Öğrenme Süresi : 8 saat Meslek Elemanının İşlemi Yaptığı Süre : 2 saat 43

44 MESLEĞİN ADI : Web Programcılığı İŞ :.NET yazılımını kullanarak web programları hazırlamak İŞLEM NO : 2 İŞLEMİN ADI : Temel uygulama geliştirmek. : Programlama için gerekli yazılım kurulumlarını yapmak : Web programlama yazılımlarını çalıştırabilecek yeterlikte bilgisayar, internet bağlantısı 1. Türkçe karakterleri kullanmak 2. Kodu Alt Satırdan Devam Ettirme 3. Program Kodlarına Açıklamalar Eklemek 2. SUNUCU SAYFALARI 2.1. Türkçe Karakterler 2.2. Sayfa Yapısı 2.3. ASP.NET Sayfa Elemanları 2.4. Kodu Alt Satırdan Devam Ettirme 2.5. Program Kodlarına Açıklamalar Eklemek 1..NET yazılımı ile oluşturulmuş kodların çalışmasını görerek yorumlamak 1. Detaylara özen göstermek 2. Dürüst olmak 3. İnsan ilişkilerine özen göstermek 4. İş disiplinine sahip olmak 5. Planlı ve organize olmak 6. Sabırlı olmak 7. Sorumluluk sahibi olmak 8. Yeniliklere açık olmak 9. Zamanı iyi kullanmak 10. Mesleği ile ilgili etik değerlere sahip olma NOT: İşlemi Öğrenme Süresi : 24 saat Meslek Elemanının İşlemi Yaptığı Süre : 4 saat 44

45 MODÜL BİLGİ SAYFASI ALAN : BİLİŞİM TEKNOLOJİLERİ MESLEK/DAL : WEB PROGRAMCILIĞI DERS : WEB TASARIMI VE PROGRAMLAMA MODÜL : ETKİLEŞİMLİ WEB UYGULAMALARI 2 KODU : SÜRE : 40/32 ÖN KOŞUL AÇIKLAMA : Etkileşimli Web Uygulamaları 1 modülünü başarmış olmak : Uygulamalı olarak laboratuar ortamında işlenmelidir. GENEL AMAÇ : Öğrenci bu modül ile gerekli ortam sağlandığında; Programlama dilinin temel komutları ile web sayfası hazırlayabilecektir. AMAÇLAR : 1. Program içinde sabit ve değişken işlemlerini gerçekleştirebilecektir. 2. Kontrol deyimlerini kullanabilecektir. 3. Döngü işlemlerini gerçekleştirebilecektir. 4. Alt program ve fonksiyonları kullanabilecektir. 45

46 İÇERİK : 1. PROGRAMLAMA DİLİ VE DEĞİŞKENLER 1.1. Programlama Dili 1.2. Değişkenler ve Sabitler 1.3. Değişken Tanımlama 1.4. Değişken İsimlendirmede Dikkat Edilecek Noktalar 1.5. Değişkenlere Değer Atama 1.6. Değişken Tip Dönüşümü 1.8. Sabitler 1.9. İşleçler (Operatörler) 2. KONTROL DEYİMLERİ 2.1. Kontrol Deyimleri If Then Deyimi If Then Else Deyimi Else if Deyimi Select Case Deyimi 3. DÖNGÜ DEYİMLERİ 3.1. Döngü Deyimleri For Next Deyimi For Each Deyimi While End While Deyimi Do While Loop Deyimi Do Until Loop Deyimi 4. ALT PROGRAMLAR 4.1. Alt Programlar (Subroutines) 4.2. Fonksiyonlar (Functions) KONU ALANLARININ AĞIRLIKLARI: KONULAR Yüzde(%) Programlama dili 25 Kontrol Deyimleri 25 Döngü Deyimleri 25 Alt Programlar 25 46

47 MESLEĞİN ADI : Web Programcılığı İŞ :.NET yazılımını kullanarak web programları hazırlamak İŞLEM NO : 1 İŞLEMİN ADI : Sabit ve değişkenlerle çalışmak : Programlama dilinin temel komutları ile web sayfası hazırlamak : Web programlama yazılımlarını çalıştırabilecek yeterlikte bilgisayar, internet bağlantısı 1. Hatasız değişken tanımlamak 2. Değişkenlere değer atamak 3. Değişken tip dönüşümlerini yapmak 4. Dizi değişkenlerini kullanmak 5. Sabitleri kullanmak 6. İşleçleri kullanmak 1. PROGRAMLAMA DİLİ VE VE DEĞİŞKENLER 1.1. Programlama Dili 1.2. Değişkenler ve Sabitler 1.3. Değişken Tanımlama 1.4. Değişken İsimlendirmede Dikkat Edilecek Noktalar 1.5. Değişkenlere Değer Atama 1.6. Değişken Tip Dönüşümü 1.8. Sabitler 1.9. İşleçler (Operatörler) 1..NET yazılımı ile değişken ve sabit işlemlerini yapmak 1. Detaylara özen göstermek 2. Dürüst olmak 3. İnsan ilişkilerine özen göstermek 4. İş disiplinine sahip olmak 5. Planlı ve organize olmak 6. Sabırlı olmak 7. Sorumluluk sahibi olmak 8. Yeniliklere açık olmak 9. Zamanı iyi kullanmak 10. Mesleği ile ilgili etik değerlere sahip olma NOT: İşlemi Öğrenme Süresi : 8 saat Meslek Elemanının İşlemi Yaptığı Süre : 2 saat 47

48 MESLEĞİN ADI : Web Programcılığı İŞ :.NET yazılımını kullanarak web programları hazırlamak İŞLEM NO : 2 İŞLEMİN ADI : Kontrol deyimlerini kullanmak : Programlama dilinin temel komutları ile web sayfası hazırlamak : Web programlama yazılımlarını çalıştırabilecek yeterlikte bilgisayar, internet bağlantısı 1. If Then Deyimini kullanmak 2. If Then Else Deyimini kullanmak 3. Else if Deyimini kullanmak 4. Select Case Deyimini kullanmak 2. KONTROL DEYİMLERİ 2.1. Kontrol Deyimleri If Then Deyimi If Then Else Deyimi Else if Deyimi Select Case Deyimi Kontrol deyimlerini kullanmak 1. Detaylara özen göstermek 2. Dürüst olmak 3. İnsan ilişkilerine özen göstermek 4. İş disiplinine sahip olmak 5. Planlı ve organize olmak 6. Sabırlı olmak 7. Sorumluluk sahibi olmak 8. Yeniliklere açık olmak 9. Zamanı iyi kullanmak 10. Mesleği ile ilgili etik değerlere sahip olma NOT: İşlemi Öğrenme Süresi : 8 saat Meslek Elemanının İşlemi Yaptığı Süre : 2 saat 48

49 MESLEĞİN ADI : Web Programcılığı İŞ :.NET yazılımını kullanarak web programları hazırlamak İŞLEM NO : 3 İŞLEMİN ADI : Döngü deyimlerini kullanmak : Programlama dilinin temel komutları ile web sayfası hazırlamak : Web programlama yazılımlarını çalıştırabilecek yeterlikte bilgisayar, internet bağlantısı 1. For Next Deyimini kullanmak 2. For Each Deyimini kullanmak 3. While End While Deyimini kullanmak 4. Do While Loop Deyimini kullanmak 5. Do Until Loop Deyimini kullanmak 3. DÖNGÜ DEYİMLERİ 3.1. Döngü Deyimleri For Next Deyimi For Each Deyimi While End While Deyimi Do While Loop Deyimi Do Until Loop Deyimi Koşula uygun olarak kullanılacak döngü deyimini belirleyebilmek. 1. Detaylara özen göstermek 2. Dürüst olmak 3. İnsan ilişkilerine özen göstermek 4. İş disiplinine sahip olmak 5. Planlı ve organize olmak 6. Sabırlı olmak 7. Sorumluluk sahibi olmak 8. Yeniliklere açık olmak 9. Zamanı iyi kullanmak 10. Mesleği ile ilgili etik değerlere sahip olma NOT: İşlemi Öğrenme Süresi : 8 saat Meslek Elemanının İşlemi Yaptığı Süre : 2 saat 49