CORPORA - polski słownik rozpoznawania mowy

Podczas próby zorientowania się (i napisania) własnego programu rozpoznawania mowy pojawia się pewien zasadniczy problem jeżeli chcemy tego dokonać dla naszego ojczystego języka. Otóż nie ma ogólnodostępnego słownika analogicznego do angielskiego słownika BEEP (dośc powszechnie używanego przynajmniej w przykładach). Po (naprawdę) długich godzinach spędzonych w Internecie okazało się że jest prototyp takiego słownika, który jest rozwijany. Niestety, przeciętny śmiertelnik nie ma dostępu do tego słownika. Zajmuje się nim głównie pracownik naukowy przy Politechnice Poznańskiej - pan Grocholewski.

W Internecie Można znaleźć jeden z jego artykułów (po polsku nawet) odnośnie rozpoznawania mowy i słownika CORPORA. jest to jednak niejako tylko pewien wstęp teoretyczny. Udało mi się uzyskać dostęp do jeszcze dwóch artykułów tego samego autora. Poniżej chciałam napisać, co udało mi się z nich dowedzieć.

Baza danych słów dla polskich difonów

Język Polski jest jednym z nielicznych języków, który nie może się poszczycić posiadaniem takiej bazy. W chwili obecnej rozwijają się jednak dwa projekty:

1. CORPORA
2. COPERNICUS - Baza ta zawiera 10 cyfr, 100 liczb, 40 krótkich dialogów zawierających kilka tematycznie powiązanych zdań oraz około 35 dodatkowych zdań. Sygnał mowy jest zdigitalizowany (cyfrowy) z częstotliwością próbkowania 20 kHz i 16 bitową rozdzielczością.

W dalszej części będziemy rozważać jedynie CORPORę.

Projekt CORPORy:

materiał mowy został tak dobrany aby znajdowały się tam polskie litery, cyfry i 200 pierwszych imion wypowiedzianych w izolacji oraz aby zawrzeć minimum 900 najczęściej występujących polskich difonów.

Warunki nagrywania:

Nagrania zostały dokonane w wielu miejscach w Polsce przy tych samych warunkach środowiskowych (mam na myśli komputer i sprzęt). Sygnał został nagrany z częstotliwością próbkowania 16 kHz i 13 bitową rozdzielczością. Sygnał został znormalizowany i tylko 12 starszych bitów brano pod uwagę. Aby zminimalizować ilość błędów proces nagrywania był kontrolowany przez specjalne oprogramowanie TIMREC (jego zadaniem było np podpowiadanie że osoba za cicho mówi). Oprócz tego przedsięwzięcie było nadzorowane przez wykwalifikowanego fonetyka. Łącznie CORPORA zawiera prawie 180.000 polskich difonów.

Segmentacja i etykietowanie:

Zostało zadecydowane aby segmentacja i etykietowane nastąpiły według automatycznej fonetycznej transkrypcji, gdyż ręczny proces jest bardzo żmudny i długotrwały (choć prawdopodobnie bardziej skuteczny). Osobno było etykietowanie dla kobiet, osobno dla mężczyzn. Użyto do tego techniki dynamicznego programowania (program ten nazywał się LABELER ).
Akustyczna analiza sygnału była dokonywana co 5 ms i użyto w tym celu 15 ms okna Hamminga. Każda ramka reprezentowała 100-punktowy rejestr spektrogramu bazujący na 240-punktowym WFTA(Winograd Fourier Transform Algoithm).
Takie badanie uzyskało dość dobre wyniki.

PODSUMOWANIE:

Automatyczne przypisy stworzono na podstawie wybranych nagrań mężczyzn i kobiet a następnie ręcznie przedstawione przez profesjonalnego akustyka. Największym problemem było to, że inaczej fonetycznie brzmi słowo w całości a inaczej podzielone na sylaby. W takich wypadkach etykietowano część słowa niezależnie jak byłaby ona słyszana w całości słowa. Drugim problemem było to, że w przypadku gdy występowały pewne złożenia głosek (Spółgłoski zwarte) spółgłoska z tego złożenia była umieszczana w losowym momencie ciszy.

ATK - API dla HTK - wstęp

