Presentation is loading. Please wait.

Presentation is loading. Please wait.

HTML 5: Introduction Ehsan Toreini Islamic Azad University, Mashhad Branch 2012, April.

Similar presentations


Presentation on theme: "HTML 5: Introduction Ehsan Toreini Islamic Azad University, Mashhad Branch 2012, April."— Presentation transcript:

1 HTML 5: Introduction Ehsan Toreini Islamic Azad University, Mashhad Branch 2012, April

2 You may well ask: "How can I start using HTML5?". HTML5 ~= HTML + CSS + JS You don’t need to throw anything away – builds on HTML4 It’s easy to get started “Upgrading” to HTML5 can be as simple as changing your doctype. It already works Chrome, Firefox, Safari, Opera, IE9, and some mobile browsers It’s here to stay W3C more 15 years (XHTML expires & not renewed)

3 1991 HTML 1994 HTML CSS 1 + JavaScript 1997 HTML CSS XHTML Tableless Web Design 2005 AJAX 2006 jQuery 2009 HTML 5

4 How Did HTML5 Get Started? HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG). WHATWG was working with web forms and applications, and W3C was working with XHTML 2.0. In 2006, they decided to cooperate and create a new version of HTML. Some rules for HTML5 were established: New features should be based on HTML, CSS, DOM, and JavaScript Reduce the need for external plugins (like Flash) Better error handling More markup to replace scripting HTML5 should be device independent The development process should be visible to the public

5 New Features Some of the most interesting new features in HTML5 : The canvas element for drawing The video and audio elements for media playback Better support for local offline storage New content specific elements, like article, footer, header, nav, section New form controls, like calendar, date, time, , url, search

6 Introduction Important to stay current in HCI Browsers will eventually replace other UI platforms

7 Why HTML5? HTML5 and javascript are interpreted – No compilation – Can test UI changes with a console window Firebug extension for Firefox

8 Why HTML5? Cross-platform – Most browsers (read: not IE) conform to the W3C standards – The same code works on PC, Mac, Linux

9 Why HTML5? Mobile device support

10 Why HTML5? No need for software updates – Everyone sees the latest version Development can be done anywhere – No need for special software – Just a terminal and Firefox/Firebug

11 Browser Support HTML5 is not yet an official standard, and no browsers have full HTML5 support. But all major browsers (Safari, Chrome, Firefox, Opera, Internet Explorer) continue to add new HTML5 features to their latest versions.

12 When will HTML 5 be ready? – Not in few years to come Latest version is HTML5 – Has all of the power of native applications – Plus more!

13 DOM When you hit a page – browser constructs a Document Object Model (DOM) – collection of objects represent HTML elements on the page

14

15 HTML page is like a tree, series of nested elements (tags) Root element is :

16 1 st Child of the root element is: Many elements nested – important items

17 Body Element Defines the document’s body. The body element contains all the contents of an HTML document.

18 Many elements nested – important items

19 Meta Element Q: I never use funny characters. Do I still need to declare my character encoding (charset)? A: Yes! You should always specify a character encoding on every HTML page you serve. Not specifying an encoding can lead to security vulnerabilities.can lead to security vulnerabilities UTF-7 is an encoding originally designed for SMTP gateways that couldn't deal with 8-bit/binary characters. It uses a modified Base64 encoding to represent 8-bit characters and ASCII non-printable characters using 7-bit ASCII. The string alert(1) can be encoded in UTF-7 as +ADw-script+AD4- alert(1)+ADw-/script+AD4- Generally, a character encoding is set in the Content-Type HTTP Header or a META tag in the HTML itself. When the web server does not include an explicit character encoding in its HTTP response, Internet Explorer will attempt to guess the encoding. If certain strings of user input say, +ADw-script+AD4-alert(1)+ADw-/script+AD4- -- are echoed back early enough in the HTML page,Internet Explorer may incorrectly guess that the page is encoded in UTF-7. Suddenly--, the otherwise harmless user input becomes active HTML and will execute.

