Miksi kaikki sivustot on rakennettu rakenteeltaan, tyyliltäan ja käyttäytymisestään
Yhteinen analogia, jota käytetään kuvaamaan etusivun verkkosivujen kehitystä, on se, että se on kuin 3-jalkainen jakkara. Nämä 3 jalat, jotka tunnetaan myös 3 kerroksena web-kehitystä, ovat rakenne, tyyli ja käyttäytyminen.
Web-kehityksen kolme tasoa
- Rakenne tai sisältökerros
- Sivuston rakenne tai sisältökerros on kyseisen sivun taustalla oleva HTML-koodi. Kuten talon runko luo vahvan perustan, jolle muuhun taloon on rakennettu, niin myös HTML-pohjainen pohja luo alustan, jolla verkkosivusto voidaan luoda. HTML-rakenne voi koostua tekstistä tai kuvista, ja se sisältää hyperlinkit, joita kävijät käyttävät navigoimaan kyseisellä verkkosivustolla.
- Tyyli tai esityskerros
- Tyyli- tai esitystapa määrittelee, miten jäsennelty HTML-asiakirja näyttää sivuston kävijöille. Tämä kerros määrittelee CSS (Cascading Style Sheets). Nämä tiedostot sisältävät tyylit, jotka osoittavat asiakirjan näyttämisen verkkoselaimessa. Nykypäivän Web-tyyliin voi sisällyttää myös Media-kyselyjä, jotka voivat muuttaa sivuston näyttöä eri ruudun kokoista ja laitteista riippuen.
- käytös
- Käyttäytymiskerros on Web-sivun kerros, joka voi vastata erilaisiin käyttäjätoimiin tai tehdä muutoksia sivuihin, jotka perustuvat joukkoon ehtoja. Useimmille verkkosivuille käyttäytymisen taso olisi JavaScript- vuorovaikutus sivulla.
Miksi sinun tulisi erottaa kerrokset?
Kun luot verkkosivua, on toivottavaa pitää kerrokset mahdollisimman erillään. Rakenne on luotava HTML-muotoiluun, visuaalisiin tyyleihin CSS: ään ja käyttäytyy missä tahansa sivustossa käytetyissä skripteissä.
Osa kerrosten erottamisesta on seuraavia:
- Jaetut resurssit
- Kun kirjoitat ulkoisen CSS-tiedoston tai JavaScript-tiedoston, voit käyttää sitä tiedoston jollain verkkosivustosi sivulla. 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ä suuremmalle sivustolle voi olla hankala yritys.
- Nopeat lataukset
- Kun asiakirja on ensin ladannut käsikirjoitustyylin tai tyylitiedoston, sen verkkoselaimesi tallentaa sen välimuistiin. Koska nämä jaetut resurssit sisältyvät nyt välimuistiin, muut sivut, joita pyydetään selaimessa, latautuvat nopeammin, mikä parantaa sivunopeutta ja suorituskykyä.
- Monen hengen joukkueet
- Jos sinulla on useampi kuin yksi henkilö, joka työskentelee verkkosivustolla kerralla, voit käyttää tiedostojen "check in" ja "check out" järjestelmiä varmistaaksesi, että kaikki tiimissä työskentelevät näiden tiedostojen uusimmista versioista. Tämä on paljon vaikeampaa tehdä, jos tyylejä ja käyttäytymismalleja yhdistetään rakenteellisiin asiakirjoihin.
- SEO
- Sivusto, jolla on selkeä erottaminen tyylistä ja rakenteesta, todennäköisesti toimii paremmin hakukoneille, koska kyseiset sivustot voivat tehokkaammin indeksoida kyseistä sisältöä ja ymmärtää sivua näkemättä visuaalista tyyliä tai käyttäytymistietoa.
- saavutettavuus
- Ulkoiset tyyliarkit ja komentotiedostot ovat helpommin saatavilla ihmisille ja selaimille. Koska tyyli ja rakenne eroavat toisistaan, ohjelmistot, kuten näytönlukijat, voivat käsitellä sisällön rakennekerroksesta entistä helpoammin, eikä tyytymään sellaisiin tyyleihin, joita he eivät voi käyttää missään tapauksessa.
- Taaksepäin yhteensopivuus
- Kun sinulla on kehityskerroille suunniteltu sivusto, se on taaksepäin yhteensopiva, koska selaimet tai laitteet, jotka eivät voi käyttää tiettyjä CSS-tyyppejä tai joilla voi olla JavaScript poistettu, voivat edelleen tarkastella HTML-koodia. Verkkosivustasi voidaan sitten asteittain parantaa ominaisuuksilla varustetuille selaimille.
HTML - rakenteen taso
Rakenteellinen kerros on paikka, jossa tallennat kaiken sisällön, jota asiakkaasi haluavat lukea tai katsoa. Tämä koodataan standardien mukainen HTML5 ja se voi sisältää tekstiä ja kuvia sekä multimediaa (video, audio jne.). On tärkeää varmistaa, että sivustosi sisällön kaikki osat näkyvät rakennekerroksessa. Tämä sallii asiakkaille, joilla on JavaScript poistettu käytöstä tai jotka eivät pysty katselemaan CSS: ää, pääsevät edelleen koko verkkosivustoon, ellei kaikki kyseisen sivuston toiminnot.
CSS - Tyylitaso
Luo kaikki visuaaliset tyylit Web-sivustosi ulkoiseen tyyliarkiin. Voit käyttää useita tyylisivuja, mutta muista, että jokainen erillinen CSS-tiedosto vaatii HTTP-pyynnön hakea, mikä vaikuttaa sivuston tehokkuuteen.
JavaScript - käyttäytymisen taso
JavaScript on käyttäytymiskerroksen yleisimmin käytetty kieli, mutta kuten aiemmin mainitsin, CGI ja PHP voivat myös luoda verkkosivun käyttäytymistä. Kun sanotaan, kun useimmat kehittäjät viittaavat käyttäytymiskerroksiin, ne tarkoittavat sitä kerrosta, joka aktivoidaan suoraan selaimessa - joten JavaScript on lähes aina valintakieli. Käytät tätä kerrosta vuorovaikutuksessa suoraan DOM- tai Document Object -mallin kanssa. Kelvollisen HTML-koodin kirjoittaminen sisältökerrokseen on myös tärkeä DOM-vuorovaikutusten kannalta käyttäytymiskerroksessa.
Kun rakennat käyttösoluun, käytä ulkoisia komentotiedostoja aivan kuten CSS: n kanssa. Saat kaikki samanlaiset edut ulkoisen tyyliarkin käytöstä.