Web Designer - Defining the internet through beautiful design » Dreamweaver http://www.webdesignermag.co.uk Web Design for real people Thu, 09 Feb 2012 01:00:29 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Create interactive animations from a Twitter feed http://www.webdesignermag.co.uk/tutorials/create-interactive-animations-from-a-twitter-feed/ http://www.webdesignermag.co.uk/tutorials/create-interactive-animations-from-a-twitter-feed/#comments Tue, 07 Feb 2012 17:10:08 +0000 Steve Jenkins http://www.webdesignermag.co.uk/?p=8307

Create interactive animations from a Twitter feedTwitter is a great tool for getting the pulse of the world, and is becoming more and more pervasive as mainstream media starts to include tweets in audience participation. The majority of users access and use Twitter through the http://twitter.com website, but thanks to the public API, we can now take the data from Twitter and do something a little different with it.
This tutorial is inspired by the excellent Tori’s Eye site, found at http://toriseye.quodis.com/#webdesigner. This is a visualisation of a Twitter stream that places some stylised birds into a landscape, flying across the screen to deliver tweets. It uses the Twitter JSON API to grab tweets from the Twitter timeline and a smattering of JavaScript to present them in an engaging manner.
In our version we’ll simplify how this is done, but we’ll be using the same basic principles to create an animation along similar lines to Tori’s Eye. Once you’ve completed this workshop you should have the understanding and tools at your disposal to create your own visualisation in new and exciting ways. Perhaps you’ll feel compelled to let us know what you come up with by Tweeting us (naturally) via @WebDesignerMag.

tools | tech | trends: Adobe Illustrator, Dreamweaver, jQuery, HTML, CSS & Twitter
expert: Sam Hampton-Smith
tutorial files: download here

01. Design a mockup
We start off by taking direct inspiration from the Tori’s Eye visualisation and designing a replica inside Illustrator. Our file can be found on the disc, but to get the textures we’ve used you’ll need to visit www.sxc.hu and search for paper and rusty metal stock. Note that we’ve separated out the background and the birds onto different layers for easier export later.

02. Output to PNG
Once we’re happy with the overall visual look, we need to export the graphics in a format suitable for use in the final HTML design. The background can be a straight JPEG as it doesn’t need any transparency. The birds, however, must be in PNG format. You need to isolate one bird and export it – this will become the master bird graphic.

03. Other elements
In Tori’s Eye the trees are separated into a layer above the birds, so that the birds can fly behind them. We’ve chosen not to mimic this for ease of understanding, but we did separate out the trees onto their own transparent PNG layer just in case we want to replicate the layers later down the line. You can find all our graphics on this month’s CD.

04. Create the HTML structure
We’ve got our graphics sorted, so now let’s create the basic HTML structure. Add the step code to a new page in your web editor. We’ll create some basic CSS rules, and to keep it simple we’ll retain all our style and script code in this one file. If you want a quick step up, we’ve included the basic HTML page on the disc – just open up ‘start.html’.

 <html>
<head>
<title>Twitter Animation</title>
<style>
</style>
</head>
<body>
<div id=”container”>
<div id=”trees”>
<div id=”tweetscontainer”>
</div>
</div>
</div>
</body>
</html>

 05.  Add some CSS
Apply this CSS; the full code is on the disc.

body {
 font-family:    arial, helv, sans- serif;
font-size:    66%;
background:    #f9f9f9;
padding:    20px;
}
#container {
position:    relative;
width:            1024px;
height:        700px;
margin:        auto;
background:  transparent url(styles/background.jpg) no-repeat top left;

06. Grab jQuery
Visit http://jquery.com and download the latest version of the library. jQuery makes it easy for us to interact with different elements on the page and create animations. To this end, we’ll install it at the top of our page, and set up a function beneath ready to hold all of the code to make our visualisation work.

<script type=”text/javascript”  src=”scripts/jquery.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
// Your jQuery code will slot in     here
 });
</script>

07. Connect to Twitter
Twitter has an API that’s publicly accessible. If you’re creating a full application, you may want to sign up for a specific developer API key, but for our purposes we’re just going to use the public version. We can call this using jQuery’s JSON method. Note that we’re passing in a search term that will return matching tweets – change this to suit you. Full code is on the CD.

