Tejotka ver. 2017 - najbardziej ekscytujące pomysły

Absolutnie pierwsza wersja Mojej strony domowej nosiła prawdopodobnie nazwę "Tejotka" i była opublikowana 17 maja 2001 roku. Od tamtej pory zaprojektowałem wiele nowych odsłon, od statycznej strony HTML, poprzez TextPattern, aż po dzisiejszą implementację na Bloggerze (nadal ogromnie cieszy Mnie fakt, iż zyskałem satysfakcjonujący poziom swobody w projektowaniu dla tego CMSa).

Teraźniejszą odsłonę cechuje kilka "smaczków" - ekscytujących Mnie pomysłów, które wdrożyłem dzięki fuzji technologii Bloggera, jQuery oraz "szczypty CSS" :) . Szczególnie podobają Mi się:

Spersonalizowane nagłówki czasowe postów (np. "..napisałem pewnej lutowej nocy...").

Inspiracja do tego pomysłu sięga jeszcze dawnych czasów "Notatniczki" (klimatyczny edytor tekstu, który rozwijaliśmy z Jackiem), w której to lubowałem się używać różnorakich - mniej lub bardziej automatycznych - nagłówków, odnoszących się do pory dnia/daty, gdy pisałem dany tekst (podobny zresztą mechanizm zaprojektowałem również w programie pocztowym The Bat!, korzystając z jego natywnej składni). Na potrzeby Tejotki postawiłem przed Sobą ciekawe wyzwanie: czy udałoby się stworzyć bardziej klimatyczne nagłówki czasowe, oparte na znacznikach daty/czasu, którymi Blogger opatruje posty?

Zadanie okazało się dość złożonym (potrzebowałem m.in. uwzględnić odmianę miesięcy, czy nauczyć jQuery wyłuskiwania godziny publikacji postu), finalnie jednak udało się kompletnie je wdrożyć - z odmianą wszystkich miesięcy oraz kilkoma porami dnia. To już wystarcza, aby znacznie urozmaicić różne dynamiczne listingi postów oraz dodać stronie klimatu i charakteru.

"Mood Tags".

Drugim przewodnim, najbardziej ekscytującym Mnie pomysłem w tej odsłonie są dla Mnie "tagi nastroju" (z ang. "Mood Tags"). Inspiracją było tutaj pragnienie zwizualizowania skalowalnej z biegiem czasu "chmury tagów/nastrojów", dzięki której jeden rzut oka wystarczy, by zorientować się w dominującej na stronie wibracji, czy też nowatorsko przefiltrować obecne na stronie treści pod kątem... stanu ducha, w jakim powstawały :) .

Aby tagi nastroju działały sensownie, potrzebowałem przede wszystkim oddzielić je w postach od pozostałych (opisujących tematykę artykułów). To zadanie nie było już dla Mnie taką nowością, gdyż coś podobnego zrealizowałem wcześniej na łamach Mojego portfolio, wyodrębniając tagi opisujące branżę projektów od ich rodzajów.

Klimatyczny "footer".

Jedną z rzeczy które bardziej podobają Mi się w zastosowaniach jQuery, są animacje. Zanim zacząłem stawiać pierwsze kroki w ich projektowaniu, przeczuwałem że może być prawdopodobnym, iż dzięki jQuery mógłbym właściwie projektować strony, niczym prezentacje (!). To spostrzeżenie podekscytowało Mnie, rychło też pozytywnie zweryfikowałem tą teorię.

Do tej pory zaprojektowałem już kilka stron, na których szerzej zastosowałem animacje - najbardziej podoba Mi się efekt jaki uzyskałem na łamach portfolio, gdzie stworzyłem cały animowany interfejs pod poszczególne działy, przy okazji wprowadzając też uwielbiany przeze Mnie, estetyczny efekt "przydymionego szkła" *.* .

Na łamach niniejszej strony natomiast zanimowałem "footer", czyli sekcję stopki - o pięknym, jagodowo-różanym, częściowo transparentnym gradiencie (boski CSS), przy którego okazji znów zachwycam się, jak bardzo dziś CSS uniezależnia projektantów od Photoshopa (jeszcze jakiś czas temu aby uzyskać podobny efekt, potrzebny był odpowiednio przygotowany plik .png/.gif).

Co więcej, stopka na aktualnej stronie nie tylko subtelnie wpasowuje się w jej szatę graficzną, co animuje: wysuwa po najechaniu nań, prezentując klimatyczną, wysoce spersonalizowaną zawartość: formularz kontaktowy oraz rotator cytatów (pokusiłem się nawet o to, aby elastycznie dopasowywały się do różnych rozdzielczości). Efekt bardzo Mi się podoba, myśląc nad tym dochodzę do wniosku, iż dzięki tego rodzaju pomysłom strona internetowa może przypominać bardziej aplikację - i znów: bez Photoshopa, i bez Flasha (!). Jakież ułatwienie.

Wracając do formularza kontaktowego, lubię bawić się bloggerowymi gadżetami, poszerzając granice ich personalizacji (dzięki temu aktywnie dowiaduję się, w jakim tak naprawdę stopniu można je spersonalizować - co biorąc pod uwagę oporność niektórych z nich, nie jest wcale tak oczywistym). W dodatku aktualnie uzyskany efekt kojarzy Mi się wizualnie z kartką pocztową, co sprawia iż jeszcze bardziej Mi się podoba :) .

Podpisy zdjęć.

Jeden z najbardziej ekscytujących Mnie pomysłów, które postanowiłem spróbować wdrożyć przy okazji tego projektu. Nakładane na zdjęcia podpisy (np. w formie częściowo transparentnych pasków z tekstem) nie są aktualnie dla Mnie niczym specjalnym, choć potrafią wyglądać wysoce estetycznie. Od strony praktycznej nie są jednak zbyt wygodne w używaniu, wymagając nawet podczas redagowania artykułu uwzględnienia dodatkowego kodu, który pozwoliłby namierzyć podpisy, prawidłowo je sformatować oraz nałożyć na zdjęcia.

Pojawiła się jednakowoż świeża myśl: czy do generowania podpisów udałoby się wykorzystać atrybuty "title" obrazków? Jeśli tak, uwzględnianie podpisów nie generowałoby dodatkowego zachodu, gdyż w Open Live Writer'ze (którego wykorzystuję do redagowania i publikacji postów) wstawia się je bardzo wygodnie. Stąd też wysoce frapowało Mnie, czy byłoby to wykonalne.

Okazało się, że owszem - zachwyca Mnie, iż jak najbardziej można wykorzystywać również atrybuty elementów HTML, jako źródło danych dla jQuery. W rezultacie napisałem mechanizm, który podpisuje zawarte w postach obrazki, wykorzystując w tym celu zawartość przypisanych im atrybutów "title" - o ile takowy posiadają (ignoruje pozostałe). Jest to bardzo wygodne, a i jednocześnie zadowalająco semantyczne - gdyż w kodzie podpisy znajdują się tak naprawdę w najbardziej odpowiednim miejscu, nie wymagając żadnego innego (dodatkowego).

Tryb ekspozycji fotografii.

W tym przypadku być może zaczęło się od tego, iż (na potrzeby innego projektu) postanowiłem stworzyć Własny mechanizm wyświetlania filmów YouTube, w którym po kliknięciu na miniaturkę filmu cała strona przyciemniała się (znów boskie przydymione szkło :) ), a film wyświetlał ładnie wycentrowany na ekranie. Efekt ten jest dość powszechny, szczególnie w galeriach zdjęć - różnica polegała na tym, iż aktualnie napisałem go sam, nie korzystając z żadnych dodatkowych wtyczek.

W kontekście Mojej strony domowej w którymś momencie olśniło Mnie, iż mógłbym nie tylko zaprojektować analogiczny "tryb ekspozycji" fotografii, co mógłbym prawdopodobnie sprawić, by był aktywny tylko w określonym dziale (fotografii - ignorując zdjęcia (np. screeny) w postach przynależących do pozostałych działów), jak również mógłby posiadać dodatkowe "bonusy" do zabawy: przełączniki dynamicznie nakładanych efektów wizualnych. Innymi słowy, za pomocą jednego kliknięcia (a właściwie nie tyle kliknięcia, co samego już najechania myszką na nazwę efektu) możesz zobaczyć, jak prezentowałaby się dana fotografia w sepii, skali szarości, czy w kilku innych trybach. A wszystko dzięki jQuery, efektom CSS oraz szczypcie animacji dla estetyki :) .

Ikonki administracyjne "na zawołanie".

Więcej napisałem na ten temat w innym miejscu, tu nadmienię tylko iż to właśnie w aktualnej Tejotce po raz pierwszy wdrożyłem bardzo wygodne ułatwienie, ukrywające domyślnie ikonki edycyjne gadżetów Bloggera - oraz pokazujące je po najechaniu na dany gadżet. Robi ogromną różnicę w kwestii wiarygodnego podglądu projektu.

Komunikat powitalny.

Uwielbiam kreatywne pomysły, szczególnie te wyraźniej nieprzewidywalne. Jednym z nich jest stara koncepcja, która przyszła Mi na myśl dłuższy czas temu i z której w efekcie chętnie korzystałem w wielu projektach: wykorzystanie wtyczki wyświetlającej komunikat o ciasteczkach (cookies), jako nośnik jednorazowo wyświetlanej wiadomości powitalnej (a konkretniej wyświetlanej tak długo, póki się jej nie zamknie - po zamknięciu wiadomość nie będzie wyświetlona ponownie nawet po odświeżeniu strony).

Moja pierwsza implementacja tego pomysłu była szczególnie zmyślna: komunikat wyświetlał się w obszarze wysuwanego po najechaniu na główny obrazek na stronie przydymionego szkła - aby po zamknięciu ustąpić miejsca rotatorowi cytatów (lub zdjęć).

