Core Web Standards and Competencies - WritersUA East 2015, Scott DeLoach, ClickStart

© 2015 ClickStart – www.clickstart.net
Core Web Standards and Competencies
Scott DeLoach – scott@clickstart.net ClickStart – www.clickstart.net
In this session, we will discuss what is essential to know, what is good to know, and what you
probably don’t need to know about web standards, technologies, and tools. I will introduce the
essential web technologies, explain what they do and why they are (or are not) worth learning,
and provide a list of recommended resources to help you learn them as quickly as possible. I will
also recommend industry standard tools you should learn.
Overview
 Markup
 Styles
 Scripts
 What’s next?
Markup languages
 HTML
 XML
 XHTML
 DITA
 DocBook
 …
HTML5 – overview
Developed: 1993
Latest release: 5 (2014)
Recommendation: www.w3.org/TR/html
HTML5 – example
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Hello World!</h1>
<p>Welcome to my sample HTML5 document.</p>
</body>
</html>
HTML5 – structuring documents
HTML5 provides the following elements that should be used to structure documents.

Element Sample content
header A logo and/or page title
nav Site-wide links
section A collection of news articles
article A blog post or news article
aside Links to recent and popular articles
footer A copyright statement
HTML5 – Structuring documents example
<header>
<h1>header</h1>
<p>overview of my header...</p>
</header>
<nav>
<ul><li>link 1</li><li>link 2</li><li>link 3</li></ul>
</nav>
<section>
<aside><p>aside</p></aside>
<article><p>article one...</p></article>
<article><p>article two...</p></article>
</section>
HTML5 – books
HTML5 to the Point – Scott DeLoach
HTML, XHTML, and CSS – Elizabeth Castro
HTML5: The Missing Manual – Matthew McDonald
What is HTML5? – Brett McLaughlin
HTML5 – tutorials
www.html-5-tutorial.com
www.w3schools.com/html
www.udemy.com/courses/search/?q=html5
HTML5 – example sites
www.html5tothepoint.com
www.html5rocks.com
www.html5demos.com
www.thewildernessdowntown.com
HTML5 – troubleshooting
Compatibility
www.html5.com

www.caniuse.com
Validators
CSE HTML Validator Lite
validator.w3.org
Testing
www.w3schools.com/html/tryit.asp?filename=tryhtml_intro
HTML5 – tools
 Authoring tools (Author-it, Doc-to-Help, Flare, RoboHelp, etc)
 Dreamweaver
Free
 CoffeeCup
 HTML-Kit
 www.html5-editor.org
Stylesheet languages
 CSS
 XSL
CSS – overview
Developed: 1996
Latest release: 3 (2012)
Recommendation: www.w3.org/TR/CSS
CSS – example
h1 { color: green; }
h2, h3 {
color: green;
}
p {
color: green;
font-family: Arial;
}

CSS3 — new properties
Property Description
Animations Specifies a transition effect from one style to another.
Background size Specifies the size of a background image.
Border image Specifies an image to use as a border.
Border radius Specifies a curved border.
Box shadow Specifies a shadow for a block of content.
Columns Divides content into multiple columns.
FlexBox Specify dynamic flexible layouts.
FontFace Specify non-standard fonts.
Gradients Specify lighting and shading effects.
HSLA Specifies a color using hue saturation lightness and alpha.
Opacity Specifies the amount of transparency for a background color.
RGBA Specifies a color using red green blue and alpha (ie, opacity).
Text shadow Specifies a shadow for text.
Transforms Change the position of content
(ex: skew or rotate).
Transitions Specify the speed of animation changes between properties.
CSS – books
Cascading Style Sheets: Designing for the Web – Hakon Lie and Bert Bos
CSS Mastery: Advanced Web Standards Solutions – Simon Collison
CSS Pocket Reference – Eric Meyer
CSS to the Point – Scott DeLoach
CSS: The Missing Manual – David McFarland
CSS – tutorials
www.cssbasics.com
www.w3schools.com/css
www.udemy.com/courses/search/?q=css3
CSS – examples
www.csstothepoint.com

www.csszengarden.com
www.species-in-pieces.com
CSS – troubleshooting
Compatibility
www.caniuse.com
Validators
CSE HTML Validator Lite
jigsaw.w3.org/css-validator
Testing
www.csste.st
CSS – tools
 Authoring tools (Author-it, Doc-to-Help, Flare, RoboHelp, etc)
 Stylizer
 TopStyle
Free
 TopStyle Lite
Scripting languages
 Ajax
 ASP
 CGI
 JavaScript (ECMAScript)
 Perl
 PHP
 Python
 Ruby
 VBScript
JavaScript – overview
Developed: 1995
Latest release: 1.8.5 (2011)
Recommendation: www.ecmascript.org

JavaScript – frameworks
• Dojo
jQuery
 MooTools
 Prototype
 script.aculo.us
 YUI
JQuery – essentials
<script>
$( document ).ready(function() {
alert(“Hello Word!”);
});
</script>
JavaScript – books
JavaScript & jQuery: The Missing Manual – David McFarland
JavaScript and JQuery – Jon Duckett
Learn JavaScript Visually – Ivelin Demirov
A Smarter Way to Learn JavaScript – Mark Myers
A Software Engineer Learns HTML5, JavaScript, and JQuery – Dane Cameron
JavaScript – tutorials
learn.jquery.com
www.codecademy.com/en/tracks/jquery
www.JQuery.com
www.w3schools.com/jquery
JavaScript – examples
plugins.jquery.com
www.jqueryscript.net
www.sitepoint.com/jquery-popular-plugins-list
JavaScript – troubleshooting
Compatibility
kangax.github.io/compat-table/es5
Validator
esprima.org/demo/validate.html

Testing
www.jslint.com
Javascript – tools
Free
 Aptana
 MarkItUp!
 Notepad++
What’s next?
 Bootstrap
 Responsive design
 Single sourcing
 Writing for mobile devices
About the presenter
Scott DeLoach is the Founder of ClickStart, where he provides training and consulting for
MadCap Flare, Adobe Captivate, embedded user assistance, CSS, and HTML5. He has
been developing browser-based help systems since 1997, and he has received four Best
in Show awards for his work from STC.
Scott is a certified Flare and Captivate instructor, and he is the author of MadCap Flare
Developer's Guide, CSS to the Point, HTML5 to the Point, and Word 2013 to the Point. For
more information about Scott's books see www.lulu.com/clickstart.
You can reach Scott at www.clickstart.net or by email at scott@clickstart.net.

Core Web Standards and Competencies - WritersUA East 2015, Scott DeLoach, ClickStart

Recommended

Recommended

More Related Content

What's hot

What's hot (13)

Viewers also liked

Viewers also liked (6)

Similar to Core Web Standards and Competencies - WritersUA East 2015, Scott DeLoach, ClickStart

Similar to Core Web Standards and Competencies - WritersUA East 2015, Scott DeLoach, ClickStart (20)

More from Scott DeLoach

More from Scott DeLoach (20)

Recently uploaded

Recently uploaded (20)

Core Web Standards and Competencies - WritersUA East 2015, Scott DeLoach, ClickStart