18. HTML5
Structure Indexed DB File APIs Forms
Audio and History
Web Workers XHR2
Video Navigation
...
Drag and
Canvas WebSockets Messaging
Drop
Server-Sent
Web Storage Offline Geolocation
Events
19. HTML5
Structure Indexed DB File APIs Forms
Audio and History
Web Workers XHR2
Video Navigation
...
Drag and
Canvas WebSockets Messaging
Drop
Server-Sent
Web Storage Offline Geolocation
Events
20. CSS3
Rounded Colors
Box Shadow Text Effects
Corners HSL, HSLA
Multi-column
Box Model Web Fonts Borders
layout
Media Attribute
Background Selectors
Queries matching
21. CSS3
Rounded Colors
Box Shadow Text Effects
Corners HSL, HSLA
Multi-column
Box Model Web Fonts Borders
layout
Media Attribute
Background Selectors
Queries matching
26. Let’s get started and change that MVC site
into a cross platform/device web application
57. If you want to make your web app responsive, you
should implement 3 ingredients
• A flexible, grid-based layout
• Flexible images and media
• Media Queries
69. The media types
Taken from the W3C site
All Suitable for all devices
Braille Intended for braille tactile feedback devices
Embossed Intended for paged braille printers
Handheld Intended for handheld devices
Print Intended for paged material
Projection Intended for projected presentations
Screen Intended primarily for color computer screens
Speech Inteded for speech synthesizers
Tty Media using a fixed character grid
Tv Intended for television-type devices
75. MEDIA QUERY
Type Query or Expression
@media all and (max-width: 640px) {
Feature Value
}
76. The Features
Features with min- and max- prefixes
• Width • Aspect-ratio
• Height • Device-aspect-ratio
• Device-width • Color
• Device-height • Color-index
• Resolution • Monochrome