57
HTML5 & CSS3 and beyond 1 Jens Jäger Freiberuflicher Softwareentwickler JavaEE, Ruby on Rails, Webstuff Blog: www.jensjaeger.com Mail: [email protected] Donnerstag, 5. Mai 2011
HTML5 & CSS3and beyond
1
Jens JägerFreiberuflicher SoftwareentwicklerJavaEE, Ruby on Rails, WebstuffBlog: www.jensjaeger.comMail: [email protected]
Donnerstag, 5. Mai 2011
2
Content• A short of history Html
• New Markup
• Webforms
• Pseudoclasses
• Media Queries
• Fonts
• Rounded corners
• Shadows
• Canvas
• Video/Audio
• Beyond HTML5
• Comming soon
Donnerstag, 5. Mai 2011
A short history of html
3
Donnerstag, 5. Mai 2011
Donnerstag, 5. Mai 2011
Donnerstag, 5. Mai 2011
Donnerstag, 5. Mai 2011
Donnerstag, 5. Mai 2011
Donnerstag, 5. Mai 2011
Donnerstag, 5. Mai 2011
Donnerstag, 5. Mai 2011
Donnerstag, 5. Mai 2011
Donnerstag, 5. Mai 2011
Donnerstag, 5. Mai 2011
Donnerstag, 5. Mai 2011
New markup
15
Donnerstag, 5. Mai 2011
All Starts with the Right Doctype
16
<!DOCTYPE html>
Donnerstag, 5. Mai 2011
New markup
17
• <header>
• <footer>
• <nav>
• <section>
• <article>
• <aside>
Donnerstag, 5. Mai 2011
18
Donnerstag, 5. Mai 2011
But my customer want ie?
19
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
html5shimHTML5 IE enabling script
Donnerstag, 5. Mai 2011
Webforms
20
Donnerstag, 5. Mai 2011
Placeholder Text
21
<form> <input type="search" name="q" placeholder="Search in Blog"> <input type="submit" value="Search"></form>
Donnerstag, 5. Mai 2011
Autofocus
22
<form> <input name="q" autofocus> <input type="submit" value="Search"></form>
Donnerstag, 5. Mai 2011
23
<form> <input type="email"> <input type="submit" value="Go"></form>
Donnerstag, 5. Mai 2011
Keyboard optimized for mail
24
Donnerstag, 5. Mai 2011
Numbers
25
<input type="number" min="0" max="10" step="2" value="6">
Donnerstag, 5. Mai 2011
26
• Webadresses
• Numbers as Sliders
• Date Pickers
• Search Boxes
• Color Pickers
More Form elements
Donnerstag, 5. Mai 2011
CSS3-Pseudoclasses
27
Donnerstag, 5. Mai 2011
Odd/Even
28
<table> <tr> <th>Item</th> <th>Price</th> <th>Quantity</th> <th>Total</th> </tr> <tr> <td>Coffee mug</td> <td>$10.00</td> <td>5</td> <td>$50.00</td> </tr> <tr> ...
tr:nth-of-type(even){ background-color: #F3F3F3;}tr:nth-of-type(odd) { background-color:#ddd;}
Donnerstag, 5. Mai 2011
Last-Child
29
tr:last-child{ font-weight: bolder;}
Donnerstag, 5. Mai 2011
Media Queries
30
Donnerstag, 5. Mai 2011
Media Queries
31
• Resolution
• Orientation (portrait or landscape)
• Device width and height
• Width and height of browser window
Donnerstag, 5. Mai 2011
Webfonts
32
Donnerstag, 5. Mai 2011
Webfonts
33
@font-face { font-family: 'Droid Sans Regular'; src: url('DroidSans.eot'); src: local('Droid Sans Regular'), local('DroidSans-Regular'), url('DroidSans.ttf') format('truetype');}
@font-face { font-family: 'Droid Sans Bold'; src: url('DroidSans-Bold.eot'); src: local('Droid Sans Bold'), local('DroidSans-Bold'), url('DroidSans.ttf') format('truetype');}
Donnerstag, 5. Mai 2011
34
Donnerstag, 5. Mai 2011
35
Rounded Corners
Donnerstag, 5. Mai 2011
Rounded Corners
36
-webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px;
Donnerstag, 5. Mai 2011
Shadows
37
Donnerstag, 5. Mai 2011
Shadows
38
box-shadow: 0 2px 20px rgba(50, 50, 50, 0.1); -webkit-box-shadow: 0 2px 20px rgba(50, 50, 50, 0.1); -moz-box-shadow: 0 2px 20px rgba(50, 50, 50, 0.1);
Donnerstag, 5. Mai 2011
Reflection
39
Donnerstag, 5. Mai 2011
Reflection
40
-webkit-box-reflect: below 3px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.8, transparent), to(rgba(255,255,255,0.7)));
Only Webkit!
Donnerstag, 5. Mai 2011
Canvas
41
HTML5’s canvas element lets developers create images and animations in the browser programmatically using
JavaScript
Donnerstag, 5. Mai 2011
42
Canvas
Donnerstag, 5. Mai 2011
Canvas
43
<script type="text/javascript" charset="utf-8"> var canvas = document.getElementById('my_canvas'); if (canvas.getContext){ var context = canvas.getContext('2d'); context.fillStyle = "rgb(200,0,0)"; context.fillRect (10, 10, 100, 100); }</script>
draw a rectangle
Donnerstag, 5. Mai 2011
HTML5 Video/Audio
44
Donnerstag, 5. Mai 2011
Do I need flash anymore?
Donnerstag, 5. Mai 2011
NOflash is dead
Donnerstag, 5. Mai 2011
But designers love flash?
Donnerstag, 5. Mai 2011
Your opportunity to get rich
Donnerstag, 5. Mai 2011
HTML5 - Startup Idea
• Start a company with a fancy name
• Build a software with a interface like flash
• Output html5 + javascript
• Sell 100000 copys
• Sell the company to adobe, apple, ms or google
• Enjoy Mojito Island
Donnerstag, 5. Mai 2011
Beyond Html5
50
Donnerstag, 5. Mai 2011
Geolocation
51
• Determines a person‘s location
• IP address
• MAC addres
• Wi-Fi hotspot
• GPS
Donnerstag, 5. Mai 2011
Geolocation
52
Not in HTML5 standard butalready implemented in Firefox, Safari, and Chrome.
Donnerstag, 5. Mai 2011
Web sockets
53
• HTTP is a stateless protocol
• real-time work over a stateless protocol sucks
• Web sockets let the browser make a statefull connection
Donnerstag, 5. Mai 2011
Local storage
54
• simple method to persist data on the client
• persists between browser sessions
• restricted to a domain
• key/value pairs
Donnerstag, 5. Mai 2011
Comming soon
• Web Workers (Concurrency in JavaScript)
• Native Drag-and-Drop Support
• WebGL
• Indexed Database API (key/value store)
• Client-Side Form Validation
55
Donnerstag, 5. Mai 2011
Thank you
Questions?
56
Donnerstag, 5. Mai 2011
Resources
57
• Pictures: W3C, WHAT Wg, Apple, Jens Jäger
• Video: Pragmatic Programmers
• SourceCode: HTML5 & CSS3 (Pragmatic Programmers), HTML5 Up and Running (O‘Reilly), Android Open Source Project, Jens Jäger
• Keynote Template: autobahn81.com
Donnerstag, 5. Mai 2011
