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/2/2019WE CREATE IDENTITY

WEB TECHNOLOGYTODAY’S SUBJECTS

2

Examples & slides @ vanslooten.com/create

Fjodor van Slooten

Horstring W241 (Horst building)

f.vanslooten@utwente.nl

Student assistants:Benedetta Cervone & Stijn Wolters

▪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/2/2019WE CREATE IDENTITY 3

CONTENTS OF THIS COURSE

9/2/2019WE CREATE IDENTITY 4

CONTENTS OF THIS COURSEACTIVITIES OVERVIEW

Date Subjects

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

2 10/11 Sep. Basics of HTML and CSS, editorial process, Blog, introduction to

WordPress

3 17/18 Sep. HTML and CSS, design guidelines, using and customizing

WordPress themes

4 24/25 Sep. Introduction to JavaScript & jQuery, advanced

WordPress topics

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

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

1 hour tutorial presentation

3 hours work on your site with help/do assignments

each session

Two sessions a week: Tuesday and Wednesday mornings

▪ 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/2/2019WE CREATE IDENTITY 5

COURSE MATERIALS

▪Not only create products, but also present (and sell) them

▪Cooperate with website designers & programmers

9/2/2019WE 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

▪Your online Portfolio will be assessed by your

tutor (for Professional Development)

9/2/2019WE 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 online

2-9-2019WE 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 which works perfectly on mobile also

c) Use/program your own back-end e.g. with PHP+MySql

d) Devise your own challenge (produce a plan and present it to me)

2-9-2019WE CREATE IDENTITY 9

EXTRA CHALLENGETO RECEIVE MODULE BONUS

If you decide to go for this extra challenge, contact me on beforehand

(within 2 weeks!) with a clear goal and a plan on how to execute it.

Present your plan to me 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/2/2019WE CREATE IDENTITY 10

CREATE A WEBSITE: 1ST STEPFIND 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/2/2019WE CREATE IDENTITY 11

DESIGN A PORTFOLIO WEBSITEFIRST 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/take photos)

▪Use Blog to show your progress (starting next week)

9/2/2019WE 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?

2-9-2019WE CREATE IDENTITY 13

DESIGN

Your site must contain

at least a Blog and a

Showcase Portfolio

Think.

Sketch. Then again.

9/2/2019WE CREATE IDENTITY 14

TOOLSTO BUILD A WEBSITE

▪Make your own choice what tools/techniques to use

▪Recommended:▪ Text editor: Atom, Visual Studio Code, Notepad++Win or Sublimetext

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

▪ Familiar with Adobe products?

▪ Consider Dreamweaver, part of Adobe Creative Cloud bundle

▪ 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,

except the Adobe tools.

2-9-2019WE 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/2/2019WE CREATE IDENTITY 16

CREATE A FIRST PAGEYour 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

2-9-2019WE 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/2/2019WE CREATE IDENTITY 18

UPLOAD PAGE TO YOUR WEBSITE

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/

2-9-2019WE 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/2/2019WE CREATE IDENTITY 20

LEARN HTML AND CSSONLINE TUTORIALS

Next week: introduction

to HTML and CSS

w3schools.com

Alternatives:

▪ Codecademy

▪ html.net

9/2/2019WE 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 in [WebTech] Introduction

▪You decide what will be visible about you online

▪The portfolio website you create, is yours

▪You may use an alias if you do not want your name on this website

▪Your website can be shielded from access (e.g. it will be only visible from the university

network) details on this in the FAQ

▪More info here: utwente.nl/en/cyber-safety

2-9-2019WE CREATE IDENTITY 22

ONLINE SAFETY AND PERSONAL INFO ONLINEREGARDING YOUR PORTFOLIO WEBSITE

portfolio.cr.utwente.nl

▪Double-check each step in the “Connect to the site

tutorial”

▪Ask for help during the tutorial sessions

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

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

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

only after you created the webpage)

2-9-2019WE CREATE IDENTITY 23

ACCESS PROBLEMSUNABLE TO ACCESS PORTFOLIO-SITE?

portfolio.cr.utwente.nl

WE CREATE IDENTITY 24

GOGBOT festival is the annual showcase for creative technology, electronic music and contemporary art. Its mission is to provide an

inspiring platform for the most original, the most visionary and the most avant-garde artists active today. Innovation in digital creativity

is key and the festival creates a sonic space for this. The festival offers a stimulating rendez-vous for artists, professionals and visitors.

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!

1) Create a first webpage

2) Upload it to your site

9/2/2019WE CREATE IDENTITY 25

ASSIGNMENT "HELLO WORLD"

Due date: Wednesday Sept. 11

Create a first webpage which displays:- a welcome message,- a paragraph with your experiences the first days at the

university,- and some personal info (at least: your name or alias, a

photo/avatar/icon which represents you, some text: e.g. what do you have to offer?)

portfolio.cr.utwente.nl/help/start

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

#1

▪ Read [WebTech] Introduction on Canvas

▪ Finish assignment 1

▪ Study tutorial HTML W3schools, practice examples

▪ Make a first sketch (design) of your website

▪ Visit Gogbot

▪ Read:

▪ “The Importance of Sketching in Web Design”

▪ “Personal branding: How to design your personal brand image in 10 steps”

2-9-2019WE CREATE IDENTITY 26

ACTIVITIES THIS WEEKWHAT TO DO THIS WEEK

Most of this you should be

able to do this morning

NEXT WEEKASSIGNMENT 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

Student assistants: Benedetta Cervone & Stijn Wolters