Untangling spring week4

UNTANGLING THE WEB Class 4: HTML, CSS, and JS

AGENDA
--Project 1 presentations
--Quick introduction to javascript
 An introduction to code
 Using jsfiddle
--Using your web server
--CSS
--flexbox

PRESENTATIONS
Each group gets 10 minutes max for presentation and questions
Don’t worry if you don’t take all 10 minutes, if you can get across
why your business idea is so compelling in two minutes then you’re
way ahead of the game!
Make sure to leave a little bit of question time
After the presentation – send me an email (one per group) with a copy
of the presentation, or at least the business model canvas and
website design.

USING JSFIDDLE
JSFiddle.net is a site where you can make quick sketches of code and
see them run.
It’s sometimes easier to use a site like this than to code from scratch,
but in the end developing locally and on github is more useful
Console.log is very useful, but it doesn’t print on the page! Have to
use the dev console.
Access DevTools On Windows On Mac
Open Developer
Tools
F12, Ctrl + Shift +
I
Cmd + Opt + I

HTML AND JS TOGETHER
Separate code and data
 Kind of an old paradigm, hard to do that, but html/js comes about from when that
was the goal
 For simple stuff we’ll still treat them as separate. Except when they have to interact
 https://jsfiddle.net/xde554am/ (example we’ll walk through)
Of course, in some frameworks this is exactly backwards. JSX is a
form of javascript for the facebook react toolkit that is fully
intermingled data and presentation. EJS templates are another way of
doing that.

JSFIDDLE VERSUS SEPARATE
PAGES
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
In the head or body (not that you have these option in jsfiddle as well)
<script type="text/javascript" src="somefile.js"></script>
https://jsfiddle.net/xde554am/1/

WHAT IS JAVASCRIPT?
A programming language
- variables
- APIs (Application Programming Interfaces)
- control flow (if/then, while, switch, etc.)
- objects and methods – JS is an Object Oriented programming
language (OO)
There is another class of language called functional programming
that we may introduce later. Neither is superior, but the require
different ways of thinking, and some problems are best suited to one
or the other.

VARIABLES IN THE HTML
 https://jsfiddle.net/egrs4j7a/4/
 In the HTML
 <p id="foo"></p>
In the JS
 var myText = "Hello";
 document.getElementById('foo').innerHTML = myText;

BUTTONS
<input type="submit" id="byBtn" value="Change"
onclick="change()"/>
 Causes page refresh, server loop
 Some styling differences
Versus
<button id="byBtn" onclick="change()">click me</button>
 No page refresh
 Client side action only
 Issues prior to IE6, but don’t care about that anymore
See http://particletree.com/features/rediscovering-the-button-
element/

PAGES ON THE WEBSERVER
For most of the rest of this class, you will be placing you pages on
the webserver. These are the credentials that I emailed to each of you
today. For instance, my silly simplest webpage example from last
week is now being served up at:
http://cspubl.uvic.ca/~dev00/testrepo/file.html
It still doesn’t do anything useful, of course, but I want to show you
how it got there

INSTALLING AN SSH CLIENT
(OPTIONAL)
Your bash shell can technically do SSH commands, but in order to
save typing I like to use a client to open my remote shells for me
I use KiTTY on windows (http://kitty.9bis.net/) or PuTTY
(http://www.chiark.greenend.org.uk/~sgtatham/putty/latest.html) on
Unix
The terminal app directly does this on Mac.
Basically the only advantage is that it saves all of your settings across
sessions. So for this exercise we will just use the Bash shell

IN DETAIL
ssh dev00@206.12.96.242
“dev00” gets replaced by your userid on the server from the email
206.12.96.242 is the ip address of the server we’ll be using for the rest of
the term
Can also use ssh dev00@cspubl.uvic.ca instead. (Why? DNS)
The first time it will say “the authenticity of the host cannot be established”
and ask you if you want to continue. Say yes.
Then enter your password (from the email)

WHAT NOW?
This is a bash shell on a remote server.
You won’t want to interact much on here, but there are a few things
you’ll want to do:
-- clone your webpage projects from git
-- possibly move files up and down manually
-- eventually install and build your webpage, when we get to pages
that require that
We’ll talk only about the first one today

SERVER DIRECTORIES
The public_html directory is the root of your webserver. (actually
there is one webserver for the whole class, but you each have a virtual
root)
This is accessed from cspubl.uvic.ca/~dev00
So if there were an “index.html” file at that root it would be displayed
when you type the above into your address bar (substituting your
devXX number, of course)
But we’ll want multiple projects on there, so we need to clone into
subdirectories and navigate there

CLONING FROM AN EXISTING
PROJECT
Go to github and copy the clone address (green button, for instance
https://github.com/derekja/testrepo.git)
“cd public_html” to get into the root of your webserver
“git clone https://github.com/derekja/testrepo.git” to make the new
subdirectory and populate with the contents of your project
Navigate in a browser, for instance
http://cspubl.uvic.ca/~dev00/testrepo/file.html

EXERCISE 1
Log onto your webserver, and clone your homework 2 or 3 project
(whichever has a better html file)

CSS INTRO – CASCADING STYLE
SHEETS
CSS is just styling on top of HTML
Everything should generally run the same without it, it will just look
ugly
In my example site a few weeks ago, I was using LESS. LESS and SASS
(among others) are CSS variants that compile down to CSS files but
use variables and some program control to make expressions easier

WAYS OF SELECTING TEXT
#id
 #id { color: black;}
.class
 .class { font-size:30px;}
tag
 p { text-align: center;}

CASCADING
HTML tags get superseded by classes and specific id’s
Classes get superseded by specific id’s
Specific id’s win
Unless something is marked important!

CSS EXERCISES
https://jsfiddle.net/sw465f3a/
Make “I’m a paragraph” green and 40px high
Make “another paragraph” blue
Make “more text” and the button red

EXERCISE ANSWERS
https://jsfiddle.net/sw465f3a/1/
Can you make all the paragraph tags blue without changing the class
or id specifiers?
https://jsfiddle.net/sw465f3a/2/

FLEXBOX
This is a system to allow elements to be flexibly positioned
Property Chrome IE Firefox Safari Opera
Basic support
(single-line flexbox)
29.0
21.0 -
webkit-
11.0 22.0
18.0 -moz-
6.1 -
webkit-
12.1 -
webkit-
Multi-line flexbox 29.0
21.0 -
webkit-
11.0 28.0 6.1 -
webkit-
17.0
15.0 -
webkit-
12.1

FLEXBOX FROGGY
Let’s take 10 or 15 minutes to do some examples
http://flexboxfroggy.com/

HOMEWORK 4
1) Build a website that uses HTML and CSS
 Can be very simple, but must have both elements in different files
 Use flexbox for full marks, but just changing colours or something will get you
most of the marks
2) Check the website into a new repository on github called “hw4”
3) Clone that repository onto your web server
Send me a link to the repo and a link to your running web page.
4 points – flexbox for positioning, show that you know how to target CSS by class,
id, and tag
3 points – working CSS that provides some styling
2 points – working pages, but only on github and not your server
2) For one point, include some javascript that prints something out to the console

Untangling spring week4

More Related Content

What's hot (20)

Viewers also liked (14)

Similar to Untangling spring week4 (20)

Recently uploaded (20)

Untangling spring week4