jQuery – mój następny krok

Nauka tworzenia stron większości webmasterów wygląda mniej więcej tak:

  • uczymy się podstaw HTML
  • uczymy się programować tabelki w HTML
  • uczymy się podstaw CSS
  • zarzucamy tworzenie w tabelkach, uczymy się modelu pudełkowego
  • uczymy się podstaw JS
  • uczymy się lepszej obsługi JS i DOM
  • udoskonalamy system pudełkowy – layouty wielokolumnowe itp.
  • uczymy się AJAX
  • …gdzieś po drodze powyższych uczymy się podstaw PHP i MySQL oraz uczymy się tworzenia grafiki… być może także opanowywujemy podstawową obsługę flasha…
  • … i co dalej?

Umiemy bowiem w 100% zadowolić naszych Klientów. Nasze witryny zachwycają i (po odpowiedniej dozie pracy) mogą wyglądać i zachowywać się w dowolny wymyślony sposób. Właściwie nie ma granic.

Ależ granice są. Należy się rozwijać. Stagnacja to śmierć. Długo się zastanawiałem

Następnym krokiem, według mnie, powinna być nauka zaawansowanej obsługi dobrego frameworka JS/AJAX. Przejrzałem mozliwości wszystkich popularnych silników tego typu i wybór padł na jQuery. Dlaczego? Jego stosunek parametrów użyteczności, efektywności i efektowności jest po prostu najlepszy. Plus – maszyna jQuery jest naprawdę megałatwa do naumienia nawet dla osób mających tylko blade pojęcie o JS (fakt – jakieś pojęcie trzeba jednak mieć).

Uczę się jQuery namiętnie już od kilku tygodni i im więcej się uczę – tym bardziej opada mi szczęka. :) jQuery rządzi.

Tym, których przekonałem, polecam bardzo dobry kurs jQuery na Ferrante.pl, lub wpisanie jQuery w Google. Wyników będzie sporo.

Hacki CSS dla IE

Witam w 2009 :)
Webhosting.pl to serwis, któremu na początku nie dawałem dużych szans na przetrwanie. Jednak, jak się okazało, dzięki patronowi (i najprawdopodobniej hojnemu sponsorowi) tego serwisu – home.pl, na Webhosting.pl co jakiś czas pojawiają się bardzo ciekawe i przydatne artykuły.
Jednym z nich jest tekst Haki CSS i komentarze warunkowe dla niepokornego Internet Explorera, który w sposób (jak dla mnie) w zupełności wystarczający przekazuje większość wiedzy, jaką warto mieć, aby projektować strony wyglądające identycznie w nowoczesnych przeglądarkach i IE.
Polecam.

Gdy masz problem z CSSem

Projektując nowoczesną witrynę w CSS, często natrafia się jednak na problemy, niedogodności, lub – najczęściej – na swoją własną niewiedzę/nieumiejętność. Wtedy sięga się do tutoriali.
Dla mnie, do niedawna takim miejscem, gdzie znajdowałem odpowiedzi na (prawie) wszystkie CSSowe pytania, był (zamknięty już niestety) blog Perfection or Vanity Riddle’a. Kilkanaście dni temu odkryłem jednak lepszą skarbnicę wiedzy CSSowej – zbiór linków na aComment.net. To naprawdę dobry resource – z takimi tutkami kolumnowe laye, fajne ostylowanie, efekty, przezroczystość, zaokrąglone rogi, wszelkie CSSSowe hacki i tricki to kaszka z mlekiem. Polecam.

Oryginalna witryna

webleeddesign.comStrona WebleedDesign.com jest przykładem witryny oryginalnej. Nie dlatego, że jest jednym wielkim, ciężkim flashem z milionem cukierkowych efektów – bo nie jest. Ani dlatego, że zawiera niesamowite treści (chociaż jest ciekawa także merytorycznie – przynajmniej dla mnie). Jest oryginalna z powodu nietuzinkowego wykorzystania prostych technologii, znanych wszystkim. Wejdź na tę stronę i przewijaj w dół. Mnie ten efekt powalił na kolana. Po raz kolejny przekonałem się, że 90% sukcesu – to sam pomysł.

Powrót

Po około dwóch miesiącach milczenia – powracam. Wejścia na bloga nieco spadły – to zrozumiałe. Mam nadzieję, że choć część z Was zachowała do Subiektywa linki/subskrypcję RSS. Mam pomysły na kilka fajnych nowych wpisów, myślę więc, że będzie warto. Specyfika bloga (piszę błędnie bo „blogu” brzmi dla mnie pokracznie) się nie zmienia – dalej opisywał będę głównie narzędzia on-line i rozwiązania dla webmasterów. Przeplatał to będę z wysublimowaną rozrywką. Postaram się nie rozwlekać i pisać konkretnie. W końcu będę trzymał się głównej zasady – piszę tego bloga dla siebie, aby zebrać w jednym miejscu linki i opis do narzędzi, z których często korzystam podczas projektowania/tworzenia/wdrażania WWW. Za chwilę więc dodam kolejny wpis „na temat”. Zapraszam.

Nowe GRX.pl – Serwis/sklep z szablonami stron WWW

