Are you looking for beautiful high resolution wallpapers for your desktop? Take a look at this collection of my preferred relaxing wallpapers from InterfaceLift.comInterfaceLift.com is a great resource to find high resolutions wallpapers, themes and icons.
1. The Salt Desert "Salar The Uyun" in Bolivia
By Joel AntunesDescription: "This is a beautiful picture taken by NIR, a good friend of mine. I made some edits on it to make it perfect. It looks like is a lake but isn't!"
Download this wallpaper
2. All That Is Left
By BEPhotographicDescription: "All that is left of the mighty Hamelin Bay jetty."
Download this wallpaper
3. First of May
By panemoyDescription: "One of my favorite photos, game of shadows and light. Vojvodina, Serbia..."
Download this wallpaper
4. Panoptic
By NaOHDescription: "I took this before rushing off to school one morning. I almost (almost!) skipped class to keep shooting, but I got what I was looking for so I suppose there wasn't any point. Nikon D300 and AF-S 18-200 VR."
Download this wallpaper
5. Smooth Evening
By Joel AntunesDescription: "This was taken after sunset. The blue cool color after the sunset was amazing and the clouds were moving quite fast, time to get a shot! I composed, breaking the rules! I targeted this "pier" which i guess is used by the fisherman at night."
Download this wallpaper
6. Durdle Door, Jurassic Icon, Dorset
By Joel AntunesDescription: "This is my favorite landscape at the moment, and I'm exclusively sharing it with you, Enjoy."
Download this wallpaper
7. Anse Source d'Agent
By AmeckeDescription: "Seychelles."
Download this wallpaper
8. Auckland Harbour Bridge
By Chris GinDescription: "Auckland Harbour Bridge at night."
Download this wallpaper
9. Chicago Skyline
By benisntfunnyDescription: "The Chicago Skyline from North Avenue Beach."
Download this wallpaper
10. El Capitan
By matt mosherDescription: "Words really can't describe. You just have to go there."
Download this wallpaper
Yesterday my friend Nick asked to me some suggestion to design an original weekly timeline for a web application which he is developing. I suggested to use the following animated timeline which I implemented reusing the code of my versatile slider and now I want to share with you.
This tutorial explains how to design an elegant and animated weekly timeline, with daily annotations, you can customize and reuse quickly in your web projects. This is the result:
Take a look at the live preview and download the source code.
Download this tutorial
Live Preview
Add this code:
...then add a new layer slider-button to create two buttons to move, to the left and right, the timeline contained into the div slider-stage:
Now, take a look at the timeline structure. It's exactly the same I used in my slider (for more detailed information read this post):
Each <li> element is "a day". Copy this code into the slider-stage DIV:
Now, for each day, you have to create this structure:
I used some CSS classes and <p> tag for daily "annotations" and this is the code:
You can use PHP or another server-side language to get dinamically annotations regarding a specific date.
Now, copy and paste this code below the previous line of code to enable scrolling features (you can also copy this file in an external Js file and import it into the page):
That's all. Download the source code or take a look at the live preview. Add a comment for suggestions or other information.
Download this tutorial Live Preview
This tutorial explains how to design an elegant and animated weekly timeline, with daily annotations, you can customize and reuse quickly in your web projects. This is the result:
Take a look at the live preview and download the source code.
Download this tutorial
Live PreviewHTML structure
I reused the same structure of my versatile slider: a layer (DIV) and a simple list (UL). Create a layer which is the container of the timeline:
<div id="slider-stage">
</div>
</div>
...then add a new layer slider-button to create two buttons to move, to the left and right, the timeline contained into the div slider-stage:
Copy and paste this code into your page after the div slider-stage:
<div id="slider-buttons">
<a href="#" id="previous">Previous</a>
<a href="#" id="next">Next</a>
</div>
<a href="#" id="previous">Previous</a>
<a href="#" id="next">Next</a>
</div>
Now, take a look at the timeline structure. It's exactly the same I used in my slider (for more detailed information read this post):
Each <li> element is "a day". Copy this code into the slider-stage DIV:
<div id="slider-stage">
<ul id="myList">
</div>
<ul id="myList">
<li > </li>
<li > </li>
<li > </li>
<li > </li>
</ul><li > </li>
<li > </li>
<li > </li>
</div>
Now, for each day, you have to create this structure:
I used some CSS classes and <p> tag for daily "annotations" and this is the code:
<li>
<div class="day">1
<span class="day-text">Monday</span>
</div>
<div class="month">February</div>
<div class="year">2009</div>
<p>Dinner with Sara</p>
</li><span class="day-text">Monday</span>
</div>
<div class="month">February</div>
<div class="year">2009</div>
<p>Dinner with Sara</p>
You can use PHP or another server-side language to get dinamically annotations regarding a specific date.
JavaScript Code
Now, take a look at this simple script to enable slider features I wrote in this post. I used MooTools to implement this script so, you have to add this link into the <head> tag of the page where you want to use this slider:<script type="text/javascript" src="mootools.svn.js">
</script>
</script>
Now, copy and paste this code below the previous line of code to enable scrolling features (you can also copy this file in an external Js file and import it into the page):
<script type="text/javascript">
window.addEvent('domready', function(){
// Declaring increment vars
var totIncrement = 0;
var increment = 214;
var maxRightIncrement = increment*(-6);
// FX var
var fx = new Fx.Style('slider-list', 'margin-left', {
duration: 1000,
transition: Fx.Transitions.Back.easeInOut,
wait: true
});
});
</script>// Declaring increment vars
var totIncrement = 0;
var increment = 214;
var maxRightIncrement = increment*(-6);
// FX var
var fx = new Fx.Style('slider-list', 'margin-left', {
duration: 1000,
transition: Fx.Transitions.Back.easeInOut,
wait: true
});
// Previous Button
$('previous').addEvents({
'click' : function(event){
if(totIncrement<0){
totIncrement = totIncrement + increment;
fx.stop()
fx.start(totIncrement);
}
});
// Next Button
$('next').addEvents({
'click' : function(event){
if(totIncrement>maxRightIncrement){
totIncrement = totIncrement - increment;
fx.stop()
fx.start(totIncrement);
}
}
}) $('previous').addEvents({
'click' : function(event){
if(totIncrement<0){
totIncrement = totIncrement + increment;
fx.stop()
fx.start(totIncrement);
}
});
// Next Button
$('next').addEvents({
'click' : function(event){
if(totIncrement>maxRightIncrement){
totIncrement = totIncrement - increment;
fx.stop()
fx.start(totIncrement);
}
}
});
That's all. Download the source code or take a look at the live preview. Add a comment for suggestions or other information.
Download this tutorial Live Preview
This week my friend Greg from Submit CSS proposes a new list of beauty websites for your inspiration. If you love the clean design of Apple website take a look at this collection of 10 stunning Mac software websites.
1. Checkout App (http://www.checkoutapp.com/)Checkout is a powerful, easy to use point of sale system for the Mac. You can use Checkout to take orders, make sales, print invoices and accept payments.
2. Versions (http://www.versionsapp.com/)Versions prides itself as being the first easy to use Mac OS X Subversion client
3. Billings App (http://www.billingsapp.com/)Billings is an application for the mac which allows "professional time billing for anyone."
4. Pixelmator (http://www.pixelmator.com/)Pixelmator is a beautifully designed, easy-to-use, fast and powerful image editor for Mac OS X which claims to have everything you need to create, edit and enhance your images.
5. Delicious Library (http://www.delicious-monster.com/)The Delicious Library Application allows you to catalog your books, movies, music, software, toys, tools, electronics, & video games.
6. Realmac Software (http://www.realmacsoftware.com/)Realmac Software was founded in 2002 and remains focused on developing exceptionally useful and easy to use software for Mac OS X.
7. Silverback (http://silverbackapp.com/)Silverback has "spontaneous, unobtrusive usability testing software for designers and developers."
8. Css Edit (http://www.macrabbit.com/cssedit/)With Css Edit, you can design beautiful, innovative and fast-loading web sites… with a beautiful, innovative and fast app.
9. Panic's Coda (http://www.panic.com/coda/)Panic's Coda prides itself on being a "one window development" app. You can do numerous web development tasks all in this one application.
10. Cultured Code (http://culturedcode.com/)Cultured Code is a software company who has released such products as Things, Things for iPhone, and Xyle Scope.
Longtime I was looking for an ultra portable alternative to my iMac to use mostly when I am not at home. My first intention was to buy a MacBook Air: great design, great quality... but also "great" price. Some week ago a friend of mine suggested to me to take a look at some Netbooks, in particular at the Compaq Mini, and I remained really impressed by this litte jewel. So, yesterday I decided to buy it.First impressions: I can say the Compaq Mini is not a simple low-cost pc (399 EUR versus 1.699 EUR of a MacBook Air!) to use only to connect you to the internet. Compaq Mini is a powerful netbook you can use to do everything you do with your primary desktop PC or notebook. These are some of main characteristics:- Processor 1.6GHz Atom N270
- 1GB RAM
- 60GB drive
- 1,024 x 600 display
- Bluetooth
- WiFi
- Integrated webcam
- Built-in microphone
- Windows XP
The first impression is to have a "micro" PC with all features of a normal notebook or desktop PC. You can use all your preferred applications such as Dreamweaver, Photoshop, Excel, Word, Outlook... without problems. The display is very clean and luminous, perfectly readable. This is a screenshot of my desktop:
Take a look at the full size picture
Let me do this little clarification: price difference between Compaq Mini and MacBook Air is obviously motivated by a lot of factors. But if you are just looking for a portable alternative to your primary computer... I think a MacBook Air is very too expensive, considering you can have "same" functionalities with a considerably lower price in a low-cost pc.
Applications: In these hours I'm stressing my new netbook working with some applications I often use in my work and to update my blog with new posts and tutorials. I installed old versions of Photoshop and Dreamweaver (Photoshop CS and Dreamweaver 8) I used some year ago to design websites, and Microsoft Office 2007 which I bought in order to use it on my iMac with a version of Windows XP I never installed :). System response is awesome. You can work with Dreamweaver 8 and Photoshop CS at the same time without problems.
I'm writing this post on Blogger using Internet Explorer 8 and at the same time using Photoshop to modify images and Media Player 11 to listen music from a web radio. I am not noticing any slowdown or delay.
Microsoft Office 2007: It's a pleasure to use Office applications in this little netbook. Word, Excel and Outlook work perfectly. If you prefer to use open source alternatives try OpenOffice, but if you have Microsoft Office I suggest you to install and use it. It's without doubt the best office suite in circulation and is not so "heavy" to compromise system performances.
Mobile Phone integration: integration with Mobile Phone is very simple. I'm using ActiveSync 4.5 to syncronize contacts, messages, activities and everything with my Samsung SGH-i780 mobile phone which I also use to connect me to internet (if there is not a Wi-Fi hotspot available), and browsing the Net with the same speed of an ADSL connection. In this way I can work to my blog, talk with my friends using Skype, take a look at my banking account and make a lot of other things in every place where I am.
After all, Compaq Mini is an ultra portable and convenient alternative with a killer price to carrying your primary notebook PC everywhere you go. If you want to know more info about this little jewel I suggest you to take a look at the HP official page.
Datepickers and calendars are elements you need often to implement in web applications with some advanced features. Starting from zero can be a very hard work, expecially if you don't have big familiarity with Javascript.This list include some of my preferred simple to implement and customize datepickers and calendars, for beginner and professional web developers. I suggest you to try in order to simplify your developing process and save a lot of time reusing code already written. The result is really amazing!
1. jQuery datepickerThis is a default datepicker implemented using jQuery UI which is tied to a standard form input. The calendar opens in a small overlay onFocus and closes automatically onBlur if a date if selected. You can also use the keyboard to drive the datepicker:
- page up/down - previous/next month
- ctrl+page up/down - previous/next year
- ctrl+home - current month or open when closed
- ctrl+left/right - previous/next day
- ctrl+up/down - previous/next week
- enter - accept the selected date
- ctrl+end - close and erase the date
- escape - close the datepicker without selection
2. jQuery Date Picker plugin
This is an other interesting jquery datepicker with a lot of options and easy to fit in your web application.
- Flat mode - as element in page
- Multiple calendars in the component
- Allows single, multiple or range selection
- Mark dates as special, weekends, special days
- Easy to customize the look by changing CSS
- Localiation for months' and days' names
- Custom day to start the week
- Fits into the viewport
3. Calendar MooTools
Calendar is a Javascript class that adds accessible and unobtrusive date-pickers to your form elements. This class is a compilation of many date-pickers implemented and completely re-written for Mootools.
This class include all the features that have been most useful while streamlining the class itself to keep it as small as possible. Take a look about how Calendar might enhance the accessibility, usability and validation of form elements on your website.
4. YUI CalendarYUI Calendar uses Yahoo! UI library to implement a default calendar you can use as datepicker. It's very simple to implement, highly customizable and the final result is clean and elegant.
This basic example walks you through the steps needed to get a default Calendar up and running. It covers the set of file dependencies which need to be included as well as the basic markup and JS code required to get you started.
5. Unobtrusive Date-Picker WidgetThis elegant datePicker is accessible using the keyboard, requires no embedded JavaScript blocks, uses no pop-up windows and is suitable for use within documents served as application/xhtml+xml. Take a look here for the demo.
A quick feature list:
- Fully keyboard accessible
- Multiple date formats and date dividers supported
- Unobtrusive and nameSpace friendly
- Fully skinnable with CSS
- Both upper and lower date limits can be set
- Certain days of the week can be disabled
- Certain, dates can be disabled/enabled (and wildcards used to stipulate the dates in question)
- Includes “smart” localisation (16 languages currently available)
- Bespoke days of the week can be highlighted
- Works with single text inputs, split text inputs or select lists
- It’s free to use, even commercially (Released under a CC share-alike license)
6. ScalScal is a simple, javascript calendar/date picker based on the Prototype js library, simple to implement and to customize using default themes or creating custom themes changing CSS some lines of CSS code.
7. Ext JS Extension:Calendar
Ext JS Extension:Calendar is a daily, weekly, monthly, quarterly, yearly calendar extension which you can use to implement very complex applications Google Calendar or Outlook Calendar like.
8. jPintjPint is a set of libraries designed by Journyx to allow developers to build web-based applications that look and feel as much like native iPhone apps as possible, while retaining the ability for those apps to be used by people who, for whatever reason, don't actually have an iPhone handy. Take a look at this nice iPhone like calendar.
Are you looking for any interesting and beautiful Web User Interface libraries for your next web site or Rich Internet Application ? Take a look at this list with ten WUI I suggest you to try in order to simplify your work and develope faster beautiful and usable user interfaces.
1. IT Mill Toolkit
IT Mill Toolkit is an open-source framework, providing widgets and tools for the development of Rich Internet Applications (RIAs). Deliver web applications without worrying about incompatibilities of web browsers, DOM or JavaScript by using standard Java tools.
2. LivePipe UI
LivePipe UI is a suite of high quality widgets and controls for web 2.0 applications built using the Prototype JavaScript Framework. Each control is well tested, highly extensible, fully documented and degrades gracefully for non JavaScript enabled browsers where possible
3. Iwebkit iPhone/iPod touch framework
Iwebkit is the revolutionnairy kit used to create high quality iPhone and iPod touch websites in a few minutes. In the first 4 months of it's existance the pack has greatly evolved from a basic idea to a project that has reached worldwide fame!
4. Jitsu
Jitsu contains an integrated set of tools to enable developers to build and deploy sophisticated user interfaces for web applications. These include an Xml markup language, page compiler, data binding engine, JavaScript runtime, control library, runtime inspector, animation engine, cross-platform library, Ajax, and back button support.
5. MochaUI
MochaUI is a web applications user interface library built on the Mootools JavaScript framework.Uses: web applications, web desktops, web sites, widgets, standalone windows and modal dialogs.
6. Echo Web Framework
Echo is an open-source framework for developing rich web applications. From the developer's perspective, Echo behaves as a user interface toolkit--like Swing or Eclipse SWT. AJAX technology is employed to deliver a user experience to web clients that approaches that of desktop-based applications.
7. The Yahoo! User Interface Library (YUI)
The YUI Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX. YUI is available under a BSD license and is free for all uses.
8. Sigma Ajax UI builder
Written in javascript and PHP, SigmaVisual is web based visual AJAX UI builder for professional developers. Developers save their time in building up prototype as well as real web applications. TreeBar, TreeGrid, Layout, Menu are supported.
9. WUI Web UI Framework
WUI (Web User Interface) is an MVC framework for writing web UIs in a single language: Java. Write web apps with components, widgets & events, not JSPs. Runs in any servlet 2.3 container. Similar to Model 2 / Struts, only better. Apache-style license.
10. Butterfly Web UI
Butterfly Web UI is a component oriented web framework for Java, like Wicket or Tapestry. The main advantage compared to these frameworks is that Butterfly Web UI integrates naturally with Butterfly DI Container, giving you a state-of-the-art dependency injection container to help you structure and decouple the internal components of your web applications.
Add a comment to suggest other interesting WUI. Thanks!
1. IT Mill ToolkitIT Mill Toolkit is an open-source framework, providing widgets and tools for the development of Rich Internet Applications (RIAs). Deliver web applications without worrying about incompatibilities of web browsers, DOM or JavaScript by using standard Java tools.
2. LivePipe UILivePipe UI is a suite of high quality widgets and controls for web 2.0 applications built using the Prototype JavaScript Framework. Each control is well tested, highly extensible, fully documented and degrades gracefully for non JavaScript enabled browsers where possible
3. Iwebkit iPhone/iPod touch frameworkIwebkit is the revolutionnairy kit used to create high quality iPhone and iPod touch websites in a few minutes. In the first 4 months of it's existance the pack has greatly evolved from a basic idea to a project that has reached worldwide fame!
4. JitsuJitsu contains an integrated set of tools to enable developers to build and deploy sophisticated user interfaces for web applications. These include an Xml markup language, page compiler, data binding engine, JavaScript runtime, control library, runtime inspector, animation engine, cross-platform library, Ajax, and back button support.
5. MochaUI MochaUI is a web applications user interface library built on the Mootools JavaScript framework.Uses: web applications, web desktops, web sites, widgets, standalone windows and modal dialogs.
6. Echo Web Framework
Echo is an open-source framework for developing rich web applications. From the developer's perspective, Echo behaves as a user interface toolkit--like Swing or Eclipse SWT. AJAX technology is employed to deliver a user experience to web clients that approaches that of desktop-based applications.
7. The Yahoo! User Interface Library (YUI)The YUI Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX. YUI is available under a BSD license and is free for all uses.
8. Sigma Ajax UI builder
Written in javascript and PHP, SigmaVisual is web based visual AJAX UI builder for professional developers. Developers save their time in building up prototype as well as real web applications. TreeBar, TreeGrid, Layout, Menu are supported.
9. WUI Web UI FrameworkWUI (Web User Interface) is an MVC framework for writing web UIs in a single language: Java. Write web apps with components, widgets & events, not JSPs. Runs in any servlet 2.3 container. Similar to Model 2 / Struts, only better. Apache-style license.
10. Butterfly Web UI
Butterfly Web UI is a component oriented web framework for Java, like Wicket or Tapestry. The main advantage compared to these frameworks is that Butterfly Web UI integrates naturally with Butterfly DI Container, giving you a state-of-the-art dependency injection container to help you structure and decouple the internal components of your web applications.
Add a comment to suggest other interesting WUI. Thanks!