I'm pretty new to Web Development and am beginning to fool around looking at different 'features' websites have. I have recently come across the StarCraft remastered page and halfway down the page they have a "window" in which you man slide a slider back and forth seeing the old graphics and the new graphics of a scene. I think this is really neat and am wondering if I can find the source code of how they achieve this effect. Here is the image of the described "window".
Also, as a side note, is it unethical to try to recreate a features I find on other sites? I'm really new to this and I don't know what is okay and what is not and I don't think I would be able to create that feature myself without seeing how they acheived it.
Not unethical at all, this is how web developers learn new stuff. In general, the developer tools of your browser should become your best friend.
Regarding the example that you provided, essentially this can be achieved with a ui control that is commonly called "divider" or "split panel". And you can find a lot of plugins that provide such functionality (ex split.js). With this, and a bit of css for styling, you can achieve the same effect as the one you liked in starcraft page.
On any modern browser of choice, right click your mouse on the image, then click 'Inspect', 'Inspect Element' or some variant thereof depending on browser and version. I'm using the most recent version of Chrome which is just 'Inspect'.
This will open your developer tools to get a deeper look into the front-end of a website or web application.
Related
As many before me, I now face the greatest challenge any web dev/designer must encounter: creating a personal portfolio. If you're a perfectionist like me, then you know how difficult it is to find satisfaction in any one idea, especially when that idea is meant as a direct reflection upon your talent, skills, and overall ability. Making a website for a client: No problem. Making a website for yourself: Battle of the Century.
My previous personal portfolio websites were always basic, in that they used many of the common elements one might find in a typical web portfolio. A little jQuery Isotopes here, a little Scroll.js there, wrap it up behind Foundations framework for responsive design. Boom. Instopresto, you've got a portfolio...one that looks and feels like everyone elses.
Now I'm not trying to reinvent the wheel. A portfolio should accomplish what it is meant to do, display ones previous experience/work and encapsulate ones overall "ability" or skill level.
For this round I really wanted to go with a full width video background. The other design elements are easy to pull off. Give the site an offset menu, perhaps go with a onepage minimalistic design, or use Ajax for page/content navigation.
I keep having trouble with the video background. It's the limitations we face with HTML5 video and how it displays on mobile device. Forcing or tricking a user into having to press a play button is one extra step that kills the idea, and using an image as a fallback defeats the awesomeness of using a video in the first place.
There is an alternative though. Using Three.js and taking advantage of the technology offered in machines today via graphics rendering, let's create an animation for use as a full width background. It's cross browser compatible and works well on tablets and mobile devices.
My question is to those with heavy Javascript or python experience and those who have utilized three.js before. I typically use Cinema4D for animation as it provides a fluid and seamless workflow between itself and After Effects. I've already created a 3D element, given it animation, and created a camera to capture it all.
How can one export from Cinema4D for WebGL use and Three.js. Most tutorials/information on the web is extremely outdated. Even a viable workflow from C4D to Blender to WebGL would work for me if only someone who understands the process could explain it.
Here are a few examples that have fueled the inspiration behind this project:
http://mrdoob.com/lab/javascript/threejs/css3d/periodictable/ - Built using CSS3 for the overall functinality, this is AWESOME and really what I am going for in replicating aesthically.
http://blogs.truthlabs.com/2013/11/12/illustrator-webgl-workflow-tips/ - This tutorial is fantastic, but being based out of Blender I am in no mans land. For a simple solution, this works fine. Creating in C4D would take no time at all, its how to get it to WebGL.
Thank you for any advice and taking the time to read through this post.
-Cheers,
Branden Dane
I'm working on a web app that I want to operate more like a standard OS app. It is similar in layout to iTunes where I have a top header, a menubar beneath it, and then a left-sidebar and a main content area. The goal is that everything stays where it's at on the screen and only the main section scrolls (because it has a grid/table of content).
I can accomplish this by using absolute positioning, adding overflows, specifying top/left/top/bottom, and automatic scrolling when applicable. However, I'm not sure this is the best approach. I did some research here on SO and the web and didn't find a conclusive answer.
I know it works, but is it a valid or acceptable approach? My goal is to get it working but working using proper standards and acceptable approaches.
I could use a Javascript framework that accomplishes this as well (extjs, some jquery libraries, etc) but I think they do the same thing, they just do it dynamically at page load instead of specifying it up front.
CSS has pretty lousy support for web application-style UI layout. There are promising specifications on the way, like css3-grids and css3-flexbox. But the browser support is lacking, especially the css3-grid.
When I implement a web app today, position: absolute, seems like the least worst option. It's flexible enough and meets most of the requirements.
There is a good blog post that talks more about this: http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/
Honestly, if it works it works, if it doesn't it doesn't. Standards, best practices, etc. are great and all, but only inasmuch as they help you to accomplish the actual goal. An app that's done the "wrong way" but is up-and-running is infinitely better than the "properly" built app that will be built eventually, once everybody's figured out what exactly the proper way is. That said, it sounds like your approach makes complete sense.
Let me start by saying I have read plenty of questions and blog posts relating to the use of combinations of backbone/jQuery mobile and comparisons of backbone/Sencha, and have actually had my head in this space for some time but still haven't found quite what I'm looking for.
I'm very familiar with Sencha and have used it for wrapped (phonegap etc.) apps in the past, and I really like it. However for a smaller code base for web projects and more control over browser compatibility and various other reasons it's not quite appropriate for certain tasks.
When I start trying to engineer mobile (but also desktop and tablet) backbone webapps from scratch I find I miss three key things
General mobile 'init', filling the screen etc. (although this is the easiest to replicate)
Tabbed, iOS-style, navigation (of course I can roll my own, but it seems silly)
Scrolling - both scrolling a piece of content, but especially the carousel and how the carousel is linked to the tabbed interface
I'm not massively bothered about mimicking each device's native OS style throughout the app, and in fact would prefer to (whilst following some sensible conventions) make them look a bit different.
Ember has flame and I've used that before, that's kind of the thing I'm looking for.
I know I can build up a toolkit of jQuery mobile, custom script, jQ plugins/iSroll, CSS libraries, backbone UI etc. and do like the idea of compiling my own 'stack' but for some reason it just doesn't feel right.
So, to bring this back around to more of an actual question. I guess I'm looking for ideally a single project that isn't specifically linked to a library - and in theory could run on it's own on a statically coded page if needs be (even though that wouldn't be the case for me now). Or perhaps some words from others who have been on a similar journey and perhaps ended up on the mix of libraries I mentioned earlier with why they decided this was the best solution.
I'm not looking to do anything too crazy, say something a bit like the old sencha oreilly example but using some carousels, and I'd cover the multiple devices and browsers with a mix of Responsive CSS and a bit of JS.
I'm going to continue looking at this myself too and report back if I find anything interesting
Cheers
EDIT
While looking into this, I realised its only really the carousel and scrolling that I really wanted from Sencha. I noticed that Cubiq has a nice slideview component that handles the carousel very neatly and with a small footprint. I found a stackoverflow answer about using this with the original iscroll for vertical scrolling. See my answer below for successfully using the two together
How to use iScroll4 with SwipeView?
This would need some tweaking to work appropriately on desktop. and I'd like to control it from a tabbed UI too. Anyway, I'm not near answering my own question but given this has had a couple of upvotes I'd post some of my thinking.
Quick edit
You can attach events for tabs to the slideview https://dl.dropbox.com/u/81328343/scroll/1.html but at the moment, it only animates for next/prev and not direct page (tab) access
Webix
Very big library of components.
I've used Twitter Boostrap with Backbone...
http://twitter.github.com/bootstrap/
I am trying to find some example code using a javascript library for a force directed graph in which the user can move any node around (and the graph responds dynamically) - but then each node can be clickable and open an "node detail" page (in a different tab).
I looked through D3.js, arbor.js, jit (javascript infoviz toolkit), springy. Those all look great and have demos which are close to what I want, but not quite there.
I'm not an experienced js programmer, I mostly do server side stuff.
My fear is that I might try to learn one of these libraries to try and implement my use-case only to find that it won't work for some reason. For example, one of these (D3) has a discussion in its forum that clicking a node is often mistaken for moving the node and there didn't seem to be a quick workaround. In another one (arbor.js), the front page (in addition to being minified) shows something close to what I want but the nodes which are movable are not clickable and the nodes which are clickable are not movable.
FF or Chrome is fine - I don't need IE support.
I am also open to something Flash based - as long as I don't need to compile anything in Actionscript/Flash - something with a js/html API.
Thanks.
I think that's a pretty good list of tools you have. Protovis?
I suspect it's actually not going to be much work to grab a click event from any JS-based tool-- but I haven't done that specifically with any of the ones you mention.
A couple years ago I did a prototype project using a pure Javascript implementation. Everything is just DOM nodes, so you can definitely grab clicks as necessary. It's fine, but since the code is not actively maintained (as far as I could find), I did have to do quite a bit to fit it to my needs. Using something with more recent and active development is a good idea. I also learned that performance was going to be an issue, especially in Firefox. You can play with my prototype and see where it breaks down-- which it does. I think 100 nodes or so is the danger point.
Good luck!
If you access your mobile me account online with Safari, you can select an icon and login directly to selected service, great feature btw.
But if you access the same page using other browser like firefox or Chrome, you will see a gorgeous login page with a big, no huge cloud in the middle (the MobileMe logo) and interesting lighballs comming out of it.
Here's the link:
https://auth.me.com/authenticate?service=mail&ssoNamespace=appleid&formID=loginForm&returnURL=aHR0cHM6Ly9tZS5jb20vbWFpbC8=
And the greatest thing is that you can mouse over those little light balls and they follow your mouse movement.
Its just beautiful and i have never seen anything like that in Javascript. And i couldnt understand by looking at their code, how they did it. Of course their javascript is compressed so i couldn't look at it, but in the markup those shiny lights are just a bunch of canvas tags.
Does any one have an idea of how to make something like that? Its probably way beyond my javascript skills but it would be great to add such an effect to one of my projects.
Thanks in advance for all your suggestions ;)
that takes a lot of skills. I believe its achievable with processing.js
http://processingjs.org/
Take a look at this [quote]:
So, how is this eye candy accomplished? Through over 6000 lines of
(unminified) JS. MobileMe usually uses SproutCore for its
applications, but after looking through the source code, I didn’t find
a single reference to it. There did appear to be some resemblance of
a library being used in the login page, however, but I think it is
pretty custom. There appeared to be a class for each of the visual
components on the screen, at least one if not two separate animation
libraries (one 2d and one 3d), a particle rendering library, and
libraries for dealing with canvas drawing and DOM manipulation.
So it looks like it was custom made. You can read more here: http://badassjs.com/post/1649735994/the-new-mobileme-login-page-has-some-badass-js
I hope this helps.