How to develope an application with FlipBorad App style with HTML5 - html

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.

Related

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.

Which one is a resource efficient approach : CSS3 Stylesheet or Canvas API for a HTML5 app to be ported as Blackberry Webworks

I'm developing a Math-based game/app using HTML5 technologies (HTML5 + CSS3 + javascript) for the upcoming Blackberry 10 Devices, to be ported using Blackberry WebWorks.
The game requires generation of lots of random numbers. I'm currently generating them in "p" tag and styling them. But some guy suggested me not to use Stylesheet so much and rather use Canvas API.
Is there any effective/performance-improving reason to listen to the suggestion or it is just any suggestion ?
I look it at this way:
HTML tags have pre-defined properties and behaviour such as padding, floating, relative positions, etc. Making use of these tags ensures that the developer does not have to write tons of code to mimic this trivial behaviour. Think of building a list: using <ul> and <li> will take care of the positioning for you. In canvas you need to create this from scratch or look for a library. HTML/CSS IMO is perfect for Web Apps. In terms of performance, make sure your animations are done in the GPU (using 3d transforms) and the performance is great. It is easy to respond to different screen sizes when using HTML/CSS too.
Games tend to use absolute positioned elements that are manipulated directly (example, move player from 100px to 150px) and are therefore easier to work with in Canvas. Performance-wise, canvas2d operations are hardware accelerated, so it should be as smooth as using HTML/CSS.

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.

Movable widgets over video in website

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.

Screen-like interface in HTML

I have some 10 odd Silverlight based components. I wanted to create a screen like interface in HTML, each screen holding some number of components and the user can easily navigate between the screens and use the components.
Can anyone suggest me some way in which I could easily implement such an interface?
Thank You.
As I understand from your question you need Navigation Framework.
With it you can have any number of pages(screens in your case) and navigate between them.
You also can do that kind of things using behavios. Very good video is avaliable at silverlight.tv : Creating Rich Interactions Using Blend 4: Transition Effects, Fluid Layout, and Layout States