Webben som verktyg
Idag: Hur hänger det ihop? Viktiga tekniker Stegen i ett webbprojekt Verktyg Dreamweaver Photoshop Joomla CMS Storyboard och flödesschema Fixa webbhotell
Hur hänger det ihop? För att kunna kommunicera krävs ett protokoll tcp/ip, http, ftp För att veta var man skall skicka sin data krävs en adress IP-nummer 192.168.0.100, domännamn www.vxu.se För att numren skall kunna översättas till namn används DNS (Domain Name Server). För att kunna dirigera trafiken används en router.
Hur hänger det ihop? Domännamn: vxu.se Toppdomäner.se.fi.de etc. Organiserade efter länder.. eller typ av verksamhet. Toppdomäner delas in i domäner vxu.se = domännamn www är datorn/tjänsten domänadress www.vxu.se
Hur hänger det ihop? World wide web (WWW) URL: http://www,vxu.se/visit/index.html (uniform Resource Locator) Protokoll : http:// www.vxu.se : namnet /visit/ : katalogen/mappen på datorn index.html : filen som hämtas Första filen: index.html, default.htm
Hur hänger det ihop? En webbläsare (Internet Explorer eller Firefox) läser taggar. Taggarna bestämmer hur sidan ser ut och fungerar. Stilmall (CSS) tillför utseende. <html> <head> <title>min titel</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> </head> <body bgcolor="#ffffff" text="#000000"> <h1>rubrik 1</h1> <p>stycke med lite text och en <a href="http://www.google.se/">länk</a >.</p> </body> </html>
Tekniker Taggar: HTML: Hypertext Markup Language XHTML: XHTML = Extensible HyperText Markup Language CSS: Cascading Style Sheets Syfte HTML, XHTML: I vis mån styra utseendet på en sida. Definiera strukturen vad är rubrik vad är brödtext. Syfte CSS Styra utseendet. Tillföra funktionalitet
Tekniker Länkar <a href="http://www.mozilla.org/" target="_blank">mozilla</a> <a href="http://www.mozilla.org/" target="_blank"> - start taggen. Mozilla - texten som kommer att bli klickbar </a> - sluttaggen href="http://www.mozilla.org/" target="_blank - attribut
Tekniker Animationer Flash - vektorgrafik Director bilder (äldre ersätts mer och mer av Flash). Mer funktionalitet: JavaScript programmeringsspråk VB Script Programmeringsspråk Dynamiska sidor (skapade av webbservern) PHP JSP ASP/ASPX
Vilka bestämmer? Internationella aktörer ISOC Internet Society IAB - Internet Architecture Board IESG - Internet Engineering Steering Group IETF - Internet Engineering Task Force IANA - Internet Assigned Numbers Authority ICANN - Internet Corporation for Assigned Names and Numbers W3C Worl Wide Web Consortium Europa RIPE (Réseaux IP Européens) Sverige NIC-SE administrerar.se SUNET
Webbprojekt
Arbetsgång Specificera projektet (er projektplan) 1. Analyser: målgrupp, budskap, innehåll, sändare, media 2. Strukturera informationen: Flödesschema, navigation 3. Ta fram den grafiska utformningen. 4. Gör en prototyp: Bör innehålla alla typer av sidor Ger svar på frågor som: Håller idén om hur man kan navigera? Fungerar formen?
Arbetsgång Fastställ form och struktur. Uppdatera specifikationen. Gör storyboard och komplett flödesschema. Bestäm en namn standard. Det kommer att bli många filer att hålla reda på. Starta produktionen! Testa!! De som testar bör inte jobbat med att skapa webbplatsen. Korrekturläsning Länkkontroll Bildkontroll
Arbetsgång Lansera!! Städa Ta bort filer som inte används. Gör back-up. Utvärdera
Verktyg
Dreamweaver Verktyg för att skapa och underhålla en webbplats. Har inbyggd FTP för kommunikation med webbservern.
Photoshop Världens mest använda bildbehandlings program. Oerhört kraftfullt. Bra stöd för att jobba med webben.
Joomla CMS Webbpubliceringssystem Gratis Enkelt att komma igång Utbyggbar Många användare
Storyboard och flödesschema
Storyboard Syfte: Att definiera utseendet Skall innehålla: Disposition av sidan Förklarande text Mått, typsnitt och färger
Flödesschema Syfte: Att beskriva hur informationen organiserats. Skall innehålla: Alla typer av sidor Beskriva hur navigationen skall gå till. Definiera en namnstandard.
Fixa ett webbhotell