kots

Myślę, że to narzędzie może być przydatne dla designerów. Mogą projektować strony dokładnie tak jak mają wyglądać w przeglądarce bez przekłamań z PS czy innego programy do edycji grafiki. Łatwiej to później przekuć w "kod produkcyjny", tj. taki który później łatwo modyfikować w razie dodawania nowych modułów do strony, kompresować, bezboleśnie aktualizować. @olaf "podejrzewam że każda większa firma ma już własne tego typu rozwiązanie osadzone gdzieś w pipelinie" Być może. Jednak osobiście nie sądzę, że tak jest.Jest to zbyt ślamazarne rozwiązanie, zwłaszcza dla średniej/dużej wielkości projektów, gdzie pracuje cała drużyna. Sass, Less, Stylus czy inny preprocessor to obecnie podstawa. Połączone z narzędziem takim jak Grunt czy Gulp oferują prawdziwą MOC. Mój preferowany zestaw narzędzi to Sass + Compass/Bourbon + Grunt (odnośnie CSS). Ponadto proszę pamiętać o czymś takim: Flash. Potężne narzędzie o bardzo rozbudowanym GUI. Tylko programiści potrafią wycisnąć z niego 110%. ;) Pewne rzeczy łatwiej ugryźć od strony kodu IMO. Linki: http://sass-lang.com/ http://lesscss.org/ http://learnboost.github.io/stylus/ http://gruntjs.com/

MEGA! Co za niesamowity, mały film. Jestem pod wrażeniem!

Hmm. Jeśli można wiedzieć: w jakim celu chcesz podawać php informację o tym czy JS jest dostępny czy też nie? :)

Witaj QubisieQ, możesz np. dodać klasę "jsOff" na body a później natychmiast ją usunąć za pomocą JS. Przykładowy kod w jQ: $('body').removeClass('jsOff'); To wszystko. :)

To ja też się podczepię pod tę dyskusję. :P Zgadza się, że JavaScript (czyli w zasadzie ECMAScript: http://en.wikipedia.org/wiki/ECMA_Script) jest trochę starszy od Flasha. Co więcej ActionScript (czyli język skryptowy Flasha) pochodzi od JS. Są bardzo podobne do siebie jeżeli chodzi o strukturę. Taka ciekawostka! Te fakty nie mają jednak wielkiego ponieważ bardzo dużo się zmieniło od tych zamierzchłych czasów. @ola-f "do materiałów interaktywnych się nie nadaje" [chodzi chyba o cały HTML 5 tutaj :) ] Nadaje, nadaje. To wszystko jeszcze raczkuje i zobaczymy co z tego (HTML 5) wyrośnie. Rokuje dobrze. Wielu ludzi robi świetne rzeczy w JS i nie zapowiada się na to, że nagle skończą. A że coś chodzi wolno, "muli" – proszę wziąć pod uwagę, że w sporej części to wynika z niewiedzy programisty, lub często "programisty". Naprawdę. Druga sprawa, że by robić wydajne rzeczy w JS trzeba mieć niezłą wiedzę. Nie ma łatwo. Za Flashem nie ma co płakać moim zdaniem. Było, minęło (jeżeli chodzi o strony internetowe, nie o gry i aplikacje). Z resztą i na HTML też kiedyś przyjdzie czas, trzeba się będzie przestawić na coś nowego. Jak zawsze. @adek Jeżeli chodzi o ten googlowy Dart, to raczej ma konkurować z JS po stronie serwera (http://nodejs.org/). O ile mi wiadomo nic nie zapowiada, że Google próbuje po cichu zamienić JavaScript na Dart po stronie klienta. ;) I jeszcze dodam, że miałem zawsze problem by nauczyć się Flasha. Może to przez interfejs, który mnie odstraszał(!). Odwlekałem Flashowe tutoriale i ani się spostrzegłem, a zacząłem coraz lepiej radzić sobie z HTML, CSS i JS. Dziwne. ;) http://media.smashingmagazine.com/wp-content/uploads/2011/01/smashing_39_big.png

@adek – To głównie zależy od zawartości strony, im bardziej napakowana treścią (np. Facebook :) ), tym większe będzie obciążenie procka no i będą przycinki. Da się jeszcze zoptymalizować ten skrypt (który i tak just bardzo prosty), ale cudów bym się nie spodziewał. Niestety. @ola-f – Dzięki. Owszem, zabija. Kropka. :) Wiedziałem od początku, że tak będzie. :P Gdyby myśleć o jakimś poważnym wykorzystaniu tego skryptu, to wypadałoby zoptymalizować kod obracanej treść (maksymalnie prosty) oraz zredukować rozdzielczość na ile to tylko możliwe. Na urządzeniach mobilnych w ogóle bym zrezygnował z takich bajerów. Strona mobilna ma, w moim rozumieniu, działać na maksymalnej ilości możliwych sprzętów. Ale to takie co by było gdyby. :)

