31,19 €
Mehr erfahren.
- Herausgeber: Packt Publishing
- Kategorie: Wissenschaft und neue Technologien
- Sprache: Englisch
WordPress is much more than just a blogging platform now. This flexible CMS is the power behind millions of URLs, including blue-chip companies, small business, and personal websites. Flash is a world-famous multimedia platform. This book will show you the best of the proven and popular strategies and techniques to deliver rich multimedia content, which will let you sail through the world of Flashy Wordpress with ease.This book will take you through clear well-formed and comprehensive recipes, through the most essential and useful Flash multimedia tools for Wordpress available today including plugins for images, audio and video, as well as projects you can do yourself in Flash. It helps you to create a Wordpress website full of Flash content. We show the big picture by providing context, best practices and strategies. Detailed instructions are provided for each section. This book provides you with the shortlist of the most essential Flash tools for creating a dynamic and media-rich website or blog, and shows you how to implement these on your site. The sections on Flash are intended to give you the option to create custom .swf files, giving you an alternative to plugins that already exist. The book will show you how to configure Flash content in your WordPress site/blog for maximum SEO, introduce Flash content to your Wordpress with and without plugins, import image feeds, use lightbox effects, and much more.
Das E-Book können Sie in Legimi-Apps oder einer beliebigen App lesen, die das folgende Format unterstützen:
Seitenzahl: 299
Veröffentlichungsjahr: 2010
Ähnliche
Table of Contents
Wordpress and Flash 10x Cookbook
Sarah Soward
Peter Spannagle
Wordpress and Flash 10x Cookbook
Copyright © 2010 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors, Packt Publishing, nor its dealers or distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.
First published: April 2010
Production Reference: 1140410
Published by Packt Publishing Ltd. 32 Lincoln Road Olton Birmingham, B27 6PA, UK.
ISBN 978-1-847198-82-2
www.packtpub.com
Cover Image by Vinayak Chittar (<[email protected]>)
Credits
Authors
Peter Spannagle
Sarah Soward
Reviewers
Ali Raza
Patrick Rushton
Sonia Munoz
Acquisition Editor
Usha Iyer
Development Editor
Chaitanya Apte
Technical Editor
Ajay Shanker
Indexer
Monica Ajmera Mehta
Editorial Team Leader
Akshara Aware
Project Team Leader
Lata Basantani
Project Coordinator
Srimoyee Ghoshal
Proofreader
Joel T. Johnson
Production Coordinator
Adline Swetha Jesuthas
Cover Work
Adline Swetha Jesuthas
About the Authors
Peter Spannagle is a WordPress consultant, technology trainer, and Web 2.0 designer. His skills include client-side coding, graphic and web design, and SEO. He also offers online marketing, training, and support services. With twelve years experience as a technology contractor, he will help you meet your goals and strives to exceed your expectations.
His professional experience includes working as the Manager of Marketing and Online Services for Youth Service California and as a Quality Rater for Google. He was also fortunate to work as part of the fabrication team for Sky Mirror (a thirty-ton stainless steel sculpture) designed by Anish Kapoor and built by Performance Structures, which debuted at the Rockefeller Center in 2006.
YourCustomBlog.com (YCB) began in 2007 to provide quality WordPress consulting services in the San Francisco Bay Area. Over the past three years, YCB has grown to servicing clients around the country and around the world.
YCB contract clients include: Singularity Hub, Sharam, The Hidden World of Girls (for the Kitchen Sisters, a segment on NPR Morning Edition), Street Soldiers Radio (on 106 KMEL San Francisco), Ustream.TV, Innovation Center Denmark (Silicon Valley), San Francisco Dream Wedding Giveaway, Legal Services for Children, The Children and Nature Network and the San Francisco Day School.
Visit my website: http://yourcustomblog.com or contact me at: <[email protected]>
I would like to thank:
My co-author, Sarah Soward
My clients, for the opportunity to assist them
My family and friends
My mentors at UC Santa Cruz and UC Berkeley
The Bay Area Video Coalition
The Flow Yoga Teacher Training program and participants
D.K. Chakravarty, Ayurvedic chef
Numi Tea and Mama Buzz
The Bolivarian Republic of Venezuela
Sarah Soward develops curriculum for and teaches the Adobe Creative Suite and design theory at the Bay Area Video Coalition (http://www.bavc.org). She has over five years experience as a technology trainer and is Adobe Certified. She specializes in creating web and print collateral for small businesses and non-profits. She is the Art Director for The Pagan Alliance, a non-profit organization, and a working fine artist (oil painting and drawing). In addition to teaching Flash, she is also an expert in the use of Dreamweaver, Fireworks, Photoshop, Illustrator, and InDesign. You can reach her at <sarahsoward.com>and <rhinotopia.com>
My Flash experience and teaching experience have come from a variety of sources. I certainly could not have done any of this without Adobe and their wonderful resources for ActionScript and Flash CS4. On that note, thanks also to Abigail Rudner. She demystified ActionScript 2.0 for me when I was first learning Flash and made my SWF’s functional as well as fun.
Rose Adare gets a huge thank you for putting me on this path with the Bay Area Video Coalition (BAVC) and technology training in general. She taught me how to teach. That skill is one of the most valuable pieces of my life.
Thank you to BAVC for believing in me and keeping me and my quirky handouts around all these years.
Of course, my profs @ The California College of the Arts get props.
My Mom. I know it isn’t a complete sentence. It says all it needs to say: My Mom. It’s like stop(); can be this.stop(); but may not need all the extra characters to be just perfect even if it is more thorough.
Happy expressions of gratitude go out to Chris O’Sullivan, Michele Jones, their living room floor, and gluten-free donuts. Kristie Bulleit Niemeier and her dissertation progress postings get a nod as well.
Thanks to every client who ever insisted that I make something cool for them.
Finally, thanks to the man who shared this project with me: Peter Spannagle. He makes a mean cup of tea.
About the Reviewers
Ali Raza is a fresh and invigorated aspirant in the field of design, development, and authoring. He became part of the IT field at quite an early age and worked up from designing business cards, flyers, books, websites, digital maps, software interfaces, and almost all design-related things to audio and video editing, animation, and even minor 3D modeling in Autodesk Maya. Later, playing with code became his passion that compelled him to work in various programming languages including C++, Java SE, ActionScript 3, and PHP.
Ali is pursuing a Master of Science degree in Computers. He is also an Adobe Certified Instructor, Adobe Certified Expert, and Sun Certified Java Programmer.
He is currently a senior developer at 5amily Ltd., a London-based forthcoming genealogy-related social networking-rich Internet application. Previously, he has worked with different national and international advertising, telecommunication, and IT firms.
Ali is authoring an Adobe Flex 3 with AIR exam guide from the platform of ExamAids. He is also a regular author in Flash & Flex Developer’s Magazine, writes project-based articles predominantly on Data Visualization, and also loves writing book reviews.
In his spare time, you will either find him engulfed in design and development-related books, or find him envisaging about the accomplishment of series of certifications in ACE Flash and ACE Dreamweaver after his masters.
I would like to express my gratitude to Packt Publishing and the authors for bringing such a wonderful title. I would also like to thank to Reshma Sundaresan, Srimoyee Ghoshal, and Chaitanya for giving me the opportunity to review this unique book. You can contact me at <[email protected]>.
Sonia Munoz is a web programmer in Valencia, Spain. She has completed her upper-Computer Systems Management and is now studying the upper development of computer applications where she is learning the Java programming language. She has worked with tools such as PHP, MySQL, HTML, CSS, jQuery, JavaScript, CodeIgniter, Joomla, Photoshop, and Dreamweaver, but is willing to learn new programming languages.
After completing her studies, she would like to start their own web development business.
Besides this book, she revised Joomla! with Flash.
For Manu, Martha, and my parents.
Patrick Rushton is a user-experience designer living in Amsterdam. He works as an Interaction Director at communications agency Dynamic Zone where he uses Flash to create brand-building online experiences that combine interactivity, motion graphics, gaming, and 3D. He blogs about web design, music, 3D modeling, and interactive television on his website, http://www.patrickrushton.com.
Preface
This book helps you create a contemporary, functional, and memorable site. Detailed instructions are provided for each section. We show the big picture by providing context, best practices, and strategies.
>Learn how to work with XHTML in WordPress, configure WordPress for maximum SEO, edit theme template files, and back up your site. Our crash course in theme customization provides you with an introduction to CSS, WordPress theme hierarchy, and template tags.
More than 7,000 plugins currently exist for WordPress. We provide you with a shortlist of essential tools for creating a dynamic and media-rich website or blog, and show you how to implement these tools on your site.
The sections on Flash are intended to give you the option to create custom .swf files, giving you an alternative to plugins that already exist.
What this book covers
Chapter 1 helps you develop a strategy to use Flash in your WordPress blog. Learn how to embed a .swf manually or by using a plugin.
Chapter 2 demonstrates how to set up and work with WordPress, including creating posts and pages, and editing .php theme templates. We offer strategies for configuring WordPress and ways to extend the admin tools via plugins. By the end of the chapter, the user will be able to effectively use WordPress as a Content Management System (CMS) and in conjunction with Flash.
Chapter 3 shows you ways to share individual images and collections of images as thumbnails, galleries, and slideshows—using WordPress or working in Flash.
Chapter 4 shows you how to use video plugins, including video players, embed .flv and .swf files, and video blogging. Encoding through the use of the Flash Media Encoder for reduced file sizes and creation of .flv files is covered along with using Flash's default skinning options and editable video components.
Chapter 5 shows you how to work with audio in WordPress and in Flash. Topics covered include using a Flash audio player and creating a podcast as well as how to design your own unique audio player in Flash.
Chapter 6 explores a broad range of applications including unique ways to display your tags, how to use fonts outside of the limited set of web-only fonts, quote rotators, ad management, scrolling RSS feed displays, and more.
Chapter 7 presents an in-depth look at each of the three elements that WordPress themes are made up of: CSS stylesheets, template files, and template tags. We then apply this knowledge by customizing the default Kubrik theme.
Chapter 8 covers creating your own Flash animations for your blog. The focus here is on animating in the Flash timeline and helping you with the fundamentals of Flash animation.
Appendix A covers WordPress resources.
Appendix B covers Flash resources.
Appendix C covers shortcut keys.
Appendix D gives you a few tips on site planning.
What you need for this book
You will need a working installation of WordPress 2.8.6 or later and Flash.
Who is this book for
This book is for WordPress users interested in learning how to create a unique and media-rich site using plugins and Flash. Strategies and techniques presented are appropriate for both personal and business blogs. The intended audience has intermediate technology skills, such as a working knowledge of XHTML, CSS, and graphic design. Some familiarity with WordPress is required, as we do not address the basic mechanics of using WordPress. Previous experience with Flash is helpful but not required.
The book is written with the following users in mind:
Reader Feedback
Feedback from our readers is always welcome. Let us know what you think about this book, what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.
To send us general feedback, simply drop an e-mail to <[email protected]>, making sure to mention the book title in the subject of your message.
If there is a book that you need and would like to see us publish, please send us a note in the SUGGEST A TITLE form on www.packtpub.com or e-mail <[email protected]>.
If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.
Customer Support
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
Downloading the Example Code for the Book
Visit http://www.packtpub.com/files/code/8822_Code.zip to directly download the example code.
Note
The downloadable files contain instructions on how to use them.
Errata
Although we have taken every care to ensure the accuracy of our contents, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in text or code—we would be grateful if you would report this to us. By doing this, you can save other readers from frustration, and help to improve subsequent versions of this book. If you find any errata, report them by visiting http://www.packtpub.com/support, selecting your book, clicking on the let us know link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata added to the list of existing errata. The existing errata can be viewed by selecting your title from http://www.packtpub.com/support.
Piracy
Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works in any form on the Internet, please provide the location address or website name immediately so we can pursue a remedy.
Please contact us at <[email protected]>with a link to the suspected pirated material.
We appreciate your help in protecting our authors and our ability to bring you valuable content.
Questions
You can contact us at <[email protected]>if you are having a problem with some aspect of the book, and we will do our best to address it.
Chapter 1. Leveraging Flash in WordPress
In order to set up the self-hosted version of WordPress (WP), you need a host that supports PHP (v.4.3+) and MySQL (v. 4.1.2+). If you want to set up multiple WordPress installations (or use other database-driven software), you will probably want a host that offers multiple MySQL databases.
Note
We suggest a Linux-based (Apache) server. Make sure you get enough storage—at least 1GB. Additional utilities that are helpful for WordPress-based sites include PHPMyAdmin (for working with your database) and SimpleScripts (for installing and updating WordPress).
In this chapter, we will cover:
Developing a strategy to use Flash & WordPress
Identify your user level and a specific application. Develop an SEO strategy. Determine what files need to be configured and modified to achieve your goals.
Getting ready
There are an unlimited number of ways to use WordPress and Flash together. The needs, ideas, and abilities of no two users will be the same. The limits are determined by you—by your skill level and the goals you set.
The first step is to identify your level of familiarity with the Web and Multimedia design software. Be honest in your self-assessment—and don't be discouraged, no matter where you are starting today. Understanding your user level allows you to set reasonable expectations. Take a look at the following figures to understand your user level. With practice and experience, by accessing the many free resources available online and through training tools (such as this manual), you will increase your level of proficiency.
You may be a new blogger, or may have been blogging for years. You may be an admin user supporting a team using WP for business or organizational needs, a theme designer, or a plugin developer. This book is written with you in mind, assuming that you are familiar with WP basics, or are willing to become so.
How to do it...
Flash takes care of your dynamic media needs, and WordPress makes it easy to administrate your site. The way to use them together is with SEO in mind.
In terms of density of information presented to a search engine, Flash is not as effective as XHTML, in spite of recent advances. A Flash animation can have a description tag, however, properly marked up XHTML that uses<h1> and<h2> to emphasize keywords and phrases, as well as including links to and from authoritative sources, will still have more SEO value when compared to a .swf.
Many industries and audiences expect or require Flash animations. Your marketing and SEO strategy should determine how you mix WordPress and Flash. The goal is content that people can read and enjoy that is also understood by engines and robots. For those of us who administer or develop websites, ease of use is also a consideration.
How it works...
In your design, when blocking in space for animations, consider how they are both dynamic and static. An animation does what it does, however lovely it is, and nothing more. Once a user has seen the animation, there is often no reason to pay attention to it again. WordPress offers dynamic content—areas of the page that highlight and excerpt the most recent content from different areas. This encourages users to revisit and explore your site for new content and to pay special attention to dynamic content areas. While an animation measures change in frames per second, WordPress allows your users to measure the changes made since their last visit. In this sense, Web 2.0 represents a true change in technology—transforming the screen itself into an animation that you program—simply by publishing new content.
So, some Flash is almost always fine. But too much Flash is less useful to search engines, relative to XHTML. Additionally, Flash animations generally take more time to update than regular WordPress content.
There's more...
There are other ideas about how to combine Flash and WordPress, which we will touch on in later and more advanced chapters. Our approach should be applicable to the majority of users.
Where to place the .swf?
Flash media can be included anywhere in a WordPress theme: in the header, in a post or a page, in a sidebar, or in the footer. It takes some time to become familiar with your theme files—determining which PHP templates are called when different parts of the screen are clicked. An overview of how WordPress works is useful.
A theme has at least three views, which represent the steps to a given piece of information, moving from home page to a category to a post.
A WordPress home page is traditionally a dynamic display of updates from interior sections (like a dashboard). It can also be a static page. It's often named index.php or home.php.
The category archive view is a dynamic display of the posts in a category. It sounds complicated, but it is logical. When a user clicks on a category, not one piece of information is returned, but many. This template is called category.php.
The archive view is so named because, though this piece of information may be featured in other parts of the site, the user has now arrived at the URL for an individual post. The URL can be used in links or bookmarks to refer back to this specific piece of information. Typically, the format is a long-reading pane.
page.php, sidebar.php, header.php, and footer.php work just like you'd think.
Edit and debug with Firebug
Knowing which PHP templates create pages on your blog is the first step to inserting a Flash animation directly into theme files. The next step is to determine specifically which<div> will contain the animation. Firebug helps us match up the correct<div> tag with the correct PHP template.
Get Firebug here: http://getfirebug.com/
Firebug is an add-on for Mozilla Firefox. This handy tool allows you to see the CSS and XHTML that make up any page by context-clicking (right-click in Windows or Ctrl-click for Mac) and choosing "Inspect Element." The window splits at the bottom. Bring your mouse down to the bottom-left pane. Hovering over a<div> tag causes the screen to be highlighted: blue for<div> width and height, purple for margins, and yellow for padding. Clicking on the blue <div> tag loads the bottom-right pane with entries from the CSS stylesheet that control its appearance. It is helpful to have such a visual representation to understand the structure of a site.
Note
Viewing the source (PC: Ctrl-U/Mac: Cmd-Opt-U) of a WordPress blog can be a confusing experience. Keep in mind that the XHTML output is different than the component PHP. Your templates are not what you see when you "View Source"—rather, you are seeing the result of dynamic PHP calls as XHTML, styled according to CSS. This is what makes WordPress dynamic—there are no webpages. There are only PHP templates waiting to output your website, recreated each time as the most recent content.
Additional utilities
There are additional utilities we will be using throughout this book; a FTP client and a text editor are required for intermediate to advanced applications. Dreamweaver is an excellent tool for coding, if you have it. A fast running stand-alone text editor specific to coding has its own merits. Here are open-source utilities for Mac and for PC:
FTP Client: FileZilla, http://filezilla-project.org/download.php
Text Editor: Windows comes with Notepad and Mac has TextEdit, but these text editors are not set up to code for the Web. A text editor for coding gives you access to many additional tools and options, such as line numbers, keyboard shortcuts, and auto-formatting.
See also
Embedding Flash .swf files in WordPress
The most basic and fundamental way of using WordPress and Flash together is to insert an animation. The steps are:
WordPress makes it easy to embed a .swf—here, we provide an in-depth review of the Kimli Flash Embed Plugin, (version 2.0.2) based on Swfobject 2.x.
If you do not have an animation to begin with, this section uses a sample Flash animation, found in theChapter 1 folder.
Getting ready
WordPress displays Flash the same as any other web page—through Flash Detection. Flash developers use swfObject 2.x and JavaScript for Flash Detection. Otherwise, non-specialists can use one of a variety of plugins to embed Flash media (SWF or FLV). Kimli Flash Embed is among the best of such plugins.
The easiest way to embed Flash in WordPress is through the plugin "Kimili Flash Embed for Wordpress."
http://kimili.com/plug-ins/kml_flashembed/wp
"Built upon the SWFObject javascript code, it is standards compliant, search engine friendly, highly flexible and full featured, as well as easy to use." Quoted from http://kimili.com/plug-ins/kml_flashembed/#usage (2009).
How to do it...
Installing Kimili Flash Embed (KFE) on your WordPress site is simple.
Note
To add a Flash animation, use the following shortcode, replacing path, y and x parameters with the respective path, height, and width of your swf:
[kml_flashembed movie="/path/to/your/movie.swf" height="y" width="x" /]
That's it! You have now inserted your first Flash animation inside WordPress. It's easy to do through the shortcode or the KFE Tag Generator. Open another tab (PC: Ctrl + T /Mac: Cmd + T) to confirm:
How it works...
Three main sections comprise the KFE Tag Generator: SWFObject Configuration, SWF Definition, and Alternative Content.
Configuration options are covered in more detail in the following section, Adding Flash Detection with SWFObject 2.x. Please see the How to do it... section.
Adding Flash detection with SWFObject 2.x
Detect which version of the Flash Player a viewer has available and supply alternative content in the event that the necessary Player is not available. The alternative content, in this case, will be a link for the viewer to acquire the appropriate Flash Player, if desired. To assist in expressInstall of the Player, the .swf will be registered with SWFObject. This method of setting up Flash Player detection does not require the use of a plugin and gives you easy and direct access to the generated code.
SWFObject 2.x is an open-source application brought to you by Google. To view the open-source license for SWFObject 2.x, please visit http://www.opensource.org/licenses/mit-license.php. For further information on SWFObject and for another download source for the files needed to enable it to work, please visit http://code.google.com/p/swfobject/.
For supplemental information regarding SWFObject 2.x from Adobe, please visit http://www.adobe.com/devnet/flashplayer/articles/swfobject.html for an article entitled Detecting Flash Player versions and embedding .swf files with SWFObject 2.0, created by Bobby Van Der Sluis.
Getting ready
In theChapter 1 folder, make sure that you have access to the following files: swfobject_test.swf, expressInstall.swf, swfobject.js, and detection_generator.htm. They are located inside the Detection with SWFObject folder.
Move the swfobject_test.swf, expressInstall.swf, and swfobject.js files to the root level of your theme folder. Technically, the .swf you are embedding can be located anywhere, as long as you use the absolute URL in your code.
The detection_generator.htm file holds the open-source application that generates the necessary Flash Player detection code for you to put into your PHP template.
