Foundation Dev Blog: Video

We're happy to announce the wide-scale release of Foundation Mobile Web 2.0 being under way. We've been upgrading sites daily and will be continuing through next week until everyone has been upgraded.

If you haven't already, please shoot us a reply to our launch preparation request that was recently mailed to your team by Ryan Murphy (ryan@desert.net).

If you did not see that email, let us know and we'll resend it, or we can also initiate your launch using the default settings.

For more details on what's included, we've put together an overview of many of the features that we're excited about:

GENERAL FEATURES
———————

* Framework - We've merged Foundation's component framework with the jQuery Mobile framework to provide a powerful rapid-development environment that is supported across numerous mobile platforms (iOS, Android, Blackberry, and more).

* Comments - A full commenting system is now in place. The commenting system also supports like and dislike functionality. If a user is logged in, their comment will immediately post. If not, they'll be presented with a login,

* Logins - We've designed a mobile specific login interface that supports Facebook logins, publication based logins, password reminders, and account creation.

* Video Support - Videos are presented and will be viewable based on the mobile device's capabilities. In short, this typically means that You Tube videos will work, but most others won't. This will independently change over time as video content providers transition to HTML5 video players.

* Audio Support - Audio will typically fair better than video. We have added a HTML5 audio player to support localized MP3 based audio links. Audio content providers are also moving towards HTML5 audio players.

* Search - Integrated into the top of every page.

MOBILE-LEVERAGING FEATURES
—————————————

* Mobile Detection - Automatically routes mobile users to the mobile interface when they access the web homepage. This is also a preference that can be controlled.

* Switch to Desktop Button - A clear button in the footer of each page to allow a user an easy way to get to the desktop view should they prefer it. In addition, a cookie is saved when a user does this so that their viewing preference is saved.

* Comment Tagging - Comments are now also tagged by their source so that it will be known if the comment came from mobile or not. We are doing this for two reasons: 1) to alert readers that it was a mobile comment and in theory they'll then be kinder to the creative autocorrect typos that may surface in some mobile comments, and 2) to simply promote the existence of mobile commenting to help get the word out that this is now an available option.

* Bookmark Bubble - A dynamic tool-tip-esq bubble that encourage users to add a bookmark on their mobile desktop.

* Mobile Leaderboard Ad Support - Our recommendation are footer only ads, but header and footer placement are both available on every page.

HOMEPAGE
————

* Top-Buttons/Icons - The row of "buttons" or "icons" across the top is fully customizable. This is to drive your most sought after mobile links such as Restaurants, Music, Calendar Events, and Film Times. In all cases, the button, link, link-phrase, and sequence of buttons are customizable.

* List Links & Components - The list on links below the top buttons are all customizable as well. Our default links focus primarily on article-based content such as blogs, current issue, best ofs, article and issue archives. What appears here is also customizable:

- You can use the Link class to add any link, with any phrase, description, image or icon.

- We can also customize components for you to tease any data you'd like in this area, in any sequence within, above or below the links. For example, the "latest issue" and "cover story" each match and display the latest images for those ideas.

FILM TIMES (if applicable)
—————————————

* Films by Movie - A listing of films currently playing. The default sort is by Release date with the recently opened films up top. Additional sorts can be accessed in the header including a sort by Genre, MPAA rating, and alphabetical.

* Theater Listing - A listing of nearby theaters. Additional sorts can be accessed in the header including an alphabetical listings and a sort by neighborhood.

* Films by Time - A presentation of films by time so you can literally see what's playing now, or what just started (it defaults to 15 minutes ago).

* Synopsis Toggle - In the header is an option to toggle the synopsis on or off for each film. This uses the short film review if stored with the film, or it falls back to the synopsis provided by your Film Times vendor (Cinema Source or Tribune Media Services).

* Film Page - The film page presents the basic information about the film including rating, time, genre, poster image, synopsis / short review, official site, director, producer, cast, share buttons, and no playing times.

* Theater Page - The theater page presents the address, direction link, phone number link, URL link, reviews of the theater (if they exist), and a list of the films playing at the theater. Other links like Best Ofs and Related Stories or Events will also display if they exist.

