Programming in Design
General Course Information
Edirlei Soares de Lima
<edirlei.lima@universidadeeuropeia.pt>
Programming in Design
•
•
What is web programming?
–
The process of writing, testing and maintaining the code of a website.
What is a website?
–
A collection of web documents or resources (e.g. web pages,
multimedia content), which are usually identified with a common
domain name, and published on a web server.
•
How to write the code for a website?
–
A website is written using a programming language for web.
Programming in Design
•
•
What is a programming language?
–
–
–
A programming language is a vocabulary and set of grammatical rules
for instructing a computer to perform specific tasks.
Examples of programming languages for web: HTML, CSS, Javascript,
PHP, ASP, …
More general programming languages: C, C++, Java, C#, Python, …
What is the best programming language?
–
There is no "best programming language". It depends on the goals of
the application, platform, programmer’s skills, etc.
Programming in Design
•
Professor: Edirlei Soares de Lima
–
Education:
•
•
•
B.Sc. in Computer Science – UnC
M.Sc. in Computer Science – UFSM
Ph.D. in Computer Science – PUC-Rio
–
Teaching Experience: PUC-Rio, UNIRIO, UERJ, IADE-UE
–
–
Coordinator of Creative Technologies
More Information: http://www.inf.puc-rio.br/~elima/
Programming in Design
•
Learning Outcomes:
–
Learn the basic aspects of programming through practical exercises
involving languages such as HTML, CSS and JavaScript.
–
Develop critical and analytical understanding of contemporary design
methodologies, interface design, usability, and content management
systems.
–
–
Develop skills to carry out successful front-end development projects.
Apply the knowledge acquired in the development of a web project, by
choosing the most appropriate solutions, technologies, processes and
tools.
Programming Fundamentals
•
Module Content:
1. Introduction to Web Programming;
2
. HTML and CSS:
•
•
•
•
•
•
HTML elements and attributes;
Heading, paragraphs, styles, formatting, colors;
CSS Elements: color, font, border, padding, margin, width, height;
Links, images, tables, lists, blocks, classes, ids, iframes and layouts;
CSS Elements: text, font, links, lists, tables, position, overflow, float;
Navigations bars, dropdowns, forms.
3
. JavaScript:
•
•
•
•
•
Scripts, variables, and operators;
Functions and events;
Conditional statements;
Loop statements;
p5.js
Software
•
•
•
Visual Studio Code:
–
https://code.visualstudio.com/
p5.js
–
https://p5js.org/
Adobe CC
–
https://www.adobe.com/creativecloud.html
Method
•
•
Project-Based Learning:
–
–
–
Learn by doing;
Practical assignments;
Practical project;
Active and experiential learning:
–
–
–
Theoretical concepts;
Practical examples;
Implementation assignments;
Evaluation
•
•
Continuous Assessment (bipartite):
–
[60%] Intermediate assessment:
•
[20%] Individual assignments on the concepts learned;
[80%] Three project assignments.
•
–
[40%] End of term assessment:
•
[100%] Final delivery and presentation of the semester’s project with
individual discussion.
Final Assessment:
–
[100%] Individual project development, delivery, and discussion.
Project
•
Storytelling Website:
1) The content of the website must be a fable or a traditional tale;
2) The fable of each team will be defined by the professor in the first
week of classes;
3) The website must be developed in HTML, CSS, and JavaScript;
4) The website must include interactive and dynamic elements (simple
animations and interactive story navigation);
•
•
The team size is 2 students (exceptions only if needed);
Students are allowed (and encouraged) to get inspiration from
existing well-designed storytelling websites.
•
Briefing with more details available at Blackboard.
Evaluation
•
Project deliveries:
–
1nd delivery: project concept and report
•
Good design vs. bad design;
•
An analyzes of 5 storytelling websites:
–
3 with “good” UI design and 2 with “bad” UI design.
–
–
2nd delivery: layout
•
Mockup of the website;
Basic layout;
•
3nd delivery: interactivity
•
Prototype of the website;
•
Interactive and dynamic elements (animations, story navigation, and
interaction);
Project - Theme
•
•
Selected tales:
–
–
–
–
–
–
Little Red Riding Hood;
The Three Little Pigs;
Cinderella;
Puss in Boots;
Sleeping Beauty;
The Frog Prince;
– The Travelling Musicians;
– Rapunzel;
– The Fisherman and his Wife;
– The Beauty and The Beast;
– Little Thumb;
– The Story of the Three Bears;
Original books freely available through Project Gutenberg:
–
–
–
–
https://www.gutenberg.org/ebooks/2591
https://www.gutenberg.org/ebooks/7439
Bibliography
•
Robbins, J. N. (2018). Learning web design: A
beginner’s guide to HTML, CSS, JavaScript, and
web graphics (5th ed.), O'Reilly Media. ISBN:
9
78-1491960202.
•
•
Verou, L. (2015). CSS Secrets: Better Solutions
to Everyday Web Design Problems, O'Reilly
Media. ISBN: 978-1449372637.
Tidwell, J. (2010). Designing interfaces: Patterns
for effective interaction design (2nd ed.),
O'Reilly Media. ISBN: 978-1449379704.
Web Resources
•
•
•
•
Web Programming: https://www.w3schools.com/whatis/
HTML: https://www.w3schools.com/html/default.asp
CSS: https://www.w3schools.com/css/default.asp
JavaScript: https://www.w3schools.com/js/default.asp
Programming in Design
•
Blackboard (Programação em Design):
–
https://iade.blackboard.com/
•
•
Course Webpage:
–
http://www.inf.puc-rio.br/~elima/webprog/
Contact:
–
–