Immergiti nel test HTML5. Il passato, il presente e il futuro delle applicazioni di archiviazione Web
Immergiti nel test HTML5. Il passato, il presente e il futuro delle applicazioni di archiviazione Web
27.03.2019Windows Phone
Guida dettagliata su tutte le innovazioni dello standard HTML5. Mostra come utilizzare le nuove tecnologie nello sviluppo Web funzionalità, che si apre quando si utilizza HTML5. Ce ne sono molti semplici e comprensibili esempi pratici, che ti consente di utilizzare il markup HTML5 per aggiungere grafica, audio, video, capacità autonome e molto altro ancora.
Recensioni:
Se ti immergi, non dimenticare la muta!
C'è l'idea su Internet che "Dive into HTML5" sia un libro di riferimento per qualsiasi progettista di layout e sviluppatore web. Ovviamente non sono passato e l'ho conosciuto. Posso dire che il libro è per veri appassionati del web. Questa non è una recensione o un salto in alto, ma una vera e propria immersione! Pertanto, devi essere preparato per questo.
Se sei un principiante assoluto, questo libro non fa per te, altrimenti risulterà noioso o incomprensibile, o forse entrambe le cose allo stesso tempo. Coloro che hanno superato questa fase e sono stanchi delle storie banali: sono tutti qui! Una bella idea che mi è venuta in mente e di cui ho approfittato è quella di leggere non solo la sezione che ti interessa e ogni funzione/elemento in essa contenuta, ma anche parallelamente la documentazione come supplemento. La conoscenza diventerà più forte e più stabile. E ora le mie conclusioni riguardo al libro nel suo insieme.
Pro:
1. Ho visto come tutto appare “dall'interno”;
2. Ho scoperto il segreto della citazione “640 KB bastano per tutti”;
3. Grande quantità“informazioni storiche” (è improbabile che aiuti nella pratica, ma amplierà sicuramente i tuoi orizzonti);
Tra gli aspetti negativi:
1. Le tabelle di supporto delle funzioni HTML5 non sono aggiornate; se necessario, è meglio utilizzare il riferimento online.
2. Secondo la documentazione web, i microdati sono irrimediabilmente obsoleti e non vengono più utilizzati browser moderni. Quindi puoi tranquillamente saltare il Capitolo 10 a meno che tu non sia interessato a come funzionano i microdati.
4. Nella versione russa del libro della casa editrice “BHV-Petersburg” (2011), sfortunatamente, la traduzione è piuttosto approssimativa e ci sono errori di battitura. Dalla frase sull'art. 68, che recita "...non ci sarà alcuna fuga di informazioni sul referrer", ho solo gridato.
Dopo aver letto il libro fino alla fine, sono sicuro che avrai ancora il desiderio di saperne di più sullo sviluppo web. E altri libri ti aiuteranno in questo. Maggiori dettagli su livelib.ru:
Ti è piaciuto l'articolo o il libro? Condividi con i tuoi amici:
Tutti i libri presentati sul sito sono solo a scopo informativo.
Qualsiasi utilizzo da parte tua è consentito solo a scopo informativo. Se prevedi di utilizzarli in futuro, devi acquistarli dai detentori del copyright. L'amministrazione del sito non è responsabile del loro utilizzo. A giudicare dalla maggior parte dei riferimenti HTML5Test (ulteriore h5t ), quindi la maggior parte degli utenti questa prova
sono più interessati al risultato finale (somma dei punti), come indicatore a cui fare riferimento e confronto, piuttosto che all'essenza interiore del risultato ottenuto.
Nel linguaggio comune, questo si chiama grasso della pancia e, come giustamente notato circa un anno fa su Lenta.ru (vedi sotto), "il cui HTML5 è più lungo".
Esempi
Cominciamo con Lenta.ru, ecco un riferimento al test di un anno fa, quando è apparso per la prima volta: Abbiamo controllato i browser. per la compatibilità con lo standard web più recente
A marzo è apparso su Internet il sito web html5test.com che, come suggerisce il nome, verifica quanto un determinato browser è pronto a funzionare con il nuovo standard web estremamente promettente HTML5.
Questa riga indica quante delle 384 pagine il browser ha visualizzato senza errori.
300 delle 384 pagine sono risultati del test HTML5, il significato delle restanti 84 non è specificato. :)
Come ulteriori dettagli interessanti:
Come è di moda (e probabilmente conveniente) oggigiorno, il test viene sviluppato come parte di un progetto speciale su Github. Lì puoi anche trovare informazioni su bug aperti e già risolti o aspetti controversi del test.
Nella pagina di test, Niels ringrazia Henri Sivonen per aver reso possibile l'utilizzo dei suoi test di analisi HTML5 e le altre persone che hanno contribuito.
Collegamento con organizzazioni che promuovono gli standard web
Per quanto ne so, nessun produttore di browser ha comunicazioni ufficiali che facciano riferimento a h5t come criterio per il supporto HTML5. (Ok, tranne quello del predicatore di Mozilla Paul Rouget riguardo IE9 vs. Fx4.0.)
La struttura interna del test è rintracciabile sia direttamente dal codice della pagina che dai sorgenti su github. A differenza di Acid3, h5t non ne comporta la generazione bella immagine, - soltanto risultato complessivo sotto forma di punteggi e dettagli del test.
La prova consiste in:
Pagine di prova (layout e stili)
Un motore per testare, raccogliere risultati e visualizzarli sulla pagina
Testare direttamente i set e testarli al loro interno.
Motore da testare
Il motore di test è composto da diversi funzioni chiave(oggetti):
startTest: avvia il processo di test. Un dettaglio interessante: per ottenere statistiche, html5test accumula i risultati dei test superati dagli utenti tramite l'API BrowserScope.
test: contiene un elenco di suite di test, scorre ciascuna suite e raccoglie i risultati Semplificato, l'esecuzione di un test si presenta così:
Inizializza: funzione (e, t, c) ( var r = nuovi risultati(e, t);
for (g in questo .suites) ( r.createSuite(questo .suites[g].title);
for (s in this .suites[g].sections) ( nuovo (questo .suites[g].sections[s])(r);
}
}
C(r);
}
}
Ciascuna delle funzioni con test suite riceve un collegamento a un oggetto risultati in cui devono essere inseriti i risultati del test.
risultati - genera una rappresentazione esterna basata sui risultati ottenuti
sezione, gruppo e articolo - rappresentazione logica raggruppamenti di test (utilizzati durante la generazione e la visualizzazione dei risultati)
dati e funzioni ausiliari:
iOS e Android: necessari in uno dei test (vedi sotto)
isEventSupported: controlla se il browser supporta l'evento corrispondente
getRenderedStyle: recupera lo stile risultante dall'elemento
In generale, il meccanismo è sufficientemente flessibile da poter aggiungere liberamente nuovi test, correggere quelli attuali e altre manipolazioni interessanti. (Se vuoi utilizzarlo per le tue esigenze, consulta il copyright all'inizio della pagina dei test.)
Suite di prova
Ogni serie di test è rappresentata da una funzione separata che memorizza il numero di test, il nome della serie e i test stessi.
La struttura interna dei test può variare, ma struttura generale set può essere visto chiaramente in questo esempio:
Inizializza: funzione (risultati) ( this .section = results.getSection(this .name); per (var i = 1; i<= this
.count; i++) { this
["t"
+ i](); }
},
T1:funzione() ( questo .section.setItem(( titolo: "API FileReader", URL: "http://dev.w3.org/2006/webapi/FileAPI/#filereader-interface", passato: "FileReader" nella finestra, valore: 10
});
},
T2:funzione() ( questo .section.setItem(( titolo: "API FileWriter", URL: "http://www.w3.org/TR/file-writer-api/", passato: "FileWriter" nella finestra, valore: 10
});
}
};
* Questo codice sorgente è stato evidenziato con Evidenziatore codice sorgente.
Tutti i test vengono eseguiti come una funzione separata t io, durante il test, quando si inizializza un set, il browser esegue tutti i metodi descritti all'interno del set.
Ciascun metodo aggiunge internamente ai risultati raccolti (l'oggetto dei risultati viene passato dal motore di test) informazioni sul superamento o il fallimento del test, il numero di punti assegnati per questo test e meta-informazioni aggiuntive (dai collegamenti alle specifiche alle dichiarazioni su il superamento parziale o totale delle prove).
Test più complessi (ad esempio per i moduli web) utilizzano strutture leggermente più complesse per raggruppare i risultati, ma l'essenza rimane la stessa.
Ora che i meccanismi di funzionamento del test sono generalmente compresi, è tempo di passare ai dettagli del funzionamento interno dei test stessi.
Cosa controlla h5t?
Un elenco di cosa esattamente testa h5t con riferimenti (non sempre corretti) a specifiche o frammenti di specifiche può essere trovato direttamente sulla pagina del test, quindi non ha molto senso duplicarlo qui. È molto più importante capire cosa sta succedendo all'interno e cosa c'è dietro ogni funzione di test.
Iniziamo osservando come i singoli blocchi di test vengono distribuiti in un test e tradotti in punteggi e come tutto ciò si collega allo standard HTML5.
Composto
La prima cosa che salta all’occhio è che una parte significativa degli elementi “convalidati” non sono attualmente inclusi nelle specifiche HTML5:
Alcuni di questi elementi sono stati esclusi dalla specifica HTML5 e separati in standard separati (ad esempio, Microdati HTML), mentre altri non sono mai stati inclusi in questa specifica (ad esempio, FileAPI).
Alcune cose non sono affatto direttamente correlate agli standard web (codec: vengono forniti punti bonus aggiuntivi per il supporto).
Infine, WebGL è una specifica di terze parti non direttamente correlata a HTML5 (utilizza Canvas per produrre risultati di rendering).
Proporzioni
Il secondo punto importante a cui vale sicuramente la pena prestare attenzione è la distribuzione dei punti tra le diverse specifiche e all'interno della specifica HTML5.
Pertanto, un numero enorme di punti (90 su 400) viene assegnato a nuovi elementi per i moduli: quasi un quarto dell'importo totale o un terzo dei punti assegnati allo stesso HTML5. I moduli web sono certamente una componente importante della nuova specifica, ma difficilmente questa componente può essere definita oggi dominante in termini di domanda (vedi sotto per maggiori dettagli).
Al lavoro con il video viene assegnato approssimativamente lo stesso numero di punti di tutti i nuovi elementi semantici in HTML5. La tela è assegnata notevolmente meno dell'audio.
Alcuni test e verifiche pesano 1 punto, altri 10. Infatti, la distribuzione dei punti tra test e verifiche è frutto della completa volontà e fantasia dell'autore del test.
Stati
Il terzo aspetto della questione da tenere presente riguarda quali specifiche vengono controllate e in che stato si trovano oggi.
Se inizi a scavare all'interno, la prima cosa che viene in superficie è l'attuale stato di bozza della maggior parte delle specifiche:
HTML5 - Bozza di lavoro, prevista per WD LC a maggio
Microdati HTML - WD
Geolocalizzazione - Raccomandazione del candidato (l'unica eccezione dell'intera gamma)
Messaggistica Web ed eventi inviati dal server - WD LC
API Web Sockets - WD (lasciando la variabilità del protocollo oltre lo scopo di questa recensione)
File API - WD, che recentemente ha appena varcato la soglia della prima bozza di versione
Archiviazione Web: WD
DB indicizzato - WD
Database SQL Web: il lavoro è stato interrotto, ma l'autore consente a coloro che non supportano il DB indicizzato di guadagnare punti
Lavoratori Web - WD LC
Dispositivi locali: non nelle specifiche W3C, un mese e mezzo fa rimosso dalle specifiche di WHATWG e sostituito da un'API
La selezione dell'intervallo/testo DOM è una proprietà separata di un'altra specifica
Modulo Vista/Scorrimento CSSOM: una proprietà separata spostata in un'altra specifica (versione editoriale)
In secondo luogo, e altrettanto importante, c’è lo stato iniziale e la volatilità di molte specifiche: nell’immagine sopra puoi vedere la frequenza degli aggiornamenti delle specifiche per ciascuno standard negli ultimi tre anni. In alcuni luoghi, come accennato in precedenza, la variabilità è tale che il test non corrisponde più alla situazione reale nel campo degli standard web.
Tieni presente che le specifiche in fase di test sono ancora in fase di sviluppo e potrebbero cambiare prima di diventare ufficiali.
Diamo uno sguardo più da vicino al contenuto di ciascun test.
Blocco HTML5
Il blocco più grande dell'intero test e quello di interesse centrale. È composto da diverse parti interne che controllano determinati elementi.
Analisi 5 prove | 11 punti | 2 punti bonus
Questo blocco di test verifica alcune regole per l'analisi dei documenti e, in particolare, l'analisi di varie opzioni di markup esotiche e errate conformi alle specifiche HTML5.
1. Supporto1 punto Verifica che "con il doctype installato, il browser funzioni in modalità Strict". Internamente viene verificato che document.compatMode == "CSS1Compat". Questa proprietà caratterizza la modalità in cui il browser è attualmente in esecuzione (Quirks vs. Strict).
In realtà, se esiste un doctype corretto, il browser dovrebbe funzionare in modalità Strict, ovvero questo controllo non è direttamente correlato a HTML5, perché Modalità rigorosa consarà incluso anche in IE6, che ovviamente non supporta HTML5.
2. Tokenizzatore HTML5 5 punti Vengono controllati vari casi esotici di specificazione di nomi, attributi e contenuto degli elementi - per un totale di 19 controlli per la corretta analisi del contenuto interno di un elemento html:
"";
"
"
"
"
"
"
""
"\u000D"
"〈〉"
"ⅈ"
"𝕂"
"∉"
""
""
""
"-->"
"-->"
"-->"
"-->"
Anche se è improbabile che incontrerai la maggior parte di questi casi nella tua vita, è importante notare che le specifiche HTML5 pongono particolare enfasi sull'analisi dei documenti e sulla corretta gestione di questi esempi.
(In effetti, e quasi letteralmente, questi test sono basati sui test di analisi HTML di Mozilla: http://hsivonen.iki.fi/test/moz/detect-html5-parser.html)
3. HTML5 Costruzione di alberi 5 punti Continuazione dell'argomento dell'analisi dei documenti: creazione dinamica di vari elementi con la stessa fonte di test originale:
Inferenza dei tag/creazione automatica dei tag (in questo caso viene controllato che l'elemento html creato dinamicamente abbia al suo interno elementi head e body).
Implicito
/elemento col previsto nella tabella
Elenchi di analisi
Supporto alla genitorialità affidataria
Algoritmo dell'agenzia di adozione/analisi di allegati errati come " UN B
C D"
Spazio dei nomi HTML
Commento: questo e i test precedenti sono gli unici in tutto h5t che controllano i dettagli dell'implementazione di questa o quella funzionalità e pretendono di verificare l'interoperabilità dell'analisi dei documenti.
(Ribadisco che, a differenza di altri test, i test di parsing sono presi in prestito da Henri Sivonen, noto, tra l'altro, per essere stato fortemente coinvolto nello sviluppo del parser HTML5 per Firefox 4. Cioè, in effetti, si tratta di test inventato durante lo sviluppo di Fx4, quindi non sorprende che li superi molto bene. La caratteristica principale di tali selezioni è che, pur rimanendo corrette, non possono rivendicare il 100% o una copertura completa della funzionalità testata test selettivi delle variazioni del codice che interessano all'autore.)
Non viene effettivamente controllato se il browser supporti SVG o MathML
Inaspettatamente, il test fallisce su Opera, che storicamente dispone di uno dei migliori supporti SVG. Il vero supporto MathML è disponibile solo in Firefox. Chrome supera questo test anche senza il supporto per il MathML stesso (puoi verificarlo negli esempi di test di Mozilla).
Commento: Formalmente, il contenuto interno degli elementi SVG e matematici e le regole di analisi/visualizzazione sono descritti in specifiche separate. La specifica HTML5 afferma che un documento deve supportare l'inserimento di contenuto SVG tramite
Tela 3 prove | 20 punti
Questo blocco di test verifica il supporto di Canvas. Infatti, come puoi vedere dalla descrizione seguente, controlla solo se il browser supporta il tag canvas e fornisce il contesto corretto per le manipolazioni da JavaScript. Sfortunatamente, non importa quanto significativo Questo blocco non controlla il livello di supporto del canvas e la compatibilità delle implementazioni.
Video 7 prove | 31 punti | 8 punti bonus
Questo blocco è progettato per verificare il supporto del browser per un nuovo tag
