Bagaimana saya memulai dengan HTML5? [Tutup]

42

Apa alur kerja yang disarankan untuk belajar HTML5? Alat apa yang harus saya instal? SDK apa? Mulai dari mana? Bagaimana cara menguji? Bagaimana cara debug? Apa yang saya baca?

Saya mengerti bahwa apa yang sering disebut sebagai "pengembangan HTML5" sebenarnya merupakan campuran dari HTML, CSS, JS dan banyak lagi, namun saya tidak percaya bahwa proyek yang lebih besar dikembangkan di Notepad. Itulah mengapa saya meminta Anda untuk mengungkapkan tips dan trik tentang alur kerja Anda.

— daniel.sedlacek
sumber

Saya pasti akan menyarankan untuk melihat ke diveintohtml5 Tetapi juga memeriksa html5rocks htm5rocks dan yang ini mungkin tidak diketahui oleh banyak orang tetapi Facebook mendorong banyak HTML5: Periksa halaman html5 mereka di sini facebook.com/html5

— VJth

Lakukan hal yang gesit. <html>Hi</html>membantu Anda memulai karena Anda tidak memerlukan DOCTYPE. Ulangi.

— Michael Durrant

42

Jika saya memulai proyek HTML5 baru dari awal sekarang saya mungkin akan melakukan sesuatu seperti ini:

Unduh dan gunakan HTML5 Boilerplate . Ini akan memberi Anda halaman baru dengan sebagian besar hal-hal penting diinisialisasi dan siap untuk diuji. Juga termasuk beberapa fitur debug bagus yang harus Anda gunakan bersama dengan pembakar

Lihat di Menyelam ke HTML5 untuk melihat riwayat dan penggunaan kode.

Di mac saya, saya menggunakan Coda, dan di tempat kerja saya menggunakan Dreamweaver dalam tampilan kode. Mereka tidak akan membangun halaman untuk Anda, tetapi penyelesaian kode, petunjuk dan kode warna berfungsi dengan baik. Saya yakin Aptana dan sejenisnya menawarkan fitur-fitur hebat, tetapi saya selalu menemukan lebih sederhana untuk menjadi lebih baik ketika datang ke html.

Defintiely mengambil buku HTML5 dan CSS3 dari "A Book Apart" (CSS3 keluar akhir bulan ini)

Dan akhirnya - untuk mencoba dan mencari tahu semuanya ini:

Jaringan Pengembang Opera - 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

Cara menggambar dengan HTML5 Canvas http://thinkvitamin.com/code/how-to-draw-with-html-5-canvas/

— Gregg B
sumber

Saya juga merekomendasikan Anda belajar JavaScript dan buku yang saya sarankan adalah JavaScript: panduan definitif Oleh David Flanagan, Setelah itu jQuery luar biasa. Adapun seorang editor, Aptana dan DreamWeaver menurut saya mengerikan. Saya akan merekomendasikan menggunakan Emacs.

Setelah panduan yang pasti, Anda harus membaca JavaScript: The Good Parts , oleh Crockford.

— kzh

Buku HTML5 yang disebutkan dapat dibaca secara gratis, di beranda: html5forwebdesigners.com

— user16764

52

HTML5 bukan satu hal yang terintegrasi. Ini adalah kumpulan ekstensi ke HTML, beberapa di antaranya diimplementasikan secara luas dan dapat digunakan dengan aman, beberapa di antaranya belum ada yang mengimplementasikan, dan banyak di antaranya. Jika Anda mencoba memperlakukan HTML5 sebagai platform pengembangan tunggal yang koheren dan 'pelajari semuanya', Anda akan mengalami kesulitan.

Sebaliknya yang perlu Anda pelajari adalah web secara keseluruhan: HTML dasar, CSS, JavaScript, Core DOM, HTML DOM, Model Objek Browser dasar. Kemudian Anda dapat menambahkan fitur-fitur dari Web Baru sebagai dan di mana Anda membutuhkannya, dan dukungan browser memungkinkan: ekstensi HTML5, properti CSS3, gambar kanvas, soket web, ekstensi DOM dan BOM lainnya yang dipisahkan dari pekerjaan HTML5 ...

