Despre Interfete Web

Etapa a 3 a

2009-01-14T09:29:00.001+02:00

View SlideShare presentation or Upload your own.

Completari despre SPARQL

2009-01-12T13:32:00.002+02:00

RDF este un limbaj care defineste grafuri de cunostinte prin specificarea unor triplete de tipul Subiect Predicat Atribut, unde subiectul si atributul sunt noduri in graful de cunostinte, iar predicatul reprezinta relatia dintre ele. SPARQL se bazeaza pe crearea de sabloane ce vor fi cautate in interiorul acestui graf de cunostinte; el permite definirea de subgrafuri prin specificarea unei succesiuni de triplete si cauta sa potriveasca subgraful in graful de cunostinte.

Sintaxa SPARQL este foarte asemanatoare cu sintaxa SQL

Select ?variabila1 ?variabila2
Where
{
?variabila1 predicat prefix_alt_namespace:atribut .
?variabila1 predicat2 ?variabila2
}
Order by ?variabila1

Prefixele reprezinta spatiul de cautare pentru interogarea ce se doreste a fi facuta si se folosesc pentru a creste lizibilitatea cererii, prin eliminarea cailor lungi din partea de verificare a relatiilor.

PREFIX : <http://dbpedia.org/resource/>
PREFIX dbpedia2: <http://dbpedia.org/property/>
SELECT ?name
WHERE
{
:Albert_Einstein dbpedia2:name ?name .
}

Clauza SELECT precizeaza variabilele ce vor fi intoarse de cererea scrisa. Acestea incep intotdeauna cu ? si vor fi prezente in cadrul clauzei WHERE, unde se vor specifica conditiile ce trebuie sa le indeplineasca variabila pentru a fi acceptata de cerere.
Clauza WHERE poate sa contina unul sau mai multe triplete de forma SUBIECT PREDICAT ATRIBUT. În cadrul clauzei Where putem folosi operatorul FILTER pentru a specifica restrictii care s? se aplice asupra rezultatelor c?ut?rii. Restrictiile pot fi aritmetice, logice sau bazate pe expresii regulate asupra sirurilor de caractere.

Observatii:
- fiecare triplet din clauza where se termina cu <punct>
- fiecare triplet trebuie scris pe o linie separata

Ex. FILTER:
PREFIX dbpedia2: <http://dbpedia.org/property/>
PREFIX dbpediaontology: <http://dbpedia.org/ontology/>
SELECT distinct ?person
WHERE
{
?person dbpedia2:name ?name .
?person dbpediaontology:award :Nobel_Prize_in_Physics .
FILTER regex(?name, "einstein", "i") .
}

Ex. tip de date:
PREFIX dbpediaontology: <http://dbpedia.org/ontology/>
SELECT distinct ?person
WHERE
{
?person dbpediaontology:award :Nobel_Prize_in_Physics .
?person dbpediaontology:birthdate ?birthdate .
FILTER (?birthdate>"1940-01-01"^^xsd:date) .
}

Pentru o mai usoara intelegere a principiilor voi prezenta si varianta mea de rezolvare a exercitiilor de la laborator:

1. Scrieti un query care să găsească jucătorii care au activat la echipa voastră favorită de fotbal.

PREFIX : <http://dbpedia.org/resource/>
PREFIX dbpedia2: <http://dbpedia.org/property/>
PREFIX yago: <http://dbpedia.org/class/yago/>
SELECT ?name
WHERE
{
?person dbpedia2:playername ?name .
?person a yago:SteauaBucharestPlayers .
}

2. Scrieti un query care să găsească poetii/scriitorii români născuti după 1850.

PREFIX : <http://dbpedia.org/resource/>
PREFIX dbpedia2: <http://dbpedia.org/property/>
PREFIX yago: <http://dbpedia.org/class/yago/>
PREFIX dbpediaontology: <http://dbpedia.org/ontology/>
SELECT ?name
WHERE
{
?person dbpedia2:name ?name .
?person a yago:RomanianPoets .
?person dbpediaontology:birthdate ?birthdate .
FILTER (?birthdate > "1850-01-01"^^xsd:date) .
}

3. Site-urile orașelor din România cu peste 100.000 de locuitori

PREFIX : <http://dbpedia.org/resource/>
PREFIX dbpedia2: <http://dbpedia.org/property/>
PREFIX yago: <http://dbpedia.org/class/yago/>
SELECT ?name
WHERE
{
?person a yago:MunicipalitiesOfRomania .
?person dbpedia2:website ?name .
?person dbpedia2:populationTotal ?populatie .
FILTER (?populatie > "100000"^^xsd:integer) .
}

4. site-urile ziarelor din România.

PREFIX : <http://dbpedia.org/resource/>
PREFIX dbpedia2: <http://dbpedia.org/property/>
PREFIX yago: <http://dbpedia.org/class/yago/>
SELECT ?site
WHERE
{
?ziar a yago:NewspapersPublishedInRomania .
?ziar dbpedia2:website ?site .
}

RDF, OWL, SPARQL

2009-01-09T18:28:00.005+02:00

"Alte litere si grupuri de litere care denumesc tot felul de tehnologii."

Probabil asta esti tentat sa spui la prima vedere. Cel putin cam asta e reactia mea cand mai aflu cate un acronim. Dar luate la puricat, nu sunt cine stie ce chestii complicate. Doar niste instrumente usor de folosit si care isi dovedesc repede utilitatea.

Sa incepem cu inceputul:

Ontologii

O ontologie este o descriere formala a unor concepte si a relatiilor dintre acestea. Este o specificatie a unui domeniu, o modalitate formala de reprezentare a cunostintelor (exista si o modalitate informala numita folksonomie). O ontologie este o parte importanta a web-ului semantic. Ideea web-ului semantic este sa contina date, nu documente. Web-ul trebuie sa fie o baza de cunostinte ce pot fi intelese si prelucrate atat de oameni, cat si de calculatoare. Ontologiile ajuta la crearea acestor baze de cunostinte prin structurarea informatiei intr-o forma comuna ambelor parti.

Si astfel ajungem la primele grupuri de litere:)

RDF, OWL

Spuneam ca baza de cunostinte trebuie inteleasa atat de oameni, cat si de calculatoare. Evident, cel mai potrivit limbaj pentru acest scop este unul bazat pe XML. De aceea, pentru a putea fi folosite de web-ul semantic, ontologiile trebuie sa fie create folosind limbaje bazate pe XML. Doua dintre aceste limbaje sunt RDF (Resource Description Framework) si OWL (Web Ontology Language).

Initial, RDF a fost creat ca un model de reprezentare a metadatelor, dar acum este folosit ca o metoda generala de modelare conceptuala a informatiilor din resursele web. Ideea este de a face afirmatii despre resursele web in forma unor expresii subiect-predicat-obiect(atribut) (expresii numite tripleti). Subiectul denota resursa si este identificat printr-un URI (Uniform Resource Locator); predicatul este de asemenea o resursa identificata printr-un URI si face legatura intre subiect si obiect; obiectul (atributul) poate fi o resursa sau o valoare. O colectie de asemenea afirmatii formeaza un graf; se obtine astel un graf de cunostinte in care subiectul si obiectul sunt noduri, iar predicatul este muchia dintre aceste noduri. Prin aceasta reprezentare, RDF este mai potrivit decat modelele relationale pentru reprezentarea cunostintelor.

OWL este un limbaj conceput special pentru a defini ontologii. El extinde practic RDF prin posibilitatea de a folosi instrumente de inferenta pe datele din ontologie.

SPARQL

Limbajele mai sus mentionate descriu concepte si relatii, creand o baza de cunostinte usor de utilizat de oameni si calculatoare. Pentru a folosi aceasta baza de cunostinte s-au creat alte limbaje pentru a extrage informatiile dorite. Astfel, pentru RDF s-a creat SPARQL, un limbaj de interogare cu o sintaxa asemanatoare sintaxei SQL.

O interogare tipică în SPARQL are următoarea structură:

PREFIX : URI_NAMESPACE_Default
PREFIX prefix_alt_namespace: URI_alt_namespace
Select ?variabila1 ?variabila2
Where
{
?variabila1 predicat prefix_alt_namespace:atribut .
?variabila1 predicat2 ?variabila2
}
Order by ?variabila1

Prefixurile sunt folosite pentru a desemna spatiile de nume ce vor fi folosite la interogarea propriu-zisa. Exista un spatiu de nume default (URI_NAMESPACE_Default) si alte spatii de nume (URI_alt_namespace) care primesc un alias (prefix_alt_namespace) ce va fi folosit in interogari.

Select precizeaza ce variabile va intoarce interogarea. In interiorul interogarii pot fi folosite mai multe variabile ajutatoare, dar cele intoarse sunt doar cele precizate in clauza select. Toate variabilele incep cu semnul ? sau $.

Clauza where contine unul sau mai multe triplete subiect-predicat-atribut care vor construi efectiv sablonul ce va fi cautat in baza de cunostinte. Cum am mai spus, subiectul si predicatul sunt identificate prin URI-uri. Daca un URI face parte din spatiul de nume default, atunci subiectul, respectiv predicatul apar ca atare in interogare. Altfel, ele sunt precedate de alias-ul spatiului de nume din care face parte resursa: alias:subiect sau alias:predicat. Atributul poate fi de asemenea o resursa, caz in care apare cu sau fara alias, la fel ca subiectul si predicatul, sau poate fi o valoare efectiva, caz in care trebuie precizat tipul si eventual limba.

In clauza where informatiile pot fi filtrate folosind operatorul FILTER care specifica restrictii aritmetice, logice sau bazate pe expresii regulate asupra sirurilor de caractere.

Sintaxa completa a SPARQL se gaseste aici.

O baza de cunostinte structurata ce poate fi folosita pentru interogari SPARQL se gaseste aici. Pe acelasi site se gaseste o interfata web pentru testarea interogarilor SPARQL.

Ajax, mini introducere

2009-01-05T22:35:00.000+02:00

Ajax

Ajax este un nume interesant pentru un tip de programare facut popular de catre cei de la Google in 2005 si alti dezvoltatori web. Ajax este un acronim pentru Asynchronous Javascript And XML.

De asemenea ne putem gandi la Ajax ca la o versiune s Javascriptului dopata:P

Ajax - Javascript imbunatatit

Cand a fost introdus javascriptul, oamenilor le-au placut toate chestiile cool pe care le puteau face cu browserele web pentru a imbunatati experienta utilizatorilor si ai face sa interactioneze mai bine si mai usor cu paginile vizitate. Puteau valida forumurile, face popup messages mai interesante, sa face utilitare web cool si multe altele. Insa, Javascript nu oferea nici o posibilitate de a transmite informatii intre browserele web si server-ul web.

Daca cineva vroia sa transfere informatii de la o baza de date de pe un server sau sa trimita informatii de la utilizator catre un script de pe server precum PHP, trebuia sa faci mai intai un form HTML pentru a trimite prin POST sau Get date catre server. Utilizatorul trebuia apoi sa faca click pe “Submit”, sa astepte ca serverul sa raspunda si de abia atunci o noua pagina s-ar fi incarcat cu rezultatele. Si nu era prea placut sa se astepte atat de mult.

Ajax incearca sa remedieze aceasta problema lasand Javascriptul sa comunice direct cu serverul, folosind un obiect special Javascript XMLHttpRequest. Cu acest obiect, Javascript poate prelua informatii de la server fara a mai fi nevoie sa se incarce o noua pagina!

Ajax – O solutie?

