Ce detalii tehnice ar trebui un programator de aplicatii web ia în considerare înainte de a face site-ul public?

Ce lucruri ar trebui să un programator de punere în aplicare detaliile tehnice ale unei aplicații web în considerare înainte de a face site-ul public? Dacă Jeff Atwood pot uita HttpOnly cookie-uri, sitemap, and cross-site request falsuri all în același site, ce important lucru pe care am putut fi uitat la fel de bine?

Am'm gândesc la asta de la un dezvoltator web's perspectiva, astfel că altcineva este de a crea designul actual și de conținut pentru site-ul. Deci, în timp ce gradul de utilizare și conținutul poate fi mai important decât platforma, programator au puține de spus în asta. De ce ai nevoie să vă faceți griji este că punerea în aplicare a platformei este stabil, funcționează bine, este sigur, și îndeplinește orice alte obiective de afaceri (ca nu costa prea mult, ia prea mult timp pentru a construi, și de rang, precum și cu Google ca conținutul suporta).

Cred că de acest lucru din perspectiva unui dezvoltator care's-a făcut un serviciu intranet-aplicații de tip într-o destul mediu de încredere, și este pe cale de a avea primul foc și a stinge un potențial popular site pentru întreaga big bad world wide web.

De asemenea, am'm în căutarea pentru ceva mai mult, nu doar un vag "standarde web" răspuns. Adică, HTML, JavaScript, CSS și peste HTTP, sunt destul de mult de dat, mai ales atunci când am'am specificat deja că te're un web designer profesionist. Deci, dincolo de faptul că, Which standarde? În ce circumstanțe și de ce? Să ofere un link către standard's caietul de sarcini.

Soluția

Ideea de aici este că cele mai multe dintre noi ar trebui să already știu most de ceea ce este pe această listă. Dar nu ar putea fi doar unul sau două elemente-ai't într-adevăr privit în înainte, don't pe deplin înțeles, sau poate nici nu a auzit. Interfață și Experiența Utilizatorului

  • Să fie conștienți de faptul că browsere punerea în aplicare a standardelor de inconsecvent și asigurați-vă că site-ul funcționează destul de bine în toate browserele importante. La o minimă de încercare împotriva unui recente Gecko motor (Firefox), un motor WebKit (Mozilla și unele browsere mobile), internet explorer, acceptat IE browsere (profita de Cerere de Compatibilitate VPC Imagini) și Mozilla. De asemenea, ia în considerare modul browsere face site-ul dvs. în diferite sisteme de operare.
  • Ia în considerare modul în care oamenii ar putea folosi site-ul, altele decât din browserele importante: telefoane mobile, cititoare de ecran și de motoarele de căutare, de exemplu. — Unele informații despre accesibilitate: WAI și Section508, dezvoltarea de telefonie Mobilă: MobiForge.
  • Intermediere: Cum pentru a implementa actualizări, fără a afecta utilizatorii. Au una sau mai multe testare sau de intermediere medii disponibile pentru a pune în aplicare modificările aduse arhitectura, cod sau zdrobitoare de conținut și de a se asigura că acestea pot fi implementate într-un mod controlat, fără a se rupe nimic. Au un mod automatizat de atunci implementarea aprobat modificări la site-ul live. Acest lucru este cel mai eficient puse în aplicare în legătură cu utilizarea de un sistem de control al versiunilor (git, Subversion, etc.) și-o construi automat mecanism (Ant, NAnt, etc.).
  • Don't de afișare neprietenos erori direct la utilizator.
  • Don't pune utilizatorii' adrese de e-mail în format text simplu ca ei vor primi raspandit la moarte.
  • Adăugați atributul `rel="nofollow" să generat de utilizator link-uri pentru a evita spam.
  • A construi bine luate în considerare limitele în site-ul dvs. - Aceasta aparține, de asemenea, sub Pază.
  • Să învețe cum să facă progressive enhancement.
  • Redirect după un POST în cazul în care POST a fost de succes, pentru a preveni un refresh la prezentarea din nou.
  • Don't uitați să luați accesibilitate în considerare. L's întotdeauna o idee bună și, în anumite circumstanțe, l's a cerință legală. WAI-ARIA și WCAG 2 sunt bune resurse în acest domeniu.
  • Citit Don't Mă Face să Cred. Securitate
  • L's o mulțime de digerat, dar OWASP ghid de dezvoltare acoperă Web Site-ul de securitate de sus în jos.
  • Știu despre Injecție special SQL injection și cum să-l împiedice.
  • Niciodată să nu ai încredere intrare de utilizator, nici orice altceva care vine în cerere (care include prăjituri și formă ascunsă valori de câmp!).
  • Hash parolele folosind sare și de a folosi diferite săruri pentru rânduri pentru a preveni curcubeu atacuri. Utilizați un lent algoritm hash, cum ar fi bcrypt (testate în timp) sau scrypt (chiar mai puternic, dar mai nou) (1, 2), pentru stocarea parolelor. (Cum Pentru A Stoca În Siguranță Cu O Parolă). De NIST aprobă, de asemenea, de PBKDF2 la hash parole", și's FIPS aprobat în .NET (mai multe informatii aici). Evita folosind MD5 sau SHA familie direct.
  • Don't încercați să vină cu propria ta fantezie de autentificare system. L's un lucru atât de ușor pentru a obține greșit într-un mod subtil și de netestat moduri și nu m't știu chiar de ea până after te're tocat.
  • Știu reguli pentru procesarea cardurilor de credit. (A se vedea această întrebare precum)
  • Utilizați SSL/TLS/HTTPS pentru orice site-uri în cazul în care datele sensibile sunt introduse (cum ar fi acreditările, Informații personale, informații despre carduri de credit). Las's Cripta este un program gratuit de autoritate de certificare care pot ajuta.
  • A preveni deturnarea sesiunii.
  • Evita cross site scripting (XSS).
  • Evita cross site request falsuri (CSRF).
  • Evita Clickjacking.
  • Ține-ți sistem(e) de până la curent cu cele mai recente patch-uri.
  • Asigurați-vă că conexiunea la baza de date de informații este asigurat.
  • Păstrați-vă la curent cu cele mai noi tehnici de atac și vulnerabilități care afectează platforma.
  • Citit Google Browser-Ul De Securitate Manual.
  • Citit Aplicație Web Hacker's Handbook.
  • Dacă luăm în considerare principiul celui mai mic privilegiu]38. Încearcă să rula aplicația server ca non-root. (tomcat exemplu)
  • Pune rel="noopener noreferrer" pe toate furnizate de utilizator, link-uri cu target="_blank" pentru a preveni JavaScript pe pagina de destinație de la redirecționarea pagina de altă parte, cum ar fi un fals pagina de login. Mai multe Informații
  • Luați în considerare utilizarea o stricte de Conținut Politica de Securitate. Performanță
  • Punerea în aplicare cache, dacă este necesar, de a înțelege și de a folosi HTTP caching în mod corespunzător, precum HTML5 Manifesta.
  • Optimizarea imaginilor - don't folosi un 20 KB imagine pentru a o repeta de fundal.
  • Comprima conținutul de viteză, a se vedea brotli, gzip/dezumfla (<grevă>dezumfla este mai bine).
  • Combina/înlănțui mai multe foi de stil sau mai multe fișiere script pentru a reduce numărul de browser-ul de conexiuni și de a îmbunătăți gzip capacitatea de a comprima suprapunerile între fișiere.
  • Să ia o privire la Yahoo Performanțe Excepționale ului, o mulțime de mare de linii directoare, inclusiv îmbunătățirea front-end de performanță și lor YSlow instrument (necesită Firefox, Safari, Chrome sau Opera). De asemenea, Google page speed (utilizarea cu extensie de browser) este un alt instrument pentru profiluri de performanță, și optimizează imaginile prea.
  • <grevă>Folosiți - Imagine CSS Sprites pentru mici legate de imagini, cum ar fi bare de instrumente (a se vedea "minimiza cererile HTTP" punct)
  • Utilizați SVG sprite imagine pentru întreprinderile mici legate de imagini, cum ar fi barele de instrumente. SVG colorat este cam complicat. Puteți citi despre el aici.
  • Ocupat de site-uri web ar trebui să ia în considerare divizare componente domenii. În mod special...
  • Conținut Static (de exemplu, imagini, CSS, JavaScript, și, în general, un conținut care nu't nevoie de acces la cookie-uri) ar trebui să meargă într-un domeniu separat care nu utilizează cookie-uri, pentru că toate cookie-urile pentru un domeniu si subdomeniile acestuia sunt trimise cu fiecare cerere de domenii si subdomenii. O bună opțiune este de a utiliza o Rețea de Livrare de Conținut (CDN), dar ia în considerare cazul în care CDN poate eșua prin includerea alternative Cdn, sau copii locale, care poate fi servit în loc.
  • Reduce numărul total de cereri HTTP necesare pentru un browser pentru a randa pagina.
  • Alege un model motor și render/pre-compila folosind task-alergători ca înghițitură sau grunt
  • Asigurați-vă că există un favicon.icofișierul în rădăcina site-ului, de exemplu/favicon.ico. [Browsere va automat solicita](http://mathiasbynens.be/notes/rel-shortcut-icon), chiar dacă pictograma nu este menționat în HTML, la toate. Dacă nu aveți o/favicon.ico`, acest lucru va duce la o mulțime de 404s, golirea serverului dvs. de lățime de bandă. SEO (Search Engine Optimization)
  • Utilizarea "motor de căutare prietenos" Url-uri, de exemplu, folosesc example.com/pages/45-article-title "în loc de" example.com/index.php?page=45
  • Atunci când se utilizează # pentru conținut dinamic schimba # a #! și apoi pe server $_REQUEST["_escaped_fragment_"] este ceea ce googlebot folosește în loc de #!. Cu alte cuvinte, ./#!page=1 "devine"./?_escaped_fragments_=pagina=1. De asemenea, pentru utilizatorii care pot consuma FF.b4 sau Crom, istoria.pushState({"foo":"bar"}, "Despre", "./?page=1"); Este o mare de comandă. Deci, chiar dacă bara de adrese a schimbat pagina nu a reîncărca. Acest lucru vă permite să folosesc? "în loc de"#! ` pentru a păstra conținutul dinamic și, de asemenea, spune-server atunci când te-a trimis link-ul, că tot suntem în această pagină, iar AJAX nu are nevoie pentru a face o cerere.
  • Don't folosi link-uri care spun "click aici". Te're a pierde un SEO oportunitate și de a face lucrurile mai greu pentru persoanele cu cititoare de ecran.
  • Au o XML sitemap, de preferință în locația implicită /sitemap.xml.
  • Utilizați <link rel="canonic" ... /> atunci când aveți mai multe adrese Url care indică același conținut, această problemă poate fi, de asemenea, abordate din Google Webmaster Tools.
  • Utilizați Google Webmaster Tools și Bing Webmaster Tools.
  • Instala Google Analytics chiar de la început (sau un open source instrument de analiză, cum ar fi Piwik).
  • Știu cum robots.txt și motorul de căutare păianjeni de muncă.
  • Cererile de redirecționare (folosind 301 Mutat Permanent) cer www.example.com " la " example.com (sau invers) pentru a preveni divizarea google clasament între cele două site-uri.
  • Știu că nu poate fi prost s-au comportat păianjeni acolo.
  • Dacă aveți non-text uite în Google's sitemap extensii pentru video etc. Există unele informații bune despre acest lucru în Tim Farley's a răspunde. Tehnologie
  • Înțelege HTTP și lucruri cum ar fi GET, POST, sesiuni, cookie-uri, și ce înseamnă să fii "apatrid".
  • Scrie XHTML/HTML și CSS conform specificațiile W3C și asigurați-vă că validare. Scopul aici este de a evita browser-ul ciudatenii moduri și, ca un bonus face mult mai ușor de a lucra cu non-tradiționale de browsere, cum ar fi cititoare de ecran și dispozitive mobile.
  • Înțeleg cum JavaScript este procesat în browser-ul.
  • Înțeleg cum JavaScript, foi de stil, și alte resurse utilizate de către pagina dvs. sunt încărcate și ia în considerare impactul lor asupra perceput de performanță. Acum este considerat ca fiind adecvat pentru a muta script-uri la partea de jos de pagini cu excepțiile fiind, de obicei, lucruri cum ar fi google analytics aplicații HTML5 sau lamele.
  • Înțeleg cum JavaScript nisip funcționează, mai ales dacă intenționați să utilizați iframe.
  • Să fie conștienți de faptul că JavaScript poate și va fi dezactivat, și că AJAX este, prin urmare, o prelungire, nici o bază. Chiar dacă majoritatea utilizatorilor normali las pe acum, amintiți-vă că NoScript este din ce în ce mai popular, dispozitive mobile ar putea să nu funcționeze cum era de așteptat, și Google a câștigat't rula cele mai de JavaScript atunci când indexarea site-ului.
  • Aflați diferența între 301 și 302 redirecționează (acest lucru este, de asemenea, un SEO problema).
  • Aflați cât de mult ca tine, eventual se poate despre platforma de implementare.
  • Luați în considerare utilizarea o Reset Foaie de Stil sau normaliza.css.
  • Ia în considerare cadre JavaScript (cum ar fi jQuery, MooTools, Prototip, Dojo sau YUI 3), care va ascunde o mulțime de browser-ul diferențe atunci când se utilizează JavaScript pentru manipulare DOM.
  • Având performanța percepută și JS cadrele împreună, luați în considerare utilizarea unui serviciu, precum Google Biblioteci API pentru a încărca cadre, astfel încât un browser, puteți utiliza o copie a cadrului are deja în cache mai degrabă decât a descărca o copie duplicat de pe site-ul.
  • Don't reinventeze roata. Înainte de a face ORICE de căutare pentru o componentă sau un exemplu despre cum se face. Există 99% șanse ca cineva a facut-o si a lansat un OSS versiune a codului.
  • Pe de alta parte de asta, don't începe cu 20 de biblioteci înainte de'am decis chiar ceea ce nevoile dumneavoastra sunt. În special pe partea de client web unde l's aproape întotdeauna în cele din urmă mai important pentru a menține lucrurile ușor, rapid și flexibil. Bug fixing
  • Te înțeleg'll petrece 20% din timpul de codificare și de 80% de a menține, astfel de cod în mod corespunzător.
  • O eroare de raportare soluție.
  • Un sistem pentru ca oamenii să contactați cu sugestii și critici.
  • Document cum funcționează aplicația pentru viitor personalul de sprijin și persoane care desfășoară activități de întreținere.
  • Face backup-uri frecvente! (Și asigurați-vă că aceste backup-uri sunt funcționale) Au un restore de strategie, nu doar o strategie de rezervă.
  • Utilizați o versiune de sistem de control pentru a stoca fișiere, cum ar fi Subversiune, Mercurial sau Git.
  • Don't uita să-ți faci Testele de Acceptare. Cadre, cum ar fi Seleniu poate ajuta. Mai ales dacă vă automatiza complet de testare, probabil folosind o Continuă instrument de Integrare, cum ar fi Jenkins.
  • Asigurați-vă că aveți suficient de logare în loc, folosind framework-uri precum log4j, log4net sau log4r. Dacă ceva nu merge bine pe site-ul live, te'll nevoie de o modalitate de a afla ce.
  • Atunci când vă conectați asigurați-vă că surprinde atât manipulate excepții, și netratată excepții. Raport/analiza jurnal de ieșire, ca'll-ți arăt în cazul în care problemele-cheie sunt în site-ul dumneavoastră. Alte
  • Punerea în aplicare, atât pe partea de server și client-side de monitorizare și analiză (unul ar trebui să fie mai degrabă proactivă decât reactivă).
  • Utilizați servicii, cum ar fi UserVoice si Interfon (sau orice alte instrumente similare) să păstreze în mod constant în contact cu utilizatorii.
  • Urmați - Vincent Driessen's Git de ramificare model O mulțime de lucruri omise nu neapărat pentru că're nu răspunsuri utile, ci pentru că're, fie prea detaliate, în afara domeniului de aplicare, sau du-te un pic prea mult pentru cineva care cauta pentru a obține o imagine de ansamblu de lucruri ar trebui să știe. Vă rugăm să simțiți-vă liber pentru a edita acest fel ei bine, probabil că am pierdut unele lucruri sau făcut unele greșeli.
Comentarii (19)