The near future of real web applications
0 likes435 views
The presentation discusses innovative web technologies that enhance e-commerce and user experience, emphasizing the need for responsiveness to change in the digital landscape. It highlights the advantages of web applications over native apps, including flexibility, sync capabilities, and the use of modern technologies like HTML5 and CSS3. The speaker advocates for leveraging the strengths of the web to create richer and more engaging applications, proposing new frameworks and standards to enhance web development.
The near future of real web applications
- 1. Presentation: The web and browsers as the platform - exciting opportunities in new web technology The web and browsers as the platform Exciting opportunities in new web technology Today I want to show some new technologies and ideas you can use to make your ecommerce offerings more interesting and take advantage of the great new features modern hardware offers us. Misquoting
- 2. A lot of people quote Darwin as "survival of the fittest". The more interesting quote, however is: "It is not the strongest of the species that survive, nor the most intelligent, but the ones most responsive to change." - today I will talk about some of those changes in web technology you might not be aware of. Forget the web - it is all about apps
- 4. In recent times the web has not made many headlines. Instead people seem to be spending their time and money on apps for their smartphones and tablets. Smartphones for everybody? Photo by Beatrice Murch The big issue I have with this argument is that not everybody has a smart phone. And not everybody wants one. There is a lot to be said for the web as it is. Checking in on app stores
- 5. Apple App Store With every cool device comes a cool app store where you can buy or get free apps with a single click directly to your device. You can also get music, videos and games and many other things. Going to one place is amazing
- 6. Photo by "momentcaptured1" This is what shopping malls are about. You find everything in one place and you spend only a fraction of the time you need to get everything you want. App stores as innovation?
- 7. Download.com in 1996 If you think about it, this is nothing new. In the past we had sites like download.com, tucows.com and later on for free software freshmeat.net, sourceforge.com and a few others to download programs from. After the Zombie attack
- 8. Photo by David Fulmer If you look at those web sites now, they do look a bit like a shopping mall after a Zombie attack. Things are outdated, all over the shop and frankly nobody dares to go there any longer. A lot of the bespoke software we had in the past was for tasks we now use the web for. Go find that app!
- 9. Android Market To a degree, this is already happening on some App stores. It becomes harder and harder to find good applications. A lot of them are shoddily put together and don't use the device you use them on to its full extend. Getting your app found is the new SEO and there is already a booming market for fake reviews. Using existing infrastructure
- 10. Folding at home Folding at home is an initiative by Stanford university to crowdsource analysis of protein folding - one of the causes of Alzheimer. By using people's computers it is now the biggest supercomputer on earth. We can do the same with the web. People have powerful mobiles, tables and laptops. We should use them when we can. Outside can be messy, but fun
- 11. Photo on the daily squee I think it is ridiculous to limit ourselves to target app stores and closed systems. Remember Myspace? Remember when everyone told you a Facebook app is all you ever need? Outside is huge!
- 12. World Connection Density map by Chris Harrison The web is huge. You can reach people world-wide, 24-7 and they can find your product and solve their problems with it. Native vs. web - Playmobil vs. Lego
- 13. Photos by "kruemel2010" and "Buck" The whole native vs web debate always reminds me of Playmobil vs. Lego. As a kid this was a big thing. Some kids had cool cars from Playmobil that would survive a fall and ships that really swam. My Lego cars lost parts and the ships always took in water. However, when I wanted to turn my ship into a plane, I could do that whilst the Playmobil kids had to pester their parents to get a plane. I guess this was partly what made me a developer, not a buyer. What about syncing?
- 14. My different Android devices I own four Android devices. I played Angry Birds and Cut the Rope on all of them. Guess what? I always needed to start from scratch. Not fun. On the web it is much easier to sync things. Years of version controlling helped us with that. Financial Times - web > native
- 15. FT web app - more successful than iPhone app The FT lately showed that doing a web app can be more successful than a native iPad app. Making flexible rigid is easy…
- 16. phonegap.com Nothing for example stops you from building something with HTML5 and JS and then use a tool like phonegap to turn it into an iPhone and Android app. The other way around is harder. The now!
- 17. HTML5 Logo Instead of being scared and leaving the web for closed environments it makes sense to use the web and especially its strengths and new features. Some "new" tech on the web Flexible layouts with Mediaqueries Native animation with CSS Dynamic painting with Canvas / SVG
- 18. 3D interfaces with WebGL Local and offline storage File APIs Video A big annoyance to me is that not many web products really use the technology we have - there are awesome things possible in modern browsers. You can use those when and if they are available. Mediaqueries for flexibility The new Boston Globe page Using open web technology means you can be flexible. Upgrades are easy, and your app can easily adapt to the needs of the user. The Boston Globe is a great example of that. By cleverly employing mediaqueries the same site can be seen across a lot of devices. Madmanimation a CSS3 animation
- 19. CSS3 allows you to do animations without Flash. Madmanimation is a demo for the animatable CSS animation tool. It show how you can turn a list of small images with a description of the scenes into a very complex CSS3 animation. This is progressive enhancement like it should be done. Evolution of the web Canvas/SVG
- 20. Using Canvas and SVG you can do amazing interactive things. To celebrate the birthday of Chrome, Google released this wonderful timeline animation of how the web evolved. It uses SVG and is a great example of an interactive dashboard. WebGL Skin This is an impressive demo of simulating skin in WebGL - check the different discolourations and hair stubbles. Pepetz.com using WebGL
- 21. Pepetz.com is a great example how you can use new technology in a seamless way. The 2D product images turn into 3D models without needing any videos. The user can directly interact with them. Local Storage Cookies are bad for you Local Storage and Session Storage Simple key/value store 5MB of data across browsers Local Storage (persistent) and Session Storage (deleted when the tab is closed) are a very simple way to store content on the user's machine without having to go through the pains of cookies.</P< footer>
- 22. Offline Store parts of the page offline Really good for apps (store state) Simple manifest implementation Offline storage makes sure that our apps give a real native app feeling. If a user gets disconnected it shouldn't be the end of the world. File APIs Client side file conversion Packing before uploading Drag and drop from the desktop File APIs Client side file conversion Packing before uploading Drag and drop from the desktop … The new file APIs allow us to read and create files from the system easier than by going via a server. You can for example convert files before uploading them and allowing people to get their offline documents easier into an online system than with old-school file upload forms. Motivational poster using File APIs
- 23. This Mozilla demo shows how you can drop an image into the browser, annotate it and upload the solution as an image to different social sharing sites. HTML5 video Native browser controls Style-able Rich API Video is one of the big break-through technologies for HTML5. As video elements are just like any other element in the page it makes it very easy to deliver engaging and interesting video solutions. The native browser controls makes it also much easier to make video more accessible for example to keyboard users. Syncing HTML5 video
- 24. This demo shows how easy it is to sync page content with video in HTML5. Notice that the JavaScript is very simple and by using data- attributes on the HTML I can maintain the syncing without any JS knowledge. There is also a simple library available to do this called Popcorn. This Shell
- 25. This shell is a clever use of a free video effect script. The video gets exploded into several squares and your task is to put it together as a puzzle whilst the song is playing. If you succeed, you can download the song for free, if not, you can still watch the video. The future? Photo by Thomas Duchnicki The future for open web applications is to build platforms that are as exciting as the native ones. For this, we are working on some very cool things. Using the web to break the lock Web intents Boot to Gecko Open web apps Web API Browser ID Fullscreen / Notifications / Context Menus
- 26. Some things are not available to web applications on hardware like phones and tablets. That is not fair and we are working hard on making this possible. Breaking the browser mould Firefox with native toolbars In order to keep the open web the alternative of choice for app development we need to free the browser as the platform to allow us to access hardware and do the same cool things we can do with native apps. There are a few things brewing there and we would love to get your feedback. One of them is allowing the site to change the browser toolbars. Web APIs Defining access for web services to: o Dialer, SMS
- 27. o Address Book o Clock, Calculator o Camera o Gallery o Settings o Games o Maps Web APIs are something Mozilla and a few others are working on - a standard to allow JavaScript access to things that we need to have if we want to have a standards based mobile web. An open framework of apps Another thing we are working on is a framework for apps that would allow you to tell people about your app from your web site, have full-screen applications that could be launched in the browser and from the desktop or on mobiles, and a synced experience across these devices. Let's play!
- 28. Photo by Mike McCune Chris Heilmann @codepo8 http://wait-till-i.com Slides: http://icant.co.uk/talks/xinnovate Time to go and play with some of the things you saw today.
- 29. Written by Chris Heilmann (@codepo8) based on DZSlides by Paul Rouget (@paulrouget) and Antony Ricaud (@rik24d)