| EUROPEAN UNION RELATIONS | |||||
| Bachelor | TR-NQF-HE: Level 6 | QF-EHEA: First Cycle | EQF-LLL: Level 6 | ||
| Course Code | Course Name | Semester | Theoretical | Practical | Credit | ECTS |
| VCD3112 | Introduction to User Interface Design | Fall | 2 | 2 | 3 | 5 |
| This catalog is for information purposes. Course status is determined by the relevant department at the beginning of semester. |
| Language of instruction: | English |
| Type of course: | Non-Departmental Elective |
| Course Level: | Bachelor’s Degree (First Cycle) |
| Mode of Delivery: | Face to face |
| Course Coordinator : | Dr. Öğr. Üyesi İPEK TORUN |
| Recommended Optional Program Components: | None |
| Course Objectives: | This course concentrates on training the students to develop effective graphic design interfaces with Web page design. Analysis and design phases of the Web development process will be executed through given tasks. Besides, students explore new software and technical information for creating content and design graphics for Web. Concept development from group discussions to final execution is encouraged. |
|
The students who have succeeded in this course; 1) define basic web technologies 2) define the Internet technologies that enable the World Wide Web 3) display skills to implement web sites based on web standards 4) design adaptable, accessible and optimized web sites 5) display skills to build HTML pages 6) display skills to style HTML pages using CSS 7) define capabilities and limitations of JavaScript 8) display skills to create and optimize multimedia content for the web 9) use common design patterns while designing web sites 10) display skills to balance aesthetics and usability issues when designing websites |
| The course is structured in three parts. First part aims students to understand the “High Level Design Decisions and Design Strategy for Web Development”, analyzing the requirements of the stakeholders of a web site to develop a conceptual content model prior to the visual design of the web page. Second part will concentrate on visual design of web interfaces through a prototyping process for visualizing the ideas in the conceptual model and developing clear navigation tools for information requirements of stakeholders. Students will transfer their prior knowledge on layout, colors and typography to web medium. The third part aims to give technical skills on production of web sites, including the animation tools, hypertext markup and optimized graphics. |
| Week | Subject | Related Preparation |
| 1) | First meeting: Introduction to the course, class discussion on course and student objectives | |
| 2) | A brief history of the web. Introduction to web technologies and internet infrasructure. Assignment 1: Website analysis | |
| 3) | HTML elements, attributes and document structure. Exercise 1: Building a basic HTML page. Presentation of Assignment 1. Assignment 2: Simple CV | |
| 4) | Introduction to CSS: Selectors, statements and the cascade. Exercise 2: Styling Assignment 2. Assignment 3: Styling Exercise 1 | |
| 5) | Semantic HTML and accessibility. CSS box model and positioning, attribute and pseudo-selectors. Resources: Using images on a web page. Project 1: Design patterns | |
| 6) | Resources: static resources and image optimization. Project 1 research presentations and critique. | |
| 7) | Graceful degradation and responsive design. CSS @ rules and media types. Project 2: Portfolio website | |
| 8) | Javascript: Programming basics. Variables, types, arrays, hashes and functions. Project 2 critique. | |
| 9) | Javascript: The Document Object Model (DOM). Project 2 critique. | |
| 10) | Javascript frameworks and graceful degradation. Browser compatibility. Project 2 Presentation | |
| 11) | HTML Forms. CSS tips & tricks. Final project. | |
| 12) | Text encoding. Language specifics. Search Engine Optimization (SEO). Final project critique. | |
| 13) | Embedded multimedia. Final project critique. | |
| 14) | Recap. Final project critique. |
| Course Notes / Textbooks: | Will be distributed weekly |
| References: | 1) ISO-9241-151 Ergonomics of human-system interaction — Part 151: Guidance on World Wide Web user interfaces 2) Sam Quayle, 2010, An Introduction to HTML Prototyping 3) Jennifer Tidwell, A Pattern Language for HCI Design, http://www.mit.edu/~jtidwell/ 4) Handcraft — Online prototyping tool. Alternative to Codeanywhere 5) TextMate — Recommended code editor for Mac OS X E - TextEditor — Recommended code editor for Windows Mozilla Developer Network — HTML, CSS and JavaScript reference 6) When can I use… — A good resource for checking browser compatibility of HTML and CSS features 7) A List Apart — Recommended reading on web technologies Course slides — The presentation I use in class FontSquirrel — Good resource for web-ready fonts and home of the @font-face generator 8) Google Web Fonts — Web fonts served by Google for free Code Academy — Online course for learning programming basics with JavaScript 9) InVision — Web bsed tool for building image-based mock-ups |
| Semester Requirements | Number of Activities | Level of Contribution |
| Application | 8 | % 15 |
| Quizzes | 1 | % 5 |
| Homework Assignments | 2 | % 40 |
| Final | 1 | % 40 |
| Total | % 100 | |
| PERCENTAGE OF SEMESTER WORK | % 60 | |
| PERCENTAGE OF FINAL WORK | % 40 | |
| Total | % 100 | |
| Activities | Number of Activities | Workload |
| Course Hours | 14 | 56 |
| Study Hours Out of Class | 13 | 44 |
| Homework Assignments | 8 | 16 |
| Quizzes | 1 | 4 |
| Final | 1 | 4 |
| Total Workload | 124 | |
| No Effect | 1 Lowest | 2 Low | 3 Average | 4 High | 5 Highest |
| Program Outcomes | Level of Contribution | |
| 1) | To be able to examine, interpret data and assess ideas with the scientific methods in the area of EU studies. | 2 |
| 2) | To be able to inform authorities and institutions in the area of EU studies, to be able to transfer ideas and proposals supported by quantitative and qualitative data about the problems. | 2 |
| 3) | To be introduced to and to get involved in other disciplines that EU studies are strongly related with (political science, international relations, law, economics, sociology, etc.) and to be able to conduct multi-disciplinary research and analysis on European politics. | 3 |
| 4) | To be able to evaluate current news on European Union and Turkey-EU relations and identify, analyze current issues relating to the EU’s politics and policies. | 2 |
| 5) | To be able to use English in written and oral communication in general and in the field of EU studies in particular. | 1 |
| 6) | To have ethical, social and scientific values throughout the processes of collecting, interpreting, disseminating and implementing data related to EU studies. | 1 |
| 7) | To be able to assess the historical development, functioning of the institutions and decision-making system and common policies of the European Union throughout its economic and political integration in a supranational framework. | 2 |
| 8) | To be able to evaluate the current legal, financial and institutional changes that the EU is going through. | 2 |
| 9) | To explain the dynamics of enlargement processes of the EU by identifying the main actors and institutions involved and compare previous enlargement processes and accession process of Turkey. | 2 |
| 10) | To be able to analyze the influence of the EU on political, social and economic system of Turkey. | 2 |
| 11) | To acquire insight in EU project culture and to build up project preparation skills in line with EU format and develop the ability to work in groups and cooperate with peers. | 2 |
| 12) | To be able to recognize theories and concepts used by the discipline of international relations and relate them to the historical development of the EU as a unique post-War political project. | 3 |