Layout: nowe portfolio

[torm]

No więc... postanowiłem być na czasie... ;) no i machnąłem nowe portfolio...

... jak na razie mam spory problem z dopasowaniem do różnych rozdzielczości... wyrywam sobie włosy z głowy już od dwóch dni, żeby to jakoś ładnie wyglądało.. a tu nagle czytam na smashingmagazine.com, że nie da się tego zrobić i trzeba wybrać kompromis...;P bardzo kompromisów w takich przypadkach nie lubię... więc głowię się dalej... może ktoś z was zna jakiś na to sposób...

 

link do portfolio: http://torm.vot.pl/

 

jakby nie chciało wam się szperać w kodzie to wzór na pozycję tła jest taki:

(-((windowHeight + pos) - adjuster) * inertia) + "px"

gdzie:

windowHeight = wysokość okna (zależy od rozdzielczości)

pos = pozycja scroll bara (ona też zależy od rozdzielczości)

adjuster = zmienna, którą nadaję ręcznie aby ustawić wysokość tła

inertia = mnożnik, który również nadaję ręcznie aby ustawić prędkość przesuwania się tła...

 

no i na koniec dodam, że z matematyki najlepszy nie jestem, ale wydaje mi się, że musi być możliwe dopasowanie do każdej rozdzielczości, skoro tę rozdzielczość możemy sobie pobrać... ale za cholerę nie mogę wymyślić odpowiedniego na to wzoru..:/

 

Poza tym piszcie co myślicie :)

[dziadek3D]

Baaaaardzo dobre, czyste z pomysłem i wodotryskiem użytym z rozwagą i w jakimś celu.... brawo...!!!

i to jest facet od którego chętnie przyjmę uwagi i rady... bo stoi koło swojego dzieła, a nie macha łapami i trzepie dziobem koło czegoś czego w zasadzie nie ma....:)))))))))))

 

..ja Ci nie pomogę.... ale wiem, że nie ma rzeczy bez kompromisów i bez błędów...:)))))... byle jedno i drugie było możliwie niewielkie.

[kots]

Witaj Torm!

 

Jest ok., jeżeli dograsz parę rzeczy - będzie git.

 

Odnośnie pomysłu, to jest to rzecz znana od dawna, efekt paralaksy został bardzo skutecznie wypromowany przez stronę Nike: http://coding.smashingmagazine.com/2011/07/12/behind-the-scenes-of-nike-better-world/ Od tamtego czasu ten efekt jest powielany na setki sposobów z lepszym i gorszym skutkiem. No i dobrze - to fajna sprawa. To celem doinformowania. ;) Proszę zwrócić uwagę, że nie czepiam się, nie krytykuję tutaj Torma! Podaję tylko fakt. Faktem też jest, że pomimo gotowych skryptów stworzenie takiego projektu to wcale nie taka prosta sprawa - co też warto podkreślić.

 

Fajnie, że postanowiłeś spróbować swoich sił i wykonać taki efektowny projekt. Pochwalam! :]

 

No to zaczynam z "czepialstwem". ;) Masz trochę umiejętności, zatem będę sobie pozwalał. :P Podzielę to na kilka kategorii:

 

Projekt: Tutaj jest bardzo fajnie: minimalizm, do rzeczy, modne okręgi, wszystko gra. :) Jedyne do czego mogę się przyczepić to stopień pisma w chmurce "info". Jest on za mały. Strona jest zaprojektowana raczej dla dużych rozdzielczości (1024px i wzwyż), zatem warto dać przynajmniej "czternastkę". 16px też daje radę - zwłaszcza przy tak dużej interlinii.

 

HTML: Jest dziwnie. Podałeś doctype do piątki a jest w XHTMLu. :) Wiem - można tak, ale po co gdy header można załatwić w ten sposób:

 

Tomasz Bieńkowski - Design portfolio

 

