HTML5 è stato sviluppato attivamente negli ultimi anni. L'innovativo linguaggio di markup ipertestuale dovrebbe risolvere contemporaneamente tutti i problemi e le problematiche associati alla progettazione e allo sviluppo di siti web.
Vero, prima ultimo momento il completamento dei lavori e il raggiungimento di un risultato positivo non è mai stato annunciato. Per capire meglio cos'è HTML5, è utile tornare alla cronologia e analizzare i risultati dei passaggi precedenti per trovare il codice perfetto. Nonostante il lavoro incompiuto, compaiono sempre più siti HTML5.
HTML1 e HTML2
Le prime versioni erano molto imperfette e, inoltre, non standardizzate. Ogni designer ha scritto il codice come gli sembrava il migliore. Pertanto, i siti sono spesso riflessi in modo inadeguato nei diversi tipi di browser. Pertanto, queste lingue furono rapidamente abbandonate.
HTML3.0
La terza versione ha già acquisito un certo formato uniforme e ha permesso di creare siti di qualità decente. Tuttavia, c'erano anche problemi seri. Ad esempio, in HTML3, tutta la formattazione e l'allineamento sono stati eseguiti all'interno del codice della pagina stesso.
La pagina conteneva sia grafici che script. Ciò ha aumentato notevolmente il peso delle pagine web e ha rallentato notevolmente il caricamento del sito. A poco a poco, l'idea di un sito Web di qualità si è ampliata in modo significativo. Ci sono volute molta più interattività e capacità multimediali. Gli utenti di Internet sono diventati molto più esigenti riguardo alle capacità di un progetto web.
HTML4.1
È considerata l'opzione più perfetta. Tutta la formattazione interna è stata spostata su fogli di stile a cascata, lavorando sul principio degli stili in MS Word. Inoltre, era consuetudine spostare le tabelle stesse all'esterno delle pagine e collocarle in directory separate. L'introduzione dei CSS ha portato al raggiungimento della compliance aspetto esteriore pagine nel browser alle idee del webmaster.
Grafica e elementi software... Tutto ciò ha portato a una significativa riduzione del peso del codice e all'accelerazione dei siti. Alla gente piaceva questa situazione prima oggi la maggior parte dei siti è realizzata in HTML4.1.
XHTML e DHTML
Tentativi abbastanza dubbi per rendere i siti web più standard e dinamici. La complessità della codifica e l'eccessiva severità del linguaggio non hanno contribuito all'adozione diffusa di queste versioni.
Le origini di HTML5
Sono comparsi computer mobili, gli schermi sono diventati sensibili al tocco. Inoltre, ogni produttore installa un sistema operativo sui propri dispositivi. auto-sviluppato... Gli utenti sono abituati a utilizzare i computer non solo come una macchina da scrivere elettronica, ma come centri di intrattenimento multimediale multifunzionale. La comunicazione tramite videotelefonia su Internet è diventata un fenomeno di massa.
Pertanto, le condizioni moderne erano richieste dal nuovo codice.
- Garantire multipiattaforma, uniformità di visualizzazione in tutti i tipi di browser.
- Il sito dovrebbe essere ugualmente leggibile su desktop, smartphone e tablet di qualsiasi produttore.
- Adatto per il controllo touch per computer portatili.
- La possibilità di riprodurre video senza l'aiuto di un lettore Flash. Molti tablet non supportano affatto questa tecnologia.
- La possibilità di aprire documenti di formati diversi senza applicazioni aggiuntive che devono essere installate su un computer.
- Migliora le prestazioni dei siti. Ciò è particolarmente importante per Internet mobile, che fornisce una velocità inferiore.
- Rendi i siti web dinamici e interattivi. Un utente moderno vuole comunicare con una risorsa Internet quasi come una persona.
In breve, HTML5 dovrebbe soddisfare i gusti più sofisticati degli utenti e consentire agli sviluppatori di creare ottimi siti Web in modo facile e semplice.
Quanto è riuscito il lavoro sulla creazione del linguaggio ipertestuale più perfetto e standard? Tali siti possono davvero fare molto. Se non si dispone di un lettore Flash, il sito stesso lo capisce e offre la possibilità di guardare video e ascoltare musica utilizzando le sue capacità.
I siti HTML5 in realtà sono diventati molto agili. In termini di capacità dinamiche e interattività, la maggior parte degli utenti di Internet è abituata a utilizzare tutte queste cose meravigliose a livello inconscio.
Le persone usano solo i servizi moderne tecnologie senza ricordare che non è sempre stato così. È possibile che lo sviluppo estenuante di HTML5 non finisca mai.
Internet ei computer stanno migliorando così rapidamente che è abbastanza difficile prevedere il futuro. Forse ci saranno tali capacità dei computer, che oggi nessuno sospetta nemmeno. Oggi la composizione vocale il testo sembra quasi un miracolo, mentre gli esperti prevedono che letteralmente tra cinque anni nessuno utilizzerà tastiera e mouse. Forse i computer impareranno a leggere la mente di una persona ea capire i suoi desideri.
Probabilmente tutti voi avrete sentito parlare almeno di HTML5, la nuova versione del linguaggio di markup su Internet. È ancora considerato in fase di sviluppo, sebbene dal momento dell'approvazione ufficiale Versione attuale HTML4 ha superato più di quindici anni - in effetti, l'intero tempo di sviluppo attivo del World Wide Web. Quali sono i vantaggi di HTML5 e le sue differenze fondamentali da HTML4?
1. HTML5 - un nuovo approccio al markup: multimedia inside
A differenza del linguaggio di markup HTML4 sviluppato negli anni novanta, quando anche contenuti multimediali relativamente semplici erano troppo "pesanti" per la stragrande maggioranza degli utenti di Internet, nel 2004, anno in cui iniziarono effettivamente i lavori sulla nuova versione dello standard, Internet era già diffondendosi con registrazioni video e video, ufficiali e non. È diventata una buona pratica per i siti web pubblicare film e video animati sulle proprie pagine e gli audioblog-podcast sono diventati di moda.
Tuttavia, l'attuale standard non prevedeva la descrizione dei contenuti multimediali tramite il linguaggio stesso: per questo veniva utilizzata la funzione di inserimento di un oggetto ("oggetto") la cui capacità di riproduzione dipendeva dal fatto che ulteriori soggetti terzi plugin compatibili con tali contenuti sono stati installati nel browser del cliente.
Quando parliamo di plugin come questo, intendiamo principalmente Adobe Flash, QuickTime o il meno comune Real Player e Silverlight. Questi sono tutti "componenti aggiuntivi", componenti aggiuntivi del browser che non sono loro parte di e agendo come una sorta di intermediario che converte i contenuti digitali scaricabili in video e suoni.
Questo sistema è ancora abbastanza funzionale, ma la mancanza di standard generalmente accettati porta al fatto che diversi siti utilizzano diverse tecnologie, sono necessari plug-in diversi per visualizzare i loro contenuti multimediali e, soprattutto, poiché tali plug-in non sono inclusi direttamente nel browser, devono essere installati separatamente.
Nello standard HTML5, che è una combinazione di HTML stesso, nonché CSS e JavaScript, viene inizialmente implementato un approccio fondamentalmente diverso in cui il contenuto multimediale è parte integrante del codice della pagina. HTML5 fornisce un unificato modo standard descrizioni (sintassi) dei contenuti audiovisivi incorporati nelle pagine.
Per integrare audio o video in HTML5, è sufficiente utilizzare un semplice insieme di tag che descrivono il tipo di contenuto che si intende inserire ("video" o "audio") e i consueti collegamenti ai file multimediali corrispondenti.
Naturalmente, HTML5 ha molte altre innovazioni, ma questa è la più importante: un cambiamento nell'approccio ideologico.
2. Il problema della retrocompatibilità: prima HTML, poi plugin
Sfortunatamente, c'è ancora un numero significativo di utenti nel mondo che hanno installato browser obsoleti che vanno bene con loro, ma non supportano tutte le funzionalità di HTML5. Parliamo prima di tutto di Internet Versione Explorer 8, di gran lunga il più popolare per questo browser. Le versioni successive - IE 9 e 10 - supportano già quasi completamente HTML5. Chrome, Opera e Safari sono in grado di gestire i tag "video" e "audio" ormai da diversi anni.
Tuttavia, per garantire la retrocompatibilità, HTML5 mantiene il supporto per l'uso dei plugin (il tag "oggetto"), ma secondo lo schema "prima HTML e poi plugin". Ciò significa che il browser deve prima eseguire il rendering della pagina utilizzando i tag "video" e "audio" e solo se non può farlo, utilizzare il codice del plug-in.
Per far funzionare correttamente questo approccio, puoi utilizzare una delle tante librerie JavaScript disponibili, alcune delle quali forniscono un'interfaccia completamente integrata interfaccia software(API) per manipolare sia il contenuto HTML che gli oggetti incorporati. Questi includono, in particolare, Projekktor o il lettore video software Video.js, che forniscono piena compatibilità sia con HTML5 che con browser precedenti che utilizzano plug-in.
3. Un approccio unificato alle piattaforme desktop e mobili
Il supporto per il nuovo standard HTML5 è fornito anche su quasi tutti i moderni dispositivi mobili, inclusi iOS, Android e Windows Phone, qual è un altro importante vantaggio di esso. Il webmaster non ha più bisogno di ospitare più versioni di contenuti multimediali per computer e dispositivi mobili "a tutti gli effetti". IOS è noto per essere completamente incompatibile con Flash, mentre Android è solo parzialmente compatibile. Nel caso di HTML5, questo problema viene completamente rimosso.
Inoltre, molti moderni dispositivi mobili supporta la decodifica video hardware nel diffuso formato H.264, che allevia ancora una volta gli editori di lavoro extra e la necessità di caricare video in diversi codec. I proprietari di tali dispositivi ricevono un basso carico sul sistema e a lungo lavoro autonomo.
4. Supporto per diversi formati video e audio
Sebbene HTML5 consenta di posizionare file multimediali su pagine Web con tag semplici e standard, tali file possono essere codificati nel modo più diversi formati e un'ampia varietà di codec. Nel frattempo, non esiste ancora una combinazione standard di formato (contenitore) e codec che funzioni con uguale successo in tutti i browser e sistemi mobili.
I contenitori più popolari per i video su Internet sono AVI, MP4, FLV e WebM e ci sono solo tre principali codec video "di rete": H.264, Ogg Theora e VP8. Allo stesso tempo, ogni codec di solito (ma non sempre) si adatta meglio al proprio formato contenitore: H.264 - MP4, Theora - OGG, VP8 - WebV.
Il codec H.264 comprime il video con perdita di dati per ottenere un file Alta qualità, ma taglia piccola... Inoltre, la specifica prevede diversi profili con qualità diversa e il rapporto di compressione in modo che i file "leggeri" possano essere trasmessi a dispositivi mobili a bassa potenza e a desktop con banda larga- video di qualità superiore.
Sebbene H.264 sia un codec commerciale, il che significa che comporta costi di licenza, è il più versatile, con supporto integrato in Internet Explorer, Chrome, Firefox, Safari, iOS e Android, ma è assente solo in Opera, dove tale video viene decodificato solo tramite un plug-in esterno.
Anche il codec Ogg Theora, originariamente progettato per i sistemi Linux, era inizialmente commerciale, ma ora è concesso in licenza gratuitamente. Il supporto integrato è disponibile nei browser Chrome, Firefox e Opera, in Internet Explorer e Safari è disponibile solo tramite plugin.
Codec di destinazione mobile VP8 rilasciato dai termini di Google Open source e fornisce una qualità simile a H.264 con una minore complessità di decodifica. Chrome, Firefox e Opera hanno il supporto integrato, così come i dispositivi mobili Android.
Pertanto, per garantire la riproduzione di contenuti video su quasi tutti sistemi esistenti, è sufficiente caricare file in contenitori MP4 nello standard di codifica H.264 e nel formato WebM con il codec VP8. Poiché tra tutti i browser desktop moderni, solo Opera manca del supporto H.264 nativo, queste combinazioni saranno le più versatili.
5. Esiste un'ampia documentazione pubblicamente disponibile
Sebbene HTML5 non sia ancora uno standard definitivo, è supportato dalla stragrande maggioranza dei moderni browser e dispositivi mobili. Pertanto, non sorprende che ci sia già un'ampia documentazione pubblicamente disponibile per gli sviluppatori web - b oh la maggior parte dei quali, ovviamente, è pubblicata su lingua inglese.
Inoltre, parecchi libri su HTML5 sono già stati tradotti in russo, tra cui, ad esempio,
27/01/14 15,5Kintroduzione
In qualità di sviluppatore ASP.NET MVC, stavo recentemente cercando un lavoro e durante il mio colloquio molte delle domande che mi sono state poste riguardavano HTML5 e le sue specifiche.
Pertanto, di seguito sono riportate 40 domande importanti per aiutarti a brillare con la tua conoscenza di HTML5.
Queste domande non sono le chiavi del successo della tua ricerca di lavoro, ma ti aiuteranno sicuramente a navigare nell'argomento.
Buona caccia.
Qual è la relazione tra SGML, HTML, XML e XHTML?
SGML ( Linguaggio di markup generalizzato standard- Standard Generalized Markup Language) è uno standard che definisce il markup di un documento.
HTML è un linguaggio di markup descritto utilizzando SGML.
Quindi, con SGML, è stata creata una DTD (Document Type Definition) a cui HTML fa riferimento e alla quale deve aderire. Pertanto, è sempre possibile trovare la dichiarazione "DOCTYPE" all'inizio della pagina HTML, che determina quale DTD utilizzerà il browser durante l'analisi del codice della pagina.
L'analisi del codice SGML era complicata, quindi XML è stato creato per renderlo più semplice. XML usa SGML.
Ad esempio, in SGML devi usare tag di inizio e fine, mentre in XML puoi usare tag a chiusura automatica che si chiudono automaticamente (ad esempio, "").
XHML è stato creato da XML ed è stato utilizzato in HTML 4.0. Pertanto, ad esempio, in HTML basato su SGML, il tag
non valido, ma XHTML lo fa. È possibile utilizzare la definizione del documento XML come mostrato nell'esempio seguente:
In breve, SGML è al centro di tutto. Le versioni precedenti di HTML sono basate su SGML, mentre HTML 4.0 utilizza XHTML basato su XML.
Che cos'è HTML5?
HTML 5 è nuovo standard HTML, obiettivo principale ovvero fornire qualsiasi contenuto senza l'uso di plug-in aggiuntivi come Flash, Silverlight, ecc. Contiene tutto il necessario per visualizzare animazioni, video, ricchi interfaccia grafica e altre cose.
HTML5 è il risultato lavorare insieme In tutto il mondo Consorzio Web (W3C) e Gruppo di lavoro sulla tecnologia delle applicazioni ipertestuali Web(COSA).
In HTML 5, non abbiamo bisogno di un DTD. Come mai?
HTML 5 non usa SGML o XHTML. è completamente nuovo sviluppo quindi non è necessario fare riferimento al DTD. In HTML 5, è necessario utilizzare il seguente doctype che consente al browser di identificare il documento come HTML 5.
Se non inserisco nel documento, HTML 5 funzionerà?
No, il browser non sarà in grado di identificare il documento come HTML 5 e i tag HTML 5 non funzioneranno correttamente.
Quali browser supportano HTML 5?
Quasi tutti i browser, come Safari, Google Chrome, Firefox, Opera, Internet Explorer supportano HTML 5.
Come è cambiata la struttura della pagina quando si è passati da HTML 4 o versioni precedenti a HTML 5?
In genere, una pagina Web contiene intestazioni, piè di pagina, navigazione, contenuto principale e un blocco laterale. Quindi, quando vogliamo rappresentare questi blocchi in HTML 4 con un nome adatto, molto probabilmente utilizzeremo i tag DIV. Ma HTML 5 ha introdotto elementi più chiari per questi blocchi, rendendo l'HTML più leggibile.
Quella che segue è una descrizione di questi elementi HTML 5 dal markup nell'immagine:
: rappresenta il cartiglio della pagina; : Il contenuto principale della pagina (articolo); : Utilizzato all'interno di un articolo per dividere l'articolo in sezioni;
Che cos'è l'elemento datalist in HTML 5?
L'elemento datalist in HTML 5 aiuta a implementare la funzione di completamento automatico nel campo di input, come mostrato nell'immagine seguente:
Di seguito è riportato l'HTML per l'elemento DataList:
Quali nuovi elementi del modulo sono stati introdotti in HTML 5?
HTML 5 introduce dieci nuovi importanti elementi del modulo:
- Colore;
- Data;
- Data e ora locale;
- E-mail;
- Volta;
- Gamma;
- Telefono;
- Numero;
- Ricerca.
Prendiamo questi elementi in ordine.
Se vuoi visualizzare la finestra di dialogo per la selezione dei colori:
Se vuoi visualizzare la finestra di dialogo del calendario:
Se vuoi visualizzare un calendario con l'ora locale:
Se desideri creare un campo di input HTML con convalida dell'indirizzo email, puoi impostare il tipo di campo su "email":
Per convalidare un URL, utilizza il tipo "url" come mostrato di seguito:
Se desideri visualizzare un campo per l'immissione di numeri in un determinato intervallo, utilizza il tipo "numero":
Se vuoi visualizzare il cursore, usa il tipo "intervallo":
Vuoi creare una casella di ricerca:
Vuoi prendere solo tempo:
Se vuoi creare un campo per l'inserimento dei numeri di telefono:
Qual è l'elemento di output in HTML 5?
L'elemento di output è necessario quando si desidera visualizzare la somma di due numeri immessi come testo.
Ad esempio, supponiamo di avere due campi di input e di voler aggiungere i numeri dei due campi e visualizzare la loro somma come testo.
Di seguito è riportato un esempio di utilizzo dell'elemento output in HTML 5:
Puoi sostituire "parseInt" con "valueAsNumber" per semplicità. Puoi anche utilizzare l'attributo "for" dell'elemento di output per migliorare la leggibilità.
Cos'è SVG?
SVG sta per grafica vettoriale scalabile. È un linguaggio grafico basato su testo che può essere utilizzato per disegnare immagini come testo, linee, punti e così via, che consente di creare immagini leggere e renderizzate rapidamente dal browser.
Posso creare una semplice immagine SVG utilizzando HTML 5?
Supponiamo di voler eseguire il rendering di una linea semplice come mostrato nell'immagine sottostante utilizzando HTML 5 e SVG:
Di seguito è riportato il codice HTML 5. Puoi vedere il tag SVG che racchiude un tag di linea per visualizzare una linea:
Che cos'è la tela in HTML 5?
Una tela è un'area di un documento HTML in cui è possibile disegnare.
Quindi, come si disegna una linea semplice usando una tela?
- Determina l'area della tela;
- Accedi al contesto della tela;
- Disegna un'immagine.
Definire l'area della tela
Per definire l'area della tela, è necessario il seguente codice HTML. Definisce l'area in cui è possibile dipingere:
Accesso a un'area della tela
Prima di poter iniziare a disegnare nell'area della tela, è necessario ottenere un riferimento al contesto della tela. Di seguito è riportato il codice per farlo:
var c = document.getElementById ("mycanvas"); var ctx = c.getContext ("2d");
Disegnare un'immagine
Ora che hai accesso al contesto dell'oggetto, puoi iniziare a disegnare sulla tela. Quindi prima chiamiamo il metodo "sposta" e iniziamo dal punto 10, 10, utilizziamo il metodo "linea" per disegnare la linea e infine applichiamo il tratteggio ad essa:
ctx.moveTo (10,10); ctx.lineTo (200,100); ctx.stroke ();
Di seguito il codice completo: