Index. Bootstrap framework ASP.NET MVC project set-up, default template, 223

Size: px

Start display at page:

Download "Index. Bootstrap framework ASP.NET MVC project set-up, default template, 223"

Deirdre Stewart
5 years ago
Views:

1 Index A Accordion-style navigation expanding/shrinking navigation, 77 markup, menu option, 75 nav element, overflow function, 77 responsive design, transition effect, 77 ASP.NET MVC custom display modes, 106 filename.wp8.extension, 113 HttpContext, 115 Index.wp8.cshtml, 113 Layout.wp8.cshtml, 114 Windows Phone 8, custom view engines, 106 A/B testing, 116, 120 BuildManagerViewEngine, 117 CreateView method, CSS files, 116 DisplayMode, 116 FindView method, 117 global.asax.cs application, 116 masterpath parameter, 118 mobile override, 119 RazorViewEngine, ViewStart file, 118 HtmlHelpers, 106, 122 mobile views, 106 modern browsers, 105 screenshot modified, 105 B Bootstrap framework ASP.NET MVC project set-up, default template, 223 definition, 221 grid layout, 224 Visual Studio new project 2013, Browser touch APIs, 181 click events, 182 gesture and rotation differences, 184 gesture* events, 183 HTML5 canvas element capture handwriting, 195 drawing, 191 implementation, 194 mouse events, 192 page creation, 190 pointer events, 194 saving to server, 198 touch events, 193 mouse* direction events, 182 MSGesture* events, 184 pointer* events, 183 touch* and MSPointer* events, 186 touch behavior, 188 touch events, 188 touch* events, 182 touch screens, 188 C Content. See also Video overview, 83 tables de-table, 88 FooTable, 93 plain tables, 88 scrolling tables, 88 text browser font sizes, 85 default text size, 84 em, 85 line height,

2 index Content (cont.) rem, 86 responsive text, CSS layout bootcamp block, inline and inline-block, 23 consistent columns faux columns, table-cell, 38 default browser styling vs. CSS reset, 22 floats box-sizing, calculating width, 31 collapsing containers, content-sized block elements, 26 markup, 25 non-floated elements, paragraph elements, 25 side-by-side arrangement, 28 width values, 27 horizontal menu floats, 41 inline-block, 42 multi-column layout, 40 page layout horizontal menu, padding and spacing changes, 35 38, 40 sidebar, selection, 21 Custom event creation, 201 D De-table, 88 Device detection BlackBerry Bold Touch, 124 distinct user agents, 123 Droid Razr, 123 vs. feature detection, 134 Galaxy SIII, 123 HTC Droid Incredible 2, 123 Nokia Windows Phone 7, 124 Nokia Windows Phone 8, 124 Samsung Convoy 2, 124 straightforward process, 123 User-Agent header, 123 Device/feature-detection libraries Modernizr, 229 WURFL, 229 E Em, 85 Embedding video dimensions, example, max-width, Enquire.js, 226 Expanding/shrinking navigation, 77 F Feature detection, 132 custom Modernizr build, 133 Modernizr action page, 133 simple scenario geolocation, 134 Modernizr class, 134 vs. device detection, 134 FitText, 225 FlowType.js, 225 FooTable, 93 G Gesture creation, 202 end method, 205 LazySwipe, 203 start, move and end functions, 204 swipeable image widget creation, 207 swipe gesture, swipeleft event, 204 touch, mouse, and pointer events, 203 H Hammer.js, 228 Hand.js, 229 HTML5 canvas element capture handwriting mouse events, 196 pointer events, 198 touch events, 197 drawing fill command, 192 getcontext method, 191 stroke command, 192 implementation clearrect, 195 requestanimationframe function, 195 mouse events, 192 page creation, 190 pointer events, 194 touch events, 193 HTML5 video default behavior, 95 max-width value, 95 I Images picture element and picturefill, practicals,

3 Index problems, resolution and bandwidth, size, 98 widget creation, 207 J jquery Mobile accordion control, HTML5-based user interface system, 230 markup, 230 new project dialog, Razor markup, 231 simple list page, 230 theming, 231 K Kendo UI Mobile data-role attributes, 238 image gallery, 239 simple list page, 238 Telerik, 240 L Layouts browsers, 53 page layout horizontal menu, padding and spacing changes, 35 38, 40 sidebar, progressive enhancement, 53 responsive ASP.NET MVC site, 43 ten-column layout 500 pixels, footer, 61 large screen, 60 markup, 57 screen size, 59 small screen, 58 three-column layout (see Three-column layout) two-column layout, Libraries device/feature-detection libraries Modernizr, 229 WURFL, 229 mobile application frameworks jquery Mobile, 230 Kendo UI Mobile, 238 Sencha Touch, 233 responsive libraries bootstrap framework, 221 Enquire.js, 226 FitText, 225 FlowType.js, 225 Respond, 227 Zurb Foundation, 224 touch libraries Hammer.js, 228 Hand.js, 229 Swipeview, 227 M Mobile application frameworks jquery Mobile accordion control, HTML5-based user interface system, 230 markup, 230 new project dialog, Razor markup, 231 simple list page, 230 theming, 231 Kendo UI Mobile data-role attributes, 238 image gallery, 239 simple list page, 238 Telerik, 240 Sencha Touch blog list, 235 blog posts, carousel, demo, 233 JavaScript-based approach, 233 tab panel, 234 welcome page, Mobile applications native APIs accessing maps, 161 geolocation, 158 network API, 160 phone calls and , 161 upload photos, 158 new capabilities audio and video, 167 browser history, 167 offline web applications, 165 semantics, 168 web sockets, 162 web storage, 164 web workers, 166 visual tools, CSS animations, 170 background images, 176 border radius property, 174 canvas element, 177 gradients, 172 opacity and RGBA property, 175 scalable vector graphics (SVG), 179 shadows, 173 transformations,