W HTML 5 nie trzeba już ładować jakichś "xmlns="http://www.w3.org/1999/xhtml" itp. Mniej kodu, wszystko hula. :) Przypominam, że HTML to język semantyczny, w którym tagi mają znaczenie, stąd warto:

 

• Twoje logo otoczyć h1, gdyż jest to główny nagłówek "podpisujący" Twoją stronę. Wyszukiwarka zaindeksuje (z dużym prawdopodobieństwem) atrybut alt jako tekst pod tytułem Twojej strony w wynikach. Logo warto podlinkować tak aby przeładowywało stronę, lub scrollowało do góry strony.
  
• Zamienić
  na

  - ma to trochę więcej sensu. Nawigacja w ogóle nie występuje na Twojej stronie.
  

  Sekcje (intro, second) powinny być raczej

  lub

  niż

  .
  

  Myślę, że już wewnątrz sekcji warto dodać nagłówek np.: "Voyager Club" w

  , a treść dać w paragrafie: np.

  
  

  może być otoczone
  , gdyż zdaje się pełnić rolę stopki sekcji.
  

   

  Polecam http://html5doctor.com/ jako źródło wiedzy na temat nowych tagów w Piątce. Co do powyższych wskazówek oczywiście możesz się ze mną nie zgadzać, ale polecam przemyślenie semantycznej struktury strony. Przeglądarki powinny na to spojrzeć przychylnym okiem. Niektórzy pracodawcy również. ;) Ach, prawie bym zapomniał: wszystkie skrypty warto przerzucić na koniec strony (przed ). Zaowocuje to trochę szybszym ładowaniem się strony.

   

  CSS i JS: Co do skryptów osadzonych na stronie: raczej nie ma sensu ich dzielenie. Wszystko można otoczyć w:

   

  $(document).ready(function() {// na wszelki wypadek - skrypty wystartują, kiedy strona będzie gotowa
     // Tutaj Twój kod
  });
  
  // Identyczne z powyższym jest
  $(function() {
   // Które działa tak samo. Stosujesz to obecnie na górze swojej strony. :)
  });
  

   

  Tak jak też pisałem wcześniej - warto skrypty dać na koniec. Co dostosowywania się strony do rozmiarów - wygląda mi na to, że tak w 90% procentach masz to rozwiązane - przyjmując, że strona jet pisana na 1024px w górę (bo jest :) ). ;) Co można poprawić?

   

  • Jeżeli chcesz aby sekcje były na pełną wysokość przeglądarki to przyjmując, że każda z sekcji ma klasę "section":
     
    

      $('.section').css('height', $(window).height());
    

    
     
    osadzi Ci w CSS'ie wysokość bazowaną na wyskości okna przeglądarki. Oczywiście należy przyjąć, że może się trafić niesforny użytkownik, który zapragnie zmienić sobie rozmiar okienka. :) Co wtedy:
     
    

       var $window = $(window), // "keszujemy"
            $section = $('.section'); // elementy
    
       $window.bind('resize', function () { // dla starszego jQuery
           $section.css('height', $window.height());
      });
    
       $window.on('resize', function () { // szybsze, powyżej jQ 1.6. -  najnowsza wersja to 1.7.2.
           $section.css('height', $window.height());
      });
    

    
     
    Jeżeli chcesz by jakiś element w środku sekcji również był na "pełną wysokość" to wystarczy dodanie: height: 100% - wyskość zostanie odziedziczona z sekcji. Przy czym warto dodać, że:
     
    

    
     
    Testowałem to sobie w Web Dev Tools na Twojej stronce i chyba plugin odpowiedzialny za scroll nie potrafi się dostosować do takiego stanu rzeczy (potencjalne problemiki :P ). Jeśli chcesz, możesz się pobawić w skalowanie pionowe, nie jest to jednak jakoś super ważne. ;)
     
    

  • Jeżeli chodzi o skalowanie poziome, to widzę, że generalnie udało Ci się wybrnąć z tej sytuacji. Tylko wstążkę oraz chmury w sekcji z drzewem "obcina" po bokach. Możesz to łatwo załatwić przylepiając jedne chmurki do lewej strony okna (np. background-position: 0 50%), a drugie prawej (background-position: right 50%), lub po prostu "powtórzyć" chmury w poziomie po uprzedniej korekcie w Photohopie (lub innym, ulubionym edytorze graficznym). Co do zielonej wstęgi to jedyną opcją zdaje się dodanie background-size: contain - będzie się ona wtedy automatycznie rozciągała. Tutaj więcej informacji na temat tej właściwości: http://dochub.io/#css/background-size W zasadzie rozciąganie tła można by było zastosować i do chmurek. Jest tutaj tylko jedna wada: ta właściwość (background-size) nie działa na IE poniżej 9. Jedynym sposobem byłoby tutaj zastąpienie tła elementem img i jego skalowanie (width: 100%). Ale to już trochę więcej zabawy...
     
    
  • Dopasowanie do niższych rozdzielczości? Dajesz media queries only screen and (min-width: 1024px) (że pewne style aktywują się dopiero powyżej 1024px) i robisz co chcesz. (http://dochub.io/#css/CSS media queries) :) Sugeruję uproszczenie layoutu dla urządzeń poniżej 1024px (to będą raczej komórki). Tutaj przykładowa strona, którą wykonałem w wakacje dla Vital Design - poprosili mnie o taką "responsywną" (obecnie bardzo modne słówko w świecie front-end developerów ;D) stronę/szablon: http://vtldesignhost.com/dev/html_template/ Zmień wielkość okna przeglądarki i zobacz co się stanie. ;) Starałem się opisywać co tam robiłem. W razie gdybyś miał pytania to pisz. :)
     
    

   

  Jasny gwint. Chyba się tu jeszcze tak nie rozpisałem. :D

   

  Mam nadzieję, że coś tego tekstu przyda Ci się choć trochę.

   

  Pozdrawiam, powodzenia i jeszcze lepszych przyszłych projektów!

   

  Artur

[torm]

Dziadku dzięki :) ale filozoficznie podchodząc do sprawy, to zgadzam się, że nie ma rzeczy bez błędów, bo cała natura jest błędem (smutne, ale prawdziwe).. ale jeśli chodzi o kompromisy... to nie koniecznie, jeśli mam ochotę na przykład na pierogi z mięsem to idę i kupuję z mięsem... i to jest bez kompromisowe :)

 

