CAT | iPad
One of the great things about the iPad is the iBooks app. There are over 60,000 books to choose from with over 30,000 free books from the Gutenberg Project. So while there are thousands of blog posts about how great it is to read on an iPad what most people don’t realize is that the iPad comes with a built in text to speech reader. So now it’ possible to have all of those 30,000 classic works read to you.
This morning I downloaded Gulliver’s Travels and have already listened to over half of it. Below are the steps to take advantage of text to speech on the iPad.
Step 1 Open the Settings
Similar to a Mac or an iPhone/iPod Touch, the iPad has a Settings section where you can handle app specific and system wide preferences.
Step 2 Choose General Settings
The left hand column has list items for all of the different parts of the iPad. Choose General
Step 3 Click Accessibility
The “General” settings will appear on your right. At the bottom of the “General” setting is an Accessibility button. Click it.
Step 4 Triple Click Home
iPad, like the iPhone and iPod touch, only has one physical button on the front face. This button is called the “Home Button.” The iPad has a very interesting convention called “Triple Click Home.” This allows you to assign a behavior to a triple click of the Home Button. Click the “Triple-click Home” button located at the bottom right of the right hand “Accessibility” column.
Step 5 Toggle VoiceOver
The right hand column will now have 3 options. You want to choose “Toggle VoiceOver.” VoiceOver is an amazing accessibility feature that is built into the iPad. A voice will speak any part of the screen that you touch. It changes the interface slightly because you will need to double click to access apps or press buttons (because the first click speaks what you are clicking) but it is extremely useful for making the iPad accessible to blind or poor sighted people.
Choosing “Toggle VoiceOver” allows you to marry this feature to the Triple-click Home behavior.
Step 6 Double Swipe
Ok, that was the “hard part.” Now open your iBook app and choose the book you want to listen to. Make sure that the iPad speaker is turned on. Find the place in the book that you would like to begin and then click your Home Button 3 times rapidly. You should hear a voice confirm that VoiceOver is active.
Now touch the sentence where you would like to begin and then with two fingers swipe downwards. The iPad should begin reading your book out loud! It will continue reading from cover to cover.
There you have it. To turn off the VoiceOver feature click the Home Button 3 times rapidly. Keep in Mind that the iPad comes with access to 30,000 free books. Enjoy!
No tags
6
iPad Portrait and Landscape CSS Tutorial
Comments off · Posted by admin in HTML5, iPad, Mobile, Tutorial
Similar to the iPhone, the iPad has both a portrait and landscape mode. Portrait mode is when the device is taller than it is wider. Landscape mode is when it is wider than it is taller.
Conveniently enough the iPad supports <link rel=”stylesheet” media=”all and (orientation:portrait)” href=”css/portrait.css”> & <link rel=”stylesheet” media=”all and (orientation:landscape)” href=”css/landscape.css”>
With these two simple tags you can serve the ipad appropriate style tweaks for whichever orientation the user happens to be looking at your site or app in.
To understand what I mean check out this example of the iPad portrait and landscape orientation. If you have an ipod hold it in portrait and then landscape mode and you will see what looks like two different web pages.
In portrait orientation the website looks like this:
In landscape orientation the website looks like this:
The HTML code looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>iPad Portrait and Landscape CSS tutorial</title>
<style>
#container{
width:55%;
margin:0 auto;
}
#header{
width:33%;
margin:0 auto;
}
</style><link rel="stylesheet" media="all and (orientation:portrait)" href="css/portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="css/landscape.css">
</head>
<body>
<div id="container">
<div id="header">
<h1 class="portrait">
Portrait
</h1>
<h1 class="landscape">
Landscape
</h1>
</div><!--end of header div-->
<div id="image">
<img class="landscape" src="images/landscape.jpg" alt="landscape">
<img class="portrait" src="images/portrait.jpg" alt="portrait">
</div><!--end of image div-->
</div><!--end of container div-->
</body>
</html>
The landscape.css file looks like the following:
.portrait{
display:none;
}
html{
background-color:#f6cf74;
}
And the portrait.css file looks like this:
.landscape{
display:none;
}
html{
background-color:#a06346;
}
This code simply says “What way are you holding your iPad? Ok, I will serve you code for that orientation. The code that is served uses CSS display:none to hide the unappropriate elements.
If you don’t have an iPad and want to see this work you can simply shrink the size of your browser until it is either wider than taller or vice versa.
more information:
http://mislav.uniqpath.com/2010/04/targeted-css/
http://www.cloudfour.com/ipad-orientation-css/
No tags
6
Using desktop safari to see what your website looks like on the iPad
Comments off · Posted by admin in HTML5, iPad, Mobile, Web Applications
Step 1 Let’s go on a Safari
First and foremost you are gonna have to agree to play by Apple’s rules which means that you need to use the Safari browser for this to work. But that’s not so bad. Safari is a pretty great browser when it comes to cutting edge standards support and a blazing fast rendering engine. If you don’t have Safari already you can download it here. It is completely free, works on a mac or pc, and takes about 3 minutes to download and install. I’ll wait…Step 2 User Agent String
In web world the “User Agent” is a fancy word for your browser. You know, firefox, chrome, or in this case Safari. Safari is the user agent. Each user agent has a way to identify it called a user agent string. The iPad’s user agent string is: Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10 Wah!? Don’t worry, you won’t need to memorize it or anything. You simply need to copy and paste it in the next step.Step 3 HTTP Request
By now you should have safari running. Load the website you wish to see through the lens of an iPad. I recommend gmail.com – who recently launched an HTML5 iPad version of their popular email site. This site gives you a great sense of the new 2 column layout that is so prevalent in many of the iPad apps like the Wolfram Alpha app below.
Step 4 Done
When you click ok your page will reload. If prompted verify that you are NOT serving ipad the mobile version of your site. You should now see what your site looks like on the iPad. To confirm that this works check out gmail to see the iPad specific 2 column layout. Keep in mind that this user agent string setting persists on a per-window basis. I hope that this helps those of you out there who don’t have an iPad (yet) to get an accurate picture of what your site looks like on this great new device. For more info on how to prepare your website for the iPad check out this great material from apple (where I got the information for this post and more) and please check back to this blog.No tags
Like some of you I recieved my iPad yesterday and have spent the day experimenting with the new layout that many of the apps are using including gmail and wolfram alpha (picture at right).
Basically the layout is 2 columns. The left column is around 30% wide and contains a menu (navigation, unread emails, etc). The right column is around 70% wide and contains the main content of the section you are on or the email you are reading.
While I don’t have much to report in terms of how to lay your page out in this manner I do have the first part of the puzzle. And that is how to detect the iPad in the first place.
I have been using the following php code to detect an iPhone/iPod Touch and redirect to an appropriate directory:
<?php if(strstr($SERVER['HTTPUSERAGENT'],’iPhone’) || strstr($SERVER['HTTPUSERAGENT'],’iPod’)) { header(‘Location: http://www.cardonadesigns.com/iphone’);
exit(); } ?>
To make it detect the iPad I simply changed it to the following: <?php if(strstr($SERVER['HTTPUSERAGENT'],’iPhone’) || strstr($SERVER['HTTPUSERAGENT'],’iPod’)) { header(‘Location: http://www.cardonadesigns.com/iphone’);
exit(); } else if(strstr($SERVER['HTTPUSER_AGENT'],’iPad’)) { header(‘Location: http://www.cardonadesigns.com/wordpress’);
exit(); }?> As you can see I am only redirecting to my blog for now until I figure out how to style the page appropriately. But this is an important start.
Got any good iPad CSS tips to share? Please post them in the comments. Thanks!
For more iPad tutorials from Cardona designs check out:
iPad Portrait and Landscape CSS Tutorial
Using Desktop Safari to See What Your Website Looks Like on the iPad
No tags
1
The HTML5 <video> goldrush is on
Comments off · Posted by admin in Google, HTML5, iPad, Mobile, Video, Web Applications
No tags
As if the fever pitch about the supposed Jesus tablet hasn’t reached a climax now I will add my two cents. Since so much has been said about this everywhere else I will keep it brief.
Please keep in mind that I don’t know anything specific about this other than the rumors I have read all over the web. This is entirely conjecture. Still interested? Read on…
On Wed. Apple is having an announcement in San Francisco. It appears that this is the actual launch of the mythic slate/tablet device that everyone has been going crazy about for a year.
Do I think this is about to happen? Yes I do. And here is why.
It’s no surprise that technology keeps moving and speeding up. We all know that. But it’s too easy to forget that paradigm shifts do happen. And once they happen it’s hard to think back to a time before them.
Remeber a world without iPhones/Androids? Remember a time without youtube? Remember a time without the web? etc.. etc.. The list goes on and on and on.
And one amazing thing about that list is that (at least in his adult lifetime) Steve Jobs has managed to be involved in each of those paradigm shifts in some way. Sometime is was directly like the creation of the Macintosh or the iPhone. And sometimes it was indirectly like the web being created on a Next computer at CERN by Tim Berners-Lee.
Another amazing thing about the list is how microsoft (at least in it’s lifetime) managed to copy and steal each emerging market. We see it with Dos (they didn’t create it–they bought it for $50,000). We saw it with windows (they stole the idea from apple who had stolen it from Xerox). We saw it with Internet Explorer (they didn’t create it, they bought the source code).
And what have we seen this year? 15 tablets launched with microsoft software! This year at CES Balmer stood on stage and showed off a sleek new tablet running Windows 7. Ooohhh Aaaahhhh!
So clearly this is the year that tablet computers come to the fore. But as always microsoft is just taking an idea that other people have had and putting their software on it. There is nothing paradigm shifting about the new microsoft tablets. There have been microsoft tablets for years. No big deal.
But Apple and Steve Jobs are different. Each time they have released a new product catagory it has been a game changer. They always manage to see something in the product that noone else saw. And that puts them not 1, not 2, but 3 steps ahead of the game.
And that is what is coming wed. Apple is not only going to introduce a tablet. That would be cool and everything. But it’s not a big enough deal. It’s not different enough. And remember, Jobs Thinks Differently.
I think that apple is going to take Microsofts “three screens and the cloud” theme and shove it down their throat. Imagine a system that allows you to seamlessly send your apps and personal data between your big screen (mac or apple tv), your mid size screen (the new slate/tablet), and your small screen (the iPhone). 3 Screens and the cloud!
Also imagine a whole new GUI. Possibly even as drastic as ditching the whole “windows” and “desktop” model and going with something so far out that is like minority report or UFO stuff. 
Yes, I do think that apple is going to change the game this wed. I think that this device will be so epic that we will measure our computing by before and after the apple tablet.
Now let’s hope they actually release the darn thing…
No tags
