Mobile Website on Drupal Computer in Library March 23, 2011 Shian Chang Georgetown University
Agenda <ul><li>History </li></ul><ul><li>Approaches </li></ul><ul><li>Mobile Services </li></ul><ul><li>Drupal  </li></ul>...
History <ul><li>The library website is built on Drupal 6 since 2009. </li></ul><ul><li>Started to plan the mobile website ...
Approaches <ul><li>Develop a mobile web (not iPhone nor Android app) </li></ul><ul><li>Build on the same Drupal of the mai...
Mobile Services <ul><li>Library Hours and Locations </li></ul><ul><li>Library Catalog </li></ul><ul><li>Ask Us </li></ul><...
Drupal <ul><li>Drupal module and Theme </li></ul><ul><li>Mobile Page Basic </li></ul><ul><li>Mobile view Basic </li></ul><...
Drupal Module and Theme <ul><li>Install Mobile Tool module and iWebkit theme. </li></ul><ul><li>Enable iWebkit theme and c...
Mobile Page Basic <ul><li>iWebkit Framework </li></ul><ul><li>Mobile Page Framework </li></ul><ul><li>Mobile Page Content ...
iWebkit Framework <ul class=pageitem> <li class=“textbox”>…</li> <li class=“textbox”>…</li> <li class=“menu”>…</li> <li cl...
Mobile Page Framework <ul><li>Add <ul class=“pageItem”> in page.tpl.php for iWebkit theme. </li></ul><ul class=&quot;pagei...
Mobile Page Content  Add <li class=“…”> as the content of Mobile Page
Mobile Page Path Assign the path of the page to be ~/mobile/…., then iWebkit theme applies to the page.
Mobile View Basic <ul><li>Create a view  </li></ul><ul><li>Customize Fields in the view </li></ul><ul><li>Theme field in v...
Create a View
Customize Fields in View <ul><li>Because <ul class=“ pageItem ” > has been in page.tpl.php of iWebkit theme, </li></ul><ul...
<ul><li><li class=&quot;menu2&quot;> </li></ul><ul><ul><li><a href=&quot;/mobile/service-point/Circulation%20Desk&quot; ti...
Path of View Page Assign the path name with ~/mobile/…., then iWebkit theme applies to the page.
Theme Field in View <ul><li>Create a template file at ~/sites/all/theme/iwebkit directory. </li></ul><ul><li>Make the file...
Example of Template File <ul><li>views-view-field-- field-phone-value .tpl.php </li></ul><ul><li><?php  </li></ul><ul><ul>...
Theming Information in View Click on “Information” to see the theme template information
Theming Information in View Select iWebkit theme Click on “Change theme” to see all template files used by the view
Theming Information in View The template “views-view-field-- field-phone-value .tpl.php” overwrites “views-view-field.tpl....
Other Mobile Pages <ul><li>Mobile Home page </li></ul><ul><li>Library Catalog </li></ul>
Mobile Home Page <ul><li>Create a content type called Mobile Service </li></ul><ul><ul><li>icon image </li></ul></ul><ul><...
Library Catalog  <ul><li>Use Web service </li></ul><ul><li>Develop PHP code to parse the XML and format the display </li><...
Examples of Library Catalog
Future Plan <ul><li>Add more mobile services such as “My Account”. </li></ul><ul><li>Add SMS capability and integrate with...
Question? <ul><li>Georgetown University Mobile site:  http://library.georgetown.edu/mobile </li></ul><ul><li>Georgetown Un...
Upcoming SlideShare
Loading in …5
×

Mobile library on drupal cil2011

3,406 views
3,314 views

Published on

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

No Downloads
Views
Total views
3,406
On SlideShare
0
From Embeds
0
Number of Embeds
76
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Mobile library on drupal cil2011

  1. 1. Mobile Website on Drupal Computer in Library March 23, 2011 Shian Chang Georgetown University
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 11. Mobile Page Content Add <li class=“…”> as the content of Mobile Page
  12. 12. Mobile Page Path Assign the path of the page to be ~/mobile/…., then iWebkit theme applies to the page.
  13. 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. 14. Create a View
  15. 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. 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. 17. Path of View Page Assign the path name with ~/mobile/…., then iWebkit theme applies to the page.
  18. 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. 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. 20. Theming Information in View Click on “Information” to see the theme template information
  21. 21. Theming Information in View Select iWebkit theme Click on “Change theme” to see all template files used by the view
  22. 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. 23. Other Mobile Pages <ul><li>Mobile Home page </li></ul><ul><li>Library Catalog </li></ul>
  24. 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. 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. 26. Examples of Library Catalog
  27. 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. 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>

×