surgalt

1. Агуулга
1. Бүлэг Веб хуудас хийх энгийн боломжууд түүний хэрэглээ
Веб хуудас гэж юу вэ
Вебийн ангилал
Веб сайт ба түүний бүрдэл
Tа вебсайт бүтээхийг хүсч байна уу?
Вебсайт хийх энгийн боломжууд
Даалгавар ажил
• Google sites
• SITE123
• Wix
• Duda
2. Бүлэг Вэб технологи дээр суурилсан цахим хэрэглэгдэхүүн боловсруулах
технологийн асуудлууд түүний шийдэл
Үндсэн хэсэг
Цахим хэрэглэгдэхүүн боловсруулах технологи
Цахим хэрэглэгдэхүүн боловсруулах технологи, программ хангамж
Цахим хичээл хэрэглэгдэхүүн боловсруулалт ба веб технологи дээрх шийдэл
Вебийн Framework гэж юу вэ?
Даалгавар ажил
Зураг техт болгон хөрвүүлэх, HTML, CSS, Script код задлах
 base64 converter
 Unminify код задлагч

2. 1. Веб хуудас хийх энгийн боломжууд түүний хэрэглээ
Сэдвийн зорилго:
Хэрэглэгчдэд харьцангуй ээлтэй энгийн хэлбэрээр сервис болон кодчилол хамааралгүй веб
хуудас хийх боломжийг судлах.
Зорилт:
Сервис болон кодчилол хамааралгүй платформ ашиглан вебсайт хийх, ашиглах
 Google sites
 SITE123
 Wix
 Duda
Онолын хэсэг
Веб хуудас гэж юу вэ
Веб хуудас (цахим хуудас) гэдэг нь html буюу (скрипт хэл) ашиглан үүсгэгдсэн, текст, зураг
болон бусад график, видео дүрс, дуу авиа агуулсан баримт юм. Харин тодорхой нэг домэйн нэр,
интернетэд байршсан хост, сэдэв, дизайн загвар, мэдээллийн сан болон холбоосуудаар (линк) өөр
хоорондоо холбогдсон веб хуудаснуудын нэгдлийг веб сайт (Website) гэх ба үндсэн хуудсыг нь
нүүр хуудас гэнэ. Хувь хүн эсвэл байгууллагын интернет дэх төлөөлөгч гэж ойлгож болно. Сайт
нь хэрэглэгчдийн компьютер эсвэл гар утсанд суулгасан веб хөтчийн (Google Chrome, Mozilla
Firefox, Safari г.м.) тусламжтайгаар WWW стандартын дагуу мэдээллийг харуулдаг мэдээллийн
нөөц юм.
Вебийн ангилал
Сайтуудыг доорх үзүүлэлтүүдээр ангилж үзүүлбэл:
Үзүүлж байгаа үйлчилгээний хүртээмжээр нь:
 Нээлттэй: бүх зочид болон хэрэглэгчид сайтыг 100% хэрэглэх боломжтой
 Хагас нээлттэй: үйлчилгээ авахын тулд бүртгүүлэх шаардлагатай. Ихэнхдээ үнэгүй.
 Хаалттай: зөвхөн хэсэг бүлэг хүмүүст зориулагдсан веб сайт.
Агуулгын үүслээр нь:
 Статик сайт (Static): хэрэглэгчдэд нэгэн хэвийн мэдээлэл харуулдаг ба мэдээллийг
өөрчлөхийн тулд сервер дээр хадгалагдаж буй файлуудын HTML эх кодыг өөрчлөх шаардлагатай
байдаг.
 Динамик (Dynamic) буюу автоматжуулсан веб: агуулга нь мэдээллийн сангаас тусгай
скрипт кодны тусламжтайгаар дуудагдаж боловсруулагдан бидний дэлгэцэнд харагдана.
Эзэмшигч нь сайтад контент шинээр оруулах, шинэчлэх, засварлахад хялбар ба илүү үр дүнтэй.
Байрлалаар нь:
 Интернэтэд байрласан.
 Дотоод сүлжээнд байрласан: Зарим байгууллагуудын хувьд.

3. Мэдээллийн хэмжээ, бүтэц, хэрэглэгчдэд хүрч байгаа байдал, зорилгоор нь:
 Газардах хуудас: тодорхой нэгэн бараа бүтээгдэхүүн эсвэл үйлчилгээг борлуулах
зорилготой. Газардах хуудсыг бизнес эрхлэгчид ихэнхдээ үндсэн сайтаасаа тусад нь хийлгэдэг.
 Байгууллагын танилцуулга сайт
 Бараа бүтээгдэхүүн, үйлчилгээний каталоги
 Онлайн худалдааны
 Мэдээллийн портал
Веб сервис: сайтууд нь агуулгыг удирдах систем (АУС), мэдээлэл дамжуулах болон
шифрлэлтийн төрөл бүрийн протокол ашигладаг тул тэдний хооронд контент дамжуулалтыг энэ
програм нь хөнгөвчилдөг.
 Хайлтын системүүд: Google, Yahoo, Baidu, Bing, Ask г.м.
 Электрон шуудангийн үйлчилгээ: Gmail, Yahoo! Mail.
 Форум, хэлэлцүүлэг
 Нийгмийн сүлжээ: Facebook, Twitter, WhatsApp, Instagram, LinkedIn, Pinterest г.м.
 Зарын самбар
 Блог хөтлөх үйлчилгээ
 Файл солилцох үйлчилгээ буюу файлхостинг (File hosting service)
 Дата хостингийн үйлчилгээ
 Онлайн горимд бичиг баримт боловсруулах үйлчилгээ: Google docs. Таны баримтууд
үүлэн технологид суурилсан санд хадгалагдах тул дэлхийн аль ч өнцгөөс хандах боломжтой.
Хэрэв та зөвшөөрвөл танаас гадна олон хүн нэгэн зэрэг уг файл дээр нэгэн зэрэг ажиллах
боломжтой.
 Видео байршуулах үйлчилгээ (Video hosting): YouTube, Vimeo, Dailymotion г.м.
 Зураг байршуулах (Photo hosting): Shutterstock г.м.
Веб сайт ба түүний бүрдэл
Веб сайт (Англи. Website) гэдэг нь хүмүүст харуулахаар бэлдсэн мэдээллийг агуулсан файлууд
юм. Веб хөтөч дээр харуулах зорилгоор хийгдсэн скрипт файлууд. Хэрэв та веб сайттай болох
гэж байгаа бол юуны өмнө веб сайтаа ямар нэгэн програм технологи ашиглаж бүтээнэ.
HTML, javascript, CSS, PHP зэрэг ер нь ямар ч технологи ашигласан байж болно.
Түүнийгээ серверт байрлуулах хэрэгтэй.

4. Зураг 1. Вебсайтын бүрдэл ба хөгжүүлэлт
Веб сайт нь интернет сүлжээнд байрласан хоорондоо холбоотой веб хуудаснуудын
нийлбэр юм. Тэгвэл веб хуудас (Web page) гэдэг нь World Wide Web стандартын дагуу
хэрэглэгчийн компьютерийн дэлгэцэнд веб хөтчийн тусламжтайгаар харагддаг бичиг
баримт эсвэл төрөл бүрийн мэдээллийн нөөц юм. Веб сайтын хуудсууд нь үндсэн хуудсаас
дуудсан URL( Uniform Resource Locator ) – ын тусламжтайгаар бусад хуудасруугаа
хялбархан хандаж чаддаг. 1989 онд Женев дахь физикийн CERN лабораторид Английн
инженер Tim Berners-Lee гэдэг хүн анх веб ийг бүтээжээ.
Сервер гэж юу вэ?
Сервер гэдэг нь интернетэд холбогдсон компьютер юм. Интернет дэх нэг тооцоолуур буюу
сервер нь тусгай серверийн програм хангамж ажиллаж байдаг. Серверийг интернетээс
олохын тулд тэр серверийн IP хаягийг мэдэх хэрэгтэй. Серверийн хувьд байнга ижил IP
хаягтай байх нь тохиромжтой байдаг. Тийм солигддоггүй IP хаягийг Dedicated IP хаяг гэж
хэлдэг. Public IP гэсэн ойлголт бий. Энэ нь интернетэд холбогдож буй төхөөрөмжийн IP
хаяг юм. Мөн public гэдгийн эсрэгээр Local IP гэж бий. Энэ нь зөвхөн дотоод сүлжээн дэх
төхөөрөмжийн IP хаяг юм. NAT технологийг ашиглаад олон компьютерыг нэг public IP
хаягтайгаар интернетэд холбодог. Local IP хаяг бол зөвхөн тэр дотоод сүлжээн дотор л
ашиглагдана. Тиймээс ийм NAT-тай тохиолдолд тэр сүлжээн дэх аль нэг тооцоолуур дээр
сервер ажиллуулсан тохиолдолд port forward зэрэг чиглүүлсэн тохиргоо хийж өгөөгүй бол
шууд Public IP хаягаар аль нэг тооцоолуурт шууд хандах боломжгүй байдаг. Dynamic
IP гэсэн Dedicated IP хаягийн эсрэг ойлголт бас бий. Энэ бол интернетэд холбогдох бүрт IP
хаяг солигдож байхыг хэлдэг. Бараг бүх DSL холболтууд ийм динамик IP хаягтай байдаг.
Ийм интернет холболттой тохиолдолд та тооцоолуур дээрээ сервер байрлууллаа гэхэд тэр
серверийг интернетээс олж хандах хаяг нь байнга солигдох тул бас л серверт тохиромжгүй
юм. Гэхдээ үүнийг шийдэж өгдөг Dynamic DNS үйлчилгээнүүд интернетэд байдаг. Мөн
үүнтэй холбоотой DNS буюу домэйн нэрийн серверүүд гэсэн ойлголтыг бас ажиллах
зарчмыг ойлгох хэрэгтэй болно. Нэрийн серверүүд гэдэг нь домэйн нэрийг бичээд хүн
хандах үед хэрэглэгчийн веб хөтөч (chrome, IE, Firefox г.м)-д серверийн IP хаягийг хэлж
өгдөг серверүүд юм. Тэгэхээр та домэйн нэртэй бол түүндээ өөрийн IP хаягийг DNS record
гэгч зүйлээр тохируулж зааж өгдөг. Үүнийг нэрийн серверүүд бүртгэж авснаар
интернетийн аль нэг өнцгөөс хэн нэгэн хүн домэйн нэрээр нэвтрэхийг хүсэхэд хүсэлтийн

