Best HTML5 Books

พอดีช่วงนี้เริ่มว่างแล้วกำลังเริ่มอ่าน HTML5 เพราะ
มันมีโครงสร้างรูปแบบใหม่ เปลี่ยนอะไร ๆ หลาย ๆอย่าง
ลองไปหาข้อมูลมาว่าหนังสือ HTML 5 เล่มไหนที่ดี ๆ
บางเว็บก็บอกว่า 5 เล่ม บางเว็บก็ 6 ถึง 8 เล่ม โอ้วๆๆ
จะเยอะไปไหนเนี่ย อ่านหมดก็เป็นเทพเลย
อ่านเล่มเดียวให้จบก็โหดโครตแย้ว เพราะขี้เกียจเหลือเกิ๊น แฮะๆๆ
อ่านเยอะไม่ใช่ว่าจะได้หมด อ่านหลัก ๆ แล้วลองไปต่อยอดเอาจะดีกว่า

อังขอแนะนำสองเล่มนี้ก่อนแล้วกันนะ

1.Introducing HTML5



คืออยากให้รู้ basic ของ HTML5 กันเลย ถ้าพื้นฐานคุณดี อะไรๆมันก็จะง่ายขึ้น

2.HTML5 for Web Designers



จริง ๆ แล้วคนที่เป็นเว็บ design สมควรที่จะรู้พื้นฐานพวกนี้ด้วย เพราะเวลาท่าน design ออกมา จะได้ง่ายสำหรับคนทำ code ต่อไป

ลองไปหาอ่านดูนะ ถ้าคุณอยากจะพัฒนาตัวเอง ^^

WTF is HTML5 and Why We Should All Care (Infographic)

วันนี้ขอเอาความรู้มาฝากกันเล็กน้อย ถึงแม้จะไม่เยอะนะค่ะ ตัวอังเองยอมรับว่ายังไม่ค่อยเข้าใจมันมากเท่าไร (เพราะไม่ได้อ่าน) :P แต่เห็นว่ามันน่าจะมีประโยชน์ สำหรับหลาย ๆ ท่าน ตอนนี้หลายๆๆ ค่ายกำลังมุ่งไปที่ HTML 5 กับ CSS3 ตัวเราเองก็กำลังลุ้นตัวโกง ว่าเมื่อไร IE6 จะจบสักที 55555+ (แอบเกลียดมันเล็กน้อย) เพราะเป็น browser ที่มีปัญหาอยู่ตลอดง นั่งเชียร์ HTML5 + CSS3 เพราะถ้าสองตัวนี้ ขึ้นมาครองโลก เราจะทำงานได้ง่ายขึ้นเยอะๆๆๆๆ


ดูในนี้ภาพคงเล็ก ลองไป save as ภาพกันที่นี้นะค่ะ
http://media.focus.com/images/uploaded/fyi/wtf-html5-infographic/HTML5__.jpg


Thanks to Website:
http://www.focus.com

25 Advanced CSS Techniques

มาดู css ที่เจ๋ง ๆ กันเต๊อะ หลังจากที่ห่างหายๆๆๆๆๆๆๆไปซะนาน เดือนกว่า ๆ ได้มั่ง

css เป็นเครื่องมือที่ช่วยเว็บให้แสดงผลได้ตามต้องการ ส่วนใหญ่ฉันชอบใช้ css มากกว่าพวก Javascript หรือ Jquery
แต่ css มันมีข้อจำกัดในตัวมันเอง ดังนั้นการใช้ร่วมกับ Java หรือ Jquery จะทำให้มีประสิทธิภาพมากยิ่งขึ้น แต่สุดท้ายฉันก็ยังคิดว่า CSS เป็นทางที่ดีสำหรับเว็บอยู่ดี

1. CSS Gradient Text and Background



มันอาจจะไม่ดีมากหนักเหมือนคุณใช้ background image เป็น gradient แต่ css จะช่วยให้เว็บคุณโหลดได้เร็วมากขึ้น
- CSS Gradients
- Background gradients and CSS

