Skip navigation.

Log in | Sign up

unBlogged

Click here, click there, click everywhere

Posts tagged with "voice"

My first tutorial: How to add voice to your site

, , ,

Hello guys!

Today Opera Software has released a new site: The Opera Developer community site. The purpose is great, and I like major web browsers having their own developer community sites.

As the title of this post announces ... the site already had published my first tutorial :smile:. If you've read my previous blog posts, it's not a big surprise my first tutorial is about voice interactivity. Currently, very few know about VoiceXML, and there are very few tutorials. Most of them reach only the level of "Hello world". Therefore, my tutorial goes much further, by actualling telling you how to really put voice to use in your site. I didn't write yet-another tutorial about AJAX, XHTML, CSS, DOM, or JavaScript. I wanted something different.

Go ahead and read the tutorial from dev.opera or from my own server (mirror).

Thanks very much to TarquinWJ and Jax. The tutorial has reached the level of maturity you are seeing thanks to both of them :smile:.

Any suggestions or comments are welcome.

Despre interactivitatea vocală pe web

, , , ...

Another article in Romanian, introducing voice interactivity on the web for new users (not developers!).

Interactivitatea vocală este o suită de standarde web ce permit dezvoltatorilor web să adauge comenzi vocale în siteuri. În funcţie de capabilităţile siteului, utilizatorul poate să facă absolut tot ce poate cu mouse-ul şi cu tastatura.

Important de ştiut despre interactivitatea vocală este că un dezvoltator web nu implementează el algoritmii de recunoaştere vocală şi nici de sintetizare vocală, ei doar programează regulile de recunoaştere vocală şi oferă textul pentru sintetizare. Adică ... ei asociază, de exemplu, pronunţarea cuvântului "Help" cu o pagină. Bineînţeles că regulile de recunoaştere vocală pot să fie mult mai avansate, ajungând chiar la recunoaşterea frazelor pronunţate. Dezvoltatorul web depinde de implementarea navigatorului web (capabilităţile de recunoaştere şi calitatea sintetizării). Deşi pare "neplăcut" este defapt un avantaj pentru dezvoltatori şi utilizatori. Asta deoarece utilizatorul nu va auzi pe fiecare site o altă voce şi recunoaşterea vovală va fi întotdeauna la fel de bună. Pentru dezvoltatori este avantajos din punct de vedere practic: cum ar fi să-şi programeze ei afişarea paginilor web la ora actuală? În primul rând nu se oferă tehnologiile necesare (adică destul de avansate) pentru a putea face implementări la standarde web în site-uri.

Pentru a începe să foloseşti interactivitatea vocală pe site-uri este necesar să foloseşti un navigator web ce implementează aceste tehnologii foarte noi, să ai un microfon bun, placă de sunet şi boxe. Singurul navigator cu aşa ceva disponibil pentru toţi, la ora actuală, este Opera 9 pentru Windows. Acesta se descarcă de pe www.opera.com. Se instalează în mod normal. După pornire trebuie activată capabilitatea de interactivitate vocală: mergi la Tools > Preferences > Advanced > Voice. Acolo trebuie bifată opţiunea "Enable voice-controlled browsing". Acum Opera va descărca fişierele necesare.

După cum se observă totul este în limba engleză pentru că Opera Software are momentan implementarea realizată în parteneriat cu IBM şi ceea ce le-a fost oferit este doar pentru limba engleză, pe Windows.

După descărcare se pot introduce comenzi vocale: trebuie doar tastat Scroll Lock (în funcţie de setările de la Voice Preferences). Pentru a controla navigatorul Opera comenzile încep cu "Opera". De exemplu, "Opera quit", "Opera previous page", "Opera go to home page" şi altele. Pentru mai multe comenzi, uită-te la comenzile vocale disponibile în documentaţie (tastează F1).

Pentru a cere navigatorului Opera să-ţi sintetizeze vocal textul de pe pagină trebuie doar să-l selectezi şi să tastezi V sau să dai click dreapta de unde alegi "Speak selection".

