jQuery

Om du inte redan gjort det ladda ner Firefox och använd som webläsare.

Ladda seda ner add-in som heter webdeveloper.

Installera

 

Dag 0

Lek med jQuery för att se vad det kan göra.

På den här länken finns en enkel javascript kompilator så du enkelt ser vad du kan göra med 
Här har du allt du behöve för att börja koda med jQuery

 

 

 


 

Dag 1

progressive enhancement

Det här betyder att så många som möjligt ska kunna utnyttja din sida. De som har en modernare webläsare ska kunna ha nytta av coola effekter som snygga bildgallerier och menyer. De med äldre webläsare ska kunna navigera hjälpligt på sidan.

Berika sidor med ECMA-script.

Vi ska lära oss att använda script för att utföra sådant på sidan där inte css/html räcker. Tex en rikare upplevelse på sidan som snygga bildgallerier eller spara bandbredd genom att minimera anrop till en webserver.

jQuery

JavaScript

Java

 

jQuery

Ladda ner jQuery här (högerklicka och spara på ett bra ställe)

Du kan använda min template eller så kan du spara om din Gösta sida.

 

Övning 1

Vi ska installera jQuery och kolla så det funkar.

lägg till den här kodraden någonstans i <head>

<script type="text/javascript" src="/jquery-1.10.2.js"></script>

Som du förstår så läser den här raden in jQuery till din sida.

 

 

Vi ska göra rätt från början och lägga till en separat fil med kod. 

Skapa en ny fil i notepad++ (ctrl+n).

Välj språk Javascript.

Spara som minkod.js

lägg till den här kodraden någonstans i <head>

<script type="text/javascript" src="/minkod.js"></script>

 

Lägg till den här koden i minkod.js

 

$(document).ready(function () {

// här ska vi lägga in kod

});

 

Ta bort "// här ska vi lägga in kod" och skriv istället.

alert('jQuery funkar').

 

http://webdesignerwall.com/tutorials/jquery-tutorials-for-designers

 

Hjälp till uppgiften

Enkel nybörjarsida kolla hur de har gjort

Här har du allt du behöver veta om jQuery

En serie som går igenom hela grunderna

 

Övning 2

Vi ska titta på det här funktionerna.

Show, Hide, slideDown, slideUp,

 

Jobba själv

Skapa de här beteenden.

Övning 1.

Lägg in lite text och en rubrik med h1. Lägg till jQuery som gör så att h1 ändrar färg när du klicka på tex en knapp.

Övning 2

Lägg till en klass som får din rubrik att ändra font-size till 400%.

Övning 3

Skapa två paragrafer. När du klickar på en knapp med texten läs mindre försvinner en paragraf. När du klickar igen kommer texten tillbaka.

Övning Webdesigner wall

Kolla den här länken och se hur de har gjort och testa funktionerna.

 


 

Dag 2 Webdesignerwall och Plug-in

Toggle

Toggle är jQuery funktion som fungerar som en av/på knapp. Första gången du klickar slår du av synligheten på ett element, andra gången slår du på igen.

Lägg till två paragrafer till din html. Skapa något som du clickar på som slår av och på synligheten på den sista texten.

Här har du dokumentatione för toggle

 

Webdesingerwall

Webdesignerwall är en sida med mycket tips, tricks och tutorial för webutvecklare.

Kolla på webdesingerwall hur de har byggt några olika jQuery funktioner. Välj den du tycker verkar passa bäst och gör den själv.

Ändra den lite grann. Tex lägg in lite bilder eller få det att se lite annorlunda ut.

Webdesingerwall

 

Byta stylesheet med jQuery. (lite svårare)

jQuery kan användas för att byta stylesheet på din sida. Skapa två stylesheet i notepad, en för dagtid och en för natttid.

 spara som tex day.css och natt.css

Skapa en knapp som gör att du kan byta mellan dag och natt.

Det här är en förenkling av övningen som du hittar här.

Tutorial ändra stylesheet.

Här nedan har jag två bilder, en nattbakgrund och en dagbakgrund.

 

Hur det funkar.

1) Skapa två stylesheet ett för dag theme och ett för natt theme.

2) Gör en knapp som låter dig ändra mellan de båda theme.

3) För att lyckas måste du kunna den här jQuery koden .attr kolla hur den funkar på dokumentationen.

4) tex så här

$('.day').click(function() {

$('link').attr('href','morning.css');
});

Förklaring: jag har skapat två knappar med olika klasser som förändrar link tag, som läser in min stylesheet.

Ladda in galleria (lite krånglig)

Ett vanligt sätt att använda jQuery är att ladda ner och installera plug-in som andra redan har skrivit. För det mesta används bildgallerier och menyer.

Vi ska ladda ner en slide-box.

Här kan du ladda ner plug-in galleria.

Plug in (min sida som förklarar hur du gör)

Tips är att noga gå igenom dokumentationen.

 


 

 

Dag 3 Fler funktioner

Vi tittar lite närmare på några användbara funktioner som du såg tidigare i Webdesignerwall

slideToggle

toggleClass

Animera

 

Enklare

Lös uppgiften i webdesingerwall om chaining. dvs du ska animera en blå box.