5. дагуу IP хаягийг хэлж өгч, тухайн хүний тооцоолуур тэр IP хаягаар нь серверт холбогддог.
Мөн тэр серверт холбогдох үед сервер асаалттай байх хэрэгтэй гэсэн үг.
Bеб сайт хийгээд, ямар нэгэн сервер дээр байрлуулсан гэж бодъё. Тэгэхээр 24 цагийн турш
дэлхийн аль ч өнцгөөс хэн нэгэн хүн хандахад веб тань ажиллаж байхын тулд сервер тань
үргэлж асаалттай байх хэрэгтэй гэсэн үг. Онолын хувьд бол Private public IP (NAT-гүй буюу
ганцаараа 1 public IP хаягтай) хаягтай дурын тооцоолуур дээр сервер програм суулгаад
сервер болгож болох юм. Гэсэн ч тэр тооцоолуурыг 24 цагийн турш ажиллуулах нь
хүндрэлтэй. Мөн динамик аипи ашиглах үед бас найдвартай биш зэрэг олон асуудал байдаг.
Тиймээс түүнийг хөнгөвчлөх үүднээс гарсан сервер түрээслүүлэх Web server hosting гэсэн
үйлчилгээ байдаг.
IP хаяг гэж юу вэ?
Интернетэд холбогдсон компьютер бүр өөрийн IP хаяг гэгч тоон хаягтай байдаг. Тэр
хаягаараа интернеттэй холбогдож харилцаж байдаг. Интернет дэх олон зуун тооцоолуур
дотроос IP хаягаараа ялгарч тооцоолуурууд хоорондоо мэдээлэл дамжуулдаг. Таны веб сайт
нэг тооцоолуур дээр байрлаад түүн рүү IP хаягаар хандаад нээж үздэг.
Домэйн нэр гэж юу вэ?
Веб сайт ажиллуулахын тулд домэйн нэр гэсэн бас нэг ойлголт бий. Домэйн нэр бол веб
сайт байрлаж буй серверийн IP хаягийг олох зам заагч ч гэж ойлгож болно. Таны сервер,
серверийн IP хаяг солигдсон ч сайт руу тань хүмүүс домэйн нэрээр хандаад холбогдоод
байх боломжийг олгодог юм. Бас IP гэх олон оронтой тоог тэр бүр хүн цээжлээд веб сайт
руу хандах нь ховор. Үүнийг мөн домэйн нэр шийдэж байгаа юм. Домэйн нэр байхгүй дан
сервер дээр ч мэдээллээ байрлуулаад IP хаягаар нээж болно. Тэгэхээр домэйн нэр бол
халхавч, зам заагч юм. Гэхдээ нэг зүйлийг анхаарах хэрэгтэй. Бид домэйн нэрийг түрээсээр
эзэмшиж байгаа болохоос тухайн нэрийг өмчлөх боломжгүй байдаг. Тиймээс тухайн
домэйн нэрний түрээсийн төлбөрийг цаг тухайд нь төлж байх хэрэгтэй. Домэйн нэр сонгох
нь таны бизнесийн хувьд чухалд тооцогдох алхам юм. Домэйн нэр нь дан ганц танайхруу орох
хаягаас гадна бизнес имэйлийг энэхүү домэйн нэр дээрээ авах боломжтой болдог
Tа вебсайт бүтээхийг хүсч байна уу?
1. Вебсайтынхаа зорилгыг тодорхойлох
Вебсайтаа хийлгэж байгаа хүмүүс Вебсайтынхаа зорилгоо буруу тодорхойлсноос эсвэл
тодорхойлсон зорилгынхоо дагуу ажиллуулж чадаагүйгээс болж сайтаа бүрэн ашиглаж
чаддаггүй.
Вебсайтын тухай ойлголт 10 жилийн өмнөхөөс өнөөдрийн төвшинд эрс өөрчлөгдсөн бөгөөд
зөвхөн танилцуулга хэмжээнээс аль хэдийнээ даваад мэдээллийн томоохон хэрэгсэл болсон
бөгөөд маркетинг борлуулалтад өндөр үүрэгтэй оролцдог болоод байна.
Вебсайтын зорилгыг том жижиг их багаас үл хамааран үндсэн 2 том ангилалд хувааж болохоор
байна. Үүнд:
1. Борлуулалтын өмнөх буюу LEAD (сэжим) олох
2. Борлуулалтын дараах буюу хэрэглэгчиддээ мэдээлэл хүргэх
Таны Вебсайт дээрх 2 зорилгыг дангаар, мөн хавсран гүйцэтгэх зорилго, зохион байгуулалттай
байх боломжтой.

6. 2. Вебсайт хийх
Вебсайтаа хийх нь үндсэндээ хоёр талын оролцоотой бөгөөд веб захиалагч болоод гүйцэтгэгч
хоёрын харилцан ойлголцол дээр веб бүтнэ. Мөн сүүлийн жилүүдэд веб технологийн тодорхой
хөгжил нь веб хуудсаа хэрэглэгч өөрөө хөгжүүлэх боломжийг олгоод байна. Иймээс веб хуудсаа
хэн нэгэн хөгжүүлэгчээр хийлгэх үгүй бол өөрөө хийнэ.
3. Төсөв хугацаа
Вебсайт хийхэд үндсэндээ дараах 3 төрлийн зардал гардаг.
1. Домэйн нэр: *.MN 88,000₮, *.COM 33,000₮ / жил бүр төлдөг төлбөр /
2. Веб байршуулах буюу Hosting: Веб ийн хүчин чадлаас хамаарч харилцан адилгүй төлбөр
гарна / жил бүр төлдөг төлбөр /
3. Веб сайт хийлгэх төлбөр. Энэ төлбөр Вебсайт хийж байгаа компаниасаа хамаараад
харилцан адилгүй байдаг.
Веб сайт хийх хугацааг мөн 2 үе шатанд хувааж үздэг.
Систем буюу веб сайт бэлэн болох хугацаа /дизайн, админ хуудас гм/
+
Агуулга оруулах хугацаа /Веб сайтын мэдээлэл/
=
Нийт хугацаа
Вебсайт хийх энгийн боломжууд.
Та хобби эсвэл хувийн блогтоо зориулж Вебсайт бүтээхийг хүсэж байна уу. Хэрэглэгчдэд
харьцангуй ээлтэй энгийн хэлбэрээр веб хуудас хийх боломжийг илэрхийлэн энэ танилцуулгыг
хийж байна веб хуудастай болох маш олон боломжууд байдаг.
Мэдээллийн технологийн мэргэжилтний оролцоогүйгээр хэрэглэгч Та өөрөө веб ээ бүтээж чадна.
Өнөө цагт веб бүтээх нь яг ЛЕГО хавтангаар байшин барихтай ижил болсон.
"Вебсайт бүтээгч" гэж юу вэ?
Та ч вебсайт бүтээгч байж магадгүй, гэхдээ энэ бол маш чухал асуулт юм. Учир нь томоохон
хөгжүүлэгчид вебсайт хийх боломж бүхий платформуудыг олон нийтэд санал болгосоор байна.
Иймээс та тухайн платформыг ашиглан өөрийн гэсэн вебсайт хийх боломж бүрдэж байгаа юм.
Дээрх платформууд нь олон төрлийн хэлбэрээр программчлалын тодорхой мэдлэгтэйгээс огт
мэдлэггүй хүн ашиглаж болох сонголт бүхий олон платформ байдаг.

7. Монгол инженерүүдийн бүтээсэн мэргэжлийн хүний оролцоогүй вебсайт хийх системүүд
 https://webcity.mn
 https://webbuilder.mn/
Гадаад вебсайт хөгжүүлэх тэргүүлэх веб платформууд
 Squarespace
 Weebly
 Wix
 Duda
 GoDaddy
 Strikingly
 WordPress.com
 Jimdo
 SITE123
 Google slide
Дээрх системүүдээс тодорхой хязгаарт Hosting, domain хэрэглэж болох, мөн веб хийхэд бүтэц нь
энгийн байх болон мөн вебсайтын бүтэц зэргээс шалтгаалан дараах платформыг сонгон туршиж
үзье.
 Google sites
 SITE123
 Wix
 Duda

8. Даалгавар ажил
Ажлын зорилго:
Энэхүү ажлаар хялбар аргаар нээттэй платформ ашиглан веб хуудас үүсгэх аргийг судална.
Ашиглах програм хангамж/техник хангамж, бусад хэрэглэгдэхүүнүүд:
1. Интернет сүлжээнд холбогдсон компьютер
2. Web browser (Google chrome байвал илүү зохимжтой.)
Дадлагын ажил : Wiki веб хуудас үүсгэх
Өгөгдлийн сүлжээний хувьд вики нь вебд суурилсан хамтын ажиллагааны хэрэгслийн нэг бөгөөд
бид бүгдэд мэдээлэл, файлууд, зураг, графикийг сайт руу нийтлэн оруулж, түүнийг бусад
хэрэглэгчид хурдан хугацаанд харах болон засварлах, өөрчлөх боломжийг бий болгодог. Вики
нь таны сонирхож буй нийтлэлүүдийг олоход туслах зорилгоор хайлтын хэрэгсэл бүхий үндсэн
хуудас(Home page) руу хандах боломжийг олгодог. Вики нь Интернетийн бүлэг хэрэглэгчийн
нийгэмлэг, холбоо эсвэл байгууллагын галт хана төхөөрөмжийн цаана зөвхөн ажилтнуудын
хэрэглээнд зориулагдсан байж болно. Хэрэглэгч нь вики агуулгыг унших, харахаас гадна веб дэх
агуулгыг бий болгох боломжтой. Хэдийгээр олон өөр өөр вики үйлчилгээний серверүүд байдаг
ч эдгээр нь дараах үндсэн нийтлэг боломж, функцуудыг агуулсан байдаг.
1. Дурын web browser ашиглан шинээр агуулыг үүсгэх, хуудсуудыг засах боломжтой.
2. Хуудсуудыг засахад холбоосыг засварлах, авто холбоос хийх боломжтой ба хуудсууд
хоорондоо автоматаар холбогдоно.
3. Агуулгын байрлалыг хурдан олоход хайлтын системтэй.
4. Агуулгыг үүсгэх, агуулгыг засварлах зэргийг хэрэглэгчийн эрхээр удирдах боломжтой.

9. 1. Google sites
Дадлагын энэ хэсэгт бид Google-ийн бүртгэлээ ашиглан Google Site дээр өөрийн гэсэн wiki веб
хуудас хийх боломжийг судлах ба маш амархан аргаар вебсайт хийх боломжтой.
Алхам 1: https://sites.google.com хаяг руу орж өөрийн Google хэрэглэгчийн бүртгэлээр нэвтрэн
орно. Тэгээд баруун доод буланд байрлах Create New Site (улаан өнгөтэй +) товчийг дарна.
Алхам 2: Enter Site Name дээр өөрийн веб-ийн нэрийг давтагдахгүйгээр өгнө. Хэрэв нэр
давхардвал нэрээ өөрчлөнө. Мөн веб-ийн логог оруулах бол Add logo товчийг дарж зургийн
файлаа зааж өгнө. Зургийг компьютер дээрээс, Google drive-аасаа, зургийн холбоосоор гэх мэтээр
оруулж болно. Мөн вебийн толгойн зургийг солих, толгойн төрлийг сонгох боломжтой.
Зураг 2. Google Site дээр веб хуудас үүсгэх
Алхам 3: Вики хуудасны харагдацыг өөрчилж, засварлах
3.1. Шинээр веб үүсгэхэд Google-ээс анхдагч вебийн бүтэц болон загварыг санал болгож
харуулсан байдаг. Хэрвээ вебийнхээ бүтцийг өөрчлөх бол INSERT цэсний Layouts хэсгээс өөрт
таалагдаж байгаа хэсгүүдийг аван вебийн бүтцээ хүссэнээрээ өөрчлөх боломжтой.
Мөн INSERT цэсний Text box, Images, Divider, Youtube, Maps гэх мэтийг ашиглан агуулгуудыг
веб хуудсандаа оруулж болно.
3.2. Вебийн загварыг сонгох бол THEMES цэс рүү орж, гарч ирэх загваруудаас сонгож
болно. Энд бас өнгө, үсгийн фонт зэргийг өөрчлөх боломжтой.
Алхам 4: Шинэ хуудас үүсгэх
4.1. Pages цэс дээр дарж гарч ирэх цонхны Нэмэх ( + ) товчийг дарж шинэ хуудсыг үүсгэнэ. Шинэ
хуудас үүсэхээс гадна хуудсууд руу шилжих цэс үүснэ.
Алхам 5: Веб хуудсаа бусадтай хамтран ашиглах
5.1. Бусадтай хуваалцах цонх гарч ирэх бөгөөд Invite people хэсэгт хамтран ашиглах хүний нэр,
групп эсвэл мэйл хаягийг оруулаад засварлах(Can edit) эсвэл үзэх(Can viewEdit), гэсэн эрхүүдээс
аль эрхээр хандахыг зааж өгөөд SEND товчийг дарна.
5.2. Хэрэглэгчид нь хэн хэн тухайн вебийг нээсэн байгааг вебийн дээд хэсгээс болон
хаана засвар хийж байгааг харж болно.

10. 5.3. Веб шалгахдаа Preview товч дээр дарж, компьютер, таб, гар утсан дээр хэрхэн харагдахыг
үзэж болно. Буцаад гарах бол Exit Preview товч дээр дарна.
5.4. Веб хуудсаа хийж дууссан бол нийтлэх буюу интернетэд байршуулж хүмүүс үзэх боложтой
болгоно. Ингэхдээ PUBLISH товчийг дарна. Вебийн хаягаа бичих бөгөөд хаяг
нь https://sites.google.com/view/{сайтын нэр} гэсэн бүтэцтэй байна. Энд мөн өөр домайн нэр
холбох, хэн вебийг үзэх, хайлтын системээр гарч ирэх эсэх зэрэг тохиргоонуудыг хийнэ.
5.5. Нийтэлсэн веб-ээ харах бол Publish Options товчийг дарж View published site сонголтыг
сонгоно.
Үр дүнг үнэлэх даалгаварууд:
Нэг сэдэв сонгон авч(Өөрийн сонирхдог зүйл, урлаг, спорт гэх мэт) өөрийн веб хуудсыг хийнэ
үү? Мөн өөр хүнтэй хуваалцаж ашиглана уу?
Жишээлбэл https://sites.google.com/view/my-web-shagai/home
Зураг 3. Google Site дээр вебсайт үүссэн байдал

11. 2. SITE123
Дадлагын энэ хэсэгт бид https://app.site123.com/ хаягаар имайл хаягаа бүртгүүлэн орж өөрөө
вебсайт хийх боломжтой SITE123 нь веб удирдах интерфйис нь ойлгомжтой бөгөөд харьцангуй
харагдац дизайн хувьд сонголт сайтай.
Алхам 1: https://app.site123.com/ руу орж өөрийн хэрэглэгчийн бүртгэлээр нэвтрэн орно.
Алхам 2: https://app.site123.com/ дээр New WebSite сонголтоор шинэ веб үүгэх бөгөөд өөрийн
веб-ийн нэр болон агууллагыг тодорхойлно ба түүний платформоос өөрийн загвар болон
атрибутийг сонгоно.
Зураг 4. SITE123 веб платформ дээр веб хуудас үүсгэх
Алхам 3: Танд үнэгүй өгөх хостын хэмжээ болон домайны сонголт болон веб засах, удирдах
болон тохиргоог хийнэ.
Зураг 5. SITE123 веб платформ дээр веб домайн хост авах
Алхам 4: Вики хуудасны харагдацыг өөрчилж, засварлах
4.1. Шинээр веб хуудас үүсгэх, Text box, Images, Divider, Maps гэх мэтийг ашиглан агуулгуудыг
веб хуудсандаа оруулж болно.
4.2. Вебийн загварыг сонгох бол THEMES цэс рүү орж, гарч ирэх загваруудаас сонгож
болно. Энд бас өнгө, үсгийн фонт зэргийг өөрчлөх боломжтой.

