After my rant from the other week, where I questioned the benefits of continuing with my university career, I thought I would highlight one of the benefits of university and the projects that are required to be undertaken. Experimenting with new techniques and technologies can be beneficial whilst trying to get your head around things such as HTML5, CSS3 and jQuery for example. By having a clearly defined project on a university project that is not subjected to the same audience and restrictions as a “real-world” project.

Recently I’ve been working on a project which has allowed me to make use of a variety of HTML5 elements and also to use far more of the CSS3 techniques than I could get away with in a client project. Transitions and other experimental things such as background gradients can be used on more critical elements due to the nature of the project, whereas in a client site they should only be used on “extras” which were not design critical until the browsers have caught up with the specification.

Having these experimentation opportunities is critical for students as the techniques which are taught to us can often leave a lot to be desired (one lecturer still uses table based layouts!) and by carrying out some independent learning and having somewhere to experiment can be vital for any future employment opportunities. If a student is interested in gaining a career in web design, I also feel it’s important to have their own website which they can show off their skills and show any future employers that they are keen and have a genuine interest in the subject.

Students often suffer from a lack of experience and a limited portfolio when it comes to gaining employment but university projects can be beneficial as they provide projects with clearly defined goals and parameters. Whilst it’s good to create designs for fictional reasons and it can be extremely beneficial to practice design skills and play around out with the curriculum, it’s also good to work within the (sometimes painful) constraints of university projects.

Like anything, the more you practice then the better you will become at something and the same applies to web design, and students shouldn’t just wait for lecturers to hand out the work – they should create it themselves.

Recently I’ve been working on restoring a Wordpress blog back to health after it was compromised, and after performing an upgrade to both Wordpress itself and all contributed modules, I used the excellent Wordpress Exploit Scanner to identify errors and inserted code within files, and it was able to identify that a malicious php script was inserted into the first line of almost every plugin file.


