Microsoft Surface 2.0 Interactive Coffee Table

fred
0
13th December

Samsung and Microsoft have been working together to deliver the new Microsoft’s Surface 2.0 SUR40. The Next-Gen touch surface computer will start manufacturing in December of this year and is expected to be shipping early 2012. The SUR40 weighs 40kg, is 10cm thick, has a 1080p 40 inch screen (102cm), 2.9Ghz AMD, Athlon II X2 processor and a Radeon HD 6700 graphics card.

Sourced from: http://www.microsoft.com/surface/en/us/purchaseprocess.aspx



Before you dismiss the Surface 2.0 as television with legs or a super sized iPad, look again because it is actually capable of a lot more. The Surface 2.0 uses an exciting technology called PixelSense which allows the LCD display to recognise different objects placed on the screen. Pixels in the display see what’s touching the screen and recognise it. Whether it be a glass, your fingers , hands, phones or credit cards the computer can recognise what has been placed on its screen and respond with context sensitive information. In addition to this, the screen has more than 50 simultaneous touch points allowing several actions to be performed at once. What does all this mean?

As an example lets imagine you are sitting at a Surface 2.0 in an airport bar. You could choose to access online flight information using the Surface 2.0, search for music, movies or literature and transfer it to your smart phone by simply placing it on the work surface. Simultaneously you may be viewing the drinks menu and ordering via the Surface 2.0. For the clumsy and people that may have consumed one too many beverages waiting for their flight, the Microsoft Surface 2.0 is reinforced with Gorilla glass allowing it to withstand the impact of a beer bottle dropped from a height of nearly half a metre.

With a price tag of $8400 in the United States, Microsoft’s target market for the Surface 2.0 is big business. In the coming years you may see these units in hotel lobbies, at visitor centres, in hospitals, car dealerships and a multitude of other service orientated industries. Microsoft already has some big launch partners developing software for the new console. Some of these include Red Bull, Bing, Hard Rock Cafe, Disney and the RBC Bank. Perhaps shortly we will see it in your home!

The hidden controls of the iPhone

fred
0
9th December

Apple iPhones Iphone secretare considered so intuitive and simple to use that they do not even come with hard copy instructions. Virtually anyone can pick up an iPhone and fumble their way through the basic functions. But what about the more complex operations? I know owners of iPhones that testify it took several weeks to discover that rotating the screen can alter the view. This article is designed to highlight some of the other hidden functionalities of the iPhone that you may not have discovered.

Home screen organisation

1. Re arranging apps

You can customise the layout of app icons on the home screens by holding any icon until they all jiggle. Then simply drag the apps to their desired locations. Icons can be moved from various home-screens by dragging the app to the side of the screen. Press the home button to save.

2. Creating new home-screens

To create additional home screens flick across to the rightmost home-screen then drag an icon to the right edge of screen. Press the home button to save.

3. Creating new folders

Reducing clutter on your homescreens can be achieved by creating folders to store all of your various apps. To create a folder hold an app until they all jiggle, next drag and drop an app on top of another to create a folder storing the two apps you have selected.

4. Closing background applications.

If you do not know about this feature, chances are that you have lots of background apps running on your phone potentially slowing down its processing speed. To close the background apps firstly double tap the home button. At the bottom of the screen you will see will see a list of all the apps that are open. This is called the multitask view. To close them press and hold an icon until a red minus signs appear on the application icons. Simply press on the applications that you no longer need open.

Emailing and messaging

5. Sharing contacts

To share a contact with another person open your contacts list, click on a contact and press the share contact button at the bottom of the screen.

6. Deleting messages and Emails

To delete Emails push across to the right on an Email link, a red delete icon should appear on the right hand side. Push this to delete the message. This same method can be used to delete entire SMS conversations. To delete individual SMSes click edit whilst in the conversation viewer, select the messages you wish to be deleted and press the delete icon.

7. Typing alternate characters

Whilst typing to enter an alternate character hold down a key and wait for a list of options, slide to the desired replacement character and release.

Sourced from: http://support.apple.com/kb/HT4896


