關於 css visual editor ，我們在網路上蒐集到這些相關的討論、資訊與評價

💡 น้อง ๆ หลายคนได้ถามแอดเข้ามา ถ้าอยากเป็น Web Developer ต้องมีความรู้อะไรบ้าง ?? สำหรับนักศึกษา หรือน้อง ๆ ที่กำลังสนใจอยากทำงานในสายนี้ แล้วยังจับต้นชนปลายไม่ถูกว่าต้องเริ่มเรียนรู้จากอะไรดี ?? มา ๆ แอดจะบอกให้หมดเลยจ้าาา
.
หากพร้อมแล้ว!! ก็ไปอ่านกันเลย 🔥
.
👨‍💻 ก่อนอื่น เรามาเลือก Text Editor ที่ใช้ในการ Dev กันเลย
.
ในปัจจุบันนี้มีให้เลือกเยอะมาก ที่ฮิต ๆ กัน และแอดว่ามันใช้งานง่าน อยากจะแนะนำเลยก็คือเจ้า Visual Studio Code นั่นเอง โหลดใช้งานได้ฟรี ๆ แถมมี Extensions ที่ช่วยในการเขียนโค้ดมาให้โหลดใช้งานกันแบบฟรี ๆ ด้วยนะ มือใหม่ก็ใช้งานได้ไม่ยาก !!
.
🖥️ เรียนรู้ HTML
.
ก่อนจะเขียนเว็บได้นั้น เราต้องศึกษาเจ้านี่ก่อน แอดจะอธิบายสั้น ๆ เจ้านี่มันย่อมาจาก Hyper Text Markup Language เป็นภาษามาร์กอัปสำหรับใช้แสดงสิ่งต่าง ๆ บนหน้าเว็บนั่นเอง น้อง ๆ มือใหม่ควรเรียนรู้การเขียน และทำความเข้าใจการทำงานของแต่ละ Tag เพราะนี่เป็นพื้นฐานสำคัญสำหรับการเขียนเว็บนั่นเอง
.
✨ เมื่อมี HTML แล้วนั้น เราจะขาด CSS ไปได้อย่างไร…
.
CSS หรือ Cascading Style Sheets เป็นภาษาที่ใช้ในการกำหนดองค์ประกอบ สี เส้น ฟอนต์ และเลย์เอาต์ของหน้าเว็บไซต์นั่นเอง อีกหนึ่งพื้นฐานสำคัญที่คนจะทำเว็บห้ามพลาดเด็ดขาดเลยจ้า
.
👉 และที่ขาดไม่ได้คือ JavaScript นั่นเอง
.
เป็นภาษาที่จะช่วยให้จัดการสิ่งต่าง ๆ ที่ซับซ้อนบนหน้าเว็บได้นั่นเอง !!
.
🔥 สำหรับน้อง ๆ คนไหนสนใจจะเรียนทั้ง 3 ภาษานี้ทางเรามีคลิปดี ๆ มาให้เรียนกับแบบฟรี ๆ เลยจ้า หากสนใจกดลิงค์ด้านล่างเลย
🔹 พื้นฐาน HTML & CSS : https://www.youtube.com/watch?v=ZyicuJiLxoc&list=PLcLc3KmtwXNTWzWg38W2QZ-QiwZbE7bQi
.
🔸 คอร์สเรียนฟรี JavaScript แถมมีใบเซอร์ คลิกเลย !! : https://academy.borntodev.com/p/introduction-to-javascript
.
🌟 เมื่อเราเรียนรู้ทั้ง 3 ภาษาแล้ว เราก็มาเริ่มสร้าง Web กันเลย
.
มาพัฒนาทักษะการเขียนเว็บด้วยการลงมือทำจริง เอาองค์ความรู้ที่เราได้เรียนทั้งหมดมาสร้างเว็บเจ๋ง ๆ ตามที่เราชอบเลย ส่วนใครไอเดียตัน ไม่รู้จะทำเว็บอะไรดี แอดขอแนะนำเว็บนี้ >> https://www.frontendmentor.io/ ที่เขาจะรวบรวมไอเดียดี ๆ ในการทำเว็บไว้แบบเยอะมาก !!
.
⚙️ เรียนรู้การใช้งาน Command line
.
บางครั้งเราอาจจะต้องติดตั้งแพ็คเกจ และ Tools ต่าง ๆ ที่ใช้ในการพัฒนาเว็บ จึงต้องเรียนรู้วิธีการใช้งานเจ้า Command line ไว้บ้างนะ มือใหม่ไม่ต้องกังวล ทางเรามีคอร์สสอนอีกแล้ว ฟรีแถมมีใบเซอร์ให้ด้วยนะ (ข า ยตรง ๆ กันเลย 55555555 🤣)
.
หากใครสนใจ คลิกลิงค์ด้านล่างแล้วไปเรียนกันได้เลยคร้าบบบ ❤️
https://academy.borntodev.com/p/command-prompt-101
.
🌈 และสิ่งที่ขาดไม่ได้เลยคือ Git และ GitHub นั่นเอง
.
Git เป็น Version Control เพื่อจัดการทุกอย่างในโครงการไม่ว่าจะเป็น รักษาไฟล์ ติดตามสถานะของไฟล์ ทำงานได้ตั้งแต่โครงการขนาดเล็กไปจนขนาดใหญ่ มีความเร็ว และมีประสิทธิภาพมาก
.
💻 GitHub เป็นผู้ให้บริการ Internet Hosting สำหรับ Software Development โดยใช้ Git ในการควบคุมนั่นเอง ช่วยจัดการ Source Code ของเราได้อย่างมีประสิทธิภาพ แถมยังเปิดให้ใช้งานกันฟรี ๆ ด้วยนะ
.
💼 เมื่อเรียนรู้หมดแล้ว ก็ลุยสมัครงานกันเลย !!
.
ใช้ความรู้ที่เรียนมาทั้งหมด เก็บผลงาน และเตรียมพร้อมเข้าสู่อาชีพในฝันกันเลย ~~
.
borntoDev - 🦖 สร้างการเรียนรู้ที่ดีสำหรับสายไอทีในทุกวัน

