2015-02-03 21:30 by Xeen

tdc @2015-02-03 23:18:35

System komentarzy padł? czy nikt nie pisze nic? ;)

cacodemon @2015-02-04 08:23:16

Design strony tragiczny. Brakuje tylko jeszcze większych obrazków i jeszcze większej czcionki. Nie idźcie tą drogą !

Tami @2015-02-04 09:31:54

Idźcie tą drogą. Dobrze i wygodnie się czyta.

gorgh @2015-02-04 12:30:45

gratuluje tworcom nowego serwisu, zycze aby ich determinacja nie spadla z czasem i aby stronka na stale zadomowila sie w polskim internecie

opinia @2015-02-04 15:36:56

Bardzo fajny design. Proszę nie zaśmiecać. Powodzenia.

MDW2 @2015-02-04 18:43:37

Nie ma RSSów? Jak nie będzie to niestety nie będę zaglądał na tę stronę. Po prostu o niej zapomnę.

Ja @2015-02-04 19:17:14

Graficzna tragedia, ktoś się zapatrzył na dotykowce i windowsy 8?
Ta droga to droga w przepaść. Popełniacie ten sam błąd co pseudoportale pseudoinformacyjne typu wp.pl czy onet.pl

Ja @2015-02-04 19:19:02

Acha i jeszcze zamieńcie obrazki na minutowe filmy we fleszu. Żeby komp od razu zdechł przy ładowaniu strony.

afan @2015-02-04 20:38:09

Kolego "Ja", mocno przesadzasz lub jawnie trollujesz. Mam dość leciwego laptopa i strona Retrokomputera ładuje się i chodzi bardzo szybko, tam jest prosty kod HTML bez bajerów i 6 prostych obrazków na krzyż. Sprawdziłem że całość (kod strony i te miniaturki) zajmują łącznie 89 kb (kilobajtów!), tak prostych i lekkich stron współcześnie już się nie spotyka. Dla porównania strona Atarionline zajmuje kilka razy więcej miejsca i zawiera kody javascript, a mimo to też jest lekka i ultra płynnie chodzi na starych sprzętach, więc nie przesadzaj z tym przeładowaniem lub nie trolluj.

Anon @2015-02-05 05:50:43

Na telefonie wygląda lepiej niż na komputerze. I dobrze, bo częściej korzystam z urządzeń mobilnych.

venex @2015-02-05 09:06:44

Bardzo fajnie, że taki serwis powstał. I dobrze, że da się czytać normalnie na telefonie - np. w pociągu :) Jeżeli autorzy strony tu zaglądają i mogę coś zasugerować, to proponuję zainteresować się RWD
http://pl.wikipedia.org/wiki/Responsive_...
Dzięki tej technice strona dobrze wygląda na urządzeniach mobilnych, a przy okazji nie wali po oczach na desktopie. Fajnym przykładem może być np. ta strona
http://webdesignerwall.com/
Życzę powodzenia i przede wszystkim wytrwałości :)

wieczór @2015-02-05 15:06:35

Jeśli ja mogę coś zasugerować, to proponuję trzymać się z daleka od RWD. Istnieją znacznie lepsze metody uczynienia strony przyjazną urządzeniom mobilnym, pozwalające na robienie tego w prawidłowy sposób a jednocześnie dobrze wyglądające na desktopie. RWD to wytrych, który powinno się stosować właściwie tylko wtedy, gdy strona jest statyczna i nie ma możliwości scriptingu server side ;)

Wymaga konstrukcji layoutu w określony sposób i nie zapobiega nadmiernemu ruchowi sieciowemu, co w przypadku komórek może mieć znaczenie.

venex @2015-02-05 22:43:31

Proszę może z jakimś przykładem lepszej metody, tak żeby krytyka była bardziej konstruktywna :-)

wieczór @2015-02-06 16:05:16

Lepsza metoda to generowanie osobnego szablonu dla urządzeń mobilnych po stronie serwera. Wykrywanie jest banalne. Zalety:

