ฉันจะเริ่มต้นกับ HTML5 ได้อย่างไร [ปิด]

42

เวิร์กโฟลว์ที่แนะนำคืออะไรในการเรียนรู้ HTML5 ฉันควรติดตั้งเครื่องมืออะไร SDK อะไร จะเริ่มที่ไหนดี วิธีทดสอบ วิธีแก้ปัญหา? ฉันจะอ่านอะไร

ฉันเข้าใจว่าสิ่งที่มักถูกระบุว่าเป็น "การพัฒนา HTML5" นั้นอันที่จริงแล้วเป็นการผสมผสานระหว่าง HTML, CSS, JS และอื่น ๆ แต่ฉันไม่เชื่อว่าโครงการขนาดใหญ่จะได้รับการพัฒนาใน Notepad นั่นคือเหตุผลที่ฉันขอให้คุณเปิดเผยเคล็ดลับและกลเม็ดของคุณเกี่ยวกับขั้นตอนการทำงานของคุณ

— daniel.sedlacek
แหล่งที่มา

ฉันอยากจะแนะนำให้ดูเป็น diveintohtml5 แต่ยังลองดู html5rocks htm5rocksและอันนี้อาจไม่เป็นที่รู้จักโดยหลายคน แต่ Facebook กำลังผลักดัน HTML5 จำนวนมาก: ตรวจสอบหน้า html5 ของพวกเขาที่นี่facebook.com/html5

— VJth

ทำสิ่งที่คล่องตัว <html>Hi</html>ให้คุณเริ่มต้นเพราะคุณไม่ต้องการ DOCTYPE ทำซ้ำ

— Michael Durrant

42

ถ้าฉันจะเริ่มโครงการ HTML5 ใหม่ตั้งแต่ต้นตอนนี้ฉันอาจจะทำสิ่งนี้:

ดาวน์โหลดและใช้HTML5 Boilerplate สิ่งนี้จะช่วยให้คุณมีหน้าใหม่พร้อมกับสิ่งสำคัญส่วนใหญ่ที่เริ่มต้นได้และพร้อมสำหรับการทดสอบ นอกจากนี้ยังมีคุณสมบัติการดีบักที่ดีที่คุณควรใช้พร้อมกับ firebug

ดูDive ใน HTML5เพื่อดูประวัติและการใช้งานโค้ด

ใน mac ของฉันฉันใช้ Coda และที่ทำงานฉันใช้ Dreamweaver ในมุมมองโค้ด พวกเขาจะไม่สร้างหน้าให้คุณ แต่การทำโค้ดให้สมบูรณ์การบอกใบ้และการให้รหัสสีทำงานได้ดี ฉันแน่ใจว่า Aptana และคุณสมบัติพิเศษอื่น ๆ แต่ฉันพบว่าง่ายกว่าที่จะดีกว่าเมื่อพูดถึง HTML

หยิบหนังสือHTML5และCSS3จาก "A Book Apart" อย่างละเอียด (CSS3 ออกมาในปลายเดือนนี้)

และในที่สุด - ลองและคิดออกสิ่งทั้งหมดนี้:

Opera Developer Network - http://dev.opera.com/articles/view/html-5-canvas-the-basics/

Canvas Cheat Sheet - http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html

วิธีการวาดด้วยผ้าใบ HTML5 http://thinkvitamin.com/code/how-to-draw-with-html-5-canvas/

— เกร็กข
แหล่งที่มา

ฉันขอแนะนำให้คุณเรียนรู้ JavaScript และหนังสือที่ฉันอยากจะแนะนำนั่นคือ JavaScript: คู่มือสรุปโดย David Flanagan, หลังจากนั้น jQuery นั้นยอดเยี่ยมมาก สำหรับบรรณาธิการแล้ว Aptana และ DreamWeaver ในความคิดของฉันนั้นแย่มาก ฉันจะแนะนำให้ใช้ Emacs

หลังจากคำแนะนำที่ชัดเจนคุณควรอ่านJavaScript: The Good Partsโดย Crockford

— kzh

หนังสือ HTML5 ที่กล่าวถึงนี้สามารถอ่านได้ฟรีที่หน้าแรกของมัน: html5forwebdesigners.com

— user16764

52

