วันเสาร์ที่ 28 พฤษภาคม พ.ศ. 2559

สรุปองค์ประกอบของสารสนเทศ

HTML

                    ย้อนไปเมื่อสมัยยังละอ่อน อยากจะมีเว็บไซต์ของตัวเอง เดินไปถามรุ่นพี่ทันทีว่าต้องเริ่มยังไง รุ่นพี่ก็แนะนำเลยว่า “HTML ไง ไปศึกษาดูเองสิ! ณ ตอนนั้นไม่รู้จักเลยด้วยซ้ำ HTML คืออะไร ทำให้ต้องรีบไปหาเลยว่า HTML มันคืออะไร ใช้ทำอะไร และแล้วก็ได้ความว่า…              HTML หรือชื่อเต็มๆ ก็คือ Hypertext Markup Language เป็นภาษาประเภท Markup ที่ออกแบบมาเพื่อใช้ในการสร้างเว็บเพจ มีโครงสร้างการเขียนโดยอาศัยตัวกำกับ (Tag) ควบคุมการแสดงผลข้อความ รูปภาพ เสียง อื่นๆ ที่สามารถเรียกดูผ่านทางเว็บเบราว์เซอร์ได้ แต่ละ Tag สามารถระบุหรือควบคุมการแสดงผลของเว็บให้เป็นไปตามที่ผู้ออกแบบเว็บไซต์กำหนดไว้ หรือจะให้เข้าใจง่ายๆ ก็คือ เว็บที่เราเข้าอยู่ในทุกๆ วันนี้ ก็ล้วนถูกแสดงผลด้วยโค้ด HTML ทั้งนั้น              HTML พัฒนามาจากภาษา SGML และถูกพัฒนามาเรื่อยๆ ตั้งแต่เวอร์ชั่นแรก สู่เวอร์ชั่น HTML 2.0, HTML 3.2, HTML 4.1 และตัวล่าสุดคือ HTML 5 (ซึ่งอยู่ในระหว่างการพัฒนา) และยังมีการพัฒนารูปแบบของ HTML แบบใหม่ที่เรียกกันว่า XHTML ซึ่งมีความสามารถและมาตราฐานที่รัดกุมกว่าอีกด้วย              HTML มีรูปแบบการทำงานง่ายๆ HTML จะอ่านจากซ้ายไปขวา จากบนลงล่าง เมื่อเราพิมพ์ข้อความตัวอักษรธรรมดาลงไปแล้วทำการบันทึก พอเราเปิดไฟล์นั้นๆ มาดูผลลัพธ์ที่จะแสดงผลที่หน้าจอก็จะเป็นเหมือนตอนที่พิมพ์ข้อความตัวอักษรธรรมดาลงไป หากต้องการผลลัพธ์ที่แตกต่างต้องใช้ Tag ในการควบคุมการแสดงผล

ตัวอย่าง CODE ภาษา HTMLจากภาพจะเห็นว่า… HTML มีรูปแบบการเขียนที่ชัดเจน จะประกอบด้วย Tag พื้นฐาน ดังนี้

Tag <html>…</html> เป็นส่วนประกาศที่กำหนดหัวละท้ายของเอกสาร เพื่อให้บราว์เซอร์ทราบและแสดงผลได้ถูกต้อง
Tag <head>…</head> 
เป็นส่วนหัวเรื่องของเอกสาร ภายในจะมี Tag <title>…</title> ใช้สำหรับการกำหนดชื่อของเอกสาร
Tag <body>…</body> 
เป็นส่วนที่มีรายละเอียดมากที่สุด จะบรรจุข้อมูลต่างๆ ที่ต้องการให้แสดงบนหน้าเว็บไซต์ของเรา ทั้งข้อความ รูปภาพ เป็นต้น


ผลลัพธ์หน้าจอแสดง


ในการสร้างเว็บเพจโดยใช้ภาษา HTML เขียนนั้น สามารถใช้โปรแกรม Text Editor ต่างๆ เขียนได้ เช่น Note Pad , Word Pad ฯลฯ หรือจะใช้โปรแกรมประเภท WYSIWYG (What You See Is What You Get) ที่เป็นเครื่องมือช่วยสร้างเว็บเพจซึ่งอํานวยความสะดวกในการสร้างหน้า HTML เช่น Dream Weaver, Microsoft FrontPage ฯลฯ

ส่วนในการเรียกใช้งานหรือทดสอบการทำงานของเอกสาร HTML ที่เราได้เขียนไว้นั้นจะใช้โปรแกรมเว็บเบราว์เซอร์ (web browser) เช่น Internet Explorer (IE), Google Chrome, Mozilla Firefox, Safari และอื่นๆ เป็นต้น เป็นเครื่องมือแสดงผลไฟล์ HTML ของเราออกมาเป็นตัวอักษร ภาพและเสียง

