Web Concepts

Download Report

Transcript Web Concepts 

Unit 1 – Web
Concepts
Instructor: Brent Presley
ASSIGNMENT
• Read Chapter 1
• Complete lab 1 – Installing Portable Apps
The architecture of a web application
Murach’s
JavaScript, C1
© 2009, Mike Murach &
Associates, Inc.
Slide 4
How a web server processes a static web page
HTTP request
`
Web browser
Murach’s
JavaScript, C1
XHTML
file
HTTP response
Web server
© 2009, Mike Murach &
Associates, Inc.
Slide 5
A simple HTTP request
GET / HTTP/1.1
Host: www.example.com
A simple HTTP response
HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 136
Server: Apache/2.2.3
<html>
<head>
<title>Example Web Page</title>
</head>
<body>
<p>This is a sample web page</p>
</body>
</html>
Murach’s
JavaScript, C1
© 2009, Mike Murach &
Associates, Inc.
Slide 6
How a web server processes a dynamic web page
HTTP request
`
Web browser
HTTP response
Web server
Application server Database server
Application
script
Murach’s
JavaScript, C1
© 2009, Mike Murach &
Associates, Inc.
Slide 7
Web browsers
 Internet Explorer
 Firefox
 Safari
 Opera
 Chrome
Web servers
 Apache
 IIS
Murach’s
JavaScript, C1
© 2009, Mike Murach &
Associates, Inc.
Slide 8
Server-side scripting languages
 ASP.NET
 JSP
 PHP
 ColdFusion
 Ruby
 Perl
 Python