8. Capitalising individual letters

There are two ways of capitalising individual letters. The least efficient is to press the shift key and then press the letter you wish to be capitalised. Alternatively you can press and hold the shift key, dragging it to the letter you want to capitalise. The same method can be used with the keyboard switcher key (123/ABC). Doing this will revert you straight back to the alphabet keyboard immediately after inserting punctuation.

9. Caps-lock

In order to be able to access caps-lock we first need to turn it on in the settings. Open settings from your home screen, tap General, Keyboard and turn on the enable caps lock button. To use caps-lock when typing double tap the shift key, this will turn caps-lock on. To turn it off again, simply tap the shift key once.

Web Pages

10. Saving images from the Web

In Safari, touch and hold an image to bring up a menu. You can choose to save it to your camera roll or copy and paste it into an Email or MMS.

11. Immediately return to the top of a webpage

To return immediately to the top of webpages tap the status bar at the top of the screen.

12. Scrolling inside frames and text

In some Webpages you may have the opportunity to scroll within a frame or text area on a webpage. To do this use two fingers and scroll with the same action you do for navigating normal webpages.

13. Zooming in

Whilst in Safari you can double tap parts of the page you wish to zoom in on, double tapping again to zoom out. Alternatively you can pinch to zoom in or out manually.

Miscellaneous

14. Accessing music controls and volume from the multitask view

Open the multitask view by double tapping the home button. Swipe to the left to enter the music controls. A further swipe to the right lets you adjust the volume.

15. Portrait lock

To access portrait lock open the multitask view and swipe across to the left. Click on the icon on left hand side of the multitask bar to lock the portrait. This will stop your iPhone from changing views when you are tilting the phone.

16. Taking a screenshot

Press the Home and Sleep buttons simultaneously to take a screenshot. You should hear a camera shutter noise letting you know your current screen has been saved automatically into your camera roll.

17. Voice control

Press and hold the Home button until the Voice Control screen appears.

18. Scientific calculator

Open the Calculator application and rotate the screen horizontally to access the scientific calculator

Future of Nokia mobiles is mind/phone bending

fred
0
7th December

Nokia has unveiled a physical prototype of a bendy and flexible phone at this year’s Nokia World Show event staged in London.

Instead of only using a touchscreen or keypad like the phones of today the Nokia Kinetic also has the added functionality of bending, twisting or squeezing it to perform specific tasks. To answer the phone the user squeezes the phone, to scroll through files, twist the handset forward. The harder the  twist the faster the scroll. To open files bend the handset inwards and to go back to a previous file or menu simply bend the handset outwards. These same movements can control a myriad of other functions including zooming in on images and for volume control.

If Nokia does ever release a commercial version of the Kinetic it is not expected for at least another three years according to a Nokia spokesman from the World Show event.

Looking even further into the future Nokia has also released a new concept video entitled the Nokia Humanform. Shaped like a teardrop or a miniature surfboard, this phone looks very futuristic in the same way as a concept cars does.

The Humanform incorporates Wiiremote like gestures as well as bending and twisting to control the handset. Perhaps some of the coolest features are the electro-tactile feedback which lets you feel images and the mood recognition software which can change the lighting backdrop on the interface when using video calls to represent emotion.

Whether we ever see any of the new concepts in the Nokia Humanform come to us any time soon is another question all together. But if I were to tell you about the capabilities of today’s Smart phones ten years ago, would you have believed me?

Images sourced from pcauthority.com.au

Australia’s strengthening relationship with the Smart phone

fred
0
3rd December

Smart Phones are  becoming Aussie iPhone more and more popular across the world, and Australia is no exception.  New research jointly conducted by Google and Ipsos has shown that by the end of 2011 more than 50% of the Australian adult population will own a Smart Phone. The research is based on a study of 30, 000 people from 30 different countries focusing on how people are using their Smart phones.

