zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden Mehrere Seiten dynamisch als One-Pager ausgeben

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 25.06.2013, 13:03
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.04.2009
Beiträge: 45
MythTakes befindet sich auf einem aufstrebenden Ast
Standard Mehrere Seiten dynamisch als One-Pager ausgeben

Hej Xhtml Commune,

ich bin gerade auf diese Seite hier gestoßen. Sehr clever gelöst, da sie von der User Experience (mit JS, also als One-Pager) sehr gut funktioniert als auch SEO freundlich (ohne JS) aufgebaut wurde.

Kennt jemand ein Tutorial oder ein paar Quellen, wo dieser Aufbau mit jQuery beschrieben ist?

Bin dankbar für jeden Ratschlag.

MythTakes
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 25.06.2013, 13:18
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.016
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

Was genau möchtest du wissen? Ich kann mir nicht vorstellen, dass es ein umfassendes Tutorial gibt, welches alle nötigen Bereiche dazu abdeckt.

Der Inhalt der einzelnen Navigationpunkte wird beim Laden der Seite per Ajax geholt und eingehängt. Die Navigationpunkte werden anhang der Scrollposition aktiviert und mittels pushState die URL verändert.

Wahrscheinlich gibt es zumindest für Teile davon auch fertige Skripte, immerhin hast du jetzt ein paar Stichpunkte die dir hoffentlich weiterhelfen.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 25.06.2013, 14:08
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.04.2009
Beiträge: 45
MythTakes befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von inta Beitrag anzeigen
Der Inhalt der einzelnen Navigationpunkte wird beim Laden der Seite per Ajax geholt und eingehängt. Die Navigationpunkte werden anhang der Scrollposition aktiviert und mittels pushState die URL verändert.
Vielen Dank, damit hast du mir schon mal sehr geholfen
Mit Zitat antworten
  #4 (permalink)  
Alt 26.06.2013, 14:07
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.04.2009
Beiträge: 45
MythTakes befindet sich auf einem aufstrebenden Ast
Standard

@inta

Würdest du diese Technik auch schon für eine eher konserative Zielgruppe einsetzen? Also bei der es noch häufiger vorkommt, dass sie mit dem IE unterwegs sind? Das alles per Polyfill zu regeln wäre mir in dem Fall zu heikel.
Mit Zitat antworten
  #5 (permalink)  
Alt 26.06.2013, 14:38
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.016
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

Safari macht auch Probleme, in dem Fall würde ich das nicht unbedingt nutzen.

Man kann Einseiter hervorragend ohne pushState umsetzen. Es spricht nichts dagegen Anker zu verwenden, die funktionieren auch ohne Javascript. Das Scrollen zu Navigationspunkten kannst du ja trotzdem animieren wenn du möchtest.

Der Vorteil von pushState ist, dass du die URLs nicht ändern musst, wenn später mehr Inhalt kommt und die Website nicht mehr als One-Pager aufgebaut werden kann. Solange alles auf einer Seite ist, spricht meiner Meinung nach nichts gegen Hashes/Anker.
Mit Zitat antworten
  #6 (permalink)  
Alt 26.06.2013, 19:04
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.04.2009
Beiträge: 45
MythTakes befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von inta Beitrag anzeigen
Solange alles auf einer Seite ist, spricht meiner Meinung nach nichts gegen Hashes/Anker.
Aber aus SEO-Sicht wäre die Lösung mit PushState schon besser, da man mehrere Title-Tags anlegen hätte können oder?.
Ich mag One-Pager eigentlich sehr, nur dieser Punkt stört mich etwas.
Mit Zitat antworten
  #7 (permalink)  
Alt 27.06.2013, 02:08
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.016
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

Wer ist Seo? Ein Besucher deiner Seite?
Spaß beiseite, du baust die Seite für Nutzer, nicht für Suchmaschinen. Wenn du nicht gerade viele verschiedene Themen auf eine Seite packst sollte das keine negativen Auswirkungen haben. Und wenn du viele verschiedene Themen hast, ist ein One-Pager die falsche Wahl.

Mit pushState hast du hier übrigens nur einen Vorteil solange der Crawler kein Javascript verteht.
Mit Zitat antworten
  #8 (permalink)  
Alt 27.06.2013, 14:47
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.04.2009
Beiträge: 45
MythTakes befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von inta Beitrag anzeigen
Wer ist Seo? Ein Besucher deiner Seite?
Spaß beiseite, du baust die Seite für Nutzer, nicht für Suchmaschinen.


Keine Angst, das sehe ich doch auch so. User Experience geht bei mir auch noch vor. Allerdings baue ich die Site auch für jemanden. Eine Person, die im Suchmaschinen-Ranking schon vorn liegen möchte. Aber meinen Rat (möglichst viel Inhalt und Unterseiten zu verwenden) abschlug.

Nun wollte ich das so realisieren, um mir im Nachhinein zusätzlichen Ärger zu ersparen.

Aber vielen Dank inta für deinen Support
Mit Zitat antworten
  #9 (permalink)  
Alt 27.06.2013, 16:51
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.04.2009
Beiträge: 45
MythTakes befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von inta Beitrag anzeigen
Mit pushState hast du hier übrigens nur einen Vorteil solange der Crawler kein Javascript verteht.
Aber mir geht es da eigentlich nur um den von Google. Meines Wissens ignoriert der aber JS oder?
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 27.06.2013, 17:02
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.016
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

Zitat:
Zitat von MythTakes Beitrag anzeigen
Aber mir geht es da eigentlich nur um den von Google. Meines Wissens ignoriert der aber JS oder?
Ja, soweit ich weiß schon.

Du hast nur das Problem, dass pushState im IE < 10 nicht funktioniert und es dafür auch kein Polyfill gibt. Also entweder bekommen diese Nutzer einzelne Seiten zu sehen, oder einen One-Pager wo sich die URL nicht ändert (egal in welchem Abschnitt sie gerade sind). Du musst entscheiden wie wichtig dir das ist. Ich glaube ich würde bei deiner Zielgruppe die Hash-Variante bevorzugen.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
hintergrund wird abgeschnitten - 100% height..das alte uebel skitt CSS 5 13.03.2012 21:28
Bücher zu verkaufen Rupper Offtopic 2 08.07.2011 14:18
One Pager - Mini Portfolio stravid Site- und Layoutcheck 4 04.02.2010 14:48
Bücher zu verkaufen Geronimo Offtopic 4 16.05.2009 00:14
Liste im IE StarSt0rm CSS 3 22.08.2007 21:04


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:49 Uhr.