W EBMASTER DAG 1 Mahmud Al Hakim

En presentation över ämnet: "W EBMASTER DAG 1 Mahmud Al Hakim"— Presentationens avskrift:

1 W EBMASTER DAG 1 Mahmud Al Hakim mahmud@hakimdata.se www.hakimdata.se

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

3 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, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

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

5 5 K URSLITTERATUR Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 Förlag: Snakdinaviska databöcker www.databok.se

6 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, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

7 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, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

8 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, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

9 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, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

10 10 P ROV = KUNSKAPSTEST 80 FRÅGOR Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

11 11 S KOLANS 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 det inte påverkar andra kurser. Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

12 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, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

13 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, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 Hårdvara Mjukvara

14 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) www.w3.org organisation som bestämmer utvecklingen av HTML.www.w3.org 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, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

15 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, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

16 16 HTML- REDIGERINGSPROGRAM T EXT EDITORER VS WYSIWYG Notepad (anteckningar) Notepad++ http://notepad-plus.sourceforge.net/http://notepad-plus.sourceforge.net/ Textpad: www.textpad.comwww.textpad.com HTML- Kit www.htmlkit.comwww.htmlkit.com KompoZer www.kompozer.netwww.kompozer.net Arachnophilia www.arachnoid.com/arachnophiliawww.arachnoid.com/arachnophilia Aptana http://www.aptana.com/http://www.aptana.com/ MS Expression Web www.microsoft.com/expression (ersätter MS FrontPage) www.microsoft.com/expression Dreamweaver www.adobe.com/products/dreamweaverwww.adobe.com/products/dreamweaver Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

17 17 Ö VNING HTML-E DITORER Ladda ner och installera Notepad++ Ladda ner och installera TextPad Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

18 18 W EBBLÄ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/ http://www.mozilla.com/en-US/ Opera http://www.opera.com/http://www.opera.com/ Netscape Navigator 9 http://browser.netscape.com/ http://browser.netscape.com/ Safari 3 http://www.apple.com/safari/http://www.apple.com/safari/ Neoplanet www.neoplanet.com Lynx (textbaserad) http://pervalidus.50webs.org/cygwin/lynx/ http://pervalidus.50webs.org/cygwin/lynx/ Läs mer här: http://en.wikipedia.org/wiki/List_of_web_browsers Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

19 19 Ö VNING W EBBLÄSARE Ladda ner och installera Mozilla FireFox 2 Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

20 20 W EBBSIDANS GRUNDSTRUKTUR En första sida Lite text och annat smått och gått... Tips: http://www.w3schools.com/html/http://www.w3schools.com/html/ Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

21 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, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

22 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, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

23 23 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 Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

24 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. http://www.w3schools.com/tags/tag_meta.asp Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

25 25 E XEMPEL PÅ Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

26 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, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

27 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, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

28 28 P LANERA 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. Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

29 29 I NNEHÅLLSFÖRTECKNING G RUNDEN TILL DINA MENYER Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

30 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, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

31 31 W EBBPLATSENS STRUKTUR L INJÄR STRUKTUR Srartsida Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

32 32 H IERARKISK STRUKTUR Startsida Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

33 33 K OMBINATION AV LINJÄR OCH H IERARKISK STRUKTUR Startsida Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

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

35 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, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

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

37 37 H EMUPPGIFTER Sid. 6 Sid. 12 Sid. 23-24 S id. 33-34 Tips: Webdesignskolan http://www.webdesignskolan.com/html/grunder/h tml_grunderna.htm http://www.webdesignskolan.com/html/grunder/h tml_grunderna.htm W3Schools http://www.w3schools.com/html/ http://www.w3schools.com/html/ Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008