This is an introduction to working with the web that I held for students of the Digital Media programme at Blekinge Institute of Technology.

1. Fredrik Broman
AD/Interaktionsdesigner

2. 2001–2004
Jag pluggade i MT01.
Inriktning webb + grafisk form.
Sista året specialicerade mig på Flash/Actionscript.

3. 2003–
Egen firma sedan 2003.

4. Gjorde mitt ex-jobb på Avalon (Technology).
Är idag AD/Interaktionsdesigner på Avalon Enterprise.
Ansvar för utseende och funktion i nästan alla projekt.

5. Avalon finns på flera platser i Sverige.
Startar nytt kontor i Norge snart.

6. Några kunder jag jobbat med.

7. Team Användargränssnitt
Swedbank IT–utveckling
Konsult på Swedbank sedan feb 2008.
Sitter på heltid på IT-U, Stora Essingen i Stockholm.
Agerar användarens advokat i bankprojekt.

8. Webb?
Vad är webben för nånting?
Hur förklarar man webb?

9. Webb!
Webben handlar om kommunikation.
Människor pratar med människor.
Tekniken ska hjälpa skapa kontakt.

10. Relationer
Både sociala och professionella kontakter.
Det gäller att ha kontakter för att få jobb och uppdrag.
Alla kontakter är bra kontakter.

11. Tekniken är ett medel för att få folk att mötas.
#TweetMeetup är en grupp Twitter-användare som ibland träas IRL.

12. Webbutveckling
Några grundläggande tips för dig som vill
komma igång
Några praktiska tips på hur man jobbar med webb.
Ingen avancerad nivå, men det är principerna som är det viktiga.

13. =
Lång utvecklingstid ger dyrare produktion.
Konkurrera genom att skära ner på tid eller arvode.
Bättre att skära ner på tid. Det ger mer pengar och mer tid till andra projekt.

14. Spara tid:
• Programmera med standarder
• Återanvänd kod
• Utnyttja andras arbete
Några sätt att spara tid.
Börjar med att titta på standarder.

15. Webbstandarder
• W3C – World Wide Web Consortium
www.w3.org
www.w3schools.com
Standard = lättare för andra att komma in i koden. Bra för grupparbete.
Standard = mindre tid för att fixa buggar i olika plattformar.

16. • HTML – Hypertext Markup Language
• CSS – Cascading Stylesheets
• JS – JavaScript
Tre dominerande språk på klientsidan.
HTML = Data + struktur.
CSS = Utseende + layout.
JS = Funktionalitet (utöver den inbyggda i webbläsaren).

17. !DOCTYPE HTML PUBLIC quot;‐//W3C//DTD HTML 4.01//ENquot;
html lang=quot;enquot;
head
meta http‐equiv=quot;Content‐Typequot; content=quot;text/html; charset=utf‐8quot;
titlePage title/title
/head
body
div class=quot;wrapperquot;
div id=quot;headerquot;
h1My web page/h1
ul id=quot;navquot;
li class=quot;selectedquot;a href=quot;index.htmlquot;Welcome/a/li
lia href=quot;about.htmlquot;About me/a/li
lia href=quot;portfolio.htmlquot;My portfolio/a/li
/ul
/div
div id=quot;contentquot;
h2Welcome!/h2
pThis is my first web page./p
/div
/div
/body
/html
Exempel på HTML.

18. Välformad kod som följer standard renderar i flera enheter.
Lättillgängligt för folk med funktionshinder.
Blinda, koncentrationssvårigheter, dyslektiker etc.

19. Spara tid:
✓ Programmera med standarder
• Återanvänd kod
• Utnyttja andras arbete
Nu tittar vi på återanvändning av kod.

20. ⌘ + V = (^_^)/
Använd standarder för att kunna återanvända kod.
Redan programmerat t.ex. en meny? Använd samma kod i nästa projekt om det går.
Snabbare utveckling om alla skriver kod på samma sätt.

21. !DOCTYPE HTML PUBLIC quot;‐//W3C//DTD HTML 4.01//ENquot;
html lang=quot;enquot;
head
meta http‐equiv=quot;Content‐Typequot; content=quot;text/html; charset=utf‐8quot;
titlePage title/title
link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;style/css/screen.cssquot; media=quot;screenquot; /
script type=quot;text/javascriptquot; src=quot;js/global.jsquot;/script
/head
body
div class=quot;wrapperquot;
div id=quot;headerquot;
h1My web page/h1
ul id=quot;navquot;
li class=quot;selectedquot;a href=quot;index.htmlquot;Welcome/a/li
lia href=quot;about.htmlquot;About me/a/li
lia href=quot;portfolio.htmlquot;My portfolio/a/li
/ul
/div
div id=quot;contentquot;
h2Welcome!/h2
pThis is my first web page./p
/div
/div
/body
Separera innehåll, design och funktion så mycket det går.
Röd text = inlänkad CSS.
Grön text = inlänkad JavaScript.

22. I de flesta fall bör man länka in CSS + JS i HTML.
Finns vissa fall när man skriver koden direkt i HTML.

23. Externa filer går att länka in i flera HTML-dokument.
Samma funktionalitet och design på flera sidor.

24. Enkelt att byta ut en extern fil för att t.ex. byta design utan att röra html-filerna.

25. Spara tid:
✓ Programmera med standarder
✓ Återanvänd kod
• Utnyttja andras arbete
Nu tittar vi på hur man kan utnyttja andras arbete.

26. Uppfinn inte hjulet gång på gång.
Det finns duktiga människor på nätet som redan löst ditt problem!

27. Ramverk
• BlueprintCSS
• Yahoo! YUI
• 960Grid
• jQuery
• Prototype/Scriptaculous
• Dojo
Ramverk är färdig kod som löser vanliga problem.
Utgå från ett eller flera ramverk så slipper du lösa problemen själv.

28. Tjänster / API
• Google Maps (kartor)
• Twitter (microblogg)
• Flickr (fotoblogg)
• Rollyo (sök)
• Gravatar (profilbilder)
• OpenID (login)
Det finns väldigt många tjänster med mer eller mindre öppna API.
Utnyttja en tjänst för att slippa utvecklingstid, support etc.
Tänk på att API kan ändras.

29. Exempel på ny sajt som använder en extern tjänst.

30. Idag används Google Maps för kartor.
Skulle kunna använda OpenID för login och Gravatar för bild.

31. Till sist
• Kolla in: agil utveckling i små grupper
Effektiv metodik för att jobba
med mjukvaruutveckling.
Bra sätt att jobba i små grupper.

32. • The Agile Manifesto
agilemanifesto.org
• The Agile Web Design Manifesto
www.emilychang.com/go/weblog/
comments/the-agile-web-design-manifesto-
an-introduction/
• Agile Design
alistapart.com/articles/
gettingrealaboutagiledesign

33. Tack!
fredrikbroman.com
@frebro
Blogg: http://fredrikbroman.com/
Twitter: @frebro