รับทำเว็บไซต์

วันนี้เรามาดู สถิต ของคนที่เข้าใช้เว็บไซต์ของเรากันนะครับ เป็นสิ่งที่ Webmaster ผู้ที่เริ่มทำเว็บไซต์ หรือมีเว็บไซต์เป็นของตัวเอง ต้องอยากทราบว่า เว็บไซต์ที่เราทำขึ้นมาและเนื้อหาที่นำมาลงนั้น มีความน่าสนใจ และดึงดูดผู้เข้าชมแต่ละคน ในแต่ละวันมากน้อยเพียงใด  อยู่ในเว็บไซต์ของเรานานแค่ไหน และเข้ามาอ่าน นานแค่ไหน วิธีการตรวจสอบที่ง่ายและที่นิยมใช้กัน คือ 1. ทำการติดตั้ง  Stats เพื่อนับจำนวนจำนวนคนเข้าเว็บต่อวัน (UIP) ของเราก่อน 2. แล้วทำการติดตั้ง Hitstats สำหรับเช็คจำนวนหน้าที่เปิดดูของวันนี้  (Page.Today) เมื่อได้ทั้ง UIP และ Page.today ที่ได้ในแต่ละวันมาแล้ว ก็ให้นำจำนวนหน้าที่เปิดดูของวันนี้ที่ได้  นำมา หาร กับ จำนวนคนเข้าเว็บต่อวัน Page.Today / UIP ก็จะทราบว่า ผู้เข้าชมเว็บไซต์ 1 ท่านเฉลี่ยแล้วเข้าไปชมหน้าเว็บไซต์ของเรากี่หน้า ข้อมูลเหล่านี้เราสามารถเก็บเป็นสถิติ เพื่อเปรียบเทียบการเข้าชมของ ผู้เข้าชมเว็บไซต์ ในแต่ละช่วงได้ และมีประโยชน์ในการตรวจสอบว่าในการทำ SEO ของเราสามารถเพิ่ม ปริมาณ ผู้เข้าชมเว็บไซต์ ได้มากน้อยเพียงใด และมีอันดับในการค้นหาของ search engine ที่ดีขึ้นหรือไม่ด้วยครับ