var url = “http://search.twitter.com/ search.json?q=iphone&rpp=15&callback=?”;
var tweets = $(‘<ul id=”tweets”>’).         appendTo(“#tweetscontainer”);
$.getJSON(url,  function(data){
// Do something with the data returned

08. Parsing JSON
The data is returned from Twitter as a JSON object. JSON is a straightforward way to wrap data as a set of keys and values in an array. All we need to do is to iterate through the returned array and generate HTML. code from the values for each set of data. Add the code below to do this; full code is on the cover disc.

$.getJSON(url,  function(data){
$.each(data.results, function(i,item){
tweets.append(‘<li><div><img src=”‘  + item.profile_image_url +’” alt=”‘ +
item.from_user + ‘” width=”73″           height=”73″ /><p><a href=”http://twitter.       com/’+item.from_user
+’/statuses/’+item.id+’” title=”Click    here to view this on twitter”>’+item.from_      user+’</a> at
‘+item.created_at+’: ‘+item.text.           replace(/(\w+:\/\/[A-Za-z0-9-_]+\.              [A-Za-z0-9-_:%&\?\/.=]+)/gi, ‘<a
href=”$1″>$1</a>’).replace(/             [\@]+([A-Za-z0-9-_]+)/gi, ‘<a href=”http://     twitter.com/$1″>@$1</

09. Output results
Our code generates a list item (<li>) for each tweet, wrapping the actual contents of the tweet inside a <div> tag. We’ll use this later on to show and hide the tweet, but for now you should have 15 list items once the code has finished doing its work.

10. Test it out
It’s worth taking a moment to make sure your script is loading the tweets and outputting them in HTML. Although this will look pretty ugly, it’s a quick way to verify everything is working as it should. Once you’ve loaded it in your browser and observed all your tweets loading, you can move on to the next step.

11. More style
Let’s deal with the ugliness first of all. Each list item will become a bird that we animate across the screen. We’ve already set our container to have overflow:hidden, so we’ll be able to position our birds so that they start off outside the visible area, then animate them into position. Add the CSS below to set the start position for each <li>. Full code is on the disc.

#tweets {
position:    absolute;
top: 0;
left:  0;
width:  2000px;
margin-left:  -300px;

12. Create speed variables for the birdies
We’re going to generate a speed variable for each list item and run a function periodically to set the position of the bird. Each time the function runs, we’ll use the speed variable to reposition the list item by a set amount, and as we repeatedly run our function, so the list items will appear to be animated across the page.

13. Generate random values
We’re going to use random numbers to set the speed of each bird so that the birds don’t all fly across the screen at the same rate. JavaScript lets us generate random numbers using the Math.random() function. Add the code below to call up a random number between 0 and 9 to represent the speed of each bird.

var speed=Math.floor(Math.random()*10)+1;     

14. Set the start position
We don’t, however, want them all to be at the same vertical level, otherwise it’ll become very monotonous – so to avoid this we need to set a random starting position. We also need to store the speed value for each bird, and we can do this using the .data() method in jQuery. Add the code below to set the vertical position and store the speed. We also set the horizontal position to offset a little for each <li>.

var offsettop=Math.floor(Math. random()*400)+10;
$(“#tweets li:last”).data(“speed”,speed).css({top:offsettop,right:2000+(i*30)});

15. Get things moving
Although jQuery has the animate() method, we’ll use a straight setInterval function and set the position of each bird using CSS alone. This will enable us to control the frame rate more easily and give more predictable results. To start we’ll need a function that fires periodically; add the code below to create this.

var t = setInterval(function(){
// we’ll set the position of each bird every 30 milliseconds
},30);

16. Get things moving 2
Each time the function fires, we want to update the position of every bird to its new location on screen. Add this step’s code to grab the speed for each bird from the data() object and update the position of the bird accordingly. Again, full code is on the CD.

var t = setInterval(function(){
$(“#tweets li”).each(function(){
// grab the speed variable
speed = $(this).data(“speed”);
// and the current position
xpos = $(this).css(“left”);
// if the bird is off the left hand side of the screen, reset it to the right

17. Time to test
It’s time to open your page and test it out. All being well, after a short delay while the Twitter feed loads, you should see birds flying across the screen with tweets sitting on top of them. We’re nearly there now – just a bit of tidying up to do!

18. Pause for thought
The first thing that we notice is that it’s a little tricky to read the tweets as they zoom past. Let’s make the bird stop in position when the cursor is hovered over it. We’ll want the bird to carry on moving when we mouse off the bird, so add a clause to the animation function, and add a class to the bird as we mouse over to exclude it from the animation.

$(“#tweets li”).not(“.hover”).each(functio…
$(“#tweets li”).hover(function(){
$(this).addClass(“hover”);
$(this).css({zIndex:1000});
},function(){
$(this).removeClass(“hover”);
});

19. More style
Now we’ve got our birds flying across the screen, it would be nice to have the actual tweets appearing only when each bird is moused over. We’ll apply a little more panache to the way the tweets are displayed at the same time. Add the CSS below to hide the tweets until mouseover, and get them looking a bit more presentable. You will find the full code for this step on the cover disc.

#tweets li div {
display:  none;
padding:             10px;
background:    rgba(0,0,0,0.7);
color:                 #fff;
min-height:    93px;
margin-top:    100px;

20. Another quick test
If you test again now you should see the birds without all the tweets sitting on top of them, and as you move your mouse over the top of a bird it should stop in its tracks, and the tweet should then display underneath it. With these changes, we think the page is looking much slicker, plus it makes the Twitter stream much more fun to interact with!

21. Tweak to suit
When you test out your page you’ll almost certainly find that you want to modify some of the values – especially the random number generation and setInterval delay, as this will affect how quickly the birds fly across the screen. Try experimenting with a few different values to see the effect they have, and tweak values to taste.

22. Take it to the next level
Your overall visualisation should now be working nicely. Test in all your target browsers and check that everything works as it should. You might now want to consider extending the functionality so that the user can input their own search term, or so that some birds are bigger/faster than others – get creative and show us what you produce. You might end up in the Lightbox!

Create interactive animations from a Twitter feed

]]> http://www.webdesignermag.co.uk/tutorials/create-interactive-animations-from-a-twitter-feed/feed/ 0 Take control of your backgrounds with CSS3 http://www.webdesignermag.co.uk/blog/backgrounds-with-css3/ http://www.webdesignermag.co.uk/blog/backgrounds-with-css3/#comments Tue, 07 Feb 2012 17:02:16 +0000 Mark Billen http://www.webdesignermag.co.uk/?p=8308

Take control of your backgrounds with CSS3

Take control of your backgrounds with CSS3

CSS3 offers designers more flexibility with background images. Here we take a look at some of the key properties

Background images have played a key role in web design for as long as CSS has been popular, and support has been available. They are the aesthetic that creates the persona of a page. The big issue with background images is their lack of flexibility. They can repeat – perfect for textures, and they can be fixed to stay in place on screen but they cannot be resized. This means that developers who want a beautiful full-screen canvas, or simply more flexibility, have to improvise with absolute positioned tags, image sizes or code.
The background-size property, part of the CSS3 Backgrounds and Borders module, grants designers far more scope to be creative and with cleaner code. And, with support for multiple backgrounds by its side, this tasty duo is set to finally give web designers a chance to make the most of their backdrops.

This article was originally featured in Web Designer issue 190, authored by Steve Jenkins. There are no project files required for this tutorial.

01 Default value

Take control of your backgrounds with CSS3

The default value for the background-size property is auto. This displays the background image at its original size, eg 1,000 x 700px. The background-size property works in tandem with the background property so if the image is set to no-repeat only one instance will appear; on the other hand, if set to repeat it will do just that.

02 Specific size

Take control of your backgrounds with CSS3

An alternative to the auto option is a specific set of dimensions, eg 500 x 350px. The first value refers to the width of the image while the second refers to the height. Again, the repeat property helps to determine how the background appears.

03 Auto values
Background-size allows for the combination of specific sizes and the auto option. If the first value (width) is set to 500px and the second value to auto, the height will be automatically reduced proportionately to the width. This keeps the image’s original aspect ratio. If only the first value is added it is assumed that the second is auto.

001 #topsection{
002 background: url(images/image.jpg) no-repeat
003 background-size: 500px auto;
004 }

04 Auto width
Adding the auto value first changes the perspective of an image. The first value (width) will now be determined by the second value (the height). The height will become the static value and the height will be automatically reduced/increased proportionately to the width, again keeping the aspect ratio.

001 #topsection{
002 background: url(images/image.jpg) no-repeat
003 background-size: auto 500px; 
004 }

05 Percentages
To add more flexibility to the size of a background image the values can be added as percentages. Adding a percentage as the first value, eg 50%, determines that the width will be 50% of the screen or 50% of the containing div tag. The second value (height) will be set to auto and its size will be kept in proportion.

001 #topsection{
002 background: url(images/image.jpg) no-repeat
003 background-size: auto 500px;}

]]> http://www.webdesignermag.co.uk/blog/backgrounds-with-css3/feed/ 0 Build mobile apps with Sencha Touch http://www.webdesignermag.co.uk/tutorials/build-mobile-apps-with-sencha-touch/ http://www.webdesignermag.co.uk/tutorials/build-mobile-apps-with-sencha-touch/#comments Mon, 14 Nov 2011 17:17:09 +0000 Steve Jenkins http://www.webdesignermag.co.uk/?p=7788

Build mobile apps with Sencha Touch

Build mobile apps with Sencha Touch

Mobile frameworks highlight the ability to create native app-like experiences through standards- based web technologies such as HTML5, CSS3 and JavaScript. This tutorial concentrates on Sencha Touch, which is an open-source framework for creating mobile apps built using ‘Ext.js’ JavaScript.

Sencha Touch uses a HTML document that links to JavaScript and CSS, while the HTML contains an empty body tag with no content. Using JavaScript, the content is built on the page for the user so that the content can be built specifically for the screen size of the device. The good news is that you get some very polished results that scale to fit the browser of any device, which is key when designing for a variety of different devices. The downside of this is that Sencha Touch is a little harder than jQuery Mobile and you will probably spend far more time learning the framework, but the results are excellent for a very native app experience.

tools | tech | trends: Dreamweaver CS5, Sencha Touch, iOS Simulator
expert: Mark Shufflebottom
tutorial files: download here

01. Get the project started
From the cover CD, drag the ‘start’ folder onto your desktop. It’s a good idea to point your browser towards the Sencha Touch www.sencha.com/products/touch site and download the framework. In the start folder create a new HTML page, ‘index.html’, in Dreamweaver and add the code to the head section.

001 <link rel=”stylesheet” href=”resources/css/sencha-touch.css” type=”text/css”>
002 <link rel=”stylesheet” href=”bolt.css” type=”text/css”>
003 <script type=”text/javascript” src=”http://maps.google.com/maps/api/js?sensor=true”></script>
004 <script type=”text/javascript” src=”sencha-touch.js”></script>
005 <script type=”text/javascript” src=”bolt.js”></script>

02. Start the app
The previous code links up to the Sencha touch CSS, our own CSS ‘bolt.css’, the Google Maps api and the Sencha Touch JavaScript. We’re going to create our own App JavaScript, so create a new JavaScript file and name it ‘bolt.js’. Now add the code shown which associates start up screens and icons to the app if saved to the home screen in iOS.

001 Ext.setup({
002     tabletStartupScreen: ‘tablet_startup.png’,
003     phoneStartupScreen: ‘phone_startup.png’,
004     icon: ‘icon.png’,
005     glossOnIcon: false,
006     onReady: function() {
007     }
008 });

03. Basic structure
Inside the onReady function add the code shown. This sets up four pages, which are the four variables, home, work, blog and map. This is how Sencha creates pages. Some of these pages will change in their functionality as we go through the tutorial but this is useful in helping us to get the basics in place.

001 var home = {
002     title:’Home’, scroll: ‘vertical’, html: ‘home’
003 }
004 var work = {
005     title:’Work’, scroll: ‘vertical’, html: ‘work’
006 }
007 var blog = {
008    title:’Blog’, scroll: ‘vertical’, html: ‘blog’
009 }
010 var map = {
011 title:’Map’, scroll:vertical’, html: ‘map’
012 }

04. Create the menu
Add the next code under the last variable from the previous step. This creates a tab menu bar for us, and creates the transition between the ‘cards’ (pages). Notice the items added are the four variables from the previous steps. Save all pages now and test ‘index.html’ in the browser.

001 var myPanel = new Ext.TabPanel({
002     fullscreen:true,
003     cardSwitchAnimation: {type:
004     ‘slide’, duration: 500},
005     ui: ‘light’,
006     layout: ‘card’,
007     items: [home, work, blog, map],
008 });

05. Create the homepage
You might have noticed the ui being set as ‘light’, just try changing this to ‘dark’ and check your browser again. It’s always worth exploring the built-in user interfaces. Now go back to the home section and replace the html with the code shown. Notice the last line, ‘cls’ – this sets the
pages’ class, and you can check this out in ‘bolt.css’.

001  html: ‘<img src=”img/ logo.png” width=”280” height=”133” alt=”logo” class=”mainImg” />
002 <span class=”rounded”><h2 class=”welcome”>Welcome to Bolt</h2>
003 <p>We produce beautiful design and illustrations. Explore our work to find out how we can enhance your digital experience.</p>
004 </span>’,
005 cls:’home’

06. Change the work section
We’re going to completely replace the work section now with a Carousel component, so copy in the new code shown. The Carousel is a swipe-enabled system to swipe left or right to flick between pages, just perfect for showing off your work. Save the files and then test it out in your browser.

001  var work = new Ext.Carousel({
002     title: ‘Work’, scroll: ‘vertical’,
cls:’home’,
003     items:[
004 {title: ’Work1’, html:‘Work1’},
005 {title:’Work2’, html: ‘Work2’},
006 {title:’Work3’, html: ‘Work3’}
007     ]
008 });

07. Real content to the work
We’ll add real content to the work sections, so that we can see the content being swiped. Change the html of ‘Work1’, as shown. This will place in an
image and some text below that. Notice the class names here – they are again found in the ‘bolt.css’ file, which is worth keeping open to compare the classes with the final result.

001  html: ‘<img src=”img/3d.png” width=”260” height=”210” alt=”logo” class=”mainImg” />
002 <h2 class=”work”>Illustrations</h2>
003 <p class=”alt”>3D Illustration and visualisation. <br><small>Swipe left to explore more.</small></p>’

08. Further develop the carousel
The carousel looks much better, however there is only one section complete and the others still look empty. Replace the ‘Work2’ html with the following code that will add some content to the second panel. The main difference here is the image, and the text reflects that with the description.

001  html: ‘<img src=”img/web.png” width=”260” height=”210” alt=”logo” class=”mainImg” />
002 <h2 class=”work”>Web Design</h2>
003 <p class=”alt”>Bespoke Web CMS and Site Design  <br><small>Swipe to explore more. </small></p>’

09. Last carousel panel
Now we’ll add the final code for the ‘Work3’ panel in the carousel. Replace the html section with the code shown here. Once added, save your work and view the file in your browser. You should be able to swipe left and right now, to see different panels sliding in and out much more clearly with the content.

001 html: ‘<img src=”img/mob.png” width=”260” height=”210” alt=”logo” class=”mainImg” />
002 <h2 class=”work”>Mobile Experiences</h2>
003 <p class=”alt”>Mobile App and site design  <br><small>Swipe right to explore more. </small></p>’

10. Start the blog
We’re going to start the process of importing data from a blog, and we’ll do this through RSS and the YQL method. Move to the very top of the JavaScript document and add the following code. This sets up a new object that we’ll call later to draw in the data, this will be an object that can call any RSS source.

001  Ext.YQL = {
002     useAllPublicTables: true,
003     yqlUrl: ‘http://query.yahooapis.com/v1/
public/yql’,
004     request: function(cfg) {
005         var p = cfg.params || {};
006         p.q = cfg.query;
007         p.format = ‘json’;

11. Call with JSONP
The YQL request uses JSONP to get the data from the URL that will be passed in when called. Once the data has been received from this URL, the ‘callback’ function will be called. This function will parse the data and pass it into a template for the blog for each entry.

001  if (this.useAllPublicTables) {
002     p.env = ‘store://datatables.org/alltableswithkeys’;
003 }
004 Ext.util.JSONP.request({
005     url: this.yqlUrl,
006     callbackKey: ‘callback’,

12. Send back to function
Once the content has been pulled out of the YQL statement using JSONP, the content is sent back to the function that has called the query. We will set up the function that passes the URL for the feed in the next step. The closing brackets just finish off this section of the code as a separate function.

001 params: p,
002 callback: cfg.callback,
003 scope: cfg.scope || window
004 });
005 }
006 };

13. Call the RSS feed
Scroll down to the ‘var myPanel’ code. After the closing brackets, ‘});’ start adding the code shown. This is the variable that sets up the function to make the  YQL request, as indicated by the name of the function. Here the query is passed to the Ext.YQL.request we set up in step 10. Feel free to change the URL to your own RSS feed.

001 var makeYqlRequest = function() {
002 Ext.YQL.request({
003 query: “select * from rss where url=’http://www.webspaceinvader.com/feed/’ limit 5”,

14. Answer the call
The callback function is added next, straight after the previous code. The code we added in step 11 and 12, call this code. A variable is set up called results, which is an array. We use the if statement to check the query has been handled and if there are some results, we store them in the results array.

001 callback: function(response) {
002 var results = [];
003 if (response.query && response.query.results) {
004 results = response.query.results;
005 }

15. Pass it on
Add in the code, following the last steps code. Once we have the results stored in the results array, we call the blog variable and update it by passing over the results array. The closing brackets close off the function and then the function is called by using makeYqlRequest().

001 blog.update(results);
002 }
003 });
004 };
005 makeYqlRequest();

16. Update the blog
Find the ‘var blog’ code we added in step 3 and completely replace it with the code shown below. Notice the blog is now a component? This will enable us to create a template for each of the blog posts from the RSS. The ‘<tpl’ denotes a template and it creates a new heading for each of the posts.

001  var blog = new Ext.Component({
002     title:’Blog’,scroll:‘vertical’, cls:’home’, tpl:[
003     ‘<tpl if=”item”>’,
004     ‘<tpl for=”item”>’,
005      ‘<h2 class=”blog”><a href=”{link}” target=”_blank”>{title}</a>

17. Close the blog section
Add the following code directly under the last. This adds the author of the post in smaller text next to the post title. Under this, the description is dropped in. Again, this is repeated for each of the posts. The closing template tags complete this section. Save this file and preview in the browser after you refresh the view.

001 <small> by {creator}</small></h2>’,
002 ‘<p class=”alt”>{description}</p>’,
003 ‘</tpl>’,
004 ‘</tpl>’
005 ]
006 });

18. Add a geo position
If you’ve got a good memory, you’ll remember adding a JavaScript link file for Google Maps in step 1. Directly underneath the last code and before the map variable, add the following map variable, which adds a geo position to a new variable that we will add to the map when we display it on the map screen.

001 var position = new google.maps.LatLng (50.743213, -1.896901);

19. Replace the original map
Remove the entire map variable, as we are going to change it now to reflect a real map – what we had before was just a placeholder. As you can see from the code shown here, we set up a new map object and give it a title. An important property here is to not use the current location, however you might need this for your own apps.

001  var map = new Ext.Map({
002 title: ‘Map’,
003 useCurrentLocation: false,

20. Always have options
Continue adding the code to finish off the map section. This code centers the map on the position variable and sets the zoom factor of the map. Save your file now and refresh your view in the browser. You will now be able to click the map button, and it will display a map of our example location Bournemouth, UK.

001 mapOptions: {
002     center : position,
003     zoom: 12
004 }
005 });

21. Add a map marker
Under the ‘myPanel’ section, add the code shown. This sets up a new variable to hold the information for a marker. The position of this marker
is set to the position variable defined in step 18. We also have to tell the marker what to be added to – in this case, it’s the map found in the map variable. Yes, it’s confusing!

001 var marker = new google.maps.Marker({
002     position: position,
003     map: map.map
004 });

22. Add an info bubble
Add the final section of the code that adds a unique bubble when the map marker is pressed. The event listener adds the bubble to the marker. Finally, save the file and test it out in your browser. This should conclude your first introduction to Sencha Touch – you can view the Kitchen Sink demo to go even further and expand the complexity of the project.

001     var infowindow = new google.maps.InfoWindow({
002 content: ‘<img src=”img/bolt.png” width=”50”
003 height=”44” alt=”logo” align=”left” />Bolt
004 Design<br>Tel: 01202 123456’
005 })
006 google.maps.event.addListener(marker,
‘click’, function() {
007         infowindow.open(map, marker);
008 });

]]> http://www.webdesignermag.co.uk/tutorials/build-mobile-apps-with-sencha-touch/feed/ 2 Add a Facebook image gallery to your site http://www.webdesignermag.co.uk/tutorials/facebook-image-gallery/ http://www.webdesignermag.co.uk/tutorials/facebook-image-gallery/#comments Tue, 20 Sep 2011 10:58:50 +0000 Mark Billen http://www.webdesignermag.co.uk/?p=7208

Add a Facebook image gallery to your site

tools | tech | trends: Dreamweaver, PHP, Lightbox
expert: Pete Simmons

(This article originally appeared in Web Designer issue 183, authored by Pete Simmons (aka ‘Terrorfall’). You can download the associated CD project files by clicking here)

Following on from the Facebook news feed tutorial found in issue 181, we’ll be showing you how to use Facebook to drive a dynamic photo gallery. The gallery will update as you add photos through Facebook, and will display image comments.
If you missed the previous tutorial, we’ll start from the beginning, showing you how to get your Facebook ID and get the page set up correctly. As before, you won’t need to authenticate a website visitor, as all data retrieved is publicly accessible. However, it is worth noting that you may need to authenticate if you are pulling data from a personal page, rather than a fan page.
This tutorial assumes that you have a PHP environment set up that is capable of reading JSON objects. JSON functionality comes pre-packaged 
with PHP version 5.2.0 and higher, but if you find that you are getting “Fatal error: Call to undefined function json_decode()”, see the following forum post: http://bit.ly/noJSON. It may also be worth switching hosting provider, or downloading and installing the latest version of XAMPP from http://bit.ly/getXAMPP.
This tutorial will not cover adding CSS or any images, but the project contain a basic template.

01 Facebook page setup

Add a Facebook image gallery to your site

It is important to ensure your Facebook page is set up correctly, so that your website can view the data. Go to your page on Facebook, select Edit Page and ensure that there are no age or country restrictions listed under the Manage Permissions tab. Also, ensure the ‘Only admins can see this Page’ box is unchecked.

Add a Facebook image gallery to your site

02 Your page ID
If you’ve set up a brand new Facebook page, you won’t be able to shorten the URL yet and you will need to use the ID of your page. The easiest way to get hold of this is to click on your page’s profile picture and make a note of the numbers listed after “&id=” in your address bar.

03 View page data

Add a Facebook image gallery to your site

Go to https://graph.facebook.com/terrorfall/albums and you’ll see a JSON-encoded list of all photo albums on the terrorfall Facebook page. These are arranged from newest to oldest by default and show links to individual albums, as well as album comments. Replace “terrorfall” with your own page name or page ID to see your own.

04 Page character setup
Open the template file or create a new PHP document in Dreamweaver. This is required to prevent character errors as we progress through the tutorial. By default Dreamweaver will add this in, but ensure you have the following line of code in the head section of your PHP page.

001 <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”/>

05 Import Facebook data
Drop down to the body section of your PHP document and open up a new section of PHP code.
The following lines of code set out the page that you want to get the data from. Add this in, along with some tidy comments, replacing ‘terrorfall’ with your page name or ID.

001 <?php
002 //Set the page name or ID
003 $FBid = ‘terrorfall’;
004 //Get the contents of a Facebook page
005 $FBpage = file_get_contents(‘https://graph.facebook.com/’.$FBid.’/albums’);
006 //Interpret data with JSON
007 $photoData= json_decode($FBpage);
008 ?> 

]]> http://www.webdesignermag.co.uk/tutorials/facebook-image-gallery/feed/ 9 Cross-browser fonts and CSS styling rules http://www.webdesignermag.co.uk/tutorials/cross-browser-fonts-and-css-styling-rules/ http://www.webdesignermag.co.uk/tutorials/cross-browser-fonts-and-css-styling-rules/#comments Tue, 20 Sep 2011 10:58:20 +0000 Steve Jenkins http://www.webdesignermag.co.uk/?p=7206

Cross-browser fonts and CSS styling rules

Ever since the web started, designers have desired to bring the beauty of their favourite fonts into their designs. Unfortunately, we’ve been limited and just been able to use a handful of ‘web-safe’ fonts (fonts that most computers will have installed) for the dynamic text in our designs, leaving using images or flash movies of non web-safe fonts (our precious, expensive and beautiful bought fonts) as our only resource for bringing them alive on the web.
Our desire was so strong that tools were created to bring these fonts into our tool belt – sIFR, Cufón, Flir and a few more – all with pros and cons, but none was really giving us the flexibility we needed. Today, with the strength and support CSS3 is getting, especially from browser developers, we can now make use of one of its greatest features: @font-face. This nifty tool gives us the power to embed any font we want into a website as native text (rather than an image or an object). Of course, it comes with a few limitations, but nothing that can’t be easily learnt and mastered in order to get all major browsers to display it exactly the way you want it.

tools | tech | trends: HTML5, CSS3, Dreamweaver CS5 / Espresso
expert: Enrique Ramírez
tutorial files & code: Download here

01. The markup
On your text editor, create a new file. Add an HTML5 doctype, an empty <style> tag in the header and a few paragraphs on the body, each with an h1 to h6 header. Add a blockquote for good measure. You’ll be adding different styles to each of these elements,
so keep them well separated for better comparison.

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Web Fonts Styling</title>
<meta charset=”utf-8” />
<meta http-equiv=”X-UA-Compatible”     content=”IE=edge,chrome=1” />
<style type=”text/css”>
</style>
</head>
<body>
<h1>Quick Brown Fox jumps over…</h1>
<p>Lorem ipsum dolor sit amet,         consectetur adipiscing elit. </p>
</body>
</html>

02. The basic styling
Go to your <style> tag in the header, and give the basic page a prettier look. Add a background and font colour. Give some basic styling to the heading tags as well: a colour and a margin will be enough for now. You don’t need much, just some initial styling to make things easier and more inspiring to start working with.

body { background: #423C4D;
color: #C4C1C8;
margin: 0 auto;
padding: 100px 0;
width: 660px; }

h1, h2, h3, h4, h5, h6 {
color: #fff;
margin: 24px auto 12px; }

03. Body font
Next comes what’s probably the most important step on any website you’ll ever code: defining the global (default) font for the website. Define its line height, which is the space between lines of text, its font size and its font family. Helvetica Neue is an excellent specimen for our next experiments. You can go funky and add some text shadow to improve readability.

body {
background: #423C4D;
color: #C4C1C8;
font-family: ‘Helvetica Neue’, Arial,  Helvetica, sans-serif;
font-size: 12px;
line-height: 1.6;
margin: 0 auto;
padding: 100px 0;
text-shadow: 1px 1px rgba(0,0,0,.8);
width: 660px; }

h1, h2, h3, h4, h5, h6 {
color: #fff;
line-height: 1.2;
margin: 24px auto 12px;
text-shadow: none; }

04. Custom fonts
To integrate a custom font on your website, all you need is the source file. However, different browsers support different formats, so normally you’ll want to convert your ‘.ttf’ file to all of them for a real cross-browser experience. A great tool for this can be found at http://fontsquirrel.com/fontface/generator. IMPORTANT: Make sure the font’s licence allows for @font-face embedding.

05. @font-face
You may use a tool (like Font Squirrel’s) to generate the code, but it’s wise to understand it first. Using @font-face is simple: for each font you begin defining its name with the ‘font-family’ property, and then point out the font location within ‘src’. Note that ‘.eot’ file (for IE) must be in a different line.

@font-face {

font-family: ‘CaviarDreamsRegular’;

src: url(‘fonts/CaviarDreams-webfont.eot’);

src: url(‘fonts/CaviarDreams-webfont.eot?#iefix’) format(‘embedded-opentype’),

url(‘fonts/CaviarDreams-webfont.woff’) format(‘woff’),

url(‘fonts/CaviarDreams-webfont.ttf’) format(‘truetype’),

url(‘fonts/CaviarDreams-webfont.svg#CaviarDreamsRegular’) format(‘svg’);

}

06. Using @font-face fonts
Now that you’ve defined your fonts, you can start using them with the ‘font-family’ CSS property. Just add the name you defined in the previous step to any selector. You can now adjust its size, line height, colour or any other style you want. It’s as styleable as any Arial text!

h1 {

font-size: 42px;

font-family: CaviarDreamsRegular, ‘Helvetica Neue’, Arial, Helvetica, sans-serif;

font-weight: 100;

text-align: center;

width: 500px;

}

07. Font-weight fun
Something that goes unnoticed most of the time is that ‘font-weight’ serves for more than ‘bold’ and ‘normal’. You can set any multiple of 100 from 100 to 900, where 400 is the same as normal, and 700 is bold. For example, using Helvetica Neue with font-weight 100, we get a beautiful Ultra Light version.

h2 {font-size: 36px; font-weight: 100; letter-spacing: .1em;}

08. Text-shadow
CSS3 has a very versatile module called ‘text-shadow’. Its syntax is simple: first comes the x position, then the y position, then the feathering of the shadow, and lastly the colour. Text-shadow can be really useful to increase readability of a chunk of text, by having it offset. You can also create some nice effects with it.

h3 {

font-size: 38px;

text-shadow: 5px 5px black;

position: relative;

}

09. Handwritten notes
One of the advantages of @font-face is that you can add a lot more personality to blocks of content within your design. A handwritten note, for example. You can use a handwritten font for the box, a notepad background and assign a line-height so the text fits in the grid. The effect is very unique.

blockquote {

background: #918F94 url(‘bg-notepad.jpg’) left 10px;

color: #333;

float: right;

font-family: DesyrelRegular;

font-size: 18px;

line-height: 23px;

margin: 0 -24px 1em 1em;

padding: 10px 15px;

text-shadow: -1px -1px rgba(0,0,0,.15);

width: 300px;

-webkit-box-shadow: 2px 2px white;

-moz-box-shadow: 3px 3px 3px rgba(0,0,0,.35);}

blockquote p {margin: 0;}

blockquote p:first-of-type {text-indent: 0;}

10. Text-transform
For the times where your content will be user-submitted and you want to keep it in a certain format, text-transform can be of tremendous help. You can transform text to lowercase, uppercase or capitalise it. This can be very useful for some handwritten fonts where you want proper capitalisation, since uppercase characters are highly adorned.

h4 {

font-family: CaviarDreamsRegular, ‘Helvetica Neue’, Arial, Helvetica, sans-serif;

font-size: 36px;

font-weight: normal;

text-transform: lowercase;}

h4 strong {text-transform: uppercase;}

11. Letter-spacing
Another powerful tool for styling your text, CSS’s letter spacing will add or remove space between characters. You can use any unit you may like, but ems are recommended to keep the aspect ratio between font sizes. Big fonts tend to look better with bigger letter spacing. Apply this to your h4 to see a good example.

h4 {letter-spacing: .5em;}

12. Font-stretch
Some fonts have a condensed and/or expanded style within, which often results in a very different-looking font. This can be very handy and save space and bandwidth when using @font-face. Fortunately, there’s an easy way to use these styles. Setting the element’s font-stretch to condensed will give us a more impact-like font that’s very suitable for headers.

h5 {

font-size: 30px;

font-stretch: condensed;}

13. Text-shadow revisited
You can have some more fun with the text-shadow property. You can stack more than one text shadow, making it possible to add a glow to your text to increase contrast, all while adding some double text to the background. Or you could even stack coloured glows!

h6 {

font-size: 48px;

font-stretch: condensed;

padding: 10px;

text-align: center;

text-shadow: 3px 3px 8px #BD9E59,

-3px -3px 8px #BD4B3B,

-3px 3px 8px #7EBD56,

3px -3px 8px #964BBD,

-3px -3px rgba(255,255,255,.3);

}

14. Add gradients
You can give your text a bit of texture by filling it with a gradient above it. First, relative-position your element. Then create an :after pseudo class on your element, use an empty content declaration, absolute-position it above your text with roughly the same height and apply a gradient background to it (it can be an image as well).

h6 {position: relative;}

h6:after {

content: “”;

display: block;

height: 52px;

left: 0;

position: absolute;

top: 15px;

width: 100%;

background: -moz-linear-gradient(top, rgba(66,60,77,.8) 0%, rgba(66,60,77,0) 90%);

background: -webkit-linear-gradient(top, rgba(66,60,77,.8) 0%,rgba(66,60,77,0) 100%);

background: linear-gradient(top, rgba(66,60,77,.8) 0%,rgba(66,60,77,0) 100%);}

15. Transformations
You can rotate your text to any degree using the transform CSS property. Adding a 15 degree rotation can be a great way to have styled text positioned in, say, a badge on a product to grab attention. The transform property also has a scale option, which can make your text twice its size without changing its font-size.

h6 {

-webkit-transform: rotate(-5deg) scale(1.5);

-moz-transform: rotate(-5deg) scale(1.5);

transform: rotate(-5deg) scale(1.5);}

16. Text-stroke
Webkit brings you another nifty feature, which lets you add a stroke to your text. The property name is ‘webkit-text-stroke’ and its syntax is similar to border’s, but without the ‘border-style’. Note that so far this will only work on webkit browsers, so it’s advised to use -webkit-text-fill-color to compensate for any accessibility issues.

h6 {

color: #fff;

-webkit-text-stroke: 1px #333;

-webkit-text-fill-color: #423C4D;}

17. Hover effects
For places where mouse interactivity is a must, you can combine any of the styles mentioned and apply them to a :hover element. Paired with an :after and a few animations, you can grab the user’s attention fast and effectively. Animations on text elements go smoother than on graphics, so it’d be wise to use that advantage.

.fin {

color: #fff;

font-family: TangerineRegular, ‘Helvetica Neue’, Arial, Helvetica, sans-serif;

font-style: italic;

font-size: 120px;

margin: 0;

position: relative;

text-align: center;

text-shadow: 3px 3px black;

-webkit-transition: all 1s ease-in-out;

-moz-transition: all 1s ease-in-out;

-o-transition: all 1s ease-in-out;

}

.fin:hover {

-webkit-transform: rotate(-5deg) scale(1.5);

-moz-transform: rotate(-5deg) scale(1.5);

transform: rotate(-5deg) scale(1.5);

}

.fin:hover:after {

content: “Fin”;

display: block;

height: 52px;

left: 0;

position: absolute;

top: 0;

width: 100%;

text-shadow: 3px 3px 8px #BD9E59,

-3px -3px 8px #BD4B3B,

-3px 3px 8px #7EBD56,

3px -3px 8px #964BBD,

-3px -3px rgba(255,255,255,.3);}

18. Bottom line
You’ve now got a very good understanding and knowledge to achieve rich texts in your designs. However, beware not to fall into bad practices. Abusing or overusing these new possibilities can prove detrimental to your designs. The general rule of thumb to follow with text is: if it doesn’t aid impact or legibility, it’s better off gone.

]]> http://www.webdesignermag.co.uk/tutorials/cross-browser-fonts-and-css-styling-rules/feed/ 3 Create a basic HTML5 page with the new layout tags http://www.webdesignermag.co.uk/tutorials/create-a-basic-html5-page/ http://www.webdesignermag.co.uk/tutorials/create-a-basic-html5-page/#comments Mon, 25 Jul 2011 13:16:02 +0000 Mark Billen http://www.webdesignermag.co.uk/?p=6945

Create a basic HTML5 page with the new layout tags

Create a basic HTML5 page with the new layout tags

How to build a simple and semantic one-page template with HTML5

tools | tech | trends: Photoshop, Adobe Dreamweaver, HTML5
expert: Neil Pearce

This article originally appeared in Web Designer issue 181, you can download the cover CD tutorial files by clicking here

In this tutorial, we’re going to build a one-page template using some of the next-generation techniques from HTML5. Everyone’s talking about HTML5, it’s perhaps the most-hyped technology since people started putting rounded corners on everything. Apparently though, HTML5 won’t be completely supported until 2022, but this is a misconception based on the projected date that HTML5 will reach the stage in the W3C process known as Candidate Recommendation (REC).All this means is that the spec won’t be completely finished until you can use all of it, and in at least two browsers. But don’t let that stop you from using the new tags now – after all, this industry moves so damn fast that it’s nice to be able to stay ahead for once!
HTML5 introduces a bunch of new elements that will make our pages more semantic, cleaner and faster. It also includes fancy APIs for drawing graphics on screen, storing data offline, playing video and a lot more. The web industry is buzzing right now with the introduction of both HTML5 and CSS3, and if you couple that with jQuery (or any other JavaScript library), then you have some very powerful, sought-after skills all ready to take the industry by the scruff of the neck! So open up the supplied PSD design (on the CD) and let’s get cracking…

01 Set things up
Before we jump into Photoshop, it’s always a good idea to create the basic markup first. Open up a new file in Dreamweaver (or your chosen editor), and name it ‘index.html’ and add the new and very simple doctype and head section. It isn’t even necessary for HTML5, but it’s used for current and older browsers that require a specified doctype. Browsers that do not understand this doctype will render the markup in Standards mode.

001 <!DOCTYPE html>
002 <html>
003 <head>
004 <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8”>
005 <!–[if lt IE 9]>
006 <script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
007 <![endif]–>
008 <link rel=”stylesheet” href=”styles.css”>
009 <title>Web designer</title>
010 </head>

02 Inside the head
As you can see, the new doctype is much cleaner than what you would have if you were writing HTML4 or XHTML. You will also notice the link to the style sheet is missing its type attribute. This is no longer necessary, as it’s implied that this link refers to style sheets. This is also true for any links to scripts that you may use.

001 <link rel=”stylesheet” href=”styles.css”>
002 <script src=”js/scripts.js”></script>

03 HTML5 shiv
In IE, excluding the newest version (IE9), you cannot apply styles to elements that the browser does not recognise and our new HTML5 elements, in all their glory, are not recognised to CSS rules. This is where Remy Sharp’s html5shiv comes to the rescue.
Simply include the link in your page’s <head> section and you will be able to style the new HTML5 elements without fear.

001 <!–[if lt IE 9]> 
002 <script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
003 <![endif]–>

]]> http://www.webdesignermag.co.uk/tutorials/create-a-basic-html5-page/feed/ 11 Create 3D transform effects with CSS and HTML http://www.webdesignermag.co.uk/tutorials/3d-transforms-with-css/ http://www.webdesignermag.co.uk/tutorials/3d-transforms-with-css/#comments Mon, 11 Jul 2011 11:35:37 +0000 Mark Billen http://www.webdesignermag.co.uk/?p=6882

