The iPad was a bit of a revelation, but as everyone in the entire world is writing about that at the moment, I thought that first up I’d spend a bit of time on the new iPhone.

Here’s some features. There is a new gyroscope installed (on top of  the two built into earler iPhones) which lets the phone recognise exactly where it is in space at any given moment. There is another camera on the front of the phone, which is spruiked to be for video chat but will also be handy for developers, who will be able to harness the camera’s ability to sense where the user’s eyes are looking and make iPhone app features for it.

This is interesting when you consider things like banner blindness – studies have used eye-tracking sensors to show that people don’t read ads which makes me think advertisers are going to use eye-tracking technology to hit users, literally, right between the eyes. What will be more interesting will be how much of that users are going to be prepared to put up with.

Here’s the official site for the iPhone 4.

And while you’re looking around Apple, you should have a look at the HTML 5 experimentation page to get a taste of some of the extremely nice new capabilities of the up and coming code.

We learned tonight that W3C’s approach to developing the recommendation for HTML 5 is more grassroots that previous efforts. Instead of developing the recommendation and having browsers adopt it (which resulted in browsers picking and choosing what they used), most browser organisations are involved in the working group and are building the language ahead of the recommendation. HTML 5 won’t be ‘done’ until around 2020, but it will be able to adopted by developers as it develops. Nice.

And just for my two cents’ worth on the iPad, it is pretty amazing – like an iPhone on ecstasy really. Books have pages that turn, drawing tools that immediately sucked me in, and the maps app powered by Google could have you lose track of time wandering a virtual earth.

It’s intuitive enough for my young children to use without much instruction, and the responsiveness of the screen was great, although I think if I had a lot of typing to do I’d still want a separate keyboard to use with it. One thing is certain: developers are going to have a ball designing for this new toy.

Speaking of toys, that is, important and necessary tools, I bought a Mac a few weeks ago, which was a big step for this decade-long PC user. The retail store with its glass walls, opaque glass stairs and polished, smiling security guards was speckled with blue-shirted sales assistants assuring me with comforting phrases “Steve is my boss” and “we just want to help people”.

The glass staircase inside the Apple Retail Store Sydney

(The strangest thing was that they really appeared to believe it, which is, even if it is part of the job, impressive – in my work organising, and my playtime shopping, I have rarely come across such a universally happy workforce.)

Anyhow, by the end of the shopping experience, I was handing over too much cash and quipped that, yes, I was coming inside the tent. This is how it went:

Blue shirted chap: “Wow, cool, your first Mac?”

Me: “Yes (wince) I’m joining the cult.”

Blue shirted chap: “We’re not a cult, we’re a family.”

Me: “That’s what cults always say.”

(Blue shirt responds with smile – a big, big, smile.)

Enough of this – if you’ve read this far I’m impressed by your stamina. Thanks to all DMT people for a great experience the last few months – I’ve learnt a lot this semester and am hoping to build on it and learn more web design, particularly HTML 5. I’m nowhere near to being classed as even the shadow of a qualified geek yet, but am starting to think that this could be possible. Maybe.

And how could I forget? Here’s my final project report, with link to the completed, valid site. Enjoy.

So, first Lucy is going to send me her Javascript email validation code, and I thought I should post the link to the code I used for the booking form on my site – here it is, hopefully a few people might find it useful.

It’s straightforward code to apply and does validate the email address on the server-side, but it’s a bit slow, and the ‘email failure’ message comes up in a separate, boring old white screen, just as the ‘congrats your email worked’ message does. I think I could tolerate the boring old white screen if the email worked, but not if the email didn’t work, so I’ll give the client-side validation with Javascript a go.

Having said that of course, with only one week to go I’ll may have to set it aside and work on client-side email checking post-assignment due-date. And in any case I’ve got some familiarity with Javascript through the alert boxes I’ve created for the ‘Links’ in the Resources page and with the Longtail JW FLV player for the video, so it’s not the worst outcome overall.

