16 KiB

Raw Permalink Blame History

ការតុបតែងកម្មវិធីធនាគាររបស់អ្នកជាមួយ CSS ទំនើប

ទិដ្ឋភាពគម្រោង

បម្លែងកម្មវិធីធនាគារដំណើរការរបស់អ្នកឱ្យក្លាយជាកម្មវិធីវែបមានរូបរាងទាក់ទាញ និងមានរូបរាងវិជ្ជាជីវៈដោយប្រើបច្ចេកវិទ្យា CSS ទំនើប។ អ្នកនឹងបង្កើតប្រព័ន្ធរចនាប័ទ្មឯកសណ្ឋានដែលបង្កើនបទពិសោធន៍អ្នកប្រើខណៈពេលរក្សាគោលការណ៍ចូលដំណើរការ និងរចនាបទឆ្លាតវៃឆ្លើយតប។

ការតែងនេះជាការតស៊ូឱ្យអ្នកអនុវត្តលំនាំរចនាវែបទំនើប អនុវត្តអត្តសញ្ញាណវិស្វកម្មមួយដែលមានភាពរួមបញ្ចូល និងបង្កើតចំណុចប្រទះដែលអ្នកប្រើនឹងងាយស្រួលរួមទាំងទាក់ទាញ។

សេចក្តីណែនាំ

ជំហានទី 1៖ រៀបចំស្ទីលស៊ីត

បង្កើតមូលដ្ឋាន CSS របស់អ្នក៖

បង្កើត ឯកសារថ្មីឈ្មោះ styles.css នៅក្នុងថតគម្រោងរបស់អ្នក
ភ្ជាប់ ស្ទីលស៊ីតទៅក្នុងឯកសារ index.html របស់អ្នក៖
```
<link rel="stylesheet" href="styles.css">
```

ចាប់ផ្តើម ជាមួយការកំណត់ឲ្យ CSS ទទួលស្គាល់ថ្មី និងតម្លៃលំនឹងទំនើប៖

/* Modern CSS reset and base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
  color: #333;
}

ជំហានទី 2៖ តម្រូវការប្រព័ន្ធរចនា

អនុវត្តធាតុរចនាដ៏សំខាន់ទាំងនេះ៖

ពណ៌

ពណ៌សំខាន់៖ ជ្រើសរើសពណ៌វិជ្ជាជីវៈសម្រាប់ប៊ូតុង និងការរិះគន់
ពណ៌គូសមហេតុ៖ ពណ៌បន្ថែមសម្រាប់លក្ខណៈផ្សេងៗ និងសកម្មភាពរង
ពណ៌អថេរ៖ ពណ៌ស្មើរសម្រាប់អក្សរ ស្រទាប់ព្រំ និងផ្ទៃខាងក្រោយ
ពណ៌ជោគជ័យ/កំហុស៖ ពណ៌បៃតងសម្រាប់ស្ថានភាពជោគជ័យ ពណ៌ក្រហមសម្រាប់កំហុស

ផ្នែកអក្សរ

លំដាប់ក្បាល៖ ផ្សាញ់បំបែកច្បាស់ចន្លោះ H1, H2, និង H3
អត្ថបទខ្លី៖ ទំហំអក្សរអាចអានបាន (យ៉ាងតិច 16px) និងកម្ពស់បន្ទាត់សមរម្យ
ស្លាកបែបបោះពុម្ព៖ រចនាអក្សរតាមសមត្ថភាព និងច្បាស់លាស់

ទីតាំង និងចម្ងាយរវាងធាតុ

ចម្ងាយស្របគ្នា៖ ប្រើវិមាត្រចម្ងាយ (8px, 16px, 24px, 32px)
ប្រព័ន្ធប្លង់ប្រអប់៖ រៀបចំប្លង់សម្រាប់ទម្រង់ និងផ្នែកមាតិកា
រចនាបទឆ្លាតវៃឆ្លើយតប៖ ប្រើវិធីសាស្រ្តមុនសម្រាប់ឧបករណ៍ចល័តជាមួយចំណុចលំហូរ

ជំហានទី 3៖ ការតុបតែងធាតុផ្សំពិសេស

តុបតែងធាតុផ្សព្វផ្សាយទាំងនេះ៖

ទម្រង់

ប្រអប់បញ្ចូល៖ ស្រទាប់ព្រំវិជ្ជាជីវៈ, ស្ថានភាពផ្តោត និងរចនាអ្នកបញ្ជាក់ត្រឹមត្រូវ
ប៊ូតុង៖ ប្រតិកម្មពេលកាក់, ស្ថានភាពពុំដំណើរការ, និងសញ្ញាតម្លើង
ស្លាក៖ ទីតាំងច្បាស់និងសញ្ញាបញ្ជាក់វាលចាំបាច់
សារកំហុស៖ រចនាកំហុសដែលមើលឃើញបាន និងសារជួយបង្ហាញ

ការរុករក

ក្បាល៖ តំបន់រុករកស្អាត និងមានម៉ាកពាណិជ្ជកម្ម
តំណភ្ជាប់៖ ស្ថានភាពកាក់ច្បាស់ និងសញ្ញាសកម្ម
រូបតំណាង/ចំណងជើង៖ ធាតុម៉ាកពាណិជ្ជកម្មដ៏រឹងមាំ

ផ្នែកមាតិកា

ផ្នែក៖ ការបំបែកជាថ្នាក់ទាក់ទាញរវាងផ្នែកផ្សេងៗ
កាត៖ ប្រសិនបើប្រើប្លង់កាត រួមបញ្ចូលរន្ធញ័រនិងស្រទាប់ព្រំ
ផ្ទៃខាងក្រោយ៖ ការប្រើប្រាស់គន្លងពណ៌សនិងផ្ទៃខាងក្រោយស្រទន់

ជំហានទី 4៖ លក្ខណៈពិសេសបន្ថែម (ជាជម្រើស)

ពិចារណាអនុវត្តលក្ខណៈពិសេសដ៏កម្រិតខ្ពស់ទាំងនេះ៖

របៀបងងឹត៖ ប្ដូររវាងរបៀបស្រាលនិងងងឹត
អនុវត្តន៍ចលនា៖ ប្រតិកម្មស្រទន់និងចលនាតូចៗ
ស្ថានភាពផ្ទុក៖ មតិយោបល់វីស្វកម្មក្នុងអំឡុងពេលបញ្ជាទម្រង់
រូបភាពឆ្លើយតប៖ រូបភាពបានបង្កើតគ្រប់គ្រាន់សម្រាប់ទំហំអេក្រង់ខុសគ្នា

ឧទាហរណ៍ការបង្ហាញរចនា

លក្ខណៈលេចធ្លោនៃកម្មវិធីធនាគារទំនើប៖

រចនាស្អាត និងទំនេរទីតាំងខាងស ជាមួយដំណើរការទូលំទូលាយ
ម៉ាស៊ីនពណ៌វិជ្ជាជីវៈ (ពណ៌ខៀវ បៃតង ឬពណ៌ស្មើរស្ទាត់)
លំដាប់បង្ហាញច្បាស់ ជាមួយប៊ូតុងហៅដំណើរការដែលច្បាស់លាស់
អត្រាការប្រៀបធៀបច្បាស់លាស់ ដែលគោរពតាមគោលការណ៍ WCAG
ប្លង់ឆ្លាតវៃឆ្លើយតបនៅលើទូរស័ព្ទ ដែលមានប្រសិទ្ធភាពលើឧបករណ៍ទាំងអស់

តម្រូវការបច្ចេកទេស

ការរៀបចំ CSS

/* 1. CSS Custom Properties (Variables) */
:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  /* Add more variables */
}

