Embed Size (px)
Citation preview
© 2015 ClickStart – www.clickstart.net
Core Web Standards and Competencies Scott DeLoach – [email protected] 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.
© 2015 ClickStart – www.clickstart.net
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
© 2015 ClickStart – www.clickstart.net
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;
}
© 2015 ClickStart – www.clickstart.net
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
© 2015 ClickStart – www.clickstart.net
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
© 2015 ClickStart – www.clickstart.net
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
© 2015 ClickStart – www.clickstart.net
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 [email protected].
