Cardona Designs | Setting Standards

Archive for April 2010

Apr/10

25

My thoughts regarding the Facebook F8 announcments:

where to even begin….

On a macro note I think this is the beginning of Facebook really really coming into focus on whatever it is ultimately going to become. Attempting to tackle the semantic web is huge and they are taking a very unique and untried approach. There team is waaay smart and they obviously get the web.

On a micro note my suspicion is that the simple gesture of “liking” something will be really natural and nonchalant. I already “like” things often in Google Buzz. I haven’t looked too closely at the API but there were emails going around today on the HTML5 working group mailing list mentioning that it is based on RDFa. I superficially understand RDF (subject-object-predicate expressions. lame examples: Carlos is 29 or Carlos Cardona has the initials CC). I think I got off point..

:)

On the flip side there are the usual privacy concerns. From what I understand the Open Graph is opt-out. So we will see what unfolds there.

Also I thought it was interesting how Bret Taylor, the engineer who came to facebook with the friendfeed acquisition, played such an important role in the keynote and afterward press session. It seemed like he was #2, which surprised me.

Finally, for a brief moment I wondered if this company wasn’t going to be as big as google in 5 years. Which of course is the cliche and meme going around the web today, but I really did ask myself that.

But I kinda forsee one problem. The link that google reverse engineered, the <a href=”">hyperlink</a>, is fundamental to the web. It’s just natural to link from one document to another, hence the web’s creation, growth, ubitquity, etc. The current web is overwhelmingly a link economy. I don’t know that “liking” things will be as natural or ubiquitous as a hyperlink. It’s not that I doubt that it can be. It’s just that I don’t know if it will have the pervasiveness of <a href=”"></a>.

Double finally, I don’t think it’s a great idea that only one company has control of the semantic web. OpenLike much?

Your thoughts?

No tags

Apr/10

25

Time—the ultimate scarcity economy

I’ve been thinking how time is the ultimate scarcity economy. There is only so much time in a day. I only have so many years before I die. I only have so much attention to spread around and everyday there is too much new stuff to know and learn. Time is the ultimate scarcity economy That is why it is so hard to get people to try new things. They too, whether they realize it or not, at least sense that they have a finite amount of time to do things and an infinite variety of choice. You might say, “What if you could live forever or at least extend your life?” That doesn’t solve the problem because the longer you live the more stuff there is going to be to occupy your attention. It’s not as if you live long enough you will be able to see and know all things. “But what if you could slow down time and experience everything in every moment before moving on to the next moment?” That doesn’t seem to work because a crucial part of living and experiencing is flowing in time with those around us. It might just be that time really is the ultimate scarcity economy. Theres only so much time to go around. Don’t waste your time. :)

No tags

Apr/10

8

Text to speech on the iPad Tutorial

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.

iPad homescreen

Step 2 Choose General Settings

The left hand column has list items for all of the different parts of the iPad. Choose General

iPad settings

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.

iPad Settings Page

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.

iPad Accesssibilty settings

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.iPad settings page

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.

iBook screenshot

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

Apr/10

6

iPad Portrait and Landscape CSS 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:

ipad portrait orientation screenshot

In landscape orientation the website looks like this:

ipad landscape orientation screenshot

Although this appears to be two different pages it is actually one small bit of html that is served a different css file depending on which way the iPad is being held.

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

Earlier today Mashable posted an article on a site that supposedly allowed you to see what your site looked like on the iPad. This claim was quickly shot down by another blog that tested their site on an actual iPad and found more than a few differences. I think we can all agree that there is gonna be a rush to format webpages to look and interact great with an iPad similar to all of the iPhone optimized sites out there. Luckily Apple provides us with a quasi-simple method of actually seeing what our website would look like without relying on any third party hacks.

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.

Next, open Safari’s Advanced Preference pane. Check the checkbox next to “Show Develop menu in menu bar.”

After this from the drop-down menu select Develop -> User Agent -> Other  You will see a prompt that says “Type a custom user agent string for this page”  like the picture below. Copy the  iPad user agent string from above and paste in it into the dialog box that appears.

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

