Style to xml and readability API

Question

i am having problems with my assignment, maybe i can get some hints from here.

I have to make my webpage get information through RSS feed. I made that happen with xml. Now i want to desing the looks, so it would be responsive to web and phones. I tried using css on xml, but i cant seem to add any frameworks to it(tried bootstrap). Otherwise thats a viable option for me.

Also i tried xsl. I added both of the codes here, the xsl also dont work for some reason.

Also i need to add pictures through readability API which I also didnt manage to do.

Im not asking you to do the assignment for me, i just need some tips on how to approach this assingment. Also, how to add pictures though readability API(didnt find any good tutorial)

Thanks in advance for those who can help me somehow and i would really appreciate it.

 <?xml version="1.0" encoding="utf-8"?>
 <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 
 <xsl:template match="/channel">
 <html>
 <body>
 <xsl:for-each select="item">
  <xsl:value-of select="title" />
  <xsl:value-of select="link" />
  <xsl:value-of select="description" />
  <xsl:value-of select="pubDate" />
  <xsl:value-of select="guid" />
  
 </xsl:for-each>
 
 
 </body>
 </html>
 
  </xsl:template>
 
 
 </xsl:stylesheet>

<?xml version="1.0" encoding="utf-8"?>
<!--<?xml-stylesheet href="harjutus.xsl" type="text/xsl" ?> -->
<?xml-stylesheet type="text/css" href="kujundus.css"?>


<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >




<rss xmlns:atom="http://www.w3.org/2005/Atom" version="2.0">
<channel>
<title>rseero's Reading List - Readability</title>
<link>https://www.readability.com/reading-list</link>
<description></description>
<atom:link href="https://www.readability.com/rseero/latest/feed" rel="self">
</atom:link><language>en-us</language>
<lastBuildDate>Tue, 01 Dec 2015 07:41:26 +0000</lastBuildDate>
<item>
<title>Machine learning is the new SQL</title>
<link>http://www.readability.com/read?url=http://www.computerweekly.com/blogs/Data-Matters/2015/11/machine-learning-is-the-new-sql.html</link>
<description>This is a guest blogpost by Oleg Rogynskyy, VP of Marketing &amp;amp; Growth, H2O.ai Before the emergence of today's massive data sets, organisations primarily stored their data in relational databases&amp;hellip;</description>
<pubDate>Tue, 01 Dec 2015 07:41:26 +0000</pubDate>
<guid>http://www.readability.com/read?url=http://www.computerweekly.com/blogs/Data-Matters/2015/11/machine-learning-is-the-new-sql.html</guid>
</item>
<item>
<title>Will Balkanization of Data Science lead to one Empire or many Republics?</title>
<link>http://www.readability.com/read?url=http://www.kdnuggets.com/2015/11/balkanization-data-science.html</link>
<description>We examine the &amp;#x201C;Technoslavia&amp;#x201D; of the Big Data and Data Science market and consider whether it is likely to lead to a unified empire or a federation of independent republics. comments By&amp;hellip;</description>
<pubDate>Mon, 30 Nov 2015 19:32:14 +0000</pubDate>
<guid>http://www.readability.com/read?url=http://www.kdnuggets.com/2015/11/balkanization-data-science.html</guid>
</item>
<item>
<title>Introducing: SQL Server 2016 Community Technology Preview 3.1</title>
<link>http://www.readability.com/read?url=http://blogs.technet.com/b/dataplatforminsider/archive/2015/11/30/introducing-sql-server-2016-community-technology-preview-3-1.aspx</link>
<description>The SQL Server 2016 Community Technology Preview (CTP) 3.1 is now available for download! This release fully embraced the &amp;#x201C;Cloud First&amp;#x201D; tenet, as this release build was deployed to SQL&amp;hellip;</description>
<pubDate>Tue, 01 Dec 2015 01:14:01 +0000</pubDate>
<guid>http://www.readability.com/read?url=http://blogs.technet.com/b/dataplatforminsider/archive/2015/11/30/introducing-sql-server-2016-community-technology-preview-3-1.aspx</guid>
</item>
<item>
<title>Raspberry Pi Zero: A $5 ARM Board Experience</title>
<link>http://www.readability.com/read?url=http://www.phoronix.com/scan.php?px=Raspberry-Pi-Zero&amp;page=news_item</link>
<description>Michael Larabel is the principal author of Phoronix.com and founded the site in 2004 with a focus on enriching the Linux hardware experience. Michael has written more than 10,000 articles covering&amp;hellip;</description>
<pubDate>Thu, 26 Nov 2015 19:12:19 +0000</pubDate>
<guid>http://www.readability.com/read?url=http://www.phoronix.com/scan.php?px=Raspberry-Pi-Zero&amp;page=news_item</guid>
</item>
<item>
<title>The New WordPress.com</title>
<link>http://www.readability.com/read?url=https://developer.wordpress.com/calypso/</link>
<description>Introducing A single interface to manage all your WordPress.com or Jetpack-enabled sites, built with the latest web technologies and used by millions of people &amp;#x2014; and now it's open source.</description>
<pubDate>Mon, 23 Nov 2015 17:05:14 +0000</pubDate>
<guid>http://www.readability.com/read?url=https://developer.wordpress.com/calypso/</guid>
</item>
<item>
<title>Automated provisioning and SSO between Azure AD and Facebook at Work!</title>
<link>http://www.readability.com/read?url=http://blogs.technet.com/b/ad/archive/2015/11/12/now-available-automated-provisioning-and-sso-between-azure-ad-and-facebook-at-work.aspx</link>
<description>Howdy folks, Cool news to share today! We've just GA'd automated provisioning and federation based single sign-on between Azure AD and Facebook at Work. Facebook at Work is a business version of&amp;hellip;</description>
<pubDate>Thu, 12 Nov 2015 17:21:38 +0000</pubDate>
<guid>http://www.readability.com/read?url=http://blogs.technet.com/b/ad/archive/2015/11/12/now-available-automated-provisioning-and-sso-between-azure-ad-and-facebook-at-work.aspx</guid>
</item>
<item>
<title>Extending Office everywhere</title>
<link>http://www.readability.com/read?url=http://blogs.msdn.com/b/stevengu/archive/2015/10/14/extending-office-everywhere.aspx?wt.mc_id=DX_13027</link>
<description>Today more than 1 billion people use Microsoft Office, spending on average 2-3 hours a day in Office apps.  Developers are reaching this global Office customer base by extending the familiar Office&amp;hellip;</description>
<pubDate>Fri, 13 Nov 2015 17:04:04 +0000</pubDate>
<guid>http://www.readability.com/read?url=http://blogs.msdn.com/b/stevengu/archive/2015/10/14/extending-office-everywhere.aspx?wt.mc_id=DX_13027</guid>
</item><item><title>Guess Who's Coming to Thanksgiving? SharePoint 2016 Beta 2 #ESPC15</title>
<link>http://www.readability.com/read?url=http://www.cmswire.com/social-business/guess-whos-coming-to-thanksgiving-sharepoint-2016-beta-2-espc15/</link>
<description>STOCKHOLM &amp;#x2014; Microsoft sent its top SharePoint leadership team to present the keynote at the European SharePoint Conference 2015, happening November 9 to 13:&amp;#xA0;Jeff Teper, corporate vice&amp;hellip;</description>
<pubDate>Tue, 10 Nov 2015 17:43:12 +0000</pubDate>
<guid>http://www.readability.com/read?url=http://www.cmswire.com/social-business/guess-whos-coming-to-thanksgiving-sharepoint-2016-beta-2-espc15/</guid>
</item>
<item>
<title>Windows 10 Enterprise Data Protection – Under the hood…</title>
<link>http://www.readability.com/read?url=http://ronnydejong.com/2015/11/09/enterprise-data-protection-under-the-hood/</link>
<description>UPDATE: Stay on Windows 10 Version 1511 th2 build 10576 if you want to test Enterprise Data Protection! In this blog I&amp;#x2019;ll cover a brand new Windows 10 feature, Enterprise Data Protection&amp;hellip;</description>
<pubDate>Mon, 09 Nov 2015 14:48:20 +0000</pubDate>
<guid>http://www.readability.com/read?url=http://ronnydejong.com/2015/11/09/enterprise-data-protection-under-the-hood/</guid>
</item>
<item>
<title>Artificial intelligence: ‘Homo sapiens will be split into a handful of gods and the rest of us’</title>
<link>http://www.readability.com/read?url=http://www.theguardian.com/business/2015/nov/07/artificial-intelligence-homo-sapiens-split-handful-gods</link>
<description>If you wanted relief from stories about tyre factories and steel plants closing, you could try relaxing with a new 300-page report from Bank of America Merrill Lynch which looks at the likely effects&amp;hellip;</description>
<pubDate>Sat, 07 Nov 2015 16:22:52 +0000</pubDate>
<guid>http://www.readability.com/read?url=http://www.theguardian.com/business/2015/nov/07/artificial-intelligence-homo-sapiens-split-handful-gods</guid>
</item>
<item>
<title>Here's What's New in the Windows 10 Fall Update</title>
<link>http://www.readability.com/read?url=https://www.thurrott.com/windows/windows-10/7695/heres-whats-new-in-the-windows-10-fall-update</link>
<description>Sometime soon, Microsoft will release the Windows 10 Fall Update, incrementing the OS to version 1511 and providing users with a number of new and improved features. Here&amp;#x2019;s what you can expect&amp;hellip;</description>
<pubDate>Sun, 08 Nov 2015 03:55:22 +0000</pubDate>
<guid>http://www.readability.com/read?url=https://www.thurrott.com/windows/windows-10/7695/heres-whats-new-in-the-windows-10-fall-update</guid>
</item>
<item>
<title>Office 365 admin updates—from portal enhancements to PowerShell</title>
<link>http://www.readability.com/read?url=https://blogs.office.com/2015/11/04/office-365-admin-updates-from-portal-enhancements-to-powershell/</link>
<description>If you are an Office 365 administrator, there are a number of new tools, reports and resources coming to help save you time when managing Office 365. On today&amp;#x2019;s Microsoft Mechanics, Lawrence&amp;hellip;</description>
<pubDate>Wed, 04 Nov 2015 17:30:29 +0000</pubDate>
<guid>http://www.readability.com/read?url=https://blogs.office.com/2015/11/04/office-365-admin-updates-from-portal-enhancements-to-powershell/</guid>
</item>
<item>
<title>Microsoft readying Windows 10 Store for Business</title>
<link>http://www.readability.com/read?url=http://www.zdnet.com/article/microsoft-readying-windows-10-store-for-business/</link>
<description>Microsoft is readying its promised Windows Store for Business for Windows 10, and has made available some initial information on the coming Store as of November 4.The Windows Store for Business is&amp;hellip;</description>
<pubDate>Wed, 04 Nov 2015 23:15:29 +0000</pubDate>
<guid>http://www.readability.com/read?url=http://www.zdnet.com/article/microsoft-readying-windows-10-store-for-business/</guid>
</item>
<item>
<title>SQL Server 2016: Everything built-in</title>
<link>http://www.readability.com/read?url=http://blogs.technet.com/b/dataplatforminsider/archive/2015/10/28/sql-server-2016-everything-built-in.aspx?wt.mc_id=WW_CE_DM_OO_SCL_TW</link>
<description>This post was authored by Joseph Sirosh, Corporate Vice President of the Data Group at Microsoft. Announcing SQL Server 2016 CTP 3.0, Azure Data Lake preview and much more. We live in the age of&amp;hellip;</description>
<pubDate>Fri, 30 Oct 2015 07:45:04 +0000</pubDate>
<guid>http://www.readability.com/read?url=http://blogs.technet.com/b/dataplatforminsider/archive/2015/10/28/sql-server-2016-everything-built-in.aspx?wt.mc_id=WW_CE_DM_OO_SCL_TW</guid>
</item>
<item>
<title>Getting Started with Apache Spark</title>
<link>http://www.readability.com/read?url=https://www.mapr.com/getting-started-apache-spark?source=Social&amp;campaign=2015_Social_Blog</link>
<description>Getting Started with Apache Spark From Inception to Production Apache Spark is a powerful, multi-purpose execution engine for big data enabling rapid application development and high performance. Jim&amp;hellip;</description>
<pubDate>Sun, 01 Nov 2015 11:13:12 +0000</pubDate>
<guid>http://www.readability.com/read?url=https://www.mapr.com/getting-started-apache-spark?source=Social&amp;campaign=2015_Social_Blog</guid>
</item>
</channel>
</rss>

