CAT | Mobile
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
1
The HTML5 <video> goldrush is on
Comments off · Posted by admin in Google, HTML5, iPad, Mobile, Video, Web Applications
No tags
Those of you visiting the site on your iPhone/iPod Touches may have noticed that Cardona Designs is now specially formated for those devices. It still looks the same on a regular computer monitor but for those of you on Apple mobile devices I have reformatted the site to get you the info you are looking for quickly.
Mobile devices are everywhere. iPhones are moving 90,000 units each day! Android devices are moving 60,000 units each day! That is 150,000 new “smart phones” each and every day! 150,000 new people potentially visiting your site from their mobile phone. It is up to you to maximize that potential.
When rethinking your website for the iPhone it is important to optimize your site for a mobile experience. What does it mean to optimize your site for a mobile experience? Well, people who visit your site on a mobile device have totally different needs and expectations than someone visiting your site from a desktop computer.
The mobile visitor needs data quickly. They are on the move and they don’t have alot of time to look at pretty pictures or animations. They want to get the information (usually text) they are looking for and move on to the next task. Also they are paying for a mobile data plan. So each bit we send across the network matters financially. This means that we want to optimize the site to have as little graphics as possible. This makes the website download quickly and easily even with a not so great phone connection.
There has never been a better time to optimize your site for iPhone’s. It is an inexpensive and quick fix that will make visiting your site that much more pleasant for mobile visitors that will lead to more time on your site with deeper engagement, more reading of your blog posts, and more sales of your product.
If you are interested in creating an iPhone version of your site please contact cgcardona [at] cardonadesigns.com
It’s been a while since I had much to say on this blog. My apologies. I have been consulting with Red Droid Software on mobile applications. I will attempt to weigh in more often.
No tags
This isn’t going to be a review of the nexus one. I haven’t seen one in person and I might purchase one, truthfully I am still undecided. Nope, this post won’t be a product review. This is more of an exploration of my thoughts regarding Google getting into the hardware and mobile business.
What does it mean when the internet’s first software company decides to get into hardware? This isn’t a decision to be taken lightly and I doubt that the brainiacs in mountainview did. Consumer electronics is a tough market. The margins are razor thin and your product is practically out of date on launch day. It’s not like software and bits where you can edit a text file, load it onto the web, and bam! you have a million users with feedback to iterate on. Nope, with hardware you gotta deal with atoms. You gotta manufacture, and ship, and store, and market, and sale, and troubleshoot when things break. Hardware is seriously a whole other ballgame than what Google is used to. So why did they do it?
To answer that you really need to understand what is going on with computing. And when I say you need to understand it I don’t mean like “yeah. computers are getting faster…right?”, I mean like “computers are doubling in strength at a speed of about once every 12 months. This doubling isn’t stopping—in fact it is speeding up!”
Google has internalized this. They know better than anyone the metrics of internet usage worldwide. They know that within the next 5 years 3 out of every 4 people who gain access to the web will do so on a mobile device. They know that in the last 2 days the human race produced more information than it did in every previous generation combined from the dawn of homo-sapien through 2003. And they know that the iPhone signifies that “cell phones” are actually high end computers that you carry with you everywhere and all the time. They also know that soon (5 years) wireless will be ubiquitous.
Google points to a “perfect storm” of 1. The cost of netbooks dropping drastically resulting in mass adoption of inexpensive computers 2. More and more people spending 90%+ time in the web browser 3. A sweet spot is forming between phones/tablets and laptops/netbooks. That sweet spot is epitomized by the still unannounced and mythical Apple Tablet.
As that form factor ripens there are going to be 2 major choices. Apple already has the “high end” $1000+ market cornered. Google is positioning Chrome OS and Android to be the other choice. For the 95% of people who don’t buy high end devices. They will be able to get a nice phone, tablet, or netbook running Google software. To grasp the magnitude of this just think Microsoft Windows. And now multiply that times the world wide web! Yeah, now you are starting to get it…
So if Google is so nicely positioned to pick up all this market share from Windows why would they get into the hardware business? The reason that I see is that Android, in all it’s open source glory, is just that—open source. Which means that hardware manufacturers are free to do with it whatever they wish—including forking the code into some android bastard child.
Google can’t allow this to happen and has been forced to step up to the plate and set a gold standard of what an android phone could and should be. Of course hardware manufacturers can still do whatever they want with Android, but their phone will have to compare with the official Google phone, so unless they do something extremely creative they won’t be able to stray too far from whatever model Google lays down.
Google has been talking about cloud computing and mobile for a couple of years now. But with their entry into the consumer electronics market in the form of a phone it looks like that time has finally arrived.
No tags
Registration for the 2010 Google Developer Conference (Google I/O) became available today. The cost is only $100 for students to attend both days! That is just too good of a deal to resist. And seeing as how I only live 45 minutes from San Fransisco….. See ya there! 
From the site—”Join us for two days of deep technical content featuring Android, Google Chrome, Google APIs, GWT, App Engine, open web technologies, and more. Google I/O features 80 sessions, more than 3,000 developers, and over 100 demonstrations from developers showcasing their technologies. Talk shop with engineers building the next generation of web, mobile, and enterprise applications.”
There are breakout sessions on HTML5, Chrome, Chrome OS, Wave, and many other things Google.
Last year Google introduced and gave invitations to Wave. They also gave an android phone to everyone in attendance. My intuition is that Google will play off of the 10 in 2010 with regards to the I/O in Google I/O.
No tags
2010 is finally here and HTML5 is in last call! I have decided that I will be doing a set of tutorials on HTML5 and some of it’s great new features. And to start out the New Year I thought I would show everyone how to put those great New Years Eve videos online in HTML5 with the new <video> element!
First things first, the HTML5 doctype. Many of you may be familiar with HTML4 and XHTML1′s doctypes. Respectively they are:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”> & <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
Now if you are like me then you have likely never typed that. Traditionally this was the one part of my markup that I would copy and paste. Usually I am a stickler about machine generated code, but with HTML 4 Transitional, HTML4 Strict, XHTML1 Transitional, & XHTML1 Strict, there were too many characters for my feeble mind to remember. So I would copy and paste the doctype and be done with it. But HTML5, oh sweet sweet HTML5 has done away with all that madness. Now we have the serene <!doctype html>. So clean and fresh, like a snowy field. This doctype causes all browsers to render in standards mode! Which is reason enough for you to start using it today. It is also case insensitive, so it can be <!DOCTYPE HTML>. <!doctype HTML>, or even <!dOcTyPe HtMl> if you’re feeling crazy.
Now that we have that out of the way let’s get on with the fun stuff—HTML5 video!
Traditionally if you have wanted video on your website you needed to use some type of extension— most likely flash. This is an issue because flash isn’t native to the webpage. That meant that people needed to download an extension to make your video work. Yes it’s a given that most people have flash installed. But perhaps not everyone does. Also, many mobile devices (including the 1000 pound gorilla in the room—iPhone) don’t support flash. So all of those great videos on your site are broken when you look at them on your shiny iPhone.
HTML5 fixes that issue by introducing the <video> element. Similar to the <img> tag, the <video> tag allows you to simply point to a source file and embed video natively in your markup in a couple of lines of code. And whats even better?! Mobile devices such as the iPhone/iPod touch, android devices, palm webOS devices, and even macs/pcs can watch your video. There is no better choice!
So how do we accomplish this miracle of modern technology? Hold on to your socks….
<video src=”new-years-eve.mv4″> </video>
There it is. Don’t worry, I’ll wait while you triple take…..
Yeah, it’s that easy…..with a couple caveats of course. 
After all, this is the web.
So how do the browsers feel about the above markup. As always that depends on which browser you are talking about. IE as always says “Bah Humbug”—so don’t even try. Chrome, Safari, & Firefox are a different story however. And this is where it gets a bit (but not much) tricky.
One of the things that is holding HTML5 up from completion is the addition of an audio and video codec from the specification. There are a couple of choices, but there isn’t consensus. And here is why. Firefox, the bastion of open source doesn’t want to pay the outrageous royalties involved to use the h.264 codec for video and the mp3 codec for audio. They would much rather implement the “open” Ogg theora and vorbis formats for video and audio. There is some debate about whether these codecs are up to snuff for such large scale deployment by people such as Google open source program manager Chris DiBona who recently said “If [YouTube] were to switch to Theora and maintain even a semblance of the current YouTube quality it would take up most available bandwidth across the Internet.” – Ouch
So Google and Apple decided to take the route of supporting h.264 for video and mp3 for audio. My understanding is that they reason that they have already paid those royalty payments and they don’t want to expose themselves to any potential litigation from the ogg people. Sound reasoning I suppose.
But this has left the poor <video> & <audio> tag from fulfilling their grand destiny of native video/audio for all! If you encoded your video in ogg then people who access it from a webkit browser (chrome, safari, mobile safari, mobile android, and palm OS’s browser are all based on the webkit rendering engine) won’t be able to see it. But if you encode the video in H.264 then your open source brethren at Firefox won’t be able to enjoy. What to do…..
Fortunately we have the <source> element! Huh? “There is a src attribute and a <source> element?” you are asking right now. Yep, for <audio> and <video> there is a <source> element that can descend so that you can call more than one source. Example of our updated markup:
<video controls=”"> <source src=”new-years-eve.m4v” type=‘video/mp4; codecs=”avc1.42E01E, mp4a.40.2″‘> <source src=”new-years-eve.ogv” type=‘video/ogg; codecs=”theora, vorbis”‘> </video>
A couple of things that you might have noticed that I added without telling you. The controls attribute. This is a nice little attribute that allows for a set of browser built in controls for your video or audio. This makes it very simple to add a nice play, pause, and start button. It is a boolean (true or false) value. By default it is not even present, which represents false. So if you leave it out altogether you won’t have any controls. It’s presence represents true. So you don’t need to put controls=”true”— the correct way to write it is controls=”".
Next you will see that there is our new friend the <source> element. I added two types of video here. H.264 for webkit browsers and ogg for firefox. Regarding the type attribute, from Mark Pilgrim’s great work Dive into HTML5 “
“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. 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="NewOrleans2006.ogv" type='video/ogg; codecs="theora, vorbis"'>type attribute.
<source src="NewOrleans2006.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>type attribute first to see if it can play a particular video file. If it 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.”
Thanks Mark
Now that everything is cleared up. You might also want to add a height and width to you <video> tag. So the final thing looks like.
<!doctype html>
<html>
<head>
<title>HTML5 Video </title>
</head>
<body>
<video controls=”" width=”400″ height=”400″>
<source src=”new-years-eve.m4v” type=‘video/mp4; codecs=”avc1.42E01E, mp4a.40.2″‘>
<source src=”new-years-eve.ogv” type=‘video/ogg; codecs=”theora, vorbis”‘>
</video>
</body>
</html>
And that’s it! If you check out your page in the most recent versions of firefox, safari, or chrome you will see beautiful HTML5 video!
Go to my website and check out this example of HTML5 video.
There is much more to know about HTML5 <video> and this is only a tiny primer. For a much much more exhaustive look at HTML5 <video> check out the video section in Mark Pilgrim’s amazing work Dive into HTML5 (yes I realize how many time’s I’ve linked to that in this article. It is really that good of an online book).
Or you can always check out what the HTML5 specification has to say about video.
As always I appreciate any feedback (please correct me if you see errors or omissions). Thanks for reading and stay tuned for more in this series of HTML5 tutorials.
No tags
