I have a test WordPress website hosted locally by my PC. This is fine but i am now wanting to test the website on a phone and tablet (iPhone and iPad).
I have looked online for all the options and i can't get any to work (changing the httpd files and i have tried everything else) I can type my IP address of my PC with the port number added at the end and this takes me to the Xampp control panel page but i cant access my website by typing 'IPaddress/websitename'.
Can someone please give me a full step by step of what i need to do to be able to see my locally xampp WordPress website from my iPhone and iPad.
Your phone is probably not on the same network as your PC, and you might not be sharing your XAMPP website over the network. It would be possible to make your website available to your phone, but it is likely to be quite a lot of work, and might be insecure.
A better idea would be to shrink your desktop browser down to phone / tablet size, and check the layout that way. You can even throttle the internet speed, to simulate slower connections, and choose specific device models. On Chrome, this is called device mode. You will need to turn on Chrome developer tools first, which is done by clicking View -> Developer -> Developer Tools, in the Chrome toolbar. You will see a little icon there (see the link for a screenshot).
If you are going to make the site live, you should still probably check it with a real phone / tablet, but for the first steps, using 'device mode' is a good place to start.
Related
Our company designs museum and visitor center exhibitory, and my main job is designing touch screen kiosk applications. Enamored by Vidya's introduction to Kiosk Apps using Chrome boxes, I quickly had my boss procure one for testing. I have since gained a firm grasp of Chrome App structure going though Google's tutorials (manifest files, MVC, etc) and have found the performance of our little HP Chromebox plus HTML5 development to be pretty impressive. I'm developing on my Macbook using Chrome Canary to run and test the apps.
I'm adding in this background information so you can better understand my goals. We of coarse need these apps to launch full screen upon power up. No login or user installation is desired. I prepare the boxes in my office, install them at the exhibit, the end. We certainly don't want our multimedia apps to be sitting up on the Chrome Web Store for others to download and install.
So, I've gotten to the point where I want to install a simple kiosk app on our HP Chromebox. Unfortunately Vidya did not go into detail on this part. The page from her article only touches upon adding kiosk_enabled" : true to the manifest file.
So here's what I've tried so far: I've moved my app folder onto an SD card and moved it from there onto our HP Chromebox into the "Downloads" folder (apparently the only folder). I sign into Chrome Browser on the box with my company account (do I have to do this?) and load up chrome:extensions. I click "load unpacked extension..." and select my app folder. The app installs and I am able to manually launch it by clicking "Launch". Next, I click the "Manage kiosk applications..." button and enter the app ID into the field. This is where I get stuck. Clicking "Add" produces an "Invalid Application" error.
Looking around the web I have found lots of confusing information:
I must "Wipe" the Chromebox in order to use a Ctrl+Alt+K key command to truly enable kiosk mode. (Google's instructions on how to do this stops with Samsung and Asus 'boxes, I have an HP, not to mention the "Manage Kiosk Applications" button is already visible to me).
I must upload my App to the Webstore as either public or unlisted, and then download and install it onto my Chromebox. Really? I don't want to sell my app or make it available to anyone. It is only meant to run in our exhibit. Our apps could be gigs of data with HD videos!
I must make my Chromebox "Managed" or "Enterprise" or "Enroll" it for Work and Education Administration. In most cases, we'll be installing one or two of the 'boxes to allow users to navigate though static HTML pages. I don't have a need to manage a fleet remotely (at least not yet). So, the aforementioned complications seem unnecessary, and expensive if I understand things correctly.
Can someone point me to the definitive process for achieving my goal of an auto starting, full screen kiosk application on my Chromebox?
I'm not an expert on this but kiosk apps are defined by "kiosk_enabled": true in manifest.json. What's important to know, though, is that from what I've seen they can work in three different modes:
If they are installed as an unpacked extension (for example, in development) they will be available as apps in your logged in environment and run but full screen mode. They're essentially "normal" apps except that they are full screen.
If they are installed using the "Manage kiosk applications..." button then they are available without logging in. On the log in screen at the bottom you'll be able to see the app and click to start it without logging in. However they won't start automatically. AFAIK you also can't load an unpacked extension in this way.
If you enable "kiosk mode" for Chrome OS then you can make kiosk apps auto start. At least on the Asus CB you do have to do the CTRL-ALT-K keystroke BEFORE you log in for the first time. This is for an unmanaged device. Now, when you load the app using "Manage kiosk applications..." in chrome://extensions and hover your mouse over it in the dialog you should seen a "enable auto-start" or similar button. You need to select this. Now, when you restart the system the app should automatically start. If you want to cancel this just as the app is loading you can press CTRL-ALT-S. A message indicates this on the screen, too.
Hope that helps,
Simon
Can't help you with anything related to kiosk, but you can generate a CRX file from the Extensions page on your development system, get that onto the Chromebox, put the Extensions page of the Chromebox into developer mode, and then drag the CRX to the Extensions page and drop it. You should see a dialog asking you if you want to install it. This is a completely different form of install than loading an unpacked extension and may get around whatever limitations you're seeing.
UPDATE: (1) Extensions page on Chromebox doesn't have to be in Developer Mode, (2) CRX to be dragged must be in the Downloads directory, not on Google Drive. Didn't test external device (SD card or USB drive).
In order to add your app from Manage Kiosk Applications, you will need to publish your app to the Chrome Web Store. If you don't want your app to be public you can publish it as Unlisted, which means that anyone with the link can install it. Unfortunately, if the app is published as Private you will not be able to add it as a kiosk app. [source]
Beyond that, the only thing you need to do to create a kiosk app is to include "kiosk_enabled": true in your manifest.json file.
I wanted to get a head start on how I can control my beaglebone Black from the internet preferably I will have android app there on the other part!
I have gone through a lot of tutorials but all they do is access it using the browser and I want to access it through my Android phone's app that may be a TCP/IP app.
So wanted to know whether I should use the Webserver or not if yes which? Tornado, node.js and some headstart on how to do it step by step
Specifically, the "max-device-width:" condition
If you're on a Mac, you can use the iPhone simulator that comes with XCode. I've also used a Firefox add-on called "Modify Headers" and I send iPhone headers, however, that may not help much with max-device-width.
For mac or PC, if you can upload your files to any temporary server, you can check the results online in TestiPhone: http://www.testiphone.com/
This is a web browser based simulator for quickly testing your iPhone
web applications. This tool has been so far tested and working using
Internet Explorer 7, FireFox 2 and Safari 3.
The firefox plugin Developer toolbar let you change the browser size with just one click to the device size. I bet there is plugins like that to the other browsers. If you can't find that to all browsers then I suggest that you just upload your code to a server and surf to it using an iPhone.
I need to develop a website which will be used exclusively on iPhone and iPad. I don't have those devices, neither do I have a Mac.
What are the possible free solutions for me to be able to test the website during development?
The most obvious one would be to use an iPhone SDK, but since it costs $100/year but since it is available only for Mac, it is not a solution in my case.
Download Safari 5 for Windows, enable the Developer Menu features and change the User Agent to Mobile Safari iPad or Mobile Safari iPhone. This will let you see how your website looks when an iPad or iPhone renders it. Just make the window smaller to get the full experience.
If analyst predictions are right, there will soon likely be an abundance of iPhone 3G devices on eBay as lots of people are eligible to upgrade to iPhone 4 tomorrow. Picking up a cheap 3G may be the best solution to your testing requirements.
Or you can test it out at an Apple Store if your website is accessible over the internet or available on a laptop with an ad-hoc WiFi connection.
You can test your website in any browser, but yes, mobile browser probably behave different at some points.
If you cannot find a mobile web browser simulator for iPhone than the "cheapest" alternative would probably be an iPod touch.
Update:
You might want to have a look at iBBDemo:
iBBDemo2 - Cross Platform iPad and iPhone Simulator
You could try using something like:
www.testiphone.com/
Recommend you use jsconsole
Remotely debug a mobile web app
jsconsole.com is a simple JavaScript command line tool. However, it also provides the ability to bridge across to other browser windows to remotely control and debug that window - be it in another browser or another device altogether.
In fact, mobile web app debugging is so damn tricky, that I gave up, and decided to build this very tool instead. See the videos examples if you'd rather see this in action now.
Creating a session
To create a new session, in the jsconsole prompt, simply run:
:listen
This will yield a unique key along the lines of FAE031CD-74A0-46D3-AE36-757BAB262BEA. Now using this unique key, include a anywhere in the web app that you wish to debug:
<script src="http://jsconsole.com/remote.js?FAE031CD-74A0-46D3-AE36-757BAB262BEA"></script>
Now any calls to console.log from your web app will display the result in the jsconsole session that is listening to your key. Equally, if you run a command in the jsconsole session, the code will injected in to your web app and the result returned to jsconsole.
In addition to generating a new code with :listen, you can also ask jsconsole to listen to a predefined code (but for your own security, try to chose something unique that only you know):
:listen FAE031CD-74A0-46D3-AE36-757BAB262BEA
Now I can use the same remote key in my web app to avoid having to regenerate a new code each time. Note that only the last remote client (i.e. your web app) to connect to jsconsole will recieve remote debug calls - previous windows will be ignored.
To know when the web app has connected, jsconsole will notify you by showing your the userAgent string for the device:
:listen FAE031CD-74A0-46D3-AE36-757BAB262BEA
Creating connection...
Connected to "FAE031CD-74A0-46D3-AE36-757BAB262BEA"
Connection established with Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-GB; rv:1.9.2.8) Gecko/20100722 Firefox/3.6.8
A word of warning
Note that this technique is also injecting code directly in to your web app - this tool should only be used for debugging. I can't take respibility for how you use this tool, basically: take care!
Current known support
Remote debugging has been developed to work on all platforms, even if the technology isn't supported. However, jsconsole remote debugging has specifically tested and working on the follow mobile devices (feel free to add to this list):
iOS 4.2.x - iPad, iPhone 4
Andriod 2.2.2 - Nexus One
webOS - Palm Pre
There are some Video examples too
More detailed information please see this links:
http://jsconsole.com/remote-debugging.html
There are some obvious things here:
1)Work very hard to make your site work on all major browsers - including Safari and any other mobile devices other than iPad... this will let you make sure it works on smaller screens well.
2)Read up on known glitches in these browsers and see if you can avoid them.
3)Whenever you are with friends showing off their iPad, or who have an iPhone, ask to test your site on it.
I need to develop a website which will be used exclusively on iPhone and iPad
This seems a bad idea. if it's only used on iPad/iPhone, surely you should write an App and get all the benefits of UI, etc.
Websites should not be tied to specific devices.
This is not 1998 : Best viewed in I.E. In fact your suggestion is worse than that.
If you really want a website that only works on those devices then you'll need to check the user-agent string, but otherwise html is html and unlike what Apple may want you to believe, works just as well on Symbian, Blackberry, Android, S40, Windows, Windows Mobile, etc etc..
(In fact, it works better on Symbian as Symbian actually supports Flash.)
I want to test a website to see how it works with the iPhone but I don't own an iPhone or an iPod touch. Is there a way I can test how the site works on them without owning one?
What I'm really after is fixing how Stackoverflow's WMD markdown editor works on the iPhone. I hear that the hyperlink and image prompts are created too high. I think I know how to fix that but it's pretty tough to develop blind.
If you own a Mac, you can download the iPhone SDK which comes with an iPhone simulator. It works not only for debugging a native app but also for browsing the web.
If you have Safari on your computer, you can enable the "Develop" menu under Preferences > Advanced > Show Develop Menu in Menu Bar.
With this enabled, you can go to Develop > User Agent, and change the user-agent string to the device you want your browser to report to the web server as.
By resizing the window to the appropriate width, you can emulate what the site will look like on the iPhone.
The upside of this is that it's quick, it works on both Windows and Mac, and you don't need the iPhone SDK installed. You can also browse iPhone-specific versions of websites that catch user-agent strings directly from your PC.
The downside is obviously your Safari browser on your PC will behave quicker than on the actual device (especially in regard to javascript performance); it displays plugins and shows fonts that may not be available on the actual iPhone OS; a lack of multi-touch support and "snapping" to columns while scrolling; no auto-rotation; no multi-touch/pinch-zoom; widgets will look different; etc.
Just a notice on this old thread - we have now enabled live testing on iPhones and iPads via vnc at CrossBrowserTesting.com.
Ken - Founder
There is a free app on the mac that emulates the iPhone browser: iPhoney
I don't purport to have done more than a web search, but the problem seems to be solved by several products that are "iPhone web app emulators."
http://www.testiphone.com/
http://marketcircle.com/iphoney/