html5 în xxx de minute
TRANSCRIPT
![Page 1: HTML5 în XXX de minute](https://reader034.vdocuments.site/reader034/viewer/2022042701/55a666271a28abcc1b8b47fb/html5/thumbnails/1.jpg)
Dr. Sabin BuragaFacultatea de Informatică, Universitatea „Alexandru Ioan Cuza” Iași
www.purl.org/net/busaco @busaco4web
HTML5în <abbr title="30">XXX</abbr> de minute
![Page 2: HTML5 în XXX de minute](https://reader034.vdocuments.site/reader034/viewer/2022042701/55a666271a28abcc1b8b47fb/html5/thumbnails/2.jpg)
dezvoltarea aplicațiilor Web
aplicație Web = interfață + program + conținut (date)
Internet(Web)
⌚
⎚
![Page 3: HTML5 în XXX de minute](https://reader034.vdocuments.site/reader034/viewer/2022042701/55a666271a28abcc1b8b47fb/html5/thumbnails/3.jpg)
dezvoltarea aplicațiilor Web
aplicație Web = interfață + program + conținut (date)
la nivel de client (front-end) și/sau server (back-end)
Internet(Web)
⌚
⎚
![Page 4: HTML5 în XXX de minute](https://reader034.vdocuments.site/reader034/viewer/2022042701/55a666271a28abcc1b8b47fb/html5/thumbnails/4.jpg)
Cum publicăm pe Web?
☸♛⌬❁♨
Cum punem la dispoziția utilizatorilorresurse de interes?
![Page 5: HTML5 în XXX de minute](https://reader034.vdocuments.site/reader034/viewer/2022042701/55a666271a28abcc1b8b47fb/html5/thumbnails/5.jpg)
Recurgând la o modalitatede structurare și de prezentare a datelor
![Page 6: HTML5 în XXX de minute](https://reader034.vdocuments.site/reader034/viewer/2022042701/55a666271a28abcc1b8b47fb/html5/thumbnails/6.jpg)
Reprezentări (textuale) ale resurselor Web
date procesabile, disponibile în formate precum HTML, SVG, RSS, JSON, CSV, TXT etc.
![Page 7: HTML5 în XXX de minute](https://reader034.vdocuments.site/reader034/viewer/2022042701/55a666271a28abcc1b8b47fb/html5/thumbnails/7.jpg)
Reprezentări (textuale) ale resurselor Web
identificate pe baza unui URL(Uniform Resource Locator)
http://www.slideshare.com/busaco/presentations/
https://twitter.com/alecsandru
![Page 8: HTML5 în XXX de minute](https://reader034.vdocuments.site/reader034/viewer/2022042701/55a666271a28abcc1b8b47fb/html5/thumbnails/8.jpg)
Reprezentări (textuale) ale resurselor Web
accesate via un protocol
HTTP (HyperText Transfer Protocol)
![Page 9: HTML5 în XXX de minute](https://reader034.vdocuments.site/reader034/viewer/2022042701/55a666271a28abcc1b8b47fb/html5/thumbnails/9.jpg)
Pentru Web, vom folosilimbaj(e) de marcare (mark-up languages)
</>
![Page 10: HTML5 în XXX de minute](https://reader034.vdocuments.site/reader034/viewer/2022042701/55a666271a28abcc1b8b47fb/html5/thumbnails/10.jpg)
HTML
hipsters’hyperhilarious
tax-freetexttags
mesmerizingmarkupmystic
laughlanguagelure
![Page 11: HTML5 în XXX de minute](https://reader034.vdocuments.site/reader034/viewer/2022042701/55a666271a28abcc1b8b47fb/html5/thumbnails/11.jpg)
lingua franca a Web-uluiSGMLHTML 2.0HTML 3.2
HTML 4.01XHTML 1.0HTML 5HTML 5.1…
![Page 12: HTML5 în XXX de minute](https://reader034.vdocuments.site/reader034/viewer/2022042701/55a666271a28abcc1b8b47fb/html5/thumbnails/12.jpg)
documente HTML pagini Web
fișiere text .html
scrise manual de utilizator
editor de cod-sursă – exemple: Atom, Sublime Text etc.mediu de dezvoltare Web – e.g., Eclipse, Visual Studio
aplicație online – exemplificări: c9.io, Codepen, JS Bin,…
![Page 13: HTML5 în XXX de minute](https://reader034.vdocuments.site/reader034/viewer/2022042701/55a666271a28abcc1b8b47fb/html5/thumbnails/13.jpg)
documente HTML pagini Web
generate de un program
la nivel de client – cu JavaScript
eventual, folosind o bibliotecă: Angular, D3.js, jQuery, React,…
![Page 14: HTML5 în XXX de minute](https://reader034.vdocuments.site/reader034/viewer/2022042701/55a666271a28abcc1b8b47fb/html5/thumbnails/14.jpg)
documente HTML pagini Web
generate de un program
la nivel de serveruzual, via un server de aplicații Web
+ un cadru de lucru (framework) specific
limbaje: C#, Java, JavaScript, PHP, Python, Ruby, Scala,…soluții: ASP.NET MVC, Laravel, Node.js, Play, Rails etc.
![Page 15: HTML5 în XXX de minute](https://reader034.vdocuments.site/reader034/viewer/2022042701/55a666271a28abcc1b8b47fb/html5/thumbnails/15.jpg)
Format bazat pe marcatori(adnotări, mark-ups, elemente)
<!DOCTYPE html><html> <!-- început de doc. (element obligatoriu) -->
<!-- început de antet (tag de început) --><head>... <!-- includere de stiluri CSS, meta-date etc. --></head> <!-- sfârșit de antet (tag de final) -->
<!-- început de corp: date propriu-zise --><body>... <!-- conținut redat de browser --></body> <!-- sfârșit de corp -->
</html> <!-- sfârșit de document -->
![Page 16: HTML5 în XXX de minute](https://reader034.vdocuments.site/reader034/viewer/2022042701/55a666271a28abcc1b8b47fb/html5/thumbnails/16.jpg)
Lista elementelor HTML
referitoare la antetul documentului (head):
html
head title base link
meta
style
script noscript
![Page 17: HTML5 în XXX de minute](https://reader034.vdocuments.site/reader034/viewer/2022042701/55a666271a28abcc1b8b47fb/html5/thumbnails/17.jpg)
Lista elementelor HTML
vizând structura (sections):
body
article nav aside section
header footer
h1—h6
mainaddress
![Page 18: HTML5 în XXX de minute](https://reader034.vdocuments.site/reader034/viewer/2022042701/55a666271a28abcc1b8b47fb/html5/thumbnails/18.jpg)
Lista elementelor HTML
grupare (grouping):
p
hr
pre blockquote
ol ul li
dl dt dd
figure figcaption
div
![Page 19: HTML5 în XXX de minute](https://reader034.vdocuments.site/reader034/viewer/2022042701/55a666271a28abcc1b8b47fb/html5/thumbnails/19.jpg)
Lista elementelor HTML
tabele (tables):
table
caption
thead tbody tfoot
tr th td
col colgroup
![Page 20: HTML5 în XXX de minute](https://reader034.vdocuments.site/reader034/viewer/2022042701/55a666271a28abcc1b8b47fb/html5/thumbnails/20.jpg)
Lista elementelor HTML
formulare (Web forms):
form
fieldset legend label
input button
select datalist optgroup option
textarea
keygen output
progress meter
![Page 21: HTML5 în XXX de minute](https://reader034.vdocuments.site/reader034/viewer/2022042701/55a666271a28abcc1b8b47fb/html5/thumbnails/21.jpg)
Lista elementelor HTML
alte conținuturi inserate (embedded):
img
iframe
embed object param
video audio track source
canvas
map
area
![Page 22: HTML5 în XXX de minute](https://reader034.vdocuments.site/reader034/viewer/2022042701/55a666271a28abcc1b8b47fb/html5/thumbnails/22.jpg)
Lista elementelor HTML
privind datele textuale (text-level):
a
em strong
abbr
q cite dfn
sub sup
![Page 23: HTML5 în XXX de minute](https://reader034.vdocuments.site/reader034/viewer/2022042701/55a666271a28abcc1b8b47fb/html5/thumbnails/23.jpg)
Lista elementelor HTML
privind datele textuale (text-level 2):
time
code kbd samp var mark
bdi bdo
ruby rt rp
span
br
wbr
![Page 24: HTML5 în XXX de minute](https://reader034.vdocuments.site/reader034/viewer/2022042701/55a666271a28abcc1b8b47fb/html5/thumbnails/24.jpg)
http://jsbin.com/yurecuwuye/
![Page 25: HTML5 în XXX de minute](https://reader034.vdocuments.site/reader034/viewer/2022042701/55a666271a28abcc1b8b47fb/html5/thumbnails/25.jpg)
<a href="http://www.infoiasi.ro/" title="…">FII</a>
tag de început tag de sfârșit
atributadresă Web (URL)
posibilitatea de a interacționa – via HTTP sau alte protocoale de comunicație – cu resurse disponibile local
ori la distanță (oferite de alte situri/aplicații Web)
„pânze” (web-uri) de resurse interconectate
![Page 26: HTML5 în XXX de minute](https://reader034.vdocuments.site/reader034/viewer/2022042701/55a666271a28abcc1b8b47fb/html5/thumbnails/26.jpg)
spațiile albe nu au semnificație
![Page 27: HTML5 în XXX de minute](https://reader034.vdocuments.site/reader034/viewer/2022042701/55a666271a28abcc1b8b47fb/html5/thumbnails/27.jpg)
marcatorii trebuie să fie închișiși să se împerecheze corect!
<div><q>We don't need no education</div></q>
greșit!
![Page 28: HTML5 în XXX de minute](https://reader034.vdocuments.site/reader034/viewer/2022042701/55a666271a28abcc1b8b47fb/html5/thumbnails/28.jpg)
valorile atributelor trebuie încadrate de ghilimele sau apostrofuri
<form action=proc.php method="GET'><label for=căutare">Caută:</label>
<input type=search placeholder= /></form>
eronat!
![Page 29: HTML5 în XXX de minute](https://reader034.vdocuments.site/reader034/viewer/2022042701/55a666271a28abcc1b8b47fb/html5/thumbnails/29.jpg)
incorectitudinile sintactice/semanticenu vor fi semnalate de navigatorul Web
![Page 30: HTML5 în XXX de minute](https://reader034.vdocuments.site/reader034/viewer/2022042701/55a666271a28abcc1b8b47fb/html5/thumbnails/30.jpg)
HyperText Markup Language
versiunea actuală: HTML5
standard al Consorțiului Web (octombrie 2014)
http://www.w3.org/html/
![Page 31: HTML5 în XXX de minute](https://reader034.vdocuments.site/reader034/viewer/2022042701/55a666271a28abcc1b8b47fb/html5/thumbnails/31.jpg)
aabbr
addressarea
articleasideaudio
bbasebdibdo
blockquotebody
brbuttoncanvascaption
citecodecol
colgroup
datadatalist
dddeldfndivdldtem
embedfieldset
figcaptionfigurefooterform
h1—h6head
headerhr
htmli
iframeimg
inputinskbd
keygenlabel
legendli
linkmainmapmarkmetameternav
noscriptobject
oloptgroup
option
outputp
parampre
progressqrbrprt
rtcruby
ssampscript
sectionselectsmall
sourcespan
strongstyle
subsup
tabletbody
tdtemplatetextarea
tfootth
theadtimetitletr
trackuul
varvideowbr
elementele HTML5 – de consultat http://html5doctor.com/
![Page 32: HTML5 în XXX de minute](https://reader034.vdocuments.site/reader034/viewer/2022042701/55a666271a28abcc1b8b47fb/html5/thumbnails/32.jpg)
Câteva detalii despre noile elemente HTML5?
⧉⎔⍝ ⵄ✷
![Page 33: HTML5 în XXX de minute](https://reader034.vdocuments.site/reader034/viewer/2022042701/55a666271a28abcc1b8b47fb/html5/thumbnails/33.jpg)
Noi elemente de structurare (secțiuni)
article, nav, aside, section, header, footer
![Page 34: HTML5 în XXX de minute](https://reader034.vdocuments.site/reader034/viewer/2022042701/55a666271a28abcc1b8b47fb/html5/thumbnails/34.jpg)
<!DOCTYPE html><html>
<head><title>Titlu glorios al paginii sau aplicației Web</title><link rel="stylesheet" type="text/css" href="stiluri.css" /><meta charset="utf-8" />
</head> <body>
<header><h1>Titlu principal</h1><p class="slogan">...</p>
</header><article><nav class="menu">
<a href="...">Undeva</a> * <a href="...">Altundeva</a></nav><section>
<p>ceva aparent interesant?!</p><aside>informații adiționale</aside>
</section><section>...</section>
</article><footer><h6>Ultima actualizare, autorul, termeni legali,...</h6>
</footer></body>
</html>vezi și https://w3c.github.io/elements-of-html/
![Page 35: HTML5 în XXX de minute](https://reader034.vdocuments.site/reader034/viewer/2022042701/55a666271a28abcc1b8b47fb/html5/thumbnails/35.jpg)
„Scufundarea” altor tipuri de conținuturiîntr-un document HTML
conținut grafic – raster și/sau vectorialconținut sonorconținut video
![Page 36: HTML5 în XXX de minute](https://reader034.vdocuments.site/reader034/viewer/2022042701/55a666271a28abcc1b8b47fb/html5/thumbnails/36.jpg)
Conținut grafic vectorialspecificat prin SVG (Scalable Vector Graphics)
un limbaj descriptiv bazat pe XML
http://www.w3.org/Graphics/SVG/
https://developer.mozilla.org/docs/Web/SVG
![Page 37: HTML5 în XXX de minute](https://reader034.vdocuments.site/reader034/viewer/2022042701/55a666271a28abcc1b8b47fb/html5/thumbnails/37.jpg)
un experiment de editare on-line cu instrumentul JS Binincluderea de marcaje SVG direct în documentul HTML5
exemple demonstrative la http://svg-wow.org/
![Page 38: HTML5 în XXX de minute](https://reader034.vdocuments.site/reader034/viewer/2022042701/55a666271a28abcc1b8b47fb/html5/thumbnails/38.jpg)
Alături de elementele img, iframe, embed și object,sunt permise audio, video, source și track
pentru a încorpora resurse multimediaîntr-o pagină Web
![Page 39: HTML5 în XXX de minute](https://reader034.vdocuments.site/reader034/viewer/2022042701/55a666271a28abcc1b8b47fb/html5/thumbnails/39.jpg)
<!-- prezentarea lui Rufus Pollock despre datele deschise --><section id="tutorial">
<p>Open Data: Where We Are and Where We're Going</p><video src="http://videolectures.net/dataforum2012_pollock_open_data/"> <track kind="subtitles" src="..." srclang="en"
label="English" /> <track kind="captions" src="..." srclang="en"
label="English for the Hard of Hearing" /> <track kind="subtitles" src="..." srclang="ro"
label="Românește" /> </video>
</section>
codec-uri uzuale pentru facilitarea redării:H.264 (MP4, comercial) – www.h264info.com
OGG (open-source) – www.xiph.org/ogg/
WebM (open-source) – www.webmproject.org
Opus (specificație liberă) – http://tools.ietf.org/html/rfc6716
![Page 40: HTML5 în XXX de minute](https://reader034.vdocuments.site/reader034/viewer/2022042701/55a666271a28abcc1b8b47fb/html5/thumbnails/40.jpg)
canvas
generarea dinamică – via JavaScript –de conținut grafic 2D
dependent de rezoluția curentă
![Page 41: HTML5 în XXX de minute](https://reader034.vdocuments.site/reader034/viewer/2022042701/55a666271a28abcc1b8b47fb/html5/thumbnails/41.jpg)
Sabin Buraga < [email protected] >
o suită de tutoriale:www.html5canvastutorials.com
vezi și https://developer.mozilla.org/docs/Web/API/Canvas_API
![Page 42: HTML5 în XXX de minute](https://reader034.vdocuments.site/reader034/viewer/2022042701/55a666271a28abcc1b8b47fb/html5/thumbnails/42.jpg)
canvas
alternativă de redare:conținut grafic 3D pe baza WebGL
![Page 43: HTML5 în XXX de minute](https://reader034.vdocuments.site/reader034/viewer/2022042701/55a666271a28abcc1b8b47fb/html5/thumbnails/43.jpg)
mediu Web de dezvoltare: http://webglplayground.net/
resurse: https://developer.mozilla.org/docs/Web/WebGL
WebGLîn conjuncție cu jQuery
![Page 44: HTML5 în XXX de minute](https://reader034.vdocuments.site/reader034/viewer/2022042701/55a666271a28abcc1b8b47fb/html5/thumbnails/44.jpg)
Noi tipuri de câmpuri ale formularelor Web
alături de text, password, checkbox, radio, file, hidden, button, image, submit se pot folosi
color, email, tel, number, range, date, time, url,…
<input type="date" max="2000-12-31" name="aniversare" /><input type="range" min="1" max="7" step="2"
name="premii" /><input type="color" name="culoare" /><input type="search" pattern="[A-Za-z]+"
placeholder="Caută cadouri..." />
nu există încă suport complet pentru toate tipurile de controale de interacțiune
![Page 45: HTML5 în XXX de minute](https://reader034.vdocuments.site/reader034/viewer/2022042701/55a666271a28abcc1b8b47fb/html5/thumbnails/45.jpg)
Instrumente software de interes?
✐☑ ☂
![Page 46: HTML5 în XXX de minute](https://reader034.vdocuments.site/reader034/viewer/2022042701/55a666271a28abcc1b8b47fb/html5/thumbnails/46.jpg)
inspectarea codului HTML via instrumentele pentru dezvoltatorii Web oferite de orice browser modern
![Page 47: HTML5 în XXX de minute](https://reader034.vdocuments.site/reader034/viewer/2022042701/55a666271a28abcc1b8b47fb/html5/thumbnails/47.jpg)
validarea documentelor HTML5 (testarea corectitudinii la nivel de sintaxă)
validator.w3.org
![Page 48: HTML5 în XXX de minute](https://reader034.vdocuments.site/reader034/viewer/2022042701/55a666271a28abcc1b8b47fb/html5/thumbnails/48.jpg)
testarea suportului HTML5 oferit de browser
html5test.com
caniuse.com – situația curentă vizând implementarea unor specificații de către navigatoarele Web
![Page 49: HTML5 în XXX de minute](https://reader034.vdocuments.site/reader034/viewer/2022042701/55a666271a28abcc1b8b47fb/html5/thumbnails/49.jpg)
Până la urmă, ce înseamnă HTML5?
![Page 50: HTML5 în XXX de minute](https://reader034.vdocuments.site/reader034/viewer/2022042701/55a666271a28abcc1b8b47fb/html5/thumbnails/50.jpg)
“HTML5 should not be considered as a whole. You should cherry-pick the technology
that suits the solution to your problem.”Remy Sharp
![Page 51: HTML5 în XXX de minute](https://reader034.vdocuments.site/reader034/viewer/2022042701/55a666271a28abcc1b8b47fb/html5/thumbnails/51.jpg)
vocabular (set de elemente + atribute)folosit pentru marcarea paginilor Web
+suită de interfețe de programare (API)facilitând procesarea documentelor
la nivelul navigatorului Web – desktop, mobil,…
![Page 52: HTML5 în XXX de minute](https://reader034.vdocuments.site/reader034/viewer/2022042701/55a666271a28abcc1b8b47fb/html5/thumbnails/52.jpg)
scop: dezvoltarea standardizată de aplicații Web
recurge la tehnologii înrudite referitoare la:prezentare via foi de stiluri în cascadă – CSS
model conceptual – DOMprocesare la nivel de navigator Web – JavaScript
…și altele
![Page 53: HTML5 în XXX de minute](https://reader034.vdocuments.site/reader034/viewer/2022042701/55a666271a28abcc1b8b47fb/html5/thumbnails/53.jpg)
Care-s posibilitățile de documentare privind HTML5?
♚✂☄❤♻
![Page 54: HTML5 în XXX de minute](https://reader034.vdocuments.site/reader034/viewer/2022042701/55a666271a28abcc1b8b47fb/html5/thumbnails/54.jpg)
http://profs.info.uaic.ro/~busaco/teach/
materiile vizând tehnologiile Webinițiate și predate de Sabin Buraga
Facultatea de Informatică, UAIC Iași
![Page 55: HTML5 în XXX de minute](https://reader034.vdocuments.site/reader034/viewer/2022042701/55a666271a28abcc1b8b47fb/html5/thumbnails/55.jpg)
Mozilla Developer Network (MDN) – developer.mozilla.org
![Page 56: HTML5 în XXX de minute](https://reader034.vdocuments.site/reader034/viewer/2022042701/55a666271a28abcc1b8b47fb/html5/thumbnails/56.jpg)
M. Pilgrim et al., Dive into HTML5 – http://diveintohtml5.org/
![Page 57: HTML5 în XXX de minute](https://reader034.vdocuments.site/reader034/viewer/2022042701/55a666271a28abcc1b8b47fb/html5/thumbnails/57.jpg)
DevDocs – http://devdocs.io/
![Page 58: HTML5 în XXX de minute](https://reader034.vdocuments.site/reader034/viewer/2022042701/55a666271a28abcc1b8b47fb/html5/thumbnails/58.jpg)
HTML5 Rocks – html5rocks.com
![Page 59: HTML5 în XXX de minute](https://reader034.vdocuments.site/reader034/viewer/2022042701/55a666271a28abcc1b8b47fb/html5/thumbnails/59.jpg)
HTML5 Weekly – http://html5weekly.com/
![Page 60: HTML5 în XXX de minute](https://reader034.vdocuments.site/reader034/viewer/2022042701/55a666271a28abcc1b8b47fb/html5/thumbnails/60.jpg)
Dr. Sabin BuragaFacultatea de Informatică, Universitatea „Alexandru Ioan Cuza” Iași
www.purl.org/net/busaco @busaco4web
+ + =
Mult succes!