WEB TECHNOLOGYTUTORIAL SESSION #1 FOR “WE CREATE IDENTITY”

Module 1 - We Create Identity

▪ Introduction

▪Create a website: 1st steps

▪Editorial process

▪Web building tools

▪Assignments

9/24/2018WE CREATE IDENTITY

WEB TECHNOLOGY

TODAY’S SUBJECTS

2

Slides @ vanslooten.com/create

Fjodor van Slooten

Horstring W241 (Horst building)

f.vanslooten@utwente.nl

▪Goal: create Showcase Portfolio site

▪What do we learn?

▪ Gather, structure, publish & connect information

▪ Text writing (editor)

▪ Graphic design for (computer)screen

▪ Design & implement a basic website

9/24/2018WE CREATE IDENTITY 3

CONTENTS OF THIS COURSE

9/24/2018WE CREATE IDENTITY 4

CONTENTS OF THIS COURSE

ACTIVITIES OVERVIEW

Date Subjects

1 4/5 Sep. Intro, editorial process, create first webpage

2 11/12 Sep. Basics of HTML and CSS, editorial process, Blog

(WordPress)

3 18/19 Sep. HTML and CSS, create a WordPress theme

4 25/26 Sep. Introduction to JavaScript & jQuery,

WordPress plugin development

5 2/3 Oct. Advanced techniques, jQuery plugins, social media

6 16/17 Oct. Test & evaluation, peer review

1 hour tutorial presentation

3 hours work on your site, assignments

each session

▪ Assignments via

canvas.utwente.nl

▪ Results and feedback of

assignments via ‘Grades’

▪ Online tutorials, sites &

tools mentioned in

presentations

▪ Course Materials @ vanslooten.com/create

▪ Lecture slides

▪ Tutorials, examples etc.

9/24/2018WE CREATE IDENTITY 5

COURSE MATERIALS

▪Not only create products, but also present (and

sell) them

▪Cooperate with website designers &

programmers

9/24/2018WE CREATE IDENTITY 6

WHY THIS TUTORIAL?

LOOK INTO THE FUTURE

▪ Creative designer: portfolio most

important way to present yourself

▪ Addition to your CV

▪ Gain experience in designing and

building websites

▪Assignments must be done (on time),

will be verified

▪Present your work every week

▪Assignments are part of final

evaluation of project

9/24/2018WE CREATE IDENTITY 7

PRESENCE & EVALUATION

▪Create a Showcase Portfolio website

▪ Learn to apply web technology to be able to present

your projects in an attractive and convincing way

▪ Learn to present yourself and your work through the

web

24-9-2018WE CREATE IDENTITY 8

GOAL OF THESE SESSIONS

▪ Earn a Module Bonus (details from Dennis);

▪ Appr. 0.2 pnt for WebTech

▪ Possibilities for extra challenge (pick one):

a) "Add value“ - Connect your site to for instance a social media platform or web service in an inspiring and creative way

b) "Responsive Design“ - Create a unique graphical design for your site

c) Devise your own challenge (come up with a plan and present it to the teacher)

24-9-2018WE CREATE IDENTITY 9

EXTRA CHALLENGE

TO RECEIVE MODULE BONUS

If you decide to go for this extra challenge, contact your teacher on

beforehand with a clear goal and a plan on how to execute it.

Present your plan no later than the second week of the module.

▪What?What are you going to present?

▪How?What will you use? Tools…

▪Where?For now: portfolio.cr.utwente.nl

9/24/2018WE CREATE IDENTITY 10

CREATE A WEBSITE: 1ST STEP

FIND ANSWERS TO THESE QUESTIONS

LearnHow

INTERNETTHE

Works

What is a

WEBSITE

What is a

WEBPAGE

makeuseof.com/tag/internet-works-infographic

EDITORIAL PROCESS

2

3

1

9/24/2018WE CREATE IDENTITY 11

DESIGN A PORTFOLIO WEBSITE

FIRST 3 STEPS (OF 6)

Gather your work, make a selection;

what should be there, what to eliminate

Arrange work into sections; write short descriptions,

determine order and structure; sketch!

Write (larger) text parts; explain about yourself, your work,

interests etc., draw multiple base-designs. First sketch

(on paper), after that on screen.

1

▪Results of projects, assignments

▪ Ideas

▪Personal activities

▪Digitalize your work (scan)

▪Use Blog to show your progress (next week)

9/24/2018WE CREATE IDENTITY 12

GATHERING …WHAT SHOULD BE THERE? WHAT TO ELIMINATE?

3

▪Perform research: look around!

▪Create a first sketch of your site.

▪Will there be more? How will it look? How will people

contact you? How will you introduce yourself?

▪Will the site be linked to other activities/personal/social

sites? What about social media integration?

24-9-2018WE CREATE IDENTITY 13

DESIGN

Your site must contain

at least a Blog and a

Showcase Portfolio

Think.

Sketch. Then again.

9/24/2018WE CREATE IDENTITY 14

TOOLS

TO BUILD A WEBSITE

▪Make your own choice what tools/techniques to use