Also, my CSS validation problems may be solved. I had completely forgotten Viveka mentioning in an earlier class that there is a bit of a hack around to get CSS3 properties to validate – remember my curvy borders on menu items? Thanks again gals! It’s apparently some code you insert in the header of the html, but preliminary investigations have yielded nothing. Zip.

I’ll do some more looking around and see if I can find this in my notes and try and get this working. If anyone else can remember the code – and where it needs to be placed – please let me know!

However as I mentioned in my last post (deep breath), I can live with CSS2 properties and the menu looking a bit boxy for the purposes of the assignment. C’est la vie.

(Just as an aside, is anyone finding it hilarious how obsessive this process can get? To think that I have a bit of an unnatural attachment to curvy corners?! Who would have thought, eh?)

Another thing I thought I should mention, as I did in my presentation this evening, YouTube tutorials really got me out of a hole last week – I mentioned this only briefly in an earlier post, but here is the tutorial that saved my life on the JW player problems I was having. The words from Pete from work are also echoing in my ears – “the machine is dumb, you have to tell it where to look”. Those words and the video tutorials got that particular issue sorted. It was a different in file names between the supplied files for the player, and the file name automatically included in the player’s wizard. It was one of those blink and you’ll miss it things.

My plans to get this project happening in the real world are going to mean many more hours in front of my computer, but I think it will be worth the trouble. I’m going to learn Joomla, the fabbo open-source CMS that I’ve used a little for work, but I want to get to know it better. If anyone’s interested, here’s a great page in the Joomla documentation that is the how-to bible for web troglodytes like myself. And I’ll also be getting to know the Mac platform – I’m going to get to know TextMate and Filezilla and hopefully Photoshop. Lucky it’s winter…

And the last, crucial thing? Getting the content, early. I now have a really solid understanding of the frustration developers have without the finalised content to include in designs. The content will often determine the overall look of the site and it’s really important to have that in place, particularly with images. Loading up dummy content adds anywhere from 30-50% more time onto a project I reckon, which you as a developer don’t want the hassle with and certainly clients don’t want to wear the extra cost involved.

After another rainy day full of coding, I have this to offer:

http://www.corourke.vacau.com/index.php

It works – even the dratted php form and date stamp – and it is 99.9% valid.

I’ve had to include the Issuu PDF files in another way – they’re now an image link to the Issuu site, where it can be viewed in a similar way as when the code was embedded. The problem, as I’ve outlined in previous posts, is that the embed code doesn’t validate – the Issuu employees on recent Issuu support forums say as much and that people have to live with it for the time being, which is pretty disappointing.

But I’ve had some success with the Longtail Flash Player – thanks to some fantastic YouTube tutorials and a fresh state of mind, it’s all working. I wouldn’t advise watching it though – it’s a 3 second video with very dodgy sound!

The form works well enough as well for me to live with it, but I am yet to re-attempt to master the Javascript email validation – the last time I had a go it seemed to stop the form from working, and it wouldn’t validate.

So apart from the CSS validation issues I’ve mentioned earlier, all is pretty right to go.

Now to explain myself. I’ve got one day and 3000 words ahead of me…

Celebration Rites home page - the latest incarnation

Now for the troubleshooting, and if anyone can help me I’d be most grateful. I’ve got everything working so far except for the Longtail Flash Player, so I might have to make do with the YouTube embed that I worked out earlier in the semester.

The most frustrating thing to deal with over the weekend was, without doubt, the php. I got a form from this site, then pulled it onto a page, uploaded to the server and it worked! Hooray! Then, much later when I pulled the site together, thinking I’d used the same workflow and changed nothing about the site, it didn’t work. Much hair pulling and gnashing of teeth followed. Double checking of workflow and files. Nothing. More gnashing. Moving on to including the date stamp on the site was even more frustrating. I’ll save my second go at both for later in the week.

