i love techno - the site
DESCRIPTION
How we built ILoveTechno.Coders: Amphion, Krimson, PronovixTRANSCRIPT
![Page 1: I Love Techno - the site](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c855e34a7959b92b8b4575/html5/thumbnails/1.jpg)
Saturday, December 12, 2009
![Page 2: I Love Techno - the site](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c855e34a7959b92b8b4575/html5/thumbnails/2.jpg)
Saturday, December 12, 2009
![Page 3: I Love Techno - the site](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c855e34a7959b92b8b4575/html5/thumbnails/3.jpg)
Saturday, December 12, 2009
![Page 4: I Love Techno - the site](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c855e34a7959b92b8b4575/html5/thumbnails/4.jpg)
• Amphion - Flash development - Antwerp
• frontend, content management, client contact, design
• Krimson - Drupal specialist - Antwerp
• project management, architecture supervision, theming, server related
• Pronovix - Drupal specialist - Belgium/Hungary
• special Drupal projects, backend / service architecture, technical help
Saturday, December 12, 2009
![Page 5: I Love Techno - the site](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c855e34a7959b92b8b4575/html5/thumbnails/5.jpg)
• Peter Arato (user/428960)
• Hungary
• Pronovix
• Drupal, Flash, Tech
About us
• Jo Wouters (user/8777)
• Belgium
• Krimson | Drupal Architects
• Project management, Consultancy, Training, Development
Saturday, December 12, 2009
![Page 6: I Love Techno - the site](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c855e34a7959b92b8b4575/html5/thumbnails/6.jpg)
About ILoveTechno
• http://www.ilovetechno.be/
• 1995 .. 2009 ...
• Techno festival
• Informational site
• Aggregator site
Saturday, December 12, 2009
![Page 7: I Love Techno - the site](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c855e34a7959b92b8b4575/html5/thumbnails/7.jpg)
Saturday, December 12, 2009
![Page 8: I Love Techno - the site](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c855e34a7959b92b8b4575/html5/thumbnails/8.jpg)
Saturday, December 12, 2009
![Page 9: I Love Techno - the site](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c855e34a7959b92b8b4575/html5/thumbnails/9.jpg)
Saturday, December 12, 2009
![Page 10: I Love Techno - the site](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c855e34a7959b92b8b4575/html5/thumbnails/10.jpg)
Saturday, December 12, 2009
![Page 11: I Love Techno - the site](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c855e34a7959b92b8b4575/html5/thumbnails/11.jpg)
• Communication
• Motivation
• Well shared tasks
• Iterative development (prototyping)
Co-operation
Saturday, December 12, 2009
![Page 12: I Love Techno - the site](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c855e34a7959b92b8b4575/html5/thumbnails/12.jpg)
Requirements
Saturday, December 12, 2009
![Page 13: I Love Techno - the site](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c855e34a7959b92b8b4575/html5/thumbnails/13.jpg)
Music player
Saturday, December 12, 2009
![Page 14: I Love Techno - the site](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c855e34a7959b92b8b4575/html5/thumbnails/14.jpg)
Saturday, December 12, 2009
![Page 15: I Love Techno - the site](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c855e34a7959b92b8b4575/html5/thumbnails/15.jpg)
Flash objects
Saturday, December 12, 2009
![Page 16: I Love Techno - the site](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c855e34a7959b92b8b4575/html5/thumbnails/16.jpg)
Saturday, December 12, 2009
![Page 17: I Love Techno - the site](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c855e34a7959b92b8b4575/html5/thumbnails/17.jpg)
Lineup editor
Saturday, December 12, 2009
![Page 18: I Love Techno - the site](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c855e34a7959b92b8b4575/html5/thumbnails/18.jpg)
Saturday, December 12, 2009
![Page 19: I Love Techno - the site](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c855e34a7959b92b8b4575/html5/thumbnails/19.jpg)
Different page elements
Saturday, December 12, 2009
![Page 20: I Love Techno - the site](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c855e34a7959b92b8b4575/html5/thumbnails/20.jpg)
Saturday, December 12, 2009
![Page 21: I Love Techno - the site](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c855e34a7959b92b8b4575/html5/thumbnails/21.jpg)
Aggregation
Saturday, December 12, 2009
![Page 22: I Love Techno - the site](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c855e34a7959b92b8b4575/html5/thumbnails/22.jpg)
Saturday, December 12, 2009
![Page 23: I Love Techno - the site](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c855e34a7959b92b8b4575/html5/thumbnails/23.jpg)
... bunch of general Drupal stuff
Saturday, December 12, 2009
![Page 24: I Love Techno - the site](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c855e34a7959b92b8b4575/html5/thumbnails/24.jpg)
Features
• Druplash
• Deeplinking
• Dynamic content loading
• Graceful degradation
• XML-RPC content pulling
• ... other interesting stuff
Saturday, December 12, 2009
![Page 25: I Love Techno - the site](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c855e34a7959b92b8b4575/html5/thumbnails/25.jpg)
Druplash
• Flash (frontend)
• Drupal (backend + content + layout)
• Communication (client, server)
• Different implementations
• SWFAddress (SWFObject), Services, AMFPHP
Saturday, December 12, 2009
![Page 26: I Love Techno - the site](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c855e34a7959b92b8b4575/html5/thumbnails/26.jpg)
Deeplinking
• Persistent URL
• History
• SWFAddress
Saturday, December 12, 2009
![Page 27: I Love Techno - the site](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c855e34a7959b92b8b4575/html5/thumbnails/27.jpg)
ActionScript
Saturday, December 12, 2009
![Page 28: I Love Techno - the site](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c855e34a7959b92b8b4575/html5/thumbnails/28.jpg)
JavaScript
Saturday, December 12, 2009
![Page 29: I Love Techno - the site](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c855e34a7959b92b8b4575/html5/thumbnails/29.jpg)
• Loading original content (example.com/news)
• Redirect to $basePath (example.com/#/news)
• Loading content of the given URL (Ajax)
• Replace content with Flash
• Notify Flash about the state (news)
• Flash changes it’s state
1st page load
Saturday, December 12, 2009
![Page 30: I Love Techno - the site](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c855e34a7959b92b8b4575/html5/thumbnails/30.jpg)
• Send request for a page (about_us)
• Flash notifies SWFAddress (Flash > JS)
• SWFAddress state changed (example.com/#/about_us)
• Ajax request to the server (Ajax)
• Content elements received (JSON)
• Put content to the right place
Navigation
Saturday, December 12, 2009
![Page 31: I Love Techno - the site](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c855e34a7959b92b8b4575/html5/thumbnails/31.jpg)
Dynamic elements
• Ajax request
• Content
• CSS
• JavaScript (evaluation)
• AjaxLoad
Saturday, December 12, 2009
![Page 32: I Love Techno - the site](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c855e34a7959b92b8b4575/html5/thumbnails/32.jpg)
Saturday, December 12, 2009
![Page 33: I Love Techno - the site](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c855e34a7959b92b8b4575/html5/thumbnails/33.jpg)
PHP
Saturday, December 12, 2009
![Page 34: I Love Techno - the site](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c855e34a7959b92b8b4575/html5/thumbnails/34.jpg)
JavaScript
Saturday, December 12, 2009
![Page 35: I Love Techno - the site](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c855e34a7959b92b8b4575/html5/thumbnails/35.jpg)
Graceful degradation
• Browsers without FlashPlayer / JS
• Deprecated FlashPlayer version
• SWFAddress (SWFObject)
Saturday, December 12, 2009
![Page 36: I Love Techno - the site](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c855e34a7959b92b8b4575/html5/thumbnails/36.jpg)
Saturday, December 12, 2009
![Page 37: I Love Techno - the site](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c855e34a7959b92b8b4575/html5/thumbnails/37.jpg)
Communication
Saturday, December 12, 2009
![Page 38: I Love Techno - the site](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c855e34a7959b92b8b4575/html5/thumbnails/38.jpg)
Flash <> Client
HTML
Flashreturn
call
call
return
Saturday, December 12, 2009
![Page 39: I Love Techno - the site](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c855e34a7959b92b8b4575/html5/thumbnails/39.jpg)
ActionScript
JavaScript
Saturday, December 12, 2009
![Page 40: I Love Techno - the site](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c855e34a7959b92b8b4575/html5/thumbnails/40.jpg)
Flash <> Server
Client SERVER
AM
FPHP gatew
ay
010001000100010010101011010111010
010001000100010010101011010111010
11010100 $nid = 1; $a = [...
11010100 $node = {“title”: ...
Saturday, December 12, 2009
![Page 41: I Love Techno - the site](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c855e34a7959b92b8b4575/html5/thumbnails/41.jpg)
ActionScript
Saturday, December 12, 2009
![Page 42: I Love Techno - the site](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c855e34a7959b92b8b4575/html5/thumbnails/42.jpg)
Numbers
• Event sold out: 35.000 tickets!
• 42.000 unique visitors in 2 days
• 65.000 visits in 2 days
• > 420.000 unique visitors
• > 580.000 visits
• > 8.000.000 page views
Saturday, December 12, 2009