Wait
For
It

Join the classroom       bit.ly/pcs-lecture8

Creative Solutions

Webspiration

by

Johannes de Boer

Topics

 

History of the Internet        HTML5 Stuff       CSS Tricks & Innovations
                                       
 
.js Technologies          The Goodbye list
                      

 

History of the Internet

Web browsers

  • 1991 : First browser
  • 1994 : Netscape Navigator (base for Mozilla Firefox)
  • 1995 : Microsoft Internet Explorer

Search Engines

RSS

1999
RSS feeds enable publishers to syndicate data automatically

The Real-Time Stream

Peer-to-peer

AJAX

HTML5 Stuff

CSS Tricks & Innovations

Rotating images with CSS

www.w3schools.com/cssref/playit.asp?filename=playcss_transform_rotate

HTML5 Canvas

 

HTML5 Online learning tool

Ball Pool


Mesmerizer

Sass

Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.

HTML5/CSS3 Solar System

link

.js Technologies

From server to browser


















link

harp

jQuery

Mix it up!

Best of all worlds




 


Soul Reaper

Play Together Flying Tadpoles


Rumpetroll.com

Play together, Making Music














Plink, by Dinahmoe Labs
http://dinahmoelabs.com/plink/

Guilty Pleasure, Sound sampling




 

Rick Astley Remixer, by Dinahmoe Labs
http://dinahmoelabs.com/rickastley/

Add the (Big) Data
& API's

What is an API?

 

Europeana

Instagram visualisation

http://phototrails.net/new-york/

Earthquake Data Layer
in Google Maps

The list

Mobile versions of websites

55%
of all internet usage in USA
is through mobile devices
NOT 2 seperate versions!

m.cnn.com & www.cnn.com

Text-heavy sites

IF text-based is necesarry THEN richer content experiences

Flat Design & 200 ppi +



Flat Design & 200 ppi +

  • retina displays
  • old designs look poor
  • develop for 200pi +


Flat user interfaces look better then gradients and shadows on these screens



Wrap Up

  • Many innovations in web technologies
  • Relatively easy to implement with basic HTML/CSS knowledge
  • Don't try to invent the wheel

  • Browsers becoming more powerfull

  • Keep track of desing standards

  • By Q2.4 you could make Soul Reaper

Thanks!​

Johannes de Boer

Room: G6.25 & WG4.27

j.deboer@saxion.nl

PCS WebSpiration 2016

By Johannes de Boer

Made with Slides.com

PCS WebSpiration 2016

  • 151

More from Johannes de Boer