1. iOS 4.1
Apple announced iOS 4.1 for the iPhone and iPod Touch which should be available in a few days for the devices listed below:
. iPhone 4
. iPhone 3GS
. iPhone 3G
. iPhone Original
. iPod Touch 3rd Generation
. iPod Touch 2nd Generation
Features include:
. HDR (When taking photos the camera fixes detail issues and controls the exposure)
. Game Centre for public use

2. iOS 4.2
This release is iOS 4 for the iPad. Along with the features in iOS 4.1. The iPad’s iOS 4.2 comes with more, greater features. First of all it contains all of the new features from the original release of iOS 4.0 (folders and multi-tasking). This release also has:
. Wireless printing

3. iPod Shuffle
The iPod Shuffle has returned with the buttons from the 3rd generation model and has a similar look to the 3rd generation iPod Shuffle.

4. iPod Nano
The iPod Nano has a complete redesign from any of the previous models. It now doesn’t have a click wheel and just looks like a display. Similar to a small iPod Touch or iPhone, it has a multi-touch display with a range of applications.

5. iPod Touch
The iPod Touch has a similar design to previous generations. It is now a lot thinner than the current generation and boasts two camera. A HD rear facing camera for shooting video and taking photos. Also, it has a front facing camera for Facetime (video calling premièred in the iPhone 4).

6. Ping
Ping is Apple’s new music social network. Think of it as Facebook, just without most of the features. You have the ability to post updates to your friends and can track recent activity of your favourite artists. Ping will also be available in the App Store for iOS devices.

7. Apple TV
Apple have released a new Apple TV model which has a drastic new design. The case is now black and has a matte texture. Also, it is a quarter the size of the previous model. The new model is based on streaming technologies. This means you won’t have storage problems. You can stream music and movies from your computer, Youtube, Flickr or other media sharing websites.

8. iTunes 10
Apple will release a new version of iTunes, named iTunes 10. It has a new logo, ditching the traditional CD and replacing it with a circle container. It also has a new view that integrates cover art into the list view menu for your music.

1. A Home Screen Icon
All native applications on the iOS platform have their own application icon. This is usually a small graphic that is displayed above the title of the shortcut. Safari has a feature which allows you to add a website to the home screen as a shortcut to the actual web page.
First create an icon that has the same width and height. These dimensions should be around 96 x 96 for the iPhone’s retina display. Save the file as “apple-touch-icon.png”. Next, upload the file to the root directory of your server. This means that the valid URL of the image would be, http://domain.extension/apple-touch-icon.png. The iPad, iPhone or iPod Touch will recognise the file when the user tries to add your website to the home screen.

2. Remove Safari’s Address Bar and Navigation Buttons
If the user of your website uses the icon (see Step 1) to navigate to your website you have a few extra rights in the Safari browser. One of these abilities is that you can remove Safari’s navigation buttons and address bar. To do this simply add the code below into the section of your web page.

3. Prevent Zooming in
Unless added by the programmer, you cannot zoom in or scale the size of native applications on the iPad or iPhone. However, it is set by default in Safari. To stop the user being able to zoom in on your website. Add the code below to your section.

4. Create a Splash Screen (Loading Screen)
If you want to show the user a pretty loading screen while your content is still being loaded, simply add the code below, once again to the section of your page and change the href property to the desired location of your splash screen image.
Note : You can only use the resolution 320 x 480 for the iPhone and 1004 x 768 for the iPad.

5. Touch Gesture Detection
Since the iOS runs on touch screen devices you no longer need to use onClick as the user is no longer operating your website using a mouse. You can use techniques designed by Apple to allow a little more freedom and creativity in your web applications. The Javascript event handlers are as follows:
Finger touches screen – ontouchstart
Finger moves on screen – ontouchmove
Finger is released from screen – ontouchend
Gesture starts (scaling or rotation) – ongesturestart
Gesture stage changes – ongesturechange
Gesture ends – ongestureend

