eksperymenty z internetem, blogami, bloxem, javascriptem, firefoxem czy różnymi użytecznymi programami czy narzędziami, tak okołoinformatycznie tudzież okołokomputerowo...
Blog > Komentarze do wpisu

szablon X3 - co, jak i dlaczego tak

Jeszcze raz dziękuję wszystkim za miłe słowa na temat nowego szablonu. To fajna sprawa usłyszeć takie po sporym nakładzie włożonej pracy :)

Spróbuję opowiedzieć o technicznych aspektach powstawania tego projektu, a tym samym odpowiedzieć na komentarze do poprzedniej notki...
Od dość dawna planowałem tutaj ten trzyszpaltowy układ - dzięki niemu można umieścić więcej elementów w ramach pierwszego załadowania strony, tzn, bez konieczności przewijania. Na bloksie jest to o tyle trudne, że układ strony jest sztywny - szeroka szpalta z treścią, wąska szpalta z dodatkami, w opcji po lewej lub po prawej stronie - nie ma się żadnego wpływu na generowany kod HTML, można tylko operować CSSem i wprowadzać dodatkowe elementy w ramach limitu: 4KB! A czym w obecnych czasach jest 4KB? Prawie niczym. Stąd właśnie moje skojarzenia z programowaniem sprzed lat, kiedy każdy bajt kodu czy zajętości pamięci się liczył i pewnego rodzaju wyzwanie, aby zrobić coś w ramach ograniczeń...

Żeby dostać trzecią szpaltę trzeba uporządkować zastaną strukturę, wygospodarować miejsce, w polu na kod stworzyć dodatkowy obiekt (div) i wypozycjonować go w CSS. Zdecydowałem się przesunąć treść do lewego brzegu, stałą wąską szpaltę tuż obok, a w wolną przestrzeń po prawej wstawić dodatkową kolumnę. Próbowałem też układ ze szpaltami po bokach, ale nie podobał mi się zbytnio i powodował sporo problemów z tytułowym logo. Trzecia szpalta wymusiła konstrukcję dla minimalnej rozdzielczości 1024x768 pikseli. Z tego miejsca przepraszam więc czytelników z mniejszymi ekranami, ale zrobienie trzyszpaltowego, elastycznego layoutu na bloksie jest dla mnie zbyt wielkim wyzwaniem...

Chciałem też, aby przy pierwszym załadowaniu strony widać było jak najwięcej elementów - stąd postanowiłem dorobić zwijane/rozwijane sekcje linków. Ponadto ważne było, aby zakładki ładowały się nie tylko na stronie głównej, ale także na stronie pojedynczego wpisu - co dla domyślnej sekcji definiowanej w administracji blogiem nie działa (nie wiedzieć czemu). Oddzielna konstrukcja HTML/CSS dla strony głównej i tej z komentarzami mnie nie dziwi, ale brak ładowania zakładek na obu trochę tak. Stąd decyzja: zrobić własne linki w polu na HTML.

Ale, że jest ich trochę, ograniczenie 4KB działa, a nie można osadzać zewnętrznych plików HTML w ramach HTML pozostawało tylko jedno rozwiązanie: javascript. Dlatego też kod zakładek jest ładowany z zewnętrznych plików, za pomocą prymitywnej instrukcji document.write(); wyrzucającej w środku kod HTML. Rozwijalność sekcji dała mi biblioteka jquery - ma niesamowite możliwości i jest dla mnie bardziej przyswajalna niż czysty javascript, o którym mam dość ogólne pojęcie. Wadą tylko można nazwać potrzebę załadowania ok. 20KB jej kodu aby wykorzystać promil możliwości. Ale moim zdaniem warto.
Ponadto można szybko dorobić opcję zapamiętywania stanu zwinięcia/rozwinięcia za pomocą cookies, ale na razie postanowiłem zostawić układ ładowany za każdym razem tak samo.
Miałem też problem z wrzuceniem całości kodu zakładek do jednego pliku - ten problem nazywa się Internet Explorer, który z niewiadomych przyczyn regularnie się restartował. Gdy kod podzieliłem na mniejsze pliki, problem ustąpił. Będę jeszcze to testował i rozgryzał, ale przy powstawaniu priorytetem dla mnie było zdażyć na czas...
Tu mogę poskarżyc się trochę na pewną bloxową upierdliwość: zarządzanie plikami w zasobach jest bardzo nieergonomiczne, denerwujące i czasochłonne, szczególnie gdy ma się kilka plików i chce się podmieniać ich wersje...

