HTML5 & CSS3 refresher for mobile apps

Gran Sasso Science Institute Ivano Malavolta HTML5 & CSS3 refresher

Roadmap Anatomy of a web app HTML5 CSS3

What is a Web App? A software built with web technologies that is accessible via a mobile browser The browser may be either the standard device browser or an embedded browser (Hybrid app)

Data Usually mobile apps do not talk directly with the database à do not even think about JDBC, drivers, etc! à They pass through an application server and communicate via: •  standard HTTP requests for HTML content (eg PHP) •  REST-full services (XML, JSON, etc.) •  SOAP

HTML 5 •  Intro •  New Structural Tags and Attributes •  Forms •  Audio & Video •  Ofﬂine Data •  Geolocalization •  Web Sockets •  Canvas & SVG

HTML 5 HTML5 will be the new standard for HTML HTML5 is still a work in progress W3C ﬁnal recomendation: 2020 Top browsers support many (not all) of the new HTML5 elements http://mobilehtml5.org http://caniuse.com

What is HTML5? HTML5 Markup JavaScript CSS3Multimedia

The minimal HTML5 page <!DOCTYPE html> <html> <head> <title>Title</title> </head> <body> … </body> </html>

Roadmap •  Intro •  New Structural Tags and Attributes •  Forms •  Audio & Video •  Ofﬂine Data •  Geolocalization •  Web Sockets •  Canvas & SVG

New Structural Tags Main Goal: separate presentation from content •  Poor accessibility •  Unnecessary complexity •  Larger document size Most of the presentational features from earlier versions of HTML are no longer supported

New Structural Tags <header> header region of a page or section <footer> footer region of a page or section <nav> navigation region of a page or section <section> logical region of a page <article> a complete piece of content <aside> secondary or related content

New Structural Tags http://bit.ly/JCnuQJ

Other Structural Tags <command> a command button that a user can invoke <details> additional details that the user can view or hide <summary> a visible heading for a <details> element <meter> an amount within a range <progress> shows real-time progress towards a goal <figure> self-contained content, like illustrations, diagrams, photos, code listings, etc. <figcaption> caption of a ﬁgure <mark> marked/highlighted text <time> a date/time <wbr>Deﬁnes a possible line-break

Custom Data Attributes Can be used to add metadata about any element within an HTML5 page They are ignored by the validator for HTML5 documents They all start with the data- pattern They can be read by any browser using JavaScript via the getAttribute() method

Forms Main Goal: reduce the Javascript for validation and format management Example:

Form Input Types Form input types degrade gracefully à Unknown input types are treated as text-type http://bit.ly/I65jai

Form Input Types <input type="search"> for search boxes <input type="number"> for spinboxes <input type="range"> for sliders <input type="color"> for color pickers <input type="tel"> for telephone numbers <input type="url"> for web addresses <input type="email"> for email addresses <input type="date"> for calendar date pickers <input type="month"> for months <input type="week"> for weeks <input type="time"> for timestamps <input type="datetime"> for precise timestamps <input type="datetime-local"> for local dates and times

Form Field Attributes Autofocus –  Support for placing the focus on a speciﬁc form element <input type="text“ autofocus> Placeholder –  Support for placing placeholder text inside a form ﬁeld <input type="text“ placeholder=“your name”>

Roadmap •  Intro •  New Structural Tags and Attributes •  Forms •  Audio & Video •  Ofﬂine Data •  Geolocalization •  Web Sockets •  Server-Sent Events •  Canvas & SVG

Audio <audio> : a standard way to embed an audio ﬁle on a web page <audio controls> <source src="song.ogg" type="audio/ogg" /> <source src="song.mp3" type="audio/mpeg" /> Not Supported </audio> Multiple sources à the browser will use the ﬁrst recognized format

Audio JavaScript API HTML5 provides a set of JavaScript APIs for interacting with an audio element For example: play() pause() load() currentTime ended volume… à http://www.w3.org/wiki/HTML/Elements/audio

Video <video> : a standard way to embed a video ﬁle on a web page <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> Not Supported </video> Multiple sources à the browser will use the ﬁrst recognized format

