responsive-web-design คืออะไร?

ไม่มีความคิดเห็น


ความหมาย และ ความสำคัญ ของ Responsive Web Design

ในปัจจุบัน Mobile Internet Users ได้มีจำนวนเพิ่มขึ้นอย่างรวดเร็ว ซึ่ง Mobile Devices นั้นมีความหลากหลายมาก ไม่ว่าจะเป็น ขนาดและความละเอียดของหน้าจอแสดงผล(screen size and resolution) แนวของการแสดงผล(orientation) หรือแม้แต่ระบบปฏิบัติการ(OS)
ถ้าเป็นสมัยก่อน เราต้องทำเว็บไซต์ออกมาหลายๆ version เช่น Desktop version กับ Mobile version เพื่อให้เว็บไซต์ของเรา สามารถแสดงผลได้อย่างเหมาะสมกับ Device นั้นๆ ซึ่งวิธีนี้จะทำให้ต้นทุนเพิ่มขึ้น ทั้งในด้านเวลาและค่าจ้างในการพัฒนา
Responsive Web Design คือ การออกแบบเว็บไซต์ด้วยแนวคิดใหม่ ที่จะทำให้เว็บไซต์ สามารถแสดงผลได้อย่างเหมาะสม บนอุปกรณ์ที่แตกต่างกัน โดยใช้ โค้ดร่วมกัน URL เดียวกัน เพื่อแก้ปัญหาดังกล่าว

หลักการของ Responsive Web Design

การจะทำ Responsive Web Design มักใช้เทคนิคหลายๆ อย่าง ร่วมกัน ไม่ว่าจะเป็น Fluid Grid, Flexible Images และ CSS3 Media Queries
เริ่มแรกคือการทำ Fluid Grid ซึ่งก็คือการออกแบบ Grid ให้เป็นแบบ Relative ซึ่งก็คือการที่ไม่ได้กำหนดขนาดของ Grid แบบตายตัว แต่จะกำหนดให้สัมพันธ์กับสิ่งอื่นๆ เช่น กำหนดความกว้างแบบเป็น % หรือการใช้ font-size หน่วยเป็น em เป็นต้น
ต่อมาคือการทำ Flexible Images  หรือการกำหนดขนาดของ Images ต่างๆ ให้มีความสัมพันธ์กับขนาดของหน้าจอแสดงผล หากรูปต้นฉบับมีขนาดใหญ่มาก เวลาแสดงในมือถือที่มีจอขนาดเล็ก ก็ควรลดขนาดลงมา เพื่อให้แสดงผลได้อย่างสวยงาม เป็นต้น
สุดท้ายคือการใช้ CSS3 Media Queries ซึ่งจะช่วยให้เราสามารถกำหนด style sheets สำหรับ Devices ต่างๆ ได้ โดยส่วนใหญ่ เราจะเขียน style sheets พื้นฐานเอาไว้ ซึ่งกลุ่มนี้ จะไม่ขึ้นอยู่กับ Devices ใดๆ หลังจากนั้นให้เราเขียน style sheets สำหรับ Devices ที่มีขนาดหน้าจอที่เล็กสุด เพิ่มขึ้นไปเรื่อยๆ จนถึงขนาดใหญ่สุด ซึ่งการเขียนแบบนี้ จะช่วยลดความซ้ำซ้อนของโค้ด และยังทำให้การแก้โค้ดในภายหลังทำได้ง่ายอีกด้วย

ข้อเสียของ Responsive Web Design

อย่างไรก็ตาม Responsive Web Design ก็ยังมีข้อเสียอยู่บ้าง เนื่องจากการเขียนโค้ดเดียว ให้รองรับหลายๆ Devices จึงอาจทำให้เกิดปัญหา เช่น โทรศัพท์มือถือที่มีหน้าจอขนาดเล็ก ถึงแม้เราจะซ่อนเนื้อหาบางส่วนที่ไม่จำเป็นเอาไว้ เช่น โฆษณา แต่ในบางเว็บบราวเซอร์ ข้อมูลเหล่านี้ยังจะถูกโหลดเข้ามาอยู่ รวมไปถึงเรื่องของ Image Resizing ที่เราไม่ได้ไปลด File Size ของตัว Image จริงๆ ทำให้โทรศัพท์มือถือจำเป็นต้องโหลดรูปเดียวกับรูปที่ใช้แสดงบน Desktop ทำให้เสียเวลาโดยไม่จำเป็น

