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?

Isotope

isotopeŚwietny mechanizm graficznego filtrowania/sortowania przedstawia sobą skrypt Isotope. Wygląda to przefajnie, a możliwości ma wiele. Jesli nie do końca kumasz o co mi chodzi (bardzo możliwe – trudno w krótkim wpisie obrazowo opisać działanie Isotope) – kliknij i sprawdź sam(a).

Fluidy w WebGL

fluidwebglPamiętacie Silk? To taka zabawka kolorową plazmą.

Teraz czasy się trochę zmieniły, mamy do dyspozycji zaawansowany silnik graficzny w przeglądarkach – WebGL. I zaczyna się „dziać”. Jedną z zabawek o której warto wspomnieć, jest Fluid Experiment. Zasadniczo to też zabawka, ale się animuje i zachowuje jak płyn. Powiadam Wam – power drzemie w waszych browserach! :)

Parallax na Twojej stronie www

Ostatnio modne są „nowoczesne” strony, w których podczas przewijania, pojawiają się i znikają paski z ilustracjami/tekstem. To tak zwany parallax effect – „fragment strony przesuwa się z inną prędkością niż pozostałe, co daje pewne złudzenie trójwymiarowości„.

U Webmastaha od jakiegoś czasu jest pożyteczny tutorial, jak taki efekt w prosty sposób wykonać. Warto się chociaż przeklikać.

Wyszukiwanie podobnych obrazków

Podczas pracy przy webdeveloperce dość często, z różnych powodów, zdarza się, że potrzebujemy wyszukać obrazek podobny do tego który już mamy. Najczęściej Klient podsyła mi do projektu jakąś ilustrację do której nie ma praw, a moim zadaniem jest odnaleźć możliwie podobną, którą mogę zakupić wraz z prawami do użycia.

W Chrome sposób na to jest prosty. Wczytuje obrazek do przeglądarki, nasiskam klawisz „s” i klikam na obrazku prawym przyciskiem myszki. Powoduje to wyszukiwanie przez Google obrazków podobnych. Ale to wyszukiwanie nie jest idealne.

tineyeDlatego warto skorzystać z dedykowanej wyszukiwarki tego typu, jaką jest na przykład TinEye. Działa szybko, prosto, intuicyjnie, a wyniki wyszukiwania są bardzo zadowalające.

Sposób na linie w js – dowolnie pochyłe

Szybciutka funkcja do rysowania dowolnych linii z punktu A do punktu B :)

function linedraw(ax,ay,bx,by)
{
    if(ay>by)
    {
        bx=ax+bx;  
        ax=bx-ax;
        bx=bx-ax;
        by=ay+by;  
        ay=by-ay;  
        by=by-ay;
    }
    var calc=Math.atan((ay-by)/(bx-ax));
    calc=calc*180/Math.PI;
    var length=Math.sqrt((ax-bx)*(ax-bx)+(ay-by)*(ay-by));
    document.body.innerHTML += "
<div id='line' style='height:" + length + "px;width:1px;background-color:
black;position:absolute;top:" + (ay) + "px;left:" + (ax) + "px;
transform:rotate(" + calc + "deg);-ms-transform:rotate(" + calc + "deg);
transform-origin:0% 0%;-moz-transform:rotate(" + calc + "deg);
-moz-transform-origin:0% 0%;-webkit-transform:rotate(" + calc  + "deg);
-webkit-transform-origin:0% 0%;-o-transform:rotate(" + calc + "deg);
-o-transform-origin:0% 0%;'></div>"
}

Łatwe wycinanie tła online

Clippingmagic.com to prosty onlajnowy program graficzny, odpalany w przeglądarce, używający zaawansowanych funkcji które w prosty sposób można wykorzystać do wycinania obiektów z tła zdjęć. Moim zdaniem rewelka, działa szybko, sprawnie i dokładnie. Przetestowałem i będę używał, chyba nawet Fotoszkopa porzucę w tego rodzaju zadaniach, na rzecz Clippingmagic. Na pewno warto znać.