W ramach internetowych ciekawostek – szacowanie wartości strony. Pod adresem http://www.estimurl.com/ można wpisać adres swojej strony (lub jakiejkolwiek innej – weryfikacji nie ma) i zobaczyć, ile może ona być warta. Dla fanów gier ekonomicznych jest to fajna zabawka, dzięki której mogą codziennie oglądać, jak cyferki idą im w górę (lub w dół). Dla osób chcących sprzedać swoją domenę może to być dobry punkt wyjścia do jej wyceny.

Wycena odbywa się na podstawie stopnia zindeksowania strony, pozycji w wyszukiwarkowych rankingach oraz liczby unikalnych użytkowników.

Porównanie wartości ciekawych stron:

• bymarszal.pl – 2891 USD (http://www.estimurl.com/bymarszal.pl)
• nasza-klasa.pl (wycena dla nowej domeny nk.pl jeszcze nie działa) – 13,89 miliona USD (http://www.estimurl.com/nasza-klasa.pl)
• google.pl – 24,13 miliona USD (http://www.estimurl.com/google.pl)
• facebook.com – 1,101 miliarda USD (http://www.estimurl.com/facebook.com)
• google.com – 2,19 miliarda USD (http://www.estimurl.com/google.com)

Jak widać do gigantów trochę mi jeszcze brakuje ;)

A ile warte są wasze strony?

Ilustracja ze strony: http://www.sxc.hu/photo/522105

MODx

Aktualizacja MODx’a do wersji 1.0.4 przebiega podobnie jak do wersji 1.0.3 (właśnie zauważyłem, że nie napisałem nic o poprzedniej aktualizacji – w każdym razie była ;)).

Po zrobieniu prewencyjnego backupu plików i bazy danych oraz ściągnięciu na dysk archiwum z najnowszą wersją, wgrywamy jej pliki na serwer, nadpisując istniejące pliki.
Następnie w przeglądarce wchodzimy pod adres katalogu install i przeprowadzamy cały proces instalacji wybierając po drodze drugą opcję instalacji.
Na koniec logujemy się do systemu i cieszymy się nowymi poprawkami (głównie bezpieczeństwa).
Dla tych którzy (podobnie jak ja) przyzwyczaili się do tego, że po kliknięciu na dokument w drzewie, od razu otwiera się on do edycji, a po wybraniu zakładki system ją zapamiętuje, został jeszcze jeden krok instalacji. W “Konfiguracji systemu”, w zakładce “Ustawienia interfejsu i edytora” dodane zostały (na górze) nowe opcje, które pozwolą nam na zachowanie tamtych wygodnych ustawień.

WordPress

Tu instalacja jest jeszcze szybsza niż w MODx’ie. Po backupie logujemy się tylko do panelu administracyjnego i z menu “Tools” wybieramy “Upgrade”. Tam klikamy “Upgrade automatically”, czekamy chwilę i podziwiamy nowy wygląd Dashboard’u w wersji 3.0 :)

Pod uwagę wziąłem trzy rzeczy: liczba wiadomości przychodzących, liczba wiadomości wychodzących, “współczynnik olania” ;) Ten ostatni wymyśliłem sam, jako przypuszczalny procent wiadomości przychodzących, które pozostały bez odpowiedzi. Oczywiście nie da się tego w prosty sposób obliczyć, ponieważ niektóre wątki zaczęte zostały przeze mnie, a także nie jest tak, że jednej wiadomości przychodzącej odpowiada jedna wychodząca. Dlatego do wyliczenia tego współczynnika przyjąłem liczbę wiadomości przychodzących pomniejszoną o liczbę wiadomości wychodzących, podzieloną przez liczbę wiadomości przychodzących i przedstawioną w postaci procentowej, czyli:
.

Wykres

To co najważniejsze ;)

Liczby

Porównanie

A jak aktywnie Ty korzystasz z poczty e-mail? Jak wyglądają Twoje statystyki? Chętnie poznam również inne ciekawe wartości do wyliczenia na podstawie tych danych :)

• jako tło strony z parametrem background-position:center;
• z wykorzystaniem position:absolute;left:50%;margin-left:-50px;
• z wykorzystaniem margin-left:auto;margin-right:auto;

Podobnie jak w poprzednim odcinku, przygotowałem stronę testową. Zgodnie z intuicją wszystkie trzy kwadraty powinny ułożyć się jeden nad drugim i dać jeden prostokąt o wymiarach 100×300px.

Firefox 3.5, Opera, IE8