Responsive Web Design ไม่ใช่พระเจ้า!

หลายๆท่าน คงจะเห็นแล้วนะครับว่า Responsive Web Design มีข้อดีอย่างไร และข้อเสียอย่างไร ทุกวันนี้ คนส่วนใหญ่เข้าใจว่า Responsive Web จะมาแทนที่ Mobile Web ซึ่งผมคิดว่ามันก็ยังไม่ถูกซะทีเดียว Responsive Web ยังมีข้อจำกัดในเรื่องของ performance รวมไปถึงเหตุผลทางเทคนิคบางประการทำให้มันยังไม่สามารถทำในสิ่งที่ Mobile Web สามารถทำได้ทั้งหมดครับ จะเห็นได้ว่าเว็บไซต์อย่าง facebook และ yotube ยังมี Mobile Version อยู่ เพราะต้องการให้ผู้ใช้งาน ได้รับประสบการณ์การใช้งานที่ดีที่สุด ซึ่ง Responsive Web ยังทำในจุดนี้ไม่ได้ทั้งหมด หากจะเปรียบกับสูท Responsive Web ก็เหมือนกับสูทแบบฟรีไซส์ ส่วน Mobile Web ก็เหมือนกับสูทแบบสั่งตัด ดังนั้น หากเพื่อนๆ คิดจะทำ Responsive Web อย่าลืมพิจารณาก่อนนะครับว่า มันตอบโจทย์ของเรามั้ย
Credit : http://www.siamhtml.com/

ไม่มีความคิดเห็น :

10 ขั้นตอนง่ายๆ ในการทำ OnPage SEO

ไม่มีความคิดเห็น
ข้อมูลสรุปนี้ไม่พร้อมใช้งาน โปรด คลิกที่นี่เพื่อดูโพสต์

ไม่มีความคิดเห็น :

4 ปัจจัยสำคัญในการสร้างแบคลิงค์ (Backlink)

ไม่มีความคิดเห็น

การสร้างแบคลิงค์ไปยังเว็บไซต์ หลายๆคนยังทำกันในแนวทางที่ไม่ค่อยถูกต้องกันสักเท่าไหร่ คิดว่ายิ่งเยอะยิ่งดีแต่ก็ไม่ใช่ทั้งหมด การสร้างแบคลิงค์ที่ถูกต้องนั้น ควรคำนึงถึงความสัมพันธ์ระหว่างเนื้อหาของเว็บไซต์ รูปแบบการสร้างลิงค์ หรือแม้กระทั่งการเขียนคอมเม้นต์ที่ดีไปพร้อมกัน โดยความเห็นส่วนตัวของผมไม่ค่อยชอบแนวทางการสแปมลิงค์สักเท่าไหร่ แต่เมื่อเราจำเป็นต้องทำแบคลิงค์ก็ควรทำแบบมีคุณภาพ พูดมาซะยาวทีนี้เรามาดูกันว่า 4 ปัจจัยสำคัญในการสร้างแบคลิงค์ มีอะไรบ้าง

1. Relevancy (relevant backlink)
ความสัมพันธ์ระหว่างเนื้อหา เป็นส่วนนึงที่มีความสำคัญมากในการสร้างลิงค์ กล่าวคือเมื่อบอทเข้ามาเก็บข้อมูลบนเว็บไซท์ก็จะดูเนื้อหาของเว็บนั้นๆว่าเกี่ยวข้องกับเรื่องอะไร และเมื่อมีลิงค์ออกจากหน้านั้นบอทก็จะทำการดูว่ามีลิงค์เชื่อมโยงไปยังเนื้อหาอะไร และมีความสัมพันธ์กันอย่างไร เพราะลิงค์ที่ออกจากเว็บไซท์นั้นเป็นเหมือนการ Reference ไปยังเนื้อหาอื่นๆเพิ่มเติม

2. Anchor Text < a href=" ">Text Links</ a>
อย่างที่เรารู้ๆกันอยู่แล้ว การใส่คำหลัก (Keyword) ลงไปในลิงค์จะช่วยดันอันดับการค้นหาในเสิร์ชเอนจินให้กับคำที่เราใช้ จากเหตุผลที่ว่าเมื่อเราใช้คำไหนในการสร้างลิงค์ ก็จะเป็นการบอกกับบอทให้รู้ว่าเนื้อหาของเว็บที่จะทำการลิงค์ไปนั้นเกี่ยวข้องกับอะไร แต่มีอีกส่วนหนึ่งที่คนมักลืมก็คือ ข้อความข้างๆที่ไม่ได้อยู่ในลิงค์ก็สำคัญเช่นกัน ควรวางลิงค์ใกล้ๆกับเนื้อหาที่มีความสัมพันธ์กัน

