Interfacedesign umsetzen

[LamboLight]

Hey,

ich habe letztens einen Tag bei 6Wunderkinder.com verbracht (Kurzzeit-Praktikum) und habe mich da sehr für UI Design faszinieren können. Nun habe ich mich kurzfristig in ein Projekt auf einem Minecraftserver eingeklinkt um erstmal die Basics und die Grundlagen von dem ganzen zu erlernen. Geplant ist ein Webinterface, mit dem es möglich ist Beträge auf dem Server zu transferieren.

Darum soll es mir aber nicht gehen. Mein Problem ist es, die unten angehängten Grafiken in ein Interface umzuwandeln. Bei HTML ist mir eigentlich nur die Webseitengestaltung geläufig (auch nur Amateur), aber hierbei geht es ja nicht um Absätze oder so. Das meiste besteht aus Feldern in die was eingesetzt werden soll und aus Buttons die dann bestimmte Befehle weitergeben. Das ganze soll auch optisch gut aussehen, es sollte also die Möglichkeit geben da irgendwie noch an den Buttons eine PNG hinterzulegen oder so.

Wenn es ein Stichwort gibt, nach dem ich da suchen muss, immer her damit. Ich verlange keine Anleitung, aber nen kleiner Wegweiser in welche Richtung es geht wäre schon schön.

Danke für die Tipps im voraus, Paul.

 

[omaliesschen]

Css

 

[LamboLight]

Hab vergessen die Beispiele hochzuladen, sry.

 

[omaliesschen]

bissl html, tabellen etc. und css. Dazu etwas Javascript/Jquery um die aktiven Reiter zu markieren. Würde auch über php gehen ist allerdings unnötig.

DropDownMenüs mit <select> etc.

Crossbrowsergradient:


In deinem Fall vll.:

background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */

css:

display:none um bei Auswahl die Reiterkarte auszublenden.
display:block um eine Reiterkarte anzuzeigen.

border-radius um Ecken abzurunden wobei das in älteren InternetExplorern nicht funktioniert.
border: 2px solid #777; Erzeugt den Border mit der in px angegeben dicke und der Farbe etc.
box-shadow: 2px 2px 4px #777; erzeugt einen shadow, funktioniert nicht in älteren Browsern.
box-shadow: 2px 2px 4px #777 inset; erzeugt einen inset shadow, funktioniert nicht in älteren Browsern.
box-shadow: 2px 2px 4px #777, 2px 2px 4px #777 inset; erzeugt beide shadows, funktioniert nicht in älteren Browsern.

evtl. kommt auch noch die .load() Funktion von jquery in betracht.

 

[blablub1212]

jup css
http://de.selfhtml.org/css/

 

[omaliesschen]

PS: html besteht nicht nur aus Absätzen und textformatierung. Alles was Du auf Webseiten siehts ist html welches über css gestyled wird bzw. manchmal auch mit html attributen wie bei tabellen (colspan etc.).

Edit:

Die obere Navigation ist eine html Liste die sich zusammen mit dem Rest in einem container befindet.

Google mal nach css tabs, css reiter, html reiter, etc.

 

[Daaron]

bissl html, tabellen etc. und css. Dazu etwas Javascript/Jquery um die aktiven Reiter zu markieren. Würde auch über php gehen ist allerdings unnötig.

Sobald die Knöpfe Aktionen auslösen, um die sich der Server zu kümmern hat, MUSS eine serverseitige Sprache wie PHP zum Einsatz kommen. Anders kannst du keine persistenten und über alle Clients synchronen Aktionen auslösen.

 

[thruem]

Hi,

wenn ich das umsetzen müsste, würde ich zu einem Framework greifen: http://twitter.github.io/bootstrap/base-css.html#buttons

Heisst praktisch für dich: Auf Grafiken in den Buttons verzichten und einfach einen schönen Button erzeugen mit

<a class="btn btn-large ... " href="linkziel" >

Lies dich ein wenig auf der o. g. Seite ein. Ich bin der Meinung es lohnt sich!

 

[omaliesschen]

Sobald die Knöpfe Aktionen auslösen, um die sich der Server zu kümmern hat, MUSS eine serverseitige Sprache wie PHP zum Einsatz kommen. Anders kannst du keine persistenten und über alle Clients synchronen Aktionen auslösen.

