Javascript slideshow tutorial

Here is a great tutorial on a simple scrolling slideshow. You can define the time and its very easy to implement. Here is the code from the article:


var dimages=new Array();
var numImages=2;
for (i=0; i<numImages; i++)
  dimages[i]=new Image();
var curImage=-1;
function swapPicture()
  if (document.images)
    var nextImage=curImage+1;
    if (nextImage>=numImages)
    if (dimages[nextImage] && dimages[nextImage].complete)
      var target=0;
      if (document.images.myImage)
      if (document.all && document.getElementById("myImage"))

      // make sure target is valid.  It might not be valid
      //   if the page has not finished loading
      if (target)
      setTimeout("swapPicture()", 5000);
      setTimeout("swapPicture()", 500);
setTimeout("swapPicture()", 5000);

Then here is the code to place it:

<IMG WIDTH=250 HEIGHT=250 ID="myImage" NAME="myImage"

How to make an HTML webpage the correct size on a mobile device

I have written about this a few times (just last week) and I wanted to add some details to the discussion. Basically when designing a webpage for the mobile device you want your page to show up as the correct size on the device so the user does not need to zoom. To do it you would use the viewport code. Today I am adding some more details to that:

General width. Keep in mind the ‘780’ changes depending on the size of your actual page:

<meta name="viewport" content="width=780">

This code just matches their device regardless of what you set:

<meta name="viewport" content="width=device-width">

The following disables zooming altogether:

<meta name="viewport" content="width=device-width, user-scalable=no" /> 

This sets the zoom level when the page is first opened:

<meta name="viewport" content="initial-scale=1">

This creates no zooming and the user has to move the screen around:

<meta name="viewport" content="maximum-scale=1">

I encourage you to try them all out to see what works for your site and so that you get a better idea of what they all look like.

HTML5 Security and Vulnerability Issues

While these are fairly obvious they are something that users pushing HTML5 should be aware of. The first is vulnerability. What does this mean?

All of your code is essentially open source. While thats great for me, its not great for businesses and really anyone who is trying to make money off of their software. There are some ways around it but keep in mind that both HTML5 and Javascript are open source. Here is a good article that goes into it:

HTML5 – Not Designed for Business Applications

The next issue is security. Apparently the standards have not really been developed with security in mind as it will really be up the developers, users, and browsers. So there are going to be some issues when this is used more often…and of course this is the case with any new technology. Here is an article that goes into the topic:

Old hacking tricks work too easily in attacks on HTML5, security expert says

Facebook CEO: ‘Betting on HTML5 our biggest mistake’ and future of HTML5

Facebook CEO Mark Zuckerberg went on record yesterday discussing their recent move to a native app in Apple’s iOS. The facebook app had been developed in HTML5. Now I am not quite sure why a company with the resources that facebook does would have even considered an HTML5 app vs a native as native is definitely better, however, they did. But why was it a mistake? Because Apple has chosen to not allow HTML5 apps to run as fast and smooth as native ones.

Article is here

So what is the future of HTML5? Well at this point APPLE does not want to support HTML5 mobile apps. Why? They lose control and money. Sure they are supporting it in the browsers but they are not supporting it in apps. Why would HTML5 apps be good for developers? Because you could develop one app and publish it to all mobile devices. So for instance, Apple has purposely made apps running HTML5 run slower than they would as webpages in their browser, citing security and stability concerns. While it might be valid it a very suspicious as Apple has been trying to tell people to use HTML5 instead of Flash for similar reasons.

Here is an article about Apple stopping HTML5 dead in its tracks on iOS (not the browser). And this has not changed with iOS5.

Here is another article about why apps should go to HTML5 but they are not being supported:

Why apps should but are NOT going cross platform with HTML5

Facebook drops HTML5 for native iOS app (Xcode)