At the moment I don't have enough time to try it out, but you can use javascript to get the feed, then loop through all items (use jQuery's .find() for example) and then write it into an html document which you format using CSS as normal. Here is a previous SO answer which might help: [link](http://stackoverflow.com/questions/10943544/how-to-parse-an-rss-feed-using-javascript). — , Jan 30 '16 at 15:54
1. Your input xml document is malformed. Your first link element has an open tag, but no matching close. This is valid for HTML, but invalid for XML. Please correct. 2. Your only statement about what you want the output to be ("I have to make my webpage get information") is incredibly vague. Please post a listing of what you want the html output for the given sample input. — Sean B. Durkin, Jan 31 '16 at 04:03

Sean B. Durkin · Answer 1 · 2016-01-31T06:13:32.227

Here is an example of how to make this transformation using the Saxon CE javascript library.

You can either use a stub-html page approach, or a direct transform (xml-stylesheet processing-instruction). I will show the first approach, but you can easily tweak this to the direct transform approach, if you want. Let us say your data source has relative URL feed.xml and content ...

Input document

<rss xmlns:atom="http://www.w3.org/2005/Atom" version="2.0">
<channel>
    <title>rseero's Reading List - Readability</title>
    <link>https://www.readability.com/reading-list</link>
    <description/>
    <atom:link href="https://www.readability.com/rseero/latest/feed" rel="self">
</atom:link>
<language>en-us</language>
<lastBuildDate>Tue, 01 Dec 2015 07:41:26 +0000</lastBuildDate>
<item>
    <title>Machine learning is the new SQL</title>
    <link>http://www.readability.com/read?url=http://www.computerweekly.com/blogs/Data-Matters/2015/11/machine-learning-is-the-new-sql.html</link>
    <description>This is a guest blogpost by Oleg Rogynskyy, VP of Marketing &amp; Growth, H2O.ai Before the emergence of today's massive data sets, organisations primarily stored their data in relational databases&#x2026;</description>
    <pubDate>Tue, 01 Dec 2015 07:41:26 +0000</pubDate>
    <guid>http://www.readability.com/read?url=http://www.computerweekly.com/blogs/Data-Matters/2015/11/machine-learning-is-the-new-sql.html</guid>
</item>
<item>
    <title>Will Balkanization of Data Science lead to one Empire or many Republics?</title>
    <link>http://www.readability.com/read?url=http://www.kdnuggets.com/2015/11/balkanization-data-science.html</link>
    <description>We examine the &#x201C;Technoslavia&#x201D; of the Big Data and Data Science market and consider whether it is likely to lead to a unified empire or a federation of independent republics. comments Bys&#x2026;</description>
    <pubDate>Mon, 30 Nov 2015 19:32:14 +0000</pubDate>
    <guid>http://www.readability.com/read?url=http://www.kdnuggets.com/2015/11/balkanization-data-science.html</guid>
</item>
</channel>
</rss>

If you want to get the data from a remote location (such as https://www.readability.com/rseero/latest/feed), then some adjustment will be required. Let me know if this is the case.

When this stub html page is opened in a browser ...

Stub page

<html>
<head>
  <script type="text/javascript" language="javascript" src="libraries/saxon/Saxonce/Saxonce.nocache.js"></script>
  <script type="application/xslt+xml" language="xslt2.0"
          src="rss.xsl"
          data-source="feed.xml"
          data-initial-template="main">
  </script>
</head>
<body>
    <div id="body">Please wait. Loading ...</div>
</body>
</html>

... it will call an XSLT 2.0 stylesheet with relative URL rss.xsl to transform your xml input document. This assumes that you have installed Saxon CE on your server. The Saxon CE library should be at relative URL libraries/saxon/Saxonce/.

This XSLT 2.0 transform, with relative URL rss.xsl ...

<xsl:transform
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    version="2.0">    

<xsl:strip-space elements="*" />

<xsl:template match="/" name="main">
  <xsl:result-document href="#body" method="replace-content">   
    <xsl:apply-templates select="rss/channel" />
  </xsl:result-document>    
</xsl:template>

<xsl:template match="channel">
   <h1><xsl:value-of select="title" /></h1>
   <p><xsl:value-of select="description" /></p>
   <hr />
   <xsl:apply-templates select="item" />
</xsl:template>

<xsl:template match="item">
   <h2><xsl:value-of select="title" /></h2>
   <p><xsl:value-of select="description" /></p>
   <p><a href="{link}">Click here for link.</a></p>
</xsl:template>

<xsl:template match="@*|node()">
   <xsl:copy>
     <xsl:apply-templates select="@*|node()" />
   </xsl:copy>
</xsl:template>

</xsl:transform>

... when applied to the input document will yield this output document ...

<html>
<head>
  <script type="text/javascript" language="javascript" src="libraries/saxon/Saxonce/Saxonce.nocache.js"></script>
</head>
<body>
    <div id="body">
      <h1>rseero's Reading List - Readability</h1>
      <p></p>
      <hr>
      <h2>Machine learning is the new SQL</h2>
      <p>This is a guest blogpost by Oleg Rogynskyy, VP of Marketing &amp; Growth, H2O.ai Before
         the emergence of today's massive data sets, organisations primarily stored their data
         in relational databases…
      </p>
      <p><a href="http://www.readability.com/read?url=http://www.computerweekly.com/blogs/Data-Matters/2015/11/machine-learning-is-the-new-sql.html">Click here for link.</a></p>
      <h2>Will Balkanization of Data Science lead to one Empire or many Republics?</h2>
      <p>We examine the “Technoslavia” of the Big Data and Data Science market and consider
         whether it is likely to lead to a unified empire or a federation of independent republics.
         comments Bys…
      </p>
      <p><a href="http://www.readability.com/read?url=http://www.kdnuggets.com/2015/11/balkanization-data-science.html">Click here for link.</a></p>
    </div>
</body>
</html>

"If you want to get the data from a remote location (such as https://www.readability.com/rseero/latest/feed), then some adjustment will be required. Let me know if this is the case." ----- Yes, this is the case. And also thank you! — raouaoul, Jan 31 '16 at 20:25

Style to xml and readability API

1 Answers1

Input document

Stub page