Back to iWebsmile.com

Mobile first คืออะไร?

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

มาเข้าเรื่องเลยดีกว่า

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

การใช้ CSS Filters ในการปรับแต่งภาพ

ในสมัยยุคแรกของคนทำเว็บการปรับแต่งภาพเป็นเรื่องที่ยากลำบากมาก เพราะในการปรับแต่ละครั้งก็ต้องเข้าไปที่ Photoshop เพื่อแต่งภาพแล้วมาอัพโหลดทับเข้าไปอีก กว่าจะเปิดโปรแกรมแต่ละตัว กว่าจะ Login FTP เข้าไป Upload file เรียกได้ว่าเหนื่อย

ในบทความนี้เป็นเรื่องของการ Filters ภาพเรียกได้ว่า Photoshop ทำอะไร CSS ก็ทำได้เช่นกัน ผมหวังว่าบทความนี้จะเอาไปใช้ประโยชน์กันได้นะครับ

เริ่มการใช้งาน

Property ของ CSS จะใช้คำสั่ง

filter: function(value);

และก็ใส่ Prefix สำหรับ Browser แต่ละตัวกันด้วยก็จะได้แบบนี้ครับ

filter: function(value);
-webkit-filter: function(value);
-moz-filter: function(value);
-o-filter: function(value);
-ms-filter: function(value);

Continue reading

The difference between JPG and JPEG

วันนี้ผมขอยกหัวข้อนี้ขึ้นมาเพราะเท่าที่เจอยังมีคนไทยหลายคนเลยทีเดียวครับที่ยังสงสัยอยู่ว่าไฟล์รูปภาพที่มีนามสกุล .jpg กับ .jpeg มันต่างกันตรงไหน

คำตอบ ไม่ต่างกันครับ เป็นอันเข้าใจแล้วนะครับจบโพสต์หัวข้อนี้ = =’

ฮาๆ ถ้าจะจบกันแบบคำตอบดื้อๆ ก็คงจะทำให้หลายๆ คนงงกันไปงั้นผมจะอธิบายให้เข้าใจนะครับว่า 2 Extension นี้มันมีที่มาที่ไปยังไง? ทำไม? ต้องมี 2 แบบ Continue reading

หยุดใช้ IDs Selector กับ CSS

หยุดใช้ IDs Selector กับ CSS

จริงๆ เรื่องนี้ไม่ใช่เรื่องใหม่แต่อย่างใด ในเมืืองนอกได้มีการเขียนเกี่ยวบทความนี้ไว้หลายครั้งมาก ซึ่งผมเองก็เพิ่งจะได้ลองศึกษาอ่านดู ก่อนอื่นเราต้องทำความเข้าใจก่อนว่า Selector ใน CSS นั้นจะมี Points อยู่ เช่น

Element Selector (body, ul, li) = 1 points
Class Selector (.classname) = 10 points Continue reading

CSS Short hands

ผมเชื่อว่า Web Designer หรือ Web Developer หลายๆ คนต้องเคยปรับแต่ง แก้ไข หรือเคยเขียน CSS กันมาแล้ว และหลายๆ คนก็คงงงกับการเรียกใช้ Property ผมจะขอทบทวน CSS เบื้องต้นให้ท่านได้อ่านทำความเข้าใจง่ายๆ ก่อนนะครับ

Cascading Style Sheet หรือที่เราเรียกย่อๆ กันว่า CSS คือ ภาษาหรือชุดคำสั่งในการจัดการหน้า HTML เพื่อให้การแสดงผลถูกต้อง เช่นการกำหนดสีพื้นหลัง สีอักษร จัดโครงสร้างหน้า HTML เป็นต้น Continue reading

การสร้าง Mobile Application ด้วย Dreamweaver (Starter)

สำหรับคลิปนี้ ผมขอพูดถึงการสร้าง Mobile Application จากโปรแกรม Adobe Dreamweaver CS6 และการนำชุดสีจาก jQuery Mobile Swatches บนโปรแกรมและการ Download Themes color swatches มาใช้งาน (สำหรับผู้เริ่มต้นนะ) Continue reading

Cross Media

