Sprite og CSS sprites og HTML 5: Forskjell mellom sider

Fra LiavaagWiki
(Forskjell mellom sider)
Hopp til navigering Hopp til søk
(Ny side: ==Innledning== Sprite er en datamaskingrafikk-komponent og en bitmap grafikk som kan flyttes rundt på skjermen uavhengig av annen grafikk. En sprite er utformet for å være del av en større scene, som kan være et statisk bilde, eller animert grafikk. Eksempler på sprites er objekter i 2D-videospill, ikoner som er en del av et brukergrensesnitt for applikasjoner, og bilder på nettsteder (Christensson, 2012). På 1980-tallet og utover 1990-tallet var sprites den vanligste måte…)
 
m (Beskyttet «HTML 5»: Side med mange besøkende ([Redigering=Tillat kun administratorer] (ubestemt) [Flytting=Tillat kun administratorer] (ubestemt)))
 
Linje 1: Linje 1:
==Innledning==
== HTML 5 – ny versjon av HTML og XHTML ==
Sprite er en datamaskingrafikk-komponent og en bitmap grafikk som kan flyttes rundt på skjermen uavhengig av annen grafikk. En sprite er utformet for å være del av en større scene, som kan være et statisk bilde, eller animert grafikk. Eksempler på sprites er objekter i 2D-videospill, ikoner som er en del av et brukergrensesnitt for applikasjoner, og bilder på nettsteder (Christensson, 2012). På 1980-tallet og utover 1990-tallet var sprites den vanligste måten å integrere grafikk i videospill. Å skape sprites er en form for pikselkunst.
Arbeidsgruppen bak XHTML 2 ble avsluttet fjerde kvartal (31. desember 2009), og det finnes ingen planer fra W3Cs ledelse om å fornye gruppens avtale. Dog sier noen kilder at vedlikeholdsarbeidet vil fortsette med XHTML 1.1 DTD (Document Type Definition). Fremtiden ligger med andre ord i den nye HTML 5 standarden, som er utviklet av arbeidsgruppen WHATWG (Web Hypertext Application Technology Working Group). Denne arbeidsgruppen har utviklet forslag på web formularer (Web Forms 2.0), og webapplikasjoner (Web Applications 1.0). Frem til nå har HTML 5 fokusert på webapplikasjonsutvikling. Formålet har vært å tilby nettleserbaserte applikasjoner og multimedia (implementert i standardiseringen). Man kan derfor antyde at HTML 5 i fremtiden kan fremby sterk konkurranse til veletablerte programtilegg for nettlesermarkedet – som Adobe flash og Microsofts Silverlight.


