it-swarm.dev

Welche technischen Details sollte ein Programmierer einer Webanwendung berücksichtigen, bevor er die Website veröffentlicht?

Welche Dinge sollte ein Programmierer, der die technischen Details einer Webanwendung implementiert, berücksichtigen, bevor er die Site veröffentlicht? Wenn Jeff AtwoodHttpOnly-Cookies , Sitemaps , undstandortübergreifende Anfrage) vergessen kann Fälschungen alle auf derselben Seite, was für eine wichtige Sache könnte ich auch vergessen?

Ich denke aus der Sicht eines Webentwicklers darüber nach, sodass jemand anderes das eigentliche Design und den Inhalt für die Website erstellt. Während Benutzerfreundlichkeit und Inhalt wichtiger sind als die Plattform, haben Sie als Programmierer wenig Einfluss darauf. Sie müssen sich Sorgen machen, dass Ihre Implementierung der Plattform stabil ist, eine gute Leistung erbringt, sicher ist und alle anderen Geschäftsziele erfüllt (z. B. nicht zu viel kosten, zu lange für die Erstellung benötigen und bei Google ebenso gut rangieren wie bei Inhalt unterstützt).

Stellen Sie sich dies aus der Perspektive eines Entwicklers vor, der einige Arbeiten für Intranet-Anwendungen in einer ziemlich vertrauenswürdigen Umgebung ausgeführt hat und kurz vor seiner ersten Aufnahme steht und eine potenziell beliebte Website für das gesamte große, schlechte World Wide Web veröffentlicht.

Außerdem suche ich nach etwas Spezifischerem als nur einer vagen Antwort auf "Webstandards". Ich meine, HTML, JavaScript und CSS über HTTP sind eine Selbstverständlichkeit, insbesondere wenn ich bereits angegeben habe, dass Sie ein professioneller Webentwickler sind. Also darüber hinaus Welche Standards? Unter welchen Umständen und warum? Stellen Sie einen Link zur Standardspezifikation bereit.

2187
Joel Coehoorn

Die Idee hier ist, dass die meisten von uns bereits wissen most wissen sollten, was auf dieser Liste steht. Aber es gibt vielleicht ein oder zwei Dinge, die Sie vorher nicht wirklich untersucht, nicht vollständig verstanden oder vielleicht noch nie gehört haben.

Benutzeroberfläche und Benutzererfahrung

  • Beachten Sie, dass Browser Standards inkonsistent implementieren, und stellen Sie sicher, dass Ihre Website in allen gängigen Browsern einigermaßen gut funktioniert. Bei einem Mindesttest gegen eine aktuelle Gecko Engine ( Firefox ), eine WebKit-Engine ( Safari und einige mobile Browser) , Chrome , Ihre unterstützten IE-Browser (nutzen Sie die VPC-Images Application Compatibility ) und Opera . Überlegen Sie auch, wie Browser Ihre Site unter verschiedenen Betriebssystemen rendern.
  • Überlegen Sie, wie Benutzer die Website möglicherweise anders als in den wichtigsten Browsern verwenden: z. B. Mobiltelefone, Bildschirmleseprogramme und Suchmaschinen. - Einige Informationen zur Barrierefreiheit: WAI und Section508 , Mobile Entwicklung: MobiForge .
  • Staging: So stellen Sie Updates bereit, ohne Ihre Benutzer zu beeinträchtigen. Halten Sie eine oder mehrere Test- oder Staging-Umgebungen bereit, um Änderungen an Architektur, Code oder umfassenden Inhalten zu implementieren und sicherzustellen, dass diese auf kontrollierte Weise bereitgestellt werden können, ohne dass etwas beschädigt wird. Automatische Bereitstellung genehmigter Änderungen auf der Live-Site. Dies wird am effektivsten in Verbindung mit der Verwendung eines Versionskontrollsystems (git, Subversion usw.) und eines automatisierten Erstellungsmechanismus (Ant, NAnt usw.) implementiert.
  • Zeigen Sie dem Benutzer keine unfreundlichen Fehler direkt an.
  • Setzen Sie die E-Mail-Adressen der Benutzer nicht in Klartext, da sie sonst zu Tode gespammt werden.
  • Fügen Sie das Attribut _rel="nofollow"_ zu benutzergenerierten Links hinzu, um Spam zu vermeiden .
  • Bauen Sie wohlüberlegte Grenzen in Ihre Site ein - Dies gehört auch zu Sicherheit.
  • Erfahren Sie, wie Sie progressive Verbesserung tun.
  • Nach einem POST umleiten wenn dieses POST erfolgreich war, um zu verhindern, dass eine Aktualisierung erneut gesendet wird.
  • Vergessen Sie nicht, die Zugänglichkeit zu berücksichtigen. Es ist immer eine gute Idee und unter bestimmten Umständen eine gesetzliche Anforderung . WAI-ARIA und WCAG 2 sind gute Ressourcen in diesem Bereich.
  • Lesen Sie Lassen Sie mich nicht nachdenken .