Aby korzystać z HTK w miarę prosty sposób, warto zastosować ATK - czyli API dla HTK.
Jest to niejako opakowaniem do poszczególnych podstawowych źródeł HTK: gramatyki(AHTK), n-gramów(AGram), słowników(ADict) i modeli akustycznych(AHmms). Moduły ARMan i AResource zapewniają zarządzanie.
Natomiast moduły APacket, ABuffer, ATree i AComponent zapewniają podstawowe typy do tworzenia komponentów i łączeniu ich w całość.

Więcej...

Pakiety to część informacji. Są używane do przenoszenia różnych informacji pomiędzy asynchronicznymi komponentami W szczególności pakiety są używane do przenoszenia sygnałów I/O od użytkownika (mowa, kliknięcia myszką, itp). W tych przypadkach każdy pakiet uzyskuje specjalną czasową pieczęć, która określa czas w którym "działa". Typ danych jaki możemy przesyłać za pomocą pakietów obejmuje: łańcuchy tekstowe, próbki dźwiękowe, zakodowane cechy wektorów, etykiety i tagi znaczeń.

Bufor - jest pakietem kolejek fifo. Dostarcza kanał na przesyłanie pakietów między komponentami. Bufor może mieć ustalony lub nielimitowany rozmiar. Komponenty chcące uzyskać dostęp do bufora mogą testować czy operacja na buforze zostanie zblokowana zanim zatwierdzi operację.

Komponent jest elementem procesu. Każdy komponent jest wykonywany z jego własnym indywidualnym wątkiem. Komponenty mają interfejs komend który może być użyty do update'u parametrów kontrolnych podczas operacji i skutkiem tego zmodyfikować czas trwania zachowania komponentu.

ASource, ACode i ARec dostarczają trzy rdzenie komponentów potrzebnych do zbudowania "rozpoznawacza mowy". ATK dostarcza prosty interfejs do syntezatora FLite przez ASyn i prosty ALog do rejestracji danych.
Budowanie aplikacji ATK zazwyczaj wiąże się z tworzeniem potrzebnych źródeł i komponentów łączących je razem i zapewniający aplikacji kodowy poziom do kontroli komponentów i procesów I/O pakietów. Tak jak w HTK ATK moduły mogą być konfigurowne przez ustawianie zmiennych w pliku konfiguracyjnym.
Dla aplikacji wymiany mowy jest dostarczony moduł zwany AIO, który wymaga połączenia i zaimplementowania synchronicznego pomiędzy wejściem a wyjściem mowy do zezwolenia do niezapisywania niepotrzebnych odgłosów.

htk - tutorial. Część 1

Gdy działa już przykład czas najwyższy stworzyć coś własnego. Bazując na książce udostępnionej na głównej stronie o htk chciałabym opisać kolejne kroki. Zwłaszcza, że w języku polskim trudno cokolwiek znaleźć na ten temat. Przykład który tu opisuję to głosowy interfejs do wybierania numeru.

Więcej...

Aby cokolwiek zrobić najpierw trzeba przygotować dane. Będą nam one potrzebne do nauczenia programu oraz do testowania.

1. Gramatyka.
W celu opisania gramatyki należy się posłużyć notacją BNF:
$digit = ONE | TWO | THREE | FOUR | FIVE | SIX | SEVEN | EIGHT | NINE | OH | ZERO;
$name = [ JOOP ] JANSEN | [ JULIAN ] ODELL | [ DAVE ] OLLASON | [ PHIL ] WOODLAND |[ STEVE ] YOUNG;
( SENT-START ( DIAL <$digit> | (PHONE|CALL) $name) SENT-END )

Gdzie | oznacza alternatywy (OR), nawiasy [] - opcjonalne przedmioty, () - jeden lub więcej powtórzeń.
Aby jednak nasz system rozumiał wyraźnie nasz słowa należy się posłużyć notacją SLF. Jednak dla wygody użytkownika została stworzona specjalny mechanizm, który tłumaczy z BNF na SLF. W tym celu należy napisać HParse gram wdnet.

