Mein Traum für meine ersten Webseite

  • Einen schönen guten Abend,

    Ich bin ja fleißig am html 5 und CSS lernen , damit ich Webseiten richtig machen kann und träume Nachts schon von den Codes und von meiner ersten Webseite. :) Heute Nacht habe ich von einer ganz besonderen Starseite geträumt, die ich gerne nachbauen möchte, wo ich als Anfängerin etwas Hilfe und Tipps von euch Profis brauche.

    Mein Traum ist folgender:

    Ich möchte auf der Starseite eine Weltkarte, wo ich an bestimmten Punkten / Länder ein Bild von z.B. einen kleinen Hundekopf als link einfüge und wenn man diesen Kopf anklickt, soll sich eine neue Seite öffnen, wo man dann zu diesem Ort / Land etwas lesen kann.

    Könnt ihr mir bitte dazu Tipps geben, wie ich das am besten umsetzen kann.

    Ich hoffe Ihr könnt mir helfen, dass ich diese Startseite machen kann um meinen Traum zu verwirklichen.

    Liebe Grüsse Monice

  • Guten Abend Monice,

    da fielen mir zunächst zwei Möglichkeiten ein, es zu realisieren: Die Hundeköpfe in die Weltkarte hinein zeichnen und mit Hilfe einer Imagemap die Links auf die Bilder legen.

    Oder: Die Hundeköpfe jeweils in ein a-Tag einbetten und dieses auf der Karte absolut positionieren. Die a-Tag bilden jeweils einen Link, der die betr. Seite öffnet.

    Beides ist zunächst mal nicht responsiv. Eine responsive Lösung mit SVG wird hier beschrieben:

    https://wiki.selfhtml.org/wiki…ials/responsive_Imagemaps

    Eine SVG-Grafik ist ohnehin zu empfehlen, da sie beliebig vergrößert und verkleinert werden kann.

  • Hallo


    Verweisssensitive Grafiken waren vor 15 Jahren mehr oder weniger Pflicht in jedem Webauftritt. Heutzutage werden sie aber kaum noch verwendet, da sie viele Nachteile haben.


    Viele Besucher erkennen die Verweise auf der Grafik überhaupt nicht und können deshalb die Links überhaupt nicht aufrufen. Es ist schließlich nicht üblich mit der Maus wild über jede Grafik zu fahren um versteckte Links zu finden.


    Viele Besucher klicken aus schlechter Erfahrung nur noch Links an, von denen sie aus der Beschreibung wissen, was sie erwartet. Zu Links auf Grafiken fehlt zu Erklärunge dazu häufig der Platz.


    Touchscreengeräte kennen keine hover-Effekte, die sind heutzutage aber bereits gegenüber Desktop-Geräten in der Mehrheit - mit noch steigender Tendenz. Die sowieso schon schlechte Möglichkeit über hover-Effekte Beschreibungen zu den Links einzufügen hilft somit nur noch einer Minderheit.


    Bei kleinen und / oder schmalen Bildschirmen wird der Platz für die Grafiken schnell zu klein. Die Links werden dann so klein, dass sie kaum noch anzuklicken sind. Mit Fingern auf Touchscreengeräten schon gar nicht.


    Oder es muss wild und nervig in alle Richtungen gescrollt werden. Wobei viele Besucher in Zeiten von Responsive Design häufig überhaupt nicht mit einem seitlichen Scrollen rechnen und so seitlich stehende Links überhaupt nicht erkennen.


    Eine Verweissensitive Grafik mag dein Traum sein - für deine Besucher ist sie eher ein Albtraum.


    Es hat schon seinen Sinn warum Verweissensitive Grafiken heutzutage trotz der deutlich verbesserten Möglichkeiten zur Einbindung (erweitertes CSS, SVG) kaum noch verwendet werden.


    Verweissensitive Grafiken haben auch heutzutage durchaus noch ihre Berechtigung, zum Beispiel in technischen Zeichnungen. Allerdings sollte aus dem zugehörigen Text deutlich werden, dass überhaupt eine Verweissensitive Grafik vorliegt und was die Besucher erwartet, wenn sie einen Link anklicken. Außerdem sollten sie auf möglichst vielen Endgeräten problemlos nutzbar sein.


    Gruss


    MrMurphy

  • Vielen Dank für deine Antwort und die Tipps.

    Die Hundeköpfe in die Weltkarte hinein zeichnen finde ich wäre zu unprofessionell

    Die Köpfe in ein a -Tag einbetten denke ich, ist die Lösung, an den a-Tag habe ich auch als erstes gedacht, nur weiß ich noch nicht, wie das umsetzen kann.

    Die Hundköpfe möchte ich als Favicon machen,

    SVG-Grafik kenn ich noch nicht und sagt mir jetzt noch gar nichts :(

    Ich muss noch viel lernen und ich hoffe ihr helft mir weiterhin dabei.

    Danke für den link :thumbup:, werde mich einlesen

  • Auch dir vielen Dank, Deine Antwort war sehr informativ und du hast mich auf einiges hingewiesen, was ich so noch nicht bedacht hatte. Vielen Dank, ich habe dadurch wieder einiges dazugelernt.:thumbup:

    Aber um näheres zu dem ganzen zu sagen, möchte ich die Seite erstmal machen und selbst ausprobieren, damit ich sehe wie das ganze in der Realität aussieht und was ich wie verbessern oder ändern kann.

    Was heißt ich muss erst einmal einen Prototyp herstellen , damit ich sehe wie da ganze in der Realität aussieht,

    PS. Die Grafik soll kein versteckten link sein, denn ich habe vor auf der Startseite darauf hinzuweisen, dass man auf den Kopf klicken soll, um auf einer neuen Seite nähere Infos zu erhalten., so das die Besucher wissen, was sie erwartet, wenn sie einen Kopf anklicken.

    Denn genauen Text weiß ich noch nicht genau.

    avatar-default.svg MrMurphy schrieb: Hallo


    Verweisssensitive Grafiken waren vor 15 Jahren mehr oder weniger Pflicht in jedem Webauftritt. Heutzutage werden sie aber kaum noch verwendet, da sie viele Nachteile haben.


    Viele Besucher erkennen die Verweise auf der Grafik überhaupt nicht und können deshalb die Links überhaupt nicht aufrufen. Es ist schließlich nicht üblich mit der Maus wild über jede Grafik zu fahren um versteckte Links zu finden.


    Viele Besucher klicken aus schlechter Erfahrung nur noch Links an, von denen sie aus der Beschreibung wissen, was sie erwartet. Zu Links auf Grafiken fehlt zu Erklärunge dazu häufig der Platz.


    Touchscreengeräte kennen keine hover-Effekte, die sind heutzutage aber bereits gegenüber Desktop-Geräten in der Mehrheit - mit noch steigender Tendenz. Die sowieso schon schlechte Möglichkeit über hover-Effekte Beschreibungen zu den Links einzufügen hilft somit nur noch einer Minderheit.


    Bei kleinen und / oder schmalen Bildschirmen wird der Platz für die Grafiken schnell zu klein. Die Links werden dann so klein, dass sie kaum noch anzuklicken sind. Mit Fingern auf Touchscreengeräten schon gar nicht.



    Oder es muss wild und nervig in alle Richtungen gescrollt werden. Wobei viele Besucher in Zeiten von Responsive Design häufig überhaupt nicht mit einem seitlichen Scrollen rechnen und so seitlich stehende Links überhaupt nicht erkennen.



    Eine Verweissensitive Grafik mag dein Traum sein - für deine Besucher ist sie eher ein Albtraum.



    Es hat schon seinen Sinn warum Verweissensitive Grafiken heutzutage trotz der deutlich verbesserten Möglichkeiten zur Einbindung (erweitertes CSS, SVG) kaum noch verwendet werden.


    Verweissensitive Grafiken haben auch heutzutage durchaus noch ihre Berechtigung, zum Beispiel in technischen Zeichnungen. Allerdings sollte aus dem zugehörigen Text deutlich werden, dass überhaupt eine Verweissensitive Grafik vorliegt und was die Besucher erwartet, wenn sie einen Link anklicken. Außerdem sollten sie auf möglichst vielen Endgeräten problemlos nutzbar sein.



    Gruss


    MrMurphy

    Alles anzeigen

    Auch dir vielen Dank, Deine Antwort war sehr informativ und du hast mich auf einiges hingewiesen, was ich so noch nicht bedacht hatte. Vielen Dank, ich habe dadurch wieder einiges dazugelernt.:thumbup:

    Aber um näheres zu dem ganzen zu sagen, möchte ich die Seite erstmal machen und selbst ausprobieren, damit ich sehe wie das ganze in der Realität aussieht und was ich wie verbessern oder ändern kann.

    Was heißt ich muss erst einmal einen Prototyp herstellen , damit ich sehe wie da ganze in der Realität aussieht,


    PS. Die Grafik soll kein versteckten link sein, denn ich habe vor auf der Startseite darauf hinzuweisen, dass man auf den Kopf klicken soll, um auf einer neuen Seite nähere Infos zu erhalten., so das die Besucher wissen, was sie erwartet, wenn sie einen Kopf anklicken.

    Denn genauen Text weiß ich noch nicht.

    Ich hoffe, dass ihr mir bei meinem Prototyp helft, damit ich alles schaffe umzusetzen

  • Zitat

    Oder: Die Hundeköpfe jeweils in ein a-Tag einbetten und dieses auf der Karte absolut positionieren. Die a-Tag bilden jeweils einen Link, der die betr. Seite öffnet.

    Beides ist zunächst mal nicht responsiv.

    Diese Aussage muss ich revidieren: Verwendet man konsequent Prozentangaben für Abmessungen und Positionen, kann diese Lösung sehr wohl responsiv sein, siehe hier:

    http://webentwicklung.ulrichbangert.de/weltkarte-hunde.html

  • Diese Aussage muss ich revidieren: Verwendet man konsequent Prozentangaben für Abmessungen und Positionen, kann diese Lösung sehr wohl responsiv sein, siehe hier:

    http://webentwicklung.ulrichbangert.de/weltkarte-hunde.html

    Hallo Sempervivum.

    Super, vielen lieben herzlichen Dank für den link.:):thumbup::thumbup::saint:

    Hast du das gemacht?

    Das ist in etwas das was ich machen möchte, nur eine andere Weltkarte und die Köpfe freigestellt

    Kannst du mir dabei mit den Codes und der Positionierung weiterhelfen

    Ich habe mir den Quelltext schon angesehen, aber da ich ja beim lernen noch ziemlich am Anfang stehe, wäre ich für jede Anleitung dankbar

  • Ja, das ist ein Demo, das ich für dich gemacht habe. Die Bilder bereitstellen und die Köpfe freistellen musst Du selber machen. Freistellen kann je nach Motiv eine Wissenschaft für sich sein, bist Du damit vertraut?

    Was die Positionierung betrifft, kann ich dich unterstützen, indem ich ein Tool baue, mit dem man die Köpfe verschieben kann und die Position ablesen. Du müsstest nur die Karte bereit stellen, vielleicht als Dateianhang, und die Größe der Köpfe angeben. Am einfachsten wäre es natürlich, wenn sie alle die selbe Größe hätten.

  • Ja, das ist ein Demo, das ich für dich gemacht habe. Die Bilder bereitstellen und die Köpfe freistellen musst Du selber machen. Freistellen kann je nach Motiv eine Wissenschaft für sich sein, bist Du damit vertraut?

    Was die Positionierung betrifft, kann ich dich unterstützen, indem ich ein Tool baue, mit dem man die Köpfe verschieben kann und die Position ablesen. Du müsstest nur die Karte bereit stellen, vielleicht als Dateianhang, und die Größe der Köpfe angeben. Am einfachsten wäre es natürlich, wenn sie alle die selbe Größe hätten.

    Super, ich weiß gar nicht wie ich dir danken soll. Mit freistellen bin ich nicht besonders vertraut, aber ich denke/ hoffe mit Gimp müsste ich das schon hinbekommen

    Dass Du mich mit der Positionierung unterstützen kannst, indem du mir ein Tool baust, mit dem ich die Köpfe verschieben kann, dazu kann ich nur Wow sagen:saint:, das ist mehr als ich mir erhofft habe und das freut mich sehr.:thumbup::thumbup::)

    Ich werde heute noch eine passende Karte suchen und bereitstellen und die Köpfe sollen dann auch alle die gleiche Größe haben.

    Nur ob ich den Kopf heute noch schaffe, weiß ich nicht.Sobald ich alles fertig habe, stelle ich es als Dateianhang ein.

    Für heute bedanke ich mich aufs herzlichste und wünsche dir eine gute Nscht.

    Ich werde mich jetzt an die Arbeit machen und hoffe, dass ich es heute noch alles schaffe.

  • Mit jQuery-UI-draggable war es eine Kleinigkeit:

    http://webentwicklung.ulrichba…arte-hunde-draggable.html

    Einen der Köpfe mit der Maus ziehen und das Ausgabefeld links unter der Karte beobachten.

    Hallo, kann mich leider erst jetzt wieder melden, hatte bis jetzt sehr viel Stress und bin deshalb auch mit Gimp und dem freistellen noch nicht viel weiter gekommen. Habe einfach nicht die Zeit dazu ;( aber sobald es geht, werde ich mich wieder melden.

    Bis dahin möchte ich mich nochmals aufs herzlichste bei dir für deine Hilfe bedanken und möchte dir einen schönen Sonntag wünschen.:)

Jetzt mitmachen!

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