Cross-Media คือรูปแบบการตลาดชนิดหนึ่งที่สื่อสารกับผู้พบเห็นด้วยความรู้สึก โดยมุ่งเน้นไปยังพฤติกรรมของผู้บริโภคที่ใช้สื่อออนไลน์ ในปัจจุบันสื่อที่เราพบเห็นกันบ่อยๆ ได้แก่

  • E-mail marketing การส่งอีเมล์เพื่อเผยแพร่ข่าวสารหรือกิจกรรม
  • Social network เช่น Facebook, Twitter, Linkedin, Pinterest เป็นต้น
  • Website แหล่งรวม Multimidia ต่างๆ เช่น Video Sound และอื่นๆ อีกมากมาย
  • Content media หรือข้อความอักษรที่ดึงดูดผู้ที่สนใจ
  • สื่ออื่นๆ Continue reading

Web parallax VS Responsive web design

HOT!!  Web design trends ผมว่าในเวลานี้ ณ ตอนนี้เอง เทรนการออกแบบเว็บไซต์ ที่สุดจะฮิตกันมากเนี่ย!! คงจะหนีไปไม่พ้น เว็บไซต์ 2 สไตล์นี้แน่ๆ เลยครับ ตามหัวข้อเลยครับ Web parallax กับ RWD (Responsive web design) ผมก็เคยลองมานั่งคิดดูนะครับว่า เอ๋! ทำไมเว็บไซต์ 2 รูปแบบนี้เนี่ย มันถึงฮ็อตฮิตกันเหลือเกิน แล้วถ้าเราจะทำเว็บสักเว็บหนึ่ง จะเลือกทำแบบไหนดีน่ะ ผมก็เลยเข้าไปหาอ่านบทความในอินเตอร์เน็ต แต่ก็ไม่มีใครสักคนจะพูดถึงเว็บ 2 ตัวนี้ให้เราเข้าใจเลย วันนี้ผมก็เลยขอใช้ความเข้าใจส่วนตัวนำเสนอบทความนี้ เพื่อให้คนอ่านเนี่ย สามารถที่จะลองคิดดูซิว่า สิ่งที่ผมคิดจะตรงกับใจใครบ้างไหม หรือใครจะมีข้อมูลดีๆ จะแนะนำผม มันก็คงจะเป็นจุดริเริ่มที่เราจะได้แชร์ไอเดียกันนะครับ โอเคผมเข้าเรื่องเลยล่ะกัน Continue reading

เรื่องเล็กๆ ที่มือใหม่ มือโปรไม่รู้

คุณรู้หรือไม่ว่า “เว้นวรรค” ด้วยการกด Spacebar บนคีย์บอร์ด หรือการกด Ctrl + Shift + Spacebar มีผลแตกต่างกัน โดยปกติที่เราทราบกันคือ ถ้ากด Space bar ในโค้ด HTML จะสร้างช่องว่างให้ ” ” แต่ถ้าเรากด Ctrl + Shift + Spacebar จะสร้างโค้ดให้ “ ”
แต่คุณรู้หรือป่าวว่าถึงแม้ว่าผลลัพธ์ในการแสดงจะเหมือนๆ กัน แต่ทำงานแตกต่างกันนะ
ยกตัวอย่างผมจะพิมพ์คำว่า “Responsive Web Design” มาดูตัวอย่างกันดีกว่า Continue reading

Responsive Web Design & Extension Grid

Responsive Web Design ?

เทรนใหม่สำหรับเว็บดีไซน์

ณ บัดนี้ต้องยอมรับว่ากระแสสมาร์ทโฟน ยี่ห้อต่างๆ มาแรงเหลือเกินไม่ว่าจะเป็น iPhone, iPad, Samsung Galaxy รุ่นต่างๆ ดังนั้นตัว Adobe CS6 นี้ได้จึงได้ตอบโจทย์ให้กับเทรนใหม่นี้ด้วย New Features บน Dreamweaver CS6 รองรับการทำงาน Responsive web design ได้เป็นอย่างดี ลองชม Video Tutorial Responsive web design & extension grid ดูครับ Continue reading

Adobe Widget Browser

เครื่องมือระดับเทพ สำหรับนักออกแบบเว็บไซต์
God Tool 4 Web Designer

วันนี้ผมขอเอาเครื่องมือสำเร็จรูปที่ทาง Adobe รวบรวมไว้ให้เราใช้กัน ตัวนี้มีชื่อว่า Adobe Widget Browser ครับ ตอนแรกเนี่ยผมก็ไม่กล้าเล่นกลัวว่ามันจะต้องเสียเงิน แต่พอลองเล่นดูก็สามารถดาวน์โหลดมาใช้งานได้เลยครับ ซึ่ง Script นั้นก็เป็นของ Programmer จากหลายๆ ค่าย Continue reading

Review + Tutorial Adobe Muse