Code:

There are 4 properties, the selected values for these properties should be applied to each of the 3 lines of code.

First we have a numerical value for the amount of pixels the shadow should be applied to from the left. Secondly, we have the amount of pixels from the top. Next, we have the size of the shadow. The larger the value the greater area the shadow will cover. Finally, we have a hexadecimal value, proceeded after a hash to define the color of the shadow.

Demo (Above Settings) :

Demo (Other Settings) :

To enable it, find your element and add this property:

contenteditable=”true”

For example:

<div contenteditable=”true”></div>

A normal object:

With Content Editable enabled:

In some web browsers, such as Google Chrome, it will place a border around the box when it is in focus. To get rid of this in your CSS add the property outline:none on the element. Here is our final code and demo.

HTML:

Example:

Fix:

To fix it you simply need to add the CSS property, overflow:hidden to the parent element.

New Code:

Requirements:
. Knowledge of PHP to Debug
. Knowledge of HTML to show elements
. Knowledge of CSS to style elements
. A server

In this project we are going to separate the code into many files as this is the best way of writing code. You should usually do this anyway.

Files:
. index.php – Main file to transmit data, add URLs and redirect
. mysql.php – To connect to the database
. functions.php – To hold most of our redirect and adding code

First we will start with the mysql.php file. This is a straight forward file which has only one purpose. To connect to the database with the MySQL connection details specified.
Code:

<?php

$connect = mysql_connect(“DB HOST”, “DB USER”, “DB PASSWORD”) or die(“Could Not connect!”);
mysql_select_db(“DB NAME”) or die(“Could Not Find Database”);

?>

Next, we will create our index.php page.

Code:

<?php

include ‘functions.php’;

$redirectcode = $_GET['code'];

$url = $_POST['url'];

if($url!=”)

{

$newcode = shorten_url($url);

}

if($redirectcode!=”)

{

redirect($redirectcode);

} else {

if($newcode!=”)

{

echo $newcode;

}

?>

<form action=”" method=”POST”>

<input type=”text” name=”url”><input type=”submit” value=”Shorten!”>

</form>

<?php

}

?>

Now that we have that completed, we only have the main file, the functions file left.

<?php

include ‘mysql.php’;

function shorten_url($url) {

$randomcode = rand(1000000,9999999);

$shorten_url = mysql_query(“INSERT INTO `TABLE NAME` VALUES(”,’$url’,'$randomcode’)”);

$newcode = ‘/PLACE DIRECTORY URL HERE/?code=’.$randomcode;

}

function redirect($code) {

$query_get_url = mysql_query(“SELECT * FROM  `TABLE NAME` WHERE code = ‘$code’”);

$numrows_get_url = mysql_num_rows($query_get_url);

if($numrows_get_url!=0)

{

while ($row = mysql_fetch_assoc($query_get_url))

{

}

}

}

?>

There is a free tool which not only ranks your website on a scale of 1 to 100. But it gives you an in-depth report about what you need to improve on to get yourself a higher score. This service is called the Website SEO Tool. Which can be located at http://websitegrader.com/.

It ranks your website on numerous factors and even some that search engines will not take into account. However, here are a few examples of aspects which it will help you improve on:
. Image Data for Image Search Engines
. Social transfer or your content
. Backlink count

Along with judging factors, the report includes information about your general website. Such as: Moz Rank, incoming backlinks and site age.

Positives:
. Helps you improve your website
. Free

Negatives:
. Limit amount of use per day
. Sometimes can be slow at grading

Overall, I recommend you use this tool whenever you create a website.

Supported Browsers:

. Webkit Based Browsers

. Mozilla Firefox ( 4.0 +)

Here is a short introduction about CSS3 to help you get started with it.

There is no better way to get started than to start programming. We are going to create an animation that will allow the color of a DIV to change over the time period of half a second. You have probably seen a similar appearance that occurs when you hover over an element and it changes. However, what you may have not seen is an animation between the two states of appearance.

So, lets get started!

First, we will create our basic structure for our HTML document.

Note : When actually using this effect and with most web design habits, you should store your CSS and even Javascript in separate files and then link them to the actual HTML document.

Code:

<!DOCTYPE HTML>

<html>

<head>

<title>CSS3 Animations</title>

</head>

<body>

</body>

</html>

Now we need to create our DIV.

<div id=”cssbox”></div>

Next, we need to place the CSS below into the HEAD section of our document.

<style type=”text/css”>

#cssbox {

-webkit-transition:0.5s;

-moz- transition:0.5s;

width:150px;

height:150px;

cursor:pointer;

background-color:#CCC;

}

#cssbox:hover {

background-color:#eee;
}

