Email: levent.bayindir@atauni.edu.tr

BIM-206 – Web Programlama


Duyurular

  • 17.03.2018 Dersin web sayfası yeni dönem için güncellendi.

Web programlama dersinin amacı, öğrencilere Internet teknolojisi temel kavramlarının verilmesi, istemci (Html, CSS ve JavaScript) ve sunucu tarafı web teknolojilerini kullanarak web sitesi ve web uygulaması geliştirme becerisini kazandırmaktır.

Ders Asistanları: Arş. Gör. M. Furkan Keskenler
Ofis saati:

Ders Saati ve Yeri

    • Örgün Öğretim: Salı, 9-12 arası, TRSE1
    • İkinci Öğretim: Cumartesi, 9-12 arası, TRSE1

Notlandırma

Notlandırma yüzdeleri, %50-50 ve %60-40 not sistemlerinin her ikisi için de geçerlidir.

Ölçüm kriteri Etki Açıklama
Derse katılım %5 Derste verilen haftalık ödevlerin gerçekleştirimi ve derse katılım değerlendirmesi.
Proje 1 %15 Ders ile ilişkili bir konunun detaylı olarak araştırılması, varsa uygulamalarının yapılması ve sunumu. Proje aşamalı olarak asistan/hoca yönlendirmesi ile yapılacaktır.
Proje 2 %15 Belirlenen alandaki websitesinin uygulama tasarlama programları aracılığıyla detaylı olarak tasarlanması ve HTML ve CSS kullanılarak gerçekleştirimi.
Vize %15 Dönem arası sınavı.
Final %50 Dönem sonu sınavı.

Ders Kitapları

    • HTML and CSS: Design and Build Websites, Jon Duckett, Wiley, 2011.
    • A Smarter Way to Learn JavaScript, Mark Myers, CreateSpace Independent Publishing Platform, 2014.
    • JavaScript: The Definitive Guide, David Flanagan, 6th ed., O’Reilly Media, 2011.
    • PhoneGap Beginner’s Guide, Purusothaman Ramanujan ve Giorgio Natili, 3rd ed., Packt Publishing, 2015.
    • Django By Example, Antonio Melé, Packt Publishing, 2015.

Ders Notları

Ders Çizelgesi ve Ders Notları

