Öppna filen header.php i din tema-mapp.

Lägg följande kodrad nångonstans inom head-sektionen:

<link rel="shortcut icon" href="/favicon.ico" />

Ladda upp ikonfilen i rot-mappen.


I standardinstallationen av WordPress så hamnar det en sektion i sidspalten med inloggninglänk till admin. Längst ner i denna finns även en länk till WordPress.org. Fick just en fråga om hur man tar bort den och kommer visa här. Omservera att detta gäller version 2.8.4 och detta kan ändras i framtida WordPress-versioner.

1. Se till att ladda ner den senaste versionen av wp-includes/default-widgets.php från ftp:n till din egen dator.

2. Öppna filen och gör en sökning på ”wordpress.org” i källkoden.

3. Kommentera bort list-elemetet med innehåll. Se bifogad bild.

wp-bort-med-wordpress.org

4. Ladda upp filen till ftp-kontot igen. Klart!


Idag ska vi installera bloggsystemet WordPress på våra datorer. Det förutsätter att vi redan har en webbserver installerad som vi gjorde under dag 6.

1. Gå till http://localhost/phpmyadmin/ i din webbläsare och skapa en databas som heter ”wordpress”

wordpress-db

2. Ladda ner WordPress från: http://sv.wordpress.org/

3. Packa upp filen och lägg mappen som kan heta ”wordpress” i C:\xampp\htdocs

4. Öppna filen wp-config-sample.php och redigera enligt följande:

define('DB_NAME', 'wordpress');     // The name of the database
define('DB_USER', 'root');     // Your MySQL username
define('DB_PASSWORD', ''); // ...and password
define('DB_HOST', 'localhost');     // 99% chance you won't need to change this value

5. Surfa till http://localhost/wordpress/wp-admin/install.php och följ instruktionerna.


Här under finns en länk till ett skript som ritar upp ett formulär för att mata in gästboksinlägg. När man postar formuläret så sparas inlägget i en databas.

1. Ladda ner följande zip-fil

http://grunden.se/webbutbildning/jesper/gastform.php.zip

2. Lägg det i din hemsidemapp som ligger i C:\xampp\htdocs\namn-pa-din.hemsida och packa upp det.

3. Inkludera skriptet på den sida som du vill att gästboken ska komma upp, förslagsvis: gastbok.php

För att inkludera skriptet så skiver du följande under rubriken på den sidan: <?php include ‘gastform.php’; ?>

4. Gå till ”phpmyadmin” genom att klicka på Admin bredvid MySql på kontrollpanelen för XAMPP.

5. Skapa en databas som heter ”gastbok” enligt följande bild.

skapa-gastbok-db

6. Skapa en tabell som heter ”massages” med 5 fält.

tabell-messages

7. Fyll i fälten enligt bild

falt-i-tabell

8. Ange att fältet ”Id” ska vara primärnyckel genom att klicka på nyckeln. Klicka även på ändra på raden Id och kryssa i ”AUTO_INCREMENT”.

Id-nyckel

Nu ska det hela vara klart. Kontrollera genom att surfa till http://localhost/namn-pa-din.hemsida/

Dessa instruktioner är hämtade från den engelska artikeln:

http://www.tutorialhero.com/click-58054-guestbook_in_3_easy_steps.php


För att kunna köra PHP på sin egen dator så behövs en webbserver som kan tolka PHP-filerna.

1. Ladda ner programmet

XAMPP är en sådan webbserver som är lätt att installera. Programmet laddar man ner på följande länk:

http://www.apachefriends.org/en/xampp-windows.html#641

Finns under rubriken ”XAMPP Windows 1.7.1”. Välj ”Installer”.apache friends - xampp for windows

2. Klicka på den nedladdade filen och följ instuktionerna för installationen.

3. Gå sen till mappen på din dator som heter Xampp och klicka på setup_xampp.bat

4. Klicka sen på xampp-control.exe

5. Starta webbserver på kontrollpanelen

xampp7

6. Surfa till http://localhost/xampp/splash.php i din webbläsare för att kontrollera att det fungerar


Grafik i tre dimensioner ger oss en häftig upplevelse både i datorspel och nyttoapplikationer. Tänkte här visa några av de coolaste exemplen av 3D-grafik som jag sett det senaste.

Hitta.se/3D

hitta.se - 3D - svangatan 4c

I nästa exempel så utforskar vi Hitta’s nya 3D-läge där man kan se städer från ovan. Här är t ex ett exempel där vi börjar på Svangatan 4c där våra lokaler ligger. Hitta.se/svangatan 4C (Obs klicka på ”3D” i övre menyn)

Hitta.se/gatubild

hitta.se gatubild (labbet)

Vår resa börjar i Stockholm närmare bestämt mitt i gatan på Sergels Torg. Med denna tjänst kan vi sendan utforska gatorna runt om i huvudstaden och vrida kameran åt alla håll i varje steg vi tar. Hitta.se/gatubild

Microsoft Photosynth

Photosynth-Torres-del-Paine-Chile

Nu ska vi bege oss till Torres del Paine i Chile och utforska ett panorama av ihoppusslade bilder.

NASA - International Space Station Photosynth collections

Och på bilden ovan så beger vi oss ut i rymden för att kolla på en av Nasa’s rymdstationer.

Augmenterad verklighet