Destul de adevarat. Folosind programarea in Ajax veti putea sa schimbati date cu un server web fara sa mai fie necesar incarcarea unei noi pagini. In loc sa priviti Ajax-ul ca “un nou mod de a dezvolta site-uri web” ar trebui sa-l priviti ca o noua arma pe care o puteti adauga arsenalului vostru de programare.

Ajax poate fi putin greoi pentru cei cu putina experienta in programarea web. Este recomandat sa stiti bine inainte sa va apucati de Ajax HTML si Javascript mai intai.

Despre interfete

2009-01-02T19:45:00.001+02:00

A venit iarna si pe la noi

2008-12-29T16:13:00.005+02:00

In sfarsit am reusit sa aducem cativa fulgi de zapada si sa impodobim bradul si pe site-ul nostru.

Intotdeauna mi-au placut sarbatorile de iarna; ne invaluie in bucurii si parca ne poarta intr-o lume de basm, o lume in care toata lumea e mai buna si mai fericita, unde uiti de toate supararile si tristetele adunate de-a lungul anului.

Cu toate ca magazinele sunt pline si strazile sunt super aglomerate, zumzetul orasului si atmosfera de sarbatoare ne fac sa visam cu ochii deschisi, ca mai apoi sa ne trezim participand la tot felul de activitati specifice iernii, bucurandu-ne ca niste copii mici ce se joaca in zapada sau care gasesc cadourile sub bradul impodobit.

Oricat de ocupati am fi, nu putem sa ignoram fericirea ce pluteste in aer si sa nu ne facem timp pentru a petrece clipe de neuitat alaturi de familie si de prieteni.

As vrea sa va urez multa sanatate (ca-i mai buna decat toate), zile insorite si zambete nesfarsite, lacrimi de fericire si multe clipe de iubire, cadourile mult dorite si toate visele implinite!

WebSarbatoriFericite!!!

A venit Mos Craciun!

2008-12-24T02:42:00.002+02:00

Deocamdata doar cu o tema rezolvata.

N-am mai scris de muuuuuuuuuuult pe blog, stiu:( M-a cuprins magia sarbatorilor si am uitat de "magia" pe care o pot face cu tehnologiile web:D Dar in timp ce puneam GLOBurile in brad m-am gandit ca nu am mai scris de mult pe BLOG si asa am observat anagrama: blog-glob:)

Sa speram ca o sa imi treaca frenezia si o sa scriu un articol "adevarat" cat mai curand..

Am pregatit o surpriza vizitatorilor nostri

2008-12-08T14:10:00.007+02:00

De acum avem pe site o noua categorie!
V-ati plictisit de teme ? Cautati ceva interesant si care sa va puna mintea la contributie?
Atunci noi v-am pragatit exact acest lucru.
Jocuri de logica in flash pe site-ul nostru AICI la categoria jocuri
Ce puteti gasi aici?
Jocuri bine cunsocute gen: taranul, capra, lupul si varza sau canibalii.
Verificati si nu veti regreta:)

Prezentare etapa a II-a

2008-12-03T10:32:00.002+02:00

Enjoy

Etapa2

View SlideShare presentation or Upload your own.

Despre Web 2.0

2008-11-30T11:45:00.002+02:00

Termenul Web 2.0 descrie schimbarile realizate in tehnologia World Wide Web si in web design care implica creativitatea, comunicarea si securizarea informatiilor oferite.

Conceptul Web 2.0 se refera la dezvoltarea si evolutia culturii comunicarii a web-ului precum site-urile sociale, site-urile cu videoclipuri, blogurilor si a wiki-urilor.

Lumea internetului a luat contact cu acest termen in 2004, inventatorul lui fiind Tim Berners-Lee.

Definitia Web 2.0 din punctul de vedere a lui Tim O'Reilly, este urmatoarea:
"Web 2.0 is the business revolution in the computer industry caused by the move to the Internet as a platform, and an attempt to understand the rules for success on that new platform."

Cu alte cuvinte termenul Web 2.0 este descris ca fiind o platforma cu o ierarhie ce contine 4 nivele:
>> nivelul 3 contine site-uri precum: eBay, Wikipedia, Skype, del.icio.us, Craigslist, dodgeball, AdSense.
>> nivelul 2 poate fi folosit offline, dar avand avantaje folosit online, astfel O'Reilly a dat exemplu site-ul Flickr, care are ca beneficii baza de date compusa din pozele postate de useri.
>> nivelul 1 este descris de site-uri precum Google Docs&Spreadsheets si iTunes
>> nivelul 0 compus si din MapQuest, Yahoo!Local si Google Maps.

Fata de Web 1.0, utilizatorii se pot bucura de facilitatile oferite de web 2.0; astfel ei au posibilitatea si de a modifica datele.
Una din facilitatile oferite de Web 2.0 se refera la interfata prietenoasa bazata pe Ajax, Flex si OpenLaszlo.

Dintre utilizatorii fideli ai Web 2.0 se afla si universitatile care au adoptat aceasta tehnologie, avand in top site-uri precum YouTube, Facebook, Flickr, Twitter, MySpace.
Interactiunea utilizatorilor cu website-urile centralizate se realizeaza cu ajutorul protocoalelor FOAF si XFN.

In ceea ce priveste Web 2.0 au aparut si critici, astfel una din declaratii afirma ca nimeni nu stie exact ce inseamna si ca nu reprezinta o noua versiune a World Wide Web-ului, precum AJAX nu inlocuieste protocolul HTTP.

O concluzie ar fi ca Web 2.0 este mai degraba o atitudine si nu o tehnologie, ce consta in APIuri si aplicatii deschise publicului, bazandu-se pe standarde ca RSS, XML si blogging.
Astfel acesta este interpretat de majoritatea utilizatorilor ca fiind o modalitate de schimb de software, imagini, filme, muzica si alte date din internet.

Cateva raspunsuri la intrebarile frecvente legate de Web se gasesc pe site-ul Youtube ce a adoptat aceasta tehnologie.

Ce este de fapt Web 2.0?

Diferenta intre Web1.0 si Web 2.0?

Web 1.0, Web 2.0 sau Web 3.0?

[offtopic] Leonardo Da Vinci - Invenţiile unui geniu

2008-11-29T15:37:00.088+02:00

Saptamana trecuta am reusit sa ajung in sfarsit la expozitia "Leonardo Da Vinci - Invenţiile unui geniu". Spun in sfarsit pentru ca de la inceputul lunii octombrie de cand s-a deschis am tot vrut sa merg si n-am apucat.

Este vorba despre o expozitie cu machete realizate din lemn dupa schitele lui Leonardo da Vinci. Sunt cam 40 exponate, unele reprezentand masini care au fost sau sunt inca folosite, altele - mecanismele care stau la baza acelor masini.

Las pozele sa vorbeasca:

Fierastraul hidraulic: Curentul apei mobilizeaz roata, care la randul ei actioneaza fierastraul in sens vertical si provoaca avansarea caruciorului spre trunchi. Acest tip de fierastrau se mai foloseste inca in regiunile alpine.

Bicicleta: Schitele acestui desen poarta semnatura elevului Sallai. Acest lucru, impreuna cu trasaturile desenului si lipsa particularitatilor, sugereaza ca schitele descoperite nu ii apartin lui Leonardo, ci elevului sau care probabil a vazut un model al bicicletei in atelierul maestrului.

Burghiul hidraulic: Cu acest burghiu actionat de o roata hidraulica orizontala, Leonardo indica un mod de prelucrare a lemnului in vederea realizarii de tuburi.

Parasuta: Acest proiect demonstreaza cat de ingenioase si avangardiste au fost ideile lui Leonardo. Parasuta era construita din panza de in fixata pe un suport de forma piramidala, cu latura de 7m.

Rulmentul: O serie de sfere interpuse intre doua suprafete in miscare evita frecarea si uzura celor doua suprafete. Si in acest caz Leonardo a perfectionat proiectul initial, creand o pista de miscare in forma de inel care sa permita sferelor sa se miste fara a veni in contact una cu cealalta.

Deltaplanul: Masinile de zbor concepute de Leonardo in tinerete sunt in general actionate de forta omului; in cea de-a doua parte a vietii, el intelege ca forta umana e insuficienta si decide sa foloseasca puterea vantului si a curentilor de aer. Deltaplanul este dotat cu o timona pentru controlul directiei de zbor.

Tancul: Reluand ideea unui vehicul acoperit care sa penetreze liniile inamice, Leonardo concepe un vehicul greu, de forma unei broaste testoase, cu tunuri orientate de jur imprejur, ramforsat cu placi metalice. Problema mobilitatii o rezolva plasand in interior un sistem de manivele pentru invartirea rotilor actionate de opt oameni.

Cum functioneaza fierastraul hidraulic:

Expozitia va fi deschisa in foaierul Teatrului National de Opereta "Ion Dacian" pana pe 31 ianuarie 2009, zilnic intre orele 11-22. Un bilet intreg costa 20 lei, iar elevii si studentii au o reducere de 50%.

XSL(T)

2008-11-26T00:58:00.002+02:00

Acest articol vine in ajutorul celor mai putin familiarizati cu utilizarea limbajului XML si posibilitatile sale, in special folosirea fisierelor de tip stylesheet XSL.

Scurta descriere:

XSL este o prescurtare a eXtensible Stylesheet Language si a fost creat pentru ca se dorea un limbaj care sa descrie un fisier de stil pentru paginile xml.
Daca pentru HTML stylesheet-urile se realizeaza folosind CSS (Cascading StyleSheet), aceste fisiere insotind fisierele HTML, pentru fisierele XML nu exista un limbaj care sa permita definirea unui stil.

In HTML tagurile sunt fixe si fiecare browser stie sa afiseze aceste taguri, pe cand in XML se pot folosi orice taguri, iar browserele nu mai stiu cum trebuie afisata informatia, prin urmare se introduc fisierele XSL, care ajuta la descriea modului in care urmeaza sa fie afisate datele.

XSL este reprezentat de fapt prin 3 limbaje:
- XSLT(XSL Transforms) – un limbaj de transformare a documentelor XML
- XPath – un limbaj de descriere a structurii documentelor XML (de navigare in aceste documente)
- XSL-FO (XSL Formating Objects, numit astazi XSL) – un limbaj de formatare a documentelor XML

Cum se foloseste?

Pentru ca browserul sa stie ca afisarea xml-ului se face folosind un stylesheet de tip XSL in fisierul XML trebuie adaugate urmatoarele linii la inceput, inainte de continutul de date al fisierului:
<?xml version="1.0" encoding="ISO-8859-1" ?>
<?xml:stylesheet type="text/xsl" href="studenti.xsl" ?>

Fisierul XSL va contine urmatoarele randuri:
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
........
</xsl:template>
</xsl:stylesheet>

Cel mai important element intr-un document XSLT este elementul <template>, care reprezinta o regula folosita in pattern matching. Acest element are urmatoarea forma generala:
<xsl:template match=”expresie XPath”>
continut dupa transformare
</xsl:template>
Aceasta formulare cauta elementele ce fac match pe expresia XPath data si inlocuiesc rezultatul intors in expresia dintre taguri, modificandu-i astfel modul de afisare (se pot afisa doar anumite campuri/atribute, se poate face un tabel, o lista, etc)