Murach’s
JavaScript, C1
© 2009, Mike Murach &
Associates, Inc.
Slide 9
How JavaScript fits into this architecture
HTTP request
`
Web browser
HTTP response
Web server
Application server Database server
Application
script
JavaScript
Murach’s
JavaScript, C1
© 2009, Mike Murach &
Associates, Inc.
Slide 10
HTML
• Web pages are defined using HTML(Hypertext Markup Language) and
now, XHTML Extensible HTML
• XHTML was created in 2001 to rein in different HTML standards and to
incorporate XML.
• XHTML has been incorporated into the newest version of HTML: HTML
5
– We’ll be using HTML 5 in this class. XHTML has been deprecated.
• HTML vs XHTML
– Many pages on the internet contain ‘bad’ HTML. The code will work fine in most
browsers even though it is not well formed.
– XHTML requires it to be well-formed
HTML
• HTML defines what text is displayed on a page, how it is
displayed and what images are displayed on a web page
• HTML is pure text (no Word-like formatting)
– Can read these in any text editor because it is just text
• HTML can be typed by hand, through Web Development programs
– Microsoft Expression Web
– Dreamweaver
• How to view the source code on a page
– right click- view source
WHY LEARN HTML?
• Some web techniques can only be created
using HTML
– Inserting JavaScript
• HTML developed by other programs
frequently needs tweaking
• In Web Data Mgt, we’ll be writing
programs to create HTML
STORING THE HTML
• Once the HTML has been perfected, it is saved or sent to a web server
that stores it in a location that is accessible by the Internet.
• An Internet user uses a web browser to request pages from a web
server and to display those pages.
• A web browser contains the ability to convert the HTML instructions &
javascript back into a graphical, functioning web page.
– Internet Explorer, Google Chrome and Mozilla Firefox are the some of the
most popular browsers.
WEB SITE VS. WEB PAGE
• A collection of related web pages forms a web.
• Each web page is stored in its own file. These files
are often organized into a folder.
• A web is also referred to as a web site.
• The main page of a web (site) should have a
special name: index.html or default.html.
– Web browsers recognize this as a starting page when
they access a web site
URL
• Each individual web page is assigned a URL
Universal Resource Locator
• The URL is the web page’s address on the
Internet.
• All pages have unique URLs
• Most URLs start with the letters WWW, but this is
no longer the requirement it used to be.
• www.mstc.edu
• The index.html is implied
URL COMPONENTS
WEB SITE ELEMENTS
• The starting page for a web site should be named
index.html
• Web sites normally have an images folder
– This folder contains all the images used by the web site.
– By storing only one copy of each image, the web site
can save space, especially if one image is used many
times.
WEB SITE ELEMENTS
• Many web sites also have a _private folder
– This folder can store pages, files or images that you don’t
want the Internet user to have direct access to.
– This folder might be used to store a database used by the
web site.
• Web sites are normally organized into folders of web
pages, just like a hard disk is organized.
– can also contain files. Word files, Excel files, PowerPoint files, etc
can all be displayed by web browsers.
• Folder structure on my website. What page pulls up??
Index.html
WEB SITE ELEMENTS
•
•
•
•
•
index.html
Images folder
_private folder
Other folders
Files
– Html and others
• Amazon.com
– Html, css,
javascript
WEB PAGE ELEMENTS
• Text (formatted, different sizes)
• Images (usually stored in a separate folder)
– Web pages can display three different kinds of images:
• jpg. (high quality photos, millions of colors)
• .gif (transparent, animated, 256 colors)
• .png (portable network graphics)
• Hyperlinks (links to other web pages/sites)
• Tables (used to organize page information)
• JavaScript (mini-programs that run within your web
page)
The code for a web page
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mike's Bait and Tackle Shop</title>
</head>
<body>
<h1>Mike's Bait and Tackle Shop</h1>
<p>Welcome to Mike's Bait and Tackle Shop.
We have all the gear you'll need
to make your next fishing trip a great success!</p>
<h2>New Products</h2>
<ul>
<li>Ultima 3000 Two-handed fly rod</li>
<li>Phil's Faux Shrimp Fly - Size 6</li>
<li>Titanium Open Back Fly Reel - Black</li>
</ul>
<p>Contact us by phone at 559-555-6624 to place
your order today.</p>
</body>
</html>
Murach’s
JavaScript, C1
© 2009, Mike Murach &
Associates, Inc.
Slide 22
The code for a web page that’s styled with CSS
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mike's Bait and Tackle Shop</title>
<style type='text/css'>
body {
background-color: #333366;
color: #FFFFFF;
}
h1 {
color: #FFCC33;
border-bottom: 3px solid #FF3333;
}
ul {
list-style-type: square;
}
</style>
</head>
<!-- The rest of this document is the same as before -->
Murach’s
JavaScript, C1
© 2009, Mike Murach &
Associates, Inc.
Slide 23
EXAMPLES OF CSS
• http://www.creativebloq.com/webdesign/examples-css-912710
• CSS handles the cool formatting and
shading
Common uses of JavaScript
 Validate form data before it is sent to the server for processing.
 Respond to user actions such as mouse clicks and key presses.
 Create dynamic menus.
 Create slide shows.
 Animate elements in a web page.
 Create timers, clocks, and calendars.
 Change the style sheet that a web page uses.
 Sort the data that’s in a table.
 Control the web browser window.
 Detect web browser plug-ins.
 Open new web browser windows.
 Change images when the user rolls the mouse over an image.
Murach’s
JavaScript, C1
© 2009, Mike Murach &
Associates, Inc.
Slide 25
Embedded JavaScript in an XHTML document
<!-- The code before this is the same as in figure 1-6. -->
<p>Contact us by phone at 559-555-6624
to place your order today.</p>
<p>&copy;
<script type="text/javascript">
var today = new Date();
document.writeln( today.getFullYear() );
</script>
Mike's Bait and Tackle Shop</p>
</body>
</html>
Murach’s
JavaScript, C1
© 2009, Mike Murach &
Associates, Inc.
Slide 26
JAVASCRIPT EXAMPLES
• http://www.creativebloq.com/webdesign/examples-of-javascript-1233964
• Javascript is what handles the ‘cool’
elements of a website
– Changing content, interesting effects
DOCUMENT OBJECT MODEL
• The Document Object Model (DOM) is a cross-platform and
language-independent convention for representing and
interacting with objects in HTML, XHTML, and XML
documents.[1] The nodes of every document are organized
in a tree structure, called the DOM tree. Objects in the DOM
tree may be addressed and manipulated by using methods
on the objects. The public interface of a DOM is specified in
its application programming interface (API).
DOM TREE FOR INDEX.HTML
The DOM (Document Object Model) for the page
html
head
body
title
h1
p
h2
text
text
text
text
Nodes
Murach’s
JavaScript, C1
ul
p
text
li
li
li
text
text
text
© 2009, Mike Murach &
Associates, Inc.
Slide 30
The DOM event cycle
Page
Loaded
Event
Occurs
Murach’s
JavaScript, C1
Script
Executes
DOM
Modified
© 2009, Mike Murach &
Associates, Inc.
Page
Updated
Slide 31
Terms
 rich Internet application (RIA)
 AJAX (asynchronous JavaScript and XML)
 XMLHttpRequest object
 Extensible markup language (XML)
 JavaScript object notation (JSON)
Murach’s
JavaScript, C1
© 2009, Mike Murach &
Associates, Inc.
Slide 32
AJAX-enabled request and response cycle
AJAX HTTP request:
The browser requests
updated information for a
page.
Client
Browser
Server
Web server
AJAX HTTP response:
The server returns the
requested information and
the page is updated.
Browser
Murach’s
JavaScript, C1
Web server
© 2009, Mike Murach &
Associates, Inc.
Slide 33
VIEW PAGE SOURCE ON A PAGE
• Right click then “view
source”
• “inspect element” will
also work
• Developer tools F12
HOW THE INTERNET WORKS –
SUMMARIZE WHAT WE’VE LEARNED
• LearnCode.Academy
• https://www.youtube.com/watch?v=e4S8zfL
dLgQ
ASSIGNMENTS
• In class assignment, work as a group of 3
– View source, or inspect element on 5 pages. Find an
example of the following: HTML, CSS, JavaScript.
– Copy/paste them into a document
– Tell me what you think each component that you’ve
chosen is doing
– submit the document on onedrive as a group
• Individual assignment –
– Unit 1-5 – HTML and CSS (will decide due date later in
the semester)