Guide: Creating a Web App From Scratch

If you’ve been looking for a complete guide to creating a web app, look no further. The guide is called Creating a Web App From Scratch by CSS-Tricks.com It even comes with the complete source code files and Photoshop documents. The 8 part guide is written by both a coder and a designer so you’ll learn how to fit your site to mobile devices and still use the rich content from a full website. Through the process they show you each step of building their demo site, Colored Lists.

If anyone has used this guide or ends up using it to create a mobile of their own, let us know what you thought in the comments. Or, if you know of other guides, share them too.

Part 1 – Planning the App: Basic Idea and Design
Part 2 – Planning the App: Database Architecture and Development Approach
Part 3 – Designing the App: Workflow Map and Photoshop Design
Part 4 – Designing the App: HTML and CSS
Part 5 – Developing the App: User Interaction
Part 6 – Developing the App: Adding AJAX Interactivity
Part 7 – Developing the App: List Interaction
Part 8 – Security & The Future

Google Wave Web App Now Working

I recently recieved my invite to Google Wave. The recent video we posted showed a preview of the web app but claimed it wasn’t available yet however I was able to get it to work. I was using a laptop on a data card and my iPhone on EDGE and it only took a couple seconds for it to update both ways. Here are a couple screenshots from the iPhone.

Google Wave iPhone Web App

Google recently started to release Google Wave. During their demo video a few months ago, they tried to show the iPhone web app but it wouldn’t work. Engadget recently made a video showing a little bit of the app. Here’s the video.

WunderMap – Fullscreen Radar Web App

I’ve had a bunch of people ask me lately how I got this full screen weather map on my iPhone so I thought I’d share it with you all. First, it’s a web app. Don’t be scared, it’s still really nice. Go to http://i.wund.com from your iPhone and pic the city you want the radar to start on. You can either search for it or Safari should ask if the app can use your current location. Once you do that, scroll down to the radar option and click on “View Full Screen WunderMap” located just under the radar image. Once this screen is open, tap the plus sign at the botton of the webpage. Tap “Add to Home Screen” and rename it to “Radar” or something short.

The kewl think about this map is that you can pinch and zoom just like Google Maps. You can zoom way out to see the whole country or way in down to county and city levels. You can also tap “Options” in the top right corner of the site to turn on animation and severe weather overlays and change to different Satellite views. Read more

Google Maps in Safari

So I got this Tweet last night about a web app version of Google Maps for the Palm Pre that works on the iPhone. Actually it works in my computer’s browser. What the computer browser doesn’t do is track my location. That’s right, I got this pop up when accessing the page in my 2nd Gen iPhone 3G running iPhone firmware 3.0 Beta 5 while in Safari:

I tested it on Brooke’s iPhone, which is a 2nd Gen iPhone 3G running iPhone firmware 2.2.1, and I got this: Read more

Gmail

Available In: Safari

Price: Free

If you’re like me, you use the iPhone’s Mail app all the time. But if you use Gmail you should take a look at gmail.com using Safari. There’s been a lot of updates recently and Google is using HTML5 which makes the app really sweet. The video below shows you some of the features and how they look while in use.

Read more

Google Reader

Available In: Safari

Price: Free

This is a web app that I use every day. It’s a nicely iPhone optimized website for Google Reader. Google Reader is one of the best RSS readers I’ve ever used. It’s web based but has a lot of features. You have access to all your feeds indivudually or all at once. You can also star items, share them, email them, add notes, etc. It’s very fast easy to navigate on the iPhone. Tapping the title expands the article with out refreshing the page. Read more

Now Edit Google Docs Spreadsheets On Your iPhone or iPod Touch

Available In: Safari

Price: Free

Finally, a feature long overdue! The ability to edit Google spreadsheets from your iPhone or iPod Touch (Android too). This does not include Documents, just Spreadsheets. This is a step in the right direction and will be great for those trying to track spending/budgets, travel/mileage, etc. It’s pretty easy and works well. Features include allowing you to add new rows, edit existing cells, sort by columns, and filter by terms. It would be better if it was a real app but this will do for now. Read more