Some great tips from our IT/coms/campaigns/web master at work who gave me some tips that might also be useful for people to keep in mind.

“Couple of little things… the default home page, often dependant on the server, should be index.php or index.html or index.htm. If you put in the domain without it, you’ll get a directory listing and make your site easy to hack.”

Thanks Pete! He also gave me a quick lesson in paths last week and got me reading through the php.info file documentation. I have a feeling that is the key problem with the php not working. Hmmmmm. More on this later.

Late in the weekend I moved on to validation issues: Good news – the html is valid on most pages. But of course there are some serious validation problems, and they are mainly with the extras on the site I wanted to include. You guessed it, Flash appears to be a BIG problem.

I was really keen to incorporate Issuu into my site, on the resources page. It looks good, and works, but it’s not working in IE and it won’t validate. I’ve taken a look at the W3 working group guru’s blog post on a work around but I have to admit it’s not making a lot of sense to me at the moment.

Does anyone have a more comprehensible way of working around the problem of <embed> not validating? I’ve got the problem now with Issuu but I can see it’s going to be the same again for the YouTube or Longtail embedding.

The CSS is valid as well, except for some code I gleaned from the CSS Cookbook, which shifts the reader to CSS3, for which standards are still in development (for the most part). It’s the nice little bits of code that make the curvy corners on my menu.

My curvy menu

I’d already tested it in IE and was prepared to live with it no looking so nice there (bit of progressive enhancement), but it appears that I won’t be able to progress that far for this assignment.

My square-edged menu

It sounds like heresy, but I’m planning on reinserting the code when I use the site for my client out there in the real world. Sorry Viv, Oanh!

For those of you who are lost already, I like to think of it a bit like shorthand – hacks out there might even still use this ol’ fashioned technology (it uses a pen and paper):

The Teeline alphabet

Thanks to Eric Lee for reminding me of the precise Teeline shorthand alphabet.

Shorthand is another language which has a logic to it, and similar to JQuery, it also has a ‘library’ of commonly written symbols. The only difference is that you can hack at Teeline shorthand, as often it is only you who has to translate it. Ah those were the days…

