THE SAS OUTPUT DELIVERY SYSTEM: BOLDLY TAKE YOUR WEB PAGES WHERE THEY HAVE NEVER GONE BEFORE! CHEVELL PARKER, SAS INSTITUTE INC.

Transcription

2 Overview Mobile technology and web applications Web content across mobile and desktop devices (CSS and HTML advancements) Web content for desktop applications

3 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

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

5 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

6 Optimizing Mobile Output (continued) Setting the Viewport <meta name="viewport" content="width=320"> <meta name="viewport" content= device-width"> Viewport default width=980px <meta name="viewport" content= initial-scale=1">

7 Width=480px Optimizing Mobile Output (continued) Before After Viewport=980px ods html file="temp.html" metatext='name="viewport" content="width=devicewidth"; width=320px proc print data=sashelp.class; title "ODS Output Using Viewport Information"; ods html close;

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

9 Optimizing Mobile Output (continued) Mobile Page Structure Viewport tag <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href=" min.css" /> <script src=" <script src=" 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> Hosted CSS and script Page layout

10 SAS ODS Markup Language and jquery Mobile Framework Layouts UI Events ODS MARKUP + jquery Mobile Headers/ Footers Transitions Icons Themes

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

12 jquerymobile Tagset: Page Layout ods tagsets.jquerymobile file="c:\temp.html" options(data_role="page"); proc print data=sashelp.prdsale; proc report data=sashelp.class nowd; ods tagsets.jquerymobile close;

13 jquerymobile Tagset: Collapsible Layout ods tagsets.jquerymobile file="temp.html" options(data_role="collapsible") proc report data=sashelp.prdsale nowd; proc print data=sashelp.class; proc freq data=sashelp.prdsale; proc univariate data=sashelp.class;...more procedure steps... ods tagsets.jquerymobile close;

14 jquerymobile Tagset: Collapsible Layout 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; proc print data=sashelp.prdsale noobs;;...more procedure steps... ods tagsets.jquerymobile close;

15 jquerymobile Tagset: Listview Layout ods tagsets.jquerymobile file="temp.html" contents="contents.html" options(data_role="listview") proc report data=sashelp.prdsale nowd; proc print data=sashelp.prdsale noobs; by age; proc freq data=sashelp.prdsale; tables age height;...more procedure steps... ods tagsets.jquerymobile close;

16 jquerymobile Tagset: Tab Layout ods tagsets.jquerymobile file="temp.html" options(web_tabs= "Sales,Revenue,Profit"); proc print data=sashelp.prdsale; proc report data=sashelp.prdsale nowd;...more procedure steps... ods tagsets.jquerymobile close;

