Realtime Web Apps: With HTML5 WebSocket, PHP, and jQuery is a guide for beginner- to intermediate-level web developers looking to take the next leap forward in website and app development: realtime. With Realtime Web Apps, you'll be able to quickly get up to speed on what HTML5 WebSocket does, how it is going to affect the future of the web as we know it, and--thanks to Pusher's simple API--start developing your first realtime app today. Only lightly touching on the heavy theory and instead focusing on a practical approach, Realtime Web Apps will guide you through building your first app using HTML5, CSS3, jQuery, and Pusher. After your initial introduction to the technologies used in the book, you'll immediately jump into the process of creating a realtime Q&A app that will work on desktop browsers as well as mobile phones (including iOS and Android). In addition to learning realtime development strategies, you'll also learn progressive development strategies including responsive CSS3 layouts, AJAX development with jQuery, and more.The future of the web is realtime. Grab your hoverboard. Introduces you to the revolutionary capabilities of the HTML5 WebSocket API Gets you started with WebSocket immediately using the super-simple Pusher API Walks you through the development of a real-life realtime web app Gets you working with responsive layouts, jQuery, and AJAX development What you'll learn Familiarize yourself with what "realtime" means and how it changes the web as we know it. Learn how to utilize responsive web design and jQuery to create a single web app instead of multiple platform-specific applications. Get up and running with the Pusher API to start developing realtime apps today. Build a web app back-end with PHP and MySQL. Integrate AJAX and realtime interactivity into your web app. Use OAuth 2.0 to allow users to log in to your app (including Facebook and Twitter OAuth). Who this book is for Realtime Web Apps: With HTML5 WebSocket, PHP, and jQuery is for the beginning- to intermediate-level web developer who is ready to usher in the next era of web apps. It's for those whose time is precious, but have a need to implement realtime functionality into their projects. Realtime Web Apps is written for--and by--geeks who love to expand their skillset but don't have weeks to dedicate to learning how to implement new technology. It's the perfect tool for busy web professionals who need to get up to speed with the latest the web has to offer quickly and in such a way that it's immediately applicable to their projects. Table of Contents What Is Realtime? The Tools Pusher Choosing a Web App Over Native Apps Determining the App's Functionality and Structure Designing the App Creating HTML & CSS Markup Building the Back End: Part 1 Building the Back End: Part 2 Implementing jQuery Effects App A: OAuth
Author(s): Jason Lengstorf, Phil Leggetter
Edition: 1
Publisher: Apress
Year: 2013
Language: English
Pages: 312
Realtime Web Apps......Page 288
Contents at a Glance......Page 3
About the Authors......Page 298
Acknowledgments......Page 299
Introduction......Page 4
Part I: Getting Familiar with the Required Technologies
......Page 5
The Evolution of Media......Page 6
Web Sites, Not Web Apps......Page 7
Polling......Page 8
HTTP Long-Polling......Page 10
Additional Problems with HTTP-based Solutions in Web Browsers......Page 11
The Solution: WebSockets......Page 13
The WebSocket Protocol......Page 14
Why Bother Learning about Realtime Web Technologies?......Page 15
Summary......Page 16
What Does That Mean Development-Wise?......Page 17
What Role Does it Play?......Page 18
How Does it Work?......Page 19
Why Do We Need It?......Page 20
How Does It Work?......Page 21
Why Do We Need It?......Page 24
How Does It Work?......Page 25
PHP......Page 27
How Does It Work?......Page 28
Why Do We Need It?......Page 29
How Does It Work?......Page 30
HTML5 WebSocket Technology and Pusher......Page 32
What Role Does It Play?......Page 33
Why Do We Need It?......Page 34
Summary......Page 35
Scalability......Page 36
Documentation......Page 37
Getting Started with Pusher......Page 38
Using Pusher to Send Events......Page 44
Debugging Your Pusher Application......Page 53
Summary......Page 55
Part II: Planning the App
......Page 56
Factors to Consider......Page 57
Marketing......Page 58
Sales......Page 59
Look, Feel, and Performance......Page 60
Maintenance......Page 61
Connectivity......Page 62
Does this App Need Access to Any Device Hardware?......Page 63
Summary......Page 64
Give the App a Mission Statement......Page 65
Attendees......Page 66
Going Minimalist with the HTML......Page 67
Completely Ignoring Indentation......Page 68
One- and Two-Column Layouts......Page 69
Effects and Animations......Page 73
Model View Controller......Page 74
What Data Needs to Be Stored?......Page 76
Database Normalization......Page 77
Rooms Table......Page 79
Organizing the Home Page......Page 80
Wireframing for Narrower Screens......Page 81
Wireframing for Wider Screens......Page 82
Wireframing for Narrower Screens......Page 83
Wireframing for Wider Screens......Page 84
Wireframing for Narrower Screens......Page 85
Summary......Page 86
Part III: Building the Basics
......Page 87
Setting Goals for the Design......Page 88
Choosing Fonts......Page 89
Creating the Header......Page 91
Creating the Footer......Page 93
Text and E-mail Inputs......Page 94
Submit Buttons......Page 98
Create-a-Room Form......Page 99
Join-a-Room Form......Page 101
Designing the Attendee View......Page 103
Designing the Presenter View......Page 105
Summary......Page 107
Starting with the Basics: Setting Up an HTML5 Document......Page 108
Getting Fonts Ready to Go......Page 109
The Header Markup......Page 112
The Footer Markup......Page 113
The Styles......Page 114
Making the Header and Footer Responsive......Page 118
Writing the Markup......Page 120
Implementing the CSS......Page 122
Creating Styles for Active and Hovered Form Elements......Page 125
Adding Media Queries......Page 126
Writing the Markup......Page 128
Using HTML5’s data Attribute......Page 130
Implementing the CSS......Page 132
Slicing PSDs and Creating Sprites......Page 135
Using:before......Page 138
Adding Media Queries......Page 140
Striving for as Little New Markup as Necessary......Page 143
Adding Styles......Page 144
Reworking the Existing Markup......Page 146
Updating the CSS......Page 148
Updating the Media Queries......Page 150
Summary......Page 152
Determining the Directory Structure......Page 153
Setting Configuration Variables......Page 154
Initializing the App......Page 156
Parsing the URI......Page 158
Getting the Controller Name......Page 160
Avoiding Unwanted Slashes......Page 161
Autoloading Classes......Page 164
Loading the Controller......Page 167
Outputting the View......Page 168
Setting Up the Core Classes......Page 169
Creating the Abstract Controller Class......Page 171
Creating the View Class......Page 173
Creating the Abstract Model Class......Page 176
Adding the Header and Footer Markup......Page 177
Setting Variables for the Header......Page 179
Creating the Home Controller......Page 180
Creating the Home View......Page 181
Generating Variables for Output......Page 182
Giving the App its First Spin......Page 183
Creating the Error Controller......Page 184
Creating the Error View......Page 185
Testing the Error Page......Page 186
Building the Database......Page 187
Planning the Form Submission Workflow......Page 188
Preventing Duplicate or Fraudulent Submissions......Page 189
Checking Nonces......Page 190
Adding the Main Form Handling Method......Page 191
Adding an Action Method to the Controller......Page 193
Summary......Page 194
Building the Question Controller......Page 195
Adding the Question View......Page 197
Checking to See Whether the User Has Already Voted Up a Question......Page 198
Loading the Vote Up Form......Page 199
Loading the Answer Form......Page 201
Adding Styles for Voted and Answered Questions......Page 203
Loading All Questions for the Room......Page 204
Adding the Ask a Question Method......Page 205
Building the Question Model......Page 206
Loading All Questions for a Room......Page 207
Saving New Questions......Page 208
Adding Votes to a Question......Page 209
Marking a Question as Answered......Page 210
Saving New Questions......Page 211
Marking a Question as Answered......Page 213
Adding the Room Controller......Page 214
Determining Whether the User Is the Presenter......Page 216
Showing the Ask Form......Page 217
Showing the Presenter Controls......Page 218
Showing the Questions......Page 219
Building the Room Model......Page 220
Creating a Room......Page 221
Checking to See Whether a Room Exists......Page 222
Opening a Room......Page 223
Loading Room Information......Page 224
Adding Form Handlers to the Room Controller......Page 225
Joining a Room......Page 226
Creating New Rooms......Page 227
Reopening a Closed Room......Page 228
Closing a Room......Page 229
Creating Your First Room......Page 230
Closing the Room......Page 231
Reopening the Room......Page 232
Joining a Room......Page 233
Asking Your First Question......Page 234
Voting Up the Question......Page 235
Answering the Question......Page 237
Summary......Page 238
Obtaining Your Pusher API Credentials......Page 239
Including the PHP API Wrapper in the App......Page 241
Loading jQuery......Page 242
Creating the Event......Page 243
Testing Out Realtime Events......Page 244
Adding the Channel Subscription JavaScript......Page 247
Create an Initialization JavaScript File......Page 248
Handling Room Events......Page 249
Adding New Questions with Animation......Page 250
Adding the Animation to the Stylesheet......Page 251
Triggering the Animation with a Class......Page 252
Testing Out the Animation......Page 253
Answering a Question with Animation and Reordering......Page 254
Testing Out Answering Questions......Page 255
Summary......Page 256
The History of OAuth......Page 257
How OAuth Works......Page 258
Building the Login Link......Page 259
Requesting an Access Token......Page 260
What to Do with the Access Token......Page 261
Why OAuth Is Better Than Building a Login System......Page 262
Index......Page 282