Powyższe trzy przeglądarki wyświetliły wszystko zgodnie z przewidywaniami: kwadraty jeden pod drugim, równo i bez problemów. Miłą niespodzianką było to, że Internet Explorer 8 wyświetlił wszystko poprawnie. W tych trzech przeglądarkach pozycja wyśrodkowanego tła i wyśrodkowanych elementów przekształcana jest do liczby całkowitej jednym sposobem (w FF3.5 przez zaokrąglenie, w Operze i IE8 – przez obcięcie części ułamkowej).

Firefox 3.0, IE7

Zaskoczeniem okazał się Firefox 3.0, który wyświetla wyśrodkowane tło przesunięte o 1px w lewo w stosunku do pozostałych kwadratów. Związane jest to z tym, że pozycja tła w jest wyliczana przez obcięcie części ułamkowej, a pozycja elementu na stronie – przez zaokrąglenie. Oczywiście przesunięcie występuje tylko wtedy, kiedy szerokość okna przeglądarki (bez elementów interfejsu: paska przewijania, brzegów okna) jest liczbą nieparzystą.

Safari, Chrome

W przeglądarkach na silniku webkit występuje odwrotny problem niż w FF3.0 i IE7 – pozycja tła tworzona jest przez zaokrąglenie, a pozostałych elementów przez obcięcie, co przy nieparzystej szerokości strony tworzy przesunięcie tła o 1px w prawo.

IE6

Ta przeglądarka jest, oczywiście, klasą samą w sobie. Dla tła w ogóle nie działa automatyczne wyśrodkowanie przez co nie znalazło się ono na screenie (wyświetlone było w lewym górnym rogu strony testowej), z kolei element wyśrodkowany przez position:absolute został ustawiony przez zaokrąglenie, a przez margin:auto – przez obcięcie.

Rozwiązanie

Tutaj, niestety, nie ma optymistycznych wieści. Wprawdzie można mieć nadzieję na nową wersję webkita, która naprawi problem w Safari i Chrome, a także na wyjście z użycia IE6, IE7 i FF3.0, ale trzeba założyć, że nie nastąpi to szybko. Jedynym sensownym rozwiązaniem wydaje się omijanie tego problemu i umieszczanie wyśrodkowanego tła strony tylko wtedy, gdy nie szkodzi nam jednopikselowe przesunięcie w jedną lub drugą stronę, a także wyśrodkowywanie elementów na stronie przy użyciu tylko jednej, wybranej metody.

Na pierwszy ogień pójdzie jednak tradycyjnie Internet Explorer zaczynając od szóstki, a na ósemce kończąc, a w kolejnym odcinku pojawi się test porównawczy pozycjonowania kwadratu o określonej szerokości (100px) na środku strony za pomocą trzech metod:

• jako tło strony z parametrem background-position:center;
• z wykorzystaniem position:absolute;left:50%;margin-left:-50px;
• z wykorzystaniem margin-left:auto;margin-right:auto;

Nie lubię PNG

Oczywiście ja bardzo je lubię i czynią one tworzenie stron dużo efektywniejszym. Niestety, nie lubi ich Microsoft i do dziś występują problemy z ich wyświetlaniem we wszystkich Internet Explorerach.
Aby zaprezentować problem, stworzyłem testową białą stronę, na której wyświetliłem kwadrat o rozmiarach 100×100px w kolorze #808080 (w założeniu) na cztery sposoby:

1. png w kolorze czarnym (#000000) z 50% przeźroczystością (dodatkowo jego lewy górny róg ustawiłem na pełną przeźroczystość)
2. png w kolorze #808080 bez przeźroczystości
3. gif w kolorze #808080
4. div z ustawionym kolorem tła na #808080

Nowoczesne przeglądarki

W nowoczesnych przeglądarkach (Firefox, Opera, Safari, Chrome – na takich testowałem) efekt jest przewidywalny: prostokąt 400×100px z pustym kwadratem 50×50px w lewym górnym rogu.

Internet Explorer 5 i 6

Na początek przykład najbardziej drastyczny. Wszystkie próby użycia przeźroczystości w plikach PNG oznaczane są niebieskim cieniem. Dodatkowo wszystkie pliki PNG (nawet te bez przeźroczystości) wyświetlane są odrobinę ciemniejsze niż powinny (w tym przypadku wyświetlany kolor to #757575 zamiast #808080). Z tego, co udało mi się znaleźć, związane jest to z błędem obsługi filtru gamma.

Jedynym sposobem na uzyskanie poprawnego wyglądu jest całkowita rezygnacja z PNG i zapisywanie wszystkich grafik w innych formatach.

Internet Explorer 7 i 8

Tutaj uczyniono pewien postęp. Nie ma już niebieskiego cienia nad przeźroczystymi obrazami, aczkolwiek kolory dalej są przekłamane ze względu na błędną obsługę filtru gamma (błąd niepoprawiony przez 11 lat i 4 wersje programu!). Pierwszy kwadrat wyświetlony jest w kolorze #7F7F7F, drugi w #757575.

Tu również najlepszym sposobem na poprawny wygląd jest całkowita rezygnacja z PNG. Przy pewnej dozie tolerancji można by przyjąć, że wersja z użytą przeźroczystością nie różni się aż tak bardzo od oczekiwanego rezultatu i stosować PNG do obrazów z przeźroczystościami, a pozostałe formaty do obrazów bez, ale jest to dziwny kompromis, skoro w innych przeglądarkach nie trzeba go stosować.

Stop IE!

Jak widać nawet najnowsza wersja Internet Explorera nie jest wolna od błędów i na wersję 9.0 wypada patrzeć z nadzieją, że dostosuje się ona do standardów stosowanych przez pozostałe przeglądarki, a jednocześnie z obawą, czy przypadkiem nie będzie to kolejna wersja IE do wspierania w zupełnie inny sposób niż poprzednie i zupełnie inaczej niż pozostałe przeglądarki.

Jako ciekawostka: od pierwszego marca Google przestaje wspierać IE6 w swoich aplikacjach.

A jako optymistyczny akcent najnowsze statystyki przeglądarek w polskim internecie.

Zmiany w stosunku do 0.96

Część z nich jest jedynie kosmetyczna, druga część również nie wprowadza rewolucyjnych zmian (jak z resztą sugeruje nazwa – MODx Evolution 1.0.2). Pierwszą rzeczą, która rzuca się w oczy jest nowa szata graficzna panelu administracyjnego. Zmieniono kolorystykę z zielonej na niebieską (oczywiście “od zawsze” można było instalować własne skórki, ale nigdy nie chciało mi się tego robić ;) ), która moim zdaniem wygląda dużo bardziej elegancko. Na stronie głównej panelu rzuca się w oczy zmiana logo w postaci X-a na czarno-zielonym tle na to, co można zobaczyć na górze tego wpisu. Kolejną kosmetyczną zmianą były ikonki na stronie głównej panelu.

Z większych zmian wprowadzono na stronę główną dwie zakładki z informacjami z RSS-ów: wiadomości MODx i biuletyn bezpieczeństwa. Moim zdaniem dobrym pomysłem jest zasubskrybowanie tych kanałów w swoim czytniku, ale jeśli regularnie wchodzimy do panelu, to takie rozwiązanie powinno wystarczyć.

Dużą zmianą użytkową była dla mnie zmiana położenia przycisków zapisz/usuń/anuluj/podgląd. Dotychczas znajdowały się one nad i pod edytowanym dokumentem i trzeba było za każdym razem do nich scrollować. Teraz przyciski te są “przyklejone” w prawym górnym rogu ekranu, dzięki czemu są zawsze widoczne, a jednocześnie nie przeszkadzają w edycji. Podobnie ma się sprawa podczas edycji chunków, snippetów, pluginów (ciekawostka: wreszcie tłumacze dali sobie spokój z odpowiednikami typu urywki, strzępki, fragmenty).

Nie dużą zmianą, ale dla mnie bardzo użyteczną, jest rezygnacja z wylogowania użytkownika po tym, jak edytuje swoje ustawienia. Ja po każdej instalacji logowałem się, dokonywałem podstawowej konfiguracji strony, wyłączałem w ustawieniach administratora graficzny edytor po czym musiałem kolejny raz się logować, żeby móc dalej korzystać z panelu – brak wylogowania jest dużo wygodniejszy.

Dlaczego nie WordPress?

Uważam, że WordPress jest świetny, jeśli chodzi o blogi. Sam z niego (jak widać) korzystam i jest to bardzo szybkie i wygodne. Wydaje mi się jednak, że do tworzenia stron niezwiązanych z blogami lepiej nadaje się właśnie MODx. Po pierwsze posiada on dużo wygodniejszy w obsłudze system szablonów. Nie trzeba wstawiać PHPowych funkcji z API systemu. Stworzono system kilku tagów, które automatyzują dodawanie odpowiednich fragmentów statycznych lub dynamicznych do szablonu. Dodatkowo większość pluginów (tu zwanych snippetami) do tworzenia menu, list dokumentów itp. obsługuje własne szablony, dzięki czemu możemy szybko wprowadzać zmiany wizualne nie widząc w ogóle kodu. Poza tym uważam, że system przechowywania dokumentów w formie drzewa jest dużo wygodniejszy dzięki analogii do przechowywania dokumentów na dysku komputera. Dzięki temu łatwiej też grupować je ze sobą nie tylko na jednym poziomie (kategorie lub tagi), ale też tworzyć rodzaj “dziedziczenia”, na przykład projekty naukowe i projekty webowe zawarte w folderze projekty, który zawarty jest w folderze portfolio.

Może jest to kwestia indywidualnych preferencji, ale wygodniej mi tworzyć strony w oparciu o MODx, a następnie dostosowywać je tak, aby korzystanie z nich było również wygodne dla przeciętnego użytkownika (zarówno od strony front-, jak i backendu, czyli – odpowiednio – “zwykłego” przeglądania strony i zarządzania nią przez panel administracyjny).

Dlaczego nie Joomla?

Może to znowu kwestia osobistych uprzedzeń, ale kilka razy zmuszony byłem do ratowania stron postawionych na Joomli i zawsze robiła na mnie wrażenie systemu dość prymitywnego. Dodatkowo community polskie stało na dość niskim poziomie i często rady znajdowane na forach sprowadzały się do “przeinstaluj i może pomoże”. Właśnie ta kwestia zawsze powstrzymywała mnie przed zapoznaniem się głębiej z tym systemem. Dodatkowo, co również jest kwestią ludzi stawiających strony na Joomli, ustaliłem dwie cechy charakterystyczne stron wykorzystujących ten CMS:

1. charakterystyczny favicon , co oczywiście jest winą twórców, którzy opierają się prawdopodobnie na jakimś domyślnym szablonie i nie zmieniają faviconu
2. mnóstwo parametrów w linkach – to, co MODx bez wsparcia .htaccess potrafi streścić do
   http://site.com/index.php?id=19 (31 znaków),
   Joomla tworzy w postaci
   http://site.com/index.php?option=com_content&task=view&id=15&Itemid=29 (70 znaków)
   - wyobraźmy sobie użytkownika, który zapamięta nazwy i wartości trzech parametrów i jeszcze połapie się w pytajnikach i ampersandach między nimi

Co nas czeka w przyszłości?

W grudniu została wydane piąta (finalna!) wersja beta MODx Revolution 2.0. Tu, również zgodnie z nazwą, zapowiadane jest dużo zmian. Zmieniony zostanie system tagów w szablonach tak, żeby były one bardziej elastyczne. Poza za tym zapowiadane jest, że będzie lepiej, szybciej, wygodniej, a jak wyjdzie – zobaczymy :)

