Posty otagowane jako CSS3

m4txblog++

Zmiany na blogu 7

Jakieś 2,5 roku temu informowałem o m4txblogu 2.0. Dziś inkrementujemy numerek: nadeszła era m4txbloga³.

A w nowym m4txblogu? Oczywiście nowy theme. Tym razem w odstawkę poszły gotowce. No, prawie. O ile sama baza motywu nie jest moja, o tyle cały wygląd strony już tak. I choć mam chore poczucie estetyki, myślę, że wyszło nienajgorzej 😉

Wspomniałem o bazie theme’u. Otóż oparty on jest przede wszystkim na dwóch frameworkach:

  • Roots, czyli bazowy motyw dla WordPressa, pozbawiony wszelkich śmieci
  • Twitter Bootstrap, czyli funkcjonalny framework do tworzenia UI webaplikacji

Co można powiedzieć o tych dwóch?

  • Roots robi to, co powinien robić i robi to dobrze. Nie tylko sam jest pozbawiony śmieci, ale również usuwa część śmieci z WordPressa. Jest dość dobrze konfigurowalny i dostosowywalny; dzięki prostej i (w większości) intuicyjnej budowie łatwo dodać lub zmienić określoną funkcjonalność.
  • Bootstrap to kombajn do robienia GUI. Zawiera masę (nie zawsze) przydatnych kontrolek, a przede wszystkim mocno ułatwia tworzenie responsywnych layoutów (a właściwie odwala 90% roboty z tym za webmastera). Dzięki temu, że jest oparty na LESS-ie (którego niedawno opisywałem) modyfikacja go jest nie tylko prosta, ale i wygodna. Warto jednak powiedzieć o głównej wadzie: generuje sporo zbędnego kodu.

Rozpisywanie się o zaletach, wadach i poradach dotyczących użytkowania jednego i drugiego to temat na 2 osobne wpisy, dlatego odpuszczę sobie to w tym momencie; tak czy inaczej, polecam te 2 pozycje każdemu webmasterowi, który przy rozsądnym nakładzie pracy chce zbudować fajnie działającą stronę, i to nie tylko na desktopy… 🙂

Odpowiem teraz na pewne pytanie: na czym się skupiłem w tym theme’ie?

  • Dostosowaniu motywu do wyświetlaczy o dużej gęstości pikseli (Retiny i inne): layout zawiera tylko 1 obrazek rastrowy i jest nim tło strony. Wszystko inne to albo efekty CSS3, albo tekst (tekstem są m.in. również ikonki), albo obrazki wektorowe w SVG (logo HTML5 w stopce). Inaczej mówiąc: skalujcie sobie ile chcecie, i tak wszystko będzie idealnie ostre… 🙂 (btw., jest jeszcze jedna grupa obrazków rastrowych – są nimi avatary komentujących, których nie mogłem już zamienić na wektorowe wersje z oczywistych względów)
  • Responsywności layoutu: dzięki użyciu Bootstrapa w prosty sposób mogłem dostosować stronę do różnej wielkości urządzeń – można wygodnie przeglądać m4txbloga na dekstopie, tablecie i smartfonie
  • Czytelności i schludności: starałem się tak dobrać kolorystykę i czcionki, by dało się wygodnie czytać tekst na stronie.

Layout nie jest jeszcze perfekcyjny, zawiera jeszcze sporo błędów, które starał się będę sukcesywnie naprawiać. Jednakże na chwilę obecną jest wystarczająco używalny, by go zamieścić na m4txblogu 🙂

Podziękowania należą się jeszcze przede wszystkich do dwóch osób (kolejność alfabetyczna):

  • Sobak – informacja o Bootstrapie
  • xevuel – pomoc i cierpliwość w przypadkach problemów z themem.

Na koniec jeszcze 2 screeny – jeden ze starej wersji bloga:

m4txblog 2.0 - screen

 

A drugi z nowej:

m4txblog³ - screen

 

Pozdrawiam.

M4txblog 2.0!

Zmiany na blogu 12

W dniu dzisiejszym, tj. 22 marca 2011 m4txblog wchodzi w nową erę. A dokładniej erę m4txbloga 2.0.

Przejście spowodowane było głównie sporą ilością nowości, jakie planowałem. W dniu premiery m4txbloga 2.0 chcę je nieco przybliżyć. Nowe rzeczy, które pojawiły się na m4txblogu 2.0 to:

  • Nowy styl Skeptical, przerobiony na HTML5 przeze mnie i przetłumaczony na język polski przez mojego kolegę podpisującego się nickiem Rhino
  • Blog w wersji angielskiej
  • Forum
  • Różne usprawnienia związane z działaniem bloga

Może się to nie wydawać dużo, ale jednak kosztowało mnie to dużo pracy i – cóż – wciąż jest w fazie testów. 😛 Postaram się to wkrótce poprawić. Wyjaśnię jeszcze nieco bardziej szczegółowo o wspomnianych nowościach:

  • Skeptical – wreszcie styl, który przechodzi przez walidator W3C (doczepia się jedynie do stylów CSS -moz- oraz -webkit-), działa mniej więcej poprawnie na IE, napisany jest w HTML5, co ma spore znaczenie dla ludzi niewidomych oraz botów wyszukiwarek internetowych, no i… Nie jest tak przepakowany JavaScriptem. 😛
  • M4txblog english – pisałem o tym już wcześniej, angielska wersja mojego bloga została napisana ze względu na fakt, że najpopularniejszym językiem na świecie jest język angielski, no i że większość ludzi go rozumie – nie tak jak Polski. 😛
  • Forum – nieco lepsze miejsce do udzielania się na temat moich projektów niż komentarze na blogu.
  • Usprawnienia pomagają mi nieco przy pisaniu wpisów i stron, skorzystałem ze statystyk Google Analytics, no i nie wiem… chyba tyle. 😛

Na pamiątkę jeszcze screen ze starej wersji:

Zapraszam więc do przekazania swoich opinii na temat m4txbloga 2.0! 🙂 A, tak btw – nowy m4txblog ma premierę dzisiaj, by uczcić fakt powstania finalnej wersji Firefoksa 4.0. 🙂