▪Recommended:▪ Text editor: Atom, Notepad++Win

, Sublimetext or Brackets.io

▪ FTP client: FileZilla (to upload files to site)

▪ Familiar with Adobe products?

▪ Consider Muse* or Dreamweaver, part of Adobe Creative Cloud bundle

▪ But: you will have to build a Blog (for which you can not use Muse)

▪ Other:

▪ General: KompoZer, CodaMac, iWebMac

▪ FTP: CyberDuck, WinSCP Win

▪ Graphics: Adobe Photoshop, Paint.NETWin, Gimp, more…

Adobe CC bundle student-

license @ Surfspot.nl

All tools presented here are

free tools, except the Adobe

tools.

* as of 2018, Muse is no longer available, but

can still be used by existing customers

24-9-2018WE CREATE IDENTITY 15

HTML➢ Go to your favorite website

➢ Press CTRL+U (View page source)

<title>

<head>

stylesheet(css)

Site made withWordpress: wp-content

9/24/2018WE CREATE IDENTITY 16

CREATE A FIRST PAGE

Your first page

(homepage) must be

saved as:

index.html

Before you start:

Create a folder on your

computer which will hold

all files for your site

Go to w3schools.com html tutorial

Detailed tutorial at

portfolio.cr.utwente.nl

▪ First, save the page in editor (press CTRL+S)

▪ Find your page (the file index.html) in the Windows Explorer

(or on Mac: in the Finder)

▪ Double click the file (index.html) to view it in your browser

24-9-2018WE CREATE IDENTITY 17

PREVIEW YOUR PAGE

Quicker: right-click

and choose Show in

Explorer

While editing, keep

browser open: press

CTRL+S in Atom,

reload page in browser

to see changes

Alternative: use preview

function of Atom:

CTRL+SHIFT+M

1. Create a webpage on your own computerWith an editor like Atom

2. View it locally (on your computer, in a browser)

Ready to publish?:

3. Create portfolio website

4. Upload it to website with FileZilla FTP Client

9/24/2018WE CREATE IDENTITY 18

ACCESS YOUR WEBSITE

HOSTING

Go to portfolio.cr.utwente.nl to get started

3

4

Personal webspace @ portfolio.cr.utwente.nl

For this course, it is mandatory to use

portfolio.cr.utwente.nl

1,2

▪Start your browser

▪Go to https://portfolio.cr.utwente.nl/student/XXXXXX/

24-9-2018WE CREATE IDENTITY 19

VISIT YOUR SITE TO VIEW YOUR WEBPAGE

Replace XXXXXX with

your site name (address is in

the confirmation e-mail you received)

…/XXXXXX/page2.html

page2.html?

9/24/2018WE CREATE IDENTITY 20

LEARN HTML AND CSS

ONLINE TUTORIALS

Next week: introduction

to HTML and CSS

w3schools.com

Alternatives:

▪ Codecademy

▪ html.net

9/24/2018WE CREATE IDENTITY 21

ASSIGNMENTS GRADES & FEEDBACK

▪ Go to canvas.utwente.nl, log in

▪ Find course We Create Identity

▪ Check Grades

▪ You will receive points for each

assignment:

2 (passed, done on time)

1 (passed but after deadline)

0 (failed)

+feedback

You need 12 points to pass Web Technology: 6 assignments x 2 points = 12 points.What if you do not do assignment on time? (=you fail the deadline):

you get 1 point (instead of 2) and have to do (one of the) extra assignments. Extra

assignments do not have a deadline, and yield only 1 point.

Want to know more: read grading rules on Canvas.

WE CREATE IDENTITY 22

Visit GogbotA visit to the Gogbot festival is mandatory. Next week, you will have to write a summary of your visit.So take notes, shoot some pictures & videos!

GOGBOT 2018 – The free festival for creative technology, science,

media, art, music and more celebrates its 15th anniversary this year.

From 6-9 September in Enschede.

1) Create a first webpage

2) Upload it to your site

9/24/2018WE CREATE IDENTITY 23

ASSIGNMENT "HELLO WORLD"

Due date: Wednesday Sept. 12

Create a first webpage which displays a

welcome message and some personal info.Add a photo/image/icon which represents you; your name; what do you have to offer?

#1

portfolio.cr.utwente.nl/help/start

Read the full text of the assignment (available on Canvas), before you start!

▪Go to FAQ, first question, answer questions (a, b, c, …)

▪Mail me if necessary (f.vanslooten@utwente.nl)

▪We will add you later this week, you should be able to

access the site later (you will get a reply when it is fixed)

▪Continue work on assignment! (you need access to the site

only after you created the webpage)

24-9-2018WE CREATE IDENTITY 24

ACCESS PROBLEMS

UNABLE TO ACCESS PORTFOLIO-SITE?

portfolio.cr.utwente.nl

NEXT WEEK

ASSIGNMENT 1 MUST BE READY

A FIRST DESIGN MUST BE PRESENTED [SEE SLIDES 11-]

Slides @ vanslooten.com/create

Fjodor van Slooten

Horstring W241 (Horst building)

f.vanslooten@utwente.nl