Rss

  • youtube
  • linkedin
  • google

Archives for : เว็บดีไซต์

ทดสอบการแสดงผลของเว็บไซต์กันสดๆบน smartphone และ tablet โดย Adobe Edge Inspect

ติดตั้งและใช้งาน ADOBE EDGE INSPECT

สำหรับคนที่คิดจะทำเว็บไซต์ในปัจจุบัน ไม่ว่าจะทำเป็น Fix-layout หรือ  Responsive Layout ก็ตาม สิ่งที่น่าปวดหัวสำหรับนักออกแบบเว็บไซต์มืออาชีพก็คือ ทำอย่างไรจะให้แสดงผลได้สวยงาม กับอุปกรณ์ที่หลากหลาย ด้วยเหตุนี้ Adobe จึงสร้างโปรแกรมที่ชื่อว่า EDGE Inspect ขึ้นมาช่วยเหลือนักออกแบบและนักพัฒนาเว็บไซต์ เพื่อให้แสดงผลในอุปกรณ์ต่างๆได้ทีเดียวพร้อมๆกัน ไปดูกันว่าทำได้อย่างไร

รู้จักกันก่อน Adobe EDGE Inspect โปรแกรม Adobe Edge Inspect ทำให้ Web designer สามารถทดสอบเว็บที่กำลังสร้างบน PC Workstation ไปแสดงผลใน smartphone และ tablet ได้ทันที ทำให้ลดเวลาในการทำงาน และยังเชื่อมต่อโดยตรงกับ Google Chrome และสามารถเรียกใช้งานจากโปรแกรมอื่นๆ ใน Adobe Creative Cloud ได้ทันที สำหรับคนสมัคร Adobe Creative Cloud แบบทดลองใช้งาน จะเชื่อมต่อกับ Smartphone หรือ Tablet ได้ทีละเครื่องสำหรับคนที่จ่ายเงินซื้อลิขสิทธิ์แล้ว สามารถเชื่อมต่อกับ Smartphone หรือ Tablet ได้ไม่จำกัดจำนวนเลยทีเดียว

อ่านเพิ่มเติมใน bakerymedia.com

RESPONSIVE WEB DESIGN คืออะไร

responsive web design (RWD) เริ่มเป็นที่นิยมใช้กัน และพูดถึงกันมากขึ้น จนกำลังจะมาเป็นมาตรฐานใหม่ของการออกแบบเว็บไซต์ไปแล้ว สำหรับนักออกแบบเว็บไซต์แล้ว ถ้าไม่รู้จัก RWD อาจจะบอกได้ว่าตกยุก

และด้วยการเกิดของโทรศัพท์สมาร์ทโฟน, iPads และจอภาพอื่น ๆ ที่มีขนาดแตกต่างกันอัตราส่วน ขนาด ความละเอียดของจอภาพ ดูเหมือนว่าเราจะควบคุมมันได้ยากขึ้นมากๆ ดังนั้น RWD เข้ามาอาสาแก้ปัญหาตรงนี้

ในบทความนี้ผมจะอธิบายวิธีการที่ใช้ในการออกแบบสำหรับอุปกรณ์ที่แตกต่างกัน สิ่งที่หน้าจอขนาดและความละเอียดที่ควรจะนำมาพิจารณา และวิธีการทำงานของ RWD  และมุมมองในการออกแบบ

หาคำตอบเพิ่มเติมได้ที่ http://wp.me/p4ztX6-aN

การใส่รูปภาพลงในเว็บเพจ…แบบ HTML

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

             คำสั่ง ในการ ใส่รูปภาพ ลงใน เว็บเพจ นั้น เราต้อง มารู้ จัก เกี่ยวกับ รูปภาพ ที่เรา 
จะนำมาใส่ในเว็บเพจเสียก่อน รูปภาพที่จะนำมาใช้ใส่ลงในเว็บเพจ นั้น ส่วนมาก มีนามสกุล เป็น GIF และ JPG ไฟล์

                รูปภาพ แบบ GIF ย่อมาจาก Graphics Interchange Format เป็นไฟล์ ชนิดบิตแมป (Bitmap) ภาพ ไฟล์ GIF นี้ ส่วนใหญ่ จะนิยม ใช้กับ ภาพถ่าย และภาพการ์ตูน แสดงผลเป็น ภาพนิ่ง แต่ใน ปัจจุบันมี โปรแกรม สำหรับทำ หน้าที่ รวบรวม ภาพ GIF หลาย ๆ ภาพ เข้าเป็น ไฟล์เดียวกัน เมื่อนำ ภาพมา แสดง ทำให้เกิด เป็นภาพ เคลื่อนไหวขึ้น 

                 ไฟล์รูปแบบ JPG ย่อมาจาก Joint Photographic Expers Group เป็นไฟล์ใน รูปแบบ ที่ผ่าน กระบวน การบีบย่อย ข้อมูล มาก่อน มีการ นำเอา ข้อมูล ส่วนที่ ไม่สำคัญ ออกไป แล้วทำการ บีบอัด ข้อมูล  

การใส่รูปภาพลงในเว็บเพจ 
รูปแบบ  <IMG ALIGN=align-type BORDER=n HEIGHT=n WIDTH=n HSPACE=n VSPACE=n SRC=address ALT=text>

ALIGN           =     align-type(ตำแหน่ง) เป็นการ กำหนด ตำแหน่ง รูปภาพ ถ้าภาพไม่ ใหญ่ ข้อความ นั้นจะ อยู่ ที่ตำแหน่ง ส่วนล่าง 
                              ของภาพ ทางขวา มือเสมอ เราสามารถ กำหนดได้ โดยใช้คำต่าง ๆ เหล่านี้
LEFT             =     วางภาพที่ตำแหน่งทางซ้าย
RIGHT           =     วางภาพที่ตำหน่งทางขวา
TOP              =      วางภาพ ที่ตำแหน่ง ด้านบน
MIDDLE       =      วางภาพ ที่ตำหน่ง กึ่งกลาง
BOTTOM     =      วางภาพ ที่ตำแหน่ง ด้านล่าง
BORDER    =       n    เป็นการ กำหนด กรอบให้ รูปภาพ n มีค่ามาก กรอบจะ มีความหนา มากขึ้น
HEIGHT       =       n    เป็นการ กำหนด ความสูง ของภาพ
WIDTH         =      n    เป็นการ กำหนด ความกว้างของภาพ ถ้าต้องกา ให้ภาพได้สัดส่ว ให้กำหน เป็นเปอร์เซนต์ โดยไม จำกัดความสูง
VSPACE     =      n    กำหนด ระยะ ห่างบน ล่างของ ภาพ
HSPACE     =      n    กำหนด ระยะ ห่าง ซ้าย – ขวา ของภาพ
SRC             =      ใส่รูปภาพที่ต้องการลงไป
ALT              =      text   ใส่ข้อควา เพื่อเป็นคำอธิบายรูปภาพที่นำมาวางสำหรับผู้ใช้อินเตอร์เนตแบบเท็กซ์

ข้อสังเกต ALIGN ไม่สามารถ กำหนดให้ รูปภาพ ไปปรากฎยังกึ่งกลาง ของจอภาพ ได้ ถ้าต้อง การให้ อยู่ตำแหน่งดังกล่าว ให้ใช้คำสั่ง <CENTER>…<CENTER>

การแสดงภาพฉากหลัง
รูปแบบ BACKGROUND="picture"


กำหนด แอตทริบิวต์ BACKGROUND="picture" ในคำสั่งของ <BODY> เช่น <BODY BACKGROUND="hot.gif">

ขอขอบคุณแหล่งที่  : https://sites.google.com/site/class0223/learnhtml

Adobe Muse Intron

มาดูกัน Adobe Muse ทำอะไรได้บ้าง แล้วจะบอกว่า มันง่ายอย่างนี้เลยเหรอ

YouTube Preview Image

 

Bakerymedia.com

รวม 13 ฟอนต์ไทยแห่งชาติในรูปแบบ WEBFONT เพื่อใช้แสดงผลในเว็บไซต์

รวม 13 ฟอนต์ไทยแห่งชาติในรูปแบบ Webfont เพื่อใช้แสดงผลในเว็บไซต์

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

ต่อมาเทโนโลยีพัฒนามาสู่ Webfont (CSS3 @font-face) ที่สามารถดึง font จากเรื่อง Server มาแสดงผลได้ เช่น Google Webfont แต่อย่างไรก็ตาม ภาษาไทยก็ยังไม่มีให้ใช้ การใช้ฟอนต์ภาษาไทยสวยๆในเว็บด้วย CSS3 @font-face รวมไปถึงการแปลงฟอนต์จากเว็บ Fontsquirrel ก็อาจจะมีปัญหาบ้าง เพราะตัวเครื่องมือที่ใช้ในการแปลงนั้นไม่มี Preset

จนถึงวันนี้ ข่าวดี 13 ฟอนต์ไทยแห่งชาติ ถูกบรรจุใน Webfont แล้ว ที่สำคัญ ฟรี วันนี้เลยได้รวบรวม 13 ฟอนต์ฟรีมาตรฐาน จากสำนักงานส่งเสริมอุตสาหกรรมซอฟต์แวร์แห่งชาติ (SIPA) มาแปลงเป็นเว็บฟอนต์เพื่อให้ดาวน์โหลดไปใช้งานกันได้เลย

 

วิธีการใช้งานก็แค่ดาวน์โหลดชุด Webfont ของฟอนต์ใดๆด้านล่าง และเมื่อแตกไฟล์ออกมาจะมีไฟล์ index.html ซึ่งภายในจะมีวิธีการติดตั้งฟอนต์ลงในเว็บไซต์ไว้เรียบร้อย

อ่านต่อได้ที่นี่ครับ

Top 10 Best Product in Home Kit 2017 Top 10 Best Product in Women Fashion 2017 Top 10 Best Product in Technology 2017 Top 10 Best Product in Car Accessories 2017