ที่จริงใน CI framework มีตัว recaptcha ให้อยู่แล้วนะครับแต่ปัญหาคือ มันอ่านยาก วันนี้เลยมีวิธีการทำ captcha แบบง่ายๆมาแบ่งปันครับ 1. โหลดไฟล์ Captcha-library-for-CodeIgniter 2. จากนั้นให้ copy ไฟล์ antispam.php ไปไว้ใน application/libraries/ 3. วิธีเรียกใช้ใน controller $this->load->library('antispam'); $configs = array( 'img_path' => './assets/img/captcha/',              //ใส่ path ที่จะเก็บรูปนะครับ 'img_url' => base_url() . 'assets/img/captcha/',                  //ลิงก์ของรูปภาพ 'img_height' => '50', ); $captcha = $this->antispam->get_antispam_image($configs); 4. ในตัวแปร $captcha เป็น array ประกอบด้วยค่าดังนี้ array('word' => 'SZTHM', 'time' => time , 'image' => '<img .... '); 5. วิธีเรียกใช้ใน view ก็แค่ <?  echo $captcha['image'] ;  ?> แค่นี้ก็จะได้ captcha ดังภาพ   *หมายเหตุ  วิธีการนำไปใช้หรือไปเช็คค่าขึ้นอยู่กับไอเดียของแต่ละคนนะครับ และอีกอย่างรูปภาพที่ gen ออกมาจะเก็บไว้ใน โฟล์เดอร์นะครับ ซึ่งเราต้องทำการไปลบด้วยตัวเอง ส่วนวิธีการลบแบบอัติโนมัติให้ติดตามบทความต่อไปนะครับ

Sitemap คือ แผนผังเว็บไซต์  ซึ่ง Sitemap ในเว็บไซต์จะเป็นการอธิบายโครงสร้างทั้งหมดของเว็บไซต์ เพื่อให้ผู้ใช้งานทั่วไปเห็นถึงโครงสร้างของเว็บไซต์ และทำให้  Search Engine สามารถเข้าถึงโครงสร้างของเว็บไซต์เราด้วย ประโยชน์ที่ได้จากการทำ Sitemap - ในส่วนของ Search Engine นั้นจะช่วยเพิ่มโอกาศในการ Index มากขึ้นกว่าเดิม - ในส่วนของผู้ใช้งานนั้นจะเป็นในรูปแบบความสะดวกในการรับรู้โครงสร้างทั้งหมดของเว็บไซต์ และเข้าถึงข้อมูลได้รวดเร็ว - ในส่วนของผู้พัฒนาเว็บไซต์เข้าใจโครงสร้างของเว็บไซต์ ทำให้ง่ายต่อการพัฒนา

มีอยู่ 3 ส่วนคือ 1.Selector 2.Properties 3.Values ซึ่งถ้าไม่มี 3ส่วนนี้ครบ ก็จะไม่สามารถทำงานได้   ตัวอย่างการใช้งาน css h1 { color:#000; } h1 คือ selector ว่าเราเลือก tag h1 ทั้งหมด color คือคุณสมบัติที่เลือก ในที่นี้เลือกสี #000 คือ Values คือค่าของตัว Properties ซึ่งในที่นี้มีค่าเป็นสีดำ   สรุปก็คือ กำหนดให้ tag h1 ทั้งหมดเป็นสีดำ  

ความแตกต่างระหว่าง UX  Designer และ Web Designer

กำหนดขนาดของบรรทัดโดยใช้คำสั่ง line-heigh เช่น #text-test1{ float:left; width:500px; height:200px; font-size:14px; font-family:Tahoma, Geneva, sans-serif; line-height:1.5em; } โดยคำสั่งนี้สามารถใช้หน่อยได้สองแบบคือ line-height:1.5em; และ line-height:20px; หน่อย em ก็คือ ขนาดจำนวนเท่า ส่วน px ก็คือ จำนวนความละเอียดของหน้าจอ

ในการทำเว็บไซต์ การจัด css ให้กับข้อความก็เป็นสิ่งที่จำเป็น เพื่อให้การจัดเรียงกันของตัวอักษร ขนาด สี เป็นไปตามที่นักพัฒนาต้องการ วันนี้เรามาดู คำสั่งในการจัดการกับข้อความกันครับ .text{ font-family: Tahoma; font-size: 18px; color:#000; font-weight:bold; line-height: 1; word-wrap:break-word; } จากโคดตัวอย่างด้านบน มาดูกันว่า แต่ละคำสั่ง ใช้กันอย่างไร คำสั่งแรก คือ font-family ใช้กำหนด ประเภทของ font ที่เราต้องการ font-size  ใช้กำหนด ขนาดของ font color  ใช้กำหนด สีของ font font-weight ใช้กำหนด ความหนาของ font สามารถกำหนดความหนาเป็น bold หรือเป็นค่า 100,200,... ได้ตามต้องการ line-height  ใช้กำหนด ความสูงระยะห่างของแต่ละบรรทัด word-wrap  ใช้กำหนด การทำงานในกรณีที่ข้อความในบรรทัดนั้นยาวเกินกว่าบล็อก ที่ครอบไว้แล้ว เราใช้ break-word ในการตัดคำเพื่อขึ้นบรรทัดใหม่  

การเรียกใช้ jQuery หรือ JavaScript Library ตัวอื่นๆตาม ต้องเรียกใช้เพียงครั้งเดียวเท่านั่น จะเรียกใช้ใน <head></head> หรือว่าด้านล่างสุดของ code แต่ต้องไม่อยู่นอก <body></body> เช่น ภาษา PHP เรา include ไฟล์ .php ต่างๆเข้ามา ไฟล์นั่นๆอาจใช้ Plugin ของ jQuery แต่เราไม่ต้อง เรียกใช้ jquery.js หรือ jquery.min.js อีกแล้ว เพราะเราได้เรียกใช้ไปบน <head> หรือ ข้างล่างสุดของ code ไปแล้ว ไม่จำเป็นต้อง เรียกใช้อีกรอบ เพราจะทำให้ Plugin ของ jQuery นั่นๆไม่ทำงาน*** ตัวอย่าง การเรียกใช้บน <head> <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Jquery</title> <script src="js/jquery.min.js"></script> </head> <body> </body> </html>   ตัวอย่าง การเรียกใช้ล่างสุดของ code แต่ต้องไม่อยู่นอก <body></body> *ข้อดีจะทำให้เว็บโหลดเร็วขึ้น ข้อเสีย Plugin ของ jQuery บ้างตัวจะไม่สามารถทำงานได้ <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Jquery</title> ... </head> <body> ... ... ... <script src="js/jquery.min.js"></script> </body> </html>

ใน css3 จะมีคำสั่งที่ใช้ในการใส่เงาให้กับ ตัวหนังสือ คือคำสั่ง text-shadow วิธีใช้ เช่น <html> <head> <style> h1{ text-shadow:5px 5px 5px #000; } </style> </head> <body> <H1>TEST CSS TEXT SHADOW</H1> </body> </html> เป็นการใส่เงาให้กับตัวหนังสือที่อยู่ใน tag H1 ให้มีความหนา 5px เบลอ 5px เยื้องไปข้างหลัง 5px และสีของเงาคือ สีดำ(#000)

Margin คือการเลื่อนตำแหน่ง ของวัตถุ ไปตามที่เรากำหนด โดยเลื่อนไปทั้งวัตถุ เช่น .box { margin-left:50px; } ผลก็คือ tag ที่ใช้ class box จะถูกเลื่อนไปทางขวา 50px; นั่นเอง Padding คือการเลื่อนภายในวัตถุ โดยจะไม่เลื่อนตัววัตถุ เช่น .box{ padding-top:30px; } ผลก็คือ ภายใน tag ที่ใช้ class box จะถูกเลื่อนลงไป 30px; นั่นเอง