web technology lecure slides - vanslooten.com · 2019. 9. 23. · set the viewport responsive...

WEB TECHNOLOGYTUTORIAL SESSION #3 FOR “WE CREATE IDENTITY”

Module 1 - We Create Identity

▪ Last week…

▪ HTML and CSS

▪ Editorial process

▪ Design Guidelines

▪ Using and customizing WordPress

themes

▪ Assignment

WEB TECHNOLOGYCONTENT OF THIS TUTORIAL

9/23/2019WE CREATE IDENTITY 2

Examples & slides @ vanslooten.com/create

Fjodor van Slooten

Horstring W241 (Horst building)

[email protected]

Student assistants:Benedetta Cervone & Stijn Wolters

http://vanslooten.com/create/


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!


JAVASCRIPT P5 WORKSHOP WED 25TH 13:45LOCATION: OH218 (HORST BUILDING)

This will be a great addition

to your Portfolio Site!

Also:

Photoshop workshop

Wednesday (Sept. 18) 13:45

Location: TL3330 (Technohal)

Professional Development

Signup for this workshop @ Proto website

https://www.proto.utwente.nl/events/5JPXG8bJav1YVNEg

▪ Starting with WordPress:▪ For now, it’s OK to have a standard theme

▪ Theme: design & develop to make it personal coming weeks

▪ Move inline style to external stylesheet

(style.css)


ASSIGNMENT #2HOW DID YOU DO?

My title

h1 { /* all h1 headings will have this style */color:blue;margin-left:30px;

} style.css

Link stylesheet (in file style.css)with this HTML document

Did you see grade & feedback on Canvas?

Please check your student-email regularly!

EDITORIAL PROCESS

5

6

4 Choose a base design, find resources, 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.


DESIGN A PORTFOLIO WEBSITESTEPS 4-6

4

▪ Make a choice from base-designs

▪ Choose from sketches made in step 3

▪ Find (or design) additional resources

▪ Create test pages which contain text and images

▪ Use sketches and design of structure created in steps 2 and 3 to create

a first test version of your site


MAKE A CHOICE, TESTSTART FROM SKETCHES MADE EARLIER

5

▪ Re-group your work, re-consider (evaluate) your design and re-write texts

▪ Use (ask!) feedback from teachers, friends, family

23-9-2019WE CREATE IDENTITY 8

ITERATERE-GROUP, RE-THINK, RE-WRITE

en.wikipedia.org/wiki/Iteration

http://en.wikipedia.org/wiki/Iteration

▪ By element: nav ul li

▪ By id: #

▪ For single, unique elements

▪ By class: .

▪ For group of elements

Home page

...

My city

nav ul li {background: black;color: white;text-align:right;

}

div.content div {padding: 20px;

}

#tab3 {background-color: #e0ebeb;

}


CSS: SELECTION OF ELEMENTSSELECTOR { STYLERULE; ... }

css

codepen.io/vanslooten/pen/gpMQbM

html

w3schools: selectors

http://codepen.io/vanslooten/pen/gpMQbMhttp://www.w3schools.com/cssref/css_selectors.asp

Selection by class

▪ Visible menu-selection using CSS


CSS: SELECTION OF ELEMENTSSELECTOR { STYLERULE; ... }

nav li.current {width: 16em;text-align:left;

}

nav li.current a {margin-left: 9em;font-weight: bold;

}

codepen.io/vanslooten/pen/gpMQbM

http://codepen.io/vanslooten/pen/gpMQbM

▪ Design (sketch!)

▪ Build a layout using HTML, CSS

▪ For testing: background-color: yellow;

▪ Examples:

▪ Grid/Flexbox

▪ Best way to learn: learnlayout.com, w3schools, Codecademy


LAYOUT

w3schools: layout, div element, positioning,

grid, flexbox

http://learnlayout.com/http://www.w3schools.com/html/html_layout.asphttps://www.codecademy.com/http://www.w3schools.com/html/html_layout.asphttp://www.w3schools.com/tags/tag_div.asphttp://www.w3schools.com/css/css_positioning.asphttps://www.w3schools.com/css/css_grid.asphttps://www.w3schools.com/css/css3_flexbox.asphttps://codepen.io/vanslooten/pens/tags/?selected_tag=layout