Najnowsze informacje o wydaniach MODx’a oczywiście na blogu.

Runda I

Aktualnie na moim dysku wylądował Pidgin. Szybko i bez żadnych problemów skonfigurowałem go do swoich przyzwyczajeń i ściągnąłem listę kontaktów z serwera. Jak zwykle, na początek najwięcej mogę powiedzieć o kwestiach estetycznych. Graficznie Pidgin mnie nie zachwycił. Wydaje mi się, że bardziej podobało mi się GG, ale może to tylko kwestia przyzwyczajenia. Poza tym póki co znajduję w nim wszystkie funkcjonalności, których potrzebuję i które są standardem w komunikatorach (czyli lista kontaktów i rozmowy ;) ). Jest nawet opcja wyszukiwania znajomych w GG. W praktyce chyba z niczego więcej na GG nie korzystałem.

Na razie Pidgin ma u mnie kredyt zaufania i rozpoczynam dla niego okres testowy – liczę, że mnie nie zawiedzie :)

Na jednej z nich nie powiodło się to najlepiej i dlatego chciałem podzielić się tu spostrzeżeniami, oraz krótką instrukcją, jak się do tego zabrać.

Backup

Pewnie wszyscy o tym wiedzą, ale przypomnieć nie zaszkodzi: na początek backup wszystkich plików i całej bazy danych!

Próba nieudana

Nie powiodła się opisywana przez twórców, najprostsza metoda instalacji — nadpisanie starych plików nowymi i uruchomienie skryptu instalacyjnego. Coś poszło źle na poziomie kodowania znaków i w związku z tym zamiast polskich liter otrzymałem „krzaki”. Już po pierwszych 10 minutach backup pokazał swoją przydatność. Szybki powrót do starej wersji i wszystko dalej działa jak należy. Wina prawdopodobnie leżała nie po stronie nowego systemu, a po stronie starej wersji, która była dopracowywana do współpracy z językiem polskim poza główną dystrybucją.

Kolejne podejście

Tym razem przyjąłem inną taktykę. W osobnym katalogu zainstalowałem cały nowy system, a następnie do nowej bazy skopiowałem tabele odpowiedzialne za przechowywanie dokumentów, zmienne szablonów i chunki. Pliki szablonów oraz ich kod przekopiowałem ręcznie. Tak samo ręcznie przeniosłem swoje własne snippety. Tym razem wszystko ruszyło bez zarzutów i już po chwili mogłem się cieszyć nową wersją skryptu.

Upgrade