2. Słownik.
Na początek należy stworzyć posortowaną listę słów/zdań potrzebnych do systemu. Przykładowe poniższe ponumerowane zdania pochodzą z bazy TIMIT:
S0001 ONE VALIDATED ACTS OF SCHOOL DISTRICTS
S0002 TWO OTHER CASES ALSO WERE UNDER ADVISEMENT
S0003 BOTH FIGURES WOULD GO HIGHER IN LATER YEARS
Te zdania mogłyby już zostać przez nas użyty do listy treningowej (wlist od word list), ale wpierw jeszcze trzeba pozamieniać spacje na nowe linie. W tym celu można użyć funkcji prompts2wlist z katalogu HTKTutorial.
Sam słownik może być zbudowany za pomocą standardowego źródła HDMan. W tym przykładzie będzie użyty angielski słownik wymowy BEEP. Zostanie on zaadoptowany bez żadnych modyfikacji poza tym, że krótkie pauzy (sp od short-pause) zostaną dodane po każdej wymowie oraz wszelkie akcenty zostaną usunięte. Jeśli słownik będzie zawierał ciszę to wtedy zostanie połączone sp z sil (od silent) i będzie pojedynczy znak sil. Te zmiany mogą być dokonane przy wykorzystaniu HDMan oraz wykorzystaniu ewentualnych skryptów edytujących zawierających często następujące trzy linijki:
AS sp
RS cmu
MP sil sil sp.
(cmu oznacza poziom akcentu).
Następująca komenda utworzy nam słownik nazwany dict przez wyszukiwanie wymowy ze słownika beep i names wszystkich wyrazów znajdujących się w wlist:
HDMan -m -w wlist -n monophones1 -l dlog dict beep names
-l dlog to różne statystyki tworzenia słownika. W szczególności pokazuje cy nie brakuje jakiś słów. W przykładzie nasze zestawy treningowe nazywają się monophones1. Zwyczajowy format wejścia każdego słownika wygląda następująco:
WORD [outsym] p1 p2 p3 ....
które oznacza, że słowo WORD jest wymawiana jako sekwencja p1 p2 p3... . Nazwa w nawiasach [] (outsym w naszym przypadku) oznacza string, który znajdzie się na wyjściu w przypadku rozpoznaniu tego słowa. Gdy wyrazu nie będzie wewnątrz [] wtedy nic nie będzie na wyjściu. Jeśli nawias zostanie pominięty to string na wyjściu będzie jak słowo. Oto kilka przykładów:
A ah sp
A ax sp
A ey sp
CALL k ao l sp
DIAL d ay ax l sp
EIGHT ey t sp
PHONE f ow n sp
SENT-END [] sil
SENT-START [] sil
SEVEN s eh v n sp
TO t ax sp
TO t uw sp
ZERO z ia r ow sp

htk - demo

Ostatnio było o zainstalowaniu samego htk. Teraz napiszę jak uruchomić przykład podany na stronie. Bo nawet to robi się jakoś inaczej niż zwykłe uruchomienie demo :).
zanim jednak zabierzemy się za uruchamianie przykładu należy ściagnąć sobie (najlepiej najnowszą) wersję Perla na Windowsy. (pobrać można np. stąd www.perl.org).

Więcej...

