Бүтээх · ГэрээWeb publishing · Markup
Верстка (web publishing)
Верстка гэдэг нь дизайны загварыг хөтөч дээр бодитоор харагдах вэб хуудасны код болгон буулгах ажил юм.
Дууссан байдлын төсөөллийн зургийг хараад бодитоор хана босгож, будаг түрхэх барилгын шат юм.
Арай дэлгэрэнгүй
Солонгосын вэбийн салбарт дэлгэцийг код болгох ажлыг "publishing (верстка)", цаг захиалга · төлбөр гэх мэт ажилладаг функц хийх ажлыг "хөгжүүлэлт" гэж ялгаж нэрлэх нь элбэг.
Верстка хийх шатанд респонсив, үсгийн хэмжээ, зургийн тайлбар текст (alt), хуудасны хурд гэх мэт хайлт болон хэрэглээний үндсэн зүйлс хамт тодорхойлогддог.
Англи хэлний "publish" гэдэг үг "нийтлэх" гэсэн утгаар ч хэрэглэгддэг тул андуурагдаж болно. Зөвлөгөөний үеэр верстка (publishing) гэвэл ихэвчлэн дэлгэцийг код болгох ажлыг хэлдэг.
Верстка, дизайн, хөгжүүлэлт гурав юугаараа ялгаатай вэ?
Дизайн нь дэлгэцийн харагдах байдлыг тодорхойлж, верстка нь тэр харагдах байдлыг хөтчийн уншдаг код болгон хувиргаж, хөгжүүлэлт нь цаг захиалга · төлбөр зэрэг өгөгдөл хадгалж боловсруулдаг функцийг бүтээдэг. Жижиг вэбсайтад нэг хүн хэд хэдэн шатыг хамтад нь хариуцах нь ч бий.
Версткад голчлон 3 хэл ашигладаг. HTML нь гарчиг · текст · зураг зэрэг агуулгын араг яс, CSS нь өнгө · хэмжээ · байрлал зэрэг чимэглэл, JavaScript нь цэс нээх · зураг гүйлгэх зэрэг хөдөлгөөнийг хариуцдаг.
Верстка танд чухал байгаагийн шалтгаан нь үйлчлүүлэгч бодитоор хардаг зүйл нь загвар биш, верстка хийгдсэн дэлгэц байдагт оршино. Ижил загвар байсан ч версткийг нямбай хийвэл утсан дээр уншихад илүү амар, илүү хурдан вэбсайт болно.
Цаг захиалга · төлбөргүй танилцуулгын вэбсайт бол дизайн, верстка хоёроор л бүрэн дуусах нь ч бий. Харин цаг захиалга · төлбөр орвол верстка хийгдсэн дэлгэцэд хөгжүүлсэн функцийг холбох шат нэмэгдэж хугацаа уртасна.
Хүснэгтийг хажуу тийш гүйлгэж үзэж болно
| Шат | Үр дүн | Таны шалгах зүйл |
|---|---|---|
| Дизайн | Загвар (зураг хэлбэрийн дэлгэц) | Уур амьсгал · мэдээллийн дараалал |
| Верстка | Хөтөч дээр нээгддэг дэлгэцийн код | Утас · компьютер дээр эвдрэхгүй эсэх, үсгийн хэмжээ |
| Хөгжүүлэлт | Цаг захиалга · төлбөр · гишүүнчлэл зэрэг функц | Цаг захиалга · төлбөр бодитоор эцэс хүртэл хийгдэж байгаа эсэх |
Верстка сайн хийгдсэн эсэхийг юугаар үнэлэх вэ?
Гадаад төрх нь загвартай адил эсэхээс илүү янз бүрийн дэлгэц, нөхцөлд эвдрэхгүй байх нь версткийн чанар юм. Ижил дэлгэц байсан ч кодыг хэрхэн бичсэнээс хамаарч хайлтад харагдах байдал, хурд өөр өөр болно.
Эдгээр шалгуур нүдэнд шууд харагддаггүй тул өөрөө шалгахад хэцүү ч гүйцэтгэгчээс "ямар шалгуураар шалгасан бэ" гэж асуухад хангалттай. Google-ийн үнэгүй санал болгодог PageSpeed Insights-д хаягаа оруулж хурдны шалгалтын үр дүнг хамт харах арга ч бий.
Вэбийн хүртээмж зөвхөн хөгжлийн бэрхшээлтэй үйлчлүүлэгчдэд зориулагдсан зүйл биш. Үсэг, дэвсгэрийн өнгөний ялгаа хангалттай, товчны нэр нь тодорхой дэлгэц нарны гэрэлд утсаа харж буй үйлчлүүлэгч, үсгээ томруулж ашигладаг ахмад настай үйлчлүүлэгчид ч эвтэйхэн байдаг.
- Гарчиг · дэд гарчиг жинхэнэ гарчгийн таг (tag)-аар хийгдсэн тул хайлтын систем, дэлгэц уншигч бүтцийг нь уншиж чадах эсэх
- Утас · таблет · компьютерийн аль ч өргөнд текст, зураг давхцахгүй эсэх
- Зургийн хэмжээг багасгасан тул удаан интернэттэй үед ч хурдан нээгдэх эсэх
- Товч нь хуруугаар дарахад хангалттай том эсэх
- Утасны тохиргоонд үсгийг томруулсан ч агуулга тасрахгүй эсэх
Зургийн тайлбар текст (alt)-ийг яаж бичих вэ?
Зургийн тайлбар текст (alt) нь зургийг харж чадахгүй хүнд зургийн агуулгыг орлуулан хүргэдэг богино өгүүлбэр юм. Зураг нээгдэхгүй үед эсвэл дэлгэц уншигчаар вэбсайтыг сонсож буй үйлчлүүлэгчид энэ өгүүлбэрийг уншиж өгдөг.
"Зураг", "image1" гэх мэтээр бичвэл ямар ч мэдээлэл хүргэхгүй. Кафены цэсний зураг бол "Гүзээлзгэнэтэй цөцгийн бялуу нэг зүсэм ба americano" гэх мэтээр зурган дээр харагдаж буй зүйлийг тодорхой бичнэ.
Google ч зургийн хайлтад alt-ийг зургийн мэдээллийг хүргэх хамгийн чухал шинж чанар гэж зааварласан байдаг. Гэхдээ түлхүүр үгсийг хүчээр жагсаах нь эсрэгээрээ муу тул зургийг тайлбарласан байгалийн өгүүлбэрээр бичээрэй. Чимэглэлийн хээ зэрэг утгагүй зурагт тайлбарыг хоосон үлдээх нь зөв.
Верстка хийгдсэн дэлгэцийг яаж шалгах вэ?
Версткийн үр дүнг зөвхөн нэг төхөөрөмж дээр харвал асуудлыг алгасах нь амархан. Доорх дарааллаар 10–15 минутад ихэнх асуудлыг олж чадна.
Асуудал олвол ямар төхөөрөмж дээр ямар дэлгэц байсныг дэлгэцийн зурагтай хамт мэдэгдээрэй. Версткийн асуудал тодорхой загварын утас эсвэл дэлгэцийн өргөнд л гардаг нь олон тул төхөөрөмжийн нэр байвал хамаагүй хурдан засна.
Шалгахдаа загварыг хажууд нь нээж харьцуулбал сайн. Гэхдээ дэлгэцийн өргөн өөр учраас гарах жижиг ялгаа хэвийн зүйл тул мэдээлэл дутсан эсвэл дараалал нь өөрчлөгдсөн газруудыг голчлон хараарай.
- 01Өөрийн утас болон гэр бүл · ажилтнуудын өөр загварын утсан дээр ижил дэлгэцийг нээнэ.
- 02Утсаа хэвтээ эргүүлж, байрлал эвдрэхгүй байгаа эсэхийг харна.
- 03Утасны тохиргоонд үсгийн хэмжээг томруулаад дахин нээж үзнэ.
- 04Компьютер дээр хөтчийн цонхыг аажмаар жижигрүүлж, хэсгүүд доош доошоо өрөгдөж буйг шалгана.
- 05Wi-Fi-г унтрааж мобайл датагаар нээгээд зураг хэт удаан гарахгүй байгаа эсэхийг харна.
- 06Бүх цэс · товч · утасны дугаарын холбоосыг нэг нэг удаа дарж үзнэ.
Версткийн шатанд ямар асуудал түгээмэл гардаг вэ?
Хамгийн түгээмэл асуудал бол загварт орсон богино түр текст бодит урт текстээр солигдоход хэсгээсээ халих явдал. Үсчингийн үйлчилгээний нэр урт эсвэл урлангийн хичээлийн тайлбар урт бол утсан дээр мөр олон удаа шилжиж байрлал алдагддаг.
Үнийн жагсаалт эсвэл цагийн хуваарь зэрэг нүд олонтой хүснэгт утсан дээр хажуу тийш халиж тасрах нь амархан. Ийм агуулгыг утсан дээр карт хэлбэрээр харуулах зэрэг өөр байрлал шаардлагатай байж болно.
Урлангийн барааны дэлгэрэнгүй гэх мэт зураг олонтой хуудсанд дэлгэц рүү ойртох үед зургийг ачаалах арга (lazy loading буюу хойшлуулсан ачаалалт)-ыг ашиглавал эхний дэлгэц хурдан болно. Зураг олонтой хуудасны хурдыг хэрхэн хангадаг талаар гүйцэтгэгчээс асуугаарай.
- Хэмжээ ихтэй эх зургийг шууд оруулснаас эхний дэлгэц удаан гарах тохиолдол
- Утсан дээр попап бүх дэлгэцийг халхалж, хаах товчийг олоход хэцүү тохиолдол
- Фонтын файл хүнд тул үсэг удаан гарч ирэх тохиолдол
- Зөвхөн компьютер дээр харагддаг мэдээлэл утсан дээр дутуу байх тохиолдол
Верстка хийлгэхдээ гүйцэтгэгчээс юу асуух вэ?
Верстка бол таны тусад нь сонгох зүйл биш ч шалгуурыг нь асуувал гүйцэтгэгч ямар чанар амлаж байгааг мэдэж болно.
Нээсний дараа утасны үйлдлийн систем эсвэл хөтөч шинэчлэгдэхэд ховор тохиолдолд дэлгэц өөрчлөгдөх нь бий. Ийм үед арчилгааны хүрээнд засаж өгдөг эсэхийг хамт шалгаад авбал сайн.
Утасны дэлгэцийг нэг вэбсайт дотроо респонсив байдлаар тааруулдаг уу, утсанд зориулсан тусдаа дэлгэц хийдэг үү гэдгийг ч асуугаарай. Тусад нь хийдэг арга бол агуулгаа засахдаа хоёр газарт хоёуланг нь засах шаардлага гарч болно.
- Ямар төхөөрөмж, хөтөч дээр шалгадаг
- Зургийн хэмжээг багасгаж, хурдыг шалгадаг эсэх
- Зургийн тайлбар текст (alt) · гарчгийн бүтэц зэрэг хайлт · хүртээмжийн үндсийг оруулдаг эсэх
- Үнэ · ажлын цаг зэрэг текстийг дараа нь засахад хэн, яаж засах
Жишээлбэл
- Загвар дээр гоё харагдаж байсан цэс утсан дээр эвдрэхгүйн тулд баганыг дахин өрөх ажил бол верстка юм.
Үүнийг л шалгаарай
- Загвар болон бодит дэлгэц хоорондоо их зөрүүгүй эсэх
- Утсан дээр үсэг, товчны хэмжээ тохиромжтой эсэх
- Зураг, текст нэг зураг болж нийлээгүй эсэх (текст хэлбэрээр байж байж хайлтын систем уншина)
Манай бизнест?
Бүх бүтээх ажилд дамждаг шат. Та тусад нь сонгох зүйл байхгүй.
ISSYMO-д
Загвар батлагдсаны дараа верстка хийх явцдаа респонсив · зургийн тайлбар текст · хурд гэх мэт хайлт · AI-д харагдах үндсэн тохиргоог хамт оруулна.
Түгээмэл асуулт
Ашигласан эх сурвалж
Сүүлд зассан өдөр