Jump to content

Project: Replace my old HTML website with HTML5/Canvas website.


Boogle
 Share

Recommended Posts

Firstly, Hi - I have been a silent reader for a few weeks - ever since deciding to try my hand at some HTML5/Canvas development.

I am traditionally a Desktop software developer (e.g. C#.Net etc) and also server side, e.g. Perl, PHP, Databases etc.

I first started by making a few demos, then decided to replace my website with a Canvas version.

Phase 1 is complete and live, and you can view it HERE.

(Darn, just tried mobile browser and the resize isn't working atm, works OK on desktop and app, will have a look at it once kids are in bed)

Some highlights:

  • Uses socket.io to talk with a server and perform the 'Contact Us' Email send.
  • Uses a CanvasInput control to allow the canvas to directly accept Keyboard input.
  • Compiles to Cocoonjs to make a mobile app (Play store link)
  • The Mobile version uses the Cocoonjs native api to open and use the keyboard (the api has a few bugs - took ages to get it half decent - some bugs I can't work around).
  • The app resizes the Viewport bases on resolution, supported resolutions are 960x640 through to 1920x1080.
  • For mobiles, if resolution is beyond the supported resolution - the app scales to fit to ensure it remains full screen.
I chose Tululoo to help put this together, although this game maker is no longer supported by its creator - and the community is almost dead - I really like it's simplicity and it is just a Javascript wrapper - so I can add any javascript from anywhere into it and even change the 'seed' engine javascript code.

Tululoo forum post (I have also posted other examples here)/post-13629-0-01880200-1426378212.jpg

Link to comment
Share on other sites

Yeah I'm not sure really between them - I think both are not up to scratch - but the HTML5 one is a little rough! mainly because I am not an artist and it needs to be designed properly - plus i have used free art.

 

It would most likely be best to have it as part of a showcase - but I don't yet have enough to put a showcase together.

 


What are your reasons for preferring the older one? Prefer how it looks?

Link to comment
Share on other sites

True.

I've now also worked out that mobile browsers display much less than resolution of phone. This is not a problem for my app as it scales, but the browser version doesn't scale anymore. I actually intentionally removed that ability once I put in the resize viewport code.

Now to have it work how I intended I have to ensure my design allows for the Viewport to resize all the way down to 480x320. Even though most mobiles have much higher resolutions the browser is fixed to a much lower resolution.

Your words are true.

Neither website will be the final version. I need to build up a showcase of items (much like yourself) and then use the showcase as the main design item in the website...

Btw, I did try to keep the html5 browser version small, the entire directory with all images and javascript is only 700kb. But yes compared to the old website, load time is still slow.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...