Web design and development in London and Surrey » Tutorials http://zorinweb.com Just another Web design and development weblog Fri, 13 Jan 2012 14:56:03 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Converting a Design to a WordPress Website http://zorinweb.com/2009/12/converting-a-design-to-a-wordpress-website/ http://zorinweb.com/2009/12/converting-a-design-to-a-wordpress-website/#comments Thu, 17 Dec 2009 19:09:22 +0000 ZorinWeb http://zorinweb.com/?p=103 There doesn’t appear to be too many psd to HTML tutorials on the net, so I thought I’d write one. Given the popularity of the WordPress blogging software, I’ll code the design up for WordPress rather than a static HTML site.  To reiterate, this is about taking a design (in whatever format), slicing it up in Photoshop, or similar (Gimp), then applying the CSS to the HTML. WordPress features intuitive markup, so I’ll base the HTML around theirs.

The slicing of the design will be dealt with first, followed by a look at the HTML, then proceeded by the all important CSS. To begin with, let’s look at the design in the slicing environment.

1-overview

This is the psd of a recently completed website opened up and ready to slice in Photoshop. It’s a clean, uncomplicated design, so should be ideal for a tutorial. For demonstration purposes, I’m using the ‘crop’ tool instead of slicing tool, and saving each piece as a jpg in turn. There’s not a particular preference for image formt, so use what you wish; jpgs load up quicky, that’s all. Right, let the cutting begin.

background-slice

A slice is taken from the top of the psd going through the white space to just below the thick green line. It will be repeated across the <body> of the document, covering the width of the screen. Next, the little house with the lightbulb is cut out.

cutting-out-the-little-hous

The house is cut out from the top to just beneath the green like. It will later be layered over repeated background strip. Now for the logo and introductory text.

cutting-out-the-logo

cutting-out-logo

A similar effect for the text could have been gained using sIFR, but on this occassion opted for a CSS text replacement technique. After cutting out the navigation buttons – both the blue and ‘hover effect’ orange – and other bits and pieces, the last substantial piece of cutting is the Twitter section.

cutting-out-twitter

That’s all the cutting; let’s run through the pieces.

  • Background strip
  • Logo
  • Introductory text
  • House with lightbulb
  • Navigation buttons
  • Twitter section
  • Twitter button
  • Contact and Twitter headings

The HTML

Assuming you’ve installed a copy of WordPress, let’s navigate to the default theme to inspect the markup – ‘wp-content’, ‘themes’, ‘default’ directory. Open the index.php to view the following:

<?php
/**
* @package WordPress
* @subpackage Default_Theme
*/
get_header(); ?>
<div id="content" role="main">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
<div>
<?php the_content('Read the rest of this entry &raquo;'); ?>
</div>
<p><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
</div>
<?php endwhile; ?>
<div>
<div><?php next_posts_link('&laquo; Older Entries') ?></div>
<div><?php previous_posts_link('Newer Entries &raquo;') ?></div>
</div>
<?php else : ?>
<h2>Not Found</h2>
<p>Sorry, but you are looking for something that isn't here.</p>
<?php get_search_form(); ?>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

The WordPress loop, in bold, doesn’t have any bearing on this tutorial, so we can ignore it. get_header() renders the header part of the HTML, while get_sidebar() and get_footer() render the sidebar and footer, respectively. I’ve gone through the index.php file to avoid confusion; what I’d like to do is go through the rendered HTML as that’s what we’re going to style. Here’s the rendered HTML of index.php without the PHP ‘loop’ (I’ve deleted a few unordered lists fro the sidebar as they’re not relevant):

<body>
<div id="page">
<div id="header" role="banner">
<div id="headerimg"><h1><a href="Blog name"</a></h1>
<div><?php bloginfo('description'); ?></div>
</div>
</div>
<hr />
<div id="content" role="main">
</div>
<div id="sidebar" role="complementary">
<ul role="navigation">
<li><h2>Archives</h2></ul></li>
<ul><li><h2>Meta</h2></li></ul>
</div>
<hr />
<div id="footer" role="contentinfo">
</div>
</div>
</body>

Minus a few unordered listed from the sidebar, the above is more or less the standard HTML from the default theme. The site we’re working on in this tutorial is customised, so has slightly different HTML, but importantly, a similar structure. Here’s the HTML from DRC Electrical:

<body>
<div id="page">
<div id="header">
<h1><a href="http://drcelectrical.co.uk/" onfocus="if (this.blur)this.blur();"><span>DRC Electrical Services</span></a></h1>
<ul id="nav">
<li><a href="http://drcelectrical.co.uk/" onfocus="if (this.blur)this.blur();">Home</a></li>
<li><a href="/services/" onfocus="if (this.blur)this.blur();">Services</a></li>
<li><a href="/testimonials/" onfocus="if (this.blur)this.blur();">testimonials</a></li>
<li><a href="/blog/" onfocus="if (this.blur)this.blur();">blog</a></li>
<li><a href="/contact/" onfocus="if (this.blur)this.blur();">contact</a></li>
</ul>
<div><span>Hello, we are a company offering electrical services</span></div>
<div></div>
</div><!--end of header-->
<div id="content">
<div id="sidebar">
<div>
<div>
<h1><span>Contact DRC Electrical</span></h1>
<p>We always like to talk to people.
Just drop us an email or call us.</p>
<div>020 8287 7907</div>
<p>Mobile:</p>
<div>07985 279916</div>
<p>Email:</p>
<div>info@drcelectrical.co.uk</div>
</div>
<div>
<h1><span>Twitter</span></h1>
<div>
Going to elex expo at sandown should be good <a href="http://twitter.com/DRC_Electrical/statuses/6218208623" class="twitter-link">Go</a> <span class="twitter-timestamp"><abbr title="2009/12/01 00:24:04">2009/12/01</abbr></span>
</div> <!--end of twitter-message-->
<a href="http://twitter.com/DRC_Electrical/"></a>
</div><!--end of Twitter-div-->
<ul><li>
</ul>
</div><!--end of sidebar-content-->
</div><!--end of sidebar-->
<div id="content-left"><!--post/content goes in here-->
<div id="post-3">
<h2>DRC Electrical….</h2>
<div>
<p>provide electrical services to the London and Surrey areas. Fully qualified, and with years of experience on hand, our typical jobs range from electrical testing to full rewires. Emergency callouts, or jobs booked well in advance, we cover them all.</p>
<p>Our work is balanced between domestic and corporate customers alike. Onsite commercial electrical work is an area we’re very familiar with. From quotation to completion, we handle everything including sourcing products to disposal.</p>
<p>If you’re after a competitive rate from an company that’ll provide peace of mind, please don’t hesitate to get in touch. For emails, we aim to respond within 12-hours, while for enquiries that need immediate attention, please telephone.</p>
</div>
</div><!--end of post-->
</div><!--end of content-left-->
</div><!--end of content-->
<div id="footer">
<div><a href="http://www.zorinweb.com" target='blank' title="Website by Zw">Site by Zw</a></div>
<div>&copy; 2009 DRC Electrical</div>
</div><!--end of footer-->
</div>
</body>

That’s the generated HTML from the home page which I’ve commented as best as possible. The structure’s very similar to the default theme; we still have the ‘page’ DIV, ‘header’, ‘content’, ‘sidebar’ and ‘footer’. Assuming you’ve cut out the images, place them in an appropriate folder, and set up the development environment (if you use one), and let’s begin the styling.

The CSS

First, the body:

body {
margin: 0;
padding: 0;
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
font-size: 13px;
color: #fff;
height: 100%;
background: #1479c7 url(images/background-repeat.jpg) repeat-x;
}

Importantly here, we’ve taken our initial bit of slicing, ‘background-repeat.jpg’, and repeated it across the body’s x axis, and set the background to #1479c7. That’s the top of the sorted out, margin and padding zeroed in, etc.. As for the structure:

#page {
width: 810px;
margin: 0 auto;
}

The outer DIV, page, is set to 810px wide and placed in the centre.

#header {
width: 810px;
height: 380px;
position: relative;
}

With the header’s styling in place, we can now plonk the logo, navigation and introductory sentence in.

#header h1 {
margin:0px;
font-weight:bold;
}
#header h1 a {
height:100px;
width:350px;
background: url(images/logo.jpg) no-repeat 0px 10px;
float:left;
margin:20px 0 0 0;
}
#header h1 a span {
display: none;
}

Adhering to best practices and accessibility, the logo’s attached to a link within an H1 one heading. The actual HTML for DRC Electrical is inserted between span tags set to ‘display: none’. Here’s the navigation’s CSS:

#nav {
width: 800px;
position: relative;
padding: 3px;
margin: 0 0 0 7px;
height: 30px;
float: left;
font-weight: bold;
font-family: Georgia, "Times New Roman", Times, serif;
}
#nav li {
width: 120px;
float: left;
list-style: none;
}
#nav a {
height: 26px;
color: #FFF;
display: block;
text-decoration: none;
text-align: center;
background: url(images/nav-button.jpg) no-repeat;
padding: 4px 0 0 0;
}
#nav a:hover {
background: url(images/nav-button-hover.jpg) no-repeat;
}