HTML5 ไม่ใช่สิ่งที่รวมเข้าด้วยกัน มันคือชุดของส่วนขยายไปยัง HTML ซึ่งบางส่วนมีการใช้งานอย่างกว้างขวางและสามารถใช้งานได้อย่างปลอดภัยซึ่งยังไม่มีใครดำเนินการและอีกมากมาย หากคุณพยายามที่จะปฏิบัติต่อ HTML5 เป็นแพลตฟอร์มการพัฒนาเดียวที่สอดคล้องกันและ 'เรียนรู้มันทั้งหมด' คุณจะมีช่วงเวลาที่ยากลำบาก

สิ่งที่คุณต้องเรียนรู้คือเว็บทั้งหมด: HTML พื้นฐาน, CSS, JavaScript, Core DOM, HTML DOM, โมเดลวัตถุเบราว์เซอร์พื้นฐาน จากนั้นคุณสามารถเพิ่มคุณสมบัติของเว็บใหม่ได้ตามต้องการและรองรับเบราว์เซอร์: ส่วนขยาย HTML5, คุณสมบัติ CSS3, ภาพวาดบนผืนผ้าใบ, เว็บซ็อกเก็ต, ส่วนขยาย DOM และ BOM อื่น ๆ แยกตัวออกจาก HTML5 ...

ชุดคุณลักษณะของเว็บมีการพัฒนาอยู่ตลอดเวลาและไม่มีจุดอ้างอิงเดียว W3Schools (ซึ่งไม่เกี่ยวข้องกับ W3C โดยบังเอิญ) พยายาม แต่มันก็เต็มไปด้วยข้อผิดพลาด อย่าเชื่อในสิ่งที่มันพูดว่าเป็นพระกิตติคุณ

คุณอาจจำเป็นต้องอ้างถึงHTML4 , CSS2 ที่ชัดเจน รายละเอียดDOM CoreและDOM HTMLเพื่อให้แน่ใจ คุณอาจต้องการดูการอ้างอิง DOM ของ MDCและการอ้างอิง DOM ของ MSDNสำหรับ Firefox และ IE ที่สนับสนุน ข้อมูลจำเพาะ HTML5มีจำนวนมากขึ้นไปวันที่สิ่ง DOM เกินไปเช่นเดียวกับส่วนขยายใหม่ HTML แต่มันเป็นเอกสารที่ยาวและเทอะทะค่อนข้างยากที่จะใช้แม้โดยมาตรฐานของเอกสารมาตรฐาน แม้ว่าจะไม่ได้เลวร้ายเท่าสเป็คECMAScript ที่ไม่ยอมรับ (โชคดีที่คุณอาจคุ้นเคยกับหลายสิ่งอยู่แล้วหากคุณคุ้นเคยกับการทำงานกับ ActionScript)

คุณไม่จำเป็นต้องมี SDK หรือ IDE เพื่อพัฒนา HTML / CSS / JS คุณสามารถใช้ IDE ได้หากต้องการ แต่ฉันมีความสุขมากที่ทำทุกอย่างในโปรแกรมแก้ไขข้อความที่ชื่นชอบ ไม่มีขั้นตอนการสร้าง / คอมไพล์ที่ต้องกังวลคุณเพียงแค่บันทึกไฟล์ของคุณและกดปุ่มโหลดซ้ำทำงานเสร็จแล้ว เว็บเบราว์เซอร์ที่ทันสมัยส่วนใหญ่มีตัวดีบักเกอร์และเครื่องมือพัฒนาอื่น ๆ ที่มีอยู่แล้วภายใน (เช่น IE8) หรือพร้อมใช้งานเป็นส่วนขยาย (เช่นFirebug )

— bobince
แหล่งที่มา

1

ฉันเข้าใจว่าสิ่งที่มักถูกระบุว่าเป็น "การพัฒนา HTML5" นั้นอันที่จริงแล้วเป็นการผสมผสานระหว่าง HTML, CSS, JS และอื่น ๆ ... แต่ฉันไม่เชื่อว่าโครงการขนาดใหญ่สามารถเป็น / ได้รับการพัฒนาใน Notepad นั่นคือเหตุผลที่ฉันขอให้คุณเปิดเผยเคล็ดลับและกลเม็ดของคุณเกี่ยวกับขั้นตอนการทำงานของคุณ

2

+1 "ตามที่เราทุกคนรู้ว่า HTML5 จะได้รับการสรุปในปี 2022 สามปีหลังจากเหตุการณ์ที่ปรากฎใน Blade Runner" - tiny.cc/standards-bloat-and-html5