ที่มา http://www.fusionidea.biz/html-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/

วันอาทิตย์ที่ 22 พฤษภาคม พ.ศ. 2559

Responsive Web คืออะไร?


    Responsive Web
                สมัยก่อนได้มีการแก้ปัญหาโดยการเพิ่มขึ้นมาอีก 1 เว็บไซต์โดยเฉพาะสำหรับผู้ที่ใช้ Mobile URL ก็จะเป็นอีกชื่อแยกจากเว็บไซต์บน Destop เช่น http://m.myweb.com หรือ http://www.myweb.com/m/ และแล้วการแก้ปัญหานี้ก็ไม่เพียงพอกับหน้าจอที่หลากหลายของอุปกร์ในปัจจุบัน


                ดังนั้นเทคโนโลยี Responsive website จึงเกิดขึ้น งานนี้ความยุ่งเหยิงจึงตกอยู่กับผู้ที่เกี่ยวข้องกับ Front end ทั้งหลายแหล่ เช่น UX, UI, Designer, CSS Coder, Frontend Developer สำหรับโปรแกรมเมอร์ไม่ต้องปรับตัวอะไรครับยังทำหน้าที่เหมือนเดิม เพราะการ Responsive จะถูกควบคุมโดย HTML, CSS3, javaScript เท่านั้น


    Responsive Web Design คืออะไร



                Responsive Web Design คือ การออกแบบเว็บไซต์ให้รองรับขนาดหน้าจอของอุปกรณ์ทุกชนิด ตั้งแต่คอมพิวเตอร์ที่มีขนาดหน้าจอหลากหลาย ไปจนถึงโทรศัพท์มือถือ Smart Phone และ Tablet ต่างๆ ที่มีมาตรฐานขนาดหน้าจอที่แตกต่างกัน พูดได้ว่าออกแบบครั้งเดียวสามารถนำไปใช้ได้กับทุกหน้าจอเลยทีเดียว


                 ทั้งนี้ Responsive Web Design เป็นการออกแบบเว็บไซต์ โดยใช้เทคนิคของ CSS , CSS3 และ JavaScript ในการออกแบบเพื่อให้เว็บไซต์สามารถจัดลำดับ เรียงข้อมูลบนเว็บไซต์ให้รองรับการแสดงผลผ่านหน้าจอที่มีขนาดแตกต่างกันได้โดยอัตโนมัติ  โดยผู้ใช้งานเว็บไซต์สามารถเปิดใช้งานเว็บไซต์ได้ โดยไม่ต้องคำนึงถึงขนาดของหน้าจอหรือชนิดของอุปกรณ์สื่อสาร


    ประโยชน์ของการทำเว็บไซต์  Responsive Web Design



    - Responsive WebDesign ได้รับการรับรองจาก google ช่วยให้ติด index google ได้ทั้ง desktop และ mobile ในหน้าเดียว
    - การทำ Responsive เพียงแค่ไซต์เดียวก็รองรับทุกอุปกรณ์ และไม่ต้องทำหลายๆหน้า ช่วยให้ไม่หนักเซิฟเวอร์
    - ประหยัดค่าใช้จ่ายในการจัดทำ โดยที่เราไม่ต้องทำหน้าต่างแยกกันระหว่าง mobile และ desktop นอกจากนี้ยังประหยัดเวลาลดระยะเวลาในการทำงานหลายๆหน้า โดยที่เราก็วางแผนครั้งเดียว และทำเพียงแค่หน้าเดียวเท่านั้นเอง
    - รวดเร็วในการดูแล จัดการเว็บไซต์ ไม่ยุ่งยาก และไม่ต้องไปเปลี่ยนแปลงเว็บไซต์หลายๆหน้า
    - รองรับผู้ใช้ทุกอุปกรณ์ เพราะสุดท้ายผู้คนจากหลายอุปกรณ์ก็มีความต้องการเดียวกัน
    - เว็บไซต์ไม่ต้อง redirect หน้าไปหาหน้า mobile ให้เสียเวลา ช่วยให้เซิฟเวอร์ไม่ทำงานหนักและไม่วุ่นวาย
    - Googlebot-Mobile จะสนใจกับไซต์ที่รองรับอุปกรณ์ประเภท mobile ดังนั้นมั่นใจได้เลยว่า          Googlebot-mobile จะเข้ามาเก็บข้อมูลในเว็บไซต์ที่ทำออกมารองรับ mobile ของคุณอย่าง   แน่นอนหลังจากนี้เราก็มาเริ่มทำ seo ผ่าน mobile กันต่อไป
    - ช่วยทำให้การค้นหาผ่าน mobile เป็นไปได้ง่ายมากยิ่งขึ้น

    อ้างอิง http://www.softmelt.com/article.php?id=391