มี ที่ นี่

Archive for the ‘web 3.0’ Category

วันนี้นั่งนึกว่า จะทำยังงัยให้ Print ข้อมูลออกมา โดยแยกเป็นแต่ละหน้าไปเลย

ก้อนั่งจัดอยู่ตั้งนาน เว้นระยะให้มันขึ้นหน้าใหม่ เวลา Print จะได้แยกเป็นแต่ละหน้า แล้วมันก้อไม่ได้ -”-

จนไปเจอ CSS : page-break-after แค่บรรทัดเดียวจบ

<div style=”page-break-after:always;”></div>

หรือจะเขียนแบบ Javascript ก้อ

object.style.pageBreakAfter=”always”

Property Values ยังมีอีกหลายตัว เข้าไปดูที่นี่ได้เลยจ้า http://www.w3schools.com/CSS/pr_print_pageba.asp

วันนี้มานั่งๆ เล่น HTML 5 เพราะว่าสนใจอยู่ เห็นมีแต่คนติดตามก็เลย เห่อกับเค้าบ้าง ได้มาเล่นในส่วนของ canvas เพราะ ถูกใจเป็นพิเศษ

หลังจากได้นั่งหาๆ ไปพัก ไม่เจอ tutotial ที่ใหน แต่กลับไปเเจอที่ mozzila ซะงั้น โอ้ เทพเจ้าหมาไฟของผมมม

เรื่องราวของ canvas ใน mozzila รู้สึกว่าจะมีมากพักนึงแล้ว ผมเลยกลายเป็นคนยกยุคไปซะอย่างนั้น แต่ก็ยังรู้สึกดีว่า แบบนี้แหละยังมีให้เห็นหน่อย

ล่างๆ ของ content จะมี content นึงชื่อ Drawing Graphics with Canvas เป็นการสอนวาดรูปใน canvas จะได้เขียนเป็น ตอนแรกๆ ก็งง ว่าเราจะเขียนรูปลงไปยังไงหว่า ตอนหลังๆ มารู้ อ่อ มันสร้าง element ไว้แล้วให้ javascript เป็นคนเขียนนี่เอง รู้แล้ว ว่าทำไมต้องมี js engine แรงๆ เพื่อรับมือกับมัน

มีเกมหลายเกมอยู่ที่เขียนขึ้นมาด้วย canvas แล้ว แต่ขอ present game นี้แล้วกัน เพราะสนุกกับมันไปพักนึงเลย นั่นคือ oooze ออกเสียงว่า อูซี่มั้ง เกมง่ายๆ แต่เขียนได้เทพดี เอา code ไปศึกษาได้

หลังจากนั่งๆเขียนอยู่ แล้วก็ศึกษาการวาดรูปไปพลางๆ สังเกตได้ว่า การสาดรูป เหมือนๆ กับ post script มาก และ @mossila ยังบอกอีกว่า มันเหมือน Java QT, c GTK อีกด้วย (เคยเขียนมาแต่ลืมหมดแล้ว ติดใจ post script อย่างเดียว Mr. John เขี้ยวเข็นให้วาดรูป Godzilla ให้ได้)

ลองไปลองมาเลยแอบไปลองกับ Browser อื่นๆ ว่าอะไรรันได้บ้าง คำตอบออกมาง่ายมาก คือ Chrome 4, FF 3.6.3, Safari 4.0.5, Opera 10.53 รันได้ อย่างไม่มีปัญหา มีอยู่อันเดียวยที่มีปัญหาคือ IE 8 เจ้าเดิม (เคยทำอะไรออกมาก่อนโม้บ้างเนี่ย)

วันนี้มี video ทดสอบ speed ของ google chrome ออกมาว่า google chrome เร็วว่ามันฝรั่งบิน 555 แปลตรงตัวเกินไปแล้ววว

เค้าหมายถึงยิงมันฝรั่งนะ หลายๆ คนคงได้ดูกันแล้ว เป็นการทดสอบที่ถือว่าลงทุนมากพอสมควรเลย เพราะเอาของเร็วๆมาแข่ง เช่น น้ำที่กระฉอกด้วยเสียงจากลำโพง หรือ สายฟ้า (ใครที่ยังไม่ได้ดูก็กดไปดูแล้วกัน)

จากนั้นอ่านไปอ่านมาก็เจอ เค้าเอา java  framework มา test กัน ซึ่งเป็นอะไรที่น่าสนใจมาก โดยเค้า test กันที่บทความนี้ google-chrome-javascript-speed-test จะออกแนวแข่งกับ google chrome มากกว่า แต่ที่เราจะ test กันวันนี้ มีถึง 5 Browser ด้วยกันคือ Google Chrome, Firefox, IE, Safari และ Opera