The study demonstrates that Australia enjoyed a rise of 13% in Smart Phone sales throughout the year bringing it in as the second highest Smart phone saturated populace in the world. This is just behind Singapore and ahead of the United States, the United Kingdom and Japan. According to the Official Google Australia Blog “Australia went from lagging to leading the worldwide Smartphone revolution in just one year”.

So what are we using our Smart Phones for?

  • Australians are using Smart phones for a variety of activities, the most common being social networking, shopping and internet searching.
  • The most popular activity conducted on Australian Smart phones is searching for information. According to the study 40% of us use the Smartphone everyday for this activity.
  • In an average week 71% of Australian Smart phone owners use it to browse the internet, 75% use a search engine and 31%  use them to watch videos.
  • Australians possess on average approximately 25 apps on their Smart phones, 8 of which are paid for.
  • Smart phone use for mobile transactions is on the increase with PayPal Australia reporting a 25 % increase for every month of 2010.
  • 49 % of Australians use their smartphone to research and then call businesses and 20% of those surveyed had looked for real estate with their Smart phone.
  • Source: Google Blog

    The rise of the Smart phones popularity across the world is clear, particularly in Australia. Retailers and businesses are beginning to take notice of the opportunities presented within this new marketing genre and we can expect to see in the coming months a large push from these industries to cash in this the new market. If you or your business is interested in developing a Smart phone friendly website or application, drop us a line or pop in for a coffee here at Conduct?

Browser Testing made Simple with Adobe BrowserLab!

Nick
0
28th November

Browser Lab IconAs designers and developers, we all know the headaches that can be associated with achieving cross browser compatibility with our online projects. Well Adobe BrowserLab, as part of Adobes CS Live Services, has just made this task much easier and faster. No doubt you already have some methods and tools up your sleeve that work for you, but I think you will be pleasantly surprised with Adobe BrowserLab.

This great tool allows you to preview full-view screenshots of your work with multiple view options and customizable test settings. It brings some useful features like the onion skin view, which helps you spot discrepancies at a glance by overlaying two screenshots on top of each other with variable opacity. It supports all major browser vendors and versions and lets you create and configure up to ten browser sets to customize tests to your individual project needs. On top of this it includes some really handy diagnostics tools like zoom, rulers and screenshot delay, which help you refine your testing to get everything looking the way you want.

The thing that really sold me on this new tool though is its beautiful integration with Firefox using its Firebug add-on. This means incorporating all browser testing processes into the one simple and time-saving work-flow. You can test your pages with BrowserLab as it appears on the web or from a local source copy of the file. Debug and test all together!

All-in-all, this is a great addition to Adobe’s product line and definitely worth a look at. Oh yeah and I forgot to mention that it’s in a user preview stage and free to use for 12 months. If you sign up before April 30, 2011 you will also get one year’s worth of complimentary access to all of Adobe’s other CS Live Services too, so jump on board and try it out! Having had a look around, there seems to be no solid promises of how much Adobe may want to charge for this in the future, if at all. However, there have been rumors that it could go for a monthly subscription of $10 -- $20.

New Smashing eBook: Mobile Design For iPhone And iPad

Nick
0
22nd November

E Book

Mobile design has become increasingly important over the past few years, as the usage of mobile browsing rises, to the point where designers can no longer ignore it. A growing number of clients are expecting that their web presence be accessible by phone and therefore you must be capable of delivering on these expectations.

For those looking to scratch up on their mobile design skills, the brand new Smashing eBook: “Mobile Design for iPhone and iPad”, is right up your ally. This great book covers everything about designing for the iPhone and iPad as well as mobile design trends and guidelines for mobile web page development. All in all, this is another great resource from the Smashing team and, for just $9.90, it’s very affordable.
Buy it now!

Cross Browser CSS3 Using CSS3 PIE!

Nick
0
26th September

CSS3 Pie LogoThose of us already dabbling in CSS3 and HTML5 are enjoying the benefits that these technologies bring to modern design. Unfortunately, for many this has come at the cost of countless ‘hair pulling’ hours spent hunched over our workstations attempting to achieve some cross browser stability in our designs, namely Internet Explorer.

