Kaip struktÅ«rizuoti savo turinÄ¯ geresniam pagrindiniam puslapiui

Turinys:

ProfesionalÅ«s Å¾iniatinklio kÅ«rÄ—jai pradeda projektus, surinkdami visÄ… savo turinÄ¯ ir, remiantis jÅ³ pagrindine auditorija ir tikslu, organizuojant tÄ… turinÄ¯ Ä¯ loginius skyrius, pagrÄ¯stÄ… tikslinei auditorijai. Å i informacija architektÅ«ros fazÄ— paprastai baigiasi su interneto svetainÄ—s Å¾emÄ—lapio kÅ«rimu.

SvetainÄ—, kuriÄ… atliksite Å¡iame kurse, greiÄiausiai sudarys tik 5-6 skyrius ar puslapius. Kadangi mes pradedame maÅ¾us, nesiruoÅ¡iame nerimauti dÄ—l interneto svetainÄ—s Å¾emÄ—lapio kÅ«rimo, nors suÅ¾inosite, kaip tai padaryti DGM 2740 - Web dizainas. Vietoj to, mes ketiname pasikliauti mÅ«sÅ³ puslapio struktÅ«ros dizainu, kad netiesiogiai iÅ¡stumtumÄ—te svetainÄ—s struktÅ«rÄ….

Pagrindiniai puslapio projektavimo tikslai

Nors interneto svetainÄ—s Å¾emÄ—lapis apibÅ«dina, kaip visi svetainÄ—s puslapiai yra organizuojami, galime naudoti statinius vielos rÄ—mai (dar Å¾inomÅ³ puslapiÅ³ schemos), kad apibÅ«dintume, kaip visi Å¡ie informaciniai elementai yra organizuojami atskirais tinklalapiais. Statinis vielos rÄ—mas yra vienintelis atskirÅ³ puslapiÅ³ Å¡ablono brÄ—Å¾inys, rodantis informacinius komponentus, ypaÄ navigacijÄ…, kuri bus rodoma puslapyje, kad navigacijos komponentai bÅ«tÅ³ dokumentuojami ir vertinami. BrÄ—Å¾inys gali pasiÅ«lyti pagrindinÄ¯ vizualinÄ¯ iÅ¡dÄ—stymÄ…, bet nesilaiko jokios konkreÄios iÅ¡vaizdos.

Nors aiÅ¡kiai ne grafinis dizainas (pavirÅ¡iaus iÅ¡vaizda ir krito) tinklalapiÅ³, geras statinis vielos rÄ—mas gali padÄ—ti jums suplanuoti, kaip jÅ«s naudosite savo "ekrano nekilnojamÄ…jÄ¯ turtÄ…", kaip pradÄ—ti dirbti ant grafinio dizaino. Statinis vielos rÄ—mas yra tarsi pirmasis projekto projektas, kuriame pagrindinis dÄ—mesys skiriamas pagrindiniÅ³ elementÅ³ naudojimui ir iÅ¡dÄ—stymui.

Statiniai vielos rÄ—mai ir patogumas

Naudojimas yra susijÄ™s su tuo, kaip lengva naudoti vartotojui gauti tai, kÄ… jis nori iÅ¡ tinklalapio. IÅ¡ naudojimo poÅ¾iÅ«riu nepamirÅ¡kite, kad dauguma jÅ«sÅ³ puslapio turÄ—tÅ³ bÅ«ti naudojama turiniui, kuris yra svarbiausias Ä¯ numatomÄ… auditorijÄ…. Apskritai, paprastumas laimi per sudÄ—tingumÄ…. PaÅ¾velkite Ä¯ "Google". Tai nereiÅ¡kia, kad jÅ«s negalite turÄ—ti daug turinio ar iÅ¡tekliÅ³ savo svetainÄ—je, tai tik, kad jie visi turÄ—tÅ³ tarnauti konkreÄiu tikslu.

Nauda "Freak Jakob Nielson" sako, kad "kaip nykÅ¡Äio taisyklÄ—, turinys turÄ—tÅ³ sudaryti bent pusÄ™ puslapio dizaino ir, pageidautina arÄiau iki 80%." NustaÄius turinÄ¯, svarbu visada iÅ¡laikyti savo tikslinÄ™ auditorijÄ….

Koks geras puslapio struktÅ«ra gali Ä¯vykdyti

