HTML5 & Front-end overview
13
Topics for today - HTML 5 - HTML 5 - Front-end frameworks - Front-end frameworks - Testing and Automation Tools - Testing and Automation Tools
-
Upload
ashish-mukherjee -
Category
Documents
-
view
203 -
download
3
Transcript of HTML5 & Front-end overview
Topics for today
- HTML 5- HTML 5
- Front-end frameworks- Front-end frameworks
- Testing and Automation Tools- Testing and Automation Tools
HTML 5 – What is HTML5?
HTML 5 is the latest HTML specification which brings many new features toHTML 5 is the latest HTML specification which brings many new features toease the work of Web developers and Web-page authors.ease the work of Web developers and Web-page authors.
It is still a work in progress but many of the specifications have beenIt is still a work in progress but many of the specifications have beenimplemented in the major Browsers already. Some features areimplemented in the major Browsers already. Some features areunsupported but would be coming up in newer versions of Browsers.unsupported but would be coming up in newer versions of Browsers.
HTML 5 – Feature Set
- New semantic elements/tags- New semantic elements/tags
- New attributes for existing elements- New attributes for existing elements
- Geolocation API- Geolocation API
- Video support- Video support
- Drawing API- Drawing API
- Offline Browsing- Offline Browsing
- Local Storage- Local Storage
HTML 5 – Changes from HTML 4
- The character encoding- The character encoding <meta charset="UTF-8"> <meta charset="UTF-8">
- <!DOCTYPE html> - <!DOCTYPE html>
- Attributes with an empty value may be written as just the attribute name - Attributes with an empty value may be written as just the attribute name omitting the equals sign and the value omitting the equals sign and the value
- - basefont, big, center, font, strike, frame, frameset, noframe, background, basefont, big, center, font, strike, frame, frameset, noframe, background, bgcolor bgcolor are deprecated or not part of HTML 5. Use CSS instead to achieveare deprecated or not part of HTML 5. Use CSS instead to achievemany of the same effectsmany of the same effects
HTML 5 – New elements
- section- section- article- article- aside- aside- header- header- footer- footer- nav- nav- figure- figure- time- time- keygen- keygen- output- output- datalist - datalist
HTML 5 – An example
<!DOCTYPE html><!DOCTYPE html><html><html>
<meta charset="UTF-8" /><meta charset="UTF-8" /><body><body>
<header><header><hgroup><hgroup>
<h1 id="site-title"><h1 id="site-title"><a href="<a href="http://html5examples.org/">HTML5 Examples</a>">HTML5 Examples</a>
</h1></h1></hgroup></hgroup><nav id="access" role="navigation"><nav id="access" role="navigation">
<h3 class="assistive-text">Main menu</h3><h3 class="assistive-text">Main menu</h3><div class="skip-link"><div class="skip-link">
<a class="assistive-text" href="#secondary"><a class="assistive-text" href="#secondary">Skip to secondary content</a>Skip to secondary content</a>
</div></div></nav></nav>
</header></header></body></body>
</html></html>
HTML 5 – Forms
The following type attributes are new for the input element -The following type attributes are new for the input element -
- tel- tel- url- url- search- search- email- email- datetime- datetime- time- time- date- date- month- month- week- week- number- number- range- range- colour - colour
HTML 5 – Forms II
The new attributes for form inputs are -The new attributes for form inputs are -
- autofocus- autofocus- autocomplete- autocomplete- placeholder- placeholder- required- required- pattern- pattern- readonly- readonly
HTML 5 – Multimedia
<audio controls><audio controls> <source src="/home/ashish/Music/mehndi_ki_raat.mp3" type="audio/mpeg"><source src="/home/ashish/Music/mehndi_ki_raat.mp3" type="audio/mpeg"> </audio></audio> <video width="320" height="240" controls><video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"><source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"><source src="movie.ogg" type="video/ogg"> </video></video>
HTML 5 – Additional Features
- GeoLocation API
- Local Storage
- Offline Browsing
- Web Sockets
HTML 5 – Front-end Frameworks
- jQuery- jQuery
- Bootstrap from Twitter- Bootstrap from Twitter
- Bootbox (enhancement to Bootstrap)- Bootbox (enhancement to Bootstrap)
- Backbone.js- Backbone.js
HTML 5 – Testing & Quality Tools
- W3C Link Checker- W3C Link Checker
- W3C HTML Validator- W3C HTML Validator
- HTML Tidy- HTML Tidy
- W3C Spell Checker- W3C Spell Checker
- BrowserStack- BrowserStack
- Collection of tools on softwareqatest- Collection of tools on softwareqatest
HTML 5 – Resources on the Web
- - http://www.w3.org
- - http://w3schools.com
- - http://www.w3.org/QA/Tools/
- - http://www.softwareqatest.com/
- - http://www.browserstack.com/
- - http://tidy.sourceforge.net/