Video JavaScript API HTML5 provides a set of Javascript APIs for interacting with a video element For example: play() pause() load() currentTime ended volume… à http://www.w3.org/wiki/HTML/Elements/video

A note on YouTube videos <video> works only if you have a direct link to the MP4 ﬁle of the YouTube video If you have just a link to the YouTube page of your video, simply embed it in your page <iframe width="560" height="315" src="http:// www.youtube.com/embed/Wp20Sc8qPeo" frameborder="0" allowfullscreen></iframe>

Offline Data LocalStorage stores data in key/value pairs it is tied to a specific domain/app persists across browser sessions SessionStorage stores data in key/value pairs it is tied to a specific domain/app data is erased when a browser session ends

Ofﬂine Data WebSQL Database relational DB support for tables creation, insert, update, … transactional tied to a speciﬁc domain/app persists across browser sessions Its evolution is called IndexedDB, but it is actually not fully supported yet in iOS

Ofﬂine data Mobile browsers compatibility matrix We will have a dedicated lecture to ofﬂine data storage on mobile devices

Geolocalization Gets Latitude and Longitude from the user’s browser There is also a watchPosition method wich calls a JS function every time the user moves We will have a dedicated lecture to geolocalization on mobile devices

Example function getLocation() { if(navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { console.log(‘no geolocalization’); } } function showPosition(position) { console.log(position.coords.latitude); console.log(position.coords.longitude); }

WebSockets Bidirectional, full-duplex communication between devices and server Speciﬁcally suited for chat, videogames, drawings sharing, real-time info Requires a Web Socket Server to handle the protocol

Alternative - Polling via AJAX + Near real-time updates (not purely real-time) + easy to implement + no new technologies needed -  they are requested from the client and cause increased network trafﬁc -  AJAX requests generally have a small payload and relatively high amount of http headers (wasted bandwith)

Canvas & SVG Canvas & SVG allow you to create graphics inside the browser http://bit.ly/Ie4HKu

Canvas & SVG Canvas draws 2D graphics, on the ﬂy you use JavaScript to draw on the canvas rendered pixel by pixel SVG describes 2D graphics in XML every element is available within the SVG DOM JavaScript event handlers for an element

Roadmap •  Intro •  Basics •  Selectors •  Box Model •  Positioning & Floats •  Fonts •  Visual Effects •  Media Queries

Intro Let’s imagine Flipboard without CSS3

CSS3 Main Drivers Simplicity –  less images –  less markup –  less JavaScript –  no Flash Better performance –  fewer HTTP requests Better Search Engine Placement –  text as real text, not images or Flash contents –  speed

Basics Generic Syntax: selector { property: value; property2: value2, value3; ... }

Inheritance If an HTML element B is nested into another element A à B inherits the style of A unless B has an explicit style deﬁnition body { background-color: red; } div { background-color: green; }

Combining Selectors Selectors can be combined h1, h2, h3 { background-color: red; }

Lists div { list-style-image: url(image.png); list-style-position: inside; list-style-style: circle; } Position inside | outside Style disc | circle square | decimal lower-roman | upper-roman | lower-alpha | upper-alpha | none

Backgrounds You can style a background of any element div { background:url(img.png), url(img2.png); background-size:80px 60px; background-repeat:no-repeat; background-origin:content-box; } repeat no-repeat | repeat repeat-x | repeat-y origin top left | top center | top right | center left | border-box | content-box etc.

Background & Colors div { background-color: blue; background-color: rgba(0, 0, 255, 0.2); } RGBA = RGB + opacity

Gradients They can be used in every place you can use an image div { background: -webkit-gradient(linear, right top, left bottom, from(red), green)); } linear à the type of gradient (also radial, or repeating-linear) right-top à start of the gradient left-bottom à end of the gradient from à starting color to à ﬁnal color

Text p { color: grey; letter-spacing: 5px; text-align: center; text-decoration: underline; text-indent: 10px; text-transform: capitalize; word-spacing: 10px; } text-align left | right center | justify Text-decoration none underline overline line throughtext-transform none | capitalize | lowercase | uppercase