Apr/10

5

I helped break a story on Techcrunch!

Earlier today I got an email from Google saying that they were sending me a free Motorola Droid for attending the Google I/O conference. The only thing is the conference isn’t until May! That’s right, Google is sending out free phones over a month before the conference. They are doing this to drum up attention and give the developers enough time to get to know the phone before the conference. I also think that Google might be trying to lift the spirits of the Android community amidst this overwhelming iPad celebration. So I went to Techmeme and Techcrunch and looked to see if anyone had reported this and noticed that it wasn’t yet a meme. So I dropped an email to the tip@techcrunch email to tell them about it. And to the team at Techcrunchs credit they emailed me back and it was live on the web in about 5 minutes. And now it is on the front page of Techmeme. Wow the web is quick! Thanks to Jason at Techcrunch for the hat tip. Here is the Techcrunch article: Google Shipping All I/O Attendees A Free Droid Or Nexus One Before The Conference

No tags

Apr/10

4

Using php to detect the iPad Browser/User Agent

wolfram alpha ipad app screenshotLike 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

Apr/10

1

The HTML5 <video> goldrush is on

Now that the ipad is launching this weekend without flash video support many of the web’s top video sites are launching an HTML5 stream to make sure their sites work on this new device. This includes youtubebrightcoveNBCABCTED, and many more. This is the coming of age of HTML5 and the beginning of web developers worldwide taking the plunge into the wonderful new world of multi-media that is native to the markup. This is pretty much a starting signal for web developers around the world to start using <video> instead of flash. Never again should your video not work on an iPhone or iPod! Never again will you struggle with complicated hacks to get your video to play. Now you simply add <video src=”" controls></video> and your problems are solved. Right? Hold one second. Last time I checked HTML5 wasn’t even a W3C Recommendation. Which means that there are some parts of it that are not totally complete yet. Which parts you might be asking yourself? Why, <video> of course. Yep, thats right. Even though all of these companies are launching “HTML5″ <video> streams in time for the iPad, the <video> element in HTML5 isn’t even finished. The problem comes with video encoding and licensing. Let’s start at the beginning shall we? Right now there are 2 main ways that people encode their video online. One is Ogg Theora and the other is h.264. Theora is owned by some open source types. They encourage anyone to license and use their algorithm, totally free of charge. h.264 is owned by some big scary lawyer types. They say that to use their encoding algorithm they want to get paid. How much? It varies, but it ain’t cheap. Now that money doesn’t come out of my nor your pocket. No, its companies like Google and Apple that have web browsers or big video sites that pay that licensing fee. They argue that h.264 is the most efficient algorithm to encode with and worth the price if it allows them to remain kings of the cloud. Chris DeBona of Google even 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.” On the other side of the web is Firefox which is based around an open source ideology. They don’t have any trouble paying the fat licensing fee but they argue that any future startup might not be able to raise that kind of money just to use the h.264 licensing fee thus preventing them from entering the web ecosphere. On that principle alone Firefox has decided to not support h.264 and has went with .ogg instead. There are debates about which encoding algorithm is better. But it appears if those debates are about to be silenced. And that is really what this post is all about. Once upon a time .ogg was the codec that was actually mentioned in the official HTML5 specification. Then on one fateful day it was dropped from the spec all together. At the current moment there is no codec that is mentioned in the specification. It is a figurative black hole at the center of all HTML5 <video>. And it is now being filled with what is becoming the defacto codec—h.264. Last year Google acquired video compression company On2 for around 100 million dollars. Since then many of us have feebly hoped that they would appropriately license their new video codec and then use their overwhelming strength on the WHATWG(Web Hypertext Application Technology Working Group) to make this the new codec in the HTML5 spec. But alas, our hopes and dreams have gone unanswered. So now we have the iPad and “HTML5 <video>” – and the fat licensing fee. :(

No tags

Theme Design by devolux.nh2.me