Category Archives: iPhone App Development

How to Share Your Internet Connection in Windows 10

So I've used a couple different methods to share internet connections on several different computers. What's a real pain is that some methods only work on some PCs and some PCs don't have all the components or programs needed to run ICS(Internet Connection Sharing) properly. So, I finally may have found a great, easy to use solution. It does require installing a simple app in Windows, but it doesn't seem to have any adware or nonsense in it. I will update this post if I do find any malicious content from the app later on though.

Using an App for Internet Connection Sharing

Some peope are against using an app for this, but let me tell you, it is easier if you have to deal with this issue regularly. The app is called Virtual Router and can be downloaded from: https://virtualrouter.codeplex.com/downloads/get/621827.

Screenshot (11)

Using CSS Media Queries in Responsive Web Design

That's right! The post of the day is going to be on how to use CSS media queries to make a responsive web page or application. The project I'm working on requires me to create a responsive events calendar application that looks good in all sized browser windows as well as mobile devices including iPhone and Android phones and tablets. This can be done very well with CSS media queries and a basic understanding of HTML and CSS. Making today's task a little more challenging is the fact that we will be using HTML table elements. If you have any experience with HTML tables, you probably know that they can be tricky to size according to specific requirements most times. We will overcome the table cell sizing limitations in this article however.

Common Screen Sizes

One of the most important things to take into consideration when developing a fully responsive web application for both computers and mobile devices is your users screen size. What are your users likely to be using? Some will be on a PC, some on a tablet, others on an iPhone and yet others will be on an Android or other device. The ugly truth is that there are a lot of possibilities. I have found from experience that it's best to take into consideration the most commonly used screen sizes. I program for the most common and try to make it work resonably well in the uncommon sized screens as well because roughly up to 3% of your users could be using an odd sized screen that you haven't programmed for. While 3% may not sound very significant, think of it like this: If your site has 1000 visitors a day like mine does, then that means up to 30 people a day are viewing your site on a less-common screen size. 30 is 3% of 1000. Here are some of the latest statistics I could find on common screen sizes used:

First I want to show you common screen sizes of Mobile Devices since they are probably the fasting growing segment of 2016:

2016 Total iOS* Android Windows Others
February 5.15 % 1.08 % 3.49 % 0.42 % 0.16 %
January 5.38 % 1.17 % 3.69 % 0.37 % 0.15 %

The above information was collected by the website w3schools.com. The data represents the users of their website according to information collected by thier servers. It shows that only slightly greater than 5% of thier website viewers view thier site on a mobile device, but your site could have more because I think the w3schools website is one that developers reference a lot and developers do their work on a computer more often than on a mobile device. That may account for some of the low figures for mobile users. Now lets look at the most commone screen sizes according to rapidtables.com:

Common screen resolutions of rapidtables.com visitors (2/2014):

Screen resolution Display
ratio
Usage Screen size / type
1366x768 16:9 19.1% 14'' Notebook / 15.6'' Laptop / 18.5'' monitor
1920x1080 16:9 9.4% 21.5'' monitor / 23'' monitor / 1080p TV
1280x800 8:5 8.5% 14'' Notebook
320x568 9:16 6.4% 4'' iPhone 5
1440x900 8:5 5.7% 19'' monitor
1280x1024 5:4 5.5% 19'' monitor
320x480 2:3 5.2% 3.5'' iPhone
1600x900 16:9 4.6% 20'' monitor
768x1024 3:4 4.5% 9.7'' iPad
1024x768 4:3 3.9% 15'' monitor
1680x1050 8:5 2.8% 22'' monitor
360x640 9:16 2.3%
1920x1200 8:5 1.7% 24'' monitor
720x1280 9:16 1.6% 4.8'' Galaxy S
480x800 3:5 1.1%
1360x768 16:9 0.9%
1280x720 16:9 0.9% 720p TV

If you study the numbers above, they suggest that rapidtables.com visitors are much more likely to be on a smaller screen size device or mobile device than are w3scools.com users. I guess from reading the above data that their website has roughly up to 12% of their users using smaller screened devices such as iPhones, Androids and other mobile devices.

CSS Media Queries

I choose to use one simple type of CSS media queries in this challenge. I like to call it the max-width technique for sizing web pages at various sizes. This is due to the fact that the technique uses ony the max-width media query as you will see with the demonstration code below.

