YaBB - Yet another Bulletin Board

Welcome, Guest. Please Login or Register

 
  Home English Norsk HelpLoginRegisterSearch  
 
 

Forum @ Liavaag.org › Norsk generell kategori › Generell oppslagstavle › HTML5 - Hypertext Markup Language

(Moderator: Administrator)
‹ Previous Topic | Next Topic ›
Pages: 1 2 3 
Send Topic Print
HTML5 - Hypertext Markup Language (Read 628034 times)
07/03/09 at 03:00:28  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
 Posts: 290
 *****
HTML5 – Det nye markeringsspråket


XHTML 2.0 dumpet til fordel for HTML 5! Hvilken retning tar semantisk web nå – tilbake til HTML Tidy feil?


Det er nå bestemt at HTML 5 standarden fortsetter utviklingen. Samtidig er XHTML mer eller mindre stadfestet som en blindvei (akkurat som SGML?). Arbeidsgruppen på XHTML 2.0 avsluttes 31. desember 2009. Vedlikeholdsarbeidet på XHTML 1.1 vil fortsette, men betyr dette at vi bør fortsette med XHTML?


Det er mulig HTML 5 som fokuserer på webapplikasjonsutvikling er fremtiden og mer Cloud computing vennlig enn det de meget strikte XHTML standardene er. Dette kan i fremtiden representere en sterk konkurranse til veletablerte program tilegg for nettlesermarkedet som Adobes Flash and Microsofts Silverlight.


Diskuter gjerne her: Er HTML 5 godt for innhold på web 2.0, eller burde W3C gått sterkere mot strømmen og satset hardere på semantisk web?


Kilder

« Last Edit: 02/11/14 at 02:32:10 by Administrator »  
Back to top 
 
IP Logged
 
Reply #1 - 02/23/10 at 02:07:31  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
 Posts: 290
 *****
HTML5 er ny versjon av HTML og XHTML

HTML 5 vil bruke en form for tidy. Feil syntaks i kildekoden vil (i motsetning til XHTML) kunne avleses i eldre nettlesere. Selv om syntaksen i HTML 5 minner om gamle tagger, og har kompatibilitet med eldre versjoner av HTML, så vil ikke HTML 5 baseres på SGML.

HTML 5 vil samtidig introdusere nye elementer som reflekterer moderne nettsteder. Noen av disse er semantiske utskiftninger for den vanlige anvendte div og span elementene. Eksempler på slike utskiftninger er navigasjonsblokkene nav, samt blokkene header og footer. Også multimedia skal standardiseres med elementer som audio og video. Også embed er på vei tilbake i varmen hos W3C.

På den andre siden vil noen elementer som i dag fremdeles anvendes i HTML 4.01 fjernes. Stil arkene (CSS) skal nå endelig ta over for elementer som font og center. Hensikten med HTML 5s kompatibilitet er å redusere utviklingskostnadene på nettlesere og nettsteder. Blant hundrevis av interesser er noen av de i arbeidsgruppen bak HTML 5 AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia og Opera.



Kilde

« Last Edit: 09/17/10 at 03:27:39 by Administrator »  
Back to top 
 
IP Logged
 
Reply #2 - 09/17/10 at 04:00:40  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
 Posts: 290
 *****
Men XHTML var ikke død!


HTML5 vil være den standarden som blir mest kompatibel med nettlesere. Denne standarden bruker HTML MIME type som text/html. Derimot hvis et dokument sendes med XML MIME typen application/xhtml+xml, så blir den behandlet i nettleseren av en XML prosessor.

XML og HTML er forskjellige. Mens minste feil i HTML syntaksen vil bli oversett, vil det i XML forhindre nettleseren å generere dokumentet fult ut. Denne XML syntaksen er det som blir definert som XHTML5.

Document Object Model (DOM) beskriver hvordan HTML- eller XML trestrukturen er representert. DOM, HTML syntaksen og XML kan ikke representere det samme innholdet. For eksempel kan ikke egne navn på tagger (namespace) brukes på HTML syntaksen, men derimot i DOM og XML. Motsatt, så kan noscript brukes med HTML syntaks, men ikke i DOM eller XML. Kommentarer som ”-->" kan anvende med DOM, men hverken med HTML syntaks eller i XML.

Kilder
 
Back to top 
 
IP Logged
 
Reply #3 - 01/28/11 at 20:11:43  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
 Posts: 290
 *****
W3C HTML5 Logo


Teknologien - beskrivelse av ikonenen nedenfor
  1. Connectivity
  2. CSS3 Styling
  3. Device Access
  4. 3D, Graphics, Effects
  5. Multimedia
  6. Performance & Integration
  7. HTML5 Semantics
  8. Offline & Storage
 
HTML5-Logo.png (17 KB | 912 )
HTML5-Logo.png
Back to top 
 
IP Logged
 
Reply #4 - 03/15/11 at 05:54:27  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
 Posts: 290
 *****
Oppdateringer og nye elementer i HTML5


Jeg har nå begynt på prosjektet å konvertere noen av fotoalbumene til HTML5. Overraskende validerer nå noen av disse albumene, til tross for at de faktisk hadde en eller flere feil per bilde i formatet XHTML 1.1 (WAI section 2 AAA).





Fotoalbumene under har kun to eller færre feil. Dette er meget lavt sammenlignet med XHTML 1.1, der de hadde minst én feil per bilde. Det blir mange feil i store fotoalbum!





Under er kilde og referanse på nye elementer i HTML5


Roll Eyes
« Last Edit: 05/04/12 at 21:49:57 by Administrator »  
Back to top 
 
IP Logged
 
Reply #5 - 10/21/12 at 03:34:26  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
 Posts: 290
 *****
Endelig HTML5 nettsider som validerer


Ikke mange nyheter innenfor HTML5 i det siste annet enn at HTML5 blir offisiell webstandard i 2014 – og det planlegges en oppfølger. Det sies også at HTML5.1 vil komme i 2016 og at førsteutkastet til HTML5.2 vil utgis i 2015.

Over sommeren har Liavaag.org oppdatert Nyhetsportalen til HTML5. Denne bygger igjen på London2012 Olympiske portal. Begge portalene validerer.

  Smiley
 
Back to top 
 
IP Logged
 
Reply #6 - 11/13/12 at 01:53:10  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
 Posts: 290
 *****
CSS3 – list-style-type

Mange webutviklere fikk seg en kalddusj da de oppdaget at deres CSS3 stilark ikke lenger validerte. Tidligere uordnede lister (<ul>) brukte nemlig følgende typer: "disc", "circle", "square", "decimal", "decimal-leading-zero", "lower-roman", "upper-roman", "lower-greek", "lower-alpha", "lower-latin", "upper-alpha", "upper-latin", "hebrew", "armenian", "georgian", "cjk-ideographic", "hiragana", "katakana", "hiragana-iroha", "katakana-iroha", "none", eller "inherit".

Code (CSS):
/*
Eksempel på unummerert liste
*/
ul {
	display: block;
}
li {
	list-style-type: decimal-leading-zero;
}

/*
Eksempel på <li> brukt i f.eks menyer
*/
ul {
	display: inline;
}
li {
	list-style-type: none;
}


Valgene over vil rett og slett ikke validere
Dette av at HTML5 ikke støtter attributtvalg (listed-item-type), noe som nå også er innført på CSS3. Uordnede lister (som skal validere) kan bruke typen "inherit", egen URL til punktlisten, eller default verdiene.

Code (CSS):
/*
Eksempel på uordnede lister som validerer
*/
ul {
	display: block;
}
li#method-one {
	list-style-type: inherit;
}
li#method-two {
	list-style: url(my_listed_item.png);
}


Transitional HTML5
For menyer i XHTML 1.1 (også HTML 4.01) kan attributtet inline brukes. <li> vil da automatisk fjerne listemerkingen. Hvis man ikke deklarere noe som helst, vil <li> bruke default verdiene ("disc", "circle", "square" i denne rekkefølgen).

Code (CSS):
/*
Eksempel på <li> brukt i horisontale menyer som validerer
I menyer hvor attributtet "inline" brukes, vil listemerkingen i taggen <li> automatisk bli fjernet.
*/
ul {
	display: inline;
}

/*
Eksempel på <li> brukt i vertikale menyer som validerer
*/
ul {
	display: block;
}

li {
	list-style: none;
}


Konklusjon
I fremtiden vil HTML5 bruke semantisk navigasjon med <nav> elementet i menyer. Derfor vil det bli naturlig å bruke URL til punktlistene, eller rett og slett default-verdiene.
« Last Edit: 11/13/12 at 03:38:28 by Administrator »  
Back to top 
 
IP Logged
 
Reply #7 - 11/28/12 at 21:24:28  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
 Posts: 290
 *****
