Nowy szablon
26/06/2010, 14:50:49 | 59 komentarzy | Miniblog
Jak zwykle postanowiłem postawić na minimalizm. Czcionka użyta w treści wpisów to Calibri, która jest po prostu ładna i czytelna, ponieważ jednak zdaje sobie sprawę, że użytkownicy innych niż Windows Vista i Windows 7 systemów jej nie posiadają, istnieje fallback do Arial'a, który też wygląda OK. Wstawiłbym Calibri jako osadzonego webfonta, ale mam dziwne wrażenie że posiadanie licencji na system Windows nie pozwala mi na użycie tej czcionki w ten sposób. Jeśli ktoś poleci inną czcionkę którą mogę osadzić jako alternatywę do Calibri (tj. na wolnej licencji) i wygląda podobnie do tejże, to być może pozmieniam trochę reguły CSS'a.
Archiwum i kategorie będą działać w jakimś późniejszym terminie, gdyż wydzielam je do osobnej strony - z mojego doświadczenia wynika, że prawie nikt z tego "ficzera" i tak nie korzysta.
Strona testowana pod najnowszym Firefoksem, Chromem i IE. Pod IE wygląda brzydko - i trudno.
Zapraszam do komentowania nowego wyglądu.
Web Fonts to zło, nie wiem, po co to wymyślili.
Na twoim miejscu bym trochę poprawił interlinię i różne marginesy, ta czarna krecha trochę szpeci i ma za duży kontrast → rozprasza przy czytaniu, ale tak to wygląda spoko :)
Próbuj Aller, fajna czcionka. Ewentualnie Droid Sans też jest elo. Nie wiem, jak wygląda do końca sytuacja licencyjna z Allerem.
Fun & games dopóki jest cleartype włączone. Inaczej - dramat & wtf. ;)
Wasacz -- Zmniejszyłem rozmiar kreseczki ;) A z interlinią o co ci konkretnie chodzi? IMHO odstęp pomiędzy liniami tekstu jest ok.
flegmatyk -- aller jak widzę ma za restrykcyjną licencję, droid sans nie przypomina w ogóle calibri, rozumiem że nie znajdę dokładnie takiej samej "wolnej" czcionki, ale chcę chociaż w miarę podobną ;)
Ło... minimalizm maksymalny :O
Wygląda fajnie, tylko:
- popracuj nad formularzem komentarzy
- linki "Kategorie" i "Archiwum" nie działają
Wygląda jak "wersja do druku", co jest oczywiście plusem :)
W polu komentarza można jeszcze dodać odstęp
za "Podpis" i normalny tekst przycisku.
> istnieje fallback do Arial'a
FFFFFFFUUUUUUUU
Dodawanie komciów powinno być jakoś bardziej wyrównane (pola do wpisywania wg mnie powinny się zaczynać w tym samym miejscu - odległości od lewej). A z czarnej krechy zrób trochę mniej czarną krechę :)
Edit - również kapkę większy odstęp między komentarzami a formularzem do ich wstawiania mógłby wyglądać lepiej. Oraz dodaj link do edycji komentarzy ;P
WebKing (#) 26/06/2010 - 17:48:44
Jeżeli chcesz pomoc przy formularzu, napisz pod jabber: webking [monkey] jabber.org
btw - komentarze daj w <article> i cały post też w <article> (czyli zagnieżdżone jedne w drugim, będzie sementyczniej).
no, no, prawie tak samo ładnie jak u mnie... :P
> no, no, prawie tak samo ładnie jak u mnie... :P
No, K2 bez nagłówka jest takie problogger ;>
no ba, profeska pełną gębą ;D
ale on ciągle 'topnieje', aż uzyska miano nanomalizmu ;D
Dzięki za sugestie, jutro się za to wezmę, i może ostyluję formularz, bo na razie z lenistwa dałem standardowy joggerowy ;)
Zamiast Ariala daj chociaż Verdanę, Tahomę, Helveticę czy też inne ludzkie.
Co do interlinii - przy tym rozmiarze czcionki interlinia jest zdecydowanie za mała.
Bez cleartype nagłówek obsysa.
zammer -- ok, pomyślę nad verdaną lub tahomą, helvetica to arial różniący się paroma glyphami więc raczej dziwny argument podajesz ;)
Oj Pecet uważaj, bo zaraz zraidują Cię fanboje helvetiki :P
>helvetica to arial różniący się paroma glyphami
No cytat roku!
jako że nie ma opcji edycji komentarza, muszę zaspamować nowym. Nie jestem pewien, czy to <section id="content"> jest użyte zgodnie z semantyką tego elementu. Według **mojej osobistej** interpretacji [specyfikacji](http://dev.w3.org/html5/spec/Overview.html#the-section-element) powinien to być zwykły div, głównie ze względu na "A section, in this context, is a thematic grouping of content, typically with a heading."
Przykłady też są trochę inne. Ale nie wiem, naprawdę chętnie poznam argumenty za tym, żeby stosować section w taki sposób jak Pecet.
PS Przeszkadzajki do formatowania tekstu nie działają.
Kosa -- http://html5doctor.com/designing-a-blog-with-html5/ z tego korzystałem i tam mniej więcej jest taki sam układ "semantyczny" jak mój ;)
Dodałem edycje komentarza, po za tym myślałem, że jeśli nic nie pisze o textile/markdown to logicznym jest, że czegoś takiego u mnie nie ma ;)
BTM -- nie chce mi się grzebać w cssie, co musiałbym zrobić gdybym chciał zgodnie z twoją semantyką przerobić szablon ;)
Wasacz, zammer -- zwiększyłem interlinię i odstępy pomiędzy paragrafami
(nie czytałem komentarzy, nie śledzę też nowych)
O fuj! Moje oczy!
No, trochę mniejszy kontrast...
Zammer, skkf --- nie za bardzo wiem o co wam z tym chodzi? Wiele blogów ma czarny tekst na idealnie biały tle, u mnie jest nawet nie idealnie białe ale w odcienu szarości... Zaproponujcie jakiś odcień szarości dla tła to zobaczę czy mi się spodoba ;)
"Wiele blogów ma czarny tekst na idealnie biały tle..."
Co nie znaczy, że to jest dobre. Może chociaż ciutkę? #faf9fb
edit: albo nawet bardziej #ebe9ed
Dałem #fbfbfb bo twój kolor strasznie się wybijał, lepszy szary, ale dzięki.
I pytanie - po kiego grzyba coś takiego?
article header h1:before {
content: '\20dd\00a0';
}
No żeby ładniej wyglądało nie? Nie widzisz tej kropeczki przy tytule wpisu?
Nagłówek strony przy top: -8pt wyjechał mi poza obszar okna, tj. kropka nad "j" jest w połowie ucięta (Firefox)
BTM -- tak ma być.
Oh, to nie ważne w takim razie. Cary on ;-)
No właśnie, kółeczka nie ma, jest szpetny prostokąt. Bo to właściwie jest okrąg, a nie kropeczka.
@zammer: zła czcionka pewnie, normalnie jest coś w stylu ()
No cóż, jakby się dało pisać CSSa który by zależył od tego jaka czcionka jest dostępna, i dla innej by były inne rulesety, to bym to zrobił, a tak trudno - użytkownik bez Calibri musi przeboleć, ważne że u mnie jest.
Dziwne. Bo skopiowawszy sobie i wkleiwszy w pole komentarza - widzę.
⃝
Pod FF - tudzież widzę. Pod Operą - ni hu hu. A Calibri nie mam.
Ewentualnie mogę to obrazkiem rozwiązać, ale nie wiem czy mi się chce, bo chciałem uniknąć używania obrazków w stylu.
tip: border-radius
Wasacz -- tip: nie mam pojęcia jak tym zrobić kółeczko ;)
BTW -- własnie odpaliłem pod Firefoksem na XP i wygląda bardzo ładnie bez Calibri z Arialem i bez AA, nie wiem czemu narzekacie ;)
pecet, łap: http://stuff.wasacz.net/xhtml/border-radius-circle/
BTW, muszę sobie, kurde, nazwę folderu zmienić na serwerze.
Dzięki Wasacz, dodałem :)
Jeśli sobie zamienisz :before na ::before, to w IE nie będzie żadnego symbolu (bo tak byłby kwadrat; IE nie ma border-radius i nie obsługuje pseudoelementów pisanych w CSS3 – to też ciekawe, że nie mogli tego drugiego dwukropka dorobić).
Ale to tak na wyrost, bo widzę, że masz inną politykę w kwestii IE ;)
Uzupełniając - sam szablon - układ, pomysł itd. jest jak najbardziej w porządku, ale białe tło + czarny (imo nietrafiony krój) font wypala gały.
Edit: I jeszcze o ile treść wpisu przyjemnie się czyta, to komentarze imo mają zbyt dużą wielkość fontu. Ale może się tylko czepiam.
Wydaje mi się to kółko teraz trochę większe niż poprzednio, może zmniejszyć border-radius, bo tamto było imo bardziej estetyczne ;)
Też zauważyłem, że na Chrome "pecet jogger" wyjeżdża poza obszar okna do góry.
Jest zdecydowanie lepiej przy zmniejszonym kontraście.
Nie winię Cię za to, bo HTML5 jest nowy i nie za prosty w zrozumieniu, ale musisz popracować nad sekcjami, bo obecnie to [jeden wielki chaos][h5o].
[h5o]: http://img.riddle.pl/_pecetoutline-20100626-211154.png
Wszystkie Untitled Section albo powinny być logicznie zatytułowane albo wyrzucone na rzecz normalnego elementu – na pierwszy ogień poszedłby content, który nie jest zalecany jako sekcja (zwłaszcza na blogu) tylko kontener na sekcje-artykuły.
Proponuję też dodać `<time>` do komentarzy.
A komentarze powinny być zagnieżdżone wewnątrz sekcji wpisu. Możesz też każdy ująć w `<article>` – specka nawet tak zaleca.
PS: Markdown też zły? Plain-text compatible więc komentarz nadal ma sens, ale może warto włączyć? :)
PS2: Ach no i zdecydowanie nie piszesz po angielsku, więc zmień zapis na `lang="pl"`.
riddle: czym generowałeś outline? Jakiś bookmarlet? Ostatnio chciałem trochę właśnie podłapać sementycznej strony HTML5 ale nie ma dużo o tym w sieci.
<plug> http://perfectionorvanity.com/post/728669727 </plug>
@riddle
Z komentarzami w <article> jest trochę bez sensu. Bo niby zalecają każdy komentarz jako osobny <article>, ale przecież on nie stanowi spójnej całości, która ma sens poza kontekstem komentowanej treści i pozostałych komentarzy.
Ma sens, pozwól że przekopiuję mój komentarz z [html5doctor][h5d]
> If you want to display recent comments in your blog’s sidebar,
> you won’t use `<article>` because they are not independent in
> context of their parent content – in this case sidebar section.
>
> But if you have a complete blog post and you encapsulate them
> in its `<article>`, you have a different situation:
>
> Now each comment is self-contained piece of content which
> makes sense on its own, but only being in the parent `<article>`
> – take it outside parent `<article>` and it doesn’t make sense.
> But when published under blog posts, you can delete other
> comments and this nested `<article>` with comment will make sense.
[h5d]: http://html5doctor.com/the-article-element/#comment-4038
Sęk w tym, że komentarze odnoszą się zarówno do treści wpisu, jak również do poprzednich komentarzy. Tworzy się rodzaj dyskusji. Niektóre faktycznie mogą mieć nadal sens po usunięciu pozostałych, ale większość utraci znaczenie (lub jego część).
Np. Ten komentarz prawie w ogóle nie odnosi się do samego wpisu, lecz do kilku poprzednich komentarzy.
Tyle że np. sama specyfikacja zaleca stosowanie <article> do komentarzy:
http://www.w3.org/TR/html5/sections.html#the-article-element
Rozumiem – na pewno HTML5 nie mówi Ci że *musisz* używać takiego a nie innego kodu. Jeśli komentarze na Twojej stronie są reblogami (jak w przypadku Tumblr), warto umieścić je w article. Jeśli są zagnieżdżone wątkami (jak na Diggu), może warto je wrzucić w listy i zapomnieć o problemie.
Komentarze mogą oznaczać tyle rzeczy, że nie sposób o wszystkich napisać. HTML5 to nie XHTML – zasad jest o wiele więcej, specyfikacja zaleca pewne rzeczy ale to co się bardziej liczy to rzeczywistość.
Tutejsze komentarze osobiście wrzuciłbym do article, bo są typowo blogowe. Wszystkie odnoszą się do parenta. Nie słowami, ale typem contentu. ;)
W tym tkwi problem HTML5. Pewne rzeczy zaczęto rozmieniać na drobne. Niestety tych drobnych będzie albo za mało, albo za dużo.
XHTML był bardziej ogólny i to było dobre.
To tak jak z klockami LEGO. Kiedyś były tylko podstawowe elementy i można było zbudować wszystko. Teraz można dostać zestawy, w których nie będzie dwóch takich samych klocków. Nadal można zbudować wszystko, ale często trzeba używać klocków, dla których przewidziano zupełnie inne zastosowanie.
BTW Pecet - Przycisk "Wyślij zapytanie" jest bez sensu. Tu się komentarze pisze, a nie zapytania.
Myślę, że przesadzasz. XHTML wcale nie miał sztywnych zasad – nie miał ich prawie wcale. Semantyka <i> czy <small> nie istniała. HTML5 wychodzi naprzeciw istniejącym stronom i ich potrzebom. A to jak wyglądają szczegóły się dotrze samo. Na swojej stronie nie użyłbym teraz article dla obrazków, parę miesięcy po wypuszczeniu. HTML5 jest nowy, trzeba się go aktywnie uczyć, a nie czekać na jakieś zbawienie w3c.
Pozostaje mieć nadzieję, że doczekamy dojrzalszego HTML5.2 czy HTML7 i W3C nie zaskoczy nas kolejnym zwrotem 90° (bo faktycznie nie jest aż tak źle, żeby mówić o 180°).
I na tym chętnie zakończę temat lepszości jednego standardu nad drugim.
@Pecet - teraz bardzo mi się podoba ten przycisk ;)
Ja bym tam wstawił po prostu "Trolluj" i po problemie ;)
> W tym tkwi problem HTML5. Pewne rzeczy zaczęto rozmieniać na drobne. Niestety tych drobnych będzie albo za mało, albo za dużo.
> XHTML był bardziej ogólny i to było dobre.
+1. Poza tym, XHTML2 miał atrybut `role=""`, który był w pełni rozszerzalny.
> Pozostaje mieć nadzieję, że doczekamy dojrzalszego HTML5.2 czy HTML7 i W3C nie zaskoczy nas kolejnym zwrotem 90° (bo faktycznie nie jest aż tak źle, żeby mówić o 180°).
Owszem, tylko że jak doczekamy się tego HTML 7.0, to W3C potem zacznie wprowadzać znów burdel w HTML 8.0, i historia z HTML 3.2 czy HTML 5.0 się powtórzy.