การ Gradient Text ทำอย่างไร ?


- CSS Gradient Text Effect
- Pure CSS Text Gradient

2.Image Overlay Using Z-Index



property ของ z-index มันเป็นขั้นลำดับชั้นของ element คุณสามารถใส่รูปหรือ text ให้อยู่ด้านบนซึ่งกันและกัน
- Understading Z-Index
- CSS Z-index

3. Using the CSS Boder Creatively



- CSS Box Border test เว็บนี้เป็นประโยชน์มากมาย เพราะคุณสามารถสร้าง border ได้บนนี้ แล้วนำ css มาใช้งานได้เลย
- Border-images CSS3 เฉพาะ CSS3
- CSS Side Border ใช้ css ในการเรียก images



- Create a Scalable Star using using CSS border
- Border Slants

4. A Cool CSS Effect - Dashboard



- Dashboard สามารถสร้าง effect โดยใช้ css ได้

5. Creating 2D/3D buttons using CSS



สามารถสร้าง buttons สวย ๆ ขึ้นมาได้โดยใช้แค่ css อย่างเดียว
- 3D Rollover Button using CSS
- How to make sexy buttons with CSS
- CSS rollover buttons

6. Text Embossing/Shadow Technique With CSS



1. text-shadow: 0px 1px 0px #e5e5ee;
คุณสามารถนำเทคนิคนี้มาใช้ในการสร้าง text ให้เหมือน iPhone
- Text Embossing
- CSS Text Drop Shadows

7. Iconize Text links/Hyperlink with CSS



- Add icon to the hyperlink.
- Iconize Textlinks with CSS

8. CSS Curly Quotes



- Curly Quotes with Pure CSS
- Swooshy Curly Quotes Without Images

9. Using CSS Opacity for Various Cool Effects



- A CSS only fly-out menu with transparency
- CSS Menu using CSS opacity property
- Opacity Background Blending Effects
- Transparency Menu Watermark on an image

10. Blurry Background Effect



กูรู Chris Coyier
- how to create a blurry background using CSS

11. CSS Parallax Effect



- Examples of and How to Create the CSS Parallax Effect
- A parallax illusion with CSS: The Horse in Motion

12.Create a Lightbox effect only with CSS



นี้เป็นเป็นประโยชน์ที่อันหนึ่งที่ใช้ css และ javascript นิดหน่อย ที่ใช้สร้าง lightbox
- technique

13.CSS-Only Accordion Effect



- create Accordion using CSS

14. Add grunge Effect to Text Using Simple CSS



นี้เป็นการสอนสั้น ๆ คุณสามารถดูการ add effect ให้กับ text โดยใช้แค่หนึ่งรูปเท่านั้น
- tutorial

15.Create a Block Hover /Element Hover Effect



- Learn how to create a block hover effect for a list of links
- CSS element hover effect.

16. Simple Dither Effect using CSS



- dither effect

17. Create a liDock Menu



- Horizontal Menus That Grow on You

18. CSS Hover Swap Effect



- CSS swap hover effect

19. Polaroid effect using CSS



คุณชอบภาพแบบ Polaroid ไหม คุณสามารถสร้างรูปภาพให้เหมือน Polariod ได้
- Polaroid-izing photos with CSS and one Image.

20. CSS Magazine Style Layout



- Create a Magazine Type layout Using CSS

21. CSS Hoverbox Menu



นี้เป็น menu ที่เทห์จริงๆ เลย ใช้ image กับ css
- cool CSS Menu

22. CSS TABS - CSS Only “DOM TABS”



นี้ดีกว่า ใช้ css อย่างเดียวเลย ไม่มี jquery หรือ Javascript สักนิดเลย สุดยอด เราสามารถเอามาดัดแปลงได้เลย
- Create a Tabbed content

23. CSS Magic with Fixed Background-attachment



- shows a trick that reveals a magic

24. CSS tooltips



- Show a message when hovering over the links.

25. Pure CSS Preloader



- Add a “loading” icon to your larger images