In cadrul tagului template se poate face selectarea mai multor elemente ale fisierului folosind o bucla for-each:
<xsl:for-each select="expresie XPah">
In plus, in interiorul acestei bucle se poate face o sortare de elemente folosind elementul <xsl:sort order="ascending/descending" select="expresie XPath" />, unde expresie XPath selecteaza campul/atributul dupa care se va face sortarea elementelor obtinute.
Un alt element ce merita precizat este <xsl:if>, care va permite executarea actiunilor din interiorul tagului doar in cazul indeplinirii conditiei continute. Un exemplu de folosire:
<xsl:for-each select="grupa/student">
<xsl:if test="varsta!='2 ani'">
actiuni
</xsl:if>
</xsl:for-each>
O alternativa pentru aceasta constructie este elementul <xsl:choose>, similar cu "switch" din limbajele de programare. Exemplu:
<xsl:for-each select="grupa/student">
...
<xsl:choose>
<xsl:when test!='2 ani'>
<B><xsl:value-of select="varsta"/></B>
</xsl:when>
<xsl:otherwise>
<I><xsl:value-of select="varsta"/></I>
</xsl:otherwise>
</xsl:choose>
Acest fragment va face ca studentii selectati sa fie afisati fie cu bold, fie cu italics, in functie de varsta lor.

Indicatii pentru laborator:
- folositi Mozilla; Internet Explorer nu vede corect fisierele transformate prin metoda XSL
- incadrati rezultatul intors de fisierul XSL de tagurile <HTML><BODY>...</BODY></HTML>, pentru a se crea un fisier ce poate fi vizualizat de browser

Sa parcurgem acum si laboratorul, pentru cateva observatii:
1. Afisati sub forma xHTML tabelat, continutul librariei. Capul de tabel trebuie sa contina campurile: ID | URL | Title | Authors | ISBN | Labels
Dupa cum se stie, pentru a crea in HTML o tabela se folosesc tagurile <TR></TR> (table row) ptr un rand si <TD></TD> (table data cell) pentru o celula in cadrul randului.
2. Aceeasi cerinta ca la 1) doar ca se cere sortari dupa anumite coloane (title, isbn,etc)
Aici se va folosi elementul de sortare prezentat mai sus.
3. Pentru importul de carti de la prieteni, avem nevoie de o lista de ISBN-uri:
- listati doar ISBN-urile pentru a putea fi usor introduse pe site
Se poate construi o singura coloana de tabela, sau o lista de elemente:
- <OL> ordered list
- <UL> unoredered list
, fiecare continand elemente de tip <LI> (list element).
4. Transformati fisierul sursa xml intr-un alt fisier xml cu unele modificari:
adaugati la fisierul xml doar anumite carti
Se va folosi constructia <xsl:if>, pentru care aveti si un exemplu mai sus.

Succes...

Salarii din IT

2008-11-25T22:41:00.008+02:00

V-ati gandit vreodata cam care ar fi salariile din domeniu IT? Care sunt ofertele pietii momentan?
Dar sa vedem ce spun sondajele pentru 2008.
O placinta clara si gustoasa mai jos vorbeste de la sine:

Concluzie: daca esti angajat in Bucuresti poti castiga cu 30% mai mult decat daca ai fi in Cluj sau Timisoara si aproape dublu decat daca ai fi ales Constanta, Galati, Mures sau Oradea !!!

Unde e mai bine: la o companie straine sau una romaneasca???

Alta intrebare al carui raspuns cred ca e destul de evident.
As putea sa lucrez pentru stat sau pentru o companie privata….Ce sa fac??

La stat: pierde lupta
La patron: se gastiga aproape cu jumatate mai mult decat la stat!! Iar daca esti manager poate chiar si de 3 ori mai mult. Hai sa fim toti manager:P

Concluzie: daca lucrezi pentru o companie straina vei avea un salariu cu pana la 25% mai mare decat daca decizi sa fi patriot si sa lucrezi pentru una cu capital romanesc.

Ce e mai bine: un colectiv restrans sau mare (mai mult de 50 de persoane)???

Datele obtinute afirma ca numarul personalului nu conteaza asa mult cand e vorba de domenoul tehnic.

Dar daca ajungi sa fii manager poti avea cu pana la 30% mai mult intr-o companie mare.

Daca vreti sa vedeti si salariile efectiv pe domenii le gasiti pe linkul de mai jos:
(datele sunt reale si pentru mai multe detalii puteti verifica si http://ghidul-salariilor.ro/salarii_2008.html)

Retele sociale = retele de prieteni?

2008-11-24T21:29:00.012+02:00

Oare cati intre noi au primit o cerere de prietenie de la un necunoscut pe una din retelele sociale si au acceptat? Cati au acceptat cu buna stiinta si cati au acceptat din greseala/neatentie/graba?

Nu pot sa spun ca am fost spam-ata la greu cu astfel de cereri, dar am avut cateva experiente mai dubioase care m-au facut sa fiu reticenta la astfel de invitatii. Spre exemplu, acum cativa ani am primit "add" la YahooMessenger de la un necunoscut. Am acceptat fara sa ma gandesc, am inceput sa vorbesc cu respectivul - la inceput chiar entuziasmata ca puteam sa imi mai exersez engleza -, insa foarte repede am aflat scopul sau, pentru care era dispus sa imi trimita si o camera web. Ce-i drept nu mi s-a parut periculos tipu, a zis de la inceput ce vrea si cand i-am zis ca nu ma intereseaza m-a lasat in pace, dar totusi nu vad de ce a trebuit sa imi dea mai intai "add". In aceeasi perioada am mai adaugat vreo 3 persoane, care erau ok, insa oricum nu am vorbit cu ei decat cateva zile, so why add them? Asa ca m-am hotarat sa nu mai dau "add" decat la cunoscuti.

Peste un timp a aparut un anume "mariusex" care voia sa ma adauge in lista lui de prieteni la YM. I-am dat de 2 ori deny explicandu-i ca vreau sa imi zica mai intai cine e si ce vrea, insa nu mi-a raspuns, dar a continuat sa imi dea "add". Mi-a trimis chiar si invitatie de prietenie la Netlog. I-am dat ignore si pana la urma am scapat de el.

In perioada aia am tot cautat informatii despre Yahoo Search Directory, sa imi dau seama cum au dat oamenii aia de mine. Eu nu m-am gasit, nu stiu cum m-au gasit ei..

Referitor strict la retele sociale: nu am cont decat pe hi5. L-am facut la invitatia unor prieteni, apoi am adaugat pe toti cei care imi trimteau invitatie si pe care ii cunosteam. Am refuzat un tip care cred ca facea colectie de "prietene" (avea cateva sute (mii?) de prietene si nici un prieten). Inca am cateva invitatii pending - oameni pe care mi-au trimis invitatie desi nu ii cunosc. Ultimul se numeste "cuculot lolozaur", are o poza cu Brad Pitt si mai multi prieteni, dintre care 5 sunt comuni. Inca n-am vrbit cu cei 5 prieteni comuni sa aflu cine este "cuculot lolozaur", dar tare sunt curioasa daca ei il cunosc sau au dat pur si simplu "add" fara sa se uite.

Si atunci ma intreb: pana la urma ce rol mai au retelele sociale? Doar sa construiasca grafuri oarecare intre diversi oameni? Daca vreau sa adaug pe cineva ca prieten la hi5 sunt informata ca:

"Eşti pe cale să adaugi pe X ca prieten. X va fi anunţat(ă) şi va trebui să confirme că sunteţi prieteni.(...)
Continuă doar dacă eşti prieten cu X."

Desigur, mesajul ese doar informativ, practic oricine poate adauga pe oricine. Dar de ce as adauga pe cineva pe care nu il cunosc? Am primit o cerere de prietenie de la cineva despre care mi-am putut da seama din profil ca face parte dintr-un grup din care fac si eu parte. De asemenea, de curand am primit o cerere de la o fosta colega, bune prietene in clasele primare, dar cu care am pierdut legatura dupa plecarea ei din tara. Pentru astfel de legaturi consider folositor hi5. Dar altfel mi se pare inutil, si pe alocuri exasperant ; si aici dau exemplul unei prietene urmarita de 3 ani de zile de catre un baiat care, dupa ce i-a descoperit profilul pe hi5, i-a trimis mesaje in nestire.
Sigur, nu Hi5 este vinovat, ci persoana in cauza, dar tocmai asta e intrebarea: nu si-au extns retelele sociale prea mult rolul? Prietenii nu se fac cu un click din maus; relatiile de prietenie se nasc si se consolideaza in timp.

Poate nu are legatura, dar mi-am adus aminte de un banc:

Q: De ce nu vorbeste o blonda in timp ce face sex?
A: Pentru ca mama i-a spus sa nu vorbeasca cu strainii.

De ce trebuie sa stim despre rangul paginilor web

2008-11-22T19:29:00.001+02:00

Majoritatea motoarelor web de cautare folosesc diversi algoritmi pentru a realiza o cautare corecta si o gasire rapida a informatiilor dorite.
Astfel Google a adoptat un algoritm de gasire a datelor cautate prin calcularea rangului unei pagini numit PageRank. Acesta reprezinta o valoare regasita in intervalul [1,10] ce exprima popularitatea unei pagini web.

Denumirea PageRank aminteste de autorul algoritmului Larry Page.
PageRank-ul creste in functie de calitatea, cat si cantitatea linkurilor care trimit la o pagina web.

Cu alte cuvinte o pagina va fi importanta, daca alte pagini cu o importanta mare contin legaturi catre ea.

Primele 3 pagini care au format Internetul in 1839 erau: Netscape, Amazon si Microsoft. Legaturile intre acestea se pot vizualiza in graful de mai jos.

Calcularea rangului unei pagini se realizeaza cu ajutorul unei matrici stochastica (suma pe fiecare coloana este egala cu valoarea 1) a Internetului, unde pagina i corespunde liniei i si coloanei i a matricei.
De exemplu daca exista o pagina j care are n legaturi, elemnentul (i,j) al matricii poate fi 1/n sau 0 , in functie daca pagina i este una din legaturile paginii j.

Cele mai intalnite probleme in lumea Internetului sunt cele descrise de notiunile "dead end" si "trap".
Primul termen se refera la paginile care nu au legaturi. Astfel de pagini isi pierd din rang, deoarece nu il mai distribuie catre alte pagini, si astfel acesta va ajunge sa tinda catre 0. Deci apare un rezultat nedorit si pentru a-l evita trebuie ca pagina respectiva sa aiba succesori.

Al doilea termen cunoscut si sub numele de "capcane" descrie fenomenul in care o pagina dorind sa isi creasca rangul, va avea legaturi doar catre ea insasi.

In aceste doua cazuri, Google pare sa fie nemilos si sa taxeze paginile aflate in aceste situatii,asa ca va sfatuim sa nu apelati la astfel de modalitati de crestere a rangului, deoarece veti constata ca se intampla exact contrarul asteptarilor voastre.

Google nu se lasa pacalit prea usor, si aplica diverse procedee pentru a calcula corect PageRank-ul fiecarei pagini. Unul dintre acestea este anti-spam si consta in potrivirea cuvintelor cautate cu cele aflate in paginile web, astfel incat site-urile web sa contina informatii despre subiectul cautat.

Sper ca aceste informatii sa va fie folositoare si va promitem ca vom reveni asupra acestui subiect cu mai multe detalii interesante.
Asa ca stati cu ochii pe noi. :)

HI5 API

2008-11-20T23:02:00.024+02:00

