The Mobile Web Dev Wears Juicy Couture: google

Showing posts with label google. Show all posts

Sunday, April 29, 2007

So You Want to Build Mobile Website - 1. Markup

Maybe I should write something I know about mobile web (wap) developement sometimes since the demand is getting bigger here in the US.

First, you may wonder what markup you should use. Your choice may depend on where you are, or where your target viewers are. For majority of people/regions, main choice is probably XHTML, but there're still plenty of people in the world use devices support only WML. (I'm taking to you, Google!). If you are creating wap site for those cute Japanese phones, you may want to write in CHTML. If you are in India, your best choice would be WML.

Here's a list of markups and DTDs (if required):

XHTML Basic

XML-based markup typically for handheld devices

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN"
"http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">

XHTML-MP

XHTML Mobile Profile. This is a variant of XHTML Basic, defined by Open Mobile Alliance. This is usually my choice. Yes, it supports CSS!

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.1//EN"
"http://www.wapforum.org/DTD/xhtml-mobile11.dtd">

WML

Wireless Markup Language. This is going to be phased out but majority of devices in India supports only WML. This is similar to HTML but there're lots of special tags not included in HTML. There're some features missing in XHTML, such as softkey configuration that I wish included in XHTML-MP.

<!DOCTYPE wml PUBLIC "-//PHONE.COM//DTD WML 1.1//EN"
"http://www.phone.com/dtd/wml11.dtd">

HDML

Handheld Device Markup Language, defined by Openwave. Some Japanese phones use this, and if I am not wrong, I think some Motorola (US) phones too.

CHTML

Compact HTML -similar to WML and HDML. Used only, yet big in Japan, and it works on Japan's DoCoMo's i-mode phones. More Japanese manifacturers started making devices that support XHTML so this will be pased out sooner or later.

MML

Mobile Markup Language. Another Japan-only markup and defined by J-Phone (now SoftBank Mobile) and Keio University. Who uses it anyway?

You must have notice there're too many (yes, I'd say too many) Japanese variants, but it looks like Japanese phone companies have started following global-standard way and more devices will support XHTML and replace the older devices soon.

Conclusion: Although I mentioned earlier that Google doesn't care about Indian users by not supporting WML, for majority of people, if you want to pick only one, I'd say you should write in XHTML.

I will write about more in details later.

Saturday, April 28, 2007

Is it real? - Google's Mobile Device Photo

The rumor about Google's phone has been around, and the recent New York Times article (Big Money in Little Screens) has confirmed it really does exist by saying:

Google has gone so far as to build a prototype phone with its own software inside, according to one person who has seen it.

Now, this the first time I saw a photo of the concept design. To be honest I don't believe it is real. It's just too ugly to trust.

Source: Engadget Mobile

Monday, April 09, 2007

Dare to Compare - Mobile Search

Soon after Yahoo! launched this new mobile search, oneSearch (news:Yahoo jumps ahead of Google on mobile phone search), Google tried to catch up with by adding a link to another search page with some new feature, just like Y!'s oneSearch (google.com/m). The images above are the actual screenshot of the serach result of "godzilla" on Yahoo oneSearch and Google's new search.

Also see this interesting comparison (pdf): Dare to Compare - Google vs. Yahoo!

Friday, January 05, 2007

Search 2.0?

Everything goes 2.0. What's next?
According to Read/WriteWeb, the next 2.0 is a "Search".

This article shows the results of the concepts to beat Google. The top idea of the next generation search is the Artificial Intelligence. Yet there's no true AI search engine on market yet, the closest possible so far is Hakia that I already liked it because more knowledge and news based results, mainly recently posted blog entries, are listed as the search results, and they are quite different from that of Google.

Here's a list of other suggestions:

Artificial Intelligence (e.g. Hakia, Powerset)
People Powered Search (e.g. del.icio.us, ChaCha)
Vertical Search (e.g. SimplyHired, Technorati)
Personalized Search (e.g. Collarity)
Clustering (e.g. Clusty, SearchMash)
Social Search (e.g. Eurekster, Rollyo)
Visualization (e.g. Quintura and Kartoo)
Previews (Snap, Live Image Search)

interesting.

Thursday, November 09, 2006

Gmail Mobile App

It's faster than Gmail mobile web and you can view attachments too!

View demo on web (on PC)

I feel that we (people here, in the US) are so behind of mobile technology, compared to Europe and Asia. Though we all have heard of the new term, "Mobile 2.0", I believe most of us don't get much benefit of because we are so stuck with phone provider's own business models (providing customers locked phones and charging fees for whatever services). I am hoping soon we are able to get some descent Wifi-enable mobile phones cheap and enjoy so-called Mobie 2.0, without worrying bills.
(BTW I just missed Mobile 2.0 Conferene here in SF... Stupid me.)

BTW, I was excite about that YouTube on Mobile, but I found out that they are in the process with Verizon (source: Mashable!). Verizon wil charge $15 per month for this service. Like I just mention, we are stuck with the providers plans.