CSS Tricks ที่ต้องรู้สำหรับขั้นสูง

1. Absolute positioning inside a relative positioned element.
การใส่ absolute อยู่ใน relative เราต้องกำหนดคำนวณตำแหน่งให้กับ absolute นี้เป็นเทคนิคที่เยี่ยมมากทีเดียว
สำหรับการ stick ตำแหน่งที่คุณต้องการ


สามารถอ่านเพิ่มเติม
PositionisEverything
W3 Specifications

2. Z-Index and positioning
มีหลายครั้งที่ designers ชอบ design object ซ้อนกัน หรือทับกัน z-index ก็เป็นวิธีที่ช่วยได้อีกหนึ่งอย่าง
สำหรับ web develop ข้อจำกัดในการใช้ z-index นั้น เราต้องกำหนดค่าของ position ด้วย ไม่ดังนั้น z-index จะไม่ทำงานได้
จำไว้ง่าย ๆ ว่า ถ้ามี z-index ก็ต้องมี position ตามมาด้วย มันเป็นกฎของตัวมันเอง


สามารถอ่านเพิ่มเติม
Z-index Screencast
W3 Specifications

3. Margin Auto
มีใครหลาย ๆ คนสงสัยว่าอยากจะให้ box element อยู่ตรงกลางยังไง หลาย ๆ คนเข้าใจผิดว่าใช้ text-align:center จะทำให้ box element อยู่ตรงกลาง อันนั้นเป็นสิ่งที่เข้าใจผิดกันมากมาย เมื่อคุณอยากได้ div ตัวหนึ่งที่มี ความกว้าง 200px ให้อยู่ตรงกลาง ดังนั้นคุณควรจะใส่ margin-left:auto;margin-right:auto;
แค่นี้เท่านั้นเอง....คุณจะได้ div ตัวนั้นอยู่ตรงกลางหน้าจอ เห็นม่ะไม่ยากเลยสักนิด แต่คุณต้องทำความเข้าใจในเรื่อง text-align:center กับการใช้ margin-left:auto;margin-right:auto;
นะ แต่สิ่งสำคัญ div ทื่คุณอยากให้อยู่ตรงกลาง คุณต้องตั้ง width ด้วยนะ อย่าลืมเด็ดขาดดดดดดดดดด


สามารถอ่านเพิ่มเติม
Margin auto described

4. Use Padding Carefully and Appropriately
หนึ่งความผิดพลาดของหลาย ๆ คนนั้นคือ การใช้ padding กับ box element แล้วลืมคำนวณตัวของ box ที่คุณสร้างขึ้นมา ดังนั้นทำให้ box ตัวที่คุณสร้างขึ้นมา มีความกว้างกว่าปกติหรือเปล่า
อะ ๆ ๆ ๆ ลองกับไปดู css ของคุณจิ สมมุติว่าคุณสร้าง css ชื่อว่า

#box1{
widht:200px;
padding:30px;
}

box1 ของคุณจะมีความกว้างเท่าไร ที่แน่ ๆ box1 ของคุณไม่ได้มีค่าความกว้างแค่ 200px แต่จะมีค่าเท่ากับ 200+30+30 = 260px นั้นเอง padding:30px จะแตกออกมาเป็น

padding-top:30px; (ด้านบน)
padding-right:30px; (ด้านขวา)
padding-bottom:30px; (ด้านล่าง)
padding-left:30px; (ด้านซ้าย)

ดังนั้น เราต้องเอาค่า 30 ด้านซ้ายกับขวามาบวกกับ 200 นั้นเอง....จงจำไว้ว่าต้องเอาค่า padding มาบวกกับ width ที่คุณได้กำหนดไว้

สามารถอ่านเพิ่มเติม
W3 Padding Properties