Teraz możemy juz postępować zgodnie ze schematem, który jest przedstawiony na głównej stronie htk. Czyli otwieramy linię komend (uruchom->cmd). A potem po kolei wpisujemy (warto pamiętać że strzałkami możemy wpisać poprzednią komendę:

cd HTKDemo
mkdir hmms
cd hmms
mkdir tmp
mkdir hmm.0
mkdir hmm.1
mkdir hmm.2
mkdir hmm.3
cd ..
mkdir proto
mkdir acc
mkdir test
perl runDemo.pl configs\monPlainM1S1.dcf 

Program powinien się wykonać a na końcu powinny wyjść wyniki:
SENT: %Correct=0.00 [H=0, S=3, N=3] WORD: %Corr=63.91, Acc=59.40 [H=85,
D=35, S=13, I=6, N=133]

rozpoznawanie mowy

transkrypcja. każdy socjolog wie, jak ciężkie zadanie to jest. a i co poniektórzy studenci i zapaleńcy ile czasu trzeba poświęcić, aby zapisać to co ktoś po prostu mówił. Stąd moje zainteresowanie rozpoznawaniem mowy (i zapisywaniem).

Więcej...

System rozpoznawania mowy to ogólnie sumowanie pojedynczych sygnałów zakodowanych w postaci sekwencji jednej lub wielu symboli. Główne problemy to:
1. nie zawsze jedna głoska oddaje jeden symbol (i nie zawsze ten sam) (nieznana granica słowa także)
2. Są różne sposoby zrealizowania mowy ze względu na różnorodność mówcy, środowiska, nastroju, itp.

Są dwie podstawowe biblioteki wspomagające oprogramowanie tego typu: htk i shpinx. Na razie zaczęłam od htk.

Na początek należy wszystko ściągnąć z oficjalnej strony: http://htk.eng.cam.ac.uk/. Wszystko to znaczy paczkę źródłową, przykłady i książkę (a przynajmniej ja tak zrobiłam). HTK jest biblioteką wieloplatformową. Aby uruchomic ją na Linuxie potrzebny jest jednak program Cygwin. Na platformie Windows potrzebny jest Microsoft Visual oraz perl.

Gdy mamy zainstalowanego Visuala możemy się posłużyć tym mini tutorialem do zainstalowania samego htk:
1. w wierszu poleceń należy dodaż ścieżkę Visual Studio, robi się to tak:
PATH C:\Program Files\Microsoft Visual Studio 9.0\VC\bin %PATH% (procenty sprawiają, że na koniec się dopisuje ścieżka, w razie czego wpisz help PATH do cmd)
(lepiej jednak dodac te zmienna w Mój komputer->właściwości->zaawansowane->zmienne środowiskowe)
2. sprawdź czy ścieżka została dodana -> wpisz PATH, jeżeli jest no to ok.
3. Wróć następnie do folderu gdzie masz HTK (o nazwie HTK 3-4.1) przejdź do folderu htk i stwórz tam folder o nazwie bin.win32 wpisując: mkdir bin.win32
4. uruchom możliwość cmd z Visuala poleceniem: vcvars32
5. wejdź do folderu HTKLib (cd HTKLib) i wpisz: nmake /f htk_htklib_nt.mkf all (powinien się wykonać makefile)
6. przechodzimy katalog wyżej (cd ..) i wchodzimy do folderu . Wpisujemy: nmake /f htk_htktools_nt.mkf all. Analogicznie robimy dla folderów: hlmlib, hlmtools
W przypadku pojawienia się Link: error spróbujcie uruchomić samego link (w folderze \bin) jeśli wyskakuje komunikat, ze brak mu dlla to znajdźcie go i dodajcie tę ścieżkę także, u mnie to było: C:\Program Files\Microsoft Visual Studio 9.0\Common7\IDE

I się nie przejmujcie że przy niektórych bibliotekach makefile się nie wykona (pojawią się tylko 2 linijki).
Na koniec w pliku bin.win32 powinny być pliki exe.

Zasady graficznego projektowania, cz. 1

Po angielsku tak zgrabnie sie to nazywa: Principles of graphic design. Co to w ogóle jest ten graphic design? W różnych źródłach są inne definicje. Ale ważny jest trzon - jest to sposób wizualnej komunikacji z użytkownikiem. Przydatne zarówno przy web design jak i wszelkiego innego rodzaju projektowaniu wyglądu czegoś :) O tym chciałabym dziś kilka słów powiedzieć.

Więcej...

Graphic design jest

a) celowe. Z tym chyba każdy się zgodzi. Zanim coś się zrobi lepiej zazwyczaj to jednek przemyśleć - w ostateczności okazuje się, że wtedy mniej pracy (i nerwów byc może) będzie nas to kosztowało. Projekt może być bardzo pomocny przy odpowiadaniu na pytanie: "jak". Za jego pomocą można pokazać nawigację strony, jak przesyłać informację i inne. Ponadto wiąże koncepcje, pomysły, funkcje dla specjalnych grup (np. wiekowych).

b) informacyjne. Może udzielać odpowiedzi na pewne pytania informacyjne (np. za pomocą wykresów)

c) wykorzystuje wizualny język posługując się np.:

• litery "puste" i pełne w środku (tzw. negative/positive)
• spadające i wznoszące się (tzw. falling/rising) gdy litera jest wyżej lub niżej niż poprzednia
• stabile i niestabilne (stable/unstable) w zalezności czy litera stoi prosto czy jest przekrzywiona.
• przód i tył (front/back). Gdzie back oznacza w lustrze a front "normalnie"
• grube i cienkie (thick/thin) czyli jakby bold i bez
• małe i duże (small/large)
• równe i nierówne (smooth/rough), gdzie nierówne to takie jak często można spotkać na ścianach budynku - z różnymi ozdobnikami grafiti.
• matowe i przezroczyste (opaque/transparent), typ transparent to np. znakoi wodne na dokumentach
• wchodzące i wychodzące(coming/going) - gdy widać tylko część litery.

