Custom homepage in Safari

ardchoille · May 2, 2012

Many people use a web portal for their browser home page. A web portal is a web page that contains links to favorite sites. The problem I often encounter with web portals is that they never have all of the links I need. Wouldn't it be nice to have your own web portal that you can edit right from your iPhone/iPad?

Benefits:
* A custom web portal containing your own favorite links
* You can edit the web portal as you desire
* You can theme your web portal
* Your web portal is always available to you
* Eliminates the need for numerous bookmarks

First, you need to learn a little HTML. HTML is very easy to learn and provides countless benefits. Search Google for w3schools and you'll no doubt find a link to some nice tutorials. You don't need to become an expert at HTML, you just need to learn a few tags.

The most basic of web pages looks like this:

Code:

<html>
<head>
<title>My personal web page</title>
</head>
<body>
<a href='http://www.iphoneforums.net'>iPhone Forums</a>
<br>
<a href='http://www.iphoneforums.net/wallpapers/'>iPhone Forums Wallpapers</a>
</body>
</html>

That is a basic web page with a title and two links to these forums - you can add any links you want. Your web portal page will look better as you learn and add more HTML components. You can also "theme" your web portal page by adding some CSS (Cascading Style Sheets).

Once you've learned how to write links you can begin writing your own web portal - my web portal took about 5 minutes to write. Once you have your web portal, you can place it on a server and point Safari to it.

What I've done is installed Dropbox on my iPhone. I've also installed an app that allows editing and syncing of Dropbox files, such as Plain Text or Nocs.

Once you have Dropbox installed and have created an account, you can place your web portal page in the "Public" folder of your Dropbox account and grab the public link to the web portal page - the Dropbox app includes a tutorial. Then, simply visit the link in Safari and bookmark it.

Now you have your very own custom web portal that you can edit right from your iPhone/iPad at any time. The text editor will sync with Dropbox and the new version of the web portal will be seen the next time you visit the link in Safari.

Skull One · May 2, 2012

I would like to expand upon this great example. Besides adding CSS, which would allow you to create custom background (ie wallpapers) for your page, you can also add another feature very quickly.

Code:

<html>
    <head>
        <title>My personal web page</title>
        <meta name='apple-mobile-web-app-capable' content='yes' />
        <meta name='apple-mobile-web-app-status-bar-style' content='default' />
        <meta name='viewport' content='width=device-width' />
    </head>
    <body>

        <a href='http://www.iphoneforums.net'>iPhone Forums</a><br>
        <a href='http://www.iphoneforums.net/wallpapers/'>iPhone Forums Wallpapers</a><br>
    </body>
</html>

Under the original "Title" I added a specific set of Safari web browser meta commands. These commands allow you to create a "faux app" look if you create a "Add to Home Screen" bookmark instead of a standard bookmark.

There are pros and cons to this method.

Pros:
You can display a few more web links on the screen.
It buffers like an App. IE it stays in memory for very quick launching the next time.

Cons:
It buffers like an App. IE it stays in memory and sometimes requires you till kill it to get it to refresh properly after you have made a change.

The next logical step after that is to add JavaScript functionality. But that is a whole different can of worms

ardchoille · May 2, 2012

Skull One said:
I would like to expand upon this great example. Besides adding CSS, which would allow you to create custom background (ie wallpapers) for your page, you can also add another feature very quickly.

Code:

<html> <head> <title>My personal web page</title> <meta name='apple-mobile-web-app-capable' content='yes' /> <meta name='apple-mobile-web-app-status-bar-style' content='default' /> <meta name='viewport' content='width=device-width' /> </head> <body> <a href='http://www.iphoneforums.net'>iPhone Forums</a><br> <a href='http://www.iphoneforums.net/wallpapers/'>iPhone Forums Wallpapers</a><br> </body> </html>

Under the original "Title" I added a specific set of Safari web browser meta commands. These commands allow you to create a "faux app" look if you create a "Add to Home Screen" bookmark instead of a standard bookmark.

There are pros and cons to this method.

Pros:
You can display a few more web links on the screen.
It buffers like an App. IE it stays in memory for very quick launching the next time.

Cons:
It buffers like an App. IE it stays in memory and sometimes requires you till kill it to get it to refresh properly after you have made a change.

The next logical step after that is to add JavaScript functionality. But that is a whole different can of worms

Oh, nice! Thank you for this

This makes me want to go on and learn how to create web apps for iPhone.

ardchoille · May 25, 2013

I have found a nice site that provides a free web framework that will allow you to create webpages that appear as native iOS apps. I downloaded the archive and learned how to create an attractive webpage. I had intended this as a weekend project but it took considerably less time than that. The project is called iui and is available here: iui web framework for smartphones & high-end devices