Create 3D transform effects with CSS and HTML

Create 3D transform effects with CSS and HTML

tools | tech | trends: A web editor, a WebKit-based browser, HTML, CSS3
expert: Sam Hampton-Smith
(This article originally appeared in Web Designer issue 179)

You can download the projects files by clicking here

Web designers have all these lovely new HTML5 tags to work with, and a whole raft of additional CSS properties to play with. The result is, or will be, a shift forward in what is possible using standard semantic and accessible markup. The limitations we’ve learnt to overcome are being swept away in a rush of exciting new possibilities
One such innovation is the idea of CSS-based transformations, transitions and animations. The premise is simple – we assign and the browser interpolates between the existing state and the new state in response to an event. So, for example, when you rollover a button a transition might change the colour of the button from red to blue, but instead of flicking between the two, the browser will shift through purple to get there. There’s a stage beyond in the draft CSS3 specification, and it’s operational inside some browsers including Safari: 3D transformations. Here we’re going to create a 3D cube to hold our page content. Each face will contain information, and we’ll add buttons to move between them. The browser will handle the cube’s rotation, leaving us with an effect entirely rendered in HTML and CSS! The full code for the steps can be found in the project files.

01 Open the start document

Create 3D transform effects with CSS and HTML

We’ve created a standard page which you’ll find in the project files. In our page, named start.html, we’ve got a container <div>, a “viewport” <div> and three “faces”. We’ve already added some basic styles to our three faces to make each distinct. Note that each of our divs flows one after the other.