LOCATION/DINING LANDING PAGE (we'll showcase the Restaurants view here)
———————————————————————————————————-

* Top Links - The top links include Top Rated, Nearby, Browse by Neighborhood. These links are similar to the homepage links and support icons, copy changes, position changes, and expansion.

* Browse by Category - A listing of categories and the number of restaurants matching that cuisine. Clicking on these links will display the nearby restaurants in this cuisine.

LOCATION SEARCH RESULTS
———————————-

* Sorts - The default sort is Nearby. Additional sorts include Price, Top Rated, and A to Z. In some cases, a reverse sort toggle is supported such as Price.

* Location List - The location list presents the location name, feature icons, distance, rating, price range, address, neighborhood, and link to the location.

* Details Button - A details button at the top expands the location list to present additional information including hours, descriptions, and recent reviews.

* Filters - If you click the top header you can also filter your results by category, neighborhood, or feature. Options relevant for the search at hand are presented.

LOCATION
————

* Directions link - A link to Google Maps which will load up the Google Map App on most smart phones.

* Phone - A link that will dial the phone when clicked.

* Plus lots more - URL link, Email link, description, dining details, user rating, hours, price, features, payment type, images, related stores, related events, share links, reviews, and ability to post a review.

EVENTS LANDING
———————

* Choose Date - Ability to choose a specific date, plus some pre-set options including Today, Tomorrow, This Weekend, Next 7 Days, Next 30 Days, and All Dates.

* Landing Page Top Links - Similar to locations, customizable landing page links including the core defaults of Staff Picks, Nearby Today, and Today Only.

* Category Links - Links to specific event categories (or sections). Clicking a category will take you to the search results. The default sort is By Date.

EVENTS SEARCH RESULTS
——————————-

* Choose Date

* Sorts - The default sort is By Date. Additional sorts are Nearby, Staff Pick, and A to Z. As with location, some sorts support a reverse sort such as A to Z.

* Events List - The event list presents the event title, feature icons, distance, date, and location.

* Details Button - A details button at the top expands the location list to present additional information include and event descriptions.

* Filters - If you click the top header you can also filter your results by category, neighborhood, or feature. Options relevant for the search at hand are presented.

EVENT
——-

* Event Title, Date and Description.

* Link to the location

* Link to get directions

* Social buttons

* Related stories and reviews if relevant.

BEST OF (where the module's in use)
—————————————————-

* Link to Best of Section and Category lists.

* Best of Page - Presents the best of category, location and distances (if relevant), best of article, comments, tags, previous winners in that category, comments, related links, and more.

* Paging Navigation - Once within the best of, there are page forward and back buttons at the top and bottom of the page to allow a user to page through any particular section.

ISSUE ARCHIVES
———————

* Listing of Issues - A list of each issue (reverse date sorted). This includes the issue cover and run date.

* Table of Contents - Clicking on an issue will display the table of contents for that issue broken out by section.

* Table of Contents Paging Navigation - From the table of contents, you can page to the previous or next issue and continue browsing table of contents pages.

* Article - When you select an article, it will present the article, images, share links, tags, comments, related links and more.

* Issue Paging Navigation - When viewing an article within an issue, page forward and back links will also be presented so a user can literally thumb through the issue.

ARTICLE BROWSING
————————

* Browse by Section or Category.

* Category List - Once you make it into a category, you'll see all of the articles within that category including the headline, image, summary, byline, and date. The category list is also easily customizable via the category's "special placement" value of "mobile". If you'd like to hide or not display a category in this list, simply uncheck "mobile" on the category you want to pull.

* Article Sorts - The default sort is By Date but you can also sort by comments, shares, and views.

* Paging - Similar to the issue paging, when viewing a category in the archives, you can page to the next article in that category. This is ideal for reading a particular column you like.

BLOGS
——-

Much of the functionality you'll see within blogs are the same as with other data above, but there are a few additional items of note.

* Blog Posting Time - When viewing the blog, it will state what time it was posted, yesterday, or a date. In admin mode, it will also present scheduled postings in this list as well.

* Browse by Topic - In the blog header, you can choose from a list of topics and browse the blog by topic.

* Comments - We touched on this above, but it will likely see the highest action in blogs so we wanted to reiterate it here.

—-

That's Foundation Mobile 2.0 in a nutshell.

Thanks again!

p.s. "One more thing..." (I couldn't resist) Here's a sneak preview of Mobile Restaurant Menus. This is a release that will follow the widescale mobile rollout release. We're pretty excited about this one as it's fantastic content and it's also additional page and ad views. For reference, we were able to provide menus for over 60% of Tucson Weekly's restaurant guide in our beta and are working on getting that number up even further.

* A new mobile "Posts" tab has been added to the mobile HTML interface. It presets both Blog Posts and Articles.

http://m.clevescene.com/cleveland/ArticleArchives?show=blogs
http://m.clevescene.com/cleveland/ArticleArchives?show=articles

* The Posts tab defaults to the last 30+ Posts and Articles. It then presents a "More "link that pulls in additional Posts/Articles inline without reloading the page. Note: The default amount of Posts/Articles displayed can be independently changed by modifying the "Max Count" field in the "Article List Mobile" component and the "Blog Posts List Mobile" component.

* When viewing an Article or Blog Post, a Previous and Next link is presented at the top and bottom of the page to help page through the Posts.

* To fit a mobile screen, all images are dynamically resized on the backend to 120 pixels wide (standard images) or 300 pixels wide (magnum images).

* Videos are also resized down to 300 pixels wide to fit a mobile screen. Note: mobile phone support of video is a bit hit and miss with YouTube and Vimeo generally being the most widely supported.

http://m.tucsonweekly.com/tucson/now-showing-at-home/Content?oid=2193299
http://m.tucsonweekly.com/TheRange/archives/2010/09/10/tammies-videos


* Numerous mobile layouts have been created including Blog Post, Story Page, Archive lists, Mobile Comic layout, and more.

* A link to the Blog FAQ has been added to the Blog Admin interface.

* A patch has been run to make all of the new mobile layouts discoverable to mobile browsers of your site.

Video and Image Archive Enhancements
——————————————————

* The Video Spotlight component has been updated to link to the Video Archives.

* A link to the Image Archives has been added to the Other Searches component.

* A link to the Video Archives has been added to the Other Searches component and will dynamically display if your site has videos.

Location Related
————————

* The Topic field has been added to the Location class.

* The Location Search now includes a narrow by Topic option.

Member Related
———————-

* Topic and Tag fields have been added to the Member class.

* Added the ability for members to select Topics for their profile. To enable this, create a new Topic or edit an existing Topic and flag it with a Special Placement of "Member". Repeat this until you have all of the Topics you would like. Having one or more Topics flagged this way will cause the the Edit Profile Settings page to present the list of Topics to select from.

* Added the ability for members to enter Tags on their profile.

* Added a member component that displays the member's "Interests" (Topics and Tags they select). The interests will click through to the Member Search to show other members with similar interests.

* Added the ability to browse the Member Search by Topic.

Miscellaneous
——————-

* Added support of link rel="image_src" to help with Facebook, Digg, and other sharing sites discover the appropriate image when sharing articles, locations, events, and other pages.

* Added a PDF icon to blogs when linking to PDFs. The default icon can be customized via the stylesheet. Please contact support@desert.net if you have any questions.

* Added supporting images to Foundation Blog release notes posts. This will hopefully help showcase new features a bit more, and minimally it will break up the wall of text.

Comment Archives
————————

A new Comment Archives layout has launched. To view it go to:

http://www.yoursite.com/gyrobase/CommentArchives

You can replace "gyrobase" with your city name as used in other URLs.

Here an example:

http://www.boiseweekly.com/boise/CommentArchives?feature=Stories

The key features are:

* The Comment Archives can be browsed by Comment Features which currently include: Events, Locations, Stories, Slideshows, and Polls. They can also be narrowed down by content section and category, location section and category, and event section and category where relevant.

* The Comment Archives also support a narrow by date feature including All Dates, Today, Last 7 Days, Last 30 Days, or a user selected Date Range.

* We've set up what we believe to be the proper ad spots and core site elements on your image archive layout but we would recommend proofing them to confirm they are as you'd like.

Note that some publications had existing comment archives interfaces. We'll be in touch with you independently to update links and transition to the new interface.

Miscellaneous
——————

* Added a Status field to EventCategory to allow for hiding EventCategories when they have gone dormant.

* Added additional audio file detection in Blog Admin interface.

* Added RSS support for film reviews in the Film class.

* Added chooser to Tags field to make it easier to pull up pre-existing tags in the object editor. To use this, simply click on choose next to the field and an index of all of the tags you've used in the past will be presented.

* Tags normalizer available. If you'd like to enable a setting to compare new tags against old tags to keep them in synch and normalized, please let us know.

• Source: Tucson Weekly
• Video Archives

Video Archives
———————

The Video Archive Gallery has launched. To view it go to:

http://www.yoursite.com/gyrobase/VideoArchives

You can replace "gyrobase" with your city name as used in other URLs.

Here's an example:

http://www.memphisflyer.com/memphis/VideoArchives

The key features are:

* The archives can be browsed by Video Features which currently include: Events, Locations, Stories. The feature list can be expanded.

* The archives can be browsed by content section and category, location section and category, and event section and category.

* The video displays at the top and can be resized as needed to adapt to your specific video archive layout. To change the default width, edit the featuredVideoWidth in the Featured Video component.

* By default, the featured video will play the latest video with a SpecialPlacement of "Featured". If no videos are flagged as Featured, it will default to the latest video matching that search criteria.

* The video displays the title, caption, author, post / read comments link, and tags.

* Related stories, related events, related locations, related films, and related videos will also displayed when viewing a video.

* Under the hood, videos will automatically set RelatedVideo links to other videos in the same object. All past data has been patched.

* Browsing the thumbnails in the video archives uses AJAX to allow the user to browse through the archive more efficiently.

* When a user selects a video, the page will reload to display the video and new ads on the page. The position in the video archives will be preserved so the user can continue browsing the archives after they watch the video.

* The video archives will display the video teaser image when present. If the teaser image isn't present, the archive will fall back to the parent object (story, event, location etc). If no image exists there either, a default video image will be displayed.

* The default video image can be customized. It should be 100 x 75 pixels, and named default_video.jpg. Please place the image in /images/default_video.jpg

* To help gather still images for the archives, the all done templates in the object editor now display the Video image and title that will be used as well as edit links to modify them.

* The video archive uses the Video Archive Layout and can be customized like any other layout.

* We've set up what we believe to be the proper ad spots and core site elements on your video archive layout but we would recommend proofing them to confirm they are as you'd like.

* A new rescaleObject function has been set up for component developers to easily rescale a video object to any width. Please see /foundation/Components/FeaturedVideo.html for an example of usage.

<evInclude template="/Tools/RescaleObject.html">
<evFunction.rescaleObject object="<evThis.Body>" rescaleWidth="580">

Once you kick the tires, we highly recommend adding a link to the Video Archives in your core site navigation where appropriate.

Please contact support if you have any questions on setting this up.