4 index Mobile applications (cont.) transitions, 169 web fonts, 168 Mobile performance techniques chrome developer tools audit tab, 139 network tab, 138 screenshot, 138 chrome developer tools, 137 client-side caching cache-control, 151 Expires header, 150 fiddler trace, Content Delivery Network (CDN), 155 CSS and JavaScript optimization, using CSS sprites, 153 image sprite, 154 visualization, 153 Fiddler tools, 139 Gzip tool Accept-Encoding header, 141 compression/decompression, 141 Content-Encoding header, 142 dynamic content compression, 143 Fiddler trace enabled, 144 HTTP headers, 141 IIS manager, 142 image optimization retina-quality images, 155 savings gained, 155 minify CSS and JavaScript ASP.NET web optimization framework, 146 bundles, 147 Global.asax.cs file, 146 JavaScript assests, Manage Nuget packages, 145 network tab, 145 web optimization, 144 reduce HTTP request, 140 Mobile views Add controller dialog, Add item dialog Layout.cshtml, 110 MVC 4 Layout Page, 110 Add View dialog Default HTML, 109 Mobile HTML, 109 ASP.NET MVC project dialog, 107 convention-based approach, 113 CSS and JavaScript CSS content property, 111 default view page, 111 script.js file, 111 overrides content changes, 112 Index.mobile.cshtml, Layout.mobile.cshtml, 112 mobile view page, 113 User-Agent Switcher for Chrome, 113 Modernizr, 229 Moving element, 216 N Native phone APIs geolocation, 158 network info API, 160 phone calls and s, 161 upload photos accessing maps, 161 addeventlistener method, 160 FileReader object, 160 native SDKs, 158 Navigation. See also Accordion-style navigation horizontal menu into vertical menu smaller screens, unordered list, 65 move menu to bottom differences, 70 header text and menu, 69 layout, markup, 66 navigation layout, smaller screens, 66 off-canvas flyout navigation, 78 select, 70 New capabilities. See Mobile applications, new capabilities O Off-canvas flyout navigation, 78 Offline web application CACHE section, 165 chrome developer tools, 166 NETWORK section, 165 P, Q Page layout horizontal menu, padding and spacing changes, 35 38, 40 sidebar, Parsing user agent strings, WURFL abstracting WURFL DeviceInfo object, 130, 132 ToJson() method, 130 default view, 127 device detection, 124 display modes, internet application template, 125 Nuget package manager, 127

5 Performance evaluation. See Mobile performance techniques Pincher, 211 Plain tables, 88 R Rem, 86 Resizing, Respond, 227 Responsive ASP.NET MVC site, 43 Responsive libraries bootstrap framework ASP.NET MVC project set-up, default template, 223 definition, 221 grid layout, 224 Visual Studio new project 2013, Enquire.js, 226 FitText, 225 FlowType.js, 225 Respond, 227 Zurb Foundation, 224 Responsive web design fixed fixation (see also Viewport meta tag) content, 11 CSS floats, 5 CSS media queries, 12 footer and laid out, 9 four-column layout, 5 6, 8 layout, 10 nav section, 5 nested list, 8 simple code, 4 three-column layout, 7 fixed-size sites, 2 modern phones and tablets, 1 overview, 1 2 screenshots, 3 web designers/developers, 2 Rotation, 219 S Scalable vector graphics (SVG), 179 Scaling. See Resizing Scrolling table, 88 Sencha Touch blog list, 235 blog posts, carousel, demo, 233 JavaScript-based approach, 233 tab panel, 234 welcome page, Swipeview, 227 T, U Ten-column layout 500 pixels, footer, 61 large screen, 60 markup, 57 screen size, 59 small screen, 58 Three-column layout border adding, 49 columns, 50 final layout, 52 padding, 51 flexible, 46 responsive design, space creation responsive layout, 48 results, Touch APIs browser (see Browser touch APIs) x and y position calculation, 187 Touch libraries Hammer.js, 228 Hand.js, 229 Swipeview, 227 Touch method normalization, 212 Touch programming basic shell creation, Pincher, 211 custom event creation, 201 gesture creation, 202 end method, 205 LazySwipe, 203 start, move and end functions, 204 swipeable image widget creation, 207 swipe gesture, swipe gesture with time, 206 swipeleft event, 204 touch, mouse, and pointer events, 203 moving, 216 moving, pinching, zooming or rotating, 210 resizing, 217 rotation, 219 scaling, 217 touch method normalization, 212 Two-column layout, V Video, 94 embedding dimensions, example, max-width, 96 Index 245

6 index Video (cont.) HTML5 video default behavior, 95 max-width value, 95 images picture element and picturefill, practicals, problems, resolution and bandwidth, size, 98 Viewport meta tag incompatibilities, mobile development, 14 responsive site, 16 retina screens, zoom value, Visual tools, 158 W, X, Y Web design. See Responsive web design Wireless universal resource file (WURFL), 124, 229 Z Zurb Foundation,

Index LICENSED PRODUCT NOT FOR RESALE

Index LICENSED PRODUCT NOT FOR RESALE A Absolute positioning, 100 102 with multi-columns, 101 Accelerometer, 263 Access data, 225 227 Adding elements, 209 211 to display, 210 Animated boxes creation using