Rangkaian fitur web terus berkembang dan tidak ada satu titik referensi pun. W3Schools (yang tidak ada hubungannya dengan W3C secara tidak sengaja) mencoba, tetapi penuh dengan kesalahan. Jangan percaya apa yang dikatakannya sebagai Injil.

Anda mungkin perlu merujuk ke HTML4 definitif , CSS2 . DOM Core dan DOM HTML untuk memastikan. Anda mungkin juga ingin melihat referensi DOM MDC dan referensi DOM MSDN untuk apa yang didukung oleh Firefox dan IE. Spesifikasi HTML5 mengandung lebih banyak hal-hal DOM juga, serta ekstensi HTML baru, tetapi itu adalah dokumen yang panjang dan berat, cukup sulit untuk digunakan bahkan oleh standar dokumen standar. Meskipun tidak seburuk spesifikasi ECMAScript yang tidak bisa ditembus . (Untungnya Anda mungkin sudah terbiasa dengan banyak hal itu jika Anda sudah terbiasa bekerja dengan ActionScript.)

Anda tidak memerlukan SDK atau IDE untuk mengembangkan HTML / CSS / JS. Anda dapat menggunakan IDE jika mau, tetapi saya cukup senang melakukan semuanya di editor teks favorit saya. Tidak ada langkah-langkah membangun / kompilasi yang perlu dikhawatirkan, Anda cukup menyimpan file dan menekan reload, pekerjaan selesai. Sebagian besar browser web modern memiliki debugger dan alat pengembangan lainnya baik yang ada di dalamnya (misalnya IE8) atau tersedia sebagai ekstensi (misalnya Firebug ).

— bobince
sumber

1

Saya mengerti bahwa apa yang sering dilabeli sebagai "pengembangan HTML5" sebenarnya adalah campuran dari HTML, CSS, JS dan banyak lagi ... namun saya tidak percaya bahwa proyek yang lebih besar dapat / dikembangkan di Notepad. Itu sebabnya saya meminta Anda untuk mengungkapkan tips dan trik tentang alur kerja Anda.

2

+1 "seperti yang kita semua tahu HTML5 akan selesai pada tahun 2022, tiga tahun setelah peristiwa yang digambarkan dalam Blade Runner." - tiny.cc/standards-bloat-and-html5

8

Tidak, proyek yang lebih besar tidak akan dikembangkan di Notepad. Itu akan menjadi gila. Notepad adalah editor teks yang mengerikan. Mereka akan dikembangkan di Notepad ++. :-)

— bobince

11

@aniel: Setidaknya saya pikir ini adalah jawaban yang berguna , tidak peduli apakah itu berguna bagi Anda. Dia menyarankan menggunakan editor teks (baik); Saya juga suka Notepad ++, meskipun saya biasanya menggunakan Emacs (tidak ada perang editor yang dimaksudkan). Dia mengatakan untuk tetap berpegang pada fitur yang umum didukung dan membangun neologisme spesifik HTML 5 / CSS 3 (& Co.) di atas halaman web Anda (pada saat itu sudah berfungsi). HTML 5 bukanlah hal yang sama sekali baru; jika Anda dapat mengendarai mobil, Anda dapat mengendarai mobil baru yang mengkilap dengan mesin hybrid, AC dan semua fitur baru yang dimilikinya; Namun, itu masih mobil dan Anda dapat menggunakannya untuk menyetir jalan Anda.

5

@aniel: Jawaban ini mudah paling berguna di sini, termasuk untuk Anda karena berisi saran yang Anda butuhkan, dan tidak memberi tahu saya bahwa itu tidak akan menghentikan saya memilihnya.

9

