Od dzisiaj hostuje nas Dreamhost. Zobaczymy jak nowy hostingodawca będzie się sprawował. Nowe konto kupiliśmy za śmieszną kwotę 70 kilku złotych za rok. Mamy do dyspozycji 20 GB przestrzeni dyskowej i 1TB transferu miesięcznie - i obie te rzeczy mają się zwiększać co tydzień. Jestem ciekawy jak to będzie wyglądało w praktyce, czy prędkość będzie zadowalająca, jaka będzie częstotliwość padów. Zobaczymy czy będzie miło “brykał”.
Jeśli sami chcecie potestować Dreamhost taniej wyjdzie ze specjalnym promo code’em, który wygenerowaliśmy: TANIEJ. Obniża cenę takiego konta które my mamy (jego wartość wg cennika to $119.4) o $97. Tanio?
W Tokijskim magazynie PingMag, Jon przedstawia pięć webdesignerskich wzorów, które mają być odpowiedzią na najczęstsze problemy użytkowników dotyczące usability.
Jednym z ciekawszych rozwiązań jakie wskazał Jon wydał mi się Elastic Design. Chodzi to taki rodzaj layoutu, który automatycznie dostosuje swoje proporcje gdy zwiększy się rozmiar fonta w przeglądarce.
Sposób prosty i sympatyczny - layout nie tylko nie “rozjeżdża się” po zwiększeniu rozmiaru fontu z poziomu przeglądarki ale też “skaluje się”. Chodzi o coś takiego.
Jak to zrobić? Całe to “magiczne” skalowanie opiera się o działanie na jednostkach em w CSSie. Em to specyficzna, relatywna jednostka której rozmiar odpowiada wielkiej literze M (czy “bloku”, który ta litera zajmuje). Em jest relatywna czyli jej długość zależy od innej długości.
W naszym wypadku jednostką wyjściową będzie domyślne em przeglądarki. Domyślne em w większości popularnych przeglądarek wynosi 16px. Dlatego w body ustaliłem 0.75em co odpowiadałoby 12px fontowi.
Rozmiar .em jest relatywny - zaznaczam kolejny raz - czyli jeśli w body ustaliłem font-size na 0.75em to naszym nowym 1em w klasach dziedzicznych do body będzie odpowiadało 12px. Powiedzmy, że chcemy, żeby domyślny layout miał szerokość 760px. 760px / 12px = 63.33em. No i już wiemy, że nasz główny kontener będzie miał 63.33em.
Resztę rozmiarów robimy analogicznie. Trzeba pamiętać tylko o tym, że esencją emów jest ich relatywność, tak więc projektując konkretne rozwiązania graficzne musimy mieć na uwadze to, że domyślne ustawienie pewnie będą skalowane - layout będzie rósł lub malał więc, żeby nic się nie posypało trzeba unikać jednostek absolutnych (mówię o pikselach jeśli piksel to jednostka absolutna co nie do końca jest prawdą).
Wszelkie paddingi, marginesy i interlinie muszą być elastyczne i relatywne, muszą wzajemnie się określać, dzięki temu zachowamy odpowiednie proporcje w czasie powiększania.
Na koniec efekt mojej, krótkiej zabawy w elastyczny layout. Zrobiłem w ten sposób coś na kształt wersji popularnej, blogowej skórki K2. Nie powala graficznie ale pokazuje jak łatwo i szybko można:
zrobić coś na kształt skórki k2 ;)
zrobić to coś opierając się tylko o jednostki relatywne
Oczywiście nie twierdze, że tylko tego rodzaju layouty są dostępne lub użyteczne ale na pewno zrobienie czegoś takiego to dobre ćwiczenie. Ćwiczenie zmuszające do skupienia się nad zachowaniem naszego projektu przy różnych rozmiarach fontów. I raczej w dostarczaniu możliwości swobodnego i bezstratnego manipulowania rozmiarem fontów dopatrywał bym się użytecznych i dostępnych wzorów dobrego projektowania.
Acha, kilka linków, które możecie uznać za ciekawe
Em Calculator - może pomóc w liczeniu (jeśli koniecznie musisz przeliczać na px - co obowiązkiem przy stosowaniu emów nie jest) ale nie musi bo dzielenie na liczbach naturalnych to mało zaawansowana matematyka. ;)
//edit: od dzisiaj (29-07-06) yashke.com jest elastyczne
Do naszego projektu potrzebowałem prosty, tzn. nie WYSIWYGowy, edytorek HTMLa, w którym mógłbym otagowywać zaznaczone teksty i dodawać odpowiednie znaczniki. Oto co osiągnąłem:
Skrypt korzysta z Prototype’a, właściwie tylko ze względu na to, że sama aplikacja też z niego będzie korzystać, dlatego można się bez problemu pozbyć nadmiarowych 54 kb.
Samo stworzenie edytora zajęło maksymalnie godzinę, ale znalezienie informacji potrzebnych do jego stworzenia zajęło kilka godzin, jeśli nie dni, a znalazły się one potem właściwie przez przypadek.
Skrypt jest na licencji GNU tak więc bierzcie i korzystajcie.
OmniPlan - nowy produkt od Omni Group. OmniPlan jest aplikacją do zarządzania projektami. W środę ma pojawić się publiczna beta projektu. Ciekawe jak zniesie porównanie do BaseCamp.
Javascript Sound Kit - przyjemny JavaScriptowy sposób wywoływania obiektów dźwiękowych we Flashu. Sound Kit pozwala tworzyć szybkie odwołania do dowolnego pliku mp3 w sieci i odtwarzać go z poziomu przeglądarki.
Take It Apart - różne ciekawe przedmioty… rozłożone na części
