New Mainscreen Layout - iStanford?

[StanRB]

I just wanted to see if anybody has experience with using iUI and
setting up a different looking main-page/screen? I have posted an
example from iStanford where the different "sub-apps" are presented in
a similar manner as they would be on the springboard. Any ideas how to
achieve this? The first thing that popped in my head was a static
image with a map... This is for my university - we are planning on
having a similar "app" suite and want it to all be web-based. We don't
like native apps ;).

http://home.adelphi.edu/~sb17776/iStanford.png

I hope I am asking the question correctly...

Stan

[Remi Grumeau]

First : static image with a map on it is evil, just like iframe or
facebook.com :-)
I think the best way to achieve this goal is a custom CSS work.

Keep in mind that iUI is a framework that easily do the basics ... but
since you want/need some custom enhancement, you'll have to develop it
like in any other case/language/platform. And since it's only in 0.40,
big stuffs are here but a lot of things are still to be developped
(like fullscreen, sliding bottom menu, icon lists, ... )

Btw, it would be nice if you can create and develop this icon homepage
as a third-party plugin, in the sandbox ;-)

Remi

> --
>
> You received this message because you are subscribed to the Google Groups "iPhoneWebDev" group.
> To post to this group, send email to iphone...@googlegroups.com.
> To unsubscribe from this group, send email to iphonewebdev...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/iphonewebdev?hl=.
>
>
>

[Chris Collett]

Check out jPint: http://iphoneized.com/2009/05/jpint-webbased-iphone-development/

[Paul Carew]

Remi,
Please explain why you are so anti "images with maps" or iFrames?
They are both standardized and long standing features of HTML.

Best Regards

--
Paul Carew
E: Paul.Carew( at )CloseReachCommunications.com
W: www.CloseReachCommunications.com

[Remi Grumeau]

for iframe, it was just a joke (if you don't care about SEO)

for image map, you will get no rollover, no order customization, can't
just update one image. if the map is f***, all your links are. What
about landscape / portrait ? centered fixed width content ?
Too bad ...

Sounds like a bad choice to me, and it's definitly not that long to
code it in CSS ...

Remi

> For more options, visit this group at http://groups.google.com/group/iphonewebdev?hl=en.
>
>
>

[StanRB]

jPint looks interesting. I will see if I can grab from it whatever I
need. Have you had experience combining jPint and iUI, Chris?

I agree iFrames (terrible on iPhone) and image maps are def. not the
way to go. I just were hoping someone had a ready solution.

And Remi - I will be actually making this for iUI. I am getting more
and more into the project. The reason is that I am kind of heading a
mobile app development team at my University and we are working on an
app for the school. I pushed for it being a webapp and for us using
iUI as a start. But as you can imagine - we will be developing and
tinkering with the framework a lot in order to make it do all we want.
And all we want is a lot LOL... We want to make the next "iStanford"
app fully in the cloud!

I'll keep you posted what we do with this, but:

Does anybody else care to comment? Anybody done that before?

Cheers!

Stan

On Nov 18, 1:33 pm, Chris Collett <chris.j.coll...@gmail.com> wrote:
> Check out jPint:http://iphoneized.com/2009/05/jpint-webbased-iphone-development/
>

> On Wed, Nov 18, 2009 at 1:04 PM, StanRB <stanislav.bogda...@gmail.com>wrote:
>
> > I just wanted to see if anybody has experience with using iUI and
> > setting up a different looking main-page/screen? I have posted an
> > example from iStanford where the different "sub-apps" are presented in
> > a similar manner as they would be on the springboard. Any ideas how to
> > achieve this? The first thing that popped in my head was a static
> > image with a map... This is for my university - we are planning on
> > having a similar "app" suite and want it to all be web-based. We don't
> > like native apps ;).
>

> >http://home.adelphi.edu/~sb17776/iStanford.png<http://home.adelphi.edu/%7Esb17776/iStanford.png>

>
> > I hope I am asking the question correctly...
>
> > Stan
>
> > --
>
> > You received this message because you are subscribed to the Google Groups
> > "iPhoneWebDev" group.
> > To post to this group, send email to iphone...@googlegroups.com.
> > To unsubscribe from this group, send email to

> > iphonewebdev...@googlegroups.com<iphonewebdev%2Bunsu...@googlegroups.com>
> > .

[Chris Collett]

I do not have any experience with jPint, sorry.

