The CSS of the Internet of Things

THE CSS of the

INTERNET OF THINGSLUIS DANIEL RODRIGUEZ 7/2014

Anatomy of Web Projects

photo credit http://blog.kjempekjekt.com/2012/12/23/ferris-gjr-event-sourcing-i-ui-luke-23-2012/

http://blog.kjempekjekt.com/2012/12/23/ferris-gjr-event-sourcing-i-ui-luke-23-2012/

Physical Object +

Controller, Sensor and Actuators +

Internet =

Internet of Things

Anatomy of IoT Projects

photo credit Adrian McEwen, Hakim Cassimally. Designing the Internet of Things. Chapter 7 Prototyping Online Components

Internet-enabling

expected product feature

“Ecosystem”

photo credit http://www.techpolicydaily.com/wp-content/uploads/2013/11/IoT-shutterstock-e1384998049279.jpg

http://www.techpolicydaily.com/wp-content/uploads/2013/11/IoT-shutterstock-e1384998049279.jpg

Small UIs

data sent from microcontrollers

Embedded or Remote HTML/JS

control physical world with web based UI!

void indexCmd(HTTPServer &server, HTTPServer::MethodType type, char *, bool) { server.httpSuccess(); P(indexHTML) = "<!DOCTYPE html>\n" "<html>\n" "<head>\n" "<meta name=\"viewport\" content=\"width=480px, user-scalable=no\">\n"

"<title>ATV</title>\n" "</head>\n" "<body>\n" "<div class=\"swipe-container container\"></div>\n" "<div class=\"buttons-container container\"></div>\n" "<script data-main=\"https://www.cs.helsinki.fi/u/ljlukkar/appletv/js/main.js\" \n" " src=\"https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.10/require.min.js\"></script>\n" "</body>\n" "</html>"; server.printP(indexHTML);

}

CSS Opportunities: Basic UIsMicrocontrollers serve index pages with

remotely loaded JS & CSS

source: https://github.com/lasselukkari/aWOT

Arduino sketch (.ino file):

"<link rel=\"stylesheet\" type=\"text/css\" href=\"https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css\" />\n" "<link rel=\"stylesheet\" type=\"text/css\" href=\"https://www.cs.helsinki.fi/u/ljlukkar/appletv/css/custom.css\" />\n"

https://github.com/lasselukkari/aWOT

client.println("<link rel=\"stylesheet\" type=\"text/css\" href=\"http://arduino-autohome.googlecode.com/svn/trunk/autohome.css\" />");

CSS Opportunities: Basic UIsMicrocontrollers serve index pages with

remotely loaded JS & CSS

source: http://internetofthings-pune.blogspot.in/2013/07/this-is-open-source-home-automation.html

Arduino sketch (.ino file):

a{text-decoration:none;width:150px;height:50px;border-color:black;border-top:1px solid;border-bottom:1px solid;border-right:1px solid;border-left:1px solid;border-radius:1px 10px 10px;-o-border-radius:10px 10px 10px;-webkit-border-radius:10px 10px 10px;font-family:"Trebuchet MS",Arial, Helvetica, sans-serif;-moz-border-radius:10px 10px 10px;background-color:DimGray ;padding:20px;text-align:center;}a:link {color:black;} /* unvisited link */a:visited {color:white;} /* visited link */a:hover {color:white;} /* mouse over link */a:active {color:white;} /* selected link */

autohome.css:

http://internetofthings-pune.blogspot.in/2013/07/this-is-open-source-home-automation.html

Real NeedsCSS rules to change colors, size (box-model)

and layout

#gpio7. LOW { background-color: White; } #gpio7. HIGH { background-color: Red; }

sources: https://code.google.com/p/webiopi/wiki/JAVASCRIPT | http://www.cs.helsinki.fi/u/ljlukkar/pincontrol/

.switch { margin: 50px; position: relative; width: 80px; height: 100px; float:left;}

...

