WELCOME
HTML 5
Web Development to the Next Level
WHAT IS HTML5
 HTML5 is the new HTML standard.
 HTML5 is a cooperation between the World Wide
Web Consortium (W3C) and t...
ROUGH TIMELINE OF WEB TECHNOLOGIES
<!DOCTYPE HTML>
<html>
<body>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source ...
HTML5 NEW FEATURES
 The <canvas> element for 2D drawing
 The <video> and <audio> elements for media
playback
 Support f...
WHAT’S NEW IN HTML5 SEPC?
 Offline/Storage
 Expect the unexpected
 Real time/Communication
 Stay Connected
 File/Hard...
OFFLINE/STORAGE
HTML5 and related specs introduce a number of
features to make offline web apps a reality:
 Web Storage
...
REALTIME/COMMUNICATION
 More efficient connectivity means more real-time
chats, faster games, and better communication
 ...
FILE/HARDWARE ACCESS
 HTML5 provides very powerful APIs to interact with
binary data and a user's local file system.
 Th...
SEMANTICS & MARKUP
HTML5 provides a series of tools to make developers
life easier too:
 New media elements(<audio><video...
GRAPHICS & MULTIMEDIA
Audio and Video became first-class citizens on the
Web with HTML5
<AUDIO ID="AUDIO" SRC="SOUND.MP3"
...
CSS3
 CSS is used to control the style and layout of Web pages.
 CSS3 is the latest standard for CSS.
 CSS Selectors(ID...
NUTS & BOLTS
Most people have heard of the rich APIs
(css3, audio/video, WebGL, offline, geolocation,...), but there's
als...
DIEUTEK DEVELOPEMNTS
1st Floor, Building No. 41/2125 B,
TA Beerankunju Road,
Ernakulam North-18,
Ph: 0484 2363523, 4015523...
REDMINE PROJECT MANAGEMENT
REDMINE PROJECT MANAGEMENT
REDMINE PROJECT MANAGEMENT
REDMINE PROJECT MANAGEMENT
CSS3Presentation & Styling
WHAT IS CSS?
 Cascading Style Sheets
 CSS3 is the latest standard for CSS.
 CSS is used to control the style and layout...
VENDOR PREFIXES
 Some CSS rules won’t work without the vendor
prefix.
 Mozilla Browsers(Firefox)
-moz
 Webkit Browsers...
WHATS NEW IN CSS3?
CSS3 is split up into "modules". The old specification
has been split into smaller pieces, and new ones...
Upcoming SlideShare
Loading in...5
×

Dieutek developemnts

152

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
152
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Dieutek developemnts

  1. 1. WELCOME
  2. 2. HTML 5 Web Development to the Next Level
  3. 3. WHAT IS HTML5  HTML5 is the new HTML standard.  HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG).  HTML5 is still a work in progress. However, the major browsers support many of the new HTML5 elements and APIs.
  4. 4. ROUGH TIMELINE OF WEB TECHNOLOGIES
  5. 5. <!DOCTYPE HTML> <html> <body> <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video> </body> </html>
  6. 6. HTML5 NEW FEATURES  The <canvas> element for 2D drawing  The <video> and <audio> elements for media playback  Support for local storage  New content-specific elements, like <article>, <footer>, <header>, <nav>, <section>  New form controls, like calendar, date, time, email, url, search
  7. 7. WHAT’S NEW IN HTML5 SEPC?  Offline/Storage  Expect the unexpected  Real time/Communication  Stay Connected  File/Hardware Access  Deeper integration with Operating System  Semantics & Markup  More meaningful elements  Graphics/Multimedia  2D & 3D  CSS3  Presentation & Styling  Nuts & Bolts  Improvements to the core paltform
  8. 8. OFFLINE/STORAGE HTML5 and related specs introduce a number of features to make offline web apps a reality:  Web Storage  simply provides a key-value mapping.  e.g. localStorage["name"] = username;  Web SQL Database  gives you all the power - and effort - of a structured SQL relational database.  Indexed Database  It is somewhere in between Web Storage and Web SQL Database. Like Web Storage, it's a straightforward key- value mapping, but it supports indexes like those of relational databases,
  9. 9. REALTIME/COMMUNICATION  More efficient connectivity means more real-time chats, faster games, and better communication  Web Sockets and Server-Sent Events are pushing data between client and server more efficiently  Web Socket - Full-duplex, bi-directional communication over the Web: Both the server and client can send data at any time, or even at the same time. Only the data itself is sent, without the overhead of HTTP headers, dramatically reducing bandwidth.  Notifications  Web RTC - open standards for real-time, plugin-free video, audio and data communication
  10. 10. FILE/HARDWARE ACCESS  HTML5 provides very powerful APIs to interact with binary data and a user's local file system.  The File APIs give web applications the ability to do things like,  Read / Write Files  Perform file drag and drop from the desktop to the browser  Upload binary data using XMLHttpRequest2  Geo-location  Device Orientation (Responsive Layouts)  Speech Input (<input type="text" x-webkit-speech />)
  11. 11. SEMANTICS & MARKUP HTML5 provides a series of tools to make developers life easier too:  New media elements(<audio><video>)  New structural elements(<section>,<nav><figure>)  New form types(date, range, search, color, number)
  12. 12. GRAPHICS & MULTIMEDIA Audio and Video became first-class citizens on the Web with HTML5 <AUDIO ID="AUDIO" SRC="SOUND.MP3" CONTROLS></AUDIO> DOCUMENT.GETELEMENTBYID("AUDIO").MUTED = FALSE; <VIDEO ID="VIDEO" SRC="MOVIE.WEBM" AUTOPLAY CONTROLS></VIDEO> DOCUMENT.GETELEMENTBYID("VIDEO").PLAY();  CANVAS 2D  CANVAS 3D  SVG(SCALABLE VECTOR GRAPHICS)
  13. 13. CSS3  CSS is used to control the style and layout of Web pages.  CSS3 is the latest standard for CSS.  CSS Selectors(ID ,Class & DOM Element)  CSS Usages(Inline, Internal & External)  New Technologies and Extensions to CSS3 includes:  2D / 3D Transformations  Transitions  Web Fonts(@font-face)  Animations  Multiple Column Layout
  14. 14. NUTS & BOLTS Most people have heard of the rich APIs (css3, audio/video, WebGL, offline, geolocation,...), but there's also a slew of lesser-known features that you should be aware of. We call these the "nuts & bolts" of building modern web applications.  New Selectors  getElementByClassName(‘section’);- DOM API  Custom data-* attributes  Define, store, and retrieve custom data on the DOM.
  15. 15. DIEUTEK DEVELOPEMNTS 1st Floor, Building No. 41/2125 B, TA Beerankunju Road, Ernakulam North-18, Ph: 0484 2363523, 4015523, +91-9633303059 www.dieutek.com E-Mail. info@dieutek.com
  16. 16. REDMINE PROJECT MANAGEMENT
  17. 17. REDMINE PROJECT MANAGEMENT
  18. 18. REDMINE PROJECT MANAGEMENT
  19. 19. REDMINE PROJECT MANAGEMENT
  20. 20. CSS3Presentation & Styling
  21. 21. WHAT IS CSS?  Cascading Style Sheets  CSS3 is the latest standard for CSS.  CSS is used to control the style and layout of Web pages.  CSS3 is completely backwards compatible, so you will not have to change existing designs. Browsers will always support CSS2.  The CSS3 specification is still under development by W3C.  Many of the new CSS3 properties have been implemented in modern browsers.
  22. 22. VENDOR PREFIXES  Some CSS rules won’t work without the vendor prefix.  Mozilla Browsers(Firefox) -moz  Webkit Browsers (Google Chrome, Apple Safari)  -webkit  Opera  -o  Internet Explorer -ms
  23. 23. WHATS NEW IN CSS3? CSS3 is split up into "modules". The old specification has been split into smaller pieces, and new ones are also added.Some of the most important CSS3 modules are:  Selectors  Box Model  Backgrounds and Borders  Text Effects  2D/3D Transformations  Animations  Multiple Column Layout
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×