the sas output delivery system: boldly take your web … group... · 2016-03-11 · • html5 is...

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


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


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.


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


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


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




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/.

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> 

<div data-role="content">. . .more lines. . .</div>

<div data-role="footer">. . .more lines. . .</div> 

</div>

</body>

</html>

Viewport tag

Hosted CSS and script

Page layout


ODS MARKUP

+

jQuery Mobile

Layouts

Headers/

Footers

Icons

Themes

UI Events

Transitions

SAS®

ODS Markup Language and jQuery Mobile

Framework


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.


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;


jQueryMobile Tagset: Collapsible Layoutods tagsets.jQueryMobile file="temp.html"

options(data_role="collapsible")

proc report data=sashelp.prdsale nowd;

run;


run;

proc freq data=sashelp.prdsale;

run;

proc univariate data=sashelp.class;

run;

. . .more procedure steps . . .



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");


run;

proc print data=sashelp.prdsale noobs;;

run;

. . .more procedure steps . . .


jQueryMobile Tagset: Collapsible Layout


jQueryMobile Tagset: Listview Layoutods tagsets.jQueryMobile file="temp.html"

contents="contents.html"

options(data_role="listview")


run;

proc print data=sashelp.prdsale noobs;

by age;

run;


tables age height;

run;

. . .more procedure steps. . .



jQueryMobile Tagset: Tab Layout

ods tagsets.jQueryMobile file="temp.html"

options(web_tabs=

"Sales,Revenue,Profit");


run;


run;

. . .more procedure steps. . .


data_theme="e"

ods tagsets.jQueryMobile file="theme.html"


data_theme="a"

header="Report Of

Earnings"

footer="Summary Report");


run;


run;


run;

…


jQueryMobile Tagset: Themes

ods tagsets.jQueryMobile file="theme.html"


footer="Summary Report");

ods tagsets.jQueryMobile

options(data_content_theme="a");


run;

ods tagsets.jQueryMobile

options(data_content_theme="b");


run;

…


data_theme="b"data_theme="c"data_theme="d"data_theme="e"


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;


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;


Mobile Applications: Calling Native Applications (continued)


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;


Web Applications: Using the Google GeolocationAPI to Determine Location

Checks browser

support

Passes the object


Web Applications: Using the Google Geolocation

API to Determine Location (continued)

"


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


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;


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;


title;

run;

ods html5 close;


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.


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


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;

}


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.


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


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


Modifying Printed Output

• Repeating column headers across printed web pages

• Removing page breaks from output

• Adding styles only to the printed output


Repeating Column Headers across Printed

Web Pages

ods html file="temp.html"

headtext='<style>thead {display:table-header-group} </style>';


run;

ods html close;


Removing Page Breaks From Output

ods html file='nobreak.html' options(pagebreak='no');


run;


run;

ods html close;


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


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.


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;


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;


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


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


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)


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


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;


ODS Layout or SAS 9.4


Contact Information

Email: [email protected]

mailto:[email protected]

the sas output delivery system: boldly take your web … group... · 2016-03-11 · • html5 is...

Documents