HTML5 Multimedia Development Cookbook. Recipes for practical, real-world HTML5 multimedia driven development - Helion
ebook
Autor: Lee Jordan, Dale CruseTytuł oryginału: HTML5 Multimedia Development Cookbook. Recipes for practical, real-world HTML5 multimedia driven development.
ISBN: 9781849691055
stron: 288, Format: ebook
Data wydania: 2011-05-19
Księgarnia: Helion
Cena książki: 129,00 zł
HTML5 is the most significant new advancement the web has seen in many years. HTML5 adds many new features including the video, audio, and canvas elements, as well as the integration of SVG. This cookbook is packed full of recipes that will help you harness HTML5’s next generation multimedia features. HTML5 is the future.Whether you’re a seasoned pro or a total newbie, this book gives you the recipes that will serve as your practical guide to creating semantically rich websites and apps using HTML5. Get ready to perform a quantum leap harnessing HTML5 to create powerful, real world applications. Many of the new key features of HTML5 are covered, with self-contained practical recipes for each topic. Forget hello world. These are practical recipes you can utilize straight away to create immersive, interactive multimedia applications. Create a stylish promo page in HTML5. Use SVG to replace text dynamically. Use CSS3 to control background size and appearance. Use the Canvas to process images dynamically. Apply custom playback controls to your video.
Osoby które kupowały "HTML5 Multimedia Development Cookbook. Recipes for practical, real-world HTML5 multimedia driven development", wybierały także:
- Windows Media Center. Domowe centrum rozrywki 66,67 zł, (8,00 zł -88%)
- Ruby on Rails. Ćwiczenia 18,75 zł, (3,00 zł -84%)
- DevOps w praktyce. Kurs video. Jenkins, Ansible, Terraform i Docker 190,00 zł, (39,90 zł -79%)
- Przywództwo w świecie VUCA. Jak być skutecznym liderem w niepewnym środowisku 58,64 zł, (12,90 zł -78%)
- Scrum. O zwinnym zarządzaniu projektami. Wydanie II rozszerzone 58,64 zł, (12,90 zł -78%)
Spis treści
HTML5 Multimedia Development Cookbook. Recipes for practical, real-world HTML5 multimedia driven development eBook -- spis treści
- HTML5 Multimedia Development Cookbook
- Table of Contents
- HTML5 Multimedia Development Cookbook
- Credits
- Foreword
- About the Authors
- About the Reviewers
- www.PacktPub.com
- Support files, eBooks, discount offers and more
- Why subscribe?
- Free access for Packt account holders
- Support files, eBooks, discount offers and more
- Preface
- What this book covers
- What you need for this book
- Who this book is for
- Conventions
- Reader feedback
- Customer support
- Downloading the example code
- Errata
- Piracy
- Questions
- 1. Structuring for Rich Media Applications
- Introduction
- Setting up an HTML5 test area
- Getting ready
- How to do it...
- How it works...
- Theres more...
- WebKit rendering engine
- Gecko rendering engine
- Trident rendering engine
- See also
- Using the header tag for logos and site titles
- Getting ready
- How to do it...
- How it works...
- There's more...
- Use <header> elsewhere
- Content, not position
- Semantic naming
- See also
- Creating a table of contents using the nav tag
- Getting ready
- How to do it...
- How it works...
- There's more...
- Use <nav> elsewhere
- More semantic = more gooder
- Still evolving
- See also
- Using section tags to structure areas of a page
- Getting ready
- How to do it...
- How it works...
- There's more...
- Section doesn't equal div
- Section guidelines
- Still evolving
- See also
- Aligning graphics using the aside tag
- Getting ready
- How to do it...
- How it works...
- There's more...
- Not all <section>s are alike
- Tip to remember
- Aside from <aside>
- See also
- Displaying multiple sidebars using the aside tag
- Getting ready
- How to do it...
- How it works...
- There's more...
- Pull quotes good for <aside>
- Remember to validate
- See also
- Implementing the footer tag
- Getting ready
- How to do it...
- How it works...
- There's more...
- This happens usually
- Flexible footer content
- More flexible footer content
- See also
- Applying the outline algorithm
- Getting ready
- How to do it...
- How it works...
- There's more...
- Are you sure?
- An exception
- Remember accessibility
- See also
- Creating a stylish promo page in HTML5
- Getting ready
- How to do it...
- How it works...
- There's more...
- Try sans shiv
- Mobile first
- IE evil?
- See also
- 2. Supporting the Content
- Introduction
- Structuring a blog article
- Getting ready
- How to do it...
- Put your code on a diet?
- How it works...
- There's more...
- Validation as an aid, not a crutch
- Eric Meyer's funny
- Where to find validators
- See also
- Highlighting text using the mark element
- Getting ready
- How to do it...
- How it works...
- There's more...
- <Mark> long and prosper
- Waiting for browsers
- Is "future proof" a word?
- See also
- Using the time element
- Getting ready
- How to do it...
- How it works...
- There's more...
- Odd rules
- <time>'s Time will come
- Always remember SEO
- See also
- Specifying the pubdate of an article
- Getting ready
- How to do it...
- How it works...
- There's more...
- Still waiting on browsers
- Extra credit
- Let's end confusion
- See also
- Displaying comment blocks using the article element
- Getting ready
- How to do it...
- How it works...
- There's more...
- Blog comments
- Value comments
- Opportunity's yours
- See also
- Adding fonts dynamically with @font-face
- Getting ready
- How to do it...
- How it works...
- There's more...
- Don't steal
- Firefox note
- Paul Irish rocks
- See also
- Adding drop-shadow effects to fonts
- Getting ready
- How to do it...
- How it works...
- There's more...
- Browser support
- With great power
- A plea to all readers
- See also
- Applying gradient effects to fonts
- Getting ready
- How to do it...
- How it works...
- There's more...
- See also
- Annotating visual elements using the figure and figcaption tags
- Getting ready
- How to do it...
- How it works...
- There's more...
- Grouping's good
- Semantics are valuable too
- <figure> vs <aside>
- See also
- 3. Styling with CSS
- Introduction
- Setting elements to display:block
- Getting ready
- How to do it...
- How it works...
- There's more...
- No need to repeat and repeat and repeat and repeat and repeat
- Style once
- Echoes of the past
- See also
- Styling a nav block element
- Getting ready
- How to do it...
- How it works...
- There's more...
- Browser support
- Text-shadow is cool
- See also
- Using background-size to control background appearance
- Getting ready
- How to do it...
- How it works...
- There's more...
- Browser support
- Acceptable in IE
- Simple Scott simply rocks
- See also
- Adding rounded corners with border-radius
- Getting ready
- How to do it...
- How it works...
- There's more...
- Browser support
- Acceptable in IE
- Devin's Heaven goes to 11
- See also
- Including multiple background images
- Getting ready
- How to do it...
- How it works...
- There's more...
- Where's the content?
- Let's be Frank
- See also
- Adding a box shadow to images
- Getting ready
- How to do it...
- How it works...
- Browser support
- Ignorance is bliss
- Box-shadow for The Box
- See also
- Styling for Internet Explorer browsers
- Getting ready
- Border-radius
- Box-shadow
- Text-shadow
- Note
- See also
- 4. Creating Accessible Experiences
- Introduction
- Testing browser support
- How to do it...
- How it works...
- There's more...
- With an eye to the future
- What Modernizr really does
- Do it for the right reasons
- See also
- Adding skip navigation
- Getting ready
- How to do it...
- How it works...
- There's more...
- Full browser support
- Less equals more
- See also
- Adding meta tags
- Getting ready
- How to do it...
- How it works...
- There's more...
- Whatchu talkin' 'bout?
- It all comes back to SEO
- Did I do that?
- See also
- Using semantic descriptions in tags for screen readers
- Getting ready
- How to do it...
- How it works...
- There's more...
- Always improve
- Semantics for good SEO
- Greg finally learned
- See also
- Providing alternate site views
- Getting ready
- How to do it...
- How it works...
- There's more...
- Min-width
- My math teacher was right
- Is bigger always better?
- See also
- Using hgroup to create accessible header areas
- Getting ready
- How to do it...
- How it works...
- See also
- Displaying alternate content for non-supported browsers
- Getting ready
- How to do it...
- How it works...
- See also
- Using WAI-ARIA
- Getting ready
- How to do it...
- How it works...
- There's more...
- Still awaiting browser support
- That's how I role
- Accessibility first
- See also
- 5. Learning to Love Forms
- Introduction
- Displaying placeholder text
- How to do it...
- How it works...
- There's more...
- Text only
- Embrace italics
- Browser support
- See also
- Adding autofocus to form fields
- How to do it...
- How it works...
- There's more...
- One per page
- Older browsers
- Browser support
- See also
- Styling forms using HTML5 and CSS3
- How to do it...
- How it works...
- There's more...
- Older browsers
- Test, test, test
- About pseudo classes
- See also
- Using the e-mail input type
- How to do it...
- How it works...
- There's more...
- Browser support
- No JavaScript
- Validation evolution
- Adding a URL using the URL input type
- How to do it...
- How it works...
- There's more...
- Browser support
- No JavaScript
- What's next?
- See also
- Using the number tag
- How to do it...
- How it works...
- There's more...
- Browser support
- No JavaScript
- Using the range tag
- How to do it...
- How it works...
- There's more...
- Use caution
- No JavaScript
- Browser support
- See also
- Creating a search field
- How to do it...
- How it works...
- There's more...
- Why fix perfection?
- Browser support
- Search results
- See also
- Creating a picker to display date and time
- How to do it...
- How it works...
- There's more...
- Browser support
- If all else fails
- See also
- 6. Developing Rich Media Applications Using Canvas
- Introduction
- Setting up the canvas environment
- How to do it...
- How it works...
- There's more...
- He's smart
- What am I sayin'?
- What's next for <canvas>?
- See also
- Understanding the 2d rendering context
- How to do it...
- How it works...
- There's more...
- You can master <canvas>
- X, meet Y
- Respect my authority!
- See also
- Processing shapes dynamically
- How to do it...
- How it works...
- There's more...
- Any way you want it
- Similar to tables?
- Be a square first
- See also
- Drawing borders for images using canvas
- How to do it...
- How it works...
- There's more...
- Style first
- Many color values work
- I like big borders and I cannot lie
- See also
- Rounding corners
- How to do it...
- How it works...
- There's more...
- Just like the Scholastic Aptitude Tests
- What about IE?
- We're laying a foundation
- See also
- Creating interactive visualizations
- How to do it...
- How it works...
- There's more...
- Evil of two lessors
- What about fallback content?
- Take him up on his offer.
- See also
- Bouncing a ball
- How to do it...
- How it works...
- There's more...
- Start again
- Don't box me in
- And that's one to grow on
- See also
- Creating fallback content
- How to do it...
- How it works...
- There's more...
- Thanks, Mozilla
- How will we deal with accessibility?
- Are we ready for <canvas>?
- 7. Interactivity using JavaScript
- Introduction
- Playing audio files with JavaScript
- Getting ready
- How to do it...
- How it works...
- There's more...
- Controlling the appearance of audio clips with jQuery
- See also
- Using the drag-and-drop API with text
- Getting ready
- How to do it...
- How it works...
- There's more...
- Create a canvas-based tic-tac-toe game
- Show responsive messages as the user plays
- See also
- Crossbrowser video support with vid.ly and jQuery
- Getting ready
- How to do it...
- How it works...
- See also
- Displaying video dynamically using jQuery
- Getting ready
- How to do it...
- How it works...
- There's more...
- More interactive explosions using video and canvas
- What's with all the explosions?
- Chroma key background replacement in real time
- See also
- Movable video ads using jQuery
- Getting ready
- How to do it...
- How it works...
- There's more...
- Have HTML element, will travel
- See also
- Controlling the display of images using Easel.js and the canvas tag
- Getting ready
- How to do it...
- How it works...
- See also
- Animating a sequence of images using Easel.js and the canvas tag
- Getting ready
- How to do it...
- How it works...
- There's more...
- Pirates Love Daisies and so should you
- The return of old school computer animation techniques
- See also
- Random animation with audio using the canvas tag and JavaScript
- Getting ready
- How to do it...
- How it works...
- There's more...
- Visualizing your audio with cutting edge browsers
- Pushing the implementation of audio in HTML5
- See also
- 8. Embracing Audio and Video
- Introduction
- Saying no to Flash
- How to do it...
- How it works...
- There's more...
- Some good news
- Video with style
- Cover your assets
- See also
- Understanding audio and video file formats
- How it works...
- There's more...
- Audio file formats
- File format agnosticism
- Can we stop the madness one day?
- Displaying video for everybody
- How to do it...
- How it works...
- There's more...
- A mime is a terrible thing to waste
- External "Video for Everybody"
- Be flexible with your approach
- See also
- Creating accessible audio and video
- How to do it...
- How it works...
- There's more...
- Always consider accessibility
- Browser support
- See more
- See also
- Crafting a slick audio player
- How to do it...
- How it works...
- There's more...
- Style and substance
- Being careful with details
- See also
- Embedding audio and video for mobile devices
- How to do it...
- How it works...
- There's more...
- Vimeo offers much more
- Coming full circle
- See also
- 9. Data Storage
- Introduction
- Testing browsers for data storage support
- Getting ready
- How to do it...
- How it works...
- There's more...
- Mobile testing
- Adobe browser lab
- Free cross-browser and OS testing with BrowserShots
- Using browser developer tools to monitor web storage
- Getting ready
- How to do it...
- How it works...
- There's more...
- Use a Firebug addon even if you don't use Firefox
- Safari developer tools are native to the Safari browser
- Setting and getting a session storage variable
- Getting ready
- How to do it...
- How it works...
- There's more...
- One browser, one session
- See also
- Setting and getting a local storage variable
- Getting ready
- How to do it...
- How it works...
- See also
- Converting local storage strings to numbers using parseInt
- Getting ready
- How to do it...
- How it works...
- There's more...
- Storing and retrieving arrays in localStorage
- Creating a Web SQL Database
- Getting ready
- How to do it...
- How it works...
- There's more...
- Web SQL may be replaced by SQLite
- Using a Web SQL database
- Getting ready
- How to do it...
- How it works...
- There's more...
- Save script code in a separate file
- Guard against SQL injection on production servers
- See also
- Creating a cache manifest for offline storage
- Getting ready
- How to do it...
- How it works...
- Displaying the current location using geolocation and geo.js
- Getting ready
- How to do it...
- How it works...
- Index