5. Hiding text using text-indent
มาคุยเรื่องนี้กันดีกว่า เมื่อเว็บของคุณมี logo บนเว็บไซต์ <h1> ควรจะมี images logo ของคุณอยู่ใน tag นี้ ซึ่งจะดีสำหรับ SEO และจะช่วยในเรื่อง search engines ให้อ่านง่ายมากขึ้นด้วย อย่างไรก็ตาม พวกเราก็ไม่ต้องการเห็น text อยู่ใน tag <h1>อยู่ดีแต่ text-indent เป็นเทคนิคที่ดีอีกอย่างหนึ่งที่เราสามารถนำมาใช้ได้ ตัวอย่างคือ

h1{
text-indent:-9999px; /*--Hide Text, Keep for SEO--*/
width:948px;
background:url("images/logo.gif") no-repeat;
}

แน่นอนเลยว่าคุณสามารถใส่ text เข้าไปใน <h1>Logo Company</h1>แล้ว text ใน h1 ก็จะไม่ปรากฎ แต่จะแสดงให้เห็นรูปภาพเป็น logo ของคุณเอง

สามารถอ่านเพิ่มเติม
SitePoint-Using text-indent

6. IE Double Float Margin Bugs
ฉันแน่ใจได้เลยว่า ทุกคนต้องเคยเจอปัญหาแบบนี้มาก่อนแน่นอน นี้เป็นการ "Hacks" css อีกอย่างหนึ่ง ฉันคิดว่าทุกคนต้องได้ใช้แน่นอน bug นี้จะเกิดขึ้นกับ IE6 อย่างเดียว เมื่อคุณให้ box element หนึ่งตัว float:left แล้วคุณตั้ง margin-right:10px;margin-right จะ doubled เข้าไปเป็น 20px ทันที ดังนั้น คุณสามารถใส่ display:inline ให้กับ box element ที่คุณสร้างขึ้นมา ดูตัวอย่างกันดีกว่า

.yourclass{
float:left;
widht:350px;
margin:20px 10px 15px 100px;
display:inline; /*--Hacks For IE6*/
}

สามารถอ่านเพิ่มเติม
Doubled Margin-Causes and Fixes.

7. CSS Cross Browser Transparency
เชื่อหรือไหม การใช้ css สำหรับ transparency ให้ support ทุก browser มันง่ายมากมาย

.yourClass {
filter:alpha(opacity=50);/*Needed for IE*/
-moz-opacity:0.5;/*Older mozilla broswers like NN*/
-khtml-opacity: 0.5;/*Old versions of Safari and "KHTML" browser engines*/
opacity: 0.5;/*FF, Safari, and Opera*/
}

สามารถอ่านเพิ่มเติม
CSS Opacity Settings

8. Use CSS Image Sprites
CSS image sprites มันเป็นทางเลือกที่น่าอัศจรรย์ในการโหลด images มาใช้ในครั้งเดียว เป็นการช่วยลด http requests และ file size......เรื่องนี้คงไม่ต้องอธิบายมากมาย เพราะเคยเขียนไว้แล้ว ลองกลับไปดูตัวอย่างที่เคยเขียนไว้แย้วกันเนอะ



9. The *HTML hack
ถ้าคุณไม่ต้องการจะเพิ่มลิงค์ css สำหรับ IE6 อีกตัว เราสามารถ hack css ลงไปในไฟล์ css ที่เรามีอยู่ได้เลย และจะไม่มีผลกระทบต่อ IE ตัวอื่น ๆ ด้วย

* html body div#sidebar{
display:inline;
}

สามารถอ่านเพิ่มเติม
More on the Star HTML Bug
Explanation of the star HTML Bug

CSS Lightview Style Popup

หายจากเขียน blog เกี่ยวกับ css ไปนานเลย
วันนี้ขอสักหน่อยแล้วกัน นั่งเมาส์มาทั้งวัน เพราะไม่มีงานทำ 555+

มีเวลาก็ขอเขียนหน่อยดีกว่า กะว่าจะอัพตั้งแต่อยู่ office แต่ดันไม่เสร็จ
เลยต้องมาเขียนต่อที่บ้าน เอาใ้ห้เสร็จซะเลย ได้อัพสักที
วันนี้ขอเสนอแนะ CSS Lightview Style Popup
เราจะมาทำ Pop Up โดยใช้ css ซะส่วนใหญ่ดีกว่า
Code HTML