1) Dzięki temu nie podlegamy żadnemu ograniczeniu, bo kod HTML i style są całkowicie niezależne. Tworzy się to o wiele szybciej i prościej niż poprawnie działający kod responsywny

2) Można zoptymalizować content pod komórki. Najczęściej jest tak że komórka nie potrzebuje całego stuffu który potrzebuje dekstop, obrazki mogą być mniejsze i lżejsze, skrypty, style też. Oszczędzamy bandwidth - przy podejściu RWD przeglądarka i tak ściąga wszystko a potem dopiero decyduje co i jak wyświetlić

3) Jesteśmy niezależni od rozdzielczości urządzenia. Należy pamiętać że rozdzielczość komórek rośnie ale ich rozmiary się nie zmieniają. Komórka zawzse powinna wyświetlać szablon mobilny nawet jeśli ekran ma rozdzielczość 1600 x 900 (ale cały czas rozmiar np. 4 cale)

4) Jest to znacznie prostsze i szybsze i łatwiejsze do kontrolowania potem ;) Content i tak będzie ten sam ale zoptymalizowany, naturalnie potrzebujemy kodu po stronie serwera ale obecnie to standard. RWD został stworzony do stron statycznych, zrzucanie całej roboty na przeglądarkę.

Naturalnie RWD ma też zalety, ale w zależności od podejścia mogą być one pomijalne w związku z powyższym ;)

wieczór @2015-02-06 16:07:53

Ostatnia zaleta - dzięki powyższemu podejściu łatwiejsze jest testowanie, bo można zrobić sobie haczyk, że po np. ustawieniu zmiennej wyświetlamy szablon mobilny niezależnie od rozmiaru okna, beż żadnej emulacji itp. Albo przełączamy na szablon dekstopowy na komórce jeśli ktoś woli. Wiem że da się do zrobić w RWD też ale to jest utrudnianie sobie życia ;)

venex @2015-02-06 17:07:55

Wybacz, ale ja w takim podejściu widzę raczej wady w porównaniu do RWD.
Po pierwsze strona może mieć kilka różnych layotów dla różnych rozmiarów ekranu. Wystarczy wejść na strony takie jak wspomniane przeze mnie webdesignerwall.com, modern.ie czy nawet na allegro.pl, zwężyć przeglądarkę do minimum i powoli rozszerzać. Widać wyraźnie, kiedy layout się zmienia (pojawiają się dodatkowe elementy, zmienia się też ich rozmieszczenie). Takich "breakpointów" jest kilka - w allegro.pl jeśli się nie mylę jest ich sześć, co oznacza, że konieczne byłoby utrzymywanie w takiej sytuacji sześciu różnych wersji strony dla tego samego contentu. A wraz z rozwojem urządzeń mobilnych tych wersji będzie przybywać a nie ubywać.
Po drugie, jeżeli oskryptujemy wszystko po stronie serwera, to w momencie kiedy wykonamy taki manewr jak opisałem powyżej to będzie to oznaczać, że jeśli chcemy aby strona zawsze wyglądała dobrze konieczne będzie jej przeładowywanie za każdym razem kiedy zmieni się szerokość okna przeglądarki. Jeśli mamy pecha i przeglądamy stronę na telefonie, którego rozdzielczość pionowa i pozioma łapie się na dwa różne szablony, to będziemy musieli przeładowywać stronę za każdym razem kiedy obrócimy ekran z układu pionowego na poziomy. Jeśli mamy stronę "responsywną", to dostosuje się ona automatycznie do aktualnych rozmiarów ekranu klienta, bez zbędnej komunikacji z serwerem.
Zgadzam się, że strony budowane w oparciu o RWD mogą ładować dane, które okażą się niepotrzebne (obrazki wysokiej rozdzielczości, dodatkowe style, itp). Nie jest to jednak wina samej techniki, ale jej implementacji przez konkretne przeglądarki czy frameworki css/js. Da się zbudować stronę tak, żeby na wejściu ładować jedynie style potrzebne w aktualnej rozdzielczości, a w przypadku kiedy trafimy na breakpoint dociągać resztę i podmieniać obrazki na wersje w wyższej rozdzielczości.