20 Defines the title of the document (required) Shown by URL or in Tab … Worry Basket

21 Link Element Defines the relationship between a document and an external resource Worry Basket

22 REL = STYLESHEET Most frequently used link relationship Pointing to CSS rules – Stored in a separate file HTML5 optimization – drop the type attribute – there is only 1 stylesheet language for the web  CSS

23 REL = SHORTCUT ICON Small icon associated with the page Usually displayed in the browser's location bar next to the URL or Tab

24 REL = ALTERNATE Quite common, when combined with either the RSS or Atom media type: “feed autodiscovery” It allows syndicated feed readers (like Google Reader) to discover that a site has a news feed You can also use other type attribues  PDF

25 Full Chart of link relations

26 Element Used to define a Client-Side script – Either contains scripting statements or points to an external file Worry Basket

27 What is Needed? More Meaning to tags than just Divs

28 Element Introduction or group of navigation elements

29 Navigation Defines a section intended for navigation

30 Footer Element More specific element for footer of a document

31 Header Nav Article Aside Header Section Footer Figure

32 A Form of Madness Everybody knows about web forms, right? Make a A few elements, maybe an Finish it off with an button You’re done. HTML5 defines over a dozen new input types

33 New Input Type HTML5 has several new input types for forms. These new features allow for better input control and validation. New input types : url number range Date pickers (date, month, week, time, datetime, datetime- local) search color

34 Browser Support Browser support for the new input type : Input TypeIEFirefoxOperaChromeSafari No No urlNo No numberNo No rangeNo Date pickersNo No searchNo No colorNo 11.0No

35 Input Type - The type is used for input fields that should contain an address. The value of the field is automatically validated when the form is submitted. Basic syntax :

36 Input Type - url The url type is used for input fields that should contain a URL address. The value of the url field is automatically validated when the form is submitted. Basic syntax : Homepage:

37 Input Type - number The number type is used for input fields that should contain a numeric value. You can also set restrictions on what numbers are accepted Example : Points:

38 Input Type - number Use the following attributes to specify restrictions for the number type: AttributeValueDescription maxnumberSpecifies the maximum value allowed minnumberSpecifies the minimum value allowed stepnumber Specifies legal number intervals (if step="3", legal numbers could be -3,0,3,6, etc) valuenumberSpecifies the default value

39 Input Type - range The range type is used for input fields that should contain a value from a range of numbers. The range type is displayed as a slider bar. You can also set restrictions on what numbers are accepted Example:

40 Input Type - range Use the following attributes to specify restrictions for the range type: AttributeValueDescription maxnumberSpecifies the maximum value allowed minnumberSpecifies the minimum value allowed stepnumber Specifies legal number intervals (if step="3", legal numbers could be -3,0,3,6, etc) valuenumberSpecifies the default value

41 Input Type – Date Pickers HTML5 has several new input types for selecting date and time: date - Selects date, month and year month - Selects month and year week - Selects week and year time - Selects time (hour and minute) datetime - Selects time, date, month and year (UTC time) datetime-local - Selects time, date, month and year (local time) Example: Date:

42 Input Type – search The search type is used for search fields, like a site search, or Google search. The search field behaves like a regular text field.

43 Input Type – color The color type is used for input fields that should contain a color. This input type will allow you to select a color from a color picker : Color:

44 New types 1. for search boxes 2. for spinboxes 3. for sliders 4. for color pickers 5. for telephone numbers 6. for web addresses 7. for addresses 8. for calendar date pickers 9. for months 10. for weeks 11. for timestamps 12. for precise, absolute date+time stamps 13. for local dates and times button checkbox color date datetime datetime- local file hidden image month number password radio range reset search submit tel text time url week

45 New HTML Form Elements

46

47 New Form Element HTML5 has several new elements and attributes for forms. New form types : datalist keygen output

