In der Vergangenheit habe ich einige HTML-, CSS- und PHP-Codierungen durchgeführt, aber ich habe immer nur an Dingen gearbeitet, die bereits "fertig" waren, und ich habe noch nie eine Website von Grund auf neu gestartet. Allerdings habe ich kürzlich eine Domain und etwas Hosting für wenig Geld gekauft und hoffe, meine HTML-, CSS- und Javascript-Kenntnisse zu verbessern, damit ich als Webentwickler / Webmaster ein bisschen marktfähiger werde.

Welchen Prozess verwenden Sie normalerweise, um eine Website zu starten? Zeichnen Sie das Layout auf Papier und machen Sie dann den Code? Oder fangen Sie einfach an zu programmieren und die Ausgabe nach Ihren Wünschen anzupassen?

Mein Prozess sieht im Allgemeinen ungefähr so ​​aus:

1. Eigenschaften . Zeichnen Sie mit Bleistift und Papier die einzelnen Elemente / Seiten, aus denen die Site bestehen soll. Dies kommt zu den allgemeinen Fragen: Bauen Sie eine einfache Info- und Grafikseite für Ihre Mutter auf? eine E-Commerce-Lösung für ein kleines Unternehmen? Ein Blog / eine Galerie für einen Freund des Fotografen? Ihre Antwort bestimmt viel über den Build-Pfad, den Sie befolgen müssen. Diese Phase kann auch eine eingehende Diskussion mit einem Kunden oder demjenigen beinhalten, der das Boot fährt (wenn Sie es nicht sind).

2. Drahtmodell . Erstellen Sie mit allen erforderlichen Funktionen ein Drahtmodell. Entweder auf Papier oder mit einem Werkzeug wie einem Feuerwerk, mit dem Sie sehr einfache Navigationsfunktionen einbauen können. Wenn Sie mit einem CMS wie WordPress arbeiten, wie wird Ihr statischer Inhalt behandelt? Dies könnte auch ein guter Zeitpunkt sein, um sich Gedanken über die Dateistruktur zu machen. Wenn Ihr Projekt eine benutzerdefinierte Datenbank benötigt, ist es jetzt auch an der Zeit, mit der Planung von Design und Implementierung zu beginnen. Dies ist eine kritische Phase, da durch eine intelligente Planung viel Nachverfolgung und Nacharbeit eingespart werden kann, falls Fehler auftreten oder das Projekt schleichen sollte.

3. Technologie . Sobald die Planungsphase relativ ausgearbeitet ist, wählen Sie Ihre Technologien aus. Machst du gerade HTML? ein php cms in einer lampenumgebung? .net MVC Schaufenster? Diese Fragen können Einfluss darauf haben, welche Hosting-Umgebung benötigt wird, sowie auf die Kosten, die für den Betrieb der Sache anfallen. Wenn Sie eine Storefront durchführen, ist die Sicherheit ein Hauptanliegen (z. B. SSL- und PCI-Konformität). Stellen Sie sicher, dass Sie eine großartige Testumgebung (localhost oder anderweitig) eingerichtet haben.

4. Design / Layout . Wenn Ihre Featureliste und Ihr Drahtmodell ziemlich genau festgelegt sind, können Sie über das Design der Site nachdenken. Zu wissen, was die Seiten füllen wird, ist offensichtlich eine Voraussetzung. Ich arbeite gerne in Photoshop und nutze Ordner als Analog zu Ihrer Markup-Struktur. Ich gehe so weit, sie mit den beabsichtigten Markup- und CSS-Kennungen zu benennen. Obwohl es wahrscheinlich ratsam ist, eine freie Form zu zeichnen, bevor Sie wirklich detailliert werden. Ich benutze in der Regel "Layout" -Dateien, aus denen ich Elemente extrahiere und in "Prozess" -Dateien ablege - Dateien, die ich zur Ausgabe von Produktionsgrafiken verwende.

5. Markup / CSS . Sobald ein ziemlich sauberes Design ausgearbeitet ist (da es sich im Produktionsmodus sicherlich etwas biegt), können Sie mit dem Schreiben von Markups beginnen. Im Allgemeinen möchte ich ein Standardlayout haben, das den gesamten Inhalt der Website berücksichtigt. Also - sauber und flexibel sollte hier der entscheidende Punkt sein. Das Layout-Markup sollte ziemlich vollständig sein, bevor Sie mit dem Schreiben von CSS beginnen, aber ich finde, dass sie viel tun, um sich gegenseitig zu informieren. Sie werden in dieser Phase auch eine Menge SEO-Optimierungen vornehmen (richtige Benennung von Bildern oder A-Tags, Metainformationen, Doctypes usw.). Seien Sie gründlich.

