Share
Astăzi, ne vom arunca cu capul în site-ul Construiți Windows și vom examina filozofiile, instrumentele și strategiile practice ale codului utilizate de această pagină de destinație a conferinței, extrem de traficată. Vom intra în nisip, dar vom acoperi și câteva lucruri dintr-o perspectivă de mare.
Site-ul Build Windows a fost o colaborare între echipa Paravel de trei persoane și Nishant Kothary din Windows. (Uitați-vă la Trent Walton de la postul lui Paravel, postul oficial al lui Paravel și postul lui Nishant despre proiect.)
Retragerea pentru front-end a proiectului a fost de aproximativ 10 zile.
După cum sugerează mesajele din partea echipei, metodologia lor principală a fost să preia designul în browser cât mai rapid posibil. Pentru Paravel, acest lucru este absolut esențial, deoarece o mare parte din munca sa se învârte în jurul designului receptiv bazat pe interogări media.
Procesul de iterație a fost incremental și rapid; două persoane s-au axat pe aspect și conținut, în timp ce celelalte două s-au axat pe codul frontal.
Site-ul Construiți Windows se bazează pe câteva instrumente și biblioteci importante.
Multe dintre marcajul și stilul arată foarte asemănător cu recomandările HTML5 Boilerplate.
BuildWindows.com folosește extensiv întrebările media, cu 8 puncte de pauză:
Cele mai mari schimbări au loc între 680px și 1280px. Deasupra celor 1280 de pixeli, modificările principale care apar, sunt schimbările de secțiune și marginea secțiunilor și, cel mai important, ajustările dimensiunii fontului (până la font-size: 200%;). "Placile metroului" reprezintă o cantitate mare de CSS; în special, aceste plăci se ajustează de la 4 la 8 coloane în toate interogările media.
Sunt prezenți în total 15 reguli ".lt-ie9", dintre care 7 sunt pentru ".lt-ie8". În general, acestea sunt repartiții de margine, umplutură, lățime și fonturi, precum și o regulă pentru culoarea de fundal ".button".
Există trei animații principale care apar, toate realizate cu tranziții și animații CSS declanșate de vizionarea evenimentului de defilare și adăugarea de clase în secțiunile "în vedere". De exemplu:
Accentsconagua
funcția isScrolledIntoView (elem) var docViewTop = $ (fereastră) .scrollTop (); var docViewBottom = docViewTop + $ (fereastră) .height (); var elemTop = $ (elem) .offset () top * 1.10; // Adăugați clasa dacă este afișat 10% în fereastra de vizualizare. retur (docViewBottom> = elemTop); functie addInView () if (isScrolledIntoView ('metro-tiles')) if (! $ (' ) .addClass ("în vedere") animate ('opacity': 1); // ... $ (fereastră) .scroll (funcție () addInView ();); Acest lucru, ușor modificat din fișierul script.js, arată funcția principală care urmărește defilarea și adaugă clase în consecință. Apoi putem vedea, de exemplu, animația de jos "numărătoarea inversă" definită în css.
.numărătoarea inversă marja: 0 auto 0; poziția: absolută; lățime: 100%; stânga: 0; dreapta: 0; marginea superioară: 20 de; tranziție: marja de 0,8 secunde; .no-js .countdown margin-top: 1em; .countdown.in-vedere margin-top: 1em;
O notă importantă aici este clasa ".no-js", care se aplică clasei corpului în marcare. Modernizr elimină această clasă atunci când rulează, dar dacă Modernizr nu rulează niciodată, știm că JavaScript-ul browser-ului este dezactivat și, prin urmare, nu putem declanșa animația pentru a afișa widget-ul inversat. În schimb, îl afișăm implicit fără animație.
Animale similare sunt definite pentru plăcile și siglele și faderul de imagine Responsiveslides este pornit atunci când această secțiune este derulată în vedere. "Placile metroului" au de asemenea inclinări definite pentru pseudo-selectorul "activ", care utilizează o tranziție pe transforma proprietate. Ex:
/ * Tilt stânga * / .metro-tiles .tile: nth-of-type (4n - 4) a: activ img transform: perspectivă (1000px) rotateY (-20deg);
Luat direct de la http://www.buildwindows.com/css/style.css.
Echipa de construire a acestui site a decis să adauge imediat clasa "in-view" la toate secțiunile corespunzătoare din DOM, pregătite pe orice dispozitiv iOS.
$ (document) .ready (functie () if (navigator.userAgent.match (/ (iPhone | iPod | iPad) / i)) $ ("metro-tiles" .css ('opacity': 1); $ ('. proprietăți') addClass ('in-view'). "in-view") css ('opacity': 1); $ ("rslides"). Aceasta este cel mai probabil o decizie luată pentru a crește performanța și pentru a evita problemele scrollTop în Mobile Safari. În general, browserele mobile nu emit un eveniment de defilare până când parcurgerea nu a ajuns la oprire completă. Consultați această scriere despre această problemă și câteva soluții posibile: probleme de eveniment onscroll pe browserele mobile.
Majoritatea JavaScript-urilor din script.js sunt dedicate adăugării acestor clase și actualizării cronometrului în partea de jos. Numărătoarea inversă este setată să folosească a timpul serverului și le spune utilizatorului, până la minute, cât timp rămâne până la începerea evenimentului. Timpul serverului este mult mai fiabil, deoarece ceasul computerului utilizatorului (care este JavaScript) Data() funcții implicite) poate fi setată la orice.
Alte funcții sunt o remediere a defecțiunilor pentru iOS și antialiasing sub-pixeli pe Mac Webkit.
Site-ul Construiți Windows a primit o mulțime de recenzii pozitive din partea comunității. Ce putem lua de la revizuirea acestui site și de a vedea cum a fost făcut de la început?
Toate pariurile sunt dezactivate dacă aveți experiență. De fapt, concentrarea conștientă și "luarea timpului" va afecta de fapt performanța dvs. dacă sunteți o persoană cu multă experiență în domeniu. - Nishant Kothary
După cum arată postul lui Nishant despre proiect, încrederea în primul dvs. instinct și construirea rapidă și revizuirea treptată a unui proiect de proiectare pot fi foarte satisfăcătoare pentru dezvoltatorii experimentați și designeri.
Site-ul Construiți Windows este foarte simplu, folosind o singură pagină de destinație care se bazează pe câteva secțiuni mari pentru a comunica o cantitate limitată de informații și pentru a iniția o singură chemare la acțiune. Acest tip de simplitate permite o voce și o marcă solidă și concentrată, coloana vertebrală a oricărui design bun.
... proiectat, prototipat și construit majoritatea site-ului în browser, astfel încât să putem asigura că ierarhia și aspectul site-ului au fost ideale la orice dimensiune a ecranului. - Paravel
Site-ul se degradează grațios, astfel încât browserele care sunt vechi sau care nu au JavaScript, pot prelua informațiile necesare. De asemenea, este îmbunătățită treptat (animațiile CSS sunt folosite atunci când este posibil, de exemplu).
Site-ul utilizează, de asemenea, tehnici de proiectare receptive pentru a permite accesibilitatea pe o serie de dispozitive fără a limita experiența "prime" la un singur dispozitiv.
În timp ce site-ul este angajat niste animație și comportament, conținutul și tipografia sunt regii acestui design. Imaginile și alte elemente de design grafic (cum ar fi orizontul din Seattle ilustrat de Reagan Ray) sprijină pur și simplu strategiile de tipografie și conținut.
Și, deși ați putea crede la început logo-ul construirii, textul se face fluid cu propriile fittext.js ale lui Paravel, este de fapt doar un transparent transparent .png; 1.700 de lățimi, dar cântărind la o greutate de 13Kb.
Pentru că nimeni nu e perfect ...
În timp ce site-ul utilizează multe "bune practici", există câteva aspecte care ar fi putut fi optimizate în continuare, cum ar fi concatenarea și minificarea fișierelor JavaScript și CSS, utilizarea spritelor acolo unde este posibil și altele.
Cu toate acestea, site-ul nu suferă în mod semnificativ de aceste probleme particulare, iar echipa a făcut cel mai probabil opțiunile pe care le-a făcut pentru a permite o bază de cod mai bine întreținută. Dincolo de aceasta, echipa ar fi anticipat că alți dezvoltatori și designeri ar analiza codul sursă și, astfel, au lăsat bucăți din ea.
Aceasta este în principal o critică a utilizării agent utilizator. Ar trebui să fie cunoscut tuturor cititorilor acestui articol că navigator.userAgent nu este o metodă sigură de a detecta ce browser utilizează cineva.
Cu toate acestea, acest site nu utilizează și abuză browserul userAgent sniffing; îl folosesc pentru două scopuri principale. Primul este să setați o regulă CSS anti-aliasing CSS pe Mac Webkit. Al doilea este de a adăuga imediat clasa "in-view" pe dispozitivele iOS. Ambele cazuri de utilizare specifice sunt legitime, deoarece nu compromite conținutul în mod considerabil.
Unele dintre JavaScript bazate pe jQuery nu sunt la fel de optimizate:
dacă (navigator.userAgent.match (/ (iPhone | iPod | iPad) / i)) $ ("metro-tiles"). ; $ ('' proprietăți ') addClass (' in-view ') css (' opacity ': 1); $ cc ('opacity': 1); $ (". rslides") addClass ("in-view"). responsiveSlides (timeout: 3000); Ar putea fi:
dacă navigator.userAgent.match (/ (iPhone | iPod | iPad) / i)) $ (metro-tiles, .properties, .countdown ') addClass (' opacitate ': 1); $ (". rslides") addClass ("in-view"). responsiveSlides (timeout: 3000); Si addInView () funcția ar putea fi, de asemenea, optimizată în mai multe moduri diferite. Acestea fiind spuse, acestea sunt niște preocupări care, cu siguranță, flirtează cu margini de supra-inginerie; s-ar fi putut lua decizia de a ignora aceste optimizări din mai multe motive:
Paravel și Nishant de la Windows au acordat o atenție deosebită detaliilor legate de acest proiect, în ciuda reducerii cronologice scurte pentru proiect. Abordarea lor rapidă de dezvoltare și încrederea în propriile instincte au fost plătite în acest design modern, departe de designul vechi al Windows.
Care sunt câteva idei pe care le-ați câștigat prin căutarea prin acest site? Cum vă simțiți în legătură cu optimizarea? Ce zici de o gamă largă de interferențe de răspuns? Spuneți-ne mai jos!
