Code example of Responsive web design using CSS3 Media Queries

imageWith the introduction of CSS3 media queries, web developers can create CSS which enables a web page to adapt and respond to whatever device renders it.  Creating a responsive design, one where elements on the web page are fluid, has never been simpler.  If you have a basic understanding of CSS, then you possess all the skills required to get started with your own responsive design. 


The term Responsive Web Design was coined by Ethan Marcotte, to describe the practice of flowing layouts, page elements and images, by leveraging media queries to support various device display properties.  As the name suggests, this design technique allows a web page to respond in real time to both a users behavior (browser window size), and device platform (including orientation).
 
 
 
Code example of a responsive web page
 
As you will see... my example is bias to the dimensions of Apple's iPad and iPhone, but you can certainly adapt my sample CSS to any device width or height that is meaningful to your target audience.  For this learning example I created a simple design that consists of a banner, with a main text area that is bordered by 3 widgets on the right.   The example will make use of three media queries.
 

Portrait Tablet
@media (min-width: 481px) and (max-width: 768px)

Landscape smart phone
@media (min-width: 321px) and (max-width: 480px)

Portrait smart phone
@media (max-width: 320px)
 
 
Start by creating the standard CSS classes and setting default properties.  I marked-up my CSS defaults to support both desktop and landscape tablets by limiting the major elements to a width of 1000px.

<style  type="text/css">
#banner {
   margin-left:auto;
   margin-right:auto;
   width:1000px;
}
.
.
.
.widget-text {
   padding:10px;
   background-color:#FCFCFC
}
</style>


The media queries
 
Next create the media queries for each screen dimension your interested in supporting (responding to).   Media queries are exactly like any other CSS element,  you are simply providing an alternative set of CSS properties for the existing elements on your web page.  The browser will respond by calling the proper @media each time the web page is loaded or a user re-sizes the browser window.  Here are the three media queries I added support for:

<style  type="text/css">
@media (min-width: 481px) and (max-width: 768px) {
   #banner { width:740px; }
   #banner img { max-width:740px; max-height:222px; }
   #main { width:740px; }          
   #main-content { width:450px; float:left; }
   #widget-container { width:200px; float:right; }
   .widget-content { width:160px; }
}

@media (min-width: 321px) and (max-width: 480px) {
   #banner { width:450px; }
   #banner img { max-width:450px; max-height:135px; }
   #main { width:450px; }          
   #main-content { width:400px;}
   #widget-container { width:400px; }
   .widget-content { width:120px; margin:5px; float:left;}
   .widget-text { display:none; }
}

@media (max-width: 320px) {
   #banner { width:275px; }
   #banner img { max-width:275px; max-height:83px; }
   #main { width:250px; }          
   #main-content { width:250px;padding:0px;}
   #widget-container { width:250px; padding:0px; }
   .widget-content { width:250px; margin:5px;}
   .widget-text { display:none; }
}
</style>


Media queries enable my example to support landscape and portrait mode cleanly
 
                  image  
 
 
 
Hints and Tips
 
Important!  Set the following META keyword to force the device viewport to maintain the correct scale.  Failure to include this META will result in your UI being pinched: 
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
 
You can optionally configure webpages saved to the iphone's home screen to launch using WebKit directly.  This will remove the Safari web browsers address bar & bookmarks bar giving your web page a native appearance:
<meta name="apple-mobile-web-app-capable" content="yes" />
 
Optionally provide a thumbnail image to represent bookmarked pages in iPhone: 
<link rel="apple-touch-icon" href="https://www.ibm.com/developerworks/mydeveloperworks/blogs/bobleah/resource/dw-phone.gif" />
 
 
 
 
Next steps
image
 
You can run this example by clicking here.  As you resize your browser window to different widths you will see the media queries adapt and flow the web page.  You can download the complete HTML and CSS of this example by clicking here.  

Media queries are not a total answer to mobile views, as they don't address page weight issues, which is another major consideration for mobile design.  Hiding a div or resizing an image has no impact on their contribution to overall page weight, as elements set to display:none are still part of the DOM, and simply hidden from displaying visually.

However, by starting with a sound minimal design, leveraging media queries can result in a workable mobile solution for your website.  The key is careful thought to page elements, image sizes, and overall copy content.    

For the entire definition and specifications on media queries,  please visit the W3C Media Queries module.
 
Source: IBM.com

HTML5 Hybrid Apps

Mobile Apps built with HTML5 are great... when the mobile device you're targeting can support all of the features you need for delivering a top flight user experience. To help the rubber meet the road, you sometimes need libraries to access native OS capabilities like the camera and you could use an accelerated canvas to deliver powerful and responsive mobile apps!  Learn how the polyfill libraries and Intel’s accelerated canvas can do exactly what is needed!

Introduction to Polyfills

On a beautiful day in the near future, every browser will be able to access the latest and most powerful technologies the second they are dreamed up at the W3C. Using only W3C standard HTML and JavaScript, you’ll be able to access every native piece of hardware. All the enterprising developer will need is HTML and JavaScript skills to code any app they can imagine.
Unfortunately, this isn’t the world we live in right now. If you want to create a modern installed HTML5 app, you’re going to need some polyfills to make a hybrid app.
A polyfill is a piece of code that bridges what the browser is capable of out-of-the-box and what you need it to do. There are two main kinds of polyfill libraries. There are compatibility polyfills that add support for new W3C technologies to browsers that don’t understand them by default, and there are polyfills that add APIs to JavaScript to access native operating system resources.

Using Compatibility Polyfills

Most mobile browsers are capable of more modern capabilities than the current low-watermark for compatibility on the internet, Internet Explorer 8. Many features of HTML5 and CSS3 are functional and have been working since Android 2.2 with a few exceptions like SVG (Scalable Vector Graphics) and DataList support.

Using a Polyfill for SVG Compatibility

SVG is extremely helpful in rendering complex charts and beautiful multi-colored icons that look great on high resolution screens. Android devices prior to 2.3 don’t support SVG. If you need to render SVG graphics on an older Android device, canvg.js can help you out. All you need to do is declare a canvas in your HTML and make a one line JavaScript call to canvg to load and render your SVG.

