At the end of this course, the students; 1) Defines basic web technologies. 2) Demonstrates skill for creating HTML pages. 3) Can define what the interface is and which criteria are important in interface design. 4) Comprehends the process of creating a conceptual model for a website. 5) Carries its current knowledge on page layout, color usage and typography to the web. 6) Plan and execute the creation process of a web page. 7) Can create interactive designs. 8) Demonstrates skills to implement web standards-based websites. 9) Designs adaptive, accessible and optimized websites.
MODE OF DELIVERY
Face to face
PRE-REQUISITES OF THE COURSE
No
RECOMMENDED OPTIONAL PROGRAMME COMPONENT
COURSE DEFINITION
This course; The concept of user interface design includes creative, innovative, artistic interface designs for different devices and applications such as computers, mobile phones, components of interface design, interaction, usability, readability, accessibility.
The aim of the course is to enable students to create a design by applying the principles of human-computer interaction to useful, productive and effective user interfaces, and to provide basic information in order to create high-quality, interactive, content-rich web publications in accordance with current design methods.
COURSE CONTENTS
WEEK
TOPICS
1st Week
Internet history, Basic Protocols, File Formats, Basic Concepts.
2nd Week
Introduction to HTML Codes, Introduction to HTML Code Applications.
3rd Week
To give text type, size and color with HTML Head Commands, HTML Body Commands, HTML Body Codes, editing texts and images with HTML Body Codes.
4th Week
Creating tables with HTML Body Codes. HTML Form Elements, creating and submitting forms with HTML codes, adding asp or php codes.
5th Week
Types of CSS on the website: typography, consistency, color settings, original Project, implementation.
6th Week
Introduction to Dreamweaver HTML editor, Adobe Dreamweaver CS6 program interface introduction.
7th Week
Midterm.
8th Week
Using HTML and CSS properties in Properties Panel, creating in-document link, adding image, linking to different places in the image.
9th Week
Preparing templates for web in Adobe Photoshop program.
10th Week
Creating Tables in Dreamweaver: Giving content to rows and columns, Linking cells, Designing Table menu cells as buttons. Creating forms in Dreamweaver, adding form elements, spry codes.
11th Week
Adding flash video in Dreamweaver, calling video from different video sharing sites by opening a page within a page with Iframe code.
12th Week
CSS applications and div codes. Lightbox application: organizing portfolio works.
13th Week
Placing ready-made Java script and CSS codes in the head commands area.
14th Week
Final Project Application.
RECOMENDED OR REQUIRED READING
Sam Quayle, 2010, An Introduction to HTML Prototyping Jennifer Tidwell, A Pattern Language for HCI Design, http://www.mit.edu/~jtidwell/ Handcraft ? Online prototyping tool. Alternative to Codeanywhere TextMate ? Recommended code editor for Mac OS X E - TextEditor ? Recommended code editor for Windows When can I use? ? A good resource for checking browser compatibility of HTML and CSS features Code Academy ? Online course for learning programming basics with JavaScript Grover, C. ; Flash CS6: The Missing Manual, O?Reilly Media, 2012 Gümüştepe, Y.; Dreamweaver CS6; Kodlab Yayın Dağıtım, 2013
PLANNED LEARNING ACTIVITIES AND TEACHING METHODS
Lecture,Discussion,Practice,Project,Presentation
ASSESSMENT METHODS AND CRITERIA
Quantity
Percentage(%)
Mid-term
1
20
Practice
1
20
Project
1
40
Total(%)
80
Contribution of In-term Studies to Overall Grade(%)
80
Contribution of Final Examination to Overall Grade(%)
20
Total(%)
100
ECTS WORKLOAD
Activities
Number
Hours
Workload
Midterm exam
1
1
1
Preparation for Quiz
Individual or group work
14
3
42
Preparation for Final exam
1
5
5
Course hours
14
6
84
Preparation for Midterm exam
1
5
5
Laboratory (including preparation)
14
4
56
Final exam
1
1
1
Homework
1
6
6
Project
1
10
10
Total Workload
210
Total Workload / 30
7
ECTS Credits of the Course
6
LANGUAGE OF INSTRUCTION
Turkish
WORK PLACEMENT(S)
No
KEY LEARNING OUTCOMES (KLO) / MATRIX OF LEARNING OUTCOMES (LO)
