5 Replies - 543 Views - Last Post: 24 October 2013 - 02:22 AM

#1 bensdb  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 22-October 13

Timeline/circles/quotes web project

Posted 23 October 2013 - 01:50 AM

Hello-

I am currently in the process of starting a new project with little or no experience of coding. I have a good grasp of HTML & CSS, and I recently started trying to learn PHP (although still basic). Javascript knowledge is pretty much non existent at this stage. (I know basically how variables are used in programming etc., but specific javascript language is non existent.)

I need to develop the following project, and I am looking for some advice/pointers as to similar things which might help me bodge together this project from many different sources. Your advice as to the limitations of Java, and as to whether it would be a suitable programming language for this project, would also be appreciated.

I'm trying to create a Timeline. It will be apportioned into months, going from left to right. So September>October>November etc. spanning the page. Ideally as the user holds their mouse to the left, it will scroll across slowly back though the months. It will be an info-graphic of key achievements each month over the course of time.

Within each month block (which might be approximately 700x700 pixels- (not important exactly how big)) there will be lots of circles with short snappy quotes or sentences within. So approximately 10-20 circles of varying size and colour in each month block, each with a different short sentence or quote within.

I need to develop a admin user input box(preferably built into a page on my website) in which the admin can enter two bits of information. 1. The sentence/quote (of varying length 5-200 characters approx) 2. The relative importance of the sentence/quote (Between 1 & 10). After hitting enter a circle would be randomly generated and added to the timeline in the correct month.

The circles should be randomly generated with a random choice of 1 of 4 different colour choices. When the administrator enters the text to be added, the admin also assign's a number between 1 & 10 which relates to the importance of the sentence/quote. This number will directly determine the size of the generated circle. So a circle with importance=10 would be say 100px in diameter, where as a circle with importance equal to 1 would have a diameter of 20px (for example). The sentence/quote that the admin has added for this input would then be automatically resized to fit within this size of circle comfortably.

Finally this new circle which has been generated would be added to the timeline in the appropriate month, at a date specific distance along the timeline, but with a degree of randomness in terms of its placement on the vertical axis, in order to look nice (not completely uniform spacing).

Any clues/advice or help as to how to tackle this project would be greatly appreciated.

I was wondering if there was a way to integrate the functionality of this jquery plugin within my code: http://freqdec.github.io/slabText/ Just maybe with a different font.

Thanks guys

Is This A Good Question/Topic? 0
  • +

Replies To: Timeline/circles/quotes web project

#2 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 3559
  • View blog
  • Posts: 10,350
  • Joined: 08-June 10

Re: Timeline/circles/quotes web project

Posted 23 October 2013 - 02:41 AM

since your experience with programming languages is pretty low atm, don’t do this project. it’s much too big for your level of experience. start with something small so that you learn step by step how to use the languages.
Was This Post Helpful? 0
  • +
  • -

#3 bensdb  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 22-October 13

Re: Timeline/circles/quotes web project

Posted 23 October 2013 - 05:54 AM

it has to be done I'm afraid.

I have just completed reading through a comprehensive guide to javascript, so I reckon I can read javascript fairly well now, but actually writing code from scratch would still be difficult.

I will have to copy/paste snippets of code I find online to make it work (this is actually how I learnt CSS & HTML and am now fluent in both languages).

So any pointers as to code snippets that you think fit into this project, or general help/suggestions would be appreciated.

thanks
Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 3559
  • View blog
  • Posts: 10,350
  • Joined: 08-June 10

Re: Timeline/circles/quotes web project

Posted 23 October 2013 - 06:06 AM

View Postbensdb, on 23 October 2013 - 02:54 PM, said:

I have just completed reading through a comprehensive guide to javascript, so I reckon I can read javascript fairly well now, but actually writing code from scratch would still be difficult.

Did it contain all of the following concepts?
- Closures
- asynchronous code execution
- callback functions
- Scope & context change
- prototypal inheritance
- data types


View Postbensdb, on 23 October 2013 - 02:54 PM, said:

I will have to copy/paste snippets of code I find online to make it work (this is actually how I learnt CSS & HTML and am now fluent in both languages).

bear in mind that Java­Script is a programming language, not a markup language like HTML. without understanding what a code snippet does, you may later run in almost impossible to solve problems.


View Postbensdb, on 23 October 2013 - 02:54 PM, said:

So any pointers as to code snippets that you think fit into this project, or general help/suggestions would be appreciated.

if you like to test yourself, can you explain what the following statement means?

"In Node.js, everything runs in parallel, except your code."


(admittedly not a pure Java­Script question, but definitely at the level of your project)
Was This Post Helpful? 0
  • +
  • -

#5 bensdb  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 22-October 13

Re: Timeline/circles/quotes web project

Posted 24 October 2013 - 02:00 AM

Hi Dormilich-

Thanks for your reply.

Obviously in reading a Comprehensive Javascript Guide, I am not proclaiming to be an expert, or even someone who is remotely capable of writing this program at this stage. I appreciate your candor, however I am aware of the potential scale and difficulty of this project.

Whilst I don't have a grasp on the practical outworking of all of the concepts you have listed, I am keen to learn and would like to take this project as an opportunity to learn. It's final success is not incredibly important.

I appreciated that you are trying to help me see the scale of the project but could you instead point me towards similar ideas/projects that you have come across that might give me opportunity to learn, in studying them.

I am also open to scaling down this project into smaller modules, and tackling them, again as a learning process, so if you could help me rather than point out what I can't do that would be really helpful :) (I don't mean this in a aggressive way!).

As far as I can gather Node is a solution for creating scalable network application's, and run's non-blocking I/O. Your question relates to the fact that the code used to write a Node script in itself is blocking, apart from any I/O code that we write in Node, which would be non-blocking. So the Input/Output processes run in parallel, whilst the code itself is procedural. This is not information I was aware of though. Google helped me understand Node's basic useage/functionality. As for the other function's I am only now aware of what they are through google. I have to be honest! However I have learnt something so thanks.

Again I DO appreciate you taking time to point out what is involved in a project of this size. Some direction or pointers to similar projects, or projects with similar elements would be really appreciated. I do intend to commit a significant amount of time and energy to learn javascript, as I am somewhat limited in my web design without it. Currently in the process of learning php aswell. I pick up concepts and ideas very easily.

Thanks again guys,

Ben
Was This Post Helpful? 0
  • +
  • -

#6 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 3559
  • View blog
  • Posts: 10,350
  • Joined: 08-June 10

Re: Timeline/circles/quotes web project

Posted 24 October 2013 - 02:22 AM

Quote

I am also open to scaling down this project into smaller modules, and tackling them, again as a learning process, so if you could help me rather than point out what I can't do that would be really helpful

parts that could help ... what I can think of
- look at GitHub’s Network timeline, that looks relatively similar
- implement an AJAX driven timeline, only that you jump between months by clicking buttons (so that you can concentrate on the AJAX and result display (using fixed size circles). once you get the simplified version working, extending it to the scrolling effect is much easier, as you know that the AJAX part is already working)
- for the circle administration, do a static HTML page, so you can concentrate on the server-side code. once that is working -> combine with AJAX
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1