Webteknologi Hoesten 2008

Webteknologi for ikke-teknologer

Dagens Agenda

Del 1: Grunnleggende webteknologi

Del 2: Plattformer, CMS, andre teknologier

Del 3: Web 2.0

Lenker

• http://w3schools.org
• http://w3c.org
• http://commoncraft.com (videoer)

Del 1: Grunnleggende webteknologi

Del 2: Plattformer, CMS, andre teknologier

Del 3: Web 2.0

Din nettleser ber om en side fra en server

Server sender siden tilbake til deg

Hva skjer når vi henter en side

1. http:// <- protokollen
2. http://www.dagbladet.no <- serveradressen
3. http://www.dagbladet.no/index.html <- siden vi vil ha
4. Maskinen sjekker mot DNS server for å finne ip-adressen
til www.dagbladet.no
5. DNS svarer at www.dagbladet.no har ip 81.93.163.115
6. Nettleser spør server (81.93.163.115) om siden index.html
7. Server svarer med å sende tilbake index.html og alle
tilhørende elementer (bilder etc.)
8. Nettleser bygger opp siden og viser den til deg

AKRONYMANIA

Akronym Betydning

Transport Control Protocol / Internet Protocol. Den
TCP/IP
grunnleggende protokollen for kommunikasjon på Internet

Hyper Text Transfer Protocol. Protokollen som benyttes for
HTTP
overføring av nettsider mellom en webserver og en nettleser

Hyper Text Transfer Protocol Secure. Samme som HTTP, men
HTTPS sørger i tilleg for at traﬁkk mellom webserver og nettleser er
sikker

Uniform Resource Locator. En adresseringmåte som sørger for at
URL
du ﬁnner riktig side på riktig server med riktig protokoll

Internet Protocol adresse, en tolvsifret talladresse som gir hver
IP-adresse
maskin på nettet en unik adresse. Eks, 195.000.100.00

Domain Name Server. Også kjent som navnetjener. Server som slår
DNS
opp domenenavn og gir tilbake riktig IP-adresse

Hypertext mark-up language

• Markeringsspråk
• Beskriver innhold og hyperlenking
mellom nettsider
• Kan til en viss grad beskrive
utseende og semantikk

<html>
<head>
<title>Sidetittel</title>
</head>
<body>
<h1>Overskrift</h1>
Tekst og innhold.
<a href=”http://www.yr.no”>Sjekk været</a>
</body>
</html>

Hypertext mark-up language

▪
h1 (Header 1) - Overskriften på dokumentet

▪
h2 - h6 (Header 2 - Header 6) - Underoverskrifter (angir underseksjoner)

▪
table (Table) - Lager en tabell

▪
ul (Unordered List) - Punktliste

▪
ol (Ordered List) - Nummerert liste

▪
br (Break) - Linjeskift

▪
div (Division) - En seksjon i dokumentet

▪
p (Paragraph) - Et avsnitt, vises som regel med en blank linje over og under

▪
strong (Strong) - Indikerer viktig tekst, vises vanligvis i fete typer

▪
b (Bold) - Gir fet skrift, men ingen viktighetshentydning

▪
em (Emphasis) - Indikerer vektlagt tekst, vises normalt i kursiv

▪
i (Italics) - Gir kursiv tekst

▪
a (Anchor) - En lenke til en annen ressurs på nettet (nettside, e-postadresse,
nyhetsgruppe etc.)
•

1991: 1993: 1998
HTML 1.0 HTML + HTML 4.0

1992: 1997: 2000:
HTML 2.0 HTML 3.2 XHTML

XML på 90 sekunder

• Extensible markup language
• XML er en måte å strukturere eller strukturert beskrive data
ved hjelp av tagger

• Et dominerende og viktig format i dag
• XML er utvidbart så lenge man holder seg til reglene
(HTML er for eksempel ikke utvidbart)

Eksempel

•Vi skal beskrive en oppskrift:

<?xml version=quot;1.0quot; encoding=quot;ASCIIquot;?>
<oppskrift navn=quot;Loffquot; forberedelsestid=quot;5 minutterquot; totaltid=quot;3 timerquot;>
<tittel>Vanlig loff</tittel>
<ingrediens mengde=quot;9quot; enhet=quot;desiliterquot;>Siktet hvetemel</ingrediens>
<ingrediens mengde=quot;2,5quot; enhet=quot;teskjequot;>Gjær</ingrediens>
<ingrediens mengde=quot;3quot; enhet=quot;desiliterquot;>Lunket vann</ingrediens>
<ingrediens mengde=quot;1,5quot; enhet=quot;teskjequot;>Salt</ingrediens>
<ingrediens mengde=quot;3quot; enhet=quot;spiseskjequot;>Vegetabilsk olje</ingrediens>
<ingrediens mengde=quot;2,5quot; enhet=quot;spiseskjequot;>Sukker</ingrediens>
<fremgangsmåte>
<trinn>Bland alle ingredienser og kna grundig.</trinn>
<trinn>Dekk over med et klede og sett til heving i et varmt rom.</trinn>
<trinn>Kna på nytt, legg i en form og stek ved 200 grader Celsius i 1 time.</trinn>
</fremgangsmåte>
</oppskrift>

