Lär dig mer: om W3C - The World Wide Web Consortium som leder utvecklingen och "rekommenderar" standarder, om olika webbläsare, bildskärmsupplösningar, webbservrar, verktyg för att skapa och redigera webbsidor.
Allmänt om Webbproduktion
Detta är en gammal kurs. Länkarna kanske inte fungerar.
Nedan följer ytterligare lite information om sådant som det kan vara bra att känna till när man publicerar på nätet. Det mesta av det som nämns nedan behöver du dock inte tänka på så mycket precis när du startar upp om du använder ett färdigt CMS med färdiga mallar. Andra har redan tänkt för dig på det mesta av det som nämns nedan. Om du har gott om tid och vill tänka igenom allt innan du startar din webbplats så läs gärna igenom innehållet nedan.
Grunderna
Webbsidor bestod från början i grunden av ren text kompletteras med olika koder (från början enbart HTML-koder) för att bl.a. formatera denna text och för att ange hur bilder i egna filer liksom annan multimedia i egna filer skall ingå i webbsidan när den visa i webbläsaren. Grunden är alltså att arbeta med dessa koder. Ibland kan man underlätta arbetet genom att använda särskilda program men inte alltid. Själv skapade jag under våren 1996 en kurs i HTML såsom det fungerade de första åren. Den kursen finns fortfarande kvar för att man ska kunna se vad man kunde åstadkomma på den tiden med bara HTML-koder. Jag var då noga med att följa de rekommendationer och den terminologi som man då kunde finna hos W3C som nämns nedan. Nedan följer en uppräkning av sådant som kan vara viktigt att känna till lite om när det gäller webbproduktion.
- W3C -The World Wide Web Consortium leder utvecklingen och "rekommenderar" standarder när det gäller olika koder. Om man besöker W3C:s webbplats så ser man snabbt vilken omfattande dokumentation som finns. Några av de senaste grundläggande dokumenten nämns i länkarna nedan.
- W3C:s webbplats om HTML och XHTML . SGML , Standard Generalized Markup Language, är ett språk gjort för att skriva andra språk. Ett av dessa språk är sidbeskrivningsspråket HTML. SGML är mycket komplicerat och därför har en grupp SGML-experter skapat en enklare form av SGML, nämligen XML . XML är såsom SGML inget eget språk i sig, utan är till för att skriva andra språk. Den senaste versionen av HTML, XHTML, skrivs i XML istället för SGML. XHTML använder samma element och attribut till text, tabeller, bilder, formulär mm. Den som kan HTML behöver inte lära sig ett helt nytt språk. Vad är det då för skillnad? Webbläsarna tillåter när det gäller HTML-slarvigt skriva koder. En delvis felaktig kod kan fungera i alla fall. Sådant tillåts ej i XHTML. På en särskild sida kan man läsa om och hitta länkar till hur långt man har kommit med framtidsversionen HTML5 .
När man artiklar i Joomla använder man sig av XHTML eller HTML5. Koderna läggs dock inte i egna filer såsom närr man startade med HTML-sidor utan i en databastabell.
- CSS - Cascading Style Sheets är ett viktigt komplement till HTML och XHTML. På W3C:s webbplats om CSS hittar man originaldokumenten gällande CSS. Ett försök till ett CSS-ramverk att starta med är Blueprint . Med Joomla 2.5 följer ett enkelt köpcentrum med namn Atomic som använder sig av Blueprint.
En kvalificerad mall (mall) i Joomla innehåller flertalet CSS-filer för att styra utseendet. Varje sådan fil innehåller flertalet CSS-koder. Om du vill göra kvalificerade ändringar när det gäller utseendet i köpcentret som du använder så är det en klar fördel om du har kunskaper om CSS.
- DHTML mm. För att kunna arbeta avancerat med webbsidor måste man ha kunskaper om dynamisk html, olika skript och program mm t.ex. cgi, javascript, vbscript, asp, php, java, Ruby on Rails. Många program med öppen källkod dvs program som man kan använda utan kostnad att använda sig av PHP. En kort introduktion till PHP finns i en artikel i Wikipedia . Originalinformationen finns på webbplatsen PHP.net .
Joomla består av flertalet program och grundprogrammen och de flesta andra program är skrivna i språket PHP. Ibland när du vill ändra på något i din Joomlaplats så är det i en PHP-fil som du ska ändra. Ofta är det bara korta textsekvenser som ska ändras. Var noga med att bara ändra på dessa. Ta inte bort semikolon och citatonstecken. Om man gör fel så kan hela platsen bli påverkad. Om du vill skapa egna tillägg till Joomla så måste du ha kunskaper om PHP. Såsom nämnts ovan så kräver Joomla 2.5 minst PHP version 5.2.4 .
-
Den databashanterare som ofta används ihop med PHP är MySQL. MySQL använder sig av frågespråket SQL. Läs mer om MySQL (i en Wikipediaartikel). För att kunna hantera databaser och tabellerna i dessa i allmänhet och även Joomladatabastabellerna så använder sig webbhotellen ofta av programet phpMyAdmin. Det programmet når man oftast från kontrollpanelen. Läs mer om PHPMyAdmin (i en Wikipediaartikel). Det finns tillägg till Joomla med vars hjälp man kan nå och redigera i databasen utan att behöva gå till kontrollpanelen och PHPMyAdmin. Det varnas för att det kan vara en säkerhetsrisk att installera och använda sådana program.
Det är när det gäller Joomla sällsynt att man behöver använda PHPMyAdmin men det har hänt att jag har behövt att gå dit någon gång för att granska när många har besökt webbplatsen. Naturligtvis är det en fördel om man vill fördjupa sig att kunna använda PHPMyAdmin för att t ex se exakt vilka databatabeller som finns i en artikel. Särskilt gäller detta om man är intresserad av att installera ett CCK-tillägg.Tidigare har jag gjort en kurs, som nu är föråldrad bl a pga flertalet uppdateringar, om hur man lär sig göra PHP-filer och snabbt gick jag in på hur man kopplar ihop PHP med en databas. Jag hoppas att jag någon gång ska hinna uppdatera den kursen. Ett alternativ till att lära sig göra egna php-filer och att lära sig koppla dessa till databaser är att lära sig ett eller flera CCK-tillägg till Joomla. Det CMs som är mest känt för CCK-tillägg är Drupal.
- Presentation av bilder och ljudfiler på webbsidor har ingått sedan länge och hur man gjorde då ingår i min HTML-kurs från 1996. Numera är det också vanligt med videopresentationer. Kunskaper i bildhantering, konvertering av ljudfiler och videofiler ingår i grundkunskaperna. Det mest kända programmet för bildhantering är PhotoShop.
Kurser på svenska om HTML, CSS, PHP och MySQL finns hos Webdesignskolan.
W3Schools är en webbplats som säger sig vara "the world´s largest web development site". Här finns många kurser som du kan ha nytta av t ex kurser om HTML, CSS och PHP.
Det finns gratis videokurser om Photoshop hos Moderskeppet. Det finns också gratisprogram för bildhantering på nätet vid namn Pixlr. Användning av programmet ingår i övningarna. Ett tilägg till Joomla för presentation av ljudfiler och videofilmer nämns i övningarna.
Webbläsarna
För att se webbsidor måste man ha en webbläsare. Alla webbläsare kan tyvärr långt ifrån visa sidorna korrekt i enlighet med de rekommendationer som finns. Detta beror delvis på att det hela tiden kommer nya rekommendationer. Webbläsarna får som andra program då och då nya versioner som klarar av allt fler koder som ingår i de senaste rekommendationerna. När man har en webbplats så bör man undersöka hur sidorna ser ut i olika webbläsare.
- Netscape var den webbläsare som dominerade under webbens första år. Netscape ledde utvecklingen under flera år men nu uppdateras inte längre Netscape och det går inte längre att från tillverkaren hämta programmet. Fr o m den 1 feruari 2008 finns inte längre någon support. Läs mer i en artikel i Wikipedia om Netscape.
- Den webbläsare som för länge sedan tog över efter Netscape som den ledande i världen är Internet Explorer. Internet Explorer 9 är den senaste versionen. Internet Explorer har en egen webbplats hos Microsoft. På denna plats kan man läsa mer om Internet Explorer. Internet Explorer 9 innehåller en del intressanta delar inte minst för dem som arbetar med att skapa sidor och innehåll på webbplatser. Tyvärr har det varit en del problem med att få visst webbinnehåll att fungera med Internet Explorer 9. Det finns numera flera konkurrenter till Internet Explorer.
- En webbläsare under flera år har konkurrerat med Internet Explorer är Mozilla Firefox. Läs mer på Mozilla Firefox egen webbplats. Firefox har under den senaste tiden kommit med flera nya versioner. När detta skrivs är 13.0 den senaste versionen.
- En annan känd webbläsare är Opera. Opera har vid en del tester fått omdömet att vara den allra snabbaste webbläsaren men det är svårt att säga vad som gäller i nuläget eftersom det kommer nya versioner ofta av flertalet olika webbläsare. Om man använder Opera i en dator så kan man se wap-sidor för mobiler som inte kan ses i Internet Explorer eller Firefox. Opera erbjuder också webbläsaren Opera Mini för mobiltelefoner där bilderna komprimeras vid långsamma Internetuppkopplingar vilket gör webbläsaren snabbare.
- I september 2008 lanserades webbläsaren Google Chrome. Den här webbläsaren innehåller en del nyheter samtidigt som den är väldigt snabb. Den här webbläsaren uppdateras automatisk. När detta skrivs är det version 19.0 som gäller i Sverige. 21.0 finns. Denna webbläsare bygger på flera andra webbläsare t ex Apples webbläsare Safari.
- Det finns flertalet andra webbläsare men dessa andra webbläsare används av väldigt få personer. Hos Tucows finns en sida om webbläsare. Tucows erbjuder korta recensioner och man kan också hämta programmen via Tucows.
- W3C har en egen webbläsare/editor vid namn Amaya. Med hjälp av den kan man testa huruvida den kod som används är korrekt.
- Webbläsare för smartphones och surfplattor har blivit viktigare under de senast åren eftersom fler och fler tar del av webben genom att använda smartphones eller surfplattor. Läs mer om smartphones i en artikel hos Wikipedia. När det t ex gäller operativsystemet Android för Smarphones så finns det andra webbläsare än de som nämns ovan t ex Dolphin.
- WYSIWYG-editorerna är också webbläsare. WYSIWYG betyder ju "What You See Is What You Get". Det finns till Joomla flera WYSIWYG-editorer t ex Tiny och JCE som tas upp i övningarna på den här platsen och den kanske mest kända editorn att köpa till den egna datorn är Dreamweaver som jag har gjort en kurs till. WYSIWYG-editorerna är ofta inte riktigt lika bra som webbläsarna och en del saker fungerar förstås inte i WYSIWYG-editorerna.
Fler webbläsare erbjuder idag sätt att studera vilken kod som styr.
I Google Chrome kan man när man ser en sida klicka på shiftnyckeln längst upp till höger. Sedan markerar man Verktyg och klickar på Vertyg för programmerare.
I Internet Explorer 9 klickar man på F12 eller Verktyg, F12-utvecklingsverktyg eller kugghjulet, F12-verktygsverktyg.
I Firefox finns längst till höger ikonen "Click to Toggle Web Developer Toolbar".
W3Schools erbjuder en sida med webbläsarstatistik (2002-2014). De senaste åren har användandet av Internet Explorer och Firefox minskat och användandet av Chrome har ökat. Här kan man också läsa om de olika webbläsarnas historia och man kan också se fördelningen mellan olika versioner av Internet Explorer, Firefox och Chrome.
När detta skrivs (i maj 2014) finns statistik från april 2014. De största webbläsarna är då (Inom parentes nämns den senaste version som nämns hos W3Schools):
- Google Chrome - 58,4,9% (32)
- Firefox - 25,0% (29)
- Internet Explorer - 9,4% (11)
- Safari - 4,0% - (7)
- Opera - 1,8% - (20)
De tre största webbläsarna används av 92,8% av webbplatsbesökarna och de 5 största av 98,6% så om man har en egen webbplats så bör man undersöka hur platsen ser ut åtminstone i de tre största webbläsarna.
Firefox var som störst (47,9%) i juli 2009. Sedan oktober 2009 har Firefox andel minskat lite varje månad samtidigt som Google Chrome har ökat. Internet Explorer var som störst (88,0%) i mars 2003. Sedan har Internet Explorers andel i stort sett minskat lite varje månad.
Jag använder Windows 8. Jag har själv inte medvetet gjort några inställningar i någon webbläsare huruvida jag automatiskt vill uppdatera den till en ny version. Google Chrome uppdateras automatisk utan att jag lägger märke till det så de flesta användarna av denna webbläsare har den senaste versionen. Det enda som skiljer är att det kan ta lite tid innan en ny version finns för alla språk. Nu använder jag Chrome 23. Också när det gäller de senaste versionerna av Firefox så uppdateras webbläsaren automatiskt men man måste klicka på Hjälp och sedan på "Om Firefox".
Någon elev sade en gång till mig att alla använder väl den senaste versionen. Så är faktiskt inte alls fallet. Det kan t ex bero på att man sitter på en arbetsplats där man inte själv bestämmer över vilken webbläsare och vilken version som man får använda. Det kan också vara så att många som använder datorn hemma inte uppmärksammar när nya (förhoppningsvis förbättrade) versioner finns tillgängliga. Problemet med sådana personer tycks Google Chrome ha löst och kanske också Firefox nu.
Utseendet kan skilja också mellan olika versioner av webbläsarna. I webbläsarstatistiken 2002-2014 kan man också genom att klicka på länkarna till varje enskild webbläsare se vilken version av webbläsaren som används.
- Windows 7 - 55,4%
- Windows 8 - 15,8%
- Mac - 10,3%
Windows XP- 8,0% - Linux 5,0%
- Mobile 4,0%
- Windows Vista - 1,2%
Windows NT - 0,2%
Mobile-gruppen har följande uppdelning
- Android - 2,10%
IOS (iPhone, iPad, iPod) - 1,20% - Andra - 0,73
Om man har en egen webbplats så bör man alltså ibland undersöka också hur webbplatsen ser ut i olika versioner av webbläsarna. Såsom nämns ovan är det idag också viktigt att undersöka hur platserna ser ut i olika smartphones och surfplattor. Man bör också undersöka hur den ser ut vid olika bildskärmsupplösningar.
Bildskärmsupplösning
När man skapar webbsidor så har det under många år varit så att man har försökt att göra webbsidor så att man inte behöver skrolla på bredden. Risken är annars att besökarna inte uppmärksammar det som finns längst ut till höger.
Datorbildskärmar hade förr formatet 4:3 dvs bredden var fyra tredjedelar av höjden. Under flera år ökade bildskärmsupplösningen för vanliga stationära datorer som var de datorer som användes mest. När jag började skapa webbsidor så gjorde man sidor för upplösningen 640 x 480 pixlar (bildpunkter). Därefter började man kunna göra sidor för 800 x 600 bildpunkter. Sedan blev standarden i många år 1024 x 768 bildpunkter. Många skärmar fick dock snart möjlighet att visa 1280 × 960 bildpunkter och sedan många år har skärmarna klarat ännu större upplösningar. Det har dock ändå varit vanskligt att göra sidor bredare än 1024 bildpunkter på bredden eftersom många t ex på arbetsplatser inte styr över vilken bildskärmsupplösning och webbläsare som man har möjlighet att använda.
De stationära datorerna har under de senaste åren mer och mer blivit ersatta av bärbara datorer. Formatet för att få större bredd än formatet 4:3 var först på många bärbara 16:10 men under senare år har bildskärmen för TV och för dator blivit densamma och då har TV-formatet 16:9 blivit vanligare. För några år sedan blev det populärt med lätta bärbara datorer och plötsligt blev formatet mindre och bredden 1024 bildpunkter blev återigen viktig att hålla sig till.
Eftersom fler och fler tar del av webben genom att använda smartphones eller surfplattor. Om man vill kunna visa sin webbplats på samma sätt även i en smartphone så har lämpligt format förr bredden blivit ännu mindre. T ex klarar flera smartphones nu bredden 800 pixlar. Emellertid finns det flera andra lösningar. Man kan skapa särskilda versioner av sin webbplats för smartphones och det är ju också möjligt att skapa en särskild app. I CMS-verktyget Joomla finns det flera tillägg som smidigt löser dessa problem.
Läs mer om olika bildskärmsupplösningar hos Wikipedia. Artikeln på engelska är när detta skrivs mer utförlig.
Man kan idag i webbläsarna snabbt växla för att se en sida med olika bildskärmsupplösningar. I Internet Explorer 9 klickar man på F12 eller Verktyg, F12- utvecklingsverktyg, eller kugghjulet, F12-verktygsverktyg. Man kan sedan välja Verktyg och sedan Ändra storlek. I Firefox 7 kan man välja Resize och sedan Resize Window.
W3school erbjuder statistik åren 2000-2012 över hur många som använder en viss bildstorlek i sin webbläsare. 13% använder fortfarande bildstorleken 1024x768.
På en särskild sida kan man se användningen av högre upplösningar under 2010-2012.
Kanske är du en av de lyckliga som både ser bra och har en stor skärm med bildskärmsupplösningen 1920x1080. I sådana fall kanske du får plats med två fönster. I det ena fönstret läser du övningarna på den här webbplatsen och i det andra fönstret kan du göra övningarna.
En intressant plats är Google Browser Size. Du kan öppna din webbplats i den här platsen för att se hur många procent av världens besökare som kan se olika delar av den. Läs mer om Google Browser Size.
På en webbplats så kan man när det gäller bredden antingen ha en fast bredd (både för hela platsen men också för vänsterkolumenen och högerkolumnen) eller så kan man använda sig av en flytande bredd som anpassar sig efter besökarens bildskärmsupplösning. En bred bild eller flera bilder på bredden liksom långa ord kan göra att en fast bredd inte fungerar. En flytande bredd kan göra att platsen ibland ser väldigt annorlunda ut trots att innehållet är detsamma. Därför föredrar en del web designers en fast bredd.
Joomla 24 som erbjuder många gratismallar för Joomla 2.5 delar i sitt Template Gallery in mallarna i tre kategorier: Static Width Templates med fast bredd, dynamic Width Templates med bredd anpassad till besökarens utrustning och Generator Templates.
Att många nu använder smartphones gör att man måste tänka mer på webbplatsens bredd än vad man behövde göra tidigare när man bara gjorde webbplatsen för datorer. I Joomla finns särskilda tillägg som man kan installera snabbt och som gör att platsen visas annorlunda i mobiltelefoner. I dessa tillägg kan man ställa in bredden annorlunda när det gäller mobilvisningar. Om besökaren inte vill se mobilversionen så kan besökaren längst ned på sidan ändra till datorversionen. När man använder en surfplatta som klarar samma bredd som en dator så kan man bli överraskad över att en webbplats som man besöker inte ser ut som man är van vid. Då visas förmodliggen en smartphone-version och om man inte vill använda den (Ibland kan den vara att föredra då en del som ibland upplevs som onödigt är avskalat.) så går man längst ned på sidan och väljer sedan att byta till datorversionen. Ibland är bilderna i mobilversionen mycket mindre och det blir ingen skärpa. Då bör man i surfplattan byta till datorversionen.Webbservrarna
Sidorna som produceras ska ligga på en Internetansluten dator med ett webbserverprogram installerat. Eftersom det på datorn normalt sett i huvudsak enbart är webbserverprogrammet som används så brukar man istället för datorn med webbserverprogrammet enbart säga webbservern. Olika webbservrar (webbserverprogram) och olika versioner av dessa har olika inställningar och klarar av olika saker. ASP som nämns nedan används mest på Microsofts servrar men ASP ska med tillägginstallationer fungera också på Apacheservern.
- Den vanligast (gratis) webbserverprogrammet har i många år varit Apache på operativsystemet LINUX. Servern finns också för Windows.
- Microsoft erbjuder egna alternativ.
- W3c har en egen server vid namn Jigsaw.
Läs mer i en artikel hos Wikipedia.
Verktygen för att skapa och redigera webbsidor
För att producera webbsidor måste man ha en editor.
- Det ursprungliga sättet att arbeta med webbsidor var att man använde ett enkelt textredigeringsverktyg såsom programmet Anteckningar när det gäller Windows. Några nackdelar med att enbart använda sig av ett sådant är att det går väldigt långsamt ibland jämfört med andra program som finns idag, att filen inte kan bli hur stor som helst samt att det ibland för vissa speciella filer som ska skickas till en webbserver inte går att använda Anteckningar.
- Sedan kom speciella program vid namn HTML-editors där man kunde använda koderna på ett smidigare sätt.
- Det som fattades var att man inte kunde se resultatet samtidigt som man arbetade med sidan. Då kom WYSIWYG-editorerna. WYSIWYG betyder What you see is what you get.
- Som du kan se på platserna nämnda ovan så finns det många olika program. Det finns t. ex specialprogram när det gäller CSS. Ett av dessa är TopStyle som är lätt att använda för att skapa CSS-filer.
- Några WYSIWYG-editorer som man måste betala för har fått stor spridning t ex Dreamweaver. För några av dessa har jag tidigare gjort särskilda kurser. Dessa kurser är dock inte till senaste versionen av programmen. Kurserna gällande en del äldre versioner av Dreamweaver finns dock kvar på en särskild plats.
- Utöver att producera enbart sidor så kan man i en del editorer hålla ihop sidorna på en lokal webbplats och om man t.ex. flyttar sidorna inom webbplatsen eller döper om en sida så uppdateras länkar automatiskt. Man kan ibland också använda programmen för att administrera en webbplats på en webbserver. Dreamweaver tillhör denna typ av program.
- Nackdelen med att program som Dreamweaver använder en del egna funktioner som kan göra det svårt att använda det ett program ibland och det andra ibland är att man kan bli bunden vid ett visst program. Detta är inte riktigt bra eftersom det trots allt är koderna som styr. Programmet är bara ett annat gränssnitt vid produktionen.
- Från flera kända program kan man göra webbsidor direkt. Några exempel är Microsofts Word, Excel och PowerPoint. Resultaten varierar beroende på vilken version av programmet som man använder. I Word har det tidigare varit så att växlingarna inte blir så bra om man i originalet har använt tabbar och onödiga Enter-tryckningar. Konverteringarna kan också leda till väldigt komplicerade koder.
- Det har blivit mer och mer vanligt att en webbplats är en CMS såsom Joomla. Läs mer om CMS och Joomla i artikeln Om Joomla . I en CMS finns allmänt en inbyggd WYG-editor. I Joomla erbjuds standardeditorn Tiny MCE men det finns möjlighet att själv byta standardeditorn till en annan redaktör t ex JCE som i kursen. Det finns flera gratis redaktörer att välja på.
- Ibland blir det för komplicerat att skapa en eller flera html-filer från en fil från ett annat program och det gäller särskilt när det föreligger en avancerad design. Då kan man skapa en pdf-fil. Det normala programmet för detta är Acrobat som man måste köpa. Det går mycket snabbt att göra en pdf-fil. Konverteringen fungerar över skrivarfunktionen. Det finns också gratisprogram för att konvertera till pdf-filer t ex Cute FTP och PDF995 .
- Om man vill använda animeringar, ljud eller rörliga bilder på sina sidor så finns det många program för detta.
När det gäller Macromedias program Flash så kan man hämta en provversion som man kan använda under en månad. - W3C har en egen webbläsare/editor vid namn Amaya .