pleasefixtheiphone.com – Wishlist of Fixes for the iPhone

Available In: Safari

Price: Free

Even thought I think that the iPhone is the best, I still have things I want fixed. Especially things that just should have always been there like video, MMS, every app in landscape, copy & paste, etc. Well now there is a list of all these “fixes” on a website called “Please Fix the iPhone“. There are both a desktop version and an iPhone version (auto adapts). It’s a huge list with almost 2,000 fixes being wished for. There’s also a list of “Already Fixed.” You can sort though them all sorts of ways and even search the list. Finally, and most importantly you can add your own item to the wish list. Here is a list of the top ten wishes at the time of writing this article. Read more

Twitter Search – search.twitter.com

Available In: Safari

Price: Free

Twitter’s search site, formerly owned by Summize, is something I use everyday to keep up on the latest Twitter trends. It’s really simple. You visit search.twitter.com on your iPhone or iPod touch. You type in your search term and tap search. There’s also an advanced search with more features. At the very bottom of the page there is a list of trending topics. Read more

Weather Underground – i.wund.com

Available In: Safari

Price: Free

I’ve used this web app forever and have never written about it so I thought I’d share it with you if you haven’t heard of it. I think it’s the best weather app I’ve seen so far. I’m biased because I use Weather Underground’s full site on my computer. Weather Underground for the iPhone is easy to get to, just go to i.wund.com.

Once there you can type in a city or zip in the search box and find your city. Read more

iPhone Web Apps for Monitoring the 2008 US Presidental Election

Available In: Safari

Price: Free

Tomorrow is the big day and we thought we’d help you get the best coverage of the US Presidential Elections of 2008 on your iPhone or iPod Touch. There are some kewl Apps in the app store but most are just poll tracking and not final results or news. I’ve looked over the top news sites and found only one with an entire site dedicated to the election coverage. CNN has, by far, the best web app for the election called the CNN Election Center. You can even put in your zip code and get local results of your state candidates running for state positions.

CNN’s site details the Presidential Election with a total percent of precincts reporting stat, number of electoral votes and total percentages for both candidates, a link to a Google web app that helps you find where to vote locally, and even videos. I’ve also listed a bunch of other news sites that are adapted for the iPhone, iPod Touch and other mobile devices. From your iPhone, you can click on them in this article and you will go right to them. Most have nice webclip icons. If you know of any other web apps covering the election, please let us know. Especially from countries other than the US. Read more

Woopra Web App

Available In: Safari

Price: Free

Woopra is a website analytics service like Google’s Analytics but it’s live. You can check out woopra.com for more about the service and desktop app but we’re gonna talk about the port to a web app for the iPhone. You basically download the files from here, edit the config file, upload them to your server, and you’re set! I’ve included detailed instructions below from Woopra’s blog and some screenshots. Read more

Flickr – Now iPhone Optimized!

Available via Safari

Price: Free

Flickr has launched a new iPhone optimized site. If you love flickr, you will LOVE their new mobile site! It offers basically all the functions of the “normal” flickr website. You are able to view recent activity, your recent activity, your contacts recent activity, your contact list, search, view comments, leave comments, view your favorites, sets and collections, star a photo, view the photo in a larger size…etc. It is really really nice. I was also surprised by how quickly the site runs. I was on WiFi and it ran really nicely!

The only thing the mobile site does not have is the ability to organize your photos and a slideshow option. You will definitely want to check it out to get the full feel of the new site. Just head over to m.flickr.com. Screenshots below. Read more

IBM Releases Lotus Notes via Web App

Available via Safari

Price: Free with Lotus Notes License

The wait is finally over. There has been talk for a long time that IBM was developing Lotus Notes for the iPhone. You can now access your email, calendars, and contacts if you have an existing Lotus Notes License. Surprisingly this is not available through an app in the App Store but via a web address using Safari. Just visit ibm.com/software/lotus/products/domino-web-access/ultralite to find out how to get it set up for your business. Below are some screenshots of the web app which IBM calls Lotus iNotes. Read more

Next Page »