Friday, November 03, 2006

YouTube to Go Mobile

According to MobileCrunch, YouTube will go mobile!

Currently, youTube allows you to upload from your mobile, but can't watch video on your mobile. In near future, you can watch videos in your hand!

Tuesday, October 17, 2006

Using Google Maps API - Part.4: Info Window

Let's add more functions on the SFO map example.

Opening a Info Window

To create a basic baloon-like floating "info window", call the openInfoWindow(htmlElement) method, passing it a location and a DOM element as an argument to create a text node.

map.openInfoWindow(new GLatLng(37.622934, -122.392159),
                   document.createTextNode("SFO"));

or, use similar method openInfoWindowHtml(htmlString) which takes an HTML string as its argument rather than a DOM element.

map.openInfoWindowHtml(
 new GLatLng(37.622934, -122.392159), "SFO");

Opening a Info Window on Click

Simply calling these methods above just display the info windows upon loading the map. If you want the info window opened by clicking a marker, you need to use event listeners. The static method, GEvent.addListener takes a marker as the 1st argument, the event as the 2nd argument, and a function as the 3rd argument. The events provided by GMap2 Class include; click, infowindowopen and infowindowclose. To open a info window on click, write:

GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml("SFO<br/>CA 94128");
    });

Finally, to give the event to the custom icon previously made, create a new function to combine both displaying the icon and call the click event. The function createMarker takes four arguments, latitude, longitude, icon image URL, and description (html).

In addition to the GIcon properties previously set, define infoWindowAnchor and infoShadowAnchor as well.

var desc_sfo ="SFO - San Francisco Intl Airport<br/>CA 94128";
var marker_sfo = createMarker(37.622934, -122.392159, "icons/sfo.png", desc_sfo);
map.addOverlay(marker_sfo);

function createMarker(lat, lng, ico, html) {
 var point = new GLatLng(lat, lng);
 
 if (ico!=null) {
  var icon = new GIcon();
  icon.image = ico;
  icon.shadow = "http://www.google.com/mapfiles/shadow50.png";
  icon.iconSize = new GSize(26, 44);
  icon.shadowSize = new GSize(50, 44);
  icon.iconAnchor = new GPoint(13, 44);
  icon.infoWindowAnchor = new GPoint(9, 2);
  icon.infoShadowAnchor = new GPoint(18, 25);
 }
 var marker = new GMarker(point, icon);
 GEvent.addListener(marker, 'click', function() {
  marker.openInfoWindowHtml(html);
  });
  return marker;
}

Monday, October 16, 2006

Using Google Maps API - Part.3: Create a Custom Icon

Let's continue on the quick guide of using Google Map API.

Using Custom Icons

The hardest part is creating graphics for your marker image and its shadow with Photoshop or something. The icons should be cretaed in 24-bit png format. For this example, I just tweaked the default icon (the color changed to blue, made it bigger, and typed "SFO" in it!) and used default shadow.

To replace the generic icon to your custom icon, add this code in the last script, before the line that begins with var marker = ...

var icon = new GIcon();
icon.image = "icons/sfo.png";
icon.shadow = "http://www.google.com/mapfiles/shadow50.png";
icon.iconSize = new GSize(26, 44);
icon.shadowSize = new GSize(50, 44);
icon.iconAnchor = new GPoint(13, 44);

First, create a new icon instance (line 1).
Next two lines indicate icon/shadow image source path or URL. (I use default shadow image on Google server).
Next two specifies the image dimention in pixels.
icon Anchor point of the icon is the "pointy" tip where also its shadow image originates. In this case, the anchor point is 13 pixels over and 44 pixels down from the top-left corner of the SFO icon, and this is defined by iconAnchor (line 6).

Location of the marker is defined by GMarker, just as you see in the last example, except, this time you need to add the 2nd paramter to include the custom icon. Finally, call addOverlay() method to dispaly thr marker icon.

var marker = new GMarker(new GLatLng(37.622934, -122.392159), icon);
map.addOverlay(marker);

Next: Opening an Info Window

Thursday, October 12, 2006

Using Google Maps API - Basic Map Part.2 (Source Code)

The entire XHTML code (so far) looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=YOUR_KEY"
      type="text/javascript"></script>

 <style type="text/css">
  body { font:12px Arial,Verdana,Helvetica,sans-serif;}
  #mapSFO {height: 300px; width: 350px;}
 </style>
  </head>
  <body>
 <!-- No JavaScript Message -->
   <noscript>
 <div class="noscript">
 <b>JavaScript must be enabled in order for you to use Google Maps.</b> <br/><br/>
      It seems JavaScript is either disabled or not supported by your browser. 
      To view Google Maps, please enable JavaScript by changing your browser options, and then 
      try again.
  </div>
    </noscript>
 
 <!-- Map Placeholder -->
 <div id="mapSFO"></div>
 
 <script type="text/javascript">
    //<![CDATA[
 
 var map = new GMap2(document.getElementById("mapSFO"));
 map.setCenter(new GLatLng(37.632934, -122.392159), 12);
 map.addControl(new GLargeMapControl());
 map.addControl(new GMapTypeControl());
 map.addControl(new GScaleControl());
 
 var marker = new GMarker(new GLatLng(37.622934, -122.392159));
 map.addOverlay(marker);
    </script>
  </body>
