I am developing a web page that uses d3.js library for a animated undirected graph visual, but I discovered that (after lots of work done) it works so freezing on mobile.
Do you know any solution for such problem, or do I need to change my way of creating the visual? For example is using html5 canvas more elegant solution for the problem?
Thanks for the answers folks :)
Related
I'm investigating about the different ways of building a website with parallax animations. I've seen a lot of plug-ins and libraries (ScrollMagic, Greensock, etc.), but I would like to know which way have this webpage used. I've been diving into the source code, but I don't see any linked script that shows me the way this effect was done in this website.
Could anyone help?
Thank you a lot!
Been looking into responsive web design lately, and to practice I've made a very simple "application" which adapts to the screen size of the browser. Everything works as expected, but now I'd like to spice up the interface.
My intention is to create a logo and perhaps some icons too. I've downloaded GIMP and I was thinking of using it. Then it struck me, is that the proper way to proceed?
Is GIMP a good choice? Or, could that be achieved with the functions in HTML5, like canvas and stuff like that. Or how do you normally do and with what tools?
I'm not quite sure how to proceed.
Thanks!
i recommend you using EaselJS , i hope you enjoy working with it, however normal graphics that you want ever be accessible for wide range of your visitors should be designed and saved as popular graphic formats such as PNG , JPEG and GIF.also gimp is a good lovely tool.
Is there a way to embed Sketchup models on a website? Preferably a free one, if it's a commercial solution I'd like a confirmation that it's actually worth the money... I know about the 3D warehouse thingy where you can rotate it (javascript and some images), but I can't upload anything to the 3D warehouse 'cause it always "resets the connection".
You can try the upcoming WebGL Functions in modern Browsers. There are some Javascript Libraries that can read model files and show them within your (HTML 5?) website. I have not used them yet, but try these links if this sounds interesting:
https://github.com/mrdoob/three.js/
https://github.com/timjb/sketchup-threejs/
I made a patch of an example game in three.js. Added ColladaLoader and Sketchup model + Third Person Shooter controls:
https://github.com/irony/Nemesis
Try it out (Works best in Chrome)
http://peaceful-woodland-4410.herokuapp.com/index.html
You can use http://sketchfab.com, they even have a SketchUp exporter.
Yes, you can do it without cost. See here: https://help.sketchup.com/en/article/3000258
EDIT:
There were some free rendering sites apart from Google, but they don't seem to be in operation anymore. Posting to the Google 3D warehouse is going to be your best bet. Regarding your problem posting there, try it with Chrome.
EDIT #2:
If you don't want to upload to Google 3D Warehouse, you can achieve a similar effect with a little work. 3D Warehouse doesn't actually give the visitor the power to manipulate something in 3D, but rather it lets them "rotate" the image horizontally by simply showing a series of preset images of the 3D from various angles. You can take shots of your 3D object, import to Photoshop and create your own gif of the spinning object. A little more work than relying on Google, so you'll have to decide if it's worth it.
EDIT #3: If all else fails you can simply post the 3D model on your site as a downloadable file and advise visitors to get Sketchup to view it.
I have implemented UI controls using JavaScript, CSS and HTML (and SVG). I know that browser support for SVG as background-image is poor, but that does not concern me as the project is not going to launch anytime soon.
However, it feels painful to do things like CSS sprites. It is also a lot more painful to use Illustrator than Photoshop. I am wondering that is the main benefit of vector graphics (scalability) worth this? Do you think it's a good idea to use SVG instead of raster graphics for UI controls like checkboxes, buttons and such?
It's worth it. Think about people using an app on an iPhone, then using the same app on an iPad—scalability helps a lot. The most difficult thing is learning the tools necessary to producing the vector graphics. Illustrator isn't any harder than Photoshop, it's just different; you're learning a new paradigm for image editing/creating, as if you're jumping from Java to Haskell.
I'm trying to make some web-based board games, and I want the interface to be pannable and zoomable. Much like how in Google Maps, you can pan and zoom the map, I want the game board to be moved and zoomed. Unlike Google Maps of course, I do not want to work with image tiles.
Can anyone give me recommendations as to what technology to use? Would this be a good fit for plain HTML? HTML 5 Canvas? or SVG? Any particular JS libraries to recommend or something else entirely?
I'd like to avoid flash and Java. And browser compatibility is plus, but not the most important factor. For example, I think it would probably be OK to require Chrome Frame for older IEs.
Any ideas/advice would be appreciated.
A few thoughts:
Use the OpenLayers UI with a "fixed" strategy to load vector graphics for your board all at once. (This is overly heavy-weight, probably, but comes with pan-zoom and IE compatibility.)
Use Raphael to build your board in SVG, using RaphaelZPD for pan-zoom. RaphaelZPD isn't cross-browser (even though Raphael is), so you'd need Chrome Frame for IE compatibility. This would be pretty lightweight, I think.
Use pure SVG for your board, use SVGpan for pan-zoom. Chrome Frame required here too, though you could use SVGweb if you wanted. You could draw your boards right in Inkscape, clean up the SVG's and add whatever ID's you need in the XML (SVG is XML under the hood), and interact with the board with jQuerySVG if you like, or script interaction by hand. Did I mention that CSS works with SVG? I think this is your best bet.
I can't think of an advantage to using Canvas here, unless you had lots of animation or bitmaps. SVG is far more transparent in how it works - it's XML under the hood, and when rendered in a page, becomes DOM nodes you can easily manipulate in modern browsers.
Plain HTML would probably be hard to handle scaling with. I've seen plenty of image scalers, but haven't seen complex HTML structures, and complexity would be compounded by needing to pan at a zoomed level.
If you want total control of your development environment you could create your own web rendering plataform. I think you can use HTML canvas 5 as your interface with the browser.
You can easily implement drag, pan and zoom using HTML canvas. This approach is very similar with game development in many plataforms. Here an example of using HTML canvas 5 for an interface that supports pan, drag, and zoom.
Having the control of your environment you will have a wide range of possibilities.
If you don't mind tiles, I'd suggest checking out Polymaps "A JavaScript library for image- and vector-tiled maps using SVG". It's probably possible to borrow some parts from there for panning and zooming.