48 Browser Support Browser support for the new input type : Input TypeIEFirefoxOperaChromeSafari datalistNo4.09.5No keygenNo No outputNo No

49 datalist Element The datalist element specifies a list of options for an input field. The list is created with option elements inside the datalist. To bind a datalist to an input field, let the list attribute of the input field refer to the id of the datalist : Webpage:

50 keygen Element The purpose of the keygen element is to provide a secure way to authenticate users. The keygen element is a key-pair generator. When a form is submitted, two keys are generated, one private and one public. The private key is stored on the client, and the public key is sent to the server. The public key could be used to generate a client certificate to authenticate the user in the future. Currently, the browser support for this element is not good enough to be a useful security standard.

51 keygen Element Example : Username: Encryption:

52 output Element The output element is used for different types of output, like calculations or script output. Example :

53 Form Validation Determining whether a random string of characters is a valid address is unbelievably complicated. The harder you look, the more complicated it gets. Isn’t it be easier to offload the entire headache to your browser? Addition of the pattern attribute to all the various form fields to which validation applies Price:

54 New Form Attributes HTML5 has several new elements and attributes for forms. New form attributes : autocomplete novalidate New input attributes : autocomplete autofocus form form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget) height and width list min, max and step multiple pattern (regexp) placeholder required

55 Browser Support Browser support for the new input type : Input TypeIEFirefoxOperaChromeSafari autocomplete autofocusNo formNo No form overridesNo No height and width listNo4.09.5No min, max and stepNo No multipleNo novalidateNo No patternNo No placeholderNo requiredNo No

56 autocomplete Attribute The autocomplete attribute specifies that the form or input field should have an autocomplete function. Note: The autocomplete attribute works with, and the following types: text, search, url, telephone, , password, datepickers, range, and color. When the user starts to type in an autocomplete field, the browser should display options to fill in the field : First name: Last name: In some browsers you may need to activate the autocomplete function for this to work.

57 autofocus Attribute The autofocus attribute specifies that a field should automatically get focus when a page is loaded. Note: The autofocus attribute works with all types. User name:

58 form Attribute The form attribute specifies one or more forms the input field belongs to. Note: The form attribute works with all types. To refer to more than one form, use a space-separated list. The form attribute must refer to the id of the form it belongs to: First name: Last name:

59 Form Override Attribute The form override attributes allow you to override some of the attributes set for the form element. The form override attributes are : formaction - Overrides the form action attribute formenctype - Overrides the form enctype attribute formmethod - Overrides the form method attribute formnovalidate - Overrides the form novalidate attribute formtarget - Overrides the form target attribute Note: The form override attributes works with the following types: submit and image.

60 Form Override Attribute Example : These attributes are helpful for creating different submit buttons.

61 height and width Attribute The height and width attributes specifies the height and width of the image used for the input type image. The height and width attributes only works with type: image.

62 list Attribute The list attribute specifies a datalist for an input field. A datalist is a list of options for an input field. The list attribute works with the following types : text, search, url, telephone, , date pickers, number, range, and color. Webpage:

63 min, max and step Attribute The min, max and step attributes are used to specify restrictions for input types containing numbers or dates. The max attribute specifies the maximum value allowed for the input field. The min attribute specifies the minimum value allowed for the input field. The step attribute specifies the legal number intervals for the input field (if step="3", legal numbers could be -3,0,3,6, etc).

64 min, max and step Attribute The min, max, and step attributes works with the following types: date pickers, number, and range. The example below shows a numeric field that accepts values between 0 and 10, with a step of 3 (legal numbers are 0, 3, 6 and 9): Points:

65 multiple Attribute The multiple attribute specifies that multiple values can be selected for an input field. The multiple attribute works with the following types: , and file. Example : Select images:

66 novalidate Attribute The novalidate attribute specifies that the form or input field should not be validated when submitted. If this attribute is present the form will not validate form input. The novalidate attribute works with: and the following types: text, search, url, telephone, , password, date pickers, range, and color. Example :