001 <div id=”container”>
002     <div id=”cube”>
003         <div class=”face” id=”face1”>…</div>
004         <div class=”face” id=”face2”>…<div>
005         <div>
006 <div>

02 Set up the viewport
Almost all the work you’ll do will be in the style sheet, so open up screen.css (found in the styles folder). If you’re going to use 3D transitions in WebKit you should define your viewpoint on the scene. We’ll used our container div as the viewport, so find the existing CSS for #container and add the code to set up the perspective and perspective origin.

001 #container {
002     position:    relative;
003    width:        500px;
004     margin:        0;

]]> http://www.webdesignermag.co.uk/tutorials/3d-transforms-with-css/feed/ 3 Enhanced typography with CSS3 & JavaScript http://www.webdesignermag.co.uk/tutorials/enhanced-typography-with-css3-javascript/ http://www.webdesignermag.co.uk/tutorials/enhanced-typography-with-css3-javascript/#comments Mon, 11 Jul 2011 10:58:23 +0000 Mark Billen http://www.webdesignermag.co.uk/?p=6870

Enhanced typography with CSS3 & JavaScript

tools | tech | trends: Web editor, jQuery and lettering.js plug-in, Google Fonts
expert: Sam Hampton-Smith
(This article first appeared in Web Designer issue 180)

