•Arrival of DHTML: (late 90s)
•http://www.angelfire.com/super/badwebs/
•XHTML (is dead)
•HTML5
XHTML
•Strict rules
•Should solve inconsistency of handling errors
•XML advantages (interoperability, automatization, portability, extensibility)
•BUT nobody really needed it...
•Quirk modes!
XHTML2 and HTML5
•Even more strict
•Slow changes
•WHATWG – for developers
XHTML vs HTML5
•
•
•
•Title of the document
•
•
•The content of the document.
•
•
•
XHTML vs HTML5
•
•Title of the document
•The content of the document.
•
C:\Users\Petr\Downloads\HTML5-APIs-and-related-technologies-by-Sergey-Mavrody.png
Browser support
•http://caniuse.com
•Fallbacks
•Modernizr
•Polyfills
•
Semantic tags
•
,
•, , , , , …
•,
•,
•
Other semantics
•ARIA (roles)
•RDFa
•Microformats
•Snippets
•Inline SVGs!
•
Forms
•Placeholders
•Autofocus, Required
•Pattern
•Spellcheck, autocomplete, …
•New types (email, url, tel, number, color, range, date, time, datalist) – great for mobiles
•contentEditable
Audio and Video
•Problems with formats
•Flash fallbacks
Canvas
•http://wolf3d.atw.hu
•Game APIs
•Collisions, …
•Maybe next time ;)
•
CSS
•Triumvirate of web apps (HTML, CSS, JS)
•CSS – presentation
•CSS 2.1 – too long
•CSS 3 – modules (50, 4 core)
•Inline
•page does not have to look the same!
Horror of prefixes
•-webkit-transform: rotate(1deg)//Safari+Chrome
• -moz-transform: rotate(1deg)// FF 3.5-15
• -ms-transform: rotate(1deg)// IE 9+
• -o-transform: rotate(1deg)//Opera 10.5-12
• transform: rotate(1deg)// FF 16+, O >12
Media queries
•Linkage to type (screen, print)
•Max-width, Max-screen-width
•@media (min-width: 400px) and (…) {
–Styles
•}
Web Fonts
•Format problems (ttf, otf, woff, svg, …)
•@font-face
Formatting boxes
–Multiple backgrounds
–Borders
–Box model
–Transitions
–Transforms
–Animating
•Examples:
–Ellipsis
–Columns
–Opacity
–Corners
–Gradients
–Shadows
–Reflection