Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

create book-page and it's print analogue #13

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

create book-page and it's print analogue #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
440a1c1
init commit
Sep 21, 2013
a69c1a3
create book-page and its print analogue
Sep 23, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
117 changes: 117 additions & 0 deletions book-page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,117 @@
<!DOCTYPE html>
<html >

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link rel="stylesheet" type="text/css" href="normal.css"/>
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
<title>JavaScript Enlightenment</title>
</head>

<body>
<div class="header">
<a href="javascript:window.print();">
Версия для печати
</a>
</div>
<div class="mainDiv">
<header class="chapter">
Preface
</header>
<hr />
<article>
<p >
Before you begin, it is important to understand various styles employed in this book. Please do not skip
this section, because it contains important information that will aid you as you read the book.
</p>
<header class="section">
More code, less words
</header>
<hr />
<p>
Please examine the code examples in detail. The text should be viewed as secondary to the code itself.
It is my opinion that a code example is worth a thousand words. Do not worry if youʼre initially confused
by explanations. Examine the code. Tinker with it. Reread the code comments. Repeat this process
until the concept being explained becomes clear. I hope you achieve a level of expertise such that welldocumented code is all you need to grok a programming concept.
</p>
<header class="section">
Exhaustive code and repetition
</header>
<hr />
<p>
You will probably curse me for repeating myself and for being so comprehensive with my code
examples. And while I might deserve it, I prefer to err on the side of being exact, verbose, and
repetitive, rather than make false assumptions authors often make about their reader. Yes, both can be
annoying, depending upon what knowledge you bring to the subject, but they can also serve a useful
purpose for those who want to learn a subject in detail.
</p>
<header class="section">
Color-coding Conventions
</header>
<hr />
<p>
In the JavaScript code examples (example shown below), orange is used to highlight code directly
relevant to the concept being discussed. Any additional code used to support the orange colored code
will be green. The color gray in the code examples is reserved for JavaScript comments (example
shown below).
</p>
<div class="codeBlock">
<p style="font-family:'Courier New', Courier, monospace;">
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Так делать не стоит

<span class="code">
&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;body&gt;&lt;script&gt;
<br />
<span class="codeComment">
// this is a comment about a specific part of the code
</span>
<br />
var foo =
<span class="codeLiteral">'calling out this part of the code'</span>
;
<br />
&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;
</span>
<br />
</p>
</div>
<p>
In addition to code examples being color-coded, the text in this book is colored so as to denote
JavaScript words/keywords v.s. JavaScript code v.s. regular text. Below, I take an excerpt from the
book to demonstrate this coloring semantic.
</p>
<p>
"Consider that the codyobject created from the <span class="codeInText">Object()</span> constructor function (i.e <span class="codeInText">var cody = new Object()</span>)
is not really different from a string object created via the <span class="codeInText">String()</span> constructor function. To
drive this fact home, examine the code below:"
</p>
<p>
Notice the use of gray italic text for code references, orange text for JavaScript words/keywords, and
regular black text for everything in-between.
</p>
<header class="section">
jsFiddle, JS Bin, and Firebug lite-dev
</header>
<hr />
<p>
The majority of code examples in this book are linked to a corresponding <a href="http://jsfiddle.net/">jsFiddle</a> page, where the code
can be tweaked and executed online. The jsFiddle examples have been configured to use the
<a href="http://fbug.googlecode.com/svn/lite/branches/firebug1.3/content/firebug-lite-dev.js">Firebug lite-devplugin</a>
so that the log function (i.e. <span class="codeInText">console.log</span>) will work in most any modern browser
regardless of if the browser has its own console. Before reading this book make sure you are
comfortable with the <a href="http://stackoverflow.com/questions/4743730/what-is-console-log-and-how-do-i-use-it">usage and purposeof</a> <span class="codeInText">console.log</span>.
</p>
<p>
In situations where jsFiddle &amp; Firebug lite-dev caused complications with the JavaScript code <a href="http://jsbin.tumblr.com/about">JS Bin</a> &amp;
Firebug Lite-dev will be used. I've tried to avoid a dependency on a browser console by using Firebug
lite-dev but with certain code examples the solution itself gets in the way of code execution. In these
situations the console built into your web browser will have to be leveraged to output logs. If you are not
using a browser with a built in JavaScript console I would suggest <a href="http://browsehappy.com/">upgrading or switching browsers</a>.
</p>
<p>
When JS Bin is used, keep in mind that the code has to be executed manually (clicking 'Render') which
differs from the page load execution done by jsFiddle.
</p>
</article>
</div>
</body>

</html>
75 changes: 75 additions & 0 deletions normal.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@


.header {
border-bottom:thin black solid;
padding:10px;
margin-bottom:100px;
}



.mainDiv {
width:70%;
margin-left:15%;
}

hr {
background:silver;
height:1px;
width:100%;
margin:0px;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

что меньше, 0px или 0em?
на самом деле когда ноль, то единица изменрения уже не важна

}


header {
color:#444444;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

color: #444

}


.chapter {
text-align:right;
font-size:50pt;
}
.section {
text-align:left;
font-size:24pt;
font-weight:bold;
}

p {
margin-top:50px;
margin-bottom:50px;
font-family:Arial, Helvetica, sans-serif;
font-size:15pt;
}

/*блок кода html*/
.codeBlock {
border-top:30px yellow solid;
border-bottom:2px yellow solid;
font-weight:bold;
}

article {
margin-top:100px;
}

/*для комментариев в коде устанавливаем собствееный стиль*/
.codeComment {
color:gray;
}

/*строковый литерал в коде*/
.codeLiteral {
color:orange;
}

.code {
color:green;
}
/*код, который встречается в тексте*/
.codeInText {
color:orange;
font-weight:bold;
font-family:"Courier New", Courier, monospace;
}
80 changes: 80 additions & 0 deletions print.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@

/*CSS стиль для печатной версии страницы*/



/*К сожалению, я не смог вывести номер страницы в печатной версии. Был испробован метод с
@page {
@bottom-right {
content: counter(page) "/" counter(pages);
}
Но он не работал ни в одном моем браузере. А объявлять спец. элементы (например, <span>) в html разметке, в последующем, устанавливая их содержимое на номер текущей страницы, показалось
мне сомнительной идеей, т.к. при малейшем изменении разметки или текста придется полностью перерабатывать данные элементы.
}*/

div.header {
display:none;
}

div.mainDiv {
margin:0px;
width:100%;
}

/* для ссылок в печатной версии указываем полные адреса. Т.к. на бумаге нельзя 'кликнуть'.*/
a:after {content:" (" attr(href) ")"; }




header {
color:black;
}


.chapter {
text-align:right;
font-size:30pt;
}

.section {
text-align:left;
font-size:15pt;
font-weight:bold;
}

p {
margin-top:45px;
margin-bottom:45px;
font-family:Arial, Helvetica, sans-serif;
font-size:10pt;
}

.codeBlock {
border-top:30px black solid;
border-bottom:2px black solid;
font-weight:bold;
}

article {
margin-top:100px;
}

.codeComment {
color:black;
}

.codeLiteral {
color:black;
}

.code {
color:black;
}

.codeInText {
color:black;
font-style:italic;
font-family:"Courier New", Courier, monospace;
}