Cand am primit prima data invitatie pe Hi5 (acum cativa ani) m-am gandit: "Ce-o mai fi si asta?". Ca sa aflu, mi-am facut cont. Am completat cateva informatii, am pus 10 poze si gata. Pe urma am mai intrat in cont doar cand am primit alte invitatii. N-am fost niciodata fan Hi5, dar imi place sa ma uit la pozele prietenilor (pe unii dintre ei asta e singurul mod in care ii mai vad:D). Am pierdut ore bune uitandu-ma la pozele prietenilor si ale prietenilor prietenilor si ale prietenilor prietenilor prietenilor etc...

De aceea Hi5 a fost prima alegere cand am vazut enuntul temei 1: analiza unor comunitati web. Trebuia sa extrag cunostinte referitoare la relatiile sociale din cadrul comunitatii. Prima idee a fost sa parsez efectiv pagina web a profilului unui utilizator (am pornit chiar de la mine). Am folosit cunostintele despre DOM&SAX si am ales sa parsez cu SAX (deoarece nu trebuia sa fac cine stie ce prelucrari de date, ci doar sa le afisez; asadar pe masura ce se declanseaza un eveniment - apare tag-ul corespunzator - se extrage informatia si se afiseaza). Problema a fost insa ca pagina nu era corecta din punct de vedere al sintaxei XML: aparea caracterul & care este strict interzis in XML.

Asa ca am cautat alte metode, stiind ca unele comunitati ofera API-uri pentru extragerea informatiilor. Am descoperit HI5 API care este deocamdata in stadiul de beta - a fost lansat abia in martie anul acesta (lucky me:P). Acest API permite extragerea de informatii prin 2 metode: folosind SOAP (Simple Object Access Protocol) sau folosind REST (REpresentational State Transfer). SOAP este un protocol prin care serviciile web schimba informatii, formatul mesajelor folosind sintaxa XML. REST, asa cum a fost el initial definit, se bazeaza pe o serie de principii dintre care cel mai important este reprezentat de conceptul de resurse: o resursa mentine anumite informatii si este identificata printr-un URI (Universal Resource Identifier) unic.

Eu am folosit REST pentru rezolvarea temei. Practic tot ce am facut consta in urmatoarele: in primul rand am creat un parser de tip SAX, caruia i-am dat sa parseze un URL (Universal Resource Locator - locatia unde se afla resursa dorita). Totodata am mentinut si un vector de URL-uri ale prietenilor deja "vizitati" - pentru a nu ajunge la cicluri (daca un user are un prieten care a mai fost afisat, nu il mai introduc in vector). La rulare am dat de alta exceptie (dupa parsarea mai multor prieteni): unul dintre URL-uri continea caractere non-Unicode. Am tras concluzia ca paginile web sunt facute cam in graba, bazandu-se pe faptul ca browserele sunt suficient de "destepte" incat sa treaca cu vederea aceste mici "scapari".

Revenind la URL-ul ce l-am trimis spre parsare, linia de cod este:

parser.parse("http://api.hi5.com/rest/profile/foaf/id")

Radacina pentru toate resursele este http://api.hi5.com/rest/. De exemplu, pentru a obtine lista de albume a unui utilizator URL-ul este http://api.hi5.com/rest/feed/albumlist/id. Din pacate nu exista resurse pentru extragerea comentariilor.

ID-ul utilizatorului din URL-urile de mai sus se poate afla din adresa paginii sale de profil: http://hi5.com/friend/p8260414--Micky--html sau, daca utilizatorul este logat, http://hi5.com/friend/profile/displaySameProfile.do?userid=8260414. In aceste exemple ID-ul este 8260414.

In concluzie, aceasta tema m-a ajutat sa descopar noi notiuni pe care le pot folosi pentru a dezvolta aplicatii pentru Hi5 - si pentru orice alte site-uri compatibile cu standardul OpenSocial. Acum imi mai trebuie doar idei de aplicatii:P

Despre schimbari si nu numai

2008-11-20T14:10:00.002+02:00

Dupa cum ati observat deja, ne-am schimbat infatisarea si am adoptat un nou stil de afisare a continutului, atat pe site, cat si pe blog.

Speram ca pe parcursul acestui proiect, care a fost si este scopul creari acestor ustensile ale webului, sa devenim cat mai buni, iar la sfarsit sa ne laudam cu toate lucrurile pe care le-am invatat si care ne vor fi de folos in viitor.

Am observat ca desi momentan nu am reusit sa facem lucruri super evoluate, ceea ce realizam, facem din placere si ne simtim bine si sper ca aceasta stare sa v-o transmitem si voua.

Cred ca am ramas datori cu rezultatele unui poll creat acum ceva vreme si care a fost sters in momentul in care am schimbat layout-ul blogului. Deoarece m-am gandit la aceasta consecinta a schimbarii adoptate, am realizat un screenshot.

Nu era corect sa neglijez toate voturile pe care le-am primit de la voi si pentru care va multumesc si va invit sa participati cu exprimarea dorintelor voastre la poll-ul care se desfasoara in acest moment.
Vrem sa stiti ca apreciem orice vot, comentariu, sfat si vizita din partea voastra, de aceea o sa afisez screenshotul polului trecut:

Concluzia care reiese in urma analizarii acestui rezultat este ca majoritatea din voi v-ati hranit curiozitatea cu postarile noastre, in timp ce un procent mai mic dintre vizitatori sa isi fi creat un obicei din a intra pe blog tocmai pentru informatiile din articolele scrise de noi.

Gaudeamus 2008

2008-11-19T17:25:00.005+02:00

[Offtopic]
GAUDEAMUS 2008,editia a XV

Pentru iubitorii de carte din Bucuresti si nu numai, am o veste mare !! Zilele astea, mai precis incepand de azi timp de 5 zile veti avea posibilitatea sa va cumparati carti romanesti dar si de la edituri straine cu reducere de pana la 20% sau poate chiar 30%!!

Comunicatul de presa suna astfel:

În perioada 19 - 23 noiembrie, va avea loc în Pavilionul Central Romexpo cea de a cincisprezecea ediţiea Târgului Internaţional GAUDEAMUS - Carte de învăţătură, organizat de Societatea Română de Radiodifuziune.

Cate ceva despre Javascript

2008-11-19T01:20:00.008+02:00

Scriu acest articol in speranta ca va va ajuta sa rezolvati laboratorul de IE de saptamana aceasta, urmand sa apara in curand un alt articol care sa dezbata mai pe larg acest subiect.

Scurta descriere:
Javascript este un limbaj asemanator cu Java, cu mica diferenta ca nu mai trebuie sa declaram clase pentru orice chestie.
Javascript isi creaza o reprezentare arborescenta a fisierului in care a fost inclus, elementul radacina numindu-se document. Pentru accesarea oricarui element din cadrul paginii web se va folosi functia getElementById(), care ia ca parametru id-ul elementului a carui valoare se cauta.
Un script scris in javascript va contine in cea mai mare parte functii, care vor fi apelate la apasarea unui buton, activarea unei optiuni sau alegerea unei variante dintr-un dropdown, si poate cateva variabile globale care sa tina minte valori care nu trebuie uitate dupa terminarea apelului functiei.

Cum se foloseste?
In primul rand, un fisier javascript are extensia .js.
Pentru includerea unui script intr-o pagina web se foloseste constructia:
<script type=”text/javascript”> functii_javascript </script>
, iar pentru includerea unui fisier javascript in pagina se foloseste constructia:
<script type=”text/javascript” src="cale/fisier.js"></script>
, ambele fiind incluse in tagul <head> al paginii.
Pentru folosirea unei functii definite in scriptul inclus se foloseste asocierea cu un eveniment. De exemplu, pentru un buton: <button onclick="functie()"> Submit </button>, sau pentru un select de tip droptdown: <select id="select1" onchange="functie()">.

Un exemplu de definire al unei functii ar fi urmatorul:
function sum(x,y)
{
var rez=x+y;
return rez;
}

Sa parcurgem impreuna laboratorul pentru a afla ce probleme vor fi tratate in cadrul lui.

Avem un formular simplu de comanda pentru produse format din 2 selecturi : unul pentru numele producatorului si altul pentru numele produsului (vedeti fisierul html din arhiva)
Formularul poate fi trimis la server doar daca produsul selectat apartine producatorului selectat.
Initial listele de producatori si produse sunt hardcodate.

1. Cum structuram formularul astfel incat sa fie usor de facut legatura intre producator si produs?
Simplu. Adaugam un id fiecarei optiuni de tip produs care sa faca usoara identificarea producatorului.
De exemplu:
<select id="select1">
...
<option value="Dell">Dell</option>
...
</select>
<select id="select2">
...
<option value="Dell_x30">Axim X30</option>
<option value="Dell_x50">Axim X50</option>
...
</select>

2. Afisati o eroare la apasarea butonului de submit ( la selectarea producatorului, lista de produse nu se modifica, raman toate afisate)
Se folosesc urmatoarele functii:
- functia getElementById a elementului radacina pentru aflarea valorilor selectate in cele doua dropdownuri (si campul sau value)
- functia indexOf folosita pe stringuri, pentru a afla daca numele producatorului este inclus in numele produsului (vezi reolvarea punctului 1.)
- functia alert care deschide un popup unde va afisa parametrii care ii primeste (operatorul + este folosit pentru concatenarea sirurilor)
Apelul functiei se pune pe evenimentul onclick al unui buton (vezi Cum se foloseste?).

3. Afisati o eroare la selectia gresita a produsului ( la selectarea producatorului, lista de produse nu se modifica, raman toate afisate – trebuie ca in cazul in care produsul selectat nu corespunde producatorului selectat sau invers, sa se afiseze o eroare)
Se rezolva la fel ca punctul 2. Apelul functiei se pune insa pe evenimentul onchange al selecturilor de tip dropdown (vezi Cum se foloseste?).

4. Modificati dynamic lista de produse la selectarea producatorului astfel incat sa ramana vizibile doar optiunile corespunzatoare producatorului ales.
Se folosesc doi vectori globali pentru retinerea valorilor optiunilor si a id-urilor acestora. Pentru aceasta se foloseste o variabila de tip vector: var optiuni = new Array();.
Se afla valoarea producatorului ales in primul select (getElementById), se elimina toate optiunile din al doilea select (while (selGEBI.options.length>0) selGEBI.remove(0);). Se parcurg vectorii cu valori si texte ale optiunilor eliminate si se cauta elementele care contin numele producatorului selectat. Se creaza un element de tip optiune: var y = document.createElement('option');, i se seteaza campurile value si text, si este adaugat in lista, acum goala, de optiuni pentru al doilea select: sel2GEBI.add(y,null);

Si cam asta e tot. Pentru detalii mai pe larg asupra claselor si functiilor folosite verificati pe: www.w3schools.com
Succes.

[offtopic] Super oferta iarna aceasta in Parcul Tineretului ne plimbam cu schiurile

2008-11-19T01:08:00.001+02:00

In timp ce ma gandeam ce articol despre interfete web sa mai adaug pe blog, ma plimbam prin casa si am auzit la televizor o stire de m-a lasat cu gura cascata si trebuia sa v-o impartasesc si voua ca sa va dati cu parerea.

Cum credeti ca va arata Parcul Tineretului cu doua partii: una pentru schiuri si una pentru saniute, plus un patinoar si mai ales ca va gazdui si cel mai mare targ de brazi din Bucuresti ?

In cazul in care va veti plictisi luna viitoare de vizitat acest parc, va invit
sa petreceti revelionul pe patinoarul din Drumul Taberei.

Have fun.

Utilizarea mediului CTTE

2008-11-18T22:51:00.003+02:00

