Jak zacząć korzystać z HTML5? [Zamknięte]

Jaki jest zalecany przepływ pracy do nauki HTML5? Jakie narzędzia powinienem zainstalować? Jaki zestaw SDK? Gdzie zacząć? Jak testować? Jak debugować? Co ja czytam

Rozumiem, że to, co często określa się mianem „rozwoju HTML5”, jest w rzeczywistości mieszanką HTML, CSS, JS i innych, jednak nie wierzę, że większe projekty są tworzone w Notatniku. Dlatego proszę, abyś ujawnił swoje wskazówki i porady dotyczące przepływu pracy.

Gdybym teraz miał rozpocząć nowy projekt HTML5, prawdopodobnie zrobiłbym coś takiego:

Pobierz i użyj HTML5 Boilerplate . To da ci świeżą stronę z zainicjalizowanymi najważniejszymi sprawami i gotowymi do testowania. Zawiera także kilka ciekawych funkcji debugowania, których powinieneś używać wraz z firebug

Spójrz na Zanurz się w HTML5, aby zobaczyć historię i użycie kodu.

Na komputerze Mac używam Cody, aw pracy używam Dreamweaver w widoku Kod. Nie zbudują strony za Ciebie, ale uzupełnianie kodu, podpowiedzi i kodowanie kolorami działają dobrze. Jestem pewien, że Aptana i tym podobne oferują wspaniałe funkcje, ale zawsze uważałem, że prostsze jest lepsze, jeśli chodzi o HTML.

Zdecydowanie podnieś książki HTML5 i CSS3 z „A Book Apart” (CSS3 wyjdzie później w tym miesiącu)

I wreszcie - aby spróbować dowiedzieć się wszystkiego, sprawdź:

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

Ściągawka na płótnie - http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html

Jak rysować za pomocą HTML5 Canvas http://thinkvitamin.com/code/how-to-draw-with-html-5-canvas/

HTML5 nie jest pojedynczą zintegrowaną rzeczą. Jest to zbiór rozszerzeń HTML, z których niektóre są szeroko zaimplementowane i można z nich bezpiecznie korzystać, z których jeszcze nikt nie implementuje, a wszystko to pomiędzy nimi. Jeśli spróbujesz traktować HTML5 jako spójną pojedynczą platformę programistyczną i „naucz się wszystkiego”, będziesz miał naprawdę trudny czas.

Zamiast tego musisz nauczyć się całej sieci: podstawowego HTML, CSS, JavaScript, Core DOM, HTML DOM, podstawowego modelu obiektowego przeglądarki. Następnie możesz dodać funkcje Nowej Sieci w dowolnym miejscu i tam, gdzie są potrzebne, a obsługa przeglądarki pozwala: rozszerzenia HTML5, właściwości CSS3, rysunek na płótnie, websockets, inne rozszerzenia DOM i BOM wydzielone z pracy HTML5 ...

Zestaw funkcji sieci stale się rozwija i nie ma jednego punktu odniesienia. W3Schools (co zresztą nie ma nic wspólnego z W3C) próbuje, ale jest pełen błędów. Nie ufaj temu, co mówi jako ewangelia.

Może być konieczne odwołanie się do ostatecznego HTML4 , CSS2 . Upewnij się, że specyfikacje DOM Core i DOM HTML . Będziesz także prawdopodobnie chcesz spojrzeć na odniesienie DOM MDC za i odniesienie DOM MSDN jest za to, co wsparcie Firefox i IE. Specyfikacja HTML5 zawiera również wiele bardziej aktualnych elementów DOM, a także nowe rozszerzenia HTML, ale jest to długi i nieporęczny dokument, dość trudny w użyciu, nawet jak na standardy dokumentów standardowych. Chociaż nie prawie tak zły, jak nieprzenikniona specyfikacja ECMAScript . (Na szczęście prawdopodobnie znasz już wiele z nich, jeśli jesteś przyzwyczajony do pracy z ActionScript).

Nie potrzebujesz SDK ani IDE do opracowania HTML / CSS / JS. Możesz użyć IDE, jeśli chcesz, ale jestem szczęśliwy, że robię wszystko w moim ulubionym edytorze tekstów. Nie musisz się martwić o kompilację / kompilację, po prostu zapisz plik i wciśnij ponownie załaduj, zadanie wykonane. Większość współczesnych przeglądarek internetowych ma wbudowany debugger i inne narzędzia programistyczne (np. IE8) lub łatwo dostępne jako rozszerzenia (np. Firebug ).