Miniblog jest wstawiony za pomocą iframe, dla której większość przeglądarek ma problem z interpretacją overflow - stąd też tylko w Firefoksie nie ma pasków przewijania, w pozostałych jest i trochę psuje efekt. Nie wiem jak inaczej osadzić minizapiski, aby poza wyświetlaniem drobnych wpisów spełniały swoją najważniejszą funkcję: agregowały ruch z obu moich blogów.

Na koniec powiem krótko o tym, z czym zeszło mi się najdłużej - projektem nagłówka. Rzecz w tym, że jednocześnie wymyślałem projekt graficzny (z czym naprawdę mam kłopoty, pomógł mi kolega) i mozolnie uczyłem się GIMPa. Na nauce spędziłem najwięcej czasu, ale mogę powiedzieć, że przez te kilkanaście dni zacząłem sprawnie posługiwać się narzędziami i technikami - już czuję się w tym swobodnie. Zależało mi na błyszczących literkach (stąd moje ćwiczenia z kulami) - w porównaniu do nich efekt lustra czy zaokrąglone gradienty to prościzna. Nie mam też zbyt wielkiego pojęcia o optymalizacji plików graficznych, stąd dość duży (32KB) rozmiar nagłówka. W wolnej chwili (jeśli ktoś chce) mogę przygotować instrukcję jak w GIMPie zrobić taką błyszczącą literkę.

Przede mną jeszcze trochę prac nad optymalizacją czasu ładowania strony (już wyrzuciłem dwa gadżety, mam nadzieję s.z.y.m.o.n, że nie masz mi za złe "małej pożyczki"...), nad stworzeniem pewnego gadżetu odnośnie komentarzy i w międzyczasie może nad jakimiś instrukcjami jak zrobić pewne elementy.

Macie życzenia, o czym mam napisać w pierwszej kolejności?

del.icio.us icon , , , , ,
technorati icon , , , ,
piątek, 04 maja 2007, sgk

Polecane wpisy

  • ciemny szablon gotowy, więc Let's rock

    Przez ostatnie dwa tygodnie nic tu się nie działo, gdyż każdą wolną chwilę poświęcałem na szablon dla zaprzyjaźnionego bloga muzycznego Let's Rock . Obiecałem g

  • wklejka do głosowania BlogFrog dla Bloggera

    Zawziąłem się i przygotowałem skrypt do wstawiania wklejek głosowania BlogFrog dla blogów z Bloggera (.blogspot.com), analogiczny do tego, który był zrobiony dl

  • automatyczne odbicia lustrzane obrazków

    Napisałem kiedyś instrukcję do GIMPa jak zrobić lustrzane odbicie napisu * a ostatnio znalazłem w sieci dwa ciekawe rozwiązania, które  potrafią robi

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
GIMP i efekt lustrzanego odbicia tekstu z experymenty informatyczne
Jakiś czas temu, prezentując opis swojego nowego szablonu X3 , obiecałem własny tutorial dla GIMP a do tworzenia tekstu z lustrzanym odbiciem, obecnie dość modnego w projektowaniu stron internetowych . Przyznaję, że łatwiej ... »
Wysłany 2007/06/02 00:04:32
blox i obejście limitu 4KB na kod HTML z experymenty informatyczne
Przygotowując aktualny szablon i próbując w nim zapanować nad zawartością bocznych szpalt potrzebowałem własnej zawartości HTML, odrębnej od tej oferowanej standardowo na blox.pl. Mam na myśli głównie zakładki, których położenie domyślne jest ... »
Wysłany 2007/06/18 16:30:36
blox i jednolity wygląd wpisów na stronach z experymenty informatyczne
Układ bloga na blox.pl jest taki, że ostylowania wyglądu wpisów na głównej stronie bloga używane są inne klasy niż na stronie pojedyńczego wpisu tej z komentarzami . W związku z tym osoby, które zaczynają prace nad zmianami własnego bloxa mogą ... »
Wysłany 2007/07/10 23:59:45
Komentarze
eirena
2007/05/04 16:22:09
Boski masz ten szablon, naprawdę strasznie mi się podoba. Poczynając od logo, poprzez 3 szpalty, miniblog, tła i rozwijane menu. Gratuluję efektów ciężkiej pracy!
-
eirena
2007/05/04 16:26:57
Aha, próbowałam kiedyś wywalczyć zwiększenie pojemności kodu HTML, ale otrzymałam informację, że:"Niestety, nie da się tego ustawić na konkretnego bloga, a wszystkim nie bardzo chcemy zwiększać (już i tak rosyjscy spamerzy robili sobie u nas mini-hosting stron z reklamami viagry). Kombinujemy za to, żeby dodać userom dodatkowe pole na HTML (w innym miejscu), ale na efekty
tego kombinowania będzie trzeba jeszcze trochę poczekać."