🔥 "สาย Front-End ต้องแชร์ !!" กับสรุปรวมเครื่องมือ และ Framework ดี ๆ ที่ต้องบอกต่อสำหรับคนทำหน้าเว็บ <3
.
ต้องบอกว่าวันนี้แอดและทีมงานได้รวบรวมเครื่องมือเครื่องไม้ ที่จะทำให้งานยาก ๆ กลายเป็นงานง่าย ๆ ไว้ในที่เดียวให้แล้วว
.
⭐️ ใครที่กำลังเริ่มสาย Front-End หรือ ต้องการหาของดีรีบเข้ามาดูได้เลย สำหรับลิงก์ในการเข้าไปดาวน์โหลด / อ่าน Doc / วิธีการใช้งาน ดูด้านล่างได้เลยคร้าบผมมม ^__^
.
👩‍🎨เครื่องมือเด็ดที่คุณต้องแชร์ของสาย Frontend
.
📚 JavaScript Framework
.
Vue.js
https://vuejs.org/
.
Angular
https://angular.io/
.
React
https://reactjs.org/
.
Backbone.js
https://backbonejs.org/
.
🎨 CSS Framework
.
Bootstrap
https://getbootstrap.com/
.
Materialize
https://materializecss.com/about.html
.
Pure.css
https://purecss.io/
.
Bulma
https://bulma.io/
.
Semantic UI
https://semantic-ui.com/
.
📖 Library
.
sweetalert2 : สำหรับสร้าง Alert สวยๆได้ง่ายๆ
https://sweetalert2.github.io/
.
AlertifyJS : สร้าง Alert สวยๆเหมือนกัน
https://alertifyjs.com/
.
Chart.js : สำหรับสร้าง Chart แบบมี animation
https://www.chartjs.org/
.
jQuery : ใช้งาน JS และจัดการ DOM ได้ง่ายขึ้น
https://jquery.com/
.
DataTables : เปลี่ยน Table แบบเดิมๆให้ดูดีมี function ได้ง่ายๆ
http://fredsarmento.me/frontend-tools/
.
Quill editor : Text Editor สำหรับใส่ในเว็บเครื่องมือครบๆ
https://quilljs.com/
.
🧰 Developing & Debugging Tools
.
Chrome DevTools : เครื่องมือ Debug เว็บ เพียงแค่กด F12 เบราเซอร์อื่นๆก็มีเหมือนกัน
https://developers.google.com/web/tools/chrome-devtools
.
CodePen : Online Editor ที่สามารถจำลอง enviroment ที่เหมาะสมได้เขียนแล้วเห็นผลทันที
https://codepen.io/
.
WebStorm : Web Editor ที่รองรับ Framework ที่หลากหลาย
https://www.jetbrains.com/webstorm/
.
🍱 Other (Asset)
.
Google Fonts : font ฟรีสวยๆของ google
https://fonts.google.com/
.
awesome : Icon ฟรีสวยๆ
https://fontawesome.com/
.
figma : สำหรับออกแบบหน้าเว็บ จัดวางองค์ประกอบหรือแม้แต่สร้าง Prototype
https://www.figma.com/files/recent
.
Visual Inspector : extension chrome ที่ช่วยให้ตรวจสอบองค์ประกอบต่างๆของเว็บได้ค่อนข้างครบถ้วน
https://chrome.google.com/webstore/detail/visual-inspector/efaejpgmekdkcngpbghnpcmbpbngoclc
.
CSS Peeper : extension chromeอีกหนึ่งตัวที่ใช้ตรวจสอบองค์ประกอบเว็บ
https://chrome.google.com/webstore/detail/css-peeper/mbnbehikldjhnfehhnaidhjhoofhpehk
.
" หรือถ้าใครเคยใช้ตัวไหนมาแล้ว สามารถมาแบ่งปันประสบการณ์ในการใช้งานใน Comment กับแอดได้เลยยย ใครมีตัวไหนแนะนำใส่มาได้เต็มที่เลยคร้าบผมม <3 "
.
#BorntoDev - 🦖 Coding Academy ให้การพัฒนาเทคโนโลยีเป็นเรื่องง่ายสำหรับทุกคน