67 pattern Attribute The pattern attribute specifies a pattern used to validate an input field. The pattern is a regular expression. The pattern attribute works with the following types: text, search, url, telephone, , and password The example below shows a text field that can only contain three letters (no numbers or special characters) : Country code:

68 placeholder Attribute The placeholder attribute provides a hint that describes the expected value of an input field. The placeholder attribute works with the following types: text, search, url, telephone, , and password The hint is displayed in the input field when it is empty, and disappears when the field gets focus. Example :

69 required Attribute HTML5 form validation isn’t limited to the type of each field. The required attribute specifies that an input field must be filled out before submitting. The required attribute works with the following types: text, search, url, telephone, , password, date pickers, number, checkbox, radio, and file. Example : Name:

70 Required Fields Website: [required] { border-color: #88a; -webkit-box-shadow: 0 0 3px rgba(0, 0, 255,.5); } :invalid { border-color: #e88; -webkit-box-shadow: 0 0 5px rgba(255, 0, 0,.8); }

71 Video HTML 5.0 provides a standard for showing video. Using the element we can easily embed video within our web page. The video formats the element supports include the following : MPG4 (with H.264 video codec and AAC audio codec) OGG (with Thedora video codec and Vorbis audio codec)

72 Format Until now, there has never been a standard for showing video on a web page. Today, most videos are shown through a plugin (like flash). However, not all browsers have the same plugins. HTML5 specifies a standard way to include video, with the video element. Currently, there are 2 supported video formats for the video element: FormatFirefox 3.5Opera 10.5Chrome 3.0IE 8Safari 3.0 OggYes No MPEG 4No YesNoYes

73 Basic Syntax Basic Syntax to Embed Video : *Content we place in between the tags will be displayed when the browser doesn't support displaying video We can use the width and height attributes in order to specify the size The control attribute is for adding the play, pause and volume controls

74 Basic Syntax Example : HTML 5 Playing Video Sample

75 Basic Syntax The video element allows multiple source elements. Source elements can link to different video files. The browser will use the first recognized format : Your browser does not support the video tag.

76 Attribute The HTML 5.0 supports the following attributes : AttributeValueDescription audiomuted Defining the default state of the the audio. Currently, only "muted" is allowed autoplay If present, then the video will start playing as soon as it is ready controls If present, controls will be displayed, such as a play button heightpixels Sets the height of the video player loop If present, the video will start over again, every time it is finished posterurl Specifies the URL of an image representing the video preload If present, the video will be loaded at page load, and ready to run. Ignored if "autoplay" is present srcurl The URL of the video to play widthpixels Sets the width of the video player

77 Audio The HTML 5.0 specification allows us playing sound using the element. The element can play sound files or an audio stream. The HTML 5.0 specification aims at supporting the following sounds formats: MP3, WAV and Ogg Vorbis.

78 Format Until now, there has never been a standard for playing audio on a web page. Today, most audio are played through a plugin (like flash). However, not all browsers have the same plugins. Currently, there are 3 supported audio formats for the audio element: FormatFirefox 3.5Opera 10.5Chrome 3.0IE 9Safari 3.0 Ogg VorbisYes No MP3No Yes WavYes No Yes

79 Basic Syntax Basic Syntax to Embed Video : *Content we place in between the tags will be displayed when the browser doesn't support playing audio The control attribute is for adding the play, pause and volume controls

80 Basic Syntax The audio element allows multiple source elements. Source elements can link to different audio files. We can add the child elements in between the audio element tags. The browser will use the first supported format. browser does not support html 5.0

81 Attribute The HTML 5.0 supports the following attributes : AttributeValueDescription autoplay Specifies that the audio will start playing as soon as it is ready. controls Specifies that controls will be displayed, such as a play button. loop Specifies that the audio will start playing again (looping) when it reaches the end preload Specifies that the audio will be loaded at page load, and ready to run. Ignored if autoplay is present. srcurl Specifies the URL of the audio to play

82 Media Events

83

84 Canvas The HTML5 canvas element uses JavaScript to draw graphics on a web page. A canvas is a rectangular area, and you control every pixel of it. The canvas element has several methods for drawing paths, boxes, circles, characters, and adding images. 2D canvas acceleration uses the same GPU process infrastructure

85 Basic Syntax Basic Syntax to create canvas : Once the Canvas was created we can draw various graphics by calling various JavaScript methods on its context.... var c=document.getElementById("my_canvas"); var context=c.getContext("2d"); context.fillStyle="#FFAA00"; context.fillRect(0,0,120,80);...

86 Basic Syntax Example : Canvas Demo var c=document.getElementById("my_canvas"); var context=c.getContext("2d"); context.fillStyle="#FFAA00"; context.fillRect(0,0,120,80);

87 Using JavaScript The canvas element has no drawing abilities of its own. All drawing must be done inside a JavaScript : var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75); JavaScript uses the id to find the canvas element : var c=document.getElementById("myCanvas");

