Html5 deciphered - designing concepts part 1


Published on

HTML5 is the new standard for developing Web Applications. Lets have a deeper look into it.

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Html5 deciphered - designing concepts part 1

  1. 1. HTML5 DecipheredPart 1 of a series of presentations
  2. 2. HTML5 – Part 1HTML5 is Huge!!!HTML5 consists of more than 100 specifications that relate tothe next generation of Web technologies. The specifications aretaken care by the World Wide Web Consortium (W3C)The W3C consists of staff, organizations and individualsinvested in helping to drive and define the future of the Web.HTML5 specifications have moved through a five-stageprocess from first draft to official recommendation.
  3. 3. Microsoft and HTML5 Relationship1. Involvement of Microsoft with W3C Microsoft has invested heavily in interoperability, creating and submitting the single largest suite of test cases related to HTML5 to the W3C.2. Internet Explorer Some HTML5 technologies already exist in Internet Explorer 9, and others are being announced for Internet Explorer 10 via Internet Explorer Platform Previews. >>>
  4. 4. 3. Microsoft development toolsIn early 2011, Microsoft updated two of its development tools withservice packs: Visual Studio 2010 and Expression Web 4. Theservice packs for both of these tools provided an HTML5 documenttype for validation, as well as Intellisense for new HTML5 tags andattributes.If you’re using Visual Studio 2010 SP1, you can enable the HTML5Schema by clickingTools → Options → Text Editor → HTML → Validation → thenselecting the HTML5 option in the Target drop-down list as shownin the Fig1.You can also set HTML5 as the default schema from the HTMLSource Editing Toolbar in any HTML file, as shown in Fig2.Once your default schema is set, you’ll gain Intellisense support inVisual Studio new HTML tags. Fig3.
  5. 5. HTML5 is an umbrella term describing a set of HTML, CSS and JavaScript specifications designed to enable developers to build the next generation of Web sites and applications. Simply defined, we can say : HTML5 = HTML + CSS + JavascriptHTML5 vs HTML41. Tag Soup Problem: “badly-formed code”2. New Tags and attributes: Eg. section, article, aside, hgroup, nav, figure etc3. Ability of the browser to be an application platform4. Changed semantic meanings for existing items like Strong.
  6. 6. CSS3 vs CSS2CSS3 offers a huge variety of new ways to create an impact with your designs, with quite a few important changes.The biggest change that is currently planned with CSS3 is the introduction of modules.The advantage to modules is that it allows the specification to be completed and approved more quickly, because segments are completed and approved in chunks. Some of these modules include:The Box Model, Lists Module, Hyperlink Presentation, Speech Module,Backgrounds and Borders, Text Effects, Multi- Column Layout.This also allows browser and user-agent manufacturers to support sections of the specification that they feel comfortable.
  7. 7. CSS3 Problems1. Vendor Specific Extensions2. Partial implementation of new properties by browsers3. No guaranty of W3C recommendation to all the properties in the end.4. Current implementation can cause messy and invalid sheets.Using Browser-Specific Properties-webkit- for Safari-moz- for Firfox-o- for Opera-ms- for IE
  8. 8. Example :.multiplecolumns {-moz-column-width: 130px;;-webkit-column-width: 130px;-moz-column-gap: 20px;-webkit-column-gap: 20px;-moz-column-rule: 1px solid #ddccb5;-webkit-column-rule: 1px solid #ddccb5;}
  9. 9. Other Prefixes:-Icab for Icab browser on apple Macintosh-khtml for Konqueror browser (this is a linux browser)*** A forked version of KHTML called Webkit is used by several web browsers, among them Safari and Google Chrome
  10. 10. CSS Browser Support: new features of CSS3: Selectors Pseudo-classes Ruby Classes CSS Flex Model
  11. 11. Selectors:They will allow the designer/developer to select on much more specific levels of the document.Example using substring matching selectors :<div id="box1_simple"></div><div id="box2_simple"></div><div id="box3_bordered"></div><div id="box4_colored"></div>div[id^="box1"] { background:#ff0; }div[id$="simple"] { background:#ff0; }div[id*="4"] { background:#ff0; }
  12. 12. Pseudo Classes:The new pseudo-classes allow us to dynamically style content based on its position in the document or its state.Types of the new pseudo-classes: Structural Pseudo-Class The Target Pseudo-Class The UI Element States Pseudo-Classes Negation Pseudo-Class
  13. 13. Negation Example ::not(footer) { … }Structural Exmaple :ul li:nth-child(odd) {background-color: #666;color: #fff; }Link to follow:
  14. 14. Ruby Classes :These classes provide several properties for ruby tag. The HTML <ruby> tag is used for specifying Ruby annotations, which is used in East Asian typography.Ruby Element Example :<p lang="zh-CN">...<ruby> 汉 <rt> hàn </rt>字 <rt> zì </rt></ruby>...</p>Output : hàn zì...汉 字 …
  15. 15. Ruby { ruby-align: right; ruby-position: above; ruby-overhang: whitespace } Ruby Structure:Some other features of CSS3 are Border Radius, Border Images, Box Shadow, RGBA colors, Opacity etc.
  16. 16. Core HTML5 Part:Old Design<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""><html xmlns="" lang="en"><head><title>Exmaple</title><link rel="stylesheet" type="text/css" href="/css/style.css" /><script src="" type="text/javascript" language="javascript"></script><style type="text/css"></style></head><body id="index"></body></html>
  17. 17. New Design:<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8" /><meta name="keywords" content="key, words" /><meta name="description" content="description" /><link rel="stylesheet" href="stylesheet.css" type="text/css" /><title>Page Title</title></head><body> ...nav... article... sections...aside... footers... </body></html>
  18. 18. New Page Structure :
  19. 19. DOCTYPEIt’s used to tell validators and editors what tags and attributes you can use and how the document should be formed. It’s also used by a lot of web browsers to determine how the browser will render the page.Character encodingIt tells browsers and validators what set of characters to use when rendering web pages.LanguageBrowsers, screen readers and other user agents use the lang attribute to know what language the content should be interpreted in.
  20. 20. Optimizing scripts and linksInclude script and link declarations, but without the type attrb:<link rel="stylesheet" href="styles.css" /><script src="scripts.js"></script>Since there is really only one standard scripting language and only one styling language for the web right now. HTML5 makes type officially optional, but still validates older documents that do include the attribute.Follow the link:
  21. 21. Core New Elements:<header>Is used to contain the headline(s) for a page and/or section. It can also containsupplemental information such as logos and navigational aids.<footer>Contains information about a page and/or section, such as who wrote it, links torelated information and copyright statements.<nav>Contains the major navigation links for a page and, while not a requirement, is often contained by header.
  22. 22. <aside>Contains information that is related to the surrounding content but also exists independently, such as a sidebar or pull- quotes.<section>Is the most generic of the new structural elements, containing content that can be grouped thematically or is related.<article>Is used for self-contained content that could be consumed independent of the page as a whole, such as a blog entry.
  23. 23. *** Where these new tags will work in Opera, Safari, Chrome or Firefox they will not function in Internet Explorer (version 8 and earlier). The problem is that due to the way parsing works in IE, these elements are not recognized properly.This tutorial explains how to get HTML5 tags to work in IE8 and its earlier releases.It is possible to get HTML5 tags working in IE8 and earlier version by including the document.createElement() JavaScript code in the head of the HTML document. The basic idea is that by using document.createElement(tagName) to create each of the unrecognized elements, the parser in IE then recognizes those elements and parses them correctly. The following code shows the syntax for using the document.createElement.document.createElement(“header” );
  24. 24. Question : When to Use Structural Elements?Answer: Think about semantics of page.HTML5 and SemanticsExample:Contain the important text with the strong element:<p><strong>Registration is required</strong> for this event.</p>In previous versions of HTML, strong was used to indicate strong emphasis. Now, in HTML5 strong indicates importance, such as alerts and warnings.<b> could be used for keywords, product names, or other content whose text would typically be unique compared to surrounding text such as a paragraph lead.
  25. 25. Other examples are marking(copyright statement), figures and its caption, abbreviations, controlling list orders etc.
  26. 26. New Input Type Attribute Values:
  27. 27. .
  28. 28. Other useful features for input fields: Auto focus Placeholders Value restriction Auto completion of textetc...
  29. 29. Native AudioNative? Yes.That means no more ungainly object and embed. No more need to deliver audio with a third-party plugin.Add the audio element, with the src attribute referencing the file location of your audio file and fallback content for older browsers.<audio src="audio.mp3" controls> Download <a href="audio.mp3">dummy audio</a></audio>
  30. 30. Current Browser Support For HTML5 Native Audio Formats:
  31. 31. Preloading: <audio controls preload>preload="auto"Is the same as a Boolean preload, and suggests that the browser should begin downloading the file, but leaves the ultimate action up to the browser. So, if it is a mobile situation or a slow connection, the browser can decide not to preload in order to save bandwidth.preload="metadata"Hints that the browser shouldn’t buffer the audio itself until the user activates the controls, but metadata like duration and tracks should be preloaded.preload="none"Suggests that the audio shouldn’t be downloaded until the user activates the controls.
  32. 32. Fallback and Multiple Sources<audio controls> <source src="audio.ogg"> <source src="audio.mp3"> <object data="player.swf?audio=audio.mp3"> <param name="movie" value="player.swf? audio=audio.mp3"> Video and Flash are not supported by your browser. </object></audio>
  33. 33. Audio Properties and Functionscanplaytype(type)Whether the browser can play a particular type of mediacurrentTimeThe current playback position denoted in secondsdurationThe length of the audio file in secondsplay();Start playback at the current positionpause();Pause playback if the audio is actively playing
  34. 34. function playAt(seconds) { var audio = document.getElementsByTagName("audio")[0]; audio.currentTime = seconds;;}function stopAudio() { var audio = document.getElementsByTagName("audio")[0]; audio.currentTime = 0; audio.pause();}
  35. 35. Use of Canvas For Displaying Waves<audio src="audio.ogg"></audio><canvas width="512" height="100"></canvas><button title="Generate Waveform" onclick="genWave();">Generate Waveform</button><script>function genWave(){var audio = document.getElementsByTagName("audio")[0];var canvas = document.getElementsByTagName("canvas")[0];var context = canvas.getContext(2d);audio.addEventListener("MozAudioAvailable", buildWave, false);function buildWave (event){var channels = audio.mozChannels;var frameBufferLength = audio.mozFrameBufferLength;var fbData = event.frameBuffer;
  36. 36. var stepInc = (frameBufferLength / channels) / canvas.width;var waveAmp = canvas.height / 2;canvas.width = canvas.width;context.beginPath();context.moveTo(0, waveAmp - fbData[0] * waveAmp);for(var i=1; i < canvas.width; i++){context.lineTo(i, waveAmp - fbData[i*stepInc] * waveAmp);}context.strokeStyle = "#fff";context.stroke();};}</script> (Using Mozilla Audio Data API)
  37. 37. Native VideoSimilar in nature to audio, the video element shares many of the same attributes, have a similar syntax and can be styled and manipulated with CSS and JavaScript.<video src="video.mp4" controls></video>Current Browser Support For Native Video Formats
  38. 38. Accessibility and HTML5 <img src="next_button.jpg" alt="Go to the next page."> <figure> <img src="ceremony_photo.jpg"> <figcaption> Opening ceremony </figcaption> </figure> Fallback content for audio and video
  39. 39. GeoLocationThe HTML5 specification includes a new Geolocation API, which allows for scripted access to geographical location information associated with the a devices browser.Core part of implementation:if (navigator && navigator.geolocation){navigator.geolocation.getCurrentPosition(geo_success, geo_error);}else {error(GeoLocation is not supported.);}
  40. 40. The navigator object gives us access to the new geolocation object. The geolocation object has the following methods:• getCurrentPosition returns the users current position.• watchPosition returns the users current position, but also continues to monitor the position and invoke the appropriate callback every time the position changes.• clearWatch this method ends the watchPosition methods monitoring of the current position.Position Error Codes• 0 - Unknown• 1 - Permission Denied• 2 - Position Unavailable• 3 - Timeout
  41. 41. Google vs MaxMindGoogle offers the google.loader.ClientLocation object in its Google Maps API v3 library, but it does not work for many U.S. IP addresses// If Navigator is not present use following as a fallbackelse { printLatLong(geoip_latitude(), geoip_longitude(), true); }function printLatLong(latitude, longitude, isMaxMind) {$(body).append(<p>Lat: + latitude + </p>);$(body).append(<p>Long: + longitude + </p>);//if we used MaxMind for location add attribution link.if (isMaxMind) { $(body).append(<p><a href="" target="_blank">IP to Location Service Provided }}
  42. 42. Reverse GeoCoding:HTML5 supports reverse geocoding also.Latitude and longitude coordinates --> human-friendly address.Using Google Map API:var geocoder = new google.maps.Geocoder();//turn coordicates into an object.var yourLocation = new google.maps.LatLng(latitude, longitude);//find out info about our location.geocoder.geocode({ latLng: yourLocation }, function (results, status)
  43. 43. * If we want to get directions from current location to a specific location we need to use Google Maps JavaScript API V3 libraries along with Jquery.* we can set our travel modes like Driving* we can set map types like roadmap
  44. 44. CanvasOne of the most exciting additions to web pages to be standardized by HTML5 is thecanvas element:<canvas id="mycanvas"></canvas>
  45. 45. Features: allows users to draw graphics such as lines, circles, fills, etc. directly into a rectangle-shaped block element in addition to drawing images manually, browsers can take raw image data from an external image file and “draw” it onto the canvas element Editing canvas images then lends itself to the creation of animations canvas elements can have transparency, which means they can be layered or stacked on top of each other to create more sophisticated graphical images/effects. In essence, canvas is a dynamic image and not simply a static PNG or JPEG file
  46. 46. *** The paths that you draw with API commands like lineTo(...) are like vectors.Some commonly used drawing commands in the Canvas API:BeginPath(), ClosePath()moveTo(x, y), lineTo(x, y)rect(x, y, width, height)arc(x, y, radius, startAngleRadians, endAngleRadians, antiClockwiseDirection)Fill(), stroke()etc...
  47. 47. Transparency :mycontext.fillStyle = "rgba(0,0,255,0.75)";Dimensions :<canvas id="mycanvas" width=" 200" height="200"> </canvas>Gradients :var lingrad = mycontext.createLinearGradient(20,20,40,60);lingrad.addColorStop(0.3, "#0f0");lingrad.addColorStop(1, "#fff");mycontext.fillStyle = lingrad;
  48. 48. External Images Into Canvas :var img = new Image();img.onload = function() {// note: were calling against the "2d" context heremycontext.drawImage(img, 0, 0); // draw the image at (0,0)};img.src = "http://somewhere/to/my/image.jpg";
  49. 49. Placing Text on canvasmycontext.fillText("Hello World", 0, 25);mycontext.strokeText("Hello World", 0, 75);Animating canvas DrawingsAnimation with the element boils down to drawing a frame canvas of your animation,then a few milliseconds later, erasing that drawing and re-drawing the next frame,probably with some elements slightly moved or otherwise changed. If you animate by showing the frames fast enough—around 20-30 frames per second—it generally looks like a smooth animation of your shapes.function erase_frame() {mycanvas.width = mycanvas.width;}
  50. 50. In the next presentations we will be covering programming part of HTML5. It will include : Local Sotrage IndexedDb Files Offline Apps Web Wrokers Web Sockets Some of the javascript tools More on Css3
  51. 51. ThanksSumit Rathee