</html>

See Screenshot of the sample map.

Using Google Maps API - Basic Map Part.1

Here's a quick start guide of using Google Map API.

Before Started

Sign up for the Google Maps API
Copy the generated key
Prepare to write a standards-compliant XHTML page with an appropriateDOCTYPE.

Get Started

Let's create a map indicating San Francisco International Airport (SFO).
First, include Google Maps JavaScript code source and your CSS in <head> section of HTML.

<script src="http://maps.google.com/maps?file=api&v=2&key=COPY_THE_KEY"
      type="text/javascript"></script>

<style type="text/css">
#mapSFO {height: 300px; width: 350px;}
</style>

Next, in <body>, create a placeholder of a map within a <div> with the map ID ("mapSFO").

Then creates a JavaScript GMap2 object to display a map. This GMap2 class represents a single map on the page. The center location of the map is defined in the next line, by latitude and longitude. The second parameter indicates the zoom level. 0 is most zoomed out and 17 is most detailed. (You can find any Latitude and longitude you want from geocoder.us)

<div id="mapSFO"></div>

<script type="text/javascript">
  //<![CDATA[ 
  var map = new GMap2(document.getElementById("mapSFO"));
  map.setCenter(new GLatLng(37.632934, -122.392159), 12);
</script>

View in browser. Now the map of SFO area is displayed.

Adding Controls

Optionally, you can add controls to the map with the addControl method.

  map.addControl(new GLargeMapControl());
  map.addControl(new GMapTypeControl());
  map.addControl(new GScaleControl());

See how the controls are added:

Also try; GSmallMapControl to see how it looks like!

Display a Marker

Displaying map markers is defined by GMarker. This uses the default red Google Maps icon unless specified. In this example, I use GLatLang method to define the location of SFO, since I've set the center of the map slightly off in the beginning. You can use getCenter() method to display a marker at center.
Finally, call addOverlay() method to dispaly thr marker icon.

  var marker = new GMarker(new GLatLng(37.622934, -122.392159));
  map.addOverlay(marker);

This is how it looks like in browser:

See the entire XHTML

OK. I will post the rest later when I have time.
(Next: Using Custom Icons, and Opening an Info Window)

Tuesday, October 10, 2006

Happy Chad and Steve - Google Buys YouTube for $1.65 billion

Whoa. They are rich. Can't stop smirking.

Friday, August 04, 2006

Google/Yahoo! SMS

Send SMS to somebody's phone From PC:
Google Send To Phone
Yahoo! Mobile (Send Message from Your PC)

Send SMS to Google from mobile phone:

Start a new text message and type in your search query
Send the message to the number "46645" (GOOGL)
You'll receive text message(s) with results

Tip: For help send the word 'help' as a text message to 46645.

What you can search with Google SMS:

Business listings (Sample Query: pizza 10013)
Residential listings from PhoneBook(Sample Query: john smith palo alto ca)
Driving Directions (Sample Query: pasadena ca to santa monica)
Movie Showtimes (Sample Query: king kong 94103)
Weather (Sample Query: wx houston tx)
Stock Quotes (Sample Query: wmt for Wal-Mart)
Q&A (Sample Query: population of Japan)
Product Prices (Sample Query: Price ipod 20gb)
Definitions (Sample Query: d crepuscular)
Sports (Sample Query: chicago bulls)
More useful information (Caluculator, Translation, Currency conversion, Area code look-up, Zip code look-up)

Tuesday, April 25, 2006

Google Maps Mobile Beta

Google Map on Nokia 6670

Cool. I just installed a copy of Google Maps Mobile Beta on Nokia 6670 to test.

This sounds like the Google Maps that everybody knows on web, but actually is a stand-alone application that runs on mobile phone, so you don't have to wait for mobithe map to load via slow GPRS connection.

To make it clear, the map on mobile web is now called "Google Local" and differetiate it from the app. It's frustrating to navigate if your phone doesn't equip with Wifi. (Mobile URL: http://mobile.google.com/local)

Anyway, on this Google Maps, You can view the map in satellite view, just like the desktop web version, and also, the feature I like is that you can search some local restaurants and it gives you an option to make a call directly.

A list of the supported devices is here. The device and the provider I am using is Nokia 6670 and Cingular by the way.

If you 'd like to test it on desktop browser, go to Java demo page.

(This blog entry was originally written on Apr.25 for my other blog and copied on Blogger on Sept.26)