JAK WYBRAĆ EDYTOR HTML?
Przegląd programów do projektowania stron WWW.
Czym jest i do czego służy edytor HTML
Podstawowa strona internetowa zbudowana jest z elementów graficznych, kodu w języku HTML oraz arkuszy stylów CSS.
Strona internetowa to właściwie zwykły dokument tekstowy, więc od strony technicznej wystarczy nawet najprostszy edytor tekstu typu Notatnik. Jednak specjalistyczne programy naprawdę ułatwiają pracę, a do tego często są darmowe, więc zdecydowanie warto po nie sięgać.
Jakie ułatwienia oferują specjalistyczne edytory?
Kolorowanie kodu, podpowiedzi do znaczników HTML, automatyczne zamykanie cudzysłowów i tagów, zaawansowana praca z tekstem, tzw. snippety i makra. Choć możliwości zależą również od konkretnego edytora, a jeszcze kilku ciekawym opcjom przyjrzymy się podczas omawiania wybranych programów.
Rodzaje edytorów HTML
Edytory HTML pojawiły się w pierwszej połowie lat 90. Przez ten czas rynek programów do pracy z kodem bardzo się zmienił i dzisiaj niewiele już pozostało narzędzi przeznaczonych tylko i wyłącznie do pracy z językami HTML i CSS. Wyparły je edytory dla programistów. Podobny los spotkał edytory wizualne, czyli WYSIWYG.
Wynika to z faktu, że projektowanie stron z punktu widzenia kodu stało się procesem o wiele bardziej złożonym niż kiedyś.
Konieczność tworzenia dla różnych urządzeń i różnych rozdzielczości sprawiła, że klasyczne edytory WYSIWYG stały się przestarzałe i wiele z nich nie jest już rozwijanych np. Amaya czy NVU. Ich miejsce zajmują rozwiązania oparte na chmurze, dostępne online, czy też oparte na frameworku Bootstrap, ale w tym artykule skupimy się na tradycyjnych edytorach HTML, które można zainstalować na swoim komputerze. Będą to narzędzia przeznaczone dla systemu Windows.
A te, w cudzysłowie, tradycyjne narzędzia, można podzielić na kilka grup:
— Edytory HTML.
— Edytory WYSIWYG.
— Edytory dla programistów.
— Edytory IDE.
Po jakie proramy powinien sięgnąć początkujący webmaster?
To w dużej mierze sprawa indywidualna. Dlatego warto zacząć od programów bezpłatnych i przekonać się, czego naprawdę potrzebujesz.
Nie ma edytora idealnego i prawie zawsze konieczny będzie kompromis, dlatego warto ustalić, jakie cechy programu są dla nas najważniejsze.
Spośród wielu dostępnych na rynku edytorów wybrałem sześć, a skupiłem się na nastepujących cechach:
— Ogólne możliwości edytora.
— Czy edytor jest bezpłatny?
— Czy interfejs jest w języku polskim?
— Jaką pomoc oferuje początkującym (kolorowanie kodu, podpowiedzi do znaczników)?
— Czy oferuje możliwość sprawdzania (walidacji) poprawności kodu HTML?
Tak jak już wspomniałem, nie ma edytora, który spełnia wszystkie te wymagania.
WebMatrix oferuje znakomite podpowiedzi do znaczników i sprawdzanie poprawności kodu. RJ TextEd jest świetnie spolonizowany i ma ogromne możliwości.
Choć warto też zwrócić uwagę na coś, czego nie da się opisać, to subiektywne odczucia podczas pracy. Jeśli program po prostu nam nie pasuje, to pozostałe jego cechy nie mają już znaczenia.
Zapraszam na krótki przegląd kilku wartościowych, bezpłatnych edytorów, a poniżej znajdują się odnośniki do jeszcze kilku innych propozycji, które także warto przetestować w poszukiwaniu edytora dla siebie. Niestety, mimo sporej liczby dostępnych na rynku programów, w praktyce tylko kilka wydaje się być sensowym wyborem.
Mieliśmy się nie zajmować edytorami, które nie są już rozwijane, a niestety taki los spotkał WebMatrixa, który został zastąpiony edytorem Visual Studio Code. Webmatrix to jednak wciąż godna uwagi propozycja, zwłaszcza, że należy do wymierającej kategorii programów skupionych na pracy z językiem HTML i stylami kaskadowymi.
Poniżej odnośniki do pobrania omawianych edytorów (poza WebMatrixem, który nie jest już wspierany przez Microsoft, ale sam program wciąż można znaleźć w sieci):
Pobierz darmowy edytor Visual Studio Code
Pobierz darmowy edytor RJ TextEd
Pobierz darmowy edytor PSPad
Pobierz darmowy edytor Bluefish
Pobierz darmowy edytor Notepad++
Pobierz plugin Color picker (tylko dla wersji 32-bit)
Edytorów HTML jest naprawdę wiele, ale sporo z nich nie jest już rozwijanych. Dotyczy to choćby legendarnego Pajączka; ostatnia aktualizacja miała miejsce w 2013 roku, czy też programu CoreEditor bardzo udanego, polskiego edytora. Podobnie rzecz wygląda w przypadku cieszącego się kiedyś dużym uznaniem programu NoteTab.
Wyraźnie jednak widać, że edytory skupione typowo na projektowaniu stron, są wypierane przez edytory dla programistów.
Brackets
Nowoczesny edytor HTML. Nastawiony przede wszystkim na obsługę z pomocą skrótów klawiaturowych.
Potencjał programu jest nieco ukryty, ale warto poświęcić mu więcej uwagi. Jego możliwości można ponadto zwiększyć, dzięki dostępnym dodatkom.
Edytor jest darmowy, w języku polskim i zdecydowanie warto go wypróbować i nie zniechęcać się przy pierwszym kontakcie. Świetne narzędzie.
CoffeeCup
CoffeeCup to już klasyka na rynku oprogramowania, firma działa od 1996 roku.
CoffeeCup to jeden z nielicznych edytorów skupionych na projektowaniu stron internetowych. Klasyczny, ale nowoczesny interfejs i dużo usprawnień dla początkujących.
Edytor występuje w dwóch wersjach: płatnej $29 i okrojonej, ale darmowej.
Interfejs w języku angielskim.
Warto także przejrzeć inne narzędzia dostępne na stronie CoffeeCup. Są co prawda płatne i dostępne w języku angielskim, ale zdecydowanie godne uwagi.
HTML-Kit Tools
Zobacz interface programu.
Ciekawy edytor HTML wyróżniający się oryginalnym interfejsem, choć trudno go nazwać nowoczesnym. Sporo naprawdę interesujących rozwiązań, także podczas pracy z samym kodem.
Edytor godny odnotowania, ponieważ jest to narzędzie mocno skupione na projektowaniu stron internetowych. Warto obserwować, jak HTML-Kit będzie się rozwijał.
Interfejs w języku angielskim, program kosztuje $59.
Blumentals
Na koniec tego zestawienia nie program, a strona internetowa. Blumentals to autorzy takich narzędzi jak HTMLPad, czy WeBuilder. Są to płatne propozycje, ale warto przyjrzeć się bliżej dostępnym na tej stronie programom.
Edytory dla programistów
Wybór narzędzi przeznaczonych typowo do pracy z kodem HTML jest coraz mniejszy.
Jeśli chcesz projektować strony internetowe, to być może nie pozostanie Ci nic innego, jak dostosować się do sytuacji.
Takie edytory są najczęściej pozbawione opcji związanych typowo z projektowaniem stron internetowych. Edytory HTML oferują np. wygodne przeglądarki kolorów, generatory tabel, czy znaczników meta, wbudowaną przeglądarkę i mnóstwo innych. Edytory dla programistów nie traktują języka HTML w wyjątkowy sposób, ale tak jak jeden z wielu, które obsługują. Niekiedy można sobie radzić z pomocą dodatków, ale to zupełnie inne podejście do pracy.
Nie znaczy to jednak, że nie warto korzystać z edytorów dla programistów, to świetne, nowoczesne narzędzia, ale użytkownik musi wiedzieć, co robi.
Poniżej propozycje kilku edytorów, które całkiem nieźle wspierają także projektowanie stron WWW.
Sublime Text
Przegląd zaczniemy od jednego z najważniejszych edytorów dla programistów.
To narzędzie świetnie reprezentuje trend w oprogramowaniu tego typu: minimalistyczny wygląd, praktycznie zero ikon, a obsługa odbywa się z wykorzystaniem skrótów klawiaturowych. Opanowanie go może wymagać nieco czasu. Program absolutnie rewelacyjny, choć przeznaczony jednak głównie dla programistów i ci skorzystają tu najwięcej. Płatny, jednak wersja testowa dostępna na stronie autora nie ma żadnych ograniczeń. Wersja angielskojęzyczna.
Jeśli nie miałeś jeszcze do czynienia z tym edytorem, to koniecznie wypróbuj.
Atom
Zobacz interface programu.
Edytor zbliżony do Sublime Text, ale darmowy. Znakomicie wspiera pracę z językiem HTML oraz ze stylami kaskadowymi, także dzięki dostępnym rozszerzeniom.
Nie każdemu przypadnie do gustu, warto jednak poświęcić czas na naukę, co przełoży się na wydajną pracę z kodem. Interfejs w języku angielskim.
Jeżeli filozofia pracy z powyższymi programami nie do końca do Ciebie przemawia, to poniżej znajdziesz dwie bardziej tradycyjne propozycje.
Text Editor Pro (EditBone)
Lekki i prosty edytor dla programistów w ciekawy sposób podkreślający błędy w kodzie, również w kodzie HTML. Darmowy.
Geany
Bardzo dobry, dopracowany i oferujący sporo ciekawych narzędzi edytor dla programistów. Jak na tego typu narzędzie charakteryzuje się stosunkowo prostą obsługą.
Darmowy. Interfejs w języku polskim.
IDE — środowiska programistyczne
Zdecydowanie nie są to edytory dla początkujących, aczkolwiek biorąc pod uwagę skromny wybór wartościowych propozycji, warto też wypróbować oprogramowanie typu IDE (zintegrowane środowisko programistyczne). Pozwalają nie tylko na tworzenie, ale także na tzw. debugowanie, kompilację i testowanie kodu.
NetBeans IDE
Środowisko programistyczne przeznaczone głównie do pracy z językiem Java i również napisany w Javie, choć oferuje także sporo możliwości projektantom stron WWW. Program darmowy, dostępny w kilku różnych wersjach, w tym w wersji przeznaczonej do pracy z językiem HTML i JavaScript.
Eclipse
Potężna platforma programistyczna stworzona przez firmę IBM. Cecha charakterystyczna to wtyczki, które umożliwiają tworzenie w różnych językach i rozbudowę środowiska o dodatkowe możliwości. Interfejs w języku polskim.
Narzędzie jest darmowe.
Komodo Edit
Zobacz interface programu.
To okrojona wersja rozbudowanego środowiska Komodo IDE. Program jest darmowy i jak na tego typu narzędzia, przyjazny w obsłudze.
JetBrains
Na koniec nie edytor, a strona internetowa twórców oprogramowania cieszącego się uznaniem wśród zawodowców. JetBrains to autorzy takich edytorów jak WebStorm, PhpStorm czy IntelliJ IDEA.
Oprogramowanie oferowane jest w abonamencie. Dobre oprogramowanie z reguły musi kosztować.
Edytory WYSIWYG
Edytory WYSIWYG (What You See Is What You Get, czyli masz to, co widzisz) pozwalają tworzyć strony WWW bez znajomości kodu HTML. Pracujemy nad elementami witryny w przybliżeniu tak, jak będą one wyglądały w oknie przeglądarki.
Większość edytorów WYSIWYG przeznaczona jest dla osób, które zamierzają zajmować się projektowaniem stron sporadycznie. Dla profesjonalistów są za mało elastyczne. Nie jest to też dobry wybór, gdy na poważnie zamierzasz uczyć się projektowania stron.
Jeżeli jednak bardzo chcesz sięgnąć po edytor typu WYSIWYG, to możesz wybróbować propozycje z listy poniżej:
SharePoint Designer 2007
Mieliśmy nie wspominać o programach, które nie są już rozwijane, ale SharePoint Designer to wciąż świetny program, oferujący mnóstwo ułatwień dla początkujących.
Edytor ten wykorzystany został w kursie „Kompendium projektanta stron internetowych”.
Na stronie ze spisem treści tego kursu, znajduje się także obszerne omówienie możliwości tego edytora od Microsoftu.
Bluegriffon
Udany edytor WYSIWYG, jeden z nielicznych, który przetrwał na rynku i wciąż się rozwija. Cena €70. Interfejs w języku polskim.
WebsitePainter
Prosty i w miarę nowoczesny edytor WYSIWYG. Cena €39. Interfejs w języku polskim. Dostępna jest 30-dniowa wersja próbna.
Website Realizer
Zobacz interface programu.
Kolejny edytor, który jest stale rozwijany. Prosty i w miarę nowoczesny interfejs. Program wyposażony jest w opcje usprawniające tworzenie stron dostosowanych do różnych urządzeń np. telefon czy tablet.
Jeśli nie przeszkadza Ci interfejs w języku angielskim oraz wydanie 60 dolarów, to warto przyjrzeć się programowi, a przynajmniej skorzystać z wersji próbnej.
Mimo dosyć specyficznego podejścia (pozwala na pracę wyłącznie ze stronami utworzonymi w tym edytorze) można bez żadnej znajomości kodowania, stworzyć prosty serwis w kilkanaście minut.
WYSIWYG Web Builder 12
Interfejs edytora przypomina nieco interfejs programu SharePoint Designer 2007. Edytor oferuje całkiem spore możliwości, również wspomagające projektowanie dla różnych urządzeń. Cena: $49,95, dostępne spolszczenie. Można zacząć pracę od 30-dniowej wersji próbnej.