Considering that most sites are currently using a mobile version and that mobiles are quite a very big part of our daily lives, I believe that a script that automatically redirects users to the designated mobile template is quite useful. Now, you must consider, this is not something that can be implemented directly into a WordPress theme. You can, but first your page must be optimized for usage.

So, let’s get started.  First things are first, the script that does everything.

Download Auto Redirect Script - No Password

Download the script above, and save it in your scripts folder / location. Once you have done this, edit your main file, the one your main page ( index.html / php). Once you have done that, add the following code exactly after importing jQuery, basically, it should be the second line of code in the head scripts section.

<script type="text/javascript" src="scripts/detectmobilebrowser.js"></script>

Once you have added this piece of code, now, save your file to your server, and visit it from your mobile. Once this is completed, your mobile page will redirect to mobile/index.html, but if you wish to change this location, edit the detectmobilebrowser.js and at the end of the script you will locate the code called mobile/index.html. Replace it with the address you require.

That’s all folks! Feel free to use this script in personal or commercial projects.  A link-back would be nice!

HTML CSS3 Features

• iPhone Web App with iPhone Homescreen icon and startup screen!
• Pure CSS3, 64 buttons that enlarge to suit your text and never break.
• Pure CSS3, Table with animation.
• Google API Fonts for very fast loading!

jQuery Features

• Uniquely AWESOME GADGET ANIMATIONS!
• Dropdown Animated Menu.
• Animated Thumbs.
• Gallery Image Hover Effects
• 2 jQuery Galleries with animated thumbnails and ColorBox Gallery.
• jQuery Filtrable Gallery.
• Working Contact Form With Field Validation.
• Google Maps Support!
• jQuery Image Zoom Integration.

Mobile Version
Yes! The template comes with an iPhone web app. Bookmark this site to your iPhone homepage, and there you have it! It becomes a instant WebApp with a iPhone friendly icon, a application like splash start-up screen and no more Safari Navigation bar so you can enjoy the page in full screen mode!
The WebApp was developed ESPECIALLY for the iPhone, The mobile template will work with most smart phones that have a 320 x 480 screen. I’ve tested it and it works wonderfully on the Samsung Galaxy S using Android.

How does the mobile version work?

The mobile version has a CSS resolution detector. There are 3 things the CSS looks for. The best part of it is that the mobile version having a resolution detector has 2 stages for the iPhone and iPhone like devices. There is a landscape and a portrait version!

1. Between 0 pixels and 320 pixels
This includes most devices on the market that are non-smartphone. It will generate a version of the mobile page with all it’s features but in a more compact way so they fit the screen. You can still use the CSS3 buttons and the mobile version has a slider as well

2. Between 420 pixels and 1000 pixels
This includes most of the smartphones on the market including the Samsung Galaxy S2 and the iPhone 4 witch have a generous display. All features stay the same, the slider will become bigger, also, gallery images become bigger! Of course, you can still use all features of the page

3. Over 1000 pixels
Even a small netbook has more 1000 pixels width, so that makes the mobile version generate the ” This page cannot be rendered for your device” error message.

Support?

If you have any trouble with this template please mail me through my profile.
Customization (adding more features that are not already included ) for this template is not free and will be charged at freelance rates!
Special thanks to NKeo for the images, check out his website! he has some awesome files!

HTML CSS3 Features

• iPhone Web App with iPhone Homescreen icon and startup screen!
• Pure CSS3, 64 buttons that enlarge to suit your text and never break.
• Pure CSS3, Table with animation.
• Cufon Font Replacement for slick quality.

jQuery Features

• Dropdown Animated Menu.
• Homepage Image and Content Slider.
• Homepage Text Rotator.
• Homepage Quote Rotator.
• Homepage Animated Thumbs.
• About Page Captioned Slider.
• 5 jQuery Galleries with animated thumbnails and ColorBox Gallery.
• jQuery Filtrable Gallery.
• jQuery Animated Category Changer.
• Working Contact Form With Field Validation.
• Google Maps Support!
• A lot of animated hover icons!
• jQuery Animated Accordion.
• jQuery Animated Tabs.
• jQuery Image Zoom Integration.
• Animated Logo, Hover it too see the nice effect!
• Share Items From Portfolio To Facebook
• Share Items From Portfolio To Twitter
• Portfolio With Filtrable, Numbers and Category Elements. Video Too!

Graphic Features

• 10 Variations of Thumbnail Hover EFfects
• 64 Icons made to suit this design perfectly!
• 5 Content decoration separators
• 23 PSD Files of the template included
• 1 PSD File of the icons included, so you can make your own icons!

Mobile Version
Yes! The template comes with an iPhone web app. Bookmark this site to your iPhone homepage, and there you have it! It becomes a instant WebApp with a iPhone friendly icon, a application like splash start-up screen and no more Safari Navigation bar so you can enjoy the page in full screen mode!
The WebApp was developed ESPECIALLY for the iPhone, The mobile template will work with most smart phones that have a 320 x 480 screen. I’ve tested it and it works wonderfully on the Samsung Galaxy S using Android.

How does the mobile version work?

The mobile version has a CSS resolution detector. There are 3 things the CSS looks for. The best part of it is that the mobile version having a resolution detector has 2 stages for the iPhone and iPhone like devices. There is a landscape and a portrait version!

1. Between 0 pixels and 320 pixels
This includes most devices on the market that are non-smartphone. It will generate a version of the mobile page with all it’s features but in a more compact way so they fit the screen. You can still use the CSS3 buttons and the mobile version has a slider as well

2. Between 420 pixels and 1000 pixels
This includes most of the smartphones on the market including the Samsung Galaxy S2 and the iPhone 4 witch have a generous display. All features stay the same, the slider will become bigger, also, gallery images become bigger! Of course, you can still use all features of the page

3. Over 1000 pixels
Even a small netbook has more 1000 pixels width, so that makes the mobile version generate the ” This page cannot be rendered for your device” error message.

Support?

If you have any trouble with this template please mail me through my profile.
Customization (adding more features that are not already included ) for this template is not free and will be charged at freelance rates!
Special thanks to NKeo for the images, check out his website! he has some awesome files!

HTML CSS3 Features

• iPhone Web App with iPhone Homescreen icon and startup screen!
• Pure CSS3, 8 Variations of buttons that enlarge to suit your text and never break
• Pure CSS3, Table with animation
• Cufon Font Replacement for slick quality

jQuery Features

• Dropdown animated menu
• Homepage Image and Content Slider
• Homepage Text Rotator
• Homepage Animated Thumbs
• About Page Captioned Slider
• 5 jQuery Galleries with animated thumbnails and ColorBox Gallery
• Blog Page Featured Post Slider
• jQuery Animated Category Changer
• Working Contact Form With Field Verification
• Google Maps Support!
• A lot of animated hover icons!

Graphic Features

• 10 Variations of Thumbnail Hover EFfects
• 56 Icons made to suit this design perfectly!
• 5 Site background patterns included
• 5 Content decoration separators
• 6 PSD Files of the template included
• 1 PSD File of the icons included, so you can make your own icons!
• 1 PSD File of the background patterns so you can add your own patters

