Mateusz K.

Mateusz K. miszcz wwwujitsu

Temat: semantyczność kodu a edytory wysiwyg w cms

Nurtuje mnie sprawa semantyczności, która skrzętnie zachowywana (na ile tylko się da) podczas kodowania idzie z dymem przy pierwszym zetknięciu klienta z wysiwygowym edytorem treści w cms-ie.
Powstają przy tym kwiatki rodzajowe pokroju pustych kontenerów, czy potrójnie (a nawet i "popiątnie") zagnieżdżane <span/div style="..."></span> kończąc na używaniu stylów całkowicie niezgodnie z ich przeznaczeniem (caluśka strona tekstu jako <h1>.

Poniekąd można ograniczyć funkcjonalność edytorów ckedit/tinymce/itd. do minimum, bądź głowić się jak oskubać kod na wyjściu, ale czy te zabiegi są tego warte ? Jak sobie z tym radzicie poza nieustannym informowaniem odbiorcy co i jak należy robić ? Oczywiście do czasu.

konto usunięte

Temat: semantyczność kodu a edytory wysiwyg w cms

nie warte ... przerabiam ten temat dość często, nie chodzi nawet o jakość kodu html ale o to jak to co wrzuci klient wygląda. Wstyd później taką stronę pokazać w portfolio.
Takie kwiatki najczęściej powstają przy kopiowanie tekstów (Word, inne strony). Tłumaczę klientom: copy do notatnika, copy do edytora i formatowanie.
Waldemar Jonik

Waldemar Jonik właściciel,
webmaster,
programista, JW Web
Development

Temat: semantyczność kodu a edytory wysiwyg w cms

tłumaczenie klientowi, ciągłe i zwykle bezskuteczne

a dodatkowo np używanie narzędzi typu htmlpurifier z własnymi regułami dla tagów

konto usunięte

Temat: semantyczność kodu a edytory wysiwyg w cms

Najlepszym rozwiązaniem jest stosowanie składni bbcode, której po prostu nie da się zepsuć. Zend Framework posiada komponent parsujący bbcode do html, więc tworzenie dokumentów nie stanowi żadnego problemu. My jesteśmy spokojni o kod HTML aplikacji, klient cieszy się, że może korzystać z edytora WYSIWYG.
Waldemar Jonik

Waldemar Jonik właściciel,
webmaster,
programista, JW Web
Development

Temat: semantyczność kodu a edytory wysiwyg w cms

bbcode ma za dużo ograniczeń, w każdym razie moi klienci chcą np osadzać mapy google maps, dodawac elementy otwierane w lightbox, ladowac pliki, obrazki, ustawiać ich marginesy, dodawac w tresci elemnenty flash, tworzyć tabelki i widzieć to wizualnie.
impementacja niektórych zamawianych funkcji wymaga czasami nawet przeróbki edytorów typu FCK Editor czy Tiny MCE
Adam Pawliczek

Adam Pawliczek Usability expert, UX
designer,
Interaction
specialist

Temat: semantyczność kodu a edytory wysiwyg w cms

Waldemar Jonik:
bbcode ma za dużo ograniczeń, w każdym razie moi klienci chcą np osadzać mapy google maps, dodawac elementy otwierane w lightbox, ladowac pliki, obrazki, ustawiać ich marginesy, dodawac w tresci elemnenty flash, tworzyć tabelki i widzieć to wizualnie.
impementacja niektórych zamawianych funkcji wymaga czasami nawet przeróbki edytorów typu FCK Editor czy Tiny MCE
Twoi kliencie jeszcze tego nie wiedzą, ale sami już robią strony internetowe ;)
Waldemar Jonik

Waldemar Jonik właściciel,
webmaster,
programista, JW Web
Development

Temat: semantyczność kodu a edytory wysiwyg w cms

Adam Pawliczek:

Twoi kliencie jeszcze tego nie wiedzą, ale sami już robią strony internetowe ;)

oczekiwania klientów bywają różne, niektórzy zamawiają CMS a nigdy z niego nie korzystają, inni mają bardzo różne, specyficzne potrzeby.
np ostatnio mocno "techniczny" klient spoza Polski zażyczył sobie ściśle powiązanie katalogów managera plików z edytora FCK z numerami ID artykułów w CMS. klient płaci i wymaga to trzeba było przerobić cały system uploadu plików w takim FCK.

a co do poprawności kodu to htmlpurifier jest świetny. można np w prosty sposób ograniczyć to jaki user może jakie znaczniki zapisać i z jakimi atrybutami mogą być te znaczniki. nawet tekst z Word daje się dość ładnie oczyścić z nadmiaru śmieci (problemem pozostaje nadmiar znaczników div, p czy span)

konto usunięte

Temat: semantyczność kodu a edytory wysiwyg w cms

Waldemar Jonik:
bbcode ma za dużo ograniczeń, w każdym razie moi klienci chcą np osadzać mapy google maps, dodawac elementy otwierane w lightbox, ladowac pliki, obrazki, ustawiać ich marginesy, dodawac w tresci elemnenty flash, tworzyć tabelki i widzieć to wizualnie.
impementacja niektórych zamawianych funkcji wymaga czasami nawet przeróbki edytorów typu FCK Editor czy Tiny MCE

Rozwiązanie w stylu bbcode idealnie nadaje się dla typowych stron, w których klient chce mieć możliwość dodawania aktualności. W opisanym przez Ciebie przypadku nie sprawdzi się i będzie z nim więcej kłopotu niż pożytku. W takiej sytuacji jedynie wspomniany htmlpurifier lub tidy pomoże.
Marcin Ślęzak

