Update projektu jaki-jezyk-programowania.pl

0

Cześć ponownie,

Jakiś czas temu zaprezentowałem wam prototyp projeku jaki-jezyk-programowania.pl i ostatnio zaliczył mały update:

  • przebudowałem i usprawniłem wizard wyboru językah
  • dodałem różne technologie dla danych języków z jakimi można kontynuować naukę
  • dodałem polecane książki do każdej technologii i nie tylko

Podstrony są generowane z templatów (jekyll), a dodanie nowej opcji w wizardzie sprowadza się do:

new Answer('Chciałbym tym zainteresować moje dzieci', 'forkids.png', new Guide('Scratch -> Python or Javascript'))

Także projekt już jest gotowy do łatwego rozbudowywania, modyfikowania i ulepszania treści, więc na tym mogę się skupić.

Po ostatnim feedbacku z waszej strony (mimo, że było dosyć ostro :D) wyciągnąłem jak najwięcej się dało i poszło sporo poprawek do strony. Więc liczę dalej na waszą pomoc :)

To samo tyczy się dodanych polecanych książek. Jeśli uważacie, że na listach powinny się znaleźć jeszcze jakieś inne lub któraś z aktualnych na to miejsce nie zasługuje to dajcie znać.

Poza tym dostałem ostatnio pracę i ruszyłem od nowa z blogiem ;). Opisałem moją drogę od 0 do pierwszej pracy jako pierwszy wpis po przerwie. Może ktoś skorzysta ;)
Zachęcam do komentowania, a nawet podzielenia się swoimi doświadczeniami!

Feedback jak zawsze mile widziany ;)

0

popraw linka do bloga ;)

nie wiem czemu u ciebie ten layout jest nadal taki przytłaczający, ciężki, to wszystko tak muli, te wysuwane pola, czy na blogu w kontakcie te powiadomienia
zobacz np. Material-UI jak tam to wszystko zapierdziela, jest lekkie i czytelne

3

Strona główna

  1. Zmień font. Na Roboto, na Lato... nie wiem - coś innego. Ten aktualny wygląda jak jakiś Comic Sans.

  2. Made with lots of (...) - meh, usuń to; praktycznie każdy to teraz wpisuje, przez co ten tekst stracił całą swoją urokliwość.

  3. Przycisk przyśpiesz wcale nie przyśpiesza animacji, tylko ją kończy ¯_(ツ)_/¯

  4. Twój call to action button (tzn. ten Start) jest okropnie brzydki:
    4a. Porada odnośnie gradientów: https://twitter.com/i/moments/880688233641848832 (jeśli tego nie dostrzegasz, po prostu nie korzystaj z gradientów - to najbezpieczniejsza opcja)
    4b. Jest to jedyny element na stronie mający cień, przez co interfejs sprawia wrażenie niejednolitego.
    (no, prawie jedyny - jeszcze gdzieś tam masz chyba na hoverach czy coś, ale tego nie liczymy, bo pokazują się dopiero po akcji użytkownika.)

  5. Na stronie głównej znajduje się za dużo kolorów i elementów - biały navbar, jakaś czerwona linia pod napisem Wybierz język programowania, czarny przycisk Ankieta, jasnoniebieska informacja o cookies i dodatkowo jeszcze animowany laptop (który sam w sobie jest cool, tak btw.). Za dużo - sprawia to wrażenie okropnie ociężałego i przytłaczającego. Nie możesz jednocześnie zainteresować użytkownika wszystkim.

  6. Otwórz sobie https://jaki-jezyk-programowania.pl/technologie/sql/ i pomniejsz przeglądarkę tak do rozmiarów jakiegoś iPhone'a 5 - obrazek brzydko się skaluje.
    6a. Przyciski dodaj do koszyka sugerują, że to Ty sprzedajesz te książki - lepiej jest zrobić jeden przycisk zobacz w helion.pl, usuwając tym samym potrzebę istnienia zobacz opis. Mniej = lepiej.
    6b. Przycisk Zobacz aktualne promocje jest krzywo wyśrodkowany (czyli formalnie nie jest wyśrodkowany wcale).
    6c. (redakcyjnie) Nie podawaj cen. Ceny się zmienią, artykuł zacznie przekłamywać.
    6d. (redakcyjnie) W jakim celu tak w ogóle linkujesz do Heliona? Myślisz, że ludzie są zbyt głupi, aby samemu sprawdzić? :-P

  7. (wracając do strony głównej) Twoja chmurka języków/technologii jest brzydka. Nie mam pojęcia, co właściwie powoduje takie wrażenie, ale daje o sobie mocno znać.

  8. (redakcyjnie) Dlaczego na stronie jaki język programowania wymieniasz Jekylla oraz HTML/CSS? Nie są to przecież języki programowania.

  9. Na dole strony masz dwa razy Napisz do mnie! - wygląda to komicznie, bo czytając ten drugi tekst (w sensie drugie napisz do mnie) ma się wrażenie, jak gdybyś uważał, że czytelnik przez 0.5s zdążył zapomnieć, że może do Ciebie napisać i masz nieodpartą ochotę mu o tym przypomnieć. Ewentualnie otrzymujesz za mało atencji w życiu. Tak czy siak - zabawnie. Zostaw jedno (to z formularzem) i w tamtym popupie gdzieś dopisz, że jesteś także dostępny pod adresem [email protected].

  10. Formularz kontaktowy ma niepotrzebny margines/padding na dole (pod przyciskiem Wyślij).
    10a. Wydaje mi się, czy input na wpisanie maila jest przekrzywiony? Chrome renderuje go co najmniej podejrzanie.
    10b. width: 97%; na .emailForm input - nie no, tak się nie robi. Zrób sobie row, input po lewej wrzuć do col-xs-6, a ten po prawej do drugiego col-xs-6.
    10c. Okropnie wygląda ten formularz - dlaczego kontrolki nie mają chociażby klas form-control? Wykorzystujesz przecież Bootstrapa.
    10d. Nie krzycz na użytkownika: POLE TWÓJ EMAIL NIE MOŻE BYĆ PUSTE! (błędem jest zarówno użycie capsów, jak i wykrzyknika na końcu).
    10e. Jako oznaczenie błędnego pola, zmiana samego border-color powinna być wystarczająca (Bootstrap zresztą ma do tego odpowiednie klasy) - zmiana dodatkowo background-color czy co tam modyfikujesz powoduje, że błędnie wypełniony formularz wygląda jak spocony święty mikołaj (cały czerwono-biały).
    10f. Po otwarciu tego modala byłoby ładnie, gdyby tło za nim robiło się czarne (tzn. gdyby pojawiał się jakiś overlay).

  11. Twoje czarne przyciski powinny mieć większy padding.
    11a. Napisy zmieniają swój kolor na czerwony na :hoverze. Wygląda to okropnie.
    11b. Napisy podnoszą się na :hoverze czy mi się tylko wydaje?