88 Using JavaScript, continued… Then, create a context object : var cxt=c.getContext("2d"); The getContext("2d") object is a built-in HTML5 object, with many methods to draw paths, boxes, circles, characters, images and more. The next two lines draws a red rectangle: cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75); The fillStyle method makes it red, and the fillRect method specifies the shape, position, and size.

89 Understanding Coordinates The fillRect method above had the parameters (0,0,150,75). This means: Draw a 150x75 rectangle on the canvas, starting at the top left corner (0,0). The canvas X and Y coordinates are used to position drawings on the canvas.

90 Attribute The HTML 5.0 supports the following attributes : AttributeValueDescription heightpixels Sets the height of the canvas widthpixels Sets the width of the canvas

91 Storage Local Storage is intended to be used for storing and retrieving data in html pages from the same domain. The data can be retrieved from all the windows in the same domain even if the browser is restarted. Session Storage is the other Web Storage option and the data is available only in the window it was stored in and is lost when the browser window is closed. Aims to be a replacement of the cookies - cookies are accessible from both client and server side (4k max) - storage is accessible only from client side (5 – 10 MB)

92 Storage In HTML5, the data is NOT passed on by every server request, but used ONLY when asked for. It is possible to store large amounts of data without affecting the website's performance. The data is stored in different areas for different websites, and a website can only access data stored by itself. HTML5 uses JavaScript to store and access the data.

93 The localStorage Object The localStorage object stores the data with no time limit. Example : localStorage.lastname="Smith"; document.write(localStorage.lastname);

94 The localStorage Object The following example counts the number of times a user has visited a page : if (localStorage.pagecount) { localStorage.pagecount=Number(localStorage.pagecount) +1; } else { localStorage.pagecount=1; } document.write("Visits "+ localStorage.pagecount + " time(s).");

95 The sessionStorage Object The sessionStorage object stores the data for one session. The data is deleted when the user closes the browser window. Example : sessionStorage.lastname="Smith"; document.write(sessionStorage.lastname);

96 The sessionStorage Object The following example counts the number of times a user has visited a page, in the current session : if (sessionStorage.pagecount) { sessionStorage.pagecount=Number(sessionStorage.pagecount) +1; } else { sessionStorage.pagecount=1; } document.write("Visits "+sessionStorage.pagecount+" time(s) this session.");

97 Other Local Storage, Web SQL Database Can store relational data locally in the browser Especially useful for offline apps (more later)

