Skapa html-sidor med Wikiskolas API - Versionshistorik

Hakan den 19 mars 2018 kl. 00.03

2018-03-19T00:03:20Z

← Äldre version		Versionen från 19 mars 2018 kl. 00.03
Rad 1:		Rad 1:
			== Inledning ==

			{{malruta\|'''Religion plus webbutveckling'''

			# Du kommer att lära dig webdesign.
			# Du lär dig från religionstexten eftersom du arbetar praktiskt med den.
			# Du kommer att lära dig hur APIer fungerar
			# Du deltar i utvecklingen av en ny digital bok.
			# Du utforskar en aspekt av framtidens lärande
			}}

			En text i en lärobok är färdig så tillvida att den inte ändras förrän boken kommer i ny upplaga eller förlaget gör en omarbetning av ett digitalt läromedel. En wikitext kan alla med konto bidra med förbättringar till. Nackdelen med många wikisar är att de är tråkiga, fula och tröga att navigera i. Om texten istället publiceras i html-, CSS- och Javascriptmiljö finns det rika möjligheter att presentera innehållet på ett attraktivt sätt men då begränsas istället möjligheterna att förbättra texten. Den instruktion som finns på denna sida erbjuder en lösning som förenar det bästa från wiki-världen med modern webdesign.

			Tanken är att råtexten till religionsboken publiceras på Wikiskola där den kan förbättras successivt. Du skapar en webbplats som hämtar senaste versionen av texten från Wikiskola. Webbplatsen utformar du så som du vill ha den. Andra gör sina versioner av hur texten ska presenteras. När vi ställer samman de bästa designerna får vi ett ständigt aktuellt läromdel med innovativ design och där användaren kan välja sin favorit bland en mängd olika utformningar.

			Det handlar inte bara om religionstexten. Wikiskola innehåller många fler kurser och det API vi använder är detsamma som används på Wikipedias alla projekt och det finns mycket mer fri information att hämta via APIer på andra webplatser. Möjligheterna är enorma - bara visioner, kreativitet och arbete krävs för att realisera dem.

	=== Hämta text från Wikiskolas API ===		=== Hämta text från Wikiskolas API ===
	{\|		{\|

Hakan: /* Hämta endast ett stycke ur en sida */

2018-03-18T23:42:01Z

Hämta endast ett stycke ur en sida

← Äldre version		Versionen från 18 mars 2018 kl. 23.42
Rad 91:		Rad 91:
	Du lägger då till koden rvsection=styckenummer i ditt API-anrop, så här:		Du lägger då till koden rvsection=styckenummer i ditt API-anrop, så här:
	[[Fil:Rvsection.PNG\|800px\|vänster\|Exempel: API-anrop med rvsectin=2 ger andra stycket i texten.]]		[[Fil:Rvsection.PNG\|800px\|vänster\|Exempel: API-anrop med rvsectin=2 ger andra stycket i texten.]]
			{{clear}}

	Du får då detta resultat:		Du får då detta resultat:

	[[Fil:Rvsection stycke2 resultat.PNG\|800px\|vänster]]		[[Fil:Rvsection stycke2 resultat.PNG\|800px\|vänster]]
			{{clear}}

	Nu kan du alltså hämta en sida stycke för stycke och layouta dem individuellt. Det här ger många nya möjligheter för användarinteraktion, navigering och presentation av strukturen i boken.		Nu kan du alltså hämta en sida stycke för stycke och layouta dem individuellt. Det här ger många nya möjligheter för användarinteraktion, navigering och presentation av strukturen i boken.

Hakan: /* Hämta endast ett stycke ur en sida */

2018-03-18T23:41:23Z

Hämta endast ett stycke ur en sida

← Äldre version		Versionen från 18 mars 2018 kl. 23.41
Rad 90:		Rad 90:

	Du lägger då till koden rvsection=styckenummer i ditt API-anrop, så här:		Du lägger då till koden rvsection=styckenummer i ditt API-anrop, så här:
	[[Fil:Rvsection.PNG\|vänster\|Exempel: API-anrop med rvsectin=2 ger andra stycket i texten.]]		[[Fil:Rvsection.PNG\|800px\|vänster\|Exempel: API-anrop med rvsectin=2 ger andra stycket i texten.]]

	Du får då detta resultat:		Du får då detta resultat:

	[[Fil:Rvsection stycke2 resultat.PNG\|vänster]]		[[Fil:Rvsection stycke2 resultat.PNG\|800px\|vänster]]

	Nu kan du alltså hämta en sida stycke för stycke och layouta dem individuellt. Det här ger många nya möjligheter för användarinteraktion, navigering och presentation av strukturen i boken.		Nu kan du alltså hämta en sida stycke för stycke och layouta dem individuellt. Det här ger många nya möjligheter för användarinteraktion, navigering och presentation av strukturen i boken.

Hakan: /* Hämta endast ett stycke ur en sida */

2018-03-18T23:40:39Z

Hämta endast ett stycke ur en sida

← Äldre version		Versionen från 18 mars 2018 kl. 23.40
Rad 90:		Rad 90:

	Du lägger då till koden rvsection=styckenummer i ditt API-anrop, så här:		Du lägger då till koden rvsection=styckenummer i ditt API-anrop, så här:
			[[Fil:Rvsection.PNG\|vänster\|Exempel: API-anrop med rvsectin=2 ger andra stycket i texten.]]

	~~rvsectin=2~~ ger ~~andra stycket~~.		Du får då detta resultat:

			[[Fil:Rvsection stycke2 resultat.PNG\|vänster]]

			Nu kan du alltså hämta en sida stycke för stycke och layouta dem individuellt. Det här ger många nya möjligheter för användarinteraktion, navigering och presentation av strukturen i boken.

	===Utveckling av parse.js===		===Utveckling av parse.js===

Hakan: /* Hämta endast ett stycke ur en sida */

2018-03-18T23:30:13Z

Hämta endast ett stycke ur en sida

← Äldre version		Versionen från 18 mars 2018 kl. 23.30
Rad 87:		Rad 87:
	==== Hämta endast ett stycke ur en sida ====		==== Hämta endast ett stycke ur en sida ====

	Texten från en sida på Wikiskola kan vara för lång för att infogas på ett snyggt sätt i din html-miljö. Antag att du vill ha andra stycket på denna sida: [[Religion_och_vetenskap]]		Texten från en sida på Wikiskola kan vara för lång för att infogas på ett snyggt sätt i din html-miljö. Antag att du vill ha andra stycket på denna sida: [[Religion_och_vetenskap]].

			Du lägger då till koden rvsection=styckenummer i ditt API-anrop, så här:

			rvsectin=2 ger andra stycket.

	===Utveckling av parse.js===		===Utveckling av parse.js===

Hakan: /* Hämta text från Wikiskolas API */

2018-03-18T23:23:54Z

Hämta text från Wikiskolas API

← Äldre version		Versionen från 18 mars 2018 kl. 23.23
Rad 84:		Rad 84:
	[[Fil:Api_fetch1.png\|500px\|höger]]		[[Fil:Api_fetch1.png\|500px\|höger]]
	\|}		\|}

			==== Hämta endast ett stycke ur en sida ====

			Texten från en sida på Wikiskola kan vara för lång för att infogas på ett snyggt sätt i din html-miljö. Antag att du vill ha andra stycket på denna sida: [[Religion_och_vetenskap]]

	===Utveckling av parse.js===		===Utveckling av parse.js===
	Den information som hämtas från Wikiskola är i vanlig text, med Wikiskolas text-formatering. Det vi vill göra är att ändra den texten till den form som du vill ha den. Det ska vi göra genom att ''parsa'' texten. Det är att gå genom texten, bokstav för bokstav och ändra på den om man hittar ett speciellt tecken eller följd av tecken. I filen '''parse.js''' kan du se det som parsas just nu. I detta skede omvandlas bilder i Wikiskola-text till HTML-kod samt radbyten så att de syns på din hemsida. Om du vill utvekla parsern så ska du lägga till fler ''if-satser'' som behandlar de olika fall som kan förekomma.		Den information som hämtas från Wikiskola är i vanlig text, med Wikiskolas text-formatering. Det vi vill göra är att ändra den texten till den form som du vill ha den. Det ska vi göra genom att ''parsa'' texten. Det är att gå genom texten, bokstav för bokstav och ändra på den om man hittar ett speciellt tecken eller följd av tecken. I filen '''parse.js''' kan du se det som parsas just nu. I detta skede omvandlas bilder i Wikiskola-text till HTML-kod samt radbyten så att de syns på din hemsida. Om du vill utvekla parsern så ska du lägga till fler ''if-satser'' som behandlar de olika fall som kan förekomma.

