La deschiderea site-ului, avem pagina de Home.

Pe aceasta pagina, se poate observa in stanga meniul principal, care contine urmatoarele categorii:
• Home – de oriunde din site, duce utilizatorul pe pagina principala (http://www.wiki.fictiontreeware.com/)
• Carti – duce utilizatorul la sectiunea dedicata cartilor. Aici exista articole care descriu diverse carti (cu rezumate, pareri critice si alte detalii)
• Personaje – prin intermediul acestui meniu, utilizatorul are acces la pagina cu descrierile personajelor. Aici se pot gasi personaje de carti, comics sau manga, de la Batman pana la Leopold Bloom.
• Autori – aici se gasesc informatii despre autori (biografii, carti scrise, lucruri interesante despre viata lor, etc.)
• Articole – de aici, utilizatorul ajunge pe o pagina unde gaseste tot felul de articole (de exemplu, review-urii de carti, informatii despre membrii echipei, etc.)
• Forum – se ajunge la forumul dedicat site-ului
• Stiri – se ajunge la o pagina dedicata celor mai recente stiri din domeniul cartilor.
• Galerie – este un link catre o pagina cu galerii de poze.
• Video – face legatura la o pagina cu filmulete.
• Despre – la apasarea pe acest element din meniu, se deschide o pagina cu informatii despre site si despre echipa.

In centru, pe prima pagina, apare un chenar cu titlul “Featured” in care apar pe rand diverse articole dintre cele mai recente. Prin intermediul sagetilor, se poate cicla intre articole, iar cand se da click pe imaginea care apare sau pe “Read the Full Story”, se deschide articolul respectiv.






















Tot pe prima pagina, in partea dreapta sus, se afla un chenar in care scrie “Unde esti”. In acel chenar, utilizatorul este informat despre path-ul in care se afla pe site (de exemplu, daca se afla pe pagina despre J.R.R. Tolkien, in chenar va aparea “Home -> Autori -> J.R.R. Tolkien”).

Sub acel chenar, se afla alt chenar de statistici. Aici sunt afisate informatii despre numarul de membri inscrisi, numarul de articole postate, si numarul total de vizionari al articolelor.

Si mai jos este un chenar intitulat “Imagini”, unde se apar poze interesante.

Sub acel chenar, se afla un box cu linkuri catre alte site-uri similare.

In partea stanga, sub meniul principal, se gaseste un chenar de cautare. Acolo, utilizatorul poate introduce un cuvant sau o fraza, si la apasarea tastei Enter, se vor afisa articolele care contin cuvantul sau fraza cautate.

Sub acest search box se afla interfata de logare, sau de creare utilizator nou. De asemenea, atunci cand un utilizator este logat, de acolo se poate deloga. Pentru crearea unui utilizator nou, se selecteaza optiunea “Create an account”, dupa care utilizatorul va trebui sa completeze niste campuri (cum ar fi numele si prenumele, username-ul, parola si adresa de mail), dupa care apasa OK. Va primi apoi un mail pe adresa introdusa pentru confirmarea contului.

Tot pe prima pagina, in partea de jos, exista un box intitulat “Stiri”, unde apar cele mai recente articole din categoria “Stiri”. Pentru a se citi in intregime articolele respective, se da click pe optiunea “Citeste tot”.

Si mai jos, apar cele mai recente articole din fiecare sectiune (Personaje, Autori, Articole).

Fiind un site de tip wiki, este normal ca utilizatorii care au cont sa poata face modificari la articolele deja existente sau sa adauge ei insisi articole noi, si intr-adevar, acest lucru este posibil si la site-ul nostru. Pentru adaugarea unui articol nou, se selecteaza sectiunea in care va fi inclus articolul, dupa care se apasa pe simbolul de articol nou (o foaie alba cu coltul din dreapta sus indoit). Va aparea in continuare o pagina in care se va scrie articolul. Pentru editarea unui articol existent, se apasa pe butonul de editare (o foaie cu un creion) din dreptul articolului care va fi editat.

Interfata de forum este cea clasica de forum. Pentru a posta pe forum, nu este nevoie decat de un cont (despre care am zis mai sus cum se creeaza).

La galerie, pozele sunt impartite pe sectiuni (de exemplu, avem galeria cu arta grafica din Discworld, de Josh Kirby). Pentru fiecare sectiune, vor putea fi vizualizate pozele respective la rezolutie mai mare dand click pe ele.

La sectiunea “Video”, se pot vizualiza si uploada clipuri video. Formatul unui clip video trebuie sa fie .flv. Pentru upload, trebuie ca un utilizator sa aiba cont, si sa selecteze optiunea de “Upload Videos” sau “Add Videos”.

De pe prima pagina, mai exista posibilitatea micsorarii sau maririi textului prin apasarea butoanelor din dreapta sus. De asemene, la apasarea pe logo-ul Fiction Treeware, se ajunge pe pagina principala.

Cam atat ar fi despre accesibilitate, va mai urma probabil cat de curand un post despre tehnologiile folosite.

Canvas (asa cum ii spune si numele) ofera o panza pe care se poate desena folosind JavaScript, emuland comportamentul Java AWT dezvoltat de Sun. Astfel se pot defini si folosi functii care vor desena pe aceasta suprafata, de la elemente simple la cele mai complexe, folosind exclusiv JavaScript si usurand sarcina engine-ului de randare al browserului (spre deosebire de SVG).

In continuare vom analiza un exemplu simplu de folosire a canvas-ului :

Declaram folosirea javascriptului :

<script type=”text/javascript”>

Urmeaza o functie simpla care urmeaza sa deseneze un patrat pe ecran :

function draw (){
var canvas = document.getElementById (‘hello’);

Preluarea contextului, exact ca in Java :

if (canvas.getContext){
var ctx = canvas.getContext(’2d’);

Functie asemanatoare celor din Java AWT, pentru desenarea unui dreptunghi umplut :

ctx.fillRect (25, 25, 50, 50);}}

</script>

Apelam functia draw() chiar de la inceputul afisarii paginii. Asta este tot.

<body onload=”draw ();”>
<canvas id=”hello” width=”100″ height=”100″></canvas>
</body>

Rezultatul (intr-un browser compatibil, cum ar fi Firefox 2.0 sau Apple Safari) ar trebui sa fie :

Functiile disponibile pentru canvas sunt foarte numeroase si permit desenarea diverselor obiecte prin multe abordari diferite. Am aratat deja cum se poate desena un dreptunghi. Voi exemplifica mai jos cateva din functiile cele mai interesante :

beginPath() – moveTo(x,y) – lineTo(x,y) – arc(…) – fill() – endPath()

Aceasta combinatie poate fi folosita pentru  a desena orice figura. Prin beginPath() se incepe desenarea. Apoi se pot efectua succesiv lineTo sau arc pentru a obtine linii drepte sau curbe, sau moveTo pentru a “sari” fara a desena nimic. La sfarsit se apeleaza endPath(). Cu fill() se poate umple figura curenta. Exista multe alte combinatii, pentru a obtine efecte grafice avansate, cum ar fi curbe Bezier de exemplu, dar se pot crea desene interesante chiar si cu functiile de baza descrise mai sus.

Image() – drawImage()

Orice desen facut in canvas poate fi tratat ca o imagine, fie creand o imagine noua (new Image() ) fie importand imaginea respectiva dintr-un URI. Ulterior se poate folosi respectiva imagine prin drawImage(), cu sintaxa foarte asemanatoare cu cea din Java AWT : drawImage( imageHandler, x, y).

strokeStyle() – fillStyle()

Aceste functii modifica modalitatea curenta de desenare, ingrosand pensula sau alterand umplerea figurilor.

globalAlpha

Variabila globala este singura modalitate de a modifica transparenta figurilor. Orice desen va folosi valoarea globalAlpha curenta. Prin modificari succesive, se pot obtine diverse efecte de transparenta.

save() – restore()

Functionarea acestei combinatii de functii este deosebit de interesanta, deoarece imita comportamentul functilor push() si pop() din OpenGL. Ele salveaza sau incarca imaginea curenta de pe o stiva de stari, care poate fi folosita pentru desene succesive.

translate() – rotate() – scale()

Continuand asemanarea cu OpenGL, aceste 3 functii scaleaza, translateaza sau rotesc toate figurile desenate ulterior apelarii lor. Efectele lor se pot anula folosind save() si restore() prezentate mai sus.

transform( m11, m12, m21, m22, dx, dy)

Aceasta functie opereaza direct asupra matricii de transformare, pentru eventuale reglaje fine asupra modului cum sunt desenate obiectele. Se pot astfel obtine efecte de skew sau de swirl, de exemplu.

Canvas contine multe alte functii utile in proiecte grafice de orice fel, inclusiv suport pentru umbre, obiecte 3d,

Adaugarea media in HTML este acum foarte simpla :

Exemplu 1

Mai multe fisiere sursa pot fi specificate prin elementul source,  de exemplu pentru a permite rularea de video/audio codate in diverse formate pentru diferite browsere.

Exemplu 2

Va incerca intai formatul OGG, daca este suportat, altfel va incerca alternativa MPEG-4. In plus,  se pot explicita direct codecurile necesare pentru fisierul media, cu avantaje clare.

Exemplu 3

Aici specificam ca video-ul are nevoie de codecurile respective, si chiar daca browser-ul suporta OGG, dar nu si aceste codecuri, el nu va rula. In plus, daca atributul type nu este specificat, acesta este cerut serverului, si verificat daca poate fi utilizat sau nu. Daca prima sursa nu este buna, se incearca urmatoarea ,iar daca nici una din ele nu este valida, ne vom trezi cu un event de eroare.

Odata ce am adaugat media in documentul HTML, folosind aceste elemente, le putem controla de exemplu prin cod JavaScript : (pentru start/restart se poate in urmatorul fel)

Exemplu 4

Intai specificam elementul video (aici primul din document), iar apoi apelam metoda play().

Alte exemple de event-uri utlizate sunt :

• abort, canplay (cand am suficienta data pentru cateva frame-uri din video), dataunavailable, empty, ended, error, loadstart, pause, play, ratechange (cand se modifica viteza de playback), suspend, volumechange.

Putem reactiona la astfel de evenimente foarte usor, atasand un event listener, in functie de ce eveniment ne intereseaza. Acesta poate apela de exemplu metoda play().

Exemplu 5

Un buton pentru play/pause se poate face asa :

Exemplu 6

Daca browser-ul nu suporta media HTML 5, se poate recurge la alte alternative; incerc mai intai sa folosesc HTML 5 video, iar daca nu trec la o alta metoda, fie Flash, sau un applet Java, etc.

Flash :

Exemplu 7

Java :

Exemplu 8

Tagul audio are urmatoarele atribute :

• autobuffer (loadingul se face la incarcarea paginii)
• autoplay (va incepe imediat ce este gata )
• controls (display controale de tipul buton pentru play)
• src

In plus, tagul video are atribute ca:

• height si width (in pixeli)
• loop (daca este prezent, atunci cand media se termina, va incepe de la capat)

Mai multe detalii la

• http://www.w3schools.com/html5/tag_audio.asp
• http://www.w3schools.com/html5/tag_video.asp

Sintaxa

Sintaxa HTML 5 este in mare parte compatibila cu HTML 4, exceptand cateva optiuni mai avansate ale HTML 4, ce deriva din SGML, cum ar fi procesarea instructiunilor si anumite scurtaturi. Astfel, tag-urile de  genul: <?instructiune>, <nume1<nume2>>, <nume/…/ nu vor mai fi suportate de HTML5.

O alta sintaxa ce poate fi folosita pentru HTML 5 este cea a limbajului XML, pentru aceasta toate elementele trebuiesc adaugate in namespace-ul http://www.w3.org/1999/xhtml.

Odata cu suportul pentru sintaxa XML, HTML 5 vine si cu suport pentru doua aplicatii foarte utile ale XML-ului: MathML (integreaza formule matematice in documente Web) si SVG (descrie imagini vectoriale 2D).

Odata cu HTML5 a fost introdus si suportul nativ pentru IRI (Internationalized Resource Identifier), care este o generalizare a URI ce permite includerea intr-un identificator de resursa a caracterelor UNICODE; poate fi folosit doar daca encoding este UTF-8 sau UTF-16.

O noua schimbare a sintaxei este modificarea declaratiei DOCTYPE, acum nu mai este nevoie de definitia pe mai multe randuri si greu de tinut minte din HTML4, este suficient doar: <!DOCTYPE html> . S-a recurs la aceasta solutie deoarece HTML5 nu mai este bazat pe SGML si astfel nu mai avem nevoie de o referinta la un DTD.

Dupa schimbarile efectuate asupra sintaxei se observa ca tendinta este una de simplificare a limbajului incercand in acelasi timp sa fie compatibil cu cat mai multe tehnologii existente.

Limbajul

In ceea ce priveste limbajul propriu-zis, diferentele nu mai sunt asa putine ca cele de la sintaxa, astfel fata de HTML4 avem elemente/atribute noi, elemente/atribute la care s-a renuntat si elemente/atribute al caror sens a fost schimbat.

Urmatoarele elemente au fost adaugate pentru a fi posibila o structurare mai coerenta a unui document:

• section – o sectiune generica a documentului ce poate fi folosita cu tag-urile h1 – h6 pentru a indica mai bine structura documentului
• article – o bucata de document cu continut independent de restul documentului (ex: un articol de blog)
• aside – o portiune mai putin relevanta in raport cu restul paginii
• hgroup – header-ul unei sectiuni
• footer, header – reprezinta partea de jos, respectiv sus a unei sectiuni
• nav – reprezinta zona de navigatie a unui document (meniul, in general)
• dialog – folosit pentru a retine un dialog

Printre elementele cele mai folositoare se numara si elementele audio si video ce permit o integrare mult mai usoara de continut multimedia in documentele web (despre ele vom vorbi in alt post).

De asemenea exista o multitudine de elemente noi pentru a usura munca programatorului (progress, meter, time, canvas, command, etc.)

S-a renuntat la mai multe elemente si atribute legate de formatarea de text (center, font, align, border, etc.) deoarece aceste pot fi mult mai usor tratate cu ajutorul CSS.

API

HTML 5 vine cu o serie de API-uri noi ce ajuta in crearea aplicatiilor web, spre exemplu API pentru desenarea 2D in cadrul elementului Canvas. Deasemenea interfetele HTMLDocument si HTMLElement din cadrul DOM au fost extinse cu cateva functii noi pentru o manipulare mai usoara a documentelor.

Fiind novici in tainele HTML, putem spune ca, pe hartie, HTML5 pare mult mai usor de invatat decat predecesorul sau, si suntem convinsi ca Internetul de azi ar fi fost mai ‘frumos’ daca HTML5 ar fi aparut acum cativa ani.

Exemplu HTML 5

Pe langa elementele noi din HTML 5, acesta ofera si o serie de functionalitati pe care noi le consideram foarte importante. Printre acestea, ar fi:

HTML 5 a aparut pentru a inlocui HTML 4 si a ajuns sa aiba deja suport in cele mai populare browsere Web din ziua de azi (Google Chrome, Mozilla Firefox 3.5, Opera, Safari). Cea mai buna metoda de a ajuta la intelegerea HTML 5 este folosirea noilor elemente disponibile. Sunt multi web designeri care nu scriu tot codul HTML de mana, ci folosind programe WYSIWYG (What-You-See-Is-What-You-Get). Aceste programe insa nu au suport pentru toate elementele noi din HTML 5, asa ca la inceput este indicat sa se scrie de mana codul, macar pana la familiarizarea cu elementele noi.

Pentru cei nefamiliarizati cu HTML 5, poate aparea o confuzie in legatura cu relatia dintre HTML 5, XHTML 1.0 sau 1.1 si XHTML 5. Predecesorul lui HTML 5, HTML 4, este bazat pe reguli numite SGML (Standard Generalized Markup Language). In aceste reguli, numele elementelor sunt case-insensitive, pot exista atribute ale unor elemente fara ghilimele si pot exista de asemenea elemente cu taguri de inchidere optionale. XHTML 1.0 si 1.1 este bazat pe regulile XML (eXtensible Markup Language), unde numele elementelor si atributelor sunt case-sensitive, iar tagurile deschise trebuie neaparat inchise (si, de asemenea, numele atributelor sunt neaparat intre ghilimele). HTML 5, pe de alta parte, nu se bazeaza pe niciuna din cele doua reguli, ci poate fi scris ori in format HTML, ori in format XHTML, urmandu-se regulile fiecarui format folosit.

Pentru a valida un document HTML 5 sau pentru a informa browserul ca respectivul document a fost scris in HTML 5, tot ce trebuie facut este sa se foloseasca <!DOCTYPE html> (o mare diferenta fata de HTML 4).

Cele mai importante elemente noi la HTML 5 sunt, din punctul nostru de vedere:

• <canvas>, <audio> si <video> – permit folosirea unui API puternic pentru a crea aplicatii user-friendly; in acest mod, programatorii pot alege sa nu foloseasca Flash in realizarea animatiilor; despre aceste trei elemente vom vorbi ceva mai in detaliu in posturi ulterioare (va fi un post despre <audio> si <video> si unul despre <canvas>).
• <header> si <footer> – sunt elemente structurale; desi in ultimii ani, focusul pe HTML a fost mai mult pe semantica, limbajul ofera mult mai mult decat atat si, de aceea, aceste doua elemente structurale ajuta la crearea unui document mult mai corect din punct de vedere structural, dand indicii despre cum parti ale continutului relationeaza cu alte parti (<header> reprezinta headerul selectiei; el poate contine heading-ul documentului sau tot ce tine de brand si poate contine de asemenea si subheading-uri; <footer> este partea de subsol nu numai a intregului document, ci si a fiecarei sectiuni.); ele vin in ajutorul lui <div> si <span> (mai multe informatii despre aceste doua elemente gasiti aici).
• <nav> – reprezinta sectiunea de linkuri pentru navigare, precum si un cuprins pentru site.
• <section> – reprezinta o sectiune generica a unui document (de exemplu un capitol).
• <article> – reprezinta o parte a unei pagini care poate fi de sine statatoare (cum ar fi un post al unui blog).
• <aside> – este elementul care de obicei semnalizeaza prezenta sidebar-urilor, util pentru reclame sau alte elemente.

De asemenea, s-a renuntat la unele elemente care existau in HTML 4.1, cum ar fi <font>, <center> sau <big> (efectele lor fiind acum realizate mult mai usor cu ajutorul CSS), dar si <frame> sau <frameset>.

• din perspectiva varstei, putem spune ca cei mai multi utilizatori se vor incadra ca elevi sau studenti, pentru ca atunci este perioada in care cei mai multi incep sa citeasca mai serios.
• totusi fanii pot avea orice varsta, principala cerinta fiind doar ca cititul sa fie un hobby suficient de placut cat sa te determine sa acorzi cateva (zeci de) minute zilnic pentru acest subiect. Probabil oricine care “pierde” cateva ore bune in fiecare zi pentru a rasfoi carti, comics, sau manga, va fi dispus sa investeasca zece minute pentru a afla mai multe informatii si a gasi recomandari legate de acest domeniu.

Ajungem acum la alta problema, ce isi doresc acesti utilizatori ? Trebuie ca pe site sa fie disponibila o mare cantitate de informatii, dar cat mai bine organizate pe categorii sau folosind etichete, pentru ca fiecare sa poata ajunge cat mai rapid la ce il intereseaza. Totusi acest lucru trebuie realizat intr-un mod care sa arate cat mai bine, pentru a fi atragator, dar in acelasi timp sa-si pastreze simplitatea. Ce inseamna atragatori pentru fani ? Cat mai multe poze, artwork , si orice lucru care aduce site-ul mai aproape de continutul pe care il prezinta (caracteristica principala fiind fictiunea, sunt multe tematici ce pot fi utilizate. Cum ar fi sa fii intampinat de un dragon, un Jedi, sau, de ce nu, chiar de Batman!).

In final, utilizatorii vor avea ocazia sa posteze pe forum, in topicuri populare precum ultima carte citita, serii preferate, recomandari personalizate sau chiar intalniri pentru schimburi/imprumuturi de carti, comics sau manga.

Pagina Principala :

Pagina Personaj :

Pagina Carte :

Structura de baza a proiectelor enumerate mai sus este cea de wiki, permitand libera modificare a continutului de catre vizitatori, inregistrati sau nu. Multe dintre ele contin forumuri sau liste de discutii pe care se pot purta dialoguri in legatura cu subiectele oferite.

In limba romana, in schimb, oferta este mult mai limitata. A enumera site-urile care se ocupa de o astfel de nisa a genului literar ar fi un exercitiu in futilitate, deoarece nu exista nici unul.

Cuvintele cheie (Google Keywords) dupa care se va face cautarea site-ului nostru vor fi: fictiune, wiki, carti, articole, forum. La data de 31 octombrie 2009 (de Halloween, iei), Google Search intorcea 918 rezultate, dintre care niciunul foarte relevant fata de ceea ce vrem noi sa facem.

Rezultate Google Search

Din aceste motive, un obiectiv destul de realist ar fi ca site-ul nostru sa apara, pana la finalul semestrului, cel putin in primele 10 rezultate (daca nu chiar in primele 5).