showing interactive visualizations on personal website - javascript

I have several interactive/animated visualization projects (social network analysis, animated GIS, etc) that I would like to showcase in my website. I would love to build a website like this one https://kateto.net/network-visualization (see 6.2 Interactive JS visualization with visNetwork). Does anyone know where should I start?
Very limited experience with HTML coding and website building so would love to use some website builder tools such as Squarespace or wix, etc. Of course they need to be friendly with a lot of javascript/widgets. Will appreciate your recommendation!

In the same website example you provided, they explained that they are using visNetwork (the r package) & vis.js (used for the visualization).
I highly doubt that website builders such as wix/squarespare/etc would be able to import said libs.
I would recommend just learning web development and make a personal site for your showcase. It'd be a lengthy process however in the long run it'll be worth it.

Related

css or javascript framework used by websites

How to know which css and javascript framework is used by a website.
Does websites hide it.
Could not get any information on framework on checking the page source of website or web developer tool
A website http://builtwith.com/ should give an answer to your questions - it'll also give you a good overview of statistics and usage.
Besides, using the tool you can explore more interesting and useful information about technologies, tools and frameworks that are being used.

Basic dojo 1.7 simple web application with an elegant infrastructure (e.g dojo boilerplate)

I have come accross an sample application with dojo 1.5, but it's not really what I want to achieve : it is not modular at all. I want to make use of the amd, and various design patterns (like MVC) to have a very organize application. Unfortunately, the dojo community and "example" are not quite visible or present (compare to Jquery). There's a lot of cool tutorials on various implementation of specific dojo features, but none that's explain the very basic on how to create a simple (but at the same time, complex) squeleton for a dojo project. I came across the dojo boilerplate project on github, and tried to start from there, but I find it really hard (as a beginner) to implement such trivial things such as an login or basic interface (and separate all that by module, event handling, data, etc.). I just don't want to make a dojo application by using only an index.html and one javascript file, I could do it, but for maintenance and adding stuff, it will just be a complete mess. With this post, I hope to gain some information on this specific subject and perhaps create a tutorial for dojo on how to start up a real web application. For example, applying the mvc pattern, I think a good application tutorial should have a login example (authentification) and a basic modular interface (like some kind of main container, and on various events, the container ui change for instance with different widget). I'll be working on something on github and posting up when I'm done. If your done before go ahead ;)
thank you.
There is TodoMVC at GitHub:
a project which offers the same Todo application implemented using MV*
concepts in most of the popular JavaScript MV* frameworks of today.
It employs dojox.mvc #PEM mentioned. It's not a typical way of building Dojo applications as dojox.mvc was released just on May 16th, 2011, but it is worth looking at. There is also live demo and tutorial Creating Todo MVC in Dojo:
Overview
Part 1: Models
Part 2: Views
Part 3: Controllers
Also have a look at the source code of Dojo Web Builder (+ article Introducing the New Dojo Web Builder).
Last but not least is Maqetta (sources at GitHub), the most complex Dojo application one can find. Look esp. in maqetta.core.client/WebContent/ directory.
Maybe you have not searched enough?
Dojo MVC :
http://livedocs.dojotoolkit.org/dojox/mvc
http://dojotoolkit.org/documentation/tutorials/1.7/data_modeling/
I just don't want to make a dojo application by using only an index.html and one javascript file
But that's basically what Dojo is for and good at...
If you just want to make cute animation on a plain old html website, rather go for jquery, it's sexier.
Now if you want to do a "real web application" then dojo is the right framework. But you'll also have to learn how to use it.
There are a couple issues with building a sample application tutorial.
First, a sample application with what you have described will need a web server to communicate with. Dojo is web server agnostic, so what technology do you choose to for the sample application? Secondly, a server is now required to make the demo available online, or the person interested in looking at the demo would need to install the web server. As simple as this sounds, it is a barrier and prevents a more novice person from continuing.
Second, even with a web server there are many ways to build/architect a web application.
I think a good application tutorial should have a login example
(authentification) and a basic modular interface (like some kind of
main container, and on various events, the container ui change for
instance with different widget)
From what you have posted, it reads like you are looking for a single page application. There are downsides to single page apps (such as SEO) and creating a sample single page application needs to make it clear to the developer what the downsides of using the sample are. It's not the magic bullet for all Dojo/Web applications.
I have a project up on Github and it certainly isn't ready for primetime, but you can take a look. This is a Single Page Application that uses Java/Spring for the backend server. I am a couple days away from checking in the Spring Pet Clinic example which will demonstrate some of the functionality. I also need to update the wiki to describe how to create a sample application.
https://github.com/cswing/evinceframework
Also, I use the theme tester often to take a look at different widgets. Not entirely what you are looking for, but some who get to this question may find the link useful.
http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/themes/themeTester.html

Client-side only web applications