Jens: /* Exempel på saker att utveckla */

2018-02-14T15:28:56Z

Exempel på saker att utveckla

← Äldre version		Versionen från 14 februari 2018 kl. 15.28
Rad 89:		Rad 89:
	*Ordnade listor (raderna börjar med #)		*Ordnade listor (raderna börjar med #)
	Oordnade listor (raderna börjar med )		Oordnade listor (raderna börjar med )
	*Fet-stil (texten är ~~omringat~~ med <nowiki>'''</nowiki>, ex <nowiki>'''hejsan'''</nowiki> blir '''hejsan''')		*Fet-stil (texten är omringad med <nowiki>'''</nowiki>, ex <nowiki>'''hejsan'''</nowiki> blir '''hejsan''')
	*Kursiv (texten är ~~omringat~~ med <nowiki>''</nowiki>, ex <nowiki>''hejsan''</nowiki> blir ''hejsan'')		*Kursiv (texten är omringad med <nowiki>''</nowiki>, ex <nowiki>''hejsan''</nowiki> blir ''hejsan'')
	*Rubriker (texten omringad med olika många = - tecken beroende på vilken nivå av underrubrik det är, ex nivå 4 har 4 st = - tecken runt rubriken)		*Rubriker (texten omringad med olika många = - tecken beroende på vilken nivå av underrubrik det är, ex nivå 4 har 4 st = - tecken runt rubriken)
	*Länkar		*Länkar

Jens: /* Exempel på saker att utveckla */

2018-02-14T15:28:34Z

Exempel på saker att utveckla

← Äldre version		Versionen från 14 februari 2018 kl. 15.28
Rad 87:		Rad 87:
	Den information som hämtas från Wikiskola är i vanlig text, med Wikiskolas text-formatering. Det vi vill göra är att ändra den texten till den form som du vill ha den. Det ska vi göra genom att ''parsa'' texten. Det är att gå genom texten, bokstav för bokstav och ändra på den om man hittar ett speciellt tecken eller följd av tecken. I filen '''parse.js''' kan du se det som parsas just nu. I detta skede omvandlas bilder i Wikiskola-text till HTML-kod samt radbyten så att de syns på din hemsida. Om du vill utvekla parsern så ska du lägga till fler ''if-satser'' som behandlar de olika fall som kan förekomma.		Den information som hämtas från Wikiskola är i vanlig text, med Wikiskolas text-formatering. Det vi vill göra är att ändra den texten till den form som du vill ha den. Det ska vi göra genom att ''parsa'' texten. Det är att gå genom texten, bokstav för bokstav och ändra på den om man hittar ett speciellt tecken eller följd av tecken. I filen '''parse.js''' kan du se det som parsas just nu. I detta skede omvandlas bilder i Wikiskola-text till HTML-kod samt radbyten så att de syns på din hemsida. Om du vill utvekla parsern så ska du lägga till fler ''if-satser'' som behandlar de olika fall som kan förekomma.
	====Exempel på saker att utveckla====		====Exempel på saker att utveckla====
	Ordnade listor (raderna börjar med )		*Ordnade listor (raderna börjar med #)
	*Oordnade listor (raderna börjar med #)		Oordnade listor (raderna börjar med )
	*Fet-stil (texten är omringat med <nowiki>'''</nowiki>, ex <nowiki>'''hejsan'''</nowiki> blir '''hejsan''')		*Fet-stil (texten är omringat med <nowiki>'''</nowiki>, ex <nowiki>'''hejsan'''</nowiki> blir '''hejsan''')
	*Kursiv (texten är omringat med <nowiki>''</nowiki>, ex <nowiki>''hejsan''</nowiki> blir ''hejsan'')		*Kursiv (texten är omringat med <nowiki>''</nowiki>, ex <nowiki>''hejsan''</nowiki> blir ''hejsan'')
	*Rubriker (texten omringad med olika många = - tecken beroende på vilken nivå av underrubrik det är, ex nivå 4 har 4 st = - tecken runt rubriken)		*Rubriker (texten omringad med olika många = - tecken beroende på vilken nivå av underrubrik det är, ex nivå 4 har 4 st = - tecken runt rubriken)
	*Länkar		*Länkar

Jens: /* Utveckling av parse.js */

2018-02-14T15:26:14Z

Utveckling av parse.js

← Äldre version		Versionen från 14 februari 2018 kl. 15.26
Rad 86:		Rad 86:
	===Utveckling av parse.js===		===Utveckling av parse.js===
	Den information som hämtas från Wikiskola är i vanlig text, med Wikiskolas text-formatering. Det vi vill göra är att ändra den texten till den form som du vill ha den. Det ska vi göra genom att ''parsa'' texten. Det är att gå genom texten, bokstav för bokstav och ändra på den om man hittar ett speciellt tecken eller följd av tecken. I filen '''parse.js''' kan du se det som parsas just nu. I detta skede omvandlas bilder i Wikiskola-text till HTML-kod samt radbyten så att de syns på din hemsida. Om du vill utvekla parsern så ska du lägga till fler ''if-satser'' som behandlar de olika fall som kan förekomma.		Den information som hämtas från Wikiskola är i vanlig text, med Wikiskolas text-formatering. Det vi vill göra är att ändra den texten till den form som du vill ha den. Det ska vi göra genom att ''parsa'' texten. Det är att gå genom texten, bokstav för bokstav och ändra på den om man hittar ett speciellt tecken eller följd av tecken. I filen '''parse.js''' kan du se det som parsas just nu. I detta skede omvandlas bilder i Wikiskola-text till HTML-kod samt radbyten så att de syns på din hemsida. Om du vill utvekla parsern så ska du lägga till fler ''if-satser'' som behandlar de olika fall som kan förekomma.
			====Exempel på saker att utveckla====
			Ordnade listor (raderna börjar med )
			*Oordnade listor (raderna börjar med #)
			*Fet-stil (texten är omringat med <nowiki>'''</nowiki>, ex <nowiki>'''hejsan'''</nowiki> blir '''hejsan''')
			*Kursiv (texten är omringat med <nowiki>''</nowiki>, ex <nowiki>''hejsan''</nowiki> blir ''hejsan'')
			*Rubriker (texten omringad med olika många = - tecken beroende på vilken nivå av underrubrik det är, ex nivå 4 har 4 st = - tecken runt rubriken)
			*Länkar

Jens: /* Utveckling av parse.js */

2018-02-14T15:19:50Z

Utveckling av parse.js

← Äldre version		Versionen från 14 februari 2018 kl. 15.19
Rad 85:		Rad 85:
	\|}		\|}
	===Utveckling av parse.js===		===Utveckling av parse.js===
			Den information som hämtas från Wikiskola är i vanlig text, med Wikiskolas text-formatering. Det vi vill göra är att ändra den texten till den form som du vill ha den. Det ska vi göra genom att ''parsa'' texten. Det är att gå genom texten, bokstav för bokstav och ändra på den om man hittar ett speciellt tecken eller följd av tecken. I filen '''parse.js''' kan du se det som parsas just nu. I detta skede omvandlas bilder i Wikiskola-text till HTML-kod samt radbyten så att de syns på din hemsida. Om du vill utvekla parsern så ska du lägga till fler ''if-satser'' som behandlar de olika fall som kan förekomma.