12. Зураг 6. SITE123 веб платформ дээр вебсайт үүсгэх edit хийх хэсэг
Зураг 7. SITE123 веб платформ дээр дээр вебсайт үүссэн байдал
Алхам 5: Веб шалгахдаа new window Preview хийж харах ба компьютер, таб, гар утсан дээр
хэрхэн харагдахыг үзэж болно.

13. 3. Wix
Мөн та https://manage.wix.com/account/sites хаягаар өөрийн майл хаягаа бүртгүүлэн орж өөрөө
вебсайт хийх боломжтой Wix платформ нь үнэгүй веб хөгжүүлэлтээрээ болон веб интерфейсийн
хувьс сүүлийн жилүүдэд тогтмол дээгүүрт бичигдэж буй томоохон систем билээ. Вебсайт
хөгжүүлэх, удирдах интерфейс нь ойлгомжтой бөгөөд харьцангуй харагдах дизайн хувьд сонголт
сайтай гэх зэрэг олон давуу талтай.
Алхам 1: https://manage.wix.com/account/sites руу орж өөрийн хэрэглэгчийн бүртгэлээр нэвтрэн
орно.
Зураг 8. Wix веб платформ дээр веб хуудас үүсгэх
Алхам 2: https://manage.wix.com/account/sites дээр New Web Site сонголтоор шинэ веб үүгэх
бөгөөд өөрийн веб-ийн нэр болон агууллагыг тодорхойлно ба түүний платформоос өөрийн загвар
болон атрибутийг сонгоно. Мөн таны вебсайтын хост домайн болон бусад бүтцийн мэдээллийг
өгнө.
Зураг 9. Wix веб платформ веб платформ дээрх үндсэн тохиргоо веб домайн хост аваh
Алхам 3: Танд үнэгүй өгөх хостын хэмжээ болон домайны сонголт болон веб засах, удирдах
болон тохиргоог хийнэ.
Алхам 4: Вики хуудасны харагдацыг өөрчилж, засварлах
4.1. Шинээр веб хуудас үүсгэх, Text box, Images, Divider, Maps гэх мэтийг ашиглан агуулгуудыг
веб хуудсандаа оруулж болно.

14. 4.2. Вебийн загварыг сонгох бол THEMES цэс рүү орж, гарч ирэх загваруудаас сонгож
болно. Энд бас өнгө, үсгийн фонт зэргийг өөрчлөх боломжтой.
Зураг 10. Wix веб платформ веб платформ дээрх веб хуудас үүүэн байдал ба edit хийх хэсэг
Алхам 5: Веб шалгахдаа Preview хийж харна.

15. 5. Duda
Та https://my.duda.co/ хаягаар өөрийн майл хаягаа бүртгүүлэн орж өөрөө вебсайт хийх
боломжтой duna платформ нь тодорхой хугацаанд хост домайн үйлчилгээ үнэгүй өгөх бөгөөд
веб хөгжүүлэлтийн хувьд duna side editor буюу html css devloment code editor өгснөөрөө embed
болон код ашиглан вебийг хөгжүүлэх боломж олгодог. Вебсайт хөгжүүлэх, удирдах
интерфейс нь ойлгомжтой бөгөөд харьцангуй харагдах дизайн хувьд сонголт сайтай гэх зэрэг
олон давуу талтай.
Алхам 1: https://my.duda.co/home/dashboard/sites руу орж өөрийн хэрэглэгчийн бүртгэлээр
нэвтрэн орно.
Зураг 11. Duda веб платформ дээр веб хуудас үүсгэх
Алхам 2: https://my.duda.co/home/dashboard/sites дээр greate a responsive site сонголтоор
шинэ веб үүгэх бөгөөд өөрийн веб-ийн нэр болон агууллагыг тодорхойлно ба түүний
платформоос өөрийн загвар болон атрибутийг сонгоно. Мөн таны вебсайтын хост домайн
болон бусад бүтцийн мэдээллийг өгнө.
Алхам 3: Вики хуудасны харагдацыг өөрчилж, засварлах
3.1. Шинээр веб хуудас үүсгэх, Text box, Images гэх мэтийг ашиглан агуулгуудыг веб
хуудсандаа оруулж болно.
3.2. Вебийн загварыг сонгох бол THEMES цэс рүү орж, гарч ирэх загваруудаас сонгож
болно. Энд бас өнгө, үсгийн фонт зэргийг өөрчлөх боломжтой. Мөн вэбийн харагдах байдал,
зэсний бүтэц, дизайн загвар зэргийг өөрчлөн хийнэ.

16. Зураг 12. Duda веб платформ веб платформ дээрх веб хуудас үүүэн байдал ба edit хийх хэсэг
Алхам 4: Нэг давуу онцлог нь duna side editor буюу html css devloment code editor өгснөөрөө
embed болон код ашиглан вебийг хөгжүүлэх боломж олгодог
Зураг 13. Duda веб платформ веб платформ дээрх веб code editor
Алхам 5: Веб шалгахдаа Preview хийж харна.

17. II. Вэб технологи дээр суурилсан цахим хэрэглэгдэхүүн боловсруулах
технологийн асуудлууд түүний шийдэл
Сэдвийн зорилго:
Цахим хичээл хэрэглэгдэхүүн боловсруулах технологи хөгжлийн чиг хандлагатулгарч буй
асуудал болон нээлттэйгээр хэрэглэж болох технологи шийдлийг судлах.
Зорилт:
Цахим хичээл хэрэглэгдэхүүн боловсруулах технологи болон хөгжлийн чиг хандлага ойлголт
авах, зураг техт болгон хөрвүүлэх, HTML, CSS, Script код задлах .
Үндсэн хэсэг
Е-сургалт е-хэрэглэгдэхүүнийг сургалтад нэвтрүүлснээр Е-технологи болон е-сургалтыг явуулах
өргөн боломж нээгдэх бөгөөд ач холбогдлын хувьд харьцангуй олон талтай боловч одоогоор
манай улсын хэмжээнд е-сургалтын хэлбэрийг онлайн болоод оффлайн цахим хэлбэ¬рийн
сургалтад ашиглаж байгаа ба сүүлийн үед веб дээр тулгуурласан технологи илүү хөгжиж байна.
Е-сургалтыг явуулах боломжийн хувьд зайн болон виртуал сургалт явуулах боломж маш өндөр
илүү үр ашигтай байх боломжтой. Учир нь сүүлийн жилүүдэд олон сум суурингууд дэд бүтэц
эрчим хүчний болоод мэдээлэл харилцаа холбооны нэгдсэн сүлжээнд холбогдоод байна. Энэ нь
е-хэлбэрийн сургалт явуулах техник технологийг бүрдүүлэх үнэтэй хүчин зүйл, суурь нөхцөл
болж байна.
Төрийн зүгээс цахим сургалтад анхаарал хандуулж хэд хэдэн хөтөлбөр гаргаж хэрэгжүүлсээр
ирсэн. Тухайлбал, 2002 онд “Зайн сургалтын үндэсний хөтөлбөр”, 2005-2012 онуудад “Цахим
Монгол үндэсний хөтөлбөр”, 2012-2016 онуудад “Нэг Монгол санаачилга” гэх зэрэг тодорхой
ажлуудыг нэрлэж болно. Гэвч шинэ эриний суралцагчдын эрэлт хэрэгцээг хангахуйц хууль эрх
зүй, хэрэгжүүлэх системийг цогцоор нь бий болгож хараахан чадаагүй байна. Ковид 19 вирусийн
тархалтын улмаас 2020 оны 2 дугаар сараас их дээд сургуулиуд, ерөнхий боловсролын сургууль,
сургуулийн өмнөх боловсрол зэрэг бүх шатны боловсролын байгууллагуудын танхимын үйл
ажиллагааг зогсоон, цахим болон алсын зайн сургалтын үйл ажиллагаанд шилжсэн нь цахим
хэрэглэгдэхүүний хэрэглээг бүх шатны боловсролд жинхэнэ утгаар нь нэвтрүүлэхэд том түлхэц
боллоо. Манай Улсын хувьд анх удаа урт хугацаанд “Цахим сургалт буюу алсын зайн сургалт”
явуулж байгаа нь боловсролын салбарт цахим шилжилт, шинэчлэлт хийх нэгэн том ажлыг
эхлүүлж байна[3]. Цахим сургалт нь дараагийн хөгжлийн төвшинрүү шилжиж тоон (дижитал),
нээлттэй боловсролын зарчмаар технологид суурилсан олон чиглэлээр хөгжих төлөв ажиглагдаж
байна. Иймээс цахим сургалт, цахим хэрэглэхүүнийг боловсруулахад, технологи түүний энгийн
хэрэглээ хөгжүүлэлт хийх боломж хөгжлийн өөрчлөлт чиг хандлагыг тодорхойлон судлах
шаардлагатай байна.
Цахим сургалтын хэлбэрүүдийг дунд ба их дээд сургуулиудад нэвтрүүлэх суурь нөхцөлүүдийн
нэг бол ерөнхий боловсролын сургуулийн сургалтад мэдээллийн технологи дээр суурилсан
цахим сургалтуудыг болон зайн сургалтуудыг явуулах, ийм хэлбэрийн сургалтын
хэрэглэгдэхүүнийг багш болоод сурагчдад эзэмшүүлэх зэрэг алхмуудыг системтэйгээр хийх
шаардлагатай байна. Манай улсад хэрэглэж буй www.econtent.edu.mn веб сурах бичгийг
хангалттай оруулсан ч цахим хэрэгсэл туршилтын ажил нь хэт хангалтгүй харилцах системгүй
гэх мэт дутагдалтай тал их байна. Иймээс https://phet.colorado.edu гэх зэрэг дэлхий нийтэд
ашиглаж буй цахим систем дээр тулгуурлан жишиг аван хөгжүүлбэл контентийн хувьд
сайжирна.

