Web-suunnittelun koodaus nopeudelle ja laadulle

Web-suunnittelijan kauneus luo yksityiskohtaisen, luovan ja alkuperäisen web-suunnittelun photoshop , ilman että (enimmäkseen) pohditaan, miten se koodataan .

Suunnitteluvaiheen aikana kyse on ulkoasusta , ja joko koodaus voidaan hoitaa myöhemmin tai ulkoistetaan kehittäjälle.

Joko, ei ajatella kehityksen käytettävyyttä tai toimivuutta, on erinomainen tapa, että suunnittelija ei tunne rajoitetusti suunnitteluprosessia.

Tämä on loistava tapa ajatella, ja se voi johtaa parhaisiin malleihin. Kuitenkin, kun se on koodattava, me suunnittelijoina on hankala paikka.

Tässä artikkelissa on muutamia yksinkertaisia vinkkejä, jotka auttavat suunnittelijoita oppimaan perus XHTML / CSS -konversion tehokkaasti nopeasti ladattavan verkkosivuston, joka on tarkka alkuperäiseen PSD: hen.

Meidän on joko leikattava ja koodattava malleja itse tai siirrettävä osa voitoksistamme PSD: n ulkoistamiseen XHTML / CSS -yritykselle tai kehittäjälle. Koska ensisijaisesti suunnittelijat, toinen vaihtoehto on yleensä paras valinta asiakkaalle, koska se tarjoaa parhaan tuloksen.

Joskus kuitenkin, kuten pienemmillä projekteilla tai muutoin, meidän on koodattava verkkosivusto itse . Riippumatta siitä, mistä syystä se ei saisi olla takaisku tai jotain, joka vie liian paljon aikaa.

Tehdä itsesi vs. ulkoistaminen

Tämä artikkeli kohdistuu paremmin web-suunnittelijoihin, vaikka toivottavasti kehittäjät voivat ottaa jotain irti siitäkin. Suunnittelijoihin kohdistuva keskittyminen on kuitenkin yleistä, jos monet web-suunnittelijat eivät halua koodata verkkosivustoja. Haluamme suunnitella . Poikkeuksia on muutamia, mutta suurin osa tästä on suhtautuminen siihen.

Monet suunnittelijat ovat löytäneet ulkoistamisen edut : maksa ulkopuolinen yritys leikkaamaan ja koodaamaan suunnittelusi, saamaan sen takaisin muutamassa päivässä ja säästämään itsellesi aikaa ja vaivaa tehdä se itse.

Jos sinulla ei ole kokemusta verkkosivujen koodaamisesta tehokkaasti, liian paljon aikaa siihen ei ehkä ole sen arvoinen, mitä sinulle maksetaan projektissa.

Esimerkiksi jos kokematon kooderi viettää useita tunteja yrittäessään selvittää, miten koodata muotoilua, jonka he ovat juuri luoneet, heidän vietetty aika voi helposti olla enemmän kuin mitä se maksaa yksinkertaisesti ulkoistaa työn.

Myös asiakkaan lataaminen ulkoistamistyöhön oman työpanoksen sijaan voi olla kustannustehokas niille ja itsellesi aikaa säästävä. (Oi, ja autat kehitysyhteisöä antamalla heille myös vähän liiketoimintaa!)

Siellä on aika jokaisen suunnittelijan uran aikana, missä ei ole vain käytännöllistä ulkoistaa työtä. Muutamia esimerkkejä ovat:

Et vain ole kovassa taloudellisessa tilanteessa.
Varsinkin freelancereille voimakas taloudellinen kuukausi tulee ja menee. Jos olet hieman alhaalla pankissa, se ei välttämättä ole paras vaihtoehto käyttää 150 dollaria tai niin ulkoistamisessa, kun voisit maksaa vähän ylimääräistä tehdä työtä itse. Vaikka asiakas maksaisi maksun ulkoistamiselle osana projektin maksua, se vain tekee rahoitustasi rikkomatta jopa verkkosivujen kehittämisosuuden osalta. Tehdä itse, se on paljon enemmän työtä, mutta se on myös paljon enemmän rahaa taskussa.
Se on pieni projekti.
Onko hanke alle 1000 dollaria? Onko yli 1/10 hankkeen talousarviosta menossa suoraan sinulle sen arvoinen? Jos koodaavan osan ulkoistaminen liian suuri prosenttiosuus hankkeen, on todennäköisesti enemmän käytännön vain tehdä se itse. Myös pienemmät projektit ovat todennäköisesti yksinkertaisempia, joten niiden ei välttämättä tarvitse kestää paljon aikaa.
Kun se tarvitsee erityistä asiakaspalvelua tai räätälöintiä.
Jotkut projektit tarvitsevat vain hieman enemmän asiakaspalvelua, sinulta, suunnittelija. Riippuen sekä asiakkaasta että projektista, on ehkä parasta jakaa viipalointi- ja koodausosa paremmin hallittaviksi kappaleiksi, ja jotkin osat voidaan muuttaa asiakkaan mielipiteen aikana koko prosessin ajan. Kaikissa tilanteissa, joissa suunnittelija joutuisi muuttamaan koodia vastaamaan asiakkaan tarpeita sen jälkeen, kun alkuperäinen verkkosivusto on koodattu, on todennäköisesti paras tehdä koko asia itse.

Joten sinun on tehtävä jokaisen projektin, jokaisen asiakkaan ja kunkin olosuhteiden perusteella päättää, ulkoistaako koodausosa vai ei.

Edistyksellisen ulkoistamisen eduksi kokeneet kooderit voivat luoda samanlaisen koodattua versiota PSD-muotoiluasi säilyttäen samalla latausnopeuden ja käytettävyyden.

Jos olet tilanteessa, jossa olet / haluaa leikata ja koodata sivuston itse, tässä on muutamia yleisiä vinkkejä 1) säästää aikaa, joten sinun ei tarvitse työskennellä $ 2 / hr ja 2) tarjota parempia tuloksia asiakkaasi kokeneena kehittäjänä samalla säilyttäen ulkoistumiskustannukset.

1. Leikkaa tehokkaasti

Photoshop ja Fireworks tulevat sisäänrakennetulla viipalointityökalulla, jonka avulla suunnittelija voi koodata verkkosivuston suoraan HTML-muotoon. Kuitenkin jopa näiden ohjelmistopäivien nykyaikaiset versiot luovat taulukkopohjaisen merkinnän. Tämä ei ole kovin hyödyllinen nykyaikaiselle web-suunnittelijaa varten.

Siksi kehityksen ja verkkosivujen koodaaminen on erillinen käytäntö, jolla on oma lahjakkuus ja kokemus. Kaikki web-mallit tarvitsevat jonkin käsikoodauksen ja sen takana olevan ajattelutavan. Ohjelmisto ei voi tehdä kaikkea sinulle.

Still, Photoshopissa ja Fireworksissa oleva siivutustyökalu voidaan käyttää hyväksi web-suunnittelun kehitystyöhön . Tarkoitus on tietää, miten siivu työkalu toimii tehokkaasti.

Sen sijaan, että päästyisimme koko viipalointi- ja koodausohjelmaan täällä, suuri tutorial yli nettuts + voi auttaa monia ulos: " Slice ja Dice että PSD . "Se menee perustavanlaatuisiin ajatusprosesseihin sekä tekniseen tapaan, jonka avulla verkkosuunnittelun leikkaaminen nykyaikaisella ja oikealla tavalla - samalla kun käytät perinteistä leipätyökalua.

Se on kronologisessa järjestyksessä, jossa on eri kuuntelumateriaaleja jokaisen kehitysprosessin vaiheessa, sekä hyödyllisiä linkkejä samanlaisiin ja muihin kuuntelupeleihin.

Ensimmäinen askel on tarkastella näitä oppitunteja ja ottaa tärkeimmät kohdat niistä: tietää, mitä kuvia leikataan, miten optimoida nämä kuvat laadun ja nopeuden tasapainoon ja mitä PSD: n elementtejä pitäisi olla tavallisia XHTML- ja CSS .

Vain katsomalla kokeneemman kehittäjän prosessia ja selitystä voi auttaa suunnittelija, jolla on vain vähän viipalointia ja koodausta, todistus prosessista, joka on tehokkaampi.

2. Yksinkertaista CSS: ää

Joskus ensimmäinen tapa, jolla luodaan CSS: n käyttäminen tietyn vaikutuksen saavuttamiseksi, ei ole paras tapa tehdä se. Jos huomaat luomaan liian monia mukautettuja luokkia tai monimutkaisia taktiikoita, jotta saavutatte yhden vaikutuksen, ajattele vaihtoehtoista tapaa tehdä se tehokkaammin.