Sicherheit

Leistung

  • Implementieren Sie bei Bedarf das Caching, verstehen und verwenden Sie das HTTP-Caching sowie HTML5 Manifest richtig.
  • Bilder optimieren - Verwenden Sie kein 20-KB-Bild für einen sich wiederholenden Hintergrund.
  • Komprimieren Sie den Inhalt für die Geschwindigkeit, siehe brotli , gzip/deflate (Luft ablassen ist besser).
  • Kombinieren/verketten Sie mehrere Stylesheets oder mehrere Skriptdateien, um die Anzahl der Browserverbindungen zu verringern und die Fähigkeit von gzip zu verbessern, Duplikate zwischen Dateien zu komprimieren.
  • Werfen Sie einen Blick auf die Website Yahoo Exceptional Performance , viele großartige Richtlinien, einschließlich der Verbesserung der Front-End-Leistung und des Tools YSlow (erfordert Firefox, Safari, Chrome oder Opera). Außerdem ist Google-Seitengeschwindigkeit (Verwendung mit Browser-Erweiterung ) ein weiteres Tool für die Leistungsprofilerstellung und optimiert auch Ihre Bilder.
  • Verwenden Sie CSS Image Sprites für kleine verwandte Bilder wie Symbolleisten (siehe Punkt "HTTP-Anforderungen minimieren").
  • Verwenden Sie SVG-Bildsprites für kleine verwandte Bilder wie Symbolleisten. SVG-Färbung ist etwas schwierig. Sie können darüber lesen hier .
  • Auf geschäftigen Websites sollte die Aufteilung von Komponenten auf Domänen berücksichtigt werden. Speziell...
  • Statische Inhalte (dh Bilder, CSS, JavaScript und allgemein Inhalte, die keinen Zugriff auf Cookies benötigen) sollten in einer separaten Domäne gespeichert werden die keine Cookies verwendet, da alle Cookies für eine Domain und ihre Subdomains bei jeder Anfrage an die Domain und ihre Subdomains gesendet werden. Eine gute Option ist die Verwendung eines Content Delivery Network (CDN). Betrachten Sie jedoch den Fall, in dem dieses CDN möglicherweise fehlschlägt, indem Sie alternative CDNs oder lokale Kopien einschließen, die stattdessen bereitgestellt werden können.
  • Minimieren Sie die Gesamtzahl der HTTP-Anforderungen, die ein Browser zum Rendern der Seite benötigt.
  • Wählen Sie eine template engine und rendern/kompilieren Sie sie mit Task-Läufern wie gulp oder grunt
  • Stellen Sie sicher, dass sich im Stammverzeichnis der Site eine _favicon.ico_- Datei befindet, d. H. _/favicon.ico_. Browser fordern es automatisch an , auch wenn das Symbol im HTML überhaupt nicht erwähnt wird. Wenn Sie kein _/favicon.ico_ haben, führt dies zu einer Menge von 404 Sekunden, wodurch die Bandbreite Ihres Servers erschöpft wird.

