1. CS 174: Web Programming April 21 Class Meeting Department of Computer Science San Jose State University Spring 2015 Instructor: Ron Mak www.cs.sjsu.edu/~mak

2. Computer Science Dept. Spring 2015: April 21 CS 174: Web Programming © R. Mak 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. 2

3. Computer Science Dept. Spring 2015: April 21 CS 174: Web Programming © R. Mak 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. 3

4. Computer Science Dept. Spring 2015: April 21 CS 174: Web Programming © R. Mak 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. 4

5. Computer Science Dept. Spring 2015: April 21 CS 174: Web Programming © R. Mak 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. 5

6. Computer Science Dept. Spring 2015: April 21 CS 174: Web Programming © R. Mak 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/https://developers.google.com/maps/web/ Download the JavaScript API 6

7. Computer Science Dept. Spring 2015: April 21 CS 174: Web Programming © R. Mak Example Web Service: Google Maps, cont’d 7 Geolocation Map <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 type="text/javascript" src="js/map.js"> Google Map with Geolocation map.html

8. Computer Science Dept. Spring 2015: April 21 CS 174: Web Programming © R. Mak Example Web Service: Google Maps, cont’d 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. Computer Science Dept. Spring 2015: April 21 CS 174: Web Programming © R. Mak Example Web Service: Google Maps, cont’d 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. Computer Science Dept. Spring 2015: April 21 CS 174: Web Programming © R. Mak Example Web Service: Google Maps, cont’d 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. Computer Science Dept. Spring 2015: April 21 CS 174: Web Programming © R. Mak 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. 11

12. Computer Science Dept. Spring 2015: April 21 CS 174: Web Programming © R. Mak 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: 12 <meta name="viewport" content="width=device-width, initial-scale=1">

13. Computer Science Dept. Spring 2015: April 21 CS 174: Web Programming © R. Mak Responsive Websites and Viewports, cont’d 13 No viewport.With viewport. HTML and CSS, 8 th ed. by Elizabeth Castro and Bruce Hyslop Peachpit Press, 2014 ISBN 978-0-321-92883-2

14. Computer Science Dept. Spring 2015: April 21 CS 174: Web Programming © R. Mak 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: 14 @media print { body { font-size: 10pt; } @media (max-width: 500px) {... }

15. Computer Science Dept. Spring 2015: April 21 CS 174: Web Programming © R. Mak @media Qualifier 15 Qualifier Demo <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="css/qualifier.css" /> qualifier.html

16. Computer Science Dept. Spring 2015: April 21 CS 174: Web Programming © R. Mak @media Qualifier, cont’d 16 Qualifier Demo Try resizing this page. When the page is wider than 700 pixels, it shows black text on a white background. When the page is narrower than 700 pixels, the colors reverse, giving white text on a black background. qualifier.html

17. Computer Science Dept. Spring 2015: April 21 CS 174: Web Programming © R. Mak @media Qualifier, cont’d 17 body { font-family: sans-serif; color: black; background-color: white; } @media (max-width: 700px) { body { color: white; background-color: black; } } Demo qualifier.css

18. Computer Science Dept. Spring 2015: April 21 CS 174: Web Programming © R. Mak Responsive Layout  Automatically make dramatic layout changes for a smaller screen.  True responsive design: Not just shrink elements. Make major layout changes. 18

19. Computer Science Dept. Spring 2015: April 21 CS 174: Web Programming © R. Mak Responsive Layout, cont’d 19 Responsive Layout <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" /> layout.html

20. Computer Science Dept. Spring 2015: April 21 CS 174: Web Programming © R. Mak Responsive Layout, cont’d 20 Responsive Layout Demo one two three four five layout.html

21. Computer Science Dept. Spring 2015: April 21 CS 174: Web Programming © R. Mak Responsive Layout, cont’d 21 Try this page on different sizes of screens. 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. This is my footer. layout.html

22. Computer Science Dept. Spring 2015: April 21 CS 174: Web Programming © R. Mak Responsive Layout, cont’d 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. Computer Science Dept. Spring 2015: April 21 CS 174: Web Programming © R. Mak Responsive Layout, cont’d 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. Computer Science Dept. Spring 2015: April 21 CS 174: Web Programming © R. Mak jQuery Mobile Library  Use the jQuery Mobile Library for mobile apps.  Mobile Theme Roller: http://themeroller.jquerymobile.com http://themeroller.jquerymobile.com 24

25. Computer Science Dept. Spring 2015: April 21 CS 174: Web Programming © R. Mak jQuery Mobile Accordion 25 Mobile Accordion <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 type="text/javascript" src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"> Mobile Accordion Demo acordion.html

26. Computer Science Dept. Spring 2015: April 21 CS 174: Web Programming © R. Mak jQuery Mobile Accordion, cont’d 26 <div data-role = "collapsible-set" data-theme = "c" data-content-theme = "b"> CS 145 Fundamentals: Contiguous and non-contiguous memory management; processor scheduling and interrupts; concurrent, mutually exclusive, synchronized and deadlocked processes; files. Substantial programming project required. Prerequisite: CS 146 or SE 146 (with a grade of "C-" or better). acordion.html

27. Computer Science Dept. Spring 2015: April 21 CS 174: Web Programming © R. Mak jQuery Mobile Accordion, cont’d 27 CS 153... CS 174... CS 235... Demo acordion.html

28. Computer Science Dept. Spring 2015: April 21 CS 174: Web Programming © R. Mak jQuery Mobile Multipage  Break a single web document into multiple pages to fit a smaller screen. 28 Demo