This part of the website design process looks into how the code was created for the site.
Ok, now I have been given the all clear on the design it’s time to start coding!
I can not stress the benefit of producing a version of the site on Photoshop first. To some that may sound like a bit of a waste of time and they would rather code up a site (not fully functional but near enough!) and allow the client to look at it and decide on changes.
Creating it on Photoshop first has meant that any changes could be made rapidly, with a mere click of the mouse in some cases. And once the design was agreed upon coding it was simple.
Having the site mockup opened in Photoshop I could simply save the various image layers in to separate image files, export them for the web so they were optimised and then include them into my CSS and HTML files. The three main images were positioned using the float property and the the div underneath needed the “clear: both” property to prevent the text from wrapping around the images. Clear both simply means clear the left and the right floated elements.
My biggest problem was the body background image, which had all the various opaque sketches on. I designed the site on a 22″ monitor and it looked perfect, tested it on a 15″ screen and the background image was in totally the wrong place. I had foolishly positioned it using exact measurements (px), so I used percentages instead which worked after making a few other changes.
Using a large background image for the body and dynamically calling the headers and footers allowed the site to come together very quickly. The client wanted contact page detailing her email address but I suggested a contact form to reduce the risk of spammers using her details. I coded this in php and sanitised the entries to remove any malicious data. I personalised it by including her logo as a postage stamp on the form.
After sending the original mockups to Melody I have made some amendments to make the site more personal in terms of images and have added some of her own artwork plus a little bit of mine!
I have just begun working on a site for a client who sells and creates their own handmade lampshades. I thought I would use this opportunity to record the website design process. Today I have just used Adobe Photoshop to create a mockup of the home page. A lot of people would tell you that the first step after chatting to the client would be to pick up a pen and sketchbook. I have used this technique in the past but as I knew the site was going to be a fairly simple layout I thought I’d jump straight into it with Photoshop.
Below is a screenshot of the original site and I spoke to Melody who said she wanted a fairly clean and minimalist look.
This is the original website
The main image I used at the top of the mock page was a royalty free picture taken from http://www.sxc.hu. The reason for this is that I am still waiting for some good quality images of the lampshades. I have some low quality pictures I downloaded from the original site but feel that using these will just make the entire site look bad. You will see that I have used the 960 grid system found at http://www.960.gs. This is something I have experimented with recently on a few sites and found it very useful for positioning the layout. http://colorschemedesigner.com was used to create a palette of colours for the the design.
Below shows the first stage of creating the header which includes the title (logo may also be placed here once one is decide upon) and to the right of it is the navigation. Each element is positioned between the gutters of the grid system.
Site Mock-up 1
Not much difference here except the footer has been placed at the bottom (in the gutter tut tut, I will move it later!)
Site Mock-up Stage 2
The main image has now been added in the background. I zoomed quite heavily on the original to give it some visual impact.
Here is the version that I have just sent to Melody to get her initial thoughts. I have repositioned the social media icons and added a little bit of text. It’s a very simple and clean home page and it may have to be completely changed but I will hopefully get some idea of whether it’s heading in the right direction. It may just be a little too basic and some more bits could be added but as they say less is sometimes more … I think!!
There are so many audio file formats out there that it can get confusing deciding which one to use for a particular task. Hopefully this brief description of the most common ones out there will help you with deciding.
WAV (Waveform Audio File) Format, sometimes referred to aa WAVE. It was created by Microsoft and IBM to store audio files on Windows systems. Its main use is to store raw and uncompressed audio. WAV is not considered a suitable file format for sending across the internet due to the large file sizes but is extremely useful for storing high quality audio where storage space is not a concern. The files are uncompressed and it is a lossless format.
AIFF (Audio Interchange File Format) was created by Apple to store high quality audio. The main use is as an interchange format, it is very useful for capturing live recordings and recording to compact disc. These files are also uncompressed.
M4A (MPEG 4 Audio) was developed by Motion Pictures Expert Group and Apple to separate digital audio files from MP4. Its main use is to store audio files where storage capacity is important such as portable music devices. M4A files can also be used for streaming music online, so the audio can be played while it is being downloaded and is a lossy compression file format.
WMA (Windows Media Audio) was developed by Microsoft and files have the .WMV extension. It was created as an alternative to MP3 and is mainly used to store audio on portable music players. The files have a lossy compression but a lossless version is available.
OGG was founded by Xiph.org Foundation and is an open source lossy file format. It was created as an alternative to the MP3 format but is not widely supported despite the files being smaller in size and of a higher quality. One main problem is that OGG does not support metadata such as artists name and song titles which are an important attribute for portable music devices. Its main use is for the distribution of free music.
RA (Real Audio) file format was developed by Real Networks for streaming audio online. It employs various codecs with different bit rates so the files can be used for different purposes such as transferring across the internet and storing music. RA is another lossy file format.
ASF (Advanced Systems/Sharing Format) was developed by Microsoft and is used for streaming media, both video and audio. It is considered a container file format and may incorporate .WMA and .WMV and is a lossy compression scheme.
I have decided to delve into the world of Android app development. While setting up eclipse I ran into a problem with installing the various versions of Android.
The following error kept appearing:
File not found: C:Program Files (x86)Androidandroid-sdktempandroid-2.2_r03-linux.zip (Access is denied)
Apparently this is a common error but it had me stuck for some time until I found a really quick simple fix. The Android SDK Manager program just needs to be ran with administrator privileges (right click the program icon and select “run as administrator”) and the problem is solved.
This is a guide on how to get directory listings on an Apache Web Server on Windows. I usually work with Apache on Linux systems but have chosen to try it out on Windows(7) as my current installation of Ubuntu is having a few technical issues. The same methods and techniques can be used for Linux.
I have Xammp installed on my machine which by default mod_rewrite is not enabled. This needs to be available to allow the use of .htaccess files. To check this you need to go into the Apache configuration file. For windows this file is the httpd.conf and can be located in the following directory if you are using Xammp:
C:xammpapacheconfhttpd.conf
I imagine if you are using another package the location will be very similar but just under that versions directory.
Once you have found the file, open it up in a text editor and search for the following line.
#LoadModule rewrite_module modules/mod_rewrite.so
As you can see the line is prefixed with a #
This means the line has been commented out and it needs to be removed to activate the rewrite module. The line should now look like:
LoadModule rewrite_module modules/mod_rewrite.so
Now you have activated the rewrite module you need to create a .htaccess file in the apache directory you would like the directory listings (htdocs for example). As we are talking about Windows this isn’t as simple as it may sound. There are a number of ways to do this but I will explain the method I used.
Create a blank text file in the directory you would like the listings
Right click it and choose open with notepad++
Select “save as” in your chose text editor and name the file “.htaccess”
Now here is the important part, under “save as type” scroll up to the option that says “all types” and select save.
The .htaccess file should now be in your apache directory. You may not fully understand the importance of all this but if you did not follow the instructions carefully (primarily step four) you would probably end up with a file resembling the following;
.htacess.txt
This would not be very good and pretty useless! Now all you need to do is quickly delete the original blank text file you created.
Ok so now you have your .htaccess file open and ready to edit, simply add the following lines.
Options +Indexes
IndexOptions FancyIndexing
Open your browser and go to your localhost and if all went as planned you should have nice “fancy” directory listings.
Please note you must also make sure you delete the original index file if is still in the directory (the one that generally says “It works!”).
Another method I have used before is to go into your main Apache configuration file and insert the code into the directory you require the listings. This is Apaches preferred method as the web server can work much faster and efficiently as it no longer needs to search for the .htaccess file. Obviously having the .htaccess file allows you to configure each directory differently and prevents any downtime when any changes are made as Apache does not require a restart for changes to the .htaccess file to take place.
For example:
<Directory "C:/xampp/htdocs">
Options +Indexes
IndexOptions FancyIndexing
</Directory>
To remove directory listings if using either of the methods mentioned previously, you simply need to change the +Indexes to -Indexes.
OK, I have recently delved into the world of Flash, much to my lecturers distaste I imagine. I’m really new to any type of computer animation and have been trawling through the many tutorials on youtube to get myself up to speed. The big question is “Am I wasting my time??”. I’ve been reading up on HTML5 and trying to get to grips with the new features it offers and have read conflicting information with regards to Flash. A lot of people believe that HTML5 is the death of Flash where as some stick by Flash stating that its performance is far superior and less of a drain on processors.
So what do I do? carrying on learning Flash, which is possibly near extinction or ditch it and jump into some HTML5? The plan at the moment is to stick with Flash as I am sure Adobe will be looking to improve it any areas that HTML5 is better. I also read that Flash is better suited to mobile technologies and renders much more smoothly. However there is still that nagging voice in the bag of my head telling me to take the HTML5 route and keep up with the new advancements in the Webs technology.
Well for the past year I have been using Ubuntu 10.10 and have tried to embrace the world of free source. However I have struggled to find good graphics software on there. I find gimp and others like that confusing to use and very time consuming to produce the simplest of logos etc.. So after recently purchasing Adobe Illustrator cs5 I have switched back to Windows 7…. apologies all round!! I may try to carry on coding with Ubuntu but switching between the two OS’s is a pain, especially as Windows doesn’t recognise Ubuntu as a partition to grab files from and so forth. And Windows does have Notepad ++ which is more than adequate all though I will miss Kate (that will make my gorgeous fiancé jealous I am sure!!).
Once again, sorry open source enthusiasts for returning to the dark side, I will leave Windows one day I am sure especially when I can afford the Mac I have had my eyes on for a while now!
Approximately 750 million people use the mighty Facebook and 50% of that 750 million log on every single day. It’s extremely addictive and I personally feel it’s a general waste of time. I’ve been on Facebook for many years now and I find myself on it for hours, sometimes looking at absolute rubbish. The other week I turned the laptop on to crack on with some uni work and before I knew it the little blue box with the white F was on one of my tabs and I started excelling in the procrastination department. How many times have you found yourself looking at someones holiday pictures but how many of you would run a mile if you bumped into that person on the street and they said “Hey, would you like to check out my holiday snaps??”.
So why do we sit in the comfort of our own home trawling through the tripe on Facebook. I am about the least nosiest person I know, gossip gets whispered in one ear and quickly exits out of the other. When it comes to Facebook though its a different story. “Ooh what’s random person 1 been up to, Wow random person 2 whom I care very little about has now changed their relationship status to complicated”. While I am on the subject, what the hell does that mean?? Relationship status = Complicated! What relationships aren’t complicated?? It’s basically saying “I am with someone but I would just like to announce to the World that we are having problems”.
Then there is the security flaws with Facebook. To be fair the site has had a lot of bad press with their apparent lack of security but it is said to be the safest social networking site available. Their are a large number of options available to protect your privacy. Unfortunately their are plenty of people out there with the sole intention of gathering up your personal details for their ill gotten gains. How many times have you had fairly normal decent people posting a video on your wall of a “young girl being caught on webcam by her dad!”. It could be that persons login details have been compromised and clicking on these posts could install cracker software on your computer such as keystroke loggers which as the name implies will log every record of a key being pressed. This will record emails, passwords and bank details. It may even turn your machine into a bot and used for Ddos attacks. Another scam to be aware of is the “Find your porn name” applications. You are asked to type in the name of your first pet and your mothers maiden name to find your porn star alias. Generally a lot of these applications are just a bit of fun but some are purely there to gain information such as your mothers maiden name which 90% of us use for our answer to secret questions.
All in all we need to great care when using these sites. Only have the information on them that you don’t mind sharing and take a few little extra precautions such as not displaying your full date of birth and be very careful which applications you accept.
