WEBMASTER
DAG 1
Mahmud Al Hakim
mahmud@hakimdata.se
www.hakimdata.se
Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
AGENDA
Introduktion
presentation av kursledare och
kursdeltagare
10.00 – 11.30 Genomgång av kursplanering
Datorer och nätverk
Praktiska frågor
11.30 – 12.30 Lunch
Grunda med lite fakta
Webbläsare
12.30 – 14.00
Webbsidans grundstruktur
Introduktion till HTML
14.00 – 14.30 Rast
Att skapa en webbplats
Webbplatsens struktur
14.30 – 16.00
Webbplatsens disposition
Övningar och hemuppgifter 2
Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
MÅL
Kursen är en bred utbildning för dig som vill lära
dig att utforma, underhålla och administrera en
webbplats.
Kursen ger även grundläggande kunskaper om
redigeringsprogram och publiceringsverktyg
(CMS) och färdigheter i att använda dessa.
I kursen varvas teori och praktik vilket är
stimulerande och underlättar inlärningen.
3
Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
FÖRKUNSKAPER
Kursen kräver mycket goda
Windows och Office-
kunskaper inkl filhantering
samt Internet-vana.
4
Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
5
Förlag: Snakdinaviska databöcker
www.databok.se
KURSLITTERATUR
Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
KURSENS INNEHÅLL
1. Introduktion, Program och verktyg, Internet,
WWW, Webbläsare, Att skapa en webbplats,
Webbsidans grundstruktur, HTML.
2. Teckentabeller, teckensnitt, rubriker, formatera
text, färger, listor, länkar
3. Tabeller, ramar, bilder, multimedia för webben.
XHTML
4. Formulär, Stilmallar CSS, Java Applet, JavaScript,
ActiveX
5. Dynamiska webbsidor, DHTML, Lite om XML,
Tillåtet och otillåtet på Internet
6
Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
LEKTIONSINNEHÅLL
6. Start Projektarbete
7. Dreamweaver 8 Del 1/2
Arbetsmiljön, Filhantering, Hantera text,
Länkar
8. Dreamweaver 8 Del 2/2
Bilder, tabeller, ramar, formulär, mallar
9. Mer om Webbserver, Apache, Databaser,
MySQL, SQL, PHP, Lite om Ajax
10. Photoshop Elements Del 1/2
7
Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
LEKTIONSINNEHÅLL
11. Photoshop Elements Del 2/2
12. Publiceringsverktyg CMS – Joomla
13. Vidareutveckling av projektarbetet
14. Skriftligt Prov (på dator)
Vidareutveckling av projektarbetet
15. Redovisning av projektarbetet
8
Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
BETYGSKRITERIER
G (Godkänd)
Godkänt skriftigt prov: resultat minst 70%
Projektarbete: statisk webbplats
VG (Väl Godkänd)
Väl Godkänt skriftligt prov: minst 90%
Projektarbete 1: Godkänd statiskt webbplats
Projektarbete 2: Godkänd dynamisk webbplats
som bygger på CMS - Joomla
9
Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
10
PROV = KUNSKAPSTEST 80 FRÅGOR
Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
SKOLANS DATORER
Intel Core 2 Duo (2 GHz), 1 GB minne
Grafik: Radeon X1600 256 MB
17" WSXGA brightview
CD/DVD brännare, USB 2 (4st), FireWire 400 (1st)
Inbyggd WLAN upp till 20 Mbit/s
HDD 100 GB - Allt sparas på nätverket men kopieras över
lokalt till datorn när man ska jobba med det.
Kortläsare: Digital-, MultiMediaCard-, Memory Stick-,
Stick Pro- eller Stick Duo-, Smart Media- och SD-
minneskort
Observera att du inte är garanterad samma dator vid varje
kurstillfälle.
Program får installeras förutsatt att det är freeware och att 11
det inte påverkar andra kurser.
Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
ÖVNING
BEKANTA DIG MED NÄTVERKET
Skapa en egen mapp (ditt namn)
på skolans nätverk under
”Webmaster” på enheten Z.
Skapa en undermapp (övningar)
12
GRUNDA MED LITE FAKTA
Internet
Ett globalt nätverk som består av mindre nätverk.
Har ingen central dator (server) som sköter all trafik
Hårdvara utan flera servrar som samarbetar värden över.
Information som skickas har många vägar att välja på.
WWW (World Wide Web)
Ett söksystem på Internet där informationen
presenteras (oftast) på ett grafiskt sätt med hjälp av
webbläsare.
Mjukvara Systemet är uppbyggd av dokument som är
sammanlänkade s (hyperlänkar).
Det hypertextspråk som används på webbsidor kallas
HTML.
13
Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
HTML (HYPERTEXT MARKUP LANGUAGE)
Kodningsspråk baserat på SGML.
Plattformsoberoende: oberoende av dator och
Operativsystem (Windows, Unix, Mac).
W3C (World Wide Web Consortium) www.w3.org
organisation som bestämmer utvecklingen av HTML.
Den senaste standarden kallas HTML 4 (4.01)
XHTML: en kombination av HTML och XML
(mer om detta senare)
HTML används för att bygga upp webbsidor genom att
skriva koder, vilka kallas taggar (märken).
Till vissa taggar finns det attribut som bestämmer mer
detaljerat hur sidan ska visas. 14
Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
VARFÖR KODA MANUELLT?
En Webmaster måste kunna de grundläggande
taggarna och kan koda manuellt.
Det är lättare att förstå de mer avancerade
delarna i webbdesign om man behärskar
grunderna.
Det är bäst att börja använda anteckningar eller
något enkelt ordbehandlingsprogram och sedan
övergå till ett avancerat program t.ex.
Dreamweaver.
Det vinner du på i längden.
15
Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
HTML-REDIGERINGSPROGRAM
TEXT EDITORER VS WYSIWYG
Notepad (anteckningar)
Notepad++ http://notepad-plus.sourceforge.net/
Textpad: www.textpad.com
HTML- Kit www.htmlkit.com
KompoZer www.kompozer.net
Arachnophilia www.arachnoid.com/arachnophilia
Aptana http://www.aptana.com/
MS Expression Web www.microsoft.com/expression
(ersätter MS FrontPage)
Dreamweaver www.adobe.com/products/dreamweaver
16
Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
ÖVNING
HTML-EDITORER
Ladda ner och installera Notepad++
Ladda ner och installera TextPad
17
Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
WEBBLÄSARE (BROWSER)
Ett program som tolkar HTML-dokument
Internet Explorer 7
Mozilla FireFox 2 (version 3 är på gång)
http://www.mozilla.com/en-US/
Opera http://www.opera.com/
Netscape Navigator 9
http://browser.netscape.com/
Safari 3 http://www.apple.com/safari/
Neoplanet www.neoplanet.com
Lynx (textbaserad)
http://pervalidus.50webs.org/cygwin/lynx/
Läs mer här: 18
http://en.wikipedia.org/wiki/List_of_web_browsers
Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
19
Ladda ner och installera Mozilla FireFox 2
WEBBLÄSARE
ÖVNING
Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
WEBBSIDANS GRUNDSTRUKTUR
En första sida
Lite text och annat smått och gått...
Tips: http://www.w3schools.com/html/ 20
Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
SPARA EN WEBBSIDA
Filtillägg: .htm eller .html
Filformat: textdokument i anteckningar
Använd gemener (små bokstäver)
Använd endast (a-z) och (0-9) i filnamnet
Välj logiska namn d.v.s. Lättare att komma ihåg.
21
Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
ÖVNING
MIN FÖRSTA HEMSIDA
Starta Anteckningar
Koda en enkel hemsida
Använd grundstrukturen
Spara som index.html
Öppna i IE och FireFox
Visa källkoden
Öppna filen i Notepad++
Öppna filen i Textpad
22
Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
Placeras längst upp
Beskriver vilken HTML-standard som används i
dokumentet.
HTML 4.01 strict (senaste och aktuella taggar)
http://www.w3schools.com/tags/tag_doctype.asp
23
Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
Placeras i dokumenthuvudet.
Har ingen sluttagg.
Anger meta-information (information om
information) d.v.s. Info. om dokumentet.
Metadata anges som namn/värde par
Nyckelord (keywords) underlättar för sökmotorer
att hitta din sida.
Beskrivning (description) visas när du får träffar
vid sökning på nätet.
http://www.w3schools.com/tags/tag_meta.asp
24
Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
EXEMPEL PÅ
25
Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
ÖVNING
DOCTYPE OCH META
Utveckla din första hemsida
Ange att HTML-standard är den som ska
används i dokumentet.
Beskriv dokumentet med några meta-taggar
Ange några nyckelord och en kort beskrivning
Ange författarens namn
Testa attributet ”refresh”
26
Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
ATT SKAPA EN WEBBPLATS
WEBBPLATSENS SYFTE
Vilka ämnen ska webbsidorna ta upp?
Hur stor får webbplatsen vara (antal sidor)?
Vilka besökare är det tänkt ska läsa sidorna?
Vilken datorutrustning och modemhastighet är
minimum?
Vilka webbläsare ska klara av att visa sidorna?
27
Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
PLANERA WEBBPLATSEN
KISS-princip
Keep It Simple, Stupid
“everything should be made as simple as possible, but
no simpler”
Albert Einstein
http://en.wikipedia.org/wiki/KISS_principle
Var så tydlig som möjligt. Gör det enkelt för
besökare att förstå vad din webbplats handlar om,
gärna med både text och bild.
28
Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
29
GRUNDEN TILL DINA MENYER
INNEHÅLLSFÖRTECKNING
Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
WEBBPLATSENS DISPOSITION
TIPS OCH RÅD
Igenkänningstecken t.ex. Logo, likadan bakgrund på
alla sidor.
Tydliga länkar som visar vart de leder.
Tydliga rubriker. Besökare behöver inte gissa sig till
vad du menar.
Använd listor. Det är lättare att ta till sig information
via listor än om den ligger inbakad i en vanlig text.
Långa sidor rekommenderas inte. Dela upp till fler
korta eller använd s.k. Ankare (mer om detta senare).
Textens längd: max 65 tecken.
Undvik texteffekter tex blinkande text.
30
Undvik ”Under Construction” eller ”Kommer snart”.
Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
31
WEBBPLATSENS STRUKTUR
LINJÄR STRUKTUR
Srartsida
Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
32
Startsida
HIERARKISK STRUKTUR
Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
33
KOMBINATION AV LINJÄR OCH
Startsida
HIERARKISK STRUKTUR
Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
FLERA MODELLER
Hem
• Använd maximalt fyra nivåer
• Länka alltid till startsidan.
• Vid Komplex struktur använd en sitemap
34
Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
HEMUPPGIFT
WEBBPLATSENS SYFTE
Vad har din webbplats för syfte:
Vilka ämnen ska webbsidorna ta upp?
Hur stor får webbplatsen vara (antal sidor)?
Vilka besökare är det tänkt ska läsa sidorna?
Vilken datorutrustning och modemhastighet är
minimum?
Vilka webbläsare ska klara av att visa sidorna?
35
Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
HEMUPPGIFT
WEBBPLATSENS STRUKTUR
Skissa i PowerPoint en enkel struktur
för din webbplats.
36
Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008
HEMUPPGIFTER
Sid. 6
Sid. 12
Sid. 23-24
S id. 33-34
Tips: Webdesignskolan
http://www.webdesignskolan.com/html/grunder/h
tml_grunderna.htm
W3Schools
http://www.w3schools.com/html/
37