SEO (Suchmaschinenoptimierung)

  • Verwenden Sie "suchmaschinenfreundliche" URLs, d. H. Verwenden Sie _example.com/pages/45-article-title_ anstelle von _example.com/index.php?page=45_
  • Wenn Sie _#_ für dynamischen Inhalt verwenden, ändern Sie _#_ in _#!_ und dann auf dem Server _$_REQUEST["_escaped_fragment_"]_ wird Googlebot anstelle von _#!_ verwendet. Mit anderen Worten, _./#!page=1_ wird _./?_escaped_fragments_=page=1_. Für Benutzer, die möglicherweise FF.b4 oder Chromium verwenden, ist history.pushState({"foo":"bar"}, "About", "./?page=1"); ein großartiger Befehl. Obwohl sich die Adressleiste geändert hat, wird die Seite nicht neu geladen. Auf diese Weise können Sie _?_ anstelle von _#!_ verwenden, um dynamischen Inhalt beizubehalten und dem Server mitzuteilen, wenn Sie den Link per E-Mail senden, dass wir nach dieser Seite sind und AJAX nicht benötigt wird eine weitere zusätzliche Anfrage zu stellen.
  • Verwenden Sie keine Links mit der Aufschrift "hier klicken" . Sie verschwenden eine SEO-Gelegenheit und es macht die Dinge für Leute mit Screenreadern schwieriger.
  • Haben Sie eine XML-Sitemap , vorzugsweise am Standardspeicherort _/sitemap.xml_.
  • Verwenden Sie _<link rel="canonical" ... />_ Wenn Sie mehrere URLs haben, die auf denselben Inhalt verweisen, kann dieses Problem auch über Google Webmaster Tools behoben werden.
  • Verwenden Sie Google Webmaster-Tools und Bing Webmaster-Tools .
  • Installieren Sie Google Analytics gleich zu Beginn (oder ein Open Source-Analysetool wie Piwik ).
  • Wissen, wie robots.txt und Suchmaschinenspinnen funktionieren.
  • Leiten Sie Anfragen (mit _301 Moved Permanently_) nach _www.example.com_ nach _example.com_ (oder umgekehrt) um, um zu verhindern, dass das Google-Ranking zwischen beiden Websites aufgeteilt wird.
  • Wisse, dass es da draußen schlecht benommene Spinnen geben kann.
  • Wenn Sie keinen Textinhalt haben, schauen Sie in den Sitemap-Erweiterungen von Google nach Videos usw. In Tim Farleys Antwort finden Sie einige gute Informationen dazu.

Technologie

  • Verstehe HTTP und Dinge wie GET, POST, Sitzungen, Cookies und was es bedeutet, "zustandslos" zu sein.
  • Schreiben Sie Ihre XHTML / HTML und CSS gemäß den W3C-Spezifikationen und stellen Sie sicher, dass sie validieren . Das Ziel hierbei ist es, Browser-Macken-Modi zu vermeiden und als Bonus die Arbeit mit nicht herkömmlichen Browsern wie Bildschirmleseprogrammen und Mobilgeräten erheblich zu vereinfachen.
  • Verstehen Sie, wie JavaScript im Browser verarbeitet wird.
  • Verstehen Sie, wie JavaScript, Stylesheets und andere von Ihrer Seite verwendete Ressourcen geladen werden, und berücksichtigen Sie deren Auswirkungen auf die Leistung von wahrgenommen . Es wird jetzt allgemein als angemessen angesehen, Skripte an den unteren Rand Ihrer Seiten zu verschieben, mit Ausnahme von Dingen wie Analytics-Apps oder HTML5-Shims.
  • Verstehen Sie, wie die JavaScript-Sandbox funktioniert, insbesondere wenn Sie Iframes verwenden möchten.
  • Beachten Sie, dass JavaScript deaktiviert werden kann und wird und dass AJAX daher eine Erweiterung und keine Baseline ist. Auch wenn die meisten Benutzer es jetzt aktiviert lassen, denken Sie daran, dass NoScript immer beliebter wird. Obwohl moderne Crawler-Bots die Indizierung von JavaScript-generierten Inhalten unterstützen, sollten Sie die Verwendung von serverseitigem Rendering für andere Crawler-Bots oder Benutzer in Betracht ziehen, die JavaScript deaktiviert haben.
  • Erfahren Sie den Unterschied zwischen 301 und 302 Weiterleitungen (dies ist auch ein SEO-Problem).
  • Erfahren Sie so viel wie möglich über Ihre Bereitstellungsplattform.
  • Erwägen Sie die Verwendung eines Reset-Stylesheets oder normalize.css .
  • Berücksichtigen Sie JavaScript-Frameworks (z. B. jQuery , MooTools , Prototype , Dojo oder YUI 3 ), wodurch viele Browserunterschiede bei der Verwendung von JavaScript für die DOM-Manipulation ausgeblendet werden.
  • Wenn Sie die wahrgenommene Leistung und JS-Frameworks zusammen nehmen, sollten Sie einen Dienst wie die Google Libraries API verwenden, um Frameworks zu laden, damit ein Browser eine Kopie des bereits zwischengespeicherten Frameworks verwenden kann, anstatt ein Duplikat herunterzuladen Kopie von Ihrer Website.
  • Das Rad nicht neu erfinden. Bevor Sie ALLES tun, suchen Sie nach einer Komponente oder einem Beispiel dafür. Es besteht eine 99% ige Wahrscheinlichkeit, dass jemand dies getan und eine OSS-Version des Codes veröffentlicht hat.
  • Beginnen Sie auf der anderen Seite nicht mit 20 Bibliotheken, bevor Sie sich überhaupt für Ihre Anforderungen entschieden haben. Besonders im clientseitigen Web, wo es fast immer letztendlich wichtiger ist, die Dinge leicht, schnell und flexibel zu halten.

