Copyr i gh t © 2012, SAS Ins t i tu te Inc . A l l r i gh ts reserved .
THE SAS®
OUTPUT DELIVERY SYSTEM:
BOLDLY TAKE YOUR WEB PAGES
WHERE THEY HAVE NEVER GONE
BEFORE!
CHEVELL PARKER, SAS INSTITUTE INC.
Copyr i g ht © 2012, SAS Ins t i tu t e Inc . A l l r ights reser ve d .
• Mobile technology and web applications
• Web content across mobile and desktop devices (CSS and
HTML advancements)
• Web content for desktop applications
Overview
Copyr i g ht © 2012, SAS Ins t i tu t e Inc . A l l r ights reser ve d .
Mobile Technology and Web Applications
The melding of mobile technology and web applications has created a
revolution, but with it come challenges:
• generating output on mobile devices
• optimizing mobile output for the web
• generating applications for mobile devices
Copyr i g ht © 2012, SAS Ins t i tu t e Inc . A l l r ights reser ve d .
Generating Output on Mobile Devices
Creating output on mobile devices comes with a number of issues to consider.
• Output needs to be accessible from a desktop as well as from mobile devices.
• Pages need to render on all devices efficiently with a consistent look and feel.
• Pages and images should load quickly on all mobile browsers.
• The viewport and screen sizes on mobile devices have limitations.
• The display format needs to account for phones and tablets that use dual
orientation.
• Fonts that you can access on a desktop machine are not always available on
mobile devices.
Copyr i g ht © 2012, SAS Ins t i tu t e Inc . A l l r ights reser ve d .
Optimizing Mobile Output
The Viewport <meta> Tag
• Enables you to set up a web page for cross-device layout
• Is used by most major browsers (it was introduced originally by Apple
Inc.)
• Is the single-most important change for mobile devices
• Should be added for devices that are less than 980px in width
• Is added to the header of the HTML file
Copyr i g ht © 2012, SAS Ins t i tu t e Inc . A l l r ights reser ve d .
Optimizing Mobile Output (continued)
<meta name="viewport" content="width=320">
Viewport default
width=980px<meta name="viewport" content=“device-width">
<meta name="viewport" content=“initial-scale=1">
Setting the Viewport
Copyr i g ht © 2012, SAS Ins t i tu t e Inc . A l l r ights reser ve d .
width=320px
Wid
th=
480px
Viewport=980px
ods html file="temp.html"
metatext='name="viewport"
content="width=device-
width";
proc print data=sashelp.class;
title "ODS Output Using
Viewport Information";
run;
ods html close;
Before After
Optimizing Mobile Output (continued)
Copyr i g ht © 2012, SAS Ins t i tu t e Inc . A l l r ights reser ve d .
Optimizing Mobile Output (continued)
The jQuery Mobile framework offers the following benefits:
• You can create touch-based events that are designed for mobile devices.
• Applications and web content generated with jQuery are compatible across major
mobile, tablet, and desktop platforms.
• The framework is driven by HTML5 markup, which enables faster development.
• Output appearance scales across devices.
• Accessibility features such as WAI-ARIA ensure pages work with screen readers.
• The framework provides unified user-interface widgets and theming.
• You can access jQuery Mobile via the Microsoft Content Delivery Network or you
can download it from jquerymobile.com/download/.
Copyr i g ht © 2012, SAS Ins t i tu t e Inc . A l l r ights reser ve d .
Optimizing Mobile Output (continued)
Mobile Page Structure
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-
1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-
1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">. . .more lines. . .</div> <!-- /header -->
<div data-role="content">. . .more lines. . .</div><!-- /content -->
<div data-role="footer">. . .more lines. . .</div> <!-- /footer -->
</div><!-- /page -->
</body>
</html>
Viewport tag
Hosted CSS and script
Page layout
Copyr i g ht © 2012, SAS Ins t i tu t e Inc . A l l r ights reser ve d .
ODS MARKUP
+
jQuery Mobile
Layouts
Headers/
Footers
Icons
Themes
UI Events
Transitions
SAS®
ODS Markup Language and jQuery Mobile
Framework
Copyr i g ht © 2012, SAS Ins t i tu t e Inc . A l l r ights reser ve d .
SAS® ODS Markup Language and jQuery
Mobile Framework (continued)
• The ODS markup language enables you to create customized output.
• ODS is the perfect tool to interface with the jQuery Mobile framework.
• An available sample ODS tagset (called jQueryMobile) contains features
that drive the framework.
• Download the jQueryMobile tagset from
support.sas.com/rnd/base/ods/odsmarkup/index.html.
Copyr i g ht © 2012, SAS Ins t i tu t e Inc . A l l r ights reser ve d .
jQueryMobile Tagset: Page Layout
ods tagsets.jQueryMobile file="c:\temp.html"
options(data_role="page");
proc print data=sashelp.prdsale;
run;
proc report data=sashelp.class nowd;
run;
ods tagsets.jQueryMobile close;
Copyr i g ht © 2012, SAS Ins t i tu t e Inc . A l l r ights reser ve d .
jQueryMobile Tagset: Collapsible Layoutods tagsets.jQueryMobile file="temp.html"
options(data_role="collapsible")
proc report data=sashelp.prdsale nowd;
run;
proc print data=sashelp.class;
run;
proc freq data=sashelp.prdsale;
run;
proc univariate data=sashelp.class;
run;
. . .more procedure steps . . .
ods tagsets.jQueryMobile close;
Copyr i g ht © 2012, SAS Ins t i tu t e Inc . A l l r ights reser ve d .
ods tagsets.jQueryMobile file="temp.html"
options(data_role="collapsible"
header="Report Of Earnings"
footer="Summary Report"
data_mini="yes"
data_corners="yes"
data_iconpos="right"
data_expanded_icon="arrow-l"
data_collapsed_icon="arrow-r"
footer_icons="forward,back,grid,delete");
proc report data=sashelp.prdsale nowd;
run;
proc print data=sashelp.prdsale noobs;;
run;
. . .more procedure steps . . .
ods tagsets.jQueryMobile close;
jQueryMobile Tagset: Collapsible Layout
Copyr i g ht © 2012, SAS Ins t i tu t e Inc . A l l r ights reser ve d .
jQueryMobile Tagset: Listview Layoutods tagsets.jQueryMobile file="temp.html"
contents="contents.html"
options(data_role="listview")
proc report data=sashelp.prdsale nowd;
run;
proc print data=sashelp.prdsale noobs;
by age;
run;
proc freq data=sashelp.prdsale;
tables age height;
run;
. . .more procedure steps. . .
ods tagsets.jQueryMobile close;
Copyr i g ht © 2012, SAS Ins t i tu t e Inc . A l l r ights reser ve d .
jQueryMobile Tagset: Tab Layout
ods tagsets.jQueryMobile file="temp.html"
options(web_tabs=
"Sales,Revenue,Profit");
proc print data=sashelp.prdsale;
run;
proc report data=sashelp.prdsale nowd;
run;
. . .more procedure steps. . .
ods tagsets.jQueryMobile close;
data_theme="e"
ods tagsets.jQueryMobile file="theme.html"
options(data_role="collapsible"
data_theme="a"
header="Report Of
Earnings"
footer="Summary Report");
proc report data=sashelp.prdsale nowd;
run;
proc print data=sashelp.prdsale noobs;
run;
proc freq data=sashelp.prdsale;
run;
…
ods tagsets.jQueryMobile close;
jQueryMobile Tagset: Themes
ods tagsets.jQueryMobile file="theme.html"
options(data_role="collapsible"
footer="Summary Report");
ods tagsets.jQueryMobile
options(data_content_theme="a");
proc report data=sashelp.prdsale nowd;
run;
ods tagsets.jQueryMobile
options(data_content_theme="b");
proc print data=sashelp.prdsale noobs;
run;
…
ods tagsets.jQueryMobile close;
data_theme="b"data_theme="c"data_theme="d"data_theme="e"
Copyr i g ht © 2012, SAS Ins t i tu t e Inc . A l l r ights reser ve d .
Mobile Applications: Calling Native Applications
data one;
infile cards ;
input Address $1-23 Message $24-38 Email $39-57 Mobile $59-72;
cards;
400 Broad St, Durham NC Please contact [email protected] 919-123-4567
100 Duke St, Durham NC Please contact [email protected] 919-234-5678
9th St, Durham NC Please contact [email protected] 919-345-6789
;
run;
Copyr i g ht © 2012, SAS Ins t i tu t e Inc . A l l r ights reser ve d .
Mobile Applications: Calling Native Applications
ods html file="native.html" style=htmlblue
metatext='name="viewport" content="width=device-width"';
proc report data=one nowd;
title "Real Estate Showing and Contact Information";
column address message email mobile;
compute mobile;
call define('mobile',"url",cat("tel:",mobile));
call define('message',"url",cat("sms:",mobile));
call define('email',"url",cat("mailto:",email,"?body=",message));
call define('address',"url",cat("http://maps.apple.com?Q=",address));
endcomp;
run;
ods html close;
Copyr i g ht © 2012, SAS Ins t i tu t e Inc . A l l r ights reser ve d .
Mobile Applications: Calling Native Applications (continued)
Copyr i g ht © 2012, SAS Ins t i tu t e Inc . A l l r ights reser ve d .
Web Applications: Integrating Google Maps
ods html file="mapapi.html" style=htmlblue
metatext='name="viewport" content="width=device-width"';
proc report data=one nowd;
column address message email mobile;
compute mobile;
urlstring="http://maps.googleapis.com/maps/api/staticmap?center="
||trim(left(address))||'&zoom=14&size=400x400&
sensor=false';
call define(_col_,"url",urlstring);
endcomp;
run;
ods html close;
Copyr i g ht © 2012, SAS Ins t i tu t e Inc . A l l r ights reser ve d .
Web Applications: Using the Google GeolocationAPI to Determine Location
Checks browser
support
Passes the object
Copyr i g ht © 2012, SAS Ins t i tu t e Inc . A l l r ights reser ve d .
Web Applications: Using the Google Geolocation
API to Determine Location (continued)
"
Copyr i g ht © 2012, SAS Ins t i tu t e Inc . A l l r ights reser ve d .
CSS and HTML Advancements
• CSS3 style enhancements
• CSS3 media queries for detecting devices
• The new HTML standard
• ODS enhancements for HTML in SAS® 9.4
Copyr i g ht © 2012, SAS Ins t i tu t e Inc . A l l r ights reser ve d .
CSS Style Enhancements
• CSS3 and HTML5 introduce features that previously were available
only in desktop publishing applications.
• The enhancements include the following capabilities:
o generating animation, gradients, font shadows, and rounded
borders
o rotating text and objects
o using media queries to detect a particular device
• Only some of the many new features are supported by browsers.
proc template;
define style styles.test;
parent=styles.htmlblue;
class body / prehtml="<div style=""-ms-transform:rotate(30deg);
border:2px solid;
box-shadow: 10px 10px 5px
#888888"">";
posthtml="</div>";
end;
run;
ods html5 file="c:\temp.html" style=styles.test;
proc print data=sashelp.class;
run;
ods html5 close;
CSS3 Style Enhancements
proc template;
define style styles.test;
parent=styles.htmlblue;
class header / prehtml="<span style=""-ms-transform:rotate(30deg)"">"
posthtml="</span>";
class body / pretext="<div
style=""filter:progid:DXImageTransform.Microsoft.gradient(sta
rtcolorstr='#dddddd', endColorstr='#000000');"">"
posttext="</div>";
end;
run;
ods html5 file="c:\temp.html" style=styles.test;
proc print data=sashelp.class;
title;
run;
ods html5 close;
Copyr i g ht © 2012, SAS Ins t i tu t e Inc . A l l r ights reser ve d .
CSS3 Media Queries for Detecting Devices
• A CSS3 media query enables you to communicate with a device.
• The query is an alternative to JavaScript for customizing applications based on device.
• Media queries consist of a media type and an expression that checks for a condition.
• Expressions can include width, height, device width, orientation, color, resolution, and
other parameters.
• One of the common uses of a media query is to check a device's width using break
points.
• You can use a combination of the expressions in a style sheet to apply styles.
Copyr i g ht © 2012, SAS Ins t i tu t e Inc . A l l r ights reser ve d .
CSS3 Media Queries for Detecting Devices (continued)
Device Resolution Device-Width/Device-Height
iPhone 320 X480 320 X480, in both portrait and landscape
mode
iPhone 4 640 X 960
320 X 480, in both portrait and landscape
mode
CSS pixel density is 2
iPad1 and iPad2 769 X 1024 768X1024 in both portrait and landscape
iPad3 1536 X 2048
768X1024, in both portrait and landscape
mode
CSS pixel density is 2
Samsung Galaxy S I and II 480 X 800
320 X 533, in portrait mode
CSS Pixel density 1.5
Samsung Galaxy S III 720 X 1280 360 X 640, in portrait mode
Copyr i g ht © 2012, SAS Ins t i tu t e Inc . A l l r ights reser ve d .
CSS3 Feature: Media Queries for Detecting
Devices (continued)
/* Adjust width for an iPad in landscape
*/
/* mode and change background color.
*/
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
{
{body:background-color:green}
}
/* Tablets: Portrait or Landscape */
@media screen and (min-device-width:
768px)
and (max-device-width:
1024px)
{
background-color:green;
}
/* Mobile Phones: Portrait or Landscape
*/
@media screen and (max-device-width: 640px)
{
background-color:green;
}
/* Desktops */
@media screen and (min-width: 1024px)
{
backgound-color-green;
}
Copyr i g ht © 2012, SAS Ins t i tu t e Inc . A l l r ights reser ve d .
The New HTML5 Standard
• HTML5 is still a work in progress, but many browsers support parts of it.
• HTML5 was created to overcome the limitations of HTML and XHTML.
• This standard reduces the need for third-party tools and JavaScript.
• The standard is promoted by companies such as Google and Apple.
• New HTML5 features are based on HTML, CSS, the document object
model (DOM), and JavaScript.
• HTML5 revolutionizes the way web pages are used.
Copyr i g ht © 2012, SAS Ins t i tu t e Inc . A l l r ights reser ve d .
The New HTML5 Standard (continued)
• New elements such as the <section>, <article>, <header>, and
<footer> tags help you to better organize pages.
• The new <canvas> tag enables you to draw graphics dynamically.
• HTML5 is device independent.
• More APIs are included for both audio and video.
• HTML5 supports the following:
o embedded Scalable Vector Graphics (SVG) files
o the Geolocation API
o drag-and-drop capability
Copyr i g ht © 2012, SAS Ins t i tu t e Inc . A l l r ights reser ve d .
Desktop Applications: Overview
• Modifying printed output
• Exporting Microsoft Excel pivot tables that contain visual displays
• Adding computed fields to pivot tables that are exported from the web
Copyr i g ht © 2012, SAS Ins t i tu t e Inc . A l l r ights reser ve d .
Modifying Printed Output
• Repeating column headers across printed web pages
• Removing page breaks from output
• Adding styles only to the printed output
Copyr i g ht © 2012, SAS Ins t i tu t e Inc . A l l r ights reser ve d .
Repeating Column Headers across Printed
Web Pages
ods html file="temp.html"
headtext='<style>thead {display:table-header-group} </style>';
proc print data=sashelp.prdsale;
run;
ods html close;
Copyr i g ht © 2012, SAS Ins t i tu t e Inc . A l l r ights reser ve d .
Removing Page Breaks From Output
ods html file='nobreak.html' options(pagebreak='no');
proc print data=sashelp.class;
run;
proc print data=sashelp.class;
run;
ods html close;
Copyr i g ht © 2012, SAS Ins t i tu t e Inc . A l l r ights reser ve d .
Adding Styles Only to the Printed Output
@media print {
*{ font-family:times,serif;color:red;}
}
ods html file="c:\temp.html"
stylesheet=(url="c:\print.css");
proc print data=sashelp.prdsale(obs=10);
title "Using the @Media Rule";
footnote;
run;
ods html close;
Viewed in the BrowserPrinted Output
Copyr i g ht © 2012, SAS Ins t i tu t e Inc . A l l r ights reser ve d .
Exporting Microsoft Excel Pivot Tables That Contain Visual Displays
• Using the sample tableEditor tagset, you can export a Microsoft Excel pivot table from
Windows Internet Explorer.
• Download the tagset from the SAS Customer Support site:
support.sas.com/rnd/base/ods/odsmarkup/index.html
• You can add data-visualization features (such as data bars, icons, or color scale
output) to your tables.
Copyr i g ht © 2012, SAS Ins t i tu t e Inc . A l l r ights reser ve d .
Exporting Microsoft Excel Pivot Tables That
Contain Visual Displays (continued)
ods tagsets.tableeditor file="temp.html"
options(format_condition="databar,2-9"
pivotrow="product_category"
pivotcol="quarter"
pivotdata="profit"
pivotdata_caption="Profit Analysis"
pivot_grandtotal="no");
proc print data=sashelp.orsales;
where quarter in("1999Q1","1999Q2","1999Q3","1999Q4",
"2000Q1","2000Q2","2000Q3","2000Q4");
run;
ods tagsets.tableeditor close;
Copyr i g ht © 2012, SAS Ins t i tu t e Inc . A l l r ights reser ve d .
Adding Computed Fields to Pivot Tables
ods tagsets.tableeditor file="temp.html"
options(addfield="Returns =Profit*.05,Actual_profit =Profit*1.05"
pivotdata="Profit,returns,actual_profit"
pivotrow="product_category"
pivotdata_fmt="#,###,##"
pivotdata_caption="Gross_Profit,Return_Amount,Net_Profit"
pivotdata_tocolumns="yes"
format_condition=",colorscale,4"
pivot_grandtotal="no");
proc print data=sashelp.orsales;
run;
ods tagsets.tableeditor close;
Copyr i g ht © 2012, SAS Ins t i tu t e Inc . A l l r ights reser ve d .
ODS Enhancements for HTML in SAS® 9.4
• The new ODS Destinations for SAS 9.4
• ODS HTML5
• ODS EPUB
• ODS POWERPOINT
• ODS Layout and the Report Writing Interface
• New ODS Procedures for SAS 9.4
• PROC ODSTABLE
• PROC ODSLIST
• PROC ODSTEXT
Copyr i g ht © 2012, SAS Ins t i tu t e Inc . A l l r ights reser ve d .
ODS Enhancements for HTML in SAS® 9.4
• Includes the new HTML5 destination
• Includes new elements such as the <Header>, <Article>, and <section> tags
• Provides the ability to create embedded SVG files with HTML5
• Provides a face-lift to the style that is used with the HTML destinations
Copyr i g ht © 2012, SAS Ins t i tu t e Inc . A l l r ights reser ve d .
SVG File
goptions device=svg;
ods html5 options(svg_mode='embed');
title "Actual sales versus predicted";
proc gplot data=sashelp.prdsale;
plot actual*predict;
run;
quit;
ods html5 close;
ODS Enhancements for HTML in SAS® 9.4 (continued)
Copyr i g ht © 2012, SAS Ins t i tu t e Inc . A l l r ights reser ve d .
The ODS EPUB and EPUB2 Destinations
• Create files that are stored in an electronic book format (EPUB)
• Are open-file formats for electronic books, newspapers, and magazines
• Enable you to view content on the Amazon Kindle, Barnes & Noble Nook, and
Apple iBook for the iPhone and the iPad
• Enable you to store fonts that you want to use for viewing files
• Are available beginning with SAS® 9.4
Copyr i g ht © 2012, SAS Ins t i tu t e Inc . A l l r ights reser ve d .
The ODS EPUB and EPUB2 Destinations (continued)
ods epub file="temp.epub" title="Sales Report"
newchapter=output
options(contents="yes");
proc print data=sashelp.prdsale(obs=50);
run;
proc report data=sashelp.orsales(obs=50) nowd;
run;
ods epub close;
Copyr i g ht © 2012, SAS Ins t i tu t e Inc . A l l r ights reser ve d .
ODS Layout or SAS 9.4
Copyr i g ht © 2012, SAS Ins t i tu t e Inc . A l l r ights reser ve d .
Contact Information
Email: [email protected]
Top Related