Extensible Hypertext mark-up language

• HTML beskrevet med XML-regler
• XHTML 1.0 = HTML 4.01

<HTML>
<head>
</head>
<body>
<h1>Overskrift</h1>
<p>Tekst og innhold.
<b><i>Uthevet, skråstilt tekst</b></i>
</body>
</HTML>

Noen forskjeller mellom HTML og XHTML

HTML XHTML
Lov med store og små bokstaver i tagger Bare lov med små bokstaver i tagger
<HTML> ... </html> <html> ... </html>

Tagger bør, men må ikke stenges Alle tagger må stenges!
<p> En paragraf <p> En paragraf </p>

Enkeltstående tagger (<img>, <hl> osv) må ikke Må stenges!!
stenges. <img src=”bilde.gif”> <img src=”bilde.gif” />

Rekkefølgen på hvordan tagger stenges er ikke å Rekkefølgen på hvordan tagger stenges må være
farlig. <b><i>Tekst</b></i> 100% riktig. <b><i>Tekst</i></b>

<HTML>
<head>
</head>
<body>
<h1>Overskrift</h1>
<p>Tekst og innhold.
<b><i>Uthevet, skråstilt tekst</b></i>
</body>
</HTML>

<!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Transitional//ENquot; quot;http://www.w3.org/TR/xhtml1/
DTD/xhtml1-transitional.dtdquot;>
<html xmlns=”http://www.w3.org/1999/xhtml>
<head>
</head>
<body>
<h1>Overskrift</h1>
<p>Tekst og innhold.</p>
<b><i>Uthevet, skråstilt tekst</i></b>
</body>
</html>

Cascading Style Sheets

• (X)HTML gir begrensede formateringsmuligheter
• CSS er et språk brukt til å deﬁnere utseende
• XHTML skal bare brukes for struktur og semantikk
• Ble utviklet for å løse et problem...

Hvorfor Cascading?

• Det er fire måte en stil eller et utseende kan bli beskrevet:
1. Nettleserens standardvisning
2. I en ekstern CSS-fil
3. I selve xhtml-dokumentet i <head>
4. I selve html taggen, eks <h1>

• CSS-beskrivelsen nærmest taggen vinner alltid. Dvs. 4 slår
3 som slår 2 som slår 1....
•

Struktur

• CSS språket er bygd på en enkel struktur
selector {property : value}

f.eks

body {color: yellow}

• Skal man beskrive mer enn en egenskap så må man skille
med semikolon:

b {font-family: arial; color: green}

Struktur #2

•Man kan gruppere:
h1,h2,h3 {color: blue}

• Man kan lage seg klasser:
p.right {text-align: right}
p.center {text-align: center}

dette brukes da i HTML slik:

<p class=”center”> Sentrert tekst</p>

Javascript

• Javascript ble utviklet for å kunne gjøre mer på klientsiden
• Har sine røtter fra 1995 / Netscape Livescript
• Java-delen av navnet har det fordi det ligner litt på java i
struktur

• Men har egentlig lite til felles med Java

Javascript #2

• Javascript gir muligheter til å gjøre mange nyttige ting
direkte i nettleseren (eksempel)

AJAX
(det kommer vi tilbake til senere i dag)

Standardisering er viktig

• Uten standarder får vi kaos. Og kaos har vi hatt i mange år.
• Krigen mellom Netscape og Microsoft på 90 tallet
• Vi har nå sterke standardseringsorganer (W3C, ECMA)
• Men standarder er mer enn hvordan nettlesere skal tolke
og vise sider....

XHTML / HTML 4.0.2

• Sørger for at flest mulig sider ser likest mulig ut i flest mulig
nettlesere... IE only dagene er heldigvis forbi.

• Den strenge strukturen i XML gjør at det er lettere for
nettlesere å entydig tolke sider

• Denne standarden har vært stort sett stabil i 7-8 år.

WAI

• Hvorfor WAI? Hvor stilles det krav til at løsninger skal
tilfredstille WAI krav?

• Det handler om tilgjengelighet.
• Hvorfor er dette viktig?
• Hvorfor er dette vanskelig?

WAI #2

• WCAG
• ATAG
• UAAG
• WCAG A, AA, AAA

Operativsystem

Webserver

Applikasjon, system

Database
server

Open Source som plattform

• Snakker som regel om en LAMP-basert løsning
(Linux, Apache, MySQL, PHP/Python)

• Alle komponenter må være basert på fri kildekode
• Dette er en plattform som øker i popularitet, spesielt det
offentlige har satt fokus på bruk av fri kildekode

Fordeler og ulemper

Fordeler Ulemper
Support ofte
Ingen lisenskostnad
utfordring