Cześć, właśnie napisałem taki głupawy skrypt: http://animacjejs.pl/spin/ i chciałem się nim podzielić z resztą świata. ;) Uwaga: trzeba mieć nową przeglądarkę. :P

To nie jest film o tym co nas czeka, a o tym co jest.

Witaj QbisieQ, Miałeś błędzik w deklaracji zmiennej w funkcji. Teraz jest dobrze: <br /> <br /> <br /> function setTheme (theme)<br /> {<br /> if(theme == "red")<br /> document.write('<link rel="stylesheet" href="'+theme+'.css" type="text/css">');<br /> else if(theme == "green")<br /> document.write('<link rel="stylesheet" href="'+theme+'.css" type="text/css">');<br /> else<br /> document.write('<link rel="stylesheet" href="green.css" type="text/css">');<br /> }<br /> <br /> setTheme("");<br /> <br /> Dodatkow sugeruję nie używać "==", a "===". "Podwójne porównanie" jest bardziej podatne na błędy: http://www.impressivewebs.com/why-use-triple-equals-javascipt/. function setTheme (theme) { if(theme === "red") document.write(''); else if(theme === "green") document.write(''); else document.write(''); } setTheme(""); Pozdrawiam, Artur

Popraw tylko te zmultiplikowane id żeby się któremuś zainteresowanemu stronka nie rozjechała. :P Większość przeglądarek powinna to ogarnąć, ale mogą być problemy. Serio, serio. A co do kodu - wiem, że stać Cię na więcej. Nie usprawiedliwiaj się tylko do roboty. ;)

Hej Torm! Wizualnie jest spoko. :) Przydałoby się popracować nad tym o czym wspomniał @adek Nawigacja strzałkami oraz "scrollem" w myszce byłaby naprawdę fajna. A co do kodu. :) Dalej operujesz wyłącznie divami co nie jest dobrym rozwiązaniem. Przynajmniej logo mogłoby być w : TOMB - Tomasz Bieńkowski Brakuje też , atrybuty alt w są puste. Tzn. - ok. - Twoja sprawa. Jeśli chcesz utrudnić wyszukiwarkom robotę... ;) Używasz też kilku identyfikatorów o tej samej nazwie (np. id="img1" powtarza się kilka razy). TO BŁĄD. MOŻE PROWADZIĆ DO NIEPOPRAWNEGO DZIAŁANIA STRONY. Używaj klas w takich przypadkach. W CSS często używasz np: "div.logo", "ul.menu", itp. Jedyne co "div" robi w "div.klasa" to spowalnianie działania selektora. Oczywiście czasami zachodzi potrzeba rozróżnienia elementów np.: "div.off" i "section.off" - klasa może oznaczać co innego w takim przypadku. Nie ma to jednak miejsca w przypadku Twojej strony w związku z tym polecam poprawę selektorów. Zupełnym nonsensem jest używanie np. "li#tel" zamiast po prostu "#tel". IDENTYFIKATOR MOŻE BYĆ TYLKO JEDEN NA DANEJ STRONIE, ograniczanie go selektorem elementu nie ma uzasadnienia. Na koniec JS. Dwie sprawy, które od razu rzucają się w oczy. Nie keszujesz obiektów jQuery ($) co wpływa negatywnie na wydajność skryptu. Za każdym razem gdy używasz $('#drukContainer'), a używasz wieeeele razy, jQuery będzie wykonywało nowy obiekt (nie, nie sprowadza się to tylko do wyszukania elementu tak jak w CSS :P). Stąd najlepszym rozwiązaniem jest "zapisanie" obiektu w zmiennej np.: var $internetContainer = $('#internetContainer'); // później możesz sobie używać (a nie wytwarzać od nowa) zapisany w zmiennej element np: if($internetContainer.hasClass('deactive')){ $internetContainer.animate({ marginLeft: '269px' }, 1000, 'easeInQuint', function() { // Animation complete. }); $internetContainer.removeClass('deactive'); $internetContainer.addClass('active'); } } Druga sprawa to używanie oldschoolwego onclick w HTMLu. :) Rozumiem - działa, aaaale... Można to zrobić lepiej (zwłaszcza jeśli masz jQuery na pokładzie). :) Weźmy np.: </pre> <ul class="imgChanger"> 1 2 3 4 5 6 7 </ul Zamiast tego sugeruję odkurzyć HTML: </pre> <ul class="imgChanger"> 1 2 3 4 5 6 7 </ul A w JS dodać: // proszę zwrócić uwagę: inaczej niż w CSS ul.imgChanger zadziała szybciej niż .imgChanger - taki smaczek :) // http://hungred.com/useful-information/jquery-optimization-tips-and-tricks/ // find jest duuużo szybsze niż $('ul.imgChanger li') // http://api.jquery.com/category/traversing/ // używam alternatywy dla .click - efekt ten sam // http://api.jquery.com/on/ $('ul.imgChanger').find('li').on('click', function() { // $(this) = element który został kliknięty // $(this).index() = numer elementu (od góry) // UWAGA: pierwszy element = 0, drugi = 1, trzeci = 2, itd. // dlatego dodaję 1 - w ten sposób będzie to zgodne z nazewnictwem które przyjąłeś shiftImageInternet($(this).index()+1); }); Nie będę się już więcej rozwlekał. ;) Podsumowując: projekt fajny, kod (zwłaszcza HTML) - niestety słabo. Pozdrawiam, Artur