โดย script ที่ใช้งานในครั้งนี้คือ slickspeed เป็นหน้าสำหรับ test framework กันเลยทีเดียว

แค่เพียงรอโหลดหน้าให้เสร็จแล้วกด Start tests แค่นั้นก็ teste กันได้เลยทีเดียว. จากนั้นรอให้ test จนเสร็จ เราก็จะได้เวลารวมของการ test แต่ละ browser ออกมา

ทีนี้ไปดูกราฟของแต่ละ browser กันเลยคร๊าบบบบ

ใน google chrome นั้นไม่เกิด error จากทุกๆ framework เลย

ใน firefox นั้นเกิด 3 error จาก Dojo และ 2 different returned elements

ใน IE 8 นั้น มีปัญหากับ Dojo ทั้งหมด (ใน IE7 ไม่มีปัญหา test ได้)

ใน Opera นั้นเกิด 3 error จาก Dojo และ 2 different returned elements เหมือนกับ Firefox

จากกราฟทั้งหมดก็ถึงช่วงเวลาแห่งการเปรียบเทียบของทุกอันรวมกันผมได้ตามนี้

จากข้อสรูป คือ jQuery และ Dojo นั้นทำง่านได้ดีกว่าในทุกๆ Browser

Dojo ทำงานเร็วกว่า jQuery มากใน Safari และ Opera

Prototype และ YUI ส่วนใหญ่จะช้ากว่า jQuery และ Dojo

จากเวลาโดยรวมแล้ว Google Chrome, Safari และ Opera จะใช้เวลาไกล้เคียงกัน

จากเวลาโดยรวมแล้ว IE ห่วยแตกสุด อีกทั้งยังรัน Dojo ไม่ได้ (อันนี้ไม่รู้ว่าเกิดจากอะไร ขอสืบก่อน)

จากที่สรุปก็ได้ประมาณนี้ล่ะครับ

อีกไม่นาน HTML 5 ก็น่าจะออกมาเสร็จแล้ว ก็ต้องตามเทรนกันหน่อย เพราะว่ามันเด็ดเกินไปแล้ว วู้วววววว…….

สิ่งที่เพิ่มขึ้นมาจาก 4 เป็น 5 ถือได้ว่าเป็นก้าวที่สำคัญเลยก็ว่าได้ เพราะ ได้ตัดอะไรที่ไม่ได้ใช้ และกำกวมออกไปเยอะ ให้ไปใช้งานใน CSS แทน เพื่อที่ HTML จะเป็น หน้าของข้อมูลและ CSS จะเป็นรูปในการแสดงผล จากที่ HTML 4 เราก็ได้เห็นมาแล้ว ว่า CSS นั้นมีบทบาทเป็ฯอย่างมาก

Tag ที่ถูกตัดออกไปใน HTML 5(จาก4)

<acronym> ใช้บอกว่าเป็นตัวย่อ หรือ อักษรย่อ ได้เปลี่ยนเป็น <abbr> แทน

<applet> ใช้ในการสร้าง embedded applet

<basefont> ใช้เพื่อกำหนด  size สี ขนาด ของ font ทั่วไป (CSS แย่งซีนไปแล้ว)

<big> ใช้ให้เป็นตัวอักษรใหญ่ (มี strong และ CSS แย่งซีนไปเช่นกัน)

<center> ใช้กำหนดว่าอยู่ตรงกลาง

<dir> บอกว่าเป็น directory list (ผมเองยังไม่เคยใช้เลย)

<font> สร้างตัวอักษร Inline

<frame> สร้าง frame

<frameset> set frame ตามกำหนด

<noframes> (อันนี้ก็ไม่เคยใช้)

<s> มาจาก strike คือเส้นขีดคาดนั่นเอง(ใช้ del แทน)

<strike> ไปด้วยกันเลยเหมือนกับ <s>

<tt> เอาไว้ประกาศ teletype text (ไม่เคยใช้อีกและ)

<u> Underline

Tag ที่ถูกเพิ่มเข้ามาใน HTML 5(จาก4)

<article> บอกว่าเป็นบทความ

<aside> บอกว่านอกเหนือจาก page content

<audio> file เสียง

<canvas> วาด graphic 2D

<command> บอกเป็น command ให้ทำต่างๆ

ตัวอย่าง
<menu type="toolbar">
 <command type="radio" radiogroup="alignment" checked="checked"
          label="Left" icon="icons/alL.png" onclick="setAlign('left')">
 <command type="radio" radiogroup="alignment"
          label="Center" icon="icons/alC.png" onclick="setAlign('center')">
 <command type="radio" radiogroup="alignment"
          label="Right" icon="icons/alR.png" onclick="setAlign('right')">
 <hr>
 <command type="command" disabled
          label="Publish" icon="icons/pub.png" onclick="publish()">
