UNIT 10 LINKS AND GEOLOCATION

OBJECTIVES  CO1 Describe various components of the Open Web Platform.  CO2 Create a website using HTML5.  CO3 Create a website that is optimized for viewing on a mobile device. 2

LEARNING OUTCOMES LO49 Describe new link functionality in HTML5. LO50 Create a Web page that uses HTML5 link types. LO51 Describe the features of the geolocation API. LO52 Create a Web page that uses the geolocation API. 3

HOW LINKS HAVE CHANGED IN HTML5  and are more similar Both have the same attributes has additional attributes to deal with image maps ,, and have new relationships you apply using rel 4

LINK TYPES  Links to other documents as a text or image hyperlink.  When the link is clicked, the browser opens a new document.  Links to other documents as an image map.  Defines an area of an image that is clickable and when that area is clicked, the browser opens a new document.  Links to other documents to be used or referenced by the current document.  Most often used to reference style sheets, as in: 5

CHANGES TO THE ELEMENT  The name attribute is obsolete. Use id instead  The target attribute is no longer deprecated. Frames are no longer part of the HTML5 specification iframes still are, and you can reference specific iframes or windows with the target attribute  HTML5 also adds a media attribute to indicate with media queries the devices or media that the linked document is for. 6

LINKING TO POINTS WITHIN THE DOCUMENT  Mark the place in the document Linking Block-level Elements  Add the link Linking Block-level Elements 7 Each id attribute in the document should be unique.

target ATTRIBUTE  _blank Opens the linked document in a brand-new window (or tab)  _self Opens the linked document in the current window  _parent Opens the linked document in the parent browsing context  _top Opens the linked document at the top of the browsing context 8

USING IFRAMES This link points to a location in the iframe document. 9

LINKING A BLOCK OF ELEMENTS Come See our New Garden Our new garden is beautiful, lots of flowers and plants. Come see photos. 10

PLACEHOLDER LINKS  Links without an href Can't click me 11

ELEMENT Now includes the following attributes:  Rel This attribute indicates the relationship of the linked document to the current document.  Media Just like the element, this attribute adds media queries to indicate what media the linked document is for.  Hreflang This attribute was added to let you declare the language of the linked document. 12

hidden ATTRIBUTE Home Examples More Examples 13

hidden ATTRIBUTE Safari and Firefox  Not supported  Set style to display: none; 14

contextmenu ATTRIBUTE This link has a context menu 15

rel ATTRIBUTE 16 Link typeDescriptionEffect on and Effect on alternateAlternate representation of current document Hyperlink authorA link to the current document's author Hyperlink bookmarkThe permalink to the nearest ancestor HyperlinkNot allowed externalA link that is on a different site HyperlinkNot allowed helpContext-sensitive helpHyperlink

rel ATTRIBUTE 17 Link typeDescriptionEffect on and Effect on iconLink to an icon or faviconNot allowedExternal resource licenseLink to the copyright license for the document Hyperlink nextLink to the next document in the series Hyperlink nofollowNot endorsed by the current document's author AnnotationNot allowed

rel ATTRIBUTE 18 Link typeDescriptionEffect on and Effect on noreferrerTells user agent to send an HTTP Referer header AnnotationNot allowed pingbackThe address of the pingback server Not allowedExternal resource prefetchDownload document ahead of time External resource prevLink to the previous page in the series Hyperlink

rel ATTRIBUTE 19 Link typeDescriptionEffect on and Effect on searchSearch through the document and related pages Hyperlink sidebarA document that should be displayed in the sidebar Hyperlink stylesheetLink to a stylesheetNot allowedExternal resource tagThe address of a tag that applies to the current document Hyperlink

ALTERNATE LINK TYPE <a href=" rel="canonical" hreflang="en"> 20

AUTHOR LINK TYPE <a href="/bio/Jennifer-Kyrnin-5105.htm" rel="author">Jennifer Kyrnin 21

BOOKMARK AND EXTERNAL LINK TYPES  Bookmark Most blogs use the bookmark type to identify the permalink for the post  External Use jQuery to cause external links to open in a new window $("[rel=external]").attr("target", "_blank"); 22

HELP, LICENSE, TAG, AND SEARCH LINK TYPES  Use to provide more information on the page  Browsers don't do anything special with them  License links to the license for the entire page 23

ICON LINK TYPE 24

NOFOLLOW AND NOREFERRER TYPES Use for:  Content you don't vouch for  Paid links  Pages search engines can't use 25

ADD MULTIPLE TYPES TO A LINK 26

PINGBACK TYPE  Pingback servers accept XML-RPC connections  Used to tell one website that another website has linked to it 27

PREFETCH TYPE Download the file during idle time 28

PREV AND NEXT TYPES  Most browsers don't do anything with them  Can use CSS styles with them 29

 Only supported by Firefox and Opera  Opens a sidebar window when user clicks the link 30 SIDEBAR LINK TYPE

GEOLOCATION SOURCES  The IP address  The wireless network connection  The cell towers a phone is using  A dedicated global-positioning system (GPS) in the device 31

GEOLOCATION ACCURACY  Not always accurate  In general: IP address is accurate to the city Wireless network is accurate to 20 meters Cell towers is accurate to 100 meters Embedded GPS accurate to 10 meters 32

GEOLOCATION API BROWSER SUPPORT  Android 2.0  Chrome 5.0  Firefox 3.5  IE 9  iOS 3.0  Opera 10.6  Safari

USES FOR GEOLOCATION  Mapping  Photo locator  Fraud detection  Targeted advertising  Gaming 34

DETECTING SUPPORT FOR GEOLOCATION function supports_geolocation() { return !!navigator.geolocation; } 35

GEOLOCATION API METHODS  getCurrentPosition()  watchPosition()  clearWatch() 36

 coords.latitude  coords.longitude  coords.accuracy  coords.altitude  coords.altitudeAccuracy  coords.heading  coords.speed  timestamp 37 POSITION OBJECT PROPERTIES Distances are metric Distances are metric

positionERROR OBJECT  PERMISSION_DENIED (1)  POSITION_UNAVAILABLE (2)  TIMEOUT (3)  UNKNOWN_ERROR(4) 38

getCurrentPosition METHOD function getLocation() { navigator.geolocation.getCurrentPosition( mapIt, locationError); } 39

SUCCESS METHOD function mapIt(position) { var lat = position.coords.latitude; var lon = position.coords.longitude; alert("You are at "+ lat + " latitude, and "+ lon +" longitude."); } 40

ERROR METHOD function locationError(error) { switch(error) { case 1: alert("Location services denied"); break; case 2: alert("Could not contact location services network" + "or satellites"); break; case 3: alert("Location services timed out"); break; default: alert("Location could not be determined."); } 41

watchPosition METHOD var watch; function getLocation() { watch = navigator.geolocation.watchPosition (mapIt, locationError); } 42

clearWatch METHOD function clearLocation() { navigator.geolocation.clearWatch (watch); } 43

OPTIONS FOR getCurrentPosition() AND watchPosition()  enableHighAccuracy getCurrentPosition(mapIt, locationError, {enableHighAccuracy: true});  Timeout getCurrentPosition(mapIt, locationError, {timeout: 90000});  maximumAge getCurrentPosition(mapIt, locationError, {maximumAge: }); 44

SETTING ALL OPTIONS var positionOptions = { enableHighAccuracy: true, timeout: 90000, maximumAge: }; getCurrentPosition(mapIt, locationError, positionOptions); 45

PRIVACY AND GEOLOCATION Browsers require user permission to track location 46

MAP APIs  Bing Maps API  Google Maps JavaScript API  MapQuest Open API  Ovi Maps API 47