Visning af HTML5-websteder: 48 potentielle Flash-dræbende demoer

Så du har hørt alle rygterne om, at HTML5 vil overtage Adobe Flash. Mens de fleste webfællesskaber argumenterer for, om det er muligt eller ej, må du undre dig over, hvad der gør HTML5 så kraftfuldt, at selv gigantvirksomheden Apple ønsker at bruge det til at erstatte Flash.

Det er derfor dette indlæg eksisterer, vi vil ikke tale om, hvad HTML5 kan gøre, men vise live demoer af magiske ting, som HTML5 kan opnå med andre sprog som JavaScript, så gør dig klar til at blive inspireret.

Bemærk: Da HTML5 ikke understøttes fuldt ud af visse webbrowsere som Internet Explorer, anbefales det kraftigt at bruge Firefox-browseren til at se alle HTML5-demoer nedenfor.

Animation

H HTML5’s canvas-element er den afgørende faktor for, at HTML5 kan erstatte visse Flash-animationer. Det giver dig mulighed for at opbygge dynamisk, scriptbar gengivelse af 2D-former og bitmap-billeder med Javascript, hvilket med andre ord er, kontrollerbar animation.

Audioburst Animation

En komfortabel og fantastisk animation skabt med HTML5’s canvas og audiotag.

Ball Pool

Denne demo, der blev fremvist på det sidste Google I/O-event, viser dig, hvor dynamisk HTML5 kan være.

Blob Sallad

En HTML5-spawned skabning, der vil behage dig.

Bomomo

Med Bomomo kan du observere forskellige atomare bevægelser simuleret med HTML5.

Browser Ball

Bliv forbløffet med denne ‘cross-browser’- HTML5-bold.

Bobler

Har du det sjovt ved at skabe endeløse flydende bobler med forskellige farver.

Canvas Cartoon Animation

En enkel og sjov HTML5-tegnefilm, der hjælper dig med at forstå, hvad HTML5’s canvas-element kan gøre.

Coolclock

Et flot, tilpasseligt analogt ur, der er bygget af HTML5 og JavaScript.

Flickr PS3 Slideshow

Se dine Flickr-fotos med et slideshow i PS3-stil i webbrowseren.

Interaktiv Polaroid

En interaktiv demo, der fungerer nogenlunde som en multi touch-grænseflade.

JS Fireworks

Nyd fyrværkeriøjeblikket med din foretrukne tyngdekraft og hastighed, drevet af HTML5 og Javascript.

Kalejdoskop

Et meget smukt og futuristisk HTML5-kalejdoskop.

Liquid Particles

Følsomme partikelanimationer, der reagerer baseret på din musebevægelse.

Mesmerizer

En anden følsom og fremragende HTML5-demo, der viser, hvordan nærliggende elementer reagerer med din musebevægelse.

Nebula Cloud

Før dig vild med denne forunderlige HTML5-nebula.

Parallax

Se alle 2D-former i parallelperspektiv.

Partikelanimation

En elegant HTML5-partikelanimation, der kan formes til dit foretrukne budskab.

Spread

Gå tabt med denne uendelige spread-animation.

Stjernefelt

En meget cool HTML5-stjernefelt-animation, der vil ændre retning og hastighed baseret på din musebevægelse.

Video Destruction

Et enkelt klik for at bombe en video, der afspilles.

Waveform

Oplev, hvordan HTML5’s lærredsbølge bevæger sig ved at ændre dens amplitude, bølgelængde, bredde osv.

3D-effekt

Undertrykkes du af lærredsanimation? Det er mere, HTML5’s canvas-element kan gøre, og det kaldes 3D-effekt. Udvikleren kan stole på canvas-elementet, DOM og JavaScript for at skabe 3D-effekt, som senere kan udvikles til 3D-animation eller spil.

Canvas3D og Flickr

Har du en helt ny 3D-oplevelse med Flickrs fotostream.

Tøjsimulering

En realistisk, HTML5-baseret tøjsimulering.

