Realtime Web Apps · With HTML5 WebSocket, PHP, and jQuery by Lengstorf, Jason -- Read -- Imperial Library of Trantor

Index

Cover Title Copyright Dedication Contents at a Glance Contents About the Authors Acknowledgments Introduction Part I: Getting Familiar with the Required Technologies

Chapter 1: What Is Realtime?

The Evolution of Media

Web Sites, Not Web Apps HTTP Hacks But First: What Does “Realtime” Actually Mean? AJAX Polling HTTP Long-Polling HTTP Streaming Additional Problems with HTTP-based Solutions in Web Browsers

The Solution: WebSockets

The WebSocket Protocol

Why Bother Learning about Realtime Web Technologies? Using Realtime Web Technologies in Your Apps Now Summary

Chapter 2: The Tools

What Are We Building?

What Does That Mean Development-Wise?

Choosing Our Tools

HTML5 CSS3 JavaScript and jQuery PHP MySQL HTML5 WebSocket Technology and Pusher OAuth

Summary

Chapter 3: Pusher

A Brief History of Pusher Why Use Pusher?

Scalability WebSocket, Fallback Support, and Auto-Reconnect Other Client Libraries REST API Server Libraries Developer Tools Documentation

Pusher Terminology Getting Started with Pusher Using Pusher to Send Events Debugging Your Pusher Application Summary

Part II: Planning the App

Chapter 4: Choosing Web Apps Over Native Apps

Why Does It Matter? Factors to Consider

Know Your User Marketing Sales Distribution Look, Feel, and Performance Development

Choosing Based on Requirements

Choosing Web Apps Over Native Apps The Final Decision: Let’s Build a Web App

Summary

Chapter 5: Determining the App’s Functionality and Structure

What Does the App Do?

Give the App a Mission Statement

What Doesn’t the App Do? What Roles Will Users Play?

Presenter Attendees

Front-End Planning

What Technologies Are We Using? Using HTML5 CSS3, Media Queries, and How That Affects the Design and HTML Effects and Animations

Back-End Planning

Determining the Database Structure

Putting Everything Together in a Wireframe

Organizing the Home Page Organizing the Q&A Page for Attendees Organizing the Q&A Page for Presenters

Summary

Part III: Building the Basics

Chapter 6: Designing the App

Setting Goals for the Design Defining the Color Palette Choosing Fonts Designing the Common Site Elements

Creating the Header Creating the Footer Form Elements

Designing the Home View

Create-a-Room Form Join-a-Room Form

Designing the Room View(s)

Designing the Attendee View Designing the Closed Room View Designing the Presenter View

Smaller Screen Layouts (and Why You’re Not Designing Them Here) Summary

Chapter 7: Creating HTML and CSS Markup

Starting with the Basics: Setting Up an HTML5 Document Getting Fonts Ready to Go Common Elements

The Header Markup The Footer Markup The Styles Making the Header and Footer Responsive

Developing the Home Page View

Writing the Markup Adding Media Queries

Developing the Active Room View for Attendees

Writing the Markup Implementing the CSS Adding Media Queries

Developing the Closed Room View for Attendees

Striving for as Little New Markup as Necessary Adding Styles What About the Media Queries?

Developing the Room View for Presenters

Reworking the Existing Markup Updating the CSS Updating the Media Queries

Summary

Chapter 8: Building the Back End: Part 1

Rolling Your Own Simple MVC Framework

Determining the Directory Structure Setting Up a Router for All Requests Setting Up Utility Functions Finishing the Router Setting Up the Core Classes

Adding the Header and Footer Markup

Setting Variables for the Header

Building the Home Page

Creating the Home Controller Creating the Home View

Adding an Error Handler

Creating the Error Controller Creating the Error View Adding Error-Specific Styles Testing the Error Page

Building the Database Handling Form Submissions

Planning the Form Submission Workflow Setting Up and Checking for Valid Actions Preventing Duplicate or Fraudulent Submissions Writing the Form Handling Methods

Summary

Chapter 9: Building the Back-End: Part 2

Building the Questions

Building the Question Controller Adding the Question View Finishing the View Adding the Ask a Question Form Building the Question Model Adding Form Handlers and Data Access Methods to the Controller

Building the Rooms

Adding the Room Controller Building the Room Model Adding Form Handlers to the Room Controller

Testing it All Out

Creating Your First Room Closing the Room Reopening the Room Joining a Room Asking Your First Question Voting Up the Question Answering the Question

Summary

Chapter 10: Implementing Realtime Events and jQuery Effects

Adding the Required Credentials and Libraries

Obtaining Your Pusher API Credentials Downloading the PHP API Wrapper for Pusher Loading Pusher’s JavaScript API Wrapper Loading jQuery

Implementing Realtime on the Back End

Creating the Event Testing Out Realtime Events

Implementing Realtime on the Front End

Subscribing to the Channel Binding to Events

Adding Effects

Handling Room Events Adding New Questions with Animation Adding Votes to a Question Answering a Question with Animation and Reordering

Summary

Appendix A: OAuth

What Is OAuth?

The History of OAuth

How OAuth Works

OAuth Developer Workflow

Why OAuth Is Better Than Building a Login System

Index

← Prev
Back
Next →

← Prev
Back
Next →