Making of Perfection or Vanity

Project: Terminated

Blog nie jest już dalej prowadzony ani aktualizowany. Mimo tego, wpisy i komentarze są dalej dostępne. Możesz przeczytać pożegnalny wpis albo przejść do archiwum.

Podczas tworzenia tego designu zachciało mi się uwiecznić proces zapisz-przełącz-przeładuj w serii screenshotów. Pokazują one w jaki sposób wygląda składanie strony przy pomocy CSS – podobną prezentację już kiedyś postowałem.

Jak widzicie, nie ma znaczenia to jak strona wygląda po wpisaniu HTML-a, ważne jest to co potem CSS z nim robi. Dodam jeszcze, jeśli nie byłoby to jasne: HTML nie był edytowany podczas tej prezentacji ani razu.

Tagi wpisu: css, design, presentation, screenshot

Informacje i hiperłącza

Piotr Petrus 'Riddle'

Blog o projektowaniu zgodnych ze standardami stron internetowych.

Praktyczne przykłady, sztuczki CSS, sposoby obchodzenia błędów przeglądarek, lekki i nieinwazyjny JavaScript, użyteczny design, dostępność i skrypty użytkownika.

RSS

Informacje o wpisie

Napisał riddle 12 września 2007 o 03:17

Kategorie: CSS, Design, Jogger

Wpisy archiwalne

Archiwum miesięczne

Dzięki!

Komentarze

Riddle 1 12 września 2007, 03:18

Wiem, że nie piszę ostatnio za często, a nawet można powiedzieć, że nie piszę w ogóle. Zmieniłem niedawno pracę, ale zaczynam chyba rozumieć, że nie będę w stanie pisać częściej jak raz, maks. dwa razy na tydzień z uwagi na charakter wpisów – większość to artykuły.

Wybaczcie też proszę angielski tytuł wpisu, ale jest prawie wpół do czwartej i nie mam pomysłu na nic innego. :]
wh1t3en 2 12 września 2007, 03:22

Oj Riddle, właśnie chciałem prosić cię o takie step-by-step tego desingu.
Dziudek 3 12 września 2007, 03:27

Bardzo fajna koncepcja z tymi screenshotami – mnie osobiście by się nie chciało ich robić jednak xD Lubię tego typu filmiki bo widać w nich potęgę CSS :) Szkoda, że filmik na YT bo rozdzielczość troszkę za niska jak dla mnie.

P.S.: Co z tego, że wpół do czwartej – najlepsza pora na pracę XD Ja na przykład muszę walczyć z jakimiś dziwnymi pluginami do Wordpressa o tej porze i pisać angielską dokumentację do modułu xD
Riddle 4 12 września 2007, 03:30

Wyższa reska, zły ideologicznie format (tak, używałem WMM):
perfectionorvanity.wmv (2,5MB)

PS: Nie zwracajcie uwagi na widoczne gdzieniegdzie tanie teksty. ;-)
Dziudek 5 12 września 2007, 03:31

@Riddle – dzięki :) [szuka popcornu i gasi światło w pokoju] ;)
radzio 6 12 września 2007, 09:00

Zmieniłem niedawno pracę, ale zaczynam chyba rozumieć, że nie będę w stanie pisać częściej jak raz, maks. dwa razy na tydzień z uwagi na charakter wpisów – większość to artykuły.

Na Twitterze widzę, że „dreamjob” więc gratulacje. Co do ilości to imo nie masz się o co martwić – 1 albo 2 wpisy-artykuły na tydzień to odpowiednia ilość ;]. Ważne, że będzie systematycznie ;-).
koziolek 7 12 września 2007, 09:09

Super ;) Szkoda że ja jeszcze tak nie potrafie i mam cały czas problemy z Firefoksem :(

@radzio,

Ważne, że będzie systematycznie ;-).

To już poże podchodzić pod czasopismo :P
D4rky 8 12 września 2007, 09:21

redesigned ci wcielo pod koniec :P
ale sam step-to-step ciekawy, pokazuje jak bardzo ruszylismy sie od czasow HTML+tabelki i wojny IE z NS :)
Seban 9 12 września 2007, 09:29

Fajny dokument ;-) Riddle jakość przede wszystkim, nie ilość
bash3r 10 12 września 2007, 09:34

Jakość, jakoś a nie ilość :)

Wracając do tematu to filmik zrobił na mnie duże wrażenie … lubię oglądać coś takiego :)
Marcin (Ktos) 11 12 września 2007, 10:19

Zadanie domowe dla czytelników – to samo na tabelkach :-)