<canvas id="YourIcon" width="32px" height="32px"></canvas>
<script language="text/javascript">
canvg('YourIcon', 'IconFile.svg');
</script>

Using a Pollyfill for Tag Support.

The DataList tag is very useful in providing suggestion list driven text boxes. Neither Android nor iOS web browsers support this tag. The jquery.datalist plugin comes to the rescue. This particular plugin even allows you to structure your HTML as you would a normal HTML5 datalist and just add a single JavaScript call to your web page to progressively add in support:
$('input[list]').datalist();
The above jQuery call will find all of the HTML5 DataLists on the page, then apply the data list effect via progressive JavaScript enhancement.

Accessing Native Capabilities Using Polyfills

Many HTML5 apps installed on mobile devices need to access native hardware capabilities of the device that are not typically exposed to the browser. The Cordova and AppMobi APIs provided by the Intel XDK New enables the creation of a hybrid app that can bridge the gap between what is typically exposed to the browser and the native hardware on the device.
The Intel XDK New is a recent entrant into the area of multi-platform HTML apps. Intel brought together a portfolio of leading products category leading technology like AppMobi, Impact.js, Cordova and more to deliver an end-to-end experience of native capabilities exposed to more cross-platform friendly HTML and JavaScript.
One of the key goals of the Intel XDK New is to provide that native compatibility polyfill capability between your HTML5 app and the kinds of native resources necessary to deliver a full featured application. The polyfills in the Intel XDK New allow you to take pictures, scan barcodes, access contacts on the device, sign on to OAuth apps like Facebook, play media and access the device’s accelerometer. In this article, we’ll take a look at accessing the device’s camera and accelerometer as well as how to turbocharge your graphics with the accelerated canvas.

Camera and File Upload

One of the most common pieces of native hardware access necessary for a mobile app is access to the device’s camera. For example, if you wanted to add the ability for your app to take a picture of the user to use for their avatar, you would need a way of accessing the device’s camera.

