The one thing that does look amazing about them though is the idea of iPad versions of books and magazines. I think the promo video showed a sports mag with video and audio incorporated and it looked amazing! Here’s another exampled that popped up on Twitter today by Penguin Books. I’m not sure if its just a concept but the idea it could be used for learning and for kids development is another reason it could be great!

I just hope that eventually, as other tablets get better (if they do!), people will be able to get these great apps on more than just the iPad. Don’t want Apple taking over the world!

iPad iMagineering from Penguin Books on Vimeo.

Chris’ talk helped me grasp more clearly what HTML5 is going to make available and what it’s going to do for web development.

I got a good idea of the new HTML5 forms and form validation, how local storage is going to work, what <canvas> can be used for and the <video> and <audio> elements. Also, in my recent post about Speak The Web, I mentioned that after Remy Sharp’s talk I was left needing to understand the HTML5 JavaScript API access more clearly. Chris’ talk sorted that out with his use of some pretty good examples. He also demonstrated a way of producing captions for videos (captions currently aren’t supported in HTML5) using the HTML5 ‘data’ attribute, <span>s holding the captions and some nice JavaScript.

He also mentioned a guy from Opera who has created some old Nintendo games using <canvas> and JavaScript. He showed us a really good demo but I can’t get it to work at the mo – supposed to be on nihilogic.dk somewhere.

Ah, one last thing he mentioned about HTML5 after a question from the audience is that you can generally get it to work in older browsers by adding the CSS ‘display: block’ to the elements. That may be in conjunction with something like Modernizr. Again something I need to research!

Chris also covered a load CSS3 properties that I’m not going to list but it was again very useful.

The slides for the presentation are on the Opera Developer Network Blog and can be found here: http://my.opera.com/ODIN/blog/university-talk-resources-march-2010-html5-css3-slides

All-in-all a worthwhile hour and half and I hope Chris is back next year with another free talk.

The reason the blog now looks like this is purely to tie it in with the homepage as it previously looked like the picture below – couldn’t have left it like that. I just did a very, very quick re-skin and tidied things up a little.

New design coming soon!

Old style blog:

It was Elliot Jay Stocks who accidentally reignited this debate with a tweet last week. You can read his post on the issue here: http://elliotjaystocks.com/blog/web-designers-who-cant-code/

Now, I’ve not worked in the industry as long many of the commenter’s and therefore I don’t have the depth of experience that many of them have, but I do have few things to say about the point.

I generally think that it’s more important that designers understand how to design for the digital platform properly, rather than being able to code HTML and CSS. For example when producing a design for the web it’s important to keep things tight, pixel perfect (I’m talking as a basis for development and not that it has to be this way in all browsers) and to make sure that proportions are equal and standard throughout the design – white space, margins, padding, font sizes and so on. This makes coding the design much easier as you don’t have to figure out these points whilst developing. I know this sounds general and what if a design is elastic or fluid etc but I mean this as a basis for the development of a site. It’s nice to get a design that’s specific in its layout so you can just code what the designer has set out for you.

I also understand this idea that you can’t properly design for the web without coding as you can’t design in the browser. Designing in the browser does help you to see if some design aspects will work well in the actual browser rather than Photoshop (or whatever graphics package). It also allows you to test and build live demos and to test interaction, but does this have to be done by a graphic designer? Elliot Jay Stocks says in his post that there’s no excuse for designers not being able to code because HTML and CSS are easy! This is a point I do not agree with. The basics of HTML and CSS are easy, they aren’t particularly complicated languages, but to actually become any good at building the front-end of websites you’ve got to invest time in understanding the languages properly, getting your head around the box-model and so on and then all the various browser quirks and bug fixes. If you want to properly design in the browser you’re going to need to have a deeper understanding of developing with HTML and CSS than just the basics and that takes time and the inclination which some designers may not have.