Mobile Version
Yes! The template comes with an iPhone web app. Bookmark this site to your iPhone homepage, and there you have it! It becomes a instant WebApp with a iPhone friendly icon, a application like splash start-up screen and no more Safari Navigation bar so you can enjoy the page in full screen mode!
The WebApp was developed ESPECIALLY for the iPhone, The mobile template will work with most smart phones that have a 320 x 480 screen. I’ve tested it and it works wonderfully on the Samsung Galaxy S using Android.

How does the mobile version work?

The mobile version has a CSS resolution detector. There are 3 things the CSS looks for. The best part of it is that the mobile version having a resolution detector has 2 stages for the iPhone and iPhone like devices. There is a landscape and a portrait version!

1. Between 0 pixels and 320 pixels
This includes most devices on the market that are non-smartphone. It will generate a version of the mobile page with all it’s features but in a more compact way so they fit the screen. You can still use the CSS3 buttons and the mobile version has a slider as well

2. Between 420 pixels and 1000 pixels
This includes most of the smartphones on the market including the Samsung Galaxy S2 and the iPhone 4 witch have a generous display. All features stay the same, the slider will become bigger, also, gallery images become bigger! Of course, you can still use all features of the page

3. Over 1000 pixels
Even a small netbook has more 1000 pixels width, so that makes the mobile version generate the ” This page cannot be rendered for your device” error message.

Colorbox is basically a cocktail between PrettyPhoto and LightBox, a gallery that loads extremely fast, and it extremely and loading it is amazingly EASY! And the best part. It’s licensed MIT!

Why you should be using ColorBox

• Supports photos, grouping, slideshow, ajax, inline, and iframed content.
• Lightweight: 10KB of JavaScript.
• Appearance is controlled through CSS so users can restyle the box.
• Behavior settings can be over-written without altering the ColorBox javascript file.
• Can be extended with callbacks & event-hooks without altering the source files.
• Completely unobtrusive, options are set in the JS and require no changes to existing HTML.
• Preloads background images and can preload upcoming images in a photo group.
• Written in jQuery plugin format and can be chained with other jQuery commands.
• Generates W3C valid XHTML and adds no JS global variables & passes JSLint.
• Released under the MIT License.

Tested In: Firefox 3+, Safari 4+, Chrome, Internet Explorer 6, 7, 8, 9, Opera 11.