</menu>

<datalist> รายละเอียดเสริมของรายการที่เราจะแสดง

<input list=”cars” />
<datalist id=”cars”>
<option value=”BMW”>
<option value=”Ford”>
<option value=”Volvo”>
</datalist>

<details> รายละเอียดของหน้านั้นๆ

<embed> เอาไว้เล่น embedded content ต่างๆ

<figcaption> แสดง caption ของ figure นั้นๆ

<figure>
   <img src="/pix/39627052_fd8dcd98b5.jpg">
   <figcaption>Kissat</figcaption>
</figure>

<figure> แสดงเนื้อหาที่เป็นสื่อต่างๆ

<footer> แสดงว่าเป็นส่วนล่างสุดของหน้า

<header> แสดงว่าเป็นส่วนหัวของหน้า

<hgroup> เอาไว้แสดงว่าเป็นกลุ่มของหัวเรื่อง

<hgroup>
<h1>Welcome to my WWF</h1>
<h2>For a living planet</h2>
</hgroup>

<p>The rest of the content…</p>

<keygen> บอกว่าตรงนี้คือ key ที่ gen เอา

<form action="processkey.cgi" method="post" enctype="multipart/form-data">
 <p><keygen name="key"></p>
 <p><input type=submit value="Submit key..."></p>
</form>

<mark> hilight text ที่ต้องการจะได้ไม่ต้องทำ span class=”hilight”

<meter> ค่ากำหนดอยู่ในช่วง

Storage space usage: <meter value=6 max=8>6 blocks used (out of 8 total)</meter>
Voter turnout: <meter value=0.75><img alt="75%" src="graph75.png"></meter>
Tickets sold: <meter min="0" max="100" value="75"></meter>

<nav> navigator

<nav>
   <h1>Navigation</h1>
   <ul>
    <li><a href="articles.html">Index of all articles</a></li>
    <li><a href="today.html">Things sheeple need to wake up for today</a></li>
    <li><a href="successes.html">Sheeple we have managed to wake</a></li>
   </ul>
</nav>

<output> แสดงผลลัพท์

<form action=”form_action.asp” method=”get” name=”sumform”>
<output name=”sum”></output>
</form>

<progress> แสดงปริมาณการทำงาน

The object’s downloading progress:
<progress>
<span id=”objprogress”>76</span>%
</progress>

<rp> ruby annotations (ขอข้ามก่อน อ่านยัง งงๆ อยู่)

<rt> รู้ว่าใช้อธิบาย <rp>

<ruby> (ขอข้ามก่อน อ่านยัง งงๆ อยู่)

<section> section ของ content(เนื้อหามากๆ ก็แบ่งเป็น section ได้สบายเลย)

<source>

<video controls autoplay>
 <source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
 <source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'
         onerror="fallback(parentNode)">
 ...
</video>

<summary> สรุป

<time> แสดงเวลา

Published <time>2009-10-21</time>.

<video>

ข้อมูลจาก (w3schools.com/html5/html5_reference.asp) Thankyou หลายเด้อ

แต่จากที่ผมดูแล้วยังมี tag ที่ W3School ยังไม่ได้ลงอีกหลาย tag เลยทีเดียว เพราะเราดูที่ http://www.whatwg.org/specs/web-apps/current-work/

555 เกาะติดสถาณะการณ์มากๆ เท่าที่ดูจะมีอีกเช่น

<figcaption>

<samp>

<kbd>

<bdo>

<wbr>

<menu> บอกว่าเป็นเมนู

และในอีกสิ่งหนึ่งที่เพิ่ม option มาอีกเพียบคือ <input> element มี

Telephone state

URL state

Date and Time state

และอีกเพียบ เหอะๆ แต่อย่างไรก็ตาม มี feature ใหม่พวกนี้ทีไร ก็ไม่ค่อยได้ใช้ประโยชน์กับคนไทยเท่าที่ควร เพราะอะไรรู้ใหม่ IE 6-7 ยังครอง market share ที่ 1 ของประเทศไทยอยู่ ถึง HTML 5 จะออกมาใช้งานได้อย่างสมบูรณ์ แต่ก็เล่นไม่ได้อยู่ดี แล้วยิ่งเรื่องของธุรกิจด้วยแล้ว ยังไงก็ต้องเกาะกลุ่มลูกค้าส่วนใหญ่ไว้

แสดงให้เห็นถึงว่า

คนไทยไม่ต้องการ security มากเท่าที่ควร

