home *** CD-ROM | disk | FTP | other *** search
/ developer.apple.com / developer.apple.com.tar / developer.apple.com / safaridemos / movie-trailers.php.orig < prev    next >
Text File  |  2010-08-17  |  14KB  |  287 lines
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html lang="en-us">
  3. <head>
  4.     <title>Movie Trailers - Safari Dev Center - Apple Developer</title>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6. <meta http-equiv="pics-label" content='(pics-1.1 "http://www.icra.org/ratingsv02.html" l gen true for "http://www.apple.com" r (cz 1 lz 1 nz 1 oz 1 vz 1) "http://www.rsac.org/ratingsv01.html" l gen true for "http://www.apple.com" r (n 0 s 0 v 0 l 0))'>
  7. <meta name="Author" content="Apple Inc.">
  8.  
  9. <meta name="viewport" content="width=1024">
  10. <link rel="stylesheet" href="http://devimages.apple.com/assets/styles/base.css" type="text/css" charset="utf-8">
  11. <link rel="stylesheet" href="http://devimages.apple.com/assets/styles/adc.css" type="text/css" charset="utf-8">
  12.  
  13. <script src="http://devimages.apple.com/assets/scripts/lib/prototype.js" type="text/javascript" charset="utf-8"></script>
  14. <script src="http://devimages.apple.com/assets/scripts/lib/scriptaculous.js" type="text/javascript" charset="utf-8"></script>
  15. <script src="http://devimages.apple.com/assets/scripts/browserdetect.js" type="text/javascript" charset="utf-8"></script>
  16. <script src="http://devimages.apple.com/assets/scripts/apple_core.js" type="text/javascript" charset="utf-8"></script>
  17. <script src="http://devimages.apple.com/assets/scripts/search_decorator.js" type="text/javascript" charset="utf-8"></script>
  18. <script src="http://devimages.apple.com/assets/scripts/adc_core.js" type="text/javascript" charset="utf-8"></script>
  19. <script type="text/javascript" charset="utf-8">
  20.     document.write('<link rel="stylesheet" type="text/css" href="http://devimages.apple.com/assets/styles/script.css" media="screen">');
  21. </script>    
  22.     <link rel="stylesheet" href="/assets/styles/devcenter.css" type="text/css" charset="utf-8">
  23.     <link rel="stylesheet" href="/safaridemos/styles/demos.css" type="text/css" charset="utf-8" />
  24.     
  25.     <script type="text/javascript" src="/safaridemos/scripts/demos_browsercheck.js"></script>
  26.     <script type="text/JavaScript">
  27.         Event.onDOMReady(function() {
  28.             new viewDemo($$('.popup-link'));
  29.         });
  30.     </script>
  31.     <!--[if IE]>
  32.         <script>
  33.             document.createElement("audio");
  34.             document.createElement("header");
  35.             document.createElement("footer");
  36.             document.createElement("nav");
  37.             document.createElement("article");
  38.             document.createElement("section");
  39.         </script>
  40.     <![endif]-->
  41.     
  42.     
  43. </head>
  44. <body id="demos" class="detail devcenter safari">
  45.     <div id="globalheader">
  46.     <h1><a href="/">Apple Developer</a></h1>
  47.     <ul id="gh-nav">
  48.         <li id="gh-nav-technologies"><a href="/technologies/">Technologies</a></li>
  49.         <li id="gh-nav-resources"><a href="/resources/">Resources</a></li>
  50.         <li id="gh-nav-programs"><a href="/programs/">Programs</a></li>
  51.         <li id="gh-nav-support"><a href="/support/">Support</a></li>
  52.         <li id="gh-nav-membercenter"><a href="/membercenter/">Member Center</a></li>
  53.     </ul>
  54.  
  55.     <div id="gh-search">
  56.         <form action="/cgi-bin/simpsearch.pl" method="post" accept-charset="utf-8"><div>
  57.             <label for="gh-adcsearch">Search Developer
  58.                 <input type="text" name="Search" id="gh-adcsearch" class="adcsearch prettysearch">
  59.             </label>
  60.         </div></form>
  61.     </div>
  62.     <script type="text/javascript" charset="utf-8">
  63.         Event.onDOMReady(function() {
  64.             // Get root path for Global Header Active class
  65.             ghLocation = location.pathname.split('/')[1];
  66.             // Make sure it doesn't try to add a file extension to the css class
  67.             if(ghLocation.include('.')) ghLocation = ghLocation.split('.')[0];
  68.             // Add Global Header Active State Class
  69.             $$('body')[0].addClassName('gh-nav-'+location.pathname.split('/')[1]+'-active');
  70.         });
  71.     </script>
  72. </div>
  73.     <!-- SiteCatalyst code version: H.8. Copyright 1997-2006 Omniture, Inc. -->
  74. <script language="JavaScript"><!--
  75. /* RSID: */
  76. var s_account="appleglobal,appleusdeveloper"
  77. //--></script>
  78.  
  79. <script language="JavaScript" type="text/javascript" src="http://images.apple.com/global/metrics/js/s_code_h.js"></script>
  80.  
  81. <script language="JavaScript"><!--
  82. s.pageName=document.title+" (US)";
  83. s.server=""
  84. s.channel="www.us.developer"
  85. s.pageType=""
  86. s.prop1=""
  87. s.prop2=""
  88. s.prop3=""
  89. s.prop4=document.location;
  90.  
  91. /* E-commerce Variables */
  92. s.campaign=""
  93. s.state=""
  94. s.zip=""
  95. s.events=""
  96. s.products=""
  97. s.purchaseID=""
  98. s.eVar1=""
  99. s.eVar2=""
  100. s.eVar3=""
  101. s.eVar4=""
  102. s.eVar5=""
  103.  
  104. /************* DO NOT ALTER ANYTHING BELOW THIS LINE ! **************/
  105. var s_code=s.t();if(s_code)document.write(s_code)//--></script>
  106. <!-- End SiteCatalyst code version: H.8. -->
  107.  
  108.     <div id="header">
  109.     <h2><a href="/safari/">Safari Dev Center</a></h2>
  110.     <ul class="devcenterMenu">
  111.         <li class="iphone_devcenter"><a href="/iphone/">iPhone Dev Center</a></li>
  112.         <li class="mac_devcenter"><a href="/mac/">Mac Dev Center</a></li>
  113.         <li class="safari_devcenter active"><a href="/safari/">Safari Dev Center</a></li>
  114.     </ul>
  115. </div><!--/header-->    <div id="main">
  116.         <div class="maincap top"></div>
  117.     <div id="content">
  118.  
  119.         <h1><img src="http://devimages.apple.com/safaridemos/images/safari_technology_demo_title.png" alt="Safari Technology Demos" width="547" height="33" /></h1>
  120.         <a href="/safaridemos/" class="right more backtooverview">Back to Overview</a>    
  121.             <div class="grid2col">
  122.                 <div class="column first">
  123.                     <img src="http://devimages.apple.com/safaridemos/images/demo_fontrow.jpg" alt="Movie Trailers" width="430" class="left" />
  124.                     <div class="grid2colb bestviewed">
  125.                         <div class="column first">
  126.                             <h6>Best Viewed: <span class="lightgrey">Safari on Mac OS X, Windows</span></h6>
  127.                         </div>
  128.                         <div class="column last">
  129.                             <p class="button-spacing right"><a class="button liteblue popup-link" href="/safaridemos/MovieTrailers/"><span>View Demo</span></a></p>
  130.                         </div>
  131.                     </div>
  132.                 </div>
  133.                 <div class="column last">
  134.                     <h2>Movie Trailers</h2>
  135.                     <p>Within Safari, browse and play trailers from an iTunes movie catalog using a familiar Front Row-style interface.  Built with Dashcode 3, this web application uses the HTML5 video element to display video and combines CSS 2D and 3D transforms with CSS transitions to make the user interface fluid and responsive.  Each piece of dynamic data is bound to a user interface element using Dashcode Data Sources.  By using Data Sources, you can reduce the amount of time that you spend writing code to parse incoming data, and your user interface elements will stay in sync if the data changes.</p>
  136.                     <ul class="square">
  137.                         <li>Video is displayed using the HTML5 <code><video></code> tag.</li>
  138.                         <li>Reflection is added with <code>-webkit-box-reflect</code>.</li>
  139.                         <li>Movie posters are animated with CSS3 transforms and animations.</li>
  140.                     </ul>
  141.                                         
  142.                     <h3>Related Resources</h3>
  143.                         <ul class="icons">
  144.                             <li class="book"><a href="/safari/library/documentation/AppleApplications/Reference/SafariHTMLRef/">Safari HTML Reference</a></li>
  145.                             <li class="book"><a href="/safari/library/documentation/AppleApplications/Reference/SafariCSSRef/">Safari CSS Reference</a></li>
  146.                             <li class="book"><a href="/safari/library/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/">Safari Visual Effects Guide</a></li>
  147.                             <li class="book"><a href="/safari/library/documentation/AppleApplications/Reference/SafariJSRef/index.html">Safari DOM Extensions Reference</a></li>
  148.                             <li class="book"><a href="/safari/library/documentation/AppleApplications/Conceptual/Dashcode_UserGuide/Contents/Resources/en.lproj/Introduction/Introduction.html">Dashcode User Guide</a></li>
  149.                             <li class="code"><a href="/safari/library/samplecode/HTML_video_example/">HTML Video Example</a></li>
  150.                             <li class="code"><a href="/safari/library/samplecode/HTML5VideoPlayer/">ConcertDemo</a></li>
  151.                             <li class="code"><a href="/safari/library/samplecode/HTML_video_with_CSS_effects/">iPodNanos</a></li>
  152.                             <li class="code"><a href="/safari/library/samplecode/CardFlip/">CardFlip</a></li>
  153.                         </ul>
  154.                 </div>
  155.                 <div class="warning_container scaling_pane _transformOrigin" id="warning_container" style="display: none;">
  156.         <section class="warning_content">
  157.             <header>
  158.                 <h1>You‚Äôll need to download Safari to view this demo.</h1>
  159.             </header>
  160.             <p>This demo was designed with the latest web standards supported by Safari. If you‚Äôd like to experience this demo, simply download Safari. It‚Äôs free for Mac and PC, and it only takes a few minutes.</p>
  161.             <div class="grid2col">
  162.                 <p>
  163.                     <a href="http://www.apple.com/safari/download/" class="" id="warning_safari">
  164.                         <b>Safari</b>
  165.                         For Mac + PC
  166.                         <span class="more">Download Safari</span>
  167.                     </a>
  168.                 </p>
  169.             </div>
  170.             <a href="#close" class="warning_close" id="warning_close">Close</a>
  171.         </section>
  172. </div>                
  173.             </div>
  174.             <div id="pagenav">
  175.                 <div class="column first previous">
  176.                       <a class="arrow" href="/safaridemos/offline-calendar.php">Offline Calendar</a>
  177.                 </div>
  178.                 <div class="column last next">
  179.                     <a class="arrow" href="/safaridemos/video-effects.php">Video Effects</a>
  180.                 </div>
  181.             </div>
  182.             </div><!-- /content -->
  183.  
  184.             <div class="maincap bottom"></div>
  185.         </div><!-- /main -->
  186.     
  187. <div id="promofooter4" class="chrome">
  188.     <ul>
  189.         <li class="promo"><h3>Develop Safari Extensions</h3>
  190. <p><a href="/programs/safari/">The Safari Developer Program includes all the resources you need to create and sign Safari extensions.</a></p>
  191. <a href="/programs/safari/" class="image"><img width="244" height="180" alt="" src="http://devimages.apple.com/assets/promos/four/safari-extensions/image.png"/></a></li>
  192.         <li class="promo"><h3>Preparing Your Web Content for iPad</h3>
  193. <p><a href="http://developer.apple.com/safari/library/technotes/tn2010/tn2262.html">Learn how to make your website look and work great on iPad.</a></p>
  194. <a href="http://developer.apple.com/safari/library/technotes/tn2010/tn2262.html" class="image"><img width="244" height="180" alt="" src="http://devimages.apple.com/assets/promos/four/ipad-web/image.png"/></a>
  195. </li>
  196.         <li class="promo"><h3>Safari Developer Tools</h3>
  197. <p><a href="/technologies/safari/developer-tools.html">Tools to optimize a website for peak performance and compatibility.</a></p>
  198. <a href="/technologies/safari/developer-tools.html" class="image"><img width="244" height="180" alt="" src="http://devimages.apple.com/assets/promos/four/safari-dev-tools/image.png"/></a>
  199. </li>
  200.         <li class="promo"><h3>WebKit</h3>
  201. <p class="cheat"><a href="http://webkit.org/">Developed by Apple, WebKit is the most advanced browser engine, drawing the web pages you see in Safari.</a></p>
  202. <a href="http://webkit.org/" class="image"><img width="244" height="180" alt="" src="http://devimages.apple.com/assets/promos/four/webkit-program/image.png"/></a>
  203. </li>
  204.     </ul>
  205. </div><!--/promos/footer--><div id="globalfooter">
  206.     <div id="breadory">
  207.         <ol id="breadcrumbs">
  208.             <li class="home"><a href="/">Developer</a></li>
  209.             <li><a href="/safari/">Safari Dev Center</a></li>
  210.             <li><a href="/safaridemos/">Safari Technology Demos</a></li>
  211.             <li>Movie Trailers</li>
  212.         </ol>
  213.             <div id="directorynav" class="ipoditunes">
  214.         <div id="dn-cola" class="column first">
  215.             <h3><a href="/technologies/">Technologies</a></h3>
  216.             <ul>
  217.                 <li><a href="/technologies/tools/">Developer Tools</a></li>
  218.                 <li><a href="/technologies/iphone/">iOS</a></li>
  219.                 <li><a href="/technologies/mac/">Mac OS X</a></li>
  220.                 <li><a href="/technologies/safari/">Safari</a></li>
  221.             </ul>
  222.         </div><!--/dn-cola-->
  223.         <div id="dn-colb" class="column">
  224.             <h3><a href="/resources/">Resources</a></h3>
  225.             <ul>
  226.                 <li><a href="/iphone/">iPhone Dev Center</a></li>
  227.                 <li><a href="/mac/">Mac Dev Center</a></li>
  228.                 <li><a href="/safari/">Safari Dev Center</a></li>
  229.                 <li><a href="/appleapplications/">Apple Applications</a></li>
  230.                 <li><a href="/hardwaredrivers/">Hardware & Drivers</a></li>
  231.                 <li><a href="/programs/mfi/cases.html">iPod, iPhone & iPad Cases</a></li>
  232.             </ul>
  233.         </div><!--/dn-colb-->
  234.         <div id="dn-colc" class="column">
  235.             <h3></h3>
  236.             <ul>
  237.                 <li> </li>
  238.                 <li><a href="/videos/">Development Videos</a></li>    
  239.                 <li><a href="/devforums/">Developer Forums</a></li>                
  240.                 <li><a href="/iphone/appstore/">App Store Resource Center</a></li>            
  241.                 <li><a href="/iphone/news/">iOS Developer News</a></li>
  242.                 <li><a href="/softwarelicensing/">Licensing & Trademarks</a></li>                
  243.             </ul>
  244.         </div><!--/dn-colc-->
  245.         <div id="dn-cold" class="column">
  246.             <h3><a href="/programs/">Programs</a></h3>
  247.             <ul>
  248.                 <li><a href="/programs/iphone/">iPhone Developer Program</a></li>
  249.                 <li><a href="/programs/iphone/enterprise/">iPhone Enterprise Program</a></li>
  250.                 <li><a href="/programs/iphone/university/">iPhone University Program</a></li>
  251.                 <li><a href="/programs/mac/">Mac Developer Program</a></li>
  252.                 <li><a href="/programs/safari/">Safari Developer Program</a></li>                
  253.                 <li><a href="/programs/mfi/">MFi Program</a></li>
  254.                 <li><a href="/programs/register/">Register as an Apple Developer</a></li>
  255.             </ul>
  256.         </div><!--/dn-cold-->
  257.         <div id="dn-cole" class="column last">
  258.             <h3><a href="/support/">Support</a></h3>
  259.             <ul>
  260.                 <li><a href="/support/iphone/">iPhone Developer Program</a></li>
  261.                 <li><a href="/support/mac/">Mac Developer Program</a></li>
  262.                 <li><a href="/support/mac/">Safari Developer Program</a></li>                
  263.                 <li><a href="/support/adc/">ADC Members</a></li>
  264.                 <li><a href="/bugreporter/">Bug Reporting</a></li>
  265.                 <li><a href="/support/resources/itunes-connect.html">iTunes Connect Support</a></li>
  266.                 <li><a href="/support/resources/technical-support.html">Technical Support</a></li>
  267.             </ul>
  268.         </div><!--/dn-cole-->
  269.         <div class="capbottom"></div>
  270.     </div><!--/directorynav-->
  271.     </div><!--/breadory-->
  272.     <p class="gf-buy">Shop the <a href="http://www.apple.com/store/">Apple Online Store</a> (1-800-MY-APPLE), visit an <a href="http://www.apple.com/retail/">Apple Retail Store</a>, or find a <a href="http://www.apple.com/buy/locator/">reseller</a>.</p>
  273. <ul class="gf-links piped">
  274.     <li><a href="http://lists.apple.com/mailman/listinfo" class="first">Mailing Lists</a></li>
  275.     <li><a href="/rss/">RSS Feeds</a></li>
  276. </ul>
  277. <div class="gf-sosumi">
  278.     <p>Copyright ¬© 2010 Apple Inc. All rights reserved.</p>
  279.     <ul class="piped">
  280.         <li><a href="http://www.apple.com/legal/terms/site.html" class="first">Terms of Use</a></li>
  281.         <li><a href="http://www.apple.com/legal/privacy/">Privacy Policy</a></li>
  282.     </ul>
  283. </div></div><!--/globalfooter-->
  284.  
  285.  
  286. </body>
  287. </html>