Twitter Log File @iannnnn rec by @cyberwakeup 4hr ago (11.00น.) record #CSSsummit - 2011 @iannnnn: ขณะนี้ข้าพเจ้ากำลังดูสัมมนา CSS โลกครับ เขาจัดให้ชมออนไลน์แบบเสียตังค์ที่บ้าน โดยเจ้ามือคือ #TiGERiDEA @iPattt @warong @Rabbitinblack @iMenn @iannnnn: ใครตามผมตอนนี้อยู่คงงงๆ นะครับว่าไอ้นี่มาโหมดสาระอะไรกัน คือตอนนี้มีแขกมาบ้านเพื่อดูสัมมนาออนไลน์เรื่อง CSS ครับ เลยต้องทำจริงจังให้ดูมีภูมิ @iannnnn: เว็บนี้เอาไว้พ่นโค้ด CSS3 ไล่สี แต่งเงา มุมมนสารพัดได้ โดยหน้าตาเครื่องมือเมือน Photoshop Layer เป๊ะๆ http://t.co/XyQbarZ #CSSsummit @iannnnn: ในโลกมีฟอนต์เป็นแสนเป็นล้าน แต่ที่ใช้ในเว็บจริงๆ มีแค่ 5 ฟอนต์ ที่ Support ทุกแพลตฟอร์ม กากไหมครับ #CSSsummit @iannnnn: แต่ถ้าว่ากันจริงๆ มีอยู่ 182 ฟอนต์ที่เรียกได้ว่าเป็น Web Safe Fonts (นั่นคือเปิดในเบราว์เซอร์วินโดวส์กะแมคได้ก็สบายใจได้หน่อยละ) #CSSsummit @iannnnn: http://yfrog.com/khr4smmj ข่าวดีก็คือตั้งแต่ปี 2009 เป็นต้นมา เบราว์เซอร์ทุกยี่ห้อหลักๆ สนับสนุน web fonts แล้วครับ @iannnnn: แล้วอะไรล่ะคือ web font? (คำว่า web font มีเว้นวรรคด้วยนะครับ) #CSSsummit @iannnnn: #CSSsummit ดูสไลด์สดเรื่อง Web Typography ได้ที่นี่ครับ http://t.co/hFUVk1u (จริงๆ ต้องเสียตังค์ดูนะ แต่ไหนๆ ก็ไหนๆ แจกเลยดีกั่ว :P) @iannnnn: ปัจจุบันนี้พวกเบราว์เซอร์บนมือถือเนี่ย สนับสนุน web font แบบ TTF/OTF เป็นมาตรฐานแล้ว สบายใจได้ ไม่ต้องเสียเวลามานั่ง Convert #CSSsummit @iPattt: rt , #CSSsummit ช่วง Web font @Rabbitinblack @iannnnn @warong @iMenn @chaiyosart http://twitpic.com/5w7l84 @iannnnn: #CSSsummit ปัจจัยพิจารณาในการใช้ Web font คือ ความเร็วเซิฟเวอร์(เพราะฟอนต์ไฟล์ใหญ่), ลิขสิทธิ์ฟอนต์, ข้อจำกัดในการแสดงผลหน้าจอเรา @iannnnn: http://yfrog.com/kfazoimj การเลือกใช้ฟอนต์ให้เหมาะกับเว็บ #CSSsummit @iannnnn: การเลือกใช้ฟอนต์ให้เหมาะกับสถานการณ์ #CSSsummit http://yfrog.com/kjcxdjhj (กูจะฆ่ามึงละน้า ♡) 3hr ago .. 00.00 น. @iannnnn: #CSSsummit เรื่อง web font จบแล้วจ้ะ สัมมนาออนไลน์นี้มีสองวัน ตั้งแต่สามทุ่มยันเจ็ดโมงเช้าตามเวลาประเทศไทย ครอกกกก ˘0˘ @iannnnn: ตอนนี้วิทยากร #CSSsummit กำลังเปิดหัวข้อเรื่อง Media Queries ครับ ว่าด้วยการตั้งค่า CSS ให้เปิดเว็บเราสวยในทุกอุปกรณ์ http://t.co/l9buZRs @Rabbitinblack: rt , @iannnnn เว็บตัวอย่างที่ใช้ media queries http://j.mp/onsyYa @iannnnn: พอฟังฝรั่งพูดคำว่า Query แล้วเลยรู้ว่าที่จริงมันไม่ได้ออกเสียงว่า "คิวรี่" อย่างที่ได้ยินจากโปรแกรมเมอร์ไทยบ่อยๆ แต่เป็น "ควยรี่" ชัดเจนมากๆ @iannnnn: http://yfrog.com/hsxvioxj เหยด นี่คือรายชื่อคุณสมบัติที่สามารถกำหนด CSS เป็นแบบต่างๆ ได้ในอุปกรณ์พกพาครับ #CSSsummit @iannnnn: มีคนถามใน #CSSsummit ว่าในอุปกรณ์พกพาเนี่ย ปุ่มสำหรับนิ้วกดควรใหญ่เท่าไหร่ มีคนตอบว่า 40px ครับ ส่วนอีกคนบอกว่ามาตรฐานที่แอปเปิลใช้คือ 44px 2hr ago time 2.00am @iannnnn: พักเที่ยง 1 ชั่วโมงครับ (เที่ยงของฝรั่งนะ) #CSSsummit ส่วนคนไทยดึกแล้ว มีใครตามอ่านมั่งเปล่าวะ 555 ก็ดันไม่หื่นนี่นา @iannnnn: แขกมาบ้านเยอะมากเลยคืนนี้....... #หลบไปขี้เงียบๆ @kangg: rt , @iannnnn @mp3wizard อ้างอิงจาก iOS Human Interface Guidelines ครับ http://twitpic.com/5w9bol @kangg: rt , @iannnnn @mp3wizard อันนี้รูปที่แอปเปิ้ลเขียนแนะนำไว้เป็นตัวอย่างครับ http://twitpic.com/5w9e4j @kangg: rt , เผื่อยังไม่ทราบ...ดาวน์โหลดเอกสาร iOS Human Interface Guidelines (PDF) ของแอปเปิ้ลเอง 156หน้า ตามนี้ครับ http://bit.ly/nm3z3B 2nd stat @ 57min ago @iannnnn: เริ่ม #CSSsummit ภาคบ่าย(ของฝรั่ง)แล้วครับ สำหรับคนไทยคงไม่มีใครตื่นฟัง/อ่านแท็กนี้แล้วมั้ง 555 งวดนี้เป็นเรื่อง CSS Transition ครับ ยาก T-T @iannnnn: #CSSsummit ปรากฏว่าเรื่อง CSS Transition นั้นไม่ยากเท่าไหร่ครับ นึกภาพตอน :hover เราก็บอกแค่ div:hover {scale(2);} มันก็ x2 จากขนาดเดิมละ :D @iannnnn: #CSSsummit แต่ก็อย่างว่า ปัญหาที่ทุกเบราว์เซอร์ Support ไม่เท่ากัน ทำให้ต้องเขียน -browserprefix กันไว้ก่อนเพื่อรอสักวันจะได้เขียนเพียวๆซะที @iannnnn: http://t.co/S8BWHHD เว็บเมพ ถ้าไม่รู้จะใส่ CSS Prefix ยังไงก็เขียนกลางๆ ไว้แล้วโยนโค้ดลงไป มันจะ gen prefix มาให้ทุกเบราว์เซอร์ล่ะ @iannnnn: #CSSsummit ตอนนี้วิทยากรกำลังบรรยายเรื่องคุณสมบัติ CSS Transform แบบต่างๆ ครับ รอให้เขาปล่อย PDF ก่อนจะเอามาแจก 〈 ≥ .. ≤ 〉หาในกูเกิลก็ได้นะ @iannnnn: จะบอกว่า เรื่อง CSS Transform เนี่ยไม่ยากครับ ใครมีพื้นการเขียน ActionScript Animation อะไรแนวนี้มาก่อน เห็นศัพท์แล้วจะเก็ตทันที #CSSsummit @iannnnn: #CSSsummit วิทยากรที่กำลังบรรยาย กำลังสาธิตโดยใช้ Dreamweaver ครับ!!!! มีผู้ชมคนนึงบอกว่า "สวัสดีดรีมฯ ไม่ได้เจอกันนานแล้วนะ" 555 @iannnnn: ดึกๆ งี้ขอฟลัดไทม์ไลน์แหลกเลยละกันเด้อ มีคนสนใจตั้ง 3 คน แน่ะ @iannnnn: ความมันส์มาถึงแล้วครับ #CSSsummit กำลังพูดเรื่อง CSS Transitions (เมื่อกี้ Transform เฉยๆ แต่อันนี้เริ่มวื้บๆ ละ) @iannnnn: #CSSsummit ความเฮงซวยก็คือ เราต้องรอให้ชาวบ้านบ้านเราใช้ IE10 ขึ้นไปกันก่อนถึงจะสนุกกับ CSS Transitions ได้ .. ก็อีกสิบปีละมั้งครับ @iannnnn: http://yfrog.com/h379549745j ตารางนี้บอกว่า CSS Properties ตัวไหนบ้างที่เอามา Animate ได้บ้าง #CSSSummit @iannnnn: การเขียน CSS Transitions นั้นต้องประกาศคลุมไว้ก่อนครับว่าจะใช้กับ properties ไหนบ้าง ถ้าขี้เกียจก็ประกาศ all ไว้ก่อน แล้วค่อยเลือกจิ้มเอาได้ @iannnnn: @cyberwakeup เก็บเองเลยครับ :D ผมจะได้ขอด้วย @iannnnn: ชอบตรงมันกำหนดเวลาเป็นหน่วยวินาทีได้ เป็นธรรมชาติมนุษย์ดี :D หลักการคือบอก CSS ว่าจะขยับอะไรเป็นเวลาเท่าไหร่ (หาศัพท์กันเอาเองนะ) #CSSsummit @iannnnn: #CSSsummit เอา Transition มารวมกะ Media Queries เบรกที่แล้วแล้วจะโคตรเมพครับ นึกภาพตอนเราค่อยๆ ย่อขนาดเบราว์เซอร์ แล้ววัตถุข้างในก็ไหลวื้บๆ! @iannnnn: #CSSsummit เหยด! มี transition-timing ด้วยครับ คือกำหนดค่าความหน่วง (ease:ความหยุ่นอะไรงี้) ได้ด้วย! นี่มัน ActionScript ชัดๆ @iannnnn: http://yfrog.com/kf82ukaj เหยด นี่คือตัวอย่างโค้ดเวลาเอามาใช้ครับ ลองแกะไปเล่นหนุกๆ ได้นะ #CSSSummit @iannnnn: #CSSsummit โดยปกติแล้วไอ้พวก Transition เนี่ยมันจะเกิดขึ้นทันที แต่เราสั่งดีเลย์มันได้ด้วยนะครับ (ดูโค้ดจากทวีตที่แล้ว) @iannnnn: ตะกี้ @warong ชวนคุยเรื่อง"แล้วมันจะไม่ตีกับ jQuery เหรอ" เลยได้ข้อสรุปว่า CSS มันจบที่"ดีไซน์"ครับ ไม่รวมถึงพฤติกรรมแบบ Ajax ที่เกิดกะวัตถุ @iannnnn: ดูตัวอย่างของ CSS Transitions ง่ายๆ แต่แม่งเจ๋งน้ำตาไหลที่นี่ครับ http://t.co/SuJfUfg เลื่อนไปดูตรง Footer นะ #CSSsummit @iannnnn: แล้วยังมี pseudo-class ชื่อ :target ที่เอาไว้... เอาไว้ทำไรวะ ห่า รีบพูดจริงอีฝรั่งจรวด T-T ใครรู้ช่วยหน่อยครับ แบ่งๆ กัน #CSSsummit @iannnnn: http://yfrog.com/gy57qfwj เหยด ทีนี้เป็น 3D Transform ครับ และนี่คือตาราง Browser Compatible (IE10 เหมือนเดิม) @tpagon: rt ,, @iannnnn เอาไว้จับ element id หลัง # ใน URL ปะ http://bit.ly/oHUtfW (ตัวอย่างตามลิงค์เลย) @iannnnn: เรื่อง CSS Transform แบบ 3D นี่ไม่ไหวจริงๆ ครับ สมองไม่รับเลย แค่ดูจอก็จะอ้วกแล้ว ใครมาจ้างทำเราก็หาจ้างคนอื่นต่อละกัน -_- #CSSsummit @iannnnn: #CSSsummit ต่อไป CSS Animation ครับ! กรุณาเปิดเพลงแสตมป์! @iannnnn: (ในห้องตอนนี้) @Rabbitinblack: "โห CSS นี่มันเป็นศิลปะจริงๆ T-T" @warong: "ไม่ใช่หรอก เราย่อศิลปะลงมาเป็น CSS ต่างหาก" เหยดดดด #CSSsummit @iannnnn: ไอ้เหี้ยยยยยยยย ใช้ CSS ทำกล่องเพจเกจ 3D หมุนได้ เป็น Perspective เหยดดดดดดดดดดด #CSSsummit (ตอนนี้เหยดพร้อมกันห้าคนเลยครับ) @iPattt: #CSSsummit เหยดดดดดด CSS Transform style @iannnnn: วิทยากร #CSSsummit อีตา Greg แกพูดเกินเวลาครับ โดนดูดเสียงเลย 555 @iannnnn: http://yfrog.com/h33beaej หนึ่งคอมเมนต์จากผู้ชมชาวไทยครับ #CSSSummit @iannnnn: พี่ @iPattt บอกว่าอยากไปเช่าที่ห้องประชุมแบบ CS Loxinfo แล้วเก็บตังค์คนเขาดู #CSSsummit จังเลย คือมันคุ้มค่าในการฟลัดไทม์ไลน์จริงๆ นะครับ @iannnnn: ต่อไปเป็นเรื่อง KeyFrame Animation ครับ บรรยายโดยวิทยากรสาว คุณ Weyl #CSSsummit (วิทยากรวันนี้มีผู้หญิงกับผู้ชายเท่าๆ กันเลยครับ) @iannnnn: ตอนนี้เจ๊วิทยากรกำลังสาธิตการทำ CSS Keyframe Animation ด้วยการ...​ทำเว็บที่มีหิมะโปรยปรายให้ดูครับ -..- นี่มันยุค พ.ศ.2544 รึไง!!!!