<div id="hideshow" style="visibility:hidden;">
   <div id="fade"></div>
   <div class="popup_block">
      <div class="popup">
          <a href="javascript:hideDiv()"><img src="icon_close.gif" class="cntrl" /></a>
          <h3>Example of Styling CSS Popups</h3>
          <p>Eu refero pertineo vulpes, molior, vel. Mos paulatim lobortis sed pneum antehabeo, tristique damnum dolor venio mauris, decet sudo, ibidem lucidus.</p>
      </div>
   </div>
</div>

CSS

#fade {
     background: #000;
     position: fixed;
     width: 100%;
     height: 100%;
     filter: alpha(opacity=80);
     opacity: .80;
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /*--IE 8 Transparency--*/
     left: 0;
     top: 0;
     z-index: 10;
}
body {
     height: 100%;
     margin: 0;
     padding: 0;
     font: normal 12px Verdana, Arial, Helvetica, sans-serif;
     position: relative;
}
#hideshow {
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
}
.popup_block {
     background: #ddd;
     padding: 10px 20px;
     border: 10px solid #fff;
     float: left;
     width: 480px;
     position: fixed;
     top: 20%;
     left: 50%;
     margin: 0 0 0 -250px;
     z-index: 100;
}
.popup_block .popup {
     float: left;
     width: 100%;
     background: #fff;
     margin: 10px 0;
     padding: 10px 0;
     border: 1px solid #bbb;
}
.popup h3 {
     margin: 0 0 20px;
     padding: 5px 10px;
     border-bottom: 1px solid #bbb;
     font-size: 1.5em;
     font-weight: normal;
}
.popup p {
     padding: 5px 10px;
     margin: 5px 0;
}
.popup img.cntrl {
     position: absolute;
     right: -20px;
     top: -20px;
}

การกำหนด ตำแหน่ง(Positioning) ใน IE6
เรารู้ดีว่า IE6 ไม่สามารถ fix ตำแหน่งได้

คุณสามารถเข้าไปอ่านบทความดี ๆ ในนี้ได้ how to make IE6 understand absolute positions


***อย่างแรก เราต้อง fix ID="fade" ให้อยู่ตำแหน่ง top กับ left ตลอดเวลา

*html #fade {
     position: absolute;
     top: exblockquotession(eval(document.compatMode &&             document.compatMode=='CSS1Compat') ?
            documentElement.scrollTop: document.body.scrollTop);
}

***อย่างที่สองเราต้อง fix popup ให้อยู่ center

*html .popup_block {
     position: absolute;
     top: exblockquotession(eval(document.compatMode &&             document.compatMode=='CSS1Compat') ?
            documentElement.scrollTop +((documentElement.clientHeight-this.clientHeight)/2)
            : document.body.scrollTop +((document.body.clientHeight-this.clientHeight)/2));
            left:exblockquotession(eval(document.compatMode && document.compatMode=='CSS1Compat') ?
            documentElement.scrollLeft + (document.body.clientWidth /2 )
            : document.body.scrollLeft + (document.body.offsetWidth /2 ));
}

ส่วน code javascript ก็มิมีอะไรมากเลย

<script language=javascript type='text/javascript'>
function hideDiv() {
     if (document.getElementById) { // DOM3 = IE5, NS6
     document.getElementById('hideshow').style.visibility = 'hidden';
}
     else {
     if (document.layers) { // Netscape 4
     document.hideshow.visibility = 'hidden';
}
     else { // IE 4
     document.all.hideshow.style.visibility = 'hidden';
}
}
}
function showDiv() {
     if (document.getElementById) { // DOM3 = IE5, NS6
     document.getElementById('hideshow').style.visibility = 'visible';
}
     else {
     if (document.layers) { // Netscape 4
     document.hideshow.visibility = 'visible';
}
     else { // IE 4
     document.all.hideshow.style.visibility = 'visible'
}
}
}
</script>

How to Use CSS Sprites