Na łamach aktualnej strony natomiast postanowiłem wykorzystać ten komunikat bardziej praktycznie: do efektywnego przekazania informacji nt. tego, iż strona jest zaprojektowana na Bloggerze - i że Ty także możesz mieć podobnie unikatową :) . Choć Blogspot jest bardzo popularny wśród blogerów, tak wysoka skala personalizacji oraz oryginalności projektu stanowi zdecydowanie rzadkość. Stąd też zależy Mi, by szerzej rozpropagować możliwość uzyskiwania podobnych efektów, by więcej osób mogło się nimi cieszyć - dlatego zaprojektowałem Laurę, jak i uwzględniłem ten komunikat.

Dodatkowe "smaczki": menu.

Blogger teoretycznie rozpoznaje aktywne pozycje menu, ale w ograniczonym zakresie - podczas kiedy najbardziej pożądanym byłoby, aby aktywne działy były oznaczane podczas lektury przynależących doń postów. Również w tym przypadku jQuery okazało się nieocenione, umożliwiając nie tylko oznaczanie pojedynczych działów, ale i kilku naraz :) .

Inną ciekawostką nt. menu jest to, iż postanowiłem wyodrębnić zeń kilka pozycji, zamieniając w ikonki. Zyskałem dzięki temu trochę miejsca (menu zaczęło się bowiem trochę rozrastać), a i bardziej urozmaiciłem wygląd.

Zamienianie pozycji bloggerowego menu na ikonki ciekawiło Mnie już od czasu, gdy zetknąłem się z podobnym konceptem u Karen Valentine, która zwykła przeobrażać klasyczny koncept menu do bardzo graficznej postaci. Po raz pierwszy wdrożyłem podobne rozwiązanie na Mojej anglojęzycznej stronie, na której nie tyle zamieniłem, co dodałem ikonki do poszczególnych pozycji menu (plus stan :hover, modyfikujący ich kolorystykę jakimś efektem CSS).

Jeszcze innym "smaczkiem" jest to, iż jedna z ikonek (kontaktu) w menu Tejotki aktywuje wysunięcie się stopki z formularzem kontaktowym - podobny pomysł po raz pierwszy zastosowałem na łamach portfolio, gdzie kliknięcie różnorakich odwołań w treści aktywuje rozsunięcie się interfejsu i wyświetlenie powiązanych treści.

Dodatkowe "smaczki": efekty fontów.

Przy okazji poszukiwania nowych czcionek na potrzeby aktualnego projektu dotarłem do informacji o bonusowej funkcjonalności Google: efektach fontów. Ku miłemu zaskoczeniu Google opublikowało szereg efektów, dzięki którym możesz nadać nagłówkom na Twojej stronie artystycznego smaku. Możesz być przy tym również dość kreatywny, gdyż efekty można ze sobą mieszać - jak również, uwaga uwaga, stosować do elementów innych, niż tekst :) (jednego z nich użyłem jako składowej jednego z efektów w opisywanym już trybie ekspozycji fotografii). Więcej na ten temat przeczytasz tu.

Dodatkowe "smaczki": elementy zależne od rozdzielczości.

Teoretycznie uczyniłem szatę graficzną Tejotki elastyczną, tj. dopasowującą się do różnych rozdzielczości ekranu. W praktyce jednakowoż nie wszystkie jej aspekty dobrze komponowały Mi się w niższych rozdzielczościach, stąd postanowiłem je stamtąd usunąć lub zmodyfikować ich wygląd stricte na potrzeby tychże rozdzielczości. Przykładowo więc blok często wyświetlanych postów ukazuje się na stronie głównej tylko w rozdzielczościach większych od 1660px. Menu główne natomiast, które w niższej rozdzielczości nachodzi na grafikę tła, stając się tym samym mniej czytelnym - zyskuje wówczas dodatkowe tło, dzięki czemu problem z czytelnością znika :) .

Dodatkowe "smaczki": komentarze.

Czasem nowe świetne pomysły wyłaniają się zupełnie samoistnie i niezamierzenie, stanowiąc tym samym miłe niespodzianki. Jednym z takich pomysłów był blok komentarzy z boku treści artykułu, którego dotyczy. Efekt którego wcale nie planowałem, a który wyraźnie przypadł Mi do gustu.

Uzyskana w ten sposób znacznie większa widoczność komentarzy zainspirowała Mnie do jeszcze większego ich spersonalizowania: zamieniłem standardowe nagłówki mechanizmu komentarzy Bloggera na bardziej ludzkie, np. "Co o tym sądzisz?" (czy też "Wpisz się do Księgi" - w dziale Księgi Gości).

Dodatkowe "smaczki": emotikonki.

Najświeższym pomysłem (zainspirowanym jedną z natywnych funkcji programu Windows Live Writer, a dziś Open Live Writer) jest dynamiczna zamiana "uśmieszków" w treści postów na ich graficzne odpowiedniki. Zgrabny pomysł, pełna automatyka i elastyczność (jeśli np. chciałbym zmienić sobie ikonki na takie w innym stylu, mogę to zrobić bardzo łatwo naraz we wszystkich postach). Więcej o tym rozwiązaniu napisałem tutaj.