<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Connorhd &#187; web</title>
	<atom:link href="http://connorhd.co.uk/tag/web/feed/" rel="self" type="application/rss+xml" />
	<link>http://connorhd.co.uk</link>
	<description>Interesting stuff.</description>
	<lastBuildDate>Wed, 24 Mar 2010 15:53:01 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.1</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>dafont.com</title>
		<link>http://connorhd.co.uk/2010/02/04/dafont-com/</link>
		<comments>http://connorhd.co.uk/2010/02/04/dafont-com/#comments</comments>
		<pubDate>Thu, 04 Feb 2010 18:05:43 +0000</pubDate>
		<dc:creator>Connorhd</dc:creator>
				<category><![CDATA[Links]]></category>
		<category><![CDATA[font]]></category>
		<category><![CDATA[web]]></category>

		<guid isPermaLink="false">http://connorhd.co.uk/2010/02/04/dafont-com/</guid>
		<description><![CDATA[Not that interesting, but an awesome site for finding fonts. Currently has over 10,000 free fonts, including the one used for the slogan on this site!
]]></description>
			<content:encoded><![CDATA[<p>Not that interesting, but an awesome site for finding fonts. Currently has over 10,000 free fonts, including the one used for the slogan on this site!</p>
]]></content:encoded>
			<wfw:commentRss>http://connorhd.co.uk/2010/02/04/dafont-com/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>WebApp &#8211; An Android experiment</title>
		<link>http://connorhd.co.uk/2010/02/03/webapp-an-android-experiment/</link>
		<comments>http://connorhd.co.uk/2010/02/03/webapp-an-android-experiment/#comments</comments>
		<pubDate>Wed, 03 Feb 2010 23:56:03 +0000</pubDate>
		<dc:creator>Connorhd</dc:creator>
				<category><![CDATA[Projects]]></category>
		<category><![CDATA[android]]></category>
		<category><![CDATA[ircster]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[phone]]></category>
		<category><![CDATA[planet compsoc]]></category>
		<category><![CDATA[web]]></category>

		<guid isPermaLink="false">http://connorhd.co.uk/?p=115</guid>
		<description><![CDATA[After thinking about a JavaScript API to allow alerts on an Android phone in this post, I came up with a method of adding this using the current Java Android app API. The solution involves starting a Webkit instance in a custom app, and intercepting links with a certain prefix. In this example android://alert/description creates an [...]]]></description>
			<content:encoded><![CDATA[<p>After thinking about a JavaScript API to allow alerts on an Android phone in <a href="http://connorhd.co.uk/2010/02/03/website-based-smartphone-applications/">this post</a>, I came up with a method of adding this using the current Java Android app API. The solution involves starting a Webkit instance in a custom app, and intercepting links with a certain prefix. In this example android://alert/description creates an alert with title &#8220;alert&#8221; and description &#8220;description&#8221;.</p>
<p>To demonstrate here are some screenshots of a <a href="http://connorhd.co.uk/files/WebApp.htm">sample page</a> using a <a href="http://connorhd.co.uk/files/WebApp.apk">sample application</a> (if you have an Android phone you can use that link to download it and try it yourself):</p>
<p>The application when you load it:</p>
<p><a href="http://connorhd.co.uk/wp-content/uploads/2010/02/WebApp1.png"><img class="alignnone size-full wp-image-116" title="WebApp1" src="http://connorhd.co.uk/wp-content/uploads/2010/02/WebApp1.png" alt="" width="320" height="480" /></a></p>
<p>When clicking go an alert is created:</p>
<p><a href="http://connorhd.co.uk/wp-content/uploads/2010/02/WebApp2.png"><img class="alignnone size-full wp-image-117" title="WebApp2" src="http://connorhd.co.uk/wp-content/uploads/2010/02/WebApp2.png" alt="" width="320" height="480" /></a></p>
<p>Viewing the created alert:</p>
<p><a href="http://connorhd.co.uk/wp-content/uploads/2010/02/WebApp3.png"><img class="alignnone size-full wp-image-118" title="WebApp3" src="http://connorhd.co.uk/wp-content/uploads/2010/02/WebApp3.png" alt="" width="320" height="480" /></a></p>
<p>The example page is very simple javascript:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> go<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	window.<span style="color: #660066;">location</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">'android://'</span><span style="color: #339933;">+</span>document.<span style="color: #660066;">getElementById</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'title'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">value</span>
		<span style="color: #339933;">+</span><span style="color: #3366CC;">'/'</span><span style="color: #339933;">+</span>document.<span style="color: #660066;">getElementById</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'text'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">value</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>The source for the app follows and is also fairly simple, most of the code is the rather complex way alerts are generated on Android:</p>

<div class="wp_syntax"><div class="code"><pre class="java" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">package</span> <span style="color: #006699;">uk.co.connorhd.android.webapp</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">java.net.URLDecoder</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">uk.co.connorhd.android.webapp.R</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">uk.co.connorhd.android.webapp.WebApp</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">android.app.Activity</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">android.app.Notification</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">android.app.NotificationManager</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">android.app.PendingIntent</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">android.content.Context</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">android.content.Intent</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">android.os.Bundle</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">android.webkit.WebView</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">android.webkit.WebViewClient</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">android.widget.Toast</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000000; font-weight: bold;">class</span> WebApp <span style="color: #000000; font-weight: bold;">extends</span> Activity <span style="color: #009900;">&#123;</span>
  <span style="color: #008000; font-style: italic; font-weight: bold;">/** Called when the activity is first created. */</span>
  @Override
  <span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000066; font-weight: bold;">void</span> onCreate<span style="color: #009900;">&#40;</span>Bundle savedInstanceState<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">super</span>.<span style="color: #006633;">onCreate</span><span style="color: #009900;">&#40;</span>savedInstanceState<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    WebView webview <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> WebView<span style="color: #009900;">&#40;</span><span style="color: #000000; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
    <span style="color: #666666; font-style: italic;">// We're testing, clear the cache.</span>
    webview.<span style="color: #006633;">clearCache</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
    setContentView<span style="color: #009900;">&#40;</span>webview<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
    webview.<span style="color: #006633;">getSettings</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #006633;">setJavaScriptEnabled</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
    <span style="color: #000000; font-weight: bold;">final</span> Activity activity <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">this</span><span style="color: #339933;">;</span>
    webview.<span style="color: #006633;">setWebViewClient</span><span style="color: #009900;">&#40;</span><span style="color: #000000; font-weight: bold;">new</span> WebViewClient<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      <span style="color: #000066; font-weight: bold;">int</span> alert <span style="color: #339933;">=</span> <span style="color: #cc66cc;">1</span><span style="color: #339933;">;</span>
&nbsp;
      <span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000066; font-weight: bold;">void</span> onReceivedError<span style="color: #009900;">&#40;</span>WebView view, <span style="color: #000066; font-weight: bold;">int</span> errorCode,
          <span style="color: #003399;">String</span> description, <span style="color: #003399;">String</span> failingUrl<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        Toast.<span style="color: #006633;">makeText</span><span style="color: #009900;">&#40;</span>activity, <span style="color: #0000ff;">&quot;Oh no! &quot;</span> <span style="color: #339933;">+</span> description,
            Toast.<span style="color: #006633;">LENGTH_SHORT</span><span style="color: #009900;">&#41;</span>.<span style="color: #006633;">show</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
      <span style="color: #009900;">&#125;</span>
&nbsp;
      <span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000066; font-weight: bold;">boolean</span> shouldOverrideUrlLoading<span style="color: #009900;">&#40;</span>WebView view, <span style="color: #003399;">String</span> url<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #666666; font-style: italic;">// Is it a hack?</span>
        <span style="color: #000000; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>url.<span style="color: #006633;">startsWith</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;android&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
          <span style="color: #003399;">String</span> ns <span style="color: #339933;">=</span> <span style="color: #003399;">Context</span>.<span style="color: #006633;">NOTIFICATION_SERVICE</span><span style="color: #339933;">;</span>
          NotificationManager mNotificationManager <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span>NotificationManager<span style="color: #009900;">&#41;</span> getSystemService<span style="color: #009900;">&#40;</span>ns<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
          <span style="color: #000066; font-weight: bold;">int</span> icon <span style="color: #339933;">=</span> R.<span style="color: #006633;">drawable</span>.<span style="color: #006633;">icon</span><span style="color: #339933;">;</span>
          CharSequence tickerText <span style="color: #339933;">=</span> <span style="color: #0000ff;">&quot;WebApp Alert!&quot;</span><span style="color: #339933;">;</span>
          <span style="color: #000066; font-weight: bold;">long</span> when <span style="color: #339933;">=</span> <span style="color: #003399;">System</span>.<span style="color: #006633;">currentTimeMillis</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
          Notification notification <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> Notification<span style="color: #009900;">&#40;</span>icon,
              tickerText, when<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
          notification.<span style="color: #006633;">flags</span> <span style="color: #339933;">=</span> Notification.<span style="color: #006633;">FLAG_AUTO_CANCEL</span><span style="color: #339933;">;</span>
          <span style="color: #003399;">Context</span> context <span style="color: #339933;">=</span> getApplicationContext<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
          <span style="color: #003399;">String</span><span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span> split <span style="color: #339933;">=</span> url.<span style="color: #006633;">split</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;/&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
          CharSequence contentTitle <span style="color: #339933;">=</span> <span style="color: #003399;">URLDecoder</span>.<span style="color: #006633;">decode</span><span style="color: #009900;">&#40;</span>split<span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">2</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
          CharSequence contentText <span style="color: #339933;">=</span> <span style="color: #003399;">URLDecoder</span>.<span style="color: #006633;">decode</span><span style="color: #009900;">&#40;</span>split<span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">3</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
          Intent notificationIntent <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> Intent<span style="color: #009900;">&#40;</span>activity,
              WebApp.<span style="color: #000000; font-weight: bold;">class</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
          PendingIntent contentIntent <span style="color: #339933;">=</span> PendingIntent.<span style="color: #006633;">getActivity</span><span style="color: #009900;">&#40;</span>
              activity, <span style="color: #cc66cc;">0</span>, notificationIntent, <span style="color: #cc66cc;">0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
          notification.<span style="color: #006633;">setLatestEventInfo</span><span style="color: #009900;">&#40;</span>context, contentTitle,
              contentText, contentIntent<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
          mNotificationManager.<span style="color: #006633;">notify</span><span style="color: #009900;">&#40;</span>alert<span style="color: #339933;">++</span>, notification<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span> <span style="color: #000000; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
          view.<span style="color: #006633;">loadUrl</span><span style="color: #009900;">&#40;</span>url<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
        <span style="color: #000000; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">true</span><span style="color: #339933;">;</span>
      <span style="color: #009900;">&#125;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
    webview.<span style="color: #006633;">loadUrl</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;http://connorhd.co.uk/files/WebApp.htm&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>This could easily be extended (and I may try to do this myself for Ircster) to provide all the standard browser functionality (for example the back button doesn&#8217;t currently work) and a more complete API to interface with Android.</p>
]]></content:encoded>
			<wfw:commentRss>http://connorhd.co.uk/2010/02/03/webapp-an-android-experiment/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Website based smartphone applications</title>
		<link>http://connorhd.co.uk/2010/02/03/website-based-smartphone-applications/</link>
		<comments>http://connorhd.co.uk/2010/02/03/website-based-smartphone-applications/#comments</comments>
		<pubDate>Wed, 03 Feb 2010 00:06:03 +0000</pubDate>
		<dc:creator>Connorhd</dc:creator>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[android]]></category>
		<category><![CDATA[iphone]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[planet compsoc]]></category>
		<category><![CDATA[web]]></category>

		<guid isPermaLink="false">http://connorhd.co.uk/?p=56</guid>
		<description><![CDATA[First of all, most applications for smartphones (in this post smartphone mainly means iPhone or Android) are actually just interfaces (often simplified) to websites, i.e. Twitter, Google Maps, etc. However, both the Android and iPhone appear to fail quite badly at allowing websites to directly integrate with the phone, and I have some thoughts on how [...]]]></description>
			<content:encoded><![CDATA[<p>First of all, most applications for smartphones (in this post smartphone mainly means iPhone or Android) are actually just interfaces (often simplified) to websites, i.e. Twitter, Google Maps, etc. However, both the Android and iPhone appear to fail quite badly at allowing websites to directly integrate with the phone, and I have some thoughts on how they could work better. When thinking about these ideas I am mainly thinking of what features I would like to see when developing phone specific features for <a href="http://ircster.com">Ircster</a> (a fairly major project I am working on that I will eventually get round to writing blog post(s) about), but I think the same features would be useful to a large number of developers and lead to a better platform for users and developers alike.</p>
<p>Looking at the iPhone first, it does allow websites to be directly added as &#8220;applications&#8221; (applications meaning buttons on the iPhones menu). It also allows some limited customisation of the way the website is displayed when it is accessed as an application using html meta tags (i.e. <code>&lt;meta content="yes" name="apple-mobile-web-app-capable" /&gt;</code>). This is a good start, however, the iPhone seems to be completely let down here by not allowing background applications, meaning there is no way to run a website constantly and alert the user on specific events, or receive sensor information (i.e. GPS) while the phone is being used for another purpose.</p>
<p>Android on the other hand supports background applications, however it does not allow (as far as I can tell) for websites to be added as applications, and does not have a way for websites to interact with the phones features. What I would like to see is a JavaScript API allowing phone features such as alerts to be triggered by the website (possibly similar to the <a href="http://code.google.com/chrome/extensions/messaging.html">message passing</a> feature in Chrome extensions), and also for the phone to reply to the app with sensor information such as GPS location. This seems to fit in very well with the ideas behind Chrome OS and applications being simply websites. (While considering this it occurred to me some of this functionality could be hacked into Android using its current Java app platform, something I have started working on and will demonstrate in another blog post.)</p>
<p>Desktop applications definitely seem to be being replaced by websites, I don&#8217;t see why the opposite should be true on phones (websites should not need to write specific phone apps). I&#8217;d like to see APIs included with smartphone browsers (<a href="http://gears.google.com/">Google Gears</a> is a potential start, although this appears to be deprecated on Android) that provide more direct interaction with the phones features (alerts, access to sensors, local storage and local serving of content) and allow complete applications to be developed as websites for multiple platforms.</p>
]]></content:encoded>
			<wfw:commentRss>http://connorhd.co.uk/2010/02/03/website-based-smartphone-applications/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>