วันนี้ผมทำ Review + Tutorial Adobe Muse มาให้ชมกัน เนื่องจากว่า Muse กำลังอินเทรดอย่างแรงในหมู่เหลา Designer ทั้งหลาย ผมก็เลยขออินเทรนกะเค้าบ้างนะอย่าว่ากัน

ตอนนี้ Adobe Muse กำลังเปิดให้ทดลองใช้กันฟรีๆ ก่อนจะเก็บตังค์ โดย Adobe Muse จะเปิดให้บริการแบบรายเดือน ส่วนเรื่องราคาผมจำไม่ได้ว่าประมาณกี่เหรียญ โดยทาง Adobe ให้ทำ Muse ออกมาเพื่อเป็นทางเลือกกับ Web Designer ระหว่าง Adobe Dreamweaver กับ Muse มาให้เลือกใช้ เพราะว่าตัวราคาของ Dreamweaver เองก็ไม่ใช่ถูกๆ เลย Continue reading

กระชับไฟล์ CSS ให้เล็กลงเพื่อการโหลดที่ไวขึ้น

สำหรับ Web Designer แล้วหลายต่อ ต่อหลายคน ที่ไม่เคยเรียน Programming หรือโค้ดทางด้าน CSS HTML มาบ้าง อาจจะไม่ทราบข้อนี้

การเขียนโค้ด ลักษณะที่ยาวเป็นบรรทัดเดียว จะทำให้ ไฟล์ นามสกุล .html หรือ .css หรือไฟล์โปรแกรมใดๆ ก็ตาม จะมีขนาดที่เล็กลง และจะช่วยใช้การโหลดบนหน้าเว็บไซต์ของเราเร็วขึ้นทันตาเห็นทีเดียว
ตัวอย่างเช่น
body{
margin:0 auto;
background-color:#999;
}
แล้วคุณลอง Save ไฟล์ CSS ใครเครื่องของผมได้ไฟล์ขนาด 48bytes แต่พอผมเปลี่ยนเป็นแบบนี้ Continue reading

Adobe Flash Catalyst

เมื่อวันที่ 26 สิงหาคม 2554 ผมได้ไปงานสัมมนาหัวข้อ Keep you ahead on CS5.5 & Any Screen ของบริษัท ITSC จำกัด โดยมีวิทยากร 2 ท่านคือ อ.ขจร พีรกิจ และ คุณธีรเศรษฐ์ จิรภัทร์ชาญเดช

ซึ่งทำให้ผมรู้จักกับความสามารถของใหม่ๆ ของ Adobe CS5.5 ที่ผมมองข้ามไป โดยก่อนหน้านั้นผมมองเพียงแค่ว่า CS5.5 มันคงไม่ต่างอะไรจาก CS5 หลอกคงแค่แก้ Bug โปรแกรมซะมากกว่า แต่เมื่อได้เข้ามางานสัมมนานี้ ทำให้ผมมองเปลี่ยนจากเดิมเลยทีเดียว Continue reading

What’s Dummy Text? มารู้จักกับดัมมี่เท็กซ์

คุณคือนักออกแบบใช่ไหม?
You‘re designer?

สำหรับนักออกแบบทั้งมือใหม่และมือเก๋าทั้งหลายที่ยังไม่รู้จักกับ Dummy Text จะต้องประสบกับปัญหาแบบนี้ เหมือนๆ กันทุกคนแน่นอนครับ

D : คุณมีเนื้อหาสักเล็กน้อยให้ผมจัดใส่ งานออกแบบที่จะมานำเสนองานของคุณไหมครับ
C : เนื้อหายังไม่มีให้เลยค่ะ เพราะว่าทางเราก็ยังเตรียมข้อมูลไม่เสร็จ
D : -..-” กำ!! (แล้วตรูจะเอาเนื้อหาไรใส่ให้มันว่ะ)

จากตัวอย่าง Conversation ด้านบนทำให้เหล่า Designer ทั่วโลกที่เราอยู่ใบนี้รวมตัวกันก่อตั้ง สมาพันธ์ Dummytext ขึ้นมา เหอๆจริงๆแล้วมั่วครับ Dummy Text หรือในที่รู้จักกันของคนไทยคือ Lorem Ipsum สำหรับ Designer คงเป็นที่รู้จักกันดีแน่ๆ ครับ เพราะว่าอะไร ก็เพราะว่า.. ในการออกแบบ ไม่ว่าจะเป็น Graphic Design, Web Design ก็จะต้องมีเนื้อหา Continue reading

© 2010-2013 iWebSmile — all right reserved.