Cilvēki, kas strādā Austrālijā web dizains industrija salīdzina priekšējās vietnes izveidi ar trīs kāju izkārnījumiem. Šīs trīs kājas - trīs tīmekļa izstrādes kārtas - ietver vietnes struktūru, stilu un uzvedību.
Kāpēc jums vajadzētu atdalīt slāņus?
Veidojot tīmekļa lapu, tās struktūra ir jāpārvieto uz jūsu HTML, vizuālos stilus CSSun uzvedība uz skriptiem. Daži slāņu atdalīšanas ieguvumi ir:
- Kopīgi resursi: Rakstot ārēju CSS vai JavaScript failu, jebkuru vietnes lapu var izmantot šo failu. Ja jums ir jāveic izmaiņas šajā failā, iespējams, atjaunināt dažus tipogrāfiskos stilus vietnē izmaiņas tiks veiktas katrā lappusē, kurā tiek izmantota šī stila lapa. Nav vajadzības katru vietnes lapu rediģēt atsevišķi, kas varētu būt šausmīgs darbs lielai vietnei.
- Ātrāka lejupielāde: Pēc tam, kad klients pirmo reizi ir lejupielādējis skriptu vai stila lapu, tīmekļa pārlūkprogramma to saglabā kešatmiņā. Tāpēc, ka šie koplietotie resursi tagad ir ietverti pārlūka kešatmiņa, citas pārlūkprogrammā pieprasītās lapas tiek ielādētas ātrāk, kas uzlabo kopējo lapas ātrumu un veiktspēju.
- Daudzu cilvēku komandas: Ja vietnē vienlaikus strādā vairāk nekā viena persona, izmantojiet versiju kontroles sistēmas, kas ļauj reģistrēt un izrakstīt failus, lai nodrošinātu, ka visi strādā ar jaunākās versijas. Šo procesu ir daudz grūtāk izdarīt, ja stili un uzvedība ir savstarpēji saistīti ar struktūras dokumentiem.
- SEO: Vietne, kurā ir skaidri nošķirts stils un struktūra, visticamāk, darbojas labāk meklētājprogrammām, jo tās var efektīvāk pārmeklēt šo saturu un izprast lapu, neiedziļinoties vizuālajā stilā un uzvedībā informāciju.
- Pieejamība: Ārējās stila lapas un skriptu faili ir pieejamāki cilvēkiem un pārlūkiem. Programmatūra, piemēram, ekrāna lasītāji var vieglāk apstrādāt struktūras slāņa saturu, nenodarbojoties ar stiliem, kurus viņi tik un tā nevar izmantot.
- Atpakaļ savietojamība: Vietne, kas ir veidota ar atsevišķiem izstrādes slāņiem, visticamāk, būs savietojama ar atpakaļejošo, jo pārlūkprogrammās un ierīcēs, kurās nevar izmantot noteiktus CSS stilus vai kurās ir atspējots JavaScript, joprojām var skatīt HTML. Pēc tam jūs varat pakāpeniski uzlabot savu vietni, izmantojot pārlūkprogrammu funkcijas, kas tos atbalsta.
HTML: Struktūras slānis
Tīmekļa lapas struktūra vai satura slānis ir pamatā HTML šīs lapas kods. Tāpat kā mājas rāmis rada spēcīgu pamatu, uz kura tiek būvēta pārējā māja, stabils HTML pamats rada platformu, uz kuras var izveidot vietni.
Struktūras slānis ir tas, kur jūs glabājat visu saturu, kuru klienti vēlas lasīt vai apskatīt. HTML struktūra var sastāvēt no teksta un attēliem, un tajā ietilpst hipersaites ko apmeklētāji izmantos, lai pārvietotos pa vietni. Šī informācija ir kodēta atbilstoši standartiem HTML5 un var ietvert tekstu, attēlus un multivides (video, audio utt.).
Katram vietnes satura aspektam jābūt attēlotam struktūras slānī. Šī atdalīšana ļauj klientiem, kuriem JavaScript ir izslēgts vai kuri nevar skatīt CSS, piekļuvi visai vietnei, ja ne visām tās funkcionalitātēm.
CSS: stilu slānis
Šis slānis nosaka, kā strukturēts HTML dokuments izskatīsies vietnes apmeklētājiem, un to nosaka CSS (Kaskādes stila lapas). Šajos failos ir stilistiskas instrukcijas, kā dokuments jāparāda tīmekļa pārlūkprogrammā. Stila slānis parasti ietver plašsaziņas līdzekļu vaicājumi kas maina vietnes displeju, pamatojoties uz ekrāna izmērs un ierīce.
Visiem vietnes vizuālajiem stiliem jāatrodas ārējā stila lapā. Varat izmantot vairākas stilu lapas, taču katram CSS failam ir nepieciešams HTTP pieprasījums, lai to ielādētu, kas ietekmē vietnes veiktspēju.
JavaScript: Uzvedības slānis
Uzvedības slānis padara vietni interaktīvu, ļaujot lapai reaģēt uz lietotāja darbībām vai mainīt, pamatojoties uz nosacījumu kopumu. JavaScript ir visbiežāk izmantotā uzvedības slāņa valoda, bet CGI un PHP tiek izmantoti arī ļoti bieži.
Kad izstrādātāji atsaucas uz uzvedības slāni, lielākā daļa no tiem nozīmē slāni, kas tiek aktivizēts tieši tīmekļa pārlūkprogrammā. Izmantojiet šo slāni, lai tieši mijiedarbotos ar dokumenta objekta modeli. Rakstot derīgu HTML satura slānī ir svarīga DOM mijiedarbībai uzvedības slānī. Veidojot uzvedības slāni, jums vajadzētu izmantot ārējos skriptu failus tāpat kā CSS, lai optimizētu ātrumu un veiktspēju.