Bardzo polecam WebStorm , od JetBrains (lub dowolnego z ich produktów opartych na IntelliJ , takich jak PHPStorm, RubyMine, PyCharm, ponieważ wszystkie obsługują HTML). Dostajesz CSS, automatyczne uzupełnianie HTML i sprawdzanie poprawności na bieżąco (podczas pisania). Obsługa refaktoryzacji Javascript (coś, czego nigdzie indziej nie widziałam), a nawet możliwość debugowania Javascript w IDE (jeśli brakuje Ci Firebug lub narzędzi dla programistów Chrome). Ma wsparcie projektu, a także wsparcie SVN, Git, Perforce i CVS. I mnóstwo innych funkcji, wysoce zalecane ...

Kilka bezcennych narzędzi

• FireBug - wtyczka dla programistów Firefox. Pozwala debugować JS, HTML, style.
• Pasek narzędzi programisty IE dla starszych wersji IE (6,7). Jednak niewiele tam HTML5. Nowa IE ma narzędzie F12.
• Chrome ma narzędzia programistyczne

Narzędzia te służą głównie do debugowania Javascript i do ustalenia, co do pozycjonowania elementów i zastosowanych stylów CSS.

Jeśli szukasz rekomendacji IDE, Eclipse jest całkiem niezły. Jeśli szukasz narzędzi Javascript, Firebug doskonale nadaje się do debugowania.

Jednak tak naprawdę nie potrzebujesz żadnych „narzędzi”. Myślę, że koncepcja „większych projektów nie można / nie opracowuje się w Notatniku” jest po prostu nieprawdziwa. Używam Notepad ++ do pisania wszystkich moich HTML / CSS / Javascript i myślę, że jest to bardzo powszechne podejście - nawet dla profesjonalnych projektantów stron internetowych. Notepad ++ ma podświetlanie składni dla HTML, CSS i JavaScript, a także automatyczne uzupełnianie. Jeśli chcesz mieć oprogramowanie, które oferuje więcej, określ, które funkcje są dla Ciebie ważne. (BTW, jeśli jesteś użytkownikiem Mac, spróbuj BBEdit).

Większe strony są często pisane przy użyciu frameworków takich jak Django lub Ruby on Rails, ale tak naprawdę nie ma to nic wspólnego z używaniem lub nauką HTML5.

Wierzę, że Adobe (twórcy Flasha) właśnie wypuszcza narzędzie do konwersji Flasha na HTML5, co może być warte twojego zainteresowania.

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

W efekcie Flash staje się narzędziem do programowania HTML5.

W tym tygodniu Microsoft ogłosił, że podąża w podobnym kierunku z Silverlight, więc wygląda na to, że teraz wszystko idzie w HTML5.

Mam tylko jedno pytanie: jak dobry będzie kod HTML5 generowany przez te dwa narzędzia? Nie poznamy odpowiedzi na to pytanie, dopóki nie zostaną wydane, ale nigdy nie znalazłem generowanego kodu o szczególnie dobrej jakości. Mamy nadzieję, że nie skończymy z nowoczesnym odpowiednikiem MS Front Page.

Gorąco polecam skonfigurowanie systemu kompilacji kodu JavaScript i sprawdzanie jego zgodności z JSLint przy każdej kompilacji. Odkryłem, że wcześnie wykrywa wiele błędów i promuje dobre kodowanie (graj z opcjami, jeśli jest zbyt surowe). Dobrym przykładem jest system kompilacji jQuery na GitHub .

Poza edycją jestem wielkim fanem Notepad ++, ponieważ nie znalazłem jeszcze IDE, które zapewnia użyteczne funkcje bez mnóstwa bałaganu i oszustw GUI.

Można spojrzeć na najnowszą Dreamweaver jednak, edytor kodu nie jest złe i mają galeria widget z kilkoma HTML5 widżetów można po prostu wpaść.

Nie wierzę, że większe projekty mogą być / są rozwijane w Notatniku

Mylisz się tam Jestem wieloletnim użytkownikiem Notatnika i myślę, że to najlepsza droga. Do debugowania używam Narzędzi programistycznych IE, FireBug Firefoksa i Inspektora Chrome.

Jeśli chodzi o HTML5, jest to po prostu zwykły HTML z kilkoma dodatkowymi zabawkami. Poza tym nic nie stoi na przeszkodzie, aby zadeklarować dokument HTML5, a jedynie używać rzeczy, które są w starszych wersjach HTML.

Jedną rzeczą, którą poleciłbym unikać za wszelką cenę, są programy takie jak Dreamweaver. Sprawiają, że wszystko wygląda na łatwe dzięki graficznym narzędziom do projektowania, ale kiedy chcesz robić własne rzeczy, staje się to bardzo trudne. (Patrzę na innych uczniów na kursie, kiedy to mówię)