To unsubscribe from this group, send email to iphonewebdev...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/iphonewebdev?hl=en.

[Rémi Grumeau]

Neither

Sorry

Le 18 nov. 09 à 21:27, Chris Collett a écrit :

[00Vic]

I took a look at your screen shot. The springboard page shouldn't be
too hard for you to make. Start with a new css class springboard or
something like that. You can style all links on this page to look like
icons and then just float them left with appropriate spacing between
them. I think that would allow the layout to be flexible for screen
orientation issues. The hard part will be integrating with iUI,
especially if you don't want the toolbar at the top of your
springboard page. I am still an early intermediate user of iUI and web
design myself, but one quick way to get this up and running could be
to use the springboard as a gateway page to smaller iUI powered apps.
I looked at jPint mentioned on this thread and it looks like some of
these answers may indeed lie in that code if you want to pick it
apart. I think this springboard page class would make a cool third
party plug in as mentioned here too. Good Luck.

[Remi Grumeau]

Main "issue" i see is the way iPhone users are used to press the menu
button to get back to icons OS main set. If i launch your webapp,
click on an icon, it could seems normal that a new window pop ups
(with in it a main toolbar so this problem is solved).

But i would for sure press the menu button of the phone to get back to
main icons ... and it would get me back to the OS menu :) Arf

Should think about it in order to find a navigation solution to this
"issue" (quoted cause it's not an real buggy coding issue). Perhaps
the icon set idea is not that accurate and should be replaced by a
classic menu with icons on the left. nope ?

Remi

> --
>
> You received this message because you are subscribed to the Google Groups "iPhoneWebDev" group.
> To post to this group, send email to iphone...@googlegroups.com.
> To unsubscribe from this group, send email to iphonewebdev...@googlegroups.com.

> For more options, visit this group at http://groups.google.com/group/iphonewebdev?hl=.
>
>
>

[StanRB]

This is quite a lot of food for thought... Surprisingly this type of
design is the most popular one in education/university apps. Hm... It
does look a bit confusing but with some visual separation and maybe
even a note not to use the center button, it might work. The other
apps I have seen use the "back" button that shows up in iUI to lead to
that main "app suite" screen... When you have several things that need
to be part of the app:

Athletics
Library
Arts
News
Grades
Directory
Hours
ETC

You need a design that fits them conveniently on one screen so no
scrolling is required...

I'll start playing with this concept. Will post my progress here...

On Nov 19, 9:39 am, Remi Grumeau <remi.grum...@gmail.com> wrote:
> Main "issue" i see is the way iPhone users are used to press the menu
> button to get back to icons OS main set. If i launch your webapp,
> click on an icon, it could seems normal that a new window pop ups
> (with in it a main toolbar so this problem is solved).
>
> But i would for sure press the menu button of the phone to get back to
> main icons ... and it would get me back to the OS menu :) Arf
>
> Should think about it in order to find a navigation solution to this
> "issue" (quoted cause it's not an real buggy coding issue). Perhaps
> the icon set idea is not that accurate and should be replaced by a
> classic menu with icons on the left. nope ?
>
> Remi
>

[StanRB]

Ok... I am sure I am not doing this the cleanest way possible,
but... :).. I decided for a way to make it work and at the same time
keep the same iUI structure and the tab bar at the top to signal a
difference between this and the homescreen (hence discourage people to
press the home button to go back - the back button will be right there
in the tab bar). I looked at jPint and it was pretty much there - it
just needed tweaking and changing the code to fit what I had in mind
for iUI. I wanted all to be ONE "ul" element and to simply add a new
icon to the pseudo-springboard you just gotta add a simple "li"
element with an image and a word... Here is the code I used - plugged
in directly in the CSS - no other changes should be necessary - simply
add "style: springboard" to the "UL" element...

/
************************************************************************************************/
body > ul.springboard /*sets up the "ul" class for springboard type
arrangement*/
{
float: left;
position: relative;
margin: 0;
padding: 0;
background-color:#CCC; /*Change the background of the springboard
screen - image tag can be used*/
height:371px;
}