ห่างหายจากการอัพเดทเรื่องความรู้ไปนาน ที่จริงมีไรที่อยากจะเขียน
เยอะแยะ แต่ไม่มีเวลาเลย อยากลางานก็ทำไม่ได้ T_T ต้องรีบ
ปั่นงานให้เสร็จภายในปีนี้ ถ้าเสร็จเอาก็จะได้โบนัสพิเศษ 555555+
ท่องไว้ อังคณา :p เงิน เงิน เงิน แล้วก็เงิน 55555555+ เข้าเรื่องเลย

CSS Sprites เป็น topic ที่ได้รับความนิยม จากหลาย ๆ เว็บไซต์
ความจริงในการใช้รูปแต่ละรูปบน web page มันเป็นสิ่งสำคัญกับการ
โหลดของเว็บไซต์ ยิ่งมีรูปเยอะเท่าไร ก็มีการโหลดมากเท่านั้น
ดังนั้นเราสามารถจะรวมภาพให้เป็นภาพเดียว และลดเวลาการโหลด
ของหน้า web page....วันนี้ได้เอา VDO ที่สอนการทำ Sprites มาฝาก
ขอบอกว่า ดีมาก ๆ ^-^



Running time: 25 minutes
Direct Download: High Quality, Quicktime .M4V Format (AppleTV Ready)

Thanks Website CSS Tricks for VDO

CSS Techniques for Charting Data

นี้เป็นเทคนิคในอีกรูปแบบหนึ่ง ที่ใช้ CSS เข้ามาช่วยในเรื่องการทำ Chart ของ Data ที่เป็นข้อมูลแบบ Static หรือเป็นภาพ ในบางครั้งอาจจะมองว่ามันยุ่งยากไปหรือเปล่า หรือมันยากไปกว่าเดิมหรือเปล่า ปกติแล้วเราก็ใส่ภาพเข้าไปเลยก็จะง่ายกว่าไหม......แต่ถ้าคุณมองอีกมุมหนึ่ง มันจะทำให้เว็บคุณโหลดเร็วขึ้นเป็นกอง

ขั้นตอนแรก ทำภาพตารางด้านหลังกันก่อนเลย



ต่อมาก็ภาพแท่งกราฟ ที่เราต้องการไล่สี



เราไม่ต้องแยกภาพทีละชิ้น...สามารถรวบภาพแบบนี้ได้เลย เพราะเวลาโหลดจะได้โหลดไฟล์มาทีเดียว

ดู code กันเลยดีกว่า

CSS

#vertgraph {
     width: 378px;
     height: 207px;
     position: relative;
     background: url("g_backbar.gif") no-repeat; /*--ไฟล์ภาพ BG หลังสุด--*/
}
#vertgraph ul {
     width: 378px;
     height: 207px;
     margin: 0;
     padding: 0;
}
#vertgraph ul li {
     position: absolute;
     width: 28px;
     height: 160px;
     bottom: 34px;
     padding: 0 !important;
     margin: 0 !important;
     background: url("g_colorbar3.jpg") no-repeat !important;/*--ภาพแท่งกราฟ--*/
     text-align: center;
     font-weight: bold;
     color: white;
     line-height: 2.5em;
}
#vertgraph li.critical{
     left:24px;
     background-position:0px bottom !important;
     height:150px;
}
#vertgraph li.high{
     left:101px;
     background-position:-28px bottom !important;
     height:80px;
}
#vertgraph li.medium{
     left:176px;
     background-position:-56px bottom !important;
     height:50px;
}
#vertgraph li.low{
     left:251px;
     background-position:-84px bottom !important;
     height:90px;
}
#vertgraph li.info{
     left:327px;
     background-position:-112px bottom !important;
     height:40px;
}

ไฟล์ HTML

<div id="vertgraph">
  <ul>
     <li class="critical">22</li>
     <li class="high">7</li>
     <li class="medium">3</li>
     <li class="low">8</li>
     <li class="info">2</li>
  </ul>
</div>

ผลลัพธ์จะออกมา ดังรูปข้างล่างนี้