jesper-vs-digital

I det sista exemplet ska vi visa hur verkligheten kan kopplas ihop med det digitala. Till detta experiment behöver vi först skriva ut en markör på papper. Vi behöver också ha tillgång till en webbkamera. Gå till exemplet för augmenterad verklighet som är en reklamplats för ett energiföretag.


Definitionen för vad en dynamisk hemsida är kan vi läsa om på Wikipedia.

Innehållet i en dynamisk webbsida kan förändras till skillnad från statiska webbsidor där innehållet hela tiden är detsamma. En dynamisk webbsida kan till exempel ha en klocka som hela tiden visar aktuell tid. Principen för en dynamisk webbsida är att en statisk sida byggd i HTML skapas på servern precis innan den ska skickas till webbläsaren på klientdatorn. Dynamiska webbsidor blir riktigt kraftfulla när de interagerar med en databas. En sökmotor är ett exempel på en vanligt förekommande dynamisk sida.

ASP, PHP, JSP, CGI är exempel på andra tekniker som används för att skapa dynamiskt innehåll på webben. Wikipedia använder PHP för att generera dynamiska webbsidor.

Vi väljer serverspråk

Vi är först osäkra på vilken typ av webbserver vårt webbkonto på webbhotell (F S Data) är utav. Med hjälp av tjänsten BuiltWith gör vi en test på vår hemsida och konstaterar att det är en Apache-server. Eftersom PHP fungerar bra att köra på den servertypen väljer vi denna serverteknik.

Mailformulär med PHP hos F S Data

Det första vi vill prova på är att göra ett mailformulär och hittar en bra guide på webbhotellets hemsida för hur man skapar ett mailformulär med PHP och CGI-script. Efter att ha kommit underfund med att vi måste godkänna de adresser som ska kunna gå att skicka till i filen cgi-bin/formmail_settings.pl så får vi iväg våra första mail.

Include med PHP

Ett av målet med att använda ett serverspråk är att vi vill kunna skapa våra sidor dynamiskt och låta servern pussla ihop de olika delarna. De områden i layoten som består av Header, Meny och Footer ska vara samma på alla våra sidor och vi vill därför bara ha dessa kodsnuttar i enskilda filer och inkludera dem i alla sidor på webbplatsen. Detta kommer leda till att hemsidan blir lättare att underhålla eftersom vi t ex bara behöver lägga till en länk i meny i inlude-filen (meny.php)

Ifall webbplatsen är uppbyggd av statiska filer med ändelsen .html så är en sådant upplägg inte möjligt utan då måste vi in och ändra i alla filer ifall vi vill lägga till något i menyn.

Vi hittar en bra guide till hur man gör include med PHP och vi får det att fungera bra på första försöket.

Även F S Data har en sida där det står lite om PHP, kan vara bra att kolla in senare ifall vi hittar andra tips på funktioner vi vill prova på.


Vi går igenom några av de vanligaste HTML-elementen och pratar om vad de har för egenskaper. Vi konstaterar att det finns två olika typer av element.

Block-element

Det som kännertecknar ett block-element är att det täcker hela den yta i bredd som finns tillgänglig.

En rubrik <h1> ligger t ex över hela ytan i bredd. En paragraf <p> likaså.

<div>-elementet har vi tidigare bekantat oss med när vi gjorde layout. Vi kom fram till att en <div> passar bra till att göra ”boxar” av eftersom det elementet inte har någon speciell betydelse. Det är först när vi formaterar den med en stilmall (CSS) som vi kan få den att uppföra sig på olika sätt, ha en bredd, välja en bakgrundsbild, bakgrundsfärg, ramar etc.

Inline-element

Den andra typen av HTML-element kallas ”inline-element”. Det betyder att de ligger i linje bredvid dess närmaste grannar. En länk <a href=”index.html”>Hem</a> vill vi oftast kunna ha mitt i en brödtext och det möjliggörs av att den har just de egenskaperna. Element som ligger bredvid och som också är av typen inline kommer lägga sig på en rad bredvid.


Igår visade jag på projektorn hur man kan skapa en webbplats med en extern stilmall. Idag kan vi alla prova på att göra en likadan hemsida på våra egna datorer. Kommer här visa en guide hur man går till väga.

separera-css-html

Först ska vi skapa ett projekt som innehåller alla filer för webbplatsen

Steg 1 – Skapa en ”New Site” i Dreamweaver

Steg 2

Steg 3

Steg 4

Steg 5

Nu ska vi skapa den första sidan i webbplatsen

Steg 6

Steg 7

Steg 8

Steg 9


Infrastruktur och hårdvara

Första dagen tänkte jag att vi skulle gå igenom snabbt hur infrastrukturen på internet ser ut. Hur når hemsidors innehåll våra datorer (klienterna). Vad en server och hur kommunicerar de med varandra.

Webbläsare

Vilka webbläsare känner vi till och hur viktigt är det att testa en hemsida på alla alternativ?

Hur är en hemsida uppbyggd?

Vi lär oss om HTML, CSS och Javascript och vilka funktioner respektive programmeringsspråk har. Skapar en enkel webbsida i Dreamweaver samtidigt att ha som exempel.

Vilka typsnitt fungerar på webben och varför är man så begränsad i valet av typsnitt?

Hur skapar men en layout för en sida och vilka varianter finns det?