Hej! Projekt mi się całkiem podoba, eksponuje fotografie, które są ŚWIETNE. Temat kodu sobie odpuszczę. Takie widoki przyprawiają mnie, front-end developera, o palpitacje serca. ;) Jeżeli chodzi o to by link (np. "przyroda" w portfolio) "przewijał" bezpośrednio na wysokość działu ze zdjęciami: należy dodać na elemencie otaczającym dział (lub znajdującym się na tej wysokości) identyfikator np.: id="portfolio-przyroda". Następnie link kierujący do wspomnianego działu zmodyfikować w następujący sposób PRZYRODA No i załatwione. Chyba, że miałeś coś innego na myśli @dziadek3D? :) Pozdrawiam, Artur

Witam! Projekt generalnie mi się podoba. Jest prosto, do rzeczy, czuć siatkę. Daleko od ideału, ale uderza w przyjazne mi estetycznie obszary. Deseń w tle możesz wymienić, czy nie pochodzi on z Mac OS Lion? Poza tym zbyt długo się ładuje (tło). Za dużo waży. Kropka. Możesz przyśpieszyć przewijanie slajdów. Zdają się przesuwać trochę zbyt leniwie. Jeżeli chodzi o kod to niestety jest słabo. Strefa treści ("content") ma zablokowaną wysokość, powinna się rozciągać w zależności od ilości tekstu (obrazków, list, etc.). Rozumiem, że masz tam zamiar zamieścić krótką notatkę o sobie jednak jest to niedopuszczalne jeżeli piszesz kod dla kogoś innego. Nadużywasz elementów , polegasz w dużej mierze na identyfikatorach (co prawda w projekcie tej skali ma to średnie znaczenie w nieco większych to byłby strzał w stopę). Poczytaj sobie o tagach w HTMLu: http://html5doctor.com/ Pozdrawiam, Artur

To jeszcze chmury w CSS 3: http://www.clicktorelease.com/code/css3dclouds/ :)

http://playpit.kowareru.com/ - Takie tam demka. Przyjemne dla oka jak sądzę. :)

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. :]

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 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. :) A architekci? Projektanci przemysłowi? :) Kiedyś usłyszałem fajne zdanie na ten temat: "to taka politechnika projektowania..."

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

A ja mam stronę. :] Ale co z tego? Ola-f i tak bardziej zaprawiony w bojach ode mnie! :) Poza tym - taki już los freelancerów, że nie mają czasu zająć się swoją stroną. Są ważniejsze rzeczy. :P

