Seite 1 von 3 123 LetzteLetzte
Ergebnis 1 bis 10 von 21

Thema: wie setzt ihr eure designs um?

  1. #1
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard wie setzt ihr eure designs um?

    in anlehnung an diesen thread hier: http://www.forum-hilfe.de/threads/50...ehler?p=383714

    hab ich mir gedacht, die diskussion mal auszulagern.
    wenn das thema hier interessant genug wird könnte man es zu nem sticky werden lassen.

    also holt ma eure vorgehensweise raus

    ich würd vorab nur gern die vergangene diskussion aufgreifen

    Zitat Zitat von threadi Beitrag anzeigen
    Ich schaue erst nach was das vorliegende Design inhaltlich erfordert und definiere die dafür nötigen Elemente. Da sind noch keine <div>'s und <span>'s dabei. Erst wenn ich die CSS-Datei einbinde und beginne das eigentliche Design aufzubauen, füge ich hier und da ein <div> ein. Z.B. für einen Kopfbereich der mehrere Elemente enthält. Aber dafür gibt es in HTML5 endlich auch <header> (hab ich bisher nur zu testzwecken genutzt, finde ich aber äußert sympatisch). Eine <div>-Suppe wie man sie so oft findet (das Forum ist btw. auch eine) versuche (!) ich ständig zu vermeiden.
    also so wie du es schreibst bauste die website inside-out.
    ich definiere zuerst alle rahmenbedingungen und baue mir ein grundgerüst, bevor ich schaue, welche elemente benötigt werden um den inhalt darzustellen!
    wurde bisher auch in jeder agentur in der ich war so praktiziert. man baut dort die website von hinten nach vorne und aussen nach innen.

    also teilt man sich das design in schichten und rahmen auf - quasi wie auch künstler ein bild malen würden (erst hintergrund und rahmenbedingungen und dann kommen die inhalte (personen oder andere objekte)

    threadi, werläutere mal bitte deine vorgehensweise genauer.
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  2. #2
    Forum Guru Avatar von driver
    Registriert seit
    10.04.2006
    Alter
    34
    Beiträge
    20.729
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: wie setzt ihr eure designs um?

    kommt immer drauf an. bei etwas größeren designs zeichne ich oft erstmal ne grobstruktur
    in photoshop oder manchmal sogar paint. einfach um ne grobe richtlinie zu haben.

    und dann wird gebaut, erstmal die rahmencontainer, dann die anortnung von navi und content
    usw. je nachdem wie die idee im kopf dazu aussieht.
    >> die icq-schreiberlinge bitte dies hier beachten



    1679 entdeckte Gottfried Wilhelm Leibniz das Binärsystem, bei einem Gespräch mit seiner Mutter: "Ja..., Nein..., Nein..., Nein..., Ja..., Ja..., Nein..."

  3. #3
    Forum Guru
    Themenstarter
    Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: wie setzt ihr eure designs um?

    also auch von aussen nach innen quasi..so kenn ich dat
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  4. #4
    König(in) Avatar von Grevas
    Registriert seit
    20.04.2009
    Ort
    In meiner Wohnung.
    Alter
    30
    Beiträge
    1.039
    Danke
    0
    Bekam 5 mal "Danke" in 5 Postings

    Standard AW: wie setzt ihr eure designs um?

    Design anschauen, sinnvolle Aufteilung überlegen mit der Funktion des ganzen im Hintergrund --> Bereiche bestimmen

    Dann jenachdem,

    statische Seite: nacheinander Bereiche mit den Inhalten anlegen, größen & positionierung in etwa schonmal anlegen (Strukturelle Dinge eben, wie floats, die margins auf Augenmaaß).
    Sobald alle Bereiche mit den Inhalten und schon mit den Farben & Grafiken ausgestattet sind, messe ich nochmals die Abstände nach und setz alles nochmal um paar Pixel um, pass die schieb etwas an den Hintergründen etc.
    Z.B. Style ich meine Listen erst wenn die Bereiche richtig sitzen.

    Templates: die einzelnen Bereiche in die gewünschte Struktur anbringen, genaue Paddings & Margins innerhalb des Bereichs. Hier mach ich wie im letzten Beispiel bereits die Listenstyles. Am Ende die zusammenführung im Haupttemplate.

    Also so ziemlich die selbe Methode die synaptic & driver bereits beschrieben haben.

  5. #5
    König(in)
    Registriert seit
    07.02.2009
    Ort
    Leipzig
    Beiträge
    1.391
    Danke
    2
    Bekam 21 mal "Danke" in 20 Postings

    Standard AW: wie setzt ihr eure designs um?

    Oh, gerade erst das Topic hier entdeckt.

    Von außen nach innen trifft denke ich bei mir auch, hoffentlich meinen wir das selbe. Mache es ähnlich wie Grevas, nur eben dass ich nicht das Design an sich erstelle. Ich kodiere lediglich mit gelieferte Designs. Und das geht meist (!) so:
    Grafischen Entwurf anschauen.
    Bereiche im grafischen Entwurf für die einzelnen Inhalte bestimmen (also was ist ein Menü, was ist Content, was ist Footer, was Header ..).
    Wichtige Elemente der Grafik aus dem grafischen Entwurf ausschneiden (z.B. Rundungen, Buttons (ohne Beschriftung), Icons etc.).
    HTML-Datei mit HTML-Grundgerüst erstellen (ohne Inhalte im <body>).
    Innerhalb vom <body> nacheinander die vorher bestimmten Inhalte eintragen, zunächst ohne jegliche Formatierung, lediglich die Reihenfolge beachte ich schonmal.
    Ergebnis an der Stelle ist meist eine pure HTML-Datei ohne irgendwas anderes, ohne <div>, ohne <span>, aber mit allen HTML-Elementen mit semantischer Bedeutung.
    CSS-Datei für Screen-Ansicht erstellen (mit Rückstellung aller wichtigen Eigenschaften wie margin, padding etc. auf 0 bzw. auto oder none).
    Ergänzung von Klassen und ggfs. auch IDs um einzelne Inhaltsbereiche direkt per CSS anzusprechen (z.B. für ein <ul>-Menü die ID "menu", für footer die ID "footer" etc.).
    Ergänzung von CSS-Eigenschaften für die eben geschaffenen HTML-Ergänzungen um das Grunddesign zu erreichen.
    Ergänzung von Hilfselementen zur besseren Ausrichtung einzelner Inhalte um das gewünschte Design zu erreichen (hier kommen dann erst <div>'s ins Spiel! Aber nur möglichst wenige!).
    Ergänzung von CSS-Eigenschaften für die Feinabstimmung von Ausrichtungen und Abständen im Grunddesign.
    Feinarbeiten am Design, sprich: Schriftarten, Abstände, Breiten, floatings etc.pp.

    Ergebnis ist dann eine HTML- und eine CSS-Datei für die Screendarstellung. Dann folgt noch ein Browsertest mit ggfs. darauf folgenden notwendigen Anpassungen für andere dem Kunden zugesicherten Browsern.

    Das Vorgehen ist fast immer das Selbe. Das Ergebnis wird dann als Grundlage für weitere HTML-Kodierungen für z.B. Formulare, Artikellisten oder ähnliches genutzt. Die Druckansicht folgt als allerletztes.

    Und das wird dann in das jeweils gewünschte CMS eingefügt und erst dann werden auch Inhalte dynamisiert, also durch Platzhalter/Variablen ersetzt, so dass der Kunde dann selbst diese ändern kann.

    Dieses Vorgehen habe ich von vielen anderen Entwicklern über Jahre hinweg gelernt, abgeguckt und optimiert und momentan bin ich damit sehr zufrieden. Ich kam seit Jahren nicht mehr in die Verlegenheit eine <div>-Suppe zu generieren, Frames habe ich seit dem letzten Jahrtausend nicht mehr verwendet.

  6. #6
    Forum Guru
    Themenstarter
    Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: wie setzt ihr eure designs um?

    Threadi, ich würde gerne mal so ne file ohne Divs von dir sehen nich dass ich nich wüsste, wie so ein source aussehen würde..

    aber du sagst du machst es ähnlich wie grevas, doch der macht direkt am anfang seine bereiche klar...

    und sorry fürs verspätete editieren, das funkloch in kombi mit anitas flach-apfel (ipad) wollte mich nich anständig posten lassen und daheim angekommen hab ich den pc nich mehr an gemacht
    Geändert von synaptic (18.02.2011 um 09:34 Uhr)
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  7. #7
    Forum Guru Avatar von The User
    Registriert seit
    28.10.2007
    Ort
    Zwischen Pazifik und Atlantik...
    Beiträge
    4.044
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: wie setzt ihr eure designs um?

    Zitat Zitat von threadi
    Mir liegen Designs meist als PSD oder AI vor. Da sind auch schon Beispielinhalte für Überschriften, Absätze, Menüpunkte etc. drinne. Wenn nicht forder ich das als erste Inhalte noch an.
    Das empfinde ich als falsch herum, man möchte irgendwelche Sachen auf seiner Website präsentieren und noch ein paar Features zur Navigation bereitstellen, und das Design soll sich dann raussuchen, was wohin soll, aber darüber mach ich mir erst später Gedanken.
    Zitat Zitat von threadi
    Dadurch kann man an einem reinen Designentwurf durchaus erkennen, welche Inhalte wo stehen und wie ausgezeichnet sein müssten.
    Das hat dann aber nichts mehr mit Semantik zu tun, dieses wo-stehen und wie-ausgezeichnet, das sich aus dem Design ergibt, ist keine semantische Notwendigkeit und bei anderen Designs anders.

    Zitat Zitat von threadi
    Das hat alles noch rein gar nichts mit irgendwelchen Servereinstellungen oder Funktionen zu tun. Es geht rein um die HTML-Kodierung und CSS-Definition. Nicht um Effekte mittels JavaScript oder dynamische Funktionen mit php. Die kommen erst viel später, wenn es um die eigentliche Integration des fertigen HTML-Codes in eine Webseite geht.
    Bei serverseitigen Sachen bzw. JavaScript ging es mir um die Einbindung verschiedener Inhalte an verschiedenen Stellen, nicht um Effekte oder interaktive Sachen. Nur das erlaubt im Allgemeinen, von dem div-Gewusel zu abstrahieren. Was glaubst du, weshalb es Template-Engines gibt? Wenn du soetwas serverseitig machst, kannst du eben die Sachen an ganz verschiedenen Stellen einbinden und manche Sachen vllt. auch nicht einbinden, mit JS kannst du komplexere Positionierungen gestalten, die unabhängig sind von der Positionierung (z.B. der div soll 50% der Breite von dem div haben).

  8. #8
    König(in)
    Registriert seit
    07.02.2009
    Ort
    Leipzig
    Beiträge
    1.391
    Danke
    2
    Bekam 21 mal "Danke" in 20 Postings

    Standard AW: wie setzt ihr eure designs um?

    @synaptic:
    Gerne doch. Hier z.B. der Quellcode-Entwurf für eine Seite die noch nicht online ist, ist erst vor kurzem entworfen wurden:

    HTML-Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
    <head>
      <meta name="description" content="Die Seitenbeschreibung" />
      <title>Willkommen</title>
      <link rel="shortcut icon" href="/favicon.ico" type="image/gif" />
      <link rel="stylesheet" type="text/css" href="style2.css" media="all" />
      <link rel="stylesheet" type="text/css" href="print2.css" media="print,embossed" />
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body>
      <a href="index.html"><img src="/gfx/logo.png" alt="Logo" id="logo" /></a>
      <ul id="menu">
        <li>
          <a href="#">Menüpunkt 1</a>
          <ul>
    	<li><a href="#">Untermenüpunkt 1</a></li>
    	<li><a href="#">Untermenüpunkt 2</a></li>
    	<li><a href="#">Untermenüpunkt 3</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Menüpunkt 2</a>
        </li>
        <li>
          <a href="#">Menüpunkt 3</a>
        </li>
        <li>
          <a href="#">Menüpunkt 4</a>
        </li>
        <li>
          <a href="#">Menüpunkt 5</a>
        </li>
        <li>
          <a href="#">Menüpunkt 6</a>
        </li>
        <li>
          <a href="#">Menüpunkt 7</a>
        </li>
        <li>
          <a href="#">Menüpunkt 8</a>
        </li>
      </ul>
      <div id="content">
        <dl id="navigationspath"><dt>Sie sind hier:</dt><dd><a href="index.html">Start</a> &raquo;</dd><dd><a href="#">Menüpunkt 1</a> &raquo; </dd><dd><a href="#">Untermenüpunkt 2</a></dd>
    </dl>
        <h1>Überschrift 1</h1>
        <p><em>Lorem ipsum dolor</em> sit amet, <a href="#">consetetur</a> sadipscing <strong>elitr</strong>, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
        <p>At vero eos et accusam et justo duo dolores et ea rebum. <a href="#target">Ein Link auf einen bestimmten Bereich der Seite.</a></p>
        <h2>Überschrift 2</h2>
        <p><img src="bild.jpg" alt="Bild" class="linksgefloatet" />Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum <i>dolor sit amet</i>, consetetur sadipscing elitr, <u>sed diam nonumy</u> eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <h3>Überschrift 3</h3>
        <table>
          <caption>Das ist eine Beispieltabelle für tabellarische Inhalte</caption>
          <thead>
    	<tr>
    	  <th>Spaltentitel</th>
    	  <th>Spaltentitel</th>
    	  <th>Spaltentitel</th>
    	</tr>
          </thead>
          <tbody>
    	<tr>
    	  <td><p>Spalteninhalt 1</p></td>
    	  <td><p>Spalteninhalt 2</p></td>
    	  <td><p>Spalteninhalt 3</p></td>
    	</tr>
    	<tr>
    	  <td colspan="2"><p>Spalteninhalt beliebig lang und breit und formatiert. Und noch viel länger.</p></td>
    	  <td><p>Spalteninhalt</p></td>
    	</tr>
    	<tr>
    	  <td><p>Spalteninhalt</p></td>
    	  <td><p>Spalteninhalt</p></td>
    	  <td><p>Spalteninhalt</p></td>
    	</tr>
          </tbody>
        </table>
        <p id="target">Das ist der bestimmte Bereich der oben verlinkt ist. Und <em>jetzt</em> kommt eine Liste:</p>
        <ul>
          <li>Listenpunkt 1</li>
          <li>Listenpunkt 2</li>
        </ul>
        <p>Und noch eine Liste:</p>
        <ol>
          <li>Listenpunkt 1</li>
          <li>Listenpunkt 2</li>
        </ol>
        <h4>Überschrift 4</h4>
        <p>Es folgt die 2spaltige Ansicht:</p>
        <div class="rechts">
          <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
          <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
          <p><img src="bild.jpg" alt="Bild" class="linksgefloatet" />Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        </div>
        <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <p class="break">Ende der 2spaltigen Ansicht. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
      </div>
      <ul id="footer">
        <li><a href="#">Impressum</a></li>
        <li><a href="#">Kontakt</a></li>
        <li>&copy; Copyright Unternehmen GmbH</li>
      </ul>
      <p class="vcard">
        <span class="org">Unternehmen GmbH</span>
        <span class="fn">Herr Max Mustermann</span>
        <span class="adr">
          <span class="street-address">Musterstraße 42</span>
          <span class="postal-code">12345</span>
          <span class="locality">Musterstadt</span>
          <span class="country-name">Deutschland</span>
        </span>
        <span class="tel">+49 (1) 123 45 67-890</span>
        <span class="email">info@example.com</span> 
      </p>
    </body>
    </html>
    @The User:
    Ich glaube wir unterscheiden uns im Gedanken wo der HTML-Code nun eingesetzt und wie er bearbeitet wird wird. Du denkst scheinbar in bestimmten Schienen die dir ein CMS / Template-Engine vorgibt. Ich erstellte auch oft Seiten ohne irgendein fertiges CMS und auch nicht für eine Template-Engine. Dadurch bin ich (wie ich finde) etwas freier was die Gestaltung des HTML-Codes angeht. Wenn es dann darum geht diesen Code in ein CMS einzufügen, welches bestimmte Voraussetzungen stellt, dann sieht mein Quellcode durchaus auch mal etwas anders aus, je nachdem was das Zielsystem ist. Wichtig ist mir dabei nur, dass keine <div>-Suppe entsteht, das die wichtigen Inhalte auch als solche ausgezeichnet werden. Das kann leider nicht jedes CMS / Template-Engine leisten (kannst mir auch gerne noch eine zeigen die es deiner Meinung nach kann, ich lerne gerne immer wieder dazu ). Bisher ist mir sowas nur bei typo3 und VIO.Matrix geglückt, wo man die Ausgabe der Inhalte wirklich 100%ig anpassen kann.

    [..]man möchte irgendwelche Sachen auf seiner Website präsentieren und noch ein paar Features zur Navigation bereitstellen, und das Design soll sich dann raussuchen, was wohin soll, aber darüber mach ich mir erst später Gedanken.
    Dein Design denkt mit? So verstehe ich das jetzt. Wenn man eine Webseite erstellt die jemand ohne HTML-Kenntnisse inhaltlich füllen soll, muss man ihm doch ein Gerüst vorgeben in dem er arbeiten kann. Natürlich kann er dann auch mal einiges hin- und her schieben. Aber er kann nicht das gesamte Design umstellen. So ein dynamisches Design kann man imho nicht wirklich erstellen.

    Das hat dann aber nichts mehr mit Semantik zu tun, dieses wo-stehen und wie-ausgezeichnet, das sich aus dem Design ergibt, ist keine semantische Notwendigkeit und bei anderen Designs anders.
    Semantik ist die Auszeichnung von Inhalten nach ihrer Bedeutung. Daher ist es in meinen Augen durchaus relevant, wenn man das Design betrachtet um es auseinander zunehmen. Ein Menü muss als Menü ausgezeichnet werden, eine Betonung als Betonung, eine Überschrift als Überschrift etc.pp. Sowas erkennt man an grafischen Entwürfen und sollte diese Erkenntnisse dann auch umsetzen. Notwendig ist es natürlich nicht, kann ja jeder machen wie er will

  9. #9
    Forum Guru Avatar von The User
    Registriert seit
    28.10.2007
    Ort
    Zwischen Pazifik und Atlantik...
    Beiträge
    4.044
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: wie setzt ihr eure designs um?

    Ja und was ist p="rechts"? Das ist eindeutig Design-Struktur im HTML, das gehört da nicht hin…

  10. #10
    König(in) Avatar von Grevas
    Registriert seit
    20.04.2009
    Ort
    In meiner Wohnung.
    Alter
    30
    Beiträge
    1.039
    Danke
    0
    Bekam 5 mal "Danke" in 5 Postings

    Standard AW: wie setzt ihr eure designs um?

    Zitat Zitat von The User Beitrag anzeigen
    Ja und was ist p="rechts"? Das ist eindeutig Design-Struktur im HTML, das gehört da nicht hin…
    Das erinnert mich an etwas.
    In ein 'paar' Jahren, wenn alle Browser die eingesetzt werden die neuen Pseudoklassen können, wird sich bestimmt irgendwo jemand finden, der keine CSS Klassen verwendet, sondern alles mit :nth-child etc. umsetzt. Darauf freu ich mich schon.
    Wenn sich keiner findet, mach ich's selber just 4 fun

Ähnliche Themen

  1. Wie setzt der Prozessor ein "if" um?
    Von Tobse im Forum Computer - Internet Forum
    Antworten: 2
    Letzter Beitrag: 22.06.2010, 10:29
  2. Antworten: 3
    Letzter Beitrag: 06.05.2010, 11:28
  3. WBB 2.3.6 Designs
    Von im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 2
    Letzter Beitrag: 09.12.2006, 15:29
  4. Wie setzt man eine .dat auf CHMOD 666???
    Von Webmasta im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 27
    Letzter Beitrag: 22.08.2005, 20:30
  5. slideshow setzt mouseover außer kraft...hilfe!
    Von SchnapzZ-mauzZ im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 0
    Letzter Beitrag: 26.01.2005, 22:15

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •