HTML5

HTML5 茅s l'煤ltima evoluci贸 de la norma que defineix HTML. El terme representa dos conceptes diferents:

  • 脡s una nova versi贸 del llenguatge HTML, amb nous elements, atributs i comportaments,
  • i un ampli conjunt de tecnologies que permet les m茅s diverses i potents aplicacions i llocs web. Aquest conjunt es diu de vegades HTML5 i amics i, sovint escur莽at a simplement HTML5.

Dissenyat per a ser utilitzable per tots els desenvolupadors de la Web Oberta, aquesta p脿gina de refer猫ncia enlla莽a a nombrosos recursos sobre tecnologies HTML5, que es classifiquen en diversos grups segons la seva funci贸.

  • Sem脿ntica: us permet descriure amb major precisi贸 quin 茅s el seu contingut.
  • Connectivitat: us permet comunicar-vos amb el servidor de formes noves i innovadores.
  • Fora de l铆nia i emmagatzematge: permetre que les p脿gines web emmagatzemin les dades localment en el client i funcionin de forma m茅s eficient.
  • Multim猫dia: fer ciutadans de primera classe d'脿udio i v铆deo a la Web Oberta.
  • Gr脿fics i efectes 2D/3D: permetre una gamma molt m茅s 脿mplia d'opcions de presentaci贸.
  • Rendiment i integraci贸: proporcionar una major optimitzaci贸 de la velocitat i un millor 煤s del maquinari de l'equip.
  • Acc茅s al dispositiu: permetre l'煤s de diversos dispositius d'entrada i de sortida..
  • Estil: deixar que els autors escriuen temes m茅s sofisticats.

Sem脿ntIcA

Seccions i esquemes en HTML5
Una ullada als nous elements d'esquema i secci贸 en HTML5: <section>, <article>, <nav>, <header>, <footer> i <aside>.
脷s d'脿udio i v铆deo en HTML5
Els elements <脿udio> i <v铆deo> incrustats, permeten la manipulaci贸 dels nous continguts multim猫dia.
Formularis en HTML5
Una mirada a les millores en els formularis web en HTML5: l'API de validaci贸 restringida, diversos atributs nous, nous valors per l'atribut type de l'element <input>  i l'element nou <output>.
Nous elements sem脿ntics
Al costat dels elements de seccions, de medis i de formularis, hi ha nombrosos elements nous, com <mark>, <figure>, <figcaption>, <data>, <time>, <output>, <progress> o <meter> i <main>, augmentant la quantitat d'elements HTML5 v脿lids.
Millora en {{HTMLElement ("iframe")}}
Utilitzant els atributs sandbox i srcdoc, els autors ara poden ser precisos sobre el nivell de seguretat i la representaci贸 desitjada d'un element <iframe>.
MathML
Permet la incorporaci贸 directa de f贸rmules matem脿tiques.
Introducci贸 a HTML5
Aquest article presenta com indicar al navegador que utilitzeu HTML5 en el vostre disseny web o una aplicaci贸 web.
Analitzador HTML5 compatible
L'analitzador, que converteix els bytes d'un document HTML en un DOM, s'ha ampliat i ara defineix amb precisi贸 el comportament d'utilitzar en tots els casos, fins i tot quan s'enfronten amb HTML v脿lid. Aix貌 condueix a una major previsibilitat i interoperabilitat entre els navegadors compatibles amb HTML5.

Conectivitat

Web Sockets
Permet la creaci贸 d'una connexi贸 permanent entre la p脿gina i el servidor i l'intercanvi de dades no HTML a trav茅s d'aquest mitj脿.
Esdeveniments enviats pel servidor
Permet a un servidor enviar esdeveniments a un client, en lloc del paradigma cl脿ssic en qu猫 el servidor podria enviar les dades nom茅s en resposta a la petici贸 d'un client.
WebRTC
Aquesta tecnologia, on RTC 茅s sin貌nim de comunicaci贸 en temps real, permet la connexi贸 amb altres persones i el control de la videoconfer猫ncia directament en el navegador, sense necessitat d'un complament o una aplicaci贸 externa.

Sense connexi贸 & emmagatzematge

Recursos sense connexi贸: El cau de l'aplicaci贸
Firefox 茅s totalment compatible amb l'especificaci贸 de recursos sense connexi贸 d'HTML5. La majoria dels altres recursos sense connexi贸 tenen suport en un cert nivell.
Esdeveniments amb i sense connexi贸
Firefox 3 suporta WHATWG, esdeveniments amb i sense connexi贸, que permeten a les aplicacions i extensions detectar si hi ha o no una connexi贸 a Internet, aix铆 com tambien, detectar quan la connexi贸 es perd o es recupera.
WHATWG sessi贸 del costat client i emmagatzamatge continu (emmagatzamatge DOM)
Sessi贸 del costat client i l'emmagatzematge continu permet a les aplicacions web emmagatzemar dades estructurades al costat del client.
IndexedDB
IndexedDB 茅s un est脿ndard web per a l'emmagatzematge de grans quantitats de dades estructurades en el navegador i per a les recerques d'alt rendiment d'aquestes dades mitjan莽ant 铆ndexs .
脷s d'arxius des d'aplicacions web
El suport per a la nova API d'arxius d'HTML5 ha estat afegit a Gecko, per la qual cosa 茅s possible que les aplicacions d'Internet accedeixin als arxius locals seleccionats per l'usuari. Aix貌 inclou el suport per a la selecci贸 de diversos arxius utilitzant l'element HTML <input> de type file amb el nou atribut multiple. Tamb茅 hi ha FileReader.

Multim猫dia

L'煤s 脿udio i v铆deo en HTML5
Els elements <audio> i <video> incrustats permeten la manipulaci贸 dels nous continguts multim猫dia.
WebRTC
Aquesta tecnologia, on RTC 茅s sin貌nim de comunicaci贸 en temps real, permet la connexi贸 amb altres persones i el control de la videoconfer猫ncia directament en el navegador, sense necessitat d'un complement o una aplicaci贸 externa.
脷s de l'API de la c脿mera
Permet utilitzar, manipular i emmagatzemar una imatge des de la c脿mera de l'ordinador.
Pista i WebVTT
L'element <track> permet subt铆tols i cap铆tols. WebVTT 茅s un format de pista de text.

Gr脿fics i efectes 3D

Tutorial Canvas
Aprendre sobre el nou element <canvas> i com dibuixar gr脿fics i altres objectes en Firefox.
API de text HTML5 per elements <canvas>
L'API de text HTML5 茅s ara compatible amb elements <canvas>..
WebGL
WebGL porta gr脿fics en 3D a la web mitjan莽ant la introducci贸 d'una API que s'ajusta estretament a OpenGL 脡S 2.0 que pot ser utilitzat en elements HTML5 <canvas>.
SVG
Un format basat en XML d'imatges vectorials que pot ser directament incrustat en el codi HTML.

Rendiment i Integraci贸

Web Workers
Permet delegar l'avaluaci贸 de JavaScript a subprocessos en segon pla, permetent que aquestes activitats evitin alentir esdeveniments interactius.
XMLHttpRequest nivell 2
Permet anar a buscar de forma as铆ncrona algunes parts de la p脿gina, la qual cosa li permet mostrar contingut din脿mic, variant segons el temps i les accions de l'usuari. Aquesta 茅s la tecnologia que hi ha darrere d'Ajax.
Motors JavaScript un compilador JIT
La nova generaci贸 de motors de JavaScript s贸n molt m茅s potents, el que porta a un major rendiment.
API historial
Permet la manipulaci贸 del hist貌rial del navegador. Aix貌 茅s especialment 煤til per a les p脿gines que carreguen interactivament nova informaci贸.
L'atribut contentEditable: Transformeu el vostre lloc web en una wiki!
HTML5 ha estandarditzat l'atribut contentEditable. M茅s informaci贸 sobre aquesta caracter铆stica.
Arrosegar i deixar anar
El API d'arrossegar i deixar anar d'HTML5 permet el suport per arrossegar i deixar anar elements dins i entre llocs web. Aix貌 tamb茅 proporciona una API senzilla per a l'煤s d'extensions i aplicacions basats en Mozilla.
Gesti贸 del focus en HTML
Els nous atributs d'HTML5 activeElement i hasFocus s贸n compatibles.
Controladors de protocols basats en la Web
Ara podeu registrar aplicacions web com controladors de protocol utilitzant el m猫tode navigator.registerProtocolHandler().
requestAnimationFrame
Permet controlar les animacions de renderitzat per obtenir un rendiment 貌ptim.
API Pantalla completa
Controla l'煤s de tota la pantalla per a una p脿gina Web o aplicaci贸, sense que es mostri la interf铆cie d'usuari del navegador.
API Bloqueig del punter
Permet bloquejar el punter al contingut, de manera que els jocs i aplicacions similars no perdin el focus quan el punter arriba al l铆mit de la finestra.
Esdeveniments amb l铆nia i sense l铆nia
Amb la finalitat de construir una bona aplicaci贸 web sense connexi贸, necessiteu saber quan la vostra aplicaci贸 est脿 realment fora de l铆nia. Per cert, tamb茅 necessiteu saber quan la vostra aplicaci贸 ha tornat a un estat en l铆nia de nou.

acc茅s al dispositiu

脷s de l'API de la c脿mera
Permet utilitzar, manipular i emmagatzemar una imatge des de la c脿mera de l'ordinador.
Esdeveniments t脿ctils
Manipuladors per reaccionar als esdeveniments creats per un usuari pressionant pantalles t脿ctils.
脷s de la geolocalitzaci贸
Permet als navegadors localitzar la posici贸 de l'usuari mitjan莽ant la geolocalitzaci贸.
Detecci贸 de l'orientaci贸 del dispositiu
Obtenir la informaci贸 quan el dispositiu en el qual s'executa el navegador canvia l'orientaci贸. Aix貌 pot ser usat com un dispositiu d'entrada (per exemple, per fer jocs que reaccionen a la posici贸 del dispositiu) o per adaptar el disseny d'una p脿gina a l'orientaci贸 de la pantalla (vertical o horitzontal)..
API Bloqueig del punter
Permet bloquejar el punter al contingut, de manera que els jocs i aplicacions similars no perdin el focus quan el punter arriba al l铆mit de la finestra.

ESTIL

CSS s'ha ampliat per ser capa莽 de poder donar estil als elements en una forma molt m茅s complexa. Aix貌 es coneix com CSS3, encara que CSS no 茅s una especificaci贸 monol铆tica i els diferents m貌duls no estan tots en el nivell 3: alguns s贸n en el nivell 1 i altres al nivell 4, amb tots els nivells intermedis coberts.

Noves caracter铆stiques d'estil de fons
Ara 茅s possible posar una ombra a una caixa, mitjan莽ant box-shadow i es poden configurar diversos fons.
M茅s vores de luxe
No nom茅s ara 茅s possible usar imatges per a l'estil de vores, usant border-image i les seves propietats associades, tamb茅 les vores arrodonides s贸n suportades a trav茅s de la propietat border-radius.
Animaci贸 del vostre estil
Usant CSS Transitions per animar entre diferents estats o usar CSS Animations per animar parts de la p脿gina sense un esdeveniment desencadenant, ara podeu controlar elements m貌bils en la vostra p脿gina.
Tipografia millorada
Els autors tenen un millor control per arribar a una millor tipografia. Poden controlar text-overflow i la separaci贸 de s铆l路labes (hyphenation), per貌 tamb茅 poden afegir una ombra (shadow) a ella o controlar amb m茅s precisi贸 les seves decoracions (decorations). Tipus de lletra personalitzades poden ser descarregades i aplicades gr脿cies a la nova regla @ font-face.
Nous dissenys de presentaci贸
Per tal de millorar la flexibilitat dels dissenys, s'han afegit dos nous dissenys: el CSS multi-column layouts i CSS flexible box layout.