Re: [IPFire Artwork] Design Request | Captive Portal

["Daniel Weismüller" <daniel.weismueller@ipfire.org>]

[-- Attachment #1: Type: text/plain, Size: 12150 bytes --]

That would be fine for me.

- Daniel

Am 03.02.2016 um 14:53 schrieb Michael Tremer:
> Hi,
>
> sorry for not getting back earlier...
>
> On Mon, 2016-02-01 at 23:23 +0100, Maurice Gesswein wrote:
>> Hi,
>>
>> attached you find design/layout suggestions for all mentioned captive
>> portal websites.
> It looks great!
>
>> Some notes:
>> The layout is always the same. You are able to build one template
>> which can used for every site.
> That is handy.
>
>> The layout is very responsive friendly (smartphone, tablet) as you
>> can see at the access-voucher_360.jpg (standard Android phone size)
>> I strongly recommend to don't use scrollable content within a
>> scrollable page (see first 2 screenshots from Alex). You become crazy
>> if you want to navigate though that on a touch device.
> LOL
>
>> A specific header image can be used for every case.
> Okay, we need to build a way to upload that and possibly some
> specifications that we can give to people to design theirs in the right
> way.
>
>> There are tiny and simple code snippets which scale the header image
>> for every size correctly. I'll check this out to provide you with
>> more detailed information.
>> Just checked getbootstrap.com. Seems to be that such a functionality
>> is already included.
> Cool.
>
>> A footer where you are able to promote IPFire ;)
> Always good.
>
>> Layout based on Bootstap 3
>> I used the color-theme for the upcoming new IPFire website and WebUI.
>> @Michael the bright red is not the new primary IPFire red ;) It's the
>> error-red. I'll show more about that soon.
>> I suggested new text for the errors. Maybe you like it :)
>>
>> Let me know if you have any questions or concerns.
> There is nothing from me I would like to see changed. So I suppose that
> we can regard this as the final draft.
>
> Would you be up for arranging a telephone conference with Daniel &
> Alex, because I think that I have many questions regarding how we get
> from the draft to code :) How about Monday evening?
>
> Best,
> -Michael
>
>> Best,
>> Maurice
>>
>> On Mon, Feb 1, 2016 at 2:41 PM, Daniel Weismüller <daniel.weismueller
>> @ipfire.org> wrote:
>>> No.
>>>
>>> The last screenshot shows the customization part from "good old"
>>> configurationsite of the url-filter.
>>> For better understanding i've made a  (3) screenshot(s) of the
>>> whole page.
>>>
>>> - Daniel
>>>
>>>
>>> Am 01.02.2016 um 14:32 schrieb Maurice Gesswein:
>>>> Is that the place where the hoster can include his own T&Cs,
>>>> upload a company logo, add the company name, etc?
>>>>
>>>> On Mon, Feb 1, 2016 at 2:27 PM, Daniel Weismüller <daniel.weismue
>>>> ller(a)ipfire.org> wrote:
>>>>> me again :)
>>>>>
>>>>> Another screenshot now from the webif where you may customize
>>>>> blockpage from the url-filter.
>>>>>
>>>>> - Daniel
>>>>>
>>>>>
>>>>> Am 01.02.2016 um 14:24 schrieb Maurice Gesswein:
>>>>>> Perfect. Thanks Daniel.
>>>>>> Am 01.02.2016 2:22 nachm. schrieb "Daniel Weismüller" <daniel
>>>>>> .weismueller(a)ipfire.org>:
>>>>>>> Here are the screenshots as requested.
>>>>>>>
>>>>>>> - Daniel
>>>>>>>
>>>>>>> Am 31.01.2016 um 08:53 schrieb Maurice Gesswein:
>>>>>>>> Good morning,
>>>>>>>> I use lorem ipsum than. Thanks.
>>>>>>>> Am 31.01.2016 4:31 vorm. schrieb "Michael Tremer" <michae
>>>>>>>> l.tremer(a)ipfire.org>:
>>>>>>>>> Hi,
>>>>>>>>>
>>>>>>>>> On Sat, 2016-01-30 at 22:06 +0100, Maurice Gesswein
>>>>>>>>> wrote:
>>>>>>>>>> Can someone send me the terms & condition text from
>>>>>>>>> the screenshots
>>>>>>>>>> as real text?
>>>>>>>>> There is a text area where the user will type in the
>>>>>>>>> T&Cs. So there is
>>>>>>>>> no predefined text and it might change.
>>>>>>>>>
>>>>>>>>> Do you still want some sample or can you just use lorem
>>>>>>>>> ipsum?
>>>>>>>>>
>>>>>>>>> -Michael
>>>>>>>>>
>>>>>>>>>> Thanks in advance.
>>>>>>>>>>
>>>>>>>>>> On Sat, Jan 30, 2016 at 4:01 AM, Michael Tremer <mich
>>>>>>>>> ael.tremer(a)ipfir
>>>>>>>>>> e.org> wrote:
>>>>>>>>>>> Hi,
>>>>>>>>>>>
>>>>>>>>>>> On Fri, 2016-01-29 at 20:37 +0100, Alexander Marx
>>>>>>>>> wrote:
>>>>>>>>>>>>> Hey,
>>>>>>>>>>>>>
>>>>>>>>>>>>> OK, in general I got it. Thanks for the screens
>>>>>>>>> Alex.
>>>>>>>>>>>>> I have a few questions and suggestions.
>>>>>>>>>>>>>
>>>>>>>>>>>>> To be prepared for further upcoming pages like
>>>>>>>>> these, are you
>>>>>>>>>>> able
>>>>>>>>>>>>> to hand over a list of them (perhaps with
>>>>>>>>> screenshots)? Not
>>>>>>>>>>> really
>>>>>>>>>>>>> needed, but very helpful to deliver a
>>>>>>>>> consistent flexible
>>>>>>>>>>> design.
>>>>>>>>>>>
>>>>>>>>>>> Don't worry about them too much.
>>>>>>>>>>>
>>>>>>>>>>>> As far as i know there are no other "external"
>>>>>>>>> pages. The
>>>>>>>>>>>> Webinterface of IPFire has an own design and
>>>>>>>>> several themes, i
>>>>>>>>>>> think
>>>>>>>>>>>> you already saw them.
>>>>>>>>>>> However, there are a few. I included both of them
>>>>>>>>> in the first
>>>>>>>>>>> email.
>>>>>>>>>>> On top of that there are the squid error pages. I
>>>>>>>>> am not too sure
>>>>>>>>>>> if we
>>>>>>>>>>> can modify those quite nicely.
>>>>>>>>>>>
>>>>>>>>>>> I will figure that out and get back to you.
>>>>>>>>>>>
>>>>>>>>>>>>> Should the hoster be able to include his own
>>>>>>>>> logo/brand? That
>>>>>>>>>>> would
>>>>>>>>>>>>> give the users a lot more trust in that things.
>>>>>>>>> If an image
>>>>>>>>>>> upload
>>>>>>>>>>>>> is not in the current scope, I suggest a
>>>>>>>>> prominent headline
>>>>>>>>>>> where
>>>>>>>>>>>>> the hoster is able to include the company name.
>>>>>>>>> Do you agree?
>>>>>>>>>>>> Actually the hoster is able to change the Title
>>>>>>>>> (The top-title in
>>>>>>>>>>> the
>>>>>>>>>>>> screenies like "Login" or on the other page "My
>>>>>>>>> private HotSpot")
>>>>>>>>>>>> maybe we can add a Logo but we have to decide
>>>>>>>>> which dimensions
>>>>>>>>>>> are
>>>>>>>>>>>> allowed. This is difficult as many companies have
>>>>>>>>> different
>>>>>>>>>>>> dimensions of Logos. Some are 4:3, others are
>>>>>>>>> like 27:9 and so
>>>>>>>>>>> on.
>>>>>>>>>>>> What do other people think?
>>>>>>>>>>> I think we don't need that. We usually have the
>>>>>>>>> opportunity to
>>>>>>>>>>> upload
>>>>>>>>>>> an entire HTML template, so that if someone wants
>>>>>>>>> to replace the
>>>>>>>>>>> page,
>>>>>>>>>>> they can do that. But just a logo is a bit too
>>>>>>>>> easy. Who ever wants
>>>>>>>>>>> to
>>>>>>>>>>> brand this as their own should do that with the
>>>>>>>>> rest, too.
>>>>>>>>>>> And of course we should not forget about doing some
>>>>>>>>> advertisement
>>>>>>>>>>> for
>>>>>>>>>>> our own product :) However, I get many emails from
>>>>>>>>> annoyed students
>>>>>>>>>>> that can't access dirty websites in their school.
>>>>>>>>> LOL
>>>>>>>>>>>>> Since it's part of IPFire, should those pages
>>>>>>>>> be designed like
>>>>>>>>>>> the
>>>>>>>>>>>>> new upcoming style of IPFire? Means same color
>>>>>>>>> theme, button
>>>>>>>>>>> style,
>>>>>>>>>>>>> IPFire logo, caption like "powered by IPFire",
>>>>>>>>> etc? Or should
>>>>>>>>>>> it
>>>>>>>>>>>>> totally generic so that the users has no clue
>>>>>>>>> what system shows
>>>>>>>>>>>>> those dialogs?
>>>>>>>>>>> I would like a "powered by IPFire" at least and
>>>>>>>>> even advise people
>>>>>>>>>>> who
>>>>>>>>>>> replace the theme by their own to keep that in.
>>>>>>>>>>>
>>>>>>>>>>> This does not need to be like the new stuff but I
>>>>>>>>> think it should
>>>>>>>>>>> feel
>>>>>>>>>>> a bit like IPFire but also be neutral. We do not
>>>>>>>>> need to hide that
>>>>>>>>>>> this
>>>>>>>>>>> is an IPFire system though.
>>>>>>>>>>>
>>>>>>>>>>>> No. I think if we have something like a
>>>>>>>>> "background-color"
>>>>>>>>>>> instead of
>>>>>>>>>>>> a picture, we should the hoster let configure it,
>>>>>>>>> so the people
>>>>>>>>>>> are
>>>>>>>>>>>> able to adpat the colors to their own corporate
>>>>>>>>> identity. So if
>>>>>>>>>>> you
>>>>>>>>>>>> woul like to work with gradients or similar, i
>>>>>>>>> would recommend to
>>>>>>>>>>>> make it configurable.
>>>>>>>>>>> Nah, not too many options. We wanted to keep this
>>>>>>>>> simple.
>>>>>>>>>>>> Michael, what do you think?
>>>>>>>>>>> See above :)
>>>>>>>>>>>
>>>>>>>>>>> -Michael
>>>>>>>>>>>
>>>>>>>>>>>>> Best, Maurice
>>>>>>>>>>>>>
>>>>>>>>>>>>> On Fri, Jan 29, 2016 at 1:51 PM, Alexander Marx
>>>>>>>>> <alexander.marx
>>>>>>>>>>> @oab
>>>>>>>>>>>>> .de> wrote:
>>>>>>>>>>>>>> Hi
>>>>>>>>>>>>>>
>>>>>>>>>>>>>> Here are the actual ugly screenshots from the
>>>>>>>>> loginpage.
>>>>>>>>>>>>>> one version with voucher access and the other
>>>>>>>>> one with
>>>>>>>>>>> license
>>>>>>>>>>>>>> agreement.
>>>>>>>>>>>>>>
>>>>>>>>>>>>>> Alex
>>>>>>>>>>>>>>
>>>>>>>>>>>>>>
>>>>>>>>>>>>>>
>>>>>>>>>>>>>> Am 29.01.2016 um 02:59 schrieb Michael
>>>>>>>>> Tremer:
>>>>>>>>>>>>>>>   Hi Maurice,
>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>> I know that you are busy with other things,
>>>>>>>>> but
>>>>>>>>>>> nevertheless I
>>>>>>>>>>>>>>> would
>>>>>>>>>>>>>>> like to send you this request.
>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>> Alex is currently working on a so called
>>>>>>>>> captive portal.
>>>>>>>>>>> That
>>>>>>>>>>>>>>> are these
>>>>>>>>>>>>>>> things that pop up on your phone or laptop
>>>>>>>>> when you connect
>>>>>>>>>>> to
>>>>>>>>>>>>>>> a
>>>>>>>>>>>>>>> wireless network in a hotel or cafe. That
>>>>>>>>> web page that is
>>>>>>>>>>>>>>> shown is
>>>>>>>>>>>>>>> what we need to design now.
>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>> We also have a few other pages that are
>>>>>>>>> shown to the users
>>>>>>>>>>> of
>>>>>>>>>>>>>>> the
>>>>>>>>>>>>>>> network when for example a web page is
>>>>>>>>> blocked. That page
>>>>>>>>>>>>>>> however is
>>>>>>>>>>>>>>> really ugly and probably needs a remake as
>>>>>>>>> well. I want to
>>>>>>>>>>>>>>> focus on the
>>>>>>>>>>>>>>> captive portal for now, but I guess you
>>>>>>>>> would like to know
>>>>>>>>>>> that
>>>>>>>>>>>>>>> there
>>>>>>>>>>>>>>> are more. [1] and [2]. Really bad right?
>>>>>>>>> They scare users.
>>>>>>>>>>>>>>> Alex will send you a screenshot of the
>>>>>>>>> development version
>>>>>>>>>>> we
>>>>>>>>>>>>>>> have now.
>>>>>>>>>>>>>>> This is just a quick page to show the
>>>>>>>>> concept and what we
>>>>>>>>>>> are
>>>>>>>>>>>>>>> roughly
>>>>>>>>>>>>>>> after.
>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>> There are two options for now. The first
>>>>>>>>> one is where the
>>>>>>>>>>> user
>>>>>>>>>>>>>>> has to
>>>>>>>>>>>>>>> agree to a license and click a "I accept"
>>>>>>>>> button. The
>>>>>>>>>>> second
>>>>>>>>>>>>>>> one is
>>>>>>>>>>>>>>> where the user will have to type in a
>>>>>>>>> voucher code and
>>>>>>>>>>> click a
>>>>>>>>>>>>>>> button
>>>>>>>>>>>>>>> to log in.
>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>> Would you like to work on this?
>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>> If so, a quick mock-up would be okay for
>>>>>>>>> now, because we
>>>>>>>>>>> would
>>>>>>>>>>>>>>> like to
>>>>>>>>>>>>>>> put this entire project on the wishlist to
>>>>>>>>> raise some
>>>>>>>>>>> crowd-
>>>>>>>>>>>>>>> funding
>>>>>>>>>>>>>>> money. Giving the user that mock-up would
>>>>>>>>> certainly help so
>>>>>>>>>>>>>>> that they
>>>>>>>>>>>>>>> get a good impression what they are
>>>>>>>>> supporting here. The
>>>>>>>>>>> actual
>>>>>>>>>>>>>>> implementation will happen a bit later when
>>>>>>>>> enough funds
>>>>>>>>>>> have
>>>>>>>>>>>>>>> been
>>>>>>>>>>>>>>> raised.
>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>> @Alex, would you please send some
>>>>>>>>> screenshots of the two
>>>>>>>>>>> pages
>>>>>>>>>>>>>>> we have
>>>>>>>>>>>>>>> so far?
>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>> Best,
>>>>>>>>>>>>>>> -Michael
>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>> P.S. @Maurice, I know that I am throwing a
>>>>>>>>> bit of random
>>>>>>>>>>> stuff
>>>>>>>>>>>>>>> at you.
>>>>>>>>>>>>>>> Just let me know when I don't make sense
>>>>>>>>> any more :)
>>>>>>>>>>>>>>> [1] http://2.bp.blogspot.com/-9sw4wUeUsgQ/V
>>>>>>>>> fU-c33FMDI/AAAAA
>>>>>>>>>>> AAAD
>>>>>>>>>>>>>>> zM/bBnJN4oCffo/s640/31.png
>>>>>>>>>>>>>>> [2] http://wiki.ipfire.org/_media/en/addons
>>>>>>>>> /clamav/squidcla
>>>>>>>>>>> mav-
>>>>>>>>>>>>>>> detection.png
>>>>>>>>>>>>>>>
>>>>>>>>>>>