</style>

Now we will place all of our code together. Which will look like this:

<!DOCTYPE HTML>

<html>

<head>

<title>CSS3 Animations</title>

<style type=”text/css”>

#cssbox {

-webkit-transition:0.5s;

-moz- transition:0.5s;

width:150px;

height:150px;

cursor:pointer;

background-color:#CCC;

}

#cssbox:hover {

background-color:#eee;
}

</style>

</head>

<body>

<div id=”cssbox”></div>

</body>

</html>

Giving the output of:

Other examples by changing different CSS properties:

Fun (Run your cursor from top to bottom of these DIVs):

Lets get started with the file structure. We need 3 files to make the script function.

Files:

. ajax_framework.js

. insert_data.php

. index.php

Information:

. The Ajax Framework will be used to send data between files and start up and close the Ajax connections.

. The Insert Data file will run the query which will insert our data into the database.

. The Index file will communicate with the Ajax Framework to start up the connection and it will be the only file which the user will be able to see.

First we will start with the index.php.

Contents:

<!DOCTYPE HTML>

<html>

<head>

<title>Ajax POST Demonstration</title>

<script src=”ajax_framework.js” language=”javascript”></script>

</head>

<body>

<input type=”text” id=”mysqltext”>

<input type=”button” value=”Input Data” onclick=”input_mysql_data();”>

</body>

</html>

This Index file has the same structure as a normal HTML document with one optional addition. The DOCTYPE <!DOCTYPE HTML>, this specifies that HTML 5 should be enabled. It doesn’t need to be in this demonstration, but you should think about using it in your own projects.

Next, we will start with our second easiest file, insert_data.php.

Contents:

<?php

// Start Our MySQL Connection

$mysql_text = $_POST['mysql_text'];

// Add text to table in database

$add_text = mysql_query(“INSERT INTO `TABLE NAME` VALUES(”,’$mysql_text’)”);

Note : Make sure you change the text for the TABLE NAME, DATABASE HOST, DATABASE USER, DATABASE PASSWORD, DATABASE NAME. Also, make sure you alter the table structure in the query above (the current version will only insert data into a table that has two columns).

?>

Finally, we must create our Ajax Framework file to send the data between the Index file and the Insert Data file.

Contents:

// Start up our Connection

function createObject() {

var request_type;

var browser = navigator.appName;

if(browser == “Microsoft Internet Explorer”){

request_type = new ActiveXObject(“Microsoft.XMLHTTP”);

} else {

request_type = new XMLHttpRequest();

}

return request_type;

}

var http = createObject();

function input_mysql_data() {

var mysql_text = document.getElementById(‘mysql_text’).value;

var url = “insert_data.php”;

var params = “mysql_text=” + mysql_text;

http.open(“POST”, url, true);

http.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);

http.setRequestHeader(“Content-length”, params.length);

http.setRequestHeader(“Connection”, “close”);

http.send(params);

}

This will now start up our connection and send the data to the insert_data.php.

Here is the cycle of data transfer:

Load Index.php -> Enter Text and Click Button -> Start insert_mysql_data function -> Get Text from Text box -> Send to insert_data.php -> Insert into MySQL Database