06 - Web Standards
Markup and Validation
06 - Web Standards ↑In this weeks lecture theme by halloween sweet throwing, which was a bit of craic especially when Chris nearly got hit with one that was thrown at him. Anyway this lecture was a crit on some of our year’s work, and I was surprise how much they used the Firefox’s Web Developer Toolbar in this lecture. To be honest I have only really ever used the toolbar to test sites to see how they cope without JavaScript enabled. I have also used it to view CSS stylesheets but I predominetly use Firebug for inspecting CSS.
This week’s goal was to test my site out on using the Web Developer toolbar, to view how my site look without CSS enabled and to check to see if I had valid markup.
Crimes against Humanity - Guilty!
06 - Web Standards ↑CSS Disabled
Invalid Markup
Bad Document Outline
As you can see from the screenshots above that I have invalid markup, although I only have eigth errors and four warnings. When my CSS is disabled I have my email address appearing above my h1 tag, and my links to delicious and flicker, as well as my weekly links appear above my content. This poor structure leads to a bad document outline as I am not making the full use of h1 – h6 tags for structuring my content, and the order of the markup is very poor as my content is pushed towards the bottom.
Redeeming MySelf
06 - Web Standards ↑Now I have realised all the little mistakes I have made, and wanted to take this week not only to highlight my own mistakes but to learn from them. I have been using a nice little task management application over the last few weeks called Things. I have set a reminder to check the validation before I upload a weeks work.
The following screenshots will show that all my pages have now been re-ordered with the content appearing before less important links from delicious and flickr. I have all my weeks pages to pass the XHTML 1.1 validator on http://validator.w3.org. I have improved the structure of my document outline by including the lower heading tags such as h3, h4, h5.
Order of Markup
Valid Markup
Improved Structure
Digital Futures, Art College
06 - Web Standards ↑
I attended the Digital Futures Talk at the Conor Lecture in the Art College, and I thoroughly enjoyed listening to the two speakers, Jane from RedBee and Nik from Poke. From Jane's Talk she had shown us a lot of video work she has been involved with and the creativity behind some of the videos was very impressive, that gave me some nice ideas. It got me thinking that for marketing my major project I don't have to follow the footsteps of the likes of David Henderson After Effects video. I would much prefer to record an abstract styled video of the Manager shouting at his players, and using his iPhone to record his stats and help prepare his half-time speech. I could use some motion effects on top of the video to make it more interesting and creative, just as Jane as done with a lot of her work.
Nik's Talk was very different from Jane's, and his opening slides were simple but painted a very clear picture, and his explaination of what he felt design was, was very interesting. For example, the slide on the urinal with a fly painted on a certain point for men to aim at, so it would reduce cleaning costs was an ingenius idea. Nik who is also part of Hulger, who have some really nice products such as the old style telephone connected to your mobile phone. Also he showed us a slide on Pappa Phone for Skype, with a thin layer of brass to make the product look and feel of real quality, I also agreed with Chris's comment:
It is those little bits of Attention to Detail that really set the product and make it nice.
(not word for word)
Source - Chris Murphy
Nik went on to show us some sites that he has worked on, and three of them really stood out for me were:
Global Rich List
Orange's Unlimited Web Page
WORLD's first internet ballon race
I really liked the look and feel to the Global Rich List, and the idea behind Orange's unlimited web page is really cool, and love the attention to detail when they use browser detection to use the correct scroller image depending if its on a mac or a pc and whether if it is firefox, or ie, or safari, etc. I remember looking up the Balloonacy way back last year on my placement. I think the first place I may have seen it was on the Big Word Project website, and I really loved the idea behind it and looked like a lot of fun. This fun element stroke a chord with me as I would like my major project to be fun look and feel, maybe not the haha kind of fun, but an engaging kind of fun feel to it.
I also attended the talk on the thursday after class, although it was interesting to hear from an Architect point of view, I thought that most interesting topic he spoke of when he informed us of how some of his clients would come to his office, and discuss their ideas in his office. The working enviromnent of his office would allow the clients to get a better understanding of what his company does.
Inspiration
06 - Web Standards ↑
This week I was going through my weekly RSS feeds, and I came across an article on how to use jQuery plugin to display Twitter on your blog from Damien du Toit. As I was reading the article I really like how there was a sublte texture in the background of the site. I really like this technique, that I open up Photoshop and used the film grain artistic effect from the dropdown menu. Walla I had achieved a similar effect to coda.co.za/blog. However, when I implemented this effect onto my blog I felt the effect was too strong so I dulled it down by setting the opactiy of the layer down to 50% and that did the trick.
Improving Loading Times
06 - Web Standards ↑
The screenshot to the right shows that while I was testing my blog with Pingdom Tools, my page took about 2.6 seconds to load. The bar charts show that what took the most time to load were png images that appeared in the footer of the blog. I thought I could replace these png files with equivlant gif files, that would lose little quality but would speed up the loading time.
This second screenshot shows exactly difference of what happens to the speed of your loading times. I was able to make the page display of nearly 1 second faster, than previously by simply converting images from png to gifs. I feel that this site may prove really helpful when it comes to testing my major project, as my application will need to be a fast and responsive app.
Content Management Systems
06 - Web Standards ↑My major project is based around creating a web application on the iPhone, and so far I created a draft version of how the app would work. But thats not enough, the web app will record the user’s stats, this information needs to be stored, and allowed to be viewed and manipulated by the user. Therefore would need a Content Management System. I will create a website around the app to allow me to market the app, and engage the users/customers into the product. For this website I can keep a blog, setup a FAQ’s section, show some screencasts and other forms of documentation to provide as a customer support service.
There are many different CMS’s out there, all with different abilities but which is the right one? I may evan need to use two different types, one for the website and one for the web app. Although, I am still thinking that for the web app I may create a simple CMS myself with PHP and mySQL. Here are some of the CMS’s that I have had a look at:
WordPress
06 - Web Standards ↑
The most popular Open-Source CMS out there at the moment, and has a really well documented website. There are loads of developers and designers using it, with a lot helpful tutorials if you find yourself stuck. I have used WordPress before and would love to work with again on another project. WordPress is now even out on the iPhone, so this CMS is real contender to work with for my major project.
Joomla
06 - Web Standards ↑
Joomla is another open-source CMS and I have worked with Joomla before on a freelance project for Sophiasearch.com. The latest version of 1.5 made a huge step in the right direction with a complete move from tables to CSS for the design of Joomla. Joomla was initially hard than WordPress to pick up but it is a very good Content Management System, however, for my major project I don't feel it would be appropriate to use it.
Expression Engine
06 - Web Standards ↑
Expression Engine is a commercial CMS that is price at $99.95 for a personal license and at $249.95 for a commercial license. Given such a big price tag it looks like a great CMS to work with, however you have pay more for certain modules, and I am still waiting for Version 2.0 to arrive. So until then I think I won't use Expression Engine for my major project.
Traffik
06 - Web Standards ↑
Another commercial content management system aimed at business, Traffik is probably most professional CMS I have came across so far. In that they have incorporated an Email Marketing module, integrated e-commerce section, and gives customer profiling as well as analytics. It is very impressive what Traffik can offer. It is price from $29 to $149 per month, another hefty price tag but the site has given me some great ideas that I could incorporate into my final project, such as email marketing and customer profiling.
Other CMS
06 - Web Standards ↑Here's a list of some other CMS's I had look at:
Overall, I believe that I will more than likely be using WordPress for my major project. Although the more expensive and more professional CMS's such as Traffik, have given me some ideas of what else could my website offer the user. I feel that some areas that I will create myself with PHP and mySQL, although this will be decided until later.
CSS Support on iPhone Safari 2.0
06 - Web Standards ↑
This week I was curious about how much CSS support was on the iPhone Safari 2.0 browser, so investigated and found a website listing the support of CSS. I have the podcasts on my iTunes from once I registered as an iphone Developer, and I intend to go through all of the podcasts before I begin my major project, so far at the moment I have only went through some of them.
Plans for Next Week
- Investigate CSS animations
- Look at articles and tutorials on how to develop for the iPhone