Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Mirkat B
6,353 PointsHas anyone seen Google today?
The scrolling city scene and the lights changing to music; what languages did they do that in?
Also what kind of career/job title does those kind of things?
4 Answers
Jason D'Angelo
6,592 PointsLooking at the source code with Firefox, it looks like the site is done with HTML5. That video/music box is done with a <canvas> Element. Probably done by a "Front end developer" or "Web designer". Google also uses Python as their back end language I believe.
Mirkat B
6,353 PointsThanks so much Jason!
Would the video/music be done with Javascript? Do front end developers do animated stuff like that too?
Jason D'Angelo
6,592 PointsI believe it is done with JavaScript. Yes, It is most likely the Front end developer who would handle something like this. Of course I am basing this on my limited knowledge, maybe someone with more experience can correct me if i am wrong.
Kevin Korte
28,148 PointsI too looked at the source code, this is what I saw.
The animation window is a canvas element which is HTML 5 (no surprise there).
There are some inline CSS used to set a background image for the canvas and position it, among some other things.
There is a javascript script in there that loads another javascript file when you click on play, it also gives the magnifying glass it's anchor URL and controls the volume indicator.
When you click play, it starts another javascript file that animates the canvas. It also starts playing the music that Google was smart enough to preload the audio files. They use the <audio> tags, and inside of there they link in both an MP3 and a OGG audio file.
The javascript source that does the animation is huge, but inside of it you can see words like
ROWBOAT1_BOAT:47,ROWBOAT1_BODY:48,ROWBOAT1_FOREARM1:49,ROWBOAT1_FOREARM2:50
STEAMBOAT_WINDOWS7:72,STEAMBOAT:73,TWINKLE:74,WAVE:75,WINDMILL_BASE:76,WINDMILL_FAN_OFF:77,WINDMILL_FAN_ON:78
and a bunch of variable, numbers, timing effects etc.
So to answer your question,
1)The animation was done in javascript 2)They styling done in CSS 3)Javascript loaded the music, but it's a basic music file, one that you could play on your computer if you had the file. 4)HTML5 markup
This would be the work of a front end developer. I couldn't remotely even try to duplicate this.
Mirkat B
6,353 PointsThank you guys so much :D I'm just learning code, finished html and starting CSS today, so deciphering what belonged to which language on the source code seemed impossible.
I love this kind of thing. Do web development firms hire people to do stuff like this or do you have to work for a big corporation like Google? Can you specialize in web animation or is that too narrow of a field? If it were possible I would LOVE it :P
Kevin Korte
28,148 PointsMy degree is in product design, and so how that world works is very similar to how web design works. As a product designer or web designer, you can obviously work for yourself either as an entrepreneur or as freelance. You can also work for a company, in one of two options.
Big companies like Google, Facebook, etc will have in-house design teams. Google employees, google design or developers created that little animation you are talking about. Facebook would be the same way. They do all of the their development, app development, re-design, feature rollout etc in-house; they have hired their own team of designers.
In the product design world, Nike would be an example as they have an in-house design team (although they outsource work too). But as a product designer you could be hired by Nike to work on Nike products. Even Amazon.com hires product designers for products like their Kindle.
The other option is to work for a web design firm. Your firm would be hired by another company to do something, like that animation. In example might be say Pepsi had a promotion coming up, they might hire a design firm to do the web work. In the product design world, that would be like a company hiring a design firm like IDEO or Frog to present them with a completed project that they could manufacture and sale.
I'd guess more people work for a firm than in-house for a company