HTML5 ile nasıl başlayabilirim? [kapalı]

HTML5'i öğrenmek için önerilen iş akışı nedir? Hangi araçları kurmalıyım? Hangi SDK? Nereden başlamalı? Nasıl test edilir? Hata ayıklama nasıl yapılır? Ne okurum

Genellikle "HTML5 geliştirme" olarak etiketlenen şeyin aslında bir HTML, CSS, JS ve daha fazlasının bir karışımı olduğunu anlıyorum, ancak daha büyük projelerin Not Defteri'nde geliştirildiğine inanmıyorum. Bu yüzden sizden iş akışınızla ilgili ipuçlarını ve püf noktalarını açıklamanızı istiyorum.

Şu anda sıfırdan yeni bir HTML5 projesi başlatmak istersem, muhtemelen şöyle bir şey yapardım:

HTML5 Boilerplate'i indirin ve kullanın . Bu size başlangıçta ve teste hazır hale gelen önemli şeylerin çoğunu içeren yeni bir sayfa sunar. Ayrıca firebug ile birlikte kullanmanız gereken bazı güzel hata ayıklama özellikleri içerir

Üzerinde Bak HTML5'e içinde Dive kodunun tarihini ve kullanımını görmek için.

Mac'imde Coda kullanıyorum ve iş yerimde Dreamweaver'ı Kod görünümünde kullanıyorum. Sayfayı sizin için oluşturmayacaklar, ancak kod tamamlama, ipucu ve renk kodlaması iyi çalışıyor. Aptana ve benzerlerinin harika özellikler sunduğundan eminim, ancak html konusunda her zaman daha iyi olacağım.

Açıkçası HTML5 ve CSS3 kitaplarını "A Book Apart" dan aldı (CSS3 bu ay sonra çıkıyor)

Ve nihayet - tüm bunları kontrol etmeye çalışmak için

Opera Geliştirici Ağı - http://dev.opera.com/articles/view/html-5-canvas-the-basics/

Tuval Hile Sayfası - http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html

HTML5 Canvas ile nasıl çizilir http://thinkvitamin.com/code/how-to-draw-with-html-5-canvas/

HTML5 tek bir entegre şey değildir. Bir kısmı geniş çapta uygulanmış ve güvenli bir şekilde kullanılabilen, bazıları henüz hiç kimsenin uygulayamadığı ve bunların arasında bir sürü şey barındıran HTML uzantıları koleksiyonudur. HTML5'i tutarlı bir tek geliştirme platformu olarak görmeye ve 'hepsini öğrenmeye' çalışırsanız, gerçekten zor bir zaman geçirirsiniz.

Öğrenmeniz gerekenler webin bütünüdür: temel HTML, CSS, JavaScript, Çekirdek DOM, HTML DOM, temel Tarayıcı Nesne Modeli. Daha sonra, Yeni Web'in özelliklerini istediğiniz yere ve istediğiniz yere ekleyebilir ve tarayıcı desteği şunları sağlar: HTML5 uzantıları, CSS3 özellikleri, tuval çizimi, websockets, HTML5 çalışmalarından çıkarılan diğer DOM ve BOM uzantıları ...

Ağın özellik seti sürekli olarak gelişmektedir ve tek bir referans noktası yoktur. W3Schools (bu arada W3C ile ilgisi yoktur) dener, ancak hatalarla doludur. Müjde olarak söylediklerine güvenme.

Tanımlayıcı HTML4 , CSS2'ye başvurmanız gerekebilir . DOM Çekirdeği ve DOM HTML özelliklerinden emin olmak için. Ayrıca, Firefox ve IE’nin desteklediği şeyler için MDC’nin DOM referansına ve MSDN’nin DOM referansına da bakmak isteyeceksiniz . HTML5 Spec çok daha yukarı güncel DOM bir sürü şey, hem de yeni HTML uzantılarını içerir, ancak standartları belgelerin standartlarına göre bile kullanmak oldukça zor, uzun ve hantal bir belgedir. Neredeyse aşılmaz ECMAScript spec kadar kötü olmasa da . (Neyse ki, ActionScript ile çalışmaya alışkınsanız, zaten bunlara zaten aşina olacaksınız.)

HTML / CSS / JS geliştirmek için bir SDK veya IDE'ye ihtiyacınız yok. İsterseniz bir IDE kullanabilirsiniz, ancak en sevdiğim metin editörümdeki her şeyi yaptığım için çok mutluyum. Endişelenecek hiçbir derleme / derleme adımı yoktur, sadece dosyanızı kaydedin ve yeniden yükleyin, işi tamamlayın. Çoğu modern web tarayıcısı, yerleşik (örneğin IE8) veya uzantıları (örneğin Firebug ) olarak kolayca kullanılabilen bir hata ayıklayıcı ve diğer geliştirme araçlarına sahiptir .