การเขียนโปรแกรมแบบจินตภาพด้วยบล็อกคำสั่ง: จาก MIT Scratch สู่ Google Blockly
‍‍‍‍‍‍ ‍‍
เทคโนโลยีซอฟต์แวร์ HTML5/CSS/JavaScript และอื่น ๆ ที่เกี่ยวข้อง ทำให้เกิดรูปแบบการใช้งานซอฟต์แวร์ผ่านเว็บเบราว์เซอร์และอินเทอร์เน็ต อย่างเช่น "Software as a Service" (SaaS), "Coding in the Cloud" เป็นต้น มีการพัฒนาเครื่องมือหรือซอฟต์แวร์ที่ใช้สำหรับเขียนหรือสอนการเขียนโปรแกรมตามมาอีกมากมาย โดยทั่วไป ผู้ใช้ไม่จำเป็นต้องติดตั้งซอฟต์แวร์ในเครื่องคอมพิวเตอร์ของตนเอง
‍‍‍‍‍‍ ‍‍
💡 MIT Scratch, Berkeley Snap! และ MIT App Inventor 2 for Android
‍‍‍‍‍‍ ‍‍
จากโพสต์คราวที่แล้ว "การเขียนโปรแกรมแบบจินตภาพด้วยบล็อกคำสั่ง: MIT Scratch และ Berkeley Snap! สู่การเชื่อมต่อกับ Arduino" ได้กล่าวถึง MIT Scratch (https://scratch.mit.edu) ซึ่งเป็นซอฟต์แวร์ Open Source มีการใช้งานแบบ Desktop App สามารถนำไปสอนเยาวชนในช่วงอายุ 8 - 16 ปี เรียนรู้ Coding เป็นทักษะพื้นฐาน เน้นการสร้างเรื่องราวแบบปฏิสัมพันธ์ สร้างเกมส์ หรือ ภาพเคลื่อนไหว กราฟิก 2 มิติ
‍‍‍‍‍‍ ‍‍
นอกจาก Scratch ก็ได้กล่าวถึง Berkeley BYOB/Snap! (https://snap.berkeley.edu) ซึ่งเป็นอีกหนึ่งตัวเลือก (Open Source) สำหรับฝึกเขียนโปรแกรมแบบกราฟิก ซึ่งอันที่จริงแล้ว ในตอนเริ่มต้น Snap! ก็เกิดจากการดัดแปลงโค้ด Scratch แต่ต่อมาได้พัฒนาใหม่ และใช้ภาษา JavaScript
‍‍‍‍‍‍ ‍‍
โลกของเทคโนโลยีเปลี่ยนแปลงพัฒนาไปตลอดเวลา ล่าสุด Scratch เวอร์ชัน 3.0 ก็ใช้งานเป็นแบบ Web App ได้แล้ว โดยใช้ภาษา JavaScript (ใช้ไลบรารี Scratch Blocks) ในการพัฒนา
‍‍‍‍‍‍ ‍‍
MIT Scratch และ Berkeley Snap! เป็นสองตัวเลือกที่ได้เลือกมานำเสนอ และใช้สำหรับฝึกเขียนโค้ดได้ด้วยวิธีลากบล็อกมาวาง (Drag & Drop Visual Programming) แต่ไม่ได้ใช้สำหรับเขียนโค้ดภาษาคอมพิวเตอร์โดยตรง (Text-Based Programming) และก็ไม่ได้ใช้สำหรับการสร้างโค้ดแล้วคอมไพล์หรือแปลงให้เป็นแอปพลิเคชันโดยอัตโนมัติ
‍‍‍‍‍‍ ‍‍
แต่ถ้าอยากจะสอนเด็ก ๆ ให้ลองสร้าง Android App สำหรับสมาร์ทโฟน หรือแท็บเล็ต ด้วยวิธีการเดียวกับ Scratch และ Snap! และไม่จำเป็นต้องเขียนโค้ด ก็มีตัวเลือกอย่างเช่น MIT App Inventor 2 for Android (http://appinventor.mit.edu/explore/) โครงการนี้ เริ่มราวปีค.ศ. 2010 โดย Google และพัฒนาต่อโดยทีมงานจาก MIT ในปีค.ศ. 2012 และเผยแพร่เวอร์ชัน "App Inventor 2" ในเดือนธันวาคม ค.ศ. 2013 ... ปัจจุบัน สามารถเข้าใช้งานแบบออนไลน์ได้ที่ http://ai2.appinventor.mit.edu/ ถ้าลองสืบค้นในอินเทอร์เน็ต จะเห็นมีตัวอย่างในหลายเว็บที่สร้าง Android App โดยใช้ MIT App Inventor 2 เพื่อเชื่อมต่อกับบอร์ด Arduino ผ่าน Bluetooth เช่น รับค่าจากเซ็นเซอร์ที่ต่อกับบอร์ด Arduino มาแสดงผลใน App หรือควบคุมหุ่นยนต์ หรือส่งข้อมูลต่อไปยัง Google Firebase เป็นต้น
‍‍‍‍‍‍ ‍‍
💡 เมื่อ Scratch ต้องเปลี่ยนมาใช้ Google Blockly
‍‍‍‍‍‍ ‍‍
Scratch 3.0 เปลี่ยนมาใช้ JavaScript (แทน ActionScript และ Adobe Flash Player) และได้ใช้ไลบรารีที่ชื่อว่า Scratch Blocks (https://github.com/LLK/scratch-blocks) ซึ่งมาจากโปรเจกต์ Blockly (https://developers.google.com/blockly/) พัฒนาโดย Google เริ่มต้นในเดือนมิถุนายน ค.ศ. 2012 และเป็น Open Source (Apache License 2.0)
‍‍‍‍‍‍ ‍‍
Blockly เป็นไลบรารี หรือ API ที่ใช้ JavaScript / HTML5 / CSS สำหรับนำไปใช้พัฒนา Web App สำหรับผู้ที่ต้องการสร้างโปรแกรมด้วยการต่อบล็อก (Scratch-like, Visual Block Programming) และแตกต่างจาก Scratch ซึ่งเป็นแอปพลิเคชัน (Web App)
‍‍‍‍‍‍ ‍‍
ถ้าอยากทราบว่า จะใช้ Blockly สร้าง Web App อย่างไรได้บ้าง ลองดูตัวอย่าง ให้ดูเว็บ "Blockly Games" (https://blockly-games.appspot.com/) ที่มีตัวอย่างเกมส์ ผู้ใช้หรือผู้เล่นต้องนำบล็อกที่มีให้เลือก มาวางต่อกันเพื่อแก้ปัญหา
‍‍‍‍‍‍ ‍‍
Blockly สามารถแปลงโปรแกรมที่ได้จากการต่อบล็อกต่าง ๆ ให้กลายเป็นโค้ดในภาษาคอมพิวเตอร์ ซึ่งมีหลายภาษาให้เลือกเป็นเอาต์พุต เช่น JavaScript, Python เป็นต้น ดังนั้น ผู้เรียนสามารถเปรียบเทียบและเชื่อมโยงระหว่างโปรแกรมที่เกิดจากการต่อบล็อก และโค้ดที่ได้จากโปรแกรมในภาษาคอมพิวเตอร์ตามที่เลือกให้เป็นเอาต์พุต (ตรงนี้ก็ถือว่า สำคัญในการเรียนรู้ Coding)
‍‍‍‍‍‍ ‍‍
💡 BBC Micro:bit, Microsoft MakeCode
‍‍‍‍‍‍ ‍‍
โครงการ BBC Micro:bit (https://microbit.org/) จากประเทศอังกฤษ ได้พัฒนาบอร์ดไมโครคอนโทรลเลอร์ Micro:bit เพื่อส่งเสริมการเรียนรู้ด้านคอมพิวเตอร์ให้แก่เยาวชน ผู้เรียนสามารถใช้เขียนโค้ดโดยการนำบล็อกมาต่อกัน ใช้งานผ่านเว็บเบราว์เซอร์ โดยเข้าไปที่เว็บ Micro:bit's Code Kingdoms (https://www.microbit.co.uk/app/) หรือ Microsoft MakeCode for Micro:bit (https://makecode.microbit.org/)
‍‍‍‍‍‍ ‍‍
MakeCode ของ Microsoft ก็ใช้ Google Blockly เป็นพื้นฐาน (a fork of Blockly) ในการสร้าง Web-based Block editor และใช้วิธีแปลงบล็อกเหล่านั้น ให้เป็นโค้ดในภาษา "Static TypeScript (STS) / TypeScript" จากนั้นจึงแปลงให้เป็นไฟล์โปรแกรม (.hex) ที่นำไปใช้ได้กับบอร์ด Micro:bit
‍‍‍‍‍‍ ‍‍
ผู้ที่อยากจะใช้ Scratch ร่วมกับบอร์ด Micro:bit ก็มีตัวเลือกอย่างเช่น "Scratch 3.0 micro:bit experimental extension" ซึ่งสามารถเชื่อมต่อโปรแกรม Scratch ผ่าน Bluetooth ไปยังบอร์ด Micro:bit ได้ โดยต้องโปรแกรมไฟล์ scratch-firmware-combined.hex ลงในบอร์ดก่อน
‍‍‍‍‍‍ ‍‍
💡 Arduino กับการเขียนโค้ดเชิงกราฟิกแบบออนไลน์ในสไตล์ Blockly
‍‍‍‍‍‍ ‍‍
ลองมาดูว่า มีตัวอย่างเว็บที่ใช้ Blockly มาสร้าง Web App สำหรับสร้างโปรแกรมเพื่อนำไปใช้กับบอร์ดไมโครคอนโทรลเลอร์ อย่างเช่น Arduino อะไรบ้าง
‍‍‍‍‍‍ ‍‍
◻️ BlocklyDuino (https://github.com/gasolin/BlocklyDuino)
- เป็น Web-based visual programming editor for Arduino
- ได้แรงบันดาลใจมาจาก ( inspired by) "ArduBlock" ซึ่งเป็น Arduino Plug-in สำหรับเขียนโค้ดด้วยบล็อก
- พัฒนาโดย Fred Lin ตั้งแต่ปีค.ศ. 2012
- เป็น Open Source (Apache License 2.0)
- ใช้ Google Blockly สำหรับพัฒนาในส่วนที่เป็น Web App
- สามารถรันเป็น Web server (เขียนด้วย Python) ในเครื่องของผู้ใช้ได้ และเข้าใช้งานผ่านหน้าเว็บได้ แต่จะต้องติดตั้งซอฟต์แวร์ Arduino IDE & tools ในเครื่องของผู้ใช้ เพื่อใช้ในการคอมไพล์โค้ดและอัปโหลดไปยังบอร์ด Arduino
- ใช้สำหรับบอร์ด Arduino Uno, Mega, Nano เป็นต้น
- มีการเพิ่มบล็อกให้เลือกใช้สำหรับฮาร์ดแวร์ของ Groove เช่น RC Servo, Motor, Relay, Button, Tilt Switch เป็นต้น และสามารถใช้งานออนไลน์ได้ที่ BlocklyDuino "Grove Edition" https://bit.ly/2mPqDwq

◻️ BlocklyProp (http://blockly.parallax.com/blockly/)
- เผยแพร่ครั้งแรกในเดือนกันยายน ค.ศ. 2016
- พัฒนาโดยบริษัท Parallax Inc. (USA)
- เป็น Open source (Apache License 2.0)
- ได้แรงบันดาลใจมาจาก (inspired by) BlocklyDuino
- ใช้ Google Blockly สำหรับพัฒนาในส่วนที่เป็น Web App
- สามารถรันเป็น Web server (เขียนด้วย Java) ในเครื่องของผู้ใช้ได้ และเข้าใช้งานผ่านหน้าเว็บได้
- ใช้ได้เฉพาะบอร์ด Parallax เท่านั้น เช่น บอร์ด Propeller Multicore(http://www.parallax.com/microcontrollers/propeller)
- เข้าใช้งานแบบออนไลน์ผ่านเว็บได้ที่ http://blockly.parallax.com/blockly/ และผู้ใช้ต้องติดตั้งซอฟต์แวร์ชื่อ "BlocklyProp Client" เพื่อใช้ในการเชื่อมต่อบอร์ดผ่านทาง USB สำหรับการอัปโหลดโปรแกรม

◻️ ArduBlockly (https://ardublockly.embeddedlog.com/)
- ได้แรงบันดาลใจมาจาก ( inspired by) และพัฒนาต่อยอดจาก BlocklyDuino
- ใช้ Google Blockly สำหรับพัฒนาในส่วนที่เป็น Web App
- เป็น Open source (Apache License 2.0)

◻️ Blockly@rduino (http://www.techmania.fr/BlocklyDuino/)
- พัฒนาต่อยอดจาก BlocklyDuino เริ่มต้นราวปีค.ศ. 2016
- เป็น Open Source (Apache License 2.0)
- ใช้ Google Blockly สำหรับพัฒนาในส่วนที่เป็น Web App
- ใช้สำหรับบอร์ด Arduino Uno, Mega, Nano เป็นต้น

◻️ Webduino Blockly (https://blockly.webduino.io/)
- ใช้สำหรับบอร์ด BPI:bit (ESP32-based) จากบริษัทในประเทศจีน
- เป็น Open Source


🤔 เพิ่มเติม:
- การสร้างระบบซอฟต์แวร์ในทางวิศวกรรมแบบใช้บล็อก ก็มีให้เห็น อย่างเช่น MATLAB / Simulink และ LabView เป็นต้น สามารถจำลองการทำงาน แล้วแปลงเป็นโค้ดคอมไพล์ไปใช้งานสำหรับบอร์ดไมโครคอนโทรลเลอร์ได้ แต่ก็เป็นซอฟต์แวร์ที่ต้องเสียค่าลิขสิทธิ์ ไม่ฟรี และไม่ใช่ Open Source
- การเขียนโปรแกรมโดยใช้บล็อกสำหรับไมโครคอนโทรลเลอร์ เช่น Arduino ความสะดวกอยู่ที่การเลือกใช้บล็อกที่มีการเตรียมไว้แล้ว ก็เหมือนกับการสร้างไลบรารีสำหรับ Arduino ไว้ให้เรียกใช้งาน คนอื่นทำไว้ให้ เราก็แค่นำมาใช้งานให้เป็น
- ถ้าชุดของบล็อกเหล่านั้น (หรือเรียกว่า Block Set) มีอย่างจำกัด ก็จะจำกัดความยืดหยุ่นหรือความสามารถในการสร้างโปรแกรมของเราได้ แต่ถ้าบล็อกเซตมีจำนวนมาก เช่น มีจำนวนของบล็อกหลักร้อยหรือหลักพัน ก็ต้องใช้เวลาเรียนรู้ว่า แต่ละบล็อกใช้งานอย่างไร
- บางกรณีมีการสร้าง Custom Block (Blockly-based) ให้ผู้ใช้ เขียนโค้ดเองลงในบล็อกนั้นก็ได้ หรือถ้าสามารถสร้างบล็อกเพิ่มเติมไว้ใช้งานได้เอง ก็น่าสนใจ
- การสร้างบล็อกสำหรับใช้งานกับอุปกรณ์ฮาร์ดแวร์ แม้ว่าจะเป็นอุปกรณ์ประเภทเดียวกัน ก็มีความแตกต่างกันได้ เหมือนในกรณีของไลบรารีสำหรับ Arduino จากผู้พัฒนาหลายแหล่งและมีชื่อฟังก์ชันหรือคำสั่งซึ่งแตกต่างกัน
‍‍‍‍‍‍ ‍‍
🤔 ข้อคิดเห็น:
- ตัวเลือกซึ่งเป็นซอฟต์แวร์สำหรับการเรียนรู้ ที่ได้นำเสนอมานั้น เป็นแค่บางส่วน (Open Source ทั้งหมด) ยังมีตัวเลือกอื่น ๆ อีกสำหรับการเรียนรู้
- ควรส่งเสริมความหลากหลาย เพื่อให้เกิดการเปรียบเทียบ พิจารณาความเหมือนความต่าง และความเชื่อมโยง
- มีตัวเลือกให้มากมายและใช้ได้ฟรี แต่ถ้าไม่เริ่มและลงมือจริงจัง ก็ไม่ก่อให้เกิดประโยชน์
‍‍‍‍‍‍ ‍‍
References / Credit
- MIT Scratch
🔗 https://scratch.mit.edu
- Berkeley Snap!
🔗 https://snap.berkeley.edu
- MIT App Inventor 2 for Android
🔗 http://appinventor.mit.edu/explore/
- MIT App Inventor 2 online editor
🔗 http://ai2.appinventor.mit.edu/
- Google Blockly
🔗 https://developers.google.com/blockly/
- Google Blockly: Sourcecode
🔗 https://github.com/google/blockly
- Scratch Blocks: Sourcecode
🔗 https://github.com/LLK/scratch-blocks
- BBC Micro:bit
🔗 https://microbit.org/
- Micro:bit's Code Kingdoms
🔗 https://www.microbit.co.uk/app/
- MakeCode: Microsoft's JavaScript Blocks editor for Micro:bit
🔗 https://makecode.microbit.org/
- Scratch 3.0 micro:bit experimental extension
🔗 https://llk.github.io/microbit-extension/iste18/
- ArduBlock: Sourcecode
🔗 https://github.com/taweili/ardublock
- BlocklyDuino: Sourcecode
🔗 https://github.com/gasolin/BlocklyDuino
- BlocklyProp
🔗 http://blockly.parallax.com/blockly/
- BlocklyProp Starter Kit, Parallax Inc.
🔗 https://www.parallax.com/educ…/teach-blocklyprop-starter-kit
- BlocklyProp: Sourcecode
🔗 https://github.com/parallaxinc/BlocklyProp
- ArduBlockly
🔗 https://ardublockly.embeddedlog.com/
- ArduBlockly: Sourcecode
🔗 https://github.com/carlosperate/ardublockly/
- BlocklyDuino "Grove Edition"
🔗 https://blocklyduino.github.io/Blockly…/…/apps/blocklyduino/
- Blockly@rduino
🔗 http://www.techmania.fr/BlocklyDuino/
- Blockly@rduino: Sourcecode
🔗 https://github.com/technologiescollege/Blockly-at-rduino
- Webduino: Sourcecode
🔗 https://github.com/webduinoio
‍‍‍‍‍‍ ‍‍
#IoT #STEM #VisualProgramming #KruBright
‍‍‍‍‍‍ ‍‍