Prelegere din cadrul materiei "Dezvoltarea aplicaţiilor Web cu JavaScript" (Full-Stack Web Development) predată de Dr. Sabin Buraga (oct.2019–feb.2020).
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/staw/web-film.html
8. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Tipuri de căutări – maniera tradițională:
pe bază de indecși
explorare a Web-ului (crawling) +
prelucrarea conținutului textual (indexing)
Lycos – 1994 (Carnegie Mellon University)
AltaVista – 1995 (Digital Equipment Corporation)
9. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Tipuri de căutări – maniera tradițională:
pe baza ierarhiilor de termeni
(servicii de tip catalog – topic directory, taxonomii)
Yahoo! – Yet Another Hierarchical Officious Oracle
1994 (Stanford)
Jerry and David’s guide to the World Wide Web
11. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Tipuri de căutări – maniera tradițională:
pe baza legăturilor hipertext
(hyperlink analysis)
Google – 1996 (inițial BackRub – Stanford)
vezi și S. Buraga, „Căutarea resurselor Web” (2016)
www.slideshare.net/busaco/sabin-buraga-cutarea-resurselor-web
23. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Preluarea și indexarea resurselor
strategii:
natura datelor/relațiilor (data/relation mining)
detectarea subiectului conținutului (topic distillation)
meta-date – date descriind date
(e.g., doar însemnări ca replici la alte mesaje)
căutare socială (tag-uri, anturaj, aplicații Web sociale)
context (e.g., localizare geografică, timp, dispozitiv)
profil al utilizatorului – personalizare
(e.g., istoric al căutărilor, preferințe lingvistice)
26. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Roboți
pornind de la un URL, realizează o conexiune HTTP
la un server Web, pentru a întreprinde anumite
acțiuni privitoare la reprezentarea unei resurse
– uzual, HTML – și, recursiv, din toate resursele
(documentele) desemnate de legăturile existente
în cadrul reprezentării
27. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Roboți
pornind de la un URL, realizează o conexiune HTTP
la un server Web, pentru a întreprinde anumite
acțiuni privitoare la reprezentarea unei resurse
– uzual, HTML – și, recursiv, din toate resursele
(documentele) desemnate de legăturile existente
în cadrul reprezentării
acțiuni: extrage de date, copiere, agregare de conținut,
monitorizare, realizare a unui rezumat etc.
42. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Orice robot trebuie să respecte
standardul de excludere
„inhibă” vizitarea anumitor zone (secțiuni)
ale unui sit Web
în rădăcina unui domeniu Web
se poate plasa fișierul robots.txt
www.robotstxt.org/robotstxt.html
43. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
# https://developer.mozilla.org/robots.txt
User-agent: * # toți roboții
Crawl-delay: 5 # 5 sec. între cereri
Sitemap: https://developer.mozilla.org/sitemap.xml
Disallow: /admin/ # căi ce nu trebuie vizitate
Disallow: /*/dashboards/*
Disallow: /*docs/feeds
...
fișierul robots.txt poate cuprinde extensii recunoscute
doar de un anumit crawler Web
cazul Google:
developers.google.com/search/reference/robots_txt
46. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
motoare: căutarea
Activitatea generală a unui robot (crawler) simplu:
F = mulțimea de URL-uri de start (frontiera)
cât-timp F este nevidă
extrage un URL u din F
preia pagina (resursa Web) p cu adresa u
dacă p este relevantă
stochează p în index
pentru-fiecare legătură v din p
dacă v nu este în index și v nu aparține lui F
și v ar putea fi vizitată
adaugă v la F
58. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
motoare: indexarea
Necesitatea folosirii sistemelor de baze de date
depozit distribuit de stocare (eventual, în cloud)
optimizarea regăsirii
modele non-relaționale de stocare – „mișcarea” NoSQL
printre primele abordări: BigTable (Chang et al., 2006)
research.google.com/archive/bigtable.html
64. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
exemplificare: o parte dintre operatorii Google
"expresie" ~termen –termen
related: URL cache: URL link: URL
intitle: termen(i) allintitle: termen(i)
intext: termen(i) allintext: termen(i)
inurl: termen(i) allinurl: termen(i)
site: domeniu info: domeniu
define: termen filetype: extensie
unit1 in unit2 număr1 .. număr2
65. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
motoare: interogarea
digital camera $700 .. $1400
~book
intitle:design –intitle:web
"burse de merit"
site:uaic.ro
inurl: art nouveau
allinurl: ES6 library
16 cm in inch
related:www.w3.org
js mvc inanchor:slideshare
define:design
cache:http://devdocs.io/
map:iasi,romania
firefox filetype:svg OR filetype:png
unii operatori sunt permiși doar pentru anumite
tipuri de căutări – e.g., știri, imagini, hărți
73. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
interacțiunea cu motorul
de căutare poate fi facilitată
și de un agent software
conversațional
Apple Siri, Amazon Alexa, Google
Assistant, Google Now,
Microsoft Cortana, Mycroft.ai,
Dragon Go!, SpeakToIt Assistant
thereisabotforthat.com botpress.io
81. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
motoare: relevanță
Criterii vizând calculul relevanței:
ranking bazat pe conectivitate
analiza relațiilor (legăturilor hipertext) cu alte pagini
eventual, în funcție de reputație
e.g., importanța domeniului Internet
(sunt luați în calcul factori ca vechimea, localizarea,…)
83. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
motoare: relevanță
Page Rank (Google)
Larry Page & Sergey Brin, 1998
evaluarea relevanței pe baza contextului de apariție
exploatarea relațiilor dintre diferite pagini Web
o legătură de la resursa A la B reprezintă
un vot dat resursei B de către A
infolab.stanford.edu/~backrub/google.html
87. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
timp strategie
înainte de
2000
conținut – indexarea textului
(titlu, anteturi, URL, descriere via <meta>)
2000—2010
conținut
autoritate (via legături desemnate de URL-uri)
2010—
prezent
conținut
autoritate
personalizare (social media + profil utilizator)
2012—
prezent
conținut
autoritate
personalizare
concepte (date structurate + Web of data)
context (localizare geo, limbă, timp, dispozitiv,…)
adaptare după (K. Bodnar & J. Hopkins, 2011)
de studiat și www.slideshare.net/randfish/presentations
88. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Instrumente software open source pentru implementatori:
Apache Lucene, Apache Nutch, Apache Solr,
mnoGoSearch, Namazu, Xapian,…
API-uri publice:
www.programmableweb.com/category/search
disponibilitatea datelor indexate în regim deschis
în vederea analizării ulterioare:
commoncrawl.org
91. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
SERP (Search Engine Result Page)
se includ recomandări pe baza:
preferințelor utilizatorului
istoricului căutărilor
URL-urilor partajate via rețele sociale
meta-datelor (rich snippets)
adnotărilor realizate de utilizatori
localizării geografice (local search)
motoare: afișarea rezultatelor
92. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
a se considera și DuckDuckGo Instant Answers: duck.co/ia
motorul de căutare
DuckDuckGo este axat
asupra asigurării intimității
utilizatorului în ceea ce privește
căutările acestuia pe Web
97. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Motor de căutare internă (la nivel de sit)
îmbunătățirea interacțiunii – utilizabilitatea
integrarea în designul general al sitului
tactici: oferirea unui următor pas de realizat
(mai ales când nu există rezultate),
sugestii privind căutarea, exemple, rafinarea cererii etc.
98. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Motor de căutare internă (la nivel de sit)
în pagina de redare a rezultatelor, va fi afișată și
interogarea inițială, cu posibilitatea modificării ei
oferirea a cel puțin N rezultate/pagină +
indicarea numărului total de pagini de rezultate
sau
încărcarea progresivă a următoarelor rezultate
99. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Motor de căutare internă (la nivel de sit)
calitatea rezultatelor oferite e dependentă
și de modul de structurare a datelor
fiecare rezultat să includă informații utile
folosirea unui vocabular înțeles de către vizitator,
utilizarea unor tehnici de vizualizare intuitivă,
facilitarea filtrării și sortării datelor etc.
104. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
SEO – Search Engine Optimization
suită de strategii de redactare a codului HTML
în vederea obținerii unei relevanțe ridicate
a conținutului, astfel încât pagina/situl să fie
regăsite în urma unei căutări specifice efectuate
cu un instrument de căutare
106. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Se recurge la semnificația logică a marcatorilor HTML
POSH (Plain Old Semantic HTML)
titluri plasate ierarhic via elementele <h1>, <h2>,…
conținut tabelar cu <table>
aranjament vizual (layout)
via stiluri CSS și nu tabele (<table> <tr>…)
107. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Se recurge la semnificația logică a marcatorilor HTML
POSH (Plain Old Semantic HTML)
divizarea conținutului:
<section> <article> <header> <footer> <aside> etc.
marcajarea elementelor vizând navigabilitatea cu <nav>
liste specificate cu <ul> <ol> <li>
…
109. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Se recurge la semnificația logică a marcatorilor HTML
POSH (Plain Old Semantic HTML)
conținut textual alternativ pentru imagini (<img alt="..." />),
legături (<a title="...">), tabele (<table summary="...">),
multimedia,…
atașarea de meta-date externe în antetul paginii Web
via <head>, <meta /> și <link />
Josh Buchea, A free guide to <head> elements – gethead.info
110. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Se recurge la semnificația logică a marcatorilor HTML
POSH (Plain Old Semantic HTML)
de evitat elementele învechite – e.g., cadre (frame-uri) –
sau proprietare (<blink> ori <marquee>)
documentul trebuie să fie bine-formatat
verificarea corectitudinii codului HTML cu instrumentul
oferit de Consorțiul Web – validator.w3.org
a se considera și html5boilerplate.com
111. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Conținutul primează – content is king
o importanță majoră o are titlul paginii
Untitled Document – 68.8 de milioane de rezultate redate de Google
situl trebuie actualizat periodic, frecvent
numele fișierelor (imagini, stiluri,…) contează
tehnică utilă:
„rescrierea” URL-urilor – e.g., mod_rewrite la Apache
anumite date pot fi „ascunse” de roboți via robots.txt
112. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Realizarea legăturilor între pagini (hipermedia)
obligatoriu, de inclus legături spre alte resurse
(ale sitului propriu ori ale altor situri)
dorim legături spre/de la situri importante
având conținut similar cu situl nostru
de verificat și menținut structura hipertextului
instrumentul LinkChecker – validator.w3.org/checklink
113. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Realizarea legăturilor între pagini (hipermedia)
de citit cap. 2 din S. Buraga, Proiectarea siturilor Web, Polirom, 2005
www.slideshare.net/busaco/sabin-buraga-proiectarea-siturilor-web
tehnici clasice
așa-zis „demodate”:
interschimb de adrese
(link-uri) – banner-e, blogroll-uri
marketing bazat pe context
e.g., produse/servicii înrudite
114. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Realizarea legăturilor între pagini (hipermedia)
recurgerea la aplicații Web sociale
SMO – Social Media Optimization
partajare în rețeaua de „prieteni”,
apreciere, comentarii, opinii,…
S. Buraga, Design Patterns for Social (Web/mobile) Interactions,
prelegere la materia Human-Computer Interaction, FII, UAIC, 2019
profs.info.uaic.ro/~busaco/teach/courses/hci/hci-film.html#week7
115. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Realizarea legăturilor între pagini (hipermedia)
de evitat paginile de eroare – 404 Not Found
orice pagină de eroare poate fi „convertită”
într-o resursă folositoare omului/robotului
uzual, se oferă harta sitului (site map),
legături relevante, motor intern de căutare,…
alistapart.com/article/perfect404
alistapart.com/article/amoreuseful404
116. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Realizarea legăturilor între pagini (hipermedia)
a nu se folosi navigarea bazată pe JavaScript ori – mai
desuet – pe tehnologii proprietare (Flash/Silverlight)
<p>participanții: <a href="javascript:sari(3);">aici</a></p>
<h5><a href="javascript:window.history.back();">la prima pagină</a></h5>
118. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Specificarea structurii unui sit Web
crearea documentului sitemap.xml
pentru a fi ulterior procesat de motorul de căutare
www.sitemaps.org/protocol.html
complementar fișierului robots.txt
furnizează structura hipertext a unui sit Web
datele pot fi furnizate
și în formatele Atom, RSS și text obișnuit
119. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Specificarea structurii unui sit Web
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://developer.mozilla.org/en-US/docs/Archive</loc>
<lastmod>2020-01-16</lastmod>
</url>
<!-- alte elemente url -->
</urlset>
cazuri concrete:
developer.mozilla.org/sitemap.xml
techcrunch.com/sitemap.xml
instrument Web de generare: www.xml-sitemaps.com
122. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Paginile de „acoperire” (page cloaking)
scop: oferirea de conținut diferit,
în funcție de un anumit criteriu
(aici, conținut special pentru roboții de căutare)
black-hat page cloaking
tehnică penalizată: support.google.com/webmasters/answer/66355
123. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Oferirea de conținut via documente
adoptând formate de date nestandardizate
Titluri identice pentru toate paginile unui sit
Pagini de eroare oferite de server
via codul de stare HTTP 200 Ok
Redirecționări incorecte/malițioase
Abuzul de transferuri asincrone (Ajax)
de evitat
128. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Dark Web
acea parte a spațiului informațional reprezentat
de Deep Web care în mod intenționat e ascunsă
și inaccesibilă via navigatoare Web comune
exemplu notoriu:
rețele anonime (VPN – Virtual Private Network)
accesate cu TOR Browser
146. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Thing – schema cea mai generală, incluzând conceptualizări
(clasificări realizate riguros)
Action
BroadcastService
CreativeWork
Event
Intangible
MedicalEntity
Organization
Person
Place
Product
Class
Property
modelare de cunoștințe
(via o ontologie)
151. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
<p itemid="#busaco" itemscope="" itemtype="http://schema.org/Person">
This discipline is taught by
<span itemprop="honorificPrefix">Dr.</span>
<a href="https://profs.info.uaic.ro/~busaco/"
title="Visit the Website of Sabin-Corneliu Buraga" itemprop="url">
<span itemprop="name">
<span itemprop="givenName">Sabin</span>-
<span itemprop="additionalName">Corneliu</span>
<span itemprop="familyName">Buraga</span>
</span>
</a>.
</span>
</p>
specificarea (adnotarea explicită a) faptului:
„entitatea având numele Sabin-Corneliu Buraga este
o persoană, posedă titlul Dr. și are situl Web propriu
disponibil la adresa https://profs.info.uaic.ro/~busaco/”
152. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
<section id="web-nodejs">
<h2>Web Supplement</h2>
<ul>
<li itemscope="" itemtype="http://schema.org/CreativeWork"
itemid="#nodejs" class="lecture">
<p>Tutorial: <a itemprop="url" title="…"
href="presentations/web-nodejs.pdf">
<span itemprop="name">Web Application Development
with Node.js</span></a>
</p>
<div class="terms" itemprop="keywords"> Web, development, server,
Node.js, JavaScript, programming, npm, tools</div>
</li>
…
</ul>
</section>
specificarea în HTML5 a lucrărilor creative
de tip CreativeWork conform schema.org
155. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
<article itemscope="" itemtype="http://schema.org/Event">
<section id="contest">
<h2>Tema</h2>
<p itemprop="description">Concursul este destinat studenților
<span itemprop="location" itemscope="" itemtype="http://schema.org/Place">
<a href="http://www.info.uaic.ro/" itemprop="url" title="Spre situl FII>
<span itemprop="name">FII</span></a>
(UAIC <span itemprop="address">Iași, România</span>)</span>
și constă în optimizarea conținutului și structurii unui sit Web.</p>
…
<p>Perioadă de desfășurare:
<span itemprop="startDate" content="2018-10-15T00:00">15 octombrie 2018
</span>—<strong><span itemprop="endDate" content="2019-01-07T17:00">
7 ianuarie 2019, ora 17:00</span></strong>.</p>
</section>
…
</articol>
pe baza schema.org, se pot modela în HTML date
vizând un eveniment (Event) și locul de desfășurare (Place)
159. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
acțiuni asociate vizualizării unui produs (instanță a Product)
detalii la schema.org/docs/actions.html
vezi și Increase user engagement with actions in emails
developers.google.com/gmail/markup/
eBay
acțiuni ce pot fi efectuate de utilizator
(ViewAction e sub-concept al Action)
context: dispozitive mobile, e-mail,…
160. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Diverse utilizări practice:
artefacte culturale
vezi prezentările lui A. Isaac despre Europeana
www.slideshare.net/antoineisaac/presentations
biblioteci digitale (digital libraries)
R. Wallis, prelegeri la Smart Data’15, BIBFRAME’18,…
www.slideshare.net/rjw/presentations
lucrări științifice
formatul Scholarly HTML
w3c.github.io/scholarly-html/
medicină + sănătate
schema.org/docs/meddocs.html
health-lifesci.schema.org
161. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Diverse utilizări practice:
finanțe
extensia schema.org privitoare la FIBO
(Financial Industry Business Ontology)
wiki.edmcouncil.org
schema.org/FinancialProduct
industria auto
auto.schema.org
IoT (Internet of Things)
iot.webschemas.org/docs/iot-gettingstarted.html
turism
C. Bizer, Schema.org Annotations in Websites. Opportunities
& Challenges for the Tourism Industry, TFF’15
www.slideshare.net/TourismFastForward/bizer-christian-schema-orgtourism
162. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Scheme de microdate HTML5 în sistemele de management
de conținut (CMS – Content Management Systems)
DokuWiki
www.dokuwiki.org/plugin:semantic
Joomla
extensions.joomla.org/extension/google-structured-data-markup
MediaWiki
www.mediawiki.org/wiki/Extension:GoogleRichCards
TYPO3
extensions.typo3.org/extension/schema_org/
WordPress
wordpress.org/plugins/all-in-one-schemaorg-rich-snippets/
163. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Microdatele HTML5 sunt indexate de motoarele de căutare
Bing Webmaster
tinyurl.com/b9mx2f2
Google Structured Data
developers.google.com/structured-data/
research.googleblog.com/search/label/schema.org
Yandex Webmaster
yandex.com/support/webmaster/schema-org/
164. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
A se studia și inițiativa Web Data Commons
extragere cu Common Crawl – commoncrawl.org –
și acces la seturi de date modelate
via microdate HTML5, plus microformate și RDFa
webdatacommons.org/structureddata/