JetBrains'ten (veya PHPStorm, RubyMine, PyCharm gibi IntelliJ tabanlı ürünlerinden herhangi birinin HTML'yi desteklediğinden) WebStorm'u kesinlikle öneririm . CSS, HTML otomatik tamamlama ve canlı (yazarken) doğruluğunu kontrol edin. Javascript (başka bir yerde görmediğim bir şey) ve hatta IDE'de Javascript hata ayıklama yeteneği (Firebug veya Chrome Geliştirici araçları sizin için eksikse) için yeniden düzenleme desteği. Proje desteğinin yanı sıra SVN, Git, Performans ve CVS desteğine de sahiptir. Ve bir sürü başka özellik, şiddetle tavsiye edilir ...

Çok değerli araçlar

• FireBug - Firefox için geliştirici eklentisi. JS, HTML, Styles hata ayıklamasını sağlar.
• IE'nin eski sürümleri için IE Geliştirici araç çubuğu (6,7). Orada çok fazla HTML5 yok. Yeni IE'nin F12 aracı var.
• Chrome'un geliştirici araçları var

Bu araçlar çoğunlukla Javascript hata ayıklaması içindir ve elemanların konumlandırılması ve uygulanan CSS stilleri ile ilgili olanları çözmek içindir.

Bir IDE önerisi arıyorsanız, Eclipse oldukça iyidir. Javascript araçları arıyorsanız, Firebug hata ayıklamak için mükemmeldir.

Ancak, gerçekten herhangi bir "araca" ihtiyacınız yok. "Büyük projelerin Not Defteri'nde geliştirilemediği / geliştirilemediği" fikrinin oldukça basit olduğu kanısındayım. Tüm HTML / CSS / Javascript'imi yazmak için Notepad ++ kullanıyorum ve bunun profesyonel web tasarımcıları için bile çok yaygın bir yaklaşım olduğunu düşünüyorum. Notepad ++, HTML, CSS ve Javascript ile aynı zamanda otomatik tamamlamayı vurgulayan bir sözdizimine sahiptir. Bundan daha fazlasını sunan bir yazılım istiyorsanız, lütfen sizin için hangi özelliklerin önemli olduğunu belirtin. (BTW, eğer bir mac kullanıcısıysanız, BBEdit'i deneyin).

Büyük siteler genellikle Django veya Ruby on Rails gibi çerçevelerle yazılır, ancak HTML5'i kullanmak veya öğrenmekle hiçbir ilgisi yoktur.

Adobe'nin (Flash'ın oluşturucuları) aslında bir Flash to HTML5 dönüştürme aracı yayınlama sürecinde olduğuna inanıyorum.

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

Etkili bir şekilde Flash, HTML5'i geliştirmek için bir araç haline gelir.

Ve bu haftadan itibaren Microsoft, Silverlight ile benzer bir yöne gittiklerini duyurdu, bu yüzden şimdi her şey HTML5 olacak gibi görünüyor.

Tek sorum, bu iki araç tarafından oluşturulan HTML5 kodunun ne kadar iyi olacağı? Aslında onlar serbest bırakılıncaya kadar cevabını bilemeyeceğiz, ancak üretilen kodun özellikle iyi kalitede olduğunu bulamadım. Umarım, MS Front Page'ın modern eşdeğeri ile sonuçlanmayacağız.

Javascript kodunuz için bir yapı sistemi kurmanızı ve her yapı için JSLint'i kontrol etmesini şiddetle tavsiye ederim . Bu durumun başında çok fazla hata topladığını ve kodlamanın iyi olacağını (çok katıysa seçeneklerle oynayarak) buldum. İyi bir örnek için jQuery'nin GitHub'taki inşa sistemine bakın .

Bunun dışında Not Defteri ++ 'nin büyük bir hayranıyım çünkü henüz tam bir şişkinlik ve GUI kandırması olmadan faydalı özellikler sağlayan bir IDE bulamadım.

Kod editörü fena değil ve onlar HTML5 bir dizi bir widget galeri olsa Sen son Dreamweaver bakabilir widget'lardan sadece damla olabilir.

Not Defteri'nde daha büyük projelerin geliştirilebileceğine / geliştirilebileceğine inanmıyorum.

Orada yanılıyorsun. Uzun zamandır Notepad kullanıcısıyım ve bence gidilecek en iyi yol bu. Hata ayıklamak için IE'nin Geliştirici Araçları, Firefox'un FireBug ve Chrome'un Müfettişi'ni kullanıyorum.

HTML5'in ilerleyebildiği kadarıyla, temel olarak sadece birkaç ekstra oyuncak içeren düzenli HTML. Ayrıca, sizi bir HTML5 belgesi ilan etmekten alıkoyacak hiçbir şey yoktur, sadece HTML'nin eski sürümlerinde olanları kullanır.

Ne pahasına olursa olsun kaçınmayı önereceğim bir şey Dreamweaver gibi programlar. Grafik tasarım araçlarıyla işlerin kolay görünmesini sağlarlar, ancak kendi işlerinizi yapmak istediğinizde çok zorlaşır. (Bunu söylediğimde yaptığım kurstaki diğer öğrencilere bakıyorum)