18. Иймээс цахим хэрэглэгдэхүүнийг насны ангилалд тааруулсан контентыг веб платформтой
аниматшин интерактив хэлбэрээр хөгжүүлэх нь ихээхэн ач холбогдолтой.
Цаг үеэ даган хөгжиж байгаа технологийн өөрчлөлт нь цахим хичээл хэрэглэгдэхүүнийг
ихэвчлэн веб технологи дээр тулгуурлан хийх чиг хандлагатай болж байна. Үүний дотор
платформ хамааралгүй веб технологи дээр суурилсан HTML5 JAVASCRIPT ашиглан хийсэн
хичээл цахим хэрэглэгдэхүүн зонхилох болоод байгаа. Жишээлбэл Колорадогийн Их
Сургуулийн Боулдерын PhET интерактив симуляци төсөл юм.
HTML5, Javascript технологиор боловсруулагдсан цахим хэрэглэгдэхүүнүүд нь хүртээмжтэй,
платформоос хамааралгүй, ажиллах хурд сайн, веб технологиудыг ашиглах боломжтой, уян
хатан, динамик шинжтэй зэрэг олон даваа талуудтай байдаг. Гэвч HTML5, Javascript технологиор
зураг объектыг текст болгон хөрвүүлж цахим хэрэглэгдэхүүн лаборатори хийхэд кодчилолд их
цаг шаардагддаг ба хөгжүүлэхэд хүн хүчний оролцоо их шаарддаг сул талтай. Веб платформ нь
серверээс хамааралтай байдаг ба зураг объектыг тодорхой серверээс ачаалдаг. Объект, зургийг
текст болгон дамжуулах нь энэ асуудлыг шийдэх нэг гарц юм. Base64 Decode, encode хөрвүүлэх
технологи ашиглан шийдвэрлэж болдог. Энэ нь үндсэн 64 цэгийн утгыг төлөөлж буй 64
тэмдэгтийн олонлог (Зураг 6). HTML5 технологийн веб хуудас нь JavaScript болон Base64
кодчилол болон декодчилтын функцийг агуулсан байдаг
Цахим хэрэглэгдэхүүн боловсруулах технологи
Харин цахим хичээл хэрэглэгдэхүүн хийх технологийн хувьд сүүлийн жилүүдэд веб
технологийн тодорхой хөгжлийн өөрчлөлтүүд нь цахим хичээл, хэрэглэгдэхүүн бэлдэж хийхэд
ихээхэн нөлөөлж илүү динамик уяан хатан программчилцгаах боломжийн олгосон билээ. XML,
CSS, HTML4, HTML5, Javascript, script гэх зэрэг программчлах технологи нь веб интерфейсийг
уяан хатан хөгжих боломжийг олгож байна.
Цахим хэрэглэгдэхүүн хичээл бэлдэх технологи нь бэлдэх арга барилын хувьд харьцангуй
ойлголт.
Цахим хичээл хэрэглэгдэхүүнийг бэлтгэхдээ дээрх хичээл лабораторийг бэлдэхдээ MS Excel,
Word, MS Power point, Flash, iSpring Suite, Quiz maker, Prezi, Adobephotoshop, Lecture Maker,
Articulate studio, Adobe Audition, Snagit, Macromedia Flash, Auto Run Design NetSupport School
Tutor Console Make Google view image button visible зэрэг программ хангамжууд хэрэглэгдэхээс
гадна ямар чиглэлийн виртуал хэрэглэгдэхүүн хичээл /лаборатори, хичээл, үзүүлэн симулашин
программ/ гэдгээс хамааран технологи өөр өөр байна. Ер нь цахим хэрэглэгдэхүүн, хичээл хийж
байсан чиг хандлагыг харахад цаг хугацаа технологийн хөгжлөөс хамааран цахим
хэрэглэгдэхүүн хичээл хийх чиг хандлага хэлбэр ихээхэн өөрчлөгдсөөр байна. Сүүлийн
жилүүдэд цахим хэрэглэгдэхүүн хийхэд агуулгыг ихээр анхаардаг болсон ба үүнээс шалтгаалан
программчилцгаах технологи, веб платформ болон Virtual reality, Augmented Reality программ
болон программчилцгаах технологиудыг ашиглаж байна.
Цахим хичээл лаборатори сургалтын материал хэрэглэгдэхүүн хийж байсан эхэн үедээ Power
point, Flash, iSpring Suite, Quiz maker, Prezi, Adobephotoshop, Lecture Maker, Articulate studio,
Adobe Audition, Snagit, Macromedia Flash гэх зэрэг программ түлхүү ашиглаж шууд боловсруулж
байсан боловч цахим файл бэлдэх явцад хичээлийн агуулагд илүү уяан хатан, динамик, нийтийн
нээлттэй шинж чанар шаардсаны улмаас программчлах технологи ашиглаж эхэлсэн. Өөрөөр
хэлбэл илүү олон үйлдэл хийх, хүртээмжтэй байх, өгөгдлийн сан бааз үүсгэх, математик
тооцоолол хийх зэрэг шинж чанаруудыг шаардаж эхэлсэн.
Цахим хэрэглэгдэхүүн, хичээл хийж байсан чиг хандлагыг харахад цаг хугацаа технологийн
хөгжлөөс хамааран цахим хэрэглэгдэхүүн хийх чиг хандлага хэлбэр ихээхэн өөрчлөгдсөөр байна.
Сүүлийн жилүүдэд агуулгыг ихээр анхаардаг болсон ба үүнээс шалтгаалан программчлах
технологи, веб платформ болон Virtual reality, Augmented Reality программ болон Real engine
программчлах технологиудыг ашиглаж байна.

19. Цахим хэрэглэгдэхүүн, хийхэд хичээлийн агуулаг илүү уяан хатан, динамик, нээлттэй шинж
чанар шаардсаны улмаас программчлах технологи илүү олон үйлдэл хийх, хүртээмжтэй байх,
өгөгдлийн сан бааз үүсгэх, математик тооцоолол хийх зэрэг шинж чанаруудыг шаардаж эхэлсэн.
Цахим хэрэглэгдэхүүн хийхэд интерактив тооцоолол тал руу энгийн хоёр хэмжээс объектоор
дүрслэн хийх эсвэл мультимедиа анимашин тал уруугаа зохиомжтой хийх гэсэн сонголт
тулгардаг.
Мөн сүүлийн жилүүдэд VR болон AR технологид суурилсан виртуал бодит байдал бүхий
цахим сургалтын хэрэглэгдэхүүнүүдийг боловсруулах нь ихсэж байна.
Жишээлбэл: Ухаалаг Утасны VR Сургалтын Систем буюу smart утсанд тулгуурласан AR
системийн судалгааны ажил байна.
Виртуал бодит байдал бүхий цахим хэрэглэгдэхүүнүүдийг боловсруулахад цаашдаа
технологийн хувьд үндсэн хоёр хэсэгт тулгуурлан хөгжүүлнэ.
1. Виртуал 3D технологиуд k engine, unity engine, unreal engine , maya, 3ds max, Revit,
fusion 360, 3D Animation гэх зэрэг 3D, VR технологи ашиглан виртуал орчин
үүсгэн хөгжүүлэх.
2. Нээлттэй хэлбэрийн веб технологи WebGL платформд, Unreal Engine Web Remote
Control, Stimulus JavaScript framework, HTML5, Javascript frame work зэрэг
технологийн хөгжүүлэлт хийгдэж байна.
Технологийн хөгжүүлэлтийн хувьд
· Java болон python суурьтай технологи веб дээр суурилсан интерактив, график анимэйшн,
симуляци
· Интертаймэнт 3D хэлбэрийн цахим хичээл, виртуал лаборатори, цахим
хэрэглэгдэхүүнийг веб платформтой болон оффлайн хэлбэрээр хөгжүүлж болохоор
харагдаж байгаа юм.
Цахим хэрэглэгдэхүүн виртуал лаборатори хөгжүүлэхэд интерактив, симулашин,
мультимедиа анимэйшн, гурван хэмжээс виртуал интертаймент орчинтой байх эсэх гэхчлэн олон
талаас нь харж төлөвлөх ба тухайн хэрэглээнд таарсан технологи, архитектур дизайн
боловсруулах болон авч ашиглан зохиол зохиомжийг хийх нь хөгжүүлэх ажиллагааг илүү
хялбаршуулна. Мөн VR орчин нь хэрэглэгчдэд илүү бодит мэдрэмж төрүүлэх, нэмэлт олон
боломжийг хөгжүүлэгчдэд олгодог.