The W3C standard APIs for web RTC (Real-Time Communications) that would provide native camera access are still evolving and even once fully evolved might still prove impractical on a mobile device’s interface compared to launching the device’s native camera app. The AppMobiTakePicture” API launches a device’s native camera app and allows the user to take a picture. Once the picture has been taken, your app will come back into the foreground and can return a URL (file://path/on/device.jpg format) for accessing the image file.
Once your app has a reference to the file on the local disk, you can pass it to an IMG tag to display it or you can use another polyfill to upload the file to a web server. Although there are standard JavaScript APIs to do file uploads across the internet, it might not work if you use one of the APIs that provides progress reporting. The AppMobiuploadToServer” API takes care of the compatibility layer to upload the file and report progress back to your application.

function CapturePhoto() {
document.addEventListener("appMobi.camera.picture.add",PicDone);  
AppMobi.camera.takePicture(70,//Quality between 0 and 100
false,//Save to device’s library
"jpg");//jpg or png
}
function PicDone (e) {
if (e.success)
{
var urlToPic = AppMobi.camera.getPictureURL(evt.filename);
            AppMobi.file.uploadToServer(urlToPic,
"http://www.yourserver.com/uploadImage.php", //url
"", //folder
"image/jpeg",//mime type
"ProgressUpdated");//callback
}
}
function ProgressUpdated(bytesSent,totalBytes)
{
      var progress = 0;
if(totalBytes>0)
{ progress =(bytesSent/totalBytes)*100; }
$('#ProgressDisplay').html(progress +"%");
}

Working with the Accelerometer

The accelerometer on mobile devices measures how the device is moved in 3D space. This can be used to add an additional layer of interaction for your users beyond just pressing on the screen. You can use the accelerometer to allow the user to scroll by tilting the device or clear the screen like an etch-a-sketch by shaking it. Many games use the accelerometer to turn the whole device into steering wheel to fly through imaginative worlds.
To take the hybrid app approach to access the accelerometer using the polyfill in the Intel XDK New, register an event handler with AppMobi.accelerometer.watchAcceleration. Your function will be passed an object containing the device’s X, Y, and Z position. When you register your event, you will also need to define how frequently you want your function called to measure the accelerometer. If you set it too infrequently it will feel unresponsive, if you set it too frequently it will take up too much CPU time.
The code example below registers a handler for the accelerometer to report the device’s position 24 times per second. Feature films run at 24 frames per-second and most casual games work well at this frame-rate.
AppMobi.accelerometer.watchAcceleration(function(acl) {
$('#ACLStatus').html('x: '+ acl.x
+'y: '+ acl.y
+'z: '+ acl.z);
}, { frequency: 24 });//Report 24x per second

Note: To test out your app before loading it on a real device, the Intel XDK New includes the built-in capability to simulate device movement by either entering numeric values for tilt or dragging a 3D version of the phone around.

Accelerated Canvas

The HTML5 canvas element provides a drawing surface for you to be able to draw anything you want on-screen. For most purposes, the normal canvas tag provides the capabilities you need with adequate performance but if you are developing games you need a higher performance solution. This is where the accelerated canvas comes in.

The normal canvas element runs inside of the browser where every pixel must be evaluated to see if there is something above it, below it, if someone is clicking it, etc. All of this capability comes with overhead. With the accelerated canvas, you lose this functionality in exchange for up to ten times faster drawing performance. The net effect is you can create rich graphics games, cross platform, with near native performance.

To use the accelerated canvas in the Intel XDK New, you don’t create an HTML page with a canvas tag on it. Create your app with a single html page with no content in the BODY tag. Then call “AppMobi.canvas.load('YourCanvasScript.js')”. This will initialize the accelerated canvas in full screen mode. The script file you pass the load function to will run inside of the accelerated canvas.

This designation of “inside of accelerated canvas” and “outside of accelerated canvas” code is important because the code that is running inside of the accelerated canvas can’t communicate with the regular HTML page directly. To call a function on your canvas from your HTML page, execute “AppMobi.canvas.execute('YourCanvasFunction()')”. To call a function on your HTML page from the canvas side, execute, “AppMobi.webview.execute('YourPageFunction()')”. The canvas itself doesn’t have the ability to have elements on it that can receive events so the communications between the HTML and accelerated canvas layers is critical.

From an API standpoint, the only other major differences between the API used for a normal canvas and the accelerated canvas is how you get the context and the necessity to call “present()” when you are done drawing the frame. On a typical HTML5 canvas element, as you call each drawLine and fillRect, the canvas is updated when you make the API call. The accelerated canvas gains efficiency by drawing off-screen then painting the entire frame to the user interface when you call “present()”.
The example below creates a context reference to the accelerated canvas, draws a red rectangle then calls present to paint the canvas to the screen.
var context = AppMobi.canvas.getContext("2d");
context.fillStyle = "red";
context.fillRect(0,0,100,100);
context.present();
For more information on how to get started with the accelerated canvas, check out the Game Interface Implementation guide on Intel’s web site.

Conclusion

Cross-device HTML5 development allows you to write your code once and run it everywhere from the internet to the latest and greatest mobile devices. Careful use of polyfills like the ones in the Intel XDK New allow you to make a hybrid app and access everything your app needs to be able to do in between what HTML can do out-of-the-box and native capabilities.
This article was reprinted from htmlgoodies.

Add Scripting an HTML5 Web Application Using the Maqetta Editor

This article is a continuation of Implement the Dojo DateTextBox Control In an HTML5 Web Application Using the Maqetta Editor . In that tutorial, we learned how to work with Dojo DateTextBox control properties to change the date display format, wrote validation code, and got better aquainted with the Palette and Property tabs of the Maqetta editor. In today's follow up, we'll be adding the code to calculate the years of service based on the start and end dates, as well as how to control the visual aspects of our web app, including the form layout and theme.

Calculating the Years, Months, and Days

In the last instalment, we were left with a call to calcYearsMonthsAndDays() that was not fleshed out. Now it's time to delve into that, starting with the calcYearsMonthsAndDays() method:
?
1
2
3
4
5
6
function calcYearsMonthsAndDays(startDate, endDate) {
   var yearsOfService = dateDifference(startDate, endDate);
   dojo.byId("lblYears").innerHTML = yearsOfService[0];
   dojo.byId("lblMonths").innerHTML = yearsOfService[1];
   dojo.byId("lblDays").innerHTML = yearsOfService[2];
}
CalcYearsMonthsAndDays() calls a function called dateDifference() that returns a three element array consisting of the years, months, and days. Each of these date parts are then displayed in their respective labels. That part is simple enough. The real work takes place in the dateDifference() function, which I adapted from a Java method. Luckily, very few changes were required to convert it to JavaScript:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
function dateDifference(d1, d2) {
  var fromDate,
      toDate,
      year,
      month,
      day;
   
  if (d1 > d2) {
      fromDate = d2;
      toDate   = d1;
  }
  else {
      fromDate = d1;
      toDate   = d2;
  }
   
  var increment = 0;
  if (fromDate.getDate() > toDate.getDate()) {
      increment = fromDate.getLastDayOfMonth();
  }
   
  if (increment != 0) {   
    day = (toDate.getDate() + increment) - fromDate.getDate();
    increment = 1;
  }
  else {      
    day = toDate.getDate() - fromDate.getDate();
  }
   
  //month Calculation
  if ((fromDate.getMonth() + increment) > toDate.getMonth()) {  
    month = (toDate.getMonth() + 12) - (fromDate.getMonth() + increment);
    increment = 1;
  }
  else {   
    month = toDate.getMonth() - (fromDate.getMonth() + increment);
    increment = 0;
  }
   
  //Year Calculation
  year = toDate.getFullYear() - (fromDate.getFullYear() + increment);
   
  return [year, month, day];
}
The last date function is getLastDayOfMonth(), which I included to take advantage of JavaScript Rollovers. In a nutshell, whenever you set a date component - such as the year, month, or day - to a value that exceeds the maximum for that field type, overflowing causes the entire date to change accordingly rather than throw an error. For instance, setting a month of 12 (months are zero based) will set the date to January of the following year. Even more advantageous, is the effect triggered by setting the day to zero. It rolls back the date to the last day of the previous month, allowing us to easily determine the length of a given month:

1
2
3
4
5
6
Date.prototype.getLastDayOfMonth = function() {
   var dt = new Date(this);
   dt.setMonth(dt.getMonth() + 1);
   dt.setDate(0);
   return dt.getDate();
};

Tweaking the Form Layout

The form is fully functional at this point, but we can make it look more professional through a combination of layout and CSS styling.
Dojo, always known for their impressive array of widgets, offers a control called a Border Container. Ostensibly used for page layouts that contains sidebars and/or headers, it's comprised of a center panel and four optional borders along its sides:
If we drag it into an form on the design pane, we can then place the title in the top border, the start and end date labels in the left border, the start, end date, and Calculate button controls in the center area, the Weekday info in the right panel, and the Years, Months, Days, and messages output in the bottom border. Now our form has a more esthetically pleasing layout:
Now that image of the final layout took a bit of maneuvering to arrive at. A general sizing can be arrived at by clicking on individual sections of the layout and then dragging the borders. For more fine-grained tuning, you can enter exact numbers in the layout section on the right. You can always edit the HTML markup directly by choosing the Source layout instead of Design. Alternatively, the Split-H and Split-V design layouts show both the WYSIWYG Editor and Markup panes simultaneously. In either of those modes, clicking on source code will highlight the page element that it pertains to in the Design Editor. Likewise, selecting a page element will highlight the relevant code in the Markup pane:
That can be really useful for getting a look at all of an element's properties at a glance.

Overriding a Theme

When you create a new project, Maqetta defines a CSS Theme that best suits the project type. Web Applications for instance, implement the Claro Theme (There is also a Sketch Theme). We are free to change parts of the default themes or even create a new one from scratch. Personally, I like to use the original theme as a basis for my own. To do that:
  1. Click the Create button at the top-center of the screen and select Theme... from the menu.
  2. In the New Theme dialog, select a theme to clone. For Web apps, the usual starting point is claro or claro2.
  3. Give your theme a name, and click Create to save it.
  4. To configure your theme, click the Open button, located beside Create, and choose Theme Editor... from the list.
  5. On the Open Theme dialog, select your new theme from the list and click Open.
All of the supported widgets are displayed and divided into three sections: Global Styling, Primitive Widgets and Container Widgets. Clicking on any widget selects it so that its properties can be configured in the Properties palette.
Let's change the font color for all document elements.
  1. Select the Generic text widget at the top of the editor, under Global Styling.
  2. Open the Fonts and Text section of the Properties palette.
  3. Set the font color to blue. Notice how the text for all the widgets in the editor turns blue.
  4. Click on the Save button on the toolbar to commit your changes.
Now we'll change the Selected Date color for the Calendar control.
  1. Click on a date in the Calendar widget. That will display its subwidget panel.
  2. Open the Background section of the Properties palette.
  3. Select the Color picker... from the background-color dropdown and change the color (I chose #6fc7dd [aqua]). After clicking OK, the selected date in the calendar will be updated to reflect your changes:
    4. Once again, click on the Save button on the toolbar to commit your changes.

Try It Out

Hit the Preview in Browser button in the top-right corner to view the app in the browser. Go ahead and pick a start and end date, then press the Calculate button to see the results:
Success! Retirement is just around the corner...sort of...

Canvas Markup Element with HTML5

To support rich graphics, the HTML5 specification introduces the canvas markup element (http://www.w3.org/html/wg/drafts/html/master/embedded-content-0.html#the-canvas-element). The canvas markup element is intended for use where embedded content is expected. The canvas element supports a resolution-dependent bitmap canvas and can be used to render graphs, art, graphics and images on the fly.
The canvas element supports content which can be used as the element's fallback content in case the browser does not support rendering canvas elements. The specification recommends that the content represent the same intent as the canvas' bitmap.
Canvas markup element can be used in both interactive visual media as well as non-interactive (static) visual media. Here is a breakdown of what the canvas element represents in various scenarios.
Type of media
Scripting enabled (Y/N)
What does canvas element represent? (if canvas elements are supported)
Interactive visual media
Yes
Embedded content consisting of a dynamically created image, the element's bitmap
Non-interactive visual media
Yes
Embedded content with the element's current bitmap and size
Interactive visual media
No
Fallback content
Non-interactive visual media
No
Fallback content

A simple canvas element can be declared with the following markup.
<canvas id="mycanvas" width="200" height="400" ></canvas>
Once you have the canvas element, you can specify a rendering content bound to it.
The canvas context mode (http://www.w3.org/html/wg/drafts/html/master/embedded-content-0.html#concept-canvas-context-mode) has a default value of none, and supports other values: "direct-2d", "direct-webgl", "indirect" and "proxied".

JavaScript can be used to get the rendering content of a canvas by calling the getContext("2d") api.
Let us create a simple HTML5 page where we will use the canvas markup element to draw a line and to fill a rectangle. The HTML code for this is as under:
<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<title>Canvas sample</title>
<body>
<article>
<header>
<h1>Canvas sample</h1>
<p>The sample using Canvas markup element</p>
</header>
<canvas id="mycanvas" width="200" height="400" ></canvas>
<button id="buttonDrawLine" type="button" onclick="buttonDrawLine_click()">Draw Line</button>
<button id="buttonFillRectangle" type="button" onclick="buttonFillRectangle_click()">Fill Rectangle</button>
<footer>
<h1></h1>
<p>HTML Goodies</p>
</footer>
</article>
<script type="text/javascript">
function buttonDrawLine_click()
{
var c=document.getElementById("mycanvas");
var context=c.getContext("2d");
context.moveTo(0,0);
context.lineTo(200,400);
context.stroke();
}
function buttonFillRectangle_click()
{
var c=document.getElementById("mycanvas");
var context=c.getContext("2d");
context.fillStyle="#F00000";
context.fillRect(0,0,200,400);
}
</script>
</body>
</html>

As you can see, we have a "mycanvas" element and two buttons. To draw a line, we get the context, set it to center at coordinates (0,0) and call lineTo() and stroke() api on the context to render the line.
To fill the rectangle, we call the fillRect() api on the context.
When you render the page in a compatible browser (latest version of IE, Chrome, Firefox), the page will appear as under.

After we click on the Draw Line button, it will render as under.

And when we click on Fill Rectangle, the page will render as under:

When we click on Draw Line again, we will render a line on top of the rectangle.


If you are having trouble following along, you can download the HTML code from <download link>.

How To Create Buttons Using Textures with CSS3

In this article we're going to look at a simple method of creating buttons using CSS3 and textures. While it's possible to do a lot of styling with code, you can really geek yourself out and create really cool, but time consuming projects. My recommendation is to use code for some effects, then at a certain point (which only you as the designer can determine), I recommend using image illustration or photo manipulation programs such as: Adobe Photoshop, Illustrator, CorelDRAW, PHOTO-PAINT, Paintshop Photo Pro or GIMP to create the components. When it comes to textures, you can use free textures online, royalty free textures or create your own, using software. My program of choice is Corel PHOTO-PAINT X5 (part of the CorelDRAW application) because the texture creation options are amazing and virtually unlimited. If you've never used PHOTO-PAINT, here's a quick tutorial to get you started (this is with PHOTO-PAINT X5). With the program running, go to File: New.
n the Create a New Image dialog box, use the following settings: Width: 150px Height: 30 px Measurement: Pixels Resolution: 96 dpi Color Mode: 24-Bit RGB Click on OK.
Next, you'll learn how to create textures. Click on the Fill tool (F) on the lower left to activate it, then go up to the menu bar and click on the blue textured icon. To the immediate right of that is the Edit Fill icon. Click on it to open the Texture Fill dialog box. Note: To the right of the Edit Fill icon, you'll see several settings. For now, leave those at the default. Later, when you've chosen a texture, you can experiment with transparency, layering, and more.
This is where the magic begins. At the top left you have access to the Texture library, where you'll find a rich assortment of textures. On the top right, you'll see the texture number when you click on the Preview button on the lower left. Clicking on that will change the texture and the colors on the lower right. You'll also see the texture number change. You can now set the colors on the lower right manually. When you're satisfied with your texture, click on OK. This will take you back to the workspace. To apply the texture, hover your cursor over the white space in the image file you created. You'll see that it turns into a paint bucket icon. Click to apply the texture. After that, you can experiment with the tolerance, transparency and merge modes. Once you get started you'll find it to be quite addictive. You'll be able to create some really cool textures for your projects. Once the texture is done, it's time to create a simple button with a hover. Note that for this tutorial, I've used Adobe Dreamweaver CS6 to put everything together. The first step is to create a rectangular button shape with background image and some text inside it. In this case I set the size of the texture to match the CSS dimensions below: 
#button { 
width: 150px; 
 height: 30px; 
 background-image: url(redfoil.jpg); 
font-size: 14px; 
font-family: Tahoma, Geneva, sans-serif; 
 font-weight: bold; text-align: center; 
}
and here's the HTML

<div id="button">
<ul>
<li><a href="index.html">BUY NOW</a></li>
</ul>
</div>

Here's the end result. As you can see, we have a dark texture here and we have to lighten the text, center it and so on to get the effect we're after. For the next step I'm going to add a border and the CSS3 border-radius property.

#button {
     width: 150px;
     height: 30px;
     background-image: url(redfoil.jpg);
     border:2px solid black;
     border-radius: 10px;
     font-size: 14px;
     font-family: Tahoma, Geneva, sans-serif;
     font-weight: bold;
     text-align: center;
}
And here's the result. In the next step we're going to remove the bullet point and set the position of the text in the button.

#button ul {
     height: auto;
     padding: 6px 0px;
     margin: 0px;
}
This is the result. Now we're going to remove the underline of the text and change the font color.

#button a {
     text-decoration: none;
     color: #FFF;
}