.switch input:checked ~ label { background: #d2cbc3; box-shadow: inset 0 1px 0 white, 0 0 0 1px #999, 0 0 5px 1px rgba(0,0,0,0.2), inset 0 -10px 0 #aaa, 0 2px 0 rgba(255,255,255,0.1), inset 0 45px 3px #e0e0E0, 0 8px 6px rgba(0,0,0,0.18);}

https://code.google.com/p/webiopi/wiki/JAVASCRIPT

http://www.cs.helsinki.fi/u/ljlukkar/pincontrol/

Embedded or Remote

1. Files can be served off of an SD card - Not terribly fast, but so far seems to work.

2. Local network can store your JS and CSS files - point to those as external resources.

3. Local web server -client request data direct from microcontroller

4. Microcontroller push data to the server database.

photo credit: http://internetofthings-pune.blogspot.in/2013/07/this-is-open-source-home-automation.html

http://internetofthings-pune.blogspot.in/2013/07/this-is-open-source-home-automation.html

Embedded CSS Problems

1. Try to embed CSS into microcontroller and does not compile

2. Use image links as buttons or Styles were generated at www.cssbuttongenerator.com

3. Buggy JS to change CSS properties according to the status of microcontroller

4. client.println("<style type=\"text/css\">");

5. “The stylesheet is optional…”

6. Usual drab grey buttons in your web browser but the application will still work.

http://www.cssbuttongenerator.com/

HandcraftedV.S.

Online Generated

Interactive TVs

“Websites are never going to look that great on a TV unless they are designed for their resolutions...”

CNET TV Reviewer

“a Linux device configured with a Webkit-based browser to run web pages and applications”

https://securityledger.com/2013/08/samsung-smart-tv-like-a-web-app-riddled-with-vulnerabilities/




e.g. Google TV Design Principles

source: https://developers.google.com/tv/web/docs/design_for_tv

https://developers.google.com/tv/web/docs/design_for_tv

Layout

1. achieve “intended layout” using float, calc() or flex box

2. resolutions (720p or 1080i/p)

div { border: solid 1px; float: left; margin: 1em; padding: 0 1em;

width: calc(100%/7 - 6em);

}

Scrollbars

1. overflow: hidden on the body 2. use JS to move content into

view

<script type="text/javascript"> function MoveIntoView (alignToTop) { var element = document.getElementById ("elementID"); element. scrollIntoView (alignToTop); }</script>

html, body { height: 100%;

overflow: hidden;

}

CSS Zoom property

1. impacts quality and performance

2. design expecting white space around pages

img {

zoom: 1;

*/ normal */}

img:nth-child(2) {

zoom: 200%;

*/ percentage or number e.g. 2 = 200% /*}

div { border: solid 1px; float: left; margin: 1em; padding: 0 1em; width: calc(100%/10 - 9em);}

..

div:nth-child(8), div:nth-child(9), div:nth-child(10) {

display: none;

}

Selections above the fold

1. reduce categories2. hide DIV elements with

“display: none”

Browser Specific

1. Check HTML5 Rocks2. Browser specific support3. *Others: OperaTV Browser,

Kylo

div { -webkit-transform: scale(1.5);}

div { -webkit-transform: scale(2.0);}

HTML5 Elements

<button> & <canvas>

<button>

“use a button element. They can be beautifully styled, have in-built keyboard support and various states, and they can even be disabled using an attribute. By using attribute selectors in your CSS you can style them.”

Christian Heilmann. Smashing Book #4 — New Perspectives on Web Design. Chapter 3 The Vanilla Web Diet

Basic <button>

http://codepen.io/uxcodeine/pen/49df74d9e8b8e49ea4e18a95624e655f

button {padding: 10px 20px;background: #111;-moz-border-radius: 21px;-webkit-border-radius: 21px;border-radius: 21px;border: 1px solid #666;outline: none;font-size: 14px;color: #eee;text-transform: uppercase;

}

<button type="button" name="" value="">On</button>



button { display: inline-block; vertical-align: top; height: 55px; line-height: 1.87em; margin: 5px 0; padding: 12px 18px; position: relative;}

<button> with icons

http://codepen.io/uxcodeine/pen/655873a063437bc3160296e30b63a84f

<button> Button Text</button>




<button> with icons


button { display: inline-block; vertical-align: top; height: 55px; line-height: 1.87em; margin: 5px 0; padding: 12px 18px; position: relative;}button > span { display: inline-block; position: relative; width: 55px; height: 55px; background: url('smart-close.png') no-repeat center center; top: -13px}

<button> <span></span> Button Text</button>




<button> with icons


button { display: inline-block; vertical-align: top; height: 55px; line-height: 1.87em; margin: 5px 0; padding: 12px 18px; position: relative;}button > span { position: relative; display: inline-block; width: 55px; height: 55px; background: url('smart-close.png') no-repeat center center; top: -13px}





button { display: inline-block; vertical-align: top; height: 55px; line-height: 1.87em; margin: 5px 0; padding: 12px 18px; position: relative;}button > span { position: relative; display: inline-block; width: 55px; height: 55px; background: url('smart-close.png') no-repeat center center; top: -13px}

<button> with icons






<button> group

http://codepen.io/uxcodeine/pen/0974f2c3c80965e2a03e7f12c0986266

button { margin: 0 !important;}button:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0;}button:nth-child(2) { border-radius: 0; -webkit-border-radius: 0; margin-left: -5px !important;}button:nth-child(3) { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -5px !important;}

<button>one</button><button>two</button><button>three</button>




“doesn’t look like” <button>

http://codepen.io/uxcodeine/pen/3db6c2dddca7d3aba2f02b74c117ff20

button { background-color: none; color: rgb(255, 255, 255); cursor: pointer; border-radius: 0; display: inline-block; vertical-align: top; height: 52px; line-height: 1.87; margin: 5px 0; padding: 12px 18px; position: relative; outline: none;}button > span { display: inline-block; position: relative; font-size: 1.44em; font-weight: 100; top: -3px;}

<button> <svg height="21px" viewBox="0 0 50 50"><polygon points="15,2.75 12.914,4.836 33.078,25 12.914,45.164 15,47.25 37.25,25 " fill="rgb(255, 255, 255)"/></svg> <span>Label</span></button>







button { background-color: none; color: rgb(255, 255, 255); cursor: pointer; border-radius: 0; display: inline-block; vertical-align: top; height: 52px; line-height: 1.87; margin: 5px 0; padding: 12px 18px; position: relative; outline: none;}button > span { display: inline-block; position: relative; font-size: 1.44em; font-weight: 100; top: -3px;}


<button class="label" > <svg height="21px" viewBox="0 0 50 50"><polygon points="15,2.75 12.914,4.836 33.078,25 12.914,45.164 15,47.25 37.25,25 " fill="rgb(255, 255, 255)"/></svg> <span>Label</span></button>






button > span { display: inline-block; position: relative; font-size: 1.44em; font-weight: 100; top: -3px;}

button.label { display: block; border: none; background: none;}


<button class="label"> <svg height="21px" viewBox="0 0 50 50"><polygon points="15,2.75 12.914,4.836 33.078,25 12.914,45.164 15,47.25 37.25,25 " fill="rgb(255, 255, 255)"/></svg> <span>Label</span></button>




<canvas>

“Because the canvas is an HTML element, you can use CSS styles to modify its position, assign it a background color or image, add a border, and so on. In Safari and other WebKit-based browsers, you can use WebKit transitions to smoothly animate changes in CSS properties. Because the canvas can have a transparent background, you can use CSS to create animated graphics that roam freely across the webpage.”

https://developer.apple.com/library/safari/documentation/audiovideo/conceptual/html-canvas-guide/ModifyingtheCanvaswithCSS/ModifyingtheCanvaswithCSS.html




<canvas> cont’d

http://codepen.io/uxcodeine/pen/1c56ce3b66893c1d766e9eb40940fde1

canvas { display: block; margin: 0 auto; padding: 33px; border: solid 1px #666; background-color: rgba(1,1,1,1);}

var data = { values:[ { X: "Jan", Y: 12 }, { X: "Feb", Y: 28 }, { X: "Mar", Y: 18 }, { X: "Apr", Y: 34 }, { X: "May", Y: 40 }, ]};

<canvas id="graph" width="200" height="150"> </canvas>




Data Acquisition Systems

Require

Data Visualizations

Presenting Information, driving complex analysis

CSS Based Data Visualizations

make it easier for users to grasp data e.g. line graphs, gauges, cards & notifications

SVG

“SVG content styled with CSS [CSS2]:CSS is a widely implemented declarative language for assigning styling properties to XML content, including SVG. It represents a combination of features, simplicity and compactness that makes it very suitable for many applications of SVG. SVG Tiny 1.2 does not require support for CSS selectors applied to SVG content. Authors must not rely on external, author stylesheets to style documents that are intended to be used with SVG Tiny 1.2 user agents.”

http://www.w3.org/TR/SVGMobile12/styling.html

http://www.w3.org/TR/SVGMobile12/refs.html#ref-CSS2

SVG cont’d

“The ‘class’ attribute assigns one or more class names to an element. The element may be said to belong to these classes. A class name may be shared by several element instances. The ‘class’ attribute has several roles: As a style sheet selector (when an author wishes to assign style information to a set of elements).”

http://www.w3.org/TR/SVGMobile12/styling.html

http://www.w3.org/TR/SVG11/styling.html#ClassAttribute

http://www.w3.org/TR/SVG11/styling.html#ClassAttribute

Line graphs

http://codepen.io/uxcodeine/pen/0b031026f6fb91301098eced10d32749

path { stroke: white; stroke-width: 1; fill: none;} line { stroke: #666;}

circle { fill: red; }

lineGraph.append("svg:g").attr("transform", "translate(35, -20)").selectAll("circle.dataPoints").data(data).enter().append("circle").attr("class", "dataPoints").attr("cx", function(d, i) { return x_scale(i); }).attr("cy", function(d) { return y_scale(d) * 1; }).attr("r", 8).on("mouseover", function() {

<div id=”lineGraph”></div>



Gauges

http://codepen.io/uxcodeine/pen/ae0c6bd7334bce98e92d9c53351fa2b0

figure { width: 20em;}

div { display:inline-block; position:relative; width:20em; height:10em; overflow:hidden;}

div:before { position:absolute; display:block; content:""; width:19.9em; height:10em; border-radius:10em 10em 0 0; background:#111; border-right: solid 1px #666; border-left: solid 1px #666;}

<figure> <div> <span></span> </div> <figcaption>Meter Label</figcaption></figure>



Gauges


div:before { position:absolute; display:block; content:""; width:19.9em; height:10em; border-radius:10em 10em 0 0; background:#111; border-right: solid 1px #666; border-left: solid 1px #666;}div:after { position:absolute; display:block; content:""; bottom:0; width:10em; height:5em; left: 5em; background:#333; border-radius:5em 5em 0 0; border-right: solid 1px #666; border-left: solid 1px #666;}




Gauges


span { position:absolute; display:inline-block; opacity: .34; width:20em; height:10em; top:100%; transform-origin:center top; border-radius:0 0 12em 12em; background:#fff; transform:rotate(144deg); }

figcaption { display:block; margin: 0 auto; text-align: center; font-family: sans-serif; font-size: 14px; color: #eee; text-transform: uppercase;}




Gauges



span { position:absolute; display:inline-block; opacity: .34; width:20em;a height:10em; top:100%; transform-origin:center top; border-radius:0 0 12em 12em; background:#fff; transform:rotate(144deg); }

figcaption { display:block; margin: 0 auto; text-align: center; font-family: sans-serif; font-size: 14px; color: #eee; text-transform: uppercase;}



Cards & Notifications

http://codepen.io/uxcodeine/pen/8896cb36229f0f5512c539fd9153e3ae

<div class="notification"> <span class="action"> <?xml version="1.0" ?><svg height="89px" version="1.1" viewBox="0 0 55 55" width="89px" xmlns="http://www.w3.org/2000/svg" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" xmlns:xlink="http://www.w3.org/1999/xlink"><title/><defs><path d="M0,11 C0,4.92486745 4.92486745,0 11,0 C17.0751325,0 22,4.92486745 22,11 C22,17.0751325 17.0751325,22 11,22 C4.92486745,22 0,17.0751325 0,11 L0,11 Z M21,11 C21,5.47715225 16.5228478,1 11,1 C5.47715225,1 1,5.47715225 1,11 C1,16.5228478 5.47715225,21 11,21 C16.5228478,21 21,16.5228478 21,11 L21,11 Z M11,16.5 L15,13.5 L15,12.5 L11.4984375,15.25 L11.4984374,5.5 L10.5,5.5 L10.5,15.25 L7,12.5 L7,13.5 L11,16.5 L11,16.5 Z" id="path-1"/></defs><g fill="none" fill-rule="evenodd" id="miu" stroke="none" stroke-width="1"><g id="circle_arrow-down_download_outline_stroke"><use fill="#fff" fill-rule="evenodd" xlink:href="#path-1"/><use fill="none" xlink:href="#path-1"/></g></g></svg>

</span> <span class="message">Notification</span> <span class="time">4:30PM</span></div>






.notification { display: block; clear: both; width: 233px; height: 34px; background: rgb(1,1,1); border: 1px solid #666; padding: 13px; margin: 0;}

.action { float: left; height: 55px; width: 55px;}

.message { width: 144px; float: left; font-family: Arial; font-size: 16px; color: #fff; font-weight: bold; text-transform: uppercase;}

.time { display: block; float: left; font-family: Arial; font-size: 13px; font-weight: 100; color: #666;}

<div class="notification"> <span class="action"> <?xml version="1.0" ?><svg height="89px" version="1.1" viewBox="0 0 55 55" width="89px" xmlns="http://www.w3.org/2000/svg" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" xmlns:xlink="http://www.w3.org/1999/xlink"><title/><defs><path d="M0,11 C0,4.92486745 4.92486745,0 11,0 C17.0751325,0 22,4.92486745 22,11 C22,17.0751325 17.0751325,22 11,22 C4.92486745,22 0,17.0751325 0,11 L0,11 Z M21,11 C21,5.47715225 16.5228478,1 11,1 C5.47715225,1 1,5.47715225 1,11 C1,16.5228478 5.47715225,21 11,21 C16.5228478,21 21,16.5228478 21,11 L21,11 Z M11,16.5 L15,13.5 L15,12.5 L11.4984375,15.25 L11.4984374,5.5 L10.5,5.5 L10.5,15.25 L7,12.5 L7,13.5 L11,16.5 L11,16.5 Z" id="path-1"/></defs><g fill="none" fill-rule="evenodd" id="miu" stroke="none" stroke-width="1"><g id="circle_arrow-down_download_outline_stroke"><use fill="#fff" fill-rule="evenodd" xlink:href="#path-1"/><use fill="none" xlink:href="#path-1"/></g></g></svg> </span> <span class="message">Notification</span> <span class="time">4:30PM</span></div>






.message { width: 144px; float: left; font-family: Arial; font-size: 16px; color: #fff; font-weight: bold; text-transform: uppercase;}

.time { display: block; float: left; font-family: Arial; font-size: 13px; font-weight: 100; color: #666;}

<div class="notification"> <span class="action"> <?xml version="1.0" ?><svg height="89px" version="1.1" viewBox="0 0 55 55" width="89px" xmlns="http://www.w3.org/2000/svg" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" xmlns:xlink="http://www.w3.org/1999/xlink"><title/><defs><path d="M0,11 C0,4.92486745 4.92486745,0 11,0 C17.0751325,0 22,4.92486745 22,11 C22,17.0751325 17.0751325,22 11,22 C4.92486745,22 0,17.0751325 0,11 L0,11 Z M21,11 C21,5.47715225 16.5228478,1 11,1 C5.47715225,1 1,5.47715225 1,11 C1,16.5228478 5.47715225,21 11,21 C16.5228478,21 21,16.5228478 21,11 L21,11 Z M11,16.5 L15,13.5 L15,12.5 L11.4984375,15.25 L11.4984374,5.5 L10.5,5.5 L10.5,15.25 L7,12.5 L7,13.5 L11,16.5 L11,16.5 Z" id="path-1"/></defs><g fill="none" fill-rule="evenodd" id="miu" stroke="none" stroke-width="1"><g id="circle_arrow-down_download_outline_stroke"><use fill="#fff" fill-rule="evenodd" xlink:href="#path-1"/><use fill="none" xlink:href="#path-1"/></g></g></svg> </span> <span class="message">Notification</span> <span class="time">4:30PM</span></div>




Experimental

bleeding edge videos & projects

Arduino Light Animation

http://vimeo.com/79962595

based on CSS animation properties



http://www.jamesmillerportfolio.co.uk/using-arduino-to-interact-with-websites-via-javascript/

“Change CSS with Arduino”




3D Printing from CSS 3D Transforms#tridiv { perspective: 800px; position: absolute; overflow: hidden; width: 100%; height: 100%; background: #08182f; font-size: 100%;}.face { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 1);}.scene, .shape, .face, .face-wrapper, .cr { position: absolute; transform-style: preserve-3d;}.scene { width: 80em; height: 80em; top: 50%; left: 50%; margin: -40em 0 0 -40em;}.shape { top: 50%; left: 50%; width: 0; height: 0; transform-origin: 50%;}

photo credit http://tridiv.com | http://www.thingiverse.com/thing:86078

http://tridiv.com

http://www.thingiverse.com/thing:86078

Design Principles

ResourcesV.S.

MaintenanceV.S.

Memory

Modularity

Easily swappable standardized components form the different user interfaces

http://codepen.io/uxcodeine/pen/f3da533b43ebeeea383c9c2b393cf0ba

button { padding: 10px 20px; background: #111; -moz-border-radius: 21px; -webkit-border-radius: 21px; border-radius: 21px; border: 1px solid #666; outline: none; font-size: 14px; color: #eee; text-transform: uppercase;}

button > span { display: inline-block; position: relative; font-weight: 100; top: -1px;}

.group button { margin: 0 !important;}.group button:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0;}.group button:nth-child(2) { border-radius: 0; -webkit-border-radius: 0; margin-left: -5px !important;}.group button:nth-child(3) { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -5px !important;}




Efficiency

Support flow (DOM) with lessened friction

http://codepen.io/uxcodeine/pen/KkEax

component02= #CCC

article for div in 2 4 6 8 9 11 13 15 18 20 22 24 25 27 29 31 34 36 38 40 41 43 45 47 50 52 54 56 57 59 61 63 65 67 div:nth-child({ div }) background component02

i = 0l = 64while i < l i++ $("body.checkers article, body.othello article").append(" <div></div> "); $("body.checkers aside").append(" <div></div> ");




Responsiveness

Adaptable layouts, not pixel perfect!

http://codepen.io/uxcodeine/pen/nyuDE

div:first-child { width: 99.5%;}div:nth-child(2), div:nth-child(3) { width: 49.35%;}div:nth-child(4), div:nth-child(5), div:nth-child(6) { width: 32.75%;}div:nth-child(7), div:nth-child(8), div:nth-child(9), div:nth-child(10), div:nth-child(11) { width: 19.4%;}div:nth-child(12), div:nth-child(13), div:nth-child(14), div:nth-child(15), div:nth-child(16), div:nth-child(17), div:nth-child(18), div:nth-child(19) { width: 11.9%;}div:nth-child(20), div:nth-child(21), div:nth-child(22), div:nth-child(23), div:nth-child(24), div:nth-child(25), div:nth-child(26), div:nth-child(27), div:nth-child(28), div:nth-child(29), div:nth-child(30), div:nth-child(31), div:nth-child(32) { width: 7.1%;}




Flexibility

Support design iterations with less code

http://codepen.io/uxcodeine/pen/znLdc

students = [["Matthew", "Ash", "(IEP)", 44, 30, 10], ["Ayala", "Miguel", "", 5, 70, 15], ...$.each students, (index, value) -> $("#compare").append "<article>... </span><span class=' progress " + (if (value[3] < 85) then "atrisk" else "thrive") + "'> " + value[3] + "%</span><span class=' mastery " + (if (value[4] < 85) then "atrisk" else "thrive") + "'>" + value[4] + "%</span><span class=' attendance " + (if (value[5] < 85) then "atrisk" else "thrive") + "'>" + value[5] + "%</span></article>"

.results article .progress, .mastery, .attendance &.thrive color: component02 &:before content: "+" border: solid 1px component02




#IoT needs more CSS!

“… The expertise required to make an Internet ‘thing’ is vast. However, this means that the playing field for making such a connected device is astonishingly level. Whatever your skills and interests, you are well placed as anyone to start experimenting and building. There really is no better time to enter the exciting world of the Internet of Things”

Adrian McEwen, Hakim Cassimally. Designing the Internet of Things. Chapter 1 The Internet of Things: An Overview

THE CSS of the

INTERNET OF THINGS

THANK YOU!

Get in touch:

twitter: @uxcodelineemail: [email protected]

Additional credits for code/project samples: Leonardo Amico, James Miller, Julian Garnier, Lasse Lukari & Dhiraj Jadhao

mailto:[email protected]

The CSS of the Internet of Things

Design

Transcript of The CSS of the Internet of Things