facbook icon
bird icon
twitter icon
some icon
youtube icon
TU delft logo

AR0051

DESIGN INFORMATICS


Digital Porfolio

About

This course will run for a whole semester, during which we will help you create a web-based portfolio of your own products, with the main objective to be able to present yourself in a digital way, with hints for the binary do's and dont's.

Programme

After a general introduction on portfolios, there will be focus on three aspects of the presentation portfolio: use(r), content and character. These aspects will be assessed by analysis, reflection and application in a circular way. During the course, criteria will be explored that can provide a solid base for decision making in the creation process of the portfolio. In this process, we will also actively approach the portfolio-user-market in order to form a clear picture of the intended ‘users’. Besides these “soft” aspects of portfolio design, the technical aspects also will get attention. The programme offers support for different web based tools/environments like HTML, CSS and JavaScript.

Exercises

The following topics give a general overview of the exercises:

  • analysis of existing portfolios (on all kinds of media and disciplines)
  • research of requirements of the intended user
  • analysis of websites (on function and structure)
  • selection of products
  • design and construction of the portfolio

All excersises will require a reflection on the other's work, in order to generate a critical attitude towards one's own work.

Contact

You can use the form below to reach us for small messages or you can send an e-mail to toi-bk@tudelft.nl. We will know that the email you send is addressed to us if you prepend the subject with AR0051:. Please refrain from adding attachments when using this mailbox.





Weekly

Week 1: Why a Portfolio?

Assignment

Think (hard) about why you want a digital portfolio.
Ask yourself "why?" several times.
Write it down: make a 1-page A4 .pdf, with both some text
(start with a very short introduction of yourself (including photo!))
and a creative mix of all kinds of media e.g. sketch, render, photo, poem etc.

Lecture

Downloads

Links

Week 2: Why a portfolio in HTML?

Assignment

Re-view your pdf,
think again about why and for whom,
and transfer this to a first website version.
Focus on the structure of the content.
Submit your findings as 1 .zip file.
Next, don't forget to publish it: Publish your site!
Now, you can view it: View your site!

Lectures

Downloads

Links

AR0051: website submission and publishing

Explanation

Everyone can submit a number of trial sites and one final site in the usual way in InfoBase. The process is as follows and must be followed in this order:

  • create a .zip file of your website (see below for guidelines)
  • submit in InfoBase
  • check if your site looks OK

Attention for the following guidelines

index.html

Call your initial page index.html and place this file in the main folder.

Zipping your website

After submitting your .zip file, it has to be published, this means unzipping on the server and placed on a webserver. Due to this proccess, it is important that your website is zipped correctly. Therefor the files (amongst which index.html) and subfolders must be selected and zipped, NOT the folder in which your whole website is enclosed.

Capitals

Use NO capitals in your filenames. Files on the web are often case-sensitive. You can make mistakes easily if you mix capitals and lowercase letters.

Relative links

Use relative links (unless you link to other 'external' websites).

Use subfolders

Subfolders keep the structure of your site well-organized. A big collection of photos, images and html-pages tend to become cluttered if these are not orderly arranged.

Week 3: Personal work in HTML

Assignment

Choose one personal work,
define the target group and essence and
make a nice 1-page website about it.
Focus on the message you want to send! Submit as 1 .zip file.
Next, don't forget to publish it: Publish your site!
Now, you can view it: View your site!

Lectures

Downloads

Links

  • go
    blog invisionapp.
  • go
    blog slideshare
  • go
    intermediair
  • go
    recruitment process in detail

Week 4: Personal work in HTML and CSS

Assignment

1. Choose a personal work
2. Define the target group and essence and
3. Make a nice 1-page website about it
4. Focus on the message you want to send! Submit as 1 .zip file.
Next, don't forget to publish it: Publish your site!
Now, you can view it: View your site!

Lectures

Downloads

Links

  • CSS Zen Garden
    The beauty in CSS Design
  • youtube video ep. 1
    How to Code Your Own Interactive Website - Ep. 01: The Basic HTML Skeleton, Layout and Syntax
  • youtube video ep. 2
    How to Code Your Own Interactive Website - Ep. 02: The Basics of CSS, Selectors and Syntax
  • youtube video ep. 3
    How to Code Your Own Interactive Website - Ep. 03: Unique Identifiers and Div Tags

