Copy and paste these functioning code snippets with our public key or generate a PDF from your own HTML and CSS. No account required!
curl http://YOUR_API_KEY_HERE@docraptor.com/docs \
--fail --silent --show-error \
--header "Content-Type:application/json" \
--data '{"test": true,
"document_url": "<%= doc_url %>",
"type": "<%= doc_type %>" }' > docraptor.<%= doc_type %>
# add to your Gemfile: gem "docraptor"
# run bundle install
require "docraptor"
DocRaptor.configure do |dr|
dr.username = "YOUR_API_KEY_HERE"
end
$docraptor = DocRaptor::DocApi.new
response = $docraptor.create_doc(
test: true,
document_url: "<%= doc_url %>",
name: "docraptor-ruby.<%= doc_type %>",
document_type: "<%= doc_type %>",
)
# run: pip install docraptor
import docraptor
doc_api = docraptor.DocApi()
doc_api.api_client.configuration.username = "YOUR_API_KEY_HERE"
response = doc_api.create_doc({
"test": True,
"document_url": "<%= doc_url %>",
"name": "docraptor-python.<%= doc_type %>",
"document_type": "<%= doc_type %>",
})
// npm install restler
var sys = require("util"),
fs = require("fs"),
rest = require("restler"),
p = console.log;
rest.postJson("https://docraptor.com/docs", {
user_credentials: "YOUR_API_KEY_HERE",
doc: {
document_url: "<%=doc_url%>",
type: "<%=doc_type%>",
test: true
}
}).on("success", function(data, response) {
fs.writeFile("javascript_sample.<%=doc_type%>", response.raw, "binary", function(err){if(err) throw err;});
p("Success Creating Document");
p("Check out \"javascript_sample.<%=doc_type%>\" in this directory");
}).on("fail", function(data, response) {
p("Failure Creating Document");
p(data);
}).on("error", function(err, response) {
p("Error Creating Document");
p(err);
});
<?php
# run: composer install docraptor/docraptor
$docraptor = new DocRaptor\DocApi();
$docraptor->getConfig()->setUsername("YOUR_API_KEY_HERE");
$doc = new DocRaptor\Doc();
$doc->setTest(true);
$doc->setDocumentUrl("<%= doc_url %> ");
$doc->setName("docraptor-php.<%= doc_type %>");
$doc->setDocumentType("<%= doc_type %>");
$create_response = $docraptor->createDoc($doc);
// Add to pom.xml
// <dependency>
// <groupId>com.docraptor</groupId>
// <artifactId>docraptor</artifactId>
// <version>2.0.0</version>
// </dependency>
//
// or get JARs from https://github.com/DocRaptor/docraptor-java/releases
import java.io.*;
import java.net.*;
import com.docraptor.*;
public class Sync {
public static void main(String[] args) throws Exception {
DocApi docraptor = new DocApi();
ApiClient client = docraptor.getApiClient();
client.setUsername("YOUR_API_KEY_HERE");
Doc doc = new Doc();
doc.setTest(true);
doc.setDocumentUrl("<%= doc_url %>");
doc.setDocumentType(Doc.DocumentTypeEnum.<%= doc_type_upcase %>);
doc.setName("docraptor-java.<%= doc_type %>");
docraptor.createDoc(doc);
}
}
// In the package manager console:
// Install-Package DocRaptor
//
// or get DLLs from https://github.com/DocRaptor/docraptor-csharp/releases
using DocRaptor.Client;
using DocRaptor.Model;
using DocRaptor.Api;
using System.IO;
class Example {
static void Main(string[] args) {
DocApi docraptor = new DocApi();
docraptor.Configuration.Username = "YOUR_API_KEY_HERE";
Doc doc = new Doc(
test: true,
documentUrl: "<%= doc_url %>",
name: "docraptor-csharp.<%= doc_type %>",
documentType: Doc.DocumentTypeEnum.<%= doc_type_capitalized %>
);
byte[] createResponse = docraptor.CreateDoc(doc);
}
}
Copy and paste in your own HTML, or select and edit one of our sample documents.
<!DOCTYPE html>
<html>
<head>
<title>Your New Project for Our Best Client</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*resets from YUI*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0; padding:0;}
table {border-collapse:collapse; border-spacing:0;}
fieldset,img {border:0;}
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal; font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-size:100%; font-weight:normal;}
q:before,q:after {content:;}
abbr,acronym { border:0;}
/* setup the page */
@page { margin: 30px; background: #ffffff; }
/* setup the footer */
@page { @bottom { content: flow(foot); } }
#footer { flow: static(foot); }
/* some useful defaults */
th, td, caption { padding: 4px 10px 4px 5px; }
/* useful utility */
.clear { clear:both; }
/* layout */
#container { font-family: Omnes Light, Trebuchet MS, Calibri, Futura, Geneva, Tahoma; font-size: 14pt; color: #a7a7a7; position: relative; }
/* footer shenanigans! */
#footer { text-align: center; display: block; }
/* hack around the way prince handles the footer */
#footer #contain { display: inline-block; width: 700px; height: 60px; }
/* end hack */
/* colors */
.black { color: black }
/* stylin */
#logo { color: red; align:left; position: absolute; top: 30px; left: 30px; }
#main { margin: 0 30px; }
#header { font-size: 0.5em; text-align: right; margin-top: 6em; }
#header span.black { font-size: 1em; margin: 0 0.75em; }
#quote_name { margin-top: 3.5em; text-align: right; font-weight: bold; font-size: 1.5em }
#client { font-size: 0.75em; margin-top: 3em; margin-left: 0.5em;}
#client_header { font-size: 0.5em; }
#phase_details {
margin-top: 2em;
font-size: 0.6em;
border-width: 1px;
border-spacing: 0px;
border-style: solid;
border-color: gray;
width: 100%;
}
#phase_details th { font-size: 0.8em; padding: 10px !important; border-style: solid !important; }
#phase_details th, td {
border-width: 1px;
padding: 3px 5px;
border-top-style: none;
border-bottom-style: none;
border-left-style: solid;
border-right-style: solid;
border-color: gray;
background-color: white;
}
#phase_details tr.first td { padding-top: 10px; padding-bottom: 10px; }
#phase_details td.price { text-align: left; }
#phase_details .price_container { float: left; min-width: 30%; }
#phase_details thead .title { width: 20%; }
#phase_details thead .description { width: 60%; }
#phase_details thead .price { width: 20%; }
#phase_details tr.last { border-bottom: 1px solid gray; }
#footer #contain { text-align: right; font-size: 0.8em; }
#total_price { text-align: right; margin-right: 6.75em; margin-top: 0.5em; }
#total_price h2 { color: black; font-size: 0.6em; font-weight: bold; }
#total_price .price { margin-left: 0.75em; }
</style>
</head>
<body>
<div id="container">
<div id="logo">Your Logo</div>
<div id="main">
<div id="header">
<div id="header_info black">1234 Made Up LN <span class="black">|</span> (555)-555-5555 <span class="black">|</span> example.com</div>
</div>
<h1 class="black" id="quote_name">Your New Project</h1>
<div id="client">
<div id="client_header">client:</div>
<p class="address black">
Our Best Cient
</p>
</div>
<table id="phase_details">
<thead>
<tr>
<th class="title">phase title</th>
<th class="description">phase description & features</th>
<th class="price">price</th>
</tr>
</thead>
<tr class="first black">
<td>When We Do Stuff</td>
<td>From 10/10/2010 to 11/11/2011</td>
<td class="price"><div class="price_container">$300</div></td>
</tr>
<tr>
<td></td>
<td>Doing Stuff</td>
<td class="price"><div class="price_container">$200</div></td>
</tr>
<tr>
<td></td>
<td>Doing More Awesome Stuff</td>
<td class="price"><div class="price_container">$100</div></td>
</tr>
<tr class="last">
<td></td><td></td><td></td>
</tr>
<tr class="first black">
<td>In The Future</td>
<td>From 5/5/2015 to 6/7/2018</td>
<td class="price"><div class="price_container">$800</div></td>
</tr>
<tr>
<td></td>
<td>Future Stuff</td>
<td class="price"><div class="price_container">$500</div></td>
</tr>
<tr>
<td></td>
<td>Way Out There</td>
<td class="price"><div class="price_container">$300</div></td>
</tr>
<tr class="last">
<td></td><td></td><td></td>
</tr>
</table>
</div>
<div id="total_price">
<h2>TOTAL: <span class="price black">$1100</span></h2>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<base href="https://docraptor.com/">
<title>Five Things You Should Know About HTML5 - Dive Into HTML5</title>
<link rel="stylesheet" href="/samples/diveintohtml5.screen.css">
<style>
h1:before{content:"Introduction:"}
h2{text-align:left;text-transform:inherit}
</style>
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="/samples/diveintohtml5.mobile.css">
</head>
<body>
<p>You are here: <a href="https://web.archive.org/web/20170614100030/http://diveintohtml5.info/index.html">Home</a> <span class="u triangularBullet"></span> <a href="https://web.archive.org/web/20170614100030/http://diveintohtml5.info/table-of-contents.html#introduction">Dive Into <abbr>HTML5</abbr></a> <span class="u triangularBullet"></span>
<h1><br>Five Things You Should Know About HTML5</h1>
<p id="toc">
<p class="a rotatedFloralHeartBullet">
<h2 id="one">1. It’s not one big thing</h2></p>
<p style="float:right;margin:0 0 1.75em 1.75em"><img src="http://diveintohtml5.info/i/video.png" alt="[mock video player]" width="226" height="166"></p>
<p>You may well ask: “How can I start using <abbr>HTML5</abbr> if older browsers don’t support it?” But the question itself is misleading. <abbr>HTML5</abbr> is not one big thing; it is a collection of individual features. So you can’t detect “<abbr>HTML5</abbr> support,” because that doesn’t make any sense. But you <em>can</em> detect support for individual features, like canvas, video, or geolocation.</p>
<p>You may think of <abbr>HTML</abbr> as tags and angle brackets. That’s an important part of it, but it’s not the whole story. The <abbr>HTML5</abbr> specification also defines how those angle brackets interact with JavaScript, through the Document Object Model (<abbr>DOM</abbr>). <abbr>HTML5</abbr> doesn’t just define a <code><video></code> tag; there is also a corresponding <abbr>DOM</abbr> <abbr>API</abbr> for video objects in the <abbr>DOM</abbr>. You can use this <abbr>API</abbr> to detect support for different video formats, play a video, pause, mute audio, track how much of the video has been downloaded, and everything else you need to build a rich user experience around the <code><video></code> tag itself.</p>
<p><a href="https://web.archive.org/web/20170614100030/http://diveintohtml5.info/detect.html">Chapter 2</a> and <a href="https://web.archive.org/web/20170614100030/http://diveintohtml5.info/everything.html">Appendix A</a> will teach you how to properly detect support for each new <abbr>HTML5</abbr> feature.
<h2 id="two">2. You don’t need to throw anything away</h2>
<p style="float:left;margin:0 1.75em 1.75em 0"><img src="http://diveintohtml5.info/i/forms.png" alt="[sample form controls]" width="134" height="196">
<p>Love it or hate it, you can’t deny that <abbr>HTML</abbr> 4 is the most successful markup format ever. <abbr>HTML5</abbr> builds on that success. You don’t need to throw away your existing markup. You don’t need to relearn things you already know. If your web application worked yesterday in <abbr>HTML</abbr> 4, it will still work today in <abbr>HTML5</abbr>. Period.
<p>Now, if you want to <em>improve</em> your web applications, you’ve come to the right place. Here’s a concrete example: <abbr>HTML5</abbr> supports all the form controls from <abbr>HTML</abbr> 4, but it also includes new input controls. Some of these are long-overdue additions like sliders and date pickers; others are more subtle. For example, the <code>email</code> input type looks just like a text box, but mobile browsers will customize their onscreen keyboard to make it easier to type email addresses. Older browsers that don’t support the <code>email</code> input type will treat it as a regular text field, and the form still works with no markup changes or scripting hacks. This means you can start improving your web forms <em>today</em>, even if some of your visitors are stuck on IE 6.
<p>Read all the gory details about <abbr>HTML5</abbr> forms in <a href="https://web.archive.org/web/20170614100030/http://diveintohtml5.info/forms.html">Chapter 9</a>.
<h2 id="three">3. It’s easy to get started</h2>
<p style="float:right;margin:0 0 1.75em 1.75em"><img src="http://diveintohtml5.info/i/markup-with-arrow.png" alt="[sample HTML markup]" width="234" height="202">
<p>“Upgrading” to <abbr>HTML5</abbr> can be as simple as changing your <i>doctype</i>. The doctype should already be on the first line of every <abbr>HTML</abbr> page. Previous versions of <abbr>HTML</abbr> defined a lot of doctypes, and choosing the right one could be tricky. In <abbr>HTML5</abbr>, there is only one doctype:
<blockquote>
<p><code><!DOCTYPE html></code>
</blockquote>
<p>Upgrading to the <abbr>HTML5</abbr> doctype won’t break your existing markup, because <a rel="external" href="http://www.w3.org/TR/html5-diff/#absent-elements" target="_blank">obsolete elements</a> previously defined in HTML 4 will still render in <abbr>HTML5</abbr>. But it will allow you to use — and validate — new semantic elements like <code><article></code>, <code><section></code>, <code><header></code>, and <code><footer></code>. You’ll learn all about these new elements in <a href="https://web.archive.org/web/20170614100030/http://diveintohtml5.info/semantics.html">Chapter 3</a>.
<h2 id="four">4. It already works</h2>
<p style="float:left;margin:0 1.75em 1.75em 0"><img src="http://diveintohtml5.info/i/rel-email.png" alt="[form field with onscreen keyboard]" width="227" height="192">
<p>Whether you want to draw on a canvas, play video, design better forms, or build web applications that work offline, you’ll find that <abbr>HTML5</abbr> is already well-supported. Firefox, Safari, Chrome, Opera, and mobile browsers already support canvas (<a href="https://web.archive.org/web/20170614100030/http://diveintohtml5.info/canvas.html">Chapter 4</a>), video (<a href="http://diveintohtml5.info/video.html">Chapter 5</a>), geolocation (<a href="https://web.archive.org/web/20170614100030/http://diveintohtml5.info/geolocation.html">Chapter 6</a>), local storage (<a href="http://diveintohtml5.info/storage.html">Chapter 7</a>), and more. Google already supports microdata annotations (<a href="https://web.archive.org/web/20170614100030/http://diveintohtml5.info/extensibility.html">Chapter 10</a>). Even Microsoft — rarely known for blazing the trail of standards support — supports most <abbr>HTML5</abbr> features in Internet Explorer 9.
<p style="float:right;margin:0 0 1.75em 1.75em"><img src="http://diveintohtml5.info/i/gears.png" alt="[Gears saying "I can help"]" width="125" height="75">
<p>Each chapter of this book includes the all-too-familiar browser compatibility charts. But more importantly, each chapter includes a frank discussion of your options if you need to support older browsers. <abbr>HTML5</abbr> features like geolocation (<a href="https://web.archive.org/web/20170614100030/http://diveintohtml5.info/geolocation.html">Chapter 6</a>) and video (<a href="https://web.archive.org/web/20170614100030/http://diveintohtml5.info/video.html">Chapter 5</a>) were first provided by browser plugins like Gears or Flash. Other features, like canvas (<a href="https://web.archive.org/web/20170614100030/http://diveintohtml5.info/canvas.html">Chapter 4</a>), can be emulated entirely in JavaScript. This book will teach you how to target the native features of modern browsers, without leaving older browsers behind.
<h2 id="five">5. It’s here to stay</h2>
<p>Tim Berners-Lee invented the world wide web in the early 1990s. He later founded the <abbr>W3C</abbr> to act as a steward of web standards, which the organization has done for more than 15 years. Here is what the <abbr>W3C</abbr> had to say about the future of web standards, in July 2009:
<blockquote cite="http://www.w3.org/News/2009#item119">
<p>Today the Director announces that when the <abbr>XHTML</abbr> 2 Working Group charter expires as scheduled at the end of 2009, the charter will not be renewed. By doing so, and by increasing resources in the <abbr>HTML</abbr> Working Group, <abbr>W3C</abbr> hopes to accelerate the progress of <abbr>HTML5</abbr> and clarify <abbr>W3C</abbr>’s position regarding the future of <abbr>HTML</abbr>.
</blockquote>
<p><abbr>HTML5</abbr> is here to stay. <a href="https://web.archive.org/web/20170614100030/http://diveintohtml5.info/past.html">Let’s dive in</a>.
<p class="a rotatedFloralHeartBullet">
<div class="pf">
<h4>Did You Know?</h4>
<div class="moneybags">
<blockquote><p>In association with Google Press, O’Reilly is distributing this book in a variety of formats, including paper, ePub, Mobi, and <abbr>DRM</abbr>-free <abbr>PDF</abbr>. The paid edition is called “HTML5: Up & Running,” and it is available now.
<p>If you liked this introduction and want to show your appreciation, you can <a href="http://diveintohtml5.info/http://www.amazon.com/HTML5-Up-Running-Mark-Pilgrim/dp/0596806027?ie=UTF8&tag=diveintomark-20&creativeASIN=0596806027">buy “HTML5: Up & Running” with this affiliate link</a> or <a href="http://diveintohtml5.info/http://oreilly.com/catalog/9780596806033">buy an electronic edition directly from O’Reilly</a>. You’ll get a book, and I’ll get a buck. I do not currently accept direct donations.
</blockquote>
</div>
</div>
<p class="c">Copyright MMIX–MMXI <a href="https://web.archive.org/web/20170614100030/http://diveintohtml5.info/about.html">Mark Pilgrim</a></p>
</body>
</html>
<table>
<tr>
<th>Cohort</th>
<th>Acquisition</th>
<th>Activation</th>
<th>Retention</th>
<th>Referral</th>
<th>Revenue</th>
</tr>
<tr>
<th>Week 1</th>
<td>12</td>
<td>10</td>
<td>10</td>
<td>4</td>
<td>$100</td>
</tr>
<tr>
<th>Week 2</th>
<td>14</td>
<td>10</td>
<td>8</td>
<td>1</td>
<td>$121</td>
</tr>
<tr>
<th>Week 3</th>
<td>24</td>
<td>17</td>
<td>11</td>
<td>11</td>
<td>$1121</td>
</tr>
</table>