คนไทยไม่ต้องการ feature มากเท่าที่ควร

คนไทยไม่ต้อง Technology มากเท่าที่ควร

คนไทยไม่ขวนขวายเท่าที่ควร

แล้วจะยังไงต่อไป

API นั้นเราอาจจะได้ยินกันบ่อยๆ ช่วงนี้ เอ่ หรือเราได้ยินไปเองหว่า 555 และช่วงหลังๆ เองก็มีการจัดงาน camp เกี่ยวกับ API อีกด้วย

API นั้น ย่อมาจาก application programming interface ซึ่งหมายถึง ตัวเชื่อมกับ application นั้นเอง

ในความจริงแล้ว API นั้นถ้าจะคิดง่ายๆ แล้วก็เหมือนกับ function หนึ่งๆ นะให้คิดว่าเป็นแบบนี้ (ถึงจะสื่อความหมายผิดเพี้ยนไป) เพราะ Interface นั้นก็คือ สิ่งที่เราใส่ input ลงไปแล้วได้ผลลัพธ์ ออกมานั่นเอง

ถ้าให้คิดว่าเป็นเหมือน function แล้วแม้แต่เด็กที่เริ่มเขียนโปรแกรมใหม่ๆ เองก็ยังพอเข้าใจ เพราะความจริงแล้วมันก็ไม่ได้ยากอย่างที่คิดหรอก

API นั้นมีหลายแบบและแตกต่างกันมาก ทั้งในเรื่องของภาษาในการเขียนโปรแกรมออกมาและการเรียกใช้งาน และอย่างอื่นอีกมากมาย แต่ที่ใหญ่ๆ ก็ 2 ตัวที่บอกไปเนี่ยแหละ

API เองถูกประยุกต์ใช้มาตั้งแต่นานนมมาแล้ว ติดปัญหาที่ภาษาในการเรียกใช้ซะมาก การที่จะเรียกใช้ API ที่เขียนขึ้นมาได้จึงต้องเขียนภาษาเดียวกันจึงจะเรียกใช้กันได้ ข้ามสายพันธ์ไม่ได้่เลยทีเดียว

ช่วงหลังๆ ได้มี XML ซึ่งเป็นภาษาในการแลกเปลี่ยนข้อมูลทำให้ข้อจำกัดพวกนี้หายไป เขียนอะไรก็ได้ gen ออกมาให้เป็น XML ให้ได้ก็พอ ส่วนอีกฝ่ายก็จะเขียนโปรแกรมสำหรับอ่าน XML แล้วนำ data เอาไปใช้ แค่นั้นเอง

การเรียกใช้ API นั้นอย่าคิดว่าเป็นการเรียกกันข้ามเครื่อง หรือ เรียกๆกันผ่านเว็บอย่างเดียวนะ เพราะ ก่อนที่จะมีเว็บ ก็มีการใช้ API กันแล้ว โดย API ที่ออกมาเป็นชุดๆ สำหรับใช้งานได้เลย ก็คือ library นั้นเอง แต่ จะเป็นขั้นก่อนนิดนึง ตรงที่ library เองจะทำงานด้วยตัวเองไม่ได้แค่นั้น
ตัวอย่างของ API ที่เรา(อาจ)เห็นกันบ่อยๆ ก็เช่น เราติดต่อไปหา mysql นั่นแหละ ให้คิดดูดีๆ ว่า กว่ามันจะไปเรียก ข้อมูลมาจาก mysql ต้องทำอะไรบ้าง

ถ้า้เป็น PHP เองก็ต้องเขียน

mysql_connect(xxx,xxx,xxx,xxx);

ซึ่งตรงนี้หมายถึงอะไร ก็หมายถึง เราเรียก function นั่นเอง แต่ว่าเป็น function มาตราฐานแค่นั้นเอง เลยเหมือนกับมีมาให้แต่ต้นไม่ต้องไปเอา library มาจากที่อื่นแค่นั้นเอง แล้ว API มันอยู่ตรงใหน นั่นซิ ก็ใน function นี้ยังไงล่ะครับ

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

เรารออยู่อย่างเดียวคือ return value ก็พอแล้ว

ตัวอย่างข้างบนก็เป็นตัวอย่างที่ให้พอได้เข้าใจเฉยๆ นะ API นั้นจะว่าให้ลึกๆ สลับซับซ้อนแล้วก็ หลากหลายรูปแบบมาก ยกตัวอย่าง API ใหม่ๆ เช่น Web Service เป็นต้น Web Service เองจะว่าไปก็ API ดีๆ นี่เอง แต่การเรียกใช้ การติดต่อนั้นต่างกันฟ้ากับก้นเหวเลย