8

ไม่โครงการขนาดใหญ่จะไม่ถูกพัฒนาใน Notepad นั่นคงบ้าไปแล้ว Notepad เป็นตัวแก้ไขข้อความที่น่ากลัว พวกเขาจะได้รับการพัฒนาใน Notepad ++ :-)

— bobince

11

@daniel: อย่างน้อยฉันคิดว่านี่เป็นคำตอบที่มีประโยชน์ไม่ว่าจะเป็นประโยชน์กับคุณก็ตาม เขาแนะนำให้ใช้โปรแกรมแก้ไขข้อความ (ดี); ฉันชอบ Notepad ++ ด้วยเช่นกัน แต่ฉันมักจะใช้ Emacs (ไม่มีโปรแกรมแก้ไขไฟล์สงคราม) เขาบอกว่าจะยึดติดกับคุณสมบัติที่ได้รับการสนับสนุนทั่วไปและสร้าง neologisms เฉพาะ HTML 5 / CSS 3 (& Co. ) ที่ด้านบนของหน้าเว็บของคุณ (ณ จุดนั้นทำงานอยู่แล้ว) HTML 5 ไม่ใช่สิ่งใหม่ทั้งหมด หากคุณสามารถขับรถยนต์คุณสามารถขับรถคันใหม่ด้วยเครื่องยนต์ไฮบริด, เครื่องปรับอากาศและคุณสมบัติใหม่ทั้งหมดที่มี; อย่างไรก็ตามมันยังคงเป็นรถยนต์และคุณสามารถใช้มันเพื่อขับเคลื่อนเส้นทางของคุณ

5

@daniel: คำตอบนี้มีประโยชน์มากที่สุดที่นี่รวมถึงคุณด้วยเพราะมันมีคำแนะนำที่คุณต้องการและไม่บอกฉันว่ามันจะไม่หยุดฉันลงคะแนนเลย

9

ฉันขอแนะนำWebStormจาก JetBrains (หรือผลิตภัณฑ์ใด ๆ ของIntelliJเช่น PHPStorm, RubyMine, PyCharm เนื่องจากพวกเขาสนับสนุน HTML) คุณได้รับ CSS, HTML auto complete และ live (ขณะที่คุณพิมพ์) ตรวจสอบความถูกต้อง การสนับสนุนการจัดเตรียม Javascript ใหม่ (สิ่งที่ฉันไม่ได้เห็นที่อื่น) และแม้แต่ความสามารถในการดีบัก Javascript ใน IDE (ถ้า Firebug หรือเครื่องมือนักพัฒนา Chrome ขาดให้คุณ) มันมีการสนับสนุนโครงการเช่นเดียวกับ SVN, Git, Perforce และการสนับสนุน CVS และคุณสมบัติอื่น ๆ อีกมากมายขอแนะนำอย่างยิ่ง ...

— Kris Erickson
แหล่งที่มา

+1 นั่นฟังดูน่าตื่นเต้น ฉันคิดว่าฉันจะทดลองใช้ฟรี 45 วัน

ฉันใช้ IntelliJ IDEA เพื่อการพัฒนา Java และไม่มีอะไรที่สัมผัสได้ในแง่ของคุณสมบัติที่มีให้ Jetbrains ยังสร้างปลั๊กอิน ReSharper สำหรับ Visual Studio หากฉันกำลังมองหา IDE บนเว็บแท้ๆฉันลองใช้ WebStorm อย่างแน่นอน การปรับเปลี่ยนเพียงอย่างเดียวนั้นคุ้มค่า

8

เครื่องมือที่ทรงคุณค่าหลายอย่าง

FireBug - ปลั๊กอินสำหรับนักพัฒนาซอฟต์แวร์สำหรับ Firefox อนุญาตให้ดีบัก JS, HTML, สไตล์
แถบเครื่องมือ IE Developer สำหรับ IE เวอร์ชั่นเก่ากว่า (6,7) มี HTML5 ไม่มากนัก ใหม่ IE มีเครื่องมือ F12
Chrome มีเครื่องมือสำหรับนักพัฒนา

เครื่องมือเหล่านั้นส่วนใหญ่ใช้สำหรับการดีบัก Javascript และเพื่อค้นหาสิ่งต่าง ๆ เกี่ยวกับการวางตำแหน่งองค์ประกอบและสไตล์ CSS ที่ใช้