Hafta Konu(lar)
1 Web Mimarisi ve HTTP
Web Tarayıcısı, HTML Kaynak Kodu, Web Sunucusu, TCP/IP, OSI, DNS, HTTP, HTTP İsteği, HTTP Yanıtı, HTTP İstek Başlığı, HTTP İstek Yöntemleri, HTTP Yanıt Başlığı, HTTP Durum Kodları, HTTP Başlık Değişkenleri ve HTTP MIME Tipleri
2 Zengin Metin İşaret Dili (HTML) (1/2)
Elemanlar, Etiketler, Açılış ve Kapanış Etiketi, Etiket Özellikleri, Boşluk Karakteri, HTML Karakter Kodları ve Çeşitli HTML Etiketler: HTML, HEAD, TITLE, BODY, H1…H6, P, B, STRONG, SUP, SUB, BLOCKQUOTE, Q, CITE, DFN, ADDRESS, S, OL, LI, UL, DL, DT, DD ve A.
3 Zengin Metin İşaret Dili (2/2)
İmgeler, İmgelerin Konumlandırılması ve Hizalandırılması, FIGURE ve FIGCAPTION Etiketleri, Tablolar, Tablo Başlıkları, Hücrelerin Birden Fazla Sütuna/Satıra Yayılması, Uzun Tablolar, Kenarlıklar ve Arka Plan Rengi, HTML Renk Kodları, HTML Formları ve Bileşenleri, Form Bileşenlerinin Etiketlenmesi ve Gruplanması, HTML5 Form Özellikleri, HTML Açıklama Satırları, ID ve CLASS Özellikleri, Blok ve Satıriçi Elemanlar, DIV, SPAN, IFRAME, META, VIDEO ve AUDIO HTML Etiketleri
4 Basamaklı Stil Şablonları (CSS) (1/2)
CSS Kuralları: Ayırıcı Anahtar, Özellik ve Değer, Harici ve Dahili CSS Kullanımı, Ayırıcı Anahtar Çeşitleri, CSS Öncelik Sırası, CSS ve Kalıtım, Ön/Arka Plan Rengi, Işık Geçirmezlik, CSS Renkleri – HSL ve HSLA, Yazı Biçimleri, Font Özellikleri, Yazı Boyutu Birimleri, Font Formatları, Font Ağırlığı ve Stili, Metin Dönüşümü, Metin Hizalama, Metni İçeri Almak, Bağlantıların Stillendirilmesi, Özellik Seçiciler, Kutuların Boyutunun Belirlenmesi ve İçerik Taşması Kontrolü
5 Basamaklı Stil Şablonları (2/2)
Kenarlıklar ve Kenarlık Özellikleri, Margin ve Padding Kullanımı, Kutuların Gizlenmesi, Liste Elemanı Simgesini Değiştirmek, İmgeli Liste Elemanları, Liste Elemanı Konumlandırma, Liste Elemanı Özellikleri, İmleç Stili, Web Sayfası Düzeni, Kapsayan Elemanlar, Normal/Göreceli/Mutlak/Sabit Yerleştirme, Z-İndeks, Kayan Yerleştirme, Float ile Çok Sütunlu Yerleştirme ve İmgelerin Boyutlarının Kontrolü
6 JavaScript (1/3)
JavaScript nedir?, JavaScript ve Java İlişkisi, JavaScript Tarihçesi, Unicode ve Kod Yorumları, Veri Tipleri ve Değerleri, Sayılar, Gün ve Zaman, String, Uyarı Pencereleri, Değişken Tanımlama, Prompt, If Cümleleri, If-else ve else-if Cümleleri, Birden Fazla Şartın Test Edilmesi, Diziler, Dizilere Sonradan Eleman Eklemek, Diziler Üzerinde Pop ve Push İşlemleri, Diziler Üzerinde Shift ve Unshift İşlemleri, Diziler Üzerinde Splice İşlemi, Diziler Üzerinde Slice İşlemi, For Döngüsü, Dizi Uzunluğu ve Döngüyü Bölme, Büyük/Küçük Harf Dönüşümü, String İfadeyi Parçalara Bölmek, String İfadelerin Uzunlukları, String İfadelerde Arama, charAt Metodu, replace Metodu, Sayıların Yuvarlanması, Rastgele Sayılar Üretmek, String İfadelerin Sayıya Dönüştürülmesi ve Ondalıklı Sayıların Uzunluğu
7 JavaScript (2/3)
Şu Anki Gün ve Zamanı Elde Etmek, Belirli Bir Gün ve Zamanı Belirlemek, Gün ve Zamanı Değiştirmek, Fonksiyonlar, Fonksiyonlara Parametre Gönderme, Fonksiyonlardan Değer Döndürmek, Yerel ve Global Değişkenler, Switch Yapıları, While ve Do-while Döngüleri, JavaScript Kodunun HTML Sayfası İçerisine Yerleştirilmesi,
JavaScript Dosyalarına HTML Dosyasından Referans Vermek, Olaylar, Satıriçi Olay Denetimi, Buton ve Resim için Tıklama Olayları, Fare Olayları, Odak Olma ve Odaklıktan Çıkma Olayları, Form Bileşenlerinin Değerlerinin Okunması, Sayfa Bileşenlerinin Değerinin Değiştirilmesi, Paragrafın Değiştirilmesi, Div İçerisine Liste Ekleme, getElementById(element id).innerHTML, Resimleri Gizlemek, Yeni CSS Sınıfı Eklemek, Bir Bağlantıya Ait URL’in Elde Edilmesi, Stil Değişiklikleri Yapmak ve Sayfanın Alt Elemanlarında Arama Yapmak
8 VİZE
9 JavaScript (3/3)
Döküman Nesne Modeli (DOM), DOM: Üst ve Alt Nodlar, DOM Ağacında Nod Aramak, Çöp Nodlar ve nodeType, Nod Tipleri, firstChild ve lastChild Özellikleri, parentNode Özelliği, nextSibling ve previousSibling Özellikleri, nodeValue Özelliği, Elementlerin Sayılması, Nod Özellikleri, Özellik Adları ve Değerleri, Nod Eklemek, Nod Silmek, Web Tarayıcısı Kontrolü: URL’yi almak ve Değiştirmek, Web Sayfasının Yeniden Yüklenmesi, İleri veya Geri Gitmek, Referrer, Pencereyi İçerikle Doldurmak, Açılan Pencerenin Kapatılması, Pencerenin Boyutunun ve Konumunun Belirlenmesi, Form Doğrulama: Metin Alanları, Drop-down, Radio Button ve Posta Kodları, Olayların İşlenmesi
10 Apache Cordova
Introduction to Apache Cordova: Understanding what Apache Cordovais all about, Get an overview of the history of Apache Cordova/PhoneGap, The evolution of PhoneGap and Cordova, Learn the differences between the mobile web and mobile app, Learn how to configure your development environment and all the dependencie, Building your First PhoneGap App: Take a look at the structure of a PhoneGap/Cordova application, Learn about using the command-line tools of Cordova, Know about Cordova lifecycle events and Create a sample example, Working with Plugins: Learn what a Cordova plugin is and how to install the plugins in your project, Know how to list all the installed plugins and remove unwanted plugins, Understand how to manage project plugins and their dependencies using Plugman, Discover how to implement the Device API in the project, Accessing the Device Sensors and Locations API: Learn which are the most common device sensors and how to use them in order to enhance the user experience, Get an overview of the device orientation and device motion events using the accelerometer, Learn how to work with device sensors directly with JavaScript, ‹ Learn how to use the Compass API of PhoneGap, Learn about geolocation and how its data is available in the device, Learn how to use the Cordova Geolocation API and how to integrate the Google Maps API in an app.
11 Django (1/3)
12 Django (2/3)
13 Django (3/3)

Uygulama Tasarlama Programları

    • Pencil Project – Uygulamalar veya web siteleri için tasarım programı
    • MockingBot – Mobil uygulamalar için taslak (wireframe) oluşturma programı
    • Balsamiq – Uygulamalar veya web siteleri için tasarım programı
    • UXPin – Her tür uygulama için profesyonel taslak (wireframe) oluşturma programı
    • Webflow – Modern WYSIWYG web editörü

Electron Kaynakları

    • Electron – Electron projesinin ana sayfası.
    • Photon – Photon projesinin ana sayfası.

Mobil Uygulama Geliştirme Kaynakları

Faydalı Chrome Eklentileri

    • WhatFont – Web sayfalarındaki yazı fontunun ne olduğunu kolayca belirlemeyi sağlayan eklenti.
    • Grammarly for Chrome – Web tarayıcısında yazı yazarken yazım hatalarını tespit edip düzeltme önerebilen eklenti.
    • ColorZilla – Web tarayıcısının herhangi bir noktasındaki rengi tespit etmek için kullanılabilen eklenti.
    • Window Resizer – Farklı ekran çözünürlükleri için web taracısı penceresini yeniden boyutlandırabilen eklenti.

Diğer Kaynaklar

Contact us

We're not around right now. But you can send us an email and we'll get back to you, asap.

Questions, issues or concerns? I'd love to help you!

Click ENTER to chat