PS. Piszesz tak rzadko, że nowy, alpha jeszcze, Blogfrog.pl stwierdził, że dla tego bloga nie ma wpisów w ogóle ;-)
Piechuła 12 12 września 2007, 11:28

OJ tak, praca w CSS jest zdecydowanie najprzyjemniejszym fragmentem przy tworzeniu stron www. Gdyby jeszcze nie istniał IE… :)
ein 13 12 września 2007, 12:24

Hmmm… Kiedyś robiłem stronki oparte na tabelkach. Przemówiło do mnie dopiero CSS Zen Garden :)

Animacja fajna, powinna przemówić do klepaczy kodu opartego na tabelkach, ramkach itd.

BTW, to „of” w tytule jest błędne, powinno być „Making Perfection or Vanity”.

Pozdrawiam.
Hexe 14 12 września 2007, 13:11

Dobry pomysł, miło się oglądało :).
Dev 15 12 września 2007, 14:16

Bardzo fajne :) zaczynam dopiero przygodę z CSS... może kiedyś będę takie cudeńka wyczyniać :)
Modrzew 16 12 września 2007, 15:23

Jeszcze większą poezją jest spojrzeć na swoje końcowe dzieło, wcisnąć Ctrl + Shift + S (tylko dla użytkowników Firefoksa z Web Developerem; dla innych: wyłączyć style) i dumnie się uśmiechnąć.

BTW, czy czasem poprawniejszą formą nie byłoby „Making of: Perfection or Vanity”? :> (wiem, czepiam się)
piXelRider 17 12 września 2007, 15:53

Hmm, pod Operą 9.23 PL nie wyświetla tego filmu :( [pluginy itp. mam włączone]
reod 18 12 września 2007, 16:22

Ja to słyszę w tle muzykę z „Requiem for a Dream” i na końcu głos Don LaFontaine mówiący: „PerfectionOrVanity.com – the future of web is near…”

;)
cimlik 19 12 września 2007, 16:50

Ciekawe, ale zauważyłem, że nie pokazałeś ostatecznego efektu na końcu. Top wygląda na filmiku nieco inaczej ;).
Riddle 20 12 września 2007, 16:51

Miałem więcej screenów, ale zacząłem przesuwać ekran i oglądanie tego było bolesne. :-)
Seban 21 12 września 2007, 16:54

Teraz tak sobie pomyślałem dopiero, że fajnie by to też wyglądało z takimi przebitkami strzępów CSSa. Kursor coś tam sobie dopisuje, puf i zmiana na ekranie, puf, znowu kursor coś tam pisze, puf ekran. A na końcu walidacja: 0 errors. Albo jeśliby zakończyć film traficznie to: walidacja zwraca jeden błąd :D, i webmaster umiera. Tak sobie tylko myślę ;-)
hinok 22 12 września 2007, 17:13

Szkoda tylko, że w tle nie leci żadna muzyczka ;)
Riddle 23 12 września 2007, 17:14

Bardzo szkoda, ale na pomysł wpadłem po fakcie. ;)
Walker 24 12 września 2007, 17:17

Super, tylko tak, jak mówi Seban – szkoda, że nie ma przeplatanki z kodem :).
Mateusz Papiernik 25 12 września 2007, 19:15

Ano szkoda, też byłoby fajnie. Ale zakładając choć częściowe podobieństwo miedzy mną a Riddlem – mnie by się nie chciało walczyć z tym filmikiem dłużej. Ciekawe jak Riddlowi :]
pijanyadmin 26 12 września 2007, 19:16

(Komentarz zmodyfikowany 15.09.2007 o 20:19)
~~Trochę zejdę z tematu… Co jest takiego w „CSS Zen Garden” że ludzie się tak tym zachwycają?~~
D4rky 27 12 września 2007, 19:26

(Komentarz zmodyfikowany 12.09.2007 o 21:15)
pijanyadmin – to jedna z tych tajemnic wszechswiata jak to, dlaczego kromka zawsze spada posmarowana masla na dol, albo jak ludzie potrafia uzywac Windowsa i go chwalic za bezawaryjnosc chwile przed BSODem i wkurwionym waleniem w klawiature na przyciskach Ctrl Alt i Delete
egzemplarz 28 13 września 2007, 20:22

(Komentarz zmodyfikowany 15.09.2007 o 20:19)
@pijanyadmin
Bo niektóre projekty tam prezentowane są naprawdę świetne ;). Chyba dlatego. Poza tym, znasz drugą taką stronę jak CSS Zen Garden?
pijanyadmin 29 14 września 2007, 09:06