ul.springboard > li /*each springboard icon will be a separate "li"
within the "ul"*/
{
list-style-type: none;
margin: 15px 0px 0px 20px; padding: 0px; float: left; height: 67px;
width: 55px;
text-align: center;
line-height: 5px; /*distance of the text from the icon*/
border:none;
}
ul.springboard > li > a /*all this pretty much pertains to the text
under the icon*/
{
color: black;
font-size:12px;
font-weight: lighter;
width: 55px;
border: none;
padding-top: 67px;
}
ul.springboard > li > a > img /*this sets the icon properties*/
{
position: absolute; top: 0px; left: 0px;
width: 55px; height: 55px;
overflow: hidden;
border: none;
}
/
************************************************************************************************/


Did I get it ;)?

Cheers!

[Remi Grumeau]

humm ... some HTML to test with it ?

[StanRB]

Check it out in action here:

http://web.adelphi.edu/stan

This is a snippet from the html code that puts the class in action:

<ul id="home" title="Minimal" class="springboard" selected="true">
<li><a href="#TheBeatles"><img src="NavButtonCalendar.png"
title="Calendar">Athletics</a></li>
<li><a href="#TheBeatles"><img src="NavButtonMusic.png"
title="Music">Directory</a></li>
<li><a href="#TheBeatles"><img src="NavButtonNotes.png"
title="Notes">Library</a></li>
<li><a href="#TheBeatles"><img src="NavButtonMusic.png"
title="Credits">Arts</a></li>
<li><a href="#TheBeatles"><img
src="NavButtonCalendar.png" title="Calendar">Athletics</a></li>
<li><a href="#TheBeatles"><img src="NavButtonMusic.png"
title="Music">Directory</a></li>
<li><a href="#TheBeatles"><img src="NavButtonNotes.png"
title="Notes">Library</a></li>
<li><a href="#TheBeatles"><img
src="NavButtonCalendar.png" title="Calendar">Athletics</a></li>
<li><a href="#TheBeatles"><img src="NavButtonMusic.png"
title="Music">Directory</a></li>
<li><a href="#TheBeatles"><img src="NavButtonNotes.png"
title="Notes">Library</a></li>
<li><a href="#TheBeatles"><img src="NavButtonMusic.png"
title="Credits">Arts</a></li>
<li><a href="#TheBeatles"><img
src="NavButtonCalendar.png" title="Calendar">Athletics</a></li>
<li><a href="#TheBeatles"><img src="NavButtonMusic.png"
title="Music">Directory</a></li>
<li><a href="#TheBeatles"><img src="NavButtonNotes.png"
title="Notes">Library</a></li>

</ul>


That's all it is... Any other type of <li> elements or titles or
whatever CANNOT be present in this UL block as it looks fugly...

What do you think? Improvements?

[Chris Collett]

Looks great. New color scheme and some slick icons and you're on your way.....

[Remi Grumeau]

With generic icon (iUI touch used here)
http://www.remi-grumeau.com/iphone/
click on icon board

CSS

body > div.board /*sets up the "ul" class for board type
arrangement*/
{
float: left;
margin: 0px;
padding: 0px;
height: auto;
background: #000;
}
body > div.board[orient="landscape"] /*sets up the "ul" class for board type */
{
height: auto;
min-height: 255px;
}

div.board > ul
{
float: left;
min-height: 255px;
margin: 0;
padding: 0;
background: #000;
}

div.board > ul > li
{
float: left;
list-style: none;
list-style-position: inside;
width: auto;
margin: 0;
padding: 0;
}

div.board > ul > li > a /*all this pretty much pertains to the text
under the icon*/
{
display: block;
float: left;
width: 65px;
margin: 3px;
padding: 4px;
text-align: center;
text-decoration: none;
}
div.board > ul > li > a:active,
div.board > ul > li > a[selected]
{
background-color: #000 !important;
background-image: none !important;
}
div.board > ul > li > a > img /*this sets the icon properties*/
{
display: block;
width: auto;
height: auto;
border: none;
margin: 0px auto 2px auto;
}
div.board > ul > li > a > span /*this sets the icon properties*/
{
display: block;
width: 100%;
height: 15px;
text-align: center;
font-size: 11px;
color: #fff;
overflow: hidden;
text-overflow-mode: ellipsis;
white-space : nowrap;
}




HTML (board.php)