Download the project files by clicking here

Enhanced typography with CSS3 & JavaScript

For a medium that was created with text in mind, the web has long suffered from an unnecessary restriction in the fonts available for use. This has led designers, keen to avoid bland look-a-like site designs, to seek workarounds involving images and text replacement tricks. While this has allowed for some really creative solutions and happy accidents, we are finally at a point where we can start to use a richer set of fonts to help communicate our messages.
In this tutorial we look at one method for presenting a passage of text in a visually exciting manner, taking advantage of just two fonts (both outside the traditional web-safe font set) and examine how we can reduce the amount of markup required to create customised typography. We’ll achieve our layout by splitting paragraphs into lines, then using a jQuery plug-in to automatically wrap <span> tags around our text.
Along the way we’ll look at what we can do to maximise visual impact, draw attention to particular key words, and create a coherent typographical poster. We’ll also look at a little bit of jQuery, and finally we’ll take advantage of WebKit transitions to add script-free interactivity to our page. The larger portions of code used here are included in full in the project files.

01 Starting off

Enhanced typography with CSS3 & JavaScript

Open up the start.html file from the CD. We’ve supplied the initial HTML code, and a simple script tag ready for you to insert a few lines of jQuery later on. The first thing you need to do is establish the visual approach you’re going to use. For this tutorial we’ve decided to opt for a typographical poster approach, so no graphics at all – everything will be rendered in HTML and CSS only.

