Sesja idzie, człowiek ma coraz więcej czasu, to też popada w filozoficzny nastrój i częściej spogląda w gwiazdy. Ten trend nie ominął także i mnie. Spoglądałem zatem w gwiazdy, aż w końcu przypomniało mi się, że swego czasu widziałem gwiazdę w Internecie?
Tym sposobem powróciłem do dawno odwiedzonego bloga Adriana Bieniasa. Jako stetryczały starzec umysłowy postanowiłem pogderać jak zawsze.
- Widać, że autor postanowił postawić na silną markę – siebie samego. W chwili obecnej takie promowanie nazwiska może być jeszcze bardziej widowiskowego, dzięki nowej domenie
.guru.AdrianBienias.guruzdecydowanie wygląda ładniej. - Nie powitał mnie wkurzający komunikat o cookies. Prawdę powiedziawszy komunikat jest tak mało denerwujący, że przez dłuższą chwilę myślałem, że go nie ma. Ale jest – w stopce, tam, gdzie powinien być.
- Skąd skojarzenie z gwiazdami? Wystarczy spojrzeć w tło – wspaniała galaktyka. Oczywista aluzja do autora bloga, który – jak widać jest gwiazdorskim e-biznesmenem i dobrym grafikiem ery Web 2.0 – mamy gradienty, refleksy w kawie, zdjęcia przypięte spinaczem? Jednym słowem: wszystkie niezbędne elementy.
- Strona jakich dużo w Sieci – krótkie, acz treściwe porady webmasterskie (nawet mi się zdarzy skrobnąć takie czasami!).
-
Jednakowoż nie byłbym sobą, gdybym tej założonej z góry treściwości nie sprawdził. Na próbkę wybrałem nieśmiertelny formularz kontaktowy w PHP. Wówczas odkryłem, że cała ta strona jest de facto video blogiem. Filmik o formularzu trwa prawie pół godziny – wydaje mi się, że ciut za długo. No ok, ale pooglądam? I co widzę?
- Bootstrap atakuje – w końcu tworzymy prosty formularz kontaktowy. Otóż nie – Bootstrap i prostota są zwalczającymi się od wieków antagonizmami i tłukę to od dawna. Albo tradycyjne OOCSS, albo sensowny BEM. Natomiast tej dziwnej hybrydzie od Twittera mówię twarde i zdecydowane raczej nie!
- Ale wracając do filmiku – mowa jest o drugim filmiku, mówiącym o zakładaniu konta hostingowego. Tutaj wręcz się prosi, żeby do filmiku dodać odpowiednią notkę, odsyłającą do wspomnianego poradnika.
- Ok, lecimy dalej: tutek jest o formularzu w PHP i autor nawet już wspomniał, że potrzebujemy serwera HTTP, jednak i tak zamienia URI
//nahttp://, bo w Windowsie stwarza to problemy? Ale nie na serwerze a tam będzie to odpalane. Całkowicie nie rozumiem tej zmiany – to wszak rozwiązanie tymczasowego pseudoproblemu. - Natomiast przy wklejaniu adresu pluginu jQuery Validation, autor zupełnie nie zwraca uwagi na to, że tym samym strona będzie ciągnąć skrypty z dwóch różnych CDN. To najprawdopodobniej wprowadzi opóźnienie wczytania strony.
- Wcięcia w kodzie – cóż, przy wklejeniu zajęłoby raptem z kilka sekund odpowiednie stabowanie całości (w Sublime są to aż 2 sekundy).
- Błąd z
textarea[rows]jest niepotrzebny. Taka wtopa IMO powinna zostać wycięta i zastąpiona poprawnym fragmentem. Chyba, że tu chodzi o jakiś efekt psychologiczny (Autor też człowiek? Naturalność sytuacji?) – jednak czy to aby nie za sprytne. - Duży plus za zwrócenie uwagi na
label! - Jednakże brakuje pól formularzy z HTML5 – jeśli korzystamy z HTML5 Boilerplate, to używajmy go po coś.
- Mieszanie polskich i angielskich nazw w kodzie (
#formularzKontaktowyvs.inputSubject) – trochę konsekwencji! - jQuery Validation Plugin, opisywany w tutorialu, jest w stanie walidować formularz dzięki atrybutom z HTML5 – w wypadku przedstawionego formularza jest to rozwiązanie o niebo lepsze od customowych zasad. Czemu? Bo działa bez JS. No i nie wymaga dodatkowego nakładu pracy.
Nie wiem czy można
w kontekście odwołania do zewnętrznego pliku wform[action]podminowuje wiarę w wiedzę autora. Wszak jest to jedna z podstawowych kwestii związanych z formularzami – takie rzeczy autor winien sprawdzić przed przystąpieniem do tworzenia zasobu.- Co mamy po stronie PHP? Skopiowany z manuala prymitywny przykład wykorzystania
mail. Ale to jeszcze nie jest najgorsze – po stronie PHP NIE MA JAKIEJKOLWIEK WALIDACJI!!! To nawet nie jest ignoracja – to jest grzech przeciwko Internetowi. userowi się nie ufa. To podstawowa mantra webmastera. Amen - Czego brakuje – oprócz walidacji? IMO wartałoby wspomnieć o PHPMailerze, który rozwiązuje 90% problemów, które mogą wystąpić przy zabawie mailami w PHP. Byłoby to od razu doskonałym wstępem do Composera. I zanim mi ktoś zarzuci, że wszak to miał być zwykły tutek o prostym formularzu – tak się właśnie powinno uczyć PHP. Brakuje mi solidnej treści po polsku o obiektowym, użytecznym PHP.
- Tyle o warstwie treściowej. Przejdźmy do techniczniejszych szczegółów. Z czystej ciekawości przeszedłem do podstrony Kontakt, aby sprawdzić czy i tutaj autor użył
label. Niestety, tutaj go już nie ma a to podstawowy błąd dostępności. Dodatkowo CAPTCHA jest tak prosta do złamania, że można by ją po prostu wsadzać do pola jako domyślną wartość. - Jeśli jeszcze górne menu jest widoczne przy TAB-owaniu, tak już boczne i większość treści nie jest. To drugi z podstawowych błędów dostępności. A wystarczyło przepisać style z
:hoverna:focus. - Zajrzałem w zakładkę O mnie. W oczy – oprócz nieprzeliczonej liczby znanych autorowi programów graficznych – rzuciła mi się w oczy ikonka CSS. Tak, to ikonka z W3Schools?
- Ok, lecimy po kodzie. Na dobry początek – walidator. Co prawda niby tylko 4 błędy, ale jak widać ostatni błąd zabił walidator.
- Outline jest całkowicie płaski i pozbawiony sensu (np czemu wyszukiwarka jest podsekcją sekcji o stronach ze zdjęciami royalty free?).
- Szybkość wczytywania nie jest najlepsza – wypadałoby poprawić, zwłaszcza na mobilnych.
- W kodzie oczywiście stary, dobry HTML5, który czasami dostaje schizofrenii i twierdzi, że ma X-a. Albo wszędzie wciskamy dodatkowy, niepotrzebny slash, albo nigdzie – bądźmy konsekwentni.
- Mamy określony język strony – za to plus.
[rel^=shortcut]to wymysł IE. Najlepiej po prostu mieć plik/favicon.ico.- Mamy tu marnotrawienie transferu przez niepotrzebne
[type]dla skryptów i stylów. - Wiele za wiele CSS i JS, który dodatkowo jest ładowany w
head, zamiast na dole strony. -
/* Theme Name: Responsive Theme Adrian Bienias Blog Author: Adrian Bienias Author URI: http://adrianbienias.pl/ Version: 4.0 */Zapewne to bannerowy komentarz z głównego arkusza, czyż nie? Otóż jednak nie – to? cała zawartość jednego z arkuszy. Jeśli to pozostałość z przyzwyczajeń preprocesorowych, to trzeba zwrócić uwagę na jedną rzecz: preprocesory działają przed publikacją, żeby nie produkować takich krzaków.
- Całość stoi na Bootstrapie, co oznacza tyle, że kod HTML na pewno będzie udziwniony.
-
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a>Dokładnie to miałem na myśli.
a.brandwinno być głównym nagłówkiem strony. No i logo nie powinno mieć w[alt]określenia logo. Opis obrazka powinien opisywać jego funkcję a nie to, czym jest.- W HTML-u 5 divitis to jeszcze gorsze przewinienie. Mamy tyle semantycznych elementów a i tak wszędzie dostajemy nicniemówiący kontener.
-
<div class="navbar-margin-bottom"></div>Pusty element = zbędny element. Do takich rzeczy od dobrych 5 lat służą pseudoelementy. Ten element jest dodatkowo całkowicie bezsensowny, gdyż nawet nie ma przypisanych stylów.
-
<div id="facebook"><a href="https://www.facebook.com/pages/Adrian-Bienias/311593262189052" target="_blank"></a></div>Pusty element klikalny to całkowity bezsens. Kolejna osoba nieszanująca niepełnosprawnych. Tutaj powinien zostać zastosowany image replacement. Dodatkowo grzech
[target]u, pomijając fakt, że socjalki to jednak lista. - W wyszukiwarce brak
label(które można ukryć przez technikę.visuallyhidden) – podstawowy błąd dostępności. -
<button type="submit" id="submit" class="btn"><span class="icon-search"></span></button>Kolejny pusty element klikalny. A wystarczy znać podstawy ARIA, by wiedzieć jak ładnie połączyć ikonkę z dostępnym opisem (
[aria-label]lub.visuallyhidden). - Wyszukiwarka to pierwszy nagłówek na stronie i od razu otrzymujemy
h3. To tak jakby zacząć tytułować książkę od podtytułu śródsekcji przedmowy. -
<div class="clear"></div>To już jest po prostu nieznajomość narzędzi, z których się korzysta. Bootstrap ma wbudowaną klasę
.clearfix, żeby nie używać takich potworków. - W artykułach brakuje microdata/mikroformatów.
- Tagi to lista. Przecinki i umieszcenie w jednej linijce można spokojnie osiągnąć w CSS.
-
<a href="http://adrianbienias.pl/premiera-kursu-php-od-podstaw/"></p>To chyba jakaś niedokończona rzecz.
-
<div>Przejdź do artykułu</div>Brawa za prawidłowe wykorzystanie niełamliwej spacji. Szkoda, że ta perełka gubi się wśród masakrycznego kodu przycisku.
- Przez cały kod de facto powtarzają się te same błędy i schematy postępowania – nic ciekawego się tam nie dzieje.
- A na końcu
bodykolejne kilkanaście skryptów JS. To boli.
Bombastyczny wygląd niestety w tym wypadku nie przysłania niedoskonałości treściowych i technicznych. Z jednej strony widać, że autor ma pewien zasób wiedzy, jednak z drugiej ewidentnie mu go brakuje (brak walidacji w PHP). Jak pod względem zdolności graficznych nic do zarzucenia nie mam, tak pod względem programistycznym – jak najbardziej.
Hej. Kolejna świetna krytyka. Tak BTW, czy w czasach walidacji Formularzy przez sam HTML5 warto zabezpieczać się PHP, kiedy nawet już IE sobie ładnie z tym radzi?
@Patryk: cześć,
OCZYWIŚCIE że trzeba. Walidacja po stronie klienta to tylko dodatek, który ma sprawić że w wypadku błędów formularz nie wyczyści się i tak dalej, uprzyjemniacz dla użytkownika po prostu.
Walidacja po stronie serwera jest jedyną pewną metodą. Co po walidacji po stronie klienta, skoro kod ten można zmienić? Przykładowa i najprostsza metoda, choć nie jedyna: otwieram firebuga, kasuję [type=”email”] i pcham do formularza jakiś syf, który rozsypie stronę. Zajmie to około 5 sekund. Walidacji po stronie serwera natomiast nie obejdziesz, może mieć ona niedociągnięcia, ale nigdy jej nie „wyłączysz” bez dostępu do tego serwera.
Pozdrawiam,
Sobak.
A tam, nikt nie babrze się w dev toolsach, żeby zmieniać kod HTML formularza. Odpala się konsolę, składa odpowiednie żądanie w cURL-u i nawet nie czeka aż lisek się zagrzeje 😉
Proponuje odskoczyć trochę od krytyki stron i na podstawie ich zrobić w następnym artykule jakiś poradnik, co robić, jak powinno coś wyglądać, co zachować, a czego trzymać się z daleka i jakich błędów nie popełniać.
Myślę, że jest to dobry pomysł i dla czytelników bardzo przydatny 😉
Miło mi, że chciało Ci się tak dogłębnie przeanalizować moją stronę 🙂
Fakt do wszystkich błędów przyznaję się bez bicia i uważam Twoją krytykę za jedną z najkompetentniejszych jakie kiedykolwiek było dane mi na mój temat czytać/słyszeć.
Niemniej mam na swoją obronę pewną ideologię, którą zaraziłem się z książki Kamila Cebulskiego bodajże „Efekt Motyla”. Pisał on, że nie ma sensu być perfekcjonistą i on np. robiąc literówkę w mailu w ogóle jej nie poprawia. Szkoda mu czasu – przekaz jest zachowany, a takich poprawek w ciągu całego życia można uzbierać na łączną sumę nawet lat z naszego życia.
Oczywiście wiem, że na moich stronach czy w moich kursach mogą pojawiać się błędy. I tak jak napisałeś – liczę, że ludzie zdają sobie sprawę, że jestem człowiekiem 🙂
Perfekcjonizm jest efektowny ale nie jest efektywny.
Zmianę szablonu planuję już od dłuższego czasu – niestety doba ma tylko 24h a liczba projektów i pomysłów, które staram się realizować często wykracza poza moje czasowe możliwości.
Cały czas walczę więc z kompromisem perfekcjonizmu, który konkuruje z mierzalnymi (finansowymi) efektami mojej pracy.
Interesująca odpowiedź użytkownika na średnio interesujący artykuł webkrytyka, za to brak jakiegokolwiek komentarza ze strony twórcy artykuły…. Panie webkrytyku jest Pan zbyt zajęty mądrowaniem się czy po prostu zgasiło to Pana że nie udało się Panu w ciągu trzech lat nic na to odpisać?
Co do użytkownika Adriana to ja osobiście też szanuję uczciwą krytykę ale nie nazwałbym tego „kompetentną” krytyką, rozumiem że napisałeś tak tylko ze względu na kulturę?
Pofatygowałem się na twoją stronę i przejrzałem ją pod kontem treści i nie widzę tam żadnej wzmianki wskazującej na reklamowanie się jako perfekcjonisty i ideału ale właśnie raczej tak jak napisałeś w komentarzu. Zgrywanie wszechwiedzącego „Bufona” to raczej umiejętność Pana webkrytyka z tego co tutaj przeczytałem, z resztą nie pierwszy raz….
Chciałem zrelaksować się czytając jakiś artykuł w internecie a zamiast tego zirytowałem się chamstwem tego artykułu i musiałem spędzić trzy godziny na analizowaniu czy ten cały adrianbienias to jakiś cwaniaczek czy kompetentny przedsiębiorca…. tak już mam….
Jedyny plus to to że przejrzałem dwa filmiki z tej strony adrianbienias.pl i muszę przyznać że bardzo ciekawie opowiadasz Adrianie opisywane projekty. Mam chyba z sześć kursów z eduweb.pl ale żaden z nich nie jest tak ciekawie i prosto opowiadany. Gratuluję.
Naprawdę sądzisz, że wbicie na mojego bloga i próba sprowokowania mnie oraz ośmieszenia to najlepsze, co można zrobić? Tak samo odrzucenie krytyki wyłącznie dlatego, że „autor jest bucem”, bez jakiegokolwiek pochylenia się nad argumentami, które są poparte intersubiektywną opinią (w niektórych miejscach wręcz obiektywnymi wskaźnikami)? To jest dopiero bufonada.
Nie odpowiedziałem, bo nie widziałem takiej potrzeby. Próba dorobienia do tego jakiejś obrażającej mnie teorii jest bardzo nieudanym chwytem erystycznym.
Zresztą ocenianie artykułu napisanego 4 lata temu przez pryzmat dzisiejszej, zmienianej zapewne wielokrotnie, strony jest po prostu śmieszne. Na szczęście każda krytyka jest dokumentowana i można zobaczyć wygląd strony sprzed 4 lat.
Wierzę że rzeczy które Pan tam odkrył były faktem i od strony technicznej nie twierdze że błędy nie istniały, ale ogólnie obsmarowany został cały portal a z tego co widzę to bynajmniej kursy te autorstwa użytkownika adrian są naprawdę świetne o niebo lepsze od tych z eduweb i strefy kursów które posiadam, koleś świetnie tłumaczy aż zakupiłem od niego kurs parę dni temu, ale co do artykułu irytuje mnie jak ktoś pisze takie bzdury bo gdybym nie pofatygował się na stronę to po Pańskim artykule w życiu bym tam nie wszedł a jak szukam opinii w internecie to chciałbym ją mieć rzetelną… przykro mi ale to nie pierwszy artykuł z jakim miałem do czynienia i nie podoba mi się Pana styl, lubię dziennikarzy/blogerów którzy potrafią do tematu podejść z każdej strony a nie tylko od strony w której sami są mocni i wynajdują niedoskonałości.
PS. poza tym jeżeli SAM autor opisywanej strony odpisuje na artykuł i nie wiem czemu akceptuje taką opinię (nie mówię o solidnym wyszukaniu błędów technicznych) ale o ogólny przekaz z tego artykułu że te kursy jak i autor „pozerstwo” , to wypadało by coś odpisać bo jako czytelnik jestem bardzo ciekawy odpowiedzi autora artykułu na wpis który podkopuje główne filary tej krytyki (nie mam na myśli błędów technicznych strony).
Może słowo „bufon” było za ostre ale chciałem odzwierciedlić zirytowanie, przepraszam za to i teraz użył bym słona „zarozumiały”.
Tylko że to, że kursy są lepsze od tych z EduWeb czy Strefy Kursów, dalej nie zmienia faktu, że posiadają spore braki merytoryczne. Twierdzenie, że piszę bzdury, bo wyraziłem swoją opinię i poparłem to odpowiednimi argumentami, jest dla mnie nieporozumieniem. Nie można przymykać oka na braki merytoryczne tylko dlatego, że coś jest „dobrze tłumaczone”. Fakt, że analizuję coś wyłącznie od strony merytorycznej, nie czyni krytyki nierzetelną…
Tak samo nie bardzo rozumiem zarzut, że zajmuję się tym, na czym się dobrze znam. Jaki miałoby to sens, gdybym zajmował się tym, na czym się nie znam? Ja zajmuję się merytoryczną stroną kursów czy stron, nie sposobem prezentacji – od tego są inni ludzie. Tak jak specjalista od PR-u nie zajmuje się korektą merytoryczną książek informatycznych, tak ja nie zajmuję się psychologiczno-socjologiczną stroną kursów.
Słowo „pozerstwo” pada wyłącznie w Twoim komentarzu, w samym tekście jest jedynie (przyznaję, niezręczna) aluzja do ówczesnego wyglądu strony, który był – nie oszukujmy się – nieco bombastyczny, by nie rzecz – kiczowaty. I na tym temat się w artykule zakończył. Nie jest to zatem – i nigdy nie był – główny filar krytyki. Z tego też powodu nie widziałem i dalej nie widzę powodów, dla których miałbym odpowiadać.
Polecacie jego kursy czy to raczej spaghetti code? 😀