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.
4. Uruchom skrypt. HTML Tidy wysprząta strony ze zbędnych tagów; osadzając style CSS zamiast przestarzałych tagów , 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:
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:
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.
[quote]anchor-as-name: no[/quote]
Usuwa istniejący, niepotrzebny atrybut name="…" gdy element posiada atrybut id="…"; gdy go nie posiada, atrybut jest konwertowany: name="…" → id="…".
[quote]bare: no[/quote]
Nie usuwa HTML'owych „dodatków” MS Worda w stylu
[quote]clean: yes[/quote]
„Rozbiera” zdeprecjonowane elementy i atrubuty, w zamian umieszczając styl CSS w nagłówku.
[quote]doctype: transitional[/quote]
Stosuje przejściową deklarację dokumentu, możesz użyć: strict.
[quote]drop-empty-paras: yes[/quote]
Usuwa puste akapity.
[quote]drop-proprietary-attributes: yes[/quote]
Usuwa znaczniki których zawartości nie widać w przeglądarce, a zawierające informacje o właścicielu pliku (Word).
[quote]fix-backslash: yes[/quote]
Poprawia backslashe na slashe.
[quote]hide-comments: yes[/quote]
Usuwa wszystkie komentarze .
[quote]join-styles: yes[/quote]
Łączy wartości atrybutów style="…" jeśli wykryto takie same.
[quote]lower-literals: yes[/quote]
Zamienia
[quote]output-html: yes[/quote]
Zapisuje na wyjściu dokument HTML. Można użyć output-xhtml, żeby został wygenerowany kod zgodny z XML.
[quote]quote-ampersand: yes[/quote]
Zamienia „&” na „&”.
[quote]repeated-attributes: keep-last[/quote]
Zachowuje ostatni atrybut znacznika, jeśli wykryto takie same.
[quote]word-2000: yes[/quote]
Radzi sobie ze stronami z Worda zapisanymi jako „strona html”. Zapisuj witryny jako „strona html, przefiltrowana”, lub użyj przyzwoitego edytora HTML.
[quote]indent-spaces: 0[/quote]
Gdy indent: yes, ustawia ilość spacji jako wcięcia.
[quote]wrap: 0[/quote]
HTML Tidy nie będzie dzielił linii (gdy za długa) np. na 68 znaku.
[quote]char-encoding: raw[/quote]
Pozostawia kodowanie znaków nietknięte.
[quote]force-output: yes[/quote]
Wyświetla wynik na wyjściu nawet, gdy są błędy których nie może poprawić.
[quote]tidy-mark: no[/quote]
Program nie dopisuje się w .
[quote]Program nie dopisuje się w .[/quote]
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.