02 Take inspiration
Have a quick browse around the web to see what excites you visually. We found a couple of great looking sites while browsing the lettering js plug-in site (which we’ll use later on). The end result is that we’ve decided to go for a 760px wide design with a graphpaper background. Add the CSS below into a new CSS file, and link to it from the head section of your page.

001 <link rel=”stylesheet” type=”text/css” href=”styles/screen.css” />
002 –
003 body {
004 background:    url(pagebg.gif) repeat top left;
005 color:    #333;
006 }

03 Hide everything

Enhanced typography with CSS3 & JavaScript

As you’re going to be working on each section, it makes sense to hide the content you haven’t styled, so comment out everything after the <h1> tag. With the rest of the content hidden, it’s easy to see how the text fits together. Start by choosing a nice font to act as the title font for your page. Have a look on Google Fonts (http://code.google.com/webfonts). We’ve chosen Lobster, so add the recommended code at the top of your page, before your CSS file:

001 <link rel=”stylesheet” type=”text/
css” href=”http://fonts.googleapis.com/
css?family=Lobster” />

]]> http://www.webdesignermag.co.uk/tutorials/enhanced-typography-with-css3-javascript/feed/ 3 Create content for the HTML5 canvas tag http://www.webdesignermag.co.uk/tutorials/html5-canvas-tag/ http://www.webdesignermag.co.uk/tutorials/html5-canvas-tag/#comments Tue, 14 Jun 2011 15:41:36 +0000 Mark Billen http://www.webdesignermag.co.uk/?p=6738