/* 2. Base Styles */
/* Reset, typography, general elements */

/* 3. Layout */
/* Grid, flexbox, positioning */

/* 4. Components */
/* Forms, buttons, cards */

/* 5. Utilities */
/* Helper classes, responsive utilities */

/* 6. Media Queries */
/* Responsive breakpoints */

តម្រូវការចូលដំណើរការ

ការប្រៀបធៀបពណ៌៖ បញ្ជាក់អត្រាអតិភាពតែលើស 4.5:1 សម្រាប់អត្ថបទធម្មតា
សញ្ញាផ្តោត៖ សញ្ញាផ្តោតដែលមើលឃើញសម្រាប់ការរុករកជាមួយក្តារចុច
ស្លាកទម្រង់៖ ជារួមបញ្ចូលដោយសមស្របជាមួយបញ្ចូល
រចនាបទឆ្លាតវៃឆ្លើយតប៖ អាចប្រើបានលើអេក្រង់ពី 320px ដល់ 1920px

វិធានការវាយតម្លៃ

ការវាស់បណ្តុះ	ល្អឧត្តម (A)	ល្អប្រសើរ (B)	កំពុងអភិវឌ្ឍ (C)	ត្រូវការកែប្រែ (F)
ប្រព័ន្ធរចនា	អនុវត្តប្រព័ន្ធរចនាដ៏ទូលំទូលាយជាមួយពណ៌ សតិវិជ្ជា និងចម្ងាយស្តេីរត្រួតពិនិត្យ	ប្រើស្ទីលមួយដែលមានលំនាំច្បាស់ និងលំដាប់វិស្វករ	រៀបចំស្ទីលមូលដ្ឋានជាមួយខ្សែប្លង់មិនជាប់គ្នា ឬអវត្តមានធាតុរចនា	ស្ទីលតិច និងមានជម្រើសរចនាផ្សេងគ្នា មិនសមរម្យ
បទពិសោធន៍អ្នកប្រើ	បង្កើតចំណុចប្រទះអាជីពដែលងាយយល់ និងទាក់ទាញ	ផ្ដល់បទពិសោធន៍ល្អជាមួយការរុករកច្បាស់ និងមាតិកាអាចអានបាន	ប្រើបានមូលដ្ឋាន ជាមួយកំណែទម្រង់ត្រូវការកែលម្អ	បទពិសោធន៍អាក្រក់ ងាយស្រួលត្រូវរុករក ឬអានបាន
ការអនុវត្តបច្ចេកទេស	ប្រើបច្ចេកវិទ្យា CSS ទំនើប ជាស្ថាបត្យកម្មកូដបានល្អ និងអនុវត្តបានត្រឹមត្រូវ	អនុវត្ត CSS បានល្អជាមួយរៀបចំបានល្អ និងបច្ចេកវិទ្យាសមរម្យ	CSS ដំណើរការបានត្រឹមត្រូវ ប៉ុន្តែខ្វះរៀបចំឬបច្ចេកវិទ្យាទំនើប	អនុវត្ត CSS មិនបានល្អ មានបញ្ហាបច្ចេកទេស ឬមិនគាំទ្រតាមកម្មវិធីរុករក
រចនាបទឆ្លាតវៃឆ្លើយតប	រចនាបទឆ្លាតវៃឆ្លើយតបពេញលេញ ធ្វើការបានល្អលើទំហំឧបករណ៍ទាំងអស់	មានការឆ្លើយតបល្អជាមួយបញ្ហាតិចតួចលើខ្លះទំហំអេក្រង់	អនុវត្តឆ្លើយតបមូលដ្ឋាន ជាមួយបញ្ហាប្លង់ខ្លះ	មិនឆ្លើយតប ឬមានបញ្ហារុករកកាន់តែដាច់ខាតលើទូរស័ព្ទ
ចូលដំណើរការ	គោរពតាមសេចក្ដីណែនាំ WCAG ជាមួយការរុករកក្តារចុចល្អ និងគាំទ្រអានអេក្រង់	អនុវត្តការចូលដំណើរការល្អ ជាមួយការប្រៀបធៀប និងសញ្ញាផ្តោតត្រឹមត្រូវ	ពិចារណាអំពីការចូលដំណើរការមូលដ្ឋាន ជាមួយធាតុខ្វះ	ចូលដំណើរការមិនល្អ ពិបាកសម្រាប់អ្នកមានពិការភាព

