Category Archives: Javascript

IVONA WebReader czyli gadające strony WWW

Posted on by
Reply
IVONA WebReader czyli gadające strony WWW
2010-04-26 00:47

W tym poście postaram się przybliżyć troszkę projekt IVONA WebReader – aplikacji internetowej mającej na celu udźwiękowienie praktycznie każdej (nie chronionej hasłem) strony internetowej. Produkt ten powoli zajmuję stabilną pozycję na rynku, ponieważ jest on wykorzystywany przez sporą liczbę państwowych instytucji, które pragną dostosować swoją stronę do potrzeb osób niewidomych. IVONA WebReader został również umieszczony na mojej stronie. Możecie go zobaczyć w prawym górnym rogu tego artykułu (szary guzik z napisem odsłuchaj).

Instalacja usługi

Instalacja tej usługi jest stosunkowo prosta i nie wymaga od klienta znajomości jakiegokolwiek języka programowania. Wystarczy zalogować się w serwisie IVONA, kliknąć w link Moje Konto (w prawym górnym rogu), a następnie przejść do zakładki zatytułowanej WebReader. Pojawi się tam strona ze statusem usługi na której będziemy mogli aktywować produkt. Podobnie jak inne aplikacje na rynku, IVONA WebReader możemy aktywować w 30-sto dniowej wersji Trial lub wykupić abonament na rok, dwa lub trzy lata. Gdy usługa zostanie aktywowana, możemy przejść do kolejnego kroku, jakim jest ustawianie parametrów naszego odtwarzacza. Kreator został podzielony na 4 główne kroki:

Wybierz głos i ustaw parametry

Na tym etapie konfigurujemy parametry odtwarzacza. W pierwszej kolejności wybieramy jeden z głosów IVONA, którym będą czytane treści naszych stron internetowych (rzecz jasna dla stron w języku polskim wybieramy głosy polskie itd.). Możemy również ustawić prędkość syntezowanych zdań oraz ich głośność (głośność syntezy nie wpływa na początkową wartość głośności odtwarzacza, po prostu nagranie będzie syntezowane ciszej, tak więc zalecam ustawienie tego parametru na 100%). Kolejnymi parametrami są wartości odpowiadające za wygląd i zachowanie odtwarzacza. Zmiany jakie dokonamy będą na bieżąco pokazywane w okienku podgląd odtwarzacza. Możemy tutaj określić jego wymiary, zachowanie kiedy odtwarzacz jest spauzowany oraz jego wyrównanie (do lewej lub prawej). Kiedy udało się już skonfigurować wszystkie opcje dostępne w tym kroku, możemy przejść dalej klikając przycisk „Następny” umiejscowiony na samym dole strony.

Dopasuj kolory

Jak sama nazwa wskazuje, w tym kroku dobieramy kolory odtwarzacza. Można skorzystać z gotowych wariantów kolorystycznych lub stworzyć swój własny niepowtarzalny wygląd dopasowany do Twojej strony. IVONA WebReader umożliwia ustawienie wartości kolorów dla jego tła, przycisków lub konturu oraz ustawienie jego przezroczystości. Dzięki opcji podglądu będziesz mógł na bieżąco obserwować jak prezentuje się odtwarzacz o wybranych przez Ciebie parametrach. Uwaga ! Zalecam również ustawienie wartości koloru tła Twojej strony. IVONA WebReader używa tego parametru podczas wyświetlania pod przeglądarkami Opera ponieważ produkty z tej rodziny nie pozwalają na osadzenie odtwarzacza w trybie z przeźroczystym tłem, tak jak ma to miejsce pod innymi przeglądarkami.

Sporządź listę domen

W tym kroku definiujesz listę domen, na których będzie osadzony produkt IVONA WebReader. Domeny (lub sub-domeny) wpisujemy w wyznaczone pole tekstowe, a następnie klikamy na przycisk „Dodaj”. Krok ten jest niezbędny do prawidłowego działania odtwarzacza i ma on na celu zabezpieczenie Twojego odtwarzacza przed innymi, którzy chcieliby go użyć na własnych stronach. Listę domen będziesz mógł w każdej chwili edytować w dziale Zabezpieczenia

Wygeneruj kod

To ostatni krok który musimy przejść, aby otrzymać kod, który będziemy mogli skopiować do źródła strony internetowej. Na tym etapie należy określić, które elementy strony mają zostać udźwiękowione. Możemy tutaj zaznaczyć, czy WebReader ma rozpoznawać treść do czytania umieszczoną wewnątrz znaczników (np. „p”,”body”, „table”) lub też treść umieszczoną wewnątrz dowolnych znaczników posiadających atrybut class (wybieramy opcje class= i podajemy wartość tego atrybutu) lub id (wybieramy opcje id= i podajemy wartość tego atrybutu). Jeśli ktokolwiek miałby trudności z tym krokiem proponuję zapoznać się z tym dokumentem.

Możliwośći