Useimmiten tämä on kokemusta. Mitä enemmän koodit verkkosivustoa ja löytää uusia tekniikoita, sitä helpompi käyttää CSS tehokkaasti.

Aloittelijan tapoja yksinkertaistaa CSS: ää tarkista Woorkin artikkeli aiheesta " Top-Down-lähestymistapa CSS-koodin yksinkertaistamiseksi ”.

Artikkeli jakaa vinkkejä CSS: n käyttämiseen, jotta luodaan perusrunko ja erityinen muotoilu, kuinka uudelleen asetetaan HTML-elementit tehokkaasti ja kun on aiheellista luoda omia luokkia tai tunnuksia.

3. Käytä CSS-pikakomennusta ja pienennä HTML-merkintää

Mitä pienempi tiedostokoko on, sitä nopeammin se on ladattava, ja se on niin yksinkertaista. CSS: n lyhentäminen ja XHTML-merkinnän pienentäminen uudelleenkäyttämällä elementtejä on hieno tapa tehdä tämä.

Koko sivuston koodauksen on oltava merkkijono ja muotoilu, joka merkitsee CSS: n avulla. Merkitystä tulisi käyttää rakenteeseen ja CSS: ää tulisi käyttää muotoilussa, joten erinomainen tapa löytää tasapaino on pitää tämä mielessä.

Tämän lisäksi käytäntö edellyttää vain ymmärrystä CSS-lyhenteiden teknisistä ominaisuuksista sekä kokemuksesta.

Tutustu muutamiin alla oleviin opetusohjelmiin CSS-lyhennelmän hallintaan:

Myös tarpeettoman tyhjämerkin poistaminen voi auttaa merkintä- ja CSS-tiedostojen latausnopeutta. Aivan kuten minimoitu JavaScript-tiedosto (kuten jquery.min.js), pienemmät tiedostot tekevät latausajasta tehokkaamman, jolloin prosessori voi lukea niitä nopeammin.

Kuten CSS: n ja merkintöjen suhteen, ei kuitenkaan ole käytännöllistä poistaa kaikkia välilyöntejä muokkaus- ja hallintatarkoituksiin.

Sen sijaan pääse käytäntöön sisennystä ja käytä riviä vain silloin kun se on tarpeen. Poista myös kommentit merkinnän ja tyylisivun sisällä, jotka eivät ole välttämättömiä sivuston ylläpitoon.

4. Smush.it

Käytä työkalua kuten Yahoo Smush.it jotta kaikki kuvat saataisiin entisestään. Tällainen työkalu käyttää pakkausalgoritmia, joka pienentää tiedostokokoa merkittävästi ilman uhrautta kuvanlaadulta. Keskimäärin noin 40%: n pienennys kaikista kuvista voi aiheuttaa suuren eron verkkosivujen latausaikana.

Voit ladata kaikki sivuston kuvat vain, kun ne on optimoitu alun perin Photoshopissa, Smush.it-sovellukseen. Se antaa sinulle uuden luettelon ladattavista kuvista, selittää kuinka paljon tilaa on tallennettu ja miten.

5. Kiinnitä huomiota CSS- ja merkintäjärjestykseen

Kun rakenneelementit ovat ennen sisältöelementtejä tai elementtikoodityyli ennen kappaleen tyyliä, tyylisarja ei lataudu nopeammin. Kuitenkin tyylitaulukko latautuu tyylitiedostossa esitettyyn järjestykseen , joten sitä voidaan käyttää tekemään verkkosivusto "näkyviin" ikään kuin latautuu nopeammin.

Jos esimerkiksi tyylejä, kaikkia sisältöjä, kuvia ja tekstin muotoilu määritettiin ensin, nämä elementit ladattaisiin ennen kuin mitään taustoja, rakenteellisia elementtejä tai kuvioita kuvataan.

Tämän vuoksi näyttää siltä, että web-suunnittelu leviää hieman hitaammin kuin jos näimme tausta ja rakenne ensin.

Rakenteella ja pääkuvakuvilla ensin katsojalla on jotain keskittyä niille sekunneille, joissa sisältö latautuu edelleen.

6. Tiedä, milloin haluat käyttää asiakastietokoneen tai palvelimen sivun komentosarjoja

