Web Technology lecure slides - vanslooten.com · 3. Create portfolio website 4. Upload it to...
Transcript of Web Technology lecure slides - vanslooten.com · 3. Create portfolio website 4. Upload it to...
▪ 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)
▪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 ([email protected])
▪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)