Screen-like interface in HTML - 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

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.

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.

Layout / Use of Grid System

Hi Im currently creating a Website (who isn't?). My Website Design Looks like this:
Desktop Version:
Mobile Version:
(Sorry for the Big Images)
As you can see, ist not much changing.
Sidebar and the Global Nav are disabled in the Mobile Version (MenĂ¼ via o/Off Canvas)
The main Content Layout Changes.
The Layout in the Content divs Changes too. (Use nested Colums fot that in the Grid System?)
My Question is: Should I use a Grid System? If Yes: Should I just use it for the Orange Content Area or for the hole Website?
Added: The Site should is Full with!
As mmgross said, you're asking a pretty broad question that comes down to taste and experience in design.
There are a number of tools and frameworks that give you access to an already defined grid system; Bootstrap is probably the best known but Foundation CSS is becoming very popular and is lighter weight. If you're not planning to do much intricate styling and just want a preexisting grid, my personal choice is Skeleton - it's very lightweight but adds the grid/responsiveness you're [probably] looking for.
This brings up the other main point: how experienced are you using HTML/CSS? One of the big benefits of using a grid is the responsiveness that comes from them without writing a number of media queries. Still, you'll have to at least write one media query to detect if mobile, so if you're comfortable with position in CSS then it might be best just to pass over grids and write it all yourself (looking at your layout, that's what I'd probably do).
It's always a trade off between time it takes to do the task and time it takes to learn something new, so keep in mind that the learning curve for some of the frameworks might be steeper than you think. Then again, if you're experienced with using them, it will probably be easier to stick with what you know than play around with the raw CSS.
Hope that helped!

Responsive gridding what is it and how to achieve it

I just tested few of my webpages in cross browsers testing tool and found out that for lower resolutions all my divs were not coming separately.
Afters googling I found out about responsive griding.
After reading that I wanted to ask that whether responsive griding is nothing but making your web page responsive to different changes in screen sizes or does it have anything more to it
Also I am using purecss to make my web page responsive so I needed to know whether this is the right way or and what other ways are there to do this.
Pretty much, it's also about curtailing content based on your audience. Say that people on mobile don't need to read all the reviews on the page you would hide it or show it in a different way. Whether or not to use pure is completely your personal preference. There are a gargantuan amount of responsive frameworks, you should look at what they offer to your own goals of customization or extensibility. Foundation for example offers lovely JavaScript addons you can use for modals, sliders and navigation.
Good luck and please add to your question if you need to ask more!
Your choice to use pure I feel is a good one because its extremely light weight and style agnostic. While bootstrap and foundation are more popular choices they can be up to 10 to 20 times larger.
Check out TukTuk as well, its similar in nature to Pure:
http://tuktuk.tapquo.com/
Yes, you've got the right idea. You can use frameworks like Twitter Bootstrap, or Zurb Foundation, which have all the CSS you need for responsive grids. The basic idea is using CSS media queries to apply different CSS rules for different screen sizes. Javascript can also be used to show/hide features which might work better on mobile.

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.