Ostatnio tworzę trochę różnych porównań. Np. rok temu zrobiłem porównanie serwisów społecznościowych. Aby zobrazować różnice między Facebookiem, NK itp. zrobiłem taką tabelkę w Calcu:
Na dole umieściłem nawet stopkę (za: polishwords.com.pl/blog) na wypadek jakby ktoś chciał zacytować to porównanie, ale nikt nie zacytował, ale nie smucę się i nie dziwię się, bo to porównanie jest do kitu!
Długo publikowałem takie potworki na blogu, no i stwierdziłem, że dość tego, że jak ma tak wyglądać porównanie to lepiej w ogóle go nie publikować!
Minęło wiele czasu i naprawdę musiałem przemyśleć to na nowo. Wziąć pod uwagę zdanie Was,czytelników, którzy przecież czytacie mojego bloga i jak widzicie takie rzeczy to pewnie od razu zamykacie stronę.
A więc postanowiłem coś z tym zrobić i zrobiłem…
Zapytałem się na Flakerze co z tym zrobić 😉
Rysiu zaproponował od razu stworzenie tego w HTML i CSS. Ale mnie nie podobała się koncepcja tworzenia za każdym razem grzebania w HTML. Buari i Michał zaproponowali dwie strony. Jedna to galeria inspirujących styli tabel, a druga to jeden styl takiej gotowej tabeli do porównywania. Fajnie, tylko nadal trzeba grzebać w HTML.
A więc co?
Przeszukałem internet, żeby sprawdzić czy jest może już taki generator, który by zrobił wszystko sam.
Znalazłem program za 120 złotych o nazwie “Comparision Chart“. Oto efekt działania tego programu:
Ale to jest brzydkie! Tylko trochę lepsze niż w arkuszu kalkulacyjnym! I to za 120 złotych… ale mniejsza z tym. Skoro tak to szukam dalej… szukałem dlugo i wierzcie mi… gdyby było to bym znalazł. Ale nie ma ! Jak internet długi i szeroki nie ma prostego narzędzia do tworzenia porównań produktów! Ładnych porównań!
Sam w to nie wierzę, gdzieś na pewno jest ale już ja nie znajdę. Może komuś z czytelników będzie się chciało albo będzie znał to prove me wrong i wrzuci niech w komentarze i dziękuję z góry!
Zostałem więc z niczym. Zasmucony wróciłem do wypowiedzi Rysia, który proponował żeby zrobić to w HTML i CSS. No ok, niech będzie HTML i CSS. Ale co zrobić, żeby nie tworzyć tabeli od zera w HTML? Może jakiś prosty kreator tabeli w … JavaScript? No ok pomyślałem, to da się zrobić. Zrobiłem więc kreator tabeli i wrzuciłem jakiś dobry styl do zmiany wyglądu. Dodałem możliwość łatwej edycji tekstu przez kliknięcie w ten tekst tak samo jak w Excelu.
A co z obrazkami “haczyk” i “brak”, które często pojawiają się w porównaniach?
No stwierdziłem, że zastosuję tu inteligentne tagi. Po wpisaniu “jest” pojawi się wyśrodkowany (a jakże) obrazek haczyka, a po wpisaniu “brak” obrazek odpowiadający temu stanowi rzeczy. (dzięki Leśniakowi, który zaproponował, że haczyk będzie lepszy niż pinezki :)).
A więc mamy generator tworzenia online porównań produktów, który pozwala dodawać nowe produkty, nowe cechy produktów, używać inteligentne tagi i łatwo edytować teksty.
No i na koniec zostały jeszcze style…
Dodałem na razie 2 style szablonowe, które powstały w trakcie prac nad kreatorem. Oprócz tego każdy może edytować sobie styl CSS za pomocą wbudowanego onlineowego działającego w czasie rzeczywistym edytora CSS (dzięki Ben Lee).
Jak stworzycie jakiś fajny skrypt CSS to podeślijcie mi to dodam do kreatora z adnotacją o autorze i linkiem do strony Waszej. Kontakt jest u góry bloga.
No i to wszystko. Jest efekt.
Prosty, onlineowy, w pełni edytowalny kreator porównań produktów. A jeżeli spojrzycie na to szerzej to jest w zasadzie onlineowy kreator dowolnych, ładnie wyglądających tabel.
Tak wyglądają przykładowe tabele:
Styl “Cytryna”:
Styl “Late”:
Prawda że lepsze niż Excel? Nie jest to niebo pro-grafika, ale jednak jest progres. Poza tym jak pisałem jak ktoś ma skille graficzne to zachęcam do tworzenia własnych styli CSS i podsyłania to wrzucę do kreatora 🙂
Kreator nazwałem “Fechama” od “Feature Chart Maker” i jest dostępny do Waszego użytku komercyjnego i niekomercyjnego. Proszę tylko Was o zostawienie stopki (Created by Fechama), żeby każdy mógł też do niego dotrzeć.
Ponieważ w jego stworzeniu pomogło mi parę osób (wspomnianych w poście) postanowiłem oddać efekt społeczności. Możecie tworzyć swoje wersje kreatora na podstawie Fechama pod warunkiem, że będą niekomercyjne i będą posiadać link do strony Fechama (czyli kod kreatora jest na licencji Creative Commons ShareAlike, Uznanie Autorstwa)
Kreator jest dostępny pod adresem http://polishwords.com.pl/fechama.html
Miłego tworzenia porównań! 🙂
I to jest właśnie istota programowania. Umiejętność wytwarzania narzędzi do konkretnych potrzeb.
Swoją drogą jakby to trochę rozbudować i dopracować, to masz gotowy pomysł na serwis on-line.
Takie porównania można by bowiem przesyłać/udostępniać innym. Stworzyć API, ponadto jakiś spójny format opisu danych i 1K odsłon dziennie gwarantowane!
Pozdrawiam
@Bigismall
Tak, może powstać z tego ciekawy serwis.