Edytor WYSIWYG
Edytor WYSIWYG

Edytor WYSIWYG i edytor HTML

Stroną internetową możesz zarządzać edytując kod HTMLa bezpośrednio lub korzystając z wizualnego edytora HTML typu WYSIWYG, co jest akronimem z języka angielskiego What You See Is What You Get.

Edytor HTML

Edytorów HTML jest tyle, ile jest potrzeb użytkowników. Jedne skupiają się na wysokiej jakości kodu HTML, a inne na łatwości edycji i wielości gotowych funkcjonalności. Jedne przeznaczone są dla programistów, a inne dla redaktorów nie mających wiedzy informatycznej. Edytory HTML stron internetowych stanowią część systemów CMS, przy pomocy których nie tylko zmienisz treść zapisaną w kodzie HTML, ale również stworzysz dodatkowe strony i przygotujesz plan publikacji.

Edytory HTML w systemach CMS

Edytory HTML wykorzystywane w systemach CMS służą do edycji treści strony WWW w sposób uproszczony lub zaawansowany. W zależności od rozwiązania możesz edytować strony bezpośrednio w kodzie, biorąc na siebie całą odpowiedzialność za wprowadzane zmiany lub korzystać z edytorów zaawansowanych technologicznie, wpierających użytkownika w tworzeniu plików HTML o poprawnej strukturze. Zaawansowane edytory HTML pomogą Ci zmienić treści i nie zepsuć strony WWW oraz podpowiedzą Ci, jak zoptymalizować treść pod roboty wyszukiwarek. 

Najlepszy edytor HTML

Trudno wskazać najlepszy edytor HTML. Rynek oferuje taką ilość rozwiązań, że każdy znajdzie coś dla siebie. W zależności od poziomu zaawansowania informatycznego użytkownika edytory HTML możemy podzielić na: 

  • edytory WYSIWYG stanowiące część systemów CMS, przeznaczone dla twórców i redaktorów treści, mających odrobinę zacięcia do projektowania, ale niską wiedzę informatyczną. Tu zastosowanie mają edytory znajdujące się systemach CMS takich jak WordPressHitso lub PageEditor,
  • kreatory stron internetowych dedykowane dla amatorów, którzy skupiają się na sferze samodzielnego projektowania strony WWW tj. układów grafik i tekstu bez wiedzy informatycznej. W tej grupie systemów znajdziecie squarespace.comtilda.ccWebwavecms.comWordPress.com czy Wix.com,
  • edytory kodu HTML dla profesjonalistów programujących strony internetowe komercyjnie. Tu zastosowanie znajdują Notatnik i Notepad++, lub inne narzędzia przyspieszające kodowanie i wskazujące błędy w składni HTMLa. 

Edytor strony internetowej WYSIWYG

Im mniejszą masz wiedzę informatyczną, tym bardziej przydatne w Twojej pracy będą edytory przyjmujące kształt edytorów tekstów podobnych do aplikacji biurowych (np. Word). Mamy dla ciebie dobrą wiadomość, większość popularnych systemów CMS zawiera wbudowany edytor HTML, nazywany najczęściej WYSIWYG. Edytory różnią się między sobą: 

  • funkcjonalnościami edytora treści (edycja treści, grafik, linków, tabel itp.) 
  • sposobem prezentacji podglądu edytowanej strony, 
  • sposobem i zakresem edycji układu szablonów HTML (szablonów stron).

WYSIWYG, a rzeczywisty podgląd edytowanej stron

Jeśli jesteś użytkownikiem systemów CMS, przyzwyczajonym, że edycja odbywa się przy pomocy pól formularza, a wokoło jest interfejs CMSa, a nie widok edytowanej strony np. jak w WordPress, miłym zaskoczeniem będzie dla Ciebie rzeczywista wizualna edycja strony, bez konieczności wyobrażania sobie jak strona będzie tak naprawdę wyglądała po zapisaniu zmian. Systemami, w których treść edytowana jest w stronie a nie poza nią są np. Hitso od Autentika.pl lub PageEditor. Hitso nie nadaje się do projektów prostych, ale znakomicie sprawdza się w projektach rozbudowanych o specyficznych potrzebach funkcjonalnych. PageEditor nadaje się do każdej wielkości projektów serwisów WWW, a kilkaset gotowych funkcjonalności najczęściej zaspokaja potrzeby klientów. 

WYSIWYG, a jakość kodu HTML

