1 / 23

Archiving the Mobile Web

Archiving the Mobile Web. Frank McCown, Monica Yarbrough, & Keith Enlow Computer Science Dept Harding University. WADL 2013 Indianapolis, IN July 25, 2013. Mobile vs. Stationary Web. Mobile Web-Related Markup Languages. Smartphone era.

gyan
Télécharger la présentation

Archiving the Mobile Web

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Archiving the Mobile Web Frank McCown, Monica Yarbrough, & Keith Enlow Computer Science Dept Harding University WADL 2013Indianapolis, INJuly 25, 2013

  2. Mobile vs. Stationary Web

  3. Mobile Web-Related Markup Languages Smartphone era http://en.wikipedia.org/wiki/File:Mobile_Web_Standards_Evolution_Vector.svg

  4. Two Types of Mobile Web Smartphone Web Feature Phone Web cHTML (iMode), WML, WAP, etc. XHTML, HTML5, etc.

  5. Serving Up Mobile Sites • Responsive web design • Same HTML content to desktop and mobile • CSS media queries alter appearance <!-- CSS media query on a link element --> <link rel="stylesheet" media="(max-width: 800px)" href="example.css" /> <!-- CSS media query within a style sheet --> <style> @media (max-width: 600px) { .sidebar { display: none; } } </style>

  6. Example of Responsive Web Design

  7. Serving Up Mobile Sites • Responsive web design • Same HTML content to desktop and mobile • CSS media queries alter appearance • Redirect mobile user agent to mobile site • Client-side redirection • Server-side redirection

  8. Client-Side Redirection • JavaScript detects mobile user agent // From www.harding.edu varua = navigator.userAgent.toLowerCase(); if (queryString.match('version=mobile') || ua.match(/IEMobile|WindowsCE|NetFront|PlayStation|likeMac OS Z|MIDP|UP\.Browser|Symbian| Nintendo|BlackBerry|mobile/i)) { if (!ua.match('ipad')) { if (window.location.pathname.match('.html')) window.location= window.location.pathname.replace('.html', '.m.html'); else window.location= window.location.pathname + 'index.m.html'; } }

  9. Client-Side Redirection

  10. Server-Side Redirection • Server routes mobile user agent to different page Apache Example: RewriteEngineOn RewriteBase / RewriteCond %{HTTP_USER_AGENT} (android|bb\d+|meego).+mobile|avantgo|badda\/|blackberry|blazer|etc…|zte\-) [NC] RewriteRule ^$ http://detectmobilebrowser.com/mobile [R,L] https://developers.google.com/webmasters/smartphone-sites/details

  11. Server-Side Redirection

  12. Serving Up Mobile Sites • Responsive web design • Same HTML content to desktop and mobile • CSS media queries alter appearance • Redirect mobile user agent to mobile site • Client-side redirection • Server-side redirection • User-agent content negotiation • Dynamically serving different HTML for the same URL

  13. User-Agent Content Negotiation • Server serves up different content for same URL • Use Vary: User-Agent header in response • Best method for serving content quickly

  14. Archiving Mobile Sites • Responsive web design • Easy: Crawl like normal • Use client tools to view page formatted for mobile • Redirect mobile user agent to mobile site • Need to crawl with mobile user agent • Need JavaScript-enabled crawler to handle client-side redirection • User-agent content negotiation • Need to crawl with mobile user agent • Need to distinguish mobile vs. desktop for same URL

  15. How are we doing archiving mobile sites so far?

  16. Earliest archived page

  17. Earliest 2007 archived page: WML

  18. Finally some news!

  19. Really???

  20. Great…

  21. Only desktop version is archived!

More Related