Embed Size (px)
Citation preview
WEB TECHNOLOGYTUTORIAL SESSION #2 FOR “WE CREATE IDENTITY”
Module 1 - We Create Identity
▪ Editorial process
▪ Basics of HTML and Stylesheets (CSS)
▪ Start a Blog
▪ Introduction to WordPress
▪ Assignment
WEB TECHNOLOGYCONTENT OF THIS TUTORIAL
9/9/2019WE CREATE IDENTITY 2
Examples & slides @ vanslooten.com/create
Fjodor van Slooten
Horstring W241 (Horst building)
Student assistants:Benedetta Cervone & Stijn Wolters
9/9/2019WE CREATE IDENTITY 3
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
• Connection problems?
• Images: always first copy images (media) to website folder, then use
• Did you do everything for assignment 1?
Page contains name, image, intro, experience first days
9/9/2019WE CREATE IDENTITY 4
ASSIGNMENT #1WEBSITE TROUBLES
/public_html
FileZilla tip: automatically start
with your preferred folders:
portfolio.cr.utwente.nl
9/9/2019WE CREATE IDENTITY 5
ASSIGNMENT #1HOW DID YOU DO?
▪ First/start-page (homepage), must have name index.html (or index.php)
▪ Make sure you upload to public_html folderAll lowercase
These files are NOT the same:Index.htmlindex.HTMLindex.htmindex.html
Image does not load
Reference to file (src=...) is wrong, should be like:
"img/SAM_0339.JPG"
AND: image file(s) must be uploaded also!
▪ ‘2’ means ‘passed’ (within deadline), ‘1’ means passed but after deadline,
‘0’ means ‘failed/not sufficient’
▪ Assignments will be assessed on Thursday
▪ Check your result. If you receive a fail/not sufficient (=0), you can still fix
that (to get 1 point):
▪ Let me know by e-mail if you fixed an insufficient assignment
▪ You will also get comments (feedback)
09/09/2019WE CREATE IDENTITY 6
RESULTS OF ASSIGNMENT #1GRADES ON CANVAS
Canvas > Grades
▪ You decide what will be visible about you online
▪ Be careful with photo’s
▪ Never publish: your home address, e-mail address, student number, phone number
▪ Want to protect your site?
▪ In the FAQ, see “Privacy concerns/How can I protect my website?”
▪ More info here: utwente.nl/en/cyber-safety
9-9-2019WE CREATE IDENTITY 7
ONLINE SAFETY AND PERSONAL INFO ONLINEREGARDING YOUR PORTFOLIO WEBSITE
portfolio.cr.utwente.nl
EDITORIAL PROCESS
2
3
1 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.
9/9/2019WE CREATE IDENTITY 8
DESIGN A PORTFOLIO WEBSITEFIRST 3 STEPS (OF 6)
2
▪ Arrange work into sections
▪ Write short descriptions
▪ Determine order and structure
▪ Sketch!
▪ Show progress on your Blog
9/9/2019WE CREATE IDENTITY 9
ARRANGE, WRITE & STRUCTUREIN WHAT WAY SHOULD I PRESENT MY MATERIAL?
3
▪ Write (larger) text parts
▪ Explain about yourself, your work, study, interests etc.
▪ Draw multiple base-designs
▪ First sketch (on paper), after that prototype on screen (eg. Photoshop)
▪ Show your progress next week!
(post on your Blog)
9/9/2019WE CREATE IDENTITY 10
WRITE & CREATE DESIGNSWHAT TO TELL? HOW DOES IT LOOK?
Read more
▪ Elements have opening tags and (most have)
closing tags
▪ Content is everything between start and end tag
9/9/2019WE CREATE IDENTITY 11
HTML BASICSELEMENTS
<p>This is a paragraph containing text.</p>
Start tag
End tagElement content
Learn HTML @
9/9/2019WE CREATE IDENTITY 12
HTML STRUCTURE
<!doctype html><html><head><meta charset="utf-8"><title>Hello world</title><style type="text/css">.italictekst {
font-style: italic;}</style></head>
<body>Hello <span class="italictekst">world</span>!</body></html>
Start HTML-document
Header
Body (content)
Title
Stylesheet
Document type
codepen.io/vanslooten/pen/XJwVBg
Learn HTML @
<body><!-- content -->
</body>
Start
End
▪ Attributes provide additional information about an
element
▪ Attributes are always specified in the start tag
▪ Attributes come in name/value pairs like name="value"
9/9/2019WE CREATE IDENTITY 13
HTML BASICSATTRIBUTES
<p title="Introduction">This paragraph will be aligned right.</p>
Start tag
End tag
Attribute
w3schools: html elements
9/9/2019WE CREATE IDENTITY 14
COMMON ELEMENTS<IMG> <A> <UL> <LI>
<img src="face.jpg" width="198" height="254" alt="Face">
Image
Link (anchor)
Unordered list
<ul><li>This is the first item in the list</li><li>This is the second item in the list</li><li>This is the third item in the list</li></ul>
Visit the<a href="https://www.w3schools.com/html/">HTML Tutorial</a>.
List elements
Image filename, case sensitive!
Choices when creating your site:
▪ Basic HTML/CSS layout
▪ Grid/flexbox layout (CSS)
▪ Use a template or framework
▪ Use WordPress (+theme with
layout)
9/9/2019WE CREATE IDENTITY 15
DESIGN > LAYOUTLearnlayout.com
9/9/2019WE CREATE IDENTITY 16
HTML LAYOUTS: <DIV>
▪ Section or part
▪ Container: group elements
▪ Base element to create layout
▪ Overlap?: use z-index
More
semantic
derivatives:
w3schools: layout, div element, positioning
tutorial: learnlayout.com
Tip: experiment/test?
Use different background-colors for div-
elements
<!doctype html><html><head><title>My first page with style</title><!-– external stylesheet --><link href="style.css" rel="stylesheet" type="text/css"></head><body>
</body></html>
9/9/2019WE CREATE IDENTITY 17
STYLESHEETSCASCADING STYLESHEETS: CSS
▪ Separate structure from presentation
▪ Presentation is defined by style-rules
▪ External stylesheet: 1 style for entire site
External style sheet in file style.css
w3schools.com: css, css howto
9/9/2019WE CREATE IDENTITY 18
STYLE EXAMPLE
<!doctype html><html><head><title>My first page with style</title><!–- internal stylesheet, applies only to this page: --><style>p {font-family: "Trebuchet MS", Helvetica, sans-serif;font-size: 14px;
}</style></head><body><p>This text is part of a paragraph.</p></body></html>
Unit px: absolute
value in pixels
Selector ‘p’: apply
style to all
paragraph elements
codepen.io/vanslooten/pen/GJqwKo
w3schools: css, selectors, selector reference, units
selector { stylerule; ... }
9/9/2019WE CREATE IDENTITY 19
BOX MODELtop
left Edge of element
border-right: 1em solid black
Width of right border of
element is 1em and black
CSS Box Model, margins, padding, borders
codepen.io/vanslooten/pen/KxyPWr
9/9/2019WE CREATE IDENTITY 20
STYLE: MENU & PAGE LAYOUT
<nav><ul>
<li><a href="#tab1">Home page</a><li><a href="#tab2">Thoughts</a><li><a href="#tab3">My city</a><li><a href="#tab4">Links</a>
</ul></nav>
nav ul li {background: black;color: white;text-align: right;
}nav li a {
text-decoration: none;}
nav li.current {width: 16em;text-align: left;
}nav li.current a {
margin-left: 9em;font-weight: bold;
}
codepen.io/vanslooten/pen/gpMQbM
<nav>: container for
navigation elements
selector nav: elements
of type nav
selector nav ul li:
list-elements inside ul,
inside nav
html css css
9/9/2019WE CREATE IDENTITY 21
STYLE: MENU & PAGE LAYOUT
<nav>...</nav><div class="content">...</div>
div.content {float: left;margin-left: 9em;margin-top: 1.8em;
}
<div> has class "content"
w3schools: css, selectors, selector reference
content floats to the left of
element before it (<nav>)
selector div.content:
div-elements with class
"content"
codepen.io/vanslooten/full/gpMQbM
Learnlayout.com
9/9/2019WE CREATE IDENTITY 22
A MORE ADVANCED LAYOUT View code?
codepen.io/vanslooten/full/xGOepg/
9/9/2019WE CREATE IDENTITY 23
W3.CSSRESPONSIVE CSS FRAMEWORK WITH SOME NICE TEMPLATES
w3schools.com/w3css
Quick start
▪ Edit → Test/Preview → Complete?: upload
▪ Editor tips:
▪ Atom
▪ Visual Studio Code
▪ Notepad++: Run > Launch = preview in
browser
▪ Browser: Right-click > Inspect: view how piece of
a page is made/styled
9/9/2019WE CREATE IDENTITY 24
EDITING & TESTING
More on using developer tools
9-9-2019WE CREATE IDENTITY 25
START A BLOG
“A blog (aka web log) is a
discussion or informational site
published on the Web and
consisting of entries ("posts")
typically displayed in reverse
chronological order…”
▪ Possibilities:
a) Create a Blog (page) in plain HTML/CSS
b) Install WordPress
c) Other
▪ Compare?
HTML/CSS/JS WordPress
Own design + +/-
Start a blog - ++
Present content
(a portfolio)
+ ++
Learn Web
Technology
++ +/-
HTML/CSS vs. Wordpress
9/9/2019WE CREATE IDENTITY 26
WORDPRESS: BEFORE YOU START
Installing WordPress will make any index.html file inaccessible.
Have index.html (for assignment 1)?
Use FileZilla to rename index.html to assignment1.html and hand-in
the URL at assignment 1 on canvas or tell us in your first Blog post.
eg.:
https://portfolio.cr.utwente.nl/student/demostudent050v/assignment1.html
▪ Install on your site: download software from wordpress.org, install,
customize
9/9/2019WE CREATE IDENTITY 27
WORDPRESS
Use the guide
portfolio.cr.utwente.nl/help/wordpress
Dashboard: Appearance > Themes > Add New
▪ Find a nice theme, customize it
▪ First, customize by using the theme’s customization options
▪ Later (starting next week) by creating a child theme and/or adding your own CSS
9-9-2019WE CREATE IDENTITY 28
WORDPRESS THEMES
Learn how to create a child theme
Use the guide
portfolio.cr.utwente.nl/help/wordpress
9/9/2019WE CREATE IDENTITY 29
CREATE A BLOG IN HTMLIf you do not want to
use WordPress
codepen.io/vanslooten/pen/amvZXq
<article><h1>Example Blog post</h1><address class="author">By John Doe</address><span class="blogdate">Sept 11th, 2018</span><section class="content">
This example code shows how you could setup a Blog post in plain HTML. With the added CSS some styling and basic layout is done. Please be aware that a Blog post should have at least a title, an author, a date ...</section>
</article>
• Add at least: title & date
• Clear mark of beginning
and end
• Latest on top
▪ Add a Blog to your site
▪ Post at least 2 messages in your Blog:
1. Give a summary of your Gogbot visit, name some strong/nice
events/attractions/techniques and include at least one photo
2. Give an update on your progress regarding design activities: What do you consider to
present on your site? What sections/order will you use? Present a base-design you
consider (a sketch)
▪ Make sure your Blog is accessible from your homepage!
9-9-2019WE CREATE IDENTITY 30
ASSIGNMENT "START A BLOG" #2
Due date: Wednesday, Sept. 18
For assignment 1: if you install WordPress: make
sure assignment 1 is accessible from your
homepage (add a link) or hand-in url on Canvas.
NEXT WEEK
ASSIGNMENT 2 MUST BE READY
PRESENT IMPROVED DESIGN ON YOUR BLOG [SEE SLIDES 8-10]
Examples & slides @ vanslooten.com/create
Fjodor van Slooten
Horstring W241 (Horst building)
Student assistants:Benedetta Cervone & Stijn Wolters