Saya sangat merekomendasikan WebStorm , dari JetBrains (atau produk berbasis IntelliJ mereka , seperti PHPStorm, RubyMine, PyCharm karena semuanya mendukung HTML). Anda mendapatkan CSS, pelengkapan otomatis HTML, dan langsung (saat Anda mengetik) memeriksa kebenarannya. Dukungan refactoring untuk Javascript (sesuatu yang belum pernah saya lihat di tempat lain), dan bahkan kemampuan untuk men-debug Javascript di IDE (jika Firebug atau alat Pengembang Chrome kurang untuk Anda). Ini memiliki dukungan proyek serta dukungan SVN, Git, Perforce dan CVS. Dan banyak fitur lainnya, sangat dianjurkan ...

— Kris Erickson
sumber

+1, itu terdengar menarik. Saya pikir saya akan mencoba percobaan gratis 45 hari mereka.

Saya telah menggunakan IntelliJ IDEA untuk pengembangan Java dan tidak ada yang menyentuhnya dalam hal fitur yang disediakannya. Jetbrains juga membuat plugin ReSharper untuk Visual Studio. Jika saya mencari IDE berbasis web murni saya mencoba WebStorm pasti. Refactoring sendiri sepadan.

8

Beberapa alat yang tak ternilai

FireBug - plugin pengembang untuk Firefox. Memungkinkan untuk men-debug JS, HTML, Styles.
Toolbar Pengembang IE untuk versi IE yang lebih lama (6,7). Tidak banyak HTML5 di sana. IE baru memiliki alat F12.
Chrome memiliki alat pengembangnya

Alat-alat itu sebagian besar untuk debugging Javascript dan untuk mencari tahu tentang penentuan posisi elemen dan gaya CSS yang diterapkan.

Terima kasih, jika saya lakukan dengan benar kompatibilitas browser selalu menjadi masalah.

Ya, itu menjadi lebih baik dengan browser modern. IE 6-7 dan 8 sebagian sangat buruk dalam hal ini.

Untuk menguji berbagai versi Internet Explorer, baik menggunakan IETester ( my-debugbar.com/wiki/IETester ) atau mesin virtual yang disediakan oleh Microsoft ( go.microsoft.com/fwlink/?LinkId=70868 )

6

Jika Anda mencari rekomendasi IDE, Eclipse cukup bagus. Jika Anda mencari alat Javascript, Firebug sangat bagus untuk debugging.

Namun, Anda benar-benar tidak memerlukan "alat". Saya pikir gagasan bahwa "proyek yang lebih besar tidak dapat / tidak dikembangkan di Notepad", cukup sederhana, salah. Saya menggunakan Notepad ++ untuk menulis semua HTML / CSS / Javascript saya dan saya pikir ini adalah pendekatan yang sangat umum - bahkan untuk desainer web profesional. Notepad ++ memiliki penyorotan sintaks untuk HTML, CSS, dan Javascript, serta penyelesaian otomatis. Jika Anda menginginkan perangkat lunak yang menawarkan lebih dari itu, harap spesifik di mana fitur penting bagi Anda. (BTW, jika Anda pengguna mac, coba BBEdit).

Situs yang lebih besar sering ditulis dengan kerangka kerja seperti Django atau Ruby on Rails, tetapi itu benar-benar tidak ada hubungannya dengan menggunakan atau mempelajari HTML5.

— Jeff
sumber

menarik ... plugin Eclipse apa untuk pengembangan JS yang akan Anda rekomendasikan?

Tidak pernah digunakan, tetapi tautan ini mungkin bermanfaat. Aptana juga tersedia sebagai program mandiri, saya percaya (alternatif untuk Eclipse). Banyak orang merekomendasikannya, tetapi saya belum pernah mencobanya. Mungkin ada sesuatu yang layak untuk dilihat. stackoverflow.com/questions/613988/…

— Jeff

Hanya mengingat bahwa Notepad sangat berbeda dari Notepad ++, saya juga tidak akan mengembangkan situs web ( situs web apa pun ) di Notepad.

Setuju, saya mengambil komentar yang berarti "editor teks" tidak sepenuhnya "MS Notepad", tetapi jika itu yang terjadi, maka Anda sepenuhnya benar

— Jeff

5

Saya percaya Adobe (pembuat Flash) sebenarnya sedang dalam proses merilis alat konversi Flash ke HTML5, yang mungkin bernilai saat Anda melihat ke dalam.

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