Put your graphics straight into canvas in HTML5 with Illustrator

Create content for the HTML5 canvas tag

Following the jaw-dropping demonstration of Adobe Edge Prototype, a Flash style environment for creating interactive canvas content at the Adobe MAX conference (2010), you’ve probably been itching to get your hands on it. Until this is released as beta we’re all stuck with hand coding… well, maybe not. Illustrator has had some plug-ins written for it from Adobe and third parties that give some amazing functionality right now, allowing you to create interactive animations for the canvas tag.
In this tutorial we are going to download and install one of the plug-ins that allows us very simply to set up animation and interactivity in canvas. One of the issues of exporting to canvas is that all the information is stored in the drawing commands, made up of moveTo, lineTo etc. When it comes to moving content this becomes slow as the processor has to continually draw all of this each frame. So for complex shapes, we are going to export those as PNG images, to make the animation smoother. While on the subject of animation, it’s reasonably smooth in WebKit browsers like Chrome and Safari, but very stuttery in Firefox, so as yet it’s not going to see off Flash for some time!

tools|tech|trends: Illustrator CS5, Dreamweaver, HTML5
This tutorial originally appeared in Web Designer issue 179 (13/01/11), authored by Mark Shufflebottom. You can download the project files by clicking here

1) Get a copy of AI > Canvas

