WordPress
När man nämner wordpress i dessa samanhang så är det många som refererar till blogg och det stämmer. WordPress är det största och mest spridda bloggverktyget. I och med att man kan ladda hem och placera systemet lokalt på sin dator eller egen webbserver så kan man med hjälp av kunskaper i HTML, CSS bygga om bloggverktyget till ett CMS verktyg. Som inte behöver se ut som en blogg utan som en vanlig webbsite. Jag kommer att spela in filmer om detta senare. Men är du intresserad av lära dig mer så har jag samlat ett antal länkar som får dig igång.
Video
http://css-tricks.com/video-screencasts/25-designing-for-wordpress-part-one/
http://css-tricks.com/video-screencasts/26-designing-for-wordpress-part-two/
http://css-tricks.com/video-screencasts/27-designing-for-wordpress-part-three/
Text
http://www.webdesignerwall.com/tutorials/complete-wordpress-theme-guide/
Webbdesign
Under denna rubrik har jag samlat ett antal länkar till tutorials som går igenom olika sätt att designa webbsiter. Framförallt så används photoshop som rit verktyg. Att göra dessa tutorials ger dig en god bas om hur en webbsite av nyare snitt skall designas och typografisk sett är riktig.
http://line25.com/tutorials/create-a-clean-modern-website-design-in-photoshop
http://net.tutsplus.com/tutorials/html-css-techniques/design-a-beautiful-website-from-scratch/
http://www.blog.spoongraphics.co.uk/tutorials/how-to-build-your-own-single-page-portfolio-website
CSS
Lektion 1
Bakgrund
Den första lektionen så titta vi på hur man med hjälp av CSS kunde arbeta med bakgrunden på en hemsida.
Se filmen.
Ladda ner övningsmaterial
Taggar
Hur ser relationen ut mellan HTML och CSS varför har man CSS. Vi tittar på hur man kan påverka olika taggar med hjälp av CSS. Vi tittar på taggarna H1, H3, A. Vi skapar rubriker, brödtext och länkar med mouse-over funktion.
Lektion 2-3
Vi börjar titta på hur man kan använda DIV taggar för att skapa layout på hemsidan. CSS används för att sätta funktioner på DIV taggar. Vi skapar en liten site med hjälp av CSS.
T3u, Webb B
Se film 1
Se film 2
Ladda ner övningsmaterial. .zip
ESMP3b
Se filmen
Ladda ner övningsmaterial. (finns inte än)
Inlämningsuppgift.
Text-hjälp. pdf
Webb B PDF
T3u PDF
ESMP3b PDF
Extraövningar.
Twitter.
Svårhetsgrad: Medium
Förkunskaper: CSS
Om Twitter
Twitter är en social nätverkssida samt mikroblogg som möjliggör för användare att uppdatera sin egen mikroblogg samt läsa andras uppdateringar (lokalt betecknade som tweets), vilka består av textbaserade postningar om max 140 tecken.
Uppdateringarna visas på användarens profilsida samt skickas till andra användare som anmält intresse att motta dem. Avsändaren kan välja att endast visa sina uppdateringar för sina godkända kontakter men obegränsat utdelande är standardinställning.
Man kan använda twitter på sin egen websida. Jag visar i denna filmen hur man kan publicera informationen ut twitter så att den kan synas på din websida
Se filmen. (finns inte än)
Lightbox 2
Lightbox är en bildvisningsfunktion som är enkel att använda och det blir ett snyggt resultat.
Lightbox hemsida
Lightbox video (engelska)
Externa övningar.
Tutvid.
CSS layout. Video
Text & länkar Video
Bakgrunder Video
Bildeffekter Video
Webdesignerswall
bildeffekter Text
Texteffekt Text
avancerad css meny Text
Transparanta färger Text
Webbdesignskolan (Svenska)
Grunderna i CSS Text
Anpassa scrollister Text
Färgschema:
http://colorschemedesigner.com/
http://kuler.adobe.com/
Inspirations design
01. Webbsidor med extremsport
02. Roliga lekfulla webbsidor
03. Vektorlandskap
04. De 5 fulaste webbsidorna
05. Webbdesign med papper
06. Minimala websidor
07. Webbsiter med stora bakgrundsbilder
08. Design tränder 2008
09. Portfolio på en sida
10. Vektorillustrationer på websidor
11. 101 grymma portfolio
jQuery
Avancerade web 2.0 funktioner.
Rullande sidor
jQuery övningar för designers
Blandade funktioner
Övrig inspiration
http://www.daleharris.com/
T3U
Webbbyrå
Ni har två lektioner på er att starta en webbyrå. Tanken är att detta skall vara så värkligt som möjligt för er där ni skall få uppdrag under våren som innefattar er alla som en grupp och mindre projekt som ni individuellt skall lösa. Under de två första veckorna så skall arbeta med följande uppgifter.
1. Namn på er webbyrå.
Er webbyrå behöver ett namn, namnet skall inte bara vara något som finns på logotypen utan skall också på ett eller annat sätt identifiera er som företag. Det är en stor skillnad på om man döper byrån till ”IT-snickaren” eller om ni döper det till ”Doberman” eller ”Kokokaka”. Namnet på byrån ger den en skäl och där igenom blir äkta och värklig. Namnet skall också vara något som man kan leva upp till. Ett namn som ”Superhype” drar till sig en viss typ av kunder som förväntar sig något av företaget ”Superhype” som kanske inte skulle förvänta sig av ett företag som heter ”it-snickarn”.
Arbete att ta fram ett bra namn på ett företag är svårt och tar lång tid. Så lägg mycket dit på att klura fram ett bra namn som också kan användas under lång tid. Jag menar hur roligt är det att idag sitta med ett företag som heter Cyberkodarna, Joltkillarna, PC-pojkarna.. mm. Ni förstår säkert vad det är jag är ute efter.
http://www.it-snickarn.se/index.html
2. Logotyp.
Er nya webbyrå skall ha en logotyp, någon som skall innehålla namnet på nyrån i någon form samt en symbol. Det är viktigt att logotypen i framtiden skall kunna fungera bara med namnet eller symbolen.
Skapa gärna denna logotyp i Illustrator, det är okej att skissa i photoshop om ni är mer bekväma med det. Men en vektoriserad EPS från Illustrator är så mycket enklare att kunna använda i flera olika sammanhang. I tryckt form, animerad i flash, mm.
Hemsida.
Er webbbyrå behöver en hemsida, denna sida skall vara ert företags fönster ut mot värden och den skall kunna ge er nya kunder. Hemsidan skall på samma sätt som logotypen ge en känsla om vad företaget har för profil.
Jag vill att ni gör individuella skisser i photoshop.
Varje medlem i gruppen skall:
- Designa två sidor, förstasidan och referenssidan på hur webbyråns framtida hemsida skall se ut. Logotypen den nya logotypen skall finnas med.
Referenssidan skall innehålla de kommande projekten som ni jobbat med, bilder och information om projekten.
2. Efter alla är klara med sina skisser så skall en av dessa väljas ut för att sedan skall kodas. Hur detta arbete skall organiseras kommer jag att återkomma till.
Innan ni börjar designa hur hemsidan skall se ut. Titta gärna på hur era konkurrenters hemsidor ser ut. Här följer några exempel på webbyråer och hur deras hemsidor ser ut.
http://pixcode.se/?gclid=CL2Hh9OqoZ8CFQMu3godvAIv8A
http://sveareklam.se/?departmentID=1&categoryID=6
http://www.reklambyranvacker.se/