kots - dzięki za rozprawkę :) zgadzam się co do tagów HTML5, w zasadzie to bardzo rzadko koduję - dlatego sporo błędów... :) ale dzięki za przypomnienie w wolnej chwili zoptymalizuję kod...

 

ale co do samych tagów html5 to nie wystarczy czasem dać w CSS:

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

zamiast wrzucać javascripta?

 

z czcionkami też niestety muszę się zgodzić... co prawda... małe jest piękne - zwłaszcza w przypadku fontów, ale niestety coraz mniej funkcjonalne... pomyślę, jeszcze jak to rozwiązać, bo jest kilka rzeczy, które przydałoby się w tym projekcie poprawić...

 

jutro potestuję dziedziczenie wysokości, bo brzmi ciekawie... i to jest chyba to czego szukałem :)

 

dopasowanie do innych rozdzielczości - patrzysz na szerokość 1024px, to jest akurat ok, nie mam zamiaru schodzić poniżej 1024x768 - nikt już tego nie używa... nie widzę też sensu przeglądania portfolio graficznego na iphonie... bo chyba niewiele można tam zobaczyć... chodziło mi bardziej o wysokość... są drobne problemy z efektem paralaxy, nie wiem na jakich monitorach testowałeś, ale jak wrzucisz na rozdzielczość 1920x1200, to inaczej będą się zachowywać poszczególne elementy, doszedłem już do tego w czym tkwi problem...:

- każda sekcja ma 1000px wysokości, tak więc na monitorach o niższych rozdzielczościach wyświetla się w całości