Perushankkeita varten web-suunnittelijat eivät todennäköisesti pääse liikaa ohjelmointiin. Joitakin komentosarjoja voi kuitenkin vaatia yksinkertaisen yhteydenottolomakkeen tai erityisten navigointivaikutusten vuoksi.

Riippumatta siitä, mihin se on mahdollista, voidaan käyttää kahta kirjoituskieltä: asiakaspuolta (jossa komentosarjakieli toimii käyttäjän selaimessa) tai palvelinpuolella (komentosarjakieli toimii palvelimella).

JavaScript ja kaikki sen alla oleva kirjasto ovat yleisimpiä asiakaspuolen komentojonoja. Koska se toimii paikallisesti käyttäjän selaimessa, sen ei tarvitse käydä aina palvelimelle tekemään sen käsittelyä, mikä tekee siitä nopeamman. Palvelinpuolen komentotiedosto on hieman hitaampi, mutta se käy hienosti pieninä annoksina ja kun sitä käytetään asianmukaisesti.

Käytä palvelinpuolen komentosarjoja mille tahansa, mikä edellyttää tietokantaa tai mitä tahansa verkkosivuston tarkoituksen kannalta tarpeellista. Koska käyttäjä voi poistaa JavaScriptin käytöstä, mutta ei voi poistaa palvelinpuolen kieltä, palvelinpuolen komentosarjat ovat turvallisia käyttää mitä tahansa sivuston tarpeita varten.

Esimerkiksi yhteydenottolomake, vaikkakin se on vaativa ja ei välttämättä edellytä tietokantaa, käytetään parhaiten palvelinpuolen kielellä, koska se on edelleen käytettävissä jollekin, jolla on JavaScript poistettu käytöstä.

Kaiken kaikkiaan useimmat verkkosivustot, jotka vaativat lisäohjelmointia, saisivat tasapainon molemmista. Jotkin pienemmät sivustot saattavat tarvita vain yhtä tai toista, mutta on tärkeää, että niitä ei käytetä vain sen vuoksi. Tiedä milloin ja miksi käyttää kukin.

7. Viimeisenä mutta ei vähäisenä, vahvista

Tämä on ilmeistä useimmille meistä, mutta kuten minkä tahansa tämän artikkelin kanssa, on sanottava: koko koodausprosessin aikana ja kun kaikki on sanottu ja tehty, vahvista CSS- ja XHTML-koodit.

Kaikki tiedämme validoinnin eduista, koska se voi tehdä eri selaimista samanlaisia, tehdä verkkosivuja ladattavaksi nopeammin ja on yleinen virheentarkistus semanttiselle koodille.

Tämän prosessin kautta on kuitenkin vielä hyötyä tutkia uusia tekniikoita CSS-koodin ja merkintöjen käsittelyssä.

Jos olet toteuttanut tiettyä vaikutusta web-suunnitteluun, joka ei vahvista eikä anna varoitusta, W3: llä on syy siihen. Nämä ovat erinomaisia hetkiä tutkia muita vaihtoehtoja saman vaikutuksen aikaansaamiseksi, mutta paremmalla, tarkemmin vahvistetulla tavalla.

Käärimistä

Jotkut suunnittelijat pelkäävät, että heidän on uhrauduttava laadukkaan mallin kuvissa, kun koodataan XHTML / CSS: ään, jotta saadaan nopeasti ladattava verkkosivusto - mutta se ei ole totta.

On monia tapoja koodata älykkäästi, mikä voi luoda helppokäyttöisen, nopeasti ladattavan verkkosivuston, joka vastaa suunnittelijan laatua. Näiden vinkkien käyttäminen voi auttaa, mutta on paljon enemmän opittavaa.

Muista, jos olet kokematon slicer ja kooderi, se voi olla hidas alussa, varsinkin kun vielä oppimisprosessissa. Saatat tuntea XHTML ja CSS, mutta se on täysin erilainen taito oppia tekemään sen tehokkaasti. Aivan kuten meidän oli oppimisen suunnittelussa, meidän on opittava koodaamaan kauniisti .

Kirjoitettu yksinomaan WDD: lle Kayla Knight .

Nämä ovat yleisiä vinkkejä, joten muista jakaa kaikki lisävihjeet muotoilun viilentämiseen ja koodaamiseen erityisesti suunnittelijan näkökulmasta.

käytettävyys verkkokehitys koodaus