មាតិកាមេរៀន
- មេរៀនទី១៖ ការណែនាំអំពីការអភិវឌ្ឍវេប
- មេរៀនទី២៖ លក្ខណៈទូទៅនៃវេបសាយមួយ
- មេរៀនទី៣៖ មូលដ្ឋាននៃ HTML
កាលពីសប្ដាហ៍មុន យើងបានជជែកអំពីទំព័រឥតប្រែប្រួល, ទំព័រឌីណាមិក, server-side, client-side។ល។ នៅមេរៀនក្នុងសប្ដាហ៍នេះ យើងនឹងនិយាយអំពីលក្ខណៈទូទៅនៃវេបសាយមួយ។
ហេតុអ្វីបានជាយើងត្រូវដឹងអំពីវា? ឲ្យខ្ញុំសាកល្បងពន្យល់បែបនេះ។ ទោះបីជាយើងធ្វើវេបសាយបែបណាក្ដី ក៏វាត្រូវមានលក្ខណៈរួមមួយដែលមិនអាចចៀសបាន ទោះបីលក្ខណៈនោះត្រូវបានលើកយកមករៀបចំទៅតាមសណ្ឋានខុសៗគ្នាម្ដេចក្ដី។ វាក៏មិនខុសអីពីមនុស្សយើងដែរ។ បើគេសួរយើងថា ចូររកលក្ខណៈរួមរបស់មនុស្ស? នោះយើងនឹងឆ្លើយថា មានក្បាល ដៃ ជើង ដងខ្លួន និងអវៈយវៈលម្អិតដទៃទៀតដូចជាច្រមុះ ភ្នែក សក់ អណ្ដាត។ល។ ប៉ុន្តែការបង្ហាញនៃអវៈយវៈទាំងអស់នោះ វាអាចមានសណ្ឋានខុសៗគ្នា។ មានអ្នកខ្លះក្បាលស្រួច ដៃខ្លី ជើងធំៗ មាឌធាត់ ច្រមុះស្រួច សក់ពណ៌ត្នោត អណ្ដាតទាល។ល។ គឺវាយ៉ាងដូច្នេះឯង។
ឥឡូវយើងត្រឡប់មកនិយាយអំពីមេរៀនវិញ ដូចខ្ញុំបានពន្យល់ពីខាងលើមកហើយថា ការរចនាវេបសាយវានៅតែមានលក្ខណៈទូទៅ (ឬលក្ខណៈរួម) ដែលមិនអាចចៀសបាន ប៉ុន្តែការលើកយកមកបង្ហាញអាចមានសណ្ឋានខុសៗគ្នា ហើយវាខុសបន្តិចពីឧទាហរណ៍អំពីអវៈយវៈត្រង់ថាវាអាចមានការថែមថយទៅតាមតម្រូវការ ឬទៅតាមការពេញចិត្តរបស់អតិថិជន។
និយាយយ៉ាងខ្លីទៅចុះ លក្ខណៈទូទៅ (ឬលក្ខណៈរួម) នៃវេបសាយមួយមាន៖
- ក្បាល (ផ្នែកលើ)
- ខ្លួន (ផ្នែកមាតិកា ឬ ផ្នែកកណ្ដាល)
- ចំហៀង (ផ្នែកដែលស្ថិតនៅឆ្វេងឬស្ដាំ, ជាដៃ?)
- ជើង (ផ្នែកក្រោម)
ការបែងចែកផ្នែកទំព័រ
ពីត្រង់នេះទៅ យើងនឹងជជែកអំពីការបែងចែកផ្នែកនៃទំព័រដោយផ្អែកលើលក្ខណៈរួមដែលខ្ញុំបាននិយាយពីខាងលើ។
ចំណាំ៖ អ្វីដែលខ្ញុំនិយាយនៅក្នុងមេរៀននេះ គឺផ្អែកទៅលើបទពិសោធន៍ផ្ទាល់ខ្លួន លក្ខណៈទូទៅដែលគេរៀបរាប់ក្នុងឯកសារកន្លងមកដែលខ្ញុំបានអាន និងផ្អែកលើការវិភាគដោយខ្លួនឯងទៅលើវេបសាយមួយចំនួនដែលខ្ញុំបានចូលមើល។ ចាំក្នុងចិត្តថា សមាសភាគដែលស្ថិតនៅក្នុងផ្នែកនីមួយៗ វាអាចខុសៗគ្នាពីប្រភេទវេបសាយមួយទៅមួយទៀត។
ផ្នែកលើ (Header)
នៅត្រង់ផ្នែកក្បាលនេះ ជាកន្លែងសម្រាប់បង្ហាញឲ្យឃើញអំពីរឿងសំខាន់ពីរ៖
- អត្តសញ្ញាណនៃវេបសាយ (ឡូហ្គោ, ឈ្មោះ, …)
- ការនាំទិស (ម៉ឺនុយ, ការស្វែងរក, …)
ហើយជាទូទៅគឺវាត្រូវមានរបស់ពីរហ្នឹងស្ទើរតែមិនដែលបាត់ម្ដងណាសោះ។ គេអាចបន្ថែមសមាសភាគផ្សេងទៀតដូចជា៖ ការផ្សាយពាណិជ្ជកម្ម, រូបភាពផ្សេងៗ, ប៊ូតុងបណ្ដាញសង្គម។ល។ ចំណែកម៉ឺនុយដែលស្ថិតនៅក្នុង “ការនាំទិស” វាអាចមានច្រើនប្រភេទទៅតាមការកំណត់ ដូចជាម៉ឺនុយសម្រាប់ទំព័រទូទៅ, ម៉ឺនុយអត្តសញ្ញាណ (អំពីយើង, ទាក់ទងយើង, …), ម៉ឺនុយសម្រាប់ចូលគណនីនិងចុះឈ្មោះ។ល។
ទម្រង់នៃការរចនាផ្នែកក្បាល
ការរៀបចំផ្នែកក្បាលនេះ ក៏វាអាស្រ័យទៅតាមអ្នកធ្វើនីមួយៗ ដូចដែលខ្ញុំបាននិយាយសង្កត់ពីខាងលើមក។ ទម្រង់នៅខាងក្រោមទាំងអម្បាលគឺជាសណ្ឋានទូទៅដែលគេតែងតែប្រើប្រាស់ជាគោល ដើម្បីទៅរកការរៀបចំដែលពោរពេញទៅដោយការច្នៃប្រឌិតដទៃទៀត។
មាតិកា (Main Content)
ផ្នែកមាតិកា ឬ Main Content ផ្ដោតជាសំខាន់លើព័ត៌មានចម្បងដែលអ្នកចង់បង្ហាញទៅឲ្យអ្នកអាន អាចមាន៖
- រូបភាពស្លាយ
- បញ្ជីអត្ថបទថ្មីៗ
- ខ្លឹមសារឬអត្ថបទលេចធ្លោ (អត្ថបទដែលគេចូលមើលច្រើន, ការផ្សាយពាណិជ្ជកម្ម, ព័ត៌មានសំខាន់ៗ)
- ការទាញអារម្មណ៍អ្នកអាន (ការចុះឈ្មោះតាមដានព័ត៌មានថ្មីៗ, សំណូមពរធ្វើវិភាគទាន, សម្រង់សម្ដីរបស់អតិថិជនចំពោះសេវាកម្ម, សេវាកម្មថ្មីៗ, …)
- និងចំណុចផ្សេងៗជាច្រើនទៀត តម្រូវទៅតាមគោលដៅរបស់វេបសាយឬស្ថាប័ន។
ការរចនាដ៏សាមញ្ញមួយចំពោះផ្នែកមាតិកា៖
ចំហៀង (Sidebar)
ផ្នែកចំហៀងប្រើសម្រាប់បង្ហាញព័ត៌មានមួយចំនួនដែលគួរតែមានវត្តមាននៅតាមបណ្ដាទំព័រនានា៖
- បញ្ជីអត្ថបទឬព័ត៌មានថ្មីៗ
- ការផ្សាយពាណិជ្ជកម្ម
- រូបភាពស្លាយមួយចំនួន
- ព័ត៌មានលេចធ្លោដែលគួរឃើញនៅគ្រប់ទំព័រ
វាអាចមានអ្វីប្លែកផ្សេងពីនេះទៀតទៅតាមការចូលចិត្តនិងតម្រូវការរបស់អ្នក។
ឧទាហរណ៍នៃផ្នែកចំហៀង៖
ផ្នែកក្រោម (Footer)
សម្រាប់ផ្នែកក្រោមនេះវិញ ជាទូទៅយើងអាចឃើញគេប្រើព័ត៌មានខុសៗគ្នា ហើយក្នុងនោះមានដូចជា៖
- បញ្ជីម៉ឺនុយនាំទិស៖ ប្រសិនបើម៉ឺនុយនៅខាងលើមានបញ្ជីធ្លាក់ (dropdown) គេនឹងបង្ហាញក្នុងភាពស្មើតែម្ដង គឺរាយបង្ហាញទាំងអស់ ដោយគ្មានបាច់ត្រូវប្រើបញ្ជីធ្លាក់ទៀតនោះទេ។
- ព័ត៌មានអំពីសិទ្ធិប្រើប្រាស់មាតិកា និងការរក្សាសិទ្ធិមាតិកា។
- ព័ត៌មានទាក់ទង, អាសយដ្ឋាន, ផែនទី។ល។
ខ្ញុំនឹងរៀបចំផ្នែកក្រោមនេះយ៉ាងសាមញ្ញដូច្នេះ៖
ផ្គុំចូលគ្នា
ឥឡូវយើងសាកផ្គុំផ្នែកទាំងបួននេះចូលគ្នា តើយើងនឹងបានលទ្ធផលយ៉ាងដូចម្ដេចដែរ?
ទែនៗ តែប៉ុណ្ណេះយើងបានរូបរាងវេបសាយយ៉ាងធម្មតាមួយស្រេច!
នេះគ្រាន់តែជាការបង្ហាញដ៏ត្រួសៗអំពីផ្នែកនីមួយៗ ឬអាចថាជាការណ៍ដែលខ្ញុំផ្ដល់គំនិតគោលៗសម្រាប់អ្នកទាំងអស់គ្នា ទុកធ្វើជាទុនពង្រីកទៅថ្ងៃក្រោយទៀត។ ចងចាំថា ការរចនាវេបសាយ តែងតែមានភាពខុសប្លែកគ្នាពីមួយៗទៅ ទោះបីមានការប្រើប្រាស់ផ្នែកទាំងបួនដូចគ្នាមែន ក៏សមាសភាគនៅក្នុងនោះមានលក្ខណៈខុសគ្នាដែរ ពីព្រោះថាយើងត្រូវធ្វើឲ្យស្របទៅតាមកាលៈទេសៈ ប្រភេទ និងការពេញចិត្តឬគំនិតរបស់ភ្ញៀវ។
ការជ្រើសរើសទំហំសមស្រប
មុនពេលកម្រើកចុងម្រាមចុចសរសេរកូដឬរចនារូបរាងវេបសាមួយ ចំណុចមួយក្នុងចំណោមចំណុចដំបូងៗដែលយើងត្រូវគិតនោះគឺ «ការជ្រើសរើសទំហំសមស្រប» មួយ។ ហេតុអ្វី? បើប្រើឧទាហរណ៍ថា មុនពេលយើងកាត់ខោអាវ យើងត្រូវតែវាស់រាងរៅរបស់ភ្ញៀវ សួរចិត្តភ្ញៀវ ប្រើគំនិតច្នៃប្រឌិតដើម្បីបំប្លែងគំនិតរបស់ភ្ញៀវឲ្យទៅម៉ូតខោអាវដែលគេពេញចិត្ត និងផ្ដល់សេចក្ដីណែនាំទៅឲ្យភ្ញៀវវិញប្រសិនបើអ្នកគិតថាវិធីណាមួយល្អសម្រាប់ពួកគេ។ ទំហំវេបសាយនេះក៏អ៊ីចឹងដែរ។
ការជ្រើសរើសទំហំរបស់វេបសាយ (ផ្ដោតសំខាន់លើប្រវែងកាត់ទទឹង – width) ហើយការសម្រេចចិត្ត ត្រូវជាប់ទាក់ទងនឹងអត្តសញ្ញាណឬប្រភេទនៃវេបសាយមួយនោះ។ ពោលគឺមិនមែនគ្រប់វេបសាយសុទ្ធតែត្រូវមានទំហំដូចៗគ្នានោះទេ ហើយទំហំនោះទៀតសោតក៏ត្រូវតែសមស្របទៅកាលៈទេសៈ។
នៅត្រង់នេះ ខ្ញុំនឹងនិយាយដោយខ្លីអំពីទំហំមួយចំនួនដែលគេតែងតែនិយមប្រើ៖
- 960px – 980px៖ ជាទំហំមួយដែលសមល្មម (បំផុត) សម្រាប់អេក្រង់ដែលមានគុណភាពបង្ហាញ (screen resolution) ចាប់ពីប្រវែងកាត់ទទឹង 1024px ឡើងទៅ។
- 1024px – 1200px៖ ប្រសិនបើយើងនិយាយអំពីបរិបទបច្ចុប្បន្ន ដោយផ្អែកលើស្ថិតិពីវេបសាយមួយចំនួន (ដូចជា៖ http://www.w3schools.com/browsers/browsers_display.asp) យើងនឹងឃើញថាអេក្រង់ដែលមានគុណភាពបង្ហាញ 1366px × 768px ត្រូវគេប្រើច្រើនជាងគេ។ ដូច្នេះហើយ ទំហំពី 1024px – 1200px ជាទំហំសមស្របសម្រាប់អេក្រង់ទំហំនេះឬធំជាងនេះ។
- លើសពីនេះ? វាជាការសម្រេចរបស់អ្នក តែបើផ្អែកលើបទពិសោធន៍អ្នកប្រើប្រាស់ គេកម្រនឹងធ្វើវេបសាយណាដែលមានទំហំធំពេកណាស់ ពីព្រោះវាធ្វើឲ្យភ្នែករបស់អ្នកមើលវេបសាយនោះឆាប់មានភាពហត់នឿយ ហើយអាចធ្វើឲ្យមានការភ័ន្តច្រឡំនៅត្រង់ចំណុចមួយចំនួន។
ការរចនាបែប Responsive
តើរចនាតែមួយបែបហើយ ពិតជាអាចប្រើបានមែនទេ? តើទ្រង់ទ្រាយវេបសាយនោះបង្ហាញយ៉ាងដូចម្ដេចចំពោះអេក្រង់ឧបករណ៍ផ្សេងៗទៀត (ទូរស័ព្ទ, ថាប្លិត, …)? សាកបង្រួមទំហំវីនដូរបស់ប្រោវស័រ ចំពោះវេបសាយមួយចំនួនវានឹងមានការបង្ហាញសណ្ឋានផ្សេងក្នុងពេលផ្ទៃបង្ហាញមានទំហំតូច។
មិនបាច់សាកនឹងវេបសាយខ្ញុំទេ ពីព្រោះវេបសាយខ្ញុំស្ទើរតែគ្មានត្រង់ណាដែលត្រូវប្ដូរសណ្ឋានពេលអេក្រង់រួមតូច។ ប្រសិនបើមិនចង់បង្រួមទំហំវីនដូរបស់ប្រោវស័រទេ អ្នកអាចសាកល្បងនៅក្នុងវេបសាយនេះបាន៖ http://responsivetest.net។
សង្ឃឹមថាអ្នកទទួលបានគំនិតខ្លះៗអំពីគោលការណ៍រចនាមួយនេះ។
រូបភាព
