Technology
The prototype is To create the digital text book prototype, the content is first converted to HTML markup format.
To make the conversion easier, the actual content is separated from the markup, which both is separated from the logic denoting h
You can see this as analogous to the Model-View-Controller software architecture pattern, where the textual content is the model, the view is the CSS and the HTML and JavaScript is the controller.
The framework used to create the prototype is Jekyll, originally a blog framework
HTML
HyperText Markup Language (HTML) is the main markup language for displaying web pages and other information that can be displayed in a web browser.
... content encapsuled by tag elements denoting the semantic meaning og the content. Examples of semantic tag elements are the <p>
tag, which should contain a text paragraph and the <article>
which should contain an article of some kind (such as a collection of paragraphs and images together constituting a text article).
Each statement (with some exceptions) starts with a tag element <tag>
and is completed with a closing tag element </tag>
. The content between these tags are
Example
Below is an example showing how a simple page containing a simple headline and a paragraph can be formatted to create a simple HTML document.
<!doctype html>
<html>
<head>
<title>This is a title</title>
</head>
<body>
<h1>This is a headline</h1>
<p>This is a paragraph.</p>
</body>
</html>
Note that modern web browsers are incredibly resilient to errors, which they accomplish by correcting errors and missing statements. This makes it possible to make the same website (sans the headline and page title) by creating a HTML document containing nothing but:
This is a paragraph
Web browsers will fill in the missing elements and create the document
<html>
<body>
This is paragraph
</body>
</html>
Cascading Style Sheets (CSS)
The first proposition of the inclusion of CSS in web standards can be dated back to October 1994 by Håkon Wium Lie
CSS is not a programming language, but is rather defined as a style sheet language. The difference between the two ...
Cascading Style Sheets (CSS) is a language for describing the rendering of HTML and XML documents on screen
Modern CSS
Commonly referred to as CSS3, modern CSS properties takes quite a few cues from traditional and modern typographical techinques, making it possible to easier replicate what you can find in print.
With the introduction of transition and transform properties, CSS has gained an interaction layer by greatly simplifying animation of elements.
Example
Below is an example CSS in use.
p {
color: pink;
background: rgb(0,0,0);
}
This will style every element matching the propery declaration, in this case the content of every <p>
tag in the document, with the style defined by the content of the statement, in this case with a pink color and black background.
Cascadence (is this even a word?)
A feature of CSS is the way a document can be influenced by multiple style sheets, where a property can b - what is defined at any time during run-time overwrites the previously defined property. This has several effects on the rendering of a document.
... is often thought to be one of the reasons why CSS of the nine proposed standards "won".
Progressive enhancement
CSS is read top to bottom, and the last, most specific query will be the one to be applied in the end.
body {
background: red;
background-image: linear-gradient(bottom, rgb(142,219,124) 43%, rgb(171,255,162) 72%, rgb(206,255,195) 86%);
}
Every browser supporting the linear-gradient
declaration will render the element matching the query (the body element) with a bright green gradient color. Browsers not supporting the declaration will ignore the declaration and render it with a solid red color.
Note that if the order of the declarations were reversed, all browsers (supporting background coloring) will render the body element with a red background color. This is because CSS is interpreted top to bottom, and the declaration read last will be the one used.
Declarations are interpreted right to left. This means, for the properties that support it, the browser will apply the left-most supported property. One such property is the font-family
declaration.
p {
font-family: Helvetica, Arial, sans-serif;
}
In the example above, the statement declares the font for the paragraph elements in the text. Browsers supporting the Helvetica font will render the text with the Helvetica font. Browsers not supporting it will render the Arial font instead. Browsers supporting both will render the left-most declaration(Helvetica), browsers supporting neither renders the system default sans-serif font.
Prioritization
(fra Wikipedia - finn primærkilde!)
- Author styles
- Inline style
- Embedded style
- External style sheet
- User style
- User agent style
First, the user agent, as defined by the browser, as applied to the document. Then, a set of user styles (...?)
Lastly, the web author design is applied, overwriting all properties already defined and inherit the rest.
This lets a developer change the document's style afer the initial rendering, enabling the possibility to create dynamic web pages using JavaScript.
Interesting standards
Of special interest in this thesis is the following standards.
For a discussion on the contents of these standards document, see chapter something
Alternatives
Outside plugins such as Microsoft Silverlight and Adobe Flash there are no real alternatives to CSS for designing web pages.
Preprocessors
CSS preprocessors are metalanguages that are interpreted to CSS. These works by letting the designer create stylesheets in a , using additional mechanisms and useful extensions that traditional CSS do not support, such as variables, nesting and conditional statements.
Examples of popular preprocessors includes Sass, LESS and Stylus, with varying syntax and compiler dependencies. There are also some variation in when the file is compiled. Some are compiled by the client in runtime through JavaScript, some are compiled by the server when requested, others are compiled at design time.
Preprocessors also often provide additional error handling. As modern browsers are very resilient, ignoring faults and errors as best as it can, it can be hard for a developer to find an error or bug. Preprocessors can often detect common errors, and let the developer know of these when compiling.
Clementine uses the SCSS variant of Sass as a preprocessor.
JavaScript
Invented by Brendan Eich over the course of .... as a way for Netscape to compete in the first browser war against Microsoft, JavaScript is a multi-paradigm language supporting object-oriented, imperative and functional programming styles.
... it has grown to be an ambigous language...
Today, there are compilers that compile from JavaScript An example of this is xxxx, where JavaScript code is translated to Objective-C
While the focus of this thesis is the effect of how content is structured and presented to the end user, some JavaScript has been employed in the prototype to provide a m... An example of use is to update the page counter on each page change.
Example
function HelloWorld() {
alert('hello world!');
}
HelloWorld();
The effect of bundling this script with the HTML document, encapsulated by a <cript>
tag, is to display a dialog box containing the text "hello world!".
The code responsible for updating the page counter on each page chang is presented below.
document.getElementById('main-container').onpagechange = function(e){
if(e.srcElement.id=='main-container') {
document.getElementById('widget_pager').getElementsByClassName('page_current')[0].innerHTML = e.currentPage + 1;
document.getElementById('widget_pager').getElementsByClassName('page_total')[0].innerHTML = e.pageCount;
}
else {
e.srcElement.parentElement.getElementsByClassName('pages')[0].getElementsByClassName('page_current')[0].innerHTML = e.currentPage + 1;
e.srcElement.parentElement.getElementsByClassName('pages') [0].getElementsByClassName('page_total')[0].innerHTML = e.pageCount;
}
};
Alternatives
As the case is with CSS, there are no real alternatives to JavaScript when creating dynamic web pages outside the use of plugins.
Popular plugins include Adobe Flash which uses ActionScript, and Microsoft Silverlight that uses the .NET suite of programming languages.
Microsoft ActiveX, Google NaCl
... the ability to run native x86 code from the web browsers, eliminating the need for the comparatively slower interpreters (as is the case with JavaScript) and virtual machines (as is the case with Java and Dart) in between the code and the processor we see in the programming languages found on the web.
Transcompilers
Comparable to the preprocessors one can find for CSS, there exist so-called transcompilers for JavaScript. These work by defining a programming language that compiles to JavaScript, with the purpose of enhancing the code's brevity and readability. The most popular transcompiler at the time of writing is CoffeeScript. CoffeeScript is heavily inspired by modern dynamic programming languages such as Ruby and Python, and is by many heralded as being an easier language to learn and use effectively and safe.
JavaScript is notoriuos for being verbose with a large amount of best-practices. Preprocessors often adhere to these best-practices in their resulting code, eliminating the most unsafe techniques commonly found in JavaScript. The compilers does often minimize the code, removing unnecessary white-space and shortens variable names to reduce the file size, as well as packing several JavaScript files into one single file to reduce the number of HTTP requests the browser has to do perform to render the site for the end user.
One of the larger drawbacks of using transcompilers for JavaScript development is that the source code as developed by the programmer does not correspond to the resulting JavaScript as interpreted by the browser. This can potentially be an issue when debugging. In the case of an error, where normally a browser debug tool would point out the exact line (note: in JavaScript this line number might not be exact at all) the error occurred. When using a transcompiler, neither the line number nor the detected error corresponds to line number or the error committed in the source code, due to different syntax being used. This can potentially make the error harder to find. There are initatives to sort this out, but none that are particularly mature at the time of writing (ref: source maps).
Again, as is the case with CSS, Browser robustness ... gives a proper error message. I think.
Google Dart
Google is currently developing the Dart programming language, which they intend to be implemented in browsers in the same way that JavaScript is today.
Dart can be compiled to JavaScript for use in browsers that do not support Dart, but support JavaScript. Currently there is only a specially built version of Chromium, the open source browser from which Google Chrome draws its source code, that implements the Dart VM and is able to interpret Dart code natively. Other browsers do not currently have plans to support the Dart VM.
HTML5 and CSS3
While the monikers HTML5 and CSS3 are being phased out, as there is a wish to present the technologies as living standards and not as feature complete versions of a defined specification, there's still a ... (in the same way that the moniker Web 2.0 was used to denote the participatory web).
Taking a que from traditional typography techniques found in traditional media such as books and magazines, a slew of new techniques for stylizing content has been standardized and proposed standardized by the World Wide Web Consortium.
Compared to the typography found in magazines, the typography found on the web today is in general simple. Thus, designers and developers from various technology firms, including Opera Software – creators of the Opera Browser and Adobe – creators of the once popular Flash technology, has proposed a bunch of typographic additions to the web standards, with the intention to enrich the content with new
A problem encountered when designing ... is that web page content should be platform and size agnostic. This mean
(while you can be in total control of how the content presentation should be, there are reasons why this is not a good approach. See the section on responsive web design for a further discussion on this).
With traditional typography
making it possible to apply typographyical ... afforded by other mediums, with the added benefit of being
World Wide Web Consortium
The World Wide Web Consortium (W3C) is a set of old people doing old people stuff.
Technologies used for the realizing the prototype
Including the technologies mentioned in the text above, the prototypes have been realized using the following technologies.
Markdown
Simpler syntax for writing HTML, more focus on the actual content instead of syntax and markup.
Compare
Headline
First paragraph
Second paragraph, containing a link.
to
Headline
First paragraph.
Second paragraph, containing a link.
Jekyll/Docpad
Todo: replace Jekyll code with Docpad code. Write about Docpad instead.
Originally a blog framework developed by Github, Jekyll has been utilized in this prototype to serve as the backend for the text content.
By following the
A set of Ruby scripts works on Markdown formatted text producing HTML files with links.
jQuery
jQuery is an open source JavaScript library developed by John Resig that aims to simplify JavaScript development by
This lets a developer write shorter, more readable and more recognizable code
$('#idSelector .span').css('color', 'red').delay(500).css('opacity', '.5');
jQuery also greatly simplifies asynchronous XHR calls.
From Wikipedia
Features:
- DOM element selections using the multi-browsers open source selector engine Sizzle, a spin-off out of the jQuery project
- DOM traversal and modification (including support for CSS 1-3)
- DOM manipulation based on CSS selectors that uses node elements name and node elements attributes (id and class) as criteria to build selectors
- Events
- Effects and animations
- AJAX
- Extensibility through plug-ins
- Utilities - such as user agent information, feature detection
- Compatibility methods that are natively available in modern browsers but need fall backs for older ones - For example the inArray() and each() functions.
- Multi-browser (not to be confused with cross-browser) support.
BibJSON
Ymse
Modernizr
HTML5 Boilerplate
Sass (SCSS)
Neste artikkel
Loading title