
kots
Members-
Posts
130 -
Joined
-
Last visited
-
Days Won
1
kots last won the day on January 26 2012
kots had the most liked content!
kots's Achievements
Newbie (1/14)
51
Reputation
-
Macaw - narzędzie do projektowania stron www
kots replied to adek's topic in Aktualności (mam newsa)
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? :)
- 6 replies
-
- javascript
- php
-
(and 1 more)
Tagged with:
-
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. :)
- 6 replies
-
- javascript
- php
-
(and 1 more)
Tagged with:
-
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
- 3 replies
-
- funkcje
- javascript
-
(and 2 more)
Tagged with:
-
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ę. :)