Fehlerbehebung

  • Verstehen Sie, dass Sie 20% Ihrer Zeit mit Codierung und 80% mit Wartung verbringen, also codieren Sie entsprechend.
  • Richten Sie eine gute Fehlerberichterstattungslösung ein.
  • Haben Sie ein System, mit dem Sie mit Vorschlägen und Kritik kontaktiert werden können.
  • Dokumentieren Sie, wie die Anwendung für zukünftige Supportmitarbeiter und Wartungsmitarbeiter funktioniert.
  • Machen Sie häufige Backups! (Und stellen Sie sicher, dass diese Sicherungen funktionsfähig sind.) Verwenden Sie eine Wiederherstellungsstrategie, nicht nur eine Sicherungsstrategie.
  • Verwenden Sie ein Versionskontrollsystem, um Ihre Dateien zu speichern, z. B. Subversion , Mercurial oder Git .
  • Vergessen Sie nicht, Ihre Abnahmetests durchzuführen. Frameworks wie Selenium können helfen. Insbesondere, wenn Sie Ihre Tests vollständig automatisieren, möglicherweise mithilfe eines Continuous Integration-Tools wie Jenkins .
  • Stellen Sie sicher, dass Sie über eine ausreichende Protokollierung verfügen, indem Sie Frameworks wie log4j , log4net oder log4r verwenden. Wenn auf Ihrer Live-Site etwas schief geht, müssen Sie herausfinden, was passiert.
  • Stellen Sie bei der Protokollierung sicher, dass Sie sowohl behandelte als auch nicht behandelte Ausnahmen erfassen. Melden/analysieren Sie die Protokollausgabe, da sie Ihnen zeigt, wo die Hauptprobleme auf Ihrer Site liegen.

Andere

  • Implementieren Sie sowohl serverseitige als auch clientseitige Überwachung und Analyse (eine sollte eher proaktiv als reaktiv sein).
  • Verwenden Sie Dienste wie UserVoice und Intercom (oder ähnliche Tools), um ständig mit Ihren Benutzern in Kontakt zu bleiben.
  • Folgen Sie Vincent Driessen 's Git-Verzweigungsmodell

Viele Dinge wurden nicht unbedingt weggelassen, weil sie keine nützlichen Antworten sind, sondern weil sie entweder zu detailliert sind, nicht in den Geltungsbereich fallen oder etwas zu weit gehen, als dass jemand einen Überblick über die Dinge bekommen möchte, die er wissen sollte. Bitte zögern Sie nicht, dies auch zu bearbeiten. Ich habe wahrscheinlich einige Dinge verpasst oder einige Fehler gemacht.

2655
victoriah