Embed Size (px)
Citation preview
Fredrik BromanAD/Interaktionsdesigner
2001–2004
Jag pluggade i MT01.Inriktning webb + grafisk form.Sista året specialicerade mig på Flash/Actionscript.
2003–
Egen firma sedan 2003.
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.
Avalon finns på flera platser i Sverige.Startar nytt kontor i Norge snart.
Några kunder jag jobbat med.
Team AnvändargränssnittSwedbank IT–utveckling
Konsult på Swedbank sedan feb 2008.Sitter på heltid på IT-U, Stora Essingen i Stockholm.Agerar användarens advokat i bankprojekt.
Webb?
Vad är webben för nånting?Hur förklarar man webb?
Webb!
Webben handlar om kommunikation.Människor pratar med människor.Tekniken ska hjälpa skapa kontakt.
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.
Tekniken är ett medel för att få folk att mötas.#TweetMeetup är en grupp Twitter-användare som ibland träffas IRL.
WebbutvecklingNå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.
=
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.
• Programmera med standarder
• Återanvänd kod
• Utnyttja andras arbete
Spara tid:
Några sätt att spara tid.Börjar med att titta på standarder.
Webbstandarder
• W3C – World Wide Web Consortiumwww.w3.orgwww.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.
• 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).
<!DOCTYPEHTMLPUBLIC"‐//W3C//DTDHTML4.01//EN">
<htmllang="en">
<head>
<metahttp‐equiv="Content‐Type"content="text/html;charset=utf‐8">
<title>Pagetitle</title>
</head>
<body>
<divclass="wrapper">
<divid="header">
<h1>Mywebpage</h1>
<ulid="nav">
<liclass="selected"><ahref="index.html">Welcome</a></li>
<li><ahref="about.html">Aboutme</a></li>
<li><ahref="portfolio.html">Myportfolio</a></li>
</ul>
</div>
<divid="content">
<h2>Welcome!</h2>
<p>Thisismyfirstwebpage.</p>
</div>
</div>
</body>
</html>
Exempel på HTML.
Välformad kod som följer standard renderar i flera enheter.Lättillgängligt för folk med funktionshinder.Blinda, koncentrationssvårigheter, dyslektiker etc.
✓Programmera med standarder
• Återanvänd kod
• Utnyttja andras arbete
Spara tid:
Nu tittar vi på återanvändning av kod.
⌘ + 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.
<!DOCTYPEHTMLPUBLIC"‐//W3C//DTDHTML4.01//EN">
<htmllang="en">
<head>
<metahttp‐equiv="Content‐Type"content="text/html;charset=utf‐8">
<title>Pagetitle</title>
<linkrel="stylesheet"type="text/css"href="style/css/screen.css"media="screen"/>
<scripttype="text/javascript"src="js/global.js"></script>
</head>
<body>
<divclass="wrapper">
<divid="header">
<h1>Mywebpage</h1>
<ulid="nav">
<liclass="selected"><ahref="index.html">Welcome</a></li>
<li><ahref="about.html">Aboutme</a></li>
<li><ahref="portfolio.html">Myportfolio</a></li>
</ul>
</div>
<divid="content">
<h2>Welcome!</h2>
<p>Thisismyfirstwebpage.</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.
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.
Externa filer går att länka in i flera HTML-dokument.Samma funktionalitet och design på flera sidor.
Enkelt att byta ut en extern fil för att t.ex. byta design utan att röra html-filerna.
✓Programmera med standarder
✓Återanvänd kod
• Utnyttja andras arbete
Spara tid:
Nu tittar vi på hur man kan utnyttja andras arbete.
Uppfinn inte hjulet gång på gång.Det finns duktiga människor på nätet som redan löst ditt problem!
• BlueprintCSS
• Yahoo! YUI
• 960Grid
• jQuery
• Prototype/Scriptaculous
• Dojo
Ramverk
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.
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.
Exempel på ny sajt som använder en extern tjänst.
Idag används Google Maps för kartor.Skulle kunna använda OpenID för login och Gravatar för bild.
Till sist
• Kolla in: agil utvecklingEffektiv metodik för att jobba i små grupper med mjukvaruutveckling.
Bra sätt att jobba i små grupper.
• The Agile Manifestoagilemanifesto.org
• The Agile Web Design Manifestowww.emilychang.com/go/weblog/comments/the-agile-web-design-manifesto-an-introduction/
• Agile Designalistapart.com/articles/gettingrealaboutagiledesign
Tack!fredrikbroman.com
@frebro
Blogg: http://fredrikbroman.com/Twitter: @frebro