d) no i oczywiście jest procesem, który na podstawie pewnych infromacji wgłębia się coraz bardziej w szczegóły.


To tyle tak pokrótce odnośnie części pierwszej. Część druga będzie o teorii koloru.

Web usability od strony wizualizacji. Przygotowanie treści

Gdy już znamy cel naszej strony, znamy swoich przyszłych czytelników, ogólny zarys treści i w jaki sposób będziemy umieszczać tekst czas pójść krok do przodu - organizacja przyszłej treści.
Przyjrzyjmy się zatem następującym pojęciom: nawigacja, organizacja, personalność i ograniczenia naszej strony.
Więcej...

1. organizacja strony. Gdy wchodzimy na stronę na pierwszy rzut oka powinniśmy wiedzieć jaka jest tematyka strony (Np. obrazki zwierząt będą nam mówiły, że jesteśmy na stronie im poświęconej). Na dobrej stronie powinna także znaleźć informacja gdzie coś znaleźć. Do tego celu służą listy alfabetyczne, kategorie, itp. W przypadku kategorii ważne jest aby umieszczać te kategorie. Jak mamy tylko dwie rzeczy do jakiejść kategorii zróbmy osobną - nieoszczędzajmy :) inaczej odbiorca wejdzie. Stwierdzi nie ma i opuści naszą stronę. Praktycznie njabardziej sprawdza się tworzenia kategorii od ogółu do szczegółu. Zapobiega to tworzeniu miliony małych kategorii umieszczonych w jednej liście. Należy zadbać aby kategorie były tak podzielone aby ktoś znalazł czego szuka, aby mógł w jakiś sposób przeglądać strony (nie jest zdecydowany co chce).
Przy projektowaniu organizacji, gdy mamy już jakąś koncepcję warto rozrysować ją na kartce. Pozwoli ona nam lepiej wytłumaczyć innym o co chodzi a tekże samemu zweryfikowac schemat (powstanie tzw drzewo). Eksperci podają, że organizacja nie powinna być głębsza niż 7 stopni wgłąb, ale oczywiście istnieją sytuację gdy jest to uzasadnione by było ich więcej.
Gdy jakiś projekt już powstanie warto przetestowac tą witryną na najlepiej kilku uzytkownikach.

2. Nawigacja treścią. Jeżeli mamy już organizację to już dużo. Ale za mało. Jeszcze użytkownik musi poznać organizację nasej strony. Do tego właśnie słuzy nawigacja. Przykładami są: menu (najróżniejsze rodzaje), wyszukiwarki, indeksy, tabele treści, mapy, odnośniki, kotwice, strzałki, linki. Elementy te dodatkowo mogą być globalne (widoczne na każdej stronie) i lokalne. Dobra nawigacja powinna mówić, gdzie użytkownik jest, jak się tu dostał oraz gdzie może iść dalej. Warto by nie zmieniać tej nawigacji zbytnio. Bo wtedy człowiek może się pogubić jeszcze bardziej. (wyobrażacie sobie drogę gdzie jest raz znak do Krakowa, a raz do Warszawy?). Przydatne są tez stałe buttony typu: homepage, menu. Gdy dobrze dobierzemy elementy nawigacji, wtedy niepotrzeba ich zbyt wiele, co doprowadzałuby do niepotrzebnego zamętu. Na niewielu stronach praktykowany jest dobry zwyczaj, aby w menu podkreślny było miejsce gdzie jesteś w strukturze strony.
Wręcz niezbędy są też tak zwane breadcrumb(nie wiem jak na polski to tłumaczyć) - powiedzmy okruszki :) A chodzi o pokazanie użytkownikowi gdzie jest. Np.: home->recenzje->gry->World of Warcraft. Nie zajmuje wiele miejsca a jest bardzo użyteczne. Dobrym zwyczajem jest także umieszczanie ikonek przy tekstach (w podkategoriach). Łatwiej mózg ludzki przypomni sobie stronę na której był po obrazku niż po treści (przynajmniej w niektórych przypadkach :P).