That’s right; every designer’s favourite browser is serving up some serious CSS3 headaches for all of its current versions. There is light at the end of tunnel however. When it is fully released at some point this year, Internet Explorer 9 will support most of the latest CSS3 behaviours and decorations. Bu until then, we’re still stuck with doing our best for IE users.

CSS3 PIE comes to the rescue!

CSS3 Pie allows your CSS3 properties such as border-radius, box-shadow, border-image and so on to display correctly in Internet Explorer web browsers, versions 6-8. It is a relatively new library developed by Jason Johnston that cleverly creates DHTML behaviors that IE can understand, and then it controls how they’re presented. Best if all, it’s Open Source!

The PIE stands for Progressive Internet Explorer. I’ve had the opportunity to implement this tool into some of my current work and couldn’t believe the great results. It’s not perfect, however, PIE currently has full or partial support for the following CSS3 features only, with other features under active development:

  • border-radius
  • box-shadow
  • border-image
  • multiple background images
  • linear-gradient as background image

How to use it

Download PIE and upload the file named PIE.htc to your directory. Now, every instance that you use a CSS3 element, simply place behavior: url(path/to/PIE.htc); in your CSS file along with the other CSS3 browser prefixes for that element. That’s it, a piece of pie right! Your CSS3 element should now beautifully render across all versions of Internet Explorer. As an example, this should look something like this.

#CSS3Element {
border: 1px solid #999;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(path/to/PIE.htc);
}

There are a couple of ways to integrate CSS3 PIE into a WordPress theme. If you have access to the root folder then simply place the PIE.htc ( and PIE.php if required) at this level instead of within your theme directory. If you don’t have access to the root then Gordan Brander has a great tutorial using another method for WordPress integration.

All in all, this is great solution.It’s by no means perfect and, in fact, taking this type of approach to utilise CSS3 is controversial among some designers and developers. It’s definately worth while reading the known issues with using PIE as you will no doubt encounter one or more of these. I suppose this tool sits alongside similar ones you might have heard of or be using, such as Modernizr and html5shiv. I encourage you to try it for yourself and come to your own conclusion. Please feel free to let me know how you go!

On a sidenote, if you do find this tool helpful please consider a donation for Jason too. You can also keep up-to-date by following CSS3 PIE on Twitter.

Beautiful Javascript AJAX Loaders

Simon
3
23rd August

We are all familiar with AJAX loaders on websites, these are mostly animated gifs that are often placed and transitioned in and out with a little javascript. The problem with animated gifs is that they do not support alpha transparency and therefore when using a single colour transparency they can look less than polished over certain backgrounds.

Enter Raphael JS a javascript vector graphics library that even works with the dreaded internet explorer (and without the use of additional plugins). Raphael JS has a multitude of uses from producing basic vector text and images to image manipulation, animation, graphing and yes AJAX loaders. There are some great examples on the website, here are two that I have been using recently (Both of these are based on one of the examples available on the Raphael web site).


Aren’t they beautiful, even better they will look great over any background and because they are created programatically it is easy to tweak them and modify them into different forms.

The mobile web made easier with the viewport meta tag!

Nick
0
8th August

In a nutshell

Paste the following meta tag into your header and marvel at the wonders of this simple piece of code.

 

Smartphones

What is the viewport meta tag?

It’s no secret that the days of the mobile web are well and truley upon us. Only accessing the Internet via your desktop or laptop is a thing of the past. According to the Australian Interactive Media Industry Association, the use of mobile phone services has continued to grow in the past year as more Australians buy internet-enabled smartphones and other mobile devices like the Apple iPad. On a larger scale, it’s forecast that by 2013 there will be more than 1.7 billion mobile Internet users worldwide, by far outweighing the number of desktop and laptop users accessing the Internet.

With those kinds of numbers in mind, understanding optimal development and design practices for mobile devices has now become a staple for people designing and developing for the web. There are many ways to tackle the challenges of designing for mobiles but this is just one simple step you can implement to ensure some cross platform and browser stability in your designs.