I’m talking in a pretty general sense here, but I’m getting at the point that I know designers who can’t code and they produce perfectly good sites. It’s just important that they understand the way that websites work and how they should be designing websites – developers can explain and demo technical stuff. Some designers might actually look ‘outside the box’ more and come up with some more exciting designs for the web if they know a little less about the capabilities of HTML and CSS (a lot of ‘great web design’ is pretty uninspiring in my opinion). It might challenge the developer more and could cause other issues such as usability problems, but this stuff can be worked out in collaboration with developers.

One major advantage of designers being able to code their designs is that they can provide a fuller service and could possibly find work more easily. Designers can learn to code HTML and CSS if they invest the time, no doubt about it! Coders like me on the other hand have a much, much harder time learning to design because it’s less about logic, standards and technical skills and more about something which isn’t easy to learn – creativity! Sure there’s design theory, but creativity applies that theory and produces great design.

That’s a bit of a disjointed post and leaves loads of stuff to be said and properly thought about but it’ll do for now.

Comment at will.

ADDITION on 09/03/2010 below:

Not long after I posted saying I’m not sure if it’s important that designers can code, and that they just have to understand the way the web works to design for it, I encountered a problem with a design I’d received for a site.

I had to basically dissect a couple of examples of how to create repeating background images in different ways and explain why they have to be done in such a way on the web. This isn’t a problem as I’m actually doing what I said needed to be done above, but it took a looooong time! I’m still not sure whether a designer has to be able to code but I can see how when designing complex sites, coders will come up against some time-consuming and difficult problems if a designer hasn’t got a decent concept of how websites work on the web.

All four speakers gave quality, relevant talks and I managed to take something away from all of them.

Ben Childs heightened my awareness of the necessity of properly optimising sites for mobile browsers (rather than accepting that users must constantly zoom and pan for content). He also made it clear that a tiered approach to mobile content delivery is the best way to enable usability across a multitude of devices, and that the iPhone is not ‘the standard’ mobile experience. I’m planning on getting either a WordPress mobile plugin for my site or sorting it out manually soon.

Dom Hodgson’s talk was quick fire and I got a few hints and tips I’ve not come across regarding SEO. Interesting social media examples thrown in there as well.

Remy Sharp hit us with a code heavy talk and to be honest I’m still a little confused as to exactly what everything he talked about actually was. I think I understood that HTML5 (with all its new elements) makes many more properties accessible to JavaScript thus making it easier to apply code to and allowing more powerful things to be carried out. Clearly an area I need to read up on. Comment at will! Slides here: http://www.slideshare.net/remy.sharp/html5-js-apis

Andy Clarke’s talk was by far the easiest to follow. He’s a professional speaker and had his talk well structured to define, explain and allow you to take it in. He spoke about designing for the best, most modern browsers first and allowing the older browsers to receive functional but less advanced designs. He called this technique Hardboiled. I already thought that there wasn’t anything wrong with going for it and utilising loads of modern CSS3 whilst allowing the older browsers to render things slightly differently, but he showed some nice examples of how to do that and why it’s important – to get new CSS properties accepted as standards and to push web design forward. I also remember him covering what was maybe a JavaScript technique that allows you to apply completely different CSS to the same elements but I can’t remember exactly what he said so if anyone reads this and knows what I think I’m referring to, please pop it in a comment. I can’t reference his slides as they aren’t available until November dues to him speaking at An Event Apart.

There was also some debate about him calling his technique Hardboiled. People were saying it’s just graceful degradation which I suppose it is, but he came at it in terms of ignoring people who want sites to look exactly the same in every browser (as we’ve all heard before) and just going for it with modern and sometimes experimental techniques. Some people in the bar expressed feelings that it’s not realistic to design different solutions for the same pages etc and I can see where they’re coming from with regard to time and money. Maybe deploying some of his techniques and slowly building up the amount you use is the way to go about it…I don’t know yet?!

It was certainly a successful and worthwhile evening, both in terms of networking and coming away with new information and ideas.

Thanks to Dan Donald and Rich Clark for organising it all.

Until the release of the Opera Web Standards Curriculum last week (and subsequent blog posts) the new curriculum had slipped my mind so I thought I would quickly stick out a post about it.

