Was brauche ich, um eine Webseite/Code herunterladen und lokal bearbeiten zu können?

Hallo liebe Leute,

ich melde mich auch wieder ein mal – und so unverschämt wie ich bin, (leider) nur, weil ich euer Hilfe bzw. ein paar Einstiegsinfos brauche.

Und zwar erarbeiten wir für einen (kleinen) Kunden gerade ein Nachhaltigkeitskonzept und ein Punkt wird die Überarbeitung des Webauftritts sein. Genauer gesagt eine Zusatzunterseite zum Thema Nachhaltigkeit, unsere Werte etc.

Wir sind jedoch nur eine Gruppe von Studenten und niemand von uns hat wirklich Erfahrung in der Webentwicklung. (Bei mir beschränkt sich das momentan auf einen Crash-Kurs HTML).
Erster Gedanke war, mit Screenshots zu arbeiten und diese mit Photoshop zu bearbeiten. Sieht nachher zwar genau so aus wie wir es wollen, ist aber überhaupt nicht interaktiv bzw. nachher bei der Präsentation nicht sonderlich greifbar für den Kunden.

Mein Gedanke war, die diesen Unterreiter/Unterseite (wie man das auch nennen mag) lokal selber zu erstellen und dann lokal auf meinem Laptop über Beamer vorzuführen. (Also nicht online gestellt).

Die Homepage des Kunden ist relativ simpel gestaltet. Jetzt meine Frage, kann man den "Quellcode" einer Homepage runterladen und in einem Programm darstellen lassen und diesen dann bearbeiten. Geht das überhaupt? Was für Programme brauche ich da? (Für HTML, CSS und CMS und was weiss ich. Ich arbeite auf Mac OSX 10.9.2)

Ich weiss, ich klinge jetzt recht planlos/unwissend. Das bin ich auch. Aber ich bin bereit, da wirklich auch zu lernen und Zeit reinzustecken. Schliesslich ist das etwas, was mir später was bringen wird / gelernt fürs Leben. Ausserdem habe ich theoretisch ca. einen Monat Zeit, sollte auch zeitlich also möglich sein.

Ich möchte das Design der Seite auch nicht abändern (erstmal nicht zumindest) sondern nur zusätzlichen Inhalt hinzufügen und dann lokal präsentieren.
Reicht dafür, was ich selber ablesen/runterladen kann oder müsste ich den Kunden um die Quelle selbst bitten? (was hier eher ungünstig wäre)

Welche Programme verwende ich dafür am Besten?

Ich werde mich nun natürlich selber noch einlesen, aber ich dachte, ich wende mich gerade mal an Leute die da Bescheid wissen und mir vielleicht sagen können, dass ich's lieber gleich lassen soll... ;)


Danke und Grüsse!

Man kann sich nur den Clientseitigen Quellcode (HTML, CSS und JavaScripte) mittels eines Crawlers runterladen. z.B. mit HTTrack.
An den Serverseitigen Quellcode kommt ihr nur ran, wenn ihr einen Zugriff auf den Server hat.

Ihr könnt aber auch mittels Screenshots ein sog. Mock-up erstellen. Ein Mock-up lässt sich dann auch interaktiv gestalten.
balsamiq hat da ein ganz nettes Tool geschrieben. Ist aber nicht kostenlos.

Aah, ich Trottel, genau, mock-up. Und ich versuche hier zu umschreiben und umschreiben... :D

Okay, ich lese das jetzt so, dass es wohl deutlich einfacher wäre einen interaktiven Mock-up mittels z.B. dem tool von balsamiq zu erstellen, als anders. Wäre es denn überhaupt möglich, den mit Crawlers runterladbaren Quelltext die Seite lokal zum laufen zu bringen? Oder bräuchten wir da wirklich den serverseitigen Quelltext? (Sorry, hab da (noch) keine Ahnung.)

balsamiq hat auch einen Trial mit voller Funktion im Angebot, vielleicht reicht das dann ja schon von der Zeit. Nur, wie geben ich das dann dem Kunden nachher weiter, damit er das seinem Programmierer/Grafikstudio zeigen kann? Einfach mittels Screenshots wieder, der weiss dann ja wie nachbauen?

Btw. danke dir Whiz! Ich hätte meinen linken Arm darauf verwettet, dass du der erste (hilfsbereite) Poster bzgl. so einem Thema sein wirst. :)

Ich weiß zwar nicht so ganz, was ihr da so vorhabt, aber wie ich das verstehe, braucht ihr dann lediglich nur den clientseitigen Quellcode.
Der serverseitige Quellcode generiert ja den clientseitigen Code (den ihr ja über den Browser seht). HTML ist ja keine dynamische Scriptsprache, sondern eine statische Auszeichnungssprache. Man kann ja mit HTML z.B. keine Verbindung zu einer Datenbank aufbauen. Dies machen dann andere Sprachen, wie z.B. php, aber mit den php-Scripten könnt ihr eh nur wenig anfangen, weil ihr dann dafür einen Webserver braucht und selbst dann bringt euch das wenig, weil ihr die Datenbank nicht besitzt.

Ein Crawler ruft also die Webseite auf, wie ein Browser und durchsucht dann den HTML-Code nach weiteren Links, die er dann folgen kann.Es könnte bei den Crawlern aber zu Problemen kommen, wenn Links mittels JavaScript erzeugt werden, da die Crawler lediglich den HTML-Code nach Links durchsuchen und nicht den JavaScript-Code analysieren.

Da der HTML-Code meist sehr unstrukturiert generiert wird, und für Menschen etwas unleserlich ist, gibt es Tools, die den Code dann zurechtrücken. Wie z.B. die Web-App Dirty Markup.

Hmm... Ok. Ich denke, wir machen das doch eher mit einem Mock-up Tool, denn:

Ich habe mir in der Zwischenzeit balsamiq's tool etwas genauer angeschaut und mich dann noch weiter umgesehen und bin auf das Mock-up Tool Axure gestossen. Da kann man wirklich "interaktive Websites" (nach)bauen und dann auch gleich in HTML umrechnen lassen und lokal im Browser ansehen. Also mit Links, Unterseiten, Scrollboxen usw. Und zudem sieht es nicht so sketch-mässig aus wie bei balsamiq (obwohl es ja auch noch eine "clean" Modus geben soll).

Ich habe mir Axure jetzt mal zwischenzeitlich "ausgeliehen" und schaue, ob ich das so nach meinen Wünschen hinkriege. Wird sich wohl auch als viel zeiteffizienter erweisen, als wenn ich da jetzt zuerst mit Crwalern den Code holen muss und dann wirklich über HTML/CSS Editoren da was mühsam rumbastle, wenn ich das hier innerhalb von Sekunden via Drag and Drop hinkriege.

Ich meine, wir müssen uns ja nicht ein komplettes Webseiten Konzept erarbeiten/er-brainstormen, dafür ist was simples wie balsamiq sicher perfekt. Sondern uns wirklich an das vorhandene (sehr schlichte, schnörkellose) Design halten und da dann Content einbauen. Ich glaube das wird damit gut klappen.


Also, danke dir vielmals für die Hilfe und den Hinweis auf diese Mock-up Tools! Ich werde mich nochmals melden, wenn es nach meinen Wünschen geklappt hat und ich das hingekriegt habe... ;)