5 cose che non sapevi che potresti fare con HTML

Sep 11, 2025
Come si fa

Ammettiamolo, lo sviluppo web può facilmente diventare un disastro. HTML, CSS e Javascript. Sono tutti evoluti da umili origini per molti anni e sono in gran parte equivocali in termini di come dovresti usarli. Di conseguenza, è tutto troppo facile costruire un casino non elaborato. Aderendo agli standard e approfittare degli ultimi miglioramenti nelle specifiche non garantiscono un buon codice, ma può certamente aiutare.

In qualsiasi tipo di sviluppo del software, la modularità è re quando si tratta di costruire il codice manutenibile. Di conseguenza, ti consigliamo di tenere d'occhio i componenti web. Il supporto del browser non è eccezionale, ma se ti prendi un po ' Polyfills. , puoi andare avanti alla curva e iniziare a sfruttare gli elementi personalizzati per strutturare subito il tuo codice. Questo stile di sviluppo è il futuro, quindi vale la pena conoscerlo ora.

Keep code streamlined for clearer understanding

Tenere il codice semplificato per una comprensione più chiara

L'HTML5 ha introdotto una serie di nuovi elementi (e diversi) per contribuire a favorire le buone pratiche di codifica. Potresti aver sentito parlare di Markup semantico, che si riferisce all'uso degli elementi descrittivi di HTML5 come & lt; Articolo e GT; e & lt; figura & gt; per indicare il tipo di contenuto che contengono.

Questo può davvero aiutare con la pulizia del tuo codice, poiché gli elementi HTML identificheranno immediatamente, ad esempio, quali parti rappresentano la barra dei menu, le sezioni di contenuto, il piè di pagina e così via.

Aiuterà anche se approfitti degli ultimi standard JavaScript. Anche JavaScript può diventare disordinato, ma è diventato molto più facile lavorare con gli ultimi anni. La sintassi ES6 è ampiamente supportata nei browser e le caratteristiche come le funzioni di freccia e le classi possono rendere la tua vita molto più facile, ma molti sviluppatori sono non familiari o diffidenti di usarli.

Continuando il tema dello sviluppo modulare, JavaScript ora supporta ora il caricamento del modulo, che può aiutarti a gestire le dipendenze in modo pulito.

01. Riconoscere e sintetizzare il discorso

The sound of things to come

Il suono delle cose da venire (Immagine di immagine: Foto di Jason Rosewell su Unsplone)

Queste sarebbero state una volta funzioni complesse che richiedono software specializzato, ma ora vengono costruite direttamente nei browser. L'API del discorso Web ha componenti che supportano il testo-discorso e il testo a testo. Quest'ultimo di questi utilizzerà un servizio online (Chrome utilizza l'API di Google Cloud Speech API) o il servizio di riconoscimento vocale nativo del dispositivo. Aspettatevi di vedere questo essere usato ampiamente sui dispositivi mobili in futuro.

02. Visualizza un selettore di colori

Choosing the right colour

Scegliere il colore giusto (Immagine di immagine: Foto di Scott Webb su Unsplash)

Bunicale come può sembrare, questo è un grande esempio di come HTML5 semplifichi i compiti comuni che in precedenza avrebbero richiesto la codifica personalizzata di un componente UI abbastanza complesso. & lt; ingresso tipo = "colore" e GT; Visualizzerà un selettore di colori visivo quando si fa clic, utilizzando un raccoglitore di colori nativo del dispositivo. Questo potrebbe essere particolarmente utile con la tela HTML. È ampiamente supportato con l'eccezione del safari sul cellulare.

03. Recolour The Browser UI

Colour themes for browsers

Temi di colore per i browser (Immagine di immagine: Foto di Marko Blažević su Unsplone)

Questo può offrire un bel tocco estetico su piattaforme mobili. & lt; meta name = "tema-colore" contenuto = "# ffffff" / & gt; È progettato per istruire il browser a ricordare la barra degli strumenti durante la visualizzazione del tuo sito. Sfortunatamente, è un po 'non standardizzato, così mentre "Tema-colore" Lavora con Chrome, Firefox e Opera, su IOS di cui avrai bisogno "Apple-mobile-web-app-status-bar-style" (funziona solo in modalità fullscreen).

04. Immagini diverse per schermi diversi

Specifying the image and the resolution

Specifica dell'immagine e della risoluzione (Immagine di immagine: Foto di Tran Mau Tri Tam su Unsplone)

Speriamo che tu stia già implementando il design reattivo, nel qual caso le tue immagini ridurranno per adattarsi alla vista. Questo non è perfetto, dal momento che costringeranno l'utente a scaricare la versione più grande dell'immagine, quindi sotto il downsampling. Inserisci l'HTML5. & lt; picture & gt; Elemento, che consente di specificare immagini diverse da visualizzare a seconda della risoluzione dello schermo, il sito viene visualizzato.

05. Vibrare il tuo telefono

Shakin' all over

Shakin 'tutto finito (Immagine di immagine: Foto di Gilles Lambert su Unsplash)

L'API a vibrazione denominata in modo non ambiguo espone una singola funzione, vibrare (), che farà esattamente ciò che dice sui dispositivi che lo supportano. La funzione prende un elenco che descrive un modello di vibrazione come argomento. Lavorerà su Chrome, Firefox e Opera, anche se sei sfortunato sul bordo o sul safari. È stato riferito che alcuni annunci stanno usando questo per attirare l'attenzione dell'utente, quindi la giuria è fuori se è in realtà una buona idea.

Questo articolo è originariamente apparso in Web designer Edizione 266. Compralo qui .

Articoli Correlati:

  • I 10 migliori modelli del modello HTML5
  • 20 Modelli HTML per dare ai tuoi progetti di web design un headstart
  • Inchiodare il tuo html con questo foglio diat

Come si fa - Articoli più popolari

17 Suggerimenti per il disegno di facce di manga

Come si fa Sep 11, 2025

(Immagine di credito: Zakary Lee) I volti del manga sono una parte vitale del manga di disegno. Ho iniziato la mia ca..

Crea una scena con Renderman per Maya

Come si fa Sep 11, 2025

(Immagine di immagine: Jeremy Heintz) In questo Renderman per il tutorial Maya, copriremo una varietà di argomenti a..

10 modi per migliorare la tua anatomia 3D

Come si fa Sep 11, 2025

(Immagine di credito: Ryan Kingslien) Ricreare la figura umana è uno dei problemi più difficili degli artisti sfida..

17 modi per disegnare creature migliori

Come si fa Sep 11, 2025

Quando stai disegnando creature, è vitale che siano credibili. Non importa quanto diventino pazzi i tuoi disegni, ricordati che ..

Inizia con la piattaforma di animazione Greensock

Come si fa Sep 11, 2025

GreenSock Animation Platform (GSAP) consente di animare qualsiasi cosa è possibile accedere con JavaScript inclusa DOM, tela e C..

Come progettare bestie fantasy credibili

Come si fa Sep 11, 2025

Ci sono molti modi per affrontare la creatura e design del personaggio , e tutto dipende da ciò che vuoi che il t..

Genera tavolozze di colori senza fine con Khroma

Come si fa Sep 11, 2025

Uso eccellente di Teoria dei colori Nel design è una di quelle cose che separano il grande dalla media. Sebbene s..

Come dipingere una vibrante vita floreale

Come si fa Sep 11, 2025

Colore e texture offrono un modo perfetto per dare vivacità a una natura floreale. Questa dimostrazione mostra come uso la verni..

Categorie