Michał Moroz

Abecadło smoczątka, dziennik niecodzienny

Strona domowa, czyli milestone m1

`Nie można cofnąć tego, co puściło się w eter', to jedna z prawd wyniesiona z warsztatów radiowych w WSHE.

Można jednak wypuszczać te sygnały, które zmotywują, bądź zmuszą Cię do dalszej pracy. Tak i ja zrobiłem. Celowo umieściłem informację o własnym portfolio we wpisie Nowe serwisy podbite przeze mnie, która niedługo potem stała się najważniejszym priorytetem na następny miesiąc. W ten sposób rozpocząłem pracę nad własną stroną domową.

Vitalist stał się niezastąpionym narzędziem w mojej pracy. Jestem wzrokowcem i może dlatego ranga każdego zadania rośnie, kiedy zapiszę je sobie. Dodatkowa możliwość określania terminu zakończenia danego zadania motywowała mnie jeszcze bardziej. Wygodny interfejs skłonił mnie do pozostania przy właśnie tej liście todo, a moje poszukiwania menedżera zadań dobiegły końca.

Taka ogranizacja mojej pracy pozwoliła mi na zakończenie prac przed rozpoczęciem roku szkolnego, co przyjąłem za cel już na samym początku.

Pewnego wieczoru usiadłem i zacząłem rysować możliwości dotyczące wystroju strony domowej. Jeden z ciekawszych pomysłów odrzuciłem bojąc się, że sama praca nad tłem zajmie mi bardzo dużo czasu, nie mówiąc już o tym, że uznałem go za zbyt skomplikowany jak na mój aktualny poziom rozwoju graficznego. O czym mowa? Niebo u góry, ziemia pośrodku i podziemia poniżej.

Postawiłem więc na inny pomysł, ten, który można zobaczyć na mojej stronie domowej.

Następnym krokiem było wykonanie back-endu dla strony domowej. W założeniu miała być ona prosta do bólu i dałoby się ją wykonać nawet na czystym HTMLu. Uznałem jednak, że warto by było przypomnieć sobie PHP i poznać te ciekawsze możliwości klas i obiektów w piątej wersji języka. Dzięki temu też przymierzyłem się do PDO i wykonałem coś w rodzaju bardzo prymitywnego frameworka. Do wyświetlania tegoż zdecydowałem się skorzystać z xt - xhtml templates, których zdecydowanym plusem jest to, że do wyszukiwania elementów korzysta się z selektorów CSS3. Ze strony klienta wykorzystałem JQuery, w którym ten proces wygląda praktycznie tak samo. Kolejnym plusem JQuery jest łączenie wyrażeń w łańcuchy (chaining), co przypomina dokładnie budowanie zapytań SQL we frameworku Django. Podsumowując, nauczyłem się tutaj wiele i nie żałuję mojego wyboru.

Na koniec zostawiłem sobie opracowanie dokładnych szablonów dla powstającego portfolio oraz tego bloga.

Z tego, co zauważyłem, poszczególne strony są używalne od IE5.5 wzwyż oraz w przeglądarkach obsługujących standardy. Uwaga, Safari/Win ma problemy z JQuery, ale z tego, co wiem, na Macach biblioteka ta działa, jak należy. Zakładając, że Safari/Win jest aktualnie używana głównie przez developerów, nie będę próbował naprawiać jej błędów.

Dla wszystkich tych, którzy przewinęli tylko z góry na dół, podaję linki: strona domowa oraz portfolio. I oczywiście nagłówek tego bloga. :)

Mile widziane wsparcie w postaci wytykania błędów, szczególnie tych językowych. ;]

Zobacz komentarze Trackback dodajdo.com Zobacz pełne metadane

Reklama z Dramatycznym Spojrzeniem

Śledzący blogosferę lub Wykop z pewnością pamiętają filmik Dramatic Look, który stał się małym fenomenem w polskiej sieci pod koniec zeszłego miesiąca. Zaistniał na kilku/kilkunastu blogach i wspomnianym wcześniej Wykopie.

Nie minął nawet miesiąc, a zobaczyłem coś takiego:

Reklama z Dramatic Look

Nie przypominam sobie ostatnio, żeby ktoś w Polsce zrobił reklamę będącą na czasie z wydarzeniami w Internecie. Dlatego wielki plus dla twórców pracujących dla patrz.pl. :)

Szkoda tylko, że została ona przygotowana jako flash wyskakujący na środek czytanej strony.

Zobacz komentarze Trackback dodajdo.com Zobacz pełne metadane

Następna strona? - poprowadź mnie!

Postanowiłem nieco rozszerzyć ostatni wątek o pomysł, który ostatnio mnie nawiedził. Nadaje się on głównie dla osób, które są zainteresowane grzebaniem w kodzie swoich serwisów. I tutaj, na Joggerze na pewno nie jest ich mało.

Wszystkie modele opisane w poprzednim wpisie są modelami czysto generycznymi, w żaden sposób nie łączą się z akcjami użytkownika. Oczywiście, można to zmienić!

Dwie idee połączenia akcji użytkownika wraz z reakcją strony, które wpadły mi do głowy są względnie proste do zaimplementowania a mogę wnieść wiele do poszczególnych rodzajów oprogramowania.

Idea 1: Pierwsza nieodwiedzona strona.

Jedna z najprostszych idei, które mogą być bardzo pomocne w tworzeniu specjalizowanej listy linków dla użytkownika. Załóżmy, że istnieje lista stron od 1 do n. Gdzieś pomiędzy nimi znajduje się strona m, którą aktualnie odwiedza użytkownik. Użytkownik przechodzi następnie na stronę o. Wykonujemy następujące sprawdzenie:

  • Jeśli o < m, podajemy linka do m + 1 jako pierwszej nieodwiedzonej strony.
  • Jeśli o > m, m = o.

    • Jeśli chcemy być jeszcze bardziej poprawni, możemy sprawdzić, czy o > m + 1. Jeśli tak, możemy poinformować użytkownika, że pominął przy przeglądaniu odpowiednią ilość stron i zapytać, czy chce, abyśmy oznaczyli je za nieprzeczytane.
    • Uwaga - domyślnie oznaczamy je za przeczytane, bo jeśli ktoś już przeskakuje ileś stron, musi mieć ku temu powód!

Plusem tego rozwiązania jest to, że jeśli chcemy, da się je zaimplementować nawet w JavaScripcie, o ile dostarczymy mu numer aktualnej strony.

Zyskują na tym wielce fora, bo dostęp do wątków jest znacznie uproszczony. Nie jestem ich bywalcem, ale z tego, co wiem, w większości z nich stosowane są od dawna podobne mechanizmy. Jak bardzo pokrywają się z moim pomysłem - tego już nie powiem. :)

Problemy pojawiają się w przypadku stron, w których publikacje pojawiają się od najnowszej do najstarszej. W takim przypadku stosowanie powyższej idei mija się z celem - nieprzeczytana treść znaleźć się może nie tylko po jednej, ale po obu stronach listy.

Idea 2: Pozwól użytkownikowi zaznaczyć miejsce, do którego chciałby wrócić

Ta koncepcja jest jeszcze lepsza. W miejscach, gdzie różne wartościowe treści są rozrzucone wśród masy tych nieużytecznych, a jest ich stanowczo za dużo, aby bookmarkować je gdzieś w zewnętrznym serwisie, sami możemy postarać się o to, by zapewnić odpowiednią wygodę czytającym.

Jak? Na każdej ze stron dajemy dodatkowy przycisk, odpowiadający za akcję zapisania. Gdy przeglądamy listę stron, wszystkie zapisane strony z tej listy ukazują się jako linki. Jeśli założymy, że lista stron nie jest zbyt długa, aby mieć więcej niż kilka takich zakładek, użytkownik nie będzie potrzebował ich opisywania. Ale zamiast opisywania, skłaniam się ku innej formie. Niech zakładki mają kilka kolorów do wyboru.

Co dalej? Użytkownik może dostać własną stronę z zakładkami, jakie zrobił i małym wyjaśnieniem kontekstu (chciażby nazwa listy stron, w której dane zakładki się znajdują).

Kwestią sporną jest to, co powinno dziać się z taką zakładką po powróceniu na jej stronę. Przyzwyczajeni jesteśmy do manualnego usuwania wszelkich zakładek w przeglądarkach i specjalizowanych serwisach. Z drugiej strony logika podpowiada, że gdy ktoś wrócił na tą stronę, to w konkretnym celu i nie powinniśmy go zmuszać do dodatkowego klikania, tylko po to, by usunął tą zakładkę. Tą rzecz pozostawiam do przemyślenia ewentualnym implementatorom, specom od usability wyższej klasy ode mnie i wszystkim czytającym. ;)

Pomysł jest stary, jak stare są zakładki do książek. Ale chyba nikt jeszcze czegoś takiego sam z siebie nie zaimplementował w sieci. Głównym problemem tego rozwiązania jest z kolei bardzo łatwa możliwość zniszczenia całej jego używalności, jeśli tylko nie postaramy się utrzymać tego tak prostym, jak tylko można.

Mam nadzieję, że skłoniłem Cię do własnych refleksji. :)

Zobacz komentarze Trackback dodajdo.com Zobacz pełne metadane
Wcześniejsze wpisy Na górę Późniejsze wpisy
Reklamy Google