<div id="board" title="Board" class="board">
<ul>
<li><a href="#board1"><img src="medias/iui/iui-logo-touch-icon.png"
/><span>Icon label 1</span></a></li>
<li><a href="#board1"><img src="medias/iui/iui-logo-touch-icon.png"
/><span>Icon label 1</span></a></li>
<li><a href="#board1"><img src="medias/iui/iui-logo-touch-icon.png"
/><span>Icon label 1</span></a></li>
<li><a href="#board1"><img src="medias/iui/iui-logo-touch-icon.png"
/><span>Icon label 1</span></a></li>
<li><a href="#board1"><img src="medias/iui/iui-logo-touch-icon.png"
/><span>Icon label 1</span></a></li>
<li><a href="#board1"><img src="medias/iui/iui-logo-touch-icon.png"
/><span>Icon label 1</span></a></li>
<li><a href="#board1"><img src="medias/iui/iui-logo-touch-icon.png"
/><span>Icon label 1</span></a></li>
<li><a href="#board1"><img src="medias/iui/iui-logo-touch-icon.png"
/><span>Icon label 1</span></a></li>
<li><a href="#board1"><img src="medias/iui/iui-logo-touch-icon.png"
/><span>Icon label 1</span></a></li>
<li><a href="#board1"><img src="medias/iui/iui-logo-touch-icon.png"
/><span>Icon label 1</span></a></li>
<li><a href="#board1"><img src="medias/iui/iui-logo-touch-icon.png"
/><span>Icon label 1</span></a></li>
<li><a href="#board1"><img src="medias/iui/iui-logo-touch-icon.png"
/><span>Icon label 1</span></a></li>
<li><a href="#board1"><img src="medias/iui/iui-logo-touch-icon.png"
/><span>Icon label 1</span></a></li>
<li><a href="#board1"><img src="medias/iui/iui-logo-touch-icon.png"
/><span>Icon label 1</span></a></li>

</ul>
</div>

<ul id="board1" title="Board 1">
<li><a href="#boarditem1">Board item 1</a></li>
<li><a href="#boarditem1">Board item 1</a></li>
<li><a href="#boarditem1">Board item 1</a></li>
<li><a href="#boarditem1">Board item 1</a></li>
</ul>

<ul id="boarditem1" title="Board Item 1" class="panel">
<h2>Board Item 1 title</h2>
</ul>


Feel free to use / customize :)

Remi

[StanRB]

You took it further and nailed it! Love it :)!

Problem with the link you gave though - doesn't load... Good that I
have your site saved on my springboard - was able to view the example.
Will put this code in action ASAP...

Cheers!

Stan

On Nov 20, 1:06 pm, Remi Grumeau <remi.grum...@gmail.com> wrote:
> With generic icon (iUI touch used here)http://www.remi-grumeau.com/iphone/

> On Fri, Nov 20, 2009 at 16:56, Chris Collett <chris.j.coll...@gmail.com> wrote:
> > Looks great. New color scheme and some slick icons and you're on your
> > way.....
>

> > On Fri, Nov 20, 2009 at 10:27 AM, StanRB <stanislav.bogda...@gmail.com>

[Chris Collett]

Link worked fine in Safari (switched user agent)

[Sean Gilligan]

StanRB wrote:
> And Remi - I will be actually making this for iUI. I am getting more
> and more into the project.

BTW, I'd love to see some springboard-like styling for iUI. If it works
well, I'll use it here:
http://iui-js.appspot.com/#_samples
and here:
http://iui-js.appspot.com/#_3rd-party
and maybe even here:
http://iui-js.appspot.com/#_tests

-- Sean

[StanRB]

Remi's looks good and if he doesn't mind sharing I guess you should go
for it. You are free to use the code I posted. If needed I'll bundle
it up in a plug-in. However, my colleague who is the main programmer
on our webapp project is coming up with supposedly a better
functioning code so I'd wait. I have a meeting with my whole team
today and will try to convince them to share all our code with the
community... However I hear talks about "selling the final product"
and stuff so I don't know how much they will be willing to contribute.
Which disappoints me a bit.. BUT since I am in that project there is
nothing bad in learning from it and releasing my own code ;) that I
can contribute to iUI...

Cheers!

Stan

[Remi Grumeau]

Sure, everybody can freely use the code i paste !

> --
>
> You received this message because you are subscribed to the Google Groups "iPhoneWebDev" group.
> To post to this group, send email to iphone...@googlegroups.com.

> To unsubscribe from this group, send email to iphonewebdev...@googlegroups.com.

> For more options, visit this group at http://groups.google.com/group/iphonewebdev?hl=.
>
>

Remi Grumeau
(+33) 663 687 206
http://www.remi-grumeau.com