5.1 Themenverwaltung . Wenn Sie mit einem CMS arbeiten und Ihr Design als benutzerdefiniertes Thema verwendet wird, finden Sie einige Tutorials dazu, wie Sie dies genau für Ihre beabsichtigte Anwendung tun können. Das kann ehrlich gesagt entmutigend sein;) Ich werde immer ein statisches Markup-Layout mit ziemlich vollständigem CSS erstellen, bevor ich es in Theme-Elemente zerlege.

6. Verhalten . Wenn Ihr Markup und CSS ziemlich vollständig aussehen und Ihr Thema möglicherweise bereits vorhanden ist, können Sie Verhaltensweisen entwickeln (Rollover usw.). Unauffälliges Javascript ist wichtig, es sei denn, Sie verwenden Funktionen, die dies unbedingt erfordern (ein Ajax-lastiges) Galerie oder datengesteuerter Flash-Inhalt). Die allgemeine Regel lautet: Wenn jemand Ihre Website mit deaktiviertem Javascript besucht, was wird er sehen? Ich entferne manchmal statische Elemente und ersetze sie dann zur Laufzeit durch interaktive Versionen.

7. Inhalt . Es sei denn, das Design ist abhängig vom Inhalt (Bilder sind manchmal zum Beispiel Inhalt) = Ich verwende im Allgemeinen Platzhaltertexte / -grafiken, bis das Design und Verhalten ziemlich gut etabliert sind. Vermeiden Sie es, mehr als einmal zu arbeiten. Wenn Sie Produktdaten eingeben, ist eine sorgfältige Fehlerprüfung und -prüfung erforderlich.

An diesem Punkt scheint es immer eine Zeit der Überarbeitung und des Fixierens und Polierens zu geben. Aber im Wesentlichen ist es Zeit, es zum Leben zu erwecken. Dann nimm einen Snack.

Hmmm. Ich denke, das ist mehr als nur "wie man anfängt". Aber vielleicht hilft es trotzdem. Viel Glück!

Beim Entwerfen einer Website beginne ich mit der Frage, warum?

Der erste Teil meines Workflows ist die Frage, WARUM? Wenn ich mit einem Kunden zusammenarbeite, muss er eine klare Vorstellung davon haben, was er mit der Website erreichen möchte.

1. Das Warum Fragen.

• Erzähl mir ein bisschen über dich und warum du das tust.

• Wer sind die kunden Was ist ihr spezifisches Bedürfnis / Schmerz? Bitte geben Sie mir einige konkrete Beispiele für verschiedene Kundentypen, was diese benötigen und was die Website für sie tun wird.

• Erzähl mir von dem Geschäft. Was genau machst du?

• Was macht dich besser als der nächste Typ?

• Wenn Sie nach dem Dienst suchen, den Ihr Unternehmen anbietet, welchen würden SIE in Google eingeben, um ihn zu finden?

Wenn Sie die Site für sich selbst erstellen, wissen Sie besser schon, was diese Antworten sind.

Wenn Sie anhand der Antworten auf die obigen Fragen feststellen, dass diese Personen ernst sind und tatsächlich eine gute Idee haben. Dann fahren Sie fort (Denken Sie daran, dass Sie noch nicht bezahlt werden, aber Sie sollten die Socken ausziehen, wenn sie Sie einstellen sollen.)

2. Die Forschung.

Verbringen Sie einige Zeit mit Nachforschungen über den Kunden und sein Unternehmen. Erfahren Sie, welche Erfolge sie in der Vergangenheit hatten und auf welche Probleme sie gestoßen sind. Sind Sie der 3. Entwickler, den sie engagiert haben? Was ist mit den anderen 2 Jungs passiert?

Finden Sie heraus, was der Kunde braucht. Für wen werden Sie diese Site erstellen? Ist der Kunde ein 60-jähriger Veteran im Ruhestand oder ein 16-jähriger mit Pickel konfrontierter Junge, der den ganzen Tag auf Facebook Farmville spielt?

Finden Sie heraus, wer die Konkurrenten sind. Sie wissen es vielleicht nicht einmal. Führen Sie eine Wettbewerbsanalyse von 5 bis 10 Konkurrenten durch und finden Sie heraus, wen wir für die Serps brauchen. Dies ist die Phase, in der Sie wissen müssen, was das Schlüsselwort Ziele ist. Irgendwann später und Ihr scheitert schon.