Gera puslapio struktÅ«ra sukelia gerÄ… informacijos iÅ¡dÄ—stymÄ…, kuris padeda vartotojams rasti ir suvirÅ¡kinti informacijÄ…, kuriÄ… jie gauna. Geras iÅ¡dÄ—stymas taip pat gali perteikti profesionalumo jausmÄ…. Tai gali atrodyti, nesvarbu, kokia jÅ«sÅ³ svetainÄ— gali padaryti, jei Å¾monÄ—s yra taip iÅ¡stumti savo svetainÄ—s iÅ¡vaizdÄ…, kad jie negali bÅ«ti ten. Apsvarstykite Å¡iuos geros iÅ¡dÄ—stymo privalumus:

Ä¯traukiant skaitytojus
ReÅ¾isierius Reader DÄ—mesio
Informacijos apie informacijÄ…
Kai kurie patikimumo ir galiojimo suma
Clues apie tai, kaip narÅ¡yti ir naudoti svetainÄ™

AtsisiÅ³skite moderniÄ… narÅ¡yklÄ™:

Ä®vadas: Palyginti su tradiciniu paprastu tekstu, tinklalapyje yra daugiau struktÅ«ros. Interneto puslapiai taip pat laikomi pusiau struktÅ«rizuotais duomenimis. PagrindinÄ— tinklalapio struktÅ«ra yra jo DOM4 (dokumento objekto modelio) struktÅ«ra. "Dom" tinklalapio struktÅ«ra yra medÅ¾iÅ³ struktÅ«ra, kur kiekvienas html Å¾yma puslapyje atitinka dozÄ—s mazgÄ…. TinklalapÄ¯ galima segmentuoti kai kuriomis iÅ¡ anksto nustatytomis struktÅ«rinÄ—mis Å¾ymÄ—mis. Naudingos Å¾ymÄ—s apima P (pastraipa), lentelÄ— (lentelÄ—), ul (sÄ…raÅ¡as), [H1 H6 (antraÅ¡tÄ—) ir tt Taigi DOM struktÅ«ra gali bÅ«ti naudojama siekiant palengvinti informacijos gavybÄ….

Deja, dÄ—l HTML sintaksÄ—s lankstumo, daugelis tinklalapiÅ³ nesilaiko W3C HTML specifikacijÅ³, kurios gali sukelti klaidÅ³ Dom medÅ¾io struktÅ«rÄ…. Be to, Dom medis iÅ¡ pradÅ¾iÅ³ buvo Ä¯vestas pristatymui narÅ¡yklÄ—je, o ne tinklalapio semantinÄ—s struktÅ«ros apraÅ¡yme. PavyzdÅ¾iui, nors du mazgai Dom medyje turi tÄ… patÄ¯ tÄ—vÄ…, du mazgai gali bÅ«ti ne daugiau semantiÅ¡kai su kitais nei kitÅ³ mazgÅ³. 10 pav. Parodomas pavyzdys. 10 pav. (A) rodo dalÄ¯ HTML Å¡altinio (mes laikome tik stuburo kodÄ…) ir 10 pav. (B) rodo Dom medis puslapio. Nors mes turime aplinkiniÅ³ apraÅ¡ymo tekstÄ… kiekvienam vaizdui, Dom medis struktÅ«ra nepavyksta tinkamai nustatyti semantinius santykius tarp skirtingÅ³ daliÅ³.

Å½mogaus suvokimo prasme Å¾monÄ—s visada perÅ¾iÅ«rÄ—ti tinklalapÄ¯ kaip skirtingus semantinius objektus, o ne kaip vienÄ… objektÄ…. Kai kurios moksliniÅ³ tyrimÅ³ pastangos rodo, kad vartotojai visada tikisi, kad tam tikros funkcinÄ—s tinklalapio dalys (e., NavigaciniÅ³ nuorodÅ³ ar reklamos juostos) pasirodo tam tikrose puslapio pozicijose. TiesÄ… sakant, kai vartotojui pateikiamas tinklalapis, erdviniai ir vaizdo Ä¯raÅ¡ai gali padÄ—ti vartotojui nesÄ…moningai padalinti tinklalapÄ¯ Ä¯ kelias semantines dalis. TodÄ—l galima automatiÅ¡kai segmentuoti tinklalapius naudojant erdvinius ir vaizdinius uÅ¾uominas. Remiantis Å¡iuo stebÄ—jimu, mes galime sukurti algoritmus, kad galÄ—tume iÅ¡gauti tinklalapio turinio struktÅ«rÄ…, pagrÄ¯stÄ… erdvine ir vaizdine informacija.

Ankstesnis pranešimas. \ T Kitas pranešimas. \ T