• Home

  • Documents

  • 030 Creative Coding - digiblog.s3-eu-central-1.amazonaws.com€¦ · HTML//CSS//JAVASCRIPT . HTML...
35
Interactivity & Creative Coding

030 Creative Coding - digiblog.s3-eu-central-1.amazonaws.com€¦ · HTML//CSS//JAVASCRIPT . HTML jQueM jQuerv Edge Commons n de . SMS . SMS . Title: 030 Creative Coding Created Date:

  • Upload
    others

  • View
    8

  • Download
    0

Embed Size (px)

Citation preview

Page 1: 030 Creative Coding - digiblog.s3-eu-central-1.amazonaws.com€¦ · HTML//CSS//JAVASCRIPT . HTML jQueM jQuerv Edge Commons n de . SMS . SMS . Title: 030 Creative Coding Created Date:

Interactivity & Creative Coding

Page 2: 030 Creative Coding - digiblog.s3-eu-central-1.amazonaws.com€¦ · HTML//CSS//JAVASCRIPT . HTML jQueM jQuerv Edge Commons n de . SMS . SMS . Title: 030 Creative Coding Created Date:

Ein Exkurs fuer Gestalter & Nicht-Coder

Page 3: 030 Creative Coding - digiblog.s3-eu-central-1.amazonaws.com€¦ · HTML//CSS//JAVASCRIPT . HTML jQueM jQuerv Edge Commons n de . SMS . SMS . Title: 030 Creative Coding Created Date:

Simon Widjaja 51% Developer

49% Designer

DRIVEN BY PURE PASSION

Page 4: 030 Creative Coding - digiblog.s3-eu-central-1.amazonaws.com€¦ · HTML//CSS//JAVASCRIPT . HTML jQueM jQuerv Edge Commons n de . SMS . SMS . Title: 030 Creative Coding Created Date:

designforthemodernweb.com

http://designforthemodernweb.com
Page 5: 030 Creative Coding - digiblog.s3-eu-central-1.amazonaws.com€¦ · HTML//CSS//JAVASCRIPT . HTML jQueM jQuerv Edge Commons n de . SMS . SMS . Title: 030 Creative Coding Created Date:

WARNUNG!

Könnte spuren von Englisch enthalten

Highly addictive

NICHTS FüR SCHWACHE NERVEN

Page 6: 030 Creative Coding - digiblog.s3-eu-central-1.amazonaws.com€¦ · HTML//CSS//JAVASCRIPT . HTML jQueM jQuerv Edge Commons n de . SMS . SMS . Title: 030 Creative Coding Created Date:

Was  heißt    “Crea-ve  Coding”?

Page 7: 030 Creative Coding - digiblog.s3-eu-central-1.amazonaws.com€¦ · HTML//CSS//JAVASCRIPT . HTML jQueM jQuerv Edge Commons n de . SMS . SMS . Title: 030 Creative Coding Created Date:
Page 8: 030 Creative Coding - digiblog.s3-eu-central-1.amazonaws.com€¦ · HTML//CSS//JAVASCRIPT . HTML jQueM jQuerv Edge Commons n de . SMS . SMS . Title: 030 Creative Coding Created Date:
Page 9: 030 Creative Coding - digiblog.s3-eu-central-1.amazonaws.com€¦ · HTML//CSS//JAVASCRIPT . HTML jQueM jQuerv Edge Commons n de . SMS . SMS . Title: 030 Creative Coding Created Date:
Page 10: 030 Creative Coding - digiblog.s3-eu-central-1.amazonaws.com€¦ · HTML//CSS//JAVASCRIPT . HTML jQueM jQuerv Edge Commons n de . SMS . SMS . Title: 030 Creative Coding Created Date:
Page 11: 030 Creative Coding - digiblog.s3-eu-central-1.amazonaws.com€¦ · HTML//CSS//JAVASCRIPT . HTML jQueM jQuerv Edge Commons n de . SMS . SMS . Title: 030 Creative Coding Created Date:

Keine  Angst  vor  Code!

Page 12: 030 Creative Coding - digiblog.s3-eu-central-1.amazonaws.com€¦ · HTML//CSS//JAVASCRIPT . HTML jQueM jQuerv Edge Commons n de . SMS . SMS . Title: 030 Creative Coding Created Date:

Bring back the Power to Designers

Page 13: 030 Creative Coding - digiblog.s3-eu-central-1.amazonaws.com€¦ · HTML//CSS//JAVASCRIPT . HTML jQueM jQuerv Edge Commons n de . SMS . SMS . Title: 030 Creative Coding Created Date:

Mut zur luecke (Google’s your best friend)

Page 14: 030 Creative Coding - digiblog.s3-eu-central-1.amazonaws.com€¦ · HTML//CSS//JAVASCRIPT . HTML jQueM jQuerv Edge Commons n de . SMS . SMS . Title: 030 Creative Coding Created Date:

english, english, english!

Page 15: 030 Creative Coding - digiblog.s3-eu-central-1.amazonaws.com€¦ · HTML//CSS//JAVASCRIPT . HTML jQueM jQuerv Edge Commons n de . SMS . SMS . Title: 030 Creative Coding Created Date:
Page 16: 030 Creative Coding - digiblog.s3-eu-central-1.amazonaws.com€¦ · HTML//CSS//JAVASCRIPT . HTML jQueM jQuerv Edge Commons n de . SMS . SMS . Title: 030 Creative Coding Created Date:

MEDIUMWEBSTANDARDS: HTML, CSS, JAVASCRIPT

Page 17: 030 Creative Coding - digiblog.s3-eu-central-1.amazonaws.com€¦ · HTML//CSS//JAVASCRIPT . HTML jQueM jQuerv Edge Commons n de . SMS . SMS . Title: 030 Creative Coding Created Date:
Page 18: 030 Creative Coding - digiblog.s3-eu-central-1.amazonaws.com€¦ · HTML//CSS//JAVASCRIPT . HTML jQueM jQuerv Edge Commons n de . SMS . SMS . Title: 030 Creative Coding Created Date:
Page 19: 030 Creative Coding - digiblog.s3-eu-central-1.amazonaws.com€¦ · HTML//CSS//JAVASCRIPT . HTML jQueM jQuerv Edge Commons n de . SMS . SMS . Title: 030 Creative Coding Created Date:
Page 20: 030 Creative Coding - digiblog.s3-eu-central-1.amazonaws.com€¦ · HTML//CSS//JAVASCRIPT . HTML jQueM jQuerv Edge Commons n de . SMS . SMS . Title: 030 Creative Coding Created Date:
Page 21: 030 Creative Coding - digiblog.s3-eu-central-1.amazonaws.com€¦ · HTML//CSS//JAVASCRIPT . HTML jQueM jQuerv Edge Commons n de . SMS . SMS . Title: 030 Creative Coding Created Date:
Page 22: 030 Creative Coding - digiblog.s3-eu-central-1.amazonaws.com€¦ · HTML//CSS//JAVASCRIPT . HTML jQueM jQuerv Edge Commons n de . SMS . SMS . Title: 030 Creative Coding Created Date:

INTERACTIVITY

LOOK

LAYOUT

JavaScript

HTML(5)

CSS(3)

Page 23: 030 Creative Coding - digiblog.s3-eu-central-1.amazonaws.com€¦ · HTML//CSS//JAVASCRIPT . HTML jQueM jQuerv Edge Commons n de . SMS . SMS . Title: 030 Creative Coding Created Date:

SHUT  UP,    AND  SHOW  US    SOME  ACTION.

Page 24: 030 Creative Coding - digiblog.s3-eu-central-1.amazonaws.com€¦ · HTML//CSS//JAVASCRIPT . HTML jQueM jQuerv Edge Commons n de . SMS . SMS . Title: 030 Creative Coding Created Date:

Live  Demo !

1

Image  Grid  Header