ขอบคุณถ้าฉันเข้าใจถูกต้องเบราว์เซอร์เข้ากันได้เสมอปัญหา

ใช่มันจะดีขึ้นเมื่อใช้เบราว์เซอร์รุ่นใหม่ IE 6-7 และ 8 ถึงส่วนหนึ่งค่อนข้างแย่ในเรื่องนี้

สำหรับการทดสอบ Internet Explorer รุ่นต่างๆให้ใช้ IETester ( my-debugbar.com/wiki/IETester ) หรือเครื่องเสมือนที่มีให้โดย Microsoft ( go.microsoft.com/fwlink/?LinkId=70868 )

6

หากคุณกำลังมองหาคำแนะนำ IDE Eclipse ค่อนข้างดี หากคุณกำลังมองหาเครื่องมือ Javascript, Firebug เหมาะสำหรับการแก้ไขข้อบกพร่อง

อย่างไรก็ตามคุณไม่จำเป็นต้องมี "เครื่องมือ" ใด ๆ ฉันคิดว่าความคิดที่ว่า "โครงการขนาดใหญ่ไม่สามารถเป็น / ไม่ได้พัฒนาใน Notepad" นั้นเป็นเรื่องที่ค่อนข้างผิดพลาด ฉันใช้ Notepad ++ เพื่อเขียน HTML / CSS / Javascript ทั้งหมดของฉันและฉันคิดว่านี่เป็นวิธีการทั่วไป - แม้สำหรับนักออกแบบเว็บไซต์มืออาชีพ Notepad ++ มีการเน้นไวยากรณ์สำหรับ HTML, CSS และ Javascript เช่นเดียวกับการเติมอัตโนมัติ หากคุณต้องการซอฟต์แวร์ที่มีมากกว่านั้นโปรดระบุคุณสมบัติที่สำคัญกับคุณ (BTW หากคุณเป็นผู้ใช้ Mac ให้ลองใช้ BBEdit)

ไซต์ขนาดใหญ่มักถูกเขียนด้วยเฟรมเวิร์กเช่น Django หรือ Ruby on Rails แต่มันไม่มีส่วนเกี่ยวข้องกับการใช้หรือเรียนรู้ HTML5

— เจฟฟ์
แหล่งที่มา

น่าสนใจ ... คุณต้องการแนะนำปลั๊กอิน Eclipse ใดสำหรับการพัฒนา JS?

ไม่เคยใช้ แต่ลิงค์นี้อาจมีประโยชน์ Aptana ยังมีให้ใช้งานในโปรแกรมแบบสแตนด์อโลนฉันเชื่อ (เป็นทางเลือกแทน Eclipse) ผู้คนมากมายได้แนะนำ แต่ฉันไม่เคยลองจริง ๆ อาจเป็นสิ่งที่ควรค่าแก่การพิจารณา stackoverflow.com/questions/613988/…

— Jeff

เพิ่งทราบว่า Notepad นั้นแตกต่างจาก Notepad ++ มากฉันจะไม่พัฒนาเว็บไซต์ ( เว็บไซต์ใด ๆ ) ใน Notepad

เห็นด้วยฉันเอาความคิดเห็นที่จะหมายถึง "โปรแกรมแก้ไขข้อความ" ไม่เคร่งครัด "MS Notepad" แต่ถ้าเป็นเช่นนั้นคุณก็ถูกต้องสมบูรณ์

— Jeff

5

ฉันเชื่อว่า Adobe (ผู้สร้าง Flash) จริง ๆ แล้วอยู่ระหว่างดำเนินการปล่อยเครื่องมือแปลง Flash เป็น HTML5 ซึ่งอาจคุ้มค่ากับการดู

http://news.softpedia.com/news/Adobe-Showcases-Flash-to-HTML5-Converter-163709.shtml

Flash กลายเป็นเครื่องมือสำหรับการพัฒนา HTML5 อย่างมีประสิทธิภาพ

และในสัปดาห์นี้ Microsoft ได้ประกาศว่าพวกเขาจะไปในทิศทางเดียวกันกับ Silverlight ดังนั้นดูเหมือนว่าทุกอย่างจะไปถึง HTML5 ในขณะนี้

