Apple’s new Maps app for iOS 6 is making headlines in tech news (some good, others not so savory) – but one thing is for sure, it does come with a lot of perks. One of the most amazing new feature from Apple’s new Map app is the Flyover Mode, which gives you an interactive, three-dimensional, bird’s eye view of the infrastructure and landscapes of major metro cities.

The mode is available on the iPhone 4S and iPad 2 and above, as well as the 5th-generation iPod Touch. For more features Maps has to offer, check out our round up of 9 new features available on the iOS 6.

In the meantime, let’s take a look at some of the cities captured on Apple’s Maps Flyover mode, upclose. If there is but one reason to keep this app on your iOS device, it will be this.

Read Also: Creative Remakes Of The World Map

London, England

Apple Headquater in Cupertino, California, United States

Chicago, Illinois, United States

The Colosseum, Rome, Italy

Manhattan, New York, United States

Miami Florida, United States

San Francisco, United States

Hollywood, California, United States

Milan Cathedral, Milan, Italy

Madrid, Spain

Sagrada Familia, Barcelona, Spain

Manchester, England

Seattle, Washington, United States

Sydney, Australia

Barcelona, Spain

Berlin, Germany

Birmingham, England

Copenhagen, Denmark

Las Vegas, Nevada, United States

Lyon, France

Melbourne, Australia

Montreal, Canada

Munich, Germany

Philadelphia, United States

Sacramento, California, United States

Toronto, Canada

Related posts:

1. Showcase of Beautiful Government Websites
2. 100 Imaginative “Cities of the Future” Artworks
3. 16 Wacky Apple Products You Can Only Imagine
4. 30 Amazing Photo Manipulation of Fire and Flames

If you’re a freelancer, regardless of whether you’re a web developer, designer or writer, then you have probably considered and understand why it takes a lot more discipline and motivation to stay focused on the task than let your mind (and fingers) wander elsewhere.

There seems to be just too many distractions when you have the freedom to manage your own time, but time is especially important for freelancers who are mostly paid for results rather than time spent working.

That is why time-tracking tools can be lifesavers for freelancers; they serve as a reminder, disciplinary assistant and motivation booster for both solo freelancers and home-based work teams. Even better, many time management tools often come with financial management functions, such as generating invoices for your clients.

Here’s 5 time-tracking apps which will help you be a more disciplined, productive and efficient freelancer:

Recommended Reading: Productivity Tips for Freelance Web Designers

1. On the Job

On the Job lets you track time with an automatic idle time detection, and sits quietly on your menu bar. Every time you start the timer, a new session will be automatically created. It can also generate invoices based on customizable hourly rates.

With On the Job, you can organize your clients’ information by their names, addresses, their hourly rates as well as the different currencies for different clients. This handy desktop tool costs $39.95.

2. iBiz

iBiz lets you sync your projects and billing details to iCal, display statistical graphs of your work, as well as track and generate reports to tabulate the time spent on different applications. It also lets you control timers easily with the desktop widget.

Managing time and expenses with iBiz is a breeze as it also tracks overdue payments and notify you about incoming invoices. If you need to back up your data frequently, there is a simple built-in command that enables quick backups and restorations. Fork out $39.99 if you want to own this desktop tool.

3. Klok

Klok features a visual display of your time and tasks, and allows you to customize the organization of your clients and projects. It automatically begins a new timer when you start working on a different task, and you can always adjust the time later.

You can also connect Klok to other time-tracking apps, such as Harvest and Freshbooks (more on them later), for added functionality. Other Klok functions include timesheets that can be exported, generation of invoices and dashboard reporting. One of the cheaper desktop tools on the list, it costs $15.99.

4. Harvest

Harvest is a versatile, convenient time management tool usable on multiple platforms: Mac or PC, as a mobile widget or app. It also compiles neat reports so you can see the time distribution for your work (and your team’s). You can also create a quick invoice which retrieves project hours and expenses instantly.

Harvest comes in both desktop and web tools in 3 pricing plans: Solo [$12] allows up to 3 users only, Basic [$40] allows up to 10 users and Business [$90] allows unlimited users.

5. Freshbooks OS X Time Tracker Widget

Probably the best choice if you’re looking for a free time-tracking application, Freshbooks is both a time- and finance-management tool. You can track team time sheets, set timers and time limits, or handle accounting tasks from the Freshbooks desktop widget.

The basic Freshbooks web and desktop tool comes free but you can only manage 3 clients at the same time; upgrade to a paid plan for $14/month and you can manage up to 25 clients at the same time.

More Time-tracking Tools

Can’t get enough of the time-tracking apps? Here’s another 10 to help keep you productive:

1. Time Edition – Keeps track of time and statuses of projects with a simple display, ideal for quick glances. [Free]
2. Minco – Tracks time and shoots reminders to your synced iPhone. [$14.99]
3. Timepost – Detects idle time automatically, and integrates easily with Basecamp, activeCollab and many more. [$39.00]
4. Office Time – Records time and expenses incurred, prepares invoices and summary graphs. [$47.00]
5. Cashboard – Fantastic for the freelancer, tracks time and expenses, handles invoices and even online payments. [Free or $10+/month]
6. Rescue TIme – Tracks time spent on apps and websites, ranks your productivity and blocks distracting websites. [Free Lite or $6/month]
7. Slife – Keeps tabs on your usage, has real-time tracking and provides visual analytics, depending on your subscribed plan. [$5/month or $10/month]
8. Toggl – Easy to use for managing time and enhancing productivity, especially with team members. [$5/user monthly]
9. Tick – Tracks time, organizes projects and generates reports with this time management tool. [Up to $79/month]
10. SlimTimer – Creates tasks, shares statuses with your team, and exports timesheet reports. [Free]

