Digital Æste+k. Interak(on Introdag The Expressive Web

Transkript

1 Digital Æste+k Interak(on Introdag The Expressive Web

2 The Open Web Pla5orm The open web pla:orm består af en række forskellige teknologier som: HTML5 CSS3 JavaScript Fokus er på åbenhed, pla:ormualængighed, og innova(on. We're bepng big on HTML 5. Vic Gundotra, Google "The world is moving to HTML5." Steve Jobs, Apple "The future of the web is HTML5." Dean Hachamovitch, MicrosoW

3 Evolu+on of the Web hxp://evolu(onofweb.appspot.com/

4 Innova+on og design Udviklingen af ny teknologi, for eksempel gadgets, web- standarder, hur(gere- interne:orbindelser, påvirker måden der designes (l nexet på. Eksempler: - Touch- interfaces og drop- down menuer fungerer ikke godt sammen. - Frem(dens internet: Apps kontra WWW. - Forskelle i skærmstørrelser mellem desktop og mobile- enheder. - Øget båndbredde muliggør omfaxende integra(on af video og lyd.

5 Trends 2011/2012 Web design trends 2011/2012 Responsive design hxp://colly.com/ Single Page Websites hxp://enzolivol(.com/ Parallax Scrolling hxp:// hxp://2011.beercamp.com/ Impressive Typography hxp://lostworldsfairs.com/ Store baggrundsbilleder SF Dok 360 Langstrasse Zurich hxp:// hxp://webdesign.tutsplus.com/ar(cles/industry- trends/the- state- of- web- design- trends annual- edi(on/

6 Hvad er HTML5? HTML5 er en revision af den gamle HTML4 standard fra 1999 HTML5 isn't a markup language, it's a mashup language - Molly E. Holzschlag (twixer) HTML5 er stadig et markup sprog, men den nye standard (lbyder masser af muligheder for integra(on af video, lyd, anima(on, geo- loka(on, etc. Features: Rich media support (Video, Audio, Canvas) Udvidet API grænseflade Forbedret seman(sk markup. (screen readers, søgemaskiner) Redefinerer uhensigtsmæssige elementer Fjerner forældede elementer (fx <font> og <center>) Baglæns kompa(belt! State of the art 1999

7 HTML5 Rocks! "HTML5 does not belong to a company or a specific browser. It has been forged by a community of people interested in evolving the web and a consor(um of technological leaders that includes Google, MicrosoO, Apple, Mozilla, Facebook, IBM, HP, Adobe, and many others. The community and consor(um con(nue to collaborate on universal browser standards to push web capabili+es even further. The next genera(on of web apps can run high- performance graphics, work offline, store a large amount of data on the client, perform calcula+ons fast, and take interac+vity and collabora+on to the next level." hxp://

8 Hvad er CSS3? CSS3 er en revision af CSS2.1 Standarden er delt op I moduler som løbende færdiggøres af W3C: Den nye udgave muliggør at man hur(gt, effek(vt og nemt kan implementere de effekter som man før enten skulle bruge Flash, javascript, eller Bitmap billeder for at opnå. Features: Borders Backgrounds Transparency Transforma(ons Fonts Media queries +Mange flere CSS3 er 'baglæns kompa(bel' med CSS 2.1

9 JavaScript Facts: Javascript er en gammel opfindelse fra 1995! Det mest udbredte client- side scriptsprog. BenyXes (l at (lføje avanceret funk(onalitet. Muligheder: Ved at interagere med 'sidens' DOM kan man f.eks: Åbne popup vinduer Validere formulardata Skabe dynamiske billeder (Ex Mouseover) Tegne og animere på et Canvas Nye HTML5 Javascript API'er: Canvas Video Audio Webstorage + mange flere

10 Flash Lanceringen af HTML5 har startet stor debat omkring Adobe Flash (og Silverlight) Flash was created during the PC era for PCs and mice. But the mobile era is about low power devices, touch interfaces and open web standards all areas where Flash falls short. - Steve Jobs Vælg det rig(ge værktøj der passer (l opgaven: Fordele ved HTML5 Kræver Ingen plugins Kan være mindre ressourcekrævende end flash Kan læses af søgemaskiner Fordele ved Flash: Flash Display list. Nødvendigt for komplekse anima(oner og spil. Etableret Værktøj med solidt IDE (Integrated Development Environment) OOP hxp:// on- flash/ hxp://en.wikipedia.org/wiki/comparison_of_html5_and_flash

11 Hvem bestemmer? Udviklingen af standarder (l nexet styres officielt af W3C - W3C havde oprindeligt planer om at stoppe udviklingen af HTML. Apple, Mozilla og Opera var dog ikke enige i denne beslutning. - Sammen danner de i 2004 WHATWG (Web Hypertext Applica(on Technology Working Group) WHATWG begynder herewer at arbejde på det der skal blive (l HTML5. - På et (dspunkt indser W3C fornuwen i projektet og adapterer HTML5. - Dermed eksisterer der 2 udgaver af standarden: W3C og WHATWG. WHATWG: Fokus på udvikling. WHATWG kalder HTML5 'The Living Standard' W3C: Fokus på at dokumentere, konsolidere og skabe fælles regler W3C HTML5 Specifika(on: hxp://dev.w3.org/html5/spec/overview.html

12 Is HTML5 Ready yet? hxp://ishtml5readyyet.com/ - Tjeck kildekoden! J

13 Is HTML5 Ready yet? BrowserunderstøXelse: Browserproducenterne har allerede implementeret store dele af HTML5 standarden på trods af at den ikke officielt er færdig. "Developers can use HTML5 now and we encourage them to do so," Ian Jacobs, head of W3C marke(ng (hxp:// will- be- done- in what- comes- next/)

14 HTML5 Readiness På og kan man følge med i hvilke browsere der understøxer specifikke features. We don't have to wait for en(re specs to be completed, we can start using some hawtness now. - htmlreadiness.com

15 Plan for interak+onsforløbet 4 dages undervisning: Dag 1: HTML 5 og CSS3 Seman(k Video/Audio Canvas CSS3 Effekter Webfonts Dag 2: Web Apps Responsivt design Javascript & jquery intro Touch interface. Dag 3: Javascript Oplæg: Javascript i praksis Parallax og Scroll layout Dag 4:??? Canvas? Adobe Edge? Jeres ønsker?

16 Opgaver Opgaver første 5 uger: I skal udvikle egne arbejdsprøver på krea(ve løsninger I interak(onsundervisningen vil vil programmere små applika(oner som i vil kunne bruge i jeres individuelle projekt. Sidste uge vil der være en- dags interak(ons arbejdsprøve (Pseudo Optagelsesprøve) De første fem uger afsluxes med en præsenta(on af jeres arbejde. Vi lægger op (l at der arbejdes individuelt. Der udleveres et personligt keaweb domæne.

17 Inspira+on Tron: hxp://disneydigitalbooks.go.com/tron/ Mixer: hxp:// inc.com/tompkins.html Fonte: hxp://simpleasmilk.co.uk/ Features: hxp://beta.theexpressiveweb.com/ Video: hxp://thewildernessdowntown.com Video: hxp:// Canvas: hxp:// 3D Canvas: hxp://