Hej,

chciałbym przedstawić i poddać Waszej ocenie nowy projekt: Screenr. Wszelka krytyka (lub też dobre słowo) mile widziane!

Jest to niewielkie narzędzie online do tworzenia zrzutów stron oraz miniatur stron internetowych udostępniające proste API oraz umożliwiające zagnieżdżanie zarzutów, bądź miniatur, bezpośrednio na stronach internetowych.

Aplikacja znajduje się obecnie w fazie publicznej bety - aczkolwiek wszystko powinno działać jak należy.

Całość składa się z kilku komponentów: interfejsu webowego oraz workerów. Głównym elementem serwisu jest aplikacja webowa stojąca na Symfony 2. Rodziela ona zadania pomiędzy poszczególnymi workerami. Same workery odpowiadają za generowanie zrzutów oraz miniatur. Oba te elementy są od siebie odseparowane: znajdują się na innych fizycznych maszynach, a także są od siebie zupełnie niezależne.

Aktualnie postawione są dwa workery: jeden napisany w PHP, drugi napisany w Pythonie. Oba wykorzystują silnik Webkit do pobierania zrzutu strony, ale oba robią to w inny sposób i z wykorzystaniem innych narzędzi. Najlepsze jest jednak to, że workery mogą robić praktycznie rzecz biorąc wszystko: jeśli zajdzie potrzeba udostępnienia przeglądarek? Nie ma problemu - lekka zmiana API po stronie frontendu aplikacji oraz napisanie odpowiedniego workera (akurat taka funkcjonalność znajduje się na mapie drogowej).

Co w tym fajnego?
- odpowiednie nagłówki w zależności od statusu żądania
- odpowiednie wymiary zwracanych grafik - brak problemów przy umieszczaniu zrzutu w tagu <img>

Jak to działa?
Po wysłaniu żądania, jest ono umieszczone w kolejce oraz natychmiast wysłane do wolnego (bądź z najmniejszą kolejką) workera. Worker obsługuje żądanie i uaktualnia status w bazie danych. W zależności od statusu żądania jest zwracany odpowiedni nagłówek oraz placeholder. Po skończeniu pracy przez worker, zrzut lub miniatura są przesyłane do wewnętrznego storage'u i zwracane. Grafiki są cacheowane przez 24 godziny (wartość ustawiona na sztywno, niedługo będzie konfigurowalna poprzez API podobnie jak i format, etc.).

Wykorzystane technologie:
- PHP (Symfony 2)
- MySQL
- Node.js
- Redis
- Python (worker).

Znane problemy:
- obsługa Flasha.

Dokumentacja oraz formularz demo są dostępne pod adresem http://screenr.co.

Przykładowa miniatura forum.php.pl o wymiarach 500x500 pikseli: kliknij tutaj.

Za wszelkie opinie, serdeczne dzięki.

wpisuje sobie jakiś adres bez http i wywala błąd stronka powinna sobie z tym poradzić i to dopisac
wpisuje poprawny adres dostaje miniaturke
wpisuje znowu błedny adres i stronka sie wkurza stwierdzajac, że już raz mi pokazała co i jak więc 2 raz mi nie musi pokazywać błęd


z opisu api
po co defaultowe wartości skoro są one obowiązkowe?

examples:
zdjęcie nie jest dla mnie przykładem, chcę wiedzieć jak to zdjęcie zrobić


tu jakiś czarny obrazek wyskoczył

Tak jak powyżej przy pierwszym wywołaniu wygenerowania strony z API otrzymuje się czarny obrazek. Następna odsłona dopiero wyświetla go poprawnie.

Worker ma problem z przezroczystością.

Wchodząc na mojego bloga widzimy w tel paski skośne szare. Na miniaturce wychodzi szary blok.

To masz fart, bo u mnie nie wyświetla się w ogóle, nawet po odświeżeniu. Po zmianie wartości, łapane są tylko zrzuty standardowe np. 800x600, ale 213x421 już nie.
Dodatkowo robienie całego zrzutu strony wychodzi rewelacyjnie, ale...

- jakość zapisanego JPG jest słaba, tak wizualna papka
- jeśli chcę zrzut ekranu całej strony, to dlaczego po zmianie jej rozmiaru widzę tylko niewielki jej fragment?
- jeśli dodałbyś do tego obsługę kilku systemów i kilku przeglądarek to już w ogóle byłoby rewelacyjnie, brakuje mi takiego serwisu, te które istniały jeszcze kilka lat temu, poszły w obsługę "na żywo" lub znacznie spadła im wydajność.