tl;dr - Bootstrap to nie tylko mechanizm gridów, nie próbuj cały czas wynajdywać koła na nowo (własnych przycisków czy stylów walidacji), dopóki nie jest to coś wizualnie przyjemniejszego dla oka.

Tym niemniej nie uważam, aby było tragicznie - próbuj dalej! ;-)

GitHub

  1. Opisy commitów powinny, jak można się domyślić, coś opisywać - najlepiej wprowadzone zmiany.
    Co Twoim zdaniem opisuje słowo prom (https://github.com/C0deboy/jaki-jezyk-programowania/commit/91f935b9f2ee5ca47adac66d5140b06cb3d882e2)? Już nawet nie chodzi mi o to, że to słowo oznacza coś zupełnie innego (http://www.dictionary.com/browse/prom) - można by ten commit opisać Fixing redirection in file foo.html i każdy by wiedział, o co chodzi. prom nikomu nic nie mówi (no może poza Tobą, ale zobaczymy za miesiąc).

  2. static-pages-generator-jekyll to okropnie długa nazwa jak na katalog.

  3. Licence -> License.

  4. Po ci Ci plik CNAME w repozytorium?

  5. Skompilowanych/wygenerowanych plików nie powinieneś wrzucać do repozytorium (tak, mówię m.in. o /static-pages-generator-jekyll/_site/).

Podsumowanie

Tak jak napisałem: nie ma źle :-) - co nie oznacza, że jest mega fajowo i wgl i można stronę zostawić w takim stanie, w jakim jest. Tzn. możesz, albo możesz nie, jesteś wolnym człowiekiem ¯_(ツ)_/¯

Rzeczy, które tutaj wypunktowałem, rzucają się w oczy najbardziej (przynajmniej mi), lecz nie są jedynymi, do których można się przyczepić - tym niemniej ich poprawa znacznie polepszy wizualny odbiór Twojej strony, a tym samym sprawi, że więcej ludzi będzie chciało przeczytać jej treść.

Pamiętaj: z punktu widzenia użytkownika, UI to praktycznie 3/4 strony. A w Twoim przypadku UI stanowi tak właściwie 4/4 strony, bo żadnej funkcjonalności nie zanotowałem (całość jest statyczna).

0

jak pisałem, ja bym to ogarnął w material design, schludnie , prosto, czysto i od razu przyszłościowo pod apki w sam raz

0