As you can see, the button is really starting to take shape. Our final step is to apply the CSS3 opacity property. Note that 1.0 indicates full opacity and numbers less than 1.0 indicate various levels of opacity. Note also that this property also affects the text, so when you use this property, you need to take care not to overdo the effect. Here's the code:

#button:hover {
        opacity:.8;
}
</style>
Here's the look of the button with the hover to the right. Here's all of the code used in this article: Untitled Document Conclusion Creating a button in this way only scratches the surface of what you can do with CSS3. In the resource section you'll find one resource for great button design. As you'll see, there are many options and you can spend many hours experimenting with different layouts and designs. Have fun!

Ubuntu Linux enters the smartphone wars

phone-naturally-neat
Say hello to Ubuntu for smartphones. The bits will be out shortly, phones running it will appear late this year or early next year.
Instead of going after both the tablet and smartphone with a newly-improved touch-enabled version of Ubuntu Linux, Canonical will be focusing its efforts in 2013 on smartphones.
While the smartphone interface is clearly based on Ubuntu's Unity interface, it's not just the same old desktop shrunk down to a smartphone. According to Canonical, the smartphone Ubuntu will use "all four edges of the screen for a more immersive experience. Ubuntu uniquely gives handset OEMs and mobile operators the ability to converge phone, PC and thin client into a single enterprise superphone."

