O ile pierwszy problem, czyli rozpoznanie browsera jest dość szeroko opisany (należy wykorzystać klasę navigator z jej właściwościami appCodeName, appVersion, appName, userAgent) o tyle dość kłopotliwe może być wyszukiwanie informacji, która wersja potrafi wykonać to co spłodzimy. Oczywiście, można by spróbować zmusić użytkownika do instalowania zawsze wersji najnowszej ale jest to podejście raczej mało eleganckie. Jak więc znaleźć najniższą wersję IE, FF, Opery, Safari i Chroma (do tych najczęściej używanych przeglądarek się ograniczyłem), które gwarantują obsługę danej funkcji czy właściwości?

Początkowo próbowałem odwiedzać strony producentów ale to zadanie żmudne jak cholera. I o ile np. Opera ma na swoich stronach ładnie opisane, co która wersja potrafi, o tyle np. z FireFox’em już nie było mi tak łatwo. Na szczęście znalazłem narzędzie, które pozwala w łatwy sposób zapoznać się z wersjami i tym co potrafią. Niniejszym się nim dzielę i polecam, gdyż to dobre narzędzie jest.

Narzędzie znajduje się tu: CanIuse.com <- Historia wersji przeglądarek (IE, FireFox, Safari, Chrome, Opera, IOS Safari, Opera Mini, Opera Mobile, Android Browser) wraz z supportem, między innymi, CSS.

W moim przypadku chodziło o znalezienie najniższych wersji przeglądarek, które obsługują styl transform i przezroczystość (opacity). Dwa wyszukiwania i już wiem, że style.transform obsługiwany jest w IE od wersji 9.0 (to akurat nie przeszkadza bo można użyć MS-owych filtrów), w FireFox’ie od wersji 3.5, Chrome wersja 8.0, Opera wersja 10.5, a Safari wersja 3.5. Alfa-przezroczystość, czyli opacity obsługiwane jest od podobnych wersji.

Obok obsługi CSS narzędzie pokazuje ’supportowane’ właściwości HTML5, SVG, Javascript API i inne. Polecam gorąco, dobra rzecz.

Autorem narzędzia jest producent programu ‘Style Master’ – firma ‘westciv’. Style Master powstał już w 1998 roku i był podobno pierwszym edytorem CSS. Sprzedawany jest do tej pory o czym można przeczytać na stronie firmy….

Ale do rzeczy. Narzędzie, które chcę polecić znajduje się tu: http://westciv.com/tools/shadows/. (Świadomie podaje link do konkretnej wizualizacji bo strona główna może nie przyciągnąć tak uwagi).

Oprócz podlinkowanej wizualizacji cieniowania tekstu, znajdują się tam narzędzia do wizualizacji cieniowania box’ów/kontenerów, gradientów (linear i radial), transformacji (przesunięcie, skalowanie, obrót, pochylenie) i text-stroke.

Polecam uwadze, narzędzie jest wykonane bardzo starannie, ładnie i efektownie, włącznie z przesuwanymi suwakami i oknem wyboru koloru. Kilka ruchów i już wiadomo o co chodzi, a oprócz wizualizacji, dostajemy także gotowy kod dla mozilli lub webkit’a (chrome), który już nie tak trudno przerobić na inne przeglądarki lub na CSS3 jak będzie już gotowy i obsługiwany.

PSPad – Dobry Darmowy Edytor HTML (a właściwie edytor kodu)

