Optymalizacja kodu html przy pomocy HTML Tidy

Optymalizacja kodu html przy pomocy HTML Tidy - Wersja do druku

+- Forum Informatyczne WebElite.pl (https://www.webelite.pl)
+-- Dział: # Technika komputerowa (https://www.webelite.pl/forumdisplay.php?fid=10)
+--- Dział: Poradniki / Tutoriale (https://www.webelite.pl/forumdisplay.php?fid=40)
+--- Wątek: Optymalizacja kodu html przy pomocy HTML Tidy (/showthread.php?tid=2302)

Optymalizacja kodu html przy pomocy HTML Tidy - loobieto - 17-08-2009

Czyszczenie kodu html programem HTML Tidy
czyli jak skutecznie zmniejszyć objętość stron internetowych, poprawiając przy tym automatycznie błędy składni i struktury

Odwiedzający Twoją stronę marudzą, że nie mogą jej czytać, bo rozjeżdża się w ich przeglądarkach? Może jesteś średnio–zaawansowanym koderem HTML i prowadzisz bałaganiarski styl pisania witryn? Często zdarza Ci się zgubić w gąszczu niezbyt dobrze umieszczonych tagów? Być może szlag Cię trafia gdy walidator znów niejasno informuje cię o znalezionych błędach… Chcąc uczynić źródło bardziej czytelnym i łatwym do edycji skorzystaj z open-source'owej aplikacji HTML Tidy.

Ale o sso chodzi?
Domyślnie program sprawdza czy dokument napisany w języku HTML i XHTML jest zgodny z zaleceniami organizacji W3C. Po co nam one? Otóż zapewniają nas, że strony tworzone zgodnie ze specyfikacją zostaną poprawnie wyświetlone przez wszystkie przeglądarki dbające o standardy. Odnajdując i krótko opisując problem, program pomaga nam dbać o ich poprawność. Więcej informacji na kursie browsehappy.

Poprawność składni
• np. odpowiednie otwieranie i zamykanie tagów, atrybutów, oraz kodowanie znaków
• niezbędne do wyświetlenia dokumentu

Poprawność struktury
• odpowiednia budowa dokumentu — np. umieszczanie elementów liniowych w blokowych, nie odwrotnie
• uniemożliwia błędne zachowanie przeglądarek

Nie można by tak szybciej?
Ustawiając odpowiednie parametry, Tidy sam poprawi pliki .html dając na wyjściu poprawny, odchudzony dokument. Staraj się używać go zawsze gdy pracujesz z programami WYSIWYG które generują nadmiarowy kod.

Dobra, dawaj go…
1. Archiwum .zip wypakuj najpierw do osobnego folderu. Znajdziesz tam dwa pliki.

2. Zainstaluj program: tidy-install.exe.

3. Umieść skrypt skrypt-tidy.bat w tym samym katalogu co pliki .htm i .html.

[Obrazek: plikihtmlrazemzeskrypte.th.png]

4. Uruchom skrypt. HTML Tidy wysprząta strony ze zbędnych tagów; osadzając style CSS zamiast przestarzałych tagów <font>, konwertując backslashe (\) na slashe (/) itp.

5. W przykładzie strony zrobione w Wordzie wyraźnie zmniejszyły się. W innym przypadku zmienią się nieznacznie.

Jak działa to twoje maleństwo!?
Utworzony instalator to nic innego jak zbiór plików dostępnych powszechnie w internecie. Składa się na niego:
• plik wykonywalny .exe razem z dynamiczną biblioteką .dll
• plik konfiguracyjny .txt, utworzyłem go samodzielnie

Uruchamiając skrypt wykonuje się polecenie wsadowe „każące” przerabiać wszystkie pliki w języku HTML, konsolowym programem tidy.exe który jest już zainstalowany. Powiesz że można go w takim razie uruchomić ręcznie — tak, poleceniem:

Kod:
tidy -config [ścieżka-konfiguracji.txt] [plik.html]

Cały sekret nie polega na dopisywaniu parametrów do komendy, lecz utworzeniu odpowiedniego pliku z konfiguracją takich parametrów, które chcemy uzyskać. W pakiecie ustawienia są następujące:

Kod:
anchor-as-name: no

bare: no

clean: yes

doctype: transitional

drop-empty-paras: yes

drop-proprietary-attributes: yes

enclose-text: yes

fix-backslash: yes

fix-bad-comments: no

fix-uri: yes

hide-comments: yes

join-styles: yes

join-classes: yes

lower-literals: yes

merge-divs: auto

merge-spans: auto

ncr: yes

output-html: yes

preserve-entities: yes

quote-ampersand: yes

quote-nbsp: yes

repeated-attributes: keep-last

word-2000: yes

indent: no

indent-spaces: 0

markup: yes

sort-attributes: alpha

wrap: 0

char-encoding: raw

force-output: yes

tidy-mark: no

write-back: yes

Co to ma wszystko znaczyć?
Postaram się wytłumaczyć większość z nich.

Cytat:anchor-as-name: no

Usuwa istniejący, niepotrzebny atrybut name="…" gdy element posiada atrybut id="…"; gdy go nie posiada, atrybut jest konwertowany: name="…" → id="…".

Cytat:bare: no

Nie usuwa HTML'owych „dodatków” MS Worda w stylu <u7:p> czy <o:p> — mogłoby to całkowicie „rozjechać” stronę.

Cytat:clean: yes

„Rozbiera” zdeprecjonowane elementy i atrubuty, w zamian umieszczając styl CSS w nagłówku.

Cytat:doctype: transitional

Stosuje przejściową deklarację dokumentu, możesz użyć: strict.

Cytat:drop-empty-paras: yes

Usuwa puste akapity.

Cytat:drop-proprietary-attributes: yes

Usuwa znaczniki których zawartości nie widać w przeglądarce, a zawierające informacje o właścicielu pliku (Word).

Cytat:fix-backslash: yes

Poprawia backslashe na slashe.

Cytat:hide-comments: yes

Usuwa wszystkie komentarze .

Cytat:join-styles: yes

Łączy wartości atrybutów style="…" jeśli wykryto takie same.

Cytat:lower-literals: yes

Zamienia <ZNACZNIK ATRYBUT="…"> na <znacznik atrybut="…">.

Cytat:output-html: yes

Zapisuje na wyjściu dokument HTML. Można użyć output-xhtml, żeby został wygenerowany kod zgodny z XML.

Cytat:quote-ampersand: yes

Zamienia „&” na „&”.

Cytat:repeated-attributes: keep-last

Zachowuje ostatni atrybut znacznika, jeśli wykryto takie same.

Cytat:word-2000: yes

Radzi sobie ze stronami z Worda zapisanymi jako „strona html”. Zapisuj witryny jako „strona html, przefiltrowana”, lub użyj przyzwoitego edytora HTML.

Cytat:indent-spaces: 0

Gdy indent: yes, ustawia ilość spacji jako wcięcia.

Cytat:wrap: 0

HTML Tidy nie będzie dzielił linii (gdy za długa) np. na 68 znaku.

Cytat:char-encoding: raw

Pozostawia kodowanie znaków nietknięte.

Cytat:force-output: yes

Wyświetla wynik na wyjściu nawet, gdy są błędy których nie może poprawić.

Cytat:tidy-mark: no

Program nie dopisuje się w <meta>.

Cytat:Program nie dopisuje się w <meta>.

Nadpisuje pierwotne pliki. Pamiętaj o kopii!

Co z Linuksem?
Program ten dostępny jest również na Linuksie — gotowe paczki znajdziesz w większości depozytorii. Przystosuj tylko plik z ustawieniami.

Wszystko wiem, idę pisać moją stronę…
Internet jest dla ludzi — pisz sensownie o swoich zainteresowaniach, pasji życiowej. Nie musisz znać języka html by tworzyć strony. Używaj Worda, czegokolwiek, pamiętając o tym, by odwiedzający mieli możliwość przeglądania twojej witryny bez nerwów.

Dbaj o wagę plików — im cięższe, tym dłużej czeka się na wczytanie. Zainstaluj Firefoksa, a z nim dodatki: Firebug i Page Speed. Ostatnim add-on'em sprawdzaj objętość gotowych stron. Kompresuj grafikę. Gdy tylko możesz stosuj nie pseudo– ale standardy internetowe; nie polegaj na IE.

Licencja CC.