3. Status (.gov .edu …อื่นๆ)
โดเมนของแบคลิงค์นั้นก็สำคัญเช่นกัน การที่ได้แบคลิงค์จากโดเมนที่น่าเชื่อถือ ก็จะเป็นอีกปัจจัยที่ทำให้ลิงค์นั้นๆดูมีคุณภาพยิ่งขึ้น

4. Page Rank (Google PR)
คะแนน PR ของ Google จะถูกนำมาคำนวณการให้คะแนนสำหรับลิงค์ในหน้านั้นๆด้วย ยิ่งมี PR สูงแบคลิงค์ที่เราทำก็จะได้รับคะแนนสูงตามไปด้วย แต่อย่าลืมว่าปริมาณของลิงค์ออก (External Links) ก็สำคัญเช่นกัน หากมีลิงค์ออกมากคะแนนของแต่ละลิงค์ก็จะยิ่งลดลง ซึ่งไม่แน่ใจว่า Google คำนวณคะแนนยังไง แต่ถ้าตามความคิดและความรู้สึกง่ายๆก็น่าจะเป็น คะแนน PR หารด้วย External Links เช่น เว็บหน้านั้นมี PR4 และลิงค์ออก 2 ลิงค์ คะแนนแต่ละลิงค์ก็จะได้2คะแนน แต่ถ้าเว็บหน้าเดิมแต่มีลิงค์ออก 4 ลิงค์คะแนนแต่ละลิงค์ก็จะได้1คะแนน แบบนี้เป็นต้น

จาก 4 ปัจจัยข้างต้นนี้ หวังว่าจะพอมองกันออกนะครับว่าควรจะสร้างแบคลิงค์ยังไงให้เกิดประโยชน์กับเราที่สุด และหวังว่าจะไม่ Spam เว็บผมเช่นกันนะครับ ออ..อีกเรื่องครับผมเห็นมีคนเอาหน้าเว็บผมไปทำแบคลิงค์ให้ ไม่รู้ว่าหวังดีช่วยผมดันเว็บหรือว่าเพราะอะไร ไม่ต้องทำก็ได้นะครับ

ไม่มีความคิดเห็น :

Google panda คืออะไร?

ไม่มีความคิดเห็น

Google panda สำหรับผู้ที่ทำ SEO ก็คงจะรู้จักกันดี แต่สำหรับผู้ที่กำลังเริ่มต้นทำSEO ใหม่ๆ นั้น คงจะสงสัยว่า มันคืออะไร? วันนี้ผมจะมาแนะนำให้รู้จักกับ Google panda กันดีกว่าว่าจะน่ารักสู้ หลินปิง ได้รึเปล่า ^^

Google panda คืออะไร? สำหรับผู้ที่กำลังเริ่มต้นศึกษา SEO ใหม่ๆ อาจจะสงสัยนะครับ วันนี้ผมจะมาแนะนำให้รู้จักกับ Google panda ตัวนี้ที่ Google ภูมิใจนำเสนอกันเลยทีเดียว Google panda นั้นเป็นโครงสร้างอัลกอริทึ่ม (Algorithm) ใหม่ของ Google เพื่อใช้คัดกรองเนื้อหาเว็บไซต์ที่มีเนื้อหา คุณภาพต่ำ (Low Quality Site) ที่ทำการคัดลอกเนื้อหาข้อมูลมากจากเว็บไซต์อื่นๆ (Duplicate Content) ซึ่งไม่มีประโยชน์ต่อการค้นหา และจะไม่ถูกจัดเก็บ Index ซึ่งจะถูกตัดออกไปจากหน้าการค้นหา และในขณะเดียวกันเว็บไซต์คุณภาพสูง (High Quality Site) ซึ่งเป็นเจ้าของเนื้อหาเว็บไซต์จริงๆนั้น ก็จะมีอันดับที่ดีขึ้น อัลกอริทึ่มตัวใหม่ที่ออกมานี้มีผลกระทบประมาณ 11.8 % ของผลการค้นหาของเว็บไซต์โดยรวมทั้งหมด ถ้าจะให้อธิบายง่ายๆ ก็คือ อัลกอริทึ่ม นี้ทำมาเพื่อจัดการกับ พวกชอบปั่นเว็บ หรือ สแปมแบบใหม่หรือContent Farm ที่ให้คนเขียนเว็บ หรือ บล็อค ที่ "คุณภาพต่ำ" เพื่อช่วยดันให้เว็บตัวเองนั้นติดอันดับสูงๆ หรือ มาอยู่ในหน้าแรกของ Google นั่นเอง
 
