Cardona Designs | Setting Standards

HTML5 <video>

Web apps vs Native apps

Let’s make the web faster…

So many emails….

Carlos Cardona’s DNA genotype

SuperAbuser

Standards…. what are those?

May/10

23

Google IO thoughts #1 – Google TV

Google came on really strong this week at IO. It has taken me several days to process all of the announcements and I am just starting to grok what happened. There was so much that I am going to approach it in several posts. My first post is Google TV.

First let me say that I knew about Google TV the night before the public announcement. I was playing the IO SCVNGR hunt and couldn’t find the barcode on the water fountain. I wandered upstairs and was told by a big security guard that the only water fountain on this floor was “that one over there.” I walked where he was pointing and found myself in the main hall where the keynote is. There on the screen in huge letters was “GOOGLE TV – TV meets web, web meets TV.” Yes, I blew the opportunity to snap a photo and send it to Techcrunch.

I don’t own a TV and hardly ever watch one. All of my media is consumed through my laptop, ipad, android devices, ipod touch, or good ole fashion book. I just don’t like TV. To me it is an offensive medium. The shows are sensational and lowest common denominator. The ads are obtrusive and irrelevant. The fact that you have to watch things on schedule is outdated. TV to me represents one of the last holdovers from the old age. The age of one to many.

The web on the other hand is like an infinite faceted jewel. It is something different to each person. Watch what you want when you want. Go from the mainstream hits all the way down the long tail to the super niche. Text, video, music, games, and data all mashed up into compelling web apps that are accessible 24 hours a day from your computer or mobile device.

TV has been waiting to be rethought. As Google pointed out during the keynote–television is a $70 billion a year advertising market. It’s the broadest market on earth. But like I said, the problem is that it’s lowest common denominator. You have to throw the largest net possible to scoop up as many people as possible. Enter Google TV.

Google TV’s interface is deceptively simple. It’s just a search box that drops down in a light-boxesque manner at the top of the screen. You type in a search term and it searches whats on tv right now – whats on tv in the future and whats on the web. Of course it uses a little AJAX to suggest terms from what you’ve typed in. During the keynote they typed in “Mother’s Day” and it suggested “Mothers Day MILF.” :)

At this point I was still basically not interested. Like I said, I don’t watch TV. But then they started showing Android on TV and that is when the scales fell off of my eyes. The first thing they showed that was really interesting was pushing an app from a pc to the TV. They fired up the marketplace. Bought an app and told the app to be downloaded on the TV. In real time the TV started downloading the app. This is pretty cool.

Then they showed pushing a website from the pc to the mobile phone. They fired up the browser on the PC and went to a website. Then acting like it was time to leave they sent that exact site to the phone. In real time the browser opened on the phone with the website. That is also pretty cool.

Next they brought up a google map on the computer and pushed it out the the phone in real time. When you combine these three situations you have something that is extremely compelling.

Imagine being able to get an app and push it between your phone, your pc/mac, and your big screen tv. Also imagine surfing a website and pushing it between your phone, mac/pc, and TV. That is a very exciting situation. To top it off you have the entire Android platform built into the TV. This opens up the potential for an entirely new generation of applications that will be suited to that environment.

Android still very much has a UI issue when compared to the iPhone. It just isn’t as elegant. There aren’t the smooth animations between orientation changes. And the accelerometer only recognized 2 orientations compared to the iPhones 4. The marketplace was revamped but could still use a little polish. But all in all the Android platform has made some serious strides very quickly.

The Google TV announcement part of the keynote was one of the most uncomfortable I have ever seen. It was a total fail. All of the geeks in the crowd were slurping up the bandwidth and these poor guys couldn’t even get the thing to work properly. All the while there were 8 CEO’s backstage getting ready to come out and talk about how great it was. On top of this they had actual tv playing on the two huge screens on both sides of the stage. So we literally saw somebody bonging a beer on the evening news. Some news reports about child abuse and war. Stupid and offensive TV commercials. It was the epitome of evening american television and it seemed to go on forever. I truly felt bad for these guys.

But I can take a step back and look at the big picture and realize that this is the beginning of a big shift for television. TV now gets modern in a big way. It will also grow on an innovation rate with android now. And android is on fire. This is exciting.

Below are some pictures from the first day after party and keynote. Keep in mind this is before they gave us the EVO and my droid’s camera isn’t that great. And yes that is the actual IO podium :)

May/10

22

Maker Faire 2010

This year I attended the Maker Faire—an amazing gathering of makers of all things creative and eccentric. This is a place where hardware hackers meet with art car builders with a small dose of model battleship enthusiasts thrown in for variety. I have never witnessed a gathering of this kind and can only say that if you have kids this is a MUST ATTEND.

The Maker Faire gave me a good chance to test out the camera on the new HTC EVO that Google gave me a couple of days ago. All in all the 8 megapixel camera is really nice and I think the pictures turned out great.

No tags

May/10

13

Carlos Cardona’s DNA genotype

Recently I had my DNA genotyped. I have been wanting to do this for years and had the chance to do it with a company that I have been interested in and decided to take the chance. I opted to have my ancestry and my disease predisposition made known to me and have decided to post the results into the public.

“BUT WAIT!” I hear you screaming. “Isn’t this important private  information? Won’t this affect what medical insurance you can get? Isn’t this revealing too much about yourself?” Possibly, in fact probably. But I am doing this to underscore a point about my life. My life is an open book. I have mentioned before my passions (the web, uplifting the human condition, art & music). I have mentioned before my triumphs (family, job, life). And I have mentioned my great failures (drug related criminal record, drug use as a young adult). Everything about me is public. I have no secrets to hide from you as you have no secrets to hide from me.

I also had my DNA genotyped and am sharing the information because I am on a quest of self discovery. Both figuratively and quite literaly. It is my hope that this information brings me further along that quest. It is also my hope that by revealing such intimate information about myself that I inspire you to consider opening up information about yourself. After all – we live in public.

No tags

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

<< Latest posts

Older posts >>

Theme Design by devolux.nh2.me