Ladda ner en bild. När du klicka på någonting ska bilden bli mycket större. En annan knapp gör så att bilden blir mindre igen.

Skapa en rubrik tex h2. När du klickar på rubriken ska du se text, sedan göms texten igen när du klickar en gång till. (tips går att lösa på många vis, slideToggle är enklast

Svårare

Lös uppgiften med slidepanel i webdesignerwall

Nu när du kan grunderna i jQuery försök dig på att göra tutorial så du kan få en snygg meny. Här här hovermeny tutorial

Ifall du har glömt hur man skapar en horisontell meny finns den här tutorial

Mycket svårare

Skapa en lightbox. FÖr att lösa den här uppgiften behöver du förstå det här

variabler

if och else

html

length

append

Tutorial för att skapa en lightbox

Det hjälper om du gått igenom videotutorial om jQuery.

Observera att tutorial är skriven innan senaste versionen av jQuery därför funkar inte .live. Du behöver ändra koden till on. (fråga mig när du kommit så här långt)

 


 

 

Dag 4 

If och else och några andra jQuery funktioner

 

If och else

If och else är användbara när något ska hända om någonting annat är synligt. För att skapa en lightbox
kan du behöva använda dig av if och else. Där används if och else för att ta reda på om lightbox redan är synlig på skärmen eller måste ritas upp.

Jag har löst mitt "read more" med if och else.

Här är en tutorial som förklarar ett annat vis att lösa samma uppgift utan if/else

Examinerande uppgifter jQuery

E

Åkes fisk och asfalt

Åke har en lite enskild firma ”Åkes fisk och asfalt”.  Han vill göra sin sida lite mer användarvänlig. Därför vill han skapa en funktion som får text att ändra färg till röd om någon är färgblind på svart. Du ska göra en knapp och när man trycker dät så ändar någon text färg till röd.

Extra bra om du kan göra så att texten byter färg tillbaka när man klicka igen.

Du ska också ha en knapp eller text som gör att en inloggfält försvinner och kommer tillbaka när du trycker. Du kan antingen skapa en knapp för gömma och en för att ta fram igen. Eller också har du en knapp som gömmer och när du klickar igen kommer det tillbaka.

 

Du ska också fixa det här med CSS.

  • Fixa så att sidan hamnar i mitten av skärmen.
  • Lägga till en background på sidan
  • Styla "Åkes Fisk och Asfalt" på valfritt vis.

 

Hjälp till uppgiften

Här kan du ladda ner HTML, CSS och script. 


 

C

Lady och Kalufsen

En Lady och Kalufsen är en frisersalong i Uppsala. Deras frisörer kan ingenting om websidor därför vill de att DU ska hjälpa dem. De vill att du ska göra en sida för vinter som är lite ”kall”. Så vill de ha en sida för sommar. De vill ha en knapp eller något som göra att det ska gå att ändra utseende på hela sidan på en gång.

De vet också att många av deras kunder inte orkar läsa en massa strunt. Därför vill de att du utför en funktion som låter dem gömma och ta fram text. Ifall du kan imponera på dem med andra funktioner som en snygg meny med jQuery så är det imponerande.

Det här gör dem också imponerad

  • Du förstår hur de har tänkt att de vill ha sidan placerad om du tittar på de bifogade bakgrunderna
  • Du kan grejja lite själv i PhotoShop och fixa till bakgrunderna.
  • Du kan klura ut ett sätt så att en blomma positioneras delvis över texten på sidan.

 

Du ska också fixa det här med CSS

  • "Lady och lufsen" texten ska ha lite luft runt sig.
  • Klippbilderna ska ligga bredvid varanda med ett litet mellanrum.
  • Sidan ska vara centrerad till mitten
  • Du ska ha runda hörn på din sitewrap.

 

Hjälp till uppgift

Färdig HTML CSS och jQuery

 

 

 

 


 

A

Lightbox

Comhem kontaktar dig. De vill ha hjälp med att skapa ett bildgalleri som är snyggt. Du ska ha små thumbnails, när du klickar på en av bilderna ska den förstoras samtidigt som resten av sidan tonas ned. (blir mörkare). Comhem  vill ha thumbnails snyggt uppradade efter varanda, storlek cirka 90px * 90px.

Du ska sedan kunna stänga din lightbox genom att trycka var som helst på sidan. (dvs du behöver inte kunna göra en knapp för avstägning)

Du ska också skapa en funktion som gör att hela sidan tonar bort om du trycker på en knapp. Något på knappen förändras då. tex en pil som byter håll. Dvs först står det tex göm, sedan visa. Extra bra om du kan få sidan att animeras bort.

Om du kan använda dig av variabler och vettig kod så är det bättre.

 

Sidan ska vara centrerad på skärmen 

Comhem logotypen ska vara till höger om deras logotype.

Fjärilen ska delvis täcka rubriken på paragraftexten på sidan.

 

 

 

Hjälp till uppgiften

css, html och jQuery

Hela uppgiften vara tipp-topp fixad. Dvs du behöver inte förstå all kod utan och innan. (vi har ju inte gått igenom all kod ännu)

fjaril

klar

 

 

 


 

Dag 5-6 Eget arbete klart