“We expect Ubuntu to be popular in the enterprise market, enabling customers to provision a single secure device for all PC, thin client and phone functions. Ubuntu is already the most widely used Linux enterprise desktop, with customers in a wide range of sectors focused on security, cost and manageability” said Jane Silber, Canonical's CEO in a statement. “We also see an opportunity in basic smartphones that are used for the phone, SMS, web and email, where Ubuntu outperforms thanks to its native core apps and stylish presentation.”
This new version of Ubuntu will be "aimed at two core mobile segments: the high-end superphone, and the entry-level basic smartphone, helping operators grow the use of data amongst consumers who typically use only the phone and messaging but who might embrace the use of web and email on their phone. Ubuntu also appeals to aspirational prosumers who want a fresh experience with faster, richer performance on a lower bill-of-materials device."
At the same time, this isn't just a smartphone operating system. Jono Bacon, Ubuntu's community manager, added on his blog. that "Ubuntu for phones is not just limited to just the Operating System on the phone screen itself. Ubuntu also has the technology, as demonstrated with Ubuntu For Android, to boot a full Ubuntu desktop from the phone when it is docked with a screen. This provides a complete Ubuntu experience in your pocket, for both your phone and your desktop, with a clean consistent look across both screens, and with all your content available on your phone and desktop using Ubuntu One. This is revolutionary."
converged-Ubuntu-device-440x267
With the new Ubuntu, you will be able to literally have your desktop in your phone.

The Ubuntu handset interface will include the following features:
1. Edge magic: thumb gestures from all four edges of the screen enable users to find content and switch between apps faster than other phones.
2. Deep content immersion - controls appear only when the user wants them.
3. A beautiful global search for apps, content and products.
4. Voice and text commands in any application for faster access to rich capabilities.
5. Both native and web or HTML5 apps.
6. Evolving personalized art on the welcome screen.
Bacon added, "The design and implementation of the phone is beautiful You can immediately tell it is Ubuntu; the Unity mobile experience looks clean and consistent with the desktop and touch is stunningly integrated. The Ubuntu for phones experience is designed to make all your phone content easier to access and your apps more immersive – every edge has a specific purpose, making all your apps, content and controls instantly accessible, without navigating back to the home screen every time. It’s a uniquely, beautifully converged experience."
For better or worse, Canonical will also be offering "compelling customization options for partner apps, content and services. Operators and OEMs can easily add their own branded offerings. Canonical’s personal cloud service, Ubuntu One, provides storage and media services, file sharing and a secure transaction service which enables partners to integrate their own service offerings easily."
This offering isn't aimed for smartphone modders Instead, it's for OEMs and carriers. "Canonical makes it easy to build phones with Ubuntu. The company provides engineering services to offload the complexity of maintaining multiple code bases which has proven to be a common issue for smartphone manufacturers, freeing the manufacturer to focus on hardware design and integration. For silicon vendors, Ubuntu is compatible with a typical Android Board Support Package (BSP). This means Ubuntu is ready to run on the most cost-efficient chipset designs."
Bacon added, "To be quite clear, this announcement is not for a physical Ubuntu Phone that you can purchase yet. The announcement is for the Ubuntu for phones platform that we are presenting to handset operators and OEMs as a solution that they can bring to market. The Ubuntu phone offers great performance on handsets with a low bill of materials, while opening up new opportunities for phone and PC convergence at the top end of the market. This is no mockup or flash demo though; this is a real platform, and you have to see it in action…it really is stunning."
That said, according to Mark Shuttleworth, founder of Ubuntu and VP of Products at Canonical, "Users with unlocked phones, starting with Galaxy Nexus phones, will be able to run Ubuntu."
Shuttleworth also believes that "Canonical is uniquely placed with a single operating system for client, server and cloud, and a unified family of interfaces for the phone, the PC and the TV." And that, “We are defining a new era of convergence in technology, with one unified operating system that underpins cloud computing, data centers, PCs and consumer electronics." Specifically, Shuttleworth, in a press conference, said that eventually "a single Ubuntu image will be able to run with a smartphones, tablet, TV, or desktop face." He hopes that this universal version will be available in April 2014 with Ubuntu 14.04.
In a press conference, Shuttleworth added that he's well aware that smartphones is a "hotly contested" area but he believes that Ubuntu has unique advantages for both end-users and developers. "We have ample evidence of interest from both carriers and OEMs." Shuttleworth added that Ubuntu for Android will ship in 2013 will ship from a brand-name phone vendor. Ubuntu for smartphones is expected to ship in the last quarter of 2013 or first-quarter of 2014. Canonical will be showing off this new spin on Ubuntu at CES in the next few days.