20. Цахим хэрэглэгдэхүүн боловсруулах технологи, программ хангамж
Хүснэгт 1. Цахим хэрэглэгдэхүүн боловсруулах технологи, программ хангамжийн судалгаа
программ программын хэл платформ технологи
1 MS Power point action script 2.0 Web framework script
2 iSpring Suite action script 3.0 Javascript ашигаласан frame work Web
3 Prezi HTML, XML, CSS Python ашигаласан frame work VR, AR
4 Adobe photoshop HTML5 Stimulus JavaScript framework 3D
5 Articulate studio javascript Unreal Engine 4.26 Web Remote Control Виртуал
6 Macromedia Flash Python WebGL платформд Animation
7 Lecture Maker PHP Base64 Decode
8 Macromedia Flash visual, .NET nimify, unminify
9 Quiz maker Java
10 Web developer
11 AdobeIllustrator
12 k engine
13 unity engine
14 unreal engine
15 maya
16 CAD
17 3ds max
18 Revit
19 fusion 360
20 3D Animation
21 Adobe Animate
Цахим хэрэглэгдэхүүн боловсруулахад ямар шийдэлтэй байхаас хамаарч интерактив, график
анимэйшн, гурван хэмжээс виртуал интертаймент байхаар хийгдэх боломж байдаг. Сүүлийн
жилүүдэд Stimulus JavaScript framework, HTML5, Adobe animate, Javascript ашигласан frame
work, Django Web Framework зэрэг java болон python суурьтай технологи нь веб дээр суурилсан
интерактив, график анимэйшн, симуляци бүхий цахим хэрэглэгдэхүүн хөгжүүлэх боломж улам
бүр тэлж байна. Мөн WebVR, 3D, VR, AR технологиуд Web Remote Control-той болсон нь
интертаймэнт 3D хэлбэрийн цахим хичээл, виртуал лаборатори, цахим хэрэглэгдэхүүнийг веб
платформтой хөгжүүлж олон нийтийн хэрэглээнд өргөнөөр нэвтрүүлэх боломжийг бүрдүүлж
байна.
Технологийн хөгжилтэй зэрэгцэн цахим хэрэглэгдэхүүн хичээлийн хөгжүүлэлтийн орчин
технологи өөрчлөгдөн хөгжиж байгаач цахим хэрэглэгдэхүүний мөн чанар нь сургалтын
агуулгыг баяжуулах, хичээлийн зорилго зорилтыг оюутан суралцагч нарт бүрэн хүргэхэд
чиглэсэн байх ёстой.

21. Цахим хичээл хэрэглэгдэхүүн боловсруулалт ба веб технологи дээрх шийдэл
Мөн боловсруулж буй цахим сургалтын систем болон веб хуудсандаа интерактив, мультимедиа
анимашин хэсэг оруулах зэрэг веб технологид тулгуурласан шийдлүүд ихээхэн тулгардаг.
2015 оноос цахим сургалтын тухай асуудлыг зөвхөн их дээд сургуулиуд биш бусад боловсролын
байгууллагууд анхаарч веб технологи дээр суурилсан хичээлүүдийг түлхүү боловсруулсан ба
НҮБ-ын Хүүхдийн Cан, НҮБ-ын Хариу Aрга Xэмжээ, Нөхөн Cэргээх Сангийн дэмжлэгтэйгээр
Боловсрол, Шинжлэх Ухааны Яам, Боловсролын Мэдээллийн Технологийн Төв хөгжүүлж буй
www.econtent.edu.mn вебд сурах бичиг интерактив цахим хэрэглэгдэхүүн байршуулж эхэлсэн.
Ерөнхий боловсролын сургалтад цахим хэрэглэгдэхүүний контентыг веб платформ ашиглан
боловсруулах боломж шаардлагыг харан вебд суурилсан цахим хэрэглэгдэхүүн контеныг
судалсан бөгөөд дэлхийн нийтээр ашиглаж буй томоохон контентууд түүний технологи
шийдлийг харьцуулан судалж
https://phet.colorado.edu/en/, http://physics.bu.edu/edu гэх зэрэг цахим системээс жишиг аван
HTML5, Script технологи дээр тулгуурлан контентыг хөгжүүлэх боломжтой гэж үзсэн.
Нийтийн боловсрол болон ерөнхий боловсрол зориулсан цахим хичээл хэрэглэгдэхүүнийг
ихэвчлэн веб технологи дээр тулгуурлан хийж байна. Үүний дотор платформ хамааралгүй веб
технологи дээр суурилсан HTML5 JAVASCRIPT ашиглан хийсэн хичээл цахим материал
зонхилох боллоо.
Tухайн хичээл, хэрэглэгдэхүүнийг хийхэд технологийн шийдлүүд зохиомж дизайн болон
агуулгыг эхнээс нь зөв зохистой төлөвлөсөн байх шаардлага үүсдэг. HTML5, Javascript ашиглан
хийсэн хичээл хичээлийн хэрэглэгдэхүүн нь олон нийтийн хүртээмжтэй, платформ хамааралгүй,
хэмжээ бага, ажиллагаа хурдан, веб технологиудыг ашиглах боломжтой, уяан хатан динамик
шинжтэй гээд маш олон даваа тал бүрдэх юм. Гэвч HTML5, Javascript ашиглан зураг объектыг
текст болгон хөрвүүлж цахим хэрэглэгдэхүүн лаборатори хийхэд кодчилол, зураг нь хэт их байх
ба хөгжүүлэхэд багаар буюу хүн хүчний оролцоо их байхаар байдаг.
Технологийн хувьд маш энгийн мөн онлайн болон оффлайн ажиллах боломжтой ба та
интернеттэй орчинд тухайн хичээлд нэг удаа бүрэн хандахад болно. Бидний хэрэглэж буй
компьютер болон терминалуудын браузер/интернет хөтөч/ нь ихэвчлэн хейбер текст болон
скриптуудийг хөрвүүлж хэлбэржүүлэн харуулдаг. Энэ тохиолдол веб платформ сервер
хамааралтай буюу зураг объектыг тодорхой серверээс ачаална. Үүнийг шийдэх шийдэл нь
объект зургийг текст болгон дамжуулах явдал бөгөөд Base64 Decode, encode хөрвүүлэх
технологи энэ асуудлыг шийдсэн. Энэ нь үндсэн 64 цэгийн утгыг төлөөлж буй 64 тэмдэгтийн
олонлог. Жишээ нь UTF-7 юм. HTML5 технологийн веб хуудас нь JavaScript болон Base64
кодчилол болон декодчилтын функцийг агуулсан байдаг.
Жишээлбэл
Зургийг дурын png to base64 converter ашиглан хөрвүүлж болно.
Энэ жишээнд https://onlinepngtools.com/convert-png-to-base64 цахим хуудсыг ашиглан
хөрвүүлсэн

22. Зураг 14. Үндсэн зураг ба base64 converter ашиглан хөрвүүлсэн зураг хөрвөсөн кодын хэсэг.
Зургийг текст болгон хөрвүүлснээр вебийг хурдасгаад зогсохгүй сервер хамааралгүй болгож
байна.
Жишээлбэл энгийн HTML веб хуудас хийн туршъя
Зураг 15. Жишээ вебийн код
Энэ тохиолдолд as.png үндсэн зураг байгаа бол хоёр дахь зураг нь base64 converter ашиглан
хөрвүүлсэн зураг буюу хөрвөсөн кодын юм.

23. Зураг 16. Жишээ веб дээр үдсэн зураг болон хөрвөсөн зургийн харагдах байдал
Туршилт хийх зорилгоор хэд хэдэн вебийн зургийг хөрвүүлсэн билээ.
Хүснэгт 2. base64 converter ашиглан хөрвүүлсэн текстийн хэмжээ
Зураг 16. Base64 Decode ашиглан хөрвүүлсэн png зураг хөрвөсөн хэмжээний ялгаа
№ Зургийн хэмжээ/kb/ Текстийн хэмжээ/kb/ Зургийн нягт/pi/
1 38 51 72
2 26.7 35.6 96
3 30.9 41.2 120
4 29.8 39.8 150
5 39.1 52.1 150
6 45 60 160
7 29.7 39.6 200
8 34.2 47.5 300
0
100
200
300
400
1 2 3 4 5 6 7 8
Зургийн хэмжээ/kb/ Текстийн хэмжээ/kb/
Зургийнн нягт/pi/