@Patryk27:
Dzięki za spory feedback. Na szybko:
6a. Niestety to są gotowe pluginy od Heliona, tak mi było najszybciej to zaimplementować.
6c. Znów - część gotowego plugina.
6d. Słyszałeś kiedyś o partnerstwie?

  1. Zawieram większość technologii. Równie dobrze mógłbyś zapytać czemu tam jest Angular czy Unity, jak to nie są języki programowania.
  2. Przecież to są dwie osobne metody do kontaktu - przez formularz i klienta pocztowego na pc...
  3. Tam się pojawiają komunikaty...

Github:

  1. Staram się tak robić, ale takie nazwy pojawiają się gdy dodaje cos nie ważnego, lub chwilowego - w tym przypadku link do promocji. (Wykorzystuję GH Pages, wiec wszystkie małe poprawki tu wlatują)
  2. Jaki to jest problem? Opisuje swoją funkcję i jest to wykorzystywane tylko w development.
  3. Znowu... Projekt jest hostowany na GH Pages.

Z resztą poniekąd się zgadzam, ale przysiądę do tego jutro - dokładniej - i zobaczymy co da się zrobić ;) Rozumiem twój przekaz, ale żaden ze mnie UI designer :D No ale zrobię co w mojej mocy.

0

@Patryk27:

  1. Mi się font Ubuntu całkiem podoba, nawet na blogu ktoś to chwalił, no ale Lato też jest całkiem przyjemne.
  2. Urokliwość? XD Daj spokój. Nie przeszkadza mi to, że mam tekst, który można spotkać WSZĘDZIE. Chociaż ja mało razy widziałem coś podobnego. Nie licząc made with Unity :D
  3. ??? A co ma robić? Ktoś chce na szybko przelecieć przez języki to ma do tego przycisk. Nie musi czekać aż animację się skończą.
  4. Okropnie brzydki? XD Czy ty nie przesadzasz?
    4.b Bo to jest najważniejszy przycisk na stronie i ma się wyróżniać... Mam go zmieszać z tymi z kontaktu? :O
  5. Bo skalowanie jest obsługiwane przez JS'a... Odśwież stronę i już jest ok...
  6. Ja też nie mam pojęcia jak to naprawić...

Resztę postaram się poprawić, ale tak jak mówiłem, żaden ze mnie UI designer, więc się nie zdziwię jak poprawię i znów nie będzie LEKKOŚCI XXI WIEKU

0

@Patryk27: @czysteskarpety:

Poprawiłem nieco UI. Nie jestem tylko pewny czy "chmurka technologii" zmieniona na lepsze? Nie wiem czy jestem przekonany do tych kafelków :D Dajcie znać co myślicie.

0

no, troche "lżej" jest :)

1

Niektóre moje uwagi powyżej (w stylu numeru trzeciego) nadal są aktywne, więc nie będę ich wypisywał ponownie:

Strona główna

  1. Jedne teksty na stronie mają cień, inne nie - zdaje się być to losowe.

  2. Hover na tekście Jak to działa? aktywowany jest nawet wtedy, gdy kursor nie znajduje się nad tym tekstem. Plus, z punktu widzenia UX, hover z ważnymi informacjami jest na ogół średnim wyborem, ponieważ jest mało czytelny na telefonach oraz nie wszyscy użytkownicy w ogóle rozumieją, co zrobić, aby hover się pojawił.

  3. (redakcyjnie) Jeśli masz dodatkowe pytania, warto przejrzeć FAQ, gdzie zebrałem kilka fundamentalnych pytań, lub napisz do mnie. - coś mi nie styka w głowie, gdy zestawiasz warto przejrzeć (bezokolicznik) z napisz (czasownik). Lepiej by imho brzmiało: Jeśli masz dodatkowe pytania, przejrzyj FAQ, gdzie znajdziesz odpowiedzi na kilka fundamentalnych pytań, lub napisz do mnie.

** https://jaki-jezyk-programowania.pl/start/ **

  1. Najedź kursorem na Mam pomysł na projekt. Zjedź paręnaście pikseli poniżej tego niebieskiego boxa. Dlaczego hover jest nadal aktywny?

  2. Pozbądź się [Backspace] oraz [Esc], dodaj za to obsługę dla przycisków wstecz / dalej w przeglądarce (history api).

  3. (redakcyjnie) W pierwszym menu (tam, gdzie są Chciałbym tym zainteresować swoje dzieci itd.) nie ma nigdzie żadnych wykrzykników, lecz po wybraniu menu Mam pomysł na projekt postanawiasz jednak na użytkownika krzyczeć - dlaczego?

  4. (redakcyjnie) W menu Mam pomysł na projekt ostatni wpis brzmi Założyć bloga - dlaczego nie samo Bloga, podobnie jak nie masz Stworzyć grę, tylko samą Grę?

  5. (redakcyjnie) Gra mobilna nie jest do końca odpowiedzią na pytanie Na jaką platformę?. Tzn. jest sensowna, natomiast przypuszczam, że przeciętny użytkownik nie-znawca wolałby mieć odpowiedzi rodzaju Na komputery, Na telefony, W przeglądarce.

  6. W menu Sugestie usuń cień spod lóg* języków, technologii, whatever. Wygląda brzydko i sprawia, że strona jest mniej czytelna (użytkownik musi włożyć więcej wysiłku w jej analizę, co w żadnym stopniu nie jest pożądane).

