Paweł Borowski

Templatka em108 - Technika EM

Mamy przyjemno?? zaprezentowania Wam rewolucyjnego rozwi?zania w podej?ciu do projektowania szat graficznych witryn internetowych.

Autorzy Roman Blanty i Micha? Sobkowiak nazwali j? Technik? EM.

Oto co o niej pisze Micha? Sobkowiak…

Powód

U?ywam du?ej rozdzielczo?ci monitora, wi?c czytanie malutkich literek na stronach przewidzianych dla dwukrotnie mniejszych rozdzielczo?ci jest k?opotliwe, je?li nie niemo?liwe. Przegl?darki maj? wbudowane mechanizmy powi?kszania stron za pomoc? skrótów klawiszowych [ CTRL i „+” || CTRL i „-” ] lub [ CTRL ] i rolka myszki.

Niestety, ma to swoje wady:

• Przegl?darki ró?nie podchodz? do powi?kszania poszczególnych elementów:
  • Opera po prostu powi?ksza ca?? stron? - co nie niszczy uk?adu strony, ale ma swoje wady
  • FireFox i Mozilla powi?kszaj? wszystkie elementy poza tymi, których wymiary zosta?y zdefiniowane w pixelach z wy??czeniem czcionek
  • InternetExplorer ignoruje równie? czcionki, których wielko?? zosta?a okre?lona w pixelach,
• W efekcie cierpi na tym jako?? grafiki (Opera, skaluj?c tak?e grafik?, ujawnia jej bitmapowy charakter, ale równie? ma problemy z dok?adnym renderowaniem) i uk?ad strony (FF, Mozilla i IE niszcz? uk?ad elementów, powoduj?c nie tylko problemy estetyczne, ale równie? psuj? czytelno?? strony),
• Nie wszyscy u?ytkownicy znaj? ten mechanizm.

Pomys?

Poniewa? przegl?darki zdaj? si? dobrze radzi? sobie ze skalowaniem elementów, których wielko?? zosta?a okre?lona w procentach lub em-ach, postanowili?my ca?y uk?ad strony i elementy formatowa? tylko w tych wielko?ciach.

Wykonanie

Zdecydowali?my si? na najbardziej popularny trzykolumnowy uk?ad strony. Przy budowie uk?adu korzystali?my z&nbspopracowanego przez Alexa Robinsona uk?adu strony znanego jako „One True Layout”. Wykorzystanie em-ów jako jednostki nastr?czy?o wiele problemów, z którymi lepiej lub gorzej sobie poradzili?my.

Aby unikn?? problemów w Operze, jak równie? aby uwidoczni? mo?liwo?? powi?kszania, postanowili?my u?y? Javascriptu zastosowanego na stronach joomla.org, by doda? mo?liwo?? powi?kszania widoku strony bezpo?rednio, z pomini?ciem mechanizmów przegl?darek (rozmiar: + - #).

Dla modnych zaokr?glonych rogów wykorzystali?my skrypt Alessandro Fulciniti'ego znany jako Nifty Corners.

Oba skrypty wymaga?y wzajemnego dostosowania, jak równie? dostosowania do skryptów u?ywanych w Joomli.

Aby uk?ad strony by? mo?liwie semantycznie poprawny zdecydowali?my si? nie u?ywa? tabel, co nastr?czy?o wiele problemów, g?ównie dlatego, ?e Joomla niestety wci?? opiera si? g?ównie na tabelach przy generowaniu tre?ci.

Maj?c na wzgl?dzie g?ównie zaprezentowanie Techniki EM, nie skupia?em si? specjalnie na efektach wizualnych, jednak?e grafika, cho? niezbyt rozbudowana, wymaga?a równie? dostosowania do potrzeb skalowania.

Efekt

Templatka jest w pe?ni skalowalna!

Dzi?ki zastosowaniu odpowiedniego uk?adu elementów jest przyjazna wyszukiwarkom. Jest równie? zasadniczej cz??ci semantycznie poprawna (cho? wymaga dopracowania).

Do formatowania u?ywa wy??cznie arkuszy CSS. Jest lekka, by unikn?? obci??enia transferu – co ma szczególne znaczenie dla tych, którzy na swoich serwerach wirtualnych maj? miesi?czne limity.

Kompatybilno??

Templatka zosta?a przetestowana z wersjami 1.0.7 i 1.0.8 Joomla! Ale nie powinno by? problemów ze starszymi wersjami. Przetestowano j? na razie w nast?puj?cych przegl?darkach:

• Mozilla 5.0 (Firefox 1.5.0.1 i Mozilla 1.7.11)
• Opera 8.51
• InternetExplorer 5.00.37, 6.02.8 i 6.0.29.

Znane problemy

• Opera: problem ze skalowaniem elementów typu SELECT i INPUT (nie skaluje wielko?ci czcionki).
• Ci?gle niedoskona?y semantycznie uk?ad
• Jednopixelowe pionowe przesuni?cie przy niektórych wielko?ciach w FireFoxie
• Validator zg?asza b??dy w CSS
  • uklad_strony.css: hack umo?liwiaj?cy równ? i pe?n? d?ugo?? kolumn
  • elementy_graficzne.css: overflow-x u?ywany w celu okie?znania tabel generowanych przez Jooml?, nie jest uwzgl?dniany w specyfikacji CSS, cho? przegl?darki go obs?uguj? (oprócz Opery)
• Nieuporz?dkowane i nieleganckie formatowanie list

Co dalej

Technika EM b?dzie nadal rozwijana, tak?e w porozumieniu z zespo?ami popularnych przegl?darek (z wyj?tkiem IE).

Pod roboczym adresem http://joomla.go.pl powstanie witryna po?wi?cona tej technice, gdzie b?d? si? pojawia? nowe wersje, inne uk?ady strony oraz nowe nak?adki graficzne.