I am really astonished by the Story of send from Google.
Could anyone tell me how does it work under the hood? Where should I start to learn this set of techniques to build such a nice and great website?
Where should I start? Is it purely HTML5&CSS3?
Here are some discussion on hacker news thread:
Very well, that’s how. A quick look reveals that each scene is a section, the assets are linked with data attributes, and the rest is fancy combinations of TweenJS and Three.js animations, coordinated by /assets/js/main.min.js (which also handles the invisible history).
It also appears that Swiffy, the SWF-to-HTML converter (http://www.google.com/doubleclick/studio/swiffy/) was used for helping to generate some of those animations.
Still can figure it out how it works, thank in advance!!!
Guides / Useful sites:
Basics - http://www.w3schools.com/html5/
Advanced - http://www.html5rocks.com/en/tutorials (This is a google project)
Demos - http://html5-demos.appspot.com/
From Apple - http://www.apple.com/html5/
swiffy: I have tried for one of my mobile apps, it worked well. But there is a limit of 1mb for swf file.
storyofsend: yes, Its is using three.js
Related
I've been able to embed my latest 10 Tumblr posts into a website, but it doesn't include all of the functionality (comments, re-blogs, shares, etc.) of Tumblr. I'm really looking to do that, but I can't find an answer on this anywhere.
I know a lot of programming languages, so I'll take a solution in any language. The website IS a built-from-scratch website, so a Wordpress plugin won't help.
EDIT: Just to confirm (based on comments/questions below), we've followed the API documentation. We've got plenty of APIs working, but this one doesn't. We've tried gems, a Javascript version, the API with oauth and tokens, and more attempts than I can recall.
It's easy to do in Wordpress, and if we were doing it as a subdomain of a site, that would be possible. But the client (pro-bono) wants it embedded on a page that does lots of other things. Maybe there's a Javascript library we don't know about? Some other secret means of doing it? But the API (at least with available documentation) isn't working. Heck, even if you could direct us to a site where someone is using Tumblr embedded on a non-Wordpress/Tumblr website, that would be helpful. We could inspect the code.
We've got Twitter, Google Maps, and plenty of other APIs working. I swear we aren't idiots, and the answer to this isn't as easy as it appears.
THANKS!
If you want a clear example on how to use the JSON, check this link, it helped me tons:
http://janzheng.com/2013/06/tumblr_integration.html
I've pretty much set my mind on using CreateJS to create an HTML5 game, but I also came across H5CGB, a boilerplate created specifically for creating HTML5 canvas games. It looks very thorough and I believe the developer when he says it would save me heaps of time writing code I would have had to write anyway.
However, looking at tutorials for both CreateJS and H5CGB, they seem to conflict quite a bit, at least in terms of how these specific tutorials implement their respective tools:
http://hub.tutsplus.com/tutorials/learn-createjs-by-building-an-html5-pong-game--active-11845
http://icecreamyou.github.io/HTML5-Canvas-Game-Boilerplate/docs/#!/guide/walkthrough
I'm basically just trying to understand how to integrate these two systems. For example, both come with their own preloader utility, so I'm not sure which to use and if they would cause issues or if it's just a redundancy resulting in unnecessarily longer loading times.
Has anyone had any experience working with these two tools together?
I believe you should probably just stick to using createJS because the two frameworks do have a lot of overlapping functionality. It wouldn't make sense to use both.
I think you should also check out other game specific frameworks like Crafty.js and possibly watch Google I/O Canvas to get a good idea on the total range of your options!
Crafty
http://craftyjs.com/
Google I/O
http://blog.sethladd.com/2011/05/source-code-slides-and-video-for-html5.html
Hope this helps and good luck learning canvas!
Shalom
I created H5CGB. (Just found this question today via the newly-released Github traffic stats.)
The biggest two reasons to use H5CGB are:
You do not have to learn any new APIs to start developing. H5CGB provides a bunch of scaffolding you can use to skip the boring stuff, but you won't get into trouble if you want to implement any part of your app yourself, and you probably can get going immediately just by editing main.js without even reading the documentation.
The code base is intended to be boilerplate, so you can use all the utilities and scaffolding H5CGB provides as a starting point and edit it if you want things to work differently.
This is in contrast to most other canvas libraries, which tend to be monolithic black boxes of no-touchiness with sparsely documented APIs.
I've got a good amount of experience with 2D rendering on <canvas>, however there is a project coming up where I need to have a 3D object rotating left along its centre (I believe z-axis). Luckily this is all I need to achieve. The page will run on iPads at an upcoming event.
I'm not experienced with any 3D software/libraries aside from minimal playing around with Papervision 3D in Flash.
I can pick things up pretty easily, so:
Are there any frameworks I can use to take care of the initial stuff?
Are there any open-source projects that include the code to do the above? If not, tutorials to do it are fine.
How do I create the 3D object? Is this the same as a BitmapMaterial in Papervision?
Threejs can be a good library to start with too.
Their "getting started" article is awesome.
There's a GLGE, for example.
GLGE is a javascript library intended to ease the use of WebGL; which is basically a native browser javascript API giving direct access to openGL ES2, allowing for the use of hardware accelerated 2D/3D applications without having to download any plugins.
The aim of GLGE is to mask the involved nature of WebGL from the web developer, who can then spend his/her time creating richer content for the web.
Three.js is pretty awesome, just wanted to point you to this github repo as well
http://lamberta.github.com/html5-animation/ check out the examples in part 4.
Billy Lamberta authored Foundation HTML5 Animation with JavaScript, which is a great book teaching you the math/etc. behind doing things like this if you are interesting in getting a little deeper understanding.
I am having an absolute nightmare trying to build anything of value with Sencha Touch. The docs seem to describe everything in bits in pieces without every tying everything together..
One of my key gripes is that I don't understand how anything is loaded into the browser.. If I simply define an Ext.List in index.js within this method:
Ext.setup({
onReady: function() {
}
})
Then that Ext.List is loaded into the browser for some reason. If I define multiple objects in that method, how does it know which to put into the browser? Furthermore, when I extend Ext.List and put that in the above method, nothing happens. What's going on?
Better yet, where I can find good documentation that explains how this framework works? I've pored over everything on the Sencha Touch site, including the tutorials, and all of it is horribly incomplete.
It does seem confusing at first. What's important to understand is that Sencha Touch different from jQTouch or jQuery Mobile in that you create your interface in a completely programmatic way, os there's no defining the UI in a HTML file or anything like it. The framework is written much more in the tradition of classic widget set's, QT for example. This style isn't something traditional web developers are used to, but I'd actually say the documentation is quite complete. It's just not written in a style familiar to web developers.
This is how it works: one component needs to have an attribute fullscreen: true set on it. This component becomes the root, and all other visible UI components are added to this component using the .add() method. But there all defined in Javascript. That's the most crucial thing to remember.
You have probably already found it, but the main documentation repository is the API documentation (here). If you're going to get anywhere you will have to get used to reading stuff from here quite a lot. Important facts here is that everything in the UI inherits from the Component class, and that Panel is probably
When I was getting started, I found this page a little bit better for starting. I especially recommend Drew Neil's excellent screen casts on panels.
I think this has a lot to do with the fact that Sencha Touch is still a young library, and that it has it's roots in the highly programmatic and OO-centric Ext.js framework. Taking some time to really learn the fundamentals of Ext.js probably helps a lot in the long run when trying to get going with Sencha Touch (tip: Observable is the most important class).
So sorry, you're right that the documentation isn't very friendly. But the UI you get from Sencha Touch still blows the competition out of the water when it comes to mobile interfaces, so I'd say that it's still worth it if you're really want the most slick mobile UI there is.
I recommend you to checkout the conference videos http://www.sencha.com/conference/videos specially the "Structuring Your Sencha Touch Application", I restarted an app from scratch following the MVC pattern explained in the video, in two days I got where I was before plus a ton of fixed bugs but most importantly now I really understand what I'm doing and why it was so hard to get things to work before using this standard pattern.
I found one of the best places to learn sencha touch is this 4 part series on building a simple SenchaTouch1.0 app :-
http://miamicoder.com/2011/writing-a-sencha-touch-application-part-1/
Follow it up with the MVC example :
http://miamicoder.com/2011/writing-a-sencha-touch-mvc-application/
Having completed the above tutorials gives you the comfort and confidence to approach SenchaTouch's own documentation, tutorials and screencasts.
As I was working on this project for a friend of mine who is terrified of changing from HTML to flash, I realized that maybe there could be a bridge between them. So I started working on a flash project that would grab the HTML from his page and parse it to display it in flash. Although I am sure there are resources available for this already, I figured that the experts on SO might be willing to suffer through the logic of one user trying to develop this script.
So basically, I am not asking for an answer, I am asking for some step-by-step direction that could be posted so other people could see the logic behind breaking down this project. I think it would be really useful (not just for me, but for anyone wanting to learn more about objects and oop).
So, much like the thread between primarily Senocular and Rampage, this would be a thread where I would be the student asking the questions in a logical step-by-step manner and someone else (or someones else) could provide guidance.
Let me know if you are interested and I can start by posting what I have already written. We can go from there and I am sure it will prove insightful to anyone who reads it. If no one is interested, or no one has the time or inclination, no problem.
Best wishes,
Jase
Who in their right mind would change from html to flash for displaying a simple website? I don't see the logic behind it, it's more like you are trying too hard. Flash has its function in the web, as well as html does. If it's just for simple displaying, using flash is just the wrong way and won't make your website any better but worse because its loading time will be too long.
Goole Search retrieved these:
HTMLWrapper
Groe.org HTMLParser
There is an article about the 1st on *drawlogic. I think the seconds' home is on sourceforge here.
Thing is, browsers already do a fine job at parsing html code. Having the flash player parse html files not only does away with any accessibility advantage your markup can offer but it also feels like reinventing the wheel. If you need to display html content, leave it to the browser.
Slightly offtopic - Flashpaper can convert most HTML pages into swf format.
Given properly "disciplined" HTML, you can use the XML parser in the player for the basic parsing. Are you really talking about writing an HTML renderer in Flash though? Or just being able to pull information from HTML dynamically?