I haven’t had a full look at the curriculum but with just a quick scan I spotted the following articles:

• The history of the Internet and the web, and the evolution of web standards.
• The Web Standards model – HTML, CSS and JavaScript.
• Information Architecture—planning out a web site.
• Colour schemes and design mockups.
• The basics of HTML

You can see that the content looks very promising and is something I’m hoping my university are supporting because I know how much further ahead in this game I would have been if I could have be taught some of this at uni.

I’m certainly going to look through the 23 articles released to date and see what I can gain and I think most web designers/developers should have a look too.

IE has the IE Developer Toolbar which is similar to the Web Developer Toolbar for Firefox and Opera are currently releasing their beta version of their browser with Dragonfly, their version of Firebug. These aside, there just isn’t the same wealth of add-ons for other browsers as their is for Firefox so I’m going to share some of my most used add-ons in the hope that you will discover some new ones.

• Firebug – This is by far the most useful add-on, probably in conjunction with the web developer toolbar. Allows you to inspect code and CSS together, alter code and CSS in real time and inspect the DOM amongst many other great features. Front-end development would be much more difficult without it!
• HTML Validator – Great validator tool allowing different validation settings and showing you the number of errors and warnings on your page and what and where they are.
  
• Web Developer Toolbar- Great tool allowing you to quickly disable such things as CSS and Javascript. Also includes loads of other tools such as window resizing, alt attribute display, validation links, DOM inspector and far far more (and probably better) than I could mention here.
• Firefox Accessibility Extension – This is one I have not managed to play with much yet but it allows assessment of pages for accessibility compliance and it includes accessibility aids. Apparently a great add-on.
  
• IE Tab – Click the icon and Firefox emulates IE6. Not bad if you can’t get an old version of IE 6.
  
• JS View – Handy CSS and Javascript viewer (no need to go looking for the script by adding it to the url)
• YSlow – Yahoo extension allowing assessment of script speed and also debugging of scripts
• Operator – Tells you which Microformats are available on a page plus the ability to install scripts to enable detection of additional Microformats. Good for checking your Microformats are working when developing.
• Fireshot – This is great. It enables screen shots and then amongst other options, tools for editing the screen shot, of the screen below the ‘fold’ (very useful if you have large search results etc or just long pages)
• ColorZilla – Nice little tool allowing you to hover over the screen, click, and then get the rgb and hex values of the colour you are interested in.
  
• Server Switcher – Allows you to create numerous profiles with sites and there staging counterparts. Click the icon in the address bar from either the liver site or the stage site and it switches to the other version.
  
• Download Status Bar – Stops that annoying download window popping up. Maybe there’s another way, I use this!
  
• Aardvark – This is a really useful add-on. It allows you to remove elements from web pages on the fly, also does plenty of other things in that vein and it uses handy keyboard commands to complete its actions. Mainly used for testing page layout behaviour if something moves etc.

So that’s it for me on extensions, for now anyway. I might add some more to a new post as i’ve used them. Hope you found that useful and please tell me of any others or better versions of ones I’m using.

Cheers.

In light of this I’ve compiled a list of books, most of which I’ve been able to use, to hopefully help people make the right choice when choosing a decent book.

The majority of these books are great for people who are new to the industry or who want to learn about the principals of standards based design incorporating better usability and accessibility along the way.

Just a note. Most books have accompanying web sites that allow you to download source code so that you can play with the examples from the books. Something that I always stupidly forget!

Web Design

• Bulletproof Web Design – Dan Cederholm
• Web Standards Solutions – Dan Cederholm
• Designing with Web Standards – Jeffery Zeldman
• Web Standards Creativity – C. Adams et al
• The Principals of Beautiful Web Design – Jason Beaird for Sitepoint
• O’Reilly CSS Pocket Reference – Eric A. Mayer for O’Reilly
• CSS Mastery: Advanced Web Standards Solutions – Andy Budd
• Transcending CSS: The Fine Art of Web Design – Andy Clarke

Scripting