CSS3 – list-style-type validerer igjen?!

I post #7 kunne man lese at:

Administrator wrote on 11/13/12 at 01:53:10:
Mange webutviklere fikk seg en kalddusj da de oppdaget at deres CSS3 stilark ikke lenger validerte. Tidligere uordnede lister (<ul>) brukte nemlig følgende typer: "disc", "circle", "square", "decimal", "decimal-leading-zero", "lower-roman", "upper-roman", "lower-greek", "lower-alpha", "lower-latin", "upper-alpha", "upper-latin", "hebrew", "armenian", "georgian", "cjk-ideographic", "hiragana", "katakana", "hiragana-iroha", "katakana-iroha", "none", eller "inherit".


Nå validerer imidlertid attributtvalg (listed-item-type), også på CSS3 og HTML5. Dette beviser at det var litt tidlig å trekke konklusjonen i #7:

Administrator wrote on 11/13/12 at 01:53:10:
I fremtiden vil HTML5 bruke semantisk navigasjon med <nav> elementet i menyer. Derfor vil det bli naturlig å bruke URL til punktlistene, eller rett og slett default-verdiene.



Med andre ord ble det litt ekstra arbeid for de av oss som våknet til en kalddusj i starten av november. Jeg tror fremdeles at #7 er nyttig info til å lage menyer (ellers ville jeg slettet den). Uansett så skal det virkelig bli spennende å se utviklingen til HTML5 og CSS3 fremover.
 
Back to top 
 
IP Logged
 
Reply #8 - 04/09/13 at 01:01:37  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
 Posts: 290
 *****
Responsive webdesign (RWD) og Adaptivt webdesign


Responsive web design (RWD) innebærer at en webside forandres etter skjermoppløsning – eller som i praksis støtter alle skjermoppløsninger. Dette betyr at samme HTML dokumentene brukes på alt fra desktopper, lapptopper, nettbrett, smarttelefoner og mobiltelefoner. Utviklingen av smarttelefoner og apper har helt klart påvirket utviklingen av RWD.


RWD bruker CSS3 media spørringer (Media Queries), en videreutvikling av @media regelen, for å tilpasse layouten. Noen mener RWD bør oppfylle tre krav:

  1. Fleksible grids
  2. Fleksible bilder
  3. Media Queries


Tidvis ønsker man ikke fleksible bilder og grids, men kun media spørringer. Utover at man da kan kombinere absolutte og relative verdier i CSS-utviklingen, er det også enklere å tilpasse eksisterende webdesign som i praksis støtter alle skjermoppløsninger. Dette benevnes også ofte som adaptive webdesign.

Code (CSS):
@media only screen and (min-width:640px) {
	div#vga {
		color: #000000;
		background: url('img/vga.png') repeat-y;
	}
}
@media only screen and (min-width:800px) {
	div#svga {
		background: url('img/svga.png') repeat-y;
	}
}
@media only screen and (min-width:1280px) {
	div#sxga {
		background: url('img/sxga.png') repeat-y;
	}
}
@media only screen and (min-width:1600px) {
	div#uxga {
		background: url('img/uxga.png') repeat-y;
	}
}
@media only screen and (min-width:1920px) {
	div#wuxga {
		background: url('img/wuxga.png') repeat-y;
	}
}
@media only screen and (min-width:1920px) {
	div#hd1080 {
		height:1080px;
		background: url('img/hd1080.png') repeat-y;
	}
}


Kilder
« Last Edit: 04/09/13 at 21:36:00 by Administrator »  
Back to top 
 
IP Logged
 
Reply #9 - 04/22/13 at 04:08:12  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
 Posts: 290
 *****
Responsive webdesign (RWD): Tilpasse nettsiden til smarttelefoner med 720px og 1080px oppløsning


Hvordan tilpasser man nettsiden sin til smarttelefoner, uten å ty til egne apper? Løsningen er å bruke CSS3 til de enkelte media typene, eller media spørringer (Engelsk: Media Queries). Ofte er det greit å ha mer lettleste menyer og innhold når telefonen brukes stående. Med andre ord kan det være greit å skille mellom portrett og landskapsmodus på smarttelefonen. I eksempelet under ble Samsung Galaxy S3 brukt. Den bruker som kjent Android og har skjermoppløsning på 1,280 x 720 piksler (landskap x portrett). Det er også et eksempel for den kommende Galaxy S4, som bruker full HD oppløsning på henholdsvis 1920px x 1080px.