Google's Motorola purchase: Was it worth it?

motoroladroid
Google closed its Motorola Mobility acquisition in May 2012 and the returns remain to be seen. One thing is clear: There's no question that the Motorola Mobility purchase was all about the patents.
In recent weeks it's clear that Google has dismantled Motorola Mobility via assets sales and restructuring. The Motorola Mobility question for Google is timely given a series of events in recent weeks. Consider the following:
  • The Federal Trade Commission said that Google must license key Motorola patents. The FTC said:
Under a settlement reached with the FTC, Google will meet its prior commitments to allow competitors access – on fair, reasonable, and non-discriminatory terms – to patents on critical standardized technologies needed to make popular devices such as smart phones, laptop and tablet computers, and gaming consoles.
In other words, Google can't use its $12.5 billion acquisition of Motorola Mobility (and the patents that came with it) as a weapon.
  • Google sold off Motorola Mobility's home unit to Arris for $2.35 billion. Google gets out of the set-top box business, but one could argue that unit could have been important to the search giant's digital living room ambitions.
  • The Wall Street Journal reported that Google was struggling to build a so-called X phone that would compete with Apple's iPhone. Motorola would create the uber Android handset under Google's master plan.
  • Two of Motorola Mobility's manufacturing facilities were sold to Flextronics. Google also closed a plant in Chennai. Also see: Flextronics: Moving tech manufacturing to U.S. 'a journey'
  • Motorola's market share in the U.S. among smartphone subscribers fell to 10.4 percent in November compared to 11.2 percent in August. Motorola's market share loss was larger than both LG and HTC. In other words, Motorola is taking hits as Apple and Samsung run away with the smartphone market.
Was the Motorola Mobility purchase worth the effort? In many respects, Google's returns remain to be seen. Google has left much of Motorola's manufacturing efforts behind. The actual focus of Motorola seems to be unclear. Patents are the big sell here for Google, but the FTC may have taken away some of the search giant's thunder.
A few of the moving ROI parts:
  1. Google's sale of Motorola's home division takes 5,000 employees off Google's books.
  2. The sale to Arris, however, removes 29 percent of Motorola's revenue and 1,000 patents.
  3. Motorola's manufacturing capacity has been curtailed and that should help profit margins.
  4. Motorola hasn't delivered a killer smartphone since being owned by Google.
  5. The patent portfolio acquired by Google in the Motorola deal looks like a keeper.
Add it up and the math goes like this. Jefferies analyst Brian Pitz outlined the returns.
At $12.5B, Motorola is Google’s largest acquisition to date. Google paid $40 / share in cash, but received ~$11 / share in cash and $8 / share in deferred tax assets. Thus the value ascribed to operations + patents was about $21 / share, or $6.3B, reflecting a multiple of ~0.5x sales and 12x EBITDA. Now adjusting this further for the $2.35B total consideration Google is expected to receive for the Motorola Home business, we get a purchase price of just under $4B for Motorola's handset business and patent portfolio (17K patents and 7.5K patent applications). This compares very favorably to recent patent deals such as Apple, Microsoft, RIM, Sony, Ericsson, and EMC paying $4.5B for 6K patents (July ’11) and Microsoft paying $1B for 800+ AOL patents (April ’12). Based on a sum of the parts, one could conclude Google acquired either the handset or its patents for a very minimal cost.
The bottom line here is that Google bought Motorola for the patents and has largely dismantled it. The patents appear to be going rate for Google. However, Google was also supposed to become a hardware player. The jury is out on that one so far.

Windows 8 sales: Intel confirms hurry-up-and-wait scenario

Intel promised ultrabooks that will be touch-enabled by default, chips with all-day battery life and designs that fully utilize Microsoft's Windows 8. These designs will land in the second half of 2013.
The systems sound great---unless you've already bought a Windows 8 laptop, tablet, convertible or one of those other 140 contraptions Intel highlighted in its 2012 recap at CES.
Kirk Skaugen, the VP and GM of Intel's Client Group, said that the company will push lower power core chips now. These Core processors run at 7 watts instead of 10 watts. This move is a hold the fort maneuver that should make the current batch of hardware running Windows 8 more appealing.
The upshot: The current crop of Windows 8 devices will improve beginning in April or May.
However, the better move is to wait for Microsoft to update Windows 8 and Intel to launch its fourth generation Core processors. Skaugen said that $599 touch-based PCs will be the norm by the end of 2013.
intcslide010813

"Every single day we're getting more and more mechanical innovation," said Skaugen.
Skaugen also said that Intel's fourth-generation Core processor will be the first developed specifically for ultrabooks. Everything else was a "retrofit" to work with touch.
Let's sum this up. Anyone who bought Windows 8 hardware in recent weeks acquired retrofit devices that feel a bit 1.0 because they are. If you buy in a month or two, you'll get better battery life. If you wait until the holiday season of 2013, Wintel will fully have its act together.
The Intel CES keynote should have led with a slide putting the kibosh on Windows 8 device sales. As noted previously, Windows 8 is likely to be a second half 2013 story.

Sorry Microsoft, I am breaking up with the Surface

Surface RT with Type Cover
I'm a tablet guy by anyone's definition. I'm also a mobile tech guy. When a new gadget or technology rolls around I get all excited and grab it to give it a go.
I did just that when the Surface RT tablet from Microsoft became available months after the surprise announcement last year. I tracked the shipment with anticipation after placing my order. When it arrived I excitedly opened the box and fired it up.
Sadly, that was the pinnacle of my excitement. After too many hours trying to make the Surface fit into my daily work routine, I have placed it on a shelf while I use other devices to go about my business.
It's not that the Surface isn't a fine device, it is certainly a nice bit of kit. It's not that it lacks innovation, the slate form with the keyboard cover pushes the envelope.
No, it's not for a lack of effort on Microsoft's part that the Surface doesn't work for me. It's because I require the gear I use to do everything I need and without fuss. The Surface fails me in this regard despite a big effort on my part to make it work.
My inability to leverage the Surface may just be me. I know quite a few owners who absolutely love their Surface and I am happy for them. Perhaps my needs in a mobile computer are so unique that I am the exception rather than the rule.
Whatever the reason, I am tired of constantly trying to get stuff done with my Surface, only to put it away after a few hours in sheer frustration. I can pick up any other gadget in my possession, and that's quite a few, and easily get things done with little effort.
Why does the Surface frustrate me every time I use it? The lack of good apps plays a big role. I have bought too many apps in the hope that one of them will be the one that turns things around, but to no avail. Even the apps that I end up using regularly aren't as good as the apps I use on every other mobile platform. They lack features, waste screen space, and most importantly they insist on grabbing my attention when all I want to do is get things done.
That even applies to the Internet Explorer browser in the Metro interface. There's something about it that has it taking my focus away from whatever I'm doing. It's a touch on the screen that doesn't register as it should or one that causes the accursed charms bar to fly out unintended.
It's the URL address bar at the bottom of the screen instead of at the top where every other browser/platform puts it. It's the way IE keeps open tabs hidden from view and makes me cause them to display to get where I need to be. It's the way that bar stays open at the top until I specifically make it get out of my way.
Many will say these are little things and I agree with that assessment. But they all add up to constantly grab my focus when I need to be doing stuff. Maybe I'm overly sensitive about this but that's the way it is.
I insist that any mobile device I use for work stay out of my way while I'm doing it. I don't want to be thinking about how to get something to happen, I want to just reach out and make it so. I don't want to stop and think if a control is on the left, the top, the right, or at the bottom of the screen. I want it to be totally intuitive so I am always thinking about my writing.
I am sure some will think I'm too sensitive or that I haven't given the Surface with Windows 8 enough time. That may be but I've given it far more time and effort than I've given any other platform and device I've used. It's left me in a continual state of frustration every time I've used the Surface to work and I just can't take it anymore.
It's not you Microsoft, it's me. I know you've given your best effort to make this relationship work but it's in vain. I wish the best for you in the future. You'll get along fine without me.

Exploit kits abuse yet another zero-day vulnerability in Java

Another zero-day vulnerability in Java has been discovered and is actively being exploited in the wild, according to a number of security researchers.
Java has experienced a number of exploits in the past few months, followed by a few months of silence. However, recent updates to a number of exploit kits have revealed that new holes exist in Java 7 Update 10.
A researcher going by the name @kafeine spotted the exploit in action on a site that they claim receives "hundreds of thousands of hits daily". Looking at the HTTP GET requests and their related headers, kafeine shows how a number of sites using the exploit are able to download files directly to the victim's machine, and execute actions such as installing ransomware.
According to the researcher, the exploit is already being used in the Cool EK, Nuclear Pack, Redkit, Blackhole, and Sakura exploit toolkits, making it easy for criminals to deploy and make money.
Kafeine notified AlienVault labs, which has also independently verified that the exploit exists.
"The Java file is highly obfuscated, but based on the quick analysis we did, the exploit is probably bypassing certain security checks, tricking the permissions of certain Java classes," the company wrote on its blog.
As for kafeine's claims that it is already being used in exploit toolkits, at least one other source is backing him on his findings. Security commentator and blogger Brian Krebs, who has a history of maintaining memberships and reporting on the activities of a number of underground forums, said that the Blackhole curator, who goes by the name Paunch, provided the feature in the newest version of the kit as a New Year's gift. Krebs also confirmed a similar announcement made by the creator of the Nuclear Pack toolkit.
Users that have still not disabled Java are advised to uninstall it or disable the plug-in from their browser if they believe they are at risk.

Homeland Security warns Java still poses risks after security fix

How to disable Java in your browser on Windows, MacThe U.S. Department of Homeland Security has reiterated its warning to Java users that the widely used Web plug-in still poses risks for Internet users, even after Oracle patched the software to prevent hackers from exploiting a zero-day vulnerability.

How to disable Java in your browser on Windows, Mac
Amid a serious security flaw in the latest version of Java 7, where even the U.S. Department of Homeland Security has warned users to disable the plug-in, here's how you do it
It comes as some security experts are warning that the new software -- Java 7 (Update 11), which was released on Sunday -- may not actually protect against hackers attempting to remotely execute code on user machines.
This code, security experts warn, could be used to acquire personal information and steal identities, or subscribe machines to 'botnets,' which can then be used to hit networks and Web sites with denial-of-service attacks.
Homeland Security said in an updated note that it is reiterating its advice it gave last week, in spite of Oracle updating the Java software to include a security fix that would prevent machines from being attacked by hackers.
The said: "Unless it is absolutely necessary to run Java in Web browsers, disable it [...] even after updating to [Update 11]."
Homeland Security warned on Friday that Internet users should disable the Web plug-in as soon as possible, to prevent being attacked by hackers or malware. While it's not uncommon for a government department to notify users of threats, advising users to actively disable or uninstall software is rare.
Java is used in more than 850 million PCs and Macs, along with billions of devices around the world, including cars, Blu-ray players, and mobile devices. The reason why the U.S. government stepped in, along with security experts and anti-malware companies, to warn users is because the zero-day vulnerability was being exploited in the wild by hackers and malware writers.
Experts and researchers have warned that fixing the zero-day exploit "could take two years." Rapid7 chief security officer HD Moore told the Reuters news agency that it could take this long for Oracle to fix the flaws found in Java -- not including any further exploits or vulnerabilities that are found in the meantime.
"The safest thing to do at this point is just assume that Java is always going to be vulnerable. Folks don't really need Java on their desktop," he said.
Update at 3:45 p.m. ET: Oracle told ZDNet in a statement: "Oracle has released Security Alert CVE-2013-0422 to address the flaw in Java software integrated with Web browsers. This is a blog that discusses when the bug was reported and actions that Java users need to take to secure their systems."

