วันจันทร์ที่ 18 กุมภาพันธ์ พ.ศ. 2556

หนังสือการออกแบบฟอนต์

http://issuu.com/todsaporn/docs/___________/1

การอัฟงานลง www.issuu.com

1 เตรียมไฟล์เป็นหน้าๆขนาดเท่าๆกันไว้โดยเตรียมเป็นหน้าเดี่ยว
ที่แอนทำคือเตรียมไฟล์รูป.jpg ขนาดเท่าๆกันไว้ประมาณ 20 รูป (20 หน้าพอดี)
จริงๆแล้วจะเป็นไฟล์ word หรืออะไรก็ได้นะที่สามารถแปลงเป็น PDF ได้

2 รวมไฟล์ทั้งหมดเป็น PDF
อันนี้จะใช้โปรแกรมอะำไรก็ได้ค่ะ ใครมี freeware แนะนำมั้ย  อ๊าง~

3 สมัครสมาชิกเว็บ www.issuu.com
ตรงนี้ข้ามเนอะ เหมือนการสมัครสมาชิกเว็บทั่วไป

4 Upload ไฟล์ PDF ขึ้นเว็บ Issuu
4.1 คลิกที่ Upload document


4.2 เลือกไฟล์ด้วยการคลิกปุ่ม browse -> ใส่รายละเอียดของไฟล์ลงไป -> คลิก upload


ถ้า upload เรียบร้อย flip book ของเราก็จะไปอยู่บนชั้น (My Library)

5 เอา link ไปเผยแพร่ต่อได้เลย
5.1 คลิกที่หนังสือของเราจะมีคำว่า Open พอคลิกที่ Open แล้วจะขึ้นอีกหน้าจอเปิดหนังสือเราขึ้นมา


เช่น แบบนี้ http://issuu.com/annkemon/docs/photobook

5.2 ถ้าจะเอาไปใส่บนเว็บเราก็คลิกที่ Embed
เลือก option ข้างล่าง
(ถ้า click ที่ more theme จะมีพื้นหลังให้เลือกเพิ่มอีกล่ะ)
แล้ว copy code ในช่อง Embed ไปใช้ได้เลย


เช่น แบบนี้ http://annkemon.multiply.com/journal/item/4/Online_Flip_Book

ถ้าคนสนใจดาวน์โหลดหนังสือของเรา
ก็สามารถคลิกที่ download แล้วจะได้ไฟล์เป็น PDF มาเลยล่ะ  เจ๋ง

จบแล้ว สั้นมาก  กร๊าก

วันเสาร์ที่ 17 พฤศจิกายน พ.ศ. 2555

font สวยๆนั้น สำคัญไฉน


     เพราะว่าการออกแบบเว็บในปัจจุบัน หรือที่เรียกว่าเว็บ 2.0 เนี่ย เค้าจะไม่เน้นรูปภาพเยอะๆ ให้เปรอะเปื้อนเว็บเหมือนเมื่อก่อนแล้วนะครับ ที่ต้องมี element เยอะๆ หยักๆ คมๆแท่ๆ เดี๋ยวนี้เอา user เป็นหลักก็คือ ดูแล้วต้องเรียบง่าย ไม่ยุ่งยาก ดังนั้นเมื่อ design น้อยลง ก็เหลือแต่ตัวหนังสือนี่แหล่ะครับ และการที่จะใช้ font เดียวกันทั้งเว็บ เหมือนเว็บผมที่ท่านได้อ่านนี้ (เหน็บตัวเองซะงั้น) ก็ออกจะน่าเบื่อจริงมั้ยครับ คงจะดีกว่าถ้าเราเปลี่ยน font ในบางจุดเช่นหัวข้อได้ นั่นเลยเป็นที่มาในการเปลี่ยน font ในเว็บให้สวยๆน่าอ่านครับ

ข้อจำกัด ของการเอา font มาใส่เว็บแต่ละแบบ

     โลกนี้ไม่ได้มีทุกอย่างที่ perfect ความจริงที่ไม่อยากฟังก็คือ ปัจจุบันเราติดข้อจำกัดในการแสดงผลบน browser ที่แตกต่างกัน ทำให้ได้ผลที่ไม่เหมือนกัน เพราะว่าการใช้คำสั่ง font ในแบบต่างๆหลายๆแบบ มันได้ผลไม่เหมือนกันเมื่อเราเปลี่ยน browser หรือ os ครับ เพราะว่าถ้าเราใช้ font ที่มีใน windows แต่คนที่เปิดด้วย mac , ipad ก็จะมองไม่เห็นแล้วครับ เพราะว่าไม่มี font ดังกล่าวในเครื่อง ดังนั้น สิ่งที่เกิดตามมาก็คือ design หน้าเว็บเราเปลี่ยนไปทันทีครับ เพราะว่าแต่ละ font มีขนาดไม่เท่ากัน ก็ได้ผลไม่เหมือนกันเลย การใส่ font ในเว็บเลยกลายเป็นดาบสองคมไป

วิธี ที่จะเอา font สวยๆมาแสดงผลในเว็บ 

     ปัจจุบัน ก็มีคนที่สรรหา วิธีการต่างๆที่จะเอา font มาแสดงผลบนเว็บมากมายหลายวิธี ในช่วงที่ผ่านมานี้ ที่จะได้รับความนิยมหน่อย ก็จะเป็นการใช้ javascript render ให้ font เป็นภาพแล้วเอามาแสดงผลแทนตัวหนังสือครับ ได้แก่วิธี Cufon, Typeface.js หรือเอา flash มาช่วยด้วยเทคนิค sIFR ก็เคยถูกนำมาใช้ในเว็บ หนังสือพิมพ์ไทยรัฐช่วงหนึ่งด้วยครับ ซึ่ง solution ที่เล่าไปแล้วนี้ เหมาะสำหรับภาษาไทยครับ แต่ว่า ถ้าเราไม่ติดว่าต้องเป็นภาษาไทยแล้ว ยังมีอีกหลายวิธีในการเอา font สวยๆมาใส่เว็บ ไม่ว่าจะเป็น @font-face, google web font, typekit, webtype เหล่านี้เค้าจะทำตัวเองเป็นผู้ให้บริการ font ไปด้วยในตัว ซึ่งหาภาษาไทยได้ค่อนข้างลำบากครับ และเป็นเรื่องของลิขสิทธ์ด้วย หรือจำนวนคนใช้ที่มีไม่มากครับ หรือวาอีกวิธีที่ถึกสุดก็คือ เอาเข้า program สร้างเป็นภาพให้เสร็จทั้งหมดแล้วเอามาแปะเว็บ นั่นก็คงไม่เหมาะแน่นอนครับ ถ้าไม่ใช่งาน graphic

นอกเหนือกว่านั้นคือเรื่องของ browser ที่แตกต่าง

    และแน่นอนว่า แต่ละวิธี ก็มีข้อจำกัดที่แตกต่างกันไปนะครับ ตัวอย่างเช่น Cufon, typeface.js เมื่อแปลงตัวหนังสือเป็นภาพ เราก็จะไม่สามารถ ปาดเพื่อ copy หรือว่า select เลือกได้เพราะว่ามันเป็นภาพของตัวหนังสือไปทั้งหมดครับ หรือว่าอย่าง sIFR เอง ถ้าจะปาด select เลือกได้แต่ก็ติดเรื่อง iphone, ipad หรือผลิตภัณฑ์ของ Apple ที่ไม่รองรับการใช้งาน flash อีกนั่นล่ะครับ ส่วนเทคนิคที่ใช้ font ที่อยู่ภายนอก เช่น google web font เอง ก็มีข้อจำกัดเรื่อง font ที่ไม่มีภาษาไทยอีก ก็จะใช้แสดงผลภาษาไทยไม่ได้ และที่ไม่ลืม ก็คือเรื่องของ browser ที่ใช้งาน เพราะว่าแต่ละเทคนิคมีข้อจำกัด ที่รองรับการแสดงผลบน browser ที่แตกต่างกัน เรียกได้ว่า ที่เล่ามายังไม่มีอะไร ที่ perfect เลยสักอย่าง แต่ถ้าอยากลองใช้งานเล็กๆ ก็ลองใช้งานกันดูได้นะครับ ที่ผมใช้บ่อยสุด ก็ cufon ครับ