< php
eval(base64_decode("dfslgdgdfgdg...................")
?>

In order to restore the blog back to full working order it was necessary to remove this line from each file, and with there being over 20 plugins this was going to be a lengthy process. Fortunately by deleting the plugin and uploading a newly downloaded version this saved trawling through each file to remove the malicious code.

This was the first time that I’d used the Wordpress Exploit Scanner but I will definitely keep it in mind for the future, both when there is a specific problem and also to check the health on any Wordpress site.

As some of you may know, I’m now in second year at university, and that was after spending some time at college prior to this. When I left school I didn’t know what I wanted to do for a career, and due to circumstances at the time I went to work full-time in an office for 3 years, although that quickly got boring. Having had an interest in computers and web design since I was at school, I decided to leave full-time employment in order to pursue a career in this field, and I can honestly say I have no regrets about this decision at all.

I returned to education and learned a lot in that time, both from a technical viewpoint and those all important “life-skills”, as well as meeting some great people who I still keep in touch with. I was also lucky enough to gain some work experience abroad which confirmed that it was something I’d like to again in the future, and after college I moved on to university, to a web-design course. I’ve enjoyed the course  so far but recently I’ve been giving it some serious consideration as to whether it is worth continuing much longer with it for a number of reasons, and I hate quitting anything.

Whilst I enjoyed the first year, some of the modules were a bit out-dated (our entire HTML module was either entirely wrong or out-dated), and other modules sole purpose was for us to talk to each other and work in groups. I finished first year happy and having enjoyed it, however part of me thought it was a waste as I felt that I picked up very little.

I returned to second year thinking that things would improve, and overall they are much better and relevant this year but it’s still not as good as it could be and my enthusiasm for the course is decreasing as time goes on. I’m not saying that there is nothing else to learn as that is clearly not the case and in this industry learning is something that has to be ongoing as technologies and techniques change, I’m just not sure staying at university is the best environment to progress. There will be many things that I’d learn if I completed my time here and I’m certainly not that big headed to think that I’ve learned all there is to know at this point, but another couple of years learning Flash just does not appeal and is something I don’t think I’d use that often to justify spending hours learning it from a lecturer who doesn’t know it herself and copies and pastes materials from the Adobe website!

Likewise the scripting module that we are currently undertaking, the lecturer doesn’t appear to have  a clue and his main resource was an ancient JavaScript site which no longer existed, and I’ve learnt more from Jeremy Keith’s DOM Scripting than he could ever teach me, and I’m paying for this privilege!

I’m beginning to feel that by working in the industry full-time and I’d pick up more and at a quicker rate, and it would be a more enjoyable experience to do this. I’m lucky enough to be able to work part-time whilst at university which is invaluable that I can pick up “real-world” experience as well as continuing with my studies, but I’m beginning to give serious thought to making it full-time work and no longer continuing with university. Web design is something I enjoy greatly and would continue to work on personal projects and attend industry events such as FOWD and the DIBI Conference to enhance my learning as well as working full-time.

I’m not going to make any rash decisions and I’ve certainly not made my mind up either on this one and will wait till the summer before weighing up my options fully before coming to a decision, I’m just a bit disillusioned with it at the moment.

After just completing my first Drupal theme created from scratch, it was a big learning curve trying to style certain aspects of the content, especially some of the Views generated content but that’s a discussion for another day. Wrestling with the different settings and style sheets included with modules took a bit of time and although it’s only a basic theme, I  was quite pleased with it. After completing this and fighting with the code to a certain extent, I was curious what changes would be made to theming in Drupal 7 after the involvement of Mark Boulton and the whole D7UX project.

I only downloaded the Drupal 7 Alpha at the weekend so not had much of a chance to have a really good look around but first impressions indicate that the code has been cleaned up a lot since Drupal 6 which should certainly make it easier for designers/themers to create beautiful and custom designs. I think one of the major things which has held Drupal back in comparison to other systems like Wordpress and Expression Engine is the lack of high quality themes for Drupal, and there seems to be a barrier for non-developers within the Drupal community and a lot of designer v developer debates going on, but that’s for another time.

One of the best additions was the stark theme which is almost totally devoid of CSS which helps when installing modules to determine their included CSS and see the CSS easier. Having this is a great help as one of the things I found difficult at times was altering the module’s CSS and by removing this it will certainly make this process easier in development.

As a result of this, I’ve decided to alter it slightly and remove even the basic styling that it has and also conver this theme to HTML 5 in order to have as clean an install as possible for creating themes in the future. I’m hoping that once I’ve completed it I’ll be able to release it for others in the near future, which should give me incentive to make it as good as possible.

Over the last few months I’ve noticed a trend for websites to feature an embossed style, with large text and other UI elements given an embossed look to add some depth to the design. I admit to being a fan of this style, and have begun incorporating it into recent designs. With the emergence of CSS 3 techniques such as box-shadow and text-shadow have made it easier to empty this technique without the use of images and below are some of the best examples at the moment.

Jack Osborne:

App Zapper:

Lee Munroe:

Atebits:

Inspireling:

Arbent:

This is just a small collection of examples and there are a lot more out there, and I can see this trend continuing for a while yet.

Drupal and Wordpress are the two Content Management Systems I use regularly when developing sites, and as Wordpress updates to 2.9.1, Drupal has recently released the alpha version of the upcoming Drupal 7. Having heard a lot about the progress over the last few months, and of the contribution to the D7UX project by Mark Boulton, I was curious to see what the alpha version would be like and yesterday I downloaded a copy to play with in a local environment and there are a few major noticeable differences from previous versions straight away.

Installation:

There are two install profiles to choose from, Standard and Minimal. There are subtle differences between the two profiles, with more modules enabled in the standard installation as opposed to the minimal option. The minimal profile begins with only 3 modules enabled; block, database logging and update manager whilst the standard profile has the majority of common modules enabled by default. Depending on the site purpose, I’d imagine that 90% of the time the standard profile would be appropriate however the minimal profile would be useful for small sites who have no need for a large number of features.

Overlay:

One of the biggest differences in Drupal 7 is the admin overlay screen, which places the admin options within a javascript overlay on the site.

Personally I could see the reasoning behind this option of providing a quick snapshot of the site, and by allowing customisation of the options available on the dashboard it could be customised to the site in use to provide the most common information quickly. However it’s not something I particularly enjoyed using and immediately visited the modules page to disable it and return to the “page” version of the admin screen (Although it took me a while to realise it was a module, but that’s probably just me!).

CCK Built-In:

Probably the two most common modules installed in previous Drupal versions was CCK and Views, and a large part of CCK is now installed as standard allowing the creation of custom fields and content types, giving Drupal more flexibility straight out the box. However, content types is listed under the structure area of the admin options and not in content as I first thought.

Images:

Image handling has been built into Drupal 7, and probably one of the most useful additions is the ability to add an image field to content types so that images can be associated or displayed with content. This is a particularly welcome addition for me as I was struggling with this particular problem only last week.

Options such as maximum dimensions file types and upload size can be configured, as well as the destination of any images uploaded.

Themes:

Having seen Garland far too many times for my liking, it’s good to see some new themes included into Drupal 7, the most welcome addition being the Stark theme, similar to the excellent Wordpress theme Starkers by Elliot Jay Stocks. The stark theme is almost completely devoid of CSS making it an excellent starting point for theme creation and allowing a blank canvas.

On quick inspection it appears that a lot of the markup has been cleaned up and made more semantic but I’ve not looked properly at this as of yet to give a thorough review. However, this was badly needed as some of the previous markup generated was horrendous and made styling unnecessary difficult.

Updating:

The ability to update and install modules and themes direct from the admin interface is a welcome addition to Drupal 7, with the option to either upload via url or by browsing to the folder on the local machine. This is useful as it removes the barrier of ftp for site managers and moderators, however it would be useful to search the modules section on drupal.org and install automatically similar to the plugins in Wordpress, however that may come and this is certainly a step in the right direction.

Overall:

Having only had a very brief taster of Drupal 7 so far it’s certainly an improvement over previous versions and the addition of Mark Boulton, Leisa Reichelt and their team to the user experience project was a major plus as the user experience is vastly improved, it’s not perfect but certainly a lot better than it was.

There’s always been a debate within the web industry about whether it’s better to gain a university education or to gain a job within the industry in order to build up a portfolio of work and experience. Having been at university for just over a year and gaining work experience at the same time, I can see both sides of the argument. Whilst I’m enjoying my time here, there are areas where the course could be significantly improved, with the latest set of modules described below:

Web Standards:

This module was essentially all about valid code and practices for accessibility and usability, all basic and essential things to know for any web designer/developer. I had a slight advantage for this module having known a lot of the areas discussed previously and knew all about the table layouts v CSS layouts and validators etc. However, it baffles me why this module wasn’t delivered in first year instead of the HTML module we had to endure with the tutor telling us that inline styles and table layouts were still ok to be used if we wanted.

MultMedia:

This module was all about Flash and ActionScript 2.0, which although useful and good to know it is not something that interests me at all and do not enjoy Flash work at all. The module is called Web MultiMedia but rarely ventures out of Flash and there is a lot more to multimedia on the web than that.

With the emergence of HTML 5 and the video and audio tags coming into effect within browsers, this could be a new era of multimedia embedded into sites but this has not been mentioned at all. The emergence of web apps such as Spotify etc have changed the way music is consumed on the web, and the Kindle has changed the book industry and popularised e-books.

Designing Interfaces:

This module was interesting and probably the highlight of the semester, with a lecturer who knew his subject and was passionate about it certainly helped. A lot of theory was introduced to the way that interfaces are designed and considerations were analysed in order to produce the most effective and attractive interface.

The highlight of the semester for me.

Law:

We had to endure a law module which was interesting, but too generic to really get me interested. The area of contract law is obviously essential to the industry as a key area is the relationship between client and designer and a good solid contract is key to this relationship. However, there was no mention of intellectual property or other law specific to computing and the internet which was a disappointment as this would have been more relevant and interesting.

The current semester has just started this week and new modules include Web Scripting, Marketing and Information Design which has the potential to be an improvement on the previous one. This post has turned into a bit of a rant about the failings of the course, and although it’s not all bad, I can see why people skip the university route and head straight for industry.

Photo Credit: Yellow Arrow

Well it’s the start of 2010 and the third year that this blog has been going, and I’m the first to admit that my posting schedule is a bit, well, erratic lets just say! It’s not that I don’t want to blog but often I find that with working, studying and working on personal projects as well as having a personal life that blogging slips to the bottom of the queue and often gets missed.

This is the reason that I have signed up to Project 52, a challenge that involves creating a new blog post every week for 2010. The aim is to increase the content and to keep the site regularly updated more, as it does feel I’m neglecting it at times. I’ve had a weekly reminder in my Remember the Milk list for a while now but more often than not I either postpone it or delete without actually having done it, and this is another “kick up the backside” for me to actually blog a bit more and utilise the site more.

The reason I moved to the blog from the homepage in the latest re-design was that it wasn’t updated too often and wasn’t good if users were presented with a scarcely updated blog when they accessed the site. I think one of the main reasons for this was that the blog was lacking in direction, with no clear plan of the kinds of posts I wanted and I blogged about a wide range of topics related to the web. I’ve been working on a plan for these posts which should follow a pattern for the weekly posts, and will be posted at the same time each week for consistency.

So here’s looking towards some great (and regular) content in 2010!

Over the past few weeks I’ve been reading more about HTML 5 and CSS 3 and how the respective specifications are progressing, and beginning to experiment with a lot of the new elements and selectors available. Although a lot of the new elements and ways to markup a site are not production ready, I’ve been working on a university project which allows a lot more freedom to experiment and as such I decided to mark up the entire site with HTML 5 and to also use a number of CSS 3 selectors where appropriate. Having read a lot about these new technologies, this represented the ideal opportunity to begin using the things which I had read about.

HTML 5:

Much has been written about HTML 5 and is now at a point where it is being used more and more in production sites, with browser support improving all the time (except IE of course!). I first heard of the new HTML 5 spec about a year ago when the first “2022 rumours” came out and I was a bit confused about the timeline and the development progress. However, over the past year it has come a lot more popular and the record was straight on the 2022 date. At FOWD Glasgow I was lucky enough to hear Bruce Lawson speak about HTML 5 and how it was being developed to be used now, and taking the things that we all do on a regular basis and streamlining these tasks. HTML 5 is designed to be used now, and as browser support increases it is becoming more widespread.

One of the first noticeable things about HTML5 is the Doctype, and how simple it is in comparison to the HTML 4.01 and XHTML 1 doctypes, which simplifies things a lot and this sets the tone for the rest of the page as I feel in general that markup is a lot cleaner by making use of the new elements such as section, article, aside etc reducing the number of divs used within a page.  Although the canvas element has got a lot of attention for some of the exciting things now native to the browser, but I found the video element a real treat to use and certainly cuts down on the amount of markup needed to embed a video into the page, which is not as big a problem as it once was. The only code required with the new video tag is:

<video width=”280″ height=”160″ poster=”img/roll.jpg” controls autoplay>
<source src=”video/roll.mp4″ type=”video/mp4″ /> <!– MPEG4 for Safari –>
<source src=”video/roll.ogg” type=”video/ogg” /> <!– Ogg Theora for Firefox –>
<img src=”img/roll.jpg” alt=”Our Famous Ham &amp; Cheese” title=”Our Famous Ham &amp; Cheese” />
</video>

The reason there’s two sources is that Safari and the Webkit browsers support the mp4 codec whereas Firefox and the Gecko based browsers only support the ogg codec. There is a debate ongoing at the moment at getting an industry wide codec supported to make life easier but I think there’s a way to go yet on that issue. After declaring the sources, it’s important to add an image or other fallback content for browsers which currently don’t recognise the <video> tag – I’m looking at you again IE!

That’s just one of the new tags available and there are a wide range of HTML 5 resources available to keep up to date with the development specification and techniques including:

• HTML 5 Doctor
• Bruce Lawson
• HTML 5 Gallery
• W3C Differences document
• WHATWG Current Working Draft
• A List Apart Article

I’ll post up the results of my HTML 5 experiement once it’s completed, which is a university project based around a sandwich shop and Coldfusion.

CSS 3:

As well as using HTML 5 for the firs time in earnest, I also used the opportunity to make use of some CSS 3 techniques for the first time and there is some exciting developments in this area which cut down the amount of CSS and styling needed. With the new specification techniques such as rounded corners, gradients, drop shadows and font embedding become much easier. The @font-face attribute has been around for a while but has become a lot more popular recently, as has the issue of fonts on the web with the emergence of services like Typekit and Fontdeck.

Rounded corners, drop shadows and gradients have been a popular “Web 2.0″ look for a while now but with CSS 3 these techniques are made much easier. In order to achieve fully rounded corners, it hasbeen known for up to 9 different images being used to achieve, however with the border-radius attribute it’s possible to achieve this with pure css. Although not an official attribute at the moment, it almost certainly will be and can be achieved at the moment with browser specific attributes such as -moz-border-radius and -webkit-border-radius. As ever, IE lags behind with no support for the border-radius element at all.

CSS backgrounds are set to change dramtically with support for multiple backgrounds and the use of rgba values offering new ways to set backgrounds via CSS. Currently, only Safari supports multiple backgrounds and if applied, all other browsers won’t see any background image so it’s not production ready at the moment but I don’t think it will be long before it becomes adopted in other browsers. The other change to the background element is the ability to set colours using rgba values to define the colour and opacity of a background. Drew McLellan kicked off this year’s 24Ways with an excellent article on the use of rgba values, and I’ve used rgba to create some semi transparent background in my university project, which negated the need to use transparent pngs andreduced page load for the user.

LIke HTML 5, we’re just at the beginning of  being able to use CSS 3 and whilst there’s not a huge amount of support available it won’t be too long before there is and will make coding beautiful sites that bit easier.

Once my university project is finished, I’ll post up a link and a description of the techniques used.

Having installed Drupal a fair number of times now, I’ve got into a routine of essential things that I run through for each and every project regardless of the details of that topics, things that are generic to any Drupal installation and thought I would share them here. These are the same steps that I go through each and every time, before adding the project specific modules and functionality etc.

1. Enable Clean URLs

Clean URLs removes the horrible “?q=” from the urls generated by Drupal when creating nodes, and makes the nodes easier to remember and more SEO friendly. When used with the path auto module it enables very clear and SEO friendly page paths.

2. Create an Admin Role

By default, Drupal is installed with two user roles, anonymous and authenticated users. This allows permissions to be set for visitors to your site and people who have registered to be a member. When the installation process is complete, you’re logged in as user 1 which is the only user with permissions to perform certain tasks such as running update.php and other admin tasks. It’s much more secure to create an a new role called adminstrator or something similar and grant it permission to do all the tasks that user 1 can do, and only log in as user 1 when running update.php etc. This also gives the opportunity to grant other users access to the administration pages whilst still maintaining control over the site.

3. Essential Modules

Like other CMS’, there are essential modules which are used on 99% of sites, regardless of the type of site. There are certain bits of functionality which are almost like an extension of core as they are used that often. The modules I find myself installing time after time include:

• CCK
• Views
• Admin Menu
• Page Title
• Path Auto
• Devel
• Advanced Help
• Date
• WYSIWYG & Editor

4. Install Themes

Like the Modules, there are themes which I install in every fresh Drupal project which are the RootCandy theme and Framework. RootCandy I use as my adminstration theme and for entering content on sites as it provides an excellent UI for this task and much better than the default Garland theme. As a designer, I like the Framework theme as a starting point for my custom themes as it strips out a lot of the styles and leaves me with a blank canvas so to speak from which to create themes.

5.Configuration

Once all these modules and themes are installed and enables, I always take the time to configure them all correctly as well as adding any other user roles required such as Editors, Forum admins etc. It’s much easier to set all these up right at the beginning before any content is added especially when configuring modules such as the page title and path auto modules.

With CCK and Views, I always have a plan written down of what content I require and the fields that will be needed as well as all the views which will need to be created before I begin implementing them within Drupal.

Does some of this look familiar? Do you have any other essential steps that you run through before creating a new Drupal project? Let us know in the comments below and we can all learn from each other.