98 Web SQL Database – a spec that brings SQL to the client side – specification is based around SQLite Show Example: TwitterLocalSQLdb var db = openDatabase('mydb', '1.0', 'my first database', 2 * 1024 * 1024); db.transaction(function (tx) { // here be the transaction // do SQL magic here using the tx object }); db.transaction(function (tx) { tx.executeSql('CREATE TABLE foo (id unique, text)'); }); tx.executeSql('INSERT INTO foo (id, text) VALUES (?, ?)', [id, userValue]);

99 Geolocation Geolocation is the art of figuring out where you are in the world and (optionally) sharing that information with people you trust. How? Chrome and Firefox use your IP and Google Location Services if (Modernizr.geolocation) { initiate_geolocation(); } function initiate_geolocation() { navigator.geolocation.getCurrentPosition(handle_geolocation_query,handle_ge o_errors); } function handle_geo_errors(error) { } function handle_geolocation_query(position){ //alert('Lat: ' + position.coords.latitude + // ' Lon: ' + position.coords.longitude); userPositionLong = position.coords.longitude; userPositionLat = position.coords.latitude; }

100 Web Workers Web Workers provide a standard way for browsers to run JavaScript in the background. With web workers, you can spawn multiple “threads” that all run at the same time, more or less. (Think of how your computer can run multiple applications at the same time, and you’re most of the way there.) These “background threads” can do complex mathematical calculations, make network requests, or access local storage while the main web page responds to the user scrolling, clicking, or typing.

101 Web Sockets One of the cool new features of HTML5 is WebSockets, which let us talk to the server without using AJAX requests. Websockets can replace long-polling. This is an interesting concept; the client sends a request to the server – now, rather than the server responding with data it may not have, it essentially keeps the connection open until the fresh, up-to- date data is ready to be sent – the client next receives this, and sends another request. WebSockets is a technique for two-way communication over one (TCP) socket, a type of PUSH technology. At the moment, it’s still being standardized by the W3C; however, the latest versions of Chrome and Safari have support for WebSockets.

102 File / Hardware Access Native Drag & Drop Desktop Drag-In (File API) – Drag files in from the desktop Desktop Drag-Out – Drag files out onto the desktop FileSystem APIs – Asynchronously write a file to a sandboxed file system using JavaScript Geolocation Device Orientation Speech Input

103 Working with Files Using Files in Web Applications

104 Markup Elements New elements in HTML 5: TagDescription For external content, like text from a news-article, blog, forum, or any other content from an external source For content aside from the content it is placed in. The aside content should be related to the surrounding content A button, or a radiobutton, or a checkbox For describing details about a document, or parts of a document A caption, or summary, inside the details element For grouping a section of stand-alone content, could be a video The caption of the figure section

105 Markup Elements more elements in HTML 5: TagDescription For a footer of a document or section, could include the name of the author, the date of the document, contact information, or copyright information For an introduction of a document or section, could include navigation For a section of headings, using to, where the largest is the main heading of the section, and the others are sub-headings For text that should be highlighted For a measurement, used only if the maximum and minimum values are known For a section of navigation The state of a work in progress

106 Markup Elements more elements in HTML 5: TagDescription For ruby annotation (Chinese notes or characters) For explanation of the ruby annotation What to show browsers that do not support the ruby element For a section in a document. Such as chapters, headers, footers, or any other sections of the document For defining a time or a date, or both Word break. For defining a line-break opportunity.

107 Markup Elements New media elements in HTML 5: Canvas elements in HTML 5: TagDescription For multimedia content, sounds, music or other audio streams For video content, such as a movie clip or other video streams For media resources for media elements, defined inside video or audio elements TagDescription For making graphics with a script

108 Markup Elements New form elements in HTML 5: TagDescription A list of options for input values Generate keys to authenticate users For different types of output, such as output written by a script

109 Markup Elements New Input Type Attribute Values : TagDescription telThe input value is of type telephone number searchThe input field is a search field urlThe input value is a URL The input value is one or more addresses datetimeThe input value is a date and/or time dateThe input value is a date monthThe input value is a month weekThe input value is a week timeThe input value is of type time datetime-localThe input value is a local date/time numberThe input value is a number rangeThe input value is a number in a given range colorThe input value is a hexadecimal color, like #FF8800


Download ppt "HTML 5: Introduction Ehsan Toreini Islamic Azad University, Mashhad Branch 2012, April."

Similar presentations


Ads by Google