Tuż po instalacji okazało się jeszcze, że zainstalowałem wersję 1.0.0, a dostępna była już wersja 1.0.2. Tym razem zadziałała instrukcja od twórców. Wgrałem wszystkie pliki na serwer, uruchomiłem skrypt instalacyjny i wszystko ruszyło bez najmniejszych problemów.

Wrażenia

Zdecydowanie nowa wersja MODx prezentuje się dużo lepiej od starej. Przede wszystkim pod względem graficznym, ale programistycznie też poprawiono i „uwygodniono”. Teraz czekam na wersję Revolution (2.0.0), która zapowiadana była na koniec tego roku i której beta już jest wydana (na instalację testową ze względu na brak czasu musi jeszcze trochę poczekać – pewnie aż do wydania „stabilnej wersji”).

Pierwszy wpis po dłuższej przerwie związanej ze sprzyjającą aurą :-)

Jak widać nad i pod wpisem, postanowiłem umieścić na blogu linki do najpopularniejszych stron social bookmarking (ogólnie rzecz biorąc, bo nie wiem, czy na przykład twittera i facebooka można do nich zaliczyć). Przy okazji stworzyłem spis polskich i zagranicznych serwisów tego typu łącznie z odnośnikami do umieszczenia na swojej stronie. Zapraszam do korzystania.

Serwisy polskie

	http://blip.pl/dashboard?body=[message]
	http://co-robie.pl/home/?add=[message]
	http://flaker.pl/add2flaker.php?url=[link]&title=[title]
	http://www.garnuch.pl/dodaj?adres=[link]&tytul=[title]
	http://www.gwar.pl/DodajGwar.html?u=[link]
	http://www.linkologia.pl//link-add/?url=[link]&title=[title]&notes=[description]
	http://onmedia.pl/submit.php?url=[link]
	http://www.vala.pl/dodaj/?title=[title]&url=[link]
	http://www.wahacz.pl/submit.php?url=[link]
	http://wyczaj.to/api/external/add_external.html?full_url=[link]&title=[tytuł]&description=[opis]
	http://www.wykop.pl/dodaj?url=[link]l&title=[title]&desc=[description]
	http://youbookmarks.com/api/quick_add.php?version=1&url=[link]&title=[title]

Serwisy zagraniczne

	http://www.blinklist.com/index.php?Action=Blink/addblink.php&Url=[link]&Title=[title]
	http://blogmarks.net/my/new.php?mini=1&title=[title]&url=[link]
	http://buddymarks.com/add_bookmark.php?bookmark_title=[title]&bookmark_url=[url]
	http://www.citeulike.org/posturl?url=[link]&title=[title]
	http://del.icio.us/post?url=[link]&title=[title]“
	http://digg.com/submit?phase=2&url=[link]&title=[title]
	http://www.diigo.com/post?url=[link]&title=[title]
	http://www.dzone.com/links/add.html?url=[link]&title=[title]
	http://www.facebook.com/share.php?u=[link]&t=[title]
	http://friendfeed.com/?title=[title]&url=[link]
	http://www.google.com/bookmarks/mark?op=edit&bkmk=[link]&title=[title]
	http://www.linkagogo.com/go/AddNoPopup?title=[title]&url=[link]
	http://linkroll.com/insert.php?url=[link]&title=[title]
	http://www.maple.nu/cgi-bin/search6/usa/ss_submit.cgi?fct=100&url=[link]&title=[title]
	http://www.mister-wong.com/index.php?action=addurl&bm_url=[link]&bm_description=[title]
	http://www.netvouz.com/action/submitBookmark?url=[link]&title=[title]
	http://www.newsvine.com/_wine/save?popoff=0&u=[link]&h=[title]
	http://www.onlywire.com/b/?u=[link]&t=[title]
	http://www.plugim.com/submit?url=[link]&title=[title]&trackback=
	http://www.reddit.com/submit?url=[link]
	http://simpy.com/simpy/LinkAdd.do?note=[title]&href=[link]
	http://www.spurl.net/spurl.php?url=[link]&title=[title]
	http://www.stumbleupon.com/submit?url=[link]&title=[title]
	http://www.tagtooga.com/tapp/db.exe?c=jsEntryForm&b=fx&title=[title]&url=[link]
	http://twitter.com/home?status=[message]

Przy zapisie linków przyjąłem następującą konwencję zapisywania fragmentów do uzupełnienia przez nas:

• [link] — link do danego artykułu na naszej stronie,
• [title] — tytuł artykułu,
• [description] — krótkie streszczenie artykułu,
• [message] — wiadomość do serwisów nie będących wprost social bookmarking; np. Czytam artykuł: [link].

Fragmenty te każdy może zastąpić zgodnie z własnym systemem, na którym działa strona. Można również użyć javascriptu do zamiany odpowiednich fragmentów na przykład w ten sposób:

Akcenty i polskie znaki diaktryczne

Uzyskujemy je pisząc w edytorze tekstu wspomagającym odpowiednie kodowanie (np. ISO-8859-2 lub UTF-8). Niektóre akcenty można zastąpić encjami, jeżeli mamy problem z wprowadzeniem ich w naszym edytorze.

Apostrofy

Do zapisu apostrofu używamy znaku ’ (’) zamiast ‘. W języku angielskim apostrofów używamy w formach dzierżawczych (Jimmie’s), w skrótach (you’re). W języku polskim, używamy ich dla oznaczenia zanikłej litery (najczęściej dzieje się to przy zapożyczeniach z języka angielskiego i jest powtórzeniem identycznej akcji w tym języku – np. Rock’n’Roll), przy pisaniu dat (gdy część roku została usunięte – Kraków ’08), a także dla oddzielenia polskiej końcówki dodanej do wyrazu w języku obcym (Laplace’a).

Cudzysłowy

Większość osób, pisząc w internecie, używa jako cudzysłowu znaku “, ponieważ jest on bardzo podobny i możliwy do odnalezienia na klawiaturze. Jest to jednak forma nieprawidłowa. Pisząc tekst w języku polskim powinno się używać cudzysłowu otwierającego dolnego „ („) jako znaku otwierającego cytat oraz cudzysłowu zamykającego górnego ” (”) jako znaku zamykającego, natomiast w tekstach obcojęzycznych odpowiednio znaków “ (“) i ” (”). Istnieje również kilka reguł dotyczących umieszczania w sąsiedztwie cudzysłowu innych znaków interpunkcyjnych:

• kropki, przecinki, znaki zapytania i wykrzykniki znajdują się wewnątrz lub na zewnątrz cytatu w zależności od tego, czy należą do cytowanego tekstu, czy nie (w Ameryce kropki i przecinki umieszcza się zawsze wewnątrz cudzysłowu;
• dwukropki i średniki umieszczamy zawsze na zewnątrz cudzysłowu;
• jeśli cytujemy więcej niż jeden akapit, znak cudzysłowu otwierającego umieszczamy na początku każdego akapitu, ale znak cudzysłowu zamykającego tylko na końcu ostatniego z nich.

Czcionki

Szeryfowe i bezszeryfowe

Serif (szeryfowe) i sans-serif (bezszeryfowe) to dwie podstawowe grupy czcionek. Szeryfem nazywamy zakończenie kreski w literze. Czcionkę nieposiadającą takich zakończeń nazywamy bezszeryfową.
Badania wykazały, że w przypadku długich tekstów czytelniejsze są czcionki szeryfowe, zaś w przypadku krótkich – bezszeryfowe. W internecie powszechną zasadą jest pisanie tekstów krótkich, posiadających dużo wypunktowań i nagłówków, dlatego częściej stosowane są czcionki bezszeryfowe.

Długość wierszy

Duży wpływ na czytelność tekstów pisanych różnymi rodzajami czcionek ma długość wiersza. Przyjmuje się, że przy czcionkach szeryfowych dobrą długością jest około 8 – 10 wyrazów, a przy czcionkach bezszeryfowych – około 7.

Łączenie czcionek

Na większości stron internetowych stosuje się tylko jeden rodzaj czcionki, co pozwala uniknąć wizualnego bałaganu. Czasem jednak dobrym pomysłem jest wyróżnienie ważnych elementów strony czymś więcej niż tylko pogrubieniem lub innym rozmiarem czcionki. Takimi miejscami są na przykład nagłówki w tekście. Zazwyczaj są one zaledwie kilkuwyrazowe, więc dobrym pomysłem jest, aby w tekście pisanym czcionką szeryfową, nagłówki napisać bardziej wyrazistą, czcionką bezszeryfową. Zasadą jest, że nie łączy się więcej niż dwóch czcionek na stronie, a także nie łączy się ze sobą dwóch czcionek tego samego typu (są do siebie podobne, więc nie tworzą wystarczającego kontrastu, a jedynie nieporządek). Odstępstwem od tej reguły może być umiejętne użycie trzeciej czcionki w logo strony tak, aby nie zaburzała ona odbioru tekstu.

Duże litery

W internecie powinno się unikać pisania dłuższych wierszy dużymi literami. Jest do dopuszczalne w przypadku krótkich nagłówków, ale trzeba używać tego rozważnie. Przyczyną przyjęcia takiej konwencji jest istnienie tzw. „linii brzegowej” (patrz: rysunek), która w przypadku tekstu pisanego normalnie jest w pewnym stopniu charakterystyczna dla wyrazu i ułatwia czytanie tekstu, a dla tekstów pisanych dużymi literami jest tylko prostokątem otaczającym cały wyraz.
Dobrym pomysłem na wyróżnienie tekstu, który chcielibyśmy napisać dużymi literami jest zamiast tego, powiększenie jego czcionki.

Dzielenie wyrazów

Dzielenie wyrazów stosuje się, jeśli jakiś wyraz nie mieści się w linii i trzeba jego część przenieść do następnej. Dzieli się wtedy wyraz znakiem łącznika. Ze względu na to, że ciężko o stworzenie komputerowych reguł dzielenia wyrazów, a dla człowieka jest to zajęcie żmudne, w zastosowaniach internetowych najczęściej pomija się ten aspekt formatowania tekstu.

Interlinia

Po angielsku zwane leading, co wywodzi się od słowa lead oznaczającego ołów. Przed wynalezieniem nowoczesnych maszyn drukarskich, strony zestawiane były właśnie z ołowianych czcionek, a pomiędzy poszczególne linie wkładany był ołowiany pasek o określonej grubości. Rozmiar czcionki oznaczano wtedy w punktach (1″ = 72pt). Rozmiar interlinii stanowił standardowo 20% rozmiaru czcionki, czyli do czcionki 10pt, dobierano 2pt-owy lead i wielkość interlinii określano jako sumę tych wartości, czyli 12pt. W HTMLu jest podobnie: wielkość interlinii wyznaczana jest przez własność CSS line-height, która stanowi sumę wielkości czcionki i lead’u.
Najważniejszą zasadą przy zmianie wielkości interlinii jest to, aby w całym akapicie była ona taka sama. Przy ustawianiu jej za pomocą line-height zmienia się wysokość wszystkich linii, ale efekt ten psuje się, jeżeli zastosujemy pseudo-element :first-letter i zwiększymy rozmiar czcionki pierwszej litery ponad wysokość linii. Powstaje wtedy brzydki odstęp między pierwszą a drugą linią tekstu. Sposobem na zapobiegnięcie temu jest nadpisanie domyślnie ustawionej wartości line-height i ustawienie jej na wartość taką, jaką chcemy uzyskać (czyli 120% wielkości czcionki; przeglądarki zaokrąglają zazwyczaj tę wartość do wielokrotności 5, czyli dla rozmiaru czcionki 16px : 16 × 120% = 19,2px ≈ 20px).

Justowanie tekstu

Justowanie tekstu tworzy bardzo ładne akapity wyrównane zarówno do lewej, jak i do prawej strony bez potrzeby ręcznego dzielenia wyrazów, czy innych zabiegów na tekście, ale należy stosować je ostrożnie. Przy krótkich wierszach (na przykład w kolumnach tekstu w gazetach) i długich słowach, mogą powstać wyrazy rozciągnięte na całą szerokość wiersza lub dwa wyrazy oddzielone od siebie bardzo długą przerwą, a odstępy między wyrazami wyglądać nienaturalnie. Od razu widać, że w takich przypadkach justowanie nie jest rozwiązaniem szczególnie estetycznym. Najlepiej wtedy ręcznie podzielić wyrazy lub pogodzić się ze stratą wyrównania po jednej ze stron i wyrównać tekst do drugiej. Jednak nawet przy długich wierszach, decydując się na justowanie, trzeba liczyć się z wystąpieniem opisanych problemów.

Kerning

Kerning polega na zmniejszeniu odstępów pomiędzy literami w celu uzyskania tekstu, który będzie sprawiał wrażenie złożonego z równoodległych liter. Całość procesu opiera się na wykorzystaniu złudzenia optycznego, związanego z tym, że litery mają różne kształy. Przez to na przykład zestawione obok siebie litery WA wyglądają na znajdujące się w większej odległości niż litery SZ. Dzieje się tak dlatego, że poszczególne znaki są prostokątnymi obrazami i nie nachodzą (w standardowym przypadku) na siebie.
Kerning wymaga ustawienia dla różnych liter w wyrazie różnej szerokości do następnego, więc jest niewygodny i rzadko stosowany (najczęściej przy tekstach umieszczonych na stałę w formie obrazów).
Chcąc wyrównać optycznie odległości między literami, można stosować się do kilku zasad:

• HL – odstęp między dwiema literami, których sąsiadujące krawędzie są pionowe, powinien być największy;
• HO – odstęp między pionową krawędzią jednej litery a łukiem drugiej, powinien być mniejszy;
• OC – odstęp między łukami dwóch liter powinien być bardzo mały;
• OT – łuki mogą zapełnić pustą przestrzeń pod lub nad poprzecznym ramieniem sąsiedniego znaku;
• AT – najbliżej siebie powinny znajdować się litery mające wokół siebie pustą przestrzeń;

Najważniejsze jednak jest, żeby tekst sprawiał wrażenie równo rozłożonego.

Łącznik i myślnik

Istnieją 3 znaki tego typu: łącznik, en-myślnik, em-myślnik.

• Łącznik – służy do łączenia wyrazów złożonych (hokus-pokus), numerów telefonów (0-22 123-45-67), kodów pocztowych (00-123) lub do przenoszenia części wyrazu do nowego wiersza.
• En-myślnika – (–) i Em-myślnika — (—) w Polsce używa się zamiennie (z przewagą em-myślnika) we wszystkich pozostałych przypadkach.

W Stanach Zjednoczonych przyjęte są trochę inne zasady używania dwóch ostatnich znaków, precyzujące kiedy używać którego:

• En-myślnik – (–) nazywany jest tak dlatego, że ma szerokość zbliżoną do dużej litery N w danej czcionce. Używamy go, gdy zapisujemy jakiś przedział czasu (8⁰⁰–10⁰⁰, pn–pt, dwa – trzy lata).
• Em-myślnik — (—) ma szerokość zbliżoną do dużej litery M. Stosujemy go w miejscu, gdzie zmienia się myśl, a gdzie użycie kropki było by zbyt silne, a przecinka – zbyt słabe.

Podkreślenie

W profesjonalnym tekście nie używa się podkreśleń. Podobnie jest w HTMLu – powszechnie przyjętą konwencją jest stosowanie podkreśleń jedynie dla oznaczenia linków. Aby wyróżnić jakieś słowo najczęściej stosuje się pogrubienie, a żeby zapisać na przykład tytuł – kursywę. Jeśli chcemy wyodrębnić cytat, możemy również zapisać go kursywą lub

w osobnym cytacie blokowym

Subscript i superscript

Czyli znaki pisane na górze i na dole w stosunku do bazowej linii pisma. Stosowane przy zapisywaniu potęgowania (x^y), symboli chemicznych (H₂O), minut przy godzinach (9³⁵). W HTMLu superscript (umieszczenie znaków nad linią bazową) uzyskujemy biorąc tekstu w znaczniki , a subscript (pod linią bazową) – biorąc w znaczniki .

Ułamki i potęgowanie

W HTMLu potęgowanie zapisujemy za pomocą superscriptu, a ułamki za pomocą kombinacji ^licznik/_mianownik. Kilka podstawowych potęg i ułamków zostało jednak zdefiniowanych:

Wcięcie akapitów

Wiele osób w różnych edytorach tekstu dla uzyskania wcięcia pierwszej linii używało wielokrotnego znaku spacji. Pomijając fakt, że jest to niepoprawna metoda i większość współczesnych edytorów oferuje specjalne funkcje do tworzenia tego efektu. W HTMLu sposób ten nie będzie działał, ponieważ wielokrotne spacje, podobnie jak tabulacja, wyświetlane są jako pojedynczy znak spacji. Aby uzyskać wcięcie akapitu, należy zastosować specjalnie w tym celu zaprojektowaną własność CSS text-indent. Jeśli chcemy uzyskać wcięcie pierwszej linii względem całego akapitu, piszemy np.:

Z kolei, jeśli chcemy uzyskać wcięcie akapitu względem pierwszej linii, używamy ujemnej wartości razem z identycznym przesunięciem lewej krawędzi tekstu w prawo np.:

Wdowy i sieroty

Pojęcia te odnoszą się do „opuszczonych” wyrazów. Wdowa oznacza samotny wyraz w ostatniej linii akapitu. Najgorszym chyba jej przypadkiem jest, kiedy w ostatniej linii zostanie tylko cześć podzielonego wyrazu. Sposobem na uniknięcie powstawnia wdowy jest ujęcie w znaczniki <nobr></nobr> dwóch ostatnich wyrazów akapitu.
Sierotą nazywana jest ostatnia linia akapitu, która nie zmieniła się w kolumnie (stronie) tekstu i znalazła się w następnej kolumnie. Aby tego uniknąć, należy tak manipulować rozmiarem czcionki, marginesami, odstępami między liniami i wyrazami, edytować tekst, aby ostatnia linia znalazła się w tej samej kolumnie, co cały akapit.
Powiązaną z wdowami i sierotami rzeczą są krótkie wyraz pozostawione na końcu linii (takie jak: na, i, w). Gdy wystąpią, należy taki wyraz, razem z następnym, ująć w tagi <nobr></nobr>.

Znaki specjalne

W HTMLu zdefiniowano większość znaków specjalnych, jakich można użyć w tekście. Poniżej lista kilku najczęściej używanych:

Listę wszystkich encji zdefiniowanych w HTMLu można znaleźć m.in. pod adresem http://www.digitalmediaminute.com/reference/entity/index.php.