FLEXBOX LAYOUT

w3schools: layout, flexbox

Cities

LondonParisTokyo

London

London is ...

Footer

header {background-color: red;text-align: center;

}

/* Container for flexboxes */section {

display: flex;}

/* Style the navigation menu */nav {flex: 1; /* use 1/4 of space */background: lightgreen;

}

/* Style the content */article {

flex: 3; /* use 3/4 of space */}

red, lightgreen, yellow, #00FFFF

http://www.w3schools.com/html/html_layout.asphttps://www.w3schools.com/css/css3_flexbox.asphttps://www.w3schools.com/html/tryit.asp?filename=tryhtml_layout_flexbox

▪ Set the Viewport

▪ Responsive layout

▪ Responsive images

▪ Use media queries

▪ Design: Mobile First!


RESPONSIVE WEBSITES

“Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones)”

div.example {font-size: 1em;

}

/* On large screen, set the font-size of to 2em */@media only screen and (min-width: 601px) {

div.example {font-size: 2em;

}}

w3schools: CSS RWD, W3.CSS, HTML

Responsive

https://www.w3schools.com/css/css3_mediaqueries.asphttps://www.w3schools.com/css/css_rwd_intro.asphttps://www.w3schools.com/w3css/w3css_responsive.asphttps://www.w3schools.com/html/html_responsive.asp

▪ Responsive web framework

▪ Components, grid-based layout system, plugins, templates

▪ Get started: getbootstrap.com


BOOTSTRAPFRAMEWORK

w3schools.com/bootstrap

Fjodor's Bootstrap examples @ Codepen

HTML/CSS/JavaScript

https://getbootstrap.com/https://www.w3schools.com/bootstrap/https://codepen.io/vanslooten/pens/tags/?selected_tag=bootstrap

▪ Have a nice template?

▪ How to change it with your own style?

▪ In this way, your stylesheet (mystyle.css) will get higher

precedence than the W3.CSS stylesheet

▪ You can over-rule styles in your stylesheet

▪ Use inspect-function of browser to find things you want to change


CSS: CASCADING…

W3.CSS Template

Stylesheets of template,

keep these as they are (even if you downloaded it, do

not change it!)

Your stylesheet

w3schools: css howto

W3.CSS templates

https://www.w3schools.com/css/css_howto.asphttps://www.w3schools.com/w3css/w3css_templates.asp

Tools:

▪ validator.w3.org

▪ ipinfo.info/netrenderer

▪ screen-resolution.com

Browser:

▪ Right-click, Inspect

▪ Webdeveloper tools (access via menu, or F12)


TESTING WEBPAGES

> More Tools > Developer tools (CTRL+Shift+I)

Console: show

errors, logs etc.

http://validator.w3.org/http://ipinfo.info/netrenderer/http://www.screen-resolution.com/

▪ Content [readable, clear, to-the-point]

▪ Texts: quick-scan & in-depth [texts should be very short, but if necessary, provide more info]

▪ Navigation [easy to navigate, can we find what we want… and expect?]

▪ Dimensions (…layout), graphics, colors…

▪ Technical aspects: valid HTML, multiple browsers…: test!


DESIGN GUIDELINES

Recommended to read:

Lifewire: web design basics

4 key principles of web design

https://www.lifewire.com/web-design-basics-4140405https://99designs.nl/blog/tips/web-design-basics-guide/

▪ Follow “Rule of thirds” or “Divine

proportion” (1.62)

▪ Applies also to layout of a webpage!


GRAPHICAL DESIGN GUIDELINESCOMPOSITION AND PLACEMENT

Pinterest examples

Understanding the rule of thirds in web design

Design rules you should never break

https://en.wikipedia.org/wiki/Rule_of_thirdshttps://www.smashingmagazine.com/2008/05/applying-divine-proportion-to-web-design/https://pinterest.com/search/pins/?q=rule%20of%20thirdshttps://tympanus.net/codrops/2012/05/23/understanding-the-rule-of-thirds-in-web-design/https://designschool.canva.com/blog/design-rules/

▪ See colors tutorial, use

palette of matching sets of

colors


COLORS

Tools: W3 ColorPicker, ColorZilla (color picker, gradient generator…)