24. Зургийн хэмжээнээс хамаарч хөрвөсөн текст 10-20 орчим хувиар хэмжээ нэмэгдэх боловч текст
болон хөрвөсөн зураг сервер хамааралгүй учраас хэд дахин хурдан ачаалах юм.
Томоохон цахим хэрэглэгдэхүүн веб хөгжүүлэгчид тухайлбал www.phet.colorado.edu гэх зэрэг
веб нь нээлттэй кодчиллын архитектуртай байгаа нь тэдний хийсэн симуляцуудаас харагддаг.
Өөрөөр хэлбэл нэг тулгуур кодчиллын дизайныг боловсруулан түүндээ тулгуурлан
симуляцуудаа хийсэн байна гэж харагдахаар байгаа юм. Ингэж симуляцыг боловсруулахад нэг
төвөгтэй асуудал тулгарч байгаа нь хэт их мөр кодчилол бөгөөд онлайнаар хандахад веб браузер
дээр хэт их ачаалал өгнө гэсэн үг юм.
HTML5, Javascript хийсэн цахим хэрэглэгдэхүүн симуляц нь тухайн нэг хандалтаар веб нь таны
компьютерын веб хөтөч дээр бүрэн ачаалагдах буюу кешлэгдэж хадгалагдана. Ингэж хийсэн нь
ч илүү оновчтой буюу интернет хамааралгүй онлайн хэлбэрээр ажиллах боломж олгодог. Их
хэмжээний кодчиллын ачааллыг шийдэхийн тулд nimify, unminify буюу кодыг нэгтгэх /шахах/,
задлах технологийг ашиглах юм.
Жишээлбэл https://phet.colorado.edu/sims/html/balancing-act/latest/balancing-act_mn.html
Тэнцвэрийн хууль симулаш
Зураг 17. Колорадогийн Их Сургуулийн Боулдерын PhET интерактив симуляци Тэнцвэрийн хууль

25. Зураг 18. Unminify код задлагч
Харин https://www.minifier.org/ minify ашиглан шахсан код нь 1100 орчим мөр код болж байна.
Зураг 19. Note++ ашиглан кодны хэсгээс харуулав
Энгэснээр тухайн вебийн хамгаалалт болоод зогсохгүй ажилгаал маш хурдан болгодог.
Өөрөөр хэлбэл www.phet.colorado.edu-ийн симуляцуудын хувьд эхэнх нь 32000-60000 мөр код
болж байгаа ба түүнийг minfy ашиглан шахахад 500- 600 орчим мөр код болон багасна.

26. Зураг 20. https://phet.colorado.edu HTML5 ашиглан хийсэн тоглоомын хэсэг.
/Дүрс зурыг Base64 Decode ашиглан хөрвүүлжээ кодыг шахжээ./
Шахах гэдэг ойлголт нь кодыг багасгах гэхээс илүү мөрүүдийг нэгтгэнэ гэсэн үг ба мөр
багассанаар процессорын тасалдал багсан тухайн код маш хурдан ачаалах болно. Дээрх
технологиудтай холбоотой хэд хэдэн туршилтыг хийн үр дүнг тусгасан бөгөөд туршилтаа 32000
дээш мөр код бүхий код ихтэй, зураг агуулсан энгийн, JavaScript-ээс бүрдсэн гэх мэт онцлог
шинжүүдийг агуулсан вебээр хэд хэдэн удаа туршилтыг хийснийг голч үзүүлэлтийг орууллаа.
Дээрх технологиудтай холбоотой хэд хэдэн туршилтыг хийн үр дүнг тусгасан бөгөөд туршилтаа
32000 дээш мөр код бүхий код ихтэй, зураг агуулсан энгийн, JavaScript-ээс бүрдсэн гэх зэрэг
онцлог шинжүүдийг агуулсан вебээр хэд хэдэн удаа туршилт хийсэн.
 Туршилт хийхдээ HTML5, Javascript-ээс бүрдсэн
 HTML, CSS-ээс бүрдсэн зураг агуулсан статик
 Энгийн Javascript-ээс бүрдсэн гэх гурван янзаар туршиж үзсэн.
Хүснэг 3.Gtmetrix ашиглан хурд тодорхойлсон вэб
№ Гүйцэтгэл Хуудасны мэдээлэл
Хуудасны
хурдны YSlow Score
Бүрэн ачаалах
хугацаа/сек/
Хэмжээ /Kb/
Requests
1 93% 79% 19 55.4 14
2 99% 97% 1.4 54.8 3
3 97% 97% 1.3 22.5 3
4 99% 99% 0.8 12.2 2
5 84% 91% 3.7 1.16 7
6 81% 86% 5.2 1.21 7
1. http://203.217.139.35/blue99/index.html энгийн статик вэб HTML,CSS, зургаас бүрдсэн сервер
дээр байршуулсан байдал, 94 мөр код
2. http://203.217.139.35/blue100/index2.html энгийн статик вэбийг Base64 Decode ашиглан
зургийг текст болгон, minify ашиглан HTML,CSS кодыг шахсан байдал

27. 3. http://203.217.139.35/gerel/1.html энгийн Javascript-ээс бүрдсэн зургийн файлтай вэб
4. http://203.217.139.35/gerel/2.html Javascript кодыг minify ашиглан шахсан ба зургийг Base64
Decode ашиглан текст болон хөрвүүлсэн байдал
5. http://203.217.139.35/tentsver/web1.html HTML Javascript-ээс бүрдсэн minify ашиглан шахсан
симулашин вэб, 596 мөр код
6. http://203.217.139.35/tentsver/web2.html html, HTML
Зураг 21.Gtmetrix ашиглан хурдь ачааллыг тодорхойлсон
Дээрх туршилтаас харахад онлайн веб хэлбэрээр хөгжүүлж буй симулашин хэлбэрийн хичээлийн
хэрэглэгдэхүүн нь HTML5, JavaScript кодчиллоор дээрх технологийг ашиглан хийх нь илүү үр
дүнтэй нь харагдаж байна. Өөрөөр хэлбэл энгийн вебийн хувьд зургийг текст болон хөрөөлөн
нийт кодыг шахахад тус веб 13 секундээр хурдан ачаалж байгаа юм. Энэ нь их хэмжээтэй код
зургаас бүтсэн вебийн ачаалах хурдад ихээхэн нөлөөлөх нь харагдаж байна /Зураг21-22/.
Зураг 22. PageSpeed insights-Google Developers ашиглан урсгал, JavaScript гүйцэтгэл
Дээрх технологийг ашиглан цахим хичээл хэрэглэгдэхүүнийг хөгжүүлэхэд тулгарч буй асуудал
нь бэлэн нээлттэй кодын дизайн авч ашиглан хөгжүүлэх үгүй бол өөрсдийн кодын дизайн бүтээх
мөн цахим хэрэглэгдэхүүн хөгжүүлэх нийтлэг дизайн бүтээн хөгжүүлэх явдал юм. Цахим
хэрэглэгдэхүүн хөгжүүлэхэд кодчиллын дэвшилтэд технологиуд ашиглан нээлттэй вебд
суурилсан интерактив хэлбэрээр хөгжүүлэх нь олон нийтийн хэрэглээнд нэвтрэх, суралцагч
сургалтын хэрэглэгдэхүүн болгон нээлттэй ашиглах, цахим хэлбэрээр суралцах идэвх сонирхлыг
нэмэгдүүлэх ба цахим хэрэглэгдэхүүн, виртуал лабораторийн симуляц хөгжүүлэхэд тулгарч буй
асуудал нь кодын дизайн, архитектур дизайн бүтээх асуудал гэж үзэж байна.
Е-сургалт е-хэрэглэгдэхүүнийг сургалтад нэвтрүүлснээр Е-технологи болон е-сургалтыг явуулах
өргөн боломж нээгдэх бөгөөд ач холбогдлын хувьд харьцангуй олон талтай. Манай улсын
хэмжээнд е-сургалтын хэлбэрийг онлайн болоод оффлайн цахим хэлбэрийн сургалтад ашиглаж
байгаа ба сүүлийн үед веб дээр тулгуурласан технологийг илүү хөгжүүлэн ашиглаж байна.
0%
50%
100%
150%
1 2 3 4 5 6
Хуудасны хурдны YSlow Score
0
20
40
60
1 2 3 4 5 6
Бүрэн ачаалах хугацаа/сек/ Хэмжээ /Kb/