Page 25: 030 Creative Coding - digiblog.s3-eu-central-1.amazonaws.com€¦ · HTML//CSS//JAVASCRIPT . HTML jQueM jQuerv Edge Commons n de . SMS . SMS . Title: 030 Creative Coding Created Date:
Page 26: 030 Creative Coding - digiblog.s3-eu-central-1.amazonaws.com€¦ · HTML//CSS//JAVASCRIPT . HTML jQueM jQuerv Edge Commons n de . SMS . SMS . Title: 030 Creative Coding Created Date:
Page 27: 030 Creative Coding - digiblog.s3-eu-central-1.amazonaws.com€¦ · HTML//CSS//JAVASCRIPT . HTML jQueM jQuerv Edge Commons n de . SMS . SMS . Title: 030 Creative Coding Created Date:
Page 28: 030 Creative Coding - digiblog.s3-eu-central-1.amazonaws.com€¦ · HTML//CSS//JAVASCRIPT . HTML jQueM jQuerv Edge Commons n de . SMS . SMS . Title: 030 Creative Coding Created Date:
Page 29: 030 Creative Coding - digiblog.s3-eu-central-1.amazonaws.com€¦ · HTML//CSS//JAVASCRIPT . HTML jQueM jQuerv Edge Commons n de . SMS . SMS . Title: 030 Creative Coding Created Date:

Live  Demo !

2

Page  Flip

Page 30: 030 Creative Coding - digiblog.s3-eu-central-1.amazonaws.com€¦ · HTML//CSS//JAVASCRIPT . HTML jQueM jQuerv Edge Commons n de . SMS . SMS . Title: 030 Creative Coding Created Date:

Demo !

3

Teaser

Page 31: 030 Creative Coding - digiblog.s3-eu-central-1.amazonaws.com€¦ · HTML//CSS//JAVASCRIPT . HTML jQueM jQuerv Edge Commons n de . SMS . SMS . Title: 030 Creative Coding Created Date:

outlook

Page 32: 030 Creative Coding - digiblog.s3-eu-central-1.amazonaws.com€¦ · HTML//CSS//JAVASCRIPT . HTML jQueM jQuerv Edge Commons n de . SMS . SMS . Title: 030 Creative Coding Created Date:

Demo !

4

e-­‐Learning

Page 33: 030 Creative Coding - digiblog.s3-eu-central-1.amazonaws.com€¦ · HTML//CSS//JAVASCRIPT . HTML jQueM jQuerv Edge Commons n de . SMS . SMS . Title: 030 Creative Coding Created Date:

lynda.com  codecademy.com  

teamtreehouse.com  

http://lynda.com
http://codecademy.com
http://teamtreehouse.com
Page 34: 030 Creative Coding - digiblog.s3-eu-central-1.amazonaws.com€¦ · HTML//CSS//JAVASCRIPT . HTML jQueM jQuerv Edge Commons n de . SMS . SMS . Title: 030 Creative Coding Created Date:

Fragen?  Anmerkungen?

Page 35: 030 Creative Coding - digiblog.s3-eu-central-1.amazonaws.com€¦ · HTML//CSS//JAVASCRIPT . HTML jQueM jQuerv Edge Commons n de . SMS . SMS . Title: 030 Creative Coding Created Date:

Thank you for attending!

[email protected]


Internet und SMS Internet und SMS Daniel Rickenbacher Jeremy Deuel

Internet und SMS Internet und SMS Daniel Rickenbacher Jeremy Deuel

Documents
Preisliste Mobilfunk Prepaid Aktuelles Portfolio · Buchung per SMS an die Kurzwahl 56 67 SMS mit START PAKETI50 SMS mit START PAKETI100 SMS mit START PAKETI250 3. Datatarif für

Preisliste Mobilfunk Prepaid Aktuelles Portfolio · Buchung per SMS an die Kurzwahl 56 67 SMS mit START PAKETI50 SMS mit START PAKETI100 SMS mit START PAKETI250 3. Datatarif für

Documents
Creative Coding - Medienwissenschaft Uni Bayreuth€¦ · Creative Coding !emen Webdesign mit HTML/CSS Webdesign mit jQuery Webapplikationen mit Ruby on Rails Generative Grafik mit

Creative Coding - Medienwissenschaft Uni Bayreuth€¦ · Creative Coding !emen Webdesign mit HTML/CSS Webdesign mit jQuery Webapplikationen mit Ruby on Rails Generative Grafik mit

Documents
JavaScript Refactoring Coding Dojo - XP Days · JavaScript Refactoring Coding Dojo ‣ Aufgabenstellung: Tennis Game Kata ‣ Pair Programming (Driver & Navigator) ‣ Test Driven

JavaScript Refactoring Coding Dojo - XP Days · JavaScript Refactoring Coding Dojo ‣ Aufgabenstellung: Tennis Game Kata ‣ Pair Programming (Driver & Navigator) ‣ Test Driven

