Everybody loves entering competitions, especially when they win! In reality the winning part rarely happens, but most people can remember a time when they have been lucky. It’s for this reason that many people still enter competitions over and over again to seek out that rush of potentially winning something. This is good news for people who run websites, as competitions can serve as a handy tool to gather key information about your visitors which you can use to your advantage. It enables you to capture data about your audience.

Have you ever wondered what the actual demographic of your site was? Then run a competition that requires them to fill out a form with specific information about themselves. Within a few days you will have some accurate, reliable data about your audience. Perhaps you want to increase the number of people that receive your newsletter? Capturing email addresses via a competition is a simple solution. Follow these steps to build a fully functioning competitions module for your WordPress site.

DOWNLOAD TUTORIAL FILES

Let’s start coding

When building any plug-in for WordPress it is important to define constants which you may want to refer to in the future. Here, we will define various things such as database table names and the plug-in title used for the admin sidebar.

001 global $wpdb;
002 define(‘COMPETITIONS_TITLE’, ‘Competitions Plugin’);
003 define(‘COMPETITIONS_SLUG’, ‘competitions_plugin’);
004 define(‘COMPETITIONS_TABLE’, $wpdb->prefix . ‘competitions’);
005 define(‘COMPETITION_ENTRIES_TABLE’, $wpdb->prefix . ‘competition_entries’);
006 define(‘COMPETITIONS_DOCROOT’, dirname(__FILE__));
007 define(‘COMPETITIONS_WEBROOT’, str_replace(getcwd(), home_
00 8url(), dirname(__FILE__)));

Hooks and includes

Every WordPress plug-in should use ‘hooks’ that install and uninstall the plug-in. We define those here as well as including the install, model and controller scripts that are the meat and bones of the plug-in. Using the ‘add_action’ method we can add an admin link in the sidebar that will link to our plug-in admin page. Code can be found on the resource disc.

Create some database tables

You will require two separate tables for this plug-in to work. One that stores data about the competitions you are running, such as the questions and answers, and another table which will be used to record the actual entry data of the users that have entered.

