(part of MaemoBlog)

User Interface Sketches

---

work in progress draft of ideas how the user interface could look. If you have comments, I'm "tigert" on #maemo in freenode.

---

Main view

.=[ Maemo Blog ]=====================. (main toplevel window)
| Main                               | <- "breadcrumb" navigation trail like in app installer
|------------------------------------|
|                                    |
| Select blog                        |                       ____________________
|   [ wtf.blogger.com         |v]    | <= a dropdown menu:  [ wtf.blogger.com    |v]
|                                    |                      | another.blog.com   | <- list of configured
| Actions                            |                      | mydog.blogspot.com |    blogs
|  [ Write a new post           ]    | <- buttons           | ------------------ |
|  [ Edit existing posts        ]    |                      | Manage blogs...    | <- dialog to edit blog
|                                    |                      `--------------------'    account data
`------------------------------------'                      

/!\ This kind of html snippet could be used to ask questions from this document's author :-)

New account editor

.=[ New blog account ]======================. (modal popup dialog)
|-------------------------------------------|
| Looks like you are using MaemoBlog for    | < this page is just shown for the very first time
| the first time. Awesome!                  |   the user starts MaemoBlog
|                                           |
| To get started, we need to know           |
| some things about your blog.              |
|                                           |
| Tap "Next" to continue                    |
|-------------------------------------------|
| : Finish :: Previous :[ Next ][ Cancel ]  | <- : Button : is a disabled button, [ Button ] is enabled.
`-------------------------------------------'

.=[ New blog account ]======================. (modal popup dialog)
|-------------------------------------------|
| What is your blog's web address?          |
| Address: [ http://myblog.com            ] |
|                                           |
| After you click "Next", MaemoBlog will    | 
| access your blog and will attempt to      | 
| discover all the required settings.       |
|                                           |
|-------------------------------------------|
| : Finish :[ Previous ][ Next ][ Cancel ]  |
`-------------------------------------------'

At this point, we need to query the web address for possibley RSD (Really Simple Discovery) meta-tags and do some other educated quesses if possible, which then will let us present the user with just an username and password field for the following page of the wizard:

.=[ New blog account ]======================. (modal popup dialog)
|-------------------------------------------|
| Enter your user name and password         |
| User name: [ alice                      ] |
|  Password: [ ***                        ] |
|                                           |
|            [ Advanced settings... ]       |
|                                           |
|-------------------------------------------|
| [ Finish ][ Previous ]: Next :[ Cancel ]  | -> user clicks Finish when done
`-------------------------------------------'

Advanced Settings

.=[ Advanced settings ]==============. (modal popup dialog)
|------------------------------------|
|   Blog API: [ MetaWebLog       |v] |
| XMLRPC URI: [                    ] |
|     Images: scale to [450 ] pixels |
|                                    |
|                                    | <- what else is needed?
|                                    |
|------------------------------------|
|          [ OK ] [ Cancel ]         |
`------------------------------------'

Once the login credentials are supplied, the tool should probe the site and try whether a login is successful. If the login fails, we must present a simple error dialog - otherwise we are done with the account creation, and should return to the "home view" with the newly created blog selected:

.=[ Maemo Blog ]=====================. (main toplevel window)
| Main                               | <- "breadcrumb" navigation trail like in app installer
|------------------------------------|
|                                    |
| Select blog                        |
|   [ myblog.com              |v]    |
|                                    |
| Actions                            |
|  [ Write a new post           ]    |
|  [ Edit existing posts        ]    |
|                                    |
`------------------------------------'                      

Manage blogs

.=[ Manage blogs ]===================. (modal popup dialog)
|------------------------------------|
| wtf.blogger.com                    | <- list of blogs
| mydog.blogspot.com                 |
| My weblog                          |
|                                    |
|------------------------------------|
| [ New ] [ Edit ] [ Del  ] [ Close] | <- action buttons
`------------------------------------'

Edit a blog's settings afterwards

Editing a blog's settings afterwards presents the user with the wizard dialog but with all the info pre-filled.

New Post

Need to determine the toolbar button layout still.