Meine erste HP

  • Hallo zusammen,


    erst einmal vielen Dank an alle, die am HTML-Seminar beteiligt sind, denn ohne Euch wäre meine HP


    http://aw-unterwegs.de.to


    nur ein Wunsch geblieben.


    Im September 2010 habe ich mich erstmals mit HTML beschäftigt. Bald musste ich feststellen, dass ohne CSS nicht viel läuft. Mittlerweile habe ich die HP fast fertig und würde gerne mal Eure Meinung dazu wissen.


    Sicherlich ist mir klar, dass man nicht von einem strukturierten Aufbau und CSS sprechen kann, aber die Seiten sehen mittlerweile wenigstens so aus, wie ich mir das vorgestellt habe und sollten (hoffentlich) fehlerfrei sein.


    Ich freue mich über jede Kritik, Verbesserungsvorschläge und überhaupt auf Eure Meinung :D


    Außerdem hätte ich gerne ein paar Tipps, wie meine Seiten besser von Suchmaschinen gefunden werden.


    Allen noch ein schönes Wochenende und ein wenig Spaß beim Stöbern auf meiner HP


    Saludos - Wolfgang

  • Zitat von "drPHIP132"

    moin^^


    Lass mich raten...die Seite/der Code ist von einem WYSIWYG-editor ausgespuckt?


    Gruß
    Phip


    Hei,


    WYSIWYG-editor - Wie schmeckt das?


    Nach ungezählten Stunden im HTML-Seminar und wälzen von einigen Büchern sind die Seiten mit Webocton-Scriptly erstellt. Das CSS ist aus vielen Beispielen zusammengewürfelt und so angepasst, dass es zu meiner Seite passt.


    Ich glaube kaum, dass irgendein Editor das so hin bekommt. Wenn doch, lass es mich wissen, dann kann man viel Arbeit sparen.


    Saludos - Wolfgang


    PS Sonst kein Kommentar?

  • Mich wundert es nur, dass du so viele JavaScripts auf der Seite sind obwohl du die seite doch "selber gemacht" hättest und du ja ganz am anfang von HTML und CSS bist (laut deinen aussagen). 8)


    Außerdem ist der großteil des Code in einer Zeile; so wie man es von (manchen) WYSIWYG-editoren kennt 8).


    Für die erste Seite ist es ok, aber heute längst nicht mehr aktuell.

    Kritikpunkte/Verbesserungsvorschläge:

    • links sieht die schrift auf dem hintergrund blöd aus. eventuell eigene box dafür erstellen? (navigation ist gemeint)
    • content-bereich --> Deine Über(!!) große schrift wirkt extrem unseriös, so dass man am liebsten garnicht weiterlesen möchte
    • diese kakturs-animation ist furchtbar
    • bei dir steht Willkommen
      auf der Homepage von Andrea & Wolfgang
      * * *
      Ja, wir waren mal wieder ein wenig fleißig -
      alle Seiten zur Route von 2008 sind fertig ;-))
      Also, schaut Euch um
      Andrea & Wolfgang
      --> Dann ein unterstrich. Lösche bitte alles ÜBER diesem unterstrich sowie den unterstrich, sodass es mit der überschrift México losgeht
    • die unterste box (footer-positin) bitte komplett rausnehmen


      gruß
      drphip132 8)

  • Das Design sieht furchtbar aus.. so sahen Internetseiten vor gut 10 Jahren aus, da solltest du dir dringend noch mal Gedanken machen!


    Die Schriftfarben musst du auf jeden Fall mit Kontrast zum Hintergrund einfärben und bitte, tu mir einen Gefallen und nutze eine "ordentliche" Schriftart, Comic Sans lesen macht absolut keinen Spaß, ich finde das furchtbar, na ja auch wieder Geschmackssache 8)


    Die JavaScripts sind denke ich von dem Gratisanbieter eingefügt und sorgen für die allseits beliebten Werbepopups ;)


    Sorry das es etwas knapp ausfällt, aber ich muss noch arbeiten ;)

  • Hallo zusammen,


    danke für die ehrlichen Worte. Ja, alles was mit Java zu tun hat kommt vom Seitenanbieter.


    Dann zur Kritik.


    Welche Schriftart würdet Ihr vorschlagen, welche Farbe für Schrift und Hintergrund?


    Zum Design...


    Wo sind denn Eure Seiten? Und wenn ich mal welche finde hagelt es nur so von Fehlern im Code?!?


    Erstellt man HP`s heute nur noch mit Java?


    Kritik? Gerne, auch bitte gerade heraus und Klartext. Das ist ok, aber bitte auch mit Vorschlägen oder Beispielen.


    Saludos - Wolfgang

  • Ich würde dir empfehlen ein komplettes Layout zu entwerfen.
    Schriftgröße vom text zwischen 10-12px und überschriften maximal...22px?


    Wowowowow halt stooop! :!::!::!::!: :shock: :shock: :shock: :shock: :shock: :!::!::!::!:
    JAVA != JAVASCRIPT


    Ganz im Gegenteil, webseiten werden ohne JavaScript(!) gebaut, und erst am Ende mit JavaScript erweitert.


    *EDIT*


    weitere Kritikpunkte:

    • das breitgezogene bild oben (header) geht GARNICHT, da es wiegesagt Breitgezogen ist 8|
    • die schrift im headerbild geht garnicht.


    PS: Nimms nicht so niederschmettern auf.. ;). Mein erstes Design war keinesweg's besser.


    Gruß
    Phip

  • Zitat von "Ratoncito"


    Wie schmeckt das?


    Muss ich das verstehen.? :|:|:|


    Zitat von "Ratoncito"


    Ich glaube kaum, dass irgendein Editor das so hin bekommt.


    Glaub mir, jeder Editor kriegt deine Seite besser hin. Vorallem Code-technisch. (Und WYSIWYG-editoren bauen da schon eine Menge Müll-code ein um es vorsichtig zu sagen :!:)


    Zitat von "Ratoncito"


    Wo sind denn Eure Seiten? Und wenn ich mal welche finde hagelt es nur so von Fehlern im Code?!?


    Hallo? Ich hatte nochnie nen Fehler in meinem code. (W3C-validator). Wohingegen deine Seite/der Code ja beinahe schon eine Schande für die Webentwickler ist.


    Auszug:
    #navigation {
    float: left;
    margin: 0 0 -32767px 10px;
    padding-bottom: 32767px;
    width: 220px;
    }


    Was soll das?


    _________________________________________________________________________________________


    Wir sollten Kritik ausüben; haben wir getan. 8)
    Du bist nicht damit zufrieden und fühlst dich persöhnlich angegriffen und meinst du wärest der Champ? (Vonwegen wir hätten tausende Fehler)


    Lerne mit Kritik umzugehen oder bestreite deinen weiteren Weg als webentwickler von nunan alleine.


    Gruß
    Phip

  • Dann fange ich mal an:


    Mein Gebiet ist weniger die Gestaltung kompletter Internetseiten, mein Fachgebiet sind Grafikbearbeitung, Filmschnitt, 3D Modellarbeit / Texturierung und schließlich das Programmieren in vielen verschiedenen Sprachen (z.B. PHP, JavaScript, Java, AC2 + AC3 und mehr).


    Aus diesem Grund kann ich dir leider auch kein fertiges Werk präsentieren, allerdings kannst du dir hier mal eines meiner Formulare anschauen: http://aenter-taein-maent.de/fms/


    Nun zu deinem Code und was du besser machen könntest:


    Zitat


    hauptseite.html:Zeile 4:

    Code
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <title>aw-unterwegs Mexiko México Chiapas Yucatan Pazifik</title><meta name="description" content="">
      <meta name="author" content="WR">


    Wenn wir penibel korrekt sein wollen [*hust*] dann sortieren wir doch bitte den Titel zwischen den Meta Tags heraus und schreiben ihn darüber oder darunter.


    Zitat
    Code
    <body id="body">


    Das body Element kommt auf jeder Seite nur 1 mal vor, also brauchen wir ihm auch keine id geben, sondern sprechen ihn über seinen Tag Namen an:


    aw.css:Zeile 16:

    Code
    body {
        background-image: url(http://file1.npage.de/007997/02/bilder/hg-1.jpg);
        margin: 0;
      }


    Zitat


    hautseite.html:Zeile 25:

    Code
    <div id="kopf1">


    Diesem Element sind genau die selben Eigenschaften zugewiesen wie dem body Tag eine Zeile darüber, also überflüssig.


    Des Weiteren: Warum steht der Inhalt im "kopf1"?


    Zitat


    hauptseite.html:Zeile 6:

    Code
    <meta name="author" content="WR">


    Nicht sonderlich aufschlussreich, also überflüssig, hier werden wenn überhaupt komplette Namen (Name + Familienname) oder eine E-Mailadresse angegeben, alles Andere erfüllt wenig Zweck.


    Zitat


    hauptseite.html:Zeile 27:

    Code
    <img id="logo" src= "http://file1.npage.de/007997/02/bilder/unterwegs_1.jpg " alt="" >


    Genau hier gehört deine h1 Überschrift hin, welcher du dann per CSS das Hintergrundbild zuweist, dann kannst du optional den Text noch ausblenden.


    Zitat


    hauptseite.html:Zeile 29:

    Code
    <div id="navigation">


    Eine Navigation ist eine Auflistung, also nutzen wir hier <ul>




    Zitat


    hauptseite.html:Zeile 74 bis 86:


    Der Paragraph dort (<p>) ist komplett überflüssig.


    Zitat


    hauptseite.html:Zeile 89:

    Code
    <div align="center">


    Der div ist überflüssig, direkt davor ist einer dem man das selbe Attribut zuweisen könnte, außerdem nehmen wir dafür CSS:


    Code
    div#inhalt {
      text-align: center;
    }


    Zitat


    hauptseite.html:Zeile 96 bis 126:


    Dazu brauche ich nichts mehr sagen, siehe Abschnitt über Überschriften.


    Zitat


    hauptseite.html:Zeile 131:

    Code
    <div id="ende">


    Diesen div Container kannst du dir komplett sparen, auch das interessiert niemanden.. Es steht in diesem Fußbereich mehr als im Inhalt, dort gehört maximal ein Copyright oder Ähnliches hin.


    Was am Design absolut gar nicht geht:


    Dein Hintergrundbild lenkt viel zu sehr vom Rest der Seite ab, weder ist es sonderlich schön, noch hat es all zu viel mit dem Inhalt zu tun, hier reicht auch ein einfacher weißer (#FFFFFF) Hintergrund aus.


    Deine Kopfleiste sieht furchtbar aus, das Bild ist eindeutig verzerrt und das sieht absolut jeder sofort, hier kannst du mit einfachen leicht farbigen Rändern an den Seiten aushelfen.


    Die Farbe des Hintergrundes ist schrecklich eklig und tut auf den Augen weh, hier würde ich eher ein dezentes beige (#eadec9) empfehlen, welches man mit einer etwas dunkleren Farbe am Rand unterstützen könnte.


    Wenn wir nun noch eine ordentliche Schriftart (Helvetica, Arial, sans-serif) in einer kleineren Ausführung nutzen sieht das ganze schon mal wesentlich besser aus:


    Zitat


    Es gibt noch einige andere Kritikpunkte, aber das ist erst ein mal das Gröbste.


    Wer nach Hilfe fragt, wird sie bekommen, wer nett nach Hilfe fragt, bekommt auch nette Antworten


    Liebe Grüße und viel Spaß beim anschauen


  • Hallo Phip,


    mit Kritik kann ich sicherlich gut umgehen und fühle mich keineswegs angegriffen. Und der Champ bin ich sicherlich nicht, und auch kein Webentwickler.


    Zu den Fehlern: Schaue doch einmal in diesem Forum in die Quelltexte... Ich wollte ja eigentlich nur mal sehen, wie erfahrene Programmierer das machen.


    Die Seite von Dir:
    Site is under construction.
    CMS-bereich
    Sonst finde ich nichts - würde ich mir aber gerne mal ansehen (und das ist gar nicht ironisch gemeint).


    Obwohl
    Ironiemodus an - Auch Schreibfehler sind Fehler - Ironiemodus aus
    Man sollte übrigens nie nie sagen :wink:


    Und hierzu:
    Auszug:
    #navigation {
    float: left;
    margin: 0 0 -32767px 10px;
    padding-bottom: 32767px;
    width: 220px;
    }
    Was soll das?


    Damit wird erreicht, dass sich die Länge des 3-spaltigen Designs immer nach der längsten der drei Spalten richtet und nichts abgeschnitten wird.
    Vermutlich hättest Du das eleganter gelöst, aber es führen oft mehrere Wege zum Ziel und für mich hat es gereicht.


    Meine weiteren Bemerkungen schaue im nächsten Beitrag


    Saludos - Wolfgang

  • Hallo Basiii,


    vielen Dank, Du hast Dir ja sehr viel Mühe gemacht und sehr viele Punkte aufgeführt.


    Die werde ich mir sicherlich noch mal alle in Ruhe ansehen. Farben, Schriften usw. werde ich ändern, aber am Code werde ich vermutlich an dieser HP nicht mehr viel ändern (sicher bei der nächsten HP).


    Da Du sehr ausführlich geschrieben hast, möchte ich auch die Entstehungsgeschichte der HP ein wenig erläutern, denn an eine eigene HP hatte ich vorher nie gedacht.


    Ich bin ein etwas älteres Semester, dass erklärt wohl doch ein wenig das etwas antiquierte Design ?!? :wink:


    Der Ursprung kam von der Visualisierung meiner Solaranlage. Diese wollte ich gerne Online stellen. Leider gibt es da ein paar sicherheitsrelevante Punkte, die mich dann davon abhielten. Aber die Neugier war geweckt.


    So kam mir die Idee unsere Reisen auf einer HP unseren Freunden vorzustellen. Bei nPage fand ich einen Anbieter und im HTML-Seminar die nötigen Grundlagen. Schon bald musste ich feststellen, dass mich die fertigen Designs zu sehr einschränkten und wohl ein eigenes CSS-Design eine bessere Lösung ist. Die Editoren bei nPage zerschlugen mir schon nur durch Öffnen und wieder Speicher die ersten Ansätze meiner Seite, so dass ich schon bald nach anderen Lösungen suchen musste.


    Als Editor nutze ich Webocton-Scriptly, der mir die ersten Schritte sehr vereinfachte. Entstanden ist die Seite dann Stück für Stück ohne vorher zu wissen, was ich wollte. Immer wieder kamen mir neue Ideen, die dann aber meistens an anderen Stellen Probleme verursachten. Dann musste ich auch noch mit Erschrecken feststellen, dass die Seite je nach Browser unterschiedlich aussah, oder sogar komplett zerschlagen wurde. Daher ist auch absolut nichts von einer strukturierten Programmierung vorhanden. Sorry.


    Irgendwann hat mich auch der Ehrgeiz gepackt, und ich wollte immer mehr. Zum Beispiel das Hintergrundbild. Eigentlich sollte das wesentlich dezenter ausfallen. Diese Steinmuster findest Du oft in Mexiko, von daher passt es schon - und ich habe wirklich viele Stunden daran rumgebastelt... Noch ein Grund für das Bild - wenn Du die Seitenbreite veränderst "schweben" die Inhalte über dem Muster. Bei einem einfarbigen Hintergrund sieht man das nicht. Auch die Bilder scheinen über der Seite zu schweben. Das sind so Punkte, die mich unheimlich viel Zeit gekostet haben, weil ich einfach nur diesen Effekt wollte. Immer nach dem Motto: geht nicht, gibt es nicht.


    Zum Bild oben. Sicherlich ist es gespiegelt und gestreckt, aber ist das so schlimm? Reale Bilder findet man in der Bildleiste rechts. Gut der Schriftzug darin ist nicht gerade besonders gelungen :( (den werde ich bestimmt mal neu machen).


    Zu. "Wenn wir penibel korrekt sein wollen [*hust*] dann sortieren wir doch bitte den Titel zwischen den Meta Tags heraus und schreiben ihn darüber oder darunter."
    Was da wohin gehört und was die Einträge dort genau bewirken ist mir immer noch nicht so klar, leider. Außerdem werden dort viele Sachen von nPage automatisch eingetragen.


    Die Navigation und die Auflistung mit <ul>: Auch da hatte ich zu Beginn mal so angefangen, dann gab es aber Probleme mit dem stern auf der Karte mit "Mouse over" oder "Hover". Auch hier habe ich tagelang probiert, bis der Effekt endlich mal funktionierte... Auch die Überschriften - das hatte ich nicht so im Sinne von Überschrift gesehen, sonder eher zu einer einfachen Festlegung für verschiedene Schrifttypen und Größen. So habe ich das dann auch verwendet.


    Ebenso das <p> in der Bildleiste. Das habe ich verwendet um die Bilder dort bei "Mouse over" unterschiedlich zu den anderen Bildern zu verändern. Ist sicherlich nicht richtig so, aber...


    Besucherzähler: Meinst Du mit mager gefüllt weil dort bisher so wenig Besucher waren? Was funktioniert nicht? Den habe ich von nPage übernommen, wie dieser funktioniert weiß ich nicht.


    Dann noch zu der ersten Seite und dem Wilkommen......
    gedacht war die HP anfangs mal für unsere Feunde, denen wir früher mal per Mail von unseren Touren geschrieben haben... Dort wollte ich eigentlich nur auf Neues hinweisen. Aber man sieht alles oft nur aus der eigenen Sicht, daher sind mir auch Deine Hinweise sehr wichtig. Ich werde wohl einen Link zu Neuigkeiten einfügen.


    Dann noch zu den Farben: Dein Vorschlag mit den anderen Farben gefällt mir auch besser, werde daran sicherlich etwas ändern. Aber Mexiko ist ein sehr farbenfrohes Land! Darf ich Dich noch um ein paar andere passende Farbkombinationen bitten? Für Mexiko sind leuchtende Farbkombinationen von Orange-gelb mit Violett-blau oder grün sehr typisch und sehen in der Sonne immer faszinierend aus.


    Das war`s dann jetzt erstmal


    Saludos und nochmals vielen Dank - Wolfgang

  • Hallo Ratoncito,



    ich möchte dich darauf hinweisen, dass es in diesem Forum Regeln gibt, die du bei deiner Anmeldung bestätigt hast, also halte dich doch auch bitte daran.
    Falls du dich an diese Regeln nicht mehr erinnerst, so findest du sie auch in diesem Forum im Board-Bereich unter News/Fragen/Antworten.


    Bitte bearbeite auch deine Beiträge entsprechend, so dass sie den Regeln entsprechen.


    Grüße
    Laura


    PS:
    Über das mit den Überschriften kann man sich übrigens streiten. Eine h1, die auf jeder Seite gleich ist ist definitiv nicht besonders Suchmaschinenfreundlich, da so anscheinend auf jeder Seite der gleiche Inhalt steht. Besser pro Seite exakt eine h1, die die Überschrift der entsprechenden Seite ist. Somit hast du für die Suchmaschinen pro Seite eine Hauptüberschrift, die auch den Inhalt der Unterseite wiederspiegelt - somit bessere Chancen, auch die Unterseiten zu bekommen.
    Aber da gibt es geteilte Meinungen, da will ich nun nicht drüber streiten, das nur als Anmerkung.


  • Upps, was habe ich angestellt?


    Was ist gegen die Regeln? Ich habe mir diese gerade nochmal durchgelesen - was hab` ich angestellt?


    Gib mir doch bitte einen Hinweis


    Danke und noch einen schönen Sonntag - Wolfgang


  • Hallo Basiii,


    gerade habe ich noch einmal bei nPage geschaut, aber daran kann ich nichts ändern, der wird von nPage an dieser Stelle eingefügt.


    Mit dem Rest beschäftige ich mich noch


    Gruß - Wolfgang

  • Hallo Ratoncitio,


    1. du hast von mir eine PN bekommen. (Da du neu im forum bist, dachte ich sag dir lieber mal bescheid wo du das findest, da öfters leute diesbezüglich probleme haben :D)
    oben links steht "Persöhnlicher Bereich", "x neue nachrichten" <-- draufklicken und meine PN lesen ;)


    2. wogegen du verstoßen hast? Man soll lieber seinen Beitrag Editieren statt 3 Beiträge untereinadner zu machen. :):D:)


    gruß
    phip


  • Hallo Phip,


    hmh, persönliche Nachricht? Gerade geschaut, aber nichts gefunden. Das Postfach ist leer.


    Zu 2. Es sind nur 2 Beiträge untereinander. Der erste war an Dich, der zweite an Basiii. Dazwischen liegen mehr als zwei Stunden und ein Frühstück.
    Der dritte Beitrag bezog sich auf die Regeln, da steht aber nichts von einem Verbot zweier Beiträge hintereinander.
    Der nächste auf einen Kommentar von Basiii
    Und jetzt wieder einer weil ich die PN nicht finde.


    Flieg ich jetzt raus? Sorry, aber ich habe schon in einigen Foren geschrieben und noch nie eine Verwarnung bekommen.


    Irgendwie bin ich jetzt aber verwirrt.


    LG - Wolfgang

  • Zitat von &quot;Forenregeln&quot;

    möchtest du nur etwas an einen unmittelbar vorherigen Beitrag, auf den noch niemand geantwortet hat hinzufügen, so ändere bitte einfach deinen Beitrag davor ab, um Doppelposts zu vermeiden.


    ...


    Es gehört sich einfach nicht, mehrere Beiträge hintereinander zu posten. Deswegen fliegst du nicht raus, das ist lediglich ein Hinweis, dass du deine Beiträge entsprechend zusammenfügst und es nicht nochmal machst.

  • Zitat von &quot;lauras&quot;

    ...


    Es gehört sich einfach nicht, mehrere Beiträge hintereinander zu posten. Deswegen fliegst du nicht raus, das ist lediglich ein Hinweis, dass du deine Beiträge entsprechend zusammenfügst und es nicht nochmal machst.


    Hallo Lauras,


    in den Regeln habe ich nur dies gefunden:
    "möchtest du nur etwas an einen unmittelbar vorherigen Beitrag, auf den noch niemand geantwortet hat hinzufügen, so ändere bitte einfach deinen Beitrag davor ab, um Doppelposts zu vermeiden."


    Die zwei Beiträge von mir hintereinander waren einmal an Phip und einmal an Basiii. Da lagen, wie schon gesagt, mehrere Stunden zwischen und ich fand es übersichtlicher beide direkt anzusprechen, zumal die Beiträge alle recht lang waren. Und hinzugefügt habe ich nichts :D


    Wenn dies hier so streng gesehen wird, dann schreibt es auch bitte so streng und klar in die Regeln.


    Trotzdem allen noch ein schönes Wochenende - Wolfgang


    PS. Stand in den Regeln nicht auch etwas über Rechtschreibung?!? :roll: Duck, und ganz schnell weeeechhhh - - -.....


    Noch nachträglich hinzugefügt: Waren da nicht vorher schon zwei Beiträge von einem User an mich hintereinander?!? (Kann mir`s einfach nicht verkneifen) 8)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!