Your SlideShare is downloading. ×
0
Mobile library on drupal   cil2011
Mobile library on drupal   cil2011
Mobile library on drupal   cil2011
Mobile library on drupal   cil2011
Mobile library on drupal   cil2011
Mobile library on drupal   cil2011
Mobile library on drupal   cil2011
Mobile library on drupal   cil2011
Mobile library on drupal   cil2011
Mobile library on drupal   cil2011
Mobile library on drupal   cil2011
Mobile library on drupal   cil2011
Mobile library on drupal   cil2011
Mobile library on drupal   cil2011
Mobile library on drupal   cil2011
Mobile library on drupal   cil2011
Mobile library on drupal   cil2011
Mobile library on drupal   cil2011
Mobile library on drupal   cil2011
Mobile library on drupal   cil2011
Mobile library on drupal   cil2011
Mobile library on drupal   cil2011
Mobile library on drupal   cil2011
Mobile library on drupal   cil2011
Mobile library on drupal   cil2011
Mobile library on drupal   cil2011
Mobile library on drupal   cil2011
Mobile library on drupal   cil2011
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Mobile library on drupal cil2011

3,140

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,140
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Mobile Website on Drupal Computer in Library March 23, 2011 Shian Chang Georgetown University
  • 2. Agenda <ul><li>History </li></ul><ul><li>Approaches </li></ul><ul><li>Mobile Services </li></ul><ul><li>Drupal </li></ul><ul><li>Future Plan </li></ul>
  • 3. History <ul><li>The library website is built on Drupal 6 since 2009. </li></ul><ul><li>Started to plan the mobile website on the same Drupal in 2010. </li></ul><ul><li>The Mobile website was launched on January 2011. </li></ul>
  • 4. Approaches <ul><li>Develop a mobile web (not iPhone nor Android app) </li></ul><ul><li>Build on the same Drupal of the main library website </li></ul><ul><li>Build a framework for easily adding mobile content </li></ul><ul><li>Share the data with the main library website </li></ul>
  • 5. Mobile Services <ul><li>Library Hours and Locations </li></ul><ul><li>Library Catalog </li></ul><ul><li>Ask Us </li></ul><ul><li>Mobile resources </li></ul>
  • 6. Drupal <ul><li>Drupal module and Theme </li></ul><ul><li>Mobile Page Basic </li></ul><ul><li>Mobile view Basic </li></ul><ul><li>Other Mobile Pages </li></ul>
  • 7. Drupal Module and Theme <ul><li>Install Mobile Tool module and iWebkit theme. </li></ul><ul><li>Enable iWebkit theme and configure it. </li></ul><ul><li>Configure Mobile Tool </li></ul><ul><ul><li>Configure <library-home>/mobile/* to be mobile pages </li></ul></ul><ul><ul><li>Switch to iWebkit theme for all path of <library-home>/mobile/* </li></ul></ul><ul><li>Demo (Mobile Tool Configuration) </li></ul>
  • 8. Mobile Page Basic <ul><li>iWebkit Framework </li></ul><ul><li>Mobile Page Framework </li></ul><ul><li>Mobile Page Content </li></ul><ul><li>Mobile Page Path </li></ul>
  • 9. iWebkit Framework <ul class=pageitem> <li class=“textbox”>…</li> <li class=“textbox”>…</li> <li class=“menu”>…</li> <li class=“store”>…</li> </ul> <ul><li><li class=&quot;menu&quot;> </li></ul><ul><ul><li><a href=&quot;index.php&quot;> </li></ul></ul><ul><ul><li><img alt=&quot;Description&quot; src=&quot;thumbs/basics.png&quot; /> </li></ul></ul><ul><ul><li><span class=&quot;name&quot;>Iphone iwebkit Example</span> </li></ul></ul><ul><ul><li><span class=&quot;arrow&quot;></span> </a> </li></ul></ul><ul><li></li> </li></ul><ul><li><li class=&quot;store&quot;> </li></ul><ul><ul><li><a href=&quot;index.php&quot;> </li></ul></ul><ul><ul><li><span class=&quot;image&quot; style=&quot;background-image: url('image.jpg')&quot;></span> </li></ul></ul><ul><ul><li><span class=&quot;name&quot;>Iphone Song</span> </li></ul></ul><ul><ul><li><span class=&quot;comment&quot;>iWebKit Comment</span> </li></ul></ul><ul><ul><li><img alt=&quot;rating&quot; class=&quot;stars&quot; src=&quot;images/4stars.png&quot; /> </li></ul></ul><ul><ul><li><span class=&quot;starcomment&quot;>13 Reviews<br> </span> </li></ul></ul><ul><ul><li><span class=&quot;arrow&quot;></span> </a> </li></ul></ul><ul><li></li> </li></ul>
  • 10. Mobile Page Framework <ul><li>Add <ul class=“pageItem”> in page.tpl.php for iWebkit theme. </li></ul><ul class=&quot;pageitem&quot;> <?php if($content): ?> <?php print $content; ?> <?php endif; ?><!--End of content --> </ul>
  • 11. Mobile Page Content Add <li class=“…”> as the content of Mobile Page
  • 12. Mobile Page Path Assign the path of the page to be ~/mobile/…., then iWebkit theme applies to the page.
  • 13. Mobile View Basic <ul><li>Create a view </li></ul><ul><li>Customize Fields in the view </li></ul><ul><li>Theme field in view as need </li></ul><ul><li>View page path </li></ul>
  • 14. Create a View
  • 15. Customize Fields in View <ul><li>Because <ul class=“ pageItem ” > has been in page.tpl.php of iWebkit theme, </li></ul><ul><li>Construct <li> at each field to be displayed </li></ul><ul><ul><li>Rewrite the output of this field </li></ul></ul><ul><ul><li>Output this field as a link </li></ul></ul><ul><ul><ul><li>Link path – URL of the menu item </li></ul></ul></ul><ul><ul><ul><li>Prefix text - <li …> </li></ul></ul></ul><ul><ul><ul><li>Suffix text - </li> </li></ul></ul></ul>
  • 16. <ul><li><li class=&quot;menu2&quot;> </li></ul><ul><ul><li><a href=&quot;/mobile/service-point/Circulation%20Desk&quot; title=&quot;More on Circulation Desk&quot;> </li></ul></ul><ul><ul><li><img src=&quot;/sites/default/files/images/Circulation Desk-small.png&quot; /> </li></ul></ul><ul><ul><li><span class=&quot;name&quot;>Circulation Desk</span> </li></ul></ul><ul><ul><li><span class=&quot;comment&quot;>8:30am - Midnight</span> </li></ul></ul><ul><ul><li><span class=&quot;arrow&quot;></span> </li></ul></ul><ul><ul><li></a> </li></ul></ul><ul><li></li> </li></ul>
  • 17. Path of View Page Assign the path name with ~/mobile/…., then iWebkit theme applies to the page.
  • 18. Theme Field in View <ul><li>Create a template file at ~/sites/all/theme/iwebkit directory. </li></ul><ul><li>Make the file name as views-view-field-- [field-name] .tpl.php </li></ul><ul><li>The template file overwrites the views-view-field.tpl.php (default template). </li></ul>
  • 19. Example of Template File <ul><li>views-view-field-- field-phone-value .tpl.php </li></ul><ul><li><?php </li></ul><ul><ul><li>$phone_output = '<li class=&quot;menu&quot;><a href=&quot;tel:'.$output.'&quot;><img src=&quot;/sites/default/files/images/phone-small.png&quot; /><span class=&quot;name&quot;>Call ‘; </li></ul></ul><ul><ul><li>$phone_output = $phone_output.$output.'</span><span class=&quot;arrow&quot;></span></a></li>'; </li></ul></ul><ul><ul><li>print $phone_output; </li></ul></ul><ul><li>?> </li></ul>
  • 20. Theming Information in View Click on “Information” to see the theme template information
  • 21. Theming Information in View Select iWebkit theme Click on “Change theme” to see all template files used by the view
  • 22. Theming Information in View The template “views-view-field-- field-phone-value .tpl.php” overwrites “views-view-field.tpl.php” for the field_phone.
  • 23. Other Mobile Pages <ul><li>Mobile Home page </li></ul><ul><li>Library Catalog </li></ul>
  • 24. Mobile Home Page <ul><li>Create a content type called Mobile Service </li></ul><ul><ul><li>icon image </li></ul></ul><ul><ul><li>Link </li></ul></ul><ul><li>Create a view called mobile_services </li></ul><ul><ul><li>Configure display style as grid to display 4 columns for each row </li></ul></ul><ul><li>Create a theme file to adjust the spaces </li></ul><ul><ul><li>The new file has the name as view-view-grid- mobile-services .tpl.php. </li></ul></ul><ul><ul><li>The new file overwrites views-view-grid.tpl.php (default). </li></ul></ul>
  • 25. Library Catalog <ul><li>Use Web service </li></ul><ul><li>Develop PHP code to parse the XML and format the display </li></ul>Consortium Arquabrowser (Library Catalog Discovery Server) Georgetown University Website (Drupal) Submit a search request Response an XML with search result
  • 26. Examples of Library Catalog
  • 27. Future Plan <ul><li>Add more mobile services such as “My Account”. </li></ul><ul><li>Add SMS capability and integrate with LibraryH3lp. </li></ul><ul><li>Improve Library Catalog with access to other libraries in our consortium. </li></ul>
  • 28. Question? <ul><li>Georgetown University Mobile site: http://library.georgetown.edu/mobile </li></ul><ul><li>Georgetown University Website: http://library.georgetown.edu </li></ul><ul><li>Drupal iWebkit: http://drupal.org/project/iwebkit </li></ul><ul><li>Drupal Mobile Tool: http://drupal.org/project/mobile_tools </li></ul><ul><li>Thank You ! </li></ul><ul><li>Shian Chang (slc72@georgetown.edu) </li></ul>

×