5 x HTML5 in APEX (5) PDF
Preview 5 x HTML5 in APEX (5)
5 x HTML5 in APEX (5) HTML5 + APEX5 = Perfect 10 (Shakeeb) Christian Rokitta • HTML 5 – What‘s new? • HTML5 Tags <dialog> element: Modals made easy o <output> o • HTML5 API’s Drag and Drop o Geolocation API o SSE o • Multiple Devices (Mobile, Mobile, Mobile) • Modular • Multimedia • Semantics (cleaner code, accessibility) • Interactivity (tighter integration with JavaScript) • Structure vs Presentation, CSS3 • Simplified DOCTYPE: <!DOCTYPE html> • New HTML Elements • HTML APIs • Elements Removed in HTML5 CSS <center>, <frame>/<frameset>, <big>, <font>, … Version Year Tim Berners-Lee invented www 1989 Tim Berners-Lee invented HTML 1991 Dave Raggett drafted HTML+ 1993 HTML Working Group defined HTML 2.0 1995 W3C Recommended HTML 3.2 1997 W3C Recommended HTML 4.01 1999 W3C Recommended XHTML 1.0 2000 HTML5 WHATWG* First Public Draft 2008 HTML5 WHATWG Living Standard 2012 HTML5 W3C Final Recommendation 2014 *) Web Hypertext Application Technology Working Group - was formed in response to slow W3C development, and W3C's decision to close down the development of HTML, in favor of XHTML • Semantic/Structural Elements <article>, <aside>, <dialog> <footer>, <header>, <menuitem>, <nav>, <section>, … • Form Elements <datalist>, <output>, … • Input Types tel, timcolor, date, email, number,search, e, url, … • Input Attributes autocomplete, autofocus, min/max, placeholder, … • New Attribute Syntax <input type="text" value=John>, <input type="text" value='John Doe'>, … • HTML5 Graphics <canvas>, <svg> • New Media Elements <audio>, <video>, <track>, … <<ttaabbllee>> <<ttrr>> <<tthh>>JJaannuuaarryy <<ddiiaalloogg >oTpheins> Tihsi sa ni so paenn odpieanl odgi awliongd oww<i/nddioawl</odg>ia<l/otgh>> </th> <<tthh>>FFeebbrruuaarryy<<//tthh>> <<tthh>>MMaarrcchh<<//tthh>> <<//ttrr>> <<ttrr>> <<ttdd>>3311<<//ttdd>> <<ttdd>>2288<<//ttdd>> <<ttdd>>3311<<//ttdd>> <<//ttrr>> <<//ttaabbllee>> • show(): Open dialog. • close(): Close dialog. Takes an optional argument which if present dialog.returnValue is set to. • showModal(): Open modal dialog. • ::backdrop: Pseudo-element to style background behind a modal dialog. • close event: Fired when a dialog is closed. • cancel event: Fired when the Escape key is pressed on a modal dialog. • Why do we need <dialog> element while it's possible using libraries? great for accessibility o modal dialogs are pushed on a well-ordered stack (no z- o index) • How do I position a dialog? CSS! default CSS includes "position: absolute; left: 0; right: 0; margin: auto;" which horizontally centers the element within its container. • Can I open multiple dialogs? Yes. Much like multiple <div> elements stacked on eachother.
Description:The list of books you might like
