Untangling spring week4
25
UNTANGLING THE WEB Class 4: HTML, CSS, and JS
-
Upload
derek-jacoby -
Category
Education
-
view
326 -
download
0
Transcript of 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 [email protected]
“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 [email protected] 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 OperaBasic support(single-line flexbox)
29.021.0 -
webkit-
11.0 22.018.0 -moz-
6.1 -webkit-
12.1 -webkit-
Multi-line flexbox 29.021.0 -
webkit-
11.0 28.0 6.1 -webkit-
17.015.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 tag3 points – working CSS that provides some styling2 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