(Komentarz zmodyfikowany 15.09.2007 o 20:19)
egzemplarz – kwestia gustu. Emm jaką strone? Gdzie jest w tym jakiś fenomen? Chodzi Ci tylko o podmiane plików graficznych poprzez css? To powoduje że innym kopara opada?

ps. jak możesz daj link do jakiejś „świetnie prezentowanej tam strony”
Winhelp 30 14 września 2007, 18:34

Internal Server Error z tym WMV
egzemplarz 31 15 września 2007, 20:13

(Komentarz zmodyfikowany 15.09.2007 o 20:19)
http://csszengarden.com/?cssfile=/196/196.css&page=0
Jak dla mnie jest to naprawdę porząny design, jakich w sieci mało. Prosty, ładny i przyjemny. Poza tym jest więcej fajnych, tylko nie pamiętam teraz ich numerów. Postaram się na dniach coś dostarczyć.
D4rky 32 15 września 2007, 20:17

(Komentarz zmodyfikowany 15.09.2007 o 20:19)
~~egzemplarz – ARGH!! MOJE OCZY!!! X_X~~
Sinus Camera 33 16 września 2007, 10:10

Świetne. Dodaj muzykę i wrzuć jeszcze raz. A potem jeszcze raz z zoomem ;-)
k 34 16 września 2007, 13:38

Mnie też WMV powiedziało, żebym sobie poszedł, da się to poprawić? ;) (BTW error 500 przy próbie ściągnięcia)
Riddle 35 16 września 2007, 13:38

To mój świetny livenet.pl. Robię out niedługo, eot.
Czasowstrzymywacz 36 18 września 2007, 14:45

OJ Riddle… cyt. „Zmieniłem niedawno pracę, ale zaczynam chyba rozumieć, że nie będę w stanie pisać częściej jak raz, maks. dwa razy na tydzień z uwagi na charakter wpisów – większość to artykuły.” Żebyś Ty pisał chociaz raz na miesiąc (metafora) :).
Piotr Usewicz 37 19 września 2007, 15:18

Następnym razem sugerowałbym użyć np. Vimeo. Lepsza jakość :)
mruwek 38 30 września 2007, 14:26

heh :D Prawie to jak słynne już na jojtubie „Dove – Evolution”
pawkow 39 02 października 2007, 16:47

No niestety, jesteśmy jeszcze na takim etapie, gdzie możliwości CSS’a pozostają niedocenione, a w szkole uczą o <table> i <font>. Takie prezentacje mogą przyciągnąć do CSS’a, zapoznania z jego możliwości, i są nieocenionym przykładem tego, co z dobrze napisanym HTML’em można zrobić ;) Dobrze, że są jeszcze tacy jak Ty ;)
satorian 40 03 października 2007, 19:31

(Komentarz zmodyfikowany 03.10.2007 o 19:33)
Niedocenione możliwości CSS? Bez przesady. Którego z elementów tego layoutu nie dałoby się wykonać na tabelach? Gorzej w drugą stronę- są rzeczy które można zrobić TYLKO przy użyciu tabeli. Ja rozumiem, że standardy i w ogóle moda na „tableless” jest na topie, ale robienie z tego takiego halo podchodzi pod intelektualny onanizm
Winhelp 41 03 października 2007, 19:33

(Komentarz zmodyfikowany 03.10.2007 o 19:34)
Tu nie chodzi o to, czy się da czy nie, tylko że na CSS jest łatwiej i kod ładniejszy i w ogóle bardziej przejrzyście ;) I łatwiej zmiany wprowadzać... A dla upartego w CSS nie ma rzeczy niemożliwych ;) Zresztą przecież można zrobić układ na tabelkach, ale sformatować go CSS’em i uzyskasz te „rzeczy, które można robić tylko przy użyciu tabeli” :)
// a tak, słusznie Riddle ;)
Riddle 42 03 października 2007, 19:34

Ogłoszenie: nie karmić trolla.
wh1t3en&skera 43 03 października 2007, 19:34

(Komentarz zmodyfikowany 03.10.2007 o 19:34)
~~@satorian LOL?! Pokaż mi chociaż jeden przykład, który można zrobić na tabelach, a nie można robić w CSS?! „tabless” to nie tylko napieprzanie w css bo tak, tu chodzi o semantykę...~~
D4rky 44 03 października 2007, 19:40

(Komentarz zmodyfikowany 03.10.2007 o 19:42)
Riddle – postaram sie go nie karmic, tylko delikatnie poinformowac:
satorianie – stron na tabelkach nie powinno sie robic z dwoch podstawowych powodow.
a) sa ciezsze, przez co wolniej i gorzej sie laduja
b) zle sie wyswietlaja na urzadzeniach handheld (palmtopy, komorki), przez co caly layout jest posypany.
Z tego samego powodu nieeleganckie jest wrzucanie <img/> do kodu strony, gdy obrazek nie ma zwiazku z trescia, a jest elementem layoutu – bo potem artefakty zostaja jak wylaczysz style
satorian 45 04 października 2007, 09:00

@D4rky:
a) mit
b) drugi mit

@wh1t3en&skera:
Na forum php jest piękny i długi flame poświęcony temu zagadnieniu. Jeden z tamtejszych krezusów (mike) do dzisiaj nie uporał się z prościutkim zadaniem jakie mu dałem . Może Ty się zmierzysz? Myślę, że wątek zasługuje na małe odświeżenie.

http://forum.php.pl/index.php?s=91b5ed342cc5539cedea985acc7fd3ef&showtopic=48750&st=220
Winhelp 46 04 października 2007, 19:57

Riddle wie, jak to zrobić, popatrz:
http://perfectionorvanity.com/2007/03/07/rowne-kolumny-layoutu-css/
Hacki są, ale na przeglądarkę z epoki kamienia łupanego(IE), więc wiesz ;)
satorian 47 04 października 2007, 22:07

no właśnie o hacki chodzi. Mike odgrażał się, że wszystko da się zrobić bez, a jak ktoś nie wie jak, to znaczy że jest głupi. No ale kto się śmieje ten się śmieje ostatni. Ten komentarz byłby dłuższy gdyby nie to, że cudowny layout tej strony potrafi posypać się pod Operą. Przełączyłem się na chwilę na innego taba i po powrocie zastałem video Riddle-a zasłaniające pole formularza. Syndromatyczne.
Michał Mech 48 16 października 2007, 17:50

Na forum php jest piękny i długi flame poświęcony temu zagadnieniu. Jeden z tamtejszych krezusów (mike) do dzisiaj nie uporał się z prościutkim zadaniem jakie mu dałem .

1. Nic mi nie dałeś bo nie pisałeś w tamtym wątku. A jeśli tak to wypadałoby podpisać się tym samym nickiem.
2. Cytowany watek jest sprzed ponad roku, trochę dawno.
3. Nie nazwałem w nim nikogo głupkiem, tym bardziej jeśli nie potrafi czegoś zrobić. Nie ładnie kłamać.
4. Nie używaj słów, których znaczenia nie rozumiesz bo Twoja wypowiedź zaczyna nosić znamiona śmiesznej. Dowiedz się co znaczy krezus zanim znów tak napiszesz.
mikee 49 25 października 2007, 17:17

Ciekawe, czy Riddle w końcu zaszczyci nas jakąkolwiek nową notką... ;)
Riddle 50 25 października 2007, 17:19

Ta… mam parę draftów i o wiele więcej pomysłów na nocie, ale na razie praca ważniejsza. Jak czytasz RSS to i tak chyba Cię to mało obchodzi, nie? ;)

Gdyby nie to, że długo nie piszę to nie prowadziłbym offtopiku. Nie bierzcie ze mnie przykładu. ;)
michal 51 02 listopada 2007, 21:36

Od zawsze wiedziałem, że css ma moc;)
CoYoT 52 06 listopada 2007, 20:14

A ja tak z ciekawości spytam – co to za player, bo straszne gówno jakieś. Nie wykrywa mojego Flasha 9 i odmawia puszczenia filmu (Flash 9.0, Firefox, Linux).
Winhelp 53 06 listopada 2007, 20:14

Vimeo :)
Versus 54 09 stycznia 2008, 14:27

CSS jest najlepszy. Na początku trzeba się trochę namęczyć, ale za to później jest dużo łatwiej :)
zar 55 03 kwietnia 2008, 08:27

Świetny screencast :) Pokazuje, w czym tkwi potęga CSS :)
joa 56 19 września 2008, 15:30

Ja się tu męczę z tabelkami, formatem menu, jakimiś nieświadomie i eksperymentalnie wklejanymi skryptami css i javy, no i z moim nieodłącznym notatnikiem… Ale po oglądnięciu takiego filmiku aż się chce poznawać css’a! Tylko jak się do tego wziąć? No i szkoda, że autor już nie pisze ;/

Informacje i hiperłącza

Informacje o wpisie

Wpisy archiwalne

Dzięki!

Komentarze

Dodaj komentarz