Most mobile platforms assume different browser settings if none are specified, which can lower the quality and user experience of your designs on these platforms. Placing the viewport meta tag in the head section of your pages can override these default values and ensure your users receive a consistent and optimised experience instead of arbitrary results. The viewport meta tag is fast becoming popular for cross-device compatibility and we recommend exploring its possibilities. It is supported on many smartphones and tablets, from iPhone to Android to webOS (Palm) to even Internet Explorer Mobile, Opera Mini and Opera Mobile. Mobile Safari first introduced the “viewport meta tag” to let web developers control the viewport’s size and scale and now many other mobile browsers support this tag, and although it is not part of any web standard it continues to grow.

So how’s it work?

The first piece of this code, content=”width=device-width, controls the size of the viewport. What we’re doing here is setting the viewport width equal to the actual width of the device so that we deliver a width in CSS pixels at a scale of 100%, instead of the default 980px. A majority of new smartphones will have a width of 320px but this can change depending on the device. The viewport width can be set to a specific number of pixels like width=400px but in most cases it’s better to use width=device-width to deliver more consistent results that are device independent.

The initial-scale property controls the zoom level when the page initially loads. The maximum-scale, minimum-scale, and user-scalable properties control how users are allowed to zoom the page in or out. Setting an initial or maximum scale means the width property actually translates into a minimum viewport width.

But wait, there’s more!

The viewport tag has more options to play with other than the width, so get experimenting:

PropertyDescription
widthWidth of the viewport in pixels (or device-width). If width isn’t set, it defaults to a desktop size (980px on mobile Safari).
heightHeight of the viewport in pixels (or device-height). Generally you don’t need to worry about setting this property.
initial-scale(0 to 10.0) Multiplier that sets the scale of the page after its initial display. Safe bet: if you need to set it, set it to 1.0. Larger values = zoomed in, smaller values = zoomed out
minimum-scale(0 to 10.0) The minimum multiplier the user can “zoom out” to. Defaults to 0.25 on mobile Safari.
maximum-scale(0 to 10.0) The minimum multiplier the user can “zoom in” to. Defaults to 1.6 on mobile Safari.
user-scalable(yes/no) Whether to allow a user from scaling in/out (zooming in/out). Default to “yes” on mobile Safari.

Why use jQuery plugins to create tabs when coding them is so simple

Simon
0
9th June

Here is a quick little tutorial on coding a set of tabs

First lets start with the HTML

<div id="tabs">
<ul id="tab_links">
	<li id="tab1" class="active">Tab2 Title</li>
	<li id="tab2">Tab1 Title</li>
...</ul>
<div id="tab_contents">
<div id="tab1_content">

Some Content

</div>
<div id="tab2_content" style="display: none;">

Some Other Content

</div>
...

</div>
</div>

As you can see the list elements will create the actual tabs with the tab content below. By default we want to have the first tab active (class=”active”) and hide all other tabs (style=”display:none;”).

Now for some css

ul#tab_links {
list-style:none;
color:#000;
margin:0;
padding:0;
z-index:1;
position:relative;
top:1px;
}
ul#tab_links li {
cursor:pointer;
float:left;
background:#ddd;
border:1px solid #bbb;
padding:5px 10px 3px 10px;
margin:2px 4px 0 0;
font-size:14px;
}
ul#tab_links li:hover {
color:#333;
}
ul#tab_links li.active {
border-bottom:1px solid #fff;
background:#fff;
color:#333;
}
div#tab_contents { z-index:0;
clear:both;
border:1px solid #bbb;
background:#fff;
padding:10px;
}

Finally the javascript

jQuery(document).ready(function() {
//Add a click function to all list elements within ul#tab_links
$('ul#tab_links li').click(function() {
//Remove the active class from all the list elements and hide all the tab contents
$('ul#tab_links li').removeClass('active');
$('div#tab_contents').children().hide();

//Add the active class to the clicked element and show its contents
$(this).addClass('active');
$('div#' + jQuery(this).attr('id') + '_content').show();
});
});

I have used jQuery (of course) for this example and below is a demo of it working.

Some Content