Tag: przeglądarki

Sposób na testowanie mobilnych www

browserstackTechnologie i techniki tworzenia mobilnych stron, mimo że są i działają, charakteryzują się jeszcze niedojrzałością i siermiężnością. No bo jak napisać złożoną stronę która będzie wyświetlała w 100% (i ani o 1% mniej) szerokości absolutnie na każdym urządzeniu mobilnym? Rzeź, przynajmniej na razie. Przeliczanie rozdzielczości natywnych, symulowanych, faktycznych i bóg wie jakich jeszcze, na niemal każdym urządzeniu działa inaczej. A do tego ta przeglądarka obsługuje viewport, a tamta nie, a jeszcze ina – częściowo i nie zawsze. Temat jest do ogarnięcia, ale pochłania mnóstwo czasu i pracy.

Najgorzej jest z testowaniem na różnych urządzeniach. Byłoby dobrze mieć pod ręką wszystkie typowe fizyczne sprzęty, ale to ze względów głównie finansowych – niemożliwe. Z pomocą przychodzą nam więc aplikacje/emulatory i symulatory. Nie dość dokładne -prawie wszystkie. Prawie – bo jest wyjątek. BrowserStack oferuje testowanie działania i wygladu stron na wielu popularnych sprzętach z iOSem i Androidem. Usługa jest płatna, ale (na ten moment) można za darmo testować działanie (na dokładnym, natywnym emulatorze) przez kilkadziesiąt minut oraz wykonać kilkadziesiąt screenshotów.

Każdy mobilny webdeveloper powinien znać to narzędzie. ;) A może są jakieś inne, podobne, o których nie wiem?

Sprawdzacz headerów

Kolejna pchełka: web-sniffer.net do narzędzie do sprawdzania i testowania informacji nagłówkowych wysyłanych przez podstronę przed jej wyświetleniem. Serwis umożliwia również podgląd interpretacji takich headerów przez różne silniki/przeglądarki (i boty), i w zależności od używanej wersji protokołu HTTP i typu żądania (get, post, …).

Taki web-sniffer może się komuś przydać… :)

HTML5 i CSS3 – próg nowej ery?

Jestem sceptycznie nastawiony do używania nowych języków HTML5 i CSS3. Moim zdaniem przeskok na nowe wersje może się skutecznie dokonać tylko pod dwoma warunkami:

  1. Pod warunkiem wyprodukowania i wypromowania oprogramowania (przeglądarek, edytorów i innych) obsługujących w pełni nowe standardy, a następnie wyparcia starych programów.
  2. Pod warunkiem przejścia na nowe, przyzwyczajenia i przywyknięcia użytkowników (głównie twórców stron www) do nowych technologii.

Pierwszy punkt jest już realizowany. Ku memu zdziwieniu, misja zastąpienia starych przeglądarek nowymi w ciągu kilku następnych miesięcy/lat się chyba powiedzie.

Mam jednak wątpliwości co do punktu drugiego. Dlaczego? Już wyjaśniam:

Weźmy taki XHTML. Pomimo przejrzystości kodu i semantycznej konstrukcji, która teoretycznie powinna się programistom i developerom bardzo spodobać (jeśli porównać do HTML4), XHTML po prostu nie przyjął się. Ludzie (w tym często i ja) piszą w starym dobrym HTML4, który wybacza błędy i jest dobrze znany.

Ale nie tylko – bo myślę że mamy tu do czynienia z czymś co nazywam „syndromem mp3„. Empetrójki są dalej królami w swojej branży, pomimo, że ten format zapisu dźwięków jest już bardzo stary (ma już 19 lat!), i pomimo tego, że od dawna istnieją metody po prostu lepsze pod wszystkimi względami. I obawiam się, że z HTML4 może być tak samo. I z CSS3.

HTML5 i CSS3 to semantyka i prostota, mnóstwo nowych możliwości których tak bardzo nam brakuje (np. audio i wideo w kodzie, łatwe wektory, obracanie obiektów, zaokrąglanie narożników, cienie, wielokrotne tła itp. – jest tego bardzo dużo) i których brak łataliśmy zaślepkami graficznymi i wielokrotnymi divami. Ale HTML5 i CSS3 to nowe tagi, nowy sposób myślenia, nowe podejście. Ludzie są z natury leniwi i nie lubią uczyć się nowych rzeczy, szczególnie wtedy gdy nie muszą. Czy nowe technologie się przyjmą? Pomimo wysiłków marketingowych społeczności webmasterskich – pewnie przyjmą się nieprędko. Nie mówiąc już o wyparciu flasha.