The colorbox method takes a key/value object and an optional callback.
Format: $(‘selector’).colorbox({key:value, key:value, key:value}, callback);
Example: $(‘a#login’).colorbox({transition:’fade’, speed:500});
Example: $(‘a.gallery’).colorbox();
Example: $(‘button’).colorbox({href:”thankyou.html”});

And it can be called directly, without assignment to an element
Example: $.colorbox({href:”thankyou.html”});

ColorBox can accept a function in place of a static value:
$(“a[rel='example']“).colorbox({title: function(){
var url = $(this).attr(‘href’);
return ‘<a href=”‘+url+’” target=”_blank”>Open In New Window</a>’;
}});

ColorBox Download

So, let’s get this started shall we?

1. Licensing:

PrettyPhoto is totally free to use, it’s licensed under Creative Commons Attribution 2.5 so you can use it in all projects including commercial ones.

2. Browser Compatibility

• Firefox 3.0 +
• Google Chrome 10.0 +
• Internet Explorer 6.0 +
• Safari 3.1.1 +
• Opera 9 +

3. How do I use it?

Very very simple. Let’s get some examples.

This markup applies to all explanations bellow.

1. Implementing a simple image:

• Create a link ( <a href=”#”>).
• Add the re attribute “prettyPhoto” to it (rel=”prettyPhoto”).
• Change the href to you link so it points to the full size image.
• To have it display a title, add the title into the ALT attribute or your thumbnail image.
• To have display description, add the description into the title attribute of your link.

<a href="images/fullscreen.jpg" rel="prettyPhoto" title="This is the image Description"><img src="images/thumbnail.jpg" width="60" height = 60" alt="This is the title"></a>

2. Implementing a image gallery:

• Create a link ( <a href=”#”>).
• Add the re attribute “prettyPhoto” to it (rel=”prettyPhoto[pp_gal]“).
• Change the href to you link so it points to the full size image.
• To have it display a title, add the title into the ALT attribute or your thumbnail image.
• To have display description, add the description into the title attribute of your link.

<a href="images/fullscreen1.jpg" rel="prettyPhoto[pp_gal]" title="Your Title."><img src="images/thumbnails1.jpg" width="60" height="60" alt="Your Description." /></a>
<a href="images/fullscreen2.jpg" rel="prettyPhoto[pp_gal]" title="Your Title."><img src="images/thumbnails2.jpg" width="60" height="60" alt="Your Description." /></a>
<a href="images/fullscreen3.jpg" rel="prettyPhoto[pp_gal]" title="Your Title."><img src="images/thumbnails3.jpg" width="60" height="60" alt="Your Description." /></a>
<a href="images/fullscreen4.jpg" rel="prettyPhoto[pp_gal]" title="Your Title."><img src="images/thumbnails4.jpg" width="60" height="60" alt="Your Description." /></a>
<a href="images/fullscreen5.jpg" rel="prettyPhoto[pp_gal]" title="Your Title."><img src="images/thumbnails5.jpg" width="60" height="60" alt="Your Description." /></a>

3. Implementing it in a slideshow.

• Create a link ( <a href=”#”>).
• Add the re attribute “prettyPhoto” to it (rel=”prettyPhoto[pp_gal]“).
• Change the href to you link so it points to the full size image.
• To have it display a title, add the title into the ALT attribute or your thumbnail image.
• To have display description, add the description into the title attribute of your link.

<a href="images/fullscreen/1.jpg" rel="prettyPhoto[pp_gal]" title="Your Title Here."><img src="images/thumbnails/t_1.jpg" width="60" height="60" alt="Your Description." /></a>
<a href="images/fullscreen/2.jpg" rel="prettyPhoto[pp_gal]" title="Your Title Here."><img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="Your Description." /></a>
<a href="images/fullscreen/3.jpg" rel="prettyPhoto[pp_gal]" title="Your Title Here."><img src="images/thumbnails/t_3.jpg" width="60" height="60" alt="Your Description." /></a>
<a href="images/fullscreen/4.jpg" rel="prettyPhoto[pp_gal]" title="Your Title Here."><img src="images/thumbnails/t_4.jpg" width="60" height="60" alt="Your Description." /></a>
<a href="images/fullscreen/5.jpg" rel="prettyPhoto[pp_gal]" titie="Your Title Here."><img src="images/thumbnails/t_5.jpg" width="60" height="60" alt="Your Description." /></a>

4. Adding Flash Content:

• Create a link ( <a href=”#”>).
• Add the re attribute “prettyPhoto” to it (rel=”prettyPhoto[flash]“).
• Change the href to you link so it points to the full size image.
• To have it display a title, add the title into the ALT attribute or your thumbnail image.
• To have display description, add the description into the title attribute of your link.

<a href="http://www.adobe.com/products/flashplayer/include/marquee/design.swf?<strong>width=792&amp;height=294</strong>" rel="prettyPhoto[flash]" title="Flash 10 demo"><img src="images/thumbnails/flash-logo.jpg" alt="Flash 10 demo" width="60" /></a>

5. Adding YouTube Content:

• Create a link ( <a href=”#”>).
• Add the re attribute “prettyPhoto” to it (rel=”prettyPhoto”).
• Change the href to you link so it points to the full size image.
• To have it display a title, add the title into the ALT attribute or your thumbnail image.
• To have display description, add the description into the title attribute of your link.

<a href="http://www.youtube.com/watch?v=qqXi8WmQ_WM" rel="prettyPhoto" title=""><img src="images/thumbnails/flash-logo.jpg" alt="YouTube" width="60" /></a>

6. Adding Vimeo Content:

• Create a link ( <a href=”#”>).
• Add the re attribute “prettyPhoto” to it (rel=”prettyPhoto”).
• Change the href to you link so it points to the full size image.
• To have it display a title, add the title into the ALT attribute or your thumbnail image.
• To have display description, add the description into the title attribute of your link.

<a href="http://vimeo.com/8245346" rel="prettyPhoto" title=""><img src="images/thumbnails/flash-logo.jpg" alt="YouTube" width="60" /></a>

7. Adding QuickTime Movie:

• Create a link ( <a href=”#”>).
• Add the re attribute “prettyPhoto” to it (rel=”prettyPhoto[movies]“).
• Change the href to you link so it points to the full size image.
• To have it display a title, add the title into the ALT attribute or your thumbnail image.
• To have display description, add the description into the title attribute of your link.

<a title="Movie Name" rel="prettyPhoto[movies]" href="http://trailers.apple.com/movies/disney/talesfromearthsea/talesfromearthsea-tlr1_r640s.mov?width=640&height=340"><img src="thumbnail.jpg" alt="Tales from Earthsea" width="50" /></a>

8. Adding iFrames:

• Create a link ( <a href=”#”>).
• Add the re attribute “prettyPhoto” to it (rel=”prettyPhoto”).
• Change the href to you link so it points to the full size image.
• To have it display a title, add the title into the ALT attribute or your thumbnail image.
• To have display description, add the description into the title attribute of your link.

<a href="http://www.google.com?iframe=true&width=100%&height=100%" rel="prettyPhoto[iframes]" title="Google.com opened at 100%">Google.com</a>

9. AJAX Content:

• Create a link ( <a href=”#”>).
• Add the re attribute “prettyPhoto” to it (rel=”prettyPhoto[ajax]“).
• Change the href to you link so it points to the full size image.
• To have it display a title, add the title into the ALT attribute or your thumbnail image.
• To have display description, add the description into the title attribute of your link.

<a rel="prettyPhoto[ajax]" href="/demos/prettyPhoto-jquery-lightbox-clone/xhr_response.html?ajax=true&width=325&height=185">Ajax content</a>

Download Pretty Photo Free!

As told before, this a freebie, download and enjoy!

Download Pretty Photo jQuery Gallery

Sure, you can say, apple is no tracking my every move, I have my localization turned off… Well, if you will look at the picture bellow, you’ll probably realize that doesn’t count…

So, my dear friends, if you have an iPhone, you are probably being tracked right now.

The presence of this data on your iPhone, your iPad, and your backups has security and privacy implications. We’ve contacted Apple’s Product Security team, but we haven’t heard back.

What makes this issue worse is that the file is unencrypted and unprotected, and it’s on any machine you’ve synched with your iOS device. It can also be easily accessed on the device itself if it falls into the wrong hands. Anybody with access to this file knows where you’ve been over the last year, since iOS 4 was released.

In the following video, we discuss how the file was discovered and take a look at the data contained in the file.

But I read the Terms of Service! They said …

Yes, we know what the terms of service state, but if you watched the video above, it seems that Apple does not really care what the terms of service say, and they track your position anyway. If your a iPad user or iPod touch user that does not own GPS, you are probably not that well tracked, as they say Horizontal Longitude can be very inaccurate, else, I’d say, get an Android.

The guys stated that they searched the Google OS and didn’t find any traces of the code that tracks your position in there.

For those of you who really didn’t read the terms of service, check them out bellow.  I bolded out the part where they say you can ” opt out ” this service.

Apple and its partners and licensees may provide certain services through your iPhone that rely upon location information. To provide and improve these services, where available, Apple and its partners and licensees may transmit, collect, maintain, process and use your location data, including the real-time geographic location of your iPhone, and location search queries. The location data and queries collected by Apple are collected in a form that does not personally identify you and may be used by Apple and its partners and licensees to provide and improve location-based products and services. By using any location-based services on your iPhone, you agree and consent to Apple’s and its partners’ and licensees’ transmission, collection, maintenance, processing and use of your location data and queries to provide and improve such products and services. You may withdraw this consent at any time by going to the Location Services setting on your iPhone and either turning off the global Location Services setting or turning off the individual location settings of each location-aware application on your iPhone. Not using these location features will not impact the non location-based functionality of your iPhone. When using third party applications or services on the iPhone that use or provide location data, you are subject to and should review such third party’s terms and privacy policy on use of location data by such third party applications or services.

In the end, I’d like to say that if you are obsessed with privacy and you own an iPhone with the OS4, you are no longer safe.

Features

Must have at least Flash CS4 to edit!

Download Flash AS3 3D Perspective Source Files

Because the preview is 29500 Pixels High, The download button will be placed bellow this text. A huge thanks goes out to Farm Fresh for creating this AWESOME icon pack! Enjoy my darling readers!

Download 2000+ Commercial Free Icon Pack

The Tiny Preview Bellow!

And believe it or not, there were more, but Photoshop would not allow saving as JPG

Enjoy! Feel free to download them bellow!

Download Social Networks Icon Pack

Download WooIcons 178 Icon Pack

Download iDevices Graphic User Interface Vectors

On the 15th of April 2011, Google sent a message to it’s video account registered users informing them that they can now download their old videos and should move to YouTube. If they do not do so by the 13th of May, the service will be stopped. Regular users access to the service will be discontinued starting with the 29th of April.

Bellow, you can see the e-mail sent out by Google, so if you have videos on Google Videos, it’s time to move them!

From: “Google Video”
Date: Apr 15, 2011 9:56 PM
Subject: Google Video Hosted Content To Be Removed After May 13

Dear Google Video User,

Later this month, hosted video content on Google Video will no longer be available for playback. Google Video stopped taking uploads in May 2009 and now we’re removing the remaining hosted content. We’ve always maintained that the strength of Google Video is its ability to let people search videos from across the web, regardless of where those videos are hosted. And this move will enable us to focus on developing these technologies further to the benefit of searchers worldwide.

On April 29, 2011, videos that have been uploaded to Google Video will no longer be available for playback. We’ve added a Download button to the video status page, so you can download any video content you want to save. If you don’t want to download your content, you don’t need to do anything. (The Download feature will be disabled after May 13, 2011.)

We encourage you to move to your content to YouTube if you haven’t done so already. YouTube offers many video hosting options including the ability to share your videos privately or in an unlisted manner. To learn more go here.
Here’s how to download your videos:

1. Go to the Video Status page.
2. To download a video to your computer, click the Download Video link located on the right side of each of your videos in the Actions column.

Once a video has been downloaded, “Already Downloaded” will appear next to the Download Video link.

If you have many videos on Google Video, you may need to use the paging controls located on the bottom right of the page to access them all.
Please note: This download option will be available through May 13, 2011.
Thank you for being a Google Video user.

Sincerely,
The Google Video Team

Goodbye Google Videos, it’s been nice to have you around!

Give this picture a second to load, it’s fairly big but it’s just awesome!

Apps For Everyone!

1. Google Voice

Google Voice is a service that is so useful I consider it one of the top benefits of Android itself, especially since Apple rejected the Google Voice app for the iPhone. It gives you a phone number that can ring to multiple places or devices and it allows you to access all of your voicemail and text messages over the Web. The Android app integrates even deeper. It can make outgoing calls look like they’re coming from your Google Voice number so that you can keep your real mobile number private.

2. Advanced Task Killer

One of the realities of having a multitasking mobile OS in Android is that you have to manage your apps so that they don’t hurt performance or battery life. Advanced Task Killer (or ATK) is my favorite. It even comes with a widget that you can tap once to kill all open apps.

3. Dropbox

Dropbox is a great cloud service that automatically syncs a folder of files between multiple computers (Windows, Mac, or Linux). This app extends Dropbox to Android and interacts with other apps (such as Documents To Go) to open the files.

4. Evernote

Once you get used to typing on a virtual keyboard (and it honestly took me over a year to do it), then these devices are great for note-taking, and Evernote is a great note-taking app. It is similar to Dropbox in that it saves data locally but syncs it across all your machines and devices.

5. DroidAnalytics

For some reason Google doesn’t have an official app (for either Android or iPhone) for Google Analytics. The best one I’ve found on Android is DroidAnalytics. Another good one is mAnalytics.

6. Documents To Go

The free version of Documents To Go offers a great little reader for Word and Excel files. You can upgrade to the full version (for $15) if you want to edit files and add PowerPoint files to the mix. If you do want editing capability, I’d also recommend taking a look at QuickOffice.

7. Amazon Kindle

I never warmed up to the Amazon Kindle e-reader, but I’m a big fan of the Kindle mobile app. Since it was released I’ve read a lot more books simply because my smartphone is always with me and I can pull it and read a few pages anytime I’ve got a couple minutes free.

8. Places Directory

This is an awesome app for finding shops and services near your current location. From restaurants to movie theaters to medical facilities to taxis, this app is very accurate and takes advantage of the business information from Google Local. This app is better than the info you get from a GPS unit (or app) and better than any of the similar apps available on the iPhone.

9. Tripit

I dig Tripit. It is by far the best app I’ve found for keeping track of all my travel itineraries. It runs on some great backend systems. You simply forward your confirmation emails for your flights, hotels, rental cars, and more to Tripit and it automatically organizes them into trips with all your details and confirmation numbers.

10. Seesmic

Twitter is an amazing instant-intelligence engine and it was made for mobile browsing. Although there’s an official Twitter app for Android now, Seesmic is still the best Android Twitter client.

11. FCC Speedtest

I’m obsessed with running speed tests to check my bandwidth in various places, both to see 3G fluctuations and to check the quality of Wi-Fi. There are a number of really good speedtest apps, but my new favorite is the FCC Test app.

12. Astro File Manager

Another one of the great things about Android (if you’re a geek or a tinkerer) is that you have lower-level access to the system itself. Astro is an app that lets you navigate the Android file system.

13. Got To Do

There are plenty of to-do apps to choose from on Android but I prefer Got To Do because of the solid interface and the fact that it can sync with the online service Toodledo.

14. Gist

Many of us have contact lists scattered across various computers, devices, and online services. Gist is a Web service that can bring them together and even pull in stuff from the Web to help you stay up to date with your most important contacts. There’s an Android app as well as an iPhone app.

15. TED Mobile

TED is a fascinating event that features a meeting of the minds of some of society’s most influential thinkers. You’ll definitely disagree with some of them, because there’s a large diversity of opinions, but many talks are worth listening to. What I love is that they’ve taken the videos from their conference and made them freely available on the Web. This app provides a great way to access the videos. I hope more conferences follow TED’s lead on this.

16. Pandora

Pandora is a streaming “radio station” for the Internet age. You simply search by an artist or song and it will create a running playlist based on that one piece of information. It intersperses an occasional ad between songs but the ads tend to be fairly localized and occasionally even useful.

17. Shazam

If you want to impress your friends with a mobile app, show them Shazam. Ever hear a song being played at a store or on the radio and ask yourself, “Oh, what song is that?” That’s where Shazam comes in. Just hit the button and let it listen for 15 seconds, query its database, and then return the name of artist and the song. It has about an 80% success rate.

18. Dial Zero

Are you one of those people who dials a customer service line and just keeps pressing zero until you get to talk to a real person? Then Dial Zero is your new friend. This app provides a directory of a ton of U.S. businesses and gives you numbers to help you get closer to a real person and instructions for which prompts to hit to speak to a human being as quickly as possible.

19. Google Goggles

This is a fun app that is a little but ahead of its time. It does visual searches. You can take pictures of things and then the app tries to tell you what they are. It’s limited in its scope but it is pretty cool, and it’s definitely a peek into the future. One of the coolest features is the ability to take pictures of text in a foreign language and let that app translate for you. In a foreign country, this can help you read street signs and avoid going into the wrong bathroom.

20. Google Sky Map

Ever look up at the night sky and try to tell your kids the name of that constellation you’re pointing at, or try to remember which planet that is in the southern sky? Google SkyMap lets you point your smartphone at it and get the information. This is part of a new breed of apps called “Augmented Reality” apps that layer digital information on top of real world experiences.

21. Tricorder

A lot of geeks I know like to say that our smartphones are becoming more and more like the Tricorders on Star Trek. Well, here’s a fun app that turns your Android device into a virtual Tricorder. It even offers some useful environmental information, including GPS data, wireless data, and ambient sound measurements.

22. FxCamera

Honestly, the camera software on Android is an area where major improvements are needed, but this app is a great example of what’s possible. It has solid camera controls, full customization options, and offers some great effects for photos.

23. Photoshop Mobile

Photoshop is, of course, the best known photo editor in the world and its mobile app doesn’t do anything to hurt that reputation. But while the desktop version is know for having a zillion features, the mobile app is distinguished by its simplicity. It’s the best Android (and iPhone) photo editing app for simple crops, brightness adjustments, and sharpens, for example.

24. Bump

Bump is a fun (and useful) idea for sharing info between two phones using the accelerometer, and it works across Android and iPhone. You can use it to share contact info (yours and others), photos, and apps. You both simply open the Bump app, choose what you to share, and then hold the phones in your hands and bump your hands together.

25. Barcode Scanner

This app turns the Android camera into a barcode scanner. You simply scan a product’s UPC code and let the app go to work to find it in Google Product Search or a search on the open Web. You’ll be amazed at how fast it works. This is great for when you’re shopping retail and you want to check the price of a product online before buying to make sure you’re paying a fair price.

Apps for developers and designers.

1. AndFTP – Android FTP, FTPS And SFTP Client

FTP apps are something every developer uses. Whether it comes to giving quick updates to your clients, or just to test certain aspects of your project, if you need access to the contents residing in server, ANDFTP is a powerful app and a robust utility. It’s a fast and securely manageable client. It gives you the options to quickly manage files with a built in device and FTP file browser. Just key in your credentials for multiple accounts, choose the one to access and the app will pull up your file tree with very easy to navigate interface. It supports download and upload features with the support of easy download resuming. The app also supports FTP, SFTP and FTPS connections as well.

2. Connectbot – Secure Shell Client

A lot of developers use SSH client to connect to a remote computer. Just to add a little background, SSH is a  network protocol that allows user to exchange data using a secure channel between two networked devices. It is primarily used on Linux and Unix based systems to access shell accounts.

3. ConnectBot

is a free app for Android that creates a secure connection through which you can use a shell on a remote machine and transfer files back and forth to your device. It can manage several SSH sessions and create secure tunnels. Users can copy / paste between other apps as well. This utility comes in with a number of keyboard shortcuts for hardware and virtual keyboards. Users can access SSH, telnet and local server. Direct shortcuts can be created to frequently used SSH accounts on the home screen. Overall, a great free SSH client for Android that gives you almost the exact same features that are available in a desktop SSH client.

4. Magic Color Picker – Color Selection

Color selection is essential for developers and designers when creating beautiful user interfaces, logos, banners, and so on. Suppose you’re in a quick meeting with your client, and color selection pops up as a topic. Pick your Device, and Open MAGIC COLOR PICKER. It’s a free tool for quickly selecting suitable colors by using a number of different color models.This app supports 7 different modes and 4 models including RGB, HSV, HSL and YUV. You can use either palette or sliders to adjust and create colors. Colors are shown in decimal and HEX.Having wheel of web colors on your device will save you a lot of time. You can make color selection for projects on the go. The only drawback of this app is not able to export, bookmark or email your selections.

5. HTML Editor – Test HTML, JS And CSS

Whether it comes to basic HTML codes, java scripting or configuring CSS style sheets, quick code editors comes in as a great help.HTMLEditoris a free app that lets you code and test HTML, JavaScript and CSS sheets.The typed code can be saved to memory card and can also be previewed in the mobile browser. Base file location can be changed via Settings.Developers of this app recommend usage of hardware keyboard. It does give you the option to type in from the virtual keyboard with added assistance to show the programmed special keys on the screen.A great app for developers to quickly test small scripting modifications for their projects.

6. ActionScript Reference – Find AS3 Classes

Are you a Adobe Flash and Flex developer? If yes, then you must be familiar with Action Script 3 and the help docs it comes with. You will surely appreciate this free app called ActionScript Refference. It will save you a lot of time on the go with quick access to up-to-date AS3 classes.It indexes all available AS3 helpdocs for Flash and Flex developers right in your device. Users can view all classes and search them by class names.

7. Typography Junkies – All About Type

Designers have some source of inspiration when constructing different designs. Typography is an art and technique of arranging type, and type design becomes a core part of every design.

8. Typography Junkies

This is a great app which every designer should carry. This free app keeps you up-to-date about latest font types with added videos and image.Moreover, the types are collaborated with different sort of images, videos and social media content.

9. Thinking Space – Mind Mapping

Brainstorming on the go, who doesn’t do it? Being a developer / designer, there are tons of ideas roaming around. Thinking Spaces is an awesome mind mapping app to note down all ideas quickly and make connections between them. The extremely good user interface will make you dig more into this app. Users can export their created maps as images and send them via email. You can use this app for tasks, planning, meetings, and so on. As an added feature, you can upload and download maps to your device via Thinking Space Web Portal. Thinking Space is also compatible with famous Free-mind software for PC, Mac, and Linux.

10. Firefox 4 Beta Mobile

Firefox 4 Beta is currently available for most Android 2.0+ devices (sadly not for my Hero!). The browser itself is fantastic and feature-rich, but accompanied by some of its currently available developer extensions (yes, it does support mobile specific addons) it truly is an essential requirement for any developer.

11. Touchqode Editor

With touchqode you can view and edit source code that comes with syntax highlighting, autocomplete and other features found on a regular desktop IDE. It currently support Java, HTML, JavaScript, Python, C++, C# and Ruby.

12.HTMLEditor

HTMLeditor is a super-simple HTML,ASP,JS and CSS editor for quick coding when you are on the move.

13. Eval Your JavaScript Code

Eval your Javascript Code is a simple tool for test-running Javascript snippets directly on your Android.

14.Android Codepad

Android Codepad is a simple source code viewer that supports all C-like, Bash-like, and XML-like languages and automatically syntax highlights depending on the file.

Wrapping it all up!

And that’s about it! let me know if I missed anything and I will add them up to this list!

What Icon Sweet Has To Offer

Icon Sweet

• 60 Free Vector Icons
• 32×32 Format
• 16×16 Format

Kind of a little right?

What Icon Sweet 2 Has To Offer

Icon Sweet 2

But IconSweet2 offers:

• 400 + Vector Icons
• 64×64 Format
• 32×32 Format
• 16×16 Format

Awesome Sauce! Download them and use them for whatever you may need!

This freebie applies for the following categories:

• HTML, HTML5
• CSS, CSS3,
• Flash AS2, AS3,
• jQuery

You can download this slider from here. Absolutely free!

What you need

To use the Nivo Slider you have to include the following in your page:

• jQuery
• Nivo Slider script
• Nivo Slider CSS

You also need to add some body HTML. This is ususally just a <div> with images. Note that only images or images wrapped in links are allowed in the slider div. Any other HTML will break the slider.

Using the Slider.

<!-- Usually in the <head> section -->
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>

<!-- Then somewhere in the <body> section -->
<div id="slider">
    <img src="images/slide1.jpg" alt="" />
    <a href="http://dev7studios.com"><img src="images/slide2.jpg" alt="" title="#htmlcaption" /></a>
    <img src="images/slide3.jpg" alt="" title="This is an example of a caption" />
    <img src="images/slide4.jpg" alt="" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
    <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>

To add a caption to an image you simply need to add a title attribute to the image. To add an HTML Caption simply set the title attribute to the ID of a element that contains your caption (prefixed with a hash). Note that the HTML element that contains your caption must have the CSS class nivo-html-caption applied and must be outside of the slider div.

Then it helps to add some CSS to make the slider look good while it’s loading:

#slider {
    position:relative;
    width:618px; /* Change this to your images width */
    height:246px; /* Change this to your images height */
    background:url(images/loading.gif) no-repeat 50% 50%;
}
#slider img {
    position:absolute;
    top:0px;
    left:0px;
    display:none;
}
#slider a {
    border:0;
    display:block;
}

Finally you need to hook up your script using the $(window).load() function:

<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider();
});
</script>

Customizing the slider

The Nivo Slider has plenty of options to fiddle with. Below is an example of the code with all available options and their defaults:

<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider({
        effect:'random', // Specify sets like: 'fold,fade,sliceDown'
        slices:15, // For slice animations
        boxCols: 8, // For box animations
        boxRows: 4, // For box animations
        animSpeed:500, // Slide transition speed
        pauseTime:3000, // How long each slide will show
        startSlide:0, // Set starting Slide (0 index)
        directionNav:true, // Next & Prev navigation
        directionNavHide:true, // Only show on hover
        controlNav:true, // 1,2,3... navigation
        controlNavThumbs:false, // Use thumbnails for Control Nav
        controlNavThumbsFromRel:false, // Use image rel for thumbs
        controlNavThumbsSearch: '.jpg', // Replace this with...
        controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
        keyboardNav:true, // Use left & right arrows
        pauseOnHover:true, // Stop animation while hovering
        manualAdvance:false, // Force manual transitions
        captionOpacity:0.8, // Universal caption opacity
        prevText: 'Prev', // Prev directionNav text
        nextText: 'Next', // Next directionNav text
        beforeChange: function(){}, // Triggers before a slide transition
        afterChange: function(){}, // Triggers after a slide transition
        slideshowEnd: function(){}, // Triggers after all slides have been shown
        lastSlide: function(){}, // Triggers when last slide is shown
        afterLoad: function(){} // Triggers when slider has loaded
    });
});
</script>

Special Animation parameters

The effect parameter can be any of the following:

• sliceDown
• sliceDownLeft
• sliceUp
• sliceUpLeft
• sliceUpDown
• sliceUpDownLeft
• fold
• fade
• random
• slideInRight
• slideInLeft
• boxRandom
• boxRain
• boxRainReverse
• boxRainGrow
• boxRainGrowReverse

That’s about it! I hope you find this post useful, and feel free to use this slider for botch personal and commercial projects!

Feel free to download it from here:

Download The Nivo Slider

The Piecemaker is the best, and most advanced 3D banner rotator on the market. It is free, it is powerful, it works with WordPress, it works with HTML, it works with Flash, it has a source .fla file included, and it pretty much works with everything. It is so easy to use, that we figured this is a freebie you can’t miss out on.  So let’s get started with explanation, tutorial on how to include, etc, etc.

Get The Piecemaker

The Piecemaker comes in 2 versions. The source file version that you can integrate in your site regardless if it’s HTML or Flash, and the WordPress Version. Because WordPress and XML don’t get along to well, you will need both versions if you plan on using this for WordPress. So, Download It For General Usage or Download it for WordPress

iPhone 2G, 3G, 3Gs

iPhones PSD File Download

iPhone 4

iPhones PSD File Download

iPad First Generation

iPad PSD File Download

iPad Second Generation

iPad 2 PSD File Download

iPod Classic

iPod Classic PSD File Download

iPod Nano 4G

iPod Nano 4G PSD File Download

iPod Nano Touch

iPod Nano Touch PSD File

iPod Shuffle

iPod Shuffle 3G Download

iMac 27″

iMac PSD File Download

MacBook Pro

Macbook PRO PSD File Download

Thanks for reading, and don’t forget, follow our blog, we will keep posting awesome freebies each day!

Adding a simple video is really really really really easy, all you have to do is add the following piece of code to your page:

<video src="video.webm"></video>

Technically, that’s all you need. But just like an tag, you should always include width and height attributes in your tags. The width and height attributes can be the same as the maximum width and height you specified during the encoding process. Don’t worry if one dimension of the video is a little smaller than that. Your browser will center the video inside the box defined by the tag. It won’t ever be smooshed or stretched out of proportion.

<video src="pr6.webm" width="320" height="240"></video>

By default, the < video> element will not expose any sort of player controls. You can create your own controls with plain old HTML, CSS, and JavaScript. The < video> element has methods like play() and pause() and a read/write property called currentTime. There are also read/write volume and muted properties. So you really have everything you need to build your own interface.

If you don’t want to build your own interface, you can tell the browser to display a built-in set of controls. To do this, just include the controls attribute in your < video> tag.

<video src="pr6.webm" width="320" height="240" controls></video>

There are two other optional attributes I want to mention before we go any further: preload and autoplay. Don’t shoot the messenger; let me explain why these are useful. The preload attribute tells the browser that you would like it to start downloading the video file as soon as the page loads. This makes sense if the entire point of the page is to view the video. On the other hand, if it’s just supplementary material that only a few visitors will watch, then you can set preload to none to tell the browser to minimize network traffic.

Here’s an example of a video that will start downloading (but not playing) as soon as the page loads:

<video src="pr6.webm" width="320" height="240" preload></video>

And here’s an example of a video that will not start downloading as soon as the page loads:

<video src="pr6.webm" width="320" height="240" preload="none"></video>

The autoplay attribute does exactly what it sounds like: it tells the browser that you would like it to start downloading the video file as soon as the page loads, and you would like it to start playing the video automatically as soon as possible. Some people love this; some people hate it. But let me explain why it’s important to have an attribute like this in HTML5. Some people are going to want their videos to play automatically, even if it annoys their visitors. If HTML5 didn’t define a standard way to auto-play videos, people would resort to JavaScript hacks to do it anyway. (For example, by calling the video’s play() method during the window’s load event.) This would be much harder for visitors to counteract. On the other hand, it’s a simple matter to add an extension to your browser (or write one, if necessary) to say “ignore the autoplay attribute, I don’t ever want videos to play automatically.”

Here’s an example of a video that will start downloading and playing as soon as possible after the page loads:

<video src="pr6.webm" width="320" height="240" autoplay></video>

And here is a Greasemonkey script that you can install in your local copy of Firefox that prevents HTML5 video from playing automatically. It uses the autoplay DOM attribute defined by HTML5, which is the JavaScript equivalent of the autoplay attribute in your HTML markup. [disable_video_autoplay.user.js]

// ==UserScript==
// @name           Disable video autoplay
// @namespace      http://diveintomark.org/projects/greasemonkey/
// @description    Ensures that HTML5 video elements do not autoplay
// @include        *
// ==/UserScript==

var arVideos = document.getElementsByTagName('video');
for (var i = arVideos.length - 1; i >= 0; i--) {
    var elmVideo = arVideos[i];
    elmVideo.autoplay = false;
}

But wait a second… If you’ve been following along this whole chapter, you don’t have just one video file; you have three. One is an .ogv file that you created with Firefogg or ffmpeg2theora. The second is an .mp4 file that you created with HandBrake. The third is a .webm file that you created with ffmpeg. HTML5 provides a way to link to all three of them: the < source> element. Each < video> element can contain more than one < source> element. Your browser will go down the list of video sources, in order, and play the first one it’s able to play.

That raises another question: how does the browser know which video it can play? Well, in the worst case scenario, it loads each of the videos and tries to play them. That’s a big waste of bandwidth, though. You’ll save a lot of network traffic if you tell the browser up-front about each video. You do this with the type attribute on the < source> element.

Here’s the whole thing:

<video width="320" height="240" controls>
  <source src="pr6.mp4"  type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
  <source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"'>
  <source src="pr6.ogv"  type='video/ogg; codecs="theora, vorbis"'>
</video>

Let’s break that down. The < video> element specifies the width and height for the video, but it doesn’t actually link to a video file. Inside the < video> element are three < source> elements. Each < source> element links to a single video file (with the src attribute), and it also gives information about the video format (in the type attribute).

The type attribute looks complicated — hell, it is complicated. It’s a combination of three pieces of information: the container format, the video codec, and the audio codec. Let’s start from the bottom. For the .ogv video file, the container format is Ogg, represented here as video/ogg. (Technically speaking, that’s the MIME type for Ogg video files.) The video codec is Theora, and the audio codec is Vorbis. That’s simple enough, except the format of the attribute value is a little screwy. The value itself has to include quotation marks, which means you’ll need to use a different kind of quotation mark to surround the entire value.

  <source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"'>

WebM is much the same, but with a different MIME type (video/webm instead of video/ogg) and a different video codec (vp8 instead of theora) listed within the codecs parameter.

  <source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"'>

The H.264 video is even more complicated. Remember when I said that both H.264 video and AAC audio can come in different “profiles”? We encoded with the H.264 “baseline” profile and the AAC “low-complexity” profile, then wrapped it all in an MPEG-4 container. All of that information is included in the type attribute.

  <source src="pr6.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>

The benefit of going to all this trouble is that the browser will check the type attribute first to see if it can play a particular video file. If a browser decides it can’t play a particular video, it won’t download the file. Not even part of the file. You’ll save on bandwidth, and your visitors will see the video they came for, faster.

If you follow the instructions in this chapter for encoding your videos, you can just copy and paste the type attribute values from this example. Otherwise, you’ll need to work out the type parameters for yourself.

Hey, what about Internet Explorer?!

Internet Explorer 9 supports the HTML5 < video> element, but Microsoft has publicly promised that the final version of IE 9 will support H.264 video and AAC audio in an MPEG-4 container, just like Safari and the iPhone.

What about my iPhone/iPad? , I did everything but it doesn’t work!

iOS will not recognize the video if you include a poster attribute. The poster attribute of the < video> element allows you to display a custom image while the video is loading, or until the user presses “play.” This bug is fixed in iOS 4.0, but it will be some time before users upgrade. If you have multiple < source> elements, iOS will not recognize anything but the first one. Since iOS devices only support H.264+AAC+MP4, this effectively means you must always list your MP4 first. This bug is also fixed in iOS 4.0.

And what about my Android?!

Android is Google’s operating system that powers a number of different phones and handheld devices. Versions of Android before 2.3 had a number of issues with HTML5 video. The type attribute on < source> elements confused Android greatly. The only way to get it to recognize a video source is, ironically, to omit the type attribute altogether and ensure that your H.264+AAC+MP4 video file’s name ends with an .mp4 extension. You can still include the type attribute on your other video sources, since H.264 is the only video format that Android 2.2 supports. (This bug is fixed in Android 2.3.)

The controls attribute was not supported. There are no ill effects to including it, but Android will not display any user interface controls for a video. You will need to provide your own user interface controls. At a minimum, you should provide a script that starts playing the video when the user clicks the video. This bug is also fixed in Android 2.3.

That’s about it, pfew. Sorry for the long post, but I wanted to cover everything! Hope it helps!

There are a lot of tools there for encoding media, but if your not a multiversed webdeveloper, you might have a lot of trouble converting your file to the format you want, so let’s share some tools to help you out.

Miro Video Converter

Miro video converter is an open source, GPL-Licensed program for encoding video in multiple formats It supports all the output formats you can ever need. It offers no option beyond choosing the video and the output format so that may be a problem if you are a great fan of choosing your frame-rate, quality settings, etc, etc.

There dropdown list that offers a variety of options, but the most useful are:

1. WebM (vp8) is WebM Video (VP8 Video and Vorbis Audio in WebM Container)
2. Theora is the Theora Video and Vorbis audio in an OGG Container.
3. iPhone is H.264 Baseline Profile Video and AAC low-complexity audio in MP4 container.

You can download this application bellow, it is free it is available both for Windows an Mac.

Encoding OGG Video With FireFogg

FireFogg is a plugin from mozilla. Mozilla only reads OGG video and audio, so if you plan on having sounds in HTML5 for mozilla users, you will need this plugin. FireFogg is an open source, GPL-Licensed Firefox extension for encoding such elements.

To use it you need Mozilla Firefox 3.5 or later. Then visit FireFogg and download the plugin. A very simple and straight forward thing!

You can download this application bellow, it is free and it is available both for Windows an Mac.

Encoding H.264 Video With Handbrake

Apple junkies, if you truly want your video to be seen on everything and be very cross-browser, cross-device compatible, it’s time to use H.264. This is a combination of codecs+container that work natively in Safari, in Adobe Flash, on the iPhone, and Google Android devices flawlessly.

Handbrake is again an open source GPL-licensed application for encoding H.264 video. It used to do other video formats too, but in the latest version the developers have dropped support for most other formats and focusing all efforts on H.264 Video. The best part about handbrake is that it offers a huge variety of customization features for your videos.

You can download this application bellow, it is free and it is available both for Windows and Mac.

Continue reading this post to find out more on how to implement the converted files to your HTML5 document.

Thanks for reading! If I skipped a conversion program, please mention it, and I will add it here!

Step 1. HTML5 Declaration

Declaring your page as HTML5 is the most important step. If you don’t declare your page as HTML5, then what’s the purpose of trying anything else, so, let’s get on with it!

<!DOCTYPE html>

That was amazingly easy right? The Doctype is the most important declaration you can have in your document. If you want to find out more about doctypes, please refer to my previous post regarding doctypes
After you’ve successfully declared your page as HTML5, the rest of the syntax is easy. Open your head, and let’s load up the 2 scripts we will be using to make this happen!

Step 2. Calling our scripts

In order to achieve this effect we need a piece of code that will start the sound and of course, jQuery. Adding JavaScript code in your head is the most unprofessional thing you can do, so let’s add it to a new custom.js file.

<script src="scripts/jquery-1.5.min.js" type="text/javascript"> </script>
<script src="scripts/custom.js" type="text/javascript"></script>

Good. This little piece of code will be put in your head. Just before closing the head. Be aware, when using custom.js you’ll need to load it after you’ve loaded all other dependent scripts. Else, the JavaScript inside custom.js will fail to launch. Don’t forget to download jQuery.

The HTML Markup

Now we need the code that will basically show our image on the DOM and execute it when it is loaded.

<div id="yourDiv">
   	<audio src="scripts/sounds/iPadUnlock.mp3" preload="auto"></audio>
   	<img src="images/iPad-out.png" alt="iPad">
</div>

This is markup that will eventually be our trigger. This will add the sound to the document and preload it only on need. Basically this audio tag is the only thing this document has different from any other HTML doc. This is HTML5

The img src will be the image that will trigger the sound. you can use whatever you want instead of the image, a link maybe? And last but not least, time to move on to:

The JavaScript

Inside the custom.js file ( just make a new file with notepad and save it as custom.js in the same location as the jquery file ) it’s time to write a tiny piece of code that will firstly help us get rid of any possible jQuery conflicts.

var $ = jQuery.noConflict();

This should always be your first line of code when working with jQuery and a custom.js file. I’ve had the pleasant surprise when I was learning to code outside of the DOM that without that line, script ordering becomes hell. always use the no.Clonflict();

Moving forward. In our HTML Markup we have already call the MP3 sound, but now let’s create it’s events to start and stop the sound when hovering over the trigger element.

$(document).ready(function(){

$(function(){
    var divHover     = $('#yourDiv');
        var divAudio = divHover.find('audio')[0];

    divHover.hover(function(){
       divAudio.play();
    },
	function(){
       divAudio.stop();
    });
});
});

The first syntax, is the document ready event. When our document is ready loaded and fully deployed the functions bellow will start. The first function calls on the div name, and finds our audio target. In our case the first child. You can use a class for example, and the find audio child to be ordered [1], [2], depending on your needs. In our case, I used a div. Remember to use classes. If you call upon the same ID twice in your document the code will not be valid in W3C and you might have problems with your customers or marketplaces.

The second function takes care of our hover event. Once you hover over the ID defined in the first function, it will play the sound.

And the last function, once the above function is executed, it will stop playing the sound. And that’s it!

Thank you for reading.

Download
Downloaded 69 times

1. The Apple Original iPad 1 Case

The best in my humble opinion, and I am a proud owner of one such case. It offers the best protection possible. All corners of the iPad are fully covered, the screen is covered, and the only places that are not covered well, if you don’t drop it on rubble, I guarantee it will not scratch. It’s the best and it’s only 39$ compared to the hefty price of the Zagg. Check it out on The Apple Store

Pro’s

• Protects the entire iPad from scratches and dents in case of falling
• Easy to clean, it’s made from resistant material so it will not scratch
• Price to quality ratio really good!
• Can stay in 2 different positions. Typing landscape, portrait

Con’s

• Attracts a lot of dust
• The iPad tends to slip out of place
• Oly comes in one color

2. The Apple iPad 2 Smart Cover

Well, this is the biggest disappointment thus far. For a case that costs 39$ it offers almost no protection for the back of the iPad, but it has magnets? Ah come on…Shame on you Apple. It comes with a few nice features like lock/unlocking the screen when opening it, but for the rest, it does the same thing the first iPad case did and less. Back scratches are something natural for this case.

Pro’s

• Comes in a tone of colors
• Helps conserve battery time by turning the screen off
• Helps you work faster by turning on the screen when opening it
• Made out of leather and material, can be cleaned really easy
• Can sit in 2 positions, Typing and portrait

Con’s

• Doesn’t protect the back from scratches
• Doesn’t protect the sides from scratches or impact dents
• Costs the same as the first iPad case, but does less ( protection wise )
• Attracts a lot of dust(material one)

3. The Zaggmate

The Zaggmate is by far the best accessory for the iPad’s screen protection. The best, and I mean the best. It’s made out of thick, high end aluminum that will surely survive any crash. The Zaggmate is an excellent tool to have for your iPad and it only weighs in at 0.2 KG ( that means it’s a quarter of your iPad’s size) The only problem with the ZaggMate is that it offers zero protection for the back, so if your drop it on the back, you will have a very nasty dent there. The Zaggmate comes in 2 versions. Simple aluminum hard case (50$) and with Bluetooth keyboard(100$). for more details check out Zaggs Site

The Zaggmate is only available for the iPad 1

Pro’s

• Strong aluminum case.
• Screen is always protected.
• Comes in 2 models, with keyboard and without keyboard.
• Lightweight.
• Good construction.
• Same design as the iPad.

Con’s

• Backside is not protected.
• Uncomfortable to carry around.
• The keyboard model’s price is high.
• Adds an extra cable to the iPad cable caring kit for charging the keyboards battery.

4. The Clam Case

Last but not least, and the best thus far, offering both the features of the above competitors is the ClamCase. Yes, the picture above is the ClamCase , and yes it is a beauty! Although the price is 119.9$ it is by far the ultimate protecting device possible. All corners covered, screen always stays closed, the device is fully protected at all times. And no dents or scratches can happen unless you trow it face forward on the ground.

The best part is that it is in a fixed position and it has a full 360 rotation offering you the possibility to use it as a tablet or a laptop. Whichever you wish!

Check it out on ClamCase’s site!

Pro’s

• Fully protects the iPad.
• Laptop Design.
• 360 Rotation of screen, permitting multiple positions.
• Goes well with the iPad design.

Con’s

• Cheap material for 119$
• The lid never stays fully 100% closed.
• Made from plastic.
• Makes the iPad much thicker.
• Weighs in at almost 1 Pound ( 500 grams )

That’s it guys! I hope you enjoyed my post. If you know any cases you’d like a review on, just post them in the comment section and I will edit my post soon.

HTML 4.01 Strict

This Doctype Declaration contains all HTML elements and attributes, but does not include presentation or deprecated elements ( like font). Frame-sets are not allowed.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

This Doctype declaration contains all HTML elements and attributes, including presentation and deprecated elements ( like font ). Frame-sets are not allowed.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

This DTD is equal to HTML 4.01 Transitional, but allows the use of frameset content

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict

This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional

This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset

This DTD is equal to XHTML 1.0 Transitional, but allows the use of frameset content.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1

This DTD is equal to XHTML 1.0 Strict, but allows you to add modules (for example to provide ruby support for East-Asian languages).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

HTML 5

Contains everything your heart desires! Just learn it!

<!DOCTYPE HTML>

Even though the iPad 2 has been released, the old iPad is still a pretty expensive gadget to get. So if you can’t afford one and you have a customer that is obsessed with having his site clearly visible on the iPad then you have a problem.

Well, then the iPadPeek website is the best solution for you! You can test, check and view the website your working on, on the iPad without a problem. But maybe you want a more complete solution for your website? Maybe You want to know how it looks on one of the 10342349245034 websites out there. Then, check out browsershots. Another great website for testing your HTML Sites.

Thanks for reading, and I hope this post was useful for your website development.

If you want to learn HTML, HTML5, CSS, CSS3, and JavaScript, I warmly recommend what helped me a lot. Use W3CSchool. Find each category of what you are interested in and read them from start to finish. They offer examples, they give you the code, they give you everything right in your face. All you need to do is tie everything up and put it in your page. Pay attention and read carefully. The rest is up to you!

Feel free to check out my page at www.paultrifa.com

Here are the links in case you don’t know how to use Google. W3CSchool HTML5, W3CSchool CSS3, W3CSchool HTML, W3CSchool CSS and W3CSchool JavaScript

Good luck!

No, no, I’m just kidding. I’ll explain how. Follow this tutorial and you’ll get it working really fast!

For a live example, go here and hover over the mouse!

Getting Scripts

First thing is first. Download jQuery here , and import it in your document.

Now, if you are planing to rotate your item, you need another nifty little class called rotate.js get that class from here and import it into your document.

After doing so, create a new custom.js file and put it in the same place as your jQuery file, then import it.

The order of importing is the following. jQuery, Custom, Rotate. This is mandatory if you want everything to work fine.

Now, let’s move on to the HTML Markup.

The HTML

You will need to create 2 elements in your CSS. An ID, and a image class. Name them as you wish. After you’ve done so, load them into the HTML

Good. The HTML is done, now the code that does everything!

The JavaScript

Inside your custom.js file, you’ll need to add a jQuery no conflict and a document ready code.

So the first line will be:

var $ = jQuery.noConflict();

Which takes care of any conflict that might show up with your jQuery elements.

Then we need to declare the document ready function.

$(document).ready(function(){
//your function here
});

Inside this code we will write the following syntax that engages rotation and movement.

$("#imageID").mouseover(function(){
	  $('.imageClass').animate({'rotate': 40});
	  $('.imageClass').animate({
		  marginTop: "-20px",
		  marginLeft: "-20px",
	  }, 1500 );
});

And now let’s make sure you understand the code. The first line starts the function. That function will be triggered for all elements inside the imageID ID. The second piece of code animates and rotates the element within the imageClass to 40 degrees. Change that value with whatever you want.

The last function moves the image class by -20 pixels to the top and to the left. And after everything is done, it adds the time! (1500 milliseconds, meaning 1.5 seconds)

And that’s it! Congrats, you’ve animated an element. You can do the same with every-other element on your page. Redo the above function and add it in the same document ready function! Just remember to use unique ID’s and classes for each element if you want to have a guaranteed success.