Content Farm คืออะไร ? จากแหล่งข้อมูลหลายๆ แหล่ง อาธิเช่น Wiki หรือ เว็บไซต์ต่างๆ นั้นได้ให้ความหมายว่า เป็นเว็บไซต์ที่มีบทความเยอะแยะเต็มไปหมดโดยอาจจะรวบรวมมาจากเว็บไซต์อื่นๆ ไม่ได้เขียนขึ้นมาเอง ซึ่งเว็บไซต์เหล่านั้นแหละครับ Google จะมองว่าเป็นเว็บไซต์ที่ไม่มี คุณภาพ ก็จะถูกตัดลดอันดับออกไปGoogle panda จึงได้เกิดขึ้นมาเพื่อคัดกรองข้อมูลเหล่านั้นอย่างแม่นยำ ส่วนชื่อ"Panda" นั้นก็ไม่มีอะไรมากครับเป็นชื่อหนึ่งในทีมงานที่ได้พัฒนาอัลกอลิทึ่มนี้ขึ้นมานั่นเอง ซึ่ง ทีม software engineer อย่าง Matt Cutts นั้นมั่นใจเป็นอย่างมากว่าการทำงานนี้จะได้ผลเกือบ 100 % ที่จะกรอง Content Farm จากนักทำ SEO ทั้งหลายได้เป็นอย่างดี

ไม่มีความคิดเห็น :

แนะนำ jquery barcode plugin สำหรับสร้างบาร์โค๊ด

ไม่มีความคิดเห็น

จากบทความ Barcode คืออะไร?
วันนี้ผมจะมาแนะนำ jQuery Barcode Plugin เอาไว้สร้าง Barcode เพื่อใช้งานกันครับ ซึ่งสามารถรองรับชนิดของ Barcode ได้หลายแบบ เช่น ean8, ean13, code11, code39, code128, codabar 

การใช้งานก็ไม่ยากครับเพียงแค่เรา include ไฟล์ jquery-barcode.js ก็สามารถเรียกใช้งาน jQuery Barcode Plugin เพื่อสร้างบาร์โค๊ดได้แล้ว

ดาวน์โหลด

  1. <script type="text/javascript" src="jquery-1.3.2.min.js"></script>    
  2. <script type="text/javascript" src="jquery-barcode.js"></script>  

การเรียกใช้งาน

  1. <div id="bcTarget"></div>   

  1. $("#bcTarget").barcode("1234567890128""ean13");

Prototype of the barcode function

  1. barcode: function(datas, type, settings)  

datas

string

Value barcode (dependent on the type of barcode)
If barcode type include it, the presence of the checksum is not mandatory, it ise automatically recalculated
object
type : ean8, ean13, code11, code39, code128, codabar
memberType
codestring
type : std25, int25, code93
memberType
codestring
crcboolean
type : msi
memberType
codestring
crcboolean
objectcrc1 : string("mod10", "mod11")
crc2 : string("mod10", "mod11")
type : datamatrix
memberType
codestring
rectboolean (default : false)

type (string)

  • codabar
  • code11 (code 11)
  • code39 (code 39)
  • code93 (code 93)
  • code128 (code 128)
  • ean8 (ean 8)
  • ean13 (ean 13)
  • std25 (standard 2 of 5 - industrial 2 of 5)
  • int25 (interleaved 2 of 5)
  • msi
  • datamatrix (ASCII + extended)

settings (object)

visual configuration of the barcode
ParameterTypeDefault valueDetailLimitation
barWidthint1width of a bar1D
barHeightint50container height1D
moduleSizeint5largeur / hauteur d'un module2D
showHRIbooltruedisplay text (HRI : Human readable Interpretation)
bgColortext#FFFFFFbackground color
colortext#000000barcode color
fontSizeint10font size of the HRI
outputtextcssoutput type : css, svg, bmp, canvas
renderer : canvas
ParameterTypeDefault valueDetail
posXint0X origine
posYint0Y origine


อ้างอิง : http://www.gu-soft.com/site/article/barcode-jquery-plugin.html

ไม่มีความคิดเห็น :