សេចក្តីណែនាំដាក់ស្នើ

រួមបញ្ចូលក្នុងការដាក់ស្នើរបស់អ្នក៖

styles.css៖ ស្ទីលស៊ីតរបស់អ្នកដល់ពេញលេញ
HTML បានកែប្រែ៖ ការផ្លាស់ប្តូរអ្វីៗក្នុង HTML របស់អ្នក
រូបថតអេក្រង់៖ រូបភាពបង្ហាញរចនារបស់អ្នកលើកុំព្យូទ័រ និងទូរស័ព្ទ
README៖ សេចក្តីពិពណ៌នាខ្លីអំពីជម្រើសរចនារបស់អ្នក និងម៉ាស៊ីនពណ៌

ពិន្ទុបូសសម្រាប់៖

គុណលក្ខណៈ CSS សម្រាប់ការរក្សាទុកសមត្ថភាពកែប្រែ
លក្ខណៈពិសេស CSS ខ្ពស់ ដូចជា Grid, Flexbox, ឬចលនាផ្ទៃ CSS
ការពិចារណាពិសេស ដូចជាការបង្កើត CSS បែបប្រសើរនឹងទំហំឯកសារតិចបំផុត
ការធ្វើតេស្តរវាងកម្មវិធីរុករក ដើម្បីធានាការគាំទ្រចំពោះកម្មវិធីរុករកខុសៗគ្នា

💡 ទំនុកចិត្តឯកទេស៖ ចាប់ផ្តើមជាមួយរចនាបទទូរស័ព្ទ ជាមុនបំផុត បន្ទាប់មកបង្កើនសម្រាប់អេក្រង់ធំ។ វិធីសាស្រ្តមុនទូរស័ព្ទនេះធានាថាកម្មវិធីរបស់អ្នកដំណើរការល្អលើឧបករណ៍ទាំងអស់ និងទទួលបានការអភិវឌ្ឍវែបទំនើបល្អបំផុត។

ការបដិសេធ៖
ឯកសារនេះត្រូវបានបកប្រែដោយប្រើសេវាកម្មបកប្រែ AI Co-op Translator។ ខណៈពេលយើងខិតខំផ្ដល់ភាពត្រឹមត្រូវ សូមកត់សម្គាល់ថា ការបកប្រែដោយស្វ័យប្រវត្តិអាចមានកំហុស ឬភាពមិនត្រឹមត្រូវ។ ឯកសារដើមដែលមានភាសាទីតាំងដើមគួរត្រូវបានរក្សាទុកជាមូលដ្ឋានដែលមានសិទ្ធិអនុញ្ញាត។ សម្រាប់ព័ត៌មានសំខាន់ៗ ការបកប្រែដោយមនុស្សជំនាញត្រូវបានផ្ដល់អនុសាសន៍។ យើងមិនទទួលខុសត្រូវចំពោះការយល់ច្រឡំ ឬការយល់ក្នុងចិត្តខុសពីការប្រើប្រាស់ការបកប្រែនេះឡើយ។

16 KiB Raw Permalink Blame History