Text Effects p { text-shadow: 2px 10px 5px #FF0000; text-overflow: ellipsis; word-wrap:break-word; } 2px à horizontal shadow 10px à vertical shadow 5px à blur distance #FF0000 à color

Selectors Classical ways to select elements in CSS2: •  by type a { color: red; } •  by id #redLink { color: red; } •  by class .redLink { color: red; }

Other Selectors from CSS1 & CSS2 •  div p à all <p> elements inside a <div> •  div>p à all <p> elements where the parent is a <div> •  div+p à all <p> elements that are placed immediately after <div> •  [target] à all elements with a target attribute •  [target=_blank] à all elements with target= "_blank“ •  p:ﬁrst-child à every <p> element that is the ﬁrst child of its parent

Some selectors introduced in CSS3 •  a[src^="https"] à every <a> element whose src attribute value begins with "https” •  a[src$=".pdf"] à every <a> element whose src attribute value ends with ".pdf” •  a[src*=“mobile"] à every <a> element whose src attribute value contains the substring “mobile“ •  p:nth-child(2) à every <p> element that is the second child of its parent •  p:nth-last-child(2) à every <p> element that is the second child of its parent, counting from the last child •  :not(p) à every element that is not a <p> element

The Box Model http://www.adamkaplan.me/grid/

http://www.adamkaplan.me/grid/ Tip Tells the browser not to include borders and padding in the width of your content à  you have more control on the layout of your app

http://www.adamkaplan.me/grid/ Tip

Borders & dimensions div { width: 100px; height: 40px; padding: 10px; border: 5px solid gray; margin: 10px; border-radius: 10px; box-shadow: 10px 10px 5px red; }

The Display Property It speciﬁes if and how an element is displayed div { display: none; } The element will be hidden, and the page will be displayed as if the element is not there

The Display Property Other usual values: block •  a block element is an element that takes up the full width available, and has a line break before and after it inline •  an inline element only takes up as much width as necessary •  it can contain only other inline elements inline-block •  the element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element –  you can set width and height, top and bottom margins and paddings

The visibility Property It speciﬁes if an element should be visible or hidden div.hidden { visibility: hidden; } The element will be hidden, but still affect the layout It can also be set to visible, collapse (only for tables), inherit

Flex Box It helps in styling elements to be arranged horizontally or vertically box: •  a new value for the display property •  a new property box-orient #div { display: box; box-orient: horizontal; }

Flex Box main elements display: box opts an element and its immediate children into the ﬂexible box model box-orient Values: horizontal | vertical | inherit How should the box's children be aligned box-direction Values: normal | reverse | inherit sets the order in which the elements will be displayed

Flex Box main elements box-pack Values: start | end | center | justify Sets the alignment of the box along the box-orient axis box-orient: horizontal; box-pack: end;

Flex Box main elements box-align Values: start | end | center | baseline | stretch Sets how the box's children are aligned in the box box-orient: horizontal; box-align: center;

Flex Box Children by default child elements are not ﬂexible à their dimension is set according to their width box-flex can be set to any integer It sets how a child element occupy the box’s space #box1 { width: 100px; } #box2 { box-flex: 1; } #box3 { box-flex: 2; }

Positioning •  Static •  Relative •  Absolute •  Fixed

Static Positioning Elements will stack one on top of the next http://bit.ly/I8cEaF

Relative Positioning Elements behave exactly the same way as statically positioned elements we can adjust a relatively positioned element with offset properties: top, right, bottom, and left http://bit.ly/I8cEaF

Relative Positioning It is possible to create a coordinate system for child elements http://bit.ly/I8cEaF

Absolute Positioning an absolutely positioned element is removed from the normal ﬂow it won’t affect or be affected by any other element in the ﬂow http://bit.ly/I8cEaF

Fixed Positioning shares all the rules of an absolutely positioned element a ﬁxed element does not scroll with the document http://bit.ly/I8cEaF

Float A floated element will move as far to the left or right as it can Elements are floated only horizontally The float CSS property can accept one of 4 values: left, right, none, and inherit

Fonts Before CSS3, web designers had to use fonts that were already installed on the user's device With CSS3, web designers can use whatever font they like @font-face { font-family: NAME; src: url(Dimbo.ttf); font-weight: normal; font-style: normal; } font-style normal italic oblique font-weight normal bold 100 200 …

Fonts Usage To use the font for an HTML element, refer to the name of the font (NAME) through the font-family property div { font-family: NAME; }

Some Fonts Sources... www.dafont.com www.urbanfonts.com www.losttype.com

Visual Effects Three main mechanisms: 1.  Transforms (both 2D and 3D) 2.  Transitions 3.  Animations

Transforms A transform is an effect that lets an element change shape, size, position, … You can transform your elements using 2D or 3D transformations http://bit.ly/IroJ7S

Transforms http://bit.ly/IrpUnX

Transitions They are used to add an effect when changing from one style to another The effect can be gradual The effect will start when the speciﬁed CSS property changes value

Transition syntax A transition contains 4 properties: •  property –  the name of the CSS property the transition effect is for (can be all) •  duration –  how many seconds (or milliseconds) the transition effect takes to complete •  timing-function –  linear, ease, ease-in, ease-out, ease-in-out •  delay –  when the transition effect will start

Example .imageThumbnail { width; 200px; transition: all ease-in 3s; } .zoomed { position: absolute; left: 0px; top: 0px; width: 100%; } $(‘.imageThumbnail’).addClass(‘zoomed’);

Animations An animation is an effect that lets an element gradually change from one style to another You can change style in loop, repeating, etc. To bind an animation to an element, you have to specify at least: 1.  Name of the animation 2.  Duration of the animation div { animation: test 5s ease-in; }

Animation Definition An animation is defined in a keyframe It splits the animation into parts, and assign a specific style to each part The various steps within an animation are given as percentuals 0% à beginning of the animation (from) 100% à end of the animation (to)

Example @keyframes test{ 0% {background: red; left:0px; top:0px;} 25% {background: yellow; left:200px; top:0px;} 50% {background: blue; left:200px; top:200px;} 75% {background: green; left:0px; top:200px;} 100% {background: red; left:0px; top:0px;} } result in http://goo.gl/kFZrLs

Animation Properties http://bit.ly/IrpUnX

Transitions VS Animations •  Trigger –  Transitions must be bound to a CSS property change –  Animations start autonomously •  States –  Transitions have start and end states –  Animations can have multiple states •  Repeats –  Transitions can be perfomed once for each activation –  Animations can be looped

Media Types Media Queries are based on Media Types A media type is a speciﬁcation of the actual media that is being used to access the page Examples of media types include •  screen: computer screens •  print: printed document •  braille: for Braille-based devices •  tv: for television devices

Media Types There are two main ways to specify a media type: •  <link> in the HTML page <link rel=“stylesheet” href=“style.css” media=“screen” /> •  @media within the CSS ﬁle @media screen { div { color: red; } }

Media Queries They allow you to to change style based on speciﬁc conditions For example, they can be about •  device’s display size •  orientation of the device •  Resolution of the display •  ...

Media Queries A media query is a boolean expression The CSS associated with the media query expression is applied only if it evaluates to true A media query consists of 1.  a media type 2.  a set of media features @media screen and orientation: portrait

The Full Media Feature List http://slidesha.re/I5oFHZ

The AND operator You can combine multiple expressions by using the and operator @media screen and (max-device-width: 480px){ /* your style */ }

The COMMA operator The comma keyword acts as an or operator @media screen and (color), handheld and (color) { /* your style */ }

The NOT operator You can explicitly ignore a speciﬁc type of device by using the not operator @media not (width:480px) { /* your style */ }

Examples Retina Displays @media only screen and -webkit-min-device-pixel-ratio: 2 iPad in landscape orientation @media only screen and (device-width: 768px) and (orientation: landscape) iPhone and Android devices @media only screen and (min-device-width: 320px) and (max-device-width: 480px)

References http://www.w3schools.com https://developer.mozilla.org/en-US/docs/Web/CSS

HTML5 & CSS3 refresher for mobile apps

More Related Content

What's hot

Viewers also liked

Similar to HTML5 & CSS3 refresher for mobile apps

More from Ivano Malavolta

HTML5 & CSS3 refresher for mobile apps