Documents
COMMON RAIL DIESEL INJECTION – INJECTOR I.D. CODING

COMMON RAIL DIESEL INJECTION – INJECTOR I.D. CODING

Documents
Benutzerhandbuch - files2.europe.creative.comfiles2.europe.creative.com/manualdn/Manuals/TSD/7556/Creative Labs... · Benutzerhandbuch Creative Sound Blaster Live ! Creative Audiosoftware

Benutzerhandbuch - files2.europe.creative.comfiles2.europe.creative.com/manualdn/Manuals/TSD/7556/Creative Labs... · Benutzerhandbuch Creative Sound Blaster Live ! Creative Audiosoftware

Documents
APEX Coding Guidelines 1 0 HiRes2

APEX Coding Guidelines 1 0 HiRes2

Documents
SMS Mathematik

SMS Mathematik

Documents
Europeana Creative Einführung

Europeana Creative Einführung

Internet
Creative Industries

Creative Industries

Documents
Long non-coding RNA’s in (de-) Regulated Hematopoiesis Dokumente... · Long non-coding RNA’s in (de-) Regulated Hematopoiesis Veranstaltungsreihe des Universitären Krebszentrums

Long non-coding RNA’s in (de-) Regulated Hematopoiesis Dokumente... · Long non-coding RNA’s in (de-) Regulated Hematopoiesis Veranstaltungsreihe des Universitären Krebszentrums

Documents
ATC coding - CDISC

ATC coding - CDISC

Documents
TYPO3 coding guidelines

TYPO3 coding guidelines

Technology
"Creative Producer" II

"Creative Producer" II

Documents
Datenblatt SMS 2 / SMS U2 / SL 2 / SW 4

Datenblatt SMS 2 / SMS U2 / SL 2 / SW 4

Documents
Coding - IndianZ

Coding - IndianZ

Documents
APEX Coding Guidelines 1 0 HiRes

APEX Coding Guidelines 1 0 HiRes

Documents
Creative Brief und Creative Briefing / "Why to" und "How to"

Creative Brief und Creative Briefing / "Why to" und "How to"

Business
Coding Dojo – Redux · 2019-06-18 · Coding Dojo – Redux » be part of IT | 01.08.2019 Coding Dojo – Redux Donnerstag, 01.08.2019 I 17:30-20:30 Uhr it-economics Office Quantiusstr

Coding Dojo – Redux · 2019-06-18 · Coding Dojo – Redux » be part of IT | 01.08.2019 Coding Dojo – Redux Donnerstag, 01.08.2019 I 17:30-20:30 Uhr it-economics Office Quantiusstr

Documents
Creative Commons Musik

Creative Commons Musik

Technology
Coding Dojo .NET User Group Leipzig

Coding Dojo .NET User Group Leipzig

Software
creative mobile

creative mobile

Documents
SMS "Deutschland"

SMS "Deutschland"

Education
Coding Defin

Coding Defin

Documents
SMS group – seit Generationen Zukunft. · SMS group – seit Generationen Zukunft. Geschäftsbericht 2008 SMS Siemag SMS Meer SMS group † Geschäftsbericht 2008 SMS GROUP –

SMS group – seit Generationen Zukunft. · SMS group – seit Generationen Zukunft. Geschäftsbericht 2008 SMS Siemag SMS Meer SMS group † Geschäftsbericht 2008 SMS GROUP –

Documents
SCRATCH Mein erstes Fangspiel - CODING FOR TOMORROW

SCRATCH Mein erstes Fangspiel - CODING FOR TOMORROW

Documents
Creative 2 customer. Welcome 2 Mannheim Musik - Kreativwirtschaft - Existenzgründung creative 2 customer

Creative 2 customer. Welcome 2 Mannheim Musik - Kreativwirtschaft - Existenzgründung creative 2 customer

Documents
Creative Coding

Creative Coding

Documents
Creative Strategy

Creative Strategy

Marketing
Comat SMS · PDF file3 Comat SMS Relay Applikationsbeispiele SMS Relay app_smsrelay_0709_d 1 Warnhinweise WARNUNG Der elektrische Anschluss, die

Comat SMS · PDF file3 Comat SMS Relay Applikationsbeispiele SMS Relay app_smsrelay_0709_d 1 Warnhinweise WARNUNG Der elektrische Anschluss, die

Documents