View
0
Download
0
Category
Preview:
Citation preview
WEB TECHNOLOGYTUTORIAL SESSION #4 FOR “WE CREATE IDENTITY”
Module 1 - We Create Identity
▪ Final steps editorial process
▪ HTML&CSS
▪ Introduction to JavaScript & jQuery
▪ Advanced WordPress topics
▪ Assignment
WEB TECHNOLOGYCONTENT OF THIS TUTORIAL
9/23/2019WE CREATE IDENTITY 2
Examples & slides @ vanslooten.com/create
Fjodor van Slooten
Horstring W241 (Horst building)
f.vanslooten@utwente.nl
Student assistants:Benedetta Cervone & Stijn Wolters
9/23/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
▪ By TA’s of Programming
▪ Learn the basics of JavaScript (P5.js)
▪ Create your own fun mini game
▪ This activity counts as Professional Development challenge!
9/23/2019WE CREATE IDENTITY 4
JAVASCRIPT P5 WORKSHOP WED 25TH 13:45LOCATION: OH218 (HORST BUILDING)
This will be a great addition
to your Portfolio Site!
Professional Development
Signup for this workshop @ Proto website
AS
SIG
NM
EN
T #
2, #3
Do not forget to post weekly updates on your
progress to your Blog (yes, every week)
▪ A Blog post should have at least: a decent title, a date, content
▪ Some of you ‘forgot’ things which were required (like the design-sketch)
> carefully read the assignment-text!
▪ Or forgot to test the online version of the site properly
9/23/2019WE CREATE IDENTITY 6
ISSUES WITH ASSIGNMENT #2
codepen.io/vanslooten/pen/Ewjmgv
Using Codepen
example with script
code?
Checkout slides on
jQuery further down
EDITORIAL PROCESS
5
6
4 Choose a base design, create test pages which contain
text and images.
Re-group your work, re-consider your design and re-
write texts.
Create the site, refine design and texts.
9/23/2019WE CREATE IDENTITY 7
DESIGN A PORTFOLIO WEBSITESTEPS 4-6
6
▪ Build site
▪ Create (or use) a template based on design
▪ Add pages based on template
▪ Refine
▪ Design
▪ Content (texts, images, video’s…)
▪ Test
9/23/2019WE CREATE IDENTITY 8
CREATE THE SITE, REFINE DESIGN AND TEXTSFINAL STEP EDITORIAL PROCESS
▪ Have one external stylesheet style.css for entire site
▪ Saves you (a lot) of work!
▪ Avoid inline style and internal stylesheets as much as possible
▪ HTML files must have character set if you intend to use special characters
9/23/2019WE CREATE IDENTITY 9
HTML TIPS
w3schools.com/css/css_howto
<!doctype html><html><meta charset="utf-8"><title>My Homepage</title><link rel="stylesheet" type="text/css" href="style.css"><body>
<!-- Content here --></body></html>
Set character set to utf-8
Link to external stylesheet style.css
This is the absolute minimum
code you must have
▪ CSS reset:
9/23/2019WE CREATE IDENTITY 10
HTML TIPS
html {box-sizing: border-box;
}*, *:before, *:after {box-sizing: inherit;margin:0; padding:0;
}
css-tricks.com/box-sizing
9/23/2019 11
9/23/2019 12
EMBED MEDIA: YOUTUBEIN HTML AND IN WORDPRESS
codepen.io/vanslooten/pen/KpMLwV
In
WordPress,
use a HTML
block
Paste embed code into HTML
block
9/23/2019WE CREATE IDENTITY 13
TYPOGRAPHY
w3schools: css_font, bootstrap text/typography
codepen.io/vanslooten/pens/tags/?selected_tag=fonts
background-color: #e1efbb
9/23/2019WE CREATE IDENTITY 15
BACKGROUNDS
<div style="border:1px solid gray;padding:8px;background:#e1efbb url('img_flwr.png') no-repeat bottom right">
<p style="margin-right:150px;">CSS background properties areused to define the background effects of an element.</p>
</div>
w3schools: background
background-image: url('img_flwr.png')
background-color: rgba(200, 0, 200, 0.5);
9/23/2019WE CREATE IDENTITY 16
CSS EFFECTS
#content {background: #ed9017; /* default */background: linear-gradient(to bottom, #ed9017 0%, #f6e6b4 100%);
}
.rounded_border {border: 8px outset red;border-radius: 5px;
}
Gradients: easy to create with online editor:
colorzilla.com/gradient-editor
codepen.io/vanslooten/pen/JYRYJE
w3schools: gradients, border-styles,
2d transforms, transitions, animations
9/23/2019WE CREATE IDENTITY 17
HIGHLIGHT ON HOVER
.hovereffect {cursor: pointer;background-color: #1c1e1e;background: linear-gradient(#262828,#1c1e1e);
}
.hovereffect:hover {opacity: 0.80;
}
w3schools: pseudo-class,
cursor, gradients, opacity
0: completely transparent
1: completely opaque
pseudo-class :hover represents a state
of the element
codepen.io/vanslooten/pen/JYRYJE
9/23/2019WE CREATE IDENTITY 18
CSS FILTERINGIn some occasions, e.g. when presenting a screenshot,
you might want to apply some filtering to prevent looking
like a screen-in-a-screen
Applied filter to img:img[src=screenshot.jpg] {
opacity: 0.7;filter: blur(2px);
}
image effects
▪ <div> element as container, base element
for layouts
▪ Overlap: use z-index
▪ z-index only works on positioned elements (position:absolute, position:relative or
position:fixed)
9/23/2019WE CREATE IDENTITY 19
LAYOUT: LAYERS AND FIXED/STICKY ELEMENTS
position: fixed;width: 40%;margin: 0 30%;padding: 15px;bottom: 0;
#A {background-color: #f0d0d0;border: solid 1px #000000;position: absolute;z-index: 100;
}
w3schools: CSS positioning, sticky
codepen.io/vanslooten/pen/gawPWV
9/23/2019WE CREATE IDENTITY 20
@MEDIA RULES
w3schools: media queries
/* rules for larger screens (mobile first!): */@media only screen and (min-width: 801px) {
nav ul {width: 8em;float: left;margin-top: 1em;
}div.content {
float: left;margin: 1.8em 0 0 9em;max-width: 70%;clear: none;
}} /* /@media */
selector { stylerule; ... }
Comments in stylesheet: Java style
Separate piece
of style for
larger screens
(mobile first)
codepen.io/vanslooten/pen/gpMQbM
<meta name="viewport" content="width=device-width, initial-scale=1">
do not forget:
in <head>
9/23/2019WE CREATE IDENTITY 21
JAVASCRIPT <script><script>
w3schools: Javascript Tutorial
codepen.io/vanslooten/pen/qdqjqL
<script>var count = 0;function changeBackground(newColor) {document.bgColor = newColor;count++;document.getElementById("demo").innerHTML="We changed the color "+count+" times!";
}</script>
Declare a variable Change background color of documentDefine a function
Access an element and change its content (innerHTML)
<button onclick="changeBackground('green')">Green</button>
<button> if clicked on, execute function changeBackground
9/23/2019WE CREATE IDENTITY 22
JAVASCRIPT: DRAWING ON A CANVAS
• Canvas as a ‘sheet’ to draw on
• Drawing commands in Javascript
• Example: strokeRect(left,top,width,height)
<canvas id="drawing" width="360" height="240"></canvas><script>var canvas = document.getElementById('drawing');var context = canvas.getContext('2d');
context.strokeStyle = '#990000';context.strokeRect(20,30,100,50);</script>
w3schools: canvas
codepen.io/vanslooten/pen/JYRYJE
Using p5.js might be easier
jQuery.com
9/23/2019WE CREATE IDENTITY 23
JQUERY“A JavaScript library designed to simplify
the client-side scripting of HTML”
w3schools: jQuery
<button>Click me</button><div id="panel">Hello World!</div>
<script>$(document).ready(function(){
$("#panel").hide();$("button").click(function(){
$("#panel").slideToggle();});
});</script>
codepen.io/vanslooten/pen/XbNgyoCSS selector
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script></body>
To use jQuery, insert at bottom of HTML:
Wait for document to become ready
9/23/2019WE CREATE IDENTITY 24
JQUERY: DYNAMIC MENU & PAGES
codepen.io/vanslooten/pen/gpMQbM
<nav><ul>
<li><a href="#page1">Home page</a><li><a href="#page2">Thoughts</a><li><a href="#page3">My city</a><li><a href="#page4">Links</a>
</ul></nav>
<div class="content">
<div id="page1"><!– Home page content -->
</div><div id="page2">
<!– Second page content --></div>
Only one of the pages
will be visible
9/23/2019WE CREATE IDENTITY 25
JQUERY: DYNAMIC MENU & PAGES
$("nav li").click(function() {$("nav li").removeClass("current"); // Remove any active class$(this).addClass("current"); // Add "current" class to selected menu item
$("div.content div").hide(); // Hide all content pages
// Find the href attribute value of the clicked menu item to identify the active page:var activePage = $(this).find("a").attr("href"); $(activePage).fadeIn(); // Fade in the active page content
}); // end click method
Click-function on list-elements in menuCSS selector
codepen.io/vanslooten/pen/gpMQbM
▪ Create a page
▪ Add it to a menu:
9/23/2019WE CREATE IDENTITY 26
ADD A MENUPUBLISH PORTFOLIO ITEMS ON A PAGE
1)
2)
3) 4)
▪ Create a category “Portfolio” and a category “News”
▪ Add links for both categories in the menu:
9/23/2019WE CREATE IDENTITY 27
USE BLOG POSTS FOR PORTFOLIO ITEMS
▪ For larger menu’s you can add a drop-down
▪ Create more pages, then add them to menu
9/23/2019WE CREATE IDENTITY 28
ADD A MENU: DROPDOWN(IF THEME SUPPORTS THIS!)
Use drag&drop to organize
the menu
Drag items sideways (to the
right) to make them sub-items
▪ Select the Gallery block
▪ Click upload or media library
▪ Click Create a new gallery, then Insert gallery
9/23/2019WE CREATE IDENTITY 29
GALLERY OF IMAGES
Click image to
add caption
9/23/2019WE CREATE IDENTITY 30
ADD A LIGHTBOX TO A GALLERYEXTEND WORDPRESS BASIC GALLERY SUPPORT
Create a gallery with a lightbox
stripjs.com
<script src="https://home.et.utwente.nl/slootenvanf/div/strip/js/strip.pkgd.min.js"></script><link rel='stylesheet' id='strip-style-css' href='https://home.et.utwente.nl/slootenvanf/div/strip/css/strip.css' type='text/css' media='all' /><script>jQuery(function($){$(window).on('load', function() { // document is fully loaded
$('.entry-content figure img').each(function() { // new wp5 style way of image inclusionurl = $(this).attr("src");extension = url.substr( (url.lastIndexOf('.') +1) ).toLowerCase();if (extension=="jpg"||extension=="png") { // if link points to an image, add strip lightbox:
$(this).parent().addClass("strip");$(this).parent().attr("data-strip-group","gallery-group");$(this).parent().attr("href",url);if ($(this).attr("alt").length>0) $(this).parent().attr("data-strip-caption", $(this).attr("alt") );
}});
});});</script>
In
WordPress,
add HTML
block
Who made this? Where
and when was it made?
What is its purpose?
Where was it made for?
Why is this on your site? ...
Do:
▪ Update your Showcase Portfolio with another piece of your work. Make sure all
items in the portfolio have a short description and context-information
(who/where/when/what/why)
▪ Show your artistic skills by adding a personal touch to the design of your site (eg.
by modification of the theme or stylesheet)
On your Blog:
1. Post an announcement on your Blog about the second piece of work in the
Showcase Portfolio including a link to that piece
2. Post a second post in which you describe how you realized your 'personal touch'
of the design in the theme/stylesheet (add examples, explain code).
9/23/2019WE CREATE IDENTITY 31
ASSIGNMENT "ADD CONTENT"ADD CONTENT TO SHOWCASE PORTFOLIO
Due date: Wednesday, Oct. 2
Design activity this week: further add personal
style to the design of your site/theme. Write
(larger) text parts. Improve details.
#4
NEXT WEEK
USABILITY & TESTING A WEBSITE
JQUERY PLUGINS, SOCIAL MEDIA INTEGRATION
Examples & slides @ vanslooten.com/create
Fjodor van Slooten
Horstring W241 (Horst building)
f.vanslooten@utwente.nl
Student assistants:Benedetta Cervone & Stijn Wolters
Recommended