What's New in Web Development
•
5 recomendaciones•886 vistas
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.
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Destacado
Similar a What's New in Web Development
Similar a What's New in Web Development (20)
Último
Último (20)
What's New in Web Development
- 1. What’s new in Web Development? Konstantin Käfer
- 2. 1 HTML 5 2 Gears, Native Client & Silverlight 3 CSS 3 4 Client side XSLT 2 Konstantin Käfer
- 3. HTML 5 3 Konstantin Käfer
- 4. Standardize what’s already there 4 Konstantin Käfer
- 5. Standardize solutions for real-life applications 5 Konstantin Käfer
- 6. HTML 5: Structural Elements <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; } 6 Konstantin Käfer
- 7. HTML 5 in action Doctype: <!DOCTYPE html> ‣ Most browsers support any tags ‣ Except our beloved Internet Explorer ‣ <section> <section></section> <h2>Alpha</h2> <h2>Alpha</h2> <p> <p> Section Alpha Section Alpha </p> </p> </section> </section><//section> 7 Konstantin Käfer
- 8. document.createElement('section'); 8 Konstantin Käfer
- 9. HTML 5 New input types 9 Konstantin Käfer
- 10. 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
- 11. 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
- 12. 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
- 13. HTML 5: Miscellaneous Drag-and-Drop ‣ Cross-document message exchange ‣ Data grids ‣ Undo manager ‣ Web sockets ‣ <video>, <audio> tags ‣ 13 Konstantin Käfer
- 14. Google Gears Offline applications ‣ Worker pools ‣ (for compute-intensive applications) Databases ‣ (not fully compatible with HTML 5) Geolocation ‣ 14 Konstantin Käfer
- 15. Gears Demos 15 Konstantin Käfer
- 16. Google Native Client 16 Konstantin Käfer
- 17. Silverlight Microsoft’s Flash clone ‣ Based on XAML and WPF ‣ <Canvas xmlns=quot;http://schemas.microsoft.com/client/2007quot; xmlns:x=quot;http://schemas.microsoft.com/winfx/2006/xamlquot;> <Ellipse Canvas.Left=quot;30quot; Canvas.Top=quot;30quot; Height=quot;200quot; Width=quot;200quot; Stroke=quot;Blackquot; StrokeThickness=quot;10quot; Fill=quot;SlateBluequot; /> </Canvas> .NET languages (C#, VB.NET, IronPython, ...) ‣ 17 Konstantin Käfer
- 18. Silverlight Demos 18 Konstantin Käfer
- 19. CSS 3 Split up in modules ‣ Some parts are already implemented ‣ – Use them now! (Degrade gracefully) 19 Konstantin Käfer
- 20. 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
- 21. 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
- 22. WebKit’s CSS enhancements Transforms: Rotating, Scaling, Morphing, ... ‣ Transitions: Animate between two states ‣ Animations: Define keyframes and timelines ‣ Demo ‣ 22 Konstantin Käfer
- 23. Client side XSLT <xsl:value-of> Title:$name Date:$curdat Transform XML documents </xsl:value-o ‣ to HTML XSLT Code XML Input Use the same XML for ‣ Web Services XSLT Processor Result Document 23 Konstantin Käfer
- 24. Example: WoW Armory 24 Konstantin Käfer
- 25. Client side XML/XSLT <?xml version=quot;1.0quot; encoding=quot;UTF-8quot;?> <page title=quot;Add text formatquot; path=quot;admin/settings/filter/addquot; base=quot;/quot;> <title>Add text format</title> <content>...</content> <menu id=quot;navigationquot; title=quot;Navigationquot;> <item path=quot;user/1quot; title=quot;My accountquot; /> <item path=quot;node/addquot; title=quot;Create contentquot; children=quot;2quot; /> <item path=quot;adminquot; title=quot;Administerquot; /> <item path=quot;admin/contentquot; title=quot;Content managementquot; children=quot;6quot; /> <item path=quot;admin/buildquot; title=quot;Site buildingquot; children=quot;4quot; /> <item path=quot;admin/settingsquot; title=quot;Site configurationquot;>...</item> <item path=quot;admin/userquot; title=quot;User managementquot; /> <item path=quot;admin/reportsquot; title=quot;Reportsquot; /> <item path=quot;admin/helpquot; title=quot;Helpquot; /> <item path=quot;logoutquot; title=quot;Log outquot; /> </menu> <user name=quot;adminquot; id=quot;1quot; /> </page> 25 Konstantin Käfer
- 26. 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
- 27. Thanks! Questions? Konstantin Käfer mail@kkaefer.com 27 Konstantin Käfer
- 28. 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 Konstantin Käfer