‘#nav’ sets the container’s dimensions, ‘#nav li’ sorts out the individual elements, while ‘#nav a’ style’s out the actual links assigning the background of each to ‘images/nav-button.jpg’, the blue button cut out earlier on. Lastly for the navigation, ‘#nav a:hover’ gives a nice little hover effect with the orange button, ‘nav-button-hover.jpg’.

The introductory sentence is encased within ‘hello’ DIV.

.hello {
background: url(images/intro-text.jpg) no-repeat;
float: left;
height: 140px;
margin: 30px 0 0;
width: 470px;
}
.hello span {
display: none;
}

Again, the background’s set to images/intro-text.jpg, with a span styled to display none for the HTML to make it accessible. Closing out the header section, a DIV with a class of ‘lamp’. The following should be self explanatory:

.lamp {
float: right;
height: 200px;
margin: 16px 70px 0 0;
width: 230px;
background: url(images/lightbulb4.jpg) no-repeat;
}

Moving onto the ‘content’ portion:

#content {
width: 810px;
float :left;
}
#content-left {
width: 530px;
min-height: 650px;
position: relative;
float: left;
}

‘content-left’ is simply floated to the left to make way for the sidebar which appears before ‘content-left’ in the markup. Here’s the sidebar and it’s paragraph element:

#sidebar {
margin: 0 0 0 6px;
min-height: 600px;
width: 258px;
float: right;
display: table;
}
#sidebar p {
margin:4px 0;
color:#B8B291;
width:220px;
}

Incidentally display is set to ‘table’; I’ll explain about that in another tutorial. The next DIV in the sidebar is ‘side-content’.

.side-content {
float: left;
width: 258px;
padding: 0;
min-height: 500px;
}

The first piece of content in the sidebar deals with contact details, which is inserted in:

.contact {
border-bottom: 1px #7ab3df solid;
}

This gives us a nice border at the bottom.

h1.contact-sidebar  {
width: 226px;
height: 38px;
background: url(images/sidebar-contact.jpg) no-repeat -6px 0;
margin: 0;
}
h1.contact-sidebar span {
display: none;
}

The above styling’s for the ‘contact’ heading. sidebar-contact.jpg is cut out of the psd and assigned to an H1 heading with a class of .contact-sidebar. The same applies to the Twitter heading.

h1.twitter-sidebar  {
width: 226px;
height:38px;
background: url(images/sidebar-twitter.jpg) no-repeat -6px 0;
margin:0;
}
h1.twitter-sidebar span {
display:none;
}

Finishing off the sidebar is Twitter feed box and the corresponding ‘follow me’ button:

.twitter-div {
background:transparent url(images/twitter-box.jpg) no-repeat -10px 55px;
border-bottom:1px solid #7ab3df;
height:205px;
padding:10px 0;
}
.twitter-message {
color:#B8B291;
margin:18px 0 0 8px;
padding:0;
width:240px;
height:82px;
}
.followme {
background:url(images/follow-me-button.jpg) no-repeat;
display:block;
margin-top:25px;
height:30px;
width:145px;
}

The .twitter-div has it’s background set to  url(images/twitter-box.jpg) no-repeat -10px 55px; this is the Twitter box cut out earlier on. The ‘twitter-message’ fits in the box and styles the input, while ‘follow me’ button has it’s background set appropriately.

That takes care of all the images; here’s the rest of the CSS to go with the remaining markup:

#footer {
float:left;
height:39px;
padding:40px 0 0;
width: 810px;
color:#7ab3df;
}

Hope you enjoyed the tutorial.

]]> http://zorinweb.com/2009/12/converting-a-design-to-a-wordpress-website/feed/ 5 Simple jQuery Drop Down Menu http://zorinweb.com/2009/12/simple-jquery-drop-down-menu/ http://zorinweb.com/2009/12/simple-jquery-drop-down-menu/#comments Wed, 16 Dec 2009 21:16:46 +0000 ZorinWeb http://zorinweb.com/?p=86 Jquery’s a phenomenal JavaScript library that greatly reduces the amount of JavaScript required for front-end user interface interactions and utility tasks. As a quick introduction to the wonders of jQuery, I’ll demonstrate how simple it is to build a dropdown menu. First off, the HTML:

<div id="page">
<div id="content">
<ul id="menu">
<li><a href="#">About Us</a></li>
<li><a href="#" id="show">Services</a></li>
</ul>
<ul id="service-options">
<li><a href="blinds.html">Products</a></li>
<li><a href="curtains.html">Testimonials</a></li>
<li><a href="interior-designs.html">Contact Us</a></li>
</ul>
<ul id="menu">
<li><a href="#">Products</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div><!--page ends-->

We have a horizontal menu with a fitting ID of ‘menu’, nestled in a ‘content’ DIV. Within the menu there’s a DIV named ‘service-options’ which is a sub menu of ‘services’. Unordered list ‘service-options’ is hidden and only drops down upon clicking the ‘services’ link. Now for the JavaScript:

<script type="text/javascript">
$(document).ready(function() {
// hides the sub menu as soon as the DOM is ready, just before page load)
$('#service-options').hide();
// shows sub menu, service-options, when clicking the 'services' link
$('a#show').click(function() {
$('#service-options').toggle('slow');
return false;
});
});
</script>

Looking at the JavaScript, as soon as the DOM’s ready (once the browser’s reviewed the HTML), the ‘service-options’
ul is hidden using jQuery’s .hide() method. Next, an event handler is assigned to the ‘services’ link which has an ID of ‘#show’. $(‘#service-options’).toggle(‘slow’) attachs the ‘toggle’ method to the sub menu; this toggles it between two states, hidden and not hidden (not hidden being jQuery’s show() method). Incidentally, $(‘#service-options’) is jQuery’s method of selecting an element. That’s it, the event has been assigned to the ‘services’ link ready to toggle the sub menu in and out of view.

Download the file to play around with the script. Of course, you’ll need the jQuery library.

]]> http://zorinweb.com/2009/12/simple-jquery-drop-down-menu/feed/ 0 Using the Flickr API to Import Images to your Website http://zorinweb.com/2009/12/using-the-flickr-api-to-import-images-to-your-website/ http://zorinweb.com/2009/12/using-the-flickr-api-to-import-images-to-your-website/#comments Tue, 15 Dec 2009 20:27:49 +0000 ZorinWeb http://localhost/zorin-wordpress/?p=55 With a vast number of WordPress plugins available, it’s easy to download one, then plug and play while not having to get involved with any code. Although convenient, sometimes it’s intersting to know what’s going on under the bonnet. Here, I’ll be looking at the Flickr API thanks in large part to an interesting chapter from Sitepoint’s ‘The Art and Science of Javascript’. Where they mashed up Flickr with Google maps, I’ll merely download a Flickr gallery to a site, integrating it with the famous ‘lightbox’ image viewer so users can view an enlarged images without having to go to Flickr.

Assuming you have a Flickr account complete with images, you’ll need to retrieve your Flickr ID. Log into profile and look at the URL; for me it’s this one:

http://www.flickr.com/photos/36013535@N03/

The user ID is the group of characters following the end slash after ‘photos’. With that copy and pasted, it’s time to insert it into the Flickr API URL:

<script type="text/javascript" src="http://api.flickr.com/services/feeds/photos_public.gne?id=36013535@N03&lang=en-us&format=json">

If an RSS feed was required, we’d substitute the ‘format=json’ for ‘format=rss_200, but in this case it isn’t. Once load, the JSON (Javascript Object Notation) object (the feed returned from Flickr the account) is assigned to a global variable by way of the following callback function:

function jsonFlickrFeed(json) {
// Assign to a global variable
window.jsonFromFlickr = json;
}

