CS 174: Web Programming April 21 Class Meeting Department of Computer Science San Jose State University Spring 2015 Instructor: Ron Mak mak.

CS 174: Web ProgrammingApril 21 Class Meeting

Department of Computer ScienceSan Jose State University

Spring 2015Instructor: Ron Mak

www.cs.sjsu.edu/~mak

http://www.cs.sjsu.edu/~mak

Computer Science Dept.Spring 2015: April 21

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.



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.



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.



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.



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

https://developers.google.com/maps/web/

https://developers.google.com/maps/web/



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.html



8


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.js



9


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



10


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.js



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">



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">



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



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) { ... }



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>

qualifier.html



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>

qualifier.html



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

qualifier.css



18

Responsive Layout

Automatically make dramatic layout changes for a smaller screen.

True responsive design: Not just shrink elements. Make major layout changes.



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>

layout.html



20


<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>

layout.html



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>

layout.html



22


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;}

layoutWide.css



23


@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

layoutNarrow.css



24

jQuery Mobile Library

Use the jQuery Mobile Library for mobile apps.

Mobile Theme Roller: http://themeroller.jquerymobile.com

http://themeroller.jquerymobile.com/





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>

acordion.html



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>

acordion.html



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>

Demoacordion.html



28

jQuery Mobile Multipage

Break a single web document into multiple pages to fit a smaller screen.

Demo

CS 174: Web Programming April 21 Class Meeting Department of Computer Science San Jose State University Spring 2015 Instructor: Ron Mak mak.

Documents

web programming

mak web services

web browser

based web services

scalable web services

mak example web service

mak restful web services

popular web service