• DOM Scripting – Jeremy Keith
• Bulletproof Ajax – Jeremy Keith

Microformats

• Microformats – Empowering Your Markup for Web 2.0 – J. Allsop

Photoshop

• The Photoshop Anthology – Corrie Haffly for Sitepoint

Accessibility

• Web Accessibility – Web Standards and Regulatory Compliance – Various Authors

From the books above I would strongly recommend Bulletproof Web Design and Web Standards Solutions by Dan Cederholm. These are great for anyone starting out and wanting to learn about building standards based web sites that rely solely on CSS for layout. Dan Cederholm is very well known in the web design industry and runs the Simplebits web site.

Bulletproof Web Design is particularly good because it demonstraights a none-bulletproof piece of code, explains why it’s not bulletproof and then takes you through an example of how to produce a bulletproof version. You can also download the resources from the web site so that you can complete each section of the book as a tutorial, which I suppose is the whole point.

I think that the more experienced designer could benefit from CSS Mastery. A colleague of mine who has been working in the industry for around 10 years and has been into standards based web design for a good few years attended a CSS Mastery course last year and came back buzzing with ideas and techniques. This suggests to me it’s on a higher level than the other books I have mentioned.

No Web Designer or Front-end Developer should be without the O’Reilly CSS Pocket Reference because it’s just brilliant for checking rules or reminding yourself of how a certain rule works when your brain has stopped working!

Another one of the books above that seems particularly good is DOM Scripting by Jeremy Keith. His book is a great step-by-step introduction into what JavaScript is, what the DOM is and the how to progressively and unobtrusively enhance your web site using JavaScript. Jeremy Keith is, if you don’t already know, a bit of a JavaScript master and is again very well known in the industry. He runs the Adactio website.

Pretty much all of the books above have been mentioned on one well known web design site or another, or have been recomended by a friend so they should all be good reads.

If anyone knows any more good books, especially in the realms of accessibility, microformats and scripting please make a comment and I’ll add them to the lists.

note: This is a tutorial based on Windows XP. If you are using Windows XP Pro and have IIS running on your machine you will have to stop it before running XAMPP. Mac users should check the extra information section at the bottom of this post for some links I’ve found for doing all this stuff on a Mac.

On with the tutorial.

1) Install a localhost.

First of all you need a localhost. I use XAMPP which can be downloaded from http://www.apachefriends.org/en/xampp-windows.html. There are alternatives to XAMPP which I’m sure are just as good but I use XAMPP so that’s what I’m going to describe.

When you arrive at the page above you will be able to either select XAMPP or XAMPP Lite. I’ve seen a fair few tutorials explaining how to install Wordpress on XAMPP Lite but it seems more fussy than just using XAMPP (XAMPP Lite does of course contain less stuff so just have a look at which version you want because I’ll stick up a link to a tutorial for XAMPP Lite).

Download the XAMPP installer. Once you have this saved to your computer give it the usual double click and let it do it’s business. It’s default install location is the root of the C drive. I’ve left it there but you could put it where you want (this might cause problems when navigating to your localhost in a browser – I’m not sure).

You will end up with a folder in you list of programs called Apache Friends. Inside here should be an application called ‘XAMPP Control Panel Application’. Get that running.

Above you can see a screen shot of the ‘XAMPP Control Panel Application’. To start XAMPP you need to click the start buttons next to ‘Apache’ and ‘My Sql’. Once you have done this your control panel should look something like the screen shot below.

You can then use your browser to navigate to the localhost by typing just localhost into the address bar.

So that’s the XAMPP install sorted, you still need to set-up a database but first we’ll move onto installing Wordpress.

2) Install Wordpress locally.

Ok the first thing I’ll say here is don’t go copying all your Wordpress files from your web host into XAMPP because you will still have to go through the Wordpress install process again (I did this the first time).

So go to http://wordpress.org/ and download the latest version of Wordpress. I would probably download it straight into the ‘htdocs’ folder within your ‘xampp’ folder. Unzip the download of Wordpress.