Na ten czas wiele właściwości (np. animacje w CSS) musi posiadać prefiksy. Będą to: -moz- dla Firefoxa (silnik Mozilla)), -webkit- dla Safari, Chrome, sporo przeglądarek i niektórych aplikacji hula na silniku Webkit, -ms- dla nowych przeglądarek Microsoftu (silnik Trident), -o- Opera (silnik Presto). Zawsze na końcu powinno się dodawać "normalną" właściwość, bez prefiksu. Te przedrostki to rzecz tymczasowa, zawsze znikają po pewnym czasie. Tak. To jest uciążliwe - zgadzam się. Gdzie tu są korzyści? Można używać nowych rzeczy (jak np. gradienty) z wyprzedzeniem, promować i testować nowe technologie. Poza tym (odnośnie gradientu generowanego przez CSS) posiada on unikalną właściwość dostosowywania swoich rozmiarów do elementu, który go używa. Te gradienty to znacznie ciekawsza rzecz niż mogłoby się wydawać: http://attasi.com/labs/picsselz/ Ta animacja jest oparta na gradientach. Nie ma tam żadnej bitmapy, a, powtarzam, jedynie gradienty. Należy to traktować bardziej jako eksperyment. Poziom komplikacji pinezkowany przez dziadka3d osiąga tam zenit. :) Zgadzam się po części. Dla mnie strona to przede wszystkim treść. Z reguły odwiedzamy strony by czegoś się dowiedzieć, nauczyć. Zły projekt, zdarza się nie rzadko, potrafi to skutecznie utrudnić. Zły kod również. Chociaż fakt - tylko ten naprawdę zły, wiele potknięć przechodzi niezauważone (zwłaszcza w HTMLu). Być może to jeden z atutów? Zgadzam się, że narzędzie nie ma znaczenia (byle działało oczywiście). Inna sprawa to jak to narzędzie jest użyte! Najważniejszy jest tutaj, jak sądzę, balans. Dobrze jeśli ciekawa treść otoczona jest przemyślanym interfejsem, typografią na wysokim poziome, ciekawą grafiką oraz dobrej jakości kodem. To jest to.

Przecinek oznacza, że wybieram dwie rzeczy za jednym zamachem. Przykładowo: body, html, p, div { jakiś: kod } "obsłuży" 4 elementy za jednym zamachem.

@QbisieQ - Tak. TO CSS. :) http://pastebin.com/kU1f4Yv7 - sprawdź wiersz nr 17 :)

@QbisieQ html, body {min-height: 100%} powinno załatwić sprawę. ;) @dziadek3D "najlepiej w analogowym Html-u " - Tak. Zdecydowanie tak. Nie ma to jak ręcznie rzeźbiony kod. :P

W miarę możliwości zapisuj wszystko w jednym, skompresowanym, zewnętrznym CSSie. Teoretycznie osadzanie stylów w "head" strony jest bardziej wydajne, pomyśl jednak co się stanie kiedy będziesz miał np. 5 stron. Każda z nich będzie miała skopiowane te same style x5. Chcąc zmienić style dla np. list numerowanych musiałbyś zmieniać kod dla każdej ze stron oddzielnie (x5). :) W przypadku kiedy każda ze stron korzysta z tego samego arkuszu wszystko nabiera sensu: zmieniasz styl dla "p" czy tam "img" i działa to globalnie (każda "podpięta" strona zmienia wygląd). Niesamowita wygoda, czyż nie? :) To był pierwszy benefit. Po drugie przeglądarki "keszują" CSS, skrypty i obrazki, dzięki czemu nie ładują się one od nowa, a z pamięci podręcznej tym samym odciążając serwer. To dlatego czasami musisz "wyczyścić kesz" by zobaczyć zmiany, których dokonałeś. To samo dotyczy obrazków. Jeśli chcesz oszczędzać, staraj się grupować obrazki w sprite'y. Tak jak w grach 2d: http://goo.gl/laAB3 A tutaj sprite onetu: http://goo.gl/sbrDp Nie należy tutaj przesadzać bo można się zamęczyć. ;) Warto jedna pogrupwać wszystkie ikony i małe rzeczy w sprite: zamiast ściągać ich np. 20, strona wykona tylko jedno zapytanie do serwera tym samym znacznie przyśpieszając ładowanie się strony.

A poza tym @ola-f generalnie dobrze prawi. :)