IVONA WebReader umożliwia odsłuchiwanie zawartości stron pod każdą dobrą przeglądarką na rynku. Działa również pod przeglądarkami dostępnymi na nowoczesnych telefonach komórkowych (np. Safari Mobile, Opera Mini, Skyfire). Po kliknięciu w przycisk Odsłuchaj następuje osadzenie obiektu Flash, który jest odpowiedzialny za odtwarzanie dźwięku oraz za interfejs użytkownika. W przypadku przeglądarek mobilnych zostajemy bezpośrednio przekierowani na plik MP3, który otwiera się w domyślnym oprogramowaniu dostępnym na telefonie (np. Windows Media Player, czy Quick Time). Najfajniejszą opcją w tej aplikacji jest moim zdaniem to, że nie musimy generować odtwarzacza dla każdej zmiany na stronie. IVONA WebReader automatycznie pobiera aktualną wersję strony internetowej i generuje na jej podstawie dźwięk z syntezą mowy.

Dostępność dla osób niewidomych oraz słabowidzących

IVONA WebReader, w przeciwieństwie do większości aplikacji napisanych w technologi Adobe Flash, jest w pełni kompatybilny z oprogramowaniem typu screen-reader, ponieważ jest on widoczny dla niego jako zwykły link, a nie obiekt Flash. Oczywiście przeglądarka musi sama w sobie wspierać tryb Accessibility i umożliwiać przełączanie się między kolejnymi elementami na stronie za pomocą klawisza Tab. Kiedy osoba z wadą wzroku będzie się przełączać między kolejnymi elementami strony i natrafi w końcu na link IVONA WebReader, oprogramowanie screenreader przeczyta jej (w zależności od wybranego języka odtwarzacza) następujące zdanie:

IVONA Webreader. Wciśnij Enter by rozpocząć odtwarzanie

IVONA Webreader. Press Enter to begin reading

Po wciśnięciu klawisza Enter, następuje rozpoczęcie odtwarzania, i w tym momencie możemy używać skrótów klawiszowych dostępnych w aplikacji (Enter – spauzuj/wznów odtwarzanie, klawisze numeryczne od 0 do 9 – poziom głośności, strzałki lewo i prawo – skok o 5 sekund w przód lub wstecz). Warto jeszcze wspomnieć o bardzo ważnym skrócie klawiszowym, jakim jest Ctrl+Spacja. Wciśnięcie tej kombinacji, niezależnie od tego, na jakim elemencie html-owym znajduję się focus, spowoduje rozpoczęcie odtwarzania artykułu.

Podsumowanie

Moim zdaniem produkt IVONA doskonale nadaje się do udźwiękowienia praktycznie każdej strony internetowej. Jest on łatwy w konfiguracji i nie wymaga instalowania dodatkowych komponentów po stronie serwera. Jedyne co mi się w nim nie podoba jest to, że syntezator słabo radzi sobie z artykułami, które przeplatają się dwoma językami (jak np. moja strona, na której jest dużo nazw własnych w języku angielskim), ale mam nadzieje, że w miarę upływu lat będzie coraz lepszy pod tym względem. Cena, jaką musimy zapłacić, jest też niemała, jak na polską kieszeń, ale należy się z tym pogodzić, iż ceny oprogramowania opartego o syntezę mowy, nigdy nie zaliczały się do tych najtańszych. Nie mniej jednak zachęcam każdego właściciela dobrej strony internetowej do zapoznania się z tym produktem, ponieważ nie możemy zapominać o ludziach, którzy na prawdę mają ograniczony dostęp do zasobów internetu, a oprogramowanie z syntezą mowy na pewno ułatwiłoby im odszukanie najważniejszych informacji na stronie.

Zbiór użytecznych funkcji JavaScript i jQuery

Posted on by
4
Zbiór użytecznych funkcji JavaScript i jQuery
2010-02-11 09:57

Dzisiaj przedstawiam Wam kilka ciekawych funkcji *.js, które mogą okazać się przydatne przy projektowaniu nowoczesnych serwisów internetowych. Niektóre z tych funkcji wymagają biblioteki jQuery inne natomiast to czysty JavaScript. Mam nadzieje, że funkcje te znajdą zastosowanie w Waszych projektach.

Przypisanie wartości do nieaktywnych elementów formularza

Funkcja ta znajduje zastosowanie przy formatowaniu formularzy HTML. Powoduje ustawienie wartości dla pola INPUT, które jest nieaktywne (blur) lub zostało pozostawione puste. W momencie kliknięcia na ww. element INPUT (focus) funkcja zeruje wartość pola. Rozwiązanie to jest bardzo użyteczne dla designerów, ponieważ pozwala zaoszczędzić miejsce na stronie, a także wprowadzić większą interaktywność do formularzy.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