** Inne **

  1. https://jaki-jezyk-programowania.pl/start/ - połączenie jest bezpiecznie, lecz już tutaj nie: https://jaki-jezyk-programowania.pl/technologie/java/.

** Podsumowanie **

Jeśli o mnie chodzi, nic się nie zmieniło - nadal design jest taki sobie i, szczerze, na mnie nie robi wrażenia :-P

Ponadto, personalnie:

  1. Nie podoba mi się Twój styl pisania (wykorzystywanie słów z gatunku topka czy określeń Java abstrahuje od sprzętowych detalów).

  2. Uważam, że Twoje artykuły nie są prawidłowe wyważone językowo względem odbiorców. Skoro z jednej strony Twoją grupą docelową są osoby nieznające się w ogóle na programowaniu, dlaczego np.:
    2a. tutaj przywołujesz indeks TIOBE? Komu to cokolwiek powie?
    2b. tutaj piszesz C# jest ścisłe zintegrowany z platformą .NET, która jest zarówno frameworkiem jak i środowiskiem uruchomieniowym. - czy ktokolwiek mający pierwszy raz kontakt z programowaniem ma szansę na zrozumienie tego zdania?

  3. Literówki również są na duży minus (Ranking spectrum daję jej miejsce 3, jednak nie mal na równi z topką - niemal itd.).

* chyba tak to się odmienia

0

@Patryk27:

  1. Losowe? Tylko headery mają cień + napis, który stracił całą swoją urokliwość, bo jest wszędzie wykorzystywany

/start/

  2. Nie rozumiem dlaczego miałbym to zrobić, według mnie to jest świetna opcja i zawsze pozostawia opcję cofnięcia się do strony głównej czy czegokolwiek innego, zamiast zapętlić się w poprzednich pytaniach wizarda. Od tego właśnie jest [backspace]
  3. +/-
  4. Gra mobilna ma więcej sensu ponieważ "mobilna" nie ogranicza się tylko do telefonów. Poza tym nie uważam, żeby ktoś nie wiedział co to znaczy gra/aplikacja mobilna... Przecież takie określenie jest stosowane wszędzie.

Inne

  1. Ta... pluginy Heliona pobierają zdjęcia po http ¯_(ツ)_/¯

Podsumowanie:
Przykro mi, że tak uważasz, ale starałem się jak mogłem. Poprawiłem większość z twoich wcześniejszych sugestii . Poza tym tak jak mówiłem, żaden ze mnie UI designer i aktualnie nie potrafię tego zrobić lepiej.

Personalnie:
1, 2, 3. Zgodzę się z tym. Ciężko jednak w pojedynkę ogarnąć taką ilość materiału, aby była odpowiednio wyważona, dobrze stylistycznie napisana, pozbawiona błędów, no i wręcz idealna. Przyznaję, że rozpoczynając ten projekt "porwałem się z motyką na słońce", tym bardziej, że zacząłem go robić praktycznie bez żadnego doświadczenia, ale jak widać cały czas staram się go dopracowywać. Dlatego cenne są dla mnie wszystkie uwagi. Szkoda, że tym razem jest ich tak mało (porównując do wcześniejszego wątku).

1

co byśmy nie napisali to uważam, że masz skilla i z pracą problemu nie ma więc to i tak nie ma znaczenia co ci jakieś anonimy na forum napiszą :) a punkt widzenia zmienia się z czasem, ja sam uważam, że moje projekty są gówniane, a kiedyś mi się podobały, ale to normalne jak się rozwijasz i widzisz z biegiem czasu pewne rzeczy inaczej, jak dla mnie to klep swoje i tyle

0

Tak tylko chciałem wspomnieć, że kolejne osoby w feedbacku mówią mi, że stronka jest bardzo przyjemna dla oka. Padło nawet określenie "strona piekielnie miła dla oka" :D Więc może to jest tak, że osoby nie mające styczności z web desing nie są aż tak przewrażliwieni na tym punkcie? Nie twierdzę, że nie macie racji czy coś, ale czemu miałbym przestać słuchać uwag odnośnie UI kogokolwiek, kto mówi, że Twój interfejs jest przejrzysty i przyjemny ? Nie uważam, że strona jest przepiękna i przejrzysta, ale też na pewno nie uważam, że jest tragiczna - co potwierdza się w feedbacku.

1 użytkowników online, w tym zalogowanych: 0, gości: 1