@johny_s:
- adres bez protokołu dodany do TODO
- zapisałem, żeby zdebugować formularz
- właściwie to tych domyślnych wartości... nie ma, one dotyczą tylko formularza demo, a nie samego API
- sekcja "examples" pójdzie do poprawy

@pitu:
To właśnie ma tak działać. W momencie kiedy osadzisz sobie grafikę na stronie, od razu otrzymasz obrazek w żądanych przez Ciebie wymiarach - a worker "obrobi" żądanie w tle. Takie było założenie.

@Pyton_000:
Sprawdzę.

@!*!:
- jak Ci coś nie działa, to sprawdź nagłówek odpowiedzi
- dziwne, bo aż sprawdziłem i przy zapisie JPG powinien byż zapisany w jakości 100%. Do sprawdzenia. Wiemy, że do zrzutów PNG nadaje się najlepiej, ale przy naszych testach wychodziły grafiki rzędu 30-40 MB - chyba nikomu nie chciałoby się czekać tyle
- możesz podać jakiś pzykład z tym fragmentem?
- przeglądarki i systemy są w planach (może nawet różne wersje przeglądarek). Aktualnie pracujemy jeszcze nad 2-3 implementacjami workera, żeby zobaczyć co będzie najlepsze i najszybsze. Chcemy też dodać wymuszanie odświeżenia grafiki za pomocą parametru API oraz konfigurowalnego czasu życia cache dla każdego elementu.

Dzięki wszystkim za komentarze.

PS. Landing page nie gryzie w oczy? Bo sam robiłem

U mnie na stronie jest stronicowanie. Niestety screenshot robiony przez Ciebie nie uwzglednia stronicowania i klikajac na Wasze zdjecie na dany numer nie przechodzi do kolejnego screenshota z danej strony.... lipa....

Joke

A teraz na powaznie:
- U mnie na stronie w menu jest "O mnie". Jest to w jednej linii. Na zdjeciu niestety wychodzi to w dwoch liniach
- W listngach kodów na zdjeciu wychodzą niestety scrolle. Na stronie scrolli nie ma
Obie błędne rzeczy mozna zobaczyc tu
http://screenr.co/api/screenshot?url=http%...480&height=

Popsułeś :P


Jak Ty z PNG zrobiłeś 30-40MB? :D Tyle to przy małej stronie może zajmować XCF/PSD z warstwami...

http://screenr.co/api/screenshot?url=http%...280&height=
Popatrz na tło, jest inne jak i na pixele przy napisach.
Tu widać lepiej: http://screenr.co/api/screenshot?url=http%...280&height=
Rozmazane litery... a jak wpiszę link do obrazka to w ogóle nic się nie dzieje ;)

Jest też kwestia linków... Załóżmy że zrobiłem stronę i chce ją dodać do portfolio, więc w IMG wstawiam link http://screenr.co/api/screenshot?url=http%...280&height=
I działa, ale jak Ty zmienisz szablon, to ja dostanę inna miniaturę która nie będzie moja.

Tak z ciekawości:
1. czemu php, node.js i jeszcze python? Po co taki wachlarz technologii, czemu nie wszystko na np. PHP?
2. Jw ale mysql i redis - czemu nie tylko redis? Po co do tego jeszcze mysql? (Bo rozumiem że redis kluczowy bo macie tam kolejkowanie? )

Ten placeholder obrazka zamien na taki z tekstem "screenshot in progress" czy coś w tym stylu, bo ten czarny nic nie mówi dla userów (via powyższe wypowiedzi).

Dzięki.

Z scrollbarami to już zauważyłem wcześniej, że czasem się pojawiają, a czasem nie Kwestia menu to kwestia fonta - jak przeskoczymy na workera na Windowsie to ten problem zniknie.


Nagłówki odpowiedzi się czyta


Mówimy tutaj o pełnym screenie strony - gazeta.png - zrzut gazeta.pl 42 MB. Tak czy siak, jest już pewne, że pojawi się to jako opcja, bo faktycznie te jpegi wyglądają bardzo słabo.


Jaki szablon, bo za bardzo nie łapię.


Czemu taki wachlarz? Choose the right tool for the job

1. node.js + Redis do powiadomień w czasie rzeczywistym (na chwilę obecną są wyłączone, a lecą żądania AJAXowe co jakiś czas).
2. Mysql jako główny storage danych.

Placeholder będzie problematyczny (bo taki na początku był), ale przy miniaturach jest jeszcze bardziej mylący niż czarny kolor Coś pomyślimy tak czy siak.