wieczór @2015-02-06 19:05:44

Po pierwsze różne layouty dla różnych rozmiarów ekranu to jakaś aberracja. PO CO? Elementy layoutu mają trzymać ROZMIAR nie rozdzielczość. Ponieważ komórki mają rozmiary niewielkie nie chcę mieć elementów na jednej w rozmiarze prawidłowym a drugiej malutkiego że nie da się trafić. Layout mobilny ma się skalować, a rozdzielczość go mało interesuje.

Po drugie - po co ma się zmieniać w locie? Jeszcze nie widziałem żeby ktoś w locie zwiększał rozmiar ekranu w telefonie, jest on raczej stały :) Szerokość okna przeglądarki raczej się nie zmienia, jest stała. Może się zmieniać na desktopie.

Strona responsywna właśnie nie dostosowuje się do ROZMIARÓW ekranu a do jego ROZDZIELCZOŚCI a to jest poważna różnica. Funkcjonalność strony mobilnej ma ułatwiać nawigację i odbiór contentu na MAŁYM ekranie dotykowym. Rozdzielczość jest tu nieważna, wpływa ona na JAKOŚĆ elementu. Po za tym stale rośnie.

To o doładowywaniu tego tylko co potrzebne - to oczywiście się da. Pytanie brzmi: PO CO?.... .... utrudniać sobie życie :)

Ogólnie Responsive design ma wiele zalet, które są zupełnie nieistotne (jak owe dostosywanie się do rozmiaru okna przeglądarki w locie) i wadę o wiele większego skomplikowania aby osiągnąć te same efekty :D Plus ryzyko, że nie zadziała prawidłowo wszędzie, bo jest zależny od rozdzielczości, a ta cały czas rośnie i trzeba poprawiać. Jeszcze raz - layout mobilny jest inny niż desktopowy ze względu na WYMIARY ekranu, nie jego rozdzielczość, kosztowny transfer i inną naturę nawigacji palcem zamiast myszy.

wieczór @2015-02-06 19:09:15

PS. Obecnie mój telefon ma rozdzielczość nieco większą niż mój komputer :) A nadal chcę layoutu desktopowego na komputerze i mobilnego na telefonie, bo komputer ma WIĘKSZY ekran i do nawigacji używam myszy :)

venex @2015-02-06 20:45:49

"Jeszcze nie widziałem żeby ktoś w locie zwiększał rozmiar ekranu w telefonie, jest on raczej stały :)"
Ale ma dwa położenia: pionowe i poziome :)

"Strona responsywna właśnie nie dostosowuje się do ROZMIARÓW ekranu a do jego ROZDZIELCZOŚCI a to jest poważna różnica."
Zgadza się. Dlatego szerokość definiuje się w niezależnych od sprzętu pikselach. Dzięki temu element o szerokości 320 pikseli ma taki sam rozmiar na starym HTC i na nowym Iphonie z retiną :) Przykładowa tabela jak się to ma do fizycznych rozmiarów i rozdzielczości ekranu znajduje się np. tu: http://mydevice.io/devices/

wieczór @2015-02-06 23:27:46

Coś te "pixele" są słabo niezależne bo co urządzenie to inne wartości :) Po kiego groma rozpatrywać tyle różnych przypadków? Robisz w procentach i z głowy. Co do położenia: mało widziałem stron które by ten fakt jakoś respektowały, sprawę rozmieszczenia elementów można załatwić zwykłym floatem. Bo co np. do stylu nawigacji to nawet w położeniu poziomym raczej na komórce desktopowego nie zastosuję , bo ekran nadal jest mały. Ale mówię kwestia podejścia. Ja RWD stosować umiem, ale tam gdzie mogę o tym decydować staram się tego nie robić, bo cenię swój czas - mam dostatecznie dużo ciekawych zajęć żeby go marnować ;)