28. Цахим хэрэглэгдэхүүн боловсруулах шийдлээсээ хамаарч интерактив эсвэл график анимашин
талдаа хийгдэх боломж өндөр байгаач сүүлийн жилүүдэд Stimulus JavaScript framework, HTML5,
Javascript ашигласан frame work, Django Web Framework (Python) зэрэг java болон python
суурьтай frame work нь веб дээр суурилсан интерактив, график анимашин, симуляци бүхий
цахим хичээлийн хэрэглэгдэхүүн хөгжүүлэх боломжийг би болгож байна. Мөн интертаймент 3D,
VR, AR технологиуд ч Web Remote Control болсон нь интертаймэнт 3D хэлбэрийн хичээлийн
цахим хэрэглэгдэхүүнийг веб платформтой хөгжүүлж олон нийтийн хэрэглээн өргөнөөр
нэвтрүүлэх болом бүрдээд байна. Тиймээс бид цаашид илүү өндөр төвшний интерфейстэй уяан
хатан хэрэглээнд хялбар нэвтрэх хичээлийн хэрэглэгдэхүүн хөгжүүлэх боломжийг илэрхийлэх
болно.
Виртуал хэрэглэгдэхүүн, симуляць лабораторийг хөгжүүлэхэд тулгарч буй асуудал нь бидний
хувьд бэлэн кодын дизайн авч ашиглан хөгжүүлэх үгүй бол өөрсдийн кодын архитектур дизайн
бүтээх явдал юм.
Зураг 23. Төсөөлж буй ерөнхий дизайн

29. Вебийн Framework
Өнөөдөр цахим сургалт сургалтын хэлбэрүүд түүний хэрэглэгдэхүүнийг ихээр ярих болжээ.
Мөн түүнчлэн их дээд сургуулиудад цахим сургалтын төрөл, хэрэглэгдэхүүнийг ихээр
нэвтрүүлж байна.
Цахим сургалтын орчинг олон хэлбэр бий болсноор оюутнуудын сурах арга барилд эерэгээр
нөлөөлөх боломжтой.
Энэ үүднээсээ нийтийн нээлттэй цахим систем хэрэглэгдэхүүн хийхэд веб платформ ихээр
ашиглаж байгаа нийллэг ашиглагддаг framework-ууд нь веб хийхэд хялбар ашиглахад амар
болсон.
Вебийн Framework гэж юу вэ?
Framework нь веб хийхэд танд хэрэгтэй бүх зүйлийг бүтээхэд ашиглаж болох Lego хэсгүүдийн
эвлүүлэхтэй адил өөрөөр хэлбэл бүтээгдэхүүнийг бий болгоход ашигладаг програм хангамжийн
үндсэн модуль, хэрэгсэл, сангийн багц бүхий платформ юм.
Framework ашиглах давуу талууд
Ихэнх хөгжүүлэгчид яагаад Framework-д найддаг вэ?
Товчхондоо, эдгээр нь веб төслүүдийг бий болгох, дэмжих ажлыг хялбаршуулдаг.
Веб хөгжүүлэлтийн Framework ашигласнаар
Эдийн засгийн үр ашиг
Бизнесийн үүднээс авч үзвэл, Framework дээр суурилсан веб хөгжүүлэх нь цаг хугацааг ихээр
хэмнэнэ, бага зардлаар веб хөгжүүлэх боломжийг олгоно..
· Хөгжүүлэлт. Framework нь хөгжүүлэгчид төслийн вебийг хурдан бий болгохын тулд
урьдчилан бичсэн загвар, хэрэгслийг ашигладаг бөгөөд ингэснээр цаг хугацаа ихээхэн
хэмнэдэг.
· Найдвартай байдал, аюулгүй байдал. Бэлэн бүрэлдэхүүнийг олон мянган хөгжүүлэгчид
сайжруулсан бөгөөд энэ нь тэдгээрийг бүх боломжит хувилбаруудад турсан гэсэн үг.
Мөн аюулгүй байдал хамгаалалт ч сайн байдаг.
Техникийн ашиг тус
· Хялбаршуулсан засвар үйлчилгээ. Framework нь програм хөгжүүлэх нэгдсэн бүтцийг
тодорхойлдог тул фреймворк дээр суурилсан програмуудыг хадгалах, боловсронгуй
болгох нь илүү хялбар байдаг: аливаа хөгжүүлэгч програмын бүрэлдэхүүн хэсгүүдийн
стандарт зохион байгуулалт, түүний үйл ажиллагааны зарчмуудын талаар амархан
ойлголттой болж, функционал байдал, өөрчлөлтийг саадгүй нэмж чаддаг.
· Илүү сайн гүйцэтгэл. Framework-д суурилсан шийдлүүд нь илүү хурдан ажиллах
хандлагатай байдаг бөгөөд энэ нь eCommerce шийдлүүдийн хувьд шийдвэрлэх ач
холбогдолтой ачааллыг нэмэгдүүлэх боломжийг олгодог . Тэдгээрийг хялбархан
өргөжүүлэх боломжтой.

30. Frontend ба Backend веб хүрээ
Аливаа веб програм нь сервер талын хэсэг, үйлчлүүлэгч талын хэсгээс бүрдэнэ.
 Frontend веб хүрээ нь хэрэглэгчийн интерфейсийг хариуцдаг, өөрөөр хэлбэл эцсийн
хэрэглэгчидтэй харьцдаг вебсайт эсвэл програмын харагдах хэсэг юм. Эдгээр нь HTML,
CSS, JavaScript зэрэг програмчлалын хэл дээр суурилсан бөгөөд UX / UI дизайн, загвар,
кодын хэсэг, SEO оновчлол, хэрэглэгчийн харилцан үйлчлэлийн менежмент гэх мэт
асуудлыг шийддэг.
 Backend веб хүрээ нь хөгжүүлэгчидтэй харьцдаг вебийн хэсгийг хариуцдаг. Эдгээр нь
сервер ба мэдээллийн баазын үйл ажиллагаа, шийдлийн логик ба архитектур,
чиглүүлэлтийн протокол, өгөгдлийн аюулгүй байдал, зөвшөөрлийн сонголтууд гэх мэт
асуудлыг шийддэг. Эдгээр платформууд нь .NET , Ruby, Python, Java, PHP зэрэг
програмчлалын хэл дээр суурилдаг .
Архитектурын хэв маяг
Веб хөгжүүлэх хүрээ нь архитектурын төрөл, тэдгээрийн бүрэлдэхүүн хэсгүүдийн зохион
байгуулалт, харилцан үйлчлэл зэргээс хамааран хэд хэдэн бүлэгт хуваагдана. Framework
мэддэггүй хөгжүүлэгчид хүртэл архитектурыгг мэдээд хэрхэн ажилладгийг амархан ойлгодог.
Дараах гурван нийтлэг аархитектурын хэв маяг байна.
 MVC (Model-View-Controller). Ихэнх хүрээ нь MVC архитектурын загварыг ашигладаг.
Энд програмын өгөгдөл, хэрэглэгчийн интерфейс, бизнесийн логикийг загвар, харах,
хянах гэсэн гурван тусдаа хэсэгт хуваадаг. Бүрэлдэхүүн хэсэг бүрийг бие даан өөрчилж
болно.
 MVVM (Model-View-ViewModel). Энэхүү архитектурт загвар, үзэл бодлыг хувааж, тусад
нь өөрчилж болно. MVVM загвар нь гурван хэсгээс бүрдэнэ.
Загвар нь өгөгдөлтэй ажиллах логик бүтэц бөгөөд програмыг ажиллуулахад шаардагдах үндсэн
өгөгдлийн тодорхойлолт юм.
 Харах, график интерфейс (цонх, lists, buttons гэх мэт) юм.
 ViewModel бол View-ийн хийсвэрлэл бөгөөд Загварын өгөгдөлд зориулагдсан багц юм.
Энэ нь View руу хөрвүүлсэн загвар ба View-д ашиглаж болох командуудыг агуулдаг.
 Гурван шатлалт байгууллага. Энэхүү архитектуртай програмууд нь гурван давхаргатай:
үйлчлүүлэгч, програмын сервер (клиент програм холбогдсон) ба мэдээллийн баазын
сервер (програмын сервер ажилладаг).
Хамгийн алдартай Web Development Frameworks
Express
Django
Ruby on Rails
Laravel
Spring
Angular
Vue
Ember
React
jQuery

31. Даалгавар ажил
Ажлын зорилго:
1. Энгийн png зургийг текст болгон хөрвүүлэн веб хуудсанд ашиглаж турших.
2. HTML, CSS, Javascript кодоос бүрдэх вебийн кодыг задлах функцийн бүтцийг
харах.
· Ашиглах програм хангамж/техник хангамж, бусад хэрэглэгдэхүүнүүд:
 base64 converter
 Unminify код задлагч