• The forum software that supports hummy.tv has been upgraded to XenForo 2.3!

    Please bear with us as we continue to tweak things, and feel free to post any questions, issues or suggestions in the upgrade thread.

Make Your Own Home Page

Black Hole

Black Hole

May contain traces of nut
I was fishing around for a way to create a web page on which I can store links to devices on my home network, so that it would be accessible to all my computing devices. By extension it could also store my web favourites, thus not have to find a link is missing from the favourites list on any particular computer. It would be easy to add a file to the Mongoose server on the Humii, but no guarantee any particular one is turned on an any time. The router would be an obvious choice if it has web server capability, but mine appears not to.

I'm sure there are many ways to do this, but somebody suggested Dropbox and as I have a Dropbox account already that seemed the way to go. What I have now is a .html file I can edit directly in the Dropbox folder on any of my computers (that have Dropbox installed - what it does is sync to your Dropbox account in the cloud, and from there sync to any other computers you have linked to it), and the web browser can have the home page (or a bookmark) set to read that file, bringing up a web page of my favourites links.

The are many ways to knock up a web page (.html file), most word processors will do a crude job, I happen to use KompoZer (an HTML editor).

So far so good, but what about computing devices that do not have the Dropbox app installed to sync the file? The Dropbox account can create a link to any particular file you have synced to the cloud, that can be given to a third party if you want them to be able to download the file (no need for a Dropbox account, and the link is randomised so it is unguessable). You might think this link could be put into the browser address bar to display the home page, but what it actually does is display a Dropbox page with a download link for the file (I tried it!).

However, there is a trick. The shareable Dropbox link looks something like this:
Code: 
https://www.dropbox.com/s/<random-string>/Favourites.html
The trick is to replace the "www" with "dl", which magically causes the actual file to be downloaded by the browser, and displayed as a web page.

A Dropbox account is free for 2GB storage, makes it easy to share files between multiple computers by syncing them to the same account - without them having to be in the same location or even the same operating system. Your information is encrypted on the cloud server, and backed up. Other similar services are available.

If you like this and don't already have a Dropbox account, if you let me send a recommendation to your email address (that you then use when registering) I will get an extra 500MB storage per successful referral.
 
Anybody know how to edit an HTML file from a Dropbox folder on an iPad?

