Web Technology lecure slides - vanslooten.com · 2019-09-17 · 3. Create portfolio website 4....
Transcript of Web Technology lecure slides - vanslooten.com · 2019-09-17 · 3. Create portfolio website 4....
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)
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 ([email protected])
▪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)
Student assistants: Benedetta Cervone & Stijn Wolters