Enkel plattform - Ofte noe mer
effektiv uferdige løsinger

Store utviklings- Vanskelig å ﬁnne
miljøer gode konsulenter

Ofte lave Vanskelig å
driftskrav drifte

Linux

Operativsystem
Apache
Webserver
utviklet i
PHP / Python
Applikasjon, system

MySQL

Database
server

Java som plattform

• En populær og moden plattform. Ofte mer “profesjonell”
enn open-souce samtidig mer åpen en Microsoft

• Store, tunge systemer kjører på Java-plattform. Moden og
relativt stabil

• Dette er en plattform som brukes veldig mye innen bank/
finans, men benyttes også for en rekke CMSer

Linux,
Solaris,
Windows

Apache, Operativsystem
JBoss,
Websphere Webserver

utviklet i Java
Applikasjon, system

Oracle,
MySql, DB2,
MS SQL
Database
server

Fordeler og ulemper

Fordeler Ulemper
Mange modne Noe høye
løsninger lisenskostnader

Fleksibel i Kan være
teknologivalg “vanskelig”

Ofte dyre
Mange konsulenter
prosjekter

Stabile løsninger
Høye driftkrav

Microsoft som plattform

• Microsoft tilbyr et komplett økosystem - alle komponenter
kan være utviklet av Microsoft.

•
• Microsoft .NET er en moden plattform og spiller veldig godt
sammen med Internet Information Server og MS SQL.

• Lett å utvikle løsninger, vanskelig å utvikle gode løsninger

Windows

Operativsystem
IIS
Webserver

utviklet i .NET
Applikasjon, system

MS SQL

Database
server

Fordeler og ulemper

Fordeler Ulemper
Komplett Låst inn i
økosystem Microsoft-verden

Kostnader ofte
Lett å velge
uoversiklige

God tilgang på Høy etterspørsel
kompetanse etter konsulenter

Kan være noe
Lett å drifte
ustabil

Open Source
Plattform JAVA Microsoft
LAMP

Operativ- Linux el.
Linux Windows
system Windows

Tomcat/Apache Internet
Web-
Apache JBoss Information
server
WebSphere Server
Database- Oracle
MySql MS SQL
server MS SQL

Utviklings- PHP el.
JAVA .NET
Språk Python

Web Content Management Systemer

WCMS
• Publisering av innhold til Web
• Publiseringsgrensesnitt
• Administrasjonsgrensesnitt
• Innholdsarkiv
• Mediearkiv
• Malsett
• Publiseringsprosess
• Rettighetsstyring, redaksjonell prosess
• Integrasjonsmuligheter
• Publisering til flere kanaler (eks. RSS, epost)
• annet?

Publiseringsprosess

DB Innhold

Maler Webside Webserver Internet
DB

DB Media

CMS system, prinsippskisse

Server

Webserver

Web Content
Management System

Database
server

Andre relevante teknologier og begreper

Brannmurer

• Ble til som svar på et problem: dårlig sikkerhet
• Brannmurer beskytter interne systemer fra det åpne nettet
• Styrer og filterer trafikk mellom “utsiden” og “innsiden”

• Det finnes brannmurer over alt. Nesten alle bedrifter og
privatpersoner tilkoblet Internet har det.

Integrasjon

• Å integrere i teknologiverdenen betyr å få to eller flere
systemer til å utveksle informasjon.

• Det finnes en rekke måter å integrere systemer på
• Ofte en veldig kostnadsdrivende oppgave hvis ikke det
finnes gode og kompatible grensesnitt systemene i mellom

Webservice

Webservice
System System
A XML B

Noen tall
 Twitter har 5,6 million brukere i september 2008. Til sammen er det twitret
(sendt) over en milliard meldinger. (Techcrunch)
 Facebook har 90 mill. brukere
 My space har 200 mill. brukere
 LinkedIn har 19 mill. brukere

Hva er web 2.0?
 Web som en plattform
 Applikasjoner som hever seg over en spesifikk klient
 Data er det nye ”Intel inside”
 Utnytte ”kollektiv intelligens”
 Lettvektede forretningsmodeller
 Rike internettapplikasjoner

Source: McKinsey Global
Survey; How Businesses are
Using Web 2.0; January
2007

Rimelig konservativ bransje, men er det mulig?

BANK OG FINANS

Sykehus og legetjenester er vel neppe egnet?

HELSETJENESTER

Er det mulig å se for seg sosial software i tilknytning til offentlig
skatteløsninger?

SKATTEETATEN

Takk for meg!
tar@creuna.no
http://creuna.no

http://tar.vox.com
http://twitter.com/tar
http://tar.tumblr.com
http://linkedin.com/in/thordur
http://slideshare.net/tar

Webteknologi Hoesten 2008

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (20)

Semelhante a Webteknologi Hoesten 2008

Semelhante a Webteknologi Hoesten 2008 (9)

Mais de Thordur Arnason

Mais de Thordur Arnason (8)

Webteknologi Hoesten 2008