Ulyssesonline

the tech surfer

  • Home
  • About
  • Archives
You are here: Home / 2012 / Archives for January 2012

Archives for January 2012

January 31, 2012

Firefox 10 Now Available

Firefox has been cranking out updates faster than a speeding bullet. It seems like it was only last year, we were using Firefox 3.6, then 4, 5 and now Firefox 10. Give it a year or so, Firefox 20 will be out. So, what’s new with Firefox 10?

There’s a new forward button that doesn’t show up until you actually need it, a full screen API that allow you to build a web application that runs on full screen, an anti-aliasing for WebGL is now implemented, and CSS3 3D-Transforms are now supported.

These are just a few of the latest features of the famous Mozilla browser. You can check out the release notes yourself. Better yet, download the new Firefox 10 browser, and try it out yourself.

Filed Under: General Tagged With: 10, browser, features, firefox, release notes

January 30, 2012

Multiple Columns in HTML5 and CSS3

Creating a multiple column pages is so much easier now with HTML5 and CSS3 than was previously possible. Consider if you have a page with 200 unordered lists. The HTML markup for this would be something similar to this:

Unordered List

<ul>
<li>1</li>
<li>2</li>
and so on….
<li>200</li>
</ul>

<ul> <li>1</li> <li>2</li> and so on…. <li>200</li> </ul>

As you’ve noticed, I’ve abbreviated the markup. The page rendered will be long. It will take some scrolling down to get to the bottom of the page. The obvious solution for this page layout is to display the data in multiple columns.

Displaying two to three columns is ideal. You can add more if you like. It really depends on how you want to layout your page. How do we add multiple columns on our pages? It’s quite easy. You’ll be surprised how simple it is.

First, let’s add a class div to our markup. In this example, we will call our div “data.” Our markup will now look like the example below. It’s relatively unchanged, except for the div we’ve just added.

HTML5 Markup

<div class=”data”>
<ul>
<li>1</li>
<li>2</li>
and so on….
<li>200</li>
</ul>
</div>

<div class=”data”> <ul> <li>1</li> <li>2</li> and so on…. <li>200</li> </ul> </div>

CSS3 Markup

The magic is really in CSS. It’s ideal to place a width in your class div, unless your class div is already inside another div that already has a width limit. We can then set a limit how wide we want our columns widths and column gaps.

I’m using a div with a width of 500px because it goes well with the 150px columns widths and 25px column gaps. You probably already guessed, the column widths are how wide the columns are, and the gaps are the spaces between column widths.

.data {
  width:500px;
  -moz-column-width:150px;
  -webkit-column-width:150px ;
  -moz-column-gap: 25px;
  -webkit-column-gap: 25px;
}

.data { width:500px; -moz-column-width:150px; -webkit-column-width:150px ; -moz-column-gap: 25px; -webkit-column-gap: 25px; }

Give It A Try

Give it a try. Adding multiple columns in HTML5 and CSS3 is much easier than was previously thought. Create a simple page with some sample data. Add a class div and use the CSS3 multiple column styles to it.

Compatibility

The code has been tested with Mozilla Firefox, Google Chrome and Apple’s Safari. I haven’t tested it with any Internet Explorer. I’ll be curious if it works with IE 7, 8 or 9.

Here’s a demo of a page using the multiple columns.

Filed Under: CSS, General, HTML Tagged With: columns, css3, html5, multiple

January 29, 2012

Demand For Mobile Developers

The number of users accessing the Internet will double by 2016. The driving force behind the numbers are the emerging markets. Most of these new users will access the web via mobile phones.

Currently, there are 3 billion Internet users, according to Google. There are 200 million new Internet users every year. About 80% of the new users access the web via mobile phones.

What this means is, there are plenty of opportunities for mobile developers. Remember the good old days when blocks of ice were sold by the thousands by ice manufacturers. They made a handsome profit back then.

But, the arrival of the refrigerator forever changed the landscape. Companies simply folded and moved on to something more profitable. It will be the same story for many technologists today.

The shift is on. Mobile development will be on the rise. There will be a huge demand for mobile developers. It’s time for many of us to change gears.

Filed Under: General, PHP Tagged With: Internet, mobile

  • 1
  • 2
  • 3
  • …
  • 5
  • Next Page »

Copyright © 2003 - 2018