Inkscape is an open source vector graphics editor just like Adobe Illustrator and contains features comparable to Adobe Illustrator, Fireworks and ColorDraw. Inkscape uses the W3C Scalable Vector Graphics file format. SVG can also be used on webpages and is fully incorporated into HTML 5 and is therefore a drawing technology of the near-future.
Inkscape can be downloaded from inkscape.org
@namespace url("http://www.w3.org/2002/06/xhtml2/");
/* A sample style sheet for XHTML 2.0
This style sheet describes a very incomplete, sample rendering of
XHTML 2.0 elements.
Editor: Masayasu Ishikawa
Revision: $Id: xhtml2.css,v 1.1.2.13 2006/01/13 15:06:29 ahby Exp $
*/
/* new elements */
section, h, nl, label, l, blockcode, separator, di
{ display: block; }
section, h, nl, label, l, blockcode, di
{ unicode-bidi: embed }
nl { margin: 1.33em 0 }
summary, standby, handler
{ display: none }
blockcode { font-family: monospace; white-space: pre }
separator { border-bottom: thin black solid; border: 1px;
inset; width 100%}
h { display: block; font-weight: bolder; font-family: sans-serif }
h1, h2, h3, h4, h5, h6
{ font-family: sans-serif; font-weight: bolder }
body h, h1 {
font-size: 2em;
margin: .67em 0;
}
section h, h2 {
font-size: 1.5em;
margin: .83em 0;
}
section section h, h3 {
font-size: 1.17em;
margin: 1em 0;
}
section section section h, h4, p, blockquote, ul, ol, dl
{ margin: 1.33em 0; }
section section section section h, h5 {
font-size: .83em;
line-height: 1.17em;
margin: 1.67em 0;
}
section section section section section h, h6 {
font-size: .67em;
margin: 2.33em 0;
}
*[edit="deleted"] { display: none }
/* no special presentation by default
*[edit="inserted"] { }
*[edit="changed"] { }
*[edit="moved"] { }
*/
/* experimental navigation list style */
nl {
height: 1.5em;
overflow: hidden;
margin: 0;
line-height: normal !important;
white-space: nowrap;
text-align: start;
cursor: default;
border-width: 2px !important;
border-style: inset !important;
vertical-align: baseline;
padding: 0;
}
nl:hover { height: auto; overflow: visible; }
nl > li, nl > label {
display: block;
min-height: 1em;
line-height: normal !important;
}
nl > li, nl > label {
padding: 0 5px 0 3px;
}
nl > li {
margin-left: 1em;
}
nl > label {
font-weight: bold;
}
nl > nl > label {
display: block;
line-height: normal !important;
font-style: italic;
font-weight: bold;
}
nl > nl > li {
padding-left: 2em;
font-style: normal;
font-weight: normal;
}
/* inherited elements */
html, body, div, p, h1, h2, h3, h4, h5, h6,
address, blockquote, pre, ol, ul, dl, dt, dd
{ display: block }
li { display: list-item }
head, style, link, meta
{ display: none }
table { display: table;
border-spacing: 0;
border-top: thin black solid;
border-left: thin black solid }
tr { display: table-row }
thead { display: table-header-group }
tbody { display: table-row-group }
tfoot { display: table-footer-group }
col { display: table-column }
colgroup { display: table-column-group }
td, th { display: table-cell;
border-right: thin black solid;
border-bottom: thin black solid;
padding 2px }
caption { display: table-caption }
table:hover summary { display: block }
th { font-weight: bolder; text-align: center }
caption { text-align: center }
body { padding: 8px; line-height: 1.2 }
strong { font-weight: bolder }
blockquote { margin-left: 4em; margin-right: 4em }
cite, em, q, var, address
{ font-style: italic }
pre code, kbd, samp
{ font-family: monospace }
pre { white-space: pre }
sub, sup { font-size: smaller }
sub { vertical-align: sub }
sup { vertical-align: super }
ol, ul, dd { margin-left: 4em }
ol { list-style-type: decimal }
ol ul, ul ol, ul ul, ol ol
{ margin-top: 0; margin-bottom: 0 }
abbr[title] { border-bottom: dotted 1px }
:link { text-decoration: underline; color: blue; }
:focus { outline: thin dotted invert }
/* Hover effects should be default */
:link:hover,:link:visited { color: #b7f }
/* begin bidirectionality settings (do not change) */
*[dir="ltr"] { direction: ltr; unicode-bidi: embed }
*[dir="rtl"] { direction: rtl; unicode-bidi: embed }
*[dir="lro"] { direction: ltr; unicode-bidi: bidi-override }
*[dir="rlo"] { direction: rtl; unicode-bidi: bidi-override }
/* block-level elements */
body, div, p, hr, h1, h2, h3, h4, h5, h6,
address, blockquote, pre, ol, ul, li, di, dt, dd,
table, thead, tbody, tfoot, tr, td, th,
col, colgroup, caption, object, summary, standby, blockcode
{ unicode-bidi: embed }
/* end bidi settings */
/* end xhtml2.css */
Who doesn`t play games on his? Ever thought about programming your own? It`s not as difficult as you might think. If you choose to decide to program browser-based games (which also are cross-platform compatible) you should keep on reading this review. Also if you are a webdesigner who would like to know more about HTML5`s functions and/or JavaScript.
As the title suggests, this book teaches you HTML5, JavaScript and CSS by creating games. HTML5 and JavaScript are todays and tomorrows technologies for creating interactive websites.
I have been offered the chance to review this book by FriendsOfEd.
I`m Ramon van Belzen, a 22 year old webdesigner from Vlissingen, the Netherlands. I’m surfing the web since 1997 and I` been programming HTML since 1998. Today I use web technologies like HTML 4, HTML 5, XHTML 1.1, CSS2 / 3, JavaScript, AJAX, jQuery, PHP/MySQL, XML. I currently run over 10 websites, most of them as webmaster and webdesigner.
This books teaches you how to program HTML5 & JavaScript with a bit of CSS to create browser based games like a dice game, bouncing ball, slingshot, quiz, memory, mazes, rock/paper/scissors, hangman and blackjack.
This book is written for beginners into the world of HTML, CSS and JavaScript but also for people with experience with these programming languages.
No experience with programming languages is needed to get started with this book.
The book promises to teach you the canvas element, audio and video implementation, event handling, form input validation and the usage of information storing. These are all new functions in HTML5.
The book starts with the basics of HTML and CSS. It explains how a simple page is made using HTML. The second step is adding CSS, follow by JavaScript.
Chapter two starts with the basics of the game you’re going to program – a simple dice rolling game. It explains the rules and how to write these in a programmers way. Next step is programming these functions followed by drawing the dice using the canvas element. Next is adding a second dice and programming this into the already existing code.
Creating a game with a bouncing ball and collision is the main target in chapter three. This chapter explains how to draw a ball and walls using the canvas element, create the game logics (including the collision engine) and using form input validation.
The fourth chapter contains two rather similar games; cannon ball and slingshot. The first game is a simple game where a cannonball is fired from a cannon. It gives the player the possibility to change the angle of the cannon and the velocity of the cannonball. It also includes some basic artificial gravity. This game also uses JavaScript, CSS and the canvas element.
The second game is slingshot. The difference compared to cannonball is that this uses mouse moments to aim, and the target is an image.
Chapter five is the classic game memory- where you have to match 2 pictures. Like previous games, this game uses HTML5, CSS and JavaScript including the canvas tag.
Game number five, chapter six, is a quiz. In this chapter you will learn the basics of JavaScript arrays (to store questions and answers), CSS and the video element.
The seventh chapter teaches how to create a game where you can draw walls and create mazes. This game uses HTML5`s local storage API. In the first part of the game the walls are drawn, in the second part you have to move a ball through this maze.
Rock, paper, scissors is a game you possibly know. This game uses the canvas and audio elements as well as JavaScript.
Chapter nine explains how to create your own browser-based hangman game. The game uses the same codes as in previous chapters to create a game, and includes some new CSS styles and functions.
The last game of this book is blackjack – another card game. The chapter starts with explaining the footer and header tags and includes new game logics and more canvas features.
As mentioned several times in previous paragraphs, the book promises to teach you HTML5, JavaScript , CSS, the canvas element, audio and video implementation, event handling, form input validation, header/footer elements and the usage of information storing. The book has overlap with the following book Pro HTML5 Programming: Powerful APIs for Richer Internet Application Development I reviewed some months ago and the book The Definitive Guide to HTML5 Video I will be reviewing shortly.
The book indeed teaches you the basics of HTML5 page formatting, CSS and a lot of JavaScript. With a lot I mean the basics and more, including event handling and the storage engine. Of course it also explains how to use the canvas element to draw lines, circles and images.
After reading the book, everything explained in the book was clear to me, and I had no questions.
What I really liked about the book is that every single line of code is explained. Every? Yes every line, but only once or twice. This makes sure that you fully understand the thing your programming.
What I disliked about the book is that doesn’t cover the full possibilities of HTML5 like the book Pro HTML5 Programming: Powerful APIs for Richer Internet Application Development. But I have to admit, that’s not what the book promises! The book aims to teach you HTML5 and JavaScript.
If you want to learn HTML5 and CSS3 from the scratch I recommend that you take a look at Beginning HTML5 and CSS3: Next Generation Web Standards.
After reading the book I am able to program my own JavaScript/HTML5 based game.
Why would you buy this book? If you are familiar with HTML 4 and/or JavaScript and want to get to know what’s possible with HTML5 and JavaScript. This book is ideal for people who want to learn how to program their own simple games. For your information: its currently not possible to make a FPS shooter with HTML.
More information about this book can be found at the publishers site.
Paperback: 376 pages
Publisher: Apress; 1 edition (November 2, 2010)
Language: English
ISBN-10: 1430233834
ISBN-13: 978-1430233831
Product Dimensions: 9.2 x 7.4 x 1.1 inches
When you are using CSS 3 you already know that most of the time you need to use settings in triplo (three times) or sometimes even four times!!!
With this I mean special codes for Firefox, Opera, Chrome and Safari/IE9.
I have included a little piece of code to illutrate;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
This bit is compatible with all 5 browsers and needs 3 lines of the same thing!
There are tags around which you have to specify four times.
I think its time to stick to the standards.
Then my example above will look a bit shorter;
border-radius: 1px;
Why would you program everything multiple times? We all have better stuff to do. Like introducing more coffee breaks a day to celebrate that your working efficiencient. Why bother with things like CDN and minification if you still have to write good code multiple times.
Next month Apress will publish the book “Pro HTML5 Programming: Powerful APIs for Richer Internet Application Development”.
I am going to review this book on my website in august.
I already had a sneak peak at the book and I can say it looks very promissing!
If you want to pre-order or buy the book, click the image below.
If you want to know more about the book have a look at www.apress.com/book/view/1430227907