Week 5: Personal theme in HTML and CSS

Assignment

1. Choose a personal theme
2. Define the essence and
3. Make a one page website about it. Submit as 1 .zip file.
Next, don't forget to publish it: Publish your site!
Now, you can view it: View your site!

Lectures

Downloads

Links

Week 6: jQuery and Plan of Approach

Assignment

In slot 1 you can submit a website for further practicing: Submit as 1 .zip file.
Publish your site: Publish your site!
And check your site!: View your site!
In slot 2 work towards your Plan of Approach:
- answer all the questions: why, for whom (user(s)), what (content) and how (style)
- be as specific as you can
- write a document which can serve as a guideline

Lectures

Downloads

Links

  • JQuery cheat sheet
    Cheat Sheet
  • The JQuery website
    JQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
  • The Learn JQuery website
    There"s a lot more to learn about building web sites and applications with jQuery than can fit in API documentation. If you"re looking for explanations of the basics, workarounds for common problems, best practices, and how-tos, you"re in the right place!
  • The Learn JQuery website
    There"s a lot more to learn about building web sites and applications with jQuery than can fit in API documentation. If you"re looking for explanations of the basics, workarounds for common problems, best practices, and how-tos, you"re in the right place!
  • Codecademy
    Learn to code interactively, for free.

Week 7: Practice and Plan of Approach

Assignment

In slot 1 you can submit a website for further practicing:
Submit as 1 .zip file.
Publish your site: Publish your site!
And check your site!: View your site!
In slot 2: refine your Plan of Approach:
- be even more specific
- add reference websites with (dis)like
- start to sketch for different devices

Lectures

Downloads

Links

Week 8: Plan of Approach

Assignment

Review your plan of approach and change according to all discussed insights/ideas.
Include your portfolio concept(s), preferably by means of mock-ups or wire frames.
Please hand in your PoA before 09-04-2017 23:59.
Submit for feedback and to serve as a guideline during the creation phase!

Lectures

  • FileZilla
    Welcome to the homepage of FileZilla, the free FTP solution. Pick the client if you want to transfer files.
  • Adobe Experience Design CC
    Currently only a mac version available.
  • Cyberduck
    Another FTP Client to transfer your files

Second Quarter

General

You can still Publish your site: Publish your site!
And check your site!: View your site!

Assignment: Test 1 and PoA

More Information will follow

As we are leaving the inspiration phase, we are entering the creation phase of your portfolio. To start this phase we would like to discus your PoA on the 25th/26th of April. Please hand in your PoA before Sunday 09-04-2017 23:59 (local time) and reserve a time slot for the 25th or 26th of April.

If you are unable to attend, e-mail us, at least we 'll know about it and maybe we can accomodate you on another date.

In slot 1 you can submit a website to document your progress: Submit as 1 .zip file.
Publish your site! And check your site!. In slot 2: your final Plan of Approach

Assignment: Test 2

You can submit a website to document your progress: Submit as 1 .zip file.
Publish your site! And check your site!.

Assignment: Test 3

You can submit a website to document your progress: Submit as 1 .zip file.
Publish your site! And check your site!.

Assignment: Test 4

You can submit a website to document your progress: Submit as 1 .zip file.
Publish your site! And check your site!.

Assignment: Test 5

You can submit a website to document your progress: Submit as 1 .zip file.
Publish your site! And check your site!.

Assignment: Test 6

You can submit a website to document your progress: Submit as 1 .zip file.
Publish your site! And check your site!.

Assignment: Test 7

You can submit a website to document your progress: Submit as 1 .zip file.
Publish your site! And check your site!.

Assignment: Ze Final and report

Upload your final website and don't forget to publish it. Submit as 1 .zip file.
Also submit your report.


Contact

Telnr +3127892136

Room 01+.West.040

Faculty of Architecture and the
Build Environment

Building 8

Julianalaan 134

2628 BL Delft