WebKit ; FOR : DUMMIES. by Chris Minnick WILEY. John Wiley & Sons, Inc.

Size: px

Start display at page:

Download "WebKit ; FOR : DUMMIES. by Chris Minnick WILEY. John Wiley & Sons, Inc."

Rosaline Sims
5 years ago
Views:

1 WebKit ; FOR : DUMMIES by Chris Minnick WILEY John Wiley & Sons, Inc.

2 Table of Contents Introduction 7 Why I Love WebKit, and You Should Too 1 Who Should Read This Book 2 Conventions Used in This Book 3 Foolish Assumptions 3 How This Book is Organized 4 Part I: Introducing WebKit 4 Part II: Your First Mobile Web App 4 Part III: Mobile Web Fundamentals 5 Part IV: Optimizing Your Apps 5 Part V: Advanced Topics 5 Part VI: The Part of Tens 5 Icons Used in This Book 6 Where to Go from Here 6 Part h Introducing WebKit 7 Chapter V. Opening for Business 9 What Is a Web Browser Engine? 9 Corvette or clunker: Every browser has one 10 Moving pages through the browser stack 11 What Does a Browser Do? 13 Behind the scenes 13 Meet the current crop of web browsers 15 Understanding Browser Quirks and Incompatibilities 18 Changing standards for browser engines 18 Moving to mobile: Compatibility headaches everywhere 19 The History of WebKit 23 Enter Apple 23 WebKit spreads 24 Development continues 24 The Parts of WebKit 25 WebKit 25 WebCore 26 JavaScriptCore 26 Getting Started with WebKit 27 Downloading WebKit 27 Installing WebKit 28 Launching WebKit 30

3 WebKit For Dummies Chapter 2: Configuring WebKit 33 Customizing Your WebKit Interface 33 Getting Started with the Develop Menu 36 Opening a page with another browser 36 User agent 37 The Error Console 40 Using the Web Inspector 40 Using the Extension Builder 55 Using the Snippet Editor 56 Uncovering Hidden Features of WebKit and Safari 57 Useful keyboard shortcuts 57 Handy menu shortcuts to remember 58 Part 11: \lour First Mobile Web App 61 Chapter 3: Building Your First Mobile Web App 63 Setting Up Your Development Environment 63 Choosing a code editor 63 Installing Komodo Edit 64 Adding WebKit as your default browser 65 Creating a project 66 Starting Your Mobile Template 68 Getting started with Mobile Boilerplate 68 Creating a Komodo Edit template 73 Creating a new project from a template 74 Finally! Meet your first app! 76 Building the WKFDBookmarks app 78 Taking it up a level 81 Mobilize those links 83 Chapter 4: jquery Mobile 87 Developing with Frameworks and Libraries 87 What is jquery? 88 What is jquery Mobile? 89 Introducing the Mobile Cookbook App 91 Cooking up a cookbook app 91 Setting out the ingredients: HTML basics 91 Sinking your teeth into jquery Mobile 93 Spicing up your cookbook app 99 Presentation, presentation, presentation 102 Images on buttons 104 Adding forms with jquery Mobile 106

4 Table of Contents Chapter 5: Testing and Debugging 109 Testing Mobile Web Apps 109 The best way to test an app 110 Ill Testing early and often Testing in WebKit 112 Testing with emulators 113 Release early and often 118 Debugging Mobile Web Apps 118 Debugging with the Web Inspector 119 Enabling the Debug Console on ios 119 Learning from my mistakes 119 Improving Your App with Audits 127 Chapter 6: Flying Solo 131 Making Offline Web Apps 131 Writing your manifest 131 Understanding the structure of a manifest 133 Configuring your server for offline Apps 135 Using Offline Databases 136 Web storage 136 Browser support 139 Part 111: Mobile Web Fundamentals U1 Chapter 7: Web versus Native 143 Understanding How Mobile Web Apps Evolved 144 How Apple invigorated the Mobile Web 144 WebKit takes off 144 Thinking Differently about Apps 145 Benefits of native apps 146 Benefits of web apps 146 Debunking the Myths 147 Myth #1: Web apps are slower 147 Myth #2: Web apps require you to be connected to the Internet 148 Myth #3: Some kinds of apps need to be native 148 Myth #4: Web apps can never look as good as native 148 Exploring Some Great Mobile Web Apps 150 Twitter 150 Financial Times 151 TripiT 152 ESPN.com 152

5 WebKit For Dummies Chapter 8: Mobile Web App Design 155 Design for Many Devices 155 Designing for People 157 Developing user profiles with User Stories 157 Designing for simplicity 159 Progressive Enhancement 159 Mobile First 163 Chapter 9: HTML5 167 Understanding How We Got to The early years 167 HTML 3.2 and XHTML 169 What's up with WHATWG? 170 Meanwhile, Back at the W3C 170 W3C gets some sense 170 Now it's serious: We've got a logo 172 What's the Big Deal with HTML5? 172 Using Multimedia without plug-ins 172 Simplified syntax 176 Improved interoperability between browsers 177 Cross-platform mobile development 178 Markup Changes 178 Out with the old 178 In with the new 179 Checking Out HTML5's New APIs 181 Contacts API 181 Media Capture API 182 Calendar API 182 HTML5 Web Messaging 182 Geolocation 182 Offline storage 182 Chapter 10: CSS3 183 The Elements of Style 183 Using Selectors to Choose Elements 187 Getting to know your first selectors 188 Using more advanced selectors 189 Chaining selectors together 190 Navigating the C in CSS 190 Defining selector importance 191 Studying the browser's logic 192 Learning CSS3 Modules 194 Understanding browser prefixes 194 Media queries 194

