View
3.106
Download
4
Category
Preview:
DESCRIPTION
This is an overview session that touches onto all kinds of new developments in the wide field of web design. This talk is mainly focussed on client side technologies (HTML, CSS, JavaScript) and outlines the news of the past months. If you have not been following the buzz lately, this is a good session to get you up to speed.
Citation preview
What’s newin
Web Development?
Konstantin
Käfer
Konstantin Käfer2
1
2
3
4
HTML 5
Gears, Native Client & Silverlight
CSS 3
Client side XSLT
Konstantin Käfer
HTML 5
3
Konstantin Käfer
Standardize what’salready there
4
Konstantin Käfer
Standardize solutionsfor real-life applications
5
Konstantin Käfer
HTML 5: Structural Elements
6
‣ <section>, <nav>, <article>, <aside>, <footer>, <figure>, <header>, <dialog>
‣ Behave like spans; use display:block
‣ For structuring pages
‣ Allows for nice CSS:
– footer { font-size: 0.75em; color: gray; }
Konstantin Käfer
HTML 5 in action‣ Doctype: <!DOCTYPE html>
‣ Most browsers support any tags
‣ Except our beloved Internet Explorer
7
<section> <h2>Alpha</h2> <p> Section Alpha </p></section>
<section></section> <h2>Alpha</h2> <p> Section Alpha </p></section><//section>
Konstantin Käfer
document.createElement('section');
8
Konstantin Käfer9
HTML 5
New input types
Konstantin Käfer
HTML 5: Storing data‣ Database Storage API: Plain SQL
‣ Local Storage: key-value pairs
‣ Session Storage: key-value pairs
‣ Supported by Mozilla, WebKit, Opera
10
Konstantin Käfer
HTML 5: <canvas>‣ Already supported by Mozilla, WebKit, Opera
‣ Arbitrary 2D drawing
‣ Can be emulated with VML in IE
‣ Applications:
– http://code.google.com/p/flot/
– http://wiki.github.com/sorccu/cufon/about
– http://ejohn.org/blog/processingjs/
11
Konstantin Käfer
Canvas Fonts‣ Alternative to images replacement and sIFR
‣ Use <canvas> and VML to render fonts
‣ Several libraries
– http://typeface.neocracy.org
– http://cufon.shoqolate.com
‣ Converts font files to proprietary format
12
Konstantin Käfer
HTML 5: Miscellaneous‣ Drag-and-Drop
‣ Cross-document message exchange
‣ Data grids
‣ Undo manager
‣ Web sockets
‣ <video>, <audio> tags
13
Konstantin Käfer
Google Gears‣ Offline applications
‣ Worker pools(for compute-intensive applications)
‣ Databases(not fully compatible with HTML 5)
‣ Geolocation
14
Konstantin Käfer
Gears Demos
15
Konstantin Käfer
Google Native Client
16
Konstantin Käfer
Silverlight
17
‣ Microsoft’s Flash clone
‣ Based on XAML and WPF
‣ .NET languages (C#, VB.NET, IronPython, ...)
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Ellipse Canvas.Left="30" Canvas.Top="30" Height="200" Width="200" Stroke="Black" StrokeThickness="10" Fill="SlateBlue" /></Canvas>
Konstantin Käfer
Silverlight Demos
18
Konstantin Käfer
CSS 3
19
‣ Split up in modules
‣ Some parts are already implemented
– Use them now! (Degrade gracefully)
Konstantin Käfer
CSS 3‣ border-radius: 5px;
‣ user-modify: read-write;
‣ box-shadow: 3px 3px 5px #888;
‣ background: rgba(0, 0, 0, 0.5);
‣ border-image: url(border.png) 5 5 10 10 round round;
‣ text-overflow: ellipsis;
20
Konstantin Käfer
CSS 3 cont.‣ column-width: 10em;
column-gap: 1em;
‣ @font-face { font-family: Aller; src: url('Aller-Roman.otf');}
font-family: Aller, sans-serif;
21
Konstantin Käfer
WebKit’s CSS enhancements‣ Transforms: Rotating, Scaling, Morphing, ...
‣ Transitions: Animate between two states
‣ Animations: Define keyframes and timelines
‣ Demo
22
Konstantin Käfer
Client side XSLT‣ Transform XML documents
to HTML
‣ Use the same XML forWeb Services
23
XML Input XSLT Code
XSLT Processor
<xsl:value-of>Title:$nameDate:$curdat</xsl:value-o
Result Document
Konstantin Käfer
Client side XML/XSLT
25
<?xml version="1.0" encoding="UTF-8"?><page title="Add text format" path="admin/settings/filter/add" base="/"> <title>Add text format</title>
<content>...</content>
<menu id="navigation" title="Navigation"> <item path="user/1" title="My account" /> <item path="node/add" title="Create content" children="2" /> <item path="admin" title="Administer" /> <item path="admin/content" title="Content management" children="6" /> <item path="admin/build" title="Site building" children="4" /> <item path="admin/settings" title="Site configuration">...</item> <item path="admin/user" title="User management" /> <item path="admin/reports" title="Reports" /> <item path="admin/help" title="Help" /> <item path="logout" title="Log out" /> </menu>
<user name="admin" id="1" /></page>
Konstantin Käfer
Server side JavaScript‣ Has been possible for a long time (CGI)
‣ Interpreters got extremely fast
‣ http://groups.google.com/group/serverjs
26
Konstantin Käfer
Konstantin Käfermail@kkaefer.com
27
Thanks! Questions?
Konstantin Käfer
Sources & Credits – http://www.peterkroener.de/html5-was-geht-heute-
schon-was-geht-nicht-der-grosse-ueberblick/
– http://andybudd.com/presentations/css3/
– http://lipidity.com/apple/iphone-webkit-css-3
28
Recommended