W EBMASTER DAG 1 Mahmud Al Hakim

2 A GENDA – Introduktion presentation av kursledare och kursdeltagare Genomgång av kursplanering Datorer och nätverk Praktiska frågor – 12.30Lunch – Grunda med lite fakta Webbläsare Webbsidans grundstruktur Introduktion till HTML – 14.30Rast – Att skapa en webbplats Webbplatsens struktur Webbplatsens disposition Övningar och hemuppgifter Copyright, Mahmud Al Hakim, 2008

3 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. Copyright, Mahmud Al Hakim, 2008

4 F ÖRKUNSKAPER Kursen kräver mycket goda Windows och Office- kunskaper inkl filhantering samt Internet-vana. Copyright, Mahmud Al Hakim, 2008

5 K URSLITTERATUR Copyright, Mahmud Al Hakim, 2008 Förlag: Snakdinaviska databöcker

6 K URSENS 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 Copyright, Mahmud Al Hakim, 2008

7 L EKTIONSINNEHÅ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 Copyright, Mahmud Al Hakim, 2008

8 L EKTIONSINNEHÅ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 Copyright, Mahmud Al Hakim, 2008

9 B ETYGSKRITERIER 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 Copyright, Mahmud Al Hakim, 2008

10 P ROV = KUNSKAPSTEST 80 FRÅGOR Copyright, Mahmud Al Hakim, 2008

11 S KOLANS DATORER Intel Core 2 Duo (2 GHz), 1 GB minne Grafik: Radeon X 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 det inte påverkar andra kurser. Copyright, Mahmud Al Hakim, 2008

12 Ö VNING B EKANTA DIG MED NÄTVERKET Skapa en egen mapp (ditt namn) på skolans nätverk under ”Webmaster” på enheten Z. Skapa en undermapp (övningar) Copyright, Mahmud Al Hakim, 2008

13 G RUNDA 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 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. Systemet är uppbyggd av dokument som är sammanlänkade s (hyperlänkar). Det hypertextspråk som används på webbsidor kallas HTML. Copyright, Mahmud Al Hakim, 2008 Hårdvara Mjukvara

14 HTML (H YPER T EXT M ARKUP L ANGUAGE ) Kodningsspråk baserat på SGML. Plattformsoberoende: oberoende av dator och Operativsystem (Windows, Unix, Mac). W3C (World Wide Web Consortium) 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. Copyright, Mahmud Al Hakim, 2008

15 V ARFÖ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. Copyright, Mahmud Al Hakim, 2008

16 HTML- REDIGERINGSPROGRAM T EXT EDITORER VS WYSIWYG Notepad (anteckningar) Notepad++ Textpad: HTML- Kit KompoZer Arachnophilia Aptana MS Expression Web (ersätter MS FrontPage) Dreamweaver Copyright, Mahmud Al Hakim, 2008

17 Ö VNING HTML-E DITORER Ladda ner och installera Notepad++ Ladda ner och installera TextPad Copyright, Mahmud Al Hakim, 2008

18 W EBBLÄSARE ( BROWSER ) Ett program som tolkar HTML-dokument Internet Explorer 7 Mozilla FireFox 2 (version 3 är på gång) Opera Netscape Navigator Safari 3 Neoplanet Lynx (textbaserad) Läs mer här: Copyright, Mahmud Al Hakim, 2008

19 Ö VNING W EBBLÄSARE Ladda ner och installera Mozilla FireFox 2 Copyright, Mahmud Al Hakim, 2008

20 W EBBSIDANS GRUNDSTRUKTUR En första sida Lite text och annat smått och gått... Tips: Copyright, Mahmud Al Hakim, 2008

21 S PARA 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. Copyright, Mahmud Al Hakim, 2008

22 Ö VNING M IN 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 Copyright, Mahmud Al Hakim, 2008

23 Placeras längst upp Beskriver vilken HTML-standard som används i dokumentet. HTML 4.01 strict (senaste och aktuella taggar) Copyright, Mahmud Al Hakim, 2008

24 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. Copyright, Mahmud Al Hakim, 2008

25 E XEMPEL PÅ Copyright, Mahmud Al Hakim, 2008

26 Ö VNING D OCTYPE OCH M ETA 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” Copyright, Mahmud Al Hakim, 2008

27 A TT SKAPA EN WEBBPLATS W EBBPLATSENS 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? Copyright, Mahmud Al Hakim, 2008

28 P LANERA WEBBPLATSEN KISS-princip Keep It Simple, Stupid “everything should be made as simple as possible, but no simpler” Albert Einstein 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. Copyright, Mahmud Al Hakim, 2008

29 I NNEHÅLLSFÖRTECKNING G RUNDEN TILL DINA MENYER Copyright, Mahmud Al Hakim, 2008

30 W EBBPLATSENS DISPOSITION T IPS 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. Undvik ”Under Construction” eller ”Kommer snart”. Copyright, Mahmud Al Hakim, 2008

31 W EBBPLATSENS STRUKTUR L INJÄR STRUKTUR Srartsida Copyright, Mahmud Al Hakim, 2008

32 H IERARKISK STRUKTUR Startsida Copyright, Mahmud Al Hakim, 2008

33 K OMBINATION AV LINJÄR OCH H IERARKISK STRUKTUR Startsida Copyright, Mahmud Al Hakim, 2008

34 F LERA MODELLER Copyright, Mahmud Al Hakim, 2008 Hem Sitemap Använd maximalt fyra nivåer Länka alltid till startsidan. Vid Komplex struktur använd en sitemap

35 H EMUPPGIFT W EBBPLATSENS 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? Copyright, Mahmud Al Hakim, 2008

36 H EMUPPGIFT W EBBPLATSENS STRUKTUR Skissa i PowerPoint en enkel struktur för din webbplats. Copyright, Mahmud Al Hakim, 2008

37 H EMUPPGIFTER Sid. 6 Sid. 12 Sid S id Tips: Webdesignskolan tml_grunderna.htm tml_grunderna.htm W3Schools Copyright, Mahmud Al Hakim, 2008