2b Der Vorschlag

Lassen Sie sie mit Ihren Kenntnissen über ihr Geschäft auffliegen und erstellen Sie eine Website-Vereinbarung / einen Website-Vorschlag, und halten Sie Ihren Vertrag bereit, sobald sie zustimmen. Holen Sie sich den unterschriebenen Vertrag und eine Anzahlung von 50% und fahren Sie mit Schritt 3 fort.

3. Die Mission - Haben Sie eine

Hier gibt es ein gemeinsames Thema: In all diesen Fällen geht es bei der Mission nicht um das Produkt als solches. Die Mission ist „nur“ etwas, was, wenn Sie es wirklich ernst meinen, erfordert, dass das Produkt absolut fantastisch wird, damit dies möglich wird. Wenn Sie es vorziehen: Diese Missionen sind die Antwort auf die Frage, warum haben wir gerade dieses neue Feature hinzugefügt ?, nicht, welches neue Feature fügen wir hinzu? - Benjamin Pollack.

Die Zeitachse muss festgelegt werden, damit alle ihre Erwartungen in die richtige Perspektive rücken.

4. Der Workflow

Hier fangen die meisten Leute an, also erkläre ich meinen Prozess, aber Sie müssen entscheiden, welcher Workflow für Ihre Situation, Ihr Team, Ihren Kunden usw. am besten geeignet ist.

1. Für mich steht der Inhalt an erster Stelle. Ich stelle sicher, dass der Client einen Großteil davon erledigt, bevor Code geschrieben wird. Es handelt sich nicht um die endgültige redaktionelle Bearbeitung eines Entwurfs, sondern mehr oder weniger um die Textwörter, die auf den Seiten erscheinen. Wenn ein Marketing-Team involviert ist, kann dies eine Weile dauern.

2. Sie sollten bereits eine Vorstellung davon haben, wie die Site aussehen wird. Sie sollten den Inhalt haben. Nun müssen Sie das Layout und die allgemeinen Gestaltungsprinzipien bearbeiten, um das in Schritt 3 festgelegte Ziel zu erreichen.

   Ich hasse Drahtgitter, aber ich verstehe, dass sie notwendig sind. Nur weil Sie wissen, wie die Site aussieht, kann es sein, dass Ihr Kunde sie nicht sieht. Dies dient Ihrem Schutz und den Kunden. Wenn alle glücklich sind, lassen Sie sie etwas abzeichnen, das besagt: "Das ist es, wofür wir Sie bezahlen".

3. Frontend-Entwicklung und Benutzeroberfläche - HTML, CSS und DESIGNING IM BROWSER , Andy Clarkes Hardboiled-Technik. Ich habe es satt, so viel Zeit in Photoshop zu verschwenden, wenn ich weiß, dass ein realistischeres, schnelleres Modell gezeigt werden kann, das mir auch einen Vorsprung bei der Entwicklung verschafft.

4b. Die Codebasis

Endlich hast du Spaß. Richten Sie VERSION CONTROL für Sie und Ihre Kunden ein, bevor Sie loslegen . Da Sie die Versionskontrolle durchführen, sollten Sie BUG TRACKING einrichten, während Sie gerade dabei sind.

4c. Kopierbearbeitung

Erinnern Sie sich an den Inhalt, den wir haben? Jetzt muss es kopiert werden. Ich lutsche daran, versuche also, jemand anderen einzustellen oder stelle sicher, dass viele Leute es lesen. Überprüfen Sie, ob die Keywords, über die wir in Schritt 2 gesprochen haben, für SEO optimiert sind. Wenn unser Inhalt großartig ist und sich tatsächlich um diese Schlüsselwörter handelt, sollte dies selbstverständlich sein.

5. Beta- und UI-Tests

Holen Sie sich einige lebendige, atmende Menschen, die sich vor Ihre Website setzen und sie nutzen. Ich möchte meine Mutter werben, die manchmal anruft und wissen will, warum ihr Drucker nicht druckt (Der Stecker Mama, er muss zuerst eingesteckt werden). Diese Art von Benutzern muss in der Lage sein, auf Ihrer Website zu navigieren, es sei denn, Sie verwenden das oben gezeigte Beispiel mit Pickelgesicht.

6. Wartung und SEO Plan

Stellen Sie sicher, dass jeder weiß, wer für den Kampf gegen die Servertiere zuständig ist .