Create content for the HTML5 canvas tag

Open the page http://visitmix.com/labs/ai2canvas/ in your web browser and download the plug-in for your operating system. When the ZIP file has downloaded and extracted, you will have an Illustrator plug-in file. Open the Illustrator application folder on your server and drop the plug-in into the plug-ins folder.

2) Start Illustrator

Create content for the HTML5 canvas tag

Open Illustrator and create a new document, choose ‘web’ for the profile and change the pixel settings to 1024 x 768. Click OK. From the disc open the file ‘logo.ai’ from the ‘start’ folder. Select all and copy the image. Close the logo and paste the logo in your new document.

3) Export to canvas

Create content for the HTML5 canvas tag

Add some text as shown in the screenshot above to complete the logo. Once you’ve done that go to File>Save, saving the file as ‘canvas.ai’. Now choose File>Export and export as ‘<canvas>, (html)’ in the same place as you saved your file. The exported file will open in your web browser, take a look at the source code.

]]> http://www.webdesignermag.co.uk/tutorials/html5-canvas-tag/feed/ 0 Build a Twitter app with jQuery Mobile http://www.webdesignermag.co.uk/blog/build-a-twitter-app-with-jquery-mobile/ http://www.webdesignermag.co.uk/blog/build-a-twitter-app-with-jquery-mobile/#comments Wed, 04 May 2011 16:54:01 +0000 Mark Billen http://www.webdesignermag.co.uk/?p=6602 Build a Twitter app with jQuery Mobile

Create and code a Twitter feed app with the talented team at Studio Mohu

tools | tech | trends jQuery Mobile, HTML5, PHP
expert Ben Smith / Studio Mohu (www.studiomohu.com)
This article originally appeared in issue 179, you can download the project files here

jQuery needs little introduction, the JavaScript framework has dominated the world of front-end development for creating rich internet applications over the last four years. jQuery Mobile, now in alpha development, looks set to do the same for the rapidly emerging mobile market by building on top of jQuery’s solid foundations. In this tutorial we’ll dive right in and make a simple application pulling several Twitter feeds from topical websites that might be useful to a fledgeling web designer. jQuery Mobile comes with a bunch of interface themes and interactions which will allow us to rapidly deploy our app without getting bogged down in code.
jQuery Mobile does use progressive enhancement to ensure your app will work across a broad range of mobile devices. That said, for this tutorial we’ll be focusing on developing for the iPhone. We’ll be using HTML5, CSS and a sprinkling of PHP for grabbing and outputting the Twitter feeds. It’s useful to have a local development environment set up to view the results of the PHP files, but otherwise you can upload to your web hosting. It’s worth noting at this stage that jQuery Mobile is in alpha release so it might not be suitable for all project environments. Also, the full code for all the steps here can be found on the cover disc.

1) Set up index.php
Let’s dive right in and create an index.php file with the super-simple HTML5 doctype. For best practice declare your encoding as UTF-8 in the head and give your page a title of “Web Designer Feed”.

001 <!DOCTYPE html> 
002 <html>
003    <head>
004       <meta charset=”UTF-8”>

2) Get jQuery
All it takes to add jQuery Mobile to your page is to create three links in your head to the jQuery Mobile CSS file and two JavaScript files. Grab the latest versions of jQuery and jQuery Mobile (as of writing these are jquery-1.4.3 and jquery.mobile-1.0a2 respectively). Luckily you don’t actually need to download these as jQuery provides hosted versions on its content delivery network.

001 <link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css” />
002 <script src=”http://code.jquery.com/jquery-1.4.3.min.js”></script>

3) Define page structure
jQuery Mobile responds to various data-role tags in your code to activate default framework behaviours. Define your page by creating a <div> tag inside the body tag with an attribute of data-role=”page”. You can create three more containers for your header, content and footer with their respective data-role attributes.

001 <div data-role=”page”>
002    <header data-role=”header”>
003    </header>

4) Add list content
Populate your page with some content. Add an h1 tag with your application name inside the header tags. In your content area create an unordered list with a data-role attribute of “listview”. Add some list-items of Twitter feeds with titles in h3 tags and a short description of the feed in paragraph tags.

001 <header data-role=”header”>
002    <h1>Web Designer Feed</h1>
003 </header>

]]> http://www.webdesignermag.co.uk/blog/build-a-twitter-app-with-jquery-mobile/feed/ 3