==Historie==
== Det beste fra begge verdenene ==
Bruken av sprites stammer fra arkadespill. Signetics utviklet de første video/grafikkprosessorene som kunne generere sprite-grafikk for hjemmesystemer. Signetics 2636 videoprosessoren ble først anvendt på det tyske videospillet 1292 Advanced Programmable Video System i 1976 (Wikipedia, 2018). I 1977 implementerte Atari VCS, også kjent som Atari 2600, hardware sprite med fem grafiske objekter som kunne flyttes uavhengig innenfor spillområdet (Wikipedia, 2018). Men begrepet «sprite» var ikke i bruk på denne tiden. I programmeringsmanualens kapittel 6 ble VCS sprites kalt «The Moveable Objects Graphics», «Missile Graphics», «Ball Graphics», og «Player Graphics» (Wright, 1979). Hvert av disse objektene (spillerne, missilene, og ballen) hadde sine egne egenskaper og begrensninger. I 1977 ville en Atari 2600 med en 160x192 pikselskjerm med en byte per piksel trengt 30.720 byte minne for displaykortet hvis den ikke hadde brukt sprites. Prisen på 4 kilo RAM i 1977 koster omtrent $ 125, så prisen på minnet til Atari 2600 skjermkortet alene ville kostet $ 900 (Hague, 2013). Til sammenligning var salgsprisen på Atari 2600 kun $ 200. Dette fikk de til ved å bygge et videosystem med monokrom bakgrunn, og med kun to enkeltfargede sprites som dekket én enkelt horisontal linje (Hague, 2013). For mer komplekse skjermbilder skrev spill-koden og omskrev data for hver linje på TV-skjermen, noe som gjorde sitt til at Atari 2600 ble solgt med 128 byte RAM istedenfor 30k (Hague, 2013). Med sprites ble det spart mye minne på at grafiske kunstnere opprettet små 2D-bilder som ble brukt til å representere tegn og andre objekter. Programmerere hentet opp disse sprites i kildekoden, og tilordnede egenskaper som når sprites ble vist og hvordan de samhandlet med andre sprites (Christensson, 2012). Også på 1990-tallet viste spillkonsollene til kreativitet for å vise imponerende grafikk. Skjermbildet ble satt sammen av smarte koder som la sammen fliser, spriter, og paletter uten nevneverdig involvering fra en underdimensjonert 16-biters CPU (Hague, 2013). En dyr PC på 1990-tallet var utvilsomt mer kraftig enn Super Nintendo, men det stoppet ikke spillkonsollen fra å gi en flott spillopplevelse som en ditto PC kunne se langt etter.
HTML 5 vil videreføre ''tidy'', noe som innebærer at feil syntaks i kildekoden, som i motsetning til XHTML, vil kunne avleses i eldre nettlesere. På grunn av at HTML 5 har kompatibilitet med eldre versjoner av HTML, så kan syntaksen minne om gamle tagger. Men dette er ikke helt riktig. Dette av at HTML 5 ikke vil bli basert på SGML (som HTML 4.01, og eldre DTD).


