Core Web Standards and Competencies - WritersUA East 2015, Scott DeLoach, ClickStart
0 likes•1,014 views
This document provides an overview of essential web technologies and standards, including HTML5, CSS3, and JavaScript, along with recommended resources and tools for learning. It covers markup languages, styles, scripting languages, and offers examples and troubleshooting tips. The presenter, Scott Deloach, discusses the importance of these technologies in web development and his background in providing training and consulting.
Core Web Standards and Competencies - WritersUA East 2015, Scott DeLoach, ClickStart
- 1. © 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.
- 2. © 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
- 3. © 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; }
- 4. © 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
- 5. © 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
- 6. © 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
- 7. © 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].