As a web developer, I hadn’t decided to focus on front-end work until another developer told me about Firebug.
When I started targeting mobile, I switched to the Developer Tools suite (DevTools) built in to Google’s Chrome browser.
When the iPhone concept started taking shape at Apple, installed apps were not given much consideration. No plan existed for an installed app marketplace because the WebKit-based iOS Safari mobile browser would be able to do all the work,* thus allowing web apps to be written in a unified standard. And that unified standard would be platform-independent; it would also never need a software update.
* WebKit is the code-base for the DOM and layout rendering engines in all versions of Safari, Chrome, Android’s “anonymous” default browser (it’s even going to be powering your cable box in the coming years).
Listed in detail below, these three steps are as follows:
- Add the “apple-mobile-web-app-capable” meta tag to the head of your html file.
- Add the “apple-mobile-web-app-status-bar-style” meta tag to the head of your html file.
- Suggest users add your web app to their home screen.
STEP 1: Add the “apple-mobile-web-app-capable” meta tag to the head of your html file.
<meta name="apple-mobile-web-app-capable" content="yes" />
When users are visiting your web app from within Safari mobile, they can choose to bookmark it and add it to their iOS home screen. Using the aforementioned meta tag will remove the bottom browser chrome, but only when users visit your web app via their home screen shortcut. This has been a feature since iOS 2.1 and the official Apple documentation on this is available in Apple’s Safari Developer Library.
STEP 2: Add the “apple-mobile-web-app-status-bar-style” meta tag to the head of your html file.
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
No one’s yet discovered a means of removing the iOS status bar while running Safari mobile. Even step one (when fully implemented) won’t do the trick. The only workaround is to use the “apple-mobile-web-app-status-bar-style” with a very specific “black-translucent” setting.
When used with trick #1, this meta tag will force the status bar and browser into separate layer depths — the background of the status bar is set to black, but with only a 50% opacity. So, technically, you’ve got a full screen, but you have to live with the semi-opaque status bar on top of your web pages.
The other two valid values are “default” and “black”, but neither of these create the layering effect like “black-translucent” does.
EXAMPLE: I’ve tried it out on a weather app I’m building — remember to add the home screen shortcut and launch the web app from there.
STEP 3: Suggest users add your web app to their home screen.
This method will allow users to experience your web site in full screen mode with no visible browser chrome. Unfortunately, we are dependent on the user to make this happen. If they do follow through, we should encourage them to keep the icon on their home screen. This means we should give them some good icons and make sure they’re right for the phone and easily recognizable. I’ll cover that in another post.
Can’t wait until this is available on iOS Safari mobile.
From your browser you can now upload pictures and videos from the camera as well as sounds from the microphone.
The other big Google April Fool’s Day joke:
As a Google Autocompleter, you’ll be expected to successfully guess a user’s intention as he or she starts typing instantly. In a fraction of a second, you’ll need to type in your prediction that will be added to the list of suggestions given by Google. Don’t worry, after a few million predictions you’ll grow the required reflexes.
In February of 2010 Google announced they’d be picking one lucky city where they’d build a fiber to the home test network, offering between 50,000 and 500,000 users 1 Gbps fiber connectivity. The announcement immediately created wave upon wave of free PR for Google as more than 1,000 cities vied for the search giant’s attentions. However, after Google delayed the project last December, some started wondering if Google was wavering on the plan.
If you’ve used Google Maps in a major metropolitain area, you may have noticed one or two “neighborhood labels” that seemed bizarre and new to you even though you know the area quite well.
Here is a link to Home Junction on Google Maps.
As best as I can determine, some of these names go back to the 1960s. The reason I think that is because of a little area in west Los Angeles that on Google Maps is labelled Home Junction.
If you look at the intersection of the Santa Monica freeway and the San Diego freeway (I-10 and I-405 respectively), Google Earth has a little label for the area and that label says “Home Junction.”
In fact, if you drive around the area where National crosses under the 405 there is one of those weird blue City of LA signs denoting that you are in a “named region” of the city. It also says, “Home Junction.”
Home Junction? WTF is that? I like to think I know the west L.A. area quite well — between the different neighborhoods and their historic origins — I find that stuff interesting. Palms, Sawtelle, Mar Vista, Rancho Park — it’s my albatross.
So, what I’ve pieced together is this: the junction was so named because it was the meeting point between the spur line and the main trolleyway that once connected Santa Monica with downtown Los Angeles. The spur line connected to the Veterans Administration facility via a little street called Sawtelle. Back then the VA was called “The Old Soldiers’ Home”, hence, Home Junction.