Code (CSS):
/*
Målrette media CSS3 mediesøk mot Galaxy S3 (og S4)
*/
body {
	font-size:14px;
}
/*
Galaxy S3 (HD 720p)
*/
@media only screen and (max-device-width:720px) and (orientation:portrait) {
	body {
		font-size:20px;
	}
}
@media only screen and (max-device-width:1280px) and (orientation:landscape) {
  	body {
		font-size:16px;
	}
}
/*
Galaxy S4 (HD 1080p)
*/
@media only screen and (max-device-width:1080px) and (orientation:portrait) {
	body {
		font-size:18px;
	}
}
@media only screen and (max-device-width:1920px) and (orientation:landscape) {
  	body {
		font-size:14px;
	}
}
« Last Edit: 04/24/13 at 04:02:00 by Administrator »  
Back to top 
 
IP Logged
 
Reply #10 - 04/24/13 at 04:06:37  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
 Posts: 290
 *****
Bruke responsive webdesign (RWD) i eldre nettlesere? Løsningen er å inkluder Media Queries JavaScript


Internet Explorer 8 og eldre versjoner støtter ikke CSS3 media spørringer (Media Queries). En løsning er å glemme disse nettleserne. En annen løsning er å tilsette følgende kode til hodet (head elementet) i dokumentet:

Code (HTML):
<!--[if lt IE 9]>
	<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->


Ved å legge til CSS3-mediaqueries.js JavaScript-filen, vil du aktiverer eldre nettlesere til å støtte CSS3 media spørringer.  Roll Eyes
« Last Edit: 02/14/14 at 05:01:15 by Administrator »  
Back to top 
 
IP Logged
 
Reply #11 - 04/24/13 at 04:36:11  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
 Posts: 290
 *****
Eksempel på bruk av de nye HTML5-elementer


Administrator wrote on 02/23/10 at 02:47:38:
New tags (and some replacements)

New Tags Definitions
<article> Article
<aside> Content aside from the page content


I innlegget ovenfor viste jeg noen eksempler på nye koder i HTML5. Nedenfor har jeg laget to enkle eksempler som viser hovedstrukturen i oppsettet.

XHTML 1.1 med div konteinere

Code (HTML):
<!-- XHTML 1.1 hovedstruktur -->
<div id="header">
	<h1>London Galleriet</h1>
	<div id="nav">
		<ul>
			<li><a href="../">Hjem</a></li>
			<li><a href="../Meny/">Meny</a></li>
		</ul>
	</div>
</div>
<div id="aside">
	<h2>Flere gallerier</h2>
	<img src="img/London.jpg" width="200" height="200" alt="London Tower">
</div>
<div id="content">
	<div id="london-gallery">
		<!-- Innhold... -->
	</div>
</div>
<div id="footer">
	<p>&copy; 2013 Liavaag.org</p>
</div>


Under den samme strukturen, men med HTML5 elementene

Code (HTML):
<!-- HTML5 hovedstruktur -->
<header>
	<h1>London Galleriet</h1>
	<nav>
		<ul>
			<li><a href="../">Hjem</a></li>
			<li><a href="../Meny/">Meny</a></li>
		</ul>
	</nav>
</header>
<aside>
	<h2>Flere gallerier</h2>
	<img src="img/London.jpg" width="200" height="200" alt="London Tower">
</aside>
<section>
	<article id="london-galleriet">
		<!-- Innhold... -->
	</article>
</section>
<footer>
	<p>&copy; 2013 Liavaag.org</p>
</footer>


Eldre nettlesere
Internet Explorer 8 og eldre nettlesere støtter ikke de nye HTML5-elementene som <header>, <aside>, <footer> osv. Inkluder derfor koden under i hodet (head elementet). Da vil IE8 og eldre nettlesere erkjenne de nye elementene:

Code (HTML):
<!--[if lt IE 9]>
	<script src="http://www.liavaag.org/common/js/html5shiv.js"></script>
<![endif]-->
« Last Edit: 05/04/15 at 14:12:40 by Administrator »  
Back to top 
 
IP Logged
 
Reply #12 - 04/29/13 at 01:34:30  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
 Posts: 290
 *****
Administrator wrote on 04/24/13 at 04:36:11:
Eksempel på bruk av de nye HTML5-elementer

[...]