Related posts:

1. Freelancing: 7 Signs It’s Time to Let Your Client Go
2. 10 Things Freelancers Don’t Like Hearing From Clients
3. Freelancers: 5 Ways To Lose Your Clients
4. Freelancers: How to Work Better with Your Clients

HTML5 brings many features and improvements to web forms, there are new attributes and input types that were introduced mainly to make the lives of web developers easier and provide better experience to web users.

So, in this post we are going to create a login page using HTML5 forms to see how the new added features work.

• Demo
• Download Source

HTML5 Input

Let’s take a look at the following markup.

  <section class="loginform cf">  <form name="login" action="index_submit" method="get" accept-charset="utf-8">  	<ul>  		<li><label for="usermail">Email</label>  		<input type="email" name="usermail" placeholder="yourname@email.com" required></li>  		<li><label for="password">Password</label>  		<input type="password" name="password" placeholder="password" required></li>  		<li>  		<input type="submit" value="Login"></li>  	</ul>  </form>  </section>  

If you have been working with HTML forms before, this will look familiar. But, you’ll also notice differences there. The inputs have placeholder and required attributes, which are new attributes in HTML5.

Placeholder

The placeholder attribute allows us to give initial text in the input that will disappear when it is in a focus state or being filled in. Previously, we used to do it with JavaScript, but now it becomes a lot easier with this new attribute.

Required Attribute

The required attribute will set the field to be mandatory and thus should not be left blank before the form is submitted, so when the user hasn’t filled in the field, the following error will appear.

New selector is also introduced in CSS3, :required to target fields with required attribute. Here is an example;

  input:required {  	border: 1px solid red;  }  

Email Input Type

The first input type is email which is actually a new field type added in HTML5 as well. The email type will give basic email address validation in the field. When the user doesn’t fill the field with an email address, the browser will show the following notification;

Using email input types can also give better experience for mobile users, like iPhone and Android users, where it will show the email-optimized on-screen keyboard with a dedicated “@” button to help type email address faster.

The Downsides

The new form features offered in HTML5 are powerful and easy to implement, but they are still lack in some areas. For instance;

The placeholder attribute, is only supported in modern browsers — Firefox 3.7+, Safari 4+, Chrome 4+ and Opera 11+. So, should you need it to work in unsupported browsers, you can use this polyfills in conjunction with Modernizr.

The same thing goes with the required attribute. The error notification cannot be personalized, the error will remain “Please fill out this field” rather than “Please fill out your First Name”, this attribute support is also limited to the latest browsers.

So, using JavaScript to validate the required field is (so far) a better option.

  function validateForm()  {  var x=document.forms["login"]["username"].value;  if (x==null || x=="")    {    alert("Please fill out the username");    return false;    }  }  

Styling the Forms

Alright, now let’s decorate our login form with CSS. First we will give the background a wood pattern in the html tag.

  html {  	background: url('wood_pattern.png');  	font-size: 10pt;  }  

Then, we need to remove the default padding and margin in ul tag that wraps the entire inputs and floats the li to the left, so the inputs will be displayed horizontally, side by side.

  .loginform ul {  	padding: 0;  	margin: 0;  }  .loginform li {  	display: inline;  	float: left;  }  

Since we float the li, the parents will collapse, so we need to clear things around the parent with the clearfix hack.

  label {  	display: block;  	color: #999;  }  .cf:before,  .cf:after {      content: "";       display: table;  }    .cf:after {      clear: both;  }  .cf {      *zoom: 1;  }  :focus {  	outline: 0;  }  

In CSS3 we have the negation selector. So, we will use it to target inputs other than the submit type, which in this case will target the email and password input;

  .loginform input:not([type=submit]) {  	padding: 5px;  	margin-right: 10px;  	border: 1px solid rgba(0, 0, 0, 0.3);  	border-radius: 3px;  	box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.1),   				0px 1px 0px 0px rgba(250, 250, 250, 0.5) ;  }  

Lastly, we will give a little style decoration for the Submit button, as follows.

  .loginform input[type=submit] {  	border: 1px solid rgba(0, 0, 0, 0.3);  	background: #64c8ef; /* Old browsers */  	background: -moz-linear-gradient(top,  #64c8ef 0%, #00a2e2 100%); /* FF3.6+ */  	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#64c8ef), color-stop(100%,#00a2e2)); /* Chrome,Safari4+ */  	background: -webkit-linear-gradient(top,  #64c8ef 0%,#00a2e2 100%); /* Chrome10+,Safari5.1+ */  	background: -o-linear-gradient(top,  #64c8ef 0%,#00a2e2 100%); /* Opera 11.10+ */  	background: -ms-linear-gradient(top,  #64c8ef 0%,#00a2e2 100%); /* IE10+ */  	background: linear-gradient(to bottom,  #64c8ef 0%,#00a2e2 100%); /* W3C */  	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#64c8ef', endColorstr='#00a2e2',GradientType=0 ); /* IE6-9 */  	color: #fff;  	padding: 5px 15px;  	margin-right: 0;  	margin-top: 15px;  	border-radius: 3px;  	text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3);  }  

That’s it, now you can try the login form from the following links.

• Demo
• Download Source

Final Words

In this tutorial we looked into a few new features in HTML5 forms:placeholder, required and email input types to create a simple login page. We have also come through the downsides of the attributes, so we can decide a better approach to be applied.

In the next post we will look into another new HTML5 form features, so stay tuned.

Related posts:

1. HTML5 Tutorial: How to Build a Single Product Page
2. Creating A Stacked-paper Effect Login Form
3. How to Create An Ajax-Based HTML5/CSS3 Contact Form
4. Creating Stylish Responsive Form With CSS3 and HTML5