Webteknologi for ikke-teknologer
Thordur Arnason
  Creuna 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:// <- protokollen
2. http://www.dagbladet.no <- serveradressen
3. http://www.dagb...
AKRONYMANIA


Akronym                                 Betydning


                     Transport Control Protocol / Intern...
HTML & CO
HTML
Hypertext mark-up language

• Markeringsspråk
• Beskriver innhold og hyperlenking
mellom nettsider
• Kan til en viss grad ...
Hypertext mark-up language


 ▪
   h1 (Header 1) - Overskriften på dokumentet

 ▪
   h2 - h6 (Header 2 - Header 6) - Under...
1991:                 1993:                1998
HTML 1.0              HTML +              HTML 4.0




            1992:  ...
Eksempel
XML
(liten avsporing)
XML på 90 sekunder

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



•Vi skal beskrive en oppskrift:


<?xml version=quot;1.0quot; encoding=quot;ASCIIquot;?>
<oppskrift navn=quot;...
XHTML
Extensible Hypertext mark-up language


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


            <HTML>
     ...
Noen forskjeller mellom HTML og XHTML




                 HTML                                            XHTML
   Lov me...
<HTML>
   <head>
      <title>Sidetittel</title>
   </head>
   <body>
      <h1>Overskrift</h1>
      <p>Tekst og innhold....
Eksempel
CSS
Cascading Style Sheets


• (X)HTML gir begrensede formateringsmuligheter
• CSS er et språk brukt til å definere utseende
• ...
Hvorfor Cascading?

• Det er fire måte en stil eller et utseende kan bli beskrevet:
1. Nettleserens standardvisning
2. I e...
Struktur

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

f.eks

body {color: yellow}


• Skal man...
Struktur #2


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

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




• Javascript ble utviklet for å kunne gjøre mer på klientsiden
• Har sine røtter fra 1995 / Netscape Livesc...
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 Mic...
XHTML / HTML 4.0.2


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


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

• Det handler om tilgjengelighet...
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 kompo...
Fordeler og ulemper



    Fordeler            Ulemper
                         Support ofte
 Ingen lisenskostnad
        ...
Linux


          Operativsystem
Apache
             Webserver
                                         utviklet i
       ...
JAVA
Java som plattform


• En populær og moden plattform. Ofte mer “profesjonell”
enn open-souce samtidig mer åpen en Microsof...
Linux,
                                   Solaris,
                                  Windows

Apache,      Operativsystem
...
Fordeler og ulemper



   Fordeler           Ulemper
   Mange modne           Noe høye
     løsninger       lisenskostnade...
Microsoft
Microsoft som plattform


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

•
•...
Windows


       Operativsystem
IIS
          Webserver

                                 utviklet i .NET
      Applikasjo...
Fordeler og ulemper



  Fordeler           Ulemper
    Komplett           Låst inn i
   økosystem       Microsoft-verden
...
Open Source
Plattform                       JAVA        Microsoft
                LAMP

Operativ-                     Linu...
Web Content Management Systemer
Hva kjennetegner et CMS?
WCMS
• Publisering av innhold til Web
• Publiseringsgrensesnitt
• Administrasjonsgrensesnitt
• Innholdsarkiv
• Mediearkiv
...
Publiseringsprosess




DB   Innhold




     Maler            Webside   Webserver   Internet
DB



DB   Media
CMS system, prinsippskisse



               Server

              Webserver


             Web Content
          Manageme...
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 nette...
Integrasjon
Integrasjon


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

• Det finn...
Web Services
Webservice




                            Webservice
System                                   System
  A                 ...
SOA
Rike Klienter
Asyncronus
Javascript
And
XML
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 meld...
Hva er web 2.0?
    Web som en plattform
    Applikasjoner som hever seg over en spesifikk klient
    Data er det nye ”...
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
tar@creuna.no
    thordur@gmail.com

       http://tar.vox.com
    http://twitter.com/tar
    http://jaiku.com/mctar
http:...
Web 2.0 begreper
Wiki
RSS
Sosiale Nettverk
Sosiale Bokmerker
Blogger
Microblogging
  (Twitter)
Takk for meg!

       tar@creuna.no
      http://creuna.no
      http://tar.vox.com
    http://twitter.com/tar
     http:/...
Webteknologi
Webteknologi
Webteknologi
Webteknologi
Webteknologi
Webteknologi
Webteknologi
Webteknologi
Webteknologi
Webteknologi
Webteknologi
Webteknologi
Webteknologi
Webteknologi
Webteknologi
Webteknologi
Webteknologi
Webteknologi
Webteknologi
Webteknologi
Webteknologi
Webteknologi
Webteknologi
Upcoming SlideShare
Loading in...5
×

Webteknologi

944

Published on

