iphone4: inspiration

Showing posts with label inspiration. Show all posts

Sunday, February 8, 2009

Ultra small code to drag everything in HTML pages

A frequent question I receive from my readers is about how to implement a simple script to drag elements in a web page. So in this post I want to illustrate the simplest method I know and use to drag everything in HTML pages, using just three rows of Javascript code.

In this post I provided a very basic script quick to reuse and customize in your web projects (in the live preview I added some little additional features respect the content of this tutorial). This is the result:

Download this tutorial

Live preview

HTML code: HTML code is very simple. You have to add a main layer with an ID (I used "draggables") and some DIV layers inside that layer. In this way all layers contained inside the layer "draggables" will be draggable when you select them. This is the structure:

Copy and paste this code in your page:

<div id="draggables">
<div>Some content Here...</div>
<div>Some content Here...</div>
<div>Some content Here...</div>
</div>

JavaScript code: Now take a look at this simple code which enable drag features. Before all add a link to MooTools farmework in the <head> tag of the page:

Now, copy and paste this simple unobtrusive code:

window.addEvent('domready', function(){
$('#draggables div').each(function(drag){
new Drag.Move(drag);});
});

</script>

Simple no? Just in three rows! In this way when you click on a div element contained inside the layer #draggables it will be draggable. In this tutorial I used DIV layers for my draggable elements but you can use every tag you want (p, h1, h2, ul, li....). The only thing you have to change is HTML code and DIV - with the tag you use (p, h1, h2, ul, li....) - in this line:

$('#draggables div').each(function(drag)

You can also add a custom style to your draggable elements using a simple CSS class I called "drag". For example, change the previous code HTML with the following:

<div id="draggables">
<div class="drag">Some content Here...</div>
<div class="drag">Some content Here...</div>
<div class="drag">Some content Here...</div>
</div>

...and CSS code could be something like this:

.drag{

border:solid 6px #DEDEDE;
background:#FFF;
width:200px;
height:150px;
...

}

That's all! Try it and download the source code ready to use in your porject.

Download this tutorial

Live preview

Sunday, February 1, 2009

Useful tips to design horizontal website layout

In the past weeks I received some messages from my readers which asked to me to dedicate a post about horizontal website layout. So in this tutorial I want to illustrate some useful tips to design this kind of layouts using CSS and HTML code, also adding a nice animated scrolling effect using JavaScript.

A little introduction: Normally websites have a vertical structure with a fixed width and a variable height which depends from the lenght of the content you have within the main layer:

The structure of an horizontal layout is a little bit different respect the previous one: it has a fixed height and a variable (or fixed) width, for example:

How you can do that? It's very simple: create a container layer like this:

...and define its layout using CSS code in the following way (choosing an appropriate width and height):

#container{

width:3000px;
height:400px;

}

Now, within the layer #container, create some sections to add the content. You can use a simple <ul> list with some <li> elements like these:

HTML code could be something like the following code:

</ul>
</div>

You can add other sections simply adding a new <li> element into the list. The related CSS code is:

#maincontent{

border:0;
margin:0;
padding:0;

}

#maincontent li{

line-style:none;
width:240px;
height:380px;
padding:10px;
float:left;
}

Background with fixed position: If you want to add a background picture which doesn't scroll with the main content remember to use a fixed position attribute in your CSS code. For example, if you don't use position:fixed the result, scrolling horizontally the page, will be like this:

But if you use position:fixed your background will remain in the same position on the browser window:

CSS code is something like this:

body{

background:url(mybg.jpg) no-repeat fixed;

}

Animated scrolling: If you want to use an horizontal layout for your website you can add this nice feature to scroll automatically in horizontal your page in a specific position (take a look at this example). How you can see in the previous example, each link send the user to a specific section with a nice animated effect.

To implement this effect I suggest you to try Marco Rosella's Horizontal Tiny Scrolling a very useful script to implement animated horizontal scrolling effect. The only thing you have to do is to add this script in the <head> tag of your page:

...and anchor tags into each <li> element:

HTML code could be something like the following:

<li >
<a name="p1" id="p1"></a>
Starting Box
</li>
<li >
<a name="p2" id="p2"></a>
Box 2
</li>


<li >...</li>

<li >
<a name="p10" id="p10"></a>
Ending Box
</li>

</ul>
</div>

