webteknologi
DESCRIPTION
Grunnkurs i WebteknologiTRANSCRIPT
Webteknologi for ikke-teknologer
Thordur ArnasonCreuna AS
Dagens Agenda
Del 1: Grunnleggende webteknologi
Del 2: Plattformer, CMS, andre teknologier
Del 3: Web 2.0
Del 1: Grunnleggende webteknologi
Del 2: Plattformer, CMS, andre teknologier
Del 3: Web 2.0
Grunnleggende webteknologi
Protokoller
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:// <- protokollen2. http://www.dagbladet.no <- serveradressen3. http://www.dagbladet.no/index.html <- siden vi vil ha4. Maskinen sjekker mot DNS server for å finne ip-adressen til www.dagbladet.no5. DNS svarer at www.dagbladet.no har ip 81.93.163.1156. Nettleser spør server (81.93.163.115) om siden index.html7. 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
TCP/IP Transport Control Protocol / Internet Protocol. Den grunnleggende protokollen for kommunikasjon på Internet
HTTP Hyper Text Transfer Protocol. Protokollen som benyttes for overføring av nettsider mellom en webserver og en nettleser
HTTPSHyper Text Transfer Protocol Secure. Samme som HTTP, men sørger i tilleg for at trafikk mellom webserver og nettleser er
sikker
URL Uniform Resource Locator. En adresseringmåte som sørger for at du finner riktig side på riktig server med riktig protokoll
IP-adresse Internet Protocol adresse, en tolvsifret talladresse som gir hver maskin på nettet en unik adresse. Eks, 195.000.100.00
DNS Domain Name Server. Også kjent som navnetjener. Server som slår opp domenenavn og gir tilbake riktig IP-adresse
HTML & CO
HTML
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:HTML 1.0
1993:HTML +
1998HTML 4.0
1992:HTML 2.0
1997:HTML 3.2
2000:XHTML
Eksempel
XML(liten avsporing)
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="1.0" encoding="ASCII"?><oppskrift navn="Loff" forberedelsestid="5 minutter" totaltid="3 timer"> <tittel>Vanlig loff</tittel> <ingrediens mengde="9" enhet="desiliter">Siktet hvetemel</ingrediens> <ingrediens mengde="2,5" enhet="teskje">Gjær</ingrediens> <ingrediens mengde="3" enhet="desiliter">Lunket vann</ingrediens> <ingrediens mengde="1,5" enhet="teskje">Salt</ingrediens> <ingrediens mengde="3" enhet="spiseskje">Vegetabilsk olje</ingrediens> <ingrediens mengde="2,5" enhet="spiseskje">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>
XHTML
Extensible Hypertext mark-up language
• HTML beskrevet med XML-regler
• XHTML 1.0 = HTML 4.01
<HTML><head>
<title>Sidetittel</title></head><body>
<h1>Overskrift</h1><p>Tekst og innhold. <b><i>Uthevet, skråstilt tekst</b></i><a href=”http://www.yr.no”>Sjekk været</a>
</body></HTML>
Noen forskjeller mellom HTML og XHTML
HTML XHTML
Lov med store og små bokstaver i tagger<HTML> ... </html>
Bare lov med små bokstaver i tagger<html> ... </html>
Tagger bør, men må ikke stenges <p> En paragraf
Alle tagger må stenges!<p> En paragraf </p>
Enkeltstående tagger (<img>, <hl> osv) må ikke stenges. <img src=”bilde.gif”>
Må stenges!!<img src=”bilde.gif” />
Rekkefølgen på hvordan tagger stenges er ikke å farlig. <b><i>Tekst</b></i>
Rekkefølgen på hvordan tagger stenges må være 100% riktig. <b><i>Tekst</i></b>
<HTML><head>
<title>Sidetittel</title></head><body>
<h1>Overskrift</h1><p>Tekst og innhold. <b><i>Uthevet, skråstilt tekst</b></i><a href=”http://www.yr.no”>Sjekk været</a>
</body></HTML>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns=”http://www.w3.org/1999/xhtml>
<head><title>Sidetittel</title>
</head><body>
<h1>Overskrift</h1><p>Tekst og innhold.</p> <b><i>Uthevet, skråstilt tekst</i></b><a href=”http://www.yr.no”>Sjekk været</a>
</body></html>
Eksempel
CSS
Cascading Style Sheets
• (X)HTML gir begrensede formateringsmuligheter
• CSS er et språk brukt til å definere 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 standardvisning2. I en ekstern CSS-fil3. 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>
Eksempler
Scripting
Javascript
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)
Litt om standarder
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
Del 1: Grunnleggende webteknologi
Del 2: Plattformer, CMS, andre teknologier
Del 3: Web 2.0
Teknologiplattformer
Operativsystem
Webserver
Applikasjon, system
Database
server
Open Source
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
Ingen lisenskostnadSupport ofteutfordring
Enkel plattform - effektiv
Ofte noe meruferdige løsinger
Store utviklings-miljøer
Vanskelig å finnegode konsulenter
Ofte lave driftskrav
Vanskelig å drifte
Operativsystem
Webserver
Applikasjon, system
Database
server
Linux
utviklet i PHP / Python
MySQL
Apache
JAVA
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
Operativsystem
Webserver
Applikasjon, system
Database
server
Linux, Solaris,
Windows
utviklet i Java
Oracle, MySql, DB2,
MS SQL
Apache, JBoss,
Websphere
Fordeler og ulemper
Fordeler Ulemper
Mange modneløsninger
Noe høye lisenskostnader
Fleksibel i teknologivalg
Kan være “vanskelig”
Mange konsulenterOfte dyre prosjekter
Høye driftkrav Stabile løsninger
Microsoft
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
Operativsystem
Webserver
Applikasjon, system
Database
server
Windows
utviklet i .NET
MS SQL
IIS
Fordeler og ulemper
Fordeler Ulemper
Komplett økosystem
Låst inn i Microsoft-verden
Lett å velgeKostnader ofte
uoversiklige
God tilgang på kompetanse
Høy etterspørsel etter konsulenter
Lett å drifteKan være noe
ustabil
Plattform Open Source LAMP JAVA Microsoft
Operativ-system Linux Linux el.
Windows Windows
Web-server Apache
Tomcat/ApacheJBoss
WebSphere
InternetInformation
Server
Database-server MySql Oracle
MS SQL MS SQL
Utviklings-Språk
PHP el.Python JAVA .NET
Web Content Management Systemer
Hva kjennetegner et CMS?
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
DB
DB
Maler
Media
Webside WebserverWebside Internet
CMS system, prinsippskisse
Server
Webserver
Web Content Management System
Database
server
Søketeknologi
Andre relevante teknologier og begreper
Brannmurer
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
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
Web Services
System
A
System
B
Webservice
Webservice
XML
SOA
Rike Klienter
Asyncronus JavascriptAndXML
ActiveX
Java Applets
Web 2.0
Noen tall Twitter har 1 million + bruker per mars i år. Rundt 200.000 er aktive i uken, og
de sender i snitt 15 meldinger per dag. Det er rundt 4 mill. kontaktpunkter mellom brukerne. (Techcrunch)
Facebook har 70 mill. brukere My space har 200 mill. brukere LinkedIn har 17 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
BANK OG FINANSRimelig konservativ bransje, men er det mulig?
HELSETJENESTERSykehus og legetjenester er vel neppe egnet?
SKATTEETATEN
Er det mulig å se for seg sosial software i tilknytning til offentlig skatteløsninger?
[email protected]@gmail.com
http://tar.vox.comhttp://twitter.com/tarhttp://jaiku.com/mctar
http://linkedin.com/in/thordur
http://slideshare.net/tar
Web 2.0 begreper
Wiki
RSS
Sosiale Nettverk
Sosiale Bokmerker
Blogger
Microblogging(Twitter)
[email protected]://creuna.no
http://tar.vox.comhttp://twitter.com/tarhttp://tar.tumblr.com
http://linkedin.com/in/thordurhttp://slideshare.net/tar
Takk for meg!