Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

HTML5: The future of web development

Authors: Osvalds Neiders, Vilnis Laipnieks, Ritvars Luksis
by

Osvalds Neiders

on 17 January 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of HTML5: The future of web development

HTML5 -
the future of web development THE NEW FEATURES OF HTML5 Subjects to cover Topics To Cover Time BIGGEST CHANGES IN HTML5 Geolocation API
<canvas> element
<content> elements
<source>
<embed>
<audio>
<video> GEOLOCATION API LIVE EXAMPLE (http://ie.microsoft.com/testdrive/HTML5/Geolocation/Default.html) <canvas> 8-BIT COLOR CYCLE
http://www.effectgames.com/demos/canvascycle/?sound=0 GAME IN HTML 5 USING CANVAS
http://digger.mightyfingers.com/ CANVASMOL
http://alteredqualia.com/canvasmol/ <source> USUALLY COMES IN PAIR WITH <video> and <audio> TAGS:
<video id="movies" autoplay oncanplay="startVideo()" onended="stopTimeline()"
autobuffer="true" width="400px" height="300px">
<source src="Intermission-Walk-in.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="Intermission-Walk-in_512kb.mp4"
type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video> <embed> The HTML <embed> tag is used for embedding an external application or interactive content into an HTML document. <audio> Audio data APIs will enable music creation in HTML5 applications.
<!-- The browser will automatically choose the format it supports. -->
<audio controls="controls">
<source src="audio.mp3" type="audio/mp3">
<source src="audio.ogg" type="audio/ogg">
<source src="audio.aac" type="audio/mp4">
<!-- If no support at all. -->
Your browser does not support the HTML5 audio element.
</audio> <video> Adoption rate of HTML5 Browser support Mozilla Firefox - since v3.6 (now v17)
Opera - v10 (now v12.12)
Chrome - since v6 (now v23)
Internet explorer - since v9 (now v10) Current level of HTML 5 support from http://www.html5test.com Everything is going better than expected! Modernizr Detects HTML5 and CSS3 features in the user's browser. Adds basic HTML5 functionality on older browsers, using HTML5 Shiv script. Usage of HTML5 Google - Youtube, Gmail etc. Lesser web developers
http://www.html5sites.com 2D games and apps HTML5 in 3D Possible to create 3D games and apps Uses HTML5 WebSocket, Canvas Audio and WebGL JavaScript library Contents Quake II HTML5 vs Native apps The development purpose of HTML5
The changes in HTML5 in comparison to its older versions
The pros and cons of the upcoming web-design language - HTML5
Integration of HTML 5 in today’s web
The adoption rate of HTML5
Quiz about the portfolio and the presentation HTML5 Native apps more features better user experience cross platform HTML5 will be the new standard for HTML
HTML - HyperText Markup Language
HTML 4.01 - since 1999
Work in progress
No browser provides full HTML5 support cheaper to make easier to distribute easier to monetize already here HTML5 powered OS What is HTML5? Chrome OS To better understand the reasons for HTML5 development, let us look into its origins Firefox OS Carbyn Previously - 2020 Currently -2014 W3C MightyDigger World Wide Web Consortium HTML 1.0 basic
-limited
enough in that moment HTML 2.0 HTML 3.0 HTML 3.2 HTML 4.0 (and 4.01) WHAT Working Group Quiz 1. The identification of the real-world geographic location of an object, such as a cell phone or an Internet-connected computer terminal. 2. A notation used to annotate a document's content to give information regarding the structure of the text or instructions for how it is to be displayed. Parsing
Cookies
Markup Language
Debugging new, improved abilities
powerful
-too large
-never implemented modular
retro-spec retro-spec features from 3.0
CSS
specified the old tags XHTML 1.0 a new set of coding rules
-rigours of XML
-no many new tags and attributes Web Hypertext Application Technology
(WHAT) Working Group WHAT WG Web Forms 2.0 Web Applicatons 1.0 direct-mode drawing canvas
native support for audio and video
other features update to HTML forms XHTML 1.1 XHTML 2.0 under development designed to be worked with at least for the next decade
development - relatively slow and considered
new elements, attributes and abilities
cleaner code and smarter storage
improved performance (unrealistic) a few minor features
-even stricter error handling Geolocation
Portmanteau
Canvas
Attribute 3. What is the meaning of the abbreviation “API”? Advanced Programming Instructions
Application Programming Interface
Application Presentation Interface
Algorhythmical Parsing Initializer Application Programming Interface 4. Generating an image from a model by means of computer programs. Emulation
Plug-in
Rendering
Utility 5. Payment to the holder of a patent or copyright resource for the right to use their property. Placeholder
Disseminate
Paradigm
Royalty 6. A small piece of data sent from a website and stored in a user's web browser while a user is browsing a website. Microdata
Cookies
Embedding
Timestamp 7. In computing, this mode refers to a technique used by some web browsers for the sake of maintaining backward compatibility with web pages designed for older browsers. Parsing
Interoperability
Disseminate
Quirks 8. What does the term “embedding” mean? The act of creating a new HTML page
Incorporation of a text or code fragment within the body of a file or document
Maintenance of HTML code
Process of writing within a tag Incorporation of a text or code fragment within the body of a file or document 9. A set of software components that adds specific abilities to a larger software application. Utility
Emulation
Plug-in
Header 10. Relationship between two components, rather than being an attribute of just one of them. Quirks mode
Hash
Cache
Compatibility The portfolio The presentation 1. Which year is stated as the official deadline of finishing HTML5? 2018
2021
2014
2023 2. Which one of these is NOT a new API, introduced in HTML5? Canvas
Geolocation
Web storage
Open/close document Open/close document 3. Which one of these browsers does not support HTML5? Apple Safari 5.1
Opera 12.10
Internet Explorer 6.0
Google Chrome 23.0 Internet Explorer 6.0 4. We interviewed developers from which company? Accenture
DPA
MightyFingers
Tieto 5. Which 2 of these are involved in development of HTML5? W3Schools
World Wide Web Consortium
WHAT Working Group
World Wide Web Foundation 6. How does canvas look like? It has no border or content of its own
By default it is black
Filled with while color and black 1px border 7. Which of these languages and plug-ins are still used in HTML5? CSS, Adobe Flash
JavaScript, Adobe Shockwave
CSS, JavaScript
Adobe Flash, Microsoft Silverlight World Wide Web Consortium
WHAT Working Group It has no border or content of its own 8. What was used before HTML5 for video playback functionality? Flash
Quicktime
Silverlight
Dedicated video tags Apple's QuickTime Microsoft's Silverlight Adobe Flash 9. What is the meaning of the abbreviation “HTML”? Hybrid-Typing Markup Language
High Text Markup Language
HyperText Markup Language
Heliocentric Typing Multi Language "HTML" stands for
HyperText Markup Language 10. Which popular 3D game was ported to HTML5 by Google? Wolfenstein 3D
Tomb Rider
Quake II
Need for Speed Markup Language 10. Which popular 3D game was ported to HTML5 by Google?

Wolfenstein 3D
Tomb Rider
Quake II
Need for Speed Thank you for your attention! Any questions? XHTML5 Osvalds Neiders
Vilnis Laipnieks
Ritvars Luksis Conclusion HTML5 is going to be the next web standard Still needs to be fully developed Might eventually replace many native apps HTML5 - a new, better web for everyone! Quiz time!! The portfolio
Full transcript