Now add this layer with scroll buttons:

...and use this CSS code to fix its position on the browser windows:

#scroll-buttons{position:fixed;}

Add the following links to scroll the page to a specific position:

<a href="#p1">Go to the section 1</a> |
<a href="#p2">Go to the section 2</a> |
<a href="#p3">Go to the section 3</a> |
<a href="#p4">Go to the section 4</a> |
...

That's all! Download the source code ready to use in your web projects and take a look at this essential live preview:

Download this tutorial

Live preview

Horizontal scrolling websites Showcase

Take a look at these horizontal scrolling websites to take inspiration:

- shn.me - Innovation make creativity
- hasrimy.com - A professional web designer
- Dean Oakley - Freelance web designer

Tuesday, January 27, 2009

10 Stunning Mac software websites

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.

Tuesday, January 13, 2009

10 Stunning websites to inspire your webdesign style in 2009

If you are looking for new ideas for the design of your next web project, follow the suggestions of my friend Greg from Submit CSS that this week proposes a collection of 10 stunning websites which can help you to find the right inspiration!

1. Carbonica (http://www.carbonica.org/)
Carbonica helps you combat climate change by reducing your carbon footprint.

2. Matt (http://www.themattinator.com)
The Carsonified team built Matt to see if it was possible to launch a simple web app in four days - everything from design, to development to marketing.

3. Satsu Design (http://www.satsu.co.uk/)
Satsu is a multi-disciplinary design agency based offshore on the Isle of Man.

4. Sawyer Hollenshead (http://sawyerhollenshead.com/)
Here you can find all of his most recent work, which includes web design and photography.

5. We Are Not Freelancers (http://www.wearenotfreelancers.co.za/)
All things web design through the eyes of David and Marc Perel.

6. BootB (http://www.bootb.com/en/)
BootB is an online way to find the best marketing concepts and strategies, graphic design solutions or ideas for advertising campaigns by addressing the unlimited number of creative talents from all over the Planet.

7. Pointless Ramblings (http://pointlessramblings.com/)
Pointless Ramblings is run by Nick Barrett who works as a freelance web design/developer and is also a student.

8. Mel Kadel (http://www.melkadel.com/)
The online professional portfolio of Mel Kadel.

9. Edgepoint Church (http://edgepointchurch.com/)
EdgePoint Church presents themself as an "awesomely different" kind of church in Powell, Tennessee.

10. Jason Julien (http://www.jasonjulien.com/)
Jason Julien is an award winning web designer and interactive creative director who has worked for "small businesses and big businesses and the middlemen in between."

Thursday, September 18, 2008

10 Beautiful icons set for web developers and designers

This post contains a collection of 10 beautiful and very popular icons set useful to be used in your web applications or your websites.

1. Web development icons Download
Web development icons is a set with 60 free icons in web 2.0 style (24x24). These icons are free to use in any kind of project unlimited times.

2. Function free icon set Download
A great collection designed by Liam McKay. All icons are free for personal non-commercial use:

3. Pixelicious Download
150 beautiful pixel icons designed by PixelResort:

4. Social Web Button Download
Another great collection of social icons set provided from WebFruits:

5. Sweetie Pack Download
Sweetie Pack is a popular clean and beautiful icons set with other 100 icons. I suggest you to read this post. CSS Message Box collection with sweetie pack:

6. FeedIcons Download
This is a beautiful icon set feed

7. Mini Icons Download
Super mini icons set for web applications designed by FamFamFam:

8. Tango Icons Set Download
The Tango icon library contains a basic set of icons for the most common usage. To make it easier for a developer to find an appropriate icon for their application a number of aids are there to help.

9. Monofactor Download
Monofactor is a beautifu set contains 25 scalable Illustrator format icons:

10. Aquaticus Social Icons Download
Aquaticus is a beautiful social icons set designed by Jwoloh (60x60, 48x48, 24x24, 16x16):

If you have other icons set to suggest add a comment with the related link!

Related Content
Beautiful CSS buttons with icon set

Saturday, September 13, 2008

Step by step guide for newbie to design a simple web application (part 1)

Design a web application requires hard work and knowledge of HTML, CSS, database and javascript. What is a simple way to start developing PHP web applications for a newbie?

In the past months I received frequently this question. Some readers of this blog often asked to me to publish a "newbie-oriented" post about how to create a web application using PHP. With this step-by-step guide I want to illustrate some basic tips for newbie to design their first (really simple!) web application using PHP, MySQL, Ajax features and MooTools.

About the application
What kind of application we'll develop in this tutorial? I chose a simple to do list application to manage a list of tasks with these basic features:

- insert task
- mark a task as completed
- remove task
- search task

In this first part, I'll explain how to:

- define application structure
- create a new database for your application
- create database tables and relationships
- setup the application home page

Are you ready? Let's go!

1. Application structure
First question is: how to organize our application? We can start using this simple structure which will be modified in the next steps adding new elements (folders and files):

The main folder todo-list will contain all application files and folders; db folder will contains all files to create and manage application database. connection.php enstablishes a database connection in all pages which require interaction with data stored into our database (see step 2.3).

2.1 - Database: create a new DB
Second step:create a new database for our application to store tasks information. We can use phpMyAdmin to create a new DB:

You have to add a name (in this case todo-list) in the input field and click on create button. Your new database will appear on the left panel: the number (0) indicates your database is empty (no tables).

Note: if you are a Mac user I suggest you to take a look at MAMP to configure PHP+MySQL environment on your system. For more info about MAMP read this post.

2.2 - Database: define DB tables
At this point, we have to define database tables. In our simple to do list application we have only a table TASK with these attributes:

Now we have to create this table into our new database. In general, you can create database tables and relationship directly using phpMyAdmin interface or writing SQL code in a separated PHP file ( tables_structure.php). I prefer to use the second option because it's simpler to manage. So, open tables_structure.php and copy and past this code:

<?php
//Database Connection
include('connection.php');

// Create table TASK
$sql="CREATE TABLE TASK (
task_id_pk INT NOT NULL AUTO_INCREMENT,
task_name VARCHAR(250),
task_description LONGTEXT,
task_completed INT, PRIMARY KEY (task_id_pk)
) TYPE=INNODB";
mysql_query($sql);

// Close DB Connection
mysql_close($db_con);
?>

In the first row I included the following line:

//Database Connection
include('connection.php');

...which enstablishes a database connection (see next step). So I added a PHP var $sql which contains SQL code to create a new table "Task". This code:

mysql_query($sql);

...executes a query with SQL code declared into $sql var.

Note: For more info about how to design a more complex database for your web applications (with relationships between tables) take a look at the following links:
Define relationships-entities model (tables, attributes, and relationships)
Create tables and relationships with SQL
How to use PHP and SQL to create tables and relationships
A correct approach to define relationships between database tables

2.3 - Database: connection.php
Enstablishing a database connection using PHP is very simple. You can use the following code only changing connection parameters values ($db_host, $db_name, $username, $password):

<?php
// Connection Parameters
$db_host="localhost";
$db_name="todo-list";
$username="root";
$password="root";
$db_con=mysql_connect($db_host,$username,$password);
$connection_string=mysql_select_db($db_name);

// Connection
mysql_connect($db_host,$username,$password);
mysql_select_db($db_name);
?>

In general $db_host, $username, $password don't require changes. This var:

$db_name="todo-list";

...contains the name of database we created at step 2.1.

Note: you have to include connection.php in each page which uses interaction with database.

2.4 - Database: create tables
Ok, now you can publish tables_structure.php and connection.php on your testing server and load tables_structure.php with your browser to create tables and relationships (in this case tables_structure.php will create only the table TASK ):

If code it's ok, using phpMyAdmin, you can find the new table "TASK" into our todo-list database:

3.1 - Index.php: include connection.php
Open index.php and add this line of code at the beginning of the page to enstablish a database connection:

<?php include('db/connection.php'); ?>

Remember, you have to include this file in each page which interacts with database:

3.2 - Index.php: include MooTools framewoork
How I said, we'll use MooTools framework to add moder ajax interactions to our application. So we have to add a link to MooTools framework into index.php simply copying the following code within the <head> tag of the page:

3.3 - Index.php: include CSS file
Now, create an external CSS file style.css in a new folder CSS:

This file will contains CSS code to design application interface elements. So, in the <head;> tag add a link at this CSS file:

Ok, at this point we are ready to design application interface and implement application features. In the next post we'll see how to insert new tasks, mark a task as completed, delete tasks, search tasks and how to design a simple application interface.