In einem Monat beziehen Sie sich auf die von uns durchgeführte Wettbewerbsanalyse und vergleichen Sie unsere Website mit den von uns analysierten. Verwenden Sie diese Daten, um Ihren SEO-Plan zu erstellen, und NEIN. Ich spreche nicht von Schlangenöl-SEO. Ich spreche davon, sicherzustellen, dass Sie immer noch relaventen Inhalt generieren. Websites verlinken natürlich auf Sie (weil Sie so fantastisch sind) und Ihre Titel-Tags Passen Sie den Body-Text an. SEO ist ein langer Prozess, es sei denn, Ihr Stack Overflow verfügt über eine Armee von 14,1 Millionen Nutzern, um qualitativ hochwertige Inhalte für Sie zu generieren.

Es gibt einen großen Unterschied zwischen qualitativ hochwertigen Inhalten und dem, was Sie auf der "mit Bindestrich versehenen Site" finden, die ich nicht verlinken werde. (Um zu verhindern, dass der No-Follow-Saft auch nur auf sie tropft).

7. Starten Sie

Funktioniert alles? Die Mission, Großartiges zu schaffen, wurde erfüllt? Habe einen Startplan und führe ihn aus.

Wenn Sie in den Schritten 1 - 6 alles richtig gemacht haben, wird Ihr Start zum Kinderspiel , und Sie werden möglicherweise Probleme haben. Sei einfach bereit für sie und behebe alle Fehler.

Rechnung senden, spülen und wiederholen.

Ich beginne gerne mit <!DOCTYPE html>

Im Ernst ... erste Prioritäten:

1. Finden Sie heraus, was der Kunde möchte. Zeichnen Sie eine grobe Skizze für das Grundlayout, lassen Sie sich ein Farbschema anzeigen usw.
2. Erstellen Sie ein grundlegendes Navigations- und Layout-Mock-up (statisch) und arbeiten Sie mit dem Client zusammen, um es zu verfeinern.
3. Tatsächliche Produktion. Holen Sie sich CMS und / oder statische Inhalte an Ort und Stelle. Setzen Sie sich erneut mit dem Kunden in Verbindung, um sicherzustellen, dass er das Gesuchte hat und das CMS bzw. das CMS seine Anforderungen erfüllen kann.
4. Verfeinere und wiederhole 3, bis der Kunde zufrieden ist.
5. ????
6. Profitieren!

Zuerst würde ich das Grundlayout zeichnen und es auf Papier entwerfen, bevor ich mit dem Codieren beginne. Nachdem Sie das grundlegende Design auf Papier erstellt haben, ist es einfach, es modular zu codieren. Offcourse php & css ist die beste Möglichkeit, es anzupassen.

Ich beginne immer gerne damit, ein Modell mit einer Art Photoshop-Software zu erstellen, damit alle Bilder in Ihre Website aufgenommen werden können.

Die meisten Antworten gehen bereits in die Tiefe. Lassen Sie mich nur hinzufügen, dass Sie ein Framework oder Vorlagen verwenden sollten, damit Sie keine Zeit damit verschwenden, die Grundlagen neu zu schreiben.

Es gibt viele PHP-Frameworks ( Kohana ist mein persönlicher Favorit) oder viele Leute verwenden Wordpress als Basis. Sie könnten auch ein CSS-Framework verwenden, wieder gibt es viele, eines der beliebtesten ist das 960-Rastersystem

Wie fangen Sie normalerweise beim Entwerfen einer Website an ?

Wie Sie hatte ich vor ein paar Jahren das Bedürfnis, mich als Webentwickler / Designer zu vermarkten. Ich fand meinen Ausgangspunkt, um in meinem eigenen Verstand zu verstehen, welche Informationen, Bilder und Botschaften ich Besuchern meiner Website anbieten möchte. und was ich wollte, dass der Benutzer während des Besuchs meiner Website erreicht / tut .

Nachdem ich dieses Verständnis erlangt hatte, wurde der Designprozess viel klarer. Es erlaubte mir, die Elemente meiner Homepage und nachfolgender Seiten aufzuschreiben, die diese Elemente kommunizieren würden.

Ich war zum Beispiel sehr daran interessiert, meinen Lebenslauf leicht auffindbar und herunterladbar zu machen. Deshalb habe ich bei der Gestaltung meiner Website darauf geachtet, dass Informationen zu meinem Lebenslauf und zu den Stellen, an denen sie verfügbar sind, zur Verfügung stehen.

Die Moral der Geschichte soll relevant sein. Alles auf Ihrer Website sollte einem Zweck dienen, ansonsten ist es nur unnötiges Rauschen.