{"id":19261974,"url":"https://github.com/hacksu/html5apis-workshop","last_synced_at":"2026-03-01T15:32:18.109Z","repository":{"id":10400852,"uuid":"12553954","full_name":"hacksu/HTML5APIs-Workshop","owner":"hacksu","description":"Let's take a look at some interesting APIs that are added with the new HTML5 specifications.","archived":false,"fork":false,"pushed_at":"2013-09-03T22:36:38.000Z","size":140,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-02-23T18:44:38.239Z","etag":null,"topics":["advanced","lesson"],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hacksu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-09-03T03:14:06.000Z","updated_at":"2020-02-23T22:19:00.000Z","dependencies_parsed_at":"2022-07-30T17:48:15.669Z","dependency_job_id":null,"html_url":"https://github.com/hacksu/HTML5APIs-Workshop","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/hacksu/HTML5APIs-Workshop","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hacksu%2FHTML5APIs-Workshop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hacksu%2FHTML5APIs-Workshop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hacksu%2FHTML5APIs-Workshop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hacksu%2FHTML5APIs-Workshop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hacksu","download_url":"https://codeload.github.com/hacksu/HTML5APIs-Workshop/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hacksu%2FHTML5APIs-Workshop/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29973317,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-01T15:29:09.406Z","status":"ssl_error","status_checked_at":"2026-03-01T15:28:28.558Z","response_time":124,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["advanced","lesson"],"created_at":"2024-11-09T19:29:15.116Z","updated_at":"2026-03-01T15:32:18.092Z","avatar_url":"https://github.com/hacksu.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"#HTML5 APIs Workshop\n\nLet's take a look at some interesting APIs that are added with the new [HTML5 specifications](http://www.w3.org/html/wg/drafts/html/master/).\n\n## To be covered\n\n* Fullscreen API\n* Link Prefetching\n* Geolocation API\n* Drag and Drop\n* Get User Media API\n\n## Foundation\n\nThe first thing we need is to make sure we are running an HTML5 capabale web browser. You can check out how well your broswer performs [here](http://html5test.com/) and then also check the specific APIs [here](http://caniuse.com/). Make sure your browswer can handle all the APIs that we will be covering in this workshop.\n\nIf you think you will run into problems get the latest version of [Chrome](http://www.google.com/chrome).\n\n## Basic template\n\nListed below is the basic folder structure for this workshop as well as a basic HTML5 compliant structure for a new web page. This is the structure we will base the workshop on. Get familiar with all the basic elements and what they mean.\n\n    folder/\n        index.html\n        js/\n            scripts.js\n        css/\n            styles.css\n    \n\nIf you are really clever, you will be able to code this from scratch!\n\n    \u003c!doctype html\u003e\n    \u003chtml lang=\"en\"\u003e\n        \n        \u003chead\u003e\n            \u003cmeta charset=\"utf-8\"\u003e\n            \u003ctitle\u003eHTML5 API Workshop\u003c/title\u003e\n            \u003clink rel=\"stylesheet\" href=\"css/styles.css\"\u003e\n            \u003c!--[if lt IE 9]\u003e\n                \u003cscript src=\"http://html5shiv.googlecode.com/svn/trunk/html5.js\"\u003e\u003c/script\u003e\n            \u003c![endif]--\u003e\n        \u003c/head\u003e\n        \n        \u003cbody\u003e\n            \u003cscript src=\"js/scripts.js\"\u003e\u003c/script\u003e\n        \u003c/body\u003e\n    \n    \u003c/html\u003e\n\n## Fullscreen API\n\nThis is a JavaScript API that allows developers to launch their web page into full screen in the browser, depending on user approval. This API comes in really handy for making games on the web.\n\nFirst let's add a button to our HTML document inside the body tag for the user to enter full screen mode. Add the following code to our index.html file.\n\n    \u003cbutton onclick=\"launchFullScreen()\"\u003eLaunch Full Screen\u003c/button\u003e\n    \nNext, add the following JavaScript code which does all the heavy lifting to use the full screen API. Add the following code to your js/scripts.js file.\n\n    // Find the right method, call on correct elements\n    function launchFullScreen() {\n        var element = document.documentElement;\n        if (element.requestFullScreen) {\n            element.requestFullScreen();\n        } else if (element.mozRequestFullScreen) {\n            element.mozRequestFullScreen();\n        } else if (element.webkitRequestFullScreen) {\n            element.webkitRequestFullScreen();\n        }\n    }\n    \nHit the button and see the magic at work!\n\n## Link Prefetching\n\nHTML5 allows you to silently preload sites or images to create a more seamless user experience.\n\nJust add the following to our index.html file somewhere inside the body tag.\n\n    \u003c!-- full page --\u003e\n    \u003clink rel=\"prefetch\" href=\"http://hacksu.cs.kent.edu\" /\u003e\n    \n    \u003c!-- just an image --\u003e\n    \u003clink rel=\"prefetch\" href=\"https://pbs.twimg.com/media/BFAtXVcCEAIeMHM.jpg\" /\u003e\n    \n## Geolocation API\n\nEver want to know the precise latitude and longitude of your user? You can now do this with HTML5 with some pure javascript.\n    \nFirst let's add a button to our HTML document inside the body tag to request the user's location. Add the following code to our index.html file.\n\n    \u003cbutton onclick=\"getLocation()\"\u003eGet Location\u003c/button\u003e\n    \nNext let's add the JavaScript code to our scripts.js file.\n\n    function getLocation() {\n        navigator.geolocation.getCurrentPosition(printCoordinates);\n    }\n    \n    function printCoordinates(position) {\n        var latitude = position.coords.latitude;\n        var longitude = position.coords.longitude;\n        console.log('Latitude: ' + latitude);\n        console.log('Longitude: ' + longitude);\n    }\n    \nLoad the index.html file and open the developer console to see the location printed!\n\n## Drag and Drop\n\nThis is a new standard in HTML5 that allows elements to be drag and droppable. And the beautiful thing is, you don't need any library or external script anymore!\n\nAdd the following code to our index.html file:\n\n    \u003cdiv id=\"dropper\" ondrop=\"drop(event)\" ondragover=\"allowDrop(event)\" style=\"width:255px;height:255px;padding:10px;border:1px solid black;\"\u003e\u003c/div\u003e\n\n    \u003cimg id=\"dragger\" src=\"http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png\" draggable=\"true\" ondragstart=\"drag(event)\" width=\"250\" height=\"250\"\u003e\n\nNext, add the following JavaScript code to your js/scripts.js file.\n\n    function allowDrop(event) {\n\t    event.preventDefault();\n    }\n\n    function drag(event) {\n\t    event.dataTransfer.setData(\"Text\",event.target.id);\n    }\n\n    function drop(event) {\n\t    event.preventDefault();\n\t    var data = event.dataTransfer.getData(\"Text\");\n\t    event.target.appendChild(document.getElementById(data));\n    }\n\nCheck it out! Now you can drag the image into the box :)\n\n## Get User Media API\n\nThis little tutorial will allow you to capture video directly from your computer's webcam! First let's add a couple elements to our body tag in index.html.\n\nNOTE: This can not be run locally, use Brackets to run a local server with Chrome.\n\n\t\u003cvideo autoplay\u003e\u003c/video\u003e\n\t\nNow let's get juicy and write some lines of sweet JavaScript code. Add this to your js/scripts.js file.\n\n\tvar video = document.querySelector('video');\n\n\tnavigator.getMedia = ( navigator.getUserMedia ||\n\t                       navigator.webkitGetUserMedia ||\n\t                       navigator.mozGetUserMedia ||\n\t                       navigator.msGetUserMedia);\n\t\n\tnavigator.getMedia (\n\t\n\t   // constraints\n\t   {\n\t      video: true\n\t   },\n\t\n\t   // successCallback\n\t   function(localMediaStream) {\n\t      video.src = window.URL.createObjectURL(localMediaStream);\n\t      video.onloadedmetadata = function(e) {\n\t         // Do something with the video here.\n\t      };\n\t   },\n\t\n\t   // errorCallback\n\t   function(err) {\n\t    console.log(\"The following error occured: \" + err);\n\t   }\n\t);\n\nNow you must be wondering what this code means...\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhacksu%2Fhtml5apis-workshop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhacksu%2Fhtml5apis-workshop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhacksu%2Fhtml5apis-workshop/lists"}