function assignTextToInput(iElement,iString)
{
	jQuery(document).ready(function(){
		if(jQuery(iElement).val() == ""){
			jQuery(iElement).val(iString);
		}
		jQuery(iElement).blur(function () {
			if(jQuery(iElement).val() == ""){
				jQuery(iElement).val(iString);
			}
		});
		jQuery(iElement).focus(function () {
			if(jQuery(iElement).val() == iString){
				jQuery(iElement).val("");
			}
		});
	});
}

Otwieranie linku w nowym oknie zgodne z W3C

Wiadome jest to, że Walidator W3C nie pozwala na umieszczenie atrybutu target=”_blank” w kodzie XHTML, który powoduje otworzenie linku w nowym oknie przeglądarki. Poniższa funkcja doskonale rozwiązuje ten problem. Zamiast atrybutu target=”blank” dodajemy inny atrybut – rel=”nofollow”. Funkcja sprawdza wszystkie linki, czy posiadaja atrybut nofollow i przypisuje im atrybut target=”_blank”. Funkcja ta również usprawnia pracę Googlebot’a i mówi mu, żeby nie uwzględniał tych linków przy indeksowaniu. Warto pamiętać, że ww funkcja nie będzie działać na stronie bez jej uprzedniego wywołania, tak jak ma to miejsce tutaj:

1
2
3
4
5
6
7
8
9
10
11
12
13

function externalLinks() {
	if (!document.getElementsByTagName) return;
 
	var anchors = document.getElementsByTagName("a");
 
	for (var i=0; i<anchors.length; i++) {
 
		var anchor = anchors[i];
   		if (anchor.getAttribute("href") && anchor.getAttribute("rel") == "nofollow")
     		anchor.target = "_blank";
 }
}
window.onload = externalLinks;

Wywoływanie funkcji po załadowaniu DOM

Czasami istnieje potrzebna wywołania funkcji window.onload w paru różnych miejscach kodu. Jeśli używamy biblioteki jQuery problem ten jest rozwiązany poprzez umieszczenie bloku kodu wewnątrz jQuery(document).ready(). Co innego jeśli nie używamy ww biblioteki. Kolejne przypisania funkcji do window.onload wyczyszczą nam wartość poprzedniej funkcji. W tym przypadku z pomocą przychodzi nam poniższa funkcja:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function addLoadEvent(func)
{
	var oldonload = window.onload;
	if (typeof window.onload != 'function')
	{
		window.onload = func;
  	}
	else
	{
		window.onload = function() {
      		if (oldonload) {oldonload();}
      		func();
		}
	}
}

Funkcje operujące na ciasteczkach przeglądarki

Jeśli chcielibyście dodawać, usuwać i sprawdzać zawartość ciasteczek COOKIE poprzez JavaScript, zachęcam do wypróbowania poniższych metod:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

function getCookie(c_name)
{
if (document.cookie.length>0)
  {
  c_start=document.cookie.indexOf(c_name + "=");
  if (c_start!=-1)
    {
    c_start=c_start + c_name.length+1;
    c_end=document.cookie.indexOf(";",c_start);
    if (c_end==-1) c_end=document.cookie.length;
    return unescape(document.cookie.substring(c_start,c_end));
    }
  }
return "";
}
 
function setCookie(c_name,value,expiredays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
}
 
function checkCookie(cookiename)
{
cookietoCheck=getCookie(cookiename);
if (cookietoCheck!=null && cookietoCheck!="")
  {
  	return true;
  }
else
  {
  if (cookietoCheck!=null && cookietoCheck!="")
    {
	return false;
    }
  }
}

Javascriptowe odpowiedniki funkcji trim, ltrim i rtrim

Poniższe funkcje usuwają puste znaki (whitespace) z ciągów string. Mogą one okazać się przydatne jeśli wykonujesz różnorodne operacje na stringach.

1
2
3
4
5
6
7
8
9
10
11
12
13

function trim(str, chars) {
return ltrim(rtrim(str, chars), chars);
}
 
function ltrim(str, chars) {
chars = chars || "\\s";
return str.replace(new RegExp("^[" + chars + "]+", "g"), "");
}
 
function rtrim(str, chars) {
chars = chars || "\\s";
return str.replace(new RegExp("[" + chars + "]+$", "g"), "");
}

Wykrywanie czy strona jest odwiedzana przez iPhone i iPod

Tych skryptów osobiście nie testowałem, chociaż wydają się być poprawne. Hmmm a może też po lekkiej modyfikacji wykryją iPada :) 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

var deviceIphone = "iphone";
var deviceIpod = "ipod";
var uagent = navigator.userAgent.toLowerCase();
 
function DetectIphone()
{
   if (uagent.search(deviceIphone) > -1)
      return true;
   else
      return false;
}
 
function DetectIpod()
{
   if (uagent.search(deviceIpod) > -1)
      return true;
   else
      return false;
}
 
function DetectIphoneOrIpod()
{
    if (DetectIphone())
       return true;
    else if (DetectIpod())
       return true;
    else
       return false;
}

W miarę upływu czasu będę starał się poszerzać ten zbiór o inne ciekawe funkcje. Do usłyszenia ;)