Horizontal scrolling skin for mediawiki - microsoft-metro

I want to create a mediawiki horizontal scrolling skin based on the wikipedia metro app.
wikipedia metro github
video of wikipedia metro
The skin is intented for a normal website and not a metro app.So how can i convert the code that is already created for mediawiki platform to a skin i can use?Where should i start.I tried to understand the metro app and convert it but i cant figure out how it works.Can you give some guidelines.(I am on linux computer so i cant test the app itself)
I can't find any other horizontal scrolling skins for mediawiki.

The Windows 8 app is not just a skin, it's a separate HTML page. It uses the API (specifically the mobileview module from the MobileFrontend extension). It also uses WinJS (JS library specific to Windows 8 apps).
I'm not sure if it's suitable for a full-fledged skin (like Vector), but I think you could use it as a base for a separate view of your wiki. Most of the work you will have to do would be replacing Windows 8-specific stuff, like WinJS.
Most of the HTML code seems to be in default.html and most of the JavaScript that actually runs the app is in default.js.

Related

Android Web App GUI layout and control

I am trying to create a Mobile version of my website. It is an online application, but I would like to make a mobile version through the web format.
So if they visit, www.example.com it takes them to the mobile version. (Which it does currently). But the problem that I am having is creating a nice user friendly interface between the multiple devices, ie: BlackBerry, Android, iPhone. And I am sure this is near impossible to get the same. But I would like some similarities.
Is there any form of template that I can start from? I have noticed that it is better to use "EM" font-sizes verses any other to create a more stable consistency.
I really enjoy this layout of TweetDeck
I like the layout of the buttons along the bottom. Is there anything I can do to create this consistency? Do I create this in my browser at 100%, or do I need to detect the width of the browser FIRST and then create the UI?
You really should look at some of the mobile javascript libraries. They do all of the hard work for you and you just have to deal with the API that they present. Here are a few that I have found in my own research:
Sencha Touch - http://www.sencha.com/products/touch/
JQTouch for JQuery folks - http://www.jqtouch.com/
And if you are a .NET component person - http://www.componentone.com/SuperProducts/StudioiPhone/

Web based Iphone / Android app

I am considering developing an Iphone/Android application but I want the information on it to be live and uniform between platforms... Therefore it seemed logical to me to make it web based. I would however like to be able to achieve certain non web based functions such as adding events to the calendar and gps locations on the the mapping sortware.
My questions are:
Can I make a web based
application that does not visually
show in a browser?
Can I add additional functions that
are not natively available in a
browser e.g <a href="#"
title="adddate:110911"/>Add to
Calendar</a>
Would it be a lot of work to make
such an app as the majority is web
based (I mostly progam in PHP so
coding for Android and Iphone will
take me some time to get my head
around).
All of the questions are for both Iphone and Android.
Thanks
I would recommend using a cross platform solution like phonegap (with UI sencha touch on top of it).
You can have an app that is a thin shell over the system browser, and exposes the non-Web bits of functionality to the contained HTML via JavaScript interfaces. You will still need two different codebases for iPhone and Android, but the essense of the app will be still webby.
There's no way to manage the system calendar from Web apps neither on iPhone nor on Android, AFAIK.

How to build correctly Android-compatible website?

I am HTML/CSS/jQuery coder. And I need to develop the website, which will be "zoomed-out" or "fitted" to 320x480 (frequently used resolution) Android mobile device screen.
Or even this solutions should check my screen resolution and connect the right CSS for that.
Somewhere I met that there is android.js file, which connects to HTML and recognizes if the website was open on PC or on android device. But I am not sure at all. I didn't do anything for mobiles before.
Found this article: http://blog.mgpwr.co.uk/2010/09/make-your-website-iphone-compatible/
Don't think it's a right solution to use PHP for that.
Better would be HTML or JS.
A very simple answer would be don't hardcode width on the elements and don't specify font size in pixels. The mobile browser will adjust the rendered page itself.
If however you want more iPhone-like look of form controls like radio buttons, buttons, drop downs, then you need to use the mobile javascript libraries outlined in the other answer.
A simple answer would be a mobile javascript library such as one of the following:
http://www.sencha.com/products/touch/
http://www.phonegap.com/home/
http://jquerymobile.com/
http://jqtouch.com/

IPhone Web Design Preview

I've been using Safari on Windows and the iBBDemo Blackbaud iPhone Browser Simulator to emulate an iPhone but I have noticed that Safari does not render form elements using the default control styles. Safari on iPhone supplies default control styles that are specific to iPhone. This means my web forms look nothing like they do on an actual iPhone.
Are there any style sheets or iPhone Web Design Tool Kits that will style the form elements exactly as they should appear? Or is there an online service that provides screenshots of how a web page looks on an iPhone?
If you have a Mac, then the easiest way is to use the iPhone Simulator. It might not be suitable for your purposes, though.
There are a lot of things which you'd need to do to get the rendering right (there are a lot of rounded rects, and the user can scale the page to an arbitrary size, and strange things sometimes happen when you rotate the device).

Wordpress Mobile Version

I'm interested in creating an alternate version of a Wordpress site, specifically tailored for mobile devices. (We're talking about iPhones in particular, but something more generic would be cool, too.)
My thinking on this right now is that I'll need to figure out how to serve the content from one Wordpress installation to two different domains, each with a different theme. And then that second theme could be mobile-friendly.
Is this possible? Is there a better way?
WPtouch: WordPress on iPhone, iPod, Android, Storm & Pre
More than just a plugin, WPtouch is an entire theme package for your WordPress website. Modeled after Apple's app store design specs, WPtouch makes your WordPress website load lightning fast on touch mobile devices, show your content beautifully, all while not interfering with your regular theme.
http://www.bravenewcode.com/wptouch/
Can't you just detect the user-agent (search for the iPhone Safari UA string and match it) and serve the iPhone theme if it matches, otherwise show the normal theme?
There are at least two plugins that automatically do this (without a second domain). The one I use is WordPress Mobile Edition. I should add that it comes with a theme that can be modified.