Wczoraj zostało zadane pytanie: Jak element podzielić na dwa “paragrafy” i wycentrować w lewo i w prawo, w którym jako przykład podano dane tabelaryczne przedstawione jako lista, zresztą poniżej prawie całe pytanie:

Mam listę <li> </li>
Chciał bym aby znajdujący się w niej element został podzielony na 2 częsci.
Pierwsza standardowo była by wyjustowana do lewej. Druga do prawej.
Np

<li>coś coś coś coś                    (123456)</li>
<li>coś                                (564321)</li>

Czyli jak widać, jest to typowa sytuacja w której do prezentacji danych powinna zostać użyta tabelka.

Napisałem odpowiedź w której to opisałem, ale nie spotkała się z ciepłym przyjęciem, ba wydaje mi się, że nawet z wrogim, bo dostałem za nią ujemne punkty, co rozbawiło mnie już zupełnie. Zgodzić się muszę z komentującym:

twk: table-mania zamieniona na div-manię ;-)

Pamiętaj developerze młody: do danych tabelarycznych używamy tabel, bo do tego zostały stworzone.

CSS Differences in Internet Explorer 6, 7 and 8

Pokazane punkt po punkcie jakie selektory działają w której z wersji przeglądarki.

Ogólna konkluzja jest taka, że wersja 6 była/jest po prostu strasznie fatalna. Bardziej nawet niż myślałem.

Plugin niema konfiguracji, po prostu się go aktywuje. Jako referrer brana jest wartość $_SERVER['HTTP_HOST'] (tutaj iworks.pl), więc jak ktoś chce sobie to wymienić na coś innego to naprawdę bardzo łatwo to zrobić.

Przejdź na stronę wtyczki na wordpress.org http://wordpress.org/extend/plugins/auto-referrer/

Jedno ale. Zawartości nie widać.

Przykładowy listing:

• <div class=”a”>
• <div id=”dyn”></div>
• </div>
• <div class=”a”>
• <div class=”b”>treść</div>
• </div>

Wszystkie divy są float’owane do lewej, wszystkie też mają ustawiony clear po lewej stronie. Całość znajduje się w jakimś divie o ustalonej szerokości, a div.a mają taką samą szerokość jak parent oraz padding:0;margin:0.

Kluczem całego błędu okazało się być to, że div#dyn ma dynamicznie generowaną zawartość. (kalendarzyk).

Co było błędem?

Zmieniająca się wysokość pierwszego div.a powodowała przesunięcie drugiego div.a, jednocześnie div.b pozostał na swoim miejscu. Jego top … się nie zmienił, mimo position:static. Po prostu pozostaje, tam gdzie stał, wyłażąc w lewo poza lewy margines rodzica.

Jak naprawić?

Drugi div.a musi być ustawiony na float:none – wtedy problem nie występuje.

Ciekawą i prostą możliwość stworzenia własnej czterystaczwórki zapewnia google. Całość opisano na stronie: Marketing w Internecie

Google udostępniło ciekawy gadżet do tworzenia modyfikowanych stron błędu 404 (nie znaleziono). Gadżet ten to kilka linijek kodu, które wklejone do template odpowiedzialnego za generowanie komunikatu pozwala na wyświetlanie adresu URL innej podstrony o adresie podobnym do żadnej podstrony jak również pola wyszukiwania z hasłem pobranym z adresu URL.

Pełną treść artykułu znajdziesz: Gadżet Google dla podstron komunikatu błędu 404

Jakby Wam to powiedzieć? Możecie robić swoje superstrony z wykorzystaniem znanych, sprawdzonych i popularnych narzędzi. Oczywiście, że możecie. Jest to bardzo dobra metoda, ponieważ nie tracicie czasu na wdrażanie nieznanych rozwiązań, które prawie zawsze na początku sprawiają problemy. Sam tak robię. Trudno mi czasem sięgnąć po coś nowego, ponieważ boję się, że zburzy to mój starannie zbudowany pogląd na temat webmasterki i nie daj Boże okaże się, że coś można było od zawsze robić lepiej, sprawniej i wygodniej (tak, tak – gdzie przez te wszystkie lata byłeś, Firebugu?).

Polecam pełen artykuł: 8 świetnych narzędzi webmastera, o których pewnie nigdy nie słyszałeś

Niedawno zdałem sobie sprawę, że już od 10 lat robię witryny we Flashu. Technologia ta przebyła długą drogę od czasów Flasha 4, gdy pierwszy raz wgryzałem się w ActionScript, generowanie kluczowych klatek i pikselowe fonty. Przez te wszystkie lata widziałem i zrobiłem wiele projektów. Niektóre z nich wykorzystywały Flasha w bardzo użyteczny sposób, inne zaś były zupełnie bezsensowne. Bywało, że wdrożenie Flasha szkodziło firmie, odciągało od celu istnienia witryny i prowadziło do kiepskich wyników (a do tego stworzenie takiej strony kosztowało firmę niemało). W świecie, w którym zbyt wiele firm chce mieć flashowe witryny, i zbyt mało projektantów potrafi sobie dobrze z Flashem radzić, dobrze jest trzymać się krótkiej listy miejsc, w których Flasha nie powinno być (za nielicznymi wyjątkami).[...]

Więcej: Sześć miejsc strony WWW, w których pod żadnym pozorem nie powinno być Flasha.

Trudno jest sobie wyobrazić pracę architekta informacji bez wykorzystania makiet i prototypów. Dzięki nim możemy obejrzeć gotowy produkt zanim jeszcze rozpoczną się na dobre prace grafików i projektantów. [...]

