Está en la página 1de 7

Cibernrium

Dossier
Introducci a la programaci web amb HTML5
1-Descripci general d'HTML5:
HTML 5 (HyperText Markup Language, versi 5) s la cinquena revisi major del llenguatge bsic de
la World Wide Web, HTML. HTML 5 especifica dues variants de sintaxis per HTML: un clssic
HTML (text/html), la variant coneguda com HTML5 i una variant XHTML coneguda com a sintaxi
XHTML5 que haur de ser servida com XML (XHTML) (application/xhtml+xml).1 Aquesta s la
primera vegada que HTML i XHTML s'han desenvolupat en parallel.
Cal aclarir que HTML5 segueix en esborrany i ho seguir estant durant alguns anys ms.
L'enfocament general ha canviat bastant respecte a versions anteriors d'HTML, afegint semntica i
accessibilitat implcites, especificant cada detall i esborrant qualsevol ambigitat. Tamb es t en
compte que moltes pgines web actuals sn dinmiques, semblant-se ms a aplicacions que a
documents. Alguna cosa bsica s que HTML5 est definit sobre la base del DOM (la representaci
interna d'una web amb la qual treballa un navegador), deixant de costat la representaci "real",
definint alhora un estndard HTML i XHTML.

2. Compatibilitat de navegadors.
Cada vegada els navegadors sn ms compatibles amb el nou estndard de HTML5, per encara
existeixen petites caracterstiques que no sn compatibles, i caldr comprovar-ho sempre abans de
donar el nostre disseny web basat en HTML5 com a finalitzat.
Existeixen diferents eines web per conixer lestat actual dels navegadors , algunes de les ms
utilitzades sn:
http://caniuse.com
Ens explica per a totes les caracterstiques de HTML5 i de la famlia de HTML5, la compatibilitat amb
tots els navegadors del mercat per a totes les versions daquests navegadors.
http://html5test.com
Aquesta web ens dona una visi real de la compatibilitat del navegador que estem fent servir en el
moment que cridem la web. T en compte tant el S.O. com la versi i marca del navegador.

Copyright o Creative Commons


de Barcelona Activa SAU (exemple)

Hem de tenir sempre en compte que una mateixa web feta amb HTML5 funcionar perfectament
amb una versi actualitzada dun navegador, per que pot no funcionar amb versions anteriors. Per
sol.lucionar aquests problemes, existeixen mtodes que shauran dexecutar per a cada problema
en particular. Es tasca del programador web tenir en compte aquestes particularitats amb
navegadors antics. A internet, podreu trobar la manera de salvar tots aquests problemes. Tamb es
poden fer servir eines web com Modernizr (http://modernizr.com ) per aquest prposit.

3. Estructura bsica, DOCTYPE i jocs de carcters:


En HTML5 en respecte a la versi anterior, shan simplificat moltssim tant la crida al DOCTYPE com
al joc de carcters, fins arribar a minimitzar les al mxim.
En HTML4 una crida al DOCTYPE es feia de 3 maneres diferents, i eren de lestil de:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
En HTML5 noms hi ha una crida, i s:
<!DOCTYPE html>
De la mateixa manera, el charset es simplificar de:
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
A simplement:
<meta charset="UTF-8">

4. Noves etiquetes
Les noves etiquetes dHTML5 sn bsicament per indicar diferncies semntiques i estructurals, es
podrien comparar en molts cassos a <DIV idnova_etiqueta>. Serien les segents:
section representa una secci "general" dins d'un document o aplicaci, com un captol d'un llibre.
Pot contenir subseccions i si ho acompanyem d'h1-h6 podem estructurar millor tota la pgina.
article representa un contingut independent en un document, el cas ms clar sn les entrades d'un
blog o les notcies d'un peridic online. Aix, dins de la portada podrem tenir diversos articles
demarcats semnticament, per la qual cosa una eina pot extreure'ls fcilment.
aside representa un contingut que est molt poc relacionat amb la resta de la pgina, com una barra
lateral. Essencial per delimitar el contingut "important" del contingut "de suport", fent ms cas al
primer que al segon.
Copyright o Creative Commons
de Barcelona Activa SAU (exemple)

header representa la capalera d'una secci, i s de suposar que se li doni ms importncia que a la
resta, sobretot si la secci s un article.
footer representa el peu d'una secci, amb informaci sobre la pgina/secci que poc t a veure
amb el contingut de la pgina, com l'autor, el copyright o l'any.
nav representa una secci dedicada a la navegaci entre el lloc, com la tpica barra superior dels
menus.
Tamb shan afegit les etiquetes <details> <summary> amb les quals es poden fer menus
desplegables, per que ara mateix noms funcionen amb alguns navegadors (com Chrome).

5. Modificat HTML i elements que falten:


No noms shan afegit etiquetes al nou estndard HTML5 sin que moltes altres shan modificat o
shan eliminat definitivament (encara que si es fan servir, els navegadors continuaran reconeixentles).
Seliminen tots els elements purament esttics. A partir dara, TOT es far mitjanant estils amb
CSS3.
Tamb seliminen totes les etiquetes que fan referencia a frames
(<FRAME><FRAMESET><NOFRAME>) exceptuant els <IFRAME>, que es mantenen en HTML5.
Seliminen etiquetes considerades obsoletes, com <ACRONYM> <APPLET> <ISINDEX> <DIR>.
Tamb seliminaran alguns atributs dalgunes etiquetes, per veure un llistat complert de les
modificacions en lestndard. Consultar:
http://es.wikipedia.org/wiki/HTML5

6. Els nous tipus de camps del formulari


En HTML5 tamb safegeixen 3 nous tipus de camp de formulari:
<DATALIST> Permet automatitzar lingrs de dades (llista desplegable) . Reconeix els carcters
introduts i sautocompleta. Si el navegador no ho reconeix, es mostrar un input normal.
<KEYGEN> Es generen dos claus, una pblica i una privada quan fem el submit senvia la clau pblica
al servidor i la privada semmagatzema localment. Es til per institucions que volen validar laccs
dusuaris a informaci privada.
Copyright o Creative Commons
de Barcelona Activa SAU (exemple)

Atributs: challenge (carcters de validaci que senvien amb la clau) i keytype (algoritme
dencriptaci)
<OUTPUT> Mostra el resultat dun clcul realitzat a travs dun script.

7. Tipus de dades i els validadors


L'element input ha estat ampliat i ara permet tots aquests tipus de dades:
datetime, datetime-local, date, month, week, time, per a indicar una data/hora.
number perqu l'usuari indiqui un nombre.
range per indicar un rang entre dos nombres.
email per indicar un correu electrnic.
url per indicar una adrea web.
search per indicar una recerca.
color per indicar un color.
Podem fer servir els atributs requires (si volem que sigui obligatori introduir un valor), autofocus
(perque el cursor es posi a sobre del camp al carregar la pgina), autocomplete i placeholder (text
per defecte.
Tots els nous tipus de dades de formulari, es validaran automticament en prmer el bot de
summit.

8. Els detalls i contingut editable.


Mitjanant el parmetre contentEditable=true podem editar lelement que ho tingui actiu i tots
els seus elements fill
Si volem que tot el document sigui editable, ho podem fer mitjanant designMode al head:
<SCRIPT>
document.designMode = on;
</SCRIPT>

9. Drag-n-drop i l'ortografia
Copyright o Creative Commons
de Barcelona Activa SAU (exemple)

El drag & drop ens permet moure elemnts dintre de la web (exemples de web 2.0 com Google+).
Per definir un element com a draggable haurem de posar el parmetre draggable=true.
Haurem despecificar qu passa quan lelement sagafa a la funci onDragStart= agafar(event); i
definir el tipus de dada i el valor de lelement arrastrat a datatransfer.setData()
Definirem on deixar amb la funci onDragOver=permetreDeixar(event)
Deixarem lelement amb la funci onDrop=deixar()
A classe veurem un exemple prctic de com funcionaria el drag & drop.
Per validar la correcci ortogrfica dun quadre de text, haurem de cridar al parmetre
spellCheck=true

9. Elements d'udio i video, i codecs


Html 5 permet lus delements daudio i video nativament des de la web.
A classe veurem ls de les noves etiquetes <audio> i <video> aix com de tots els seus parmetres
especfics (controls|autoplay|loop|source|poster).
En un futur, es podr fer servir la etiqueta <tracks> on podrem possar subtitles, captions,
descriptors.
Tamb veurem com accedir a la source de lelement daudio o video a partir de javascript.

11. API Steam:


No es funcional al 100%, per en un futur ens permetr enviar audio i video des de la webcam o el
micro per streaming.
Ara mateix lnic que hi ha disponible s per a dispositius mvils. A internet es poden veure vdeos
sobre com est el tema, per exemple:
http://www.youtube.com/watch?v=ySn0dw4j5Q0

12. API SVG


Copyright o Creative Commons
de Barcelona Activa SAU (exemple)

SVG= Scalable Vector Graphics. Els grfics en SVG en 2D es descriuen mitjanant un arxiu XML que
es renderitzat pel SVG viewer.
Mitjanant codi podem representar directament elements SVG tals com circle|rectangle| line|
ellipse| Polygon| Polyline| gradients ...
En HTML 5 podem treballar amb elements SVG de diferents maneres:
-Creant-los directament.
-Enbevent-los en un <OBJECT> ( <OBJECT src=_.svg> )
-Enbevent-lo en un IFRAME.
-Enbevent-los en el src duna <IMG>.
-Com a background (a les CSS) background_image : url(_.svg);
Tots els elements SVG poden modificar-se mitjanant codi js, modificant les seves propietats, per
mantenint sempre la resoluci i la relaci daspecte a lampliar, cosa que ens far triar els SVG en
lloc del CANVAS si volem grfics 2D per imprimir o per ampliar molt.

13. API Canvas


Es fa servir per crear grfics al vol en una web via scripting (js).
Lelement <CANVAS> es noms un contenidor per a grfics
Primer es defineix lelement canvas i posteriorment es dibuixa mitjanant js.
El codi js que es fa servir per dibuixar i modificar elements canvas, ens permet dibuixar shapes,
aplicar estils i colors, fer transformacions, i animacions. A classe veurem diversos exemples senzills
sobre ls de les canvas, tant nativament, com fent-les servir com a contenidor per grfics generats
externament (per Processing, per exemple, mitjanant la llibreria processingjs).

14. Els nous esdeveniments DOM


Amb la nova versi dHTML, podem accedir mitjanant codi javascript a esdeveniments de
lestructura DOM de la nostra plana web.
Ja hem vist anteriorment com saccedeix al DOM de la pgina (per exemple en lapartat de drag &
drop), i en aquest apartat, a classe veurem diferents exemples prctics on integrarem javascript i
laccs al DOM per programar diferents aplicacions senzilles sobre una web en HTML5.
Copyright o Creative Commons
de Barcelona Activa SAU (exemple)

15. Les aplicacions Offline


Grcies a lAPI de cache podrem executar contingut online sense problemes sense connexi, podent
programar aplicacions en HTML5 sense necessitat de pujar les a un servidor.
Per activar el mode offline, haurem de crear una cache al manifest del HTML:
<HTML manifest=cache.manifest>

16. API de geolocalitzaci:


Una de les principals novetats d'HTML5 va ser l'aparici de noves APIs de Javascript que augmenten
la potncia d'aquest llenguatge.
Una d'elles s la nova API de geolocalizaci, que ens permet conixer la ubicaci geogrfica de
l'usuari, sempre que estigui usant un navegador que la tingui implementada i que l'usuari doni el
seu perms.
Encara que la primera impressi sigui que noms ser til per a usuaris de navegadors mbils, la
realitat s que aquest utilitza altres mitjans a ms del GPS per calcular la ubicaci de l'usuari, com
per exemple a travs de la seva adrea IP.
La ubicaci de l'usuari s'obt a travs de la segent funci:
navigator.geolocation.getCurrentPosition(funcExito, funcError, opcions);
La funci intentar obtenir la posici de l'usuari. Si ho aconsegueix cridar a la funci que li passem
com a primer parmetre passant-li un objecte Position amb aquestes dades. Si, per contra, no ho
aconsegueix, cridar a la funci que li passem com a segon parmetre passant-li un objecte
PositionError que indicar la ra per la qual no ho ha aconseguit.
A classe veurem un exemple senzill de com funciona aquesta nova caracterstica.

Copyright o Creative Commons


de Barcelona Activa SAU (exemple)