Um das Interface zu erzeugen? Das war die Frage.

Was ich meinte war dass es unnötig ist die Klassen der aktiven Tabs über php zu implementieren.

 

[LamboLight]

Naja, wenn ich dann das Interface habe, dann gebe ich das eh an die Systemtypen weiter und die bauen es dann aus. Also das was dann mit dem Server kommuniziert kommt nicht von mir.

 

[Daaron]

Was ich meinte war dass es unnötig ist die Klassen der aktiven Tabs über php zu implementieren.

Die Klassen im HTML-DOM werden eh nur im weitesten Sinne in PHP implementiert. Viele Teile des HTML-Codes sind unveränderlich, aber es kann durchaus Sinn machen, Elementen dynamisch Klassen zuzuweisen.

Naja, wenn ich dann das Interface habe, dann gebe ich das eh an die Systemtypen weiter und die bauen es dann aus. Also das was dann mit dem Server kommuniziert kommt nicht von mir.

Du solltest dich mit den "Systemtypen" trotzdem mal kurzschließen. Das Interface ist hier nicht vollkommen losgelöst von der Back End Logik.

 

[omaliesschen]

Wenn Du ne Stunde warten kannst bau ich dir schnell den Grundkörper, mit Nagellack..

Ergänzung (29. April 2013)

ein ganz simpler Anfang (werds noch etwas ausbauen):

main.css

* {
padding:0;
margin:0;
}
 
#outer_wrapper,#page_selector{
 
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
 
}
 
#outer_wrapper {
border: 2px solid #AAAAAA;
border-radius: 8px 8px 8px 8px;
height: 450px;
margin: 50px auto;
overflow: hidden;
width: 700px;
}
 
 
#page_selector {
border-bottom: 1px solid #AAAAAA;
color: #222222;
height: 30px;
overflow: hidden;
}
 
#page_selector > li {
border-right: 1px solid #AAAAAA;
clear: none;
display: inline-block;
float: left;
text-align: center;
width: 174px;
}
 
#page_selector > li:last-child,#page_selector > li:last-of-type {
 
border-right: 0;
 
}
 
#page_selector > li:hover {
background: #FFF;
}
 
#page_selector > li a,#page_selector > li a:hover,#page_selector > li a:active {
color: #555555;
text-decoration: none;
display: block;
padding: 6px 10px;
}
 
#page_selector > li a:active{border:0;}

index.php bzw. aktuell noch index.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/main.css" />
</head>


<!-- body start -->
<body id='fx-start'>

<div id="outer_wrapper">

      <ul id="page_selector">

        <li><a class="" href="#">Zahlung</a></li>
        <li><a class="" href="#">Admin-Shop</a></li>
        <li><a class="" href="#">Global&nbsp;Ranking</a></li>
        <li><a class="" href="#">Kredit&nbsp;aufnehmen</a></li>

      </ul>



      <div id="dynamic_content">

          <div id="c1" style="display:block;"><p>Hi</p></div>
          <div id="c2" style="display:none;"></div>
          <div id="c3" style="display:none;"></div>
          <div id="c4" style="display:none;"></div>

      </div>


</div>

</body>
</html>

PS: Wenn ich das ausbau dann brauchst du jquery.min und jquery.ui. Der Inhalt des divs dynamic content wäre dann animiert. Mit slide animation. Gegebener content slidet nach links und verschwindet, neuer content slidet von recht nach links rein.

 

[Daaron]

ich vermisse da irgendwie den Tab-Wechsel per :target...

 

[omaliesschen]

Da vermisst man so einiges. Vor allem das Wort "Leibeigener" in meinem Nick.

Es sollte auf möglichst vielen browsern laufen. target wäre css3.

Viele Wege führen nach Rom.

 

[Daaron]

Da Tabs ohne JS bestenfalls nur mäßig funktionieren (eben z.B. über :target), warum überhaupt so viel HTML/CSS-Mischung abtippen? Sowohl für Mootools als auch jQuery gibts Unmengen an freien Tab-Scripts.

 

[omaliesschen]

Mischung?

Ansonsten bitte nochmal lesen.