3. Personalizacja. Polega głównie na nadaniu klimatu, głównego przekazu. Rzadko kiedy jedna rzecz "opowie" o naszej stronie, ale kombinacja kilku obrazków, tła (muzyki), styl czcionki może już powiedzieć to co chcemy. Pamiętaj jednak o "złotym środku" Arystotelesa. Gdy na stronie będzie mnóstwo obrazków (np. mrugających w dodatku!) i gadżetów, wycinków, kolorowych czcionek kaażdy będzie uciekał z takiej strony. Jak zawsze: zachowaj umiar. Najczęściej parę-kilka obrazków spokojnie wystarczy.

4. Ograniczenia. Pierwszym ważnym ograniczeniem jest technika. Należy pamiętac, że użytkowniczy mają różne systemy operacyjne, przeglądarki, różny sposób dostępu do Internetu, sprzęt, itp. Wiadomo: nie sprawdzi się wsyzstkiego, ale należy tak utworzyć stronę aby możliwie wyglądała jak najlepiej u wszystkich użytkowników. Różna jest także rozdzielczośc monitora. Ale nie przerażaj się - na początek wystarczy, ze wiesz o tym. Wtedy łatwiej jest temu zaradzić :)
Kolejny ważny szczegół dotyczy Cię, gdy tworzysz stronę ogólnoświatową. Musisz pamiętać, że symbole w wielu krajach są odczytywany w zupełnie inny sposób. Np. o ile dla "wszystkich" kolor czarny to kolor żałobny to okazuje się że np w Wschodniej Azji takim kolorem jest biały.

5. Zaplanuj postęp. Nie chodzi mi w tym momencie o typowe marketingowe hasła. Mam na myśli tak naprawdę jedynie to, aby pamiętać, zaplanować częste aktualizacje. Zarówno treści jak i strony technicznej. Strona, która sie nie rozwija jest nudna. Im częściej coś się zmienia, tym większe prawdopodobieństwo że kogoś zainteresuje to co piszemy. A przede wszytskim zaciekawi i będzie wracał zobaczyć co sie zmieniło.

Tyle na dzisiaj. Skończyliśmy rozdział wstępu :) to znaczy wszystkiego po trochu i to co najważniejsze. Ale jak mówią: "Diabeł tkwi w szczegółach", które myślę odkryję w kolejnych notkach :)

Web usability od strony wizualizacji. Planowanie.

Znamy już podstawy dobierania kolorów, jak pisać, ale to jeszcze za mało, żeby strona fajnie wyglądała. Czas na jedną z ważniejszych działów web designu usability na polski często tumaczone jako funkcjonalnosć strony, czyli jak sprawić aby Internauci sprawnie poruszali się po naszej stronie.
Na temat samego Web usability znajdziecie sporo informacji w Internecie (choć być może sama też kiedyś napiszę jakąś notkę na ten temat). Eksperci w tej dziedzinie zwracają uwagę np. na niepotrzebne ramki, wycinanie niepotrzebnego tekstu oraz unikanie nielinearnego tekstu. Ważne jest jednak także inne podejście - od strony ogólnej estetyki, tzw. wizualizacji (ciekawe czemu kojarzy mi sie to z przedmiotem na studiach: Metody i symulacja systemów :P). O tym chcę pisać tę notkę (i pewnie jeszcze parę kolejnych).
Web design to głównie zadbanie o trzy obszary:
- budowa techniczna strony
- struktura strony
- wizualizacja (jak strona wygląda)