Aby dopełnić obrazu i dać odczuć o co chodzi osobom, które o tych nowych technologiach mają blade pojęcie, dwa linki:
html5demos.com – dużo demonstracji HTML5
css3please.com – piaskownica, w której można potestować nowości w CSS3.

…i, dla równowagi:

Poradnik krytyka HTML5 u Pornela (podejście nieco bardziej techniczne)

Eksplorujemy FireFoxa

RudzielecTo że Ognisty Lisek posiada wiele przydatnych funkcji, to wie każdy kto używa tego programu. Nie każdy jednak zdaje sobie sprawę z tego że FF posiada bardzo wiele funkcji ukrytych, niewidocznych na pierwszy rzut oka. Dodatkowo rozszerzenia i pluginy zwiększają użyteczność Rudzielca do granic prawie nieskończonych. Wiele takich fajnych ciekawostek, ustawień i opisów rozszerzeń FF opisał Ajantis na Tech-o-tropii w tym wpisie. Zapraszam – sam przeczytałem przynajmniej po to żeby się więcej nauczyć o jednym z moich głównych narzędzi.

Sam popełniłem kiedyś też wpis o rozszerzeniach w FF jakich używam oraz o tym, co można z FF zrobić. To tak dla uzupełnienia :)

Safari dla Windows

Safari Popularna Macowa przeglądarka (czwarta pod względem popularności: za IE, FF i Operą) o nazwie Safari – jest dostępna od teraz także w wersji dla Windowsa. Co prawda w wersji beta (a więc wybaczamy niestabilność oraz drobne błędy), ale sam fakt powoduje radość – teraz żeby przetestować wygląd strony pod Safari nie będzie już się trzeba tak gimnastykować…

IE NetRenderer

Kiedyś już pisałem o narzędziach robiących screenshoty witryn pod różnymi przeglądarkami. Takie narzędzia pomocne są szczególnie tym, którzy chcą stworzyć stronę wyglądającą tak samo pod różnymi browserami, ale nie mają do nich dostępu.

IE NetRenderer Wczoraj grxmrx podrzucił mi link do narzędzia o nazwie NetRenderer. Co prawda NetRenderer robi screenshoty tylko jako IE, ale za to we wszystkich ‚kluczowych’ wersjach 5.5, 6 i 7 a także (i to jest najlepsze) potrafi stworzyć obrazki które są wynikiem nałożenia na siebie zdjęć stron z przeglądarek IE 6 i 7 przez co można w bardzo prosty sposób wyłapać różnice w wyglądzie badanej strony wyświetlanej na tych dwóch browserach. Rzecz iście przydatna :)

Opera, FF2, IE6 i IE7 w jednym stali domu

IE Stanadalone… czyli pakiet przeglądarek do testowania witryn WWW. O ile ze współżyciem pierwszych trzech nie ma problemów, to istnienie Internet Explodera w wersji 6 i 7 w jednym systemie stanowi już pewien problem wykonawczy. Z pomocą przychodzi pakiecik IE7_standalone który ściąga i instaluje siódemkę niezależnie od istnienia szóstki, będącej już w systemie. Tego mi było trzeba:)

Teraz w moim XP mam Operę 9, FireFoxa 2, Explodera 6 i Explodera 7 :) Jeszcze Safari by się przydał, ale marudził narazie nie będę (o MacBooku marzę od dawna…) ;)

BTW. Cała akcja dzięki temu wątkowi na forum MI/IM.

Screenshoty całych stron

Rzecz przydatna, gdy nie mamy dostępu do danej przeglądarki, a chcemy zobaczyć, jak nasza produkcja w tejże przeglądarce wygląda.
Automacik browsershots.org w założeniach robi screeny z wszystkch ważniejszych wersji IE, FF, z Konquerora, Opery, Safari i Dillo. Jednak jak donosi Grxmrx (który notabene jest pomysłodawcą niniejszego posta), automat zwraca screeny tylko z kilku z wymienionych pozycji. Poza tym istnieje iCapture robiący shoty w Safari oraz IECapture, robiący shoty w IE7.
Prawdopodobnie takich automatów jest więcej, jak na jakiś natrafię, nie omieszkam tego wpisu uzupełnić :)

Internet Explorer w Firefoxie

IE Tab to wtyczka do FF umożliwiająca zmianę silnika renderującego stronę w danej zakładce, na silnik eksplorerowy… bardzo przydatne: można bowiem otworzyć sobie dwie zakładki, w jednej wyrenderować stronkę za pomocą silnika ff, w drugiej – tą sama stronkę za pomocą ie. I przełączając zakładki, widzimy różnice w wyświetlaniu…