Windows RT's Achilles' heel: Cloud connections

If you work with multiple computers and devices, and especially if you collaborate with other writers, then the combination of SkyDrive and Office 2013 is fantastic. Got an email with an attached document or some notes you've started making? Save the file on SkyDrive (you can even do that from your phone in some cases); not only can you open it in Word on your PC and carry on working, but it will appear in the recent documents list on the File menu in Office 2013 so it's easy to find.

If you're working on a document with someone else, both of you can open it from SkyDrive and edit it at the same time. Yes, that's useful, because you're often adding different things to the document. You don't get the other person's changes until you both save the document, so you're not distracted by half-finished thoughts or false starts. And you can't change the paragraph someone else is already working in, so nothing gets overwritten. You can use Track Changes to see and revert changes, and if you work in Simple Markup view you won't feel like you're drowning in a sea of red-lined corrections and you can make changes without worrying about losing your favourite sentence. Don't worry about slips of the finger: SkyDrive has a recycle bin, so as long as you turn on the setting in Word to make a backup you can even go back and retrieve a paragraph the other person deleted without turning on Track Changes (or if they accepted their change before you got a chance to check it).
With SkyDrive syncing files to all your PCs as you change them, this can quickly become your natural way of working, although it's not so successful when you're working in a folder that someone has shared from their own SkyDrive because you can't get that to sync to your PC. (The SkyDrive team tells us that this is feedback they've heard a lot; they said the same about being able to sync only selected folders shortly before that feature was introduced, so fingers crossed that they're working on it.)
Windows RT: a sync hole
But when you use Windows RT, this effortless flow from device to device and person to person judders to a halt anytime you're not online. You can't sync files from SkyDrive to Windows RT (unless they're OneNote notebooks, which can sync and be available offline, meaning that this is perfectly possible on RT — even in Windows Store apps). The only way to take files with you is to open them in Office; any changes you made get synced back when you reconnect, making a mockery of the idea that Windows RT can't sync to SkyDrive. It's just that Microsoft hasn't enabled it.
I had fully expected sync to come to Windows RT via the Windows Store SkyDrive app that's preinstalled, as soon as the SkyDrive desktop app on Windows 8 added folder-selective sync. (Again, OneNote for Windows 8 syncs to and from SkyDrive so it's perfectly possible for a WinRT app to do that — it doesn't have to be a desktop sync tool.) I'm hoping that this is also just a matter of time, because it's the difference between the cloud being as inconvenient as any other file store you're not permanently connected to and a seamless workflow that I've come to depend on in just a few short months.
Of course, without a desktop SkyDrive sync tool in Windows RT, other apps are excluded as well — even when you're online. Want to save an image onto SkyDrive from Windows RT? You have to save it locally and then use the upload button in the SkyDrive app.
Annoyingly, you'll see SkyDrive folders you've used in Office showing up in Explorer and in the file dialogs of desktop programs like Paint and Notepad, in the Recent places section. Don't click on them though — just trying to open those folders will crash Explorer, Paint and Notepad every time, with the kind of Runtime error dialog that will make you think you're still using Windows 95. Crash Explorer this way and the whole desktop can lock up for a few seconds (it does come back again, so be patient rather than jumping straight to the power button).
skydrive-save-crash
Try to save a file to a SkyDrive folder from a desktop Windows RT app like Paint, and Explorer will crash with a distinctly retro error message.
I'm sure there's a perfectly good technical explanation for the crash and the vintage error message. But this is a bad experience that feels like the first real bug we've found in Windows RT, and it underlines the fact that cloud connections, which should be a strength for Windows RT, are a bit of an Achilles heel. Apart from OneNote, none of the cloud services you can use on Windows RT sync — and neither the YouSendIt app nor the website let you upload files from Windows RT.
(The website wants Flash and isn't on the Microsoft whitelist yet, and the app doesn't implement a file picker — that's not Microsoft's fault, and there's even a tool I could use to hack the whitelist file and add it myself. But it's another service that's part of my workflow that doesn't transfer to Windows RT. I'm a fan of YouSendIt because I can send files that are too large for email and have them automatically expire in a week, so I don’t have to go back and delete them by hand to stay under my 2GB limit. I'm sure I can find other ways of doing this, but I was happy with the workflow I already had and it's frustrating because I can't see a reason why it shouldn't just work.)
Windows RT should be the perfect way to take the cloud with you and do real work. Even for Office 2013 RT, that's just a pipe dream so far. Windows RT is a young platform that needs developers to support it to avoid these frustrations — and Microsoft needs to be the poster child for having all its services work fully. The good news: it's just software and it should be easy to change.

Update
Thanks to everyone who suggested their favourite cloud storage service. Several of them have Windows Store apps; but none of them to sync to give you offline access to files (or to allow you to create a file offline and have it automatically uploaded to the cloud service). Thanks for sharing the tips about mapping SkyDrive to a drive letter; for access when you're online it's useful and avoids the bug where selecting a SkyDrive folder in Explorer crashes the desktop application you select it from.
If you're wondering about using Office RT for commercial work, check out the many ways you can get commercial rights as covered by our ZDNet colleague Ed Bott. Several people noted the offline capabilities of Office RT; this works only for documents you open when you're online and leave open. If you have 19 chapters in the book you're writing, you could open all 19 documents before you get to somewhere where you don't have a connection, but if you restart your device you can't access those documents again until you're back online. Windows RT tablets are mobile devices and there are plenty of places where you don't get connectivity - like a transatlantic flight...
And for the record, I'm a fan of Windows RT; it's good enough that I want it to be better and support all the ways I need to work.