HTML5 & JavaScript: The Future Now

Click here to load reader

  • date post

  • Category


  • view

  • download


Embed Size (px)


An overview of HTML5 and JavaScript and the exciting new opportunities that they open up.

Transcript of HTML5 & JavaScript: The Future Now

  • 1. IPTCR ASJ V e now A ur 5&t fu MLThebHawkes HT RoHi, Im Rob Hawkes and Im here today to introduce HTML5 & JavaScript and talk about whytheyre awesome.

2. I work at Mozilla.If youre unsure about how much I love Mozilla then check out this beautiful chicken and leekpie with extra Firefox goodness.It was made by my talented girlfriend and it was delicious. 3. My official job title is Technical Evangelist but I prefer what it says on my business card.Part of my job is to engage with developers and designers like you and I about cool newtechnologies on the Web.And for those of you with no idea of what a rawket is, I made a multiplayer game calledRawkets in which players y around in little rockets and shoot each other in the face with thelatest Web technologies.Its actually quite fun! 4. Like Kerri-Anne Im also a recent graduate, last May I nished my degree in Interactive MediaProduction at Bournemouth University. 5. We should have enough time for questions at the end but also feel free to grab me in personafter this talk or on Twitter. Im always happy to help.These slides will go online after this talk and theyll be available from my personal website.Ill put all the details up at the end. 6. Created by Phil Banks (@emirpprime)Now, its no secret that I spend most of my time experimenting with HTML5 and other cooltechnologies like JavaScript.If youve met me before then you probably already know about my slight addiction to HTML5canvas, visual programming, and gaming. 7. iptScrJava about? 5 & fussL M at is all the HThWBut what are HTML5 & JavaScript? And whats all the fuss about? 8. c hd teateture utd or thefugo bf din g the Wegra rinUp PrepaAt the heart of matters, HTML5 is basically just an incremental upgrade to HTML thatprovides a few new features that are desperately needed.Its important not to look at HTML5 as an entirely new language, instead look at it as variousimprovements to what already exists.The same is true with the new JavaScript APIs; they arent a new version of JavaScript, justadditions to the existing programming language to provide new features. 9. ies log n o dech sourcete he co ent Opnv iew ca yone AnThey are open technologies.Anyone can get involved in their creation; through browser developers like Mozilla, orthrough standards organisations like the W3C and WHATWG.Not long ago I was in a W3C meeting to explore what is needed for making games with thesetechnologies. What was cool was that anyone was allowed to take part; which includedeveryday developers, employees of major browsers, and games companies.Also, these technologies are open in that anyone can view the resulting code that is usedwithin Web pages, which is a fantastic way of learning. 10. ie slo g no ith e c h lop we tde ve Frereetose.Fu toFreeThey are free technologies.Anyone can use these technologies without having to pay anything, both for using thetechnology and developing with it.This is unlike closed environments like Flash where you have to pay to use official codeeditors and production environments. 11. less - in warelug P softrtyd-pathiron ceelianorer NomThey are technologies baked directly into the browser, which means no more plugins!No longer do you have to rely on users having third-party software installed to use richmedia. 12. bleera sroprmIntess platfo cro orka ttow buil areeyThThese technologies are built to work across platforms; whether thats desktop, mobile, TV, oranything else!This makes it great to develop this way because you can be sure that it will work the sameway on any platform that has support. 13. o rtp p s u edse r up po rtro w ares-buresross ajor feat C m ostMAs with any technology on the Web its important that you can use it across all the majorbrowsers.Fortunately the bigger and older features of HTML5 like video are supported by all the majorbrowsers, with some of the newer and smaller features getting better support as time goeson.The situation isnt perfect but were denitely in a position where these technologies can nowbe used in production. 14. Theres a fantastic website called Can I Use which lets you know what browsers support eachtechnology. 15. tesurivoesy fafeatur M estn ew theb esomhting lig HighThere are so many new features that HTML5 & JavaScript bring to the table. So many in factthat I could probably spend an entire day telling you about them.I dont have that luxury today, so Im going to show you some of my favourites to help spikeyour imagination. 16. ntn tec o eb n d rnW a de turefor am o uc tsStr elemen ewNSome of the most useful additions with HTML5 are the structural and content elements.I wont be covering them all but Id like to highlight a few of the most prominent. 17. describes a generic section of website, allowing content to be grouped into logicalthemes and areas. describes the header of a website or area of content, commonly things like a logo,navigation, or header text in a body of content. describes the footer of a website or area of content, commonly things likecopyright notices and supplemental navigation. describes content that aids in the navigation of a website or content describes an area of content that is self-contained and could potentially bedistributed through multiple methods (like RSS), commonly things like blog posts and newsarticles. describes an area of content that is related to the content surrounding it but thatisnt that important within itself, commonly things like pull-quotes. 18. describes content that annotates the surrounding content using something like animage, video, or code. describes the caption of content and should therefore be placedwithin the element. describes words and phrases that are considered important for the purpose ofreferencing, like highlighting key words in a quote from another piece of content. describes date or time-related content 19. s ormFssle a haof lessut inp akingMForms are another area of HTML5 that got a big upgrade. 20. ion atvalid ustedasic tobe tr Bnd not a idet-s ClienOne of those areas is basic validation of inputted data on the client-side, that is the usersbrowser.This type of validation can be easily worked around but its useful for providing hints to auser when they enter incorrect information without having to send the data to a server or runlots of custom JavaScript. 21. type= email, tel, url date color rangeThere are also whole bunch of new input types for forms, includingEmail, tel, and url, which cause the on-screen keyboard on mobile phones to change toremove or add relevant keys. For example, only showing numbers for an input eld with atype of tel.Date, which makes it dead easy to let users select a date from a calendar.Color, which is an interesting type that shows a colour palette to select colour values from.Range, which limits the user to selecting a number within a dened range. 22. Along with the added input types are brand new form elements. describes part of a form that shows progression, like the status of a le thatsuploading. describes part of a form that shows a measured outcome, like the nal grade out of10 in an exam. describes part of a form that shows the results of a calculation performed by theform itself. 23. iont ca ent eolo ontG asedc -bation loc iding ProvGeolocation is a new JavaScript API that allows a website to request the geographic locationof the user.This information is massively useful for websites that provide location-based services,predominantly search-based services.Its also useful for automating the process of nding a users town or country and using thatdata to pre-populate a form, saving the user some of their precious time. 24. Security and peace of mind is of paramount importance with the new features beingintroduced.The Geolocation API is no exception and a browser will only be able to access your personalinformation if you explicitly allow it to each and every time. 25. ge ra to oids cal s ster LoonkiesCooThere are a variety of solutions available that each allow you to access and store data on ausers computer.They are IndexedDB, Local Storage as well as the various File and FileSystem APIs.IndexedDB and Local Storage allow large quantities of data to be stored in a structural waywithin a users browser, with IndexedDB even allowing les to be stored as well.The File and FileSystem APIs allow JavaScript to access the userss OS lesystem, letting yousave and retrieve les much larger than would be permitted in any other solution. 26. ers o rk rsb Wothe eW g tasks to gatin DeleWeb Workers are a JavaScript API that allow you to run computationally-heavy calculations inthe background without slowing down and interfering with the users browsing experience.Their purpose is quite specic but theyre useful for creating applications that might need toanalyse a lot of data behind the scenes. 27. PIA ry to ht wayHis rigtthe tencon ic am yn ingdrovid PThe History API is a selection of JavaScript APIs that allow you to manipulate a usersbrowsing history.This is exciting because is allows dynamic AJAX-type websites to continue loading contentwithout refreshing the page while not breaking the back and forward buttons within thebrowser. Normally this wouldnt be possible. 28. PInAree ul Sc werf ull etpoFimple ,ySThe Full Screen API allows you to expand any HTML element to ll the users screen, even ifthe browser isnt running full screen itself.Its a really simple API that is useful for immersive visual media like video and games. 29. vasan Ctfo rm pla ics raphg 2DAs I mentioned at the beginning, canvas is easily one of my fa