I am seeing more and more applications that seem as though they are entirely written in JavaScript see (https://chrome.google.com/webstore/) for an example and view the source. As you will see there is no source code except a call to a series of JS files. The app works as though it's still a website though and seems to use the HTML5 history API to alter the address on the fly.
Anyone know much about this sort of technology/design patterns, know some good starting points or examples of their own? I have seen things like Sproutcore and Cappuccino but they seem very different to the way in which the Chrome web store has been built.
I'm looking to use it with frameworks like ASP.NET MVC 3 and CakePHP.
Alot of Googles projects are developed with Google Web Toolkit. It's a framework for building Javascript apps in Java.
http://code.google.com/webtoolkit/

Pure JavaScript-based clients

I would like to know, how powerful/viable are JavaScript only clients based on say, GWT/gxt/vaadin, when compared to DHTML clients such as those made with wicket, tapestry, click etc?
My boss has insisted on using GXT (due to its nice colors and theme) on a project that will most likely become very big with lots of screens. I am against the idea of a javascript only client, especially when the javascript is generated from Java code. I have tried to advice him that we use something like wicket whereby we construct the screens with html but put in ajax where and when neccessary.
How viable is such a JavaScript client? I understand that JavaScript was intended for minor web page enhancements, and not all browsers, especially mobile devices have complete support for JavaScript.
Yes, it is viable for certain applications. Consider Gmail, Google Docs and Google Maps as typical applications where this works, and is probably the most feasible approach.
Some rich UI JavaScript frameworks, such as Ext JS also rely on this technique.
I've built javascript only web apps for ages.
First in SAP projects for big multinationals. And now on a new project:https://beebole-apps.com?demo
So yes it is powerful and viable.
Javascript-only webapp can be extremely powerful, and it's viable for certain applications, say, an Instant-Messenger webapp?
You mentioned that there are lots of screens in your web-app. One of the advantages from GWT/GXT is the fact that you can unit test your UI-layer with JUnit. This is an extra testing you can do on top of, say, Selenium. This is essential if you'd like to make UI testing a part of the continuous integration process, and, as the team grows, you'll definitely want to have tests around to make sure everything works (At least in theory.)
However, if what your boss meant to do is to build an in-house, custom Javascript engine using GWT's JavaScript Native Interface (Link), then I'm not sure...
Another advantage with GWT-like-engine over Wicket is that you can rely on HTML-code-gen to generate standard-compliant (In theory) HTML code. With framework like Wicket, it is hard to ensure every single developer on the team to author good HTML code - Especially when the team gets bigger.
Disclaimer: I'm a member of the Vaadin team.
Our Timeline demo is a good example of what can be achieved with Vaadin and GWT in client side, but I think all of the options presented in this discussions are viable given enough time.
Since you are going to start a big project you should build a simple proof-of-concept app with each of the relevant frameworks. If your PoC includes at least some of the more complex use cases you'll probably can make a pretty informed choice based on the experiences you get while building them.
I urge you to at least evaluate Vaadin. With it you write only server-side Java code and Vaadin will create a slick and professional browser UI for you. Client side can be easily extended using standard GWT (also pure Java), and there are no HTML templates, tag libraries or XML configuration involved at all. A Vaadin UI is fully Ajax'ed and lazy loading out of the box, and it easily integrates with any server side technologies, eg. Spring.
In addition to the development model advantages you get top-notch documentation, a bi-weekly update schedule, a very lively community filled with helpful experts, 100+ useful open source add-ons, and a 10 year old backing company with help on hand should you need it.

Adobe Air Questions/Resources

I recently became quite interested in developing an adobe air application, and just had a few questions that maybe some more experienced air developers could answer.
Firstly, what is the average time-frame required for an air project. Mainly I'm planning a somewhat ambitious project of porting a specific forum framework over to an air app. How long would you estimate this would take me to do personally? I want something more than just the standard browser inside an app, more along the lines of built in controls/features for all the standard functionality.
Secondly, can apps be done completely with javascript/html/xml? I'm quite proficient with these 3 technologies, but have no real experience with flex/flash. This includes making the chrome as well. Do specific features require specific languages to be involved?
Finally, any good books/articles you would recommend? Preferably more advanced books/resources that lay the groundwork for making professional quality applications.
Any additional tips or insights on what you think may be useful are very much welcomed.
Start reading Adobe AIR for AJAX Developers, particularly the Getting Started section
Without knowing your skill level how would we know how long it will take you personally?
I have built and released apps in one week in my spare time, doesn't mean your project or your skillset for this project will be comparable.
Adobe Air development is fast and easy in general.
Don't reinvent the wheel making button and menu classes, leverage what's already out there.
Take a look at MadComponents: http://code.google.com/p/mad-components/ for UI
Other than that there are several robust tweening and graphics libraries out there.
There's also stage3d and frameworks to support 2d and 3d development for almost near native performance.
You can find a python script that will do it here:
http://code.google.com/p/flashcommand/
More info here:
http://www.mikechambers.com/blog/2008/05/02/flashcommand-for-os-x-updated-to-work-with-flash-cs3/
Basically, this just uses the JSFL API in Flash Pro to automate the compilation from the command line. However, it requires that Flash Pro be installed (and the script will launch it).
There is no a way to compile FLAs without using Flash Pro.
mike chambers

Categories