17 jquerymobile Tagset: Themes ods ods tagsets.jquerymobile tagsets.jquerymobile file="theme.html" file="theme.html" options(data_role="collapsible" options(data_role="collapsible" data_theme="b" data_theme="e" data_theme="c" data_theme="d" data_theme="a" header="report footer="summary Of Report"); Earnings" ods tagsets.jquerymobile footer="summary Report"); options(data_content_theme="a"); data_theme="e" proc report data=sashelp.prdsale nowd; proc report data=sashelp.prdsale nowd; proc print data=sashelp.prdsale noobs; ods tagsets.jquerymobile options(data_content_theme="b"); proc freq data=sashelp.prdsale; proc print data=sashelp.prdsale noobs; ods tagsets.jquerymobile close; ods tagsets.jquerymobile close;

18 Mobile Applications: Calling Native Applications data one; infile cards ; input Address $1-23 Message $ $39-57 Mobile $59-72; cards; 400 Broad St, Durham NC Please contact realty@company.com Duke St, Durham NC Please contact sunreal@company.com th St, Durham NC Please contact libreal@company.com ;

19 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 mobile; compute mobile; call define('mobile',"url",cat("tel:",mobile)); call define('message',"url",cat("sms:",mobile)); call define(' ',"url",cat("mailto:", ,"?body=",message)); call define('address',"url",cat(" endcomp; ods html close;

20 Mobile Applications: Calling Native Applications (continued)

21 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 mobile; compute mobile; urlstring=" trim(left(address)) '&zoom=14&size=400x400& sensor=false'; call define(_col_,"url",urlstring); endcomp; ods html close;

22 Web Applications: Using the Google Geolocation API to Determine Location Checks browser support Passes the object

23 Web Applications: Using the Google Geolocation API to Determine Location (continued) "

24 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

25 CSS Style Enhancements CSS3 and HTML5 introduce features that previously were available only in desktop publishing applications. The enhancements include the following capabilities: o o o generating animation, gradients, font shadows, and rounded borders rotating text and objects using media queries to detect a particular device Only some of the many new features are supported by browsers.

26 CSS3 Style Enhancements proc template; define style styles.test; parent=styles.htmlblue; class class header body / prehtml="<span prehtml="<div style=""-ms-transform:rotate(30deg); style=""-ms-transform:rotate(30deg)"">" posthtml="</span>"; border:2px solid; class body / pretext="<div box-shadow: 10px 10px 5px #888888"">"; style=""filter:progid:dximagetransform.microsoft.gradient(sta rtcolorstr='#dddddd', posthtml="</div>"; endcolorstr='#000000');"">" end; posttext="</div>"; end; ods html5 file="c:\temp.html" style=styles.test; ods html5 file="c:\temp.html" style=styles.test; proc print data=sashelp.class; proc print data=sashelp.class; title; ods html5 close; ods html5 close;

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

28 CSS3 Media Queries for Detecting Devices (continued) Device Resolution Device-Width/Device-Height iphone 320 X X480, in both portrait and landscape mode iphone X X 480, in both portrait and landscape mode CSS pixel density is 2 ipad1 and ipad2 769 X X1024 in both portrait and landscape ipad X X1024, in both portrait and landscape mode CSS pixel density is X 533, in portrait mode Samsung Galaxy S I and II 480 X 800 CSS Pixel density 1.5 Samsung Galaxy S III 720 X X 640, in portrait mode

29 CSS3 Feature: Media Queries for Detecting Devices (continued) /* Adjust width for an ipad in landscape */ /* /* mode Mobile Tablets: /* and Phones: Desktops change Portrait Portrait background */ Landscape or Landscape color. screen screen and (min-device-width: and (min-width: 1024px) only screen screen { and (max-device-width: 640px) and { (min-device-width backgound-color-green; and (max-device-width: : 768px) 1024px) and background-color:green; (max-device-width } : 1024px) and } { (orientation : landscape) { background-color:green; {body:background-color:green} } }

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

31 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 o o embedded Scalable Vector Graphics (SVG) files the Geolocation API drag-and-drop capability

32 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

33 Modifying Printed Output Repeating column headers across printed web pages Removing page breaks from output Adding styles only to the printed output

34 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; ods html close;

35 Removing Page Breaks From Output ods html file='nobreak.html' options(pagebreak='no'); proc print data=sashelp.class; proc print data=sashelp.class; ods html close;

36 Adding Styles Only to the Printed print { *{ font-family:times,serif;color:red;} } Viewed in the Browser Printed Output ods html file="c:\temp.html" stylesheet=(url="c:\print.css"); proc print data=sashelp.prdsale(obs=10); title "Using Rule"; footnote; ods html close;

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

38 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"); ods tagsets.tableeditor close;

39 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; ods tagsets.tableeditor close;

40 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

41 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

42 ODS Enhancements for HTML in SAS 9.4 (continued) SVG File goptions device=svg; ods html5 options(svg_mode='embed'); title "Actual sales versus predicted"; proc gplot data=sashelp.prdsale; plot actual*predict; quit; ods html5 close;

43 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

44 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); proc report data=sashelp.orsales(obs=50) nowd; ods epub close;

45 ODS Layout or SAS 9.4

46 Contact Information