Ce inseamna CTTE?
Concurrent Task Tree Environment

De la ce vine denumirea?
CTT a fost dezvoltata folosind notatia LOTOS. Aceasta este o notatie concurenta formala care permite proiectantului sa descrie atat comportarile orientate pe evenimente (event-driven), cat si modificarile de stare ale sistemului.
In plus, structura arborescenta este usor de inteles si de utilizat, imbunatatindu-se comunicarea intre participantii din diverse etape ale proiectarii unui produs.

Principalele caracteristici:
- structura ierarhica intuitiva, bazata pe tehnica "divide et impera" - task-urile mai mari sunt divizate in taskuri mai mici, mai usor de reprezentat, care permite o flexibilitate mare in ceea ce priveste gradul de granularitate si, in acelasi timp, permite definirea acestor structuri atat la nivel inalt, cat si la nivel coborat, din punct de vedere semantic.
- sintaxa grafica - sub forma de arbore, permite o interpretare facila, relatiile intre entitati fiind usor de observat
- notatia concurenta - activitatile de pe acelasi nivel sunt ordonate temporar, folosindu-se un set de operatori relationari.
- focalizarea pe activitati - permite proiectantului sa isi focalizeze atentia asupra relatiei dintre utilizator si sistem, evitand detaliile referitoare la implementare
- permite reprezentarea modului de alocare al sarcinilor
- contine obiecte si atribute ale sarcinilor

De unde poate fi downloadat?
http://giove.isti.cnr.it/CTTE/predownload.html

Cum se utilizeaza?

Se downloadeaza arhiva de pe site si se dezarhiveaza. Programul nu trebuie instalat, el fiind deja rulabil la deschiderea arhivei.
La rularea fisierului ctte.bat se deschide mediul grafic CTTE, creandu-se si o foaie de lucru noua, in care exista un nod radacina.

Folosind primele 4 butoane din partea dreapta a ecranului se pot adauga fii pentru nodul radacina, de urmatoarele tipuri:
- abstraction - este echivalenta cu oricare din urmatoarele
- aplication - este executata o actiune de catre o alta aplicatie
- interaction - userul interactioneaza cu interfata
- user - este executata o actiune de catre user

Intre fii unei radacini se pot adauga relatii de tipul:
- [] - choice
- order independency
- ||| - concurrent
- |[]| - concurrent with info exchange
- [> - CTT disabling
- |> - suspend/resume
- >> - enabling
- []>> - enabling with info exchange

Functionalitatile oferite de utilitarul CTTE:
• editare flexibila a modelelor de sarcini;
• utilizarea descriptorilor informali în modelare;
• verifica completitudinea specificatiei;
• permite reutilizarea modelelor de sarcini dezvoltate anterior, prin inserarea lor în modelul curent;
• salveaza specificatia în diferite formate – atât ca text cât si ca imagine astfel încât sa poata fi usor incluse în rapoarte sau documente;
• permite vizualizarea doar a anumitor zone din model prin aplicarea unor filtre ca nivel, platforma;
• permite verificarea cailor de acces între doua sarcini stabilite de utilizator;
• simuleaza modelul de sarcini;
• compara modele de sarcini;
• ofera statistici referitoare la modelul de sarcini realizat;
• ruleaza scenarii.

Un exemplu de structura arborescenta in CTTE:

JavaScript Partea 1

2008-11-18T21:40:00.007+02:00

Acest topic se va indinde pe mai multe posturi.
Postul de azi cuprinde : Javascript Basic
Next…Javascript Intermediate, iar in final vor fi multe exemple cu cod explicate.

JavaScript Basic

Dupa cum spune si numele ne ocupam de bazele acestui limbaj. Ce cunostinte anterioare va trebuie?? Aveti nevoie de sa stiti cum sa folositi HTML-ul si sa puteti edita documente HTML. De asemenea aveti nevoie de un browser care sa suporte JavaScript.
JavaScript este incorporat in codul HTML si codul scriptului se gaseste in interiorul tagurilor &ls script > si &ls /script >
Ex)

&ls script language="JavaScript" >

/* Codul JavaScript*/

&ls /script >

Comanda “language= “JavaScript” ajuta browserele sa recunoasca codul care urmeaza si sa-l asocieze limbajului JavaScript si nu unui alt limbaj.

Puteti avea oricate taguri &ls script >, oricate aveti nevoie in corpul documentului HTML (in “body”) . Tineti minte ca orice tag deschis trebuie inchis!!Altfel veti avea erori si nu veti sti de unde. De asemenea daca folositi functii scrise in JavaScript trebuie sa le scrieti codul in interiorul tagurilor &ls head >... &ls/head > : in felul acesta functiile voastre vor fi incarcate inainte ca pagina sa fie afisata si nu veti vedea tot felul de erori. Un exemplu ar fi:

&ls head >
&ls title > Me here:D &ls /title >
&ls script language="JavaScript" >

function scriu_functie()
{
JavaScript Stuff...
}

&ls /script >
&ls /head >

Cum ar arata un buton adaugat in pagina HTML cu JavaScript?

&ls form >
&ls input type="button" value="See Some Text" name="button2" onclick="window.status='You clicked the button!'; return true" >
&ls /form >
Ce face codul..Sa vedem:
&ls form >
Acest tag creeaza un form astfel incat sa putem folosi butonul nostru nou creat

&ls input >
Creeaza o zona in care putem adauga ceva.
type="button"
Aceasta comanda declara zona de imput de mai sus ca va fi un buton
value="Click Me"
Aceasta va fi valoarea pe care o veti putea vedea pe butonul vostru. Puteti scrie aici orice text doriti
name="button1"
Puteti sa-I dati si un nume butonului pentru a-l putea folosi in viitor in script si pentru a avea diferite functii

Un alt exemplu: acum vom avea 3 butoane care vor modifica cand vor fi apasate culoarea backgroundului paginii unde vor fi adaugat:

&ls form>
&ls input type="button" value="Change to Yellow!" name="button3" onclick="document.bgColor='yellow'" >

&ls input type="button" value="Change to Red!" name="button4" onclick="document.bgColor='red'" >

&ls input type="button" value="Change back!" name="button5" onclick="document.bgColor='white'"> &ls/form >

Cum arata un buton de BACK?

Daca vreti sa aveti in pagina voastra web un buton care sa permita celor care va viziteaza pagina sa se reintoarca la pagina anterioara ati putea scrie:

&ls form >
&ls input type="button" value="Click here to go back" onclick="history.back()" >
&ls /form >

Singura diferenta se gaseste aici:
....onClick="history.back()"

onClick=” ” spune browserului sa execute comanda din ghilimele cand este apasat butonul. Functia history.back() are efectul dupa cum ii spune si numele: intoarce vizitatorul la ultima pagina din istoria listei lor

Si daca..
Am vrea avem un buton care sa ne duca un pas mai departe in istoria listei noastre? Am putea scrie:
history.forward()
Dar daca vrem sa specificam un numar de pasi cu care sa mergem inainte sau inapoi prin istoria noastra :
history.go(-numar) sau history.go(numar)
Daca folositi un numar negativ butonul va va duce ianpoi cu acel numar, iar la pozitiv veti merge inainte.

~end of partea intai~

Asteptam sugestii, reclamatii si/sau complimente :P

2008-11-18T00:12:00.001+02:00

Pentru a va demonstra ca suntem capabili sa acceptam orice critica,
(atata timp cat nu se trece la jigniri sau la nesimtire)
am creat acest post, cu scopul de a va oferi un loc unde puteti sa lasati comentarii.

Astfel ne va fi si noua mai usor sa va raspundem.
O sa ne straduim ca din fiecare comentariu sa extragem sfatul vostru si sa incercam sa il aplicam ca sa devenim mai buni si sa multumim cititorii nostri.

Observatie: comentariile primite de la anonimi vor fi sterse.
Consideram ca atata timp cat suntem dispusi sa ascultam parerea voastra, voi trebuie sa va prezentati, pentru ca sa se pastreze o conversatie diplomatica.

Va multumim pentru timpul petrecut pe blogul si pe site-ul nostru, cat si pentru faptul ca sunteti dispusi sa impartasiti parerile, gandurile si ideile voastre cu noi.

Cate ceva despre Api Youtube

2008-11-17T11:54:00.004+02:00

Cum sa parsam informatia de pe youtube ?

Informatii utile pentru TEMA 1 la Interfete Evoluate !!

Poate v-ati gandit vreodata : oare cum pot sa stiu fara sa ma uit mereu ce comentatori am, cati sunt, cu ce filme au raspuns la filmele mele, pe ce pozitie oi mai fi in statisticile celor de la youtube in functie de numarul celor care imi vad filmele si asa mai departe. Un mod foarte usor ar fi sa scrieti un mic cod in php si el sa faca automat tot ce voua v-ar lua muult timp.

Api-ul de la YOUTUBE ofera posibilitatea de a acesa continutul public foarte usor, intorcand ca rezultat al interogarilor un XML care contine informatia dorita si se poate si parsa destul de usor.

Cei de la IBM au un tutorial foarte bun in acest sens si daca va intereseaza subiectul merita sa aruncati o privire si aici : http://www.ibm.com/developerworks/xml/library/x-youtubeapi/ precum si in documentatia scrisa de cei de la GOOGLE pentru API-ul de la YOUTUBE : http://code.google.com/apis/youtube/2.0/developers_guide_protocol.html

Cum arata o cerere catre api-ul de la YOUTUBE ?

De exemplu pentru a vedea cele mai vazute TOP-ul video-urilor URL-ul va arata asa :

http://gdata.youtube.com/feeds/api/standardfeeds/most_viewed

Scrieti acest URL in browserul vostru si vi se va intoarce o pagina care contine doar aceste video-uri. Daca va uitati si la sursa veti vedea ca este frumos arantaja intr-un XML.

Alte exemple de URL-uri. Cum scrieti daca vrei sa vedeti doar video-urile dintr-o categorie anume ?

Pentru calatorii si pentru tehnologie arata asa :

http://gdata.youtube.com/feeds/api/videos/-/Travel

http://gdata.youtube.com/feeds/api/videos/-/Tech

Cand vreti sa intoarceti feed-ul pentru un filmulet sau rezultatul unui search, Youtube Api va raspunde cu un XML, al carui rootXML va fi ‘<’feed’>’ si fiecare Atom feed va fi incapsulat intr-un tag’ <’entry’>’. Un ‘<’feed’>’ poate avea mai multe elementede genul ‘ <’entry’> ‘ reprezentand cate un film care corespunde criteriului de cautare. Fiecare ‘<’entry’>’ contine al randul sau elemente ‘<’link’>’ unde se gaseste URL link-ul pentru a vedea acel video, raspunsurile la el, precum si alte video-uri care au legatura cu acesta de pe site-ul celor de la Youtube.

Informatiile referitoare la un video se gasesc in interiorul tag-ului ‘<’media’>’. Un element ‘<’media:group’>’ din interiorul fiecarui element ‘<’entry’>’contine informatii detaliate cu privire la : titlul sau, descriere, link-urile catre thumbnails-urile sale, link-uri atre player-ul video.

Acesta contine imagini si poate avea atasate mai multe poze thumbnail si le veti putea identifica dupa tagul ‘<’media : thumbnail’>’. Durata filmului este in tagul <> exprimata in secunde.