I think this speaks volumes about the power of HTML5 vs native app development. What I find interesting is that both Apple and Google claim to really push HTML5 yet they still make sure their native apps run significantly better – for now at least because I am sure their futures OSs will offer better support. I am surprised a company like facebook even attempted HTML5 vs a native app to begin with and am surprised it held up so well to this point. This shows HTML5 does have power but not enough compared to Xcode. Xcode offers a lot more and HTML5 is really only designed for simple apps. When you are a company like facebook that has millions of users I could only imagine how bogged the app could easily get. Well here is the article for your reading pleasure:


Another article:

Flash is dead: Why this rumor makes sense for (some) instructional designers and why it’s not true

I keep seeing forum posts like this in LinkIn and I have really been thinking a lot about it. Why have I been thinking a lot about it? Well because Flash is a very powerful software and there is currently nothing that matches its power. So how is Flash dead if there is not replacement for it? Then it all clicked and here are my thoughts….

1. HTML5 Rumors. HTML5 has been touted as a potential replacement to Flash. It does have some of the same capabilities. The issue is that HTML5 is really geared towards simple animations and interactions, not powerful animations that Flash is designed for. Thus HTML5 cannot replace Flash at this point. Will it ever? Quite possibly it will (I personally think it will be HTML6 that does it) but at this point you really need to know both Flash and Javascript so that you can offer multiple solutions to clients. I personally would not develop a game in HTML5 unless it was very simple because it just doesnt have the power to create something more in-depth.

2. Flash player is dying. Yes that is true in the mobile platform, but not the desktop/laptop. However, Adobe has instead focused on Adobe Air for the mobile platform and stopped focusing on flash player. What is Adobe Air: It allows you to publish Apps for iPhone, iPad, and Android. This leads to point 3.

3. Flash doesnt work on Apple iPad or iPhone. Well that is not true. It doesnt work in their browsers but it works very well on the devices. If you look at both Apple and Android, they are pushing apps, not the browers (at least that is what they want developers to focus on so that they can control (or make money off of) their stores). So Adobe is pushing Flash to mobile apps not the browsers (and they didnt have much of a choice as apple would not allow flash player on its browser). To publish a Flash app to iPhone or iPad, you simply click the publish button in Flash to publish as an app. And yes, there are tons of apps (some in the top 50 games) that are purely Flash based and you probably never knew. So yes, Flash does work very well on iPhone and iPad.

4. Instructional designers are not programmers. Our field is not computer science and I do not expect an ISDer to be able to program. Flash requires a lot of programming so most instructional designers cannot use it beyond basic tweens and maybe some simple interactions. As a result, they have turned to other software, such as Articulate, Lectora, PPT, Captivate, etc. that are very easy to use. That way the instructional designer can now also develop training without the need for a programmer and tout themselves as a one stop shop. The problem is that this software is not always the solution. It is simple software and produces simple training. What do I mean by simple training? I just mean training with some animation, limited interaction, and is perfect for flashcard type training (that can includes stories, cases, simple games etc.). I am not saying its bad, this simple software can create great training, just that its not a be-all end-all for training. It is not a total solution. It cannot do everything. If someone were to tell me they were going to use one of the simple software mentioned above (or any software for that matter) to develop my training without seeing my needs analysis and design requirements, I would be very very scared that they did not know what they were doing. You simply need to have Flash and other programming software in your arsenal. If you do not you are really limiting what you can do.

Just an fyi here. I am not against the ISDer being a developer or anything like that. I am an ISDer that is a developer as well. I can program and use all of the software I have mentioned above. I also like all of the software I have mentioned. I love HTML5. But I still just cannot figure out how ISDers are trying to dismiss Flash when none of the software I mentioned above matches its power. Am I biased? Well I do really like Flash but I also really like a lot of other software too. I probably like javascript the best which is what HTML5 is based on so if anything I probably like HTML5 more. I just know that most ISDers are not programmers and they are touting solutions that may not be appropriate because they want to be the one stop shop. Additionally I know that since most ISDers are not developers they are listening to a rumor and dismissing Flash just because they do not know any better because they do not know what any of this software does as they are not developing with it and thus believe this light software is actually a replacement for Flash. Maybe I am wrong? Actually I hope I am but I just do not see many other reasons.