{{#ev:youtube|Tfh0ytz8S0k}}
HTML 5 vil introduserer nye elementer. Moderne nettsteder krever semantiske elementer enn de mye anvendte ''div'' og ''span''. Eksempler på nye elementer som er mer semantiske er navigasjonsblokkene ''nav'', samt blokkene ''header'' og ''footer''. Elementene ''audio'' og ''video'' implementerer multimedia i standardene, og den gode gamle ''embed'' elementet er på vei tilbake i varmen hos W3C. På den annen siden vil mange HTML 4.01 elementer fjernes. Endelig skal stilarkene (CSS) overta for de meget aldrende ''font'' og ''center'' elementene.


==Sprites til andre formål==
Foreløpig konklusjonen er at HTML 5 tar med seg det beste fra begge verdenene XHTML 2 og HTML 5. Hensikten med HTML 5s kompatibilitet er å redusere utviklingskostnadene på både nettsteder og nettlesere. Blant mange hundre av de interessene i arbeidsgruppen bak HTML 5, er AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia og Opera – bare for å nevne noen.
Mens sprites er blitt mindre vanlige i moderne videospill, brukes de fortsatt av programvareutviklere til andre formål. Sprites brukes ofte til å legge til knapper, symboler og andre brukergrensesnittelementer til programmer. Sprites kan være spesielt nyttige for å tilpasse grafikk som ikke støttes av operativsystemets programmeringsgrensesnitt (Christensson, 2012).


===Sprite animasjon===
==== Nyhetene i HTML 5 ====
Sprites kan også brukes til animasjoner, som kan være nyttig i interaktiv applikasjonsutvikling. Sprite animasjoner kan tegnes på HTML5 canvas-elementer som så blir animert med bruken av JavaScript. Diverse bilderuter av en animasjon kan inkluderes i et enkelt bilde, og ved hjelp av HTML5 canvas-elementet og JavaScript, kan en enkelt bilderute tegnes av gangen (Malone, 2014).
{| class="wikitable" style="text-align:left; width:100%; border:1px #aaaaaa solid"
|+Tabell 1.0 – Nye tagger i HTML 5
|-
! Tagger !! Beskrivelse (engelsk)
|-
| <article> || Article
|-
| <aside> || Content aside from the page content
|-
| <audio> || Sound content
|-
| <canvas> || Graphics
|-
| <command> || Command button
|-
| <datalist> || Dropdown list
|-
| <details> || Details of an element
|-
| <dialog> || Dialog
|-
| <embed> || Interactive content or plugin
|-
| <figure> || Group of media content and their caption
|-
| <footer> || Footer (section or page)
|-
| <header> || Header (section or page)
|-
| <hgroup> || Information about a section in a document
|-
| <keygen> || Generated key in a form
|-
| <mark> || Marked text
|-
| <meter> || Measurement within a predefined range
|-
| <nav> || Navigation links
|-
| <output> || Output types
|-
| <progress> || Progress of a task of any kind
|-
| < rp > || Ruby annotations (browsers not supporting ruby element)
|-
| < rt > || Explanation to ruby annotation
|-
| < ruby > || Ruby annotations
|-
| <section> || Defines a section
|-
| <source> || Media resources
|-
| <time> || Date and time
|-
| <video> || Video
|}


===CSS sprites===
== HTML5 portalen ==
Fremveksten av 3D-spill har gjort sprite utdatert, men sprites brukes fremdeles på nettet for navigasjonsknapper, og for å legge til visuell appell til nettsider. Spriteark har lenge vært populært blant webutviklere til å laste inn nettstedgrafikk (Christensson, 2012). Ved å kombinere et stort antall sprites, herunder knapper, navigasjonsgrafikk, bakgrunner med mer til et enkelt bilde, kan alle sprites lastes ned og bufres av en brukers nettleser med en enkelt forespørsel til serveren. Bildene vises da ved hjelp av CSS egenskaper som definerer plasseringene til individuelle sprites innenfor bildet (Christensson, 2012).
For mer informasjon om HTML5 kan du gå til [[HTML5 portal]]. Her finnes liste på HTML5 hypertekstdokumenter på Liavaag.org, samt liste på offisielle HTML5 merker (badges).


==HTTP/2 og sprites==
== Relevante lenker ==
En undersøkelsen utført av Benoît Beraud og Alexandre Masselot, ble det vist at selv om den nye HTTP/2-protokollen forbedrer sidelasteytelsen betydelig, så har tiden ennå ikke kommet for å helt glemme front-end optimaliseringer (Beraud et al, 2015). Konklusjonen på undersøkelsen viste tydelig at optimalisering med sprite fortsatt er relevant, selv med HTTP/2-protokollen.
*Diskusjonsforumet på Liavaag.org
 
** English: [https://www.liavaag.org/forum/YaBB.pl?num=1246579722/ Where is the semantic web going now – back to nesting and tidy errors?]
==Kilder==
**Norsk: [https://www.liavaag.org/forum/YaBB.pl?num=1246582828/ Hvilken retning tar semantisk web nå – tilbake til HTML Tidy feil?]
*Christensson, Per (2012-02-10). ''Sprite Definition''. [ONLINE] Tilgjengelig: https://techterms.com/definition/sprite [2018-08-07]
*Interne lenker (LiavaagWiki)
*Wright, Steve (1979-03-12). ''STELLA PROGRAMMER'S GUIDE''. [ONLINE] Tilgjengelig: http://atarihq.com/danb/files/stella.pdf [2018-08-07]
**Prosjektportalen: [[LiavaagWiki:Prosjektportal]]
*Hague, James (2013-09-10). ''Why Do Dedicated Game Consoles Exist?''. [ONLINE] Tilgjengelig: https://prog21.dadgum.com/181.html [2018-08-07]
***Aktuelt: [[LiavaagWiki:Aktuelt]]
*Malone, William (2014). ''Create a Sprite Animation with HTML5 Canvas and JavaScript''. [ONLINE] Tilgjengelig: http://www.williammalone.com/articles/create-html5-canvas-javascript-sprite-animation/ [2018-08-07]
***Info om [[Cloud Computing]]
*Wikipedia (2018-07-23). ''Sprite (computer graphics)''. [ONLINE] Tilgjengelig: https://en.wikipedia.org/wiki/Sprite_(computer_graphics) [2018-08-07]
*Beraud, Benoît og Masselot, Alexandre (2015-12-21). ''HTTP/2 arrives but sprite sets ain't no dead''. [ONLINE] Tilgjengelig: https://blog.octo.com/en/http2-arrives-but-sprite-sets-aint-no-dead/ [2018-08-07]


<div style="text-align:right; float:right; clear:both;">
<div style="text-align:right; float:right; clear:both;">
<span style="font-size:24px;">[https://www.liavaag.org Liavaag.org]</span>
<span style="font-size:24px;">[https://www.liavaag.org Liavaag.org]</span>
</div>
</div>

Siste sideversjon per 25. sep. 2023 kl. 13:54

HTML 5 – ny versjon av HTML og XHTML

Arbeidsgruppen bak XHTML 2 ble avsluttet fjerde kvartal (31. desember 2009), og det finnes ingen planer fra W3Cs ledelse om å fornye gruppens avtale. Dog sier noen kilder at vedlikeholdsarbeidet vil fortsette med XHTML 1.1 DTD (Document Type Definition). Fremtiden ligger med andre ord i den nye HTML 5 standarden, som er utviklet av arbeidsgruppen WHATWG (Web Hypertext Application Technology Working Group). Denne arbeidsgruppen har utviklet forslag på web formularer (Web Forms 2.0), og webapplikasjoner (Web Applications 1.0). Frem til nå har HTML 5 fokusert på webapplikasjonsutvikling. Formålet har vært å tilby nettleserbaserte applikasjoner og multimedia (implementert i standardiseringen). Man kan derfor antyde at HTML 5 i fremtiden kan fremby sterk konkurranse til veletablerte programtilegg for nettlesermarkedet – som Adobe flash og Microsofts Silverlight.

Det beste fra begge verdenene

HTML 5 vil videreføre tidy, noe som innebærer at feil syntaks i kildekoden, som i motsetning til XHTML, vil kunne avleses i eldre nettlesere. På grunn av at HTML 5 har kompatibilitet med eldre versjoner av HTML, så kan syntaksen minne om gamle tagger. Men dette er ikke helt riktig. Dette av at HTML 5 ikke vil bli basert på SGML (som HTML 4.01, og eldre DTD).

HTML 5 vil introduserer nye elementer. Moderne nettsteder krever semantiske elementer enn de mye anvendte div og span. Eksempler på nye elementer som er mer semantiske er navigasjonsblokkene nav, samt blokkene header og footer. Elementene audio og video implementerer multimedia i standardene, og den gode gamle embed elementet er på vei tilbake i varmen hos W3C. På den annen siden vil mange HTML 4.01 elementer fjernes. Endelig skal stilarkene (CSS) overta for de meget aldrende font og center elementene.

Foreløpig konklusjonen er at HTML 5 tar med seg det beste fra begge verdenene XHTML 2 og HTML 5. Hensikten med HTML 5s kompatibilitet er å redusere utviklingskostnadene på både nettsteder og nettlesere. Blant mange hundre av de interessene i arbeidsgruppen bak HTML 5, er AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia og Opera – bare for å nevne noen.

Nyhetene i HTML 5

Tabell 1.0 – Nye tagger i HTML 5
Tagger Beskrivelse (engelsk)
<article> Article
<aside> Content aside from the page content
<audio> Sound content
<canvas> Graphics
<command> Command button
<datalist> Dropdown list
<details> Details of an element
<dialog> Dialog
<embed> Interactive content or plugin
<figure> Group of media content and their caption
<footer> Footer (section or page)
<header> Header (section or page)
<hgroup> Information about a section in a document
<keygen> Generated key in a form
Marked text
<meter> Measurement within a predefined range
<nav> Navigation links
<output> Output types
<progress> Progress of a task of any kind
< rp > Ruby annotations (browsers not supporting ruby element)
< rt > Explanation to ruby annotation
< ruby > Ruby annotations
<section> Defines a section
<source> Media resources
Date and time
<video> Video

HTML5 portalen

For mer informasjon om HTML5 kan du gå til HTML5 portal. Her finnes liste på HTML5 hypertekstdokumenter på Liavaag.org, samt liste på offisielle HTML5 merker (badges).

Relevante lenker

Liavaag.org

Hentet fra «https://www.liavaag.org/wiki/index.php?title=Sprite_og_CSS_sprites&oldid=294»