You will probably end up with a folder named something like ‘wordpress-2.5.1′ (that’s the latest version at the time of writing). Inside that folder will be the ‘wordpress’ folder. I would COPY the ‘wordpress’ folder into the ‘htdocs’ folder so that you can keep an original, un-modified copy of Wordpress for a back-up.

Now, you first need to set-up a database for Wordpress to use. You need to navigate to the XAMPP home page in your browser (just type localhost into the address bar). Then find the link to ‘phpMyAdmin’. Once here you should be able to see the area that allows you to create a new database. It should look something like the screen shot below.

For ease copy what you see in the screen shot when setting up your database in phpMyAdmin (you should be able to set up multiple databases to be used with different copies of Wordpress but this is beyond the tutorial).

Now get back to the ‘htdocs’ folder within your ‘xampp’ folder. Then open the ‘wordpress’ folder and you should see a file named ‘wp-config-sample.php’. Open this file in your desired editor and make sure that the values match the screen shot below.

Save the ‘wp-config-sample.php’ file as ‘wp-config.php’. This allows Wordpress to see this file. The reason that ‘DB-USER’ is ‘root’ and ‘DB-PASSWORD’ is empty is because these are the defualt access rights for phpMyAdmin. Now you’re access to the database is set-up.

Next you need to get back into your browser and copy the following into the address bar ‘http://localhost/wordpress/wp-admin/install.php’. This will then begin the local set-up of your blog. You will be asked for a blog name and an email address. Make sure you make a note of the password you’re given because it’s totally random and I know that I wouldn’t remember it!

Another thing you may need to do is to make sure that permalinks work. This can be done by navigating through the following folders. xampp > apache > conf and then opening the file named ‘httpd.conf’ in your desired editor. You should then search for ‘rewrite’. You will see this line ‘#LoadModule rewrite_module modules/mod_rewrite.so’. Remove the # from the start of the line so that its reads ‘LoadModule rewrite_module modules/mod_rewrite.so’.

So that’s it. You should now be able to run a blog on your localhost. This, in my opinion makes for much faster customisation and theme development because there is no need to upload edited files from your local copy of Wordpress to your web host via ftp or use the in-built Wordpress editor. Just open the files you want to edit straight from your local wordpress directory and then save them straight back in there and all changes are immediately apparent.

3) Importing / Exporting posts

If you have installed a local copy of Wordpress but have a live version up and running on a web host you may want to bring all of your posts from your live version and add them into your local version. This is very simple and is done by logging into your Wordpress admin area, clicking on ‘manage’ and then either clicking ‘import’ or ‘export’ depending on what you want to do. So if you export from one version of Wordpress you can then use import to add those exported posts into another version of Wordpress.

4) Extra information

This website was very useful to me and tells you most of the information regarding setting up a database and installing Wordpress that I have described in this post, but it has the added extra that it explains how to set-up XAMPP Lite which some users may want to do. http://www.tamba2.org.uk/wordpress/xampp/

Another useful place to go for help with these topics are the Wordpress forums. This link is a thread that I posted on when I was first trying to install Wordpress locally. I got a very fast and useful response everytime I posted.
http://wordpress.org/support/topic/128462?replies=16

That thread also describes using SVN. This is subverion for Wordpress which I have yet to look into but it can be very useful if you are going to be modifying a local copy of Wordpress and then transferring files to a live version because it keeps track of the changes you have made. http://wordpress.org/download/svn/

Mac users check these links out. They might be good, they might be crap. Don’t blame me if they are crap.

http://maczealots.com/tutorials/wordpress/

http://allforces.com/2005/08/22/wordpress-on-mac-phpandmysql/

http://www.freemacblog.com/mac-server-series-install-wordpress-on-your-mac-using-mamp/

http://michaeldoig.net/4/installing-mamp-and-wordpress.htm

So that’s it. A local server with Wordpress installed and ready to use. I hope this has helped anyone who has read it or at least pointed you to some useful info. If I’ve missed anything or you have any questions just post a comment and I’ll get back to you.