Numarul de vizualizari al lui video se gaseste in tag-ul ‘<’yt:statistics’>’ iar tagul « viewCount » da numarul. Pentru a vedea cat de bine este cotat « rating-ul » lui ne vom uitat in ‘<’gt:rating’>’ care este un copil al ‘<’yt :statistics’>’ adica exact stelutele care apar in dreptul video-ului. De ex., un numar intre 2.75 si 3.249 va afisa 3 stelutze pe cand un rating intre 3.25 si 2.749 va afisa 3.5 stelutze.

Video comments feed

Fiecare video entry contine tagul ‘<’gt :comments’>’ care incapsuleaza URL-ul catre care vei trimite cerei API sau vei atasa lista de comentarii pentru un video anume. Un video feed arata cam asa :

feed

  entry

...

    media:group

...

    /media:group

    gd:comments

      gd:feedLink href='http://gdata.youtube.com/feeds/api/videos/VIDEO_ID/comments'/

    /gd:comments

  /entry

/feed

Unde VIDEO_ID reprezinta numele video-ului pentru care vreti sa gasiti comentariile.

Profilul unui utilizator (User Profile entry )

Informatiile pe care utilizatorul le-a dat despre el se gasesc pe pagina cu profilul sau.

Pentru a face o cerere catre profilul unui utilizator putem scrie urmatorul URL :

http://gdata.youtube.com/feeds/api/users/username?v=2

Daca va intereseaza sa-i vedeti prietenii sau familia(“contatcts”) avem urmatorul URL:

http://gdata.youtube.com/feeds/api/users/username/contacts?v=2

unde username= numele utilizatorului pentru care cautati informatiile

Alte exemple pentru folosirea Api-ului de la Youtube:

Cele mai vazute video-uri: http://gdata.youtube.com/feeds/api/standardfeeds/top_rated
Cele mai nou adaugate video-uri: http://gdata.youtube.com/feeds/api/standardfeeds/most_recent
Video-urile catre care ceilati useri au pus cele mai multe referinte: http://gdata.youtube.com/feeds/api/standardfeeds/most_linked

Cum sa parsezi comentriile text sau sub forma de video-uri la filmuletzul tau ; Cod in PHP

      $media = $entry->children('http://search.yahoo.com/mrss/');

      $obj->title = $media->group->title;

      $obj->description = $media->group->description;

      // get video player URL

      $attrs = $media->group->player->attributes();

      $obj->watchURL = $attrs['url'];

      // get video thumbnail

      $attrs = $media->group->thumbnail[0]->attributes();

      $obj->thumbnailURL = $attrs['url'];

      // get  node for video length

      $yt = $media->children('http://gdata.youtube.com/schemas/2007');

      $attrs = $yt->duration->attributes();

      $obj->length = $attrs['seconds'];

      // get  node for viewer statistics

      $yt = $entry->children('http://gdata.youtube.com/schemas/2007');

      $attrs = $yt->statistics->attributes();

      $obj->viewCount = $attrs['viewCount'];

      // get  node for video ratings

      $gd = $entry->children('http://schemas.google.com/g/2005');

        $attrs = $gd->rating->attributes();

        $obj->rating = $attrs['average'];

      // get  node for video comments

      $gd = $entry->children('http://schemas.google.com/g/2005');

        $attrs = $gd->comments->feedLink->attributes();

        $obj->commentsURL = $attrs['href'];

        $obj->commentsCount = $attrs['countHint'];

      // get feed URL for video responses

      $entry->registerXPathNamespace('feed', 'http://www.w3.org/2005/Atom');

      $nodeset = $entry->xpath("feed:link[@rel='http://gdata.youtube.com/schemas/

      2007#video.responses']");

Ne cerem scuze...

2008-11-16T14:48:00.003+02:00

Deoarece am gresit fata de voi, trebuie sa va cerem un pic de intelegere.
Ne cerem scuze pentru modul in care am abordat subiectele si pentru felul in care am scris articolele de pe acest blog.
In cele din urma am realizat ca am tratat prea formal si prea general temele prezentate. De acum inainte vrem sa abordam un stil mai personal, un stil care sa ne apropie de voi, cititorii nostri.
Vrem sa va tratam ca pe niste prieteni si sa va explicam anumite notiuni si termeni asa cum noi am vrea sa ne explice altcineva,intr-o maniera in care se poate intelege mai usor si intr-un stil care sa capteze toata atentia, pentru ca in cele din urma sa nu regretati nici o clipa din timpul vostru petrecut pe blogul si pe site-ul nostru.

Tort cu aroma de interfete web

2008-11-13T13:56:00.004+02:00

Aceasta postare nu are ca scop prezentarea sau explicarea vreunui concept.
Desi pare un articol offtopic, are intr-o anumita masura legatura cu interfetele web. Titlul acestui articol ne aminteste de o postare mai veche "cafea cu aroma de interfete web" ,insa continutul difera in totalitate.

Sa va spun despre ce este vorba:
Deoarece au fost diverse aniversari de nume si alte evenimente, m-am gandit sa realizez ceva bun, asa ca am creat o fereastra in agenda mea incarcata cu teme si m-am apucat sa fac un tort un pic mai diferit.
Dar cum nu prea aveam inspiratie si nici nu cunosteam vreo reteta destul de interesanta care sa ma multumeasca, m-am folosit de google si am cautat pe internet. Astfel am ajuns pe un super blog cu o multime de retete pentru torturi, cat si poze cu pasii realizarii acestora.

Autorul acestui blog si-a indeplinit inca o data scopul, atunci cand eu am inceput sa ii citesc cu mare interes articolele si sa ii urmez sfaturile.
Pentru ca imi erau de mare ajutor informatiile acestea, am luat laptopul in bucatarie si m-am apucat de treaba.
Si uite asa am imbinat doua lucruri care la prima vedere nu au nici o legatura: prajiturile si blogurile.
Rezultatul il puteti vedea mai jos:

(acum de cate ori incerc o reteta noua, ajutorul cel mai important il reprezinta laptopul cu site-urile si blogurile de pe internet)

[offtopic] La multi ani!

2008-11-08T03:40:00.003+02:00

N-are legatura cu interfetele web, dar pentru ca 3/4 * interfetewebas sarbatoreste, ne-am gandit sa uram tuturor celor care poarta numele Mihai, Mihaela, Gabriel sau Gabriela un sincer La multi ani!

Pozitia site-ului pe google aceeasi cu pozitia blogului?!

2008-11-07T12:41:00.008+02:00

Da, ce coincidenta... :)
Cautand "interfete web" pe www.google.ro veti gasi atat site-ul cat si blogul nostru pe pagina 4.
Super, nu?

Statistici ale site-ului promovat de blogul nostru

2008-11-07T12:26:00.010+02:00

Statistica realizata de google pentru site-ul www.interfeteweb.as.ro:

Accesarea site-ului www.interfeteweb.as.ro

2008-11-07T11:45:00.009+02:00

Suntem bucurosi sa aflam ca am fost accesati si din afara tarii:

Speram ca in viitorul apropiat sa fim accesati din cat mai multe orase ale tarii:

Despre prima prezentare a site-ului & blogului

2008-11-06T11:40:00.000+02:00

Nu o sa va plictisesc cu vreo descriere despre cum a decurs prima intalnire a site-ului nostru cu evaluarea sa.
Cred ca e mai interesant sa va uitati chiar voi la prezentare si sa va formati o idee...

prezentare etapa 1 proiect

View SlideShare presentation or Upload your own.

Cafea cu aroma de interfete web

2008-11-05T02:43:00.000+02:00

Cafeaua din pauza meciului si-a facut efectul.. Nu ca n-as adormi daca m-as culca, dar in zilele cand nu am baut cafea (adica pana ieri:D) nu puteam sta nici daca imi propuneam (nu pana la 3 cat e acu, dar nici pana la 12-1). Si da, stiu, la meci merge o bere, da' mie nu-mi place berea.. macar in cafea pun zahar..

Acu nu m-am culcat din cauza a unei teme. Nu reusesc sa-i dau de cap. In astfel de situatii in zilele fara cafea as fi adormit instant. Acu n-am adormit, in schimb am inceput sa ma gandesc la interfete evoluate:D

Mi-am ales materia asta pentru ca suna bine si pentru ca am auzit colegi (despre care stiu ca se informeaza inainte sa faca o alegere) ca e interesanta. N-am ajuns de prea multe ori la curs, dar proiectul asta m-a dat gata. N-am tinut niciodata jurnal (desi mi se parea dragutz sa scriu si eu "Dear diary" ca in manualele de engleza:D), n-am avut niciodata blog, nu m-au preocupat niciodata retelele sociale. Cand am primit prima data invitatie pe hi5 mi-am facut cont, am pus cateva poze si atat. Pe urma am ignorat invitatiile catre alte site-uri de gen. Dar recunosc, imi placea sa citesc blogurile unor colegi sau sa ma uit la pozele prietenilor:)

Poate e doar euforia de inceput, foc de paie, dar de cand am creat blogul asta si site-ul am intrat de n ori pe ele sa vad ce sa mai adaug, ce sa mai schimb, si am cautat de m ori pe gugal sa vad daca apare blogul sau site-ul. Poate e tragic ca zic asta in anu 5 la Calculatoare, dar credeam ca e mult mai complicat sa gaseasca gugal un site facut de mine.

Am impresia ca materia asta are sa-mi transmita o gramada de informatii, pe care insa le uit repede daca nu le folosesc si altfel decat la lab. In 4 laboratoare cat am facut pana acum am invatat despre XML, DTD, XHMTL, CSS, XPath, XQuery, DOM si SAX. Pana acum auzisem denumirile astea, dar nu stiam foarte bine ce sunt si la ce se folosesc. Pana la sfarsitul semestrului o sa mai invatam o gramada de alte tehnologii web.

Si astea nu sunt nimic fata de ce ne asteapta. Viitorul este al Internet-ului, si cu cat interfetele web sunt mai usor de folosit si ofera mai multe functionalitati, cu atat Internet-ul va deveni si mai aglomerat:)

DTD

2008-11-05T00:16:00.006+02:00

DTD

Ce este DTD?

DTD = Document Type Definition
DTD specifica structura unui document XML si este primul limbaj aparut de acest gen.Un astfel de limbaj este necesar pentru a putea valida automat structura XML-urilor.

Daca fisierele XML au o strucutura anume se poate sa se:
• defineasca un standard pentru documentele XML – exemplu SVG (Scalable Vector Graphics) – limbaj prin care se pot defini grafice bidimensionale, se bazeaza pe XML şi este caracterizat de un fişier DTD. Toate aplicaţiile care crează fişiere SVG se bazează pe acelaşi fişier DTD şi implicit vor crea fişiere XML ce au aceeaşi structură

• valideze fişierele XML primite –cand se primiteste un fisier se poate verifica usor cu ajutorul DTD-ului daca acesta respecta structura data; dar daca nu o respecta stim de la inceput ca nu vom avea sanse mari de a-l prelucra si extrage informatii folosind programe in acest gen

• incorporeze de catre fisierele XML, DTD-urile care ii definesc structura sau sa contina referinte catre acesteaCu ajutorul DTD-ului putem defini elemente, atribute, restrictii simple cu privire la numarul de aparitii ale elementelor si tipul lor. Asemanator cu DTD-ul a aparut mai nou si XML Schema care permite sa fie definite niste constrangeri mai avansate si care foloseste acelasi limbaj ca si un XML, nu are propria lui sintaxa ca DTD-ul.

Sintaxa
In cazul in care fişierul DTD este conţinut în fişierul XML :

sau într-un fişier extern:

Unde:
• “element_rădăcină” = elementul rădăcină al fişierului XML.
• SYSTEM (cuvât cheie)= se foloseste daca fişierul XML contine referinte catre .dtd si amandoua fisierele se gasesc pe acelasi calculator (system)
• PUBLIC se foloseşte când .dtd se află la o adresă externă şi este urmat de FPI (Formal Public Identifier) – un string care identifică în mod unic un DTD (Exemplu de FPI: "-//W3C//DTD HTML 4.01 Transitional//EN" – DTD pentru HTML).
• URL=URL-ul local sau extern unde poate fi găsit fişierul .dtd. Sintaxa pentru a defini structura unui element este următoarea:

Tipul poate fi :
• EMPTY daca avem elemente vide
• ANY în cazul elementelor ce pot avea orice structură.

Cand elementul nu se afla in nici unul din tipurile prezentate anterior atunci el poate contine text:(#PCDATA – parsed character data) şi poate avea alte elemente copii. Elementele de tip copii sunt separate prin virgulă şi pot fi urmate de următorii descriptori( e = element:):
• - :e apare de 0 sau n-ori
• + :e apare de 1 sau n-ori
• ? :e apare de 0 sau 1 ori
• e1|e2 :apare e1 sau e2

Ex.

Pentru elementul ’Om’ putem scrie structura:

&ls !ELEMENT Om (nume, prenume, cnp, copil*, casatorit_cu?, (M|F), parinte+) &gt

Pentru definirea atributelor putem scrie structura:

&ls !ATTLIST element atribut tip valoare_implicită &gt

 Unde:

- ’element’ =  elementul al cărui atribut îl definim

-  ’atribut’ = atributul pe care îl definim
-   ’tip’ poate fi:

1)      ID – valoarea atributului reprezintă un ID unic

2)      IDREF – valoarea atributului referă un ID unic

3)      IDREFS – atributul are ca valoare o lista de ID-uri

4)      CDATA – character data – text ce nu va fi parsat de parserul XML

5)       (val1|val2|..|valn) – atributul are valorile cuprinse în lista de valori val1...valn

6) Valoarea implicită pentru atribut poate fi:

- Valoare – valoarea efectiva

- #FIXED V – are mereu valoarea ‘V’

- #IMPLIED – poate lipsi

- #REQUIRED –trebuie să se găsească întotdeauna în documentul XML

În fişiere DTD se pot defini entităţi.
Entităţile =prescurtări ale unor structuri de text ce apar mai des în fişierul XML.

Ex.
&ls !ENTITY CS “Computer Science” &gt

- se defineşte entitatea cu numele “CS” ce prescurtează denumirea “Computer Science”.

Fisierul XML poate contine:

&ls profil &gt &CS &ls /profil &gt

Înaintea entităţii se foloseşte „&” şi după aceasta se foloseşte „;”.

Ce este XML? Scurta descriere.

2008-11-04T23:45:00.000+02:00

XML este un format de fisier asemanator cu Microsoft Word sau un fisier Adobe Acrobat, o foaie de calcul tabelar sau o pagina online HTML. Oricum are proprietati diferite de acestea si anume:
• standardul XML nu este controlat de o singura organizatie; este un ‘open’ standard la care oricine poate contribui sau folosi;
• din punct de vedere ethnic, fisierle XML nu sunt salvate ca date ‘binare’ ci mai degraba ca plain text. Asta inseamna ca sunt indepente de platforma si pot fi citite de oameni

• fisierele XML nu au o structura specifica, insa folosesc un set de reguli de baza ( dar stricte) . Astfel se pot reprezenta prin fisiere XML multe tipuri de date si informatii de la documente pana la fisiere cu imagini si tranzactii financiare.
• Regulile XML pot fi folosite sa restrictioneze structura tipurilor de date – deci pot fi create noi standarde. Structura este de tipul self- descriptive si fiecarei date ii este asociat un ‘tag’ pentru a o descrie intr-un fel. Acest lucru permite ca fisierele sa poate fi validate de un calculator , dar chiar si de oameni pana la un anumit nivel.
Ce e important e ca, definind reguli stricte dar neimpunand restrictii asupra structurii, se pot dezvolta formate ‘standard XML’ (numite Schemas) care sa reprezinte un tip particular de date. Exista “Standard XML schemas” pentru multe tipuri de informatii de la tranzactii de vanzari in business pana la formatarea stirilor.
Desi XML este un standard (adica exista reguli pentru a creea aceste fisiere) totusi pot aparea probleme, intrucat se pot crea structuri atat de diferite si totusi similare folosind descrieri cu XML schema. Acest lucru a reprezentat la inceput o mare problema, dar acum organizatiile incep sa colaboreze (multe prin intermediul W3C) pentru a dezvolta si promova un singur standard XML pentru fiecare domeniu cu probleme.
Pentru procesarea fisierelor XML :
Sunt trei tehnici tradionale de a procesa fisierele XML si anume:
• folosind un limbaj de programare si API-ul SAX
• folosind un limbaj de programare si API-ul DOM
• folosind un motor de tranformare si un filtru

Rezolvarea Laborator interfete evaluate; exemplu de folosire XML + DTD:

Enunt:

1. sa se creeze un fisier XML care sa descrie profilul unei persoane (date de identificare, educatie, joburi, relatii sociale). Relatiile sociale sunt descrise prin referinte catre alte profiluri similare. Se va discuta structura documentului si utilizarea sabloanelor prezentate.
2. folosind un document XML model si un DTD generat automat se cere sa se corecteze DTD-ul

Publicat de Mihaela

Cateva cuvinte si despre XHTML & CSS

2008-11-04T21:22:00.000+02:00

Aceasta postare are ca scop o scurta descriere a conceptelor enumerate in titlu.
Pentru inceput voi prezenta cateva informatii legate de XHTML, urmand sa continui cu introducerea in lumea fascinanta a CSS-ului.

Conceptul XHTML constituie prescurtarea notiunii Extensible Hypertext Markup Language si reprezinta un limbaj de structurare a datelor, cu alte cuvinte se poate spune ca este o reformulare a limbajului HTML, adaugand constrangeri la sintaxa HTML.

In comparatie cu limbajul HTML care este o aplicatie SGML, XHTML constituie o aplicatie XML, mult mai riguroasa, cu o structura bine definita si cu mai multe constrangeri.Documentele XHTML sunt bine formate si de aceea permit procesarea automata de catre ustensilele XML.

Caracteristicile limbajului XHTML sunt descrise de urmatoarele afirmatii:
- limbajul este case sensitive, astfel daca veti incerca sa scrieti numele elementelor cu majuscule nu veti avea ca rezultat un XHTML valid;
- daca tag-urile nu se vor inchide corect atunci va exista o problema, de aceea trebuie sa fim atenti la imbricarea acestora (trebuie inchise chiar si tag-urile goale)
- exista posibilitatea de a crea elemente cu un continut vid, fara nici un fel de eroare;
- o greseala frecventa reprezinta scrierea valorilor atributelor fara ghilimele;
- obligatoriu trebuie sa introducem elementele head,body si title;

Fiecare document XHTML va contine declaratia tipului sau, o declaratie DOCTYPE.
Astfel se poate realiza o clasificare a documentelor in functie de tipul lor, cu propriul DTD:
• XHTML 1.0 Strict - echivalent cu strict HTML 4.01 si include elemente si atribute care au fost dezaprobate in HTML 4.01.
• XHTML 1.0 Transitional - echivalent cu HTML 4.01 Transitional si include prezentarea elementelor precum “center”, “font” si “strike”
• XHTML 1.0 Frameset - echivalent cu HTML 4.01 Frameset si permite definirea “frameset documents”

Observatie
Documentele XHTML pot fi text/html, text/xml, aplication/xml sau application/xhtml+xml.

Concluzie
Scopul folosirii XHTML-ului este acela de a inlocui limbajul clasic HTML, de a schimba tehnologia folosita cu una mai performanta, realizand un pas important in dezvoltarea web-ului, in plus fiind sustinut de catre organizatia W3C.

De retinut
XHTML = HTML scris cu reguli XML

Utile
Exista diferite site-uri unde se poate testa valabilitate XHTML-urilor, dintre care mentionez doua:
http://validator.w3.org/
http://www.validome.org/

Pentru o mai buna intelegere a regulilor XHTML si a diferentelor fata de HTML, vizualizati clipul urmator si accesati linkurile de mai jos:

http://en.wikipedia.org/wiki/XHTML
http://www.youtube.com/watch?v=gVmcvU1tWVY

Conceptul CSS sau Cascading Style Sheets se refera la modul in care elementele din HTML sunt afisate, in alta ordine de idei este un limbaj de formatare care ne poate usura munca (sau nu). :)

Deoarece exista mai multe nivele de prioritate a stilurilor, este necesar sa tinem cont de ele, deci prin urmare sa le cunoastem. Astfel primul nivel ii apartine browser-ului (stilul implicit), pe urmatorul nivel se intalneste stilul descris in fisierul cu extensia css, apoi nivelul 3 contine stilul din interiorul paginii, adaugat in zona de head ,pentru ca ultimul nivel sa descrie stilul din cadrul elementului.

In ceea ce priveste sintaxa CSS-ului se poate spune doua cuvinte: “foarte simpla” si acest lucru datorita faptului ca este formata din 3 elemente: selector, proprietate si valoare , sub forma unui tuplu => selector{proprietate:valoare}

Exemplu: h1{color:yellow}

Se pot definii mai multe stiluri pentru un element sau un stil pentru mai multe elemente.
Exemplu1:
h1.yellow{color:yellow}
h1.blue{color:blue}
"< class="”yellow”"> soare < /h1>
< class="”blue”"> cer < /h1> "
Exemplu2:
.center{text:align:center}
“< class="”center”"> titlu”

Informatia continuta de CSS poate fi accesata prin diferite surse, de exemplu aceasta fi atasata printr-un fisier extern sau introdusa direct in documentul HTML
CSS are diferite nivele si profile: CSS1 (publicat in decembrie 1996), CSS2 (publicat in mai 1998) si CCS3 (urmeaza a fi publicat)

Observatie
In cazul acestui limbaj, browser-ul este tolerant,astfel in momentul in care unele elemente sunt incorecte, se ignora si se continua cu urmatoarele elemente.
Din aceasta cauza probabil ca nu exista nici o unealta care sa valideze CSS-urile.

Browser-ele cu o versiune mai veche vor interpreta diferit CSS-urile, acest lucru devenind un dezavantaj al acestor limbaje de formatare.

Concluzie
Limbajul CSS este usor de folosit ,totodata avand un impact mare asupra formatarii documentului, prin stilurile definite.

De retinut
Acest limbaj de formatare este foarte util si frecvent folosit in crearea si modificarea site-urilor cu o complexitate mare.

Utile
Pentru mai multe informatii accesati:
http://en.wikipedia.org/wiki/Cascading_Style_Sheets
http://www.youtube.com/watch?v=PHt5wsva32A

XPATH & XQUERY

2008-11-03T21:56:00.000+02:00

Atat XPath, cat si XQuery, sunt standarde/limbaje care permit accesarea datelor dorite din interiorul fisierelor xml, fiecare folosind o sintaxa proprie, dupa cum urmeaza:

XPath este un „limbaj” ce permite regasirea unor parti dintr-un fisier XML precum si „navigarea” prin fisiere XML. Documentele XML au o structura arborescenta, datorita relatiei „tata-fiu” a nodurilor din acel document, ceea ce permite limbajului XPath sa poata sa acceseze diferite elemente din cadrul documentelor XML. Acesta este si scopul principal al acestui limbaj. Pentru a permite accesarea diferitelor elemente ale documentului XML, XPath foloseste o sintaxa foarte asemanatoare cu cea utilizata pentru accesarea fisierelor intr-un sistem de fisiere UNIX (ex: „/grupa/studenti/student/nume” pentru fisierul XML de mai jos). XPath nu respecta structura documentelor XML (nu este un fisier XML).
Numele limbajului se trage de la faptul ca utilizeaza „cai” (PATHS) pentru identificarea elementelor XML.

XQuery este o recomandare W3C si a fost creat pentru a permite interogarea documentelor XML si extragerea unor componente ale acestora (elemente sau atribute). Cea mai buna definire a XQuery este obtinuta prin analogia cu SQL. Astfel, XQuery este pentru XML ceea ce este SQL pentru bazele de date. Acest limbaj se bazeaza pe XPath, cele doua limbaje folosind acelasi model al datelor si suportand aceiasi operatori si aceleasi functii. XQuery este suportat de catre toate motoarele mari ce actioneaza pe baze de date (IBM, Oracle, Microsoft, etc.)

1. Sintaxa

In cadrul XPath exista sapte tipuri de noduri: element (nodurile documentului), atribut (asociat unui nod), text, namespace, instructiuni de procesare, comentariu si radacina documentului (root). Datorita structurii arborescente a documentelor XML, intre nodurile acestuia se stabilesc relatii de rudenie (ex: parinte, copil, urmas, etc.).
Selectarea unui nod se face prin urmarea unei cai XPath. Aceste cai pot fi absolute si atunci incep cu „/” sau pot fi relative si atunci NU incep cu „/”. In primul caz, calea catre destinatie porneste din radacina documentului, iar in cel de-al doilea, calea porneste din nodul curent.
Pentru selectarea nodurilor dorite se folosesc urmatoarele elemente de sintaxa:
- [cond] - conditia de selectie
- * - toate nodurile
- @att - specifica ca att este un atribut al nodului
- text() - copiii de tip text ai nodului curent
- node() - copiii de tip nod ai nodului curent
- . - nodul curent
- .. - nodul parinte
- / - nodul radacina
- // - nodul radacina si toti descendentii sai

XQuery
Cateva notiuni de baza ale sintaxei:
• XQuery este un limbaj case-sensitive
• Elementele, atributele si variabilele XQuery trebuiesc sa fie nume XML valide
• Valorile XQuery trebuiesc puse fie intre ghilimele, fie intre apostrofuri
• O variabila XQuery se defineste folosind $NUME, unde NUME este numele variabilei respective (ex: $doc)
• Comentariile XQuery sunt delimitate de (: si de :)

Expresiile XQuery au o structura de FLWOR, care este un acronim pentru „For, Let, Where, Order by, Return”. Aceasta structura extrage niste noduri din fisierul XML, aplica un predicat pentru a elimina din nodurile selectate, iar apoi construieste un rezultat.
Instructiunile FOR si LET genereaza o lista de noduri extrase din document, mentinand ordinea acestora. Aceasta instructiune este similara cu FROM dintr-un query SQL. Diferenta dintre cele doua instructiuni este faptul ca in cazul instructiunii FOR, variabila var se leaga pe rand la fiecare element din expresia expr, facand posibila iterarea, in timp ce in cazul instructiunii LET, variabila var se leaga la intreaga lista definita de expresia expr, returnand o singura valoare.
Instructiunea ORDER BY defineste ordinea in care sunt considerate elementele extrase de FOR sau LET in cazul in care nu se doreste ordinea in care au fost acestea in documentul XML.
Instructiunea WHERE aplica un predicat (una sau mai multe restrictii) eliminand unele din nodurile extrase de catre FOR sau LET. Aceasta instructiune este echivalentul expresiei WHERE dintr-un query SQL.
Instructiunea RETURN este aplicata asupra fiecarui nod care respecta conditiile impuse prin instructiunea WHERE si seteaza modul de prezentare a rezultatelor obtinute, generand o lista ordonata de noduri la iesire. Aceasta instructiune este echivalentul expresiei RETURN dintr-un query SQL.

2. Exemple

XPath
Comenzi pentru selectarea:
- tuturor nodurilor din xml: /*
- tuturore atributelor din documentul xml: //@*
- tuturor elementelor care au atributul "id" si sunt descendenti ai elementului elem: /elem//*[@id]
- toate elementele care au id-ul > 1000: //*[@id>1000]
- numele tuturor studentilor: //student/nume
- numele celui de-al doilea student: //student[position()=2]/nume
- elementul nume al studentului cu atributul id 1212: //student[@id=1212]/nume
- studentul al carui nume este Popescu: //student[nume="Popescu"]
- sa se returneze primul element student si advisorul lui: //student[1] | //advisor
- din ce grupa face parte studentul cu numele Popescu: /grupa[studenti/student/nume="Popescu"]

XQuery

Scrieti un Xquery care sa returneze titlul si anul aparitiei cartilor care nu sunt publicate de catre Addison-Wesley.
for $a in doc("../XMP/bib.xml")//book
where $a/publisher != "Addison-Wesley"
order by $a/@year
return
{rezultat}
{$a/@year} {$a/title}
{/rezultat}

Scrieti un Xquery care sa returneze titlul si autorii cartilor cu mai mult de 2 autori
for $a in doc("../XMP/bib.xml")//book
where $a/author[1] != $a/author[position()=last()]
order by $a/title
return
{rezultat}
{$a/title} {$a/author}
{/rezultat}

Scrieti un Xquery care sa returneze titlul, autorii, pretul si reviewurile cartilor ce sunt prezente in librarie si pentru care exista reviewuri.
for $a in doc("../XMP/bib.xml")//book,
$b in doc("../XMP/reviews.xml")//entry
where $a/title = $b/title
order by $a/title
return
{rezultat}
{$a/title} {$a/author} {$a/price} {$b/review}
{/rezultat}

3. Cazuri de utilizare:

XPath este utilizat in orice aplicatie care doreste sa lucreze cu elementele unui fisier XML. In limbaje ca XSLT este folosit pentru a naviga prin document si pentru a identifica diferitele elemente din cadrul acestuia pentru a putea fi prelucrate, iar in limbaje ca XQuery este folosit pentru a identifica si a returna diferite componente ale documentului XML. De asemenea este folosit si de catre XLink si XPointer precum si de catre parsere ca XML DOM sau SAX.

XQuery
• Rezultatele care se obtin in urma aplicarii unei expresii XQuery pot fi sortate in functie de unul din elemente
• In cazul in care nu se doreste ca expresia XQuery sa intoarca un nod, ci se doreste sa se intoarca un text, aceasta se poate realiza folosind instructiunea text()
• Daca se doreste ca rezultatul obtinut sa fie un document valid XML sau HTML, aceasta se poate realiza incadrand continutul expresiei XQuery in elementul care se doreste, punand continutul acesteia intre acolade ({})

4. Concluzii

Xpath este un limbaj folosit pentru navigarea prin documentele XML si pentru identificarea si accesarea diferitelor elemente si atribute ale acestuia. Cu ajutorul acestui limbaj se pot regasi foarte usor informatii intr-un document XML. Acest limbaj este extreme de important, el stand la baza altor limbaje, cum ar fi XSLT, XQuery, XLink si XPointer. De asemenea, parserele de XML sunt construite tot pe baza acestui limbaj.

XQuery este un limbaj ce poate fi utilizat pentru extragerea de informatii din documentele XML, generarea de rapoarte, transformarea documentelor XML in XHTML si cautarea in documentele Web a unor informatii relevante. XQuery este compatibil cu diverse standarde W3C, cum ar fi XML, Namespaces, XSLT, XPath, si XML Schema.

DOM vs SAX

2008-11-02T22:20:00.000+02:00

Pentru a retine informatii in mod organizat si interpretabil de catre o masina a fost creat limbajul XML: datele sunt impartite in elemente de informatii, fiecare element fiind incadrat de un tag pentru a fi delimitat de celelalte elemente. Insa nu este de ajuns sa facem arhive cu tot soiul de informatii: memoram respectivele date pentru ca mai avem nevoie de ele si alta data. Pentru a le refolosi trebuie sa le extragem din fisierele XML; acest lucru se realizeaza parsand aceste fisiere, adica extragand informatia utila dintre tag-uri. Cum parsarea presupune rescrierea aceluiasi cod, in ajutorul nostru vin parserele: ele ne ofera o serie de functii cu care extragem elementele si atributele care ne intereseaza.

Doua dintre cele mai folosite parsere de XML sunt DOM si SAX. Desi in final ele realizeaza acelasi lucru (extragerea informatiei dorite), exista deosebiri fundamentale intre cele 2 parsere:

- DOM (Document Object Model) este bazat pe organizarea documentului sub forma de arbore (de aici si denumirea: din fisierul XML este creat un document modelat dupa forma unui arbore)
  
  - avantaj: avem modelul deja creat
  - dezavantaj: modelul de arbore poate fi prea complex pentru ce avem nevoie
- SAX (Simple API for Xml) este bazat pe evenimente: la aparitia tag-ului specificat se declanseaza un eveniment (se executa o metoda desemnata anterior)
  
  - avantaj: ne putem crea propriul model de document, care poate fi mai simplu decat un arbore
  - dezavantaj: nu putem sti intotdeauna ce vrem sa facem de la prima aparitie a elementului

- DOM incarca tot fisierul XML in memorie si apoi se plimba prin el
  
  - avantaj: se poate trece de mai multe ori prin fisier
  - dezavantaj: - se consuma multa memorie, existand posibilitatea sa nu ajunga toata memoria in cazul fisierelor XML mari
  - parsarea dureaza mai mult
- SAX parseaza fisierul XML pe masura ce vine
  
  - avantaj: - consum mic de memorie
  - mai rapid
  - dezavantaj: nu ma pot intoarce la informatia deja citita

- DOM ofera o interfata catre fisierele XML de nivel ridicat
- SAX ofera acces la fisierele XML la un nivel mai coborat

- DOM este un standard W3C
- SAX nu este un standard

In concluzie, DOM este un parser mai complex, care face toata treaba in locul nostru: citeste fisierul XML, creeaza un obiect din acest fisier si ne da o referinta catre acest obiect (un document), pe care putem apoi sa il manipulam dupa cum dorim. SAX in schimb nu face altceva decat sa detecteze prezenta unui anumit tag, in acest caz declansand un eveniment; noi suntem responsabili de interpretarea acestor evenimente, prin crearea unei clasa care sa trateze evenimentele.

Cand utilizam DOM si cand utilizam SAX?

Pe baza celor descrise mai sus voi exemplifica utilizarea unuia sau altuia dintre parsere. Sa presupunem ca avem reprezentate intr-un fisier XML datele despre studentii unei facultati: data personale si situatia scolara. Mai presupunem ca facultatea acorda burse tuturor studentilor cu medii mai mari de 8,50. In acest caz, pentru a afla studentii care primesc bursa este de ajuns sa folosim SAX. Daca insa bursele se acorda pentru un numar fix de studenti, in ordine descrescatoare a mediilor, avem nevoie de DOM, intrucat nu putem sti dintr-o singura parcurgere care student poate primi bursa.

Prima postare

2008-10-26T11:45:00.000+02:00

Bine ati venit pe blogul nostru.
Va asteptam si pe site-ul interfeteweb.as.ro