คำถามเดียวที่ฉันมีคือโค้ด HTML5 ที่สร้างโดยเครื่องมือทั้งสองนี้ดีแค่ไหน? เราไม่ทราบคำตอบว่าจนกว่าพวกเขาจะเปิดตัวจริง แต่ฉันไม่เคยพบรหัสที่สร้างขึ้นเพื่อคุณภาพที่ดีโดยเฉพาะ หวังว่าเราจะไม่จบลงด้วย MS Front Page อันทันสมัย

— Spudley
แหล่งที่มา

7

สุจริตฉันไม่เชื่อในเครื่องมือการแปลงรหัสจะเป็นที่จะนำมันอย่างอ่อนโยนและไม่ดี ฉันรู้ว่า Flash เป็นเครื่องมือที่ยอดเยี่ยมหากไม่ถูกทารุณกรรมและจะอยู่กับเราเป็นเวลานาน แต่ผมค่อนข้างจะเขียน JS และ CSS ที่มีเครื่องมือที่เหมาะสม :)

1

@ แดเนียล - ยอมรับว่าเครื่องมือการแปลงมักจะไม่ดีและฉันพูดมาก แต่อาจเป็นจุดเริ่มต้นที่ดีสำหรับคุณหากคุณต้องการแปลงแฟลชที่มีอยู่ แม้ว่าคุณจะไปและทำซ้ำโค้ด HTML ที่เป็นผลลัพธ์เองอย่างน้อยคุณก็จะมีบางสิ่งที่จะทำงานด้วย

— Spudley

4

nitpick: Adobe ซื้อ Flash แล้ว (ซื้อผ่าน Macromedia) และไม่ได้สร้าง

— Kornel

4

ฉันขอแนะนำให้ตั้งค่าระบบบิลด์สำหรับโค้ด Javascript ของคุณและให้ตรวจสอบกับJSLintทุกบิลด์ ฉันพบว่าสิ่งนี้ทำให้เกิดข้อผิดพลาดจำนวนมากในช่วงต้นและส่งเสริมการเข้ารหัสที่ดี (เล่นกับตัวเลือกหากเข้มงวดเกินไป) ดูระบบการสร้างของ jQuery บนGitHubเป็นตัวอย่างที่ดี

นอกเหนือจากนั้นสำหรับการแก้ไขฉันยังเป็นแฟนตัวยงของ Notepad ++ เนื่องจากฉันยังไม่ได้ค้นหา IDE ที่มีคุณสมบัติที่มีประโยชน์โดยไม่ต้องมีทั้ง bloat และ GUI trickery

คุณสามารถดู Dreamweaver ล่าสุดได้ แต่ตัวแก้ไขรหัสไม่ได้เลวร้ายและพวกเขามีแกลเลอรี่วิดเจ็ตที่มีวิดเจ็ต HTML5 จำนวนมากที่คุณสามารถปล่อยได้

— อดัมเฮลธ์
แหล่งที่มา

2

ฉันไม่เชื่อว่าโครงการขนาดใหญ่สามารถ / ได้รับการพัฒนาใน Notepad

คุณผิดที่นั่น ฉันเป็นผู้ใช้ Notepad เป็นเวลานานและฉันคิดว่ามันเป็นวิธีที่ดีที่สุด สำหรับการดีบักฉันใช้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของ IE, Firefox ของ FireBug และตัวตรวจสอบของ Chrome

เท่าที่ HTML5 ดำเนินไปมันเป็นเพียงแค่ HTML ธรรมดาที่มีของเล่นเสริมอยู่สองสามรายการ นอกจากนี้ไม่มีสิ่งใดที่ทำให้คุณไม่สามารถประกาศเอกสาร HTML5 จากนั้นใช้เฉพาะสิ่งที่อยู่ใน HTML รุ่นเก่ากว่า

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

— Santosh Kumar
แหล่งที่มา

กำหนดใหญ่ Notepad ไม่ได้มีการเน้นไวยากรณ์และการบำรุงรักษาอาจมีปัญหากับ Notepad ... อย่างน้อยฉันก็ต้องไปที่ Notepad ++ ... แม้แต่ VIM! :)

ฉันใช้ Notepad ++ ตอนนี้แต่ใช้ Notepad ธรรมดามานาน และโดย "ใหญ่" ฉันหมายถึง "ใหญ่พอที่จะมีรายได้เพียงพอที่จะจ่ายสำหรับค่าครองชีพของฉันและมีเงินเหลือพอ"