6 Table of Contents CSS multicolumn layout 195 Borders 195 Text effects 196 Chapter 11: Scripting with JavaScript 199 Understanding the Role of JavaScript 200 Client-server computing 200 Running scripts on the server 200 Running scripts on the client 201 Writing JavaScript Code 201 Creating an HTML5 script block 202 Holding data in variables 202 Looping with a for statement 203 Writing to the document 203 Speaking Precisely 204 Pay attention to your capitalization 204 Separate your statements correctly 204 Put strings in quotes 204 Validating Form Data with JavaScript 205 Sending data to JavaScript 207 Grouping statements with functions 208 Extracting form data 208 Stripping extra characters 209 Getting logical with if 209 Understanding the HTML DOM 211 Representor" with objects 211 Climbing the DOM tree 212 Using dot notation with the DOM 214 Identifying nodes and relations 215 Using JavaScript for Much More Than Eye Candy 216 NextBus 216 Chalk 217 Fiddling with JavaScript 217 Part IV; Optimizing \lour Apps Chapter 12: Optimizing f or ios 223 Configuring Your Web App for ios 223 Understanding the viewport 223 Understanding device pixels and viewport pixels 226 Controlling the viewport size 227 Making your app full-screen 229 Using Apple-specific tags 230 Making a splash 232 Hiding the status bar 232 Getting in Touch with Touch Events 233

7 Web Kit For Dummies Chapter 13: Optimizing for Android 235 Sizing Your App 235 Understanding Android "dips" 236 Setting the viewport to device width: It's the least you can do Picturing the viewport 237 Looking deeper into density 239 Using Media Queries with Android 241 Determining screen density with JavaScript 242 Setting the Home Screen Icon 243 Chapter 14: Optimizing for BlackBerry 245 Understanding the Types of BlackBerry Apps 245 Developing native apps 245 Developing WebWorks apps 246 Developing HTML5 apps 246 Optimizing Mobile Web Apps for BlackBerry 246 Optimizing for display sizes 246 Optimizing the viewport 247 Optimizing for screen density 247 Using the Web Inspector with BlackBerry 247 Enabling Web Inspector on the Playbook 247 Remote debugging 248 Accessing Native Events 251 Cursor-event-mode meta tag 251 Touch-event-mode meta tag 252 Submitting Web Apps to BlackBerry App World 252 Downloading and Installing the BlackBerry Simulator 253 Chapter 15: Optimizing for webos 255 Understanding the Two Types of Web Apps on webos 255 Developing browser-based web apps 255 Developing native web apps 256 Optimizing Web Apps for webos Devices 256 Designing for the web Web browser 256 Designing for the webos viewport 257 Running the Emulator 258 Chapter 16: Optimizing for Performance 263 Testing with Online Tools 263 Google Page Speed 263 Page Speed Service 266 mobiready 268 Controlling Latency 270 Reducing real latency 270 Reducing perceived latency 271

8 Table of Contents tf(/g[ Part V: Advanced Topics 273 Chapter 17: Converting from Web to Native 275 Introducing PhoneGap 275 PhoneGap PhoneGap Build 276 Converting the Mobile Cookbook with PhoneGap Build 276 Preparing your app for PhoneGap Build 277 Uploading your app 277 Converting to an ios native app 280 Installing the Cookbook on Android 280 Chapter 18: Accessing Phone Features 285 W3C Device APIs Working Group 286 Contacts API 286 Calendar 287 Media Capture API 287 Battery Status 288 Network Information API 289 Giving Permission for Device and Feature Access 289 Preventing Peeping Tom apps 290 Balancing usability and security 291 Geolocation API 293 Getting your location with getcurrentposition 295 Mashing up with geolocation 298 Chapter 19: Graphics and Animation 303 Understanding Computer Graphic Formats 304 Raster graphics 304 Vector graphics 304 Reducing File Size with Compression 305 Lossy compression 305 Lossless compression 306 Drawing with SVG 307 Making graphics with SVG-edit 309 Finding SVG graphics 311 Embedding SVG graphics in HTML 311 Animating SVG with SMIL 314 Scripting Graphics with the Canvas Element 315 Creating a canvas 315 Drawing on the canvas 316 Animating with canvas 317

9 WebKit For Dummies Chapter 20: The Future of WebKit and HTML5 327 WebKit2 327 Getting Input with Web Forms 328 Placeholder text 328 Autofocus 328 New field types 328 Number sliders 329 Color 330 Date pickers 330 Creating 3-D Scenes with WebGL 331 Enabling WebGL in WebKit 331 Taking WebGL for a spin 331 Chrome OS 333 Part 0: The Part of Tens 339 Chapter 21: Ten Cool WebKit Tricks 341 Chapter 22: Ten Amazing HTML5 Demos 351 Chapter 23: Ten Useful Safari Extensions 361 Index 369

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