Movable widgets over video in website - html

I am still very much in the planning phase on this but here is the basic idea of what I want to do. I also have not done much/any web development in the past few years so I am a little out of the loop on what will/wont work.
I want to have a video playing essentially on a background layer with various widgets on top of it. The widgets will all be fairly simple HTML based text and maybe a few images. The widget also need to be movable (eg. I need to be able to drag and drop the widgets to move them). Finally I would really like it to work on a tablet (iPad or Android).
Am I going to need to use flash or silverlight for something like this? I would rather not because I know that makes it hard to get tablets working. I know HTML5 is supposed to be the new hotness but I don't really have a good idea of its capabilities.

Flash or Silverlight will rule out tablets (the iPad anyway), not just make them hard.
I'd start with jQueryUI it supports easily making elements moveable.

Related

How to create scrolling list with picture in Adobe Animate CC/ActionScripts3

I'm a designer and animator, I newly start to coding with Adobe Animate CC, In all versions of adobe flash there is List item but i couldn't find a simple way to add image and text to it, if possible guide me how can i make a scrolling list like below sample image (scroll to receive content from server "like a news app") with simple way not complex coding. I prefer to use Adobe Animate not Adobe FlashBuilder/Flex.
Simple suggestions, Link to tutorial, ...
If you take a look here, you might find what you are looking for. However, if you are just starting to code in AS3, expect to go through some rough spots.
http://www.myflashlabs.com/product/flash-dynamic-as3-scroller/
This scroller is pretty good, as it works with touch devices, as well as mouse input (desktop). This still requires you to create a movieclip or sprite and attach whatever items to you want to them. Read the documentation and take your time. Best of luck

Is HTML rendering possible in libgdx (or, what is the best practice to create a help screen)?

I want to create a help screen for my game. This screen contains text and pictures that describe the game.
One option is to create a stage and add a table to it that will define the position of the different labels and images. However, this option seems to be "unnatural", limited when it comes to format options, and a potential headache when it comes to code maintenance.
The content of the screen is static which makes it a good candidate for an HTML document. My idea is to create the help screen document in HTML and then have it rendered inside my help screen. My question is, is this possible in libgdx? If not, what other way would I have to implement this?
As it is not possible to embed a browser in your LibGDX app (as nicely explained here), you could either link to an external website in the device's browser or use the libgdx-stagebuilder to build up the Scene2D stage using XML. Or you just stick to the normal LibGDX way. Unfortunately, I don't see any other option than those.
I don't think this is supported in libGDX as of yet, but it should be possible using platform specific code. How you do it will vary from platform to platform, so I can't tell you exactly what to look up, but android has something called webview you might want to look at.

How to develope an application with FlipBorad App style with HTML5

Flipborad mobile app has a unique style, the screen will split in two half and the lower part will rotate on the upper part.
Can any one give some hint how to develop such a thing with HTML5 for Hybrid mobile apps?
I think this might be of use
http://engineering.flipboard.com/2015/02/mobile-web/
Flipboard is using react to render layout on canvas. That's why it's so quick and gives unlimited possibilities. However it's not very accessible unless you put a lot of effort into that.

HTML5 Boilerplate Icons

I've been using H5BP for what seems like Eons and find it really useful however I've never really understood what all of the icons are for.
I know they are for various devices but I've never really bothered you think more about it... I've just sheepishly replaced the icons with my own set for the site I'm working on.
I've just been googling and can't find any good explanation for each of them and in what context they are used?
I have an iPhone & iPad but to be honest I'm kind pretty un-impressed by both and therefore I'm probably not well versed enough to know exactly where the H5BP icons would be used for on these devices...
Please refer to this section of the HTML5 Boilerplate documentation - html.md
You'll find a link to Everything you always wanted to know about touch icons which will explain, in depth, what each icon is used for.
On the iPod/iPhone/iPad you can decide to place a website on your home screen (think of it as a bookmark). The bookmark will then have the same look as the icon of an ordinary iOS app (a large icon and a small text beneath it). The H5BP icon is used as the app icon, if someone decide to save your website like that.
The reason there are three different resolutions is simply because different apple-devices need different resolutions on their icons. The new iPad (retina) needs to have a high-res icon, and so forth.

Mobile app development: HTML5 Image or Canvas

I'm fairly new to web development (but not programming) and needed some advice:
I am working on a mobile app using HTML5, CSS, and Javascript (and Cordova for device functionality).
The app will be similar to flashcards (those things you used to use as a kid to memorize things). There will be some animation (flipping the card over), etc. but for the most part, the design of the flashcard will be static (borders with the main content in the center).
What would be the best way to proceed with that (drawing on a canvas or using an image for each flashcard? I am interested in performance and visual considerations of the two.
It really depends on the type of animation the cards will be doing, if they are flipping on the x/y axis you could simply have the image and manipulate its size/flip it etc with JS.
In my experience these kind of calculations/animations are quicker (if you want it to be compatible across multiple devices) however any more complicated animations should use the canvas - I have noticed when creating adverts for smartphones the canvas can really slow some animations down.