mobile themes, qr codes, and shorturls
DESCRIPTION
"Mobile themes for Wordpress, QR codes, and custom shortURLs". Delivered by Chris Traganos, Web Developer at Harvard Public Affairs & Communications, on May 18th, 2010 at Lamont Library, Forum Room.TRANSCRIPT
![Page 1: Mobile themes, QR codes, and shortURLs](https://reader033.vdocuments.mx/reader033/viewer/2022042714/5549fc4ab4c905507a8b4abc/html5/thumbnails/1.jpg)
Chris TraganosHarvard Public Affairs & Communications
Mobile Themes, QR codes, and shortURLs
5/12/10
![Page 2: Mobile themes, QR codes, and shortURLs](https://reader033.vdocuments.mx/reader033/viewer/2022042714/5549fc4ab4c905507a8b4abc/html5/thumbnails/2.jpg)
Overview• The Harvard Gazette is
Harvard's official newspaper, published in print and online.
• Writers, photographers, and editors create the online version which has fresh content delivered daily.
• Editorial workflow is used for both creating print and online content.
![Page 3: Mobile themes, QR codes, and shortURLs](https://reader033.vdocuments.mx/reader033/viewer/2022042714/5549fc4ab4c905507a8b4abc/html5/thumbnails/3.jpg)
Online• Harvard Gazette is powered by
Wordpress
• Wordpress is an open source content management system with a solid admin interface (aka the "dashboard") and a workflow crucial for a news site.
• Online, the theme is using straight php functions and minimal amount of plugins. The site lives straight on the WP core and auto-updates
![Page 4: Mobile themes, QR codes, and shortURLs](https://reader033.vdocuments.mx/reader033/viewer/2022042714/5549fc4ab4c905507a8b4abc/html5/thumbnails/4.jpg)
Deciding to build theme• Could use functions from regular site with minor
alterations like the homepage featured stories rotator.
• Mobile site from scratch would have minimal overhead and could use wp-core functions for speed considerations.
• Launching a web based solution mean we could introduce new features over time without needing app stores on the various mobile devices.
• Can tailor fit to our site through custom theme using mobile detection in the WP plugins directory(wp-mobile.php by Crowd Favorite)
![Page 5: Mobile themes, QR codes, and shortURLs](https://reader033.vdocuments.mx/reader033/viewer/2022042714/5549fc4ab4c905507a8b4abc/html5/thumbnails/5.jpg)
GazetteMobileUsers
Windows1%
SymbianOS2%iPad
8%
Android9%
Blackberry11%
iPhone70%
![Page 6: Mobile themes, QR codes, and shortURLs](https://reader033.vdocuments.mx/reader033/viewer/2022042714/5549fc4ab4c905507a8b4abc/html5/thumbnails/6.jpg)
Design stage• Create sketch & photoshop
mockup
• Create style.css, index_static.php and article_static.php for design comp.
• Sample home and sample story are the basis for the theme and having a familiarity to the full site on a desktop.
• Build out Wordpress theme for mobile devices.
![Page 7: Mobile themes, QR codes, and shortURLs](https://reader033.vdocuments.mx/reader033/viewer/2022042714/5549fc4ab4c905507a8b4abc/html5/thumbnails/7.jpg)
• To build a new theme for wordpress, all is required to begin: style.css and index.php
• Once the page is built and visual design is approved - replace static content with Wordpress functions: get_header()get_footer() get_featured_posts()wp_title()etc
• Each template page draws from the master design to a degree
Building mobile theme
index.phpstyle.css
&
<title> Building on Tradition | Harvard Gazette Online</title>
<title> <?php wp_title('|', true, 'right'); ?> <?php bloginfo('name'); ?></title>
Example
![Page 8: Mobile themes, QR codes, and shortURLs](https://reader033.vdocuments.mx/reader033/viewer/2022042714/5549fc4ab4c905507a8b4abc/html5/thumbnails/8.jpg)
header.php<?php/** * @package WordPress * @subpackage GZ_mobile */?><html> <head> <title><?php wp_title('|', true, 'right'); bloginfo('name'); ?>
</title> <link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/css/style.css" />
<link rel="shortcut icon" href="<?php bloginfo('stylesheet_directory'); ?>/images/favicon.ico" type="image/x-‐icon" />
<link rel="apple-‐touch-‐icon-‐precomposed" href="<?php bloginfo('stylesheet_directory'); ?>/images/apple-‐touch-‐icon-‐precomposed.png" />
style.css
![Page 9: Mobile themes, QR codes, and shortURLs](https://reader033.vdocuments.mx/reader033/viewer/2022042714/5549fc4ab4c905507a8b4abc/html5/thumbnails/9.jpg)
header.php <meta name="viewport" content="user-‐scalable=no,
width=device-‐width, minimum-‐scale=1.0, maximum-‐scale=1.0" />
<script type="text/javascript" charset="utf-‐8"> addEventListener('load', function() { setTimeout(hideAddressBar, 0); }, false); function hideAddressBar() { window.scrollTo(0, 1); } </script>
</head>
continued
http://snipplr.com/view/8784/hide-iphone-address-bar-once-page-is-loaded/
![Page 10: Mobile themes, QR codes, and shortURLs](https://reader033.vdocuments.mx/reader033/viewer/2022042714/5549fc4ab4c905507a8b4abc/html5/thumbnails/10.jpg)
header.php <body class="home">
<div class="header"> <a class="logotype" name="top" href="
<?php echo get_option('home'); ?>/"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/gazette_logotype.png" alt="Harvard Gazette" height="27" width="211" />
</a> </div><!-‐-‐ exit header -‐-‐>
<div class="masthead"> <p>
<?php echo date("l n/j/y"); ?> <span class="conditions"><?php gz_display_weather(); ?></span><a href="#search" class="search">Search</a>
</p> </div><!-‐-‐ exit mastmav -‐-‐>
continued
![Page 11: Mobile themes, QR codes, and shortURLs](https://reader033.vdocuments.mx/reader033/viewer/2022042714/5549fc4ab4c905507a8b4abc/html5/thumbnails/11.jpg)
footer.php<?php/** * @package WordPress * @subpackage GZ_mobile */?>
<div class="categories" id="nav">
<ul> <?php wp_list_categories('orderby=id&include=4,11,3,10,9&title_li=');
?></ul>
</div><!-‐-‐ exit categories -‐-‐>
![Page 12: Mobile themes, QR codes, and shortURLs](https://reader033.vdocuments.mx/reader033/viewer/2022042714/5549fc4ab4c905507a8b4abc/html5/thumbnails/12.jpg)
footer.php <div class="search"> <a name="search"></a>
<form role="search" method="get" id="searchform" action="<?php echo get_option('home') ?>/" >
<fieldset> <label for="search-‐gazette-‐input">Search</label> <p class="input-‐button">
<input type="text" value="<?php esc_attr(apply_filters('the_search_query', get_search_query())); ?>" name="s" id="search-‐gazette-‐input" />
<input type="submit" value="Go" id="search-‐gazette-‐submit" />
</p> </fieldset>
</form> </div><!-‐-‐exit search-‐-‐>
continued
![Page 13: Mobile themes, QR codes, and shortURLs](https://reader033.vdocuments.mx/reader033/viewer/2022042714/5549fc4ab4c905507a8b4abc/html5/thumbnails/13.jpg)
footer.php<div class="footer"> <div id="copyright"><p>©
<?php echo date("Y",time()); ?> The President and Fellows of Harvard College.</p>
<ul> <li><a href="#top">Top</a> <span class="divider">/</span></li> <li><a href="<?php echo get_permalink(PRIVACYHPAC_PAGE_ID); ?>">Privacy</a> </li> <li><a href="http://www.trademark.harvard.edu/trademark_protection/notice.php" >Trademark</a> </li> <li><a href="<?php echo get_permalink(CONTACT_PAGE_ID); ?>">Contact us</a> </li> <li><a href="<?php echo get_permalink(NEWS_HOME_PAGE_ID); ?>">HPAC</a></li> </ul>
</div><!-‐-‐ exit copyright -‐-‐></div><!-‐-‐ exit footer -‐-‐> <?php if(function_exists('cfmobi_mobile_exit')) { cfmobi_mobile_exit();} ?> </body> </html>
continued
![Page 14: Mobile themes, QR codes, and shortURLs](https://reader033.vdocuments.mx/reader033/viewer/2022042714/5549fc4ab4c905507a8b4abc/html5/thumbnails/14.jpg)
QR Codes
![Page 15: Mobile themes, QR codes, and shortURLs](https://reader033.vdocuments.mx/reader033/viewer/2022042714/5549fc4ab4c905507a8b4abc/html5/thumbnails/15.jpg)
QR Codes• A QR Code is a 2D bar code created by
Denso-Wave Co. in 1994.
• Designed for quick response scanning on assembly lines, QR codes have played a role in mobile tagging
• Contains up to 7089 characters in a single QR
• Can accept multiple formats (URLs, Geo data, SMS, vCards, and more)
source: http://en.wikipedia.org/wiki/QR_Code
![Page 16: Mobile themes, QR codes, and shortURLs](https://reader033.vdocuments.mx/reader033/viewer/2022042714/5549fc4ab4c905507a8b4abc/html5/thumbnails/16.jpg)
QR Codes• The ability to link printed materials
and online content has opened new possibilities for traditional publications to expand their reach online.
• Quote: "This year, 89% of new mobile phones shipped to the U.S. will have cameras"
• Numerous sites allow users to generator QR codes on the fly.
source: http://bit.ly/bpEEEj
![Page 17: Mobile themes, QR codes, and shortURLs](https://reader033.vdocuments.mx/reader033/viewer/2022042714/5549fc4ab4c905507a8b4abc/html5/thumbnails/17.jpg)
QR Codes in the Gazette• The Harvard Gazette
began incorporating QR codes into the print newspaper in April 2010.
• Readers who are curious and want to access additional features online scan the QR code with their smartphone.
![Page 18: Mobile themes, QR codes, and shortURLs](https://reader033.vdocuments.mx/reader033/viewer/2022042714/5549fc4ab4c905507a8b4abc/html5/thumbnails/18.jpg)
QR & Mobile sitesImportant to note that QR codes are best used in conjunction with mobile friendly sites. Having a QR code access a fast-loading site enhances the users experience with the print and web.
![Page 19: Mobile themes, QR codes, and shortURLs](https://reader033.vdocuments.mx/reader033/viewer/2022042714/5549fc4ab4c905507a8b4abc/html5/thumbnails/19.jpg)
shortURLs
![Page 20: Mobile themes, QR codes, and shortURLs](https://reader033.vdocuments.mx/reader033/viewer/2022042714/5549fc4ab4c905507a8b4abc/html5/thumbnails/20.jpg)
shortURLs• By default, Wordpress follows an ID based URL structure:http://news.harvard.edu/gazette/?p=33273
• Wordpress allows for flexible and custom URL patterns:/story/%year%/%monthnum%/%postname%/
would translate to:
http://news.harvard.edu/gazette/story/2009/12/web-‐wizardry/
• Great for search engines and easy to decipher
![Page 21: Mobile themes, QR codes, and shortURLs](https://reader033.vdocuments.mx/reader033/viewer/2022042714/5549fc4ab4c905507a8b4abc/html5/thumbnails/21.jpg)
Building• Since the editors are dealing with story ID’s in the dashboard, they see
the stories in shorthand form. Additional consideration was the QR scan better with less characters.
• Prototyped and launched a 3 character shortURL for the Harvard Gazette: http://hvd.gs
• The editors could share links quickly with the short hand equivalent: http://hvd.gs/33273
• Advantage was that if title of story every changed, these URLs would still be intact.
![Page 22: Mobile themes, QR codes, and shortURLs](https://reader033.vdocuments.mx/reader033/viewer/2022042714/5549fc4ab4c905507a8b4abc/html5/thumbnails/22.jpg)
How-to• Accomplished this by purchasing the domain and using a simple htaccess
rule for redirecting.
• In root html directory, created an htaccess rule:
RedirectMatch permanent ^/$ http://news.harvard.edu/gazette/RewriteEngine OnRewriteRule ^([0-‐9]+)$ http://news.harvard.edu/gazette/?p=$1 [QSA,R=301]
• This allows for parameters to be passed (?src=QR&pg=3)
![Page 23: Mobile themes, QR codes, and shortURLs](https://reader033.vdocuments.mx/reader033/viewer/2022042714/5549fc4ab4c905507a8b4abc/html5/thumbnails/23.jpg)
http://codex.wordpress.org/Theme_Development
http://carringtontheme.com/2009/03/carrington-mobile-10/
Detecting Mobile devices: http://detectmobilebrowsers.mobi/
Development for the New Mobile Web: http://www.slideshare.net/harvardwww/development-for-the-new-mobile-web
Mobile Strategy: http://www.jeremyjohnsononline.com/2010/04/26/the-mobile-question-lessons-in-design-and-strategy-for-your-mobile-experience/#more-182
PSD for Motorola Droid: http://www.officialpsds.com/Verizon-Droid-without-keypad-PSD39240.html
PSD for iPhone prototyping: http://www.teehanlax.com/blog/2009/06/18/iphone-gui-psd-30/
QR write up http://bits.blogs.nytimes.com/2009/12/07/putting-a-bar-code-on-places-not-just-products/
http://qrcode.kaywa.com/
Resources