เรื่องลิขสิทธ์ อย่าคิดมองข้าม

      อีกเรื่องที่คนไทยไม่เห็นค่า หรือเรียกได้ว่าไม่เห็นโรงศพไม่หลั่งน้ำตาว่าอย่างนั้น ก็คือเรื่องของลิขสิทธ์ครับ เพราะว่าคนไทยไม่ค่อยใส่ใจและให้ความสำคัญกับมันเท่าไร น้อยคนที่รู้ว่าทุก font ที่เราใช้งานนั้น มีเจ้าของ มีลิขสิทธ์แยกกันไปหมดเลยนะครับ อย่างเช่น MS sans serif,cordia UPC เจ้าของลิขสิทธ์คือ microsoft นะครับ ต้องไปอ่านว่าเค้ายอมให้เราเอาไปทำงานได้มากน้อยแค่ไหน แต่ว่า ในการทำงานจริง เราก็หา download font ที่สวยๆมาใช้ ถ้าเราไปเอา font ที่ติดลิขสิทธ์ มาทำงานแล้วเผยแพร่ออกไป เกิดเจ้าของ font มาเห็น เค้าสามารถฟ้องเรียกค่าเสียหายจากการละเมิดได้เลยนะครับแล้วปฏิเสธไม่ได้ เพราะว่าจำนนด้วยหลักฐานครับ เท่าที่ผมเคยเห็นการฟ้องร้องและ ไกล่เกลี่ยกันอยู่ที่หลักหมื่นบาทครับ ก็คงแล้วแต่งานที่ทำด้วยครับ
ดังนั้นเรื่อง font ที่เหมือนเป็นเรื่องเล็กๆ แต่ว่ามีเรื่องที่ต้องพิจารณาอยู่มากเลยนะครับ ไม่ใช่แค่เลือกว่าจะใช้ font อะไร ก็เอามาใช้ได้ ต้องคิดไปถึงการแสดงผล การเข้ากันได้กับ browser ต่างๆอีก เรียกได้ว่าเยอะครับ

ที่มา : http://meewebfree.com/site/start-website-builder/363-standard-font-web-safe-compatibility-display

วันพุธที่ 14 พฤศจิกายน พ.ศ. 2555

บันทึกการเรียนการสอนสัปดาห์ที่ 1

ให้นักศึกษาสมัคร E-mail ของ google โดยใช้ชื่อจริงนำหน้า สมัคร google+ แล้วค้นหาเมลล์ prachid2009@gmail.com สมัครบล๊อกส่วนตัวของ blockspot โดยใช้ชื่อ ARTD2304-..(ชื่อจริงตัวเอง)
แล้วบัทึกการเรียนการสอนในแต่ละสัปดาห์ลงในบล๊อกนั้นๆ เข้าไปทำแบบสำรวจในบล๊อกของอาจารย์ก่อนวันศุกร์นี้(9 พ.ย)  และเช็คข่าวสารทุกๆ 3 วัน

การบ้าน...เลือกฟอนต์ 3 ตัว
หาชื่อ อธิบายลักษณะ หาชื่อผู้ออกแบบ อธิบายที่มาไรงี้โดยฟอนต์ตัวแรก
ต้องเป็นภาษาอังกฤษ และคิดงาน Gif on the moon ด้วย...
และให้เข้าศึกษา ค้นคว้าตามเว็บต่างๆ ดังนี้..

http://typefacesdesign.blogspot.com/
http://arit.chandra.ac.th/dokeos
http://www.chandra.ac.th/th/ecourse
http://www.issuu.com/
http://www.sites.google.com/site/srtdi2305 
http://www.f0nt.com/
http://typography.wordpress.com/ 
http://www.fonts.com/ 
http://www.dafont.com/ 
http://prachid.com/
http://www.chandra.online.ac.th/ 
http://art.chandra.ac.th/claroline/
http://www.chandraonline.info/
http://www.issuu.com/orops/typography
http://www.pinterest.com/