Grunnkurs i Webteknologi

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
944
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Webteknologi"

  1. 1. Webteknologi for ikke-teknologer
  2. 2. Thordur Arnason Creuna AS
  3. 3. Dagens Agenda Del 1: Grunnleggende webteknologi Del 2: Plattformer, CMS, andre teknologier Del 3: Web 2.0
  4. 4. Del 1: Grunnleggende webteknologi Del 2: Plattformer, CMS, andre teknologier Del 3: Web 2.0
  5. 5. Grunnleggende webteknologi
  6. 6. Protokoller
  7. 7. Din nettleser ber om en side fra en server Server sender siden tilbake til deg
  8. 8. 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
  9. 9. 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 trafikk mellom webserver og nettleser er sikker Uniform Resource Locator. En adresseringmåte som sørger for at URL du finner 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
  10. 10. HTML & CO
  11. 11. HTML
  12. 12. 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>
  13. 13. 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.) •
  14. 14. 1991: 1993: 1998 HTML 1.0 HTML + HTML 4.0 1992: 1997: 2000: HTML 2.0 HTML 3.2 XHTML
  15. 15. Eksempel
  16. 16. XML (liten avsporing)
  17. 17. 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)
  18. 18. 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>
  19. 19. XHTML
  20. 20. 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>
  21. 21. 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>
  22. 22. <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 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> <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>
  23. 23. Eksempel
  24. 24. CSS
  25. 25. 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...
  26. 26. 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.... •
  27. 27. 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}
  28. 28. 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>
  29. 29. Eksempler
  30. 30. Scripting
  31. 31. Javascript
  32. 32. 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
  33. 33. Javascript #2 • Javascript gir muligheter til å gjøre mange nyttige ting direkte i nettleseren (eksempel)
  34. 34. AJAX (det kommer vi tilbake til senere i dag)
  35. 35. Litt om standarder
  36. 36. 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....
  37. 37. 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.
  38. 38. 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?
  39. 39. WAI #2 • WCAG • ATAG • UAAG • WCAG A, AA, AAA
  40. 40. Del 1: Grunnleggende webteknologi Del 2: Plattformer, CMS, andre teknologier Del 3: Web 2.0
  41. 41. Teknologiplattformer
  42. 42. Operativsystem Webserver Applikasjon, system Database server
  43. 43. Open Source
  44. 44. 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
  45. 45. Fordeler og ulemper Fordeler Ulemper Support ofte Ingen lisenskostnad utfordring Enkel plattform - Ofte noe mer effektiv uferdige løsinger Store utviklings- Vanskelig å finne miljøer gode konsulenter Ofte lave Vanskelig å driftskrav drifte
  46. 46. Linux Operativsystem Apache Webserver utviklet i PHP / Python Applikasjon, system MySQL Database server
  47. 47. JAVA
  48. 48. 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
  49. 49. Linux, Solaris, Windows Apache, Operativsystem JBoss, Websphere Webserver utviklet i Java Applikasjon, system Oracle, MySql, DB2, MS SQL Database server
  50. 50. 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 Høye driftkrav Stabile løsninger
  51. 51. Microsoft
  52. 52. 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
  53. 53. Windows Operativsystem IIS Webserver utviklet i .NET Applikasjon, system MS SQL Database server
  54. 54. 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
  55. 55. 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
  56. 56. Web Content Management Systemer
  57. 57. Hva kjennetegner et CMS?
  58. 58. WCMS • Publisering av innhold til Web • Publiseringsgrensesnitt • Administrasjonsgrensesnitt • Innholdsarkiv • Mediearkiv • Malsett • Publiseringsprosess • Rettighetsstyring, redaksjonell prosess • Integrasjonsmuligheter • Publisering til flere kanaler (eks. RSS, epost) • annet?
  59. 59. Publiseringsprosess DB Innhold Maler Webside Webserver Internet DB DB Media
  60. 60. CMS system, prinsippskisse Server Webserver Web Content Management System Database server
  61. 61. Søketeknologi
  62. 62. Andre relevante teknologier og begreper
  63. 63. Brannmurer
  64. 64. 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.
  65. 65. Integrasjon
  66. 66. 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
  67. 67. Web Services
  68. 68. Webservice Webservice System System A XML B
  69. 69. SOA
  70. 70. Rike Klienter
  71. 71. Asyncronus Javascript And XML
  72. 72. ActiveX
  73. 73. Java Applets
  74. 74. Web 2.0
  75. 75. 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
  76. 76. 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
  77. 77. Source: McKinsey Global Survey; How Businesses are Using Web 2.0; January 2007
  78. 78. Rimelig konservativ bransje, men er det mulig? BANK OG FINANS
  79. 79. Sykehus og legetjenester er vel neppe egnet? HELSETJENESTER
  80. 80. Er det mulig å se for seg sosial software i tilknytning til offentlig skatteløsninger? SKATTEETATEN
  81. 81. tar@creuna.no thordur@gmail.com http://tar.vox.com http://twitter.com/tar http://jaiku.com/mctar http://linkedin.com/in/thordur http://slideshare.net/tar
  82. 82. Web 2.0 begreper
  83. 83. Wiki
  84. 84. RSS
  85. 85. Sosiale Nettverk
  86. 86. Sosiale Bokmerker
  87. 87. Blogger
  88. 88. Microblogging (Twitter)
  89. 89. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×