So I have been working on a project at home and decided to build it using HTML5 and CSS3 in order to brush up on my skills and bring me up to speed with these new technologies.
I have previously had a play with CSS3 and played around with the shiny new features such as box shadow, border radius etc, but it wasn't until I started this project I realised just how powerful it was.
Iwas asking one of the front-end developers for some advice and they ened up pointing me in the direction of selectors. Of course I have used selectors before when I've been coding in CSS2, for instance to select the last item in a list ':last-child' and to select the hover state of a link ':hover', however CSS3 opens up a whole new world of possibilities.
A few of the selectors I have been using are ':first/last-of-type' which will select the first or last element of that type for instance a paragraph tag(<p>). ':nth-child(1)' which will pick a specific child of a parent element.
The possibilities these selectors present us with is monumental in my eyes, it lets us streamline our styles and more importantly keep our styling consistent across our site.
Big thumbs up from me, and I can't wait to start using all the other bits and pieces CSS3 has to offer.
For a full list of the new selectors check out sitepoint's reference list: http://reference.sitepoint.com/css/css3psuedoclasses
So last week I was working on my CMS and it can time to sort out images. Like any good CMS I need to give people the ability to add images to their content. In order to do this I had to use a bit more than some jQuery, so having dabbled with some PHP I decided to go for that.
So I had a little hunt about for some basic tutorials and managed to find one over at dreamweaverclub.com. The code was pretty straight forward.
First of all I had to set up my form:
<form enctype="multipart/form-data" action="uploader.php" method="post">
<input type="hidden" name="MAX_FILE_SIZE" value="100000" />
<input type="file" name="uploadedfile" />
<input type="submit" value="Upload" />
</form>
This form basically posts back to itself and has a standard file input and a hidden 'max file size' input.
Now for the PHP
$target_path = "Images/".$_FILES['uploadedfile']['name'];
move_uploaded_file($_FILES['uploadedfile']['tmp_name'],$target_path);
So in the PHP code we set the path of where we want the image to be uploaded to. Then we move the uploaded image and there you have it!
So this is a pretty simple file uploader and is pretty unsecure as it stands, but it has given me the basics of what I need to integrate image uploads into my CMS.
Next week I will be having a bash at getting this working properly so it uploads the image then adds it to the content. Stay tuned.
When showing Gareth how far I'd gotten on my CMS, he made a comment that it would be cool if you could drag the toolbar outside of the browser and could move it about onto another screen similar to the photoshop toolbars.
Being the type that likes a challenge I decided to give it a bash. To do this I used the jQuery UI bind property to fire a function when the toolbar was dragged. When the toolbar is dragged to the edge of the browser I use some javascript to calculate which side of the browser it is on and how far down from the top of the screen it is.
I then remove the toolbar from the page and open a pop up window using the co-ordinates I previously calculated.
I then had to write some code to put the control bar back in once the pop-out window had been closed to do this I used onbeforeunload.
The code for all the above lookes something like this:
$("#newPost #controls").bind("drag", function(event, ui) {
var left = $("#newPost #controls").css('left').replace(/[^-\d\.]/g, '');
var theWindow = $(window).width()-65;
var theHeight = $("#newPost #controls").css('height').replace(/[^-\d\.]/g, '')-25;
if(left< -65 || left>theWindow) {
var top = eval($("#newPost #controls").css('top').replace(/[^-\d\.]/g, ''))+window.screenY;
var browseleft = window.screenX;
if (left< -65){
var leftpos=browseleft-131;
} else {
var leftpos=browseleft+20+$(window).width();
}
$('#newPost #controls').remove();
var popOutTools = window.open( "tools.html", "myWindow", "status = 0, location=0, height ="+theHeight+", width = 131, resizable = 0, top="+top+", left="+leftpos+"" );
popOutTools.onbeforeunload = function() {
$('body').prepend(html code for toolbar goes in here);
};
}
});
Ok so last week I talked about how I created the control panel for my CMS. This week I'm going to talk about how to wire it up to add elements to the page. I will also cover how to make those elements editable, re-ordeable and deletable.
So first off, I need to wire up the button functions so when you click say H! on the control panel, it adds an editable H1 tag to the page, so here goes.
Using the magic of jQuery, firstly I target the button I want to attach the action to. The code below creates a click function, so when a link with the class of 'heading' is clicked, do something.
$("a.heading").click(function(){
//Do something
});
Next I need it to add and editable H1 tag to the div with the ID of 'post'
$("a.heading").click(function(){
$("#post").append('
<div class="edit">
<h1 contentditable="true" class="editMe">Heading
</div>
');
});
The code above selects the div with the ID of 'post', then appends to it a div with a class of 'edit' which contains an H1 tag with the attribute contenteditable and another two divs which will act as the 'move' and 'delete' buttons. In essence, that's it, once I repeat the same code for the different tags I want to provide the user with I have the bare basics of a CMS. Obviously this on it's own would never be pratical in the real world so there is more work that needs doing to make it into a viable application.
So lets finish this function up. There are now two things I need to do to finish of this bit of code, first of all I need to add a return false statement because when the link is clicked, I want it to execute the javascript then do nothing else.
$("a.heading").click(function(){
$("#post").append('
<div class="edit">
<h1 contenteditable="true" class="editMe">Heading
</div>
');
return false;
});
Secondly I need to attach the events to the move and delete buttons so I add in a call to another function called attachEvents
$("a.heading").click(function(){
$("#post").append('
<div class="edit">
<h1 contenteditable="true" class="editMe">Heading
</div>
');
attachEvents();
return false;
});
Ok so now I am calling that function I need to write it. The code below simply states that when the delete div is clicked, remove it's parent.
$("div.delete").click(function () {
$(this).parent().remove();
})
As for making the items sortable using the simplicity of jQuery I select the 'post' container and make it sortable like so:
$("#post").sortable({handle:'.move', containment:'parent'});
Again, I've given it a handle, the move button and I've contained it to the 'post' div. I hope this hasn't been to confusing, tune in next week to see how I'm getting on.
Ok, so my last post involved me stating I was going to have a bash at making my own CMS system which enables users to create their own content but limits what they can do so all their content stays consistent and beautiful.
So, first of all I had to decide what language(s)/technologies I was going to use to build such a platform and after a quick hunt around on the interweb I came across this HTML5 demo which uses 'contenteditable' http://html5demos.com/contenteditable. After having a quick read, this seemed like a good way forward.
However just using 'contenteditable' wouldn't cut it as I wanted users to be able to add, edit, move and delete content. With this in mind the choice was clear, I would look to use jQuery and jQueryUI, handy javacript libraries which enable you to do cool things like drag and drop with a single line of code.
So I got to setting up my page; first of all I had to give the user a way to add elements to the page, such as Titles, paragraphs, images etc. To do this I created a draggable toolbar which had buttons for each element I want the user to be able to add.
The tool bar has been completley styled with CSS3 to acheive rounded corners, gradients and drop shadows. I'm trying to see if I can do as much of the UI with out using images, so far it's going to plan.
Next I Wanted to let the toolbar be draggable so the user can move it about. Through the magic of jQuery UI this was pretty easy to implement using the following code:
$("#newPost #controls").draggable({handle:'.dragBar'});
So all this code does is targets my controls div and makes it draggable, the 'handle' bit targets a div inside my controls and makes that the drag handle, simple eh?
So next I had to make the buttons in my control toolbar do something, mainly, add an element to the page.
Stay tuned and next week I will reveal how to get editable elements on the page and how to make them re-orderble, editable and deletable.
In our industry more often than not, a client needs to be able to manage the content of their website, cue the CMS (Content management system), a great application giving people the ability to mange and edit their website with needing to have any knowledge of code.
On the surface this is a powerful tool for anyone to have, however there can be drawbacks. Imagine, you wish to create a new page on your website, you use the CMS to create the page, the navigation item for that page and it then comes time o add your content. Most CMS' come with a WYSIWYG editor (What you see is what you get) which gives users control over Fonts, colours, layout, spacing etc. all very high tech and easy to use. The problem is, most people tasked with editing and managing content are not designers, hence they came to an agency to design their site in the first place.
So having all this control over your site can be valuable on the one hand, but on the other when it comes to laying out a content page, many sites, especially over time, can start losing their aesthetic and polish.
This got me thinking if their is a solution to this problem, a new WYSIWYG editor allows users to add content to a page but limits the control they have over these elements and users pre defined styles, spacing and layouts.
A great example of and editor which solves this problem is the Behance Project editor, although they give you control over fonts and colours as this is a tool aimed at designers, it is a very powerful, simple and easy to use editor that anyone would be able to achieve great results with.
So taking all this into account I have decided to try and come up with my own editor which allows users to easily create a blog post but sticks to set style and layout rules ensuring they create a visually beautiful post with no design or technical knowledge.
Keep checking back to see how I get on...
So, I have recently been developing the homepage for our new website, and after completing the front end, we decided to see how it would look and work on the iPad.
After testing it to make sure it looked fantastic, the iPad was left on my desk so I decided to take a break from staring at my computer and take a look at the iPad and see what all the fuss is about.
After playing about for a couple of minutes with the games someone had put on there I found an app called sketch book pro and decided to see what it could do. The options available in the app are pretty cool, a variety of brushes, pens, pencils and all the colours of the rainbow.
Anyways, 5 minutes later I arrived at this:
So I bought a nice A5 graphics tablet off of one of our developers Ben the other day and after the novelty of writing my name over and over again in photoshop finally wore off I decided to see what it could really do and think about how it could improve our work flow.
To kick things off I got myself a trial copy of Autodesk’s Sketchbook Pro and started to have a play around. SBP is a basic program for sketching and although it isn't nearly as advanced as photoshop, it is very simple and easy to use and it makes it incredibly easy to just start sketching using your tablet and produces some nice results. I drew the Koi Fish in about 2 minutes, and best of all I didn't have to scan it in and use PS Levels to get it looking alright!
This got me thinking about possible uses for this technology in the studio. At CJ when we get animations in we do storyboards to illustrate how the animation will play out and what will happen. When we do these storyboards they are done by hand, normally by Greg and then scanned in and e-mailed over to the client.
This led me on to thinking if we did use this technology for storyboards, perhaps eliminating the need for scanning would encourage us to do a lot more sketching, and in my view this is no bad thing, as someone from Tricky Business once said at a user group, it's a lot easier to change a sketch than it is to change a photoshop file!
So I figure if we were all to do far more sketching at the early stages of a project and get everything laid out on paper (so to speak) before we even start designing then we could save ourselves a lot of back and forth between us and the clients and save ourselves a lot of time spent tweaking PS files here and there.
My thoughts - Get ya tablets on and start sketching!
So there has been a big debate flying around the office about who are the ultimate killing machines.
The nominees were in no particular order:
James Bond - Jason Bourne - Agent 47 - Leon - The Jackal
After many long discussions we put it to a vote and the results are in:
1st Place: Leon (53 points)
2nd Place: Jason Bourne (48 points)
3rd Place: James Bond (46 points)
4th Place: Agent 47 (41 points)
5th Place: The Jackal (22 points)
Personally I think everyone was wrong and Agent 47 would own everyone! What do you think??
So, IE6 is a pretty out dated browser and amongst other things doesn't support PNGs. Unfortunately there is still a percentage of people using IE6 so we still need to support it which can be a real bummer when the only way to successfully execute your design is to use PNGs for transparency.
Well there are a few solutions out there which will do the trick, however the one we have recently been using has a few issues which limits it;s abilities, mainly the lack of being able to repeat background PNGs, and a few issues with Z-Index of links.
Today Rob pointed me in the direction of a new PNG fix which is real easy to implement. You can download the script here.
All you have to do is put the JS file somewhere in your solution along with a blank GIF file and then call the script from any page using PNGs using the following bit of code:
<!--[if lt IE 7]><script type="text/javascript" src="unitpngfix.js"></script><![endif]-->
As long as all your paths are set correctly you should be up and running!
I stumbled across an issue today when using this script but Rob managed to fix them up pretty easily. The problem I discovered today was as soon as I put a link on an image, the image wouldn't render, but as discovered by Rob all you need to do to fix this is on all your PNGs simply put display:block and everything is back to normal!