Szablony stron GRX.pl Po pięciu latach od stworzenia mojej pierwszej strony w nie-darmowej domenie i jednocześnie mojego portfolio (stara wersja tutaj), pragnę przedstawić nową odsłonę mojego serwisu/sklepu z szablonami stron WWW – www.GRX.pl.Oczywiście strona nie jest dokończona – brakuje implementacji płatności on-line, efektów graficznych, brakuje trochę ogłady i kilku moich pomysłów. Docelowo ma być maksymalnie przejrzyście, intuicyjnie i użytecznie.Jednak już teraz wszystko, co widać – działa. Warto zauważyć pojawienie się całkowicie darmowych szablonów (po statystykach odsłon widzę, że cieszą się one dużym pobieraniem :)) oraz hipertanich – za 10zł (tu będzie można zapłacić SMSem).

Jak Wam się podoba?

Serwisy takie jak Photofun, czyli zrób się sławny 2

Wstaw się Pamiętacie wpis z linkiem do strony, na której można robić fotomontaże (wstawiać swoje zdjęcie na billboardy, obok sławnych osób, jako astronauta, superman itp.)?

Takich serwisów do tworzenia fotomontaży fotek on-line jest więcej! oto one:

Photofunia.com – angielska wersja ukraińskiego serwisu, przedstawionego w poprzednim wpisie.

Dumpr.net – możliwości może niewielkie, ale efekty fotomontaży nie spotykane na innych serwisach.

WstawSie.pl – coś polskiego. Na razie także niewiele efektów (porównując do photofun’a), ale serwis się rozwija :) Nazwa jest trochę myląca – za pomocą tej strony nie można SIĘ wstawić, ale wstawić swoje zdjęcie :)

No.. to teraz możecie umieścić swoje zdjęcie gdzie tylko chcecie :) Jeśli znajdę jeszcze jakieś strony do zabawy ze zdjęciami – dodam je tutaj.

Dobry kurs AJAXa

Główną zaletą użycia AJAXa jest możliwość odświeżania fragmentu strony bez przeładowywania jej całej. Od dawna chciałem umieć to robić, bo oczywiście funkcjonalność to nieoceniona. Próbowałem różnych kursów w Sieci, ale dotychczas trafiałem na zbyt trudne lub zbyt nudne. Aż do przedwczoraj, kiedy to przypadkiem zacząłem czytać, a potem realizować przykłady z artykułu „AJAX Kurs od podstaw – interaktywne aplikacje WWW” Włodzimierza Gajdy. Krótko mówiąc – kurs jest dobry, szczególnie dla totalnych laików i nie-programistów, mimo że jest w nim kilka drobnych błędów. Chociaż z drugiej strony – bezproblemowe znalezienie tych błędów też świadczy dobrze o samym kursie :). Jest też kontunuacja – bardziej zaawansowane procedury AJAXa pokazane na żywych przykładach. A wszystko dostępne za darmo w serwisie magazynyinternetowe.pl, który ostatnio podnosi się z popiołu (no – może poza dość kiepską grafiką i pewną nieintuicyjnością witryny (kilka razy wyszukiwane hasło wpisywałem bezwiednie w pole subskrybcji ;) )).

Definiowalne przyciski radio i checkbox (edit: i select)

Zmiana wyglądu pól radio i checkmark formularzy Jak wiadomo, wygląd większości pól input i textarea formularzy możemy w dużym stopniu modyfikować poprzez CSS. Jednak gdy chodzi o przyciski zaznaczeń typu radio i checkbox, sprawa nie jest już taka prosta – ich wygląd zależy od używanego GUI – nie da się wyglądu tych przycisków zdefiniować bezpośrednio w CSS.
Jak wiadomo, czego się nie da zrobić przez CSS, robi się przez JS :) Wyszukałem więc rozwiązania problemu podmiany przycisków radio i checkbox na ładniejsze.

Niestety wielu kompleksowych rozwiązań tego problemu w Internecie nie ma – znalazłem dwa:

Prym w tym temacie wiedzie skrypt Fancy Form. Rozwiązanie to działa bez zarzutu prawie wszędzie. Ma jednak wadę (choć dla niektórych zapewne to będzie zaleta) – korzysta z frameworka MooTools.

Istnieje też skrypt CRIR (Checkbox & Radio Input Replacement), który z żadnej biblioteki JS nie korzysta. CRIR to plik javascript, definicje styli CSS oraz dopisanie atrybutówclass=”NowyRadio” i class=”NowyCheckbox” w odpowiednich tagach kodu (x)html (w Fancy Form nie trzeba było tego robić). Daje to możliwość ustalenia wielu różnych wyglądów przycisków zaznaczenia na jednej stronie.

Znalazłem także trzy inne rozwiązania, których niestety nie mam czasu przetestować: Checkbox Replacement Script (o przyciskach typu radio tu nie pomyślano), Rozwiązanie na WebDeveloper.com (także tylko checkboksy) oraz jeszcze jeden, nieco przydługi skrypt.

Mam nadzieję, że komukolwiek zaoszczędziłem czasu tym małym zestawieniem :)

[edit: aby uzupełnić temat, należy jeszcze wspomnieć o NiceForms, który świetnie sobie z ostylowaniem formularzy radzi, oraz, dla równowagi – Gorący apel Riddlea’, aby formularzy NIE stylować]