Wiemy, że chcemy stworzyć stronę. Tylko... od czego by tu zacząć? W sumie odpowiedź jest prosta - od planowania :)
Pomyśl co, jak i komu chciałbyś przekazać treść zawartą na stronie. Zadecyduj o celu strony. Przy wyborze treści na stronie warto zwrócić uwagę na fakt, że treść to nie tylko słowa, ale też grafika, muzyka, klimat, interakcje, organizacja strony. Bardzo ważne są te elemnty, gdyż tylko one mogą pomóc, aby nie dochodziło do ewentualnych pomyłek (ile razy zdażyło Wam się źle zrozumieć drugą osobę podczas rozmawiania na chat'cie, gg, czy innym komunikatorze tylko dlatego że nie widziałeś niewerbalnych treści??) w rozumieniu tekstu. W ten sposób odpowiemy sobie na pytanie jak umieścić zawartośc strony (content).
Dalej jak zastanawiamy się nad tym kto jest odbircą naczej witryny warto doprecyzować sobie te pytania pytając o wiek, zaznajomienie z Internetem, (może płeć?), wykształcenie, jak dobrze znają to o czym piszemy, co chcieliby się dowiedzieć. Można także spróbować wczuć się w rolę odbiorcy i zastanowić się czego od tej strony by oczekiwał. W ten sposób łatwiej nam będzie zastanowić się nad dobraniem takiej treści która zadowoli Internautę i sprawi, że będzie korzystał z Twojej strony. To "wczucie się" często jest przedstawiane w postaci scenariuszy. Tworzy się kilka osób (należących do ludzi, którzy naszym zdaniem powinni mieć powód wejścia na naszą stronę), następnie podaje się ich fikcyjne dane i oczekiwania, powód wejścia na stronę i idealne wyjście.
I na koniec zastanawiamy się nad treścią. Pomoże nam to w następnym kroku - czyli co będzie znajdowało się na stronie.
Ważne jest aby nie była to strona o wszystkim dla wszystkich - bo jest to niemożliwe. Im węższa dziedzina i zakres tym lepiej dostosowany do użytkownika.
Przy treści dobrze jest pamiętać, że użytkownicy często mają pewne skojarzenia, które można wykorzystać, np.: kolor zielony - dobrze, czerwony - źle, linki są podkreśone i niebieskie. Dobrym pomysłem jest także wprowadzać sondy, testy, formularze odnośnie naszej strony dla użytkowników. W końcu oni najlepiej wiedzą czego naszej stronie brakuje.

teoria kolorów

Teoria kolorów to zbiór zasad używanych do stworzenia harmonicznej kombinacji kolorów (czyli żeby wszystko pasowało). Do jej wizualizacji wykorzystuje się koło kolorów wynalezione przez... Izaaka Newtona(to dopiero był geniusz).



Klasyczne schematy:
- jeden kolor (monochromatic)
- pewien wycinek koła (analogous), który daje nam przyległe kolory. Jeden (środkowy) jest używany jako główny kolor - reszta służy wzbogaceniu.
- dwa kolory(complementary) - komplementarnie, czyli znajdujące się naprzeciw siebie
- trzy kolory - trójkąt wpisany w koło
- cztery - kwadrat wpisany w koło.

Takie schematy wyróżnia się przy zastosowaniu teorii koła. W przypadku trójkąta i kwadratu wskazanym jest pewien zakres koloru (prawie jak w analogous tylko dużo mniejsze)

Pewna uwaga: koło kolorów nie bierze pod uwage odcieni. To znaczy wg tej teorii jasny zielony z fioletowym pasuje tak jak ciemny zielony z fioletem.

Typografia w Internecie

No cóż, wakacje się skończyły. Czas zabierać się do pracy. Teraz przyszło mi na dokształcanie się w kwestii typografii. Wcześniej nawet nie do końca wiedziałam co to jest (co i dziwne nie jest, bo definicja w Wikipedii porażająca tez nie jest), ale powoli.

Typografia to ogólnie sposób zapisu informacji w taki sposób by był jak najlepiej czytelny. Głównym celem tej dziedziny nauki jest, aby czytelnik na pierwszy rzut oka wręcz wiedział czy ten tekst opłaca mu się czytać czy nie. A jeśli tak to maksymalnie uprzyjemnić mu tę sprawę. Stąd powstały pewne sprawdzone wytyczne jak to robić, aby dobrze się czytało.

Mówi się, że podczas optymalizacji typografii to optymalizacji: usability (funkcjonalność, użyteczność), accessibility(dostępność) i readability(czytelność). Poniżej przedstawię pokrótce najważniejsze z nich.

1. Measure (miara) - czyli ilość znaków w jednej linii. Okazuje się że dla tekstu pisanego jednokolumnowo powinno być 40-80 znaków (razem ze spacjami) w jednej linii. 65 to idealnie.

2. leading - odstęp między kolejnymi wierszami, fachowo: interlinia. Czasem wraz z rozmiarem czcionki nazywana wysokością linii. Dobra reguła to 2-5 pt więcej niż ma czcionka którą piszemy. Przykładowo dla 12 pt dobre będzie 15 lub 16 pt(wysokości).

3. hanging quotes/punctuation - tłumacząc na polski "wiszące cudzysłowia/wypunktowania". A chodzi po prostu o to, żeby wszelkie znaki interpunkcyjne (także wypunktowania) były poza główną kolumną (niejako wystawały poza kolumnę).

4. Widows and Orphans. Widows (nie mylić z Windows!!) to słowo lub linia na końcu lub początku paragrafu. Orphans jest tym samym tylko, że na końcu kolumny. A chodzi o to, aby nie było pojedynczego wyrazu w ostatniej linijce paragrafu (widow) ani pojedynczej linii gdy rozpoczynamy nową kolumnę.

5. Clean rags - to zakończenia kolejnych wierszy w przypadku, gdy tekst nie jest justowany. Ważna rzecz polega na tym, aby pilnować żeby zbytnio nie różniły się między sobą kolejne linijki w paragrafie pod względem długości, bo takie coś wygląda dziwnie:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eleifend mauris vel nibh interdum molestie. Nulla facilisi.
Pellentesque commodo elit imperdiet erat luctus at porttitor lacus luctus. Sed mi massa, gravida vitae faucibus ac,
lacinia ac nunc. Curabitur sagittis varius lacinia. Phasellus iaculis justo non velit vulputate id fermentum neque ultricies.

6. Emphasis (nacisk) - to niepotrzebne podkreślanie wyrazów. Polega to na tym, że w trakcie tekstu zwykłego (jaki ja teraz próbuję stworzyć) umieścimy jakieś WAŻNE SŁOWO w ten właśnie sposób (a niektórzy jeszcze podkreślenie dodają). Wystarczy użyć jeden stopień wyżej podkreślenie a nie wszystko co się da. Na tej stronie możecie znaleźć dokładny opis hierarchii podkreślania słowa: http://www.markboulton.co.uk/

7. rozmiar czcionki - raczej logiczna sprawa. Warto jednak wziąć jeszcze pod uwagę dla kogo ta strona jest kierowana (np. dla osób starszych lepsza byłaby nieco większa czcionka). Zazwyczaj lepiej żeby litery były troszkę za duże niż za małe (patrząc na tendencje dzisiejszego Internetu).

8. traktowanie tekstu jako UI - co to znaczy? To np linki w kolorze niebieskim, zróżnicowanie kolorów na stronie (z rozwagą!!), itp.

9. Warto zwrócić uwagę na np. wyrównanie do siatki, przejrzeć nagłówki, które zostały juz sprawdzone przez społeczność Internetu (Headlines for typography)
Dla zainteresowanych polecam odnośniki na wikipedii (po wpisaniu "typografia") oraz stronę anglojęzyczną webtypography.net

A tak na marginesie. Wiecie skąd tekst Lorem ipsum...? Jest to zwyczajowy tekst używany w Internecie jako okreslenie: "Tu jest jakiś tekst". Jeżeli chcecie wiedzieć historię czy w ogóle coś więcej (tekstu) to odsyłam do Googla :)