Wychodząc z założenia, że nieposkromiona jest fantazja redaktorów serwisów WWW, systemy CMS zawierają raczej więcej niż mniej możliwości dodawania, formatowania i rozbudowy treści. Ponieważ więcej nie znaczy lepiej, warto zrozumieć jeden ważny aspekt, czyli konieczność zapanowania nad kodem HTML i jego jakością. Dobra jakość koduHTML to dobre pozycjonowanie oraz poprawne zachowanie się strony internetowej na różnego typu urządzeniach. To właśnie te dwa zjawiska powodują, że edytory typu WYSIWYG mają więcej nałożonych ograniczeń aniżeli pozwalają na wstawianie online każdej treści, jaka przyjdzie redaktorowi do głowy.

Funkcjonalności edytorów WYSIWYG

Skupiając się jednak na funkcjonalnościach, przy pomocy większości edytorów WYSIWYG wykonasz następujące zmiany w treści: 

  • dodanie, usunięcie i formatowanie tekstu (typ fontu, wielkość, kolor, podkreślenie) 
  • dodanie, usunięcie i formatowanie grafik,
  • dodanie i usunięcie galerii grafik, 
  • dodanie, usunięcie i formatowanie tabeli, 
  • dodanie, usunięcie i formatowanie linków zewnętrznych i wewnętrznych, 
  • zmiana nagłówków,
  • itp.

Edycja treści strony WWW odbywa się najczęściej przez przejście do wywołania strony edycji. W PageEditor po wybraniu strony do aktualizacji klikasz przycisk Edytuj tę stronę i pozostając na stronie otrzymujesz możliwość edycji wybranego tekstu lub grafiki przy pomocy edytora z kilkoma lub kilkunastoma funkcjonalnościami. Po zakończeniu edycji klikasz przycisk Zapisz, a system tworzy wersję roboczą strony, którą możesz opublikować albo zaplanować jej publikację. 

Najczęściej popełniane błędy podczas pracy z edytorem WYSIWYG

Edytory WYSIWYG wyglądające jak edytory tekstu np. Word mają to do siebie, że pozwalają tak samo wiele stworzyć co zepsuć. Niestety im więcej funkcjonalności, tym większej wstrzemięźliwości stylistycznej należy wymagać od redaktorów. Różnica między Wordem, a HTMLem jest taka, że w przypadku edytorów tekstów jakość kodu źródłowego nie ma znaczenia dla wyświetlania treści, a w przypadku HTML powiązanie między kodem, a stroną wizualną jest znaczne. Jeden nieprawidłowy znacznik w kodzie HTML jest w stanie spowodować niepoprawne wyświetlanie strony internetowej.

Zebraliśmy kilka najczęściej popełnianych błędów podczas edycji strony WWW: 

  • nadawanie tworzonym tekstom różnych krojów i styli (mieszanie fontów, aby było ciekawiej), 
  • kopiowanie treści bezpośrednio z innych źródeł jak Word, Excel czy inne strony WWW, 
  • wielokrotne stosowanie nagłówka H1,
  • wstawianie grafik w nieodpowiednim rozmiarze 
  • wstawianie grafik o nieoptymalnej wielkości i formacie,
  • usuwanie grafik z bazy plików, które są powiązane z wyświetlaną treścią,
  • przenoszenie grafik w strukturze bazy plików, które są powiązane z wyświetlaną treścią,
  • wstawianie kodu ze źródeł zewnętrznych, z którymi edytor nie jest kompatybilny
  • zbyt duża ilość materiałów pochodzących ze źródeł zewnętrznych niezgodnych z dobrymi praktykami i dokumentacją osadzanie multimediów,
  • niekorzystanie ze szkoleń z obsługi działania oprogramowania CMS,
  • niekorzystanie z dokumentacji wdrożeniowej oprogramowania CMS.

Unikanie powyższych błędów pozwoli Ci cieszyć się poprawnie działającą stroną WWW. Jeśli wybierzesz system CMS PageEditor uniemożliwimy Ci popełnianie wielu z wymienionych wyżej błędów, ponieważ mechanizmy wewnętrzne zawsze ostrzegą Cię przed wgraniem podejrzanego pliku lub usunięciem materiałów, które są wykorzystywane na stronie WWW.

Podsumowanie

Rozwiązania definiowane jako edytory HTML lub edytory WYSIWYG różnią między sobą tak samo, jak różne jest podejście twórców edytorów lub systemów CMS do ich zastosowania. Istnieje wiele rozwiązań, a każde z nich ma swoje plusy i minusy. Do Ciebie należy wybór, które rozwiązanie najbardziej pasuje do Twojego projektu i zespołu, który będzie z tego oprogramowania korzystał. Jeden element jest ważny przy wyborze i dotyczy każdego typu oprogramowania tj. wsparcie autorów systemu CMS i zaangażowanie firmy wdrożeniowej w rozwój oferowanego rozwiązania. W przypadku PageEditor wszystkie bazowe funkcjonalności systemu, w tym edytory treści są na bieżąco rozwijane, a ewentualne błędy usuwane w cenie abonamentu za hosting i CMS.