- na monitorze o wysokości 1200px wyświetla się fragment innej sekcji, a żeby cały skrypcik działał..background musi być na position:fixed; no i fixuje odnośnie całości okna, a nie danej sekcji... :) tak więc przy ustawieniu wysokości dopasowującej się do window-height.. powinno wszystko działać... :)

[dziadek3D]

Webmastering to dziwna dziedzina. Spotkanie dwóch przeciwieństw... i często wygląda jak stwór stojący na dwóch dziwnych różnych nogach.

Jedna z najbardziej nieszczerych dziedzin..... albowiem stronę powinien projektować grafik ze znajomością kodowania, a kodować programista ze znajomością grafiki... zwykle efekt takiego działania jest przepysznie smieszny i sprowadza się do wyścigów fikołków graficznych z fikołkami programistycznymi.... treść gdzieś temu towarzyszy jako nikły cień. To niby nic nowego od wielu lat podobnie dzieje się w filmie....:))).

Dlatego każde działanie, które ogarnia całość powinno być doceniane, wymagania rosną.... coraz trudniej ogarnąć je w zakresie jednostki... ale tylko jednostka ogarniająca złożoność tworzenia... potrafi stworzyć obraz szczery i komunikatywny... bez zdobniczych zbędności.... Alleluja....:)))

Edytowane 9 Kwiecień 2012 przez dziadek3D

[kots]

ale co do samych tagów html5 to nie wystarczy czasem dać w CSS: [...]

 

Niestety... IE 6 - 8 po prostu udają, że te tagi nie istnieją. :( http://paulirish.com/2011/the-history-of-the-html5-shiv/

 

Odnośnie pisma na monitorze to pojęcia małe - duże są względne. Wiesz - straszna rozbieżność urządzeń/ekranów powoduje, że na jednym monitorze masz maczek, a na drugim, starszym jest o ka. Chyba bezpieczniej jest stosować trochę większy stopień pisma. Ponadto Georgia to naprawdę ładny krój. Powiększenie bynajmniej ujmuje jej uroku. :)

 

nie widzę też sensu przeglądania portfolio graficznego na iphonie... bo chyba niewiele można tam zobaczyć

 

Nie ma rzeczy niemożliwych. Weźmy np. tę stronkę: http://fffunction.co/does/glg/ Zmniejsz okno przeglądarki tak, by było małe, malutkie. Albo sprawdź na swoim telefonie. :)

 

Webmastering to dziwna dziedzina. Spotkanie dwóch przeciwieństw...

 

A architekci? Projektanci przemysłowi? :) Kiedyś usłyszałem fajne zdanie na ten temat: "to taka politechnika projektowania..."

[dziadek3D]

A architekci? Projektanci przemysłowi? :) Kiedyś usłyszałem fajne zdanie na ten temat: "to taka politechnika projektowania..."

... różnica jest prosta... oni pracują w 3 wymiarach... a wbrew pozorom to wcale nie trudniej... no i nie sprzedaja informacji tylko istotę rzeczy.... łatwizna.....:))))

[torm]

Odnośnie pisma na monitorze to pojęcia małe - duże są względne. Wiesz - straszna rozbieżność urządzeń/ekranów powoduje, że na jednym monitorze masz maczek, a na drugim, starszym jest o ka. Chyba bezpieczniej jest stosować trochę większy stopień pisma. Ponadto Georgia to naprawdę ładny krój. Powiększenie bynajmniej ujmuje jej uroku. :)

 

hmmm testowałem przy rozdzielczości 1920 x 1200 i wszystko jest czytelne :)

 

Nie ma rzeczy niemożliwych. Weźmy np. tę stronkę: http://fffunction.co/does/glg/ Zmniejsz okno przeglądarki tak, by było małe, malutkie. Albo sprawdź na swoim telefonie. :)

 

na telefonie to ja najwyżej rapid rolla odpalę ;) ale... nie w tym rzecz, czy się da czy nie da... tylko czy jest sens... rzecz w tym, żę prace będą bardzo małe... więc i tak nikt nic tam nie zobaczy :)

 