From studying the more common screen sizes, I've come up with a simple plan to make my calendar application look good on just about any possible screen size. Here is my rudimentary logic:

I plan to set the maximum with of the calendar to 1000 pixels and centering it on the page. By doing this I eliminate the need for any media queries for screens over 1000 px wide! As you can see from the charts above,  there are 17 screen sizes represented and 11 of them are over 1000px wide! We have already made our work a lot easier since we only have 4 other screen widths to worry about(because 3 of them have 320px wide screens). Obviously 320px is of great concern as it is one of the most common widts on mobile phones, but I'll also take into considertion the widths of 360px, 480px, 720px and 768px. However, some will be taken care of by the same media queries as you'll soon discover. Here are the basic rules we will go by when making out calendar application:

  • web page will be no wider than 1000px and centered.
  • first media query will be set for max-width of 800px meaning that if the page size is under 800px wide the styles inside of the media query definition will be altered.
  • A second media query set for a max-width of 500px will apply changes for any screen size under 500px down to the next media query.
  • A third media query set for a max-width of 400px will account for any screen between400px and the next media query.
  • A forth and final media query set for max-width of  320px will account for the common screen sizes of 320px and under which are the smallest group of mobile phones, so no other media queries after this one will be required.

I have outlined my logic above, now I can add my media queries to my CSS style sheet as follows:

/*add styles for screen sizes of 800px and up. These don't need to be inside of a media query because the table's width for the calendar will be set to 1000px and centered. Tables are generally flexible enough to be reduced from 1000 to 800px without any problems given it is styled and tested correctly.*/

@media(max-width: 800px) {
//add styles for screen sizes from 500 to 800px:
}

@media(max-width: 500px) {
//add styles for screen sizes from 400 to 500px:
}

@media(max-width: 400px) {
//add styles for screen sizes from 320 to 400px:
}

@media(max-width: 320px) {
//add styles for screen sizes 320px and under:
}

The above is a good way to start your CSS style sheet for a resposive design. You may find that you may not need to use one or more of the media query definitions. You may also find yourself adding one or two media query definitions. None-the-less, this is a good start.

Writing and Testing your CSS Code

When I make a responsive web page, I first make the basic page with basic CSS and no media queries. Then when the basic page is complete, I start testing it at different screen sizes by making my browser window smaller and larger and seeing how the page looks at every possible width and height. Then I add styles to media queries and edit them until the page looks good at every possible size. Finally I test on actual devices such as an iPhone, Android phone and a tablet while making final adjustments according to how the page looks on the actual devices.

Make a Bootable El Capitan USB Drive for Mac from Windows PC

After a couple days of random Google searches, I finally was able to put together enough information to figure out how to make a bootable USB drive to restore my Mac using a PC. Yes, my Mac took a dive, a huge one. It won't even start up, so I found that the only possible way of fixing it on my own without taking it into the shop and spending hundreds of dollars I can't afford, was to try to re format the Mac's Hard Disk and install the latest version of OS X on it. I am crossing my fingers it will work! TIP: before you start, you might want to get the os x software .dmg file download started because it's over 6gb and takes a while. Click on the first link under the Download OS X Software heading below to get that going and you can take your time with the rest.

Download OS X Software

The first thing you want to do is download the El Capitan Software from one of the following links:

The best option for me was to download the .dmg file directly from:

https://drive.google.com/folderview?id=0B8s8_mgNDN5scDI4R0VTUVpkQUU&

usp=sharing

Beware that it is a 6.2GB file and will take quite some time to download in most cases.

If the above link doesn't work for any reason, you can try this second one if you are good at piecing together the .rar archives:

https://goo.gl/8CGh5L

 

 

Download TransMac

The first step to creating your El Capitan USB dongle using Windows is to download TransMac, which can be done free of charge using the following link:

http://www.acutesystems.com/scrtm.htm

Click the above link and then click on the hyper link that reads " tmsetup.zip" towards the top of the resulting page.

Once you have the TransMac .zip file downloaded, if it's not already on yoru desktop, move it there so you can follow this tutorial easily. Unzip it to your desktop and click on the setup file to install it. You can accept the defaults while going through the GUI. It's nothing very important, just get to the "install" button at the end and click it and you are golden. Before clicking on "Finish" however, you should uncheck the "read me" and "run" options because we have to run it a certain way as you'll soon see.

Now's a good time to insert your USB stick, thumb drive, dongle or whatever you call it. Backup any files you want to save and erase them from the USB drive to be safe.

Next, right click on the new shortcut icon for TransMac the install process should have created on your desktop and select "run as administrator". You will want to then run the free trial.

Once TransMac is running, select your USB drive from the menu on the left by right clicking it and choosing the "Format Disk for Mac" option and clicking "yes" to continue if a warning pops up about losing files or formatting etc...

You'll be asked for a Volume Name next, enter something like "EL Pwn Version" and click "ok". Soon, it will say "Format Complete" and click "ok" again.

Again in the left side of TransMac, right click on your USB drive and this time select "Restore with Disk Image" and then select the copy of the "EL Pwn Version.dmg" file you should have downloaded to your desktop earlier.

 

 Summary and Credit

If you follow along with this tutorial closely, hopefully you were able to get a copy of El Capitan installed on your Mac using only a Windows machine to build your bootable USB flash drive. I have to give credit to the YouTube video at https://www.youtube.com/watch?v=NjTLYJXM8u4 because it was the only source I found online that even remotely covered how to do this successfully.

 

 

How to Create an iPhone App

This is a starting point for anyone wanting to know how to start developing iPhone apps. There is really only one way to correctly develop apps for iPhones and that is the method we will explain here. Unfortunately, iPhone and Android Apps must be created somewhat differently, although there are some things you can do to minimalize development if you have to create an app for both. However, in this guide, we will only discuss the iPhone app since it is clearly a different beast from Android apps.

As you can imagine, iPhones, Macs and anything Apple are very proprietary in nature, so the number one requirement for developing applications for iPhones is that you must have access to a Mac computer!

Simple Website Wrapper for iPhone Apps using Xcode

In this tutorial, I'll describe how to make a simple website wrapper that will allow you to make an iPhone app out of a website or web based app.

Prerequisites

The main thing you need to have before doing this exersize is a mobile friendly web site or web-based application. See one of my many tutorials on this site regarding responsive web design techniques to get started.

Also basic knowledge of IOS, iPhone and xcode development is needed. If these concepts are new to you, check out:

http://codewithchris.com/how-to-make-iphone-apps-with-no-programming-experience/

You'll find a very intuitive assortment of beginner tutorials on developing with xcode 7 at the above link. The site, coding with Chris, basically is dedicated to teaching xcode to new users and learning experts.

At the time I wrote this tutorial, near the end of 2015, the current version of Xcode was Xcode 7. You can download the latest version of Xcode for Mac at

https://developer.apple.com/xcode/download/

...or go the app store and search for xcode and you'll find it easy enough.

...and unfortunately, you do have to have a Mac to use Xcode, so if you only have a windows machine, you'll have to get a Mac to successfully develop any sort of iPhone apps.

Embedding a Website into an iPhone App with Xcode

After doing extensive research, I have determined that the best method of converting your web-based app or website into an iPhone app that can be offered in the app store is to use Xcode's webView class to wrap the website in a wrapper that makes it act like a native iPhone app. Without wasting any time, here is how I did it:

  1. Open Xcode, start a new "Single View" project and name it whatever you want your app to be named.
  2. Choose your programming language during the project creation procedure in Xcode. You could use objective-C or Swift. For this tutorial, we are using Swift, so select "Swift" as the coding language during the project creation process in Xcode.
  3. In the left navigation panel of xcode you can see the files in your project, click on the "ViewController.swift" filename and it will open it in the editor pane to the right. Make the contents of the file look like this:

import UIKit

class ViewController: UIViewController, UIWebViewDelegate  {

@IBOutlet var webView: UIWebView!

override func viewDidLoad() {
super.viewDidLoad()
let url = NSURL(string: "http://jafty.com")
let request = NSURLRequest(URL: url!)
webView.loadRequest(request)
}

override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}

  1. Now this is the important part that most beginners miss! You have to connect the part of the code that reads "@IBOutlet var webView: UIWebView!", with the view it is in. This is important! Without doing this, it will not work. you have to open both the ViewController.swift file and the view's layout at the same time in two editors and click on the line no. in front of the line that reads "@IBoutlet...." and drag a line to the webview controller in the view's layout dialog window.