Site-uri cu interactivitate vocală sunt foarte puţine. Dacă doreşti să testezi un site cu aşa ceva, intră pe www.robodesign.ro/pronet. Acolo trebuie să treci site-ul la limba engleză (click pe legătura "English" care se găseşte sub bara de navigare a site-ului, în dreapta). Comenzile vocale disponibile pe prima pagină sunt:

- visit nume-pagină (de exemplu "visit offers", "visit support", "visit contact"
- speak navigation
- speak content
- help
- change language (pe prima pagină)
- news 1, news 2 ... până la 10 (pe prima pagină)

Pentru a testa şi alte comenzi vocale, poţi folosi modulul de administrare al site-ului: www.robodesign.ro/pronet/admin. Acolo poţi adăuga pagini noi ale căror titlu trebuie să-l spui atunci când doreşti să intrii pe pagină folosind o comandă vocală. Astfel poţi observa cum funcţionează (mai ales dacă te vei uita prin surse).

Utilitatea acestor tehnologii web este evidentă în cazul utilizatorilor cu handicap.

Interesant este de urmărit evoluţia acestor tehnologii web pe viitor.

I won ... a national contest :)

, , , ...

Hello!

I participated in a national contest for applied informatics. I, of course, won the city phase :smile: and went to the national contest.

I also won the national contest. I'm first :D.

The site with which I participated is PRO-net. I wrote a presentation in Romanian language, see it here.

For those many people who don't know any Romanian, highlights of the presentation:

- I wrote all the code, my twin brother did all the graphics. Yes, that means we did NOT copy anything.

- the interface uses only a CSS layout (no tables!).

- site purpose: professional, clean, accessible, and technologically advanced.

- clean semantical markup code.

- bilingual site: romanian and english. You can change the language from the front page (in the upper right corner, under the menus).

- client-side technologies: valid (x)HTML 4.01 Strict, valid CSS 2, valid RSS 2, DOM 2 Core, DOM 2 Events, ECMAScript 3 (JavaScript 1.5), XMLHttpRequest (AJAX), designMode (WYSIWYG editing), and Flash 8.

- administration module (Content Management System): upload/rename/delete multiple files at once, add/edit/delete pages, sub pages and news. Pages and sub pages can also be reordered.

- our own WYSIGWYG editor which is fully functional on Opera 9 (latest weeklies) and Firefox 1.5. Using a completely different code structure than any other online WYSIWYG editor: total separation between code, GUI layout, design and even separate iframe. It allows editing pages with live CSS preview, exactly as viewing the saved document. The code is also extensible, meaning I can easily add new capabilities. The interface is loaded via "AJAX" (that's XMLHTTPRequest).

- the front page Flash 8 animation works with Flash 7 too (Linux included). If the client has no Flash at all, no problem, since the Flash animation is not shown, it's replaced by an image which looks almost identical. I do not use any server-side/client-side detection at all. Just proper HTML code :smile:.

- server-side technologies: PHP 5 (running in Apache 2), XML, DOM 2 Core. The site can have multiple languages (using, of course, Unicode) and multiple interfaces (via CSS and/or XSLT).

- the site code structure is made so I can easily extend and add new functionality to the site.

- the generated page is manipulated via DOM during PHP code execution, not as a string. Therefore, I can easily change any part of the document, in any moment.

- dynamically generated permanent links.

- and ... the bonus: voice interactivity. Yes, it works only in Opera 8+, but because of a bug I've reported (XHTML+CSS bug, not related to Voice), you have to use the latest Opera 9 weeklies. For voice interactivity I used the following client-side technologies: XHTML+Voice 1.2, VoiceXML, SRGS ABNF, SISR, XML Events, SSML and ACSS. Adding/deleting pages in the administration module also adds/deletes voice commands.

- highly compatible site: tested with Lynx, Opera 8, Opera 9, Firefox 1.0, Firefox 1.5, IE 6, IE 7, Konqueror 3.5. Must work with any browser which implements HTML. Compatibility is not affected by voice-related technologies.

Comments, suggestions, critiques are welcome.
Download Opera, the fastest and most secure browser