Może coś się w końcu ruszy, bo przy 3 szpaltach 4 kb na kod, to żal...
-
sgk
2007/05/04 16:32:14
Dzięki za miłe słowa :)

Ja też próbowałem (dość krótko) przekonać administratora, że gdyby tak uwolnić trochę ten limit (o uwolnieniu całej struktury nawet nie marzę), to mogłyby powstawać piękne szablony na bloksie. Bo nie wszyscy mają chęci mieścić się w tych śmiesznych 4KB...
-
ols
2007/05/04 16:40:14
Do optymalizacji obrazków polecam prostackie online'owe narzędzie: tools.dynamicdrive.com/imageoptimizer/index.php
Na moje oko można bez większego żalu urwać połowę wagi nagłówka.

Minibloga chyba lepiej zrobić za pomocą jakiegoś widgeta publikującego rss. Jeśli przyjdzie Ci do głowy podłączenie tam większej liczby źródeł łączysz je np. za pomocą yahoo pipes (kolejne proste narzędzie o wielkich możliwościach).
-
kosciak1
2007/05/04 16:41:18
Chyba znalazłem rozwiązanie dla pasków przewijania w IE dla minibloga
www.w3schools.com/tags/tag_iframe.asp - atrybut scrolling="no"

W sumie (chyba) lepiej by było zamiast iframe użyć object ale wtedy da się tylko ustawić styl overflow, który działa w IE jak działa
-
ols
2007/05/04 16:42:50
@"śmieszne 4KB" - ograniczenia wymuszają kreatywność ;-) a poza tym dzięki nim blogi są lekkie i nie otwierają się miesiącami. A najbardziej zaangażowani czytelnicy i tak czytają via rss i te wodotryski ich ani ziębią ani grzeją...
-
rdkg
2007/05/04 17:05:12
@ Ols
Nie korzystamy już z internetu za pomocą modemów...

Denerwujące jest to postępowanie bloxa, jak to sam trafnie ująłeś w komentarzach do zmiany layoutu na Supergigancie, na zasadzie bilogejtsizmu: "Tyle a tyle powinno wam wystarczyć". Może sami byśmy zdecydowali co nam wystarcza, z czego skorzystamy a z czego nie?

Zapowiedziałeś też nowe (domyśle bardziej nowoczesne) standardowe szablony dla bloxa - jest ruch w tym temacie?

Dzięki za odp. :)
-
ols
2007/05/04 17:19:01
@rdkg - owszem, internet jest szybki, ale są też inne rzeczy, które musimy wziąść pod uwagę. W 8 czy 16 KB można już postawić elegancką stronę - farmę spamlinków - mieliśmy już zresztą na głowie automaty, które to próbowały robić w 4KB. Staramy się uniknąć takich sytuacji, bo wtedy ucierpią wszyscy użytkownicy (cały serwis może zarobić nieprzyjemny spadek w google, gdy zostanie zaliczony do siedlisk spamu). A jak widać na tutejszym blogu ograniczenia w wielkości pola na HTML nie przeszkodziły w budowie super layoutu.
Co do nowych szablonów - są gotowe, tylko patrzeć jak je włączymy.
-
rdkg
2007/05/04 18:26:00
@ols - nie istnieją zatem inne sposoby dania bloxowiczom możliwości większej swobody w konstruowaniu (celowo użyłem tego słowa) ich blogów, przy zabezpieczeniu się przed spamlinkami?

eskey to maestro w wykorzystaniu tych 4KB miejsca, ale reszta nas nie ma tyle czasu lub wiedzy aby tak dopieścić swojego bloxa. Nawet Ty tak nie masz ;) Dopóki więc eskey nie zacznie tworzyć szablonów na bloxa sam serwis mógłby wyjść na przeciw użytkownikom.