Where the window.jsonFromFlickr gives the data global scope (as an aside and beyond the scope of this tutorial, the jsonFlickrFeed function is defined to avoid the cross domain restriction problem http://en.wikipedia.org/wiki/Same_origin_policy). To recap, once the data is loaded, it’s assigned to a function which stores the output in a global variable for later manipulation, and follows courtesy of the following two functions:

function makePhoto(photo) {
var li = document.createElement('li');
var a = document.createElement('a');
a.href = photo.link;
a.target = "_blank";
var img = document.createElement('img');
img.src = photo.media.m.replace('_m', '_s');
img.title = photo.title;
img.alt = photo.alt;
a.appendChild(img);
li.appendChild(a);
return li;
}


function showPhotos() {
if (!jsonFromFlickr) {
alert('Flickr photos failed to load');
}
// 'Empty' the ul by removing all of its children
var ul = document.getElementById('myPhotos');
while (ul.hasChildNodes()) {
ul.removeChild(ul.firstChild);
}
// Loop over the photos and display them all
for (var i = 0; i <= 9; i++) {
photo = jsonFromFlickr.items[i];
ul.appendChild(makePhoto(photo));
}
}


window.onload = showPhotos;


<!--HTML that's inserted within the body tags and renders the gallery-->
<ul id="myPhotos">
<li><a href="http://www.flickr.com/photos/myFlickrID/">ZorinWeb's Flickr Gallery</a></li>
</ul>

The first one, makePhoto(photo), is more or less a utility function used to construct the HTML from the JSON, triggered by the second function,showPhotos(). Firstly, showPhotos(), executed upon page load, checks to see if the global variable is present; if not, an alert box is thrown. Next, the function navigates the DOM to find the myPhotos <ul> node (this is where the images will rendered, in an unordered list) and remove the child nodes ready for re-population. Finally, showPhotos() loops over the JSON feed to generate the gallery in an unordered list. In the loop, variable ‘photo’ is assigned ith item from the feed, which is passed to the makePhoto() function. When returned as an <li> element, DOM method ‘appendChild’ is used to populate the unordered list.

Function makePhoto(photo) is quite self explanatory; an <li> is generated, before the hyperlink from the JSON feed (photo.link) is assigned to the newly created a.href. For img.src. ‘photo.media.m.replace’ replaces the ‘_m’ with an ‘_s’ in the src string to get a 75 * 75 pixel thumbnail. Title and alt attributes are built into the image which is then appended to the link. Lastly, the link is embedded within the list item before being returned to theshowPhotos() function. The showPhotos() loop completes leaving the <ul> populated on the page.

The thumbnails are now on the page, but in its present state can’t use the Lighbox gallery. When clicked, the user will be taken to Flickr which isn’t the idea; we want them to remain on the site, hence using Lightbox, or any other Lightbox effect. To achieve this, themakePhoto(photo) function is amended as follows:

function makePhoto(photo) {
var li = document.createElement('li');
var a = document.createElement('a');
//a.href = photo.link;
a.href = photo.media.m.replace('_m', '');
a.rel = 'lightbox[Zorin]';
a.title = photo.title;
var img = document.createElement('img');
img.src = photo.media.m.replace('_m', '_s');
img.title = photo.title;
img.alt = photo.alt;
a.appendChild(img);
li.appendChild(a);
return li;
}

The a.href is replaced with the link of the actual image (with neither the _m or _s, just the full size image) as opposed to the page. Furthermore, to make Lightbox function, a.rel has been added in and set to ‘lightbox[Zorin]‘; ‘Zorin’ has been included to allow navigation through a gallery within Lightbox. That’s it; here’s how the code should appear in the <head> of the document:


<head>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />


<script type="text/javascript">
function jsonFlickrFeed(json) {
// Assign to a global variable
window.jsonFromFlickr = json;
}


</script>
<script type="text/javascript" src="http://api.flickr.com/services/feeds/photos_public.gne?id=YOUR-FLICKR-ID&lang=en-us&format=json">
</script>
<script type="text/javascript">
function makePhoto(photo) {
var li = document.createElement('li');
var a = document.createElement('a');
//a.href = photo.link;
a.href = photo.media.m.replace('_m', '');
a.rel = 'lightbox[Zorin]';
a.title = photo.title;
var img = document.createElement('img');
img.src = photo.media.m.replace('_m', '_s');
img.title = photo.title;
img.alt = photo.alt;
a.appendChild(img);
li.appendChild(a);
return li;
}


function showPhotos() {
if (!jsonFromFlickr) {
alert('Flickr photos failed to load');
}
// 'Empty' the ul by removing all of its children
var ul = document.getElementById('photos');
while (ul.hasChildNodes()) {
ul.removeChild(ul.firstChild);
}
// Loop over the photos and display them all
for (var i = 0; i <= 9; i++) {
photo = jsonFromFlickr.items[i];
ul.appendChild(makePhoto(photo));
}
}


window.onload = showPhotos;
</script>
<!--the following three scripts are required for Lightbox-->
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
</head>

Lastly, pop the following into the body of the page:

<ul id="myPhotos">
<li><a href="http://www.flickr.com/photos/myFlickrID/">ZorinWeb's Flickr Gallery</a></li>
</ul>

If the global variable isn’t generated, you’ll be left with a link to your Flickr page, so it degrades gracefully…….kind of. For a demo, please see Misiek’s site.

This tutorial’s largely based on the abovementioned Sitepoint chapter, with the exception of the Lightbox effect added in by myself.

]]> http://zorinweb.com/2009/12/using-the-flickr-api-to-import-images-to-your-website/feed/ 1