Na stronie Jana Fiali, twórcy PSPad’a (http://www.pspad.com/en/) znajdujemy informacje (niestety brak jest strony po polsku ale sam edytor jest spolszczony), że program ten przeznaczony jest dla tych którzy:

• pracują z różnym oprogramowaniem
• lubią i potrzebują kolorowanie składni
• potrzebują niewielkiego narzędzia z prostymi funkcjami (myślę, że tu autor porównuje swój darmowy edytor z płatnymi kobyłami Microsoftu, czy Borlanda)
• szukają narzędzia, które obsługuje zwykły tekst
• chcą zaoszczędzić czas
• potrzebują elastycznego narzędzia, które umożliwia dodawanie rozszerzeń
• chcą zaoszczędzić pieniądze pracując na profesjonalnym narzędziu (PSPad darmowy jest także w zastosowaniach komercyjnych)

Co oferuje PSPad

Poniżej znajduje się lista niektórych cech edytora z moim komentarzem

• Praca z projektami – niezwykle przydatne przy pracy nad wieloma projektami
• Praca z wieloma dokumentami w tym samym czasie (MDI)
• Zapamiętywanie sesji – po zamknięciu edytora i ponownym otwarciu, edytor uruchamia się w stanie sprzed zamknięcia (automatycznie otwiera dokumenty) – bardzo wygodne, znakomicie pomaga zaoszczędzić czas
• Klient FTP – edycja dokumentów online
• Makra i makro rekorder
• Porównywanie dokumentów z podświetlaniem różnic- zgrabnie zrobione
• Szablony (templates)
• Podświetlanie składni – wbudowane rozpoznawanie kilkunastu języków
• Możliwość konfiguracji i tworzenia własnych reguł podświetlania składni
• auto-korekcja – tą opcję akurat wyłączyłem, bo czasem jest denerwująca
• Podgląd HTML – oczywiście bez tego żaden webmaster się nie obejdzie
• edytor HEX – rzadko używany ale czasem przydatny
• wbudowana biblioteka TiDy do sprawdzania poprawności HTML
• zintegrowana wersja Lite (darmowa) edytora CSS – TopStyle
• eksport do formatów RTF, HTML, TeX
• możliwość zaznaczania i kopiowania bloków (kolumn) tektu
• przeformatowywanie i kompresja HTML
• znajdowanie i podświetlanie sparowanych nawiasów i tagów – bardzo potrzebne
• eksplorator kodu
• we wbudowanych narzędziach: pipeta koloru, okno wyboru koloru, konwerter jednostek, generator MD5
• praca z plikami kodowanymi w formatach: UTF-8, ISO-8859-2, ANSI, CP859, UTF-16 LE, UTF-16 BE, OEM
• obsługa plików w formacie DOS, UNIX, MAC
• i wiele, wiele innych

Powyższa lista to tylko część z dobrodziejstw, które oferuje darmowy edytor PSPad. W wieloletniej z nim pracy brakuje mi może jednej rzeczy: rozpoznawania formatów kodowania – kilka razy zdarzyło mi się otwarcie pliku kodowanego w sposób A z ustawioną opcją kodowania B i zapisanie tego pliku – efekt utrata polskich znaków; za pewną wadę można by także uznać małą liczbę kodować znaków narodowych … no ale jeśli robimy strony w języku polskim lub angielskim nie powinno mieć to znaczenia – mamy ISO-8859-2 i UTF-8

Gorąco polecam ten edytor, kto go niezna nich go sprawdzi. Tu jeszcze raz link: PSPad (wersja angielska, opis, download, właściwości itd)

Na pierwszej z tych stron wybieramy wygląd, a właściwie kolorystykę formularza (25 templatek do wyboru). Na drugiej dodajemy i edytujemy w bardzo łatwy sposób pola formularza – do wyboru mamy standardowe pola html tzn. pola tekstowe (jedna linia i wiele linii <textarea>), checkbox’y, combobox’y, pola upload’u plików oraz niestandardowe, czyli np. data, godzina, cena, adres www, imię i nazwisko, telefon, email, dana liczbowa. Właściwości tych pół możemy w łatwy sposób, w ograniczonym zakresie, wizualnie edytować. Na trzeciej stronie, po zapisaniu formularza, mamy możliwość podglądu utworzonego dzieła i ewentualnej jego edycji lub ściągnięcia wygenerowanych plików.

O ile generacja niektórych pól ‘dodatkowych’ np. ‘imię i nazwisko’ przyśpiesza nam jedynie tworzenie strony, o tyle pole z wyborem daty wyposażone w dołączony, otwierany po kliknięciu, kalendarz na pewno uatrakcyjni niejeden formularz.

Pliki, które musimy ‘wgrać’ do naszej aplikacji, ściągamy z kreatora w jednym pliku zip. Po rozpakowaniu znajdujemy tam kilka plików, z których najważniejsze (być może będziemy je modyfikować) to form.html (kod html naszej formatki) i view.css. Dodatkowo dostajemy jeszcze plik view.js (javascript obsługujący formularz), obrazki (png i gif), plik htc i opcjonalnie plik javascript obsługujący ‘wyskakujący’ kalendarz.

Ocena narzędzia:

Zalety:
• Elegancja wykonania i elegancki wygląd generowanych formularzy
• Intuicyjność, a co za tym idzie łatwość obsługi od pierwszego razu
• Bardzo szybkie tworzenie formularzy
• Możliwość dodania opisów pól (helpów dla użytkownika)
• Dodatkowe, niestandardowe pola
• Kalendarz w wyborze daty
• Pełny kod z możliwością modyfikacji (formularz nie korzysta w trakcie działania z plików na innych serwerach)

Wady
• Brak walidacji na poziomie javascript wprowadzonych danych. Np. pole numeryczne pozwala na wprowadzenie liter, zatwierdzenie nie buntuje się przy wprowadzeniu miesiąca o numerze 13, czy godziny 25:67:89
• Brak możliwości zmiany atrybutu ‘name’ pól formularza z poziomu kreatora WYSYWIG (można zmienić w plikach)

Aby pokazać, kilka razy podkreślaną w powyższym tekście, elegancję narzędzia, poniżej znajduje się wygenerowany przez nie przykładowy formularz html, którego tworzenie nie trwał dłużej niż 2 minuty. Wygląd jest w 100% oryginalny, zmodyfikowane (zmiany w otzrymancyh plikach) jest jedynie działanie klawisza ‘Wyślij’