... różnica jest prosta... oni pracują w 3 wymiarach... a wbrew pozorom to wcale nie trudniej... no i nie sprzedaja informacji tylko istotę rzeczy.... łatwizna.....:))))

 

no tak, tylko w przypadku architektury, trzeba jeszcze pamiętać, żeby się nie zawaliło :)

[olaf]

na pewno wszystko jest ok? Mi to na mobilnym core2duo działa poniżej 5fps i nie synchronicznie więc jest efekt jakby strona cięła straszliwie. Na operze mini w ogóle. Sprawdzałem na ffoxie i na operze. Na chrome działa jak jest wyłączone płynne przewijanie. ale nie ma wtedy tego efektu.

Z tego co wiem, JS nie ma takich obsów z wydajnością, chyba gdzieś zamuliłeś kodem.

[torm]

hmmm... testowałem u siebie... i przy normalnym korzystraniu ze strony (FF, Opera) obciążenie procesora to 3-5%... dopiero jak zacząłem machać suwakiem, góra dół... na maxymalnej prędkości to skoczyło do 20%... możliwe, że po prostu przeglądarki pod urządzenia mobilne tak działają... u mnie na laptopie (i7) we wszystkich przeglądarkach chodzi płynnie (FF, Chrome, IE), ale w Operze się już tnie...

[dziadek3D]

jak powiedział kiedyś jeden pracodawca.... zwalniając pracownika... ja do pana pracy nie mam zastrzeżeń.... tylko jak pan wychodzi z mojego gabinetu to przestaję pana widzieć... to jest bardzo denerwujące.... i dlatego niech pan poszuka sobie pracy gdzie indziej.....:))))

[olaf]

Ogólnie bardzo fajnie to wyglada. Plastycznie bardzo się rozwinąłeś, ale jak bym miał wybór to zrobił bym to we flashu, albo kontrolował wyświetlanie obiektów. Przy dwóch planach na core2duo daje rade - trzeci plan to juz slide show. html5 chyba jeszcze ma długą drogę przed sobą i nie mowie tylko o samej technologii ale tez jakości wykonywania kodu js na przegladarkach.

U mnie na lapku - 40-99% cpu. Moze masz za duzo pętli/funkcji pozycjonujących typu. obj.x=X zamiast wyliczać zmienną posX i na koncu pozycjonować? Strzelam.

[torm]

Dziadku, nie bardzo mogę zrozumieć, jak to się ma do tego wszystkiego... ;)

 

ola-f, a zobacz jak Ci to obciąża: http://nikebetterworld.com/about - bo mi podobnie, a jak oni tak to zrobili, to ja już chyba lepiej nie dam rady ;)

[dziadek3D]

oj ma....:)))... kiedyś na boku Ci wyjaśnię....

rozumiem to co piszę, ale jak ktoś nie rozumie, to rozumiem :)))

[kots]

Witam Panowie!

 

http://www.fishy.com.br/ - Fajne, nie? :P Trochę off-top, ale z drugiej strony pasuje "technicznie". :P Ta stronka to dopiero mieli procka. :]

[dziadek3D]

jest dużo bardziej paskudna ... niż obciążająca procesor...:)))

[torm]

sen 15 latka... który przesadził z LSD ;)

[olaf]

jak na nike są dwa plany to ok, jak jest więcej, to nie ma sensu scrollować, przez Ciebie mi się wentylator w lapku włączył ;)

no nic, pomyśleć ze we flashu to by zajęło góra 15% mojego proca...

[kotisded]

torm: ładne to, świetnie się ogląda- bardzo mi się podoba. Po chwili przypadkiem ruszyłem kółkiem i zobaczyłem, że się rusza jak już miałem wyłączać. Machnij może jakąś podpowiedź dla "idiotów" ;)

[torm]

kotisted dzięki... :) jakaś podpowiedź faktycznie się przyda... bo sam nie wiem o co chodzi jak tam wchodzę;)