advertisement

Webteknologi Hoesten 2008

50 %
50 %
advertisement
Information about Webteknologi Hoesten 2008
Technology

Published on November 28, 2008

Author: tar

Source: slideshare.net

Description

Presentasjon fra kurs i Webteknologi fo ikke-teknologer
advertisement

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

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

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.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 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

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: 1993: 1998 HTML 1.0 HTML + HTML 4.0 1992: 1997: 2000: HTML 2.0 HTML 3.2 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=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>

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 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> <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>

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 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>

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 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

Linux Operativsystem Apache Webserver utviklet i PHP / Python Applikasjon, system MySQL Database server

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

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

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

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 Maler Webside Webserver Internet DB DB Media

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

Webservice Webservice System System A XML B

SOA

Web 2.0

Asyncronus Javascript And XML

ActiveX

Java Applets

Web 2.0

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

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://tar.tumblr.com http://linkedin.com/in/thordur http://slideshare.net/tar

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

INMA - IAB Norway - BEDRIFTSKATALOG

BEDRIFTSKATALOG. Byrå/konsulenttjenester; ... In mid-2008, we decided to divide ... UX til å gjøre avanserte implementeringer med alle typer webteknologi.
Read more

2013 I 2014

5 samarbeid i høgfjellet L angs vegen over sognefjellet fra Tur-tagrø til røisheim ligger det mange tradisjonsrike reiselivsbedrifter. der
Read more

folk.uio.no/danielr/nn-bigwordlist

... Chen Cannes Børretzen Bryars Bridget Bok Begum Barna Annika Alberto Aftenblad 900 72 700.000 57 56 30-talet 22/3 2008 1930-talet 1902 170 ,og ...
Read more

folk.uio.no/danielr/nn bigwordlist

... Chen Cannes Bّrretzen Bryars Bridget Bok Begum Barna Annika Alberto Aftenblad 900 72 700.000 57 56 30-talet 22/3 2008 1930-talet 1902 170 ,og ...
Read more

2007-2008

2007-2008 oslo national academy of the arts prospectus. 3 TIL KHIO INNHOLD 7 T - AKADEMIET 10 T - AKADEMIET T 14 G T T 11 G N-G N 17 CHELORGRADER I DESIGN G N
Read more

August — 2008 —

August 2008. Nytt kurs i web-teknologi 4. Av Eirik Hafver Rønjum. I vår arrangerte jeg for tredje gang kurs i webteknologi for ikke-teknologer.
Read more

Laser- og fototeknologi i virkesmålingen”

Gjennomført 2006-2008 ... 3. Utvikling og bruk av foto- og webteknologi. Laserteknologi er installert og prøvd på Opsund MP i Sarpsborg, ...
Read more

KONSULTPROFIL

Webteknologi html(5), css, Javascript, ajax (jQuery, jQueryMobile, jQueryUI, ... 2007-2008 Website – Robota AB Designade och implementerade Robota AB's
Read more