The problem is to find an editor able to edit HTML (or plain ASCII source) that also integrates with the Dropbox app. Most apps are restricted to accessing files in their own user space (this is part of Apple's security lock-down and helps prevents a process crash taking down anything other than the crashed app). Documents2Go can access files held in Dropbox, but will only view .html not edit it. If I were to rename the file .txt, Docs2Go would edit it as plain ASCII source code and then the file could be renamed back to .html and resume functioning as a web page - the trouble is that the iPad Dropbox app does not appear to support file renaming.

Thus, at the moment, I am restricted to updating my Favourites file on the PC (although I can maintain a duplicate Favourites.txt file and only need to copy the contents into Favourites.html using the PC - replacing Favourites.html with a renamed copy of Favourites.txt would break the external link to the cloud version of the file).

Update: I have found a free app called PlainText. It's crude, but it works. Another option I looked at required iOS6 (which I have not installed so as not to lose the Google Maps mapping). Not only does this mean I can tweak my Favourites.html directly from the iPad, somebody with only an iPad and a Dropbox account (prepared to create HTML code by hand) can have a go at this too.

As an aid to setting this up by hand, the following is a sample simple structure that can be used to create the Favourites.html. The sections inside braces (curly brackets) are to be replaced with your own links etc:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<link rel="apple-touch-icon-precomposed" href="{link to your home screen icon file}">
<title>{your page title}</title>
</head>
<body>
<span style="font-weight: bold;">{section heading 1}</span>
<div style="margin-left: 40px;">
<p><a href="{your link 1a}" target="_blank">{your display text 1a}</a></p>
<p><a href="{your link 1b}" target="_blank">{your display text 1b}</a></p>
{etc}
</div>
<span style="font-weight: bold;">{section heading 2}</span>
<div style="margin-left: 40px;">
<p><a href="{your link 2a}" target="_blank">{your display text 2a}</a></p>
<p><a href="{your link 2b}" target="_blank">{your display text 2b}</a></p>
{etc}
</div>
{etc}
</body>
</html>
 
How To Set a Default Home Page in iPad Safari

Before anybody jumps in and says "can't be done", you are correct - it can't. There is no setting for it in Settings, and a search of the web confirms as much. The only advice on offer is to bring up the web page in question, click the icon immediately to the left of the address bar, and select "Add to Home Screen". This brings up a dialogue box which allows you to modify the name of the desktop icon that will be created, and previews the image of the icon (which may be a thumbnail of the actual web page).

By then clicking this desktop icon instead of the standard Safari icon, Safari will always start up at the web page that has been bookmarked, and the icon can be moved on to the home toolbar (and the standard Safari icon moved elsewhere) if you wish.

However, I have found a way to skin this so that the new icon (which links to your own home page) looks exactly like the standard Safari icon (or any other way you want). The only difference is that the custom icon can be deleted but the standard Safari icon cannot.

First, in the "Add to Home Screen" dialogue box, replace whatever text you are offered with "Safari". This is a one time change and cannot be altered afterwards (except by deleting the icon and starting again - a major difference between "Add to Home Screen" and "Add Bookmark"). That's the easy bit.

The second part needs to be done first, and that is to define the icon graphic that will be collected in the process of Add to Home Screen. This is rather like a normal web page Favicon, and I suspect Safari would use a Favicon if one was available, but Apple have their own specifications about size and format (of course). The key is to provide a 144x144x32 .png file and put it somewhere accessible to the web browser (it appears to be live, ie changes to it get propogated through to the desktop icon, but if it is not available at any one time the current icon seems to be cached so it is not necessary that the server used for this is always on line). If it is not exactly 144x144 pixels, the graphic gets scaled and the preview (and desktop icon) shows a black margin (even if the graphic is larger than 144x144).

The key to making the skin look exactly like the standard Safari is to use the existing Safari icon. There are lots of icons available on the Web, and you could choose one of those if you want a different look, but for obvious copyright reasons the standard Safari icon is not amongst them.

Here's what I did:
  1. Took a screen shot of the iPad desktop with the standard Safari icon (simultaneous press of the power button + home button). This added a .png image of the iPad screen to my camera roll;
  2. In Photos, brought up the screen shot and emailed it to myself, the most convenient way to send the file to my PC (web mail);
  3. Downloaded the file from my email to PC, then opened it on a photo editor;
  4. Cropped the image down to 144x144 to pick out the Safari icon (it doesn't matter about the square corners), and saved it as "safari.png";
  5. Added safari.png to my Dropbox account and generated a share link for it ("www" to be replaced with "dl", see post 1). For somebody else this could be anywhere you have write access to and can determine the URL required to "see" the image from a web browser;
  6. Finally, added the following HTML code into the header section of my Favourites home page:
Code: 
<link rel="apple-touch-icon-precomposed" href="https://dl.dropbox.com/s/<random-string>/safari.png"
( "<random-string>" is a place-holder for the actual random string, otherwise everyone would be able to see into my Dropbox account. Obviously the "href=" section needs to be replaced with the URL to your own graphic.)

"-precomposed" stops the iPad adding reflection effects again (they are already added in the screen grab). If you use a flat graphic for an icon, remove that so the iPad adds the 3D effects for you.

As mentioned, it's probably copyright, but as I have explained how you can grab it for yourself I might as well save you the bother:

safari.png

To put it in context, the complete header for my Favourites web page looks like this:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <link rel="apple-touch-icon-precomposed" href="https://dl.dropbox.com/s/<random-string>/safari.png">
  <title>Favourites</title>
</head>

The text between the title tags is what appears in the browser tab, and the default text offered in the Add to Home Page dialogue box.

This is not going to be much use if you want your Safari home page to be a web page to which you do not have write access (to alter the header). There is a way around that. What you need to do is set up a personal home page (similar to my Favourites page) that redirects to the page you actually want. I have tried it, and confirm that it works. My web page which creates a redirected link to the Hummy.tv forum and gives it a Safari desktop icon looks like this:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="refresh" content="0;URL=http://hummy.tv/forum/">
  <link rel="apple-touch-icon-precomposed" href="https://dl.dropbox.com/s/<random-string>/safari.png">
  <title>Hummy Forum</title>
</head>
<body>
</body>
</html>

Note that 'content="0;...' means the redirection will occur after 0 seconds, but this does not provide a window of opportunity to set up a bookmark to the web page before it redirects. Temporarily this needs to be (for example) 'content="100;...' so you can Add to Home Screen before it redirects, and then restore the header to 0 seconds afterwards.

The only drawback I have found to using a home screen link to replace the standard Safari icon in this way is that one can end up opening another tab to Favourites (or whatever). It's a minor inconvenience, the duplicate tab can be closed, but it's not perfect.

This does not get you an icon in the browser tab though (for browsers other than iOS Safari). I will look into Favicons and report back.
 
I've been having a play with a 16x16 .ico file generated from a .png using the on-line generator at www.favicon.co.uk and this line added to the header:
Code: 
 <link rel="shortcut icon" href="https://dl.dropbox.com/s/<random-string>/favicon.ico">

...but it's not working yet :(

Correction: it does in iPad Chrome :) but not in PC IE8 :( - maybe it needs the cache flushed.
 
I can't see why it wouldn't work if it's in the <head> section. If the browser is being strict it might insist on the tag being properly delimited:

Code: 
<link rel="shortcut icon" href="https://dl.dropbox.com/s/<random-string>/favicon.ico" />
 
I noticed that - the example I saw on Wikipedia showed the "/>" delimiter. I tried it both ways, and now notice I did the same with the apple-touch-icon tag.

This may be a silly question, but what is the need of "/>"? ">" is the opposite of "<" so why would it be necessary to mark the closing delimiter in another way? Is it because "<link>" doesn't have a matching "</link>"? Does it ever have a "</link>"? Is the link tag the only tag that behaves in this way?

Hmm... odd, each time I change the source to include "/>", KompoZer removes the "/" when I save. Even poking it in using Notepad has not made the favicon show up in IE8, only Chrome so far (the only other one I have tested). It very much looks like (despite what Wikipedia says), IE8 only supports the favicon.ico being in the web page root folder and not as a link rel redirect.
 
Black Hole said:
I noticed that - the example I saw on Wikipedia showed the "/>" delimiter. I tried it both ways, and now notice I did the same with the apple-touch-icon tag.

This may be a silly question, but what is the need of "/>"? ">" is the opposite of "<" so why would it be necessary to mark the closing delimiter in another way? Is it because "<link>" doesn't have a matching "</link>"? Does it ever have a "</link>"? Is the link tag the only tag that behaves in this way?

Hmm... odd, each time I change the source to include "/>", KompoZer removes the "/" when I save. Even poking it in using Notepad has not made the favicon show up in IE8, only Chrome so far (the only other one I have tested). It very much looks like (despite what Wikipedia says), IE8 only supports the favicon.ico being in the web page root folder and not as a link rel redirect.
Click to expand...

The HTML standard requires all beginning and ending tags to be paired:

<tag>...</tag>

However, tags are allowed to be self closing:

<tag/>

rather than

<tag></tag>

Of course, that will only be relevant for tags with no content, such as <link> or <hr>.

If you don't include the close /> the parser assumes that you have opened a scope for <tag> which is open until </tag> is encountered. Thus, the old usage

<p>Blah Blah
<p>Blah Blah
<hr>
<table>...

is now deprecated and you need to use
<p>Blah Blah</p>
<p>Blah Blah</p>
<hr/>
<table>...

etc. This changed in HTML4 to bring HTML in line with SGML and XML. You can run a check on your pages at

The W3C Validator


to test compliance with the standards. If your page is not compliant, browsers can just about do anything with the display of your page, and generally will!

Here is the error list for the current page



.
 
Shame KompoZer has this bug then! Perhaps I had better see if there is an update (my copy is very old).

However, I have been unable to get IE8 to display the favicon regardless of there being a slash. Chrome is happy, PC and iPad.
 
Black Hole said:
Shame KompoZer has this bug then! Perhaps I had better see if there is an update (my copy is very old).

However, I have been unable to get IE8 to display the favicon regardless of there being a slash. Chrome is happy, PC and iPad.
Click to expand...


Did you clear IE8's history? It stores info in both the cache and history.

You can also stick the favicon in the root of your domain. That doesn't require the <link/> tag. It requires you (a) having a domain, and (b) having access to its root, though. Not sure what that means in this context.
 
The exercise started out to show how one could use a Dropbox account as a personal web server. In order to put a favicon file into the root folder for the web page itself, one would either have to have access to https://dl.dropbox.com/ (obviously not an option) or (possibly) https://dl.dropbox.com/s/<random-string>/ - but as the random string is different for each uploaded file that won't work either.

I have tried everything to make IE8 pick up the link, and as Chrome has no problem with it I can only think that IE8 doesn't implement the link directive (and web pages showing a favicon rely on the default root location to find the .ico file).

Regardless, I have learned some stuff (I realise it's hardly a drop in the ocean of web coding, but it's enough for me), and I hope I have passed on some tips.
 
Black Hole said:
I have tried everything to make IE8 pick up the link, and as Chrome has no problem with it I can only think that IE8 doesn't implement the link directive (and web pages showing a favicon rely on the default root location to find the .ico file).
Click to expand...


It definitely does implement the <link> way. Trouble is, every time you make any changes, it gets confused again!

Have you tried the way suggested on the favicon web site you gave above?

<link rel="icon" href="..." type="image/x-icon" />

Also, is your .ico file definitely an ICO file and not just a PNG file renamed as an ICO file? (Just asking!)
 
Have you thought of using Weebly instead?

Test example

That way you solve the problem in the OP. Just stick any favourite links there.
 
I don't reckon that's going to allow the Safari icon substitution, is it?

It has been suggested that both of the following HTML lines should be included:
Code: 
<link rel="shortcut icon" href="http://www.favicon.co.uk/favicon.ico" type="image/vnd.microsoft.icon" /> 
<link rel="icon" href="http://www.favicon.co.uk/favicon.ico" type="image/vnd.microsoft.icon" />
(and obviously you'd replace favicon.co.uk with your website address)
So your code could look like this:-
Code: 
<head>
<link rel="icon" href="http://www.favicon.co.uk/favicon.ico" type="image/x-icon" /> 
<link rel="shortcut icon" href="http://www.favicon.co.uk/favicon.ico" type="image/x-icon" />
</head>
However, only the former is necessary, as "shortcut icon" will be treated as a list of possibilities by standards-compliant browsers (with "shortcut" being ignored, and "icon" used); while Internet Explorer will treat it as a single name ("shortcut icon"). The result is that all browsers understand the code. It is only necessary to include a second piece of code if one desires to offer an alternative image to modern browsers (e.g. an animated GIF).
Click to expand...
How do you explain the obvious differences between the two code sections? No matter, I have tried both. It's also not what the Wikipedia article says. Interestingly, I edited the HTML while IE8 had it on screen, and a pop-up said the HTML had changed!
 
"I was fishing around for a way to create a web page on which I can store links to devices on my home network, so that it would be accessible to all my computing devices. By extension it could also store my web favourites, thus not have to find a link is missing from the favourites list on any particular computer."

I have an even simpler solution.

Use Google Chrome on all your devices.
Make sure you are logged into Chrome with a Gmail account, which is free, and you could, if you wanted, use a dedicated one.
Set up Sync, so that your bookmarks/favourites are synced everywhere.

That way, you have access to all the links you want on every device. You can even set up Chrome so that your bookmarks are your home page!

Problem solved. :)

(Plus you get a superior browser. Firefox allows something similar but it is more complicated. Chrome's solution is beautifully simple.)
 
Thank you. If I used Chrome on all my devices... but as I do the vast majority of my browsing with the iPad, and as the iPad will not open any other browser than Safari for a desktop bookmark or an email link (or any other link in any other application except another browser), I'm afraid there is no getting away from Safari - like it or not.

My focus is on solving the wrinkles rather than avoiding them.
 
Black Hole said:
Thank you. If I used Chrome on all my devices... but as I do the vast majority of my browsing with the iPad, and as the iPad will not open any other browser than Safari for a desktop bookmark or an email link (or any other link in any other application except another browser), I'm afraid there is no getting away from Safari - like it or not.
Click to expand...

Sorry, BH, I had no idea iPads were so primitive. I don't have these problems with Android.

Why not use Chrome on the iPad only for your home page of links, then? That would solve the problem. The Web page at Weebly would, too, rather than just avoiding it.
 
Honestly, it's not a problem - just a technical challenge. No doubt I would have taken the Weebly option had that been the first idea to come up, but I doubt it has the facility to serve the apple-icon graphic, or a custom favicon?

The challenge is solved regarding iPad Safari, since it does not display favicons (at least it doesn't on mine because I have the bookmarks bar turned off - I don't know whether it would otherwise). The challenge is solved with Chrome on iPad or PC, as I have been able to serve a favicon to both these. It is only IE8 which remains intransigent.

As to making the web page pretty, Weebly appears to do this easily whereas my Dropbox file has to be prepared the hard way. There is a range of options were I to restrict myself to altering it on the PC (KompoZer happened to be in my toolbox and the first thing I reached for) because the Dropbox sync folder is "just another folder" in the Windows file system - I could use WebFusion for example, which is an authoring package rather than an HTML editor. However, its output would not be amenable to hand editing because of its complexity, and any edits made would not import back into the source files (the HTML is essentially compiled from a definition). So far, if I want to make changes from the iPad, I am restricted to raw edit of the HTML with a text editor because - although I could shell out for a proper HTML editor - any editor has to integrate with the Dropbox app in order to access the protected data space (iOS apps do not share the file system with each other, you cannot treat every folder as "just another folder") and as far as I can see there aren't any of those. You might call this primitive, but (as long as you just want to use the iPad/iTouch/iPhone rather than hack around with it) it ensures maximum system security and fewest help calls because one app has adversely affected another.

It seems to me a hybrid approach is the way to go. My Dropbox system could be used to skin Safari or provide a custom favicon, with a zero second redirect to a Weebly page (or some other content provider) which provides easy editing via a browser and pretty presentation, as per post 3.
 
Black Hole said:
If you like this and don't already have a Dropbox account, if you let me send a recommendation to your email address (that you then use when registering) I will get an extra 500MB storage per successful referral.
Click to expand...

Could you just set up some extra gmail/outlook mail accounts and send your recommendations to those, then open up some dropbox accounts on those dummy emails and start inheriting your 500mb whenever you want?
 
oijonesey said:
Could you just set up some extra gmail/outlook mail accounts and send your recommendations to those, then open up some dropbox accounts on those dummy emails and start inheriting your 500mb whenever you want?
Click to expand...

But M$ gave me 25Gb for free when I registered with SkyDrive, and I didn't even need to ask.

Google Play also gave me unlimited storage for my music collection. I am using 30Gb of it at the moment, which works out at 0% usage.
 
You must log in or register to reply here.
Back
Top