cs 174: web programming november 9 class meeting department of computer science san jose state...
TRANSCRIPT
CS 174: Web ProgrammingNovember 9 Class Meeting
Department of Computer ScienceSan Jose State University
Fall 2015Instructor: Ron Mak
www.cs.sjsu.edu/~mak
Computer Science Dept.Fall 2015: November 9
CS 174: Web Programming© R. Mak
2
Web Services
A web service is a software system designed to support interoperable machine-to-machine interaction over a network.
The service is provided by a server machine (the web service provider).
Client applications make service requests to the server and get back responses.
A popular form of distributed computing.
Computer Science Dept.Fall 2015: November 9
CS 174: Web Programming© R. Mak
3
Traditional Web Services
Traditional web services were each described by a service contract written in the Web Services Description Language (WSDL). The WSDL document is an XML document.
The WSDL document and the request and response messages are transmitted over HTTP.
Messages use the Service Oriented Architecture Protocol (SOAP). SOAP is also an XML format.
Computer Science Dept.Fall 2015: November 9
CS 174: Web Programming© R. Mak
4
RESTful Web Services
A simpler web services protocol is REST. Representational State Transfer
A software architecture style consisting of guidelines and best practices for creating scalable web services.
Computer Science Dept.Fall 2015: November 9
CS 174: Web Programming© R. Mak
5
Browser-Based Web Service Clients
You can invoke many web services today from a web browser using AJAX.
You download JavaScript code from the web service provider that makes the AJAX calls. Therefore, you don’t worry about what protocol the
web service provider uses.
Popular web service providers include Google, Facebook, Amazon, etc.
Computer Science Dept.Fall 2015: November 9
CS 174: Web Programming© R. Mak
6
Example Web Service: Google Maps
Google provides a large number of web-based web services, such as Google Maps.
See https://developers.google.com/maps/web/ Download the JavaScript API
Computer Science Dept.Fall 2015: November 9
CS 174: Web Programming© R. Mak
7
Example Web Service: Google Maps, cont’d
<head> <title>Geolocation Map</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/map.css" /> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"> </script> <script type="text/javascript" src="js/map.js"> </script></head>
<body> <h1>Google Map with Geolocation</h1> <div id="map-canvas"></div></body>
map/map.html
Computer Science Dept.Fall 2015: November 9
CS 174: Web Programming© R. Mak
8
Example Web Service: Google Maps, cont’d
var map;
function init() { var mapOptions = {"zoom": 6}; map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(positionMap, cannotPositionMap); } else { handleNoGeolocation(false); }}
map/map.js
Computer Science Dept.Fall 2015: November 9
CS 174: Web Programming© R. Mak
9
Example Web Service: Google Maps, cont’d
function positionMap(position){ var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var infowindow = new google.maps.InfoWindow( {"map": map, "position": pos, "content": "Location found using HTML5."});
map.setCenter(pos);}
function cannotPositionMap(){ handleNoGeolocation(true);}
map.js
Computer Science Dept.Fall 2015: November 9
CS 174: Web Programming© R. Mak
10
Example Web Service: Google Maps, cont’d
function handleNoGeolocation(errorFlag) { if (errorFlag) { var content = "Error: The Geolocation service failed."; } else { var content = "Error: Your browser doesn't support geolocation."; }
var options = {"map": map, "position": new google.maps.LatLng(60, 105), "content": content};
var infowindow = new google.maps.InfoWindow(options); map.setCenter(options.position);}
google.maps.event.addDomListener(window, "load", init);
Demo
map/map.js
Computer Science Dept.Fall 2015: November 9
CS 174: Web Programming© R. Mak
11
Mobile Apps
Most mobile devices today have an HTML5-compliant browser.
Therefore, the easiest way to create a mobile app is to create a web app.
A web app for a mobile device has to accommodate the device’s screen size and use special input elements. Examples:
Open special keyboards with prominent / : and @ keys.
<input type="url"><input type="email">
Computer Science Dept.Fall 2015: November 9
CS 174: Web Programming© R. Mak
12
Responsive Websites and Viewports
The default browser behavior on many mobile devices is simply to shrink the web pages to fit the smaller screen.
What you want instead is a responsive website. The layout, font sizes, etc. automatically adjust
to accommodate the smaller screen size.
Change the default behavior with the viewport meta-element:
<meta name="viewport" content="width=device-width, initial-scale=1">
Computer Science Dept.Fall 2015: November 9
CS 174: Web Programming© R. Mak
13
Responsive Websites and Viewports, cont’d
No viewport. With viewport.
HTML and CSS, 8th ed.by Elizabeth Castroand Bruce HyslopPeachpit Press, 2014ISBN 978-0-321-92883-2
Computer Science Dept.Fall 2015: November 9
CS 174: Web Programming© R. Mak
14
CSS Media Types
A CSS @media rule allows you to specify a media type such as print and screen to determine which CSS rules should apply. Example:
Change the font size for printing.
You can also add a qualifying condition. Example:
@media print { body { font-size: 10pt; }}
@media (max-width: 500px) { ... }
Computer Science Dept.Fall 2015: November 9
CS 174: Web Programming© R. Mak
15
@media Qualifier
<head> <title>Qualifier Demo</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="css/qualifier.css" /></head>
mobile/qualifier.html
Computer Science Dept.Fall 2015: November 9
CS 174: Web Programming© R. Mak
16
@media Qualifier, cont’d
<body> <h1>Qualifier Demo</h1> <p> Try resizing this page. When the page is wider than 700 pixels, it shows black text on a white background. </p> <p> When the page is narrower than 700 pixels, the colors reverse, giving white text on a black background. </p></body>
mobile/qualifier.html
Computer Science Dept.Fall 2015: November 9
CS 174: Web Programming© R. Mak
17
@media Qualifier, cont’d
body { font-family: sans-serif; color: black; background-color: white;}
@media (max-width: 700px) { body { color: white; background-color: black; }}
Demo
mobile/qualifier.css
Computer Science Dept.Fall 2015: November 9
CS 174: Web Programming© R. Mak
18
Responsive Layout
Automatically make dramatic layout changes for a smaller screen.
True responsive design: Not just shrink elements. Make major layout changes.
Computer Science Dept.Fall 2015: November 9
CS 174: Web Programming© R. Mak
19
Responsive Layout, cont’d
<head> <title>Responsive Layout</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="css/layoutWide.css" /> <link rel="stylesheet" type="text/css" href="css/layoutNarrow.css" /></head>
mobile/layout.html
Computer Science Dept.Fall 2015: November 9
CS 174: Web Programming© R. Mak
20
Responsive Layout, cont’d
<body> <div id="all"> <header> <h1>Responsive Layout Demo</h1> </header> <nav> <ul> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> </nav>
mobile/layout.html
Computer Science Dept.Fall 2015: November 9
CS 174: Web Programming© R. Mak
21
Responsive Layout, cont’d <div id="content"> <p> Try this page on different sizes of screens. </p> <p> On wider browsers, it will have a two-column layout. On a smaller screen (like a phone,) it will revert to a single-column format better for mobile browsers. </p> </div> <footer> This is my footer. </footer> </div></body>
mobile/layout.html
Computer Science Dept.Fall 2015: November 9
CS 174: Web Programming© R. Mak
22
Responsive Layout, cont’d
body { font-family: sans-serif; background-color: lightgray;}
#all { background-color: white; width: 600px; margin-left: auto; margin-right: auto;}
header { text-align: center;}
nav { background-color: green; float: left; width: 150px; color: white; height: 400px;}
#content { background-color: yellow; float: left; width: 440px; height: 400px; padding-left: 10px;}
footer { color: white; background-color: gray; clear: both; text-align: center;}
mobile/layoutWide.css
Computer Science Dept.Fall 2015: November 9
CS 174: Web Programming© R. Mak
23
Responsive Layout, cont’d
@media (max-width: 600px) { #all { width: 90%; font-size: 125%; } nav { display: block; width: 100%; height: auto; }
#content{ display: block; width: 95%; height: auto; padding-left: 5%; } footer { display: block; width: 100%; }}
Demo
mobile/layoutNarrow.css
Computer Science Dept.Fall 2015: November 9
CS 174: Web Programming© R. Mak
24
jQuery Mobile Library
Use the jQuery Mobile Library for mobile apps.
Mobile Theme Roller: http://themeroller.jquerymobile.com
Computer Science Dept.Fall 2015: November 9
CS 174: Web Programming© R. Mak
25
jQuery Mobile Accordion
<head> <meta charset="UTF-8"> <title>Mobile Accordion</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"> </script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"> </script></head>
<body> <div data-role = "page"> <div data-role = "header" data-position = "fixed"> <h1>Mobile Accordion Demo</h1> </div>
mobile/accordion.html
Computer Science Dept.Fall 2015: November 9
CS 174: Web Programming© R. Mak
26
jQuery Mobile Accordion, cont’d <div data-role = "content"> <div data-role = "collapsible-set" data-theme = "c" data-content-theme = "b"> <div data-role = "collapsible"> <h2>CS 145</h2> <div> <p> Fundamentals: Contiguous and non-contiguous memory management; processor scheduling and interrupts; concurrent, mutually exclusive, synchronized and deadlocked processes; files. Substantial programming project required. </p> <p> <strong>Prerequisite:</strong> CS 146 or SE 146 (with a grade of "C-" or better). </p> </div> </div>
mobile/accordion.html
Computer Science Dept.Fall 2015: November 9
CS 174: Web Programming© R. Mak
27
jQuery Mobile Accordion, cont’d <div data-role = "collapsible"> <h2>CS 153</h2> <div> ... </div> </div> <div data-role = "collapsible"> <h2>CS 174</h2> <div> ... </div> </div> <div data-role = "collapsible"> <h2>CS 235</h2> <div> ... </div> </div> </div> </div> </div></body>
Demomobile.accordion.html
Computer Science Dept.Fall 2015: November 9
CS 174: Web Programming© R. Mak
28
jQuery Mobile Multipage
Break a single web document into multiple pages to fit a smaller screen.
Demo