5 Popular CSS Frameworks ដែលលោកអ្នកគួតែចាប់ផ្តើមជាមួយវា
ភាសាជាច្រើនសុទ្ធតែមាន Framework របស់វា ដូចជា Java, PHP, JavaScript ASP.NET, C#…។ប្រកាស់មុន ខ្ញុំបានដាក់ Framework របស់ JavaScript នឹង PHP រួចមកហើយពេលនេះសូមបង្ហាញ Framework របស់ CSS វិញម្តង តើលោកអ្នកចំលែកទេ ហេតុអ្វី CSS មាន Framework ដែរ? មិនមានអ្វីគួអោយឆ្ងល់នោះទេ គោលការណ៍នៃការបង្កើត Framework នេះឡើងគឺមានបួនចំនុចដូចខាងក្រោម
១) បង្កើនល្បឿននៃការអភិវឌ្ឍន៍ដោយចំនាយពេលខ្លី
២) មានទំហំឯកសាមួយ(CSS)យ៉ាងតូចតែអាចប្រើការបានច្រើន នឹងមានប្រសិទ្ធភាពល្អ
៣) មានឯកសាមេរៀន និងការបង្ហាត់បង្រៀនល្អៗ
៤) ភាពច្បាស់លាស់អំពីរចនាសម្ព័ន្ធនៃ Grid
ថ្ងៃនេះខ្ញុំសូមលើក CSS Framework ចំនូន ៥ ដែលកំពុងពេញនិយម មកបង្ហាញ រួមជាមួយ នឹង មេរៀន ឧទាហរណ៍ ដែលធ្វើអោយលោកអ្នកកាន់តែយល់ច្បាស់អំពី Framework ទាំងនេះ។
១. 960 CSS Framework
960 Grid System ជា framework មួយដែលផ្តល់អោយយើងក្នុងការប្រើប្រាស់ តាមខ្នាតសាមញ្ញ ដែលមាន width 960px។
វាមាន 2 Variant: 12 និង 16 columns ដែលយើងអាចប្រើវាបានដោយការបំបែកពីគ្នា ឬក៏តាមលំដាប់លំដោយគ្នា ហើយមានទំតែ 3.6KB ដែលបាន compress រួចហើយ។
កាពន្យល់ពីការប្រើប្រាស់ 960 CSS Framework
សូមចួលទៅមើលតំណខាងក្រោមនេះ
២.Blueprint CSS Framework
Blueprint ជា CSS Framework មួយដែលជួយយើងកាត់បន្ថយពេលវេលាបង្កើត CSS វាផ្តល់អោយយើងនូវមួលដ្ឋាល CSS ដ៏រឹងមាំមួយ ដើម្បីបង្កើត គំរោងរបស់យើងអោយស្ថិតនៅកំរិតខ្ពស់ជាមួយភាពងាយស្រួលការប្រើប្រាស់Grid, ពុម្ភអក្សរច្បាស់ៗ form ស្រស់ស្អាត។ លក្ខណះសំខាន់ផ្ទាល់ របស់វាគឺ Mass Reset នៃ Browser default style ដែលផ្តល់អត្ថិភាពអោយយើងគ្រប់គ្នាអាចគ្រប់គ្រង់ Layout ផ្ទាល់ខ្លួនបានយ៉ាងងាយ។
Live Demos
កាពន្យល់ពីការប្រើប្រាស់ Blueprint CSS Framework
សូមចួលទៅមើលតំណខាងក្រោមនេះ
- BlueprintCSS 101
- A Closer Look At the Blueprint CSS Framework
- Blueprint CSS Cheat Sheet
- Blueprint Grid CSS Generator
- PXtoEM
- Construch
3.jQuery UI CSS Framework
Jquery UI បានដាក់ CSS Framework មាំមួនមួយដែលរចនាឡើងសំរាប់ការបង្កើត Custom Jquery widgets.
CSS Framework បានរូមបញ្ចួល classes ដែលគ្រប់ដណ្តប់យ៉ាងទួលំទួលាយសំរាប់ការរចនា UI ហើយអាចរៀបចំដោយការប្រើប្រាស់ jQuery UI ThemeRoller។
កាពន្យល់ពីការប្រើប្រាស់ Jquery UI CSS Framework
សូមចួលទៅមើលតំណខាងក្រោមនេះ
Live Demos
៤. YAML
Yaml(Yet Another Multicolumn Layout) ផ្តោតទៅលើការរចនា Flexible Layouts និង column និង grid basedអ្នកត្រូវការ license ដើម្បីប្រើវា។ YAML បានភ្ជាប់មកជាមួយ Ajax Builder ដ៏ពិសេសមួយ មានភាពងាយស្រួលក្នុងការអភិវឌ្ឍ YAML-base CSS layouts ដែលអនុញ្ញាតិ្តអោយយើង
ដាក Containers នៃ layouts ទាំងនោះដោយការចាប់ដាក់ ហើយHTML និង CSS កូដ ត្រូវបាន Generate automatically។
Live Demos
កាពន្យល់ពីការប្រើប្រាស់ YAML
៥. Yahoo YUI Grids CSS
មួលដ្ឋាន YUI Grids CSS សំដៅទៅ 4 preset page widths, 6 preset templates, និងមានលត្ថភាពដាក់ចួល និងបែងចែកជាផ្នែកតួចៗ ២, ៣ ឬ ៤ columns. វាមានធំហំតែ ៤KB អាចផ្តល់ទៅអោយច្រើនជាង ១០០០ Page layout ដាក់បញ្ចួលគ្នា។
សូមកុំភ្លេចមើល CSS Reset/Base/Fonts/Grids Cheat Sheat
កាពន្យល់ពីការប្រើប្រាស់ Yahoo YUI Grids CSS
The best 5 Javacript Frameworks
JavaScript ជា Client-side ដែលកំពុងពេញនិយមនាពេលបច្ចុប្បន្ននេះ ព្រោះវាធ្វើអោយ គេហទំព័រមានភាពស្រស់ស្អាត ទាកទាញ រស់វើក។ JavaScript ត្រូវបានគេយកទៅប្រើច្រើនផ្នែកក្នុង គេហទំព័រដួចជា Map (Google Map, Yahoo Map…), Mail (gmail, yahoo mail…), Reader ( google reader), online documents (Google Documents), Auto-Complete នេះជាផ្នែកមួយសំខាន់ផងដែរ សំរាប់គេហទំព័រ មានគេហទំព័រជាច្រើនបានប្រើបច្ចេកទេសសំរាប់សំរួលដល់ការស្វែងរក ពេលដែលយើងចង់រកអ្វីមួយគ្រាន់តែវាយពាក្យនោះ វានឹងផ្តល់លទ្ធអោយយើងភ្លាមៗ ព្រមទាំងចំនួនពាក្យនោះផងដែរ។ Search Engine បានប្រើ Auto-Complete នេះផងដែរសំរាប់សំរួលដល់ការស្វែងរក។
ក្រៅពីនេះនៅមានផ្នែកជាច្រើនទៀដែល JavaScript អាចធ្វើបាន ជាពិសេសនោះ Ajax ជាបច្ចេកវិទ្យាដែលកំពុងពេញនិយមបំផុតនាពេលបច្ចុប្បន្នសំរាប់ Web2.0។ ហើយនៅក្នុងប្រកាស់នេះដែខ្ញុំសូមលើកយក JavaScript Framework សំខាន់ៗចំនួន ៥ ដែលកំពុងពេញនិយមជាង។
១ Jquery
Jquery ជា JavaScript Framework មួយដែលកំពុងពេញនិយម មានល្បឿនលឿនទៀតផង។ Jquery បានក៏ឡើងក្នុងឆ្នាំ ២០០៥ ដែលសរសេដោយលោក John Resig ជាស្ថាបនិកមួយរូបរបស់ Web Browser ដ៏ល្បី Firefox។ ចំពោះ Framework មួយនេះត្រូវបាន Open Source មួយចំនូនយកទៅប្រើដូចជា WordPress, Drupal..
២Prototype
- prototype
Prototype ជា Framework មួយដែលចំណាសជាងគេ ហើយត្រូវបានប្រើច្រើនផងនៅក្នុងគេហទំព័រជាច្រើន។ Prototype ត្រូវបានដាកបញ្ចួលក្នុង Cakephp framework,
Ruby on rails framework ហើយ Hi5 Social Network ក៏ប្រើ Framework នេះដែរ។
៣ Mootools
- Mootools
Mootools ជា Object-Oriented JavaScript framework សំរាប់ JavaScript Developer ដែលមានកំរិតពីមធ្យម ដល់ កំរិតខ្ពស់ វាអនុញ្ញាតិអោយយើងសេរសេ powerful, flexible, និង cross-browser កូដ ជាមួយភាស្រស់ស្អាតរបស់វា។ Mootools ត្រូវបាន web developers ពេញចិត្តផងដែរ ហើយត្រូវបានប្រើជាមួយ Joomla CMS និង ក្រុមហ៊ុនរចនា Template មួយចំនួនទៀត។
៤ YUI
- Yahoo
YUI ជា JavaScript Framework ពេញនិយមផងដែរ ហើយត្រូវបានប្រើ ហើយឥឡូវចេញដល់ Version 2.7.0 ។ត្រូវបានប្រើ សេវាកម្មរបស់ ក្រុមហ៊ុន Yahoo នេះ ហើយក៏មាន Web Developers ប្រើវាផងដែរ។
៥ Dojo
Dojo ជា JavaScript មួយទៀតដែលយើងអាចយកមកបង្កើត ជា Web Application បានយ៉ាងស្រស់ស្អាត។ Dojo ត្រូវបានដាក់បញ្ចួលទៅ Zend Framewrok
The best PHP frameworks for developers
សំរាប់ Web developer ពិតជាស្គាល់ខ្លះហើយ អំពី PHP Frameworks បើសិនជាយើងប្រើ Framework ទាំងនេះពិតជួយសំរូលដល់ការងារយើងច្រើនណាស់ ក្នុង Develop Website ហើយលឿនទៀតផង មិនត្រឹមតែប៉ុណ្ណឹង កូដរបស់យើងបានរៀបចំតាមលក្ខណៈស្តង់ដា MVC (Model View Controller) ដែលធ្វើអោយការងាយើងមានលក្ខណៈ ងាយស្រូលក្នុងការកែរប្រែរនៅថ្ងៃក្រោយ។ ខាងក្រោមនេះខ្ញុំសូមនែនាំ PHP Framework មួយចំនួនដែលគេពេញនិយមសព្ទថ្ងៃនេះ៖
1 cakephp
CakePHP is a rapid development framework for PHP that provides an extensible architecture for developing, maintaining, and deploying applications.
Ajaxloader
Bar Ajax loader
នេះជាគេហទំព័រដែលអោយយើងទាញយក Style Ajaxloader ដែលយើងបានឃើញ គេប្រើជាញឹកញាប់ក្នុងគេហទំព័រ នៅពេលដែលយើងចុចលើតំណរអ្វីមួយ ហើយត្រូវការរង់ចាំ រហូតដល់ទិន្នន័យបានបង្ហាញចេញមក។ ការដែលយើងរងចាំនោះ គឺឃើញមានសញ្ញា load ចេញមក(ដូចរូបខាងលើ) ដែលបញ្ចាក់ប្រាប់ថា សូមរងចាំបន្តិច នោះជារូបភាព GIF Animation គឺយើងអាចរចនាវាតាម កម្មវិធីជាច្រើន។ តែគេហទំព័រទាំងនេះគ្រានចំនាយពេលមួយរយៈពេលខ្លី គឺលោកអ្នកអាចរើសយករូបណាមួយ ហើយជ្រើសរើសយកពណ៏តាមចិត្តចង់បាន រូចហើយ Generate វានោះលោកអ្នក នឹងឃើញរូបបង្ហាញចេញមក ប្រសិនបើចង់បានសូមទាញយកវាសំរាប់ប្រើថៃ្ងក្រោយ។
http://www.ajaxload.info/ ផ្តល់ជួន Ajax loader ជាលក្ខណៈ 2d ។
ajaxload.info
http://preloaders.net ផ្តល់ជួន Ajax loader ជាលក្ខណៈ 2d និង 3d។
Preloaders.net
សាកល្បង Ajax ជាមួយភាសា Server-Side PHP
Ajax មកពីពាក្យ Asynchronous JavaScript and XML វាមានដើមកំនើតក្នុង ឆ្នាំ2005 សូមមើលអត្ថបទរបស់លោក Jesse James Garrett។Ajax បានធ្វើអោយ Web Application មានការពេញនិយមជាង Desktop Application នាពេលបច្ចុប្បន្ននេះ ព្រោះវាអាចភ្ជាប់ទៅកាន់ Sever ដោយមិនចាំបាច់ Refresh Page ដូចជាភាសា Server-Side(PHP, ASP.NET, JSP…)។
សូមមិនរៀបរាប់ច្រើនទេអំពី Ajax សូមើល http://www.w3schools.com បន្ថែម។ ខាងក្រោមនេះជាឧទាហរណ៍ ពីការប្រើប្រាស់ Ajax សង្ឃឹមថានេះ ជាឧទាហរណ៍មួយជួយបង្ហាញផ្លូវដល់អ្នកដែលចង់ស្វែងយល់អំពី Ajax។
១ បង្កើត index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>AJAX with PHP: Quickstart</title>
<script type="text/javascript" src="ajax.js"></script>
<style type="text/css">
.message{
color:red;
}
</style>
</head>
<body onload='process()'>
សូមបញ្ចួលឈ្មោះត្រង់នេះ:
<input type="text" id="myName" />
<div id="divMessage" class="message"></div>
</body>
</html>
សំរាប់បង្ហាញ message ពី ajax សូមមើលរូប ខាងក្រោម
២បង្កើត ajax.js
/*
*author: PRAK Sophy
*email: sophy.prak@gmail.com
*website: http://kooms.wordpress.com
*/
// រក្សាទុក XMLHttpRequest object ក្នុង xmlHttp variable ពី function createXmlHttpRequestObject()
var xmlHttp = createXmlHttpRequestObject();
// function ចាប់យក XMLHttpRequest object ពី browser
function createXmlHttpRequestObject()
{
// will store the reference to the XMLHttpRequest object
var xmlHttp;
// ប្រសិនបើយើងដំណើការលើ Internet Explorer
if(window.ActiveXObject)
{
try
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
xmlHttp = false;
}
}
//សំរាប់ Mozilla ឬ browsers ផ្សេងទៀត
else
{
try
{
xmlHttp = new XMLHttpRequest();
}
catch (e)
{
xmlHttp = false;
}
}
// return ការបង្កើត object ឬ បង្ហាញសារ error ប្រសិនបើយើងមិនអាចបង្កើត xmlHttp
if (!xmlHttp)
alert("មិនអាចបង្កើត XMLHttpRequest object.");
else
return xmlHttp;
}
// បង្កើត asynchronous HTTP request ដោយប្រើ XMLHttpRequest object
function process()
{
//ដំណើរការប្រសិនបើ xmlHttp object មិនរវល់
if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0)
{
// ចាប់យកឈ្មោះដែលបានបញ្ចួលដៅយអ្នកប្រើប្រាសពី form
name = encodeURIComponent(document.getElementById("myName").value);
// ប្រតិបត្តការ firstajax.php page ពី server
xmlHttp.open("GET", "firstajax.php?name=" + name, true);
// define the method to handle server responses
xmlHttp.onreadystatechange = handleServerResponse;
// make the server request
xmlHttp.send(null);
}
else
// ប្រសិនបើ connection ជាប់រវល់ វានឹងព្យាយាមម្តងទឿត បន្ទាប់ពី ១ វិនាទីក្រោយមក
setTimeout('process()', 1000);
}
// executed automatically when a message is received from the server
// ដំណើរការដោយស្វ័យប្រវត្ត ពេលដែលសាត្រូវបានបញ្ជួនពី Server
function handleServerResponse()
{
// ដំណើការ ប្រសិនបើ transaction ត្រូវបានបំពេញចប់
if (xmlHttp.readyState == 4)
{
// status of 200 indicates the transaction completed successfully
//status = 200 មានន័យថា Transaction បានបញ្ចប់ដោយជោកជ័យ
if (xmlHttp.status == 200)
{
//ចំលងចេញ XML ទទួលបានពី server
xmlResponse = xmlHttp.responseXML;
// បានជា document element (the root element) of the XML structure
xmlDocumentElement = xmlResponse.documentElement;
// get the text message, which is in the first child of
// the the document element
helloMessage = xmlDocumentElement.firstChild.data;
// update the client display using the data received from the server
document.getElementById("divMessage").innerHTML =
'<i>' + helloMessage + '</i>';
// restart sequence
setTimeout('process()', 1000);
}
// a HTTP status different than 200 signals an error
else
{
alert("មានបញ្ហាកើតឡើងនៅពេលដែល access ទៅកាន់ server: " + xmlHttp.statusText);
}
}
}
៣ បង្កើត file firstajax.php
ជា PHP Script នៅផ្នែក Server-side ajax អាចដំណើការបាន ដោយពឹងផ្អែកទៅ ផាសា Server-Side។
ត្រូវបានហៅមកប្រើដោយកូដ javascript ក្នុង ajax.js នៅផ្នែក Client-Side ។
<?php
// we'll generate XML output
header('Content-Type: text/xml');
// generate XML header
echo '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>';
// create the <response> element
echo '<response>';
// retrieve the user name
$name = $_GET['name'];
// generate output depending on the user name received from client
$userNames = array('KOOMS', 'SOPHY', 'AROCORE', '4KHMER', 'YODA');
if (in_array(strtoupper($name), $userNames))
echo 'សូស្តី ' . htmlentities($name) . '!';
else if (trim($name) == '')
echo 'អាចប្រាប់ខ្ញុំបានទេ តើអ្នកឈ្មោះអី?';
else
echo htmlentities($name) . ', ខ្ញុំមិនស្គាល់អ្នកទេ';
// close the <response> element
echo '</response>';
?>