https://www.w3schools.com/colors/colors_palettes.asphttps://www.w3schools.com/colors/colors_picker.asphttp://www.colorzilla.com/

▪ css-tricks.com/design-resource-sites

▪ Respect rights of owners of media*

▪ Copyrights/license/terms of use of

(stock) media*


DESIGN RESOURCES

* “Media”: texts, quotes, templates, scripts,

plugins, fonts, photos, images, icons,

pictures, animations, video’s….thestocks.im

https://css-tricks.com/design-resource-sites/https://fonts.google.com/http://thestocks.im/http://thestocks.im/

▪ Two ways to do it:

1. Via “Additional CSS” option of the theme:

2. Create a child theme (next slides)


CHANGE A WORDPRESS THEMEADD YOUR OWN STYLE

1. Create a Child theme

▪ Use Child Theme Configurator

plugin to create the child theme for you

2. Activate the child-theme


WORDPRESS: CHILD THEMETHEME BASED ON EXISTING THEME

Why use a child-theme?

• Full control (not just change a bit of style)

• Child themes will not be overwritten by updates

• Separate the original from your changesRead detailed explanation here

https://home.et.utwente.nl/slootenvanf/2015/08/07/wordpress-theming-create-a-child-of-an-existing-theme/


EDIT CHILD THEMEMAKE CHANGES TO STYLESHEET

View result in

browser

@import webfont

Add some style

More on: child themes, usage of webfonts

https://home.ctw.utwente.nl/slootenvanf/2015/08/07/wordpress-theming-create-a-child-of-an-existing-theme/http://home.ctw.utwente.nl/slootenvanf/2015/09/15/wordpress-use-a-webfont-in-a-theme/

▪ Can be difficult

▪ One option is to use a layout/page builder plugin like Elementor

▪ I do not recommend this… why?

▪ It adds another level of complexity to your website

▪ Steep learning curve

▪ Install-wizard might install demo-content which messes up your site

▪ Pay for important features (like Custom CSS)

▪ What is a better way?

▪ Find a theme that is good enough for now

▪ Learn (in the coming weeks) how to customize this theme (create a

child theme, use custom css, edit its code)


WORDPRESS THEME: CHANGE LAYOUT? USE ELEMENTOR?

Should I do

this???

Installing a theme…

which is based on

Elementor

Probably

not

https://www.wpbeginner.com/beginners-guide/best-drag-and-drop-page-builders-for-wordpress/https://www.wpbeginner.com/plugins/how-to-create-custom-wordpress-layouts-with-elementor/

▪ Create (first) page for Showcase Portfolio and display a first piece of work

at that page

▪ Add navigation (links/menu/…)

▪ At least a Blog and a (start of a) Showcase Portfolio should be there and

accessible from the main page (homepage)

Add 2 posts to your Blog:

1. An announcement about the first piece of your work in the Showcase

Portfolio including a link to that piece.

2. An update on your progress for the Video Project of We Create Identity


ASSIGNMENT "CREATE PORTFOLIO"INTEGRATE BLOG & PORTFOLIO

Due date: Wednesday, Sep. 25

#3

[full text on Canvas!]

How to write good and clean code:

▪ 8 best practices to write clean html

▪ 12 principles for keeping your code clean

Design guidelines:

▪ Lifewire: web design basics

▪ 4 key principles of web design


RECOMMENDED READING

https://medium.com/@sergimarquez/8-best-practices-to-write-clean-html-code-1cd407e2a7echttps://www.smashingmagazine.com/2008/11/12-principles-for-keeping-your-code-clean/https://www.lifewire.com/web-design-basics-4140405https://99designs.nl/blog/tips/web-design-basics-guide/

NEXT WEEK

PRESENT RESULT OF ASSIGNMENT #3

MORE ON WORDPRESS, INTRO TO JAVASCRIPT & JQUERY

FINAL STEP EDITORIAL PROCESS

Examples & slides @ vanslooten.com/create

Fjodor van Slooten

Horstring W241 (Horst building)

[email protected]

Student assistants:Benedetta Cervone & Stijn Wolters
http://vanslooten.com/create/

web technology lecure slides - vanslooten.com · 2019. 9. 23. · set the viewport responsive...

Documents