Anyhow, to make JQuery work, you need to have a copy of the JQuery library on your server, then include your .js files where your code is housed in the header of your html document. Then you use id (#) – remember only one id per document is allowed – and class (. ) selectors to attach functions that can do a vast array of things to your webpage.

When I say vast I mean vast – it’s difficult to get your head around what is available by downloading the library and having a look at it. So maybe start at the beginning if you’re interested – here’s the JQuery starter kit we used in class for an introduction.

So it’s knuckle down time for my final project – Viveka and Oanh gave us some good tips for writing up the final report that is due alongside the project: remember to consider the assessment criteria that is in the course outline. I’m going to do as recommended and place each assessment criteria as a heading in the final report in order to give my document some structure, then write over the headings (or make more user-friendly headings) in the final draft. Remember to be reflective, and if some parts of the project haven’t manifested, then justify (or explain) why this has happened.

Oh, and we have to finish building the site before presenting to class in two weeks. That’s fourteen days, and the clock is ticking.

For people who are well-versed with video here’s the short version of video building to date: I can successfully embed YouTube video in my site (yes, easy) but installing Longtail FlashPlayer and getting videos I’ve created to play in site pages hasn’t happened yet. I have a black box in the right place, but I don’t have the player skin working, or indeed the still image and video playing within the box.

Now, the longer version of affairs as I’ve experienced them, with a kind of workflow for setting up video:

First download the JW Player, and then put a copy of it on your server. I had a look at the setup guide and decided to use the wizard to experiment with the types of options available. I’m going for this model, which allows a still image to kick off the video. The wizard says:

*Please note: this example setup uses a player.swf (and, in some cases, a swfobject.js) that is hosted on our servers. You need to download your own copy of the JW Player (swfobject.js is included in the download) and place it on your own server — then change the link(s) in this example so they point to the file(s) on your server.deo file organised.

This instruction I think is key to why things aren’t working as they should – you’ll see what I mean when you read on.

So, then I moved onto the video. (I’m using a 3 second video that I shot on my Blackberry. It’s not really a video of anything, but will do for the purposes of the exercise.)

The Blackberry shoots in MPG4 format, and the JW player needs .flv format files, so I’ve downloaded a converter. I chose to do use Aura, which allows conversion of videos of up to 3 minutes long in their ‘evaluation’ mode free of charge. Converting the video (there is almost every possible video format available for conversion) was really straightforward.

As I said earlier, I’m keen to start my video with a still image, so next was altering an image to the right size – 260 px high, 470 px wide.

When that was sorted out, I uploaded the still image and the video to my server, put the links for both into the wizard, which generated the swf object code.

When I previewed the appearance in the wizard, it was a bit disappointing – the sample image size wasn’t correct to fill the space, so the image is smaller than the player. Hopefully this will be ok, as the background of the image is the same #value colour at the content div of the site. And the video looks pretty ordinary, but I was expecting that.

Taking all that into account I decided to move on and see if it would work. All systems go, or so I thought. I pasted the code into the site HTML, refreshed, and….nothing. Just the little black box which doesn’t play a thing. I then tried using the alternative embed code, but that hasn’t worked either. I’ve also made sure all the bits and pieces I need are on the server (skin, player, swf file, image, video) and that hasn’t made a difference at this stage. I have a load of troubleshooting to get this organised.

On another, more pleasant note, I’ve come back with a fresher mind to the CSS of the site, and positioning is making more sense. Can’t have it all in one week I suppose…now, for PHP. Again, yikes.

So the system plan was an interesting taste of a range of jobs that sit alongside web development roles (coding). Lecturer Viveka mentioned that user analysis is an entire profession I scoffed at the idea of creating profiles and scenarios all day, but after doing a few I realised there is a whole lot to it – bit of human behaviour, bit of marketing theory, a lot of psychology.

My users are all on home computers or laptops mainly because I think they are more likely to spend some time (even if they are a little under the pump at work) looking at my client’s site, and are far less likely to do it by mobile. However I’ve had a look at the site’s (pretty basic) mock-up on my Blackberry this morning (it’s a Blackberry Curve) and the site came up 7^th in the Google search which isn’t bad, but clicking through to the site saw nothing happen….hmmm. Will get to the bottom of that tonight.

I also have a raft of questions after spending some quality time with code over the week. CSS for print – do I need to link this to specific pages in the HTML, add it to the reference at the top of the code (where the link to the all media style sheet is) or will the browser do it automatically? And why oh why does my layout look acceptable in my first mock-up, but when I change anything in the main “content” div, everything gets thrown out?! Yes, it’s extremely frustrating, and even more so is the fact that I have no idea how long it is going to take to fix it all up.

Overall doing the CSS was challenging but not paralysing. There are ways and means to get things looking the way you want without too much stress (for a simple site like mine anyhow). I’ve got the rollover to change colour for my menu working, have mastered vertical and horizontal menus, and it’s looking reasonable for now. I’ve got some nice curved corners on the menu items, which don’t work in IE (for now) so that’s my wink at graceful degradation.

The only thing I’m having trouble with is positioning, which is why I suspect that everything in the design is getting thrown out – I think it could have something to do with the embedding of YouTube video that I had a go at as well. So easy to embed YouTube vids – I really am learning something, however small, every day doing this stuff.

Here’s a screen shot of how it’s looking – the celebrant is a random person pulled off YouTube and will be replaced by my client when she gets a video to me.

My site layout...for now

After bludgeoning myself with CSS, Saturday evening saw me using a glass of wine to assist my understanding of creating a PHP email function for a form. Needless to say this was not a sensible thing to do. However I am pleased to report that my JavaScript popup to warn people when they are leaving the site works. I’m not sure I would want to use this in websites, but it was a good way to get my head around how this code operates, at a basic level anyhow. I’m also really pleased at how Issuu works – it’s really easy to use and I would recommend for anyone posting PDF docs on their site. I’ve pre-empted old browser issues by linking to the same PDF file on my server, so people can view it in their browser if they’d prefer to.

(hat tip to Mashable for this one).

As you can see I’m in really basic territory here, and for some reason a whole lot of images from old assignments have dropped in (unless you’re reading this after I’ve been messing around and fixed the code). I’ve realised that despite thinking I had a clear idea of what I wanted the site to look like, things became decidedly murky when it came to realising it. So confusion reigned at my house last week, something I’m certain my daughters didn’t appreciate…

Anyhow, I started by marking up the basic structure of the page – this has a logic to it.

Then I moved on to the CSS zen garden to see if I could adapt some of the styles there to my project. I also went to Kuler to get a working colour scheme. So you can see by the look of it that I’ve still got a long way to go (it’s probably best that you don’t view the source code, just for your own sanity at this stage, it’s got a lot of problems and I doubt it would be valid).

But I’ve managed to find a couple of good textbooks (yes, books ) that are helping me to see the value of laying out my code from scratch, rather than trying to build by cutting and pasting from other sites. It’s also helpful to look at a book when you have a 13-inch screen….I now know why computer geeks have big multiple screens – I thought it was just to make the rest of us suffer screen inferiority complex.

The problem-to-solution approach from the CSS Cookbook is great and it’s already helping me to understand the importance of using particular types of coding to allow for easy adaptation to HTML5 when it is finalised and accepted by the majority of newer browsers, and also to look and function in an acceptable way if really old browsers look at the site. This is important as the site must look presentable and professional to a broad range of people. Most visitors to this site will have good standards of technology, but some members of the site demographic groups may not use the latest versions of browsers or other technologies.

Also another book, Bulletproof Web Design is helpful in letting me see why you might select different approaches, particularly different to the complex structure in the Zen Garden designs (which I note is done in order to allow for maximum flexibility to change the look and feel of the site, but it’s also a level of complexity I won’t need for my project).

I’ve also seen a funky drop-down menu on the front page of this site. It might be a bit pie in the sky, but if I have time I might give it a go. The next two weeks are critical for my project, and slight panic is starting to evolve into more of a major panic/paralysis situation. Time to shut out the friends, children, colleagues and bury myself in code.

Php is a bit of smoke and mirrors type of language – not only does it have a syntax that I’d call logical but definitely not intuitive, but also you can’t see what’s going on in real time on yoru computer (unless your machine has been set up to be a server as well).

A plain-english definition of php is this – a language that when called upon, runs a little program on the server, turns it into HTML code on the server-side and then inserts the html in the document. The user (client) will only be able to see the result of the php if they view the source of the page they’re looking at, not the php code itself.

An important ( if logical) thing to remember is that if your php code is dodgy it will produce dodgy HTML, which means your site won’t be written in valid code. Working out what is going wrong however is a multi-step process for me, a mere server-less mortal with a laptop: change code on my machine, upload to browser, view on browser, swear a couple of times, change code on my machine, upload…well, you get the gist of it.

Another important thing to remember is that php code will only work if your webhost supports php, so if you’re considering a host, make sure it supports php and MySQL if you’re thinking of using databases.

It’s also handy to remember that not all servers will support all php functions.You can run a little bit of php and you will get a handy display in your browser that will give you the run-down on what is supported.

Here’s the code:

<?php

phpinfo();

?>

I’ve run this on my server and you can see the result here.

This week’s class focused on how to create some php functions – the one that was more difficult was this one.

The final important thing to remember is that while you can’t “view source” to see the php used in a site, there are many many sites where you can find useful code that you can repurpose for your own sites. Google it, rip it off use it, change it, improve it, and once you’re confident, fix it using some of your own initiative.