HTML5 & CSS3 For The Real World
Powerful HTML5 and CSS3 Techniques You Can Use Today!
Published on 10. March 2015
350 pages
978-1-4571-9279-1 (ISBN)
Description
HTML5 and CSS3 for the Real World is your perfect introduction to the latest generation of web technologies. This easy-to-follow guide covers everything you need to know to get started today. You'll master the semantic markup available in HTML5, as well as how to use CSS3 to create amazing-looking websites without resorting to complex workarounds.You'll learn how to:Lose that pesky Flash habit by embracing native HTML5 videoSet type that truly supports your messageBuild intelligent web forms that users will love!Design modern web apps the shine on mobile devicesCreate dynamic, efficient graphics on the fly with SVG and canvasUse shiny new APIs to add geolocation and offline functionalityBuild your own full featured HTML5 website, the HTML5 HeraldThis easy-to-follow guide is illustrated with lots of examples, and leads readers through the process of creating great websites from start to finish using HTML5 and CSS3.
More details
Other editions
Additional editions
Alexis Goldstein | Louis Lazaris | Estelle Weyl
HTML5 & CSS3 For The Real World 2e
Powerful HTML5 and CSS3 Techniques You Can Use Today!
Book
03/2015
2nd Edition
SitePoint Pty Ltd
€40.50
Shipment within 3-4 weeks
Content
- Cover
- HTML5 & CSS3 for the Real World
- Table of Contents
- Preface
- Who Should Read This Book
- Conventions Used
- Code Samples
- Tips, Notes, and Warnings
- Supplementary Materials
- Acknowledgments
- Alexis Goldstein
- Louis Lazaris
- Estelle Weyl
- Want to Take Your Learning Further?
- Introducing HTML5 and CSS3
- What is HTML5?
- How did we get here?
- Would the real HTML5 please stand up?
- Why should I care about HTML5?
- What is CSS3?
- Why should I care about CSS3?
- What do we mean by "the Real World"?
- The Current Browser Market
- The Growing Mobile Market
- On to the Real Stuff
- Markup, HTML5 Style
- Introducing The HTML5 Herald
- A Basic HTML5 Template
- The Doctype
- The html Element
- The head Element
- Leveling the Playing Field
- The Rest Is History
- HTML5 FAQ
- Why do these changes still work in older browsers?
- Shouldn't all tags be closed?
- What about other XHTML-based syntax customs?
- Defining the Page's Structure
- The header Element
- The section Element
- The article Element
- The nav Element
- The aside Element
- The footer Element
- Structuring The HTML5 Herald
- The New main Element
- Continuing to Structure The Herald
- Wrapping Things Up
- More HTML5 Semantics
- A New Perspective on Content Types
- The Document Outline
- No More hgroup
- More New Elements
- The figure and figcaption Elements
- The mark Element
- The progress and meter Elements
- The time Element
- Changes to Existing Features
- The Word "Deprecated" is Deprecated
- Block Elements Inside Links
- Bold Text
- Italicized Text
- Big and Small Text
- A cite for Sore Eyes
- Description (not Definition) Lists
- Other New Elements and Features
- The details Element
- Customized Ordered Lists
- Scoped Styles
- The async Attribute for Scripts
- The picture element
- Other Notables
- The Future of Markup - Web Components?
- Validating HTML5 Documents
- Summary
- HTML5 Forms
- Dependable Tools in Our Toolbox
- HTML5 Form Attributes
- The required Attribute
- Styling Required Form Fields
- The placeholder Attribute
- Polyfilling Support with JavaScript
- The pattern Attribute
- The disabled Attribute
- The readonly Attribute
- The multiple Attribute
- The form Attribute
- The autocomplete Attribute
- The datalist Element and the list Attribute
- The autofocus Attribute
- Input Types
- Search
- Email Addresses
- URLs
- Validation of URLs
- Telephone Numbers
- Numbers
- Ranges
- Colors
- Dates and Times
- Additional New Form Controls in HTML5
- The progress and meter Elements
- The output Element
- The keygen Element
- The contenteditable Attribute
- Changes to Existing Form Controls
- The form Element
- The optgroup Element
- The textarea Element
- In Conclusion
- HTML5 Video and Audio
- A Bit of History
- The Current State of Play
- Video Container Formats
- Video Codecs
- Audio Codecs
- The Markup
- Enabling Native Controls
- The autoplay Attribute
- The loop Attribute
- The preload Attribute
- The poster Attribute
- The muted Attribute
- Adding Support for Multiple Video Formats
- Source Order
- What about browsers without support for HTML5 video?
- Setting MIME Types
- Encoding Video Files for Use on the Web
- Creating Custom Video Controls
- Some Markup and Styling for Starters
- Introducing the Media Elements API
- Playing and Pausing the Video
- Muting and Unmuting the Video's Audio Track
- Responding When the Video Ends Playback
- Updating the Time as the Video Plays
- Further Features of the Media Elements API
- API Events
- API Properties
- What about audio?
- Accessible Media
- It's Showtime
- Introducing CSS3
- Getting Older Browsers on Board
- CSS3 Selectors
- Relational Selectors
- Attribute Selectors
- Pseudo-classes
- Structural Pseudo-classes
- Pseudo-elements and Generated Content
- Generated Content
- ::selection
- CSS3 Colors
- RGBA
- HSL and HSLA
- Opacity
- Putting It into Practice
- Rounded Corners: border-radius
- Drop Shadows
- Inset and Multiple Shadows
- Text Shadow
- More Shadows
- Up Next
- CSS3 Gradients and Multiple Backgrounds
- Linear Gradients
- The W3C Syntax
- The Prefixed Syntax
- The Old WebKit Syntax
- Putting It All Together
- Linear Gradients with SVG
- Linear Gradients with IE Filters
- Tools of the Trade
- Radial Gradients
- The W3C Syntax
- The Prefixed WebKit Syntax
- Making Our Own Radial Gradient
- Repeating Gradients
- Multiple Background Images
- Background Size
- In the Background
- CSS3 Transforms and Transitions
- Transforms
- Translation
- Scaling
- Rotation
- Skew
- Changing the Origin of the Transform
- Support for Internet Explorer 8 and Earlier
- Transitions
- transition-property
- The transition-duration Property
- The transition-timing-function Property
- The transition-delay Property
- The transition Shorthand Property
- Multiple Transitions
- Animations
- Keyframes
- Animation Properties
- animation-name
- animation-duration
- animation-timing-function
- animation-iteration-count
- animation-direction
- animation-delay
- animation-fill-mode
- animation-play-state
- The Shorthand animation Property
- Moving On
- Embedded Fonts and Multicolumn Layouts
- Web Fonts with @font-face
- @font-face rule
- Implementing @font-face
- Declaring Font Sources
- Font Property Descriptors
- The Unicode Range Descriptor
- Applying the Font
- Legal Considerations
- Creating Various Font File Types: Font Squirrel
- Other Font Considerations
- CSS3 Multicolumn Layouts
- The column-count Property
- The column-gap Property
- The column-width Property
- The columns Shorthand Property
- Columns and the height Property
- Other Column Features
- The column-rule Property
- Column Breaks
- Spanning Columns
- Other Considerations
- Progressive Enhancement
- Up Next
- Flexbox and Media Queries
- Flexbox
- Flex Container and Flex Item
- Container Properties
- Applying Flexbox to The HTML5 Herald
- Media Queries
- What are media queries?
- Syntax
- The Flexibility of Media Queries
- Browser Support
- Further Reading
- Living in Style
- Geolocation, Offline Web Apps, and Web Storage
- Geolocation
- Privacy Concerns
- Geolocation Methods
- Checking for Support with Modernizr
- Retrieving the Current Position
- Geolocation's Position Object
- Grabbing the Latitude and Longitude
- Using Google Maps API
- Loading a Map
- Displaying Our Location in Google Maps
- A Final Word on Older Mobile Devices
- Offline Web Applications
- How It Works: the HTML5 Application Cache
- Setting Up Your Site to Work Offline
- The cache.appcache File
- Setting the Content Type on Your Server
- Pointing Your HTML to the Manifest File
- Seeking Permission to Store the Site Offline
- Going Offline to Test
- Testing if the Application Cache Is Storing Your Site
- Making The HTML5 Herald Available Offline
- Limits to Offline Web Application Storage
- The Fallback Section
- Refreshing the Cache
- Caching the Cache
- Are we online?
- Further Reading
- Web Storage
- Two Kinds of Storage
- Session Storage
- Local Storage
- What Web Storage Data Looks Like
- Getting and Setting Our Data
- Converting Stored Data
- The Shortcut Way
- Removing Items and Clearing Data
- Storage Limits
- Security Considerations
- Adding Web Storage to The HTML5 Herald
- Viewing Our Web Storage Values with Web Inspector
- Additional HTML5 APIs
- Web Workers
- Web Sockets
- IndexedDB
- Back to the Future
- Canvas, SVG, and Drag and Drop
- Canvas
- A Bit of Canvas History
- Creating a canvas Element
- Drawing on the Canvas
- Getting the Context
- Filling Our Brush with Color
- Drawing a Rectangle to the Canvas
- Variations on fillStyle
- Drawing Other Shapes by Creating Paths
- Saving Canvas Drawings
- Drawing an Image to the Canvas
- Manipulating Images
- Security Errors with getImageData
- Converting an Image from Color to Black and White
- Manipulating Video with Canvas
- Displaying Text on the Canvas
- Accessibility Concerns
- Further Reading
- SVG
- Drawing in SVG
- SVG Filters
- Using the Raphaël Library
- Drawing an Image to Raphaël's Container
- Rotating a Spinner with Raphaël
- Canvas versus SVG
- Drag and Drop
- Feeding the WAI-ARIA Cat
- Making Elements Draggable
- The DataTransfer Object
- Accepting Dropped Elements
- Further Reading
- That's All, Folks!
- Appendix A: Modernizr
- Using Modernizr with CSS
- Using Modernizr with JavaScript
- Further Reading
- Appendix B: WAI-ARIA
- How WAI-ARIA Complements Semantics
- The Current State of WAI-ARIA
- Further Reading
- Appendix C: Microdata
- Aren't HTML5's semantics enough?
- The Microdata Syntax
- Understanding Name-Value Pairs
- Microdata Namespaces
- Further Reading
