TÜRKÇE
ENGLISH
Information
| Code | AIS312 |
| Name | Web Design |
| Term | 2024-2025 Academic Year |
| Semester | 6. Semester |
| Duration (T+A) | 2-1 (T-A) (17 Week) |
| ECTS | 5 ECTS |
| National Credit | 2 National Credit |
| Teaching Language | Türkçe |
| Level | Lisans Dersi |
| Type | Normal |
| Label | E Elective |
| Mode of study | Yüz Yüze Öğretim |
| Catalog Information Coordinator | |
| Course Instructor |
Doç. Dr. SEVDA ÜNAL
(A Group)
(Ins. in Charge)
|
Course Goal / Objective
The aim of the Web Design course is to provide students with the ability to create effective and user-friendly websites using the basic principles, tools and technologies of modern web design.
Course Content
Creating the structure of web pages with HTML, creating style and layout with CSS, adding interactivity with JavaScript, creating websites compatible with different devices with responsive design techniques, and applying accessibility and SEO principles will be covered.
Course Precondition
There are no prerequisites for the course.
Resources
Aydemir, M. (2009). Web tasarım rehberi. Kodlab. Balaban, Erkan. (2011) Web Tasarım Kılavuzu. İstanbul: Pusula Yayınları.
Notes
Duckett,Jon. (2011). HTML and CSS: Design and Build Websites. USA: John Wiley & Sons.
Course Learning Outcomes
| Order | Course Learning Outcomes |
|---|---|
| LO01 | Designs web pages at a basic level through HTML and CSS. |
| LO02 | Organises the pages visually. |
| LO03 | Adds interactive elements (e.g. form validation, animations) to web pages with JavaScript. |
| LO04 | Develops websites compatible with different devices using responsive design techniques. |
| LO05 | Applies the principles of accessibility in web design. |
| LO06 | Applies the basic principles of SEO (Search Engine Optimisation) to web pages. |
| LO07 | Optimises search engines. |
| LO08 | Uses the basic tools needed in web design (e.g. text editors, browser developer tools) effectively. |
| LO09 | Web tasarım sürecinde karşılaşılan sorunlara çözüm üretir. |
Relation with Program Learning Outcome
| Order | Type | Program Learning Outcomes | Level |
|---|---|---|---|
| PLO01 | Bilgi - Kuramsal, Olgusal | Defines advanced theoretical and practical knowledge supported by research methods and techniques and other sources in the field of radio, television and cinema. | |
| PLO02 | Bilgi - Kuramsal, Olgusal | Graduates know the basic concepts of the field of communication. | 2 |
| PLO03 | Bilgi - Kuramsal, Olgusal | Graduates recall knowledge of program production and management related to audio and visual broadcasting. | 3 |
| PLO04 | Beceriler - Bilişsel, Uygulamalı | Graduates design various types of scripts and programs that can be used in cinema, television and radio sectors. | |
| PLO05 | Beceriler - Bilişsel, Uygulamalı | Graduates interpret the field of radio, television and cinema within the framework of critical thinking. | |
| PLO06 | Beceriler - Bilişsel, Uygulamalı | Graduates research different fields of social sciences by adapting them to their own field of specialization. | |
| PLO07 | Beceriler - Bilişsel, Uygulamalı | Graduates explain basic information about program production and management related to audio and visual broadcasting. | |
| PLO08 | Beceriler - Bilişsel, Uygulamalı | Graduates relate art, aesthetics, law and general culture knowledge about the field. | |
| PLO09 | Beceriler - Bilişsel, Uygulamalı | Graduates use broadcasting and production technologies. | |
| PLO10 | Yetkinlikler - Bağımsız Çalışabilme ve Sorumluluk Alabilme Yetkinliği | Graduates work both individually and as a team in the field. | 3 |
| PLO11 | Yetkinlikler - Öğrenme Yetkinliği | Graduates adapt social problems at national and international level to professional studies. | |
| PLO12 | Yetkinlikler - Öğrenme Yetkinliği | Graduates gain the competence of using communication technologies, monitoring changes and continuous self-improvement. | 4 |
| PLO13 | Yetkinlikler - İletişim ve Sosyal Yetkinlik | Graduates participate in various social, cultural and artistic activities in the field. | |
| PLO14 | Yetkinlikler - İletişim ve Sosyal Yetkinlik | Graduates carry out the tasks expected from him/her as a team member in the applications in his/her field with an interdisciplinary perspective. | |
| PLO15 | Yetkinlikler - İletişim ve Sosyal Yetkinlik | Graduates use information and communication technologies together with the computer software required by the field. | 5 |
| PLO16 | Yetkinlikler - Alana Özgü Yetkinlik | Graduates produce visual and audio content with the scientific formation acquired. | |
| PLO17 | Yetkinlikler - Alana Özgü Yetkinlik | Graduates analyze a film, a script or a television program from a technical, aesthetic and ideological perspective. | |
| PLO18 | Yetkinlikler - Alana Özgü Yetkinlik | Graduates are committed to ethical principles in their professional practice, free from prejudice and against discrimination. | 3 |
| PLO19 | Yetkinlikler - Alana Özgü Yetkinlik | Graduates defend the universality of social and cultural rights, social justice awareness and cultural heritage. | |
| PLO20 | Yetkinlikler - Alana Özgü Yetkinlik | Graduates prepare working environments such as studio and set in accordance with quality management processes and occupational health/safety. |
Week Plan
| Week | Topic | Preparation | Methods |
|---|---|---|---|
| 1 | Course content and resource presentation | Reading course information pack | Öğretim Yöntemleri: Soru-Cevap |
| 2 | Introduction to Web Design: Basic Concepts, Overview of Web Technologies | Doing a general research about web design and basic technologies. | Öğretim Yöntemleri: Anlatım, Soru-Cevap, Örnek Olay |
| 3 | HTML Basics: Tags, Structural Elements, Text Formatting | Reading about HTML basic tags. | Öğretim Yöntemleri: Anlatım, Alıştırma ve Uygulama |
| 4 | HTML: Lists, Tables, Forms | Preparation of preliminary work on HTML lists, tables and forms. | Öğretim Yöntemleri: Alıştırma ve Uygulama, Anlatım |
| 5 | CSS Basics: Selectors, Colours, Fonts, Box Model | Reading about the basic concepts of CSS. | Öğretim Yöntemleri: Alıştırma ve Uygulama, Anlatım |
| 6 | CSS : Flexbox, Grid Layout, Positioning | Preliminary study about Flexbox and Grid Layout. | Öğretim Yöntemleri: Alıştırma ve Uygulama, Bireysel Çalışma |
| 7 | Responsive Design: Media Queries, Mobile Compatible Design | Reading about responsive design principles. | Öğretim Yöntemleri: Gösterip Yaptırma, Anlatım |
| 8 | Mid-Term Exam | Review of all topics | Ölçme Yöntemleri: Yazılı Sınav |
| 9 | JavaScript Basics:Variables, Conditions, Loops, Functions | Preliminary study about the basic concepts of JavaScript. | Öğretim Yöntemleri: Alıştırma ve Uygulama, Anlatım |
| 10 | DOM Manipulation with JavaScript: Element Selection, Event Management | Reading about DOM and event management. | Öğretim Yöntemleri: Alıştırma ve Uygulama |
| 11 | Accessibility in Web Design: WAI-ARIA, Semantic HTML | Accessibility in Web Design: WAI-ARIA, Semantic HTML | Öğretim Yöntemleri: Anlatım, Grup Çalışması |
| 12 | SEO (Search Engine Optimisation): Basic Principles and Practices | Reading about the basic principles of SEO. | Öğretim Yöntemleri: Anlatım, Soru-Cevap, Gösterip Yaptırma |
| 13 | Web Design Tools: Text Editors | Preliminary study about web design tools. | Öğretim Yöntemleri: Alıştırma ve Uygulama |
| 14 | Web Design Tools: Browser Developer Tools | Preliminary study about web design tools. | Öğretim Yöntemleri: Alıştırma ve Uygulama |
| 15 | Project Development: A Complete Website Using HTML, CSS, JavaScript | Completion of the necessary research and planning for the project. | Öğretim Yöntemleri: Alıştırma ve Uygulama, Grup Çalışması |
| 16 | Term Exams | Final Project Presentations and Evaluation | Ölçme Yöntemleri: Proje / Tasarım |
| 17 | Term Exams | Final Project Presentations and Evaluation | Ölçme Yöntemleri: Proje / Tasarım |
Student Workload - ECTS
| Works | Number | Time (Hour) | Workload (Hour) |
|---|---|---|---|
| Course Related Works | |||
| Class Time (Exam weeks are excluded) | 14 | 3 | 42 |
| Out of Class Study (Preliminary Work, Practice) | 14 | 3 | 42 |
| Assesment Related Works | |||
| Homeworks, Projects, Others | 1 | 2 | 2 |
| Mid-term Exams (Written, Oral, etc.) | 1 | 12 | 12 |
| Final Exam | 1 | 18 | 18 |
| Total Workload (Hour) | 116 | ||
| Total Workload / 25 (h) | 4,64 | ||
| ECTS | 5 ECTS | ||