Secara efektif, Flash menjadi alat untuk mengembangkan HTML5.

Dan pada minggu ini, Microsoft telah mengumumkan bahwa mereka akan menuju arah yang sama dengan Silverlight, jadi sepertinya semuanya berjalan HTML5 sekarang.

Satu pertanyaan yang saya miliki adalah seberapa bagus kode HTML5 yang dihasilkan oleh dua alat ini? Kami tidak akan tahu jawabannya sampai mereka benar-benar dirilis, tetapi saya tidak pernah menemukan kode yang dihasilkan sangat berkualitas. Semoga kita tidak berakhir dengan MS Front Page yang modern.

— Spudley
sumber

7

Sejujurnya saya tidak percaya pada alat konversi, kodenya akan, secara sederhana, suboptimal. Saya tahu bahwa Flash adalah alat yang hebat jika tidak disalahgunakan dan itu akan tetap bersama kita untuk waktu yang lama. Tapi saya lebih suka menulis JS dan CSS dengan alat yang sesuai :)

1

@aniel - setuju bahwa alat konversi biasanya tidak sebagus itu, dan saya berkata banyak. Tapi itu mungkin menjadi titik awal yang baik untuk Anda jika Anda ingin mengubah flash yang ada. Bahkan jika Anda kemudian pergi dan secara manual ulang kode HTML yang dihasilkan, setidaknya Anda akan memiliki sesuatu untuk dikerjakan.

— Spudley

4

nitpick: Adobe telah membeli Flash (mengambil alih Macromedia), dan belum membuatnya.

— Kornel

4

Saya sangat merekomendasikan pengaturan sistem build untuk kode Javascript Anda, dan memeriksanya terhadap JSLint setiap build. Saya telah menemukan ini mengambil banyak kesalahan sejak awal dan mempromosikan pengkodean yang baik (bermain dengan opsi jika terlalu ketat). Lihatlah sistem build jQuery di GitHub untuk contoh yang baik.

Selain itu untuk mengedit saya penggemar berat Notepad ++ karena saya belum menemukan IDE yang menyediakan fitur berguna tanpa seluruh beban mengasapi dan tipu daya GUI.

Anda bisa melihat Dreamweaver terbaru, editor kode tidak buruk dan mereka memiliki galeri widget dengan sejumlah widget HTML5 yang bisa Anda singgahi.

— Adam Heath
sumber

2

Saya tidak percaya bahwa proyek yang lebih besar dapat / dikembangkan di Notepad

Anda salah di sana. Saya adalah pengguna Notepad lama, dan saya pikir itu cara terbaik untuk pergi. Untuk debugging, saya menggunakan Alat Pengembang IE, FireBug Firefox, dan Inspektur Chrome.

Sejauh HTML5 berjalan, itu pada dasarnya hanya HTML biasa dengan beberapa mainan tambahan. Selain itu, tidak ada yang menghentikan Anda dari mendeklarasikan dokumen HTML5, maka hanya menggunakan hal-hal yang ada dalam versi HTML yang lebih lama.

Satu hal yang saya sarankan untuk dihindari adalah program seperti Dreamweaver. Mereka membuat segalanya terlihat mudah dengan alat desain grafis, tetapi ketika Anda ingin melakukan hal-hal Anda sendiri itu menjadi sangat sulit. (Saya melihat siswa lain di kursus yang saya lakukan ketika saya mengatakan ini)

— Santosh Kumar
sumber

Tentukan besar. Notepad bahkan tidak memiliki penyorotan sintaks, dan pemeliharaan dapat menjadi masalah dengan Notepad ... Saya setidaknya akan pergi untuk Notepad ++ ... bahkan VIM! :)

Saya menggunakan Notepad ++ sekarang , tetapi untuk waktu yang lama saya hanya menggunakan Notepad biasa. Dan dengan "besar" maksud saya "cukup besar untuk menghasilkan cukup uang untuk membayar biaya hidup saya dan memiliki beberapa cadangan".