Marcin Ślęzak software development
manager, Webanywhere

Temat: semantyczność kodu a edytory wysiwyg w cms

Prawdopodobnie nie wszyscy się zgodzą ale najlepszym rozwiązaniem jest po prostu unikać edytorów WYSIWYG :). To co wypluwają ściska czasami serce. Oczywiście nie ma mowy o ograniczeniu funkcjonalności użytkownikowi. Coraz częściej rozwiązaniem na które się decydujemy jest nakłonienie użytkownika aby treść jaką wpisuje do edytora była jak najprostsza. Ogranicza to "wyobraźnie" samego edytora WYSIWYG i czasami potrafi wypluć coś co "nie wyróżni się w tłumie". Droga do realizacji jest dość prosta jednak zjada man-days'y :
- ograniczamy dostępne opcje samego edytora,
- zamieszczamy dedykowane mechanizmy do zamieszczania na stronie wszelkich elementów takich jak: pliki dokumentów, obrazki, flash, filmy, mapy.

W rezultacie otrzymujemy możliwość jednolitej prezentacji poszczególnych podstron CMS'a, użytkownik frontowy przyzwyczaja się do kilku "szablonowych" prezentacji treści przez co łatwiej mu się odnaleźć. Dodatkowo pozwala to na panowanie nad wszelkimi dodatkowymi elementami i ich "katalogowanie".

Trochę odbiegłem od tematu... jednakże wniosek powinien być dość jasny, nie najlepszym rozwiązaniem jest tworzenie CMS'a w którym edytor WYSIWYG generuje całą zawartość podstrony, a użytkownik kopiuje do niego kilkanaście stron dokumentu Word'a.
Mateusz K.

Mateusz K. miszcz wwwujitsu

Temat: semantyczność kodu a edytory wysiwyg w cms

Marcinie: szczęściem w nieszczęściu edytory wysiwyg posiadają opcję czyszczenia wklejanej treści. W przeciwnym razie sieć byłaby pełna koszaru zwanego syfem po wordzie.

Ograniczanie funkcjonalności edytora to jest oczywiście rzecz podstawowa.
Ale fck vs tinymce vs bbcode plasują się mniej więcej na tej samej pozycji.
Tyle samo wad i tyle samo zalet.
Co z tego że generowany przez tinymce kod przewyższa fck, ale użytkownicy narzekają na obsługę w tym edytorze podczas gdy fck im się podoba.
Jeszcze nigdy nie usłyszałem konkretnej odpowiedzi na pytanie "dlaczego?", ale w końcu złapię diabła za rogi i zajadę w krainy gdzie znają odpowiedzi na wszystko ;)
Marcin Ślęzak

Marcin Ślęzak software development
manager, Webanywhere

Temat: semantyczność kodu a edytory wysiwyg w cms

Programiści maja abstrakcyjne pomysły ale użytkownicy szczególnie Ci mniej ogarnięci też potrafią pokazać rogi i wykombinować coś ciekawego z edytorem WYSIWYG. W obecnym projekcie niestety "odgórnie" zdecydowano na przekazanie pełnej swobody umieszczania prawie wszystkiego dotyczącego danego artykułu w edytorze WYSIWYG, wykorzystując do tego integrację edytora z Naszym autorski menadżerem plików, tłumacząc się odpowiednimi umiejętnościami użytkowników.

Tutaj zgadzam się z jednym stwierdzeniem które było podstawą rozwiązania "allInEditor" : "pozwalamy na kreatywność osób dodających treści i umożliwia wstawienia filmu w środku tekstu" ;).

Jakkolwiek prozaiczne nie byłoby to stwierdzenie nie przyćmiewa to wszystkich zalet ujętych w mojej wcześniejszej wypowiedzi (de facto rozwiązuje panowanie nad wszystkimi zamieszczonymi plikami). I tak oto "siłą sprawczą" pod koniec wakacji będziemy mogli wspólnie podejrzeć kod całkiem nieźle zapowiadającego się "projektu" oglądając kreatywność użytkowników. Osobiście nie wierzę w zachowanie porządku przez osoby zamieszczające takie treści i bardzo jestem ciekawy spójności poszczególnych podstron. Ciekawym zagadnieniem będzie również wpływ semantyczności kodu wyplutego z edytora WYSIWYG na skuteczności indeksowania treści przez wyszukiwarki.

Ostatecznie z punktu widzenia szarego tyciego tyciego programisty jest jeden pozytywny aspekt całej zabawy. Długie ale jakże ciekawe godziny starcia z menadżerem plików implementując funkcję przygotowania audio/video pod streaming :D

Podsumowując sam ukręciłem bata na własny tyłek, będąc pewny jednego i słusznego rozwiązania dziwnych zachowań edytora WYSIWYG nie przemyślałem planu "B". Prawdopodobnie będę musiał rozwiązać to w inny sposób, a może... wystarczy stwierdzenie "ten edytor tak ma" albo "What You See Is What User Can Create"?

Może ktoś ma inne pomysły?
Tomasz Sapletta

Tomasz Sapletta JAVA, PHP, NodeJS,
JS, Python | Full
Stack Developer |
DE...

Temat: semantyczność kodu a edytory wysiwyg w cms

Jeśli zamierzasz korzystać z czyjegoś rozwiązania to warto poświęcić chociaż 10% czasu jaki byś potrzebował na budowę własnego edytora dla CMS i masz to czego potrzebujesz, gdyż np. tiny - można łatwo dostosować, żeby nie wypluwał tego czego nie chcesz, ale ... on sam tego nie zrobi.

Następna dyskusja:

Czy jest taki CMS?




Wyślij zaproszenie do