... i po sesji

No i po egzaminach. Sesja za nami. I muszę przyznać - ta sesja choć wyczerpująca jak każda inna dla mnie była jakaś trochę bardziej szczęśliwa (poza jakimiś wyjątkami). No tak. Tylko są niby wakacje. Ale to nie oznacza koniec zmartwień. No bo w tym roku trzeba jakoś praktyki sobie załatwić. Uch... a łatwe to to nie jest. Zwłaszcza w Szczecinie. Miejmy nadzieję, że coś się uda załatwić.

Smutna refleksja

Ksiądz Twardowski napisał kiedyś w swoim wierszu: "spieszmy się kochać ludzi, tak szybko odchodzą". Z czasem stało się to zdanie bardzo często używane.
Ostatnio jednak miałam okazję się przekonać, że kochać ludzi to za mało. Brakuje jeszcze, żeby tę miłość okazywać, tak żeby wiedzieli że są dla nas kimś ważnym. Bo potem można tego żałować bardziej, dużo bardziej niż jakby tej osoby się nie kochało wcale. Sprafrazowałabym słowa księdza Twardowskiego: "spieszmy się okazywać ludziom naszą miłość, tak szybko odchodzą".

Hello World 2!!

No cóż. Właśnie zostałam współtwórca tego bloga. Zadziwiające uczucie. Jakby zyskać jakąś władzę. No i obrazki. Widzieć swoje zdjęcie w Internecie to tez dziwne uczucie. Zwłaszcza jak pierwszy raz. Ciekawe co tu jeszcze kiedyś będzie :)