Eldre nettlesere
Internet Explorer 8 og eldre nettlesere støtter ikke de nye HTML5-elementene som <header>, <aside>, <footer> osv. Inkluder derfor koden under i hodet (head elementet). Da vil IE8 og eldre nettlesere erkjenne de nye elementene:

Code (HTML):
<!--[if lt IE 9]>
	<script src="http://www.liavaag.org/common/js/html5shiv.js"></script>
<![endif]-->


HTML5 Shiv – HTML5 Internet Explorer1 aktiveringsscript


HTML5 Shiv er et script som legger til nye HTML5-elementer til foreldede nettlesere. Last ned scriptet (se nedenfor) og legg det inn før <body> elementet, dvs. i dokumentets hode. For best ytelse kan det være smart å inkludere CSS først, deretter dette scriptet. Kildekoden er dual lisensiert under MIT og GPL versjon 2 lisensene.


1Aktiverer HTML5-elementer for IE 6-9, Safari 4.x, iPhone 3.x, og Firefox 3.x.


Kilder
« Last Edit: 04/29/13 at 05:04:24 by Administrator »  
Back to top 
 
IP Logged
 
Reply #13 - 04/29/13 at 06:33:27  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
 Posts: 290
 *****
Lag header koder for foreldede Internet Explorer nettlesere


Programmere responsive webdesign betyr at webutviklerne ofte bruker HTML5-elementer og CSS3, som eldre nettlesere ikke støtter (helt opp til IE8). Men disse foreldede nettleserne støtter heldigvis kommentarkoder. Disse kodene må plasseres i hodet på HTML-dokumentet. Som eksemplene nedenfor viser, fungerer kodene både på stilark og skript.

Code (HTML):
<head>
<link rel="stylesheet" type="text/css" href="default.css" />


<!-- All IE versjonene -->
<!--[if IE]>
	<link rel="stylesheet" type="text/css" href="alle-ie.css" />
<![endif]-->


<!—Alle untaken IE -->
<!--[if !IE]>
	<script src="ikke-ie.js"></script>
<![endif]-->


<!-- Kun IE7 -->
<!--[if IE 7]>
	<script src="kun-ie.js"></script>
<![endif]-->


<!-- IE8 og eldre (lavere) -->
<!--[if lt IE 9]>
	<link rel="stylesheet" type="text/css" href="ie8-og-eldre.css" />
<![endif]-->


<!-- IE 8 og nyere (høyere) -->
<!--[if gt IE 7]>
	<link rel="stylesheet" type="text/css" href="ie8-og-nyere.css" />
<![endif]-->
</head>
<body>
	<h1>Hallo verden!</h1>
</body>


Om hacks

Code (CSS):
/* IE8 støtte */
#div {
	height:480px\0/;
}

/* IE7 og IE8 støtte */
#div {
	height:480px\9;
}

/* Understreksfilter IE7 og senere */
#div {
	min-height:480px;
	_height:480px;
}

/* IE7 støtte */
*+html #div {
	height:480px;
}

/* IE6 støtte */
* html #div {
	height:480px;
}

/* Skjul IE6 og elder (lavere) */
#div {
	height/**/: 480px;
}

html > body #div {
	height:480px;
}
Huh

Såkalte hacks er en dårlig idé, fordi de ikke er standardiserte, og du kan dermed ikke forutsi hvordan oppfører seg i fremtidige nettlesere. Det er derfor responsive web design er en langt bedre idé.


Kilde
CSS-Tricks: How To Create an IE-Only Stylesheet
 
Back to top 
 
IP Logged
 
Reply #14 - 08/28/13 at 23:38:20  

Administrator   Offline
YaBB Administrator
Welcome to My Bulletin
Board
Oslo

Gender: male
 Posts: 290
 *****
target="_blank" i HTML5?


Å bruke target="_blank" til linker i HTML har vært de facto metoden for å åpne lenker i nye vinduer. Med XHTML 1.0 Strict og XHTML 1.1 ble denne metoden avskrevet, fordi dette kunne forvirre brukeren. Dessuten fungerte ikke tilbake-knappen på nettleseren, da den nye fanen, eller vinduet, ikke beholdt nettleserloggen. Dette synet på target="_blank" har nå imidlertid endret seg. W3C har nå foreløpig tillat bruk av target="_blank" i HTML5…


Videre lesning
W3C - A valid browsing context name or keyword (engelsk)
 
Back to top 
 
IP Logged
 
Pages: 1 2 3 
Send Topic Print
‹ Previous Topic | Next Topic ›
« Home ‹ Board Top of this page