Pełen tekst na stronie: WebAudit Blog: Makiety, prototypy i 6 popularnych błędów.

Obrazek z Wikipedia

Faktycznie w przypadku blogów można z tym troszkę dyskutować, ale tylko troszkę. W przypadku pozostałych stron nie da się z tym dyskutować, ponieważ jest to absolutna konieczność.

Stronę buduje wielu elementów z których wiele nie wnosi niczego o wydruku, ba nawet go psując, powodując że drukarka wypluwa o kartkę czy dwie z dużo, bo wydrukowało się kilka menu, jakieś nagłówki, jakieś nikomu na wydruku niepotrzebne stopki. W wersji pesymistycznej jest jeszcze gorzej: na pierwszej stronie mamy menu zajmujące 1/3 szerokości wydruku, a potem 20 kartek z wydrukiem wąskiej kolumny z treścią. Z drugiej strony nie ma na wydruku informacji, które mogą być przydatne, które umożliwią szybszy kontakt biznesowy czy też zapewnią nową wizytę w przypadku przekazania kartki dalej.

Sprawdź czy twoja strona dobrze wygląda na wydruku:

• Dodaj adres strony
  Jako pierwszy, po nagłówku (firma, namiary) powinien znaleźć się adres drukowanego dokumentu, bo nie każdy musi mieć takie ustawienia, żeby adres wydrukował się poprawnie, no i nie każdy adres zostanie wydrukowany w całości.
  
• Zmień kolor tekstu na czarny.
  Mało kto potrzebuje kolorowy wydruk. Prawie nikt nie drukuje tła dokumentu, a dobrze wyglądająca, jasna czcionka na ciemny tle strony, będzie prawie nieczytelna po wydrukowaniu.
• Zmień krój czcionki.
  Z powodów czysto technicznych, związanych z kiepskimi (tak, nadal kiepskimi) rozdzielczościami monitorów, na ekranie lepiej czyta się kroje bezszeryfowe. Na wydruku, który nawet w trybie oszczędnym dysponuje prawie dwa razy większą rozdzielczością, a dla przeciętnego trybu normalnego ma od 3 do 4 razy więcej punktów na milimetr lepiej jest użyć czcionki szeryfowej, którą łatwiej się czyta.
• Zmień wielkość czcionki.
  Graficy tworząc stronę w formie makiety mają tendencje do używania małych lub malutkich rozmiarów tekstów, bo lepiej wygląda, bo w programie graficznym dobrze widać, bo mają możliwość powiększania i nie boli tak bardzo. Nieważne. Tak czy inaczej zadbaj by podstawowa wielkość na wydruku była 11pt lub lepiej 12pt. Możesz też dostosować nagłówki h1-h6 tak, żeby lepiej komponowały się na wydruku.
• Dodaj interlinię.
  Zwiększanie interlinii zdecydowanie pozytywnie wpływa na wygodę czytania. Przeprowadź testy zwiększając i zmniejszając interlinię oraz dając tekst do przeczytania komuś kto tej treści nie zna. Warto skorzystać z pomocy pokolenia mniej internetowego.
• Usuń wszystkie obrazki nie związane z treścią.
  What makes an essential image depends on the developer and the marketing department. I limit images to those that are required for the article and a brand logo at the top left of the page.
• Usuń elementy nawigacji.
  Zdecydowanie największą wadą wydruków jest to, że pierwsza strona jest „pełna”, a potem mamy kilka stron w których wydruk zajmuje mniej niż połowę szerokości strony. Zdarzyło ci się wydrukować taką stronę? Wkurzające, prawda?
• Usuń reklamy.
  Punkt jest może na pierwszy rzut oka dość kontrowersyjny, ale tak naprawdę warty wdrożenia. Dodatkowo duża część reklam bez możliwości skorzystania z odnośnika będzie na wydruku bezużyteczna. Oczywiście serwisy o dużym ruchu mają dodatkową opcję reklamową: reklama … na wydruku.
• Flash, animowane obrazy i treści wytwarzane za pomocą javascriptu.
  Sprawdź czy treść na wydruku nie traci przez brak wymienionych przed chwilą elementów.
• Dodaj dane teleadresowe firmy.
  Jeżeli witryna jest „firmowa” i zależy ci na tym, żeby ktoś mógł do ciebie zadzwonić, napisać e-mail czy po prostu wysłać „analogowy” list. W przypadku firm, bezwzględnie należy umieścić numer faksu.
• Oczyść odnośniki i wypisz ich adres
  Odnośniki na stronie można kliknąć, na wydruku ich funkcjonalność znika, więc warto za pomocą CSS’a wyciągnąć zawartość odnośników (uwaga nie działa w starszych przeglądarkach). Pamiętaj żeby ustawić im takie same wyświetlanie jak reszcie tekstu, bo na wydruku będą tylko mylić.

Jak to zaimplementować?

Już wkrótce opiszę jak to wszystko zrobić za pomocą arkusza CSS, wraz z wyborem odpowiedniego medium. Na razie możesz przeczytać o tym tutaj: use CSS media types to create print friendly pages . Yes, it’s possible to write scripts to convert your Web pages to aj:, but wshy use them when you can just write a second style sheet for when your pages are printed.

Swoje doświadczenie konfrontowałem z:

• CSS Cookbook: How to make a printer-friendly page with a style sheet
• CSS Media Types Create Print-Friendly Pages
• What is a Printer-Friendly Web Page?
• How to make printer friendly web pages
• Print-friendly CSS and usability