001function competitions_install () { global $wpdb;
002 require_once ABSPATH . ‘wp-admin/includes/upgrade.php’;
003 dbDelta(‘
004 CREATE TABLE `’ . COMPETITIONS_TABLE . ‘` (
005 `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
006 `competition_name` longtext CHARACTER SET utf8 COLLATE utf8_bin NOT NULL,
007 `question_1` longtext CHARACTER SET utf8 COLLATE utf8_bin NOT NULL,
008 `answer_1_option_1` longtext CHARACTER SET utf8 COLLATE utf8_bin NOT NULL,
009 `answer_1_option_2` longtext CHARACTER SET utf8 COLLATE utf8_bin NOT NULL,
010 `answer_1_option_3` longtext CHARACTER SET utf8 COLLATE utf8_bin NOT NULL,
011 `correct_answer_1` longtext CHARACTER SET utf8 COLLATE utf8_bin NOT NULL, 
012 `closing_date` DATETIME DEFAULT NULL,
013 PRIMARY KEY (`id`),
014 UNIQUE KEY `id` (`id`)
015 ) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;
‘);
}

Allow for easy uninstallation

Sometimes we may want to remove a plug-in, so it’s a good idea to provide some functionality that will allow you to do this with ease. Not only do we want to remove unwanted code, but we probably do not want unused database tables lying around. We can remove the database tables that were created during the installation process by simply using a ‘DROP TABLE’ SQL statement. The code for this step is on the resource disc.

Backend form

We need a way of entering competition details. To do this we first require a form with some typical information that you would normally associate with a competition. This plug-in enables you to set three multiple choice answers for a given question. You can also set a closing date and allow it to run over a specific time period.

Using the generated shortcode

When you’ve entered all the info needed to configure a competition, the info you provided is then saved to the competition’s table. A short-code is then generated which when inserted into a post will display the competition.

Editing a competition

You can quite easily make changes to an existing competition that
you have, should you wish to make any slight alterations to the information that you have already saved earlier in the tutorial. Under the Edit/Delete competition section simply click on the Edit button. This will now pre-fill the form with the saved data you have already entered. This is all controlled from the competitions_main function which can be found within the controller.php script.

001// Update data
002if (isset($_POST[‘competitions_update_data’])) {
003 $id = $_GET[‘id’];
004 competitions_table::update($id,$_POST); 
005 $location = strtok($_SERVER[“REQUEST_URI”], ‘&’);
006 wp_redirect( $location );
}

The competitions_main function

The competitions_main function is the backbone of the plug-in, and is found within the controller.php script. We use this function primarily for adding/editing and deleting competition data. All of its functionality can be rendered via one template named main.php. The methods it employs can be found within the model.php script and are all declared as public static functions, which means that they can be called from outside the scope of the script in which it resides.

001//Inserts competition data when form is submitted
002public static function insert ($row) {
003 global $wpdb;
004 return $wpdb->insert(COMPETITIONS_TABLE, array( 
005 ‘competition_name’=> stripslashes_ deep($row[‘competition_name’]), 
007 ‘question_1’=> stripslashes_
008deep($row[‘question_1’]),
009 ‘answer_1_option_1’=> stripslashes_ deep($row[‘answer_1_option_1’]),
010 ‘answer_1_option_2’=> stripslashes_deep($row[‘answer_1_option_2’]),
011 ‘answer_1_option_3’=> stripslashes_ deep($row[‘answer_1_option_3’]),
012 ‘correct_answer_1’=> stripslashes_deep($row[‘correct_013answer_1’]),
014 ‘closing_date’=> stripslashes_deep($row[‘closing_ date’]) 
));
}

Downloading entry data

Another piece of administration functionality which needs to be added is the ability to download and view the details of the people that have entered the competition. We can do this by querying both of our database tables. The only information we need is the personal details of every user and the answer they gave for the question that was asked. It’s also a good idea to include the correct answer of question so you can easily pick a winner.

Create the CSV file

To view the entry information simply click the ‘download entries’ button on the competition you wish to view. This can be found in the Edit/Delete section under the form. Once clicked it will initiate the competitions_main function and grab all the data using the SQL query shown in the previous step. We then create a new CSV file and write to it using a built in PHP function called fputcsv.

001if (!empty($compEntries))
{
002 $fileName = strtolower($compEntries[0][‘competition_name’]); 003 $fileName = str_replace(“ “, “_”, $fileName);
004 $fp = fopen(‘../competition_entries/’.$fileName.’.csv’, ‘w’);
005 $coloumTitles[‘0’][‘competition_name’] = ‘Competition Name’; 
006 $coloumTitles[‘0’][‘correct_answer_1’] = ‘Correct Answer’;
007 $coloumTitles[‘0’][‘answer’] = ‘Answer’; 
008 $coloumTitles[‘0’][‘forename’] = ‘Forename’;
009 $coloumTitles[‘0’][‘surname’] = ‘Surname’;
010 $coloumTitles[‘0’][‘email’] = ‘Email’;
011 $compEntries = array_merge($coloumTitles,$compEntries);
012 foreach ($compEntries as $fields) {
013 fputcsv($fp, $fields); }
014 fclose($fp); 
015 header(‘location:http://’.$_SERVER[‘SERVER_NAME’].’/ competition_entries/’.$fileName.’.csv’);
}

Displaying the amount of entries

Another handy feature of this plug-in is the ability to view the amount of people that have entered the competition without the need to download the CSV file. This information can be found at the top left of the competition box. We can display this information to the user by querying the number of rows in the competition_entries table.

Active/inactive competitions

Some people may want to run multiple competitions on their website. Therefore it is important to keep track of your competitions and know which ones are currently running and which ones have expired. To make this obvious to the user, change the expired competition boxes to red and the active ones to green.

001$time = strtotime($data[‘closing_date’]);
002//Chance css class if comp has expired
003if ($time >= time())
{
004 $compBoxClass = ‘competitionBox’;
005 $statusText = ‘Active’; }
006 else
{
007 $compBoxClass = ‘inactiveBox’;
008 $statusText = ‘Expired’;
}

The front-end

Let’s move on to the frontend now. The function responsible for actually displaying the competition to the user is called insert_competition
and is found within the controller.php script. First of all we extract the competition ID from the shortcode and grab the competition information from the database.

Loop through our data

Once we have executed our SQL we can put the resultset into an array and loop through each element. It’s a good idea to check if we actually have any competition data returned from our SQL query, because if we don’t it’s likely that the competition has expired as one of the conditions in the SQL was that the closing date had to be in the future. Wrap your loop in an IF statement and only loop through the array if it is not empty.

001if (!empty($competitionSQL))
{
002 foreach ($competitionSQL as $competitionData)
{
003 $id = $competitionData->id;
004 $competition_name = $competitionData->competition_name;
005 $question_1 = $competitionData->question_1;
006 $answer_1_option_1 = $competitionData->answer_1_option_1;
007 $answer_1_option_2 = $competitionData->answer_1_option_2;
008 $answer_1_option_3 = $competitionData->answer_1_option_3;
009 $correct_answer_1 = $competitionData->correct_answer_1;
010 $closing_date = $competitionData->closing_date;
}
}

Displaying the competition

Now we have fetched our competition from the database and looped through each element we can now display this information to the user. To do this we need to write some HTML that uses the PHP variables populated with the information we fetched from the database. We also require a CSS file to give the output some style, not forgetting some JavaScript to validate the data the user enters.

Validating user input

Sometimes website users can be pretty stupid. It is always worth putting in some sort of validation to prevent them from missing out vital fields and mistyping email addresses. In this example we use some JavaScript to make sure all fields are filled out correctly. The JavaScript is triggered when it detects that the ‘Enter Now’ button is clicked.

001if (comp_firstname == “First Name”) 
{ 
002 $(“label#comp_firstname_comp_error”).show(); 
003 $(“.errorSpacer”).show(); 
004 $(“input#comp_firstname”).focus(); 
005 return false; 
} 

Validating email addresses

To double check the user has provided an email address is the easy part – we can do that by checking to see that the email input is empty. Next we have to see if the data provided is actually an address. We can do this by using regular expressions combined with the JavaScript ‘test’ method.

Using Ajax

Ajax is a useful tool for posting data to a PHP script without the need to refresh the page. We can use Ajax here to post the data from the competition form to a PHP script for processing. Once this action has been performed we can feed back to the user that their entry has been received, and hide the input fields to prevent multiple entries.

Deleting old competitions

As time goes on your old competitions will start to clutter up the screen. When you no longer want your competition/entry data simply click on the ‘delete competition’ button. This will trigger a simple piece of SQL that erases all your competition and entry data. See the code on the resource disc at the back of the mag.

That’s it!

Have a look around the code on the disc and install the plug-in. Try running a competition on your website and see if you manage to obtain some details about your user demographic. Use the emails that your form has captured to your advantage and remember you don’t have to break the bank when it comes to your prizes. Running a competition can be a very cost-effective way of increasing your potential reach.

DOWNLOAD TUTORIAL FILES

Maps and geographic location data are a big part of our online presence and applications. More often than not, maps tend to look similar, as a single provider generates them. This means your map looks just like everyone else’s.

Let’s take a step back from the existing mapping libraries available and investigate the small but powerful Leaflet.js library. Used by a number of recognisable organisations including Flickr, Meetup and foursquare, Leaflet.js works wonderfully on desktop and mobile devices, and makes use of modern HTML5 and CSS3 techniques, yet it’s still accessible on older browsers.

In this tutorial we will create a data-driven mapping application to plot the location of London train stations. We will see how we can build up the various layers of the map, including the zoom and scale controls, and we’ll obtain our geographic tiles for display from a third-party client. We’ll also incorporate some simple functions to update the style of the generated tiles directly from our map interface.

Import Project

Create a new project or folder in your chosen code editor and import the code from the starting_project directory on the resource disc. This contains the default html page, stylesheets, and jQuery library. Alternatively, you can create your own layout and transfer all of the required asset files to incorporate your own design.

Include Leaflet.js

To begin creating our map, we first need to reference the relevant JavaScript files to include the Leaflet.js functionality. You can download the files if you want to run them locally (available here: monkeh.me/8resh), but we will take advantage of the hosted libraries and call them via the CDN. Place these within the head of your document.

Map container

Create a div element as the container for the map. Any specific ID attribute value can be used for any number of elements – this means that you can include multiple maps on one page, should you so wish. We’ll keep it simple and call our container ‘map_holder’ so it’s easy to recognise and remember. Place this within the main div element.

CloudMade Account

The Leaflet.js mapping tool needs access to tiles – the square images that are pieced together to make the map. There are many tile providers out there, and you can host your own server if you wish. For this tutorial, we will use CloudMade. Head over to cloudmade.com, sign up for a free developer account, and obtain your API key.

Global values

Create a new script tag block, into which we’ll place two global variables. The first is the CloudMade API key, and the second is the default style of map you would like to use – in this instance, we’re going for the Fresh theme. We’ll then add in the jQuery ready() method, inside of which we’ll place the rest of our code.

001 < script type=”text/javascript”>
002 
003 var apiKey = ‘Your CloudMade API key’,
004 styleID = ‘997’;
005 
006 $(document).ready(function() {
007
008 });
009 < /script>

Define boundaries

Our map data will focus on central London, so we have no specific requirements for the user to be able to view outside of a certain area. We can generate two pairs of co-ordinates and set those as the defining boundary box for our application, which will create a specific rectangular area on the map, between the boundaries of which people can view.

001 var southWest = new L.LatLng(50.233152, -6.635742),
002 northEast = new L.LatLng(53.644638, 2.109375),
003 bounds = new L.LatLngBounds(southWest, northEast);

Initialize Map

To display our map on the page, we now need to initialize it and assign it to the map container element. To do so, we’ll create a new map and set the default view using a LatLon pair defaulting to central London. We’ll also set the maxBounds using our bounds value, defined earlier.

generateTileURL

Before we add any tiles to the map, create a function called generateTileURL that will accept the API key and style ID variables. This will generate the required string URL for inclusion in the map, and we can reuse this method a little later on to change the style of the map tiles from a select box element.

001 function generateTileURL(apiKey, styleID) {
002 return ‘http://{s}.tile.cloudmade.com/’ + apiKey + ‘/’ + styleID + ‘/256/{z}/{x}/{y}.png’;
003 }

Add tiles

Using the generateTileURL function with default values, we’ll also create the text for the map attribution layer and set up the default values for our map tiles, including the maximum zoom level. Here, we also detect if the device has a high-definition display. If so, it will use four tiles of half the size to utilise the higher resolution.

001 var cloudmadeUrl = generateTileURL(apiKey, styleID),
002 attribution = ‘Map data © OpenStreetMap contributors.’,
003 tileLayer = new L.TileLayer(
004 cloudmadeUrl, 
005 { 
006 maxZoom: 18, 
007 attribution: attribution,
008 detectRetina: true
009 });
010 
011 tileLayer.addTo(map);

Custom zoom

We added zoomControl false to our map initialization method. By default a control is added to the top-left. We can override this to suit our
layout by creating a new zoom control object and specifying the required position from a list of predefined options. We then need to add this to our map object like so.

001 var zoomControl = new L.Control.Zoom({ position: ‘topright’} );
002 zoomControl.addTo(map);

Display scale

We can also create a new scale control object to accurately display
the scale of the map. Our attribution layer is positioned down on the bottom-right of the map object, so we’ll position our scale control over on the bottom-left and add this to the map using the same method as we have with the zoom control.

001 var scaleControl = new L.Control.Scale({ position:‘bottomleft’ });
002 scaleControl.addTo(map);

Style selection

Create a new select box form element before the map container, setting the id attribute to styleSelector. This will hold the name and ID values of the styles we would like to select from. This contains the default CloudMade styles, but could also contain any custom styles you may have created especially for your application.

Change style

Add an onchange handler within the jQuery script block. When a new style is selected, this will set the ID value of the chosen style to the styleID global variable, which we’ll pass through to our tile generation function to update the URL. We then call the setUrl() method to update this value and regenerate the tiles for display.

001 $(“#styleSelector”).bind(“change”, function() 
002 {
003 if ($(“#styleSelector”).val() !== “”) {
004 styleID = $(“#styleSelector”).val();
005 var revisedURL = generateTileURL(apiKey, styleID);
006 tileLayer.setUrl(revisedURL);
007 }
008 });

Import Data

Our application needs to read the data we have about the London train stations. The project contains a file called stationData.js, which includes the JSON data. This data has the latitude, longitude and name of each station, which is perfect for plotting any markers on the map. Reference this file in the head of the HTML document.

Generate markers

Create a new function call addMarkers. This will accept the map object and the stationData in JSON format. Looping over the data, we will create a new Marker object for each station, setting the latitude, longitude and title, as well as binding a Popup window to also display the title string, complete with any HTML markup that may be included.

001 function addMarkers(map, stationData) {
002 for (var i = 0; i < stationData.length; i++) {
003 var a = stationData[i];
004 var popupDetail = a[2];
005 var title = popupDetail.replace(/(<([^>]+)>)/ig,””);
006 var marker = new L.Marker(new L.LatLng(a[0], a[1]), { 
title: title });
007 marker.bindPopup(popupDetail);
008 map.addLayer(marker); }
009 } 

Add markers

Place a reference to the addMarkers function within the main mapping code, after the zoom and scale controls, sending through the required parameters. This will generate the markers and add each one onto the map.

001 addMarkers(map, stationData);

Station selector

Create a new select form element next to the style selector. Set the id attribute for this to stationSelector and provide a default value for display. We’ll use this to select a station, which in turn will prompt the map to pan, zoom and centre itself upon the selected marker.

001 < select id=”stationSelector”>
— Select Station —

< /select> 

Populate list

Within the jQuery block, let’s once again loop over the data available from the stationData JSON. We’ll create a new option tag block with every loop, setting the custom data attributes with the station’s geographic co-ordinates, and the name of the station for visual reference. Finally, we’ll append this string to the select element to display the data.

001 var stationOptions = “”;
002 
003 for (var i = 0; i < stationData.length; i++) {
004 stationOptions += ‘
’ + stationData[i][2] + ‘’; 
005 }
006 
007 $(“#stationSelector”).append(stationOptions);

Set view

Add a new onchange function that will obtain the latitude and longitude from the data attributes for the selected station. This function will then call the setView() method directly on the map, passing in the
co-ordinates and setting the zoom level from the maxZoom value we
added when instantiating the tile layer.

001 $(“#stationSelector”).bind(“change”, function() 
002 {
003 var selectedStation = $(“#stationSelector :selected”);
004 if (selectedStation.attr(“data-latitude”) !== undefined 
005 && selectedStation.attr(“data-longitude”) !== undefined) {
006 var thisLat = selectedStation.attr(“data-latitude”);
007 var thisLon = selectedStation.attr(“data-longitude”);
008 map.setView([thisLat, thisLon], map.getMaxZoom());
009 } else {
010 map.setView(latlng, 1);
011 }
012 });

Using plug-ins

There are many open-source plug-ins for integration with the Leaflet mapping library, available from the plug-in list: leafletjs.com/plugins.html. We’ll use the marker cluster plug-in to provide a much nicer, simplified view of our generated markers on the map. Download the plug-in code and export the contents of the dist folder into your project. The full code for this step can be found on the resource disc.

Revise Markers

With the cluster plug-in added to our page, we must make some small changes to the addMarkers function. Firstly, we’ll create a new MarkerClusterGroup object into which our markers will be placed. Finally we’ll add the populated markers object as a layer onto the map, instead of the individual station markers.

001 function addMarkers(map, stationData) 
002 {
003 var markers = new L.MarkerClusterGroup();
004 for (var i = 0; i < stationData.length; i++) {
005 var a = stationData[i];
006 var popupDetail = a[2];
007 var title = popupDetail.replace(/(<([^>]+)>)/ig,””);
008 var marker = new L.Marker(new L.LatLng(a[0], a[1]), { title: title });
009 marker.bindPopup(popupDetail);
010 markers.addLayer(marker); 
011 }
012 map.addLayer(markers);
013 }

Improved visuals

With the addition of the marker cluster group, the mapping interface has been improved. The markers are now grouped in clusters based on the generated polylines from each marker’s geographic location, and the clusters will update and animate whenever we zoom in our out of the map.

Osbornbarr.com is a digital agency that’s set in the very heart of rural USA. Your first impressions of the site may lead you to believe that it is in fact promoting agriculture, and you would be forgiven for thinking this. However, as soon as you explore the actual content it becomes obvious that this digital agency specialises in telling your story to your clients.

The site is beautifully designed with clean sections of content, textured side panels, and footers that provide good contrast. The site is fully responsive and loses only the textured sidebar when scaling down, and the only content found in the said sidebar is the logo. This really is a great design experience for mobile and desktop browsers alike.

DOWNLOAD THE CODE

TECHNIQUE

Create mobile-friendly navigation

Link up to the libraries

Download the nano scroller and the CSS file from http://jamesflorentino.github.com/nanoScrollerJS/. Place these in your website root folder and then create a new HTML5 page. In the head section, link up the jQuery library, the nanoscroller plug-in file and the nanoscroller CSS file as shown in the code below.
These will power part of the menu.

Style up the content

We will now add our CSS for the menu. We are making the page black and creating a panel that will slide on and off from the left. This will contain the nano scrolling section of the project. A button will hold the controls to move the menu on and off the page.

001 body, html
{ background: #111; color: #fff; height: 100%; overflow: hidden; font-family: Helvetica, Arial, sans- serif;}
002 #panel
{background-color: #555; width: 180px; height: 100%; padding: 10px; position:absolute; top: 0; left: -200px;}
003 #switch
{background-color: #555; position: absolute; padding: 10px; top: 0; left: 0; cursor: pointer; font-size: 3em;}
004 .nano
{ width: 180px; height: 300px; }

Add the document content

Now simply move your cursor to the body section of the document and then add your content div tags as shown in the code below. Here we have the overall side panel menu and inside that is the nano scroll section. Everything that can scroll goes into the content class. Any other menu elements can go below the scrolling section.

Make it work

Under the last code add the JavaScript tag as shown in the code below then the JavaScript code. It’s here that we initialise the nano scroller and we then add a click function to the switch, which will subsequently allow the menu to slide on when it is pressed, thus revealing the scrolling list and any other menu goodies that might exist.

Finish the code

Here we set the panel to animate in if it’s not on the screen already, which is in fact the complete opposite of the last step, which had it animate out. Now you need to save your work and test it in your browser to see the panel sliding in and out of the screen revealing a scrollable section. And, mobile-friendly navigation has been created.

001 } else {
002 $(“#panel”).animate({‘left’:’0′}, ‘easeOutSine’);
003 $(‘#switch’).text(‘< ‘); 004 onScreen = true; 005 }  006 });  // ]]>

inspiration: www.andyward.co.uk

Heavily illustrated layout has become a real hit with creative web designers. Such appeal is be attributed to the limitless imagination and creativity applicable within your design projects. Creating blueprints for sites normally means that you will have to go against standard images, layouts and simple textures – thereby offering regular fresh challenges.
There is a no-holds-barred approach to style, which includes examples such as vector, photo-illustration, real world and mixed media. Designers are even able to experiment and renew retro looks, such as Web 2.0 and 8-bit.

These are applied in subtle and inventive ways. In essence, creating illustrative websites enables designers to have fun. This also extends to the use of colour, which is equally liberating. Vibrant tones are often encouraged to enhance what is essentially a very playful style. From a commercial point of view, even though numerous subcategories exist, illustration itself isn’t likely to be going away any time soon. Therefore it has become a web trend that clients and audiences can trust as it continues to be contemporary.
In a nutshell, illustration gives the viewer a wholly memorable experience when visiting your website. Applying relative styles gives your website the personality to stand out from the crowd, which is always one of the most important factors. In this Web Workshop we will be showing you how to produce exciting styles to achieve this aim using
Adobe Photoshop.

INSPIRATION

CS6 Vector shapes
Clean bold vector styles are in fashion, with many sites sporting vector-drawn mascots. You may think that Adobe Illustrator would be your choice tool, with its vector engine offering you resizable elements. But if you don’t want to make the jump from Photoshop to another software package, you needn’t. Version CS6 of Photoshop now includes its own vector engine, applied to Shape and Type tools.

TECHNIQUE

Pen Path illustration
The Pen tool and its two settings, Shape and Path, become essential when creating digital illustrations inside of Photoshop. Here we look at how to apply the Path setting to create open paths. Add a stroke to these to create line work. Of course, this means we also must set the correct brush settings, which we also reveal to you. We finish this effect by using our brush to colour our line art.

Draw open paths
Create a new layer called ‘Lines’ then use the Pen Path tool to create an illustration outline. You can use paths to create line detail too. Just Cmd/Ctrl-click to close a path, then start a new one.

Set brush style
Select Paths Panel>Create New Path and add line areas to one layer. Select Brush Presets>Brush Tip Shape (Angle at 45°, Roundness at 12%). Activate Shape Dynamics from the same options.

Paint in colour
Shape Dynamics Size Jitter = 100, Control = Pen Pressure, Min Diameter 35, Angle Jitter 5. Cmd-click path, Stroke Path. Use same brush (10% Opacity, Shape Dynamics off) to add colour.

The rise of Bootstrap, or as it was formerly known, Twitter Bootstrap, has been phenomenal. In case you are not aware, Bootstrap is a responsive framework created by two Twitter employees so that they didn’t have to start from scratch when starting web projects. The problem is, there are many people using it while not really having the understanding that it is a starting point for projects, so we have many sites with a Bootstrap look!

Bootstrap is built on LESS, so it can be customised using that, but there are plenty of people who just want to get on to using it and not bother with LESS or having to compile via Node and command line. There is a customise page on the Bootstrap site that enables a unique look to be created, but if you change all the colours, there’s no way to save that style – so if you want to download a newer version of Bootstrap at some point in the future, you will lose that unique look you have crafted. The acceptable way to create a unique look is to download the base version of Bootstrap, and then modify the features in a new CSS file, which is what we’ll be doing.

DOWNLOAD TUTORIAL FILES

Setting up

Copy the start folder from the resource disc onto your desktop and open ‘index.html’ in a code editor such as Dreamweaver. In the head section add the following links that provide the css for Bootstrap, link to a custom font and our own style sheet that will give us the unique look we want.

001 <link href=”css/Bootstrap.min.css”     rel=”stylesheet”>
002 <link href=”css/Bootstrap-responsive.min.    css” rel=”stylesheet”>
003 <link href=’http://fonts.googleapis.com/    css?family=Quando’ rel=’stylesheet’ type=’text/    css’>
004 <link href=’css/mystyle.css’         rel=’stylesheet’ type=’text/css’>

Link to the JavaScript

The next part is to link up the JavaScript. Scroll to the bottom of the document and there will be some code inside <script> tags that power the Carousel. Just above those lines add the code shown below that links to the jQuery library and the Bootstrap library.

001 <script src=”https://ajax.googleapis.com/    ajax/libs/jquery/1.8.3/jquery.min.js”></script> 002 <script src=”js/Bootstrap.min.js”></script>

Open the CSS document

Now we are ready to start adding our content, so open the file ‘mystyle.css’ – there is already some code in there, but add the new code at the top. We will change the font and background colour slightly, which we will do in the body. Next we change the typeface for the branding and h1 and h2 of the site to our custom font from Google Web Fonts.

001 body {
002 color: #5a5a5a;
003 background-color:#fff;
004 }
005 .brand, h1, h2{
006         font-family: ‘Quando’, serif;
007 }

Branding image problems

One of the major problems with the site design is that the branding image is too large for the header and navigation section. In the code below we reduce the size of this. We also start to give our navigation a unique highlight colour to move away from the traditional Bootstrap look.

001 .myImg{
002         width: 35px;
003         height: auto;
004 }
005 a {color: #f5850c;}
006 a:hover {color: #960;}  

Unique navigation

Nothing says Bootstrap quite like the navigation bar, so let’s start giving this a completely new look. This piece of code will give the drop menu an orange background when it is selected. Add the following code to the section of the stylesheet that is commented with Customise the navbar.

001 .navbar .nav li.dropdown.open > .dropdown- toggle,
002 .navbar .nav li.dropdown.active >     .dropdown-toggle,
003 .navbar .nav li.dropdown.open.active >     .dropdown-toggle {
004 color: #fff;
005 background-color: #f5850c;
006 }

Drop down highlights

If you move your mouse over the drop menu you will see that the background here is still the default blue, so we’ll change that by adding the next section of the CSS that changes the highlight colour to orange. We do this by overwriting the gradients of the original.

001 .dropdown-menu li > a:hover,
002 .dropdown-menu li > a:focus,.dropdown-submenu:hover > a {
003 color: #ffffff;
004 text-decoration: none;
005 background-color: #f5850c;
006 background-image: none;

Finish the drop down

The remaining code that we add here ensures that we cover every browser for the gradient background images. Because the original CSS file from Bootstrap has the background-image listed for each one, we have to set it back to none. Hopefully, one day, we might be able to get rid of the multiple prefixes.

001 background-image: none;
002 background-image: none;
003 background-image: none;
004 background-image: none;
005 background-repeat: no-repeat;
006 filter: none;

Move the navigation down

We want the navigation bar moving down and sitting in the white space at the top of the document a little better than it currently does. The next section of code moves this down, but the bar still has the default gradient that makes it look so obviously like a Bootstrap-based document. We will sort the gradient out in the next step.

001 .navbar-wrapper {
002 position: absolute;
003 top: 0;
004 left: 0;
005 right: 0;
006 z-index: 10;
007 padding-top: 20px;
008 margin-bottom: -90px; 
009 background-color: #FFF;
010 }

Remove the gradients

Now we’ll overwrite the gradient in the navigation bar, so we’ll do that by overwriting the default values of the nav bar with just white as the background colour. As stated earlier, the only reason this code is so large is because there are so many different browser prefixes required for this to work.

001 .navbar .navbar-inner {
002 border: 0;
003 background-image: none;
004 background-image: none;
005 background-image: none;
006 background-image: none;
007 background-image: none;

Finish the nav bar

We also remove the drop shadow that is a very default look of the Bootstrap theme. It’s probably worth checking out at this stage how the changes look. Save the file and load the page in your web browser. A few simple modifications of the base Bootstrap theme are already beginning to give us a unique look.

001 background-image: none;
002      -moz-box-shadow: none;
box-shadow: none;
004 filter: none;
005 }

Focus colour change

The current page still has the highlight style that has the default grey background. We’ll change that by removing the inner shadow and changing the hover and focus colour to the orange that we have used elsewhere in the design of our navigation. Save the page now and we are really moving away from the default look of the standard theme.

001 .navbar .nav > .active > a,
002 .navbar .nav > .active > a:hover,
003 .navbar .nav > .active > a:focus {
004 color: #f5850c;
005 text-decoration: none;
006 background-color: #ffffff;
007 -webkit-box-shadow: none;
008 -moz-box-shadow: none;
009 box-shadow: none;

Starting the Carousel

One of the main problems you will notice as you look at the page is that the Carousel isn’t quite big enough to deal with our images or the content inside of each of the slides. Add the code below to the CSS after the comment Carousel base class. Save this and give your browser a refresh to see the changes made.

001 .Carousel .item {
002 height: 550px;

Controlling the Carousel

Because we’ve made the Carousel larger the controls need to be moved down to a more central position because they are too close to the top at present. We add the following CSS rule to keep everything the same but just move the controls down by 60px to sort out the problem.

001 timeline.timeline.date.push(tweet); } 
002 deferred.resolve();

Highlighting the three images

The three images immediately below the Carousel are going to be given greater emphasis now. We will do this by adding two background images, which is a CSS3 feature. The first will give us a pattern while the second will be a gradient. This will help to define this section.

001 .hilite-wrapper{
002 background-image: url(../img/drop.png), url(../img/diamond_upholstery.png);
003 background-position: left top, left top;
004 background-repeat: repeat-x, repeat;
005 padding: 50px 10px 80px 10px;
006 border-top-width: 1px;
007 border-top-style: solid;
008 border-top-color: #ccc;


Centre the heading and image

The section is nicely highlighted with the background, but we also want to centre both the image and heading in each column. We could always just centre everything in the column, but centred body text is slightly harder to read for users’ eyes owing to the ragged edge on the left. This code will just centre the heading and image.

001 .hilite h2 {
002 font-weight: normal;
003 text-align: centre;
004 }
005 .hilite img{
006 display: block;
007 margin: 0 auto;
008 }

Responsive Carousel

If we change the view of our design so that we are at a tablet-sized display, you will see that the Carousel has a large section of white underneath it. To fix this, we’ll change the height slightly and some of the positioning. Add the following code inside the @media (max-width: 979px) { section of code.

001.Carousel .item {
002 height: 500px;
003 }
004 .Carousel img {
005 top: 100px;
006 width: auto;
007 }
008.Carousel-caption {
009 padding: 0 70px;
010 }

Phone-sized fixes

We just need to add some other fixes now to the design when we are at the phone size. Change your web browser viewport to a phone-sized display and you will see there are a few problems. Add the following code inside the @media (max-width: 767px) { section of code. This fixes the margins of the Carousel.

001 .Carousel {
002 margin-left: -20px;
003 margin-right: -20px;
004 }

Phone Carousel

Despite the extra width to the Carousel there are still some problems. Lets reduce the size of the Carousel height and then set the width to be automatically sized for the image. Add the following code immediately under the last. This helps the image appear much better. Next, to sort out the text.

001 .Carousel .item {
002 height: 300px;
003 }
004 .Carousel img {
005 width: auto;
006 }

Change the caption

With the addition of the following code we can see much more of the caption as we’ve reduced our width and moved the text up slightly. Despite these changes for the better the text is just too large and there is far too much of it, so let’s consider how we can clear that up.

001 .Carousel-caption {
002 width: 65%;
003 margin-top: 120px;
004 }

Caption fixes

We’ll reduce the size of the caption text and remove the lead text that is immediately under the caption heading. Save this and check out the changes in the document. Now you should be able to read the heading much more clearly, especially without the clutter of the other text.

001 .Carousel-caption h1 {
002 font-size: 25px;
003 }
004 .Carousel-caption .lead {
005 display: none; 
006 }

Extend to the edges

The highlight wrapper code is used to highlight the three images in the footer section of the site. We’ll widen those sections to take advantage of the full width of the display in the smaller device by extending the margins, as the base class for Bootstrap brings the margins in by 20px.

001 .hilite-wrapper{
002 margin-left: -20px;
003 margin-right: -20px;
004 }

Final fix

For the last part, we will add a little more space to each entry in the highlight section and reduce the size of the typography further down the page. With this in place, save your file and you should see a fully responsive Bootstrap site that starts to move away from the default look and feel of the template.

001.hilite .span4 + .span4 {
002 margin-top: 40px;
003 }
004.featurette-heading {
005 font-size: 25px;
006 } 

INSPIRATION: www.substrakt.co.uk

The rise of CSS3 has seen a whole new collection of methods for creating cool and contemporary styling that used to need jQuery at its side to be achieved. The introduction of CSS transforms and transitions means that CSS is now far more capable of creating animation effects without the need for any external code.

CSS transitions could be construed as hover effects on steroids, but that would be doing them an injustice as they have so much more to offer. Transitions can add a smooth transition from one state to another. Adding opacity into the mix allows the transition to go from a solid colour to an translucent state, or the opposite effect can be achieved just as easily. This is a technique seen on the homepage of the Substrakt site with the addition of increasing the background image size. The opacity can be played with to create the right amount in the start and finish states.

Hover effects, it seems, have been around since HTML was invented and they are still a popular technique. The beauty of hover effects is that they can be manipulated to appear in a host of guises. They are relatively quick to build and offer good browser support.

The typical approach for creating navigational elements is to use an unordered list and add the hover effect on the active link. Nothing wrong with this, but to go more HTML5-friendly the nav tag can be styled to achieve much the same effect. This requires less code and is easy to display horizontally or vertically. Adding an underline, as demonstrated in the Substrakt site, is again a simple but effective hover effect using only CSS.

TECHNIQUE

QUICK CSS3 FADE EFFECTS
Fade effects on the hover state are very popular and the use of CSS transitions removes the need for any user coding. In the following example a < div> tag contains a background image with styled text overlaying it. The initial state uses a high opacity to give the merest hint of the image. The hover effect, applied to the < header> tag, uses a low opacity to view the image when the cursor rolls over the associated text.

Create container

Create a < div> tag to contain the background image and set height and width to match the latter. Now add the background image in the tag: background-image: url(escape.jpg);

Fade class

Now to create the fade class that determines colour, length of transition and starting opacity. The opacity ranges from 0-1, set to .9 to start with a dark background. Adjust speed of fade (eg 1s).

Hover effect

Set the fade hover opacity to 0 or 0.1 to ensure the background image gets seen. Use the < h2> tag to add text and add the fade class to the tag (see disc for full code).

TECHNIQUE

ADD CUSTOM UNDERLINES TO LINKS
An underline is often added to text links to emphasise the current link. The Substrakt site takes the basic concept and adds a hover effect. The hover effect changes the text colour and adds a styled underline.

The nav tag

To create the navigation base, the semantic < nav> tag is going to be used rather than an unordered list. The first step is to add a set of < /nav>< nav> tags in the body and then include the links that are to occupy the menu.
001 < nav>
002 < a href=”#”>WORK< /a>
003 < a href=”#”>ABOUT< /a>
004 < a href=”#”>JOURNAL< /a>
005 < a href=”#”>CONTACT< /a>
006 < /nav>

Style link

By default links will sit horizontally, so the first step is to add a right margin to add space. To create the space between the link and underline, bottom padding needs to be added. To finish, style the text and set text-decoration to none to remove underline

001 nav a {
002 padding: 10px 0px 20px 0px;
003 margin: 0px 30px 0px 0px;
004 text-decoration: none;
005 color: #999;
006 font: 800 14px Open Sans;}

Add underline

The final step is to add the underline on hover. This is achieved by adding a bottom border, nav a:hover {border-bottom: #000 solid 3px;}. A designer has the option to modify all the settings – eg colour, width, style – to suit.

One of the most gratifying aspects of CSS3 and the advent of jQuery, is the manner in which it has unleashed the web designer’s creativity to come up with novel approaches and solutions to design problems. CSS3 alone isn’t enough to transform the web as we experience it today, but when boundaries are pushed and new ideas are developed, the result can become mainstream with large-scale adoption (as with CSS-only image galleries for example).

In this tutorial we’re creating a badge using CSS and a jQuery plug-in to wrap the words along a curved path. This isn’t going to become a common technique in itself by any means, but the concepts may get you thinking of fresh ideas and solutions to user interface challenges, developing approaches that could become mainstream tomorrow!

DOWNLOAD TUTORIAL FILES

Create the HTML

Our final badge is going to incorporate CSS, jQuery and some Photoshop work. First we need some simple HTML elements to work with, so start off by creating a badge container <div>, and within it place a separate <div> for the badge top and the badge bottom, with a final <div> for the centre of the badge. You can find our starting HTML on the resource disc.

001    <body>
002        <div id=”container”>
003            <header>
004                <h1 id=”headline”>Arctext.js</h1>
005                <h2>Curving text with CSS3 &amp; jQuery</h2>
006            </header>
007            <section class=”sub” id=”sub2”>
008                <div id=”badge”>
009                    <h3 id=”badgetop”>Experience•the
•power</h3>
010                    <h3 id=”badgebottom”>Of • curved • CSS3 • text</h3>
011                    <div id=”badgeinner”>POLICE</div>
012                </div>
013                <div class=”clr”></div>
014            </section>
015            <div class=”clr”></div>
016        </div>
017    </body>

Download Arctext

To achieve simple text along a path, we’re using the Arctext plug-in for jQuery. This works by splitting words in to individual letters and rotating each about a central point, allowing the word to appear to curved around that point. Download the plug-in from tympanus.net/Development/Arctext.

Make the badge

We’ll need some basic styles for our page – to help define how the badge will look (although this is also handled by the script for the curve of the text), as well as the design around the badge. The first thing to do, however, is create your badge graphics, so open Photoshop and create a document that’s 400px square.

Circular selections

Fill your canvas with a dark blue colour (we used #1A1A33 but you can find a shade you prefer if you wish), and apply the noise filter by choosing Filters>Noise>Add Noise. This will form the basis of the background to the badge, but we need to create the outer ring of the badge, leaving space for the text to slot in. Use the marquee tool to create a circular selection that fills the canvas as close as you can get to the edge.

Layer Styles

With your selection active, create a new layer and fill the selection with any colour. Set the fill value of this layer to 0% in the layers panel, then add a stroke layer style by choosing Layer>Layer Styles>Stroke. Set the stroke to be 1px, inside, and white.

Add stars

Repeat the process to create a smaller ring inside the first, and then use the shape tool to draw a star in a gold colour. Position the star so that it will appear between the two text phrases. Duplicate it and position the copy on the other side of the canvas.

The inner badge

Now repeat the same process as in the previous steps, this time creating the inner section of the badge. The document should be 260px square instead of 400px, and you can add some ornamentation to suit your own design – we added a gloss effect and a large central star.

Create basic styles

Now that we’ve got our graphics ready, it’s time to create the basic CSS styles that will position them accordingly. Start with the overall badge by setting it to be 400px in width and height. Add a border-radius value of 200px to force it into a circular shape, and apply the main badge graphic as a background.

001    #badge {
002        position:        relative;
003        width:            400px;
004 height: 400px;
005 background: #1a1a66 url(badgebg.jpg) 
no-repeat top left;
006 border-radius: 200px;
007 color: #fff;
008 text-align: center;
009 }

Create the inner badge

Using a similar approach, position and set the inner badge area using a width and height of 260px and a border-radius of half that – 130px – to achieve a circular object. Apply the badge centre graphic as a background, and use absolute positioning with margins to ensure the centre appears in the exact middle of the main badge.

001 #badgeinner {
002 position: absolute;
003 top: 50%;
004 left: 50%;
005 margin-left: -130px;
006 margin-top: -130px;
007 background: #1a1a33 url(badgeinner.jpg)
no-repeat center center;
008 border-radius: 130px;
009 width: 260px;
010 height: 260px;
011 }

Get jQuery ready

We’re ready to try curving our text! Start off by downloading and including the jQuery library and the Arctext plug-in in the section of your page, then create a set of < script> tags and the standard $(document).ready() function ready for our calls to the Arctext plug-in methods. Note that jQuery 1.9 and above no longer supports IE versions older than v9.

Make it curve!

Arctext works by calling the Arctext method on a jQuery selection, and passing in a radius you’d like to curve around. Additionally, you can specify the type of curve you’d like to apply: 1 for a curve up, and -1 for a curve down. Add the code shown to curve the top and bottom badge text.

001 < script type=”text/JavaScript” 
src=”scripts/jquery.js”>< /script>
002 < script type=”text/JavaScript” 
src=”scripts/jquery.Arctext.js”>< /script>
003 < script type=”text/JavaScript”>
004
005 $(document).ready(function(){
006 $(“#badgetop”).Arctext({radius: 170, dir: 1});
007 $(“#badgebottom”).Arctext({radius: 
170, dir: -1});
008 });
009 < /script>

Position with CSS

If you test your page you’ll notice that the curves don’t line up with the badge very well. That’s no problem though, we can fix this using CSS to position the top and bottom text independently of each other. Add the code shown below to your stylesheet to put this in place, and then run a test again to see the text in the correct place on your badge.

001 #badgetop {
002 width: 440px;
003 position: absolute;
004 top: -10px;
005 left: -20px;
006 text-align: center;
007 color: #dec705;
008 }
009 
010 #badgebottom {
011 width: 440px;
012 position: absolute;
013 bottom: -10px;
014 left: -20px;
015 text-align: center;
016 color: #c4a704;
017 }

Animated centre

We can also apply animations using Arctext. Start by applying the same call to Arctext as in the previous step, then use the set method to add an animation to the text. We’ll do this to the centre of our badge by adding the code shown below immediately beneath our existing calls to the Arctext() method.

001 $(“#badgeinner”).Arctext({radius:-1,dir:1});
002 $(“#badgeinner”).Arctext(‘set’,{
003 radius: 200,
004 dir: 1,
005 animation: {
006 speed: 5000
007 }
008 });

Grab a web font

Our text is looking good, but it would look better if we used a more appropriate font to suit our subject matter. We can grab a suitable font from the Google Web Fonts service – www.google.com/webfonts. Choose one you like the look of and follow the instructions to install it on your page.

Animate the badge

Although we’ve already got an animation, it would be nice to make more of the curved text. We’ll create a CSS animation and apply it to our badge to maximize the effect! Start by adding the code shown to create two different animations (our code is shown for WebKit browsers, but you can also create Mozilla, IE and Opera versions to suit).

001 @-webkit-keyframes rotatecw {
002 0% {
003 -webkit-transform: rotate(0deg);
004 }
005 100% {
006 -webkit-transform: rotate(359deg);
007 }
008 }
009 
010 @-webkit-keyframes rotateccw {
011 0% {
012 -webkit-transform: rotate(0deg);
013 }
014 100% {
015 -webkit-transform: rotate(-359deg);
016 }
017 }

Apply the animation

Now we’ve got the animations set up, we can apply them to our badge with a simple line of CSS. We’ve added a rotation to the badge overall, and then the second animation to the inner badge. The two rotate in opposite directions to give the impression that only the outer ring of the badge is animated.

001 #badge {
002 font-size: 1.5em;
003 position: relative;
004 width: 360px;
005 height: 360px;
006 padding: 20px;
007 background: #1a1a66 url(badgebg.jpg) 
no-repeat top left;
008 border-radius: 200px;
009 color: #fff;
010 text-align: center;
011 margin: 50px;
012 border: 4px solid #1a1a33;
013 box-shadow: 0px 0px 10px #000;
014 text-transform: uppercase;
015 -webkit-animation:rotatecw 10s linear;
016 }
017 
018 #badgeinner {
019 position: absolute;
020 top: 50%;
021 left: 50%;
022 margin-left: -130px;
023 margin-top: -130px;
024 background: #1a1a33 url(badgeinner.jpg) 
no-repeat center center;
025 box-shadow: 0px 0px 10px #000;
026 border-radius: 130px;
027 width: 260px;
028 height: 260px;
029 line-height: 120px;
030 font-size: 2em;
031 -webkit-animation:rotateccw 10s linear;
032 text-shadow: 0px 0px 10px #000;
033 }

Add a final polish

We can complete our design by creating a page background in Photoshop and adding some additional styling to our text to make it appear all upper-case. Add the final styles shown, and then test in your browser to make sure the completed design works as it should. Tweak animation timings to suit your own preferences.

001 h1, h2 {
002 text-align: center;
003 text-transform: uppercase;
004 font-weight: normal; 
005 margin: 0;
006 padding: 0;
007 }
008 
009 h1 {
010 font-size: 4.5em;
011 color: #f4d006;
012 text-shadow: 0px 0px 10px #000;
013 }
014 
015 
016 #container {
017 position: relative;
018 width: 500px;
019 margin: auto;
020 font-size: 1.4em;
021 }
022 
023 #badge h3 {
024 font-weight: normal;
025 }

Facebook is a platform that serves many eCommerce purposes. From large global corporations to small family-run businesses, they are all using Facebook to reach their customers, promote their brands and build their customer base. The ability for the public to write their own Facebook applications has once again seen the many uses for Facebook grow even bigger.

StoreYa is a Facebook app that helps you integrate your online store to your Facebook page, allowing you to display your entire catalogue of products. Once installed, you can sort, re-order and categorise your products with the simple-to-use interface on the StoreYa website. Your new Facebook store will include many useful features – worth a mention are the Like and Share buttons for each product. These buttons allow your customers to promote specific products on their own Facebook page. StoreYa boasts that you can integrate your eCommerce store with your Facebook page using their application in 30 seconds. We’ll be putting that to the test using a Magento platform.

DOWNLOAD TUTORIAL FILES

Get a Facebook account

If you’re not part of the 1 billion people with a Facebook account, go to www.facebook.com and create one. It’s really simple to do and should only take a few minutes. Make sure to follow the three main steps carefully and add as many people as you can. Remember – the more friends you have, the number of potential sales you could get is increased.

Create a fan page

If you already have a Facebook account (or have just created one) you now have to set up a fan page. A fan page is slightly different from your normal Facebook page and is primarily used to build a closer relationship with your customers. Go to www.facebook.com/pages and click on the green Create a Page button on the right of the screen.

Pick your page category

The first step towards creating your new Facebook fan page is selecting the category that suits your needs, and is the most relevant to the service and/or product you are selling. If you are a business that wants to promote your products or services, then typically you would select the Local Business or Place category. The other categories to choose from include: Company, Organization or Institution, Brand or product, Artist, Band or Public Figure, Entertainment, and Cause or community.

Describe your business

Choose suitable profile and header images for your page. It’s probably a good idea to use your company logo for the profile image and if you have the Photoshop skills then create a collage of your most interesting products for the header. A great example of this can be seen at www.facebook.com/imagineshopuk. Next add a description and website URL to improve the ranking of your page in the search results.

Develop your fan page

Now that the basics are in place it gives you a good foundation to build on. Try sharing something, or perhaps promote a special offer you are currently running. The more people your page is connected to on Facebook, the more active and engaging it will be. Set an achievable goal of getting your first 50 Page Likes. Get started by inviting your friends.

Register with StoreYa

Now that your Facebook page is up and running, it’s time to set up the StoreYa application. Head over to www.storeya.com and click on the Connect with Facebook button. Logging in to StoreYa is done by connecting with Facebook using your personal profile.

Create your Facebook store

First you need to select which eCommerce platform you are using. For this example we will use Magento but the StoreYa application supports a wide range of platforms including: Shopify, Amazon and WordPress to name but a few. If your platform does not appear in the list then you can still upload your products using the CSV export option.

Setting up the API

In order for the StoreYa application to sync with your Magento store, you first need to create an API User; this is done by creating an API role. Log in to the Magento admin panel and navigate to System>Web Services>Roles. This page lists the current API roles, and it is here that you will need to create a new role.

Creating a new API role

Click Add New Role and give it a name of your choosing. It can be anything, but a descriptive name such as ‘StoreYa API’ would be ideal. Next, click on Role Resources, which is on the left-hand side, then select the All option which appears in the drop-down list. Finally, click Save Role and the new API role will be saved.

Create a new API User

Now that the role is created you need to create a user that will be associated with this role. Click: System>Web Services>Users and you will be presented with a form. Fill out all the fields on the form and bear in mind that the API Username and API Key will be the username and password you will use later, so make sure they are secure. Click Save User and then select the role you created earlier.

Using the API User and Key

If the process was successful then you should see a green tick with a confirmation message presented at the top-left of the screen. You can now use the API User and API Key in the next step of the import process. Write them in the fields provided and hit Continue.

Alternative syncing methods

If you are using an older version of Magento then the API method may not work. If you experienced any problems following the steps above then you may want to consider using a Google base feed or manually exporting your products to a CSV file that you can then upload manually.

Exporting the CSV file

Go to the admin control panel and click System>Import/Export>Profiles. Next you have to add a profile so click on the Add Profile button. Fill out the form ensuring that the Entity Type drop down has the Product option selected and the Profile Direction field displays Export. Hit the Save Profile button.

Run the export command

The profile you created should now be shown in the profile list. When you click on it you will be presented with a form filled with options. Choose a file name for the CSV file and select where you want to export the file to. Be aware that you cannot export this file to your local desktop; you can only export it to the server on which the Magento store is hosted. Fill in the rest of the fields, and hit Run Profile, which is in the left-hand navigation bar.

Upload the CSV

FTP to your server and navigate to the directory you told Magento to export the CSV file to. Copy it to your local machine and in your browser go to www.storeya.com/register/magento-csv. Enter your store URL and upload the CSV. A progress bar should appear, and once it has been uploaded hit the Activate button. Your Facebook store should now be up and running!

Check out your store

Log in to Facebook and navigate to your fan page – you should see a Shop now button. Click on the button and it will take you to your new store. You will see that the categories are listed along the top for easy navigation. There is also a search bar that allows your Facebook users to search your catalogue of products. The order in which the categories and products are presented along with other customising options can all be managed by using the admin section of the StoreYa website. Simply log in and start configuring!

Managing your store

When you get logged in you will be presented with a graph showing the number of visitors you have had. When a few weeks/months have passed this page will become increasingly useful as more data will be generated, allowing you to see which of your products and categories are most popular.

Change the appearance

Next we will want to give our store some style and individuality. Click Customize your store>Customization. From here you will be able to add a header image, change colours, select the number of products per page, and change the currency to that of your choosing. The easy-to-use interface makes this process a breeze, and it also allows you to see what your changes look like without having to navigate away to your Facebook page.

Customising your store

You may want to change the order of the products on the landing page of your store. To do this you can use the intuitive drag and drop system. Click Manage store>Manage products. From this page you can perform a variety of tasks such as editing product data, removing a product from your store, and changing the order in which it appears.

Watch your sales increase

Reaching out to a Facebook audience is a great way to raise your brand/product awareness with an online community that may never have seen or heard about what your business is selling. Having a direct link from your Facebook page to your products removes the process of a potential customer having to track down your eCommerce store and view your product information the conventional way. Hopefully, over time you will see your sales increase, as well as raised awareness of your products.

inspiration: barrelny.com/recap/2012

Barrel is a digital agency from New York, and like many agencies it enjoys showing off its design and development skills. The 2012 Recap element of the site, chosen here, uses a full screen video background.
The selected video clip shows an everyday scene at the agency to help emphasis who and what they are. The short clip runs on a loop simply repeating at the end of the clip. The length of the clip is around 30 seconds, but it is the size that is a more important consideration. The bigger a clip the longer it will take to load, so keeping it short/small will help to ensure a more enjoyable user experience.
There are various options for creating a video background. There is the more bespoke option of using Video.js or BigVideo.js for one thing. Alternatively, for those who do not have the video they want, a video from YouTube can be implemented.

Big div

The first step is to create a div to contain the video. This will have a height of 100% and a width of 100%. Add a new div tag, < div id=”bigvid”>< /div>, to the body and name it accordingly. Add a comment to the closing tag for future reference.

001 < div id=”bigvid”>

text will go in here

002 < /div> 

Go fullscreen

Save the page and preview in your preferred browser. The video will currently have a space around it – set the body tag to 0 padding and margins. Even though the video is set to 100% on both height and width, only the width is currently observing the width value. Add position:absolute to the video container CSS to resolve.

001 #bigvid {
002 position: absolute;
003 background-color: #000;
004 height: 100%;
005 width: 100%;
006 }

Add an overlay

To overlay a div tag over the video the div needs to be positioned using the absolute value. Add a new div tag and name appropriately. Now set the width and height to 400px and set position to absolute. Add a background colour, but make sure that it is one that complements the background video.

001 #start
002 {
003 position: absolute;
004 width: 400px;
005 height: 400px;
006 z-index: 1;
007 background-color: #000;
008 }

Styling and centring

To make the div created in the previous step a circle, the border-radius property is to be used. Add border-radius and set to the width of the div tag to 400px. To position the circle, first add top: 30%. To centre the circle add left: 50%, and margin-left to half the width with a minus value, -200px. Finally add some padding and text.

001 #start
002 {
003 position: absolute;
004 width: 400px;
005 height: 400px;
006 z-index: 1;
007 background-color: #000;
008 border-radius: 400px;
009 top: 30%;
010 left: 50%;
011 margin-left: -200px;
012 }

inspiration www.oscar-charlie.com

DOWNLOAD TUTORIAL FILES

One of the more recent trends in web design has been filling the web browser width with content. An extremely good way of doing this is with masonry layouts, which have been covered in Web Designer on previous occasions (see issue 195). Oscar Charlie takes a variation of the masonry layout and applies a grid structure to a mosaic image layout.

The whole of this layout is one long, endlessly sliding carousel. This provides a great interface by which customers can move through a lot of content in both a graphic and visual way. The site has been designed this way to link to an employee mobile app, which allows for real-time status and photo uploads. This provides a simple and intuitive way for customers and other interested parties to experience these uploads.

TECHNIQUE

Develop a montage layout

Get the library

Like most projects, we can kick start ours by using jQuery and the Automatic Image Montage plug-in, so download this from tympanus.net/codrops/2011/08/30/automatic-image-montage. Create a new HTML document in this folder, and in the head section we’ll link to the stylesheet that will style the images. You could add a border to each image, or make them flush against each other here.

001    <link rel=”stylesheet” type=”text/    css” href=”css/style.css” />

Add page content

Move into the body section and we’ll create a container div tag to hold everything. Inside here we’ll add another div tag to hold the montage. Finally we add the images. Feel free to add as many as you like here – the image folder has 73 images named numerically. The code for this step is on the resource disc.

Link to the library

After the closing div tag of the container div, we can add our links to the appropriate JavaScript libraries. The first line of code links to the CDN jQuery library online. The second links to the minified version of the montage library that will power our layout here. The code for this step is also on the CD.

Count the images

Here our container for the montage is recorded together with the number of images within the montage, and each one is hidden from the display. Then each of the images is looped through with a load function to see if they have loaded into the browser.

001    $(function() {
002    var $container = $(‘#montage’),
003    $imgs    = $container.find(‘img’)    .hide(),
004    totalImgs = $imgs.length,
005    cnt = 0;
006    $imgs.each(function(i) {
007    var $img = $(this);
008    $(‘<img/>’).load(function() {

Display the montage

Once all images have loaded, they are made visible again and arranged within the display to fill the browser. Save the page and test in the browser to see the images load in a style very similar to the website.

001    ++cnt;    

002    if( cnt === totalImgs ) {
003                                $imgs.show();    
004                                $container.montage({
005                                fillLastRow : true,
006                                alternateHeight : true,
007                                alternateHeightRange :     {min:180, max:240}
008                        });
009 }
010 }).attr(‘src’,$img.attr(‘src’));
011 });    
012 });
013 </script>

The Automatic Image Montage plug-in for jQuery is very easy to use and can fill a webpage with images. The plug-in contains a number of different attributes that allow the layout to be customised.