A na zapowiedziane szablony czekam z niecierpliwością :)
-
a.dan.ti
2007/05/04 21:13:32
no rzeczywiście - śliczny ten twój design. i wspaniale że wtajemniczasz w arkana sztuki ;-)
ja bym chetnie poczytala na poczatek o lustrzanych literkach
-
ols
2007/05/04 22:04:27
owszem, istnieją. m.in. o dodatkowym polu na HTML myślimy.
a u mnie - khem, szewc bez butów, te sprawy ;-)
-
stl
2007/05/05 08:21:54
Minizapiski możesz umieścić na blogu za pomocą FeedBurnera - służy do tego zakładka Publicize, sekcja BuzzBoost. Wygodne i zgodne ze standardami :)
-
s.z.y.m.o.n
2007/05/05 16:27:37
Co do tych 4kB to niech już zostaną. Ja byłbym za zwiększeniem możliwości personalizacji już obecnych elementów - kolejnośc elementów w wąskiej szpalcie, czy możliwość wyświetlania ich również na stronie z komentarzami.

@ols - dodatkowe pole na HTML - jestem za...i koniecznie szablon bez tej tabelki

@eskey - jakoś to przeżyję ;)
-
2007/05/06 16:37:47
Instrukcja wykonania błyszczącej literki byłaby bardzo mile widziana (przynajmniej z mojej strony).
-
sgk
2007/05/07 11:51:19
Instrukcje odnośnie literki i cienia pojawią się wkrótce.

Wiem, o możliwości publikowania minizapisków za pomocą różnych metod związanych z RSS, ale ta wybrana przeze mnie, choć trochę nieelegancka na IE i Operze ma ważną zaletę (co powtarzam) - agreguje ruch z dwóch blogów i daje dostęp do szczegółowych statystyk odnośnie poszczególnych wpisów ;)
Na razie niech więc zostanie jak jest (najwyżej pokombinuję z właściwościami scrolling...).

Jeśli chodzi o ten limit: moje zdanie jest takie, że jeśli ktoś bardzo chce to i w te 4KB może wepchnąć mnóstwo "spowalniaczy" czy spamu, nawet bez używania javascriptu. Ale skoro taka polityka administracji, to trzeba ją akceptować i stosować "rozwiązania". Niech więc ona zostanie, a ulepszony zostanie interfejs zarządzania plikami w zasobach czy tak jak sugeruje s.z.y.m.o.n umożliwione zostanie decydowanie o kolejności elementów wąskiej szpalty.
-
sgk
2007/05/07 12:08:11
@ols
A ten optymalizator jest ciekawy o tyle, że pokazuje w jednym miejscu różnicę między JPG o jakości 70%-100% (bo wszystkie poniżej się nie nadają). Natomiast na moje oko wygląda, że mam jednak optymalną (choć dużą) wersję nagłówka...
-
2007/05/12 21:57:36
dopiero dziś tu zajrzałam, ostatnio odbiegłam trochę od bloxa, a tu takie zmiany :-)), dla mnie absolutna bomba, chapeau bas! na podłodze leżeć nie będę, chociaż początkowo to chyba i pod podłogą się na chwilę znalazłam, ale wylazłam czym prędzej, bo stamtąd źle widać ;-) a tu by się chciało patrzeć i patrzeć i oka nie odrywać :-)
-
sgk
2007/05/14 00:05:56
Dzięki taisho!
Z ust (ręki?) kogoś, kto zrobił niejeden szablon i ma uznane na bloksie Nazwisko to bardzo budujący komplement :)
-
2007/05/18 15:14:52
Blog naprawdę bardzo ciekawy. I już na pierwszy rzut oka widać, że włożyłeś w niego bardzo dużo pracy.
A co do instrukcji to ja bym chętnie poczytała jak zrobić takie "coś" jak Ty masz z linkami (nad ostatnimi komentarzami)... Swoją drogą jak sie takie cudo nazywa?

Pozdrawiam
-
sgk
2007/05/19 00:33:21
Dzięki za pochwały i zapraszam częściej ;)

A Tobie pewnie chodzi o "chmurę tagów"...
Można o niej poczytać choćby tutaj , albo w innych wpisach związanych z tagiem/kluczem del.icio.us (kliknij na niego a trafisz do innych powiązanych wpisów).
-
Gość: rafał, *.internetdsl.tpnet.pl
2007/11/21 12:18:01
Napisz poradnik jak zrobić "3X" bo dalej nie rozumiem :/
bloxowe porady

RSS


dodaj do netvibes

Add to Google


pobierz Spiceworks - darmowe oprogramowanie do zarządzania infrastrukturą IT