IFD:Web-basedMediaI

Fachmodul
Web-based Media: Introductory Web Development I
Instructor: Brian Larson Clark
Credits: 6 ECTS, 4 SWS
Capacity: max. 15 students
Language: English
Date: Donnerstag/Thursday, 9:15-12:30
Location: Marienstraße 7b Room 101
First Meeting: 12 Oct 2017

Description

Web-Based Media: Introductory Web Development I is a graduate-level investigation into the design and production of web-based media. Topics will include: web development (HTML5, CSS3, JavaScript), interaction design, and responsive design using web development frameworks (jQuery, Bootstrap). This is a student-driven course and topics will be determined by the interests/needs of the class. For students with basic, or no coding experience.

Admission requirements

Concurrent enrollment in another IFD course offering, or with instructor permission. This is an introductory-level course with no technical prerequisites.

Registration procedure

Candidates from Media Art and Design MFA Program, MediaArchitecture or other programs:
Preliminary registration is conducted by sending an email with your name, matriculation number and a statement outlining your motivation for taking this module to brianlarsonclark [ät] gmail [punkt] com

All candidates:
Formal registration will take place at the close of the first class meeting. In the event there are more interested participants than available capacity, candidates will be selected on the basis of their technical, aesthetic and conceptual aptitude.

Evaluation

Successful completion of the course is dependent on regular attendance, active participation, completion of weekly assignments and delivery of a relevant semester project. Please refer to the Evaluation Rubric for more details.

Eligible participants

Fachmodul:
MFA Medienkunst/-gestaltung, MFA Media Art and Design, MSc MediaArchitecture

Syllabus (subject to change)

To be announced

Project 1 Information

Due Date: 9 Nov

Objective: Develop a 3 page personal/portfolio website using only a text editor. Your website should include at least a home page (index.html), an about page, and a contact page. It also should use an external CSS file. The website design should conform to current web design standards, and appear the same in all major browsers (Firefox, Chrome, Safari, Internet Explorer/Edge).

The content of your website is entirely at your discretion. It may be either a personal website or a portfolio of your work. Images may be found from online resources or created from scratch. The text on the website should be original. What is most important is that the HTML and CSS is correct, and the images and links work correctly. At a minimum, the website should be at least 3 pages. Each page should have a navigation area and have working links to all of the other pages.

Project 2 Information

Due Date: 30 Nov

Background: Bootstrap is an open-source framework for developing responsive websites for both desktop and mobile screens. Unlike many web frameworks, it deals purely with front-end development (HTML, CSS, and JavaScript). First released in 2011 under the name of Twitter Bootstrap, Bootstrap is the most popular front-end framework for mobile web development.

Objective: Develop a custom dynamic website using the Bootstrap 4. The website design should be intuitive, conform to current web design standards, and appear the same in all major browsers (Firefox, Chrome, Safari, IE/Edge). Website requirements: 4+ page Bootstrap website, functional design in all browser window sizes

Grading:
This project will be graded on:
• creative and effective approach to your website design
• demonstration of technical proficiency with using Bootstrap 4
• effective implementation of responsive web design
• all images load correctly
• all navigation elements work properly (no dead links)

Class Resources

Now that I have access to modify this wiki, I will be adding links and resources relevant to this module. --brian

Web Design Resources/References:
W3Schools
CSS Cheatsheet
Web Standards Checklist
Bootstrap Homepage
jQuery Homepage
HTML Codes Table
Unicode Character Table

Web Development Tools:
HTML Validator
CSS Validator
CSS3 Generator
Favicon Converter (.ico)
Grid Layout Generator
Bootstrap Template Examples
Google Fonts
Font Awesome
htaccess Generator

Other Useful Links:
Web Pages That Suck – Learning Good Design Through Bad Design
Principles of Graphic Design
SEO Starter Guide
Zombo.com