Evolving Monster

Oplev et monster, der udvikler sig til et kompliceret væsen, en af dets skabere er HTML5.

Google Giftbox

Gigantens søgemaskine Google præsenteres i 3D, spilbar visning.

JS Touch

En højkvalitets og realistisk ‘3D på 2D lærred’ udstilling.

Datapræsentation

Som HTML5’s canvas-element kan bruges til at skabe animation og 3D-effekt, kan det også implementeres til at præsentere matematiske data.

Gnuplot

Gnuplot, et program til dataplotting i HTML5-version.

RGraph

RGraph giver en bred vifte af datapræsentation som f.eks. søjlediagram, fremskridtslinje og traditionelt radardiagram.

Webapplikation

Snart kan man ved hjælp af alle de muligheder, der kombineres af HTML5 og andre sprog, skabe interaktive applikationer eller spil, der ligger tæt på Flash-applikationen.

CanvasPaint

Visse, at Microsoft Paint’s bror kommer ind i din webbrowser, og hans far er HTML5.

CanvasMol

En videnskabelig applikation, som er bygget til at hjælpe dig med at forstå visse jordelementers struktur.

Cartoon Builder

Tegn interessante tegneseriebilleder med denne minimale og interaktive tegneseriebygger.

Træk alt her

Træk alt, hvad du kan trække i demoen for at vise detaljer.

Gartic Sketch

En original HTML5-applikation, der giver dig mulighed for at lave nogle grundlæggende tegninger, der kan gemmes i forskellige billedformater som jpeg eller png.

PhysicSketch

Tegn hvad du vil, og se, hvordan de reagerer med simuleret tyngdekraft.

Sketchpad

Et kraftfuldt HTML5-tegneprogram, der giver dig mulighed for at tegne og redigere dit billede på den præcise måde.

Smalltalk

En webapplikation, der bekræfter den geografiske placering af vejrrelaterede meddelelser, der er erhvervet fra Twitter, og således danner dem til et lærredsbaseret “socialt vejr”-kort, ganske trivielt (som anført af forfatteren), men interessant.

Spil

3Bored

Du vil aldrig kede dig, hvis du kan blive ved med at undvige hundredvis af HTML5-kugler i næste sekund.

Breakout

Rebound the ball to break all bricks.

Canvascape

Det er ikke helt et spil, men det demonstrerer, hvordan HTML5 kan bruges til at udvikle et browserspil til First Person Shooting.

Catch It

Hvor mange bolde kan du undvige for at få din vindende HTML5-plads?

Chain Reaction

Kæd eksplosionen for at nå målet, bliv ikke afhængig.

Cubeout

Spil Tetris i 3D, top-down view.

etchaPhysics

Tegn emne for at flytte bolden til stjernen, glem ikke tyngdekraften.

Puslespil

Klik, drej og slip puslespilsbrikker for at løse dette HTML5-baserede puslespil.

Slide Puzzle

Slide til sejren, et andet HTML5-spil, der er bygget til at presse din hjerne saft.

Same Game

Fjern en bestemt gruppe for at få en anden gruppe parret i samme farve, og du vil i sidste ende blive tildelt en sejr.

Tetris

Et af de mest klassiske spil bragt tilbage til livet af HTML5.

Torus

Endnu et Tetris-spil i pseudo-3D-version.

Konklusion

Hvad er begrænsningen ved HTML5? På dette tidspunkt kan vi ikke afgøre det, men med den imponerende video nedenfor kan vi vide, hvor langt HTML5 er blevet skubbet:

Ja, det er Quake II i webbrowser, så nu er det meget klart, at med HTML5 vil der blive født flere banebrydende webapplikationer, der kan betjene milliarder af internetbrugere. Det er hurtigt, det udvikler sig, og det er ved at ændre world wide web. Spørgsmålet er, hvordan du vil bruge dette HTML5, der ændrer spillet?

Vi vil gerne høre din idé!

Skriv et svar

Din e-mailadresse vil ikke blive publiceret.