Ne, jotka työskentelevät web-suunnitteluteollisuudessa, korostavat etupään verkkosivujen kehittämistä kolmipyöriksi jakautuneiksi. Nämä kolme jalkaa - kolme kerrosta web-kehitystä - käsittävät rakenteen, tyylin ja käyttäytymisen.
Miksi sinun tulisi erottaa kerrokset?
Kun luot verkkosivua, sen rakenne on siirrettävä HTML-muotoon, visuaalisiin tyyleihin CSS: ään ja käyttäytymään komentosarjoihin. Osa kerrosten erottamisesta on seuraavia:
- Jaetut resurssit: Kun kirjoitat ulkoisen CSS- tai JavaScript-tiedoston, sivustossa oleva sivu voi käyttää kyseistä tiedostoa. Jos haluat tehdä muutoksen kyseiseen tiedostoon, ehkä päivittää joitain typografisia tyylejä verkkosivustolla, kaikki sivut, jotka käyttävät kyseistä tyylitaulukkoa, saavat muutoksen. Sivuston kaikkia sivuja ei tarvitse muokata erikseen, mikä voi olla hankala yritys suurelle verkkosivustolle.
- Nopeat lataukset: Kun asiakirja on ensin ladannut käsikirjoitustyylin tai tyylitaulukon, se tallentaa sen verkkoselaimen välimuistissa. Koska nämä jaetut resurssit sisältyvät selaimen välimuistiin, muut sivut, joita pyydetään selaimessa, latautuvat nopeammin, mikä parantaa sivun nopeutta ja suorituskykyä.
- Usean hengen joukkueet: Jos sinulla on useampi henkilö, joka työskentelee verkkosivustolla kerralla, voit käyttää järjestelmiä, joiden avulla tiedostoja voidaan tarkistaa sisään ja ulos, jotta kaikki voivat työskennellä uusimpien versioiden kanssa. Tämä on paljon vaikeampaa tehdä, jos tyylejä ja käyttäytymismalleja yhdistetään rakenteellisiin asiakirjoihin.
- SEO: Sivusto, jolla on selvä tyyli- ja rakennerakenne, todennäköisesti toimii paremmin hakukoneille, koska se pystyy indeksoimaan sisältöä tehokkaammin ja ymmärtämään sivua näkemättä visuaaliseen tyyliin ja käyttäytymiseen liittyviä tietoja.
- saavutettavuus: Ulkoiset tyyliarkit ja komentotiedostot ovat helpommin saatavilla ihmisille ja selaimille. Ohjelmistot, kuten näytönlukijat, voivat käsitellä sisällön rakennekerroksesta entistä helpommin käsittelemättä tyylejä, joita he eivät voi käyttää missään tapauksessa.
- Taaksepäin yhteensopivuus: Sivulla, joka on suunniteltu erillisillä kehityskerroksilla, on todennäköisempää taaksepäin yhteensopiva, koska selaimet ja laitteet, jotka eivät pysty käyttämään tiettyjä CSS-tyyppejä tai joilla on JavaScript poistettu käytöstä, voivat edelleen tarkastella HTML-koodia. Tämän jälkeen voit parantaa verkkosivustosi asteittain ominaisuuksia selaimille, jotka tukevat niitä.
HTML: Rakenteen taso
Sivuston rakenne tai sisältökerros on kyseisen sivun taustalla oleva HTML-koodi. Aivan kuten talon kehys luo vahvan perustan, jolle muuhun taloon on rakennettu, vankka HTML-pohja luo alustan, jolla verkkosivusto voidaan luoda.
Rakenteellinen kerros on paikka, jossa tallennat kaiken sisällön, jota asiakkaasi haluavat lukea tai katsoa. HTML-rakenne voi koostua tekstistä ja kuvista, ja se sisältää hyperlinkit, joita kävijät käyttävät navigoimaan verkkosivustossa. Tämä on koodattu standardin mukainen HTML5 ja se voi sisältää tekstiä, kuvia ja multimediaa (video, audio jne.).
Sivuston sisällön jokainen osa on edustettava rakennekerroksessa. Tämä sallii asiakkaille, joilla on JavaScript pois päältä tai jotka eivät näe CSS-käyttöoikeutta koko sivustolle, ellei kaikki sen toiminnot.
CSS: Tyylitaso
Tämä kerros määrittelee, miten jäsennelty HTML-asiakirja näyttää sivuston kävijöille ja määritellään CSS (Cascading Style Sheets). Nämä tiedostot sisältävät tyylikkäitä ohjeita asiakirjan näyttämiseen verkkoselaimessa. Tyyli kerros sisältää yleensä mediakyselyt, jotka muuttavat sivuston näyttöä näytön koon ja laitteen mukaan.
Verkon kaikkien visuaalisten tyylejen pitäisi sijaita ulkoisessa tyylisivustossa. Voit käyttää useita tyylisivuja, mutta muista, että jokainen CSS-tiedosto vaatii HTTP-pyynnön hakea sitä vaikuttaen sivuston tehokkuuteen.
JavaScript: käyttäytymisen taso
Käyttäytymiskerros tekee verkkosivustosta vuorovaikutteisen, jonka avulla sivu voi vastata käyttäjän tekemiin toimenpiteisiin tai muuttaa asetettujen ehtojen perusteella. JavaScript on käyttäytymiskerroksen yleisimmin käytetty kieli, mutta CGI: tä ja PHP: tä käytetään hyvin usein.
Kun kehittäjät viittaavat toimintakerrokseen, useimmat niistä tarkoittavat kerrosta, joka aktivoidaan suoraan selaimessa. Käytät tätä kerrosta vuorovaikutuksessa suoraan DOM: n (Document Object Model) kanssa. Kelvollisen HTML-koodin kirjoittaminen sisältökerrokseen on tärkeä DOM-vuorovaikutusten kannalta käyttäytymiskerroksessa. Kun rakennat käyttösoluun, sinun on käytettävä ulkoisia komentotiedostoja, kuten CSS: n kanssa, nopeuden ja suorituskyvyn optimoimiseksi.
